/* ============================================================================ gbu-board.css — ВИТРИНА «TALLY BOARD», gamblingbet.co.uk, префикс gbuv- Этап 08. Подключается ТОЛЬКО на страницах, где витрина реально стоит (иначе C11.4 читает имя файла в обзора как витрину на обзоре). Секции: 1 токены · 2 рамка · 3 шапка и свежесть · 4 полоса фильтров 5 строка · 6 плитка знака · 7 оффер и кнопка · 8 разворот · 9 узкая колонка 10 телефон · 11 тогглы (хвост → показать все → фильтры) · 12 защита от каркаса ========================================================================= */ /* --- 1 токены ------------------------------------------------------------ */ .gbuv-wrap{ --gbuv-ink:#131b24; --gbuv-mute:#5b6a79; --gbuv-line:#d6dee6; --gbuv-rule:#eef2f6; --gbuv-go:#0a7c62; --gbuv-go-d:#086450; --gbuv-amber:#c8871a; --gbuv-notch:#16202c; --gbuv-tile-h:88px; --gbuv-tile-w:186px; container-type:inline-size; container-name:gbuv; } /* --- 2 рамка ------------------------------------------------------------- */ body.gbu .gbuv-wrap{ display:block; grid-column:1 / -1; flex:1 1 100%; width:100%; max-width:none; margin:26px 0 30px; padding:0; text-align:left; box-sizing:border-box; } body.gbu .gbuv-wrap *{box-sizing:border-box} body.gbu .gbuv-list{margin:0;padding:0;list-style:none;counter-reset:none} body.gbu .gbuv-list > li{margin:0 0 9px;padding:0;list-style:none} body.gbu .gbuv-list > li::before, body.gbu .gbuv-list > li::after{content:none !important;display:none !important} body.gbu .gbuv-wrap details{margin:0;padding:0} body.gbu .gbuv-wrap summary{display:block;list-style:none;cursor:pointer} body.gbu .gbuv-wrap summary::-webkit-details-marker{display:none} body.gbu .gbuv-wrap input.gbuv-f, body.gbu .gbuv-wrap input.gbuv-more{position:fixed;top:0;left:0;width:1px;height:1px;opacity:0;pointer-events:none} /* --- 3 шапка витрины и строка свежести ----------------------------------- */ body.gbu .gbuv-h{ margin:0 0 6px;font-size:23px;line-height:1.24;letter-spacing:-.01em; color:var(--gbuv-ink);font-weight:700; } body.gbu .gbuv-lead{margin:0 0 10px;font-size:15px;line-height:1.6;color:var(--gbuv-mute)} body.gbu .gbuv-fresh{ margin:0 0 12px;padding:7px 12px;font-size:12.5px;line-height:1.4;color:var(--gbuv-mute); background:#f4f7fa;border-left:3px solid var(--gbuv-amber);border-radius:0 6px 6px 0; } body.gbu .gbuv-fresh time{color:var(--gbuv-ink);font-weight:600} /* --- 4 полоса фильтров --------------------------------------------------- */ body.gbu .gbuv-bar{ display:flex;flex-wrap:nowrap;overflow-x:auto;gap:7px;align-items:center; margin:0 0 12px;padding:2px 0 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch; } body.gbu .gbuv-bar::-webkit-scrollbar{display:none} body.gbu .gbuv-bar-t{flex:0 0 auto;font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--gbuv-mute)} body.gbu .gbuv-chip{ flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;cursor:pointer; padding:6px 12px;font-size:13px;line-height:1.2;color:var(--gbuv-ink); background:#fff;border:1px solid var(--gbuv-line);border-radius:999px; } body.gbu .gbuv-chip::before{ content:"";width:11px;height:11px;border:1.5px solid #9fb0c0;border-radius:3px;background:#fff; } body.gbu .gbuv-chip:hover{border-color:#b6c3cf} /* --- 5 строка ------------------------------------------------------------ */ body.gbu .gbuv-list > li.gbuv-row{ display:grid; grid-template-columns:54px var(--gbuv-tile-w) minmax(0,1fr) minmax(0,1.05fr) 176px; grid-template-areas:"rk tile id of go" "dt dt dt dt dt"; align-items:center;gap:0 16px; /* ⛔ 08.18a: свой размер шрифта на СТРОКЕ, иначе она наследует типографику каркаса (`main li{font-size:17px;line-height:1.72}`) и раздувается вдвое против эталона */ font-size:15px;line-height:1.45; padding:11px 14px 11px 0; background:#fff;border:1px solid var(--gbuv-line);border-radius:10px; box-shadow:0 1px 0 rgba(19,27,36,.04); } body.gbu .gbuv-list > li.gbuv-row.gbuv-top{border-color:#c9d6d1;box-shadow:0 2px 0 rgba(10,124,98,.12)} body.gbu .gbuv-rk{ grid-area:rk;align-self:stretch;display:flex;flex-direction:column;justify-content:center;align-items:center; gap:3px;margin:-11px 0;padding:0 2px;border-radius:9px 0 0 9px; background:var(--gbuv-notch);color:#fff; } body.gbu .gbuv-rk b{font-size:17px;font-weight:700;line-height:1} body.gbu .gbuv-rk i{font-style:normal;font-size:11px;line-height:1;color:var(--gbuv-amber);letter-spacing:.02em} /* --- 6 плитка знака ------------------------------------------------------ */ body.gbu a.gbuv-tile{ grid-area:tile;display:flex;align-items:center;justify-content:center; width:var(--gbuv-tile-w);height:var(--gbuv-tile-h);padding:8px; border:1px solid var(--gbuv-line);border-radius:8px;text-decoration:none; float:none;position:static;margin:0; } body.gbu a.gbuv-tile img{ max-width:100% !important;max-height:100% !important;width:auto !important;height:auto !important; float:none !important;position:static !important;margin:0 !important;object-fit:contain; } body.gbu .gbuv-t-paper{background:#fff} body.gbu .gbuv-t-graphite{background:#16202c;border-color:#16202c} body.gbu .gbuv-t-mid{background:#7c8a98;border-color:#7c8a98} /* --- 7 имя, чипы, оффер, кнопка ------------------------------------------ */ body.gbu .gbuv-id{grid-area:id;min-width:0} body.gbu .gbuv-nm{display:block;font-size:16.5px;font-weight:700;color:var(--gbuv-ink);line-height:1.25;margin:0 0 5px} body.gbu .gbuv-tags{display:flex;flex-wrap:wrap;gap:5px} body.gbu .gbuv-tag{ display:inline-block;padding:3px 8px;font-size:11.5px;line-height:1.35;color:#2c3b4a; border:1px solid var(--gbuv-line);border-radius:5px;background:#f7fafc; } body.gbu .gbuv-tag-key{border-color:#bcd6cd;background:#effaf5;color:#0a5b48} body.gbu .gbuv-of{grid-area:of;min-width:0;padding:0 4px} body.gbu .gbuv-sum{display:block;font-size:15.5px;font-weight:700;color:var(--gbuv-ink);line-height:1.35;word-break:break-word} body.gbu .gbuv-terms{ display:block;margin-top:6px;padding-top:6px;font-size:12.5px;line-height:1.5;color:var(--gbuv-mute); border-top:1px dashed #dfd0b4; } body.gbu .gbuv-go{grid-area:go;display:flex;flex-direction:column;align-items:stretch;gap:6px;padding:0 2px} body.gbu a.gbuv-cta{ display:block;padding:11px 10px;text-align:center;text-decoration:none; font-size:14.5px;font-weight:700;line-height:1.15;color:#fff !important; background:var(--gbuv-go);border-radius:7px; } body.gbu a.gbuv-cta:hover{background:var(--gbuv-go-d);color:#fff !important} body.gbu .gbuv-age{display:block;text-align:center;font-size:11px;line-height:1.3;color:var(--gbuv-mute)} body.gbu a.gbuv-rev{display:block;text-align:center;font-size:12px;color:var(--gbuv-go) !important;text-decoration:underline} /* --- 8 разворот «что проверили» ------------------------------------------ */ body.gbu .gbuv-dt{grid-area:dt;width:100%;margin-top:9px;border-top:1px solid var(--gbuv-rule);padding-top:8px} body.gbu .gbuv-dt summary{ display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--gbuv-ink); } body.gbu .gbuv-dt summary::before{ content:"";width:7px;height:7px;border-right:1.5px solid var(--gbuv-mute);border-bottom:1.5px solid var(--gbuv-mute); transform:rotate(45deg);margin-bottom:2px; } body.gbu .gbuv-dt[open] summary::before{transform:rotate(225deg);margin-bottom:-2px} body.gbu .gbuv-dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px 18px;margin:10px 0 2px} body.gbu .gbuv-dl div{min-width:0;font-size:12.5px;line-height:1.5} body.gbu .gbuv-dl dt{display:inline;color:var(--gbuv-mute);margin:0} body.gbu .gbuv-dl dd{display:inline;margin:0 0 0 4px;color:var(--gbuv-ink)} body.gbu .gbuv-src{display:block;margin-top:8px;font-size:11.5px;color:var(--gbuv-mute)} /* --- 9 узкая колонка: считаем ширину САМОЙ витрины, а не окна ------------- */ @container gbuv (max-width:860px){ body.gbu .gbuv-list > li.gbuv-row{ grid-template-columns:48px 148px minmax(0,1fr); grid-template-areas:"rk tile id" "rk of of" "go go go" "dt dt dt"; gap:8px 12px; } body.gbu .gbuv-wrap{--gbuv-tile-w:148px;--gbuv-tile-h:76px} body.gbu .gbuv-of{padding:0} body.gbu a.gbuv-cta{padding:12px 10px} } @container gbuv (max-width:560px){ body.gbu .gbuv-list > li.gbuv-row{ grid-template-columns:44px minmax(0,1fr); grid-template-areas:"rk tile" "id id" "of of" "go go" "dt dt"; /* полоса 150–290: на телефоне строка складывается в пять рядов, поэтому зазор и поля режем до минимума, а плитку — до 48px (08.18) */ gap:6px 10px; padding:9px 10px 9px 0; } body.gbu .gbuv-wrap{--gbuv-tile-w:100%;--gbuv-tile-h:48px} body.gbu .gbuv-dt{margin-top:5px;padding-top:5px} body.gbu a.gbuv-cta{padding:10px 10px} body.gbu a.gbuv-tile{width:100%} body.gbu .gbuv-rk{margin:-11px 0} body.gbu .gbuv-tags .gbuv-tag:nth-child(n+3){display:none} } /* --- 10 телефон: старые браузеры без @container -------------------------- */ @media (max-width:560px){ body.gbu .gbuv-h{font-size:20px} body.gbu .gbuv-sum{font-size:14.5px} body.gbu .gbuv-terms{margin-top:4px;padding-top:4px;font-size:12px} body.gbu .gbuv-dt{margin-top:7px;padding-top:6px} body.gbu .gbuv-lead{font-size:14.5px} body.gbu .gbuv-tag-hide{display:none} body.gbu .gbuv-dl{grid-template-columns:1fr} } /* --- 11 тогглы: хвост → показать все → фильтры (порядок обязателен) ------- */ body.gbu .gbuv-all{ display:block;margin:2px 0 12px;padding:11px 14px;text-align:center;cursor:pointer; font-size:13.5px;font-weight:600;color:var(--gbuv-ink); background:#f4f7fa;border:1px solid var(--gbuv-line);border-radius:8px; } body.gbu .gbuv-all .gbuv-less{display:none} body.gbu .gbuv-note{margin:0;font-size:12px;line-height:1.55;color:var(--gbuv-mute)} #gbuv-1 .gbuv-list > li.gbuv-hid, #gbuv-2 .gbuv-list > li.gbuv-hid{display:none} #gbuv-1:has(.gbuv-more:checked) .gbuv-list > li.gbuv-hid, #gbuv-2:has(.gbuv-more:checked) .gbuv-list > li.gbuv-hid{display:grid} #gbuv-1:has(.gbuv-more:checked) .gbuv-all .gbuv-more-t, #gbuv-2:has(.gbuv-more:checked) .gbuv-all .gbuv-more-t{display:none} #gbuv-1:has(.gbuv-more:checked) .gbuv-all .gbuv-less, #gbuv-2:has(.gbuv-more:checked) .gbuv-all .gbuv-less{display:inline} #gbuv-1:has(#gbuv-1-f-a:checked) .gbuv-list > li:not(.gbuv-a), #gbuv-2:has(#gbuv-2-f-a:checked) .gbuv-list > li:not(.gbuv-a){display:none} #gbuv-1:has(#gbuv-1-f-b:checked) .gbuv-list > li:not(.gbuv-b), #gbuv-2:has(#gbuv-2-f-b:checked) .gbuv-list > li:not(.gbuv-b){display:none} #gbuv-1:has(#gbuv-1-f-c:checked) .gbuv-list > li:not(.gbuv-c), #gbuv-2:has(#gbuv-2-f-c:checked) .gbuv-list > li:not(.gbuv-c){display:none} #gbuv-1:has(#gbuv-1-f-a:checked) .gbuv-chip-a, #gbuv-2:has(#gbuv-2-f-a:checked) .gbuv-chip-a, #gbuv-1:has(#gbuv-1-f-b:checked) .gbuv-chip-b, #gbuv-2:has(#gbuv-2-f-b:checked) .gbuv-chip-b, #gbuv-1:has(#gbuv-1-f-c:checked) .gbuv-chip-c, #gbuv-2:has(#gbuv-2-f-c:checked) .gbuv-chip-c{border-color:var(--gbuv-go);background:#effaf5} #gbuv-1:has(#gbuv-1-f-a:checked) .gbuv-chip-a::before, #gbuv-2:has(#gbuv-2-f-a:checked) .gbuv-chip-a::before, #gbuv-1:has(#gbuv-1-f-b:checked) .gbuv-chip-b::before, #gbuv-2:has(#gbuv-2-f-b:checked) .gbuv-chip-b::before, #gbuv-1:has(#gbuv-1-f-c:checked) .gbuv-chip-c::before, #gbuv-2:has(#gbuv-2-f-c:checked) .gbuv-chip-c::before{background:var(--gbuv-go);border-color:var(--gbuv-go)} /* --- 12 защита от раскладки каркаса -------------------------------------- */ body.gbu div:not(.gbu-sheet):not(.gbu-art):has(> .gbuv-wrap), body.gbu section:has(> .gbuv-wrap){display:block !important;float:none !important;width:100% !important;max-width:none !important} body.gbu .gbu-art > .gbuv-wrap{clear:both} /* --- 12: НА ТЕЛЕФОНЕ ФИЛЬТРЫ ПЕРЕНОСЯТСЯ, А НЕ УЕЗЖАЮТ ЗА КРАЙ ------------ Полоса чипов была flex-nowrap + overflow-x:auto: на 375 px видно подпись и полтора чипа, остальные фильтры существуют, но читатель о них не знает. До 640 px даём перенос и снимаем горизонтальную прокрутку. */ @media (max-width:640px){ body.gbu .gbuv-bar{flex-wrap:wrap;overflow-x:visible;row-gap:7px} body.gbu .gbuv-bar-t{flex:1 0 100%;margin:0 0 2px} body.gbu .gbuv-chip{white-space:normal} }