/* ═══════════════════════════════════════════════════════════════════════════ IFMSA-Kurdistan · THEME ═══════════════════════════════════════════════════════════════════════════ EDIT THIS FILE TO CHANGE THE LOOK OF THE WHOLE SYSTEM. Every colour, size, radius and shadow used by the admin panel, the member portal, the login page and the password page lives here and nowhere else. Change a value once and it applies everywhere. HOW TO USE 1. Open this file in any text editor (Notepad, VS Code, TextEdit…). 2. Change the values after the colons. Keep the semicolons. 3. Save, then refresh the site in your browser to see it. 4. Commit the file so the change is kept in version control. WHAT NOT TO CHANGE - Don't rename anything starting with `--`. Those names are referenced throughout the stylesheets; renaming one silently breaks it. - Don't delete a line. If you want the default back, see the comment at the end of each line for the original value. ═══════════════════════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap'); :root{ color-scheme: light; /* ───────────────────────────────────────────────────────────────────────── 1. FONTS Montserrat everywhere, the typeface of ifmsakurdistan.org (client, 26/09/2026; it replaced DM Sans and the Newsreader serif). --ff is the working face for text, tables and forms. --ff-display is for page titles, card titles and the big score figures. --ff-mono is kept for older markup; it now points at the text face, and numbers use tabular figures so columns still line up. ───────────────────────────────────────────────────────────────────────── */ --ff:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --ff-display:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --ff-mono:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; /* ───────────────────────────────────────────────────────────────────────── 2. BRAND COLOURS IFMSA-Kurdistan's own blues, as on ifmsakurdistan.org (client, 26/09/2026): the brand blue for the sidebar and hero panels, the site's sky blue for highlights. --highlight is decorative: bars, markers, the active nav edge, rings on the blue panels (5:1 on --navy). ───────────────────────────────────────────────────────────────────────── */ --highlight:#669be1; /* sky blue highlight — default #669be1 */ --highlight-wash:#edf3fd; /* pale sky wash — default #edf3fd */ --teal:#4aa59d; /* decorative teal — default #4aa59d */ --teal-wash:#eaf8f5; /* pale teal wash — default #eaf8f5 */ --gold-d:#d7aa52; /* decorative gold — default #d7aa52 */ --blue:#6f8fc1; /* decorative blue — default #6f8fc1 */ --lavender:#9a8ed0; /* decorative lavender — default #9a8ed0 */ --navy:#111f74; /* sidebar & hero panels — default #111f74 (IFMSA-Kurdistan blue) */ --navy-2:#1d2c85; /* raised panel on navy — default #1d2c85 */ --navy-deep:#071140; /* far end of navy gradients — default #071140 */ --on-navy-muted:#b3bde6; /* quiet text on navy (7.7:1) — default #b3bde6 */ /* flag colours, kept for older markup */ --brand-red:#e7705f;--brand-gold:#d7aa52;--brand-green:#4aa59d; /* ───────────────────────────────────────────────────────────────────────── 3. ACCENT — the main interactive colour Buttons, links, focus rings. A royal blue, brighter than --navy so a button stands apart from the panels; white text on it is 6.1:1. ───────────────────────────────────────────────────────────────────────── */ --accent:#2a5bc8; /* buttons, links — default #2a5bc8 */ --accent-h:#1f4aa8; /* hover, darker — default #1f4aa8 */ --accent-ink:#1d3f94; /* text on pale tints — default #1d3f94 */ --accent-soft:rgba(102,155,225,.14); /* pale wash behind active items */ --accent-line:rgba(102,155,225,.32); /* hairline on tinted chips */ /* ───────────────────────────────────────────────────────────────────────── 4. SURFACES & TEXT Cool paper greys tinted towards the ink. Change them together. ───────────────────────────────────────────────────────────────────────── */ --bg:#f7f8f6; /* page background behind cards — default #f7f8f6 */ --paper:#ffffff; /* card / panel background — default #ffffff */ --sunk:#f9faf8; /* table header band, insets — default #f9faf8 */ --ink:#17232e; /* primary text, headings — default #17232e */ --ink-2:#3a4852; /* body text, table cells — default #3a4852 */ --ink-3:#5d6b74; /* muted labels, captions — default #5d6b74 */ --rule:#e5e9e6; /* borders, dividers — default #e5e9e6 */ --rule-soft:#edf0ed; /* faint row dividers — default #edf0ed */ /* ───────────────────────────────────────────────────────────────────────── 5. STATUS COLOURS teal = good, gold = warning, red = danger. Each has four shades: (base) strong colour, used for text and fills -bg pale background for alert banners -icon slightly stronger tint for icon chips -ink darkest, for text sitting on the -bg tint ───────────────────────────────────────────────────────────────────────── */ --ok:#2e8078; --ok-bg:#eaf8f5; --ok-icon:#d3efe9; --ok-ink:#22655e; --warn:#8a6214; --warn-bg:#fff8e8; --warn-icon:#f8e8c4; --warn-ink:#6f4f10; --err:#b3322a; --err-bg:#fdefec; --err-icon:#f9d6d0; --err-ink:#8f261f; --info:#4e6e9d; --info-bg:#edf3fc; --info-icon:#d9e4f6; --info-ink:#3a5680; /* Older names still used by inline styles in the PHP pages. Keep these matching the values above. */ --red:var(--brand-red);--gold:var(--brand-gold);--green:var(--brand-green); --primary:#2a5bc8;--primary-dark:#1f4aa8; --light:#5d6b74;--text:#17232e; --success:#2e8078;--warning:#8a6214;--danger:#b3322a; --border:#e5e9e6; /* ───────────────────────────────────────────────────────────────────────── 6. SHAPE & SPACING Radius: 0 = square corners, 12 = current, 20 = very rounded. ───────────────────────────────────────────────────────────────────────── */ --r:12px; /* cards, big panels — default 12px */ --r-s:8px; /* buttons, inputs — default 8px */ --r-xs:6px; /* badges, small chips — default 6px */ --r-pill:999px; /* fully rounded pills — leave as is */ --card-pad:22px; /* padding inside cards — default 22px */ --side-w:252px; /* sidebar width — default 252px */ --top-h:76px; /* top bar height — default 76px */ /* ───────────────────────────────────────────────────────────────────────── 7. SHADOWS Tinted with the ink colour rather than pure black. ───────────────────────────────────────────────────────────────────────── */ --sh:0 2px 10px rgba(23,35,46,.04),0 1px 2px rgba(23,35,46,.03); /* cards at rest */ --sh-md:0 6px 18px rgba(23,35,46,.06),0 1px 3px rgba(23,35,46,.03); --sh-lg:0 16px 42px rgba(23,35,46,.08),0 2px 9px rgba(23,35,46,.03); /* hover, modals */ --sh-accent:0 6px 16px rgba(42,91,200,.24); /* accent buttons */ /* ───────────────────────────────────────────────────────────────────────── 8. MOTION --tr is how long transitions take. 0ms turns animation off entirely. ───────────────────────────────────────────────────────────────────────── */ --ease:cubic-bezier(.23,1,.32,1); --tr:180ms; /* default 180ms */ /* ───────────────────────────────────────────────────────────────────────── 9. STACKING ORDER — leave alone unless something overlaps wrongly. ───────────────────────────────────────────────────────────────────────── */ --z-nav:100;--z-side:200;--z-overlay:900;--z-modal:1000; }