/* howtotania.com — общие стили. Тема задаётся классом на . */ :root{ --pink:#CE4A7E; --green:#2E7A5C; --blue:#2A5FD0; --citrine:#D9BE22; --maxw:1180px; } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased; background:var(--bg);color:var(--ink);font-family:var(--body)} img,svg{max-width:100%} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;border:0;background:none;cursor:pointer} h1,h2,h3{margin:0;font-family:var(--display);text-wrap:balance} p{margin:0} :focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:2px} @media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}} /* ── темы ─────────────────────────────────────────────── */ .t-home {--bg:#fff; --ink:#0B0B0B;--mute:#7A7A7A;--line:#E4E4E4;--accent:#0B0B0B; --display:'Anton',Impact,sans-serif;--body:'Archivo',system-ui,sans-serif} .t-events {--bg:#FBF8F3; --ink:#16130F;--mute:#6B6157;--line:#E4DCD0;--accent:#A8603C;--panel:#FFFDFA;--tint:#F4EFE6; --display:'Bodoni Moda',Georgia,serif;--body:'Archivo',system-ui,sans-serif} .t-lessons{--bg:#F4F1E9; --ink:#22252B;--mute:#5A5F66;--line:#DFDACB;--accent:#2F6B5E;--panel:#fff;--tint:#EDE9DE; --display:'Newsreader',Georgia,serif;--body:'Karla',system-ui,sans-serif} .t-live {--bg:#0A0C0B; --ink:#EDEFEC;--mute:#8A928C;--line:#232A27;--accent:#C6F24E;--panel:#121614;--tint:#101412; --display:'Chivo',system-ui,sans-serif;--body:'Chivo',system-ui,sans-serif;--mono:'Chivo Mono',monospace} .t-shop {--bg:#F0ECE4; --ink:#111010;--mute:#6A6259;--line:#111010;--accent:#E5432B;--panel:#fff;--tint:#E7E2D8; --display:'Anton',Impact,sans-serif;--body:'Space Mono',monospace} .t-live h1,.t-live h2,.t-live h3{font-weight:900;letter-spacing:-.03em} /* ── шапка ────────────────────────────────────────────── */ .bar{display:flex;justify-content:space-between;align-items:center;gap:20px; padding:20px clamp(18px,4vw,60px);border-bottom:1px solid var(--line);flex-wrap:wrap} .brand b{display:block;font-size:16px;font-weight:600;letter-spacing:-.01em;font-family:var(--body)} .brand span{display:block;font-size:10px;letter-spacing:.18em;color:var(--mute);margin-top:2px} .back{font-size:13px;color:var(--accent)} .bar-r{display:flex;align-items:center;gap:20px;font-size:11px;letter-spacing:.16em;color:var(--mute)} .lang{display:flex;gap:7px;align-items:center;font-size:12px;letter-spacing:.1em} .lang b{color:var(--ink)} .lang i{color:var(--line);font-style:normal} .lang a{color:var(--mute)} .lang a:hover{color:var(--ink)} @media(max-width:640px){.bar-r .tag{display:none}} /* ── главная ──────────────────────────────────────────── */ .home{padding:0 clamp(16px,3vw,48px) 44px} .huge{font-family:'Anton',Impact,sans-serif;font-size:clamp(52px,13vw,178px);line-height:.86; letter-spacing:-.035em;text-transform:uppercase;text-align:center; padding:clamp(40px,7vw,90px) 0 clamp(34px,5vw,56px)} .doors{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px} @media(max-width:1000px){.doors{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:560px){.doors{grid-template-columns:1fr}} .door{display:flex;flex-direction:column;justify-content:space-between;min-height:300px;color:#fff; transition:transform .15s ease,filter .15s ease} .door:hover{transform:translateY(-3px);filter:brightness(1.06)} .door-h{padding:24px 22px} .door-h h2{font-family:'Anton',Impact,sans-serif;font-size:clamp(30px,3.2vw,41px);line-height:.88; letter-spacing:-.02em;text-transform:uppercase} .door-h p{font-size:12px;letter-spacing:.06em;margin-top:8px;opacity:.85} .door-f{display:flex;justify-content:space-between;padding:14px 22px;font-size:13px;font-weight:700; border-top:1px solid rgba(255,255,255,.28)} .d-events{background:var(--pink)} .d-lessons{background:var(--green)} .d-live{background:var(--blue)} .d-shop{background:var(--citrine)} /* ── общий каркас страниц ─────────────────────────────── */ main{max-width:var(--maxw);margin:0 auto} .t-shop main,.t-live main{max-width:none} section{padding:clamp(34px,5vw,54px) clamp(18px,4vw,60px)} .wrap h2{font-size:clamp(26px,3.4vw,36px);line-height:1.1;margin-bottom:22px} .lede{color:var(--mute);line-height:1.7;max-width:64ch} .eyebrow{font-size:10px;letter-spacing:.2em;color:var(--accent);text-transform:uppercase; font-family:var(--mono,var(--body))} .fine{font-size:13px;color:var(--mute)} hr{border:0;height:1px;background:var(--line);margin:4px 0} .hero{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(24px,4vw,48px);align-items:center} .hero.two{grid-template-columns:1.4fr 1fr;align-items:start} @media(max-width:860px){.hero,.hero.two{grid-template-columns:1fr}} .hero-t{display:flex;flex-direction:column;gap:20px} .hero h1{font-size:clamp(34px,5.2vw,56px);line-height:1.05;letter-spacing:-.015em} .video{position:relative;aspect-ratio:16/9;background:var(--line);display:flex;align-items:center; justify-content:center;color:var(--bg);overflow:hidden} .t-live .video{background:#161B19;border:1px solid var(--line);color:var(--accent)} .video span{position:absolute;left:16px;bottom:14px;font-size:10px;letter-spacing:.14em} .btns{display:flex;gap:12px;flex-wrap:wrap} .btn{display:inline-block;padding:14px 26px;border-radius:999px;font-size:14px;font-weight:600; background:var(--accent);color:var(--bg);border:1px solid var(--accent)} .btn:hover{filter:brightness(1.08)} .btn.ghost{background:none;color:var(--ink);border-color:var(--ink)} .btn.light{background:var(--bg);color:var(--ink);border-color:var(--bg)} .btn.small{padding:9px 16px;font-size:12px;letter-spacing:.08em} .t-shop .btn,.t-live .btn{border-radius:3px} .t-lessons .btn{border-radius:10px} .proof{background:var(--ink);color:var(--bg);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px} @media(max-width:760px){.proof{grid-template-columns:repeat(2,minmax(0,1fr))}} .proof b{display:block;font-family:var(--display);font-size:26px;line-height:1;font-weight:400} .proof span{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.65;margin-top:6px} .grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px} .grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px} .grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px} .grid5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px} @media(max-width:900px){.grid3,.grid4,.grid5{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:560px){.grid2,.grid3,.grid4,.grid5{grid-template-columns:1fr}} .card{background:var(--panel);border:1px solid var(--line);padding:26px 24px; display:flex;flex-direction:column;gap:12px} .t-lessons .card{border-radius:16px} .t-shop .card{border-width:2px;background:none} .card h3{font-size:clamp(20px,2.2vw,27px);line-height:1.1} .t-shop .card h3{text-transform:uppercase;line-height:.95} .card p{color:var(--mute);font-size:14px;line-height:1.65;flex-grow:1} .card .need,.card .meta{font-size:11px;letter-spacing:.06em;color:var(--mute)} .grid3.plain .card,.grid3.plain>div{background:none;border:0;padding:0} .grid3.plain p{font-size:15px;color:var(--ink);opacity:.85} .tint{background:var(--tint)} .card.dashed{border-style:dashed;opacity:.5;align-items:center;justify-content:center;text-align:center} .card.row{flex-direction:row;align-items:flex-start;gap:16px} .swatch{background:var(--accent);height:110px} .swatch.sq{width:104px;height:104px;flex:0 0 104px} .buy{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:10px} .panel{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:26px 24px} .checks{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:11px} .checks li{position:relative;padding-left:26px;font-size:14px} .checks li::before{content:"";position:absolute;left:0;top:3px;width:16px;height:16px; border-radius:5px;background:var(--accent)} .practical{background:var(--ink);color:var(--bg)} .practical h2{font-size:clamp(24px,3vw,34px);margin-bottom:22px} .practical .eyebrow{color:var(--accent);opacity:.9} .practical b{display:block;font-size:19px;margin-top:6px} .live{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px; letter-spacing:.12em;color:var(--accent);border:1px solid var(--line);border-radius:4px;padding:5px 11px;align-self:flex-start} .live i{width:7px;height:7px;border-radius:50%;background:var(--accent)} .vids figure{margin:0;display:flex;flex-direction:column;gap:10px} .thumb{aspect-ratio:16/9;background:var(--panel);border:1px solid var(--line)} .vids b{font-size:14px} .vids span{font-family:var(--mono);font-size:10px;color:var(--mute);letter-spacing:.06em} .more{font-family:var(--mono);font-size:12px;color:var(--accent)} .sec-head{display:flex;align-items:center;gap:18px;margin-bottom:18px;font-size:11px; font-weight:700;letter-spacing:.22em} .sec-head hr{flex:1;height:2px;background:var(--ink)} .sec-head .r{color:var(--mute);font-weight:400;letter-spacing:.06em} @media(max-width:640px){.sec-head .r{display:none}} .two-line{display:flex;flex-direction:column;text-align:left;padding-left:clamp(18px,4vw,60px)} .two-line .accent{color:var(--accent)} .socials{background:var(--ink);color:var(--bg)} .socials .sec-head hr{background:rgba(255,255,255,.3)} .socials .sec-head span{color:var(--accent)} .soc{border:2px solid var(--bg);padding:16px;display:flex;flex-direction:column;gap:4px} .soc b{font-family:'Anton',Impact,sans-serif;font-size:21px;text-transform:uppercase;font-weight:400} .soc span{font-size:11px;opacity:.6} /* ── репертуар с копированием ─────────────────────────── */ .rep-head{display:flex;justify-content:space-between;align-items:flex-end;gap:28px; margin-bottom:18px;flex-wrap:wrap} .reps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px} @media(max-width:760px){.reps{grid-template-columns:1fr}} .rep{display:flex;justify-content:space-between;align-items:center;gap:20px; padding:13px 0;border-bottom:1px solid var(--line)} .rep-t{display:flex;flex-direction:column;gap:3px;min-width:0} .rep-n{font-family:var(--display);font-size:19px;line-height:1.2} .t-live .rep-n{font-family:var(--mono);font-size:14px} .rep-m{font-size:12px;color:var(--mute);letter-spacing:.04em} .cp{display:inline-flex;align-items:center;gap:8px;color:var(--accent);font-size:12px; letter-spacing:.06em;white-space:nowrap;padding:6px 2px} .cp:hover{opacity:.7} .cp.cp-all{border:1px solid var(--ink);color:var(--ink);border-radius:999px;padding:11px 20px;font-weight:600} .t-live .cp.cp-all,.t-shop .cp.cp-all{border-radius:3px} .cp.ok{color:var(--accent);opacity:1} .cp.ok svg{display:none} .end{background:var(--accent);color:var(--bg);display:flex;justify-content:space-between; align-items:center;gap:32px;flex-wrap:wrap} .end h2{font-size:clamp(24px,3vw,34px);margin-bottom:8px} .end p{max-width:52ch;opacity:.92} /* ── заглушка: под стройкой ───────────────────────────── */ .t-soon{--bg:#0B0B0B;--ink:#fff;--mute:#8F8F8F;--line:#2A2A2A;--accent:#CE4A7E; --tapea:#D9BE22;--tapeb:#0B0B0B; --display:'Anton',Impact,sans-serif;--body:'Archivo',system-ui,sans-serif; min-height:100vh;display:flex;flex-direction:column} .tape{height:18px;flex:0 0 18px; background-image:repeating-linear-gradient(-45deg, var(--tapea) 0 18px, var(--tapeb) 18px 36px)} .soon{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center; gap:20px;text-align:center;padding:clamp(28px,6vw,64px) 24px;max-width:760px;margin:0 auto} .ucbadge{display:inline-block;border:1px solid var(--tapea);color:var(--tapea); border-radius:999px;padding:7px 16px;font-size:11px;font-weight:600;letter-spacing:.2em; text-transform:uppercase} .soon h1{font-family:'Anton',Impact,sans-serif;font-size:clamp(50px,14vw,132px);line-height:.84; letter-spacing:-.035em;text-transform:uppercase;margin:4px 0} .soon .who{font-size:clamp(16px,2.2vw,19px);line-height:1.65;max-width:46ch;color:#DCDCDC} .soon .note{font-size:14px;line-height:1.6;color:var(--mute)} .soon .open{border:1px solid var(--line);border-radius:10px;padding:22px 26px;margin-top:10px; display:flex;flex-direction:column;gap:12px;align-items:center;max-width:56ch} .opentag{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)} .soon .open p{font-size:14px;line-height:1.65;color:#C6C6C6} .mailto{font-size:clamp(17px,2.4vw,22px);font-weight:600;color:#fff;border-bottom:2px solid var(--accent); padding-bottom:2px} .mailto:hover{color:var(--accent)} .soon .links{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:4px} .soon .links a{border:1px solid var(--line);border-radius:999px;padding:10px 20px;font-size:13px;color:#C6C6C6} .soon .links a:hover{border-color:var(--accent);color:var(--accent)}