/** * base.css — Reset + Typography + Layout Utilities + A11y * MAPX Landing · khoahoc.giauco.vn * * AESTHETIC: Slate + Red urgency, Inter single font, full-bleed pattern * Reference: event.giauco.vn/video-marketing * * IMPORT ORDER: tokens.css → base.css → sections.css → animations.css * * TYPOGRAPHY HIERARCHY: * eyebrow → 13px / 700 / tracking 0.16em UPPERCASE / red or blue * h1 → clamp(30px, 6vw, 52px) / 900 / -0.025em / leading 1.05 * h2 → clamp(28px, 5vw, 46px) / 800 / -0.015em / leading 1.18 * h3 → 22-26px / 700 * body → 17px / 400 / leading 1.6 * lead → 19px / 500 / leading 1.5 */ /* ─── Inter font (preconnect handled in ) ──────────────── */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap'); /* ─── Reset ──────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 16px; scroll-behavior: smooth; overflow-x: hidden; max-width: 100%; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } body { font-family: var(--font-sans); font-size: var(--text-base); font-weight: var(--font-regular); line-height: var(--leading-relaxed); color: var(--text-main); background-color: var(--bg-body); overflow-x: hidden; max-width: 100vw; position: relative; font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "ss01" 1; text-rendering: optimizeLegibility; } section { max-width: 100vw; overflow-x: clip; } main { position: relative; z-index: 2; } img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; } input, button, textarea, select { font: inherit; color: inherit; } button { border: 0; background: transparent; cursor: pointer; } p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } ul, ol { margin: 0; padding: 0; list-style: none; } a { color: var(--red-primary); text-decoration: none; transition: color var(--duration-base) var(--ease-default); } a:hover { color: var(--red-hover); } /* ─── Headings ───────────────────────────────────────────────── */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: var(--font-extrabold); line-height: var(--leading-heading); color: var(--text-dark); letter-spacing: var(--tracking-tight); text-wrap: balance; } h1 { font-size: clamp(1.875rem, 6vw, var(--text-6xl)); line-height: var(--leading-display); letter-spacing: var(--tracking-tighter); font-weight: var(--font-black); } h2 { font-size: clamp(1.75rem, 5vw, var(--text-5xl)); line-height: var(--leading-heading); letter-spacing: var(--tracking-tight); font-weight: var(--font-extrabold); margin-bottom: var(--gap-h2-divider); } h3 { font-size: clamp(1.25rem, 2.4vw, var(--text-2xl)); line-height: var(--leading-tight); font-weight: var(--font-bold); } h4 { font-size: clamp(1.125rem, 2vw, var(--text-xl)); line-height: var(--leading-tight); font-weight: var(--font-bold); } h5 { font-size: var(--text-lg); line-height: var(--leading-tight); font-weight: var(--font-bold); } h6 { font-size: var(--text-xs); letter-spacing: var(--tracking-widest); text-transform: uppercase; font-weight: var(--font-bold); color: var(--red-primary); } /* ─── Body text ──────────────────────────────────────────────── */ p { font-family: var(--font-sans); font-size: var(--text-base); font-weight: var(--font-regular); line-height: var(--leading-relaxed); color: var(--text-body); } .lead, p.lead { font-size: var(--text-lg); line-height: var(--leading-snug); font-weight: var(--font-medium); color: var(--text-light); } p strong, .prose strong, strong { font-weight: var(--font-bold); color: var(--red-primary); } p em, .prose em, em { font-style: italic; color: inherit; } /* ─── Highlight utilities ────────────────────────────────────── */ .highlight-red { color: var(--red-primary); font-weight: var(--font-extrabold); } .highlight-pen { background: var(--accent-yellow-hl); padding: 0 6px; border-radius: 2px; box-decoration-break: clone; -webkit-box-decoration-break: clone; } .highlight-bg-red { background: var(--bg-red-soft); color: var(--red-deep); padding: 0 6px; border-radius: 2px; } /* ─── Eyebrow chip ───────────────────────────────────────────── */ .eyebrow { display: inline-block; font-size: var(--text-xs); font-weight: var(--font-bold); text-transform: uppercase; letter-spacing: var(--tracking-widest); color: var(--red-primary); margin-bottom: var(--gap-eyebrow-h2); } .eyebrow--blue { color: var(--accent-blue); } .eyebrow--gold { color: var(--accent-gold); } .eyebrow-chip { display: inline-block; background: var(--bg-red-soft); color: var(--red-primary); font-size: var(--text-xs); font-weight: var(--font-bold); text-transform: uppercase; letter-spacing: var(--tracking-widest); padding: var(--space-2) var(--space-4); border-radius: var(--radius-full); margin-bottom: var(--gap-eyebrow-h2); } /* ─── Red divider bar ────────────────────────────────────────── */ .divider-red { width: 56px; height: 4px; background: var(--red-primary); border: 0; border-radius: var(--radius-full); margin: var(--gap-h2-divider) auto var(--gap-divider-sub); } .divider-red--left { margin-left: 0; } /* ─── Layout — Full-bleed pattern ────────────────────────────── */ .section { width: 100%; padding-block: var(--section-pad-y-mobile); position: relative; } @media (min-width: 768px) { .section { padding-block: var(--section-pad-y-desktop); } } .section--gray { background-color: var(--bg-gray); border-block: 1px solid var(--border-soft); } .section--cream { background-color: var(--bg-cream); } .section--dark { background-color: var(--bg-dark); color: var(--text-on-dark); } .section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4, .section--dark h5, .section--dark h6 { color: var(--text-on-dark); } .section--dark p { color: var(--text-on-dark-soft); } .section--dark strong { color: var(--red-bright); } .section--dark .eyebrow { color: var(--red-bright); } /* ─── Container — 3 widths ───────────────────────────────────── */ .container { width: 100%; max-width: var(--container-default); margin-inline: auto; padding-inline: var(--space-4); } .container--wide { max-width: var(--container-wide); } .container--narrow { max-width: var(--container-narrow); } .container--prose { max-width: var(--container-prose); } @media (min-width: 768px) { .container { padding-inline: var(--space-6); } } /* ─── Section title block (eyebrow + h2 + divider + sub) ─────── */ .section-head { text-align: center; margin-bottom: var(--gap-sub-content); } .section-head--left { text-align: left; } .section-head--left .divider-red { margin-left: 0; } .section-head .lead { margin-inline: auto; max-width: 56ch; } /* ─── CTA Button — signature 3D pulse style ──────────────────── */ .btn-cta { display: inline-flex; justify-content: center; align-items: center; background-color: var(--red-primary); color: var(--text-on-red); font-family: var(--font-sans); font-size: var(--text-xl); font-weight: var(--font-extrabold); text-transform: uppercase; letter-spacing: 0.02em; padding: var(--space-5) var(--space-12); border-radius: var(--radius-md); border: 0; border-bottom: 4px solid var(--red-deep); cursor: pointer; box-shadow: var(--shadow-red); transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), background-color var(--duration-base) var(--ease-out), border-bottom-width var(--duration-base) var(--ease-out); text-align: center; text-decoration: none; animation: pulse-red 2s infinite; max-width: 500px; width: 100%; } .btn-cta:hover { background-color: var(--red-hover); color: var(--text-on-red); transform: translateY(2px); border-bottom-width: 2px; box-shadow: 0 5px 12px var(--red-glow); } .btn-cta:active { transform: translateY(3px); border-bottom-width: 1px; } .btn-cta--no-pulse { animation: none; } .btn-cta--small { font-size: var(--text-base); padding: var(--space-3) var(--space-8); } .btn-secondary { display: inline-flex; align-items: center; justify-content: center; background-color: transparent; color: var(--red-primary); border: 2px solid var(--red-primary); padding: var(--space-3) var(--space-8); border-radius: var(--radius-md); font-weight: var(--font-bold); font-size: var(--text-base); text-transform: uppercase; letter-spacing: 0.02em; transition: background-color var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out); } .btn-secondary:hover { background-color: var(--red-primary); color: var(--text-on-red); } @keyframes pulse-red { 0% { box-shadow: 0 0 0 0 var(--red-glow), var(--shadow-red); } 70% { box-shadow: 0 0 0 18px rgba(220,38,38,0), var(--shadow-red); } 100% { box-shadow: 0 0 0 0 rgba(220,38,38,0), var(--shadow-red); } } /* ─── Sale banner (top sticky, text-only per decision) ───────── */ .sale-banner { background: var(--bg-red-soft); color: var(--red-deep); border-bottom: 2px solid #fca5a5; text-align: center; padding: var(--space-3) var(--space-4); font-size: var(--text-base); font-weight: var(--font-bold); position: sticky; top: 0; z-index: var(--z-nav); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out); } .sale-banner:hover { background: #fee2e2; } .sale-banner strong { color: var(--red-primary); } /* ─── Floating sticky CTA (desktop bottom-right, mobile full-width bottom) ── */ .float-cta { position: fixed; bottom: var(--space-4); right: var(--space-4); z-index: var(--z-overlay); opacity: 0; visibility: hidden; transform: translateY(20px); transition: opacity var(--duration-base) var(--ease-out), visibility var(--duration-base), transform var(--duration-base) var(--ease-out); } .float-cta.is-visible { opacity: 1; visibility: visible; transform: translateY(0); } /* Back-to-top variant: circular icon button in corner */ .float-cta--back-to-top { bottom: var(--space-6); right: var(--space-6); } .back-to-top__btn { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--red-primary, #dc2626); color: #fff; border: none; cursor: pointer; box-shadow: 0 6px 16px rgba(0,0,0,0.18); transition: transform var(--duration-base) var(--ease-out), background var(--duration-base); } .back-to-top__btn:hover { transform: translateY(-3px); background: var(--red-hover, #b91c1c); } .back-to-top__btn:active { transform: translateY(-1px); } .back-to-top__btn svg { display: block; } @media (max-width: 640px) { .float-cta--back-to-top { bottom: var(--space-4); right: var(--space-4); } .back-to-top__btn { width: 44px; height: 44px; } } /* ─── Focus + a11y ───────────────────────────────────────────── */ :focus { outline: none; } :focus-visible { outline: 2px solid var(--red-primary); outline-offset: 3px; border-radius: var(--radius-sm); } .skip-link { position: absolute; top: -100%; left: var(--space-4); z-index: var(--z-top); padding: var(--space-3) var(--space-6); background: var(--red-primary); color: var(--text-on-red); font-weight: var(--font-bold); border-radius: 0 0 var(--radius-md) var(--radius-md); } .skip-link:focus-visible { top: 0; outline: none; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } [hidden] { display: none !important; } /* ─── Selection ──────────────────────────────────────────────── */ ::selection { background-color: var(--red-primary); color: var(--text-on-red); } /* ─── Scrollbar ──────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--bg-gray); } ::-webkit-scrollbar-thumb { background: var(--red-primary); border-radius: var(--radius-full); } ::-webkit-scrollbar-thumb:hover { background: var(--red-hover); }