, so screen readers are not affected. */
.site-header__actions {
display: contents;
}
.site-header .lang-switch {
margin-inline-start: auto; /* push EN/RU to the right edge */
}
.site-header__actions .btn {
flex: 1 0 100%;
min-height: 2.75rem; /* 44px: compact but still a comfortable target */
padding-block: var(--space-2);
}
/* Navigation: one row that scrolls sideways on phones (see the note above). */
.site-header .nav {
flex: 1 0 100%;
min-width: 0;
overflow-x: auto;
overscroll-behavior-x: contain;
scrollbar-width: none;
scroll-padding-inline: var(--space-3);
/* Reserve a strip on the right for the "more" arrow. Links are clipped at
its edge, so they never run underneath the arrow. */
border-inline-end: 1.75rem solid transparent;
padding-top: 1px;
/* Decorative divider, drawn as a background so it also spans the strip. */
background: linear-gradient(var(--color-border-decor), var(--color-border-decor)) top / 100% 1px no-repeat;
background-origin: border-box;
background-clip: border-box;
}
.site-header .nav__list {
flex-wrap: nowrap;
width: max-content;
}
.site-header .nav__list > li {
flex: none;
}
.site-header .nav__link {
white-space: nowrap;
}
/* The scrolling row would clip an outside focus ring, so draw it inside. */
.site-header .nav__link:focus-visible {
outline-offset: -3px;
}
/* "More links" arrow: sits in the reserved strip, to the right of the
navigation row. It is decoration only: it takes no clicks or touches and is
hidden from assistive technology. */
.site-header__inner::after {
content: "\203A"; /* single right-pointing angle quote */
content: "\203A" / ""; /* empty alternative text where supported */
position: absolute;
inset-inline-end: var(--gutter); /* the container's content edge */
bottom: var(--space-1);
display: flex;
align-items: center;
justify-content: center;
width: 1.75rem; /* the reserved strip */
height: 2.75rem;
color: var(--color-text-muted);
font-size: 1.75rem;
font-weight: 700;
line-height: 1;
pointer-events: none;
user-select: none;
}
/* Where scroll-driven animation is supported, the arrow is only visible while
the row can still scroll to the right: hidden when every link fits and when
the row has reached its end. Elsewhere it simply stays visible. */
@supports (animation-timeline: scroll()) {
.site-header__inner {
timeline-scope: --nav-scroll;
}
.site-header .nav {
scroll-timeline: --nav-scroll x;
}
.site-header__inner::after {
opacity: 0; /* no overflow: no scrolling, so no arrow */
animation: nav-more linear both;
animation-timeline: --nav-scroll;
}
@keyframes nav-more {
0%, 85% { opacity: 1; }
100% { opacity: 0; }
}
}
/* Keyboard users: while a link has keyboard focus, show every link at once
instead of the scrolling row, so the focused link can never be cut off.
The row goes back to normal when focus leaves. (Needs :has(), which all
current browsers support; older ones simply keep the scrolling row.) */
.site-header .nav:has(.nav__link:focus-visible) {
overflow: visible;
border-inline-end-width: 0;
}
.site-header__inner:has(.nav__link:focus-visible)::after {
display: none;
}
.site-header .nav:has(.nav__link:focus-visible) .nav__list {
flex-wrap: wrap;
width: auto;
}
.site-header .nav:has(.nav__link:focus-visible) .nav__list > li {
flex: 0 1 auto; /* let a very long label wrap instead of overflowing */
}
.site-header .nav:has(.nav__link:focus-visible) .nav__link {
white-space: normal;
outline-offset: 3px;
}
/* 9. Navigation and language switch
Used in the header and the footer. Links keep their text visible without
JavaScript, and wrap when labels are long (for example in Russian).
========================================================================== */
.nav__list {
display: flex;
flex-wrap: wrap;
gap: var(--space-1);
margin: 0;
padding: 0;
list-style: none;
}
.nav__link {
display: flex;
align-items: center;
min-height: 2.75rem; /* 44px touch target */
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-button);
color: var(--color-heading);
font-weight: 500;
line-height: 1.3;
text-decoration: none;
transition: background-color var(--transition), color var(--transition),
box-shadow var(--transition);
}
.nav__link:hover {
background-color: var(--color-hover-bg);
text-decoration: underline;
text-underline-offset: 0.2em;
}
/* Current page: bolder text plus a bar, so colour is not the only signal. */
.nav__link[aria-current="page"] {
font-weight: 600;
box-shadow: inset 0 -3px 0 var(--color-accent-text);
}
.lang-switch {
display: flex;
align-items: center;
gap: var(--space-1);
}
.lang-switch__link {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.75rem;
min-height: 2.75rem;
padding: 0 var(--space-2);
border-radius: var(--radius-button);
font-size: 0.875rem;
font-weight: 600;
letter-spacing: 0.06em;
text-decoration: none;
transition: background-color var(--transition), color var(--transition);
}
.lang-switch__link:hover {
background-color: var(--color-hover-bg);
}
/* Current language: filled. Keep this after :hover so it always wins. */
.lang-switch__link[aria-current="true"] {
background-color: var(--color-heading);
color: var(--color-on-strong);
}
/* 10. Hero and media
Expected markup:
eyebrow, h1, .lead, .cluster of buttons
Phones and tablets: content first, image below. From 960px: split layout.
========================================================================== */
.hero {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-8);
align-items: center;
}
.hero__content > .cluster {
margin-top: var(--space-6); /* a little extra air above the buttons */
}
/* A fixed-ratio frame, so the page does not jump when the picture loads.
Right now it holds a decorative placeholder; later it can hold a real
photograph (give that
![]()
width, height and alt text). */
.media-placeholder {
position: relative;
width: 100%;
aspect-ratio: 4 / 3;
overflow: hidden;
border-radius: var(--radius-card);
background-color: var(--navy-900);
box-shadow: 0 12px 32px rgb(11 31 58 / 16%); /* Navy 900 at 16% */
}
.media-placeholder > img,
.media-placeholder > svg {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* 11. Site footer
Expected markup:
Colours come from the dark role set (see section 1).
========================================================================== */
.site-footer {
padding-block: var(--space-12);
}
.site-footer__inner {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-8);
}
/* Footer links stack in one column. */
.site-footer .nav__list {
flex-direction: column;
align-items: flex-start;
gap: 0;
margin-inline-start: calc(-1 * var(--space-3));
}
.site-footer .lang-switch {
justify-content: flex-start;
}
.site-footer__legal {
margin-top: var(--space-8);
padding-top: var(--space-6);
border-top: 1px solid var(--color-border-decor); /* decorative line */
}
/* 12. Accessibility helpers
========================================================================== */
/* Visible keyboard focus everywhere. Colour comes from the role tokens, so
it flips to gold on dark areas. Nothing here ever removes the outline. */
:focus-visible {
outline: 3px solid var(--color-focus);
outline-offset: 3px;
}
/* Hidden text for screen readers (labels, extra context). */
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* "Skip to main content" link: off-screen until keyboard focus reaches it.
Its own white box and two-tone ring stay visible on light or dark headers. */
.skip-link {
position: absolute;
top: var(--space-3);
left: var(--space-3);
z-index: 100;
padding: var(--space-3) var(--space-4);
background-color: var(--white);
border: 2px solid var(--navy-900);
border-radius: var(--radius-button);
color: var(--navy-900);
font-weight: 600;
text-decoration: none;
transform: translateY(-200%);
}
.skip-link:focus {
transform: translateY(0);
outline: 3px solid var(--navy-700);
outline-offset: 3px;
box-shadow: 0 0 0 3px var(--white);
}
/* 13. Responsive (mobile-first: base styles above are the mobile layout)
========================================================================== */
@media (min-width: 640px) {
:root {
--gutter: 2rem; /* 32px */
}
.section {
padding-block: var(--space-16);
}
.grid--2,
.grid--3 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* Header: back to two roomy rows with every link visible. The actions
sit at the right edge of the top row and navigation wraps if needed. */
.site-header__inner {
column-gap: var(--space-6);
row-gap: var(--space-2);
padding-block: var(--space-3);
}
.site-header .brand {
font-size: 1.25rem;
}
.site-header__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
width: auto;
margin-inline-start: auto;
}
.site-header .lang-switch {
margin-inline-start: 0;
}
.site-header__actions .btn {
flex: 0 1 auto;
min-height: var(--control-height);
padding-block: var(--space-3);
}
.site-header .nav {
overflow: visible;
border-inline-end-width: 0;
padding-top: calc(var(--space-1) + 1px);
}
.site-header__inner::after {
display: none;
}
.site-header .nav__list {
flex-wrap: wrap;
width: auto;
margin-inline-start: calc(-1 * var(--space-3)); /* align link text with the wordmark */
}
.site-header .nav__list > li {
flex: 0 1 auto;
}
.site-header .nav__link {
white-space: normal;
}
.site-header .nav__link:focus-visible {
outline-offset: 3px;
}
/* Footer: two columns. */
.site-footer__inner {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 960px) {
.section {
padding-block: var(--space-24);
}
.grid--3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* Hero: text on the left, media on the right. */
.hero {
grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
gap: var(--space-16);
}
/* Footer: brand, links, language. */
.site-footer__inner {
grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
}
}
/* 14. Motion
========================================================================== */
@media (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth;
}
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ==========================================================================
15. Homepages (en/index.html and ru/index.html)
Homepage-specific styles and language-scoped overrides.
Existing rules above are untouched. This block was added for
the homepage redesign: split hero, approach, course cards, three steps,
"Why ZORIVELLE?", final call to action and the homepage footer.
Homepage-only colours (not shared tokens):
#455468 text 7.72 on White | 7.19 on #F5F7FA
#F5F7FA surface courses and "Why" bands
#DCE2E9 border decorative card edge only (1.3 on White)
Gold 700 #8A6A00 icons, step numbers, arrows: 5.07 on White | 4.72 on #F5F7FA
Gold 500 is never used for text or icons on a light surface.
Footer: White 16.52, #F0D77A hover/focus, Gold 500 headings 6.83 (on Navy 900)
========================================================================== */
:root {
--home-text: #455468;
--home-surface: #f5f7fa;
--home-border: #dce2e9;
--home-border-strong: var(--navy-700);
--home-gold-light: #f0d77a;
}
/* Section headings */
.home-heading {
font-size: clamp(2rem, 1.75rem + 0.8vw, 2.25rem);
line-height: 1.2;
}
/* Hero: navy text panel and edge-to-edge photograph.
Phones and tablets: text first, then the photo at 16:9. From 960px: 50/50. */
.home-hero {
display: grid;
grid-template-columns: minmax(0, 1fr);
background-color: var(--navy-900);
border-radius: 12px; /* outer corners only; overflow clips panel and photo together */
overflow: hidden;
container-type: inline-size; /* lets the text panel line up with the page container */
}
.home-hero__text {
padding: var(--space-12) var(--gutter);
}
.home-hero__inner {
max-width: 34rem;
}
.home-hero__title {
margin-top: var(--space-4);
font-size: clamp(2.25rem, 1.9rem + 1.5vw, 2.5rem);
line-height: 1.1;
text-wrap: wrap;
}
.home-hero__title > span {
display: block; /* one line each: Your Voice. / Your English. / Your Future. */
}
.home-hero__lead {
margin-top: var(--space-6);
color: var(--color-text-muted);
font-size: 1.125rem;
line-height: 1.6;
}
.home-hero__cta {
margin-top: var(--space-8);
}
.home-hero__media {
position: relative;
aspect-ratio: 16 / 9;
overflow: hidden;
background-color: var(--navy-900); /* keeps the panel navy if the photo fails */
color: var(--white); /* readable alt text if the photo fails */
}
.home-hero__media img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 62% 50%;
}
/* Our Approach */
.home-approach__inner > * + * {
margin-top: var(--space-3);
}
.home-approach__inner > .home-approach__text {
margin-top: var(--space-4);
}
.home-approach__text {
max-width: 44rem;
color: var(--home-text);
}
/* Explore Our Courses: each card is one link (stretched-link pattern). The
link sits inside the heading, so its name is the course title, and its
::after covers the whole card. */
.home-courses {
background-color: var(--home-surface);
}
.home-courses__grid {
margin-top: var(--space-8);
padding: 0;
list-style: none;
}
.home-course {
position: relative;
display: flex;
flex-direction: column;
padding: var(--space-6);
background-color: var(--white);
border: 1px solid var(--home-border);
border-radius: 10px;
transition: border-color 200ms ease, transform 200ms ease;
}
.home-course:hover {
border-color: var(--home-border-strong);
}
.home-course__icon {
flex: none;
width: 30px;
height: 30px;
color: var(--gold-700);
}
.home-course__title {
margin-top: var(--space-4);
font-size: 1.25rem;
font-weight: 500;
line-height: 1.3;
}
.home-course__link {
color: var(--color-heading);
text-decoration: none;
}
.home-course__link:hover {
color: var(--color-heading);
}
.home-course__link::after {
content: "";
position: absolute;
inset: 0;
border-radius: 10px;
}
/* Focus ring around the whole card, not just the title. */
.home-course__link:focus-visible {
outline: none;
}
.home-course__link:focus-visible::after {
outline: 3px solid var(--color-focus);
outline-offset: 3px;
}
.home-course__text {
margin-top: var(--space-2);
color: var(--home-text);
font-size: 1rem;
line-height: 1.6;
}
.home-course__arrow {
align-self: flex-end;
margin-top: auto;
padding-top: var(--space-4);
color: var(--gold-700);
font-size: 1.25rem;
line-height: 1;
}
@media (prefers-reduced-motion: no-preference) {
.home-course:hover {
transform: translateY(-3px);
}
}
/* How It Works: three short steps, no cards. */
.home-steps__list {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-8);
margin-top: var(--space-8);
padding: 0;
list-style: none;
}
.home-step__number {
color: var(--gold-700);
font-family: var(--font-heading);
font-size: 2rem;
font-weight: 600;
line-height: 1;
}
.home-step__title {
margin-top: var(--space-3);
font-size: 1.25rem;
line-height: 1.3;
}
.home-step__text {
margin-top: var(--space-2);
color: var(--home-text);
font-size: 1rem;
line-height: 1.6;
}
.home-steps__more {
margin-top: var(--space-8);
}
.home-steps__link {
display: inline-flex;
align-items: center;
min-height: 2.75rem;
font-weight: 500;
}
/* Why ZORIVELLE? */
.home-why {
background-color: var(--home-surface);
}
.home-why__columns {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-8);
margin-top: var(--space-8);
}
.home-why__title {
font-size: 1.375rem;
line-height: 1.3;
}
.home-why__item p {
max-width: 36rem;
margin-top: var(--space-3);
color: var(--home-text);
}
/* Final call to action: navy, runs straight into the navy footer. */
.home-cta {
padding-block: var(--space-16);
}
.home-cta__inner {
max-width: calc(44rem + 2 * var(--gutter));
text-align: center;
}
.home-cta__text {
margin-top: var(--space-4);
color: var(--color-text-muted);
font-size: 1.125rem;
line-height: 1.6;
}
.home-cta .btn {
margin-top: var(--space-8);
}
/* Homepage footer: stacked below 960px, three equal columns from 960px. */
.site-footer.home-footer {
padding-block: var(--space-12) var(--space-8);
}
.home-footer__grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-8);
}
.home-footer__tagline {
margin-top: var(--space-2);
color: var(--color-text-muted);
}
.home-footer__heading {
margin-bottom: var(--space-2);
color: var(--color-accent-text);
font-family: var(--font-body);
font-size: 0.875rem;
font-weight: 600;
letter-spacing: 0.08em;
line-height: 1.4;
}
.home-footer__list {
margin: 0;
padding: 0;
list-style: none;
}
.home-footer__link {
display: inline-flex;
align-items: center;
min-height: 2.75rem; /* 44px target */
color: var(--white);
text-decoration: none;
transition: color var(--transition);
}
.home-footer__link:hover,
.home-footer__link:focus-visible {
color: var(--home-gold-light);
text-decoration: none;
}
.home-footer__link:focus-visible {
outline: 2px solid var(--home-gold-light);
outline-offset: 3px;
}
.home-footer__legal {
margin-top: var(--space-8);
padding-top: var(--space-6);
border-top: 1px solid var(--gold-700);
text-align: center;
}
.home-footer__legal p {
color: var(--color-text-muted);
font-size: 0.875rem;
line-height: 1.5;
}
/* Homepage responsive */
@media (min-width: 640px) {
.home-cta {
padding-block: 5rem; /* about 80px */
}
}
@media (min-width: 960px) {
.home-steps__list {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-12);
}
.home-why__columns {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-16);
}
.home-footer__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-12);
}
}
/* Hero split. It starts at 1240px, not 960px: the photo is 16:9, and a narrow
half-width panel would crop the group at the sides. Below 1240px the hero
stays stacked (text, then the full photo). From 1240px the text takes 40%
and the photo 60%, with tighter vertical padding, so the panel is close to
the photo's own shape and all five people stay in view. */
@media (min-width: 1240px) {
.home-hero {
grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
}
.home-hero__text {
display: flex;
flex-direction: column;
justify-content: center;
padding-block: 2.5rem;
padding-inline-start: var(--gutter);
/* Line the text up with the page container (the header wordmark). */
padding-inline-start: max(var(--gutter), calc((100cqw - var(--container)) / 2));
padding-inline-end: 2rem;
}
/* Size the headline from the text column so each of the three lines
always fits (Georgia is wider than most serif fallbacks). */
.home-hero__title {
font-size: 3.5rem;
font-size: clamp(3rem, calc((40cqw - max(var(--gutter), (100cqw - var(--container)) / 2) - 2rem) / 7), 4rem);
}
.home-hero__title > span {
white-space: nowrap;
}
.home-hero__lead {
max-width: 30rem;
}
.home-hero__media {
aspect-ratio: auto;
}
.home-hero__media img {
position: absolute;
inset: 0;
object-position: 100% 50%; /* shows the whole group; any crop is on the left edge */
}
}
@media (min-width: 1600px) {
/* Very wide screens: the text column needs the extra room to line up with the page. */
.home-hero {
grid-template-columns: minmax(0, 9fr) minmax(0, 11fr);
}
.home-hero__title {
font-size: clamp(3rem, calc((45cqw - max(var(--gutter), (100cqw - var(--container)) / 2) - 2rem) / 7), 4rem);
}
}
/* Homepage header on phones. The hero has its own Get Started button, so the
header one (a full-width row on phones) is hidden here. This matches the
header's own phone layout, which applies below 640px. Scoped with :has() so
no other page changes; from 640px the header is exactly as before. The
wordmark, EN/RU switch and navigation stay as they are. */
@media not all and (min-width: 640px) {
body:has(.home-hero) .site-header__actions .btn {
display: none;
}
}
/* Russian homepage headline (Stage 3B). The Russian lines are about 35% wider
than the English ones, so the headline is sized from the text column with a
larger width budget (9.5em for the longest line, "Ваш английский.") so it
stays on three lines. Same method as the English rule above. */
@media (min-width: 1240px) {
html[lang="ru"] .home-hero__title {
font-size: 2.75rem;
font-size: clamp(2.5rem, calc((40cqw - max(var(--gutter), (100cqw - var(--container)) / 2) - 2rem) / 9.5), 4rem);
}
}
@media (min-width: 1600px) {
html[lang="ru"] .home-hero__title {
font-size: clamp(2.5rem, calc((45cqw - max(var(--gutter), (100cqw - var(--container)) / 2) - 2rem) / 9.5), 4rem);
}
}