/* ==========================================================================
nebway brand stylesheet
One typeface (Sora) for everything; JetBrains Mono for code only.
Load the fonts in your before this file:
Light theme is the default. For dark mode add data-theme="dark" to ,
or copy the dark block into @media (prefers-color-scheme: dark) to follow
the visitor's system setting.
========================================================================== */
/* 1. Tokens ---------------------------------------------------------------- */
:root {
/* Brand */
--violet: #5A52B5; /* wordmark colour: links, primary buttons, eyebrows */
--violet-hover: #4A43A0; /* hover and pressed states of violet */
--violet-soft: #8B83D9; /* logo border, decorative lines, icons; never text */
--violet-tint: #F1F0FB; /* badges, inline code, highlighted sections */
--blue: #00A0EB; /* logo disc, illustrations, icons; never text */
--on-violet: #FFFFFF; /* text on a violet fill */
/* Neutrals: ink with a violet bias, never flat black or grey */
--ink: #24223F; /* headings and body text */
--ink-soft: #5E5B78; /* secondary text, captions, lead paragraphs */
--line: #E4E2EF; /* dividers, card and input borders */
--bg: #FFFFFF; /* page background */
--bg-alt: #F8F7FC; /* alternate section background */
--code-bg: #1E1C33; /* code block background (dark in both themes) */
--code-ink: #E8E6F5; /* code block text */
/* Type */
--font-sans: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Menlo, monospace;
/* Spacing (4px base) */
--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
--space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px;
--space-24: 96px;
/* Radius */
--radius-sm: 5px; /* inline code, small tags */
--radius-md: 10px; /* buttons, inputs */
--radius-lg: 12px; /* cards, code blocks */
--radius-full: 9999px; /* pills, avatars */
}
[data-theme="dark"] {
--violet: #9C95E6;
--violet-hover: #B3AEEE;
--violet-soft: #8B83D9;
--violet-tint: #2E2A52;
--blue: #33B5F0;
--on-violet: #13121F;
--ink: #ECEBF5;
--ink-soft: #A9A6C2;
--line: #2F2C4A;
--bg: #13121F;
--bg-alt: #1B1930;
--code-bg: #0D0C17;
--code-ink: #E8E6F5;
color-scheme: dark;
}
/* 2. Base ------------------------------------------------------------------ */
body {
margin: 0;
font-family: var(--font-sans);
font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem); /* 15 to 17px; Sora runs large */
font-weight: 400;
line-height: 1.75;
letter-spacing: -0.005em;
color: var(--ink);
background: var(--bg);
-webkit-font-smoothing: antialiased;
}
p, li { max-width: 64ch; }
p { margin: 0; }
p + p { margin-top: 1em; }
strong, b { font-weight: 600; }
/* 3. Headings -------------------------------------------------------------- */
h1, h2, h3, h4 {
font-family: var(--font-sans);
color: var(--ink);
text-wrap: balance;
margin: 0 0 0.5em;
}
h1 { font-size: clamp(2.5rem, 1.8rem + 3.5vw, 4.5rem); font-weight: 600; line-height: 1.05; letter-spacing: -0.035em; }
h2 { font-size: clamp(1.875rem, 1.5rem + 1.8vw, 2.75rem); font-weight: 600; line-height: 1.15; letter-spacing: -0.025em; }
h3 { font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem); font-weight: 500; line-height: 1.25; letter-spacing: -0.015em; }
h4 { font-size: 1.125rem; font-weight: 500; line-height: 1.4; letter-spacing: -0.01em; }
/* 4. Text styles ----------------------------------------------------------- */
.eyebrow {
display: block;
font-size: 0.75rem;
font-weight: 600;
line-height: 1.4;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--violet);
margin-bottom: var(--space-3);
}
.lead {
font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.25rem);
font-weight: 300;
line-height: 1.65;
color: var(--ink-soft);
}
small, .caption {
font-size: 0.8125rem;
line-height: 1.6;
color: var(--ink-soft);
}
a {
color: var(--violet);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.2em;
}
a:hover { color: var(--violet-hover); text-decoration-thickness: 2px; }
a:focus-visible, .btn:focus-visible {
outline: 2px solid var(--violet);
outline-offset: 3px;
border-radius: var(--radius-sm);
}
nav a {
font-weight: 500;
font-size: 0.9375rem;
text-decoration: none;
color: var(--ink);
}
nav a:hover { color: var(--violet); }
/* 5. Buttons --------------------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: 0.8em 1.4em;
border: 1px solid transparent;
border-radius: var(--radius-md);
font-family: var(--font-sans);
font-size: 0.9375rem;
font-weight: 500;
line-height: 1.2;
letter-spacing: -0.005em;
text-decoration: none;
cursor: pointer;
transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.btn-primary { background: var(--violet); color: var(--on-violet); }
.btn-primary:hover { background: var(--violet-hover); color: var(--on-violet); }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-secondary:hover { border-color: var(--violet-soft); color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
.btn { transition: none; }
}
/* 6. Code ------------------------------------------------------------------ */
code, kbd, pre, samp {
font-family: var(--font-mono);
font-size: 0.875em;
letter-spacing: 0;
}
:not(pre) > code {
background: var(--violet-tint);
color: var(--violet-hover);
padding: 0.15em 0.4em;
border-radius: var(--radius-sm);
}
pre {
background: var(--code-bg);
color: var(--code-ink);
padding: 1.25em 1.5em;
border-radius: var(--radius-lg);
line-height: 1.6;
overflow-x: auto;
}
pre code { background: none; color: inherit; padding: 0; font-size: inherit; }