/* ============================================================ BRAND.CSS — Ashoka University Brand Token System (LOCKED) Source: 10 Years Ashoka University Brand Guidelines (29pp PDF) ============================================================ THIS FILE IS THE SINGLE SOURCE OF TRUTH FOR ALL DESIGN TOKENS. RULES: 1. Every page MUST import this file. 2. No page may override these values inline. 3. No new colors, fonts, or spacing values may be introduced outside this file without explicit user approval. 4. All values are extracted directly from the Ashoka University Brand Guidelines PDF — they are non-negotiable. FONT LOADING: This file assumes the following Google Fonts link is present in every HTML : Georgia is a system font — no loading required. ============================================================ */ :root { /* ═══════════════════════════════════════════ 1. TYPOGRAPHY — Brand Fonts Source: Brand Guidelines pp. 11-15 ═══════════════════════════════════════════ */ /* PRIMARY: Georgia — headers, headlines, display text "Georgia should be used for headlines, sub-headlines, and body text" "Primary Fonts: Georgia as Header" */ --font-display: Georgia, 'Times New Roman', serif; /* PRIMARY: Open Sans — body copy, sub-heads, metadata "Open Sans is a freely available typeface on Google Fonts" "Open Sans can be used for body copy and sub heads" RULE: Do NOT use Open Sans for headlines or primary-focus text */ --font-sans: 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif; /* CREATIVE: Zilla Slab — sparingly, for headers ONLY "Creative fonts are to be used only for headers in all applications" "Do not use Creative fonts for body copy text" "Do not use Kepler and Zilla together in one application" We use Zilla (free on Google Fonts) instead of Kepler (licensed). */ --font-creative: 'Zilla Slab', Georgia, serif; /* ACCENT: For technical/monospace contexts (stats, labels, code) Not in brand guidelines — used minimally for technical credibility. Falls back to Georgia per brand spec. */ --font-mono: 'Zilla Slab', Georgia, serif; /* ── Typography Scale ── */ --text-xs: 0.75rem; /* 12px — metadata, captions */ --text-sm: 0.875rem; /* 14px — small labels, tags */ --text-base: 1rem; /* 16px — body default */ --text-lg: 1.125rem; /* 18px — lead paragraphs */ --text-xl: 1.25rem; /* 20px — card titles */ --text-2xl: 1.5rem; /* 24px — section subtitles */ --text-3xl: 1.875rem; /* 30px — h3 */ --text-4xl: 2.25rem; /* 36px — h2 */ --text-5xl: 3rem; /* 48px — h1 */ --text-6xl: 4.5rem; /* 72px — hero display */ /* ── Font Weights ── */ --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; /* Open Sans Semi-bold: titles, emphasis */ --weight-bold: 700; /* Georgia Bold: primary headings */ --weight-extrabold: 800; /* ── Line Heights ── */ --leading-tight: 1.25; /* headings */ --leading-snug: 1.375; /* card titles */ --leading-normal: 1.5; /* default */ --leading-relaxed: 1.65; /* body text — brand spec */ --leading-loose: 2; /* spacious */ /* ── Letter Spacing ── */ --tracking-tight: -0.025em; --tracking-normal: 0; --tracking-wide: 0.025em; --tracking-wider: 0.05em; /* eyebrow labels */ --tracking-widest: 0.1em; /* all-caps labels */ /* ═══════════════════════════════════════════ 2. COLORS — Ashoka University Brand Palette Source: Brand Guidelines pp. 16-18 ═══════════════════════════════════════════ */ /* ── Primary Colors ── */ --brand-red: #C4122F; /* RGB 196:18:47, CMYK 0:100:80:20 */ --brand-blue: #0D3862; /* RGB 13:56:98, CMYK 100:80:30:30 */ /* ── Secondary Colors ── */ --brand-deep-red: #a70e13; /* RGB 167:14:19, CMYK 0:100:100:35 */ --brand-deep-blue: #15113e; /* RGB 21:17:62, CMYK 100:99:41:50 */ --brand-beige: #F7EBD3; /* RGB 247:235:211, CMYK 2:6:18:0 */ --brand-neutral-beige:#FBF3DF; /* RGB 251:243:223, CMYK 1:3:13:0 */ --brand-cool-grey: #6D7F89; /* RGB 109:127:137, CMYK 65:47:42:0 */ --brand-black: #000000; /* RGB 0:0:0, CMYK 75:68:67:90 */ --brand-blue-grey: #7F93A0; /* RGB 127:147:160, CMYK 55:36:31:0 */ --brand-misty-grey: #C9D4DB; /* RGB 201:212:219, CMYK 20:11:9:0 */ /* ── Semantic Color Aliases ── */ --color-primary: var(--brand-blue); --color-primary-dark: var(--brand-deep-blue); --color-primary-light: var(--brand-blue-grey); --color-accent: var(--brand-red); --color-accent-dark: var(--brand-deep-red); /* Legacy aliases — backward compatibility with existing CSS */ --color-navy: var(--brand-blue); --color-navy-light: #134A80; --color-navy-dark: #092847; --color-red: var(--brand-red); --color-red-light: #E8586F; --color-red-dark: var(--brand-deep-red); --color-blue: var(--brand-blue); --color-blue-light: var(--brand-blue-grey); --color-blue-dark: var(--brand-deep-blue); /* Remove Mphasis F1 gradient — not part of Ashoka brand */ --gradient-f1: none; /* ── Semantic Colors ── */ --color-text: #1a1a1a; --color-text-secondary: #4a5568; --color-text-muted: var(--brand-cool-grey); --color-text-inverse: #FFFFFF; --color-link: var(--brand-blue); --color-link-hover: #092847; --color-bg: #FFFFFF; --color-bg-alt: var(--brand-neutral-beige); --color-bg-warm: var(--brand-beige); --color-bg-dark: var(--brand-blue); --color-border: var(--brand-misty-grey); --color-border-light: #E8E0D0; /* ── Neutral Palette (warm-shifted per brand) ── */ --gray-50: #FDFBF7; --gray-100: var(--brand-neutral-beige); --gray-200: #E8E0D0; --gray-300: var(--brand-misty-grey); --gray-400: var(--brand-blue-grey); --gray-500: var(--brand-cool-grey); --gray-600: #4a5568; --gray-700: #2d3748; --gray-800: #1a202c; --gray-900: #171923; /* ═══════════════════════════════════════════ 3. PILLAR COLORS These are NOT from the Ashoka brand guidelines. They are project-specific identifiers for the five research pillars. Approved by user. ═══════════════════════════════════════════ */ --pillar-ai: #2563EB; --pillar-ai-light: #DBEAFE; --pillar-ai-bg: #EFF6FF; --pillar-bharatsim: #059669; --pillar-bharatsim-light: #D1FAE5; --pillar-bharatsim-bg: #ECFDF5; --pillar-chart: #D97706; --pillar-chart-light: #FEF3C7; --pillar-chart-bg: #FFFBEB; --pillar-cyber: #7C3AED; --pillar-cyber-light: #EDE9FE; --pillar-cyber-bg: #F5F3FF; --pillar-makerspace: #DC2626; --pillar-makerspace-light:#FEE2E2; --pillar-makerspace-bg: #FEF2F2; /* ═══════════════════════════════════════════ 4. SPACING SCALE ═══════════════════════════════════════════ */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ --space-32: 8rem; /* 128px */ /* ═══════════════════════════════════════════ 5. LAYOUT ═══════════════════════════════════════════ */ --container-sm: 640px; --container-md: 768px; --container-lg: 1024px; --container-xl: 1200px; /* Brand spec */ --container-2xl: 1480px; --header-height: 72px; /* ═══════════════════════════════════════════ 6. BORDERS & RADII ═══════════════════════════════════════════ */ --radius-sm: 0px; --radius-md: 2px; --radius-lg: 4px; --radius-xl: 6px; --radius-full: 9999px; /* ═══════════════════════════════════════════ 7. SHADOWS (warm-tinted to match brand) ═══════════════════════════════════════════ */ --shadow-sm: 0 1px 2px rgba(13, 56, 98, 0.06); --shadow-md: 0 4px 6px -1px rgba(13, 56, 98, 0.08), 0 2px 4px -2px rgba(13, 56, 98, 0.04); --shadow-lg: 0 10px 15px -3px rgba(13, 56, 98, 0.10), 0 4px 6px -4px rgba(13, 56, 98, 0.05); --shadow-xl: 0 20px 25px -5px rgba(13, 56, 98, 0.10), 0 8px 10px -6px rgba(13, 56, 98, 0.04); /* ═══════════════════════════════════════════ 8. TRANSITIONS ═══════════════════════════════════════════ */ --transition-fast: 150ms ease; --transition-base: 250ms ease; --transition-slow: 350ms ease; --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1); } /* ═══════════════════════════════════════════ PILLAR DATA ATTRIBUTE BINDINGS ═══════════════════════════════════════════ */ [data-pillar="ai"] { --pillar-color: var(--pillar-ai); --pillar-bg: var(--pillar-ai-bg); --pillar-light: var(--pillar-ai-light); } [data-pillar="bharatsim"] { --pillar-color: var(--pillar-bharatsim); --pillar-bg: var(--pillar-bharatsim-bg); --pillar-light: var(--pillar-bharatsim-light); } [data-pillar="chart"] { --pillar-color: var(--pillar-chart); --pillar-bg: var(--pillar-chart-bg); --pillar-light: var(--pillar-chart-light); } [data-pillar="cyber"] { --pillar-color: var(--pillar-cyber); --pillar-bg: var(--pillar-cyber-bg); --pillar-light: var(--pillar-cyber-light); } [data-pillar="makerspace"] { --pillar-color: var(--pillar-makerspace); --pillar-bg: var(--pillar-makerspace-bg); --pillar-light: var(--pillar-makerspace-light); } /* ═══════════════════════════════════════════ BRAND TYPOGRAPHY RULES (from guidelines) Applied as base element styles. ═══════════════════════════════════════════ */ body { font-family: var(--font-sans); font-size: var(--text-base); font-weight: var(--weight-regular); line-height: var(--leading-relaxed); color: var(--color-text); text-align: left; /* BRAND RULE: "All body text must be left aligned" */ } /* "Georgia as Header" — brand spec p.14 */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); text-align: left; /* BRAND RULE: body text never centered/right/justified */ } /* "Never set body text in upper case" — brand spec p.14 */ p, li, td, dd, blockquote { text-transform: none; } /* ═══════════════════════════════════════════ APPROVED COLOR PAIRINGS (from p.18) Use these combinations for sections: 1. Red + Blue (primary pair) 2. Red + Neutral Beige (warm) 3. Blue + Beige (academic) 4. Blue + Red + Misty Grey (four-color) Secondary colors COMPLEMENT primaries. Secondary colors NEVER REPLACE primaries. ═══════════════════════════════════════════ */