/* ========================================================================== base.css — SIPATECH design tokens, reset, typography, utilities Load order: 1 of 3 (base → components → pages) ========================================================================== */ /* -------------------------------------------------------------------------- Design Tokens All hex values and raw sizes live here — never in components.css or pages.css -------------------------------------------------------------------------- */ :root { /* Colors — brand palette from logo.com */ --color-bg: #060810; --color-surface: #0d1117; --color-border: #21262d; --color-border-ui: #30363d; /* stronger border for interactive UI elements */ --color-accent: #2188ff; /* brighter blue — logo family */ --color-accent-2: #FFA62E; /* brand orange */ --color-accent-red: #F71B3D; /* brand red */ --color-text: #f0f6fc; --color-text-muted: #8b949e; --color-success: #22d3a0; --color-error: #F71B3D; /* brand red doubles as error */ /* Accent RGB for rgba() usage */ --color-accent-rgb: 33, 136, 255; --color-accent-2-rgb: 255, 166, 46; --color-accent-red-rgb: 247, 27, 61; /* Typography */ --font-brand: 'Aclonica', sans-serif; /* brand font — logo + hero h1 */ --font-display: 'DM Mono', 'IBM Plex Mono', monospace; /* section headings, labels */ --font-body: 'DM Sans', 'Outfit', sans-serif; /* Spacing scale */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 32px; --space-xl: 48px; --space-2xl: 88px; /* Border radius */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-full: 9999px; /* Transitions */ --transition-fast: 150ms ease; --transition-base: 250ms ease; --transition-slow: 400ms ease; /* Nav */ --nav-scrolled-bg: rgba(6, 8, 16, 0.95); /* Hero overlay (theme-aware) */ --hero-vignette-rgb: 6, 8, 16; /* Shadows */ --shadow-accent: 0 0 0 1px var(--color-accent), 0 4px 24px rgba(var(--color-accent-rgb), 0.15); --shadow-accent-2: 0 0 0 1px var(--color-accent-2), 0 4px 24px rgba(var(--color-accent-2-rgb), 0.15); /* Layout */ --nav-height: 72px; --container-max: 1280px; } /* -------------------------------------------------------------------------- Light Theme Overrides Toggled by setting data-theme="light" on via theme.js -------------------------------------------------------------------------- */ [data-theme="light"] { --color-bg: #f5f7fb; --color-surface: #ffffff; --color-border: #dde3ed; --color-border-ui: #9aabbe; /* stronger border for interactive UI elements */ --color-text: #0d1117; --color-text-muted: #556070; --color-success: #059669; /* accent, accent-2, accent-red, error stay the same — brand colors */ --nav-scrolled-bg: rgba(255, 255, 255, 0.95); --hero-vignette-rgb: 245, 247, 251; } /* Smooth theme transitions — applied to key elements only to avoid interfering with animations */ body, .nav, .card, .footer, .why-section, .form-input, .form-textarea, .contact-form-wrap, .founder-card, .philosophy-item, .about-teaser__stat, .contact-info-card, .nav__action-btn, .process-step__number { transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-fast); } /* -------------------------------------------------------------------------- CSS Reset -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { background-color: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: 1rem; line-height: 1.6; min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, svg, video { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } button { background: none; border: none; cursor: pointer; font: inherit; } input, textarea, select { font: inherit; } /* -------------------------------------------------------------------------- Typography Scale -------------------------------------------------------------------------- */ h1 { font-family: var(--font-brand); font-weight: 400; /* Aclonica is a single-weight display font */ line-height: 1.15; letter-spacing: 0.01em; color: var(--color-text); } h2 { font-family: var(--font-display); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; color: var(--color-text); } h3, h4, h5, h6 { font-family: var(--font-body); font-weight: 600; line-height: 1.3; color: var(--color-text); } h1 { font-size: clamp(2.25rem, 5.5vw, 3.75rem); } h2 { font-size: clamp(1.5rem, 3.5vw, 2.25rem); } h3 { font-size: clamp(1.1rem, 2vw, 1.25rem); } h4 { font-size: 1rem; } p { color: var(--color-text-muted); line-height: 1.75; } strong { color: var(--color-text); font-weight: 600; } code { font-family: var(--font-display); font-size: 0.875em; color: var(--color-accent); background: rgba(var(--color-accent-rgb), 0.08); padding: 0.1em 0.4em; border-radius: var(--radius-sm); } /* -------------------------------------------------------------------------- Layout Utilities -------------------------------------------------------------------------- */ .container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--space-md); } @media (min-width: 640px) { .container { padding-inline: var(--space-lg); } } @media (min-width: 1024px) { .container { padding-inline: var(--space-xl); } } /* -------------------------------------------------------------------------- Accessibility Utilities -------------------------------------------------------------------------- */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: var(--radius-sm); } /* Remove focus ring for mouse users, keep for keyboard */ :focus:not(:focus-visible) { outline: none; } /* -------------------------------------------------------------------------- Scroll Animation Utilities Used by animate.js across all pages -------------------------------------------------------------------------- */ .fade-up { opacity: 0; transform: translateY(24px); transition: opacity 0.55s ease, transform 0.55s ease; transition-delay: var(--fade-delay, 0s); } .fade-up.is-visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .fade-up { opacity: 1; transform: none; transition: none; } }