/* ============================================================ ИТ-студия — основные стили. Стилистика ориентирована на hackalem.ai: глубокий тёмно-синий фон, один акцентный циан (без градиентов), инвертированные pill-кнопки со стрелкой в кружке, mono-лейблы, карточки-панели. Акцент меняется в токене --accent. ============================================================ */ /* Структурные токены (общие для всех тем) */ :root{ --maxw: 1800px; --pad: clamp(20px, 4vw, 72px); --sect: clamp(64px, 7vw, 120px); --radius: 20px; --f-display: "Manrope", "Inter", system-ui, sans-serif; --f-text: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --f-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; } /* ---------- Темы (цветовые схемы). Активная задаётся атрибутом data-theme на ---------- */ /* AURORA — тёмная, но «приподнятая»: индиго-синий с циановым и сиреневым свечением */ :root, :root[data-theme="aurora"]{ color-scheme: dark; --bg:#0D1433; --bg-2:#111A3F; --surface:#17224D; --surface-2:#1E2B5E; --surface-solid:#17224D; --panel-soft:transparent; --line:#2D3C74; --line-soft:#232F63; --text:#F3F6FF; --muted:#B9C5E4; --faint:#8794BE; --accent:#22D3EE; --accent-deep:#0EA5E9; --accent-text:#A5EEFF; --accent-ink:#04202B; --invert-bg:#F3F6FF; --invert-ink:#0D1433; --signal:#34E0B4; --danger:#FF8095; --field:#0F1738; --header-bg:rgba(13,20,51,.78); --footer-bg:rgba(9,14,38,.72); --shadow:0 30px 80px -40px rgba(0,0,0,.65); --shadow-lg:0 40px 120px -30px rgba(0,0,0,.8); --overlay:rgba(6,10,30,.74); --on-media:#fff; --glass:none; --orb-op:0; --grid-op:.5; --logo-filter:none; --client-filter:none; --page-bg: radial-gradient(900px 620px at 90% -6%, rgba(34,211,238,.30), transparent 62%), radial-gradient(820px 640px at -6% 26%, rgba(129,140,248,.32), transparent 62%), radial-gradient(940px 720px at 68% 106%, rgba(45,212,191,.20), transparent 62%), linear-gradient(180deg,#0D1433 0%,#111B45 55%,#0E1638 100%); } /* OCEAN — фирменный сине-бирюзовый градиент (как в логотипе), стеклянные карточки */ :root[data-theme="ocean"]{ color-scheme: dark; --bg:#0A2F7A; --bg-2:#0B3A8C; --surface:rgba(255,255,255,.09); --surface-2:rgba(255,255,255,.15); --surface-solid:#11458F; --panel-soft:rgba(255,255,255,.05); --line:rgba(255,255,255,.22); --line-soft:rgba(255,255,255,.13); --text:#FFFFFF; --muted:rgba(255,255,255,.80); --faint:rgba(255,255,255,.58); --accent:#5BEBFF; --accent-deep:#22B8F0; --accent-text:#C4F7FF; --accent-ink:#04295A; --invert-bg:#FFFFFF; --invert-ink:#0A2F7A; --signal:#5CF2C0; --danger:#FFB4C0; --field:rgba(4,24,68,.45); --header-bg:rgba(10,47,122,.62); --footer-bg:rgba(6,30,84,.5); --shadow:0 30px 80px -40px rgba(2,12,48,.7); --shadow-lg:0 40px 120px -30px rgba(2,12,48,.85); --overlay:rgba(4,20,60,.74); --on-media:#fff; --glass:blur(14px); --orb-op:0; --grid-op:.35; --logo-filter:brightness(0) invert(1); --client-filter:none; --page-bg: radial-gradient(1000px 700px at 90% -8%, rgba(91,235,255,.42), transparent 62%), radial-gradient(900px 700px at -8% 30%, rgba(129,140,248,.36), transparent 62%), radial-gradient(1000px 800px at 65% 108%, rgba(45,212,191,.34), transparent 62%), linear-gradient(170deg,#0A2A72 0%,#0A4394 42%,#0A6DB0 100%); } /* LIGHT — светлая: белый фон с мягкими голубыми градиентами, тёмно-синий текст */ :root[data-theme="light"]{ color-scheme: light; --bg:#F3F7FD; --bg-2:#E9F0FA; --surface:#FFFFFF; --surface-2:#F0F5FC; --surface-solid:#FFFFFF; --panel-soft:rgba(255,255,255,.55); --line:#D3DEF0; --line-soft:#E2EAF6; --text:#0B1B3A; --muted:#475A7E; --faint:#7A8BAA; --accent:#0B78E8; --accent-deep:#0A5CC2; --accent-text:#0A66CC; --accent-ink:#FFFFFF; --invert-bg:#0B1B3A; --invert-ink:#FFFFFF; --signal:#0FA37F; --danger:#D6334F; --field:#FFFFFF; --header-bg:rgba(243,247,253,.82); --footer-bg:rgba(233,240,250,.85); --shadow:0 24px 60px -30px rgba(20,60,140,.28); --shadow-lg:0 40px 100px -30px rgba(11,27,58,.45); --overlay:rgba(11,27,58,.55); --on-media:#fff; --glass:blur(10px); --orb-op:0; --grid-op:.9; --logo-filter:none; --client-filter:brightness(0); --page-bg: radial-gradient(900px 600px at 92% -6%, rgba(14,165,233,.24), transparent 60%), radial-gradient(800px 600px at -6% 18%, rgba(129,140,248,.20), transparent 60%), radial-gradient(1000px 700px at 62% 104%, rgba(45,212,191,.18), transparent 62%), linear-gradient(180deg,#F8FBFF 0%,#EEF4FC 55%,#F4F8FD 100%); } /* DUSK — сине-фиолетовый «сумеречный» градиент */ :root[data-theme="dusk"]{ color-scheme: dark; --bg:#1A1B52; --bg-2:#20205F; --surface:rgba(255,255,255,.08); --surface-2:rgba(255,255,255,.14); --surface-solid:#26286E; --panel-soft:rgba(255,255,255,.05); --line:rgba(255,255,255,.20); --line-soft:rgba(255,255,255,.11); --text:#FFFFFF; --muted:rgba(255,255,255,.80); --faint:rgba(255,255,255,.56); --accent:#4FE3FF; --accent-deep:#8B7CF6; --accent-text:#C9F4FF; --accent-ink:#0B1043; --invert-bg:#FFFFFF; --invert-ink:#1A1B52; --signal:#5CF2C0; --danger:#FFB4C6; --field:rgba(12,10,60,.45); --header-bg:rgba(26,27,82,.62); --footer-bg:rgba(18,16,64,.5); --shadow:0 30px 80px -40px rgba(8,6,40,.7); --shadow-lg:0 40px 120px -30px rgba(8,6,40,.85); --overlay:rgba(12,10,50,.76); --on-media:#fff; --glass:blur(14px); --orb-op:0; --grid-op:.3; --logo-filter:brightness(0) invert(1); --client-filter:none; --page-bg: radial-gradient(900px 700px at 88% -8%, rgba(79,227,255,.30), transparent 60%), radial-gradient(900px 700px at -6% 35%, rgba(217,70,239,.30), transparent 62%), radial-gradient(900px 700px at 70% 105%, rgba(99,102,241,.40), transparent 62%), linear-gradient(165deg,#161955 0%,#2B1F72 50%,#43248A 100%); } *,*::before,*::after{ box-sizing:border-box; } [hidden]{ display:none !important; } html{ scroll-behavior:smooth; scroll-padding-top:88px; -webkit-text-size-adjust:100%; overflow-x:hidden; } html.menu-open{ overflow:hidden; } html.menu-open header.site{ background:var(--surface-solid); } /* ВАЖНО: overflow-x на body не должен быть hidden — иначе body становится своим контейнером прокрутки и position:sticky у шапки перестаёт работать. Горизонтальный «пролёт» режем через clip. */ body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--f-text); font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased; overflow-x:clip; } /* градиентный фон: фиксированный слой под всем содержимым */ body::before{ content:""; position:fixed; inset:0; z-index:-1; background:var(--page-bg); pointer-events:none; } h1,h2,h3,h4{ margin:0; font-family:var(--f-display); font-weight:700; line-height:1.05; letter-spacing:-0.025em; text-wrap:balance; } p{ overflow-wrap:break-word; margin:0; } a{ color:inherit; text-decoration:none; } img{ display:block; max-width:100%; } button{ font:inherit; color:inherit; cursor:pointer; } ::selection{ background:var(--accent); color:var(--accent-ink); } :focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; } .wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad); } .sect{ padding-block:var(--sect); position:relative; } /* разделитель секций — на всю ширину экрана */ .sect + .sect::before{ content:""; position:absolute; top:0; left:50%; width:100vw; transform:translateX(-50%); height:1px; background:var(--line-soft); } /* ---------- Типографика ---------- */ .eyebrow{ font-family:var(--f-mono); font-size:12px; font-weight:500; letter-spacing:0.16em; text-transform:uppercase; color:var(--muted); display:inline-flex; align-items:center; gap:10px; } .eyebrow::before{ content:""; width:22px; height:1px; background:var(--faint); } .eyebrow b{ color:var(--accent); font-weight:600; } .h-xl{ font-size:clamp(2rem, 3.5vw, 4.4rem); font-weight:800; line-height:1.02; letter-spacing:-0.03em; } .h-lg{ font-size:clamp(1.75rem, 4vw, 4rem); line-height:1.03; letter-spacing:-0.03em; } .h-md{ font-size:clamp(1.4rem, 2.6vw, 2rem); letter-spacing:-0.02em; } .lead{ font-size:clamp(1.05rem, 1.3vw, 1.125rem); color:var(--muted); max-width:58ch; } .hero .lead{ font-size:clamp(1.1rem, 1.4vw, 1.25rem); max-width:54ch; } .muted{ color:var(--muted); } .sect-head{ max-width:880px; margin-bottom:clamp(40px,4.5vw,64px); display:flex; flex-direction:column; gap:18px; } .sect-head-row{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-bottom:clamp(40px,4.5vw,64px); } .sect-head-row .sect-head{ margin-bottom:0; flex:1 1 420px; } .field-opt{ text-transform:none; color:var(--faint); font-size:.85em; } .ph{ border-bottom:1px dashed var(--accent); padding-bottom:1px; color:var(--text); cursor:help; } /* ---------- Кнопки ---------- */ .btn{ display:inline-flex; align-items:center; gap:12px; border-radius:999px; font-family:var(--f-display); font-weight:600; font-size:16px; letter-spacing:-0.01em; border:1px solid transparent; white-space:nowrap; transition:transform .18s ease, background .18s ease, border-color .18s ease, filter .18s ease; } .btn-ic{ width:32px; height:32px; border-radius:50%; flex:none; display:inline-flex; align-items:center; justify-content:center; transition:transform .18s ease; } .btn-primary, .btn-accent{ padding:10px 10px 10px 26px; } .btn-primary{ background:var(--invert-bg); color:var(--invert-ink); } .btn-primary .btn-ic{ background:var(--invert-ink); color:var(--invert-bg); } .btn-accent{ background:var(--accent); color:var(--accent-ink); } .btn-accent .btn-ic{ background:color-mix(in srgb, var(--accent-ink) 22%, transparent); color:var(--accent-ink); } .btn-primary:hover, .btn-accent:hover{ transform:translateY(-2px); filter:brightness(1.06); } .btn-primary:hover .btn-ic{ transform:translateX(2px); } .btn-ghost{ padding:15px 26px; background:transparent; color:var(--text); border-color:var(--line); } .btn-ghost:hover{ border-color:var(--accent); color:var(--accent-text); } .btn-outline{ padding:7px 7px 7px 20px; background:transparent; color:var(--text); border:1px solid var(--line); font-size:14.5px; } .btn-outline .btn-ic{ width:28px; height:28px; border:1px solid var(--line); color:var(--muted); } .btn-outline:hover{ border-color:var(--accent); color:var(--text); } .btn-outline:hover .btn-ic{ border-color:var(--accent); color:var(--accent); } .btn-block{ width:100%; justify-content:space-between; } .btn-block .btn-ic{ width:38px; height:38px; } .btn svg{ width:14px; height:14px; } .btn .btn-ic-wa{ background:#25D366 !important; color:#fff !important; border-color:transparent !important; } .btn .btn-ic-wa svg{ width:17px; height:17px; } /* ---------- Бегущая строка (marquee) ---------- */ .marquee{ overflow:hidden; background:var(--bg-2); border-bottom:1px solid var(--line-soft); } .marquee-row{ display:flex; gap:28px; width:max-content; padding:10px 0; animation:marq 32s linear infinite; } .marquee-row span{ display:inline-flex; align-items:center; gap:28px; font-family:var(--f-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); white-space:nowrap; } .marquee-row span::after{ content:"+"; color:var(--accent); margin-left:28px; } /* ---------- Уведомление о переводе ---------- */ .notice-bar{ background:color-mix(in srgb, var(--accent) 14%, var(--bg-2)); border-bottom:1px solid var(--line); font-family:var(--f-mono); font-size:12.5px; color:var(--text); display:flex; align-items:center; justify-content:center; gap:16px; padding:9px var(--pad); text-align:center; } .notice-bar button{ background:none; border:none; color:var(--muted); font-size:13px; } /* ---------- Шапка ---------- */ header.site{ position:sticky; top:0; z-index:60; background:var(--header-bg); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--line-soft); } .nav{ display:flex; align-items:center; gap:clamp(16px,2.5vw,28px); height:70px; } .brand{ display:flex; align-items:center; margin-right:auto; flex:none; } .brand img{ height:54px; width:auto; filter:var(--logo-filter); } .brand-foot{ margin-bottom:18px; } .brand-foot img{ height:72px; } .nav-links{ display:flex; gap:28px; font-size:14.5px; color:var(--muted); font-weight:500; } .nav-links a:hover{ color:var(--text); } .lang{ display:flex; gap:2px; font-family:var(--f-mono); font-size:11.5px; font-weight:700; color:var(--faint); background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:3px; } .lang a{ padding:5px 10px; border-radius:999px; letter-spacing:.04em; } .lang a:hover{ color:var(--muted); } .lang a[aria-current="true"]{ color:var(--invert-ink); background:var(--accent); } .nav .btn.nav-cta{ font-size:14px; padding:7px 7px 7px 20px; } .nav .btn.nav-cta .btn-ic{ width:28px; height:28px; } .hdr-wa{ display:none; } .burger{ display:none; position:relative; flex:none; width:44px; height:44px; border:1px solid var(--line); border-radius:12px; background:var(--surface-solid); padding:0; } .burger span{ position:absolute; left:50%; top:21px; width:18px; height:2px; margin-left:-9px; border-radius:2px; background:var(--text); transition:transform .25s ease, top .25s ease, opacity .18s ease; } .burger span:nth-child(1){ top:15px; } .burger span:nth-child(3){ top:27px; } .burger[aria-expanded="true"] span:nth-child(1){ top:21px; transform:rotate(45deg); } .burger[aria-expanded="true"] span:nth-child(2){ opacity:0; } .burger[aria-expanded="true"] span:nth-child(3){ top:21px; transform:rotate(-45deg); } .burger[aria-expanded="true"]{ border-color:var(--accent); } /* Мобильное меню (шторка под шапкой) */ .mmenu, .mm-backdrop{ display:none; } /* ---------- Hero ---------- */ .hero{ position:relative; padding-top:clamp(28px,4vw,44px); padding-bottom:clamp(56px,8vw,104px); overflow:hidden; } /* фон hero — на всю ширину экрана, не ограничен .wrap */ .hero-bg{ position:absolute; top:0; bottom:0; left:50%; transform:translateX(-50%); width:100vw; z-index:0; pointer-events:none; overflow:hidden; } .hero-grid{ position:absolute; inset:-2px; background-image:linear-gradient(var(--line-soft) 1px, transparent 1px), linear-gradient(90deg, var(--line-soft) 1px, transparent 1px); background-size:64px 64px; -webkit-mask-image:radial-gradient(120% 90% at 70% 0%, #000 0%, transparent 72%); mask-image:radial-gradient(120% 90% at 70% 0%, #000 0%, transparent 72%); opacity:var(--grid-op); } .orb{ position:absolute; border-radius:50%; filter:blur(90px); opacity:var(--orb-op); } .orb-1{ width:520px; height:520px; background:var(--accent); top:-200px; right:-140px; } .orb-2{ width:420px; height:420px; background:var(--accent-deep); bottom:-180px; left:-160px; } .hero-corners{ position:relative; z-index:1; display:flex; justify-content:space-between; align-items:center; margin-bottom:26px; font-family:var(--f-mono); font-size:12px; letter-spacing:.12em; color:var(--faint); } .hero-corners span{ display:inline-flex; align-items:center; gap:10px; } .hero-corners span::before{ content:""; width:18px; height:1px; background:var(--faint); } .hero-corners span.r::before{ display:none; } .hero-corners span.r::after{ content:""; width:18px; height:1px; background:var(--faint); } .hero-inner{ position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1.2fr) minmax(400px,520px); gap:clamp(32px,4vw,56px); align-items:center; } .hero-inner > *, .why > *, .final > *, .compare > *{ min-width:0; } .hero h1{ margin:22px 0 22px; max-width:20ch; } .accent-word{ color:var(--accent-text); } .ticker{ margin-top:36px; display:flex; flex-wrap:wrap; gap:10px 8px; font-family:var(--f-mono); font-size:13px; color:var(--muted); } .ticker span{ display:inline-flex; align-items:center; gap:9px; padding:8px 15px; border:1px solid var(--line); border-radius:999px; } .ticker span::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--accent); flex:none; } /* ---------- Формы ---------- */ .lead-card{ scroll-margin-top:96px; } .lead-card{ background:var(--surface); backdrop-filter:var(--glass); -webkit-backdrop-filter:var(--glass); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(24px,3vw,34px); box-shadow:var(--shadow); } .lead-card h2{ font-size:1.4rem; letter-spacing:-0.02em; } .lead-card .sub{ font-size:14.5px; color:var(--muted); margin-top:8px; } .project-chip{ display:flex; align-items:center; gap:12px; margin-top:16px; padding:10px 10px 10px 16px; border:1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); background:color-mix(in srgb, var(--accent) 8%, transparent); border-radius:14px; } .project-chip .pc-label{ font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-text); flex:none; } .project-chip b{ font-weight:600; font-size:14.5px; flex:1; min-width:0; overflow-wrap:anywhere; } .pc-clear{ flex:none; width:28px; height:28px; border-radius:50%; border:1px solid var(--line); background:transparent; color:var(--muted); display:grid; place-items:center; } .pc-clear:hover{ border-color:var(--accent); color:var(--accent); } .field{ display:flex; flex-direction:column; gap:6px; margin-top:14px; } .field label{ font-family:var(--f-mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); } .field input, .field select, .field textarea{ width:100%; background:var(--field); color:var(--text); border:1px solid var(--line); border-radius:12px; padding:14px 16px; font:inherit; font-size:15.5px; transition:border-color .15s ease; } .field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--accent); } .field textarea{ resize:vertical; min-height:84px; } .consent{ display:flex; gap:10px; align-items:flex-start; margin-top:16px; font-size:12.5px; color:var(--faint); line-height:1.45; } .consent a{ color:var(--muted); border-bottom:1px solid var(--line); } .consent a:hover{ color:var(--text); } .consent input{ margin-top:2px; accent-color:var(--accent); flex:none; } .hp{ position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden; } .form-note{ margin-top:14px; font-family:var(--f-mono); font-size:12px; color:var(--faint); text-align:center; } .form-error{ margin-top:12px; font-size:13.5px; color:var(--danger); text-align:center; } .form-success{ display:none; flex-direction:column; gap:10px; text-align:center; padding:28px 10px; align-items:center; } .form-success .tick{ width:48px; height:48px; border-radius:50%; background:rgba(52,224,180,.12); border:1px solid var(--signal); display:grid; place-items:center; color:var(--signal); } form.sent .form-body{ display:none; } form.sent .form-success{ display:flex; } /* ---------- Партнёры («Нам доверяют») ---------- */ .clients{ text-align:center; padding-block:clamp(48px,6vw,88px); } .clients-head{ margin-bottom:clamp(30px,4vw,52px); } .clients .eyebrow{ justify-content:center; } .clients .eyebrow::after{ content:""; width:22px; height:1px; background:var(--faint); } .logos{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:38px clamp(28px,3.2vw,56px); margin-inline:auto; } /* на средних экранах — ровные ряды 4 + 3, а не 6 + 1; на широких все логотипы в одну строку */ @media (min-width:721px) and (max-width:1699px){ .logos{ max-width:1000px; } } /* --h — базовая высота из данных; логотипы увеличены в 1.7 раза */ .logos img{ height:calc(var(--h) * 1.7px); width:auto; max-width:min(360px, 44vw); object-fit:contain; opacity:.8; filter:var(--client-filter); transition:opacity .2s ease, transform .2s ease; } .logos img:hover{ opacity:1; transform:scale(1.04); } /* ---------- Проблема / решение ---------- */ .compare{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:8px; } .compare .col{ border:1px solid var(--line); border-radius:var(--radius); padding:32px; background:var(--surface); backdrop-filter:var(--glass); -webkit-backdrop-filter:var(--glass); } .compare .col.good{ border-color:color-mix(in srgb, var(--accent) 45%, var(--line)); background:color-mix(in srgb, var(--accent) 6%, var(--surface)); } .compare h3{ font-family:var(--f-mono); font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); margin-bottom:16px; font-weight:500; } .compare .col.good h3{ color:var(--accent); } .compare ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; font-size:16.5px; color:var(--muted); } .compare li{ display:flex; gap:10px; } .compare li::before{ content:"—"; color:var(--faint); flex:none; } .compare .good li::before{ content:"→"; color:var(--accent); } .compare .good li{ color:var(--text); } /* ---------- Услуги (карточки с иконкой и цифрой-подложкой) ---------- */ .services{ border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:grid; grid-template-columns:repeat(3,1fr); background:var(--panel-soft); backdrop-filter:var(--glass); -webkit-backdrop-filter:var(--glass); } .svc{ position:relative; overflow:hidden; padding:34px 30px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); display:flex; flex-direction:column; gap:14px; min-height:260px; transition:background .18s ease; } .svc:hover{ background:var(--surface-2); } .services .svc:nth-child(3n){ border-right:none; } .svc-ghost{ position:absolute; top:2px; right:16px; font-family:var(--f-display); font-size:76px; font-weight:800; color:var(--text); opacity:.05; line-height:1; pointer-events:none; } .svc-ic{ width:50px; height:50px; border-radius:14px; flex:none; border:1px solid color-mix(in srgb, var(--accent) 35%, transparent); background:color-mix(in srgb, var(--accent) 8%, transparent); color:var(--accent); display:grid; place-items:center; position:relative; } .svc-ic svg{ width:22px; height:22px; } .svc h3{ font-family:var(--f-display); font-weight:700; font-size:clamp(1.15rem,1.7vw,1.3rem); letter-spacing:-0.02em; position:relative; } .svc p{ font-size:15px; color:var(--muted); position:relative; } .svc.cta{ grid-column:1 / -1; min-height:0; background:color-mix(in srgb, var(--accent) 6%, var(--surface)); flex-direction:row; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; border-bottom:none; border-right:none; } .svc.cta > div{ max-width:60ch; display:flex; flex-direction:column; gap:14px; } .svc.cta a{ font-family:var(--f-mono); font-size:13.5px; color:var(--accent); display:inline-flex; gap:8px; align-items:center; } /* ---------- Проекты (карточки + модальное окно) ---------- */ .cases{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; } .cases[data-collapsed] .case.extra{ display:none; } .case{ position:relative; display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); backdrop-filter:var(--glass); -webkit-backdrop-filter:var(--glass); transition:transform .18s ease, border-color .18s ease; } .case:hover, .case:focus-within{ transform:translateY(-4px); border-color:color-mix(in srgb, var(--accent) 45%, var(--line)); } .case-media{ position:relative; aspect-ratio:1.9/1; overflow:hidden; background:var(--bg-2); border-bottom:1px solid var(--line-soft); } .case-media img{ width:100%; height:100%; object-fit:cover; object-position:top center; transition:transform .5s ease; } .case:hover .case-media img{ transform:scale(1.04); } .case-media::after{ content:""; position:absolute; inset:auto 0 0 0; height:32%; background:linear-gradient(to top, var(--surface), transparent); pointer-events:none; } .case-num{ position:absolute; top:10px; right:16px; z-index:1; font-family:var(--f-display); font-weight:800; font-size:46px; line-height:1; color:var(--on-media); opacity:.18; } .case-body{ display:flex; flex-direction:column; gap:12px; padding:22px 26px 26px; flex:1; } .case .tag{ font-family:var(--f-mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-text); } .case h3{ font-family:var(--f-display); font-weight:700; font-size:clamp(1.15rem,1.5vw,1.32rem); letter-spacing:-0.02em; line-height:1.2; } .case-open{ background:none; border:0; padding:0; margin:0; font:inherit; letter-spacing:inherit; color:inherit; text-align:left; cursor:pointer; } .case-open::after{ content:""; position:absolute; inset:0; z-index:2; } .case-open:focus-visible{ outline:none; text-decoration:underline; text-decoration-color:var(--accent); text-underline-offset:4px; } .case p{ font-size:15px; color:var(--muted); } .case-bottom{ margin-top:auto; padding-top:18px; border-top:1px solid var(--line-soft); display:flex; flex-direction:column; gap:14px; } .case .metric{ display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 12px; } .case .metric b{ font-family:var(--f-display); font-size:clamp(1.6rem,2.2vw,2rem); color:var(--accent-text); font-variant-numeric:tabular-nums; letter-spacing:-0.02em; } .case .metric span{ font-size:13.5px; color:var(--muted); } .case-foot{ display:flex; justify-content:space-between; align-items:center; gap:12px; } .case .meta{ font-family:var(--f-mono); font-size:12px; color:var(--faint); } .case .more{ font-family:var(--f-mono); font-size:12.5px; color:var(--accent); white-space:nowrap; } .cases-more{ display:flex; justify-content:center; margin-top:36px; } .cases-more .btn-ic svg{ transform:rotate(90deg); transition:transform .2s ease; } .cases-more .btn.open .btn-ic svg{ transform:rotate(-90deg); } html.modal-open{ overflow:hidden; } .case-dialog{ width:min(1040px, calc(100vw - 32px)); max-height:min(92vh, 980px); padding:0; margin:auto; background:var(--surface-solid); color:var(--text); border:1px solid var(--line); border-radius:24px; box-shadow:var(--shadow-lg); overflow:hidden; } .case-dialog[open]{ display:block; animation:cdIn .22s ease; } .case-dialog::backdrop{ background:var(--overlay); backdrop-filter:blur(6px); } @keyframes cdIn{ from{ opacity:0; transform:translateY(14px) scale(.985); } to{ opacity:1; transform:none; } } .cd-inner{ position:relative; max-height:min(92vh, 980px); overflow:auto; overscroll-behavior:contain; } .cd-close{ position:absolute; top:16px; right:16px; z-index:3; width:40px; height:40px; border-radius:50%; border:1px solid var(--line); background:color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter:blur(8px); color:var(--text); display:grid; place-items:center; } .cd-close:hover{ border-color:var(--accent); color:var(--accent); } .cd-gallery{ background:var(--bg-2); border-bottom:1px solid var(--line-soft); } .cd-main{ display:block; width:auto; max-width:100%; max-height:min(50vh, 440px); margin:0 auto; object-fit:contain; } .cd-thumbs{ display:flex; gap:10px; padding:12px 20px 16px; overflow-x:auto; } .cd-thumb{ flex:none; width:96px; height:62px; border-radius:10px; border:1px solid var(--line); background:var(--bg); padding:0; overflow:hidden; opacity:.6; transition:opacity .15s ease, border-color .15s ease; } .cd-thumb img{ width:100%; height:100%; object-fit:cover; } .cd-thumb.on, .cd-thumb:hover{ opacity:1; border-color:var(--accent); } .cd-content{ padding:clamp(24px,3.4vw,40px); display:flex; flex-direction:column; gap:14px; } .cd-content .tag{ font-family:var(--f-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-text); } .cd-content h3{ font-size:clamp(1.5rem,3vw,2.2rem); letter-spacing:-0.03em; } .cd-meta{ font-family:var(--f-mono); font-size:12.5px; color:var(--faint); letter-spacing:.06em; text-transform:uppercase; } .cd-text{ font-size:16px; color:var(--muted); max-width:72ch; } .cd-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:16px; overflow:hidden; margin-top:6px; } .cd-stats div{ background:var(--bg-2); padding:18px; display:flex; flex-direction:column; gap:4px; } .cd-stats b{ font-family:var(--f-display); font-size:1.55rem; color:var(--accent-text); letter-spacing:-0.02em; } .cd-stats span{ font-size:13px; color:var(--muted); } .cd-content h4{ font-family:var(--f-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); font-weight:700; margin-top:10px; } .cd-modules{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:10px; } .cd-modules li{ border:1px solid var(--line); border-radius:14px; padding:14px 16px; display:flex; flex-direction:column; gap:3px; background:var(--bg-2); } .cd-modules a, .cd-modules b{ font-family:var(--f-display); font-weight:700; } .cd-modules a{ color:var(--accent-text); } .cd-modules a:hover{ text-decoration:underline; } .cd-modules span{ font-size:13.5px; color:var(--muted); } .cd-cols{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:10px 32px; } .cd-cols ul{ list-style:none; margin:12px 0 0; padding:0; display:flex; flex-direction:column; gap:10px; } .cd-cols li{ position:relative; padding-left:20px; font-size:15px; line-height:1.5; } .cd-cols li::before{ content:""; position:absolute; left:0; top:.55em; width:7px; height:7px; border-radius:2px; background:var(--accent); } .cd-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:14px; padding-top:22px; border-top:1px solid var(--line-soft); } /* ---------- Процесс: таймлайн-строки ---------- */ .timeline{ border-top:1px solid var(--line-soft); } .tl-row{ display:grid; grid-template-columns:130px 1fr auto; align-items:center; gap:30px; padding:30px 8px 30px 22px; border-bottom:1px solid var(--line-soft); } .tl-idx{ font-family:var(--f-mono); font-size:15px; font-weight:700; color:var(--text); } .tl-row h3{ font-family:var(--f-display); font-weight:700; font-size:clamp(1.15rem,1.7vw,1.3rem); letter-spacing:-0.02em; margin-bottom:6px; } .tl-row p{ color:var(--muted); font-size:15px; max-width:60ch; } .tl-tag{ font-family:var(--f-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; padding:8px 17px; border-radius:999px; border:1px solid var(--line); color:var(--accent-text); border-color:color-mix(in srgb, var(--accent) 35%, var(--line)); white-space:nowrap; } .tl-tag.solid{ background:var(--invert-bg); color:var(--invert-ink); border-color:transparent; } /* ---------- Почему мы: карточки-метрики ---------- */ .why{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,64px); } .metric-cards{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; } .metric-card{ background:var(--surface-solid); padding:32px 28px; display:flex; flex-direction:column; gap:16px; } .metric-ic{ width:46px; height:46px; border-radius:13px; flex:none; border:1px solid color-mix(in srgb, var(--accent) 35%, transparent); background:color-mix(in srgb, var(--accent) 8%, transparent); color:var(--accent); display:grid; place-items:center; } .metric-ic svg{ width:20px; height:20px; } .metric-card b{ font-family:var(--f-display); font-size:clamp(2rem,3vw,2.8rem); white-space:nowrap; color:var(--accent-text); font-variant-numeric:tabular-nums; } .metric-label{ font-size:14.5px; color:var(--muted); } .why-points{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px; } .why-points li{ display:flex; gap:14px; font-size:17px; } .why-points li::before{ content:""; width:7px; height:7px; margin-top:8px; border-radius:2px; background:var(--accent); flex:none; } .why-points b{ font-weight:700; } .why-points p{ color:var(--muted); font-size:15px; } /* ---------- Команда ---------- */ .team-roles{ display:flex; flex-wrap:wrap; gap:10px; margin-top:8px; } .team-roles span{ font-family:var(--f-mono); font-size:13px; padding:9px 16px; border:1px solid var(--line); border-radius:999px; color:var(--muted); } .avatars{ display:flex; margin-top:24px; } .avatars i{ width:46px; height:46px; border-radius:50%; border:1px dashed var(--line); background:var(--surface); margin-left:-10px; display:grid; place-items:center; font-family:var(--f-mono); font-size:9px; color:var(--faint); } .avatars i:first-child{ margin-left:0; } /* ---------- Отзывы ---------- */ .quotes{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } .quote{ border:1px solid var(--line); border-radius:var(--radius); padding:30px; background:var(--surface); display:flex; flex-direction:column; gap:18px; } .quote p{ font-size:16px; } .quote .who{ font-size:13px; color:var(--faint); font-family:var(--f-mono); } .quote .mark{ font-family:var(--f-display); font-size:2rem; color:var(--accent); line-height:.6; } /* ---------- Стек ---------- */ .stack{ overflow:hidden; border-block:1px solid var(--line-soft); padding-block:22px; } .stack-row{ display:flex; gap:38px; width:max-content; animation:marq 38s linear infinite; font-family:var(--f-mono); font-size:14px; color:var(--muted); } .stack-row span::before{ content:"◆"; color:var(--accent); margin-right:38px; opacity:.55; } @keyframes marq{ to{ transform:translateX(-50%); } } /* ---------- Квиз ---------- */ /* ---------- Финальный CTA ---------- */ .final{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,60px); align-items:start; } .contacts-list{ display:flex; flex-direction:column; gap:14px; margin-top:24px; } .contacts-list a, .contacts-list div{ display:flex; align-items:center; gap:14px; font-size:16.5px; color:var(--muted); } .contacts-list svg{ width:20px; height:20px; color:var(--accent); flex:none; } .contacts-list a:hover{ color:var(--text); } /* ---------- Футер ---------- */ footer.site{ border-top:1px solid var(--line); padding-block:72px 44px; background:var(--footer-bg); } .foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; } .foot-grid h4{ font-family:var(--f-mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); font-weight:700; margin-bottom:18px; } .foot-grid a, .foot-grid p{ display:block; font-size:15px; color:var(--muted); margin-bottom:11px; } .foot-grid a:hover{ color:var(--text); } .foot-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-top:44px; padding-top:22px; border-top:1px solid var(--line-soft); font-size:12.5px; color:var(--faint); font-family:var(--f-mono); } /* ---------- FAQ: карточки с бейджем Q# ---------- */ .faq{ display:flex; flex-direction:column; gap:12px; } .faq details{ border:1px solid var(--line); border-radius:18px; background:var(--surface); backdrop-filter:var(--glass); -webkit-backdrop-filter:var(--glass); padding:0 24px; transition:border-color .15s ease; } .faq details[open]{ border-color:color-mix(in srgb, var(--accent) 35%, var(--line)); } .faq summary{ list-style:none; cursor:pointer; padding:22px 0; display:flex; align-items:center; gap:18px; } .faq summary::-webkit-details-marker{ display:none; } .faq-q{ font-family:var(--f-mono); font-size:12px; font-weight:700; color:var(--accent); flex:none; border:1px solid color-mix(in srgb, var(--accent) 35%, transparent); border-radius:9px; padding:6px 9px; } .faq summary b{ font-family:var(--f-display); font-weight:600; font-size:clamp(1.05rem,1.6vw,1.19rem); letter-spacing:-0.015em; flex:1; } .faq-toggle{ width:32px; height:32px; border-radius:50%; border:1px solid var(--line); flex:none; display:grid; place-items:center; color:var(--muted); transition:transform .2s ease, border-color .2s ease, color .2s ease; } .faq details[open] .faq-toggle{ transform:rotate(45deg); border-color:var(--accent); color:var(--accent); } .faq details p{ padding:0 0 26px 54px; color:var(--muted); font-size:15.5px; max-width:74ch; } /* ---------- Плавающие кнопки: консультация в WhatsApp / Telegram ---------- */ .float{ position:fixed; right:20px; bottom:20px; z-index:50; display:flex; flex-direction:column; gap:12px; } .fl{ position:relative; width:58px; height:58px; border-radius:50%; display:grid; place-items:center; color:#fff; box-shadow:0 14px 32px -8px rgba(0,0,0,.55); transition:transform .18s ease, box-shadow .18s ease; } .fl svg{ width:29px; height:29px; } .fl-wa{ background:#25D366; } .fl-tg{ background:#229ED9; } .fl:hover, .fl:focus-visible{ transform:translateY(-3px) scale(1.06); } .fl-wa::after{ content:""; position:absolute; inset:0; border-radius:50%; animation:flPulse 2.6s ease-out infinite; pointer-events:none; } @keyframes flPulse{ 0%{ box-shadow:0 0 0 0 rgba(37,211,102,.55); } 70%{ box-shadow:0 0 0 18px rgba(37,211,102,0); } 100%{ box-shadow:0 0 0 0 rgba(37,211,102,0); } } .fl-tip{ position:absolute; right:calc(100% + 14px); top:50%; transform:translate(6px,-50%); background:var(--surface-solid); color:var(--text); border:1px solid var(--line); border-radius:999px; padding:9px 16px; font-size:13.5px; font-weight:600; white-space:nowrap; box-shadow:var(--shadow); opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease; } .fl:hover .fl-tip, .fl:focus-visible .fl-tip{ opacity:1; transform:translate(0,-50%); } @media (hover:none){ .fl-tip{ display:none; } } .mobile-bar{ display:none; } /* ---------- Legal ---------- */ .legal{ max-width:760px; } .legal h1{ font-size:clamp(1.8rem,4vw,2.6rem); margin-bottom:12px; } .legal h2{ font-family:var(--f-text); font-size:1.15rem; margin:32px 0 10px; } .legal p, .legal li{ color:var(--muted); font-size:16.5px; margin-bottom:12px; } .legal ul{ padding-left:20px; } .legal .back-home{ display:inline-flex; align-items:center; gap:8px; padding:12px 22px; border:1px solid var(--line); border-radius:999px; color:var(--text); font-weight:600; } .legal .back-home:hover{ border-color:var(--accent); color:var(--accent-text); } .legal .updated{ font-family:var(--f-mono); font-size:12px; color:var(--faint); } .legal .ph{ color:var(--text); } /* ---------- Ошибки ---------- */ .errpage{ min-height:60vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:18px; padding:80px var(--pad); } .errpage .code{ font-family:var(--f-mono); color:var(--accent); font-size:14px; letter-spacing:.2em; } /* ---------- Адаптив ---------- */ @media (max-width:1000px){ .cases{ grid-template-columns:repeat(2,minmax(0,1fr)); } .hero-inner{ grid-template-columns:1fr; } .lead-card{ max-width:520px; } .services{ grid-template-columns:repeat(2,1fr); } .services .svc:nth-child(3n){ border-right:1px solid var(--line); } .services .svc:nth-child(2n){ border-right:none; } .why, .final{ grid-template-columns:1fr; } .quotes{ grid-template-columns:1fr; } } /* Свернуть навигацию в бургер, пока десктопное меню не помещается */ @media (max-width:940px){ .nav > .nav-links, .nav > .lang, .nav > .btn.nav-cta{ display:none; } .burger{ display:block; } .hdr-wa{ display:inline-grid; place-items:center; flex:none; width:44px; height:44px; border-radius:50%; background:#25D366; color:#fff; box-shadow:0 8px 22px -8px rgba(37,211,102,.7); } .hdr-wa svg{ width:23px; height:23px; } .nav{ gap:10px; } .mmenu{ display:block; position:absolute; left:0; right:0; top:100%; z-index:2; padding:6px var(--pad) 22px; overflow-y:auto; overscroll-behavior:contain; background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 9%, var(--surface-solid)) 0%, var(--surface-solid) 60%); border-bottom:1px solid var(--line); border-radius:0 0 28px 28px; box-shadow:var(--shadow-lg); opacity:0; visibility:hidden; transform:translateY(-12px); transition:opacity .25s ease, transform .3s ease, visibility 0s linear .3s; } .mmenu.open{ opacity:1; visibility:visible; transform:none; transition:opacity .25s ease, transform .3s ease; } .mm-links{ display:flex; flex-direction:column; } .mm-links a{ display:flex; align-items:center; gap:16px; padding:19px 2px; border-bottom:1px solid var(--line-soft); font-family:var(--f-display); font-weight:700; font-size:1.55rem; letter-spacing:-0.02em; line-height:1.1; opacity:0; transform:translateY(10px); transition:opacity .3s ease, transform .3s ease, color .15s ease; } .mm-links a i{ font-style:normal; font-family:var(--f-mono); font-size:12px; font-weight:700; letter-spacing:.06em; color:var(--accent); width:26px; flex:none; } .mm-links a span{ flex:1; } .mm-links a svg{ flex:none; color:var(--faint); transition:transform .2s ease, color .2s ease; } .mm-links a:hover, .mm-links a:focus-visible{ color:var(--accent-text); } .mm-links a:hover svg{ color:var(--accent); transform:translate(3px,-3px); } .mmenu.open .mm-links a{ opacity:1; transform:none; } .mmenu.open .mm-links a:nth-child(2){ transition-delay:.04s; } .mmenu.open .mm-links a:nth-child(3){ transition-delay:.08s; } .mmenu.open .mm-links a:nth-child(4){ transition-delay:.12s; } .mmenu.open .mm-links a:nth-child(5){ transition-delay:.16s; } .mm-actions{ display:grid; gap:12px; margin-top:24px; } .mm-actions .btn-primary{ font-size:16.5px; padding:10px 10px 10px 26px; } .mm-actions .btn-outline{ font-size:16px; padding:9px 9px 9px 26px; } .mm-actions .btn-ic{ width:38px; height:38px; } .mm-actions .btn-outline .btn-ic{ width:38px; height:38px; } .mm-foot{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; margin-top:22px; padding-top:20px; border-top:1px solid var(--line-soft); } .mm-foot .lang{ display:flex; } .mm-phone{ font-family:var(--f-mono); font-size:14px; color:var(--muted); } .mm-phone:hover{ color:var(--text); } .mm-backdrop{ display:block; position:fixed; inset:0; z-index:58; background:var(--overlay); -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px); opacity:0; visibility:hidden; transition:opacity .25s ease, visibility 0s linear .25s; } .mm-backdrop.on{ opacity:1; visibility:visible; transition:opacity .25s ease; } } @media (max-width:720px){ :root{ --sect:clamp(52px, 12vw, 96px); --radius:18px; } .h-xl{ font-size:clamp(1.55rem, 7.2vw, 2.3rem); overflow-wrap:break-word; } .h-lg{ overflow-wrap:break-word; } .sect-head{ margin-bottom:32px; gap:14px; } .brand img{ height:44px; } .brand-foot img{ height:64px; } .hero-corners{ font-size:10.5px; } .metric-card{ padding:24px 18px; } .faq details p{ padding-left:0; } .faq details{ padding:0 18px; } .svc{ padding:28px 24px; min-height:0; } .compare .col{ padding:26px; } .hero{ padding-top:22px; } .hero h1{ margin:16px 0 16px; } .compare{ grid-template-columns:1fr; } .services{ grid-template-columns:1fr; } .services .svc{ border-right:none !important; } .cases{ grid-template-columns:1fr; } .logos{ gap:26px 14px; } .logos img{ flex:0 0 calc((100% - 28px) / 3); width:calc((100% - 28px) / 3); max-width:none; height:60px; } .case-body{ padding:20px 22px 24px; } .case-dialog{ width:calc(100vw - 16px); border-radius:20px; } .cd-thumb{ width:80px; height:52px; } .metric-cards{ grid-template-columns:1fr 1fr; } .tl-row{ grid-template-columns:1fr; gap:10px; padding:26px 0; } .tl-tag{ justify-self:start; } .foot-grid{ grid-template-columns:1fr 1fr; } .float{ right:14px; bottom:88px; gap:10px; } .fl{ width:52px; height:52px; } .fl svg{ width:26px; height:26px; } .mobile-bar{ display:flex; position:fixed; left:0; right:0; bottom:0; z-index:55; background:color-mix(in srgb,var(--bg) 92%, transparent); backdrop-filter:blur(12px); border-top:1px solid var(--line); padding:10px; gap:10px; } .mobile-bar .btn{ flex:1; justify-content:center; padding:13px 16px; font-size:15px; } .mobile-bar .btn-primary{ justify-content:space-between; padding:7px 7px 7px 20px; } } @media (max-width:420px){ .foot-grid{ grid-template-columns:1fr; } } /* Очень большие мониторы (2K/4K): шире контейнер и чуть крупнее текст */ @media (min-width:2200px){ :root{ --maxw:2140px; } body{ font-size:18.5px; } .h-xl{ font-size:5rem; } .h-lg{ font-size:4.4rem; } .lead{ font-size:1.25rem; } .hero .lead{ font-size:1.4rem; } .hero-inner{ grid-template-columns:minmax(0,1.2fr) minmax(460px,580px); } } @media (prefers-reduced-motion: reduce){ .stack-row, .marquee-row{ animation:none; } html{ scroll-behavior:auto; } .btn, .case, .fl, .case-media img, .mmenu, .mm-links a, .burger span{ transition:none; } .fl-wa::after{ animation:none; } .case-dialog[open]{ animation:none; } } /* ---------- Переключатель цветовых схем (только в режиме согласования) ---------- */ .theme-switch{ position:fixed; left:18px; bottom:18px; z-index:90; display:flex; align-items:center; gap:4px; padding:6px; background:var(--surface-solid); border:1px solid var(--line); border-radius:999px; box-shadow:var(--shadow); } .theme-switch .ts-label{ font-family:var(--f-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); padding:0 8px 0 10px; } .ts-btn{ display:inline-flex; align-items:center; gap:8px; padding:6px 12px 6px 6px; border-radius:999px; border:1px solid transparent; background:transparent; color:var(--muted); font-size:13px; font-weight:600; } .ts-btn i{ width:22px; height:22px; border-radius:50%; border:1px solid rgba(255,255,255,.35); flex:none; box-shadow:0 0 0 1px rgba(0,0,0,.25); } .ts-btn:hover{ color:var(--text); } .ts-btn[aria-pressed="true"]{ color:var(--text); border-color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, transparent); } .ts-aurora i{ background:linear-gradient(135deg,#0D1433 0%,#2A3A8C 55%,#22D3EE 100%); } .ts-ocean i{ background:linear-gradient(135deg,#0A2A72 0%,#0A6DB0 60%,#5BEBFF 100%); } .ts-light i{ background:linear-gradient(135deg,#FFFFFF 0%,#DCEBFF 55%,#0B78E8 100%); border-color:rgba(0,0,0,.25); } .ts-dusk i{ background:linear-gradient(135deg,#161955 0%,#43248A 60%,#D946EF 100%); } @media (max-width:720px){ .theme-switch{ left:10px; bottom:78px; } .theme-switch .ts-label, .ts-btn span{ display:none; } .ts-btn{ padding:6px; } }