:root{ /* ЦВЕТОВАЯ СХЕМА. Чтобы сменить тему — поставь на нужный data-theme (см. блоки [data-theme=...] ниже) или замени значения прямо здесь. */ --bg:#0a0a0a; --panel:#111; --panel2:#161616; --line:#242424; --text:#f2f2f2; --muted:#8a8a8a; --muted2:#a5a5a5; --accent:#37d67a; --accentdim:#1c7a45; --on-accent:#04140a; --pad:24px; } /* ===== ТЁМНО-СИНЯЯ ===== */ [data-theme="navy"]{ --bg:#0a0e18; --panel:#131b2d; --panel2:#18223a; --line:#28324c; --text:#eef2f9; --muted:#8b93a8; --muted2:#9aa3ba; --accent:#3d7bff; --accentdim:#2a5296; --on-accent:#ffffff; } /* ===== ПОЛУНОЧНАЯ (глубокий синий) ===== */ [data-theme="midnight"]{ --bg:#0b1428; --panel:#122038; --panel2:#16294a; --line:#26395c; --text:#eaf1fb; --muted:#8ea0bd; --muted2:#9db0cd; --accent:#5b9dff; --accentdim:#356; --on-accent:#08152e; } /* ===== СВЕТЛАЯ СОВРЕМЕННАЯ ===== */ [data-theme="light"]{ --bg:#eef2f8; --panel:#ffffff; --panel2:#f4f7fc; --line:#dde4ef; --text:#0f1b31; --muted:#5c6b86; --muted2:#6b7890; --accent:#2f6bff; --accentdim:#9cc0ff; --on-accent:#ffffff; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;padding:0;background:var(--bg);color:var(--text); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Arial,sans-serif; -webkit-font-smoothing:antialiased;overflow-x:hidden} a{color:inherit;text-decoration:none} img{max-width:100%} .wrap{max-width:1040px;margin:0 auto;padding:0 var(--pad)} header.top{display:flex;justify-content:center;align-items:center;height:92px} .logo{font-weight:800;letter-spacing:.08em;font-size:18px;display:inline-flex;align-items:center;gap:10px} .logo img{height:30px;width:auto;display:block} /* ================= HERO ================= */ .hero{text-align:center;max-width:820px;margin:0 auto;padding:14px 0 0} .kicker{color:var(--muted);font-size:13px;letter-spacing:.16em;text-transform:uppercase; display:inline-flex;align-items:center;gap:10px;line-height:1.5} .kicker::before,.kicker::after{content:'';width:26px;height:1px;background:var(--line);flex:0 0 auto} .h1{font-weight:800;line-height:1.02;letter-spacing:-.025em; font-size:clamp(38px,8.6vw,88px);margin:20px 0 0} .h1 em{font-style:normal;position:relative;color:var(--accent);white-space:nowrap} .h1 em::after{content:'';position:absolute;left:0;right:0;bottom:.07em;height:.085em; background:var(--accent);opacity:.32;border-radius:3px} .lead{color:var(--muted);max-width:540px;margin:24px auto 0;line-height:1.6;font-size:17px} .lead .accent{color:var(--text)} .lead .accent b{color:var(--accent);font-weight:600} /* ================= STATS (без коробок — чистая типографика) ================= */ .stats-sec{margin-top:76px} .statgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px 20px;max-width:920px;margin:0 auto} .statgrid .s{text-align:center} .statgrid b{display:block;color:var(--accent);font-weight:800; font-size:clamp(42px,5.6vw,60px);line-height:1;letter-spacing:-.03em; font-variant-numeric:tabular-nums} .statgrid .tick{width:26px;height:3px;background:var(--accent);border-radius:3px; margin:14px auto 12px;opacity:.55} .statgrid span{display:block;font-size:14.5px;font-weight:500;color:var(--muted2); line-height:1.45;max-width:190px;margin:0 auto} /* ================= rules / domain ================= */ .rule{height:1px;background:var(--line);max-width:760px;margin:34px auto} .domain{font-family:"SFMono-Regular",Consolas,Menlo,monospace;color:var(--accent); display:block;text-align:center;font-size:15px} /* ================= contact ================= */ .contact-sec{text-align:center} .contact-cap{color:var(--text);font-size:17px;font-weight:600;margin:0 0 18px} .btns{display:flex;gap:12px;flex-wrap:wrap;justify-content:center} .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px; background:var(--panel2);border:1px solid var(--line);padding:14px 24px;border-radius:12px; font-weight:600;font-size:15px;transition:.2s;cursor:pointer} .btn:hover{transform:translateY(-2px);border-color:#3a3a3a;background:#1d1d1d} .btn svg{width:18px;height:18px;flex:0 0 auto} .btn.vk:hover{border-color:#4a76a8;color:#7aa7db} .btn.tg{background:var(--accent);color:var(--on-accent);border-color:var(--accent)} .btn.tg svg{color:var(--on-accent)} .btn.tg:hover{filter:brightness(1.08)} .btn.edu{position:relative;overflow:visible} .btn.edu:hover{border-color:var(--accentdim);color:var(--accent)} /* значок «new» на кнопке платформы — приклеенная бирка с лёгким наклоном, чтобы глаз цеплялся за неё раньше, чем за остальные кнопки ряда */ .btn-badge{ position:absolute;top:-10px;right:-10px; background:var(--accent);color:var(--on-accent); font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase; padding:3px 7px;border-radius:999px;transform:rotate(9deg); box-shadow:0 3px 8px rgba(0,0,0,.35);pointer-events:none; animation:badge-pop 2.4s ease-in-out infinite; } @keyframes badge-pop{0%,100%{transform:rotate(9deg) scale(1)}50%{transform:rotate(9deg) scale(1.12)}} @media (prefers-reduced-motion: reduce){.btn-badge{animation:none}} /* ================= section titles ================= */ .sec-title{font-size:14px;text-transform:uppercase;letter-spacing:.14em;color:var(--muted); text-align:center;margin:0 0 28px;font-weight:600} /* ================= О репетиторе ================= */ .about{margin-top:84px} .cred-name{text-align:center;font-size:clamp(28px,4.6vw,42px);font-weight:800; letter-spacing:-.02em;line-height:1.1;margin:0 0 8px} .cred-role{text-align:center;color:var(--muted);font-size:16px;margin:0 0 34px} .creds{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;max-width:900px;margin:0 auto} .cred{border-left:2px solid var(--accent);padding:4px 0 4px 18px} .cred b{display:block;font-size:20px;font-weight:700;letter-spacing:-.01em;line-height:1.25} .cred span{display:block;margin-top:8px;color:var(--muted);font-size:15px;line-height:1.5} /* ================= features (платформа) ================= */ .features{margin-top:84px} .feat-list{display:grid;grid-template-columns:repeat(2,1fr);gap:0 46px; max-width:900px;margin:0 auto;border-top:1px solid var(--line)} .f{display:flex;gap:18px;padding:24px 2px;border-bottom:1px solid var(--line)} .f i{font-family:"SFMono-Regular",Consolas,Menlo,monospace;font-style:normal; color:var(--accent);font-size:13px;letter-spacing:.05em;padding-top:6px;flex:0 0 26px} .f b{display:block;font-size:19px;font-weight:700;letter-spacing:-.01em;line-height:1.3} .f span{display:block;margin-top:7px;color:var(--muted);font-size:15px;line-height:1.55} /* ================= promo (текст + тетрадь) ================= */ .promo{margin-top:88px;display:grid;grid-template-columns:0.78fr 1.42fr;gap:40px;align-items:center} /* тетрадь крупнее на десктопе (на телефоне переопределяется ниже) */ .promo .stack{max-width:none} .promo .stack .pg{width:64%} .promo-text h3{font-size:clamp(30px,4.6vw,50px);font-weight:800;letter-spacing:-.025em; line-height:1.06;margin:0 0 20px} .promo-text h3 em{font-style:normal;color:var(--accent)} .promo-text p{color:var(--muted);font-size:17px;line-height:1.62;margin:0 0 14px;max-width:440px} .promo-text .btns{margin-top:20px} .promo-media{position:relative;display:flex;justify-content:center;align-items:center;padding:10px 0} .promo-hint{text-align:center;color:var(--muted);font-size:13px;margin:22px 0 0} /* одна страница — с лёгким наклоном */ .promo-media.is-one img{width:100%;max-width:460px;background:#fff;border-radius:8px;cursor:zoom-in; transform:rotate(-3deg);box-shadow:0 34px 70px rgba(0,0,0,.6),0 6px 18px rgba(0,0,0,.4); transition:transform .35s ease} .promo-media.is-one:hover img{transform:rotate(-1.5deg) translateY(-6px)} /* ---- РАЗВОРОТ КНИГИ ---- */ .book{position:relative;width:100%;max-width:720px;perspective:2400px} /* белые листы «сборника» позади разворота */ .book::before,.book::after{content:'';position:absolute;inset:6px 0;background:#fbfbfb;border-radius:6px; z-index:0;box-shadow:0 30px 55px rgba(0,0,0,.4)} .book::before{transform:rotate(-1.3deg) translate(-1.4%,1.6%)} .book::after{transform:rotate(1.1deg) translate(1.4%,1%)} .book-pages{position:relative;z-index:2;display:flex;border-radius:6px;overflow:hidden; transform:rotateX(3deg);transform-origin:center 70%; box-shadow:0 46px 84px rgba(0,0,0,.6),0 14px 30px rgba(0,0,0,.45); transition:transform .4s ease} .book:hover .book-pages{transform:rotateX(1.5deg) translateY(-6px)} .book-page{display:block;width:50%;background:#fff} .book-page.book-left{box-shadow:inset -22px 0 30px -22px rgba(0,0,0,.35)} .book-page.book-right{box-shadow:inset 22px 0 30px -22px rgba(0,0,0,.35)} /* переплёт по центру */ .book-pages::after{content:'';position:absolute;top:0;bottom:0;left:50%;width:9%; transform:translateX(-50%);z-index:3;pointer-events:none; background:linear-gradient(90deg,transparent,rgba(0,0,0,.05) 28%, rgba(0,0,0,.26) 48%,rgba(0,0,0,.30) 50%,rgba(0,0,0,.26) 52%, rgba(0,0,0,.05) 72%,transparent)} /* ---- ДВА ЛИСТА ВНАХЛЁСТ (видно ОБА) ---- */ /* левый и правый лист перекрываются только краями — содержимое обоих читается. Клик ничего не открывает, при наведении — лёгкая анимация. */ .stack{position:relative;display:block;width:100%;max-width:660px;margin:0 auto} .stack .pg{background:#fff;border-radius:8px;width:60%; box-shadow:0 26px 52px rgba(0,0,0,.5),0 4px 12px rgba(0,0,0,.32); transition:transform .5s cubic-bezier(.2,.7,.2,1)} .stack .pg:first-child{position:relative;display:block;z-index:1;transform:rotate(-4deg)} /* левый */ .stack .pg:nth-child(2){position:absolute;top:0;right:0;z-index:2;transform:rotate(4deg) translateY(5%)} /* правый */ .stack .pg:nth-child(3){display:none} /* используем только 2 листа */ .stack:hover .pg:first-child{transform:rotate(-6deg) translate(-4%,-2%)} .stack:hover .pg:nth-child(2){transform:rotate(6deg) translate(4%,5%)} /* ================= text block ================= */ .textblock{margin-top:84px} .textblock.is-center{text-align:center} .textblock.is-center .text-body{max-width:660px;margin:0 auto} .textblock.is-left{max-width:760px;margin-left:auto;margin-right:auto} .textblock.is-left .sec-title{text-align:left} .text-body{color:var(--muted);font-size:17px;line-height:1.7;margin:0} .text-body b{color:var(--accent);font-weight:600} /* ================= reviews (JS-лента, свайп) ================= */ .rev{margin-top:84px} .rail{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch; scrollbar-width:none;-ms-overflow-style:none;cursor:grab; -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)} .rail::-webkit-scrollbar{display:none} .rail.is-drag{cursor:grabbing} .rail-in{display:flex;gap:16px;width:max-content;padding:2px 0} .card{flex:0 0 auto;background:var(--panel);border:1px solid var(--line);border-radius:12px; overflow:hidden;cursor:zoom-in;transition:border-color .2s,transform .2s} .card:hover{border-color:#3a3a3a;transform:translateY(-3px)} .card img{display:block;height:250px;width:auto;pointer-events:none;user-select:none} .rev-hint{text-align:center;color:var(--muted);font-size:13px;margin:16px 0 0} /* ================= gallery (примеры проверки — внахлёст, без кликов) ================= */ .gallery{margin-top:76px} .gallery-lead{color:var(--muted);font-size:17px;line-height:1.62;text-align:center; max-width:660px;margin:-12px auto 40px} /* используем ту же «стопку», что и у тетради */ .gallery .stack{max-width:720px} .gallery .stack .pg{width:62%;overflow:hidden;margin:0} .gallery .stack .pg img{display:block;width:100%} .gallery .stack .pg figcaption{position:absolute;top:12px;left:12px; background:var(--accent);color:var(--on-accent);font-size:12.5px;font-weight:700; padding:6px 12px;border-radius:8px;box-shadow:0 6px 16px rgba(0,0,0,.35)} /* ================= footer ================= */ footer.bot{margin-top:96px} /* CTA «Остались вопросы?» + круглые иконки */ .foot-cta{text-align:center;border-top:1px solid var(--line);padding:52px 0 8px} .foot-cta h3{font-size:clamp(22px,3.4vw,30px);font-weight:800;letter-spacing:-.02em;margin:0 0 20px} .foot-icons{display:flex;gap:14px;justify-content:center} .ic-btn{width:52px;height:52px;border-radius:50%;display:inline-flex;align-items:center; justify-content:center;background:var(--panel2);border:1px solid var(--line); color:var(--muted);transition:.2s;cursor:pointer} .ic-btn:hover{color:var(--text);border-color:#3a3a3a;transform:translateY(-2px)} .ic-btn svg{width:22px;height:22px} .ic-btn.tg:hover{color:#5cc4f5;border-color:#2aabee} .ic-btn.vk:hover{color:#7aa7db;border-color:#4a76a8} /* правовой блок */ .foot-legal{margin-top:56px;padding:26px 0 46px;border-top:1px solid var(--line); color:var(--muted);font-size:12.5px;line-height:1.7} .foot-legal-top{display:flex;justify-content:space-between;align-items:baseline;gap:18px; flex-wrap:wrap;margin-bottom:22px} .fl-brand{font-weight:800;letter-spacing:.06em;font-size:15px;color:var(--text)} .fl-tag{color:var(--muted);font-size:13px;margin-top:5px} .foot-legal nav{display:flex;gap:20px;flex-wrap:wrap} .foot-legal a{color:var(--accent);text-decoration:underline;text-underline-offset:2px} .foot-legal a:hover{filter:brightness(1.1)} .foot-legal p{margin:0 0 6px;max-width:840px} .foot-legal strong{color:var(--muted);font-weight:600} .foot-copy{margin-top:16px;color:var(--muted)} /* ================= lightbox ================= */ .lb{position:fixed;inset:0;background:rgba(0,0,0,.9);backdrop-filter:blur(4px); display:none;align-items:center;justify-content:center;z-index:100;padding:20px;cursor:zoom-out} .lb.on{display:flex} .lb img{max-width:94vw;max-height:88vh;border-radius:12px;border:1px solid var(--line)} .lb-close{position:absolute;top:14px;right:18px;color:#fff;font-size:34px;line-height:1; cursor:pointer;opacity:.75;padding:6px 10px} .lb-close:hover{opacity:1} /* ================= прочие страницы (политика) ================= */ .page{max-width:760px;margin:0 auto;padding:10px 0 20px} .page h1{font-size:clamp(28px,5vw,42px);font-weight:800;letter-spacing:-.02em;margin:0 0 8px} .page h2{font-size:19px;margin:34px 0 10px;letter-spacing:-.01em} .page p,.page li{color:var(--muted);font-size:15.5px;line-height:1.7} .page ul{padding-left:20px} .page .back{display:inline-block;margin-top:36px;color:var(--accent);font-size:14px} .page .upd{color:var(--muted);font-size:13px} .page .sign-table{width:100%;border-collapse:collapse;margin:22px 0;font-size:14.5px} .page .sign-table th,.page .sign-table td{border:1px solid var(--line);padding:10px 14px;text-align:left} .page .sign-table th{color:var(--muted);font-weight:600;background:var(--panel2)} .page .sign-table td{color:var(--text)} /* ================= ПЛАНШЕТ ================= */ @media(max-width:820px){ .promo{grid-template-columns:1fr;gap:30px} .promo-text{text-align:center} .promo-text p{margin-left:auto;margin-right:auto} .promo-text .btns{justify-content:center} } @media(max-width:760px){ .creds{grid-template-columns:1fr;gap:18px} .feat-list{grid-template-columns:1fr} .gallery-grid{grid-template-columns:1fr;gap:20px} } /* ================= ТЕЛЕФОН (единый ритм отступов) ================= */ @media(max-width:620px){ :root{--pad:20px} header.top{height:64px} .logo{font-size:16px} /* единый вертикальный ритм: все крупные блоки — одинаковый отступ */ .stats-sec,.about,.features,.promo,.gallery,.rev{margin-top:52px} .hero{padding:4px 0 0} .kicker{font-size:11.5px;letter-spacing:.12em;gap:8px} .kicker::before,.kicker::after{display:none} .h1{font-size:clamp(34px,10.4vw,46px);margin:16px 0 0} .lead{font-size:16px;margin-top:18px;max-width:none} /* статистика: 2×2 без коробок, ровные отступы */ .statgrid{grid-template-columns:1fr 1fr;gap:34px 14px;max-width:none} .statgrid b{font-size:44px} .statgrid span{font-size:13.5px;max-width:160px} .rule{margin:26px auto} .sec-title{font-size:12.5px;margin-bottom:20px} .contact-cap{font-size:16px} /* кнопки — на всю ширину */ .btns{flex-direction:column;gap:10px} .btn{width:100%;padding:16px 20px;font-size:16px} .cred-name{font-size:26px} .cred-role{font-size:15px;margin-bottom:24px} .cred{padding-left:14px} .cred b{font-size:18px} .cred span{font-size:14.5px} .f{padding:18px 0;gap:14px} .f i{flex-basis:22px;font-size:12px} .f b{font-size:17px} .f span{font-size:14.5px} .textblock{margin-top:52px} .text-body{font-size:16px} .promo{gap:26px} .promo-text h3{font-size:28px} .promo-text p{font-size:16px} .promo-media.is-one img{max-width:100%} .book{max-width:100%} .stack{max-width:100%} .gallery-lead{font-size:16px;margin-bottom:26px} .shot figcaption{padding:15px 16px} .rail{-webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent); mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)} .rail-in{gap:12px} .card img{height:210px} .card:hover{transform:none} /* низ */ .foot-cta{padding:48px 0 4px} .foot-cta p{font-size:15px} .foot-legal{margin-top:40px;padding:24px 0 38px} .foot-legal-top{flex-direction:column;gap:12px} } /* ===== ПЛАШКА COOKIE (152-ФЗ) ===== */ .cookie{ position:fixed;left:16px;right:16px;bottom:16px;z-index:60; max-width:1040px;margin:0 auto; display:flex;align-items:center;gap:16px;flex-wrap:wrap; padding:16px 20px; background:var(--panel2);border:1px solid var(--line);border-radius:14px; box-shadow:0 10px 40px rgba(0,0,0,.35); transform:translateY(20px);opacity:0; transition:transform .3s ease,opacity .3s ease; } .cookie.on{transform:translateY(0);opacity:1} .cookie-text{margin:0;flex:1 1 260px;font-size:14px;line-height:1.5;color:var(--muted2)} .cookie-text a{color:var(--accent);text-decoration:underline} .cookie-ok{ flex:0 0 auto;cursor:pointer; padding:10px 22px;border:0;border-radius:10px; background:var(--accent);color:var(--on-accent); font-size:14px;font-weight:700; font-family:inherit; } .cookie-ok:hover{background:var(--accentdim)} @media(max-width:600px){ .cookie{ left:10px;right:10px;bottom:10px;gap:10px; padding:12px 14px;border-radius:12px; flex-wrap:nowrap;align-items:center; } .cookie-text{flex:1 1 auto;font-size:12.5px;line-height:1.4} .cookie-ok{padding:9px 16px;font-size:13px} } /* ===== СТРАНИЦЫ ОШИБОК ===== */ .errpage{ max-width:640px;margin:0 auto;text-align:center; padding:40px 0 30px; display:flex;flex-direction:column;align-items:center; } .err-code{ font-size:clamp(96px,26vw,190px);font-weight:800;line-height:.9; letter-spacing:-.04em; color:var(--accent); /* лёгкое свечение вместо плоского цвета */ text-shadow:0 0 60px color-mix(in srgb,var(--accent) 45%,transparent); margin-bottom:8px; } .errpage .kicker{margin-bottom:14px} .errpage .h1{font-size:clamp(24px,5vw,38px)} .errpage .lead{margin-top:16px} .err-btns{margin-top:32px} @media(max-width:600px){ .errpage{padding:24px 0 20px} .err-code{text-shadow:0 0 40px color-mix(in srgb,var(--accent) 40%,transparent)} }