/* =================================================================== DOZER T-2000 Візуальна мова зчитана з хед-креативу: графітова студія, джерело світла за товаром, бірюзовий акцент, скляні панелі з тонкою рамкою, цифри в круглих ореолах. Глибина набирається чотирма шарами, не тінями навмання: 1. СЦЕНА — кожна секція має власне світло згори, а не рівний фон; 2. ЗЕРНО — плівкове зерно поверх усього. Воно вбиває бандинг градієнтів на телефонах і дає матеріальність; 3. ПОДІУМ — товарні вирізки стоять у плямі світла з тінню й відбиттям під колесами, а не висять у пустоті; 4. ПРИВИД — велике контурне слово за заголовком секції, як «DOZER» на креативі. Тримає ритм і додає третій план. =================================================================== */ :root{ --bg:#06090d; --bg-2:#0c1117; --panel:rgba(255,255,255,.05); --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.20); --ink:#eaf2f8; --muted:#8b9bab; --cyan:#3fd8ea; --cyan-2:#7ae7f4; --display:'Oswald',system-ui,sans-serif; --body:'Inter',system-ui,-apple-system,sans-serif; --wrap:560px; --shadow:0 20px 44px rgba(0,0,0,.5); } *{box-sizing:border-box} [hidden]{display:none !important} /* інакше display з класу перебиває атрибут */ html{-webkit-text-size-adjust:100%} body{ margin:0;background:var(--bg);color:var(--ink); font:400 15.5px/1.6 var(--body); overflow-x:hidden; padding-bottom:84px; /* під липку панель */ } img{max-width:100%;display:block} h1,h2,h3{font-family:var(--display);font-weight:600;text-transform:uppercase; letter-spacing:.01em;line-height:1.08;margin:0} p{margin:0} /* ШАР 2 — зерно. Поверх усього, кліки крізь нього проходять. */ body::after{ content:'';position:fixed;inset:0;z-index:50;pointer-events:none;opacity:.05; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); } .wrap{max-width:var(--wrap);margin:0 auto;padding:0 18px;position:relative;z-index:1} /* ШАР 1 — сцена. Світло згори секції, як прожектор у студії. */ section{padding:52px 0;position:relative;overflow:hidden} section::before{ content:'';position:absolute;left:50%;top:-70px;transform:translateX(-50%); width:150%;height:360px;pointer-events:none; background:radial-gradient(50% 50% at 50% 50%,rgba(125,160,185,.13),rgba(125,160,185,0) 70%); } /* Світлий промінь навскоси — такий самий є на креативі за скутером */ .ray::after{ content:'';position:absolute;right:-14%;top:-6%;width:62%;height:118%; pointer-events:none;transform:rotate(14deg); background:linear-gradient(90deg,rgba(255,255,255,0),rgba(190,215,235,.055) 45%,rgba(255,255,255,0)); } /* ШАР 4 — привид заголовка */ .head{position:relative;margin-bottom:22px} /* Привид стоїть НАД заголовком і зрізається краєм секції. Якщо посадити його позаду тексту, він читається як брак друку, а не як третій план. */ .head .ghost{ position:absolute;right:-26px;top:-46px;z-index:0; font:700 62px/1 var(--display);letter-spacing:.03em;white-space:nowrap; color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.07); pointer-events:none;user-select:none; } .head h2{text-wrap:balance} .head > *:not(.ghost){position:relative;z-index:1} .tag{display:inline-flex;align-items:center;gap:10px;font:600 11px/1 var(--body); letter-spacing:.17em;text-transform:uppercase;color:var(--cyan);margin-bottom:12px} /* Замість нейтральної риски — та сама «штриховка», що наклеєна на крилі й бокових панелях самого скутера. Дрібниця, але саме з таких збігів сторінка читається як продовження товару, а не як окремий шаблон. */ .tag::before{content:'';width:27px;height:12px;flex:0 0 auto; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='27' height='12'%3E%3Cg stroke='%233fd8ea' stroke-width='2' stroke-linecap='round' fill='none'%3E%3Cpath d='M1 10L5 2' opacity='.3'/%3E%3Cpath d='M7.5 10L11.5 2' opacity='.5'/%3E%3Cpath d='M14 10L18 2' opacity='.75'/%3E%3Cpath d='M20.5 10L24.5 2'/%3E%3C/g%3E%3C/svg%3E") no-repeat center} /* Кутові дужки — теж із декорів скутера. Вішаємо тільки на два блоки, від яких залежить заявка: ціну і форму. Якщо начепити на всі — стане шумом. */ .bracket{position:relative} .bracket::before,.bracket::after{content:'';position:absolute;width:19px;height:19px; pointer-events:none;border:1.5px solid rgba(63,216,234,.55)} .bracket::before{left:-1px;top:-1px;border-right:0;border-bottom:0;border-radius:18px 0 0 0} .bracket::after{right:-1px;bottom:-1px;border-left:0;border-top:0;border-radius:0 0 18px 0} /* ===== Атмосферні плити ===== Фото лежить у background секції, а градієнт над ним гасить його до рівня, на якому текст лишається читабельним. Ступінь затемнення різний для кожної плити: студія світла, асфальт темний — однаковим шаром одну з них або засвітило б, або вбило б у нуль. */ .bg-studio,.bg-floor,.bg-asphalt,.bg-bokeh,.bg-wall,.bg-rear{ background-size:cover;background-position:center;background-repeat:no-repeat} .bg-studio {background-image:linear-gradient(180deg,rgba(6,9,13,.93),rgba(6,9,13,.70) 45%,rgba(6,9,13,.96)),url(../images/bg-studio.webp)} .bg-floor {background-image:linear-gradient(180deg,rgba(6,9,13,.94),rgba(6,9,13,.76) 45%,rgba(6,9,13,.96)),url(../images/bg-floor.webp)} .bg-asphalt{background-image:linear-gradient(180deg,rgba(6,9,13,.90),rgba(6,9,13,.66) 45%,rgba(6,9,13,.95)),url(../images/bg-asphalt.webp)} .bg-bokeh {background-image:linear-gradient(180deg,rgba(6,9,13,.92),rgba(6,9,13,.74) 45%,rgba(6,9,13,.96)),url(../images/bg-bokeh.webp)} .bg-wall {background-image:linear-gradient(180deg,rgba(6,9,13,.92),rgba(6,9,13,.72) 45%,rgba(6,9,13,.96)),url(../images/bg-wall.webp)} /* кадр задньої частини з ліхтарем — щоб блок без креативів не був порожнім прямокутником */ .bg-rear {background-image: linear-gradient(180deg,rgba(6,9,13,.93),rgba(6,9,13,.72) 42%,rgba(6,9,13,.96)), radial-gradient(340px 190px at 64% 46%,rgba(255,46,46,.55),rgba(255,46,46,0) 70%), url(../images/bg-rear.webp)} /* ===== Світлові елементи ===== Намальовані на чорному тлі. mix-blend-mode:screen робить чорне прозорим — альфа-канал не потрібен, і файли виходять по 6–16 КБ. */ .fx{position:absolute;pointer-events:none;z-index:0;mix-blend-mode:screen; background-repeat:no-repeat;background-size:contain} .fx-shaft{top:-18%;right:-30%;width:135%;height:95%;opacity:.5; background-image:url(../images/fx-shaft.webp)} .fx-trail{top:34%;left:-28%;width:150%;height:62%;opacity:.42; background-image:url(../images/fx-trail.webp)} .fx-flare{top:6%;left:-42%;width:130%;height:46%;opacity:.5; background-image:url(../images/fx-flare.webp)} /* Креслярська сітка — ледь помітна, як підкладка технічного аркуша */ .grid-bg::after{ content:'';position:absolute;inset:0;pointer-events:none;opacity:.5; background-image: repeating-linear-gradient(90deg,rgba(255,255,255,.028) 0 1px,transparent 1px 42px), repeating-linear-gradient(0deg,rgba(255,255,255,.028) 0 1px,transparent 1px 42px); -webkit-mask-image:radial-gradient(70% 60% at 50% 40%,#000,transparent 75%); mask-image:radial-gradient(70% 60% at 50% 40%,#000,transparent 75%); } h2{font-size:31px} .lead{color:var(--muted);font-size:14.5px;margin-top:11px} /* Скляна панель — базовий блок. Внутрішній відблиск згори + глибока тінь: без відблиску картка виглядає наклейкою, а не склом. */ .glass{ border:1px solid var(--line);border-radius:18px; background:linear-gradient(162deg,rgba(255,255,255,.072),rgba(255,255,255,.012) 58%); box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.08); } /* ШАР 3 — подіум під товарною вирізкою */ .stage{position:relative;display:flex;justify-content:center;align-items:flex-end} .stage::before{ /* пляма світла за товаром */ content:'';position:absolute;inset:4% 6% 12%;border-radius:50%; background:radial-gradient(50% 50% at 50% 45%,rgba(150,190,215,.20),rgba(150,190,215,0) 70%); } .stage::after{ /* тінь на підлозі */ content:'';position:absolute;left:50%;bottom:4%;transform:translateX(-50%); width:62%;height:24px;border-radius:50%; background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.72),rgba(0,0,0,0) 72%); } .stage img{position:relative;z-index:1} /* Знято надворі — трохи приглушуємо, щоб кадри сідали в темну палітру */ .shot{filter:brightness(.95) contrast(1.07) saturate(.96)} /* ===== ГЕРОЙ ===== Креатив іде цілою картинкою — рішення замовника 14.10. Заголовок дублюється прихованим

: озвучка, пошук і пересилання посилання не читають тексту всередині jpg. */ /* ===== Колонка сторінки ===== Сайт мобільний: уся сторінка живе в колонці шириною --wrap і по центру вікна. Без цього секції розтягувались на всю ширину монітора, фонові плити 1200 px розповзались до 1900+ і милились, а текст лишався вузькою смужкою посередині. */ .page{max-width:var(--wrap);margin:0 auto;position:relative;overflow:hidden} @media (min-width:680px){ body{background:#03060a} .page{box-shadow:0 0 70px rgba(0,0,0,.65)} } /* Межа креативу й першого блоку — пряма лінія. Косий зріз пробували, замовник його зняв: діагональ на вузькій колонці змагалась за увагу з самим креативом і тягнула око вбік. Пряма лінія у 2 px зі світінням робить ту саму роботу — каже «фото закінчилось, далі сторінка» — і нічого не обіцяє від себе. */ .hero{position:relative;background:#0a0e13} .hero img{width:100%;height:auto} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .hero::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px; pointer-events:none;background:var(--cyan);opacity:.9; box-shadow:0 0 16px rgba(63,216,234,.55)} .first{padding-top:40px} /* ===== Кнопка ===== */ .btn{ display:block;width:100%;text-align:center;text-decoration:none;cursor:pointer; border:0;border-radius:13px;padding:17px 18px; font:600 15px/1 var(--display);letter-spacing:.09em;text-transform:uppercase; color:#04232a;background:linear-gradient(180deg,var(--cyan-2),var(--cyan)); box-shadow:0 12px 30px rgba(63,216,234,.26), inset 0 1px 0 rgba(255,255,255,.5); } .btn:active{transform:translateY(1px)} /* Світловий блик: раз на кілька секунд пробігає зліва направо. Рухаємо transform, а не left — інакше кожен кадр тягне перерахунок розкладки. Кнопки поза екраном не анімуються: клас .idle вішає IntersectionObserver унизу скрипта. */ .btn{position:relative;overflow:hidden} .btn::after{content:"";position:absolute;top:-30%;bottom:-30%;left:0;width:22%;pointer-events:none; background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent); transform:translateX(-220%) skewX(-18deg);animation:btnSweep 4.5s ease-in-out infinite} @keyframes btnSweep{ 0%,62%{transform:translateX(-220%) skewX(-18deg)} 100% {transform:translateX(560%) skewX(-18deg)}} .btn--ghost::after{display:none} .btn.idle::after{animation:none} @media (prefers-reduced-motion:reduce){.btn::after{animation:none;opacity:0}} .btn--ghost{background:none;color:var(--ink);border:1px solid var(--line-2);box-shadow:none} /* ===== Пропозиція ===== Було шість окремих коробок одна під одною: банер доставки, три плитки, панель ціни, рядок вигоди, смуга дедлайну, кнопка. Замовник сказав прямо — «багато табличок налеплено в одному місці». Стало: ОДНА картка, всередині якої вся угода — ціна, доставка, дедлайн і кнопка, розділені тонкими лініями, як секції квитка. Доставка лишається найпомітнішою після ціни, але вона тепер частина картки, а не ще одна коробка поруч. Три решти аргументів винесені під картку рядком узагалі без рамок: вони нічого не продають, вони знімають питання. */ .offer{overflow:hidden} .offer-price{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:end; padding:19px 20px 17px} .offer-price .lbl{font:600 10.5px/1 var(--body);letter-spacing:.14em; text-transform:uppercase;color:var(--cyan)} .offer-price .now{font:700 38px/1 var(--display);margin-top:8px; text-shadow:0 0 34px rgba(63,216,234,.3)} .offer-price .r{text-align:right} .offer-price .old{font:500 17px/1 var(--display);color:var(--muted);text-decoration:line-through} .offer-price .chip{display:inline-block;margin-top:9px;padding:5px 10px;border-radius:9px; font:700 12.5px/1 var(--body);color:#04232a;background:var(--cyan); box-shadow:0 5px 16px rgba(63,216,234,.3)} /* Смуга доставки на всю ширину картки. Саме на всю: якби вона мала власні відступи й заокруглення, повернулась би та сама «табличка в табличці». */ .offer-key{display:grid;grid-template-columns:42px 1fr;gap:13px;align-items:center; padding:14px 20px; border-top:1px solid rgba(63,216,234,.22);border-bottom:1px solid rgba(63,216,234,.22); background:linear-gradient(100deg,rgba(63,216,234,.18),rgba(63,216,234,.05))} .offer-key i{width:42px;height:42px;border-radius:12px;display:grid;place-items:center; color:var(--cyan); background:radial-gradient(70% 70% at 50% 28%,rgba(63,216,234,.45),rgba(63,216,234,.14)); box-shadow:inset 0 1px 0 rgba(255,255,255,.24)} .offer-key svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.7; stroke-linecap:round;stroke-linejoin:round} .offer-key p{font-size:12.5px;line-height:1.4;color:#a6bfcc} .offer-key b{display:block;font:600 15.5px/1.2 var(--body);color:#fff;margin-bottom:3px} /* Дедлайн — без власної коробки, просто рядок із годинником. */ .offer-time{display:flex;align-items:center;gap:10px;padding:14px 20px 0} .offer-time svg{width:17px;height:17px;flex:0 0 auto;fill:none;stroke:#ffb84e; stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .offer-time p{font-size:12.5px;line-height:1.4;color:#c6b49c} .offer-time b{color:#ffd59a;font-weight:600} .offer .btn{margin:14px 20px 20px;width:auto} /* Три тихі аргументи — без рамок і фонів, тільки тонкі розділювачі. */ .trio{display:grid;grid-template-columns:repeat(3,1fr);margin-top:20px} .trio div{display:grid;justify-items:center;text-align:center;gap:9px;padding:0 6px; border-left:1px solid var(--line)} .trio div:first-child{border-left:0} .trio i{color:var(--cyan);opacity:.85} .trio svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6; stroke-linecap:round;stroke-linejoin:round} .trio b{font:600 12px/1.35 var(--body);color:var(--muted)} /* Денний відсік у формі. Зелена крапка — єдине «живе» на сторінці, і вона каже правду: о 15:01 текст змінюється сам. */ .cutoff{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--muted); padding:2px 2px 0} .cutoff i{width:7px;height:7px;border-radius:50%;background:#4ce08d;flex:0 0 auto; box-shadow:0 0 0 4px rgba(76,224,141,.15)} .cutoff b{color:var(--ink);font-weight:600} /* Нагадування про акцію у формі — тим самим бурштиновим тоном, що й у картці ціни */ .f-promo{display:flex;align-items:center;gap:8px;margin:10px 2px 0;padding:0; font-size:12.5px;line-height:1.4;color:#c6b49c} .f-promo::before{content:"";width:7px;height:7px;border-radius:50%;background:#ffb84e; flex:0 0 auto;box-shadow:0 0 0 4px rgba(255,184,78,.15)} .f-promo b{color:#ffd59a;font-weight:600} /* ===== Кольори ===== */ /* Поки немає фото кожного кольору — показуємо кулю-зразок із відблиском і тінню, щоб вона читалась як пофарбована деталь, а не як кружок із заливкою. Щойно зʼявиться кадр, у COLORS дописується img і плитка сама показує фото замість кулі. */ .colors{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:4px} .colors button{position:relative;display:grid;justify-items:center;gap:10px; padding:15px 8px 13px;cursor:pointer;border-radius:17px;overflow:hidden; border:1px solid var(--line);color:var(--muted);font:500 12.5px var(--body); background:linear-gradient(162deg,rgba(255,255,255,.072),rgba(255,255,255,.012) 58%); box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.08)} .colors .sw{width:46px;height:46px;border-radius:50%; box-shadow:inset 0 3px 6px rgba(255,255,255,.3), inset 0 -5px 10px rgba(0,0,0,.55), 0 7px 15px rgba(0,0,0,.45)} /* Кадр іде на всю ширину плитки: у кольорів 100–180 px на плитку, і кожні 8 px полів з'їдають помітну частину апарата. Знімки зняті на темному тлі зі своєю тінню, тому вони й так зшиваються з плиткою без рамки. Плитка портретна, хоча кадри квадратні. Поміряв межі апарата на всіх трьох: по горизонталі він займає лише 0.14–0.77 кадру, по вертикалі майже весь. Квадратна плитка показувала б 37% порожнього тла з боків. Вікно 3:4 зрізає саме ці боки і нічого не чіпає зверху й знизу, а апарат стає на третину більшим. object-position:33% — щоб вікно стало по центру самого апарата, а не кадру; поля з обох боків тоді однакові. */ .colors button:has(.shot){padding:0 0 11px;gap:7px} .colors .shot{display:block;width:100%;height:auto;aspect-ratio:3/4; object-fit:cover;object-position:33% 50%} .colors button[aria-pressed="true"]{border-color:rgba(63,216,234,.6);color:var(--ink); box-shadow:0 0 24px rgba(63,216,234,.17), inset 0 1px 0 rgba(255,255,255,.12)} .colors button[aria-pressed="true"]::after{content:'';position:absolute;right:9px;top:9px; width:17px;height:17px;border-radius:50%;background:var(--cyan) no-repeat center/9px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Cpath d='M1 4.6l2.6 2.6L8 1.8' stroke='%2304232a' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")} /* ===== Список переваг ===== */ .list{display:grid;gap:11px;padding:0;list-style:none;margin:0} .list li{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start;padding:17px} .list .ic{width:44px;height:44px;border-radius:13px;display:grid;place-items:center; background:radial-gradient(70% 70% at 50% 30%,rgba(63,216,234,.22),rgba(63,216,234,.07)); color:var(--cyan);box-shadow:inset 0 1px 0 rgba(255,255,255,.14)} .list svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.6; stroke-linecap:round;stroke-linejoin:round} /* Список із фото-маркерами: кожен пункт позначено кадром реальної деталі скутера, а не намальованою іконкою. Решта списків на сторінці лишаються з іконками. */ .list--pics li{display:block;padding:0;overflow:hidden} .list--pics .pic{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;display:block; border-bottom:1px solid var(--line)} .list--pics li > div{padding:15px 17px 17px} .list h3{font-size:16.5px;margin-bottom:5px} .list p{font-size:13.5px;color:var(--muted)} .list b{color:var(--ink)} /* ===== Три показники в ореолах ===== */ .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:22px} .stat{text-align:center;padding:22px 4px 14px;position:relative} .stat::before{content:'';position:absolute;left:50%;top:6px;transform:translateX(-50%); width:82px;height:82px;border-radius:50%; background:radial-gradient(circle,rgba(63,216,234,.20),rgba(63,216,234,0) 66%)} .stat b{position:relative;display:block;font:700 23px/1.1 var(--display);color:#fff; text-shadow:0 0 26px rgba(63,216,234,.35)} .stat span{position:relative;display:block;font-size:11.5px;color:var(--muted);margin-top:5px} /* ===== Галерея деталей ===== */ /* ===== Картки «Що всередині» ===== Усі однакові: квадратний кадр згори, підпис знизу. Жодних винятків на кшталт «перша картка на всю ширину» — саме через них блок і виглядав як набір випадкових плиток різного розміру. Кадри приходять зі своєю сценою: темне тло, бокове світло, власна тінь. Тому тут немає ні подіума, ні вирізки по білому — подіум намалював би другу тінь поверх першої. Квадрат, а не фіксована висота: так фото однакове на будь-якій ширині і на телефоні лягає в ширину картки без полів. */ /* Дві колонки на всіх ширинах: стовпчик із чотирьох карток розтягував сторінку майже на два екрани, а кадри в ньому все одно не ставали інформативнішими. */ .details{display:grid;grid-template-columns:1fr 1fr;gap:12px} /* figure має власні 40 px полів з боків за замовчуванням — через них картки стояли вужчими за решту сторінки і не збігались по краях із блоками вище. */ .detail{margin:0;border-radius:19px;overflow:hidden;position:relative;border:1px solid var(--line); background:linear-gradient(162deg,rgba(255,255,255,.055),rgba(255,255,255,.012) 58%); box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.07)} .detail .ph{aspect-ratio:1/1;background:#0d1116;border-bottom:1px solid var(--line)} .detail img{width:100%;height:100%;object-fit:cover} .detail figcaption{padding:12px 13px 14px;font-size:12.5px;line-height:1.45;color:var(--muted)} .detail figcaption b{display:block;margin-bottom:5px;color:var(--ink); font:600 14px/1.15 var(--display);text-transform:uppercase;letter-spacing:.01em} @media (min-width:600px){ /* на широкому екрані картка знову велика — повертаємо початкові розміри */ .detail figcaption{padding:15px 17px 17px;font-size:13px;line-height:1.5} .detail figcaption b{margin-bottom:6px;font-size:15.5px;line-height:1.2} } /* ===== Керування ===== Компонування взяте з блоку «легке управління» на nexo.tbcmarket.site: сітка у дві колонки, кадр зверху, підпис під ним по центру. Підпис там не речення, а два-три коротких рядки з ослабленням — назва вузла і що він робить. Такий підпис проглядають, а не читають, і п'ять кадрів охоплюються одним поглядом. Рамки навколо пункту немає навмисно: картка з фоном і тінню навколо кожного кадру повернула б ту саму «сітку табличок», від якої ми вже відходили в першому блоці. Тримає ряд сам кадр. Кадри йдуть як є, зі своєю світлою студійною плитою. Пробували гасити її і перефарбовувати в темне — замовник відхилив 15.10: вирізання виходило брудним. На nexo ці самі кадри стоять так само необробленими, і плита там читається як рамка знімка, а не як дірка в сторінці. Пункт без img не виводиться — так само, як у картках «Що всередині». */ .ctl{display:grid;grid-template-columns:1fr 1fr;gap:26px 14px} .ctl article{display:grid;justify-items:center;text-align:center} /* П'ятий пункт лишається сам у ряду — ставимо його по центру, щоб ряд не виглядав обірваним. Додасться шостий — правило вимкнеться само. */ .ctl article:last-child:nth-child(odd){grid-column:1 / -1;justify-self:center; width:calc(50% - 7px)} .ctl .ph{width:100%;aspect-ratio:276/177;border-radius:14px;overflow:hidden; border:1px solid var(--line);background:#0d1116;box-shadow:var(--shadow)} .ctl .ph img{display:block;width:100%;height:100%;object-fit:cover} .ctl b{display:block;margin-top:11px;font:700 11px/1.55 var(--body); letter-spacing:.07em;text-transform:uppercase;color:var(--ink)} .ctl span{display:block;text-wrap:balance;font:600 11px/1.55 var(--body); letter-spacing:.05em;text-transform:uppercase;color:var(--muted)} .ctl span + span{color:#62717f} /* ===== Характеристики ===== */ .specs{border-radius:19px;overflow:hidden;border:1px solid var(--line); box-shadow:var(--shadow);background:linear-gradient(170deg,rgba(255,255,255,.055),rgba(255,255,255,.01))} .specs div{display:flex;justify-content:space-between;gap:16px;align-items:baseline; padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.055);font-size:14px} .specs div:last-child{border-bottom:0} .specs dt{color:var(--muted)} .specs dd{margin:0;font:600 14.5px var(--body);text-align:right;color:var(--ink)} /* ===== Відео ===== */ /* ===== Відеоогляд ===== Відео знято телефоном вертикально, 720 × 1280. На всю ширину колонки воно на десктопі виходить за межі екрана (620 px ширини = 1102 px висоти), тому ширину беремо як меншу з двох: ширина колонки і та, що влазить у 74vh. Так картка сама стискається під низький екран і нікуди не вилазить. Плеєр рідний (controls): пауза, перемотка, звук і повний екран на всіх пристроях без жодного рядка JS, з клавіатурою і зчитувачем екрана. Свій плеєр тут був би гіршим у всьому, крім вигляду. */ .video{width:min(100%, calc(74vh * 9 / 16));margin:0 auto; border-radius:19px;overflow:hidden;border:1px solid var(--line); background:#0a0f15;box-shadow:var(--shadow)} /* height:auto обовʼязково: атрибут height="1280" на