@import url("../fonts/fonts.css"); /* ========================================================= ANZÛ SPORT CLUB — design system Adapted from anzu/stitch_anzu_sports_academy/.../DESIGN.md ("Apex Combat Narrative") for a Persian, right-to-left site. Persian typography rules honoured throughout: - never letter-space Persian text (it breaks cursive joining) - never text-transform: uppercase Persian text (it does nothing useful and disables some shaping) - generous line-height (1.8) for body copy Latin display text (ANZÛ, IBJJF, AJP…) keeps the Anton + tracking treatment from the original design. ========================================================= */ /* ---------- tokens ---------- */ :root { /* surfaces */ --floor: #000000; --surface: #0e0e0e; --surface-1: #131313; --surface-2: #1b1b1b; --surface-3: #242424; --line: #2a2a2a; --line-strong: #3a3a3a; /* brand */ --red: #e6192e; --red-bright: #ff3346; --red-dim: #93000f; --red-wash: rgba(230, 25, 46, .12); --green: #27a644; --green-bright: #66df74; --green-wash: rgba(39, 166, 68, .12); /* text */ --ink: #ededed; --ink-dim: #a9a9a9; --ink-faint: #6f6f6f; /* type */ --font-fa: "Vazirmatn", "Segoe UI", Tahoma, sans-serif; --font-display: "Anton", "Arial Narrow", sans-serif; --font-mono: "JetBrains Mono", "Consolas", "Courier New", monospace; /* space — 8px base unit */ --gutter: 24px; --margin: 16px; --container: 1280px; --section-y: clamp(64px, 9vw, 120px); --header-h: 72px; } @media (min-width: 900px) { :root { --margin: 64px; --header-h: 84px; } } /* ---------- reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--surface); color: var(--ink); font-family: var(--font-fa); font-size: 16px; line-height: 1.8; font-weight: 400; /* `clip`, not `hidden`: `overflow-x: hidden` turns into a scroll container in most browsers, which breaks the sticky header. */ overflow-x: clip; /* subtle "mat grain" so large dark areas are not dead flat */ background-image: radial-gradient(circle at 20% 0%, rgba(230, 25, 46, .05), transparent 45%), radial-gradient(circle at 85% 100%, rgba(39, 166, 68, .04), transparent 40%); background-attachment: fixed; } img, svg, video { display: block; max-width: 100%; height: auto; } /* Author `display` rules (e.g. `.tile { display: block }`) outrank the UA stylesheet, so the gallery filter's `hidden` attribute needs this to win. */ [hidden] { display: none !important; } button, input, select, textarea { font: inherit; color: inherit; } h1, h2, h3, h4 { margin: 0; font-weight: 900; line-height: 1.35; letter-spacing: normal; /* explicit: Persian must not be tracked */ } p { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } a { color: inherit; text-decoration: none; } a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--red-bright); outline-offset: 3px; } ::selection { background: var(--red); color: #fff; } /* ---------- layout ---------- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--margin); } .section { padding-block: var(--section-y); } .section--tight { padding-block: clamp(48px, 6vw, 80px); } .section--floor { background: var(--floor); } .section--raised { background: var(--surface-1); } /* ---------- display type ---------- */ /* Latin-only wordmarks / labels keep the aggressive Anton treatment. */ .latin { font-family: var(--font-display); font-weight: 400; letter-spacing: .02em; text-transform: uppercase; } .mono { font-family: var(--font-mono); font-size: .8125rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; } /* Persian section label — the mono/tracked look is faked with weight and a rule instead of letter-spacing. */ .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: .875rem; font-weight: 700; color: var(--red-bright); margin-bottom: 14px; } .eyebrow::before { content: ""; width: 28px; height: 3px; background: var(--red); flex: none; } .eyebrow--green { color: var(--green-bright); } .eyebrow--green::before { background: var(--green); } .title { font-size: clamp(1.75rem, 4.4vw, 3rem); line-height: 1.28; } .title--xl { font-size: clamp(2.25rem, 7vw, 4.25rem); line-height: 1.2; } .title .hl { color: var(--red-bright); } .title .hl-green { color: var(--green-bright); } .lead { font-size: clamp(1rem, 1.4vw, 1.125rem); color: var(--ink-dim); line-height: 1.9; max-width: 62ch; } .section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: clamp(32px, 4vw, 56px); } .section-head .lead { max-width: 46ch; } /* ---------- buttons ---------- */ .btn { --btn-bg: var(--red); --btn-fg: #fff; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 30px; background: var(--btn-bg); color: var(--btn-fg); font-weight: 700; font-size: 1rem; border: 0; border-radius: 0; cursor: pointer; text-align: center; transition: background-color .18s ease, color .18s ease, transform .18s ease; /* 12px diagonal "combat" cut, mirrored for RTL */ clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); } .btn:hover { --btn-bg: #fff; --btn-fg: #000; } .btn:active { transform: translateY(1px); } .btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); border: 2px solid #fff; clip-path: none; } .btn--ghost:hover { --btn-bg: #fff; --btn-fg: #000; } .btn--green { --btn-bg: var(--green); } .btn--green:hover { --btn-bg: var(--green-bright); --btn-fg: #00320c; } .btn--sm { padding: 10px 20px; font-size: .875rem; } .btn--block { display: flex; width: 100%; } /* text link with an animated underline */ .link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--red-bright); padding-bottom: 3px; border-bottom: 2px solid transparent; transition: border-color .18s ease, gap .18s ease; } .link-arrow:hover { border-bottom-color: var(--red-bright); gap: 14px; } .link-arrow svg { flex: none; } /* ---------- badges ---------- */ .badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; background: var(--red); color: #fff; font-size: .75rem; font-weight: 700; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); } .badge--green { background: var(--green); color: #00320c; } .badge--outline { background: transparent; border: 1px solid var(--line-strong); color: var(--ink-dim); clip-path: none; } /* ---------- header ---------- */ .header { position: sticky; top: 0; z-index: 100; background: rgba(10, 10, 10, .92); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); } .header::after { content: ""; position: absolute; inset-inline: 0; bottom: -1px; height: 2px; background: linear-gradient(90deg, transparent, var(--red), transparent); opacity: .55; } .header__inner { height: var(--header-h); display: flex; align-items: center; gap: 20px; } .brand { display: flex; align-items: center; gap: 12px; flex: none; } .brand__mark { width: 46px; height: 46px; background: #fff; border-radius: 50%; padding: 2px; flex: none; } .brand__text { display: flex; flex-direction: column; line-height: 1.15; } .brand__name { font-family: var(--font-display); font-size: 1.3rem; letter-spacing: .04em; color: #fff; transform: skewX(-8deg); } .brand__sub { font-size: .75rem; color: var(--ink-faint); font-weight: 500; } .nav { margin-inline-start: auto; } .nav__list { display: flex; align-items: center; gap: 4px; } .nav__link { position: relative; display: block; padding: 10px 14px; font-size: .9375rem; font-weight: 500; color: var(--ink-dim); transition: color .18s ease; } .nav__link:hover { color: #fff; } .nav__link::after { content: ""; position: absolute; inset-inline: 14px; bottom: 2px; height: 2px; background: var(--red); transform: scaleX(0); transition: transform .2s ease; } .nav__link:hover::after { transform: scaleX(1); } .nav__link[aria-current="page"] { color: #fff; font-weight: 700; } .nav__link[aria-current="page"]::after { transform: scaleX(1); } .header__cta { flex: none; } .nav-toggle { display: none; width: 44px; height: 44px; margin-inline-start: auto; background: transparent; border: 1px solid var(--line-strong); cursor: pointer; align-items: center; justify-content: center; flex: none; } .nav-toggle__bars { display: block; width: 20px; height: 2px; background: #fff; position: relative; } .nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; inset-inline: 0; height: 2px; background: #fff; transition: transform .22s ease, top .22s ease; } .nav-toggle__bars::before { top: -6px; } .nav-toggle__bars::after { top: 6px; } .nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; } .nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { top: 0; transform: rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { top: 0; transform: rotate(-45deg); } @media (max-width: 979px) { .nav-toggle { display: flex; } .header__cta { display: none; } .nav { position: fixed; inset: var(--header-h) 0 auto 0; background: #0a0a0a; border-bottom: 1px solid var(--line); padding: 12px var(--margin) 28px; margin: 0; display: none; } .nav[data-open="true"] { display: block; } .nav__list { flex-direction: column; align-items: stretch; gap: 0; } .nav__link { padding: 16px 4px; font-size: 1.0625rem; border-bottom: 1px solid var(--line); } .nav__link::after { inset-inline: 4px; } .nav__cta-mobile { margin-top: 20px; } } @media (min-width: 980px) { .nav__cta-mobile { display: none; } } /* ---------- hero ---------- */ .hero { position: relative; min-height: clamp(560px, 86vh, 860px); display: flex; align-items: center; overflow: hidden; background: var(--floor); } .hero__media { position: absolute; inset: 0; object-fit: cover; width: 100%; height: 100%; opacity: .38; filter: grayscale(.35) contrast(1.1); } .hero__scrim { position: absolute; inset: 0; background: linear-gradient(to left, rgba(0,0,0,.35), rgba(0,0,0,.88) 65%), linear-gradient(to top, rgba(0,0,0,.95), transparent 55%); } .hero__inner { position: relative; width: 100%; padding-block: clamp(56px, 8vw, 96px); } .hero__grid { display: grid; gap: clamp(32px, 5vw, 64px); align-items: center; } @media (min-width: 900px) { .hero__grid { grid-template-columns: 1.15fr .85fr; } } .hero__lead { margin-block: 20px 32px; } .hero__actions { display: flex; flex-wrap: wrap; gap: 14px; } .hero__logo { justify-self: center; width: min(360px, 78vw); aspect-ratio: 1; background: #fff; padding: 22px; transform: rotate(-4deg); box-shadow: 14px 14px 0 var(--red); } @media (max-width: 899px) { .hero__logo { display: none; } } /* thin red rule at the very bottom of the hero */ .hero::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 4px; background: var(--red); } /* page header for interior pages */ .page-head { position: relative; padding-block: clamp(52px, 7vw, 92px); background: var(--floor); border-bottom: 1px solid var(--line); overflow: hidden; } .page-head__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .22; filter: grayscale(.5); } .page-head__scrim { position: absolute; inset: 0; background: linear-gradient(to left, rgba(0,0,0,.4), rgba(0,0,0,.9)); } .page-head__inner { position: relative; } .page-head .lead { margin-top: 18px; } .crumbs { display: flex; gap: 8px; font-size: .8125rem; color: var(--ink-faint); margin-bottom: 16px; } .crumbs a:hover { color: var(--red-bright); } .crumbs span::before { content: "/"; margin-inline-end: 8px; color: var(--line-strong); } /* ---------- stats strip ---------- */ .stats { display: grid; grid-template-columns: repeat(2, 1fr); border: 1px solid var(--line); background: var(--surface-1); } @media (min-width: 800px) { .stats { grid-template-columns: repeat(4, 1fr); } } .stat { padding: 28px 22px; border-inline-start: 1px solid var(--line); border-top: 1px solid var(--line); text-align: center; } .stat__value { font-family: var(--font-display); font-size: clamp(2.25rem, 5vw, 3.25rem); line-height: 1; color: var(--red-bright); letter-spacing: .02em; } .stat__label { margin-top: 10px; font-size: .875rem; color: var(--ink-dim); line-height: 1.6; } /* ---------- cards / grids ---------- */ .grid { display: grid; gap: var(--gutter); } .grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); } .grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); } .grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); } .card { position: relative; background: var(--surface-1); border: 1px solid var(--line); padding: 28px 26px 30px; height: 100%; display: flex; flex-direction: column; transition: border-color .2s ease, background-color .2s ease, transform .2s ease; } .card::before { content: ""; position: absolute; inset-inline: -1px; top: -1px; height: 4px; background: var(--red); transform: scaleX(0); transform-origin: right; transition: transform .28s ease; } .card:hover { border-color: var(--line-strong); background: var(--surface-2); transform: translateY(-4px); } .card:hover::before { transform: scaleX(1); } .card--green::before { background: var(--green); } .card__icon { width: 52px; height: 52px; display: grid; place-items: center; background: var(--red-wash); border: 1px solid rgba(230, 25, 46, .3); color: var(--red-bright); margin-bottom: 20px; flex: none; } .card--green .card__icon { background: var(--green-wash); border-color: rgba(39, 166, 68, .3); color: var(--green-bright); } .card__title { font-size: 1.1875rem; margin-bottom: 10px; } .card__text { color: var(--ink-dim); font-size: .9375rem; line-height: 1.85; flex: 1; } .card__meta { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: .8125rem; color: var(--ink-faint); } /* ---------- media tiles (gallery) ---------- */ .tile { position: relative; display: block; overflow: hidden; background: var(--surface-2); border: 1px solid var(--line); cursor: zoom-in; } .tile img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; transition: transform .5s ease, filter .35s ease; filter: grayscale(.28); } .tile:hover img { transform: scale(1.06); filter: grayscale(0); } .tile--tall img { aspect-ratio: 3 / 4; } .tile--wide img { aspect-ratio: 16 / 10; } .tile__cap { position: absolute; inset-inline: 0; bottom: 0; padding: 44px 18px 16px; background: linear-gradient(to top, rgba(0,0,0,.92), transparent); font-size: .875rem; font-weight: 700; line-height: 1.6; } .tile__tag { position: absolute; top: 12px; inset-inline-start: 12px; z-index: 1; } /* Certificates are documents, not photos — never crop them and never desaturate them, or the seals and signatures stop reading. */ .tile--cert { background: #fff; } .tile--cert img { aspect-ratio: 3 / 4; object-fit: contain; filter: none; } .tile--cert:hover img { transform: none; } .tile--cert .tile__cap { background: rgba(0, 0, 0, .88); padding: 12px 14px; font-size: .8125rem; } .gallery-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); } /* filter pills */ .filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; } .filter { padding: 9px 20px; background: transparent; border: 1px solid var(--line-strong); color: var(--ink-dim); font-size: .875rem; font-weight: 700; cursor: pointer; transition: all .18s ease; } .filter:hover { color: #fff; border-color: #fff; } .filter[aria-pressed="true"] { background: var(--red); border-color: var(--red); color: #fff; } /* ---------- honours / timeline ---------- */ .honours { display: grid; gap: 0; border-top: 1px solid var(--line); } .honour { display: grid; gap: 6px 24px; padding: 22px 0; border-bottom: 1px solid var(--line); align-items: baseline; transition: background-color .2s ease, padding-inline .2s ease; } @media (min-width: 760px) { .honour { grid-template-columns: 120px 1fr auto; } .honour:hover { background: var(--surface-1); padding-inline: 16px; } } .honour__year { font-family: var(--font-mono); font-size: .9375rem; font-weight: 700; color: var(--red-bright); letter-spacing: .06em; } .honour__title { font-weight: 700; font-size: 1.0625rem; line-height: 1.6; } .honour__place { color: var(--ink-dim); font-size: .875rem; margin-top: 2px; } .honour__medal { font-size: .8125rem; white-space: nowrap; } /* ---------- coach ---------- */ .coach { display: grid; gap: clamp(28px, 4vw, 56px); align-items: start; } @media (min-width: 900px) { .coach { grid-template-columns: .8fr 1.2fr; } } .coach__photo { position: relative; border: 1px solid var(--line); } .coach__photo img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; filter: grayscale(.3); } /* Offset frame at the corner. Deliberately painted above the photo — a negative z-index would drop it behind the section background instead. */ .coach__photo::after { content: ""; position: absolute; inset-inline-end: -14px; bottom: -14px; width: 96px; height: 96px; border: 3px solid var(--red); pointer-events: none; } .coach__creds { display: flex; flex-wrap: wrap; gap: 10px; margin-block: 22px 26px; } /* ---------- schedule table ---------- */ .table-wrap { overflow-x: auto; border: 1px solid var(--line); } table.schedule { width: 100%; min-width: 720px; border-collapse: collapse; background: var(--surface-1); text-align: right; } table.schedule thead th { background: var(--red); color: #fff; font-weight: 700; font-size: .9375rem; padding: 16px 18px; white-space: nowrap; } table.schedule tbody th { font-weight: 700; color: #fff; background: var(--surface-2); white-space: nowrap; } table.schedule td, table.schedule th { padding: 15px 18px; border-bottom: 1px solid var(--line); vertical-align: middle; } table.schedule tbody tr:last-child td, table.schedule tbody tr:last-child th { border-bottom: 0; } table.schedule tbody tr:hover td { background: var(--surface-2); } .slot { display: flex; flex-direction: column; gap: 4px; } .slot__name { font-weight: 700; font-size: .9375rem; } .slot__time { font-family: var(--font-mono); font-size: .8125rem; color: var(--ink-dim); letter-spacing: .04em; } .slot--off { color: var(--ink-faint); font-size: .875rem; } /* ---------- blog ---------- */ .post-card { display: flex; flex-direction: column; height: 100%; background: var(--surface-1); border: 1px solid var(--line); transition: border-color .2s ease, transform .2s ease; } .post-card:hover { border-color: var(--line-strong); transform: translateY(-4px); } .post-card__media { overflow: hidden; } .post-card__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; filter: grayscale(.3); transition: transform .5s ease, filter .35s ease; } .post-card:hover .post-card__media img { transform: scale(1.05); filter: grayscale(0); } .post-card__body { padding: 24px 24px 26px; display: flex; flex-direction: column; flex: 1; gap: 12px; } .post-card__title { font-size: 1.125rem; line-height: 1.6; } .post-card__excerpt { color: var(--ink-dim); font-size: .9375rem; flex: 1; } .post-card__meta { display: flex; gap: 14px; font-size: .8125rem; color: var(--ink-faint); } .prose { max-width: 68ch; } .prose > * + * { margin-top: 1.35em; } .prose h2 { font-size: clamp(1.375rem, 2.6vw, 1.75rem); margin-top: 2em; } .prose h3 { font-size: 1.1875rem; margin-top: 1.8em; } .prose p, .prose li { color: #cfcfcf; line-height: 2; } .prose ul { list-style: none; } .prose ul li { position: relative; padding-inline-start: 22px; } .prose ul li::before { content: ""; position: absolute; inset-inline-start: 0; top: .78em; width: 8px; height: 8px; background: var(--red); } .prose ol { counter-reset: n; } .prose ol li { position: relative; padding-inline-start: 34px; counter-increment: n; } .prose ol li::before { content: counter(n); position: absolute; inset-inline-start: 0; top: .1em; font-family: var(--font-mono); font-weight: 700; color: var(--red-bright); } .prose blockquote { border-inline-start: 3px solid var(--red); padding: 4px 20px; color: var(--ink); font-weight: 500; } .prose img { border: 1px solid var(--line); } .prose strong { color: #fff; } /* ---------- forms ---------- */ .form { display: grid; gap: 18px; } .field { display: grid; gap: 8px; } .field label { font-size: .875rem; font-weight: 700; } .field .req { color: var(--red-bright); } .field input, .field select, .field textarea { width: 100%; padding: 13px 15px; background: #080808; border: 1px solid rgba(255, 255, 255, .22); border-radius: 0; color: var(--ink); transition: border-color .18s ease, box-shadow .18s ease; } .field input::placeholder, .field textarea::placeholder { color: var(--ink-faint); } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px var(--red-wash); } .field textarea { resize: vertical; min-height: 130px; line-height: 1.9; } .field__hint { font-size: .8125rem; color: var(--ink-faint); } .form__note { font-size: .8125rem; color: var(--ink-faint); line-height: 1.8; } @media (min-width: 700px) { .form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } } /* ---------- contact rows ---------- */ .contact-list { display: grid; gap: 2px; } .contact-row { display: flex; align-items: center; gap: 16px; padding: 18px; background: var(--surface-1); border: 1px solid var(--line); transition: border-color .2s ease, background-color .2s ease; } .contact-row:hover { border-color: var(--red); background: var(--surface-2); } .contact-row__icon { width: 42px; height: 42px; display: grid; place-items: center; background: var(--red-wash); color: var(--red-bright); flex: none; } .contact-row__label { font-size: .8125rem; color: var(--ink-faint); } .contact-row__value { font-weight: 700; word-break: break-word; } .contact-row__value--ltr { direction: ltr; text-align: right; font-family: var(--font-mono); letter-spacing: .04em; } /* ---------- map ---------- */ .map { border: 1px solid var(--line); background: var(--surface-1); } .map__frame { display: block; width: 100%; aspect-ratio: 4 / 3; border: 0; /* the embed is a bright document dropped into a dark page — tone it down until hover so it stops fighting the rest of the layout */ filter: grayscale(.35) contrast(1.05) brightness(.92); transition: filter .3s ease; } .map__frame:hover { filter: none; } .map__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 16px 18px; border-top: 1px solid var(--line); } /* ---------- CTA band ---------- */ .cta-band { position: relative; background: var(--red); color: #fff; overflow: hidden; } .cta-band__inner { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px; padding-block: clamp(44px, 6vw, 72px); } .cta-band h2 { font-size: clamp(1.5rem, 3.4vw, 2.25rem); } .cta-band p { margin-top: 10px; color: rgba(255,255,255,.88); max-width: 52ch; } .cta-band .btn { --btn-bg: #fff; --btn-fg: #000; } .cta-band .btn:hover { --btn-bg: #000; --btn-fg: #fff; } .cta-band::before { content: ""; position: absolute; inset-block: -40%; inset-inline-end: -8%; width: 340px; background: rgba(0, 0, 0, .12); transform: skewX(-15deg); } /* ---------- footer ---------- */ .footer { background: var(--floor); border-top: 1px solid var(--line); padding-block: clamp(48px, 6vw, 72px) 0; } .footer__grid { display: grid; gap: 36px; } @media (min-width: 800px) { .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; } } .footer__title { font-size: 1rem; margin-bottom: 18px; } .footer__list { display: grid; gap: 11px; font-size: .9375rem; color: var(--ink-dim); } .footer__list a:hover { color: var(--red-bright); } .footer__about { color: var(--ink-dim); font-size: .9375rem; max-width: 40ch; margin-top: 16px; } .socials { display: flex; gap: 10px; margin-top: 20px; } .socials a { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--line-strong); color: var(--ink-dim); transition: all .18s ease; } .socials a:hover { background: var(--red); border-color: var(--red); color: #fff; } .footer__bottom { margin-top: 44px; padding-block: 22px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; font-size: .8125rem; color: var(--ink-faint); } /* ---------- lightbox ---------- */ .lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(0, 0, 0, .95); display: none; align-items: center; justify-content: center; padding: clamp(16px, 4vw, 56px); } .lightbox[data-open="true"] { display: flex; } .lightbox__figure { margin: 0; max-width: min(1100px, 100%); max-height: 100%; display: flex; flex-direction: column; gap: 14px; } .lightbox__img { max-height: min(78vh, 900px); width: auto; margin-inline: auto; object-fit: contain; border: 1px solid var(--line-strong); } .lightbox__cap { text-align: center; font-size: .9375rem; color: var(--ink-dim); } .lightbox__btn { position: absolute; width: 52px; height: 52px; display: grid; place-items: center; background: rgba(20, 20, 20, .9); border: 1px solid var(--line-strong); color: #fff; cursor: pointer; transition: background-color .18s ease; } .lightbox__btn:hover { background: var(--red); border-color: var(--red); } .lightbox__close { top: 16px; inset-inline-end: 16px; } .lightbox__prev { top: 50%; transform: translateY(-50%); inset-inline-start: 12px; } .lightbox__next { top: 50%; transform: translateY(-50%); inset-inline-end: 12px; } .lightbox__count { position: absolute; bottom: 18px; inset-inline-start: 50%; transform: translateX(50%); font-family: var(--font-mono); font-size: .8125rem; color: var(--ink-faint); letter-spacing: .1em; } /* ---------- utilities ---------- */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .skip-link { position: absolute; inset-inline-start: 50%; top: -80px; transform: translateX(50%); z-index: 300; background: var(--red); color: #fff; padding: 12px 24px; font-weight: 700; transition: top .2s ease; } .skip-link:focus { top: 12px; } .ltr { direction: ltr; unicode-bidi: isolate; } .text-center { text-align: center; } .mt-0 { margin-top: 0; } .divider { height: 1px; background: var(--line); border: 0; margin: 0; } /* scroll reveal */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; } .reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } .reveal { opacity: 1; transform: none; } }