/* ========================================================== Policy Achievements pages ---------------------------------------------------------- One stylesheet for all five, pushed by each of them via @push('styles') so it lands after site.css. They share their section patterns, so five near-identical files would only be five places to make the same edit. Two components they use are not here because other pages use them too, and each has its own file: timeline.css the year-by-year
panels olcards.css the numbered arrow cards ========================================================== */ /* ---------------------------------------------------------- PHOTOGRAPHS AND SCANNED LETTERS ---------------------------------------------------------- Several of these pages put a scanned government notification beside the text. They are tall portrait scans, so without a ceiling one of them runs to 1600px and dwarfs the column it sits in. ---------------------------------------------------------- */ .policy-letter { display: block; max-width: 100%; max-height: 620px; width: auto; margin: 0 auto; } .policy-photo { display: block; width: 100%; height: auto; border-radius: 5px; } /* The small grey note under a photograph or a video */ .policy-caption { display: block; font-size: 11px; line-height: 1.5; color: #757575; margin-top: 6px; } .policy-press a { font-size: 16px; } /* ---------------------------------------------------------- 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: 56.25%; height: 0; overflow: hidden; } .video-frame iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; } /* ---------------------------------------------------------- BANNING CORPORAL PUNISHMENT: opening band ---------------------------------------------------------- The old page carried this twice, once per breakpoint, the two copies differing only in height. It is written once and the padding lets the band size itself to the words. ---------------------------------------------------------- */ .policy-band { background-size: cover; background-position: center; background-repeat: no-repeat; padding: 60px 0; } .policy-band .section-title h2, .policy-band .section-title p { color: #302c51; } /* ---------------------------------------------------------- LSBE: the eight curriculum topics ---------------------------------------------------------- Eight cards of an icon and a heading. .equal-cards levels each row; this keeps the icons a single size, since the artwork ranges from 512px down to 64px. ---------------------------------------------------------- */ .topic-icon { display: block; width: 40px; height: 40px; object-fit: contain; margin: 0 auto; } /* ---------------------------------------------------------- BANNING CORPORAL PUNISHMENT: authority cards ---------------------------------------------------------- Province name on an orange strip, contact details beneath. The old page set all of this inline on every card. ---------------------------------------------------------- */ .authority-card { height: 100%; margin-bottom: 0; } .authority-card .top { background-color: #ff6015; border-radius: 5px 5px 0 0; } .authority-card .top h5 { margin: 0; padding: 16px 20px; color: #fff; font-size: 18px; font-weight: 500; text-align: center; } /* The theme draws a coloured bar under every h5; it has no place on a solid orange strip */ .authority-card .top h5:after { background: transparent !important; } .authority-card .bottom { padding: 20px; } .authority-card .bottom p { margin-bottom: 0; word-break: break-word; } /* ---------------------------------------------------------- ACR TO PER: the two form carousels ---------------------------------------------------------- Scanned pages of the old and the new evaluation form, side by side. They are different sizes, so one box keeps the two columns level. ---------------------------------------------------------- */ .gallery-slider-acr .gallery-item img { display: block; width: 100%; height: 620px; object-fit: contain; background-color: #fff; } .gallery-slider-actbot .gallery-item img { display: block; width: 100%; height: 240px; object-fit: cover; } /* The theme hides the carousel arrows behind a zero-height .owl-nav; these put them back beside the cards. */ .gallery-slider-acr .owl-nav, .gallery-slider-actbot .owl-nav { overflow: hidden; height: 0; } .gallery-slider-acr .nav-button, .gallery-slider-actbot .nav-button { height: 70px; width: 25px; cursor: pointer; position: absolute; top: 110px; } .gallery-slider-acr .owl-prev, .gallery-slider-actbot .owl-prev { left: -35px; } .gallery-slider-acr .owl-next, .gallery-slider-actbot .owl-next { right: -35px; } .owl-theme .owl-nav [class*="owl-"] { color: #ffffff; font-size: 39px; background: #ff6015; border-radius: 3px; } /* ---------------------------------------------------------- TYPOGRAPHY ---------------------------------------------------------- The theme centres .section-title; the ACR page puts one in a column beside a photograph, where it reads better ranged left. ---------------------------------------------------------- */ .section-title.text-start { text-align: left; } .section-title.text-start .mb-2 { margin-left: 0; } /* ========================================================== THEMED PAGES ONLY ---------------------------------------------------------- policy.css is loaded by the five Policy Achievements pages and nothing else, so everything here covers exactly those five. Each rule is scoped to body.home-premium, so removing a page's @section line returns that page to how it was. ========================================================== */ /* ---------------------------------------------------------- THE SECTION HEADINGS, BACK TO THE CONTAINER MEASURE ---------------------------------------------------------- The theme caps every .section-title at 760px. These pages carry long headings written to the full container, so the cap pushed them onto extra lines — one on acr-to-per went to three. Lifting it gives them the width the copy was written for. Some are long enough to still take two lines at 1296px; that is the sentence, not the cap. ---------------------------------------------------------- */ body.home-premium .section-title { max-width: none; } /* ---------------------------------------------------------- THE ORANGE RULES 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. Several here sit outside one and stayed as 2px lines drawn across their full 636px or 746px. Same declarations as the theme's own, so every divider matches; the theme's rule is the more specific, so the ones inside a section title keep theirs. ---------------------------------------------------------- */ 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 a second row sat directly on the first. The margin matches the 24px Bootstrap already puts between the columns. ---------------------------------------------------------- */ body.home-premium .equal-cards > [class*="col-"] { margin-bottom: 24px; } /* ========================================================== THE TIMELINE ---------------------------------------------------------- Two of these pages carry the same timeline our-story does. Its theme treatment lives in our-story.css, which these pages do not load, so it is repeated here — timeline.css itself is shared with pages that are NOT themed and must keep the original. ========================================================== */ /* The rule is 3px wide at left:50% with margin-left:-1.5px, so its centre falls on 50%. The marker is 55px at the same left:50% but with margin-left:-25px, putting its centre at 50% + 2.5px — every marker sat two and a half pixels to the right of the line it is threaded on. Half of 55 is 27.5. */ body.home-premium .timeline > li > .icon { margin-left: -27.5px; color: #fff; font-size: 15px; font-weight: 700; letter-spacing: 0.01em; background-color: transparent; background-image: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%); box-shadow: 0 0 0 5px var(--surface), 0 10px 22px -10px rgba(255, 96, 21, 0.85); transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease); } /* Finer than the flat 3px of #d9d9d9, and faded at both ends so the timeline starts and stops rather than being cut off. */ body.home-premium .timeline:before { width: 2px; margin-left: -1px; background-color: transparent; background-image: linear-gradient( to bottom, rgba(48, 44, 81, 0) 0%, rgba(48, 44, 81, 0.18) 7%, rgba(48, 44, 81, 0.18) 93%, rgba(48, 44, 81, 0) 100% ); } /* .rainbow spins a two-colour conic gradient in the border on a 4s loop while the panel's own background pulses on a 3s loop. Several of those animating at once is what makes a page read as busy. They become the theme's card instead; the custom properties are left alone, so removing the theme brings the original straight back. */ body.home-premium .timeline > li .panel.rainbow { border: 1px solid var(--line); border-image: none; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); animation: none; transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease), border-color 0.6s var(--ease); } body.home-premium .timeline > li .panel.rainbow:hover { transform: translateY(-5px); border-color: transparent; box-shadow: var(--shadow-md); } body.home-premium .timeline > li .panel summary { color: var(--ink); font-size: 16px; font-weight: 600; padding: 22px 24px; } body.home-premium .timeline > li .panel summary:hover { background: var(--surface-tint); } body.home-premium .timeline > li .panel[open] summary { border-bottom: 1px solid var(--line); } body.home-premium .timeline > li .panel p { padding: 16px 24px 20px; } /* Each marker sits at the top of its entry, so the distance from one to the next is that entry's height plus its margin — which left them unevenly spaced. A grid whose own height is not fixed gives equal fr rows the height of the tallest, so every entry matches the longest summary at whatever width the page is read at, with no measurement hard-coded. */ body.home-premium .timeline { display: grid; grid-auto-rows: 1fr; row-gap: 20px; } body.home-premium .timeline > li { margin-bottom: 0; } body.home-premium .timeline > li .panel { height: 100%; } /* border-box because this summary is content-box: without it the 22px of padding above and below is added to the height instead of counted inside it, and every entry grows. */ body.home-premium .timeline > li .panel summary { display: flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 100%; } /* An opened entry is taller than its row, which is right — it should push the ones below it down rather than clip its own picture. */ body.home-premium .timeline > li .panel[open] { height: auto; } body.home-premium .timeline > li .panel[open] summary { min-height: 0; } /* ---------------------------------------------------------- EXPERT INSIGHTS — THE QUOTE CARDS ---------------------------------------------------------- Each of these six is a square 1080x1080 card carrying a quotation and the speaker's name and title. The rule further up this file gives them a fixed 240px height with object-fit: cover, so a square was being cropped into a 418x240 letterbox: the opening line of every quote was cut off the top and the speakers' job titles off the bottom. Giving the box the artwork's own 1:1 ratio shows each card whole at every width. Nothing else is set here. The theme already styles a picture card — .gallery-item carries the radius, the clipping and the shadow, and the image inside it drifts to 1.05 on hover over 1.35s. Framing the itself instead, as a first attempt did, gave it a second border inside that card and a lift that belongs to the theme's content cards rather than its pictures, which is what made it look unlike the rest of the site. Only Bootstrap's .img-thumbnail needs clearing so the theme's card is the only frame. ---------------------------------------------------------- */ body.home-premium .gallery-slider-actbot .gallery-item img { height: auto; aspect-ratio: 1 / 1; object-fit: cover; padding: 0; border: 0; border-radius: 0; background: none; } /* And the rest of the theme's picture-card treatment, the same one the report covers on Financials use: a white card with a hairline border and a small mat around the artwork, the artwork itself softly rounded inside it, and on hover a 6px lift with the shadow deepening from --shadow-sm to --shadow-md. Without these the card had the theme's radius but none of its depth, which is what still set it apart from the other picture cards on the site. */ body.home-premium .gallery-slider-actbot .gallery-item { padding: 14px; border: 1px solid var(--line); background: var(--surface); transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease), border-color 0.6s var(--ease); } body.home-premium .gallery-slider-actbot .gallery-item img { border-radius: 10px; } body.home-premium .gallery-slider-actbot .gallery-item:hover { transform: translateY(-6px); border-color: transparent; box-shadow: var(--shadow-md); } /* Owl clips its track with overflow: hidden and these sit flush against its top edge, so the lift would carry the card's top out of the clip. */ body.home-premium .gallery-slider-actbot .owl-stage-outer { padding-top: 10px; margin-top: -10px; } /* ---------------------------------------------------------- THE POLICY LETTER, AS A PICTURE CARD ---------------------------------------------------------- School Consolidation and Supplementary Syllabus each stand a scanned notification beside their text, and it was the one picture on either page with nothing around it -- a bare scan against the white, while every other image on the themed site sits in a card. This is the theme's picture card, the same one the report covers on Financials and the expert cards above use: a white card with a hairline border and a small mat around the artwork, lifting 6px on hover as the shadow deepens from --shadow-sm to --shadow-md. The mat matters more here than it does there. A document scan is white to its own edges, so without it the hairline would read as a line ruled on the page rather than a frame around a picture. The reveal sits on the column, not on the image, so the lift is free to apply. ---------------------------------------------------------- */ body.home-premium .policy-letter { padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease), border-color 0.6s var(--ease); } body.home-premium .policy-letter:hover { transform: translateY(-6px); border-color: transparent; box-shadow: var(--shadow-md); } /* ---------------------------------------------------------- ROOM ABOVE THE CAREERS BAND ---------------------------------------------------------- Only 21px separated the last line of each page from "Transform Lives Through Education" — measured the same on all five of these pages, since they share this file and the same partial. The band already carries a 100px top margin, but .careers-title is pulled 304px back up inside it, so most of that margin is spent before the heading appears. 135px brings the gap to about 56px, the rhythm the rest of the site keeps between a section and the next heading. The heading and the artwork move together, so the Careers button keeps its clearance from the photograph. ---------------------------------------------------------- */ body.home-premium .careers-band { margin-top: 135px; } /* ---------------------------------------------------------- THE HEADINGS, ONE LINE WHERE THEY FIT ---------------------------------------------------------- "A Comprehensive LSBE Curriculum Covering Key Topics" needs about 1320px at the theme's 50px — its two line boxes measured 1163 and 149 — against 1296px of container, so it broke by 24px. A 48px ceiling brings it to roughly 1267px and it holds one line. The longest headings on the other policy pages need more than any container offers and are unaffected either way. ---------------------------------------------------------- */ body.home-premium .section-title h2 { font-size: clamp(30px, 3.8vw, 48px); } /* ---------------------------------------------------------- THE TOPIC CARDS — TALLER, AND THE LABEL CENTRED ---------------------------------------------------------- The theme lays .benefit-item out as a flex column with align-items: flex-start and re-centres the children it knows about — the icon element, h3, the paragraph, the button. The label here is an h5, which is not on that list, so it sat hard against the left edge despite the card's own text-center: 1px of space on the left against 61 to 95px on the right, depending on how long the topic's name is. The cards were also a little shallow at 220px. They are 250px now, and the icon grows from 40px to 64px to match — a 40px mark in a 280px card left the content looking lost in the space rather than filling it. 64px is the size the theme gives the icons in its other cards. ---------------------------------------------------------- */ body.home-premium .benefit-item h5 { align-self: center; text-align: center; } body.home-premium .benefit-item:has(.topic-icon) { min-height: 250px; justify-content: center; } body.home-premium .topic-icon { width: 64px; height: 64px; } /* ========================================================== BANNING CORPORAL PUNISHMENT ---------------------------------------------------------- .policy-band and .authority-card appear only on that page, so these rules reach nothing else in this shared file. ========================================================== */ /* ---------------------------------------------------------- THE OPENING BAND — THE ARTWORK BACK TO ITS OWN BRIGHTNESS ---------------------------------------------------------- The theme lays a dark scrim over every .banner-slider-item, which is right on the home page where white type sits on a bright photograph. This band's copy is DARK — the heading in --ink and the lead below it — so the scrim worked against it twice over: the artwork was dulled and dark text was left sitting on a dark wash, which is why the paragraph stopped being readable. Before the theme there was no scrim here at all. The selector carries one more class than the theme's, whose two :not() parts count for more than they look. ---------------------------------------------------------- */ body.home-premium .banner-area-two1 .banner-slider-item.policy-band::before, body.home-premium .banner-area-two1 .banner-slider-item.policy-band::after { content: none; } /* The lead goes back to the ink it had before the theme, rather than the softer body grey, so it holds its own against the artwork. */ body.home-premium .policy-band .section-title p { color: var(--ink-2); } /* ---------------------------------------------------------- THE AUTHORITY CARDS, IN THE THEME'S LANGUAGE ---------------------------------------------------------- Three contact cards with a flat orange bar, a borrowed drop shadow and browser-default blue links. They become the theme's card: hairline border, its own shadow, a 6px lift on hover, the province name on a brand gradient rather than a flat block, and the links in the theme's accent with the labels in ink so the two read apart. The shadows need !important: the markup carries Bootstrap's .shadow utility, which is itself !important, so without it the card kept the old rgba(0,0,0,0.15) drop and never deepened on hover. ---------------------------------------------------------- */ body.home-premium .authority-card { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm) !important; overflow: hidden; transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease), border-color 0.6s var(--ease); } /* The reveal sits on the column, not on the card. While it was on the card the theme's [data-aos].aos-animate rule pinned transform: translate3d(0,0,0) !important on it, so the hover lift below could never take effect. Moving it up one level frees the card's transform; these two restore the stagger the theme gives a row of cards, which keys off data-aos being a descendant of the column and so no longer matches. Narrowed with :has() because volunteer also hangs data-aos off the columns of an .equal-cards row, and it is not this page's business to restagger it. */ body.home-premium .equal-cards > [class*="col-"]:nth-of-type(2)[data-aos]:has(.authority-card) { transition-delay: 110ms !important; } body.home-premium .equal-cards > [class*="col-"]:nth-of-type(3)[data-aos]:has(.authority-card) { transition-delay: 220ms !important; } body.home-premium .authority-card:hover { transform: translateY(-6px); border-color: transparent; box-shadow: var(--shadow-md) !important; } body.home-premium .authority-card .top { background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%); } body.home-premium .authority-card .top h5 { color: #fff; font-weight: 700; letter-spacing: 0.01em; margin: 0; } body.home-premium .authority-card .bottom p { line-height: 2; margin-bottom: 0; } body.home-premium .authority-card .bottom strong { color: var(--ink); } body.home-premium .authority-card .bottom a { color: var(--accent); text-decoration: none; transition: color 0.4s var(--ease); } body.home-premium .authority-card .bottom a:hover { color: var(--accent-deep); text-decoration: underline; } /* Punjab's address is the one that will not fit. Between 1200 and 1299px the three cards sit at 366px, which leaves the line 312px of room against the 335px it wants, so the address dropped below its label while the other two cards kept theirs on one line. The selector names that address, so only it is touched: the other two emails, and this one at every other width, stay at 15px. nowrap is there so it can never break mid-address instead. */ @media (min-width: 1200px) and (max-width: 1299.98px) { body.home-premium .authority-card .bottom a[href="mailto:dgchildprotectionbureau@gmail.com"] { font-size: 13.5px; white-space: nowrap; } } /* ---------------------------------------------------------- ROOM FOR THE LONGEST EMAIL ---------------------------------------------------------- "dgchildprotectionbureau@gmail.com" needs 285px. Three across, the card gives it 362px at 1440px and 312px at 1200px, but only 253px at 992px and 162px at 768px, where it broke onto a second line. No readable size fits 162px — it would need about 8px — so the columns give it the room instead: two across through the 992-1199 band and one across below that, where the card then offers 415px and 696px. ---------------------------------------------------------- */ @media (min-width: 992px) and (max-width: 1199.98px) { body.home-premium .equal-cards > [class*="col-"]:has(.authority-card) { flex: 0 0 50%; max-width: 50%; } } @media (min-width: 768px) and (max-width: 991.98px) { body.home-premium .equal-cards > [class*="col-"]:has(.authority-card) { flex: 0 0 100%; max-width: 100%; } }