/* ============================================================= css/rating.css — ebmco.sk Расширенная карточка site-brand-bonus. Вне бандла (assets/css/bundle.min.css инлайнится в через includes/inline-css.php), подключается отдельным после него, с ?v=filemtime. Блок стоит в секции .bg-primary, поэтому карточка белая и непрозрачная, с заметной тенью. Палитра от темы: кнопка #579AFD, глубокий синий #2F6BE0. Правила темы объявлены с большей специфичностью, поэтому все структурные селекторы пишем через body, а сброс типографики делаем через :where() и БЕЗ margin/padding — иначе он снимает собственные отступы блока. ============================================================= */ .ebm-list{ --ebmInk:#16202B; --ebmBlue:#2F6BE0; --ebmBlue2:#579AFD; --ebmSoft:#F2F6FF; --ebmLine:#E4EAF5; --ebmMuted:#65748A; --ebmText:#3A4757; --ebmStar:#F2B33D; display:grid; gap:18px; margin:0 0 6px; text-align:left; } /* ---------- сброс типографики темы ---------- */ body .ebm-card :where(p, ul, ol, li, dl, dt, dd, div, span, code, h2, h3, h4, a, strong, b, i, em, small){ font-size:inherit; line-height:inherit; color:inherit; letter-spacing:normal; font-family:inherit; text-transform:none; text-align:inherit; } /* тема может красить и добивать паддингом голые инлайновые теги внутри секции — фон и отступы внутри карточки гасим отдельно; собственные подложки заданы селекторами вида `body .ebm-card .ebm-x` и перебивают этот сброс по специфичности */ body .ebm-card :where(span, b, i, em, small, code){ background:none; padding:0; border-radius:0; } body .ebm-card :where(ul, ol){list-style:none} body .ebm-card :where(img){max-width:100%;height:auto} body .ebm-card :where(a){text-decoration:none} /* отступы гасим только у контента, приехавшего из Strapi */ body .ebm-card .ebm-offer__main :where(p, div, span, ul, ol, li), body .ebm-card .ebm-offer__special :where(p, div, span, ul, ol, li), body .ebm-card .ebm-feat :where(p, div, span, ul, ol, li), body .ebm-card .ebm-rg__txt :where(p, div, span){ margin:0; padding:0; } body .ebm-card .ebm-stats, body .ebm-card .ebm-pay, body .ebm-card .ebm-stat, body .ebm-card .ebm-pay li, body .ebm-card .ebm-name{margin:0} body .ebm-card .ebm-stats, body .ebm-card .ebm-pay{padding:0} /* ---------- каркас ---------- */ .ebm-card{ display:grid; grid-template-columns:236px minmax(0,1fr) 208px; grid-template-areas: "brand offer act" "stats stats stats" "foot foot foot"; background:#fff; /* секция под блоком светлая, поэтому карточку держит кромка и тень, а не заливка: без заметной рамки она сливается с фоном */ border:1px solid #D7E2F4; border-radius:16px; overflow:hidden; color:var(--ebmText); font-size:16px; line-height:1.5; box-shadow:0 14px 30px -18px rgba(9,26,58,.45); transition:box-shadow .2s ease, transform .2s ease; } .ebm-card:hover{ transform:translateY(-2px); box-shadow:0 24px 44px -20px rgba(9,26,58,.7); } /* ---------- колонка бренда ---------- */ body .ebm-card .ebm-brand{ grid-area:brand; display:flex; flex-direction:column; align-items:center; gap:10px; padding:18px 16px; border-right:1px solid var(--ebmLine); background:var(--ebmSoft); text-align:center; min-width:0; } body .ebm-card .ebm-rank{ display:inline-flex; flex-direction:column; align-items:center; gap:4px; } body .ebm-card .ebm-rank b{ display:flex; align-items:center; justify-content:center; width:50px; height:50px; border-radius:50%; background:linear-gradient(135deg,var(--ebmBlue),var(--ebmBlue2)); color:#fff; font-size:20px; font-weight:800; line-height:1; box-shadow:0 10px 18px -10px rgba(47,107,224,.95); } body .ebm-card .ebm-rank i{ font-style:normal; font-size:10px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ebmMuted); } body .ebm-card .ebm-logo{ display:inline-flex; align-items:center; justify-content:center; width:100%; max-width:152px; height:56px; padding:6px; border:1px solid var(--ebmLine); border-radius:12px; background:#fff; } body .ebm-card .ebm-logo img{ width:auto; max-width:100%; max-height:100%; object-fit:contain; } body .ebm-card .ebm-name{ font-size:19px; font-weight:800; line-height:1.15; color:var(--ebmInk); overflow-wrap:break-word; } body .ebm-card .ebm-rate{ display:flex; flex-direction:column; gap:5px; width:100%; min-width:0; } body .ebm-card .ebm-rate__top{ display:flex; align-items:center; justify-content:center; gap:6px; flex-wrap:wrap; } body .ebm-card .ebm-rate__top svg{color:var(--ebmStar);flex:none} body .ebm-card .ebm-rate__top b{ font-size:15px; font-weight:800; color:var(--ebmInk); } body .ebm-card .ebm-rate__top i{ font-style:normal; font-size:11.5px; color:var(--ebmMuted); } body .ebm-card .ebm-bar{ display:block; width:100%; height:6px; border-radius:999px; background:#E9EFFA; overflow:hidden; } body .ebm-card .ebm-bar__fill{ display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--ebmBlue),var(--ebmBlue2)); } /* ---------- оффер ---------- */ body .ebm-card .ebm-offer{ grid-area:offer; display:flex; flex-direction:column; gap:7px; padding:18px 20px; min-width:0; } body .ebm-card .ebm-offer__label{ display:block; font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--ebmBlue); } body .ebm-card .ebm-offer__main{ font-size:20px; line-height:1.3; font-weight:800; color:var(--ebmInk); overflow-wrap:break-word; } body .ebm-card .ebm-offer__special{ font-size:14px; line-height:1.5; color:var(--ebmText); } body .ebm-card .ebm-feat{ font-size:13.5px; line-height:1.5; color:var(--ebmMuted); } body .ebm-card .ebm-promo{ display:inline-flex; align-items:center; align-self:flex-start; gap:8px; padding:6px 12px; border:1px dashed #BFD0EE; border-radius:10px; } body .ebm-card .ebm-promo i{ font-style:normal; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ebmMuted); } body .ebm-card .ebm-promo code{ font-family:inherit; font-size:14px; font-weight:800; letter-spacing:.06em; color:var(--ebmInk); } /* ---------- колонка действия ---------- */ body .ebm-card .ebm-act{ grid-area:act; display:flex; flex-direction:column; justify-content:center; gap:9px; padding:18px 20px; border-left:1px solid var(--ebmLine); min-width:0; } body .ebm-card .ebm-btn{ display:inline-flex; align-items:center; justify-content:center; min-height:50px; padding:0 16px; border-radius:10px; background:var(--ebmBlue2); color:#fff; font-size:15px; font-weight:700; letter-spacing:.02em; text-align:center; box-shadow:0 12px 22px -14px rgba(47,107,224,.95); } body .ebm-card .ebm-btn:hover{background:var(--ebmBlue);color:#fff} body .ebm-card .ebm-review{ text-align:center; font-size:13px; color:var(--ebmBlue); text-decoration:underline; } body .ebm-card .ebm-review:hover{color:var(--ebmInk)} /* ---------- характеристики: сетка 3×2 с заливкой через строку ---------- */ body .ebm-card .ebm-stats{ grid-area:stats; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); list-style:none; border-top:1px solid var(--ebmLine); } body .ebm-card .ebm-stat{ display:flex; align-items:center; gap:10px; padding:11px 16px; border-right:1px solid var(--ebmLine); border-bottom:1px solid var(--ebmLine); min-width:0; } body .ebm-card .ebm-stat:nth-child(3n){border-right:0} body .ebm-card .ebm-stat:nth-last-child(-n+3){border-bottom:0} /* вторая строка каждой тройки — с подложкой */ body .ebm-card .ebm-stat:nth-child(6n+4), body .ebm-card .ebm-stat:nth-child(6n+5), body .ebm-card .ebm-stat:nth-child(6n+6){background:var(--ebmSoft)} body .ebm-card .ebm-stat__ic{ flex:none; display:inline-flex; color:var(--ebmBlue); } body .ebm-card .ebm-stat__ic svg{width:26px;height:26px} body .ebm-card .ebm-stat__txt{ display:flex; flex-direction:column; min-width:0; } body .ebm-card .ebm-stat__txt b{ font-size:15px; font-weight:800; line-height:1.2; color:var(--ebmInk); overflow-wrap:break-word; } body .ebm-card .ebm-stat__txt i{ font-style:normal; font-size:11.5px; line-height:1.3; color:var(--ebmMuted); } /* ---------- подвал: платежи и 18+ ---------- */ body .ebm-card .ebm-foot{ grid-area:foot; display:flex; align-items:center; flex-wrap:wrap; gap:8px 14px; padding:10px 20px; background:var(--ebmSoft); border-top:1px solid var(--ebmLine); min-width:0; } body .ebm-card .ebm-payline{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; min-width:0; } body .ebm-card .ebm-payline__label{ font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ebmMuted); } body .ebm-card .ebm-pay{ display:flex; flex-wrap:wrap; gap:6px 14px; list-style:none; } body .ebm-card .ebm-pay li{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--ebmText); } body .ebm-card .ebm-pay svg{width:18px;height:18px;flex:none;color:var(--ebmBlue)} body .ebm-card .ebm-rg{ display:flex; align-items:flex-start; gap:8px; margin-left:auto; flex:1 1 280px; justify-content:flex-end; font-size:12px; line-height:1.45; color:var(--ebmMuted); min-width:0; } body .ebm-card .ebm-rg__age{ flex:none; padding:2px 8px; border-radius:999px; background:var(--ebmBlue); color:#fff; font-size:10.5px; font-weight:800; } body .ebm-card .ebm-rg__txt{min-width:0;overflow-wrap:break-word} /* ---------- планшет ---------- */ @media (max-width:1023.98px) and (min-width:768px){ .ebm-card{grid-template-columns:200px minmax(0,1fr) 180px} body .ebm-card .ebm-offer__main{font-size:18px} body .ebm-card .ebm-brand{padding:16px 12px} body .ebm-card .ebm-offer{padding:16px} body .ebm-card .ebm-act{padding:16px 14px} body .ebm-card .ebm-stat{padding:10px 12px} } /* ---------- мобильная ---------- */ @media (max-width:767.98px){ .ebm-list{gap:14px} .ebm-card{ grid-template-columns:minmax(0,1fr); grid-template-areas: "brand" "offer" "stats" "act" "foot"; } body .ebm-card .ebm-brand{ flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:flex-start; text-align:left; gap:10px 12px; padding:13px 14px; border-right:0; border-bottom:1px solid var(--ebmLine); } body .ebm-card .ebm-rank{flex-direction:row;align-items:center;gap:7px} body .ebm-card .ebm-rank b{width:38px;height:38px;font-size:16px} body .ebm-card .ebm-rank i{font-size:9px;letter-spacing:.1em} body .ebm-card .ebm-logo{width:auto;max-width:96px;height:42px;padding:5px;border-radius:10px} body .ebm-card .ebm-name{flex:1 1 100%;font-size:21px} body .ebm-card .ebm-rate{flex:1 1 100%} body .ebm-card .ebm-rate__top{justify-content:flex-start;gap:5px} body .ebm-card .ebm-offer{padding:12px 14px;gap:6px} body .ebm-card .ebm-offer__label{font-size:10px} body .ebm-card .ebm-offer__main{font-size:17px;line-height:1.28} body .ebm-card .ebm-offer__special{font-size:13px} body .ebm-card .ebm-feat{font-size:12.5px} body .ebm-card .ebm-stats{grid-template-columns:repeat(2,minmax(0,1fr))} body .ebm-card .ebm-stat{padding:9px 10px;gap:8px} body .ebm-card .ebm-stat:nth-child(3n){border-right:1px solid var(--ebmLine)} body .ebm-card .ebm-stat:nth-child(2n){border-right:0} body .ebm-card .ebm-stat:nth-last-child(-n+3){border-bottom:1px solid var(--ebmLine)} body .ebm-card .ebm-stat:nth-last-child(-n+2){border-bottom:0} /* подложка через строку при двух колонках */ body .ebm-card .ebm-stat:nth-child(6n+4), body .ebm-card .ebm-stat:nth-child(6n+5), body .ebm-card .ebm-stat:nth-child(6n+6){background:transparent} body .ebm-card .ebm-stat:nth-child(4n+3), body .ebm-card .ebm-stat:nth-child(4n+4){background:var(--ebmSoft)} body .ebm-card .ebm-stat__ic svg{width:22px;height:22px} body .ebm-card .ebm-stat__txt b{font-size:14px} body .ebm-card .ebm-stat__txt i{font-size:11px;line-height:1.25} body .ebm-card .ebm-act{padding:0 14px 12px;border-left:0;gap:8px} body .ebm-card .ebm-btn{min-height:46px;font-size:14.5px} body .ebm-card .ebm-foot{padding:9px 14px;gap:6px 12px} body .ebm-card .ebm-payline__label{display:none} body .ebm-card .ebm-pay{gap:5px 12px} body .ebm-card .ebm-pay li{font-size:11.5px;gap:5px} body .ebm-card .ebm-pay svg{width:16px;height:16px} body .ebm-card .ebm-rg{ flex:1 1 100%; margin-left:0; justify-content:flex-start; font-size:11px; } } /* Совсем узкие экраны: порог 330px, чтобы правило не накрыло 360 и 375 */ @media (max-width:329.98px){ body .ebm-card .ebm-stats{grid-template-columns:minmax(0,1fr)} body .ebm-card .ebm-stat{border-right:0} body .ebm-card .ebm-name{font-size:19px} }