/* ========================================================= VIRAGE VOLLEYBALL CLUB — core stylesheet Design system: Варіант 02 (Dark + Gold #FFC107 + BMW Blue #0052A2) Typography: Bebas Neue (+Oswald cyrillic fallback), Montserrat Author: frontend template for future WordPress port ========================================================= */ /* ---------- 1. TOKENS ---------- */ :root{ /* palette 02 — активна */ --c-accent:#FFC107; --c-accent-2:#FF8C00; --c-blue:#0052A2; --c-blue-lt:#2E9BE6; --c-white:#FFFFFF; --c-black:#111111; --c-grey:#808080; /* поверхні */ --bg:#0A0A0C; --bg-2:#101116; --surface:#15161C; --surface-2:#1B1D25; --line:rgba(255,255,255,.09); --line-strong:rgba(255,255,255,.18); --txt:#EDEDF0; --txt-muted:#9A9BA6; /* BMW M — кольори взято піпеткою з assets/img/bmw-m-stripes.png */ --m-blue:#0066B1; --m-navy:#003D78; --m-red:#E22718; /* типографіка */ --f-display:'Bebas Neue','Oswald','Arial Narrow',sans-serif; --f-head:'Montserrat',system-ui,sans-serif; --f-body:'Montserrat',system-ui,sans-serif; /* сітка (з дизайн-системи) */ --container:1200px; --gutter:80px; --section:120px; /* spacing scale */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:80px; --radius:4px; --radius-lg:10px; --ease:cubic-bezier(.22,1,.36,1); --header-h:84px; } /* альтернативні палітри з дизайну — перемикаються атрибутом на */ html[data-palette="01"]{--c-accent:#FF8C00;--c-accent-2:#FFB74D;--c-blue:#333333;--c-blue-lt:#5A5A5A;} html[data-palette="03"]{--c-accent:#E63946;--c-accent-2:#FF6B6B;--c-blue:#1D3557;--c-blue-lt:#3F6FA8;} html[data-palette="04"]{--c-accent:#A8FF00;--c-accent-2:#C9FF5C;--c-blue:#0B3D20;--c-blue-lt:#1E7A42;} /* ---------- 2. RESET ---------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0;background:var(--bg);color:var(--txt); font-family:var(--f-body);font-size:16px;line-height:1.65;font-weight:400; overflow-x:hidden;-webkit-font-smoothing:antialiased; } body.is-locked{overflow:hidden} img,svg,video{max-width:100%;display:block} a{color:inherit;text-decoration:none;transition:color .25s var(--ease)} button,input,textarea,select{font:inherit;color:inherit} button{cursor:pointer;background:none;border:0} ul,ol{margin:0;padding:0;list-style:none} table{border-collapse:collapse;width:100%} :focus-visible{outline:2px solid var(--c-accent);outline-offset:3px} ::selection{background:var(--c-accent);color:#000} /* скролбар */ ::-webkit-scrollbar{width:10px} ::-webkit-scrollbar-track{background:var(--bg)} ::-webkit-scrollbar-thumb{background:#2A2C36;border-radius:10px} ::-webkit-scrollbar-thumb:hover{background:var(--c-accent)} /* ---------- 3. ТИПОГРАФІКА ---------- */ h1,h2,h3,h4,h5{margin:0 0 var(--s4);font-weight:700;line-height:1.1} h1,h2{font-family:var(--f-display);font-weight:400;letter-spacing:.02em;text-transform:uppercase} h1{font-size:clamp(44px,7vw,92px);line-height:.92} h2{font-size:clamp(32px,4.6vw,64px);line-height:.96} h3{font-family:var(--f-head);font-weight:600;font-size:clamp(19px,2vw,26px)} h4{font-family:var(--f-head);font-weight:600;font-size:18px} p{margin:0 0 var(--s4)} p:last-child{margin-bottom:0} .lead{font-size:clamp(16px,1.5vw,19px);color:var(--txt-muted)} .txt-accent{color:var(--c-accent)} .txt-muted{color:var(--txt-muted)} .upper{text-transform:uppercase} /* ---------- 4. LAYOUT ---------- */ .container{width:100%;max-width:calc(var(--container) + var(--gutter)*2);margin:0 auto;padding:0 var(--gutter)} .container--wide{max-width:1600px} .section{padding:var(--section) 0;position:relative} .section--tight{padding:calc(var(--section)*.6) 0} /* щільний ритм головної: за макетом секції майже стикаються — між ними ~48px, а не подвійний --section. Використовується лише на front-page. */ .section--compact{padding:24px 0} .section--alt{background:var(--bg-2)} .grid{display:grid;gap:var(--s5)} .g-2{grid-template-columns:repeat(2,1fr)} .g-3{grid-template-columns:repeat(3,1fr)} .g-4{grid-template-columns:repeat(4,1fr)} .flex{display:flex} .center{text-align:center} .mt-6{margin-top:var(--s6)} .mt-7{margin-top:var(--s7)} /* ---------- 5. ЗАГОЛОВКИ СЕКЦІЙ ---------- */ .sec-head{margin-bottom:var(--s8);max-width:760px} .sec-head--center{margin-left:auto;margin-right:auto;text-align:center} .sec-head--row{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s6);max-width:none} .eyebrow{ display:inline-flex;align-items:center;gap:10px; font-family:var(--f-head);font-size:12px;font-weight:600;letter-spacing:.22em; text-transform:uppercase;color:var(--c-accent);margin-bottom:var(--s4); } .eyebrow::before{content:"";width:32px;height:2px;background:var(--c-accent);display:block} .sec-head--center .eyebrow::after{content:"";width:32px;height:2px;background:var(--c-accent);display:block} .sec-head p{color:var(--txt-muted)} /* ---------- 6. КНОПКИ ---------- */ .btn{ --btn-bg:var(--c-accent);--btn-fg:#0A0A0C; position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px; padding:16px 30px;border-radius:var(--radius); font-family:var(--f-head);font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase; background:var(--btn-bg);color:var(--btn-fg);overflow:hidden;isolation:isolate; transition:transform .3s var(--ease),box-shadow .3s var(--ease),color .3s var(--ease); clip-path:polygon(0 0,100% 0,100% 100%,12px 100%,0 calc(100% - 12px)); } .btn::after{ content:"";position:absolute;inset:0;z-index:-1;background:var(--c-white); transform:translateY(101%);transition:transform .45s var(--ease); } .btn:hover{transform:translateY(-3px);box-shadow:0 14px 30px -12px rgba(255,193,7,.55);color:#0A0A0C} .btn:hover::after{transform:translateY(0)} .btn svg{width:16px;height:16px;flex:none} .btn--blue{--btn-bg:var(--c-blue);--btn-fg:#fff} .btn--blue:hover{color:#0A0A0C;box-shadow:0 14px 30px -12px rgba(0,82,162,.7)} .btn--ghost{--btn-bg:transparent;--btn-fg:var(--c-white);box-shadow:inset 0 0 0 1px var(--line-strong)} .btn--ghost:hover{box-shadow:inset 0 0 0 1px var(--c-white)} .btn--sm{padding:12px 22px;font-size:12px} .btn--full{width:100%} .link-arrow{ display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600; letter-spacing:.08em;text-transform:uppercase;color:var(--c-accent); } .link-arrow svg{width:15px;height:15px;transition:transform .3s var(--ease)} .link-arrow:hover svg{transform:translateX(6px)} /* ---------- 7. ЗАГЛУШКИ ФОТО ---------- */ .ph{ position:relative;overflow:hidden;background: repeating-linear-gradient(135deg,#17181F 0 14px,#1C1E27 14px 28px); border:1px solid var(--line);border-radius:var(--radius); display:flex;align-items:center;justify-content:center;text-align:center; } .ph::before{ content:attr(data-ph);position:relative;z-index:2; font-family:var(--f-head);font-size:11px;font-weight:600;letter-spacing:.18em; text-transform:uppercase;color:rgba(255,255,255,.34);padding:0 12px; } .ph::after{ content:"";position:absolute;inset:0; background:radial-gradient(120% 90% at 50% 0%,rgba(255,193,7,.10),transparent 60%); } .ph--1x1{aspect-ratio:1/1} .ph--4x3{aspect-ratio:4/3} .ph--3x4{aspect-ratio:3/4} .ph--16x9{aspect-ratio:16/9} .ph--21x9{aspect-ratio:21/9} /* ---------- 8. ПРЕЛОАДЕР ---------- */ .preloader{ position:fixed;inset:0;z-index:9999;background:var(--bg); display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px; } .preloader__ball{width:64px;height:64px;animation:spin 1.6s linear infinite} .preloader__bar{width:180px;height:2px;background:rgba(255,255,255,.12);overflow:hidden} .preloader__bar i{display:block;height:100%;width:0;background:var(--c-accent);transition:width .2s linear} .preloader__txt{font-family:var(--f-display);font-size:20px;letter-spacing:.3em;color:var(--txt-muted)} .preloader.is-done{opacity:0;visibility:hidden;transition:opacity .6s var(--ease),visibility .6s} @keyframes spin{to{transform:rotate(360deg)}} /* ---------- 9. КУРСОР ---------- */ .cursor{ position:fixed;top:0;left:0;width:34px;height:34px;border:1px solid var(--c-accent); border-radius:50%;pointer-events:none;z-index:9998;translate:-50% -50%; transition:width .3s var(--ease),height .3s var(--ease),background .3s var(--ease),opacity .3s; mix-blend-mode:difference;opacity:0; } .cursor.is-active{opacity:1} .cursor.is-hover{width:64px;height:64px;background:rgba(255,193,7,.18)} @media (hover:none),(max-width:1024px){.cursor{display:none}} /* ---------- 10. ХЕДЕР ---------- */ .header{ position:fixed;top:0;left:0;right:0;z-index:900;height:var(--header-h); display:flex;align-items:center; transition:background .4s var(--ease),height .4s var(--ease),box-shadow .4s var(--ease),transform .4s var(--ease); } .header::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,10,12,.85),transparent)} .header.is-stuck{height:70px;background:rgba(10,10,12,.92);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)} .header.is-stuck::after{opacity:0} .header.is-hidden{transform:translateY(-100%)} .header__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);width:100%} .logo{display:flex;align-items:center;gap:12px;flex:none} .logo img{height:46px;width:auto;border-radius:3px} .logo__txt{font-family:var(--f-display);font-size:26px;line-height:.9;letter-spacing:.04em} .logo__txt small{display:block;font-family:var(--f-head);font-size:8px;font-weight:600;letter-spacing:.32em;color:var(--c-blue-lt)} .header.is-stuck .logo img{height:40px} .nav{display:flex;align-items:center;gap:var(--s6)} .nav__link{ position:relative;font-family:var(--f-head);font-size:13px;font-weight:600; letter-spacing:.1em;text-transform:uppercase;padding:6px 0;white-space:nowrap; } .nav__link::after{ content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--c-accent); transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease); } .nav__link:hover::after,.nav__link.is-current::after{transform:scaleX(1);transform-origin:left} .nav__link.is-current{color:var(--c-accent)} /* пункт із випадаючим підменю */ .nav__item{position:relative;display:flex;align-items:center} .nav__link--has-sub{display:inline-flex;align-items:center;gap:6px} .nav__chev{width:11px;height:11px;flex:none;transition:transform .3s var(--ease)} .nav__item:hover .nav__chev, .nav__item.is-open .nav__chev{transform:rotate(180deg)} .subnav{ position:absolute;top:100%;left:50%;z-index:10; min-width:236px;padding:10px;margin-top:16px; transform:translate(-50%,10px); /* непрозорий фон, а не rgba: панель лягає поверх hero-фото, крізь напівпрозору підкладку текст не читався */ background:#12131A; border:1px solid var(--line-strong);border-radius:var(--radius); box-shadow:0 28px 60px -20px rgba(0,0,0,.95); opacity:0;visibility:hidden;pointer-events:none; transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s; } /* невидимий місток: курсор не «провалюється» в зазор між пунктом і меню */ .subnav::before{content:"";position:absolute;left:0;right:0;top:-18px;height:18px} .nav__item:hover .subnav, .nav__item:focus-within .subnav, .nav__item.is-open .subnav{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)} .subnav a{ display:block;padding:10px 14px;border-radius:3px; font-family:var(--f-head);font-size:14px;font-weight:500; color:var(--txt-muted);white-space:nowrap; transition:background .25s var(--ease),color .25s var(--ease),padding-left .25s var(--ease); } .subnav a:hover,.subnav a.is-current{background:rgba(255,255,255,.06);color:var(--c-accent);padding-left:18px} .subnav__sep{display:block;height:1px;background:var(--line);margin:8px 6px} .header__actions{display:flex;align-items:center;gap:var(--s4);flex:none} .header__phone{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600} .header__phone svg{width:16px;height:16px;color:var(--c-accent)} .burger{display:none;width:44px;height:44px;position:relative;flex:none} .burger span{position:absolute;left:11px;width:22px;height:2px;background:var(--c-white);transition:.35s var(--ease)} .burger span:nth-child(1){top:16px} .burger span:nth-child(2){top:22px} .burger span:nth-child(3){top:28px} .burger.is-open span:nth-child(1){top:22px;transform:rotate(45deg)} .burger.is-open span:nth-child(2){opacity:0} .burger.is-open span:nth-child(3){top:22px;transform:rotate(-45deg)} /* мобільне меню */ .mobile-menu{ position:fixed;inset:0;z-index:890;background:var(--bg-2); padding:calc(var(--header-h) + clamp(10px,2.2vh,30px)) var(--s5) clamp(18px,3vh,40px); display:flex;flex-direction:column;justify-content:space-between; clip-path:circle(0% at calc(100% - 44px) 42px); transition:clip-path .7s var(--ease);pointer-events:none; } .mobile-menu.is-open{clip-path:circle(150% at calc(100% - 44px) 42px);pointer-events:auto} /* min-height:0 обов'язковий: без нього flex-елемент не стискається нижче висоти свого вмісту, список переповнює меню й ховається під підвалом */ .mobile-menu__list{ display:flex;flex-direction:column;gap:2px; flex:1 1 auto;min-height:0;overflow-y:auto; } .mobile-menu__list a{ font-family:var(--f-display);font-size:clamp(20px,3.8vh,32px);letter-spacing:.03em; padding:clamp(3px,.8vh,8px) 0; border-bottom:1px solid var(--line);opacity:0;transform:translateY(20px); } .mobile-menu.is-open .mobile-menu__list a{animation:mmIn .5s var(--ease) forwards} @keyframes mmIn{to{opacity:1;transform:none}} .mobile-menu__foot{flex:none;padding-top:clamp(12px,2vh,24px);color:var(--txt-muted);font-size:13px;line-height:1.5} .mobile-menu__foot .socials{margin-top:clamp(10px,1.8vh,20px)} .mobile-menu__foot .socials a{width:34px;height:34px} .mobile-menu__foot .socials svg{width:15px;height:15px} /* ---------- 11. HERO ---------- */ .hero{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden;padding:calc(var(--header-h) + 40px) 0 60px} /* ---------- 11b. HERO-ЛЕНДІНГ: уся головна в один екран ---------- Висота рівно у видиму частину вікна (dvh — щоб не рахувати мобільні панелі), вміст ужимається типографікою на clamp(), нічого не скролиться. */ .hero--landing{ height:100vh;height:100dvh;min-height:520px; padding:calc(var(--header-h) + 14px) 0 20px; align-items:center; } .hero--landing .hero__content{ /* права межа тексту тримається лівіше за фігуру на фото */ max-width:min(52%,660px); display:flex;flex-direction:column;gap:clamp(10px,1.4vh,18px); } .hero__logo{display:block;flex:none} .hero__logo img{height:clamp(140px,22vh,320px);width:auto} .hero--landing .hero__slogan{margin:0} .hero--landing .hero__title{margin:0;font-size:clamp(36px,5.6vw,78px)} .hero--landing .hero__text{ margin:0;max-width:520px; font-size:clamp(14px,1.6vh,17px);line-height:1.5; } /* новини всередині першого екрана */ .hero-news{margin-top:clamp(2px,1vh,10px)} .hero-news__head{ display:flex;align-items:baseline;justify-content:space-between;gap:var(--s5); margin-bottom:10px; } .hero-news__head span{ font-family:var(--f-head);font-size:11px;font-weight:600; letter-spacing:.2em;text-transform:uppercase;color:var(--c-accent); } .hero-news .swiper{overflow:hidden} .hero-news__card{ position:relative;overflow:hidden;display:block;height:100%; background:rgba(21,22,28,.82);backdrop-filter:blur(6px); border:1px solid var(--line);border-radius:10px; padding:14px 16px; transition:border-color .35s var(--ease),transform .35s var(--ease); } .hero-news__card:hover{border-color:rgba(46,155,230,.5);transform:translateY(-3px)} .hero-news__date{font-size:11px;color:var(--txt-muted);letter-spacing:.06em;margin-bottom:6px} .hero-news__title{ font-family:var(--f-head);font-weight:700;font-size:14px;line-height:1.32; color:var(--c-white);margin:0 0 10px; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; } .hero-news__more{ display:inline-flex;align-items:center;gap:6px; font-size:12px;font-weight:600;color:var(--c-accent); } .hero-news__more svg{width:13px;height:13px} /* партнери всередині першого екрана — на будь-якій ширині однаково: BMW на всю ширину зверху, решта партнерів рядком комірок під ним. Комірки діляться порівну (flex:1 1 0), тож третій і четвертий партнер самі впишуться в ряд без правок розмітки. */ .hero-partners{ display:flex;flex-direction:column;gap:10px; margin-top:clamp(2px,1vh,10px); } .hero-partners__bmw{ position:relative;overflow:hidden;width:100%;min-width:0; min-height:clamp(64px,9vh,92px);border-radius:10px; background:linear-gradient(100deg,#0E1420 0%,#0F1B2E 46%,#0B1526 100%); border:1px solid var(--line); display:flex;align-items:center; } /* смуги та емблема — праворуч, назва партнера — ліворуч на чистому тлі. Базовий градієнт .m-stripes::after уже гасне справа наліво, тож текст ліворуч лежить на суцільному темному полі. */ .hero-partners__bmw .m-stripes{width:54%} .hero-partners__txt{ position:relative;z-index:3;margin-right:auto;text-align:left;line-height:1.15; padding-left:clamp(14px,2vw,26px); } .hero-partners__txt b{ display:block;font-family:var(--f-head);font-size:10px;font-weight:700; letter-spacing:.16em;text-transform:uppercase;color:var(--c-accent);margin-bottom:2px; } .hero-partners__txt i{ display:block;font-family:var(--f-display);font-style:normal; font-size:clamp(19px,3.2vh,28px);letter-spacing:.12em;color:var(--c-white); } .hero-partners__logo{ position:relative;z-index:3;margin-left:auto;margin-right:clamp(12px,2vw,24px); width:clamp(44px,6vh,62px);height:clamp(44px,6vh,62px);flex:none; display:grid;place-items:center;padding:6px;border-radius:50%; background:rgba(8,14,26,.5);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16); } .hero-partners__logo img{width:100%;height:100%;object-fit:contain} .hero-partners__rest{display:flex;gap:10px;width:100%;min-width:0} .hero-partners__tile{ flex:1 1 0;min-width:76px;max-width:130px;overflow:hidden; display:grid;place-items:center;padding:8px; background:rgba(21,22,28,.82);border:1px solid var(--line);border-radius:10px; transition:border-color .35s var(--ease),transform .35s var(--ease); } /* логотип партнера на білому тлі — плитку теж робимо світлою, інакше біле зображення читається як дірка в темній картці */ .hero-partners__tile--light{background:#fff;border-color:rgba(255,255,255,.28)} .hero-partners__tile--light:hover{border-color:#fff} .hero-partners__tile:hover{border-color:rgba(46,155,230,.45);transform:translateY(-3px)} .hero-partners__tile img{max-height:clamp(36px,5vh,52px);width:auto;object-fit:contain} .hero-partners__tile span{ font-family:var(--f-display);font-size:clamp(14px,2.2vh,19px); letter-spacing:.04em;color:var(--c-accent);text-align:center; } /* фонове фото на весь блок — звичайний усередині .hero__photo. Якщо картинки немає (або не завантажилась) — видно смугасту заглушку з підписом. Кадрування регулюється через object-position на .hero__photo img. */ .hero__photo{ position:absolute;inset:0;z-index:0;overflow:hidden; background-color:#0E1018; background-image:repeating-linear-gradient(135deg,#14161F 0 18px,#191C27 18px 36px); display:flex;align-items:center;justify-content:center; } .hero__photo img{ position:absolute;inset:0;width:100%;height:100%; object-fit:cover;object-position:78% center; } .hero__photo::after{ content:attr(data-ph);position:relative; font-family:var(--f-head);font-size:12px;font-weight:600;letter-spacing:.2em; text-transform:uppercase;color:rgba(255,255,255,.22);text-align:center;padding:0 20px;max-width:520px; } /* коли фото підставлено — підпис ховаємо класом на .hero */ .hero.has-photo .hero__photo::after{display:none} .hero__bg{position:absolute;inset:0;z-index:1;pointer-events:none} .hero__bg::before{ content:"";position:absolute;inset:0; background:radial-gradient(55% 55% at 10% 30%,rgba(0,82,162,.20),transparent 65%); } /* скрим: зліва темніше під текст, справа фото лишається чистим */ .hero__bg::after{ content:"";position:absolute;inset:0; background:linear-gradient(90deg,rgba(10,10,12,.90) 0%,rgba(10,10,12,.72) 26%,rgba(10,10,12,.28) 52%,rgba(10,10,12,0) 74%), linear-gradient(180deg,rgba(10,10,12,.72) 0%,rgba(10,10,12,0) 24%,rgba(10,10,12,0) 66%,rgba(10,10,12,.86) 100%); } .hero__streaks{position:absolute;inset:0;z-index:2;opacity:.5;pointer-events:none} .hero__noise{position:absolute;inset:0;z-index:3;opacity:.045;pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");} .hero__inner{position:relative;z-index:4;width:100%} .hero__content{max-width:660px} .hero__title{margin-bottom:var(--s5)} .hero__title .l1{display:block;color:var(--c-white)} .hero__title .l2{display:block;color:var(--c-blue-lt);font-size:.55em;letter-spacing:.06em} .hero__slogan{ display:inline-flex;align-items:center;gap:10px;margin-bottom:var(--s5); font-family:var(--f-head);font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase; color:var(--c-accent);border-left:3px solid var(--c-accent);padding-left:14px; } .hero__text{max-width:440px;color:#C9CAD2;font-size:17px;margin-bottom:var(--s6)} .hero__cta{display:flex;flex-wrap:wrap;gap:var(--s4)} .hero__badge{ position:absolute;right:var(--gutter);bottom:96px;z-index:4; background:var(--c-accent);color:#0A0A0C; padding:14px 20px;font-family:var(--f-display);font-size:34px;line-height:1;letter-spacing:.04em; clip-path:polygon(0 0,100% 0,100% 100%,10px 100%,0 calc(100% - 10px)); } .hero__badge small{display:block;font-family:var(--f-head);font-size:9px;font-weight:700;letter-spacing:.2em;margin-top:4px} .hero__scroll{ position:absolute;left:var(--gutter);bottom:28px;z-index:4;display:flex;align-items:center;gap:12px; font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--txt-muted); } .hero__scroll i{display:block;width:1px;height:44px;background:linear-gradient(var(--c-accent),transparent);animation:scrollLine 1.8s ease-in-out infinite} @keyframes scrollLine{0%,100%{opacity:.3;transform:scaleY(.5)}50%{opacity:1;transform:scaleY(1)}} /* лічильники */ .stats{display:flex;flex-wrap:wrap;gap:var(--s8)} .stat__num{font-family:var(--f-display);font-size:clamp(38px,4.4vw,56px);line-height:1;color:var(--c-blue-lt)} .stat__num.is-gold{color:var(--c-accent)} .stat__label{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--txt-muted);margin-top:6px} /* ---------- 12. БІЖУЧИЙ РЯДОК ---------- */ .marquee{ position:relative;overflow:hidden;padding:18px 0;background:var(--c-accent);color:#0A0A0C; border-block:1px solid rgba(0,0,0,.15); } .marquee--dark{background:var(--surface);color:var(--c-white)} .marquee__track{display:flex;gap:48px;width:max-content;animation:marq 26s linear infinite} .marquee:hover .marquee__track{animation-play-state:paused} .marquee__item{display:flex;align-items:center;gap:48px;font-family:var(--f-display);font-size:26px;letter-spacing:.08em;white-space:nowrap} .marquee__item svg{width:20px;height:20px;flex:none} @keyframes marq{to{transform:translateX(-50%)}} /* ---------- 13. КАРТКИ ---------- */ .card{ position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius); overflow:hidden;transition:transform .45s var(--ease),border-color .45s var(--ease),box-shadow .45s var(--ease); } .card:hover{transform:translateY(-8px);border-color:rgba(255,193,7,.45);box-shadow:0 26px 50px -24px rgba(0,0,0,.9)} .card__body{padding:var(--s5)} /* картка гравчині — за макетом: фото зверху, номер + ім'я під ним на тілі картки */ .player{ position:relative;display:block;overflow:hidden; /* фактура з синіми мазками — фон картки, у нього розчиняється низ фото */ background:#0A0D14 url("../img/player-bg.jpg") center/cover no-repeat; border:1px solid var(--line);border-radius:var(--radius-lg); transition:transform .45s var(--ease),border-color .45s var(--ease),box-shadow .45s var(--ease); } /* різні ділянки фактури, щоб сусідні картки не виглядали копіями */ .player:nth-child(2){background-position:26% 62%} .player:nth-child(3){background-position:58% 30%} .player:nth-child(4){background-position:88% 70%} .player:nth-child(5){background-position:12% 38%} .player:nth-child(6){background-position:70% 84%} .player:nth-child(7){background-position:40% 8%} .player:hover{ transform:translateY(-6px);border-color:rgba(255,193,7,.45); box-shadow:0 26px 50px -26px rgba(0,0,0,.95); } .player__media{position:relative;overflow:hidden} /* фото — вирізані PNG з прозорим фоном: contain, щоб фігуру не обрізало, і прив'язка до низу, щоб гравчиня «стояла» на нижньому краї картки. Обабіч лишається фактура — це навмисно. */ /* за макетом кадр майже квадратний: голова + груди, фігура заповнює ширину. cover + прив'язка до верху — обрізається низ, обличчя лишається цілим. */ .player__media .ph,.player__media img{ display:block;width:100%;aspect-ratio:1/1; object-fit:cover;object-position:center top; border:0;border-radius:0;transition:transform .7s var(--ease); } .player:hover .player__media .ph,.player:hover .player__media img{transform:scale(1.04)} /* м'яке згасання самого низу, щоб зріз фігури не давав різкої лінії */ .player__media img{ -webkit-mask-image:linear-gradient(180deg,#000 88%,transparent 100%); mask-image:linear-gradient(180deg,#000 88%,transparent 100%); } /* легке затемнення низу, щоб номер та ім'я не втрачали контраст на світлих мазках */ .player__media::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:30%;pointer-events:none; background:linear-gradient(180deg,transparent,rgba(6,8,14,.5)); } .player__info{display:flex;align-items:flex-start;gap:13px;padding:14px 18px 16px} .player__jersey{ font-family:var(--f-display);font-size:40px;line-height:.86; color:var(--c-white);flex:none; } .player__meta{min-width:0;padding-top:3px} .player__name{ display:block;font-family:var(--f-head);font-weight:700;font-size:15px; text-transform:uppercase;letter-spacing:.04em;line-height:1.15;color:var(--c-white); } .player__pos{display:block;font-size:11px;line-height:1.4;color:var(--txt-muted);margin-top:6px} /* поле, яке чекає на дані від клубу */ .player__name--todo{color:var(--txt-muted);border-bottom:1px dashed rgba(255,255,255,.22);padding-bottom:2px} /* горизонтальна картка новини на головній — за макетом: фото на правій половині, ліворуч суцільний фон під текст */ .news-card{ position:relative;overflow:hidden;display:flex;align-items:center; min-height:180px; background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg); transition:transform .45s var(--ease),border-color .45s var(--ease),box-shadow .45s var(--ease); } .news-card:hover{ transform:translateY(-6px);border-color:rgba(255,193,7,.4); box-shadow:0 26px 50px -26px rgba(0,0,0,.95); } .news-card__media{position:absolute;inset:0;z-index:0;overflow:hidden} .news-card__media img,.news-card__media .ph{ width:100%;height:100%;object-fit:cover;object-position:right center; border:0;border-radius:0;aspect-ratio:auto; transition:transform .7s var(--ease); } .news-card:hover .news-card__media img,.news-card:hover .news-card__media .ph{transform:scale(1.05)} /* підпис заглушки притискаємо праворуч — там, де фото реально видно з-під градієнта */ .news-card__media .ph{justify-content:flex-end} .news-card__media .ph::before{max-width:48%;padding-right:16px;text-align:right;font-size:10px} /* фото розчиняється зліва направо, щоб текст лежав на чистому фоні */ .news-card__media::after{ content:"";position:absolute;inset:0; background:linear-gradient(90deg, var(--surface) 20%,rgba(21,22,28,.94) 40%,rgba(21,22,28,.45) 68%,rgba(21,22,28,.08) 100%); } .news-card__body{position:relative;z-index:2;padding:22px 24px;max-width:66%} .news-card__date{font-size:11px;letter-spacing:.06em;color:var(--txt-muted);margin-bottom:10px} .news-card__title{ font-family:var(--f-head);font-weight:700;font-size:16px;line-height:1.32; color:var(--c-white);margin:0 0 16px; } .news-card__title a:hover{color:var(--c-accent)} /* заголовок і посилання секції складу — за макетом */ .roster-head{ font-family:var(--f-head);font-weight:600;font-size:clamp(18px,2vw,22px); text-transform:none;letter-spacing:0;color:var(--c-white); margin-bottom:18px; } .link-all{ display:inline-flex;align-items:center;gap:8px; font-family:var(--f-head);font-size:14px;font-weight:500;color:var(--c-accent); } .link-all svg{width:15px;height:15px;transition:transform .3s var(--ease)} .link-all:hover{color:var(--c-accent)} .link-all:hover svg{transform:translateX(5px)} /* картка новини */ .news{display:flex;flex-direction:column;height:100%} .news__media{position:relative;overflow:hidden} .news__media .ph{aspect-ratio:16/10;border:0;border-radius:0;transition:transform .7s var(--ease)} .news:hover .news__media .ph{transform:scale(1.06)} .news__tag{ position:absolute;top:14px;left:14px;z-index:2;background:var(--c-blue);color:#fff; padding:5px 12px;font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase; } .news__tag--gold{background:var(--c-accent);color:#0A0A0C} .news__date{font-size:12px;color:var(--txt-muted);letter-spacing:.1em;margin-bottom:10px;display:flex;align-items:center;gap:8px} .news__date::before{content:"";width:16px;height:1px;background:var(--c-accent)} .news__title{font-family:var(--f-head);font-weight:600;font-size:18px;line-height:1.35;margin-bottom:12px;transition:color .3s} .news:hover .news__title{color:var(--c-accent)} .news__excerpt{font-size:14px;color:var(--txt-muted);margin-bottom:var(--s4)} .news .card__body{display:flex;flex-direction:column;flex:1} .news .link-arrow{margin-top:auto} /* картка-фіча */ .feature{padding:var(--s6);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);transition:.4s var(--ease)} .feature:hover{border-color:rgba(255,193,7,.4);background:var(--surface-2);transform:translateY(-6px)} .feature__icon{width:52px;height:52px;display:grid;place-items:center;background:rgba(255,193,7,.12);color:var(--c-accent);border-radius:var(--radius);margin-bottom:var(--s5)} .feature__icon svg{width:24px;height:24px} .feature h3{margin-bottom:10px} .feature p{font-size:14px;color:var(--txt-muted)} /* ---------- 14. ТАЙМЛАЙН ІСТОРІЇ ---------- */ .timeline{position:relative;padding-left:var(--s7)} .timeline::before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:2px;background:var(--line)} .timeline__fill{position:absolute;left:8px;top:6px;width:2px;height:0;background:linear-gradient(var(--c-accent),var(--c-blue-lt))} .tl-item{position:relative;padding-bottom:var(--s7)} .tl-item:last-child{padding-bottom:0} .tl-item::before{ content:"";position:absolute;left:calc(var(--s7)*-1 + 3px);top:8px;width:14px;height:14px; border-radius:50%;background:var(--bg);border:2px solid var(--c-accent); } .tl-item__year{font-family:var(--f-display);font-size:34px;line-height:1;color:var(--c-accent);margin-bottom:6px} .tl-item h4{margin-bottom:6px} .tl-item p{font-size:14px;color:var(--txt-muted)} /* ---------- 15. ТАБЛИЦІ / ТУРНІРИ ---------- */ .tabs{display:flex;flex-wrap:wrap;gap:var(--s2);margin-bottom:var(--s7);border-bottom:1px solid var(--line)} .tab{ padding:14px 22px;font-family:var(--f-head);font-size:13px;font-weight:600;letter-spacing:.08em; text-transform:uppercase;color:var(--txt-muted);position:relative;transition:color .3s; } .tab::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--c-accent);transform:scaleX(0);transition:transform .35s var(--ease)} .tab:hover{color:var(--c-white)} .tab.is-active{color:var(--c-accent)} .tab.is-active::after{transform:scaleX(1)} .tab-panel{display:none} .tab-panel.is-active{display:block;animation:fadeUp .5s var(--ease)} @keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} .table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius)} .table{min-width:640px;font-size:14px} .table th{ background:var(--surface-2);padding:14px 16px;text-align:left;font-size:11px;font-weight:700; letter-spacing:.14em;text-transform:uppercase;color:var(--txt-muted);white-space:nowrap; } .table td{padding:14px 16px;border-top:1px solid var(--line)} .table tbody tr{transition:background .25s} .table tbody tr:hover{background:rgba(255,255,255,.03)} .table tr.is-us{background:rgba(255,193,7,.07)} .table tr.is-us td{font-weight:600} .table tr.is-us td:first-child{box-shadow:inset 3px 0 0 var(--c-accent)} .table td b{color:var(--c-white)} /* матчі */ .match{ display:grid;grid-template-columns:auto 1fr auto 1fr auto;align-items:center;gap:var(--s5); padding:var(--s5);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius); transition:.4s var(--ease); } .match:hover{border-color:rgba(255,193,7,.4);background:var(--surface-2)} .match__date{font-size:12px;color:var(--txt-muted);letter-spacing:.1em;text-align:center;min-width:78px} .match__date b{display:block;font-family:var(--f-display);font-size:30px;color:var(--c-white);letter-spacing:.02em} .match__team{display:flex;align-items:center;gap:12px;font-weight:600;font-size:15px} .match__team--away{justify-content:flex-end;text-align:right} .match__logo{width:40px;height:40px;border-radius:50%;background:var(--surface-2);border:1px solid var(--line);display:grid;place-items:center;font-family:var(--f-display);font-size:15px;color:var(--txt-muted);flex:none} .match__score{font-family:var(--f-display);font-size:30px;letter-spacing:.06em;padding:0 var(--s4);color:var(--c-accent)} .match__status{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--txt-muted);padding:6px 12px;border:1px solid var(--line);border-radius:100px} .match__status.is-live{color:var(--m-red);border-color:rgba(228,0,43,.5)} .match__status.is-win{color:var(--c-accent);border-color:rgba(255,193,7,.5)} /* Картка матчу на вузьких екранах: дата + статус у рядок, далі команди одна під одною з рахунком між ними. Власний поріг (1023px, а не 767) — у п'ять колонок довгі назви на кшталт «Дніпро-Академія» ламаються вже на планшеті, де контейнер звужується до 720px. minmax(0,1fr) і min-width:0 обов'язкові: інакше колонки grid не стискаються нижче ширини назви команди й картка вилазить за межі екрана. */ @media (max-width:1023px){ .match{ grid-template-columns:minmax(0,1fr) auto; gap:var(--s3) var(--s4); padding:var(--s4); } .match > *{min-width:0} .match__date{ grid-column:1;grid-row:1;min-width:0; display:flex;align-items:baseline;gap:8px;text-align:left; } .match__date b{font-size:22px} .match__status{grid-column:2;grid-row:1;justify-self:end;align-self:center} .match__team{grid-column:1/-1;grid-row:2;font-size:15px;justify-content:flex-start;text-align:left} .match__score{ grid-column:1/-1;grid-row:3;justify-self:start; padding:0;font-size:26px;line-height:1; } /* у гостей логотип у розмітці стоїть після назви (для вирівнювання праворуч на десктопі) — row-reverse повертає його вперед, щоб обидві команди збігались */ .match__team--away{ grid-column:1/-1;grid-row:4; flex-direction:row-reverse;justify-content:flex-end;text-align:left; } .match__logo{width:34px;height:34px} } @media (max-width:767px){ .match{padding:var(--s4) var(--s4)} .match__team{font-size:14px} } /* ---------- 16. ДОМАШНЯ АРЕНА ---------- */ .arena{position:relative} .arena__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--s7);align-items:center} .arena__gallery{display:grid;grid-template-columns:repeat(2,1fr);grid-auto-rows:130px;gap:var(--s3)} .arena__gallery .ph{height:100%;border-radius:var(--radius);cursor:pointer;transition:.4s var(--ease)} .arena__gallery .ph:hover{transform:scale(1.02);border-color:var(--c-accent)} .arena__gallery .ph:nth-child(1){grid-row:span 2;grid-column:span 2} .arena__info li{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--line)} .arena__info li:last-child{border-bottom:0} .arena__info svg{width:20px;height:20px;color:var(--c-accent);flex:none;margin-top:3px} .arena__info b{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-muted);margin-bottom:2px;font-weight:600} .map{position:relative;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;height:440px;background:var(--surface)} .map iframe{width:100%;height:100%;border:0;filter:grayscale(1) invert(.92) contrast(.85);transition:filter .5s} .map:hover iframe{filter:grayscale(.2) invert(.9) contrast(.9)} .map__route{position:absolute;left:20px;bottom:20px;z-index:3} /* Карта в правій колонці сторінки контактів. Висота гнучка (min-height), тому iframe позиціонуємо абсолютно: його height:100% не спрацював би при height:auto в батька. */ .map--contacts{height:auto;min-height:520px} .map--contacts iframe{position:absolute;inset:0;height:100%} /* ---------- 17. ПАРТНЕРИ + BMW M ---------- */ .partner-bmw{ position:relative;overflow:hidden;border-radius:var(--radius); background:linear-gradient(100deg,#0E1420 0%,#0F1B2E 45%,#0B1526 100%); border:1px solid var(--line); } /* ширина зони під M-смуги — нею ж резервуємо праве поле контенту */ .partner-bmw{--m-zone:38%} .partner-bmw__inner{ position:relative;z-index:2;display:flex;align-items:center; padding:var(--s7) var(--s8); padding-right:calc(var(--m-zone) + var(--s5)); min-height:230px; } .partner-bmw__text{flex:1 1 auto;min-width:0} .partner-bmw__label{font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--c-accent);margin-bottom:10px} .partner-bmw__name{font-family:var(--f-display);font-size:clamp(40px,5vw,68px);line-height:.9;letter-spacing:.14em;margin-bottom:8px} .partner-bmw__slogan{color:#B9C4D6;font-size:15px} /* лого — по центру зони зі смугами */ .partner-bmw__logo{ position:absolute;z-index:3;top:50%;right:calc(var(--m-zone) / 2); transform:translate(50%,-50%); width:118px;height:118px;display:grid;place-items:center; padding:12px;border-radius:50%;background:rgba(8,14,26,.5); backdrop-filter:blur(3px); box-shadow:0 20px 44px -16px rgba(0,0,0,.95),inset 0 0 0 1px rgba(255,255,255,.16); } .partner-bmw__logo img{width:100%;height:100%;object-fit:contain} /* M-смуги справа — зображення в край блока зверху й знизу, без накладених градієнтів */ .m-stripes{position:absolute;top:0;right:0;bottom:0;width:var(--m-zone);z-index:1;overflow:hidden;pointer-events:none} .m-stripes img{ width:100%;height:100%; object-fit:cover;object-position:center;user-select:none; } .m-bar{height:6px;display:flex;width:100%;overflow:hidden} .m-bar i{flex:1} .m-bar i:nth-child(1){background:var(--m-blue)} .m-bar i:nth-child(2){background:var(--m-navy)} .m-bar i:nth-child(3){background:var(--m-red)} .partners-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4)} .partner-tile{ display:grid;place-items:center;padding:var(--s6) var(--s5);min-height:150px; background:var(--surface);border:1px solid var(--line);border-radius:var(--radius); transition:.4s var(--ease);text-align:center; } .partner-tile:hover{border-color:rgba(255,193,7,.45);background:var(--surface-2);transform:translateY(-6px)} .partner-tile img{max-height:78px;width:auto;object-fit:contain;filter:grayscale(1) brightness(1.6);opacity:.75;transition:.4s var(--ease)} .partner-tile:hover img{filter:none;opacity:1} .partner-tile span{font-family:var(--f-head);font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-muted)} /* ---------- 18. CTA-смуга перед футером ---------- Заокруглений блок у загальному контейнері сайту; футер під ним іде впритул, а зверху відділяється від попередньої секції власним відступом. */ .cta-band{padding-top:var(--s7);background:var(--bg-2)} .cta-band__inner{ position:relative;overflow:hidden;border-radius:12px; background:linear-gradient(100deg,#0A5AB4 0%,var(--c-blue) 58%,#003E7C 100%); display:flex;align-items:center;justify-content:space-between;gap:var(--s6); padding:24px clamp(20px,3vw,44px); } .cta-band__inner::before{ content:"";position:absolute;inset:0;opacity:.13; background:repeating-linear-gradient(-62deg,transparent 0 26px,rgba(255,255,255,.6) 26px 29px); } .cta-band__text{position:relative;z-index:2} .cta-band h2{ font-family:var(--f-head);font-weight:700;font-size:clamp(19px,2.1vw,24px); text-transform:none;letter-spacing:0;line-height:1.25;margin:0 0 5px;color:var(--c-white); } .cta-band p{margin:0;font-size:14px;color:rgba(255,255,255,.85)} /* темна кнопка на синьому: без скосу кута, без капса, без стрілки — як у макеті */ .btn--dark{--btn-bg:#0A0A0C;--btn-fg:#fff} .btn--dark:hover{box-shadow:0 14px 30px -12px rgba(0,0,0,.8)} .cta-band .btn{ position:relative;z-index:2;flex:none; clip-path:none;border-radius:6px; text-transform:none;letter-spacing:.01em;font-size:14px;font-weight:600; padding:14px 28px; } /* ---------- 19. ФОРМИ ---------- */ .form{display:grid;gap:var(--s4)} .field{display:flex;flex-direction:column;gap:8px} .field label{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--txt-muted)} .field input,.field textarea,.field select{ background:var(--surface);border:1px solid var(--line);border-radius:var(--radius); padding:14px 16px;font-size:15px;transition:border-color .3s,background .3s;width:100%; } .field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--c-accent);background:var(--surface-2)} .field textarea{min-height:140px;resize:vertical} .field--half{grid-column:span 1} .form__row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)} .form__note{font-size:12px;color:var(--txt-muted)} .form__msg{display:none;padding:14px 16px;border-radius:var(--radius);font-size:14px} .form__msg.is-ok{display:block;background:rgba(255,193,7,.12);border:1px solid rgba(255,193,7,.4);color:var(--c-accent)} /* ---------- 20. ХЛІБНІ КРИХТИ / PAGE HERO ---------- */ .page-hero{position:relative;padding:calc(var(--header-h) + 90px) 0 80px;overflow:hidden;border-bottom:1px solid var(--line)} .page-hero::before{ content:"";position:absolute;inset:0; background:radial-gradient(70% 100% at 70% 0%,rgba(0,82,162,.35),transparent 65%), radial-gradient(50% 80% at 5% 30%,rgba(255,193,7,.10),transparent 60%); } .page-hero::after{ content:"";position:absolute;inset:0;opacity:.35; background:repeating-linear-gradient(-62deg,transparent 0 60px,rgba(255,255,255,.035) 60px 62px); } .page-hero .container{position:relative;z-index:2} .crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:12px;color:var(--txt-muted);margin-bottom:var(--s5);letter-spacing:.08em} .crumbs a:hover{color:var(--c-accent)} .crumbs span{color:var(--c-accent)} /* ---------- 21. ДОКУМЕНТИ ---------- */ .doc{ display:flex;align-items:center;gap:var(--s5);padding:var(--s5); background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);transition:.35s var(--ease); } .doc:hover{border-color:rgba(255,193,7,.45);transform:translateX(6px)} .doc__icon{width:46px;height:46px;flex:none;display:grid;place-items:center;background:rgba(255,193,7,.12);color:var(--c-accent);border-radius:var(--radius)} .doc__icon svg{width:22px;height:22px} .doc__meta{display:block;font-size:12px;color:var(--txt-muted);letter-spacing:.08em;text-transform:uppercase;margin-top:3px} .doc__name{display:block;font-weight:600;font-size:15px} .doc__dl{margin-left:auto;color:var(--c-accent);flex:none} .doc__dl svg{width:20px;height:20px} /* ---------- 22. FAQ / АКОРДЕОН ---------- */ .acc__item{border-bottom:1px solid var(--line)} .acc__head{width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--s5);padding:22px 0;text-align:left;font-family:var(--f-head);font-weight:600;font-size:17px;transition:color .3s} .acc__head:hover{color:var(--c-accent)} .acc__head i{width:22px;height:22px;flex:none;position:relative} .acc__head i::before,.acc__head i::after{content:"";position:absolute;left:50%;top:50%;background:var(--c-accent);translate:-50% -50%;transition:.35s var(--ease)} .acc__head i::before{width:14px;height:2px} .acc__head i::after{width:2px;height:14px} .acc__item.is-open .acc__head i::after{transform:rotate(90deg);opacity:0} .acc__body{max-height:0;overflow:hidden;transition:max-height .5s var(--ease)} .acc__body p{padding-bottom:22px;color:var(--txt-muted);font-size:15px} /* ---------- 23. ФУТЕР ---------- */ /* футер в один горизонтальний рядок: логотип — розділи — соцмережі */ .footer{background:var(--bg-2)} /* УВАГА: тільки padding-top/bottom. Скорочений запис padding:20px 0 обнуляв би горизонтальні відступи .container — і футер вилазив би за загальну сітку. */ .footer__row{ display:flex;align-items:center;justify-content:space-between;gap:var(--s6); padding-top:20px;padding-bottom:20px; } .footer__row .logo{gap:0} /* логотип — JPG на чорному тлі; screen прибирає чорну підкладку, лишаючи саму емблему, як у макеті */ .footer__row .logo img{height:52px;border-radius:0} .footer__row .logo__txt{display:none} .footer__nav{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s6)} .footer__nav a{ font-family:var(--f-head);font-size:13px;font-weight:600;letter-spacing:.05em; white-space:nowrap;transition:color .25s var(--ease); } .footer__nav a:hover,.footer__nav a.is-current{color:var(--c-accent)} .footer__legal{ border-top:1px solid var(--line);padding-top:14px;padding-bottom:14px; display:flex;flex-wrap:wrap;gap:var(--s4);align-items:center;justify-content:space-between; font-size:12px;color:var(--txt-muted); } .socials{display:flex;gap:10px} /* варіант для шапки: компактніший, ніж на сторінці контактів */ .socials--header{gap:8px} .socials--header a{width:34px;height:34px} .socials--header svg{width:15px;height:15px} .socials a{width:38px;height:38px;flex:none;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;transition:.3s var(--ease)} .socials a:hover{background:var(--c-accent);color:#0A0A0C;border-color:var(--c-accent);transform:translateY(-4px)} .socials svg{width:16px;height:16px} /* кнопка "вгору" */ .to-top{ position:fixed;right:26px;bottom:26px;z-index:800;width:48px;height:48px;border-radius:50%; background:var(--c-accent);color:#0A0A0C;display:grid;place-items:center; opacity:0;visibility:hidden;transform:translateY(14px);transition:.4s var(--ease); } .to-top.is-visible{opacity:1;visibility:visible;transform:none} .to-top:hover{background:var(--c-white);color:#0A0A0C} .to-top svg{width:20px;height:20px} /* ---------- 24. LIGHTBOX ---------- */ .lightbox{position:fixed;inset:0;z-index:9500;background:rgba(6,6,8,.94);display:none;align-items:center;justify-content:center;padding:40px} .lightbox.is-open{display:flex;animation:fadeUp .3s var(--ease)} .lightbox__inner{max-width:1000px;width:100%} .lightbox__inner .ph{aspect-ratio:16/9} .lightbox__close{position:absolute;top:26px;right:30px;font-size:34px;line-height:1;color:var(--c-white)} /* ---------- 25. АНІМАЦІЇ ПОЯВИ (fallback без JS) ---------- */ [data-reveal]{opacity:0;transform:translateY(28px)} .no-js [data-reveal],.is-revealed{opacity:1;transform:none} .split-char{display:inline-block;will-change:transform} /* ---------- 25b. СТОРІНКА ГРАВЦЯ ---------- */ .player-hero{position:relative;padding:calc(var(--header-h) + 70px) 0 var(--section);overflow:hidden} .player-hero::before{ content:"";position:absolute;inset:0; background:radial-gradient(65% 90% at 25% 20%,rgba(0,82,162,.35),transparent 60%), radial-gradient(50% 70% at 90% 60%,rgba(255,193,7,.10),transparent 65%); } .player-hero__ghost{ position:absolute;right:-4vw;top:6%;z-index:0;font-family:var(--f-display); font-size:44vw;line-height:.8;color:rgba(255,255,255,.028);pointer-events:none;user-select:none; } .player-hero .container{position:relative;z-index:2} .player-hero__grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:var(--s8);align-items:center} .pspecs{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3)} .pspec{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s4);text-align:center} .pspec b{display:block;font-family:var(--f-display);font-size:34px;line-height:1;color:var(--c-accent)} .pspec span{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-muted)} .pstats{display:grid;gap:var(--s4)} .pstat__row{display:flex;justify-content:space-between;font-size:13px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px} .pstat__row b{color:var(--c-accent)} .pstat__bar{display:block;height:6px;background:rgba(255,255,255,.08);border-radius:100px;overflow:hidden} .pstat__bar i{display:block;height:100%;background:linear-gradient(90deg,var(--c-blue-lt),var(--c-accent));border-radius:100px; animation:barIn 1.2s var(--ease) both;transform-origin:left} @keyframes barIn{from{transform:scaleX(0)}to{transform:scaleX(1)}} /* ---------- 25c. НОВИНИ: сингл, пагінація, сайдбар ---------- */ .article{max-width:820px;margin:0 auto} .article__meta{display:flex;flex-wrap:wrap;gap:var(--s5);font-size:13px;color:var(--txt-muted);margin-bottom:var(--s6);letter-spacing:.06em} .article__meta span{display:flex;align-items:center;gap:8px} .article__meta svg{width:15px;height:15px;color:var(--c-accent)} .article__body h3{margin-top:var(--s7)} .article__body p{color:#C9CAD2} .article__body blockquote{ margin:var(--s7) 0;padding:var(--s5) var(--s6);border-left:3px solid var(--c-accent); background:var(--surface);font-size:18px;font-style:italic;color:var(--c-white); } .article__body ul{margin:var(--s4) 0;display:grid;gap:10px} .article__body ul li{position:relative;padding-left:22px;color:#C9CAD2} .article__body ul li::before{content:"";position:absolute;left:0;top:10px;width:8px;height:8px;background:var(--c-accent);transform:rotate(45deg)} .share{display:flex;align-items:center;gap:12px;margin-top:var(--s7);padding-top:var(--s5);border-top:1px solid var(--line)} .share span{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--txt-muted)} .pagination{display:flex;justify-content:center;gap:8px;margin-top:var(--s8)} .pagination a,.pagination span{ min-width:44px;height:44px;display:grid;place-items:center;padding:0 12px; border:1px solid var(--line);border-radius:var(--radius);font-size:14px;font-weight:600;transition:.3s var(--ease); } .pagination a:hover{border-color:var(--c-accent);color:var(--c-accent)} .pagination .is-active{background:var(--c-accent);color:#0A0A0C;border-color:var(--c-accent)} .news-layout{display:grid;grid-template-columns:1fr 320px;gap:var(--s8);align-items:start} .widget{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s5);margin-bottom:var(--s5)} .widget h4{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--c-accent);margin-bottom:var(--s4)} .widget__list li{padding:12px 0;border-bottom:1px solid var(--line);font-size:14px} .widget__list li:last-child{border-bottom:0;padding-bottom:0} .widget__list a:hover{color:var(--c-accent)} .widget__list small{display:block;font-size:11px;letter-spacing:.1em;color:var(--txt-muted);margin-top:4px} .tag-cloud{display:flex;flex-wrap:wrap;gap:8px} .tag-cloud a{padding:7px 13px;border:1px solid var(--line);border-radius:100px;font-size:12px;transition:.3s} .tag-cloud a:hover{border-color:var(--c-accent);color:var(--c-accent)} /* ---------- 25d. КОНТАКТИ ---------- */ .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s8);align-items:stretch} /* права колонка — flex, щоб карта дотягувалась до низу лівої */ .contact-grid > *{display:flex;flex-direction:column} .contact-grid .map--contacts{flex:1 1 auto} .contact-card{display:flex;gap:var(--s4);padding:var(--s5);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);transition:.35s var(--ease)} .contact-card:hover{border-color:rgba(255,193,7,.45);transform:translateY(-4px)} .contact-card__icon{width:44px;height:44px;flex:none;display:grid;place-items:center;background:rgba(255,193,7,.12);color:var(--c-accent);border-radius:var(--radius)} .contact-card__icon svg{width:20px;height:20px} .contact-card b{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--txt-muted);margin-bottom:4px;font-weight:600} .contact-card a,.contact-card span{font-size:16px;font-weight:600} /* ---------- 25e. СТОРІНКА 404 ---------- */ .err{ position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden; padding:calc(var(--header-h) + 60px) 0 80px; } .err::before{ content:"";position:absolute;inset:0; background:radial-gradient(70% 80% at 70% 40%,rgba(0,82,162,.32),transparent 62%), radial-gradient(55% 70% at 12% 25%,rgba(255,193,7,.10),transparent 62%); } .err::after{ content:"";position:absolute;inset:0;opacity:.5; background:repeating-linear-gradient(-62deg,transparent 0 64px,rgba(255,255,255,.03) 64px 66px); } .err .container{position:relative;z-index:2} .err__code{ display:flex;align-items:center;justify-content:center;gap:clamp(4px,1.5vw,18px); font-family:var(--f-display);font-size:clamp(110px,24vw,300px);line-height:.8; letter-spacing:.02em;margin-bottom:var(--s5); } .err__code span{ background:linear-gradient(180deg,#fff 6%,rgba(255,255,255,.18) 96%); -webkit-background-clip:text;background-clip:text;color:transparent; } .err__ball{ width:.86em;height:.86em;flex:none;color:var(--c-accent); animation:errBall 9s linear infinite; } @keyframes errBall{to{transform:rotate(360deg)}} .err__links{ display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3); margin-top:var(--s8);text-align:left; } .err__link{ display:flex;align-items:center;gap:12px;padding:16px 18px; background:var(--surface);border:1px solid var(--line);border-radius:var(--radius); font-size:14px;font-weight:600;transition:.35s var(--ease); } .err__link svg{width:18px;height:18px;color:var(--c-accent);flex:none} .err__link:hover{border-color:rgba(255,193,7,.45);background:var(--surface-2);transform:translateY(-4px)} /* ---------- 25f. КОНТЕНТ ЗВИЧАЙНОЇ СТОРІНКИ ---------- */ .article__body h2{font-size:clamp(28px,3.4vw,42px);margin-top:var(--s8)} .article__body h4{margin-top:var(--s6);margin-bottom:8px} .article__body > *:first-child{margin-top:0} .article__body a:not(.btn){color:var(--c-accent);text-decoration:underline;text-underline-offset:3px} .article__body a:not(.btn):hover{color:var(--c-white)} .article__body ol{margin:var(--s4) 0;display:grid;gap:10px;counter-reset:li} .article__body ol li{position:relative;padding-left:38px;color:#C9CAD2;counter-increment:li} .article__body ol li::before{ content:counter(li);position:absolute;left:0;top:0;width:26px;height:26px; display:grid;place-items:center;border-radius:50%; background:rgba(255,193,7,.13);color:var(--c-accent); font-family:var(--f-head);font-size:12px;font-weight:700; } .article__body hr{border:0;height:1px;background:var(--line);margin:var(--s7) 0} .article__body figure{margin:var(--s7) 0} .article__body figcaption{ margin-top:10px;font-size:13px;color:var(--txt-muted); padding-left:14px;border-left:2px solid var(--c-accent); } .article__body table{margin:var(--s5) 0} .article__body code{ font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.9em; background:var(--surface-2);border:1px solid var(--line);border-radius:3px;padding:2px 6px; } .callout{ display:flex;gap:var(--s4);padding:var(--s5);margin:var(--s6) 0; background:var(--surface);border:1px solid var(--line); border-left:3px solid var(--c-accent);border-radius:var(--radius); } .callout svg{width:22px;height:22px;color:var(--c-accent);flex:none;margin-top:2px} .callout p{font-size:15px;color:#C9CAD2} .callout b{color:var(--c-white);display:block;margin-bottom:4px} .callout--blue{border-left-color:var(--c-blue-lt)} .callout--blue svg{color:var(--c-blue-lt)} /* зміст сторінки */ .toc{ padding:var(--s5) var(--s6);margin-bottom:var(--s7); background:var(--surface);border:1px solid var(--line);border-radius:var(--radius); } .toc h4{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--c-accent);margin-bottom:var(--s4)} .toc ol{counter-reset:toc;display:grid;gap:8px} .toc li{counter-increment:toc;font-size:15px} .toc li::before{content:counter(toc) ". ";color:var(--txt-muted)} .toc a:hover{color:var(--c-accent)} /* ---------- 26. АДАПТИВ ---------- */ @media (max-width:1439px){ :root{--container:960px;--gutter:60px;--section:100px} .nav{gap:var(--s5)} } /* на вужчих ПК номер згортається в іконку — це звільняє ~110px під меню */ @media (max-width:1340px){ .header__phone{ width:40px;height:40px;justify-content:center;gap:0; border:1px solid var(--line);border-radius:50%; } .header__phone span{display:none} .header__phone:hover{border-color:var(--c-accent)} } @media (max-width:1200px){ .nav{gap:var(--s4)} .nav__link{font-size:12px} .footer__nav{gap:var(--s5)} } @media (max-width:1023px){ :root{--container:720px;--gutter:40px;--section:80px;--header-h:70px} /* на мобільних лишається лише бургер — соцмережі є в меню й на сторінці контактів */ .nav,.header__phone,.header__actions .btn,.socials--header{display:none} .burger{display:block} .hero__content{max-width:100%} .hero__badge{display:none} .hero__photo img{object-position:78% center} .hero__scroll{display:none} /* планшет: колонка ширшає, але фігура на фото ще праворуч */ .hero--landing .hero__content{max-width:min(72%,620px)} .g-4{grid-template-columns:repeat(2,1fr)} .g-3{grid-template-columns:repeat(2,1fr)} .arena__grid{grid-template-columns:1fr} .partners-grid{grid-template-columns:repeat(3,1fr)} .partner-bmw{--m-zone:36%} .partner-bmw__inner{padding:var(--s6);padding-right:calc(var(--m-zone) + var(--s4));min-height:200px} .partner-bmw__logo{width:96px;height:96px;padding:10px} .footer__row{flex-wrap:wrap;justify-content:center;gap:var(--s5);text-align:center} .footer__nav{justify-content:center;gap:var(--s5);order:3;flex:1 1 100%} .cta-band__inner{gap:var(--s5)} .sec-head--row{flex-direction:column;align-items:flex-start} .player-hero__grid{grid-template-columns:1fr;gap:var(--s7)} .player-hero__grid > div:first-child{max-width:420px} .news-layout{grid-template-columns:1fr} .contact-grid{grid-template-columns:1fr} .err__links{grid-template-columns:repeat(2,1fr)} .news-card__body{max-width:72%} } @media (max-width:767px){ :root{--gutter:20px;--section:60px} body{font-size:15px} .container{max-width:100%} .g-2,.g-3,.g-4{grid-template-columns:1fr} .stats{gap:var(--s6);justify-content:space-between} .hero__bg::after{background:linear-gradient(180deg,rgba(10,10,12,.8) 0%,rgba(10,10,12,.72) 45%,rgba(10,10,12,.95) 100%)} .hero__photo::after{font-size:10px;letter-spacing:.14em} /* мобільний лендінг: контент на всю ширину, фігура йде вниз-праворуч під нього */ /* safe center: якщо вміст раптом вищий за екран, він не поїде вгору за межу видимості, а притиснеться до верху — верхівку не зріже */ .hero--landing{padding:calc(var(--header-h) + 10px) 0 14px;align-items:center;align-items:safe center} .hero--landing .hero__content{max-width:100%;gap:clamp(6px,1vh,12px)} .hero--landing .hero__title{font-size:clamp(30px,10vw,46px)} .hero--landing .hero__text{font-size:13px;line-height:1.45} .hero__logo img{height:clamp(90px,14vh,150px)} .hero--landing .hero__photo img{object-position:82% top} .hero-news__head{margin-bottom:8px} .hero-news__head span,.hero-news__head .link-all{white-space:nowrap;font-size:11px} /* новини стають вертикальним слайдером: видно 2 картки, гортання вгору-вниз. Посилання ховаємо — уся картка й так клікабельна, а так вона нижча. */ .hero-news .swiper{height:150px} .hero-news__card{padding:11px 12px} .hero-news__title{font-size:13px;margin-bottom:0} .hero-news__more{display:none} /* на вужчій ширині — самі лише розміри, розкладка (BMW зверху + ряд комірок під ним) уже базова для всіх ширин */ .hero-partners{gap:8px} .hero-partners__rest{gap:8px} .hero-partners__tile{min-width:0;max-width:170px;padding:6px;min-height:46px} .hero-partners__tile img{max-height:34px} .hero-partners__tile span{font-size:13px;letter-spacing:0} .hero-partners__logo{width:38px;height:38px;padding:5px;margin-right:12px} .hero-partners__txt i{font-size:20px} /* блок вужчий — звужуємо смуги й лишаємо зазор, щоб напис до них не притикався */ .hero-partners__bmw .m-stripes{width:44%} .hero-partners__txt{padding-right:10px} .partner-bmw__logo{width:88px;height:88px} .partners-grid{grid-template-columns:repeat(2,1fr)} .form__row{grid-template-columns:1fr} .footer__nav{gap:var(--s4);font-size:12px} .footer__nav a{font-size:12px} .footer__legal{justify-content:center;text-align:center;gap:6px} .cta-band__inner{flex-direction:column;align-items:flex-start;padding:22px 20px;gap:var(--s4)} .cta-band .btn{width:100%} .arena__gallery{grid-auto-rows:100px} .marquee__item{font-size:20px} /* мобільна: вузька вертикальна зона зробила б з M-емблеми пляму, тому смуги кладемо стрічкою в край знизу, лого — по її центру */ .partner-bmw__inner{ padding:var(--s5);padding-right:var(--s5); padding-bottom:calc(var(--s5) + 128px);min-height:0; } .partner-bmw__text{max-width:none!important} .partner-bmw__label{letter-spacing:.16em;margin-bottom:6px} .partner-bmw__name{font-size:clamp(34px,12vw,52px)} .partner-bmw__slogan{font-size:14px} /* селектор обов'язково скоупити на .partner-bmw: без цього правило перехоплювало і міні-блок партнера в hero, кладучи смуги під текст */ .partner-bmw .m-stripes{left:0;right:0;width:auto;top:auto;bottom:0;height:128px} .partner-bmw .m-stripes img{object-position:center} .partner-bmw__logo{ top:auto;bottom:64px;right:50%;transform:translate(50%,50%); width:86px;height:86px;padding:9px; } .timeline{padding-left:var(--s6)} .tl-item::before{left:calc(var(--s6)*-1 + 2px)} .pspecs{grid-template-columns:repeat(2,1fr)} .player-hero__ghost{font-size:64vw;top:auto;bottom:0} .article__body blockquote{padding:var(--s4) var(--s5);font-size:16px} .err__links{grid-template-columns:1fr} .err__code{gap:2px} .toc{padding:var(--s5)} .callout{padding:var(--s4);gap:var(--s3)} .news-card{min-height:170px} .news-card__body{max-width:78%;padding:20px} .news-card__media::after{background:linear-gradient(90deg,var(--surface) 24%,rgba(21,22,28,.95) 50%,rgba(21,22,28,.45) 82%,rgba(21,22,28,.12) 100%)} } /* типові ноутбучні 768px заввишки: відколи партнери стали двома рядками (BMW зверху + комірки під ним), їм на таких екранах бракує кількох пікселів — компенсуємо тільки цей блок і загальний міжрядковий відступ. */ @media (max-height:840px){ .hero--landing .hero__content{gap:clamp(6px,1vh,12px)} .hero-partners{gap:8px} .hero-partners__bmw{min-height:60px} .hero-partners__tile{padding:6px} .hero-partners__tile img{max-height:34px} .hero-partners__logo{width:44px;height:44px;padding:5px;margin-right:14px} .hero-partners__txt i{font-size:19px} } /* низькі екрани (ландшафт телефона, нетбуки) — ще щільніше, щоб лендінг гарантовано лишався в межах одного екрана */ @media (max-height:680px){ .hero--landing{padding-top:calc(var(--header-h) + 8px);padding-bottom:12px} .hero--landing .hero__content{gap:8px} .hero__logo img{height:clamp(80px,13vh,140px)} .hero--landing .hero__title{font-size:clamp(28px,4.6vw,46px)} .hero-news__head{margin-bottom:6px} .hero-news__card{padding:10px 12px} .hero-news__title{font-size:12.5px;margin-bottom:6px} .hero-partners__bmw{min-height:54px} } /* опис ховаємо лише там, де висоти справді бракує (ландшафт, дуже низькі екрани) */ @media (max-height:600px){ .hero--landing .hero__text{display:none} .hero-news .swiper{height:132px} } @media (max-height:520px){ .hero--landing .hero__slogan{display:none} .hero-news__head{display:none} } /* ландшафт телефона — найжорсткіший бюджет висоти */ @media (max-height:480px){ .hero--landing{padding-top:calc(var(--header-h) + 6px);padding-bottom:10px} .hero--landing .hero__content{gap:6px} .hero__logo img{height:56px} .hero--landing .hero__title{font-size:clamp(24px,3.6vw,36px)} .hero--landing .hero__title .l2{font-size:.5em} .hero-news__card{padding:8px 10px} .hero-news__date{margin-bottom:3px} .hero-news__title{font-size:12px;margin-bottom:5px;-webkit-line-clamp:1} .hero-partners__bmw{min-height:46px} .hero-partners__logo{width:34px;height:34px;padding:4px} .hero-partners__tile{min-width:64px;padding:5px;min-height:40px} .hero-partners__tile img{max-height:28px} .hero-partners__tile span{font-size:12px;letter-spacing:0} .hero-partners__txt i{font-size:18px} .hero-news .swiper{height:auto} } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} [data-reveal]{opacity:1;transform:none} }