/* ========================================================================== Jenkinstown Resources — global styles Design: Claude Design handoff (dark petroleum theme). Section styling is inline in index.html per the design; this file holds globals, fonts, animation, scroll-reveal, focus states and the responsive rules. ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: #0C1E2E; color: #EDEFF1; font-family: 'Source Sans 3', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; overflow-x: hidden; } h1, h2, h3, h4 { font-family: 'Archivo', system-ui, sans-serif; margin: 0; } a { color: #EF7D22; text-decoration: none; } a:hover { color: #F5994F; } img { display: block; max-width: 100%; } ::selection { background: #EF7D22; color: #0C1E2E; } @keyframes fadeDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } /* Accessible skip link */ .skip-link { position: absolute; left: -999px; top: 0; z-index: 200; background: #EF7D22; color: #0C1E2E; font-weight: 700; padding: 10px 16px; border-radius: 0 0 4px 0; } .skip-link:focus { left: 0; } /* Visible focus ring (README requirement) */ a:focus-visible, button:focus-visible { outline: 2px solid #EF7D22; outline-offset: 2px; } /* Mobile dropdown nav (toggled by JS) */ .mobile-nav { display: none; } .mobile-nav.open { display: flex; } /* Scroll-reveal: content is visible by default (no-JS safe); JS opts in to the hidden-then-reveal behaviour by adding .reveal-ready to . */ .reveal { transition: opacity 0.9s ease, transform 0.9s ease; } body.reveal-ready .reveal { opacity: 0; transform: translateY(28px); } body.reveal-ready .reveal.is-visible { opacity: 1; transform: none; } /* Responsive (breakpoints from the design spec) */ @media (max-width: 900px) { .dnav { display: none !important; } .mburger { display: flex !important; } .about-grid { grid-template-columns: 1fr !important; gap: 48px !important; } .about-frame { display: none; } .value-grid { grid-template-columns: 1fr 1fr !important; } .services-grid { grid-template-columns: 1fr 1fr !important; } .gallery-grid { grid-template-columns: 1fr 1fr !important; grid-auto-rows: 160px !important; } } @media (max-width: 640px) { .value-grid { grid-template-columns: 1fr !important; } .services-grid { grid-template-columns: 1fr !important; } .gallery-grid { grid-template-columns: 1fr 1fr !important; } .lifecycle-grid { grid-template-columns: 1fr 1fr !important; gap: 32px 20px !important; } .lifecycle-rail { display: none; } .phase-labels, .phase-titles { grid-template-columns: 1fr !important; gap: 20px !important; } } @media (prefers-reduced-motion: reduce) { body.reveal-ready .reveal { opacity: 1; transform: none; } .hero-eyebrow { animation: none !important; } html { scroll-behavior: auto; } }