/* ═══════════════════════════════════════════════════════════
MAXFY — style.css
Design inspired by nadanada.me:
· Warm dark / soft light backgrounds with Bitcoin orange accent
· Syne display font (bold, tight tracking)
· Instrument Sans body font (light, clean)
· Minimal surfaces, thin borders, generous whitespace
Theme system:
· Dark mode is the DEFAULT (variables defined on :root)
· Light mode overrides variables when body.light is active
· The sliding toggle adds/removes the .light class on
Layout:
· .top — sticky primary header (logo + controls)
· .subnav — sticky secondary nav bar (site links)
· .main — scrollable content
· .bottom — footer
═══════════════════════════════════════════════════════════ */
/* ─────────────────────────────────────────────────────────
FONTS — Self-hosted (Tor Browser compatible)
Replaces Google Fonts external dependency.
───────────────────────────────────────────────────────── */
@font-face {
font-family: 'Syne';
src: url('/fontz/Syne-Bold.woff2') format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Syne';
src: url('/fontz/Syne-ExtraBold.woff2') format('woff2');
font-weight: 800;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Instrument Sans';
src: url('/fontz/InstrumentSans-Regular.woff2') format('woff2');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Instrument Sans';
src: url('/fontz/InstrumentSans-Regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Instrument Sans';
src: url('/fontz/InstrumentSans-Medium.woff2') format('woff2');
font-weight: 500;
font-style: normal;
font-display: swap;
}
/* ─────────────────────────────────────────────────────────
RESET
Removes browser default margins, padding, and box-sizing
quirks so we start from a consistent baseline.
───────────────────────────────────────────────────────── */
*, *::before, *::after {
box-sizing: border-box;
/* border-box: padding and border are included in width/height.
Much more predictable than the default content-box model. */
margin: 0;
padding: 0;
}
/* ─────────────────────────────────────────────────────────
CSS CUSTOM PROPERTIES (Design Tokens)
Defined on :root so they are globally available.
Dark theme values are the defaults.
Light theme overrides them in the body.light block below.
───────────────────────────────────────────────────────── */
:root {
/* ── Colours ─────────────────────────────────── */
--bg: #1c1917;
/* Main background. Warm dark brown-grey — softer than pure black. */
--surface: #26231f;
/* Card/panel background. Slightly lighter — creates subtle depth. */
--border: #38342e;
/* Separator lines and outlines. Warm-tinted, visible but quiet. */
--ink: #e8e0d5;
/* Primary text. Warm off-white — easier on eyes than pure white. */
--muted: #7a7065;
/* Secondary text. Warm mid-grey — recedes behind primary content. */
--accent: #f7931a;
/* Bitcoin orange. Used for logo, CTAs, icons, italic emphasis. */
--accent-hover: #e07d0a;
/* Darker orange for hover states — tactile feedback. */
/* ── Typography ──────────────────────────────── */
--font-head: 'Syne', sans-serif;
/* Bold geometric display font. sans-serif fallback if fonts fail. */
--font-body: 'Instrument Sans', sans-serif;
/* Clean light-weight body font. */
/* ── Layout ──────────────────────────────────── */
--pad-x: clamp(1.25rem, 5vw, 3.5rem);
/* Responsive horizontal padding.
clamp(min, preferred, max) — scales with viewport, never exceeds bounds. */
--max-w: 1000px;
/* Maximum content width — keeps lines readable on wide monitors. */
--radius: 5px;
/* Border radius — modern and clean, not pill-shaped, not square. */
--header-h: 40px;
/* Height of the sticky primary header (.top). */
--subnav-h: 20px;
/* Height of the sticky secondary nav bar (.subnav).
Shorter than the header — it is a subordinate element. */
--footer-h: 40px;
/* Height of the footer. */
/* ── Transitions ─────────────────────────────── */
--transition-theme: background 0.3s ease, color 0.25s ease, border-color 0.25s ease;
/* Applied to elements that change colour on theme switch.
0.3s ease: smooth without being sluggish. */
}
/* ─────────────────────────────────────────────────────────
LIGHT THEME — Variable Overrides
Applied when JavaScript adds class="light" to .
Only variables that change are listed — the rest inherit
from :root automatically.
───────────────────────────────────────────────────────── */
body.light {
--bg: #f5e6d3; /* Warm parchment — off-white, not stark */
--surface: #e6dfd6; /* Slightly darker card surface */
--border: #cec6bb; /* Warm mid-tone border */
--ink: #1e1a16; /* Warm near-black text */
--muted: #8a7f74; /* Warm mid-grey secondary text */
}
/* ─────────────────────────────────────────────────────────
BASE STYLES
───────────────────────────────────────────────────────── */
html {
scroll-behavior: smooth;
/* Smooth scroll when clicking anchor links. */
}
body {
background: var(--bg);
color: var(--ink);
font-family: var(--font-body);
font-weight: 300;
font-size: 1rem;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
/* antialiased: thinner, sharper font rendering on macOS/iOS. */
display: flex;
flex-direction: column;
/* Flexbox column: header, subnav, main, footer stack vertically. */
min-height: 100dvh;
/* 100dvh = dynamic viewport height — accounts for mobile browser chrome. */
transition: var(--transition-theme);
/* Smooth colour change when switching themes. */
}
a {
color: inherit;
text-decoration: none;
/* Links inherit colour from parent; no underline by default. */
}
ul {
list-style: none;
/* Remove default bullet points. */
}
/* ─────────────────────────────────────────────────────────
VISUALLY HIDDEN
Hides elements visually while keeping them accessible
to screen readers and search engines.
───────────────────────────────────────────────────────── */
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
/* ─────────────────────────────────────────────────────────
BUTTONS
.btn is the base. Variant classes modify specific properties.
DRY pattern — no repeated declarations.
───────────────────────────────────────────────────────── */
.btn {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-family: var(--font-body);
font-size: 0.82rem;
font-weight: 400;
padding: 0.48rem 1rem;
border-radius: var(--radius);
border: 1px solid var(--border);
color: var(--muted);
cursor: pointer;
white-space: nowrap;
transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.btn--lg {
font-size: 0.9rem;
padding: 0.7rem 1.5rem;
/* Larger hero CTA variant. */
}
.btn--accent {
background: var(--accent);
color: #1c1917; /* Dark text on orange — always readable */
border-color: var(--accent);
font-weight: 500;
}
.btn--accent:hover {
background: var(--accent-hover);
border-color: var(--accent-hover);
}
.btn--outline {
color: var(--ink);
border-color: var(--border);
}
.btn--outline:hover {
border-color: var(--ink);
}
.btn--ghost {
background: transparent;
color: var(--muted);
border-color: var(--border);
}
.btn--ghost:hover {
color: var(--ink);
border-color: var(--border);
}
/* ─────────────────────────────────────────────────────────
THEME TOGGLE — SLIDING SWITCH
A hidden + a styled