/* ============================================================ Colegio Militar General Santander — Design Tokens Colors, type, spacing, shadows, radii ============================================================ */ /* NOTA DE OPTIMIZACIÓN: Las fuentes de Google (Oswald / Barlow / Barlow Condensed) antes se importaban aquí con @import. Eso es lento porque encadena descargas. Ahora se cargan con en el de index.html e inscripciones.html para que bajen EN PARALELO. No las vuelvas a poner aquí con @import. */ /* Brand-uploaded accent face — used for emphatic italic flourishes (e.g. "transforma vidas" in the admisión banner, blockquotes). Only ExtraBoldItalic is supplied; treat it as a single-style display accent. */ @font-face { font-family: 'Open Sauce Two'; src: url('../fonts/OpenSauceTwo-ExtraBoldItalic.ttf') format('truetype'); font-weight: 800; font-style: italic; font-display: swap; } :root { /* -------------------------------------------------------- CORE PALETTE — Institutional military identity -------------------------------------------------------- */ /* Azul Institucional — the dominant brand color from header/stats/CTAs */ --navy-950: #050d24; /* deepest, footer base */ --navy-900: #0A1832; /* header / footer — brand navy */ --navy-800: #102347; /* stats panel */ --navy-700: #1a3168; /* dark gradients */ --navy-600: #234080; /* mid */ --navy-500: #2f5aa8; /* link blue */ --navy-400: #4a78c8; /* icon ring blue */ /* Verde Militar — military green from emblem and uniforms */ --green-900: #01100B; /* brand deep military green */ --green-800: #0c2412; --green-700: #2d5a32; /* footer COLABORADORES band */ --green-600: #3d7a3f; /* emblem shield green */ --green-500: #4f9450; --green-400: #6fb96a; /* SENA-style accent */ --green-300: #a4d39f; /* Dorado — institutional gold from emblem flourishes & accents */ --gold-700: #8a6914; --gold-600: #b8881e; --gold-500: #d4a02a; /* primary gold */ --gold-400: #e6b94a; /* highlight gold */ --gold-300: #f0d27a; --gold-200: #f7e7b3; /* Rojo Institucional — emblem ring & accent reds */ --red-700: #a02418; --red-600: #c53224; /* emblem ring */ --red-500: #e04532; --red-400: #ec6b5a; /* Neutrals */ --white: #ffffff; --paper: #f7f6f2; /* warm off-white background */ --bone: #ece9e0; --stone-200: #d8d4c8; --stone-300: #b8b3a3; --stone-400: #8a8473; --stone-500: #5f5a4e; --stone-700: #2f2c25; --ink: #15171b; /* Stat accent colors (from reference mockup) */ --stat-blue: #4a78c8; --stat-red: #e04532; --stat-orange: #f08a3e; --stat-green: #4f9450; /* -------------------------------------------------------- SEMANTIC COLORS -------------------------------------------------------- */ --bg: var(--paper); --bg-elevated: var(--white); --bg-dark: var(--navy-900); --bg-dark-elevated: var(--navy-800); --fg: var(--ink); --fg-muted: var(--stone-500); --fg-soft: var(--stone-400); --fg-on-dark: var(--white); --fg-on-dark-muted: rgba(255, 255, 255, 0.72); --border: rgba(21, 23, 27, 0.08); --border-strong: rgba(21, 23, 27, 0.16); --border-on-dark: rgba(255, 255, 255, 0.12); --border-gold: var(--gold-500); --accent: var(--navy-700); --accent-hover: var(--navy-600); --accent-gold: var(--gold-500); --accent-gold-hover: var(--gold-400); --accent-green: var(--green-700); --accent-red: var(--red-600); /* -------------------------------------------------------- TYPOGRAPHY -------------------------------------------------------- */ --font-display: 'Oswald', 'Barlow Condensed', 'Impact', sans-serif; --font-body: 'Barlow', 'Helvetica Neue', system-ui, sans-serif; --font-accent: 'Open Sauce Two', 'Barlow', system-ui, sans-serif; /* italic flourishes */ --font-mono: 'JetBrains Mono', ui-monospace, monospace; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-wider: 0.08em; --tracking-widest: 0.16em; /* eyebrows, military section labels */ --leading-tight: 1.05; --leading-snug: 1.2; --leading-normal: 1.5; --leading-relaxed: 1.65; /* -------------------------------------------------------- SPACING SCALE (4px base) -------------------------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; /* -------------------------------------------------------- RADII — restrained, institutional feel -------------------------------------------------------- */ --radius-none: 0; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; --radius-xl: 20px; --radius-pill: 999px; /* -------------------------------------------------------- SHADOWS — soft, never harsh -------------------------------------------------------- */ --shadow-sm: 0 1px 2px rgba(10, 23, 51, 0.06), 0 1px 1px rgba(10, 23, 51, 0.04); --shadow-md: 0 4px 12px rgba(10, 23, 51, 0.08), 0 2px 4px rgba(10, 23, 51, 0.05); --shadow-lg: 0 18px 40px rgba(10, 23, 51, 0.14), 0 6px 12px rgba(10, 23, 51, 0.06); --shadow-xl: 0 28px 70px rgba(10, 23, 51, 0.22), 0 12px 24px rgba(10, 23, 51, 0.08); --shadow-gold-glow: 0 0 0 1px var(--gold-500), 0 8px 24px rgba(212, 160, 42, 0.28); --shadow-inset-border: inset 0 0 0 1px rgba(255, 255, 255, 0.08); /* Glass header */ --glass-bg: rgba(10, 23, 51, 0.78); --glass-blur: saturate(140%) blur(14px); /* -------------------------------------------------------- MOTION -------------------------------------------------------- */ --ease-out: cubic-bezier(0.16, 0.84, 0.32, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); --dur-fast: 160ms; --dur-med: 320ms; --dur-slow: 560ms; --dur-marquee: 28s; /* -------------------------------------------------------- LAYOUT -------------------------------------------------------- */ --container: 1240px; --container-narrow: 960px; --header-h: 84px; } /* ============================================================== SEMANTIC TYPE TOKENS ============================================================== */ .t-display-xl { font-family: var(--font-display); font-weight: 700; font-size: clamp(48px, 6.5vw, 96px); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); text-transform: uppercase; } .t-display-lg { font-family: var(--font-display); font-weight: 700; font-size: clamp(36px, 4.5vw, 64px); line-height: 1.06; letter-spacing: var(--tracking-tight); text-transform: uppercase; } .t-h1 { font-family: var(--font-display); font-weight: 600; font-size: clamp(32px, 3.5vw, 48px); line-height: 1.1; letter-spacing: var(--tracking-tight); text-transform: uppercase; } .t-h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(26px, 2.5vw, 36px); line-height: 1.15; letter-spacing: 0; text-transform: uppercase; } .t-h3 { font-family: var(--font-display); font-weight: 500; font-size: 22px; line-height: 1.2; letter-spacing: var(--tracking-wide); text-transform: uppercase; } .t-eyebrow { font-family: var(--font-body); font-weight: 600; font-size: 12px; line-height: 1.4; letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--gold-500); } .t-stat-number { font-family: var(--font-display); font-weight: 700; font-size: clamp(40px, 4vw, 56px); line-height: 1; letter-spacing: 0; } .t-stat-label { font-family: var(--font-body); font-weight: 600; font-size: 11px; line-height: 1.3; letter-spacing: var(--tracking-widest); text-transform: uppercase; } .t-body-lg { font-family: var(--font-body); font-weight: 400; font-size: 18px; line-height: var(--leading-relaxed); } .t-body { font-family: var(--font-body); font-weight: 400; font-size: 16px; line-height: var(--leading-relaxed); } .t-body-sm { font-family: var(--font-body); font-weight: 400; font-size: 14px; line-height: var(--leading-normal); } .t-caption { font-family: var(--font-body); font-weight: 500; font-size: 12px; line-height: 1.4; color: var(--fg-muted); } .t-button { font-family: var(--font-body); font-weight: 600; font-size: 13px; letter-spacing: var(--tracking-wider); text-transform: uppercase; } .t-nav-link { font-family: var(--font-body); font-weight: 500; font-size: 13px; letter-spacing: var(--tracking-wider); text-transform: uppercase; } .t-quote { font-family: var(--font-body); font-weight: 300; font-style: italic; font-size: 22px; line-height: 1.4; } /* Italic flourish — for inline accents like "transforma vidas" */ .t-flourish { font-family: var(--font-accent); font-weight: 800; font-style: italic; letter-spacing: -0.01em; color: var(--gold-500); } /* ============================================================== ELEMENT DEFAULTS — opt-in via .cmgs-prose etc. ============================================================== */ .cmgs-prose { color: var(--fg); font-family: var(--font-body); } .cmgs-prose h1 { font: 700 clamp(32px, 3.5vw, 48px)/1.1 var(--font-display); text-transform: uppercase; letter-spacing: var(--tracking-tight); } .cmgs-prose h2 { font: 600 clamp(24px, 2.4vw, 32px)/1.15 var(--font-display); text-transform: uppercase; } .cmgs-prose h3 { font: 500 20px/1.2 var(--font-display); text-transform: uppercase; letter-spacing: var(--tracking-wide); } .cmgs-prose p { font: 400 16px/1.65 var(--font-body); margin: 0 0 1em; } .cmgs-prose strong { font-weight: 700; } .cmgs-prose a { color: var(--navy-600); text-decoration: underline; text-underline-offset: 3px; } .cmgs-prose a:hover { color: var(--gold-600); }