/* Дизайн-токены. Все значения сайта живут здесь — в остальных файлах только var(). */ :root { /* --- Цвет --- База тёмная почти в ноль: сверху лежит слой зерна (см. base.css), его средний тон поднимает фон до видимых ~#0d0d0d. */ --color-bg: #060606; --color-text: #f4f4f4; /* Приглушённый текст: вторая половина крупного заголовка на портфолио. Контраст к фону 4.2:1 — с запасом к порогу 3:1 для крупного текста. */ --color-text-muted: #737373; /* Чёрные плитки-заглушки: чуть светлее фона, чтобы читались на нём. */ --color-surface: #1c1c1c; /* Приглушённый текст на тёмной карточке. Светлее --color-text-muted: тот рассчитан на фон страницы и на карточке #1c1c1c давал бы 3.6:1 — мало для мелкого текста. Здесь 6.8:1. */ --color-text-soft: #a3a3a3; /* Белая карточка: тот же почти-белый, что и текст. На карточке всё переворачивается — текст берёт цвет фона страницы. */ --color-card: #f4f4f4; /* Светлая бумага для окна-заявления. Не идеально белая и чуть тёплая — лист, а не подсветка. База задана светлее конечного тона: сверху лежит то же зерно, что на фоне страницы, только вывернутое (см. statement.css), и оно опускает лист до видимых ~#e9e9e3. */ --color-paper: #f9f8f0; /* Пилюли на тёмном: кнопка контакта и переключатель языка. Заливка чуть светлее фона страницы, обводка — тонкая светлая линия. */ --color-pill: #161616; --color-pill-border: rgba(255, 255, 255, 0.14); /* Приглушённый текст на светлой бумаге — пара к --color-text-muted. Контраст к бумаге 4.3:1, как у тёмного двойника к фону страницы. */ --color-text-muted-inverse: #6b6862; /* --- Типографика --- */ --font-display: "Manrope", "Helvetica Neue", "Arial", sans-serif; /* Моноширинный — системный: своего файла в проекте нет, а тянуть второй шрифт ради номеров на карточках не хочу. Тот же стек использует волна из нулей и единиц на первом экране. */ --font-mono: ui-monospace, "SF Mono", "Menlo", "Consolas", monospace; /* --- Пространство --- */ --gutter: clamp(1.25rem, 4vw, 3rem); /* --- Движение --- */ --ease: cubic-bezier(0.22, 1, 0.36, 1); /* --- Имя (первый экран) --- Пропорции сняты с референса, канва 2000x1088. Опорные величины — ширины слов («Dekker» 635px, «Lars» 377px), по ним восстановлен кегль: кегль 190px, интерлиньяж 171px (0.9), высота прописных 136px, квадрат фото 160px, нижний край квадрата лежит на базовой линии второй строки, отступ квадрата до текста 64px, левый край текста 783px = 39.15% ширины, верх прописных первой строки 479px = 44% высоты. */ --name-size: 9.5vw; /* 190 / 2000 */ --name-leading: 0.9; /* 171 / 190 */ --name-tracking: -0.015em; --name-weight: 700; --name-left: 39.15vw; /* 783 / 2000 */ --name-top: 44svh; /* 479 / 1088 */ /* Квадрат фото: ровно в рамках буквы V второй строки — от верха прописных до базовой линии. Сторона = высоте прописных Manrope. */ --photo-size: calc(var(--name-size) * 0.72); --photo-gap: calc(var(--name-size) * 0.337); /* 64 / 190 */ /* Расстояние от верха бокса заголовка до верха прописных. Считается из метрик Manrope при --name-leading: 0.9 (ascent 1.07em, descent 0.30em, cap 0.72em) и служит поправкой, чтобы --name-top отмерялся именно до прописных: (0.9 - 1.37) / 2 + (1.07 - 0.72) = 0.115em. */ --name-cap-offset: 0.115em; /* Оптическая компенсация первой строки имени: боковой отступ в глифе у R и V разный, из-за чего строки кажутся невыровненными. Для кириллицы пара другая — у В отступ больше, чем у V, поэтому сдвиг почти нулевой. */ --name-optical: -0.065em; /* Подзаголовок под именем: ~23px на канве 2000px, мелкий текст в духе референса «Ezio Salazar». Тем же кеглем набрана и надпись про локацию. */ --subtitle-size: 1.15vw; /* Роль над заголовком, как «Independent Art Director» в референсе: кегль ~50px на канве 2000px, правый край блока чуть левее левой кромки заголовка, низ — чуть выше прописных первой строки. */ --role-size: 2.5vw; /* --- Портфолио: крупный заголовок по центру --- Кегль растёт с шириной экрана, но упирается в потолок: на широком мониторе строка иначе перестаёт читаться одним взглядом. */ --title-size: clamp(2rem, 4.2vw, 5rem); --title-leading: 0.92; --title-tracking: -0.03em; /* Круглое фото над заголовком: ростом примерно с три строки мелкого текста, чтобы читалось как подпись, а не как портрет. */ --avatar-size: clamp(2.75rem, 3.4vw, 4rem); /* Табы с ключевыми словами: чуть мельче шапки, чтобы читались как подписи на полях, а не как навигация. */ --tag-size: calc(var(--subtitle-size) * 0.82); /* --- Портфолио: экран-заявление --- Пропорции сняты с референса, канва 1700x900: кегль 73px = 4.3vw, интерлиньяж 80px (1.09), блок текста шириной 735px = 43% ширины. Как и у заголовка первого экрана, кегль упирается в потолок: на широком мониторе фраза иначе перестаёт читаться одним взглядом. */ --statement-size: clamp(1.75rem, 4.3vw, 4.5rem); --statement-leading: 1.09; --statement-tracking: -0.02em; /* Подчёркивание у слов-акцентов: толщина и отбивка от базовой линии в долях кегля — линия растёт вместе с текстом. */ --statement-underline: 0.062em; --statement-underline-offset: 0.13em; /* Скругление светлого окна — то же, что у окна контакта на последнем экране: два окна на одной странице обязаны быть одной формы. */ --statement-radius: clamp(1rem, 1.8vw, 2rem); /* Плотность зерна на бумаге. Плитка та же и в том же масштабе, что на фоне страницы, только вывернутая: крупинки становятся тёмными. Плотность выше фоновых 0.13 — на светлом та же амплитуда зерна читается заметно слабее, чем на тёмном (глаз меряет контраст в долях от фона, а фон здесь в двадцать раз светлее). 0.32 даёт на бумаге тот же размах крупинки на глаз, что 0.13 на странице. */ --paper-grain-opacity: 0.32; /* --- Портфолио: блок «Ценность» --- Пропорции сняты с референса, канва 1990x455: кегль 60px = 3vw, интерлиньяж 72px (1.2), колонка текста 1084px = 54.5% ширины и начинается на 34.5%, отступ первой строки 214px = 3.55em. Отступ первой строки чуть уменьшен: переносы заданы вручную, и с референсными 3.55em самая длинная строка не помещалась в колонку. Нижняя граница clamp намеренно низкая: на десктопе от 768px кегль обязан оставаться ровно 3vw, иначе строки перестают влезать. Мобильный размер задан отдельно ниже. */ --value-size: clamp(1.1rem, 3vw, 3.25rem); --value-leading: 1.2; --value-indent: 2.8em; /* Колонка текста и пустое поле справа от неё. Вынесены в токены, потому что по левому краю этой колонки равняется ряд карточек ниже — значения обязаны совпадать. */ --value-column: 71vw; --value-inset: 8vw; --value-left: calc(100vw - var(--value-inset) - var(--value-column)); /* --- Портфолио: белые карточки --- Пропорции сняты с референса, канва 1358x658: карточка 280x295, то есть 100 : 105. Между карточками пустого места почти столько же, сколько занимает карточка, а соседние сдвинуты по вертикали примерно на половину своей высоты — отсюда «скачущий» ряд. Кегль заголовка и подписи считаются от той же канвы. */ --card-title-size: clamp(1.5rem, 2.4vw, 2.75rem); --card-text-size: clamp(0.8rem, 0.95vw, 1.05rem); --card-index-size: clamp(1.05rem, 1.5vw, 1.6rem); /* Сдвиг средней карточки вниз. Процент от ширины колонки, а не от высоты: у процентных отступов база всегда ширина. */ --card-offset: 47%; /* Ширина ряда карточек равна ширине текста в блоке «Ценность». Правый край текста задаёт первая строка: она короче второй, но утоплена вправо и потому уходит дальше всех — вместе с отступом это 22.92 кегля. Считаем от кегля, а не в vw, — тогда ряд остаётся вровень с текстом и после того, как кегль упрётся в потолок clamp на широком мониторе. */ --card-row: calc(var(--value-size) * 22.92); /* --- Портфолио: шапка раздела «Проекты» --- Пропорции сняты с референса, канва 1990x460: кегль заголовка 200px = 10% ширины, колонка текста справа 372px = 18.7%. Потолок кегля тот же по смыслу, что у остальных крупных блоков: на широком мониторе слово иначе перестаёт помещаться в строку. */ --projects-size: clamp(2.75rem, 10vw, 10rem); --projects-note: 18.7vw; /* --- Портфолио: блок «Принципы» --- Фраза набрана теми же величинами, что текст блока «Ценность» (--value-*), и ряд карточек под ней стоит по той же колонке — новых размеров для текста не заводим. Своё здесь только карточка: срез угла и кегли внутри неё. Срез задан не в процентах, а в абсолютной величине: в процентах он зависел бы от ширины и высоты по-разному, и угол переставал бы быть в 45° на карточке любой другой пропорции. Длина среза взята с белой карточки: там он занимает 8.24% ширины, на карточке правил это 1.8vw. */ --rule-cut: clamp(1.1rem, 1.8vw, 1.9rem); /* Скругление углов взято с белых карточек: там радиус равен 4% ширины карточки, а на стыках среза — 3%. Карточка правил примерно той же ширины, что белая (обе стоят по три в ряду шириной --card-row), поэтому 4% её ширины — это 0.88vw. */ --rule-radius: clamp(0.5rem, 0.88vw, 1.1rem); --rule-gap: 1.5vw; --rule-title-size: clamp(1.05rem, 1.55vw, 1.7rem); /* Отбивка от номера до заголовка. Задана величиной, а не пустой строкой-распоркой: так заголовки всех карточек ряда стоят на одной линии, сколько бы строк ни занял текст под ними. */ --rule-title-gap: clamp(1.75rem, 4.4vw, 4.5rem); /* Минимальная высота карточки в долях её ширины — чтобы короткий текст не сплющивал карточку до строчки. */ --rule-ratio: 66%; /* --- Портфолио: карточки проектов --- Фигура повторяет папки с главной, только крупнее и квадратнее: пропорция 100 : 80 вместо вытянутой. В ряду две карточки, на мониторе 1440px каждая выходит примерно 660x528. Отступ фото от обводки задан в процентах ширины — проценты в padding по всем четырём сторонам считаются от ширины, поэтому зазор везде одинаковый и не плывёт при смене размера карточки. */ --project-inset: 3%; --project-gap: clamp(1.75rem, 4vw, 4rem); --project-row-gap: clamp(2.75rem, 7vw, 6rem); --project-title-size: clamp(1.15rem, 1.9vw, 2rem); /* Форма фото: рамка 100x80 минус зазор 3% с каждой стороны даёт холст 94x74. Маску используют два слоя — само фото и зерно поверх него, — поэтому путь лежит токеном, а не копией в каждом. */ --project-photo-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 94 74' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M1 0L69.343 0A1 1 0 0 1 70.05 0.293L93.707 23.95A1 1 0 0 1 94 24.657L94 73A1 1 0 0 1 93 74L1 74A1 1 0 0 1 0 73L0 1A1 1 0 0 1 1 0Z'/%3E%3C/svg%3E"); /* Зерно на фото: та же плитка и тот же масштаб, что у фона страницы (base.css), — крупинка одна и та же, страница читается цельно. Плотность ниже фоновых 0.13: фото светлее тёмной подложки, и на нём то же зерно бьёт заметно сильнее. */ --project-grain-opacity: 0.09; /* Надпись на заливке карточки-приписки. Кегль привязан к ширине экрана, как у остальных крупных надписей раздела: карточка тоже тянется вместе с ним. */ --project-blank-size: clamp(2.75rem, 9vw, 8rem); /* --- Портфолио: последний экран, контакт --- Тёмное окно во всю ширину со скруглёнными углами, внутри только заголовок и кнопка, вокруг разлетаются снимки. Кегль заголовка упирается в потолок, как у остальных крупных блоков: на широком мониторе фраза иначе перестаёт читаться одним взглядом. Высота окна ограничена сверху, чтобы на большом мониторе текст не терялся посреди пустоты. */ --contact-radius: clamp(1rem, 1.8vw, 2rem); --contact-height: min(88svh, 52rem); --contact-title-size: clamp(1.6rem, 3.5vw, 3.75rem); /* Скругление снимков — та же доля от их ширины, что у плиток на главной (5%), только считать её здесь не от чего: ширина плитки задана в процентах контейнера. */ --contact-photo-radius: clamp(0.25rem, 0.4vw, 0.45rem); /* --- Страница кейса: первый экран --- Пропорции сняты с референса, канва 1026x890: колонка текста 685px = 67% ширины и стоит по центру, текст в ней прижат влево. Колонок две и обе центрованы: по узкой стоят надзаголовок и заголовок, по широкой — снимок и карточки под ним. Разница небольшая и намеренная: снимок должен чуть выступать за рамки заголовка с обеих сторон. Своих кеглей у страницы нет — кроме одного: текст кейса (карточки «О проекте» / «Задача» и рассказ под ними) набран на 30% крупнее общесайтового мелкого, по просьбе Руслана. Заголовок страницы взят с первого экрана портфолио (--title-*), надзаголовок — мелкий общесайтовый (--subtitle-size), заголовки внутри карточек и подзаголовки рассказа — с карточек проектов (--project-title-size). */ /* Границы у clamp обязательны: --subtitle-size задан в vw и на планшете проседает до 9px, а на широком мониторе улетает вверх. */ --case-text-size: clamp(1rem, calc(var(--subtitle-size) * 1.3), 1.6rem); /* Вынос на правое поле: крупная цифра и мелкая подпись под ней. Цифра примерно вдвое крупнее текста — как в референсе Руслана. */ --case-stat-size: clamp(2rem, 3.2vw, 3rem); /* Ширина выноса и его отбивка от колонки текста. В em от кегля текста, чтобы поле не разъезжалось, когда кегль упирается в потолок. */ --case-stat-width: 14em; --case-stat-gap: 3em; --case-column: min(68vw, 62rem); --case-media: min(80vw, 73rem); /* Скругление снимка — та же величина, что у светлых окон портфолио: скруглений на сайте держим одну систему. */ --case-photo-radius: clamp(1rem, 1.8vw, 2rem); /* --- Страница кейса: карточки «О проекте» и «Задача» --- Пропорции сняты с референса, канва 1286x782: карточка во всю ширину страницы за вычетом полей, её внутренний отступ 57px = 4.46% ширины страницы, текст внутри начинается ровно с середины карточки, кегль 36px = 2.8%, интерлиньяж 1.14, между карточками 46px = 3.6%. Кегли взяты общесайтовые (см. выше), от референса остались только отступы, и те уменьшены примерно на четверть — Руслан просил карточки компактнее. */ --case-fact-padding: clamp(1.25rem, 3.45vw, 3.25rem); --case-fact-gap: clamp(0.75rem, 2.8vw, 2.5rem); /* Скругление карточки — из той же системы, что у снимка выше. */ --case-card-radius: clamp(1rem, 1.9vw, 2rem); } :root:lang(ru) { --name-optical: 0.008em; } @media (max-width: 767px) { :root { /* На телефоне общесайтовый мелкий кегль вырастает до 4vw — он рассчитан на подписи в hero, а не на абзацы. Тексту кейса задаём свою величину, иначе он спорит с заголовками. */ --case-text-size: 1.05rem; --name-size: 17vw; /* Сдвигаем текст вправо ровно настолько, чтобы левый край фото встал по колонке отступа, а не уехал за экран. */ --name-left: calc(var(--gutter) + var(--photo-size) + var(--photo-gap)); --name-top: 38svh; --subtitle-size: 4vw; --role-size: 5vw; /* На телефоне заданные переносы сняты, привязка кегля к ширине строки больше не нужна — размер выбираем по читаемости. */ --value-size: clamp(1.375rem, 6vw, 2rem); } }