/* ========================================================================== Home page — section flow. The home page reads as one composed surface rather than stacked blocks. Light ↔ light white, #F8FCFF, #F5FAFF and #EAF4FB rotate gently and each band starts in the colour the one above ended in, so these seams are invisible. Light ↔ navy a crisp, shallow ARC instead of a hard line or a blur: the navy surface rises into the light band above it as an arch, and ends in a matching arc hanging into the band below. Each arc carries a fine blue rim and a soft depth shadow, so the navy reads as a raised panel the page flows around. The arcs sit inside the bands' normal padding (plus a little room for the arc itself), so there is no gap of empty colour between sections. Sections are addressed by data-flow, not by position, so a band an administrator hides simply drops out without shifting the colours of the others onto the wrong section. Loaded on / only, after theme-defence.css. ========================================================================== */ .page-home { --navy: #062b49; --navy-2: #0a3b63; --ice: #eaf4fb; --soft: #f5fafe; --mist: #f8fcff; --white: #ffffff; --accent: #1687c9; --gold: #d6a84f; --arc: 34px; /* depth of a navy arc at its centre */ --arc-room: 96px; /* padding on the side of a band that carries an arc */ --arc-rim: rgb(22 135 201 / 0.55); } @media (min-width: 640px) { .page-home { --arc: 56px; --arc-room: 124px; } } @media (min-width: 1280px) { .page-home { --arc: 68px; --arc-room: 136px; } } /* Light bands meet edge to edge; the 1px rules that separated the old blocks would undo the whole effect. */ .page-home [data-flow] { border-top: 0; } /* -------------------------------------------------------------------------- Hero → updates. The light wave the hero rests on takes the ice tint the next band starts in, so the wave reads as the edge of what follows. -------------------------------------------------------------------------- */ .page-home .ndi-hero .hero-curve { background: linear-gradient(180deg, #f1f8fd 0%, var(--ice) 70%); box-shadow: 0 -12px 44px rgb(22 135 201 / 0.28), 0 -2px 10px rgb(190 225 248 / 0.45); } /* -------------------------------------------------------------------------- Light bands. -------------------------------------------------------------------------- */ .page-home [data-flow="updates"] { background: linear-gradient(180deg, var(--ice) 0%, var(--soft) 100%); } .page-home [data-flow="trust"] { background: linear-gradient(180deg, var(--soft) 0%, var(--white) 100%); } .page-home [data-flow="cadets"] { background: radial-gradient(48rem 18rem at 12% 0%, rgb(22 135 201 / 0.05), transparent 70%), linear-gradient(180deg, var(--white) 0%, var(--soft) 100%); } .page-home [data-flow="explore"] { background: linear-gradient(180deg, var(--soft) 0%, var(--white) 100%); } .page-home [data-flow="programs"] { background: radial-gradient(56rem 26rem at 90% 18%, rgb(22 135 201 / 0.06), transparent 70%), linear-gradient(180deg, var(--white) 0%, var(--mist) 45%, var(--ice) 100%); } .page-home [data-flow="why"] { background: linear-gradient(180deg, var(--ice) 0%, var(--soft) 55%, var(--white) 100%); } .page-home [data-flow="parents"] { background: radial-gradient(52rem 22rem at 85% 0%, rgb(22 135 201 / 0.07), transparent 70%), linear-gradient(180deg, var(--ice) 0%, var(--soft) 100%); } .page-home [data-flow="officers"] { background: linear-gradient(180deg, var(--soft) 0%, var(--white) 100%); } .page-home [data-flow="journey"] { background: radial-gradient(50rem 22rem at 10% 30%, rgb(22 135 201 / 0.05), transparent 70%), linear-gradient(180deg, var(--white) 0%, var(--mist) 100%); } /* The director's quote sits between Campus and Methodology. Its original cream mesh and white edge fades would paint over the arcs, so they are switched off here (home page only). */ .page-home [data-flow="director"] > [aria-hidden="true"]:is(.mesh-cream, .h-32) { display: none; } .page-home [data-flow="director"] { background: linear-gradient(180deg, var(--ice) 0%, var(--soft) 50%, var(--mist) 100%); } .page-home [data-flow="gallery"] { background: linear-gradient(180deg, var(--ice) 0%, var(--white) 30%, var(--white) 100%); } .page-home [data-flow="guide"] { background: linear-gradient(180deg, var(--white) 0%, var(--soft) 100%); } .page-home [data-flow="faq"] { background: radial-gradient(50rem 22rem at 88% 10%, rgb(22 135 201 / 0.06), transparent 70%), linear-gradient(180deg, var(--soft) 0%, var(--ice) 100%); } .page-home [data-flow="admissions"] { background: linear-gradient(180deg, var(--ice) 0%, var(--soft) 100%); } .page-home [data-flow="final"] { background: radial-gradient(46rem 20rem at 50% 0%, rgb(22 135 201 / 0.06), transparent 70%), linear-gradient(180deg, var(--soft) 0%, var(--ice) 100%); } .page-home [data-flow="enquiry"] { background: linear-gradient(180deg, var(--ice) 0%, var(--soft) 60%, var(--mist) 100%); } /* -------------------------------------------------------------------------- Navy storytelling bands: Results, Campus, Methodology. Deep navy with a slow blue glow, a faint grid (theme-defence.css) and soft side vignettes. The top and bottom rows are a single flat navy, so the arcs above and below meet them without a visible join. -------------------------------------------------------------------------- */ .page-home [data-flow="results"], .page-home [data-flow="campus"], .page-home [data-flow="method"] { isolation: isolate; background: linear-gradient(180deg, var(--navy) 0, rgb(6 43 73 / 0) 160px), linear-gradient(0deg, var(--navy-2) 0, rgb(10 59 99 / 0) 160px), linear-gradient(90deg, rgb(2 18 34 / 0.3), transparent 16%, transparent 84%, rgb(2 18 34 / 0.3)), radial-gradient(circle at 80% 20%, rgb(22 135 201 / 0.18), transparent 35%), radial-gradient(circle at 12% 85%, rgb(22 135 201 / 0.1), transparent 30%), linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%); } /* The drifting glow: one blurred light, moved by transform only (no repaint), behind the content and above the band's own background. */ .page-home [data-flow="results"]::after, .page-home [data-flow="campus"]::after, .page-home [data-flow="method"]::after { content: ""; position: absolute; z-index: -1; top: 8%; left: 50%; width: min(70rem, 120vw); height: 70%; margin-left: calc(min(70rem, 120vw) / -2); pointer-events: none; background: radial-gradient(closest-side, rgb(22 135 201 / 0.16), transparent 100%); filter: blur(20px); animation: flow-drift 22s ease-in-out infinite alternate; will-change: transform; } .page-home [data-flow="campus"]::after { animation-duration: 25s; animation-delay: -8s; } .page-home [data-flow="method"]::after { animation-duration: 18s; animation-delay: -4s; } @keyframes flow-drift { 0% { transform: translate3d(-6%, -2%, 0) scale(1); } 100% { transform: translate3d(6%, 3%, 0) scale(1.06); } } /* -------------------------------------------------------------------------- The arcs. Rising arch — the last light band before a navy one carries, at its foot, the top of the navy surface as a shallow dome. Hanging arc — the first light band after a navy one carries, at its head, the bottom of the navy surface as a shallow curve. Both are wider than the screen (left/right −12%) so the curve is gentle and meets the edges almost flat, and both stay inside their band's padding. -------------------------------------------------------------------------- */ .page-home :is([data-flow="why"], [data-flow="journey"], [data-flow="director"], [data-flow="enquiry"]) { padding-bottom: var(--arc-room); } .page-home :is([data-flow="why"], [data-flow="journey"], [data-flow="director"], [data-flow="enquiry"])::after { content: ""; position: absolute; z-index: 1; left: -12%; right: -12%; bottom: -1px; height: var(--arc); pointer-events: none; background: var(--navy); border-radius: 50% 50% 0 0 / 100% 100% 0 0; box-shadow: 0 -1.5px 0 var(--arc-rim), 0 -22px 44px -26px rgb(6 43 73 / 0.55); } /* The footer starts in the lighter academy blue. */ .page-home [data-flow="enquiry"]::after { background: var(--navy-2); } .page-home :is([data-flow="parents"], [data-flow="director"], [data-flow="gallery"]) { padding-top: var(--arc-room); } .page-home :is([data-flow="parents"], [data-flow="director"], [data-flow="gallery"])::before { content: ""; position: absolute; z-index: 0; left: -12%; right: -12%; top: -1px; height: var(--arc); pointer-events: none; background: var(--navy-2); border-radius: 0 0 50% 50% / 0 0 100% 100%; box-shadow: 0 1.5px 0 var(--arc-rim), 0 24px 46px -26px rgb(6 43 73 / 0.5); } /* The footer picks up the enquiry band's arch, then deepens. */ .page-home .site-footer { background: radial-gradient(50rem 24rem at 90% 0%, rgb(22 135 201 / 0.2), transparent 65%), linear-gradient(180deg, var(--navy-2) 0%, var(--navy) 40%, #041f36 100%); } /* -------------------------------------------------------------------------- Phones keep the flow but drop the moving and blurred layers. -------------------------------------------------------------------------- */ @media (max-width: 767px) { .page-home [data-flow="results"]::after, .page-home [data-flow="campus"]::after, .page-home [data-flow="method"]::after { animation: none; filter: none; opacity: 0.8; } } @media (prefers-reduced-motion: reduce) { .page-home [data-flow]::after { animation: none; } }