/* ========================================================================== Base: variables, typography and utilities (loaded on every page) ========================================================================== */ /* { outline: 1px solid red; }*/ :root { --header-h: 206px; --bg-top: #92f1ff; --bg-bottom: #008192; --panel: #006b7a; --accent: #92f1ff; /* Frosted panel behind white text. The tint is what gives contrast (white on it is 5.5:1 or better, even over the palest part of the page), so text stays readable if backdrop-filter isn't supported. */ --glass: rgba(0, 60, 70, 0.7); --glass-blur: blur(10px); } html { overflow-x: hidden; } body { color: rgb(255, 255, 255); background: linear-gradient(to bottom, var(--bg-top), var(--bg-bottom)); background-attachment: scroll; min-height: 100vh; margin: 0; padding: 0; } /* Every element that uses background: var(--glass) also gets the blur */ .site-nav, .sub-nav, footer, .home-content, .about-section, .about-block, .contact-section, .accordion, .showcase-img-text, .page-nav-prev, .page-nav-next { -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); } main { display: block; scroll-margin-top: var(--header-h); } /* Skip link: hidden until a keyboard user tabs to it */ .skip-link { position: fixed; top: -100px; left: 16px; z-index: 10000; background: #ffffff; color: #00262d; font-family: Montserrat, sans-serif; font-weight: 700; padding: 12px 20px; border-radius: 8px; text-decoration: none; } .skip-link:focus { top: 16px; } /* Visible keyboard focus: white ring with a dark inner edge so it shows on light and dark backgrounds */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 3px solid #ffffff; outline-offset: 3px; box-shadow: 0 0 0 2px #001e24; } strong { font-weight: bold; } /* width/height attributes reserve space before an image loads; height:auto keeps the CSS-set width from distorting them */ img { height: auto; } .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } p { font-family: Montserrat, sans-serif; line-height: 1.5; } /* reset.css sets line-height: 1, which crowds headings that wrap onto two lines */ h1, h2, h3, h4, h5, h6 { line-height: 1.25; } h1, h2 { font-family: video-light, sans-serif; font-weight: 700; font-size: 32px; margin: 0; } h3 { font-family: Montserrat, sans-serif; font-weight: 700; font-size: 24px; margin: 0; } h4 { font-family: Montserrat, sans-serif; font-size: 18px; margin: 0; } .line-break { width: 90%; border: 2px solid var(--accent); border-radius: 5px; color: var(--accent); margin: 20px 0; } /* Header height changes on small screens (used by the sticky sub-nav offsets) */ @media (max-width: 1080px) { :root { --header-h: 190px; } } /* ========================================================================== Motion ========================================================================== */ /* Scroll reveal. An inline script in adds .reveal-ready (skipped for reduced motion), so nothing is hidden if JavaScript is off. script.js adds .revealed as each [data-reveal] element scrolls into view. `translate` is used instead of `transform` so hover effects on the same element still work. */ .reveal-ready [data-reveal] { opacity: 0; translate: 0 24px; transition: opacity 0.6s ease, translate 0.6s ease, transform 0.3s ease; } .reveal-ready [data-reveal].revealed { opacity: 1; translate: 0 0; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }