/* ── base.css ────────────────────────────────────────────── Shared core: brand tokens, reset, nav, section scaffolding, logo wall, footer. Identical across every page. Edit brand colors in :root here and it changes everywhere. ──────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --ink: #12101a; --ink-mid: #3d3850; --ink-light: #7e7a92; --cream: #f6f3ee; --cream-dark: #eae6dc; --white: #ffffff; /* TWM purple family */ --purple-deep: #2a1f48; --purple-dark: #3b2d68; --purple-mid: #5a4aa0; --purple-soft: #8b7fd4; --purple-pale: #ede9f8; /* Burgundy accent from logo gradient */ --burg: #7a2a3a; --burg-light: #f5eaec; --rule: #d8d3e8; --rule-dark: rgba(255,255,255,0.1); } html { font-size: 16px; scroll-behavior: smooth; } body { font-family: 'DM Sans', sans-serif; font-weight: 400; color: var(--ink); background: var(--cream); -webkit-font-smoothing: antialiased; } nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 3rem; background: var(--purple-deep); border-bottom: 1px solid rgba(255,255,255,0.08); } .nav-logo { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 1.05rem; color: rgba(255,255,255,0.9); text-decoration: none; letter-spacing: 0.04em; } .nav-links { display: flex; gap: 2.5rem; list-style: none; } .nav-links a { font-size: 0.78rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.65); text-decoration: none; transition: color 0.2s; } .nav-links a:hover { color: rgba(255,255,255,0.9); } section { padding: 6rem 3rem; } .section-inner { max-width: 1100px; margin: 0 auto; } .section-label { font-size: 0.7rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--purple-soft); margin-bottom: 0.75rem; display: block; } .logos-label { font-size: 0.7rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-light); text-align: center; margin-bottom: 1rem; } .logo-grid-top { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.75rem 2rem; margin-top: 1.5rem; } .logo-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.75rem 2rem; margin-top: 1.5rem; } .logo-cell { min-height: 66px; display: flex; align-items: center; justify-content: center; padding: 0.25rem 0.5rem; } .logo-cell img.logo-tall { max-height: 50px; max-width: 120px; } .logo-cell img.logo-mid { max-height: 32px; } .logo-group-label { font-size: 0.7rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-light); text-align: center; margin-top: 2.5rem; margin-bottom: 0.5rem; } #contact .section-title { color: var(--white); margin-bottom: 1rem; position: relative; } .contact-email:hover { color: var(--purple-soft); } footer { background: var(--purple-deep); border-top: 1px solid rgba(255,255,255,0.06); padding: 1.4rem 3rem; display: flex; align-items: center; justify-content: space-between; } .footer-copy { font-size: 0.75rem; color: rgba(255,255,255,0.18); } /* ── MOTION ───────────────────────────────────────────────── Subtle scroll-reveal. Elements fade-and-rise as they enter view. - Hidden state only applies when JS is on (html.js, set in ), so no-JS visitors and crawlers see everything immediately. - Entirely disabled for visitors who prefer reduced motion. The selector list here MUST match the one in Base.astro's script. ──────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: no-preference) { html.js :is( .hero-eyebrow, .hero-headline, .hero-subhead, .hero-cta, .hero-note, .credential-item, .research-hero .section-label, .research-hero-title, .research-hero-intro, .research-hero-support, .section-title, .section-intro, .big-quote, .service-card, .case-card, .focus-card, .recent-card, .approach-step, .about-stat, .who-pill ) { opacity: 0; transform: translateY(16px); transition: opacity 0.7s cubic-bezier(0.2, 0.6, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.6, 0.2, 1); will-change: opacity, transform; } html.js :is( .hero-eyebrow, .hero-headline, .hero-subhead, .hero-cta, .hero-note, .credential-item, .research-hero .section-label, .research-hero-title, .research-hero-intro, .research-hero-support, .section-title, .section-intro, .big-quote, .service-card, .case-card, .focus-card, .recent-card, .approach-step, .about-stat, .who-pill ).in { opacity: 1; transform: none; } /* Signature load-in: stagger the hero credential rows. */ html.js .credential-item:nth-child(3) { transition-delay: 0.06s; } html.js .credential-item:nth-child(4) { transition-delay: 0.12s; } html.js .credential-item:nth-child(5) { transition-delay: 0.18s; } html.js .credential-item:nth-child(6) { transition-delay: 0.24s; } }