/* ==========================================================================
GoTop Academy
Mobile-first, RTL-aware (logical properties everywhere).
Themes: the light palette lives on :root and is what everybody gets. The
dark palette lives on :root[data-theme="dark"] and is only applied when
layout.php prints that attribute (config.php > theme: light | dark | auto).
Section order matters — never truncate this file at a section marker to
rewrite a later one: the component styles (forms, course cards, badges,
dashboards, tables) live between "Home page" and "Sign in / register" and
are what every logged-in page depends on.
========================================================================== */
:root {
/* The page is light unless says otherwise, so the
scroll bars and the native form controls have to be told as well. */
color-scheme: light;
--bg: #f6f7fb;
--bg-elevated: #ffffff;
--ink: #10131c;
--ink-soft: #5a6076;
--ink-faint: #8b90a3;
--line: #e5e7f0;
--line-strong: #d3d7e6;
/* Fixed brand blue: identical in both themes, always carries white text. */
--brand: #0d6efd;
--brand-dark: #0b5ed7;
--brand-deep: #062e6f;
--accent: #0d6efd;
--accent-dark: #0b5ed7;
--accent-soft: #e7f0ff;
--accent-ink: #ffffff;
--accent-2: #0aa2c0;
--dark: #212529;
--dark-soft: #2b3035;
--on-dark: #f8f9fa;
--on-dark-soft: #adb5bd;
--shadow: 0 1px 2px rgba(16, 19, 28, .05), 0 8px 24px rgba(16, 19, 28, .06);
--shadow-lift: 0 2px 4px rgba(16, 19, 28, .06), 0 16px 40px rgba(13, 110, 253, .16);
--radius: 16px;
--radius-sm: 10px;
--shell: 1080px;
--font: "Lora", Georgia, "Times New Roman", serif;
--font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--font-ar: "Noto Kufi Arabic", "Segoe UI", system-ui, sans-serif;
}
/* Dark theme — ready, but only worn when the element asks for it
(config.php > theme = dark, or theme = auto to follow the visitor's system).
It is deliberately NOT a prefers-color-scheme block any more: the academy
wants the white page by default, whatever the phone is set to. */
:root[data-theme="dark"] {
color-scheme: dark;
--bg: #0b0d14;
--bg-elevated: #141824;
--ink: #f2f4fb;
--ink-soft: #a8aec4;
--ink-faint: #767c93;
--line: #232838;
--line-strong: #333a4f;
--accent: #6ea8fe;
--accent-dark: #8bb9fe;
--accent-soft: #17233b;
--accent-ink: #0b0d14;
--accent-2: #3dd5f3;
--dark: #10131a;
--dark-soft: #171b24;
--on-dark: #f2f4fb;
--on-dark-soft: #98a0b5;
--shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
--shadow-lift: 0 2px 4px rgba(0, 0, 0, .4), 0 16px 40px rgba(0, 0, 0, .5);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
background: var(--bg);
color: var(--ink);
font-family: var(--font);
font-size: 16px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
}
body.lang-ar { font-family: var(--font-ar); }
/* Serif headlines like the main site, sans-serif for controls and data. */
.langswitch, .account, .progress, .crumbs, .btn, .badge, .pill, .row__badge,
.course-card__code, .stat__label, .contact__label, .fact dt, table, input, select, button {
font-family: var(--font-ui);
}
body.lang-ar .langswitch, body.lang-ar .account, body.lang-ar .progress,
body.lang-ar .crumbs, body.lang-ar .btn, body.lang-ar .pill {
font-family: var(--font-ar);
}
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; line-height: 1.2; letter-spacing: -0.02em; }
ul, ol, dl, dd { margin: 0; padding: 0; list-style: none; }
button { font: inherit; }
.shell {
width: 100%;
max-width: var(--shell);
margin-inline: auto;
padding-inline: 20px;
}
/* Clipped instead of pushed off-screen: a negative inset-inline-start would
widen the document in RTL. */
.skip-link {
position: absolute;
inline-size: 1px;
block-size: 1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.skip-link:focus {
position: fixed;
inset-block-start: 12px;
inset-inline-start: 12px;
inline-size: auto;
block-size: auto;
z-index: 20;
clip-path: none;
background: var(--bg-elevated);
padding: 8px 14px;
border-radius: var(--radius-sm);
box-shadow: var(--shadow);
}
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
border-radius: 6px;
}
/* ---------- Header ------------------------------------------------------ */
.topbar {
position: sticky;
top: 0;
z-index: 10;
background: color-mix(in srgb, var(--bg-elevated) 88%, transparent);
backdrop-filter: saturate(180%) blur(12px);
border-block-end: 1px solid var(--line);
}
.topbar__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-height: 64px;
}
.brand { display: inline-flex; align-items: center; gap: 12px; }
/* The real GoTop Academy logo already carries the name — no text beside it. */
.brand__logo {
display: block;
block-size: 42px;
inline-size: auto;
max-inline-size: 100%;
}
.brand__logo--chip {
block-size: 54px;
padding: 6px 10px;
border-radius: 12px;
background: #fff;
}
@media (max-width: 560px) { .brand__logo { block-size: 36px; } }
.brand__mark {
display: grid;
place-items: center;
inline-size: 38px;
block-size: 38px;
border-radius: 12px;
background: linear-gradient(135deg, var(--brand), var(--accent-2));
color: #fff;
font-weight: 700;
font-size: 20px;
box-shadow: var(--shadow);
}
.brand__text { display: flex; flex-direction: column; }
.brand__name { font-weight: 700; letter-spacing: -0.02em; }
.brand__tagline { font-size: 12px; color: var(--ink-faint); }
.langswitch {
display: inline-flex;
gap: 4px;
padding: 4px;
background: var(--bg);
border: 1px solid var(--line);
border-radius: 999px;
}
.langswitch__item {
padding: 6px 12px;
border-radius: 999px;
font-size: 13px;
font-weight: 500;
color: var(--ink-soft);
white-space: nowrap;
transition: background .15s ease, color .15s ease;
}
.langswitch__item:hover { color: var(--ink); }
.langswitch__item.is-active { background: var(--accent); color: var(--accent-ink); }
/* Full language names do not fit next to the brand on a phone: switch to
the two-letter codes instead of letting the header overflow. */
.langswitch__short { display: none; }
@media (max-width: 560px) {
.langswitch__full { display: none; }
.langswitch__short { display: inline; }
.langswitch__item { padding: 6px 10px; font-weight: 600; letter-spacing: .04em; }
}
@media (max-width: 400px) {
.brand__tagline { display: none; }
}
/* The header keeps its actions on one line whatever they are. */
.topbar__actions { display: inline-flex; align-items: center; gap: 10px; }
/* Light / dark switch: one round button showing the theme it will give you —
a moon while the page is light, a sun while it is dark. */
.themeswitch {
display: inline-grid;
place-items: center;
inline-size: 38px;
block-size: 38px;
padding: 0;
border: 1px solid var(--line);
border-radius: 999px;
background: var(--bg);
color: var(--ink-soft);
cursor: pointer;
transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.themeswitch:hover { color: var(--ink); border-color: var(--line-strong); }
.themeswitch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Both icons share one grid cell, so swapping them cannot move the button. */
.themeswitch__icon { grid-area: 1 / 1; line-height: 0; }
.themeswitch__icon--sun { display: none; }
:root[data-theme="dark"] .themeswitch__icon--sun { display: block; }
:root[data-theme="dark"] .themeswitch__icon--moon { display: none; }
@media (max-width: 560px) {
.themeswitch { inline-size: 34px; block-size: 34px; }
}
/* ---------- Progress ---------------------------------------------------- */
.progress { border-block-end: 1px solid var(--line); background: var(--bg-elevated); }
.progress__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding-block: 12px;
}
.progress__steps {
display: flex;
align-items: center;
gap: 8px;
overflow-x: auto;
scrollbar-width: none;
}
.progress__steps::-webkit-scrollbar { display: none; }
.progress__step > * {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 4px 10px 4px 4px;
border-radius: 999px;
color: var(--ink-faint);
white-space: nowrap;
font-size: 13px;
}
.progress__step:not(:last-child)::after {
content: "";
display: inline-block;
inline-size: 14px;
border-block-start: 1px solid var(--line-strong);
vertical-align: middle;
margin-inline: 2px;
}
.progress__dot {
display: grid;
place-items: center;
inline-size: 24px;
block-size: 24px;
border-radius: 50%;
border: 1px solid var(--line-strong);
font-size: 12px;
font-weight: 600;
}
.progress__step.is-done > * { color: var(--ink); }
.progress__step.is-done .progress__dot {
background: var(--accent);
border-color: var(--accent);
color: var(--accent-ink);
}
.progress__step.is-current > * { color: var(--accent); }
.progress__step.is-current .progress__dot {
border-color: var(--accent);
color: var(--accent);
background: var(--accent-soft);
}
.progress__count { margin: 0; font-size: 13px; color: var(--ink-faint); white-space: nowrap; }
@media (max-width: 720px) {
.progress__label { display: none; }
.progress__step > * { padding-inline: 4px; }
}
/* ---------- Breadcrumbs ------------------------------------------------- */
.crumbs__inner {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding-block: 14px 0;
}
.crumb {
display: inline-flex;
flex-direction: column;
padding: 6px 12px;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
background: var(--bg-elevated);
transition: border-color .15s ease, transform .15s ease;
}
.crumb:hover { border-color: var(--accent); transform: translateY(-1px); }
.crumb__label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); }
.crumb__value { font-size: 13px; font-weight: 600; }
.crumb--reset {
justify-content: center;
font-size: 13px;
color: var(--ink-soft);
border-style: dashed;
}
/* ---------- Screens ----------------------------------------------------- */
main { flex: 1; padding-block: 28px 56px; }
.screen__head { margin-block-end: 24px; max-inline-size: 56ch; }
.screen__eyebrow {
margin: 0 0 6px;
font-size: 12px;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--accent);
}
.screen__title { font-size: clamp(26px, 5vw, 38px); font-weight: 700; }
.screen__sub { margin: 10px 0 0; color: var(--ink-soft); }
.screen--hero { padding-block-start: clamp(12px, 6vw, 48px); }
.multiline { display: block; }
.multiline + .multiline { color: var(--ink-faint); font-size: .62em; font-weight: 600; }
/* ---------- Grids and cards --------------------------------------------- */
.grid { display: grid; gap: 14px; }
.grid--languages { grid-template-columns: 1fr; margin-block-start: 8px; }
.grid--cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
@media (min-width: 720px) {
.grid--languages { grid-template-columns: repeat(3, 1fr); }
}
.card {
position: relative;
display: flex;
flex-direction: column;
gap: 6px;
block-size: 100%;
padding: 20px;
background: var(--bg-elevated);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow);
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover {
transform: translateY(-2px);
border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
box-shadow: var(--shadow-lift);
}
.card__icon { font-size: 26px; line-height: 1; }
.card__code {
font-size: 12px;
font-weight: 700;
letter-spacing: .12em;
color: var(--accent);
}
.card__number {
display: grid;
place-items: center;
inline-size: 34px;
block-size: 34px;
border-radius: 10px;
background: var(--accent-soft);
color: var(--accent);
font-weight: 700;
}
.card__title { font-size: 18px; font-weight: 600; }
.card__sub { font-size: 13px; color: var(--ink-soft); }
.card__arrow {
margin-block-start: auto;
padding-block-start: 10px;
color: var(--accent);
font-size: 18px;
transition: transform .18s ease;
}
.card:hover .card__arrow { transform: translateX(4px); }
[dir="rtl"] .card__arrow { transform: scaleX(-1); }
[dir="rtl"] .card:hover .card__arrow { transform: scaleX(-1) translateX(4px); }
.card--language { min-block-size: 150px; }
.card--disabled,
.row--disabled {
opacity: .55;
box-shadow: none;
cursor: not-allowed;
}
.card--disabled:hover { transform: none; border-color: var(--line); box-shadow: none; }
.card__soon, .row__soon, .pill {
align-self: flex-start;
margin-block-start: auto;
padding: 3px 10px;
border-radius: 999px;
background: var(--accent-soft);
color: var(--accent);
font-size: 11px;
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
white-space: nowrap;
}
/* ---------- Search + list ----------------------------------------------- */
.search {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
margin-block-end: 16px;
}
.search__field {
position: relative;
display: flex;
align-items: center;
flex: 1 1 240px;
/* without this the input's intrinsic min-width keeps the field from
shrinking, and the page scrolls sideways on a phone */
min-inline-size: 0;
background: var(--bg-elevated);
border: 1px solid var(--line);
border-radius: 999px;
box-shadow: var(--shadow);
transition: border-color .15s ease;
}
.search__field:focus-within { border-color: var(--accent); }
.search__icon {
padding-inline: 16px 0;
font-size: 20px;
color: var(--ink-faint);
}
.search__field input {
flex: 1;
padding: 14px 16px;
border: 0;
border-radius: inherit;
background: transparent;
color: inherit;
font: inherit;
min-inline-size: 0;
}
.search__field input:focus { outline: none; }
.search__field input::-webkit-search-cancel-button { cursor: pointer; }
.search__count { margin: 0; font-size: 13px; color: var(--ink-faint); }
.list { display: grid; gap: 10px; }
.row {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 16px;
background: var(--bg-elevated);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.row:hover {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
box-shadow: var(--shadow);
}
.row__badge {
display: grid;
place-items: center;
min-inline-size: 56px;
padding: 6px 8px;
border-radius: 8px;
background: var(--accent-soft);
color: var(--accent);
font-size: 12px;
font-weight: 700;
letter-spacing: .04em;
}
.row__body { display: flex; flex-direction: column; flex: 1; min-inline-size: 0; }
.row__title { font-weight: 600; }
.row__meta { font-size: 12px; color: var(--ink-faint); }
.row__arrow { color: var(--accent); }
[dir="rtl"] .row__arrow { transform: scaleX(-1); }
.empty {
margin: 18px 0 0;
padding: 18px;
border: 1px dashed var(--line-strong);
border-radius: var(--radius-sm);
color: var(--ink-soft);
text-align: center;
}
/* ---------- Destination page -------------------------------------------- */
.hero {
padding: clamp(20px, 4vw, 32px);
border-radius: var(--radius);
background:
radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%),
var(--bg-elevated);
border: 1px solid var(--line);
box-shadow: var(--shadow);
}
.hero__eyebrow {
margin: 0 0 6px;
font-size: 12px;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--accent);
}
.hero__title { font-size: clamp(24px, 4.4vw, 34px); font-weight: 700; }
.hero__sub { margin: 8px 0 0; color: var(--ink-soft); }
.facts {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
gap: 12px;
margin-block: 22px 18px;
}
.fact {
padding: 12px 14px;
border-radius: var(--radius-sm);
background: var(--bg);
border: 1px solid var(--line);
}
.fact dt {
font-size: 11px;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--ink-faint);
}
.fact dd { margin: 4px 0 0; font-weight: 600; }
.fact__short { color: var(--ink-faint); font-weight: 500; }
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 18px;
border: 1px solid var(--accent);
border-radius: 999px;
background: var(--accent);
color: var(--accent-ink);
font-weight: 600;
font-size: 14px;
cursor: pointer;
transition: filter .15s ease;
}
.btn:hover { filter: brightness(1.06); }
.btn--ghost { background: transparent; color: var(--accent); }
.btn--light {
background: #fff;
border-color: #fff;
color: var(--brand);
}
.btn--light:hover { background: #f1f5ff; }
.panels {
display: grid;
gap: 16px;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}
.panel {
margin-block-start: 20px;
padding: clamp(16px, 3vw, 24px);
background: var(--bg-elevated);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow);
}
.panel--half { margin-block-start: 0; }
.panel__head {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px 12px;
margin-block-end: 14px;
}
.panel__title {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 17px;
font-weight: 700;
}
.panel__icon { font-size: 20px; }
.pill { margin-block-start: 0; }
.semester + .semester { margin-block-start: 18px; }
.semester__title {
margin-block-end: 10px;
font-size: 14px;
font-weight: 600;
color: var(--ink-soft);
}
.courses { display: grid; gap: 8px; }
.course {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
background: var(--bg);
}
.course__code { font-size: 12px; font-weight: 700; color: var(--accent); min-inline-size: 76px; }
.course__title { flex: 1; font-weight: 500; }
.course__credits { font-size: 12px; color: var(--ink-faint); }
.placeholder {
padding: 16px;
border: 1px dashed var(--line-strong);
border-radius: var(--radius-sm);
background: var(--bg);
}
.placeholder__text { margin: 0 0 12px; color: var(--ink-soft); font-size: 14px; }
.skeleton { display: grid; gap: 8px; }
.skeleton span {
display: block;
block-size: 12px;
border-radius: 6px;
background: linear-gradient(90deg, var(--line) 0%, var(--line-strong) 50%, var(--line) 100%);
background-size: 200% 100%;
animation: shimmer 2.2s ease-in-out infinite;
}
.skeleton span:nth-child(2) { inline-size: 78%; animation-delay: .15s; }
.skeleton span:nth-child(3) { inline-size: 56%; animation-delay: .3s; }
@keyframes shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
}
}
/* ---------- Footer ------------------------------------------------------ */
.footer {
margin-block-start: auto;
background: var(--dark);
color: var(--on-dark);
}
.footer__grid {
display: grid;
gap: 28px;
padding-block: 44px 28px;
grid-template-columns: 1fr;
}
@media (min-width: 760px) {
.footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 36px; }
}
.brand--footer { color: var(--on-dark); }
.footer__tagline { margin: 12px 0 0; color: var(--on-dark-soft); font-size: 14px; max-inline-size: 40ch; }
.footer__heading {
margin: 0 0 12px;
font-size: 13px;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--on-dark);
font-family: var(--font-ui);
}
.footer__links { display: flex; flex-direction: column; gap: 8px; align-items: start; }
.footer__links a, .footer__contact a { color: var(--on-dark-soft); font-size: 14px; }
.footer__links a:hover, .footer__contact a:hover { color: #fff; text-decoration: underline; }
.footer__contact p { margin: 0 0 8px; color: var(--on-dark-soft); font-size: 14px; }
.footer__bottom {
display: flex;
flex-wrap: wrap;
gap: 6px 16px;
justify-content: space-between;
padding-block: 16px;
border-block-start: 1px solid rgba(255, 255, 255, .12);
font-size: 13px;
color: var(--on-dark-soft);
font-family: var(--font-ui);
}
/* ---------- Home page ---------------------------------------------------- */
body.is-home main { padding: 0; }
.sitenav {
display: none;
gap: 20px;
margin-inline: auto;
font-size: 14px;
font-family: var(--font-ui);
}
.sitenav a { color: var(--ink-soft); font-weight: 500; }
.sitenav a:hover { color: var(--accent); }
.sitenav a.is-active { color: var(--accent); font-weight: 700; }
.sitenav a.is-active::after {
content: "";
display: block;
block-size: 2px;
border-radius: 2px;
background: var(--brand);
margin-block-start: 4px;
}
/*
* A photograph of the academy sits behind the page title, faint enough that
* dark text keeps its contrast in the light theme and light text in the dark
* one — it is atmosphere, not a picture to look at.
*/
.pagehead__slider {
position: absolute;
inset: 0;
z-index: -1;
overflow: hidden;
mask-image: linear-gradient(180deg, #000 30%, transparent 100%);
}
.pagehead__photo {
position: absolute;
inset: 0;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
opacity: 0;
filter: saturate(.85);
transition: opacity 1.4s ease;
}
.pagehead__photo.is-active { opacity: .16; }
:root[data-theme="dark"] .pagehead__photo.is-active { opacity: .22; }
@media (prefers-reduced-motion: reduce) {
.pagehead__photo { transition: none; }
}
/* Title band of a section page, with the trail back home. */
.band--page {
position: relative;
isolation: isolate;
overflow: hidden;
padding-block: clamp(34px, 6vw, 62px) clamp(12px, 2vw, 20px);
text-align: center;
background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 10%, transparent), transparent);
}
.pagecrumbs {
display: flex;
justify-content: center;
gap: 8px;
font-size: 13px;
color: var(--ink-faint);
font-family: var(--font-ui);
}
.pagecrumbs a { color: var(--accent); font-weight: 600; }
.pagecrumbs a:hover { text-decoration: underline; }
.pagetitle {
margin: 10px 0 0;
font-size: clamp(28px, 5vw, 42px);
font-weight: 700;
letter-spacing: -0.02em;
}
.pagelead {
margin: 12px auto 0;
max-inline-size: 60ch;
color: var(--ink-soft);
}
/* Contact form, with the academy's support illustration beside it */
.contactsplit {
display: grid;
gap: 26px;
align-items: center;
max-inline-size: 62rem;
margin-inline: auto;
}
@media (min-width: 900px) {
.contactsplit { grid-template-columns: 0.85fr 1fr; gap: 42px; }
}
.contactsplit__art {
inline-size: 100%;
max-inline-size: 380px;
block-size: auto;
margin-inline: auto;
display: block;
}
@media (max-width: 620px) { .contactsplit__art { max-inline-size: 260px; } }
.form--contact { max-inline-size: 46rem; margin-inline: auto; }
.form__row { display: grid; gap: 16px; }
@media (min-width: 640px) { .form__row { grid-template-columns: 1fr 1fr; } }
.field__input--area { resize: vertical; min-block-size: 130px; font-family: var(--font-ui); }
.trap { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; pointer-events: none; }
/* Six photographs in the footer, like the main site */
.footer__thumbs {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
max-inline-size: 240px;
}
.footer__thumbs li { aspect-ratio: 10 / 7; border-radius: 8px; overflow: hidden; }
.footer__thumbs img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.table__wrap { white-space: normal; max-inline-size: 34ch; }
@media (min-width: 980px) { .sitenav { display: inline-flex; } }
/* Full-width bands, like the container-fluid sections of the main site. */
.band { padding-block: clamp(40px, 7vw, 76px); }
.band--light { background: #f8f9fa; }
.band--stats { padding-block: 0; margin-block-start: -46px; position: relative; z-index: 2; }
.band--dark { background: var(--dark); color: var(--on-dark); }
.band--dark .home__title { color: var(--on-dark); }
.band--dark .home__text { color: var(--on-dark-soft); }
:root[data-theme="dark"] .band--light { background: var(--bg-elevated); }
.home__head { max-inline-size: 62ch; margin-block-end: 26px; }
.home__head--center { margin-inline: auto; text-align: center; }
.home__eyebrow {
margin: 0 0 8px;
font-size: 12px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--accent);
font-family: var(--font-ui);
}
.home__eyebrow--light { color: #6ea8fe; }
.home__title { font-size: clamp(24px, 4vw, 34px); font-weight: 700; line-height: 1.2; }
.home__text { margin: 14px 0 0; color: var(--ink-soft); }
.home__cta { display: flex; justify-content: center; margin-block-start: 28px; }
.home__split { display: grid; gap: 26px; align-items: center; }
@media (min-width: 880px) { .home__split { grid-template-columns: 1.5fr 1fr; gap: 48px; } }
/* Header ------------------------------------------------------------------ */
.band--hero {
position: relative;
isolation: isolate;
padding-block: clamp(56px, 11vw, 130px) clamp(76px, 12vw, 140px);
color: #fff;
background:
radial-gradient(90% 120% at 15% 0%, rgba(255, 255, 255, .18), transparent 55%),
linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 45%, var(--brand-deep) 100%);
}
/* Faint grid, so the header is not a flat wash of blue. */
.band--hero::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background-image:
linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px);
background-size: 46px 46px;
mask-image: radial-gradient(80% 80% at 70% 20%, #000 30%, transparent 75%);
}
.hero-slider { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero-slider__img {
position: absolute;
inset: 0;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 1.1s ease;
}
.hero-slider__img.is-active { opacity: 1; }
.band--hero-photo { background: var(--dark); }
/*
* The veil was so heavy the photographs could not be seen changing. It is now
* dark only where the words sit and clears towards the picture side.
*/
.band--hero-photo::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background:
linear-gradient(100deg,
rgba(6, 46, 111, .90) 0%,
rgba(6, 46, 111, .72) 34%,
rgba(11, 94, 215, .38) 66%,
rgba(13, 110, 253, .28) 100%),
linear-gradient(180deg, rgba(6, 46, 111, .35), rgba(6, 46, 111, .1));
}
@media (max-width: 900px) {
/* Stacked layout: the words cross the whole picture, so it stays darker. */
.band--hero-photo::after {
background: linear-gradient(180deg, rgba(6, 46, 111, .88), rgba(11, 94, 215, .78));
}
}
/* Slideshow indicators */
.hero-dots { display: flex; gap: 8px; margin-block-start: 22px; }
.hero-dots__dot {
inline-size: 30px;
block-size: 5px;
padding: 0;
border: 0;
border-radius: 999px;
background: rgba(255, 255, 255, .38);
cursor: pointer;
transition: background .25s ease, inline-size .25s ease;
}
.hero-dots__dot:hover { background: rgba(255, 255, 255, .6); }
.hero-dots__dot.is-on { background: #fff; inline-size: 46px; }
.hero-home { max-inline-size: 46rem; }
.hero-home__title {
font-size: clamp(32px, 6.4vw, 58px);
font-weight: 700;
line-height: 1.06;
letter-spacing: -0.02em;
color: #fff;
}
.hero-home__lead {
margin: 18px 0 0;
max-inline-size: 54ch;
font-size: clamp(15px, 2vw, 18px);
color: rgba(255, 255, 255, .88);
}
.hero-home__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 30px; }
.hero-home__note { margin: 16px 0 0; font-size: 13px; color: rgba(255, 255, 255, .7); }
.btn--big { padding: 14px 28px; font-size: 15px; }
.btn--outline-light {
background: transparent;
border-color: rgba(255, 255, 255, .6);
color: #fff;
}
.btn--outline-light:hover { background: rgba(255, 255, 255, .12); }
.btn .icon { margin-inline-start: 2px; }
[dir="rtl"] .btn .icon { transform: scaleX(-1); }
/* Figures ------------------------------------------------------------------ */
.stats {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
}
@media (min-width: 780px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat {
display: grid;
justify-items: center;
gap: 4px;
padding: 22px 16px;
text-align: center;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--bg-elevated);
box-shadow: var(--shadow);
}
.stat__icon {
display: grid;
place-items: center;
inline-size: 44px;
block-size: 44px;
margin-block-end: 6px;
border-radius: 50%;
background: var(--brand);
color: #fff;
}
.stat__value {
font-size: clamp(26px, 4.4vw, 36px);
font-weight: 700;
letter-spacing: -0.02em;
color: var(--ink);
font-variant-numeric: tabular-nums;
}
.stat__label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: .1em;
color: var(--ink-faint);
}
/* Services ----------------------------------------------------------------- */
.feature {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 10px;
block-size: 100%;
padding: 30px 22px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--bg-elevated);
box-shadow: var(--shadow);
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.feature:hover {
transform: translateY(-3px);
border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
box-shadow: var(--shadow-lift);
}
/* Photo on top, icon overlapping it — the layout the main site uses. */
.feature { padding-block-start: 0; overflow: hidden; }
.feature__photo {
inline-size: calc(100% + 44px);
margin-inline: -22px;
block-size: 150px;
object-fit: cover;
margin-block-end: -33px;
}
.feature__icon {
position: relative;
display: grid;
place-items: center;
inline-size: 66px;
block-size: 66px;
border-radius: 50%;
background: var(--bg-elevated);
border: 4px solid var(--bg-elevated);
box-shadow: var(--shadow);
color: var(--accent);
}
.feature:has(.feature__photo) .feature__icon { background: var(--accent-soft); }
.feature__title { font-size: 18px; font-weight: 700; }
.feature__text { margin: 0; font-size: 14px; color: var(--ink-soft); }
/* How it works -------------------------------------------------------------- */
.steps {
display: grid;
gap: 16px;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}
.steps__item {
padding: 24px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--bg-elevated);
}
.steps__number {
display: grid;
place-items: center;
inline-size: 34px;
block-size: 34px;
margin-block-end: 12px;
border-radius: 50%;
background: var(--brand);
color: #fff;
font-weight: 700;
font-size: 15px;
font-family: var(--font-ui);
}
.steps__title { font-size: 17px; font-weight: 700; }
.steps__text { margin: 8px 0 0; font-size: 14px; color: var(--ink-soft); }
/* Picture strip -------------------------------------------------------------- */
.band--strip { padding-block-end: clamp(30px, 5vw, 56px); overflow: hidden; }
/*
* Two identical tracks side by side: the pair slides by exactly half its width
* and starts over, so the loop has no seam. It stops under the pointer and for
* anyone who asked for less motion, and it can always be dragged by hand.
*/
.stripwrap { position: relative; }
.strip {
display: flex;
gap: 14px;
inline-size: 100%;
overflow-x: auto; /* the script nudges it, a hand can drag it */
overflow-y: hidden;
scrollbar-width: none;
direction: ltr; /* it travels the same way in both writings */
-webkit-overflow-scrolling: touch;
scroll-behavior: auto;
}
/* Arrows, for anyone who would rather click than wait */
.strip__arrow {
position: absolute;
inset-block-start: 50%;
transform: translateY(-50%);
z-index: 2;
display: grid;
place-items: center;
inline-size: 44px;
block-size: 44px;
border-radius: 50%;
border: 1px solid var(--line);
background: var(--bg-elevated);
color: var(--accent);
box-shadow: var(--shadow);
cursor: pointer;
opacity: .92;
transition: background .15s ease, transform .15s ease;
}
.strip__arrow:hover { background: var(--accent-soft); }
.strip__arrow--prev { inset-inline-start: 8px; }
.strip__arrow--next { inset-inline-end: 8px; }
.strip__arrow--prev .icon { transform: scaleX(-1); }
[dir="rtl"] .strip__arrow--prev .icon { transform: none; }
[dir="rtl"] .strip__arrow--next .icon { transform: scaleX(-1); }
@media (max-width: 620px) {
.strip__arrow { inline-size: 36px; block-size: 36px; }
}
.strip::-webkit-scrollbar { display: none; }
.strip__track {
display: flex;
flex: 0 0 auto;
gap: 14px;
margin: 0;
padding: 0;
list-style: none;
}
.strip__item {
flex: 0 0 auto;
inline-size: clamp(190px, 24vw, 280px);
aspect-ratio: 16 / 10;
border-radius: var(--radius);
overflow: hidden;
border: 1px solid var(--line);
background: var(--bg-elevated);
box-shadow: var(--shadow);
}
.strip__item img {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
display: block;
transition: transform .4s ease;
}
.strip__item:hover img { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) {
/* It no longer travels on its own; the arrows and the hand still work. */
.strip { scroll-snap-type: x mandatory; }
.strip__item { scroll-snap-align: start; }
}
/*
* The academy's own photographs of its classes. The files are 100x70, so the
* tiles stay small on purpose: blown up they would only look blurry.
*/
.tiles {
display: grid;
/* 110px is the widest these 100px originals stay sharp at. */
grid-template-columns: repeat(auto-fit, minmax(min(45%, 110px), 116px));
justify-content: center;
gap: 12px;
margin-block-start: 26px;
padding: 0;
list-style: none;
}
.tiles__item {
aspect-ratio: 10 / 7;
border-radius: var(--radius-sm);
overflow: hidden;
border: 1px solid var(--line);
background: var(--bg-elevated);
box-shadow: var(--shadow);
transition: transform .18s ease, box-shadow .18s ease;
}
.tiles__item:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.tiles__item img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.tiles__note {
margin: 14px 0 0;
text-align: center;
font-size: 13px;
color: var(--ink-faint);
}
/* Enlarged picture viewer ---------------------------------------------------- */
.is-zoomable { cursor: zoom-in; }
.lightbox {
border: 0;
padding: 0;
max-inline-size: 100vw;
max-block-size: 100vh;
inline-size: 100%;
block-size: 100%;
background: transparent;
overflow: hidden;
}
.lightbox::backdrop { background: rgba(4, 12, 30, .88); backdrop-filter: blur(3px); }
.lightbox:not([open]) { display: none; }
.lightbox {
display: grid;
grid-template-columns: auto 1fr auto;
grid-template-rows: 1fr auto auto; /* picture, counter, rail of thumbnails */
align-items: center;
justify-items: center;
gap: 8px;
padding: clamp(12px, 3vw, 28px);
}
/* The picture fills as much of the screen as it honestly can, and is framed
rather than dropped on a black rectangle. */
.lightbox__img {
position: relative;
z-index: 1;
grid-column: 2;
grid-row: 1;
max-block-size: 86vh;
max-inline-size: 94vw;
border-radius: var(--radius);
border: 1px solid rgba(255, 255, 255, .18);
box-shadow: 0 40px 90px rgba(0, 0, 0, .65);
background: #0b0d14;
}
/* The same picture, blown up and blurred, painted behind everything. */
.lightbox__glow {
position: absolute;
inset: 0;
z-index: 0;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
filter: blur(60px) saturate(140%) brightness(.45);
transform: scale(1.2);
pointer-events: none;
border-radius: 0;
}
.lightbox__glow:not([src]) { display: none; }
.lightbox__close,
.lightbox__nav {
position: relative;
z-index: 2;
border: 1px solid rgba(255, 255, 255, .35);
background: rgba(255, 255, 255, .12);
color: #fff;
border-radius: 50%;
inline-size: 46px;
block-size: 46px;
font-size: 26px;
line-height: 1;
cursor: pointer;
display: grid;
place-items: center;
transition: background .15s ease;
}
.lightbox__close:hover,
.lightbox__nav:hover { background: rgba(255, 255, 255, .26); }
.lightbox__close {
position: absolute;
inset-block-start: 14px;
inset-inline-end: 14px;
font-size: 30px;
}
.lightbox__nav--prev { grid-column: 1; grid-row: 1; }
.lightbox__nav--next { grid-column: 3; grid-row: 1; }
[dir="rtl"] .lightbox__nav--prev { transform: scaleX(-1); }
[dir="rtl"] .lightbox__nav--next { transform: scaleX(-1); }
/* Every picture of the set, right under the big one: one tap to jump to the
one you want. Built by app.js from the thumbnails already on the page, so it
downloads nothing. */
.lightbox__rail {
position: relative;
z-index: 2;
grid-column: 1 / -1;
grid-row: 3;
display: flex;
gap: 8px;
margin: 0;
padding: 4px;
max-inline-size: 94vw;
overflow-x: auto;
overscroll-behavior-inline: contain;
scrollbar-width: thin;
}
.lightbox__thumb {
display: block;
inline-size: 66px;
block-size: 44px;
padding: 0;
border: 2px solid transparent;
border-radius: 8px;
overflow: hidden;
background: none;
opacity: .5;
cursor: pointer;
transition: opacity .15s ease, border-color .15s ease;
}
.lightbox__thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.lightbox__thumb:hover { opacity: .85; }
.lightbox__thumb.is-active { opacity: 1; border-color: #fff; }
/* The rail takes its share of the height from the picture. */
.lightbox.has-rail .lightbox__img { max-block-size: 74vh; }
.lightbox__hint {
position: relative;
z-index: 2;
grid-column: 1 / -1;
grid-row: 2;
margin: 0;
color: rgba(255, 255, 255, .75);
font-size: 13px;
font-family: var(--font-ui);
}
@media (max-width: 600px) {
.lightbox__nav { inline-size: 40px; block-size: 40px; font-size: 22px; }
.lightbox { gap: 4px; }
}
/* About --------------------------------------------------------------------- */
/* The closing line of the About text — the academy's own words, so it is
given the weight of a statement rather than of another paragraph. */
.home__slogan {
margin-block: 18px 0;
padding-inline-start: 14px;
border-inline-start: 3px solid var(--brand);
color: var(--brand);
font-size: clamp(17px, 2.2vw, 20px);
font-weight: 600;
line-height: 1.5;
}
.ticks { display: grid; gap: 10px; margin-block-start: 20px; }
.ticks li { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.ticks__mark {
display: grid;
place-items: center;
inline-size: 22px;
block-size: 22px;
flex: 0 0 auto;
border-radius: 50%;
background: var(--brand);
color: #fff;
}
.person {
display: grid;
justify-items: center;
gap: 6px;
padding: 30px 24px;
text-align: center;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--bg-elevated);
box-shadow: var(--shadow);
}
.person__avatar {
display: grid;
place-items: center;
inline-size: 72px;
block-size: 72px;
margin-block-end: 8px;
border-radius: 50%;
background: linear-gradient(135deg, var(--brand), var(--accent-2));
color: #fff;
font-size: 28px;
font-weight: 700;
}
/* A real photograph reads as trust - cropped so the face stays in frame. */
.person__photo {
inline-size: 100%;
/* the height attribute of the ![]()
is a presentational hint and would win
over aspect-ratio, so it has to be released explicitly */
block-size: auto;
aspect-ratio: 4 / 5;
object-fit: cover;
object-position: 50% 16%;
border-radius: var(--radius);
margin-block-end: 14px;
background: var(--bg);
}
.person__name { margin: 0; font-size: 18px; font-weight: 700; }
.person__role { margin: 0; font-size: 13px; color: var(--accent); font-weight: 600; font-family: var(--font-ui); }
.person__text { margin: 10px 0 0; font-size: 14px; color: var(--ink-soft); }
/* Testimonials --------------------------------------------------------------- */
.review {
display: flex;
flex-direction: column;
gap: 10px;
block-size: 100%;
margin: 0;
padding: 26px 24px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--bg-elevated);
box-shadow: var(--shadow);
}
.review__mark {
font-size: 46px;
line-height: .6;
color: color-mix(in srgb, var(--accent) 40%, transparent);
}
.review__text { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--ink-soft); }
.review__by { margin-block-start: auto; padding-block-start: 10px; font-size: 13px; font-weight: 700; }
/* Contact --------------------------------------------------------------------- */
.contact {
display: grid;
gap: 14px;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}
.contact__item {
display: grid;
justify-items: center;
gap: 4px;
padding: 24px 18px;
text-align: center;
border: 1px solid rgba(255, 255, 255, .14);
border-radius: var(--radius);
background: var(--dark-soft);
}
.contact__icon {
display: grid;
place-items: center;
inline-size: 46px;
block-size: 46px;
margin-block-end: 6px;
border-radius: 50%;
background: var(--brand);
color: #fff;
}
.contact__label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: .1em;
color: var(--on-dark-soft);
}
.contact__value { font-weight: 600; color: var(--on-dark); word-break: break-word; }
a.contact__value:hover { text-decoration: underline; }
/* ---------- Photo showcase ------------------------------------------------ */
/* Two large photographs that fall into a single column on a phone. Nothing is
hard-coded per screen: the grid folds by itself and `srcset`/`sizes` on the
![]()
let the browser download the file that fits the slot it got. */
.shots {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
gap: clamp(14px, 2.4vw, 24px);
margin: 0;
padding: 0;
list-style: none;
}
.shots__item { margin: 0; }
.shots__photo {
display: block;
inline-size: 100%;
/* the width/height attributes are presentational hints and would beat
aspect-ratio, so the height has to be released explicitly */
block-size: auto;
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: var(--radius);
box-shadow: 0 14px 34px rgba(13, 27, 62, .16);
background: var(--bg);
}
@media (prefers-reduced-motion: no-preference) {
.shots__photo { transition: transform .25s ease, box-shadow .25s ease; }
.shots__photo:hover {
transform: translateY(-4px);
box-shadow: 0 20px 44px rgba(13, 27, 62, .24);
}
}
/* ---------- Forms, courses, dashboards ----------------------------------- */
/* Forms ------------------------------------------------------------------- */
.form { display: grid; gap: 16px; }
.field { display: grid; gap: 6px; }
.field__label {
font-size: 13px;
font-weight: 600;
color: var(--ink-soft);
font-family: var(--font-ui);
}
.field__input {
inline-size: 100%;
padding: 12px 14px;
border: 1px solid var(--line-strong);
border-radius: var(--radius-sm);
background: var(--bg);
color: var(--ink);
font: inherit;
font-family: var(--font-ui);
transition: border-color .15s ease, box-shadow .15s ease;
}
.field__input:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.field__hint { font-size: 12px; color: var(--ink-faint); }
/* Password fields carry a reveal button, so a typo is visible before sending. */
.field__control { position: relative; display: block; }
.field__input--password { padding-inline-end: 46px; }
.field__eye {
position: absolute;
inset-inline-end: 6px;
inset-block-start: 50%;
transform: translateY(-50%);
display: grid;
place-items: center;
inline-size: 34px;
block-size: 34px;
padding: 0;
border: 0;
border-radius: 8px;
background: transparent;
color: var(--ink-faint);
cursor: pointer;
transition: color .15s ease, background .15s ease;
}
.field__eye:hover { color: var(--accent); background: var(--accent-soft); }
.field__eye-off { display: none; }
.field__eye.is-on .field__eye-on { display: none; }
.field__eye.is-on .field__eye-off { display: grid; }
.field__eye.is-on { color: var(--accent); }
/* The one-time password, shown once and meant to be read out or copied. */
.newpass {
display: grid;
justify-items: center;
gap: 10px;
margin-block: 6px 16px;
padding: 20px 16px;
border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line));
border-radius: var(--radius);
background: var(--accent-soft);
text-align: center;
}
.newpass__label {
margin: 0;
font-size: 11px;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--ink-faint);
font-family: var(--font-ui);
}
.newpass__value {
margin: 0;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: clamp(20px, 4vw, 26px);
font-weight: 700;
letter-spacing: .08em;
color: var(--accent);
word-break: break-all;
direction: ltr;
unicode-bidi: isolate;
}
.form__alt--tight { margin-block-start: 12px; font-size: 13px; }
.form--inline { max-inline-size: 26rem; }
.btn--block { display: flex; justify-content: center; inline-size: 100%; }
.btn--small { padding: 7px 14px; font-size: 13px; }
.form__alt {
margin: 18px 0 0;
text-align: center;
font-size: 14px;
color: var(--ink-soft);
}
.form__alt a { color: var(--accent); font-weight: 600; }
.linkish {
border: 0;
background: none;
padding: 0;
color: var(--ink-soft);
font-size: 14px;
cursor: pointer;
}
.linkish:hover { color: var(--accent); text-decoration: underline; }
/* Messages ---------------------------------------------------------------- */
.flashes { display: grid; gap: 8px; padding-block-start: 16px; }
.flash {
margin: 0 0 4px;
padding: 12px 16px;
border-radius: var(--radius-sm);
border: 1px solid var(--line);
background: var(--bg-elevated);
font-size: 14px;
}
.flash--success { border-color: #86c9a0; background: color-mix(in srgb, #16a34a 12%, var(--bg-elevated)); }
.flash--error { border-color: #e7a1a1; background: color-mix(in srgb, #dc2626 12%, var(--bg-elevated)); }
.flash--info { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); background: var(--accent-soft); }
.notice {
margin: 0;
padding: 14px 16px;
border: 1px dashed var(--line-strong);
border-radius: var(--radius-sm);
background: var(--bg);
font-size: 14px;
color: var(--ink-soft);
}
.notice a { color: var(--accent); font-weight: 600; }
.notice--muted { font-size: 13px; color: var(--ink-faint); }
/* Badges ------------------------------------------------------------------ */
.badge {
display: inline-flex;
align-items: center;
gap: 6px;
margin: 0;
padding: 4px 10px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
white-space: nowrap;
font-family: var(--font-ui);
background: var(--line);
color: var(--ink-soft);
}
.badge--active { background: color-mix(in srgb, #16a34a 18%, var(--bg-elevated)); color: #15803d; }
.badge--locked { background: color-mix(in srgb, #64748b 18%, var(--bg-elevated)); color: var(--ink-soft); }
.badge--pending { background: color-mix(in srgb, #f59e0b 20%, var(--bg-elevated)); color: #b45309; }
.badge--cancelled { background: color-mix(in srgb, #dc2626 16%, var(--bg-elevated)); color: #b91c1c; }
:root[data-theme="dark"] .badge--active { color: #4ade80; }
:root[data-theme="dark"] .badge--pending { color: #fbbf24; }
:root[data-theme="dark"] .badge--cancelled { color: #f87171; }
/* The package offer ------------------------------------------------------- */
.offer {
position: relative;
isolation: isolate;
overflow: hidden;
display: grid;
gap: 20px;
align-items: center;
margin-block: 20px;
padding: clamp(20px, 4vw, 30px);
border-radius: var(--radius);
color: #fff;
background:
radial-gradient(100% 140% at 100% 0%, rgba(255, 255, 255, .18), transparent 60%),
linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 55%, var(--brand-deep) 100%);
box-shadow: var(--shadow);
}
@media (min-width: 780px) { .offer { grid-template-columns: 1.6fr auto; gap: 32px; } }
/* Rotating pictures of the academy behind the banner. */
.offer__slider { position: absolute; inset: 0; z-index: -2; }
.offer__img {
position: absolute;
inset: 0;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 1.2s ease;
}
.offer__img.is-active { opacity: 1; }
/* Without the veil the white text would sit on a photograph. */
.offer--photo::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(105deg,
rgba(6, 46, 111, .95) 0%,
rgba(11, 94, 215, .86) 45%,
rgba(6, 46, 111, .88) 100%); /* the price sits here - keep it safely dark */
}
@media (max-width: 780px) {
/* On a phone the text stacks over the middle of the picture: darken more. */
.offer--photo::after {
background: linear-gradient(180deg, rgba(6, 46, 111, .94), rgba(11, 94, 215, .9));
}
}
.offer__body, .offer__deal { position: relative; }
.offer__flag {
display: inline-block;
margin: 0 0 10px;
padding: 4px 12px;
border-radius: 999px;
background: rgba(255, 255, 255, .18);
border: 1px solid rgba(255, 255, 255, .3);
font-size: 11px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
font-family: var(--font-ui);
}
.offer__title { font-size: clamp(20px, 3vw, 26px); font-weight: 700; color: #fff; }
.offer__normal { margin: 10px 0 0; color: rgba(255, 255, 255, .85); font-size: 14.5px; }
.offer__normal s, .offer__normal del { opacity: .8; }
.offer__deal { display: grid; justify-items: start; gap: 6px; }
@media (min-width: 780px) { .offer__deal { justify-items: end; text-align: end; } }
.offer__price {
margin: 0;
font-size: clamp(34px, 6vw, 46px);
font-weight: 700;
line-height: 1;
letter-spacing: -0.02em;
color: #fff;
font-variant-numeric: tabular-nums;
}
.offer__save {
margin: 0 0 8px;
font-size: 13px;
font-weight: 600;
color: #fff;
background: rgba(255, 255, 255, .18);
padding: 4px 10px;
border-radius: 999px;
}
/* The elective picker inside the package box */
.offer__choice {
display: grid;
gap: 6px;
margin-block-end: 12px;
text-align: start;
}
.offer__choice-label {
font-size: 12px;
font-weight: 600;
color: rgba(255, 255, 255, .85);
font-family: var(--font-ui);
}
.offer__choice-select {
padding: 9px 12px;
border-radius: var(--radius-sm);
border: 1px solid rgba(255, 255, 255, .45);
background: rgba(255, 255, 255, .14);
color: #fff;
font-family: var(--font-ui);
font-size: 14px;
min-inline-size: 9rem;
}
.offer__choice-select option { color: var(--ink); background: var(--bg-elevated); }
/* "Choose one" on the two optional courses */
.badge--option {
background: color-mix(in srgb, #7c3aed 18%, var(--bg-elevated));
color: #6d28d9;
}
:root[data-theme="dark"] .badge--option { color: #c4b5fd; }
.offer--owned { background: linear-gradient(135deg, #15803d, #166534); }
.offer--owned .offer__flag { background: rgba(255, 255, 255, .2); }
/* Course cards ------------------------------------------------------------ */
.grid--courses { grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.course-card {
display: flex;
flex-direction: column;
gap: 8px;
block-size: 100%;
padding: 20px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--bg-elevated);
box-shadow: var(--shadow);
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.course-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.course-card.is-active { border-color: color-mix(in srgb, #16a34a 45%, var(--line)); }
.course-card.is-locked { background: var(--bg); }
.course-card__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.course-card__code {
font-size: 15px;
font-weight: 700;
letter-spacing: .04em;
color: var(--accent);
font-family: var(--font-ui);
}
.course-card__title { font-size: 16px; font-weight: 600; }
.course-card__price {
margin: 0;
font-size: 20px;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.course-card__foot {
display: flex;
align-items: center;
gap: 10px;
margin-block-start: auto;
padding-block-start: 12px;
}
.course-card__foot form { inline-size: 100%; }
.buyrow { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.panel--locked { opacity: .95; }
.panel__meta { margin: 0; font-size: 13px; color: var(--ink-faint); }
/* Payment instructions ------------------------------------------------------ */
.payslip {
display: grid;
gap: 2px;
margin-block: 20px;
border: 1px solid var(--line);
border-radius: var(--radius);
overflow: hidden;
background: var(--line);
}
.payslip__row {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
padding: 14px 18px;
background: var(--bg-elevated);
}
.payslip__row--amount { background: var(--accent-soft); }
.payslip__label {
flex: 1 1 40%;
font-size: 12px;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--ink-faint);
font-family: var(--font-ui);
}
.payslip__value { font-weight: 700; font-size: 16px; }
.payslip__value--big { font-size: 26px; color: var(--accent); font-variant-numeric: tabular-nums; }
.payslip__value--mono {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
letter-spacing: .04em;
direction: ltr;
unicode-bidi: isolate;
}
.paysteps {
display: grid;
gap: 10px;
margin-block: 20px;
padding-inline-start: 22px;
list-style: decimal;
color: var(--ink-soft);
font-size: 14.5px;
}
.paysteps li { padding-inline-start: 4px; }
.paylink {
display: inline-block;
margin-inline-start: 8px;
font-size: 12px;
font-weight: 600;
color: var(--accent);
font-family: var(--font-ui);
}
.paylink:hover { text-decoration: underline; }
/* Dashboard --------------------------------------------------------------- */
.minilist { display: grid; gap: 8px; }
.minilist__row {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
background: var(--bg);
}
.minilist__code {
min-inline-size: 62px;
font-size: 13px;
font-weight: 700;
color: var(--accent);
font-family: var(--font-ui);
}
.minilist__title { flex: 1; font-size: 14px; }
.rowactions { display: flex; flex-wrap: wrap; gap: 8px; }
/* The money columns of the admin board */
.admincash { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.admincash--paid { color: #15803d; }
.admincash--due { color: #b45309; }
:root[data-theme="dark"] .admincash--paid { color: #4ade80; }
:root[data-theme="dark"] .admincash--due { color: #fbbf24; }
.adminitem { display: flex; align-items: center; gap: 8px; margin-block-end: 4px; white-space: nowrap; }
/* Tables ------------------------------------------------------------------ */
.tablewrap {
inline-size: 100%;
overflow-x: auto;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
}
.table {
inline-size: 100%;
border-collapse: collapse;
font-size: 14px;
font-family: var(--font-ui);
}
.table th, .table td {
padding: 12px 14px;
text-align: start;
border-block-end: 1px solid var(--line);
white-space: nowrap;
}
.table th {
font-size: 11px;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--ink-faint);
background: var(--bg);
}
.table tbody tr:last-child td { border-block-end: 0; }
.table__mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--ink-faint); }
/* Narrow screens ---------------------------------------------------------- */
.screen--narrow { inline-size: min(100%, 30rem); margin-inline: auto; }
/* ---------- Sign in / register ------------------------------------------- */
/* The door is a page of its own: one centred card, nothing else. */
body.is-auth main {
display: grid;
place-items: center;
padding-block: clamp(24px, 6vw, 64px);
}
.auth { inline-size: 100%; }
.auth__card {
inline-size: min(100%, 27rem);
margin-inline: auto;
padding: clamp(26px, 5vw, 40px);
border: 1px solid var(--line);
border-radius: calc(var(--radius) + 4px);
background: var(--bg-elevated);
box-shadow: var(--shadow-lift);
}
.auth__card--wide { inline-size: min(100%, 32rem); }
.auth__brand {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
margin-block-end: 20px;
}
.auth__logo {
display: block;
block-size: 76px;
inline-size: auto;
}
.auth__mark {
display: grid;
place-items: center;
inline-size: 40px;
block-size: 40px;
border-radius: 12px;
background: linear-gradient(135deg, var(--brand), var(--brand-dark));
color: #fff;
font-size: 21px;
font-weight: 700;
}
.auth__brandname { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.auth__head { margin-block-end: 20px; text-align: center; }
.auth__title { font-size: clamp(21px, 3vw, 26px); font-weight: 700; }
.auth__sub { margin: 8px 0 0; color: var(--ink-soft); font-size: 14px; }
.auth__or {
position: relative;
margin-block: 20px 16px;
text-align: center;
color: var(--ink-faint);
font-size: 13px;
font-family: var(--font-ui);
}
.auth__or::before {
content: "";
position: absolute;
inset-inline: 0;
inset-block-start: 50%;
border-block-start: 1px solid var(--line);
}
.auth__or span {
position: relative;
padding-inline: 12px;
background: var(--bg-elevated);
}
/* On the door the footer is a single quiet line. */
body.is-auth .footer { background: transparent; color: var(--ink-faint); }
body.is-auth .footer__bottom {
border-block-start: 1px solid var(--line);
flex-direction: column;
align-items: center;
gap: 6px;
text-align: center;
}
body.is-auth .footer__bottom a { color: var(--accent); }
/* ---------- Backgrounds --------------------------------------------------- */
/*
* Inside the application: a quiet study pattern (atom, book, lecture screen,
* formula lines) drawn as one SVG tile, plus two soft brand blooms. Low
* contrast on purpose — content has to stay the loudest thing on the page.
*/
body {
background-color: var(--bg);
background-image:
radial-gradient(65% 55% at 100% 0%, color-mix(in srgb, var(--brand) 10%, transparent), transparent 70%),
radial-gradient(55% 45% at 0% 100%, color-mix(in srgb, var(--accent-2) 8%, transparent), transparent 70%),
url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27120%27%20height%3D%27120%27%20viewBox%3D%270%200%20160%20160%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%230d6efd%27%20stroke-opacity%3D%270.05%27%20stroke-width%3D%271.1%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2734%27%20cy%3D%2734%27%20r%3D%276%27%2F%3E%3Cellipse%20cx%3D%2734%27%20cy%3D%2734%27%20rx%3D%2722%27%20ry%3D%279%27%2F%3E%3Cellipse%20cx%3D%2734%27%20cy%3D%2734%27%20rx%3D%2722%27%20ry%3D%279%27%20transform%3D%27rotate%2860%2034%2034%29%27%2F%3E%3Cellipse%20cx%3D%2734%27%20cy%3D%2734%27%20rx%3D%2722%27%20ry%3D%279%27%20transform%3D%27rotate%28120%2034%2034%29%27%2F%3E%3Cpath%20d%3D%27M104%2026c6-4%2014-4%2020%200v22c-6-4-14-4-20%200zM124%2026c6-4%2014-4%2020%200v22c-6-4-14-4-20%200z%27%2F%3E%3Crect%20x%3D%2718%27%20y%3D%27100%27%20width%3D%2742%27%20height%3D%2730%27%20rx%3D%274%27%2F%3E%3Cpath%20d%3D%27M34%20110l10%205-10%205zM30%20136h18M39%20130v6%27%2F%3E%3Cpath%20d%3D%27M104%20104h34M104%20114h22M104%20124h34%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
background-repeat: no-repeat, no-repeat, repeat;
background-size: auto, auto, 120px 120px;
background-attachment: fixed, fixed, fixed;
}
:root[data-theme="dark"] body { background-color: var(--bg); opacity: 1; }
/* The pattern would fight with the full-width bands of the presentation page. */
body.is-home .band--light,
body.is-home .band--dark,
body.is-home .band--hero { background-attachment: scroll; }
/*
* The door: a real classroom photo behind a deep blue veil. The card stays
* fully opaque so nothing is ever hard to read.
*/
body.is-auth {
background-image:
linear-gradient(140deg, rgba(6, 46, 111, .93) 0%, rgba(11, 94, 215, .74) 52%, rgba(6, 46, 111, .95) 100%),
url("img/carousel-3.webp");
background-repeat: no-repeat, no-repeat;
background-size: cover, cover;
background-position: center, center;
background-attachment: scroll, scroll;
}
@media (min-width: 760px) {
body.is-auth { background-attachment: fixed, fixed; }
}
/* Over the photo the chrome turns light and gets out of the way. */
body.is-auth .topbar {
background: transparent;
backdrop-filter: none;
border-block-end: 0;
}
body.is-auth .topbar__inner { justify-content: flex-end; }
body.is-auth .brand { display: none; }
body.is-auth .langswitch {
background: rgba(255, 255, 255, .14);
border-color: rgba(255, 255, 255, .35);
}
body.is-auth .langswitch__item { color: rgba(255, 255, 255, .85); }
body.is-auth .langswitch__item:hover { color: #fff; }
body.is-auth .langswitch__item.is-active { background: #fff; color: var(--brand); }
body.is-auth .auth__card { box-shadow: 0 24px 60px rgba(0, 0, 0, .45); }
body.is-auth .footer { background: transparent; color: rgba(255, 255, 255, .75); }
body.is-auth .footer__bottom { border-block-start: 1px solid rgba(255, 255, 255, .22); }
body.is-auth .footer__bottom a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
body.is-auth { transition: background-color .3s ease; }
}
/* The switch has to stay readable on the photo behind the sign-in card. */
body.is-auth .themeswitch {
background: rgba(255, 255, 255, .14);
border-color: rgba(255, 255, 255, .35);
color: rgba(255, 255, 255, .85);
}
body.is-auth .themeswitch:hover { color: #fff; border-color: rgba(255, 255, 255, .6); }
/* On a phone the arrows sit on the edges of the picture instead of stealing a
column from it, and the picture takes the full width. */
@media (max-width: 700px) {
.lightbox { grid-template-columns: 1fr; }
.lightbox__img { grid-column: 1; max-inline-size: 96vw; }
.lightbox__hint, .lightbox__rail { grid-column: 1; }
.lightbox__nav {
position: absolute;
grid-area: 1 / 1;
inset-block-start: 42%;
z-index: 3;
inline-size: 42px;
block-size: 42px;
}
.lightbox__nav--prev { inset-inline-start: 10px; }
.lightbox__nav--next { inset-inline-end: 10px; }
.lightbox__thumb { inline-size: 56px; block-size: 38px; }
}