/* Google Fonts Import (Make sure this is in your HTML or imported in CSS) */ @import url('https://fonts.googleapis.com/css2?family=Alex+Brush&family=Outfit:wght@300;400;500;600;700;800&display=swap'); /* ---------------------------------- GLOBAL THEME VARIABLES ----------------------------------- */ :root { /* Color Palette */ --primary: #0A1C36; --primary-light: #162E4F; --accent: #C59B27; --accent-hover: #E2B842; /* Backgrounds */ --bg-light: #FFFFFF; --bg-soft: #F4F7FB; /* Text Colors */ --text-dark: #1A2530; --text-muted: #5A6D81; --text-light: #FFFFFF; --text-light-muted: rgba(255, 255, 255, 0.86); --text-light-subtle: rgba(255, 255, 255, 0.72); /* Utilities */ --border-color: #E2E8F0; /* Typography */ --font-sans: 'Outfit', system-ui, -apple-system, sans-serif; --font-script: 'Alex Brush', cursive; } /* ---------------------------------- BASE RESET ----------------------------------- */ * { box-sizing: border-box; } body { margin: 0; padding: 0; background-color: var(--bg-light); font-family: var(--font-sans); color: var(--text-dark); overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { text-decoration: none; color: inherit; } ul { list-style: none; padding: 0; margin: 0; } button { font-family: var(--font-sans); cursor: pointer; border: none; background: none; } /* ---------------------------------- BASE TYPOGRAPHY ----------------------------------- */ h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: 0.5em; font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; color: var(--primary); } h1 { font-size: 3.5rem; font-weight: 800; letter-spacing: -0.03em; } h2 { font-size: 2.5rem; font-weight: 700; } h3 { font-size: 1.75rem; font-weight: 600; } h4 { font-size: 1.25rem; font-weight: 600; } p { margin-top: 0; margin-bottom: 1.5rem; line-height: 1.7; color: var(--text-muted); } /* ---------------------------------- DARK BACKGROUND TEXT OVERRIDES ----------------------------------- */ /* Ensure headings on dark backgrounds remain white */ .section-bg-dark h1, .section-bg-dark h2, .section-bg-dark h3, .section-bg-dark h4, .section-bg-dark h5, .section-bg-dark h6, .page-hero h1, .page-hero h2, .page-hero h3, .page-hero h4, .page-hero h5, .page-hero h6, .home-hero h1, .home-hero h2, .home-hero h3, .home-hero h4, .home-hero h5, .home-hero h6, .youth-hero h1, .youth-hero h2, .youth-hero h3, .youth-hero h4, .youth-hero h5, .youth-hero h6, .footer h1, .footer h2, .footer h3, .footer h4, .footer h5, .footer h6, .cta-banner h1, .cta-banner h2, .cta-banner h3, .cta-banner h4, .cta-banner h5, .cta-banner h6 { color: var(--text-light); } .section-bg-dark p, .page-hero p, .home-hero p, .youth-hero p, .cta-banner p, .footer p { color: var(--text-light-muted); } /* Hide the top-level H1 inside the widget data container */ .widget__content__data > h1 { display: none !important; } .sidebarBody ul.level-1 > li{text-align: left} .sidebarBody ul.level-1 > li > a{font-family: Arial} .sidebarBody ul.level-1 > li > a{font-size: 15px} .sidebarBody ul.level-1 > li > a{font-weight: 400} .sidebarBody ul.level-1 > li > a{text-transform: capitalize} .sidebarBody ul.level-1 > li > a{color: rgb(85, 85, 85)} .sidebarBody ul.level-1{background-color: rgb(242, 242, 242)} .sidebarBody ul.level-1 > li:hover > a{color: rgb(85, 85, 85)} .sidebarBody ul.level-1 > li:hover{background-color: rgb(231, 231, 231)} .sidebarBody ul.level-1.selected > li {background-color: rgb(231, 231, 231)} .sidebarBody ul.level-1.selected > li > a{color: rgb(85, 85, 85)} .sidebarBody ul.level-1 > li > a{padding-left: 10px !important; padding-right: 10px !important} .sidebarBody ul.level-1 > li > a{padding-top: 10px !important; padding-bottom: 10px !important} .sidebarBody ul.level-2 > li > a{font-family: Arial} .sidebarBody ul.level-2 > li > a{font-size: 16px} .sidebarBody ul.level-2 > li > a{font-weight: 400} .sidebarBody ul.level-2 > li > a{text-transform: none} .sidebarBody ul.level-2 > li > a{color: rgb(85, 85, 85)} .sidebarBody ul.level-2{background-color: rgb(242, 242, 242)} .sidebarBody ul.level-2 > li:hover > a{color: rgb(85, 85, 85)} .sidebarBody ul.level-2 > li:hover{background-color: rgb(231, 231, 231)} .sidebarBody ul.level-2.selected > li {background-color: rgb(231, 231, 231)} .sidebarBody ul.level-2.selected > li > a{color: rgb(85, 85, 85)} .sidebarBody ul.level-2 > li > a{padding-left: 10px !important; padding-right: 10px !important} .sidebarBody ul.level-2 > li > a{padding-top: 10px !important; padding-bottom: 10px !important} .sidebarBody ul.level-3 > li > a{font-family: Arial} .sidebarBody ul.level-3 > li > a{font-size: 16px} .sidebarBody ul.level-3 > li > a{font-weight: 400} .sidebarBody ul.level-3 > li > a{text-transform: none} .sidebarBody ul.level-3 > li > a{color: rgb(85, 85, 85)} .sidebarBody ul.level-3{background-color: rgb(242, 242, 242)} .sidebarBody ul.level-3 > li:hover > a{color: rgb(85, 85, 85)} .sidebarBody ul.level-3 > li:hover{background-color: rgb(231, 231, 231)} .sidebarBody ul.level-3.selected > li {background-color: rgb(231, 231, 231)} .sidebarBody ul.level-3.selected > li > a{color: rgb(85, 85, 85)} .sidebarBody ul.level-3 > li > a{padding-left: 10px !important; padding-right: 10px !important} .sidebarBody ul.level-3 > li > a{padding-top: 10px !important; padding-bottom: 10px !important} .sidebarBody ul.level-4 > li > a{font-family: Arial} .sidebarBody ul.level-4 > li > a{font-size: 16px} .sidebarBody ul.level-4 > li > a{font-weight: 400} .sidebarBody ul.level-4 > li > a{text-transform: none} .sidebarBody ul.level-4 > li > a{color: rgb(85, 85, 85)} .sidebarBody ul.level-4{background-color: rgb(242, 242, 242)} .sidebarBody ul.level-4 > li:hover > a{color: rgb(85, 85, 85)} .sidebarBody ul.level-4 > li:hover{background-color: rgb(231, 231, 231)} .sidebarBody ul.level-4.selected > li {background-color: rgb(231, 231, 231)} .sidebarBody ul.level-4.selected > li > a{color: rgb(85, 85, 85)} .sidebarBody ul.level-4 > li > a{padding-left: 10px !important; padding-right: 10px !important} .sidebarBody ul.level-4 > li > a{padding-top: 10px !important; padding-bottom: 10px !important} .sidebarBody ul.level-5 > li > a{font-family: Arial} .sidebarBody ul.level-5 > li > a{font-size: 16px} .sidebarBody ul.level-5 > li > a{font-weight: 400} .sidebarBody ul.level-5 > li > a{text-transform: none} .sidebarBody ul.level-5 > li > a{color: rgb(85, 85, 85)} .sidebarBody ul.level-5{background-color: rgb(242, 242, 242)} .sidebarBody ul.level-5 > li:hover > a{color: rgb(85, 85, 85)} .sidebarBody ul.level-5 > li:hover{background-color: rgb(231, 231, 231)} .sidebarBody ul.level-5.selected > li {background-color: rgb(231, 231, 231)} .sidebarBody ul.level-5.selected > li > a{color: rgb(85, 85, 85)} .sidebarBody ul.level-5 > li > a{padding-left: 10px !important; padding-right: 10px !important} .sidebarBody ul.level-5 > li > a{padding-top: 10px !important; padding-bottom: 10px !important}