, 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;
}
}