/* ========================================================================== IU brand alignment layer — IU Brand Guidelines V2 / Applicant Portal tokens -------------------------------------------------------------------------- Loaded AFTER styles.css. It only redefines tokens, so removing it reverts the site to the approved CPLE look with no other change. Enable with 'brand_align' => true in app/config.php. Source of truth: the IU Applicant Portal style guide (Huzaifa). Every value below is copied from it, not interpreted. ========================================================================== */ :root{ /* ---- heritage colours, used solid. No tints or screens, per the guide. --- */ --navy: #1A428A; /* --iu-blue · primary · 9.6:1 on white */ --navy-700: #13294B; /* --iu-navy · hover, headings · 14.5:1 */ --navy-800: #13294B; --navy-900: #13294B; /* ---- the tint roles become sanctioned neutrals, not washed-out navy ----- */ --navy-400: #7A8494; /* --border-control */ --navy-100: #D9DDE3; /* --border-card */ --navy-50: #F3F4F6; /* --subtle */ --header-bg: #F4F5F7; /* --page */ --paper: #F4F5F7; --white: #FFFFFF; /* ---- gold is an accent fill only; it is never text on white ------------- */ --gold: #F7BE00; --gold-400: #F7BE00; --gold-50: #FFF6E5; /* --warning-bg, the sanctioned pale warm tone */ /* Eyebrows, category numbers and dates were gold text on white, which the guide forbids and which measures 1.7:1. The official eyebrow token is 12/700/caps/0.12em in Iqra Blue, so that is what they become. */ --gold-700: #1A428A; /* ---- supporting ---------------------------------------------------------*/ --teal: #1E7B3A; /* --success, the only sanctioned green */ --text: #1F2937; /* --text · 14.7:1 */ --muted: #4B5563; /* --text-2 · 7.6:1 */ --line: #D9DDE3; /* --border-card */ --line-2: #7A8494; /* --border-control */ /* ---- Montserrat only ----------------------------------------------------*/ --display: Montserrat, "Segoe UI", system-ui, sans-serif; --body: Montserrat, "Segoe UI", system-ui, sans-serif; --mono: Montserrat, "Segoe UI", system-ui, sans-serif; /* ---- shape and depth ----------------------------------------------------*/ --r: 12px; /* --radius-card */ --shadow-sm: 0 1px 2px rgba(19,41,75,.08); /* --shadow-card */ --shadow: 0 8px 24px rgba(19,41,75,.10); /* --shadow-raised */ --shadow-lg: 0 8px 24px rgba(19,41,75,.10); } /* Montserrat has no italic in the brand set and the display face is gone, so the italic accent in headings becomes weight instead of slope. */ h1,h2,h3,h4{ font-weight:800; letter-spacing:-0.01em; } h1 em,h2 em,h3 em{ font-style:normal; font-weight:800; color:var(--navy); } /* Eyebrow: the guide's --fs-12 token, exactly. */ .eyebrow{ font-size:12px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:#1A428A; } .eyebrow::before{ background:#1A428A; } .eyebrow--light{ color:#F7BE00; } .eyebrow--light::before{ background:#F7BE00; } /* Controls are 48px and focus is a 2px navy ring, offset 2px, on everything. */ .btn{ min-height:48px; border-radius:8px; font-weight:700; } :focus-visible{ outline:2px solid #13294B; outline-offset:2px; } /* Primary is Iqra Blue and there is one per screen. Gold stays an accent: the masthead rule, the active carousel dot, the slide eyebrow. To keep gold call-to-action buttons instead, delete this block. */ .btn--gold{ background:#1A428A; color:#FFFFFF; box-shadow:none; } .btn--gold:hover{ background:#13294B; color:#FFFFFF; } /* Fields: white fill, 1px #7A8494 border, 8px radius, 16px text so phones do not zoom on focus. */ .field input,.field select,.field textarea{ background:#FFFFFF; border:1px solid #7A8494; border-radius:8px; font-size:16px; } .field label{ font-size:13px; font-weight:700; letter-spacing:0.04em; color:#4B5563; text-transform:none; } /* Chips and pills follow --radius-pill. */ .chips li,.filter{ border-radius:999px; } /* ========================================================================== Design review changes — agreed on the homepage canvas, 20 Oct ========================================================================== */ /* --------------------------------------------------------------- buttons --- The dull CTA was a context problem, not a colour one. Iqra Blue is 9.6:1 on white but only ~1.5:1 against a navy band, so the same button that reads strongly in the masthead disappears in the hero. Primary stays Iqra Blue on light surfaces and reverses to white on dark ones. Gold is never a button — the Applicant Portal never does it, and gold on white is 1.7:1. */ .slide .btn--gold, .section--navy .btn--gold, .section--image .btn--gold, .pagehead .btn--gold{ background:#FFFFFF; color:#1A428A; box-shadow:none; } .slide .btn--gold:hover, .section--navy .btn--gold:hover, .section--image .btn--gold:hover, .pagehead .btn--gold:hover{ background:#F3F4F6; color:#13294B; } /* Paired secondary on dark, and the portal's secondary on light. */ .btn--light{ border-width:2px; border-color:rgba(255,255,255,.55); } .btn--outline{ background:#FFFFFF; color:#1A428A; border:2px solid #1A428A; } .btn--outline:hover{ background:#F3F4F6; color:#13294B; border-color:#13294B; } /* ----------------------------------------------------------- gold accents --- Where the energy comes from instead: the portal's own devices. */ .masthead::after{ height:4px; background:#F7BE00; } /* solid rule, not a split */ .footer::before{ height:4px; background:#F7BE00; opacity:1; } .eyebrow::before{ width:56px; height:4px; background:#F7BE00; border:0; border-radius:2px; } /* Seat counts become the portal's gold pill: navy on gold is 8.5:1. */ .board__seats{ justify-self:end; background:#F7BE00; color:#13294B; font-weight:700; padding:4px 12px; border-radius:999px; text-align:center; } .board__seats:empty{ background:none; padding:0; } .board__seats.is-low{ background:#F7BE00; color:#13294B; } /* A gold tick on white is 1.7:1 and barely visible; the checklist marks go blue. */ .checklist svg{ stroke:#1A428A; } /* Third quick-card accent follows the sanctioned green rather than an invented teal. */ .qcard:nth-child(3) .qcard__icon{ background:#EAF6EE; color:#1E7B3A; } /* ---------------------------------------------------- footer social icons --- Was: six pills carrying icon and word, hover flooding the pill gold with a 2px lift. Now: 44px circles, icon only, border and icon shift to gold. The visible word is dropped, not the accessible one — every link already carries an aria-label, which is what a screen reader announces. */ .socials a{ width:44px; height:44px; padding:0; gap:0; border-radius:999px; font-size:0; line-height:0; justify-content:center; border:1px solid rgba(255,255,255,.28); color:#FFFFFF; transition:border-color .15s ease, color .15s ease; } .socials a:hover{ background:transparent; border-color:#F7BE00; color:#F7BE00; transform:none; } .socials svg{ width:18px; height:18px; } .socials--dark a{ border-color:#D9DDE3; color:#1A428A; } .socials--dark a:hover{ border-color:#1A428A; color:#13294B; } /* ========================================================================== Type scale — the sizes were still the old serif design's -------------------------------------------------------------------------- styles.css sizes headings for Newsreader 500, which tops out at 64px in the hero. The brand scale ends at --fs-40, and Montserrat 800 sets much wider at the same size, so those headings wrapped an extra line, grew the hero content block and pushed the buttons down into the slider controls. Capped to the brand steps: 40 / 30 / 22 / 18. The hero keeps the top step. ========================================================================== */ .slide h1,.slide h2{ font-size:clamp(2.4rem,5vw,3rem); line-height:1.14; } /* 38 → 48px */ .slide p{ font-size:16px; line-height:1.6; } .pagehead h1{ font-size:clamp(1.875rem,3.2vw,2.5rem); } /* 30 → 40px */ .section-head h2{ font-size:clamp(1.5rem,2.4vw,1.875rem); } /* 24 → 30px */ .cat h3,.qcard h3,.post h3,.fcard h3,.video__body h3,.agenda h3{ font-size:18px; } .facility h2,.facility h3{ font-size:22px; } .stat b,.hero__stat b{ font-size:40px; font-weight:800; } .quote__text{ font-size:22px; line-height:1.5; } /* The hero content block is vertically centred, so its bottom padding is what lifts the buttons clear of the dots and arrows anchored to the section floor. Montserrat needs a little more room than the serif did. */ .slides{ height:clamp(560px,74vh,700px); } .slide__content{ padding-block:32px 128px; } @media (max-width:880px){ .slide__content{ padding-block:28px 112px; } } /* A four-line headline in a short viewport is the one case that still overflows (611px of content in a 560px hero), so step the size down before that bites. */ @media (max-height:720px) and (min-width:621px){ .slide h1,.slide h2{ font-size:clamp(2rem,4vw,2.5rem); } .slide__content{ padding-block:24px 112px; } } @media (max-width:620px){ .slide h1,.slide h2{ font-size:1.75rem; } /* 28px */ .slide__content{ padding-block:24px 116px; } } /* ---------------------------------------------------- emphasis on dark ---- The global rule above sets to Iqra Blue, which is right on white and invisible on navy — over the closing band it measured 1.0:1, identical in luminance to the background. Every dark context takes gold instead, which is what the hero and the page banners already do. */ .section--navy h1 em,.section--navy h2 em,.section--navy h3 em, .section--image h1 em,.section--image h2 em,.section--image h3 em, .contactband h2 em{ color:#F7BE00; }