/* home.css — Public landing page styles.
Refined gold/cyan/void system. Cinzel rationed to display moments,
system-ui for product copy, single ambient gradient instead of orbs.
Tokens come from tokens.css (loaded first by home_public.html). */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
/* ── First-visit intro overlay ─────────────────────────────────────────
Plays when has class `intro-active` (set by inline script in
before first paint). When the JS at end-of-body finishes the
timer or the user skips, `intro-active` is swapped for `intro-done`
on ; the overlay fades out, hero entrance triggers. */
html.intro-active body { overflow: hidden; }
.intro {
position: fixed; inset: 0; z-index: 1000;
background: var(--void);
display: none;
align-items: center;
justify-content: center;
text-align: center;
pointer-events: auto;
}
html.intro-active .intro { display: flex; }
html.intro-done .intro {
opacity: 0;
visibility: hidden;
pointer-events: none;
/* Longer + softer fade-out — feels like a camera pulling focus away
instead of a hard cut. Material-style 'standard' easing. */
transition: opacity 0.8s cubic-bezier(.4, 0, .2, 1), visibility 0s linear 0.8s;
}
.intro::before {
/* Subtle vignette that pushes attention to center */
content: '';
position: absolute; inset: 0;
background:
radial-gradient(ellipse 80% 60% at 50% 50%, transparent 30%, rgba(0,0,0,0.6) 100%),
radial-gradient(ellipse 60% 40% at 50% 50%, rgba(78,205,196,0.04), transparent 70%);
pointer-events: none;
}
.intro-skip {
position: absolute; top: 1.25rem; right: 1.5rem;
background: transparent;
border: 1px solid var(--border);
color: var(--muted2);
padding: 0.45rem 0.95rem;
border-radius: 6px;
font-family: var(--font-mono);
font-size: 0.78rem;
letter-spacing: 0.14em;
text-transform: uppercase;
cursor: pointer;
opacity: 0;
animation: introFadeIn 0.4s 0.6s forwards;
transition: color 0.2s, border-color 0.2s;
z-index: 2;
}
.intro-skip:hover { color: var(--gold); border-color: var(--gold-dim); }
.intro-skip:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.intro-stage {
position: relative;
z-index: 1;
}
/* All intro entrance animations share one easing curve so each beat
lands on the same rhythm — feels like one continuous breath, not
four separate animations. */
.intro-halo {
position: absolute;
top: -90px; left: 50%;
width: 320px; height: 320px;
margin-left: -160px;
border-radius: 50%;
background: radial-gradient(circle, rgba(201,168,76,0.28) 0%, rgba(201,168,76,0.06) 45%, transparent 70%);
filter: blur(8px);
opacity: 0;
transform: scale(0.4);
/* Two-stage: entrance settles at scale(1.05) opacity 0.7, then loops
a gentle breathe so the held state feels alive instead of frozen. */
animation:
introHalo 1.4s 0.05s both cubic-bezier(.4, 0, .2, 1),
introHaloBreath 4.5s 1.5s ease-in-out infinite;
}
.intro-glyph {
display: block;
width: clamp(7rem, 16vw, 11rem);
height: auto;
aspect-ratio: 1 / 1;
margin: 0 auto 1.25rem;
filter: drop-shadow(0 0 30px rgba(201,168,76,0.45));
opacity: 0;
transform: scale(0.65);
animation: introGlyph 0.85s 0.25s forwards cubic-bezier(.4, 0, .2, 1);
}
.intro-wordmark {
font-family: var(--font-display);
font-size: clamp(1.5rem, 3.5vw, 2.25rem);
font-weight: 800;
color: var(--gold-light);
letter-spacing: 0.42em;
margin-bottom: 0.95rem;
padding-left: 0.42em; /* offset for trailing letter-spacing */
opacity: 0;
transform: translateY(14px);
animation: introFadeUp 0.7s 0.7s forwards cubic-bezier(.4, 0, .2, 1);
}
.intro-tagline {
font-family: var(--font-mono);
font-size: 0.78rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--muted);
opacity: 0;
transform: translateY(8px);
animation: introFadeUp 0.6s 1.15s forwards cubic-bezier(.4, 0, .2, 1);
max-width: 38ch;
margin: 0 auto;
line-height: 1.5;
}
.intro-stage > * { will-change: opacity, transform; }
@keyframes introHalo {
0% { opacity: 0; transform: scale(0.4); }
100% { opacity: 0.7; transform: scale(1.05); }
}
@keyframes introHaloBreath {
/* Picks up exactly where introHalo lands so the handoff is invisible. */
0%, 100% { opacity: 0.7; transform: scale(1.05); }
50% { opacity: 0.95; transform: scale(1.14); }
}
@keyframes introGlyph {
0% { opacity: 0; transform: scale(0.65); }
60% { opacity: 1; transform: scale(1.05); }
100% { opacity: 1; transform: scale(1); }
}
@keyframes introFadeUp { to { opacity: 1; transform: translateY(0); } }
@keyframes introFadeIn { to { opacity: 1; } }
/* Exit: gentle in-place dissolve. No upward translate, just a small
contract + fade. Pairs with the longer overlay fade-out above so
everything decays together instead of one element flying away. */
html.intro-done .intro-stage {
transform: scale(0.94);
opacity: 0;
transition:
transform 0.7s cubic-bezier(.4, 0, .2, 1),
opacity 0.6s cubic-bezier(.4, 0, .2, 1);
}
/* Initially hide the nav and hero contents — they fade in once intro
completes. If JS is disabled, `intro-active` is never set so the
`:not(.intro-active)` baseline keeps everything visible. */
html.intro-active .landing-nav,
html.intro-active .hero-eyebrow,
html.intro-active .hero-title,
html.intro-active .hero-sub,
html.intro-active .hero-actions,
html.intro-active .hero-trust,
html.intro-active .hero-preview,
html.intro-active .stat-strip,
html.intro-active .ambient {
opacity: 0;
}
html.intro-done .landing-nav { animation: heroIn 0.6s 0.15s both ease; }
html.intro-done .hero-eyebrow { animation: heroIn 0.7s 0.25s both cubic-bezier(.22,.61,.36,1); }
html.intro-done .hero-title { animation: heroIn 0.8s 0.4s both cubic-bezier(.22,.61,.36,1); }
html.intro-done .hero-sub { animation: heroIn 0.7s 0.6s both cubic-bezier(.22,.61,.36,1); }
html.intro-done .hero-actions { animation: heroIn 0.7s 0.78s both cubic-bezier(.22,.61,.36,1); }
html.intro-done .hero-trust { animation: heroIn 0.7s 0.95s both cubic-bezier(.22,.61,.36,1); }
html.intro-done .hero-preview { animation: heroPreviewIn 1s 0.55s both cubic-bezier(.22,.61,.36,1); }
html.intro-done .stat-strip { animation: heroIn 0.6s 1.1s both ease; }
html.intro-done .ambient { animation: heroIn 1s 0.1s both ease; }
html.intro-done .ambient { animation: heroIn 1s 0.1s both ease; }
@keyframes heroIn {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: none; }
}
@keyframes heroPreviewIn {
from { opacity: 0; transform: translate(20px, 18px) rotate(-1.4deg); }
to { opacity: 1; transform: none; }
}
body {
font-family: var(--font-body);
background: var(--void);
color: var(--text);
font-size: 16px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
/* Flex column so the tab-host fills available height and the footer
pins to the bottom of the viewport. Eliminates the dead space that
used to sit between short panels and the footer. */
min-height: 100vh;
display: flex;
flex-direction: column;
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; }
ul { list-style: none; }
/* Ambient hero background — single layered gradient horizon, no orbs.
Sits behind the hero only; everything below renders on flat --void. */
.ambient {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
opacity: 0.9;
}
/* When .ambient is a direct child of the panel (not the hero), pin it
to the viewport so it spans the full screen — otherwise the panel's
1200px max-width creates a visible rectangular cutoff. */
.panel-home > .ambient {
position: fixed;
inset: 0;
}
.panel-home > .hero,
.panel-home > .stat-strip { position: relative; z-index: 1; }
.ambient::before {
content: '';
position: absolute;
top: -20%; left: -20%; right: -20%; bottom: 20%;
background:
radial-gradient(ellipse 60% 50% at 75% 30%, rgba(78, 205, 196, 0.14), transparent 65%),
radial-gradient(ellipse 50% 45% at 25% 35%, rgba(201, 168, 76, 0.12), transparent 65%),
radial-gradient(ellipse 40% 35% at 50% 70%, rgba(255, 198, 110, 0.08), transparent 70%);
filter: blur(50px);
animation: ambient-drift 32s ease-in-out infinite;
will-change: transform;
}
.ambient::after {
content: '';
position: absolute; inset: 0;
background:
linear-gradient(180deg, transparent 60%, var(--void) 100%);
}
/* Slow flowing motion through 4 stops — the gold/cyan blobs orbit and
breathe (translate + scale) so the lighting field is constantly
evolving without any element jumping. ~32s loop = slow enough to feel
atmospheric, not distracting. */
@keyframes ambient-drift {
0% { transform: translate(0, 0) scale(1); }
25% { transform: translate(6%, -3%) scale(1.08); }
50% { transform: translate(-4%, 4%) scale(0.95); }
75% { transform: translate(-8%, -2%) scale(1.10); }
100% { transform: translate(0, 0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
.ambient::before { animation: none; }
}
/* Reusable section wrapper — fully fluid: no max-width, gutters scale with
viewport via --gutter-fluid. Content fills the canvas on 4K instead of
sitting in a 1200px column with huge dead zones. Reading-width caps are
applied to prose elements (.hero-sub, .section-lede) individually. */
.section {
position: relative;
z-index: 1;
width: 100%;
margin: 0 auto;
padding: var(--section-pad-y) var(--gutter-fluid);
}
.section-narrow {
/* No-op on the fluid system; preserved for any markup that still uses
it as a hook. Apply individual prose caps via --measure instead. */
}
.section-band {
background: var(--abyss);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.eyebrow {
font-family: var(--font-display);
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--cyan);
margin-bottom: 1rem;
}
.section-title {
font-family: var(--font-display);
font-size: clamp(1.85rem, 3.6vw, 3.75rem);
font-weight: 700;
line-height: 1.15;
color: var(--text);
letter-spacing: 0.01em;
}
.section-title em {
font-style: normal;
background: linear-gradient(90deg, var(--gold), var(--gold-light));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.section-lede {
font-family: var(--font-prose);
font-size: clamp(1rem, 1.15vw, 1.3rem);
color: var(--muted);
/* Cap prose at a comfortable reading measure even though the parent
section is fluid — long lines hurt readability on wide viewports. */
max-width: min(100%, var(--measure));
margin-top: 0.85rem;
line-height: 1.6;
}
/* ── Nav ───────────────────────────────────────────────────────────────── */
.landing-nav {
position: fixed;
inset: 0 0 auto 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: space-between;
/* Align nav edges with section gutters so brand/sign-in line up with
hero content as the viewport scales. */
padding: 0 var(--gutter-fluid);
height: 64px;
background: var(--surface-translucent-strong);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-bottom: 1px solid var(--border);
}
.nav-brand {
display: flex;
align-items: center;
gap: 0.65rem;
}
.nav-brand-icon {
width: 32px; height: 32px;
background: linear-gradient(135deg, var(--gold), var(--gold-dim));
border-radius: 7px;
display: flex; align-items: center; justify-content: center;
font-size: 16px;
box-shadow: var(--glow-gold);
overflow: hidden;
flex-shrink: 0;
}
.nav-brand-icon img { width: 100%; height: 100%; object-fit: cover; border-radius: 7px; }
.nav-brand-text {
font-family: var(--font-display);
font-weight: 700;
font-size: 1rem;
color: var(--gold-light);
letter-spacing: 0.08em;
white-space: nowrap;
}
.nav-links {
/* position: relative so the .nav-indicator child can absolute-anchor
to the tablist's bounding box. */
position: relative;
display: flex;
align-items: center;
gap: 0.4rem;
/* Explicit sans-serif so the nav font is identical across pages.
Pages that extend base_public.html have `body.landing` set to a
serif by landing.css — without this override the nav links would
inherit the serif there but render sans on home_public.html. */
font-family: var(--font-body);
}
.nav-links a {
position: relative;
font-size: 0.85rem;
color: var(--muted);
padding: 0.4rem 0.65rem;
border-radius: 6px;
transition: color 0.18s, background 0.18s;
}
.nav-links a:hover {
color: var(--text);
background: rgba(255, 255, 255, 0.025);
}
.nav-links a.active {
color: var(--gold-light);
}
/* Sliding indicator — JS measures the active tab and writes its left/width
into the inline transform + width. Transitions both, so when activate()
is called on a different tab the bar travels between them. */
.nav-indicator-host {
/* Doesn't participate in flex layout — the indicator span inside is
position:absolute relative to .nav-links. */
display: contents;
}
.nav-indicator {
position: absolute;
bottom: -2px;
left: 0;
height: 1.5px;
width: 0; /* JS writes a real width */
background: var(--gold);
border-radius: 1px;
pointer-events: none;
opacity: 0;
transform: translateX(0);
/* Two transitions: fast for the initial fade-in, smooth slide between
tabs once visible. JS adds .ready right after first measurement so
the slide kicks in only after the bar has a real position. */
transition: opacity 0.25s ease;
}
.nav-indicator.ready {
opacity: 1;
transition:
transform 0.32s cubic-bezier(.4, 0, .2, 1),
width 0.32s cubic-bezier(.4, 0, .2, 1),
opacity 0.25s ease;
}
/* Need display:inline-block to override the global `svg { display:block }`
reset at the top of this file — without it the icon wraps onto its own
line and pushes "Developers" below. */
.nav-external-icon {
display: inline-block;
margin-left: 0.3rem;
vertical-align: -0.08em;
opacity: 0.6;
transition: opacity 0.18s, transform 0.18s;
}
.nav-links a.nav-external {
/* Keep label + icon as a clean horizontal pair regardless of how big
the icon's stroke ends up rendering. */
display: inline-flex;
align-items: center;
}
.nav-links a.nav-external:hover .nav-external-icon {
opacity: 1;
transform: translate(1px, -1px);
}
.nav-right {
display: flex;
align-items: center;
gap: 0.6rem;
}
.nav-build {
font-family: var(--font-mono);
font-size: 0.76rem;
color: var(--muted2);
background: rgba(255, 255, 255, 0.02);
border: 1px solid var(--border);
border-radius: 3px;
padding: 3px 8px;
letter-spacing: 0.05em;
}
.nav-cta {
font-size: 0.875rem;
font-weight: 600;
color: var(--void);
background: var(--gold);
padding: 0.55rem 1.1rem;
border-radius: 6px;
transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
}
.nav-cta:hover { background: var(--gold-light); box-shadow: var(--glow-gold); }
.nav-cta:active { transform: translateY(1px); }
.nav-theme-toggle {
background: transparent;
border: 1px solid var(--border);
color: var(--text);
width: 36px;
height: 36px;
border-radius: 6px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1rem;
line-height: 1;
cursor: pointer;
transition: background 0.18s, border-color 0.18s;
}
.nav-theme-toggle:hover {
background: var(--gold-bg);
border-color: var(--gold-dim);
}
.nav-theme-toggle:active { transform: translateY(1px); }
/* Footer-placed theme toggle — smaller than the nav version so it sits
naturally in the footer row alongside the links and copyright. */
.footer-theme-toggle {
background: transparent;
border: 1px solid var(--border);
color: var(--muted);
width: 28px;
height: 28px;
border-radius: 5px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.85rem;
line-height: 1;
cursor: pointer;
padding: 0;
flex-shrink: 0;
transition: background 0.18s, border-color 0.18s, color 0.18s;
}
.footer-theme-toggle:hover {
background: var(--gold-bg);
border-color: var(--gold-dim);
color: var(--gold);
}
.footer-theme-toggle:active { transform: translateY(1px); }
.footer-theme-toggle:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 2px;
}
/* ── Discord button ────────────────────────────────────────────────────
Icon-only pill that sits between the theme toggle and the primary
Sign-in CTA. Subtle by default (Discord brand color on the icon,
neutral chrome) so it reads as "community access" without competing
with the gold CTA; brightens to the cyan-glow vocabulary on hover so
it shares aesthetic language with the existing .btn-cyan / Build a
plugin pattern. Hidden on mobile — the hamburger menu has its own
Discord text link via .nav-mobile-only. */
.nav-discord {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 8px;
border: 1px solid var(--border);
color: #5865F2;
background: transparent;
transition: background 0.18s, border-color 0.18s, color 0.18s, box-shadow 0.18s, transform 0.12s;
}
.nav-discord:hover {
background: var(--cyan-bg);
border-color: var(--cyan-dim);
color: #7B8DF7;
box-shadow: var(--glow-cyan);
}
.nav-discord:active { transform: translateY(1px); }
.nav-discord:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.nav-discord-icon { display: block; }
/* Vertical hairline before "Developers ↗" — separates the platform
tabs (Home/Plugins/Pricing/Docs/Status/FAQ) from the external dev
destination so the eye groups them correctly. */
.nav-divider {
width: 1px;
height: 1.1rem;
background: var(--border2);
align-self: center;
margin: 0 0.25rem;
}
/* Discord text link inside the hamburger menu. Desktop hides this li
(the icon button in nav-right covers it); mobile reveals it so the
collapsed menu still surfaces the community CTA. */
.nav-mobile-only { display: none; }
.nav-hamburger {
display: none;
background: none;
border: 1px solid var(--border);
border-radius: 4px;
padding: 0;
width: 36px; height: 36px;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
}
.nav-hamburger span {
display: block; width: 18px; height: 2px;
background: var(--muted);
border-radius: 1px;
transition: transform 0.2s, opacity 0.2s;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
/* ── Hero ──────────────────────────────────────────────────────────────── */
/* Hero breaks out of any parent width constraint so its ambient
background spans the full viewport — otherwise the bounded panel
creates a visible rectangular cutoff against the body's pure void.
Inner .hero-grid uses fluid gutters so content fills the canvas. */
.hero {
position: relative;
width: 100vw;
left: 50%;
margin-left: -50vw;
padding: var(--hero-pad-y-top) var(--gutter-fluid) var(--hero-pad-y-bottom);
overflow: hidden;
}
.hero-grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: clamp(2rem, 4vw, 5rem);
align-items: center;
width: 100%;
/* Asymmetric at large widths: the grid extends to the gutters so the
mockup card and gradient backdrop fill the canvas on 1920px+ displays.
The text column inside is capped via .hero-copy so the headline + sub
stay at a readable measure even at 4K. */
max-width: 100%;
margin: 0 auto;
}
.hero-eyebrow {
font-family: var(--font-display);
font-size: clamp(0.7rem, 1vw, 1.05rem);
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--cyan);
margin-bottom: 1.25rem;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.hero-eyebrow::before {
content: '';
display: inline-block;
width: 14px; height: 1px;
background: var(--cyan);
opacity: 0.7;
}
.hero-title {
font-family: var(--font-display);
font-size: clamp(2.25rem, 5.2vw, 5.75rem);
font-weight: 800;
/* Tighter leading + max-width forces each clause onto two lines max
instead of producing 4 awkwardly-balanced lines. The 16ch cap is
em-based so it scales with the font size — keeping the silhouette
consistent from phones to 4K. */
line-height: 1.0;
letter-spacing: -0.005em;
max-width: 16ch;
margin-bottom: 1rem;
color: var(--text);
text-wrap: balance;
}
.hero-title .accent {
display: block;
background: linear-gradient(90deg, var(--gold), var(--gold-light) 60%, var(--gold));
background-size: 200% 100%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.hero-sub {
font-family: var(--font-prose);
font-size: clamp(1rem, 1.25vw, 1.5rem);
font-weight: 400;
color: var(--muted);
/* Cap prose at a comfortable reading measure — the hero column itself
scales fluidly, but long lines of italic prose hurt readability. */
max-width: min(100%, var(--measure));
line-height: 1.55;
margin-bottom: 1.75rem;
}
.hero-actions {
display: flex;
flex-wrap: wrap;
gap: 0.85rem;
margin-bottom: 0.85rem;
}
/* Pricing subtext under the CTAs — small mono line that informs the click
without taking real estate from the message above. */
.hero-pricing-note {
margin: 0 0 1.5rem;
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.06em;
color: var(--muted2);
display: flex;
align-items: center;
gap: 0.4rem;
flex-wrap: wrap;
}
.hero-pricing-note .hero-sep { color: var(--gold-dim); }
/* Buttons — gold for paid/CTA, cyan for build/explore */
.btn {
display: inline-flex;
align-items: center;
gap: 0.55rem;
font-family: var(--font-body);
font-size: 0.95rem;
font-weight: 600;
letter-spacing: 0.005em;
padding: 0.85rem 1.5rem;
border-radius: 8px;
border: 1px solid transparent;
transition: background 0.18s, border-color 0.18s, color 0.18s, transform 0.12s, box-shadow 0.18s;
cursor: pointer;
white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.btn .arrow { transition: transform 0.18s; }
.btn:hover .arrow { transform: translateX(2px); }
.btn-gold {
color: var(--void);
background: linear-gradient(135deg, var(--gold), var(--gold-light));
box-shadow: 0 4px 18px rgba(201, 168, 76, 0.18);
}
.btn-gold:hover { box-shadow: 0 6px 28px rgba(201, 168, 76, 0.32); }
.btn-cyan {
color: var(--cyan);
background: var(--cyan-bg);
border-color: var(--cyan-dim);
}
.btn-cyan:hover {
background: rgba(78, 205, 196, 0.14);
border-color: var(--cyan);
box-shadow: var(--glow-cyan);
}
.btn-ghost {
color: var(--muted);
background: transparent;
border-color: var(--border);
}
.btn-ghost:hover { color: var(--gold); border-color: var(--gold-dim); }
/* Trust strip below hero CTAs — single horizontal row on desktop so the
sightline goes CTAs → trust signals → dashboard preview without a
chunky 2x2 block in the middle. Stacks at narrower widths. */
.hero-trust {
display: grid;
grid-template-columns: repeat(4, 1fr);
/* Tightened gap + padding so all four items pack onto one line within
the .hero-copy track at typical 2-col viewports (1100–1500px). At
≤760px the @media below reflows to 2 cols + wrap, where vertical
stacking is the right behavior anyway. */
gap: 0.4rem 0.6rem;
padding: 0.7rem 0.75rem;
background: rgba(255, 255, 255, 0.015);
border: 1px solid var(--border);
border-radius: 10px;
max-width: 100%;
}
.hero-trust li {
display: flex;
align-items: center;
gap: 0.35rem;
/* Fluid font shrinks the row enough to fit single-line at 2-col
viewports without losing legibility on wide displays. */
font-size: clamp(0.68rem, 0.85vw, 0.78rem);
color: var(--muted);
line-height: 1.2;
white-space: nowrap;
}
.hero-trust li svg {
width: 14px;
height: 14px;
}
.hero-trust li svg {
flex-shrink: 0;
color: var(--gold);
opacity: 0.85;
}
.hero-trust strong {
color: var(--text);
font-weight: 600;
}
/* Hero preview — stylized dashboard mock */
.hero-preview {
position: relative;
border-radius: 12px;
overflow: hidden;
border: 1px solid var(--border2);
background: var(--abyss);
box-shadow:
0 30px 60px rgba(0, 0, 0, 0.5),
0 0 0 1px rgba(255, 255, 255, 0.02) inset;
}
.preview-bar {
display: flex;
align-items: center;
gap: 0.4rem;
padding: clamp(0.7rem, 1vw, 1.2rem) clamp(0.9rem, 1.2vw, 1.6rem);
background: var(--depth);
border-bottom: 1px solid var(--border);
}
.preview-dots { display: flex; gap: 6px; }
.preview-dot { width: 10px; height: 10px; border-radius: 50%; }
.preview-dot.r { background: rgba(224, 90, 90, 0.7); }
.preview-dot.y { background: rgba(201, 168, 76, 0.7); }
.preview-dot.g { background: rgba(78, 205, 196, 0.7); }
.preview-url {
font-family: var(--font-mono);
font-size: 0.78rem;
color: var(--muted2);
margin-left: 0.5rem;
letter-spacing: 0.05em;
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* LIVE pill — sits at the right end of the preview's URL bar so the
visitor reads "this is real product, not a screenshot." */
.preview-live {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-family: var(--font-mono);
font-size: 0.74rem;
font-weight: 700;
letter-spacing: 0.18em;
color: var(--cyan);
background: var(--cyan-bg);
border: 1px solid var(--cyan-dim);
padding: 2px 7px;
border-radius: 999px;
flex-shrink: 0;
}
.preview-live-dot {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--cyan);
box-shadow: 0 0 6px rgba(78, 205, 196, 0.7);
animation: livePulse 1.6s ease-in-out infinite;
}
@keyframes livePulse {
0%, 100% { opacity: 0.45; transform: scale(0.85); }
50% { opacity: 1; transform: scale(1.15); }
}
.preview-body {
display: grid;
/* Sidebar scales fluidly so the mockup feels proportional at 1440px+
instead of having a tiny pinned 140px nav next to a stretched main. */
grid-template-columns: clamp(120px, 14%, 220px) 1fr;
min-height: 380px;
}
/* ── Mock sidebar (mirrors real control-panel nav) ──────────────────────── */
.preview-side {
background: var(--abyss);
border-right: 1px solid var(--border);
padding: 0.85rem 0.7rem;
display: flex;
flex-direction: column;
gap: 0.25rem;
overflow: hidden;
}
.preview-side-brand {
font-family: var(--font-display);
font-size: 0.7rem;
color: var(--gold-light);
letter-spacing: 0.1em;
padding: 0.3rem 0.5rem 0.55rem;
border-bottom: 1px solid var(--border);
margin-bottom: 0.4rem;
}
.preview-server-card {
background: var(--gold-bg);
border: 1px solid var(--gold-dim);
border-radius: 5px;
padding: 0.4rem 0.55rem;
margin-bottom: 0.5rem;
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.preview-server-name {
font-family: var(--font-display);
font-size: 0.74rem;
color: var(--gold-light);
letter-spacing: 0.04em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.preview-server-id {
font-family: var(--font-mono);
font-size: 0.6rem;
color: var(--muted2);
letter-spacing: 0.05em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.preview-side-section {
font-family: var(--font-mono);
font-size: 0.58rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--muted2);
padding: 0.45rem 0.55rem 0.2rem;
}
.preview-side-item {
display: flex; align-items: center; gap: 0.5rem;
padding: 0.32rem 0.55rem;
border-radius: 4px;
font-size: 0.72rem;
color: var(--muted);
}
.preview-side-item.active {
background: var(--gold-bg);
color: var(--gold-light);
border-left: 2px solid var(--gold);
padding-left: calc(0.55rem - 2px);
}
.preview-side-dot {
width: 5px; height: 5px;
border-radius: 50%;
background: var(--muted2);
flex-shrink: 0;
}
.preview-side-item.active .preview-side-dot { background: var(--gold); }
.preview-side-item[data-panel] {
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
}
.preview-side-item[data-panel]:hover {
background: rgba(255, 255, 255, 0.04);
color: var(--text);
}
.preview-side-item[data-panel].active:hover {
background: var(--gold-bg);
color: var(--gold-light);
}
/* ── Mock main panel (analytics overview) ───────────────────────────────── */
.preview-main {
padding: clamp(1rem, 1.4vw, 1.6rem);
background: var(--void);
display: block;
min-width: 0;
/* Keep the panel container at a stable height across switches so the
hero grid doesn't reflow when the user clicks Plugins vs Overview. */
min-height: clamp(420px, 38vw, 560px);
position: relative;
}
.preview-panel {
display: none;
flex-direction: column;
gap: clamp(0.55rem, 0.85vw, 1rem);
min-width: 0;
animation: previewPanelIn 0.32s ease-out;
}
.preview-panel.active { display: flex; }
@keyframes previewPanelIn {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: none; }
}
.preview-eyebrow {
font-family: var(--font-mono);
font-size: 0.65rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--muted2);
}
.preview-h1 {
font-family: var(--font-display);
font-size: clamp(0.95rem, 1.45vw, 1.55rem);
color: var(--text);
letter-spacing: 0.05em;
margin: 0 0 0.1rem;
}
/* Sub-tab strip with right-edge fade to hint at off-screen tabs */
.preview-tabs {
position: relative;
display: flex;
gap: 0.35rem;
overflow: hidden;
border-bottom: 1px solid var(--border);
padding-bottom: 0.5rem;
mask-image: linear-gradient(to right, #000 85%, transparent 100%);
-webkit-mask-image: linear-gradient(to right, #000 85%, transparent 100%);
}
.preview-tab {
font-family: var(--font-mono);
font-size: 0.68rem;
letter-spacing: 0.04em;
padding: 0.28rem 0.6rem;
border-radius: 4px;
background: var(--depth);
border: 1px solid var(--border);
color: var(--muted);
white-space: nowrap;
flex-shrink: 0;
}
.preview-tab.active {
background: var(--gold-bg);
border-color: var(--gold-dim);
color: var(--gold-light);
}
.preview-tab {
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.preview-tab:hover {
background: rgba(255, 255, 255, 0.04);
color: var(--text);
}
.preview-tab.active:hover {
background: var(--gold-bg);
color: var(--gold-light);
}
.preview-chart-context {
color: var(--text);
text-transform: none;
letter-spacing: 0;
font-family: var(--font-mono);
font-size: 0.66rem;
}
.preview-section-label {
font-family: var(--font-mono);
font-size: 0.66rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted);
margin-top: 0.15rem;
}
/* KPI tile grid */
.preview-kpis {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: clamp(0.45rem, 0.7vw, 0.85rem);
}
.preview-kpi {
background: var(--depth);
border: 1px solid var(--border);
border-radius: 8px;
padding: 0.55rem 0.7rem;
min-width: 0;
}
.preview-kpi-num {
font-family: var(--font-display);
font-size: clamp(1.05rem, 1.5vw, 1.6rem);
font-weight: 800;
color: var(--text);
line-height: 1.1;
margin-bottom: 0.2rem;
white-space: nowrap;
}
.preview-kpi-num.cyan { color: rgba(114, 250, 192, 0.95); }
.preview-kpi-num.blue { color: rgba(114, 192, 250, 0.95); }
.preview-kpi-num.green { color: rgba(87, 242, 135, 0.95); }
.preview-kpi-num.pink { color: rgba(240, 130, 255, 0.9); }
.preview-kpi-num.red { color: rgba(255, 100, 100, 0.9); }
.preview-kpi-label {
font-family: var(--font-mono);
font-size: 0.62rem;
color: var(--muted2);
letter-spacing: 0.12em;
text-transform: uppercase;
}
/* Period comparison card */
.preview-compare {
background: var(--depth);
border: 1px solid var(--border);
border-radius: 8px;
padding: 0.7rem 0.85rem;
}
.preview-compare-title {
font-family: var(--font-display);
font-size: 0.78rem;
color: var(--text);
margin-bottom: 0.5rem;
letter-spacing: 0.03em;
}
.preview-compare-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.4rem;
}
.preview-compare-cell {
background: rgba(255, 255, 255, 0.03);
border-radius: 6px;
padding: 0.45rem 0.55rem;
min-width: 0;
}
.preview-compare-label {
font-family: var(--font-mono);
font-size: 0.6rem;
color: var(--muted2);
letter-spacing: 0.1em;
text-transform: uppercase;
margin-bottom: 0.15rem;
}
.preview-compare-val {
font-family: var(--font-display);
font-size: 0.95rem;
font-weight: 700;
color: var(--text);
line-height: 1.1;
}
.preview-compare-delta {
font-family: var(--font-mono);
font-size: 0.6rem;
margin-top: 0.2rem;
letter-spacing: 0.04em;
}
.preview-compare-delta.up { color: rgba(87, 242, 135, 0.95); }
.preview-compare-delta.down { color: rgba(255, 100, 100, 0.9); }
.preview-compare-delta.neutral { color: var(--muted2); }
/* Activity chart card */
.preview-chart {
background: var(--depth);
border: 1px solid var(--border);
border-radius: 8px;
padding: 0.7rem 0.85rem 0.55rem;
}
.preview-chart-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.6rem;
margin-bottom: 0.4rem;
flex-wrap: wrap;
}
.preview-chart-title {
font-family: var(--font-display);
font-size: 0.78rem;
color: var(--text);
letter-spacing: 0.03em;
}
.preview-chart-legend {
display: flex;
gap: 0.7rem;
font-family: var(--font-mono);
font-size: 0.6rem;
color: var(--muted);
letter-spacing: 0.04em;
}
.preview-chart-legend span {
display: inline-flex;
align-items: center;
gap: 0.3rem;
}
.preview-chart-legend i {
width: 10px;
height: 3px;
border-radius: 2px;
display: inline-block;
}
.preview-chart-wrap {
position: relative;
}
.preview-chart-svg {
display: block;
width: 100%;
height: clamp(110px, 14vw, 170px);
cursor: crosshair;
}
.preview-chart-area,
.preview-chart-line-primary,
.preview-chart-line-secondary {
transition: d 0.5s ease, opacity 0.3s ease;
}
.preview-chart-tooltip {
position: absolute;
pointer-events: none;
background: var(--abyss);
border: 1px solid var(--border2);
border-radius: 5px;
padding: 0.35rem 0.5rem;
font-family: var(--font-mono);
font-size: 0.62rem;
letter-spacing: 0.04em;
color: var(--text);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
transform: translate(-50%, -100%);
white-space: nowrap;
z-index: 2;
}
.preview-chart-tooltip[hidden] { display: none; }
.preview-chart-tooltip-date {
color: var(--muted2);
font-size: 0.58rem;
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: 0.15rem;
}
.preview-chart-tooltip-val {
display: inline-flex;
align-items: center;
gap: 0.3rem;
color: rgba(114, 250, 192, 0.95);
font-weight: 700;
}
.preview-chart-tooltip-val i {
width: 8px; height: 3px; border-radius: 2px; display: inline-block;
}
/* KPI live-tick flash — mirrors old attendance ticker but bumps any KPI */
.preview-kpi-num.bumped {
animation: previewKpiBump 0.6s ease;
}
@keyframes previewKpiBump {
0% { transform: translateY(0) scale(1); filter: brightness(1); }
35% { transform: translateY(-2px) scale(1.08); filter: brightness(1.3); }
100% { transform: translateY(0) scale(1); filter: brightness(1); }
}
/* Sub-panel switcher (Overview vs Retention inside the Plugins panel) */
.preview-subpanel { display: none; flex-direction: column; gap: clamp(0.55rem, 0.85vw, 1rem); animation: previewPanelIn 0.32s ease-out; }
.preview-subpanel.active { display: flex; }
/* ── Plugins panel: Retention sub-tab ───────────────────────────────────── */
.preview-ret-intro {
font-family: var(--font-mono);
font-size: 0.66rem;
color: var(--muted);
line-height: 1.55;
letter-spacing: 0.02em;
padding: 0.55rem 0.75rem;
background: var(--depth);
border: 1px solid var(--border);
border-radius: 6px;
}
.preview-ret-intro .green { color: rgba(87, 242, 135, 0.95); font-weight: 700; }
.preview-ret-intro .cyan { color: rgba(114, 250, 192, 0.95); font-weight: 700; }
.preview-ret-intro .amber { color: rgba(254, 231, 92, 0.95); font-weight: 700; }
/* Activation row: big stat card + How-to-read sidebar */
.preview-ret-act-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.55rem;
}
.preview-ret-act-card {
background: var(--depth);
border: 1px solid var(--border);
border-radius: 8px;
padding: 0.85rem 0.85rem 0.9rem;
text-align: center;
}
.preview-ret-act-pct {
font-family: var(--font-display);
font-size: 2rem;
font-weight: 800;
color: rgba(87, 242, 135, 0.95);
line-height: 1.05;
margin-bottom: 0.25rem;
}
.preview-ret-act-label {
font-family: var(--font-mono);
font-size: 0.62rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--muted);
}
.preview-ret-act-sub {
font-family: var(--font-mono);
font-size: 0.55rem;
color: var(--muted2);
letter-spacing: 0.04em;
margin-top: 0.3rem;
}
.preview-ret-howto {
background: var(--depth);
border: 1px solid var(--border);
border-radius: 8px;
padding: 0.6rem 0.75rem;
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.preview-ret-howto-title {
font-family: var(--font-mono);
font-size: 0.55rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--gold-light);
margin-bottom: 0.15rem;
}
.preview-ret-howto-line {
font-family: var(--font-mono);
font-size: 0.62rem;
color: var(--muted);
letter-spacing: 0.02em;
}
.preview-ret-howto-line .g { color: rgba(87, 242, 135, 0.95); font-weight: 700; }
.preview-ret-howto-line .a { color: rgba(254, 231, 92, 0.95); font-weight: 700; }
.preview-ret-howto-line .r { color: rgba(255, 120, 120, 0.95); font-weight: 700; }
/* Lookback toggle row — Activation pills + divider + Retention pills */
.preview-ret-lookback {
display: flex;
align-items: center;
gap: 0.3rem;
padding: 0.45rem 0.65rem;
background: var(--abyss);
border: 1px solid var(--border);
border-radius: 6px;
flex-wrap: wrap;
}
.preview-ret-lookback-label {
font-family: var(--font-mono);
font-size: 0.55rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--muted2);
margin-right: 0.15rem;
}
.preview-ret-time {
font-family: var(--font-mono);
font-size: 0.58rem;
letter-spacing: 0.06em;
padding: 0.22rem 0.5rem;
border-radius: 4px;
border: 1px solid var(--border);
background: var(--depth);
color: var(--muted);
cursor: pointer;
transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.preview-ret-time:hover { color: var(--text); border-color: var(--border2); }
.preview-ret-time.green-active {
color: rgba(87, 242, 135, 0.95);
border-color: rgba(87, 242, 135, 0.35);
background: rgba(87, 242, 135, 0.08);
}
.preview-ret-time.gold-active {
color: var(--gold-light);
border-color: var(--gold-dim);
background: var(--gold-bg);
}
.preview-ret-divider { color: var(--muted2); margin: 0 0.25rem; }
/* Cohort retention chart card */
.preview-ret-chart {
background: var(--depth);
border: 1px solid var(--border);
border-radius: 8px;
padding: 0.7rem 0.85rem 0.5rem;
}
.preview-ret-chart-svg {
display: block;
width: 100%;
height: clamp(95px, 12vw, 140px);
}
.preview-ret-axis {
display: flex;
justify-content: space-between;
font-family: var(--font-mono);
font-size: 0.55rem;
color: var(--muted2);
letter-spacing: 0.06em;
margin-top: 0.3rem;
}
/* Churn risk mini-table */
.preview-ret-churn {
background: var(--depth);
border: 1px solid var(--border);
border-radius: 7px;
overflow: hidden;
}
.preview-ret-churn-row {
display: grid;
grid-template-columns: 1fr auto;
gap: 0.5rem;
padding: 0.45rem 0.75rem;
border-top: 1px solid var(--border);
font-family: var(--font-mono);
font-size: 0.66rem;
}
.preview-ret-churn-row:first-child { border-top: 0; }
.preview-ret-churn-row.head {
background: rgba(255, 255, 255, 0.025);
font-size: 0.55rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--muted2);
}
.preview-ret-churn-name { color: var(--text); }
.preview-ret-churn-time { color: var(--muted); }
/* Narrow widths: stack activation row */
@media (max-width: 900px) {
.preview-ret-act-row { grid-template-columns: 1fr; }
}
/* ── Plugins panel: Messages sub-tab ────────────────────────────────────── */
.preview-msg-range {
display: flex;
align-items: center;
gap: 0.3rem;
padding: 0.45rem 0.65rem;
background: var(--abyss);
border: 1px solid var(--border);
border-radius: 6px;
flex-wrap: wrap;
}
.preview-msg-spacer { flex: 1 1 auto; }
.preview-msg-status {
display: inline-flex;
align-items: center;
gap: 0.3rem;
font-family: var(--font-mono);
font-size: 0.6rem;
color: rgba(87, 242, 135, 0.95);
letter-spacing: 0.04em;
}
.preview-msg-status i {
width: 5px; height: 5px; border-radius: 50%;
background: rgba(87, 242, 135, 0.95);
box-shadow: 0 0 6px rgba(87, 242, 135, 0.6);
}
.preview-msg-callout {
font-family: var(--font-mono);
font-size: 0.66rem;
padding: 0.5rem 0.75rem;
border-radius: 5px;
letter-spacing: 0.02em;
}
.preview-msg-callout.up {
color: rgba(87, 242, 135, 0.95);
background: rgba(87, 242, 135, 0.08);
border: 1px solid rgba(87, 242, 135, 0.3);
}
.preview-msg-callout.down {
color: rgba(255, 120, 120, 0.95);
background: rgba(255, 100, 100, 0.08);
border: 1px solid rgba(255, 100, 100, 0.3);
}
.preview-msg-callout b { font-weight: 700; }
.preview-msg-callout .ch { color: var(--cyan); }
/* Trends bar chart */
.preview-msg-chart {
background: var(--depth);
border: 1px solid var(--border);
border-radius: 8px;
padding: 0.7rem 0.85rem 0.55rem;
}
.preview-msg-chart-toggles {
display: flex;
gap: 0.2rem;
}
.preview-msg-chart-svg {
display: block;
width: 100%;
height: clamp(95px, 12vw, 140px);
}
.preview-msg-chart-foot {
display: flex;
gap: 0.85rem;
margin-top: 0.3rem;
font-family: var(--font-mono);
font-size: 0.6rem;
color: var(--muted);
letter-spacing: 0.02em;
}
.preview-msg-chart-foot b.green { color: rgba(87, 242, 135, 0.95); margin-right: 0.15rem; }
.preview-msg-chart-foot b.amber { color: rgba(254, 231, 92, 0.95); margin-right: 0.15rem; }
/* Concentration columns: Top Channels + Top Users */
.preview-msg-conc {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.55rem;
}
.preview-msg-conc-col {
background: var(--depth);
border: 1px solid var(--border);
border-radius: 8px;
padding: 0.6rem 0.75rem;
display: flex;
flex-direction: column;
gap: 0.35rem;
min-width: 0;
}
.preview-msg-conc-title {
font-family: var(--font-display);
font-size: 0.78rem;
color: var(--text);
letter-spacing: 0.04em;
margin-bottom: 0.2rem;
}
.preview-msg-conc-row {
display: grid;
grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto;
align-items: center;
gap: 0.5rem;
font-family: var(--font-mono);
font-size: 0.62rem;
min-width: 0;
}
.preview-msg-conc-row .ch { color: var(--cyan); letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100px; }
.preview-msg-conc-row .us { color: rgba(196, 181, 253, 0.95); letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 90px; }
.preview-msg-conc-row .ct { color: var(--muted); font-size: 0.6rem; white-space: nowrap; }
.preview-msg-bar {
height: 4px;
background: var(--abyss);
border-radius: 2px;
overflow: hidden;
min-width: 0;
}
.preview-msg-bar i {
display: block;
height: 100%;
border-radius: 2px;
}
@media (max-width: 900px) {
.preview-msg-conc { grid-template-columns: 1fr; }
}
/* ── Plugins panel: Voice sub-tab ───────────────────────────────────────── */
.preview-msg-conc-title em {
font-style: normal;
font-family: var(--font-mono);
font-size: 0.55rem;
color: var(--muted2);
letter-spacing: 0.06em;
margin-left: 0.3rem;
text-transform: uppercase;
}
.preview-vc-hist {
display: block;
width: 100%;
height: clamp(70px, 9vw, 100px);
margin-top: 0.15rem;
}
.preview-vc-axis {
display: flex;
justify-content: space-between;
font-family: var(--font-mono);
font-size: 0.52rem;
color: var(--muted2);
letter-spacing: 0.06em;
margin-top: 0.15rem;
}
.preview-vc-legend {
display: flex;
gap: 0.6rem;
margin-top: 0.25rem;
font-family: var(--font-mono);
font-size: 0.55rem;
color: var(--muted);
}
.preview-vc-legend span {
display: inline-flex;
align-items: center;
gap: 0.3rem;
}
.preview-vc-legend i {
width: 9px; height: 3px; border-radius: 2px; display: inline-block;
}
/* ── Plugins panel: Members sub-tab ─────────────────────────────────────── */
.preview-mb-tenure {
background: var(--depth);
border: 1px solid var(--border);
border-radius: 8px;
padding: 0.7rem 0.85rem 0.55rem;
}
.preview-mb-tenure-head {
display: flex;
flex-direction: column;
gap: 0.15rem;
margin-bottom: 0.4rem;
}
.preview-mb-tenure-title {
font-family: var(--font-display);
font-size: 0.82rem;
color: var(--text);
letter-spacing: 0.04em;
}
.preview-mb-tenure-sub {
font-family: var(--font-mono);
font-size: 0.6rem;
color: var(--muted2);
letter-spacing: 0.02em;
}
.preview-mb-tenure-svg {
display: block;
width: 100%;
height: clamp(80px, 11vw, 130px);
}
.preview-mb-tenure-axis {
display: flex;
justify-content: space-between;
font-family: var(--font-mono);
font-size: 0.55rem;
color: var(--muted2);
letter-spacing: 0.04em;
margin-top: 0.25rem;
}
/* Retention Funnel */
.preview-mb-funnel {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.preview-mb-funnel-row {
display: grid;
grid-template-columns: minmax(100px, 130px) minmax(0, 1fr) auto;
align-items: center;
gap: 0.55rem;
font-family: var(--font-mono);
font-size: 0.62rem;
}
.preview-mb-funnel-label { color: var(--text); letter-spacing: 0.02em; }
.preview-mb-funnel-bar {
height: 8px;
background: var(--abyss);
border-radius: 3px;
border: 1px solid var(--border);
overflow: hidden;
}
.preview-mb-funnel-bar i {
display: block;
height: 100%;
border-radius: 3px;
}
.preview-mb-funnel-val {
color: var(--text);
font-size: 0.6rem;
white-space: nowrap;
}
.preview-mb-funnel-val em {
font-style: normal;
color: var(--muted2);
font-size: 0.55rem;
margin-left: 0.2rem;
}
/* Most Active Members */
.preview-mb-active {
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.preview-mb-active-row {
display: grid;
grid-template-columns: minmax(80px, 110px) minmax(0, 1fr) 40px 50px;
align-items: center;
gap: 0.55rem;
padding: 0.4rem 0.65rem;
background: var(--depth);
border: 1px solid var(--border);
border-radius: 6px;
font-family: var(--font-mono);
font-size: 0.62rem;
}
.preview-mb-active-name {
color: rgba(196, 181, 253, 0.95);
letter-spacing: 0.02em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.preview-mb-active-ct {
color: var(--text);
text-align: right;
font-size: 0.62rem;
}
.preview-mb-active-stats {
font-size: 0.55rem;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 0.22rem 0.45rem;
border-radius: 4px;
border: 1px solid var(--border);
background: var(--abyss);
color: var(--muted);
text-align: center;
cursor: pointer;
transition: color 0.15s ease, border-color 0.15s ease;
}
.preview-mb-active-stats:hover { color: var(--text); border-color: var(--border2); }
/* ── Plugins panel: Channels sub-tab ────────────────────────────────────── */
.preview-ch-card {
background: var(--depth);
border: 1px solid var(--border);
border-radius: 8px;
padding: 0.7rem 0.85rem 0.55rem;
}
.preview-ch-card-head {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: 0.45rem;
}
.preview-ch-title {
font-family: var(--font-display);
font-size: 0.82rem;
color: var(--text);
letter-spacing: 0.04em;
}
.preview-ch-sub {
font-family: var(--font-mono);
font-size: 0.58rem;
color: var(--muted2);
letter-spacing: 0.08em;
text-transform: uppercase;
}
/* Momentum table */
.preview-ch-table {
display: flex;
flex-direction: column;
gap: 0.05rem;
}
.preview-ch-row {
display: grid;
grid-template-columns: minmax(0, 1.6fr) 60px 60px 80px;
align-items: center;
gap: 0.5rem;
padding: 0.35rem 0.2rem;
font-family: var(--font-mono);
font-size: 0.62rem;
border-top: 1px solid var(--border);
}
.preview-ch-row:first-child { border-top: 0; }
.preview-ch-row.head {
font-size: 0.52rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted2);
padding: 0.3rem 0.2rem;
}
.preview-ch-row .ch { color: var(--cyan); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.preview-ch-row .num { color: var(--text); }
.preview-ch-row .num.muted { color: var(--muted2); }
.preview-ch-row .delta {
font-size: 0.6rem;
letter-spacing: 0.04em;
font-weight: 700;
}
.preview-ch-row .delta.up { color: rgba(87, 242, 135, 0.95); }
.preview-ch-row .delta.down { color: rgba(255, 120, 120, 0.95); }
/* Ranked bar list (Text + Voice channels) */
.preview-ch-rank {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.preview-ch-rank-row {
display: grid;
grid-template-columns: minmax(110px, 140px) minmax(0, 1fr) minmax(40px, auto);
align-items: center;
gap: 0.55rem;
font-family: var(--font-mono);
font-size: 0.62rem;
}
.preview-ch-rank-row.vc { grid-template-columns: minmax(110px, 140px) minmax(0, 1fr) minmax(80px, auto); }
.preview-ch-rank-row .ch { color: var(--cyan); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0.02em; }
.preview-ch-rank-row .ct { color: var(--text); text-align: right; }
.preview-ch-rank-row .ct b { font-weight: 700; }
.preview-ch-rank-row .ct em {
font-style: normal;
color: var(--muted2);
font-size: 0.55rem;
margin-left: 0.3rem;
}
.preview-ch-bar {
height: 5px;
background: var(--abyss);
border-radius: 2px;
border: 1px solid var(--border);
overflow: hidden;
min-width: 0;
}
.preview-ch-bar i {
display: block;
height: 100%;
border-radius: 2px;
}
/* ── Plugins panel: Heatmap sub-tab ─────────────────────────────────────── */
.preview-hm-filters {
display: flex;
align-items: center;
gap: 0.3rem;
padding: 0.45rem 0.65rem;
background: var(--abyss);
border: 1px solid var(--border);
border-radius: 6px;
flex-wrap: wrap;
}
.preview-hm-sep { color: var(--muted2); margin: 0 0.25rem; }
.preview-hm-callout {
font-family: var(--font-mono);
font-size: 0.66rem;
padding: 0.5rem 0.75rem;
border-radius: 5px;
background: var(--cyan-bg);
border: 1px solid var(--cyan-dim);
color: var(--cyan);
letter-spacing: 0.02em;
}
.preview-hm-callout b { font-weight: 700; color: rgba(114, 250, 192, 0.95); }
/* Activity heatmap grid */
.preview-hm-card {
background: var(--depth);
border: 1px solid var(--border);
border-radius: 8px;
padding: 0.7rem 0.85rem;
}
.preview-hm-card-head {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: 0.5rem;
}
.preview-hm-title {
font-family: var(--font-display);
font-size: 0.78rem;
color: var(--text);
letter-spacing: 0.04em;
}
.preview-hm-sub {
font-family: var(--font-mono);
font-size: 0.55rem;
color: var(--muted2);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.preview-hm-hours,
.preview-hm-row {
display: grid;
grid-template-columns: 32px repeat(24, 1fr);
gap: 2px;
align-items: center;
}
.preview-hm-row { margin-top: 2px; }
.preview-hm-hours span {
font-family: var(--font-mono);
font-size: 0.5rem;
color: var(--muted2);
letter-spacing: 0.05em;
text-align: left;
}
.preview-hm-day {
font-family: var(--font-mono);
font-size: 0.55rem;
color: var(--muted2);
text-align: right;
padding-right: 4px;
letter-spacing: 0.04em;
}
.preview-hm-row i {
display: block;
height: 12px;
border-radius: 2px;
}
/* Intensity ramps from near-empty to peak green */
.preview-hm-row i.i0 { background: rgba(87, 242, 135, 0.04); }
.preview-hm-row i.i1 { background: rgba(87, 242, 135, 0.18); }
.preview-hm-row i.i2 { background: rgba(87, 242, 135, 0.38); }
.preview-hm-row i.i3 { background: rgba(87, 242, 135, 0.6); }
.preview-hm-row i.i4 { background: rgba(87, 242, 135, 0.95); box-shadow: 0 0 6px rgba(87, 242, 135, 0.5); }
.preview-hm-legend {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0.35rem;
margin-top: 0.55rem;
font-family: var(--font-mono);
font-size: 0.55rem;
color: var(--muted2);
letter-spacing: 0.06em;
}
.preview-hm-legend i {
width: 14px; height: 9px; border-radius: 2px;
}
/* Weekend vs Weekday split bar */
.preview-hm-split {
display: flex;
align-items: stretch;
border-radius: 6px;
overflow: hidden;
border: 1px solid var(--border);
font-family: var(--font-mono);
font-size: 0.62rem;
height: 28px;
}
.preview-hm-split-left {
flex: 0 0 46.2%;
background: rgba(114, 192, 250, 0.55);
color: rgba(15, 25, 50, 0.95);
display: flex; align-items: center; justify-content: center;
letter-spacing: 0.04em;
font-weight: 700;
}
.preview-hm-split-right {
flex: 0 0 53.8%;
background: rgba(87, 242, 135, 0.55);
color: rgba(10, 40, 22, 0.95);
display: flex; align-items: center; justify-content: center;
letter-spacing: 0.04em;
font-weight: 700;
}
.preview-hm-split-note {
font-family: var(--font-mono);
font-size: 0.6rem;
color: var(--muted);
letter-spacing: 0.02em;
}
.preview-hm-split-note b { color: var(--text); }
/* Active-slots KPI sub-text */
.preview-kpi-num em {
font-family: var(--font-mono);
font-style: normal;
font-size: 0.6rem;
color: var(--muted2);
margin-left: 0.15rem;
letter-spacing: 0.04em;
}
/* ── Plugins panel: Leaderboard sub-tab ─────────────────────────────────── */
.preview-lb-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.7rem;
}
.preview-lb-title {
font-family: var(--font-display);
font-size: 1rem;
color: var(--gold-light);
letter-spacing: 0.05em;
}
.preview-lb-period {
display: flex;
align-items: center;
gap: 0.25rem;
}
.preview-lb-metrics {
display: flex;
align-items: center;
gap: 0.3rem;
overflow: hidden;
mask-image: linear-gradient(to right, #000 92%, transparent 100%);
-webkit-mask-image: linear-gradient(to right, #000 92%, transparent 100%);
padding: 0.1rem 0;
}
.preview-lb-metric {
font-family: var(--font-mono);
font-size: 0.6rem;
letter-spacing: 0.04em;
padding: 0.3rem 0.55rem;
border-radius: 4px;
border: 1px solid var(--border);
background: var(--depth);
color: var(--muted);
white-space: nowrap;
flex-shrink: 0;
cursor: pointer;
transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.preview-lb-metric:hover { color: var(--text); border-color: var(--border2); }
.preview-lb-metric.active {
color: rgba(87, 242, 135, 0.95);
background: rgba(87, 242, 135, 0.08);
border-color: rgba(87, 242, 135, 0.35);
}
/* Leaderboard table */
.preview-lb-table {
background: var(--depth);
border: 1px solid var(--border);
border-radius: 8px;
overflow: hidden;
}
.preview-lb-row {
display: grid;
grid-template-columns: 36px minmax(0, 1.4fr) 80px minmax(120px, 1.6fr);
align-items: center;
gap: 0.6rem;
padding: 0.5rem 0.85rem;
border-top: 1px solid var(--border);
font-family: var(--font-mono);
font-size: 0.66rem;
}
.preview-lb-row:first-child { border-top: 0; }
.preview-lb-row.head {
background: rgba(255, 255, 255, 0.025);
font-size: 0.55rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--muted2);
padding: 0.4rem 0.85rem;
}
.preview-lb-row.head .num { text-align: right; }
.preview-lb-row .rank {
text-align: center;
color: var(--muted2);
}
.preview-lb-row .rank.gold { color: #ffd700; font-weight: 700; }
.preview-lb-row .rank.silver { color: #c0c0c0; font-weight: 700; }
.preview-lb-row .rank.bronze { color: #cd7f32; font-weight: 700; }
.preview-lb-row .member {
color: var(--text);
font-family: var(--font-display);
font-size: 0.78rem;
letter-spacing: 0.02em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.preview-lb-row .num {
color: var(--text);
text-align: right;
font-size: 0.7rem;
}
.preview-lb-row .num.gold { color: var(--gold-light); }
.preview-lb-row .trend {
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
align-items: center;
gap: 0.5rem;
}
.preview-lb-row .trend svg {
display: block;
width: 100%;
height: 22px;
}
.preview-lb-row .trend .bar {
height: 5px;
background: var(--abyss);
border-radius: 2px;
border: 1px solid var(--border);
overflow: hidden;
}
.preview-lb-row .trend .bar i {
display: block;
height: 100%;
background: rgba(87, 242, 135, 0.75);
border-radius: 2px;
}
.preview-lb-foot {
text-align: center;
font-family: var(--font-mono);
font-size: 0.6rem;
color: var(--muted2);
letter-spacing: 0.04em;
}
/* ── Panel: Marketplace ─────────────────────────────────────────────────── */
/* Featured Highlight card — bordered showcase with info on left, art on right */
.preview-mk-featured {
display: grid;
grid-template-columns: 1fr 38%;
background: var(--depth);
border: 1px solid var(--border);
border-radius: 9px;
overflow: hidden;
min-height: 130px;
}
.preview-mk-featured-info {
padding: 0.7rem 0.85rem;
display: flex;
flex-direction: column;
gap: 0.35rem;
min-width: 0;
}
.preview-mk-featured-eyebrow {
font-family: var(--font-mono);
font-size: 0.58rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gold-light);
}
.preview-mk-featured-head {
display: flex;
align-items: center;
gap: 0.55rem;
min-width: 0;
}
.preview-mk-featured-icon {
width: 32px; height: 32px;
border-radius: 6px;
display: flex; align-items: center; justify-content: center;
font-family: var(--font-display);
font-size: 0.78rem;
font-weight: 800;
color: rgba(255, 255, 255, 0.95);
flex-shrink: 0;
}
.preview-mk-featured-name {
font-family: var(--font-display);
font-size: 0.95rem;
color: var(--text);
letter-spacing: 0.04em;
line-height: 1.1;
}
.preview-mk-featured-by {
font-family: var(--font-mono);
font-size: 0.6rem;
color: var(--muted2);
letter-spacing: 0.04em;
}
.preview-mk-featured-desc {
font-family: var(--font-mono);
font-size: 0.66rem;
color: var(--muted);
line-height: 1.45;
}
.preview-mk-featured-meta {
display: flex;
align-items: center;
gap: 0.4rem;
font-family: var(--font-mono);
font-size: 0.62rem;
color: var(--muted2);
letter-spacing: 0.04em;
}
.preview-mk-stars { color: var(--gold-light); }
.preview-mk-stars em { color: var(--muted2); font-style: normal; }
.preview-mk-installs { color: var(--cyan); }
.preview-mk-featured-meta .dot { color: var(--muted2); }
.preview-mk-featured-cta {
align-self: flex-start;
font-family: var(--font-mono);
font-size: 0.66rem;
letter-spacing: 0.06em;
padding: 0.35rem 0.7rem;
border: 1px solid var(--gold-dim);
background: var(--gold-bg);
color: var(--gold-light);
border-radius: 4px;
cursor: pointer;
transition: background 0.15s ease;
}
.preview-mk-featured-cta:hover { background: rgba(201, 168, 76, 0.18); }
.preview-mk-featured-art {
position: relative;
display: flex;
align-items: center;
justify-content: center;
border-left: 1px solid var(--border);
}
.preview-mk-featured-art-title {
font-family: var(--font-display);
font-size: 1.1rem;
font-weight: 800;
letter-spacing: 0.12em;
color: rgba(254, 226, 200, 0.95);
text-align: center;
line-height: 1.05;
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}
.preview-mk-featured-art-title span {
color: rgba(252, 165, 95, 0.9);
}
/* Pagination dots beneath the featured card */
.preview-mk-pagination {
display: flex;
gap: 0.3rem;
justify-content: center;
}
.preview-mk-pagination i {
width: 6px; height: 6px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.12);
}
.preview-mk-pagination i.active {
background: var(--gold);
}
/* Category tile row — horizontal with right-edge fade */
.preview-mk-cats {
display: flex;
gap: 0.4rem;
overflow: hidden;
mask-image: linear-gradient(to right, #000 92%, transparent 100%);
-webkit-mask-image: linear-gradient(to right, #000 92%, transparent 100%);
}
.preview-mk-cat {
flex: 0 0 auto;
width: 88px;
padding: 0.55rem 0.5rem;
border-radius: 7px;
border: 1px solid var(--border);
background: var(--depth);
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
cursor: pointer;
transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
.preview-mk-cat:hover { transform: translateY(-1px); border-color: var(--border2); }
.preview-mk-cat svg {
width: 18px; height: 18px;
}
.preview-mk-cat-name {
font-family: var(--font-display);
font-size: 0.7rem;
letter-spacing: 0.04em;
color: var(--text);
text-align: center;
}
.preview-mk-cat-count {
font-family: var(--font-mono);
font-size: 0.55rem;
letter-spacing: 0.06em;
color: var(--muted2);
text-transform: uppercase;
}
/* per-category accents */
.preview-mk-cat[data-cat="all"] { background: linear-gradient(135deg, rgba(78,205,196,0.12), var(--depth)); }
.preview-mk-cat[data-cat="all"] svg { color: var(--cyan); }
.preview-mk-cat[data-cat="community"] { background: linear-gradient(135deg, rgba(87,242,135,0.10), var(--depth)); }
.preview-mk-cat[data-cat="community"] svg { color: rgba(87,242,135,0.95); }
.preview-mk-cat[data-cat="popular"] { background: linear-gradient(135deg, rgba(249,115,22,0.15), var(--depth)); }
.preview-mk-cat[data-cat="popular"] svg { color: rgba(249,115,22,0.95); }
.preview-mk-cat[data-cat="games"] { background: linear-gradient(135deg, rgba(167,139,250,0.12), var(--depth)); }
.preview-mk-cat[data-cat="games"] svg { color: rgba(196,181,253,0.95); }
.preview-mk-cat[data-cat="org"] { background: linear-gradient(135deg, rgba(239,68,68,0.12), var(--depth)); }
.preview-mk-cat[data-cat="org"] svg { color: rgba(255,120,120,0.95); }
.preview-mk-cat[data-cat="tools"] { background: linear-gradient(135deg, rgba(201,168,76,0.12), var(--depth)); }
.preview-mk-cat[data-cat="tools"] svg { color: var(--gold-light); }
/* Browse All — single row of plugin cards with overflow fade */
.preview-mk-browse {
display: flex;
gap: 0.5rem;
overflow: hidden;
mask-image: linear-gradient(to right, #000 90%, transparent 100%);
-webkit-mask-image: linear-gradient(to right, #000 90%, transparent 100%);
}
.preview-mk-bcard {
flex: 0 0 auto;
width: 158px;
background: var(--depth);
border: 1px solid var(--border);
border-radius: 8px;
overflow: hidden;
display: flex;
flex-direction: column;
cursor: pointer;
transition: border-color 0.18s ease, transform 0.18s ease;
}
.preview-mk-bcard:hover { transform: translateY(-2px); border-color: var(--border2); }
.preview-mk-bcard-img {
height: 70px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
.preview-mk-bcard-art {
font-family: var(--font-display);
font-weight: 900;
font-size: 0.82rem;
letter-spacing: 0.08em;
color: rgba(255, 255, 255, 0.92);
text-align: center;
line-height: 1.05;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
padding: 0 0.4rem;
}
.preview-mk-bcard-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.4rem;
padding: 0.5rem 0.6rem 0.35rem;
min-width: 0;
}
.preview-mk-bcard-name {
font-family: var(--font-display);
font-size: 0.74rem;
color: var(--text);
letter-spacing: 0.02em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
.preview-mk-bcard-price {
font-family: var(--font-mono);
font-size: 0.6rem;
letter-spacing: 0.04em;
white-space: nowrap;
flex-shrink: 0;
}
.preview-mk-bcard-price.free { color: rgba(87, 242, 135, 0.95); }
.preview-mk-bcard-price.paid { color: var(--gold-light); }
.preview-mk-bcard-btn {
margin: 0 0.6rem 0.6rem;
padding: 0.3rem 0;
text-align: center;
font-family: var(--font-mono);
font-size: 0.62rem;
letter-spacing: 0.1em;
text-transform: uppercase;
border-radius: 4px;
border: 1px solid var(--border);
background: var(--abyss);
color: var(--muted);
cursor: pointer;
transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.preview-mk-bcard-btn.settings:hover {
border-color: var(--border2);
color: var(--text);
}
.preview-mk-bcard-btn.install {
background: var(--gold-bg);
border-color: var(--gold-dim);
color: var(--gold-light);
}
.preview-mk-bcard-btn.install:hover {
background: rgba(201, 168, 76, 0.18);
}
/* Stack featured card vertically when the preview is narrow so the art
doesn't shrink to nothing. */
@media (max-width: 900px) {
.preview-mk-featured { grid-template-columns: 1fr; }
.preview-mk-featured-art { border-left: 0; border-top: 1px solid var(--border); min-height: 80px; }
}
/* ── Panel: Earnings ────────────────────────────────────────────────────── */
.preview-payouts {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.preview-payout {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 0.7rem;
align-items: center;
background: var(--depth);
border: 1px solid var(--border);
border-radius: 6px;
padding: 0.5rem 0.75rem;
font-family: var(--font-mono);
font-size: 0.7rem;
}
.preview-payout-date { color: var(--muted2); font-size: 0.62rem; letter-spacing: 0.06em; }
.preview-payout-desc { color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preview-payout-amt { color: rgba(87, 242, 135, 0.95); font-weight: 700; }
/* ── Panel: Access (member roles & permissions) ─────────────────────────── */
.preview-acc-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 0.7rem;
}
.preview-acc-sub {
font-family: var(--font-mono);
font-size: 0.65rem;
color: var(--muted);
margin-top: 0.15rem;
letter-spacing: 0.02em;
}
.preview-acc-count {
font-family: var(--font-mono);
font-size: 0.6rem;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 0.28rem 0.55rem;
border-radius: 4px;
border: 1px solid var(--border);
background: var(--depth);
color: var(--muted);
white-space: nowrap;
flex-shrink: 0;
margin-top: 0.2rem;
}
/* Card container shared by Grant Access + Manager Permissions */
.preview-acc-card {
background: var(--depth);
border: 1px solid var(--border);
border-radius: 8px;
padding: 0.75rem 0.85rem;
display: flex;
flex-direction: column;
gap: 0.55rem;
min-width: 0;
}
.preview-acc-card-title {
font-family: var(--font-display);
font-size: 0.85rem;
color: var(--text);
letter-spacing: 0.04em;
}
.preview-acc-card-sub {
font-family: var(--font-mono);
font-size: 0.6rem;
color: var(--muted2);
letter-spacing: 0.02em;
margin-top: -0.3rem;
line-height: 1.4;
}
/* Field row */
.preview-acc-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.7rem;
}
.preview-acc-field {
display: flex;
flex-direction: column;
gap: 0.25rem;
min-width: 0;
}
.preview-acc-label {
font-family: var(--font-mono);
font-size: 0.55rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted2);
}
/* Faux input — looks like a real text input but is static */
.preview-acc-input {
background: var(--abyss);
border: 1px solid var(--border);
border-radius: 5px;
padding: 0.45rem 0.65rem;
font-family: var(--font-mono);
font-size: 0.66rem;
color: var(--muted2);
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.preview-acc-input span { color: var(--muted2); }
/* Faux select — used in grant form + permissions grid */
.preview-acc-select {
display: flex;
justify-content: space-between;
align-items: center;
background: var(--abyss);
border: 1px solid var(--border);
border-radius: 5px;
padding: 0.45rem 0.65rem;
font-family: var(--font-mono);
font-size: 0.66rem;
color: var(--text);
cursor: pointer;
transition: border-color 0.15s ease;
}
.preview-acc-select:hover { border-color: var(--border2); }
.preview-acc-select.sm { padding: 0.35rem 0.55rem; font-size: 0.62rem; }
.preview-acc-select .full { color: rgba(87, 242, 135, 0.95); }
.preview-acc-select .none { color: rgba(255, 120, 120, 0.85); }
.preview-acc-caret { color: var(--muted2); font-size: 0.7rem; line-height: 1; margin-left: 0.4rem; }
.preview-acc-hint {
font-family: var(--font-mono);
font-size: 0.55rem;
color: var(--muted2);
letter-spacing: 0.02em;
line-height: 1.4;
}
.preview-acc-btn {
align-self: flex-start;
font-family: var(--font-mono);
font-size: 0.65rem;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 0.4rem 0.85rem;
border-radius: 4px;
border: 1px solid var(--gold-dim);
background: var(--gold-bg);
color: var(--gold-light);
cursor: pointer;
transition: background 0.15s ease;
}
.preview-acc-btn:hover { background: rgba(201, 168, 76, 0.18); }
/* Manager Permissions — 2-col grid of label + select */
.preview-acc-perm-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.45rem 0.7rem;
}
.preview-acc-perm {
display: flex;
flex-direction: column;
gap: 0.22rem;
min-width: 0;
}
/* Bottom row: Current Members + Permissions Reference side-by-side */
.preview-acc-bottom {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.7rem;
align-items: start;
}
.preview-acc-col {
display: flex;
flex-direction: column;
gap: 0.4rem;
min-width: 0;
}
.preview-acc-members {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.preview-acc-member {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 0.55rem;
align-items: center;
background: var(--depth);
border: 1px solid var(--border);
border-radius: 7px;
padding: 0.5rem 0.65rem;
min-width: 0;
}
.preview-acc-member.highlighted {
border-color: var(--gold-dim);
background: var(--gold-bg);
}
.preview-acc-member-avatar {
width: 28px; height: 28px;
border-radius: 5px;
display: flex; align-items: center; justify-content: center;
font-family: var(--font-display);
font-size: 0.7rem;
font-weight: 800;
color: rgba(255, 255, 255, 0.95);
flex-shrink: 0;
letter-spacing: 0;
}
.preview-acc-member-info { min-width: 0; }
.preview-acc-member-name {
font-family: var(--font-display);
font-size: 0.78rem;
color: var(--text);
letter-spacing: 0.02em;
}
.preview-acc-member.highlighted .preview-acc-member-name { color: var(--gold-light); }
.preview-acc-member-handle {
font-family: var(--font-mono);
font-size: 0.6rem;
color: var(--muted2);
letter-spacing: 0.02em;
}
.preview-acc-role-pill {
font-family: var(--font-mono);
font-size: 0.55rem;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 0.18rem 0.45rem;
border-radius: 3px;
background: var(--gold-bg);
color: var(--gold-light);
border: 1px solid var(--gold-dim);
white-space: nowrap;
}
/* Permissions reference mini-table */
.preview-acc-permref {
background: var(--depth);
border: 1px solid var(--border);
border-radius: 7px;
overflow: hidden;
}
.preview-acc-permref-row {
display: grid;
grid-template-columns: 1fr 38px 48px 40px;
align-items: center;
gap: 0.4rem;
padding: 0.38rem 0.6rem;
border-top: 1px solid var(--border);
font-family: var(--font-mono);
font-size: 0.62rem;
color: var(--text);
}
.preview-acc-permref-row:first-child { border-top: 0; }
.preview-acc-permref-row.head {
background: rgba(255, 255, 255, 0.025);
font-size: 0.55rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--muted2);
}
.preview-acc-permref-row > span:not(:first-child) {
text-align: center;
}
.preview-acc-permref-row .y { color: rgba(87, 242, 135, 0.95); }
.preview-acc-permref-row .n { color: var(--muted2); }
/* Stack the bottom row + the perm grid on narrow widths */
@media (max-width: 900px) {
.preview-acc-row,
.preview-acc-perm-grid,
.preview-acc-bottom { grid-template-columns: 1fr; }
}
/* ── Panel: Bot Settings (BYO bot configuration) ────────────────────────── */
.preview-bs-header {
display: flex;
align-items: center;
gap: 0.7rem;
padding: 0.7rem 0.85rem;
background: var(--depth);
border: 1px solid var(--border);
border-radius: 8px;
}
.preview-bs-avatar {
width: 44px; height: 44px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, #1e3a8a, #6d28d9);
color: rgba(255, 255, 255, 0.85);
flex-shrink: 0;
}
.preview-bs-header-info {
display: flex;
flex-direction: column;
gap: 0.2rem;
min-width: 0;
flex: 1 1 auto;
}
.preview-bs-name {
font-family: var(--font-display);
font-size: 0.88rem;
color: var(--text);
letter-spacing: 0.03em;
}
.preview-bs-id {
font-family: var(--font-mono);
font-size: 0.58rem;
color: var(--muted2);
letter-spacing: 0.04em;
}
.preview-bs-pills {
display: flex;
gap: 0.35rem;
margin-top: 0.15rem;
flex-wrap: wrap;
}
.preview-bs-pill {
font-family: var(--font-mono);
font-size: 0.58rem;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 0.2rem 0.5rem;
border-radius: 4px;
border: 1px solid var(--border);
display: inline-flex;
align-items: center;
gap: 0.3rem;
}
.preview-bs-pill.running {
color: rgba(87, 242, 135, 0.95);
background: rgba(87, 242, 135, 0.1);
border-color: rgba(87, 242, 135, 0.3);
}
.preview-bs-pill.running i {
width: 5px; height: 5px; border-radius: 50%;
background: rgba(87, 242, 135, 0.95);
box-shadow: 0 0 6px rgba(87, 242, 135, 0.6);
}
.preview-bs-pill.byo {
color: var(--gold-light);
background: var(--gold-bg);
border-color: var(--gold-dim);
}
.preview-bs-pill.invite {
color: var(--cyan);
background: var(--cyan-bg);
border-color: var(--cyan-dim);
cursor: pointer;
transition: background 0.15s ease;
}
.preview-bs-pill.invite:hover { background: rgba(78, 205, 196, 0.15); }
/* Bot Mode tiles */
.preview-bs-mode {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.6rem;
}
.preview-bs-mode-tile {
background: var(--depth);
border: 1px solid var(--border);
border-radius: 8px;
padding: 0.85rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.3rem;
cursor: pointer;
transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease;
}
.preview-bs-mode-tile:hover { transform: translateY(-1px); border-color: var(--border2); }
.preview-bs-mode-tile.active {
border-color: var(--gold);
background: var(--gold-bg);
box-shadow: 0 0 0 1px var(--gold) inset;
}
.preview-bs-mode-tile:not(.active) {
opacity: 0.55;
}
.preview-bs-mode-title {
font-family: var(--font-display);
font-size: 0.82rem;
color: var(--text);
letter-spacing: 0.06em;
text-transform: uppercase;
}
.preview-bs-mode-tile.active .preview-bs-mode-title { color: var(--gold-light); }
.preview-bs-mode-desc {
font-family: var(--font-mono);
font-size: 0.6rem;
color: var(--muted2);
letter-spacing: 0.04em;
}
/* Process Control row */
.preview-bs-process {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.55rem 0.75rem;
background: var(--depth);
border: 1px solid var(--border);
border-radius: 7px;
}
.preview-bs-proc-info {
font-family: var(--font-mono);
font-size: 0.6rem;
color: var(--muted);
letter-spacing: 0.02em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
.preview-bs-spacer { flex: 1 1 auto; }
.preview-bs-btn {
font-family: var(--font-mono);
font-size: 0.6rem;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 0.32rem 0.65rem;
border-radius: 4px;
cursor: pointer;
transition: background 0.15s ease;
white-space: nowrap;
}
.preview-bs-btn.stop {
border: 1px solid rgba(255, 100, 100, 0.4);
background: rgba(255, 100, 100, 0.08);
color: rgba(255, 120, 120, 0.95);
}
.preview-bs-btn.stop:hover { background: rgba(255, 100, 100, 0.18); }
.preview-bs-btn.restart {
border: 1px solid var(--gold-dim);
background: var(--gold-bg);
color: var(--gold-light);
}
.preview-bs-btn.restart:hover { background: rgba(201, 168, 76, 0.18); }
/* Generic section (Identity + Presence) */
.preview-bs-section {
background: var(--depth);
border: 1px solid var(--border);
border-radius: 8px;
padding: 0.75rem 0.85rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
min-width: 0;
}
.preview-bs-section-title {
font-family: var(--font-display);
font-size: 0.78rem;
color: var(--text);
letter-spacing: 0.04em;
}
.preview-bs-section-sub {
font-family: var(--font-mono);
font-size: 0.6rem;
color: var(--muted2);
letter-spacing: 0.02em;
line-height: 1.4;
margin-top: -0.25rem;
}
.preview-bs-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.6rem;
}
.preview-bs-row.three {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr);
}
/* Presence live preview line */
.preview-bs-presence-preview {
display: flex;
align-items: center;
gap: 0.4rem;
padding: 0.45rem 0.6rem;
background: var(--abyss);
border: 1px solid var(--border);
border-radius: 5px;
font-family: var(--font-mono);
font-size: 0.66rem;
}
.preview-bs-presence-preview .preview-bs-pill.running {
padding: 0.1rem 0.3rem;
font-size: 0;
}
.preview-bs-presence-name {
color: var(--text);
letter-spacing: 0.02em;
}
.preview-bs-presence-activity {
color: var(--muted2);
letter-spacing: 0.02em;
}
.preview-bs-status-dot {
width: 7px; height: 7px; border-radius: 50%;
display: inline-block;
margin-right: 0.35rem;
vertical-align: middle;
}
.preview-bs-status-dot.online { background: rgba(87, 242, 135, 0.95); }
.preview-bs-status-dot.idle { background: rgba(254, 231, 92, 0.9); }
.preview-bs-status-dot.dnd { background: rgba(255, 100, 100, 0.9); }
.preview-bs-status-dot.invisible { background: var(--muted2); }
/* Token line — compact */
.preview-bs-token {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.55rem 0.75rem;
background: var(--depth);
border: 1px solid var(--border);
border-radius: 6px;
}
.preview-bs-token-badge {
font-family: var(--font-mono);
font-size: 0.6rem;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 0.22rem 0.5rem;
border-radius: 3px;
background: rgba(87, 242, 135, 0.12);
color: rgba(87, 242, 135, 0.95);
border: 1px solid rgba(87, 242, 135, 0.35);
white-space: nowrap;
}
.preview-bs-token-app {
font-family: var(--font-mono);
font-size: 0.62rem;
color: var(--muted);
letter-spacing: 0.02em;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Stack form rows on narrow widths */
@media (max-width: 900px) {
.preview-bs-row,
.preview-bs-row.three,
.preview-bs-mode { grid-template-columns: 1fr; }
}
/* ── Panel: My Plugins (developer portal) ───────────────────────────────── */
.preview-dev-actions {
display: flex;
gap: 0.4rem;
flex-wrap: wrap;
}
.preview-dev-action {
font-family: var(--font-mono);
font-size: 0.6rem;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 0.32rem 0.65rem;
border-radius: 4px;
border: 1px solid var(--border);
background: var(--abyss);
color: var(--muted);
cursor: pointer;
transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.preview-dev-action:hover { color: var(--text); border-color: var(--border2); }
.preview-dev-action.gold {
color: var(--gold-light);
border-color: var(--gold-dim);
background: var(--gold-bg);
}
.preview-dev-action.gold:hover { background: rgba(201, 168, 76, 0.18); }
/* Stat tile row */
.preview-dev-stats {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 0.45rem;
}
.preview-dev-stat {
background: var(--depth);
border: 1px solid var(--border);
border-radius: 7px;
padding: 0.5rem 0.6rem;
min-width: 0;
}
.preview-dev-stat-label {
font-family: var(--font-mono);
font-size: 0.55rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--muted2);
margin-bottom: 0.2rem;
}
.preview-dev-stat-val {
font-family: var(--font-display);
font-size: 0.95rem;
font-weight: 800;
line-height: 1.1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.preview-dev-stat-val em {
font-family: var(--font-mono);
font-size: 0.55rem;
font-weight: normal;
font-style: normal;
color: var(--muted2);
letter-spacing: 0.05em;
margin-left: 0.15rem;
}
.preview-dev-stat-val.gold { color: var(--gold-light); }
.preview-dev-stat-val.cyan { color: rgba(114, 250, 192, 0.95); }
.preview-dev-stat-val.gold-link { color: var(--gold-light); font-size: 0.78rem; cursor: pointer; }
.preview-dev-stat-val.gold-link:hover { color: var(--gold); }
/* Plugins table */
.preview-dev-table {
background: var(--depth);
border: 1px solid var(--border);
border-radius: 8px;
overflow: hidden;
}
.preview-dev-row {
display: grid;
grid-template-columns: minmax(0, 1.6fr) 70px minmax(0, 1.2fr) 32px 60px 56px;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.7rem;
border-top: 1px solid var(--border);
font-family: var(--font-mono);
font-size: 0.66rem;
color: var(--text);
}
.preview-dev-row:first-child { border-top: 0; }
.preview-dev-row.head {
background: rgba(255, 255, 255, 0.025);
font-size: 0.55rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--muted2);
padding: 0.4rem 0.7rem;
}
.preview-dev-row:not(.head):hover { background: rgba(255, 255, 255, 0.02); }
.preview-dev-row .plugcell {
display: flex;
flex-direction: column;
gap: 0.05rem;
min-width: 0;
}
.preview-dev-row .plugname {
font-family: var(--font-display);
font-size: 0.78rem;
color: var(--text);
letter-spacing: 0.02em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.preview-dev-row .plugslug {
font-family: var(--font-mono);
font-size: 0.58rem;
color: var(--muted2);
letter-spacing: 0.04em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.preview-dev-row .latest {
display: flex;
align-items: center;
gap: 0.3rem;
white-space: nowrap;
overflow: hidden;
font-size: 0.62rem;
}
.preview-dev-row .latest.muted2 { color: var(--muted2); }
.preview-dev-row .rating {
color: var(--gold-light);
letter-spacing: 0.04em;
}
.preview-dev-row .rating em {
font-family: var(--font-mono);
font-style: normal;
color: var(--text);
margin-left: 0.2rem;
font-size: 0.62rem;
}
.preview-dev-row .manage {
font-family: var(--font-mono);
font-size: 0.56rem;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 0.3rem 0.5rem;
border-radius: 4px;
border: 1px solid var(--border);
background: var(--abyss);
color: var(--muted);
text-align: center;
cursor: pointer;
transition: color 0.15s ease, border-color 0.15s ease;
}
.preview-dev-row .manage:hover { color: var(--text); border-color: var(--border2); }
.preview-dev-row .muted2 { color: var(--muted2); }
.preview-dev-pill {
display: inline-block;
font-family: var(--font-mono);
font-size: 0.5rem;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 0.12rem 0.35rem;
border-radius: 3px;
white-space: nowrap;
}
.preview-dev-pill.pub { color: rgba(87, 242, 135, 0.95); background: rgba(87, 242, 135, 0.1); border: 1px solid rgba(87, 242, 135, 0.3); }
.preview-dev-pill.drft { color: var(--muted2); background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border); }
.preview-dev-pill.live { color: var(--cyan); background: var(--cyan-bg); border: 1px solid var(--cyan-dim); }
/* Getting Started collapsible */
.preview-dev-collapse {
display: flex;
align-items: center;
gap: 0.4rem;
padding: 0.55rem 0.75rem;
background: var(--depth);
border: 1px solid var(--border);
border-radius: 6px;
font-family: var(--font-display);
font-size: 0.78rem;
color: var(--text);
letter-spacing: 0.03em;
cursor: pointer;
transition: border-color 0.15s ease;
}
.preview-dev-collapse:hover { border-color: var(--border2); }
.preview-dev-collapse-caret { color: var(--muted2); font-size: 0.7rem; }
/* Narrow widths: shrink stat row to 3 cols and drop ratings/manage label space */
@media (max-width: 900px) {
.preview-dev-stats { grid-template-columns: repeat(3, 1fr); }
.preview-dev-row {
grid-template-columns: minmax(0, 1.4fr) 60px minmax(0, 1fr) 50px;
}
.preview-dev-row > :nth-child(4),
.preview-dev-row > :nth-child(5) { display: none; }
}
/* ── Panel: Profile (developer public profile editor) ───────────────────── */
.preview-pf-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 0.7rem;
}
.preview-pf-view {
font-family: var(--font-mono);
font-size: 0.6rem;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 0.35rem 0.7rem;
border-radius: 4px;
border: 1px solid var(--gold-dim);
background: var(--gold-bg);
color: var(--gold-light);
white-space: nowrap;
cursor: pointer;
transition: background 0.15s ease;
margin-top: 0.15rem;
}
.preview-pf-view:hover { background: rgba(201, 168, 76, 0.18); }
.preview-pf-card {
background: var(--depth);
border: 1px solid var(--border);
border-radius: 8px;
padding: 0.75rem 0.85rem;
display: flex;
flex-direction: column;
gap: 0.55rem;
min-width: 0;
}
.preview-pf-card-title {
font-family: var(--font-mono);
font-size: 0.6rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gold-light);
}
/* Accent color picker — color bar + swatch */
.preview-pf-color {
display: grid;
grid-template-columns: 1fr auto;
gap: 0.5rem;
align-items: stretch;
}
.preview-pf-color-bar {
height: 26px;
border-radius: 5px;
border: 1px solid var(--border);
cursor: pointer;
box-shadow: 0 0 18px var(--preview-accent, rgba(0, 230, 118, 0.35)) inset, 0 0 8px rgba(0, 0, 0, 0.4) inset;
transition: background 0.25s ease, box-shadow 0.25s ease;
}
.preview-pf-color-swatch {
width: 26px; height: 26px;
border-radius: 5px;
border: 1px solid var(--border);
cursor: pointer;
transition: background 0.25s ease, box-shadow 0.25s ease;
}
/* Bio textarea-styled box */
.preview-pf-bio-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
}
.preview-pf-counter {
font-family: var(--font-mono);
font-size: 0.55rem;
letter-spacing: 0.08em;
color: var(--muted2);
}
.preview-pf-bio {
background: var(--abyss);
border: 1px solid var(--border);
border-radius: 5px;
padding: 0.6rem 0.75rem;
font-family: var(--font-mono);
font-size: 0.66rem;
color: var(--text);
line-height: 1.55;
min-height: 56px;
}
/* Skills tag row */
.preview-pf-skills {
display: flex;
gap: 0.35rem;
flex-wrap: wrap;
}
.preview-pf-skill {
font-family: var(--font-mono);
font-size: 0.6rem;
letter-spacing: 0.04em;
padding: 0.22rem 0.5rem;
border-radius: 999px;
border: 1px solid var(--cyan-dim);
background: var(--cyan-bg);
color: var(--cyan);
}
/* ── Panel: Earnings (developer payouts dashboard) ──────────────────────── */
/* KPI tiles with decorative blobs */
.preview-earn-kpis {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.5rem;
}
.preview-earn-kpi {
position: relative;
background: var(--depth);
border: 1px solid var(--border);
border-radius: 8px;
padding: 0.55rem 0.7rem;
min-width: 0;
overflow: hidden;
}
.preview-earn-kpi-row {
display: flex;
align-items: center;
gap: 0.4rem;
margin-bottom: 0.15rem;
}
.preview-earn-kpi-num {
font-family: var(--font-display);
font-size: 1.05rem;
font-weight: 800;
color: var(--text);
line-height: 1.05;
white-space: nowrap;
}
.preview-earn-kpi-num.green { color: rgba(87, 242, 135, 0.95); }
.preview-earn-kpi-num.cyan { color: rgba(114, 250, 192, 0.95); }
.preview-earn-kpi-num.purple { color: rgba(196, 181, 253, 0.95); }
.preview-earn-delta {
font-family: var(--font-mono);
font-size: 0.52rem;
padding: 0.12rem 0.35rem;
border-radius: 3px;
letter-spacing: 0.05em;
}
.preview-earn-delta.up { color: rgba(87, 242, 135, 0.95); background: rgba(87, 242, 135, 0.1); }
.preview-earn-delta.down { color: rgba(255, 120, 120, 0.95); background: rgba(255, 100, 100, 0.1); }
.preview-earn-kpi-label {
font-family: var(--font-mono);
font-size: 0.58rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--muted2);
}
.preview-earn-kpi-sub {
font-family: var(--font-mono);
font-size: 0.54rem;
color: var(--muted2);
letter-spacing: 0.04em;
margin-top: 0.15rem;
}
/* Decorative quarter-circle blob in top-right of each tile */
.preview-earn-kpi-blob {
position: absolute;
top: -22px; right: -22px;
width: 60px; height: 60px;
border-radius: 50%;
opacity: 0.18;
pointer-events: none;
}
.preview-earn-kpi-blob.green { background: rgba(87, 242, 135, 0.95); }
.preview-earn-kpi-blob.amber { background: rgba(254, 231, 92, 0.9); }
.preview-earn-kpi-blob.purple { background: rgba(167, 139, 250, 0.95); }
.preview-earn-kpi-blob.cyan { background: rgba(114, 250, 192, 0.95); }
/* Stripe status banner */
.preview-earn-stripe {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.55rem 0.75rem;
background: var(--depth);
border: 1px solid var(--border);
border-radius: 7px;
min-width: 0;
}
.preview-earn-stripe-info {
font-family: var(--font-mono);
font-size: 0.62rem;
color: var(--muted);
letter-spacing: 0.02em;
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.preview-earn-stripe-info em {
color: var(--text);
font-style: normal;
}
.preview-earn-stripe-balance {
font-family: var(--font-mono);
font-size: 0.66rem;
letter-spacing: 0.04em;
white-space: nowrap;
}
.preview-earn-stripe-balance .muted2 { color: var(--muted2); }
.preview-earn-stripe-balance .green { color: rgba(87, 242, 135, 0.95); font-weight: 700; }
/* Revenue Trend chart card */
.preview-earn-chart {
background: var(--depth);
border: 1px solid var(--border);
border-radius: 8px;
padding: 0.7rem 0.85rem 0.5rem;
}
.preview-earn-chart-svg {
display: block;
width: 100%;
height: clamp(95px, 11vw, 140px);
}
.preview-earn-chart-axis {
display: flex;
justify-content: space-between;
font-family: var(--font-mono);
font-size: 0.55rem;
color: var(--muted2);
letter-spacing: 0.06em;
margin-top: 0.3rem;
}
/* Revenue by Plugin section */
.preview-earn-byplug-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.6rem;
}
.preview-earn-tabs {
display: flex;
gap: 0.25rem;
}
.preview-earn-tab {
font-family: var(--font-mono);
font-size: 0.55rem;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 0.22rem 0.5rem;
border-radius: 4px;
border: 1px solid var(--border);
color: var(--muted);
background: var(--abyss);
cursor: pointer;
transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.preview-earn-tab:hover { color: var(--text); border-color: var(--border2); }
.preview-earn-tab.active {
background: var(--gold-bg);
border-color: var(--gold-dim);
color: var(--gold-light);
}
.preview-earn-byplug {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.45rem;
}
.preview-earn-plug {
background: var(--depth);
border: 1px solid var(--border);
border-radius: 7px;
padding: 0.5rem 0.6rem;
display: flex;
flex-direction: column;
gap: 0.3rem;
min-width: 0;
}
.preview-earn-plug-head { display: flex; flex-direction: column; gap: 0.05rem; min-width: 0; }
.preview-earn-plug-name {
font-family: var(--font-display);
font-size: 0.74rem;
color: var(--text);
letter-spacing: 0.02em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.preview-earn-plug-slug {
font-family: var(--font-mono);
font-size: 0.55rem;
color: var(--muted2);
letter-spacing: 0.04em;
}
.preview-earn-plug-stats {
display: flex;
gap: 0.6rem;
font-family: var(--font-mono);
font-size: 0.6rem;
color: var(--muted);
}
.preview-earn-plug-stats b {
color: var(--text);
font-weight: 700;
font-family: var(--font-display);
font-size: 0.72rem;
margin-right: 0.15rem;
}
.preview-earn-plug-stats b.green { color: rgba(87, 242, 135, 0.95); }
.preview-earn-plug-stats em {
font-style: normal;
color: var(--muted2);
letter-spacing: 0.06em;
text-transform: uppercase;
font-size: 0.52rem;
}
.preview-earn-plug-bar {
height: 3px;
background: var(--abyss);
border-radius: 2px;
overflow: hidden;
}
.preview-earn-plug-bar i {
display: block;
height: 100%;
border-radius: 2px;
transition: width 0.35s ease;
}
/* All-Time stats card with time toggle */
.preview-earn-alltime {
background: var(--depth);
border: 1px solid var(--border);
border-radius: 8px;
padding: 0.6rem 0.85rem 0.7rem;
}
.preview-earn-alltime-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.45rem;
}
.preview-earn-time-toggle {
display: flex;
gap: 0.2rem;
}
.preview-earn-time {
font-family: var(--font-mono);
font-size: 0.55rem;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 0.18rem 0.45rem;
border-radius: 4px;
border: 1px solid var(--border);
color: var(--muted);
background: var(--abyss);
cursor: pointer;
transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.preview-earn-time:hover { color: var(--text); border-color: var(--border2); }
.preview-earn-time.active {
background: var(--gold-bg);
border-color: var(--gold-dim);
color: var(--gold-light);
}
.preview-earn-alltime-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.5rem;
}
.preview-earn-alltime-cell { min-width: 0; }
.preview-earn-alltime-label {
font-family: var(--font-mono);
font-size: 0.55rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--muted2);
margin-bottom: 0.15rem;
}
.preview-earn-alltime-val {
font-family: var(--font-display);
font-size: 0.95rem;
font-weight: 800;
color: var(--text);
line-height: 1.05;
white-space: nowrap;
transition: color 0.2s ease;
}
.preview-earn-alltime-val.green { color: rgba(87, 242, 135, 0.95); }
.preview-earn-alltime-val.red { color: rgba(255, 120, 120, 0.95); }
/* Recent sales rows reuse .preview-payout — extend the desc to allow bold names */
.preview-payout-desc b {
font-family: var(--font-display);
font-weight: 700;
color: var(--text);
margin-right: 0.2rem;
}
/* Narrow widths — collapse grids */
@media (max-width: 900px) {
.preview-earn-kpis,
.preview-earn-alltime-grid { grid-template-columns: 1fr 1fr; }
.preview-earn-byplug { grid-template-columns: 1fr; }
.preview-earn-stripe { flex-wrap: wrap; }
}
/* ── Panel: Docs (plugin documentation) ─────────────────────────────────── */
.preview-docs-intro {
font-family: var(--font-mono);
font-size: 0.65rem;
color: var(--muted);
line-height: 1.5;
letter-spacing: 0.02em;
padding: 0.55rem 0.75rem;
background: var(--depth);
border: 1px solid var(--border);
border-radius: 6px;
}
.preview-docs-intro .muted2 { color: var(--muted2); font-size: 0.55rem; letter-spacing: 0.12em; text-transform: uppercase; }
.preview-docs-intro .gold { color: var(--gold-light); font-weight: 700; }
.preview-docs-intro .dot { color: var(--muted2); margin: 0 0.2rem; }
/* Tab strip — 8 tabs with overflow fade */
.preview-docs-tabs {
display: flex;
gap: 0.3rem;
overflow: hidden;
mask-image: linear-gradient(to right, #000 92%, transparent 100%);
-webkit-mask-image: linear-gradient(to right, #000 92%, transparent 100%);
padding-bottom: 0.1rem;
}
.preview-docs-tab {
font-family: var(--font-mono);
font-size: 0.6rem;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 0.35rem 0.65rem;
border: 1px solid var(--border);
background: var(--depth);
color: var(--muted);
border-radius: 4px;
white-space: nowrap;
flex-shrink: 0;
cursor: pointer;
transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.preview-docs-tab:hover { color: var(--text); border-color: var(--border2); }
.preview-docs-tab.active {
background: var(--gold-bg);
border-color: var(--gold-dim);
color: var(--gold-light);
}
/* Filter input mock */
.preview-docs-filter {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
padding: 0.45rem 0.7rem;
background: var(--abyss);
border: 1px solid var(--border);
border-radius: 5px;
font-family: var(--font-mono);
}
.preview-docs-filter-text { font-size: 0.65rem; color: var(--muted2); letter-spacing: 0.02em; }
.preview-docs-filter-key {
font-size: 0.55rem;
letter-spacing: 0.1em;
padding: 0.1rem 0.35rem;
border-radius: 3px;
border: 1px solid var(--border);
background: var(--depth);
color: var(--muted2);
}
/* Body */
.preview-docs-body {
background: var(--depth);
border: 1px solid var(--border);
border-radius: 8px;
padding: 0.85rem 1rem;
min-width: 0;
}
.preview-docs-h {
font-family: var(--font-display);
font-size: 1rem;
color: var(--gold-light);
letter-spacing: 0.04em;
margin: 0 0 0.5rem;
padding-bottom: 0.4rem;
border-bottom: 1px solid var(--border);
}
.preview-docs-h-sm {
font-family: var(--font-display);
font-size: 0.78rem;
color: var(--text);
letter-spacing: 0.04em;
margin: 0.7rem 0 0.4rem;
}
.preview-docs-p {
font-family: var(--font-mono);
font-size: 0.68rem;
color: var(--muted);
line-height: 1.55;
margin: 0 0 0.5rem;
}
.preview-docs-list {
margin: 0 0 0.5rem;
padding-left: 1.1rem;
font-family: var(--font-mono);
font-size: 0.66rem;
color: var(--text);
line-height: 1.6;
}
.preview-docs-list.compact { line-height: 1.5; }
.preview-docs-list li { margin-bottom: 0.15rem; }
.preview-docs-list li b { color: var(--gold-light); font-weight: 700; }
.preview-docs-list .muted2 { color: var(--muted2); }
.preview-docs-code {
font-family: var(--font-mono);
font-size: 0.6rem;
padding: 0.05rem 0.3rem;
border-radius: 3px;
background: var(--abyss);
border: 1px solid var(--border);
color: var(--gold-light);
white-space: nowrap;
}
.preview-docs-ascii {
font-family: var(--font-mono);
font-size: 0.58rem;
color: var(--muted);
background: var(--abyss);
border: 1px solid var(--border);
border-radius: 6px;
padding: 0.7rem 0.85rem;
margin: 0.5rem 0 0;
line-height: 1.5;
overflow-x: auto;
white-space: pre;
}
/* ── Panel: Overview (Select Server) ────────────────────────────────────── */
.preview-ov-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 0.8rem;
}
.preview-ov-meta {
display: flex;
gap: 0.35rem;
align-items: center;
font-family: var(--font-mono);
font-size: 0.68rem;
letter-spacing: 0.04em;
margin-top: 0.2rem;
}
.preview-ov-meta .cyan { color: rgba(114, 250, 192, 0.95); }
.preview-ov-meta .green { color: rgba(87, 242, 135, 0.95); }
.preview-ov-meta .amber { color: rgba(254, 231, 92, 0.9); }
.preview-ov-meta .dot { color: var(--muted2); }
.preview-ov-search {
display: flex;
align-items: center;
gap: 0.4rem;
background: var(--depth);
border: 1px solid var(--border);
border-radius: 5px;
padding: 0.4rem 0.65rem;
font-family: var(--font-mono);
font-size: 0.62rem;
color: var(--muted2);
min-width: 0;
flex-shrink: 1;
}
.preview-ov-search svg { color: var(--muted2); flex-shrink: 0; }
.preview-ov-search span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.preview-ov-filters {
display: flex;
flex-wrap: wrap;
gap: 0.3rem;
}
.preview-filter {
font-family: var(--font-mono);
font-size: 0.6rem;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 0.25rem 0.55rem;
border-radius: 999px;
border: 1px solid var(--border);
color: var(--muted);
background: transparent;
cursor: default;
}
.preview-filter.active {
background: var(--gold-bg);
border-color: var(--gold-dim);
color: var(--gold-light);
}
/* Server card grid — horizontal with right-edge fade so it reads as
"more servers scroll off-screen", matching the real product's row of 7. */
.preview-ov-grid {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(150px, 1fr);
gap: 0.5rem;
overflow: hidden;
mask-image: linear-gradient(to right, #000 88%, transparent 100%);
-webkit-mask-image: linear-gradient(to right, #000 88%, transparent 100%);
}
/* Scoped to the overview grid so the sidebar's small .preview-server-card
(the "Dark Carnival" nav block) keeps its original gold treatment. */
.preview-ov-grid .preview-server-card {
background: var(--depth);
border: 1px solid var(--border);
border-radius: 7px;
padding: 0.55rem 0.65rem;
display: flex;
flex-direction: column;
gap: 0.35rem;
min-width: 0;
cursor: pointer;
transition: border-color 0.2s ease, background 0.2s ease;
}
.preview-ov-grid .preview-server-card:hover {
border-color: var(--border2);
}
.preview-ov-grid .preview-server-card.active {
border-color: var(--gold);
background: var(--gold-bg);
box-shadow: 0 0 0 1px var(--gold) inset, 0 6px 14px rgba(0, 0, 0, 0.35);
}
.preview-server-card-head {
display: flex;
align-items: center;
gap: 0.45rem;
min-width: 0;
}
.preview-server-card-avatar {
width: 26px;
height: 26px;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-size: 0.7rem;
font-weight: 800;
color: rgba(255, 255, 255, 0.95);
flex-shrink: 0;
letter-spacing: 0;
}
.preview-server-card-avatar.small { width: 22px; height: 22px; font-size: 0.62rem; border-radius: 4px; }
.preview-server-card-name {
font-family: var(--font-display);
font-size: 0.78rem;
color: var(--text);
letter-spacing: 0.02em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
.preview-ov-grid .preview-server-card.active .preview-server-card-name { color: var(--gold-light); }
.preview-server-card-badges {
display: flex;
flex-wrap: wrap;
gap: 0.25rem;
}
.preview-server-card-invite {
font-family: var(--font-mono);
font-size: 0.6rem;
color: var(--cyan);
background: var(--cyan-bg);
border: 1px solid var(--cyan-dim);
border-radius: 4px;
padding: 0.2rem 0.45rem;
align-self: flex-start;
letter-spacing: 0.04em;
}
/* Reusable badge pill */
.preview-badge {
font-family: var(--font-mono);
font-size: 0.56rem;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 0.15rem 0.4rem;
border-radius: 3px;
border: 1px solid transparent;
white-space: nowrap;
}
.preview-badge.gold { color: var(--gold-light); background: var(--gold-bg); border-color: var(--gold-dim); }
.preview-badge.green { color: rgba(87, 242, 135, 0.95); background: rgba(87, 242, 135, 0.08); border-color: rgba(87, 242, 135, 0.3); }
.preview-badge.cyan { color: var(--cyan); background: var(--cyan-bg); border-color: var(--cyan-dim); }
.preview-badge.red { color: rgba(255, 120, 120, 0.95); background: rgba(255, 100, 100, 0.08); border-color: rgba(255, 100, 100, 0.3); }
.preview-badge.purple { color: rgba(196, 181, 253, 0.95); background: rgba(167, 139, 250, 0.1); border-color: rgba(167, 139, 250, 0.35); }
/* Selected-server detail card */
.preview-ov-detail {
background: var(--depth);
border: 1px solid var(--border);
border-radius: 8px;
padding: 0.7rem 0.85rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
min-width: 0;
}
.preview-ov-detail-head {
display: flex;
align-items: center;
gap: 0.5rem;
}
.preview-ov-detail-name {
font-family: var(--font-display);
font-size: 0.85rem;
color: var(--gold-light);
letter-spacing: 0.03em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
.preview-ov-detail-spacer { flex: 1 1 auto; }
.preview-ov-detail-label {
font-family: var(--font-mono);
font-size: 0.62rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text);
}
.preview-ov-detail-label .muted2 { color: var(--muted2); font-weight: normal; }
/* Plugin pills row — single line with right-edge fade */
.preview-ov-plugins {
display: flex;
gap: 0.35rem;
overflow: hidden;
mask-image: linear-gradient(to right, #000 90%, transparent 100%);
-webkit-mask-image: linear-gradient(to right, #000 90%, transparent 100%);
min-width: 0;
}
.preview-ov-plug {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-family: var(--font-mono);
font-size: 0.6rem;
letter-spacing: 0.04em;
padding: 0.28rem 0.55rem;
border: 1px solid var(--border);
border-radius: 4px;
background: var(--abyss);
color: var(--text);
white-space: nowrap;
flex-shrink: 0;
}
.preview-ov-plug i {
width: 5px; height: 5px;
border-radius: 50%;
background: var(--muted2);
flex-shrink: 0;
}
.preview-ov-plug em {
color: var(--muted2);
font-style: normal;
font-size: 0.54rem;
letter-spacing: 0.06em;
}
.preview-ov-plug.on i { background: rgba(114, 250, 192, 0.95); box-shadow: 0 0 6px rgba(114, 250, 192, 0.45); }
.preview-ov-plug.on { color: var(--text); }
.preview-ov-plug.off { color: var(--muted2); opacity: 0.65; }
.preview-ov-plug.off i { background: var(--muted2); }
/* Empty state shown when a not-installed server is selected */
.preview-ov-empty {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.7rem;
padding: 0.65rem 0.85rem;
background: var(--abyss);
border: 1px dashed var(--border2);
border-radius: 6px;
}
.preview-ov-empty-msg {
font-family: var(--font-mono);
font-size: 0.66rem;
color: var(--muted);
letter-spacing: 0.02em;
}
.preview-ov-empty-action {
font-family: var(--font-mono);
font-size: 0.64rem;
letter-spacing: 0.06em;
color: var(--cyan);
background: var(--cyan-bg);
border: 1px solid var(--cyan-dim);
border-radius: 4px;
padding: 0.28rem 0.6rem;
white-space: nowrap;
cursor: pointer;
}
/* Action button row */
.preview-ov-actions {
display: flex;
gap: 0.4rem;
flex-wrap: wrap;
}
.preview-ov-action {
font-family: var(--font-mono);
font-size: 0.62rem;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 0.35rem 0.7rem;
border-radius: 4px;
border: 1px solid var(--border);
background: var(--abyss);
color: var(--muted);
cursor: pointer;
transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.preview-ov-action:hover {
color: var(--text);
border-color: var(--border2);
background: rgba(255, 255, 255, 0.03);
}
/* Stack the overview head on narrow widths so search drops under title */
@media (max-width: 900px) {
.preview-ov-head { flex-direction: column; }
.preview-ov-search { width: 100%; }
}
/* ── Stat strip (3 numbers) ────────────────────────────────────────────── */
.stat-strip {
position: relative;
z-index: 1;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
background: var(--abyss);
flex-shrink: 0;
width: 100%;
/* Cap so cells don't span 800px+ each on ultrawide displays — three
short numbers in cells that wide read as floating digits in a
mostly-empty band. */
max-width: min(100%, 1400px);
margin: 0 auto;
border-radius: 12px;
}
.stat-strip-inner {
display: grid;
grid-template-columns: repeat(3, 1fr);
width: 100%;
margin: 0 auto;
}
.stat-cell {
padding: 1.5rem 1.25rem;
text-align: center;
border-right: 1px solid var(--border);
}
.stat-cell:last-child { border-right: none; }
.stat-num {
font-family: var(--font-display);
font-size: clamp(1.75rem, 2.6vw, 3rem);
font-weight: 700;
color: var(--gold);
line-height: 1;
margin-bottom: 0.45rem;
font-variant-numeric: tabular-nums;
}
.stat-label {
font-family: var(--font-mono);
font-size: clamp(0.78rem, 0.9vw, 1.05rem);
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--muted2);
}
/* ── Plugin shelf ──────────────────────────────────────────────────────── */
.shelf-section {
/* Tighter padding now that the panel itself centers vertically — header
was eating real estate the grid wanted. */
padding-top: 1.5rem;
padding-bottom: 1.75rem;
position: relative;
}
.shelf-header {
text-align: center;
margin-bottom: 1.25rem;
position: relative;
/* Header stretches to match the uncapped plugin shelf so the
"Browse the marketplace →" link (anchored top:0/right:0) sits above
the right edge of the grid below. Inner .section-title and
.section-lede have their own clamps so the heading text stays
bounded even when the header itself is full-width. */
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.shelf-header .eyebrow { margin-bottom: 0.5rem; }
.shelf-header .section-lede {
margin: 0.45rem auto 0;
max-width: 480px;
font-size: 1rem;
}
/* "Browse the marketplace →" — secondary action that sits in the
top-right of the section, well clear of the centered title block. */
.shelf-marketplace-link {
position: absolute;
top: 0;
right: 0;
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.78rem;
font-weight: 500;
color: var(--cyan);
padding: 0.4rem 0.65rem;
border-radius: 6px;
transition: background 0.18s, color 0.18s, gap 0.18s;
}
.shelf-marketplace-link svg {
display: inline-block;
opacity: 0.7;
transition: transform 0.18s, opacity 0.18s;
}
.shelf-marketplace-link:hover {
background: var(--cyan-bg);
color: #6ee0d7;
gap: 0.55rem;
}
.shelf-marketplace-link:hover svg { opacity: 1; transform: translateX(2px); }
/* Title's "em" word gets a gold underline that draws in when the
plugins panel becomes active. Subtle — turns the gradient word into
a small motion moment instead of a static decoration. */
.section-title em {
position: relative;
display: inline-block;
}
.section-title em::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: -3px;
height: 2px;
background: linear-gradient(90deg, var(--gold), var(--gold-light));
border-radius: 1px;
transform: scaleX(0);
transform-origin: left center;
}
html.tabs-ready .panel-plugins.active .section-title em::after {
animation: titleEmDraw 0.7s 0.35s both cubic-bezier(.4, 0, .2, 1);
}
@keyframes titleEmDraw {
to { transform: scaleX(1); }
}
/* Stat anchor row — small mono line under the lede that frames the
grid in numbers before the eye lands on tiles. */
.shelf-stats {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
justify-content: center;
gap: 0.55rem;
margin: 0.85rem auto 0;
padding: 0.4rem 0.8rem;
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.08em;
color: var(--muted);
background: rgba(255, 255, 255, 0.015);
border: 1px solid var(--border);
border-radius: 999px;
}
.shelf-stats strong {
color: var(--gold);
font-weight: 700;
font-variant-numeric: tabular-nums;
margin-right: 0.25rem;
}
.shelf-stats-sep {
color: var(--gold-dim);
font-weight: 700;
}
.shelf-stats-em {
font-style: italic;
color: var(--cyan);
}
/* "Build your own" mini-banner — anchors the bottom of the grid, mirrors
the dev-banner pattern from the Pricing tab but more compact. */
.shelf-build-banner {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 1.5rem;
margin-top: 1rem;
/* Stretches to match the uncapped plugin shelf above so the CTA aligns
beneath the grid edges on wide displays. */
max-width: 100%;
margin-left: auto;
margin-right: auto;
padding: 0.95rem 1.25rem;
background:
linear-gradient(135deg, rgba(78, 205, 196, 0.05), rgba(78, 205, 196, 0.01) 70%),
var(--abyss);
border: 1px solid var(--cyan-dim);
border-radius: 12px;
text-decoration: none;
transition: border-color 0.2s, background 0.2s, transform 0.2s, box-shadow 0.2s;
}
.shelf-build-banner:hover {
border-color: var(--cyan);
background:
linear-gradient(135deg, rgba(78, 205, 196, 0.09), rgba(78, 205, 196, 0.02) 70%),
var(--depth);
transform: translateY(-1px);
box-shadow: 0 6px 24px rgba(78, 205, 196, 0.08);
}
.shelf-build-tag {
font-family: var(--font-mono);
font-size: 0.76rem;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--cyan);
margin-bottom: 0.25rem;
}
.shelf-build-desc {
font-family: var(--font-prose);
font-size: 0.95rem;
color: var(--muted);
line-height: 1.45;
margin: 0;
}
.shelf-build-cta {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.85rem;
font-weight: 600;
color: var(--cyan);
white-space: nowrap;
transition: gap 0.18s;
}
.shelf-build-banner:hover .shelf-build-cta { gap: 0.6rem; }
.shelf-build-cta svg { display: inline-block; }
@media (max-width: 760px) {
.shelf-build-banner { grid-template-columns: 1fr; padding: 0.85rem 1rem; gap: 0.6rem; }
.shelf-stats { font-size: 0.78rem; gap: 0.35rem; padding: 0.35rem 0.7rem; }
}
.plugin-shelf {
display: grid;
/* 5 columns × 2 rows = exactly 10 tiles, no empty cells. The bordered
grid pattern (1px gap showing parent's --border) requires a
completely-filled grid to look right; partial last rows show as
dark voids inside the border, which reads as "missing content." */
grid-template-columns: repeat(5, 1fr);
gap: 1px;
background: var(--border);
border: 1px solid var(--border);
border-radius: 12px;
overflow: hidden;
/* Asymmetric layout: the grid extends to the gutters so 1080p+
displays utilize the full canvas. 4K (3840px+) tiles get wider than
ideal — out of scope for this pass; revisit with an outer cap if/when
4K usage warrants it. */
max-width: 100%;
margin: 0 auto;
}
.plugin-tile {
background: var(--abyss);
padding: 1.15rem 1.25rem 1.3rem;
display: flex;
flex-direction: column;
gap: 0.45rem;
transition: background 0.2s, transform 0.25s;
position: relative;
}
.plugin-tile.featured {
/* Quiet 2px gold left rail. Earlier we tried adding a warm gradient
+ inset glow on top — looked like a stain rather than a highlight,
and split the rows visually. The rail alone is enough. */
border-left: 2px solid var(--gold);
padding-left: calc(1.25rem - 2px);
}
.plugin-tile:hover {
background: var(--depth);
transform: translateY(-2px);
}
.plugin-tile-icon {
width: 36px; height: 36px;
border-radius: 8px;
background: var(--depth);
border: 1px solid var(--border);
display: flex; align-items: center; justify-content: center;
color: var(--gold-light);
flex-shrink: 0;
margin-bottom: 0.3rem;
}
.plugin-tile-icon svg { width: 18px; height: 18px; }
.plugin-tile.featured .plugin-tile-icon {
border-color: var(--gold-dim);
background: var(--gold-bg);
color: var(--gold);
}
.plugin-tile-name {
font-family: var(--font-display);
font-size: 0.92rem;
font-weight: 700;
letter-spacing: 0.04em;
color: var(--text);
transition: color 0.2s;
}
.plugin-tile:hover .plugin-tile-name { color: var(--gold-light); }
.plugin-tile-desc {
font-size: 0.875rem;
color: var(--muted);
line-height: 1.5;
}
/* ── Pricing ───────────────────────────────────────────────────────────── */
.pricing-section {
/* Fluid: no width cap. Pricing cards self-cap at 360px each via
.pricing-card max-width and reflow via flex-wrap, so on huge
viewports they stay readable and just spread across more rows. */
padding-top: 3.5rem;
padding-bottom: 3.5rem;
}
.pricing-header { text-align: center; margin-bottom: 1.75rem; }
.pricing-header .section-lede {
margin: 0.5rem auto 0;
max-width: 480px;
font-size: 0.95rem;
}
/* Trust microline — sits between the cards and the dev banner. Mono,
small, dot-separated. Last-mile reassurance. */
.pricing-trust-strip {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 0.45rem 1rem;
margin: 1.25rem auto 1.5rem;
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.06em;
color: var(--muted);
list-style: none;
}
.pricing-trust-strip li {
display: inline-flex;
align-items: center;
}
.pricing-trust-strip li::before {
content: '';
display: inline-block;
width: 4px; height: 4px;
border-radius: 50%;
background: var(--gold);
margin-right: 0.55rem;
opacity: 0.7;
}
/* ── Launch ladder banner ─────────────────────────────────────────────
Sits inside the pricing section, no card chrome, just the track +
header + meta. The pricing section is widened to 1400px when the
ladder is enabled (.panel-pricing has-banner override below) so
the banner gets room to breathe without needing CSS escape tricks. */
.launch-banner {
position: relative;
width: 100%;
margin: 0.25rem 0 1.75rem;
padding: 1rem 0 1.25rem;
background: transparent;
border: none;
box-shadow: none;
border-radius: 0;
}
.launch-banner-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
margin-bottom: 0.95rem;
padding: 0 0.5rem;
box-sizing: border-box;
/* Align with the track + meta caps so LAUNCH DEAL / STEP X OF 4 sit
above the rail edges, not at the viewport extremes. */
max-width: min(100%, 1000px);
margin-left: auto;
margin-right: auto;
}
.launch-banner-tag {
display: inline-flex;
align-items: center;
gap: 0.45rem;
font-family: var(--font-mono);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--green);
}
.launch-banner-final .launch-banner-tag { color: var(--gold-light); }
.launch-banner-rocket {
font-size: 0.95rem;
display: inline-block;
/* Subtle drift so it reads as live/in-flight rather than static decoration */
animation: launchRocketDrift 3.5s ease-in-out infinite;
}
@keyframes launchRocketDrift {
0%, 100% { transform: translateY(0) rotate(-8deg); }
50% { transform: translateY(-2px) rotate(2deg); }
}
.launch-banner-step {
font-family: var(--font-mono);
font-size: 0.78rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted);
}
/* ── Tier track — discrete-node progress visual ──────────────────────
The rail is a continuous line; ".launch-track-rail-fill" is a
gradient overlay that grows from left to the current node's position
via the --fill CSS variable. The fill ends exactly at the current
node (intra-step progress is shown as text below). On first paint the
fill animates from 0 to the target width, and a soft shimmer travels
along it on a loop to give the bar a sense of life. */
.launch-track {
position: relative;
/* Cap the launch ladder tightly — 4 nodes spread across a wide
viewport stop reading as a progression. ~1000px keeps the rail
dense enough that the eye traces left → right naturally. */
max-width: min(100%, 1000px);
margin: 0.85rem auto 1.1rem;
padding: 14px var(--track-padding-h) 56px;
box-sizing: border-box;
}
.launch-track {
/* Centralized sizing — change one var, the rail/fill/nodes all
reposition consistently. Markers (the milestone balls) are BIG;
the moving indicator (progress) is a small bright ball that
travels between them with a comet trail behind it. */
--track-node-size: 22px;
--track-indicator-size: 6px;
--track-rail-height: 5px;
--track-padding-h: 6px;
--track-rail-offset: calc(var(--track-padding-h) + var(--track-node-size) / 2);
}
.launch-track-rail,
.launch-track-rail-fill {
position: absolute;
top: calc(14px + (var(--track-node-size) - var(--track-rail-height)) / 2);
height: var(--track-rail-height);
border-radius: 999px;
pointer-events: none;
}
.launch-track-rail {
left: var(--track-rail-offset);
right: var(--track-rail-offset);
background: rgba(255, 255, 255, 0.05);
}
.launch-track-rail-fill {
left: var(--track-rail-offset);
width: 0; /* animates to target on entrance */
/* Comet-trail gradient — dim at the trailing edge, bright at the
leading edge so the rail reads as "trail behind the moving
indicator" rather than "filled bar." */
background: linear-gradient(90deg,
rgba(255, 140, 60, 0.35) 0%,
rgba(255, 168, 80, 0.6) 50%,
rgba(255, 213, 79, 0.95) 90%,
#fff8e6 100%
);
box-shadow:
0 0 12px rgba(255, 168, 80, 0.55),
0 0 24px rgba(255, 140, 60, 0.25);
overflow: hidden;
animation: launchTrackGrow 1.1s 0.35s cubic-bezier(.4, 0, .2, 1) forwards;
transition: width 0.6s cubic-bezier(.4, 0, .2, 1);
}
@keyframes launchTrackGrow {
to { width: calc((100% - var(--track-rail-offset) * 2) * (var(--fill, 0%) / 100%)); }
}
/* Glowing leading-edge tip — anchored at the right end of the fill so
intra-step progress is visible even at 1-2% fill. Lives outside the
fill (sibling, not a pseudo) so overflow:hidden doesn't clip it.
Numeric badge above the tip surfaces the exact count for unambiguous
progress reading. */
.launch-track-tip {
position: absolute;
/* Vertically centered on the rail — matches rail's `top` calc */
top: calc(14px + var(--track-node-size) / 2);
left: calc(var(--track-rail-offset) + (100% - var(--track-rail-offset) * 2) * (var(--fill, 0%) / 100%));
width: 0; height: 0;
pointer-events: none;
transition: left 0.6s cubic-bezier(.4, 0, .2, 1);
z-index: 3; /* Above rail, fill, AND nodes — the tip should always read */
}
.launch-track-tip::before {
/* Soft outer halo — proportional to the small indicator core, gives
the moving dot a comet-head feel without overshadowing the big
milestone markers. */
content: '';
position: absolute;
width: calc(var(--track-indicator-size) * 2.2);
height: calc(var(--track-indicator-size) * 2.2);
margin-top: calc(var(--track-indicator-size) * -1.1);
margin-left: calc(var(--track-indicator-size) * -1.1);
border-radius: 50%;
background: radial-gradient(circle,
rgba(255, 248, 230, 0.65) 0%,
rgba(255, 213, 79, 0.45) 30%,
rgba(255, 140, 60, 0.18) 55%,
transparent 80%
);
filter: blur(2px);
animation: launchTrackTipHalo 1.6s ease-in-out infinite;
}
.launch-track-tip::after {
/* The moving progress indicator — small bright ball travelling along
the rail with the comet trail (rail fill) behind it. Smaller than
the big milestone markers (22px) so the visual story reads as:
"big balls = milestones, small ball = progress crawling along". */
content: '';
position: absolute;
width: var(--track-indicator-size);
height: var(--track-indicator-size);
margin-top: calc(var(--track-indicator-size) / -2);
margin-left: calc(var(--track-indicator-size) / -2);
border-radius: 50%;
background: radial-gradient(circle, #fff8e6 0%, #ffd54f 60%, var(--gold) 100%);
box-shadow:
0 0 10px rgba(255, 248, 230, 1),
0 0 18px rgba(255, 213, 79, 0.85),
0 0 32px rgba(255, 140, 60, 0.45);
animation: launchTrackTipCore 1.6s ease-in-out infinite;
}
@keyframes launchTrackTipHalo {
0%, 100% { transform: scale(1); opacity: 0.85; }
50% { transform: scale(1.3); opacity: 1; }
}
@keyframes launchTrackTipCore {
0%, 100% { transform: scale(1); box-shadow: 0 0 10px rgba(255, 248, 230, 1), 0 0 18px rgba(255, 213, 79, 0.85), 0 0 32px rgba(255, 140, 60, 0.45); }
50% { transform: scale(1.18); box-shadow: 0 0 14px rgba(255, 248, 230, 1), 0 0 24px rgba(255, 213, 79, 1), 0 0 42px rgba(255, 140, 60, 0.65); }
}
/* Numeric badge floating above the tip — "18 / 250" so the visitor
reads exactly how far along they are without doing the math. */
.launch-track-tip-badge {
position: absolute;
bottom: 22px; /* clearance above the dot + halo */
left: 0;
transform: translateX(-50%);
white-space: nowrap;
font-family: var(--font-mono);
font-size: 0.78rem;
letter-spacing: 0.08em;
font-variant-numeric: tabular-nums;
font-weight: 700;
color: var(--gold-light);
background: var(--surface-translucent-strong);
border: 1px solid var(--gold-dim);
padding: 3px 8px;
border-radius: 999px;
pointer-events: none;
}
.launch-track-tip-badge::after {
/* Tiny pointer down to the dot */
content: '';
position: absolute;
bottom: -4px;
left: 50%;
transform: translateX(-50%) rotate(45deg);
width: 6px; height: 6px;
background: var(--surface-translucent-strong);
border-right: 1px solid var(--gold-dim);
border-bottom: 1px solid var(--gold-dim);
}
@media (prefers-reduced-motion: reduce) {
.launch-track-tip::before,
.launch-track-tip::after { animation: none; }
}
/* Shimmer — a bright highlight slides across the filled portion every
few seconds. Pseudo-element clipped by parent's overflow:hidden. */
.launch-track-rail-fill::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg,
transparent 0%,
rgba(255, 255, 255, 0.55) 50%,
transparent 100%
);
background-size: 35% 100%;
background-repeat: no-repeat;
background-position: -40% 0;
animation: launchTrackShimmer 3.4s ease-in-out 1.6s infinite;
pointer-events: none;
}
@keyframes launchTrackShimmer {
0% { background-position: -40% 0; opacity: 0; }
10% { opacity: 0.8; }
90% { opacity: 0.8; }
100% { background-position: 140% 0; opacity: 0; }
}
.launch-track-nodes {
position: relative;
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 0;
}
/* Node column is fixed-width to the dot so labels (which can be wider
than the dot, e.g. "FROM LAUNCH") DON'T expand the column and push
the first/last dot away from the rail's start/end. Labels render
absolutely below the dot, centered on it. With this, justify-content:
space-between distributes dot CENTERS exactly at rail-offset (start)
and (100% - rail-offset) (end), matching where the rail begins/ends. */
.launch-track-node {
position: relative;
width: var(--track-node-size);
flex: 0 0 var(--track-node-size);
height: var(--track-node-size);
}
.launch-track-dot {
width: var(--track-node-size);
height: var(--track-node-size);
border-radius: 50%;
background: var(--abyss);
box-sizing: border-box;
border: 2px solid var(--muted2);
transition: border-color 0.3s, background 0.3s, box-shadow 0.3s, transform 0.3s;
display: block;
z-index: 2; /* above rail */
}
.launch-track-label {
position: absolute;
top: calc(var(--track-node-size) + 6px);
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
font-family: var(--font-display);
font-size: 1rem;
font-weight: 700;
letter-spacing: 0.04em;
color: var(--muted2);
font-variant-numeric: tabular-nums;
transition: color 0.3s;
}
.launch-track-sublabel {
position: absolute;
top: calc(var(--track-node-size) + 6px + 1.15rem);
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
font-family: var(--font-mono);
font-size: 0.76rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted2);
font-variant-numeric: tabular-nums;
transition: color 0.3s;
}
.launch-track-node[data-state="past"] .launch-track-sublabel,
.launch-track-node[data-state="current"] .launch-track-sublabel {
color: var(--muted);
}
.launch-track-node[data-state="current"] .launch-track-sublabel {
color: rgba(255, 213, 79, 0.7);
}
/* Achieved milestones (past + current) — gold filled, calm. The small
moving indicator is the ONLY brightly-glowing/animating element on
the bar so the eye tracks IT, not the marker. */
.launch-track-node[data-state="past"] .launch-track-dot,
.launch-track-node[data-state="current"] .launch-track-dot {
border-color: var(--gold-light);
background: var(--gold);
box-shadow:
0 0 12px rgba(255, 213, 79, 0.85),
0 0 24px rgba(255, 168, 80, 0.45);
}
.launch-track-node[data-state="past"] .launch-track-label,
.launch-track-node[data-state="current"] .launch-track-label {
color: var(--gold-light);
}
.launch-track-node[data-state="current"] .launch-track-label {
font-weight: 700;
}
/* Future nodes — not yet reached. Same size as the lit milestones so
they read as "targets to reach" rather than secondary tier. Hollow
+ dim border conveys "not yet" without shrinking the node. */
.launch-track-node[data-state="future"] .launch-track-dot {
border-color: var(--border2);
background: var(--abyss);
box-shadow: none;
}
@media (prefers-reduced-motion: reduce) {
.launch-track-rail-fill {
animation: none;
width: calc((100% - var(--track-rail-offset) * 2) * (var(--fill, 0%) / 100%));
}
.launch-track-rail-fill::after,
.launch-track-node[data-state="current"] .launch-track-dot,
.launch-track-node[data-state="current"]::before {
animation: none !important;
}
}
@media (max-width: 760px) {
.launch-track {
--track-node-size: 18px;
--track-indicator-size: 8px;
--track-rail-height: 4px;
--track-padding-h: 4px;
}
.launch-track-label { font-size: 0.85rem; }
.launch-track-sublabel { font-size: 0.74rem; }
}
@media (max-width: 480px) {
.launch-track-node:nth-child(even) .launch-track-label { display: none; }
}
.launch-banner-meta {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 0.5rem 1rem;
padding: 0 0.5rem;
box-sizing: border-box;
/* Align edges with the track cap so "$7.00/mo" and "jumps to $8/mo"
don't get marooned at opposite ends of an ultrawide viewport. */
max-width: min(100%, 1000px);
margin-left: auto;
margin-right: auto;
font-size: 0.85rem;
color: var(--muted);
line-height: 1.4;
}
.launch-banner-current strong {
color: var(--text);
font-size: 1.05rem;
font-weight: 700;
}
.launch-banner-yr {
margin-left: 0.4rem;
font-family: var(--font-mono);
font-size: 0.72rem;
color: var(--muted2);
letter-spacing: 0.04em;
}
.launch-banner-next strong {
color: var(--gold-light);
font-weight: 600;
}
.launch-banner-progress-text {
font-family: var(--font-mono);
font-size: 0.72rem;
color: var(--muted2);
margin-left: 0.3rem;
letter-spacing: 0.04em;
font-variant-numeric: tabular-nums;
}
@media (max-width: 760px) {
.launch-banner { padding: 0.85rem 1rem; }
.launch-banner-meta { font-size: 0.8rem; }
.launch-banner-current strong { font-size: 1rem; }
}
.pricing-cards {
/* Flex-wrap with centering so the layout adapts to however many tiers
are configured (admins can add/remove). One card centers; two sit
side-by-side; three fill the row. Each card has a flex-basis so
they sit at a sensible width without stretching alone. */
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: stretch;
gap: 1.25rem;
margin-bottom: 1.5rem;
}
.pricing-card {
/* flex-basis 280px + max 360px lets each card sit between sensible
widths regardless of how many siblings it has. */
flex: 1 1 280px;
max-width: 360px;
background: var(--abyss);
border: 1px solid var(--border);
border-radius: 14px;
padding: 1.6rem 1.65rem 1.75rem;
display: flex;
flex-direction: column;
position: relative;
transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.pricing-card:hover {
border-color: var(--gold-dim);
transform: translateY(-3px);
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}
/* Featured: gold left rail + glow, NOT scale (avoids the layout jiggle) */
.pricing-card.featured {
background: linear-gradient(180deg, var(--depth) 0%, rgba(201, 168, 76, 0.04) 100%);
border: 1px solid var(--gold-dim);
border-left: 3px solid var(--gold);
padding-left: calc(1.65rem - 2px);
box-shadow: 0 0 50px rgba(201, 168, 76, 0.1), 0 16px 40px rgba(0, 0, 0, 0.4);
}
.pricing-card.featured::before {
content: 'MOST POPULAR';
position: absolute;
top: -10px; left: 1.65rem;
font-family: var(--font-mono);
font-size: 0.74rem;
letter-spacing: 0.16em;
font-weight: 700;
color: var(--void);
background: var(--gold);
padding: 4px 10px;
border-radius: 4px;
box-shadow: 0 4px 12px rgba(201, 168, 76, 0.3);
}
.pricing-tier {
font-family: var(--font-mono);
font-size: 0.76rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--muted2);
margin-bottom: 0.6rem;
}
.pricing-card.featured .pricing-tier { color: var(--gold); }
.pricing-price {
font-family: var(--font-display);
font-size: clamp(1.85rem, 2.6vw, 3rem);
font-weight: 700;
color: var(--gold-light);
line-height: 1;
margin-bottom: 0.4rem;
}
.pricing-price-sub {
font-size: 0.9rem;
color: var(--muted2);
font-family: var(--font-body);
font-weight: 400;
}
.pricing-tagline {
font-family: var(--font-prose);
font-size: 0.9rem;
color: var(--muted);
font-style: italic;
padding-bottom: 0.9rem;
margin-bottom: 1rem;
border-bottom: 1px solid var(--border);
}
.pricing-features {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin-bottom: 1.15rem;
/* Features list grows so the CTA block below it pins to the same Y
across all three cards regardless of how many feature rows each has. */
flex-grow: 1;
}
/* CTA block — wraps trial badge + button + meta (when present), or just
the bare CTA button. The trick that aligns CTAs across cards is
margin-top: auto here, plus .pricing-features { flex-grow: 1 } above. */
.pricing-cta-block {
display: flex;
flex-direction: column;
align-items: stretch;
margin-top: auto;
}
.pricing-cta-block .pricing-trial-badge,
.pricing-cta-block .pricing-trial-meta { text-align: center; }
/* Yearly savings badge — green pill in the top-right of the yearly card,
same visual weight as the "MOST POPULAR" badge on the monthly so the
yearly choice has its own reason to be picked. */
.pricing-savings-badge {
position: absolute;
top: -10px;
right: 1.65rem;
font-family: var(--font-mono);
font-size: 0.74rem;
letter-spacing: 0.16em;
font-weight: 700;
text-transform: uppercase;
color: var(--void);
background: linear-gradient(135deg, var(--green), #8be0a3);
padding: 4px 10px;
border-radius: 4px;
box-shadow: 0 4px 12px rgba(107, 203, 139, 0.3);
}
.pricing-features li {
display: flex;
gap: 0.6rem;
font-size: 0.92rem;
color: var(--muted);
line-height: 1.5;
}
.pricing-check {
flex-shrink: 0;
width: 16px; height: 16px;
margin-top: 2px;
color: var(--gold);
}
.pricing-cta {
display: block;
text-align: center;
font-family: var(--font-body);
font-size: 0.9rem;
font-weight: 600;
padding: 0.85rem 1rem;
border-radius: 8px;
border: 1px solid;
transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.pricing-cta-ghost {
color: var(--muted);
background: transparent;
border-color: var(--border);
}
.pricing-cta-ghost:hover { color: var(--gold); border-color: var(--gold-dim); }
.pricing-cta-gold {
color: var(--void);
background: linear-gradient(135deg, var(--gold), var(--gold-light));
border-color: transparent;
}
.pricing-cta-gold:hover { box-shadow: var(--glow-gold); }
.pricing-cta-trial {
color: var(--green);
background: rgba(107, 203, 139, 0.06);
border-color: rgba(107, 203, 139, 0.4);
}
.pricing-cta-trial:hover {
background: rgba(107, 203, 139, 0.12);
border-color: var(--green);
box-shadow: 0 0 18px rgba(107, 203, 139, 0.2);
}
.pricing-trial-meta {
text-align: center;
font-family: var(--font-mono);
font-size: 0.76rem;
color: var(--muted2);
letter-spacing: 0.08em;
margin-top: 0.5rem;
}
.pricing-trial-badge {
display: inline-block;
margin-bottom: 0.6rem;
font-family: var(--font-mono);
font-size: 0.74rem;
letter-spacing: 0.14em;
text-transform: uppercase;
font-weight: 700;
color: var(--green);
background: rgba(107, 203, 139, 0.08);
border: 1px solid rgba(107, 203, 139, 0.3);
padding: 3px 9px;
border-radius: 999px;
}
/* ── Pricing FAQ ────────────────────────────────────────────────────
Lives inside .panel-pricing on the home page. Scoped class names
(.pricing-faq-*) so they don't collide with the home page's own
.faq-item styling in the FAQ panel. */
.pricing-faq {
margin-top: 3rem;
max-width: 960px;
margin-left: auto;
margin-right: auto;
padding: 0 1rem;
}
.pricing-faq-head {
text-align: center;
margin-bottom: 1.75rem;
}
.pricing-faq-head .eyebrow {
display: inline-block;
font-family: var(--font-mono);
font-size: 0.78rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 0.5rem;
}
.pricing-faq-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.9rem;
}
.pricing-faq-item {
border: 1px solid var(--border);
border-radius: 10px;
background: rgba(13, 15, 26, 0.5);
transition: border-color 0.18s;
overflow: hidden;
}
.pricing-faq-item:hover { border-color: var(--gold-dim); }
.pricing-faq-item[open] {
border-color: var(--gold-dim);
background: rgba(26, 31, 53, 0.55);
}
.pricing-faq-item summary {
cursor: pointer;
list-style: none;
padding: 0.95rem 1.15rem;
font-family: var(--font-display);
font-size: 0.98rem;
letter-spacing: 0.03em;
color: var(--text);
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.85rem;
}
.pricing-faq-item summary::-webkit-details-marker { display: none; }
.pricing-faq-item summary::after {
content: "+";
font-family: var(--font-mono);
font-size: 1.1rem;
color: var(--gold);
flex-shrink: 0;
transition: transform 0.18s;
}
.pricing-faq-item[open] summary::after {
content: "×";
}
.pricing-faq-body {
padding: 0 1.15rem 1.05rem;
color: var(--muted);
font-size: 0.92rem;
line-height: 1.6;
}
.pricing-faq-body a { color: var(--gold-light); }
@media (max-width: 760px) {
.pricing-faq-grid { grid-template-columns: 1fr; }
}
/* Developer banner — full-width below the 3 cards */
.dev-banner {
display: grid;
grid-template-columns: 1fr auto;
gap: 1.5rem;
align-items: center;
background:
linear-gradient(135deg, rgba(78, 205, 196, 0.04), rgba(78, 205, 196, 0.01) 70%),
var(--abyss);
border: 1px solid var(--cyan-dim);
border-radius: 14px;
padding: 1.4rem 1.6rem;
/* Soft cap so the banner doesn't stretch edge-to-edge with empty
middle on ultrawide displays — text/CTA pair reads better at a
contained width. */
max-width: min(100%, 1200px);
margin-left: auto;
margin-right: auto;
}
.dev-banner-tag {
font-family: var(--font-mono);
font-size: 0.76rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--cyan);
margin-bottom: 0.4rem;
}
.dev-banner-title {
font-family: var(--font-display);
font-size: 1.25rem;
font-weight: 700;
color: var(--text);
margin-bottom: 0.4rem;
}
.dev-banner-desc {
font-family: var(--font-prose);
color: var(--muted);
max-width: 640px;
line-height: 1.55;
}
/* ── FAQ ──────────────────────────────────────────────────────────────── */
.faq-section { padding-top: 3rem; padding-bottom: 3.5rem; }
/* Stage holds the section content over a soft ambient gold radial glow,
matching the cinematic vocabulary of the Home/Pricing tabs. The glow
is pseudo-decorative (aria-hidden) and pointer-events disabled. */
.faq-stage {
position: relative;
max-width: 760px;
margin: 0 auto;
padding: 0 0.5rem;
}
/* Glow lives on the panel itself, not a positioned child — avoids any
stacking-context fights and gives the gradient a natural full-width
canvas (panel is fully fluid, full panel height). Anchored above the
FAQ content area so the brightest gold sits behind the title and
fades down past the items into pure dark before the help card. */
.faq-stage-glow { display: none; }
.faq-stage > *:not(.faq-stage-glow) { position: relative; z-index: 1; }
.faq-header { text-align: center; margin-bottom: 1.5rem; }
.faq-subtitle {
margin: 0.5rem auto 0;
max-width: 520px;
font-family: var(--font-prose);
font-size: 0.95rem;
color: var(--muted);
}
/* ── Search ───────────────────────────────────────────────────────────── */
.faq-search {
position: relative;
display: flex;
align-items: center;
max-width: 520px;
margin: 0 auto 1.5rem;
background: var(--surface-translucent);
border: 1px solid var(--border);
border-radius: 999px;
padding: 0.55rem 1.1rem 0.55rem 2.4rem;
transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.faq-search:focus-within {
border-color: var(--gold-dim);
background: var(--surface-translucent-strong);
box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.10), 0 0 24px rgba(201, 168, 76, 0.18);
}
.faq-search-icon {
position: absolute;
left: 0.9rem;
top: 50%;
transform: translateY(-50%);
width: 16px; height: 16px;
color: var(--muted2);
transition: color 0.2s;
}
.faq-search:focus-within .faq-search-icon { color: var(--gold); }
.faq-search-input {
flex: 1;
min-width: 0;
background: transparent;
border: none;
outline: none;
font-family: var(--font-prose);
font-size: 0.95rem;
color: var(--text);
}
.faq-search-input::placeholder { color: var(--muted2); }
.faq-search-input::-webkit-search-cancel-button {
-webkit-appearance: none;
appearance: none;
width: 14px; height: 14px;
background: var(--muted2);
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
cursor: pointer;
}
.faq-search-count {
flex-shrink: 0;
margin-left: 0.6rem;
padding-left: 0.6rem;
border-left: 1px solid var(--border);
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted2);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
/* ── Single-column list ───────────────────────────────────────────────── */
.faq-list {
display: flex;
flex-direction: column;
gap: 0.55rem;
}
.faq-item {
position: relative;
background: var(--surface-translucent);
border: 1px solid var(--border);
border-radius: 10px;
overflow: hidden;
transition: border-color 0.25s, background 0.25s, transform 0.25s;
}
.faq-item::before {
/* Gold left-border accent, hidden until item is open */
content: '';
position: absolute;
left: 0; top: 10px; bottom: 10px;
width: 3px;
border-radius: 0 2px 2px 0;
background: linear-gradient(180deg, var(--gold-light), var(--gold));
opacity: 0;
transition: opacity 0.25s;
pointer-events: none;
}
.faq-item:hover { border-color: var(--gold-dim); background: var(--surface-translucent); }
.faq-item[open] {
border-color: var(--gold-dim);
background: var(--surface-translucent-deep);
box-shadow: 0 0 0 1px rgba(201, 168, 76, 0.12), 0 8px 24px rgba(0, 0, 0, 0.35);
}
.faq-item[open]::before { opacity: 1; }
.faq-item summary {
list-style: none;
cursor: pointer;
padding: 1rem 1.2rem 1rem 1.35rem;
font-family: var(--font-display);
font-size: 0.98rem;
font-weight: 600;
letter-spacing: 0.01em;
color: var(--text);
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-q-text { flex: 1; }
.faq-item[open] .faq-q-text { color: var(--gold-light); }
.faq-toggle {
flex-shrink: 0;
width: 18px; height: 18px;
color: var(--gold-dim);
transition: transform 0.3s cubic-bezier(.4, 0, .2, 1), color 0.2s;
}
.faq-item:hover .faq-toggle { color: var(--gold); }
.faq-item[open] .faq-toggle { transform: rotate(45deg); color: var(--gold); }
.faq-answer {
padding: 0 1.2rem 1.15rem 1.35rem;
font-family: var(--font-prose);
font-size: 0.95rem;
color: var(--muted);
line-height: 1.65;
}
.faq-answer p { margin-bottom: 0.6rem; }
.faq-answer p:last-child { margin-bottom: 0; }
.faq-answer a { color: var(--gold); text-decoration: underline; text-decoration-color: var(--gold-dim); }
.faq-answer a:hover { text-decoration-color: var(--gold); }
/* ── No-match empty state ─────────────────────────────────────────────── */
.faq-empty {
text-align: center;
padding: 2.5rem 1rem 2rem;
color: var(--muted2);
font-family: var(--font-prose);
font-size: 0.95rem;
}
.faq-empty-glyph {
font-family: var(--font-display);
font-size: 2.4rem;
color: var(--gold-dim);
margin-bottom: 0.5rem;
}
.faq-empty span { color: var(--gold-light); font-family: var(--font-mono); }
/* ── "Still have questions?" help card ───────────────────────────────── */
.faq-help {
margin-top: 2rem;
display: flex;
align-items: center;
gap: 1rem;
padding: 1.1rem 1.4rem;
background:
linear-gradient(135deg, rgba(201, 168, 76, 0.08), rgba(201, 168, 76, 0.02)),
var(--surface-translucent);
border: 1px solid var(--gold-dim);
border-radius: 12px;
box-shadow: 0 0 24px rgba(201, 168, 76, 0.08);
}
.faq-help-icon {
flex-shrink: 0;
font-size: 1.6rem;
color: var(--gold-light);
text-shadow: 0 0 14px rgba(255, 213, 79, 0.55);
}
.faq-help-text {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.faq-help-text strong {
font-family: var(--font-display);
font-size: 1rem;
color: var(--text);
font-weight: 700;
}
.faq-help-text span {
font-family: var(--font-prose);
font-size: 0.88rem;
color: var(--muted);
}
.faq-help-cta {
flex-shrink: 0;
padding: 0.6rem 1.25rem;
background: linear-gradient(180deg, var(--gold-light), var(--gold));
color: var(--abyss);
border-radius: 999px;
font-family: var(--font-mono);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
text-decoration: none;
transition: transform 0.2s, box-shadow 0.2s;
}
.faq-help-cta:hover {
transform: translateY(-1px);
box-shadow: 0 0 18px rgba(255, 213, 79, 0.5);
}
/* ── Marketplace Highlights (homepage Plugins tab) ─────────────────────
Public discovery surface for community-developed plugins. Sits below
the built-in plugin shelf in the Plugins tab. Card click → public
detail page (full SEO surface), not a direct install — install CTA
lives on the detail page so we keep an indexable landing per plugin. */
.mp-highlights {
margin: 2.5rem auto 0;
max-width: 100%;
padding: 0;
}
.mp-highlights-header {
text-align: center;
margin-bottom: 1.25rem;
}
.mp-highlights-header .eyebrow {
display: inline-block;
margin-bottom: 0.4rem;
}
.mp-highlights-header .section-title {
font-size: clamp(1.25rem, 2.4vw, 2rem);
}
.mp-highlights-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1px;
background: var(--border);
border: 1px solid var(--border);
border-radius: 12px;
overflow: hidden;
list-style: none;
margin: 0;
padding: 0;
}
.mp-card-li { margin: 0; padding: 0; }
.mp-card {
display: flex;
gap: 0.85rem;
padding: 1rem 1.1rem;
background: var(--abyss);
text-decoration: none;
height: 100%;
transition: background 0.18s, transform 0.2s;
}
.mp-card:hover {
background: var(--depth);
transform: translateY(-1px);
}
.mp-card-icon {
flex-shrink: 0;
width: 56px;
height: 56px;
border-radius: 10px;
background: var(--depth);
border: 1px solid var(--border);
object-fit: cover;
display: block;
}
.mp-card-avatar {
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-weight: 700;
font-size: 1.15rem;
color: var(--void);
background: linear-gradient(135deg,
hsl(var(--avatar-h1, 200), 60%, 55%),
hsl(var(--avatar-h2, 280), 60%, 50%));
border: none;
}
.mp-card-body {
display: flex;
flex-direction: column;
gap: 0.2rem;
min-width: 0;
flex: 1;
}
.mp-card-name {
font-family: var(--font-display);
font-size: 0.95rem;
font-weight: 700;
color: var(--text);
letter-spacing: 0.02em;
transition: color 0.18s;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mp-card:hover .mp-card-name { color: var(--gold-light); }
.mp-card-verified {
display: inline-block;
margin-left: 0.25em;
color: var(--cyan);
font-weight: 700;
font-size: 0.85em;
}
.mp-card-author {
font-family: var(--font-mono);
font-size: 0.7rem;
color: var(--muted2);
letter-spacing: 0.04em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mp-card-summary {
font-size: 0.82rem;
color: var(--muted);
line-height: 1.45;
margin: 0.25rem 0 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
line-clamp: 2;
overflow: hidden;
}
.mp-card-stats {
display: flex;
gap: 0.85rem;
margin-top: auto;
padding-top: 0.45rem;
font-family: var(--font-mono);
font-size: 0.7rem;
color: var(--muted2);
letter-spacing: 0.04em;
}
.mp-highlights-more {
display: block;
margin: 1rem auto 0;
padding: 0.55rem 1.4rem;
background: transparent;
border: 1px solid var(--border);
border-radius: 8px;
font-family: var(--font-mono);
font-size: 0.78rem;
letter-spacing: 0.08em;
color: var(--muted);
cursor: pointer;
transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.mp-highlights-more:hover {
background: var(--cyan-bg);
color: var(--cyan);
border-color: var(--cyan-dim);
}
.mp-highlights-more[hidden] { display: none; }
@media (max-width: 760px) {
.mp-highlights-grid { grid-template-columns: 1fr; }
}
/* ── Footer ────────────────────────────────────────────────────────────── */
.landing-footer {
border-top: 1px solid var(--border);
background: var(--abyss);
/* Compact — the page is viewport-locked and we want the active panel
to have as much room as possible. ~52px tall on desktop. Horizontal
padding matches section gutters so the brand/links line up with
hero/section edges across all viewport widths. */
padding: 0.85rem var(--gutter-fluid);
display: flex;
justify-content: space-between;
align-items: center;
gap: 1.5rem;
flex-wrap: wrap;
flex-shrink: 0;
/* Lift above the fixed-viewport .ambient (z-index: 0), otherwise the
ambient paints over the footer and visually hides it. */
position: relative;
z-index: 2;
}
.footer-brand {
font-family: var(--font-display);
font-size: 0.9rem;
font-weight: 700;
color: var(--gold);
letter-spacing: 0.1em;
}
.footer-links { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.footer-links a {
font-family: var(--font-mono);
font-size: 0.78rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--muted2);
transition: color 0.2s;
}
.footer-links a:hover { color: var(--gold); }
.footer-copy {
font-family: var(--font-mono);
font-size: 0.78rem;
color: var(--muted2);
}
.footer-copy a { color: var(--gold-dim); }
.footer-copy a:hover { color: var(--gold); }
/* ── Cookie banner (kept) ──────────────────────────────────────────────── */
.cookie-banner {
position: fixed;
bottom: 16px; left: 16px; right: 16px;
z-index: 200;
background: var(--surface-translucent-strong);
border: 1px solid var(--gold-dim);
border-radius: 10px;
padding: 14px 22px;
padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
display: none;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
font-size: 0.85rem;
color: var(--muted);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
backdrop-filter: blur(12px);
}
.cookie-banner a { color: var(--gold); text-decoration: underline; }
.cookie-buttons { display: flex; gap: 8px; }
.cookie-btn {
padding: 8px 16px;
border-radius: 6px;
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.06em;
text-transform: uppercase;
transition: background 0.18s, border-color 0.18s, color 0.18s;
}
.cookie-btn-decline {
border: 1px solid var(--border);
background: transparent;
color: var(--muted);
}
.cookie-btn-decline:hover { border-color: var(--gold-dim); color: var(--text); }
.cookie-btn-accept {
border: 1px solid var(--gold-dim);
background: var(--gold-bg);
color: var(--gold-light);
}
.cookie-btn-accept:hover { background: rgba(201, 168, 76, 0.14); border-color: var(--gold); }
/* ── Reveal animation (only on tiles, not headings) ───────────────────── */
.reveal { opacity: 1; transform: none; }
.js-loaded .reveal {
opacity: 0;
transform: translateY(16px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.js-loaded .reveal.visible {
opacity: 1;
transform: none;
}
.reveal-delay-1 { transition-delay: 0.06s; }
.reveal-delay-2 { transition-delay: 0.12s; }
.reveal-delay-3 { transition-delay: 0.18s; }
/* Below-fold render skip — only the panels that exist after the
tab restructure (audience and how-section were removed). */
.shelf-section,
.pricing-section,
.faq-section {
content-visibility: auto;
contain-intrinsic-size: 1px 800px;
}
/* Sr-only for skip link */
.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;
}
.sr-only:focus {
position: fixed; top: 0; left: 0; width: auto; height: auto;
padding: 12px 20px; margin: 0; overflow: visible; clip: auto; white-space: normal;
background: var(--gold); color: var(--void);
font-family: var(--font-mono); font-size: 0.8rem; font-weight: 600;
z-index: 1000; border-radius: 0 0 6px 0;
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.js-loaded .reveal { opacity: 1; transform: none; }
}
/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
.hero-grid { grid-template-columns: 1fr; gap: 2.25rem; }
/* Preview centers but scales fluidly via its own clamp-based padding
and sidebar — no hard pixel cap, so the transition from 2-col to
stacked feels continuous instead of stepped. */
.hero-preview { margin: 0 auto; }
/* Plugin shelf stays 5 cols × 2 rows down to 760px — 10 plugins only
fill cleanly at 5×2, 2×5, or 1×10. Anything else leaves orphan
cells in the bordered grid which read as "missing content." */
/* pricing-cards uses flex-wrap with center; cards naturally stack
and center at narrow widths. No grid override needed. */
}
@media (max-width: 760px) {
.landing-nav { padding: 0 1.25rem; }
.nav-hamburger { display: flex; }
.nav-links {
display: none;
position: absolute;
top: 64px; left: 0; right: 0;
background: var(--surface-translucent-strong);
backdrop-filter: blur(16px);
flex-direction: column;
padding: 1.25rem 1.5rem;
gap: 1rem;
border-bottom: 1px solid var(--border);
}
.nav-links.mobile-open { display: flex; }
/* Discord moves into the hamburger menu on mobile. The icon button
in nav-right hides; the text link inside .nav-links reveals; the
desktop divider has no meaning when the row stacks vertically. */
.nav-discord { display: none; }
.nav-divider { display: none; }
.nav-mobile-only { display: list-item; }
.hero { padding: 5.5rem 1.25rem 2.5rem; }
.section { padding: 2.5rem 1.25rem; }
.stat-strip-inner { grid-template-columns: 1fr; }
.stat-cell { border-right: none; border-bottom: 1px solid var(--border); padding: 1.1rem; }
.stat-cell:last-child { border-bottom: none; }
.plugin-shelf { grid-template-columns: 1fr 1fr; }
.shelf-marketplace-link {
position: static;
margin-top: 0.75rem;
justify-self: center;
}
.shelf-header { display: flex; flex-direction: column; align-items: center; }
.faq-search {
flex-wrap: wrap;
border-radius: 14px;
padding: 0.55rem 1rem 0.55rem 2.4rem;
}
.faq-search-count {
margin-left: 0;
padding-left: 0;
border-left: none;
width: 100%;
text-align: center;
margin-top: 0.4rem;
padding-top: 0.4rem;
border-top: 1px solid var(--border);
}
.faq-help {
flex-direction: column;
text-align: center;
gap: 0.85rem;
padding: 1.25rem 1rem;
}
.faq-help-text { align-items: center; }
.dev-banner { grid-template-columns: 1fr; gap: 1rem; padding: 1.25rem; }
.landing-footer { padding: 0.7rem 1.25rem; gap: 0.75rem; }
.landing-footer .footer-links { flex: 1 1 auto; justify-content: center; gap: 0.85rem; }
.landing-footer .footer-copy { font-size: 0.76rem; }
.preview-body { grid-template-columns: 1fr; min-height: auto; }
.preview-side { display: none; }
.hero-trust { grid-template-columns: 1fr 1fr; gap: 0.55rem 0.85rem; padding: 0.7rem 0.9rem; }
.hero-trust li { white-space: normal; }
}
@media (max-width: 480px) {
/* .hero-title font-size handled by clamp() — no override needed.
Lower bound of 2.25rem is already mobile-appropriate. */
.plugin-shelf { grid-template-columns: 1fr; }
.preview-kpis { grid-template-columns: 1fr 1fr; }
.preview-compare-grid { grid-template-columns: 1fr 1fr; }
}
/* ────────────────────────────────────────────────────────────────────────
Tab/panel architecture — each section is its own viewport-fitting panel.
Only the active panel is visible at a time. JS routes via URL hash.
No-JS fallback: html.tabs-ready is set by JS; without it, all panels
stay visible (legacy scrolling page) so search engines still see content
and the page works without scripts.
────────────────────────────────────────────────────────────────────── */
.tab-host {
position: relative;
padding-top: 64px; /* clear the fixed nav */
/* Flex 1 of body's flex-column — fills the space between the fixed
nav and the footer. No min-height: 100vh; the parent flex sizes us. */
flex: 1 1 auto;
display: flex;
flex-direction: column;
}
.panel {
display: none;
width: 100%;
margin: 0 auto;
}
html.tabs-ready .panel.active {
/* Active panel fills the tab-host (flex: 1) and uses justify-content:
center so its children (hero + stat-strip on Home, header + grid on
others) sit centered as a block in the available space. Empty
vertical space distributes equally top and bottom — looks
intentional, not broken. */
display: flex;
flex-direction: column;
justify-content: center;
flex: 1 1 auto;
animation: panelIn 0.42s cubic-bezier(.22,.61,.36,1);
}
/* When a panel is active, its scroll-reveal children show immediately
(panelIn already animates the panel itself; tile-level fades would
double-animate and look stuttery). */
html.tabs-ready .panel.active .reveal {
opacity: 1;
transform: none;
transition: none;
}
/* No-JS / pre-hydration fallback: every panel renders */
html:not(.tabs-ready) .panel { display: block; }
@keyframes panelIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: none; }
}
/* The Home panel doesn't need extra padding (hero already has its own).
Other panels get an even top margin so content doesn't crash into nav. */
.panel-home { padding: 0; }
.panel-plugins,
.panel-pricing,
.panel-faq {
padding: 0.5rem 0 2rem;
}
.panel-faq.active { position: relative; }
.panel-faq.active > .section,
.panel-faq.active > .faq-nebula + * { position: relative; z-index: 1; }
/* ── FAQ drifting nebula ────────────────────────────────────────────────
Three large soft gold blobs orbiting slowly across the viewport at
different speeds and paths, blurred so they read as atmospheric mist
rather than discrete shapes. The combined motion creates a constantly-
evolving lighting field. Each blob is bigger than the viewport, so
they're never fully visible at once — only the soft edge of each one
bleeds into frame, which is what makes it feel organic. */
.faq-nebula {
position: fixed;
inset: 0;
overflow: hidden;
pointer-events: none;
z-index: 0;
opacity: 0;
transition: opacity 0.8s ease;
filter: blur(40px);
}
html.tabs-ready .panel-faq.active > .faq-nebula { opacity: 1; }
.nebula-blob {
position: absolute;
border-radius: 50%;
will-change: transform;
}
.nebula-blob-1 {
width: 60vw; height: 60vw;
background: radial-gradient(circle,
rgba(255, 198, 110, 0.32) 0%,
rgba(201, 168, 76, 0.12) 35%,
transparent 70%);
top: -20vw; left: -15vw;
animation: nebulaDrift1 38s ease-in-out infinite;
}
.nebula-blob-2 {
width: 50vw; height: 50vw;
background: radial-gradient(circle,
rgba(201, 168, 76, 0.22) 0%,
rgba(150, 100, 40, 0.08) 40%,
transparent 75%);
top: 10vw; right: -20vw;
animation: nebulaDrift2 46s ease-in-out infinite;
}
.nebula-blob-3 {
width: 55vw; height: 55vw;
background: radial-gradient(circle,
rgba(255, 168, 80, 0.18) 0%,
rgba(96, 156, 210, 0.05) 45%,
transparent 75%);
bottom: -25vw; left: 20vw;
animation: nebulaDrift3 52s ease-in-out infinite;
}
@keyframes nebulaDrift1 {
0%, 100% { transform: translate(0, 0) scale(1); }
33% { transform: translate(15vw, 8vh) scale(1.15); }
66% { transform: translate(-8vw, 18vh) scale(0.9); }
}
@keyframes nebulaDrift2 {
0%, 100% { transform: translate(0, 0) scale(1); }
40% { transform: translate(-18vw, 12vh) scale(0.85); }
70% { transform: translate(-10vw, -8vh) scale(1.2); }
}
@keyframes nebulaDrift3 {
0%, 100% { transform: translate(0, 0) scale(1); }
30% { transform: translate(20vw, -10vh) scale(1.1); }
65% { transform: translate(-12vw, -20vh) scale(0.95); }
}
@media (prefers-reduced-motion: reduce) {
.nebula-blob { animation: none; }
}
/* Nav external link (Developers → /dev) styled distinctly so users know
they're leaving the tab interface */
.nav-links a.nav-external {
position: relative;
}
.nav-links a.nav-external::before {
content: '';
display: inline-block;
width: 1px; height: 14px;
background: var(--border2);
margin-right: 0.85rem;
vertical-align: middle;
}
/* ────────────────────────────────────────────────────────────────────────
Banner unfurl — fires when intro completes (html.intro-done).
1) Gold line draws across nav width from center outward
2) Brand + each nav item fade in left-to-right with stagger
3) Gold line fades into the muted border-color
────────────────────────────────────────────────────────────────────── */
html.intro-active .nav-brand,
html.intro-active .nav-links > li,
html.intro-active .nav-right > * { opacity: 0; }
html.intro-done .nav-brand { animation: navItemIn 0.5s 0.45s both; }
html.intro-done .nav-links > li:nth-child(1) { animation: navItemIn 0.5s 0.55s both; }
html.intro-done .nav-links > li:nth-child(2) { animation: navItemIn 0.5s 0.62s both; }
html.intro-done .nav-links > li:nth-child(3) { animation: navItemIn 0.5s 0.69s both; }
html.intro-done .nav-links > li:nth-child(4) { animation: navItemIn 0.5s 0.76s both; }
html.intro-done .nav-links > li:nth-child(5) { animation: navItemIn 0.5s 0.83s both; }
html.intro-done .nav-right > * { animation: navItemIn 0.5s 0.95s both; }
@keyframes navItemIn {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: none; }
}
/* ────────────────────────────────────────────────────────────────────────
Ambient motion — subtle persistent life on the dashboard preview after
the hero entrance settles. The active sidebar item breathes, the trust
pills pulse a soft glow, the gradient dust drifts faintly.
────────────────────────────────────────────────────────────────────── */
.preview-side-item.active {
animation: previewActiveBreathe 4.5s ease-in-out 1.6s infinite;
}
@keyframes previewActiveBreathe {
0%, 100% {
background: var(--gold-bg);
box-shadow: inset 2px 0 0 var(--gold);
}
50% {
background: rgba(201, 168, 76, 0.12);
box-shadow: inset 2px 0 0 var(--gold), 0 0 20px rgba(201, 168, 76, 0.18);
}
}
/* Dashboard preview parallax tilt — JS sets transform on mousemove.
The transition smooths the return when the cursor leaves. */
.hero-preview {
transform-style: preserve-3d;
will-change: transform;
}
/* ────────────────────────────────────────────────────────────────────────
Reduced motion — kill ambient + tilt for users who prefer stillness.
The existing global rule already kills animations at 0.01ms; this
adds explicit no-tilt + no-pulse states for clarity.
────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
.preview-side-item.active,
.preview-panel,
.preview-kpi-num.bumped,
.ambient::before { animation: none !important; }
.preview-chart-area,
.preview-chart-line-primary,
.preview-chart-line-secondary { transition: none !important; }
.hero-preview { transform: none !important; }
}
/* Active-tab nav link gets a gold-tinted background pill — pairs with
the sliding underline indicator (.nav-indicator) to make "you are here"
read at a glance. The ::after rule was dropped when we moved to the
single sliding indicator. */
.nav-links a.active {
color: var(--gold-light);
background: var(--gold-bg);
}
/* The home tab needs its hero to sit just below the nav without the giant
top padding. Override the desktop hero padding when we're in tab mode. */
html.tabs-ready .panel-home .hero {
padding-top: 1.5rem;
padding-bottom: 2rem;
}
@media (max-width: 760px) {
html.tabs-ready .panel-home .hero { padding-top: 1rem; }
.nav-links a.nav-external::before { display: none; }
}
/* ============================================================================
Light-mode polish overrides
--------------------------------------------------------------------------
The home page predates the light theme, so several rules hardcode pure-black
drop shadows and use --void for text-on-gold (which becomes cream-on-gold in
light mode). These overrides re-tune those rules for the parchment palette
without altering the dark-mode experience.
============================================================================ */
[data-theme="light"] body {
/* Soft warm highlight at the top of the page + faint gold wash on the right
so the body reads as parchment-with-atmosphere instead of a flat color. */
background:
radial-gradient(ellipse 1200px 520px at 50% -120px, rgba(255, 246, 222, 0.85), transparent 70%),
radial-gradient(ellipse 900px 500px at 92% 18%, rgba(176, 138, 42, 0.05), transparent 65%),
var(--bg);
background-attachment: fixed;
}
/* Card hover lift — warm amber drop shadow instead of harsh black. */
[data-theme="light"] .pricing-card:hover {
box-shadow:
0 16px 40px rgba(60, 40, 10, 0.12),
0 2px 6px rgba(60, 40, 10, 0.06);
}
[data-theme="light"] .pricing-card.featured {
box-shadow:
0 0 50px rgba(201, 168, 76, 0.18),
0 16px 40px rgba(60, 40, 10, 0.12);
}
/* Text-on-gold needs a dark color for contrast — --void is cream in light mode. */
[data-theme="light"] .pricing-card.featured::before { color: #1f1809; }
[data-theme="light"] .pricing-cta-gold { color: #1f1809; }
[data-theme="light"] .pricing-cta-gold:hover { color: #1f1809; }