/* ============================================================= VERA STRATA — colors_and_type.css Sistema cromático y tipográfico. "Capa por capa." ============================================================= */ /* ---------- 1 · Web fonts ---------- */ /* League Spartan: self-hosted variable font (brand-supplied). K2D, Inter, JetBrains Mono: still loaded from Google Fonts — drop their .woff2 files into ./fonts/ and add @font-face here to remove the external dependency. */ @font-face { font-family: 'League Spartan'; src: url('./fonts/LeagueSpartan-VariableFont_wght.ttf') format('truetype-variations'), url('./fonts/LeagueSpartan-VariableFont_wght.ttf') format('truetype'); font-weight: 100 900; font-style: normal; font-display: swap; } @import url('https://fonts.googleapis.com/css2?family=K2D:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@300;400;500&display=swap'); /* ============================================================= 2 · COLOR TOKENS — los 7 colores del sistema ============================================================= */ :root { /* — Nivel 01 · Fondos (~71% del layout) — */ --vs-abismo: #1A1B1F; /* 45% — fondo dominante */ --vs-papel: #F2F0EB; /* 15% — fondo claro principal */ --vs-crema: #D0CFC2; /* 11% — fondo cálido secundario */ /* — Nivel 02 · Acentos cálidos (~18%) — */ --vs-terra: #B87156; /* 6% — único color de acento para CTAs/énfasis */ --vs-arena: #C9C08A; /* 12% — etiquetas, barras, indicadores */ /* — Nivel 03 · Pop de color (~17%) — */ --vs-burdeos: #6D374E; /* 8% — 1–2 palabras en titulares */ --vs-tierra: #6B3D2C; /* 9% — sellos de cierre, detalles ilustración */ /* — Stops auxiliares (derivados, NO inventar nuevos hex) — */ --vs-abismo-90: rgba(26, 27, 31, 0.90); --vs-abismo-70: rgba(26, 27, 31, 0.70); --vs-abismo-40: rgba(26, 27, 31, 0.40); --vs-abismo-12: rgba(26, 27, 31, 0.12); /* hairline border sobre claro */ --vs-abismo-06: rgba(26, 27, 31, 0.06); /* topografía sobre claro */ --vs-papel-90: rgba(242, 240, 235, 0.90); --vs-papel-60: rgba(242, 240, 235, 0.60); --vs-papel-40: rgba(242, 240, 235, 0.40); --vs-papel-16: rgba(242, 240, 235, 0.16); /* hairline sobre oscuro */ --vs-papel-08: rgba(242, 240, 235, 0.08); /* topografía sobre oscuro */ --vs-terra-60: rgba(184, 113, 86, 0.60); --vs-arena-30: rgba(201, 192, 138, 0.30); /* — Gradiente permitido: SOLO negro → gris (nunca color) — */ --vs-gradient-noir: linear-gradient(180deg, #000000 0%, #2A2B30 100%); /* ============================================================= 3 · SEMANTIC ROLES — usa estos en los componentes ============================================================= */ /* Surfaces */ --bg: var(--vs-papel); --bg-elev: #FFFFFF; --bg-inverse: var(--vs-abismo); --surface-warm: var(--vs-crema); /* Foreground (texto sobre fondos claros) */ --fg: var(--vs-abismo); --fg-muted: var(--vs-abismo-70); --fg-subtle: var(--vs-abismo-40); /* Foreground sobre Abismo */ --fg-on-dark: var(--vs-papel); --fg-on-dark-muted: var(--vs-papel-60); --fg-on-dark-subtle: var(--vs-papel-40); /* Borders — siempre hairline 1px */ --border-hair: var(--vs-abismo-12); --border-hair-dark: var(--vs-papel-16); /* Accent (único color de acento) */ --accent: var(--vs-terra); --accent-soft: var(--vs-terra-60); /* Pop (titulares, sellos — usar con escasez) */ --pop-burdeos: var(--vs-burdeos); --pop-tierra: var(--vs-tierra); /* Coordenada / margen técnico */ --coord: var(--vs-abismo-40); --coord-on-dark: var(--vs-papel-40); /* ============================================================= 4 · TYPE FAMILIES ============================================================= */ --font-display: 'League Spartan', 'Helvetica Neue', Arial, sans-serif; --font-body: 'K2D', 'Helvetica Neue', Arial, sans-serif; --font-long: 'Inter', 'Helvetica Neue', Arial, sans-serif; --font-mono: 'JetBrains Mono', 'Menlo', 'Consolas', monospace; /* ============================================================= 5 · TYPE SCALE — base 16 ============================================================= */ --fs-display-xl: clamp(56px, 8vw, 128px); /* hero statements */ --fs-display-lg: clamp(40px, 5.5vw, 88px); --fs-display-md: clamp(32px, 4vw, 64px); --fs-h1: 40px; --fs-h2: 32px; --fs-h3: 24px; --fs-h4: 20px; --fs-body-lg: 18px; --fs-body: 16px; --fs-body-sm: 14px; --fs-caption: 12px; --fs-coord: 11px; /* Line height */ --lh-tight: 1.02; /* statements en League Spartan */ --lh-snug: 1.15; --lh-normal: 1.45; /* K2D body */ --lh-long: 1.6; /* Inter long-form */ /* Letter spacing */ --ls-statement: -0.02em; /* League Spartan en grande */ --ls-label: 0.08em; /* UPPERCASE small labels */ --ls-spaced: 0.22em; /* PROPÓSITO · section opener (tighter than v1) */ --ls-mono: 0.02em; /* ============================================================= 6 · SPACING — base 8 ============================================================= */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px; /* ============================================================= 7 · RADII — pequeños o cero. Nunca pills. ============================================================= */ --r-0: 0px; /* default — documentos, hero */ --r-1: 2px; /* inputs, chips técnicos */ --r-2: 4px; --r-3: 8px; /* máximo permitido */ /* ============================================================= 8 · SHADOWS — uso muy puntual. Preferir hairlines. ============================================================= */ --shadow-none: none; --shadow-rombo: 0 24px 80px rgba(26, 27, 31, 0.18); /* solo para el rombo hero */ --shadow-press: 0 2px 6px rgba(26, 27, 31, 0.10); /* botones en :active */ /* ============================================================= 9 · MOTION — calma estratigráfica ============================================================= */ --ease-vs: cubic-bezier(.22, .61, .36, 1); --dur-fast: 120ms; --dur-base: 320ms; --dur-slow: 640ms; } /* ============================================================= 10 · DARK-CONTEXT REMAP Apply on any section that uses Abismo as background. ============================================================= */ .vs-on-dark, [data-vs-surface="abismo"] { --bg: var(--vs-abismo); --bg-elev: #232428; --bg-inverse: var(--vs-papel); --fg: var(--vs-papel); --fg-muted: var(--vs-papel-60); --fg-subtle: var(--vs-papel-40); --border-hair: var(--vs-papel-16); --coord: var(--vs-papel-40); color-scheme: dark; } /* ============================================================= 11 · SEMANTIC TYPE STYLES — apply as classes ============================================================= */ /* Hero statement — League Spartan, super tight, una sola línea de aire. Pesos: titulares en 300 (Light), nunca por encima de 500. */ .vs-statement { font-family: var(--font-display); font-weight: 300; font-size: var(--fs-display-lg); line-height: var(--lh-tight); letter-spacing: var(--ls-statement); text-wrap: balance; color: var(--fg); } /* Headlines — cap at 500. */ .vs-h1 { font-family: var(--font-display); font-weight: 300; font-size: var(--fs-h1); line-height: var(--lh-snug); letter-spacing: var(--ls-statement); } .vs-h2 { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: var(--ls-statement); } .vs-h3 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h3); line-height: var(--lh-snug); } .vs-h4 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h4); line-height: var(--lh-snug); } /* Section label — spaced caps, e.g. P R O P Ó S I T O */ .vs-label-spaced { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: var(--ls-spaced); color: var(--fg-muted); } /* Standard label — uppercase, tight tracking. Cap 500. */ .vs-label { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: var(--ls-label); color: var(--fg-muted); } /* Body — K2D for short, expressive copy */ .vs-body, p { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--fg); } .vs-body-lg { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-body-lg); line-height: var(--lh-normal); } .vs-body-sm { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-body-sm); line-height: var(--lh-normal); } /* Long-form paragraphs — Inter, comfortable for sustained reading */ .vs-prose { font-family: var(--font-long); font-weight: 400; font-size: var(--fs-body); line-height: var(--lh-long); color: var(--fg); max-width: 64ch; text-wrap: pretty; } /* Numbers / metrics — mono, display-size only */ .vs-metric { font-family: var(--font-mono); font-weight: 300; font-size: var(--fs-display-md); line-height: var(--lh-tight); letter-spacing: var(--ls-mono); font-variant-numeric: tabular-nums; color: var(--fg); } /* Coordinates — bottom-of-margin technical mark */ .vs-coord { font-family: var(--font-mono); font-weight: 400; font-size: var(--fs-coord); letter-spacing: var(--ls-mono); color: var(--coord); font-variant-numeric: tabular-nums; } /* Pop word — usar para 1-2 palabras dentro de un titular */ .vs-pop-burdeos { color: var(--pop-burdeos); } .vs-pop-tierra { color: var(--pop-tierra); } /* Caption — small auxiliary text */ .vs-caption { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-caption); line-height: var(--lh-normal); color: var(--fg-muted); } /* ============================================================= 12 · BASE RESET — opcional. Aplica en documentos VS puros. ============================================================= */ .vs-reset { margin: 0; padding: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-normal); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .vs-reset *, .vs-reset *::before, .vs-reset *::after { box-sizing: border-box; }