/* ============================================================ ACMP — Academia Comunica de Mai Pistiner Foundations: color, type, spacing, radii, shadows ============================================================ */ /* ---------- Webfonts ---------- */ /* Extenda 30 Deca — display face used on H1 course title */ @font-face { font-family:'Extenda 30 Deca'; src:url('../fonts/Extenda30-Deca.otf') format('opentype'); font-weight:400 900; font-style:normal; font-display:swap; } :root { /* ---------------- Brand colors (exact) ---------------- */ --acmp-orange: #f74604; /* CTA / palabra clave / logo / iconos activos */ --acmp-orange-700: #c93702; /* hover / press deeper */ --acmp-orange-100: #ffe5d9; /* tinted surface */ --acmp-navy: #222b49; /* fondos oscuros, podcast, testimonios */ --acmp-navy-700: #181f37; /* deeper layer */ --acmp-navy-300: #4a5275; /* muted on navy */ --acmp-cyan: #38b6ff; /* acentos suaves, LinkedIn, secundarios */ --acmp-cyan-100: #d6efff; --acmp-gray: #f2f2f2; /* fondo general */ --acmp-gray-200: #e6e6e6; /* borders, dividers */ --acmp-gray-400: #b8b8b8; /* placeholders */ --acmp-gray-700: #4a4a4a; /* secondary text on light */ --acmp-white: #ffffff; --acmp-black: #000000; /* ---------------- Semantic surfaces ---------------- */ --bg-page: var(--acmp-gray); --bg-surface: var(--acmp-white); --bg-inverse: var(--acmp-navy); --bg-accent: var(--acmp-orange); --bg-soft: var(--acmp-cyan-100); /* ---------------- Semantic text ---------------- */ --fg-1: var(--acmp-navy); /* primary */ --fg-2: var(--acmp-gray-700); /* secondary */ --fg-3: var(--acmp-gray-400); /* tertiary / placeholder */ --fg-on-dark: var(--acmp-white); --fg-on-orange: var(--acmp-white); --fg-accent: var(--acmp-orange); /* keyword in title, links */ --fg-link: var(--acmp-orange); /* ---------------- Borders ---------------- */ --border-subtle: var(--acmp-gray-200); --border-strong: var(--acmp-navy); --border-accent: var(--acmp-orange); /* ---------------- Type stacks ---------------- */ --font-display: 'Poppins', system-ui, sans-serif; /* H1, hero */ --font-course-title: 'Extenda 30 Deca', 'Poppins', system-ui, sans-serif; /* H1 título de curso */ --font-section: 'Poppins', system-ui, sans-serif; /* H2, H3 */ --font-body: 'Inter', system-ui, sans-serif; /* body, lists */ --font-long-form: 'DM Sans', 'Inter', system-ui, sans-serif; /* long-form */ /* ---------------- Type scale (px on 1rem=16) ---------------- */ --text-3xs: 0.625rem; /* 10 */ --text-2xs: 0.75rem; /* 12 */ --text-xs: 0.8125rem; /* 13 */ --text-sm: 0.875rem; /* 14 */ --text-md: 1rem; /* 16 — body */ --text-lg: 1.125rem; /* 18 */ --text-xl: 1.375rem; /* 22 */ --text-2xl: 1.75rem; /* 28 */ --text-3xl: 2.25rem; /* 36 */ --text-4xl: 3rem; /* 48 */ --text-5xl: 4rem; /* 64 */ --text-6xl: 5.25rem; /* 84 — hero */ /* Line height */ --lh-tight: 1.05; --lh-snug: 1.18; --lh-normal: 1.45; --lh-loose: 1.65; /* Tracking */ --tr-tight: -0.02em; --tr-snug: -0.01em; --tr-normal: 0; --tr-eyebrow: 0.14em; /* ---------------- Spacing (8px base, with 4px halfsteps) ---------------- */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; /* ---------------- Radii ---------------- */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px; --radius-pill: 999px; /* ---------------- Shadows ---------------- */ --shadow-sm: 0 1px 2px rgba(34, 43, 73, 0.06), 0 1px 1px rgba(34, 43, 73, 0.04); --shadow-md: 0 4px 12px rgba(34, 43, 73, 0.08), 0 2px 4px rgba(34, 43, 73, 0.05); --shadow-lg: 0 14px 32px rgba(34, 43, 73, 0.12), 0 6px 12px rgba(34, 43, 73, 0.06); --shadow-orange: 0 10px 28px rgba(247, 70, 4, 0.28); --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.06); /* ---------------- Motion ---------------- */ --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 140ms; --dur-base: 220ms; --dur-slow: 420ms; } /* ============================================================ Element defaults — drop colors_and_type.css into a page and raw HTML already looks on-brand. ============================================================ */ html { color: var(--fg-1); background: var(--bg-page); } body { font-family: var(--font-body); font-size: var(--text-md); line-height: var(--lh-normal); color: var(--fg-1); background: var(--bg-page); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, .h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.5rem, 5.5vw, var(--text-6xl)); line-height: var(--lh-tight); letter-spacing: var(--tr-tight); color: var(--fg-1); margin: 0 0 var(--space-5); text-wrap: balance; } h2, .h2 { font-family: var(--font-section); font-weight: 700; font-size: clamp(1.75rem, 3.2vw, var(--text-3xl)); line-height: var(--lh-snug); letter-spacing: var(--tr-snug); color: var(--fg-1); margin: 0 0 var(--space-4); text-wrap: balance; } h3, .h3 { font-family: var(--font-section); font-weight: 500; font-size: var(--text-2xl); line-height: var(--lh-snug); color: var(--fg-1); margin: 0 0 var(--space-3); } h4, .h4 { font-family: var(--font-section); font-weight: 700; font-size: var(--text-xl); line-height: var(--lh-snug); color: var(--fg-1); margin: 0 0 var(--space-2); } p, .p { font-family: var(--font-body); font-size: var(--text-md); line-height: var(--lh-normal); color: var(--fg-1); margin: 0 0 var(--space-4); text-wrap: pretty; } .lead { font-family: var(--font-body); font-size: var(--text-lg); line-height: var(--lh-normal); color: var(--fg-2); } .eyebrow { font-family: var(--font-section); font-weight: 700; font-size: var(--text-xs); letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--fg-accent); } .long-form { font-family: var(--font-long-form); font-size: var(--text-md); line-height: var(--lh-loose); color: var(--fg-1); } a { color: var(--fg-link); text-underline-offset: 3px; text-decoration-thickness: 1.5px; transition: color var(--dur-fast) var(--ease-standard); } a:hover { color: var(--acmp-orange-700); } small, .small { font-size: var(--text-sm); color: var(--fg-2); } /* The signature "keyword highlight" used in titles — wrap a word in to apply orange + bold. */ .kw { color: var(--fg-accent); font-weight: 700; } /* Quote/testimonial */ .quote { font-family: var(--font-section); font-weight: 500; font-size: var(--text-2xl); line-height: var(--lh-snug); letter-spacing: var(--tr-snug); color: var(--fg-1); } /* Inverse helpers — drop on a navy/orange background */ .on-dark { color: var(--fg-on-dark); } .on-dark .kw { color: var(--acmp-orange); } .on-dark p, .on-dark .lead { color: rgba(255,255,255,0.82); } /* Selection */ ::selection { background: var(--acmp-orange); color: var(--acmp-white); }