, so the child combinator
already keeps its paragraphs out of all of this. */
.events_homepage .medevents > p.fs-50,
.events_homepage .medevents > p.fs-20:not(.title){ transform-origin: top center; }
.events_homepage.ev-js .medevents > p{ opacity: 0; }
/* --- staggered reveal. Card delays are assigned by the script, and each card
carries an --ev-d custom property that its date, title, time and venue
all offset from. */
.events_homepage.ev-js.ev-in{ animation: evSectionUp .8s ease-out both; }
.events_homepage.ev-js.ev-in .ev-head{ animation: evWipe .8s cubic-bezier(.22,.61,.36,1) .2s both; }
.events_homepage.ev-js.ev-in h3 span.float-right{ animation: evViewIn .5s ease-out .45s both; }
.events_homepage.ev-js.ev-in .medevents{ animation: evCardUp .7s cubic-bezier(.22,.61,.36,1) both; }
.events_homepage.ev-js.ev-in .medevents > p.fs-50{ animation: evFlipIn .65s cubic-bezier(.22,.61,.36,1) calc(var(--ev-d, 0s) + .10s) both; }
.events_homepage.ev-js.ev-in .medevents > p.fs-20:not(.title){ animation: evFlipIn .6s cubic-bezier(.22,.61,.36,1) calc(var(--ev-d, 0s) + .28s) both; }
.events_homepage.ev-js.ev-in .medevents > p.title{ animation: evTextUp .5s ease calc(var(--ev-d, 0s) + .46s) both; }
.events_homepage.ev-js.ev-in .medevents > p.fw-600:not(.title){ animation: evTextUp .5s ease calc(var(--ev-d, 0s) + .58s) both; }
.events_homepage.ev-js.ev-in .medevents > p.fs-12,
.events_homepage.ev-js.ev-in .medevents > p.overelipsis2{ animation: evTextUp .5s ease calc(var(--ev-d, 0s) + .70s) both; }
/* the heartbeat breathes a whole card, since a card is what the user clicks */
.events_homepage .medevents.ev-idle{ animation: evIdlePulse 1.2s ease-in-out; }
.events_homepage .medevents.ev-idle:hover{ animation: none; }
/* --- "View All": underline grows from the left, text lifts */
.events_homepage h3 span.float-right a{
position: relative; display: inline-block;
transition: transform .3s cubic-bezier(.22,.61,.36,1);
}
.events_homepage h3 span.float-right a::after{
content: '';
position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
background: currentColor; /* takes the link's own colour */
transform: scaleX(0); transform-origin: left center;
transition: transform .3s cubic-bezier(.22,.61,.36,1);
}
.events_homepage h3 span.float-right a:hover{ transform: translateY(-2px); text-decoration: none; }
.events_homepage h3 span.float-right a:hover::after{ transform: scaleX(1); }
/* --- card hover. The designed colour flip is untouched; it simply eases now
instead of snapping, and the card lifts a little off the page. */
.events_homepage .medevents{
transition: background-color .4s ease,
transform .4s cubic-bezier(.22,.61,.36,1),
box-shadow .4s ease;
}
.events_homepage .medevents p,
.events_homepage .medevents span,
.events_homepage .medevents .title{ transition: color .35s ease; }
.events_homepage .medevents:hover{
transform: translateY(-6px);
box-shadow: 0 16px 30px rgba(0,0,0,.20);
}
/* The card links carry the theme's default hover underline, which draws a line
under every line of copy in the card. The events LISTING page already
suppresses this via `.medeventsdiv a:hover`; the home page had no equivalent.
The heading's "View All" sits outside .col-md-12, so it is unaffected. */
.events_homepage .col-md-12 a:hover{ text-decoration: none; }
/* In slider mode the owl wrapper clips at its padding edge, which would slice
the lift and the shadow off. The breathing room is cancelled out by an equal
negative margin, so everything renders in exactly the same place — only the
clip region grows. Horizontal clipping, which the carousel relies on, is
untouched. */
.events_homepage .owl-carousel .owl-wrapper-outer{ padding: 26px 0; margin: -26px 0; }
.events_homepage .owl-carousel .owl-buttons{ margin-top: 26px; }
/* --- touch / small screens: drop the lift, keep the entrance */
@media (max-width: 767px), (hover: none){
.events_homepage .medevents:hover{ transform: none; box-shadow: none; }
}
/* respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce){
.events_homepage,
.events_homepage h3,
.events_homepage h3 span.float-right,
.events_homepage .medevents,
.events_homepage .medevents > p{ opacity: 1 !important; transform: none !important; animation: none !important; }
.events_homepage .ev-head{ clip-path: none !important; animation: none !important; }
.events_homepage .medevents,
.events_homepage .medevents p,
.events_homepage .medevents span,
.events_homepage h3 span.float-right a{ transition: none !important; }
.events_homepage .medevents:hover{ box-shadow: none !important; }
.events_homepage h3 span.float-right a::after{ transform: scaleX(0) !important; transition: none !important; }
}
/* ===========================================================================
Testimonials section (home) — entrance sequence + hover.
Animation-only and additive, same pattern as the other card sections: a small
self-contained script right after the section toggles the reveal classes and
drops them once the sequence finishes. With JS off or reduced-motion on, the
section renders exactly as designed.
Two things shape this one. It sits on a black panel, so the accents are
neutral white at low alpha — light, not hue, exactly as in Why to Choose. And
nothing inside a testimonial is a link, so the hover is deliberately quiet
and adds NO cursor change: it must not imply the card can be clicked.
Each testimonial's outer handle is its .col-md-12 — one per quote, and the
section heading sits outside it. `.testimoimg` and `.peoplereview` are shared
with services, departments and the write-a-review block, so everything is
scoped to .testimonials_homepage.
=========================================================================== */
@keyframes tsSectionUp{ from{ opacity: 0; transform: translateY(30px); } to{ opacity: 1; transform: translateY(0); } }
@keyframes tsViewIn{ from{ opacity: 0; transform: translateX(26px); } to{ opacity: 1; transform: translateX(0); } }
@keyframes tsCardUp{ from{ opacity: 0; transform: translateY(30px); } to{ opacity: 1; transform: translateY(0); } }
/* heading + nameplate wipes. Negative end insets, so no glyph is ever shaved. */
@keyframes tsWipe{
from{ clip-path: inset(-.2em 100% -.2em -.2em); }
to { clip-path: inset(-.2em -.2em -.2em -.2em); }
}
/* the portrait arrives with a ring pulsing out from it. The avatar is already a
circle, so the box-shadow ring is naturally round, and it ends fully
transparent leaving nothing behind. */
@keyframes tsAvatarIn{
0% { opacity: 0; transform: scale(.4); box-shadow: 0 0 0 0 rgba(255,255,255,.40); }
60% { opacity: 1; transform: scale(1.1); box-shadow: 0 0 0 12px rgba(255,255,255,.12); }
100%{ opacity: 1; transform: scale(1); box-shadow: 0 0 0 24px rgba(255,255,255,0); }
}
@keyframes tsTextUp{ from{ opacity: 0; transform: translateY(14px); } to{ opacity: 1; transform: translateY(0); } }
@keyframes tsIdlePulse{ 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.05); } }
/* --- pre-hide (only while the script drives the reveal) */
.testimonials_homepage.ts-js,
.testimonials_homepage.ts-js h3 span.float-right,
.testimonials_homepage.ts-js .col-md-12{ opacity: 0; }
/* the script wraps the heading's own text node so the wipe misses "View All";
`color: inherit` stops the global `span` colour rule repainting the heading */
.testimonials_homepage .ts-head{ display: inline-block; color: inherit; }
.testimonials_homepage.ts-js .ts-head{ clip-path: inset(-.2em 100% -.2em -.2em); }
.testimonials_homepage.ts-js .testimoimg{ opacity: 0; }
.testimonials_homepage.ts-js .position-relative > p{ clip-path: inset(-.2em 100% -.2em -.2em); }
.testimonials_homepage.ts-js p.peoplereview{ opacity: 0; }
/* --- staggered reveal. Card delays are assigned by the script, and each card
carries a --ts-d custom property that the portrait, the nameplate and the
quote all offset from. */
.testimonials_homepage.ts-js.ts-in{ animation: tsSectionUp .8s ease-out both; }
.testimonials_homepage.ts-js.ts-in .ts-head{ animation: tsWipe .8s cubic-bezier(.22,.61,.36,1) .2s both; }
.testimonials_homepage.ts-js.ts-in h3 span.float-right{ animation: tsViewIn .5s ease-out .45s both; }
.testimonials_homepage.ts-js.ts-in .col-md-12{ animation: tsCardUp .7s cubic-bezier(.22,.61,.36,1) both; }
.testimonials_homepage.ts-js.ts-in .testimoimg{ animation: tsAvatarIn .7s cubic-bezier(.34,1.56,.64,1) calc(var(--ts-d, 0s) + .10s) both; }
.testimonials_homepage.ts-js.ts-in .position-relative > p{ animation: tsWipe .55s cubic-bezier(.22,.61,.36,1) calc(var(--ts-d, 0s) + .30s) both; }
.testimonials_homepage.ts-js.ts-in p.peoplereview{ animation: tsTextUp .55s ease calc(var(--ts-d, 0s) + .48s) both; }
/* the heartbeat breathes the portrait only — the quote never moves */
.testimonials_homepage .col-md-12.ts-idle .testimoimg{ animation: tsIdlePulse 1.3s ease-in-out; }
.testimonials_homepage .col-md-12.ts-idle:hover .testimoimg{ animation: none; }
/* --- "View All": underline grows from the left, text lifts */
.testimonials_homepage h3 span.float-right a{
position: relative; display: inline-block;
transition: transform .3s cubic-bezier(.22,.61,.36,1);
}
.testimonials_homepage h3 span.float-right a::after{
content: '';
position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
background: currentColor; /* takes the link's own colour */
transform: scaleX(0); transform-origin: left center;
transition: transform .3s cubic-bezier(.22,.61,.36,1);
}
.testimonials_homepage h3 span.float-right a:hover{ transform: translateY(-2px); text-decoration: none; }
.testimonials_homepage h3 span.float-right a:hover::after{ transform: scaleX(1); }
/* --- hover: the quote lifts a touch and the portrait gains a soft white ring.
No cursor change and no shadow on the card — there is nothing to click,
and a drop shadow would be invisible against the black panel anyway. */
.testimonials_homepage .col-md-12{ transition: transform .4s cubic-bezier(.22,.61,.36,1); }
.testimonials_homepage .col-md-12:hover{ transform: translateY(-4px); }
.testimonials_homepage .testimoimg{ transition: transform .4s cubic-bezier(.34,1.56,.64,1), box-shadow .4s ease; }
.testimonials_homepage .col-md-12:hover .testimoimg{
transform: scale(1.08);
box-shadow: 0 0 0 6px rgba(255,255,255,.10);
}
/* In slider mode the owl wrapper clips at its padding edge, which would slice
the lift and the portrait's ring off. The breathing room is cancelled out by
an equal negative margin, so everything renders in exactly the same place —
only the clip region grows. Horizontal clipping is untouched. */
.testimonials_homepage .owl-carousel .owl-wrapper-outer{ padding: 22px 0; margin: -22px 0; }
.testimonials_homepage .owl-carousel .owl-buttons{ margin-top: 22px; }
/* --- touch / small screens: drop the hover, keep the entrance */
@media (max-width: 767px), (hover: none){
.testimonials_homepage .col-md-12:hover{ transform: none; }
.testimonials_homepage .col-md-12:hover .testimoimg{ transform: none; box-shadow: none; }
}
/* respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce){
.testimonials_homepage,
.testimonials_homepage h3,
.testimonials_homepage h3 span.float-right,
.testimonials_homepage .col-md-12,
.testimonials_homepage .position-relative > p,
.testimonials_homepage p.peoplereview{ opacity: 1 !important; transform: none !important; clip-path: none !important; animation: none !important; transition: none !important; }
.testimonials_homepage .ts-head{ clip-path: none !important; animation: none !important; }
.testimonials_homepage .testimoimg,
.testimonials_homepage h3 span.float-right a{ opacity: 1 !important; transform: none !important; box-shadow: none !important; animation: none !important; transition: none !important; }
.testimonials_homepage h3 span.float-right a::after{ transform: scaleX(0) !important; transition: none !important; }
}
/* ===========================================================================
FAQ section (home) — entrance sequence + hover.
Animation-only and additive. A small self-contained script right after the
section toggles the reveal classes and drops them once the sequence
finishes. With JS off or reduced-motion on, the section renders exactly as
designed.
IMPORTANT: this is a Bootstrap collapse accordion. The `.collapse` element
itself is never touched — Bootstrap owns its height, and adding an opacity,
transform or animation to it would fight the open/close. Everything here
animates the card, the header, the chevron or the card-BODY instead, so the
accordion, its data-parent behaviour and the existing .active toggling in
js.php all keep working untouched.
The entrance rules key off .fq-js/.fq-in, added by each page's own script, so
the home section and the standalone FAQ page never trigger each other. The
hover/chevron rules originally targeted only the home section's
`.primary_section.faqsection`, since `.faqsection`, `#accordion`, `.faq-hover`
and `.hdng` are all shared with the standalone page too; that standalone page
now opts in with its own `.fq-hover-page` marker instead of widening the
original selector, so nothing about the home section's scoping changed.
=========================================================================== */
@keyframes fqSectionUp{ from{ opacity: 0; transform: translateY(30px); } to{ opacity: 1; transform: translateY(0); } }
@keyframes fqViewIn{ from{ opacity: 0; transform: translateX(26px); } to{ opacity: 1; transform: translateX(0); } }
@keyframes fqTextUp{ from{ opacity: 0; transform: translateY(14px); } to{ opacity: 1; transform: translateY(0); } }
/* Each question is drawn onto the page left-to-right while it slides in, the
way a list gets written down. The insets end NEGATIVE, so the clip sits
outside the card and can never trim an answer opened mid-entrance. */
@keyframes fqCardIn{
from{ opacity: 0; transform: translateX(-26px); clip-path: inset(-.3em 100% -.3em -.3em); }
to { opacity: 1; transform: translateX(0); clip-path: inset(-.3em -.3em -.3em -.3em); }
}
/* heading wipe. Negative end insets, so no glyph is ever shaved. */
@keyframes fqWipe{
from{ clip-path: inset(-.2em 100% -.2em -.2em); }
to { clip-path: inset(-.2em -.2em -.2em -.2em); }
}
/* the chevron spins into place, landing on whichever angle its own state wants */
@keyframes fqChev{
from{ opacity: 0; transform: rotate(calc(var(--fq-rot, 0deg) - 120deg)) scale(.3); }
to { opacity: 1; transform: rotate(var(--fq-rot, 0deg)) scale(1); }
}
/* an answer drops in and pulls into focus as its panel finishes opening */
@keyframes fqAnswerIn{
from{ opacity: 0; transform: translateY(-10px); filter: blur(5px); }
to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
/* --- pre-hide (only while the script drives the reveal) */
.faqsection.fq-js,
.faqsection.fq-js h3 span.float-right,
.faqsection.fq-js .col-md-12 > p,
.faqsection.fq-js .card{ opacity: 0; }
/* the standalone FAQ page has no "View All" to protect and no h3 — its h1 can be
clipped directly, with no need for the fq-head text-node-wrapping trick */
.faqsection.fq-js h1{ clip-path: inset(-.2em 100% -.2em -.2em); }
.faqsection.fq-js.fq-in h1{ animation: fqWipe .8s cubic-bezier(.22,.61,.36,1) .1s both; }
/* the script wraps the heading's own text node so the wipe misses "View All";
`color: inherit` stops the global `span` colour rule repainting the heading */
.faqsection .fq-head{ display: inline-block; color: inherit; }
.faqsection.fq-js .fq-head{ clip-path: inset(-.2em 100% -.2em -.2em); }
.faqsection.fq-js .hdng a::after{ opacity: 0; }
/* --- staggered reveal. Card delays are assigned by the script, and each card
carries a --fq-d custom property that its chevron offsets from. */
.faqsection.fq-js.fq-in{ animation: fqSectionUp .8s ease-out both; }
.faqsection.fq-js.fq-in .fq-head{ animation: fqWipe .8s cubic-bezier(.22,.61,.36,1) .2s both; }
.faqsection.fq-js.fq-in h3 span.float-right{ animation: fqViewIn .5s ease-out .45s both; }
.faqsection.fq-js.fq-in .col-md-12 > p{ animation: fqTextUp .6s ease .5s both; }
.faqsection.fq-js.fq-in .card{ animation: fqCardIn .6s cubic-bezier(.22,.61,.36,1) both; }
.faqsection.fq-js.fq-in .hdng a::after{ animation: fqChev .45s cubic-bezier(.34,1.56,.64,1) calc(var(--fq-d, 0s) + .18s) both; }
/* --- opening an answer: the copy drops in once the panel has finished
expanding. Bootstrap adds .show at the end of its height transition, so
this reads as the answer settling into the space just made for it.
Targets the card-BODY, never the .collapse wrapper Bootstrap animates. */
:is(.primary_section.faqsection, .faqsection.fq-hover-page) .collapse.show > .card-body{ animation: fqAnswerIn .45s ease both; }
/* --- "View All": underline grows from the left, text lifts */
.faqsection h3 span.float-right a{
position: relative; display: inline-block;
transition: transform .3s cubic-bezier(.22,.61,.36,1);
}
.faqsection h3 span.float-right a::after{
content: '';
position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
background: currentColor; /* takes the link's own colour */
transform: scaleX(0); transform-origin: left center;
transition: transform .3s cubic-bezier(.22,.61,.36,1);
}
.faqsection h3 span.float-right a:hover{ transform: translateY(-2px); text-decoration: none; }
.faqsection h3 span.float-right a:hover::after{ transform: scaleX(1); }
/* --- the chevron TURNS instead of swapping glyphs.
The theme uses two different FontAwesome characters for the two states —
\f077 pointing up when open, \f078 pointing down when closed — and a
content swap cannot animate, so the accordion's main moment had no motion
at all. Both states now use the down chevron and the open one is rotated
180deg: each rest position looks exactly as it did before, but the change
between them is a smooth turn. The angle lives on a custom property so the
entrance spin can land on whichever one its own row needs. */
:is(.primary_section.faqsection, .faqsection.fq-hover-page) #accordion .hdng a{ --fq-rot: -180deg; } /* open */
:is(.primary_section.faqsection, .faqsection.fq-hover-page) #accordion .hdng a.collapsed{ --fq-rot: 0deg; } /* closed */
:is(.primary_section.faqsection, .faqsection.fq-hover-page) #accordion .hdng a::after,
:is(.primary_section.faqsection, .faqsection.fq-hover-page) #accordion .hdng a.collapsed::after{
content: '\f078';
transform: rotate(var(--fq-rot, 0deg));
transition: transform .4s cubic-bezier(.34,1.56,.64,1);
}
/* --- header hover. The designed grey is untouched; it simply eases in now
instead of snapping. The question slides to meet the cursor and the
chevron swells, hinting that the row is about to move. */
:is(.primary_section.faqsection, .faqsection.fq-hover-page) .card-header.faq-hover{ transition: background-color .3s ease; }
:is(.primary_section.faqsection, .faqsection.fq-hover-page) .hdng{ transition: transform .35s cubic-bezier(.22,.61,.36,1); }
:is(.primary_section.faqsection, .faqsection.fq-hover-page) .card-header:hover .hdng{ transform: translateX(6px); }
/* #accordion is carried through here so this outranks the ID-bearing base rule */
:is(.primary_section.faqsection, .faqsection.fq-hover-page) #accordion .card-header:hover .hdng a::after{
transform: rotate(var(--fq-rot, 0deg)) scale(1.25);
}
/* hovering a CLOSED question tips its chevron part-way round, previewing the
turn it is about to make — the row tells you what clicking will do */
:is(.primary_section.faqsection, .faqsection.fq-hover-page) #accordion .card-header:hover .hdng a.collapsed::after{
transform: rotate(-32deg) scale(1.25);
}
/* respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce){
.faqsection,
.faqsection h3,
.faqsection h3 span.float-right,
.faqsection .col-md-12 > p,
.faqsection .card,
.faqsection .hdng{ opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
.faqsection .fq-head,
.faqsection h1{ clip-path: none !important; opacity: 1 !important; animation: none !important; }
.faqsection .card{ clip-path: none !important; }
/* the original two-glyph chevron is restored, so with motion off the open and
closed states still read correctly without relying on a rotation */
:is(.primary_section.faqsection, .faqsection.fq-hover-page) #accordion .hdng a::after{ content: '\f077' !important; }
:is(.primary_section.faqsection, .faqsection.fq-hover-page) #accordion .hdng a.collapsed::after{ content: '\f078' !important; }
.faqsection .hdng a::after{ opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
:is(.primary_section.faqsection, .faqsection.fq-hover-page) .collapse.show > .card-body{ animation: none !important; filter: none !important; }
:is(.primary_section.faqsection, .faqsection.fq-hover-page) .card-header.faq-hover{ transition: none !important; }
.faqsection h3 span.float-right a{ transform: none !important; transition: none !important; }
.faqsection h3 span.float-right a::after{ transform: scaleX(0) !important; transition: none !important; }
}
/* ===========================================================================
Awards section (home) — entrance sequence + artwork hover.
Animation-only and additive, same pattern as the other card sections. With
JS off or reduced-motion on, the section renders exactly as designed.
The gesture here is a SPOTLIGHT: each award opens out of a circle, the way a
light widens onto a trophy. Nothing else on the page uses a circular clip, so
the section reads as its own thing. The hover gleam is narrower, brighter and
faster than the soft reflections on Blogs / News / Press Release, so it reads
as light catching metal rather than a passing sheen.
Scoped to .awards_homepage throughout: `.post` and `.post-img` are shared
with News, and this section even carries the `news` class itself.
=========================================================================== */
@keyframes awSectionUp{ from{ opacity: 0; transform: translateY(30px); } to{ opacity: 1; transform: translateY(0); } }
@keyframes awViewIn{ from{ opacity: 0; transform: translateX(26px); } to{ opacity: 1; transform: translateX(0); } }
@keyframes awCardUp{ from{ opacity: 0; transform: translateY(35px); } to{ opacity: 1; transform: translateY(0); } }
/* heading + date wipes. Negative end insets, so no glyph is ever shaved. */
@keyframes awWipe{
from{ clip-path: inset(-.2em 100% -.2em -.2em); }
to { clip-path: inset(-.2em -.2em -.2em -.2em); }
}
/* The spotlight opens. 85% is past the 70.7% a circle needs to clear the corners
of ANY rectangle, so whatever the image's aspect ratio nothing is clipped at
rest — and unlike the `farthest-corner` keyword, a percentage interpolates. */
@keyframes awIris{
from{ opacity: 0; clip-path: circle(0% at 50% 50%); transform: scale(1.08); }
to { opacity: 1; clip-path: circle(85% at 50% 50%); transform: scale(1); }
}
@keyframes awTextUp{ from{ opacity: 0; transform: translateY(12px); } to{ opacity: 1; transform: translateY(0); } }
/* a narrow, quick glint rather than a soft reflection */
@keyframes awGleam{
0% { opacity: 0; transform: translateX(-140%) skewX(-22deg); }
10% { opacity: 1; }
90% { opacity: 1; }
100%{ opacity: 0; transform: translateX(340%) skewX(-22deg); }
}
@keyframes awIdlePulse{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-2px); } }
/* --- pre-hide (only while the script drives the reveal) */
.awards_homepage.aw-js,
.awards_homepage.aw-js h3 span.float-right,
.awards_homepage.aw-js .post{ opacity: 0; }
.awards_homepage .aw-head{ display: inline-block; color: inherit; }
.awards_homepage.aw-js .aw-head{ clip-path: inset(-.2em 100% -.2em -.2em); }
.awards_homepage.aw-js .post-img img{ clip-path: circle(0% at 50% 50%); }
.awards_homepage.aw-js .post p.fw-600{ clip-path: inset(-.2em 100% -.2em -.2em); }
.awards_homepage.aw-js .post p.awardtitle,
.awards_homepage.aw-js .post .btn.btnthird{ opacity: 0; }
/* --- staggered reveal; each card carries an --aw-d the inner beats offset from */
.awards_homepage.aw-js.aw-in{ animation: awSectionUp .8s ease-out both; }
.awards_homepage.aw-js.aw-in .aw-head{ animation: awWipe .8s cubic-bezier(.22,.61,.36,1) .2s both; }
.awards_homepage.aw-js.aw-in h3 span.float-right{ animation: awViewIn .5s ease-out .45s both; }
.awards_homepage.aw-js.aw-in .post{ animation: awCardUp .7s cubic-bezier(.22,.61,.36,1) both; }
.awards_homepage.aw-js.aw-in .post-img img{ animation: awIris .85s cubic-bezier(.22,.61,.36,1) calc(var(--aw-d, 0s) + .10s) both; }
.awards_homepage.aw-js.aw-in .post p.fw-600{ animation: awWipe .55s cubic-bezier(.22,.61,.36,1) calc(var(--aw-d, 0s) + .34s) both; }
.awards_homepage.aw-js.aw-in .post p.awardtitle{ animation: awTextUp .5s ease calc(var(--aw-d, 0s) + .48s) both; }
.awards_homepage.aw-js.aw-in .post .btn.btnthird{ animation: awTextUp .5s ease calc(var(--aw-d, 0s) + .62s) both; }
/* the heartbeat breathes the artwork only — the caption below never moves */
.awards_homepage .post.aw-idle .post-img img{ animation: awIdlePulse 1.2s ease-in-out; }
.awards_homepage .post.aw-idle .post-img:hover img{ animation: none; }
/* --- "View All": underline grows from the left, text lifts */
.awards_homepage h3 span.float-right a{
position: relative; display: inline-block;
transition: transform .3s cubic-bezier(.22,.61,.36,1);
}
.awards_homepage h3 span.float-right a::after{
content: '';
position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
background: currentColor; /* takes the link's own colour */
transform: scaleX(0); transform-origin: left center;
transition: transform .3s cubic-bezier(.22,.61,.36,1);
}
.awards_homepage h3 span.float-right a:hover{ transform: translateY(-2px); text-decoration: none; }
.awards_homepage h3 span.float-right a:hover::after{ transform: scaleX(1); }
/* --- the artwork carries the motion hover; the glint crosses it once */
.awards_homepage .post-img{ position: relative; overflow: hidden; cursor: pointer; }
.awards_homepage .post-img img{
transition: transform .55s cubic-bezier(.22,.61,.36,1), filter .55s ease;
will-change: transform;
}
.awards_homepage .post-img:hover img{
transform: translateY(-5px) scale(1.04);
filter: brightness(1.05) contrast(1.03);
}
.awards_homepage .post-img::after{
content: '';
position: absolute; top: 0; left: 0; z-index: 2;
width: 22%; height: 100%;
background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.35), rgba(255,255,255,0));
opacity: 0; pointer-events: none;
}
.awards_homepage .post-img:hover::after{ animation: awGleam .8s cubic-bezier(.4,0,.2,1); }
/* the section's own designed title-colour hover is untouched — it just eases now */
.awards_homepage .post p.awardtitle{ transition: color .3s ease; }
/* --- touch / small screens: drop the lift and the glint, keep the entrance */
@media (max-width: 767px), (hover: none){
.awards_homepage .post-img:hover img{ transform: none; filter: none; }
.awards_homepage .post-img:hover::after{ animation: none; }
}
/* respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce){
.awards_homepage,
.awards_homepage h3,
.awards_homepage h3 span.float-right,
.awards_homepage .post{ opacity: 1 !important; transform: none !important; animation: none !important; }
.awards_homepage .aw-head{ clip-path: none !important; animation: none !important; }
.awards_homepage .post-img img,
.awards_homepage .post p.fw-600,
.awards_homepage .post p.awardtitle,
.awards_homepage .post .btn.btnthird,
.awards_homepage h3 span.float-right a{ opacity: 1 !important; clip-path: none !important; transform: none !important; filter: none !important; animation: none !important; transition: none !important; }
.awards_homepage .post-img::after{ opacity: 0 !important; animation: none !important; }
.awards_homepage h3 span.float-right a::after{ transform: scaleX(0) !important; transition: none !important; }
}
/* ===========================================================================
Vision / Mission section (home) — entrance sequence + hover.
Animation-only and additive. With JS off or reduced-motion on, the section
renders exactly as designed.
The gesture is literal: the picture COMES INTO FOCUS, resolving out of a
blur as its heading is uncovered and the copy rises beside it. For a section
headed "Vision" that felt like the one idea worth building the whole thing on.
Two structural notes. This section has no heading row and no "View All", so
there is nothing to wipe at section level — it is card choreography only. And
the picture is `position: sticky`: a transform on ANY ancestor, or an
`overflow: hidden` on one, would break that. So the card wrapper is never
transformed and .vmimg never gets an overflow — only the image itself and the
text column are animated.
Scoped to `.vm`, which appears nowhere else in the theme.
=========================================================================== */
@keyframes vmSectionUp{ from{ opacity: 0; transform: translateY(30px); } to{ opacity: 1; transform: translateY(0); } }
/* the picture resolves out of a blur — the section's whole idea in one keyframe */
@keyframes vmFocus{
from{ opacity: 0; filter: blur(12px); transform: scale(1.06); }
to { opacity: 1; filter: blur(0); transform: scale(1); }
}
@keyframes vmWipe{
from{ clip-path: inset(-.2em 100% -.2em -.2em); }
to { clip-path: inset(-.2em -.2em -.2em -.2em); }
}
@keyframes vmTextUp{ from{ opacity: 0; transform: translateY(16px); } to{ opacity: 1; transform: translateY(0); } }
/* --- pre-hide. Note the card wrapper (.col-md-12) is deliberately absent: a
transform on it would become the containing block for the sticky picture
inside and stop it sticking. */
.vm.vm-js{ opacity: 0; }
.vm.vm-js .vmimg img{ opacity: 0; }
.vm.vm-js .vision-mission-card h3{ clip-path: inset(-.2em 100% -.2em -.2em); }
.vm.vm-js .vision-mission-card > *:not(h3){ opacity: 0; }
/* --- staggered reveal; each card carries a --vm-d the inner beats offset from */
.vm.vm-js.vm-in{ animation: vmSectionUp .8s ease-out both; }
.vm.vm-js.vm-in .vmimg img{ animation: vmFocus .95s cubic-bezier(.22,.61,.36,1) calc(var(--vm-d, 0s) + .10s) both; }
.vm.vm-js.vm-in .vision-mission-card h3{ animation: vmWipe .7s cubic-bezier(.22,.61,.36,1) calc(var(--vm-d, 0s) + .30s) both; }
/* the copy is editor HTML, so whatever elements it produces are staggered */
.vm.vm-js.vm-in .vision-mission-card > *:not(h3){ animation: vmTextUp .55s ease calc(var(--vm-d, 0s) + .45s) both; }
.vm.vm-js.vm-in .vision-mission-card > *:nth-child(3){ animation-delay: calc(var(--vm-d, 0s) + .56s); }
.vm.vm-js.vm-in .vision-mission-card > *:nth-child(4){ animation-delay: calc(var(--vm-d, 0s) + .67s); }
.vm.vm-js.vm-in .vision-mission-card > *:nth-child(n+5){ animation-delay: calc(var(--vm-d, 0s) + .78s); }
/* --- hover. The shared `.vm .vmimg:hover img` zoom is kept and enriched; this
rule has identical specificity and simply sits later in the file. */
.vm .vmimg img{ transition: transform .5s cubic-bezier(.22,.61,.36,1), filter .5s ease; }
.vm .vmimg:hover img{ transform: scale(1.05); filter: brightness(1.04) contrast(1.03); }
.vm .vision-mission-card h3{ transition: transform .35s cubic-bezier(.22,.61,.36,1); }
.vm .vision-mission-card:hover h3{ transform: translateX(5px); }
/* --- touch / small screens: drop the hover, keep the entrance */
@media (max-width: 767px), (hover: none){
.vm .vmimg:hover img{ transform: none; filter: none; }
.vm .vision-mission-card:hover h3{ transform: none; }
}
/* respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce){
.vm,
.vm .vmimg img,
.vm .vision-mission-card h3,
.vm .vision-mission-card > *{ opacity: 1 !important; clip-path: none !important; transform: none !important; filter: none !important; animation: none !important; transition: none !important; }
}
/* ===========================================================================
Services section (home) — entrance sequence + hover.
Animation-only and additive. With JS off or reduced-motion on, the section
renders exactly as designed.
SCOPING NOTE: this section is `