/* ========================================================================== JHS PREMIUM LAYER — Jain Heritage School, Electronic City -------------------------------------------------------------------------- Loaded LAST on every page, after style.css / jhs-page.css and jhs-shared.css. It adds three things and changes nothing that already works: 1. A page-transition veil, shared by every page, so moving through the site reads as one product rather than as eight separate documents. 2. Text-arrival primitives (word rise, character bloom, rule draw, counter roll) that any page can opt into with a data attribute. 3. The dual-board components — the board pair, the board switch, the parity ledger — plus the chairman, life-at-JHS and admissions blocks. Every component is self-grounded: it paints its own background and its own type colours, so the same markup looks identical on the dark home page and on the white inner pages. Nothing here inherits a token it cannot see. BOARD PARITY RULE (see copy brief, appendix item 2): wherever CBSE and ICSE appear together they get identical card geometry, identical type scale and identical CTA treatment. Only the accent hue differs, and the two hues are matched for weight. Never make one card larger, warmer or first-by-default in a way the other is not. ========================================================================== */ :root{ --jp-navy:#001c54; --jp-navy-deep:#0a1332; --jp-ink:#101a33; --jp-ink-soft:#4d5878; --jp-gold:#f0a500; --jp-gold-lift:#ffc53d; --jp-paper:#f4f7fc; --jp-line:rgba(0,28,84,.12); --jp-line-2:rgba(0,28,84,.07); /* The two board accents. Deliberately equal in perceived weight — a deep steel blue and a deep signature green — so neither reads as the premium option. Do not swap either for a lighter or a brighter hue on its own. */ --jp-cbse:#1f4e86; --jp-cbse-soft:#e9f0f9; --jp-cbse-ink:#123258; --jp-icse:#00874a; --jp-icse-soft:#e6f5ec; --jp-icse-ink:#04552a; --jp-ease:cubic-bezier(.22,1,.36,1); --jp-ease-soft:cubic-bezier(.16,.84,.26,1); --jp-shadow:0 26px 60px -34px rgba(6,16,46,.55); --jp-shadow-lift:0 38px 78px -34px rgba(6,16,46,.62); --jp-display:"Plus Jakarta Sans","Google Sans","DM Sans",Arial,sans-serif; --jp-sans:"DM Sans","Google Sans","Google Sans Text",Arial,sans-serif; } /* ========================================================================== 1 · PAGE TRANSITION VEIL -------------------------------------------------------------------------- One surface, not a set of columns: a single sheet rises with a curved leading edge that flattens as it lands, so the motion reads as a page being drawn over rather than shutters closing. The mark is held by a thin gold arc that completes while the sheet is up, which gives the wait a shape. The covered state is armed synchronously in (data-veil="in"), so the new page is never briefly visible before the sweep. With JS off, sessionStorage empty or reduced motion on, the veil is simply never displayed and every link behaves like a plain link. ========================================================================== */ .jhs-veil{ position:fixed;inset:0;z-index:100000;pointer-events:none; display:none; } html.js .jhs-veil{display:block} .jhs-veil__sheet{ position:absolute;inset:0;overflow:hidden; background: radial-gradient(130% 95% at 50% 26%, #12275f 0%, #08143a 52%, #050d24 100%); transform:translateY(101%); /* the curve is what stops it feeling like a rectangle sliding */ border-radius:46% 46% 0 0 / 13% 13% 0 0; will-change:transform,border-radius; } /* a single gold hairline on the leading edge — catches the eye as it travels */ .jhs-veil__sheet::before{ content:"";position:absolute;left:0;right:0;top:0;height:1.5px;z-index:3; background:linear-gradient(90deg,transparent,rgba(240,165,0,.85),transparent); opacity:0; } /* slow-drifting light so the field is never dead, plus a vignette to hold the eye */ .jhs-veil__sheet::after{ content:"";position:absolute;inset:-18%;z-index:1;pointer-events:none; background: radial-gradient(36% 40% at 26% 30%, rgba(64,120,255,.34), transparent 68%), radial-gradient(32% 36% at 76% 66%, rgba(240,165,0,.20), transparent 66%), radial-gradient(30% 34% at 60% 14%, rgba(155,114,203,.18), transparent 70%); animation:jpAurora 11s ease-in-out infinite alternate; will-change:transform; } .jhs-veil__grain{ position:absolute;inset:0;z-index:2;pointer-events:none; opacity:.4;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); } .jhs-veil__vig{ position:absolute;inset:0;z-index:2;pointer-events:none; background:radial-gradient(72% 60% at 50% 48%, transparent 40%, rgba(2,6,20,.62) 100%); } @keyframes jpAurora{ to{ transform:translate3d(3.5%,-3%,0) scale(1.1) } } .jhs-veil__core{ position:absolute;inset-block-start:50%;inset-inline-start:50%; translate:-50% -50%; z-index:4; display:grid;gap:clamp(.9rem,2vw,1.25rem); /* the mark is a horizontal lockup, so the whole composition stays horizontal */ width:min(340px,64vw); opacity:0; } /* the wrapper exists so a single glint can sweep across the mark */ .jhs-veil__markwrap{position:relative;overflow:hidden} .jhs-veil__markwrap::after{ content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(104deg,transparent 36%,rgba(255,255,255,.62) 50%,transparent 64%); transform:translateX(-130%); } .jhs-veil__mark{ display:block;width:100%;height:auto; filter:drop-shadow(0 14px 34px rgba(0,0,0,.55)); } .jhs-veil__bar{ position:relative;height:2px;border-radius:2px; background:rgba(255,255,255,.15);overflow:hidden; } .jhs-veil__bar i{ position:absolute;inset:0;display:block; background:linear-gradient(90deg,var(--jp-gold,#f0a500),#ffd45e); transform:scaleX(0);transform-origin:0 50%; } /* — leaving: sheet rises, curve flattens, mark and rule arrive — */ html[data-veil="out"] .jhs-veil{pointer-events:all} html[data-veil="out"] .jhs-veil__sheet{animation:jpSheetUp .62s var(--jp-ease) both} html[data-veil="out"] .jhs-veil__sheet::before{animation:jpEdge .62s var(--jp-ease) both} html[data-veil="out"] .jhs-veil__core{animation:jpCoreIn .42s var(--jp-ease) .17s both} html[data-veil="out"] .jhs-veil__bar i{animation:jpBar 1s var(--jp-ease) .26s both} html[data-veil="out"] .jhs-veil__markwrap::after{animation:jpGlint .85s var(--jp-ease) .38s both} @keyframes jpGlint{ from{transform:translateX(-130%)} to{transform:translateX(130%)} } @keyframes jpSheetUp{ from{transform:translateY(101%);border-radius:46% 46% 0 0 / 13% 13% 0 0} to {transform:translateY(0); border-radius:0} } @keyframes jpEdge{ 0%{opacity:0} 22%{opacity:1} 78%{opacity:1} 100%{opacity:0} } @keyframes jpCoreIn{ from{opacity:0;translate:-50% -46%} to{opacity:1;translate:-50% -50%} } @keyframes jpBar{ to{transform:scaleX(1)} } /* — arriving: page starts covered, sheet lifts clear — */ html[data-veil="in"] .jhs-veil__sheet{transform:translateY(0);border-radius:0} html[data-veil="in"] .jhs-veil__core{opacity:1} html[data-veil="in"] .jhs-veil__bar i{transform:scaleX(1)} html[data-veil="away"] .jhs-veil__sheet{animation:jpSheetAway .66s var(--jp-ease) .08s both} html[data-veil="away"] .jhs-veil__core{animation:jpCoreOut .28s ease both} @keyframes jpSheetAway{ from{transform:translateY(0); border-radius:0} to {transform:translateY(-101%); border-radius:0 0 46% 46% / 0 0 13% 13%} } @keyframes jpCoreOut{ to{opacity:0;translate:-50% -54%} } @media (prefers-reduced-motion:reduce){ html.js .jhs-veil{display:none} } /* ========================================================================== 2 · TEXT ARRIVAL PRIMITIVES -------------------------------------------------------------------------- All opt-in, all one-shot, all no-ops without JS: the script only ever adds the wrapper spans and the .jp-in flag, so an unwrapped heading is a plain readable heading. ========================================================================== */ /* — word rise: the default for a section heading — */ [data-jp-text] .jpw{display:inline-block;white-space:pre-wrap} [data-jp-text="rise"] .jpw{ opacity:0;transform:translate3d(0,.62em,0) rotateX(-58deg); transform-origin:50% 100%; transition:opacity .55s ease var(--jpd,0s),transform .85s var(--jp-ease-soft) var(--jpd,0s); } [data-jp-text="rise"].jp-in .jpw{opacity:1;transform:none} /* — bloom: characters resolve out of a blur; for short, loud lines — */ [data-jp-text="bloom"] .jpc{display:inline-block;white-space:pre} [data-jp-text="bloom"] .jpc{ opacity:0;filter:blur(9px);transform:translate3d(0,.22em,0) scale(1.04); transition:opacity .5s ease var(--jpd,0s),filter .6s ease var(--jpd,0s),transform .7s var(--jp-ease-soft) var(--jpd,0s); } [data-jp-text="bloom"].jp-in .jpc{opacity:1;filter:blur(0);transform:none} /* — mask: each line wipes up from behind a hard edge; the most "premium" of the three, so it is reserved for hero and band headlines — */ [data-jp-text="mask"] .jpl{display:block;overflow:hidden} [data-jp-text="mask"] .jpl > span{ display:block;transform:translate3d(0,105%,0); transition:transform .95s var(--jp-ease-soft) var(--jpd,0s); } [data-jp-text="mask"].jp-in .jpl > span{transform:none} /* — a rule that draws itself under a heading — */ .jp-rule{ display:block;height:3px;width:clamp(72px,9vw,118px);margin-top:1.15rem;border-radius:3px; background:linear-gradient(90deg,var(--jp-gold),rgba(240,165,0,0)); transform:scaleX(0);transform-origin:0 50%; transition:transform 1s var(--jp-ease-soft) .18s; } .jp-in .jp-rule,.reveal.in .jp-rule,.jp-rule.jp-in{transform:scaleX(1)} /* — a soft light sweeping across a headline once it has landed — */ .jp-shine{ background:linear-gradient(100deg,currentColor 34%,rgba(255,255,255,.92) 50%,currentColor 66%); background-size:280% 100%;background-position:120% 0; -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent; } .jp-in .jp-shine{animation:jpShine 1.5s var(--jp-ease-soft) .55s both} @keyframes jpShine{from{background-position:120% 0}to{background-position:-40% 0}} /* — figures that roll up to their value — */ .jp-count{font-variant-numeric:tabular-nums} @media (prefers-reduced-motion:reduce){ [data-jp-text] .jpw,[data-jp-text] .jpc,[data-jp-text] .jpl > span{ opacity:1!important;filter:none!important;transform:none!important;transition:none!important; } .jp-rule{transform:scaleX(1);transition:none} .jp-in .jp-shine{animation:none} .jp-shine{-webkit-text-fill-color:currentColor;background:none} } /* ========================================================================== 3 · SHARED SECTION FURNITURE ========================================================================== */ .jp-sec{position:relative;isolation:isolate;padding-block:clamp(4rem,7.5vw,7.5rem)} .jp-shell{width:min(100% - clamp(2rem,8vw,5rem),1440px);margin-inline:auto} .jp-sec.jp-paper{background: radial-gradient(120% 90% at 88% -10%,rgba(31,78,134,.09),transparent 58%), radial-gradient(90% 80% at 4% 106%,rgba(0,135,74,.09),transparent 60%), linear-gradient(180deg,#f7f9fd 0%,#eef3fa 100%);} .jp-sec.jp-deep{ color:#fff; background: radial-gradient(110% 80% at 82% -12%,rgba(31,78,134,.55),transparent 62%), radial-gradient(90% 70% at 6% 108%,rgba(0,135,74,.32),transparent 62%), linear-gradient(165deg,#0b1533 0%,#071026 60%,#050c1f 100%); } /* the tinted bands supply their own edge — the shared hairline would double it */ :is(.jp-sec) + section,section + :is(.jp-sec),.jp-sec + .jp-sec{border-top:0} .jp-head{max-width:74ch} .jp-head.jp-center{margin-inline:auto;text-align:center} .jp-eyebrow{ display:inline-flex;align-items:center;gap:.6rem; font-family:var(--jp-sans);font-size:.74rem;font-weight:800; letter-spacing:.18em;text-transform:uppercase;color:var(--jp-gold); margin:0 0 1rem; } .jp-eyebrow::before{content:"";width:26px;height:2px;border-radius:2px;background:currentColor;flex:none} .jp-center .jp-eyebrow::before{display:none} .jp-h2{ font-family:var(--jp-display);font-weight:800;color:var(--jp-navy); font-size:clamp(1.9rem,1.2rem + 2.7vw,3.35rem);line-height:1.06;letter-spacing:-.028em; margin:0;text-wrap:balance; } .jp-deep .jp-h2{color:#fff} .jp-lede{ font-family:var(--jp-sans);color:var(--jp-ink-soft); font-size:clamp(1.02rem,.98rem + .42vw,1.24rem);line-height:1.72; max-width:64ch;margin:1.35rem 0 0; } .jp-deep .jp-lede{color:rgba(255,255,255,.8)} .jp-center .jp-lede{margin-inline:auto} .jp-h2 .jp-accent{color:var(--jp-gold)} .jp-deep .jp-h2 .jp-accent{color:var(--jp-gold-lift)} .jp-btn{ display:inline-flex;align-items:center;gap:.65rem; padding:1rem 1.9rem;border:0;border-radius:100vw;cursor:pointer; font-family:var(--jp-sans);font-weight:800;font-size:.98rem;text-decoration:none; transition:transform .35s var(--jp-ease),box-shadow .35s var(--jp-ease),background .3s ease,color .3s ease; } .jp-btn i{transition:transform .35s var(--jp-ease)} .jp-btn:hover i{transform:translateX(4px)} .jp-btn--gold{background:var(--jp-gold-lift);color:#20180a;box-shadow:0 14px 34px -14px rgba(240,165,0,.75)} .jp-btn--gold:hover{transform:translateY(-3px);box-shadow:0 20px 44px -14px rgba(240,165,0,.8)} /* Gemini-style CTA: the border is a conic gradient that rotates behind a solid core. @property is what makes the angle animatable; without it the ring still renders, just static. */ @property --jp-ring{ syntax:''; inherits:false; initial-value:0deg; } .jp-btn--gemini{ position:relative; font-size:clamp(1.02rem,.55vw + .92rem,1.2rem); padding:1.15rem 2.4rem; border:2px solid transparent; color:#fff; background: linear-gradient(#0b1130,#0b1130) padding-box, conic-gradient(from var(--jp-ring),#4285f4,#9b72cb,#d96570,#f2a60c,#4285f4) border-box; box-shadow:0 0 0 rgba(66,133,244,0), 0 16px 40px -18px rgba(0,0,0,.85); animation:jpRingSpin 5s linear infinite; } .jp-btn--gemini:hover{ transform:translateY(-3px); box-shadow:0 0 26px -6px rgba(155,114,203,.5), 0 22px 50px -18px rgba(0,0,0,.9); } @keyframes jpRingSpin{ to{ --jp-ring:360deg } } @media (prefers-reduced-motion:reduce){ .jp-btn--gemini{ animation:none } } .jp-btn--ink{background:var(--jp-navy);color:#fff;box-shadow:0 14px 34px -16px rgba(0,28,84,.8)} .jp-btn--ink:hover{transform:translateY(-3px);box-shadow:0 22px 46px -16px rgba(0,28,84,.85)} .jp-btn--line{background:transparent;color:var(--jp-navy);box-shadow:inset 0 0 0 1.7px rgba(0,28,84,.28)} .jp-btn--line:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1.7px var(--jp-navy),0 16px 34px -18px rgba(0,28,84,.6)} .jp-deep .jp-btn--line{color:#fff;box-shadow:inset 0 0 0 1.7px rgba(255,255,255,.36)} .jp-deep .jp-btn--line:hover{box-shadow:inset 0 0 0 1.7px #fff,0 16px 34px -18px rgba(0,0,0,.7)} .jp-btns{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:1.9rem} .jp-center .jp-btns{justify-content:center} /* ========================================================================== 4 · THE BOARD PAIR — the answer to "which board?" -------------------------------------------------------------------------- Two cards, identical in every dimension. The accent bar, the icon tile, the heading, the four-line ledger and the CTA are all shared geometry; only the --bd custom property differs between them. ========================================================================== */ .jp-boards{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(1rem,2.2vw,1.6rem);margin-top:clamp(2.4rem,4.6vw,3.4rem); align-items:stretch; } @media (max-width:860px){.jp-boards{grid-template-columns:1fr}} .jp-board{ --bd:var(--jp-cbse);--bd-soft:var(--jp-cbse-soft);--bd-ink:var(--jp-cbse-ink); position:relative;display:flex;flex-direction:column;overflow:hidden; background:#fff;border:1px solid var(--jp-line);border-radius:24px; padding:clamp(1.6rem,3vw,2.4rem); box-shadow:var(--jp-shadow); transition:transform .45s var(--jp-ease),box-shadow .45s var(--jp-ease),border-color .45s ease; text-decoration:none;color:inherit; } .jp-board--icse{--bd:var(--jp-icse);--bd-soft:var(--jp-icse-soft);--bd-ink:var(--jp-icse-ink)} .jp-board::before{content:"";position:absolute;inset-block-start:0;inset-inline:0;height:5px;background:var(--bd)} .jp-board::after{ content:"";position:absolute;inset-block-start:-34%;inset-inline-end:-20%; width:60%;aspect-ratio:1;border-radius:50%;pointer-events:none; background:radial-gradient(circle,var(--bd),transparent 70%);opacity:.09; transition:opacity .45s ease,transform .6s var(--jp-ease); } .jp-board:hover{ transform:translateY(-8px); border-color:color-mix(in srgb,var(--bd) 42%,transparent); box-shadow:var(--jp-shadow-lift); } .jp-board:hover::after{opacity:.16;transform:scale(1.12)} .jp-board__top{display:flex;align-items:center;gap:1rem;margin-bottom:1.15rem} .jp-board__ic{ width:52px;height:52px;flex:none;border-radius:16px;display:grid;place-items:center; background:var(--bd-soft);color:var(--bd);font-size:1.25rem; box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--bd) 26%,transparent); } .jp-board__tag{ font-family:var(--jp-sans);font-size:.7rem;font-weight:900;letter-spacing:.15em; text-transform:uppercase;color:var(--bd-ink); } .jp-board__tag small{display:block;font-size:.66rem;letter-spacing:.08em;font-weight:700;color:var(--jp-ink-soft);text-transform:none;margin-top:.25rem} .jp-board h3{ font-family:var(--jp-display);font-weight:800;color:var(--jp-navy); font-size:clamp(1.4rem,1.15rem + .9vw,1.95rem);line-height:1.16;letter-spacing:-.02em;margin:0 0 .3rem; } .jp-board > p.jp-board__line{ font-family:var(--jp-sans);font-size:.92rem;font-weight:800;letter-spacing:.05em; color:var(--bd);margin:0 0 1rem; } .jp-board > p{font-family:var(--jp-sans);font-size:.99rem;line-height:1.72;color:var(--jp-ink-soft);margin:0 0 1.4rem} .jp-board__list{list-style:none;margin:0 0 1.5rem;padding:0;display:grid;gap:.7rem} .jp-board__list li{ position:relative;padding-left:1.65rem;font-family:var(--jp-sans); font-size:.94rem;line-height:1.6;color:var(--jp-ink); } .jp-board__list li b{color:var(--jp-navy)} .jp-board__list li::before{ content:"";position:absolute;inset-inline-start:0;inset-block-start:.46em; width:9px;height:9px;border-radius:3px;background:var(--bd);transform:rotate(45deg); } .jp-board__fit{ margin-top:auto;padding-top:1.25rem;border-top:1px solid var(--jp-line-2); font-family:var(--jp-sans);font-size:.92rem;line-height:1.6;color:var(--jp-ink-soft); } .jp-board__fit b{display:block;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--bd-ink);margin-bottom:.5rem} .jp-board__go{ display:inline-flex;align-items:center;gap:.6rem;margin-top:1.4rem; font-family:var(--jp-sans);font-weight:800;font-size:.92rem;color:var(--bd); text-decoration:none; } .jp-board__go i{transition:transform .35s var(--jp-ease)} .jp-board:hover .jp-board__go i{transform:translateX(5px)} /* the neutral line that sits under the pair and refuses to rank them */ .jp-parity{ margin-top:clamp(1.6rem,3vw,2.3rem);padding:clamp(1.2rem,2.4vw,1.8rem) clamp(1.3rem,2.6vw,2rem); border-radius:20px;border:1px dashed rgba(0,28,84,.22);background:rgba(255,255,255,.6); font-family:var(--jp-sans);font-size:1rem;line-height:1.7;color:var(--jp-ink); text-align:center; } .jp-deep .jp-parity{border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.05);color:rgba(255,255,255,.86)} .jp-parity b{color:var(--jp-navy)} .jp-deep .jp-parity b{color:var(--jp-gold-lift)} /* ========================================================================== 5 · BOARD SWITCH — one panel, two answers -------------------------------------------------------------------------- Used where the page has room for depth rather than a pair of summaries. Keyboard-operable tabs; without JS both panels are simply visible in turn. ========================================================================== */ .jp-switch{margin-top:clamp(2.2rem,4.4vw,3.2rem)} .jp-switch__bar{ display:inline-grid;grid-auto-flow:column;gap:.3rem;position:relative; padding:.35rem;border-radius:100vw;background:rgba(0,28,84,.06); border:1px solid var(--jp-line); } .jp-deep .jp-switch__bar{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16)} .jp-switch__tab{ position:relative;z-index:1;appearance:none;border:0;cursor:pointer; padding:.8rem 1.7rem;border-radius:100vw;background:transparent; font-family:var(--jp-sans);font-weight:800;font-size:.95rem;color:var(--jp-ink-soft); transition:color .3s ease; } .jp-deep .jp-switch__tab{color:rgba(255,255,255,.66)} .jp-switch__tab[aria-selected="true"]{color:#fff} .jp-switch__ink{ position:absolute;z-index:0;inset-block:.35rem;border-radius:100vw; background:var(--jp-navy);box-shadow:0 10px 24px -12px rgba(0,28,84,.8); transition:transform .5s var(--jp-ease),width .5s var(--jp-ease),background .35s ease; } .jp-switch__bar[data-active="1"] .jp-switch__ink{background:var(--jp-icse)} .jp-switch__bar[data-active="0"] .jp-switch__ink{background:var(--jp-cbse)} .jp-switch__panels{margin-top:clamp(1.6rem,3vw,2.4rem)} .jp-switch__panel[hidden]{display:none} .jp-switch__panel{animation:jpPanelIn .55s var(--jp-ease) both} @keyframes jpPanelIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){.jp-switch__panel{animation:none}} /* ========================================================================== 6 · PARITY LEDGER — "whichever board you choose, you get all of this" ========================================================================== */ .jp-ledger{ display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr)); gap:1px;background:var(--jp-line);border:1px solid var(--jp-line); border-radius:22px;overflow:hidden;margin-top:clamp(2.2rem,4.4vw,3.2rem); } .jp-deep .jp-ledger{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.14)} .jp-ledger__item{ background:#fff;padding:clamp(1.4rem,2.6vw,1.9rem); display:grid;gap:.55rem;align-content:start; } .jp-deep .jp-ledger__item{background:rgba(9,17,40,.86)} .jp-ledger__ic{ width:42px;height:42px;border-radius:14px;display:grid;place-items:center; background:rgba(0,28,84,.06);color:var(--jp-navy);font-size:1rem;margin-bottom:.35rem; } .jp-deep .jp-ledger__ic{background:rgba(255,255,255,.09);color:var(--jp-gold-lift)} .jp-ledger__item h4{ font-family:var(--jp-display);font-weight:800;font-size:1.05rem;line-height:1.3; color:var(--jp-navy);margin:0;letter-spacing:-.012em; } .jp-deep .jp-ledger__item h4{color:#fff} .jp-ledger__item p{font-family:var(--jp-sans);font-size:.93rem;line-height:1.65;color:var(--jp-ink-soft);margin:0} .jp-deep .jp-ledger__item p{color:rgba(255,255,255,.72)} /* ========================================================================== 7 · CHAIRMAN — the message, given room to breathe -------------------------------------------------------------------------- Portrait in a layered frame, oversized quotation glyph, the message set at reading size, and a signature block. The photograph is a supporting element here: the words are the subject. ========================================================================== */ .jp-chair{ display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); gap:clamp(2rem,5vw,4.5rem);align-items:center; } @media (max-width:940px){.jp-chair{grid-template-columns:1fr;gap:clamp(1.8rem,5vw,2.6rem)}} .jp-chair__figure{position:relative;margin:0} .jp-chair__figure::before{ content:"";position:absolute;inset:clamp(14px,2.4vw,26px) auto auto clamp(-14px,-2vw,-26px); width:100%;height:100%;border-radius:26px; border:1.5px solid rgba(240,165,0,.55);pointer-events:none; transition:transform .8s var(--jp-ease); } .jp-chair__figure:hover::before{transform:translate(8px,-8px)} .jp-chair__shot{ position:relative;border-radius:26px;overflow:hidden;aspect-ratio:4/5; background:#0d1732;box-shadow:var(--jp-shadow-lift); } .jp-chair__shot img{width:100%;height:100%;object-fit:cover;object-position:center 22%; transform:scale(1.04);transition:transform 1.3s var(--jp-ease-soft)} .jp-in .jp-chair__shot img,.reveal.in .jp-chair__shot img{transform:none} .jp-chair__shot::after{ content:"";position:absolute;inset:auto 0 0 0;height:42%;pointer-events:none; background:linear-gradient(180deg,transparent,rgba(6,14,38,.72)); } .jp-chair__plate{ position:absolute;inset-block-end:1.1rem;inset-inline:1.1rem;z-index:2; padding:.85rem 1.1rem;border-radius:16px; background:rgba(9,18,44,.62);border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(10px); } .jp-chair__plate b{ display:block;font-family:var(--jp-display);font-weight:800;font-size:1rem;color:#fff;letter-spacing:-.01em; } .jp-chair__plate span{display:block;margin-top:.15rem;font-family:var(--jp-sans);font-size:.78rem;color:rgba(255,255,255,.74)} .jp-chair__body{position:relative} .jp-chair__body::before{ content:"\201C";position:absolute;inset-block-start:-.42em;inset-inline-start:-.06em; font-family:var(--jp-display);font-size:clamp(7rem,14vw,12rem);line-height:1; color:var(--jp-gold);opacity:.14;pointer-events:none;z-index:-1; } .jp-chair__body .jp-chair__lead{ font-family:var(--jp-display);font-weight:800;color:var(--jp-navy); font-size:clamp(1.35rem,1rem + 1.5vw,2.2rem);line-height:1.24;letter-spacing:-.022em; margin:0 0 1.4rem;text-wrap:balance; } .jp-deep .jp-chair__body .jp-chair__lead{color:#fff} .jp-chair__body p{ font-family:var(--jp-sans);font-size:clamp(1rem,.97rem + .3vw,1.11rem); line-height:1.82;color:var(--jp-ink-soft);margin:0 0 1.1rem;max-width:60ch; } .jp-deep .jp-chair__body p{color:rgba(255,255,255,.8)} .jp-chair__body p em{color:var(--jp-navy);font-style:italic;font-weight:600} .jp-deep .jp-chair__body p em{color:#fff} .jp-chair__body .jp-chair__pull{ margin:1.6rem 0;padding:1.15rem 0 1.15rem 1.5rem; border-left:3px solid var(--jp-gold); font-family:var(--jp-display);font-weight:700;font-style:italic; font-size:clamp(1.08rem,1rem + .55vw,1.35rem);line-height:1.5;color:var(--jp-navy); } .jp-deep .jp-chair__body .jp-chair__pull{color:#fff} .jp-chair__sign{ margin-top:1.9rem;padding-top:1.3rem;border-top:1px solid var(--jp-line); display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap; } .jp-deep .jp-chair__sign{border-color:rgba(255,255,255,.16)} .jp-chair__sign .nm{font-family:var(--jp-display);font-weight:800;font-size:1.08rem;color:var(--jp-navy);letter-spacing:-.012em} .jp-deep .jp-chair__sign .nm{color:#fff} .jp-chair__sign .rl{font-family:var(--jp-sans);font-size:.88rem;color:var(--jp-ink-soft)} .jp-deep .jp-chair__sign .rl{color:rgba(255,255,255,.7)} .jp-chair__sign .bar{width:40px;height:2px;border-radius:2px;background:var(--jp-gold);flex:none} /* ========================================================================== 8 · LIFE AT JHS — the beyond-academics grid ========================================================================== */ .jp-life{ display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:clamp(1rem,2.2vw,1.6rem);margin-top:clamp(2.4rem,4.6vw,3.4rem); } .jp-life__card{ --acc:var(--jp-cbse); position:relative;overflow:hidden;background:#fff; border:1px solid var(--jp-line);border-radius:22px; padding:clamp(1.5rem,2.8vw,2.1rem); display:flex;flex-direction:column; box-shadow:0 1px 2px rgba(12,19,48,.04),0 22px 46px -34px rgba(12,19,48,.55); transition:transform .4s var(--jp-ease),box-shadow .4s var(--jp-ease),border-color .4s ease; } .jp-life__card:nth-child(2){--acc:var(--jp-icse)} .jp-life__card:nth-child(3){--acc:#c2790a} .jp-life__card:nth-child(4){--acc:#4b3ba8} .jp-life__card:nth-child(5){--acc:#0f7f92} .jp-life__card:nth-child(6){--acc:#a03b6a} .jp-life__card::before{content:"";position:absolute;inset-block-start:0;inset-inline:0;height:4px;background:var(--acc)} .jp-life__card:hover{transform:translateY(-7px);border-color:color-mix(in srgb,var(--acc) 40%,transparent);box-shadow:var(--jp-shadow-lift)} .jp-life__ic{ width:50px;height:50px;border-radius:16px;display:grid;place-items:center; background:color-mix(in srgb,var(--acc) 12%,#fff);color:var(--acc);font-size:1.15rem;margin-bottom:1.1rem; box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--acc) 24%,transparent); } .jp-life__card h3{ font-family:var(--jp-display);font-weight:800;color:var(--jp-navy); font-size:clamp(1.15rem,1.05rem + .5vw,1.4rem);line-height:1.2;letter-spacing:-.018em;margin:0 0 .55rem; } .jp-life__card > p{font-family:var(--jp-sans);font-size:.96rem;line-height:1.7;color:var(--jp-ink-soft);margin:0 0 1.2rem} .jp-life__card ul{list-style:none;margin:auto 0 0;padding:1.15rem 0 0;border-top:1px solid var(--jp-line-2);display:grid;gap:.65rem} .jp-life__card li{position:relative;padding-left:1.5rem;font-family:var(--jp-sans);font-size:.92rem;line-height:1.58;color:var(--jp-ink-soft)} .jp-life__card li b{color:var(--jp-navy)} .jp-life__card li::before{ content:"";position:absolute;inset-inline-start:0;inset-block-start:.5em; width:8px;height:8px;border-radius:2px;background:var(--acc);transform:rotate(45deg); } /* ========================================================================== 9 · STEP FLOW — the admissions journey ========================================================================== */ .jp-steps{ display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:clamp(1rem,2.2vw,1.5rem);margin-top:clamp(2.4rem,4.6vw,3.4rem); counter-reset:jpstep; } .jp-step{ --acc:var(--jp-cbse); position:relative;counter-increment:jpstep; background:#fff;border:1px solid var(--jp-line);border-radius:20px; padding:clamp(1.4rem,2.6vw,1.95rem);overflow:hidden; transition:transform .4s var(--jp-ease),box-shadow .4s var(--jp-ease); box-shadow:0 1px 2px rgba(12,19,48,.04),0 20px 44px -34px rgba(12,19,48,.5); } .jp-step:nth-child(2){--acc:var(--jp-icse)} .jp-step:nth-child(3){--acc:#c2790a} .jp-step:nth-child(4){--acc:#4b3ba8} .jp-step:hover{transform:translateY(-6px);box-shadow:var(--jp-shadow-lift)} .jp-step::before{content:"";position:absolute;inset-block-start:0;inset-inline:0;height:4px;background:var(--acc)} .jp-step__n{ font-family:var(--jp-display);font-weight:800;font-size:clamp(2.2rem,4.5vw,2.9rem); line-height:1;letter-spacing:-.045em;color:var(--acc);opacity:.24;margin-bottom:.6rem; font-variant-numeric:tabular-nums; } .jp-step h3{font-family:var(--jp-display);font-weight:800;font-size:1.16rem;line-height:1.25;color:var(--jp-navy);margin:0 0 .45rem;letter-spacing:-.015em} .jp-step p{font-family:var(--jp-sans);font-size:.94rem;line-height:1.68;color:var(--jp-ink-soft);margin:0} /* the connecting rail, desktop only */ @media (min-width:961px){ .jp-steps{position:relative} .jp-step:not(:last-child)::after{ content:"";position:absolute;inset-block-start:50%;inset-inline-end:calc(-1 * clamp(1rem,2.2vw,1.5rem) / 2 - 5px); width:10px;height:10px;border-radius:50%;background:var(--jp-gold); transform:translateY(-50%);box-shadow:0 0 0 4px rgba(240,165,0,.18); } } /* ========================================================================== 10 · TRUST RAIL — the strip of proof under a hero ========================================================================== */ .jp-trust{ display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:1px;background:var(--jp-line);border:1px solid var(--jp-line); border-radius:20px;overflow:hidden; } .jp-trust__cell{ background:#fff;padding:1.15rem 1.35rem;display:grid;gap:.28rem; transition:background .35s ease; } .jp-trust__cell:hover{background:#fbfcfe} .jp-trust__cell b{ font-family:var(--jp-display);font-weight:800;font-size:clamp(1.9rem,1.5rem + 1.2vw,2.6rem); line-height:1;color:var(--jp-navy);letter-spacing:-.025em;font-variant-numeric:tabular-nums; } .jp-trust__cell b .jp-count{font-size:inherit;font-family:inherit;font-weight:inherit;color:inherit} .jp-trust__cell span{font-family:var(--jp-sans);font-size:.81rem;font-weight:600;color:var(--jp-ink-soft);line-height:1.42} .jp-deep .jp-trust,.jp-deep .jp-trust__cell{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)} .jp-deep .jp-trust__cell b{color:#fff} .jp-deep .jp-trust__cell span{color:rgba(255,255,255,.68)} /* ========================================================================== 11 · A NOTE / LETTER BLOCK — the admissions letter to parents ========================================================================== */ .jp-letter{ position:relative;max-width:78ch;margin-inline:auto; background:#fff;border:1px solid var(--jp-line);border-radius:26px; padding:clamp(1.8rem,4vw,3.4rem);box-shadow:var(--jp-shadow); } .jp-letter::before{ content:"";position:absolute;inset-block-start:0;inset-inline:clamp(1.8rem,4vw,3.4rem); height:4px;border-radius:0 0 4px 4px; background:linear-gradient(90deg,var(--jp-cbse),var(--jp-gold) 52%,var(--jp-icse)); } .jp-letter__salute{ font-family:var(--jp-display);font-weight:800;font-size:clamp(1.2rem,1.05rem + .7vw,1.6rem); color:var(--jp-navy);margin:0 0 1.3rem;letter-spacing:-.018em; } .jp-letter p{font-family:var(--jp-sans);font-size:clamp(1rem,.97rem + .28vw,1.09rem);line-height:1.85;color:var(--jp-ink-soft);margin:0 0 1.15rem} .jp-letter p strong,.jp-letter p b{color:var(--jp-navy)} .jp-letter__sign{ margin-top:1.8rem;padding-top:1.3rem;border-top:1px solid var(--jp-line); font-family:var(--jp-display);font-weight:800;font-size:1rem;color:var(--jp-navy); } .jp-letter__sign span{display:block;margin-top:.2rem;font-family:var(--jp-sans);font-weight:500;font-size:.88rem;color:var(--jp-ink-soft)} /* ========================================================================== 12 · QUICK FACTS STRIP ========================================================================== */ .jp-facts{list-style:none;margin:clamp(2rem,4vw,3rem) 0 0;padding:0;display:grid;gap:1px; background:var(--jp-line);border:1px solid var(--jp-line);border-radius:20px;overflow:hidden} .jp-facts li{ background:#fff;padding:1.15rem clamp(1.1rem,2.2vw,1.6rem); display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:.35rem 1.5rem;align-items:baseline; font-family:var(--jp-sans);font-size:.98rem;line-height:1.6;color:var(--jp-ink-soft); } @media (max-width:640px){.jp-facts li{grid-template-columns:1fr}} .jp-facts b{font-size:.72rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--jp-navy)} .jp-facts a{color:var(--jp-cbse);font-weight:700;text-decoration:none} .jp-facts a:hover{text-decoration:underline} .jp-facts em{font-style:normal;color:var(--jp-icse);font-weight:700} /* ========================================================================== 13 · CLOSING BAND ========================================================================== */ .jp-close{text-align:center} .jp-close .jp-h2{margin-inline:auto;max-width:20ch} .jp-close .jp-lede{margin-inline:auto} /* ========================================================================== 14 · MISC POLISH ========================================================================== */ /* a quiet, consistent focus ring everywhere the premium layer owns */ .jp-btn:focus-visible,.jp-board:focus-visible,.jp-switch__tab:focus-visible,.jp-board__go:focus-visible{ outline:3px solid var(--jp-gold);outline-offset:3px;border-radius:14px; } /* the scroll rail — the home page has no equivalent of the inner pages' bar */ .jp-progress{ position:fixed;inset-block-start:0;inset-inline:0;height:3px;z-index:99; transform-origin:0 50%;transform:scaleX(0);pointer-events:none; background:linear-gradient(90deg,var(--jp-cbse),var(--jp-gold) 52%,var(--jp-icse)); } @media (prefers-reduced-motion:reduce){.jp-progress{display:none}} /* smooth-scroll offset for the sticky/fixed bars on every page */ :where(section,header,div)[id]{scroll-margin-top:clamp(4.5rem,8vw,6.5rem)} /* ========================================================================== 15 · HOME HERO — the board pair, stated in the banner -------------------------------------------------------------------------- Lives in the premium layer rather than style.css because it is part of the dual-board system: the two chips are deliberately identical in size, weight and padding, and only their accent differs. ========================================================================== */ .hero-boards{ display:flex;align-items:center;flex-wrap:wrap;gap:.7rem; margin-top:30px;padding-top:24px;border-top:1px solid rgba(0,28,84,.14); } .hero-boards .hb{ display:inline-flex;align-items:center;gap:.55rem; padding:.72rem 1.35rem;border-radius:100vw; font-family:var(--jp-sans);font-weight:800;font-size:.98rem;letter-spacing:.02em; color:#fff;box-shadow:0 12px 26px -14px rgba(6,16,46,.7); transition:transform .35s var(--jp-ease),box-shadow .35s var(--jp-ease); } .hero-boards .hb:hover{transform:translateY(-3px);box-shadow:0 18px 34px -14px rgba(6,16,46,.75)} .hero-boards .hb i{font-size:.86em;opacity:.9} .hero-boards .hb--cbse{background:var(--jp-cbse)} .hero-boards .hb--icse{background:var(--jp-icse)} .hero-boards .hb-plus{font-family:var(--jp-display);font-weight:800;font-size:1.15rem;color:var(--jp-ink-soft);opacity:.55} .hero-boards .hb-note{ font-family:var(--jp-sans);font-size:.85rem;line-height:1.45;color:#5a6486; flex:1 1 14rem;min-width:0; } @media (max-width:560px){ .hero-boards{gap:.5rem} .hero-boards .hb{padding:.62rem 1.05rem;font-size:.9rem} .hero-boards .hb-note{flex-basis:100%} } /* the hero headline arrives a line at a time; the accent line keeps its gold */ .hero h1[data-jp-text] .jpl{padding-block:.02em} /* mask lines are authored by hand, so their stagger is declared here rather than measured in script — three or four lines is the practical maximum */ [data-jp-text="mask"] .jpl:nth-child(2) > span{transition-delay:.13s} [data-jp-text="mask"] .jpl:nth-child(3) > span{transition-delay:.26s} [data-jp-text="mask"] .jpl:nth-child(4) > span{transition-delay:.39s} /* ========================================================================== 16 · TRUST STRIP — the slim band that bridges hero and boards -------------------------------------------------------------------------- It carries no padding of its own beyond the rule row, because it is a continuation of the banner rather than a section in its own right. ========================================================================== */ .jp-truststrip{ padding-block:clamp(1.4rem,2.6vw,2.2rem)!important; background:linear-gradient(180deg,#ffffff 0%,#f7f9fd 100%); } .jp-truststrip .jp-trust{box-shadow:0 22px 46px -38px rgba(6,16,46,.6)} /* ========================================================================== 17 · COMPONENT ARRIVAL -------------------------------------------------------------------------- The premium layer's own reveal, applied by jhs-premium.js. It is deliberately independent of the two host reveal systems (.reveal.is-in on the home page, .reveal.in on the inner pages) so one component behaves the same everywhere. Never put .reveal and .jp-rise on the same element: both set opacity:0 and whichever flag class does not arrive leaves the element invisible. ========================================================================== */ .jp-rise{ opacity:0;transform:translate3d(0,30px,0); transition:opacity .7s ease var(--jpd,0s),transform .9s var(--jp-ease-soft) var(--jpd,0s); } .jp-rise.jp-in{opacity:1;transform:none} /* the two board cards approach from the side they sit on, so the pair reads as one gesture rather than two identical slides */ @media (min-width:861px){ .jp-boards > .jp-rise:first-child{transform:perspective(1200px) translate3d(-46px,26px,-60px) rotateY(9deg);transform-origin:100% 50%} .jp-boards > .jp-rise:last-child{transform:perspective(1200px) translate3d(46px,26px,-60px) rotateY(-9deg);transform-origin:0 50%} .jp-boards > .jp-rise.jp-in{transform:none} } @media (prefers-reduced-motion:reduce){ .jp-rise,.jp-boards > .jp-rise{opacity:1!important;transform:none!important;transition:none!important} } /* ========================================================================== 18 · GROWTH ROADMAP — the campus grows one grade a year, to Grade 12 -------------------------------------------------------------------------- The single most reassuring fact on the site for a family enrolling into the founding cohort, and the one the old copy buried inside "expanding each academic year". It is a timeline, not a list, because the point is the PROGRESSION: a child who joins Grade 7 in 2027-28 reaches Grade 12 in 2032-33 — the school opens each new grade exactly as that cohort needs it. The opening year is flagged .is-now. Move that flag, and update the years, at the top of every academic year — it is the one thing here that dates. ========================================================================== */ .jp-road{ --road-gap:clamp(.6rem,1.4vw,1rem); --road-dot:46px; position:relative;margin-top:clamp(2.4rem,4.6vw,3.4rem); display:grid;grid-template-columns:repeat(6,minmax(0,1fr)); gap:var(--road-gap); } .jp-road__step{position:relative;z-index:1;display:grid;gap:.5rem;justify-items:start;text-align:left} /* The rail is drawn per step, from this dot's edge to the next one's, rather than as one line across the container: the dots are start-aligned inside fractional columns, so a single container rule can only ever approximate where they are — and it visibly overshot the final marker. */ .jp-road__step:not(:last-child)::after{ content:"";position:absolute;z-index:0;pointer-events:none; inset-block-start:calc(var(--road-dot) / 2 - 1.5px);height:3px;border-radius:3px; inset-inline-start:var(--road-dot); inset-inline-end:calc(-1 * var(--road-gap)); background:linear-gradient(90deg,var(--jp-gold),var(--jp-cbse)); opacity:.3; } .jp-road__step:nth-child(n+4):not(:last-child)::after{background:linear-gradient(90deg,var(--jp-cbse),var(--jp-icse))} .jp-road__dot{ width:46px;height:46px;flex:none;border-radius:50%;display:grid;place-items:center; background:#fff;border:3px solid var(--jp-line); font-family:var(--jp-display);font-weight:800;font-size:.9rem;line-height:1; color:var(--jp-ink-soft);font-variant-numeric:tabular-nums; transition:transform .4s var(--jp-ease),border-color .4s ease,color .4s ease; } .jp-road__step:hover .jp-road__dot{transform:translateY(-4px) scale(1.06)} .jp-road__yr{ font-family:var(--jp-sans);font-size:.76rem;font-weight:900;letter-spacing:.1em; text-transform:uppercase;color:var(--jp-ink-soft); } .jp-road__step h4{ font-family:var(--jp-display);font-weight:800;font-size:clamp(1rem,.95rem + .35vw,1.2rem); line-height:1.2;letter-spacing:-.015em;color:var(--jp-navy);margin:0; } .jp-road__step p{ font-family:var(--jp-sans);font-size:.86rem;line-height:1.55;color:var(--jp-ink-soft);margin:0; } /* the opening year — the only step that is not a promise */ .jp-road__step.is-now .jp-road__dot{ background:var(--jp-navy);border-color:var(--jp-gold);color:#fff; box-shadow:0 0 0 6px rgba(240,165,0,.16); } .jp-road__step.is-now .jp-road__yr{color:var(--jp-gold)} .jp-road__step.is-now h4{color:var(--jp-navy)} .jp-road__tag{ display:inline-block;margin-top:.15rem;padding:.22rem .6rem;border-radius:999px; background:var(--jp-gold);color:#20180a; font-family:var(--jp-sans);font-size:.66rem;font-weight:900;letter-spacing:.09em;text-transform:uppercase; } /* the last step closes the promise, so it gets the second accent */ .jp-road__step:last-child .jp-road__dot{border-color:var(--jp-icse);color:var(--jp-icse)} .jp-deep .jp-road__dot{background:rgba(10,19,44,.9);border-color:rgba(255,255,255,.22);color:rgba(255,255,255,.72)} .jp-deep .jp-road__step h4{color:#fff} .jp-deep .jp-road__step p,.jp-deep .jp-road__yr{color:rgba(255,255,255,.7)} .jp-deep .jp-road__step.is-now .jp-road__dot{background:#fff;color:var(--jp-navy);border-color:var(--jp-gold)} /* Tablet: two rows of three, so the rail would lie about the sequence. */ @media (max-width:1080px){ .jp-road{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.2rem,3vw,1.8rem)} /* two rows of three: a horizontal rail would imply the wrong reading order */ .jp-road__step::after{display:none} } /* Phone: a true vertical timeline, with the rail running through the dots. */ @media (max-width:640px){ .jp-road{grid-template-columns:1fr;gap:0} .jp-road__step{ grid-template-columns:46px minmax(0,1fr);grid-auto-rows:min-content; column-gap:1rem;row-gap:.2rem;padding-bottom:1.5rem; } .jp-road__dot{grid-column:1;grid-row:1/span 4} .jp-road__step > :not(.jp-road__dot){grid-column:2} /* the connector, drawn per step so it stops at the last one */ .jp-road__step:not(:last-child)::before{ content:"";position:absolute;inset-block-start:var(--road-dot);inset-block-end:6px; inset-inline-start:calc(var(--road-dot) / 2 - 1.5px);width:3px;border-radius:3px; background:linear-gradient(180deg,var(--jp-gold),rgba(31,78,134,.35));opacity:.4; } .jp-road__step::after{display:none} } /* the one-line version, for a banner rather than a section */ .jp-roadline{ display:flex;flex-wrap:wrap;align-items:center;gap:.55rem; margin-top:clamp(1.4rem,2.6vw,2rem); } .jp-roadline span{ padding:.5rem 1rem;border-radius:999px; background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18); font-family:var(--jp-sans);font-size:.84rem;font-weight:700;color:rgba(255,255,255,.86); white-space:nowrap; } .jp-roadline span.now{background:var(--jp-gold);border-color:transparent;color:#20180a;font-weight:800} .jp-roadline i{opacity:.4;font-style:normal;color:#fff} .jp-sec:not(.jp-deep) .jp-roadline span{background:rgba(0,28,84,.05);border-color:var(--jp-line);color:var(--jp-ink)} .jp-sec:not(.jp-deep) .jp-roadline i{color:var(--jp-ink-soft)} @media (prefers-reduced-motion:reduce){ .jp-road__step:hover .jp-road__dot{transform:none} } /* ========================================================================== HOME · OUR STORY — JGI Chairman + institutional history Added for the home page "legacy of the institution and group" block. Scoped entirely under #our-story so nothing here can leak into the other sections. ========================================================================== */ .jgi-story{padding:clamp(3.5rem,7vw,6rem) 0;background:var(--jp-paper,#f4f7fc)} .jgi-story .wrap{max-width:1200px;margin-inline:auto;padding-inline:clamp(1rem,4vw,2rem)} .jgi-story__head{max-width:64ch;margin-bottom:clamp(2rem,4vw,3rem)} .jgi-story__head h2{font-family:var(--jp-display);font-weight:800;line-height:1.08; font-size:clamp(1.9rem,1.2rem + 2.2vw,3rem);color:var(--jp-navy,#001c54);margin:.5rem 0 1rem} .jgi-story__head p{color:var(--jp-ink-soft,#4d5878);font-size:clamp(1rem,.96rem + .3vw,1.15rem);line-height:1.7;margin:0} /* --- Chairman --------------------------------------------------------- */ .jgi-chair{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr); gap:clamp(1.5rem,4vw,3.2rem);align-items:center} .jgi-chair__shot{margin:0;position:relative;border-radius:22px;overflow:hidden; box-shadow:var(--jp-shadow,0 26px 60px -34px rgba(6,16,46,.55));background:#fff} .jgi-chair__shot img{display:block;width:100%;height:100%;max-height:520px;object-fit:cover;object-position:50% 20%} .jgi-chair__shot figcaption{position:absolute;inset:auto 0 0 0;padding:1.6rem 1.2rem .95rem; display:flex;flex-direction:column;gap:.15rem;color:#fff; background:linear-gradient(to top,rgba(0,20,60,.92),rgba(0,20,60,0))} .jgi-chair__shot figcaption b{font-family:var(--jp-display);font-size:1.05rem;font-weight:700} .jgi-chair__shot figcaption span{font-size:.85rem;opacity:.82} .jgi-chair__logo{height:52px;width:auto;margin-bottom:1rem;object-fit:contain} .jgi-chair__body p{color:var(--jp-ink-soft,#4d5878);line-height:1.8;margin:0 0 1rem; font-size:clamp(1rem,.96rem + .25vw,1.1rem)} .jgi-chair__pull{margin:1.4rem 0;padding:.2rem 0 .2rem 1.1rem; border-left:4px solid var(--jp-gold,#f0a500);font-family:var(--jp-display); font-size:clamp(1.1rem,1rem + .6vw,1.4rem);font-weight:700;font-style:italic; color:var(--jp-navy,#001c54);line-height:1.4} .jgi-chair__cta{margin:1.4rem 0 0!important} /* --- Three pillars ---------------------------------------------------- */ .jgi-pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:clamp(1rem,2vw,1.6rem);margin:clamp(2.4rem,5vw,3.6rem) 0 0} .jgi-pillar{background:#fff;border:1px solid var(--jp-line,rgba(0,28,84,.12));border-radius:18px; padding:1.6rem 1.5rem;transition:transform .35s var(--jp-ease,cubic-bezier(.22,1,.36,1)),box-shadow .35s} .jgi-pillar:hover{transform:translateY(-4px);box-shadow:var(--jp-shadow,0 26px 60px -34px rgba(6,16,46,.55))} .jgi-pillar__ic{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:13px; background:var(--jp-cbse-soft,#e9f0f9);color:var(--jp-navy,#001c54);font-size:1.15rem;margin-bottom:.9rem} .jgi-pillar h3{font-family:var(--jp-display);font-size:1.12rem;font-weight:700; color:var(--jp-navy,#001c54);margin:0 0 .45rem} .jgi-pillar p{margin:0;color:var(--jp-ink-soft,#4d5878);font-size:.96rem;line-height:1.65} .jgi-story__line{margin:clamp(2rem,4vw,3rem) auto 0;max-width:70ch;text-align:center; font-family:var(--jp-display);font-weight:600;font-style:italic;line-height:1.55; font-size:clamp(1.1rem,1rem + .7vw,1.5rem);color:var(--jp-navy,#001c54)} /* --- History timeline ------------------------------------------------- */ .jgi-hist{margin-top:clamp(2.6rem,5vw,4rem);background:#fff;border:1px solid var(--jp-line,rgba(0,28,84,.12)); border-radius:22px;padding:clamp(1.6rem,3.5vw,2.8rem)} .jgi-hist__h{font-family:var(--jp-display);font-weight:800;color:var(--jp-navy,#001c54); font-size:clamp(1.25rem,1.1rem + .8vw,1.7rem);margin:0 0 1.6rem} .jgi-hist__list{list-style:none;margin:0;padding:0;display:grid;gap:0} .jgi-hist__list li{display:grid;grid-template-columns:104px minmax(0,1fr);gap:clamp(.9rem,2vw,1.8rem); padding:1.15rem 0;border-top:1px solid var(--jp-line-2,rgba(0,28,84,.07));position:relative} .jgi-hist__list li:first-child{border-top:0} .jgi-hist__y{font-family:var(--jp-display);font-weight:800;font-size:1.02rem; color:var(--jp-gold,#f0a500);letter-spacing:.01em;padding-top:.1rem} .jgi-hist__list b{display:block;font-family:var(--jp-display);font-size:1.05rem; color:var(--jp-navy,#001c54);margin-bottom:.3rem} .jgi-hist__list p{margin:0;color:var(--jp-ink-soft,#4d5878);font-size:.97rem;line-height:1.68} .jgi-hist__list li.is-now{background:linear-gradient(90deg,rgba(240,165,0,.09),transparent 70%); border-radius:14px;padding-inline:clamp(.7rem,1.6vw,1.1rem)} .jgi-hist__list li.is-now .jgi-hist__y{color:var(--jp-navy,#001c54)} .jgi-hist__cta{margin:1.7rem 0 0} @media (max-width:900px){ .jgi-chair{grid-template-columns:1fr} .jgi-chair__shot img{max-height:400px} } @media (max-width:560px){ .jgi-hist__list li{grid-template-columns:1fr;gap:.35rem} } /* Welcome modal: the lead line above the modal's body copy. */ .ewm .ewm-lead{font-weight:700;color:var(--jp-navy,#001c54);margin-bottom:.5rem} /* ========================================================================== HOME — COMPONENTS FOR THE REWRITTEN COPY DECK Brand lines, the shared-benefits list, the question shift, the early-years rhythm block, the six qualities grid and the outcomes answer. All scoped to their own classes; nothing here restyles an existing block. ========================================================================== */ /* --- The recurring brand line that closes a section ---------------------- */ .jhs-brandline{ margin:clamp(1.8rem,4vw,2.8rem) auto 0;max-width:60ch;text-align:center; font-family:var(--jp-display);font-weight:700;font-style:italic; color:var(--jp-navy,#001c54);line-height:1.45;letter-spacing:-.01em; } .jhs-brandline--dark{color:#fff} .jhs-brandline--left{margin-inline:0;text-align:left;max-width:46ch} /* Hero: the sub-headline that sits under the H1 */ .hero-tagline{ margin:.9rem 0 0;font-family:var(--jp-display);font-weight:700; color:var(--jp-gold,#f0a500);letter-spacing:-.01em;line-height:1.35; } .hero-lead--close{margin-top:.85rem!important} /* --- "Both pathways benefit from" -------------------------------------- */ .jhs-shared{ margin:clamp(2rem,4vw,3rem) auto 0;max-width:920px;background:#fff; border:1px solid var(--jp-line,rgba(0,28,84,.12));border-radius:20px; padding:clamp(1.5rem,3vw,2.2rem); } .jhs-shared__h{ font-family:var(--jp-display);font-weight:800;color:var(--jp-navy,#001c54); margin:0 0 1.1rem;text-align:center; } .jhs-shared__list{ list-style:none;margin:0;padding:0;display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:.75rem 1.6rem; } .jhs-shared__list li{ display:flex;gap:.7rem;align-items:flex-start; color:var(--jp-ink-soft,#4d5878);line-height:1.6; } .jhs-shared__list i{ flex:none;margin-top:.3em;width:20px;height:20px;border-radius:50%; display:grid;place-items:center;font-size:.62rem; background:var(--jp-icse-soft,#e6f5ec);color:var(--jp-icse,#00874a); } /* --- "What is the answer?" -> the better questions ---------------------- */ .jhs-qshift{ margin:clamp(2rem,4vw,3rem) auto 0;max-width:1000px; display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1.25fr); gap:clamp(1rem,3vw,2.2rem);align-items:center; } .jhs-qshift__k{ display:block;font-family:var(--jp-sans);font-size:.82rem;font-weight:700; text-transform:uppercase;letter-spacing:.09em;color:var(--jp-ink-soft,#4d5878); margin-bottom:.7rem; } .jhs-qshift__from p{ margin:0;font-family:var(--jp-display);font-weight:800;line-height:1.25; color:var(--jp-ink-soft,#4d5878);opacity:.55;text-decoration:line-through; text-decoration-thickness:2px; } .jhs-qshift__arrow{ display:grid;place-items:center;width:46px;height:46px;border-radius:50%; background:var(--jp-gold,#f0a500);color:#fff;font-size:1.05rem; } .jhs-qshift__to ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem} .jhs-qshift__to li{ font-family:var(--jp-display);font-weight:700;line-height:1.3; color:var(--jp-navy,#001c54);padding-left:1rem;position:relative; } .jhs-qshift__to li::before{ content:"";position:absolute;left:0;top:.55em;width:6px;height:6px; border-radius:50%;background:var(--jp-gold,#f0a500); } /* --- Childhood has its own rhythm -------------------------------------- */ .jhs-rhythm{ display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:clamp(1.5rem,4vw,3.4rem);align-items:center; } .jhs-rhythm__media{margin:0;border-radius:24px;overflow:hidden; box-shadow:var(--jp-shadow,0 26px 60px -34px rgba(6,16,46,.55))} .jhs-rhythm__media img{display:block;width:100%;height:100%;max-height:520px;object-fit:cover} .jhs-rhythm__pull{ margin:1.4rem 0 0;padding-left:1.1rem;border-left:4px solid var(--jp-gold,#f0a500); font-family:var(--jp-display);font-weight:700;line-height:1.45; color:var(--jp-navy,#001c54); } /* --- The six qualities -------------------------------------------------- */ .jhs-carry{ margin-top:clamp(2rem,4vw,3rem);display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(1rem,2vw,1.5rem); } .jhs-carry__c{ background:var(--jp-paper,#f4f7fc);border:1px solid var(--jp-line,rgba(0,28,84,.12)); border-radius:18px;padding:1.6rem 1.5rem; transition:transform .35s var(--jp-ease,cubic-bezier(.22,1,.36,1)),box-shadow .35s,border-color .35s; } .jhs-carry__c:hover{transform:translateY(-4px);border-color:rgba(240,165,0,.45); box-shadow:var(--jp-shadow,0 26px 60px -34px rgba(6,16,46,.55))} .jhs-carry__ic{ display:inline-grid;place-items:center;width:48px;height:48px;border-radius:14px; background:#fff;color:var(--jp-gold,#f0a500);font-size:1.15rem;margin-bottom:.9rem; border:1px solid var(--jp-line,rgba(0,28,84,.12)); } .jhs-carry__c h3{font-family:var(--jp-display);font-weight:800;color:var(--jp-navy,#001c54);margin:0 0 .4rem} .jhs-carry__c p{margin:0;color:var(--jp-ink-soft,#4d5878);line-height:1.65} /* --- The outcomes answer ------------------------------------------------ */ .jhs-answer{ margin:clamp(1.6rem,3vw,2.4rem) auto 0;max-width:820px;background:#fff; border:1px solid var(--jp-line,rgba(0,28,84,.12));border-radius:22px; padding:clamp(1.6rem,3.5vw,2.6rem); } .jhs-answer p{color:var(--jp-ink-soft,#4d5878);line-height:1.8;margin:0 0 1.1rem} .jhs-answer__pull{ margin:1.5rem 0 0!important;padding-top:1.3rem; border-top:1px solid var(--jp-line-2,rgba(0,28,84,.07)); font-family:var(--jp-display);font-weight:700;line-height:1.5; color:var(--jp-navy,#001c54)!important; } /* --- Philosophy step: the stage label under each step name -------------- */ .step-stage{ display:block;font-family:var(--jp-sans);font-size:.76rem;font-weight:700; text-transform:uppercase;letter-spacing:.1em;color:var(--jp-gold,#f0a500); margin:.25rem 0 .6rem; } /* --- Campus: five spaces instead of four -------------------------------- */ .campus-facts--5{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))!important} @media (max-width:900px){ .jhs-rhythm{grid-template-columns:1fr} .jhs-rhythm__media{order:-1} .jhs-qshift{grid-template-columns:1fr;gap:1.2rem;text-align:left} .jhs-qshift__arrow{transform:rotate(90deg)} } /* Stage-page hero tagline: the stage heroes are dark, so the gold used on the home hero would sit too close to the background. White at 90% instead. */ .hero-tagline--stage{color:rgba(255,255,255,.92);margin:.2rem 0 1rem} /* The two sides of the question shift need equal visual weight, otherwise the struck-through question reads as a caption rather than half the comparison. */ .jhs-qshift__from p{font-size:1.3rem} .jhs-qshift__to li{font-size:1.08rem} @media (max-width:900px){ .jhs-qshift__from p{font-size:1.15rem} .jhs-qshift__to li{font-size:1rem} } /* Six qualities read as two balanced rows of three. auto-fit gave 4+2 on a wide screen, which left a hole at the end of the second row. */ .jhs-carry{grid-template-columns:repeat(3,minmax(0,1fr))} @media (max-width:900px){ .jhs-carry{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:560px){ .jhs-carry{grid-template-columns:1fr} } /* ========================================================================== BOARD PAGES — CORE LEARNING AREAS The subject list on cbse.html / icse.html. A plain