/* Theme Name: CST Curso de Motoras Portal Theme URI: https://motoras.cst.pr.gov Description: Portal educativo sobre seguridad en motocicletas — Comisión para la Seguridad en el Tránsito de Puerto Rico. Child theme of GeneratePress. Author: CST Puerto Rico Author URI: https://cst.pr.gov Template: generatepress Version: 1.0.0 License: GPL-2.0-or-later Text Domain: cst-motoras Tags: government, accessibility, bilingual, education */ /* ========================================================================== CST Motoras Portal — Design Tokens (Guía de Marca) ========================================================================== */ :root { /* --- Colors: Institutional palette --- */ --cst-color-red: #EE0000; --cst-color-blue: #3B82C4; --cst-color-white: #FFFFFF; --cst-color-navy: #1F2E54; /* Azul autoridad */ /* Primary blue palette (motorcycle portal) */ --cst-color-blue-primary: #3E64DE; /* Azul primario */ --cst-color-blue-light: #7B9FEE; /* Azul claro */ --cst-color-blue-dark: #2A4BB0; /* Azul oscuro (5.5:1+ contraste) */ /* Semantic tokens */ --cst-color-primary: var(--cst-color-blue-primary); --cst-color-secondary: var(--cst-color-navy); --cst-color-accent: var(--cst-color-blue); --cst-color-danger: var(--cst-color-red); --cst-color-focus: var(--cst-color-blue); /* Functional UI status tokens */ --cst-color-success: #2E7D32; --cst-color-warning: #E0B400; --cst-color-error: #B23A3A; --cst-color-info: #3B82C4; /* Neutrals */ --cst-color-black: #1A1A1A; --cst-color-gray-900: #212529; --cst-color-gray-700: #495057; --cst-color-gray-500: #6C757D; --cst-color-gray-300: #DEE2E6; --cst-color-gray-100: #F8F9FA; --cst-color-surface-blue: #F4F7FC; /* Pencil's "surface" tint for alternating sections (node GmEna, curso page) */ --cst-color-bg: var(--cst-color-white); --cst-color-text: var(--cst-color-gray-900); --cst-color-text-muted: var(--cst-color-gray-500); /* --- Typography --- */ --cst-font-body: 'Open Sans', system-ui, -apple-system, sans-serif; --cst-font-heading: 'Montserrat', system-ui, -apple-system, sans-serif; --cst-font-size-base: 1rem; /* 16px */ --cst-font-size-sm: 0.875rem; /* 14px */ --cst-font-size-lg: 1.125rem; /* 18px */ --cst-font-size-xl: 1.5rem; /* 24px */ --cst-font-size-2xl: 2rem; /* 32px */ --cst-font-size-3xl: 2.5rem; /* 40px */ --cst-font-size-4xl: 3rem; /* 48px */ --cst-line-height: 1.6; --cst-line-height-tight: 1.2; /* --- Spacing --- */ --cst-space-xs: 0.25rem; /* 4px */ --cst-space-sm: 0.5rem; /* 8px */ --cst-space-md: 1rem; /* 16px */ --cst-space-lg: 1.5rem; /* 24px */ --cst-space-xl: 2rem; /* 32px */ --cst-space-2xl: 3rem; /* 48px */ --cst-space-3xl: 4rem; /* 64px */ --cst-space-4xl: 6rem; /* 96px */ /* --- Layout --- */ --cst-container-max: 1200px; --cst-container-narrow: 800px; --cst-border-radius: 0.375rem; /* 6px */ --cst-border-radius-lg: 0.75rem; /* 12px */ --cst-shadow-sm: 0 1px 3px rgba(0,0,0,0.12); --cst-shadow-md: 0 4px 12px rgba(0,0,0,0.1); --cst-shadow-lg: 0 8px 24px rgba(0,0,0,0.12); --cst-transition: 0.2s ease-in-out; /* --- Gradients --- */ --cst-gradient-primary: linear-gradient(135deg, #2A4BB0 0%, #7B9FEE 100%); --cst-gradient-hero: linear-gradient(135deg, rgba(62,100,222,0.92) 0%, rgba(62,100,222,0.75) 50%, rgba(123,159,238,0.85) 100%); --cst-gradient-accent: linear-gradient(135deg, #3E64DE 0%, #1F2E54 100%); --cst-gradient-section: linear-gradient(180deg, #F8F9FA 0%, #EEF1F3 100%); --cst-gradient-card-border: linear-gradient(135deg, var(--cst-color-blue-primary), var(--cst-color-navy)); /* --- Glass / blur --- */ --cst-glass-bg: rgba(255, 255, 255, 0.85); --cst-glass-blur: blur(12px); --cst-glass-border: 1px solid rgba(255, 255, 255, 0.3); /* --- Enhanced shadows --- */ --cst-shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.15); --cst-shadow-glow-primary: 0 4px 20px rgba(62, 100, 222, 0.35); --cst-shadow-glow-navy: 0 4px 20px rgba(31, 46, 84, 0.35); /* --- Timing --- */ --cst-transition-slow: 0.4s ease; --cst-transition-spring: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); /* --- Section dividers --- */ --cst-divider-height: 48px; /* --- Glow shadows --- */ --cst-shadow-glow-accent: 0 4px 20px rgba(59, 130, 196, 0.25); --cst-shadow-glow-blue-light: 0 4px 20px rgba(123, 159, 238, 0.25); /* --- Color variants --- */ --cst-color-navy-light: #3A4D7A; --cst-color-navy-darker: #1A1A2E; /* --- Missing neutrals --- */ --cst-color-gray-200: #E9ECEF; --cst-color-gray-400: #ADB5BD; /* --- Typography additions --- */ --cst-font-size-xs: 0.75rem; /* 12px */ /* --- Government banner (GUIDI dark teal) --- */ --cst-banner-bg: #0E3B36; --cst-banner-text: var(--cst-color-white); /* --- Gradient text --- */ --cst-gradient-text: linear-gradient(135deg, #3E64DE 0%, #1F2E54 100%); /* --- Alpha color tokens --- */ --cst-alpha-blue-5: rgba(62, 100, 222, 0.05); --cst-alpha-blue-8: rgba(62, 100, 222, 0.08); --cst-alpha-blue-10: rgba(62, 100, 222, 0.1); --cst-alpha-blue-12: rgba(62, 100, 222, 0.12); --cst-alpha-blue-15: rgba(62, 100, 222, 0.15); --cst-alpha-blue-20: rgba(62, 100, 222, 0.2); --cst-alpha-navy-45: rgba(31, 46, 84, 0.45); --cst-alpha-accent-15: rgba(59, 130, 196, 0.15); --cst-alpha-white-3: rgba(255, 255, 255, 0.03); --cst-alpha-white-6: rgba(255, 255, 255, 0.06); --cst-alpha-white-8: rgba(255, 255, 255, 0.08); --cst-alpha-white-10: rgba(255, 255, 255, 0.1); --cst-alpha-white-14: rgba(255, 255, 255, 0.14); --cst-alpha-white-15: rgba(255, 255, 255, 0.15); --cst-alpha-white-20: rgba(255, 255, 255, 0.2); --cst-alpha-white-30: rgba(255, 255, 255, 0.3); --cst-alpha-white-50: rgba(255, 255, 255, 0.5); --cst-alpha-white-60: rgba(255, 255, 255, 0.6); --cst-alpha-white-75: rgba(255, 255, 255, 0.75); --cst-alpha-white-80: rgba(255, 255, 255, 0.8); --cst-alpha-white-85: rgba(255, 255, 255, 0.85); --cst-alpha-black-4: rgba(0, 0, 0, 0.04); --cst-alpha-black-6: rgba(0, 0, 0, 0.06); --cst-alpha-black-8: rgba(0, 0, 0, 0.08); --cst-alpha-black-12: rgba(0, 0, 0, 0.12); --cst-alpha-black-15: rgba(0, 0, 0, 0.15); --cst-alpha-black-20: rgba(0, 0, 0, 0.2); --cst-alpha-black-30: rgba(0, 0, 0, 0.3); --cst-alpha-red-5: rgba(238, 0, 0, 0.05); --cst-alpha-red-15: rgba(238, 0, 0, 0.15); /* --- Callout backgrounds --- */ --cst-callout-bg-default: linear-gradient(135deg, rgba(62,100,222,0.06) 0%, rgba(62,100,222,0.02) 100%); --cst-callout-bg-warning: linear-gradient(135deg, rgba(31,46,84,0.06) 0%, rgba(31,46,84,0.02) 100%); --cst-callout-bg-info: linear-gradient(135deg, rgba(59,130,196,0.06) 0%, rgba(59,130,196,0.02) 100%); } /* High contrast mode */ @media (prefers-contrast: high) { :root { --cst-color-primary: #1E3A8A; --cst-color-secondary: #0F1A36; --cst-shadow-sm: 0 0 0 1px var(--cst-color-black); --cst-shadow-md: 0 0 0 2px var(--cst-color-black); --cst-shadow-xl: 0 0 0 3px var(--cst-color-black); --cst-shadow-glow-primary: none; --cst-shadow-glow-navy: none; --cst-shadow-glow-accent: none; --cst-shadow-glow-blue-light: none; --cst-gradient-primary: var(--cst-color-primary); --cst-gradient-hero: rgba(0,0,0,0.85); --cst-gradient-accent: var(--cst-color-primary); --cst-gradient-section: var(--cst-color-gray-100); --cst-gradient-card-border: var(--cst-color-primary); --cst-glass-bg: var(--cst-color-white); --cst-glass-blur: none; --cst-glass-border: 2px solid var(--cst-color-black); --cst-gradient-text: var(--cst-color-primary); --cst-callout-bg-default: rgba(62,100,222,0.08); --cst-callout-bg-warning: rgba(31,46,84,0.08); --cst-callout-bg-info: rgba(59,130,196,0.08); } }