/* Base: design tokens, reset, layout primitives, typography. Mobile-first. Brand: navy-blue primary, warm amber accent, serif headings (Fraunces) + sans body (Inter). */ :root { /* Brand colors (CLAUDE.md: up to 3 colors). */ --color-primary: #0b74e3; --color-primary-dark: #095cb5; --color-accent: #fb9b1f; --color-accent-dark: #e0870f; --color-ink: #101828; --color-ink-soft: #475467; /* Neutrals. */ --color-bg: #ffffff; --color-bg-subtle: #eef0f3; --color-bg-inverse: #0c1524; --color-border: #e4e7ec; /* Type. */ --font-heading: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-site-title: 'Fraunces', Georgia, 'Times New Roman', serif; --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem); --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.1rem); --step-1: clamp(1.2rem, 1.12rem + 0.4vw, 1.4rem); --step-2: clamp(1.44rem, 1.3rem + 0.7vw, 1.8rem); --step-3: clamp(1.8rem, 1.55rem + 1.2vw, 2.4rem); --step-4: clamp(2.3rem, 1.9rem + 2vw, 3.4rem); --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2.5rem; --space-xl: 4rem; --space-2xl: 6rem; --radius: 8px; --radius-lg: 20px; --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.08); --shadow-md: 0 4px 8px rgba(16, 24, 40, 0.06), 0 12px 24px rgba(16, 24, 40, 0.08); --shadow-glow: 0 20px 60px -12px rgba(11, 116, 227, 0.35); --gradient-brand: linear-gradient(135deg, var(--color-primary) 0%, #1f4fd8 100%); --gradient-accent: linear-gradient(135deg, var(--color-accent) 0%, #ff7a45 100%); --gradient-dark: linear-gradient(180deg, #0c1524 0%, #142033 100%); } /* Scroll-reveal: elements fade/rise into view. Progressive enhancement - content is visible by default (works with no JS/CSS support). Only when main.js confirms IntersectionObserver support does it add .reveal-ready to , which is what actually hides [data-reveal] elements before they animate in. This ordering means a JS failure, slow script load, or reduced-motion never leaves content invisible. */ .reveal-ready [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; } .reveal-ready [data-reveal].is-visible { opacity: 1; transform: translateY(0); } /* Stagger cards inside a revealed grid so they fade in one-by-one instead of as a single block. Targets the actual grid item elements (cards, statistics, etc.) which get their own opacity/transform state gated by the parent section's .is-visible. Capped at 8 steps - beyond that the delay flattens to avoid a long tail on big grids. */ .reveal-ready [data-reveal] .post-grid > *, .reveal-ready [data-reveal] .team-grid > *, .reveal-ready [data-reveal] .testimonials-grid > *, .reveal-ready [data-reveal] .why-us-section__grid > *, .reveal-ready [data-reveal] .statistics-section__grid > *, .reveal-ready [data-reveal] .clients-slider__track > *, .reveal-ready [data-reveal] .gallery-page__grid > *, .reveal-ready [data-reveal] .gallery__track > * { opacity: 0; transform: translateY(16px); transition: opacity 0.5s ease, transform 0.5s ease; } .reveal-ready [data-reveal].is-visible .post-grid > *, .reveal-ready [data-reveal].is-visible .team-grid > *, .reveal-ready [data-reveal].is-visible .testimonials-grid > *, .reveal-ready [data-reveal].is-visible .why-us-section__grid > *, .reveal-ready [data-reveal].is-visible .statistics-section__grid > *, .reveal-ready [data-reveal].is-visible .clients-slider__track > *, .reveal-ready [data-reveal].is-visible .gallery-page__grid > *, .reveal-ready [data-reveal].is-visible .gallery__track > * { opacity: 1; transform: translateY(0); } .reveal-ready [data-reveal] .post-grid > :nth-child(1), .reveal-ready [data-reveal] .team-grid > :nth-child(1), .reveal-ready [data-reveal] .testimonials-grid > :nth-child(1), .reveal-ready [data-reveal] .why-us-section__grid > :nth-child(1), .reveal-ready [data-reveal] .statistics-section__grid > :nth-child(1), .reveal-ready [data-reveal] .gallery-page__grid > :nth-child(1), .reveal-ready [data-reveal] .gallery__track > :nth-child(1) { transition-delay: 0.05s; } .reveal-ready [data-reveal] .post-grid > :nth-child(2), .reveal-ready [data-reveal] .team-grid > :nth-child(2), .reveal-ready [data-reveal] .testimonials-grid > :nth-child(2), .reveal-ready [data-reveal] .why-us-section__grid > :nth-child(2), .reveal-ready [data-reveal] .statistics-section__grid > :nth-child(2), .reveal-ready [data-reveal] .gallery-page__grid > :nth-child(2), .reveal-ready [data-reveal] .gallery__track > :nth-child(2) { transition-delay: 0.1s; } .reveal-ready [data-reveal] .post-grid > :nth-child(3), .reveal-ready [data-reveal] .team-grid > :nth-child(3), .reveal-ready [data-reveal] .testimonials-grid > :nth-child(3), .reveal-ready [data-reveal] .why-us-section__grid > :nth-child(3), .reveal-ready [data-reveal] .statistics-section__grid > :nth-child(3), .reveal-ready [data-reveal] .gallery-page__grid > :nth-child(3), .reveal-ready [data-reveal] .gallery__track > :nth-child(3) { transition-delay: 0.15s; } .reveal-ready [data-reveal] .post-grid > :nth-child(4), .reveal-ready [data-reveal] .team-grid > :nth-child(4), .reveal-ready [data-reveal] .statistics-section__grid > :nth-child(4), .reveal-ready [data-reveal] .gallery-page__grid > :nth-child(4), .reveal-ready [data-reveal] .gallery__track > :nth-child(4) { transition-delay: 0.2s; } .reveal-ready [data-reveal] .post-grid > :nth-child(5), .reveal-ready [data-reveal] .gallery-page__grid > :nth-child(5), .reveal-ready [data-reveal] .gallery__track > :nth-child(5) { transition-delay: 0.25s; } .reveal-ready [data-reveal] .post-grid > :nth-child(6), .reveal-ready [data-reveal] .gallery-page__grid > :nth-child(6), .reveal-ready [data-reveal] .gallery__track > :nth-child(6) { transition-delay: 0.3s; } .reveal-ready [data-reveal] .post-grid > :nth-child(n+7), .reveal-ready [data-reveal] .gallery__track > :nth-child(n+7) { transition-delay: 0.35s; } @media (prefers-reduced-motion: reduce) { .reveal-ready [data-reveal], .reveal-ready [data-reveal] .post-grid > *, .reveal-ready [data-reveal] .team-grid > *, .reveal-ready [data-reveal] .testimonials-grid > *, .reveal-ready [data-reveal] .why-us-section__grid > *, .reveal-ready [data-reveal] .statistics-section__grid > *, .reveal-ready [data-reveal] .clients-slider__track > *, .reveal-ready [data-reveal] .gallery-page__grid > *, .reveal-ready [data-reveal] .gallery__track > * { opacity: 1; transform: none; transition: none; } } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-body); font-size: var(--step-0); line-height: 1.65; color: var(--color-ink); background: var(--color-bg); } h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; color: var(--color-ink); margin: 0 0 var(--space-sm); } h1 { font-size: var(--step-4); font-weight: 500; } h2 { font-size: var(--step-3); } h3 { font-size: var(--step-2); } h4 { font-size: var(--step-1); } p { color: var(--color-ink-soft); margin: 0 0 var(--space-sm); } img { max-width: 100%; height: auto; display: block; } a { color: var(--color-primary); text-decoration-thickness: 1px; text-underline-offset: 0.15em; } a:hover { color: var(--color-primary-dark); } .container { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--space-sm); } @media (min-width: 768px) { .container { padding-inline: var(--space-lg); } } .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } .skip-link.screen-reader-text:focus { position: fixed; top: 0; left: 0; width: auto; height: auto; clip: auto; z-index: 100; padding: var(--space-sm) var(--space-md); background: var(--color-ink); color: #ffffff; } /* Visible focus states for accessibility. */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }