/* =========================================================
ORBOT249 — DESIGN TOKENS + BASE STYLES
v1.0 · 2026
=========================================================
This file is the design language of orbot249.it.
Drop it into the of every page:
The site root should declare:
Toggle to light mode by setting data-theme="light" on .
========================================================= */
:root {
/* ── Palette · Ink (default dark) ───────────────────────── */
--bg: #0A0B0D;
--bg-2: #101216;
--surface: #15171A;
--surface-2: #1C1F24;
--line: #24272C;
--line-2: #2E3239;
--fg: #E8E4DC;
--fg-2: #B6B2A8;
--muted: #6B6F76;
--muted-2: #4A4D53;
/* Accent · Signal amber (fosforo) */
--accent: #E8B547;
--accent-ink: #1A1408;
--accent-soft: rgba(232, 181, 71, 0.12);
/* ── State colors · the 4 message-evolution states ──────── */
--st-grezzo: #6B6F76; /* gray · just published */
--st-osservato: #5BA3E8; /* blue · crossed visibility threshold */
--st-revisionato: #E8B547; /* amber · author revised */
--st-validato: #6FCF97; /* green · expert-validated */
--st-failed: #C56E6E; /* red · failed selection (rare) */
/* ── Typography ─────────────────────────────────────────── */
--font-display: "Geist", ui-sans-serif, system-ui, sans-serif;
--font-body: "Geist", ui-sans-serif, system-ui, sans-serif;
--font-serif: "Instrument Serif", "Times New Roman", serif;
--font-mono: "JetBrains Mono", ui-monospace, "Menlo", monospace;
/* ── Spacing scale (8px base) ───────────────────────────── */
--s-1: 4px;
--s-2: 8px;
--s-3: 16px;
--s-4: 24px;
--s-5: 32px;
--s-6: 48px;
--s-7: 64px;
--s-8: 96px;
--gutter: 32px;
--section-y: 120px;
/* ── Radii ──────────────────────────────────────────────── */
--radius: 4px;
--radius-lg: 8px;
--radius-pill: 999px;
color-scheme: dark;
}
/* ── Light theme ──────────────────────────────────────────── */
[data-theme="light"] {
--bg: #F4F1EA;
--bg-2: #ECE8E0;
--surface: #FFFFFF;
--surface-2: #F8F5EE;
--line: #D8D3C8;
--line-2: #C5BFAF;
--fg: #15171A;
--fg-2: #3D4147;
--muted: #6B6F76;
--muted-2: #97999E;
--accent: #B8861E;
--accent-ink: #FFFFFF;
--accent-soft: rgba(184, 134, 30, 0.10);
color-scheme: light;
}
/* ── Reset (minimal, additive) ────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
background: var(--bg);
color: var(--fg);
font-family: var(--font-body);
font-feature-settings: "ss01", "cv11";
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
::selection { background: var(--accent); color: var(--accent-ink); }
/* ── Scrollbar ────────────────────────────────────────────── */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--line-2); border: 3px solid var(--bg); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }
/* ── Layout shell ─────────────────────────────────────────── */
.shell {
width: 100%;
max-width: 1400px;
margin: 0 auto;
padding: 0 var(--gutter);
}
.section {
padding: var(--section-y) 0;
border-top: 1px solid var(--line);
}
/* =========================================================
TYPOGRAPHY UTILITIES
========================================================= */
.t-display-xl {
font-family: var(--font-display);
font-size: clamp(56px, 11vw, 168px);
line-height: 0.9;
letter-spacing: -0.04em;
font-weight: 500;
}
.t-display-l {
font-family: var(--font-display);
font-size: clamp(36px, 5vw, 64px);
line-height: 0.95;
letter-spacing: -0.025em;
font-weight: 500;
}
.t-display-m {
font-family: var(--font-display);
font-size: 28px;
letter-spacing: -0.02em;
font-weight: 500;
}
.t-body-l { font-size: 18px; line-height: 1.45; }
.t-body { font-size: 16px; line-height: 1.5; }
.t-body-s { font-size: 14px; line-height: 1.5; }
.t-mono-label {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--muted);
}
.t-mono-meta {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.05em;
color: var(--muted);
}
.t-serif-accent {
font-family: var(--font-serif);
font-style: italic;
font-weight: 400;
color: var(--accent);
letter-spacing: -0.01em;
}
/* Convenience colors */
.muted { color: var(--muted); }
.fg-2 { color: var(--fg-2); }
.accent { color: var(--accent); }
/* =========================================================
BUTTONS
========================================================= */
.btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 22px;
font-family: var(--font-body);
font-size: 14px;
font-weight: 500;
letter-spacing: -0.005em;
border-radius: var(--radius-pill);
border: 1px solid transparent;
cursor: pointer;
transition: transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
text-decoration: none;
white-space: nowrap;
}
.btn-primary {
background: var(--accent);
color: var(--accent-ink);
}
.btn-primary:hover { transform: translateY(-1px); }
.btn-ghost {
background: transparent;
color: var(--fg);
border-color: var(--line-2);
}
.btn-ghost:hover { border-color: var(--fg); }
/* =========================================================
STATE BADGES (the 4 evolution states)
========================================================= */
.state-badge {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-mono);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 5px 10px;
border-radius: var(--radius-pill);
border: 1px solid currentColor;
background: transparent;
}
.state-badge .dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
}
.state-grezzo { color: var(--st-grezzo); }
.state-osservato { color: var(--st-osservato); }
.state-revisionato { color: var(--st-revisionato); }
.state-validato { color: var(--st-validato); }
.state-failed { color: var(--st-failed); }
/* =========================================================
CARDS + TICK ORNAMENTS
========================================================= */
.card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 28px;
position: relative;
}
/* Telemetry-style corner ticks. Wrap an element in .tick-frame
and add two empty spans inside:
— the other two corners use ::before/::after. */
.tick-frame { position: relative; }
.tick-frame::before,
.tick-frame::after,
.tick-frame > .tick-tl,
.tick-frame > .tick-bl {
content: "";
position: absolute;
width: 12px;
height: 12px;
border: 1px solid var(--accent);
}
.tick-frame::before { top: -1px; right: -1px; border-left: none; border-bottom: none; }
.tick-frame::after { bottom: -1px; right: -1px; border-left: none; border-top: none; }
.tick-frame > .tick-tl { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.tick-frame > .tick-bl { bottom: -1px; left: -1px; border-right: none; border-top: none; }
/* =========================================================
SIGNAL ID + LIVE DOT
========================================================= */
.signal-id {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.05em;
color: var(--muted);
}
.live-dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--accent);
animation: orb-pulse 1.8s ease-in-out infinite;
box-shadow: 0 0 0 3px var(--accent-soft);
}
@keyframes orb-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.4; transform: scale(0.85); }
}
/* =========================================================
NAVBAR (sticky)
========================================================= */
.nav {
display: block !important;
position: sticky;
top: 0;
z-index: 30;
background: rgba(10, 11, 13, 0.88);
background: color-mix(in oklab, var(--bg) 88%, transparent);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid var(--line);
transition: background .3s ease, border-color .3s ease;
font-family: var(--font-display);
}
[data-theme="light"] .nav {
background: rgba(244, 241, 234, 0.92);
background: color-mix(in oklab, var(--bg) 92%, transparent);
}
.nav-inner {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 0;
gap: 24px;
}
.nav-logo {
display: inline-flex;
align-items: center;
gap: 10px;
text-decoration: none;
color: var(--fg);
font-family: var(--font-display);
font-weight: 600;
letter-spacing: -0.01em;
font-size: 16px;
}
.nav-logo .num { color: var(--accent); }
.nav-links {
display: flex;
align-items: center;
gap: 4px;
}
.nav-links a {
font-family: var(--font-display);
font-size: 13px;
color: var(--fg-2);
text-decoration: none;
padding: 8px 12px;
border-radius: var(--radius);
transition: color .2s, background .2s;
}
.nav-links a:hover { color: var(--fg); background: var(--surface); }
@media (max-width: 880px) { .nav-links { display: none; } }
.nav-inner {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 0;
gap: 24px;
}
.nav-logo {
display: inline-flex;
align-items: center;
gap: 10px;
text-decoration: none;
color: var(--fg);
font-family: var(--font-display);
font-weight: 600;
letter-spacing: -0.01em;
font-size: 16px;
}
.nav-logo .num { color: var(--accent); }
.nav-links {
display: flex;
align-items: center;
gap: 4px;
}
.nav-links a {
font-size: 13px;
color: var(--fg-2);
text-decoration: none;
padding: 8px 12px;
border-radius: var(--radius);
transition: color .2s, background .2s;
}
.nav-links a:hover { color: var(--fg); background: var(--surface); }
@media (max-width: 880px) { .nav-links { display: none; } }
/* =========================================================
HERO
========================================================= */
.hero {
position: relative;
padding: clamp(80px, 14vh, 160px) 0 80px;
overflow: hidden;
isolation: isolate;
}
.hero-pretitle {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 32px;
display: flex;
align-items: center;
gap: 12px;
}
.hero-title {
font-family: var(--font-display);
font-size: clamp(56px, 11vw, 168px);
line-height: 0.9;
letter-spacing: -0.04em;
margin: 0;
font-weight: 500;
}
.hero-title em {
font-family: var(--font-serif);
font-style: italic;
font-weight: 400;
letter-spacing: -0.015em;
color: var(--accent);
}
.hero-sub {
font-size: clamp(18px, 1.6vw, 22px);
line-height: 1.4;
color: var(--fg-2);
max-width: 52ch;
margin: 40px 0 0;
text-wrap: pretty;
}
.hero-cta-row {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: 44px;
align-items: center;
}
.hero-orbit {
position: absolute;
right: -10%;
top: 10%;
width: 600px;
height: 600px;
pointer-events: none;
opacity: 0.6;
}
/* =========================================================
TELEMETRY STRIP (key metrics)
========================================================= */
.telemetry-strip {
display: grid;
grid-template-columns: repeat(4, 1fr);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
margin-top: 80px;
}
.telemetry-cell {
padding: 24px 20px;
border-right: 1px solid var(--line);
}
.telemetry-cell:last-child { border-right: none; }
.telemetry-cell .num {
font-family: var(--font-display);
font-size: 36px;
letter-spacing: -0.03em;
display: block;
margin-bottom: 6px;
}
.telemetry-cell .lbl {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--muted);
}
@media (max-width: 760px) {
.telemetry-strip { grid-template-columns: repeat(2, 1fr); }
.telemetry-cell:nth-child(2) { border-right: none; }
.telemetry-cell:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
/* =========================================================
STATES RAIL (how it works)
========================================================= */
.states-rail {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
background: transparent;
border: 1px solid var(--line);
border-radius: var(--radius);
overflow: hidden;
}
.state-cell {
background: var(--surface);
border-right: 1px solid var(--line);}
.state-cell:last-child { border-right: none; }
.state-cell {
padding: 28px;
display: flex;
flex-direction: column;
gap: 18px;
min-height: 280px;
}
.state-cell .step-num {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.12em;
color: var(--muted);
}
.state-cell h4 {
font-family: var(--font-display);
font-size: 22px;
letter-spacing: -0.02em;
margin: 0;
font-weight: 500;
}
.state-cell p {
font-size: 13px;
line-height: 1.5;
color: var(--fg-2);
margin: 0;
}
@media (max-width: 880px) { .states-rail { grid-template-columns: 1fr; } }
/* =========================================================
SIGNAL PREVIEW CARD (used in hero + board feed)
========================================================= */
.signal-card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
overflow: hidden;
position: relative;
}
.signal-card .head {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 24px;
border-bottom: 1px solid var(--line);
gap: 16px;
}
.signal-card .body {
padding: 28px 24px;
}
.signal-card .body p {
font-family: var(--font-display);
font-size: 22px;
line-height: 1.35;
letter-spacing: -0.015em;
margin: 0;
color: var(--fg);
}
.signal-card .contributions {
margin-top: 22px;
display: flex;
flex-wrap: wrap;
gap: 20px;
font-family: var(--font-mono);
font-size: 11px;
color: var(--muted);
}
.signal-card .foot {
display: flex; justify-content: space-between;
padding: 12px 24px;
border-top: 1px solid var(--line);
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--muted);
}
/* =========================================================
USP GRID
========================================================= */
.usp-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
background: transparent;
border: 1px solid var(--line);
}
.usp-cell {
background: var(--bg);
padding: 32px 28px;
min-height: 220px;
display: flex;
flex-direction: column;
border-right: 1px solid var(--line);
}
.usp-cell:last-child { border-right: none; }
.usp-cell .ix {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.12em;
color: var(--accent);
margin-bottom: 24px;
}
.usp-cell h4 {
font-family: var(--font-display);
font-size: 22px;
letter-spacing: -0.02em;
margin: 0 0 12px;
font-weight: 500;
}
.usp-cell p {
font-size: 14px;
line-height: 1.5;
color: var(--fg-2);
margin: 0;
}
@media (max-width: 880px) { .usp-grid { grid-template-columns: 1fr; } }
/* =========================================================
FOOTER
========================================================= */
.footer {
border-top: 1px solid var(--line);
padding: 60px 0 40px;
}
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1.5fr;
gap: 48px;
margin-bottom: 56px;
}
.footer h5 {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted);
margin: 0 0 18px;
}
.footer a {
display: block;
font-size: 14px;
color: var(--fg-2);
text-decoration: none;
padding: 6px 0;
transition: color .2s;
}
.footer a:hover { color: var(--fg); }
.newsletter {
display: flex;
border: 1px solid var(--line-2);
border-radius: var(--radius-pill);
background: var(--surface);
overflow: hidden;
margin-top: 14px;
}
.newsletter input {
flex: 1;
background: transparent;
border: none;
color: var(--fg);
font-family: var(--font-body);
font-size: 14px;
padding: 12px 18px;
outline: none;
}
.newsletter input::placeholder { color: var(--muted); }
.newsletter button {
background: var(--accent);
color: var(--accent-ink);
border: none;
font-family: var(--font-body);
font-size: 13px;
font-weight: 500;
padding: 0 22px;
cursor: pointer;
}
@media (max-width: 880px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
/* =========================================================
REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
/* =========================================================
COMPATIBILITY ALIASES — old variable names still work
========================================================= */
:root {
--text: var(--fg);
--text-muted: var(--muted);
--bg2: var(--bg-2);
--bg3: var(--surface);
--font: var(--font-body);
--mono: var(--font-mono);
--accent2: #818cf8;
--accent3: var(--st-validato);
--danger: var(--st-failed);
}