/* ================================================================= Habla — base stylesheet (Chilean reskin) Palette: --cielo: #1E3A8C (Chilean flag blue; hero / primary surfaces) --rojo: #C8102E (Chilean red; accents, ¡!, active states) --nieve: #F8F6F0 (warm white; body bg) --carbon: #1A1614 (near-black; body text + deep dividers) Typography: system sans for UI, Fraunces serif for wordmark + display. ================================================================= */ :root { /* Canonical Chilean palette */ --cielo: #1E3A8C; --rojo: #C8102E; --nieve: #F8F6F0; --carbon: #1A1614; /* Derived tints */ --cielo-hot: #2D4FB3; --cielo-deep: #142966; --cielo-soft: rgba(30, 58, 140, 0.12); --rojo-hot: #E63B54; --rojo-soft: rgba(200, 16, 46, 0.14); --nieve-2: rgba(248, 246, 240, 0.80); --nieve-3: rgba(248, 246, 240, 0.52); --nieve-4: rgba(248, 246, 240, 0.22); --carbon-2: rgba(26, 22, 20, 0.72); --carbon-3: rgba(26, 22, 20, 0.48); --carbon-4: rgba(26, 22, 20, 0.18); --carbon-5: rgba(26, 22, 20, 0.08); /* Legacy aliases so module CSS keeps working without rewrites. In Chilean theme: "navy" = dark card bg (carbon), "paper" = light text on those dark cards (nieve), "amber" = rojo, "teal" = cielo. */ --navy: var(--carbon); --navy-2: #241f1d; --paper: var(--nieve); --paper-2: var(--nieve-2); --paper-3: var(--nieve-3); --paper-4: var(--nieve-4); --amber: var(--rojo); --amber-hot: var(--rojo-hot); --teal: var(--cielo); --teal-soft: var(--cielo-soft); --rule: var(--carbon-4); /* Fonts. Fraunces loaded in ; fallback stack if it doesn't arrive. */ --font-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-display: 'Fraunces', ui-serif, Georgia, 'Times New Roman', serif; --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --max: 1120px; --gutter: clamp(20px, 4vw, 56px); --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; } *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--nieve); color: var(--carbon); font-family: var(--font-sans); line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; } [hidden] { display: none !important; } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--rojo); color: var(--nieve); padding: 10px 14px; border-radius: 0 0 6px 0; font-weight: 600; } .skip-link:focus { left: 0; z-index: 1000; } /* ============ Nav ============ */ .nav { display: flex; justify-content: space-between; align-items: center; padding: clamp(16px, 2vw, 24px) var(--gutter); border-bottom: 1px solid var(--carbon-4); background: var(--nieve); } .brand { font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, 2vw + 10px, 30px); letter-spacing: -0.03em; line-height: 1; display: inline-flex; align-items: baseline; font-variation-settings: 'opsz' 144, 'wght' 700, 'WONK' 35, 'SOFT' 30; color: var(--carbon); } .brand .bang { display: inline-block; font-weight: 700; font-variation-settings: 'opsz' 144, 'wght' 700, 'WONK' 35; } .brand .bang-open { color: var(--cielo); margin-right: 0.04em; } .brand .bang-close { color: var(--rojo); margin-left: 0.04em; } .brand .brand-word { color: var(--carbon); } /* Inverted variant for use on cielo backgrounds */ .brand.on-dark .brand-word { color: var(--nieve); } /* Legacy ".brand-dot" kept for callers that still mount the old markup */ .brand-dot { color: var(--rojo); } .nav-links { display: flex; gap: clamp(8px, 1.5vw, 20px); } .nav-link { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--carbon-2); padding: 6px 10px; border-radius: 999px; transition: color 160ms ease, background 160ms ease; } .nav-link:hover, .nav-link:focus-visible { color: var(--carbon); background: var(--carbon-5); outline: none; } .nav-link.is-active { color: var(--rojo); } /* ============ View container ============ */ .view { flex: 1; display: block; padding: clamp(32px, 6vh, 88px) var(--gutter) clamp(80px, 10vh, 140px); max-width: var(--max); width: 100%; margin: 0 auto; } /* ============ Footer ============ */ .footer { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; align-items: center; padding: clamp(20px, 3vw, 32px) var(--gutter); border-top: 1px solid var(--carbon-4); font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--carbon-3); } .footer a { color: inherit; } .footer a:hover { color: var(--rojo); } /* ============ Star glyph (Chilean canton star) ============ */ /* Inline SVG usage — or class-based background. Both supported. */ .star { display: inline-block; width: 1em; height: 1em; color: var(--nieve); vertical-align: -0.12em; flex-shrink: 0; } .star--cielo { color: var(--cielo); } .star--rojo { color: var(--rojo); } .star--carbon { color: var(--carbon); } /* A pure-CSS inline star as a list-bullet replacement. Usage: add class `star-list` to a