/** * main.css — Cirova Consulting * ───────────────────────────────────────────────────────────── * Scope : Design tokens, CSS reset, base typography, layout * primitives, and section-level structure. * Load : First in — all other stylesheets build on this. * Authors : Cirova Consulting (generated) * Updated : 2026 * ───────────────────────────────────────────────────────────── */ /* ───────────────────────────────────────────────────────────── 1. DESIGN TOKENS All visual decisions live here as custom properties. Change a value here and it propagates everywhere. ───────────────────────────────────────────────────────────── */ :root { /* Backgrounds — layered dark surfaces */ --color-bg: #0a0a0b; /* Page base */ --color-bg-2: #111114; /* Alternate section background */ --color-bg-3: #18181c; /* Card / panel background */ --color-surface: #1e1e24; /* Interactive surface (inputs, bubbles) */ /* Borders */ --color-border: rgba(255, 255, 255, 0.07); /* Subtle dividers */ --color-border-hi: rgba(255, 255, 255, 0.14); /* Highlighted borders */ /* Brand accent — electric blue */ --color-accent: #5b9cf6; --color-accent-dim: #3d6fbd; --color-accent-glow: rgba(91, 156, 246, 0.18); --color-accent-hover:#78b0ff; /* Text hierarchy */ --color-text: #e8e8f0; /* Primary reading text */ --color-text-muted: #8888a0; /* Secondary / supporting text */ --color-text-dim: #555568; /* Tertiary / decorative text */ /* Typography — three-font system */ --font-display: 'Syne', sans-serif; /* Headlines, logo */ --font-body: 'Fraunces', Georgia, serif; /* Body copy, editorial */ --font-mono: 'DM Mono', monospace; /* Labels, tags, UI text */ /* Spacing scale (8-point grid) */ --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: 80px; --space-10:120px; /* Layout */ --max-width: 1160px; --nav-height: 72px; /* Radii */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 18px; /* Motion */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 720ms; } /* ───────────────────────────────────────────────────────────── 2. RESET Sensible modern defaults on top of box-sizing reset. ───────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; /* Prevent iOS font-size inflation on orientation change */ -webkit-text-size-adjust: 100%; } body { background-color: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-weight: 300; line-height: 1.7; overflow-x: hidden; /* Crisp sub-pixel rendering on Mac/iOS */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Remove list styling where role="list" is applied in HTML */ [role="list"] { list-style: none; } /* Ordered lists keep their counters (process steps) */ ol { list-style: none; } /* Consistent media sizing */ img, video, svg { display: block; max-width: 100%; } /* Inherit font on form elements (browser default overrides otherwise) */ input, button, textarea, select { font: inherit; color: inherit; } /* Remove default button styles — components.css re-styles intentionally */ button { cursor: pointer; border: none; background: transparent; } /* Anchor baseline */ a { color: inherit; text-decoration: none; } /* Screen-reader only utility — used on visually hidden labels */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Focus ring — visible on keyboard navigation, invisible on mouse */ :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: var(--radius-sm); } /* ───────────────────────────────────────────────────────────── 3. LAYOUT PRIMITIVES ───────────────────────────────────────────────────────────── */ /** Centered content wrapper with horizontal padding */ .container { max-width: var(--max-width); margin-inline: auto; padding-inline: var(--space-6); } /** Shared section-header block (label + heading) */ .section-header { margin-bottom: var(--space-8); } /** Eyebrow label above headings */ .section-label { display: block; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-accent); margin-bottom: var(--space-3); } /** Section heading size scale */ .section-header h2 { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; } .section-sub { margin-top: var(--space-4); color: var(--color-text-muted); max-width: 520px; font-size: 1rem; } /** Semantic accent colour utility */ .accent { color: var(--color-accent); } /* ───────────────────────────────────────────────────────────── 4. SCROLL REVEAL ANIMATION Elements start hidden and translate up. JS adds `.visible` when they enter the viewport. ───────────────────────────────────────────────────────────── */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out); } .reveal.visible { opacity: 1; transform: translateY(0); } /* Respect user preference for reduced motion */ @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } } /* ───────────────────────────────────────────────────────────── 5. RESPONSIVE BREAKPOINTS Mobile-first adjustments for container and section spacing. ───────────────────────────────────────────────────────────── */ @media (max-width: 900px) { .container { padding-inline: var(--space-5); } }