/* Google Fonts подключай в страницы: */ /* ===================== Токены темы ===================== */ :root{ --bg:#e5f8ff; --card-bg:#ffffff96; --text:#1e293b; --link:#0ea5e9; --link-hover:#0284c7; --btn-bg: linear-gradient(135deg, #0ee936, #22eee6); --btn-hover: linear-gradient(135deg, #25ff65, #c8d406); --card-shadow:rgba(15,23,42,.08); --border:#e5e7eb; /* meta-блок (можно переопределять инлайном через style="--meta-bg: ...; --meta-color: ...") */ --meta-bg:#f8fafc; --meta-color:#1f2937; /* шапка/футер — меняются в одном месте */ --header-bg: linear-gradient(135deg,#0f172a,#1e293b); --footer-bg: #0f172a; --footer-text:#b7c1ce; } /* Тёмная тема (body.dark) */ body.dark{ --bg:#0b191e; --card-bg:#0f172abf; --text:#e2e8f0; --link:#7dd3fc; --link-hover:#38bdf8; --btn-bg: linear-gradient(135deg, #0ee936, #22eee6); --btn-hover: linear-gradient(135deg, #25ff65, #c8d406); --card-shadow:rgba(148,163,184,.15); --border:#1f2a44; --meta-bg:#0b1a33; --meta-color:#dbeafe; --header-bg: linear-gradient(135deg,#0b1220,#111827); --footer-bg:#0b1220; --footer-text:#9aa4b2; } /* ===================== База ===================== */ html,body{height:100%} *{box-sizing:border-box} body{ margin:0; background:var(--bg); color:var(--text); transition:background .3s,color .3s; font-family:"Inter","Manrope",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; } .container{max-width:980px;margin:0 auto;padding:16px} h1{font-size:36px;line-height:1.15;margin:16px 0 12px} /* ===================== Header / Footer ===================== */ .site-header{ background:var(--header-bg); color:#fff; box-shadow:0 3px 8px rgba(0,0,0,.08); } .header-top{ max-width:980px;margin:0 auto; padding:12px 16px; display:flex;align-items:center;justify-content:space-between;gap:12px; } .main-logo{height:40px} @media (max-width:600px){.main-logo{height:32px}} .site-footer{ padding:10px;text-align:center; background:var(--footer-bg); color:var(--footer-text); border-top:1px solid #1f2833; } .site-footer a{color:var(--footer-text);text-decoration:underline;text-underline-offset:3px} .muted{opacity:.7} /* ===================== Карточка оффера ===================== */ .offer{ width: 471px; display: inline-block; position:relative; margin:16px 0; background:var(--card-bg); border:1px solid var(--border); box-shadow:0 6px 18px var(--card-shadow); transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .offer:hover{ transform:translateY(-2px); box-shadow:0 12px 24px var(--card-shadow); } /* верхняя часть с учётом логотипа справа */ .top-row{ padding:20px 0px 00px 0px; } @media (max-width:640px){ .top-row{ padding-right:0px;} .offer{ width: 100%; display: block;} } .text{display:flex;flex-direction:column;gap:8px} /* Заголовок-линк */ .name{ padding-left: 10px; font-family:"Manrope","Inter",sans-serif; font-size:20px;font-weight:700;letter-spacing:.2px; color:var(--link);text-decoration:none; transition:color .18s ease,text-decoration-color .18s ease; } .name:hover{ color:var(--link-hover); text-decoration:underline; text-decoration-thickness:2px; } /* Meta-контейнер */ .meta{ padding:12px 14px; background:var(--meta-bg); color:var(--meta-color); border:1px dashed rgba(0,0,0,.06); } /* Двухколоночная спецификация: лейблы слева, значения справа */ .spec{ display:grid; grid-template-columns: 1fr auto; /* label | value */ gap:8px 16px; } .spec .label{ font-size:14px; color: var(--meta-color); opacity:.9; } .spec .value{ font-size:14px; font-weight:600; justify-self:end; white-space:nowrap; } .nav-menu { padding-left: 30%; display: flex; margin: 5px; } @media (max-width:640px){ .spec .value{ } /* на узких допускаем левое выравнивание */ .nav-menu { padding-left: 0; display: grid; } } /* Логотип в правом верхнем углу */ .offer .logo{ position:absolute; top:12px; right:12px; } .offer .logo a{ display:inline-block; } .offer .logo img{ max-width:110px;height:auto; border:1px solid var(--border); border-radius:6px;background:#fff; } @media (max-width:640px){ .offer .logo img{ max-width:100px; } } /* Кнопки — всегда в один ряд (CTA | Szczegóły) */ .buttons{ display:grid; grid-template-columns: 1fr 110px; gap:12px; align-items:stretch; padding:14px 16px 16px; } @media (max-width:380px){ .buttons{ grid-template-columns: 1fr 130px; } } .apply-btn,.toggle-btn{ min-height:44px; } .apply-btn{ background:var(--btn-bg);color:#08253a; padding:12px 18px;font-size:14px;font-weight:700;letter-spacing:.2px; border:none;border-radius:6px;text-decoration:none;text-align:center; display:flex;align-items:center;justify-content:center; box-shadow:0 3px 10px rgba(14,165,233,.25); transition:transform .15s ease,box-shadow .15s ease,background .2s ease; } .apply-btn:hover{ background:var(--btn-hover); transform:translateY(-1px); box-shadow:0 6px 14px rgba(14,165,233,.28); } .toggle-btn{ background:transparent;border:1px solid var(--border);color:inherit; padding:12px 14px;font-size:13px;border-radius:6px;cursor:pointer; display:flex;align-items:center;justify-content:center; transition:background .15s ease,border-color .15s ease; } .toggle-btn:hover{ background:rgba(2,132,199,.08); border-color:rgba(2,132,199,.25); } /* Детали */ .details{ display:none; margin:0 16px 16px; font-size:13px; border-top:1px dashed var(--border); padding-top:10px; color:inherit; } /* Выделенный оффер — ссылка не перекрашивается отдельно */ .offer.highlighted .name{ color:inherit !important; text-decoration-color:currentColor; } /* ===================== Тумблер темы ===================== */ .theme-toggle{ position:fixed;top:12px;right:12px;z-index:50; background:var(--card-bg);border:1px solid var(--border);color:var(--text); padding:6px 12px;border-radius:6px;font-size:14px;cursor:pointer; box-shadow:0 2px 6px var(--card-shadow); } /* ===== Scroll To Top ===== */ .to-top{ position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0)); width: 46px; height: 46px; border-radius: 999px; background: var(--card-bg); color: var(--text); border: 1px solid var(--border); box-shadow: 0 6px 18px var(--card-shadow); display: inline-grid; place-items: center; z-index: 60; /* выше quick-actions (50) */ cursor: pointer; /* появление/скрытие */ opacity: 0; visibility: hidden; transform: translateY(6px) scale(.96); transition: opacity .18s ease, transform .18s ease, visibility .18s; } .to-top.is-visible{ opacity: 1; visibility: visible; transform: translateY(0) scale(1); } /* круговой прогресс на фоне */ .to-top::before{ content: ""; position: absolute; inset: -1px; border-radius: inherit; background: conic-gradient(var(--link) var(--p, 0%), transparent 0); -webkit-mask: radial-gradient(circle 20px at center, transparent 28px, #000 29px); mask: radial-gradient(circle 20px at center, transparent 28px, #000 29px); pointer-events: none; } .to-top:hover{ box-shadow: 0 10px 24px var(--card-shadow); } .to-top:active{ transform: translateY(1px) scale(.98); } .to-top svg{ width: 18px; height: 18px; display: block; } /* Фокус и доступность */ .to-top:focus-visible{ outline: 2px solid var(--link); outline-offset: 2px; } /* Уважение к reduce-motion */ @media (prefers-reduced-motion: reduce){ .to-top{ transition: none; } html{ scroll-behavior: auto; } } /* Маленькая подпись под названием (адрес фирмы) */ .company-note{ padding-left: 10px; margin-top:2px; font-size:10px; line-height:1.35; opacity:.75; } /* Przykład reprezentatywny под кнопками */ .rep-example{ margin: 0 16px 14px; font-size:10px; line-height:1.5; opacity:.8; color: var(--text); } body.dark .rep-example{ opacity:.85; } /* ===== Typ filter toggles (public) ===== */ .type-filter{ display:flex; gap:22px; align-items:center; margin:6px 0 12px; } .type-filter .sw{ display:inline-flex; align-items:center; gap:10px; cursor:pointer; user-select:none; } .type-filter .sw input{ display:none; } .type-filter .track{ width:44px; height:24px; border-radius:999px; position:relative; background:#e9eff6; border:1px solid var(--border); transition:background .18s ease, border-color .18s ease; } body.dark .type-filter .track{ background:#1a2230; border-color:#2a3647; } .type-filter .thumb{ width:18px; height:18px; border-radius:999px; background:#fff; position:absolute; top:2px; left:2px; transition: transform .18s ease; box-shadow: 0 1px 2px rgba(0,0,0,.2); } .type-filter input:checked + .track{ background:#2563eb; border-color:#2563eb; } .type-filter input:checked + .track .thumb{ transform: translateX(20px); } .type-filter .lbl{ font-size:14px; opacity:.9; } .section-title{ margin:20px 0 8px; font-size:22px; font-weight:800; letter-spacing:.2px; } /* Рекламный блок между группами */ .ads-block{ margin:12px 0 16px; } .ads-block .adsbygoogle{ display:block; min-height:250px; width:100%; }