/* ============================================================ Möbel&Zeit — «Диваны нового поколения», 4 рекламные посадки (lp-gallery, lp-sun, lp-palms, lp-announce) Отдельная система на токенах Аутлета (Golos Text, #e1231c), но со своими классами — не использует outlet-new.css/js и не должна с ними пересекаться. У страницы ровно одна тема (light ИЛИ dark) — задаётся классом .theme-light/.theme-dark на , внутри страницы темы не смешиваются. ============================================================ */ *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;font-family:'Golos Text',system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;background:var(--bg);color:var(--ink)} img{display:block;max-width:100%} button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit} svg{display:block} :root{ --red: #e1231c; --red-hover: #c11c16; --red-bright: #ff4b3f; --ease: cubic-bezier(.32,.72,0,1); /* content column ≈ 80% of viewport width (10% margin each side) */ --pad: clamp(24px, 10vw, 160px); --pad-r: clamp(24px, 10vw, 160px); } body.theme-light{ --bg: #ffffff; --ink: #141414; --ink-2: #6d6d6a; --ink-3: #8a8a8a; --hair: #e2e2de; --hair-2: #cfcfca; --chip-bg: rgba(20,20,20,.05); --accent-soft: var(--red); } body.theme-dark{ --bg: #12100e; --ink: #f7f5f1; --ink-2: #e8e6e2; --ink-3: #8d8b86; --hair: #3a3733; --hair-2: #312e2a; --chip-bg: rgba(255,255,255,.08); --accent-soft: var(--red-bright); } a{color:var(--red);text-decoration:none} a:hover{color:var(--red-hover)} body.theme-dark a:hover{color:var(--red-bright)} .lp-wrap{position:relative} /* ---------- header: logo+tagline left, contacts block (messengers + phone) right ---------- */ .lp-header{ position:absolute;top:0;left:0;right:0;z-index:5; display:flex;align-items:center;justify-content:space-between; align-self:stretch; padding:clamp(18px,3.2vw,32px) var(--pad-r) 0 var(--pad); gap:20px; } .lp-brand{display:flex;align-items:center;gap:16px;min-width:0} .lp-logo{height:32px;width:auto;flex:none} .lp-brand-div{width:1px;height:36px;background:var(--hair-2);flex:none} .lp-tagline{font-size:12.5px;line-height:1.3;color:var(--ink-3);max-width:150px} .lp-phone{display:block;font-size:18px;font-weight:600;color:var(--ink);letter-spacing:.2px;white-space:nowrap} .lp-hours{font-size:13px;color:var(--ink-3);margin-top:3px;letter-spacing:.2px;white-space:nowrap} /* contacts: messenger chips + phone, grouped as one block */ .lp-contacts{display:flex;align-items:center;gap:18px;flex:none} .lp-msgrs{display:flex;align-items:center;gap:10px;flex:none} .lp-msgr{ width:32px;height:32px;flex:none; display:flex;align-items:center;justify-content:center; background:none;border:1px solid var(--ink); transition:background .3s var(--ease),transform .3s var(--ease),color .3s var(--ease); } .lp-msgr:hover{transform:translateY(-1px);background:#fff;border-color:#fff;color:#000} body.theme-dark .lp-msgr:hover{background:rgba(255,255,255,.14);border-color:#fff;color:#fff} .lp-msgr svg,.lp-msgr img{width:16px;height:16px} .lp-msgr{color:var(--ink)} .lp-contact-phone{text-align:right} /* ---------- hero ---------- */ .lp-hero{ position:relative;min-height:100dvh;display:flex;align-items:center; background:var(--bg); } .lp-hero-copy{ position:relative;z-index:2;width:100%;max-width:640px; padding:clamp(120px,15vh,180px) 0 60px var(--pad); } .lp-eyebrow{font-size:13px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:18px} .lp-h1{margin:0;font-size:clamp(38px,5.6vw,72px);line-height:.94;font-weight:700;letter-spacing:-.03em;text-transform:uppercase;color:var(--ink)} .lp-rule{width:80px;height:2px;background:var(--red);margin:28px 0 24px} .lp-lead{margin:0;font-size:clamp(18px,2.2vw,25px);line-height:1.4;letter-spacing:-.2px;color:var(--ink)} body.theme-dark .lp-lead{color:var(--ink-2)} .lp-lead em{font-style:normal;color:var(--accent-soft)} .lp-cta-row{display:flex;align-items:center;flex-wrap:wrap;gap:24px 30px;margin-top:36px} /* lp-sun/lp-palms: their media panels are wider (58%/60.5%) than lp-gallery's (55%), so the copy column has less room. The price must NEVER wrap onto its own line under the button — non-negotiable — so beyond tightening the gap, wrapping itself is disabled on this row; if a viewport is ever too narrow the row may overflow its column slightly, which is preferable to the price dropping down */ .lp-hero:has(.w-sun) .lp-cta-row,.lp-hero:has(.w-palms) .lp-cta-row{gap:24px 16px;flex-wrap:nowrap} .lp-hero:has(.w-sun) .lp-price,.lp-hero:has(.w-palms) .lp-price{flex:none} .lp-btn{ display:inline-flex;align-items:center;gap:18px;white-space:nowrap; background:var(--red);color:#fff;font-size:15px;font-weight:600;letter-spacing:.14em;text-transform:uppercase; padding:20px 14px 20px 30px;border-radius:0; transition:background .3s var(--ease),transform .12s var(--ease); } .lp-btn:hover{background:var(--red-hover);color:#fff} .lp-btn:active{transform:scale(.98)} .lp-btn-ic{width:34px;height:34px;border-radius:0;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;flex:none} /* "Записаться на просмотр" + this icon is wider than the fixed-width nowrap button can fit at several column widths (was true even on lp-gallery, the reference page) — pushing the icon out past the border instead of wrapping. Letting the label wrap keeps the icon inside the button no matter how narrow the column gets. */ .lp-btn:has(.lp-btn-ic-wa){white-space:normal} .lp-btn-ic-wa{width:19px;height:19px;background:none} /* the arrow icon carries its own width/height attributes, but the WA/MAX glyph's is in-flow and faked a height from its own intrinsic ratio, masking this until the click-to-play iframe (position:absolute, contributes no height at all) replaced it — at that point the 0-height container collapsed the iframe to 0px too: video gone, audio still playing. */ .lp-video-media.w-flat{height:75vw} .lp-media-fade-l{display:none} .lp-hero.video-bg{min-height:100dvh} .lp-note-hide-mobile,.lp-hide-mobile,.lp-desktop-only{display:none !important} .lp-mobile-only{display:block} .lp-eyebrow{letter-spacing:.08em} .lp-h1{font-size:clamp(34px,9vw,46px)} .lp-lead{font-size:19px} .lp-features{margin-top:30px;gap:22px 26px} .lp-btn{width:100%;justify-content:space-between} .lp-cta-row{width:100%} .lp-price{width:100%} .lp-footer-top{flex-direction:column;gap:24px} .lp-footer-right{align-items:flex-start} .lp-footer-co,.lp-footer-phone{text-align:left} } @media (max-width: 480px){ .lp-modal{padding:30px 22px} } @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} .lp-msgr,.lp-btn,.lp-play-ring{transition:none} }