/* ================================================================== theme.css — LIGHT MODE. Dark is the default and unchanged (no [data-theme] attribute, or data-theme="dark"). Light mode is opt-in via the header switch, which sets (persisted in localStorage). Must load AFTER the other stylesheets so these overrides win. ================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Bengali:wght@400;500;600;700;800&display=swap'); /* Bengali needs a properly-shaped font with real weights — faux-bolding a fallback Bengali font breaks the conjuncts (যুক্তাক্ষর). Applies only in Bengali; the Latin design fonts are untouched in English. */ html[data-lang="bn"] body, html[data-lang="bn"] h1, html[data-lang="bn"] h2, html[data-lang="bn"] h3, html[data-lang="bn"] h4, html[data-lang="bn"] p, html[data-lang="bn"] span, html[data-lang="bn"] a, html[data-lang="bn"] li, html[data-lang="bn"] button, html[data-lang="bn"] input, html[data-lang="bn"] select, html[data-lang="bn"] textarea, html[data-lang="bn"] label, html[data-lang="bn"] legend, html[data-lang="bn"] .hero-title { font-family: "Noto Sans Bengali", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important; } /* Bengali letters are taller (reph + vowel signs sit above the headline), so tight Latin line-heights clip their tops — give headings vertical room. */ html[data-lang="bn"] h1, html[data-lang="bn"] h2, html[data-lang="bn"] h3, html[data-lang="bn"] .hero-title, html[data-lang="bn"] .reg-title, html[data-lang="bn"] .dash-welcome h1 { line-height: 1.5 !important; } html[data-lang="bn"] .hero-title { padding: 0.08em 0; } /* smooth switch (only animates on toggle; first paint is already themed) */ body, .site-header, .site-header-brand span, .hdr-icon-btn, .hdr-lang, .hdr-lang-opt, .teacher-quote, .teacher-message, .cd-box, .cd-num, .reg-card, .reg-name, .gallery-item, .dash-header, .dash-card, .reg-shell, .reg-card, .theme-toggle, .field input, .field select, .field textarea { transition: background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease; } /* small icon-button used for the theme switch on the form / dashboard pages */ .theme-toggle { width: 40px; height: 40px; border-radius: 10px; cursor: pointer; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); color: #d7dbe4; transition: background .2s, color .2s, border-color .2s; } .theme-toggle:hover { color: #fff; background: rgba(255, 255, 255, 0.12); } /* language switch button (form / dashboard pages) */ .lang-toggle { height: 40px; padding: 0 12px; border-radius: 10px; cursor: pointer; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 700; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); color: #d7dbe4; white-space: nowrap; transition: background .2s, color .2s, border-color .2s; } .lang-toggle:hover { color: #fff; background: rgba(255, 255, 255, 0.12); } html[data-theme="light"] .lang-toggle { background: rgba(20, 30, 60, 0.05); border-color: rgba(20, 30, 60, 0.14); color: #3a4256; } html[data-theme="light"] .lang-toggle:hover { background: rgba(20, 30, 60, 0.10); color: #111; } /* form pages (register/login): float the switches top-right of the header */ .reg-theme { position: absolute; right: 0; top: 0; } .reg-lang { position: absolute; right: 48px; top: 0; } /* ============================================================ LIGHT THEME ============================================================ */ /* ---- shared CSS variables (register.css / student.css read these) ---- */ html[data-theme="light"] { --bg: #eef1f7; --panel: #ffffff; --panel-2: #eef1f8; --line: rgba(20, 30, 60, 0.12); --text: #1b2233; --muted: #5b6478; /* pale cyan/green accents are unreadable on a light surface -> deeper tones */ --green1: #0a93ad; --cyan: #0a8fb8; } /* hardcoded white headings on the form / dashboard pages -> dark ink */ html[data-theme="light"] .reg-section legend, html[data-theme="light"] .dash-card-head h2, html[data-theme="light"] .details-card h2, html[data-theme="light"] .event-card h2 { color: #1b2233; } /* the "1.0" highlight gradient used pale --green1 (#7befff) — give it a readable teal->green on light (dark theme keeps the original) */ html[data-theme="light"] .text-gradient.hl { background-image: linear-gradient(to right, #0a93ad, #07901f) !important; } /* ---- base page (index / marketing) ---- */ html[data-theme="light"] body { background-color: #eef1f7; color: #1b2233; } /* dark Tailwind surfaces -> light cards */ html[data-theme="light"] .bg-body { background-color: #ffffff !important; } html[data-theme="light"] .bg-slate-800 { background-color: #e8edf7 !important; } html[data-theme="light"] .hover\:bg-slate-900:hover { background-color: #e2e8f4 !important; } html[data-theme="light"] .border-slate-600\/40 { border-color: rgba(20, 30, 60, 0.15) !important; } /* "Our Vision" + "Organizer" cards: the dark surface is .card-body:before, and .card is just the translucent gradient border around it */ html[data-theme="light"] .card-body:before { background-color: #ffffff !important; } html[data-theme="light"] .card { background-color: rgba(20, 30, 60, 0.10); box-shadow: 0 12px 34px rgba(20, 30, 60, 0.08); } /* "At a glance" pills are .eventGlance (#111121) + white connector lines */ html[data-theme="light"] .eventGlance { background-color: #ffffff; } html[data-theme="light"] .eventGlance:after { background-color: rgba(20, 30, 60, 0.18); } /* white text -> dark ink (.text-text and .text-white are BOTH white) */ html[data-theme="light"] .text-text, html[data-theme="light"] .text-white { color: #1b2233 !important; } /* translucent-white secondary text (organizer/speaker roles) -> dark */ html[data-theme="light"] .text-white\/70 { color: rgba(27, 34, 51, 0.78) !important; } html[data-theme="light"] .text-white\/50 { color: rgba(27, 34, 51, 0.60) !important; } /* muted slate values ("at a glance" details) */ html[data-theme="light"] .text-slate-400, html[data-theme="light"] .text-slate-400\/70 { color: #5b6478 !important; } /* vision section connector lines/borders were white -> subtle dark */ html[data-theme="light"] .md\:border-white { border-color: rgba(20, 30, 60, 0.15) !important; } html[data-theme="light"] .after\:bg-white:after { background-color: rgba(20, 30, 60, 0.18) !important; } /* ---- gradient TEXT: several gradients have near-white / pale stops that vanish on a light background. Re-map those specific gradients to darker, saturated stops so the clipped text stays readable (dark theme untouched). */ html[data-theme="light"] .hero-title { background-image: linear-gradient(to right, #2563eb 2%, #0891b2 22%, #2f54e0 55%) !important; } html[data-theme="light"] .text-gradient.bg-gradient { background-image: linear-gradient(to right, #3b4fe0, #0a8fb8) !important; } html[data-theme="light"] .from-\[\#7BEFFF\].to-\[\#07C926\] { background-image: linear-gradient(to right, #0a93ad, #07901f) !important; } html[data-theme="light"] .from-\[\#59D8CC\].to-\[\#8B48FF\] { background-image: linear-gradient(to bottom right, #149e90, #7a36e6) !important; } html[data-theme="light"] .from-\[\#FF1585\].to-\[\#FFE602\] { background-image: linear-gradient(to right, #e0117a, #b88600) !important; } /* ---- site header ---- */ html[data-theme="light"] .site-header { background: rgba(255, 255, 255, 0.82); border-bottom-color: rgba(20, 30, 60, 0.10); } html[data-theme="light"] .site-header-brand span { color: #1b2233; } html[data-theme="light"] .hdr-icon-btn { background: rgba(20, 30, 60, 0.05); border-color: rgba(20, 30, 60, 0.14); color: #3a4256; } html[data-theme="light"] .hdr-icon-btn:hover { background: rgba(20, 30, 60, 0.10); color: #111; } html[data-theme="light"] .hdr-lang { background: rgba(20, 30, 60, 0.05); border-color: rgba(20, 30, 60, 0.14); } html[data-theme="light"] .hdr-lang-opt { color: #5b6478; } /* ---- custom.css surfaces (translucent-white -> solid white cards) ---- */ html[data-theme="light"] .teacher-quote, html[data-theme="light"] .cd-box, html[data-theme="light"] .reg-card, html[data-theme="light"] .gallery-item { background: #ffffff; border-color: rgba(20, 30, 60, 0.12); box-shadow: 0 12px 34px rgba(20, 30, 60, 0.07); } html[data-theme="light"] .teacher-message { color: #2b3346; } html[data-theme="light"] .reg-name, html[data-theme="light"] .cd-num { color: #1b2233; } /* the dark hero texture is too heavy on a light page — fade it right back */ html[data-theme="light"] .hero-pattern { opacity: 0.18; } /* sponsor / partner cards on a light page: dark frame instead of white */ html[data-theme="light"] #sponsorsGrid .border-slate-700\/30, html[data-theme="light"] #partnersGrid .border-slate-700\/30 { border-color: rgba(20, 30, 60, 0.14) !important; background: rgba(20, 30, 60, 0.02); box-shadow: 0 8px 24px rgba(20, 30, 60, 0.08); } html[data-theme="light"] #sponsorsGrid .border-slate-700\/30:hover, html[data-theme="light"] #partnersGrid .border-slate-700\/30:hover { border-color: rgba(20, 30, 60, 0.28) !important; } /* organizer/speaker placeholder avatars: the SVG is transparent, so the circle colour comes from here. Dark mode keeps the original dark tone; light mode gets a light circle so it matches the page. */ #organizersGrid .profile img, #speakersGrid .profile img { background-image: linear-gradient(180deg, #2b3140, #1b2029); } html[data-theme="light"] #organizersGrid .profile img, html[data-theme="light"] #speakersGrid .profile img { background-image: none; background-color: #e7ebf5; } /* ---- form pages: soften the coloured glow on a light background ---- */ html[data-theme="light"] .reg-glow { opacity: 0.45; } html[data-theme="light"] .field input::placeholder, html[data-theme="light"] .field textarea::placeholder { color: #9aa2b4; } /* ---- dashboard header (its bg is hardcoded, not a variable) ---- */ html[data-theme="light"] .dash-header { background: rgba(255, 255, 255, 0.85); border-bottom-color: rgba(20, 30, 60, 0.10); } html[data-theme="light"] .dash-brand span { color: #1b2233; } html[data-theme="light"] .dash-card { box-shadow: 0 16px 40px rgba(20, 30, 60, 0.08); } /* membership/status badges used pale cyan/green text -> readable on light */ html[data-theme="light"] .status-badge.attendee { color: #0a7fa8; background: rgba(11, 140, 184, 0.10); border-color: rgba(11, 140, 184, 0.38); } html[data-theme="light"] .status-badge.life, html[data-theme="light"] .status-badge.paid { color: #0a8a2f; background: rgba(7, 160, 47, 0.10); border-color: rgba(10, 138, 47, 0.38); } html[data-theme="light"] .status-badge.pending { color: #b5790a; background: rgba(181, 121, 10, 0.10); border-color: rgba(181, 121, 10, 0.38); } /* theme-toggle button in light mode */ html[data-theme="light"] .theme-toggle { background: rgba(20, 30, 60, 0.05); border-color: rgba(20, 30, 60, 0.14); color: #3a4256; } html[data-theme="light"] .theme-toggle:hover { background: rgba(20, 30, 60, 0.10); color: #111; }