/* ============================================================ THE MEDICAL EDUCATION NETWORK Unified Stylesheet — Redesign 2026 STRUCTURE: 1. Design Tokens (CSS Variables) 2. Typography & Base 3. Bootstrap Overrides 4. Layout & Structure 5. Navigation & Menu ← UPDATED for new design 6. Header Buttons 7. Hero Banner ← NEW 8. Programme Banners ← NEW 9. Utility Bar ← NEW 10. Section Headers ← NEW 11. In Brief Cards ← NEW 12. Article Components ← PRESERVED + ENHANCED 13. Cards ← PRESERVED 14. Sidebar Widgets ← NEW 15. Form Blocks ← PRESERVED 16. Tables ← PRESERVED 17. Grid Layouts ← PRESERVED 18. Footer ← UPDATED for new design 19. Responsive ← MERGED CONFLICT NOTES: - body background: updated from #d0d0d0 to new paper tone - a { color } global rule scoped to content areas only — dark-theme sections (nav, hero, footer) override via specific selectors with higher specificity - h1–h6 colour preserved for content; overridden in dark-theme containers via scoped rules - Bootstrap .bg-primary/.btn-primary aligned to new navy ============================================================ */ /* ============================================================ 1. DESIGN TOKENS ============================================================ */ :root { /* Brand colours */ --men-ink: #07101E; /* deepest navy — hero/footer bg */ --men-navy: #0C1D35; /* nav background */ --men-navy-mid: #132640; /* nav hover / programme banners */ --men-navy-light: #1A3356; /* lighter navy for borders */ --men-primary: #023047; /* existing primary — headings, links */ --men-primary-dark: #073046; /* existing primary hover */ /* Accent */ --men-teal: #00BFC8; /* primary accent — replaces #00b0c4 */ --men-teal-deep: #008A92; --men-teal-legacy: #00b0c4; /* kept for article-divider etc. */ --men-amber: #E8A830; --men-orange: #FB8500; /* card-tag.Curated, quick-facts */ --men-yellow: #FFB703; /* card-tag.Webinar */ --men-sky: #8ECAE6; /* card-tag.Article */ /* Specialty accent colours */ --men-sp-neuro: #6B8CFF; --men-sp-tx: #2ECC71; --men-sp-womens: #FF7BAC; --men-sp-cardio: #FF6B35; --men-sp-radio: #00BFC8; --men-sp-crit: #E8A830; --men-sp-oncology: #9B7AFF; --men-sp-id: #2ECC71; /* Neutrals */ --men-bg: #F5F3EF; /* replaces #d0d0d0 — lighter, cleaner */ --men-paper: #F9F7F4; --men-white: #FFFFFF; --men-border: #DDE4EC; --men-grey-light: #efefef; /* preserved — used in Cardblock etc. */ --men-grey-mid: #dfdfdf; --men-grey-text: #686868; --men-grey-form: #727272; --men-text: #222222; --men-muted: #6c757d; /* Typography */ --font-body: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --font-mono: 'DM Mono', 'Courier New', monospace; /* Spacing */ --radius-sm: 4px; --radius-md: 8px; /* Shadows */ --shadow-card: 0 4px 6px rgba(0,0,0,0.10); --shadow-card-hover:0 6px 12px rgba(0,0,0,0.15); --shadow-layout: -1px 2px 5px 6px rgb(0 0 0 / 9%); } /* ============================================================ 2. TYPOGRAPHY & BASE ============================================================ */ /* Google Font import — add to or keep here */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400;1,600&family=DM+Mono:wght@400;500&display=swap'); /* Base — PRESERVED from original */ body, p, tr td, tr th { color: var(--men-text); font-family: var(--font-body); font-size: 15px; line-height: 1.6; margin: 0; padding: 0; } body { /* Updated: was #d0d0d0 — new cleaner background */ background-color: var(--men-bg); } /* Font Size Hierarchy — PRESERVED */ .text-xs { font-size: 11px; } .text-sm { font-size: 12px; } .text-base { font-size: 14px; } .text-md { font-size: 15px; } .text-lg { font-size: 16px; } .text-xl { font-size: 18px; } /* Headings — PRESERVED, updated to use variable */ h1, h2, h3, h4, h5, h6 { color: var(--men-primary); font-family: var(--font-body); font-weight: 500; line-height: 1.2; } .h1, h1 { margin-top: 0; margin-bottom: .5rem; font-size: 1.75rem; color: #000000; } /* ── Links — SCOPED to content areas only The original global `a { color: #023047 !important }` is preserved below but dark-theme sections (nav, hero, footer, banners) each override link colours via higher-specificity selectors. */ a { color: var(--men-primary) !important; text-decoration: none !important; } a:hover { color: var(--men-primary-dark) !important; text-decoration: underline !important; } a-item:hover { color: #3c3c3c; text-decoration: none; } /* Override: links inside dark-theme containers inherit white/teal */ .men-nav a, .men-util-bar a, .men-hero a, .men-prog-banner a, .men-footer a, .men-newsletter-widget a, .men-feature-banner a { color: inherit !important; text-decoration: none !important; } .men-nav a:hover, .men-util-bar a:hover, .men-footer a:hover { color: var(--men-teal) !important; text-decoration: none !important; } /* Override: headings inside dark containers */ .men-hero h1, .men-hero h2, .men-footer h1, .men-footer h2, .men-footer h3, .men-feature-banner h1, .men-feature-banner h2, .men-feature-banner h3 { color: var(--men-white); font-family: var(--font-display); } /* ============================================================ 3. BOOTSTRAP OVERRIDES — PRESERVED, updated to new navy ============================================================ */ .text-primary { color: var(--men-primary) !important; } .text-secondary { color: var(--men-grey-text) !important; } /* Primary now aligns to the new navy/teal identity */ .bg-primary, .btn-primary { background-color: var(--men-navy) !important; border-color: var(--men-navy) !important; color: #ffffff !important; } .bg-primary:hover, .btn-primary:hover, .bg-primary:focus, .btn-primary:focus { background-color: var(--men-teal) !important; border-color: var(--men-teal) !important; color: #ffffff !important; } a.bg-primary, .bg-primary a { color: #ffffff !important; } .btn-secondary { background-color: var(--men-grey-mid); border-color: var(--men-grey-mid); color: var(--men-grey-text); } /* Teal accent utility */ .bg-teal { background-color: var(--men-teal) !important; } .text-teal { color: var(--men-teal) !important; } .border-teal { border-color: var(--men-teal) !important; } /* ============================================================ 4. LAYOUT & STRUCTURE — PRESERVED ============================================================ */ .layout-box { padding: 20px; box-shadow: var(--shadow-layout); -webkit-box-shadow: var(--shadow-layout); -moz-box-shadow: rgba(0, 0, 0, 0.09) -1px 2px 5px 6px; background-color: var(--men-white); } .Header-Border-Btm { background-color: var(--men-white); border-bottom: solid 0px var(--men-white); height: 0%; width: 100%; margin: 0; } /* ============================================================ 5. NAVIGATION & MENU ============================================================ */ /* ── Original nav styles — PRESERVED for eLecture platform ── */ .navbar-toggler {} .nav-item { padding-left: 10px; padding-right: 10px; } .nav-item:hover { background-color: var(--men-grey-mid); } .nav-link, .nav-link:hover { color: var(--men-grey-text); } .dropdown-item:hover { color: var(--men-primary); } /* Medium Breakpoint */ @media all and (min-width: 768px) { .Menu-Flex-Item { width: 100%; } } /* Mobile Menu */ @media (max-width: 768px) { #navbarSupportedContent { position: absolute; top: 45px; right: 10px; background-color: var(--men-white); } #navbarSupportedContent .navbar-nav { text-align: right; } #navbarSupportedContent .dropdown-menu { text-align: right; } } /* Desktop View */ @media all and (min-width: 992px) { .dropdown-menu li { position: relative; } .nav-item .submenu { display: none; position: absolute; left: 100%; top: -7px; } .nav-item .submenu-left { right: 100%; left: auto; } .dropdown-menu > li:hover { background-color: #f1f1f1; } .dropdown-menu > li:hover > .submenu { display: block; } } /* Small Devices */ @media (max-width: 991px) { .dropdown-menu .dropdown-menu { margin-left: 0.7rem; margin-right: 0.7rem; margin-bottom: .5rem; } } /* ── NEW: Redesign Navigation Applied via class .men-nav on the