*/
.card-halo { position: relative; overflow: hidden; }
.card-halo::before {
content: ""; position: absolute; top: -40%; right: -30%; width: 220px; height: 220px;
background: radial-gradient(circle, var(--g, rgba(var(--accent-rgb) / .35)), transparent 65%);
opacity: .5; transition: opacity .3s; pointer-events: none;
}
.card-halo:hover::before { opacity: 1; }
.pill {
display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px;
border-radius: var(--radius-pill);
background: rgba(255, 255, 255, .05);
border: 1px solid var(--border);
font-size: 13px; font-weight: 700; color: var(--text-dim);
box-shadow: var(--edge-highlight);
white-space: nowrap;
}
.pill .dot {
width: 7px; height: 7px; border-radius: 50%;
background: var(--accent-bright);
box-shadow: 0 0 10px var(--accent-bright);
animation: ds-live-pulse 2s infinite;
}
@keyframes ds-live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.chip-active {
border-color: transparent; color: #fff;
background-image: linear-gradient(to bottom,
color-mix(in srgb, var(--accent) 82%, white),
var(--accent) 60%);
box-shadow: var(--shadow-raised);
}
.input {
width: 100%; height: 48px; padding: 0 16px;
border-radius: var(--radius-md);
background: rgba(255, 255, 255, .05);
border: 1px solid var(--border-soft);
color: var(--text);
font-family: inherit; font-size: 15px; font-weight: 500;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .28), inset 0 -1px 0 rgba(255, 255, 255, .03);
transition: border-color .2s, box-shadow .2s;
}
.input::placeholder { color: var(--text-faint); }
.input:focus {
outline: none;
border-color: rgba(var(--accent-rgb) / .55);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .28), 0 0 0 3px rgba(var(--accent-rgb) / .18);
}
/* ============ Effects ============ */
/* BorderBeam (порт dark-minter, чистый CSS):
внутри rounded-родителя */
.border-beam {
position: absolute; inset: 0; border-radius: inherit;
border: 1px solid transparent; pointer-events: none;
-webkit-mask-image: linear-gradient(transparent, transparent), linear-gradient(#000, #000);
mask-image: linear-gradient(transparent, transparent), linear-gradient(#000, #000);
-webkit-mask-clip: padding-box, border-box;
mask-clip: padding-box, border-box;
-webkit-mask-composite: source-in;
mask-composite: intersect;
}
.border-beam span {
position: absolute; width: 60px; aspect-ratio: 1; border-radius: 50%;
background: linear-gradient(to left, var(--accent), var(--accent-bright), transparent);
offset-path: rect(0 auto auto 0 round 60px);
animation: ds-border-beam 8s linear infinite;
}
@keyframes ds-border-beam { to { offset-distance: 100%; } }
/* Hero-флоатеры (эмодзи-карточки продуктов), только desktop */
.float-card {
position: absolute; width: 120px; height: 148px; border-radius: 18px;
border: 1px solid rgba(255, 255, 255, .10);
background: linear-gradient(to top, rgba(255, 255, 255, .07), rgba(var(--bg-rgb) / .45));
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
box-shadow: 0 18px 44px rgba(0, 0, 0, .55);
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
pointer-events: none;
}
.float-card .fc-ico { font-size: 38px; line-height: 1; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .45)); }
.float-card .fc-name { font-size: 12px; font-weight: 800; color: var(--text); opacity: .92; }
@keyframes ds-float-a {
0%, 100% { transform: translateY(0) rotate(-6deg); }
50% { transform: translateY(-22px) rotate(-1deg); }
}
@keyframes ds-float-b {
0%, 100% { transform: translateY(0) rotate(6deg); }
50% { transform: translateY(-26px) rotate(1deg); }
}
@media (max-width: 1279px) { .hero-floaters { display: none; } }
/* Marquee (бесшовный: трек = 2 равные половины, translateX(-50%)) */
.marquee {
overflow: hidden; padding: 6px 0; position: relative;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.mq-track { display: flex; gap: 12px; width: max-content; animation: ds-scrollx 40s linear infinite; }
.mq-track.rev { animation-direction: reverse; animation-duration: 48s; }
.marquee:hover .mq-track { animation-play-state: paused; }
@keyframes ds-scrollx { to { transform: translateX(-50%); } }
/* Reveal-on-scroll (класс .in ставит fx.js).
Прячем только после того, как fx.js подтвердил готовность (html.fx-ready):
без JS / при падении скрипта контент остаётся видимым. */
.fx-ready .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.fx-ready .reveal.in { opacity: 1; transform: none; }
/* ============ Общий хром публичных страниц (_base_public.html) ============ */
.page-nav {
position: sticky; top: 12px; z-index: var(--z-header);
display: flex; align-items: center; justify-content: space-between;
height: 60px; max-width: 1080px; margin: 12px auto 0;
padding: 0 12px 0 18px;
}
.page-nav .nav-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 17px; letter-spacing: -.02em; color: var(--text); }
.page-nav .nav-brand img { height: 28px; width: auto; }
.page-nav .nav-actions { display: flex; align-items: center; gap: 10px; }
@media (max-width: 1104px) { .page-nav { margin-left: 12px; margin-right: 12px; } }
@media (max-width: 480px) { .page-nav .nav-brand span { display: none; } }
.lang-switch { display: inline-flex; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.lang-switch .lang-btn {
padding: 7px 11px; font-size: 12px; font-weight: 800;
font-family: inherit; color: var(--text-faint);
background: transparent; border: 0; cursor: pointer;
}
.lang-switch .lang-btn.active { background: rgba(255, 255, 255, .06); color: #fff; }
.page-footer {
border-top: 1px solid var(--border-soft);
margin-top: 64px; padding: 28px 20px;
text-align: center; font-size: 13px; color: var(--text-faint);
}
.page-footer a { color: var(--text-dim); text-decoration: none; transition: color .2s; }
.page-footer a:hover { color: #fff; }
/* ============ Fallbacks (держать в конце файла) ============ */
/* 1 — нет backdrop-filter: стекло становится почти непрозрачным */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.glass-nav, .glass-surface, .float-card { background-color: rgba(var(--glass-bg-rgb) / .92); }
.glass-light { background-color: var(--surface-1); }
}
/* 2 — prefers-reduced-transparency: плотные поверхности, без blur */
@media (prefers-reduced-transparency: reduce) {
.glass-nav, .glass-surface, .float-card {
background-color: rgba(var(--glass-bg-rgb) / .92);
backdrop-filter: none; -webkit-backdrop-filter: none;
}
.glass-light { background-color: var(--surface-1); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
/* 3 — prefers-reduced-motion: убить анимации, reveal видим сразу
(LightRays/CountUp дополнительно гейтятся в JS) */
@media (prefers-reduced-motion: reduce) {
.ds-motion *, .ds-motion *::before, .ds-motion *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
.reveal { opacity: 1; transform: none; }
.btn-primary .shine, .shine-host .shine, .border-beam span, .mq-track { animation: none !important; }
}
/* 4 — прогрессивные iOS-сквиркл углы */
@supports (corner-shape: squircle) {
.card-flat, .glass-nav, .glass-surface, .glass-light,
.btn-primary, .btn-ghost, .input, .float-card { corner-shape: squircle; }
}