/* ============================================================================
LINGUVIA - Excellent Online Language & Education Center
Stylesheet - pure CSS, no framework, no build step.
---------------------------------------------------------------------------
HOW TO CHANGE THE COLOURS
---------------------------------------------------------------------------
1) Quickest way - switch to a ready-made palette:
open any .html file and change the first line, e.g.
to petrol | emerald | indigo | burgundy | graphite
(the presets live right below the control panel)
2) Full control - edit the 10 values in "COLOUR CONTROL PANEL" below.
Every other colour on the site (tints, hovers, borders, dark sections,
icons, the logo) is derived from them automatically. Nothing else in
this file needs to be touched.
Also update: assets/img/favicon.svg (one hex value inside)
and in the .html files.
========================================================================== */
:root {
/* ======================= COLOUR CONTROL PANEL ==========================
These 10 values define the whole website. Change them and everything
follows - buttons, icons, borders, dark bands, hover states.
====================================================================== */
--brand: #0e4c54; /* main colour - buttons, links, icons, logo */
--brand-strong: #0a3b42; /* darker shade - hover states */
--brand-deep: #06282e; /* deepest shade - dark sections, footer */
--accent: #c9a227; /* accent (gold) - diamonds, numbers, highlights */
--ink: #16211f; /* headline text */
--ink-soft: #55625f; /* body text */
--page: #faf8f5; /* page background (warm off-white) */
--surface: #ffffff; /* cards, header, form fields */
--line: #e7e1d7; /* hairlines and borders */
--on-brand: #ffffff; /* text placed on top of --brand / dark sections */
--band-alt: #e8efee; /* the athletes band - light petrol tint (was dark charcoal) */
/* ======================= END CONTROL PANEL ============================= */
/* WhatsApp green - fixed by that brand, normally not changed */
--whatsapp: #25d366;
/* highlighter yellow: the marker stroke in the hero headline and every
spot that still has to be filled in (imprint, privacy policy).
Deliberately outside the palette - it should stand out. */
/* text on gold - near-black reads crisper than the dark teal (7.4:1) */
--on-accent: #17140b;
--marker: #ffe45c;
--todo: #fff3a8;
--todo-line: #e0b400;
--focus: var(--accent);
/* ---- typography ---- */
--font-display: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
--font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
--font-arabic: "Noto Kufi Arabic", "Segoe UI", sans-serif;
--font-tifinagh: "Noto Sans Tifinagh", "Segoe UI", sans-serif;
/* ---- layout ---- */
--container: 1180px;
--radius: 14px;
--radius-sm: 9px;
--radius-lg: 22px;
--header-h: 78px;
--shadow-sm: 0 1px 2px rgba(9, 30, 32, .05);
--shadow-md: 0 14px 34px -18px rgba(9, 30, 32, .30);
--shadow-lg: 0 28px 60px -28px rgba(9, 30, 32, .38);
}
/* =========================== COLOUR PRESETS ==============================
Switch by editing the tag:
========================================================================= */
/* deep green + gold - classic, academic */
[data-palette="emerald"] {
--brand: #0d4a38;
--brand-strong: #093727;
--brand-deep: #05261b;
--accent: #bf9527;
--ink: #15201b;
--ink-soft: #55625b;
--page: #f9f8f4;
--surface: #ffffff;
--line: #e5e2d6;
}
/* deep blue + amber - corporate, calm */
[data-palette="indigo"] {
--brand: #23306b;
--brand-strong: #1a2452;
--brand-deep: #111838;
--accent: #dd9a35;
--ink: #161a2a;
--ink-soft: #545a70;
--page: #f8f9fc;
--surface: #ffffff;
--line: #e2e5ee;
}
/* burgundy + brass - university, prestige */
[data-palette="burgundy"] {
--brand: #6e2333;
--brand-strong: #571a27;
--brand-deep: #3a0f19;
--accent: #b3874a;
--ink: #22161a;
--ink-soft: #62555a;
--page: #faf7f5;
--surface: #ffffff;
--line: #eae0dc;
}
/* graphite + teal - modern, technical */
[data-palette="graphite"] {
--brand: #1f2d33;
--brand-strong: #16232a;
--brand-deep: #0d171c;
--accent: #0e9384;
--ink: #13191c;
--ink-soft: #566065;
--page: #f7f8f8;
--surface: #ffffff;
--line: #e3e6e7;
}
/* =========================== DERIVED COLOURS =============================
Everything below is calculated from the ten values above (or from the
preset in use). You normally never edit this block.
========================================================================= */
:root,
[data-palette] {
/* ---- derived colours (plain fallback first, color-mix second) ---- */
--brand-tint: #eef3f3;
--brand-tint: color-mix(in srgb, var(--brand) 7%, var(--surface));
--brand-tint-2: #dfe9e9;
--brand-tint-2: color-mix(in srgb, var(--brand) 14%, var(--surface));
--brand-line: #cadada;
--brand-line: color-mix(in srgb, var(--brand) 24%, var(--surface));
--brand-ghost: #f4f8f7;
--brand-ghost: color-mix(in srgb, var(--brand) 4%, var(--page));
--accent-tint: #f8f2dc;
--accent-tint: color-mix(in srgb, var(--accent) 14%, var(--surface));
--accent-line: #e9d99a;
--accent-line: color-mix(in srgb, var(--accent) 38%, var(--surface));
--accent-hi: #e4cd6a;
--accent-hi: color-mix(in srgb, var(--accent) 62%, #ffffff);
/* darker gold for small text - plain gold is too light to read on white */
--accent-ink: #8f7217;
--accent-ink: color-mix(in srgb, var(--accent) 66%, var(--ink));
/* neutral section background - one primary, one accent, one neutral ground */
--page-tint: #f2f2f0;
--page-tint: color-mix(in srgb, var(--ink) 5%, var(--page));
--on-dark: #eef4f3;
--on-dark: color-mix(in srgb, var(--on-brand) 93%, var(--brand));
--on-dark-soft: #a9bfbf;
--on-dark-soft: color-mix(in srgb, var(--on-brand) 64%, var(--brand-deep));
--on-dark-line: #23474d;
--on-dark-line: color-mix(in srgb, var(--on-brand) 17%, var(--brand-deep));
}
/* ================================ BASE ================================== */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
scroll-padding-top: calc(var(--header-h) + 12px);
-webkit-text-size-adjust: 100%;
}
body {
font-family: var(--font-body);
font-size: 1.0625rem;
line-height: 1.72;
color: var(--ink-soft);
background: var(--page);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
ul, ol { list-style: none; }
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-strong); }
strong, b { color: var(--ink); font-weight: 600; }
[hidden] { display: none !important; }
h1, h2, h3, h4, h5 {
font-family: var(--font-display);
color: var(--ink);
line-height: 1.16;
font-weight: 700;
letter-spacing: -.02em;
}
h1 { font-size: clamp(2.05rem, 4.8vw, 3.45rem); font-weight: 800; }
h2 { font-size: clamp(1.65rem, 3.3vw, 2.35rem); }
h3 { font-size: clamp(1.12rem, 1.7vw, 1.32rem); letter-spacing: -.01em; }
h4 { font-size: 1.0625rem; letter-spacing: 0; }
::selection { background: var(--brand); color: var(--on-brand); }
:focus-visible {
outline: 2px solid var(--focus);
outline-offset: 3px;
border-radius: 4px;
}
.skip-link {
position: absolute; left: 1rem; top: -5rem; z-index: 200;
background: var(--brand); color: var(--on-brand);
padding: .7rem 1.1rem; border-radius: var(--radius-sm); font-weight: 600;
transition: top .2s;
}
.skip-link:focus { top: 1rem; color: var(--on-brand); }
/* ============================= UTILITIES ================================ */
.container {
width: 100%;
max-width: var(--container);
margin-inline: auto;
padding-inline: clamp(1.15rem, 4vw, 2rem);
}
.container--narrow { max-width: 920px; }
.section { padding-block: clamp(3.5rem, 7vw, 5.75rem); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.section--flush-top { padding-top: 0; }
.section--tint { background: var(--page-tint); }
.section--paper { background: var(--surface); }
.section--dark {
background: var(--brand-deep);
color: var(--on-dark-soft);
position: relative;
overflow: hidden;
}
.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4,
.section--dark strong { color: var(--on-dark); }
.section--dark .eyebrow { color: var(--accent); }
.section--dark .eyebrow::before { background: var(--accent); }
.section--dark .lede { color: var(--on-dark-soft); }
.section--dark a:not(.btn) { color: var(--on-dark); }
/* faint dotted texture on dark bands */
.section--dark::before {
content: "";
position: absolute; inset: 0;
background-image: radial-gradient(circle at 1px 1px, var(--on-dark-line) 1px, transparent 0);
background-size: 26px 26px;
opacity: .55;
pointer-events: none;
}
.section--dark > * { position: relative; z-index: 1; }
.eyebrow {
display: flex;
align-items: center;
gap: .6rem;
font-family: var(--font-body);
font-size: .72rem;
font-weight: 600;
letter-spacing: .19em;
text-transform: uppercase;
color: var(--brand);
margin-bottom: .9rem;
}
.eyebrow::before {
content: "";
width: 22px; height: 2px;
background: var(--accent);
flex: none;
}
.lede {
font-size: clamp(1.02rem, 1.5vw, 1.14rem);
line-height: 1.68;
max-width: 62ch;
color: var(--ink-soft);
}
.section-head { margin-bottom: clamp(2rem, 4vw, 3rem); max-width: 780px; }
.section-head h2 + .lede { margin-top: 1rem; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.section-head--center .lede { margin-inline: auto; }
.text-block > * + * { margin-top: 1.05rem; }
.muted { color: var(--ink-soft); }
.small { font-size: .92rem; }
.note {
font-size: .92rem;
padding: .95rem 1.15rem;
border-left: 2px solid var(--accent);
background: var(--accent-tint);
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
color: var(--ink-soft);
}
/* two-column editorial layout: sticky heading rail + content */
.rail {
display: grid;
grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
gap: clamp(2rem, 5vw, 4.5rem);
align-items: start;
}
.rail__head { position: sticky; top: calc(var(--header-h) + 28px); }
/* on the services page a second sticky bar (the service tabs) sits under the
header - the heading column has to clear it, otherwise its top is cut off */
.svc-block .rail__head { top: calc(var(--header-h) + 74px); }
@media (max-width: 900px) {
.rail { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
.rail__head { position: static; }
}
/* two-column split: text beside a visual */
.split {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
gap: clamp(1.75rem, 4vw, 3.5rem);
align-items: center;
}
@media (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr); } }
/* ============================== BUTTONS ================================= */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .6rem;
font-family: var(--font-body);
font-size: .95rem;
font-weight: 600;
line-height: 1;
padding: .95rem 1.5rem;
border-radius: 999px;
border: 1.5px solid transparent;
cursor: pointer;
transition: background .18s, color .18s, border-color .18s, transform .18s, box-shadow .18s;
text-align: center;
}
.btn:hover { transform: translateY(-2px); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--primary { background: var(--brand); color: var(--on-brand); box-shadow: var(--shadow-md); }
.btn--primary:hover { background: var(--brand-strong); color: var(--on-brand); }
/* the single most important action on a page - gold with near-black text
(contrast 7.4:1, passes WCAG AA comfortably) */
.btn--gold,
.section--dark .btn--gold {
background: var(--accent);
color: var(--on-accent);
border-color: var(--accent);
font-weight: 700;
box-shadow: 0 12px 28px -14px rgba(120, 92, 8, .55);
}
.btn--gold:hover,
.section--dark .btn--gold:hover {
background: var(--accent-hi);
border-color: var(--accent-hi);
color: var(--on-accent);
}
.btn--gold svg { color: var(--on-accent); }
.btn--accent { background: var(--accent); color: var(--on-accent); }
.btn--accent:hover { filter: brightness(.96); color: var(--on-accent); }
.btn--outline { border-color: var(--brand-line); color: var(--brand); background: transparent; }
.btn--outline:hover { border-color: var(--brand); background: var(--brand-tint); color: var(--brand-strong); }
.btn--light,
.section--dark .btn--light {
background: var(--on-brand);
color: var(--brand-deep);
border-color: var(--on-brand);
box-shadow: 0 10px 26px -14px rgba(0, 0, 0, .6);
}
.btn--light:hover,
.section--dark .btn--light:hover {
background: var(--on-brand);
color: var(--brand-deep);
filter: brightness(.94);
}
.btn--ghost-light { border-color: var(--on-dark-line); color: var(--on-dark); }
.btn--ghost-light:hover { border-color: var(--on-dark); color: var(--on-dark); background: rgba(255, 255, 255, .07); }
.btn--wide { width: 100%; }
.btn--sm { padding: .72rem 1.15rem; font-size: .875rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }
.link-arrow {
display: inline-flex; align-items: center; gap: .45rem;
font-weight: 600; font-size: .95rem; color: var(--brand);
}
.link-arrow svg { width: 16px; height: 16px; transition: transform .18s; }
.link-arrow:hover svg { transform: translateX(4px); }
/* =============================== HEADER ================================= */
.site-header {
position: sticky; top: 0; z-index: 100;
background: var(--surface);
background: color-mix(in srgb, var(--surface) 88%, transparent);
-webkit-backdrop-filter: saturate(180%) blur(14px);
backdrop-filter: saturate(180%) blur(14px);
border-bottom: 1px solid transparent;
transition: border-color .2s, box-shadow .2s, background .2s;
}
.site-header.scrolled {
border-bottom-color: var(--line);
box-shadow: 0 6px 24px -18px rgba(9, 30, 32, .5);
background: var(--surface);
background: color-mix(in srgb, var(--surface) 96%, transparent);
}
.header-inner {
height: var(--header-h);
display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
/* the logo is the client's own file: assets/img/logo.svg (light backgrounds)
and logo-white.svg (dark footer). Change the height here, nothing else. */
.brand { display: inline-flex; align-items: center; color: var(--brand); }
.brand__logo { display: block; height: 54px; width: auto; }
.site-footer .brand__logo { height: 62px; }
.main-nav > ul { display: flex; align-items: center; gap: .1rem; }
.main-nav a,
.nav-drop__btn {
display: inline-flex; align-items: center; gap: .3rem;
font-size: .9rem; font-weight: 500; color: var(--ink);
padding: .6rem .6rem; border-radius: var(--radius-sm);
white-space: nowrap;
background: none; border: 0; cursor: pointer;
font-family: var(--font-body);
transition: color .16s, background .16s;
}
.main-nav a:hover,
.nav-drop__btn:hover { color: var(--brand); background: var(--brand-tint); }
.main-nav a.active,
.nav-drop.is-current > .nav-drop__btn { color: var(--brand); font-weight: 600; }
.nav-drop__btn svg { width: 13px; height: 13px; transition: transform .2s; }
.nav-drop.open .nav-drop__btn svg { transform: rotate(180deg); }
.nav-drop { position: relative; }
.nav-drop__menu {
position: absolute; top: calc(100% + 10px); left: 50%;
transform: translate(-50%, 8px);
width: min(580px, 80vw);
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow-lg);
padding: .65rem;
display: grid; grid-template-columns: 1fr 1fr; gap: .15rem;
opacity: 0; visibility: hidden;
transition: opacity .18s, transform .18s, visibility .18s;
}
.nav-drop.open .nav-drop__menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.nav-drop__menu--narrow { width: min(440px, 80vw); grid-template-columns: 1fr; }
.nav-drop__menu a {
display: block; padding: .68rem .8rem; border-radius: var(--radius-sm);
font-size: .9rem; font-weight: 600; color: var(--ink); line-height: 1.35;
white-space: normal;
}
.nav-drop__menu a span {
display: block; font-size: .78rem; font-weight: 400;
color: var(--ink-soft); margin-top: .15rem;
}
.nav-drop__menu a:hover { background: var(--brand-tint); color: var(--brand); }
.nav-drop__menu a span.nav-drop__num {
display: block;
font-size: .66rem; font-weight: 700; color: var(--accent-ink);
letter-spacing: .16em; margin: 0 0 .2rem;
}
.header-cta { display: flex; align-items: center; gap: .6rem; }
.header-cta .btn { white-space: nowrap; }
/* ---- language switcher (prototype) ---- */
.lang { position: relative; }
.lang__btn {
display: inline-flex; align-items: center; gap: .35rem;
font-family: var(--font-body);
font-size: .85rem; font-weight: 600;
color: var(--ink);
background: var(--surface);
border: 1px solid var(--line);
border-radius: 999px;
padding: .48rem .7rem .48rem .6rem;
cursor: pointer;
transition: border-color .16s, color .16s, background .16s;
}
.lang__btn:hover { border-color: var(--brand-line); color: var(--brand); background: var(--brand-tint); }
.lang__btn > svg { width: 16px; height: 16px; color: var(--brand); }
.lang__chev { width: 11px !important; height: 11px !important; opacity: .6; transition: transform .2s; }
.lang.open .lang__chev { transform: rotate(180deg); }
.lang__code { letter-spacing: .02em; }
.lang__menu {
position: absolute; top: calc(100% + 9px); right: 0;
min-width: 186px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow-lg);
padding: .35rem;
opacity: 0; visibility: hidden;
transform: translateY(6px);
transition: opacity .18s, transform .18s, visibility .18s;
z-index: 120;
}
.lang.open .lang__menu { opacity: 1; visibility: visible; transform: none; }
.lang__menu a,
.lang__menu span {
display: flex; align-items: center; gap: .6rem;
padding: .55rem .65rem;
border-radius: var(--radius-sm);
font-size: .88rem; font-weight: 500;
color: var(--ink);
white-space: nowrap;
}
.lang__menu a:hover { background: var(--brand-tint); color: var(--brand); }
.lang__menu a.is-active { color: var(--brand); font-weight: 600; background: var(--brand-tint); }
.lang__menu b {
display: inline-grid; place-items: center;
width: 26px; height: 26px; flex: none;
border-radius: 7px;
background: var(--brand-tint-2);
color: var(--brand);
font-size: .78rem; font-weight: 700;
}
.lang__menu b.ar { font-family: var(--font-arabic); font-size: .95rem; }
.lang__menu b.tf { font-family: var(--font-tifinagh); font-size: .95rem; }
.lang__menu span { color: var(--ink-soft); cursor: default; }
.lang__menu span b { background: var(--page-tint); color: var(--ink-soft); }
.lang__menu em {
margin-left: auto;
font-style: normal; font-size: .66rem; font-weight: 600;
letter-spacing: .1em; text-transform: uppercase;
color: var(--ink-soft); opacity: .7;
}
@media (max-width: 400px) {
.lang__btn { padding: .48rem .55rem; }
.lang__btn > svg:first-child { display: none; }
}
/* call-to-action inside the mobile menu (hidden on desktop) */
.main-nav .nav-cta { display: none; }
@media (max-width: 430px) {
.brand__logo { height: 42px; }
}
.nav-toggle {
display: none;
width: 44px; height: 44px;
border: 1px solid var(--line); border-radius: var(--radius-sm);
background: var(--surface); cursor: pointer;
align-items: center; justify-content: center;
color: var(--ink);
}
.nav-toggle svg { width: 20px; height: 20px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-menu { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }
@media (max-width: 1240px) {
.header-cta .btn { display: none; }
}
@media (max-width: 980px) {
.nav-toggle { display: inline-flex; }
.main-nav {
position: fixed; inset: var(--header-h) 0 auto 0;
background: var(--surface);
border-bottom: 1px solid var(--line);
box-shadow: var(--shadow-lg);
padding: 1rem clamp(1.15rem, 4vw, 2rem) 1.6rem;
max-height: calc(100vh - var(--header-h));
max-height: calc(100dvh - var(--header-h));
overflow-y: auto;
display: none;
}
.main-nav.open { display: block; }
.main-nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
.main-nav a,
.nav-drop__btn { width: 100%; justify-content: space-between; padding: .85rem .6rem; font-size: 1rem; }
.main-nav > ul > li + li { border-top: 1px solid var(--line); }
.main-nav .nav-drop__menu {
position: static; transform: none; width: 100%;
box-shadow: none; border: 0; border-radius: 0;
padding: 0 0 .6rem .6rem;
grid-template-columns: 1fr;
display: none; opacity: 1; visibility: visible;
}
.main-nav .nav-drop.open .nav-drop__menu { display: grid; transform: none; }
.main-nav > ul > li.nav-cta-item { border-top: 0; }
.main-nav .nav-cta {
display: inline-flex; align-items: center; justify-content: center;
width: 100%; margin-top: 1.15rem;
padding: .95rem 1.5rem; border-radius: 999px;
background: var(--brand); color: var(--on-brand);
font-weight: 600; font-size: .95rem;
}
.main-nav .nav-cta:hover { background: var(--brand-strong); color: var(--on-brand); }
}
/* ================================ HERO ================================== */
.hero {
position: relative;
padding-block: clamp(2.75rem, 6vw, 5rem) clamp(3rem, 6vw, 4.5rem);
background:
radial-gradient(1100px 520px at 88% -10%, var(--brand-tint) 0%, transparent 60%),
linear-gradient(180deg, var(--surface) 0%, var(--page) 100%);
overflow: hidden;
}
/* ---- animated cover: drifting colour fields + floating script glyphs ----
Purely decorative; switched off for visitors who prefer reduced motion. */
.hero__fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.hero__blob {
position: absolute; border-radius: 50%;
filter: blur(64px);
opacity: .6;
will-change: transform;
}
.hero__blob--1 { width: 560px; height: 560px; right: -160px; top: -200px; background: var(--brand-tint-2); animation: blob-a 22s ease-in-out infinite alternate; }
.hero__blob--2 { width: 440px; height: 440px; right: 16%; bottom: -240px; background: var(--accent-tint); animation: blob-b 26s ease-in-out infinite alternate; }
.hero__blob--3 { width: 320px; height: 320px; left: -140px; bottom: -100px; background: var(--brand-tint); animation: blob-a 30s ease-in-out infinite alternate-reverse; }
@keyframes blob-a { from { transform: translate(0, 0) scale(1); } to { transform: translate(-70px, 60px) scale(1.14); } }
@keyframes blob-b { from { transform: translate(0, 0) scale(1); } to { transform: translate(80px, -50px) scale(.9); } }
.hero__glyph {
position: absolute; bottom: -14%;
left: var(--x, 50%);
font-family: var(--font-display);
font-weight: 800;
font-size: var(--s, 5rem);
line-height: 1;
color: var(--brand);
opacity: 0;
animation: glyph-rise var(--t, 20s) linear infinite;
animation-delay: var(--d, 0s);
user-select: none;
}
.hero__glyph--ar { font-family: var(--font-arabic); font-weight: 500; }
.hero__glyph--tf { font-family: var(--font-tifinagh); font-weight: 400; }
@keyframes glyph-rise {
0% { transform: translateY(0) rotate(-4deg); opacity: 0; }
12% { opacity: .075; }
72% { opacity: .05; }
100% { transform: translateY(-115vh) rotate(6deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.hero__glyph { display: none; }
.hero__blob { animation: none; }
}
.hero__grid {
position: relative; z-index: 1;
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
gap: clamp(2rem, 5vw, 4rem);
align-items: center;
}
.hero h1 { margin-bottom: 1.15rem; }
/* the word is stroked through with a highlighter that draws itself
from left to right once the page has loaded */
.hero h1 .mark {
color: var(--brand);
position: relative;
display: inline-block;
isolation: auto;
}
.hero h1 .mark::after {
content: "";
position: absolute;
left: -.09em; right: -.11em;
bottom: .015em;
height: .52em;
background: var(--accent);
border-radius: .35em .12em .28em .16em;
transform: rotate(-1.1deg);
mix-blend-mode: multiply;
z-index: -1;
}
/* the stroke draws itself only where animations are welcome - without them
(reduced motion, very old browser) the highlight is simply there */
@media (prefers-reduced-motion: no-preference) {
.hero h1 .mark::after {
animation: marker-sweep 1s cubic-bezier(.22, .61, .36, 1) .65s both;
}
}
@keyframes marker-sweep {
from { clip-path: inset(0 100% 0 0); }
to { clip-path: inset(0 0 0 0); }
}
.hero__quote {
margin-top: 1.6rem;
padding-left: 1.1rem;
border-left: 2px solid var(--accent);
font-family: var(--font-display);
font-size: 1.02rem;
font-style: italic;
color: var(--ink);
font-weight: 500;
}
.hero .btn-row { margin-top: 1.9rem; }
/* four-script strip */
.scripts {
display: flex; flex-wrap: wrap; align-items: stretch;
margin-top: 2.4rem;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--surface);
overflow: hidden;
}
.scripts li {
flex: 1 1 auto; min-width: 0;
padding: .8rem .75rem;
display: flex; flex-direction: column; gap: .1rem;
border-left: 1px solid var(--line);
--i: 0;
animation: strip-pulse 10s ease-in-out infinite;
animation-delay: calc(var(--i) * 2s);
}
/* one language lights up after the other */
@keyframes strip-pulse {
0%, 22%, 100% { background: transparent; }
4%, 18% { background: var(--accent-tint); }
}
.scripts li:first-child { border-left: 0; }
.scripts__glyph {
font-family: var(--font-display);
font-size: clamp(.95rem, 1.25vw, 1.06rem);
line-height: 1.35;
white-space: nowrap;
color: var(--brand);
font-weight: 700;
letter-spacing: -.01em;
}
.scripts__glyph--ar { font-family: var(--font-arabic); font-size: clamp(1rem, 1.35vw, 1.12rem); font-weight: 500; }
.scripts__glyph--tf { font-family: var(--font-tifinagh); font-size: clamp(1rem, 1.35vw, 1.14rem); font-weight: 400; }
.scripts__name {
font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
font-weight: 600; color: var(--ink-soft);
}
/* hero visual: stats panel */
.hero__visual { position: relative; }
.hero__panel {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
overflow: hidden;
}
.hero__panel-top {
padding: 1.2rem 1.35rem;
border-bottom: 1px solid var(--line);
display: flex; align-items: center; gap: .6rem;
font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
font-weight: 600; color: var(--ink-soft);
}
.hero__panel-top svg { width: 17px; height: 17px; color: var(--brand); }
.hero__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hero__stat {
padding: 1.45rem 1.35rem;
border-top: 1px solid var(--line);
border-left: 1px solid var(--line);
}
.hero__stat:nth-child(-n+2) { border-top: 0; }
.hero__stat:nth-child(odd) { border-left: 0; }
.hero__stat b {
display: block;
font-family: var(--font-display);
font-size: clamp(1.6rem, 2.8vw, 2.05rem);
font-weight: 800; color: var(--brand); line-height: 1.05;
letter-spacing: -.02em;
}
.hero__stat span {
display: block; margin-top: .35rem;
font-size: .68rem; letter-spacing: .13em; text-transform: uppercase;
font-weight: 600; color: var(--ink-soft);
}
.hero__panel-foot {
background: var(--brand-deep);
color: var(--on-dark-soft);
padding: 1.05rem 1.35rem;
display: flex; align-items: center; gap: .75rem;
font-size: .87rem; line-height: 1.45;
}
.hero__panel-foot svg { width: 20px; height: 20px; color: var(--accent); flex: none; }
.hero__panel-foot strong { color: var(--on-dark); }
@media (max-width: 900px) {
/* on small screens the reading order counts: headline first, then the
buttons, then the figures panel */
.hero__grid { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; }
.hero { padding-block: clamp(2rem, 5vw, 3rem) clamp(2.5rem, 6vw, 4rem); }
.hero .btn-row { margin-top: 1.6rem; }
.hero .btn-row .btn { flex: 1 1 auto; }
.scripts { margin-top: 1.9rem; }
}
@media (max-width: 560px) {
.hero h1 { font-size: clamp(1.95rem, 8.6vw, 2.5rem); }
.hero__quote { font-size: .97rem; }
.hero .btn-row .btn { width: 100%; }
.scripts li { flex: 1 1 45%; min-width: 0; }
.scripts li:nth-child(odd) { border-left: 0; }
.scripts li:nth-child(n+3) { border-top: 1px solid var(--line); }
.scripts li:last-child { flex-basis: 100%; }
}
/* page hero for sub-pages */
.page-hero {
position: relative;
overflow: hidden;
padding-block: clamp(2.5rem, 5vw, 4rem) clamp(2rem, 4vw, 3rem);
background:
radial-gradient(900px 420px at 92% -20%, var(--brand-tint) 0%, transparent 60%),
linear-gradient(180deg, var(--surface) 0%, var(--page) 100%);
border-bottom: 1px solid var(--line);
}
.page-hero > * { position: relative; z-index: 2; }
/* ---- page header background (client feedback 15.09.2026) ----------------
The blurred photos are gone: the headers of the sub-pages now carry a
light wash in the palette - a petrol glow top right, a faint gold glow
below it and the same dotted texture the dark bands use. The markup keeps
its page-hero--media / page-hero-- classes, so nothing in the HTML
had to change.
---------------------------------------------------------------------- */
.page-hero--media { padding-block: clamp(3rem, 6vw, 5rem) clamp(2.5rem, 5vw, 3.75rem); }
.page-hero--media::before {
content: "";
position: absolute; inset: 0; z-index: 0;
pointer-events: none;
/* plain fallback first, richer version below for modern browsers */
background:
radial-gradient(640px 340px at 88% 12%, var(--brand-tint) 0%, transparent 70%);
background:
radial-gradient(640px 340px at 88% 12%, color-mix(in srgb, var(--brand) 16%, transparent) 0%, transparent 70%),
radial-gradient(460px 260px at 70% 100%, color-mix(in srgb, var(--accent) 16%, transparent) 0%, transparent 70%),
radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--brand) 11%, transparent) 1px, transparent 0) 0 0 / 26px 26px;
}
.page-hero--media::after { content: none; }
@media (max-width: 760px) {
.page-hero--media::before {
background:
radial-gradient(420px 260px at 90% 0%, color-mix(in srgb, var(--brand) 14%, transparent) 0%, transparent 70%),
radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--brand) 10%, transparent) 1px, transparent 0) 0 0 / 26px 26px;
}
}
.page-hero h1 { max-width: 18ch; }
.page-hero .lede { margin-top: 1.15rem; }
.breadcrumb {
display: flex; flex-wrap: wrap; align-items: center; gap: .45rem;
font-size: .8rem; color: var(--ink-soft); margin-bottom: 1.35rem;
}
.breadcrumb a { color: var(--ink-soft); }
.breadcrumb a:hover { color: var(--brand); }
.breadcrumb span { opacity: .5; }
/* ============================= BADGE BAR ================================ */
.badge-bar {
border-block: 1px solid var(--line);
background: var(--surface);
padding-block: 1.15rem;
}
.badge-bar__inner {
display: flex; flex-wrap: wrap; gap: 1rem 2.2rem;
align-items: center; justify-content: space-between;
}
.badge {
display: inline-flex; align-items: center; gap: .6rem;
font-size: .875rem; font-weight: 500; color: var(--ink);
}
.badge svg { width: 19px; height: 19px; color: var(--brand); flex: none; }
/* on small screens a tidy 2 x 2 block instead of a ragged wrap */
@media (max-width: 860px) {
.badge-bar { padding-block: 1.25rem; }
.badge-bar__inner {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: .9rem 1rem;
justify-content: stretch;
}
.badge { align-items: flex-start; font-size: .82rem; line-height: 1.35; }
.badge svg { width: 17px; height: 17px; margin-top: .05rem; }
}
@media (max-width: 380px) {
.badge-bar__inner { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
}
/* ============================== GRIDS =================================== */
.grid { display: grid; gap: clamp(1rem, 2vw, 1.35rem); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 980px) {
.grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
.grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
}
/* ============================== CARDS =================================== */
.card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: clamp(1.3rem, 2.2vw, 1.7rem);
transition: border-color .2s, transform .2s, box-shadow .2s;
}
.card h3 { margin-bottom: .5rem; }
.card p { font-size: .95rem; }
.card--link:hover {
border-color: var(--brand-line);
transform: translateY(-3px);
box-shadow: var(--shadow-md);
}
.card__icon {
width: 44px; height: 44px;
display: grid; place-items: center;
border-radius: 11px;
background: var(--brand-tint);
color: var(--brand);
margin-bottom: 1.05rem;
}
.card__icon svg { width: 22px; height: 22px; }
.card__icon--gold { background: var(--accent-tint); color: var(--accent-ink); }
.card__foot { margin-top: 1.1rem; }
/* numbered service cards */
.svc-card { position: relative; display: flex; flex-direction: column; }
.svc-card__num {
font-family: var(--font-display);
font-size: .78rem; font-weight: 700; letter-spacing: .16em;
color: var(--accent-ink); margin-bottom: .85rem;
}
.svc-card__icon {
width: 52px; height: 52px;
display: grid; place-items: center;
border: 1px solid var(--accent-line);
border-radius: 14px;
background: var(--brand-tint);
color: var(--brand);
margin-bottom: 1.1rem;
}
.svc-card__icon svg { width: 24px; height: 24px; }
.card--link:hover .svc-card__icon { border-color: var(--accent); }
.svc-card p { flex: 1; }
/* ======================== HAIRLINE / RULE LISTS ========================= */
.rule-list { border-top: 1px solid var(--line); }
.rule-list > li {
border-bottom: 1px solid var(--line);
padding-block: 1.25rem;
display: grid;
grid-template-columns: 34px minmax(0, 1fr);
gap: 1.15rem;
align-items: start;
}
.rule-list__icon { color: var(--brand); padding-top: .18rem; }
.rule-list__icon svg { width: 22px; height: 22px; }
.rule-list__num {
font-family: var(--font-display);
font-weight: 700; font-size: .95rem; color: var(--accent-ink);
padding-top: .12rem;
}
.rule-list h3 { font-size: 1.06rem; margin-bottom: .3rem; }
.rule-list p { font-size: .95rem; }
/* wide numbered reason rows */
.reasons { counter-reset: reason; border-top: 1px solid var(--line); }
.reasons > li {
counter-increment: reason;
border-bottom: 1px solid var(--line);
padding-block: clamp(1.3rem, 2.4vw, 1.85rem);
display: grid;
grid-template-columns: 68px minmax(0, 300px) minmax(0, 1fr);
gap: clamp(1rem, 3vw, 2.5rem);
align-items: baseline;
transition: background .2s;
}
.reasons > li::before {
content: "0" counter(reason);
font-family: var(--font-display);
font-size: 1.05rem; font-weight: 700;
color: var(--accent-ink);
letter-spacing: .04em;
}
.reasons h3 { font-size: clamp(1.1rem, 1.8vw, 1.3rem); }
.reasons p { font-size: .97rem; }
@media (max-width: 800px) {
.reasons > li { grid-template-columns: 52px minmax(0, 1fr); }
.reasons > li h3 { grid-column: 2; }
.reasons > li p { grid-column: 2; margin-top: .35rem; }
}
/* ============================== FEATURES ================================ */
.feature-list > li {
display: grid;
grid-template-columns: 26px minmax(0, 1fr);
gap: .85rem;
align-items: start;
font-size: .97rem;
}
.feature-list > li + li { margin-top: .95rem; }
.feature-list svg { width: 20px; height: 20px; color: var(--brand); margin-top: .28rem; }
.feature-list strong { display: inline; }
.section--dark .feature-list svg { color: var(--accent); }
.check-list > li {
position: relative;
padding-left: 1.6rem;
font-size: .97rem;
}
.check-list > li + li { margin-top: .7rem; }
.check-list > li::before {
content: "";
position: absolute; left: 0; top: .62em;
width: 7px; height: 7px; border-radius: 50%;
background: var(--accent);
}
/* ============================ STATS BAND ================================ */
.stats {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
border: 1px solid var(--line);
border-radius: var(--radius);
overflow: hidden;
background: var(--surface);
}
.stats > div {
padding: clamp(1.3rem, 2.5vw, 1.9rem);
border-left: 1px solid var(--line);
}
.stats > div:first-child { border-left: 0; }
.stats b {
display: block; font-family: var(--font-display);
font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800;
color: var(--brand); line-height: 1.1; letter-spacing: -.02em;
}
.stats span {
display: block; margin-top: .4rem;
font-size: .7rem; letter-spacing: .13em; text-transform: uppercase;
font-weight: 600; color: var(--ink-soft);
}
@media (max-width: 700px) {
.stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stats > div:nth-child(odd) { border-left: 0; }
.stats > div:nth-child(n+3) { border-top: 1px solid var(--line); }
}
/* ============================ CREDENTIALS =============================== */
.credentials { margin-top: 1.6rem; border-top: 1px solid var(--line); }
.credentials > li {
display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: .8rem;
padding-block: .95rem; border-bottom: 1px solid var(--line);
font-size: .95rem;
}
.credentials svg { width: 19px; height: 19px; color: var(--brand); margin-top: .3rem; }
/* ---------------------- trust / data protection note --------------------- */
.trust {
display: grid;
grid-template-columns: 52px minmax(0, 1fr);
gap: 1.3rem;
align-items: start;
background: var(--surface);
border: 1px solid var(--line);
border-left: 3px solid var(--accent);
border-radius: var(--radius);
padding: clamp(1.4rem, 2.6vw, 2rem);
box-shadow: var(--shadow-sm);
}
.trust__icon {
width: 50px; height: 50px;
border-radius: 13px;
display: grid; place-items: center;
background: var(--brand-tint);
color: var(--brand);
}
.trust__icon svg { width: 23px; height: 23px; }
.trust h3 { margin-bottom: .5rem; }
.trust p { font-size: .97rem; }
@media (max-width: 560px) {
.trust { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
}
/* =============================== QUOTE ================================== */
.quote {
font-family: var(--font-display);
font-size: clamp(1.15rem, 2.3vw, 1.6rem);
line-height: 1.45;
font-weight: 600;
color: var(--ink);
letter-spacing: -.015em;
padding-left: clamp(1rem, 2vw, 1.5rem);
border-left: 3px solid var(--accent);
}
.section--dark .quote { color: var(--on-dark); }
/* ========================== SERVICE SECTIONS ============================ */
.svc-nav {
position: sticky; top: var(--header-h);
z-index: 60;
background: var(--surface);
border-bottom: 1px solid var(--line);
}
.svc-nav ul {
display: flex; gap: .35rem;
overflow-x: auto;
padding-block: .7rem;
scrollbar-width: thin;
}
.svc-nav a {
white-space: nowrap;
font-size: .85rem; font-weight: 600;
padding: .5rem .85rem; border-radius: 999px;
color: var(--ink-soft);
border: 1px solid transparent;
}
.svc-nav a:hover { color: var(--brand); background: var(--brand-tint); }
.svc-nav a.active { color: var(--brand); border-color: var(--brand-line); background: var(--brand-tint); }
.svc-block { border-top: 1px solid var(--line); }
.svc-block:first-of-type { border-top: 0; }
.svc-block__tag {
font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
font-weight: 700; color: var(--accent-ink); margin-bottom: .75rem;
}
.svc-block__index {
font-family: var(--font-display);
font-size: clamp(2.4rem, 6vw, 3.6rem);
font-weight: 800; line-height: 1;
color: var(--brand);
letter-spacing: -.04em;
margin-bottom: .6rem;
}
.sub-head {
display: flex; align-items: center; gap: .6rem;
font-family: var(--font-display);
font-size: 1.05rem; font-weight: 700; color: var(--ink);
margin-bottom: 1rem;
}
.sub-head::before {
content: ""; width: 7px; height: 7px; flex: none;
background: var(--accent); border-radius: 2px; transform: rotate(45deg);
}
.stack > * + * { margin-top: clamp(1.75rem, 3.5vw, 2.75rem); }
/* definition rows: term - description */
.def-list { border-top: 1px solid var(--line); }
.def-list > li {
border-bottom: 1px solid var(--line);
padding-block: 1.1rem;
display: grid;
grid-template-columns: minmax(0, 230px) minmax(0, 1fr);
gap: .35rem 1.75rem;
font-size: .96rem;
}
.def-list dt, .def-list__term {
font-family: var(--font-display);
font-weight: 700; color: var(--ink); font-size: 1rem;
}
@media (max-width: 720px) {
.def-list > li { grid-template-columns: minmax(0, 1fr); }
}
/* ============================ LEVEL TABLE =============================== */
.table-wrap { overflow-x: auto; max-width: 100%; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
table.levels { width: 100%; border-collapse: collapse; min-width: 640px; }
table.levels th, table.levels td { text-align: left; padding: 1rem 1.15rem; border-bottom: 1px solid var(--line); }
table.levels thead th {
font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
color: var(--ink-soft); font-weight: 700; background: var(--brand-tint);
}
table.levels tbody tr:last-child td { border-bottom: 0; }
table.levels td:first-child {
font-family: var(--font-display); font-weight: 800; color: var(--brand);
font-size: 1.05rem; width: 88px;
}
table.levels td:nth-child(2) { font-weight: 600; color: var(--ink); white-space: nowrap; }
table.levels td:last-child { font-size: .94rem; }
/* ============================== PROCESS ================================= */
.steps {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(1rem, 2.5vw, 2rem);
counter-reset: step;
}
.steps > li { counter-increment: step; position: relative; padding-top: 3.6rem; }
.steps__icon {
position: absolute; top: 0; left: 0;
width: 54px; height: 54px;
display: grid; place-items: center;
border-radius: 50%;
border: 1.5px solid var(--accent-line);
background: var(--surface);
color: var(--brand);
z-index: 1;
}
.steps__icon svg { width: 23px; height: 23px; }
.steps__num {
position: absolute; top: -6px; left: 42px;
width: 24px; height: 24px;
display: grid; place-items: center;
border-radius: 50%;
background: var(--accent);
color: var(--on-accent);
font-family: var(--font-display); font-weight: 800; font-size: .7rem;
z-index: 2;
}
.steps > li::after {
content: "";
position: absolute; top: 27px; left: 62px; right: -14px;
height: 2px;
background: linear-gradient(to right, var(--accent-line), var(--line));
}
.steps > li:last-child::after { display: none; }
.steps h3 { font-size: 1.08rem; margin-bottom: .4rem; }
.steps p { font-size: .94rem; }
.section--dark .steps__icon {
background: transparent; border-color: var(--on-dark-line); color: var(--accent);
}
.section--dark .steps > li::after { background: var(--on-dark-line); }
@media (max-width: 900px) {
.steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.steps > li::after { display: none; }
}
@media (max-width: 560px) {
.steps { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
}
/* ============================== CHIPS =================================== */
.chips { display: flex; flex-wrap: wrap; gap: .55rem; }
.chip {
display: inline-flex; align-items: center; gap: .45rem;
font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
padding: .5rem .9rem;
border: 1px solid var(--brand-line);
border-radius: 999px;
color: var(--brand);
background: var(--brand-tint);
}
.section--dark .chip {
border-color: var(--on-dark-line); color: var(--on-dark); background: transparent;
}
.chip svg { width: 15px; height: 15px; }
.tag-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.1rem; }
.tag {
font-size: .8rem; font-weight: 500;
padding: .4rem .75rem;
border: 1px solid var(--line);
border-radius: 999px;
color: var(--ink-soft);
background: var(--surface);
}
/* =============================== FAQ ==================================== */
.faq { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
list-style: none;
cursor: pointer;
padding: 1.25rem 2.75rem 1.25rem 0;
position: relative;
font-family: var(--font-display);
font-weight: 600;
font-size: 1.03rem;
color: var(--ink);
transition: color .16s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--brand); }
.faq-item summary::after {
content: "";
position: absolute; right: .35rem; top: 50%;
width: 11px; height: 11px;
border-right: 2px solid var(--brand);
border-bottom: 2px solid var(--brand);
transform: translateY(-70%) rotate(45deg);
transition: transform .22s;
}
.faq-item[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq-item__body { padding: 0 2.5rem 1.4rem 0; font-size: .97rem; }
.faq-item__body > * + * { margin-top: .8rem; }
/* ============================== CTA BAND ================================ */
.cta-band { text-align: center; }
.cta-band .lede { margin-inline: auto; }
.cta-band .btn-row { justify-content: center; margin-top: 2rem; }
.cta-contacts {
display: flex; flex-wrap: wrap; justify-content: center;
gap: 1rem 2.5rem; margin-top: 2.6rem;
padding-top: 2.2rem; border-top: 1px solid var(--on-dark-line);
}
.cta-contacts a, .cta-contacts span {
display: inline-flex; align-items: center; gap: .55rem;
font-size: .95rem; color: var(--on-dark);
}
.cta-contacts svg { width: 18px; height: 18px; color: var(--accent); }
/* ============================== CONTACT ================================= */
.contact-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
gap: clamp(1.75rem, 4vw, 3.5rem);
align-items: start;
}
@media (max-width: 900px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }
.contact-card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: clamp(1.35rem, 2.5vw, 1.85rem);
}
.contact-list { margin-top: 1.4rem; }
.contact-list > li {
display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: .85rem;
padding-block: .95rem;
border-top: 1px solid var(--line);
align-items: start;
}
.contact-list > li:first-child { border-top: 0; padding-top: 0; }
.contact-list__ico {
width: 38px; height: 38px; border-radius: 10px;
display: grid; place-items: center;
background: var(--brand-tint); color: var(--brand);
}
.contact-list__ico svg { width: 19px; height: 19px; }
.contact-list b { display: block; font-size: .72rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-soft); }
.contact-list a { font-weight: 600; word-break: break-word; }
.form { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.35rem, 3vw, 2.1rem); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 620px) { .form-row { grid-template-columns: minmax(0, 1fr); } }
.field { margin-bottom: 1.05rem; }
.field label {
display: block; font-size: .82rem; font-weight: 600;
color: var(--ink); margin-bottom: .4rem;
}
.field input,
.field select,
.field textarea {
width: 100%;
font-family: var(--font-body);
font-size: .97rem;
color: var(--ink);
background: var(--page);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
padding: .8rem .95rem;
transition: border-color .16s, background .16s, box-shadow .16s;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus {
outline: none;
border-color: var(--brand);
background: var(--surface);
box-shadow: 0 0 0 3px var(--brand-tint-2);
}
.field input::placeholder, .field textarea::placeholder { color: color-mix(in srgb, var(--ink-soft) 60%, transparent); }
/* honeypot for bots - hidden without an offset, because a negative "left" makes
the page horizontally scrollable in right-to-left languages */
.hp {
position: absolute; width: 1px; height: 1px; overflow: hidden;
clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
opacity: 0; pointer-events: none;
}
.form-consent { display: flex; gap: .7rem; align-items: flex-start; font-size: .85rem; margin-bottom: 1.2rem; }
.form-consent input { margin-top: .3rem; width: 16px; height: 16px; flex: none; accent-color: var(--brand); }
.form-note { font-size: .82rem; margin-top: .9rem; text-align: center; }
.form-success {
border: 1px solid var(--brand-line);
background: var(--brand-tint);
border-radius: var(--radius-sm);
padding: 1.15rem 1.25rem;
color: var(--ink);
font-size: .95rem;
}
.form-success b { display: block; margin-bottom: .3rem; }
.form-error {
border: 1px solid var(--accent-line);
background: var(--accent-tint);
border-radius: var(--radius-sm);
padding: .85rem 1rem;
font-size: .9rem;
margin-top: 1rem;
color: var(--ink);
}
/* ---------------------------- document upload --------------------------- */
.upload {
position: relative;
border: 1.5px dashed var(--brand-line);
border-radius: var(--radius-sm);
background: var(--page);
padding: 1.15rem 1rem;
text-align: center;
color: var(--ink-soft);
transition: border-color .16s, background .16s;
cursor: pointer;
}
.upload:hover, .upload.is-drag { border-color: var(--brand); background: var(--brand-tint); }
.upload__input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.upload > svg { width: 26px; height: 26px; color: var(--brand); margin: 0 auto .45rem; }
.upload p { font-size: .9rem; line-height: 1.45; }
.upload strong { color: var(--ink); }
.upload__list { margin-top: .6rem; display: flex; flex-direction: column; gap: .4rem; }
.upload__list li {
display: flex; align-items: center; gap: .6rem;
font-size: .86rem; color: var(--ink);
background: var(--surface); border: 1px solid var(--line);
border-radius: var(--radius-sm); padding: .4rem .5rem .4rem .75rem;
}
.upload__list li > svg { width: 16px; height: 16px; color: var(--brand); flex: none; }
.upload__list li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload__list li small { color: var(--ink-soft); flex: none; }
.upload__list button {
border: 0; background: none; cursor: pointer; color: var(--ink-soft);
width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: none;
}
.upload__list button:hover { background: var(--accent-tint); color: var(--ink); }
.upload__list button svg { width: 14px; height: 14px; }
.upload__error { margin-top: .5rem; font-size: .85rem; color: #9b2c2c; }
.upload__note { font-size: .8rem; margin-top: .55rem; display: flex; gap: .4rem; align-items: flex-start; }
.upload__note svg { width: 14px; height: 14px; flex: none; margin-top: .2rem; color: var(--brand); }
/* ------------------------- VIP / excellence package ---------------------- */
.vip {
position: relative;
background: var(--brand-deep);
color: var(--on-dark-soft);
border: 1px solid var(--on-dark-line);
border-radius: var(--radius-lg);
padding: clamp(1.75rem, 4vw, 2.75rem);
overflow: hidden;
}
.vip::before {
content: "";
position: absolute; inset: 0;
background: radial-gradient(680px 320px at 100% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%);
pointer-events: none;
}
.vip > * { position: relative; }
.vip h2, .vip h3 { color: var(--on-dark); }
.vip__seal {
display: inline-flex; align-items: center; gap: .55rem;
border: 1px solid var(--accent);
color: var(--accent);
border-radius: 999px;
padding: .4rem .9rem;
font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
margin-bottom: 1.1rem;
}
.vip__seal svg { width: 15px; height: 15px; }
.vip__grid {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.1rem 2rem; margin-top: 1.8rem;
}
.vip__grid li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: .75rem; font-size: .96rem; }
.vip__grid svg { width: 18px; height: 18px; color: var(--accent); margin-top: .28rem; }
.vip__grid b { color: var(--on-dark); display: block; }
@media (max-width: 700px) { .vip__grid { grid-template-columns: minmax(0, 1fr); } }
/* -------------------------- diamond quality seal ------------------------ */
.seal {
display: inline-flex; align-items: center; gap: .65rem;
border: 1px solid var(--accent-line);
background: var(--accent-tint);
color: var(--accent-ink);
border-radius: 999px;
padding: .5rem 1rem .5rem .75rem;
font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.seal svg { width: 18px; height: 18px; color: var(--accent-ink); }
/* ------------------------------ trust bar ------------------------------- */
.trust-bar {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); /* 3 or 4 entries, no empty cell */
gap: 1px;
background: var(--on-dark-line);
border: 1px solid var(--on-dark-line);
border-radius: var(--radius);
overflow: hidden;
}
.trust-bar > div {
background: var(--brand-deep);
padding: 1.15rem 1.2rem;
display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: .7rem;
align-items: start;
}
.trust-bar svg { width: 19px; height: 19px; color: var(--accent); margin-top: .15rem; }
.trust-bar b { display: block; color: var(--on-dark); font-size: .92rem; font-family: var(--font-display); }
.trust-bar span { font-size: .82rem; line-height: 1.45; color: var(--on-dark-soft); }
.section--tint .trust-bar,
.section .trust-bar { background: var(--line); border-color: var(--line); }
.section--tint .trust-bar > div,
.section .trust-bar > div { background: var(--surface); }
.section .trust-bar svg { color: var(--accent-ink); }
.section .trust-bar b { color: var(--ink); }
.section .trust-bar span { color: var(--ink-soft); }
.section--dark .trust-bar { background: var(--on-dark-line); border-color: var(--on-dark-line); }
.section--dark .trust-bar > div { background: var(--brand-deep); }
.section--dark .trust-bar svg { color: var(--accent); }
.section--dark .trust-bar b { color: var(--on-dark); }
.section--dark .trust-bar span { color: var(--on-dark-soft); }
@media (max-width: 900px) { .trust-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .trust-bar { grid-template-columns: minmax(0, 1fr); } }
/* ---------------------------- booking block -----------------------------
Two compact rows instead of two cards: fits narrow columns without the
button text wrapping. */
.booking {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
overflow: hidden;
}
.booking__row {
display: grid;
grid-template-columns: 44px minmax(0, 1fr) auto;
gap: 1rem;
align-items: center;
padding: 1.15rem 1.25rem;
}
.booking__row + .booking__row { border-top: 1px solid var(--line); }
.booking__row--lead { background: var(--accent-tint); }
.booking__ico {
width: 44px; height: 44px; border-radius: 12px;
display: grid; place-items: center;
background: var(--brand-tint); color: var(--brand);
}
.booking__row--lead .booking__ico { background: var(--surface); color: var(--accent-ink); }
.booking__ico svg { width: 21px; height: 21px; }
.booking__row h3 { font-size: 1.02rem; margin-bottom: .15rem; }
.booking__row p { font-size: .88rem; line-height: 1.45; }
.booking__row .btn { white-space: nowrap; }
@media (max-width: 620px) {
.booking__row { grid-template-columns: 44px minmax(0, 1fr); }
.booking__row .btn { grid-column: 1 / -1; width: 100%; }
}
/* ------------------------ live-class illustration ----------------------- */
.mockup {
background: var(--brand-deep);
border-radius: var(--radius-lg);
padding: clamp(.8rem, 2vw, 1.15rem);
box-shadow: var(--shadow-lg);
border: 1px solid var(--on-dark-line);
}
.mockup svg { width: 100%; height: auto; display: block; border-radius: 10px; }
.mockup__cap {
display: flex; align-items: center; gap: .55rem;
color: var(--on-dark-soft); font-size: .8rem;
padding: .75rem .35rem .1rem;
}
.mockup__cap svg { width: 15px; height: 15px; color: var(--accent); }
.mockup__dot {
width: 8px; height: 8px; border-radius: 50%; background: #4ade80;
box-shadow: 0 0 0 3px rgba(74, 222, 128, .18);
flex: none;
}
/* =============================== FOOTER ================================= */
.site-footer {
background: var(--brand-deep);
color: var(--on-dark-soft);
padding-block: clamp(2.75rem, 5vw, 4rem) 1.75rem;
font-size: .93rem;
}
.site-footer h4 {
color: var(--on-dark);
font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
margin-bottom: 1rem;
}
.footer-grid {
display: grid;
grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
gap: clamp(1.75rem, 4vw, 3rem);
}
@media (max-width: 880px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: minmax(0, 1fr); } }
.footer-about { margin-top: 1.15rem; max-width: 38ch; }
.footer-links li + li { margin-top: .6rem; }
.footer-links a { color: var(--on-dark-soft); }
.footer-links a:hover { color: var(--on-dark); }
.footer-bottom {
margin-top: clamp(2rem, 4vw, 3rem);
padding-top: 1.5rem;
border-top: 1px solid var(--on-dark-line);
display: flex; flex-wrap: wrap; gap: .75rem 1.75rem;
align-items: center; justify-content: space-between;
font-size: .84rem;
}
.footer-bottom ul { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.social { display: flex; gap: .5rem; margin-top: 1.4rem; }
.social a {
width: 38px; height: 38px; border-radius: 50%;
display: grid; place-items: center;
border: 1px solid var(--on-dark-line);
color: var(--on-dark-soft);
transition: color .18s, border-color .18s, background .18s;
}
.social a:hover { color: var(--on-dark); border-color: var(--on-dark); background: rgba(255, 255, 255, .06); }
.social svg { width: 17px; height: 17px; }
/* ===================== WHATSAPP CHAT WIDGET ============================
Floating button that opens a small chat window. What the visitor types is
handed over to WhatsApp. The number is set in assets/js/main.js
(WHATSAPP_NUMBER) - one place for the whole site.
====================================================================== */
.chat-launcher {
position: fixed;
right: clamp(1rem, 3vw, 1.6rem);
bottom: clamp(1rem, 3vw, 1.6rem);
z-index: 200;
width: 58px; height: 58px;
border-radius: 50%;
border: 0;
background: var(--whatsapp);
color: #fff;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
box-shadow: 0 10px 26px -8px rgba(7, 94, 84, .55);
transition: transform .2s ease;
}
.chat-launcher:hover { transform: scale(1.07); }
.chat-launcher svg { width: 30px; height: 30px; }
.chat-launcher .icon-close { display: none; width: 21px; height: 21px; }
.chat-launcher[aria-expanded="true"] .icon-wa { display: none; }
.chat-launcher[aria-expanded="true"] .icon-close { display: block; }
.chat-panel {
position: fixed;
right: clamp(1rem, 3vw, 1.6rem);
bottom: calc(clamp(1rem, 3vw, 1.6rem) + 68px);
z-index: 200;
width: min(360px, calc(100vw - 2rem));
background: var(--surface);
border-radius: 18px;
overflow: hidden;
box-shadow: 0 24px 60px -18px rgba(9, 30, 32, .45);
opacity: 0;
transform: translateY(14px) scale(.98);
visibility: hidden;
transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.chat-panel.open { opacity: 1; transform: none; visibility: visible; }
.chat-head {
display: flex; align-items: center; gap: .8rem;
background: var(--brand);
color: var(--on-brand);
padding: .95rem 1.1rem;
}
.chat-avatar {
width: 44px; height: 44px;
border-radius: 50%;
background: var(--surface);
color: var(--whatsapp);
display: grid; place-items: center;
flex: none;
}
.chat-avatar svg { width: 27px; height: 27px; }
.chat-head-name { font-family: var(--font-display); font-weight: 700; font-size: .95rem; line-height: 1.3; }
.chat-head-status { font-size: .74rem; opacity: .85; line-height: 1.35; }
.chat-body { background: #e7ded4; padding: 1.1rem; min-height: 96px; }
.chat-bubble {
background: #fff;
border-radius: 0 12px 12px 12px;
padding: .7rem .95rem;
font-size: .92rem; line-height: 1.55;
color: var(--ink);
max-width: 90%;
box-shadow: 0 1px 1px rgba(0, 0, 0, .08);
}
.chat-input-row {
display: flex; align-items: center; gap: .6rem;
padding: .8rem;
background: var(--page);
}
.chat-input {
flex: 1; min-width: 0;
border: 1px solid var(--line);
border-radius: 999px;
padding: .68rem 1.05rem;
font-family: var(--font-body);
font-size: .95rem;
color: var(--ink);
background: var(--surface);
outline: none;
transition: border-color .15s ease;
}
.chat-input:focus { border-color: var(--whatsapp); }
.chat-send {
width: 44px; height: 44px; flex: none;
border: 0; border-radius: 50%;
background: var(--whatsapp);
color: #fff;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: filter .15s ease, transform .15s ease;
}
.chat-send:hover { filter: brightness(.94); transform: scale(1.06); }
.chat-send svg { width: 20px; height: 20px; }
.chat-alt {
padding: .85rem 1rem;
background: var(--surface);
border-top: 1px solid var(--line);
text-align: center;
}
.chat-alt a {
display: inline-flex; align-items: center; gap: .45rem;
font-size: .89rem; font-weight: 600;
color: var(--brand);
}
.chat-alt a:hover { color: var(--brand-strong); }
.chat-alt svg { width: 1em; height: 1em; }
@media (max-width: 640px) {
.chat-launcher { width: 54px; height: 54px; }
.chat-panel { right: .8rem; bottom: 5.2rem; width: calc(100vw - 1.6rem); }
}
/* ========================== SCROLL REVEAL =============================== */
.reveal {
opacity: 0;
transform: translateY(16px);
transition: opacity .55s ease, transform .55s ease;
transition-delay: var(--delay, 0s);
}
.reveal.in-view { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
* { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
.reveal { opacity: 1; transform: none; }
.btn:hover { transform: none; }
}
/* ============================== LEGAL PAGES ============================= */
.legal { max-width: 800px; }
.legal h2 { font-size: 1.35rem; margin-top: 2.5rem; margin-bottom: .8rem; }
.legal h3 { font-size: 1.05rem; margin-top: 1.6rem; margin-bottom: .5rem; }
.legal p + p { margin-top: .9rem; }
.legal ul { margin-top: .8rem; }
.legal ul li { position: relative; padding-left: 1.2rem; margin-top: .45rem; }
.legal ul li::before {
content: ""; position: absolute; left: 0; top: .62em;
width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}
/* marks every value that still has to be entered - works on light and on
dark sections. Delete the once the real data
is in place, then no yellow is left on the site. */
.placeholder {
background: var(--todo);
border-bottom: 1px dashed var(--todo-line);
padding: .1em .35em;
border-radius: 3px;
font-weight: 600;
color: #2b2200;
}
a .placeholder { text-decoration: none; }
a:hover .placeholder { background: var(--marker); }
/* yellow variant of the note box: "this still has to be completed" */
.note--todo {
background: #fff8d6;
background: color-mix(in srgb, var(--todo) 60%, var(--surface));
border-left-color: var(--todo-line);
color: var(--ink);
}
/* ===================== ROUND 3 - CLIENT FEEDBACK 09.09.2026 ================ */
/* --- the "special programme" band: a light tint (--band-alt) with dark
text - client feedback 15.09.2026; until then it was a dark charcoal band --- */
.section--alt {
background: var(--band-alt);
position: relative;
overflow: hidden;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.section--alt::before {
content: "";
position: absolute; inset: 0;
pointer-events: none;
background-image: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--brand) 14%, transparent) 1px, transparent 0);
background-size: 26px 26px;
}
.section--alt > * { position: relative; z-index: 1; }
/* --- long words in the narrow heading column (German compounds such as
"Sprachwissenschaftler") break with a hyphen instead of running into the
text column - client remark 15.09.2026 --- */
.rail__head h1, .rail__head h2, .page-hero h1 { overflow-wrap: anywhere; }
:lang(de) .rail__head h2, :lang(de) .page-hero h1 {
hyphens: auto;
-webkit-hyphens: auto;
-webkit-hyphenate-limit-before: 6;
-webkit-hyphenate-limit-after: 6;
hyphenate-limit-chars: 14 6 6;
}
/* --- the client's numbered badges on the service cards ---
assets/img/badge-1.svg ... badge-6.svg are his files (colours and numerals
included); to change a badge, replace the file. */
.medal {
position: absolute; top: 1rem; inset-inline-end: 1rem;
width: 76px; height: 76px;
}
.medal img { display: block; width: 100%; height: 100%; }
.svc-card h3 { padding-inline-end: 84px; }
@media (max-width: 560px) {
.medal { width: 64px; height: 64px; }
.svc-card h3 { padding-inline-end: 72px; }
}
/* --- welcome strip now sits under the numbers panel --- */
.hero__visual .scripts { margin-top: 1.1rem; }
.hero__visual .scripts li { padding: .65rem .55rem; }
.hero__visual .scripts__glyph { font-size: clamp(.86rem, 1.05vw, .98rem); }
.hero__visual .scripts__glyph--ar { font-size: clamp(.92rem, 1.1vw, 1.02rem); }
.hero__visual .scripts__glyph--tf { font-size: clamp(.92rem, 1.1vw, 1.04rem); }
.hero__visual .scripts__name { font-size: .6rem; letter-spacing: .1em; }
@media (max-width: 560px) {
/* one slim ribbon of five greetings instead of ragged 2 + 2 + 1 cards */
.hero__visual .scripts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.hero__visual .scripts li { padding: .6rem 0; align-items: center; text-align: center; overflow: hidden; }
.hero__visual .scripts__name { display: none; }
.hero__visual .scripts__glyph { font-size: clamp(.58rem, 2.75vw, .85rem); letter-spacing: -.015em; }
.hero__visual .scripts__glyph--ar,
.hero__visual .scripts__glyph--tf { font-size: clamp(.66rem, 3vw, .9rem); }
}
/* --- the process: big numerals on a hairline, a fact line under each step --- */
.flow {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(1.2rem, 2.5vw, 2.4rem);
margin-top: 2.6rem;
}
.flow > li { position: relative; padding-top: .2rem; display: flex; flex-direction: column; }
.flow > li .flow__meta { margin-top: auto; padding-top: .8rem; }
.flow > li > p:not(.flow__meta) { margin-bottom: 1.1rem; }
.flow__head {
display: flex; align-items: center; gap: .9rem;
margin-bottom: 1.4rem;
}
.flow__head::before {
content: ""; width: 1.4rem; height: 1.5px; flex: none;
background: var(--accent-line);
}
.flow__head::after {
content: ""; flex: 1 1 auto; height: 1.5px;
background: linear-gradient(to right, var(--accent), var(--accent-line));
}
.flow__num {
font-family: var(--font-display);
font-size: clamp(2.2rem, 3vw, 2.9rem); line-height: 1;
font-weight: 800; color: var(--accent-ink);
letter-spacing: -.02em;
}
.flow h3 { font-size: 1.12rem; margin-bottom: .55rem; }
.flow p { font-size: .94rem; }
.flow__meta {
margin-top: 1.1rem; padding-top: .8rem;
border-top: 1px solid var(--line);
font-size: .8rem; font-weight: 600; color: var(--accent-ink);
letter-spacing: .01em;
}
.flow__foot {
margin-top: clamp(2rem, 4vw, 3.2rem); padding-top: clamp(1.6rem, 3vw, 2.4rem);
border-top: 1px solid var(--line);
display: flex; align-items: center; justify-content: space-between;
gap: 2rem;
}
.flow__foot p { max-width: 34rem; color: var(--ink-soft); }
@media (max-width: 900px) {
.flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.flow__foot { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 560px) {
.flow { grid-template-columns: minmax(0, 1fr); gap: 1.8rem; }
}
/* --- "Follow us": round icons threaded on a wavy line, top of the footer --- */
.follow {
text-align: center;
padding-bottom: clamp(2rem, 4vw, 3rem);
margin-bottom: clamp(2rem, 4vw, 3rem);
border-bottom: 1px solid var(--on-dark-line);
}
.follow__title {
color: var(--on-dark);
font-family: var(--font-display);
font-weight: 700; font-size: clamp(1.15rem, 1.8vw, 1.45rem);
letter-spacing: -.01em;
margin-bottom: 1.6rem;
}
.follow__line { position: relative; max-width: 780px; margin-inline: auto; }
.follow__wave {
position: absolute; left: 0; right: 0; top: 50%;
width: 100%; height: 32px; transform: translateY(-50%);
overflow: visible; pointer-events: none;
}
.follow__wave path { fill: none; stroke: var(--accent); stroke-width: 1.4; opacity: .55; }
.follow__icons {
position: relative;
display: flex; justify-content: space-between; align-items: center;
padding-inline: 6%;
}
.follow__icons a {
width: 46px; height: 46px; border-radius: 50%;
display: grid; place-items: center;
background: var(--accent);
color: var(--on-accent);
box-shadow: 0 0 0 6px var(--brand-deep);
transition: transform .18s, background .18s;
}
.follow__icons a:nth-child(odd) { transform: translateY(-5px); }
.follow__icons a:nth-child(even) { transform: translateY(5px); }
.follow__icons a:hover { background: var(--on-dark); transform: translateY(0) scale(1.06); }
.follow__icons svg { width: 19px; height: 19px; }
@media (max-width: 560px) {
.follow__icons { padding-inline: 2%; }
.follow__icons a { width: 40px; height: 40px; }
.follow__icons svg { width: 17px; height: 17px; }
}
/* --- the live-class photo that replaced the drawn mock-up --- */
.mockup img {
width: 100%; height: auto; display: block; border-radius: 10px;
aspect-ratio: 16 / 10; object-fit: cover;
}
/* the mobile menu lost its booking button; give the last items a little room */
.nav-cta-item { display: none; }
/* ============================ RIGHT TO LEFT =============================
Only what the automatic mirroring of `dir="rtl"` cannot handle by itself:
sides that are set explicitly in the layout.
====================================================================== */
[dir="rtl"] .quote { padding-left: 0; padding-right: clamp(1rem, 2vw, 1.5rem); border-left: 0; border-right: 3px solid var(--accent); }
[dir="rtl"] .hero__quote { padding-left: 0; padding-right: 1.1rem; border-left: 0; border-right: 2px solid var(--accent); }
[dir="rtl"] .note { border-left: 0; border-right: 2px solid var(--accent); border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
[dir="rtl"] .trust { border-left-width: 1px; border-right: 3px solid var(--accent); }
[dir="rtl"] .scripts li { border-left: 0; border-right: 1px solid var(--line); }
[dir="rtl"] .scripts li:first-child { border-right: 0; }
[dir="rtl"] .hero__stat { border-left: 0; border-right: 1px solid var(--line); }
[dir="rtl"] .hero__stat:nth-child(odd) { border-right: 0; }
[dir="rtl"] .stats > div { border-left: 0; border-right: 1px solid var(--line); }
[dir="rtl"] .stats > div:first-child { border-right: 0; }
[dir="rtl"] .faq-item summary { padding: 1.25rem 0 1.25rem 2.75rem; }
[dir="rtl"] .faq-item summary::after { right: auto; left: .35rem; }
[dir="rtl"] .faq-item__body { padding: 0 0 1.4rem 2.5rem; }
[dir="rtl"] .steps__icon { left: auto; right: 0; }
[dir="rtl"] .steps__num { left: auto; right: 42px; }
[dir="rtl"] .steps > li::after { left: -14px; right: 62px; background: linear-gradient(to left, var(--accent-line), var(--line)); }
[dir="rtl"] .lang__menu { right: auto; left: 0; }
[dir="rtl"] .chat-panel, [dir="rtl"] .chat-launcher { right: auto; left: clamp(1rem, 3vw, 1.6rem); }
[dir="rtl"] .chat-bubble { border-radius: 12px 0 12px 12px; }
[dir="rtl"] .skip-link { left: auto; right: 1rem; }
[dir="rtl"] .check-list > li { padding-left: 0; padding-right: 1.6rem; }
[dir="rtl"] .check-list > li::before { left: auto; right: 0; }
[dir="rtl"] .legal ul li { padding-left: 0; padding-right: 1.2rem; }
[dir="rtl"] .legal ul li::before { left: auto; right: 0; }
/* the page header glow sits on the other side in right-to-left pages */
[dir="rtl"] .page-hero--media::before {
background:
radial-gradient(640px 340px at 12% 12%, var(--brand-tint) 0%, transparent 70%);
background:
radial-gradient(640px 340px at 12% 12%, color-mix(in srgb, var(--brand) 16%, transparent) 0%, transparent 70%),
radial-gradient(460px 260px at 30% 100%, color-mix(in srgb, var(--accent) 16%, transparent) 0%, transparent 70%),
radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--brand) 11%, transparent) 1px, transparent 0) 0 0 / 26px 26px;
}
/* arrows point the other way - only the arrow icon, not the other icons */
[dir="rtl"] svg:has(> use[href="#i-arrow"]) { transform: scaleX(-1); }
[dir="rtl"] .link-arrow:hover svg { transform: scaleX(-1) translateX(4px); }
/* ============================== PRINT =================================== */
@media print {
.site-header, .chat-launcher, .chat-panel, .btn, .svc-nav, .site-footer { display: none !important; }
body { background: #fff; color: #000; }
.reveal { opacity: 1; transform: none; }
}