/* ===================================================================== NATOKGHOR — DARK PROFILE THEME Used by group.html (public profile) and group-edit.html (dashboard). Merged from the uploaded Open Space design. ===================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Tiro+Bangla&display=swap'); .dk{ --read:'Playfair Display','Tiro Bangla',Georgia,serif; --bg:#0c0c0c; --surface:#161616; --surface-2:#1f1f1f; --border:#2a2a2a; --border-strong:#3a3a3a; --maroon:#922B3E; --maroon-dark:#6e1f2e; --gold:#D4AF37; --gold-dim:#a88820; /* --gold is the ink gold (light mode darkens it to clear 4.5:1 on cream), so anything that FILLS a surface with gold and puts dark type on it uses this one instead — otherwise those chips go dark-on-dark in light mode. */ --gold-fill:#D4AF37; /* --text-dim was #6a6a6a: 3.3:1 on --surface, which is what made the small "Duration" / "Showtimes" labels read as barely there */ --text:#f5f1e8; --text-muted:#9a9a9a; --text-dim:#8b857d; /* Status and form colours for the dashboards. They live here rather than as literals in admin/group-edit/person-edit because those pages set them from inline style attributes, which no stylesheet can override — a var() in an inline style, though, resolves against whatever the theme declares. */ --danger:#ff9b9b; --danger-strong:#ff6b6b; --danger-bg:#3a1414; --danger-bd:#6b2222; --ok:#4CC08A; --warn:#D9A24A; --input-bg:#1a1a1a; --input-ink:#eee; --track:rgba(245,241,232,.12); /* unfilled part of a meter / progress bar */ background:var(--bg); color:var(--text); font-family:'Inter',system-ui,sans-serif; min-height:100vh; /* the dashboards don't load style.css, so they declare it here too */ color-scheme:dark; } /* the dashboards don't load style.css, which is where the public pages declare this on :root — repeat it so their scrollbars and native widgets follow too */ html[data-theme="dark"]{color-scheme:dark;} html[data-theme="light"]{color-scheme:light;} html[data-theme="light"] .dk{color-scheme:light;} /* ---- the date / time picker button ------------------------------------- The browser draws this glyph itself in a shadow root, and on the dark dashboards it came out near-black on a near-black field — the calendar beside "Add a date" looked like it wasn't there. Inverting it with a filter is not safe: `color-scheme: dark` above already asks Chrome to draw it light, so on a browser that honours both you'd invert a white glyph back to black. So the native one is made transparent (opacity:0 keeps it clickable, unlike display:none) and the input paints its own icon in the same spot. Deterministic in every browser and both themes. */ /* body.dk rather than .dk so this outweighs `.dk .field input` and the `.dtp-mini` rules datepick.js injects, both of which set the background shorthand and would otherwise wipe the icon out. */ body.dk input[type="date"], body.dk input[type="time"], body.dk input[type="datetime-local"], body.dk input[type="month"]{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2C45C' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E"); background-repeat:no-repeat; /* sits on top of the real button. opacity:0 does not affect layout, so the native indicator still reserves its own space at the end of the field and the two line up — no extra padding, or the icon would drift off it. */ background-position:right 11px center; background-size:15px 15px; } body.dk input[type="date"]::-webkit-calendar-picker-indicator, body.dk input[type="time"]::-webkit-calendar-picker-indicator, body.dk input[type="datetime-local"]::-webkit-calendar-picker-indicator, body.dk input[type="month"]::-webkit-calendar-picker-indicator{ opacity:0;cursor:pointer; } html[data-theme="light"] body.dk input[type="date"], html[data-theme="light"] body.dk input[type="time"], html[data-theme="light"] body.dk input[type="datetime-local"], html[data-theme="light"] body.dk input[type="month"]{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237E6110' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E"); } .dk .display{font-family:'Playfair Display',Georgia,serif;letter-spacing:-0.01em;} .dk .bn{font-family:'Noto Sans Bengali','Hind Siliguri',sans-serif;} .dk .wrap{max-width:1000px;margin:0 auto;padding:0 1.25rem;} /* :where() so this weighs nothing. As `.dk a` it tied with .menu-pop a, .nav-links a, .ng-crumbs a and .f-links a in style.css and — loading second — won, dragging the shared nav, breadcrumbs and footer to the page's text colour. On light mode that painted the ☰ menu's links near-white on a cream popup, so the menu opened empty. Page content still picks this up. */ :where(.dk) a{color:inherit;text-decoration:none;} .dk .icon{width:16px;height:16px;flex-shrink:0;} /* hero */ .dk .hero{background:linear-gradient(180deg,#141414,#0c0c0c);border-bottom:1px solid var(--border);padding:2.4rem 0 2rem;} .dk .hero-inner{display:flex;gap:1.6rem;align-items:flex-start;flex-wrap:wrap;} .dk .theatre-avatar{width:96px;height:96px;border-radius:50%;background:var(--maroon);display:flex;align-items:center;justify-content:center;flex-shrink:0;border:2px solid var(--gold);} .dk .theatre-avatar .initials{font-family:'Playfair Display',serif;font-size:2.2rem;font-weight:700;color:var(--text);} /* contain, never cover — a round frame filled by a wide wordmark cropped the ends clean off. No padding: logos sit edge to edge as they were designed. */ .dk .theatre-avatar img{width:100%;height:100%;border-radius:50%;object-fit:contain;} .dk .hero-meta{flex:1;min-width:260px;} .dk .eyebrow{display:flex;align-items:center;gap:7px;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:.5rem;} .dk .verified-dot{width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 3px rgba(212,175,55,.2);} .dk .theatre-name{font-size:2.4rem;font-weight:700;line-height:1.05;} .dk .theatre-name-bn{font-size:1rem;color:var(--text-muted);margin-top:.2rem;} .dk .theatre-university{font-size:1.15rem;font-weight:600;color:var(--gold);margin-top:.35rem;line-height:1.3;} .dk .theatre-tagline{font-size:.95rem;color:var(--text-muted);line-height:1.6;margin:.9rem 0;max-width:640px;} .dk .hero-info{display:flex;gap:1.4rem;flex-wrap:wrap;margin-bottom:1.1rem;} .dk .hero-info-item{display:flex;align-items:center;gap:7px;font-size:.82rem;color:var(--text-muted);} .dk .hero-actions{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;margin-bottom:1.3rem;} /* Half the buttons on these pages are and half