@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap');
:root {
--bg: #050508;
--bg-2: #0b0c13;
--fg: #ffffff;
--fg-dim: rgba(255, 255, 255, 0.72);
--fg-mute: rgba(255, 255, 255, 0.48);
--border: rgba(255, 255, 255, 0.08);
--border-strong: rgba(255, 255, 255, 0.16);
--glass: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012));
--accent: #ff2d2d;
--accent-light: #ff5e00;
--accent-soft: #ffa600;
--accent-dark: #c1002e;
--accent-glow: rgba(255, 60, 40, 0.42);
--accent-gradient: linear-gradient(135deg, #ff003c, #ff5e00);
--warn: #fbbf24;
--success: #22c55e;
--success-soft: #4ade80;
/* ---- Minecraft Vibe Accents ---- */
--mc-redstone: #ef4444;
--mc-redstone-glow: rgba(239, 68, 68, 0.4);
--mc-diamond: #2de6e6;
--mc-diamond-glow: rgba(45, 230, 230, 0.4);
--mc-emerald: #10b981;
--mc-emerald-glow: rgba(16, 185, 129, 0.4);
--mc-gold: #ffd700;
--mc-gold-glow: rgba(255, 215, 0, 0.4);
--mc-xp: #4ade80;
--mc-xp-glow: rgba(74, 222, 128, 0.4);
--mc-netherite: #1a1a24;
--mc-obsidian: #08080c;
--mc-font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
/* ---- Gold-Hybrid brand accent (edel) ---------------------------------
Gold is the premium accent for hero, particles, headings, frames and
rings. The red --accent family above stays for CTA buttons so the brand
stays recognisable. Both are theme-aware (see [data-theme="light"]). */
--gold: #ffd700;
--gold-2: #d4af37;
--gold-soft: #f5d98b;
--gold-deep: #b8860b;
--gold-ink: #6b5410;
--gold-gradient: linear-gradient(135deg, #f7e2a0 0%, #ffd700 42%, #d4af37 100%);
--gold-glow: rgba(212, 175, 55, 0.42);
--gold-line: rgba(212, 175, 55, 0.30);
--gold-rgb: 255, 215, 0;
/* Tokens the light theme remaps. Components should read these instead of
hardcoding so the Hell/Dunkel switch flips the whole surface at once. */
--surface: rgba(255, 255, 255, 0.045);
--surface-2: rgba(255, 255, 255, 0.07);
--body-glow: rgba(212, 175, 55, 0.10);
--hero-particle: rgba(255, 215, 0, 0.85);
--hero-particle-line: rgba(212, 175, 55, 0.55);
--theme-transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
--radius: 20px;
--radius-lg: 24px;
--radius-md: 14px;
--radius-sm: 10px;
--radius-pill: 999px;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 48px;
--space-8: 64px;
--space-9: 80px;
--shadow-sm: 0 4px 14px -6px rgba(0, 0, 0, 0.5);
--shadow-md: 0 14px 34px -14px rgba(0, 0, 0, 0.6);
--shadow-lg: 0 30px 60px -22px rgba(0, 0, 0, 0.72);
--shadow-glow: 0 18px 50px -16px var(--accent-glow);
--ease: cubic-bezier(0.4, 0, 0.2, 1);
--ease-out: cubic-bezier(0.22, 0.7, 0.2, 1);
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--t-fast: 0.16s;
--t-base: 0.26s;
--t-slow: 0.5s;
color-scheme: dark;
}
/* ====================================================================
Light theme — "Champagner". Warm off-white surface with gold accents.
Default is dark (OLED). The Hell/Dunkel switch sets data-theme="light"
on ; an early head-script applies the saved choice before paint
so there is no flash. Only surface tokens are remapped — components that
read the variables above flip automatically.
==================================================================== */
html[data-theme="light"] {
--bg: #faf6ec;
--bg-2: #fffdf7;
--fg: #1c1708;
--fg-dim: rgba(28, 23, 8, 0.74);
--fg-mute: rgba(28, 23, 8, 0.50);
--border: rgba(120, 95, 20, 0.16);
--border-strong: rgba(120, 95, 20, 0.28);
--glass: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 250, 235, 0.5));
--surface: rgba(255, 255, 255, 0.6);
--surface-2: rgba(255, 252, 242, 0.85);
--gold: #b8860b;
--gold-2: #a9780a;
--gold-soft: #cda33f;
--gold-gradient: linear-gradient(135deg, #c79a2e 0%, #b8860b 45%, #9a6f08 100%);
--gold-glow: rgba(184, 134, 11, 0.30);
--gold-line: rgba(184, 134, 11, 0.34);
--body-glow: rgba(212, 175, 55, 0.18);
--hero-particle: rgba(184, 134, 11, 0.78);
--hero-particle-line: rgba(184, 134, 11, 0.42);
--shadow-sm: 0 4px 14px -6px rgba(90, 70, 10, 0.22);
--shadow-md: 0 14px 34px -14px rgba(90, 70, 10, 0.26);
--shadow-lg: 0 30px 60px -22px rgba(90, 70, 10, 0.30);
--shadow-glow: 0 18px 50px -16px var(--gold-glow);
color-scheme: light;
}
html[data-theme="light"] body {
background:
radial-gradient(ellipse 90% 60% at 50% -10%, rgba(212, 175, 55, 0.18) 0%, transparent 55%),
radial-gradient(ellipse at top, var(--bg-2), var(--bg) 72%);
}
html[data-theme="light"] ::selection { background: rgba(184, 134, 11, 0.25); color: #1c1708; }
/* Smooth cross-fade when the switch is flipped (not on initial paint). */
html.bk-theme-anim,
html.bk-theme-anim body,
html.bk-theme-anim .nav,
html.bk-theme-anim .footer,
html.bk-theme-anim .pricing-card,
html.bk-theme-anim .plugin-mini,
html.bk-theme-anim .faq-card {
transition: var(--theme-transition);
}
* { box-sizing: border-box; }
html {
scroll-behavior: smooth;
scrollbar-gutter: stable;
}
body {
margin: 0;
scrollbar-gutter: stable;
background:
radial-gradient(ellipse 90% 60% at 50% -10%, rgba(255, 60, 40, 0.10) 0%, transparent 55%),
radial-gradient(ellipse at top, var(--bg-2), var(--bg) 70%);
color: var(--fg);
font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
font-weight: 400;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
position: relative;
min-height: 100vh;
}
a { color: inherit; }
img { max-width: 100%; display: block; }
::selection { background: rgba(255, 60, 40, 0.3); color: white; }
.site-bg {
position: fixed;
inset: 0;
z-index: -1;
overflow: hidden;
pointer-events: none;
}
.site-bg .mh-grid {
inset: -80px;
mask-image: radial-gradient(ellipse 120% 100% at 50% 30%, #000 55%, transparent 95%);
-webkit-mask-image: radial-gradient(ellipse 120% 100% at 50% 30%, #000 55%, transparent 95%);
background-size: 56px 56px;
}
.site-bg .mh-aurora-1 {
left: -160px;
top: 8vh;
opacity: 0.42;
}
.site-bg .mh-aurora-2 {
right: -120px;
top: 38vh;
opacity: 0.36;
}
.site-bg .mh-aurora-3 {
left: 30%;
bottom: -180px;
opacity: 0.28;
}
.site-bg .mh-sparkles { inset: 0; opacity: 0.85; }
/* ------------------------------------------------------------------
Photographic film-grain + soft vignette overlays. Both are purely
decorative fixed layers inside .site-bg (pointer-events:none, z-index
below content) so they reserve no space and cause no layout shift.
The grain animates with a tiny GPU transform jitter; the vignette is
static. Both are disabled under reduced motion further down.
------------------------------------------------------------------ */
.bk-grain {
position: absolute;
inset: -120px;
pointer-events: none;
opacity: 0.05;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
background-size: 200px 200px;
will-change: transform;
animation: bk-grain-shift 0.7s steps(4) infinite;
}
@keyframes bk-grain-shift {
0% { transform: translate3d(0, 0, 0); }
25% { transform: translate3d(-3%, 1.5%, 0); }
50% { transform: translate3d(2%, -2%, 0); }
75% { transform: translate3d(-1.5%, 2.5%, 0); }
100% { transform: translate3d(2.5%, -1%, 0); }
}
.bk-vignette {
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(ellipse 120% 100% at 50% 30%, transparent 55%, rgba(2, 2, 6, 0.55) 100%),
radial-gradient(ellipse 100% 80% at 50% 120%, rgba(2, 2, 6, 0.5), transparent 60%);
}
.hero-pro-inner { position: relative; z-index: 1; }
/* ------------------------------------------------------------------
Hero depth — a mid-ground bloom layer that drifts (parallax) behind
the wordmark. Absolutely positioned, decorative, reserves no space.
------------------------------------------------------------------ */
.hero-pro-depth {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
}
.hero-pro-glow {
position: absolute;
left: 50%;
top: 42%;
width: clamp(420px, 60vw, 820px);
height: clamp(420px, 60vw, 820px);
transform: translate(-50%, -50%);
border-radius: 50%;
background:
radial-gradient(circle at 50% 45%, rgba(255, 60, 40, 0.20), transparent 60%),
radial-gradient(circle at 60% 60%, rgba(255, 166, 0, 0.14), transparent 65%);
filter: blur(40px);
animation: bk-hero-bloom 9s ease-in-out infinite;
}
@keyframes bk-hero-bloom {
0%, 100% { opacity: 0.75; transform: translate(-50%, -50%) scale(1); }
50% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
}
/* Headline per-line clip-mask wipe. The inner .hpw-text is the animated
element (JS rises it from translateY(115%)); the clip is the window. */
.hero-pro-wordmark .hpw-line { overflow: hidden; }
.hero-pro-wordmark .hpw-text { display: inline-block; will-change: transform; }
@media (prefers-reduced-motion: reduce) {
.site-bg .mh-aurora { animation: none !important; }
.site-bg .mh-sparkles span { animation: none !important; opacity: 0.4 !important; }
.bk-grain { animation: none !important; }
.hero-pro-glow { animation: none !important; }
/* keep headline fully visible — no clip/rise when motion is reduced */
.hero-pro-wordmark .hpw-line { overflow: visible !important; }
.hero-pro-wordmark .hpw-text { transform: none !important; opacity: 1 !important; }
}
@keyframes dot-pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.4); opacity: 0.55; }
}
.wrap { width: min(1180px, calc(100% - 32px)); margin: 0 auto; }
.wrap-narrow { width: min(780px, calc(100% - 32px)); margin: 0 auto; }
.section { padding: clamp(48px, 7vh, 76px) 0; position: relative; }
.section-tight { padding: clamp(28px, 4vh, 44px) 0; }
.section-header { text-align: center; margin-bottom: clamp(32px, 5vh, 52px); }
.nav {
position: sticky;
top: 16px;
z-index: 100;
margin: 16px auto 0;
padding: 0 16px;
width: 100%;
}
.nav-inner {
width: fit-content;
max-width: min(1180px, calc(100% - 32px));
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
gap: 22px;
padding: 10px 14px 10px 20px;
background: rgba(8, 8, 14, 0.55);
backdrop-filter: blur(24px) saturate(180%);
-webkit-backdrop-filter: blur(24px) saturate(180%);
border: 1px solid var(--border);
border-radius: 999px;
box-shadow: 0 10px 40px -12px rgba(0, 0, 0, 0.6);
}
.logo {
display: inline-flex;
align-items: center;
gap: 10px;
text-decoration: none;
color: var(--fg);
}
.logo-mark { filter: drop-shadow(0 0 12px var(--accent-glow)); }
.logo-text {
font-family: 'Space Grotesk', sans-serif;
font-weight: 700;
font-size: 1.15rem;
letter-spacing: -0.02em;
}
.nav-links {
display: flex;
gap: 4px;
flex-wrap: nowrap;
align-items: center;
}
.nav-links a, .nav-link {
color: var(--fg-dim);
text-decoration: none;
font-weight: 500;
font-size: 0.92rem;
padding: 8px 14px;
border-radius: 999px;
transition: color 0.2s, background 0.2s;
border: none;
background: transparent;
font-family: inherit;
cursor: pointer;
position: relative;
}
/* Animated gradient underline that grows from center on hover/active. */
.nav-links a::after, .nav-link::after {
content: "";
position: absolute;
left: 50%;
right: 50%;
bottom: 4px;
height: 2px;
border-radius: 2px;
background: linear-gradient(90deg, #ff003c, #ff5e00, #ffa600);
opacity: 0;
transition: left 0.28s var(--ease-out), right 0.28s var(--ease-out), opacity 0.2s var(--ease);
}
.nav-links a:hover::after, .nav-link:hover::after,
.nav-links a.active::after, .nav-link.active::after {
left: 14px;
right: 14px;
opacity: 0.9;
}
@media (prefers-reduced-motion: reduce) {
.nav-links a::after, .nav-link::after { transition: none; }
}
.nav-links a:hover, .nav-link:hover,
.nav-links a.active, .nav-link.active {
color: var(--fg);
background: rgba(255, 255, 255, 0.06);
}
.nav-cta { margin-left: 0; }
@media (max-width: 820px) {
.nav { top: 10px; }
.nav-inner {
width: 100%;
justify-content: space-between;
}
.nav-links { display: none; }
.nav-mobile-toggle { display: inline-flex; }
}
.nav-mobile-toggle {
display: none;
align-items: center;
justify-content: center;
width: 38px; height: 38px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--border);
color: var(--fg);
cursor: pointer;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 20px;
font-family: inherit;
font-weight: 600;
font-size: 0.92rem;
border-radius: var(--radius-md);
border: 1px solid transparent;
text-decoration: none;
cursor: pointer;
transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease), background var(--t-base) var(--ease), border-color var(--t-base) var(--ease), color var(--t-base) var(--ease);
white-space: nowrap;
line-height: 1.2;
}
.btn-primary {
background: linear-gradient(135deg, var(--accent-light), var(--accent));
color: #04040a;
box-shadow:
0 0 0 1px rgba(255, 60, 40, 0.5),
0 12px 30px -10px var(--accent-glow),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
position: relative;
overflow: hidden;
isolation: isolate;
}
.btn-primary::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
transform: translateX(-100%);
animation: btn-shimmer 4s ease-in-out infinite;
pointer-events: none;
z-index: 0;
}
.btn-primary > * { position: relative; z-index: 1; }
.btn-primary > svg { position: relative; z-index: 1; }
@keyframes btn-shimmer {
0% { transform: translateX(-100%); }
60% { transform: translateX(100%); }
100% { transform: translateX(100%); }
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow:
0 0 0 1px rgba(255, 60, 40, 0.75),
0 20px 40px -10px rgba(255, 60, 40, 0.6),
inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.btn-ghost {
background: rgba(255, 255, 255, 0.04);
color: var(--fg);
border-color: var(--border);
backdrop-filter: blur(12px);
}
.btn-ghost:hover {
background: rgba(255, 255, 255, 0.08);
border-color: var(--border-strong);
transform: translateY(-1px);
}
.btn-danger {
background: rgba(248, 113, 113, 0.12);
color: #fca5a5;
border-color: rgba(248, 113, 113, 0.35);
}
.btn-danger:hover { background: rgba(248, 113, 113, 0.18); }
.btn-whatsapp {
background: linear-gradient(135deg, #25d366, #128c7e);
color: #04040a;
box-shadow: 0 12px 30px -10px rgba(37, 211, 102, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.btn-whatsapp:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -10px rgba(37, 211, 102, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.4); }
.btn-sm { padding: 8px 16px; font-size: 0.85rem; border-radius: var(--radius-sm); }
.btn-lg { padding: 14px 28px; font-size: 1rem; border-radius: var(--radius-md); }
.btn-block { width: 100%; }
.btn[disabled], .btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
[data-reveal] {
opacity: 0;
transform: translateY(20px);
transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
}
[data-reveal].revealed {
opacity: 1;
transform: translateY(0);
}
.reveal-stagger > [data-reveal]:nth-child(1) { transition-delay: .05s; }
.reveal-stagger > [data-reveal]:nth-child(2) { transition-delay: .12s; }
.reveal-stagger > [data-reveal]:nth-child(3) { transition-delay: .19s; }
.reveal-stagger > [data-reveal]:nth-child(4) { transition-delay: .26s; }
.reveal-stagger > [data-reveal]:nth-child(5) { transition-delay: .33s; }
.reveal-stagger > [data-reveal]:nth-child(6) { transition-delay: .40s; }
.reveal-stagger > [data-reveal]:nth-child(7) { transition-delay: .47s; }
.reveal-stagger > [data-reveal]:nth-child(8) { transition-delay: .54s; }
/* ============================================================
Cinematic section reveal — fade + clip-path wipe + rise.
The .bk-cine class is added by bk-motion.js ONLY when motion is
allowed (the script bails early under prefers-reduced-motion), so a
static fallback is automatic: without the class, content renders
normally. We still guard the hidden state behind no-preference and a
:where() so an unstyled/JS-failed page never traps content offscreen
for long (IntersectionObserver flips .bk-cine-in on first paint in view).
============================================================ */
@media (prefers-reduced-motion: no-preference) {
.bk-cine {
opacity: 0;
transform: translateY(34px);
clip-path: inset(0 0 14% 0 round 18px);
-webkit-clip-path: inset(0 0 14% 0 round 18px);
transition:
opacity 0.9s cubic-bezier(.16,1,.3,1),
transform 0.9s cubic-bezier(.16,1,.3,1),
clip-path 1.05s cubic-bezier(.16,1,.3,1),
-webkit-clip-path 1.05s cubic-bezier(.16,1,.3,1);
will-change: opacity, transform, clip-path;
}
.bk-cine.bk-cine-in {
opacity: 1;
transform: none;
clip-path: inset(0 0 0 0 round 0px);
-webkit-clip-path: inset(0 0 0 0 round 0px);
}
/* Section headers ride in slightly behind the section for layered depth. */
.bk-cine .section-header,
.bk-cine .pricing-v2-section-head {
opacity: 0;
transform: translateY(22px);
transition: opacity 0.8s 0.12s cubic-bezier(.16,1,.3,1), transform 0.8s 0.12s cubic-bezier(.16,1,.3,1);
}
.bk-cine.bk-cine-in .section-header,
.bk-cine.bk-cine-in .pricing-v2-section-head {
opacity: 1;
transform: none;
}
}
@media (prefers-reduced-motion: reduce) {
.bk-cine .section-header,
.bk-cine .pricing-v2-section-head { opacity: 1 !important; transform: none !important; }
}
/* ============================================================
Ken Burns — slow pan + zoom on hero & plugin imagery.
============================================================ */
@media (prefers-reduced-motion: no-preference) {
@keyframes bkKenBurns {
0% { transform: scale(1.06) translate3d(-1.2%, 1%, 0); }
50% { transform: scale(1.13) translate3d(1.2%, -1.4%, 0); }
100% { transform: scale(1.06) translate3d(-1.2%, 1%, 0); }
}
.plugin-hero-image,
[data-kenburns] {
animation: bkKenBurns 26s ease-in-out infinite;
will-change: transform;
}
/* pause the hero pan on hover so detail buttons read clearly */
.plugin-hero-image:hover { animation-play-state: paused; }
/* keep imagery inside its rounded frame while it pans */
.plugin-hero-image { transform-origin: center; }
.plugin-card-media { overflow: hidden; }
/* The framed plugin image becomes a "photo in a window": the frame tilts
(JS) and the image pans within it. Keep the frame clipped so the panned
image never spills, and float it for a real layered-depth shadow. */
.pdv3-image[data-tilt-depth] {
overflow: hidden;
border-radius: var(--radius);
transition: transform 0.5s cubic-bezier(.16,1,.3,1), box-shadow 0.5s var(--ease);
box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.75);
}
.pdv3-image[data-tilt-depth] .plugin-hero-image {
transition: transform 0.5s cubic-bezier(.16,1,.3,1);
}
/* Ken Burns also drives the small plugin grid imagery for life on the grid. */
.plugin-mini-image[data-kenburns] {
animation: bkKenBurns 30s ease-in-out infinite;
will-change: transform;
}
.plugin-mini-link:hover .plugin-mini-image[data-kenburns] { animation-play-state: paused; }
}
/* ------------------------------------------------------------------
Light bloom + soft layered shadow on plugin / pricing cards on hover.
Pure compositor work (opacity + box-shadow), guarded so reduced-motion
users still get the simple existing hover only.
------------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
.plugin-card, .plugin-mini, .pricing-card { transform-style: preserve-3d; }
.plugin-card:hover {
box-shadow:
0 40px 80px -30px rgba(255, 60, 40, 0.32),
0 10px 30px -12px rgba(0, 0, 0, 0.6);
}
.plugin-mini-link:hover .plugin-mini {
box-shadow:
0 30px 60px -26px rgba(255, 60, 40, 0.30),
0 8px 22px -10px rgba(0, 0, 0, 0.55);
}
}
/* ============================================================
Global motion polish — smooth cross-page transitions + load fade
============================================================ */
/* Crossfade between page navigations (Chromium View Transitions). UA auto-
reduces this under prefers-reduced-motion. */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 0.32s; animation-timing-function: cubic-bezier(.22,.7,.2,1); }
/* Gentle first-paint fade so loads/navigations never feel abrupt */
@keyframes bkPageFade { from { opacity: 0; } to { opacity: 1; } }
body { animation: bkPageFade 0.34s var(--ease-out) both; }
/* Consistent, smooth hover for the main interactive surfaces */
.plugin-card, .pricing-card, .form-card, .form-card-glass, .faq-card, .settings-card,
.admin-stat-card, .editor-rank-item {
transition: transform var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), background var(--t-base) var(--ease);
}
a, button, .btn, summary, [role="button"] { transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease); }
@media (prefers-reduced-motion: reduce) {
body { animation: none; }
/* Brand-essential GENTLE motion is intentionally kept even under reduced
motion (smooth scroll, section reveals, subtle background parallax, the
gold particle drift) — the site owner wants the premium feel everywhere.
Only the heavy / zooming / 3D effects that can actually cause discomfort
are disabled below. */
.plugin-hero-image, .plugin-card-image, [data-kenburns] { animation: none !important; transform: none !important; }
[data-tilt-depth], [data-tilt-depth] img { transform: none !important; }
.bk-grain { display: none !important; }
}
.eyebrow {
display: inline-block;
font-size: 0.78rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--accent-light);
margin: 0 0 16px;
}
.section-header h2,
h1, h2, h3 {
font-family: 'Space Grotesk', sans-serif;
letter-spacing: -0.025em;
}
.section-header h2 {
font-size: clamp(2rem, 4.2vw, 3.2rem);
font-weight: 700;
letter-spacing: -0.035em;
line-height: 1.08;
margin: 0 0 16px;
}
.section-header p {
color: var(--fg-dim);
font-size: 1.05rem;
max-width: 580px;
margin: 0 auto;
}
.hero {
position: relative;
padding: clamp(64px, 9vh, 88px) 0 clamp(40px, 6vh, 64px);
text-align: center;
}
.hero-compact { padding: clamp(48px, 7vh, 68px) 0 clamp(20px, 3vh, 32px); text-align: center; }
.hero-inner { max-width: 920px; margin: 0 auto; }
.hero-inner-left { text-align: left; max-width: 760px; }
.badge {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 7px 14px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--border);
border-radius: 999px;
font-size: 0.82rem;
color: var(--fg-dim);
margin-bottom: 28px;
backdrop-filter: blur(12px);
}
.badge-dot {
width: 7px; height: 7px;
border-radius: 50%;
background: var(--accent);
position: relative;
animation: dot-ring-pulse 2.2s ease-in-out infinite;
}
@keyframes dot-ring-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(255, 60, 40, 0.55), 0 0 12px var(--accent-light); }
50% { box-shadow: 0 0 0 8px rgba(255, 60, 40, 0), 0 0 12px var(--accent-light); }
}
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.4); } }
.hero-title {
font-family: 'Space Grotesk', sans-serif;
font-size: clamp(2.4rem, 6vw, 5.4rem);
font-weight: 700;
letter-spacing: -0.04em;
line-height: 1.04;
margin: 0 0 24px;
}
.gradient-text {
background: linear-gradient(135deg, #ffffff 0%, var(--accent-soft) 32%, var(--accent-light) 60%, #ff003c 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
display: inline-block;
}
.hero-sub {
font-size: clamp(1rem, 1.4vw, 1.18rem);
color: var(--fg-dim);
max-width: 640px;
margin: 0 auto 36px;
line-height: 1.65;
}
.hero-inner-left .hero-sub { margin-left: 0; }
.hero-cta {
display: flex;
gap: 14px;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 64px;
}
.hero-inner-left .hero-cta { justify-content: flex-start; margin-bottom: 0; }
.hero-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
max-width: 720px;
margin: 0 auto;
padding: 22px;
background: var(--glass);
border: 1px solid var(--border);
border-radius: var(--radius);
backdrop-filter: blur(20px) saturate(180%);
}
.hero-stats > div { text-align: center; }
.hero-stats strong {
display: block;
font-family: 'Space Grotesk', sans-serif;
font-size: 1.8rem;
font-weight: 700;
letter-spacing: -0.02em;
background: linear-gradient(180deg, #ffffff, var(--accent-soft));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 4px;
}
.hero-stats span {
font-size: 0.74rem;
color: var(--fg-mute);
text-transform: uppercase;
letter-spacing: 0.1em;
}
@media (max-width: 640px) {
.hero-stats { grid-template-columns: repeat(2, 1fr); }
}
.glass {
background: var(--glass);
border: 1px solid var(--border);
border-radius: var(--radius);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
position: relative;
overflow: hidden;
}
.glass::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
}
.plugin-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 22px;
}
.plugin-card {
position: relative;
padding: 30px;
background: var(--glass);
border: 1px solid var(--border);
border-radius: var(--radius);
backdrop-filter: blur(20px) saturate(180%);
overflow: hidden;
transition: all 0.4s var(--ease);
display: flex;
flex-direction: column;
}
.plugin-card::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
}
.plugin-card::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at top right, var(--accent-glow), transparent 60%);
opacity: 0;
transition: opacity 0.4s var(--ease);
pointer-events: none;
}
.plugin-card:hover {
transform: translateY(-4px);
border-color: rgba(255, 60, 40, 0.3);
box-shadow: 0 30px 60px -22px rgba(255, 60, 40, 0.25);
}
.plugin-card:hover::after { opacity: 0.45; }
.plugin-card > * { position: relative; z-index: 1; }
.plugin-icon {
width: 52px; height: 52px;
border-radius: 13px;
background: linear-gradient(135deg, rgba(255, 60, 40, 0.22), rgba(255, 60, 40, 0.05));
border: 1px solid rgba(255, 60, 40, 0.3);
display: flex;
align-items: center;
justify-content: center;
color: var(--accent-light);
margin-bottom: 18px;
box-shadow: 0 8px 22px -6px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.plugin-head {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 16px;
margin-bottom: 10px;
flex-wrap: wrap;
}
.plugin-head h3 {
font-size: 1.45rem;
font-weight: 700;
margin: 0;
}
.plugin-version {
font-size: 0.72rem;
color: var(--fg-mute);
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
padding: 3px 9px;
background: rgba(255, 255, 255, 0.05);
border-radius: 999px;
border: 1px solid var(--border);
letter-spacing: -0.01em;
}
.plugin-card p {
color: var(--fg-dim);
margin: 0 0 20px;
line-height: 1.6;
}
.plugin-features {
list-style: none;
padding: 0;
margin: 0 0 24px;
display: grid;
gap: 8px;
}
.plugin-features li {
display: flex;
align-items: center;
gap: 10px;
font-size: 0.9rem;
color: var(--fg-dim);
}
.plugin-features li::before {
content: "";
width: 16px; height: 16px;
border-radius: 50%;
flex-shrink: 0;
background-image: url("data:image/svg+xml;utf8,");
background-size: contain;
}
.plugin-actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-top: auto;
}
.plugin-card-mini-pills {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 14px;
}
.pill {
display: inline-block;
border: 1px solid var(--border);
background: rgba(255, 255, 255, 0.04);
color: var(--fg-dim);
padding: 4px 10px;
border-radius: 999px;
font-size: 0.78rem;
font-weight: 500;
}
.status {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.84rem;
font-weight: 600;
color: var(--success);
}
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 6px currentColor; }
.status.missing { color: var(--warn); }
.status.dim { color: var(--fg-mute); }
.split {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
gap: 22px;
align-items: start;
}
@media (max-width: 880px) { .split { grid-template-columns: 1fr; } }
.feature-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 10px;
padding: 0;
margin: 18px 0 0;
list-style: none;
}
.feature-list li {
border: 1px solid var(--border);
background: rgba(255, 255, 255, 0.04);
border-radius: 12px;
padding: 12px 14px;
color: var(--fg);
font-size: 0.92rem;
}
.artifact {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 16px 0;
border-top: 1px solid var(--border);
flex-wrap: wrap;
}
.artifact:first-of-type { border-top: 0; padding-top: 6px; }
.artifact h3 { font-size: 1.05rem; margin: 0 0 4px; }
.artifact-note { color: var(--fg-mute); font-size: 0.85rem; margin: 0 0 6px; }
.pricing-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
align-items: stretch;
}
@media (max-width: 900px) {
.pricing-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
}
.pricing-card {
position: relative;
padding: 34px 30px;
background: var(--glass);
border: 1px solid var(--border);
border-radius: var(--radius);
backdrop-filter: blur(20px) saturate(180%);
display: flex;
flex-direction: column;
transition: border-color 0.3s var(--ease);
}
.pricing-card::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
}
.pricing-card:hover { border-color: var(--border-strong); }
.pricing-card h3 {
font-size: 1.2rem;
font-weight: 600;
margin: 0 0 16px;
color: var(--fg-dim);
}
.price {
display: flex;
align-items: baseline;
gap: 6px;
margin-bottom: 10px;
}
.price-amount {
font-family: 'Space Grotesk', sans-serif;
font-size: 3rem;
font-weight: 700;
letter-spacing: -0.045em;
line-height: 1;
}
.price-period {
color: var(--fg-mute);
font-size: 0.92rem;
}
.pricing-desc {
color: var(--fg-dim);
margin: 0 0 24px;
font-size: 0.92rem;
line-height: 1.55;
}
.pricing-features {
list-style: none;
padding: 0;
margin: 0 0 28px;
display: grid;
gap: 10px;
flex-grow: 1;
}
.pricing-features li {
display: flex;
align-items: center;
gap: 10px;
font-size: 0.9rem;
color: var(--fg);
}
.pricing-features li::before {
content: "";
width: 17px; height: 17px;
border-radius: 50%;
flex-shrink: 0;
background-image: url("data:image/svg+xml;utf8,");
background-size: contain;
}
.pricing-features li.muted { color: var(--fg-mute); }
.pricing-features li.muted::before {
background-image: url("data:image/svg+xml;utf8,");
}
.pricing-featured {
background:
radial-gradient(circle at top, rgba(255, 60, 40, 0.14), transparent 60%),
linear-gradient(180deg, rgba(255, 60, 40, 0.06), rgba(255, 255, 255, 0.02));
border-color: rgba(255, 60, 40, 0.35);
box-shadow: 0 30px 60px -22px rgba(255, 60, 40, 0.28);
transform: scale(1.025);
}
.pricing-featured:hover { border-color: rgba(255, 60, 40, 0.55); }
.pricing-featured h3 { color: var(--accent-light); }
@media (max-width: 900px) { .pricing-featured { transform: none; } }
.badge-popular {
position: absolute;
top: -12px;
right: 24px;
background: linear-gradient(135deg, var(--accent-light), var(--accent));
color: #04040a;
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
padding: 6px 12px;
border-radius: 999px;
box-shadow: 0 8px 20px -6px var(--accent-glow);
}
.pricing-note {
text-align: center;
color: var(--fg-mute);
font-size: 0.85rem;
margin: 32px 0 0;
}
.form-card {
max-width: 480px;
margin: 40px auto;
padding: 36px;
background: var(--glass);
border: 1px solid var(--border);
border-radius: var(--radius);
backdrop-filter: blur(20px) saturate(180%);
position: relative;
overflow: hidden;
}
.form-card::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
}
.form-card h1 {
font-size: 1.8rem;
font-weight: 700;
margin: 0 0 8px;
}
.form-card > p { color: var(--fg-dim); margin: 0 0 24px; font-size: 0.95rem; }
.form { display: grid; gap: 16px; }
.field { display: grid; gap: 6px; }
.field label {
font-size: 0.82rem;
font-weight: 600;
color: var(--fg-dim);
letter-spacing: 0.02em;
}
.field input, .field textarea, .field select {
width: 100%;
padding: 12px 14px;
background: rgba(0, 0, 0, 0.35);
border: 1px solid var(--border);
border-radius: 12px;
color: var(--fg);
font-family: inherit;
font-size: 0.95rem;
transition: border-color 0.2s, background 0.2s;
}
.field textarea { resize: vertical; min-height: 120px; line-height: 1.55; }
.field input:focus, .field textarea:focus, .field select:focus {
outline: none;
border-color: var(--accent-light);
background: rgba(0, 0, 0, 0.45);
}
.field input::placeholder, .field textarea::placeholder { color: var(--fg-mute); }
.form-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.form-foot { color: var(--fg-mute); font-size: 0.88rem; margin: 18px 0 0; }
.form-foot a { color: var(--accent-light); text-decoration: none; border-bottom: 1px solid rgba(255, 60, 40, 0.4); }
.message {
padding: 12px 14px;
border-radius: 12px;
border: 1px solid rgba(251, 191, 36, 0.3);
background: rgba(251, 191, 36, 0.08);
color: #fde68a;
font-size: 0.9rem;
margin: 0 0 20px;
}
.message.success {
border-color: rgba(34, 197, 94, 0.35);
background: rgba(34, 197, 94, 0.08);
color: var(--success-soft);
}
.message.error {
border-color: rgba(248, 113, 113, 0.35);
background: rgba(248, 113, 113, 0.08);
color: #fca5a5;
}
.support-grid {
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr);
gap: 22px;
align-items: start;
}
@media (max-width: 860px) { .support-grid { grid-template-columns: 1fr; } }
.support-side {
padding: 30px;
background: var(--glass);
border: 1px solid var(--border);
border-radius: var(--radius);
backdrop-filter: blur(20px) saturate(180%);
position: relative;
}
.support-side::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
}
.support-side h3 { font-size: 1.2rem; margin: 0 0 12px; }
.support-side p { color: var(--fg-dim); margin: 0 0 18px; font-size: 0.94rem; line-height: 1.55; }
.support-channel {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 0;
border-top: 1px solid var(--border);
}
.support-channel:first-of-type { border-top: 0; }
.support-channel-icon {
width: 38px; height: 38px;
flex-shrink: 0;
border-radius: 10px;
background: rgba(255, 60, 40, 0.12);
border: 1px solid rgba(255, 60, 40, 0.3);
color: var(--accent-light);
display: flex;
align-items: center;
justify-content: center;
}
.support-channel-text { flex: 1; min-width: 0; }
.support-channel-text strong { display: block; font-size: 0.95rem; }
.support-channel-text span { color: var(--fg-mute); font-size: 0.82rem; }
.admin-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
gap: 18px;
align-items: start;
}
.admin-card {
padding: 26px;
background: var(--glass);
border: 1px solid var(--border);
border-radius: var(--radius);
backdrop-filter: blur(20px) saturate(180%);
position: relative;
overflow: hidden;
}
.admin-card::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
}
.admin-card h2 { font-size: 1.25rem; margin: 0 0 6px; }
.admin-card > p { color: var(--fg-dim); font-size: 0.92rem; margin: 0 0 18px; }
.upload {
border: 1px dashed rgba(255, 60, 40, 0.4);
border-radius: 14px;
padding: 16px;
background: rgba(255, 60, 40, 0.04);
margin-top: 14px;
transition: border-color 0.2s, background 0.2s;
}
.upload.dragging { border-color: var(--warn); background: rgba(251, 191, 36, 0.06); }
.upload h3 { font-size: 0.98rem; margin: 0 0 4px; }
.upload .muted { color: var(--fg-mute); font-size: 0.82rem; }
.upload-hint { color: var(--fg-mute); font-size: 0.78rem; margin: 6px 0 12px; }
.upload input[type=file] {
width: 100%;
padding: 10px 12px;
background: rgba(0, 0, 0, 0.35);
border: 1px solid var(--border);
border-radius: 10px;
color: var(--fg);
font-size: 0.85rem;
margin-bottom: 10px;
}
.admin-pricing {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 16px;
margin-top: 18px;
}
.admin-tier {
padding: 20px;
background: rgba(0, 0, 0, 0.25);
border: 1px solid var(--border);
border-radius: 14px;
display: grid;
gap: 10px;
}
.admin-tier h4 { font-size: 0.95rem; margin: 0; color: var(--accent-light); }
.admin-tier label { font-size: 0.78rem; color: var(--fg-mute); margin: 0; }
.admin-tier input, .admin-tier textarea {
padding: 8px 10px;
background: rgba(0, 0, 0, 0.4);
border: 1px solid var(--border);
border-radius: 8px;
color: var(--fg);
font-family: inherit;
font-size: 0.88rem;
}
.admin-tier textarea { resize: vertical; min-height: 70px; }
.admin-tier-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.admin-tier-toggle {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.82rem;
color: var(--fg-dim);
}
.inbox { display: grid; gap: 12px; margin-top: 18px; }
.inbox-empty { color: var(--fg-mute); text-align: center; padding: 24px; }
.inbox-item {
padding: 18px;
background: rgba(0, 0, 0, 0.25);
border: 1px solid var(--border);
border-radius: 14px;
}
.inbox-head {
display: flex;
justify-content: space-between;
gap: 14px;
margin-bottom: 8px;
flex-wrap: wrap;
font-size: 0.85rem;
color: var(--fg-mute);
}
.inbox-from { color: var(--fg); font-weight: 600; }
.inbox-subject { font-weight: 600; margin: 0 0 6px; }
.inbox-body { color: var(--fg-dim); font-size: 0.92rem; line-height: 1.55; white-space: pre-wrap; }
.inbox-meta { font-family: ui-monospace, monospace; font-size: 0.78rem; }
.footer {
border-top: 1px solid var(--border);
padding: 48px 0 28px;
background: rgba(4, 4, 10, 0.55);
backdrop-filter: blur(20px);
margin-top: 60px;
position: relative;
}
.footer-inner {
display: grid;
grid-template-columns: 1.2fr 2fr;
gap: 40px;
margin-bottom: 32px;
}
@media (max-width: 760px) { .footer-inner { grid-template-columns: 1fr; } }
.footer-brand p {
color: var(--fg-mute);
font-size: 0.9rem;
margin: 12px 0 0;
max-width: 280px;
line-height: 1.55;
}
.footer-cols {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
@media (max-width: 540px) { .footer-cols { grid-template-columns: repeat(2, 1fr); } }
.footer-cols h4 {
font-size: 0.72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--fg-mute);
margin: 0 0 14px;
}
.footer-cols a {
display: block;
color: var(--fg-dim);
text-decoration: none;
font-size: 0.9rem;
padding: 4px 0;
transition: color 0.2s;
}
.footer-cols a:hover { color: var(--fg); }
.footer-bottom {
padding-top: 24px;
border-top: 1px solid var(--border);
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 14px;
color: var(--fg-mute);
font-size: 0.82rem;
}
.footer-legal { display: flex; gap: 20px; }
.footer-legal a { color: var(--fg-mute); text-decoration: none; transition: color 0.2s; }
.footer-legal a:hover { color: var(--fg); }
.plugin-price {
display: inline-flex;
align-items: center;
gap: 4px;
font-family: 'Space Grotesk', sans-serif;
font-size: 1rem;
font-weight: 700;
color: var(--accent-light);
background: rgba(255, 60, 40, 0.1);
border: 1px solid rgba(255, 60, 40, 0.3);
padding: 4px 12px;
border-radius: 999px;
letter-spacing: -0.01em;
}
.plugin-detail-grid {
display: grid;
grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr);
gap: 22px;
align-items: stretch;
}
@media (max-width: 880px) { .plugin-detail-grid { grid-template-columns: 1fr; } }
.plugin-hero-image {
width: 100%;
height: 100%;
min-height: 320px;
max-height: 460px;
object-fit: cover;
border-radius: var(--radius);
border: 1px solid var(--border);
background: var(--glass);
box-shadow: 0 30px 60px -25px rgba(0, 0, 0, 0.6);
}
/* If the hero frame ever wraps an inner ![]()
, keep it contained/centred.
The ken-burns animation/transform on .plugin-hero-image itself is untouched. */
.plugin-hero-image img {
object-fit: contain;
object-position: center;
}
.plugin-hero-image-placeholder {
display: flex;
align-items: center;
justify-content: center;
background:
radial-gradient(circle at top right, rgba(255, 60, 40, 0.22), transparent 60%),
radial-gradient(circle at bottom left, rgba(255, 166, 0, 0.18), transparent 60%),
var(--glass);
}
.buy-block { display: flex; flex-direction: column; gap: 4px; }
.buy-price {
font-family: 'Space Grotesk', sans-serif;
font-size: clamp(2.2rem, 4vw, 3rem);
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1;
/* Gradient text-clip lives ONLY on the glyph element (.buy-price) so the
transparent fill never leaks onto a parent. */
background: linear-gradient(180deg, #ffffff, var(--accent-soft));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
.admin-shell {
display: grid;
grid-template-columns: 240px 1fr;
gap: 40px;
align-items: start;
margin-top: 24px;
}
@media (max-width: 1024px) {
.admin-shell { grid-template-columns: 1fr; gap: 24px; }
.admin-sidebar { position: static !important; max-height: none !important; }
.admin-sidebar nav { flex-direction: row !important; overflow-x: auto; padding-bottom: 8px; }
.admin-sidebar a { white-space: nowrap; flex-shrink: 0; }
}
.admin-sidebar {
position: sticky;
top: 92px;
max-height: calc(100vh - 110px);
overflow-y: auto;
padding: 22px 18px;
background: var(--glass);
border: 1px solid var(--border);
border-radius: var(--radius);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
}
.admin-sidebar h3 {
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--fg-mute);
margin: 0 0 14px;
font-weight: 600;
}
.admin-sidebar nav {
display: flex;
flex-direction: column;
gap: 4px;
}
.admin-sidebar a {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
border-radius: 12px;
color: var(--fg-dim);
text-decoration: none;
font-size: 0.92rem;
font-weight: 500;
transition: all 0.2s var(--ease);
border: 1px solid transparent;
}
.admin-sidebar a:hover {
color: var(--fg);
background: rgba(255, 255, 255, 0.05);
}
.admin-sidebar a.active {
color: var(--fg);
background: rgba(255, 60, 40, 0.1);
border-color: rgba(255, 60, 40, 0.3);
}
.admin-sidebar .sidebar-count {
margin-left: auto;
font-size: 0.74rem;
color: var(--fg-mute);
background: rgba(255, 255, 255, 0.05);
padding: 2px 8px;
border-radius: 999px;
font-family: ui-monospace, monospace;
}
.admin-sidebar a.active .sidebar-count {
background: rgba(255, 60, 40, 0.18);
color: var(--accent-light);
}
.admin-content {
min-width: 0;
display: flex;
flex-direction: column;
gap: 56px;
}
.admin-panel-section {
scroll-margin-top: 100px;
display: none;
}
.admin-panel-section.is-active {
display: block;
animation: admin-fade-in 0.25s var(--ease);
}
@keyframes admin-fade-in {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
.admin-panel-header {
display: flex;
justify-content: space-between;
align-items: end;
gap: 18px;
margin-bottom: 24px;
flex-wrap: wrap;
}
.admin-panel-header h2 {
font-family: 'Space Grotesk', sans-serif;
font-size: clamp(1.6rem, 2.6vw, 2.1rem);
font-weight: 700;
letter-spacing: -0.03em;
margin: 0;
}
.admin-panel-header .eyebrow {
margin: 0 0 4px;
display: block;
}
.admin-panel-header p {
color: var(--fg-dim);
font-size: 0.94rem;
margin: 6px 0 0;
max-width: 540px;
}
.persistence-banner {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 18px;
border: 1px solid var(--border, rgba(255,255,255,0.08));
border-radius: 12px;
background: rgba(255,255,255,0.03);
}
/* ==================================================================
Premium motion layer — high-end "wow" additions (additive, safe).
Driven by bk-motion.js; everything degrades gracefully and is
disabled under prefers-reduced-motion. No markup changes required.
================================================================== */
/* Scroll progress — thin brand-gradient bar that fills as you scroll. */
.bk-scroll-progress {
position: fixed;
top: 0;
left: 0;
height: 3px;
width: 100%;
transform: scaleX(0);
transform-origin: 0 50%;
background: linear-gradient(90deg, #ff003c, #ff5e00 55%, #ffa600);
box-shadow: 0 0 14px rgba(255, 94, 0, 0.55);
z-index: 1000;
pointer-events: none;
will-change: transform;
}
/* Cursor-following spotlight on cards. ::after paints a soft radial highlight
that tracks --spot-x/--spot-y (set by JS on pointermove). Never used on
.plugin-card (which already owns ::after) — only conflict-free wrappers. */
.bk-spotlight { position: relative; }
.bk-spotlight::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
opacity: 0;
transition: opacity .35s ease;
background: radial-gradient(
260px circle at var(--spot-x, 50%) var(--spot-y, 0%),
rgba(255, 94, 0, 0.16),
rgba(255, 60, 40, 0.06) 40%,
transparent 70%);
z-index: 3;
mix-blend-mode: screen;
}
.bk-spotlight:hover::after,
.bk-spotlight:focus-within::after { opacity: 1; }
/* Premium primary-button shine sweep on hover. */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
content: "";
position: absolute;
top: 0;
left: -120%;
width: 60%;
height: 100%;
background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
transform: skewX(-18deg);
transition: left .6s cubic-bezier(.16, 1, .3, 1);
pointer-events: none;
}
.btn-primary:hover::after { left: 130%; }
/* Active-status breathing pulse on the live/online dots. */
@keyframes bk-status-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.55); }
50% { box-shadow: 0 0 0 6px rgba(52, 211, 153, 0); }
}
.hero-pro-live-dot,
.hero-pro-badge-dot { animation: bk-status-pulse 2.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
.bk-scroll-progress { display: none !important; }
.bk-spotlight::after { display: none !important; }
.btn-primary::after { display: none !important; }
.hero-pro-live-dot,
.hero-pro-badge-dot { animation: none !important; }
}