/*==================================================
GERMAINE — GLOBAL REFINEMENTS
Loaded on every page, after style.css / premium-theme.css.
Purpose (additive only — does not redesign anything):
1. Reflow the branding bar to Logo -> Contact -> Apply
Scholarship button (contact now sits directly before
the button instead of on the far left).
2. Trim the motto's type size a touch further for the
single-line compact header.
3. Small helper classes used by the sitewide ".sp-page"
ambient glass background rollout (see school-page.css
for the actual system — this file only adds the
couple of rules needed to run it outside the school
pages it was built for).
==================================================*/
/* ---------- 1. Branding bar: Logo (left) -> Contact + Apply button (right) ---------- */
@media(min-width:993px){
.branding-inner{
grid-template-columns:auto 1fr;
}
.brand-logo-group{
justify-self:start;
}
.branding-right{
justify-self:end;
gap:16px;
}
/* contact block now lives inside .branding-right, immediately before the
Apply Scholarship Now button, laid out horizontally so the header
stays a single compact row */
.branding-right .branding-contact{
flex-direction:row;
align-items:center;
gap:14px;
margin-top:0;
}
.branding-right .branding-contact a{
white-space:nowrap;
}
}
/* ---------- 2. Motto — slightly smaller for the compact single-line header ---------- */
.brand-tagline{
font-size:.78rem;
}
/* ---------- 3. Global ambient glass background rollout ----------
.sp-page / .sp-page-bg / .sp-bg-grid / .sp-bg-blobs / .sp-bg-lines /
.sp-page-particles / .sp-bg-shine are all defined in school-page.css
(the same system already used on every individual programme page).
No overrides needed here — this file just documents the dependency
and links the pages together; school-page.css and school-page.js are
linked directly on every page alongside this file. */
/* ---------- 4. Navigation breathing room ----------
"Primary Navigation" = the branding bar (logo + contact + Apply
button). "Lower Navigation" = the main links bar underneath it.
Structure, links and behaviour are untouched — sizing only. Uses
min-height rather than guessing at padding/line-height math, so the
target ranges hold regardless of font metrics. Blue/navy glass only
— no black anywhere, matching the rest of the site. */
@media(min-width:993px){
.branding-inner{
min-height:80px;
padding-top:14px;
padding-bottom:14px;
box-sizing:border-box;
}
.brand-logo-img{
height:52px;
}
header#header.sticky .branding-inner{
min-height:64px;
padding-top:9px;
padding-bottom:9px;
}
header#header.sticky .brand-logo-img{
height:42px;
}
}
.navbar,
.navbar-inner{
min-height:52px;
}
.navbar-inner{
display:flex;
align-items:center;
}
/* ---------- 5. Global floating-rectangle depth layer ----------
Adds the "large, extremely subtle, blurred, floating rectangles"
depth layer to the existing sitewide ".sp-page" ambient background
(school-page.css). Pure CSS, no markup changes needed on any page —
it attaches to ".sp-page" itself, which every page already has from
the ambient-background rollout. Opacity is intentionally low (3–7%)
so it adds depth without competing with content. */
.sp-page::before{
content:"";
position:fixed;
inset:-10%;
z-index:-9;
pointer-events:none;
background:
linear-gradient(115deg, transparent 30%, rgba(16, 42, 92, .05) 30%, rgba(16, 42, 92, .05) 42%, transparent 42%),
linear-gradient(65deg, transparent 56%, rgba(236, 72, 153, .04) 56%, rgba(236, 72, 153, .04) 66%, transparent 66%),
linear-gradient(150deg, transparent 76%, rgba(255, 255, 255, .06) 76%, rgba(255, 255, 255, .06) 88%, transparent 88%);
background-size:180% 180%;
filter:blur(60px);
animation:sprectDrift 50s ease-in-out infinite alternate;
}
@keyframes sprectDrift{
0%{ background-position:0% 0%, 100% 100%, 50% 0%; }
100%{ background-position:16% 22%, 82% 68%, 62% 32%; }
}
@media (prefers-reduced-motion: reduce){
.sp-page::before{ animation:none !important; }
}
/*==================================================
GLOBAL CONSISTENCY LAYER
One typography scale, one card recipe, one button
system for the whole site. Deliberately additive:
it standardises the shared primitives (headings,
buttons, badges, the .u-card utility) rather than
force-restyling every scoped component, so the
page-specific designs above keep working.
==================================================*/
:root{
/* unified card recipe — pink-tinted glass border + blended shadow glow
so every .u-card carries the brand's pink identity, not just navy */
--card-bg:rgba(255, 255, 255, .10);
--card-blur:12px;
--card-border:1px solid rgba(236, 72, 153, .22);
--card-radius:18px;
--card-shadow:0 10px 26px rgba(16, 42, 92, .16), 0 0 20px rgba(236, 72, 153, .14);
/* unified type weights */
--fw-heading:700;
--fw-body:400;
--fw-button:600;
--fw-badge:700;
}
/*---------- TYPOGRAPHY ----------*/
h1, h2, h3, h4, h5, h6{ font-weight:var(--fw-heading); }
body, p, li{ font-weight:var(--fw-body); }
button,
.btn-primary,
.btn-secondary,
.apply-btn{ font-weight:var(--fw-button); }
/* shared badge/tag language */
.section-badge,
.section-tag,
.recognised-title,
.recognised-badge{
font-weight:var(--fw-badge);
letter-spacing:.5px;
}
/*---------- UNIFIED CARD UTILITY ----------*/
.u-card{
background:var(--card-bg);
backdrop-filter:blur(var(--card-blur));
-webkit-backdrop-filter:blur(var(--card-blur));
border:var(--card-border);
border-radius:var(--card-radius);
box-shadow:var(--card-shadow);
}
/*---------- UNIFIED BUTTONS ----------*/
.btn-primary{
background:linear-gradient(135deg, var(--primary-pink), var(--secondary-pink));
color:#FFFFFF;
transition:var(--transition);
}
.btn-primary:hover{
transform:translateY(-2px);
box-shadow:0 0 30px rgba(236, 72, 153, .4), 0 14px 30px rgba(236, 72, 153, .26);
}
.btn-secondary{
background:transparent;
border:1px solid var(--primary-pink);
color:var(--primary-pink);
transition:var(--transition);
}
.btn-secondary:hover{
background:var(--primary-pink);
color:#FFFFFF;
transform:translateY(-2px);
box-shadow:0 0 26px rgba(236, 72, 153, .35);
}
/*---------- UNIFIED HOVER/ANIMATION TIMING ----------*/
a, button, .u-card{ transition-duration:.3s; }
@media (prefers-reduced-motion: reduce){
.btn-primary:hover,
.btn-secondary:hover{ transform:none; }
}
/*==================================================
COMPACT SPACING LAYER
Trims vertical whitespace so pages read densely
without collapsing hero sections (which own their
padding) or the fixed-header offset on .page-shell.
Scoped to generic content sections only.
==================================================*/
.content-section{ padding:2.5rem 0; }
.content-section.alt{ padding:2.5rem 0; }
.section-heading,
.section-header,
.section-title{ margin-bottom:1rem; }
/*---------- UNIFIED TYPE SCALE ----------*/
.section-heading h2,
.section-header h2,
.section-title h2{
font-size:2rem;
font-weight:var(--fw-heading);
line-height:1.25;
}
.section-heading p,
.section-header p,
.section-title p{
font-size:.9rem;
line-height:1.55;
}
/* card headings + body copy */
.u-card h3{ font-size:1rem; font-weight:600; }
.u-card p{ font-size:.85rem; line-height:1.45; }
/* badges — uppercase pink pill, one treatment everywhere */
.section-badge,
.section-tag{
font-size:.7rem;
text-transform:uppercase;
letter-spacing:.5px;
font-weight:var(--fw-badge);
}
@media(max-width:640px){
.content-section,
.content-section.alt{ padding:2rem 0; }
}
/*==================================================
PINK-FIRST BRAND LAYER
Pink is the brand; navy provides contrast; white
provides clarity. This pushes pink into the
remaining interactive surfaces so it is the first
colour users associate with Germaine.
==================================================*/
/* global scrollbar */
html{ scrollbar-width:thin; scrollbar-color:var(--pink-brand) transparent; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{
background:var(--pink-brand);
border-radius:10px;
}
::-webkit-scrollbar-thumb:hover{ background:var(--pink-light); }
/* text selection */
::selection{ background:var(--pink-brand); color:#FFFFFF; }
::-moz-selection{ background:var(--pink-brand); color:#FFFFFF; }
/* links pick up pink on hover everywhere */
a:hover{ color:var(--pink-brand); }
/* active navigation item + hover underline */
.nav-links > li > a.active,
.nav-links > li > a:hover{ color:var(--pink-brand); }
/* focus ring — pink, consistent with form focus */
:focus-visible{
outline:2px solid var(--pink-brand);
outline-offset:2px;
}
/* icons default to brand pink where no explicit colour is set */
.section-tag i,
.section-badge i{ color:var(--pink-brand); }
/*==================================================
NAVIGATION REFINEMENT — narrower + more compact bar,
flicker-free sticky hysteresis support, and a
logo-only sticky state (smaller logo, no wordmark).
Colours, background and the rest of the branding are
the site's ORIGINAL values — untouched here.
==================================================*/
/* ---------- 1. Narrower, centred nav (premium, not edge-to-edge) ----------
Slightly reduced vs. the sitewide 1220px container so the nav reads as
a contained, premium bar rather than stretching full width. */
.branding-inner,
.navbar-inner{
max-width:1140px;
}
/* ---------- 2. Smaller overall bar — both states ----------
Trims the branding row and link row further than the sitewide default
so the whole nav reads as a slim, compact strip. */
@media(min-width:993px){
.branding-inner{
min-height:64px;
padding-top:10px;
padding-bottom:10px;
}
.brand-logo-img{
height:44px;
}
header#header.sticky .branding-inner{
min-height:52px;
padding-top:7px;
padding-bottom:7px;
}
}
.navbar,
.navbar-inner{
min-height:44px;
}
.nav-links > li > a{
padding:8px 14px;
}
@media(max-width:992px){
.branding-inner{ padding:12px 18px; }
.brand-logo-img{ height:40px; }
header#header.sticky .branding-inner{ padding:8px 18px; }
}
/* ---------- 3. GPU acceleration + fast sticky transition ----------
Promotes the nav bars to their own compositor layer and keeps the
sticky swap short and crisp, so it never stutters or flickers. */
header#header,
.utility-bar,
.branding-bar,
.navbar{
transform:translateZ(0);
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
will-change:transform;
}
header#header,
.branding-bar,
.branding-inner,
.navbar,
.brand-logo-img,
.brand-text{
transition-duration:.18s;
transition-timing-function:ease-out;
}
/* ---------- 4. Sticky state: logo only, and smaller ----------
The ONLY visual change between normal and sticky is that the wordmark
next to the logo hides and the logo itself shrinks further — the
background, text colours and everything else stay exactly as the
site's original dark-glass nav (no colour changes here). The wordmark
collapses via opacity + max-width rather than display:none, so it
animates smoothly with no layout jump. */
.brand-logo-group{
gap:0;
}
.brand-text{
opacity:1;
max-width:280px;
margin-left:14px;
overflow:hidden;
white-space:nowrap;
transition:opacity .18s ease-out, max-width .18s ease-out, margin-left .18s ease-out;
}
header#header.sticky .brand-text{
opacity:0;
max-width:0;
margin-left:0;
pointer-events:none;
}
header#header.sticky .brand-logo-img{
height:32px;
}
@media(max-width:992px){
header#header.sticky .brand-logo-img{ height:28px; }
}
/* ---------- 5. Apply Scholarship button removed from the nav ---------- */
.branding-right .apply-btn{
display:none;
}
@media (prefers-reduced-motion: reduce){
header#header,
.branding-bar,
.branding-inner,
.navbar,
.brand-logo-img,
.brand-text{ transition:none !important; }
}
/*==================================================
PINK-LED PALETTE REBALANCE
Shifts the site from navy-dominant to pink-led:
pink now carries the accents (nav indicators, icons,
headings, borders, dividers, footer highlights) while
navy stays as the structural/contrast colour and white
keeps everything readable. Layout, typography, sizing,
animation and responsiveness are untouched — this layer
only rebalances colour.
==================================================*/
/* ---------- soft pink page canvas ---------- */
body{ background-color:var(--bg-page, #FFF7FB); }
/* ---------- navigation: pink indicators instead of navy fills ---------- */
.nav-menu > li > a::after,
.navbar .nav-link::after{ background:linear-gradient(90deg, #EC4899, #F472B6) !important; }
.nav-menu > li > a:hover,
.nav-menu > li > a.active,
.navbar .nav-link:hover,
.navbar .nav-link.active{ color:#EC4899 !important; }
.dropdown-menu a:hover,
.mega-menu a:hover{
color:#EC4899 !important;
border-left-color:#EC4899 !important;
}
.nav-menu i,
.navbar i{ color:inherit; }
/* ---------- section labels / eyebrows / tags ---------- */
.section-tag,
.ct-eyebrow,
.section-label,
.eyebrow{ color:#EC4899 !important; }
/* pink underline accent beneath major section headings */
.section-header h2::after,
.section-head h2::after{ background:linear-gradient(90deg, #EC4899, #F472B6) !important; }
/* ---------- icons: pink by default across feature/stat/contact sets ---------- */
.feature-icon i,
.stat-icon i,
.contact-icon i,
.value-icon i,
.service-icon i,
.info-icon i{ color:#EC4899 !important; }
/* ---------- primary buttons: pink gradient ---------- */
.btn-primary{
background:linear-gradient(135deg, #EC4899, #F472B6) !important;
border-color:transparent !important;
color:#FFFFFF !important;
}
.btn-primary:hover{
background:linear-gradient(135deg, #DB2777, #EC4899) !important;
box-shadow:0 12px 30px rgba(236, 72, 153, .35) !important;
}
/* secondary / ghost buttons keep navy glass with a pink edge on hover */
.btn-ghost:hover,
.btn-secondary:hover{
border-color:rgba(236, 72, 153, .55) !important;
color:#EC4899 !important;
}
/* ---------- glass cards: warm pink tint + pink-tinted border ---------- */
.glass-card,
.premium-card,
.info-card,
.feature-card{
border-color:rgba(244, 114, 182, .26) !important;
}
.glass-card:hover,
.premium-card:hover,
.info-card:hover,
.feature-card:hover{
border-color:rgba(236, 72, 153, .45) !important;
}
/* ---------- dividers / rules ---------- */
hr,
.divider{
border-color:rgba(244, 114, 182, .3) !important;
background:linear-gradient(90deg, transparent, rgba(236, 72, 153, .35), transparent);
}
/* ---------- footer: navy base, stronger pink accents ---------- */
.footer h3,
.footer h4,
.footer-col h3,
.footer-col h4{ color:#FBCFE8 !important; }
.footer a:hover,
.footer-col a:hover{ color:#F472B6 !important; }
.footer i,
.footer-col i{ color:#EC4899 !important; }
.footer .social-links a:hover,
.footer-social a:hover{
background:linear-gradient(135deg, #EC4899, #F472B6) !important;
border-color:transparent !important;
color:#FFFFFF !important;
}
/* ---------- background decorative accents lean pink, not navy ---------- */
.bg-blob,
.hero-blob,
.decor-blob{ background:radial-gradient(circle, rgba(236, 72, 153, .22), transparent 70%) !important; }
@media (prefers-reduced-motion: reduce){
.btn-primary,.btn-ghost,.btn-secondary{ transition:none !important; }
}
/*==================================================
READABILITY LAYER
Sitewide editorial typography baseline for body
copy: comfortable line length, open line-height,
consistent spacing. Bare-tag, low-specificity rules
only — every page/component already sets its own
class-scoped paragraph width and alignment (.xx-head
p, .xx-lead, etc.) and those keep winning the
cascade untouched. This layer only improves the
plain, unstyled paragraphs that fell through the
cracks, and adds baseline spacing rhythm everywhere.
==================================================*/
p{
line-height:1.75;
max-width:75ch;
}
/* short-form contexts (badges, single-line captions, buttons, nav) never
wrap to a paragraph width worth constraining — explicitly exempt */
.gh-hint, .ai-hero-stat p, .ct-stat span, .gsn-node-label, small{
max-width:none;
}
/* comfortable vertical rhythm between stacked text */
p + p{ margin-top:1em; }
h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p{ margin-top:.6em; }
p + h2, p + h3, p + h4,
ul + h2, ul + h3, ol + h2, ol + h3{ margin-top:1.4em; }
* + ul, * + ol{ margin-top:.6em; }
ul + *, ol + *{ margin-top:1em; }
ul, ol{ line-height:1.7; }
li + li{ margin-top:.35em; }
/* cards: consistent breathing room so text never sits flush against a
border (only applies where no explicit padding is already set by a
more specific component rule, which continues to win) */
.u-card{ padding:24px; }
.u-card p:last-child{ margin-bottom:0; }
@media(max-width:640px){
p{ max-width:none; }
}
/*==================================================
ALIGNMENT & MARGIN LAYER
Sitewide editorial gutters. Guarantees that no text
block ever runs flush to the edge of its container
and that every page shares the same reading measure,
side padding and vertical rhythm.
Same conservative approach as the readability layer:
these are low-specificity rules keyed to the shared
container/section primitives, so any component that
already declares its own width, padding or alignment
continues to win the cascade and is left untouched.
==================================================*/
/* ---------- shared container gutters ----------
Every page wraps its content in one of these. Setting a single
consistent side padding here means no section can sit tighter to
the viewport edge than any other. */
.container,
.gh-wrap,
.ct-wrap,
.sp-wrap,
.ai-wrap,
.sl2-wrap,
.pw-wrap{
padding-left:32px;
padding-right:32px;
box-sizing:border-box;
}
/* ---------- reading measure ----------
Long-form descriptive copy is capped at a comfortable 70ch
(~650-780px at our body size) and left-aligned. Short intro and
summary text that a component has deliberately centred keeps its
centring, because `text-align:center` set by the component wins. */
.container > p,
.gh-wrap > p,
.ct-wrap > p,
.sp-wrap > p,
.sl2-wrap > p,
.pw-wrap > p{
max-width:70ch;
}
/* centred section intros stay centred, just measured */
[class*="-head"] > p,
[class*="-header"] > p{
max-width:68ch;
margin-left:auto;
margin-right:auto;
}
/* never justify — ragged right reads better and avoids rivers */
p, li, dd{ text-align:left; }
[style*="text-align:center"], .text-center, [class*="-head"], [class*="-header"]{ text-align:center; }
/* ---------- list gutters ---------- */
ul, ol{ padding-left:1.35em; }
ul ul, ol ol, ul ol, ol ul{ margin-top:.35em; }
/* ---------- card interiors ----------
Text inside any card-like surface gets equal padding on all four
sides and never touches the border. */
.u-card > :first-child,
.u-card > :last-child{ margin-top:0; }
.u-card > :last-child{ margin-bottom:0; }
/* ---------- heading / paragraph left-edge alignment ----------
Headings and their following paragraph share the same left edge so
each section has a clean vertical spine. */
h1, h2, h3, h4, h5, h6{ padding-left:0; padding-right:0; }
/* ---------- responsive gutters ---------- */
@media(max-width:1024px){
.container,
.gh-wrap,
.ct-wrap,
.sp-wrap,
.ai-wrap,
.sl2-wrap,
.pw-wrap{ padding-left:28px; padding-right:28px; }
}
@media(max-width:760px){
.container,
.gh-wrap,
.ct-wrap,
.sp-wrap,
.ai-wrap,
.sl2-wrap,
.pw-wrap{ padding-left:22px; padding-right:22px; }
}
@media(max-width:480px){
.container,
.gh-wrap,
.ct-wrap,
.sp-wrap,
.ai-wrap,
.sl2-wrap,
.pw-wrap{ padding-left:18px; padding-right:18px; }
ul, ol{ padding-left:1.15em; }
}
/*==================================================
6. SITEWIDE JUSTIFIED BODY TEXT
Long-form paragraph copy reads with justified edges
for a more polished, print-like rhythm. Deliberately
scoped to only (never headings, nav, buttons,
badges, labels or form fields) and capped at 65ch so
line length stays comfortable to read. Justify has no
visible effect on a paragraph short enough to sit on
one line, so single-line captions/subtext are
unaffected in practice; the exclusion list below is a
belt-and-braces guard for any
used as UI chrome.
text-wrap:pretty asks the browser's line-breaking
algorithm to avoid orphaned single words on the last
line (supported in Chromium/Safari; browsers without
support just fall back to normal wrapping, no harm).
hyphens:none + word-break/overflow-wrap:normal keep
every word intact — no mid-word splits, ever. Final
line of a justified paragraph is NOT force-stretched
(that would need text-align-last:justify, which is
deliberately never set) so it reads naturally ragged.
==================================================*/
p{
text-align:justify;
text-justify:inter-word;
text-wrap:pretty;
max-width:65ch;
line-height:1.8;
word-break:normal;
overflow-wrap:normal;
hyphens:none;
-webkit-hyphens:none;
-ms-hyphens:none;
}
/* headings and other short text: natural alignment, balanced wrapping
where the browser supports it, never justified */
h1, h2, h3, h4, h5, h6{
text-wrap:balance;
}
/* UI chrome: never justify/constrain these even if a
is used inside them */
nav p,
header p,
.utility-bar p,
.nav-links p,
.branding-inner p,
footer .footer-bottom p,
button p,
.btn p,
a.btn p,
p.btn,
.badge p,
p.badge,
.pill p,
p.pill,
.tag p,
p.tag,
.chip p,
p.chip,
.eyebrow p,
p.eyebrow,
form p,
label p,
.stat p,
.stat-value,
.stat-label,
.ct-newsletter-cta-badge,
.slh-voices-title{
text-align:left;
max-width:none;
line-height:inherit;
hyphens:none;
-webkit-hyphens:none;
}
/* Below tablet width, justified text tends to create ragged
word-spacing on narrow columns — fall back to left-aligned. */
@media(max-width:768px){
p{
text-align:left;
hyphens:none;
}
}
/*==================================================
7. SITEWIDE "WHY CHOOSE GERMAINE" IMAGE FRAME
Self-contained clone of the home page's "Why Choose
Germaine" image treatment (assets/css/premium-sections.css
.why-image .fx-frame/.fx-glass + style.css .floating-badge —
organic navy blob offset behind a soft-glass photo blob,
travelling pink/navy border light, gentle float, and an
overlapping frosted stat badge). Own custom property +
keyframes so it works on any page regardless of which
page-specific stylesheets are loaded. Markup:
==================================================*/
@property --gwf-a{ syntax:''; inherits:false; initial-value:0deg; }
@keyframes gwfFloat{
0%,100%{ transform:translateY(0); }
50%{ transform:translateY(-6px); }
}
@keyframes gwfBorderTravel{ to{ --gwf-a:360deg; } }
@keyframes gwfFloatBadge{
0%,100%{ transform:translateY(0); }
50%{ transform:translateY(-7px); }
}
.gwf-wrap{
position:relative;
isolation:isolate;
padding:18px 18px 30px 48px;
animation:gwfFloat 9s ease-in-out infinite;
}
.gwf-wrap::before{
content:"";
position:absolute;
inset:-10% -8% -10% -12%;
z-index:-1;
background:
radial-gradient(circle at 30% 30%, rgba(236, 72, 153, .28), transparent 60%),
radial-gradient(circle at 80% 78%, rgba(236, 72, 153, .16), transparent 62%);
filter:blur(34px);
opacity:.9;
pointer-events:none;
}
.gwf-frame{
position:relative;
border-radius:66% 34% 62% 38% / 58% 44% 56% 42%;
overflow:visible;
transition:transform .5s cubic-bezier(.25,.8,.25,1);
}
.gwf-frame::before{
content:"";
position:absolute; z-index:-1;
top:-5%; left:-30%; right:3%; bottom:-7%;
background:linear-gradient(130deg, #102A5C 0%, #123A92 52%, #102A5C 100%);
border-radius:64% 36% 70% 30% / 62% 40% 60% 38%;
transform:rotate(-5deg);
box-shadow:0 34px 70px rgba(16, 42, 92, .35);
}
.gwf-glass{
position:relative;
border-radius:66% 34% 62% 38% / 58% 44% 56% 42%;
border:4px solid rgba(255, 255, 255, .82);
box-shadow:0 30px 80px rgba(18, 58, 146, .18), 0 15px 40px rgba(236, 72, 153, .12), inset 0 0 40px rgba(255, 255, 255, .14);
overflow:hidden;
}
.gwf-glass::before{
content:"";
position:absolute; inset:0; z-index:3;
border-radius:inherit; padding:3px;
background:conic-gradient(from var(--gwf-a),
transparent 0 64%, #102A5C 82%, #EC4899 88%, #123A92 94%, transparent 100%);
-webkit-mask:linear-gradient(#102A5C 0 0) content-box, linear-gradient(#102A5C 0 0);
-webkit-mask-composite:xor; mask-composite:exclude;
animation:gwfBorderTravel 9s linear infinite;
pointer-events:none;
}
.gwf-glass img{
display:block;
width:100%;
height:440px;
object-fit:cover;
object-position:center;
border-radius:inherit !important;
box-shadow:none !important;
transition:transform .5s ease;
}
.gwf-wrap:hover .gwf-frame{ transform:scale(1.03); }
.gwf-wrap:hover .gwf-glass{
box-shadow:0 36px 90px rgba(18, 58, 146, .24), 0 18px 46px rgba(236, 72, 153, .18), inset 0 0 40px rgba(255, 255, 255, .16);
}
.gwf-wrap:hover .gwf-glass::before{ animation-duration:5s; }
.gwf-badge{
position:absolute;
left:6px;
bottom:2px;
z-index:4;
background:rgba(255, 255, 255, .7);
backdrop-filter:blur(18px) saturate(120%);
-webkit-backdrop-filter:blur(18px) saturate(120%);
border:1px solid rgba(255, 255, 255, .85);
border-radius:16px;
box-shadow:0 14px 34px rgba(16, 42, 92, .14), 0 0 18px rgba(236, 72, 153, .22);
padding:16px 22px;
min-width:140px;
overflow:hidden;
transition:transform .4s ease, box-shadow .4s ease;
animation:gwfFloatBadge 6.5s ease-in-out infinite;
}
.gwf-badge h3{
margin:0 0 2px;
font-size:1.9rem;
font-weight:800;
color:#102A5C;
line-height:1;
}
.gwf-badge p{
margin:0;
font-size:.8rem;
font-weight:600;
color:#102A5C;
text-align:left;
max-width:none;
line-height:1.3;
}
.gwf-wrap:hover .gwf-badge{
transform:translateY(-4px);
box-shadow:0 18px 40px rgba(16, 42, 92, .2), 0 0 24px rgba(236, 72, 153, .3);
}
@media(prefers-reduced-motion:reduce){
.gwf-wrap, .gwf-glass::before, .gwf-badge{ animation:none !important; }
.gwf-wrap:hover .gwf-frame{ transform:none; }
}
@media(max-width:991px){
.gwf-glass img{ height:400px; }
}
@media(max-width:768px){
.gwf-wrap{ padding:14px 14px 26px 36px; }
.gwf-glass img{ height:340px; }
.gwf-wrap::before{ filter:blur(26px); }
}
@media(max-width:576px){
.gwf-wrap{ padding:10px 10px 40px 26px; }
.gwf-glass img{ height:280px; }
.gwf-badge{ padding:13px 16px; min-width:120px; left:2px; }
.gwf-badge h3{ font-size:1.5rem; }
.gwf-badge p{ font-size:.72rem; }
}
/*==================================================
.sp-page::before — AMBIENT SWEEP PAINT COST
------------------------------------------------
This pseudo-element is position:fixed; inset:-10%, so it
covers more than the whole viewport and is present on
every page that uses .sp-page (all of them). It combined
the two most expensive things a permanent layer can do:
filter:blur(60px) — costly to rasterise
animation on background-position — not a compositor
property, so every
frame forced a
full-viewport REPAINT
Running together, permanently, they competed with scrolling
on every page and every device.
The gradients are drawn at 0.04-0.06 alpha behind a 60px
blur, so the 50s drift was not perceptible. Dropping only
the animation leaves the layer visually identical while
letting the browser rasterise it once and then simply
composite it, instead of repainting it forever.
==================================================*/
.sp-page::before{
animation:none;
}
/* On phones this layer is invisible in practice but still
costs fill-rate on the weakest GPUs, so retire it there. */
@media(max-width:900px){
.sp-page::before{
display:none;
}
}