/* ===========================================================
climax landing — mirrors the app's `midnight` theme.
Tokens copied from climax/static/index.html so the site and
the app feel like one product.
=========================================================== */
/* ---------- Themes ----------
Mirrors climax/static/index.html so the site and the app share tokens.
Switch via — see main.js for the picker. */
:root, body[data-theme="midnight"] { /* default: dark navy + cyan */
--bg-0: #0d0e14; --bg-1: #14161f; --bg-2: #1b1e2a; --bg-term: #000;
--line: #2b3046; --line-2: #3a4162; --dim: #6c7594;
--fg: #d7dcea; --fg-strong: #fff;
--accent: #6cf6ff; --accent-fg: #001820;
--user: #9eafff; --info: #6cf6ff; --success: #5bf28a;
--warn: #ffb86c; --danger: #ff6b8a;
}
body[data-theme="carbon"] { /* near-black, minimal chroma */
--bg-0: #05060a; --bg-1: #0d1017; --bg-2: #161a24; --bg-term: #000;
--line: #232838; --line-2: #2f374d; --dim: #66708b;
--fg: #d5dae8; --fg-strong: #fff;
--accent: #7cffbe; --accent-fg: #00170a;
--user: #b1bcff; --info: #7cffbe; --success: #7cffbe;
--warn: #ffcf7a; --danger: #ff7a95;
}
body[data-theme="nord"] { /* cool blue-grey */
--bg-0: #2e3440; --bg-1: #3b4252; --bg-2: #434c5e; --bg-term: #22262f;
--line: #4c566a; --line-2: #5b6577; --dim: #7b869a;
--fg: #d8dee9; --fg-strong: #eceff4;
--accent: #88c0d0; --accent-fg: #21272e;
--user: #81a1c1; --info: #88c0d0; --success: #a3be8c;
--warn: #ebcb8b; --danger: #bf616a;
}
body[data-theme="paper"] { /* light: cream + warm accents */
--bg-0: #f5f2ea; --bg-1: #ffffff; --bg-2: #ecebe4; --bg-term: #1c1b18;
--line: #d9d6cc; --line-2: #c9c6ba; --dim: #7a7568;
--fg: #2a2825; --fg-strong: #0f0e0c;
--accent: #c17a3d; --accent-fg: #ffffff;
--user: #4a6ea8; --info: #c17a3d; --success: #4a9a5e;
--warn: #c88a1c; --danger: #b0433f;
}
body[data-theme="solar-light"] { /* solarized-inspired light */
--bg-0: #fdf6e3; --bg-1: #eee8d5; --bg-2: #e2dcc3; --bg-term: #002b36;
--line: #d2ccb6; --line-2: #c4be9f; --dim: #93a1a1;
--fg: #586e75; --fg-strong: #073642;
--accent: #268bd2; --accent-fg: #fdf6e3;
--user: #6c71c4; --info: #268bd2; --success: #859900;
--warn: #b58900; --danger: #dc322f;
}
/* ---------- Compositional tokens (theme-adaptive via color-mix) ---------- */
:root {
--panel: color-mix(in srgb, var(--bg-1) 78%, transparent);
--panel-2: color-mix(in srgb, var(--bg-2) 78%, transparent);
--glow-accent: 0 0 24px color-mix(in srgb, var(--accent) 30%, transparent);
--shadow-lift: 0 20px 60px rgba(0, 0, 0, 0.4);
--grad-tide: linear-gradient(135deg, var(--accent) 0%, var(--user) 55%, var(--warn) 100%);
--grad-surf: linear-gradient(90deg, var(--accent), var(--user), var(--success));
--font-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace;
--font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", ui-sans-serif, system-ui, "Inter", sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
background: var(--bg-0);
color: var(--fg);
font-family: var(--font-sans);
font-size: 15px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
min-height: 100vh;
overflow-x: hidden;
}
body::before {
content: "";
position: fixed; inset: 0; pointer-events: none; z-index: -2;
background:
radial-gradient(ellipse at 20% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 55%),
radial-gradient(ellipse at 90% 10%, color-mix(in srgb, var(--user) 10%, transparent), transparent 55%),
radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--warn) 6%, transparent), transparent 60%);
}
/* Smooth theme swap. */
html, body { transition: background-color 260ms, color 260ms; }
a { color: inherit; text-decoration: none; transition: color .15s; }
a:hover { color: var(--accent); }
code, pre {
font-family: var(--font-mono);
font-size: 0.92em;
}
code {
background: var(--bg-2);
border: 1px solid var(--line);
padding: 1px 6px;
border-radius: 4px;
color: var(--accent);
}
pre {
background: var(--bg-1);
border: 1px solid var(--line);
padding: 14px 18px;
border-radius: 8px;
overflow-x: auto;
}
pre code { background: transparent; border: none; padding: 0; color: var(--fg); }
::selection { background: var(--accent); color: var(--accent-fg); }
/* ============ Atmosphere layer ============ */
.atmos {
position: fixed; inset: 0; pointer-events: none; z-index: -1;
overflow: hidden;
}
.blob {
position: absolute;
width: 520px; height: 520px;
border-radius: 50%;
filter: blur(140px);
opacity: .18;
animation: drift 26s ease-in-out infinite alternate;
}
.blob-a { background: var(--accent); top: -140px; left: -80px; animation-delay: 0s; }
.blob-b { background: var(--user); top: 40vh; right: -160px; animation-delay: -9s; }
.blob-c { background: var(--warn); top: 70vh; left: 40vw; animation-delay: -18s; opacity: .10; }
@keyframes drift {
0% { transform: translate(0, 0) scale(1); }
50% { transform: translate(60px, -40px) scale(1.08); }
100% { transform: translate(-40px, 30px) scale(0.95); }
}
.grid {
position: absolute;
left: -10vw; right: -10vw;
bottom: 0;
height: 55vh;
background-image:
linear-gradient(to right, color-mix(in srgb, var(--accent) 8%, transparent) 1px, transparent 1px),
linear-gradient(to bottom, color-mix(in srgb, var(--user) 6%, transparent) 1px, transparent 1px);
background-size: 60px 60px;
transform: perspective(500px) rotateX(60deg);
transform-origin: bottom center;
mask-image: linear-gradient(to top, black 20%, transparent 90%);
-webkit-mask-image: linear-gradient(to top, black 20%, transparent 90%);
opacity: .5;
}
.scanlines {
position: absolute; inset: 0;
background: repeating-linear-gradient(
to bottom,
rgba(255, 255, 255, 0.015) 0px,
rgba(255, 255, 255, 0.015) 1px,
transparent 1px,
transparent 3px
);
mix-blend-mode: overlay;
opacity: .5;
}
/* ============ Header ============ */
header {
border-bottom: 1px solid var(--line);
position: sticky; top: 0;
z-index: 10;
backdrop-filter: blur(14px);
background: rgba(13, 14, 20, 0.75);
}
nav {
max-width: 1180px;
margin: 0 auto;
padding: 14px 24px;
display: flex; justify-content: space-between; align-items: center;
}
.logo {
font-family: var(--font-mono);
font-weight: 700;
font-size: 15px;
letter-spacing: -0.02em;
display: inline-flex; align-items: baseline; gap: 1px;
}
.logo-text {
color: var(--fg-strong);
}
.logo-caret {
color: var(--accent);
animation: blink 1.1s steps(2, end) infinite;
text-shadow: 0 0 8px rgba(108, 246, 255, 0.6);
}
@keyframes blink { 50% { opacity: 0; } }
.nav-right {
display: flex; align-items: center; gap: 20px;
font-size: 12px;
color: var(--dim);
font-family: var(--font-mono);
letter-spacing: 0.02em;
}
#theme-picker {
background: var(--bg-1);
color: var(--fg);
border: 1px solid var(--line);
border-radius: 6px;
padding: 5px 26px 5px 10px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.06em;
text-transform: lowercase;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
background-image:
linear-gradient(45deg, transparent 50%, var(--dim) 50%),
linear-gradient(135deg, var(--dim) 50%, transparent 50%);
background-position:
calc(100% - 14px) 12px,
calc(100% - 10px) 12px;
background-size: 4px 4px, 4px 4px;
background-repeat: no-repeat;
transition: border-color .15s, color .15s;
}
#theme-picker:hover { border-color: var(--accent); color: var(--fg-strong); }
#theme-picker:focus { outline: none; border-color: var(--accent); }
/* GitHub star pill — split button feel: [icon · star | count]. */
.gh-star {
display: inline-flex; align-items: center;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 6px;
padding: 0;
font-family: var(--font-mono);
font-size: 11px;
color: var(--fg);
overflow: hidden;
transition: border-color .15s, transform .15s;
line-height: 1;
}
.gh-star:hover {
border-color: var(--accent);
color: var(--fg-strong);
transform: translateY(-1px);
}
.gh-star .gh-icon { margin: 0 6px 0 8px; opacity: .9; }
.gh-star .gh-label {
padding: 6px 8px 6px 0;
letter-spacing: 0.08em;
text-transform: uppercase;
font-weight: 700;
}
.gh-star .gh-count {
padding: 6px 10px;
background: var(--bg-2);
border-left: 1px solid var(--line);
color: var(--accent);
font-weight: 700;
min-width: 24px;
text-align: center;
transition: background .15s;
}
.gh-star:hover .gh-count { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.gh-star .gh-count.loading { color: var(--dim); }
/* ============ Main ============ */
main { max-width: 1180px; margin: 0 auto; padding: 0 24px; position: relative; }
/* ============ Hero ============ */
.hero {
padding: 72px 0 40px;
display: grid;
grid-template-columns: 1fr 1.05fr;
gap: 56px;
align-items: center;
}
.tag {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-mono);
font-size: 11px;
color: var(--accent);
letter-spacing: 0.06em;
padding: 5px 11px;
border: 1px solid rgba(108, 246, 255, 0.28);
border-radius: 999px;
background: rgba(108, 246, 255, 0.06);
margin-bottom: 22px;
}
.tag .tag-dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--success);
box-shadow: 0 0 6px var(--success);
}
.hero h1 {
font-size: 54px;
font-weight: 700;
letter-spacing: -0.035em;
line-height: 1.04;
margin-bottom: 22px;
color: var(--fg-strong);
}
.hero h1 .grad {
background: var(--grad-tide);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.hero .sub {
max-width: 520px;
color: var(--fg);
font-size: 16px;
line-height: 1.6;
margin-bottom: 28px;
}
/* Install line — glassy panel */
.install {
display: inline-flex;
align-items: center;
gap: 10px;
background: var(--panel);
border: 1px solid var(--line);
border-radius: 10px;
padding: 10px 8px 10px 14px;
font-family: var(--font-mono);
font-size: 13px;
margin-bottom: 8px;
max-width: 100%;
backdrop-filter: blur(10px);
transition: box-shadow .2s, border-color .2s;
}
.install:hover {
border-color: rgba(108, 246, 255, 0.35);
box-shadow: 0 0 0 1px rgba(108, 246, 255, 0.15), var(--shadow-lift);
}
.install-prompt { color: var(--user); font-weight: 700; }
.install code { background: transparent; border: none; padding: 0; color: var(--fg-strong); overflow-x: auto; white-space: nowrap; }
.install button {
background: rgba(108, 246, 255, 0.10);
border: 1px solid rgba(108, 246, 255, 0.34);
color: var(--accent);
padding: 5px 12px;
border-radius: 5px;
font-size: 10px;
font-family: var(--font-mono);
font-weight: 700;
cursor: pointer;
letter-spacing: 0.08em;
transition: all .15s;
flex-shrink: 0;
}
.install button:hover {
background: rgba(108, 246, 255, 0.22);
color: var(--fg-strong);
box-shadow: 0 0 12px rgba(108, 246, 255, 0.4);
}
.install button.copied {
background: rgba(91, 242, 138, 0.14);
border-color: rgba(91, 242, 138, 0.5);
color: var(--success);
box-shadow: 0 0 12px rgba(91, 242, 138, 0.4);
}
.alt {
color: var(--dim);
font-size: 13px;
margin-bottom: 28px;
font-family: var(--font-mono);
}
.alt code { font-size: 12px; color: var(--fg); }
.cta-row {
display: flex; gap: 12px; flex-wrap: wrap;
}
.btn {
padding: 11px 18px;
border-radius: 8px;
border: 1px solid var(--line);
font-size: 13px;
font-weight: 700;
font-family: var(--font-mono);
letter-spacing: 0.02em;
color: var(--fg);
background: var(--bg-1);
cursor: pointer;
transition: all .18s;
display: inline-flex; align-items: center; gap: 8px;
}
.btn small {
font-weight: 500;
color: var(--dim);
font-size: 10px;
letter-spacing: 0.06em;
}
.btn:hover {
background: var(--bg-2);
border-color: var(--accent);
color: var(--fg-strong);
transform: translateY(-1px);
}
.btn:hover small { color: var(--fg); }
.btn.primary {
background: linear-gradient(135deg, var(--accent) 0%, var(--user) 100%);
border: none;
color: var(--accent-fg);
box-shadow: 0 0 24px rgba(108, 246, 255, 0.35);
}
.btn.primary small { color: rgba(0, 24, 32, 0.65); }
.btn.primary:hover {
filter: brightness(1.1);
box-shadow: 0 0 32px rgba(108, 246, 255, 0.55);
color: var(--accent-fg);
}
.btn.primary:hover small { color: rgba(0, 24, 32, 0.75); }
.btn .arr { transition: transform .18s; }
.btn:hover .arr { transform: translateX(3px); }
/* ============ Hero screenshot frame ============ */
.hero-shot { min-width: 0; }
.shot {
position: relative;
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
background: var(--bg-1);
box-shadow: var(--shadow-lift), 0 0 60px rgba(108, 246, 255, 0.10);
transition: transform .3s;
}
.shot:hover { transform: translateY(-3px); }
.shot-chrome {
display: flex; align-items: center; gap: 6px;
padding: 9px 14px;
background: var(--bg-2);
border-bottom: 1px solid var(--line);
}
.shot-chrome .tdot {
width: 10px; height: 10px; border-radius: 50%;
}
.shot-chrome .red { background: #ff5f57; }
.shot-chrome .yellow { background: #febc2e; }
.shot-chrome .green { background: #28c840; }
.shot-chrome .url {
margin-left: 14px;
font-family: var(--font-mono);
font-size: 10.5px;
color: var(--dim);
padding: 2px 10px;
border: 1px solid var(--line);
border-radius: 4px;
background: var(--bg-1);
flex: 1; max-width: 340px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.shot-body {
position: relative;
aspect-ratio: 16 / 10;
background:
linear-gradient(135deg, rgba(108, 246, 255, 0.05), rgba(158, 175, 255, 0.05)),
var(--bg-1);
}
.shot-img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Placeholder shown only when the frame is empty (no ![]()
, no