/* ========================================================================== Utsho — colors.css Every hex code on the entire site lives here, once. Nothing else in this project should ever hardcode a color — reference these variables instead. v2 (design elevation pass): same core identity — warm cream + terracotta — but deepened and richer throughout for a more premium feel. Added gradient variables for tasteful depth (used sparingly: hero, primary buttons — never everywhere, or it stops feeling premium and starts feeling loud). ========================================================================== */ :root { /* ---- Base ---- */ --bg: #F6EEDF; /* warm cream page background — deepened from v1 */ --bg-deep: #EFE3CC; /* slightly deeper cream, used for subtle section banding */ --card: #FFFDF9; /* default card/surface fill — barely-warm white, not stark */ --text: #1E160F; /* rich warm near-black — higher contrast than v1 */ --muted: #7C6D57; /* secondary/meta text, timestamps, captions */ --border: #E3D3B4; /* default hairline border — richer than v1 */ --border-strong: #D2B98D; /* stronger border / dashed-tree UI */ /* ---- Brand ---- */ --primary: #A8451D; /* deep terracotta — richer than v1's lighter tone */ --primary-deep: #7A3113; /* darkest end of primary gradient / hover state */ --secondary: #D9822E; /* warm amber-orange — richer than v1's burnt orange */ /* ---- Functional accents (each has ONE job — do not mix) ---- */ --accent: #2F6B5A; /* deep forest teal — completion, saved state, context cards */ --accent-deep: #1E4A3E; /* darker teal for hover/emphasis */ --sky: #5D8FAE; /* deeper calm blue — focus UI, "welcome back", info callouts only */ --gold: #9C7A2E; /* richer muted gold — achievements ONLY */ /* ---- Soft tints (backgrounds for colored callout cards) ---- */ --accent-tint: #E7F0EB; /* teal-tinted card background */ --sky-tint: #E9F0F5; /* sky callouts */ --gold-tint: #F7EFDC; /* gold-tinted card background (achievements) */ --primary-tint:#F8E4D6; /* terracotta-tinted card background */ --warn-tint: #FAE5DB; /* problem/warning callouts */ /* ---- Gradients (use sparingly — hero backgrounds, primary buttons, the signature mark. Everywhere else stays flat, or nothing reads as premium anymore, it just reads as busy.) ---- */ --gradient-primary: linear-gradient(135deg, var(--secondary) 0%, var(--primary) 60%, var(--primary-deep) 100%); /* v3 (premium/minimal pass): was a 4-hue gradient (mint → lavender → terracotta-tint → gold-tint) crammed into one background — the exact "5 colors clustered together" anti-pattern rule 4 below already warned against. Replaced with a calm two-stop cream wash; personality now comes from the ink-arc watermark motif (see motifs.css) layered on top, not from color variety. */ --gradient-hero-bg: linear-gradient(120deg, var(--bg) 0%, var(--primary-tint) 100%); --gradient-accent: linear-gradient(135deg, #3D8A74 0%, var(--accent) 100%); /* ---- Medal tones (leaderboard top 3 — muted, NOT literal gold/silver/bronze) ---- */ --medal-1: var(--gold); --medal-2: var(--sky); --medal-3: #B08355; /* muted bronze-tan */ /* ---- Status colors (Competitions page) ---- */ --status-ongoing: var(--primary); --status-closing: var(--secondary); --status-upcoming: var(--sky); --status-passed: var(--muted); --status-scholarship: var(--gold); --status-internship: var(--accent); /* ---- Illustration palette: mint/teal family + violet ---- A second layer of color, distinct from the functional accents above. These exist to give hero visuals, feature icons, and section background bands real chromatic richness — without touching buttons, links, or any state-meaning color. Assigned roles below (see usage rules) so they read as intentional, not decorative sprinkle. */ --mint-1: #E3F3F0; /* lightest — section background tint bands */ --mint-2: #CFE8E4; --mint-3: #ACD9D9; --mint-4: #8BCAC3; --mint-5: #6CC2C0; /* deepest — icon backgrounds, decorative shapes */ --sage: #C2DFC2; --violet: #6A5ACD; --violet-deep: #4B3D91; --violet-tint: #EDE9FA; --gradient-mint: linear-gradient(135deg, var(--mint-3) 0%, var(--mint-5) 100%); --gradient-violet: linear-gradient(135deg, #D9CDF0 0%, var(--violet) 55%, var(--violet-deep) 100%); /* ---- New accent pairs (Aug 2026 expansion) ---- Six requested color pairs. Each is given exactly ONE real job below — see the usage rules section for why, and where each is (and isn't) used today. Unused-for-now pairs are kept here, documented, rather than forced into visibility just to "use" them — the whole reason the existing palette above still looks premium after months of growth is that nothing gets added without a genuine, singular job. */ --neon-orange: #FF6115; /* urgency ONLY — Exam Countdown when time is short, nothing else */ --porcelain: #FFFCF4; /* paired light surface for neon-orange callouts */ --forest-graphite: #18251D; /* reserved: future dark-surface / dark-mode base */ --acid-mint: #B7FF72; /* unread/new indicator dot ONLY (e.g. notification bell) */ --signal-violet:#7A35FF; /* vivid Concept Bank moments ONLY — the "+ Post" button glow, not general violet (use --violet for that) */ --mist-gray: #F0F2F5; /* neutral input/disabled-state surface, an alternative to --border when a cooler neutral reads better than warm cream */ --prompt-blue: #0B132B; /* reserved: future AI/assistant-feature identity color */ --ai-green: #39FF88; /* reserved: pairs with --prompt-blue for the same future feature */ --inkberry: #1A0B2E; /* reserved: Digest section's own identity color once Digest is built out */ --peach: #FFB7A5; /* paired Digest tint, reserved alongside --inkberry */ --clay-brown: #6B352A; /* streak/flame moments ONLY — e.g. a lit streak-counter accent */ --soft-butter: #FFF1A6; /* paired tint for clay-brown streak callouts */ /* ---- Ink-spread system (Sep 2026) ---- Replaces the earlier brush-stroke/watercolor motif entirely, which repeatedly caused visual bugs (thin disconnected shapes, awkward clipping, overlapping text). An ink-spread is a soft, blurred, irregular glow — like a drop of ink diffusing into paper — built with plain CSS radial-gradient, not an external SVG shape. This is fundamentally safer: no hard edges to clip against, no fixed path that can drift into a text column, and it scales naturally with its container at any size. Each variant is a different color for a different part of the site, applied via .ink-spread--* utility classes in presentation.css. The core cream page background itself never changes. */ --ink-terracotta: radial-gradient(circle closest-side, rgba(191,91,61,0.22) 0%, rgba(191,91,61,0) 100%); --ink-teal: radial-gradient(circle closest-side, rgba(79,139,130,0.18) 0%, rgba(79,139,130,0) 100%); --ink-violet: radial-gradient(circle closest-side, rgba(106,90,205,0.16) 0%, rgba(106,90,205,0) 100%); --ink-gold: radial-gradient(circle closest-side, rgba(185,154,78,0.2) 0%, rgba(185,154,78,0) 100%); --ink-sky: radial-gradient(circle closest-side, rgba(93,143,174,0.16) 0%, rgba(93,143,174,0) 100%); --ink-mint: radial-gradient(circle closest-side, rgba(108,194,192,0.18) 0%, rgba(108,194,192,0) 100%); } /* ========================================================================== USAGE RULES (read before adding a new color anywhere in the project) -------------------------------------------------------------------------- 1. --sky is reserved for calm/focus features only (focus timer, returning- visitor banners, info callouts). Do not use it for generic UI blue. 2. --gold is reserved for achievements only (badges, streaks, featured tags, leaderboard #1). If it starts showing up as decoration, stop. 3. Colored cards (sky/gold/teal/terracotta) get a tinted box-shadow at low opacity in their own hue — see presentation.css. Plain white/cream cards keep the default neutral shadow. 4. Gradients (--gradient-*) are reserved for: the hero section background, primary CTA buttons, feature icons, and the signature visual. Do not apply a gradient to cards, tags, or body text — flat everywhere else is what makes the gradient moments read as intentional, not noisy. 5. Mint family (--mint-*, --sage) is illustration-only: hero visual, feature-icon backgrounds, and section background bands (a full-width tinted strip behind a section, for visual rhythm between plain-cream sections). Never use it for buttons, links, or text color. 6. Violet is a second "spotlight" accent, used deliberately sparingly: one feature icon, part of the hero visual, and (later) the Digest section's identity color. It should never appear more than 2-3 places on any single page — that's what keeps it feeling chosen, not thrown in. 7. Need a color that isn't here? It almost certainly means you should reuse an existing one instead. This file should rarely change once set. 8. The Aug 2026 accent pairs (neon-orange/porcelain, forest-graphite/ acid-mint, signal-violet/mist-gray, prompt-blue/ai-green, inkberry/ peach, clay-brown/soft-butter) each have exactly ONE assigned job, commented next to their definition above. Three are actively used today (neon-orange for Exam Countdown urgency, acid-mint for unread indicators, signal-violet for the Concept Bank post button). The other three are deliberately reserved for a specific future feature each, not available for general decoration — using them anywhere else defeats the point of having a rule at all. ========================================================================== */