/* Restorative Futures - small layer of custom styling on top of Tailwind. Tailwind itself is loaded from the CDN in each page's . */ :root { color-scheme: light; } html { scroll-behavior: smooth; } body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* Visible, on-brand focus ring for keyboard users. */ :where(a, button, input, select, textarea, summary):focus-visible { outline: 3px solid #2f8d89; outline-offset: 2px; border-radius: 4px; } /* Active navigation item (set by assets/js/main.js). */ .nav-link.is-active { color: #1d5b5a; background-color: #e8f4f2; } .nav-link-mobile.is-active { color: #1d5b5a; background-color: #e8f4f2; } /* Decorative soft background used behind hero and CTA panels. */ .bg-grain { background-image: radial-gradient(60rem 30rem at 85% -10%, rgba(47, 141, 137, 0.16), transparent 60%), radial-gradient(40rem 25rem at 0% 110%, rgba(221, 130, 92, 0.14), transparent 60%); } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; } .skip-link:focus { left: 1rem; top: 1rem; padding: 0.75rem 1rem; background: #ffffff; color: #183d3c; border-radius: 0.5rem; box-shadow: 0 10px 30px rgba(24, 61, 60, 0.2); } /* ------------------------------------------------------------- navigation */ /* Dropdown menus in the desktop header (behaviour in assets/js/main.js). The label is a link and the chevron is a separate button, so the active state is carried by the row that wraps them both. */ .nav-dropdown__head.is-active, .nav-group__summary.is-active { color: #1d5b5a; background-color: #e8f4f2; } .nav-dropdown__panel { animation: nav-panel-in 120ms ease-out; } @keyframes nav-panel-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .nav-dropdown__toggle[aria-expanded="true"] .nav-dropdown__chevron { transform: rotate(180deg); } .nav-sublink.is-active { color: #1d5b5a; background-color: #e8f4f2; } /* Mobile submenus use
, so they work with JavaScript disabled. */ .nav-group > summary { list-style: none; cursor: pointer; } .nav-group > summary::-webkit-details-marker { display: none; } .nav-group[open] > summary .nav-group__chevron { transform: rotate(180deg); } /* ------------------------------------------------------------- accordions */ /* FAQ and sector accordions. */ .accordion > summary { list-style: none; cursor: pointer; } .accordion > summary::-webkit-details-marker { display: none; } .accordion[open] > summary .accordion__chevron { transform: rotate(180deg); }