/* ============================================================ IQMO · Кнопка «Рейтинг» + модалка-тизер до 10 уровня -------------------------------------------------------------- Все классы заскоуплены префиксом .rb- / .rb-modal*, чтобы ничего не конфликтовало с существующими стилями IQMO. Шрифты (Inter, JetBrains Mono) — наследуются от страницы; при необходимости подключи их в отдельно. ============================================================ */ :root{ /* можно переопределить снаружи, чтобы попасть в свою палитру */ --rb-ink: #0f1226; --rb-ink-2: #2a2e4a; --rb-muted: #6b7094; --rb-muted-2: #9aa0bf; --rb-line: #e6e8f0; --rb-line-2: #eef0f6; --rb-surface: #ffffff; --rb-primary: #4f46e5; --rb-primary-2: #6366f1; --rb-primary-50: #eef0ff; --rb-primary-100:#e0e3ff; --rb-gold-1: #fde68a; --rb-gold-2: #f59e0b; --rb-gold-3: #d97706; --rb-gold-50: #fff7e0; --rb-gold-bg-1: #fffaed; --rb-gold-bg-2: #fff5da; --rb-gold-border:#fde9a8; } /* ============ КНОПКА «Рейтинг» в меню ============ */ .rb-rating{ position:relative; display:inline-flex; align-items:center; gap:7px; padding:9px 14px 9px 12px; border-radius:11px; color:var(--rb-ink) !important; font-weight:700 !important; font-size:14px; text-decoration:none; background:linear-gradient(180deg, var(--rb-gold-bg-1) 0%, var(--rb-gold-bg-2) 100%); border:1px solid var(--rb-gold-border); box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 0 0 4px rgba(245,158,11,.10), 0 8px 22px -8px rgba(217,119,6,.45); transition:transform .12s ease, box-shadow .2s ease, background .2s ease; cursor:pointer; } .rb-rating::before{ /* мягкое золотое свечение вокруг кнопки */ content:""; position:absolute; inset:-10px; border-radius:18px; background:radial-gradient(closest-side, rgba(245,158,11,.22), transparent 70%); z-index:-1; opacity:.9; pointer-events:none; animation:rb-halo 3.4s ease-in-out infinite; } @keyframes rb-halo{ 0%,100%{ opacity:.55; transform:scale(1); } 50% { opacity:.95; transform:scale(1.04); } } .rb-rating:hover{ transform:translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 0 0 4px rgba(245,158,11,.16), 0 14px 30px -10px rgba(217,119,6,.55); } .rb-rating:focus-visible{ outline:none; box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 0 0 4px rgba(245,158,11,.22), 0 0 0 6px rgba(79,70,229,.35); } .rb-rating__ico{ width:18px; height:18px; display:grid; place-items:center; color:var(--rb-gold-3); filter:drop-shadow(0 1px 0 rgba(255,255,255,.6)); } .rb-rating__ico svg{ width:18px; height:18px; } .rb-rating__text{ background:linear-gradient(180deg,#7a4a06,#a3650a); -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:800; letter-spacing:.1px; } .rb-rating__badge{ position:absolute; top:-7px; right:-10px; font-size:9.5px; font-weight:800; letter-spacing:.06em; padding:3px 7px; border-radius:999px; color:#fff; background:linear-gradient(135deg,#f97316,#dc2626); box-shadow:0 4px 10px rgba(220,38,38,.35), 0 0 0 2px #fff; line-height:1; text-transform:uppercase; } /* Уважение к prefers-reduced-motion */ @media (prefers-reduced-motion: reduce){ .rb-rating::before{ animation:none; } .rb-rating{ transition:none; } } /* ============ МОДАЛКА ============ */ .rb-scrim{ position:fixed; inset:0; z-index:1000; background:rgba(15,18,38,.45); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); display:grid; place-items:center; padding:20px; opacity:0; pointer-events:none; transition:opacity .18s ease; } .rb-scrim.is-open{ opacity:1; pointer-events:auto; } .rb-modal{ width:min(460px, 100%); max-height:calc(100vh - 40px); background:var(--rb-surface); border-radius:24px; border:1px solid var(--rb-line); box-shadow:0 24px 60px rgba(15,18,38,.18), 0 2px 6px rgba(15,18,38,.06); transform:translateY(8px) scale(.985); transition:transform .22s cubic-bezier(.2,.7,.2,1); position:relative; overflow:hidden; display:flex; flex-direction:column; } .rb-scrim.is-open .rb-modal{ transform:translateY(0) scale(1); } /* HERO */ .rb-modal__hero{ position:relative; padding:28px 24px 22px; background: radial-gradient(120% 90% at 100% 0%, rgba(245,158,11,.18), transparent 60%), radial-gradient(120% 90% at 0% 100%, rgba(124,58,237,.10), transparent 60%), linear-gradient(180deg,#fffaed 0%, #fff8e6 100%); border-bottom:1px solid var(--rb-gold-border); text-align:center; } .rb-trophy{ width:84px; height:84px; margin:0 auto 14px; border-radius:24px; background:linear-gradient(135deg,#fde68a,#f59e0b 55%,#d97706); display:grid; place-items:center; color:#fff; box-shadow: 0 14px 28px rgba(217,119,6,.35), inset 0 2px 0 rgba(255,255,255,.55), inset 0 -6px 0 rgba(120,53,15,.18); position:relative; } .rb-trophy::after{ content:""; position:absolute; inset:-14px; border-radius:32px; background:radial-gradient(closest-side, rgba(245,158,11,.30), transparent 70%); z-index:-1; } .rb-trophy svg{ width:42px; height:42px; } .rb-modal__title{ margin:0 0 8px; font-size:20px; font-weight:800; letter-spacing:-.01em; color:var(--rb-ink); } .rb-modal__sub{ margin:0 auto; font-size:13.5px; line-height:1.55; color:var(--rb-ink-2); max-width:38ch; } /* CLOSE */ .rb-close{ position:absolute; top:14px; right:14px; width:34px; height:34px; border-radius:10px; border:0; background:rgba(255,255,255,.75); color:var(--rb-ink-2); display:grid; place-items:center; box-shadow:0 4px 10px rgba(15,18,38,.08); backdrop-filter:blur(6px); z-index:2; cursor:pointer; } .rb-close:hover{ background:#fff; color:var(--rb-ink); } .rb-close svg{ width:16px; height:16px; } /* BODY */ .rb-modal__body{ padding:20px 24px 4px; overflow-y:auto; } .rb-lvl-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; } .rb-lvl-chip{ display:inline-flex; align-items:center; gap:8px; padding:6px 10px 6px 6px; border-radius:999px; background:var(--rb-primary-50); border:1px solid var(--rb-primary-100); } .rb-lvl-chip__ico{ width:24px; height:24px; border-radius:999px; background:linear-gradient(135deg,#a5b4fc,#6366f1); color:#fff; display:grid; place-items:center; font-weight:800; font-size:11px; box-shadow:inset 0 1px 0 rgba(255,255,255,.35); } .rb-lvl-chip__label{ font-size:12px; color:var(--rb-muted); font-weight:700; } .rb-lvl-chip__val{ font-size:13px; color:var(--rb-primary); font-weight:800; } .rb-lvl-target{ text-align:right; font-size:12px; color:var(--rb-muted); font-weight:600; } .rb-lvl-target b{ display:block; font-family:'JetBrains Mono', ui-monospace, monospace; font-variant-numeric:tabular-nums; color:var(--rb-gold-3); font-size:15px; letter-spacing:-.01em; margin-top:2px; font-weight:700; } /* PROGRESS */ .rb-progress{ margin-top:14px; height:14px; border-radius:999px; background:#eef0f6; box-shadow:inset 0 1px 2px rgba(15,18,38,.06); overflow:hidden; position:relative; } .rb-progress__fill{ height:100%; width:0%; background:linear-gradient(90deg,#fbbf24,#f59e0b 55%,#d97706); border-radius:999px; box-shadow:0 0 14px rgba(245,158,11,.4); position:relative; transition:width .8s cubic-bezier(.2,.7,.2,1); } .rb-progress__fill::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0) 60%); border-radius:999px; } .rb-progress-ticks{ display:flex; justify-content:space-between; margin-top:8px; font-size:11px; color:var(--rb-muted-2); font-weight:700; letter-spacing:.04em; } .rb-progress-ticks span:last-child{ color:var(--rb-gold-3); } /* PERKS */ .rb-perks{ margin-top:18px; display:grid; gap:8px; } .rb-perk{ display:flex; gap:10px; align-items:center; padding:10px 12px; border-radius:12px; background:#fafbff; border:1px solid var(--rb-line-2); } .rb-perk__ico{ width:28px; height:28px; border-radius:8px; display:grid; place-items:center; color:#fff; flex:0 0 auto; } .rb-perk__ico--a{ background:linear-gradient(135deg,#fbbf24,#d97706); } .rb-perk__ico--b{ background:linear-gradient(135deg,#a5b4fc,#6366f1); } .rb-perk__ico--c{ background:linear-gradient(135deg,#fda4af,#e11d48); } .rb-perk__ico svg{ width:14px; height:14px; } .rb-perk__text{ font-size:13px; color:var(--rb-ink-2); line-height:1.45; } .rb-perk__text b{ color:var(--rb-ink); } /* FOOT */ .rb-modal__foot{ padding:18px 24px 22px; display:flex; flex-direction:column; gap:8px; } .rb-cta{ display:inline-flex; align-items:center; justify-content:center; gap:8px; height:46px; border-radius:13px; border:0; background:linear-gradient(180deg, var(--rb-primary), var(--rb-primary-2)); color:#fff; font-weight:800; font-size:14.5px; box-shadow:0 10px 24px rgba(79,70,229,.32), inset 0 1px 0 rgba(255,255,255,.2); transition:transform .12s, box-shadow .18s; cursor:pointer; font-family:inherit; } .rb-cta:hover { transform:translateY(-1px); box-shadow:0 14px 28px rgba(79,70,229,.4); } .rb-cta:active{ transform:translateY(0); } .rb-cta svg { width:16px; height:16px; } .rb-cta-sub{ background:transparent; border:0; padding:8px; color:var(--rb-muted); font-weight:600; font-size:13px; cursor:pointer; font-family:inherit; } .rb-cta-sub:hover{ color:var(--rb-ink-2); } /* ============ MOBILE ============ */ @media (max-width:520px){ .rb-modal__hero{ padding:24px 18px 18px; } .rb-modal__body{ padding:16px 18px 4px; } .rb-modal__foot{ padding:14px 18px 18px; } .rb-trophy{ width:72px; height:72px; } .rb-trophy svg{ width:36px; height:36px; } .rb-modal__title{ font-size:18px; } .rb-lvl-row{ flex-wrap:wrap; gap:10px; } .rb-lvl-target{ text-align:left; } } @media (prefers-reduced-motion: reduce){ .rb-scrim, .rb-modal, .rb-progress__fill, .rb-cta{ transition:none; } }