/* ========================================================================== qcrew design system -------------------------------------------------------------------------- One file, no build step, no npm. Everything is driven by custom properties so a rebrand is a change to :root and nothing else. Dark is the default look. Light is a full re-declaration of the same tokens, applied either by the OS setting or by an explicit data-theme on . ========================================================================== */ /* --------------------------------------------------------------- 1. Tokens */ :root { /* One accent, two neighbouring stops. A three-stop rainbow reads as noise at large sizes and fights the content; staying inside a single hue family keeps it modern without shouting. Used on the wordmark, primary buttons and active states — never on body text. */ --brand-1: #5566f0; --brand-2: #7d5cf0; --brand-3: #5566f0; --gradient: linear-gradient(135deg, var(--brand-1) 0%, var(--brand-2) 100%); --gradient-soft: linear-gradient(135deg, rgb(85 102 240 / 10%), rgb(125 92 240 / 7%)); /* Surfaces, dark by default. */ --bg: #0d0f14; --bg-elevated: #14171e; --surface: #171a22; --surface-2: #1d212b; --surface-hover: #232833; --border: #262b36; --border-strong: #333947; --text: #eef0f4; --text-muted: #9aa1b1; --text-faint: #6a7183; --ok: #34d399; --warn: #fbbf24; --bad: #fb7185; /* Alarma de marca, para el nombre del tramadómetro. NO es un tono de estado: `--bad`/`--warn` van en par con su clase y no se usan de adorno. */ --alarm: linear-gradient(120deg, #fb7185 0%, #fb923c 55%, #fbbf24 100%); --info: #60a5fa; /* Type. One family, three roles. */ --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --step--1: clamp(0.78rem, 0.76rem + 0.1vw, 0.84rem); --step-0: clamp(0.94rem, 0.9rem + 0.2vw, 1rem); --step-1: clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem); --step-2: clamp(1.5rem, 1.3rem + 0.9vw, 2rem); --step-3: clamp(2rem, 1.6rem + 2vw, 3.25rem); --step-4: clamp(2.6rem, 1.9rem + 3.4vw, 4.5rem); --radius-sm: 8px; --radius: 14px; --radius-lg: 22px; --radius-full: 999px; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4.5rem; --shadow-sm: 0 1px 2px rgb(0 0 0 / 40%); --shadow: 0 8px 24px -8px rgb(0 0 0 / 55%); --shadow-lg: 0 24px 60px -20px rgb(0 0 0 / 70%); --glow: 0 0 0 1px rgb(85 102 240 / 28%), 0 6px 24px -8px rgb(85 102 240 / 32%); --ease: cubic-bezier(0.22, 1, 0.36, 1); --speed: 180ms; --shell: 1200px; } /* Light theme. Redeclared in full so no colour is left borrowing a dark value. */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { /* Más oscura: el rosado y el ámbar del oscuro no llegan a 3:1 sobre blanco. */ --alarm: linear-gradient(120deg, #e11d48 0%, #ea580c 55%, #d97706 100%); --bg: #fbfbfd; --bg-elevated: #ffffff; --surface: #ffffff; --surface-2: #f4f4f8; --surface-hover: #eeeef4; --border: #e4e4ed; --border-strong: #d0d0dd; --text: #14141c; --text-muted: #5c5c72; --text-faint: #8e8ea3; --shadow-sm: 0 1px 2px rgb(20 20 28 / 6%); --shadow: 0 8px 24px -10px rgb(20 20 28 / 14%); --shadow-lg: 0 24px 60px -24px rgb(20 20 28 / 20%); --glow: 0 0 0 1px rgb(85 102 240 / 20%), 0 6px 22px -10px rgb(85 102 240 / 26%); } } :root[data-theme="light"] { --alarm: linear-gradient(120deg, #e11d48 0%, #ea580c 55%, #d97706 100%); --bg: #fbfbfd; --bg-elevated: #ffffff; --surface: #ffffff; --surface-2: #f4f4f8; --surface-hover: #eeeef4; --border: #e4e4ed; --border-strong: #d0d0dd; --text: #14141c; --text-muted: #5c5c72; --text-faint: #8e8ea3; --shadow-sm: 0 1px 2px rgb(20 20 28 / 6%); --shadow: 0 8px 24px -10px rgb(20 20 28 / 14%); --shadow-lg: 0 24px 60px -24px rgb(20 20 28 / 20%); --glow: 0 0 0 1px rgb(85 102 240 / 20%), 0 6px 22px -10px rgb(85 102 240 / 26%); } /* ---------------------------------------------------------------- 2. Reset */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { color-scheme: dark light; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { background: var(--bg); color: var(--text); font-family: var(--font); font-size: var(--step-0); line-height: 1.6; min-height: 100vh; /* Para los banners a todo el ancho (.hero-xl): se salen del shell con margenes en `vw`, y `vw` cuenta la barra de scroll. `clip` recorta ese sobrante sin crear contenedor de scroll — con `hidden` el header sticky dejaria de pegarse. */ overflow-x: clip; -webkit-font-smoothing: antialiased; display: flex; flex-direction: column; } /* A single soft light source behind everything. Fixed so it does not parallax against the content while scrolling. */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(64rem 42rem at 14% -12%, rgb(85 102 240 / 7%), transparent 62%); } img, svg, video { display: block; max-width: 100%; height: auto; } /* `hidden` tiene que significar oculto, siempre. El navegador trae `[hidden] { display: none }`, pero cualquier clase nuestra que declare un display le gana: las dos tienen la misma especificidad y las reglas del autor van por encima de las del navegador. `.alert` declara `display: flex`, asi que un `