/* RailGuruji — shared LIGHT / institutional theme. Used by the generated study-notes pages, the notes hub, demo, premium and privacy. The CBT exam screen keeps its own exam-authentic styling, and index.html carries this same palette inline. The old dark "glass forest" variable NAMES are kept on purpose — every rule in this file and in generate-site.js refers to them, so re-pointing the tokens converts the whole site without touching a hundred selectors. Read them as roles, not colours: --emerald is "the accent", --gold is "the highlight". On a light ground the -lt variants are DARKER than their base, because on white it is depth, not brightness, that reads as emphasis. */ /* Tell the browser this page has both palettes, so the scrollbars, form controls and the default canvas it paints before CSS applies match the theme instead of flashing white on a dark desktop. */ :root { color-scheme: light dark; } :root { /* the light palette, matching index.html exactly */ --paper: #FBFAF7; --card: #FFFFFF; /* --green carries TWO roles that cannot both survive a dark palette: it is text on the paper (the wordmark, h1, chip labels) and it is the FILL behind white text on the primary button and the active tab. Inverting one role breaks the other — a light green readable on a dark page is far too pale to sit behind white. So the roles are split. --green stays the text/accent role and goes light in dark mode; --green-solid is the fill and stays deep in both; --on-green is whatever reads on that fill. In light mode all three resolve to what was there before, so the light site is unchanged. */ --green-solid: #0F4430; --on-green: #FFFFFF; /* The sticky header was a hard-coded rgba() of the paper colour, so it would have stayed a bright bar across the top of every dark page. */ --head-bg: rgba(251,250,247,.92); --ink: #15211B; --muted: #5B6B62; --green: #0F4430; --green-lt:#1C6647; --green-w: #EFF4F1; --brass: #A9762A; --brass-dk:#8F6220; /* 5.3:1 on white — safe for words */ --brass-lt:#C9973F; /* on dark green only */ --brass-w: #FDFAF3; --brass-brd:#E8DCC2; --line: #E5E1D8; --line-2: #D4CFC2; /* legacy role names, re-pointed at the light palette */ --forest-0:#FBFAF7; --forest-1:#F4F2EC; --forest-2:#EFF4F1; --emerald:#1C6647; --emerald-lt:#0F4430; --emerald-dp:#0F4430; --gold:#A9762A; --gold-lt:#8F6220; --tg:#1C76AC; --glass:#FFFFFF; --glass-2:#FDFAF3; --brd:#E5E1D8; --brd-2:#D4CFC2; --good:#1C6647; --bad:#A3342A; --shadow:0 10px 30px -18px rgba(21,33,27,.28); /* ---- the revision-notebook layer ------------------------------------------ The study content is set as a student's own revision notes. Two faces and a small set of pens carry it, and each pen means exactly ONE thing. --hand is Kalam, the ONLY handwriting family on Google Fonts that covers Devanagari as well as Latin. That matters for the same reason Tiro was chosen for the display face: one family sets both scripts, so a heading does not change voice between EN and हिं. Its Devanagari reads much less "handwritten" than its Latin — there is no alternative, and the pens and the ruled paper carry the effect on the Hindi page instead. --read is the reading face, kept for anything that must be read EXACTLY: tables, and the figures when the printed-figures option is switched on. Every ratio below is measured against --card by computed style, not judged by eye — see content-pipeline/check-contrast.js and the audit noted in the design memory. The rule that keeps this from becoming noise is a RARITY BUDGET: the more often a mark appears, the quieter it must be. */ --hand: "Kalam", "Segoe Print", "Bradley Hand", "Noto Sans Devanagari", cursive; --read: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Devanagari", "Noto Sans", sans-serif; --pen-forest: #0F4430; /* the heading pen — 1 per card 11.1:1 */ --pen-blue: #1B4E8F; /* the sub-clause pen — 2-5 per card 8.3:1 */ --pen-red: #A3342A; /* the figures pen — 3-8 per card 6.8:1 */ --pen-brass: #8F6220; /* the caps terms — ~11 per card 5.3:1 */ --pen-red-soft:#D4867C; /* the pen line under a figure — a rule, never text */ --rule: #E1E9E4; /* the horizontal ruling of the paper */ --margin-rule: #DFA79F; /* the rose vertical line of an Indian ruled notebook */ --hl-yellow: #FFEFA1; /* the highlighter — max 2 a page, or it means nothing */ --hl-mint: #D3EDDC; } /* DARK PALETTE. * * Chrome's dark setting only repaints Chrome's own furniture — tabs, toolbar, menus. * A site is dark only if it says so, which is why ChatGPT and WhatsApp Web follow the * desktop and this site did not: it had no dark palette at all. * * Only the tokens are redefined; not one selector below changes. The roles are kept * rather than the colours — on a dark ground the -lt variants are BRIGHTER than their * base, the mirror of the note above, because there it is light and not depth that * reads as emphasis. * * Every pairing here is measured, not eyeballed — run content-pipeline/check-contrast.js, * which reads both palettes straight out of this file. Body text 15.73:1, muted 7.95:1, * the green accent 9.57:1, brass 9.46:1, white on the button fill 6.91:1, and the * weakest pairing in the palette — white on the button's hover fill — 4.87:1. All are * past the 4.5:1 AA floor for body text. */ @media (prefers-color-scheme: dark) { :root { --paper: #0F1613; --card: #17211C; --ink: #E9EFEA; --muted: #9DAFA4; /* the accent role: light enough to read AS TEXT on the dark paper */ --green: #7FCBA0; /* the fill role: stays deep, so white still reads on the primary button */ --green-solid: #1C6647; --on-green: #FFFFFF; --green-lt:#24805A; /* a green-tinted SURFACE, not a pale wash — the light theme's #EFF4F1 would be a glaring panel here */ --green-w: #16241D; --brass: #D9A85A; --brass-dk:#E0B36B; /* the text role — light on dark, the reverse of the light theme */ --brass-lt:#C9973F; --brass-w: #1E1A12; --brass-brd:#4A3D22; --line: #26332C; --line-2: #35443B; --head-bg: rgba(15,22,19,.92); /* legacy role names, re-pointed at the dark palette */ --forest-0:#0F1613; --forest-1:#141D19; --forest-2:#16241D; --emerald:#7FCBA0; --emerald-lt:#9BD9B6; --emerald-dp:#1C6647; --gold:#D9A85A; --gold-lt:#E0B36B; /* --tg is only ever a FILL behind white text (the Telegram button), never text itself, so it must stay deep here. Lightening it for the dark page would have put white on pale blue at about 2:1. */ --tg:#1C76AC; --glass:#17211C; --glass-2:#1E1A12; --brd:#26332C; --brd-2:#35443B; --good:#7FCBA0; --bad:#F08C7E; /* a light-theme shadow is invisible on a dark ground; depth here comes from a deeper, wider shade */ --shadow:0 12px 34px -18px rgba(0,0,0,.75); /* The notebook on a dark leaf. These are not the light pigments dimmed — they are LIGHT INKS, re-measured against the dark --card. */ --pen-forest: #7FCBA0; /* 8.7:1 */ --pen-blue: #8FB8E8; /* 8.0:1 */ /* Lightened from #F0968A, which measured a fine 7.4:1 on the bare leaf but fell to 4.49:1 — under the floor — where a highlighter sat behind it. A pen has to hold up on every ground it is used on, not just the common one. */ --pen-red: #F5A99E; /* 8.7:1 bare, 5.8:1 through the highlighter */ --pen-brass: #E0B36B; /* 9.5:1 */ --pen-red-soft:#8A5048; --rule: #243029; --margin-rule: #7A5049; /* A solid yellow block on a dark page is a lamp, not a highlighter. Here the marker is a translucent glaze that lifts the paper a little. */ --hl-yellow: rgba(224,179,107,.18); --hl-mint: rgba(127,203,160,.15); } /* The primary button's glow was tuned for a white page and disappears on this one. */ .rg-btn-primary { box-shadow:0 10px 24px -14px rgba(0,0,0,.8); } /* A FALLBACK ONLY — see the note below before relying on it. These components paint a gradient that RUNS UP TO --emerald-lt with white text on top. --emerald-lt has to be light here because it is also a text colour on the paper, so the far end of that gradient carried white at roughly 1.7:1. BUT demo.html, premium.html and privacy.html define these same classes in their OWN