/* NOAA, PMEL styles; Override USWDS styles */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Merriweather:opsz,wght@18..144,700&display=swap'); /* || VARIABLES */ :root { /* FONTS */ --FF: "Montserrat", "Source Sans Pro Web", sans-serif; /* Font face */ --FF-HERO-HEADING: "Merriweather", Georgia, "Times New Roman", serif; /* COLORS (with PMEL Drupal colors: --xyz) */ --ACCENT-COLOR: #003087; /* --pmel-secondary, dark blue */ --NOAA-SUPPORT-BLUE-COLOR: #d5e6ed; /* NOAA support palette Tone 2 (pale blue) */ --NOAA-DEEP-SEA-BLUE-COLOR: #00559b; /* NOAA deep sea blue */ --OAR-GREY-COLOR: #F0F0F0; /* --pmel-oar-grey, light grey */ --FOOTER-BGCOLOR: #333; /* --black, dark grey */ --FOOTER-FONT-COLOR: #fff; /* --white, white */ --LINK-COLOR: #007ABA; /* --pmel-tertiary, medium blue */ --PMEL-BLACK-COLOR: #232728; /* --pmel-black, blackish */ } /* || GENERAL STYLES */ html { scroll-behavior: smooth; font-family: var(--FF); } a:any-link { color: var(--LINK-COLOR); } /* || ALERT MESSAGE */ .usa-alert { margin-top: 0; } /* || BRANDING */ /* Hide logo, site name on mobile by default */ .usa-header--extended .noaa-logo, .usa-header--extended .usa-logo__text { display: none; } .site-name a, .site-name a:hover, .site-name a:visited { font-size: 1.25rem; text-decoration: none; color: var(--ACCENT-COLOR); } .parent-org { font-size: 0.875rem; font-size: 400; color: #232728; font-weight: normal; } /* Desktop breakpoint (1024px) - show logo, site name */ @media (min-width: 64em) { .usa-header--extended .noaa-logo, .usa-header--extended .usa-logo__text { display: block; } .usa-section .hero { padding-bottom: 0; padding-top: 0; } /* Navigation: Dropdown menus */ .usa-nav__submenu { background-color: var(--OAR-GREY-COLOR); } .usa-nav__submenu .usa-nav__submenu-item a:link, .usa-nav__submenu .usa-nav__submenu-item a:visited, .usa-nav__submenu .usa-nav__submenu-item a:hover { color: var(--PMEL-BLACK-COLOR); } } /* || NAVIGATION */ /* Remove border across top of nav bar */ .usa-header--extended .usa-nav { border-top: none; } /* || HERO */ .hero { background-color: var(--NOAA-SUPPORT-BLUE-COLOR); border-top: 1px solid #dfe1e2; border-bottom: 2px solid var(--NOAA-DEEP-SEA-BLUE-COLOR); } .hero h1 { font-family: var(--FF-HERO-HEADING); } /* || FOOTER */ .footer { background-color: var(--FOOTER-BGCOLOR); color: var(--FOOTER-FONT-COLOR); padding-bottom: 20px; } .footer a:link, .footer a:visited { color: var(--FOOTER-FONT-COLOR); text-decoration: none; } .footer a:hover { text-decoration: underline; } /* Target footer specifically to override USWDS defaults */ .usa-footer, .usa-footer [class*="usa-"] { font-family: var(--FF) !important; font-size: 1rem; } /* Sticky Footer - make a flex container that spans the full height of the viewport */ /* Ensure body takes up at least the full height of the screen */ body { display: flex; flex-direction: column; min-height: 100vh; margin: 0; } /* Tell main content area to grow and fill all available space */ main#main-content { flex: 1 0 auto; } /* Ensure the footer doesn't shrink */ footer.usa-footer { flex-shrink: 0; }