@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Inter:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700;800&family=Söhne&display=swap'); @import url('https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css'); @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css'); /* ========================================================================== FLM Multi-Theme Design System Three brand-faithful identities sharing one CSS variable contract, so every component rule below reads from var(--*) and the active theme just redefines the tokens on : theme-apple Apple.com — light, glassy, SF system font, electric blue, generous radii, pill buttons, airy shadows. theme-openai OpenAI.com — light, Inter/Söhne, emerald accent, near-square corners, flat borders, restrained shadows. theme-claude Claude.ai — warm cream paper, Lora serif, coral accent, soft large radii, cozy editorial feel. ========================================================================== */ /* -------------------------------------------------------------------------- Token contract + Apple defaults (used before class resolves) -------------------------------------------------------------------------- */ :root { --font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --heading-font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --heading-weight: 700; --heading-tracking: -0.022em; --body-tracking: -0.01em; --radius-pill: 980px; --primary: #0071e3; --primary-dark: #0058b0; --secondary: #86868b; --accent: #bf4800; --dark: #1d1d1f; --heading-color: #1d1d1f; --light: #f5f5f7; --white: #ffffff; --border: 1px solid #d2d2d7; --border-sm: 1px solid #e5e5ea; --border-width: 1px; --radius: 18px; --radius-sm: 12px; --shadow: 0 8px 24px rgba(0, 0, 0, 0.04); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.02); --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.08); --shadow-hover: 0 12px 30px rgba(0, 0, 0, 0.08); --transform-hover: translateY(-2px); --btn-border: 1px solid transparent; --btn-radius: var(--radius-pill); --btn-shadow: none; --btn-active-transform: scale(0.98); --btn-active-shadow: none; --btn-primary-text: #ffffff; --btn-hover-shadow: none; --input-bg: #ffffff; --input-bg-focus: #ffffff; --input-border: 1px solid #d2d2d7; --input-focus-border: #0071e3; --input-focus-shadow: 0 0 0 4px rgba(0, 113, 227, 0.15); --input-focus-transform: none; --navbar-bg: rgba(255, 255, 255, 0.72); --navbar-blur: saturate(180%) blur(20px); --navbar-border: 1px solid rgba(0, 0, 0, 0.06); --navbar-shadow: none; --nav-link-color: #1d1d1f; --nav-link-hover-bg: rgba(0, 0, 0, 0.04); --nav-link-hover-color: #0071e3; --nav-link-hover-border: 1px solid transparent; --nav-link-hover-shadow: none; --nav-link-hover-transform: none; --nav-link-radius: var(--radius-pill); --footer-bg: #1d1d1f; --footer-border: 1px solid rgba(255, 255, 255, 0.06); --footer-text: #f5f5f7; --footer-muted: #86868b; --selection-bg: rgba(0, 113, 227, 0.18); } /* ========================================================================== THEME 1 — APPLE (light · glassy · SF · electric blue · pill) ========================================================================== */ body.theme-apple { --font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --heading-font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --heading-weight: 700; --heading-tracking: -0.022em; --body-tracking: -0.01em; --primary: #0071e3; --primary-dark: #0058b0; --secondary: #86868b; --accent: #bf4800; --dark: #1d1d1f; --heading-color: #1d1d1f; --light: #f5f5f7; --white: #ffffff; --border: 1px solid #d2d2d7; --border-sm: 1px solid #e5e5ea; --radius: 18px; --radius-sm: 12px; --shadow: 0 8px 24px rgba(0, 0, 0, 0.04); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.02); --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.08); --shadow-hover: 0 12px 30px rgba(0, 0, 0, 0.08); --transform-hover: translateY(-2px); --btn-border: 1px solid transparent; --btn-radius: var(--radius-pill); --btn-shadow: none; --btn-hover-shadow: none; --btn-active-transform: scale(0.98); --btn-active-shadow: none; --btn-primary-text: #ffffff; --input-bg: #ffffff; --input-bg-focus: #ffffff; --input-border: 1px solid #d2d2d7; --input-focus-border: #0071e3; --input-focus-shadow: 0 0 0 4px rgba(0, 113, 227, 0.15); --navbar-bg: rgba(255, 255, 255, 0.72); --navbar-blur: saturate(180%) blur(20px); --navbar-border: 1px solid rgba(0, 0, 0, 0.06); --navbar-shadow: none; --nav-link-color: #1d1d1f; --nav-link-hover-bg: rgba(0, 0, 0, 0.05); --nav-link-hover-color: #0071e3; --nav-link-hover-border: 1px solid transparent; --nav-link-hover-shadow: none; --nav-link-hover-transform: none; --nav-link-radius: var(--radius-pill); --footer-bg: #1d1d1f; --footer-border: 1px solid rgba(255, 255, 255, 0.06); --footer-text: #f5f5f7; --footer-muted: #86868b; --selection-bg: rgba(0, 113, 227, 0.18); } /* ========================================================================== THEME 2 — OPENAI (light · Inter/Söhne · emerald · near-square · flat) ========================================================================== */ body.theme-openai { --font-family: "Söhne", 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --heading-font-family: "Söhne", 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --heading-weight: 600; --heading-tracking: -0.018em; --body-tracking: -0.006em; --primary: #10a37f; /* OpenAI emerald */ --primary-dark: #0d8a6c; --secondary: #565869; /* slate gray */ --accent: #6e6e80; --dark: #202123; /* near-black ink */ --heading-color: #0d0d0d; --light: #ffffff; /* clean white page */ --white: #ffffff; --border: 1px solid #e3e3e8; --border-sm: 1px solid #ececf1; --radius: 8px; /* near-square */ --radius-sm: 6px; --shadow: 0 1px 2px rgba(0,0,0,0.04), 0 1px 6px rgba(0,0,0,0.02); --shadow-sm: 0 1px 2px rgba(0,0,0,0.03); --shadow-lg: 0 8px 24px rgba(0,0,0,0.06); --shadow-hover: 0 2px 8px rgba(0,0,0,0.06); --transform-hover: translateY(-1px); --btn-border: 1px solid transparent; --btn-radius: 6px; --btn-shadow: none; --btn-hover-shadow: none; --btn-active-transform: scale(0.985); --btn-active-shadow: none; --btn-primary-text: #ffffff; --input-bg: #ffffff; --input-bg-focus: #ffffff; --input-border: 1px solid #d9d9e3; --input-focus-border: #10a37f; --input-focus-shadow: 0 0 0 3px rgba(16, 163, 127, 0.18); --navbar-bg: rgba(255, 255, 255, 0.9); --navbar-blur: saturate(140%) blur(10px); --navbar-border: 1px solid #ececf1; --navbar-shadow: none; --nav-link-color: #353740; --nav-link-hover-bg: #f7f7f8; --nav-link-hover-color: #0d0d0d; --nav-link-hover-border: 1px solid transparent; --nav-link-hover-shadow: none; --nav-link-hover-transform: none; --nav-link-radius: 6px; --footer-bg: #0d0d0d; --footer-border: 1px solid #1f1f1f; --footer-text: #ececf1; --footer-muted: #8e8ea0; --selection-bg: rgba(16, 163, 127, 0.2); } /* ========================================================================== THEME 3 — CLAUDE (warm cream · Lora serif · coral · soft rounded · cozy) ========================================================================== */ body.theme-claude { --font-family: 'Lora', 'Georgia', 'Times New Roman', serif; --heading-font-family: 'Lora', 'Georgia', serif; --heading-weight: 600; --heading-tracking: -0.012em; --body-tracking: 0; --primary: #d97757; /* Claude coral */ --primary-dark: #c2603f; --secondary: #b3a394; /* soft sand */ --accent: #d97757; --dark: #3d3929; /* warm ink */ --heading-color: #1f1e1b; --light: #f7f4ee; /* warm cream paper */ --white: #fffdf9; /* slightly warm card */ --border: 1px solid #e7e0d4; --border-sm: 1px solid #efe9df; --radius: 16px; --radius-sm: 10px; --shadow: 0 8px 24px rgba(120, 90, 50, 0.05); --shadow-sm: 0 3px 10px rgba(120, 90, 50, 0.03); --shadow-lg: 0 18px 40px rgba(120, 90, 50, 0.08); --shadow-hover: 0 14px 36px rgba(217, 119, 87, 0.10); --transform-hover: translateY(-3px); --btn-border: 1px solid transparent; --btn-radius: 10px; --btn-shadow: none; --btn-hover-shadow: none; --btn-active-transform: scale(0.97); --btn-active-shadow: none; --btn-primary-text: #fffdf9; --input-bg: #fffdf9; --input-bg-focus: #ffffff; --input-border: 1px solid #e0d8ca; --input-focus-border: #d97757; --input-focus-shadow: 0 0 0 3px rgba(217, 119, 87, 0.18); --navbar-bg: rgba(247, 244, 238, 0.82); --navbar-blur: saturate(140%) blur(16px); --navbar-border: 1px solid #e7e0d4; --navbar-shadow: none; --nav-link-color: #56503f; --nav-link-hover-bg: #efe7d8; --nav-link-hover-color: #d97757; --nav-link-hover-border: 1px solid transparent; --nav-link-hover-shadow: none; --nav-link-hover-transform: translateY(-1px); --nav-link-radius: 10px; --footer-bg: #efe7d8; --footer-border: 1px solid #e7e0d4; --footer-text: #1f1e1b; --footer-muted: #8a7f6d; --selection-bg: rgba(217, 119, 87, 0.22); } /* ========================================================================== THEME 4 — POPPIO (colorful · Quicksand/Fredoka · pastel · bubbly · dashed) ========================================================================== */ body.theme-poppio { --font-family: 'Quicksand', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif; --heading-font-family: 'Fredoka', 'Plus Jakarta Sans', sans-serif; --heading-weight: 700; --heading-tracking: -0.01em; --body-tracking: 0; --primary: #f18260; /* Poppio playful orange/salmon */ --primary-dark: #d56948; --secondary: #5caad2; /* Poppio light blue */ --accent: #f6b352; /* Poppio yellow */ --dark: #2c6587; /* Poppio deep slate blue */ --heading-color: #2c6587; --light: #fff5f3; /* Soft light pastel peach/pink page */ --white: #ffffff; --border: 2px dashed #5caad2; /* Cute dashed borders! */ --border-sm: 2px dashed #fbe6e3; --border-width: 2px; --radius: 28px; /* Highly rounded bubbly cards */ --radius-sm: 18px; --shadow: 0 10px 30px rgba(44, 101, 135, 0.05); --shadow-sm: 0 4px 12px rgba(44, 101, 135, 0.02); --shadow-lg: 0 20px 45px rgba(44, 101, 135, 0.08); --shadow-hover: 0 15px 35px rgba(241, 130, 96, 0.12); --transform-hover: translateY(-4px); --btn-border: 2px solid transparent; --btn-radius: 980px; /* Pill buttons */ --btn-shadow: 0 5px 15px rgba(241, 130, 96, 0.15); --btn-hover-shadow: 0 8px 25px rgba(241, 130, 96, 0.25); --btn-active-transform: scale(0.96); --btn-active-shadow: none; --btn-primary-text: #ffffff; --input-bg: #ffffff; --input-bg-focus: #ffffff; --input-border: 2px solid #e2f2f7; --input-focus-border: #f18260; --input-focus-shadow: 0 0 0 4px rgba(241, 130, 96, 0.15); --navbar-bg: #ffffff; --navbar-blur: none; --navbar-border: none; --navbar-shadow: 0 10px 30px rgba(44, 101, 135, 0.06); --nav-link-color: #2c6587; --nav-link-hover-bg: #e2f2f7; /* pastel teal hover */ --nav-link-hover-color: #2c6587; --nav-link-hover-border: 1px solid transparent; --nav-link-hover-shadow: none; --nav-link-hover-transform: translateY(-2px); --nav-link-radius: 980px; --footer-bg: #2c6587; /* Deep blue footer */ --footer-border: 2px dashed rgba(255, 255, 255, 0.15); --footer-text: #ffffff; --footer-muted: #e2f2f7; --selection-bg: rgba(241, 130, 96, 0.2); --main-margin-top: 24px; /* Margin-top reset for relative navbar */ } /* -------------------------------------------------------------------------- Theme-aware markdown body tokens -------------------------------------------------------------------------- */ body.theme-apple .markdown-body { --md-text: #1d1d1f; --md-muted: #86868b; --md-border: #d2d2d7; --md-bg-subtle: #f5f5f7; --md-accent: #0071e3; font-family: var(--font-family); } body.theme-openai .markdown-body { --md-text: #202123; --md-muted: #6e6e80; --md-border: #ececf1; --md-bg-subtle: #f7f7f8; --md-accent: #10a37f; font-family: var(--font-family); } body.theme-claude .markdown-body { --md-text: #3d3929; --md-muted: #8a7f6d; --md-border: #e7e0d4; --md-bg-subtle: #f2ece1; --md-accent: #d97757; font-family: var(--font-family); } body.theme-poppio .markdown-body { --md-text: #2c6587; --md-muted: #5caad2; --md-border: #fbe6e3; --md-bg-subtle: #fff5f3; --md-accent: #f18260; font-family: var(--font-family); } /* ========================================================================== Base Layout & Typography ========================================================================== */ body { font-family: var(--font-family); background-color: var(--light) !important; color: var(--dark) !important; letter-spacing: var(--body-tracking); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background-color 0.3s ease, color 0.3s ease; } ::selection { background: var(--selection-bg); } h1, h2, h3, h4, h5, h6 { font-family: var(--heading-font-family); font-weight: var(--heading-weight); color: var(--heading-color) !important; letter-spacing: var(--heading-tracking); transition: color 0.3s ease; } a { color: var(--primary); } a:hover { color: var(--primary-dark); } /* Scrollbar styling */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--light); } ::-webkit-scrollbar-thumb { background: var(--secondary); border-radius: var(--radius-pill); } ::-webkit-scrollbar-thumb:hover { background: var(--primary); } /* ========================================================================== Navbar & Navigation Links ========================================================================== */ .navbar { background-color: var(--navbar-bg) !important; border-bottom: var(--navbar-border) !important; box-shadow: var(--navbar-shadow) !important; backdrop-filter: var(--navbar-blur) !important; -webkit-backdrop-filter: var(--navbar-blur) !important; transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; z-index: 1050; } .navbar-brand span { color: var(--heading-color) !important; font-family: var(--heading-font-family); font-weight: var(--heading-weight); letter-spacing: var(--heading-tracking); } .nav-link { transition: all 0.2s ease; font-weight: 500; color: var(--nav-link-color) !important; border: 1px solid transparent; border-radius: var(--nav-link-radius) !important; padding: 0.5rem 1rem !important; margin: 0 0.2rem; } .nav-link.active, .nav-link:hover { background-color: var(--nav-link-hover-bg) !important; color: var(--nav-link-hover-color) !important; border: var(--nav-link-hover-border) !important; box-shadow: var(--nav-link-hover-shadow) !important; transform: var(--nav-link-hover-transform) !important; } /* ========================================================================== Hero Banner Section (Base styles for Apple, OpenAI, Claude themes) ========================================================================== */ .hero-banner-section { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%) !important; color: var(--btn-primary-text, #ffffff) !important; min-height: 200px; display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; } .hero-banner-section h1 { color: var(--btn-primary-text, #ffffff) !important; } .hero-banner-section p, .hero-banner-section span, .hero-banner-section .bi { color: var(--btn-primary-text, #ffffff) !important; opacity: 0.9; } /* ========================================================================== Cards ========================================================================== */ .card { background-color: var(--white) !important; color: var(--dark) !important; border: var(--border) !important; border-radius: var(--radius) !important; box-shadow: var(--shadow) !important; transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, background-color 0.3s ease, border-color 0.3s ease; overflow: hidden; } .card.hover-shadow:hover { transform: var(--transform-hover) !important; box-shadow: var(--shadow-hover) !important; } .card.hover-shadow-lg:hover { transform: var(--transform-hover) !important; box-shadow: var(--shadow-lg) !important; } .card-title { color: var(--heading-color) !important; font-weight: var(--heading-weight); } /* ========================================================================== Forms & Controls ========================================================================== */ .form-control, .form-select { border: var(--input-border) !important; border-radius: var(--radius-sm) !important; padding: 0.75rem 1rem; font-size: 0.95rem; font-weight: 400; font-family: var(--font-family); background-color: var(--input-bg) !important; color: var(--dark) !important; transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, background-color 0.2s ease; } .form-control:focus, .form-select:focus { border-color: var(--input-focus-border) !important; background-color: var(--input-bg-focus) !important; box-shadow: var(--input-focus-shadow) !important; transform: var(--input-focus-transform) !important; outline: none !important; } /* ========================================================================== Buttons ========================================================================== */ .btn { font-family: var(--heading-font-family); font-weight: 600; padding: 0.7rem 1.6rem; border: var(--btn-border) !important; border-radius: var(--btn-radius) !important; box-shadow: var(--btn-shadow); transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease; } .btn:active { transform: var(--btn-active-transform) !important; box-shadow: var(--btn-active-shadow) !important; } .btn-primary { background-color: var(--primary) !important; border-color: var(--primary) !important; color: var(--btn-primary-text) !important; } .btn-primary:hover { background-color: var(--primary-dark) !important; border-color: var(--primary-dark) !important; color: var(--btn-primary-text) !important; transform: var(--transform-hover) !important; box-shadow: var(--btn-hover-shadow) !important; } .btn-secondary { background-color: var(--secondary) !important; border-color: var(--secondary) !important; color: #ffffff !important; } .btn-secondary:hover { background-color: var(--primary) !important; border-color: var(--primary) !important; color: var(--btn-primary-text) !important; transform: var(--transform-hover) !important; } .btn-outline-primary { background-color: transparent !important; border: 1px solid var(--primary) !important; color: var(--primary) !important; } .btn-outline-primary:hover { background-color: var(--primary) !important; color: var(--btn-primary-text) !important; transform: var(--transform-hover) !important; } .btn-outline-success { background-color: transparent !important; border: 1px solid var(--secondary) !important; color: var(--secondary) !important; } .btn-outline-success:hover { background-color: var(--secondary) !important; color: #ffffff !important; transform: var(--transform-hover) !important; } .btn-outline-secondary { border: 1px solid var(--secondary) !important; color: var(--secondary) !important; } .btn-outline-secondary:hover { background-color: var(--secondary) !important; color: var(--white) !important; } /* ========================================================================== Badges, Alerts & Utilities ========================================================================== */ .badge { border: var(--border-sm) !important; color: var(--dark) !important; font-weight: 600; font-family: var(--heading-font-family); padding: 0.5em 1em; } .bg-primary { background-color: var(--primary) !important; color: var(--btn-primary-text) !important; } .bg-success { background-color: var(--secondary) !important; color: #ffffff !important; } .breadcrumb-item + .breadcrumb-item::before { color: var(--dark) !important; opacity: 0.5; } .hover-translate-x { transition: transform 0.2s ease, box-shadow 0.2s ease; border: var(--border-sm) !important; box-shadow: var(--shadow-sm) !important; } .hover-translate-x:hover { transform: var(--transform-hover) !important; box-shadow: var(--shadow) !important; } .sidebar-container .text-primary { color: var(--primary) !important; } .alert { border: var(--border) !important; border-radius: var(--radius-sm) !important; box-shadow: var(--shadow-sm) !important; color: var(--dark) !important; font-weight: 500; background-color: var(--white) !important; } .alert-warning { border-color: var(--primary) !important; background-color: rgba(217, 119, 87, 0.08) !important; color: var(--primary-dark) !important; } /* ========================================================================== FullCalendar Integration ========================================================================== */ .fc { font-family: var(--font-family); } .fc .fc-toolbar-title { font-family: var(--heading-font-family); font-weight: var(--heading-weight); font-size: 1.45rem; color: var(--heading-color) !important; } .fc .fc-button-primary { background-color: var(--primary) !important; color: var(--btn-primary-text) !important; border: 1px solid var(--primary) !important; border-radius: var(--btn-radius) !important; box-shadow: var(--shadow-sm) !important; font-weight: 600; text-transform: capitalize; transition: all 0.2s ease; } .fc .fc-button-primary:hover { background-color: var(--primary-dark) !important; border-color: var(--primary-dark) !important; color: var(--btn-primary-text) !important; transform: var(--transform-hover) !important; } .fc-theme-standard td, .fc-theme-standard th { border: var(--border-sm) !important; } .fc-daygrid-event { border: var(--border-sm) !important; box-shadow: var(--shadow-sm) !important; border-radius: 6px; font-weight: 600; } .fc .fc-list-event-dot { border: 4px solid var(--primary) !important; } /* ========================================================================== Responsive Elements & Utilities ========================================================================== */ .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } @media (max-width: 991.98px) { main { margin-top: 75px !important; } .navbar-toggler { border: var(--border) !important; background-color: var(--primary) !important; color: var(--btn-primary-text) !important; box-shadow: var(--shadow-sm) !important; border-radius: var(--radius-sm) !important; padding: 0.5rem !important; transition: transform 0.1s ease, box-shadow 0.1s ease; } .navbar-toggler:active { transform: scale(0.95); } .navbar-collapse { background-color: var(--white) !important; border: var(--border) !important; box-shadow: var(--shadow) !important; border-radius: var(--radius) !important; padding: 1.25rem !important; margin-top: 0.75rem !important; transition: all 0.2s ease; } .navbar-nav { align-items: stretch !important; } .nav-link { text-align: center; margin: 0.25rem 0 !important; } } /* ========================================================================== Offcanvas (Mobile Sidebar) ========================================================================== */ .offcanvas { background-color: var(--navbar-bg) !important; backdrop-filter: var(--navbar-blur) !important; -webkit-backdrop-filter: var(--navbar-blur) !important; border-left: var(--navbar-border) !important; box-shadow: var(--shadow-lg) !important; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important; } .offcanvas-header { border-bottom: var(--border-sm) !important; background-color: transparent !important; padding: 1.5rem !important; } .offcanvas-title { font-family: var(--heading-font-family); font-weight: var(--heading-weight); color: var(--heading-color) !important; } .offcanvas-body { background-color: transparent !important; padding: 1.5rem !important; } @media (max-width: 991.98px) { .offcanvas { position: fixed !important; top: 0 !important; bottom: 0 !important; height: 100vh !important; z-index: 1060 !important; } .offcanvas .nav-link { text-align: left; padding: 0.75rem 1rem !important; margin: 0.25rem 0 !important; border-radius: var(--radius-sm); } } /* ========================================================================== Color Utility Overrides (respect active theme) ========================================================================== */ .text-primary, .navbar-brand span, .sidebar-container h4.text-primary { color: var(--heading-color) !important; } .text-secondary { color: var(--secondary) !important; } /* Brand accent helper — opt-in coloured text in the theme's accent */ .text-accent { color: var(--primary) !important; } /* ========================================================================== Footer (theme-aware via tokens) ========================================================================== */ footer.bg-dark { background-color: var(--footer-bg) !important; border-top: var(--footer-border) !important; } footer.bg-dark .text-white { color: var(--footer-text) !important; } footer.bg-dark .text-light { color: var(--footer-text) !important; } footer.bg-dark .text-secondary { color: var(--footer-muted) !important; } footer.bg-dark a.text-light { color: var(--footer-text) !important; } footer.bg-dark .hover-white:hover { color: var(--primary) !important; } /* ========================================================================== Coherent Theme Icon Sets ========================================================================== */ /* OpenAI — Boxicons swap for a sharper, techier glyph set */ body.theme-openai .bi::before, body.theme-openai [class^="bi-"]::before, body.theme-openai [class*=" bi-"]::before { font-family: "boxicons" !important; font-style: normal; font-weight: normal !important; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body.theme-openai .bi-search::before { content: "\ebec"; } body.theme-openai .bi-calendar3::before { content: "\e9a6"; } body.theme-openai .bi-calendar-check::before { content: "\e9a7"; } body.theme-openai .bi-calendar-plus::before { content: "\e9a9"; } body.theme-openai .bi-calendar-x::before { content: "\e9aa"; } body.theme-openai .bi-person::before { content: "\ebd7"; } body.theme-openai .bi-person-circle::before { content: "\ebd9"; } body.theme-openai .bi-person-plus-fill::before { content: "\ebda"; } body.theme-openai .bi-person-check-fill::before { content: "\ebd8"; } body.theme-openai .bi-person-check::before { content: "\ebd8"; } body.theme-openai .bi-person-workspace::before { content: "\e98f"; } body.theme-openai .bi-shield-lock-fill::before { content: "\eb66"; } body.theme-openai .bi-box-arrow-in-right::before { content: "\eada"; } body.theme-openai .bi-box-arrow-right::before { content: "\eadb"; } body.theme-openai .bi-journals::before { content: "\e988"; } body.theme-openai .bi-journal-text::before { content: "\ea04"; } body.theme-openai .bi-file-earmark-post::before { content: "\ea04"; } body.theme-openai .bi-inbox::before { content: "\ea77"; } body.theme-openai .bi-clock::before { content: "\e9cf"; } body.theme-openai .bi-clock-fill::before { content: "\e9cf"; } body.theme-openai .bi-envelope-paper::before { content: "\e9ea"; } body.theme-openai .bi-send-fill::before { content: "\ebac"; } body.theme-openai .bi-geo-alt::before { content: "\eab8"; } body.theme-openai .bi-facebook::before { content: "\ea3b"; } body.theme-openai .bi-youtube::before { content: "\ea88"; } body.theme-openai .bi-speedometer2::before { content: "\eab4"; } /* Claude — FontAwesome 6 swap for a softer editorial glyph set */ body.theme-claude .bi::before, body.theme-claude [class^="bi-"]::before, body.theme-claude [class*=" bi-"]::before { font-family: "Font Awesome 6 Free" !important; font-style: normal; font-weight: 900 !important; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body.theme-claude .bi-search::before { content: "\f002"; } body.theme-claude .bi-calendar3::before { content: "\f133"; font-weight: 400 !important; } body.theme-claude .bi-calendar-check::before { content: "\f274"; } body.theme-claude .bi-calendar-plus::before { content: "\f271"; } body.theme-claude .bi-calendar-x::before { content: "\f273"; } body.theme-claude .bi-person::before { content: "\f007"; font-weight: 400 !important; } body.theme-claude .bi-person-circle::before { content: "\f2bd"; } body.theme-claude .bi-person-plus-fill::before { content: "\f234"; } body.theme-claude .bi-person-check-fill::before { content: "\f4fc"; } body.theme-claude .bi-person-check::before { content: "\f007"; } body.theme-claude .bi-person-workspace::before { content: "\f0b1"; } body.theme-claude .bi-shield-lock-fill::before { content: "\f3ed"; } body.theme-claude .bi-box-arrow-in-right::before { content: "\f090"; } body.theme-claude .bi-box-arrow-right::before { content: "\f08b"; } body.theme-claude .bi-journals::before { content: "\f02d"; } body.theme-claude .bi-journal-text::before { content: "\f15c"; } body.theme-claude .bi-file-earmark-post::before { content: "\f15c"; } body.theme-claude .bi-inbox::before { content: "\f01c"; } body.theme-claude .bi-clock::before { content: "\f017"; font-weight: 400 !important; } body.theme-claude .bi-clock-fill::before { content: "\f017"; } body.theme-claude .bi-envelope-paper::before { content: "\f0e0"; font-weight: 400 !important; } body.theme-claude .bi-send-fill::before { content: "\f1d8"; } body.theme-claude .bi-geo-alt::before { content: "\f3c5"; } body.theme-claude .bi-facebook::before { content: "\f09a"; font-family: "Font Awesome 6 Brands" !important; font-weight: 400 !important; } body.theme-claude .bi-youtube::before { content: "\f167"; font-family: "Font Awesome 6 Brands" !important; font-weight: 400 !important; } /* ========================================================================== POPPIO CUSTOM STYLES (Header, Topbar, Wave, Bubbly cards) ========================================================================== */ /* Navbar override for Poppio to prevent it from overlapping the page */ body.theme-poppio .navbar { position: relative !important; top: 0 !important; margin-bottom: 0 !important; z-index: 100 !important; } /* Logo and Branding styling */ body.theme-poppio .poppio-brand { transition: transform 0.2s ease; } body.theme-poppio .poppio-brand:hover { transform: scale(1.05); } body.theme-poppio .poppio-logo-text { font-family: 'Fredoka', cursive !important; font-size: 2.2rem !important; font-weight: 700 !important; color: #ffffff !important; text-shadow: 2px 2px 0px #f18260, 4px 4px 0px #f6b352; letter-spacing: -0.02em; } /* Topbar contacts */ body.theme-poppio .poppio-topbar { background-color: #2c6587; color: #ffffff; border-bottom: 2px dashed rgba(255, 255, 255, 0.1); } body.theme-poppio .poppio-contact-item { transition: transform 0.2s ease; } body.theme-poppio .poppio-contact-item:hover { transform: translateY(-2px); } body.theme-poppio .poppio-contact-icon { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } body.theme-poppio .poppio-contact-icon.icon-mail { background-color: #fbe6e3; color: #f18260; } body.theme-poppio .poppio-contact-icon.icon-phone { background-color: #e2f2f7; color: #5caad2; } body.theme-poppio .poppio-contact-label { font-size: 0.75rem; color: #e2f2f7; text-transform: uppercase; font-weight: 600; letter-spacing: 0.05em; line-height: 1.2; } body.theme-poppio .poppio-contact-value { font-size: 0.9rem; font-weight: 700; color: #ffffff; line-height: 1.2; } /* Floating Navigation Bar Row */ body.theme-poppio .poppio-nav-row { margin-top: -15px; position: relative; z-index: 105; } body.theme-poppio .poppio-nav-row .navbar { border: 3px dashed #5caad2 !important; box-shadow: 0 10px 30px rgba(44, 101, 135, 0.08) !important; } body.theme-poppio .poppio-nav-row .nav-link { font-family: 'Fredoka', sans-serif !important; font-weight: 600 !important; font-size: 0.95rem; color: #2c6587 !important; transition: all 0.2s ease !important; } body.theme-poppio .poppio-nav-row .nav-link.active, body.theme-poppio .poppio-nav-row .nav-link:hover { background-color: #e2f2f7 !important; color: #2c6587 !important; transform: translateY(-2px); } body.theme-poppio .poppio-nav-row .btn-poppio-book { font-family: 'Fredoka', sans-serif !important; font-weight: 600; background-color: #f18260 !important; color: #ffffff !important; border-radius: 980px !important; border: none !important; box-shadow: 0 4px 10px rgba(241, 130, 96, 0.25); transition: all 0.2s ease; } body.theme-poppio .poppio-nav-row .btn-poppio-book:hover { background-color: #2c6587 !important; box-shadow: 0 6px 15px rgba(44, 101, 135, 0.3); transform: scale(1.03); } /* Hero Banner styling - transparent style for clean association layout */ body.theme-poppio .hero-banner-section { background: transparent !important; box-shadow: none !important; min-height: auto; display: block; position: relative; z-index: 1; border-radius: 0 !important; padding-bottom: 20px !important; padding-top: 20px !important; margin-bottom: 20px !important; } body.theme-poppio .hero-banner-section::before, body.theme-poppio .hero-banner-section::after { display: none !important; } body.theme-poppio .hero-banner-section .position-absolute { display: none !important; } body.theme-poppio .hero-banner-section > .container { position: relative; z-index: 4; } body.theme-poppio .hero-banner-section h1 { font-family: 'Fredoka', cursive !important; font-size: 3rem !important; color: var(--heading-color) !important; text-shadow: none !important; font-weight: 700; } body.theme-poppio .hero-banner-section p, body.theme-poppio .hero-banner-section span, body.theme-poppio .hero-banner-section .bi { color: var(--dark) !important; font-family: 'Quicksand', sans-serif !important; font-weight: 600; } /* Custom card decorations for kids theme */ body.theme-poppio .card { border: 3px dashed #5caad2 !important; border-radius: 28px !important; background-color: #ffffff !important; box-shadow: 0 12px 30px rgba(44, 101, 135, 0.05) !important; } body.theme-poppio .card-header { border-bottom: 3px dashed #fff5f3 !important; background-color: transparent !important; } body.theme-poppio .card-title { font-family: 'Fredoka', cursive !important; color: #2c6587 !important; } /* Side navigation widgets and lists */ body.theme-poppio .list-group-item { border: none !important; background-color: transparent !important; font-family: 'Quicksand', sans-serif !important; font-weight: 600; border-radius: 12px !important; margin-bottom: 5px; color: #2c6587; transition: all 0.2s ease; } body.theme-poppio .list-group-item:hover, body.theme-poppio .list-group-item.active { background-color: #e2f2f7 !important; color: #2c6587 !important; transform: translateX(4px); } /* FullCalendar styling */ body.theme-poppio .fc .fc-toolbar-title { font-family: 'Fredoka', cursive !important; color: #2c6587 !important; } body.theme-poppio .fc .fc-button-primary { background-color: #5caad2 !important; border-color: #5caad2 !important; } body.theme-poppio .fc .fc-button-primary:hover { background-color: #2c6587 !important; border-color: #2c6587 !important; } body.theme-poppio .fc-daygrid-day { background-color: #ffffff; } body.theme-poppio .fc-day-today { background-color: #e2f2f7 !important; } /* Badge styling */ body.theme-poppio .badge { background-color: #e2f2f7 !important; color: #2c6587 !important; border-radius: 980px !important; border: none !important; font-family: 'Fredoka', sans-serif !important; padding: 0.6em 1.2em; } body.theme-poppio .badge.bg-primary { background-color: #fbe6e3 !important; color: #f18260 !important; } /* Card left border color indicators for search result types */ body.theme-poppio .card.border-start { border-left: 6px solid #f18260 !important; } body.theme-poppio .card.border-success { border-left: 6px solid #5caad2 !important; }