/* ========================================================= MAFIA.GE — HOMEPAGE / FOUR BLOCKS ONLY Online + Dynamic News + GI2GI/YouTube + Tbilisi Cup ========================================================= */ .online-mafia-promo, .news-home-block, .mh-youtube-block, .tournament-banner { --mh-red: #df3029; --mh-red-hover: #f13a32; --mh-card: #181818; --mh-card-soft: #1d1d1d; --mh-text: #fff; --mh-muted: #b7b7b7; --mh-border: rgba(255,255,255,.09); --mh-shadow: 0 20px 55px rgba(0,0,0,.24); box-sizing: border-box; } .online-mafia-promo *, .news-home-block *, .mh-youtube-block *, .tournament-banner *, .online-mafia-promo *::before, .news-home-block *::before, .mh-youtube-block *::before, .tournament-banner *::before, .online-mafia-promo *::after, .news-home-block *::after, .mh-youtube-block *::after, .tournament-banner *::after { box-sizing: border-box; } /* საერთო ღილაკი — მხოლოდ ოთხივე ბლოკის შიგნით */ .online-mafia-promo .red-button, .news-home-block .red-button, .mh-youtube-block .red-button, .tournament-banner .red-button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 11px 19px; border: 0; border-radius: 7px; background: var(--mh-red); color: #fff; font-size: 14px; font-weight: 700; line-height: 1.2; text-decoration: none; transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease; } .online-mafia-promo .red-button:hover, .news-home-block .red-button:hover, .mh-youtube-block .red-button:hover, .tournament-banner .red-button:hover { background: var(--mh-red-hover); box-shadow: 0 10px 25px rgba(223,48,41,.24); transform: translateY(-2px); } .online-mafia-promo .red-button img, .news-home-block .red-button img, .mh-youtube-block .red-button img, .tournament-banner .red-button img { width: 16px; height: 16px; object-fit: contain; transition: transform .2s ease; } .online-mafia-promo .red-button:hover img, .news-home-block .red-button:hover img, .mh-youtube-block .red-button:hover img, .tournament-banner .red-button:hover img { transform: translateX(3px); } /* ========================================================= 1. ONLINE ========================================================= */ .online-mafia-promo { width: calc(100% - 36px); max-width: 1180px; margin: 28px auto; } .online-mafia-promo__card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 34%); align-items: center; min-height: 300px; overflow: hidden; border: 1px solid var(--mh-border); border-radius: 14px; background: radial-gradient( circle at 82% 30%, rgba(223,48,41,.18), transparent 38% ), linear-gradient(135deg, #1c1c1c 0%, #121212 100%); box-shadow: var(--mh-shadow); } .online-mafia-promo__glow { position: absolute; top: -160px; right: -110px; width: 420px; height: 420px; border-radius: 50%; background: rgba(223,48,41,.1); filter: blur(60px); pointer-events: none; } .online-mafia-promo__content { position: relative; z-index: 2; padding: 46px 50px; } .online-mafia-promo__eyebrow { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; color: var(--mh-red); font-size: 12px; font-weight: 800; line-height: 1.3; letter-spacing: .08em; text-transform: uppercase; } .online-mafia-promo__eyebrow img { width: 18px; height: 18px; } .online-mafia-promo__title { max-width: 650px; margin: 0; color: var(--mh-text); font-size: clamp(26px, 3vw, 42px); font-weight: 800; line-height: 1.16; letter-spacing: -.03em; } .online-mafia-promo__text { max-width: 570px; margin: 15px 0 0; color: var(--mh-muted); font-size: 15px; line-height: 1.7; } .online-mafia-promo__actions { margin-top: 24px; } .online-mafia-promo__visual { position: relative; z-index: 1; display: flex; align-self: stretch; align-items: center; justify-content: center; padding: 35px; } .online-mafia-promo__visual img { display: block; width: min(100%, 265px); max-height: 250px; object-fit: contain; filter: drop-shadow(0 25px 30px rgba(0,0,0,.38)); } /* ========================================================= 2. LATEST DYNAMIC NEWS არსებული server-side მონაცემები სრულად რჩება ========================================================= */ .about-us.container.news-home-block { width: calc(100% - 36px); max-width: 1180px; margin: 28px auto; padding: 0; overflow: hidden; border: 1px solid var(--mh-border); border-radius: 14px; background: var(--mh-card); box-shadow: var(--mh-shadow); } .news-home-block .content { display: grid; grid-template-columns: minmax(0, 1fr) minmax(330px, 44%); align-items: stretch; min-height: 370px; } .news-home-block .desc { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-width: 0; padding: 44px 48px; } .news-home-block .news-date { display: block; margin-bottom: 11px; color: var(--mh-red); font-size: 12px; font-weight: 800; line-height: 1.3; letter-spacing: .04em; } .news-home-block .title { display: block; margin: 0; color: var(--mh-text); font-size: clamp(23px, 2.5vw, 35px); font-weight: 800; line-height: 1.24; letter-spacing: -.025em; } .news-home-block .text { display: -webkit-box; max-width: 630px; margin: 16px 0 0; overflow: hidden; color: var(--mh-muted); font-size: 15px; line-height: 1.7; -webkit-box-orient: vertical; -webkit-line-clamp: 4; } .news-home-block .news-home-cta { margin-top: 25px; } .news-home-block .news-home-image.hide-mob { display: block; width: 100%; height: 100%; min-height: 370px; object-fit: cover; object-position: center; } .news-home-block .news-home-image.show-mob { display: none; } /* ========================================================= 3. GI2GI / YOUTUBE .mh-youtube-block კლასს ქვემოთ არსებული JS ამატებს ========================================================= */ .about-us.container.mh-youtube-block { width: calc(100% - 36px); max-width: 1180px; margin: 28px auto; padding: 0; overflow: hidden; border: 1px solid var(--mh-border); border-radius: 14px; background: var(--mh-card-soft); box-shadow: var(--mh-shadow); } .mh-youtube-block .content { display: grid; grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr); align-items: center; gap: 42px; padding: 44px 48px; } .mh-youtube-block .desc { min-width: 0; } .mh-youtube-block .social-wrapper { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-bottom: 17px; } .mh-youtube-block .social-wrapper a { text-decoration: none; } .mh-youtube-block .social-wrapper .red { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 8px 12px; border-radius: 6px; background: rgba(223,48,41,.13); color: var(--mh-red); font-size: 13px; font-weight: 800; } .mh-youtube-block .social-wrapper .red img { width: 19px; height: 19px; } .mh-youtube-block .social-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--mh-border); border-radius: 50%; background: rgba(255,255,255,.04); transition: border-color .2s ease, background-color .2s ease, transform .2s ease; } .mh-youtube-block .social-btn:hover { border-color: rgba(223,48,41,.5); background: rgba(223,48,41,.12); transform: translateY(-2px); } .mh-youtube-block .social-btn img { width: 17px; height: 17px; object-fit: contain; } .mh-youtube-block .title { display: block; color: var(--mh-text); font-size: clamp(23px, 2.5vw, 35px); font-weight: 800; line-height: 1.24; letter-spacing: -.025em; } .mh-youtube-block .text { margin: 16px 0 0; color: var(--mh-muted); font-size: 15px; line-height: 1.7; } .mh-youtube-block .desc > .red-button { margin-top: 24px; } .mh-youtube-block iframe { display: block; width: 100%; aspect-ratio: 16 / 9; min-height: 0; border: 0; border-radius: 10px; background: #0b0b0b; box-shadow: 0 15px 35px rgba(0,0,0,.3); } .mh-youtube-block .content > .red-button.show-mob { display: none; } /* ========================================================= 4. TBILISI CUP ========================================================= */ .tournament-banner { position: relative; width: calc(100% - 36px); max-width: 1180px; min-height: 350px; margin: 28px auto; overflow: hidden; border: 1px solid var(--mh-border); border-radius: 14px; background: #151515; box-shadow: var(--mh-shadow); isolation: isolate; } .tournament-banner > .banner { position: absolute; inset: 0; z-index: -2; display: block; width: 100%; height: 100%; object-fit: cover; } .tournament-banner::after { position: absolute; inset: 0; z-index: -1; content: ""; background: linear-gradient( 90deg, rgba(13,13,13,.97) 0%, rgba(13,13,13,.88) 43%, rgba(13,13,13,.26) 100% ); pointer-events: none; } .tournament-banner .left { position: relative; z-index: 2; display: flex; min-height: 350px; max-width: 670px; flex-direction: column; align-items: flex-start; justify-content: center; padding: 45px 50px; } .tournament-banner .title { display: block; margin: 0; color: var(--mh-text); font-size: clamp(25px, 3vw, 40px); font-weight: 800; line-height: 1.2; letter-spacing: -.03em; } .tournament-banner .title b { color: var(--mh-red); font-weight: 900; } .tournament-banner .text { max-width: 610px; margin-top: 17px; color: var(--mh-muted); font-size: 15px; line-height: 1.7; } .tournament-banner .left .red-button { margin-top: 25px; } .tournament-banner .cup { position: absolute; right: 4%; bottom: 0; z-index: 1; width: min(31%, 315px); max-height: 92%; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 24px 25px rgba(0,0,0,.38)); } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 900px) { .online-mafia-promo__card { grid-template-columns: minmax(0, 1fr) 220px; } .online-mafia-promo__content { padding: 38px 36px; } .news-home-block .content { grid-template-columns: minmax(0, 1fr) minmax(280px, 42%); } .news-home-block .desc { padding: 38px 36px; } .mh-youtube-block .content { grid-template-columns: 1fr; gap: 30px; padding: 38px 36px; } .mh-youtube-block iframe { max-width: 720px; } .tournament-banner .left { max-width: 64%; padding: 40px 36px; } .tournament-banner .cup { right: 1%; width: 34%; } } @media (max-width: 680px) { .online-mafia-promo, .about-us.container.news-home-block, .about-us.container.mh-youtube-block, .tournament-banner { width: calc(100% - 28px); margin-top: 20px; margin-bottom: 20px; border-radius: 11px; } .online-mafia-promo__card { display: block; min-height: 0; } .online-mafia-promo__content { padding: 30px 24px; } .online-mafia-promo__visual { position: absolute; right: -35px; bottom: -36px; width: 190px; height: 190px; padding: 25px; opacity: .18; } .online-mafia-promo__title { max-width: 440px; font-size: 27px; } .online-mafia-promo__text { max-width: 75%; font-size: 14px; } .news-home-block .content { display: flex; min-height: 0; flex-direction: column; } .news-home-block .news-home-image.show-mob { display: block; width: 100%; height: 230px; object-fit: cover; object-position: center; } .news-home-block .news-home-image.hide-mob { display: none; } .news-home-block .desc { padding: 27px 24px 30px; } .news-home-block .title, .mh-youtube-block .title { font-size: 24px; } .news-home-block .text, .mh-youtube-block .text { font-size: 14px; line-height: 1.65; } .mh-youtube-block .content { display: flex; flex-direction: column; gap: 24px; padding: 28px 24px 30px; } .mh-youtube-block .desc > .red-button { display: none; } .mh-youtube-block .content > .red-button.show-mob { display: inline-flex; align-self: flex-start; margin: 0; } .mh-youtube-block iframe { width: 100%; border-radius: 8px; } .tournament-banner { min-height: 430px; } .tournament-banner > .banner.hide-mob { display: none; } .tournament-banner > .banner.show-mob { display: block; } .tournament-banner::after { background: linear-gradient( 180deg, rgba(13,13,13,.95) 0%, rgba(13,13,13,.84) 58%, rgba(13,13,13,.5) 100% ); } .tournament-banner .left { min-height: 430px; max-width: 100%; justify-content: flex-start; padding: 30px 24px 170px; } .tournament-banner .title { max-width: 440px; font-size: 27px; } .tournament-banner .text { font-size: 14px; line-height: 1.65; } .tournament-banner .cup { right: 8px; bottom: -10px; width: 175px; max-height: 180px; opacity: .92; } } @media (max-width: 390px) { .online-mafia-promo__content, .news-home-block .desc, .mh-youtube-block .content, .tournament-banner .left { padding-left: 20px; padding-right: 20px; } .online-mafia-promo__text { max-width: 100%; } } @media (prefers-reduced-motion: reduce) { .online-mafia-promo .red-button, .news-home-block .red-button, .mh-youtube-block .red-button, .tournament-banner .red-button, .mh-youtube-block .social-btn { transition: none; } } /* * მხოლოდ GI2GI/YouTube ბლოკის იზოლირებული ამოცნობა. * არ ცვლის ტექსტს, iframe-ს, ბმულებს ან server-side მონაცემებს. */ (function () { function markMafiaHomeBlocks() { document .querySelectorAll('.about-us.container') .forEach(function (block) { if ( !block.classList.contains('news-home-block') && block.querySelector('iframe[src*="youtube.com/embed/"]') ) { block.classList.add('mh-youtube-block'); } }); } if (document.readyState === 'loading') { document.addEventListener( 'DOMContentLoaded', markMafiaHomeBlocks, { once: true } ); } else { markMafiaHomeBlocks(); } })();