/* Theme Name: Wales Utah Theme URI: https://walesutah.gov Description: Custom theme for Town of Wales, Utah official website Version: 1.0.9 Author: Town of Wales */ /* ============================================================================ TABLE OF CONTENTS - CSS Classes and IDs Documentation ============================================================================ This table documents all CSS classes and IDs in this file, their purpose, and notes about duplicates or conflicts. LEGEND: - [DUPLICATE] = Same class/ID name appears multiple times with different definitions - [CONFLICT] = Same class/ID has conflicting property definitions - [CONTEXT] = Class is redefined in different contexts (e.g., media queries, seasonal themes) - [SEASONAL] = Has seasonal variations (spring/summer/fall/winter) - [FIXED] = Issue has been resolved - [REFACTORED] = Code has been improved/refactored - [MISSING FROM TOC] = Class exists in CSS but not documented in table of contents - [NOTE] = Additional information or clarification ============================================================================ CURRENT STANDARDS (MAINTAINED) ============================================================================ [STANDARD] No inline styles in page content [STANDARD] Shared class usage (.info-box, .contact-info, .notice-info, etc.) [STANDARD] No decorative left borders (except side-nav hover/active) [STANDARD] Link colors use --color-link-default/--color-link-hover [STANDARD] Seasonal colors use CSS variables in :root and body.* blocks [STANDARD] Alternating section backgrounds use content-section nth-child rules ============================================================================ LAYOUT SYSTEM (Line ~702) ============================================================================ .layout--spaced-v - Adds vertical spacing (top/bottom padding) to sections .layout--fluid-h - Adds horizontal padding for fluid layouts .layout--text-max - Limits text content width for readability (max-width: 1200px) .layout--wrapper - Wrapper container with max-width and padding [CONTEXT] Has responsive override at line 723 ============================================================================ CARD SYSTEM (Line ~797) ============================================================================ [DUPLICATE] These card styles are duplicated at line ~1515 - should be removed .block - Generic block container with bottom margin [MISSING FROM TOC] Not documented in table of contents .cards - Card container wrapper (DUPLICATE - see CARDS section) .cards--large .card - Large card variant (DUPLICATE - see CARDS section) .cards__heading-wrapper - Card heading wrapper (DUPLICATE - see CARDS section) .cards__heading-wrapper .layout--wrapper - Layout wrapper (DUPLICATE - see CARDS section) .h2.crosshead - Section heading (DUPLICATE - see CARDS section) .h2.crosshead::after - Section heading underline (DUPLICATE - see CARDS section) .cards__inner - Card grid container (DUPLICATE - see CARDS section) .card - Individual card (DUPLICATE - see CARDS section) .card:hover - Card hover state (DUPLICATE - see CARDS section) ============================================================================ BUTTONS (Line ~1018) ============================================================================ [GROUPED] All button styles are now grouped together in one section .btn - Base button styling (inline-flex with gap support) [FIXED] Consolidated - removed duplicate inline-block version [SEASONAL] Has seasonal color variations .btn:hover - Button hover state [SEASONAL] Has seasonal color variations .btn--primary - Primary button variant .btn--secondary - Secondary button variant (#6c757d gray) [FIXED] Consolidated - removed duplicate #f3f4f6 version .btn--small - Small button variant .btn--large - Large button variant .btn--hero - Hero section button variant .btn--fees-toggle - Fees section toggle button ============================================================================ NAVIGATION (Line ~1112) ============================================================================ [GROUPED] All navigation styles are now grouped together in one section .section-nav - Section navigation container with light background .h-scroller - Horizontal scrolling container for navigation items .h-scroller__group - Flex container for horizontal navigation items .h-scroller__item - Individual navigation item in horizontal scroller .h-scroller__link - Styled link for horizontal navigation items .h-scroller__label - Label text styling for navigation items .main-nav - Main navigation bar .nav-list - Main navigation list container .nav-list a - Navigation link styling [SEASONAL] Has seasonal color variations .nav-item-has-dropdown - Navigation item that contains a dropdown menu .nav-dropdown - Dropdown menu container [CONTEXT] Has mobile menu variant (.mobile-menu-content .nav-dropdown) .nav-dropdown a - Dropdown menu link styling [SEASONAL] Has seasonal color variations .mobile-menu-toggle - Mobile menu toggle button .mobile-menu-overlay - Mobile menu overlay container .mobile-menu-panel - Mobile menu side panel .mobile-menu-content - Mobile menu content container .sidebar-nav - Sidebar navigation container .side-nav - Sidebar navigation container .side-nav a - Sidebar navigation link [SEASONAL] Has seasonal active/hover border colors [STANDARD] Left border only for hover/active ============================================================================ PAGE TITLE & BREADCRUMBS (Line ~730) ============================================================================ .page-title - Page title section with background and padding .page-title--no-image - Page title variant for pages without hero images [CONTEXT] Has responsive override at line 740 .page-title__heading - Main page title heading [CONTEXT] Has responsive override [SEASONAL] Has seasonal border-bottom colors .page-title__excerpt - Subtitle/description text below page title .page-title__cta - Call-to-action section in page title (Line ~5141) .cta-note - CTA note text (Line ~5146) .breadcrumbs - Breadcrumb navigation container .breadcrumbs__list - Flex container for breadcrumb items .breadcrumbs__item - Individual breadcrumb item .breadcrumbs__link - Styled link for breadcrumb navigation .breadcrumbs__label.is-active - Active/current breadcrumb item ============================================================================ CARDS (Line ~1515) ============================================================================ [GROUPED] All card styles are now grouped together in one section [DUPLICATE] Card styles also exist at line ~801 - should be removed (old location) .cards - Card container wrapper .cards--large .card - Large card variant with increased bottom margin .cards__heading-wrapper - Wrapper for card section heading .cards__heading-wrapper .layout--wrapper - Layout wrapper override for card headings .cards__inner - Grid container for card layout .h2.crosshead - Section heading with decorative underline [DUPLICATE] Also defined at line ~817 - should be removed .h2.crosshead::after - Decorative underline for section heading [DUPLICATE] Also defined at line ~825 - should be removed .card - Individual card component .card:hover - Hover state for cards .card__inner - Inner container for card content using flexbox .card__head - Card header section for images .card__image - Image container with background image support .card__image img - Image element styling .card__body - Card content area with padding .card__heading - Card title heading .card__subheading - Card subtitle .card__summary - Card summary/content area .card__summary .assignments - Assignments section within card .content-card - Content card component (Line ~1667) [SEASONAL] Has seasonal border colors on hover [NOTE] Also listed in MAIN CONTENT section - this is the main definition .content-card::before - Content card decorative top border [SEASONAL] Has seasonal gradient colors .content-card:hover - Content card hover state .content-card:hover::before - Content card hover decorative border .content-card h3 - Content card heading .content-card:hover h3 - Content card heading on hover .content-card p - Content card paragraph .content-card a:not(.btn) - Content card links (excluding buttons) .content-card a:not(.btn):hover - Content card link hover state ============================================================================ BACKGROUND COLORS (Line ~922) ============================================================================ .bg--none - Transparent background utility .bg--light - Light gray background utility (#f8f9fa) .bg--dark - Dark background with white text .bg--wales-blue - Wales-themed blue gradient background .bg--wales-green - Wales-themed green gradient background .bg--logo - Placeholder logo background with "W" letter ============================================================================ TEXT CONTENT (Line ~980) ============================================================================ .text--content - Main content text styling container .text--content h2 - Level 2 heading in content area .text--content h3 - Level 3 heading in content area .text--content p - Paragraph text in content area .text--content ul - Unordered list in content area .text--content li - List item in content area .text--content a - Links in content area .text--content a:hover - Link hover state .text-muted - Muted/secondary text utility (Line ~2010) [DUPLICATE] Also defined at line ~2016 - should be removed .links a - Link styling utility class (Line ~1028) [DUPLICATE] Same styling as .text--content a [DUPLICATE] Also defined at line ~2020 - should be removed .links a:hover - Link hover state (Line ~1033) [DUPLICATE] Also defined at line ~2025 - should be removed ============================================================================ UTILITY CLASSES (Line ~1024) ============================================================================ .lobotomize--level - Lobotomized owl selector for vertical spacing [DUPLICATE] Also defined at line ~2016 - should be removed ============================================================================ DOCUMENTS & FILE VIEWER (Line ~1730) ============================================================================ [GROUPED] All document and file viewer styles are now grouped together in one section .documents-grid--file-viewer - Grid layout for file viewer (2fr 1fr grid) [FIXED] Renamed from .documents-grid to avoid conflict .file-viewer-section - File viewer container with card styling .file-viewer-container - Inner container for file viewer using flexbox .file-viewer-header - Header section of file viewer .file-viewer-header h3 - Heading in file viewer header .file-controls - Container for file control buttons .file-viewer-content - Content area of file viewer .file-viewer-placeholder - Placeholder text when no file is selected .recent-documents - Recent documents sidebar container .document-list - List container for documents .document-item - Individual document item in list [CONTEXT] Base version (48px icon) and grid version (56px icon) have different styling .document-item:hover - Hover state for document items .document-icon - Icon container for documents .document-info - Document info container .document-info h4 - Document title heading (base version) .document-info h3 - Document title heading (grid version) .document-info p - Document metadata text .document-date - Date text in grid documents .documents-grid - Grid layout for agendas/minutes (auto-fill grid) [FIXED] Now the only .documents-grid definition .documents-grid .document-item - Document item in grid context .documents-grid .document-icon - Document icon in grid context .documents-grid .document-info - Document info in grid context .no-documents - Empty state message when no documents available .pdf-selector-container - Container for PDF selector dropdown .pdf-selector-label - Label for PDF selector .pdf-selector - PDF selection dropdown [SEASONAL] Has seasonal hover/focus border colors .pdf-viewer-wrapper - Container for PDF iframe viewer .pdf-viewer-iframe - PDF iframe element .calendar-embed-iframe - Calendar iframe element ============================================================================ FORMS (Line ~2021) ============================================================================ [GROUPED] All form styles are now grouped together in one section .reservation-form - Reservation form container .contact-form - Contact form container .form-row - Form row (grid container) .form-group - Form group container [FIXED] Consolidated - merged duplicate definitions from reservation and contact forms .form-group label - Form label .form-group input - Form input field .form-group select - Form select dropdown .form-group textarea - Form textarea .form-message - Form message container .form-message--success - Success message variant .form-message--error - Error message variant .form-message--hidden - Hidden form message utility .form-actions - Form action buttons container .submit-btn - Form submit button [MOVED] Moved from buttons section to forms section .submit-btn:hover - Form submit button hover state .form-note - Form note text ============================================================================ MEETING & CONTACT (Line ~2034) ============================================================================ .meeting-schedule-card - Meeting schedule card container .meeting-card - Meeting card container .meeting-info - Meeting information grid .contact-details - Contact details container (Line ~2058) .contact-info - Contact information container (Line ~3218) .contact-item - Individual contact item (Line ~3249) [SEASONAL] Has seasonal h3 colors .contact-grid - Grid layout for contact items (Line ~3242) .contact-card - Contact card container [STANDARD] No left border .contact-form - Contact form container (Line ~5381) ============================================================================ HEADER & LOGO (Line ~2175) ============================================================================ [GROUPED] All header and logo styles are now grouped together in one section .header .container - Header container override (no max-width) .header - Fixed header container .header.scrolled-down - Header when scrolled down (hidden) .header.has-background - Header when it has background (scrolled) [SEASONAL] Has seasonal background colors .header-content - Header content flex container .header-actions - Header actions container (menu toggle) [MOVED] Moved from navigation section .logo - Logo block container [SEASONAL] Has seasonal background colors .logo a - Logo link .logo h1 - Logo heading .logo p - Logo subtitle .logo-image - Logo image element .header.has-background .logo-image - Shrunk logo when scrolled [SEASONAL] Spring/Summer header and logo background gradients [SEASONAL] Fall/Winter header and logo background gradients [CONTEXT] Has responsive overrides in header section .main-nav - Main navigation bar (Line ~1160) .mobile-menu-toggle - Mobile menu toggle button (Line ~1323) .mobile-menu-toggle-text - Mobile menu toggle text label (Line ~1345) ============================================================================ MOBILE MENU (Line ~1350) ============================================================================ .mobile-menu-overlay - Mobile menu overlay container .mobile-menu-overlay.active - Active state for mobile menu overlay .mobile-menu-backdrop - Mobile menu backdrop .mobile-menu-panel - Mobile menu side panel .mobile-menu-close - Mobile menu close button .mobile-menu-content - Mobile menu content container .mobile-menu-content .nav-list - Navigation list in mobile menu .mobile-menu-content .nav-list a - Navigation links in mobile menu .mobile-menu-content .nav-dropdown - Dropdown in mobile menu ============================================================================ HERO SECTION (Line ~3168) ============================================================================ .hero - Hero section container [CONTEXT] Has homepage-specific styling at line 3183 [CONTEXT] Has responsive overrides .hero-content - Hero content container .hero-content h1 - Hero main heading (Line ~3199) [CONTEXT] Has responsive overrides .hero-subtitle - Hero subtitle (Line ~3202) [CONTEXT] Has responsive overrides .hero-description - Hero description text (Line ~3211) .btn--hero - Hero section button (Line ~1065) ============================================================================ MAIN CONTENT (Line ~3265) ============================================================================ .main-content - Main content container (Line ~3559) [CONTEXT] Has homepage-specific styling .content-section - Content section container (Line ~3563) [SEASONAL] Has seasonal alternating backgrounds .content-section h2 - Section heading (Line ~3571) [SEASONAL] Has seasonal colors and borders .content-section h3 - Subsection heading (Line ~3580) .content-section h3:first-child - First subsection heading (Line ~3588) .content-section p - Section paragraph (Line ~3592) .content-section p:last-child - Last paragraph in section (Line ~3598) .content-section ul - Unordered list in section (Line ~3602) .content-section ol - Ordered list in section .content-section li - List item in section (Line ~3609) .content-section li:last-child - Last list item (Line ~3614) .content-grid - Grid layout for content items (Line ~3618) .content-card - Content card component (Line ~3625) [NOTE] Main definition in CARDS section (Line ~1667) [SEASONAL] Has seasonal border colors on hover .content-card::before - Content card decorative top border [SEASONAL] Has seasonal gradient colors .content-card:hover - Content card hover state .content-card:hover::before - Content card hover decorative border .content-card h3 - Content card heading .content-card:hover h3 - Content card heading on hover .content-card p - Content card paragraph .content-card a:not(.btn) - Content card links (excluding buttons) .content-card a:not(.btn):hover - Content card link hover state .content-with-sidebar - Content with sidebar layout .content-main - Main content area in sidebar layout .sidebar-nav - Sidebar navigation container (Line ~1499) ============================================================================ DUTIES & SERVICES (Line ~3429) ============================================================================ .duties-grid - Grid layout for duty items .duty-item - Individual duty item .duty-item li::before - Custom checkmark for duty items .services-grid - Grid layout for service items .service-card - Service card container .service-icon - Service icon element .service-item - Service item container [STANDARD] No left border ============================================================================ PLANNING & CEMETERY (Line ~3503) ============================================================================ .planning-content - Planning section content .cemetery-content - Cemetery section content .parks-content - Parks section content .welsh-days-content - Welsh Days section content .planning-details - Planning details container (Line ~3507) .park-features - Park features container .event-details - Event details container ============================================================================ ELECTION (Line ~3515) ============================================================================ .election-info - Election information container .election-notice - Election notice box [STANDARD] No left border .election-notice h3 - Election notice heading [SEASONAL] Has seasonal colors .election-notice h4 - Election notice subheading [SEASONAL] Has seasonal colors .election-notice h5 - Election notice sub-subheading [SEASONAL] Has seasonal colors .election-year-details - Election year collapsible details (Line ~3519) .election-year-summary - Election year summary (clickable) [SEASONAL] Has seasonal colors .election-year-summary::after - Arrow indicator for collapsible [SEASONAL] Has seasonal colors .election-year-content - Election year content (when expanded) .election-info-section - Election information section (Line ~3575) .election-info-section h4 - Election info section heading [SEASONAL] Has seasonal colors and borders .election-info-section h5 - Election info section subheading [SEASONAL] Has seasonal colors ============================================================================ BUSINESS & ANIMAL CONTROL (Line ~3660) ============================================================================ .business-info - Business information container [STANDARD] No left border .animal-control-info - Animal control information container [STANDARD] No left border ============================================================================ HISTORICAL & FRAUD NOTICE (Line ~3673) ============================================================================ .historical - Historical section (full-width colored background) [SEASONAL] Has seasonal background gradients (Line ~3692) .historical-content - Historical content container (Line ~3764) .historical-content-wrapper - Historical content wrapper (Line ~3785) .historical-content--preview - Historical content preview (truncated) (Line ~3790) .historical-fade-overlay - Fade overlay for preview (Line ~3797) .historical-continue - Continue reading link (Line ~3809) .fraud-notice - Fraud notice section (full-width colored background) [SEASONAL] Has seasonal background gradients .fraud-info - Fraud information container .fraud-link - Fraud warning link (Line ~3915) ============================================================================ FOOTER (Line ~3919) ============================================================================ .footer - Footer container [SEASONAL] Has seasonal background gradients .footer-content - Footer content grid (Line ~3926) .footer-section - Footer section container .footer-section h3 - Footer section heading (Line ~3933) [SEASONAL] Has seasonal colors .footer-section p - Footer section paragraph (Line ~3938) [SEASONAL] Has seasonal colors .footer-bottom - Footer bottom bar (Line ~3944) .footer-bar - Fixed footer bar at bottom of page (Line ~3952) [SEASONAL] Has seasonal background gradients .footer-bar.scrolled-down - Footer bar when scrolled down (hidden) (Line ~3970) .footer-bar-content - Footer bar content container (Line ~3974) .footer-bar-weather - Weather section in footer bar (Line ~3984) .footer-bar-weather-main - Weather main display (Line ~3993) .footer-bar-weather-icon - Weather icon (Line ~3999) .footer-bar-weather-temps - Weather temperatures container (Line ~4004) .footer-bar-weather-temp - Weather temperature display (Line ~4010) .footer-bar-weather-feels - "Feels like" temperature (Line ~4020) .footer-bar-weather-details - Weather details (condition, humidity) (Line ~4027) .footer-bar-weather-condition - Weather condition text (Line ~4037) .footer-bar-weather-humidity - Humidity text (Line ~4043) .footer-bar-time - Time section in footer bar .footer-bar-time-clock - Clock display .footer-bar-time-zone - Timezone label .footer-bar-location - Location section in footer bar (Line ~4042) .footer-bar-location-name - Location name (Line ~4056) .footer-bar-location-address - Location address (Line ~4062) .footer-bar-contact - Contact section in footer bar (Line ~4066) .footer-bar-contact-phone - Contact phone number (Line ~4073) .footer-bar-contact-email - Contact email (Line ~4079) ============================================================================ COUNCIL & STAFF (Line ~4485) ============================================================================ .council-grid - Grid layout for council members .council-member - Individual council member card .staff-grid - Grid layout for staff members .staff-member - Individual staff member card .assignments - Assignments section (Line ~4527) .assignments h4 - Assignments heading .assignments ul - Assignments list (Line ~4532) .assignments li - Assignment list item (Line ~4539) ============================================================================ PARKS & RECREATION (Line ~4543) ============================================================================ .fee-section - Fee section container .fee-cards - Grid of fee cards (Line ~4548) .fee-card - Individual fee card (Line ~4555) .fee-amount - Fee amount display (Line ~4569) .fee-description - Fee description text (Line ~4576) .rental-fees-section - Rental fees section .rental-category - Rental category container .rental-category-header - Rental category header .rental-badge - Rental badge (free/resident/nonresident) .rental-badge--free - Free rental badge .rental-badge--resident - Resident rental badge .rental-badge--nonresident - Non-resident rental badge .rental-fees-grid - Grid of rental fee items .rental-fee-item - Individual rental fee item .fee-details - Fee details container .fee-note - Fee note text .reservations-list - Grid of reservation items .reservation-item - Individual reservation item [STANDARD] No left border .regular-reservations - Regular reservations section .fee-summary - Fee summary container .fee-summary-grid - Grid of fee summary items .fee-summary-item - Individual fee summary item .fee-summary--prominent - Prominent fee summary variant .fees-section-prominent - Prominent fees section (Line ~5030) .fees-header - Fees section header .fees-intro - Fees introduction text .fees-details - Collapsible fees details (Line ~5064) .fees-details--prominent - Prominent fees details variant .fees-summary - Fees summary (clickable) .fees-summary--prominent - Prominent fees summary variant .fees-title - Fees title text .summary-icon - Summary expand/collapse icon .fees-content - Fees content (when expanded) .fee-calculation - Fee calculation display .fee-calculation--form - Fee calculation form variant .fee-placeholder - Fee calculation placeholder .fee-breakdown - Fee breakdown list .fee-line - Individual fee line item .fee-value - Fee value display .fee-value--total - Total fee value .fee-refundable - Refundable fee indicator .fee-total - Total fee container .fee-note-small - Small fee note text ============================================================================ CALENDAR (Line ~2000) ============================================================================ .calendar-embed-wrapper - Calendar embed wrapper container .calendar-embed-iframe - Calendar iframe element .calendar-events - Calendar events container .events-subtitle - Events subtitle text .events-list - List of calendar events .calendar-event-item - Individual calendar event item .event-date - Event date display .event-month - Event month text .event-day - Event day number .event-details - Event details container .event-details h4 - Event title .event-time - Event time text .event-location - Event location text .event-description - Event description text ============================================================================ WELSH DAYS & EVENTS (Line ~5523) ============================================================================ .event-highlight-card - Event highlight card container [SEASONAL] Has seasonal background gradients .event-highlight-content - Event highlight content (Line ~5532) .event-highlight-title - Event highlight title (Line ~5537) .event-highlight-date - Event highlight date (Line ~5543) .event-highlight-subtitle - Event highlight subtitle (Line ~5549) .event-info-box - Event information box [STANDARD] No left border .event-info-box h3 - Event info box heading [SEASONAL] Has seasonal colors .event-info-box a - Event info box link [SEASONAL] Has seasonal colors .sponsor-card - Sponsor card container .sponsor-card p - Sponsor card text [SEASONAL] Has seasonal colors .sponsors-grid - Grid of sponsor cards .heritage-highlight - Heritage highlight box .heritage-link-wrapper - Heritage link wrapper .heritage-link - Heritage link styling [SEASONAL] Has seasonal colors and borders .heritage-link:hover - Heritage link hover state [SEASONAL] Has seasonal background colors .get-involved-section - Get involved section [SEASONAL] Has seasonal border colors .get-involved-section h2 - Get involved heading [SEASONAL] Has seasonal colors .get-involved-section p:last-child - Get involved last paragraph [SEASONAL] Has seasonal colors ============================================================================ INFO BOXES & NOTICES ============================================================================ .info-box - Information box container [STANDARD] No left border .info-box h4 - Info box heading .info-box ul - Info box list .info-box li - Info box list item .notice-info - Notice information box .notice-info--highlight - Highlighted notice variant .notice-info--spaced - Spaced notice variant (Line ~5710) .notice-info--bottom-spaced - Bottom-spaced notice variant (Line ~5714) .thank-you - Thank you message container (Line ~5588) ============================================================================ TIMELINE (Line ~5424) ============================================================================ .dates-timeline - Timeline grid container .timeline-item - Individual timeline item [STANDARD] No left border .timeline-item h3 - Timeline item heading ============================================================================ MODAL (Line ~4928) ============================================================================ .modal - Modal overlay container .modal-overlay - Modal backdrop overlay (Line ~4942) .modal-content - Modal content container (Line ~4952) .modal-header - Modal header (Line ~4975) .modal-header h2 - Modal heading .modal-close - Modal close button (Line ~4983) .modal-body - Modal body content (Line ~4997) .modal--hidden - Hidden modal utility class (Line ~5718) ============================================================================ SEASON TESTER (DEVELOPMENT) (Line ~5446) ============================================================================ .season-tester - Season tester container .season-buttons - Season button container (Line ~5460) .season-btn - Season button base (Line ~5467) .spring-btn - Spring season button (Line ~5477) .summer-btn - Summer season button (Line ~5486) .fall-btn - Fall season button (Line ~5495) .winter-btn - Winter season button (Line ~5504) .reset-btn - Reset season button (Line ~5513) ============================================================================ CONTENT TEXT UTILITIES ============================================================================ .content-text-large - Large content text .content-text-normal - Normal content text ============================================================================ UTILITY CLASSES (Line ~5697) ============================================================================ .content-grid--spaced - Spaced content grid (Line ~5640) .services-grid--spaced - Spaced services grid (Line ~5702) .calendar-events--spaced - Spaced calendar events (Line ~5706) .reservation-process-list - Reservation process list (Line ~5726) .reservation-note - Reservation note text (Line ~5731) .fee-breakdown--hidden - Hidden fee breakdown utility (Line ~5736) .fee-placeholder--hidden - Hidden fee placeholder utility (Line ~5740) .form-message--hidden - Hidden form message utility (Line ~5744) .fees-summary--hidden - Hidden fees summary utility (Line ~5722) ============================================================================ SECTION LAYOUT VARIATIONS (Line ~5748) ============================================================================ .section--wide - Wide section (breaks out of container) (Line ~5753) .section--narrow - Narrow section (centered, constrained width) (Line ~5764) .section--full-bleed - Full viewport width section (Line ~5771) .section--full-bleed-content - Content wrapper in full-bleed section (Line ~5781) .section--split - Two-column split layout (Line ~5786) .section--split-left - Split layout (content left, visual right) (Line ~5795) .section--split-right - Split layout (content right, visual left) (Line ~5799) .section--split-content - Content area in split layout .section--split-visual - Visual area in split layout .section--asymmetric - Asymmetric two-column layout (2fr 1fr) .col--wide - Wide column (2/3 width) .col--narrow - Narrow column (1/3 width) .section--cards-bg - Cards with background section (Line ~5842) .section--staggered - Staggered content blocks section .staggered-item - Individual staggered item .staggered-item--left - Left-aligned staggered item [STANDARD] No left border .staggered-item--right - Right-aligned staggered item [SEASONAL] Has seasonal border-right colors .section--bg-gradient-light - Light gradient background .section--bg-gradient-tint - Tinted gradient background [SEASONAL] Has seasonal gradient variations (Line ~5921) .section--diagonal-accent - Section with diagonal accent (Line ~5938) .section--bordered-accent - Section with bordered accent (Line ~5956) .section--highlighted - Highlighted section (stands out) (Line ~5963) .section--text-only - Text-only section (minimal styling) (Line ~5971) .section--image-bg - Section with image background (Line ~5979) .section--image-bg::before - Image background overlay (Line ~6167) .content-section.section--colored-bg - Generic full-width colored background (Line ~6186) [SEASONAL] Has seasonal background gradients (Line ~6031) ============================================================================ CONTAINER (Line ~2835) ============================================================================ .container - Main container (max-width: 1300px) .header .container - Header container override (no max-width) (Line ~3092) [CONTEXT] Has responsive override ============================================================================ BODY CLASSES (SEASONAL THEMES) (Line ~2210) ============================================================================ body.spring - Spring theme (March-May) (Line ~2226) [REFACTORED] Now includes CSS custom properties (--season-primary, etc.) body.summer - Summer theme (June-August) (Line ~2226) [REFACTORED] Now includes CSS custom properties (--season-primary, etc.) body.fall - Fall theme (September-November) (Line ~2400) [REFACTORED] Now includes CSS custom properties (--season-primary, etc.) body.winter - Winter theme (December-February) (Line ~2400) [REFACTORED] Now includes CSS custom properties (--season-primary, etc.) body.homepage - Homepage variant ============================================================================ MEDIA QUERIES (Line ~2075) ============================================================================ @media (max-width: 1023px) - Tablet and mobile breakpoint @media (max-width: 480px) - Small mobile breakpoint @media print - Print styles (Line ~6154) [DUPLICATE] Multiple print style definitions - should be merged ============================================================================ KEYFRAMES (Line ~4965) ============================================================================ @keyframes modalSlideIn - Modal slide-in animation ============================================================================ END OF TABLE OF CONTENTS ============================================================================ */ /* Reset and Base Styles */ * { margin: 0; padding: 0; box-sizing: border-box; } /* Modern Layout System - Inspired by Visit Saint Paul */ .layout--spaced-v { padding-top: 3rem; padding-bottom: 3rem; } .layout--fluid-h { padding-left: 1rem; padding-right: 1rem; } .layout--text-max { max-width: 1200px; margin: 0 auto; } .layout--wrapper { max-width: 1200px; margin: 0 auto; padding: 0 2rem; } @media (max-width: 768px) { .layout--wrapper { padding: 0 1.5rem; } } /* Page Title Styles */ .page-title { background: var(--color-bg-light); padding: 3rem 0; } .page-title--no-image { background: var(--color-bg-light); padding-top: 25vh; } @media (max-width: 1023px) { .page-title--no-image { padding-top: 15vh; background: var(--color-bg-light); } } .breadcrumbs { margin-bottom: 2rem; } .breadcrumbs__list { display: flex; list-style: none; margin: 0; padding: 0; } .breadcrumbs__item { margin-right: 0.5rem; } .breadcrumbs__item:not(:last-child)::after { content: "›"; margin-left: 0.5rem; color: var(--color-text-muted); } .breadcrumbs__link { color: var(--color-text-muted); text-decoration: none; } .breadcrumbs__link:hover { color: var(--color-gray-600); } .breadcrumbs__label.is-active { color: var(--color-gray-600); font-weight: 500; } .page-title__heading { font-size: 3rem; font-weight: 700; color: var(--color-text-dark); margin-bottom: 1rem; line-height: 1.2; } .page-title__excerpt { font-size: 1.125rem; color: var(--color-text-muted); line-height: 1.6; } /* Card System */ .block { margin-bottom: 3rem; } .cards { background: transparent; } .cards--large .card { margin-bottom: 2rem; } .cards__heading-wrapper { margin-bottom: 2rem; } .cards__heading-wrapper .layout--wrapper { text-align: center; } .h2.crosshead { font-size: 2.5rem; font-weight: 700; color: var(--color-text-dark); margin-bottom: 0.5rem; position: relative; } .h2.crosshead::after { content: ""; display: block; width: 60px; height: 4px; background: var(--color-link-default); margin: 1rem auto 0; border-radius: 2px; } .cards__inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; margin-top: 2rem; } .card { background: var(--color-bg-white); border-radius: 0.75rem; box-shadow: 0 4px 6px -1px var(--color-shadow-light), 0 2px 4px -1px var(--color-shadow-medium); overflow: hidden; transition: all 0.3s ease; } .card:hover { transform: translateY(-4px); box-shadow: 0 10px 25px -3px var(--color-shadow-light), 0 4px 6px -2px var(--color-shadow-medium); } .card__inner { height: 100%; display: flex; flex-direction: column; } .card__head { position: relative; height: 200px; overflow: hidden; } .card__image { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background-size: cover; background-position: center; background-repeat: no-repeat; } .card__image img { width: 100%; height: 100%; object-fit: cover; } .card__body { padding: 1.5rem; flex-grow: 1; display: flex; flex-direction: column; } .card__heading { font-size: 1.25rem; font-weight: 600; color: var(--color-text-dark); margin-bottom: 0.5rem; line-height: 1.3; } .card__subheading { font-size: 1rem; color: var(--color-text-muted); margin-bottom: 1rem; font-weight: 500; } .card__summary { flex-grow: 1; } .card__summary p { margin-bottom: 0.5rem; color: var(--color-gray-600); } .card__summary .assignments { margin-top: 1rem; } .card__summary .assignments h4 { font-size: 0.875rem; font-weight: 600; color: var(--color-gray-600); margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.05em; } .card__summary .assignments ul { list-style: none; padding: 0; margin: 0; } .card__summary .assignments li { padding: 0.25rem 0; color: var(--color-text-muted); font-size: 0.875rem; position: relative; padding-left: 1rem; } .card__summary .assignments li::before { content: "•"; color: var(--color-link-default); font-weight: bold; position: absolute; left: 0; } /* Background Colors */ .bg--none { background: transparent; } .bg--light { background: var(--color-bg-light); } .bg--dark { background: var(--color-bg-dark); color: var(--color-white); } .bg--wales-blue { background: linear-gradient(135deg, var(--wales-blue-start) 0%, var(--wales-blue-end) 100%); } .bg--wales-green { background: linear-gradient(135deg, var(--wales-green-start) 0%, var(--wales-green-end) 100%); } .bg--logo { background-image: url('data:image/svg+xml,W'); background-size: 60px 60px; background-position: center; background-repeat: no-repeat; } /* Text Content */ .text--content { line-height: 1.6; } .text--content h2 { font-size: 2rem; font-weight: 700; color: var(--color-text-dark); margin-bottom: 1rem; } .text--content h3 { font-size: 1.5rem; font-weight: 600; color: var(--color-gray-600); margin-bottom: 0.75rem; } .text--content p { margin-bottom: 1rem; color: var(--color-text-muted); } .text--content ul { margin-bottom: 1rem; padding-left: 1.5rem; } .text--content li { margin-bottom: 0.5rem; color: var(--color-text-muted); } .text--content a { color: var(--color-link-default); text-decoration: none; } .text--content a:hover { color: var(--color-link-hover); text-decoration: underline; } /* Utility Classes */ .lobotomize--level > * + * { margin-top: 1rem; } .links a { color: var(--color-link-default); text-decoration: none; } .links a:hover { color: var(--color-link-hover); text-decoration: underline; } .btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border: none; border-radius: 0.375rem; font-size: 0.875rem; font-weight: 500; text-decoration: none; cursor: pointer; transition: all 0.2s ease; } .btn--primary { background: var(--color-btn-primary); color: var(--color-white); } .btn--primary:hover { background: var(--color-btn-primary-hover); color: var(--color-white); } .btn--secondary { background: var(--color-btn-secondary); color: var(--color-white); } .btn--secondary:hover { background: var(--color-btn-secondary-hover); color: var(--color-white); } /* Button Variants */ .btn--small { padding: 0.5rem 1rem; font-size: 0.875rem; margin-top: 0; } .btn--large { padding: 1rem 2.5rem; font-size: 1.125rem; font-weight: 600; } .btn--hero { font-size: 1.5rem; font-weight: 700; padding: 1rem 2.5rem; border-radius: 0.5rem; margin-top: 2rem; text-shadow: none; box-shadow: 0 4px 12px var(--color-shadow-dark); transition: all 0.3s ease; } .btn--hero:hover { transform: translateY(-2px); box-shadow: 0 6px 16px var(--color-shadow-dark); } .xpressbillpay-buttons { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: center; text-align: center; flex-direction: column; } .xpressbillpay-button { display: inline-block; line-height: 0; } .xpressbillpay-button img { display: block; max-width: 260px; width: 100%; height: auto; } .btn--billpay { display: inline-flex; align-items: center; justify-content: center; width: 100%; max-width: 260px; min-height: 64px; padding: 0.85rem 1.5rem; text-align: center; } .xpressbillpay-cta { text-align: center; margin-top: 1rem; } .xpressbillpay-logo { max-width: 280px; margin: 0 0 1rem 0; } .xpressbillpay-logo img { display: block; width: 100%; height: auto; } .btn--fees-toggle { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; padding: 0.875rem 1.75rem; font-size: 1rem; font-weight: 600; } .btn--fees-toggle .btn-icon { font-size: 0.875rem; transition: transform 0.3s ease; } /* ============================================================================ NAVIGATION ============================================================================ */ /* Section Navigation (Horizontal Scroller) */ .section-nav { background: var(--color-bg-light); border-bottom: 1px solid var(--color-border-light); padding: 1rem 0; } .h-scroller { overflow-x: auto; -webkit-overflow-scrolling: touch; } .h-scroller__group { display: flex; list-style: none; margin: 0; padding: 0; white-space: nowrap; } .h-scroller__item { flex-shrink: 0; } .h-scroller__link { display: block; padding: 0.75rem 1.5rem; color: var(--color-gray-600); text-decoration: none; border-radius: 0.375rem; transition: all 0.2s ease; } .h-scroller__link:hover { background-color: var(--color-gray-100); color: var(--color-text-dark); } .h-scroller__label { font-weight: 500; font-size: 0.875rem; } /* Main Navigation */ .main-nav { flex: 1; display: flex; align-items: flex-start; justify-content: flex-end; padding: 1rem 0 0 0; position: relative; } .header.has-background .main-nav { align-items: flex-end; padding: 0 0 1rem 0; } .nav-list { display: flex; list-style: none; gap: 0; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; } .main-nav .nav-list { background: var(--season-primary); } .nav-list a { color: var(--season-text-on-gradient); text-decoration: none; font-weight: 400; font-size: 1.5rem; padding: 0.5rem 1rem; transition: opacity 0.3s ease; white-space: nowrap; } .nav-list a:hover { opacity: 0.8; } /* Navigation Dropdown */ .nav-item-has-dropdown { position: relative; } .nav-item-has-dropdown > a::after { content: "▼"; font-size: 0.7em; margin-left: 0.5rem; opacity: 0.7; } .nav-dropdown { display: none; position: absolute; top: 100%; left: 0; background: var(--color-bg-white); min-width: 200px; box-shadow: 0 4px 6px -1px var(--color-shadow-light), 0 2px 4px -1px var(--color-shadow-medium); border-radius: 0.375rem; padding: 0.5rem 0; margin-top: 0; padding-top: 0.75rem; z-index: 1000; list-style: none; } /* Align last dropdown to the right edge of its parent */ .nav-list > .nav-item-has-dropdown:last-child .nav-dropdown { left: auto; right: 0; } /* Show dropdown on hover of parent item or the dropdown itself */ .nav-item-has-dropdown:hover .nav-dropdown, .nav-dropdown:hover { display: block; } /* Create an invisible bridge area to prevent gap issues */ .nav-item-has-dropdown::before { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 0.75rem; background: transparent; z-index: 1001; pointer-events: auto; } /* Align last dropdown bridge to the right edge */ .nav-list > .nav-item-has-dropdown:last-child::before { left: auto; right: 0; width: 200px; } .nav-dropdown li { margin: 0; } .nav-dropdown a, .nav-list .nav-dropdown a { display: block; padding: 0.75rem 1.5rem; color: var(--color-text-dark); text-decoration: none; transition: background-color 0.2s ease; } .nav-dropdown a:hover, .nav-list .nav-dropdown a:hover { background-color: var(--color-bg-light); color: var(--color-link-default); } /* Nested dropdowns inside main nav */ .main-nav .nav-dropdown .menu-item-has-children > a::after { content: "▸"; font-size: 0.8em; margin-left: 0.5rem; opacity: 0.6; float: right; } .main-nav .nav-dropdown .nav-dropdown, .main-nav .nav-dropdown .sub-menu { position: static; display: none; box-shadow: none; background: var(--color-bg-light); border-radius: 0.5rem; padding: 0.35rem 0; margin: 0.35rem 0 0.5rem; } .main-nav .nav-dropdown .menu-item-has-children:hover > .nav-dropdown, .main-nav .nav-dropdown .menu-item-has-children:hover > .sub-menu { display: block; } .main-nav .nav-dropdown .nav-dropdown a, .main-nav .nav-dropdown .sub-menu a { padding-left: 2rem; font-size: 1rem; } .mobile-menu-toggle { color: var(--season-text-on-gradient); cursor: pointer; transition: opacity 0.3s ease; display: none; flex-direction: column; align-items: center; gap: 0.5rem; } .mobile-menu-toggle:hover { opacity: 0.8; } .mobile-menu-toggle span { width: 25px; height: 3px; background-color: var(--season-text-on-gradient); transition: 0.3s; display: block; } .mobile-menu-toggle-text { font-size: 0.875rem; font-weight: 400; } /* Mobile Menu Overlay */ .mobile-menu-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100dvh; /* Dynamic viewport height for mobile */ z-index: 9999; display: none; overflow: hidden; } .mobile-menu-overlay.active { display: block; } .mobile-menu-backdrop { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--color-overlay-medium); opacity: 0; transition: opacity 0.3s ease; } .mobile-menu-overlay.active .mobile-menu-backdrop { opacity: 1; } .mobile-menu-panel { position: absolute; top: 0; right: 0; width: 85%; max-width: 400px; height: 100%; background: linear-gradient(180deg, rgba(17, 24, 39, 0.98) 0%, rgba(17, 24, 39, 0.9) 100%); transform: translateX(100%); transition: transform 0.3s ease; overflow-y: auto; display: flex; flex-direction: column; padding: 2.5rem 2rem 2rem; box-shadow: -12px 0 24px rgba(0, 0, 0, 0.3); } /* Backdrop blur for mobile menu */ @supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) { .mobile-menu-panel { background-color: var(--color-overlay-medium); -webkit-backdrop-filter: blur(15px); backdrop-filter: blur(15px); } } .mobile-menu-overlay.active .mobile-menu-panel { transform: translateX(0); } .mobile-menu-close { position: absolute; top: 1.5rem; right: 1.5rem; color: var(--color-white); font-size: 2rem; cursor: pointer; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; transition: opacity 0.3s ease; z-index: 1; border-radius: 999px; background: rgba(255, 255, 255, 0.08); } .mobile-menu-close:hover { opacity: 1; background: rgba(255, 255, 255, 0.16); } .mobile-menu-close::before { content: "×"; font-size: 2.5rem; line-height: 1; } .mobile-menu-content { margin-top: 3rem; flex: 1; } .mobile-menu-content .nav-list { display: flex; flex-direction: column; gap: 0; list-style: none; margin: 0; padding: 0; } .mobile-menu-content .nav-list li { width: 100%; border-bottom: 1px solid rgba(255, 255, 255, 0.12); } .mobile-menu-content .nav-list a { display: block; padding: 1rem 0.75rem; color: var(--color-white); text-decoration: none; font-size: 1.35rem; font-weight: 600; letter-spacing: 0.01em; border-radius: 0.5rem; transition: background-color 0.2s ease, color 0.2s ease; } .mobile-menu-content .nav-list a:hover { background-color: rgba(255, 255, 255, 0.08); color: var(--color-white); } .mobile-menu-content .nav-item-has-dropdown > a::after { content: "›"; font-size: 1.25rem; margin-left: 0.5rem; opacity: 0.8; float: right; transform: rotate(0deg); transition: transform 0.2s ease; } .mobile-menu-content .nav-item-has-dropdown.active > a::after { transform: rotate(90deg); } .mobile-menu-content .nav-dropdown { display: none; margin: 0.35rem 0 0.75rem; padding-left: 1rem; border-left: none; } .mobile-menu-content .nav-item-has-dropdown.active .nav-dropdown { display: block; } .mobile-menu-content .nav-dropdown a { font-size: 1.05rem; padding: 0.65rem 0.5rem; font-weight: 500; opacity: 0.9; } /* Side Navigation */ .sidebar-nav { position: sticky; top: 100px; align-self: start; } .side-nav { background: var(--color-bg-light); border: 1px solid var(--color-border-medium); border-radius: 6px; padding: 1.5rem 0; } .side-nav h3 { font-size: 1.125rem; font-weight: 600; color: var(--color-text-dark); padding: 0 1.5rem; margin-bottom: 1rem; border-bottom: 2px solid var(--color-border-medium); padding-bottom: 0.75rem; } .side-nav ul { list-style: none; margin: 0; padding: 0; } .side-nav li { margin: 0; } .side-nav a { display: block; padding: 0.75rem 1.5rem; color: var(--color-gray-600); text-decoration: none; border-left: 3px solid transparent; transition: all 0.2s ease; font-size: 0.9375rem; } .side-nav a:hover { background-color: var(--color-border-light); color: var(--color-text-dark); border-left-color: var(--season-complementary); padding-left: 1.75rem; } .side-nav a.active { background-color: var(--color-bg-light); color: var(--season-link); border-left-color: var(--season-link); font-weight: 600; } .side-nav ul ul { margin: 0.25rem 0 0.5rem 0; padding: 0; } .side-nav ul ul a { padding: 0.5rem 1.5rem 0.5rem 2.25rem; font-size: 0.9rem; color: var(--color-gray-600); } .side-nav ul ul a:hover { padding-left: 2.5rem; } /* ============================================================================ CARDS ============================================================================ */ /* Card Container */ .cards { margin-top: 2rem; } .cards--large .card { margin-bottom: 3rem; } .cards__heading-wrapper { margin-bottom: 2rem; } .cards__heading-wrapper .layout--wrapper { padding-bottom: 0; } .h2.crosshead { font-size: 2rem; font-weight: 700; text-align: center; color: var(--color-text-dark); margin-bottom: 0.5rem; position: relative; } .h2.crosshead::after { content: ""; display: block; width: 60px; height: 4px; background: var(--color-link-default); margin: 1rem auto 0; border-radius: 2px; } .cards__inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; margin-top: 2rem; } /* Base Card */ .card { background: var(--color-bg-white); border-radius: 0.75rem; box-shadow: 0 4px 6px -1px var(--color-shadow-light), 0 2px 4px -1px var(--color-shadow-medium); overflow: hidden; transition: all 0.3s ease; } .card:hover { transform: translateY(-4px); box-shadow: 0 10px 25px -3px var(--color-shadow-light), 0 4px 6px -2px var(--color-shadow-medium); } .card__inner { height: 100%; display: flex; flex-direction: column; } .card__head { position: relative; height: 200px; overflow: hidden; } .card__image { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background-size: cover; background-position: center; background-repeat: no-repeat; } .card__image img { width: 100%; height: 100%; object-fit: cover; } .card__body { padding: 1.5rem; flex-grow: 1; display: flex; flex-direction: column; } .card__heading { font-size: 1.25rem; font-weight: 600; color: var(--color-text-dark); margin-bottom: 0.5rem; line-height: 1.3; } .card__subheading { font-size: 1rem; color: var(--color-text-muted); margin-bottom: 1rem; font-weight: 500; } .card__summary { flex-grow: 1; } .card__summary p { margin-bottom: 0.5rem; color: var(--color-gray-600); } .card__summary .assignments { margin-top: 1rem; } .card__summary .assignments h4 { font-size: 0.875rem; font-weight: 600; color: var(--color-gray-600); margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.05em; } .card__summary .assignments ul { list-style: none; padding: 0; margin: 0; } .card__summary .assignments li { padding: 0.25rem 0; color: var(--color-text-muted); font-size: 0.875rem; position: relative; padding-left: 1rem; } .card__summary .assignments li::before { content: "•"; color: var(--color-link-default); font-weight: bold; position: absolute; left: 0; } /* Content Cards */ .content-card { background: var(--color-bg-white); padding: 2.5rem; border-radius: 12px; box-shadow: 0 2px 8px var(--color-shadow-light), 0 1px 3px var(--color-shadow-light); transition: all 0.3s ease; position: relative; overflow: hidden; border: 1px solid var(--color-border-light); } .content-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--season-complementary) 0%, var(--season-complementary-light) 100%); transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease; } .content-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px var(--color-shadow-medium), 0 4px 8px var(--color-shadow-light); border-color: var(--season-card-accent-hover); } .content-card:hover::before { transform: scaleX(1); } .content-card h3 { color: var(--season-primary); margin-bottom: 1rem; font-size: 1.25rem; font-weight: 600; transition: color 0.3s ease; } .content-card:hover h3 { color: var(--season-complementary); } /* Content cards always have dark text, even in complementary color sections */ .content-card p { color: var(--color-text-default) !important; } .content-card h3 { color: var(--season-primary) !important; } .content-card a:not(.btn) { color: var(--color-link-default) !important; } .content-card a:not(.btn):hover { color: var(--color-link-hover) !important; } /* ============================================================================ DOCUMENTS & FILE VIEWER ============================================================================ */ /* File Viewer Layout */ .documents-grid--file-viewer { display: grid; grid-template-columns: 2fr 1fr; gap: 2rem; margin-top: 2rem; } .file-viewer-section { background: var(--color-bg-white); border-radius: 0.75rem; box-shadow: 0 4px 6px -1px var(--color-shadow-light), 0 2px 4px -1px var(--color-shadow-medium); overflow: hidden; } .file-viewer-container { height: 100%; display: flex; flex-direction: column; } .file-viewer-header { padding: 1.5rem; border-bottom: 1px solid var(--color-border-light); background: var(--color-bg-light); display: flex; justify-content: space-between; align-items: center; } .file-viewer-header h3 { margin: 0; font-size: 1.25rem; font-weight: 600; color: var(--color-text-dark); } .file-controls { display: flex; gap: 0.75rem; } .file-viewer-content { flex-grow: 1; padding: 1.5rem; background: var(--color-bg-light); min-height: 400px; display: flex; align-items: center; justify-content: center; } .file-viewer-placeholder { text-align: center; color: var(--color-text-muted); } .file-viewer-placeholder p { margin: 0.5rem 0; } /* Recent Documents - Used in file viewer sidebar */ .recent-documents { background: var(--color-bg-white); border-radius: 0.75rem; box-shadow: 0 4px 6px -1px var(--color-shadow-light), 0 2px 4px -1px var(--color-shadow-medium); padding: 1.5rem; height: fit-content; } .recent-documents h3 { margin: 0 0 1.5rem 0; font-size: 1.25rem; font-weight: 600; color: var(--color-text-dark); } /* Document List - Base styles for file viewer sidebar */ /* Note: These are separate from .documents-grid .document-item (used for agendas/minutes) */ .document-list { display: flex; flex-direction: column; gap: 1rem; } .document-item { display: flex; align-items: center; gap: 1rem; padding: 1rem; border: 1px solid var(--color-border-light); border-radius: 0.5rem; cursor: pointer; transition: all 0.2s ease; } .document-item:hover { background: var(--color-bg-light); border-color: var(--color-link-default); transform: translateY(-1px); } .document-icon { flex-shrink: 0; width: 48px; height: 48px; background: var(--color-gray-100); border-radius: 0.375rem; display: flex; align-items: center; justify-content: center; color: var(--color-text-muted); } .document-info h4 { margin: 0 0 0.25rem 0; font-size: 1rem; font-weight: 600; color: var(--color-text-dark); } .document-info p { margin: 0; font-size: 0.875rem; color: var(--color-text-muted); } /* Documents Grid for Agendas and Minutes */ .documents-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; margin-top: 1.5rem; } .documents-grid .document-item { display: flex; align-items: center; gap: 1rem; padding: 1.25rem; background: var(--color-bg-white); border: 2px solid var(--color-border-light); border-radius: 0.5rem; transition: all 0.2s ease; cursor: default; } .documents-grid .document-item:hover { border-color: var(--color-link-default); box-shadow: 0 4px 6px -1px var(--color-shadow-light); transform: translateY(-2px); } .documents-grid .document-icon { flex-shrink: 0; width: 56px; height: 56px; background: var(--color-bg-light); border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; border: 2px solid var(--color-border-light); } .documents-grid .document-info { flex-grow: 1; min-width: 0; } .documents-grid .document-info h3 { margin: 0 0 0.5rem 0; font-size: 1.125rem; font-weight: 600; color: var(--color-text-dark); } .documents-grid .document-info .document-date { margin: 0; font-size: 0.875rem; color: var(--color-text-muted); } .documents-grid .btn--small { flex-shrink: 0; padding: 0.5rem 1rem; font-size: 0.875rem; white-space: nowrap; } .no-documents { grid-column: 1 / -1; text-align: center; padding: 3rem 2rem; color: var(--color-text-dark) !important; font-style: italic; background: var(--color-bg-light); border-radius: 0.5rem; border: 2px dashed var(--color-border-light); } /* PDF Viewer Styles */ .pdf-selector-container { margin: 2rem 0 1.5rem 0; } .pdf-selector-label { display: block; font-weight: 600; margin-bottom: 0.5rem; color: var(--text-color, var(--color-text-default)); font-size: 1rem; } .pdf-selector { width: 100%; max-width: 500px; padding: 0.75rem 1rem; font-size: 1rem; border: 2px solid var(--color-border-light); border-radius: 0.5rem; background: var(--color-bg-white); color: var(--text-color, var(--color-text-default)); cursor: pointer; transition: border-color 0.2s ease; } .pdf-selector:hover { border-color: var(--primary-color); } .pdf-selector:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px var(--color-shadow-light); } /* Seasonal PDF selector colors */ body.spring .pdf-selector:hover, body.spring .pdf-selector:focus, body.summer .pdf-selector:hover, body.summer .pdf-selector:focus { border-color: var(--season-primary); box-shadow: 0 0 0 3px var(--season-card-accent-hover); } body.fall .pdf-selector:hover, body.fall .pdf-selector:focus, body.winter .pdf-selector:hover, body.winter .pdf-selector:focus { border-color: var(--season-primary); box-shadow: 0 0 0 3px var(--season-card-accent-hover); } .pdf-viewer-wrapper { width: 100%; margin-top: 1.5rem; margin-bottom: 1rem; border: 1px solid var(--color-border-light); border-radius: 0.5rem; overflow: hidden; background: var(--color-bg-light); } .pdf-viewer-iframe { width: 100%; height: 800px; border: none; display: block; } .calendar-embed-iframe { border: 0; } .text-muted { color: var(--color-text-muted); font-size: 0.875rem; } /* Utility Classes */ .lobotomize--level > * + * { margin-top: 1rem; } .links a { color: var(--color-link-default); text-decoration: none; } .links a:hover { color: var(--color-link-hover); text-decoration: underline; } @media (max-width: 1023px) { .pdf-viewer-iframe { height: 600px; } .pdf-selector { max-width: 100%; } } /* ============================================================================ FORMS ============================================================================ */ /* Form Containers */ .reservation-form { background: var(--color-bg-light); padding: 2rem; border-radius: 8px; margin-top: 1.5rem; } .contact-form { background: var(--color-bg-light); padding: 2rem; border-radius: 8px; margin-top: 2rem; } /* Form Layout */ .form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; margin-bottom: 1.5rem; } /* Form Group - Consolidated from reservation and contact forms */ .form-group { display: flex; flex-direction: column; margin-bottom: 1.5rem; } .form-group label { display: block; color: var(--color-gray-700); font-weight: 600; margin-bottom: 0.5rem; font-size: 0.9rem; } /* Contact form has different label color */ .contact-form .form-group label { color: var(--season-primary); font-weight: 500; } .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 0.75rem; border: 1px solid var(--color-border-dark); border-radius: 6px; font-size: 1rem; font-family: inherit; transition: border-color 0.3s ease; } /* Contact form has different border */ .contact-form .form-group input, .contact-form .form-group select, .contact-form .form-group textarea { border: 2px solid var(--color-border-medium); } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--season-complementary); box-shadow: 0 0 0 3px var(--season-card-accent-hover); } /* Contact form has simpler focus */ .contact-form .form-group input:focus, .contact-form .form-group select:focus, .contact-form .form-group textarea:focus { box-shadow: none; } .form-group textarea { resize: vertical; min-height: 100px; } /* Form Messages */ .form-message { padding: 1rem; border-radius: 6px; margin-bottom: 1.5rem; font-weight: 500; } .form-message--success { background: var(--color-bg-light); color: var(--season-complementary-dark); border: 1px solid var(--season-complementary); } .form-message--error { background: var(--color-bg-light); color: var(--color-text-dark); border: 1px solid var(--color-text-dark); } .form-message--hidden { display: none; } /* Form Actions */ .form-actions { display: flex; gap: 1rem; margin-top: 1.5rem; flex-wrap: wrap; } /* Form Submit Button */ .submit-btn { background: var(--season-complementary); color: var(--color-white); padding: 1rem 2rem; border: none; border-radius: 6px; font-size: 1rem; font-weight: 500; cursor: pointer; transition: background-color 0.3s ease; } .submit-btn:hover { background: var(--season-complementary-dark); } /* Form Notes */ .form-note { margin-top: 1rem; font-size: 0.9rem; color: var(--color-text-muted); } /* ============================================================================ HEADER & LOGO ============================================================================ */ /* Header Container */ .header .container { max-width: none; } /* Header Base Styles */ .header { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; transition: transform 0.3s ease, background 0.3s ease; transform: translateY(0); } /* Header transparent only on homepage when at top (no has-background class) */ body.homepage .header:not(.has-background) { background: transparent !important; /* Transparent by default on homepage only when at top */ } /* Remove logo background when header is at top (no has-background class) */ .header:not(.has-background) .logo { background: transparent !important; } .header.scrolled-down { transform: translateY(-100%); } .header-content { display: flex; align-items: stretch; width: 100%; } .header-actions { display: flex; align-items: center; margin-left: 1rem; } /* Logo Block - Solid background on left */ .logo { background: none !important; padding: 1rem 1.5rem; display: flex; align-items: center; flex-shrink: 0; transition: none !important; } .logo a { text-decoration: none; color: var(--season-text-on-gradient); } .logo h1 { font-size: 1.5rem; font-weight: 600; margin-bottom: 0.25rem; color: var(--season-text-on-gradient); } .logo p { font-size: 0.8rem; opacity: 0.9; font-weight: 300; color: var(--season-text-on-gradient); margin: 0; } .logo-image { max-height: 15vh; width: auto; display: block; filter: brightness(0) invert(1); transition: max-height 0.3s ease; } /* Shrink logo to 12vh when scrolled */ .header.has-background .logo-image { max-height: 12vh; } /* Seasonal Header Backgrounds - Spring/Summer */ /* Non-homepage pages: always have seasonal background */ body.spring:not(.homepage) .header, body.summer:not(.homepage) .header { background-color: var(--season-bg-header-start); } /* Homepage: seasonal background only when scrolled (has-background class) */ body.spring.homepage .header.has-background, body.summer.homepage .header.has-background { background-color: var(--season-bg-header-start); } /* Logo matches header background - Spring/Summer green */ body.spring:not(.homepage) .header .logo, body.summer:not(.homepage) .header .logo { background: none !important; } body.spring.homepage .header .logo, body.summer.homepage .header .logo { background: none !important; } body.spring.homepage .header.has-background .logo, body.summer.homepage .header.has-background .logo { background: none !important; } /* Seasonal Header Backgrounds - Fall/Winter */ /* Non-homepage pages: always have seasonal background */ body.fall:not(.homepage) .header, body.winter:not(.homepage) .header { background-color: var(--season-bg-header-start); } /* Homepage: seasonal background only when scrolled (has-background class) */ body.fall.homepage .header.has-background, body.winter.homepage .header.has-background { background-color: var(--season-bg-header-start); } /* Logo matches header background - Fall/Winter orange-red */ body.fall:not(.homepage) .header .logo, body.winter:not(.homepage) .header .logo { background: none !important; } body.fall.homepage .header .logo, body.winter.homepage .header .logo { background: none !important; } body.fall.homepage .header.has-background .logo, body.winter.homepage .header.has-background .logo { background: none !important; } /* Responsive Header & Logo Styles */ @media (max-width: 1023px) { .header-content { flex-wrap: nowrap; } .logo { padding: 0.5rem 1rem; flex-shrink: 0; } .logo h1 { font-size: 1.25rem; } .logo p { font-size: 0.7rem; } .logo-image { max-height: 20vw; transform: scale(1) !important; /* Keep full size on mobile */ } .header-actions { margin-left: auto; gap: 1rem; } .header-actions { margin-top: 2rem; margin-right: 1rem; margin-left: auto; gap: 1rem; } } /* Meeting Schedule Card */ .meeting-schedule-card { background: var(--color-overlay-light); padding: 2rem; border-radius: 0.75rem; margin-top: 1rem; } .meeting-schedule-card h3 { font-size: 1.5rem; font-weight: 600; margin-bottom: 1rem; color: var(--color-white); } .meeting-schedule-card p { margin-bottom: 0.75rem; color: var(--color-overlay-light); } .meeting-schedule-card strong { color: var(--color-white); } /* Contact Details */ .contact-details { background: var(--color-overlay-light); padding: 2rem; border-radius: 0.75rem; margin-top: 1rem; } .contact-details p { margin-bottom: 0.75rem; color: var(--color-overlay-light); } .contact-details strong { color: var(--color-white); } /* Responsive Design */ @media (max-width: 1023px) { .layout--spaced-v { padding-top: 2rem; padding-bottom: 2rem; } .layout--fluid-h { padding-left: 0.5rem; padding-right: 0.5rem; } .page-title__heading { font-size: 2rem; } .h2.crosshead { font-size: 2rem; } .cards__inner { grid-template-columns: 1fr; gap: 1.5rem; } .card__body { padding: 1rem; } .documents-grid--file-viewer { grid-template-columns: 1fr; gap: 1.5rem; } .file-viewer-header { flex-direction: column; gap: 1rem; align-items: stretch; } .file-controls { justify-content: center; } .document-item { padding: 0.75rem; } .document-icon { width: 40px; height: 40px; } .documents-grid { grid-template-columns: 1fr; } .documents-grid .document-item { flex-wrap: wrap; } .documents-grid .btn--small { width: 100%; text-align: center; margin-top: 0.75rem; } } /* Block Editor: Front-End Defaults */ .wp-block { max-width: 100%; } .wp-block-group, .wp-block-columns, .wp-block-image, .wp-block-gallery, .wp-block-cover, .wp-block-table, .wp-block-media-text { margin: 2rem 0; } .wp-block-columns { gap: 2rem; } .wp-block-image img, .wp-block-cover img, .wp-block-gallery img { max-width: 100%; height: auto; } .wp-block-button__link { display: inline-block; background: linear-gradient(135deg, var(--season-btn-bg-start) 0%, var(--season-btn-bg-end) 100%); color: var(--season-btn-text); padding: 0.75rem 1.5rem; border-radius: 999px; font-weight: 600; text-decoration: none; transition: transform 0.2s ease, opacity 0.2s ease; } .wp-block-button__link:hover { transform: translateY(-1px); opacity: 0.95; } .wp-block-separator { border-color: var(--color-border-medium); } /* Base/Neutral Color Variables (used across all seasons) */ :root { /* Neutral Grays */ --color-gray-50: #f8f9fa; --color-gray-100: #e9ecef; --color-gray-200: #e5e7eb; --color-gray-300: #d1d5db; --color-gray-400: #9ca3af; --color-gray-500: #6c757d; --color-gray-600: #495057; --color-gray-700: #374151; --color-gray-800: #212529; --color-gray-900: #1a1a1a; /* Standard Colors */ --color-white: white; --color-black: #000; --color-text-default: #333; --color-text-muted: #6c757d; --color-text-dark: #212529; /* Link Colors (non-seasonal) */ --color-link-default: #164981; --color-link-hover: #103760; --color-link-content: #164981; --color-link-content-hover: #103760; /* Button Colors (non-seasonal) */ --color-btn-primary: #007bff; --color-btn-primary-hover: #0056b3; --color-btn-secondary: #6c757d; --color-btn-secondary-hover: #545b62; /* Border Colors */ --color-border-light: #e9ecef; --color-border-medium: #e5e7eb; --color-border-dark: #d1d5db; /* Background Colors */ --color-bg-light: #f8f9fa; --color-bg-white: white; --color-bg-dark: #343a40; /* Wales-themed Utility Colors */ --wales-blue-start: #1e3a8a; --wales-blue-end: #67adff; --wales-green-start: #059669; --wales-green-end: #10b981; /* Fraud/Warning Colors (consistent across all seasons for accessibility) */ --fraud-bg-start: #fee2e2; --fraud-bg-mid: #fecaca; --fraud-bg-end: #fca5a5; --fraud-text-primary: #991b1b; --fraud-text-secondary: #7f1d1d; /* Shadow Colors */ --color-shadow-light: rgba(0, 0, 0, 0.1); --color-shadow-medium: rgba(0, 0, 0, 0.2); --color-shadow-dark: rgba(0, 0, 0, 0.3); /* Overlay Colors */ --color-overlay-light: rgba(255, 255, 255, 0.2); --color-overlay-medium: rgba(0, 0, 0, 0.4); --color-overlay-dark: rgba(0, 0, 0, 0.6); } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; line-height: 1.6; color: var(--color-text-default); background-color: var(--color-bg-white); transition: all 0.5s ease; } /* Seasonal Color Themes - Improved Contrast & Professional */ /* Spring Theme (March-May) - Fresh Green Palette */ /* Primary: #2d5016 (Deep Forest Green) - Contrast: 7.8:1 on white */ /* Secondary: #4a7c47 (Medium Green) - Contrast: 4.8:1 on white */ /* Complementary: #0891b2 (Cyan/Teal) - Used for buttons, footer, and footer-bar */ /* CSS Custom Properties for Spring/Summer Theme (Consolidated) */ /* Spring/Summer share the same color scheme - Spring colors */ body.spring, body.summer { /* Primary Colors */ --season-primary: #478f52; --season-primary-dark: #3a7a45; --season-primary-darker: #2f5e35; --season-secondary: #62a66d; /* Complementary Colors (for buttons, footer, accents) */ --season-complementary: #8fb0e1; --season-complementary-light: #b6ccf0; --season-complementary-dark: #457ec3; --season-complementary-darker: #2f5f9a; /* Text Colors */ --season-text-primary: #478f52; --season-text-on-white: #478f52; --season-text-on-gradient: white; --season-text-on-complementary: white; /* Background Colors */ --season-bg-primary: white; --season-bg-header-start: #478f52; --season-bg-header-end: #62a66d; --season-bg-footer-start: #8fb0e1; --season-bg-footer-end: #67adff; /* Button Colors */ --season-btn-bg-start: #8fb0e1; --season-btn-bg-end: #67adff; --season-btn-bg-hover-start: #5a8fcf; --season-btn-bg-hover-end: #67adff; --season-btn-text: white; /* Border Colors */ --season-border-primary: #478f52; --season-border-complementary: #457ec3; /* Link Colors */ --season-link: #478f52; --season-link-hover: #3a7a45; /* Content Section Colors */ --season-content-odd-bg-start: rgba(71, 143, 82, 0.22); --season-content-odd-bg-end: rgba(71, 143, 82, 0.38); --season-content-even-bg-start: #8fb0e1; --season-content-even-bg-end: #67adff; --season-content-even-text: white; /* Event/Highlight Colors */ --season-event-bg-start: #478f52; --season-event-bg-end: #3a7a45; /* Content Card Accent Colors */ --season-card-accent-start: #8fb0e1; --season-card-accent-end: #67adff; --season-card-accent-hover: rgba(143, 176, 225, 0.2); /* Left Border Accent Colors (for info boxes, etc.) */ --season-border-accent: #457ec3; /* Season Tester Button Colors */ --season-tester-spring-bg: #478f52; --season-tester-spring-bg-hover: #3a7a45; --season-tester-summer-bg: #00b2ad; --season-tester-summer-bg-hover: #008a86; background: var(--color-bg-white); } /* Spring/Summer - Footer - Uses complementary cyan/teal color */ body.spring .footer, body.summer .footer { background: linear-gradient(135deg, var(--season-bg-footer-start) 0%, var(--season-bg-footer-end) 100%); color: var(--season-text-on-complementary); } body.spring h1, body.spring h2, body.spring h3, body.spring h4, body.spring h5, body.spring h6, body.summer h1, body.summer h2, body.summer h3, body.summer h4, body.summer h5, body.summer h6 { color: var(--season-text-primary); } body.spring .content-section h2, body.summer .content-section h2 { border-bottom: 3px solid var(--season-border-primary); } body.spring .nav-list a, body.summer .nav-list a { color: var(--season-text-on-gradient); } body.spring .nav-list a:hover, body.summer .nav-list a:hover { background-color: var(--color-overlay-light); } body.spring .nav-dropdown a, body.spring .nav-list .nav-dropdown a, body.summer .nav-dropdown a, body.summer .nav-list .nav-dropdown a { color: var(--color-text-dark); } body.spring .footer-section h3, body.summer .footer-section h3 { color: var(--season-text-on-complementary); } body.spring .footer-section p, body.summer .footer-section p { color: var(--season-text-on-complementary); opacity: 0.9; } /* Spring/Summer - Footer Bar - Uses complementary cyan/teal color */ body.spring .footer-bar, body.summer .footer-bar { background: linear-gradient(135deg, var(--season-bg-footer-start) 0%, var(--season-bg-footer-end) 100%); } /* Spring/Summer - Buttons - Uses complementary cyan/teal color */ body.spring .btn, body.summer .btn { background: linear-gradient(135deg, var(--season-btn-bg-start) 0%, var(--season-btn-bg-end) 100%); color: var(--season-btn-text); } body.spring .btn:hover, body.summer .btn:hover { background: linear-gradient(135deg, var(--season-btn-bg-hover-start) 0%, var(--season-btn-bg-hover-end) 100%); } /* Spring/Summer - Links */ body.spring a:not(.nav-list a):not(.nav-dropdown a):not(.btn):not(.content-section a):not(.footer a):not(.footer-bar a), body.summer a:not(.nav-list a):not(.nav-dropdown a):not(.btn):not(.content-section a):not(.footer a):not(.footer-bar a) { color: var(--color-link-default); } body.spring a:not(.nav-list a):not(.nav-dropdown a):not(.btn):not(.content-section a):not(.footer a):not(.footer-bar a):hover, body.summer a:not(.nav-list a):not(.nav-dropdown a):not(.btn):not(.content-section a):not(.footer a):not(.footer-bar a):hover { color: var(--color-link-hover); } /* Footer links always use white for contrast on blue background */ body.spring .footer a, body.summer .footer a, body.fall .footer a, body.winter .footer a, body.spring .footer-bar a, body.summer .footer-bar a, body.fall .footer-bar a, body.winter .footer-bar a { color: var(--color-white); } body.spring .footer a:hover, body.summer .footer a:hover, body.fall .footer a:hover, body.winter .footer a:hover, body.spring .footer-bar a:hover, body.summer .footer-bar a:hover, body.fall .footer-bar a:hover, body.winter .footer-bar a:hover { color: rgba(255, 255, 255, 0.8); text-decoration: underline; } /* Spring/Summer - Borders and accents (consolidated above) */ /* Spring/Summer - Welsh Days and other page-specific elements (consolidated above) */ /* All Spring/Summer styles now use CSS variables defined in body.spring, body.summer */ /* Fall Theme (September-November) - Warm Autumn Palette */ /* Primary: #c2410c (Deep Orange-Red) - Contrast: 5.8:1 on white */ /* Secondary: #ea580c (Vibrant Orange) - Contrast: 4.2:1 on white */ /* Complementary: #0891b2 (Cyan/Teal) - Used for buttons, footer, and footer-bar */ /* Consistent color usage throughout for professional appearance */ /* CSS Custom Properties for Fall/Winter Theme (Consolidated) */ /* Fall/Winter share the same color scheme - Fall colors */ body.fall, body.winter { /* Primary Colors */ --season-primary: #e77f46; --season-primary-dark: #cc6a35; --season-primary-darker: #a95529; --season-secondary: #f09a6b; /* Complementary Colors (for buttons, footer, accents) */ --season-complementary: #8fb0e1; --season-complementary-light: #b6ccf0; --season-complementary-dark: #457ec3; --season-complementary-darker: #2f5f9a; /* Text Colors */ --season-text-primary: #e77f46; --season-text-on-white: #e77f46; --season-text-on-gradient: white; --season-text-on-complementary: white; --season-text-content-link: #0066cc; --season-text-content-link-hover: #0052a3; /* Background Colors */ --season-bg-primary: white; --season-bg-winter: #FCFCFF; --season-bg-header-start: #e77f46; --season-bg-header-end: #f09a6b; --season-bg-footer-start: #8fb0e1; --season-bg-footer-end: #67adff; /* Button Colors */ --season-btn-bg-start: #8fb0e1; --season-btn-bg-end: #67adff; --season-btn-bg-hover-start: #5a8fcf; --season-btn-bg-hover-end: #67adff; --season-btn-text: white; /* Border Colors */ --season-border-primary: #e77f46; --season-border-complementary: #457ec3; /* Link Colors */ --season-link: #e77f46; --season-link-hover: #cc6a35; /* Content Section Colors */ --season-content-odd-bg-start: rgba(231, 127, 70, 0.18); --season-content-odd-bg-end: rgba(231, 127, 70, 0.28); --season-content-even-bg-start: #8fb0e1; --season-content-even-bg-end: #67adff; --season-content-even-text: white; /* Event/Highlight Colors */ --season-event-bg-start: #e77f46; --season-event-bg-end: #cc6a35; /* Content Card Accent Colors */ --season-card-accent-start: #8fb0e1; --season-card-accent-end: #67adff; --season-card-accent-hover: rgba(143, 176, 225, 0.2); /* Left Border Accent Colors (for info boxes, etc.) */ --season-border-accent: #457ec3; /* Season Tester Button Colors */ --season-tester-fall-bg: #e77f46; --season-tester-fall-bg-hover: #cc6a35; --season-tester-winter-bg: #8fb0e1; --season-tester-winter-text: #1e3a8a; --season-tester-winter-bg-hover: #457ec3; --season-tester-reset-bg: #6b7280; --season-tester-reset-bg-hover: #4b5563; background: var(--color-bg-white); } /* Winter-specific background override */ body.winter { background: var(--season-bg-winter); } /* Non-homepage pages: always have seasonal background */ body.fall:not(.homepage) .header, body.winter:not(.homepage) .header { background-color: var(--season-bg-header-start); } /* Homepage: seasonal background only when scrolled (has-background class) */ body.fall.homepage .header.has-background, body.winter.homepage .header.has-background { background-color: var(--season-bg-header-start); } /* Logo matches header background - Fall/Winter orange-red */ body.fall:not(.homepage) .header .logo, body.winter:not(.homepage) .header .logo { background: none !important; } body.fall.homepage .header .logo, body.winter.homepage .header .logo { background: none !important; } body.fall.homepage .header.has-background .logo, body.winter.homepage .header.has-background .logo { background: none !important; } /* Fall/Winter - Footer - Uses complementary cyan/teal color */ body.fall .footer, body.winter .footer { background: linear-gradient(135deg, var(--season-bg-footer-start) 0%, var(--season-bg-footer-end) 100%); color: var(--season-text-on-complementary); } body.fall h1, body.fall h2, body.fall h3, body.fall h4, body.fall h5, body.fall h6, body.winter h1, body.winter h2, body.winter h3, body.winter h4, body.winter h5, body.winter h6 { color: var(--season-text-primary); } body.fall .content-section h2, body.winter .content-section h2 { border-bottom: 3px solid var(--season-border-primary); } body.fall .nav-list a, body.winter .nav-list a { color: var(--season-text-on-gradient); } body.fall .nav-list a:hover, body.winter .nav-list a:hover { background-color: var(--color-overlay-light); } body.fall .nav-dropdown a, body.fall .nav-list .nav-dropdown a, body.winter .nav-dropdown a, body.winter .nav-list .nav-dropdown a { color: var(--color-text-dark); } body.fall .footer-section h3, body.winter .footer-section h3 { color: var(--season-text-on-complementary); } body.fall .footer-section p, body.winter .footer-section p { color: var(--season-text-on-complementary); opacity: 0.9; } /* Fall/Winter - Footer Bar - Uses complementary cyan/teal color */ body.fall .footer-bar, body.winter .footer-bar { background: linear-gradient(135deg, var(--season-bg-footer-start) 0%, var(--season-bg-footer-end) 100%); color: var(--season-text-on-complementary); } /* Fall/Winter - Buttons - Uses complementary cyan/teal color */ body.fall .btn, body.winter .btn { background: linear-gradient(135deg, var(--season-btn-bg-start) 0%, var(--season-btn-bg-end) 100%); color: var(--season-btn-text); } body.fall .btn:hover, body.winter .btn:hover { background: linear-gradient(135deg, var(--season-btn-bg-hover-start) 0%, var(--season-btn-bg-hover-end) 100%); } /* Fall/Winter - Links */ body.fall a:not(.nav-list a):not(.nav-dropdown a):not(.btn):not(.content-section a):not(.footer a):not(.footer-bar a), body.winter a:not(.nav-list a):not(.nav-dropdown a):not(.btn):not(.footer a):not(.footer-bar a) { color: var(--color-link-default); } body.fall a:not(.nav-list a):not(.nav-dropdown a):not(.btn):not(.content-section a):not(.footer a):not(.footer-bar a):hover, body.winter a:not(.nav-list a):not(.nav-dropdown a):not(.btn):not(.footer a):not(.footer-bar a):hover { color: var(--color-link-hover); } /* Fall - Content Section Links (Classic Link Blue) */ body.fall .content-section a:not(.btn) { color: var(--color-link-default); } body.fall .content-section a:not(.btn):hover { color: var(--color-link-hover); } /* Winter - Borders and accents */ body.winter .content-section h2, body.winter h2, body.winter .page-title__heading { border-bottom-color: var(--season-border-primary); } body.winter blockquote, body.winter .quote { border-left: none; } /* Winter - Welsh Days and other page-specific elements */ body.winter .event-highlight-card { background: linear-gradient(135deg, var(--season-event-bg-start) 0%, var(--season-event-bg-end) 100%); color: var(--season-text-on-gradient); } body.winter .event-info-box { border-left: none; } body.winter .event-info-box h3 { color: var(--season-text-primary); } body.winter .event-info-box a { color: var(--color-link-default); } body.winter .event-info-box a:hover { color: var(--color-link-hover); } body.winter .sponsor-card p { color: var(--season-text-primary); } body.winter .heritage-link { color: var(--color-link-default); border-color: var(--season-border-primary); } body.winter .heritage-link:hover { background: var(--season-primary); color: var(--season-text-on-gradient); } body.winter .get-involved-section { border-color: var(--season-border-primary); } body.winter .get-involved-section h2 { color: var(--season-text-primary); } body.winter .get-involved-section p:last-child { color: var(--season-text-primary); } body.winter .contact-card { border-left: none; } body.winter .contact-card h3 { color: var(--season-text-primary); } body.winter .contact-card a { color: var(--color-link-default); } body.winter .contact-card a:hover { color: var(--color-link-hover); } /* Seasonal colors for Election page elements */ body.spring .election-notice, body.summer .election-notice { border-left-color: var(--season-border-primary); } body.spring .election-notice h3, body.spring .election-notice h4, body.spring .election-notice h5, body.summer .election-notice h3, body.summer .election-notice h4, body.summer .election-notice h5 { color: var(--season-text-primary); } body.spring .election-info-section h4, body.spring .election-info-section h5, body.summer .election-info-section h4, body.summer .election-info-section h5 { color: var(--season-text-primary); border-bottom-color: var(--season-border-primary); } body.spring .election-year-summary h3, body.spring .election-year-summary::after, body.summer .election-year-summary h3, body.summer .election-year-summary::after { color: var(--season-text-primary); } body.fall .election-notice, body.winter .election-notice { border-left: none; } body.fall .election-notice h3, body.fall .election-notice h4, body.fall .election-notice h5, body.winter .election-notice h3, body.winter .election-notice h4, body.winter .election-notice h5 { color: var(--season-text-primary); } body.fall .election-info-section h4, body.fall .election-info-section h5, body.winter .election-info-section h4, body.winter .election-info-section h5 { color: var(--season-text-primary); border-bottom-color: var(--season-border-primary); } body.fall .election-year-summary h3, body.fall .election-year-summary::after, body.winter .election-year-summary h3, body.winter .election-year-summary::after { color: var(--season-text-primary); } /* Seasonal colors for contact-item elements */ body.spring .contact-item h3, body.summer .contact-item h3 { color: var(--season-primary); } body.fall .contact-item h3, body.winter .contact-item h3 { color: var(--season-primary); } /* Seasonal Left Border Colors - Using Complementary Colors */ /* Spring/Summer - Content Card */ body.spring .content-card::before, body.summer .content-card::before { background: linear-gradient(90deg, var(--season-card-accent-start) 0%, var(--season-card-accent-end) 100%); } body.spring .content-card:hover, body.summer .content-card:hover { border-color: var(--season-card-accent-hover); } body.spring .content-card:hover h3, body.summer .content-card:hover h3 { color: var(--season-card-accent-start); } /* Spring/Summer - Business Info, Animal Control Info */ body.spring .business-info, body.spring .animal-control-info, body.summer .business-info, body.summer .animal-control-info { border-left: none; } /* Spring/Summer - Reservation Item */ body.spring .reservation-item, body.summer .reservation-item { border-left: none; } /* Spring/Summer - Service Item */ body.spring .service-item, body.summer .service-item { border-left: none; } /* Spring/Summer - Info Box */ body.spring .info-box, body.summer .info-box { border-left: none; } /* Spring/Summer - Timeline Item */ body.spring .timeline-item, body.summer .timeline-item { border-left-color: var(--season-border-accent); } /* Fall/Winter - Content Card */ body.fall .content-card::before, body.winter .content-card::before { background: linear-gradient(90deg, var(--season-card-accent-start) 0%, var(--season-card-accent-end) 100%); } body.fall .content-card:hover, body.winter .content-card:hover { border-color: var(--season-card-accent-hover); } body.fall .content-card:hover h3, body.winter .content-card:hover h3 { color: var(--season-card-accent-start); } /* Fall/Winter - Business Info, Animal Control Info */ body.fall .business-info, body.fall .animal-control-info, body.winter .business-info, body.winter .animal-control-info { border-left: none; } /* Fall/Winter - Reservation Item */ body.fall .reservation-item, body.winter .reservation-item { border-left: none; } /* Fall/Winter - Service Item */ body.fall .service-item, body.winter .service-item { border-left: none; } /* Fall/Winter - Info Box */ body.fall .info-box, body.winter .info-box { border-left: none; } /* Fall/Winter - Timeline Item */ body.fall .timeline-item, body.winter .timeline-item { border-left-color: var(--season-border-accent); } /* Spring/Summer - Side Nav Active Link */ body.spring .side-nav a.active, body.summer .side-nav a.active { border-left-color: var(--season-border-accent); } body.spring .side-nav a:hover, body.summer .side-nav a:hover { border-left-color: var(--season-border-accent); } /* Fall/Winter - Side Nav Active Link */ body.fall .side-nav a.active, body.winter .side-nav a.active { border-left-color: var(--season-border-accent); } body.fall .side-nav a:hover, body.winter .side-nav a:hover { border-left-color: var(--season-border-accent); } /* Seasonal Alternating Section Backgrounds - Like Visit Saint Paul */ /* Spring/Summer - Primary: #2d5016, Complementary: #0891b2 */ body.spring .content-section:nth-child(odd), body.summer .content-section:nth-child(odd) { background: linear-gradient(135deg, var(--season-content-odd-bg-start) 0%, var(--season-content-odd-bg-end) 100%); } body.spring .content-section:nth-child(even), body.summer .content-section:nth-child(even) { background: linear-gradient(135deg, var(--season-content-even-bg-start) 0%, var(--season-content-even-bg-end) 100%); color: var(--season-content-even-text); } body.spring .content-section:nth-child(even) h1, body.spring .content-section:nth-child(even) h2, body.spring .content-section:nth-child(even) h3, body.spring .content-section:nth-child(even) h4, body.spring .content-section:nth-child(even) h5, body.spring .content-section:nth-child(even) h6, body.summer .content-section:nth-child(even) h1, body.summer .content-section:nth-child(even) h2, body.summer .content-section:nth-child(even) h3, body.summer .content-section:nth-child(even) h4, body.summer .content-section:nth-child(even) h5, body.summer .content-section:nth-child(even) h6 { color: var(--season-content-even-text) !important; } /* Override white heading color for headings inside white/light background containers */ body.spring .content-section:nth-child(even) .contact-info h1, body.spring .content-section:nth-child(even) .contact-info h2, body.spring .content-section:nth-child(even) .contact-info h3, body.spring .content-section:nth-child(even) .contact-info h4, body.spring .content-section:nth-child(even) .contact-info h5, body.spring .content-section:nth-child(even) .contact-info h6, body.summer .content-section:nth-child(even) .contact-info h1, body.summer .content-section:nth-child(even) .contact-info h2, body.summer .content-section:nth-child(even) .contact-info h3, body.summer .content-section:nth-child(even) .contact-info h4, body.summer .content-section:nth-child(even) .contact-info h5, body.summer .content-section:nth-child(even) .contact-info h6, body.spring .content-section:nth-child(even) .info-box h1, body.spring .content-section:nth-child(even) .info-box h2, body.spring .content-section:nth-child(even) .info-box h3, body.spring .content-section:nth-child(even) .info-box h4, body.spring .content-section:nth-child(even) .info-box h5, body.spring .content-section:nth-child(even) .info-box h6, body.summer .content-section:nth-child(even) .info-box h1, body.summer .content-section:nth-child(even) .info-box h2, body.summer .content-section:nth-child(even) .info-box h3, body.summer .content-section:nth-child(even) .info-box h4, body.summer .content-section:nth-child(even) .info-box h5, body.summer .content-section:nth-child(even) .info-box h6, body.spring .content-section:nth-child(even) .card h1, body.spring .content-section:nth-child(even) .card h2, body.spring .content-section:nth-child(even) .card h3, body.spring .content-section:nth-child(even) .card h4, body.spring .content-section:nth-child(even) .card h5, body.spring .content-section:nth-child(even) .card h6, body.summer .content-section:nth-child(even) .card h1, body.summer .content-section:nth-child(even) .card h2, body.summer .content-section:nth-child(even) .card h3, body.summer .content-section:nth-child(even) .card h4, body.summer .content-section:nth-child(even) .card h5, body.summer .content-section:nth-child(even) .card h6, body.spring .content-section:nth-child(even) .staff-member h1, body.spring .content-section:nth-child(even) .staff-member h2, body.spring .content-section:nth-child(even) .staff-member h3, body.spring .content-section:nth-child(even) .staff-member h4, body.spring .content-section:nth-child(even) .staff-member h5, body.spring .content-section:nth-child(even) .staff-member h6, body.summer .content-section:nth-child(even) .staff-member h1, body.summer .content-section:nth-child(even) .staff-member h2, body.summer .content-section:nth-child(even) .staff-member h3, body.summer .content-section:nth-child(even) .staff-member h4, body.summer .content-section:nth-child(even) .staff-member h5, body.summer .content-section:nth-child(even) .staff-member h6, body.spring .content-section:nth-child(even) .council-member h1, body.spring .content-section:nth-child(even) .council-member h2, body.spring .content-section:nth-child(even) .council-member h3, body.spring .content-section:nth-child(even) .council-member h4, body.spring .content-section:nth-child(even) .council-member h5, body.spring .content-section:nth-child(even) .council-member h6, body.summer .content-section:nth-child(even) .council-member h1, body.summer .content-section:nth-child(even) .council-member h2, body.summer .content-section:nth-child(even) .council-member h3, body.summer .content-section:nth-child(even) .council-member h4, body.summer .content-section:nth-child(even) .council-member h5, body.summer .content-section:nth-child(even) .council-member h6, body.spring .content-section:nth-child(even) .contact-item h1, body.spring .content-section:nth-child(even) .contact-item h2, body.spring .content-section:nth-child(even) .contact-item h3, body.spring .content-section:nth-child(even) .contact-item h4, body.spring .content-section:nth-child(even) .contact-item h5, body.spring .content-section:nth-child(even) .contact-item h6, body.summer .content-section:nth-child(even) .contact-item h1, body.summer .content-section:nth-child(even) .contact-item h2, body.summer .content-section:nth-child(even) .contact-item h3, body.summer .content-section:nth-child(even) .contact-item h4, body.summer .content-section:nth-child(even) .contact-item h5, body.summer .content-section:nth-child(even) .contact-item h6, body.spring .content-section:nth-child(even) .election-year-content h1, body.spring .content-section:nth-child(even) .election-year-content h2, body.spring .content-section:nth-child(even) .election-year-content h3, body.spring .content-section:nth-child(even) .election-year-content h4, body.spring .content-section:nth-child(even) .election-year-content h5, body.spring .content-section:nth-child(even) .election-year-content h6, body.summer .content-section:nth-child(even) .election-year-content h1, body.summer .content-section:nth-child(even) .election-year-content h2, body.summer .content-section:nth-child(even) .election-year-content h3, body.summer .content-section:nth-child(even) .election-year-content h4, body.summer .content-section:nth-child(even) .election-year-content h5, body.summer .content-section:nth-child(even) .election-year-content h6, body.spring .content-section:nth-child(even) .notice-info h1, body.spring .content-section:nth-child(even) .notice-info h2, body.spring .content-section:nth-child(even) .notice-info h3, body.spring .content-section:nth-child(even) .notice-info h4, body.spring .content-section:nth-child(even) .notice-info h5, body.spring .content-section:nth-child(even) .notice-info h6, body.summer .content-section:nth-child(even) .notice-info h1, body.summer .content-section:nth-child(even) .notice-info h2, body.summer .content-section:nth-child(even) .notice-info h3, body.summer .content-section:nth-child(even) .notice-info h4, body.summer .content-section:nth-child(even) .notice-info h5, body.summer .content-section:nth-child(even) .notice-info h6, body.spring .content-section:nth-child(even) .reservation-item h1, body.spring .content-section:nth-child(even) .reservation-item h2, body.spring .content-section:nth-child(even) .reservation-item h3, body.spring .content-section:nth-child(even) .reservation-item h4, body.spring .content-section:nth-child(even) .reservation-item h5, body.spring .content-section:nth-child(even) .reservation-item h6, body.summer .content-section:nth-child(even) .reservation-item h1, body.summer .content-section:nth-child(even) .reservation-item h2, body.summer .content-section:nth-child(even) .reservation-item h3, body.summer .content-section:nth-child(even) .reservation-item h4, body.summer .content-section:nth-child(even) .reservation-item h5, body.summer .content-section:nth-child(even) .reservation-item h6, body.spring .content-section:nth-child(even) .sponsor-card h1, body.spring .content-section:nth-child(even) .sponsor-card h2, body.spring .content-section:nth-child(even) .sponsor-card h3, body.spring .content-section:nth-child(even) .sponsor-card h4, body.spring .content-section:nth-child(even) .sponsor-card h5, body.spring .content-section:nth-child(even) .sponsor-card h6, body.summer .content-section:nth-child(even) .sponsor-card h1, body.summer .content-section:nth-child(even) .sponsor-card h2, body.summer .content-section:nth-child(even) .sponsor-card h3, body.summer .content-section:nth-child(even) .sponsor-card h4, body.summer .content-section:nth-child(even) .sponsor-card h5, body.summer .content-section:nth-child(even) .sponsor-card h6, body.spring .content-section:nth-child(even) .fee-card h1, body.spring .content-section:nth-child(even) .fee-card h2, body.spring .content-section:nth-child(even) .fee-card h3, body.spring .content-section:nth-child(even) .fee-card h4, body.spring .content-section:nth-child(even) .fee-card h5, body.spring .content-section:nth-child(even) .fee-card h6, body.summer .content-section:nth-child(even) .fee-card h1, body.summer .content-section:nth-child(even) .fee-card h2, body.summer .content-section:nth-child(even) .fee-card h3, body.summer .content-section:nth-child(even) .fee-card h4, body.summer .content-section:nth-child(even) .fee-card h5, body.summer .content-section:nth-child(even) .fee-card h6, body.spring .content-section:nth-child(even) .rental-fee-item h1, body.spring .content-section:nth-child(even) .rental-fee-item h2, body.spring .content-section:nth-child(even) .rental-fee-item h3, body.spring .content-section:nth-child(even) .rental-fee-item h4, body.spring .content-section:nth-child(even) .rental-fee-item h5, body.spring .content-section:nth-child(even) .rental-fee-item h6, body.summer .content-section:nth-child(even) .rental-fee-item h1, body.summer .content-section:nth-child(even) .rental-fee-item h2, body.summer .content-section:nth-child(even) .rental-fee-item h3, body.summer .content-section:nth-child(even) .rental-fee-item h4, body.summer .content-section:nth-child(even) .rental-fee-item h5, body.summer .content-section:nth-child(even) .rental-fee-item h6, body.spring .content-section:nth-child(even) .calendar-event-item h1, body.spring .content-section:nth-child(even) .calendar-event-item h2, body.spring .content-section:nth-child(even) .calendar-event-item h3, body.spring .content-section:nth-child(even) .calendar-event-item h4, body.spring .content-section:nth-child(even) .calendar-event-item h5, body.spring .content-section:nth-child(even) .calendar-event-item h6, body.summer .content-section:nth-child(even) .calendar-event-item h1, body.summer .content-section:nth-child(even) .calendar-event-item h2, body.summer .content-section:nth-child(even) .calendar-event-item h3, body.summer .content-section:nth-child(even) .calendar-event-item h4, body.summer .content-section:nth-child(even) .calendar-event-item h5, body.summer .content-section:nth-child(even) .calendar-event-item h6, body.spring .content-section:nth-child(even) .fee-summary-item h1, body.spring .content-section:nth-child(even) .fee-summary-item h2, body.spring .content-section:nth-child(even) .fee-summary-item h3, body.spring .content-section:nth-child(even) .fee-summary-item h4, body.spring .content-section:nth-child(even) .fee-summary-item h5, body.spring .content-section:nth-child(even) .fee-summary-item h6, body.summer .content-section:nth-child(even) .fee-summary-item h1, body.summer .content-section:nth-child(even) .fee-summary-item h2, body.summer .content-section:nth-child(even) .fee-summary-item h3, body.summer .content-section:nth-child(even) .fee-summary-item h4, body.summer .content-section:nth-child(even) .fee-summary-item h5, body.summer .content-section:nth-child(even) .fee-summary-item h6, body.spring .content-section:nth-child(even) .service-card h1, body.spring .content-section:nth-child(even) .service-card h2, body.spring .content-section:nth-child(even) .service-card h3, body.spring .content-section:nth-child(even) .service-card h4, body.spring .content-section:nth-child(even) .service-card h5, body.spring .content-section:nth-child(even) .service-card h6, body.summer .content-section:nth-child(even) .service-card h1, body.summer .content-section:nth-child(even) .service-card h2, body.summer .content-section:nth-child(even) .service-card h3, body.summer .content-section:nth-child(even) .service-card h4, body.summer .content-section:nth-child(even) .service-card h5, body.summer .content-section:nth-child(even) .service-card h6, body.spring .content-section:nth-child(even) .event-info-box h1, body.spring .content-section:nth-child(even) .event-info-box h2, body.spring .content-section:nth-child(even) .event-info-box h3, body.spring .content-section:nth-child(even) .event-info-box h4, body.spring .content-section:nth-child(even) .event-info-box h5, body.spring .content-section:nth-child(even) .event-info-box h6, body.summer .content-section:nth-child(even) .event-info-box h1, body.summer .content-section:nth-child(even) .event-info-box h2, body.summer .content-section:nth-child(even) .event-info-box h3, body.summer .content-section:nth-child(even) .event-info-box h4, body.summer .content-section:nth-child(even) .event-info-box h5, body.summer .content-section:nth-child(even) .event-info-box h6, body.spring .content-section:nth-child(even) .contact-card h1, body.spring .content-section:nth-child(even) .contact-card h2, body.spring .content-section:nth-child(even) .contact-card h3, body.spring .content-section:nth-child(even) .contact-card h4, body.spring .content-section:nth-child(even) .contact-card h5, body.spring .content-section:nth-child(even) .contact-card h6, body.summer .content-section:nth-child(even) .contact-card h1, body.summer .content-section:nth-child(even) .contact-card h2, body.summer .content-section:nth-child(even) .contact-card h3, body.summer .content-section:nth-child(even) .contact-card h4, body.summer .content-section:nth-child(even) .contact-card h5, body.summer .content-section:nth-child(even) .contact-card h6, body.spring .content-section:nth-child(even) .duty-item h1, body.spring .content-section:nth-child(even) .duty-item h2, body.spring .content-section:nth-child(even) .duty-item h3, body.spring .content-section:nth-child(even) .duty-item h4, body.spring .content-section:nth-child(even) .duty-item h5, body.spring .content-section:nth-child(even) .duty-item h6, body.summer .content-section:nth-child(even) .duty-item h1, body.summer .content-section:nth-child(even) .duty-item h2, body.summer .content-section:nth-child(even) .duty-item h3, body.summer .content-section:nth-child(even) .duty-item h4, body.summer .content-section:nth-child(even) .duty-item h5, body.summer .content-section:nth-child(even) .duty-item h6, body.spring .content-section:nth-child(even) .meeting-card h1, body.spring .content-section:nth-child(even) .meeting-card h2, body.spring .content-section:nth-child(even) .meeting-card h3, body.spring .content-section:nth-child(even) .meeting-card h4, body.spring .content-section:nth-child(even) .meeting-card h5, body.spring .content-section:nth-child(even) .meeting-card h6, body.summer .content-section:nth-child(even) .meeting-card h1, body.summer .content-section:nth-child(even) .meeting-card h2, body.summer .content-section:nth-child(even) .meeting-card h3, body.summer .content-section:nth-child(even) .meeting-card h4, body.summer .content-section:nth-child(even) .meeting-card h5, body.summer .content-section:nth-child(even) .meeting-card h6, body.spring .content-section:nth-child(even) .service-item h1, body.spring .content-section:nth-child(even) .service-item h2, body.spring .content-section:nth-child(even) .service-item h3, body.spring .content-section:nth-child(even) .service-item h4, body.spring .content-section:nth-child(even) .service-item h5, body.spring .content-section:nth-child(even) .service-item h6, body.summer .content-section:nth-child(even) .service-item h1, body.summer .content-section:nth-child(even) .service-item h2, body.summer .content-section:nth-child(even) .service-item h3, body.summer .content-section:nth-child(even) .service-item h4, body.summer .content-section:nth-child(even) .service-item h5, body.summer .content-section:nth-child(even) .service-item h6, body.spring .content-section:nth-child(even) .timeline-item h1, body.spring .content-section:nth-child(even) .timeline-item h2, body.spring .content-section:nth-child(even) .timeline-item h3, body.spring .content-section:nth-child(even) .timeline-item h4, body.spring .content-section:nth-child(even) .timeline-item h5, body.spring .content-section:nth-child(even) .timeline-item h6, body.summer .content-section:nth-child(even) .timeline-item h1, body.summer .content-section:nth-child(even) .timeline-item h2, body.summer .content-section:nth-child(even) .timeline-item h3, body.summer .content-section:nth-child(even) .timeline-item h4, body.summer .content-section:nth-child(even) .timeline-item h5, body.summer .content-section:nth-child(even) .timeline-item h6, body.spring .content-section:nth-child(even) .heritage-highlight h1, body.spring .content-section:nth-child(even) .heritage-highlight h2, body.spring .content-section:nth-child(even) .heritage-highlight h3, body.spring .content-section:nth-child(even) .heritage-highlight h4, body.spring .content-section:nth-child(even) .heritage-highlight h5, body.spring .content-section:nth-child(even) .heritage-highlight h6, body.summer .content-section:nth-child(even) .heritage-highlight h1, body.summer .content-section:nth-child(even) .heritage-highlight h2, body.summer .content-section:nth-child(even) .heritage-highlight h3, body.summer .content-section:nth-child(even) .heritage-highlight h4, body.summer .content-section:nth-child(even) .heritage-highlight h5, body.summer .content-section:nth-child(even) .heritage-highlight h6, body.spring .content-section:nth-child(even) .heritage-link-wrapper h1, body.spring .content-section:nth-child(even) .heritage-link-wrapper h2, body.spring .content-section:nth-child(even) .heritage-link-wrapper h3, body.spring .content-section:nth-child(even) .heritage-link-wrapper h4, body.spring .content-section:nth-child(even) .heritage-link-wrapper h5, body.spring .content-section:nth-child(even) .heritage-link-wrapper h6, body.summer .content-section:nth-child(even) .heritage-link-wrapper h1, body.summer .content-section:nth-child(even) .heritage-link-wrapper h2, body.summer .content-section:nth-child(even) .heritage-link-wrapper h3, body.summer .content-section:nth-child(even) .heritage-link-wrapper h4, body.summer .content-section:nth-child(even) .heritage-link-wrapper h5, body.summer .content-section:nth-child(even) .heritage-link-wrapper h6 { color: var(--season-text-primary) !important; } /* Override specific heading color rules in even sections */ body.spring .content-section:nth-child(even) .regular-reservations h3, body.summer .content-section:nth-child(even) .regular-reservations h3 { color: var(--season-content-even-text) !important; } body.spring .content-section:nth-child(even) h2, body.summer .content-section:nth-child(even) h2 { border-bottom-color: var(--color-overlay-light); } body.spring .content-section:nth-child(even) p, body.spring .content-section:nth-child(even) li, body.summer .content-section:nth-child(even) p, body.summer .content-section:nth-child(even) li { color: var(--color-white); } body.spring .content-section:nth-child(even) .contact-info p, body.summer .content-section:nth-child(even) .contact-info p { color: var(--color-text-default); } body.spring .content-section:nth-child(even) .info-box li, body.summer .content-section:nth-child(even) .info-box li { color: var(--color-gray-600); } body.spring .content-section:nth-child(even) .info-box, body.summer .content-section:nth-child(even) .info-box { color: var(--color-text-default); } body.spring .content-section:nth-child(even) .info-box h4, body.summer .content-section:nth-child(even) .info-box h4 { color: var(--season-primary); } body.spring .content-section:nth-child(even) .info-box p, body.spring .content-section:nth-child(even) .info-box li, body.spring .content-section:nth-child(even) .info-box em, body.spring .content-section:nth-child(even) .info-box strong, body.summer .content-section:nth-child(even) .info-box p, body.summer .content-section:nth-child(even) .info-box li, body.summer .content-section:nth-child(even) .info-box em, body.summer .content-section:nth-child(even) .info-box strong { color: var(--color-text-default); } body.spring .content-section:nth-child(even) .info-box a:not(.btn), body.summer .content-section:nth-child(even) .info-box a:not(.btn) { color: var(--color-link-default); } body.spring .content-section:nth-child(even) .info-box a:not(.btn):hover, body.summer .content-section:nth-child(even) .info-box a:not(.btn):hover { color: var(--color-link-hover); } /* Spring/Summer - Ensure white container text stays dark in even sections */ body.spring .content-section:nth-child(even) .contact-info p, body.spring .content-section:nth-child(even) .notice-info p, body.spring .content-section:nth-child(even) .notice-info li, body.spring .content-section:nth-child(even) .card p, body.spring .content-section:nth-child(even) .staff-member p, body.spring .content-section:nth-child(even) .council-member p, body.spring .content-section:nth-child(even) .contact-item p, body.spring .content-section:nth-child(even) .election-year-content p, body.spring .content-section:nth-child(even) .reservation-item p, body.spring .content-section:nth-child(even) .reservation-item li, body.spring .content-section:nth-child(even) .sponsor-card p, body.spring .content-section:nth-child(even) .sponsor-card li, body.spring .content-section:nth-child(even) .fee-card p, body.spring .content-section:nth-child(even) .fee-card li, body.spring .content-section:nth-child(even) .rental-fee-item p, body.spring .content-section:nth-child(even) .rental-fee-item li, body.spring .content-section:nth-child(even) .calendar-event-item p, body.spring .content-section:nth-child(even) .calendar-event-item li, body.spring .content-section:nth-child(even) .fee-summary-item p, body.spring .content-section:nth-child(even) .fee-summary-item li, body.summer .content-section:nth-child(even) .contact-info p, body.summer .content-section:nth-child(even) .notice-info p, body.summer .content-section:nth-child(even) .notice-info li, body.summer .content-section:nth-child(even) .card p, body.summer .content-section:nth-child(even) .staff-member p, body.summer .content-section:nth-child(even) .council-member p, body.summer .content-section:nth-child(even) .contact-item p, body.summer .content-section:nth-child(even) .election-year-content p, body.summer .content-section:nth-child(even) .reservation-item p, body.summer .content-section:nth-child(even) .reservation-item li, body.summer .content-section:nth-child(even) .sponsor-card p, body.summer .content-section:nth-child(even) .sponsor-card li, body.summer .content-section:nth-child(even) .fee-card p, body.summer .content-section:nth-child(even) .fee-card li, body.summer .content-section:nth-child(even) .rental-fee-item p, body.summer .content-section:nth-child(even) .rental-fee-item li, body.summer .content-section:nth-child(even) .calendar-event-item p, body.summer .content-section:nth-child(even) .calendar-event-item li, body.summer .content-section:nth-child(even) .fee-summary-item p, body.summer .content-section:nth-child(even) .fee-summary-item li { color: var(--color-text-default); } body.spring .content-section:nth-child(even) .contact-info a:not(.btn), body.spring .content-section:nth-child(even) .notice-info a:not(.btn), body.spring .content-section:nth-child(even) .card a:not(.btn), body.spring .content-section:nth-child(even) .staff-member a:not(.btn), body.spring .content-section:nth-child(even) .council-member a:not(.btn), body.spring .content-section:nth-child(even) .contact-item a:not(.btn), body.spring .content-section:nth-child(even) .election-year-content a:not(.btn), body.spring .content-section:nth-child(even) .reservation-item a:not(.btn), body.spring .content-section:nth-child(even) .sponsor-card a:not(.btn), body.spring .content-section:nth-child(even) .fee-card a:not(.btn), body.spring .content-section:nth-child(even) .rental-fee-item a:not(.btn), body.spring .content-section:nth-child(even) .calendar-event-item a:not(.btn), body.spring .content-section:nth-child(even) .fee-summary-item a:not(.btn), body.summer .content-section:nth-child(even) .contact-info a:not(.btn), body.summer .content-section:nth-child(even) .notice-info a:not(.btn), body.summer .content-section:nth-child(even) .card a:not(.btn), body.summer .content-section:nth-child(even) .staff-member a:not(.btn), body.summer .content-section:nth-child(even) .council-member a:not(.btn), body.summer .content-section:nth-child(even) .contact-item a:not(.btn), body.summer .content-section:nth-child(even) .election-year-content a:not(.btn), body.summer .content-section:nth-child(even) .reservation-item a:not(.btn), body.summer .content-section:nth-child(even) .sponsor-card a:not(.btn), body.summer .content-section:nth-child(even) .fee-card a:not(.btn), body.summer .content-section:nth-child(even) .rental-fee-item a:not(.btn), body.summer .content-section:nth-child(even) .calendar-event-item a:not(.btn), body.summer .content-section:nth-child(even) .fee-summary-item a:not(.btn) { color: var(--color-link-default); } body.spring .content-section:nth-child(even) .contact-info a:not(.btn):hover, body.spring .content-section:nth-child(even) .notice-info a:not(.btn):hover, body.spring .content-section:nth-child(even) .card a:not(.btn):hover, body.spring .content-section:nth-child(even) .staff-member a:not(.btn):hover, body.spring .content-section:nth-child(even) .council-member a:not(.btn):hover, body.spring .content-section:nth-child(even) .contact-item a:not(.btn):hover, body.spring .content-section:nth-child(even) .election-year-content a:not(.btn):hover, body.spring .content-section:nth-child(even) .reservation-item a:not(.btn):hover, body.spring .content-section:nth-child(even) .sponsor-card a:not(.btn):hover, body.spring .content-section:nth-child(even) .fee-card a:not(.btn):hover, body.spring .content-section:nth-child(even) .rental-fee-item a:not(.btn):hover, body.spring .content-section:nth-child(even) .calendar-event-item a:not(.btn):hover, body.spring .content-section:nth-child(even) .fee-summary-item a:not(.btn):hover, body.summer .content-section:nth-child(even) .contact-info a:not(.btn):hover, body.summer .content-section:nth-child(even) .notice-info a:not(.btn):hover, body.summer .content-section:nth-child(even) .card a:not(.btn):hover, body.summer .content-section:nth-child(even) .staff-member a:not(.btn):hover, body.summer .content-section:nth-child(even) .council-member a:not(.btn):hover, body.summer .content-section:nth-child(even) .contact-item a:not(.btn):hover, body.summer .content-section:nth-child(even) .election-year-content a:not(.btn):hover, body.summer .content-section:nth-child(even) .reservation-item a:not(.btn):hover, body.summer .content-section:nth-child(even) .sponsor-card a:not(.btn):hover, body.summer .content-section:nth-child(even) .fee-card a:not(.btn):hover, body.summer .content-section:nth-child(even) .rental-fee-item a:not(.btn):hover, body.summer .content-section:nth-child(even) .calendar-event-item a:not(.btn):hover, body.summer .content-section:nth-child(even) .fee-summary-item a:not(.btn):hover { color: var(--color-link-hover); } body.spring .content-section:nth-child(even) .notice-info p, body.summer .content-section:nth-child(even) .notice-info p, body.spring .content-section:nth-child(even) .notice-info li, body.summer .content-section:nth-child(even) .notice-info li { color: var(--color-text-default); } body.spring .content-section:nth-child(even) .reservation-item p, body.summer .content-section:nth-child(even) .reservation-item p, body.spring .content-section:nth-child(even) .reservation-item li, body.summer .content-section:nth-child(even) .reservation-item li { color: var(--color-text-default); } body.spring .content-section:nth-child(even) .sponsor-card p, body.summer .content-section:nth-child(even) .sponsor-card p, body.spring .content-section:nth-child(even) .sponsor-card li, body.summer .content-section:nth-child(even) .sponsor-card li, body.spring .content-section:nth-child(even) .fee-card p, body.summer .content-section:nth-child(even) .fee-card p, body.spring .content-section:nth-child(even) .fee-card li, body.summer .content-section:nth-child(even) .fee-card li, body.spring .content-section:nth-child(even) .rental-fee-item p, body.summer .content-section:nth-child(even) .rental-fee-item p, body.spring .content-section:nth-child(even) .rental-fee-item li, body.summer .content-section:nth-child(even) .rental-fee-item li, body.spring .content-section:nth-child(even) .calendar-event-item p, body.summer .content-section:nth-child(even) .calendar-event-item p, body.spring .content-section:nth-child(even) .calendar-event-item li, body.summer .content-section:nth-child(even) .calendar-event-item li, body.spring .content-section:nth-child(even) .fee-summary-item p, body.summer .content-section:nth-child(even) .fee-summary-item p, body.spring .content-section:nth-child(even) .fee-summary-item li, body.summer .content-section:nth-child(even) .fee-summary-item li, body.spring .content-section:nth-child(even) .service-card p, body.summer .content-section:nth-child(even) .service-card p, body.spring .content-section:nth-child(even) .service-card li, body.summer .content-section:nth-child(even) .service-card li, body.spring .content-section:nth-child(even) .event-info-box p, body.summer .content-section:nth-child(even) .event-info-box p, body.summer .content-section:nth-child(even) .event-info-box li, body.spring .content-section:nth-child(even) .event-info-box li, body.spring .content-section:nth-child(even) .contact-card p, body.summer .content-section:nth-child(even) .contact-card p, body.spring .content-section:nth-child(even) .contact-card li, body.summer .content-section:nth-child(even) .contact-card li, body.spring .content-section:nth-child(even) .duty-item p, body.summer .content-section:nth-child(even) .duty-item p, body.spring .content-section:nth-child(even) .duty-item li, body.summer .content-section:nth-child(even) .duty-item li, body.spring .content-section:nth-child(even) .meeting-card p, body.summer .content-section:nth-child(even) .meeting-card p, body.spring .content-section:nth-child(even) .meeting-card li, body.summer .content-section:nth-child(even) .meeting-card li, body.spring .content-section:nth-child(even) .service-item p, body.summer .content-section:nth-child(even) .service-item p, body.spring .content-section:nth-child(even) .service-item li, body.summer .content-section:nth-child(even) .service-item li, body.spring .content-section:nth-child(even) .timeline-item p, body.summer .content-section:nth-child(even) .timeline-item p, body.spring .content-section:nth-child(even) .timeline-item li, body.summer .content-section:nth-child(even) .timeline-item li, body.spring .content-section:nth-child(even) .heritage-highlight p, body.summer .content-section:nth-child(even) .heritage-highlight p, body.spring .content-section:nth-child(even) .heritage-highlight li, body.summer .content-section:nth-child(even) .heritage-highlight li, body.spring .content-section:nth-child(even) .heritage-link-wrapper p, body.summer .content-section:nth-child(even) .heritage-link-wrapper p, body.spring .content-section:nth-child(even) .heritage-link-wrapper li, body.summer .content-section:nth-child(even) .heritage-link-wrapper li { color: var(--color-text-default); } body.spring .content-section:nth-child(even) a:not(.btn):not(.content-card a), body.summer .content-section:nth-child(even) a:not(.btn):not(.content-card a) { color: var(--color-white) !important; } body.spring .content-section:nth-child(even) a:not(.btn):not(.content-card a):hover, body.summer .content-section:nth-child(even) a:not(.btn):not(.content-card a):hover { color: rgba(255, 255, 255, 0.8) !important; text-decoration: underline; } /* Links in white/light background containers should use season link color */ /* These rules must come after the white link rule and have higher specificity */ body.spring .content-section:nth-child(even) .contact-info a:not(.btn):not(.content-card a), body.summer .content-section:nth-child(even) .contact-info a:not(.btn):not(.content-card a), body.spring .content-section:nth-child(even) .info-box a:not(.btn):not(.content-card a), body.summer .content-section:nth-child(even) .info-box a:not(.btn):not(.content-card a), body.spring .content-section:nth-child(even) .card a:not(.btn):not(.content-card a), body.summer .content-section:nth-child(even) .card a:not(.btn):not(.content-card a), body.spring .content-section:nth-child(even) .staff-member a:not(.btn):not(.content-card a), body.summer .content-section:nth-child(even) .staff-member a:not(.btn):not(.content-card a), body.spring .content-section:nth-child(even) .council-member a:not(.btn):not(.content-card a), body.summer .content-section:nth-child(even) .council-member a:not(.btn):not(.content-card a), body.spring .content-section:nth-child(even) .contact-item a:not(.btn):not(.content-card a), body.summer .content-section:nth-child(even) .contact-item a:not(.btn):not(.content-card a), body.spring .content-section:nth-child(even) .election-year-content a:not(.btn):not(.content-card a), body.summer .content-section:nth-child(even) .election-year-content a:not(.btn):not(.content-card a), body.spring .content-section:nth-child(even) .notice-info a:not(.btn):not(.content-card a), body.summer .content-section:nth-child(even) .notice-info a:not(.btn):not(.content-card a), body.spring .content-section:nth-child(even) .reservation-item a:not(.btn):not(.content-card a), body.summer .content-section:nth-child(even) .reservation-item a:not(.btn):not(.content-card a), body.spring .content-section:nth-child(even) .sponsor-card a:not(.btn):not(.content-card a), body.summer .content-section:nth-child(even) .sponsor-card a:not(.btn):not(.content-card a), body.spring .content-section:nth-child(even) .fee-card a:not(.btn):not(.content-card a), body.summer .content-section:nth-child(even) .fee-card a:not(.btn):not(.content-card a), body.spring .content-section:nth-child(even) .rental-fee-item a:not(.btn):not(.content-card a), body.summer .content-section:nth-child(even) .rental-fee-item a:not(.btn):not(.content-card a), body.spring .content-section:nth-child(even) .calendar-event-item a:not(.btn):not(.content-card a), body.summer .content-section:nth-child(even) .calendar-event-item a:not(.btn):not(.content-card a), body.spring .content-section:nth-child(even) .fee-summary-item a:not(.btn):not(.content-card a), body.summer .content-section:nth-child(even) .fee-summary-item a:not(.btn):not(.content-card a), body.spring .content-section:nth-child(even) .service-card a:not(.btn):not(.content-card a), body.summer .content-section:nth-child(even) .service-card a:not(.btn):not(.content-card a), body.spring .content-section:nth-child(even) .event-info-box a:not(.btn):not(.content-card a), body.summer .content-section:nth-child(even) .event-info-box a:not(.btn):not(.content-card a), body.spring .content-section:nth-child(even) .contact-card a:not(.btn):not(.content-card a), body.summer .content-section:nth-child(even) .contact-card a:not(.btn):not(.content-card a), body.spring .content-section:nth-child(even) .duty-item a:not(.btn):not(.content-card a), body.summer .content-section:nth-child(even) .duty-item a:not(.btn):not(.content-card a), body.spring .content-section:nth-child(even) .meeting-card a:not(.btn):not(.content-card a), body.summer .content-section:nth-child(even) .meeting-card a:not(.btn):not(.content-card a), body.spring .content-section:nth-child(even) .service-item a:not(.btn):not(.content-card a), body.summer .content-section:nth-child(even) .service-item a:not(.btn):not(.content-card a), body.spring .content-section:nth-child(even) .timeline-item a:not(.btn):not(.content-card a), body.summer .content-section:nth-child(even) .timeline-item a:not(.btn):not(.content-card a), body.spring .content-section:nth-child(even) .heritage-highlight a:not(.btn):not(.content-card a), body.summer .content-section:nth-child(even) .heritage-highlight a:not(.btn):not(.content-card a), body.spring .content-section:nth-child(even) .heritage-link-wrapper a:not(.btn):not(.content-card a), body.summer .content-section:nth-child(even) .heritage-link-wrapper a:not(.btn):not(.content-card a) { color: var(--season-link) !important; } body.spring .content-section:nth-child(even) .contact-info a:not(.btn):not(.content-card a):hover, body.summer .content-section:nth-child(even) .contact-info a:not(.btn):not(.content-card a):hover, body.spring .content-section:nth-child(even) .info-box a:not(.btn):not(.content-card a):hover, body.summer .content-section:nth-child(even) .info-box a:not(.btn):not(.content-card a):hover, body.spring .content-section:nth-child(even) .card a:not(.btn):not(.content-card a):hover, body.summer .content-section:nth-child(even) .card a:not(.btn):not(.content-card a):hover, body.spring .content-section:nth-child(even) .staff-member a:not(.btn):not(.content-card a):hover, body.summer .content-section:nth-child(even) .staff-member a:not(.btn):not(.content-card a):hover, body.spring .content-section:nth-child(even) .council-member a:not(.btn):not(.content-card a):hover, body.summer .content-section:nth-child(even) .council-member a:not(.btn):not(.content-card a):hover, body.spring .content-section:nth-child(even) .contact-item a:not(.btn):not(.content-card a):hover, body.summer .content-section:nth-child(even) .contact-item a:not(.btn):not(.content-card a):hover, body.spring .content-section:nth-child(even) .election-year-content a:not(.btn):not(.content-card a):hover, body.summer .content-section:nth-child(even) .election-year-content a:not(.btn):not(.content-card a):hover, body.spring .content-section:nth-child(even) .notice-info a:not(.btn):not(.content-card a):hover, body.summer .content-section:nth-child(even) .notice-info a:not(.btn):not(.content-card a):hover, body.spring .content-section:nth-child(even) .reservation-item a:not(.btn):not(.content-card a):hover, body.summer .content-section:nth-child(even) .reservation-item a:not(.btn):not(.content-card a):hover, body.spring .content-section:nth-child(even) .sponsor-card a:not(.btn):not(.content-card a):hover, body.summer .content-section:nth-child(even) .sponsor-card a:not(.btn):not(.content-card a):hover, body.spring .content-section:nth-child(even) .fee-card a:not(.btn):not(.content-card a):hover, body.summer .content-section:nth-child(even) .fee-card a:not(.btn):not(.content-card a):hover, body.spring .content-section:nth-child(even) .rental-fee-item a:not(.btn):not(.content-card a):hover, body.summer .content-section:nth-child(even) .rental-fee-item a:not(.btn):not(.content-card a):hover, body.spring .content-section:nth-child(even) .calendar-event-item a:not(.btn):not(.content-card a):hover, body.summer .content-section:nth-child(even) .calendar-event-item a:not(.btn):not(.content-card a):hover, body.spring .content-section:nth-child(even) .fee-summary-item a:not(.btn):not(.content-card a):hover, body.summer .content-section:nth-child(even) .fee-summary-item a:not(.btn):not(.content-card a):hover, body.spring .content-section:nth-child(even) .service-card a:not(.btn):not(.content-card a):hover, body.summer .content-section:nth-child(even) .service-card a:not(.btn):not(.content-card a):hover, body.spring .content-section:nth-child(even) .event-info-box a:not(.btn):not(.content-card a):hover, body.summer .content-section:nth-child(even) .event-info-box a:not(.btn):not(.content-card a):hover, body.spring .content-section:nth-child(even) .contact-card a:not(.btn):not(.content-card a):hover, body.summer .content-section:nth-child(even) .contact-card a:not(.btn):not(.content-card a):hover, body.spring .content-section:nth-child(even) .duty-item a:not(.btn):not(.content-card a):hover, body.summer .content-section:nth-child(even) .duty-item a:not(.btn):not(.content-card a):hover, body.spring .content-section:nth-child(even) .meeting-card a:not(.btn):not(.content-card a):hover, body.summer .content-section:nth-child(even) .meeting-card a:not(.btn):not(.content-card a):hover, body.spring .content-section:nth-child(even) .service-item a:not(.btn):not(.content-card a):hover, body.summer .content-section:nth-child(even) .service-item a:not(.btn):not(.content-card a):hover, body.spring .content-section:nth-child(even) .timeline-item a:not(.btn):not(.content-card a):hover, body.summer .content-section:nth-child(even) .timeline-item a:not(.btn):not(.content-card a):hover, body.spring .content-section:nth-child(even) .heritage-highlight a:not(.btn):not(.content-card a):hover, body.summer .content-section:nth-child(even) .heritage-highlight a:not(.btn):not(.content-card a):hover, body.spring .content-section:nth-child(even) .heritage-link-wrapper a:not(.btn):not(.content-card a):hover, body.summer .content-section:nth-child(even) .heritage-link-wrapper a:not(.btn):not(.content-card a):hover { color: var(--season-link-hover) !important; } body.spring .content-section:nth-child(even) .staff-member .staff-title, body.summer .content-section:nth-child(even) .staff-member .staff-title { color: var(--color-text-muted); } body.spring .content-section h2, body.summer .content-section h2 { color: var(--season-text-primary); } /* Fall/Winter - Primary: #c2410c, Complementary: #0891b2 */ body.fall .content-section:nth-child(odd), body.winter .content-section:nth-child(odd) { background: linear-gradient(135deg, var(--season-content-odd-bg-start) 0%, var(--season-content-odd-bg-end) 100%); color: var(--color-text-default); } body.fall .content-section:nth-child(odd) p, body.fall .content-section:nth-child(odd) li, body.winter .content-section:nth-child(odd) p, body.winter .content-section:nth-child(odd) li { color: var(--color-text-default); } body.fall .content-section:nth-child(even), body.winter .content-section:nth-child(even) { background: linear-gradient(135deg, var(--season-content-even-bg-start) 0%, var(--season-content-even-bg-end) 100%); color: var(--season-content-even-text); } body.fall .content-section:nth-child(even) h1, body.fall .content-section:nth-child(even) h2, body.fall .content-section:nth-child(even) h3, body.fall .content-section:nth-child(even) h4, body.fall .content-section:nth-child(even) h5, body.fall .content-section:nth-child(even) h6, body.winter .content-section:nth-child(even) h1, body.winter .content-section:nth-child(even) h2, body.winter .content-section:nth-child(even) h3, body.winter .content-section:nth-child(even) h4, body.winter .content-section:nth-child(even) h5, body.winter .content-section:nth-child(even) h6 { color: var(--season-content-even-text) !important; } /* Override white heading color for headings inside white/light background containers */ body.fall .content-section:nth-child(even) .contact-info h1, body.fall .content-section:nth-child(even) .contact-info h2, body.fall .content-section:nth-child(even) .contact-info h3, body.fall .content-section:nth-child(even) .contact-info h4, body.fall .content-section:nth-child(even) .contact-info h5, body.fall .content-section:nth-child(even) .contact-info h6, body.winter .content-section:nth-child(even) .contact-info h1, body.winter .content-section:nth-child(even) .contact-info h2, body.winter .content-section:nth-child(even) .contact-info h3, body.winter .content-section:nth-child(even) .contact-info h4, body.winter .content-section:nth-child(even) .contact-info h5, body.winter .content-section:nth-child(even) .contact-info h6, body.fall .content-section:nth-child(even) .info-box h1, body.fall .content-section:nth-child(even) .info-box h2, body.fall .content-section:nth-child(even) .info-box h3, body.fall .content-section:nth-child(even) .info-box h4, body.fall .content-section:nth-child(even) .info-box h5, body.fall .content-section:nth-child(even) .info-box h6, body.winter .content-section:nth-child(even) .info-box h1, body.winter .content-section:nth-child(even) .info-box h2, body.winter .content-section:nth-child(even) .info-box h3, body.winter .content-section:nth-child(even) .info-box h4, body.winter .content-section:nth-child(even) .info-box h5, body.winter .content-section:nth-child(even) .info-box h6, body.fall .content-section:nth-child(even) .card h1, body.fall .content-section:nth-child(even) .card h2, body.fall .content-section:nth-child(even) .card h3, body.fall .content-section:nth-child(even) .card h4, body.fall .content-section:nth-child(even) .card h5, body.fall .content-section:nth-child(even) .card h6, body.winter .content-section:nth-child(even) .card h1, body.winter .content-section:nth-child(even) .card h2, body.winter .content-section:nth-child(even) .card h3, body.winter .content-section:nth-child(even) .card h4, body.winter .content-section:nth-child(even) .card h5, body.winter .content-section:nth-child(even) .card h6, body.fall .content-section:nth-child(even) .staff-member h1, body.fall .content-section:nth-child(even) .staff-member h2, body.fall .content-section:nth-child(even) .staff-member h3, body.fall .content-section:nth-child(even) .staff-member h4, body.fall .content-section:nth-child(even) .staff-member h5, body.fall .content-section:nth-child(even) .staff-member h6, body.winter .content-section:nth-child(even) .staff-member h1, body.winter .content-section:nth-child(even) .staff-member h2, body.winter .content-section:nth-child(even) .staff-member h3, body.winter .content-section:nth-child(even) .staff-member h4, body.winter .content-section:nth-child(even) .staff-member h5, body.winter .content-section:nth-child(even) .staff-member h6, body.fall .content-section:nth-child(even) .council-member h1, body.fall .content-section:nth-child(even) .council-member h2, body.fall .content-section:nth-child(even) .council-member h3, body.fall .content-section:nth-child(even) .council-member h4, body.fall .content-section:nth-child(even) .council-member h5, body.fall .content-section:nth-child(even) .council-member h6, body.winter .content-section:nth-child(even) .council-member h1, body.winter .content-section:nth-child(even) .council-member h2, body.winter .content-section:nth-child(even) .council-member h3, body.winter .content-section:nth-child(even) .council-member h4, body.winter .content-section:nth-child(even) .council-member h5, body.winter .content-section:nth-child(even) .council-member h6, body.fall .content-section:nth-child(even) .contact-item h1, body.fall .content-section:nth-child(even) .contact-item h2, body.fall .content-section:nth-child(even) .contact-item h3, body.fall .content-section:nth-child(even) .contact-item h4, body.fall .content-section:nth-child(even) .contact-item h5, body.fall .content-section:nth-child(even) .contact-item h6, body.winter .content-section:nth-child(even) .contact-item h1, body.winter .content-section:nth-child(even) .contact-item h2, body.winter .content-section:nth-child(even) .contact-item h3, body.winter .content-section:nth-child(even) .contact-item h4, body.winter .content-section:nth-child(even) .contact-item h5, body.winter .content-section:nth-child(even) .contact-item h6, body.fall .content-section:nth-child(even) .election-year-content h1, body.fall .content-section:nth-child(even) .election-year-content h2, body.fall .content-section:nth-child(even) .election-year-content h3, body.fall .content-section:nth-child(even) .election-year-content h4, body.fall .content-section:nth-child(even) .election-year-content h5, body.fall .content-section:nth-child(even) .election-year-content h6, body.winter .content-section:nth-child(even) .election-year-content h1, body.winter .content-section:nth-child(even) .election-year-content h2, body.winter .content-section:nth-child(even) .election-year-content h3, body.winter .content-section:nth-child(even) .election-year-content h4, body.winter .content-section:nth-child(even) .election-year-content h5, body.winter .content-section:nth-child(even) .election-year-content h6, body.fall .content-section:nth-child(even) .notice-info h1, body.fall .content-section:nth-child(even) .notice-info h2, body.fall .content-section:nth-child(even) .notice-info h3, body.fall .content-section:nth-child(even) .notice-info h4, body.fall .content-section:nth-child(even) .notice-info h5, body.fall .content-section:nth-child(even) .notice-info h6, body.winter .content-section:nth-child(even) .notice-info h1, body.winter .content-section:nth-child(even) .notice-info h2, body.winter .content-section:nth-child(even) .notice-info h3, body.winter .content-section:nth-child(even) .notice-info h4, body.winter .content-section:nth-child(even) .notice-info h5, body.winter .content-section:nth-child(even) .notice-info h6, body.fall .content-section:nth-child(even) .reservation-item h1, body.fall .content-section:nth-child(even) .reservation-item h2, body.fall .content-section:nth-child(even) .reservation-item h3, body.fall .content-section:nth-child(even) .reservation-item h4, body.fall .content-section:nth-child(even) .reservation-item h5, body.fall .content-section:nth-child(even) .reservation-item h6, body.winter .content-section:nth-child(even) .reservation-item h1, body.winter .content-section:nth-child(even) .reservation-item h2, body.winter .content-section:nth-child(even) .reservation-item h3, body.winter .content-section:nth-child(even) .reservation-item h4, body.winter .content-section:nth-child(even) .reservation-item h5, body.winter .content-section:nth-child(even) .reservation-item h6, body.fall .content-section:nth-child(even) .sponsor-card h1, body.fall .content-section:nth-child(even) .sponsor-card h2, body.fall .content-section:nth-child(even) .sponsor-card h3, body.fall .content-section:nth-child(even) .sponsor-card h4, body.fall .content-section:nth-child(even) .sponsor-card h5, body.fall .content-section:nth-child(even) .sponsor-card h6, body.winter .content-section:nth-child(even) .sponsor-card h1, body.winter .content-section:nth-child(even) .sponsor-card h2, body.winter .content-section:nth-child(even) .sponsor-card h3, body.winter .content-section:nth-child(even) .sponsor-card h4, body.winter .content-section:nth-child(even) .sponsor-card h5, body.winter .content-section:nth-child(even) .sponsor-card h6, body.fall .content-section:nth-child(even) .fee-card h1, body.fall .content-section:nth-child(even) .fee-card h2, body.fall .content-section:nth-child(even) .fee-card h3, body.fall .content-section:nth-child(even) .fee-card h4, body.fall .content-section:nth-child(even) .fee-card h5, body.fall .content-section:nth-child(even) .fee-card h6, body.winter .content-section:nth-child(even) .fee-card h1, body.winter .content-section:nth-child(even) .fee-card h2, body.winter .content-section:nth-child(even) .fee-card h3, body.winter .content-section:nth-child(even) .fee-card h4, body.winter .content-section:nth-child(even) .fee-card h5, body.winter .content-section:nth-child(even) .fee-card h6, body.fall .content-section:nth-child(even) .rental-fee-item h1, body.fall .content-section:nth-child(even) .rental-fee-item h2, body.fall .content-section:nth-child(even) .rental-fee-item h3, body.fall .content-section:nth-child(even) .rental-fee-item h4, body.fall .content-section:nth-child(even) .rental-fee-item h5, body.fall .content-section:nth-child(even) .rental-fee-item h6, body.winter .content-section:nth-child(even) .rental-fee-item h1, body.winter .content-section:nth-child(even) .rental-fee-item h2, body.winter .content-section:nth-child(even) .rental-fee-item h3, body.winter .content-section:nth-child(even) .rental-fee-item h4, body.winter .content-section:nth-child(even) .rental-fee-item h5, body.winter .content-section:nth-child(even) .rental-fee-item h6, body.fall .content-section:nth-child(even) .calendar-event-item h1, body.fall .content-section:nth-child(even) .calendar-event-item h2, body.fall .content-section:nth-child(even) .calendar-event-item h3, body.fall .content-section:nth-child(even) .calendar-event-item h4, body.fall .content-section:nth-child(even) .calendar-event-item h5, body.fall .content-section:nth-child(even) .calendar-event-item h6, body.winter .content-section:nth-child(even) .calendar-event-item h1, body.winter .content-section:nth-child(even) .calendar-event-item h2, body.winter .content-section:nth-child(even) .calendar-event-item h3, body.winter .content-section:nth-child(even) .calendar-event-item h4, body.winter .content-section:nth-child(even) .calendar-event-item h5, body.winter .content-section:nth-child(even) .calendar-event-item h6, body.fall .content-section:nth-child(even) .fee-summary-item h1, body.fall .content-section:nth-child(even) .fee-summary-item h2, body.fall .content-section:nth-child(even) .fee-summary-item h3, body.fall .content-section:nth-child(even) .fee-summary-item h4, body.fall .content-section:nth-child(even) .fee-summary-item h5, body.fall .content-section:nth-child(even) .fee-summary-item h6, body.winter .content-section:nth-child(even) .fee-summary-item h1, body.winter .content-section:nth-child(even) .fee-summary-item h2, body.winter .content-section:nth-child(even) .fee-summary-item h3, body.winter .content-section:nth-child(even) .fee-summary-item h4, body.winter .content-section:nth-child(even) .fee-summary-item h5, body.winter .content-section:nth-child(even) .fee-summary-item h6, body.fall .content-section:nth-child(even) .service-card h1, body.fall .content-section:nth-child(even) .service-card h2, body.fall .content-section:nth-child(even) .service-card h3, body.fall .content-section:nth-child(even) .service-card h4, body.fall .content-section:nth-child(even) .service-card h5, body.fall .content-section:nth-child(even) .service-card h6, body.winter .content-section:nth-child(even) .service-card h1, body.winter .content-section:nth-child(even) .service-card h2, body.winter .content-section:nth-child(even) .service-card h3, body.winter .content-section:nth-child(even) .service-card h4, body.winter .content-section:nth-child(even) .service-card h5, body.winter .content-section:nth-child(even) .service-card h6, body.fall .content-section:nth-child(even) .event-info-box h1, body.fall .content-section:nth-child(even) .event-info-box h2, body.fall .content-section:nth-child(even) .event-info-box h3, body.fall .content-section:nth-child(even) .event-info-box h4, body.fall .content-section:nth-child(even) .event-info-box h5, body.fall .content-section:nth-child(even) .event-info-box h6, body.winter .content-section:nth-child(even) .event-info-box h1, body.winter .content-section:nth-child(even) .event-info-box h2, body.winter .content-section:nth-child(even) .event-info-box h3, body.winter .content-section:nth-child(even) .event-info-box h4, body.winter .content-section:nth-child(even) .event-info-box h5, body.winter .content-section:nth-child(even) .event-info-box h6, body.fall .content-section:nth-child(even) .contact-card h1, body.fall .content-section:nth-child(even) .contact-card h2, body.fall .content-section:nth-child(even) .contact-card h3, body.fall .content-section:nth-child(even) .contact-card h4, body.fall .content-section:nth-child(even) .contact-card h5, body.fall .content-section:nth-child(even) .contact-card h6, body.winter .content-section:nth-child(even) .contact-card h1, body.winter .content-section:nth-child(even) .contact-card h2, body.winter .content-section:nth-child(even) .contact-card h3, body.winter .content-section:nth-child(even) .contact-card h4, body.winter .content-section:nth-child(even) .contact-card h5, body.winter .content-section:nth-child(even) .contact-card h6, body.fall .content-section:nth-child(even) .duty-item h1, body.fall .content-section:nth-child(even) .duty-item h2, body.fall .content-section:nth-child(even) .duty-item h3, body.fall .content-section:nth-child(even) .duty-item h4, body.fall .content-section:nth-child(even) .duty-item h5, body.fall .content-section:nth-child(even) .duty-item h6, body.winter .content-section:nth-child(even) .duty-item h1, body.winter .content-section:nth-child(even) .duty-item h2, body.winter .content-section:nth-child(even) .duty-item h3, body.winter .content-section:nth-child(even) .duty-item h4, body.winter .content-section:nth-child(even) .duty-item h5, body.winter .content-section:nth-child(even) .duty-item h6, body.fall .content-section:nth-child(even) .meeting-card h1, body.fall .content-section:nth-child(even) .meeting-card h2, body.fall .content-section:nth-child(even) .meeting-card h3, body.fall .content-section:nth-child(even) .meeting-card h4, body.fall .content-section:nth-child(even) .meeting-card h5, body.fall .content-section:nth-child(even) .meeting-card h6, body.winter .content-section:nth-child(even) .meeting-card h1, body.winter .content-section:nth-child(even) .meeting-card h2, body.winter .content-section:nth-child(even) .meeting-card h3, body.winter .content-section:nth-child(even) .meeting-card h4, body.winter .content-section:nth-child(even) .meeting-card h5, body.winter .content-section:nth-child(even) .meeting-card h6, body.fall .content-section:nth-child(even) .service-item h1, body.fall .content-section:nth-child(even) .service-item h2, body.fall .content-section:nth-child(even) .service-item h3, body.fall .content-section:nth-child(even) .service-item h4, body.fall .content-section:nth-child(even) .service-item h5, body.fall .content-section:nth-child(even) .service-item h6, body.winter .content-section:nth-child(even) .service-item h1, body.winter .content-section:nth-child(even) .service-item h2, body.winter .content-section:nth-child(even) .service-item h3, body.winter .content-section:nth-child(even) .service-item h4, body.winter .content-section:nth-child(even) .service-item h5, body.winter .content-section:nth-child(even) .service-item h6, body.fall .content-section:nth-child(even) .timeline-item h1, body.fall .content-section:nth-child(even) .timeline-item h2, body.fall .content-section:nth-child(even) .timeline-item h3, body.fall .content-section:nth-child(even) .timeline-item h4, body.fall .content-section:nth-child(even) .timeline-item h5, body.fall .content-section:nth-child(even) .timeline-item h6, body.winter .content-section:nth-child(even) .timeline-item h1, body.winter .content-section:nth-child(even) .timeline-item h2, body.winter .content-section:nth-child(even) .timeline-item h3, body.winter .content-section:nth-child(even) .timeline-item h4, body.winter .content-section:nth-child(even) .timeline-item h5, body.winter .content-section:nth-child(even) .timeline-item h6, body.fall .content-section:nth-child(even) .heritage-highlight h1, body.fall .content-section:nth-child(even) .heritage-highlight h2, body.fall .content-section:nth-child(even) .heritage-highlight h3, body.fall .content-section:nth-child(even) .heritage-highlight h4, body.fall .content-section:nth-child(even) .heritage-highlight h5, body.fall .content-section:nth-child(even) .heritage-highlight h6, body.winter .content-section:nth-child(even) .heritage-highlight h1, body.winter .content-section:nth-child(even) .heritage-highlight h2, body.winter .content-section:nth-child(even) .heritage-highlight h3, body.winter .content-section:nth-child(even) .heritage-highlight h4, body.winter .content-section:nth-child(even) .heritage-highlight h5, body.winter .content-section:nth-child(even) .heritage-highlight h6, body.fall .content-section:nth-child(even) .heritage-link-wrapper h1, body.fall .content-section:nth-child(even) .heritage-link-wrapper h2, body.fall .content-section:nth-child(even) .heritage-link-wrapper h3, body.fall .content-section:nth-child(even) .heritage-link-wrapper h4, body.fall .content-section:nth-child(even) .heritage-link-wrapper h5, body.fall .content-section:nth-child(even) .heritage-link-wrapper h6, body.winter .content-section:nth-child(even) .heritage-link-wrapper h1, body.winter .content-section:nth-child(even) .heritage-link-wrapper h2, body.winter .content-section:nth-child(even) .heritage-link-wrapper h3, body.winter .content-section:nth-child(even) .heritage-link-wrapper h4, body.winter .content-section:nth-child(even) .heritage-link-wrapper h5, body.winter .content-section:nth-child(even) .heritage-link-wrapper h6 { color: var(--season-text-primary) !important; } /* Override specific heading color rules in even sections */ body.fall .content-section:nth-child(even) .regular-reservations h3, body.winter .content-section:nth-child(even) .regular-reservations h3 { color: var(--season-content-even-text) !important; } body.fall .content-section:nth-child(even) h2, body.winter .content-section:nth-child(even) h2 { border-bottom-color: var(--color-overlay-light); } body.fall .content-section:nth-child(even) p, body.fall .content-section:nth-child(even) li, body.winter .content-section:nth-child(even) p, body.winter .content-section:nth-child(even) li { color: var(--color-white); } body.fall .content-section:nth-child(even) .contact-info p, body.winter .content-section:nth-child(even) .contact-info p { color: var(--color-text-default); } body.fall .content-section:nth-child(even) .info-box, body.winter .content-section:nth-child(even) .info-box { color: var(--color-text-default); } body.fall .content-section:nth-child(even) .info-box h4, body.winter .content-section:nth-child(even) .info-box h4 { color: var(--season-primary); } body.fall .content-section:nth-child(even) .info-box p, body.fall .content-section:nth-child(even) .info-box li, body.fall .content-section:nth-child(even) .info-box em, body.fall .content-section:nth-child(even) .info-box strong, body.winter .content-section:nth-child(even) .info-box p, body.winter .content-section:nth-child(even) .info-box li, body.winter .content-section:nth-child(even) .info-box em, body.winter .content-section:nth-child(even) .info-box strong { color: var(--color-text-default); } body.fall .content-section:nth-child(even) .info-box a:not(.btn), body.winter .content-section:nth-child(even) .info-box a:not(.btn) { color: var(--color-link-default); } body.fall .content-section:nth-child(even) .info-box a:not(.btn):hover, body.winter .content-section:nth-child(even) .info-box a:not(.btn):hover { color: var(--color-link-hover); } body.fall .content-section:nth-child(even) .info-box li, body.winter .content-section:nth-child(even) .info-box li { color: var(--color-gray-600); } body.fall .content-section:nth-child(even) .notice-info p, body.winter .content-section:nth-child(even) .notice-info p, body.fall .content-section:nth-child(even) .notice-info li, body.winter .content-section:nth-child(even) .notice-info li { color: var(--color-text-default); } body.fall .content-section:nth-child(even) .reservation-item p, body.winter .content-section:nth-child(even) .reservation-item p, body.fall .content-section:nth-child(even) .reservation-item li, body.winter .content-section:nth-child(even) .reservation-item li { color: var(--color-text-default); } body.fall .content-section:nth-child(even) .sponsor-card p, body.winter .content-section:nth-child(even) .sponsor-card p, body.fall .content-section:nth-child(even) .sponsor-card li, body.winter .content-section:nth-child(even) .sponsor-card li, body.fall .content-section:nth-child(even) .fee-card p, body.winter .content-section:nth-child(even) .fee-card p, body.fall .content-section:nth-child(even) .fee-card li, body.winter .content-section:nth-child(even) .fee-card li, body.fall .content-section:nth-child(even) .rental-fee-item p, body.winter .content-section:nth-child(even) .rental-fee-item p, body.fall .content-section:nth-child(even) .rental-fee-item li, body.winter .content-section:nth-child(even) .rental-fee-item li, body.fall .content-section:nth-child(even) .calendar-event-item p, body.winter .content-section:nth-child(even) .calendar-event-item p, body.fall .content-section:nth-child(even) .calendar-event-item li, body.winter .content-section:nth-child(even) .calendar-event-item li, body.fall .content-section:nth-child(even) .fee-summary-item p, body.winter .content-section:nth-child(even) .fee-summary-item p, body.fall .content-section:nth-child(even) .fee-summary-item li, body.winter .content-section:nth-child(even) .fee-summary-item li, body.fall .content-section:nth-child(even) .service-card p, body.winter .content-section:nth-child(even) .service-card p, body.fall .content-section:nth-child(even) .service-card li, body.winter .content-section:nth-child(even) .service-card li, body.fall .content-section:nth-child(even) .event-info-box p, body.winter .content-section:nth-child(even) .event-info-box p, body.fall .content-section:nth-child(even) .event-info-box li, body.winter .content-section:nth-child(even) .event-info-box li, body.fall .content-section:nth-child(even) .contact-card p, body.winter .content-section:nth-child(even) .contact-card p, body.fall .content-section:nth-child(even) .contact-card li, body.winter .content-section:nth-child(even) .contact-card li, body.fall .content-section:nth-child(even) .duty-item p, body.winter .content-section:nth-child(even) .duty-item p, body.fall .content-section:nth-child(even) .duty-item li, body.winter .content-section:nth-child(even) .duty-item li, body.fall .content-section:nth-child(even) .meeting-card p, body.winter .content-section:nth-child(even) .meeting-card p, body.fall .content-section:nth-child(even) .meeting-card li, body.winter .content-section:nth-child(even) .meeting-card li, body.fall .content-section:nth-child(even) .service-item p, body.winter .content-section:nth-child(even) .service-item p, body.fall .content-section:nth-child(even) .service-item li, body.winter .content-section:nth-child(even) .service-item li, body.fall .content-section:nth-child(even) .timeline-item p, body.winter .content-section:nth-child(even) .timeline-item p, body.fall .content-section:nth-child(even) .timeline-item li, body.winter .content-section:nth-child(even) .timeline-item li, body.fall .content-section:nth-child(even) .heritage-highlight p, body.winter .content-section:nth-child(even) .heritage-highlight p, body.fall .content-section:nth-child(even) .heritage-highlight li, body.winter .content-section:nth-child(even) .heritage-highlight li, body.fall .content-section:nth-child(even) .heritage-link-wrapper p, body.winter .content-section:nth-child(even) .heritage-link-wrapper p, body.fall .content-section:nth-child(even) .heritage-link-wrapper li, body.winter .content-section:nth-child(even) .heritage-link-wrapper li { color: var(--color-text-default); } body.fall .content-section:nth-child(even) a:not(.btn):not(.content-card a), body.winter .content-section:nth-child(even) a:not(.btn):not(.content-card a) { color: var(--color-white); } body.fall .content-section:nth-child(even) a:not(.btn):not(.content-card a):hover, body.winter .content-section:nth-child(even) a:not(.btn):not(.content-card a):hover { color: rgba(255, 255, 255, 0.8); text-decoration: underline; } /* Links in white/light background containers should use season link color */ body.fall .content-section:nth-child(even) .contact-info a:not(.btn), body.winter .content-section:nth-child(even) .contact-info a:not(.btn), body.fall .content-section:nth-child(even) .info-box a:not(.btn), body.winter .content-section:nth-child(even) .info-box a:not(.btn), body.fall .content-section:nth-child(even) .card a:not(.btn), body.winter .content-section:nth-child(even) .card a:not(.btn), body.fall .content-section:nth-child(even) .staff-member a:not(.btn), body.winter .content-section:nth-child(even) .staff-member a:not(.btn), body.fall .content-section:nth-child(even) .council-member a:not(.btn), body.winter .content-section:nth-child(even) .council-member a:not(.btn), body.fall .content-section:nth-child(even) .contact-item a:not(.btn), body.winter .content-section:nth-child(even) .contact-item a:not(.btn), body.fall .content-section:nth-child(even) .election-year-content a:not(.btn), body.winter .content-section:nth-child(even) .election-year-content a:not(.btn), body.fall .content-section:nth-child(even) .notice-info a:not(.btn), body.winter .content-section:nth-child(even) .notice-info a:not(.btn), body.fall .content-section:nth-child(even) .reservation-item a:not(.btn), body.winter .content-section:nth-child(even) .reservation-item a:not(.btn), body.fall .content-section:nth-child(even) .sponsor-card a:not(.btn), body.winter .content-section:nth-child(even) .sponsor-card a:not(.btn), body.fall .content-section:nth-child(even) .fee-card a:not(.btn), body.winter .content-section:nth-child(even) .fee-card a:not(.btn), body.fall .content-section:nth-child(even) .rental-fee-item a:not(.btn), body.winter .content-section:nth-child(even) .rental-fee-item a:not(.btn), body.fall .content-section:nth-child(even) .calendar-event-item a:not(.btn), body.winter .content-section:nth-child(even) .calendar-event-item a:not(.btn), body.fall .content-section:nth-child(even) .fee-summary-item a:not(.btn), body.winter .content-section:nth-child(even) .fee-summary-item a:not(.btn), body.fall .content-section:nth-child(even) .service-card a:not(.btn), body.winter .content-section:nth-child(even) .service-card a:not(.btn), body.fall .content-section:nth-child(even) .event-info-box a:not(.btn), body.winter .content-section:nth-child(even) .event-info-box a:not(.btn), body.fall .content-section:nth-child(even) .contact-card a:not(.btn), body.winter .content-section:nth-child(even) .contact-card a:not(.btn), body.fall .content-section:nth-child(even) .duty-item a:not(.btn), body.winter .content-section:nth-child(even) .duty-item a:not(.btn), body.fall .content-section:nth-child(even) .meeting-card a:not(.btn), body.winter .content-section:nth-child(even) .meeting-card a:not(.btn), body.fall .content-section:nth-child(even) .service-item a:not(.btn), body.winter .content-section:nth-child(even) .service-item a:not(.btn), body.fall .content-section:nth-child(even) .timeline-item a:not(.btn), body.winter .content-section:nth-child(even) .timeline-item a:not(.btn), body.fall .content-section:nth-child(even) .heritage-highlight a:not(.btn), body.winter .content-section:nth-child(even) .heritage-highlight a:not(.btn), body.fall .content-section:nth-child(even) .heritage-link-wrapper a:not(.btn), body.winter .content-section:nth-child(even) .heritage-link-wrapper a:not(.btn) { color: var(--season-link) !important; } body.fall .content-section:nth-child(even) .contact-info a:not(.btn):hover, body.winter .content-section:nth-child(even) .contact-info a:not(.btn):hover, body.fall .content-section:nth-child(even) .info-box a:not(.btn):hover, body.winter .content-section:nth-child(even) .info-box a:not(.btn):hover, body.fall .content-section:nth-child(even) .card a:not(.btn):hover, body.winter .content-section:nth-child(even) .card a:not(.btn):hover, body.fall .content-section:nth-child(even) .staff-member a:not(.btn):hover, body.winter .content-section:nth-child(even) .staff-member a:not(.btn):hover, body.fall .content-section:nth-child(even) .council-member a:not(.btn):hover, body.winter .content-section:nth-child(even) .council-member a:not(.btn):hover, body.fall .content-section:nth-child(even) .contact-item a:not(.btn):hover, body.winter .content-section:nth-child(even) .contact-item a:not(.btn):hover, body.fall .content-section:nth-child(even) .election-year-content a:not(.btn):hover, body.winter .content-section:nth-child(even) .election-year-content a:not(.btn):hover, body.fall .content-section:nth-child(even) .notice-info a:not(.btn):hover, body.winter .content-section:nth-child(even) .notice-info a:not(.btn):hover, body.fall .content-section:nth-child(even) .reservation-item a:not(.btn):hover, body.winter .content-section:nth-child(even) .reservation-item a:not(.btn):hover, body.fall .content-section:nth-child(even) .sponsor-card a:not(.btn):hover, body.winter .content-section:nth-child(even) .sponsor-card a:not(.btn):hover, body.fall .content-section:nth-child(even) .fee-card a:not(.btn):hover, body.winter .content-section:nth-child(even) .fee-card a:not(.btn):hover, body.fall .content-section:nth-child(even) .rental-fee-item a:not(.btn):hover, body.winter .content-section:nth-child(even) .rental-fee-item a:not(.btn):hover, body.fall .content-section:nth-child(even) .calendar-event-item a:not(.btn):hover, body.winter .content-section:nth-child(even) .calendar-event-item a:not(.btn):hover, body.fall .content-section:nth-child(even) .fee-summary-item a:not(.btn):hover, body.winter .content-section:nth-child(even) .fee-summary-item a:not(.btn):hover, body.fall .content-section:nth-child(even) .service-card a:not(.btn):hover, body.winter .content-section:nth-child(even) .service-card a:not(.btn):hover, body.fall .content-section:nth-child(even) .event-info-box a:not(.btn):hover, body.winter .content-section:nth-child(even) .event-info-box a:not(.btn):hover, body.fall .content-section:nth-child(even) .contact-card a:not(.btn):hover, body.winter .content-section:nth-child(even) .contact-card a:not(.btn):hover, body.fall .content-section:nth-child(even) .duty-item a:not(.btn):hover, body.winter .content-section:nth-child(even) .duty-item a:not(.btn):hover, body.fall .content-section:nth-child(even) .meeting-card a:not(.btn):hover, body.winter .content-section:nth-child(even) .meeting-card a:not(.btn):hover, body.fall .content-section:nth-child(even) .service-item a:not(.btn):hover, body.winter .content-section:nth-child(even) .service-item a:not(.btn):hover, body.fall .content-section:nth-child(even) .timeline-item a:not(.btn):hover, body.winter .content-section:nth-child(even) .timeline-item a:not(.btn):hover, body.fall .content-section:nth-child(even) .heritage-highlight a:not(.btn):hover, body.winter .content-section:nth-child(even) .heritage-highlight a:not(.btn):hover, body.fall .content-section:nth-child(even) .heritage-link-wrapper a:not(.btn):hover, body.winter .content-section:nth-child(even) .heritage-link-wrapper a:not(.btn):hover { color: var(--season-link-hover) !important; } body.fall .content-section:nth-child(even) .staff-member .staff-title, body.winter .content-section:nth-child(even) .staff-member .staff-title { color: var(--color-text-muted); } body.fall .content-section h2, body.winter .content-section h2 { color: var(--season-text-primary); } .container { max-width: 1300px; margin: 0 auto; padding: 0 20px; } /* Hero Section */ .hero { background-image: var(--wales-hero-fallback); background-size: cover; background-position: center; color: var(--color-white); padding: 3rem 0; text-align: center; min-height: 40vh; display: flex; align-items: center; position: relative; } .hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 75%); pointer-events: none; z-index: 0; } .hero > * { position: relative; z-index: 1; } .hero-content { margin-top: 14rem; } /* Hero fills viewport height on homepage */ body.homepage .hero { min-height: 100vh; min-height: 100dvh; /* Dynamic viewport height for mobile */ margin-top: 0; padding-top: 0; position: relative; z-index: 1; /* Behind header */ } .hero-content h1 { font-size: 5rem; font-weight: 400; font-family: 'Bevan', serif; color: var(--color-white) !important; margin-bottom: 1.5rem; text-shadow: 2px 2px 8px var(--color-overlay-dark); letter-spacing: 0.02em; } .hero-subtitle { font-size: 2rem; font-weight: 700; font-family: 'Playfair Display', serif; color: var(--color-white); margin-bottom: 1rem; text-shadow: 2px 2px 8px var(--color-overlay-dark); } .hero-description { font-size: 1rem; max-width: 500px; margin: 0 auto; opacity: 0.9; } /* Contact Information */ .contact-info { margin: 0.75rem 0; text-align: center; } .contact-info p { margin: 0.25rem 0; font-size: 0.9rem; color: var(--color-text-default); text-align: center; } /* Standalone contact sections (for pages without cards) */ .content-section > .contact-info { background: var(--color-bg-white); padding: 2rem; border-radius: 6px; margin: 1.5rem 0; text-align: center; } /* Button spacing for PDF download buttons */ .pdf-button-wrapper { margin-bottom: 1rem; } .contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); margin-top: 1.5rem; justify-content: center; justify-items: center; } .contact-item { background: var(--color-bg-light); padding: 1.5rem; border-radius: 6px; text-align: center; width: 100%; max-width: 100%; } .contact-item h3 { margin-bottom: 0.75rem; font-size: 1.1rem; text-align: center; } .contact-item p { line-height: 1.6; font-size: 0.9rem; text-align: center; } .contact-item a { text-align: center; display: inline-block; } .contact-item .btn { display: inline-block; margin: 0 auto; } /* Main Content */ .main-content { padding: 2rem 0; } .content-section { margin-bottom: 2rem; background: var(--color-bg-white); padding: 2rem; border-radius: 6px; border: 1px solid var(--color-border-medium); } .content-section h2 { font-size: 1.75rem; margin-bottom: 1.5rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--season-primary); color: var(--season-primary); font-weight: 600; } .content-section h3 { font-size: 1.25rem; margin-top: 1.5rem; margin-bottom: 1rem; color: var(--season-primary); font-weight: 600; } .content-section h3:first-child { margin-top: 0; } .content-section p { line-height: 1.8; margin-bottom: 1rem; color: var(--color-text-default); } .content-section p:last-child { margin-bottom: 0; } .content-section ul, .content-section ol { margin: 1rem 0; padding-left: 2rem; line-height: 1.8; } .content-section li { margin-bottom: 0.5rem; color: var(--color-text-default); } .content-section li:last-child { margin-bottom: 0; } .content-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; margin-top: 2rem; } .content-card { background: var(--color-bg-white); padding: 2.5rem; border-radius: 12px; box-shadow: 0 2px 8px var(--color-shadow-light), 0 1px 3px var(--color-shadow-light); transition: all 0.3s ease; position: relative; overflow: hidden; border: 1px solid var(--color-border-light); } .content-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--season-complementary) 0%, var(--season-complementary-light) 100%); transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease; } .content-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px var(--color-shadow-medium), 0 4px 8px var(--color-shadow-light); border-color: var(--season-card-accent-hover); } .content-card:hover::before { transform: scaleX(1); } .content-card h3 { color: var(--season-primary); margin-bottom: 1rem; font-size: 1.25rem; font-weight: 600; transition: color 0.3s ease; } .content-card:hover h3 { color: var(--season-complementary); } /* Content cards always have dark text, even in complementary color sections */ .content-card p { color: var(--color-text-default) !important; } .content-card h3 { color: var(--season-primary) !important; } .content-card a:not(.btn) { color: var(--color-link-default) !important; } .content-card a:not(.btn):hover { color: var(--color-link-hover) !important; } /* Override white text for content cards in complementary sections */ body.spring .content-section:nth-child(even) .content-card p, body.spring .content-section:nth-child(even) .content-card li, body.summer .content-section:nth-child(even) .content-card p, body.summer .content-section:nth-child(even) .content-card li, body.fall .content-section:nth-child(even) .content-card p, body.fall .content-section:nth-child(even) .content-card li, body.winter .content-section:nth-child(even) .content-card p, body.winter .content-section:nth-child(even) .content-card li { color: var(--color-text-default) !important; } /* Ensure h3 in content cards keeps its color (not white) */ body.spring .content-section:nth-child(even) .content-card h3, body.summer .content-section:nth-child(even) .content-card h3, body.fall .content-section:nth-child(even) .content-card h3, body.winter .content-section:nth-child(even) .content-card h3 { color: var(--season-primary) !important; } body.spring .content-section:nth-child(even) .content-card a:not(.btn), body.summer .content-section:nth-child(even) .content-card a:not(.btn), body.fall .content-section:nth-child(even) .content-card a:not(.btn), body.winter .content-section:nth-child(even) .content-card a:not(.btn) { color: var(--color-link-default) !important; } body.spring .content-section:nth-child(even) .content-card a:not(.btn):hover, body.summer .content-section:nth-child(even) .content-card a:not(.btn):hover, body.fall .content-section:nth-child(even) .content-card a:not(.btn):hover, body.winter .content-section:nth-child(even) .content-card a:not(.btn):hover { color: var(--color-link-hover) !important; } .duties-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; margin-top: 2rem; } .duty-item { background: var(--color-bg-light); padding: 2rem; border-radius: 8px; border-left: none; } .duty-item h3 { color: var(--season-primary); margin-bottom: 1rem; font-size: 1.25rem; } .duty-item ul { list-style: none; padding-left: 0; } .duty-item li { padding: 0.5rem 0; border-bottom: 1px solid var(--color-border-medium); position: relative; padding-left: 1.5rem; } .duty-item li:before { content: "✓"; position: absolute; left: 0; color: var(--season-complementary); font-weight: bold; } .meeting-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; margin: 2rem 0; } .meeting-card { background: var(--color-bg-light); padding: 2rem; border-radius: 8px; border: 2px solid var(--season-complementary); } .meeting-card h3 { color: var(--season-primary); margin-bottom: 1rem; font-size: 1.25rem; } .notice-info { background: var(--color-bg-light); padding: 1.5rem; border-radius: 8px; border-left: none; margin-top: 2rem; } .notice-info--highlight { background: var(--color-bg-light); border: 2px solid var(--season-complementary); border-left: none; } .planning-content, .cemetery-content, .parks-content, .welsh-days-content { margin-top: 2rem; } .planning-details, .park-features, .event-details { background: var(--color-bg-light); padding: 2rem; border-radius: 8px; margin-top: 1.5rem; border-left: none; } .election-info { margin-top: 2rem; } /* Election Year Collapsible Sections */ .election-year-details { margin: 1.5rem 0; border: 1px solid var(--color-border-light); border-radius: 8px; overflow: hidden; } .election-year-summary { padding: 1rem 1.5rem; background: var(--color-bg-light); cursor: pointer; list-style: none; transition: background-color 0.2s; position: relative; padding-right: 3rem; } .election-year-summary:hover { background: var(--color-border-light); } .election-year-summary::-webkit-details-marker { display: none; } .election-year-summary::marker { display: none; } .election-year-summary::after { content: '▶'; position: absolute; right: 1.5rem; top: 50%; transform: translateY(-50%); color: var(--season-primary); transition: transform 0.2s; font-size: 0.8rem; } .election-year-details[open] .election-year-summary::after { transform: translateY(-50%) rotate(90deg); } .election-year-summary h3 { margin: 0; color: var(--season-primary); font-size: 1.5rem; } .election-year-content { padding: 1.5rem; background: var(--color-bg-white); } .election-info-section { margin-bottom: 2rem; } .election-info-section:last-child { margin-bottom: 0; } .election-info-section h4 { color: var(--season-primary); margin-top: 0; margin-bottom: 1rem; font-size: 1.25rem; border-bottom: 2px solid var(--season-primary); padding-bottom: 0.5rem; } .election-info-section h5 { color: var(--season-primary); margin-top: 1.5rem; margin-bottom: 0.5rem; font-size: 1.1rem; font-weight: 600; } .election-info-section h5:first-child { margin-top: 0; } /* .election-year-content inherits p, ul, ol, li styles from .content-section */ .election-notice { background: var(--color-bg-light); padding: 1.5rem; border-radius: 8px; border-left: none; margin: 1rem 0; } .election-notice h3 { color: var(--season-primary); margin-bottom: 1rem; font-size: 1.5rem; font-weight: 600; } .election-notice h4 { color: var(--season-primary); margin: 1.5rem 0 0.5rem 0; font-size: 1.1rem; font-weight: 600; } .election-notice h5 { color: var(--season-primary); margin: 1.5rem 0 0.5rem 0; font-size: 1.1rem; font-weight: 600; } .election-notice h5:first-child { margin-top: 0; } .election-notice ul { margin: 1rem 0; padding-left: 2rem; line-height: 1.8; } .election-notice li { margin-bottom: 0.5rem; color: var(--color-text-default); } .election-notice li:last-child { margin-bottom: 0; } .election-notice p { line-height: 1.8; margin-bottom: 1rem; color: var(--color-text-default); } .business-info, .animal-control-info { background: var(--color-bg-light); padding: 2rem; border-radius: 8px; border-left: none; margin-top: 2rem; } .animal-control-info h3 { color: var(--season-primary); margin-bottom: 1rem; } /* Historical Section - Full-width bright colored background */ .historical { margin-left: calc((100vw - 100%) / -2); margin-right: calc((100vw - 100%) / -2); padding: 3rem 0; border-radius: 0; border: none; box-shadow: none; } /* Content wrapper inside full-width sections */ .historical > * { max-width: 1300px; margin-left: auto; margin-right: auto; padding-left: 2rem; padding-right: 2rem; } /* Spring - Historical Section */ body.spring .historical { background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 50%, #6ee7b7 100%); color: var(--season-complementary-dark); } body.spring .historical h2 { color: var(--season-complementary-dark); border-bottom-color: var(--season-complementary-dark); } body.spring .historical p, body.spring .historical-content { color: var(--season-complementary-darker); } /* Summer - Historical Section */ body.summer .historical { background: linear-gradient(135deg, #cffafe 0%, #a5f3fc 50%, #67e8f9 100%); color: var(--season-complementary-dark); } body.summer .historical h2 { color: var(--season-complementary-dark); border-bottom-color: var(--season-complementary-dark); } body.summer .historical p, body.summer .historical-content { color: var(--season-complementary-darker); } /* Fall - Historical Section */ body.fall .historical { background: linear-gradient(135deg, #fed7aa 0%, #fdba74 50%, #fb923c 100%); color: var(--season-primary-dark); } body.fall .historical h2 { color: var(--season-primary-dark); border-bottom-color: var(--season-primary-dark); } body.fall .historical p { color: var(--season-primary-darker); } /* Historical content has white background, so use dark text */ body.fall .historical-content { color: var(--color-text-default); } body.fall .historical-content p { color: var(--color-text-default); } /* Winter - Historical Section */ body.winter .historical { background: linear-gradient(135deg, var(--color-bg-light) 0%, var(--color-border-light) 50%, var(--color-border-medium) 100%); color: var(--season-primary); } body.winter .historical h2 { color: var(--season-primary); border-bottom-color: var(--season-primary); } body.winter .historical p, body.winter .historical-content { color: var(--season-primary-dark); } .historical-content { background: var(--season-bg-primary); padding: 2rem; border-radius: 8px; margin-top: 2rem; backdrop-filter: blur(10px); box-shadow: 0 4px 12px var(--color-shadow-light); } .historical-content h3 { color: var(--season-primary); margin-bottom: 1rem; } .historical-content h4 { color: var(--color-text-dark); margin: 1.5rem 0 1rem 0; font-size: 1.25rem; } /* Historical Preview with Fade-out */ .historical-content-wrapper { position: relative; margin-top: 2rem; } .historical-content--preview { max-height: 200px; overflow: hidden; position: relative; margin-top: 0; } .historical-fade-overlay { position: absolute; bottom: 0; left: 0; right: 0; height: 100px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, var(--color-overlay-light) 40%, rgba(255, 255, 255, 0.9) 70%, rgba(255, 255, 255, 1) 100%); pointer-events: none; z-index: 1; border-radius: 0 0 8px 8px; } .historical-continue { text-align: center; margin-top: 1.5rem; position: relative; z-index: 2; } /* Fraud Notice - Full-width bright colored background */ .fraud-notice { margin-left: calc((100vw - 100%) / -2); margin-right: calc((100vw - 100%) / -2); padding: 3rem 0; border-radius: 0; border: none; box-shadow: none; } .fraud-notice h2, .content-section.fraud-notice h2, body.fall .content-section.fraud-notice h2, body.winter .content-section.fraud-notice h2, body.spring .content-section.fraud-notice h2, body.summer .content-section.fraud-notice h2 { color: #7a1f1f !important; border-bottom-color: #7a1f1f !important; } .fraud-notice p, .fraud-notice .fraud-info, .fraud-notice a { color: var(--color-text-dark) !important; } /* Content wrapper inside full-width sections */ .fraud-notice > * { max-width: 1300px; margin-left: auto; margin-right: auto; padding-left: 2rem; padding-right: 2rem; } /* Spring - Fraud Notice */ body.spring .fraud-notice { background: linear-gradient(135deg, var(--fraud-bg-start) 0%, var(--fraud-bg-mid) 50%, var(--fraud-bg-end) 100%) !important; color: var(--color-text-default); } body.spring .fraud-notice h2 { color: var(--color-text-default); border-bottom-color: var(--color-text-default); } body.spring .fraud-notice p, body.spring .fraud-info { color: var(--color-text-default); } /* Summer - Fraud Notice */ body.summer .fraud-notice { background: linear-gradient(135deg, var(--fraud-bg-start) 0%, var(--fraud-bg-mid) 50%, var(--fraud-bg-end) 100%) !important; color: var(--color-text-default); } body.summer .fraud-notice h2 { color: var(--color-text-default); border-bottom-color: var(--color-text-default); } body.summer .fraud-notice p, body.summer .fraud-info { color: var(--color-text-default); } /* Fall - Fraud Notice */ body.fall .fraud-notice { background: linear-gradient(135deg, var(--fraud-bg-start) 0%, var(--fraud-bg-mid) 50%, var(--fraud-bg-end) 100%) !important; color: var(--color-text-default); } body.fall .fraud-notice h2 { color: var(--color-text-default); border-bottom-color: var(--color-text-default); } body.fall .fraud-notice p, body.fall .fraud-info { color: var(--color-text-default); } /* Winter - Fraud Notice */ body.winter .fraud-notice { background: linear-gradient(135deg, var(--fraud-bg-start) 0%, var(--fraud-bg-mid) 50%, var(--fraud-bg-end) 100%) !important; color: var(--color-text-default); } body.winter .fraud-notice h2 { color: var(--color-text-default); border-bottom-color: var(--color-text-default); } body.winter .fraud-notice p, body.winter .fraud-info { color: var(--color-text-default); } .fraud-info { background: var(--color-overlay-light); padding: 2rem; border-radius: 8px; margin-top: 2rem; backdrop-filter: blur(10px); box-shadow: 0 4px 12px var(--color-shadow-light); } .fraud-link { color: var(--color-text-dark); text-decoration: none; font-weight: 600; font-size: 1.1rem; } .fraud-link:hover { text-decoration: underline; } /* Footer */ .footer { color: var(--color-white); padding: 2rem 0 1rem; margin-top: 2rem; } .footer-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; margin-bottom: 1.5rem; } .footer-section h3 { margin-bottom: 0.75rem; font-size: 1.1rem; } .footer-section p { margin-bottom: 0.25rem; opacity: 0.9; font-size: 0.9rem; } .halfstaff-status { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin-top: 0.5rem; } .halfstaff-status__label { font-weight: 600; font-size: 0.85rem; opacity: 0.9; } .halfstaff-status__value { display: inline-flex; align-items: center; justify-content: center; padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.2px; background: rgba(255, 255, 255, 0.15); color: var(--color-white); } .halfstaff-status--half { background: rgba(255, 204, 0, 0.2); color: #fff3bf; } .halfstaff-status--full { background: rgba(79, 209, 197, 0.2); color: #c6fff2; } .halfstaff-status--unknown { background: rgba(255, 255, 255, 0.15); color: var(--color-white); } .halfstaff-footer-link { margin-top: 0.5rem; } .footer-bottom { border-top: 1px solid var(--color-overlay-light); padding-top: 1rem; text-align: center; opacity: 0.8; font-size: 0.9rem; } /* Half-staff widgets */ .halfstaff-section { text-align: left; } .halfstaff-grid { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 1rem; align-items: flex-start; justify-content: center; } .halfstaff-card { background: transparent; border-radius: 0; box-shadow: none; padding: 0; } .halfstaff-card h2, .halfstaff-card h3 { margin-top: 0; margin-bottom: 1rem; } .halfstaff-widget { display: block; } .halfstaff-widget img, .halfstaff-widget iframe { max-width: none; height: auto; border-radius: 0; box-shadow: none; } .halfstaff-link { margin-top: 1.5rem; } @media (max-width: 900px) { .halfstaff-grid { justify-content: center; } } .halfstaff-footer-widgets { display: flex; flex-wrap: nowrap; gap: 0.75rem; margin: 1rem 0 0.5rem; align-items: flex-start; } .halfstaff-footer-label { font-size: 0.85rem; font-weight: 600; color: var(--color-white); opacity: 0.9; margin-bottom: 0.4rem; } .footer-halfstaff .halfstaff-widget { display: flex; flex-direction: column; } .footer-halfstaff .halfstaff-widget { display: flex; align-items: flex-start; justify-content: flex-start; display: inline-flex; zoom: 0.75; } /* Footer Bar - Visible initially, hides on scroll down */ .footer-bar { position: fixed; bottom: 0; left: 0; width: 100%; min-height: 70px; background-color: var(--season-complementary); z-index: 10; display: flex; align-items: center; justify-content: center; padding: 0 2rem; transform: translateY(0); transition: transform 0.3s ease, background 0.3s ease; box-shadow: 0 -2px 10px var(--color-shadow-light); } .footer-bar.scrolled-down { transform: translateY(100%); } .footer-bar-content { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 1200px; gap: 2rem; flex-wrap: wrap; } /* Weather Section */ .footer-bar-weather { display: flex; flex-direction: column; gap: 0.25rem; color: var(--color-white); flex: 0 0 auto; } .footer-bar-weather-main { display: flex; align-items: center; gap: 0.5rem; } .footer-bar-weather-icon { font-size: 1.75rem; line-height: 1; } .footer-bar-weather-temps { display: flex; flex-direction: column; gap: 0.1rem; } .footer-bar-weather-temp { font-family: 'Inter', sans-serif; font-size: 1.25rem; font-weight: 700; line-height: 1.2; } .footer-bar-weather-feels { font-size: 0.75rem; font-weight: 400; opacity: 0.85; line-height: 1; } .footer-bar-weather-details { display: flex; flex-direction: column; gap: 0.1rem; font-size: 0.75rem; font-weight: 400; opacity: 0.9; margin-left: 2.25rem; } .footer-bar-weather-condition { line-height: 1.2; } .footer-bar-weather-humidity { line-height: 1.2; } /* Time Section */ .footer-bar-time { display: flex; flex-direction: column; align-items: center; gap: 0.1rem; flex: 0 0 auto; } .footer-bar-time-clock { font-family: 'Inter', sans-serif; font-size: 1.15rem; font-weight: 700; line-height: 1.2; } .footer-bar-time-zone { font-size: 0.7rem; font-weight: 400; opacity: 0.75; line-height: 1; text-transform: uppercase; letter-spacing: 0.04em; } /* Location Section */ .footer-bar-location { display: flex; flex-direction: column; gap: 0.25rem; color: var(--color-white); text-align: center; flex: 1 1 auto; min-width: 200px; } .footer-bar-location-name { font-size: 1.1rem; font-weight: 700; line-height: 1.2; } .footer-bar-location-address { font-size: 0.85rem; font-weight: 400; opacity: 0.9; line-height: 1.3; } /* Contact Section */ .footer-bar-contact { display: flex; flex-direction: column; gap: 0.25rem; color: var(--color-white); text-align: right; flex: 0 0 auto; } .footer-bar-contact-phone { font-size: 1rem; font-weight: 600; line-height: 1.2; } .footer-bar-contact-email { font-size: 0.85rem; font-weight: 400; opacity: 0.9; line-height: 1.3; } .footer-bar-halfstaff { display: flex; align-items: center; gap: 0.4rem; color: var(--color-white); font-size: 0.85rem; flex: 0 0 auto; } .footer-bar-halfstaff-label { font-weight: 600; opacity: 0.9; } .footer-bar-halfstaff .halfstaff-status__value { padding: 0.15rem 0.5rem; font-size: 0.75rem; } .footer-bar-halfstaff-link { color: var(--color-white); text-decoration: underline; font-size: 0.8rem; margin-left: 0.25rem; } /* Account for fixed header - spacing should be on page titles, not main-content */ /* Homepage has no spacing */ body.homepage .main-content { padding-top: 0; } /* Hero on homepage can extend behind transparent header */ body.homepage .hero { margin-top: 0; padding-top: 0; } /* Mobile Menu Overlay */ .mobile-menu-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100dvh; /* Dynamic viewport height for mobile */ z-index: 9999; display: none; overflow: hidden; } .mobile-menu-overlay.active { display: block; } .mobile-menu-backdrop { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--color-overlay-medium); opacity: 0; transition: opacity 0.3s ease; } .mobile-menu-overlay.active .mobile-menu-backdrop { opacity: 1; } .mobile-menu-panel { position: absolute; top: 0; right: 0; width: 85%; max-width: 400px; height: 100%; background: linear-gradient(180deg, rgba(17, 24, 39, 0.98) 0%, rgba(17, 24, 39, 0.9) 100%); transform: translateX(100%); transition: transform 0.3s ease; overflow-y: auto; display: flex; flex-direction: column; padding: 2.5rem 2rem 2rem; box-shadow: -12px 0 24px rgba(0, 0, 0, 0.3); } /* Backdrop blur for mobile menu */ @supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) { .mobile-menu-panel { background-color: var(--color-overlay-medium); -webkit-backdrop-filter: blur(15px); backdrop-filter: blur(15px); } } .mobile-menu-overlay.active .mobile-menu-panel { transform: translateX(0); } .mobile-menu-close { position: absolute; top: 1.5rem; right: 1.5rem; color: var(--color-white); font-size: 2rem; cursor: pointer; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; transition: opacity 0.3s ease; z-index: 1; border-radius: 999px; background: rgba(255, 255, 255, 0.08); } .mobile-menu-close:hover { opacity: 1; background: rgba(255, 255, 255, 0.16); } .mobile-menu-close::before { content: "×"; font-size: 2.5rem; line-height: 1; } .mobile-menu-content { margin-top: 3rem; flex: 1; } .mobile-menu-content .nav-list { display: flex; flex-direction: column; gap: 0; list-style: none; margin: 0; padding: 0; } .mobile-menu-content .nav-list li { width: 100%; border-bottom: 1px solid rgba(255, 255, 255, 0.12); } .mobile-menu-content .nav-list a { display: block; padding: 1rem 0.75rem; color: var(--color-white); text-decoration: none; font-size: 1.35rem; font-weight: 600; letter-spacing: 0.01em; border-radius: 0.5rem; transition: background-color 0.2s ease, color 0.2s ease; } .mobile-menu-content .nav-list a:hover { background-color: rgba(255, 255, 255, 0.08); color: var(--color-white); } .mobile-menu-content .nav-item-has-dropdown > a::after { content: "›"; float: right; font-size: 1.25rem; opacity: 0.8; transform: rotate(0deg); transition: transform 0.2s ease; } .mobile-menu-content .nav-item-has-dropdown.active > a::after { transform: rotate(90deg); } .mobile-menu-content .nav-dropdown { display: none; margin: 0.35rem 0 0.75rem; padding-left: 1rem; border-left: none; } .mobile-menu-content .nav-item-has-dropdown.active .nav-dropdown { display: block; } .mobile-menu-content .nav-dropdown a { font-size: 1.05rem; padding: 0.65rem 0.5rem; font-weight: 500; opacity: 0.9; } /* Responsive Design */ @media (max-width: 1023px) { .header-content { flex-wrap: nowrap; } .logo { padding: 0.5rem 1rem; flex-shrink: 0; } .logo h1 { font-size: 1.25rem; } .logo p { font-size: 0.7rem; } .logo-image { max-height: 20vw; transform: scale(1) !important; /* Keep full size on mobile */ } .main-nav { flex: 1; padding: 0 1rem; position: relative; } .hero-content { margin-top: 7rem; } /* Hide desktop nav list on mobile */ .main-nav .nav-list { display: none; } .header-actions { margin-left: auto; gap: 1rem; } .mobile-menu-toggle { display: flex; align-items: center; gap: 0.5rem; } .mobile-menu-toggle-text { font-size: 0.875rem; font-weight: 400; } .footer-bar { min-height: auto; padding: 0.75rem 1rem; } .footer-bar-content { flex-direction: column; gap: 0.75rem; align-items: flex-start; } .footer-bar-weather { font-size: 0.9rem; width: 100%; } .footer-bar-weather-temp { font-size: 1.1rem; } .footer-bar-location { text-align: left; width: 100%; min-width: auto; } .footer-bar-location-name { font-size: 1rem; } .footer-bar-location-address { font-size: 0.8rem; } .footer-bar-contact { text-align: left; width: 100%; } .footer-bar-contact-phone { font-size: 0.9rem; } .footer-bar-contact-email { font-size: 0.8rem; } /* Prevent body scroll when menu is open */ body.menu-open { overflow: hidden; } .hero { min-height: 50vh; background-attachment: scroll; background-position: left center; } /* Homepage hero still fills viewport on mobile */ body.homepage .hero { min-height: 100vh; min-height: 100dvh; } .hero-content h1 { font-size: 3.5rem; font-family: 'Bevan', serif; font-weight: 400; color: var(--color-white) !important; letter-spacing: 0.02em; } .hero-subtitle { font-size: 1.5rem; font-family: 'Playfair Display', serif; font-weight: 700; color: var(--color-white); } .content-section { padding: 1.5rem; } .content-section h2 { font-size: 1.75rem; } .contact-grid { grid-template-columns: 1fr; } .content-grid, .duties-grid, .meeting-info { grid-template-columns: 1fr; } .content-with-sidebar { max-width: 100vw !important; display: block !important; grid-template-columns: 1fr !important; gap: 0 !important; margin-top: 0 !important; } .sidebar-nav { display: none; } .content-main { width: 100%; padding: 0; margin: 0; min-width: auto; } .nav-item-has-dropdown:hover .nav-dropdown { display: none; } .nav-dropdown { position: static; display: block; box-shadow: none; border: 1px solid var(--color-border-medium); margin-top: 0; border-radius: 0; } .services-grid { grid-template-columns: 1fr; } } @media (max-width: 480px) { .container { padding: 0 15px; } .hero { padding: 2rem 0; background-position: left center; } /* Homepage hero still fills viewport on small mobile */ body.homepage .hero { min-height: 100vh; min-height: 100dvh; } .hero-content h1 { font-size: 2.5rem; font-family: 'Bevan', serif; font-weight: 400; color: var(--color-white) !important; letter-spacing: 0.02em; } .hero-subtitle { font-size: 1.25rem; font-family: 'Playfair Display', serif; font-weight: 700; color: var(--color-white); } .content-section { padding: 1rem; } .contact-item, .content-card, .duty-item, .meeting-card { padding: 1.5rem; } } /* Smooth Scrolling */ html { scroll-behavior: smooth; } /* Focus States for Accessibility */ a:focus, button:focus { outline: 2px solid var(--season-complementary); outline-offset: 2px; } /* Council and Staff Grid Styles */ .council-grid, .staff-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; margin-top: 1.5rem; } .council-member, .staff-member { background: var(--color-bg-light); padding: 1.5rem; border-radius: 6px; text-align: center; color: var(--color-text-default); } .council-member h3, .staff-member h3 { margin-bottom: 1rem; font-size: 1.1rem; } .staff-member h3 { margin-bottom: 0.5rem; } .staff-member .staff-title { display: block; font-size: 0.9rem; color: var(--color-text-muted); margin-bottom: 1rem; margin-top: 0; } .council-member img, .staff-member img { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; margin-bottom: 1rem; border: 2px solid var(--color-border-medium); } .assignments h4 { margin: 0.75rem 0 0.5rem 0; font-size: 1rem; } .assignments ul { margin: 0.5rem 0; padding-left: 0; list-style: none; font-size: 0.9rem; } .assignments li { margin: 0.25rem 0; } /* Parks and Recreation Styles */ .fee-section { margin: 2rem 0; } .fee-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; margin: 1.5rem 0; } .fee-card { background: var(--color-bg-light); padding: 1.5rem; border-radius: 8px; border: 2px solid var(--season-complementary); text-align: center; } .fee-card h4 { color: var(--season-primary); margin-bottom: 0.75rem; font-size: 1.1rem; } .fee-amount { font-size: 1.75rem; font-weight: 700; color: var(--season-primary); margin: 0.5rem 0; } .fee-description { color: var(--color-text-muted); font-size: 0.9rem; margin-top: 0.5rem; } .rental-fees-section { margin: 2rem 0; } .rental-category { background: var(--color-bg-light); padding: 2rem; border-radius: 8px; border-left: none; margin: 1.5rem 0; } .rental-category-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; flex-wrap: wrap; gap: 1rem; } .rental-category-header h4 { color: var(--season-primary); font-size: 1.25rem; margin: 0; } .rental-badge { display: inline-block; padding: 0.5rem 1rem; border-radius: 20px; font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .rental-badge--free { background: var(--color-bg-light); color: var(--season-complementary-dark); } .rental-badge--resident { background: var(--color-bg-light); color: var(--season-primary-dark); } .rental-badge--nonresident { background: var(--color-bg-light); color: var(--color-text-dark); } .rental-fees-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; margin: 1.5rem 0; } .rental-fee-item { background: var(--color-bg-white); padding: 1.5rem; border-radius: 6px; border: 1px solid var(--color-border-medium); } .rental-fee-item h5 { color: var(--season-primary); margin-bottom: 1rem; font-size: 1.1rem; } .fee-details p { margin: 0.75rem 0; color: var(--color-gray-700); } .fee-details .fee-amount { font-size: 1.25rem; font-weight: 700; color: var(--season-primary); } .fee-note { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--color-border-medium); color: var(--color-text-muted); font-size: 0.9rem; } .reservations-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; margin: 2rem 0; } .reservation-item { background: var(--color-bg-light); padding: 1.5rem; border-radius: 8px; border-left: none; } .reservation-item h3 { color: var(--season-primary); margin-bottom: 1rem; font-size: 1.1rem; } .reservation-item ul { margin: 0; padding-left: 1.5rem; } .reservation-item li { margin: 0.75rem 0; color: var(--color-gray-700); line-height: 1.6; } /* Calendar Embed Wrapper */ .calendar-embed-wrapper { margin: 2rem 0; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 12px var(--color-shadow-light); border: 1px solid var(--color-border-medium); background: var(--color-bg-white); } .calendar-embed-wrapper iframe { display: block; width: 100%; min-height: 600px; } /* Calendar Events Display */ .calendar-events { margin: 2rem 0; } .events-subtitle { color: var(--color-text-muted); font-size: 0.9rem; margin-bottom: 1rem; } .events-list { display: grid; gap: 1rem; margin-top: 1.5rem; } .calendar-event-item { display: flex; gap: 1.5rem; background: var(--color-bg-white); border: 1px solid var(--color-border-medium); border-radius: 8px; padding: 1.5rem; transition: all 0.3s ease; } .calendar-event-item:hover { box-shadow: 0 4px 12px var(--color-shadow-light); border-color: var(--season-complementary); } .event-date { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 60px; background: var(--color-bg-light); border-radius: 6px; padding: 0.75rem; text-align: center; } .event-month { display: block; font-size: 0.75rem; font-weight: 600; color: var(--season-complementary); text-transform: uppercase; letter-spacing: 0.5px; } .event-day { display: block; font-size: 1.5rem; font-weight: 700; color: var(--season-primary); line-height: 1; margin-top: 0.25rem; } .event-details { flex: 1; } .event-details h4 { color: var(--season-primary); margin: 0 0 0.5rem 0; font-size: 1.1rem; } .event-time { color: var(--color-text-muted); font-size: 0.9rem; margin: 0.25rem 0; } .event-location { color: var(--color-gray-700); font-size: 0.9rem; margin: 0.5rem 0 0 0; } .event-description { color: var(--color-text-muted); font-size: 0.875rem; margin: 0.75rem 0 0 0; line-height: 1.5; } .regular-reservations { margin-top: 3rem; } .regular-reservations h3 { color: var(--season-primary); margin-bottom: 1.5rem; } /* Fee Summary */ .fee-summary { margin-top: 1.5rem; } .fee-summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; margin-top: 1.5rem; } .fee-summary-item { background: var(--color-bg-white); padding: 1.5rem; border-radius: 8px; border: 1px solid var(--color-border-medium); text-align: center; } .fee-summary-item h4 { color: var(--season-primary); margin-bottom: 0.75rem; font-size: 1.1rem; } /* Page Title CTA */ .page-title__cta { margin-top: 2rem; text-align: center; } .cta-note { margin-top: 0.75rem; color: var(--color-text-muted); font-size: 0.9rem; } /* Modal Styles */ .modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1rem; } .modal-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--color-overlay-medium); backdrop-filter: blur(2px); } .modal-content { position: relative; background: var(--color-bg-white); border-radius: 12px; max-width: 700px; width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 60px var(--color-shadow-dark); z-index: 1001; animation: modalSlideIn 0.3s ease-out; } @keyframes modalSlideIn { from { opacity: 0; transform: translateY(-20px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 1.5rem 2rem; border-bottom: 1px solid var(--color-border-medium); position: sticky; top: 0; background: var(--color-bg-white); z-index: 10; border-radius: 12px 12px 0 0; } .modal-header h2 { margin: 0; color: var(--season-primary); font-size: 1.5rem; } .modal-close { background: none; border: none; font-size: 2rem; color: var(--color-text-muted); cursor: pointer; padding: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 4px; transition: all 0.2s ease; line-height: 1; } .modal-close:hover { background: var(--color-bg-light); color: var(--season-primary); } .modal-body { padding: 2rem; } /* Removed duplicate .btn--secondary definition - using the #6c757d version from line 1122 */ /* Prominent Fees Section */ .fees-section-prominent { background: linear-gradient(135deg, var(--color-bg-light) 0%, var(--color-border-light) 100%); border: 2px solid var(--season-complementary); border-radius: 12px; padding: 0; margin-bottom: 3rem; box-shadow: 0 4px 12px var(--season-card-accent-hover); } .fees-header { padding: 2rem 2rem 1rem 2rem; background: transparent; } .fees-header h2 { color: var(--season-primary); font-size: 2rem; margin: 0 0 0.75rem 0; font-weight: 700; } .fees-intro { color: var(--color-text-muted); font-size: 1.05rem; margin: 0 0 1.5rem 0; line-height: 1.6; } .fees-details[open] ~ .fees-header .btn--fees-toggle .btn-icon, .fees-details[open] + .fees-header .btn--fees-toggle .btn-icon { transform: rotate(180deg); } /* Collapsible Fees Section */ .fees-details { border: none; border-radius: 0; overflow: hidden; border-top: 1px solid var(--color-border-light); } .fees-details--prominent { background: var(--color-bg-white); margin-top: 1rem; } .fees-summary { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 2rem; background: var(--color-bg-light); cursor: pointer; list-style: none; user-select: none; transition: all 0.2s ease; border-top: 1px solid var(--color-border-medium); } .fees-summary--prominent { background: var(--color-bg-light); border-top: 1px solid var(--color-border-light); } .fees-summary:hover { background: var(--color-border-light); } .fees-summary::-webkit-details-marker { display: none; } .fees-title { color: var(--season-primary); font-size: 1.1rem; font-weight: 600; } .summary-icon { font-size: 1rem; color: var(--season-complementary); transition: transform 0.3s ease; font-weight: bold; } .fees-details[open] .summary-icon { transform: rotate(180deg); } .fees-content { padding: 2rem; background: var(--color-bg-white); } /* Fee Calculation Display */ .fee-calculation { background: var(--color-bg-light); border: 2px solid var(--season-complementary); border-radius: 8px; padding: 1.5rem; margin-bottom: 1.5rem; } .fee-calculation--form { margin: 2rem 0; background: linear-gradient(135deg, var(--color-bg-light) 0%, var(--color-border-light) 100%); border: 3px solid var(--season-complementary); box-shadow: 0 4px 12px var(--season-card-accent-hover); } .fee-calculation h3 { color: var(--season-primary); margin: 0 0 1.25rem 0; font-size: 1.5rem; font-weight: 700; } .fee-placeholder { background: var(--color-bg-white); padding: 2rem; border-radius: 6px; border: 1px dashed var(--color-border-light); text-align: center; } .fee-placeholder p { margin: 0; color: var(--color-text-muted); font-style: italic; font-size: 1rem; } .fee-breakdown { display: flex; flex-direction: column; gap: 1rem; background: var(--color-bg-white); padding: 1.5rem; border-radius: 6px; border: 1px solid var(--color-border-light); } .fee-line { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 0; border-bottom: 1px solid var(--color-border-light); font-size: 1.05rem; } .fee-line:last-child { border-bottom: none; } .fee-value { font-weight: 600; color: var(--season-primary); font-size: 1.1rem; } .fee-value--total { font-size: 1.5rem; color: var(--season-primary-dark); } .fee-refundable { font-size: 0.85rem; color: var(--season-complementary); font-weight: 600; font-style: italic; } .fee-total { margin-top: 0.75rem; padding-top: 1.25rem; border-top: 3px solid var(--season-complementary); font-size: 1.25rem; background: var(--color-bg-light); padding-left: 1rem; padding-right: 1rem; margin-left: -1rem; margin-right: -1rem; border-radius: 0 0 6px 6px; } .fee-note-small { margin: 1.25rem 0 0 0; font-size: 0.875rem; color: var(--color-text-muted); font-style: italic; text-align: center; } /* Responsive adjustments */ @media (max-width: 1023px) { .calendar-event-item { flex-direction: column; } .event-date { flex-direction: row; justify-content: center; gap: 0.5rem; min-width: auto; } .form-row { grid-template-columns: 1fr; } .modal-content { max-width: 100%; max-height: 100vh; border-radius: 0; } .modal-header, .modal-body { padding: 1.5rem; } .form-actions { flex-direction: column; } .form-actions .btn { width: 100%; } .btn--large { padding: 0.875rem 2rem; font-size: 1rem; } .calendar-embed-wrapper iframe { min-height: 500px; } } /* Services Grid */ .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; margin-top: 2rem; } .service-card { background: var(--color-bg-white); border: 1px solid var(--color-border-medium); border-radius: 8px; padding: 2rem; text-align: center; transition: all 0.3s ease; box-shadow: 0 2px 4px var(--color-shadow-light); } .service-card:hover { transform: translateY(-4px); box-shadow: 0 8px 16px var(--color-shadow-light); border-color: var(--season-complementary); } .service-icon { font-size: 3rem; margin-bottom: 1rem; } .service-card h3 { color: var(--season-primary); margin-bottom: 1rem; font-size: 1.5rem; font-weight: 600; } .service-card p { color: var(--color-text-muted); margin-bottom: 1.5rem; line-height: 1.6; } .service-card .btn { margin-top: 0; } .service-item { background: var(--color-bg-light); padding: 2rem; border-radius: 8px; border-left: none; } .service-item h3 { color: var(--season-primary); margin-bottom: 1rem; font-size: 1.25rem; } /* Content with Sidebar Layout (Government Style) */ .content-with-sidebar { max-width: 80vw; margin: auto; display: grid; grid-template-columns: 250px 1fr; gap: 3rem; margin-top: 2rem; } .content-main { min-width: 0; } /* Info Boxes */ .info-box { background: var(--color-bg-light); border-left: none; padding: 1.5rem; border-radius: 6px; margin: 1.5rem 0; color: var(--color-text-default); } .info-box h4 { color: var(--season-primary); margin-bottom: 0.75rem; font-size: 1.125rem; font-weight: 600; } .info-box p { color: var(--color-text-default); margin-bottom: 0.75rem; } .info-box p:last-child { margin-bottom: 0; } .info-box ul { margin: 0.75rem 0; padding-left: 1.5rem; } .info-box li { margin: 0.5rem 0; color: var(--color-gray-600); } .thank-you { margin-top: 1.5rem; padding: 1rem; background: var(--color-bg-light); border-left: none; border-radius: 6px; color: var(--season-complementary-dark); } /* Button Styles - Consolidated with main .btn definition above */ /* Timeline Styles */ .dates-timeline { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem; margin-top: 2rem; } .timeline-item { background: var(--color-bg-light); padding: 2rem; border-radius: 8px; border-left: none; text-align: center; } .timeline-item h3 { color: var(--season-primary); margin-bottom: 1rem; font-size: 1.25rem; } /* Season Tester Styles */ .season-tester { margin-top: 2rem; padding: 1rem; background: var(--color-overlay-light); border-radius: 8px; text-align: center; } .season-tester h4 { margin-bottom: 1rem; color: var(--color-white); } .season-buttons { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; } .season-btn { padding: 0.5rem 1rem; border: none; border-radius: 6px; cursor: pointer; font-weight: 500; transition: all 0.3s ease; color: var(--color-white); } .spring-btn { background: var(--season-tester-spring-bg); } .spring-btn:hover { background: var(--season-tester-spring-bg-hover); transform: translateY(-2px); } .summer-btn { background: var(--season-tester-summer-bg); } .summer-btn:hover { background: var(--season-tester-summer-bg-hover); transform: translateY(-2px); } .fall-btn { background: var(--season-tester-fall-bg); } .fall-btn:hover { background: var(--season-tester-fall-bg-hover); transform: translateY(-2px); } .winter-btn { background: var(--season-tester-winter-bg); color: var(--season-tester-winter-text); } .winter-btn:hover { background: var(--season-tester-winter-bg-hover); transform: translateY(-2px); } .reset-btn { background: var(--season-tester-reset-bg); } .reset-btn:hover { background: var(--season-tester-reset-bg-hover); transform: translateY(-2px); } /* Welsh Days Specific Styles */ .event-highlight-card { /* Will be overridden by seasonal button styles */ background: linear-gradient(135deg, var(--season-primary) 0%, var(--season-primary-darker) 100%); color: var(--color-white); border: none; box-shadow: 0 4px 6px var(--color-shadow-light); } .event-highlight-content { text-align: center; padding: 1rem 0; } .event-highlight-title { color: var(--color-white); margin-bottom: 0.5rem; font-size: 2rem; } .event-highlight-date { font-size: 1.25rem; margin-bottom: 1rem; opacity: 0.95; } .event-highlight-subtitle { font-size: 1.1rem; opacity: 0.9; max-width: 800px; margin: 0 auto; } .content-text-large { font-size: 1.1rem; line-height: 1.8; } .content-text-normal { line-height: 1.8; } .event-info-box { background: var(--color-bg-light); padding: 1.5rem; border-radius: 8px; margin-bottom: 1.5rem; border-left: none; } .event-info-box h3 { margin-top: 0; color: var(--season-primary); } .event-info-box h3 + h3 { margin-top: 1.5rem; } .event-info-box p { font-size: 1.1rem; margin-bottom: 1rem; } .event-info-box a { color: var(--season-primary); text-decoration: none; } .sponsors-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; margin-top: 1.5rem; } .sponsor-card { background: var(--color-bg-light); padding: 1.25rem; border-radius: 8px; text-align: center; border: 2px solid var(--color-border-light); transition: transform 0.2s, box-shadow 0.2s; } .sponsor-card:hover { transform: translateY(-2px); box-shadow: 0 4px 8px var(--color-shadow-light); } .sponsor-card p { margin: 0; font-weight: 600; color: var(--season-primary); } .heritage-highlight { background: var(--color-bg-light); padding: 1.5rem; border-radius: 8px; border-left: none; margin-bottom: 1.5rem; } .heritage-highlight p { margin: 0; line-height: 1.8; } .heritage-link-wrapper { margin-top: 1.5rem; padding: 1rem; background: var(--color-bg-light); border-radius: 6px; text-align: center; } .heritage-link { color: var(--season-primary); font-weight: bold; text-decoration: none; font-size: 1.1rem; display: inline-block; padding: 0.5rem 1rem; border: 2px solid var(--season-primary); border-radius: 4px; transition: all 0.2s; } .heritage-link:hover { background: var(--season-primary); color: var(--color-white); } .get-involved-section { background: linear-gradient(135deg, var(--color-bg-light) 0%, var(--color-border-light) 100%); border: 2px solid var(--season-primary); } .get-involved-section h2 { color: var(--season-primary); } .get-involved-section p:last-child { margin-top: 1rem; font-weight: 600; color: var(--season-primary); } .contact-card { background: var(--color-bg-light); padding: 1.5rem; border-radius: 8px; border-left: none; } .contact-card h3 { margin-top: 0; color: var(--season-primary); } .contact-card p { margin: 0.5rem 0; } .contact-card p:last-child { margin-bottom: 0; } .contact-card a { color: var(--season-primary); text-decoration: none; } /* Utility Classes for Inline Style Replacements */ .content-grid--spaced { margin-top: 1.5rem; } .services-grid--spaced { margin-top: 2rem; } .calendar-events--spaced { margin-top: 2rem; } .notice-info--spaced { margin-top: 2rem; } .notice-info--bottom-spaced { margin-bottom: 1.5rem; } .modal--hidden { display: none; } .fees-summary--hidden { display: none; } .reservation-process-list { margin: 0.75rem 0 0 1.5rem; padding-left: 0.5rem; } .reservation-note { margin-top: 1rem; margin-bottom: 0; } .fee-breakdown--hidden { display: none; } .fee-placeholder--hidden { display: none; } /* ======================================== SECTION LAYOUT VARIATIONS More interesting layouts and backgrounds ======================================== */ /* Wide Section - Breaks out of container slightly */ .section--wide { margin-left: calc((100vw - 100%) / -2); margin-right: calc((100vw - 100%) / -2); padding-left: 2rem; padding-right: 2rem; border-radius: 0; border-left: none; border-right: none; } /* Narrow Section - Centered, constrained width */ .section--narrow { max-width: 800px; margin-left: auto; margin-right: auto; } /* Full Bleed Section - Full viewport width */ .section--full-bleed { margin-left: calc((100vw - 100%) / -2); margin-right: calc((100vw - 100%) / -2); padding: 3rem 2rem; border-radius: 0; border-left: none; border-right: none; } .section--full-bleed-content { max-width: 1200px; margin: 0 auto; } /* Split Layout - Two column with visual element */ .section--split { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; padding: 3rem; } .section--split-right { grid-template-columns: 1fr 1fr; } .section--split-right .section--split-content { order: 2; } .section--split-right .section--split-visual { order: 1; } .section--split-content { display: flex; flex-direction: column; gap: 1.5rem; } .section--split-visual { display: flex; align-items: center; justify-content: center; min-height: 300px; border-radius: 8px; background: linear-gradient(135deg, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.05) 100%); } /* Asymmetric Two-Column Layout */ .section--asymmetric { display: grid; grid-template-columns: 2fr 1fr; gap: 3rem; padding: 2.5rem; } /* Cards with Background Section */ .section--cards-bg { padding: 3rem; background: linear-gradient(135deg, var(--color-bg-light) 0%, var(--color-border-light) 100%); } .section--cards-bg h2 { text-align: center; margin-bottom: 2.5rem; } /* Staggered Content Blocks */ .section--staggered { display: flex; flex-direction: column; gap: 2rem; padding: 2.5rem; } .staggered-item { padding: 2rem; background: var(--color-bg-white); border-radius: 8px; box-shadow: 0 2px 8px var(--color-shadow-light); max-width: 85%; } .staggered-item--left { align-self: flex-start; border-left: none; } .staggered-item--right { align-self: flex-end; border-right: 4px solid; } /* Seasonal colors for staggered items */ body.spring .staggered-item--left { border-left: none; } body.spring .staggered-item--right { border-right-color: var(--season-primary); } body.summer .staggered-item--left { border-left: none; } body.summer .staggered-item--right { border-right-color: var(--season-complementary-dark); } body.fall .staggered-item--left { border-left: none; } body.fall .staggered-item--right { border-right-color: var(--season-primary); } body.winter .staggered-item--left { border-left: none; } body.winter .staggered-item--right { border-right-color: var(--season-primary-dark); } /* Background Variations - Enhanced Gradients */ .section--bg-gradient-light { background: linear-gradient(135deg, var(--color-bg-white) 0%, var(--color-bg-light) 50%, var(--color-bg-white) 100%); } .section--bg-gradient-tint { background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 249, 250, 0.98) 100%); } /* Seasonal Background Gradients */ body.spring .section--bg-gradient-tint { background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(245, 249, 243, 0.98) 100%); } body.summer .section--bg-gradient-tint { background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(240, 249, 248, 0.98) 100%); } body.fall .section--bg-gradient-tint { background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 248, 245, 0.98) 100%); } body.winter .section--bg-gradient-tint { background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(245, 247, 250, 0.98) 100%); } /* Diagonal Accent Sections */ .section--diagonal-accent { position: relative; overflow: hidden; } .section--diagonal-accent::before { content: ''; position: absolute; top: 0; right: 0; width: 200px; height: 200px; background: linear-gradient(135deg, transparent 0%, rgba(0, 0, 0, 0.03) 100%); transform: translate(50%, -50%) rotate(45deg); pointer-events: none; } /* Bordered Accent Sections */ .section--bordered-accent { border: 2px solid; border-radius: 12px; box-shadow: 0 4px 12px var(--color-shadow-light); } /* Highlighted Section - Stands out */ .section--highlighted { background: linear-gradient(135deg, var(--color-bg-light) 0%, var(--color-border-light) 100%); border: 2px solid var(--season-complementary); box-shadow: 0 8px 24px var(--season-card-accent-hover); padding: 3rem; } /* Text-Only Section - Minimal styling */ .section--text-only { background: transparent; border: none; padding: 2rem 0; box-shadow: none; } /* Image Background Section */ .section--image-bg { position: relative; background-size: cover; background-position: center; color: var(--color-white); padding: 4rem 2rem; } .section--image-bg::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--color-overlay-medium); border-radius: 6px; z-index: 0; } .section--image-bg > * { position: relative; z-index: 1; } .section--image-bg h2, .section--image-bg h3, .section--image-bg p { color: var(--color-white); } /* Generic Full-Width Colored Background Class */ /* Apply to any content-section for bright full-width background */ .content-section.section--colored-bg { margin-left: calc((100vw - 100%) / -2); margin-right: calc((100vw - 100%) / -2); padding: 3rem 0; border-radius: 0; border: none; box-shadow: none; } /* Content wrapper inside full-width colored sections */ .content-section.section--colored-bg > * { max-width: 1300px; margin-left: auto; margin-right: auto; padding-left: 2rem; padding-right: 2rem; } /* Spring - Colored Background Sections */ body.spring .content-section.section--colored-bg { background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 50%, #6ee7b7 100%); color: var(--season-complementary-dark); } body.spring .content-section.section--colored-bg h2 { color: var(--season-complementary-dark); border-bottom-color: var(--season-complementary-dark); } body.spring .content-section.section--colored-bg p { color: var(--season-complementary-darker); } /* Summer - Colored Background Sections */ body.summer .content-section.section--colored-bg { background: linear-gradient(135deg, #cffafe 0%, #a5f3fc 50%, #67e8f9 100%); color: var(--season-complementary-dark); } body.summer .content-section.section--colored-bg h2 { color: var(--season-complementary-dark); border-bottom-color: var(--season-complementary-dark); } body.summer .content-section.section--colored-bg p { color: var(--season-complementary-darker); } /* Fall - Colored Background Sections */ body.fall .content-section.section--colored-bg { background: linear-gradient(135deg, #fed7aa 0%, #fdba74 50%, #fb923c 100%); color: var(--color-text-default); } body.fall .content-section.section--colored-bg h2 { color: var(--season-primary-dark); border-bottom-color: var(--season-primary-dark); } body.fall .content-section.section--colored-bg p { color: var(--color-text-default); } /* Winter - Colored Background Sections */ body.winter .content-section.section--colored-bg { background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 50%, #93c5fd 100%); color: var(--season-primary); } body.winter .content-section.section--colored-bg h2 { color: var(--season-primary); border-bottom-color: var(--season-primary); } body.winter .content-section.section--colored-bg p { color: var(--season-primary-dark); } /* Ensure readable links on colored background sections */ .content-section.section--colored-bg a:not(.btn) { color: var(--color-link-default); } .content-section.section--colored-bg a:not(.btn):hover { color: var(--color-link-hover); } /* Ensure info boxes stay readable inside colored sections */ .content-section.section--colored-bg .info-box { color: var(--color-text-default); } .content-section.section--colored-bg .info-box h4 { color: var(--season-primary); } .content-section.section--colored-bg .info-box p, .content-section.section--colored-bg .info-box li, .content-section.section--colored-bg .info-box em, .content-section.section--colored-bg .info-box strong { color: var(--color-text-default); } .content-section.section--colored-bg .info-box a:not(.btn) { color: var(--color-link-default); } .content-section.section--colored-bg .info-box a:not(.btn):hover { color: var(--color-link-hover); } .section--image-bg::before { background: var(--color-overlay-medium); border-radius: 6px; z-index: 0; } .section--image-bg > * { position: relative; z-index: 1; } .section--image-bg h2, .section--image-bg h3, .section--image-bg p { color: var(--color-white); } /* Generic Full-Width Colored Background Class */ /* Apply to any content-section for bright full-width background */ .content-section.section--colored-bg { margin-left: calc((100vw - 100%) / -2); margin-right: calc((100vw - 100%) / -2); padding: 3rem 0; border-radius: 0; border: none; box-shadow: none; } /* Content wrapper inside full-width colored sections */ .content-section.section--colored-bg > * { max-width: 1300px; margin-left: auto; margin-right: auto; padding-left: 2rem; padding-right: 2rem; } /* Spring - Colored Background Sections */ body.spring .content-section.section--colored-bg { background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 50%, #6ee7b7 100%); color: var(--season-complementary-dark); } body.spring .content-section.section--colored-bg h2 { color: var(--season-complementary-dark); border-bottom-color: var(--season-complementary-dark); } body.spring .content-section.section--colored-bg p { color: var(--season-complementary-darker); } /* Summer - Colored Background Sections */ body.summer .content-section.section--colored-bg { background: linear-gradient(135deg, #cffafe 0%, #a5f3fc 50%, #67e8f9 100%); color: var(--season-complementary-dark); } body.summer .content-section.section--colored-bg h2 { color: var(--season-complementary-dark); border-bottom-color: var(--season-complementary-dark); } body.summer .content-section.section--colored-bg p { color: var(--season-complementary-darker); } /* Fall - Colored Background Sections */ body.fall .content-section.section--colored-bg { background: linear-gradient(135deg, #fed7aa 0%, #fdba74 50%, #fb923c 100%); color: var(--color-text-default); } body.fall .content-section.section--colored-bg h2 { color: var(--season-primary-dark); border-bottom-color: var(--season-primary-dark); } body.fall .content-section.section--colored-bg p { color: var(--color-text-default); } /* Winter - Colored Background Sections */ body.winter .content-section.section--colored-bg { background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 50%, #93c5fd 100%); color: var(--season-primary); } body.winter .content-section.section--colored-bg h2 { color: var(--season-primary); border-bottom-color: var(--season-primary); } body.winter .content-section.section--colored-bg p { color: var(--season-primary-dark); } /* Responsive Adjustments */ @media (max-width: 1023px) { .section--wide, .section--full-bleed { margin-left: -1rem; margin-right: -1rem; padding-left: 1rem; padding-right: 1rem; } /* Full-width colored sections on mobile */ .historical, .fraud-notice, .content-section.section--colored-bg { margin-left: -1rem; margin-right: -1rem; padding: 2rem 0; } /* Content wrapper padding on mobile */ .historical > *, .fraud-notice > *, .content-section.section--colored-bg > * { padding-left: 1rem; padding-right: 1rem; } .section--split { grid-template-columns: 1fr; gap: 2rem; padding: 2rem; } .section--split-right .section--split-content, .section--split-right .section--split-visual { order: unset; } .section--asymmetric { grid-template-columns: 1fr; gap: 2rem; } .staggered-item { max-width: 100%; align-self: stretch !important; } .staggered-item--left, .staggered-item--right { border-left: none; border-right: none; } .section--cards-bg { padding: 2rem 1.5rem; } .section--highlighted { padding: 2rem 1.5rem; } } /* Weather Page Current Conditions */ #weather-page-current { display: flex; flex-wrap: wrap; align-items: center; gap: 2.5rem; padding: 2.5rem; } #weatherHero { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2rem); flex: 1 1 auto; min-width: 0; } #wpWeatherIcon { flex-shrink: 0; line-height: 1; font-size: clamp(6rem, 18vw, 10rem); } #wpWeatherIcon img, #wpWeatherIcon .emoji { width: clamp(6rem, 18vw, 10rem) !important; height: clamp(6rem, 18vw, 10rem) !important; display: block; } #weatherHeroText { min-width: 0; } #weatherHeroTemp { display: flex; align-items: baseline; gap: 0.15rem; } #wpWeatherTemp { font-size: clamp(4rem, 14vw, 8rem); font-weight: 800; line-height: 1; color: var(--season-primary, var(--color-text-default)); transition: color 0.3s ease; } #weatherHeroUnit { font-size: clamp(1.5rem, 4vw, 2.5rem); font-weight: 600; color: var(--season-primary, var(--color-text-default)); transition: color 0.3s ease; } #wpWeatherTemp.temp-cold, #weatherHeroUnit.temp-cold { color: var(--season-complementary-dark) !important; } #wpWeatherTemp.temp-warm, #weatherHeroUnit.temp-warm { color: var(--season-primary) !important; } #wpWeatherCondition { font-size: clamp(1.1rem, 3vw, 1.5rem); font-weight: 600; margin: 0.35rem 0 0; } #weatherHeroDetails { flex: 0 1 auto; min-width: 200px; } #weatherHeroDetails ul { columns: 2; column-gap: 2rem; margin: 0; } #weatherHeroDetails > p { font-size: 0.85rem; color: var(--color-gray-600); margin: 0.75rem 0 0; } #wpWeatherUpdated { font-style: italic; } @media (max-width: 600px) { #weather-page-current { flex-direction: column; align-items: flex-start; gap: 1.5rem; padding: 1.5rem; } #weatherHeroDetails ul { columns: 1; } } /* Print Styles */ @media print { .header, .footer, .mobile-menu-toggle, .season-tester { display: none; } .content-section { box-shadow: none; border: 1px solid var(--color-black); page-break-inside: avoid; } }