/* ========================================================================== A — Pavlóv — стили сайта Вся внешность здесь. Тексты и картинки — в html-файлах. ФОН СТРАНИЦЫ задаётся в теге : — белый — свой цвет — чёрная страница (раздел Art) ========================================================================== */ :root{ --bumaga: #ffffff; --tekst: #000000; --tekst-tihiy: #6d6d6d; --liniya: #e6e6e6; --shrift-osnovnoy: "Source Serif 4", "Source Serif Pro", Georgia, serif; --shrift-zagolovok: "Roboto Serif", "Source Serif 4", Georgia, serif; /* Обложки: ширина рамки и поле паспарту — разные на телефоне и на компьютере */ --ramka-shirina: 313px; --pole: 48px; --mezhdu-rabotami: 80px; /* зазор между обложками */ --mezhdu-kartinkami: 40px; /* зазор между картинками внутри проекта */ --treking: 16.8px; /* обычный межбуквенный интервал названий */ --zapas-pod-shapku: 80px; /* сколько оставить над картинкой в проекте */ /* Обложка целиком помещается в экран: это предельная высота рамки, из неё считается её ширина — так же, как у картинок в проекте */ --predel-oblozhki: calc(100vh - 160px); --predel-oblozhki: calc(100dvh - 160px); } @media (min-width: 800px){ :root{ --ramka-shirina: 640px; --pole: 106px; --mezhdu-rabotami: 160px; --mezhdu-kartinkami: 160px; } } body.temno{ --bumaga: #000000; --tekst: #ffffff; --tekst-tihiy: #9a9a9a; --liniya: #262626; } *, *::before, *::after{ box-sizing: border-box; } html{ -webkit-text-size-adjust: 100%; } body{ margin: 0; background: var(--bumaga); color: var(--tekst); font-family: var(--shrift-osnovnoy); font-weight: 400; font-size: 16px; line-height: 1.4; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, strong, b{ font-weight: 400; } img, video{ display: block; max-width: 100%; height: auto; } a{ color: inherit; font-style: italic; text-decoration: none; } a:hover{ text-decoration: underline; text-underline-offset: 4px; } a:focus-visible{ outline: 2px solid currentColor; outline-offset: 3px; } a.logotip{ font-style: normal; } .dlya-poiska{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* --- Шапка --------------------------------------------------------------- */ .shapka{ position: fixed; inset: 0 0 auto 0; z-index: 9999; display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; mix-blend-mode: difference; color: #fff; pointer-events: none; } .shapka a{ pointer-events: auto; display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; font-size: 16px; } .shapka .razdely{ position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; } .shapka .kosaya{ font-style: italic; padding: 0 4px; opacity: .8; } .shapka a[aria-current="page"]{ text-decoration: underline; text-underline-offset: 4px; } /* --- Каркас -------------------------------------------------------------- */ .polotno{ max-width: 1240px; margin: 0 auto; padding: 0 20px; } @media (min-width: 1280px){ .polotno{ max-width: 1800px; padding: 0 92px; } } /* Верх страницы: логотип и отступ до первой обложки — сняты с макета */ .zastavka{ display: flex; justify-content: center; padding: 151px 20px 0; } .zastavka img{ width: 180px; height: 102px; } body.temno .zastavka{ padding-top: 125px; } body.temno .zastavka img{ width: 192px; height: 156px; } /* --- Лента обложек ------------------------------------------------------- Обложка = ПАСПАРТУ (цветная рамка с равным полем со всех сторон) вокруг КАДРА заданной пропорции. Поле одинаковое сверху, снизу и по бокам, поэтому рамка повторяет пропорцию кадра. На самой карточке задаются переменные: --fon цвет рамки --pole поле паспарту (0px — если картинка во всю рамку) --kadr пропорция кадра, например 428/596 Плюс необязательные — на .kadr, если картинку надо кадрировать: --iw --ih --il --it размер и сдвиг картинки внутри кадра -------------------------------------------------------------------------- */ .lenta{ display: flex; flex-direction: column; align-items: center; gap: var(--mezhdu-rabotami); padding: 168px 0 120px; /* от логотипа до первой обложки */ } body.temno .lenta{ padding-top: 140px; } .rabota{ position: relative; display: block; /* Ширина — обычная, либо такая, при которой рамка влезает в экран по высоте. Что меньше, то и берём. */ width: min( var(--ramka-shirina), calc((var(--predel-oblozhki) - 2 * var(--pole)) * (var(--kadr)) + 2 * var(--pole)) ); max-width: 100%; font-style: normal; } .rabota:hover{ text-decoration: none; } .rabota.shiroka{ --ramka-shirina: 898px; } @media (min-width: 800px){ .rabota.shiroka{ --pole: 120px; } } @media (max-width: 799px){ .rabota.shiroka{ --ramka-shirina: 313px; } } .ramka{ background: var(--fon, transparent); padding: var(--pole); } .kadr{ position: relative; aspect-ratio: var(--kadr); overflow: hidden; } .kadr img{ position: absolute; width: var(--iw, 100%); height: var(--ih, 100%); left: var(--il, 0); top: var(--it, 0); max-width: none; object-fit: cover; } .nazvanie{ font-family: var(--shrift-zagolovok); text-transform: uppercase; font-size: 12px; letter-spacing: var(--treking); text-indent: var(--treking); /* гасит интервал после последней буквы */ text-align: center; overflow: hidden; /* гасит пустой хвост после последней буквы */ margin: 8px 0 0; /* от рамки до названия */ } @media (min-width: 800px){ .nazvanie{ font-size: 14px; } } /* Описание проекта — появляется только при наведении. Место под него зарезервировано всегда, поэтому при наведении ничего не прыгает, а зазор 160px до следующей работы отсчитывается от описания — как в макете. */ .podpis{ margin: 4px 0 0; /* от названия до описания */ text-align: center; font-size: 14px; line-height: 1.1; color: var(--tekst); /* тем же цветом, что и название */ opacity: 0; transition: opacity .25s ease; pointer-events: none; } .rabota:hover .podpis, .rabota:focus-visible .podpis{ opacity: 1; } /* --- Страница работы ------------------------------------------------------ Название стоит вплотную к первой картинке, описания идут отдельными блоками между картинками. -------------------------------------------------------------------------- */ /* Название прибивается к шапке при скролле. Инверсия (как у меню) держит его читаемым над любой картинкой. */ .zagolovok-raboty{ position: sticky; top: 52px; z-index: 500; mix-blend-mode: difference; color: #fff; font-family: var(--shrift-zagolovok); text-transform: uppercase; font-size: 12px; letter-spacing: var(--treking); text-indent: var(--treking); text-align: center; overflow: hidden; margin: 110px 0 26px; padding: 0 12px; /* как у шапки — во всю ширину страницы */ } @media (min-width: 800px){ .zagolovok-raboty{ font-size: 14px; top: 60px; margin: 140px 0 30px; padding: 0 20px; } } .galereya{ display: flex; flex-direction: column; gap: var(--mezhdu-kartinkami); /* 160px на компьютере, 40px на телефоне */ } /* Картинка целиком помещается в экран: по ширине — колонкой, по высоте — за вычетом запаса под шапку. Что не влезло по высоте, ужимается и встаёт по центру (object-fit: contain). */ .galereya img, .galereya video{ width: 100%; height: auto; max-height: calc(100vh - var(--zapas-pod-shapku)); max-height: calc(100dvh - var(--zapas-pod-shapku)); object-fit: contain; } /* Блок описания: широкая колонка по центру, весь курсивом */ .blok-teksta{ max-width: 821px; margin: 0 auto; text-align: center; font-size: 16px; line-height: 1.4; font-style: italic; } @media (min-width: 1280px){ .blok-teksta{ max-width: 776px; } } .blok-teksta p{ margin: 0 0 12px; } .blok-teksta p:last-child{ margin-bottom: 0; } /* --- Переключатель работ внизу страницы ---------------------------------- По краям — названия соседних работ тем же набором, что и заголовки. Посередине — ссылка на раздел. Список закольцован. -------------------------------------------------------------------------- */ .perekluchatel{ /* 1fr auto 1fr — средняя ссылка строго по центру страницы */ display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; padding: 60px 32px 0; } .perekluchatel .predydushchaya{ justify-self: start; } .perekluchatel .ko-vsem{ justify-self: center; } .perekluchatel .sleduyushchaya{ justify-self: end; } .perekluchatel a{ min-height: 44px; display: inline-flex; align-items: center; } .perekluchatel .predydushchaya, .perekluchatel .sleduyushchaya{ font-family: var(--shrift-zagolovok); font-style: normal; text-transform: uppercase; font-size: 14px; /* трекинг меньше, чем у заголовков: иначе длинные названия вроде «А — если я б был дитём» не помещаются в свою половину */ letter-spacing: 8px; text-indent: 8px; text-decoration: none; text-wrap: balance; } .perekluchatel .predydushchaya:hover, .perekluchatel .sleduyushchaya:hover{ text-decoration: underline; text-underline-offset: 6px; } .perekluchatel .ko-vsem{ text-decoration: underline; text-underline-offset: 4px; } /* --- Призыв к сотрудничеству --------------------------------------------- */ .zov{ display: flex; flex-direction: column; align-items: center; text-align: center; padding: 200px 20px 180px; } .zov .znak{ width: 165px; margin: 0 0 40px; } body.temno .zov .znak{ filter: invert(1); } /* знак чёрный — на тёмной странице выворачиваем */ .zov p{ margin: 0; font-size: 16px; line-height: 1.4; } .zov .zov-svyaz{ margin-top: 26px; display: flex; gap: 28px; flex-wrap: wrap; justify-content: center; } .zov .zov-svyaz a{ min-height: 44px; display: inline-flex; align-items: center; text-decoration: underline; text-underline-offset: 4px; } @media (max-width: 799px){ .perekluchatel{ display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; row-gap: 18px; padding: 50px 12px 0; } .perekluchatel .predydushchaya, .perekluchatel .sleduyushchaya{ font-size: 12px; letter-spacing: 6px; text-indent: 6px; } .perekluchatel .predydushchaya{ grid-column: 1; grid-row: 1; justify-self: start; } .perekluchatel .sleduyushchaya{ grid-column: 2; grid-row: 1; justify-self: end; } .perekluchatel .ko-vsem{ grid-column: 1 / -1; grid-row: 2; justify-self: center; } .zov{ padding: 110px 20px 100px; } .zov .znak{ width: 130px; margin-bottom: 30px; } } /* --- Страница «Обо мне» --------------------------------------------------- */ .o-sebe{ max-width: 320px; margin: 0 auto; padding: 120px 0 0; text-align: center; } .o-sebe p{ font-size: 16px; line-height: 1.4; margin: 0 0 12px; } .o-sebe .perehod{ margin: 14px 0 0; } .o-sebe .perehod a{ text-decoration: underline; text-underline-offset: 4px; } .o-sebe .znak{ width: 226px; margin: 83px auto 80px; } .o-sebe .risunok{ width: 196px; margin: 83px auto 0; } @media (max-width: 799px){ .o-sebe{ max-width: 100%; padding-left: 30px; padding-right: 30px; } .o-sebe .znak{ width: 180px; margin: 60px auto 56px; } .o-sebe .risunok{ margin-top: 60px; } } /* --- Подвал --------------------------------------------------------------- */ /* Подвал: четыре колонки враспор по всей ширине, без линии сверху */ .podval{ margin-top: 120px; padding: 20px 32px 40px; } .podval-setka{ display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; } .podval ul{ margin: 0; padding: 0; list-style: none; } .podval a, .podval .imya{ display: inline-flex; align-items: center; min-height: 28px; font-size: 16px; } .podval .imya{ font-style: normal; } .podval-kolonka:last-child{ text-align: right; } /* --- Появление при прокрутке ---------------------------------------------- Каждый блок проявляется сам по себе, когда его верх входит в экран: прозрачность 0 → 1 за 0.6с, без сдвига. Как было в макете. Класс js ставится маленьким скриптом в — если скрипт не выполнится, всё просто останется видимым, ничего не пропадёт. -------------------------------------------------------------------------- */ .js .galereya > *, .js .rabota .ramka, .js .rabota .nazvanie{ transition: opacity .6s ease-out; } .js .galereya > *:not(.pokazano), .js .rabota .ramka:not(.pokazano), .js .rabota .nazvanie:not(.pokazano){ opacity: 0; } @media (prefers-reduced-motion: reduce){ *{ transition: none !important; animation: none !important; } /* без анимации — сразу показываем */ .js .galereya > *, .js .rabota .ramka, .js .rabota .nazvanie{ opacity: 1 !important; } } /* --- Телефон -------------------------------------------------------------- */ @media (max-width: 799px){ .polotno{ padding: 0 12px; } .shapka{ padding: 4px 6px; } .shapka a{ font-size: 14px; padding: 0 6px; } .zastavka, body.temno .zastavka{ padding: 90px 20px 0; } .zastavka img{ width: 140px; height: 79px; } body.temno .zastavka img{ width: 150px; height: 122px; } .lenta, body.temno .lenta{ padding: 100px 0 80px; } .nazad{ padding: 80px 0 30px; } .podval{ margin-top: 80px; } /* На телефоне: слева имя, справа три группы ссылок друг под другом */ .podval{ padding: 20px 12px 30px; } .podval-setka{ display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; row-gap: 26px; } .podval-kolonka:nth-child(1){ grid-column: 1; grid-row: 1; } .podval-kolonka:nth-child(2){ grid-column: 2; grid-row: 1; } .podval-kolonka:nth-child(3){ grid-column: 2; grid-row: 2; } .podval-kolonka:nth-child(4){ grid-column: 2; grid-row: 3; } .podval-kolonka:last-child{ text-align: left; } .podval a, .podval .imya{ min-height: 44px; } }