/* ===================================================================== 08 · ФУТЕР — «ОБОРОТ ПОСЛЕДНЕГО ОТПЕЧАТКА» ┌─ УСТРОЙСТВО ЛИСТА ─────────────────────────────────────────────────┐ │ Пачка отпечатков после вечера: пять кадров внахлёст, один уходит │ │ под правый обрез. Поверх пачки лежит шестой — ПЕРЕВЁРНУТЫЙ. Его │ │ оборот и есть выходные данные сайта: красная плашка с именем, │ │ графы под связь и площадки, счёт оттисков, шкала краски, подпись. │ │ Уголок отогнут — в нём видно, что предмет всё-таки фотография. │ └─────────────────────────────────────────────────────────────────────┘ ПОЧЕМУ ВЕЩЬ, А НЕ КОЛОНКИ. Две предыдущие попытки (b, v) были набором и линейками на пустой бумаге и читались недоделанными рядом с соседями. В каждом принятом блоке этого сайта в центре стоит предмет, а текст прижат к его кромке. Здесь предмет — перевёрнутый отпечаток, и служебная мелочь футера стоит там, где ей место в жизни: на обороте фотографии. Ничего не «оформлено вокруг данных» — данные напечатаны на вещи. ПОЧЕМУ ЛИСТ ПОЛОН БЕЗ ДАННЫХ ВАЛЕНТИНА. Массу листа держат пять настоящих кадров и большой белый предмет с тенью, кромкой и отогнутым уголком. Девять пустых линеек — меньшая часть поверхности оборота, а не его содержание. Уберите их совсем — композиция не рассыплется. ЦВЕТ. Только палитра проекта: #eeeeee бумага, #000000 чернила, #e03342 / #d8303e / #7a1c24 красное, #ffffff на красном. Белый отпечатка — тот же #ffffff: фотобумага действительно белее листа, и это единственное, чем она от него отличается по цвету. Новых оттенков не заведено ни одного. ЧТО НЕ ИСПОЛЬЗУЕТСЯ: скругления, размытия, 3D, градиенты кроме красного из кита, стрелки, штампы-рамки (такого знака в языке сайта нет — его уже удаляли из блока 06). ДВИЖЕНИЯ В БЛОКЕ НЕТ ВОВСЕ. Ни одной анимации, ни одного opacity: 0, ни одного наблюдателя. Есть только отклик предмета на курсор — бумага, которая лежит, отзывается на руку. Выключите JS — лист не изменится ни на пиксель. ===================================================================== */ /* Высота держится соотношением сторон плюс min-height в vw — страховка для браузеров, где aspect-ratio почему-то не сработал. Формулу calc(--scene-h * --k) сюда ставить нельзя: Safari её не применяет и секция получает нулевую высоту. */ .scene--foot { aspect-ratio: 1440 / 820; min-height: calc(100vw * 820 / 1440); } .stage--foot { --field: 73px; /* левое и правое поле — общие для всех листов */ --svc-fs: 13px; /* служебная строка: колонтитул, колофон */ --svc-lh: 18px; --svc-o: 0.62; --cap-fs: 14px; /* подпись, прижатая к кромке предмета */ --cap-lh: 19px; /* Оборот отпечатка */ --rev-w: 700px; --rev-h: 360px; /* низ был пустой: графы кончаются на 300 */ --fold: 0px; /* отогнутый уголок убран 05.09 по решению Оксаны. Ноль оставлен переменной, а не вычищен из clip-path: вырез в кромке считается от неё в трёх местах, и вернуть уголок можно одним числом. */ --row-fs: 14px; /* набор граф на обороте */ --row-lh: 20px; --grp-fs: 12px; /* название разряда граф */ } /* Фактуры привязаны к листу процентами и inset, а не к прибитым цифрам: высота сцены ещё может меняться, фактура обязана расти с ней. */ .stage--foot .paper { left: 18px; top: 18px; width: calc(100% - 36px); height: calc(100% - 36px); } .stage--foot .grain { left: 18px; top: 18px; width: calc(100% - 36px); height: calc(100% - 36px); } /* --------------------------------------------------------------------- КОЛОНТИТУЛ Пара «номер раздела слева / служебное слово справа» — ровно та же, что открывает блоки 06 и 07. Два соседних листа с одинаковым колонтитулом читаются как разворот одной книги, а не как два документа, положенных рядом. --------------------------------------------------------------------- */ .stage--foot .folio { left: var(--field); top: 60px; font-size: var(--svc-fs); line-height: var(--svc-lh); opacity: var(--svc-o); z-index: 20; } /* Выключка вправо, а не left: auto с расчётом: при правке слова строка иначе поедет от края. */ .stage--foot .folio--right { left: auto; right: var(--field); text-align: right; } /* --------------------------------------------------------------------- КОНЕЦ СКВОЗНОЙ ЛИНИИ Приходит сверху по левому полю (левее 73 на листе не стоит ничего) и обрывается у нижней левой кромки отпечатка. Она НЕ обводит предмет и не украшает его — она просто до него доходит и кончается: маршрут через весь сайт упёрся в последний лист. Лежит ниже пачки (z-index 2): линия нарисована маркером по бумаге, а фотографии положены сверху. --------------------------------------------------------------------- */ .stage--foot .route { left: 0; top: 0; width: 1440px; height: 820px; z-index: 2; overflow: visible; pointer-events: none; } .stage--foot .route__path { fill: none; stroke: var(--red); stroke-width: 2.4; stroke-linecap: round; } /* --------------------------------------------------------------------- ПАЧКА ОТПЕЧАТКОВ .pr коробка в координатах листа, поворот пачки. НЕ двигается: по ней считаются нахлёсты. .pr__lift отклик на курсор. Разведён с поворотом по разным слоям — иначе переход отклика начинает бороться с поворотом и кадр «плывёт» при наведении. ЭТО НЕ ВЕЕР БЛОКА 04. Там восемь кадров разложены по листу с воздухом между ними, и жест — «выкладывают на стол». Здесь снимки СВАЛЕНЫ: нахлёсты крупные (60…120px), кадры закрывают друг друга больше чем наполовину, один уходит под правый обрез. Жест другой — «убрали со стола», и повтора соседа не возникает. --------------------------------------------------------------------- */ .stage--foot .pr { z-index: var(--z, 1); transform: rotate(var(--a, 0deg)); transform-origin: 50% 50%; } .stage--foot .pr__lift { position: absolute; inset: 0; overflow: hidden; background: var(--bg); /* Тень листа, лежащего на листе, — та же, что в архиве. */ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.14); transition: transform 0.42s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.42s ease; } .stage--foot .pr__img { width: 100%; height: 100%; object-fit: cover; /* Фотографии всегда ч/б; цвет наливается только под курсором — это язык всего сайта, а не анимация блока. */ filter: grayscale(1) contrast(1.04); transition: filter 0.55s ease; } /* Отклик: кадр можно поддеть. Поднимается он НЕ выше отпечатка (z-index 10 против 12 у оборота) — иначе рушится главное: перевёрнутый снимок лежит сверху пачки. data-hover — та же роль, но выставляется адресом (?hover=2): в headless-браузере :hover не воспроизвести. */ .stage--foot .pr:hover, .stage--foot .pr[data-hover] { z-index: 10; } .stage--foot .pr:hover .pr__lift, .stage--foot .pr[data-hover] .pr__lift { transform: translateY(-6px) scale(1.025); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.20); } .stage--foot .pr:hover .pr__img, .stage--foot .pr[data-hover] .pr__img { filter: grayscale(0) contrast(1.02) saturate(1.04); } /* --- КООРДИНАТЫ ПАЧКИ (система 1440) --------------------------------- Порядок наложения читается как порядок сваливания: 4 лёг первым и лежит глубже всех, 5 — последним; 1 уходит под правый обрез листа. КАДРЫ ВЗЯТЫ ТЕ ЖЕ, что стоят в блоках выше, и это не экономия, а смысл: на последней странице снимки, которые вы только что листали, собраны обратно в пачку. Первая версия набирала сюда неиспользованные тёмные кадры (закулисье, тёмный зал, клуб) — на снимке правая половина листа превратилась в одно чёрное пятно, и связи с книгой не возникло. Проверено и переделано. */ .stage--foot .pr--4 { left: 710px; top: 384px; width: 250px; height: 286px; --z: 5; --a: 4.8deg; } .stage--foot .pr--3 { left: 690px; top: 110px; width: 330px; height: 220px; --z: 6; --a: -3.4deg; } .stage--foot .pr--2 { left: 940px; top: 300px; width: 300px; height: 200px; --z: 7; --a: 3.2deg; } .stage--foot .pr--1 { left: 1150px; top: 190px; width: 300px; height: 400px; --z: 8; --a: -2.2deg; } .stage--foot .pr--5 { left: 1090px; top: 474px; width: 300px; height: 200px; --z: 9; --a: -5.2deg; } .stage--foot .pr--4 .pr__img { object-position: 50% 30%; } /* backstage-lights */ .stage--foot .pr--3 .pr__img { object-position: 50% 35%; } /* double-exposure: фигура целиком, голова в верхней трети */ .stage--foot .pr--2 .pr__img { object-position: 50% 35%; } /* playground-red: на 42 в кадр попадал пустой занавес */ .stage--foot .pr--1 .pr__img { object-position: 50% 30%; } .stage--foot .pr--5 .pr__img { object-position: 50% 4%; } /* club-dark */ /* --------------------------------------------------------------------- ПОДПИСИ, ПРИЖАТЫЕ К КРОМКЕ Правило проекта: подпись прижата к кромке своего предмета и потому не нуждается ни в выноске, ни в черте. Обе называют предмет, значит набраны без слэша и в полную силу чернил. --------------------------------------------------------------------- */ .stage--foot .cap { font-size: var(--cap-fs); line-height: var(--cap-lh); z-index: 14; } .stage--foot .cap--pile { left: 740px; top: 682px; } .stage--foot .cap--rev { left: var(--field); top: 616px; } /* ===================================================================== ОБОРОТ ОТПЕЧАТКА — ГЛАВНЫЙ ПРЕДМЕТ ЛИСТА Три слоя, и все три нужны: .rev обёртка: поворот и ТЕНЬ. Тень дана drop-shadow, а не box-shadow, потому что у бумаги обрезанная кромка (clip-path), а clip-path режет box-shadow вместе с ней. Тем же способом сделаны вкладыши в блоке 06. .rev__paper сама бумага: белее листа сайта, кромка резаная. .rev__fold отогнутый уголок — ЛЕЖИТ СНАРУЖИ обрезки, иначе clip-path срезал бы и его. ===================================================================== */ .stage--foot .rev { left: var(--field); top: 132px; width: var(--rev-w); height: var(--rev-h); z-index: 12; transform: rotate(-1.4deg); transform-origin: 50% 50%; /* Две тени: короткая — контакт бумаги с бумагой, длинная — то, что отпечаток лежит НА ПАЧКЕ, а не на столе. Одна тень этого не показывает: либо предмет липнет к листу, либо висит в воздухе. */ filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.18)) drop-shadow(0 16px 26px rgba(0, 0, 0, 0.17)); transition: transform 0.3s ease, filter 0.3s ease; } .stage--foot .rev__paper { position: absolute; inset: 0; /* Фотобумага белее листа сайта. Это единственное цветовое отличие предмета от подложки, и оно настоящее: #ffffff есть в палитре (--on-red), новых оттенков не заведено. */ background: var(--on-red); /* Резаная кромка: слева бумагу вели ножом от руки, слева снизу вырезан треугольник под отогнутый уголок. Две точки выреза обязаны считаться от --fold, иначе сгиб «поедет». Уголок отогнут именно СЛЕВА ВНИЗУ, а не справа, и это правка по снимку: справа за отпечатком лежит пачка, и кадр в сгибе читался как случайный кусок соседней фотографии. Слева внизу за ним чистая бумага — сгиб виден сразу. Туда же приходит и красная линия. */ clip-path: polygon( 3px 0, 100% 0, 100% 100%, var(--fold) 100%, 0 calc(100% - var(--fold)), 0 79%, 4px 61%, 0 44%, 3px 26%, 0 11% ); } /* Всё, что напечатано на обороте, стоит в его собственных координатах. */ .stage--foot .rev__paper > * { position: absolute; margin: 0; } /* --- ОТОГНУТЫЙ УГОЛОК ------------------------------------------------- Единственное место, где видно, что белый прямоугольник — фотография. Кадр в уголке развёрнут на 180°: мы смотрим на изнанку, отогнутую к себе. Собственная drop-shadow даёт складку по диагонали. --------- */ .stage--foot .rev__fold { position: absolute; left: 0; bottom: 0; width: var(--fold); height: var(--fold); overflow: hidden; clip-path: polygon(0 0, 100% 100%, 0 100%); filter: drop-shadow(2px -2px 3px rgba(0, 0, 0, 0.28)); } .stage--foot .rev__foldimg { width: 100%; height: 100%; object-fit: cover; /* Кадрируем по лицу: в треугольник 88×88 попадает крошечный кусок снимка, и если взять его из середины кадра, в сгибе окажется безликое пятно и весь приём пропадёт. */ object-position: 50% 16%; transform: rotate(180deg); filter: grayscale(1) contrast(1.04); transition: filter 0.55s ease; } /* Отпечаток тоже отзывается на руку: приподнимается на пиксель, тень уходит глубже, а кадр в уголке наливается цветом — единственная подсказка, что под белым прямоугольником фотография. Поворот при этом НЕ меняется: доворот — жест блока 04, повторять его нельзя. */ .stage--foot .rev:hover, .stage--foot .rev[data-hover] { transform: rotate(-1.4deg) translateY(-3px); filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.20)) drop-shadow(0 22px 34px rgba(0, 0, 0, 0.20)); } .stage--foot .rev:hover .rev__foldimg, .stage--foot .rev[data-hover] .rev__foldimg { filter: grayscale(0) contrast(1.02) saturate(1.04); } /* --------------------------------------------------------------------- ШТЕМПЕЛЬ МАСТЕРСКОЙ Не рамка-печать: такого знака в языке сайта нет, его уже удаляли из блока 06 именно за это. Роль штемпеля играет КРАСНАЯ ПЛАШКА кита — та же заливка, что у кнопки, углового блока и нижних полос, и тот же белый текст на ней. На плашке — только подтверждённые факты: имя, род занятий, город, год начала работы. Все четыре уже стоят на первом экране. --------------------------------------------------------------------- */ .stage--foot .imprint { left: 40px; top: 34px; width: 470px; height: 82px; padding: 15px 22px 0; background: var(--red); } .stage--foot .imprint p { margin: 0; } .stage--foot .imprint__name { font-size: 24px; line-height: 30px; color: var(--on-red); } .stage--foot .imprint__sub { margin-top: 4px; font-size: 13px; line-height: 17px; color: var(--on-red); } /* Приводочный крест и номер листа. Тот же знак, с которого начинается сайт, но здесь он стоит там, где стоит в жизни: в поле оттиска, а не в углу экрана. В заставке красная форма стоит со сдвигом — это неточность, которую станок потом сводит; внизу книги нужно обратное, поэтому крест здесь один и чернильный. */ .stage--foot .regmark { left: 546px; top: 40px; width: 30px; height: 30px; color: var(--ink); opacity: 0.5; } .stage--foot .regmark svg { width: 100%; height: 100%; display: block; } .stage--foot .regmark svg circle, .stage--foot .regmark svg path { stroke: currentColor; stroke-width: 1; } .stage--foot .rev__sheet { left: 588px; top: 46px; font-size: 11px; line-height: 14px; opacity: 0.5; } /* Печатная линейка бланка: отделяет штемпель от граф. Чернильная и слабая — это разграфка, а не акцент. */ .stage--foot .rev__rule { left: 40px; top: 146px; width: 620px; height: 1px; background: rgba(0, 0, 0, 0.22); } /* --------------------------------------------------------------------- ГРАФЫ ОБОРОТА Название разряда набрано вполсилы: у него нет своего предмета, оно называет не факт, а куда факт встанет. Сами графы — в полную силу чернил: они НАПЕЧАТАНЫ, а не пусты. Пусты только линейки. --------------------------------------------------------------------- */ .stage--foot .grp { font-size: var(--grp-fs); line-height: 16px; letter-spacing: 0.18em; opacity: 0.5; } /* Выключка по НИЖНЕЙ кромке строки, а не по базовой линии: у пустой линейки базовой линии нет вовсе (внутри неё ни одного знака), и при align-items: baseline браузер выравнивает её по нижнему краю коробки — линейки в колонке начинают гулять на 3-4px. min-height держит строку ровной там, где в ней нет ни одного слова (графы площадок). */ .stage--foot .row { display: flex; align-items: flex-end; gap: 10px; min-height: var(--row-lh); font-size: var(--row-fs); line-height: var(--row-lh); } /* Ключ графы фиксированной ширины: линейки обязаны стоять в колонку, иначе оборот перестаёт быть бланком и становится набором строк. */ .stage--foot .row__k { flex: 0 0 84px; } /* --- ЛЕВАЯ КОЛОНКА: связь и внешняя карточка --- Шаг граф 32px, а не 30: на обороте всего девять строк, и с шагом 30 они собирались в плотный комок в верхней трети, а нижняя треть отпечатка оставалась белой. Проверено снимком. */ .stage--foot .grp { left: 40px; top: 178px; } .stage--foot .row--c1 { left: 40px; top: 208px; width: 300px; } .stage--foot .row--c2 { left: 40px; top: 240px; width: 300px; } .stage--foot .row--c3 { left: 40px; top: 272px; width: 300px; } .stage--foot .grp--card { left: 40px; top: 316px; } .stage--foot .row--d1 { left: 40px; top: 346px; width: 300px; } .stage--foot .row--d2 { left: 40px; top: 378px; width: 300px; } /* --- ПРАВАЯ КОЛОНКА: площадки --- Строки сдвинуты на 12px вправо от колонки: точка кита (.tag::before) вылезает ровно на эти 12px влево и встаёт на 398 — на общий край колонки с заголовком. */ .stage--foot .grp--pl { left: 398px; top: 178px; } .stage--foot .row--p1 { left: 410px; top: 208px; width: 240px; } .stage--foot .row--p2 { left: 410px; top: 240px; width: 240px; } .stage--foot .row--p3 { left: 410px; top: 272px; width: 240px; } .stage--foot .row--p4 { left: 410px; top: 304px; width: 240px; } /* Точка кита рассчитана на строку 26px; здесь строка 20px, значит и подъём точки другой — иначе она висит ниже базовой линии. */ .stage--foot .row.tag { --dot-rise: 6px; } /* --------------------------------------------------------------------- ПУСТАЯ ЛИНЕЙКА ПОД ФАКТ, КОТОРОГО У НАС НЕТ Правило проекта: непроверенное стоит пустым местом на красной линейке и помечено data-verify. На бланке оборота это выглядит естественнее, чем где бы то ни было: не дырка в вёрстке, а незаполненная графа, которую заполнят чернилами позже. Линейка ТЯНЕТСЯ до правого края колонки (flex: 1), поэтому слово Валентина встанет на её место, ничего не сдвинув: графа уже размечена под нужную ширину. --------------------------------------------------------------------- */ .stage--foot .slot { flex: 1 1 auto; height: 12px; margin-bottom: 4px; /* линейка встаёт туда, где идёт базовая линия строки */ border-bottom: 1.6px solid var(--red); position: relative; } /* ЗАПОЛНЕННАЯ ГРАФА. Встаёт на место линейки, поэтому и растягивается так же. Под рукой подчёркивается красным — тот же язык, что у ссылок в блоке заявки. */ .stage--foot .row__v { flex: 1 1 auto; text-decoration: none; color: var(--ink); } .stage--foot .row__v:hover, .stage--foot .row__v:focus-visible { text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 1.6px; text-underline-offset: 5px; } /* Число отзывов — короткая линейка: цифра, а не строка. */ .stage--foot .slot--n { flex: 0 0 44px; } html[data-dev] .stage--foot .slot::after { content: attr(data-verify); position: absolute; left: 0; bottom: -14px; font-family: var(--font-ui); font-size: 9px; letter-spacing: 0; text-transform: none; color: var(--red); white-space: nowrap; } /* --------------------------------------------------------------------- СЧЁТ ОТТИСКОВ И ШКАЛА ПЛОТНОСТИ КРАСКИ На заставке шкала заполняется по мере честной загрузки, а счётчик показывает, сколько уже отпечатано. Здесь печать закончена: шкала залита целиком, счёт сошёлся — восьмой лист из восьми. Габарит квадрата (14px) и рамка взяты из boot.css один в один: знак обязан УЗНАВАТЬСЯ, иначе замыкание круга не читается. --------------------------------------------------------------------- */ /* ШКАЛА, СЧЁТ И ПОДПИСЬ ПОДНЯТЫ 06.09 по разметке Оксаны: шкала со счётом уходят под приводочный крест «форма K + M», подпись встаёт над ними. Внизу оттиска они лежали кучей у самой кромки. */ .stage--foot .scale { left: 551px; top: 89px; display: flex; gap: 4px; } .stage--foot .patch { width: 14px; height: 14px; border: 1px solid rgba(0, 0, 0, 0.28); opacity: var(--a); } .stage--foot .patch--k { background: var(--ink); border-color: var(--ink); } .stage--foot .patch--m { background: var(--red); border-color: var(--red); } .stage--foot .count { left: 551px; top: 115px; font-size: 12px; line-height: 16px; opacity: 0.55; } /* --------------------------------------------------------------------- ПОДПИСЬ НА ОБОРОТЕ Одно слово Denistina — тот же красный почерк, которым подписано имя на первом экране. Обороты отпечатков подписывают именно так, от руки. Это не украшение: подпись делает белый прямоугольник вещью, у которой есть хозяин. --------------------------------------------------------------------- */ .stage--foot .sign { left: 400px; /* на кегле 84 подпись шире: от 500 уезжала за кромку */ top: 270px; font-size: 84px; /* вдвое крупнее: подпись на обороте — главное пятно */ line-height: 1.2; color: var(--red-hand); transform: rotate(-5deg); transform-origin: 0 50%; } /* --------------------------------------------------------------------- РУКОПИСЬ НА ЛИСТЕ Комментирует и ничего не подписывает — та же роль, что у «и это не всё» в архиве. Последние слова книги, и факта в них нет ни одного. --------------------------------------------------------------------- */ .stage--foot .note { left: 100px; top: 620px; /* 58 → 44: строка стала вдвое длиннее прежнего «дальше — ваш вечер» и на прежнем кегле уезжала под пачку отпечатков. */ font-size: 44px; line-height: 1.4; color: var(--red-hand); white-space: nowrap; z-index: 14; transform: rotate(-3.4deg); transform-origin: 0 50%; } /* --------------------------------------------------------------------- НИЖНЯЯ КРОМКА ЛИСТА Колофон стоит не на предмете, а на самой бумаге: это выходные данные страницы, а не отпечатка. Обе строки — служебный кегль вполсилы, тот же, что у колонтитула: лист открывается и закрывается одинаково. --------------------------------------------------------------------- */ .stage--foot .colophon { left: var(--field); top: 730px; font-size: var(--svc-fs); line-height: var(--svc-lh); opacity: var(--svc-o); z-index: 20; } .stage--foot .colophon--right { left: auto; right: var(--field); text-align: right; opacity: 0.78; /* ссылка чуть плотнее соседней строки: по ней кликают */ } .stage--foot a.colophon:hover { color: var(--red); opacity: 1; } /* Нижние полосы — тот же приём, что закрывает блоки 02, 03 и 04. Здесь он закрывает не блок, а весь сайт. */ .stage--foot .bar--foot { left: 0; top: 764px; width: 560px; height: var(--stripe-h); } .stage--foot .bar--foot2 { left: 592px; top: 764px; width: 122px; height: var(--stripe-h); } /* ===================================================================== СПОКОЙНЫЙ РЕЖИМ Двигать здесь нечего: в блоке нет ни одной анимации. Остаётся отклик на курсор — у него убирается движение, но НЕ цвет: «кадр наливается цветом под рукой» это язык сайта, а не анимация, и человек с включённой настройкой должен видеть спокойный сайт, а не урезанный. ===================================================================== */ @media (prefers-reduced-motion: reduce) { .stage--foot .pr__lift, .stage--foot .rev { transition: none; } .stage--foot .pr:hover .pr__lift, .stage--foot .pr[data-hover] .pr__lift { transform: none; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.14); } .stage--foot .rev:hover, .stage--foot .rev[data-hover] { transform: rotate(-1.4deg); filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.18)) drop-shadow(0 16px 26px rgba(0, 0, 0, 0.17)); } }