/* ============================================== SAPCMTY OFFICIAL WEBSITE — THEME SYSTEM Default: Dark Mode (original design) Toggle: [data-theme="light"] on ============================================== */ /* Smooth transition for theme changes */ *, *::before, *::after { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } /* ─── THEME TOGGLE BUTTON ─── */ .theme-toggle { position: relative; width: 40px; height: 40px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.08); color: white; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; flex-shrink: 0; } .theme-toggle:hover { background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.4); } .theme-toggle svg { width: 18px; height: 18px; transition: transform 0.4s ease, opacity 0.3s ease; } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } [data-theme="light"] .theme-toggle .icon-sun { display: block; } [data-theme="light"] .theme-toggle .icon-moon { display: none; } [data-theme="light"] .theme-toggle { border-color: rgba(0, 0, 0, 0.15); background: rgba(0, 0, 0, 0.06); color: #1a1a1a; } [data-theme="light"] .theme-toggle:hover { background: rgba(0, 0, 0, 0.1); border-color: rgba(0, 0, 0, 0.3); } /* ─── BODY & GLOBAL ─── */ [data-theme="light"] body { background-color: #ffffff !important; color: #1a1a1a !important; } /* ─── SCROLLBAR ─── */ [data-theme="light"] ::-webkit-scrollbar-track { background: #f5f5f5; } [data-theme="light"] ::-webkit-scrollbar-thumb { background: #c0c0c0; } [data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #999; } /* ─── NAVBAR ─── */ [data-theme="light"] nav#navbar { background: rgba(255, 255, 255, 0.85) !important; border-bottom-color: rgba(0, 0, 0, 0.08) !important; backdrop-filter: blur(12px) saturate(180%); } [data-theme="light"] nav#navbar a, [data-theme="light"] nav#navbar button:not(.theme-toggle) { color: #1a1a1a !important; } [data-theme="light"] nav#navbar a:hover { color: #000 !important; } /* Logo invert flip — undoing brightness-0 invert */ [data-theme="light"] nav .brightness-0.invert, [data-theme="light"] .brightness-0.invert { filter: none !important; } /* Navbar CTA buttons */ [data-theme="light"] nav .bg-white.text-black { background-color: #000 !important; color: #fff !important; } [data-theme="light"] nav .bg-white.text-black:hover { background-color: #222 !important; } /* Desktop dropdown */ [data-theme="light"] nav .bg-black\/95 { background: rgba(255, 255, 255, 0.95) !important; border-color: rgba(0, 0, 0, 0.1) !important; } [data-theme="light"] nav .bg-black\/95 a { color: #444 !important; } [data-theme="light"] nav .bg-black\/95 a:hover { background: rgba(0, 0, 0, 0.05) !important; } /* Mobile menu button */ [data-theme="light"] #mobile-menu-btn { background: rgba(0, 0, 0, 0.06) !important; border-color: rgba(0, 0, 0, 0.15) !important; color: #1a1a1a !important; } [data-theme="light"] #mobile-menu-btn:hover { background: rgba(0, 0, 0, 0.1) !important; } /* ─── MOBILE MENU OVERLAY ─── */ [data-theme="light"] #mobile-menu { background-color: #ffffff !important; } [data-theme="light"] #mobile-menu .border-white\/10 { border-color: rgba(0, 0, 0, 0.08) !important; } [data-theme="light"] #mobile-menu .bg-black { background-color: #ffffff !important; } [data-theme="light"] #mobile-menu span.font-display, [data-theme="light"] #mobile-menu a { color: #1a1a1a !important; } [data-theme="light"] #mobile-menu a:hover { color: #555 !important; } [data-theme="light"] #mobile-menu .text-gray-500 { color: #888 !important; } /* Mobile menu close button */ [data-theme="light"] .mobile-menu-trigger { background: rgba(0, 0, 0, 0.06) !important; border-color: rgba(0, 0, 0, 0.15) !important; color: #1a1a1a !important; } /* Mobile menu footer buttons */ [data-theme="light"] #mobile-menu .bg-white.text-black { background-color: #000 !important; color: #fff !important; } [data-theme="light"] #mobile-menu .border-white\/20 { border-color: rgba(0, 0, 0, 0.15) !important; color: #1a1a1a !important; } /* ─── HERO SECTION ─── */ [data-theme="light"] section.bg-black { background-color: #fafafa !important; } [data-theme="light"] .hero-title, [data-theme="light"] section h1, [data-theme="light"] section h2, [data-theme="light"] section h3, [data-theme="light"] section h4 { color: #1a1a1a !important; } [data-theme="light"] .text-transparent.bg-clip-text { -webkit-text-fill-color: initial !important; color: #444 !important; background: none !important; } [data-theme="light"] .text-gray-400, [data-theme="light"] .text-gray-500, [data-theme="light"] .text-gray-600 { color: #666 !important; } [data-theme="light"] .text-white { color: #1a1a1a !important; } [data-theme="light"] .text-white\/80 { color: rgba(26, 26, 26, 0.8) !important; } [data-theme="light"] .text-white\/70 { color: rgba(26, 26, 26, 0.7) !important; } [data-theme="light"] .text-white\/60 { color: rgba(26, 26, 26, 0.6) !important; } [data-theme="light"] .text-white\/40 { color: rgba(26, 26, 26, 0.4) !important; } /* Hero badge */ [data-theme="light"] .border-white\/30 { border-color: rgba(0, 0, 0, 0.15) !important; } /* Hero CTA buttons */ [data-theme="light"] section a.bg-white.text-black, [data-theme="light"] section a.bg-white { background-color: #000 !important; color: #fff !important; } [data-theme="light"] section a.bg-white.text-black:hover, [data-theme="light"] section a.bg-white:hover { background-color: #222 !important; } [data-theme="light"] section a.bg-transparent.border.border-white\/30 { border-color: rgba(0, 0, 0, 0.2) !important; color: #1a1a1a !important; } [data-theme="light"] section a.bg-transparent.border.border-white\/30:hover { background-color: rgba(0, 0, 0, 0.04) !important; } /* Scroll indicator */ [data-theme="light"] .text-gray-600.animate-pulse { color: #bbb !important; } [data-theme="light"] .bg-gray-600 { background-color: #bbb !important; } /* ─── BACKGROUND PATTERNS & GRADIENTS ─── */ [data-theme="light"] .bg-grid-pattern { opacity: 0.03 !important; filter: invert(1); } [data-theme="light"] .bg-gradient-to-b.from-transparent { background: linear-gradient(to bottom, transparent, rgba(250, 250, 250, 0.5), #fafafa) !important; } /* ─── FUSELAGE / DARK SECTIONS ─── */ [data-theme="light"] section.bg-black.border-t.border-white\/10 { border-top-color: rgba(0, 0, 0, 0.06) !important; } /* Skewed white/5 accent bg */ [data-theme="light"] .bg-white\/5 { background-color: rgba(0, 0, 0, 0.03) !important; } /* Gray-900 sections (Aircraft, Carbon Fibre) */ [data-theme="light"] section.bg-gray-900, [data-theme="light"] .bg-gray-900 { background-color: #f0f0f0 !important; } [data-theme="light"] .bg-gray-900.border.border-white\/10 { background-color: #f0f0f0 !important; } /* Info cards in dark sections */ [data-theme="light"] .border-white\/10 { border-color: rgba(0, 0, 0, 0.08) !important; } [data-theme="light"] .border-white\/20 { border-color: rgba(0, 0, 0, 0.12) !important; } [data-theme="light"] .border-white\/30 { border-color: rgba(0, 0, 0, 0.15) !important; } /* Aircraft metaphor cards */ [data-theme="light"] .bg-black.border.border-white\/10 { background-color: #fff !important; border-color: rgba(0, 0, 0, 0.1) !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); } /* Command Center card */ [data-theme="light"] .bg-gray-900.border.border-white\/10 { background-color: #f5f5f5 !important; border-color: rgba(0, 0, 0, 0.1) !important; } /* Carbon fibre texture — reduce in light */ [data-theme="light"] [style*="carbon-fibre"] { opacity: 0.04 !important; filter: invert(1); } /* ─── ENGINES SECTION (Already white bg) ─── */ /* The engines section is bg-white text-black, which is fine in light mode. In dark mode it's the contrasting section. In light mode we make it subtly different. */ [data-theme="light"] section.bg-white.text-black { background-color: #fafafa !important; } [data-theme="light"] .border-black\/10 { border-color: rgba(0, 0, 0, 0.06) !important; } [data-theme="light"] .text-black\/40 { color: rgba(0, 0, 0, 0.35) !important; } /* ─── LATEST INSIGHTS (Already light bg) ─── */ [data-theme="light"] section.bg-gray-50 { background-color: #fff !important; border-color: rgba(0, 0, 0, 0.06) !important; } /* ─── GOVERNANCE / BOARD (Already light bg) ─── */ [data-theme="light"] section.bg-gray-50.text-black .bg-white { background-color: #fafafa !important; border-color: rgba(0, 0, 0, 0.08) !important; } /* ─── THE WINGS PARALLAX CTA ─── */ /* Keep this section as-is — it's a visual hero with a background image */ /* ─── FOOTER ─── */ [data-theme="light"] footer { background-color: #fafafa !important; border-top-color: rgba(0, 0, 0, 0.06) !important; color: #1a1a1a !important; } [data-theme="light"] footer .border-gray-900 { border-color: rgba(0, 0, 0, 0.06) !important; } [data-theme="light"] footer .text-gray-300 { color: #444 !important; } [data-theme="light"] footer .text-gray-500 { color: #888 !important; } [data-theme="light"] footer .text-gray-500:hover { color: #000 !important; } [data-theme="light"] footer .text-gray-600 { color: #999 !important; } [data-theme="light"] footer .hover\:text-white:hover { color: #000 !important; } /* Footer logo */ [data-theme="light"] footer .brightness-0.invert { filter: none !important; } /* ─── CERTIFICATE VERIFICATION ─── */ [data-theme="light"] .bg-gray-900\/50 { background-color: rgba(245, 245, 245, 0.9) !important; } [data-theme="light"] input.bg-black\/50, [data-theme="light"] .bg-black\/50 { background-color: rgba(0, 0, 0, 0.04) !important; color: #1a1a1a !important; border-color: rgba(0, 0, 0, 0.15) !important; } [data-theme="light"] input.bg-black\/50::placeholder { color: #aaa !important; } [data-theme="light"] input.bg-black\/50:focus { border-color: #000 !important; } /* Verify button */ [data-theme="light"] button.bg-white.text-black { background-color: #000 !important; color: #fff !important; } [data-theme="light"] button.bg-white.text-black:hover { background-color: #222 !important; } /* Result boxes (keep as-is — emerald/red have their own semantics) */ /* ─── NOTICE BOARD ─── */ [data-theme="light"] .notice-card { background-color: rgba(245, 245, 245, 0.9) !important; border-color: rgba(0, 0, 0, 0.08) !important; } [data-theme="light"] .notice-card:hover { border-color: rgba(0, 0, 0, 0.2) !important; } [data-theme="light"] .notice-card h3 a { color: #1a1a1a !important; } [data-theme="light"] .notice-card h3 a:hover { color: #3b82f6 !important; } [data-theme="light"] .notice-excerpt { color: #555 !important; } [data-theme="light"] .notice-meta { color: #888 !important; } [data-theme="light"] .card-button { color: #1a1a1a !important; border-bottom-color: #1a1a1a !important; } [data-theme="light"] .card-button:hover { color: #3b82f6 !important; border-color: #3b82f6 !important; } /* Notice detail */ [data-theme="light"] .notice-single { background-color: rgba(245, 245, 245, 0.9) !important; border-color: rgba(0, 0, 0, 0.08) !important; } [data-theme="light"] .notice-header h1 { color: #1a1a1a !important; } [data-theme="light"] .notice-content { color: #444 !important; } [data-theme="light"] .back-link { color: #888 !important; } [data-theme="light"] .back-link:hover { color: #000 !important; } /* Search/filter inputs */ [data-theme="light"] .search-input { background: rgba(0, 0, 0, 0.03) !important; border-color: rgba(0, 0, 0, 0.15) !important; color: #1a1a1a !important; } [data-theme="light"] .search-input:focus { border-color: #000 !important; } [data-theme="light"] .search-input::placeholder { color: #aaa !important; } [data-theme="light"] .filter-select { background: #fff !important; border-color: rgba(0, 0, 0, 0.15) !important; color: #1a1a1a !important; } [data-theme="light"] .filter-button { background: #000 !important; color: #fff !important; } [data-theme="light"] .filter-button:hover { background: #222 !important; } /* ─── TAGS ─── */ [data-theme="light"] .tag { background-color: rgba(59, 130, 246, 0.08) !important; border-color: rgba(59, 130, 246, 0.15) !important; } /* ─── IMAGES — undo grayscale in light ─── */ [data-theme="light"] img.grayscale { filter: grayscale(0.5) !important; } /* ─── GLASS EFFECT ─── */ [data-theme="light"] .glass { background: rgba(255, 255, 255, 0.7) !important; } /* ─── SYSTEM STATUS BOX ─── */ [data-theme="light"] .animate-ping { background-color: #3b82f6 !important; } /* ─── BORDER VALUE ITEMS ─── */ [data-theme="light"] .border-l-2.border-white\/20 { border-left-color: rgba(0, 0, 0, 0.12) !important; } [data-theme="light"] .border-l-2.border-white\/20:hover { border-left-color: #000 !important; } /* ─── FONT MONO LABELS ─── */ [data-theme="light"] .font-mono.text-gray-500, [data-theme="light"] .font-mono.text-\[10px\] { color: #999 !important; } /* ─── SELECTION ─── */ [data-theme="light"] ::selection { background-color: #000 !important; color: #fff !important; } /* ─── KEEP SUB-ORGANISATION ACCENT COLORS AS-IS ─── */ /* Sub-organisation hover colors (.hover\:text-subOrg-*) already work in both themes */ /* ─── PREVENT TRANSITION ON PAGE LOAD ─── */ html.no-transition * { transition: none !important; } /* ─── CRITICAL FIXES ─── */ /* Force Navbar Links Black (Excluding CTA) */ [data-theme="light"] #navbar a:not(.bg-white), [data-theme="light"] #navbar .text-white, [data-theme="light"] #navbar .text-white\/80, [data-theme="light"] #navbar .text-white\/60, [data-theme="light"] #navbar button:not(.theme-toggle):not(.bg-white) { color: #000000 !important; } /* Fix Hero Background Contrast (Light Mode) */ /* Targets the gradient overlay in hero sections to make it white/transparent instead of black */ [data-theme="light"] .absolute.bg-gradient-to-b.from-black\/60, [data-theme="light"] .absolute.bg-gradient-to-b.from-black\/80 { background: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5), #ffffff) !important; } /* Reduce Hero Image Opacity in Light Mode */ [data-theme="light"] section img.object-cover.opacity-60, [data-theme="light"] section img.object-cover.opacity-50 { opacity: 0.1 !important; filter: grayscale(100%); } /* Fix "Wings" Section Color Issues in Light Mode */ [data-theme="light"] .bg-subOrg-wings { background-color: #f0f9ff !important; color: #1a1a1a !important; } [data-theme="light"] .bg-subOrg-wings .bg-black\/40 { background-color: rgba(255, 255, 255, 0.6) !important; }