/* ============================================================ Токены. Тёмная тема — основная, светлая — равноправная. Палитр две, по одной на приложение, и переключаются они классом на (его ставит _Layout по ViewData["Product"]): Yumedana — 夢棚, «полка снов»: мята и фиалка, холодная ночь; Tobirai — 扉, «дверь»: киноварь ворот тории и индиго, тёплая бумага. Вся разметка ходит только через токены, поэтому смена приложения — это смена значений здесь, а не отдельная таблица стилей. ============================================================ */ :root{ --ink:#0A0C12; --surface:#10141E; --surface-2:#161B27; --raise:#1D2331; --line:rgba(255,255,255,.09); --line-strong:rgba(255,255,255,.16); --fg:#E9ECF4; --fg-dim:#B4BCCD; --muted:#8B95AB; --mint:#5FE3C8; --mint-soft:rgba(95,227,200,.13); --violet:#8C7BF5; --violet-soft:rgba(140,123,245,.14); --amber:#FFC46B; /* Текст поверх заливки акцентом. Отдельный токен, потому что у мяты он тёмный, а у киновари в светлой теме — светлый: подобрать один на оба цвета нельзя. */ --on-accent:#04120E; --glass:rgba(10,12,18,.74); --shadow:0 24px 70px -28px rgba(0,0,0,.85); --aurora-a:rgba(95,227,200,.22); --aurora-b:rgba(140,123,245,.20); --sans:"Segoe UI Variable Text","Segoe UI",-apple-system,BlinkMacSystemFont,system-ui,"Helvetica Neue",Arial,sans-serif; --display:"Segoe UI Variable Display","Segoe UI",-apple-system,BlinkMacSystemFont,system-ui,"Helvetica Neue",Arial,sans-serif; --jp:"Yu Mincho","YuMincho","Hiragino Mincho ProN","Noto Serif JP","MS Mincho",serif; --mono:"Cascadia Mono","Consolas","SF Mono",ui-monospace,Menlo,monospace; --r-s:10px; --r-m:16px; --r-l:22px; --wrap:1180px; color-scheme:dark; } @media (prefers-color-scheme:light){ :root{ --ink:#F4F5F8; --surface:#FFFFFF; --surface-2:#F7F8FB; --raise:#EEF0F5; --line:rgba(16,20,30,.10); --line-strong:rgba(16,20,30,.20); --fg:#12161F; --fg-dim:#39414F; --muted:#5E6879; --mint:#0C8F79; --mint-soft:rgba(12,143,121,.10); --violet:#5B4BC4; --violet-soft:rgba(91,75,196,.10); --amber:#A9650A; --on-accent:#04120E; --glass:rgba(244,245,248,.82); --shadow:0 24px 60px -30px rgba(16,20,30,.45); --aurora-a:rgba(12,143,121,.14); --aurora-b:rgba(91,75,196,.12); color-scheme:light; } } /* Tobirai. Переопределения идут после :root и имеют ту же специфичность — выигрывают порядком, поэтому переставлять эти блоки выше нельзя. По той же причине светлая тема повторена внутри своего @media: иначе светлый :root, объявленный ниже, перебил бы тёмную палитру приложения. */ .app-tobirai{ --ink:#100C0D; --surface:#191315; --surface-2:#20191B; --raise:#2A2124; --line:rgba(255,240,235,.10); --line-strong:rgba(255,240,235,.18); --fg:#F3EAE5; --fg-dim:#CBBDB6; --muted:#9B8B84; --mint:#F2683F; --mint-soft:rgba(242,104,63,.14); --violet:#7C93E6; --violet-soft:rgba(124,147,230,.15); --amber:#F0B45C; --on-accent:#2A0B03; --glass:rgba(16,12,13,.74); --aurora-a:rgba(242,104,63,.20); --aurora-b:rgba(124,147,230,.18); } @media (prefers-color-scheme:light){ .app-tobirai{ --ink:#F8F4F0; --surface:#FFFFFF; --surface-2:#FBF7F3; --raise:#F1EAE4; --line:rgba(40,24,18,.10); --line-strong:rgba(40,24,18,.20); --fg:#1E1614; --fg-dim:#463A34; --muted:#6D5D55; --mint:#C2452A; --mint-soft:rgba(194,69,42,.10); --violet:#4457B8; --violet-soft:rgba(68,87,184,.10); --amber:#A8650A; /* На тёмной киновари тёмный текст не читается — здесь он светлый, в отличие от мяты Yumedana. Ради этого токен и заведён. */ --on-accent:#FFF6F2; --glass:rgba(248,244,240,.82); --shadow:0 24px 60px -30px rgba(40,24,18,.42); --aurora-a:rgba(194,69,42,.13); --aurora-b:rgba(68,87,184,.11); } } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:86px} body{ margin:0; background:var(--ink); color:var(--fg); font-family:var(--sans); font-size:17px; line-height:1.65; overflow-x:hidden; -webkit-font-smoothing:antialiased; } img,svg{max-width:100%} a{color:inherit} h1,h2,h3,h4{font-family:var(--display);text-wrap:balance;margin:0;font-weight:700;letter-spacing:-.025em;line-height:1.08} p{margin:0} ul,ol{margin:0;padding:0;list-style:none} button{font:inherit;color:inherit} code{font-family:var(--mono);font-size:.88em;background:var(--surface-2);border:1px solid var(--line);border-radius:5px;padding:1px 6px} ::selection{background:var(--mint);color:var(--ink)} :focus-visible{outline:2px solid var(--mint);outline-offset:3px;border-radius:4px} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .skip{ position:absolute;left:-9999px;top:12px;z-index:100; background:var(--mint);color:var(--on-accent);border-radius:999px;padding:10px 20px;font-weight:600;text-decoration:none; } .skip:focus{left:16px} .wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(20px,5vw,44px)} .section{padding-block:clamp(70px,9vw,130px);position:relative} .section + .section{border-top:1px solid var(--line)} /* ---------- Кандзи-рельс: маркер секции, а не украшение ---------- */ .shead{display:grid;grid-template-columns:64px 1fr;gap:clamp(20px,4vw,48px);align-items:start} .rail{ font-family:var(--jp); writing-mode:vertical-rl; font-size:clamp(26px,3vw,34px); line-height:1.25; color:var(--muted); opacity:.55; letter-spacing:.16em; justify-self:center; user-select:none; } .rail small{font-family:var(--mono);font-size:9px;letter-spacing:.32em;opacity:.75;writing-mode:vertical-rl} .eyebrow{ font-family:var(--mono);font-size:11.5px;letter-spacing:.26em;text-transform:uppercase; color:var(--mint);display:flex;align-items:center;gap:12px;margin-bottom:20px; } .eyebrow::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,var(--line-strong),transparent);max-width:180px} h2.big{font-size:clamp(1.95rem,3.7vw,2.9rem)} .lede{color:var(--fg-dim);font-size:clamp(1.02rem,1.4vw,1.14rem);max-width:64ch;margin-top:18px} .lede a{color:var(--mint)} .note{margin-top:26px;color:var(--muted);font-family:var(--mono);font-size:12.5px} .note a{color:var(--mint)} /* ---------- Хедер ---------- */ .top{ position:sticky;top:0;z-index:60; background:var(--glass); backdrop-filter:blur(18px) saturate(150%); -webkit-backdrop-filter:blur(18px) saturate(150%); border-bottom:1px solid transparent; transition:border-color .3s ease; } .top.stuck{border-bottom-color:var(--line)} .top .wrap{display:flex;align-items:center;gap:18px;height:70px} .brand{display:flex;align-items:center;gap:12px;text-decoration:none;margin-right:auto} .mark{ width:36px;height:36px;border-radius:11px;display:grid;place-items:center; background:linear-gradient(145deg,var(--violet),var(--mint)); color:var(--on-accent);font-family:var(--jp);font-size:19px;font-weight:700; box-shadow:0 6px 20px -8px var(--violet);flex:none; } .wordmark{font-family:var(--display);font-weight:700;font-size:1.16rem;letter-spacing:-.02em} .wordmark span{color:var(--mint)} .nav{display:flex;gap:26px;align-items:center} .nav a{color:var(--muted);text-decoration:none;font-size:.94rem;transition:color .2s} .nav a:hover{color:var(--fg)} /* ---------- Кнопки ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; padding:12px 22px;border-radius:999px;border:1px solid transparent; text-decoration:none;font-weight:600;font-size:.96rem;cursor:pointer; transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .25s,background .2s,border-color .2s; white-space:nowrap; } .btn-primary{background:var(--mint);color:var(--on-accent);box-shadow:0 10px 30px -12px var(--mint)} .btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 40px -14px var(--mint)} .btn-ghost{border-color:var(--line-strong);color:var(--fg);background:transparent} .btn-ghost:hover{border-color:var(--mint);color:var(--mint);transform:translateY(-2px)} .btn-lg{padding:16px 32px;font-size:1.03rem} .btn.is-disabled{opacity:.5;cursor:not-allowed;pointer-events:none} /* ---------- Герой ---------- */ .hero{position:relative;overflow:hidden;padding-block:clamp(48px,7vw,96px) clamp(64px,8vw,112px)} .hero-sub{padding-block:clamp(30px,4vw,52px) clamp(56px,7vw,92px)} .aurora{position:absolute;inset:-25% -10% auto;height:820px;pointer-events:none;z-index:0;filter:blur(10px)} .aurora b{position:absolute;display:block;border-radius:50%;filter:blur(90px)} .aurora b:nth-child(1){width:640px;height:640px;left:-6%;top:2%;background:var(--aurora-a);animation:drift 34s ease-in-out infinite alternate} .aurora b:nth-child(2){width:560px;height:560px;right:2%;top:-8%;background:var(--aurora-b);animation:drift 41s ease-in-out infinite alternate-reverse} @keyframes drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(60px,50px,0) scale(1.14)}} .hero .wrap{position:relative;z-index:1} .crumbs{ font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;color:var(--muted); margin-bottom:26px;display:flex;gap:9px; } .crumbs a{color:var(--muted);text-decoration:none} .crumbs a:hover{color:var(--mint)} .kicker{ display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11.5px; letter-spacing:.24em;text-transform:uppercase;color:var(--fg-dim); border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:7px 16px;margin-bottom:26px; } .kicker i{font-family:var(--jp);font-style:normal;font-size:15px;color:var(--mint);letter-spacing:0} h1{font-size:clamp(2.35rem,5.2vw,4rem);letter-spacing:-.038em;line-height:1;display:grid;gap:22px} h1 em{font-style:normal;color:var(--mint)} h1 .h1-key{ font-family:var(--sans);font-size:clamp(1.02rem,1.5vw,1.14rem);font-weight:400; letter-spacing:0;line-height:1.6;color:var(--fg-dim);max-width:56ch; } h1 .h1-key b{font-weight:600;color:var(--fg)} .h1-narrow{max-width:22ch} .hero p.lede{margin-top:26px;font-size:clamp(1.02rem,1.5vw,1.14rem)} .cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px} .meta-line{ margin-top:20px;font-family:var(--mono);font-size:12.5px;color:var(--muted); display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center; } .meta-line b{color:var(--fg-dim);font-weight:400} .meta-line a{color:var(--mint)} .dot{width:3px;height:3px;border-radius:50%;background:var(--muted);opacity:.6} .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:clamp(52px,7vw,84px);background:var(--line);border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden} .stat{background:var(--surface);padding:22px 20px} .stat b{display:block;font-family:var(--display);font-size:clamp(1.6rem,3vw,2.1rem);font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums} .stat span{display:block;font-size:.855rem;color:var(--muted);margin-top:4px;line-height:1.4} /* ---------- Две версии ---------- */ .apps{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px;margin-top:52px} .appcard{ background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l); padding:clamp(26px,3vw,36px);display:grid;gap:22px;align-content:start; transition:transform .3s cubic-bezier(.2,.8,.2,1),border-color .3s; } .appcard:hover{transform:translateY(-4px);border-color:var(--line-strong)} .appcard-top{display:grid;gap:14px} .appcard h3{font-size:clamp(1.3rem,2.2vw,1.6rem)} .appcard p{color:var(--muted);font-size:.975rem;line-height:1.62} .pill{ justify-self:start;font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase; background:var(--mint-soft);color:var(--mint);border:1px solid var(--line);border-radius:999px;padding:5px 13px; } .pill.violet{background:var(--violet-soft);color:var(--violet)} .ticks{display:grid;gap:11px} .ticks li{position:relative;padding-left:26px;color:var(--fg-dim);font-size:.95rem;line-height:1.5} .ticks li::before{ content:"";position:absolute;left:4px;top:.62em;width:8px;height:8px;border-radius:2px; background:var(--mint);opacity:.85; } .appcard-cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:2px} .hint{font-family:var(--mono);font-size:11.5px;color:var(--muted)} /* ---------- Возможности ---------- */ .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:16px;margin-top:52px} /* Карточки без заголовка секции — отступ сверху не нужен. */ .cards-top{margin-top:0} .card{ background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);padding:28px 26px 30px; display:grid;gap:14px;align-content:start;position:relative;overflow:hidden; transition:transform .3s cubic-bezier(.2,.8,.2,1),border-color .3s,background .3s; } .card:hover{transform:translateY(-5px);border-color:var(--line-strong);background:var(--surface-2)} .card .ico{ width:46px;height:46px;border-radius:13px;display:grid;place-items:center; background:var(--mint-soft);color:var(--mint);border:1px solid var(--line); } .card .ico svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .card h3{font-size:1.2rem} .card p{color:var(--muted);font-size:.955rem;line-height:1.62} .card .src{font-family:var(--mono);font-size:11px;color:var(--fg-dim);letter-spacing:.04em;border-top:1px dashed var(--line);padding-top:12px;margin-top:2px} .card.violet .ico{background:var(--violet-soft);color:var(--violet)} /* ---------- Галерея снимков ---------- */ .shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px;margin-top:48px;align-items:start} .shots-group{ font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase; color:var(--muted);margin-top:44px; } .shots-group + .shots{margin-top:14px} .shot{ display:grid;gap:0;padding:0;text-align:left;cursor:zoom-in; background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden; transition:transform .3s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .3s; } .shot:hover{transform:translateY(-4px);border-color:var(--mint);box-shadow:var(--shadow)} .shot img{width:100%;height:auto;display:block;background:#0B0E13} /* Снимок с телефона вытянут по вертикали: ограничиваем высоту и центрируем. */ .shot.portrait img{width:auto;max-width:100%;max-height:520px;margin-inline:auto} .shot.portrait{align-content:start} .shot-cap{ padding:14px 16px 16px;color:var(--muted);font-size:.9rem;line-height:1.5; border-top:1px solid var(--line); } /* Просмотр снимка целиком */ .lb{ border:none;padding:0;background:transparent;max-width:none;max-height:none; width:100vw;height:100vh;color:var(--fg); display:none;align-items:center;justify-content:center;gap:clamp(4px,2vw,20px); } .lb[open]{display:flex} .lb::backdrop{background:rgba(6,8,12,.88);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)} .lb-fig{margin:0;display:grid;gap:14px;justify-items:center;max-width:min(1500px,88vw)} .lb-fig img{ max-width:100%;max-height:78vh;width:auto;height:auto;display:block; border:1px solid var(--line-strong);border-radius:var(--r-m);background:#0B0E13; box-shadow:0 30px 80px -30px rgba(0,0,0,.9); } .lb-fig figcaption{ display:flex;gap:14px;align-items:baseline;justify-content:center;flex-wrap:wrap; color:var(--fg-dim);font-size:.95rem;text-align:center;max-width:70ch; } .lb-fig figcaption b{font-family:var(--mono);font-size:11.5px;color:var(--muted);font-weight:400} .lb-nav,.lb-x{ border:1px solid var(--line-strong);background:var(--glass);color:var(--fg); cursor:pointer;display:grid;place-items:center;flex:none; transition:border-color .2s,color .2s,background .2s; } .lb-nav{width:52px;height:52px;border-radius:50%;font-size:28px;line-height:1;padding-bottom:4px} .lb-nav:hover,.lb-x:hover{border-color:var(--mint);color:var(--mint)} .lb-x{position:absolute;top:20px;right:20px;width:44px;height:44px;border-radius:50%;font-size:15px} @media (max-width:760px){ .lb-nav{position:absolute;bottom:22px;width:46px;height:46px} .lb-nav.prev{left:calc(50% - 60px)} .lb-nav.next{right:calc(50% - 60px)} .lb-fig{max-width:94vw} .lb-fig img{max-height:64vh} } /* ---------- Шаги установки ---------- */ .steps{counter-reset:step;display:grid;gap:18px;margin-top:48px} .steps li{ counter-increment:step;position:relative;background:var(--surface);border:1px solid var(--line); border-radius:var(--r-m);padding:24px 26px 24px 74px; } .steps li::before{ content:counter(step);position:absolute;left:24px;top:22px; width:32px;height:32px;border-radius:10px;display:grid;place-items:center; background:var(--mint-soft);color:var(--mint);border:1px solid var(--line); font-family:var(--mono);font-size:13px;font-weight:600; } .steps b{display:block;font-family:var(--display);font-size:1.08rem;letter-spacing:-.015em;margin-bottom:6px} .steps p{color:var(--muted);font-size:.95rem;line-height:1.6} .steps a{color:var(--mint)} /* ---------- Карточки загрузки ---------- */ .dlgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;margin-top:48px} /* Сетка без заголовка секции — отступ сверху не нужен. */ .dlgrid-top{margin-top:0} /* Когда сборок два набора (компьютер и телефон), каждый подписан той же строкой, что и группы в галерее, — подпись стоит вплотную к своей сетке. */ .shots-group + .dlgrid{margin-top:14px} .dlcard{ background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);padding:26px; display:grid;gap:16px;align-content:start;transition:border-color .3s,transform .3s cubic-bezier(.2,.8,.2,1); } .dlcard:hover{transform:translateY(-4px);border-color:var(--line-strong)} .dlcard.best{border-color:var(--mint);box-shadow:0 0 0 1px var(--mint-soft)} .dlcard-head{display:flex;gap:14px;align-items:flex-start} .dlcard-head h3{font-size:1.16rem} .dlcard-head p{color:var(--muted);font-size:.93rem;line-height:1.55;margin-top:8px} .dlcard .badge{ margin-left:auto;flex:none;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase; background:var(--mint);color:var(--on-accent);border-radius:999px;padding:4px 11px;font-weight:600; } .dlcard-meta{display:flex;flex-wrap:wrap;gap:8px} .tagbox{font-family:var(--mono);font-size:11px;border:1px solid var(--line);border-radius:6px;padding:5px 10px;color:var(--fg-dim)} .dlcard .btn{justify-self:start} /* ---------- Окно выбора сборки ---------- */ .dlg{ margin:auto;border:none;padding:0;background:transparent; width:min(540px,calc(100vw - 28px));color:var(--fg); } .dlg::backdrop{background:rgba(6,8,12,.7);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)} .dlg-in{ position:relative;background:var(--surface);border:1px solid var(--line-strong); border-radius:var(--r-l);box-shadow:var(--shadow);padding:clamp(24px,4vw,34px); } .dlg[open] .dlg-in{animation:fadeUp .32s cubic-bezier(.2,.8,.2,1) both} @keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} .dlg h3{font-size:clamp(1.28rem,2.4vw,1.55rem);padding-right:40px} .dlg .dlg-sub{color:var(--muted);font-size:.94rem;margin-top:8px} .dlg-group{ font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase; color:var(--muted);margin-top:22px; } .dlg-opts{display:grid;gap:10px;margin-top:10px} .dlg-opt{ display:flex;align-items:center;gap:14px;text-decoration:none; border:1px solid var(--line);background:var(--surface-2);border-radius:var(--r-m);padding:14px 16px; transition:border-color .2s,background .2s,transform .18s cubic-bezier(.2,.8,.2,1); } .dlg-opt:hover{border-color:var(--mint);background:var(--raise);transform:translateY(-2px)} .dlg-opt .arch{font-family:var(--mono);font-size:.95rem;font-weight:600;min-width:58px;flex:none} .dlg-opt .desc{font-size:.84rem;color:var(--muted);line-height:1.4} .dlg-opt .desc b{display:block;color:var(--fg-dim);font-weight:600;font-size:.95rem;margin-bottom:2px} .dlg-opt .size{margin-left:auto;font-family:var(--mono);font-size:11.5px;color:var(--muted);white-space:nowrap;flex:none} .dlg-foot{ margin-top:20px;padding-top:16px;border-top:1px solid var(--line); font-family:var(--mono);font-size:11.5px;color:var(--muted);line-height:1.7; } .dlg-x{ position:absolute;top:16px;right:16px;width:34px;height:34px;border-radius:50%; border:1px solid var(--line);background:var(--surface-2);cursor:pointer;display:grid;place-items:center; font-size:13px;color:var(--muted);transition:color .2s,border-color .2s; } .dlg-x:hover{color:var(--fg);border-color:var(--line-strong)} @media (max-width:520px){ .dlg-opt{flex-wrap:wrap;gap:6px 12px} .dlg-opt .desc{width:100%;order:3} } /* ---------- Каталог аниме: /anime и /anime/{id} ---------- */ .find{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px;max-width:660px} .find input{ flex:1;min-width:220px;font:inherit;font-size:1rem;color:var(--fg); background:var(--surface);border:1px solid var(--line-strong);border-radius:999px;padding:13px 22px; } .find input::placeholder{color:var(--muted)} .find input:focus-visible{outline:2px solid var(--mint);outline-offset:2px} .hits{display:grid;gap:10px;margin-top:8px} .hit{ display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px;text-decoration:none; background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);padding:16px 20px; transition:transform .3s cubic-bezier(.2,.8,.2,1),border-color .3s; } .hit:hover{transform:translateY(-2px);border-color:var(--mint)} .hit .names{display:grid;gap:3px;min-width:0} .hit .names b{font-size:1.02rem;font-weight:600} .hit .alt{color:var(--muted);font-size:.9rem} .hit .facts{ margin-left:auto;display:flex;gap:16px;white-space:nowrap; font-family:var(--mono);font-size:11.5px;color:var(--muted); } /* Постер слева, всё остальное справа. Ширина колонки — под привычные 2:3 обложки. */ .title-grid{display:grid;grid-template-columns:280px minmax(0,1fr);gap:clamp(24px,4vw,48px);align-items:start;margin-top:40px} .title-poster{border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden;background:var(--surface)} .title-poster img{display:block;width:100%;height:auto} .facts-list{margin:0;border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden} .facts-list div{display:flex;gap:16px;padding:12px 18px;background:var(--surface);font-size:.94rem} .facts-list div + div{border-top:1px solid var(--line)} .facts-list dt{color:var(--muted);flex:none;width:120px} .facts-list dd{margin:0;color:var(--fg-dim)} .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px} .title-grid .prose{margin-top:28px} .watch-top{margin-top:22px} .watch-top a{ display:inline-flex;align-items:center;gap:9px; color:var(--mint);text-decoration:none;font-weight:600;font-size:1.02rem; } .watch-top a::after{content:"→";transition:transform .2s} .watch-top a:hover{text-decoration:underline} .watch-top a:hover::after{transform:translateX(3px)} /* Призыв поставить приложение. Подсвечен акцентом, чтобы не читался как ещё одна панель с данными. */ .watch{ margin-top:30px;display:grid;gap:14px;padding:26px; background:var(--mint-soft);border:1px solid var(--line-strong);border-radius:var(--r-l); } .watch h2{font-size:clamp(1.14rem,2vw,1.38rem)} .watch p{color:var(--fg-dim);font-size:.96rem;line-height:1.62;max-width:62ch} .watch .cta-row{margin-top:2px} .title-grid .note{display:flex;flex-wrap:wrap;align-items:center;gap:10px} @media (max-width:760px){ .title-grid{grid-template-columns:1fr} .title-poster{max-width:280px} .hit .facts{margin-left:0;width:100%} } /* ---------- Текстовый блок ---------- */ .prose{margin-top:44px;max-width:74ch;display:grid;gap:20px} .prose p{color:var(--muted);font-size:1.01rem;line-height:1.75} .prose p b{color:var(--fg-dim);font-weight:600} .prose a{color:var(--mint)} .prose h3{font-size:clamp(1.16rem,2vw,1.36rem);margin-top:16px;color:var(--fg)} .prose h3::before{ content:"";display:block;width:34px;height:2px;border-radius:2px; background:var(--mint);margin-bottom:14px;opacity:.85; } .code{ background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m); padding:18px 20px;overflow-x:auto;margin:0; } .code code{background:none;border:0;padding:0;font-size:12.5px;line-height:1.8;color:var(--fg-dim);white-space:pre} /* ---------- FAQ ---------- */ .faq{margin-top:44px;border-top:1px solid var(--line)} .faq details{border-bottom:1px solid var(--line)} .faq summary{ cursor:pointer;list-style:none;padding:24px 44px 24px 0;position:relative; font-family:var(--display);font-weight:600;font-size:clamp(1.02rem,1.6vw,1.18rem);letter-spacing:-.015em; transition:color .2s; } .faq summary::-webkit-details-marker{display:none} .faq summary:hover{color:var(--mint)} .faq summary::after{ content:"";position:absolute;right:6px;top:50%;width:11px;height:11px; border-right:2px solid var(--muted);border-bottom:2px solid var(--muted); transform:translateY(-70%) rotate(45deg);transition:transform .25s ease,border-color .25s; } .faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg);border-color:var(--mint)} .faq .ans{padding:0 8% 26px 0;color:var(--muted);font-size:1rem;line-height:1.7;max-width:72ch} .faq .ans a{color:var(--mint)} .faq .ans b{color:var(--fg-dim)} /* ---------- Финальный CTA ---------- */ .final{position:relative;overflow:hidden;text-align:center;border-top:1px solid var(--line)} .final .glow{position:absolute;left:50%;top:0;width:900px;height:520px;transform:translate(-50%,-42%);background:radial-gradient(closest-side,var(--aurora-a),transparent 72%);pointer-events:none} .final .wrap{position:relative;z-index:1} .final h2{font-size:clamp(2.1rem,4.6vw,3.4rem);letter-spacing:-.035em} .final p{margin:22px auto 0;color:var(--fg-dim);max-width:52ch} .final .cta-row{justify-content:center} .final .meta-line{justify-content:center} .jp-big{font-family:var(--jp);font-size:clamp(38px,7vw,64px);color:var(--muted);opacity:.35;letter-spacing:.3em;margin-bottom:26px} /* ---------- Футер ---------- */ footer{border-top:1px solid var(--line);background:var(--surface);padding-block:56px 40px} .fgrid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:36px} .fgrid h5{font-family:var(--mono);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin:0 0 16px;font-weight:400} .fgrid a{color:var(--muted);text-decoration:none;font-size:.93rem;display:inline-block;padding:4px 0;transition:color .2s} .fgrid a:hover{color:var(--mint)} .fgrid p{color:var(--muted);font-size:.9rem;max-width:36ch;margin-top:14px} .fbot{ margin-top:44px;padding-top:22px;border-top:1px solid var(--line); display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center; font-family:var(--mono);font-size:11.5px;color:var(--muted); } .fbot .grow{margin-left:auto} /* ---------- Анимация появления ---------- */ .rv{opacity:0;transform:translateY(16px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0ms)} .rv.in{opacity:1;transform:none} /* ---------- Адаптив ---------- */ @media (max-width:1000px){ .fgrid{grid-template-columns:1fr 1fr} } @media (max-width:760px){ .nav{display:none} .stats{grid-template-columns:1fr 1fr} .shead{grid-template-columns:1fr} .rail{display:none} body{font-size:16px} .top .wrap{height:64px} .steps li{padding:20px 20px 20px 66px} } @media (max-width:520px){ .fgrid{grid-template-columns:1fr} .cta-row .btn{width:100%} .fbot .grow{margin-left:0} } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important} .rv{opacity:1;transform:none} }