/** * Holo Healing - Palette System * * To switch palettes, add the palette class to or : * - Default (no class): Palette 1 - Soft pastels * - .palette-2: Navy & Gold * - Add more palettes as needed */ /* ======================================== PALETTE 1: Soft Pastels (Default) ======================================== */ :root { /* Raw palette colors */ --p1-cherry-blossom: #edafb8; --p1-peach: #f8cbb5; --p1-dust-grey: #dedbd2; --p1-ash-grey: #b0c4b1; --p1-iron-grey: #4a5759; --p1-charcoal: #2d3436; /* Default to palette 1 */ --holo-accent: var(--p1-cherry-blossom); --holo-accent-hover: #e09aa4; --holo-neutral: var(--p1-dust-grey); --holo-dark: var(--p1-charcoal); --holo-dark-hover: #1a1f20; --holo-text: var(--p1-charcoal); --holo-text-light: #fff; --holo-text-muted: #6c757d; /* Mind Work */ --holo-mind-work: var(--p1-peach); --holo-mind-work-dark: #e8a88a; --holo-mind-work-light: #fdf0e8; --holo-mind-work-text: var(--p1-charcoal); --holo-mind-work-bg: linear-gradient(135deg, var(--holo-mind-work-light) 0%, var(--holo-mind-work) 100%); /* Body Work */ --holo-body-work: var(--p1-ash-grey); --holo-body-work-dark: #8fa990; --holo-body-work-light: #dce6dc; --holo-body-work-text: var(--p1-charcoal); --holo-body-work-bg: linear-gradient(135deg, var(--holo-body-work-light) 0%, var(--holo-body-work) 100%); /* Navbar */ --holo-navbar-bg: rgba(45, 52, 54, 0.75); --holo-navbar-scrolled-bg: rgba(255, 255, 255, 0.95); --holo-navbar-border: var(--p1-cherry-blossom); /* Hero overlay */ --holo-hero-overlay: rgba(0, 0, 0, 0.5); /* Footer */ --holo-footer-bg: var(--p1-charcoal); --holo-footer-btn-bg: var(--p1-cherry-blossom); --holo-footer-btn-hover: #e09aa4; } /* ======================================== PALETTE 2: Navy & Gold ======================================== */ .palette-2 { /* Raw palette colors */ --p2-ink-black: #000814; --p2-prussian-blue: #001d3d; --p2-regal-navy: #003566; --p2-school-bus-yellow: #ffc300; --p2-gold: #ffd60a; /* Override semantic variables */ --holo-accent: var(--p2-gold); --holo-accent-hover: var(--p2-school-bus-yellow); --holo-neutral: #f8f9fa; --holo-dark: var(--p2-ink-black); --holo-dark-hover: var(--p2-prussian-blue); --holo-text: var(--p2-ink-black); --holo-text-light: #fff; --holo-text-muted: #6c757d; /* Mind Work - White bg with gold accents */ --holo-mind-work: var(--p2-gold); --holo-mind-work-dark: var(--p2-school-bus-yellow); --holo-mind-work-light: #fff; --holo-mind-work-text: var(--p2-ink-black); --holo-mind-work-bg: #fff; /* Body Work - Navy bg */ --holo-body-work: var(--p2-regal-navy); --holo-body-work-dark: var(--p2-prussian-blue); --holo-body-work-light: #004080; --holo-body-work-text: #fff; --holo-body-work-bg: linear-gradient(135deg, var(--p2-prussian-blue) 0%, var(--p2-regal-navy) 100%); /* Navbar */ --holo-navbar-bg: rgba(0, 8, 20, 0.85); --holo-navbar-scrolled-bg: rgba(255, 255, 255, 0.95); --holo-navbar-border: var(--p2-gold); /* Hero overlay */ --holo-hero-overlay: rgba(0, 29, 61, 0.6); /* Footer */ --holo-footer-bg: var(--p2-ink-black); --holo-footer-btn-bg: var(--p2-gold); --holo-footer-btn-hover: var(--p2-school-bus-yellow); } /* ======================================== GLOBAL TYPOGRAPHY & COLOURS ======================================== */ body { color: var(--holo-text); } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--holo-text); } h2, h3, .h2, .h3 { font-family: 'Montserrat', sans-serif; } /* ======================================== NAVBAR STYLES ======================================== */ .navbar-default { background-color: var(--holo-navbar-bg) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .navbar-default.navbar-dark { background-color: var(--holo-navbar-bg) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .navbar .border-primary, .navbar.border-primary, .border-top.border-primary { border-color: var(--holo-navbar-border) !important; } .navbar-brand { color: var(--holo-text-light) !important; font-family: 'Montserrat', sans-serif; } .navbar-brand svg { fill: var(--holo-accent); } .navbar-brand:hover svg { fill: var(--holo-accent-hover); } /* Logo toggle: show light logo by default, hide dark logo */ .navbar-brand .logo-light { display: inline-block; } .navbar-brand .logo-dark { display: none; } /* Scrolled navbar state */ .navbar-default.navbar-default-collapse { background-color: var(--holo-navbar-scrolled-bg) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .navbar-default.navbar-default-collapse .navbar-brand { color: var(--holo-text) !important; } .navbar-default.navbar-default-collapse .navbar-brand svg { fill: var(--holo-accent); } /* Logo toggle on scroll: show dark logo, hide light logo */ .navbar-default.navbar-default-collapse .navbar-brand .logo-light { display: none; } .navbar-default.navbar-default-collapse .navbar-brand .logo-dark { display: inline-block; } .nav-link { font-family: 'Montserrat', sans-serif; font-size: 1.1rem; font-weight: 300; } .navbar-default.navbar-default-collapse .nav-link { color: var(--holo-text) !important; } /* ======================================== MEGA DROPDOWN STYLES ======================================== */ .dropdown-mega { position: static; } .dropdown-mega .dropdown-menu-mega { width: 100%; left: 0; right: 0; padding: 0; border: none; border-radius: 0; overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,0.15); margin-top: 0; } .dropdown-mega .dropdown-menu-mega .row { min-height: 300px; display: flex; flex-direction: row; } .dropdown-mega .dropdown-menu-mega .col-lg-6 { display: flex; width: 50%; flex: 0 0 50%; } .mega-section { padding: 3rem 4rem; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; text-align: left; background: transparent; color: var(--holo-text); } .mega-mind { background: transparent; color: var(--holo-text); } .mega-body { background: transparent; color: var(--holo-text); } .mega-title { font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 1.25rem; margin-bottom: 0.75rem; } .mega-desc { font-size: 0.9rem; line-height: 1.5; opacity: 0.9; margin-bottom: 1rem; } .mega-list { list-style: none; padding: 0; margin: 0 0 1.25rem 0; font-size: 0.85rem; } .mega-list li { margin-bottom: 0.4rem; opacity: 0.85; } .mega-btn { background: transparent; border: 1px solid var(--holo-text); color: var(--holo-text); } .mega-btn:hover { background: var(--holo-accent); border-color: var(--holo-accent); color: var(--holo-dark); } @media (max-width: 991px) { .dropdown-mega .dropdown-menu-mega { min-width: 100%; } .mega-section { padding: 1.5rem; } } /* ======================================== BUTTON STYLES ======================================== */ .btn { font-family: 'Montserrat', sans-serif; } .btn-primary { background-color: var(--holo-dark); border-color: var(--holo-dark); color: var(--holo-text-light); } .btn-primary:hover, .btn-primary:focus, .btn-primary:active { background-color: var(--holo-dark-hover); border-color: var(--holo-dark-hover); color: var(--holo-text-light); } .btn-outline-primary { border-color: var(--holo-dark); color: var(--holo-dark); } .btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active { background-color: var(--holo-dark); border-color: var(--holo-dark); color: var(--holo-text-light); } .btn-secondary { background-color: var(--holo-body-work); border-color: var(--holo-body-work); color: var(--holo-body-work-text); } .btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active { background-color: var(--holo-body-work-dark); border-color: var(--holo-body-work-dark); color: var(--holo-body-work-text); } .btn-accent { background-color: var(--holo-accent); border-color: var(--holo-accent); color: var(--holo-text); } .btn-accent:hover, .btn-accent:focus, .btn-accent:active { background-color: var(--holo-accent-hover); border-color: var(--holo-accent-hover); color: var(--holo-text); } /* ======================================== BACKGROUND UTILITIES ======================================== */ .bg-primary { background-color: var(--holo-dark) !important; } .bg-secondary { background-color: var(--holo-body-work) !important; } .bg-light { background-color: var(--holo-neutral) !important; } .bg-dark { background-color: var(--holo-dark) !important; } /* ======================================== TEXT UTILITIES ======================================== */ .text-primary { color: var(--holo-text) !important; } .text-secondary { color: var(--holo-text) !important; } .text-accent { color: var(--holo-accent) !important; } /* ======================================== MIND WORK THEME ======================================== */ .bg-mind-work { background-color: var(--holo-mind-work) !important; } .bg-mind-work-light { background-color: var(--holo-mind-work-light) !important; } .bg-gradient-mind-work { background: var(--holo-mind-work-bg); } .text-mind-work { color: var(--holo-mind-work-dark) !important; } .border-mind-work { border-color: var(--holo-mind-work) !important; } /* Mind Work highlight underline (for palette-2) */ .highlight-mind-work { background: linear-gradient(transparent 60%, var(--holo-mind-work) 60%); padding: 0 0.25em; } /* Highlight word styling */ .highlight-word { font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 1.3em; } .btn-mind-work { background-color: var(--holo-dark); border-color: var(--holo-dark); color: var(--holo-text-light); } .btn-mind-work:hover { background-color: var(--holo-dark-hover); border-color: var(--holo-dark-hover); color: var(--holo-text-light); } .btn-outline-mind-work { border-color: var(--holo-mind-work-text); color: var(--holo-mind-work-text); background: transparent; } .btn-outline-mind-work:hover { background-color: var(--holo-dark); border-color: var(--holo-dark); color: var(--holo-text-light); } /* Mind Work badges */ .badge-mind-work { background-color: var(--holo-mind-work); color: var(--holo-mind-work-text); } /* ======================================== BODY WORK THEME ======================================== */ .bg-body-work { background-color: var(--holo-body-work); } .bg-body-work-light { background-color: var(--holo-body-work-light) !important; } .bg-gradient-body-work { background: var(--holo-body-work-bg) !important; } .text-body-work { color: var(--holo-body-work-dark) !important; } .border-body-work { border-color: var(--holo-body-work) !important; } .btn-body-work { background-color: var(--holo-dark); border-color: var(--holo-dark); color: var(--holo-text-light); } .btn-body-work:hover { background-color: var(--holo-dark-hover); border-color: var(--holo-dark-hover); color: var(--holo-text-light); } .btn-outline-body-work { border-color: var(--holo-body-work-text); color: var(--holo-body-work-text); background: transparent; } .btn-outline-body-work:hover { background-color: var(--holo-body-work-text); border-color: var(--holo-body-work-text); color: var(--holo-body-work); } /* Body Work badges */ .badge-body-work { background-color: var(--holo-body-work); color: var(--holo-body-work-text); } /* ======================================== PATHWAYS SECTION (index.html) ======================================== */ /* Mind Path - Left Side */ .pathway-mind { background: var(--holo-mind-work-bg); color: var(--holo-mind-work-text); } .pathway-mind .pathway-title, .pathway-mind .pathway-subtitle, .pathway-mind .pathway-list li { color: var(--holo-mind-work-text); } .pathway-mind .pathway-icon { color: var(--holo-mind-work-text); } .pathway-mind .pathway-bullet { color: var(--holo-accent); } .pathway-mind .pathway-btn { border-color: var(--holo-mind-work-text); color: var(--holo-mind-work-text); background: transparent; } .pathway-mind .pathway-btn:hover { background-color: var(--holo-dark); border-color: var(--holo-dark); color: var(--holo-text-light); } /* Body Path - Right Side */ .pathway-body { color: var(--holo-body-work-text); } .pathway-body .pathway-title, .pathway-body .pathway-subtitle, .pathway-body .pathway-list li { color: var(--holo-body-work-text); } .pathway-body .pathway-icon { color: var(--holo-body-work-text); } .pathway-body .pathway-bullet { color: var(--holo-accent); } .pathway-body .pathway-btn { border-color: var(--holo-body-work-text); color: var(--holo-body-work-text); background: transparent; } .pathway-body .pathway-btn:hover { background-color: var(--holo-body-work-text); border-color: var(--holo-body-work-text); color: var(--holo-body-work); } /* SVG Divider colours */ .pathway-divider path:first-child { fill: var(--holo-mind-work-light); } .pathway-divider path:last-child { fill: var(--holo-body-work); } /* Integrative Banner */ .integrative-banner { background-color: var(--holo-neutral); border-color: var(--holo-dark) !important; } /* ======================================== CARDS & UI COMPONENTS ======================================== */ .card { border-color: var(--holo-neutral); } .card .border-primary { border-color: var(--holo-dark) !important; } /* Profile cards */ .profile-card { background: linear-gradient(135deg, var(--holo-neutral) 0%, #f0ede8 100%); } .profile-icon.bg-primary { background-color: var(--holo-dark) !important; } /* Value cards */ .value-card .icon-circle.bg-primary.bg-opacity-10 { background-color: rgba(237, 175, 184, 0.3) !important; } .value-card .icon-circle.text-primary { color: var(--holo-text) !important; } /* ======================================== BADGES & LABELS ======================================== */ .badge.bg-primary { background-color: var(--holo-dark) !important; } .badge.bg-secondary { background-color: var(--holo-body-work) !important; color: var(--holo-body-work-text) !important; } .credential-badge { background: rgba(237, 175, 184, 0.3) !important; color: var(--holo-text) !important; } .credential-badge i { color: var(--holo-text) !important; } .community-badge { background: var(--holo-neutral) !important; } .community-badge i { color: var(--holo-text) !important; } /* ======================================== FOOTER ======================================== */ .footer.bg-dark { background-color: var(--holo-footer-bg) !important; } .footer h4.text-white { color: var(--holo-text-light) !important; } .footer .btn-primary { background-color: var(--holo-footer-btn-bg); border-color: var(--holo-footer-btn-bg); color: var(--holo-text); } .footer .btn-primary:hover { background-color: var(--holo-footer-btn-hover); border-color: var(--holo-footer-btn-hover); color: var(--holo-text); } /* ======================================== FORMS & INPUTS ======================================== */ .form-control:focus, .form-select:focus { border-color: var(--holo-accent); box-shadow: 0 0 0 0.25rem rgba(255, 195, 0, 0.25); } /* ======================================== LINKS ======================================== */ a { color: var(--holo-text); } a:hover { color: var(--holo-dark-hover); } /* ======================================== MISC OVERRIDES ======================================== */ /* Pull quote */ .pull-quote { color: var(--holo-text); border-left-color: var(--holo-accent); } /* About image wrapper decorative element */ .about-img-wrapper::before { background: linear-gradient(135deg, var(--holo-accent) 0%, var(--holo-body-work) 100%); } /* Check icons */ .bi-check-circle-fill.text-primary, .bi-check-lg.text-primary { color: var(--holo-text) !important; } /* Info icons */ .bi-info-circle.text-primary { color: var(--holo-text) !important; } /* Header & Hero button override */ .header-btn .btn-primary, section.bg-cover .btn-primary { background-color: var(--holo-accent); border-color: var(--holo-accent); color: var(--holo-text); } .header-btn .btn-primary:hover, section.bg-cover .btn-primary:hover { background-color: var(--holo-accent-hover); border-color: var(--holo-accent-hover); color: var(--holo-text); } /* CTA sections with secondary background */ section.bg-secondary { background-color: var(--holo-dark) !important; } section.bg-secondary h2.text-white, section.bg-secondary .text-white { color: var(--holo-text-light) !important; } section.bg-secondary .btn-light { background-color: var(--holo-accent); border-color: var(--holo-accent); color: var(--holo-text); } section.bg-secondary .btn-light:hover { background-color: var(--holo-accent-hover); border-color: var(--holo-accent-hover); } section.bg-secondary .btn-outline-light { border-color: var(--holo-text-light); color: var(--holo-text-light); } section.bg-secondary .btn-outline-light:hover { background-color: var(--holo-text-light); color: var(--holo-text); } /* Border top for contact section */ .border-top.border-bottom.border-secondary { border-color: var(--holo-body-work) !important; } /* ======================================== ACCESSIBILITY ENHANCEMENTS ======================================== */ /* Ensure sufficient contrast for text on coloured backgrounds */ .bg-mind-work, .bg-mind-work-light, .pathway-mind { color: var(--holo-mind-work-text); } .bg-body-work, .bg-body-work-light, .pathway-body { color: var(--holo-body-work-text); } /* Focus states for accessibility */ .btn:focus-visible, a:focus-visible { outline: 2px solid var(--holo-accent); outline-offset: 2px; } /* ======================================== NAVBAR SCROLL (SUB-NAV) STYLES ======================================== */ /* Position sticky sub-nav below main navbar */ .navbar-scroll.sticky-top { top: 90px; /* Offset to sit below the main navbar */ z-index: 1020; /* Below main navbar (1030) but above content */ } .navbar-scroll ul li a.active { color: var(--holo-text) !important; } /* ======================================== APPROACH CARDS BORDER COLOURS ======================================== */ .approach-card.border-top.border-primary { border-color: var(--holo-dark) !important; } .approach-card.border-top.border-secondary { border-color: var(--holo-body-work) !important; } .approach-card.border-top.border-warning { border-color: var(--holo-accent) !important; } .approach-card.border-top.border-success { border-color: var(--holo-body-work-dark) !important; } /* Badge colours for approach cards */ .badge.bg-warning.bg-opacity-10 { background-color: rgba(255, 214, 10, 0.3) !important; } .badge.text-warning { color: var(--holo-text) !important; } .badge.bg-success.bg-opacity-10 { background-color: rgba(0, 53, 102, 0.2) !important; } .badge.text-success { color: var(--holo-text) !important; } /* ======================================== PALETTE 2 SPECIFIC OVERRIDES ======================================== */ .palette-2 .pathway-mind .pathway-bullet { color: var(--holo-mind-work); } .palette-2 .pathway-body .pathway-bullet { color: var(--holo-accent); } .palette-2 .pathway-body .pathway-btn:hover { background-color: var(--holo-accent); border-color: var(--holo-accent); color: var(--holo-dark); } .palette-2 .badge-mind-work { background-color: var(--holo-mind-work); color: var(--holo-dark); } .palette-2 .badge-body-work { background-color: var(--holo-accent); color: var(--holo-dark); } .palette-2 .credential-badge { background: rgba(255, 214, 10, 0.3) !important; } .palette-2 .value-card .icon-circle.bg-primary.bg-opacity-10 { background-color: rgba(255, 214, 10, 0.3) !important; } /* Palette 2: Form focus */ .palette-2 .form-control:focus, .palette-2 .form-select:focus { border-color: var(--holo-accent); box-shadow: 0 0 0 0.25rem rgba(255, 214, 10, 0.25); }