//|
directly. Editorial surfaces set their colour on the CONTAINER (.rg-forest,
.ed-footer, .edh-tickband…), which only reaches children by INHERITANCE — and
an inherited value always loses to a direct match, whatever the container's
specificity. So bare text on the dark forest panels rendered #23301F on
~#16241B: 1.05:1 contrast, i.e. invisible, in BOTH themes.
Everything affected lives inside .ed, so one scoped opt-out restores
inheritance without touching class-bearing accents (.rg-chips span, .ed-em…),
which keep higher specificity. On light surfaces the value is visually
identical (#23301F -> --ink #16261C). */
.ed p, .ed li, .ed span, .ed td,
.ed-footer p, .ed-footer li, .ed-footer span, .ed-footer td { color: inherit; }
/* …but a REVERSED chip carries its own dark background, so inheriting the page's
dark ink paints dark-on-dark and the label vanishes — which is exactly what
happened to the category chip on the program page (a solid green box with no
readable text in it). These elements set their own colour and must keep it;
`.ed span` above outranks their single-class selectors, so they are restored
here with the same specificity plus one. */
.ed .ed-clcat, .ed .ed-tag-forest, .ed .ed-chip.active,
.ed .ed-btn-dark, .ed .ed-search button { color: var(--paper) !important; }
.ed .ed-tag-forest { color: var(--gold-b) !important; }
.text-muted, .post-meta, small.text-muted { color: var(--brand-text-muted) !important; }
/* Headings use the deep green for a grounded, editorial feel */
h1, h2, h3, h4, h5, h6,
.section-title h2, .widget-title {
color: var(--brand-green);
}
/* ---- Accent: gold --------------------------------------------------------- */
.theme-color,
a.theme-color,
.text-theme,
.section-title .theme-color { color: var(--brand-gold) !important; }
a { color: var(--brand-green-3); }
a:hover, a:active, a:focus { color: var(--brand-gold); }
/* Primary buttons → gold with a confident, readable contrast */
.btn-theme,
.btn-primary,
.theme-btn,
button.theme-btn,
.main-btn {
background-color: var(--brand-gold) !important;
border-color: var(--brand-gold) !important;
color: #2A1D05 !important;
font-weight: 600;
letter-spacing: .2px;
transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.btn-theme:hover,
.btn-primary:hover,
.theme-btn:hover,
button.theme-btn:hover,
.main-btn:hover {
background-color: var(--brand-gold-dark) !important;
border-color: var(--brand-gold-dark) !important;
color: #FFFDF4 !important;
transform: translateY(-1px);
box-shadow: 0 8px 20px rgba(138, 100, 32, .28);
}
/* Outline / ghost buttons in the green family */
.btn-outline-theme, .btn-bordered {
border-color: var(--brand-green-3) !important;
color: var(--brand-green) !important;
background: transparent !important;
}
.btn-outline-theme:hover, .btn-bordered:hover {
background: var(--brand-green) !important;
color: var(--brand-cream) !important;
}
/* ---- Structural dark surfaces: top bar, header, footer -------------------- */
header .topbar.bg-theme,
.topbar.full-view-switch,
.top-bar, .header-top,
.main-header.sticky, .site-footer, footer.site-footer,
.footer-wrapper, .footer, .copyright-wrap, .copyrights {
background-color: var(--brand-green) !important;
color: var(--brand-cream);
}
/* Top bar links + icons: cream, gold on hover */
header .topbar a, header .topbar .header-address, header .topbar span { color: #EAF0E4 !important; }
header .topbar a:hover { color: var(--brand-gold-light) !important; }
.site-footer, .site-footer p, .site-footer li, .site-footer a,
.footer a, .footer p, .footer li,
.copyrights, .copyrights a { color: #E7ECE1; }
.site-footer a:hover, .footer a:hover, .copyrights a:hover { color: var(--brand-gold-light); }
.site-footer .widget-title, .footer .widget-title { color: #FFFFFF; }
.site-footer .contact-info .theme-color,
.footer .contact-info .theme-color { color: var(--brand-gold-light) !important; }
/* ---- Cards / surfaces ----------------------------------------------------- */
.card, .course-card, .single-course, .blog-post, .widget {
background-color: #FFFFFF;
border: 1px solid var(--brand-sand);
border-radius: 14px;
box-shadow: 0 1px 2px rgba(28,42,32,.05), 0 10px 26px rgba(28,42,32,.06);
}
/* Section tint bands: neutral near-white (no cream) */
.bg-light, .bg-gray, .section-gray, .light-bg { background-color: #F5F7F5 !important; }
/* Badges / pills */
.badge-theme, .badge-primary { background-color: var(--brand-gold); color: #2A1D05; }
/* Form focus in brand gold */
.form-control:focus {
border-color: var(--brand-gold) !important;
box-shadow: 0 0 0 .2rem rgba(166, 125, 46, .18) !important;
}
/* Nav links: quiet green, gold on active/hover */
.main-menu li a, .navbar-nav .nav-link { color: var(--brand-green); }
.main-menu li a:hover, .main-menu li.active > a,
.navbar-nav .nav-link:hover, .navbar-nav .nav-link.active { color: var(--brand-gold); }
/* Rounded thumbnails as the repeated motif */
.course-thumbnail img, .card-thumbnail img, .blog-thumb img { border-radius: 12px 12px 0 0; }
/* Typography rhythm */
body { -webkit-font-smoothing: antialiased; }
h1, h2, h3 { letter-spacing: -.01em; }
/* ---- Terracotta: sparing secondary accent (from the reference artifact) ---- */
:root { --brand-terracotta: #8B3A1F; --brand-terracotta-2: #C06A4A; }
.text-terracotta, .badge-live { color: var(--brand-terracotta) !important; }
.badge-live { background-color: var(--brand-terracotta) !important; color: #fff !important; }
.section-title .subtitle, .eyebrow, .brand-kicker { color: var(--brand-terracotta) !important; }
/* ============================================================================
MOTION & POLISH (website) — animated, dynamic, stylish
========================================================================== */
.card, .single-course, .btn, .theme-btn, a, .badge { transition: transform .2s cubic-bezier(.2,.7,.2,1), box-shadow .2s ease, background-color .2s ease, color .2s ease; }
.card:hover, .single-course:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(28,42,32,.14); }
.btn:hover, .theme-btn:hover, .main-btn:hover { transform: translateY(-2px); }
@media (prefers-reduced-motion: no-preference) {
@keyframes wFadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes wFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.reveal-up { opacity: 0; }
.reveal-up.in { animation: wFadeUp .7s cubic-bezier(.2,.7,.2,1) both; }
.float-slow { animation: wFloat 5s ease-in-out infinite; }
}
/* ============================================================================
MARKETING PAGES — shared components (courses / categories / contact)
Scoped under .page-mkt. Professional LMS style in the brand palette.
========================================================================== */
.page-mkt { --g:#1C2A20; --g2:#22352A; --g3:#2B4032; --g4:#4A6852; --gold:#A67D2E; --gold-l:#D4A656; --gold-d:#8A6420; --terra:#8B3A1F; --line:#E6E9E5; --ink:#23301F; --muted:#64715F; font-family:'Cairo','Poppins',-apple-system,sans-serif; color:var(--ink); }
.page-mkt .pm-wrap { max-width:1200px; margin:0 auto; padding:0 20px; }
/* Page hero banner */
.page-mkt .pm-hero { position:relative; overflow:hidden; background:linear-gradient(135deg,#16261C,#1C2A20 55%,#22352A); color:#fff; padding:clamp(56px,8vw,96px) 0; text-align:center; }
.page-mkt .pm-hero::after { content:''; position:absolute; width:440px; height:440px; border-radius:50%; background:radial-gradient(circle,rgba(166,125,46,.42),transparent 62%); top:-150px; inset-inline-end:-120px; pointer-events:none; }
.page-mkt .pm-hero .pm-eyebrow { color:var(--gold-l); }
.page-mkt .pm-hero h1 { position:relative; z-index:2; color:#fff; font-size:clamp(2rem,4.6vw,3.2rem); font-weight:800; letter-spacing:-.025em; margin:.6rem 0 0; }
.page-mkt .pm-hero .pm-crumb { position:relative; z-index:2; color:#B4C0AC; font-size:.9rem; margin-top:.8rem; }
.page-mkt .pm-hero .pm-crumb a { color:var(--gold-l); text-decoration:none; }
.page-mkt .pm-eyebrow { display:inline-flex; align-items:center; gap:.5rem; font-size:.76rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-d); }
.page-mkt .pm-eyebrow::before { content:''; width:24px; height:2px; background:var(--gold); border-radius:2px; }
.page-mkt .pm-section { padding:clamp(44px,6vw,80px) 0; }
.page-mkt .pm-head { text-align:center; margin-bottom:2.4rem; }
.page-mkt .pm-title { font-size:clamp(1.6rem,3.2vw,2.4rem); font-weight:800; letter-spacing:-.02em; color:var(--g); margin:.4rem 0 0; }
.page-mkt .pm-sub { color:var(--muted); max-width:60ch; margin:.7rem auto 0; }
/* Filter chips */
.page-mkt .pm-filters { display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; margin-bottom:2.2rem; }
.page-mkt .pm-chip { background:#fff; border:1.5px solid var(--line); border-radius:99px; padding:.55rem 1.15rem; font-weight:700; font-size:.9rem; color:var(--g); text-decoration:none; transition:all .16s ease; }
.page-mkt .pm-chip:hover { border-color:var(--gold); color:var(--gold-d); transform:translateY(-2px); }
.page-mkt .pm-chip.active { background:var(--g); color:#fff; border-color:var(--g); }
/* Grids */
.page-mkt .pm-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; }
@media (max-width:900px){ .page-mkt .pm-grid { grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .page-mkt .pm-grid { grid-template-columns:1fr;} }
/* Course card */
.page-mkt .pm-course { background:#fff; border:1px solid var(--line); border-radius:18px; overflow:hidden; box-shadow:0 2px 6px rgba(28,42,32,.05); transition:transform .22s cubic-bezier(.2,.7,.2,1),box-shadow .22s ease; display:flex; flex-direction:column; text-decoration:none; }
.page-mkt .pm-course:hover { transform:translateY(-8px); box-shadow:0 22px 46px rgba(28,42,32,.16); }
.page-mkt .pm-thumb { aspect-ratio:16/10; overflow:hidden; background:linear-gradient(135deg,#22352A,#2B4032); position:relative; }
.page-mkt .pm-thumb img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.page-mkt .pm-course:hover .pm-thumb img { transform:scale(1.06); }
.page-mkt .pm-badge { position:absolute; top:12px; inset-inline-start:12px; background:rgba(28,42,32,.85); color:var(--gold-l); font-size:.66rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; padding:.3rem .7rem; border-radius:99px; }
.page-mkt .pm-cbody { padding:1.1rem 1.2rem 1.3rem; display:flex; flex-direction:column; flex:1; }
.page-mkt .pm-ctitle { font-weight:700; font-size:1.05rem; color:var(--g); line-height:1.3; }
.page-mkt .pm-cmeta { color:var(--muted); font-size:.85rem; margin-top:.5rem; display:flex; gap:1rem; }
.page-mkt .pm-cfoot { margin-top:auto; padding-top:1rem; display:flex; align-items:center; justify-content:space-between; }
.page-mkt .pm-clink { color:var(--gold-d); font-weight:800; font-size:.9rem; display:inline-flex; align-items:center; gap:.35rem; }
.page-mkt .pm-course:hover .pm-clink { gap:.6rem; color:var(--g); }
/* Category card */
.page-mkt .pm-cat { background:#fff; border:1px solid var(--line); border-radius:18px; padding:2rem 1.6rem; text-align:center; text-decoration:none; transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease; display:block; }
.page-mkt .pm-cat:hover { transform:translateY(-6px); box-shadow:0 20px 44px rgba(28,42,32,.14); border-color:var(--gold); }
.page-mkt .pm-cat-ico { width:76px; height:76px; margin:0 auto 1.1rem; border-radius:20px; display:grid; place-items:center; background:linear-gradient(135deg,#22352A,#2B4032); overflow:hidden; }
.page-mkt .pm-cat-ico img { width:44px; height:44px; object-fit:contain; }
.page-mkt .pm-cat h3 { font-size:1.15rem; font-weight:800; color:var(--g); margin:0 0 .5rem; }
.page-mkt .pm-cat p { color:var(--muted); font-size:.9rem; margin:0; line-height:1.6; }
.page-mkt .pm-cat .pm-cat-count { display:inline-block; margin-top:.9rem; font-size:.78rem; font-weight:800; color:var(--gold-d); background:#F3EEE0; padding:.3rem .8rem; border-radius:99px; }
/* Contact cards + form */
.page-mkt .pm-contact-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; margin-bottom:2.6rem; }
@media (max-width:820px){ .page-mkt .pm-contact-grid { grid-template-columns:1fr;} }
.page-mkt .pm-cc { background:#fff; border:1px solid var(--line); border-radius:16px; padding:1.8rem 1.5rem; text-align:center; transition:transform .2s ease,box-shadow .2s ease; }
.page-mkt .pm-cc:hover { transform:translateY(-5px); box-shadow:0 16px 36px rgba(28,42,32,.10); }
.page-mkt .pm-cc-ico { width:56px; height:56px; margin:0 auto 1rem; border-radius:16px; display:grid; place-items:center; background:linear-gradient(135deg,#22352A,#2B4032); color:var(--gold-l); }
.page-mkt .pm-cc h3 { font-size:1.02rem; font-weight:800; color:var(--g); margin:0 0 .4rem; }
.page-mkt .pm-cc a, .page-mkt .pm-cc p { color:var(--muted); text-decoration:none; font-size:.95rem; direction:ltr; }
.page-mkt .pm-cc a:hover { color:var(--gold-d); }
.page-mkt .pm-formwrap { background:#fff; border:1px solid var(--line); border-radius:22px; padding:clamp(1.6rem,3vw,2.6rem); box-shadow:0 12px 34px rgba(28,42,32,.07); max-width:820px; margin:0 auto; }
.page-mkt .pm-formwrap .form-control { border:1.5px solid var(--line); border-radius:12px; padding:.85rem 1rem; font-size:.95rem; width:100%; background:#fff; transition:border-color .15s ease, box-shadow .15s ease; }
.page-mkt .pm-formwrap .form-control:focus { outline:none; border-color:var(--gold); box-shadow:0 0 0 .2rem rgba(166,125,46,.16); }
.page-mkt .pm-btn { display:inline-flex; align-items:center; gap:.5rem; padding:.85rem 1.8rem; border-radius:12px; font-weight:700; border:0; cursor:pointer; background:linear-gradient(135deg,var(--gold-l),var(--gold)); color:#241A05; box-shadow:0 10px 24px rgba(166,125,46,.3); transition:transform .18s ease,box-shadow .18s ease; }
.page-mkt .pm-btn:hover { transform:translateY(-2px); box-shadow:0 14px 30px rgba(166,125,46,.4); color:#241A05; }
/* entrance */
@media (prefers-reduced-motion: no-preference) {
.page-mkt .pm-course, .page-mkt .pm-cat, .page-mkt .pm-cc { animation:pmUp .6s cubic-bezier(.2,.7,.2,1) both; }
@keyframes pmUp { from{opacity:0; transform:translateY(20px);} to{opacity:1; transform:none;} }
.page-mkt .pm-grid > *:nth-child(2){animation-delay:.06s;} .page-mkt .pm-grid > *:nth-child(3){animation-delay:.12s;}
.page-mkt .pm-grid > *:nth-child(4){animation-delay:.16s;} .page-mkt .pm-grid > *:nth-child(5){animation-delay:.2s;} .page-mkt .pm-grid > *:nth-child(6){animation-delay:.24s;}
}
/* ==========================================================================
DARK MODE
The element-level rules above (`p, li, span, td { color: … }`, `body`,
headings) are DIRECT matches, so they beat colour *inherited* from a
`.ed-dark` / `[data-bs-theme="dark"]` container. That is why body copy
rendered near-black on dark grounds even where the container rule was right.
`:not([class])` keeps this to un-classed rich-text nodes only, so styled
accents (.ed-em, .ed-lead, badges…) keep their own colours untouched.
========================================================================== */
.ed-dark p:not([class]),
.ed-dark li:not([class]),
.ed-dark span:not([class]),
.ed-dark td:not([class]),
[data-bs-theme="dark"] p:not([class]),
[data-bs-theme="dark"] li:not([class]),
[data-bs-theme="dark"] span:not([class]),
[data-bs-theme="dark"] td:not([class]) {
color: inherit;
}
/* Headings inside dark surfaces: the light-only deep green is unreadable. */
.ed-dark h1:not([class]), .ed-dark h2:not([class]), .ed-dark h3:not([class]),
.ed-dark h4:not([class]), .ed-dark h5:not([class]), .ed-dark h6:not([class]),
[data-bs-theme="dark"] h1:not([class]), [data-bs-theme="dark"] h2:not([class]),
[data-bs-theme="dark"] h3:not([class]), [data-bs-theme="dark"] h4:not([class]),
[data-bs-theme="dark"] h5:not([class]), [data-bs-theme="dark"] h6:not([class]) {
color: inherit;
}
/* .text-muted carries !important above, so it needs an !important answer. */
.ed-dark .text-muted,
[data-bs-theme="dark"] .text-muted { color: #A6B4A8 !important; }
.ed-dark body, [data-bs-theme="dark"] body { background-color: transparent; }
/* ============================================================================
PAGE LOADER — a market chart that builds itself, at scale.
Replaces the stock spinner GIF (a background image had to download before the loader
could even appear). Pure CSS/SVG: no request, no flash, both themes.
Hidden within one second by the inline script in the layout — the loader is decoration,
never a gate. Do NOT add `display: … !important` here: it beats the inline display:none
used to hide it, which once trapped every page behind a permanent loader.
========================================================================== */
.page-loader {
background: #FBFAF6;
align-items: center;
justify-content: center;
}
.page-loader:not([style*="display: none"]):not(.is-done) { display: flex; }
.page-loader.is-done { display: none !important; }
.ed-dark .page-loader { background: #101A13; }
.ed-loader { position: relative; display: flex; flex-direction: column; align-items: center; gap: 26px; }
/* halo behind the mark */
.ed-loader::before { content: ''; position: absolute; top: -80px; left: 50%; width: 760px; height: 760px;
margin-left: -380px; border-radius: 50%; pointer-events: none;
background: radial-gradient(circle, rgba(203,170,99,.20), transparent 62%);
animation: edLoaderHalo 2.2s ease-in-out infinite; }
/* The dashed ring is gone: at double size the mark fills the space the ring used to
frame, and a circle drawn around a circular logo just read as clutter. */
/* The academy's mark, deliberately large — this is the first thing a visitor sees, and a
240px chart read as a widget rather than as the brand. Sized in vmin as well as px so it
stays proportionate on a phone instead of filling the screen. */
.ed-loader-logo { position: relative; width: clamp(300px, 52vmin, 520px); height: auto;
filter: drop-shadow(0 10px 26px rgba(28,42,32,.20)); }
.ed-loader-chart { position: relative; width: 240px; height: auto; overflow: visible; }
.ed-loader-axis { stroke: rgba(28,42,32,.25); stroke-width: 1.5; stroke-linecap: round; }
.ed-dark .ed-loader-axis { stroke: rgba(243,239,227,.28); }
/* bars grow from the axis with a stagger and a slight overshoot */
.ed-loader-bar { fill: #1C2A20; transform-box: fill-box; transform-origin: 50% 100%;
animation: edLoaderGrow 1.4s cubic-bezier(.34,1.56,.5,1) infinite; }
.ed-dark .ed-loader-bar { fill: #33513D; }
.ed-loader-bar.b2 { animation-delay: .1s; }
.ed-loader-bar.b3 { animation-delay: .2s; }
.ed-loader-bar.b4 { fill: #CBAA63; animation-delay: .3s; }
.ed-dark .ed-loader-bar.b4 { fill: #E4CB90; }
@keyframes edLoaderGrow {
0%, 100% { transform: scaleY(.2); opacity: .45; }
50% { transform: scaleY(1.02); opacity: 1; }
}
/* the trend line draws across, then the arrow lands */
.ed-loader-trend { fill: none; stroke: #CBAA63; stroke-width: 3;
stroke-linecap: round; stroke-linejoin: round;
filter: drop-shadow(0 0 6px rgba(203,170,99,.65));
stroke-dasharray: 150; stroke-dashoffset: 150;
animation: edLoaderDraw 1.4s cubic-bezier(.4,0,.2,1) infinite; }
.ed-loader-tip { fill: #CBAA63; opacity: 0; transform-box: fill-box; transform-origin: 50% 50%;
filter: drop-shadow(0 0 6px rgba(203,170,99,.7));
animation: edLoaderTip 1.4s cubic-bezier(.34,1.56,.5,1) infinite; }
@keyframes edLoaderDraw {
0% { stroke-dashoffset: 150; }
60%, 100% { stroke-dashoffset: 0; }
}
@keyframes edLoaderTip {
0%, 50% { opacity: 0; transform: scale(.4) translateY(6px); }
70% { opacity: 1; transform: scale(1.25) translateY(0); }
85%,100% { opacity: 1; transform: scale(1) translateY(0); }
}
/* rising motes */
.ed-loader-mote { fill: #CBAA63; opacity: 0; animation: edLoaderMote 2.4s ease-in-out infinite; }
.ed-loader-mote.m2 { animation-delay: .5s; }
.ed-loader-mote.m3 { animation-delay: 1s; }
@keyframes edLoaderMote {
0% { opacity: 0; transform: translateY(6px); }
35% { opacity: .9; }
100% { opacity: 0; transform: translateY(-26px); }
}
@keyframes edLoaderHalo { 0%,100% { opacity: .5; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes edLoaderSpin { to { transform: rotate(360deg); } }
.ed-loader-word { position: relative; font-size: 12px; font-weight: 700; letter-spacing: .42em;
color: rgba(28,42,32,.55); text-transform: uppercase;
animation: edLoaderWord 2.2s ease-in-out infinite; }
.ed-dark .ed-loader-word { color: rgba(243,239,227,.6); }
[dir="rtl"] .ed-loader-word { letter-spacing: 0; font-size: 15px; }
@keyframes edLoaderWord { 0%,100% { opacity: .5; } 50% { opacity: 1; } }
@media (max-width: 575.98px) {
.ed-loader-chart { width: 180px; }
.ed-loader::before { width: 260px; height: 260px; margin-left: -130px; }
.ed-loader::after { width: 190px; height: 190px; margin-left: -95px; }
}
/* Never animate for someone who asked us not to — show the finished chart instead. */
@media (prefers-reduced-motion: reduce) {
.ed-loader-bar, .ed-loader-trend, .ed-loader-tip, .ed-loader-word,
.ed-loader-mote, .ed-loader::before, .ed-loader::after { animation: none; }
.ed-loader-bar { transform: none; opacity: 1; }
.ed-loader-trend { stroke-dashoffset: 0; }
.ed-loader-tip, .ed-loader-mote { opacity: 1; transform: none; }
}
/* The mark breathes rather than spins — a logo that rotates reads as a loading widget and
stops reading as the brand. */
@keyframes edLoaderMark { 0%,100% { transform: scale(.97); opacity: .92; } 50% { transform: scale(1.03); opacity: 1; } }
/* ==========================================================================
LOADER MOTION
Layers around the mark, all drawn in CSS so they are already moving while the
logo itself is still on its way down the wire. Nothing spins: a rotating logo
reads as a widget, and this is the academy's face.
Every animation is switched off under prefers-reduced-motion at the end.
========================================================================== */
.ed-loader-mark { position: relative; display: grid; place-items: center; isolation: isolate; }
/* Rings of gold expanding out of the mark and fading — three, staggered, so there is
always one mid-flight. Behind the logo (z-index 0 vs 1) so they read as emanating
from it rather than sitting on top. */
.ed-loader-ripple { position: absolute; z-index: 0; width: 62%; aspect-ratio: 1; border-radius: 50%;
border: 1px solid rgba(203,170,99,.55); opacity: 0;
animation: edLoaderRipple 3.6s cubic-bezier(.22,.61,.36,1) infinite; }
.ed-loader-ripple.r2 { animation-delay: 1.2s; }
.ed-loader-ripple.r3 { animation-delay: 2.4s; }
@keyframes edLoaderRipple {
0% { transform: scale(.72); opacity: 0; }
18% { opacity: .5; }
100% { transform: scale(1.55); opacity: 0; }
}
/* Clips the sheen to the mark. line-height:0 keeps the inline image from adding a
descender gap that would make the disc taller than the logo and show as a seam. */
.ed-loader-disc { position: relative; z-index: 1; overflow: hidden; border-radius: 50%; line-height: 0;
animation: edLoaderMark 2.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .ed-loader-disc { animation: none; } }
.ed-loader-logo { position: relative; z-index: 1; display: block; }
/* The sheen crossing the mark — the same sweep the program cards carry, so the loading
screen and the catalogue share a gesture. Masked to a soft ellipse so it fades out at
the edges instead of ending on a hard line, and blended rather than painted over. */
.ed-loader-sheen { position: absolute; z-index: 2; inset: 0; pointer-events: none; border-radius: 50%;
background: linear-gradient(105deg, transparent 38%, rgba(255,253,244,.75) 50%, transparent 62%);
mix-blend-mode: overlay; opacity: .9;
-webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent 88%);
mask-image: radial-gradient(closest-side, #000 62%, transparent 88%);
animation: edLoaderSheen 3.2s ease-in-out infinite; }
@keyframes edLoaderSheen {
0% { transform: translateX(-120%); }
55% { transform: translateX(120%); }
100% { transform: translateX(120%); }
}
/* Motes lifting off the mark. Different sizes, delays and drifts so the group never
pulses in unison — five identical dots on one timer looks mechanical. */
.ed-loader-mote { position: absolute; z-index: 3; width: 7px; height: 7px; border-radius: 50%;
background: radial-gradient(circle, #EBD8A4, rgba(203,170,99,0));
opacity: 0; animation: edLoaderMote 4.2s ease-in-out infinite; }
.ed-loader-mote.m1 { left: 16%; bottom: 24%; animation-delay: 0s; }
.ed-loader-mote.m2 { left: 34%; bottom: 12%; animation-delay: .9s; width: 5px; height: 5px; }
.ed-loader-mote.m3 { left: 58%; bottom: 18%; animation-delay: 1.7s; }
.ed-loader-mote.m4 { left: 76%; bottom: 10%; animation-delay: 2.5s; width: 9px; height: 9px; }
.ed-loader-mote.m5 { left: 47%; bottom: 30%; animation-delay: 3.3s; width: 4px; height: 4px; }
@keyframes edLoaderMote {
0% { transform: translate(0,0) scale(.6); opacity: 0; }
22% { opacity: .95; }
100% { transform: translate(14px,-150px) scale(1.15); opacity: 0; }
}
/* A chart drawing itself under the mark: the line strokes on, holds, then clears — the
platform's subject stated in one gesture. */
.ed-loader-trend { width: clamp(180px, 30vmin, 300px); height: auto; overflow: visible; }
.ed-loader-trend polyline { fill: none; stroke: #CBAA63; stroke-width: 2.5;
stroke-linecap: round; stroke-linejoin: round;
stroke-dasharray: 300; stroke-dashoffset: 300;
animation: edLoaderTrend 3.6s ease-in-out infinite; }
@keyframes edLoaderTrend {
0% { stroke-dashoffset: 300; opacity: 0; }
15% { opacity: 1; }
55% { stroke-dashoffset: 0; opacity: 1; }
80% { stroke-dashoffset: 0; opacity: 0; }
100% { stroke-dashoffset: 300; opacity: 0; }
}
/* One switch for the lot. A loading screen is exactly where motion sensitivity bites. */
@media (prefers-reduced-motion: reduce) {
.ed-loader-ripple, .ed-loader-sheen, .ed-loader-mote, .ed-loader-trend polyline { animation: none; }
.ed-loader-ripple, .ed-loader-sheen, .ed-loader-mote { opacity: 0; }
.ed-loader-trend polyline { stroke-dashoffset: 0; opacity: 1; }
}
/* Legal-page breadcrumb link is --brand-gold on the photo hero — 3.25:1, and it sits OUTSIDE .ed so no token resolves */
/* The page-title hero is legacy markup OUTSIDE `.ed`, so design tokens do not
resolve here — this has to be a literal. --brand-gold #A67D2E measured
3.25:1 on the hero photo (needs 4.5); the sibling `.current` is already white.
--brand-gold-light #D4A656 was checked first and only reaches 3.84:1 against
the brightest pixel the .black-overlay can produce, so it does not fit. */
#breadcrumb a.theme-color,
.page-title-inner a.theme-color { color: #E3C179 !important; } |