/* ==========================================================================
evortotec.eu — canonical chrome stylesheet
Self-contained: any page can this and render the site's header,
footer, and blog components correctly WITHOUT needing /styles.css.
Design DNA extracted from index.html (dark, amber-accent B2B corporate).
========================================================================== */
/* ------------------------------------------------------------------ tokens */
:root {
/* --- Required cross-pipeline tokens (cookie banner, overlays, etc.) --- */
--bg: #0e0f14; /* page background (deep charcoal-navy) */
--bg-card: #171923; /* surface / card — one level above --bg */
--bg-elevated: #1f2331; /* elevated surface (hover / active) */
--text: #e9ebf1; /* primary text on --bg */
--text-muted: #b4bacd; /* secondary / meta text */
--accent: #f4a100; /* brand amber (primary CTA) */
--accent-fg: #0a0a0a; /* readable text ON --accent (accent is bright) */
--accent-hover: #ffcd39; /* brighter gold variant for hover */
--border: #2a2e3a; /* rules / dividers */
--radius: 12px; /* default border-radius */
/* --- Legacy aliases used by the original site markup (kept for parity) - */
--panel: #171923;
--muted: #b4bacd;
--accent-2: #ffcd39;
--line: #2a2e3a;
/* --- Typography scale (mirrors index.html) --- */
--text-sm: 0.92rem;
--text-base: 1rem;
--text-md: clamp(1rem, 1.3vw, 1.15rem);
--text-lg: clamp(1.02rem, 1.5vw, 1.35rem);
--heading-xs: clamp(1.05rem, 1.8vw, 1.4rem);
--heading-sm: clamp(1.3rem, 2.5vw, 1.8rem);
--heading-md: clamp(1.6rem, 3.5vw, 2.4rem);
--heading-lg: clamp(2rem, 4.4vw, 3.2rem);
--heading-xl: clamp(2.2rem, 6vw, 4rem);
/* --- Spacing rhythm --- */
--section-pad: 4.5rem;
--container: 1120px;
}
/* -------------------------------------------------------------- reset/base */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
background: var(--bg);
color: var(--text);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
a {
color: inherit;
text-decoration: none;
}
img {
max-width: 100%;
}
.container {
width: min(var(--container), calc(100% - 2rem));
margin: 0 auto;
}
.narrow {
width: min(820px, calc(100% - 2rem));
}
/* ===================================================================== HEADER
The primary nav lives in the burger-driven off-canvas .side-menu (as on
index.html). Nav rules are scoped to their explicit classes — never bare
`nav` — so in-article