/* ==========================================================================
Vityaz Global — stylesheet (v2, matched to the client's mockups)
Mobile-first. No framework, no build step.
========================================================================== */
/* ---------------------------------------------------------------------- */
/* 0. Fonts */
/* ---------------------------------------------------------------------- */
/* Fraunces is loaded by a in index.html , not from here.
Display serif for headings, system sans for everything you interact with —
a serif on buttons and nav is costume, not editorial. */
/* ---------------------------------------------------------------------- */
/* 1. Reset */
/* ---------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
/* clip, not hidden — see the note on body below; sticky breaks if ANY
ancestor between it and the viewport has a non-visible overflow other
than clip. */
overflow-x: clip;
/* Clear the sticky header, so an in-page nav jump does not land the section
heading underneath it. */
scroll-padding-top: 86px;
}
/* overflow-x: clip, not hidden — hidden forces overflow-y to auto per spec,
which turns body into a scroll container, and position:sticky never sticks
inside a scrolling ancestor. That silently broke the header: it scrolled
away like ordinary content instead of staying pinned (client screenshot,
Client/2.jpeg vs Client/3.jpeg). clip has no such side effect; the width
sweep already proves there is nothing here that needs clipping anyway. */
body { overflow-x: clip; }
body, h1, h2, h3, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, picture, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
/* ---------------------------------------------------------------------- */
/* 2. Tokens */
/* ---------------------------------------------------------------------- */
:root {
/* brand */
--navy-900: #001B4D;
--navy: #002A72;
--navy-600: #0E3E8C;
--saffron: #F5820F;
/* The brand orange is a 2.6:1 contrast against white — fine for a 70px
headline (large text needs 3:1), nowhere near legal for a 13px uppercase
eyebrow, which needs 4.5:1. This is the same orange darkened until it
passes; it is only ever used for small text on a light ground. */
--saffron-ink: #B45309;
--saffron-cta: #F26600;
--green: #3D7D2C;
--cyan: #00AECE;
/* surfaces */
--cream: #FDF8F3;
--ice: #F0F6FC;
--white: #FFFFFF;
/* the gutter colour outside the 1920px page shell (see section 6) — a
neutral shade off white, so the page's own white body reads as a
distinct sheet rather than bleeding into the browser chrome */
--shell-bg: #E7EAF0;
/* text */
--ink: #10182B;
--ink-2: #57607A;
--ink-3: #8992A9;
--line: #E4E9F2;
/* icon-circle palette (rotates across feature/why-india/services grids) */
--c1: #3072C0; /* blue */
--c2: #D87206; /* orange */
--c3: #3C7E30; /* green */
--c4: #6054BA; /* purple */
--c5: #DE4860; /* pink */
--c6: #2A72A2; /* teal */
/* One step tighter than v2's 16px. Swiss restraint: a 16px radius on a 22px
card is what makes every generated page look like the same rounded blob. */
--radius: 12px;
--radius-sm: 8px;
--shadow: 0 12px 32px -12px rgba(0,27,77,.18);
--shadow-sm: 0 4px 14px -6px rgba(0,27,77,.16);
--wrap: 1220px;
--ff-head: 'Fraunces', Georgia, 'Times New Roman', serif;
--ff-body: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
/* ---------------------------------------------------------------------- */
/* 3. Base */
/* ---------------------------------------------------------------------- */
body {
font-family: var(--ff-body);
color: var(--ink);
background: var(--white);
line-height: 1.55;
-webkit-font-smoothing: antialiased;
}
/* Display type only. h3, buttons, nav and tabs stay on the body sans: they are
interface, and Fraunces at 17px in a card heading just looks like a mistake. */
h1, h2, .stat__n, .closer {
font-family: var(--ff-head);
/* Fraunces ships optical sizes; without this it renders its text cut, which
is drawn for 12px body copy and looks weak at 40px. */
font-variation-settings: 'opsz' 100;
}
/* No negative tracking on a serif — the letterforms already carry their own
spacing, and tightening them is what makes a serif look like a squeezed sans. */
h2 { font-size: clamp(28px, 5.6vw, 44px); font-weight: 640; letter-spacing: 0; color: var(--navy); line-height: 1.14; }
/* No colour here on purpose: h3 appears on the navy community band and inside
the navy contact card, where it has to inherit white. The light-ground h3s
get their navy from .card h3 and friends. */
h3 { font-size: clamp(17px, 3.6vw, 19px); font-weight: 700; }
p { color: var(--ink-2); }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
/* Page shell. Below 1920px this changes nothing — 1366 through 1920 render
exactly what was already approved. What the client circled in ss1/ss2 is
the full-bleed coloured bands (stats, community, ice sections) running to
infinity while the copy sits in a fixed ~1220px column, so on a very wide
monitor — or a normal monitor zoomed out, which is only a way of making
the CSS viewport wider — the page reads as two empty stripes with a strip
of content down the middle. Past 1920 the page stops stretching and sits
centred instead, so the bands end at the shell's edge like the boxed
YouTube layout the client sent as the reference (Client/SS3.jpg). */
@media (min-width: 1920px) {
html { background: var(--shell-bg); }
body {
max-width: 1920px; margin-inline: auto; background: var(--white);
box-shadow: 0 0 0 1px var(--line), 0 0 60px -20px rgba(0,27,77,.18);
}
/* .wa-float's own right:18px override lives with the rest of its rules in
section 19 (Misc), further down this file, and wins there by source
order — it has to, since position:fixed resolves against the real
viewport rather than this shell. */
}
@media (min-width: 640px) { .wrap { padding: 0 32px; } }
@media (min-width: 1100px) { .wrap { padding: 0 40px; } }
.skip {
position: absolute; left: -999px; top: 0; z-index: 999;
background: var(--navy); color: #fff; padding: 12px 18px; border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; }
.eyebrow {
display: inline-block; font-weight: 700; font-size: 13px; letter-spacing: .04em;
text-transform: uppercase; color: var(--saffron-ink); margin-bottom: 8px;
}
.section__head { max-width: 640px; margin: 0 0 34px; }
/* Numbered, ruled section heads. Counting is done by CSS off the section
order, so inserting or moving a section renumbers everything on its own. */
main { counter-reset: sec; }
.section .section__head { padding-top: 18px; border-top: 2px solid var(--navy); }
.section .section__head .eyebrow::before {
counter-increment: sec;
content: counter(sec, decimal-leading-zero) " — ";
color: var(--navy);
}
.section__head p { margin-top: 10px; font-size: 15.5px; }
.section { padding: 56px 0; }
@media (min-width: 900px) { .section { padding: 84px 0; } }
.section--ice { background: var(--ice); }
.section--cream{ background: var(--cream); }
/* Reveal-on-scroll.
Default is VISIBLE — the hidden state is opted into by the inline
script only once JS is confirmed running, so a failed/blocked main.js can
never leave the page blank. `.rv-fallback` is that script's 2.5s backstop. */
.rv { opacity: 1; transform: none; }
.js .rv { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; }
.js .rv.in { opacity: 1; transform: none; }
/* The backstop kills the transition as well as setting the value: a fade needs
rendered frames, and a tab that never composites (background tab, throttled
device) would otherwise sit at opacity 0 forever — the same trap as the
modal's rAF. Snapping is correct here; it only ever runs when the nice
version has already failed. */
.rv-fallback .rv { opacity: 1 !important; transform: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { .js .rv { opacity: 1; transform: none; } }
/* ---------------------------------------------------------------------- */
/* 4. Buttons */
/* ---------------------------------------------------------------------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 9px;
min-height: 50px; padding: 11px 24px; border-radius: 10px; max-width: 100%;
font-weight: 650; font-size: 15.5px; text-align: center;
transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}
.btn svg { width: 18px; height: 18px; flex: none; transition: transform .2s ease; }
/* the arrow leads, rather than the whole button glowing */
.btn:hover svg:last-child { transform: translateX(3px); }
.btn:active { transform: scale(.97); }
.btn--primary { background: var(--navy); color: #fff; }
.btn--primary:hover { background: var(--navy-600); }
.btn--cta { background: var(--saffron-cta); color: #fff; }
.btn--cta:hover { background: #d95700; }
.btn--ghost { background: #fff; color: var(--navy); border: 1.5px solid var(--line); }
.btn--ghost:hover { border-color: var(--navy); }
.btn--outline-light { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.6); }
.btn--outline-light:hover { background: rgba(255,255,255,.12); }
.btn--green { background: var(--green); color: #fff; }
.btn--green:hover { background: #336c25; }
.btn--sm { min-height: 42px; padding: 8px 18px; font-size: 14px; }
.btn--lg { min-height: 54px; padding: 13px 28px; font-size: 16px; }
.btn--block { width: 100%; }
/* ---------------------------------------------------------------------- */
/* 5. Header */
/* ---------------------------------------------------------------------- */
.hdr {
position: sticky; top: 0; z-index: 60; background: rgba(255,255,255,.94);
backdrop-filter: saturate(180%) blur(10px);
border-bottom: 1px solid var(--line);
transition: box-shadow .2s ease, padding .2s ease;
/* the drawer below reads its own height off this, so it always starts
exactly where the header ends instead of a hardcoded number that only
matched the tall (uncondensed) header. */
--hdr-h: 76px;
}
.hdr.condensed { box-shadow: 0 4px 20px -8px rgba(0,27,77,.15); --hdr-h: 62px; }
.hdr__in { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 16px; }
.hdr.condensed .hdr__in { height: 62px; }
.hdr__logo { height: 40px; width: auto; transition: height .2s ease; flex: none; }
.hdr.condensed .hdr__logo { height: 33px; }
.hdr__brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
/* The wordmark is live text rather than part of the image: baked into the
logo file it renders ~6px tall in the header and is unreadable. */
.brand__txt { display: flex; flex-direction: column; line-height: 1.05; }
.brand__txt b {
font-family: var(--ff-head); font-weight: 700; font-size: 17px; letter-spacing: .06em; color: var(--navy);
}
.brand__txt b i { font-style: normal; color: var(--saffron); }
.brand__txt em {
font-style: italic; font-size: 9.5px; letter-spacing: .01em; color: var(--ink-2); margin-top: 2px;
}
@media (max-width: 400px) { .brand__txt b { font-size: 15px; } .brand__txt em { display: none; } }
.hdr__burger {
display: flex; flex-direction: column; justify-content: center; gap: 5px;
width: 44px; height: 44px; align-items: center;
}
.hdr__burger span { width: 22px; height: 2.4px; background: var(--navy); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.hdr__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.4px) rotate(45deg); }
.hdr__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hdr__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.4px) rotate(-45deg); }
.nav {
position: fixed; inset: var(--hdr-h, 76px) 0 0 auto; width: min(320px, 84vw);
/* dvh, not vh — vh is the iOS Safari toolbar's frozen tallest height, so a
vh-tall drawer runs a strip of page showing below it once the toolbar
is actually on screen; dvh tracks the real visible viewport. */
height: calc(100dvh - var(--hdr-h, 76px));
background: #fff; display: flex; flex-direction: column; gap: 2px; padding: 18px 22px;
transform: translateX(100%); transition: transform .28s ease; overflow-y: auto;
box-shadow: -18px 0 40px -20px rgba(0,27,77,.3);
}
.nav.open { transform: translateX(0); }
/* Tap-outside-to-close. Sits behind .nav (z-index 60), above the page.
Without this the drawer's only way out was its own X — and while the
sticky-header bug above was live, scrolling made even that X disappear,
trapping the visitor (Client/3.jpeg). */
.nav__backdrop {
position: fixed; inset: var(--hdr-h, 76px) 0 0 0; z-index: 59;
background: rgba(0,27,77,.35); opacity: 0; pointer-events: none;
transition: opacity .2s ease;
}
.nav__backdrop.open { opacity: 1; pointer-events: auto; }
@media (min-width: 960px) { .nav__backdrop { display: none; } }
.nav a {
padding: 13px 4px; font-weight: 600; font-size: 15.5px; color: var(--ink); border-bottom: 1px solid var(--line);
position: relative;
}
.nav a.active { color: var(--navy); }
.nav__cta { margin-top: 16px; }
@media (min-width: 960px) {
.hdr__burger { display: none; }
.nav {
position: static; width: auto; height: auto; transform: none; box-shadow: none;
flex-direction: row; align-items: center; gap: 15px; padding: 0; overflow: visible; flex: none;
}
.nav a { border: 0; padding: 6px 1px; font-size: 13px; white-space: nowrap; }
.nav a::after {
content: ''; position: absolute; left: 1px; right: 1px; bottom: -3px; height: 2px;
background: var(--saffron); transform: scaleX(0); transform-origin: left; transition: transform .2s ease;
}
.nav a.active::after, .nav a:hover::after { transform: scaleX(1); }
.nav__cta { margin-top: 0; margin-left: 4px; }
}
@media (min-width: 1180px) {
.nav { gap: 24px; }
.nav a { font-size: 14.5px; padding: 6px 2px; }
.nav__cta { margin-left: 8px; }
}
/* ---------------------------------------------------------------------- */
/* 6. Hero */
/* ---------------------------------------------------------------------- */
.hero { position: relative; background: var(--cream); overflow: clip; }
.hero__photo {
position: relative; display: block; height: 38vh; min-height: 230px; max-height: 340px;
/* shorter than the old 50vh/310-440px: the hero now carries the client's
four-line tagline block (h1 + sub + .hero__pts) below the photo, and the
taller crop was pushing the CTAs well past one phone screen's height. */
overflow: hidden;
/* placeholder ground while the image loads — was a navy duotone gradient
the photo multiplied onto; the client's new photos are full colour and
sized properly (1150x900 / 740x1000, both well over the old 1006px
source), so the treatment that hid a blurry small photo is no longer
needed. Deleting the filter/blend below is the whole change. */
background: var(--ice);
}
/* framed to keep both the dome and the students' faces in shot.
Mobile crop (740x1000) already excludes the printed "STUDY IN INDIA" title
baked into the source photo — the live H1 below is the only headline. */
.hero__photo img {
width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%;
}
.hero__photo::after {
content: ''; position: absolute; inset: auto 0 0 0; height: 70px;
background: linear-gradient(180deg, rgba(253,248,243,0) 0%, var(--cream) 100%);
}
.hero__body { padding: 18px 20px 28px; }
.hero__h1 { font-size: clamp(30px, 9vw, 48px); font-weight: 700; line-height: 1.04; letter-spacing: 0; color: var(--navy); }
.hero__h1 span { display: block; color: var(--saffron); }
.hero__sub { margin-top: 12px; font-size: 15.5px; max-width: 46ch; }
/* The client's three follow-on lines, kept below the sub-head rather than
folded into one paragraph — four taglines run together would read as a
slogan pile with no hierarchy. Compact hairline list instead — tight
enough on a phone that it does not push the CTA buttons far past the fold. */
.hero__pts { margin-top: 8px; max-width: 46ch; }
.hero__pts li {
position: relative; padding: 5px 0 5px 15px; font-size: 12.5px; font-weight: 600;
line-height: 1.35; color: var(--ink-2); border-top: 1px solid var(--line);
}
.hero__pts li::before {
content: ''; position: absolute; left: 0; top: 13px; width: 6px; height: 6px;
border-radius: 50%; background: var(--saffron);
}
.hero__rule { display: flex; align-items: center; gap: 10px; margin: 14px 0; }
.hero__rule i { height: 3px; flex: 1 0 34px; max-width: 70px; border-radius: 2px; }
.hero__rule i:first-child { background: var(--saffron); }
.hero__rule i:last-child { background: var(--green); }
.hero__rule svg { width: 22px; height: 22px; flex: none; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
/* the same element is simply repositioned by the grid here —
no second image, so only one hero photo ever downloads.
The row breaks out of .wrap so the photo can bleed to the viewport edge as
it does in the mockup, while the text stays on the normal wrap gridline. */
@media (min-width: 900px) {
.hero__in {
display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
align-items: center; gap: 44px; min-height: 600px;
max-width: none; padding-right: 0;
/* Land the headline on the SAME gridline as the header logo and every
section heading below. Percentages resolve against the content box, so
this tracks .wrap exactly; 50vw does not, because vw includes the
scrollbar and .wrap's centring does not — that alone was 7px of drift,
on top of the 32px of .wrap padding this rule used to discard. */
padding-left: max(32px, calc((100% - var(--wrap)) / 2 + 32px));
}
.hero__body { padding: 56px 0; grid-row: 1; grid-column: 1; }
.hero__photo {
grid-row: 1; grid-column: 2; position: relative; height: auto; max-height: none; min-height: 0;
align-self: stretch;
/* stop exactly on the feature strip's top edge (.feat pulls up by the same
34px) — otherwise the bled photo pokes out below the card on the right.
height must stay auto here: a 100% height resolves against the full grid
area and would cancel the margin out. */
margin-bottom: 34px;
}
.hero__photo::after { content: none; }
.hero__photo::before {
content: ''; position: absolute; inset: 0; left: -50px; z-index: 1; pointer-events: none;
background: linear-gradient(90deg, var(--cream) 0%, rgba(253,248,243,0) 16%);
}
.hero__photo { border-radius: 0 0 0 28px; }
/* the desktop crop is landscape (1150x900) against a near-square column, so
cover crops left/right, not top/bottom — biasing right keeps the whole
group and the Taj in frame and crops into the source's own soft fade
rather than into anyone's face. */
.hero__photo img { object-position: 70% 50%; }
.hero__h1 { font-size: clamp(46px, 5.2vw, 70px); line-height: .98; }
.hero__sub { font-size: 17px; }
.hero__rule { margin: 22px 0; }
.hero__rule i { flex-basis: 70px; max-width: 96px; }
.hero__rule svg { width: 26px; height: 26px; }
}
/* Past about 1600px the edge-to-edge bleed stops paying for itself. Column 1
keeps growing while the copy inside it stays capped at 46ch, so the hero
opens up a widening field of empty cream — at a 5300px-wide viewport the
text column reached ~1590px holding ~390px of text. Tapering the right-hand
padding in settles the columns at a fixed width, after which they stop
growing at all. The left edge stays on the .wrap gridline at every width. */
/* On a very large monitor the 1220px column leaves the full-bleed bands looking
like empty stripes with a strip of text down the middle — which is exactly
what the client marked up. Let the column take some of that width back.
Nothing below 1800px moves, so 1366 / 1440 / 1600 stay as approved. Every
cap that was pinned to the column is written in terms of --wrap, so they all
follow this on their own. */
@media (min-width: 1800px) { :root { --wrap: 1360px; } }
/* The 2300px step this used to take to 1480px is gone: the page shell
(section 3) freezes the whole page at 1920px from here on, so a column
that kept growing past it would be inconsistent with everything else that
now stops at the shell's edge. 1360-in-1920 keeps a wide gutter, close to
the boxed proportion in the client's own reference screenshot
(Client/SS3.jpg). */
@media (min-width: 1100px) {
/* .wrap widens its padding to 40px here, so the hero has to follow */
.hero__in { padding-left: max(40px, calc((100% - var(--wrap)) / 2 + 40px)); }
}
@media (min-width: 2000px) {
/* Stop the photo chasing the viewport edge. The 382px is not arbitrary: it is
(2000 - 15 scrollbar - 1220 wrap) / 2, which makes the padding resolve to
exactly 0 at the breakpoint. Without it the photo would jump 230px inward
the moment a window crossed 2000px. From here the columns lock at ~737px
and stop growing however wide the monitor gets.
2000px, not 1600px, so that 1366 / 1440 / 1600 / 1920 — every common
desktop — render exactly the layout the client already approved.
Already written in %, not vw, so the page shell below (section 3)
naturally caps this too: past a 1920px real viewport this keeps
resolving against the shell's fixed 1920px body width and stays at
exactly 0 rather than drifting again with the monitor. */
.hero__in { padding-right: max(0px, calc((100% - var(--wrap)) / 2 - 382px)); }
}
@media (min-width: 1920px) {
/* Once the photo no longer reaches the viewport edge it needs a corner, or
it reads as having been cut off rather than deliberately placed. Moved
down from 2200px: the page shell (below) freezes at 1920, so the photo
stops touching the real viewport edge there, not at 2200. */
.hero__photo { border-radius: 0 28px 0 28px; }
}
/* ---------------------------------------------------------------------- */
/* 7. Feature strip */
/* ---------------------------------------------------------------------- */
.feat {
position: relative; z-index: 2; margin: -26px 14px 0; background: #fff; border-radius: var(--radius);
box-shadow: var(--shadow); padding: 22px 16px; display: grid; grid-template-columns: repeat(2, 1fr);
gap: 22px 10px;
}
.feat__i { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 9px; }
.feat__i em {
font-style: normal; display: flex; align-items: center; justify-content: center;
width: 50px; height: 50px; border-radius: 12px; flex: none;
background: var(--ice); color: var(--navy); border: 1px solid var(--line);
}
.feat__i em svg { width: 24px; height: 24px; }
.feat__i span { font-size: 13.5px; font-weight: 650; line-height: 1.25; color: var(--ink); }
@media (min-width: 700px) {
.feat { grid-template-columns: repeat(3, 1fr); margin-left: 32px; margin-right: 32px; padding: 26px; gap: 24px 12px; }
}
@media (min-width: 960px) {
.feat { max-width: var(--wrap); margin: -34px auto 0; grid-template-columns: repeat(6, 1fr); padding: 30px 26px; }
.feat__i span { font-size: 13.5px; }
}
/* ---------------------------------------------------------------------- */
/* 8. Stats band */
/* ---------------------------------------------------------------------- */
.stats {
background: var(--ice); padding: 34px 14px 30px; display: grid; grid-template-columns: repeat(2, 1fr);
gap: 26px 10px; text-align: center;
}
.stats li { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.stats svg { width: 24px; height: 24px; color: var(--saffron); margin-bottom: 2px; }
.stat__n { font-size: clamp(26px, 6vw, 34px); font-weight: 640; color: var(--navy); letter-spacing: 0; }
.stats span.stat__l { font-size: 12.5px; font-weight: 600; color: var(--ink-2); line-height: 1.25; }
/* hairlines instead of five islands of whitespace */
@media (min-width: 960px) { .stats li + li { border-left: 1px solid var(--line); } }
@media (min-width: 700px) { .stats { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 960px) { .stats { padding: 42px 26px; } }
/* The ice band stays full-bleed — it is the section background — but the five
columns are capped, so on a 2560px monitor the numbers stop drifting into
opposite corners. Resolves to the padding already in place below 1400px. */
/* %, not vw — vw is the real viewport and ignores the 1920px page shell
(section 3); % resolves against .stats' own box, which the shell does
constrain, so the columns stop growing past the shell instead of drifting
toward the true viewport's corners on an ultra-wide monitor. */
@media (min-width: 1400px) { .stats { padding-inline: max(26px, calc(50% - var(--wrap) / 2 - 90px)); } }
/* ---------------------------------------------------------------------- */
/* 9. Community band */
/* ---------------------------------------------------------------------- */
.community {
background: var(--navy-900); color: #fff; padding: 30px 20px; position: relative; overflow: hidden;
}
.community__in {
display: flex; flex-direction: column; gap: 18px; align-items: flex-start; position: relative; z-index: 1;
}
.community__globe { width: 40px; height: 40px; opacity: .9; }
/* right: 6% alone marooned the doodle in empty space on a wide screen; this
keeps it just outside the content column instead. Identical below ~1400px. */
.community__plane { position: absolute; right: max(6%, calc(50% - var(--wrap) / 2 - 90px)); top: 14%; width: 74px; opacity: .55; }
.community h3 { font-size: clamp(19px, 4.6vw, 23px); font-weight: 750; }
.community h3 b { color: var(--saffron); font-weight: 800; }
.community p { color: rgba(255,255,255,.82); margin-top: 4px; font-size: 14.5px; }
@media (min-width: 800px) {
.community__in { flex-direction: row; align-items: center; justify-content: space-between; gap: 26px; }
.community__text { display: flex; align-items: center; gap: 16px; }
}
/* ---------------------------------------------------------------------- */
/* 10. Generic icon-circle card grids (Why India / Student Life / Services)*/
/* ---------------------------------------------------------------------- */
.grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 640px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } }
.card {
background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 22px;
display: flex; gap: 14px; align-items: flex-start;
transition: border-color .18s ease, box-shadow .18s ease;
}
.card:hover { border-color: var(--navy); box-shadow: var(--shadow-sm); }
/* Break the slab. Twelve identical boxes in a perfect 3x4 is the layout every
generated page lands on; giving the first card of each grid two columns and
a larger reading size costs one rule and no markup. */
@media (min-width: 900px) {
.grid--3 > .card:first-child { grid-column: span 2; }
.grid--3 > .card:first-child p { font-size: 16px; max-width: 54ch; }
.grid--3 > .card:first-child h3 { font-size: 21px; }
}
/* One quiet tile, not six rotating rainbow discs. The rotation carried no
meaning — card 7 was blue again because the list wrapped, not because it had
anything to do with card 1 — and six unrelated accents on one screen is the
loudest "template" signal there is. The drawing carries the identity now. */
.card__ic {
flex: none; width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
background: var(--ice); color: var(--navy); border: 1px solid var(--line);
}
/* Every other icon tile on the page sizes its svg explicitly (.feat__i em svg,
.sch__benefits em svg, .ch__i em svg, .stats svg) — this one was missing.
The card svgs carry a viewBox but no width/height, so sizing falls back to
each engine's own default for a replaced element with no intrinsic size:
Chrome infers 44x44 from the viewBox and happens to look right; iOS Safari
does not, and every "Why India" icon rendered as an empty tile (client
screenshot, Client/6.jpeg). */
.card__ic svg { width: 22px; height: 22px; }
.card h3 { margin-bottom: 4px; color: var(--navy); }
.card p { font-size: 14.5px; margin: 0; }
/* The two section closers are the pull-quote moments — the only italic on the
page, so they read as a change of voice rather than another heading. */
.closer {
text-align: center; margin-top: 34px; color: var(--navy);
font-weight: 560; font-style: italic; font-size: clamp(18px,3.8vw,23px); line-height: 1.4;
}
/* ---------------------------------------------------------------------- */
/* 11. About */
/* ---------------------------------------------------------------------- */
.about__grid { display: grid; gap: 26px; }
.about__grid > p { max-width: 74ch; } /* keep line length readable on wide screens */
/* Two columns on a desktop: the prose reads down the left, mission and vision
stack on the right. Same elements, same order in the markup — the void beside
a 74ch paragraph is what made the page look like a template with the content
deleted. */
@media (min-width: 1000px) {
.about__grid {
grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
column-gap: 56px; align-items: start;
}
.about__lead, .about__grid > p, .about__badges { grid-column: 1; }
}
.about__lead { font-size: 16px; color: var(--ink); max-width: 74ch; }
.about__badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.badge {
display: inline-flex; align-items: center; gap: 7px; background: var(--ice); border: 1px solid var(--line);
padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 650; color: var(--navy);
}
.badge svg { width: 15px; height: 15px; }
.mv { display: grid; gap: 16px; margin-top: 26px; }
@media (min-width: 700px) { .mv { grid-template-columns: 1fr 1fr; } }
/* …but once About goes two-column, mission and vision stack into the right one.
After the 700px rule on purpose — it has to win. */
@media (min-width: 1000px) {
.mv { grid-column: 2; grid-row: 1 / span 4; margin-top: 0; grid-template-columns: 1fr; align-self: start; }
}
.mv__i { background: var(--ice); border-radius: var(--radius); padding: 20px 22px; }
.mv__i h3 { color: var(--navy); margin-bottom: 6px; }
.mv__i p { font-size: 14.5px; margin: 0; }
/* ---------------------------------------------------------------------- */
/* 12. Courses (tabs / accordion-style) */
/* ---------------------------------------------------------------------- */
.tabs__bar { display: flex; flex-direction: column; gap: 8px; margin-bottom: 0; }
.tabs__btn {
display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
padding: 15px 18px; font-weight: 650; font-size: 15px; color: var(--navy); text-align: left;
}
.tabs__btn[aria-selected="true"] { background: var(--navy); color: #fff; border-color: var(--navy); }
.tabs__btn svg { width: 18px; height: 18px; transition: transform .2s ease; flex: none; }
.tabs__btn[aria-selected="true"] svg { transform: rotate(180deg); }
.tabs__panel { display: none; padding: 18px 4px 6px; }
.tabs__panel[data-open] { display: block; }
.tabs__panel ul { display: grid; gap: 9px; grid-template-columns: 1fr; }
.tabs__panel li {
font-size: 14.5px; padding: 10px 14px; background: var(--ice); border-radius: 9px; color: var(--ink);
}
@media (min-width: 560px) { .tabs__panel ul { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) {
.tabs__bar { flex-direction: row; gap: 10px; flex-wrap: wrap; margin-bottom: 26px; }
.tabs__btn { width: auto; border-radius: 999px; padding: 12px 22px; }
.tabs__btn svg { display: none; }
.tabs__panel { padding: 8px 2px; }
.tabs__panel ul { grid-template-columns: repeat(3, 1fr); }
}
/* ---------------------------------------------------------------------- */
/* 13. Scholarship */
/* ---------------------------------------------------------------------- */
.sch__top { display: grid; gap: 30px; }
@media (min-width: 900px) { .sch__top { grid-template-columns: 1.1fr .9fr; align-items: start; } }
.sch__benefits { display: grid; gap: 12px; margin-top: 20px; }
.sch__benefits li {
display: flex; align-items: center; gap: 12px; background: var(--ice); border-radius: var(--radius-sm);
padding: 13px 16px; font-weight: 600; font-size: 14.5px;
}
.sch__benefits em { font-style: normal; display: flex; flex: none; color: var(--navy); }
.sch__benefits em svg { width: 20px; height: 20px; }
/* the lone icon that sits inside a run of text rather than in a tile */
.ic-inline { display: inline-block; width: 16px; height: 16px; vertical-align: -3px; color: var(--navy); }
.steps { display: grid; gap: 14px; counter-reset: s; margin-top: 8px; }
.steps li {
display: flex; gap: 16px; align-items: flex-start; background: #fff; border: 1px solid var(--line);
border-radius: var(--radius-sm); padding: 16px 18px; position: relative;
}
.steps b {
flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--navy); color: #fff;
display: flex; align-items: center; justify-content: center; font-family: var(--ff-head); font-weight: 700; font-size: 14.5px;
}
.steps p { margin: 0; font-size: 14px; color: var(--ink-2); }
.steps h4 { margin: 0 0 3px; font-family: var(--ff-head); font-weight: 700; font-size: 15px; color: var(--navy); }
.steps li:not(:last-child)::after {
content: ''; position: absolute; left: 34px; top: 100%; width: 2px; height: 14px; background: var(--line);
}
/* ---------------------------------------------------------------------- */
/* 14. Testimonials marquee */
/* ---------------------------------------------------------------------- */
.mq { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.mq__track { display: flex; gap: 18px; width: max-content; animation: mq-scroll 42s linear infinite; }
.mq.hold .mq__track { animation-play-state: paused; }
.mq:hover .mq__track { animation-play-state: paused; }
@keyframes mq-scroll { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .mq__track { animation: none; } }
.tst {
position: relative; flex: 0 0 280px; background: #fff; border: 1px solid var(--line);
border-radius: 12px; padding: 22px;
}
/* an oversized typographic quote mark in place of the small icon */
.tst svg { display: none; }
.tst::before {
content: "“"; position: absolute; top: 2px; left: 18px;
font-family: var(--ff-head); font-size: 54px; line-height: 1; color: var(--saffron); opacity: .5;
}
.tst p { padding-top: 22px; }
.tst p { font-size: 14.5px; color: var(--ink); }
.tst figcaption { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.tst__av {
width: 40px; height: 40px; border-radius: 50%; background: var(--navy); color: #fff; display: flex;
align-items: center; justify-content: center; font-weight: 700; font-size: 15px; flex: none;
}
.tst__name { font-weight: 700; font-size: 13.5px; color: var(--navy); }
.tst__meta { font-size: 12.5px; color: var(--ink-3); }
@media (min-width: 700px) { .tst { flex-basis: 320px; } }
/* ---------------------------------------------------------------------- */
/* 15. Contact */
/* ---------------------------------------------------------------------- */
.contact__grid { display: grid; gap: 20px; }
@media (min-width: 900px) { .contact__grid { grid-template-columns: 1fr 1fr; } }
.ch { display: grid; gap: 12px; }
.ch__i {
display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--line);
border-radius: var(--radius-sm); padding: 16px 18px;
}
.ch__i em {
font-style: normal; flex: none; width: 46px; height: 46px; border-radius: 50%; display: flex;
align-items: center; justify-content: center; color: #fff;
/* WhatsApp/Telegram override both of these inline with their brand colour
and draw their SVG with fill="#fff" directly, so they are unaffected.
Email and the two office rows have no inline colour and draw their SVGs
with stroke="currentColor" — without a background here that was a white
stroke on transparent, i.e. an invisible icon, on every contact row that
was not WhatsApp or Telegram. */
background: var(--ice); color: var(--navy);
}
.ch__i em svg { width: 21px; height: 21px; }
.ch__i div { flex: 1; min-width: 0; }
.ch__i b { display: block; font-size: 14.5px; color: var(--navy); }
.ch__i span { font-size: 13.5px; color: var(--ink-2); word-break: break-word; }
.ch__i svg.go { width: 16px; height: 16px; color: var(--ink-3); flex: none; }
/* The two office rows carry an address line plus a phone/email line — more
text than the single-line WhatsApp/Email/Telegram rows above them, so the
icon aligns to the top instead of the vertical centre, and each span gets
its own line rather than running together. */
.ch__i--office { align-items: flex-start; }
.ch__i--office span { display: block; margin-top: 2px; }
.ch__i--office span:first-of-type { margin-top: 4px; }
.ch__i--office a { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; }
.ch__i--office a:hover { color: var(--saffron-ink); }
.contact__card {
background: var(--navy); border-radius: var(--radius); padding: 28px 24px; color: #fff;
display: flex; flex-direction: column; justify-content: center;
}
.contact__card h3 { font-size: clamp(19px,4vw,22px); }
.contact__card p { color: rgba(255,255,255,.78); margin-top: 8px; font-size: 14.5px; }
.contact__card .btn { margin-top: 20px; }
/* ---------------------------------------------------------------------- */
/* 16. Footer */
/* ---------------------------------------------------------------------- */
.ft { background: var(--navy-900); color: rgba(255,255,255,.7); padding: 34px 0 22px; }
.ft__in { display: flex; flex-direction: column; gap: 16px; }
/* no invert filter here: flattening the mark to solid white turns the "VG"
into an unreadable blob. The cyan reads fine against the navy as-is. */
.ft__logo { height: 40px; width: auto; flex: none; }
.ft__brand { display: flex; align-items: center; gap: 10px; }
.ft__brand b { font-family: var(--ff-head); font-weight: 700; font-size: 16px; letter-spacing: .06em; color: #fff; }
.ft__brand b i { font-style: normal; color: var(--saffron); }
.ft__links { display: flex; flex-wrap: wrap; gap: 16px; font-size: 13.5px; }
.ft__links a:hover { color: #fff; }
.ft__addr { font-size: 12.5px; margin-top: 18px; line-height: 1.6; }
.ft__addr a { text-decoration: underline; text-underline-offset: 2px; }
.ft__addr a:hover { color: #fff; }
.ft__cr { font-size: 12.5px; }
@media (min-width: 700px) { .ft__in { flex-direction: row; align-items: center; justify-content: space-between; } }
/* ---------------------------------------------------------------------- */
/* 17. Sticky mobile bar */
/* ---------------------------------------------------------------------- */
.bar {
position: fixed; left: 0; right: 0; bottom: -80px; z-index: 55; display: flex; gap: 10px;
padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: #fff;
border-top: 1px solid var(--line); box-shadow: 0 -8px 24px -12px rgba(0,27,77,.2);
transition: bottom .25s ease;
}
.bar.show { bottom: 0; }
.bar .btn { flex: 1; }
@media (min-width: 960px) { .bar { display: none; } }
/* ---------------------------------------------------------------------- */
/* 18. Enquiry modal — bottom sheet (mobile) / dialog (desktop) */
/* ---------------------------------------------------------------------- */
.modal { position: fixed; inset: 0; z-index: 100; }
.modal[hidden] { display: none; }
.modal__backdrop {
position: absolute; inset: 0; background: rgba(0,20,50,.5); opacity: 0; transition: opacity .28s ease;
}
.modal.in .modal__backdrop { opacity: 1; }
.modal__sheet {
position: absolute; left: 0; right: 0; bottom: 0; max-height: 92vh; background: #fff;
border-radius: 22px 22px 0 0; padding: 20px 20px calc(20px + env(safe-area-inset-bottom));
transform: translateY(100%); transition: transform .3s ease; overflow-y: auto;
display: flex; flex-direction: column;
}
.modal.in .modal__sheet { transform: translateY(0); }
.modal__handle { width: 40px; height: 4px; border-radius: 2px; background: var(--line); margin: 0 auto 14px; }
.modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.modal__head h2 { font-size: 21px; color: var(--navy); }
.modal__head p { font-size: 13.5px; margin-top: 4px; }
.modal__close { flex: none; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--ice); }
.modal__close svg { width: 18px; height: 18px; color: var(--ink-2); }
@media (min-width: 720px) {
.modal__sheet {
left: 50%; right: auto; bottom: auto; top: 50%; width: min(560px, 92vw); max-height: 88vh;
border-radius: var(--radius); transform: translate(-50%, calc(-50% + 24px)); opacity: 0;
transition: transform .26s ease, opacity .26s ease;
}
.modal.in .modal__sheet { transform: translate(-50%, -50%); opacity: 1; }
.modal__handle { display: none; }
}
.f { margin-top: 14px; }
.f label { display: block; font-size: 13px; font-weight: 650; color: var(--navy); margin-bottom: 6px; }
.f input, .f select {
width: 100%; min-height: 50px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: 10px;
background: #fff; font-size: 15.5px;
}
.f input:focus, .f select:focus { border-color: var(--navy); }
.f.bad input, .f.bad select { border-color: #D3392E; }
.f__err { display: block; min-height: 16px; font-size: 12.5px; color: #D3392E; margin-top: 5px; }
.f--hp { position: absolute; left: -9999px; top: -9999px; }
.modal__foot { margin-top: 18px; display: grid; gap: 12px; }
.modal__legal { font-size: 12px; color: var(--ink-3); text-align: center; }
.modal__legal a { text-decoration: underline; }
.done { text-align: center; padding: 30px 6px 10px; }
.done svg { width: 62px; height: 62px; color: var(--green); margin: 0 auto 16px; }
.done h2 { font-size: 21px; color: var(--navy); }
.done p { margin-top: 8px; font-size: 14.5px; }
.done .btn { margin-top: 22px; }
/* ---------------------------------------------------------------------- */
/* 19. Misc */
/* ---------------------------------------------------------------------- */
.wa-float {
position: fixed; right: 18px; bottom: 90px; z-index: 50; width: 56px; height: 56px; border-radius: 50%;
background: #25D366; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 26px -8px rgba(37,211,102,.6);
}
/* the class sets display:flex, which would otherwise beat the [hidden] attribute */
.wa-float[hidden] { display: none; }
.wa-float svg { width: 28px; height: 28px; color: #fff; }
@media (min-width: 960px) { .wa-float { bottom: 26px; } }
/* position:fixed resolves against the real viewport, not the page shell
(section 3) — without this the button would drift out into the shell's
gutter on anything wider than 1920px instead of sitting at its corner. */
@media (min-width: 1920px) { .wa-float { right: max(18px, calc(50vw - 960px + 18px)); } }