/* ============================================================ VoxPic -- base.css CSS custom properties, modern reset, typography, layout helpers ============================================================ */ /* Google Fonts are loaded via in each HTML */ /* == Custom Properties ===================================== */ :root { /* Brand colors */ --brand-orange: #FF9F43; --brand-blue: #54A0FF; --brand-green: #1DD1A1; --brand-purple: #A29BFE; --brand-pink: #FF6B9D; /* Surface / background */ --surface: #FFFFFF; --bg-soft: #F8F9FE; /* Text */ --text-dark: #2D3436; --text-muted: #636E72; /* Typography */ --font-heading: 'Nunito', system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif; /* Spacing scale (4-pt) */ --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; /* Layout */ --max-width: 1200px; --section-py: var(--space-9); --section-px: var(--space-6); /* Border radius */ --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-full: 9999px; /* Shadows */ --shadow-sm: 0 1px 4px rgba(0, 0, 0, .08); --shadow-md: 0 4px 16px rgba(0, 0, 0, .10); --shadow-lg: 0 12px 40px rgba(0, 0, 0, .14); /* Motion */ --ease: cubic-bezier(.25, .46, .45, .94); --dur-fast: 150ms; --dur-base: 260ms; --dur-slow: 420ms; } /* == Modern CSS Reset ====================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); font-size: 16px; line-height: 1.65; color: var(--text-dark); background: var(--surface); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, video, svg { display: block; max-width: 100%; height: auto; } a { color: var(--brand-blue); text-decoration: none; transition: color var(--dur-fast) var(--ease); } a:hover { text-decoration: underline; } ul, ol { list-style: none; } button { cursor: pointer; border: none; background: none; font: inherit; color: inherit; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 800; line-height: 1.2; color: var(--text-dark); } /* == Typography Scale ====================================== */ .t-hero { font-family: var(--font-heading); font-weight: 800; font-size: clamp(36px, 5.5vw, 64px); line-height: 1.08; letter-spacing: -0.02em; } .t-section { font-family: var(--font-heading); font-weight: 800; font-size: clamp(28px, 3.5vw, 42px); line-height: 1.2; } .t-card-title { font-family: var(--font-heading); font-weight: 700; font-size: clamp(20px, 1.8vw, 22px); line-height: 1.3; } .t-body { font-size: clamp(15px, 1.4vw, 16px); line-height: 1.7; } .t-caption { font-size: clamp(13px, 1.1vw, 14px); font-weight: 500; line-height: 1.5; color: var(--text-muted); } /* == Layout Helpers ======================================== */ .container { width: 100%; max-width: var(--max-width); margin-inline: auto; padding-inline: var(--section-px); } .section { padding-block: var(--section-py); } .section--soft { background: var(--bg-soft); } .section--orange { background: var(--brand-orange); color: #fff; } /* Centered text block */ .text-center { text-align: center; } .text-center .section-subtitle { margin-inline: auto; } /* Flexbox helpers */ .flex { display: flex; } .flex-center { display: flex; align-items: center; justify-content: center; } .flex-between{ display: flex; align-items: center; justify-content: space-between; } .flex-col { display: flex; flex-direction: column; } .gap-2 { gap: var(--space-2); } .gap-3 { gap: var(--space-3); } .gap-4 { gap: var(--space-4); } .gap-5 { gap: var(--space-5); } .gap-6 { gap: var(--space-6); } /* == Accessibility ========================================= */ .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } :focus-visible { outline: 3px solid var(--brand-orange); outline-offset: 3px; border-radius: var(--radius-sm); } /* == Responsive Breakpoints (mobile-first) ================= --bp-sm: 480px (large phone landscape) --bp-md: 768px (tablet) --bp-lg: 1024px (small desktop) --bp-xl: 1200px (full desktop) ========================================================== */ @media (max-width: 1024px) { :root { --section-py: var(--space-8); --section-px: var(--space-5); } } @media (max-width: 768px) { :root { --section-py: var(--space-7); --section-px: var(--space-4); } } @media (max-width: 480px) { :root { --section-py: var(--space-6); --section-px: var(--space-4); } }