/*
* Site shell — header, mobile nav drawer, footer. DESIGN.md §14–15.
* Structural layout only; color/spacing tokens come from tokens.css,
* interactive states from components.css, scroll/reveal motion from
* motion.css. (The one transition declared here is the sticky-header
* size change, because the properties it animates are the chrome sizing
* tokens defined in this file and nowhere else.)
*
* The header bar and footer panels measure ~94% of the canvas
* (--eqc-chrome-*), wider than the narrower content column.
*/
/* ---------- Shared chrome frame ---------- */
/*
* Full-bleed-ish frame for the header bar and footer panels. Overrides
* .eqc-container's content max-width and drops its inline padding — here
* the container box *is* the painted panel, so the inset belongs to the
* panel's own padding instead.
*/
.eqc-container--chrome {
width: min(var(--eqc-chrome-width), calc(100% - 2 * var(--eqc-gutter)));
max-width: var(--eqc-chrome-max);
padding-inline: 0;
}
/* ---------- Header ---------- */
.eqc-header {
position: sticky;
top: 0;
z-index: 100;
/* Transparent at rest so the page ground (this same cream) shows straight
through behind the floating nav pill. The scrolled state restores an
opaque ground so content never shows through behind the pill. */
background: transparent;
padding-block: clamp(0.45rem, 0.2rem + 0.85vw, 1.3rem);
}
.eqc-header.is-scrolled {
background: var(--eqc-cream-100);
/* Above the hero's own z-index:0 photo panel and any other in-flow page
content once the bar takes an opaque ground, so nothing scrolling
underneath ever shows through it. The .is-scrolled class is toggled at
scrollY > 8 in eqc.js. */
z-index: 200;
}
.eqc-header-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: clamp(0.75rem, 1.4vw, 2.5rem);
min-height: var(--eqc-header-h);
background: var(--eqc-white);
border: 1px solid var(--eqc-border);
border-radius: var(--eqc-radius-pill);
padding-block: 0.5rem;
padding-inline: clamp(1rem, 0.2rem + 3.6vw, 4.5rem);
box-shadow: var(--eqc-shadow-card);
}
/*
* Sticky-header compaction. The reference is a static mock-up, so it says
* nothing about scrolled state — and its full 150px bar would eat a third
* of a laptop viewport on every scroll. Shrinking the chrome tokens keeps
* the reference's presence at the top of the page while honouring
* DESIGN.md §14 ("sticky state must preserve viewport space").
*/
.eqc-header.is-scrolled {
--eqc-header-h: clamp(48px, 26px + 1.9vw, 64px);
--eqc-logo-mark-size: clamp(30px, 17px + 1.6vw, 46px);
padding-block: clamp(0.3rem, 0.15rem + 0.4vw, 0.6rem);
}
.eqc-header,
.eqc-header-bar,
.eqc-logo-mark {
transition: min-height var(--eqc-motion-base) var(--eqc-ease-standard),
height var(--eqc-motion-base) var(--eqc-ease-standard),
padding-block var(--eqc-motion-base) var(--eqc-ease-standard);
}
/* ---------- Logo lockup ---------- */
/* Vector mark + two lines of live text (eqc_logo_lockup() in
inc/template-tags.php): "EASY QURAN" over a letterspaced "CLASSES"
between two gold rules, as both the header and the footer draw it in
the reference. The mark inherits `color`, so one asset serves the
header, the footer column and the copyright medallion. */
.eqc-logo { display: flex; align-items: center; min-width: 0; }
.eqc-logo-link {
--eqc-logo-sub-color: var(--eqc-heading);
display: flex;
align-items: center;
gap: clamp(0.5rem, 0.2rem + 0.8vw, 1rem);
min-width: 0;
text-decoration: none;
color: var(--eqc-heading);
}
.eqc-logo-mark {
height: var(--eqc-logo-mark-size);
width: auto;
flex: none;
color: var(--eqc-green-800);
}
/* One font-size drives the whole wordmark, derived from the mark height so
the lockup keeps its proportions at every viewport. */
.eqc-logo-lockup {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0.24em;
min-width: 0;
font-size: max(15px, calc(var(--eqc-logo-mark-size) * 0.36));
}
.eqc-logo-name {
font-family: var(--eqc-font-display);
font-size: 1em;
line-height: 1;
letter-spacing: 0.01em;
text-transform: uppercase;
white-space: nowrap;
color: var(--eqc-heading);
}
/* The rules flex to fill whatever the tracked word leaves, so the second
line always measures exactly as wide as the first. */
.eqc-logo-sub {
display: flex;
align-items: center;
gap: 0.55em;
font-size: max(11px, 0.34em);
}
.eqc-logo-rule {
flex: 1 1 0;
min-width: 1.4em;
height: 1px;
background: var(--eqc-gold-500);
}
.eqc-logo-sub-text {
font-family: var(--eqc-font-body);
font-weight: 600;
font-size: 1em;
line-height: 1;
text-transform: uppercase;
white-space: nowrap;
color: var(--eqc-logo-sub-color);
/* letter-spacing also adds a trailing gap after the last letter; the
matching indent re-centres the word between its two rules. */
letter-spacing: 0.62em;
text-indent: 0.62em;
}
/* ---------- Primary navigation ---------- */
.eqc-nav-list {
display: none;
list-style: none;
margin: 0;
padding: 0;
gap: clamp(1rem, 0.4rem + 1.9vw, 2.9rem);
align-items: center;
}
.eqc-nav-list a {
text-decoration: none;
color: var(--eqc-heading);
font-weight: 600;
font-size: clamp(0.95rem, 0.75rem + 0.5vw, 1.3rem);
position: relative;
padding-block: 0.4em;
/* Two-word items ("About Us", "Contact Us") must never break onto a
second line — that silently doubles the item's height and throws off
the whole row's vertical centring. If the row is ever too tight for
this, the fix is the sizing at the breakpoint below, not a mid-word
wrap here. */
white-space: nowrap;
}
.eqc-nav-list a::after {
content: '';
position: absolute;
left: 0;
bottom: -0.35em;
width: 100%;
height: 3px;
border-radius: 2px;
background: var(--eqc-bronze-600);
transform: scaleX(0);
transform-origin: left;
transition: transform var(--eqc-motion-base) var(--eqc-ease-standard);
}
.eqc-nav-list a:hover::after,
.eqc-nav-list .current-menu-item > a::after,
.eqc-nav-list .current_page_item > a::after { transform: scaleX(1); }
.eqc-nav-list .current-menu-item > a,
.eqc-nav-list .current_page_item > a { color: var(--eqc-bronze-700); }
/* Courses dropdown. No custom Walker needed — WordPress's default menu
walker already emits `menu-item-has-children` + a nested `ul.sub-menu`
for a parent with children; this is pure CSS/JS against that shape. */
.eqc-nav-list > li { position: relative; }
/* Transparent hover bridge across the gap between the pill and the panel —
without it the pointer leaves the on the way down and :hover unsets
mid-travel. */
.eqc-nav-list > .menu-item-has-children::after {
content: '';
position: absolute;
inset-inline: 0;
top: 100%;
height: 1.1rem;
}
.eqc-nav-sub-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
background: none;
border: none;
padding: 0.2rem;
margin-inline-start: 0.2rem;
cursor: pointer;
color: inherit;
vertical-align: middle;
}
.eqc-nav-sub-toggle::before {
content: '';
display: block;
width: 0.4em;
height: 0.4em;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg);
transition: transform var(--eqc-motion-base) var(--eqc-ease-standard);
}
/* The chevron button measures 13x13 on a desktop header -- the smallest
control on the site, and below even the 24x24 WCAG 2.5.8 AA floor. The
glyph itself must stay 13px (it is a caret, not a button face), so the HIT
AREA is expanded instead. ::before is already the chevron, so this is
::after -- two classes cannot share one pseudo-element.
Height grows to the full 44px nav row, which is free. Width deliberately
does NOT: the adjacent nav link already carries its own full-width 44px
hit area (.eqc-nav-list a::before), so a 44px-wide target here would
OVERLAP it, and two overlapping targets are their own 2.5.8 failure. 24px
clears the AA floor without reaching the link beside it. */
.eqc-nav-sub-toggle { position: relative; }
.eqc-nav-sub-toggle::after {
content: '';
position: absolute;
inset: 50% auto auto 50%;
translate: -50% -50%;
width: max(100%, 24px);
height: 44px;
}
.menu-item-has-children.is-open > .eqc-nav-sub-toggle::before,
.eqc-nav-list > .menu-item-has-children:hover > .eqc-nav-sub-toggle::before { transform: rotate(225deg); }
.eqc-nav-list .sub-menu {
position: absolute;
top: calc(100% + 1.1rem);
left: 50%;
translate: -50% 0;
z-index: 3;
min-width: 15rem;
margin: 0;
padding: 0.5rem 0;
list-style: none;
background: var(--eqc-white);
border: 1px solid var(--eqc-border);
border-radius: var(--eqc-radius-card);
box-shadow: var(--eqc-shadow-card);
opacity: 0;
visibility: hidden;
transition: opacity var(--eqc-motion-base) var(--eqc-ease-standard),
visibility var(--eqc-motion-base) var(--eqc-ease-standard);
}
.eqc-nav-list .sub-menu li { margin: 0; }
.eqc-nav-list .sub-menu a {
display: block;
padding: 0.6rem 1.1rem;
white-space: nowrap;
font-size: clamp(0.9rem, 0.8rem + 0.2vw, 1.05rem);
color: var(--eqc-heading);
}
.eqc-nav-list .sub-menu a::after { display: none; }
.eqc-nav-list .sub-menu a:hover,
.eqc-nav-list .sub-menu a:focus-visible { background: var(--eqc-cream-100); }
/* Real pointers only — on touch, :hover fires on the tap that is ALSO a
navigation, flashing the panel open on the way to /courses/. Touch users
open it with the chevron toggle instead. */
@media (hover: hover) and (pointer: fine) {
.eqc-nav-list > .menu-item-has-children:hover > .sub-menu { opacity: 1; visibility: visible; }
}
.eqc-nav-list > .menu-item-has-children:focus-within > .sub-menu,
.eqc-nav-list > .menu-item-has-children.is-open > .sub-menu { opacity: 1; visibility: visible; }
/* Keep "Courses" visually active while browsing any of its course pages. */
.eqc-nav-list .current-menu-ancestor > a::after,
.eqc-nav-list .current-menu-parent > a::after { transform: scaleX(1); }
/* Never add `overflow: hidden` to .eqc-header-bar — it would clip this
dropdown, which is positioned absolutely against the header pill. */
.eqc-header:has(.eqc-nav-list > .menu-item-has-children:hover),
.eqc-header:has(.eqc-nav-list > .menu-item-has-children:focus-within),
.eqc-header:has(.eqc-nav-list > .menu-item-has-children.is-open) {
/* Matches .eqc-header.is-scrolled's z-index: an open dropdown must win
over in-flow page content (the hero's photo panel included) the same
way the scrolled header does. */
z-index: 200;
}
/* ---------- Header actions ---------- */
.eqc-header-actions { display: flex; align-items: center; gap: 0.6rem; flex: none; }
/* Two CTAs (Free Trial, Call Us) share the header-actions slot, side by
side by default, sized close to the original single-pill CTA. Only in
the 1200-1440px band, where the 8-item nav is already tight, do they
switch to a compact stacked pair so the nav still fits on one line —
see the scoped override below. */
.eqc-header-cta-stack {
display: flex;
flex-direction: row;
gap: 0.5rem;
flex: none;
}
/* Element-qualified throughout: components.css deliberately writes its
button rules as `a.eqc-btn` (0,1,1), so a bare `.eqc-header-cta` (0,1,0)
loses — including the `display` reset, which is why the pill used to
overlap the logo on a 390px screen instead of staying in the drawer. */
a.eqc-header-cta {
display: none;
--_h: clamp(38px, 16px + 1.8vw, 50px);
/* The bar's own width budget decides these, not the site-wide button
floor — the nav shares the row with them, and at the floor the logo
collided with the first nav item. */
min-inline-size: 0;
padding-inline: clamp(0.8rem, 0.3rem + 1vw, 1.4rem);
font-size: clamp(12px, 0.35rem + 0.5vw, 15px);
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
gap: 0.4em;
}
/* The pill is 38-42px tall from 768 to 1440 -- just under the 44px floor.
Its height cannot simply be raised: --_h is clamped to the header bar's
own budget (see above), and growing it makes the whole bar taller on a
tablet. The hit area is expanded downward instead, which costs no layout.
Only the height needs it; these pills are 121-140px wide, and they sit
side by side in a row, so growing them vertically cannot overlap a
neighbour the way growing them horizontally would. */
a.eqc-header-cta { position: relative; }
a.eqc-header-cta::after {
content: '';
position: absolute;
inset: 50% auto auto 50%;
translate: -50% -50%;
width: 100%;
height: max(100%, 44px);
}
/* The reference's gift sits at ~0.55 of the pill height; keying it to the
pill rather than the label keeps that ratio as the bar scales. */
a.eqc-header-cta .eqc-icon {
width: calc(var(--_h) * 0.46);
height: calc(var(--_h) * 0.46);
}
/* Buttons stay full-size and side by side across the whole 1200-1920px
band; the nav-list gap/font reduction just below is what keeps the
8-item nav on one line instead. */
.eqc-nav-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
border: 1px solid var(--eqc-border-strong);
background: var(--eqc-cream-50);
color: var(--eqc-heading);
cursor: pointer;
flex: none;
}
.eqc-nav-toggle .eqc-icon { width: 1.35em; height: 1.35em; }
.eqc-nav-toggle .eqc-icon-close { display: none; }
.eqc-nav-toggle[aria-expanded="true"] .eqc-icon-open { display: none; }
.eqc-nav-toggle[aria-expanded="true"] .eqc-icon-close { display: block; }
/* The conversion CTA returns to the bar as soon as the logo lockup, the
pill and the menu button fit without crowding — measured: comfortable
from 480px, out of room by 430px. Below this it lives in the drawer
only, per DESIGN.md §14. */
@media (min-width: 30rem) {
a.eqc-header-cta { display: inline-flex; }
}
/* Content-driven breakpoint: once there is room for the full nav + CTA
without crowding, switch from the drawer to the inline desktop layout.
80rem: the header CTAs stay full-size rather than shrinking to a compact
stack (see a.eqc-header-cta above), so the 8-item nav + dropdown + two
full-size CTAs need this much room before switching — at 75rem, "About
Us"/"Contact Us" wrap to two lines each. Kept in sync with the matching
switch below and with DESKTOP_MQ in eqc.js — all three must move
together. */
@media (min-width: 80rem) {
.eqc-nav-list { display: flex; }
.eqc-nav-toggle { display: none; }
/* A `justify-content: space-between` row of 3 items puts the nav
mid-way rather than next to the actions. This pushes all free space
to the nav's leading edge instead, so the nav and the CTA stack pack
together against the right edge with only the bar's own `gap`
between them, leaving the logo alone on the left. */
.eqc-nav-desktop { margin-inline-start: auto; }
}
/* The base fluid clamp() on .eqc-nav-list/.eqc-nav-list a only has room from
~120rem (1920px) up, once the header CTAs are back to full side-by-side
size — at 1440px with the bigger CTAs, "About Us"/"Contact Us" wrapped
again. Scoped to this band only, so the 120rem+ look is untouched. Sizes
are larger here now that the right-alignment above frees the space the
old centred layout was wasting either side of the list. */
@media (min-width: 80rem) and (max-width: 119.99rem) {
/* Anchored so the floor (1280px, the breakpoint itself, where the
available envelope is tightest — measured live at ~607px with the
logo/CTA pair this band carries) leaves a safety margin against the
8-item nav's true content width (~580px, `white-space: nowrap` above
makes any shortfall overflow rather than silently wrap), and the
ceiling (1920px) approaches the base fluid clamp() below without a
visible jump at the 120rem seam. */
.eqc-nav-list { gap: clamp(0.94rem, -0.69rem + 2.03vw, 1.75rem); }
.eqc-nav-list a { font-size: clamp(0.95rem, 0.45rem + 0.625vw, 1.2rem); }
}
/* ---------- Mobile nav drawer ---------- */
/* z-index 300/301, clearly above the scrolled header's z-index: 200 (set
above at .eqc-header.is-scrolled). That 200 must stay — it exists so the
bar repaints above the hero arch while scrolling — so the scrim/drawer
are raised instead. Bug this fixes: once the page was scrolled, the
opaque is-scrolled header (200) painted OVER the scrim (150) and drawer
(151), sitting right on top of .eqc-nav-close and swallowing its click.
Confirmed with a Playwright repro that scrolls past 8px, opens the
drawer, then finds the close button unclickable. */
.eqc-nav-scrim {
position: fixed;
inset: 0;
background: rgba(20, 35, 27, 0.45);
z-index: 300;
}
.eqc-nav-drawer {
position: fixed;
top: 0;
right: 0;
width: min(320px, 86vw);
/* No `bottom: 0` — the panel sizes to its content (client request: end
just below the last button) instead of always spanning the full
viewport. This cap is the safety net: 100dvh, not vh, because mobile
browser chrome changes vh as it collapses, and there is no top offset
to subtract since `top: 0` above. overflow-y: auto below still scrolls
a menu long enough to hit the cap. */
max-block-size: 75vh;
max-block-size: 75dvh;
background: var(--eqc-surface);
z-index: 301;
padding: clamp(4.5rem, 8vh, 6rem) 1.5rem 2rem;
display: flex;
flex-direction: column;
gap: 1.5rem;
overflow-y: auto;
/* The shadow belongs to the OPEN drawer only. Closed, the panel is parked
just past the right edge (motion.css translateX(100%)), but a -12px/32px
shadow still reached ~44px back into the viewport and drew a grey band
down the right edge of every phone page (client, 2026-09-23, read as a
"line" beside the hero photo). */
box-shadow: none;
/* Bottom-left corner is now visible against the page instead of running
off the viewport edge; the right corners still aren't (flush against
`right: 0`). Reuses the existing panel radius token. */
border-end-start-radius: var(--eqc-radius-panel);
}
/* Flex items default to flex-shrink:1, so opening the Courses accordion
(which adds ~270px of content) compresses EVERY child — including the
Free Trial/Call Us buttons — to squeeze into the fixed 100vh drawer,
instead of the drawer's own `overflow-y: auto` kicking in to scroll.
Prevent any direct child from shrinking so genuine overflow scrolls
normally. */
.eqc-nav-drawer > * { flex-shrink: 0; }
/* Close control inside the overlay itself — the header toggle that opened
the drawer sits behind the scrim and is made inert while it is open. */
.eqc-nav-close {
position: absolute;
top: 1rem;
right: 1rem;
width: 44px;
height: 44px;
border-radius: 50%;
border: 1px solid var(--eqc-border-strong);
background: var(--eqc-cream-50);
color: var(--eqc-heading);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.eqc-nav-close .eqc-icon { width: 1.35em; height: 1.35em; }
.eqc-nav-drawer-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.eqc-nav-drawer-list a {
display: block;
padding: 0.85em 0.25em;
text-decoration: none;
color: var(--eqc-heading);
font-weight: 600;
font-size: 1.05rem;
border-bottom: 1px solid var(--eqc-border);
}
.eqc-nav-drawer-list .current-menu-item > a,
.eqc-nav-drawer-list .current_page_item > a { color: var(--eqc-bronze-700); }
/* Courses accordion in the drawer. `display: none` (not opacity/max-height)
is required: the drawer's own focus trap in eqc.js filters focusable
candidates by `offsetParent !== null`, and only `display:none` removes a
collapsed submenu's links from that check for free.
The toggle button is inserted as the LINK's sibling (afterend), not
inside it — so the flex row has to be on the , not the . Putting
`display:flex` on the alone flexes its own (empty) inline content
and does nothing for the sibling relationship, leaving the toggle to
drop onto its own line below "Courses". */
/* The holds THREE children: the link, the toggle button, and the
.sub-menu — all three are direct children of the same , not just
the link+toggle. A plain `display:flex` (row, no wrap) on the would
lay all three out side by side, squeezing .sub-menu into a narrow column
to the RIGHT of "Courses" instead of dropping below it (confirmed via
getBoundingClientRect: sub-menu would render at the link's own x-offset,
beside it, not underneath). Fix: `flex-wrap: wrap` on the plus
`flex-basis: 100%` on .sub-menu forces it onto its own full-width row
once the link+toggle have filled the first row — the standard flexbox
"wrap to new line" pattern. */
.eqc-nav-drawer-list > .menu-item-has-children {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid var(--eqc-border);
}
.eqc-nav-drawer-list > .menu-item-has-children > a {
flex: 1 1 auto;
border-bottom: none;
}
.eqc-nav-drawer-list .eqc-nav-sub-toggle {
min-width: 2.5rem;
min-height: 2.5rem;
flex: none;
}
.eqc-nav-drawer-list > .menu-item-has-children > .sub-menu {
flex: 1 1 100%;
display: none;
list-style: none;
margin: 0;
padding: 0 0 0 1.1rem;
}
.eqc-nav-drawer-list .sub-menu a {
font-size: 0.95rem;
font-weight: 500;
padding-block: 0.65em;
}
.eqc-nav-drawer-list > .menu-item-has-children.is-open > .sub-menu { display: block; }
/* The drawer's own Free Trial/Call Us pair inherits the base .eqc-btn size
(58u tall, generous padding), which reads oversized and disconnected
next to the drawer's plain-text menu items just above it. Scale them
down to sit closer to the menu's own type size.
Selector matches `a.eqc-btn`'s own element+class specificity (0,1,1) and
adds a class on top (0,2,1), so it reliably wins regardless of source
order — a bare `.eqc-nav-drawer-cta` (0,1,0) was losing to `a.eqc-btn`
and never actually applied (confirmed via computed style: --_h still
read the base formula, not this override). */
a.eqc-nav-drawer-cta {
--_h: 2.5rem;
min-inline-size: 0;
padding-inline: 1.1rem;
font-size: 1rem;
}
@media (min-width: 80rem) {
.eqc-nav-scrim, .eqc-nav-drawer { display: none; }
}
/* ---------- Footer shell ---------- */
/* Tight block padding; the full between-sections rhythm
(var(--eqc-section-space)) is far more than this panel needs. */
.eqc-footer {
background: var(--eqc-cream-100);
padding-block: clamp(2rem, 1.4rem + 2.4vw, 4rem) clamp(1.25rem, 0.9rem + 1.2vw, 2.25rem);
}
/* ---------- Final CTA panel ---------- */
.eqc-footer-cta {
background: var(--eqc-green-900);
color: var(--eqc-cream-100);
border-radius: var(--eqc-radius-chrome);
padding: clamp(1.75rem, 0.9rem + 2.6vw, 4.25rem);
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: clamp(1.5rem, 1rem + 2vw, 3.5rem);
margin-bottom: clamp(0.9rem, 0.6rem + 0.7vw, 1.5rem);
position: relative;
overflow: hidden;
}
/* Darker, more golden and a touch wider so the girih watermark actually
reads on the deep green. */
/* Gold girih lattice over the dark green, fading out to the left. Cropping
it to a narrower band gives the pattern a hard vertical edge mid-panel, so
it spans the full width instead, with the LATTICE mask intersected against
a horizontal gradient so the texture dissolves smoothly into the green
rather than stopping abruptly. Same two-layer mask-composite technique as
components.css .eqc-section--about::before. */
.eqc-footer-cta::before {
content: '';
position: absolute;
inset: 0;
background: var(--eqc-gold-500);
opacity: 0.2;
-webkit-mask-image: linear-gradient(270deg, #000 0%, #000 26%, transparent 72%), url('../svg/girih-lattice-fine.svg');
mask-image: linear-gradient(270deg, #000 0%, #000 26%, transparent 72%), url('../svg/girih-lattice-fine.svg');
-webkit-mask-size: 100% 100%, 96px 96px;
mask-size: 100% 100%, 96px 96px;
-webkit-mask-repeat: no-repeat, repeat;
mask-repeat: no-repeat, repeat;
-webkit-mask-position: center, right center;
mask-position: center, right center;
-webkit-mask-composite: source-in;
mask-composite: intersect;
pointer-events: none;
}
.eqc-footer-cta > * { position: relative; }
/* Grows into whatever the capsule leaves; the basis only has to be small
enough not to force a wrap above the explicit stacking breakpoint below. */
.eqc-footer-cta-text { flex: 1 1 min(100%, 22rem); min-width: 0; }
/* The reference's CTA eyebrow is a circled icon beside a ruled gold label,
not the site's pill `.eqc-eyebrow` — kept as its own small component so
neither treatment has to override the other. */
.eqc-cta-eyebrow {
display: flex;
align-items: center;
gap: clamp(0.6rem, 0.9vw, 1.1rem);
}
/* Circular icon badges size their glyph off their own diameter (a local
custom property + em), so the ratio the reference uses holds at every
viewport instead of drifting with the inherited font-size. */
.eqc-cta-eyebrow-icon {
--_badge-size: clamp(38px, 20px + 1.9vw, 58px);
width: var(--_badge-size);
height: var(--_badge-size);
font-size: calc(var(--_badge-size) * 0.4);
flex: none;
border-radius: 50%;
border: 1px solid var(--eqc-gold-600);
color: var(--eqc-gold-300);
display: inline-flex;
align-items: center;
justify-content: center;
}
.eqc-cta-eyebrow-label {
font-size: clamp(0.8125rem, 0.7rem + 0.28vw, 1.05rem);
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--eqc-gold-300);
padding-bottom: 0.65em;
border-bottom: 1px solid var(--eqc-gold-600);
}
.eqc-footer-cta h2 {
color: var(--eqc-white);
font-family: var(--eqc-font-display);
/* Capped so "Your First Class Is Free." holds the reference's single
line in the column width the capsule leaves beside it — this face
sets wider than the mock-up's, so the mock-up's ~71px would wrap. */
font-size: clamp(2rem, 1.1rem + 2.65vw, 3.875rem);
line-height: 1.12;
margin: clamp(1rem, 0.8rem + 0.8vw, 1.9rem) 0 0;
}
.eqc-cta-title-alt { display: block; color: var(--eqc-gold-500); }
.eqc-cta-rule {
display: block;
width: clamp(72px, 40px + 3.2vw, 152px);
height: 2px;
border-radius: 2px;
background: var(--eqc-gold-500);
margin-block: clamp(1rem, 0.8rem + 0.9vw, 2rem);
}
.eqc-cta-body {
margin: 0;
/* At desktop the flex column is narrower than this and governs; the
bound only matters once the CTA stacks and the panel goes full width. */
max-width: min(100%, 46rem);
color: var(--eqc-cream-100);
font-size: clamp(1rem, 0.92rem + 0.3vw, 1.3rem);
line-height: 1.85;
}
/* One block per reference line: the break points hold at desktop and each
line still wraps naturally when the column is narrower. */
.eqc-cta-body > span { display: block; }
/* One white action capsule holding the avatar stack, the student-count
circle and the primary button — reference row 6. */
.eqc-cta-capsule {
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: center;
gap: clamp(0.5rem, 0.2rem + 0.75vw, 1.2rem);
flex: 0 1 auto;
background: var(--eqc-white);
border-radius: var(--eqc-radius-pill);
padding: clamp(0.4rem, 0.1rem + 1.1vw, 1.4rem);
box-shadow: 0 18px 44px rgba(10, 22, 16, 0.28);
}
.eqc-avatar-stack { display: flex; flex: none; }
.eqc-avatar-stack img {
--_avatar: clamp(38px, 20px + 4.6vw, 112px);
width: var(--_avatar);
height: var(--_avatar);
border-radius: 50%;
object-fit: cover;
border: 3px solid var(--eqc-white);
background: var(--eqc-cream-100);
margin-inline-start: calc(var(--_avatar) * -0.1);
}
.eqc-avatar-stack img:first-child { margin-inline-start: 0; }
/* Both labels are sized as a fraction of the circle, at the reference's own
ratios (0.22 and 0.13 of the diameter), so the badge stays in proportion
as it scales. */
.eqc-cta-stat {
--_stat: clamp(66px, 40px + 4.4vw, 124px);
width: var(--_stat);
height: var(--_stat);
flex: none;
margin: 0;
/* Tucks the circle under the last avatar the same way the avatars
overlap each other, and layers it above. */
margin-inline-start: calc(var(--_stat) * -0.14);
position: relative;
z-index: 1;
border-radius: 50%;
background: var(--eqc-cream-100);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.15em;
text-align: center;
line-height: 1.05;
}
.eqc-cta-stat strong {
font-size: calc(var(--_stat) * 0.2);
font-weight: 700;
/* The reference's brighter gold is only 3.2:1 on this cream circle,
which fails AA once the badge scales the figure below large-text
size. Same hue family, dark enough at every size. */
color: var(--eqc-gold-700);
}
.eqc-cta-stat span {
font-size: max(11px, calc(var(--_stat) * 0.115));
font-weight: 600;
color: var(--eqc-green-800);
max-width: 84%;
}
a.eqc-cta-button {
--_h: clamp(44px, 16px + 3.4vw, 102px);
background: var(--eqc-gold-500);
color: var(--eqc-green-900);
gap: clamp(0.5rem, 0.9vw, 1.1rem);
padding-inline: clamp(0.35rem, 0.6vw, 0.8rem) clamp(0.9rem, 0.3rem + 1.2vw, 2rem);
font-size: clamp(0.9rem, 0.72rem + 0.42vw, 1.35rem);
font-weight: 700;
}
a.eqc-cta-button:hover { background: var(--eqc-gold-300); }
/* The shared gold focus ring would vanish against this button's own gold
fill and the white capsule behind it. */
a.eqc-cta-button:focus-visible { outline-color: var(--eqc-green-900); }
.eqc-cta-button-icon {
--_badge-size: clamp(30px, 8px + 2.5vw, 58px);
width: var(--_badge-size);
height: var(--_badge-size);
font-size: calc(var(--_badge-size) * 0.38);
flex: none;
border-radius: 50%;
background: var(--eqc-green-900);
color: var(--eqc-gold-300);
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Scale the reference's two-column composition together on desktop. */
@media (min-width: 70rem) {
.eqc-footer-cta {
display: grid;
grid-template-columns: minmax(0, 0.39fr) minmax(0, 0.61fr);
gap: min(1.5vw, 29px);
/* Tight block (top/bottom) padding. The row's height is set by the
text column's own content, which is much taller than the capsule
pill next to it — generous block padding compounds with that
height difference to leave a large band of empty green above the
pill once it is pinned to the row's bottom edge (align-self: end
below). Inline padding follows its own rhythm and is unrelated. */
padding: min(2.2vw, 42px) min(1.8vw, 35px) min(2.2vw, 42px) min(3.7vw, 71px);
}
.eqc-footer-cta h2 { font-size: min(3.25vw, 62px); }
.eqc-cta-body { font-size: min(1.15vw, 22px); line-height: 1.7; }
/* Centred instead of bottom-pinned (align-self: end, removed) — pinning
it to the bottom puts ALL of the row's leftover height above the
capsule instead of splitting it, producing an asymmetric gap.
Centring halves it and keeps top/bottom even. */
/* At 1732px viewport width the capsule's block padding matches the
inline rhythm — just enough for the avatar/stat circles to clear
the pill's curved ends — so the capsule hugs its row instead of
floating in extra vertical white space. It stays centred in the
green panel (align-items: center on the grid). */
.eqc-cta-capsule { flex-wrap: nowrap; gap: min(0.8vw, 15px); padding: min(0.75vw, 14px) min(1.3vw, 25px); border-radius: min(3.2vw, 62px); }
.eqc-avatar-stack img { --_avatar: min(6.1vw, 117px); margin-inline-start: calc(var(--_avatar) * -0.17); }
.eqc-cta-stat { --_stat: min(6.4vw, 122px); margin-inline-start: calc(var(--_stat) * -0.18); }
a.eqc-cta-button { --_h: min(5.1vw, 98px); flex: 1; font-size: min(1.05vw, 20px); padding-inline: min(0.8vw, 15px); white-space: nowrap; }
.eqc-cta-button-icon { --_badge-size: min(3vw, 58px); }
}
@media (max-width: 69.99rem) {
.eqc-footer-cta-text { flex-basis: 100%; }
}
/*
* Below the desktop split the capsule stops being a single pill row, and
* the student-count circle becomes a pill: a circle small enough for a
* tablet would shrink "Happy Students" to ~8px, which is unreadable. The
* circle is the reference's form at the width the reference was drawn at.
*/
@media (max-width: 64rem) {
.eqc-cta-stat {
width: auto;
height: auto;
flex-direction: row;
gap: 0.45em;
padding: 0.55em 1em;
border-radius: var(--eqc-radius-pill);
/* pill state: no avatar overlap */
margin-inline-start: 0;
z-index: auto;
}
.eqc-cta-stat strong { font-size: 1.05rem; }
.eqc-cta-stat span { font-size: 0.8125rem; }
}
@media (max-width: 48rem) {
.eqc-cta-capsule {
border-radius: var(--eqc-radius-panel);
width: 100%;
}
}
/* ---------- Footer panel ---------- */
.eqc-footer-panel {
background: var(--eqc-surface);
border: 1px solid var(--eqc-border);
border-radius: var(--eqc-radius-chrome);
padding: 0 clamp(6px, 0.55vw, 12px) clamp(6px, 0.55vw, 12px);
}
/* Three measured columns divided by full-height hairlines. The divider is
the column's own inline-start border, so it always spans the tallest
column without a separate spacer element. */
.eqc-footer-grid {
/* This gap is charged twice per divider column (once as column-gap, once
as the divider's padding-inline-start), so a larger value here costs
the link columns real text width between them and risks wrapping
"Quran Reading with Tajweed" onto two lines. */
--_col-gap: clamp(1rem, 0.9rem + 1.2vw, 2.25rem);
display: grid;
/* Four columns: About, Contact, Quick Links and Courses. The About
column holds only the logo and the description — Follow Us and We
Accept live in the strip below — so it can take the extra width
without becoming the tallest column. Contact gets the widest share
after About: its address is the longest unbreakable run in the
footer, and at 1.1fr it wrapped to four ragged lines at 1280px while
the e-mail split mid-word. */
grid-template-columns: 1.3fr 0.85fr 1.15fr 1.4fr;
column-gap: var(--_col-gap);
row-gap: clamp(1.75rem, 1.4rem + 1.5vw, 2.75rem);
padding: clamp(1.25rem, 0.8rem + 1.5vw, 2.5rem) clamp(1.5rem, 0.6rem + 2.6vw, 3.75rem);
}
.eqc-footer-col--contact,
.eqc-footer-col--links,
.eqc-footer-col--courses {
border-inline-start: 1px solid var(--eqc-border);
padding-inline-start: var(--_col-gap);
}
/* h3 for correct document heading order (it follows the h2 CTA heading
above with no skip); sized as an uppercase column label with the
reference's short gold underline. */
.eqc-footer-heading {
margin: 0 0 clamp(0.85rem, 0.7rem + 0.55vw, 1.25rem);
color: var(--eqc-heading);
font-family: var(--eqc-font-body);
font-size: clamp(1rem, 0.86rem + 0.35vw, 1.3rem);
font-weight: 700;
letter-spacing: 0.02em;
line-height: 1.2;
text-transform: uppercase;
}
.eqc-footer-heading::after {
content: '';
display: block;
width: clamp(40px, 20px + 1.5vw, 68px);
height: 3px;
border-radius: 2px;
margin-top: clamp(0.6rem, 0.5rem + 0.4vw, 1.1rem);
background: var(--eqc-gold-500);
}
/* .eqc-footer-about sits on the light panel, so the lockup keeps the same
dark-on-light treatment as the header; only the "CLASSES" sub-line goes
gold, as the reference draws it. */
.eqc-logo--footer { --eqc-logo-mark-size: clamp(42px, 24px + 3vw, 72px); }
.eqc-logo--footer .eqc-logo-lockup { font-size: calc(var(--eqc-logo-mark-size) * 0.46); }
.eqc-logo--footer .eqc-logo-link { --eqc-logo-sub-color: var(--eqc-gold-700); }
.eqc-footer-about p {
color: var(--eqc-text);
/* Sized to fill the column's available width rather than holding the
copy to a narrow measure. With Follow Us / We Accept moved out to the
strip below, this column would otherwise sit noticeably shorter than
its neighbours; growing the copy into that space keeps the column
heights even. */
max-width: 46ch;
margin: clamp(0.9rem, 0.7rem + 0.7vw, 1.4rem) 0 0;
font-size: clamp(1rem, 0.92rem + 0.35vw, 1.25rem);
line-height: 1.72;
}
.eqc-footer-social {
display: flex;
flex-wrap: wrap;
gap: clamp(0.5rem, 0.2rem + 0.6vw, 0.95rem);
margin-top: clamp(1.5rem, 1rem + 1.4vw, 2.75rem);
}
.eqc-social-icon {
--_badge-size: clamp(40px, 22px + 2.2vw, 64px);
width: var(--_badge-size);
height: var(--_badge-size);
font-size: calc(var(--_badge-size) * 0.36);
flex: none;
border-radius: 50%;
border: 1px solid var(--eqc-border-strong);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--eqc-green-800);
transition: background-color var(--eqc-motion-base) var(--eqc-ease-standard),
color var(--eqc-motion-base) var(--eqc-ease-standard);
}
a.eqc-social-icon:hover { background: var(--eqc-green-800); color: var(--eqc-white); }
/* No account URL supplied yet: the mark is drawn (the reference shows four)
but as a muted, non-interactive span — never a link to an invented
profile. Its accessible name says so; see footer.php. */
.eqc-social-icon--pending {
color: var(--eqc-muted);
border-color: var(--eqc-border);
cursor: default;
}
/* ---------- Footer contact list ---------- */
.eqc-footer-contact {
--_badge: clamp(32px, 20px + 1.4vw, 42px);
--_badge-gap: clamp(0.65rem, 0.4rem + 0.5vw, 1.05rem);
list-style: none;
margin: 0;
padding: 0;
}
.eqc-footer-contact li {
position: relative;
display: flex;
align-items: center;
gap: var(--_badge-gap);
padding-block: clamp(0.5rem, 0.4rem + 0.4vw, 0.85rem);
color: var(--eqc-text);
font-size: clamp(0.95rem, 0.86rem + 0.22vw, 1.05rem);
line-height: 1.45;
}
.eqc-footer-contact li > span:last-child,
.eqc-footer-contact li > a {
min-width: 0;
text-wrap: balance;
/* Only as a last resort: footer.php puts a after the e-mail's @,
so an address that does not fit breaks there, never mid-word. */
overflow-wrap: break-word;
}
@media (min-width: 40.01rem) {
/* Keep the three contact rows visually equal without inserting artificial
line breaks into editable address, phone, or email values. */
.eqc-footer-contact li {
min-block-size: calc(3 * 1.45em + 1.4rem);
box-sizing: border-box;
}
}
/* No cap: the previous 15ch forced the address into a needlessly narrow
ragged column (client screenshot flagged it). The column's own width is
already bounded by the grid track (.eqc-footer-grid) and the contact
icon's fixed gap, so the text just fills the column and wraps normally
without colliding with anything below it. */
/* The reference's hairline starts at the text, not at the icon badge. */
.eqc-footer-contact li + li::before {
content: '';
position: absolute;
top: 0;
left: calc(var(--_badge) + var(--_badge-gap));
right: 0;
height: 1px;
background: var(--eqc-border);
}
.eqc-contact-icon {
width: var(--_badge);
height: var(--_badge);
font-size: calc(var(--_badge) * 0.38);
flex: none;
border-radius: 50%;
background: var(--eqc-green-900);
color: var(--eqc-gold-300);
display: inline-flex;
align-items: center;
justify-content: center;
}
/* ---------- Footer quick links ---------- */
/* Single column: Useful Links and Courses both read as one plain vertical
list, not a 2-up grid. */
.eqc-footer-links {
list-style: none;
margin: 0;
padding: 0;
columns: 1;
}
.eqc-footer-links li {
break-inside: avoid;
margin-bottom: clamp(0.45rem, 0.35rem + 0.35vw, 0.7rem);
}
.eqc-footer-links a {
display: inline-flex;
/* flex-start + half the leading keeps the bullet on the FIRST line when
a label wraps to two, instead of floating to the item's centre. */
align-items: flex-start;
gap: 0.6em;
line-height: 1.45;
color: var(--eqc-text);
text-decoration: none;
font-size: clamp(0.95rem, 0.88rem + 0.3vw, 1.15rem);
}
.eqc-footer-links .eqc-footer-link-chevron {
width: 1em;
height: 1em;
margin-block-start: 0.25em;
color: var(--eqc-gold-600);
}
.eqc-footer-contact a,
.eqc-footer-links a { color: var(--eqc-text); text-decoration: none; }
.eqc-footer-contact a:hover,
.eqc-footer-links a:hover { color: var(--eqc-bronze-700); }
/* ---------- Persistent call action ---------- */
/* Fixed bottom-right on every public page. Safe-area insets keep it clear of
the home indicator on phones; the drawer marks it inert along with the rest
of the background (assets/js/eqc.js), and [inert] hides it so it cannot be
reached behind the open drawer. */
.eqc-call-float {
position: fixed;
right: max(16px, env(safe-area-inset-right));
bottom: max(16px, env(safe-area-inset-bottom));
z-index: var(--eqc-z-contact);
display: grid;
place-items: center;
width: 52px;
height: 52px;
border: 2px solid var(--eqc-cream-100);
border-radius: 50%;
background: var(--eqc-whatsapp-green);
color: var(--eqc-heading);
box-shadow: 0 4px 14px rgb(20 49 38 / 20%);
transition: background var(--eqc-motion-fast), transform var(--eqc-motion-fast), box-shadow var(--eqc-motion-fast);
}
.eqc-call-float .eqc-icon { width: 24px; height: 24px; }
.eqc-call-float:hover,
.eqc-call-float:focus-visible { color: var(--eqc-heading); background: var(--eqc-whatsapp-green-dark); transform: translateY(-2px); }
.eqc-call-float:focus-visible { outline: 3px solid var(--eqc-gold-700); outline-offset: 3px; }
.eqc-call-float:active { transform: none; }
.eqc-call-float[inert] { visibility: hidden; }
@media (min-width: 64rem) {
.eqc-call-float { width: 56px; height: 56px; right: max(28px, env(safe-area-inset-right)); bottom: max(28px, env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
.eqc-call-float { transition: none; }
.eqc-call-float:hover,
.eqc-call-float:focus-visible { transform: none; }
}
@media print {
.eqc-call-float { display: none; }
}
/* ---------- Copyright bar ---------- */
/* No medallion straddles this bar's top edge sitewide; it would overlap
the copyright line on phones (e.g. the "USA 733898... All Rights
Reserved" text at 360px). Its markup does not exist in footer.php, so
there is no position:relative here either — it would only ever have
existed to anchor that absolutely-positioned badge. */
/* ---------- Footer social strip ----------
* Follow Us sits in its own row under the grid rather than stacking inside
* the About column — stacking it there would make that column taller than
* the three link columns beside it and leave dead space under each of them.
* This row uses that space instead, and keeps the grid's tallest column at
* the height of the link lists.
* The payment marks share this strip with Follow Us, split to opposite edges
* by `justify-content: space-between`. Their "We Accept" caption was dropped
* on 2026-09-17 at the client's request; the marks themselves stay, so the
* strip still has two children and space-between is still the right rule. */
.eqc-footer-strip {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: clamp(1.25rem, 1rem + 1.5vw, 2.5rem);
border-top: 1px solid var(--eqc-border);
margin-inline: clamp(1.5rem, 0.6rem + 2.6vw, 3.75rem);
padding-block: clamp(1rem, 0.8rem + 1vw, 1.75rem);
}
.eqc-footer-social-group { display: flex; align-items: center; gap: clamp(0.85rem, 0.6rem + 1vw, 1.75rem); }
/* In the strip the heading sits beside its icons, so the stacked bottom
margin and the gold underline — both of which belong to a column head —
are dropped. */
.eqc-footer-strip .eqc-footer-heading { margin: 0; }
.eqc-footer-strip .eqc-footer-heading::after { display: none; }
.eqc-footer-strip .eqc-footer-social { margin-top: 0; }
/* Client, 2026-09-17: the two groups sat at opposite ends of a wide empty band
with nothing between them. This rule connects them.
Built in CSS rather than from assets/svg/divider-diamond.svg, which is the
same motif: that file has a fixed 240x16 viewBox, and stretching it across a
gap that runs from roughly 90px to 600px across the breakpoints would stretch
its diamond with it. A gradient hairline plus a rotated square holds the
diamond's proportions at any width.
It also absorbs the free space, so the strip no longer depends on
space-between to push the two groups apart -- they are pushed apart by the
rule itself, and the gap either side of it is the strip's own `gap`. */
.eqc-footer-strip-rule {
flex: 1 1 auto;
min-inline-size: calc(40 * var(--eqc-u));
align-self: center;
position: relative;
block-size: 1px;
background: linear-gradient(
90deg,
transparent,
var(--eqc-border) 15%,
var(--eqc-border) 85%,
transparent
);
}
.eqc-footer-strip-rule::before {
content: '';
position: absolute;
inset-block-start: 50%;
inset-inline-start: 50%;
inline-size: calc(7 * var(--eqc-u));
block-size: calc(7 * var(--eqc-u));
translate: -50% -50%;
rotate: 45deg;
background: var(--eqc-gold-500);
}
@media (max-width: 48rem) {
.eqc-footer-strip { flex-direction: column; align-items: flex-start; }
/* Stacked, the groups sit one above the other and a horizontal rule
between them would be a full-width line across the footer -- heavier
than the band it is meant to lighten. The stack's own gap separates
them well enough. */
.eqc-footer-strip-rule { display: none; }
}
/* The "We Accept" caption was removed on 2026-09-17 at the client's request;
the marks stay. .eqc-footer-payments-label went with it. */
.eqc-footer-payments {
display: flex;
flex-direction: row;
align-items: center;
gap: clamp(0.75rem, 0.5rem + 0.9vw, 1.5rem);
margin-top: 0;
}
.eqc-footer-payments-row {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
align-items: center;
gap: clamp(0.35rem, 0.25rem + 0.45vw, 0.7rem);
inline-size: min(100%, 23rem);
}
/* Full-colour brand files, not the single-tint icon sprite, sized to read
clearly at this scale. Padding is kept tight so two marks comfortably
share a line inside the narrower About column. */
.eqc-payment-mark {
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: 100%;
block-size: clamp(2rem, 1.8rem + 0.8vw, 2.5rem);
padding-inline: 0.35rem;
box-sizing: border-box;
border-radius: var(--eqc-radius-control);
background: var(--eqc-white);
border: 1px solid var(--eqc-border);
box-shadow: var(--eqc-shadow-card);
}
.eqc-payment-mark img { width: 100%; height: 60%; max-width: 3.4rem; object-fit: contain; }
.eqc-payment-mark--amex img { height: 75%; border-radius: calc(var(--eqc-radius-control) * 0.5); }
.eqc-footer-bottom {
display: flex;
align-items: center;
justify-content: center;
min-height: clamp(48px, 26px + 2.6vw, 76px);
padding: clamp(0.7rem, 0.5rem + 0.7vw, 1.2rem) clamp(3.5rem, 8vw, 6rem);
border: 1px solid var(--eqc-gold-600);
border-radius: var(--eqc-radius-panel);
background: var(--eqc-green-900);
text-align: center;
}
.eqc-footer-bottom p {
margin: 0;
color: var(--eqc-cream-100);
font-size: clamp(0.85rem, 0.8rem + 0.25vw, 1.15rem);
}
/* ---------- Footer responsive collapse ---------- */
/* Layout-only past 70rem — the base rules above already carry the type
scale fluidly via clamp(), so this block does not re-set font-size. A
min(vw, px) override here would re-inflate the footer's body copy past
the clamp's own cap, making the footer read oversized at desktop
widths. */
@media (min-width: 70rem) {
.eqc-logo--footer { --eqc-logo-mark-size: min(3.6vw, 68px); }
.eqc-social-icon { --_badge-size: min(2.7vw, 50px); }
}
@media (max-width: 75rem) {
.eqc-footer-grid { grid-template-columns: 1fr 1fr; }
.eqc-footer-col--contact,
.eqc-footer-col--links,
.eqc-footer-col--courses {
border-inline-start: 0;
border-top: 1px solid var(--eqc-border);
padding-inline-start: 0;
padding-top: clamp(1.75rem, 4vw, 2.5rem);
}
.eqc-footer-about p { max-width: none; }
}
@media (max-width: 40rem) {
.eqc-footer-grid { grid-template-columns: 1fr; }
}
/* The sticky-header compaction above is the only size animation in the
shell; DESIGN.md §20 requires it to stand still under reduced motion. */
@media (prefers-reduced-motion: reduce) {
.eqc-header,
.eqc-header-bar,
.eqc-logo-mark,
.eqc-nav-list a::after { transition: none; }
}