/* South East RENAL - Refactored & Optimized */ /* Version: 5.0 - Modular & Maintainable */ /* =========================================== TABLE OF CONTENTS =========================================== 1. CSS VARIABLES (Line ~4) - Colors - Spacing Scale - Shadows - Border Radius - Font Sizes - Transitions - Accessibility 2. ACCESSIBILITY IMPROVEMENTS (Line ~70) - Skip Link - Screen Reader Text - Focus Indicators - Touch Targets - Reduced Motion - High Contrast Support 3. RESET & BASE STYLES (Line ~185) - CSS Reset - Base Typography 4. UTILITY CLASSES (Line ~208) - Spacing (margins, padding) - Display & Flexbox - Text Alignment - Shadows - Border Radius - Widths & Heights - Position - Display - Font Weights - Colors - Links & Badges - Images - Breadcrumbs 5. TYPOGRAPHY (Line ~271) - Headings (h1, h2, h3) - Body Text 6. HEADER & NAVIGATION (Line ~289) - Site Header - Logo Bubble - Main Navigation - Mobile Toggle 7. HERO BANNERS (Line ~420) - Hero Banner (Homepage) - Hero Banner Simple (Other Pages) - Logo Pattern Background 8. MAIN CONTENT (Line ~484) - Call to Action - Menu Cards (Homepage) - Content Sections 9. HOSPITAL NETWORK MAP (Line ~746) - Distance Finder - Google Maps Integration - Map Sidebar 10. COLLAPSIBLE SECTIONS (Line ~1021) - Professionals Page - Young People Page 11. FOOTER (Line ~1169) - Footer Layout - Social Media - Copyright 12. PAGE-SPECIFIC STYLES - Children's Page (Line ~2856) - Young People Page (Line ~3228) - Professionals Page (Line ~3642) - Contact Page (Line ~3712) - Events Page (Line ~2393) - 404 Page (Line ~4089) 13. LOADING STATES & ANIMATIONS (Line ~4553) - Skeleton Loading - Fade-in Effects - Spinners 14. MICRO-INTERACTIONS (Line ~4661) - Button Press Feedback - Link Animations - Card Hovers - Smooth Scrolling 15. PRINT STYLES (Line ~4775) - Print Layout - Page Breaks - Link URLs 16. ACCESSIBILITY ENHANCEMENTS (Line ~4932) - Enhanced Focus - Tooltips 17. COMPONENT DOCUMENTATION (Line ~5000) - Menu Cards - Info Cards - Badges - Utilities =========================================== END TABLE OF CONTENTS =========================================== */ :root { /* EMEESY Exact Colors */ --navy-header: #2C4A6E; --lime-green: #B8D430; --teal-blue: #007A93; --coral-pink: #FF6B9D; --bright-pink: #E8368F; --purple: #7B4397; --orange: #FF9933; --nhs-blue: #005EB8; /* Sky/Banner Colors */ --sky-blue: #A8D8EA; --sky-light: #E8F6F9; /* Neutrals */ --white: #FFFFFF; --text-dark: #2C4A6E; --text-grey: #666666; --border-light: #E0E0E0; /* Spacing Scale (8px base) */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; --container-max: 1320px; /* Shadows */ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1); --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.04); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15); --shadow-xl: 0 20px 50px rgba(44, 74, 110, 0.15), 0 10px 25px rgba(0, 0, 0, 0.1); /* Border Radius */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 50%; /* Font Sizes */ --text-xs: 14px; --text-sm: 15px; --text-base: 16px; --text-lg: 18px; --text-xl: 20px; --text-2xl: 24px; --text-3xl: 28px; --text-4xl: 32px; --text-5xl: 42px; /* Transitions - Modern easing curves */ --transition-base: 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1); --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Accessibility */ --focus-color: #007A93; --focus-outline-width: 3px; } /* ===== ACCESSIBILITY IMPROVEMENTS ===== */ /* Skip Link - Hidden until focused */ /* Screen Reader Only Text */ .sr-only, .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } /* Focus Indicators - WCAG 2.1 Compliant */ *:focus { outline: var(--focus-outline-width) solid var(--focus-color); outline-offset: 2px; } /* Enhanced focus for interactive elements */ a:focus, button:focus, input:focus, select:focus, textarea:focus, [role="button"]:focus, [tabindex]:not([tabindex="-1"]):focus { outline: var(--focus-outline-width) solid var(--focus-color); outline-offset: 2px; box-shadow: 0 0 0 4px rgba(0, 168, 200, 0.2); } /* Modern focus-visible (hides focus for mouse clicks, shows for keyboard) */ *:focus:not(:focus-visible) { outline: none; box-shadow: none; } *:focus-visible { outline: var(--focus-outline-width) solid var(--focus-color); outline-offset: 2px; box-shadow: 0 0 0 4px rgba(0, 168, 200, 0.2); } /* Ensure sufficient touch target sizes (44x44px minimum) */ @media (pointer: coarse) { a, button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"] { min-height: 44px; min-width: 44px; } } /* Reduce motion for users who prefer it */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* High contrast mode improvements */ @media (prefers-contrast: high) { :root { --focus-outline-width: 4px; } button, a { text-decoration: underline; } } /* Dark mode support (optional - for future implementation) */ @media (prefers-color-scheme: dark) { /* Uncomment and adjust when implementing dark mode */ /* :root { --text-dark: #E0E0E0; --white: #1A1A1A; --navy-header: #4A6E9C; } */ } /* ===== RESET ===== */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-size: clamp(1rem, 0.5vw + 0.875rem, 1.125rem); /* 16px - 18px fluid */ color: var(--text-dark); line-height: 1.6; background: var(--white); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; } img { max-width: 100%; height: auto; display: block; } /* ===== UTILITY CLASSES ===== */ /* Spacing Utilities */ .mt-xs { margin-top: var(--space-xs); } .mt-sm { margin-top: var(--space-sm); } .mt-md { margin-top: var(--space-md); } .mt-lg { margin-top: var(--space-lg); } .mt-xl { margin-top: var(--space-xl); } .mb-xs { margin-bottom: var(--space-xs); } .mb-sm { margin-bottom: var(--space-sm); } .mb-md { margin-bottom: var(--space-md); } .mb-lg { margin-bottom: var(--space-lg); } .mb-xl { margin-bottom: var(--space-xl); } .p-sm { padding: var(--space-sm); } .p-md { padding: var(--space-md); } .p-lg { padding: var(--space-lg); } .p-xl { padding: var(--space-xl); } /* Display & Flexbox Utilities */ .flex { display: flex; } .flex-col { flex-direction: column; } .items-center { align-items: center; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .flex-grow { flex-grow: 1; } .gap-sm { gap: var(--space-sm); } .gap-md { gap: var(--space-md); } .gap-lg { gap: var(--space-lg); } /* Text Utilities */ .text-left { text-align: left; } .text-right { text-align: right; } /* Shadow Utilities */ .shadow-sm { box-shadow: var(--shadow-sm); } .shadow-md { box-shadow: var(--shadow-md); } .shadow-lg { box-shadow: var(--shadow-lg); } /* Border Radius Utilities */ .rounded-sm { border-radius: var(--radius-sm); } .rounded-md { border-radius: var(--radius-md); } .rounded-lg { border-radius: var(--radius-lg); } .rounded-full { border-radius: var(--radius-full); } /* Width Utilities */ .max-w-sm { max-width: 400px; } .max-w-md { max-width: 600px; } .max-w-lg { max-width: 800px; } .w-full { width: 100%; } /* Height Utilities */ .h-80 { height: 80px; } .h-100 { height: 100px; } /* Position Utilities */ .relative { position: relative; } .absolute { position: absolute; } /* Display Utilities */ .hidden { display: none; } .block { display: block; } .inline-block { display: inline-block; } /* Font Weight Utilities */ .font-semibold { font-weight: 600; } .font-bold { font-weight: 700; } /* Color Utilities */ .text-teal { color: var(--teal-blue); } .text-navy { color: var(--navy-header); } .text-grey { color: var(--text-grey); } /* Link Utilities */ .link-teal { color: var(--teal-blue); font-weight: 600; text-decoration: none; } /* Badge Component */ .badge { padding: 2px 8px; border-radius: var(--radius-md); font-size: 11px; font-weight: 600; color: white; display: inline-block; } .badge-teal { background: var(--teal-blue); } .badge-pink { background: var(--bright-pink); } .badge-nhs { background: var(--nhs-blue); } .badge-orange { background: var(--orange); } /* Image Utilities */ .img-auto { height: auto; } .max-w-600 { max-width: 600px; } .max-w-800 { max-width: 800px; } .max-w-1200 { max-width: 1200px; } /* Margin Utilities - Vertical */ .my-0 { margin-top: 0; margin-bottom: 0; } .my-lg { margin-top: var(--space-lg); margin-bottom: var(--space-lg); } .my-xl { margin-top: var(--space-xl); margin-bottom: var(--space-xl); } .my-2xl { margin-top: var(--space-2xl); margin-bottom: var(--space-2xl); } /* Margin Auto for Centering */ .mx-auto { margin-left: auto; margin-right: auto; } /* Container Utilities */ .container { max-width: 1200px; margin: 0 auto; padding: 40px 20px; } .container-sm { max-width: 800px; margin: 0 auto; } /* Info Box Component */ .info-box { padding: var(--space-lg); background: #E8F6F9; border-radius: var(--radius-md); margin: var(--space-2xl) 0; } .info-box-alt { padding: var(--space-lg); background: #f5f5f5; border-radius: var(--radius-md); margin: var(--space-2xl) 0; } /* Min Height Utilities */ .min-h-60vh { min-height: 60vh; } /* Border Utilities */ .border-0 { border: 0; } /* Accessibility Utility: Hides content visually but keeps it readable for screen readers */ .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* --- BREADCRUMBS (Clean / Contained Style) --- */ .breadcrumb-nav { background: transparent; /* No grey background */ border: none; /* No border */ padding: 0; /* No extra padding */ margin-bottom: 30px; /* Space below the links */ font-size: 14px; } .breadcrumb-list { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; /* Aligns perfectly to the left */ } .breadcrumb-list li { color: #64748b; /* Grey text */ } .breadcrumb-list li a { color: #be185d; /* Pink/Red to match your original style */ text-decoration: none; font-weight: 600; transition: color 0.2s; } .breadcrumb-list li a:hover { color: #2C4A6E; /* Navy on hover */ text-decoration: underline; } /* The divider (/) */ .breadcrumb-list li + li::before { content: "/"; /* Slashes instead of arrows */ color: #cbd5e1; margin-right: 8px; } /* The current active page */ .breadcrumb-list li:last-child { color: #2C4A6E; font-weight: 600; pointer-events: none; } /* ================================================================= UNIFIED BUTTON SYSTEM (Replaces 24 button variants) ================================================================= */ /* BASE BUTTON */ .btn { display: inline-block; padding: 12px 24px; font-size: 16px; font-weight: 600; text-align: center; text-decoration: none; border-radius: 8px; border: 2px solid transparent; cursor: pointer; transition: all 0.3s ease; font-family: inherit; line-height: 1.5; } .btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .btn:active { transform: translateY(0); } .btn:focus-visible { outline: 3px solid var(--focus-color); outline-offset: 3px; } /* PRIMARY STYLES */ .btn-primary { background: var(--teal-blue); color: white; border-color: var(--teal-blue); } .btn-primary:hover { background: #007a99; border-color: #007a99; } /* SECONDARY STYLES */ .btn-secondary { background: white; color: var(--navy-header); border-color: var(--border-light); } .btn-secondary:hover { background: #f8f9fa; border-color: var(--teal-blue); color: var(--teal-blue); } /* OUTLINE VARIANT */ .btn-outline { background: transparent; color: var(--teal-blue); border-color: var(--teal-blue); } .btn-outline:hover { background: var(--teal-blue); color: white; } /* SIZE MODIFIERS */ .btn-sm, .btn-lg { padding: 16px 32px; font-size: 18px; } /* SPECIALTY BUTTONS */ .btn-download { background: var(--teal-blue); color: white; position: relative; padding-left: 48px; } .btn-download::before { content: '↓'; position: absolute; left: 20px; font-size: 18px; font-weight: bold; } .btn-download:hover { background: #007a99; } /* Color variants for download button */ .btn-download.green { background: var(--lime-green); color: var(--navy-header); } .btn-download.green:hover { background: #a3c02a; } .btn-download.purple { background: var(--purple); color: white; } .btn-download.purple:hover { background: #6a3782; } .btn-download.orange { background: var(--orange); color: white; } .btn-download.orange:hover { background: #e68a2e; } /* CLOSE BUTTON */ .btn-close { background: transparent; color: var(--text-grey); border: 1px solid var(--border-light); padding: 8px 20px; font-size: 14px; } .btn-close:hover { background: #f5f5f5; border-color: var(--navy-header); color: var(--navy-header); } /* ICON-ONLY BUTTON */ /* DISABLED STATE */ .btn:disabled, .btn.disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; } /* LOADING STATE */ .btn.loading { position: relative; color: transparent; pointer-events: none; } .btn.loading::after { content: ''; position: absolute; width: 16px; height: 16px; top: 50%; left: 50%; margin-left: -8px; margin-top: -8px; border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 50%; border-top-color: white; animation: spin 0.6s linear infinite; } /* ================================================================= UNIFIED CARD SYSTEM (Replaces multiple card variants) ================================================================= */ /* BASE CARD */ .card { background: white; border: 1px solid #eee; border-radius: 12px; padding: 24px; transition: all 0.3s ease; } .card:hover { box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); transform: translateY(-3px); } /* CARD VARIANTS */ .card-compact { padding: 16px; } .card-feature { padding: 32px; } .card-bordered { border-width: 2px; } /* CARD COLOR ACCENTS */ .card-teal { border-top: 4px solid var(--teal-blue); } .card-teal:hover { border-top-color: var(--lime-green); } .card-orange { border-top: 4px solid var(--orange); } .card-pink { border-top: 4px solid var(--bright-pink); } .card-purple { border-top: 4px solid var(--purple); } .card-lime { border-left: 4px solid var(--lime-green); } .card-lime:hover { background: #f8faf5; transform: translateX(5px); } /* CARD CONTENT STYLES */ .card h3, .card h4 { color: var(--navy-header); margin-top: 0; margin-bottom: 12px; } .card h3 { font-size: 20px; } .card h4 { font-size: 18px; } .card p { color: var(--text-grey); font-size: 15px; line-height: 1.7; margin-bottom: 16px; } .card p:last-child { margin-bottom: 0; } .card ul { padding-left: 20px; margin-bottom: 16px; } .card li { color: var(--text-grey); font-size: 15px; line-height: 1.7; margin-bottom: 8px; } .card a { color: var(--teal-blue); font-weight: 600; text-decoration: none; } .card a:hover { text-decoration: underline; } /* CARD WITH IMAGE */ .card-with-image { padding: 0; overflow: hidden; } .card-with-image img { width: 100%; height: auto; display: block; } .card-with-image .card-content { padding: 24px; } /* CARD GRID LAYOUTS */ .card-grid { display: grid; gap: 24px; } .card-grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .card-grid-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } /* ================================================================= GRID UTILITIES ================================================================= */ .grid { display: grid; } .grid-cols-1 { grid-template-columns: repeat(1, 1fr); } .grid-cols-2 { grid-template-columns: repeat(2, 1fr); } .grid-cols-3 { grid-template-columns: repeat(3, 1fr); } .grid-cols-4 { grid-template-columns: repeat(4, 1fr); } /* Auto-fit grids (responsive) */ .grid-auto { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .grid-auto-sm { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .grid-auto-lg { grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); } /* Gap utilities */ .gap-2 { gap: 0.5rem; } .gap-3 { gap: 0.75rem; } .gap-4 { gap: 1rem; } .gap-5 { gap: 1.25rem; } .gap-6 { gap: 1.5rem; } .gap-8 { gap: 2rem; } /* Responsive grid utilities */ @media (max-width: 1024px) { .lg\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); } .lg\:grid-cols-1 { grid-template-columns: 1fr; } } @media (max-width: 768px) { .md\:grid-cols-1 { grid-template-columns: 1fr; } .md\:gap-4 { gap: 1rem; } } @media (max-width: 480px) { .sm\:grid-cols-1 { grid-template-columns: 1fr; } .sm\:gap-3 { gap: 0.75rem; } } /* ================================================================= END OF QUICK WINS ADDITIONS ================================================================= */ /* ===== TYPOGRAPHY - MODERN HEADINGS ===== */ /* Fluid Typography - Responsive font sizing */ h1 { font-size: clamp(2rem, 4vw + 1rem, 2.625rem); /* 32px - 42px */ font-weight: 800; line-height: 1.2; } h2 { font-size: clamp(1.5rem, 3vw + 0.5rem, 2rem); /* 24px - 32px */ line-height: 1.3; } h3 { font-size: clamp(1.25rem, 2vw + 0.5rem, 1.5rem); /* 20px - 24px */ line-height: 1.4; } h1, h2, h3 { font-family: 'Inter', 'Open Sans', Arial, sans-serif; font-weight: 700; letter-spacing: -0.02em; } /* ===== HEADER & NAVIGATION (COMPACT VERSION) ===== */ .site-header { background: linear-gradient(90deg, #2C4A6E 0%, #008cba 50%, #007A93 100%) !important; position: sticky; top: 0; z-index: 1000; padding: 0; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); transition: box-shadow var(--transition-smooth); } .header-top { display: flex; justify-content: flex-end; align-items: center; padding: 8px 24px; /* Reduced padding */ height: 50px; /* Fixed compact height */ } .instagram-badge { display: block; transition: transform var(--transition-fast); } .instagram-badge:hover { transform: scale(1.1); } .instagram-badge svg, .instagram-badge img { width: 32px; /* Slightly smaller */ height: 32px; display: block; } .nhs-logo { height: 32px; /* Smaller NHS logo */ width: auto; } /* --- COMPACT LOGO BUBBLE --- */ .logo-bubble { position: absolute; left: 24px; /* Tighter to edge */ top: 10px; /* Tighter to top */ background: var(--white); padding: 10px; border-radius: 50%; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15); z-index: 50; /* NEW SMALLER SIZE (Was 240px) */ width: 150px; height: 150px; display: flex; align-items: center; justify-content: center; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; } .logo-bubble:hover { transform: scale(1.05); } .logo-bubble img { /* Proportional image size */ width: 120px; height: 120px; display: block; object-fit: contain; border-radius: 50%; transition: all 0.4s ease; } /* --- SCROLLED STATE (Tiny) --- */ .site-header.scrolled .logo-bubble { width: 90px; height: 90px; padding: 5px; top: 5px; left: 20px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .site-header.scrolled .logo-bubble img { width: 75px; height: 75px; } .site-header.scrolled .logo-bubble:hover { transform: scale(1.05); } /* --- NAVIGATION (Re-aligned for smaller logo) --- */ .main-nav { /* Reduced left padding to bring menu closer (Was 480px) */ padding: 0 24px 12px 200px; } .main-nav ul { list-style: none; display: flex; gap: 24px; align-items: center; flex-wrap: wrap; } .main-nav a { color: var(--white); text-decoration: none; font-size: 16px; font-weight: 600; padding: 6px 0; border-bottom: 3px solid transparent; transition: all var(--transition-smooth); display: block; position: relative; } .main-nav a::after { content: ''; position: absolute; bottom: -3px; left: 0; width: 0; height: 3px; background: var(--lime-green); transition: width var(--transition-smooth); } .main-nav a:hover::after { width: 100%; } .main-nav a.active { color: var(--lime-green); } .main-nav a.active::after { width: 100%; } .main-nav a:hover:not(.active) { color: rgba(255, 255, 255, 0.9); } .search-icon { margin-left: auto; cursor: pointer; transition: transform var(--transition-fast); } .search-icon svg { stroke: var(--teal-blue); /* Ensure icon uses your teal color */ stroke-width: 2.5; /* Make it a bit bolder */ width: 24px; height: 24px; display: block; } .search-icon:hover { transform: scale(1.1); } .nav-toggle { display: none; background: var(--lime-green); color: var(--navy-header); border: none; padding: 8px 16px; /* Smaller button */ font-size: 14px; font-weight: 700; cursor: pointer; border-radius: 4px; transition: background var(--transition-fast); } .nav-toggle:hover { background: #A5C020; } /* --- HERO BANNERS (COMPACT & UNIFIED) --- */ /* 1. Base Styles for ALL Heros */ .hero-banner, .hero-banner-simple { background: linear-gradient(to bottom, var(--sky-blue) 0%, var(--sky-light) 100%); position: relative; overflow: hidden; width: 100%; /* Reduced from 300px to 200px for a compact look */ min-height: 200px; display: flex; align-items: center; box-sizing: border-box; } /* 2. Homepage Hero Specifics (Forces Compact) */ .home-hero { padding-top: 60px !important; padding-bottom: 60px !important; min-height: auto !important; } .hero-banner { padding: 40px 24px; justify-content: center; text-align: center; } .hero-content { padding-top: 0 !important; } /* 3. Internal Page Hero (Text Left, Image Right) */ .hero-banner-simple { /* Reduced Left Padding to 200px (Matches Nav) */ padding: 60px 40px 60px 200px; display: grid; grid-template-columns: 1fr 400px; gap: 40px; align-items: center; } /* Common Hero Elements */ .hero-banner::before, .hero-banner-simple::before { content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: inherit; z-index: -1; } /* Logo Pattern Background */ .logo-pattern { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('logos/logo.png'); background-size: 180px; background-repeat: repeat; background-position: center; opacity: 0.08; z-index: 1; pointer-events: none; } /* Content Styling */ .hero-content { position: relative; z-index: 10; width: 100%; } .hero-banner .hero-content { max-width: 900px; margin: 0 auto; } .hero-banner-simple .hero-content { text-align: left; } .hero-content h1 { font-family: 'Inter', 'Open Sans', Arial, sans-serif; font-size: clamp(32px, 4vw, 48px); color: var(--navy-header); font-weight: 800; line-height: 1.2; margin: 0; letter-spacing: -0.02em; text-shadow: 0 2px 4px rgba(255, 255, 255, 0.7); } /* Hero Image (Internal Pages) */ .hero-banner-simple .hero-image { width: 100%; height: 240px; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-lg); position: relative; z-index: 10; border: 4px solid rgba(255, 255, 255, 0.5); } .hero-banner-simple .hero-image img { width: 100%; height: 100%; object-fit: cover; display: block; } /* RENAL Acronym Badge (Homepage) */ .hero-subtitle { font-size: 20px; color: var(--text-dark); margin-bottom: 0; font-weight: 600; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: inline-block; padding: 12px 32px; border-radius: 50px; box-shadow: var(--shadow-md); border: 1px solid rgba(255, 255, 255, 0.5); position: relative; z-index: 60; margin-top: 20px; } /* --- Responsive Adjustments --- */ @media (max-width: 1100px) { .hero-banner-simple { padding-left: 240px; grid-template-columns: 1fr 300px; } } @media (max-width: 968px) { /* Stack layout on tablets/mobile */ .hero-banner-simple { display: flex; flex-direction: column; text-align: center; /* FIXED: Reduced top padding from 140px to 40px */ padding: 40px 24px; height: auto; min-height: auto; } .hero-banner-simple .hero-content { text-align: center; width: 100%; } .hero-banner-simple .hero-image { width: 100%; max-width: 500px; height: 250px; margin: 20px auto 0; } .hero-banner { /* FIXED: Reduced top padding from 120px to 40px */ padding: 40px 20px; } } /* ===== MAIN CONTENT ===== */ .main-content { max-width: var(--container-max); margin: 20px auto 60px; padding: 0 24px; } /* Call to Action above Menu Cards */ .menu-cta { font-size: 22px; color: var(--text-dark); text-align: center; margin-bottom: 24px; font-weight: 600; } /* ===== MENU CARDS ===== */ /* =============================================== MENU CARDS - Homepage Navigation Cards =============================================== Purpose: - Primary navigation on homepage - Guide users to different sections HTML Structure:
Description
Label Text Variants: - .children → Lime green (#B8D430) top border - .young-people → Coral pink (#FF6B9D) top border - .parents → Teal blue (#007A93) top border - .professionals→ Purple (#7B4397) top border States: - Default: Medium shadow, no transform - :hover: Lifts up 12px with larger shadow - :active: Slight press down to 8px - :focus: Teal outline for keyboard users Design Notes: - Colorful top border for visual interest - Smooth transform on hover (400ms) - Image scales slightly on hover (1.05x) - Label has matching background color - Fully accessible with keyboard navigation Image Requirements: - Minimum: 400x300px - Aspect ratio: 4:3 or 16:9 - Format: JPG or WebP - Alt text required Usage Examples: → Homepage navigation → Section landing pages → Major call-to-actions =============================================== */ /* Colored Top Borders */ /* Label Banners */ /* ===== HOSPITAL NETWORK MAP SECTION (Google Maps) ===== */ .network-map-section { background: linear-gradient(to bottom, #F8F9FA 0%, #FFFFFF 100%); padding: 40px 24px 30px; margin-top: 0; } .map-container { max-width: var(--container-max); margin: 0 auto; } .network-map-section h2 { font-size: 42px; color: var(--teal-blue); text-align: center; margin-bottom: 16px; font-weight: 700; } .network-map-section p { text-align: center; font-size: 18px; color: var(--text-grey); max-width: 800px; margin: 0 auto 32px; line-height: 1.6; } /* Distance Finder - Sidebar Style */ .distance-finder { background: var(--white); border-radius: var(--radius-md); padding: 24px; box-shadow: var(--shadow-md); } .finder-input-group label { display: block; font-size: 15px; font-weight: 600; color: var(--navy-header); margin-bottom: 12px; } .input-row { display: flex; flex-direction: column; gap: 10px; } #postcodeInput { width: 100%; padding: 12px 16px; border: 2px solid #E0E0E0; border-radius: var(--radius-sm); font-size: 15px; font-family: 'Open Sans', Arial, sans-serif; transition: all 0.3s ease; } #postcodeInput:focus { outline: none; border-color: var(--teal-blue); box-shadow: 0 0 0 3px rgba(0, 168, 200, 0.1); } #postcodeInput::placeholder { color: #999; } .nearest-results { margin-top: 12px; min-height: 0; } /* Map with Legend - Side by Side Layout */ /* Map Frame */ /* Map Sidebar Container */ /* Map Legend - In Sidebar */ .legend-item { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--text-dark); font-weight: 600; margin-bottom: 16px; } .legend-item:last-child { margin-bottom: 0; } .dot { width: 14px; height: 14px; border-radius: var(--radius-full); flex-shrink: 0; border: 2px solid var(--white); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } .dot.blue { background: #005EB8; /* NHS Blue for Tertiary Hub */ } .dot.pink { background: var(--bright-pink); } .dot.teal { background: var(--teal-blue); } /* ===== HOSPITAL DETAILS MODAL ===== */ .modal-hospital-details { padding: 32px; } /* Mobile modal adjustments */ @media (max-width: 600px) { .modal-hospital-details { padding: 24px; } } /* ===== FOOTER ===== */ .site-footer, .footer { background: var(--navy-header); color: white; padding: 60px 0 28px; margin-top: 80px; } .footer-wrap { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; } .footer .footer-wrap, .site-footer .footer-wrap { padding: 0 24px; } .footer-content { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 40px; } .footer-section h4 { color: var(--lime-green); font-size: 18px; margin-bottom: 20px; font-weight: 700; } .footer-section p { color: rgba(255, 255, 255, 0.9); font-size: 14px; line-height: 1.8; margin-bottom: 12px; } .footer-section ul { list-style: none; padding: 0; margin: 0; } .footer-section li { margin-bottom: 8px; } .footer-section a { color: rgba(255, 255, 255, 0.9); text-decoration: none; font-size: 14px; line-height: 1.8; display: block; transition: color var(--transition-fast); } .footer-section a:hover { color: var(--lime-green); text-decoration: underline; } /* Footer social media icons */ .footer-social { display: flex; gap: 16px; align-items: center; margin-top: 12px; } .footer-social a { display: inline-flex; align-items: center; justify-content: center; transition: transform var(--transition-smooth), opacity var(--transition-smooth); } .footer-social a:hover { transform: translateY(-4px) scale(1.1); opacity: 0.8; text-decoration: none; } .footer-social img { width: 40px; height: 40px; border-radius: 8px; display: block; } /* Footer Logo - Circular Bubble Style */ .footer-logo { width: 120px; /* Set fixed size for perfect circle */ height: 120px; background: white; /* White bubble background */ border-radius: 50%; /* Make it round */ padding: 10px; /* Padding inside the bubble */ object-fit: contain; /* Ensure logo fits without stretching */ margin-bottom: 20px; filter: none; /* Restore original colours (removes the white silhouette) */ box-shadow: 0 5px 15px rgba(0,0,0,0.2); /* Add depth/shadow */ display: block; } /* Ensure no nested image rules interfere */ .footer-logo img { display: none; /* Just in case there's a weird nesting issue, usually not needed */ } .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.2); padding-top: 28px; text-align: center; font-size: 14px; color: rgba(255, 255, 255, 0.7); } .footer-bottom p { margin-bottom: 8px; } .footer-bottom a { color: rgba(255, 255, 255, 0.9); text-decoration: none; margin: 0 12px; transition: color var(--transition-fast); } .footer-bottom a:hover { color: var(--white); text-decoration: underline; } /* Footer Responsive */ @media (max-width: 992px) { .footer-grid, .footer-content { grid-template-columns: 1fr 1fr; gap: 32px; } } @media (max-width: 576px) { .footer, .site-footer { padding: 40px 0 20px; } .footer-grid, .footer-content { grid-template-columns: 1fr; gap: 32px; } .footer-section { text-align: center; } } /* ===== ACCESSIBILITY ===== */ .skip-link { position: absolute; top: -50px; left: 0; background: var(--lime-green); color: var(--navy-header); padding: 12px 16px; text-decoration: none; font-weight: 700; z-index: 200; border-radius: 0 0 4px 0; } a:focus-visible, button:focus-visible { outline: 3px solid var(--lime-green); outline-offset: 3px; } /* ===== RESPONSIVE ===== */ @media (max-width: 1200px) { .logo-bubble { left: 24px; padding: 20px; /* Reduced padding for updated logo */ width: 200px; height: 200px; overflow: hidden; border-radius: 50%; } .logo-bubble img { height: 155px; /* Larger for updated logo */ width: 155px; border-radius: 50%; } .main-nav { padding-left: 420px; } .hero-content h1 { font-size: 46px; } } @media (max-width: 968px) { .logo-bubble { position: static; display: inline-block; margin: 16px; border-radius: 50%; width: 160px; /* Slightly larger for updated logo */ height: 160px; padding: 12px; /* Reduced padding */ overflow: hidden; } .logo-bubble img { height: 130px; /* Larger for updated logo */ width: 130px; border-radius: 50%; } .header-top { justify-content: space-between; padding: 12px 16px; } .main-nav { display: none; padding: 16px 24px; background: var(--navy-header); } .main-nav.active { display: block; } .main-nav ul { flex-direction: column; align-items: flex-start; gap: 0; } .main-nav li { width: 100%; } .main-nav a { width: 100%; padding: 16px 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); border-left: 3px solid transparent; } .main-nav a.active, .main-nav a:hover { border-left-color: var(--lime-green); border-bottom-color: rgba(255, 255, 255, 0.1); } .search-icon { margin-left: 0; padding: 16px 12px; } .nav-toggle { display: block; } .hero-banner { padding: 60px 20px 80px; } .hero-content h1 { font-size: 36px; } .hero-subtitle { font-size: 17px; padding: 10px 24px; } .footer-content { grid-template-columns: 1fr; gap: 32px; } .network-map-section h2 { font-size: 36px; } .network-map-section p { font-size: 16px; } .distance-finder { padding: 24px; } .input-row { flex-wrap: wrap; } #postcodeInput { min-width: 200px; } } @media (max-width: 600px) { .hero-banner { padding: 50px 20px 40px; } .hero-content h1 { font-size: 28px; } .hero-subtitle { font-size: 15px; padding: 8px 20px; } .logo-bubble { width: 140px; height: 140px; padding: 12px; /* Reduced padding for updated logo */ left: 20px; overflow: hidden; border-radius: 50%; } .logo-bubble img { height: 112px; /* Larger for updated logo */ width: 112px; border-radius: 50%; } .menu-cta { font-size: 18px; } .logo-pattern { background-size: 120px; } .network-map-section { padding: 30px 20px 20px; } .network-map-section h2 { font-size: 28px; } .network-map-section p { font-size: 16px; } .distance-finder { padding: 20px; } .legend-item { font-size: 14px; } } /* ===== PERFORMANCE ===== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } img:not([src]) { visibility: hidden; } img[loading="lazy"] { background: var(--border-light); } /* Print Styles */ @media print { .instagram-badge, .nav-toggle, .skip-link, .search-icon, .logo-pattern { display: none; } .main-nav { display: block !important; } .logo-bubble { position: static; } body { font-size: 12pt; } a { text-decoration: underline; color: var(--text-dark); } } /* ===== PROFESSIONALS PAGE STYLES ===== */ /* --- 1. SHARED LAYOUT STYLES (Keep these for other pages) --- */ /* Breadcrumb */ /* Main with Sidebar Layout */ /* Sidebar Navigation */ /* ===== PROFESSIONALS PAGE STYLES (Matched to Contact Page) ===== */ /* --- 1. SHARED LAYOUT STYLES --- */ .breadcrumb { background: #F8F9FA; padding: 16px 0; border-bottom: 1px solid #E0E0E0; margin-bottom: 40px; } .breadcrumb .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; } .breadcrumb a { color: var(--teal-blue); text-decoration: none; font-weight: 600; } .breadcrumb a:hover { text-decoration: underline; } .breadcrumb span { color: var(--text-dark); } .main-with-sidebar .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: 280px 1fr; gap: 60px; align-items: start; } /* --- 2. NEW PROFESSIONALS GRID (Identical to Contact Grid) --- */ .prof-unified-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; /* Same gap as Contact Page */ margin-bottom: 60px; } /* Department Tile (Cloned from .contact-option-card) */ .dept-tile { background: white; border-radius: 20px; /* Matched Contact Page Radius */ padding: 35px 25px; /* Matched Contact Page Padding */ text-align: center; text-decoration: none; color: inherit; box-shadow: 0 10px 30px rgba(0,0,0,0.05); /* Matched Shadow */ transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Matched "Pop" Animation */ border: 1px solid #f0f0f0; position: relative; overflow: hidden; cursor: pointer; display: flex; flex-direction: column; align-items: center; height: 100%; } /* Top Colored Bar (Using ::after like Contact Page) */ .dept-tile::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 6px; /* Start thin */ background: #e0e0e0; /* Default grey */ transition: height 0.3s; } /* Hover Effects */ .dept-tile:hover { transform: translateY(-10px); /* Same lift height */ box-shadow: 0 20px 40px rgba(0, 168, 200, 0.15); } .dept-tile:hover::after { height: 10px; /* Expands on hover */ } /* Icon Container (Cloned from .contact-emoji) */ .dept-icon { width: 100px; /* Increased to match Contact Page */ height: 100px; background: #f8f9fa; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px auto; transition: transform 0.4s; } .dept-tile:hover .dept-icon { transform: rotate(10deg) scale(1.1); /* Matched rotation effect */ background: #fff; } /* Text Styles */ .dept-tile h3 { color: var(--navy-header, #2C4A6E); font-size: 22px; margin-bottom: 12px; font-weight: 800; } .dept-tile p { color: #666; font-size: 15px; line-height: 1.6; margin-bottom: 20px; flex-grow: 1; } .dept-tile .link-action { color: var(--teal-blue, #007A93); font-weight: 700; font-size: 15px; display: inline-flex; align-items: center; gap: 5px; margin-top: auto; } /* --- COLORS (Apply colors to the top bar ::after) --- */ /* Guidelines: Teal */ .dept-tile.guidelines-tile::after { background: var(--teal-blue, #007A93); } .dept-tile.guidelines-tile .link-action { color: var(--teal-blue, #007A93); } /* Education: Purple */ .dept-tile.education::after { background: var(--purple, #7B4397); } .dept-tile.education .link-action { color: var(--purple, #7B4397); } /* Nursing: Pink */ .dept-tile.nursing::after { background: var(--pink, #E8368F); } .dept-tile.nursing .link-action { color: var(--pink, #E8368F); } /* Dietetics: Green */ .dept-tile.diet::after { background: var(--lime-green, #84CC16); } .dept-tile.diet .link-action { color: var(--lime-green, #84CC16); } /* Pharmacy: Orange */ .dept-tile.pharmacy::after { background: var(--orange, #F59E0B); } .dept-tile.pharmacy .link-action { color: var(--orange, #F59E0B); } /* Research: Blue */ .dept-tile.research::after { background: var(--blue, #3B82F6); } .dept-tile.research .link-action { color: var(--blue, #3B82F6); } /* --- 3. BOTTOM NAVIGATION CARDS --- */ .bottom-nav-cards { background: linear-gradient(to bottom, #F8F9FA 0%, #FFFFFF 100%); padding: 80px 0; } .bottom-nav-cards .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; } .nav-cards-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .nav-card { position: relative; border-radius: var(--radius-md); overflow: hidden; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; text-decoration: none; display: block; } .nav-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .nav-card.active { border: 3px solid var(--teal-blue); } .nav-card img { width: 100%; height: 250px; object-fit: cover; display: block; } .nav-card-label { position: absolute; bottom: 0; left: 0; right: 0; padding: 16px; color: var(--white); font-weight: 700; font-size: 16px; text-align: center; } /* Active nav link in header */ .main-nav a.active { color: var(--lime-green); border-bottom: 3px solid var(--lime-green); } /* --- 4. RESPONSIVE STYLES --- */ @media (max-width: 968px) { .hero-banner-simple { grid-template-columns: 1fr; gap: 32px; padding: 40px 24px; } .hero-banner-simple .hero-content h1 { font-size: 36px; } .main-with-sidebar .container { grid-template-columns: 1fr; gap: 40px; } .nav-cards-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } } @media (max-width: 600px) { .hero-banner-simple .hero-content h1 { font-size: 28px; } .hero-banner-simple .hero-image img { height: 280px; } .prof-unified-grid { gap: 20px; } .nav-cards-grid { grid-template-columns: 1fr; } .nav-card img { height: 200px; } }/* ===== NETWORK CONTACTS & INFO PAGES STYLES ===== */ /* Contact Cards */ .contact-section { margin-bottom: 60px; padding-bottom: 40px; border-bottom: 1px solid #E0E0E0; } .contact-section:last-of-type { border-bottom: none; } .contact-section h3 { font-size: 28px; color: var(--navy-header); margin-bottom: 24px; font-weight: 700; } .contact-section h4 { font-size: 20px; color: var(--teal-blue); margin-bottom: 12px; font-weight: 700; } /* Info Sections */ .info-section { margin-bottom: 60px; padding-bottom: 40px; border-bottom: 1px solid #E0E0E0; } .info-section:last-of-type { border-bottom: none; } .info-section h3 { font-size: 28px; color: var(--navy-header); margin-bottom: 20px; font-weight: 700; } .info-section h4 { font-size: 20px; color: var(--teal-blue); margin-top: 24px; margin-bottom: 12px; font-weight: 700; } .info-section ul { margin: 16px 0 24px 0; padding-left: 24px; } .info-section ul li { font-size: 16px; line-height: 1.8; color: var(--text-dark); margin-bottom: 8px; } .document-list { background: #F8F9FA; padding: 20px 24px; border-radius: var(--radius-sm); margin-top: 16px; } /* Sidebar active state */ .sidebar-menu a.active { background: #E8F6F9; border-left-color: var(--teal-blue); color: var(--navy-header); } /* ===== INDIVIDUAL GUIDELINES STYLING ===== */ .guideline-list { margin-top: 24px; } .guideline-item { background: #F8F9FA; border-left: 4px solid var(--teal-blue); padding: 20px 24px; border-radius: var(--radius-sm); margin-bottom: 20px; } .guideline-item:last-child { margin-bottom: 0; } .guideline-item h4 { font-size: 20px; color: var(--navy-header); margin-bottom: 12px; font-weight: 700; } .guideline-item p { font-size: 16px; line-height: 1.6; color: var(--text-dark); margin-bottom: 16px; } /* ===== EDUCATION SECTION - BUTTON GROUP ===== */ .button-group { display: flex; gap: 16px; margin-top: 24px; flex-wrap: wrap; } .btn-secondary { background: var(--navy-header); } .btn-secondary:hover { background: #1e3450; } /* ===== EDUCATIONAL RESOURCES PAGE STYLES ===== */ .education-section { margin-bottom: 60px; padding-bottom: 40px; border-bottom: 1px solid #E0E0E0; } .education-section:last-of-type { border-bottom: none; } .education-section h3 { font-size: 28px; color: var(--navy-header); margin-bottom: 20px; font-weight: 700; } .section-note { margin-top: 24px; font-style: italic; color: #666; } /* Video Grid */ .video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; margin-top: 24px; } .video-item { background: #F8F9FA; border-radius: var(--radius-sm); overflow: hidden; transition: transform 0.2s, box-shadow 0.2s; } .video-item:hover { transform: translateY(-4px); box-shadow: 0 8px 16px rgba(0,0,0,0.1); } .video-thumbnail { position: relative; width: 100%; padding-bottom: 56.25%; /* 16:9 aspect ratio */ background: #ddd; overflow: hidden; } .video-thumbnail img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .play-button { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60px; height: 60px; background: rgba(0, 168, 200, 0.9); border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; color: white; font-size: 24px; padding-left: 4px; } .video-info { padding: 20px; } .video-info h4 { font-size: 18px; color: var(--navy-header); margin-bottom: 8px; font-weight: 700; } .video-meta { font-size: 14px; color: #666; margin-bottom: 12px; } .video-description { font-size: 15px; line-height: 1.6; color: var(--text-dark); margin-bottom: 16px; } .btn-video { display: inline-block; background: var(--teal-blue); color: white; padding: 10px 20px; border-radius: 6px; text-decoration: none; font-size: 15px; font-weight: 600; transition: all 0.3s ease; } .btn-video:hover { background: #007a94; transform: translateY(-2px); } /* Module List - GRID LAYOUT */ .module-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; margin-top: 24px; } .module-item { display: flex; flex-direction: column; gap: 16px; background: #F8F9FA; border-left: 4px solid var(--teal-blue); padding: 20px; border-radius: var(--radius-sm); transition: transform 0.2s, box-shadow 0.2s; height: 100%; } .module-item:hover { transform: translateY(-4px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); } .module-icon { flex-shrink: 0; width: 48px; height: 48px; background: var(--teal-blue); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; color: white; } .module-content { flex: 1; display: flex; flex-direction: column; } .module-content h4 { font-size: 18px; color: var(--navy-header); margin-bottom: 8px; font-weight: 700; line-height: 1.3; } .module-meta { font-size: 13px; color: #666; margin-bottom: 10px; } .module-description { font-size: 14px; line-height: 1.5; color: var(--text-dark); margin-bottom: 12px; flex: 1; } .module-topics { background: white; padding: 12px; border-radius: 6px; margin-bottom: 12px; font-size: 14px; } .module-topics ul { margin-top: 6px; padding-left: 18px; } .module-topics li { font-size: 13px; line-height: 1.6; color: var(--text-dark); } .btn-module { display: inline-block; background: var(--teal-blue); color: white; padding: 10px 18px; border-radius: 6px; text-decoration: none; font-size: 14px; font-weight: 600; transition: all 0.3s ease; text-align: center; margin-top: auto; } .btn-module:hover { background: #007a94; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 168, 200, 0.3); } /* Presentation List */ .presentation-list { display: flex; flex-direction: column; gap: 24px; margin-top: 24px; } .file-link { display: inline-flex; align-items: center; gap: 8px; color: var(--teal-blue); text-decoration: none; font-size: 15px; transition: all 0.2s; padding: 8px 12px; background: white; border-radius: 6px; width: fit-content; } .file-link:hover { background: var(--teal-blue); color: white; transform: translateX(4px); } /* ===== UPCOMING EVENTS PAGE STYLES ===== */ .events-section { margin-bottom: 60px; } .event-card { display: flex; gap: 24px; background: #F8F9FA; border-radius: var(--radius-sm); padding: 24px; margin-bottom: 24px; transition: transform 0.2s, box-shadow 0.2s; } .event-card:hover { transform: translateY(-4px); box-shadow: 0 8px 16px rgba(0,0,0,0.1); } .event-date-box { flex-shrink: 0; width: 100px; background: var(--teal-blue); color: white; text-align: center; padding: 16px; border-radius: var(--radius-sm); } .event-month { font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; } .event-day { font-size: 36px; font-weight: 700; line-height: 1; margin-bottom: 4px; } .event-year { font-size: 16px; font-weight: 600; } .event-details { flex: 1; } .event-details h4 { font-size: 22px; color: var(--navy-header); margin-bottom: 12px; font-weight: 700; } .event-meta { font-size: 15px; line-height: 1.8; color: var(--text-dark); margin-bottom: 16px; } .event-description { font-size: 16px; line-height: 1.6; color: var(--text-dark); margin-bottom: 16px; } .event-topics { background: white; padding: 16px; border-radius: 6px; margin-bottom: 20px; } .event-topics ul { margin-top: 8px; padding-left: 20px; } .event-topics li { font-size: 15px; line-height: 1.8; color: var(--text-dark); } .event-actions { display: flex; gap: 12px; flex-wrap: wrap; } .btn-event-primary { display: inline-block; background: var(--teal-blue); color: white; padding: 12px 24px; border-radius: 6px; text-decoration: none; font-size: 16px; font-weight: 600; transition: all 0.3s ease; } .btn-event-primary:hover { background: #007a94; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 168, 200, 0.3); } .btn-event-secondary { display: inline-block; background: white; color: var(--navy-header); border: 2px solid var(--navy-header); padding: 12px 24px; border-radius: 6px; text-decoration: none; font-size: 16px; font-weight: 600; transition: all 0.3s ease; } .btn-event-secondary:hover { background: var(--navy-header); color: white; } /* Registration Steps */ .registration-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; margin-top: 24px; } .step-item { display: flex; gap: 16px; } .step-number { flex-shrink: 0; width: 40px; height: 40px; background: var(--teal-blue); color: white; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; } .step-content h4 { font-size: 18px; color: var(--navy-header); margin-bottom: 8px; font-weight: 700; } .step-content p { font-size: 15px; line-height: 1.6; color: var(--text-dark); } /* Calendar Grid */ /* Responsive */ @media (max-width: 768px) { .event-card { flex-direction: column; } .event-date-box { width: 100%; padding: 12px; } .event-day { font-size: 28px; } .module-list { grid-template-columns: 1fr; } .button-group { flex-direction: column; } width: 100%; text-align: center; } } /* Coming Soon Button Style */ .btn-coming-soon::after { content: ""; margin-left: 0; } /* ===== PARENTS & FAMILIES PAGE STYLES (Restored Content Formatting) ===== */ /* --- 1. HERO BANNER --- */ .hero-banner-simple.parents-hero { background: linear-gradient(135deg, #C85A28 0%, #D97531 100%) !important; padding-bottom: 80px; border-bottom: 4px solid #fdeee6; } .hero-banner-simple.parents-hero h1 { color: white !important; text-shadow: 0 2px 10px rgba(0,0,0,0.1); } /* --- 2. WELCOME SECTION --- */ /* --- 3. NEW QUICK LINKS GRID (White Tiles) --- */ .parent-icon { width: 80px; height: 80px; background: #FFF5F2; color: #C85A28; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px auto; transition: transform 0.4s; } /* --- 4. DYNAMIC SECTIONS & RESTORED CONTENT STYLES --- */ /* These were missing in the previous version! */ .pf-dynamic-section { display: none; margin-bottom: 30px; padding-top: 20px; } .pf-dynamic-section.pf-visible { display: block; animation: fadeIn 0.5s ease; } /* Inner Grids (Restored) */ .info-grid-compact { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-bottom: 24px; } .glossary-grid-compact { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-top: 15px; } /* Inner Cards (Restored) */ .card-compact { background: white; border: 1px solid #e2e8f0; border-radius: 8px; padding: 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.02); height: 100%; } .glossary-item-compact { background: white; padding: 15px; border-radius: 6px; border-left: 4px solid #007A93; box-shadow: 0 2px 4px rgba(0,0,0,0.05); font-size: 15px; color: #334155; } .hospital-summary-card { background: linear-gradient(135deg, #fef5f1 0%, #fdeee6 100%); border: 2px solid #f6ddd2; border-radius: 12px; padding: 30px; text-align: center; } .hospital-number { font-size: 48px; font-weight: 700; color: #C85A28; display: block; margin-bottom: 10px; } /* Utility Classes (Restored) */ .link-teal { color: #007A93; text-decoration: none; font-weight: 600; } .link-teal:hover { text-decoration: underline; } .btn-close { width: 100%; padding: 12px; background: #e2e8f0; border: none; border-radius: 6px; font-weight: 600; color: #475569; cursor: pointer; margin-top: 20px; } .btn-close:hover { background: #cbd5e1; } .max-w-120 { max-width: 120px; } .max-w-150 { max-width: 150px; } .max-w-200 { max-width: 200px; } .max-w-250 { max-width: 250px; } .max-w-300 { max-width: 300px; } .img-auto { height: auto; display: block; margin: 0 auto; } .text-center { text-align: center; } .mb-md { margin-bottom: 16px; } .mt-xl { margin-top: 32px; } /* ===== CHILDREN'S PAGE STYLES ===== */ /* Children's Hero */ .children-hero .hero-content h1 { color: #2C4A6E; /* Changed from var(--teal-blue) to navy blue */ font-size: 42px; } /* Children's Welcome */ .children-welcome { background: white; border-radius: var(--radius-md); padding: 30px; margin-bottom: 40px; text-align: center; position: relative; overflow: hidden; box-shadow: var(--shadow-md); } /* Colorful top border */ .children-welcome::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 8px; background: linear-gradient(90deg, var(--teal-blue), var(--bright-pink)); } /* Colorful bottom border */ .children-welcome::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 8px; background: linear-gradient(90deg, var(--lime-green), var(--orange)); } .children-welcome h2 { color: var(--navy-header); font-size: 32px; margin-bottom: 16px; } .children-text { font-size: 20px; line-height: 1.8; color: var(--text-dark); } /* Children Facts Grid */ .children-facts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-top: 24px; } .fact-card { background: linear-gradient(135deg, #E8F8FA, #F0F8FF); border-radius: var(--radius-md); padding: 24px; text-align: center; transition: transform 0.3s; } .fact-card:hover { transform: translateY(-8px) scale(1.02); } .fact-emoji { font-size: 48px; margin-bottom: 12px; } .fact-card h3 { font-size: 18px; color: var(--navy-header); margin-bottom: 8px; font-weight: 700; } .fact-card p { font-size: 14px; line-height: 1.6; color: var(--text-dark); margin: 0; } /* Video Grid for Children - Enhanced Grid Layout */ .video-grid-children { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important; gap: 24px !important; margin-top: 24px; margin-bottom: 40px; width: 100%; } .video-card-children { background: white; border: 3px solid #E0E0E0; border-radius: var(--radius-md); padding: 16px; transition: all 0.3s; display: flex; flex-direction: column; width: 100%; min-width: 0; } .video-card-children:hover { border-color: var(--teal-blue); box-shadow: 0 8px 16px rgba(0,168,200,0.2); transform: translateY(-4px); } .video-embed { position: relative; width: 100%; padding-bottom: 56.25%; /* 16:9 aspect ratio - maintains height when overlay hidden */ margin-bottom: 12px; border-radius: var(--radius-sm); overflow: hidden; background: #000; } .video-embed iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; } /* h4 title styling is defined later with overlay style */ /* InfoKid CTA */ .infokid-cta { background: linear-gradient(135deg, #007A93, #007a94); color: white; padding: 24px; border-radius: var(--radius-md); text-align: center; margin-top: 30px; } .infokid-cta p { font-size: 18px; margin: 0; line-height: 1.6; } .infokid-cta a { color: white; font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; } .infokid-cta a:hover { text-decoration-color: #FFE5F1; } /* Fun Fact Boxes */ .fact-boxes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-top: 24px; } .fun-fact-box { background: white; border-radius: var(--radius-md); padding: 24px; text-align: center; transition: all var(--transition-base); box-shadow: var(--shadow-md); position: relative; overflow: hidden; } /* Colorful top border */ .fun-fact-box::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 8px; background: linear-gradient(90deg, var(--teal-blue), var(--bright-pink)); } /* Colorful bottom border */ .fun-fact-box::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 8px; background: linear-gradient(90deg, var(--lime-green), var(--orange)); } .fun-fact-box:hover { transform: translateY(-8px) scale(1.02); box-shadow: var(--shadow-xl); } .fact-emoji-large { font-size: 64px; margin-bottom: 12px; } .fun-fact-box h3 { font-size: 20px; color: var(--navy-header); margin-bottom: 12px; font-weight: 700; } .fun-fact-box p { font-size: 15px; line-height: 1.6; color: var(--text-dark); margin: 0; } /* Resources Cards for Children */ .resources-cards-children { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; margin-top: 24px; } .resource-card-children { background: white; border: 3px solid var(--teal-blue); border-radius: var(--radius-md); padding: 24px; text-align: center; transition: all 0.3s; } .resource-card-children:hover { background: linear-gradient(135deg, #E8F8FA, #F0F8FF); transform: translateY(-4px); box-shadow: 0 8px 16px rgba(0,168,200,0.2); } .resource-icon { font-size: 56px; margin-bottom: 16px; } .resource-card-children h3 { font-size: 20px; color: var(--navy-header); margin-bottom: 12px; font-weight: 700; } .resource-card-children p { font-size: 15px; line-height: 1.6; color: var(--text-dark); margin-bottom: 16px; } /* Encouragement Box */ .encouragement-box { background: white; border-radius: var(--radius-md); padding: 32px; text-align: center; margin-top: 40px; margin-bottom: 40px; position: relative; overflow: hidden; box-shadow: var(--shadow-md); } /* Colorful top border */ .encouragement-box::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 8px; background: linear-gradient(90deg, var(--teal-blue), var(--bright-pink)); } /* Colorful bottom border */ .encouragement-box::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 8px; background: linear-gradient(90deg, var(--lime-green), var(--orange)); } .encouragement-box h2 { font-size: 28px; color: var(--navy-header); margin-bottom: 16px; font-weight: 700; } .encouragement-box p { font-size: 19px; line-height: 1.8; color: var(--text-dark); margin-bottom: 16px; } .encouragement-box p:last-child { margin-bottom: 0; } /* Content Full Width */ .content-full { max-width: 1200px; margin: 0 auto; padding: 40px 20px; } /* Responsive - Children's Page */ @media (max-width: 768px) { .children-hero .hero-content h1 { font-size: 32px; } .hero-subtitle { font-size: 16px; } .video-grid-children { grid-template-columns: 1fr; } .children-facts-grid, .fact-boxes-grid, .resources-cards-children { grid-template-columns: 1fr; } .fun-fact-box:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(44, 74, 110, 0.12), 0 6px 15px rgba(0, 0, 0, 0.08); } .fact-emoji-large { font-size: 48px; } } /* --- RESPONSIVE ADJUSTMENTS --- */ @media (max-width: 480px) { .card-stack { width: 85vw; /* Wider on mobile */ height: 110vw; /* Maintain aspect ratio */ max-height: 420px; } .card-front h3 { font-size: 20px; } .card-front p { font-size: 15px; } .deck-container { min-height: 480px; } } /* ===== YOUNG PEOPLE PAGE STYLES ===== */ /* --- 1. YOUNG PEOPLE HERO & WELCOME (Final Polish) --- */ /* 1. The Hero Banner (Neon Gradient) */ /* 2. Hero Heading (White Text) */ /* 3. Hero Subtitle (White Box with Dark Text) */ /* 4. Welcome Section (Standard Style) */ .yp-welcome { background: linear-gradient(135deg, #E8F8FA, #F0F8FF); border-left: 4px solid var(--teal-blue); border-radius: var(--radius-sm); padding: 30px; margin-bottom: 40px; } .yp-welcome h2 { color: var(--navy-header); font-size: 32px; margin-bottom: 16px; } .yp-welcome p { font-size: 17px; line-height: 1.8; color: var(--text-dark); } /* --- 2. NEW 3D QUICK LINKS GRID (Clean White Style) --- */ /* This replaces the old .yp-quick-links grid */ .teen-links-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; margin: 40px 0; perspective: 1000px; /* Necessary for 3D tilt effect */ } /* The Card (White Box Style) */ .teen-tilt-card { background: white; border-radius: 20px; padding: 40px 30px; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,0.05); border: 1px solid #f0f0f0; position: relative; overflow: hidden; cursor: pointer; display: flex; flex-direction: column; align-items: center; height: 100%; /* We animate the shadow, but NOT the transform (JS handles the tilt) */ transition: box-shadow 0.3s ease; transform-style: preserve-3d; } /* Top Colored Bar */ .teen-tilt-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 6px; transition: height 0.3s; } /* Hover Effects */ .teen-tilt-card:hover { box-shadow: 0 30px 60px rgba(0,0,0,0.15); /* Deep lift effect */ } .teen-tilt-card:hover::after { height: 10px; } /* Icon Styles */ .teen-icon { width: 80px; height: 80px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px auto; } .teen-icon svg { width: 40px; height: 40px; } /* Typography */ .teen-tilt-card h3 { color: #2C4A6E; font-size: 22px; margin-bottom: 12px; font-weight: 800; } .teen-tilt-card p { color: #666; font-size: 15px; line-height: 1.6; margin-bottom: 20px; flex-grow: 1; } .teen-link-action { font-weight: 700; font-size: 15px; display: inline-flex; align-items: center; gap: 5px; margin-top: auto; } /* --- COLOR THEMES for 3D Cards --- */ /* --- UPDATED CARD COLOURS (Cool & Capable Palette) --- */ /* 1. School: Deep Purple (Focus/Creativity) */ .teen-tilt-card.school::after { background: #6B21A8; } .teen-tilt-card.school .teen-icon { background: #F3E8FF; color: #6B21A8; } .teen-tilt-card.school .teen-link-action { color: #6B21A8; } /* 2. Sports: Terracotta (Energy - Matches Hero) */ .teen-tilt-card.sports::after { background: #C85A28; } .teen-tilt-card.sports .teen-icon { background: #FFF5F2; color: #C85A28; } .teen-tilt-card.sports .teen-link-action { color: #C85A28; } /* 3. Headspace: Teal (Calm/Mental Health) */ .teen-tilt-card.mental::after { background: #007A93; } .teen-tilt-card.mental .teen-icon { background: #E0F7FA; color: #007A93; } .teen-tilt-card.mental .teen-link-action { color: #007A93; } /* 4. Transition: Royal Blue (Confidence/Moving Up) */ .teen-tilt-card.transition::after { background: #1E40AF; } .teen-tilt-card.transition .teen-icon { background: #DBEAFE; color: #1E40AF; } .teen-tilt-card.transition .teen-link-action { color: #1E40AF; } /* --- 3. YP CONTENT GRID (Inner Sections) --- */ .yp-content-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; margin-top: 24px; } .yp-card { background: white; border: 1px solid #E0E0E0; /* Thinner border to match new style */ border-radius: var(--radius-sm); padding: 24px; transition: all 0.3s; box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* Added subtle shadow */ } .yp-card:hover { border-color: var(--teal-blue); box-shadow: 0 4px 12px rgba(0,168,200,0.15); transform: translateY(-2px); } .yp-card h3 { font-size: 20px; color: var(--navy-header); margin-bottom: 12px; font-weight: 700; } .yp-card p { font-size: 15px; line-height: 1.6; color: var(--text-dark); margin-bottom: 12px; } .yp-card ul { margin: 12px 0; padding-left: 20px; } .yp-card li { font-size: 15px; line-height: 1.7; color: var(--text-dark); margin-bottom: 6px; } .yp-card strong { color: var(--navy-header); font-weight: 700; } /* --- 4. YP RESOURCES GRID --- */ .yp-resources-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; margin-top: 24px; } .resource-card-yp { background: white; /* Changed to white for consistency */ border: 2px solid var(--teal-blue); border-radius: var(--radius-sm); padding: 24px; text-align: center; transition: all 0.3s; } .resource-card-yp:hover { transform: translateY(-4px); box-shadow: 0 8px 16px rgba(0,168,200,0.2); background: linear-gradient(135deg, #E8F8FA, #F0F8FF); } .resource-card-yp h3 { font-size: 20px; color: var(--navy-header); margin-bottom: 12px; font-weight: 700; } .resource-card-yp p { font-size: 15px; line-height: 1.6; color: var(--text-dark); margin-bottom: 16px; } /* --- 5. REMEMBER BOX --- */ /* --- 5. REMEMBER BOX (Clean White Style) --- */ .yp-remember-box { background: white; /* This makes it white instead of purple/gradient */ border-radius: 20px; padding: 40px 30px; margin: 50px 0; text-align: center; position: relative; overflow: hidden; border: 1px solid #f0f0f0; /* Animation settings */ transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease; box-shadow: 0 10px 30px rgba(0,0,0,0.05); cursor: default; } /* Top Colored Bar (Royal Blue to Teal) */ .yp-remember-box::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: linear-gradient(90deg, #1E40AF, #007A93); } /* Hover Effect */ .yp-remember-box:hover { transform: translateY(-5px) scale(1.01); box-shadow: 0 20px 40px rgba(30, 64, 175, 0.1); } /* Typography Updates */ .yp-remember-box h2 { color: #2C4A6E; font-size: 28px; margin-bottom: 16px; font-weight: 800; } .yp-remember-box p { font-size: 17px; line-height: 1.8; color: #475569; margin-bottom: 16px; position: relative; z-index: 2; } .yp-remember-box p:last-child { margin-bottom: 0; } .yp-remember-box strong { color: #1E40AF; font-weight: 700; } /* --- 5. LIVING YOUR LIFE GRID (New White Style) --- */ .yp-life-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin-top: 30px; } .life-widget { background: white; border-radius: 20px; padding: 35px 30px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); border: 1px solid #f0f0f0; position: relative; overflow: hidden; height: 100%; transition: transform 0.3s ease, box-shadow 0.3s ease; } /* Top Colored Bar */ .life-widget::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 6px; transition: height 0.3s; } .life-widget:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0,0,0,0.1); } .life-widget:hover::after { height: 10px; } /* Header Layout (Icon + Title) */ .widget-header { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; } /* Icon Container */ .widget-icon { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .widget-icon svg { width: 30px; height: 30px; } /* Typography */ .life-widget h3 { margin: 0; font-size: 20px; font-weight: 700; color: #2C4A6E; } .life-widget p { color: #64748b; font-size: 15px; margin-bottom: 15px; line-height: 1.6; } .life-widget ul { padding-left: 20px; margin: 0; } .life-widget li { margin-bottom: 8px; color: #475569; font-size: 15px; line-height: 1.5; } /* --- WIDGET COLORS (Young Adult Palette) --- */ /* Social: Terracotta (Matches Sports) */ .life-widget.social::after { background: #C85A28; } .life-widget.social .widget-icon { background: #FFF5F2; color: #C85A28; } /* Diet: Teal (Matches Headspace) */ .life-widget.diet::after { background: #007A93; } .life-widget.diet .widget-icon { background: #E0F7FA; color: #007A93; } /* Future: Navy (Matches School) */ .life-widget.future::after { background: #2C4A6E; } .life-widget.future .widget-icon { background: #F0F4F8; color: #2C4A6E; } /* --- 6. RESPONSIVE --- */ @media (max-width: 768px) { .teen-links-container, /* Added new container */ .yp-content-grid, .yp-resources-grid { grid-template-columns: 1fr; } .yp-hero .hero-content h1 { font-size: 32px; } .yp-welcome h2 { font-size: 26px; } } /* ===== CONTACT PAGE STYLES ===== */ /* Contact Intro */ .contact-intro { text-align: center; max-width: 800px; margin: 0 auto 40px; padding: 30px; background: linear-gradient(135deg, #E8F8FA, #F0F8FF); border-radius: var(--radius-sm); } .contact-intro h2 { font-size: 32px; color: var(--navy-header); margin-bottom: 16px; } .contact-intro p { font-size: 17px; line-height: 1.8; color: var(--text-dark); } /* Contact Cards Grid */ .contact-cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; margin-top: 24px; } .contact-icon { font-size: 48px; margin-bottom: 16px; text-align: center; } .contact-detail { background: #F8F9FA; padding: 16px; border-radius: 6px; margin-top: 16px; } .contact-detail strong { display: block; color: var(--navy-header); font-size: 16px; margin-bottom: 8px; } .contact-detail p { text-align: left; font-size: 14px; margin-bottom: 8px; } .contact-detail a { color: var(--teal-blue); text-decoration: none; font-weight: 600; } .contact-detail a:hover { text-decoration: underline; } /* Evelina Contact Grid */ .evelina-contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-top: 24px; } .contact-info-card { background: linear-gradient(135deg, #F8F9FA, white); border-left: 4px solid var(--teal-blue); padding: 20px; border-radius: 6px; } .contact-info-card h3 { font-size: 18px; color: var(--navy-header); margin-bottom: 12px; font-weight: 700; } .contact-info-card p { font-size: 15px; line-height: 1.7; color: var(--text-dark); margin-bottom: 6px; } .contact-info-card a { color: var(--teal-blue); text-decoration: none; font-weight: 600; } .contact-info-card a:hover { text-decoration: underline; } /* Hospital Finder */ .hospital-summary { list-style: none; padding: 0; margin: 0 0 24px 0; } .hospital-summary li { font-size: 16px; line-height: 2; color: var(--text-dark); padding-left: 28px; position: relative; } .hospital-summary li strong { color: var(--teal-blue); font-size: 20px; font-weight: 700; position: absolute; left: 0; } /* Emergency Contact */ .emergency-contact { background: linear-gradient(135deg, #FFF3CD, #FFF8E1); border: 3px solid #FFA500; border-radius: var(--radius-md); padding: 32px; margin: 40px 0; } .emergency-contact h2 { font-size: 28px; color: #D97706; margin-bottom: 16px; font-weight: 700; text-align: center; } .emergency-content p { font-size: 17px; line-height: 1.8; color: var(--text-dark); text-align: center; margin-bottom: 24px; } /* Social Media Section */ .social-media-section { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin-top: 24px; } .social-card { background: linear-gradient(135deg, #F8F9FA, white); border: 2px solid var(--teal-blue); border-radius: var(--radius-sm); padding: 32px; text-align: center; transition: all 0.3s; } .social-card:hover { transform: translateY(-4px); box-shadow: 0 8px 16px rgba(0,168,200,0.2); background: linear-gradient(135deg, #E8F8FA, #F0F8FF); } .social-icon img { width: 48px; height: 48px; } .social-card h3 { font-size: 20px; color: var(--navy-header); margin-bottom: 8px; font-weight: 700; } .social-card p { font-size: 15px; color: var(--text-dark); margin-bottom: 16px; line-height: 1.6; } /* Feedback Section */ .feedback-section { background: linear-gradient(135deg, var(--teal-blue), #007a94); color: white; border-radius: var(--radius-md); padding: 40px; margin: 40px 0; text-align: center; } .feedback-section h2 { font-size: 28px; margin-bottom: 16px; font-weight: 700; color: white; } .feedback-section > p { font-size: 17px; line-height: 1.8; margin-bottom: 24px; } .feedback-card { background: rgba(255, 255, 255, 0.1); border: 2px solid rgba(255, 255, 255, 0.3); border-radius: var(--radius-sm); padding: 24px; margin-top: 24px; } .feedback-card h3 { font-size: 20px; margin-bottom: 12px; font-weight: 700; color: white; } .feedback-card p { font-size: 16px; line-height: 1.7; margin: 0; } /* Responsive - Contact Page */ @media (max-width: 768px) { .contact-cards-grid, .evelina-contact-grid, .emergency-numbers, .social-media-section { grid-template-columns: 1fr; } .contact-intro h2 { font-size: 26px; } .emergency-contact { padding: 24px; } } /* ===== GUIDELINE DROPDOWNS ===== */ .guideline-dropdown { border: 2px solid var(--border-light); border-radius: var(--radius-sm); margin-bottom: 16px; background: white; transition: all var(--transition-smooth); } .guideline-dropdown:hover { border-color: var(--teal-blue); box-shadow: 0 2px 8px rgba(0, 168, 200, 0.1); } .guideline-dropdown[open] { border-color: var(--teal-blue); box-shadow: 0 4px 12px rgba(0, 168, 200, 0.15); } .guideline-summary { padding: 20px; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; user-select: none; transition: background-color var(--transition-fast); } .guideline-summary::-webkit-details-marker { display: none; } .guideline-summary:hover { background-color: #f8f9fa; } .guideline-summary h4 { margin: 0; color: var(--navy-header); font-size: 18px; flex-grow: 1; } .guideline-content { padding: 0 20px 20px 20px; animation: slideDown 0.3s ease-out; } .guideline-content p { color: var(--text-grey); line-height: 1.6; margin-bottom: 16px; } /* ===== SOCIAL MEDIA FOOTER SECTION ===== */ .social-media-footer { background: linear-gradient(135deg, #E8F6F9 0%, #F0F9FF 100%); padding: 60px 20px; margin-top: 60px; text-align: center; } .social-media-footer h2 { color: var(--navy-header); font-size: 32px; margin-bottom: 16px; } .social-media-footer > p { color: var(--text-grey); font-size: 18px; margin-bottom: 40px; } .social-media-section { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 24px; max-width: 600px; margin: 0 auto; } .social-card { background: white; padding: 32px; border-radius: var(--radius-md); box-shadow: var(--shadow-md); transition: all var(--transition-base); } .social-card:hover { transform: translateY(-8px); box-shadow: 0 12px 28px rgba(0, 168, 200, 0.2); } .social-icon { margin-bottom: 16px; } .social-icon img { display: inline-block; filter: none; } .social-card h3 { color: var(--navy-header); font-size: 22px; margin-bottom: 12px; } .social-card p { color: var(--text-grey); margin-bottom: 20px; font-size: 15px; } /* ===== VIDEO THUMBNAILS - FINAL FIX (CROPS BLACK BARS) ===== */ .video-card-children, .video-card-yp { position: relative; background: white; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); transition: all 0.3s ease; } .video-card-children:hover, .video-card-yp:hover { box-shadow: 0 8px 24px rgba(0, 168, 200, 0.2); transform: translateY(-4px); } /* Title overlay */ .video-card-children h4, .video-card-yp h4 { position: absolute; top: 0; left: 0; right: 0; margin: 0; padding: 16px 20px; background: linear-gradient(to bottom, rgba(44, 74, 110, 0.95) 0%, rgba(44, 74, 110, 0.85) 100%); color: white; font-size: 18px; font-weight: 700; z-index: 20; line-height: 1.3; text-align: center; } /* ===== PROFESSIONALS SECTION DROPDOWNS ===== */ /* ===== PROFESSIONALS SECTION DROPDOWNS ===== */ .section-content p, .section-content ul, .section-content .button-group { margin-bottom: 16px; } .section-content ul { padding-left: 24px; } .section-content li { margin-bottom: 8px; color: var(--text-grey); line-height: 1.6; } /* ===== VIDEO THUMBNAIL OVERLAYS - FIXED ===== */ .video-thumbnail-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; cursor: pointer; border-radius: var(--radius-sm); overflow: hidden; background: #000; z-index: 10; } .video-thumbnail { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease, opacity 0.3s ease; } .video-thumbnail-overlay:hover .video-thumbnail { transform: scale(1.05); opacity: 0.9; } .video-play-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.3); transition: background 0.3s ease; z-index: 5; } .video-thumbnail-overlay:hover .video-play-overlay { background: rgba(0, 0, 0, 0.4); } .play-button { transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3)); } .video-thumbnail-overlay:hover .play-button { transform: scale(1.1); } /* --- FIX: Draws the White Triangle inside the Play Button --- */ .play-button::after { content: ""; display: block; width: 0; height: 0; border-style: solid; /* The size of the triangle */ border-width: 10px 0 10px 20px; /* The color (White) */ border-color: transparent transparent transparent #ffffff; /* Visual alignment to make it look perfectly centered */ margin-left: 4px; } /* Optional: Add a hover effect for the button */ .video-facade { position: absolute; inset: 0; cursor: pointer; } .video-facade:hover .play-button { background-color: #008cba; /* Darker Blue on hover */ transform: translate(-50%, -50%) scale(1.1); /* Gentle pulse */ transition: all 0.3s ease; } /* ===== YOUNG PEOPLE SECTION DROPDOWNS ===== */ .yp-section-dropdown .yp-section-content { padding: 28px; animation: slideDown 0.3s ease-out; background: white; } .yp-section-content p, .yp-section-content ul, .yp-section-content .yp-content-grid { margin-bottom: 16px; } /* ===== LOADING STATES & ANIMATIONS ===== */ /* Skeleton Loading Animation */ @keyframes loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Skeleton variants for different content types */ /* Fade-in animation for loaded content */ .fade-in { animation: fadeIn 0.6s ease-in; } /* Spinner for inline loading */ .spinner { display: inline-block; width: 20px; height: 20px; border: 3px solid rgba(0, 168, 200, 0.3); border-top-color: var(--teal-blue); border-radius: var(--radius-full); animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Loading overlay for full-page loads */ /* ===== MICRO-INTERACTIONS ===== */ /* Button Press Feedback */ button:active, [role="button"]:active { transform: scale(0.98); transition-duration: 0.1s; } /* Link Underline Animation */ a:not(.menu-card):not(.nav-card):not(.skip-link) { position: relative; text-decoration: none; } a:not(.menu-card):not(.nav-card):not(.skip-link)::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background: currentColor; transition: width var(--transition-fast); } a:not(.menu-card):not(.nav-card):not(.skip-link):hover::after { width: 100%; } /* Card subtle lift on hover */ .info-card, .fact-card, .yp-card, .info-card:hover, .fact-card:hover, .yp-card:hover, /* Input focus animation */ input:focus, textarea:focus, select:focus { transform: scale(1.01); transition: transform var(--transition-fast), box-shadow var(--transition-fast); } /* Badge pulse animation (for "New" labels) */ .badge.pulse { animation: pulse 2s ease-in-out infinite; } /* Smooth scroll behavior */ html { scroll-behavior: smooth; } /* Respect reduced motion preference */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* Icon rotation on hover */ .icon-rotate { transition: transform var(--transition-fast); } .icon-rotate:hover { transform: rotate(15deg); } /* Ripple effect for buttons (optional class) */ .ripple { position: relative; overflow: hidden; } .ripple::after { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.5); transform: translate(-50%, -50%); transition: width 0.6s, height 0.6s; } .ripple:active::after { width: 300px; height: 300px; } /* ===== PRINT STYLES ===== */ @media print { /* Hide non-essential elements */ .skip-link, .nav-toggle, .main-nav, .logo-pattern, .instagram-badge, .footer-social, .video-thumbnail-overlay, .search-icon { display: none !important; } /* Optimize layout for print */ body { font-size: 12pt; line-height: 1.5; color: #000; background: #fff; } /* Header simplification */ .site-header { position: static; background: #fff; border-bottom: 2px solid #000; padding: 20px 0; } .logo-bubble { position: static; width: 120px; height: 120px; margin: 0 auto 20px; box-shadow: none; border: 1px solid #000; border-radius: 50%; overflow: hidden; } /* Content optimization */ .hero-banner { background: #fff; padding: 20px 0; border-bottom: 1px solid #ccc; } h1 { font-size: 24pt; color: #000; text-shadow: none; } h2 { font-size: 18pt; color: #000; page-break-after: avoid; } h3 { font-size: 14pt; color: #000; } /* Cards to simple blocks */ /* Remove hover effects and animations */ * { transition: none !important; animation: none !important; } /* Links */ a { color: #000; text-decoration: underline; } /* Show URLs after links */ a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10pt; color: #666; } /* Remove link URLs for internal navigation */ a[href^="#"]::after, a[href^="/"]::after { content: ""; } /* Images */ img { max-width: 100%; page-break-inside: avoid; } /* Footer */ .site-footer { border-top: 2px solid #000; padding: 20px 0; background: #fff; } /* Page breaks */ section { page-break-inside: avoid; } /* Remove backgrounds */ * { background: transparent !important; } /* Ensure text is black on white */ body, .hero-content, .main-content { color: #000 !important; background: #fff !important; } /* Add page numbers */ @page { margin: 2cm; @bottom-right { content: "Page " counter(page) " of " counter(pages); } } /* Print-specific utility */ .print-only { display: block !important; } .no-print { display: none !important; } } /* ===== ACCESSIBILITY ENHANCEMENTS ===== */ /* Improve focus indicators for better keyboard navigation */ .main-nav a:focus-visible { outline: 3px solid var(--lime-green); outline-offset: 4px; background: rgba(184, 212, 48, 0.1); } /* Enhanced skip link visibility */ .skip-link:focus { box-shadow: 0 4px 12px rgba(0, 168, 200, 0.4); animation: slideDown 0.3s ease-out; } @keyframes slideDown { from { transform: translateY(-10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* Better visual feedback for interactive elements */ button:hover:not(:disabled), button:disabled, /* Tooltip for accessibility */ [data-tooltip] { position: relative; cursor: help; } [data-tooltip]::after { content: attr(data-tooltip); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%) translateY(-8px); padding: var(--space-sm) var(--space-md); background: var(--navy-header); color: white; font-size: var(--text-sm); white-space: nowrap; border-radius: var(--radius-sm); opacity: 0; pointer-events: none; transition: opacity var(--transition-fast); z-index: 1000; } [data-tooltip]:hover::after, [data-tooltip]:focus::after { opacity: 1; } /* ===== COMPONENT DOCUMENTATION ===== */ /* ================================== MENU CARDS - Homepage Navigation ================================== Purpose: Primary navigation cards on homepage Location: index.html Variants: - .children (lime green border) - .young-people (coral pink border) - .parents (teal blue border) - .professionals (purple border) States: - :hover - Lifts up with enhanced shadow - :active - Slight press down - :focus - Teal outline Structure:
...
Label Notes: - Images should be 400x300px minimum - Alt text required for accessibility - Label text should be concise (1-2 words) */ /* ================================== INFO CARDS - Content Containers ================================== Purpose: Display information in organized blocks Location: All content pages Variants: Standard only States: - :hover - Subtle lift animation Structure:

Title

Content...

Notes: - Automatically responsive (auto-fit grid) - Use semantic heading levels - Include adequate padding */ /* ================================== BADGES - Status Indicators ================================== Purpose: Show status, categories, or highlights Location: Throughout site Variants: - .badge-teal (default/primary) - .badge-pink (emphasis) - .badge-nhs (NHS branding) - .badge-orange (warning/alert) Modifiers: - .pulse (animated pulse effect) Structure: New Notes: - Keep text short (1-2 words) - Use for emphasis, not decoration - Accessible - has proper contrast */ /* ================================== UTILITY CLASSES - Quick Styling ================================== Purpose: Common styling patterns without custom CSS Coverage: - Layout: .flex, .flex-col, .items-center, .justify-center - Spacing: .mt-lg, .mb-md, .p-xl, etc. /* ================================================================= CHILDREN'S PAGE - INTERACTIVE CARD DECK SYSTEM ================================================================= */ /* --- 1. DECK CONTAINER --- */ .deck-container { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 520px; margin-top: 40px; margin-bottom: 60px; padding: 20px; perspective: 1500px; } /* --- 2. CARD STACK --- */ .card-stack { position: relative; width: 400px; height: 500px; transform-style: preserve-3d; } /* --- 3. INDIVIDUAL CARD --- */ .card { position: absolute; top: 0; left: 0; width: 100%; height: 100%; cursor: pointer; transform-style: preserve-3d; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease; } /* Front Face */ .card-front { position: absolute; width: 100%; height: 100%; background: linear-gradient(135deg, #FFFFFF, #F8F9FA); border-radius: var(--radius-lg); border: 6px solid var(--teal-blue); box-shadow: var(--shadow-lg); padding: 40px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .card-front h3 { font-size: 32px; color: var(--navy-header); margin-bottom: 20px; font-weight: 800; } .card-front p { font-size: 22px; line-height: 1.6; color: var(--text-dark); margin: 0; } /* Back Face */ .card-back { background-color: var(--navy-header) !important; transform: rotateY(180deg); display: flex; justify-content: center; align-items: center; border: 5px solid var(--white); position: relative; z-index: 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); position: absolute; width: 100%; height: 100%; } .card-back::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('logos/logo.png'); background-repeat: repeat; background-size: 100px; background-position: center; opacity: 0.1; z-index: 0; } .card-back::after { content: "Kidney Facts"; background: var(--white); padding: 15px 35px; border-radius: 50px; color: var(--navy-header); font-family: 'Inter', 'Open Sans', sans-serif; font-weight: 800; font-size: 22px; text-transform: uppercase; letter-spacing: 2px; box-shadow: 0 4px 12px rgba(0,0,0,0.2); z-index: 1; position: relative; } /* Instruction Text */ .deck-instruction-text { margin-top: 10px; margin-bottom: 10px; font-size: 24px; color: #2C4A6E; font-weight: 700; text-align: center; animation: pulse 2s infinite; } @keyframes pulse { 0% { opacity: 0.8; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } 100% { opacity: 0.8; transform: scale(1); } } /* Animation Classes */ .card.flip-discard { transform: translateX(-120%) rotateY(-180deg) rotateZ(-10deg) !important; pointer-events: none; opacity: 0; } /* Card Colours - Alternating Borders */ .card:nth-child(4n+1) .card-front { border-color: var(--lime-green); } .card:nth-child(4n+2) .card-front { border-color: var(--teal-blue); } .card:nth-child(4n+3) .card-front { border-color: var(--bright-pink); } .card:nth-child(4n+4) .card-front { border-color: var(--orange); } /* Mobile Adjustments for Deck */ @media (max-width: 600px) { .card-stack { width: 90vw; height: 120vw; max-height: 550px; } .deck-container { min-height: auto !important; } .card-front h3 { font-size: 26px; } .card-front p { font-size: 20px; } .deck-instruction-text { font-size: 18px; } } @media (max-width: 480px) { .card-stack { width: 85vw; height: 110vw; max-height: 420px; } .card-front h3 { font-size: 20px; } .card-front p { font-size: 15px; } .deck-container { min-height: 480px; } } /* ================================================================= BUBBLE CURSOR EFFECT ================================================================= */ .cursor-bubble { position: absolute; background: rgba(0, 168, 200, 0.4); border-radius: 50%; pointer-events: none; z-index: 9999; animation: floatUp 1.5s ease-out forwards; box-shadow: inset 4px 4px 10px rgba(255,255,255,0.5); border: 1px solid rgba(255,255,255,0.3); } @keyframes floatUp { 0% { transform: translateY(0) scale(1); opacity: 1; } 100% { transform: translateY(-120px) scale(0.5); opacity: 0; } } /* Respect user motion preferences for bubble cursor */ @media (prefers-reduced-motion: reduce) { .cursor-bubble { animation: none; display: none; } } /* ================================================================= PEEK-A-BOO KIDNEY MASCOT ================================================================= */ /* --- MASCOT: KIDNEY SHAPE & FACE --- */ .mascot-container { position: fixed; bottom: -160px; /* Hides below screen initially */ left: 30px; /* Keeps it on the LEFT side */ width: 140px; height: 160px; transition: bottom 0.8s cubic-bezier(0.34, 1.56, 0.64, 1); /* Bouncy pop-up */ z-index: 900; pointer-events: none; /* Lets you click through it */ } .mascot-container.is-peeking { bottom: -20px; /* Peeking up */ } .kidney-bean { width: 120px; height: 150px; background: #FF6B9D; /* Cute Pink */ /* This creates the specific "Bean" curve */ border-radius: 50% 50% 40% 60% / 60% 60% 40% 50%; position: relative; transform: rotate(15deg); /* Leans in slightly */ box-shadow: inset -10px -10px 0 rgba(0,0,0,0.1), 0 10px 20px rgba(0,0,0,0.15); /* Continuous floating animation */ animation: floatMascot 3s ease-in-out infinite; } @keyframes floatMascot { 0%, 100% { transform: rotate(15deg) translateY(0); } 50% { transform: rotate(15deg) translateY(-8px); } } /* FACE CONTAINER */ .mascot-face { position: absolute; top: 40px; left: 25px; width: 70px; display: flex; flex-direction: column; align-items: center; } /* EYES */ .mascot-eyes { display: flex; gap: 12px; margin-bottom: 8px; } .eye { width: 16px; height: 22px; background: #2C4A6E; /* Dark Navy */ border-radius: 50%; position: relative; animation: blink 4s infinite; } /* Little white sparkle in eyes */ .eye::after { content: ''; position: absolute; top: 4px; right: 4px; width: 5px; height: 5px; background: white; border-radius: 50%; } /* MOUTH (The Smile) */ .mascot-mouth { width: 24px; height: 12px; border-bottom: 4px solid #2C4A6E; border-radius: 0 0 15px 15px; /* Semicircle for smile */ } /* ROSY CHEEKS */ .cheeks { position: absolute; top: 24px; width: 100%; display: flex; justify-content: space-between; padding: 0 2px; } .cheek { width: 10px; height: 6px; background: rgba(255,255,255,0.4); border-radius: 50%; } @keyframes blink { 0%, 96%, 100% { transform: scaleY(1); } 98% { transform: scaleY(0.1); } /* Quick blink */ } /* ================================================================= YOUNG PEOPLE PAGE - INTERACTIVE ENHANCEMENTS ================================================================= */ /* --- Super Neon Hero Header --- */ .hero-banner-simple.yp-hero { background: linear-gradient(135deg, #0f2027, #203a43, #2c5364) !important; position: relative; overflow: hidden; border-bottom: 4px solid #007A93; } .hero-banner-simple.yp-hero::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(45deg, rgba(0,168,200,0.4), rgba(232,54,143,0.4)); background-size: 200% 200%; animation: neonShift 6s ease infinite; z-index: 5; pointer-events: none; mix-blend-mode: screen; } @keyframes neonShift { 0% { background-position: 0% 50%; opacity: 0.3; } 50% { background-position: 100% 50%; opacity: 0.6; } 100% { background-position: 0% 50%; opacity: 0.3; } } /* ✅ USE THIS INSTEAD */ /* 1. Main Title - Keep White & Neon */ .hero-banner-simple.yp-hero h1 { color: white !important; text-shadow: 0 0 25px rgba(0,255,255,0.6); position: relative; z-index: 10; } /* 2. Subtitle Box - Force Dark Text */ .hero-banner-simple.yp-hero .hero-subtitle { background: rgba(255, 255, 255, 0.95); color: #2C4A6E !important; /* Dark Navy - Visible on white */ text-shadow: none !important; /* Remove neon glow from this text */ padding: 12px 24px; border-radius: 12px; display: inline-block; margin-top: 16px; font-weight: 700; box-shadow: 0 4px 15px rgba(0,0,0,0.15); position: relative; z-index: 10; } /* 3. General Paragraphs - Keep White */ .hero-banner-simple.yp-hero p { color: white !important; position: relative; z-index: 10; } /* --- 3D Quick Links (Grid Layout) --- */ .teen-links-container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 40px 0; perspective: 1000px; } .teen-tilt-card { background: white; border-radius: 20px; padding: 25px; position: relative; transform-style: preserve-3d; transform: perspective(1000px); transition: transform 0.1s ease; box-shadow: 0 15px 35px rgba(0,0,0,0.1); border: 1px solid rgba(0,0,0,0.05); cursor: pointer; overflow: hidden; } .teen-tilt-card h3 { font-size: 22px; font-weight: 800; margin-bottom: 10px; background: linear-gradient(90deg, #2C4A6E, #007A93); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .teen-tilt-card .arrow { display: inline-block; margin-top: 15px; color: #007A93; font-weight: 700; } /* --- Dynamic Sections (Hidden by default) --- */ .yp-dynamic-section { display: none; } .yp-visible { display: block !important; animation: slideUpFade 0.6s cubic-bezier(0.16, 1, 0.3, 1); } .yp-section-content { background: #fff; padding: 20px; border-radius: 12px; } /* --- QR Code Grid & Scanning Animation --- */ .qr-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 30px; margin-bottom: 40px; } .qr-card { background: white; padding: 20px; border-radius: 20px; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,0.08); transition: transform 0.3s ease; border: 2px solid transparent; } .qr-card:hover { transform: translateY(-10px); border-color: #007A93; box-shadow: 0 20px 40px rgba(0,168,200,0.15); } .qr-frame { width: 100%; max-width: 150px; aspect-ratio: 1/1; margin: 0 auto 15px auto; background: #f8f9fa; border-radius: 12px; padding: 10px; border: 2px dashed #cbd5e0; position: relative; overflow: hidden; } .qr-frame img { width: 100%; height: 100%; object-fit: contain; position: relative; z-index: 1; } /* Scanning Animation */ .qr-card:hover .qr-frame::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: #007A93; box-shadow: 0 0 15px #007A93; animation: scanLine 1.5s infinite linear; z-index: 2; border-radius: 50%; } @keyframes scanLine { 0% { top: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { top: 100%; opacity: 0; } } .qr-card h4 { color: #2C4A6E; font-size: 16px; font-weight: 700; margin-bottom: 5px; } .qr-instruction { font-size: 12px; color: #007A93; font-weight: 700; text-transform: uppercase; } /* ================================================================= PROFESSIONALS PAGE - CLINICAL UI ENHANCEMENTS ================================================================= */ /* --- Network Mesh Hero --- */ .hero-banner-simple.prof-hero { background-color: #0f172a; background-image: radial-gradient(#1e293b 1px, transparent 1px), radial-gradient(#1e293b 1px, transparent 1px); background-size: 20px 20px; background-position: 0 0, 10px 10px; position: relative; border-bottom: 4px solid #007A93; overflow: hidden; } .hero-banner-simple.prof-hero::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, transparent 95%, rgba(0, 168, 200, 0.1) 50%, transparent 55%); background-size: 200% 100%; animation: networkScan 8s linear infinite; pointer-events: none; } @keyframes networkScan { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } .hero-banner-simple.prof-hero h1 { color: white !important; letter-spacing: 1px; } /* --- Smart File Guidelines --- */ .guidelines-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 20px; margin-bottom: 50px; } /* --- Department Tiles (Dashboard) --- */ .dept-tile { background: white; border: 1px solid #e2e8f0; border-radius: 16px; padding: 30px; text-align: center; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; position: relative; overflow: hidden; } .dept-tile::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: #cbd5e1; transition: height 0.3s; } .dept-tile:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0,0,0,0.08); } .dept-tile:hover::before { height: 100%; opacity: 0.05; } .dept-icon { width: 64px; height: 64px; margin: 0 auto 20px auto; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28px; transition: transform 0.3s; } .dept-tile h3 { margin: 0 0 10px 0; color: #1e293b; font-size: 20px; } .dept-tile p { color: #64748b; font-size: 15px; line-height: 1.5; margin-bottom: 20px; } .link-action { color: #007A93; font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: 0.5px; } /* Tile Colours */ .dept-tile.education::before { background: #0284c7; } .dept-tile.nursing::before { background: #db2777; } .dept-tile.diet::before { background: #16a34a; } .dept-tile.pharmacy::before { background: #9333ea; } .dept-tile.research::before { background: #ea580c; } .header-badge { background: #007A93; color: white; padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: 700; } /* ================================================================= END OF CHILDREN'S PAGE INTERACTIVE FEATURES ================================================================= */ /* ================================================================= PROFESSIONALS PAGE STYLES ================================================================= */ /* Professional Hero */ .prof-hero { background: linear-gradient(135deg, #1e3a8a 0%, #2C4A6E 100%); } .prof-hero .hero-content h1 { font-size: 42px; margin-bottom: 16px; } /* Unified Resource Grid - 3 per row */ .prof-unified-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; } /* Department Tiles */ .dept-tile { background: white; border: 2px solid #e2e8f0; border-radius: 12px; padding: 30px; cursor: pointer; transition: all 0.3s ease; position: relative; overflow: hidden; text-decoration: none; color: inherit; display: block; } .dept-tile::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 0; background: currentColor; transition: height 0.3s ease; } .dept-tile:hover::before { height: 100%; } .dept-tile:hover { border-color: currentColor; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); transform: translateY(-3px); } .dept-tile:focus { outline: 3px solid #007A93; outline-offset: 4px; } .dept-icon { width: 60px; height: 60px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 28px; margin-bottom: 16px; transition: all 0.3s ease; } .dept-tile:hover .dept-icon { transform: scale(1.1) rotate(5deg); } .dept-tile h3 { margin: 0 0 10px 0; color: #2C4A6E; font-size: 20px; } .dept-tile p { color: #64748b; font-size: 14px; line-height: 1.6; margin-bottom: 16px; } .link-action { color: #007A93; font-weight: 600; font-size: 14px; display: inline-block; transition: transform 0.3s ease; } .dept-tile:hover .link-action { transform: translateX(5px); } /* Department-specific colours */ .dept-tile.education { color: #0284c7; } .dept-tile.education .dept-icon { background: #e0f2fe; color: #0284c7; } .dept-tile.nursing { color: #db2777; } .dept-tile.nursing .dept-icon { background: #fce7f3; color: #db2777; } .dept-tile.diet { color: #16a34a; } .dept-tile.diet .dept-icon { background: #dcfce7; color: #16a34a; } .dept-tile.pharmacy { color: #9333ea; } .dept-tile.pharmacy .dept-icon { background: #f3e8ff; color: #9333ea; } .dept-tile.research { color: #ea580c; } .dept-tile.research .dept-icon { background: #ffedd5; color: #ea580c; } /* Guidelines tile styling */ .dept-tile.guidelines-tile { color: #dc2626; } .dept-tile.guidelines-tile .dept-icon { background: #fee2e2; color: #dc2626; } /* Guidelines Modal */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .guidelines-modal-content { background: white; border-radius: 16px; max-width: 1000px; width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); animation: slideUp 0.3s ease-out; } @keyframes slideUp { from { transform: translateY(50px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .guideline-icon { font-size: 32px; flex-shrink: 0; } .guideline-info { flex-grow: 1; } .guideline-info h3 { margin: 0 0 8px 0; color: #2C4A6E; font-size: 18px; } .guideline-info p { margin: 0 0 10px 0; color: #64748b; font-size: 14px; line-height: 1.5; } /* Responsive Design for Professionals Page */ @media (max-width: 1024px) { .prof-unified-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .prof-hero .hero-content h1 { font-size: 32px; } .prof-unified-grid { grid-template-columns: 1fr; } } @media (max-width: 480px) { .dept-tile { padding: 20px; } .dept-icon { width: 50px; height: 50px; font-size: 24px; } } /* Reduced Motion */ @media (prefers-reduced-motion: reduce) { .dept-tile, .dept-icon, .link-action, .guidelines-modal, .guidelines-modal-content { transition: none; animation: none; } .dept-tile:hover, .dept-tile:hover .dept-icon { transform: none; } } /* High Contrast Mode */ /* ================================================================= END OF PROFESSIONALS PAGE STYLES ================================================================= */ /* ================================================================= PARENTS & FAMILIES PAGE STYLES ================================================================= */ /* --- 1. HERO BANNER (Warm Terracotta) --- */ .hero-banner-simple.parents-hero { background: linear-gradient(135deg, #C85A28 0%, #D97531 100%) !important; position: relative; overflow: hidden; padding-bottom: 80px; border-bottom: 4px solid #fdeee6; } .hero-banner-simple.parents-hero h1 { color: white !important; text-shadow: 0 2px 10px rgba(0,0,0,0.1); position: relative; z-index: 2; } .hero-subtitle { font-size: 20px; color: var(--text-dark); margin-top: 12px; } /* --- 2. WELCOME SECTION --- */ .pf-welcome { background: linear-gradient(135deg, #fef5f1 0%, #fdeee6 100%); padding: 40px; border-radius: 12px; margin-bottom: 40px; border-left: 6px solid #C85A28; } .pf-welcome h2 { color: #2C4A6E; margin-top: 0; margin-bottom: 16px; font-size: 28px; font-weight: 700; } .pf-welcome p { font-size: 18px; line-height: 1.8; color: #334155; margin: 0; } /* --- 3. QUICK LINKS GRID (Clean White Boxes) --- */ .parents-unified-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin: 50px 0; } /* Parent Tile Style */ .parent-tile { background: white; border-radius: 20px; padding: 40px 30px; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,0.05); transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); border: 1px solid #f0f0f0; position: relative; overflow: hidden; cursor: pointer; display: flex; flex-direction: column; align-items: center; height: 100%; } /* Top Colored Bar (Unified Orange) */ .parent-tile::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: #C85A28; /* Terracotta Orange */ transition: height 0.3s; } /* Hover Effect */ .parent-tile:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(200, 90, 40, 0.15); } .parent-tile:hover::after { height: 10px; } /* Icon Container */ .parent-icon { width: 80px; height: 80px; background: #FFF5F2; /* Very light orange */ color: #C85A28; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px auto; transition: transform 0.4s; } .parent-icon svg { width: 40px; height: 40px; } .parent-tile:hover .parent-icon { transform: rotate(10deg) scale(1.1); background: white; box-shadow: 0 4px 10px rgba(200, 90, 40, 0.1); } /* Typography */ .parent-tile h3 { color: #2C4A6E; font-size: 22px; margin-bottom: 12px; font-weight: 800; } .parent-tile p { color: #666; font-size: 15px; line-height: 1.6; margin-bottom: 20px; flex-grow: 1; } .parent-link-action { color: #C85A28; font-weight: 700; font-size: 15px; display: inline-flex; align-items: center; gap: 5px; margin-top: auto; } /* --- 4. DYNAMIC SECTIONS (Hidden Content) --- */ .pf-dynamic-section { display: none; opacity: 0; transform: translateY(20px); transition: opacity 0.4s ease-out, transform 0.4s ease-out; margin-bottom: 30px; } .pf-dynamic-section.pf-visible { display: block; opacity: 1; transform: translateY(0); } .pf-dynamic-section h2 { color: #2C4A6E; font-size: 32px; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 3px solid #C85A28; } .pf-section-content { padding: 20px 0; } /* --- 5. INTRO CARDS & HOSPITAL SUMMARY --- */ .intro-cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 25px; margin-top: 30px; } .intro-card { background: white; border: 2px solid #f1f5f9; border-radius: 12px; padding: 25px; transition: all 0.3s ease; } .intro-card:hover { border-color: #C85A28; box-shadow: 0 8px 20px rgba(200, 90, 40, 0.15); transform: translateY(-3px); } .intro-card h3 { color: #2C4A6E; font-size: 20px; margin-bottom: 10px; font-weight: 700; } .intro-card p { color: #64748b; line-height: 1.6; } /* Hospital Summary */ .hospital-summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 25px; margin-top: 25px; } .hospital-summary-card { background: linear-gradient(135deg, #fef5f1 0%, #fdeee6 100%); border: 2px solid #f6ddd2; border-radius: 12px; padding: 30px; text-align: center; transition: all 0.3s ease; } .hospital-summary-card:hover { border-color: #C85A28; transform: translateY(-3px); } .hospital-number { font-size: 48px; font-weight: 700; color: #C85A28; margin-bottom: 10px; display: block; } .hospital-summary-card h3 { color: #2C4A6E; font-size: 20px; font-weight: 700; } /* Responsive */ @media (max-width: 768px) { .pf-welcome { padding: 25px; } .pf-welcome h2 { font-size: 24px; } .parents-unified-grid { grid-template-columns: 1fr; gap: 20px; } .intro-cards-grid, .hospital-summary-grid { grid-template-columns: 1fr; } } /* ================================================================= NETWORK INFO PAGE - "REGIONAL DIRECTORY" THEME ================================================================= */ /* --- 1. CONNECTED NETWORK HERO --- */ .hero-banner-simple.network-hero { background: linear-gradient(135deg, #005EB8, #007A93) !important; /* NHS Blue to Teal */ position: relative; overflow: hidden; padding-bottom: 80px; border-bottom: 4px solid #B8D430; /* Lime Green accent */ } /* Abstract Network Nodes Background */ .hero-banner-simple.network-hero::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: radial-gradient(circle at 20% 50%, rgba(255,255,255,0.1) 20px, transparent 21%), radial-gradient(circle at 80% 30%, rgba(255,255,255,0.1) 15px, transparent 16%), radial-gradient(circle at 50% 80%, rgba(255,255,255,0.1) 10px, transparent 11%); background-size: 100% 100%; animation: pulseNodes 6s infinite alternate; } @keyframes pulseNodes { 0% { opacity: 0.5; transform: scale(1); } 100% { opacity: 0.8; transform: scale(1.05); } } .hero-banner-simple.network-hero h1 { color: white !important; text-shadow: 0 2px 10px rgba(0,0,0,0.2); position: relative; z-index: 2; } /* --- 2. TERTIARY HUB CARD (The Big One) --- */ .hub-feature-card { background: white; border-radius: 16px; overflow: hidden; box-shadow: 0 15px 40px rgba(0, 94, 184, 0.15); /* NHS Blue Shadow */ border: 1px solid #e0e0e0; margin-bottom: 60px; display: flex; flex-direction: column; transition: transform 0.3s; } .hub-feature-card:hover { transform: translateY(-5px); } .hub-header { background: linear-gradient(90deg, #005EB8, #003087); /* NHS Blue Gradient */ color: white; padding: 30px; display: flex; align-items: center; gap: 20px; } .hub-header h3 { color: white !important; margin: 0; font-size: 24px; } .hub-tag { background: #B8D430; color: #2C4A6E; padding: 5px 12px; border-radius: 20px; font-size: 12px; font-weight: 700; text-transform: uppercase; } .hub-body { padding: 40px; } /* --- 3. SPECIALIST HOSPITAL GRID --- */ .hospital-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 25px; margin-bottom: 60px; } .hospital-card { background: white; border: 1px solid #eee; border-top: 5px solid #007A93; /* Teal Top */ border-radius: 12px; padding: 25px; transition: all 0.3s; box-shadow: 0 5px 15px rgba(0,0,0,0.05); } .hospital-card:hover { transform: translateY(-8px); box-shadow: 0 15px 30px rgba(0, 168, 200, 0.15); border-top-color: #B8D430; /* Change color on hover */ } .hospital-card h4 { color: #2C4A6E; font-size: 18px; margin-bottom: 12px; font-weight: 800; } .hospital-card p { font-size: 15px; margin-bottom: 8px; color: #555; line-height: 1.5; } .hospital-card strong { color: #005EB8; } /* --- 4. LINK HOSPITAL GRID (Compact) --- */ .link-hospital-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 15px; margin-bottom: 60px; } .link-card { background: #F8F9FA; border-left: 4px solid #B8D430; /* Lime Green Left */ border-radius: 8px; padding: 15px 20px; transition: all 0.2s; } .link-card:hover { background: white; box-shadow: 0 5px 15px rgba(0,0,0,0.08); transform: translateX(5px); } .link-card h4 { font-size: 16px; margin-bottom: 4px; color: #2C4A6E; font-weight: 700; } .link-card p { font-size: 13px; margin: 0; color: #666; } /* --- 5. GOVERNANCE INFO GRID (Replaces Accordions) --- */ .governance-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 30px; } .governance-card { background: white; border-radius: 16px; padding: 30px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); border: 1px solid #f0f0f0; position: relative; overflow: hidden; } /* Color Accents for Governance Cards */ .governance-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 6px; } .governance-card.quality::before { background: #007A93; } .governance-card.specs::before { background: #7B4397; } .governance-card.pathways::before { background: #E8368F; } .governance-card.minutes::before { background: #FF9933; } .governance-card h3 { font-size: 22px; color: #2C4A6E; margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center; } .governance-card h3 span { font-size: 28px; } /* Icon */ .governance-card h4 { font-size: 16px; color: #005EB8; margin-bottom: 8px; margin-top: 15px; text-transform: uppercase; letter-spacing: 0.5px; } .governance-card p, .governance-card li { font-size: 15px; color: #555; line-height: 1.7; } .governance-card ul { padding-left: 20px; margin-bottom: 15px; } /* Section Titles */ .section-title { font-size: 28px; color: #2C4A6E; margin-bottom: 30px; display: flex; align-items: center; gap: 15px; margin-top: 20px; } .section-title::before { content: ''; display: block; width: 6px; height: 35px; background: #007A93; border-radius: 10px; } /* Responsive */ @media (max-width: 768px) { .hub-header { flex-direction: column; text-align: center; } .governance-grid { grid-template-columns: 1fr; } } /* --- Governance Icons (SVG Replacement) --- */ .governance-card h3 { display: flex; justify-content: space-between; align-items: center; } .governance-card h3 svg { width: 32px; height: 32px; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none; transition: transform 0.3s ease; } .governance-card:hover h3 svg { transform: scale(1.1) rotate(5deg); } /* Match Icon Colours to Card Accents */ .governance-card.quality h3 svg { stroke: #007A93; } /* Teal */ .governance-card.specs h3 svg { stroke: #7B4397; } /* Purple */ .governance-card.pathways h3 svg { stroke: #E8368F; } /* Pink */ .governance-card.minutes h3 svg { stroke: #FF9933; } /* Orange */ /* ================================================================= END OF NETWORK INFO PAGE STYLES ================================================================= */ /* ================================================================= MISSING STYLES: PARENTS "FAMILY HUB" THEME ================================================================= */ /* --- 1. HERO ANIMATION & OVERLAP --- */ .hero-banner-simple.parents-hero { background: linear-gradient(-45deg, #FF9A9E, #FECFEF, #f6d365, #fda085) !important; background-size: 400% 400% !important; animation: warmGradient 15s ease infinite; position: relative; overflow: visible !important; padding-bottom: 120px; border-bottom: none; margin-bottom: 0; } @keyframes warmGradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .hero-banner-simple.parents-hero h1 { color: white !important; text-shadow: 0 4px 15px rgba(0,0,0,0.15); font-size: 52px; position: relative; z-index: 2; margin-bottom: 10px; } /* --- 2. FLOATING HUB CARDS --- */ @keyframes slideUpFade { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } } .hub-card.teal .btn-hub { background: #E0F7FA; color: #007A93; } .hub-card.pink .btn-hub { background: #FCE4EC; color: #C2185B; } /* --- 3. INFOKID SPOTLIGHT --- */ /* --- 4. MODERN ACCORDIONS --- */ .modern-summary { padding: 25px 30px; cursor: pointer; font-weight: 700; color: #2C4A6E; font-size: 20px; display: flex; justify-content: space-between; align-items: center; list-style: none; transition: background 0.3s; } .modern-summary::-webkit-details-marker { display: none; } .modern-summary:hover { background: #fdfdfd; } .modern-summary::after { content: '+'; font-size: 32px; color: #007A93; font-weight: 300; transition: transform 0.3s; } .modern-content { padding: 0 30px 30px 30px; color: #555; line-height: 1.8; font-size: 16px; border-top: 1px solid #f0f0f0; margin-top: -1px; animation: slideDown 0.4s ease-out; } /* ================================================================= MISSING STYLES: CONTACT PAGE "CONNECTION CENTER" THEME ================================================================= */ /* --- 1. PULSE HERO --- */ .hero-banner-simple.contact-hero { background: linear-gradient(135deg, #0093E9 0%, #80D0C7 100%) !important; position: relative; overflow: hidden; padding-bottom: 80px; border-bottom: 4px solid white; } .hero-banner-simple.contact-hero::before { content: ''; position: absolute; top: 50%; left: 50%; width: 600px; height: 600px; background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%); transform: translate(-50%, -50%) scale(0.5); border-radius: 50%; animation: pulseSignal 4s infinite ease-out; } @keyframes pulseSignal { 0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0.8; } 100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; } } .hero-banner-simple.contact-hero h1 { color: white !important; text-shadow: 0 2px 10px rgba(0,0,0,0.1); position: relative; z-index: 2; } /* --- 2. CONTACT ACTION CARDS --- */ .contact-options-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin-bottom: 50px; } .contact-option-card { background: white; border-radius: 20px; padding: 35px 25px; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,0.05); transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); border: 1px solid #f0f0f0; position: relative; overflow: hidden; } .contact-option-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: #e0e0e0; transition: height 0.3s; } .contact-option-card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0, 168, 200, 0.15); } .contact-option-card:hover::after { height: 10px; } /* Colors */ .contact-option-card.patients::after { background: #E8368F; } .contact-option-card.pros::after { background: #7B4397; } .contact-option-card.general::after { background: #007A93; } .contact-emoji { font-size: 56px; margin-bottom: 20px; display: inline-block; background: #f8f9fa; width: 100px; height: 100px; line-height: 100px; border-radius: 50%; transition: transform 0.4s; } .contact-option-card:hover .contact-emoji { transform: rotate(10deg) scale(1.1); background: #fff; } .contact-option-card h3 { color: #2C4A6E; font-size: 22px; margin-bottom: 12px; font-weight: 800; } .contact-option-card p { color: #666; font-size: 15px; margin-bottom: 20px; line-height: 1.6; } .contact-detail-box { background: #F8F9FA; border-radius: 12px; padding: 15px; margin-bottom: 15px; border: 1px dashed #d0d0d0; } /* --- 3. EMERGENCY ALERT ZONE --- */ .emergency-alert-zone { background: #FFF8E1; border: 2px solid #FFC107; border-radius: 20px; padding: 40px; margin: 60px 0; position: relative; overflow: hidden; } .emergency-alert-zone::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 10px; background: repeating-linear-gradient(45deg, #FFC107, #FFC107 20px, #FFD54F 20px, #FFD54F 40px); } /* --- 4. FEEDBACK & SOCIALS --- */ .feedback-box { background: linear-gradient(135deg, #E8F6F9, white); border-radius: 20px; padding: 40px; text-align: center; border: 1px solid #007A93; margin-bottom: 40px; } .social-connect-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: 700px; margin: 0 auto; } .social-tile { background: white; padding: 25px; border-radius: 16px; text-align: center; box-shadow: 0 5px 20px rgba(0,0,0,0.05); transition: transform 0.2s; border: 1px solid #eee; } .social-tile:hover { transform: translateY(-5px); border-color: #007A93; } /* Responsive */ @media (max-width: 900px) { .hero-banner-simple.parents-hero { padding-bottom: 60px; } .social-connect-grid { grid-template-columns: 1fr; } } /* ========================================= COMPACT EMERGENCY BANNER ========================================= */ .emergency-banner { background: #FFF3CD; /* Soft Yellow Warning */ border: 1px solid #FFE69C; border-left: 5px solid #FFC107; /* Bold Amber Accent */ border-radius: 8px; padding: 16px 20px; margin: 0 auto 40px auto; /* Spacing below intro, above cards */ max-width: 1000px; display: flex; align-items: center; gap: 20px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); } .emergency-icon-circle { width: 40px; height: 40px; background: #FFC107; color: #333; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; } .emergency-content { flex-grow: 1; } .emergency-content h3 { margin: 0 0 4px 0; font-size: 16px; color: #856404; /* Dark Amber Text */ font-weight: 700; } .emergency-content p { margin: 0; font-size: 14px; color: #533f03; } /* Mobile: Stack it */ @media (max-width: 600px) { .emergency-banner { flex-direction: column; text-align: center; gap: 10px; } } /* ================================================================= HOME PAGE - "GATEWAY" THEME ================================================================= */ /* --- 1. GATEWAY HERO (Sophisticated & Calm) --- */ .hero-banner.home-hero { /* Gentle, professional gradient */ background: linear-gradient(135deg, #F0F9FF 0%, #FFFFFF 50%, #E6FFFA 100%) !important; position: relative; overflow: hidden; padding: 100px 20px 140px; /* Extra space for impact */ text-align: center; border-bottom: 1px solid rgba(0, 168, 200, 0.1); } /* Subtle Rotating Background Animation */ .hero-banner.home-hero::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(0, 168, 200, 0.03) 0%, transparent 70%); animation: rotateSlow 60s linear infinite; z-index: 0; pointer-events: none; } @keyframes rotateSlow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .hero-banner.home-hero h1 { color: #2C4A6E; font-size: 56px; /* Larger impact title */ font-weight: 800; margin: 0 auto 20px; max-width: 1000px; position: relative; z-index: 2; letter-spacing: -1px; line-height: 1.1; text-shadow: 0 4px 15px rgba(0,0,0,0.05); } /* Animated Underline for Title */ .hero-banner.home-hero h1::after { content: ''; display: block; width: 80px; height: 6px; background: linear-gradient(90deg, #007A93, #B8D430); margin: 20px auto 0; border-radius: 4px; } .home-subtitle { font-size: 22px; color: #555; max-width: 700px; margin: 0 auto; position: relative; z-index: 2; line-height: 1.6; } /* --- 2. FLOATING MENU GRID (Lifts up over Hero) --- */ .home-menu-section { margin-top: -80px; /* Pulls cards UP into the hero */ position: relative; z-index: 10; padding-bottom: 80px; } /* Enhanced Menu Card Styles */ /* --- 3. NETWORK MAP DASHBOARD --- */ .home-map-section { background: linear-gradient(to bottom, #fff, #f8fafc); padding: 80px 0; border-top: 1px solid #eee; } .map-dashboard { background: white; border-radius: 24px; box-shadow: 0 20px 50px rgba(0,0,0,0.1); overflow: hidden; border: 1px solid #e2e8f0; display: grid; grid-template-columns: 1fr 350px; /* Map takes space, Sidebar fixed width */ } .map-viewer iframe { width: 100%; height: 600px; border: none; } .map-controls { padding: 30px; background: #F8FAFC; border-left: 1px solid #e2e8f0; display: flex; flex-direction: column; gap: 30px; } .control-box { background: white; padding: 20px; border-radius: 16px; box-shadow: 0 4px 10px rgba(0,0,0,0.03); border: 1px solid #eee; } .control-box h3 { font-size: 18px; color: #2C4A6E; margin-bottom: 15px; font-weight: 700; display: flex; align-items: center; gap: 10px; } /* Responsive */ @media (max-width: 1100px) { .map-dashboard { grid-template-columns: 1fr; } } @media (max-width: 600px) { .hero-banner.home-hero h1 { font-size: 36px; } } /* ================================================================= EDUCATION PAGE - "DIGITAL LIBRARY" THEME ================================================================= */ /* --- 1. ACADEMIC HERO --- */ .hero-banner-simple.edu-hero { background: linear-gradient(135deg, #1e3a8a 0%, #0f172a 100%) !important; /* Deep Royal Navy */ position: relative; overflow: hidden; padding-bottom: 80px; border-bottom: 4px solid #B8D430; /* Lime Green Accent */ } /* Background Geometric Pattern */ .hero-banner-simple.edu-hero::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px); background-size: 30px 30px; opacity: 0.5; } /* Floating Knowledge Particles */ .hero-banner-simple.edu-hero::after { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: radial-gradient(circle, rgba(0, 168, 200, 0.1) 0%, transparent 60%); animation: pulseGlow 8s infinite alternate; } @keyframes pulseGlow { 0% { transform: scale(1); opacity: 0.5; } 100% { transform: scale(1.2); opacity: 0.8; } } .hero-banner-simple.edu-hero h1 { color: white !important; text-shadow: 0 4px 10px rgba(0,0,0,0.3); position: relative; z-index: 2; } /* --- 2. LIBRARY SEARCH BAR (Visual) --- */ .library-search-bar { background: white; border-radius: 12px; padding: 20px 30px; margin-bottom: 50px; box-shadow: 0 15px 40px rgba(0,0,0,0.08); display: flex; justify-content: space-between; align-items: center; border: 1px solid #e2e8f0; position: relative; margin-top: -40px; /* Overlaps Hero */ z-index: 10; } .library-stats { display: flex; gap: 30px; } .stat-item { text-align: center; } .stat-number { font-weight: 800; font-size: 20px; color: #2C4A6E; display: block; } .stat-label { font-size: 13px; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px; } /* --- 3. PREMIUM MODULE CARDS --- */ .modules-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 25px; margin-bottom: 60px; } .module-card-premium { background: white; border-radius: 16px; overflow: hidden; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); border: 1px solid #eee; height: 100%; display: flex; flex-direction: column; position: relative; } .module-card-premium:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0,0,0,0.1); border-color: #007A93; } .module-header-strip { height: 6px; background: linear-gradient(90deg, #007A93, #005EB8); } .module-card-premium.coming-soon .module-header-strip { background: #cbd5e1; /* Grey for inactive */ } .module-body { padding: 25px; flex-grow: 1; display: flex; flex-direction: column; } .module-icon-circle { width: 56px; height: 56px; background: #F0F9FF; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #007A93; margin-bottom: 20px; font-size: 24px; } .module-card-premium h4 { font-size: 18px; color: #1e293b; margin-bottom: 10px; font-weight: 700; line-height: 1.4; } .module-tags { margin-bottom: 15px; } .tag-badge { background: #f1f5f9; color: #475569; padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: 600; } .module-desc { color: #64748b; font-size: 14px; line-height: 1.6; margin-bottom: 20px; flex-grow: 1; } .btn-start-module.disabled { background: #e2e8f0; color: #94a3b8; cursor: not-allowed; } /* --- 4. CINEMA VIDEO GRID --- */ .cinema-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; margin-bottom: 60px; } .video-tile { background: white; border-radius: 12px; overflow: hidden; border: 1px solid #e2e8f0; transition: all 0.3s ease; } .video-tile:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0,0,0,0.1); } .video-thumb-container { position: relative; padding-bottom: 56.25%; /* 16:9 */ background: #0f172a; overflow: hidden; } .video-thumb-container img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.8; transition: opacity 0.3s; } .video-tile:hover img { opacity: 0.6; transform: scale(1.05); } .play-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 50px; height: 50px; background: rgba(255,255,255,0.2); border-radius: 50%; backdrop-filter: blur(5px); display: flex; align-items: center; justify-content: center; color: white; font-size: 20px; border: 2px solid white; transition: transform 0.3s; } .video-tile:hover .play-overlay { transform: translate(-50%, -50%) scale(1.2); background: #007A93; border-color: #007A93; } .video-meta-box { padding: 15px; } .video-meta-box h5 { margin: 0 0 5px 0; color: #334155; font-size: 15px; line-height: 1.4; } .video-meta-box span { font-size: 12px; color: #94a3b8; } /* Section Headers */ .edu-section-title { font-size: 28px; color: #2C4A6E; margin-bottom: 10px; display: flex; align-items: center; gap: 12px; } .edu-section-desc { color: #64748b; font-size: 16px; margin-bottom: 30px; max-width: 800px; } /* Responsive */ @media (max-width: 768px) { .library-search-bar { flex-direction: column; gap: 20px; text-align: center; } .library-stats { width: 100%; justify-content: space-around; } } /* ========================================= NURSING RESOURCES PAGE ========================================= */ /* --- 1. NURSING HERO (Warm & Caring) --- */ .hero-banner-simple.nursing-hero { background: linear-gradient(135deg, #be185d 0%, #831843 100%) !important; /* Pink/Magenta */ position: relative; overflow: hidden; padding-bottom: 80px; border-bottom: 4px solid #F472B6; /* Light Pink Accent */ } /* Pulse Heartbeat Pattern */ .hero-banner-simple.nursing-hero::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url("data:image/svg+xml,%3Csvg width='100' height='20' viewBox='0 0 100 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.184 9.816c.357.613.974.613 1.332 0l2.368-4.062a1.541 1.541 0 0 1 2.664 0l3.552 6.094c.357.613.974.613 1.332 0l1.776-3.047a1.541 1.541 0 0 1 2.664 0l.592 1.016' fill='none' stroke='rgba(255,255,255,0.1)' stroke-width='2'/%3E%3C/svg%3E"); background-size: 100px 40px; opacity: 0.3; } .hero-banner-simple.nursing-hero h1 { color: white !important; text-shadow: 0 4px 10px rgba(0,0,0,0.2); position: relative; z-index: 2; } /* --- 2. COMPETENCY GRID --- */ .competency-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 25px; margin-bottom: 50px; } .competency-card { background: white; border-radius: 12px; border-top: 5px solid #be185d; padding: 25px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); transition: transform 0.3s; } .competency-card:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(190, 24, 93, 0.1); } .competency-icon { font-size: 32px; margin-bottom: 15px; background: #fce7f3; width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #be185d; } .competency-card h3 { color: #2C4A6E; margin-bottom: 10px; font-size: 20px; } /* --- 3. PROTOCOL LIST (Clean Rows) --- */ .protocol-list { display: flex; flex-direction: column; gap: 15px; margin-bottom: 50px; } .protocol-row { display: flex; align-items: center; justify-content: space-between; background: white; padding: 20px 25px; border-radius: 10px; border: 1px solid #eee; transition: all 0.2s; } .protocol-row:hover { border-color: #be185d; background: #fff1f2; transform: translateX(5px); } .protocol-info h4 { margin: 0 0 5px 0; color: #334155; font-size: 16px; } .protocol-meta { font-size: 13px; color: #64748b; } /* Mobile Fix */ @media (max-width: 600px) { .protocol-row { flex-direction: column; align-items: flex-start; gap: 15px; } background: linear-gradient(135deg, #15803d 0%, #166534 100%) !important; /* Forest/Green */ position: relative; overflow: hidden; padding-bottom: 80px; border-bottom: 4px solid #4ade80; /* Bright Green Accent */ } /* Organic Leaf/Flow Pattern */ .hero-banner-simple.diet-hero::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M54.627 0l.83.828-1.415 1.415-.828-.828-.828.828-1.415-1.415.828-.828-.828-.828 1.415-1.415.828.828.828-.828 1.415 1.415-.828.828zM22.485 0l.83.828-1.415 1.415-.828-.828-.828.828-1.415-1.415.828-.828-.828-.828 1.415-1.415.828.828.828-.828 1.415 1.415-.828.828zM0 22.485l.828.83-1.415 1.415-.828-.828-.828.828L-3.658 22.485l.828-.828-.828-.828 1.415-1.415.828.828.828-.828 1.415 1.415-.828.828zM0 54.627l.828.83-1.415 1.415-.828-.828-.828.828L-3.658 54.627l.828-.828-.828-.828 1.415-1.415.828.828.828-.828 1.415 1.415-.828.828zM54.627 60l.83.828-1.415 1.415-.828-.828-.828.828-1.415-1.415.828-.828-.828-.828 1.415-1.415.828.828.828-.828 1.415 1.415-.828.828zM22.485 60l.83.828-1.415 1.415-.828-.828-.828.828-1.415-1.415.828-.828-.828-.828 1.415-1.415.828.828.828-.828 1.415 1.415-.828.828z' fill='rgba(255,255,255,0.1)' fill-rule='evenodd'/%3E%3C/svg%3E"); opacity: 0.3; } /* 1. Diet hero Container - This changes the background to Dark Green */ .hero-banner-simple.diet-hero { background: linear-gradient(135deg, #14532d 0%, #4d7c0f 100%) !important; border-bottom: 4px solid #B8D430; /* Keeps the lime branding at the bottom */ position: relative; } /* 2. Diet hero Title - (This is the code you asked about) */ /* 3. Diet hero Text Paragraph - Ensure the description is also white */ .hero-banner-simple.diet-hero p { color: rgba(255, 255, 255, 0.95) !important; position: relative; z-index: 2; } .hero-banner-simple.diet-hero h1 { color: white !important; text-shadow: 0 4px 10px rgba(0,0,0,0.2); position: relative; z-index: 2; } /* --- 2. TOOLKIT GRID (Green Theme) --- */ .toolkit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 25px; margin-bottom: 50px; } .toolkit-card { background: white; border-radius: 12px; border-top: 5px solid #16a34a; padding: 25px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); transition: transform 0.3s; } .toolkit-card:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(22, 163, 74, 0.15); } .toolkit-icon { font-size: 32px; margin-bottom: 15px; background: #dcfce7; width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #16a34a; } .toolkit-card h3 { color: #2C4A6E; margin-bottom: 10px; font-size: 20px; } /* --- 3. RESOURCE LIST (Green Hover) --- */ .diet-resource-row { display: flex; align-items: center; justify-content: space-between; background: white; padding: 20px 25px; border-radius: 10px; border: 1px solid #eee; transition: all 0.2s; margin-bottom: 15px; } .diet-resource-row:hover { border-color: #16a34a; background: #f0fdf4; transform: translateX(5px); } /* Mobile Fix */ @media (max-width: 600px) { .diet-resource-row { flex-direction: column; align-items: flex-start; gap: 15px; } background: linear-gradient(135deg, #7e22ce 0%, #581c87 100%) !important; /* Deep Purple */ position: relative; overflow: hidden; padding-bottom: 80px; border-bottom: 4px solid #d8b4fe; /* Light Purple Accent */ } .hero-banner-simple.pharmacy-hero h1 { color: white !important; text-shadow: 0 4px 10px rgba(0,0,0,0.2); position: relative; z-index: 2; } /* --- 2. FORMULARY GRID (Purple Theme) --- */ .pharmacy-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 25px; margin-bottom: 50px; } .pharm-card { background: white; border-radius: 12px; border-top: 5px solid #9333ea; padding: 25px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); transition: transform 0.3s; } .pharm-card:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(147, 51, 234, 0.15); } .pharm-icon { font-size: 32px; margin-bottom: 15px; background: #f3e8ff; width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #9333ea; } .pharm-card h3 { color: #2C4A6E; margin-bottom: 10px; font-size: 20px; } /* --- 3. DRUG ALERT ROW (Alert Style) --- */ .drug-alert-row { display: flex; align-items: center; justify-content: space-between; background: white; padding: 20px 25px; border-radius: 10px; border: 1px solid #eee; border-left: 4px solid #9333ea; transition: all 0.2s; margin-bottom: 15px; } .drug-alert-row:hover { background: #faf5ff; transform: translateX(5px); } /* Calculator Badge */ .calc-badge { background: #e9d5ff; color: #6b21a8; padding: 4px 8px; border-radius: 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; margin-left: 10px; } /* ========================================= RESEARCH RESOURCES PAGE ========================================= */ /* --- 1. RESEARCH HERO (Innovation Orange) --- */ .hero-banner-simple.research-hero { background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%) !important; /* Burnt Orange */ position: relative; overflow: hidden; padding-bottom: 80px; border-bottom: 4px solid #fdba74; /* Light Orange Accent */ } .hero-banner-simple.research-hero h1 { color: white !important; text-shadow: 0 4px 10px rgba(0,0,0,0.2); position: relative; z-index: 2; } /* --- 2. ACTIVE STUDIES GRID --- */ .research-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px; margin-bottom: 50px; } .study-card { background: white; border-radius: 12px; border: 1px solid #fed7aa; padding: 0; overflow: hidden; transition: transform 0.3s; display: flex; flex-direction: column; } .study-card:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(234, 88, 12, 0.15); } .study-header { background: #fff7ed; padding: 20px 25px; border-bottom: 1px solid #fed7aa; display: flex; justify-content: space-between; align-items: center; } .study-status { font-size: 11px; font-weight: 700; text-transform: uppercase; padding: 4px 10px; border-radius: 20px; } .study-status.recruiting { background: #dcfce7; color: #166534; } .study-status.closed { background: #f1f5f9; color: #64748b; } .study-body { padding: 25px; flex-grow: 1; } .study-card h3 { margin: 0 0 10px 0; color: #9a3412; font-size: 20px; } .study-meta { display: flex; gap: 15px; margin-bottom: 15px; font-size: 13px; color: #64748b; } /* --- 3. PUBLICATION LIST --- */ .pub-row { background: white; padding: 20px; border-radius: 8px; border-left: 4px solid #ea580c; margin-bottom: 15px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); } .pub-row h4 { margin: 0 0 5px 0; color: #431407; font-size: 16px; } .pub-row p { margin: 0; font-size: 14px; color: #666; font-style: italic; } EVENTS PAGE - "PROFESSIONAL CALENDAR" THEME ================================================================= */ /* --- EVENTS HERO SECTION --- */ /* 1. Darker Gradient Background & Container Setup */ .hero-banner-simple.events-hero { /* Teal to Navy Gradient for high contrast */ background: linear-gradient(135deg, #007A93 0%, #2C4A6E 100%) !important; position: relative; overflow: hidden; padding-bottom: 80px; border-bottom: 4px solid #93c5fd; /* Light Blue Accent */ } /* 2. Text Styling for Maximum Readability */ .hero-banner-simple.events-hero h1, .hero-banner-simple.events-hero p { color: #ffffff !important; /* Force pure white text */ text-shadow: 0 2px 4px rgba(0,0,0,0.3); /* Shadow lifts text off the background */ position: relative; z-index: 2; /* Ensures text sits on top of all patterns */ } /* Specific H1 tweak for extra punch */ .hero-banner-simple.events-hero h1 { text-shadow: 0 4px 10px rgba(0,0,0,0.3); } /* 3. Fade the standard logo pattern so it doesn't distract */ .hero-banner-simple.events-hero .logo-pattern { opacity: 0.1; } /* 4. Abstract Light Effects (Subtle shine) */ .hero-banner-simple.events-hero::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: radial-gradient(circle at 10% 20%, rgba(255,255,255,0.1) 0%, transparent 20%), radial-gradient(circle at 90% 80%, rgba(255,255,255,0.1) 0%, transparent 20%); opacity: 0.6; pointer-events: none; } } /* --- 2. ENHANCED EVENT CARD --- */ /* (Builds on existing .event-card in style.css but adds polish) */ .event-card { border: 1px solid #e2e8f0; box-shadow: 0 4px 6px rgba(0,0,0,0.05); } .event-card:hover { border-color: #3b82f6; transform: translateY(-5px); box-shadow: 0 15px 30px rgba(37, 99, 235, 0.15); } .event-date-box { background: linear-gradient(to bottom, #3b82f6, #2563eb) !important; box-shadow: 0 4px 10px rgba(37, 99, 235, 0.3); } .event-meta { background: #f8fafc; padding: 10px 15px; border-radius: 8px; border: 1px solid #f1f5f9; } /* --- 3. REGISTRATION STEPS (Visual Flow) --- */ .registration-steps { counter-reset: step; } .step-item { position: relative; background: white; padding: 20px; border-radius: 12px; border: 1px solid #e2e8f0; box-shadow: 0 2px 5px rgba(0,0,0,0.05); transition: transform 0.3s; } .step-item:hover { transform: translateY(-5px); border-color: #3b82f6; } .step-number { background: #3b82f6 !important; box-shadow: 0 4px 10px rgba(59, 130, 246, 0.3); } /* --- 4. ANNUAL CALENDAR GRID --- */ /* Responsive */ @media (max-width: 768px) { .event-card { flex-direction: column; } .event-date-box { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px; } .event-day { font-size: 24px; margin: 0; } .event-month { margin: 0; } .event-year { margin: 0; } } /* =================================== SEARCH BUTTON STYLES - ADD TO STYLE.CSS =================================== */ /** * Search Button Component * * Provides accessible, interactive search button styling * for the navigation menu. Replaces emoji-based search icon * with proper SVG button for better accessibility. * * Usage: .search-button class on