/* ========================================================== Our Schools pages (Khatoon-e-Pakistan, SMB Fatima Jinnah) ---------------------------------------------------------- Loaded by resources/views/school.blade.php via @push('styles'), so it lands after site.css and covers both schools. ========================================================== */ /* ---------------------------------------------------------- ABOUT THE SCHOOL ---------------------------------------------------------- The old page carried these sizes inline on every heading. ---------------------------------------------------------- */ .school-heading { margin-top: 20px; } .school-stats h3 { margin: 10px 0 0; line-height: 2; font-size: 18px; } .school-stats p { margin-bottom: 0; } /* The photograph beside the text. It is a different shape on each page, so a fixed box keeps it level with the paragraph block next to it. */ .about-area.two .about-img img { display: block; width: 100%; height: 320px; object-fit: cover; } /* ---------------------------------------------------------- NOTABLE ACHIEVEMENTS ---------------------------------------------------------- Six cards of one picture and one paragraph. The paragraphs run from two lines to seven, so .equal-cards levels the row and this makes the card fill the height it is given. ---------------------------------------------------------- */ .gallery-item.card-stack .blog-item { height: 100%; margin-bottom: 0; } .gallery-item .blog-item .top img { display: block; width: 100%; height: 230px; object-fit: cover; } .gallery-item .blog-item .bottom { padding: 20px; } .gallery-item .blog-item .bottom p { margin-bottom: 0; } /* ---------------------------------------------------------- BEFORE AND AFTER ---------------------------------------------------------- jquery.anyimagecomparisonslider.js sizes each slider itself and writes its own inline styles. These only cover the two labels, which it leaves as bare links sitting straight on the photograph — unreadable wherever the picture is pale. ---------------------------------------------------------- */ [id^="aics-"] { max-width: 100%; } [id^="aics-"] .ui a { cursor: default; padding: 4px 12px !important; background: rgba(255, 255, 255, 0.9) !important; color: #302c51 !important; font-size: 13px; font-weight: 600; border-radius: 3px; text-transform: none; } /* Two lines reserved so the sliders in a row start level whether their caption wraps or not */ [id^="aics-"] + h6 { font-size: 15px; line-height: 1.5; min-height: 3em; } /* ---------------------------------------------------------- CONTACT DETAILS ---------------------------------------------------------- The theme draws a coloured bar under every h5 and h6; the slider captions above read better without it. ---------------------------------------------------------- */ h6:after { background: transparent !important; } .school-contact-link { color: #757575; } .school-contact-link:hover { color: #ff6015; } .school-map { display: block; width: 100%; height: 300px; border: 0; margin-top: 20px; } /* ========================================================== THEMED PAGE ONLY ---------------------------------------------------------- Applies only while the page carries the premium theme (body.home-premium, set by the @section in the Blade file). Both school pages share this one view, so these cover both. Drop that one line and they return to how they were. ========================================================== */ /* ---------------------------------------------------------- THE SECTION HEADINGS, ONE LINE EACH ---------------------------------------------------------- The theme caps every .section-title at 760px. Three of the headings here are longer than that at the 50px they render at, so each broke onto a second line: Impact On Academics – SSC Board Exam Results needs 1161px Notable Student and School Achievements needs 1025px Before and After Transformation needs 764px The container gives 1296px, so lifting the cap puts all three on one line without touching the type size. The school name at the top is not in a .section-title and already fits. ---------------------------------------------------------- */ body.home-premium .section-title { max-width: none; } /* ---------------------------------------------------------- THE ORANGE RULE UNDER THE SCHOOL NAME ---------------------------------------------------------- The theme turns an inline orange divider into a short gradient bar, but only when it is a direct child of .section-title. This one is nested inside the

under the school name, so it stayed a 2px line across its full 746px. Same declarations as the theme's own, so every divider on the page matches; the theme's rule is the more specific, so the four 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 — the rows measured 1px apart, which reads as the second row resting 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; } /* ---------------------------------------------------------- "ABOUT THE SCHOOL" — THE PHOTOGRAPH FILLS ITS PANEL ---------------------------------------------------------- The photograph sits in a .blog-item, which the theme styles as a card expecting a .top with the picture and a .bottom with a heading and excerpt under it. Here there is only the .top, and the column stretches the card to match the text beside it — 503px against a 320px picture, which left 182px of bare white below the photograph and made the card look like a section someone had forgotten to fill. The picture is given the whole panel instead. object-fit: cover crops it to the box rather than stretching it, so a photograph of any proportion fills the height cleanly and the card reads as one deliberate image rather than a card with an empty half. ---------------------------------------------------------- */ body.home-premium .about-area.two .blog-item { height: 100%; } body.home-premium .about-area.two .blog-item .top, body.home-premium .about-area.two .blog-item .about-img { height: 100%; } body.home-premium .about-area.two .blog-item .about-img { position: relative; overflow: hidden; } body.home-premium .about-area.two .blog-item .about-img img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform 1.35s var(--ease); } /* A slow drift on hover, the same gesture the theme gives its other picture cards, so the panel answers the pointer. */ body.home-premium .about-area.two .blog-item:hover .about-img img { transform: scale(1.05); } /* The play control sits over the middle of the whole panel now rather than the middle of a 320px strip, and a soft wash at the foot keeps it and the rounded corners reading against a bright photograph. */ body.home-premium .about-area.two .blog-item .about-img::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 38%; background: linear-gradient(to top, rgba(22, 19, 46, 0.42), transparent); pointer-events: none; } body.home-premium .about-area.two .blog-item .video-wrap { z-index: 3; }