/* ========================================================== Chess curriculum page only ---------------------------------------------------------- Loaded by resources/views/chess-curriculum.blade.php via @push('styles'), so it lands after site.css. ========================================================== */ /* ---------------------------------------------------------- BACKDROPS THAT CHANGE WITH THE BREAKPOINT ---------------------------------------------------------- The old page carried the hero and the whole six-item accordion twice — once per breakpoint — with the same words in both and only the photograph different. Each is written once here; the Blade file passes both images in as custom properties and this swaps between them. ---------------------------------------------------------- */ .swap-bg { background-image: var(--bg-desktop); background-repeat: no-repeat; background-size: cover; background-position: center; } @media only screen and (max-width: 575px) { .swap-bg { background-image: var(--bg-mobile); } } /* ---------------------------------------------------------- WHY CHESS: the six cards ---------------------------------------------------------- The icons are different shapes; one box each keeps the row even. The old page set width and height to 100px on every one, which stretched the wider ones out of proportion. ---------------------------------------------------------- */ .card-icon img { display: block; width: 100px; height: 100px; object-fit: contain; margin: 0 auto; } /* ---------------------------------------------------------- ACCORDION ---------------------------------------------------------- */ .work-area .work-content ul li h3 { font-size: 18px; } /* Dark panel behind the open answer, so it stays readable over the photograph */ .faq-area .accordion p { display: none; padding: 20px 25px; background-color: black !important; opacity: 0.7 !important; margin-bottom: 0; } /* ---------------------------------------------------------- VIDEO ---------------------------------------------------------- A 16:9 box that keeps its shape at any width, so the embed needs no fixed height. ---------------------------------------------------------- */ .video-frame { position: relative; padding-bottom: 46.25%; height: 0; overflow: hidden; } .video-frame iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; } /* ========================================================== THEMED PAGE ONLY ---------------------------------------------------------- Applies only while the page carries the premium theme (body.home-premium, set by the @section in the Blade file). Drop that one line and the page returns to how it was. ========================================================== */ /* ---------------------------------------------------------- THE ORANGE RULE OUTSIDE A SECTION TITLE ---------------------------------------------------------- The theme turns an inline orange divider into a short gradient bar, but only when it is a direct child of .section-title. The middle one of the three on this page sits outside one, so it stayed a 2px line across its full 736px container. Same declarations as the theme's own, so all three match; the theme's rule is the more specific, so the two inside a section title are untouched. ---------------------------------------------------------- */ body.home-premium main div[style*="border-bottom: 2px solid #ff6015"] { border-bottom: 0 !important; width: 72px; height: 5px; margin: 20px auto 22px !important; border-radius: 999px; background: linear-gradient(90deg, var(--accent), #ffab74); } /* ---------------------------------------------------------- SPACE BETWEEN THE ROWS OF CARDS ---------------------------------------------------------- .equal-cards matches the cards' heights but adds no vertical spacing, so the second row sat directly on the first. The margin matches the 24px Bootstrap already puts between the columns, so the gaps match in both directions. ---------------------------------------------------------- */ body.home-premium .equal-cards > [class*="col-"] { margin-bottom: 24px; } /* ---------------------------------------------------------- THE HERO — THE PHOTOGRAPH BACK TO ITS OWN BRIGHTNESS ---------------------------------------------------------- The theme lays a dark scrim over every .banner-slider-item, which is right on the home page where the headline sits on a bright photograph. This photograph is already dark, and before the theme it carried no scrim at all — which is why it now looks dull by comparison. The scrim and the bottom fade are both turned off here. The selector carries one more class than the theme's so it wins; the theme's is on .banner-slider-item with two :not() parts, which counts for more than it looks. ---------------------------------------------------------- */ body.home-premium .banner-area-two.three .banner-slider-item.swap-bg::before, body.home-premium .banner-area-two.three .banner-slider-item.swap-bg::after { content: none; } /* With the scrim gone the lead has to be white again. The theme's body rule, main p:not([class*="btn"]), is one element more specific than its own .banner-content p rule, so it had repainted this paragraph in soft grey — grey on a dark photograph, which is why it stopped being readable. */ body.home-premium .banner-area-two .banner-content p { color: rgba(255, 255, 255, 0.92); } /* ---------------------------------------------------------- THE HERO BUTTON — ITS SWEEP ANIMATES AGAIN ---------------------------------------------------------- This button carries data-aos, and the theme's reveal rule sets transition-property: opacity, transform !important on every revealing element. That drops background-position from the transition, so the pale sweep jumped across instead of travelling, and pinned the transform, so the button never lifted. The button at the foot of the page has no data-aos and was unaffected — which is why only this one felt wrong. The properties are named again, with the sweep's own timing, and the lift has to insist for the same reason. ---------------------------------------------------------- */ body.home-premium .banner-btn-area .common-btn[data-aos] { transition-property: background-position, transform, box-shadow, opacity !important; transition-duration: 1.125s, 0.525s, 0.525s, 1650ms !important; transition-timing-function: var(--ease) !important; } body.home-premium .banner-btn-area .common-btn[data-aos]:hover { transform: translateY(-3px) !important; } /* ---------------------------------------------------------- THE SECTION HEADINGS, BACK TO THE CONTAINER MEASURE ---------------------------------------------------------- The theme caps every .section-title at 760px. Four pieces of copy here are written to the full 1296px container and were broken up by that cap: The Significance of Chess Curriculum ... 3 lines, needs 1120px The purpose behind our chess curriculum 2 lines, needs 789px Master the Curriculum That's Shaping ... 2 lines, needs 1031px Dive into Zindagi Trust's expertly ... 2 lines, needs 1021px All four fit 1296px, so lifting the cap puts each back on one line, which is how the page read before the theme. ---------------------------------------------------------- */ body.home-premium .section-title { max-width: none; } /* "The Significance of Chess Curriculum in Holistic Education" still needs more than the 1296px of container it has. Measured by its real line boxes it wants about 1320px at 48px, so a 46px ceiling brings it to roughly 1265px and it holds one line. The other three headings need 900px and less, so the lower ceiling costs them nothing. */ body.home-premium .section-title h2 { font-size: clamp(30px, 3.8vw, 46px); } /* ---------------------------------------------------------- THE ICONS, CENTRED ---------------------------------------------------------- The theme lays .benefit-item out as a flex column with align-items: flex-start, then re-centres the children it knows about — the icon element, the heading, the paragraph, the button. These icons sit in a plain div, which is not on that list, so all of them went hard against the left edge: 1px of space on the left against 467px on the right. ---------------------------------------------------------- */ body.home-premium .benefit-item > div { align-self: stretch; width: 100%; } /* ---------------------------------------------------------- THE HEADINGS AND LEADS AT THE NARROWER CONTAINERS ---------------------------------------------------------- Lifting the 760px cap put every heading on one line at 1366px and above, where the container is 1296px. Below that the container steps down but the type does not follow it closely enough, so the copy broke again: 1280 / 1200 container 1146 "Master the Curriculum That's Shaping Young Thinkers" needs ~1164px at the 46px ceiling 1100 / 992 container 1076 the lead under it needs /968 ~1103px at a flat 16.5px The heading takes a 44px ceiling through the 1146px band. 45px was tried first and still spilled: its two line boxes measured 957 and 182, about 1147px once the space between them is counted, against 1146px of container — one pixel over. 44px brings it to roughly 1121px. The lead is given a size that tracks the viewport instead of staying flat, so it shrinks with its container rather than wrapping. ---------------------------------------------------------- */ @media (min-width: 1200px) and (max-width: 1365.98px) { body.home-premium .section-title h2 { font-size: 44px; } } body.home-premium .section-title p { font-size: clamp(14px, 1.45vw, 16.5px); } /* ---------------------------------------------------------- THE ACCORDION — DARK PANELS UNDER WHITE TEXT ---------------------------------------------------------- This accordion lies over a photograph and its panels carry Bootstrap's .text-white. The theme already solves that on the home page, but its rules are scoped to .intro-section .faq-area, which this page has no wrapper for — so these panels got the light card instead. White title text on a white bar and white body text on a white card: the headings and the copy both disappeared. Dark glass gives the white text something to sit on while the photograph still reads through, matching the home page and the advocacy page. ---------------------------------------------------------- */ body.home-premium .faq-area .accordion > li { border-color: rgba(255, 255, 255, 0.22); background: rgba(20, 17, 43, 0.62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 10px 30px -14px rgba(0, 0, 0, 0.6); } body.home-premium .faq-area .accordion > li:hover { border-color: rgba(255, 255, 255, 0.38); } /* style.css gives every closed link background-color:#fff. Left alone that is a white bar under white title text, which hides the headings. */ body.home-premium .faq-area .accordion > li > a { color: #fff; background-color: transparent; } body.home-premium .faq-area .accordion > li > p, body.home-premium .faq-area .accordion > li > p b { color: rgba(255, 255, 255, 0.92); } body.home-premium .faq-area .accordion > li > a i { background: rgba(255, 255, 255, 0.18); color: #fff; } /* The category icons are black line drawings, drawn for a white panel. On advocacy the glass sits over a bright turquoise wall and they read well against it; the photograph behind this accordion is dark, so the glass goes nearly black and the black line work all but disappears. Inverting them is what the theme already does for the home page's dark accordion. The art is transparent PNG line work, so inverting gives clean white strokes rather than a washed-out box. */ body.home-premium .faq-area .accordion > li > a img { filter: invert(1) brightness(1.9); }