/* ════════════════════════════════════════════════════════ REMONT — общие стили сайта (chrome + page kit) Требует: remont-tokens.css (токены, кнопки, поля, бейджи) Подключать ПОСЛЕ remont-tokens.css. ════════════════════════════════════════════════════════ */ *{margin:0;padding:0;box-sizing:border-box;} html,body{background:#E8E8EB;} body{font-family:var(--font);color:var(--ink);-webkit-font-smoothing:antialiased;} a{text-decoration:none;color:inherit;} ul{list-style:none;} button{font-family:inherit;cursor:pointer;} svg{display:block;} ::selection{background:rgba(184,145,90,.25);} /* ============ VIEWER SHELL ============ */ #sizer{position:relative;} #stage{ position:absolute;top:48px;left:50%; transform:translateX(-50%) scale(1); transform-origin:top center; display:flex;align-items:flex-start;gap:80px; width:1910px; } .artboard-wrap{flex:none;} .artboard-label{font-size:13px;font-weight:500;color:#84878D;letter-spacing:.04em;margin:0 0 12px 2px;} .artboard{background:var(--white);box-shadow:0 8px 40px rgba(0,0,0,.12);overflow:hidden;position:relative;} .artboard.desktop{width:1440px;} .artboard.mobile{width:390px;} #zoombar{ position:fixed;right:20px;bottom:20px;z-index:100; display:flex;align-items:center;gap:2px; background:var(--white);border:1px solid rgba(22,24,29,.12); border-radius:10px;padding:6px;box-shadow:0 4px 20px rgba(0,0,0,.14);font-size:13px; } #zoombar button{background:none;border:none;border-radius:6px;width:32px;height:32px;font-size:16px;color:var(--ink);display:flex;align-items:center;justify-content:center;} #zoombar button:hover{background:rgba(22,24,29,.06);} #zoombar .zb-fit{width:auto;padding:0 12px;font-size:13px;font-weight:600;} #zoomVal{min-width:48px;text-align:center;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums;} .anno{ font-size:11px;font-weight:500;color:#9A9DA3;letter-spacing:.06em;text-transform:uppercase; padding:8px 16px 6px;border-top:1px dashed rgba(22,24,29,.18);background:#F4F4F6; } /* ============ SHARED PRIMITIVES (chrome) ============ */ .brass-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none;display:inline-block;} .m-ctabar .btn{flex:1;} .d-iconbtn{ width:48px;height:48px;border-radius:12px;flex:none; border:1px solid var(--line);background:var(--white);color:var(--ink); display:inline-flex;align-items:center;justify-content:center; transition:border-color .15s ease,color .15s ease; } .d-iconbtn:hover{border-color:var(--accent);color:#96743F;} /* ====================================================== */ /* ==================== DESKTOP HEADER ================== */ /* ====================================================== */ .d-header{position:sticky;top:0;z-index:10;background:var(--white);border-bottom:1px solid var(--line);} .d-utility{background:var(--ink);} .d-utility-in{height:40px;padding:0 48px;display:flex;align-items:center;gap:20px;font-size:12.5px;color:rgba(255,255,255,.85);} .du-open{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--white);white-space:nowrap;} .du-pulse{width:7px;height:7px;border-radius:50%;background:#7FC8A4;box-shadow:0 0 0 4px rgba(127,200,164,.18);flex:none;} .du-div{width:1px;height:14px;background:rgba(255,255,255,.18);flex:none;} .du-geo{color:rgba(255,255,255,.6);font-weight:500;white-space:nowrap;} .du-facts{margin:0 auto;display:flex;align-items:center;gap:10px;color:rgba(255,255,255,.55);font-weight:500;white-space:nowrap;} .du-facts i{width:3px;height:3px;border-radius:50%;background:var(--accent);font-style:normal;flex:none;} .du-right{display:flex;align-items:center;gap:16px;flex:none;} .du-msg{display:inline-flex;align-items:center;gap:6px;color:rgba(255,255,255,.75);font-weight:600;transition:color .15s ease;} .du-msg:hover{color:var(--white);} .du-call{color:var(--accent);font-weight:600;border-bottom:1px dashed rgba(184,145,90,.6);padding-bottom:1px;} .du-call:hover{border-bottom-style:solid;} .d-main{padding:16px 48px;display:flex;align-items:center;gap:28px;} .d-logo{display:flex;align-items:center;gap:14px;flex:none;} .d-logo-mark{ width:54px;height:54px;border-radius:14px;flex:none; background:var(--ink);color:var(--accent);position:relative; display:flex;align-items:center;justify-content:center; box-shadow:0 10px 24px -10px rgba(22,24,29,.45); } .d-logo-mark::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 1px 0 rgba(255,255,255,.18);} .d-logo-text{display:flex;flex-direction:column;} .d-logo-name{font-weight:800;font-size:19px;letter-spacing:-.01em;line-height:1;display:flex;align-items:baseline;gap:8px;} .d-logo-name .geo{font-size:10px;font-weight:700;letter-spacing:.08em;color:#96743F;background:rgba(184,145,90,.14);padding:3px 7px;border-radius:6px;} .d-logo-sub{font-size:12.5px;color:var(--muted);margin-top:6px;font-weight:500;} .d-main-right{display:flex;align-items:center;gap:16px;margin-left:auto;} .d-phone{text-align:right;} .d-phone a{font-weight:800;font-size:19px;letter-spacing:-.01em;display:block;} .d-phone a:hover{color:var(--cta);} .d-phone small{font-size:11.5px;color:var(--muted);font-weight:500;display:block;margin-top:3px;} .btn-calc{ display:inline-flex;align-items:center;gap:12px;flex:none; background:var(--cta);color:var(--white);border:none;cursor:pointer; border-radius:12px;padding:0 22px;height:54px;white-space:nowrap; box-shadow:0 14px 30px -14px rgba(30,58,47,.55); transition:background .15s ease,transform .15s ease,box-shadow .15s ease; } .btn-calc:hover{background:var(--cta-hover);transform:translateY(-1px);box-shadow:0 18px 36px -14px rgba(30,58,47,.6);} .btn-calc .ic{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.16);display:inline-flex;align-items:center;justify-content:center;margin-left:-6px;flex:none;} .btn-calc .tx{display:flex;flex-direction:column;align-items:flex-start;gap:4px;line-height:1;text-align:left;} .btn-calc .tx strong{font-size:14.5px;font-weight:800;} .btn-calc .tx small{font-size:11px;font-weight:500;opacity:.8;} .btn-calc-lg{height:62px;padding:0 28px;} .btn-calc-lg .tx strong{font-size:16px;} .btn-calc-lg .tx small{font-size:11.5px;} /* nav band */ .d-navband-wrap{border-top:1px solid var(--line);background:var(--white);position:relative;} .d-navband{padding:0 48px;display:flex;align-items:stretch;} .d-cats{display:inline-flex;align-items:center;gap:12px;flex:none;padding:15px 24px 15px 0;margin-right:14px;border-right:1px solid var(--line);font-weight:700;font-size:14.5px;cursor:pointer;} .d-cats:hover{color:#96743F;} .d-cats .d-cats-chev{transition:transform .2s ease;} .d-cats.open{color:#96743F;} .d-cats.open .d-cats-chev{transform:rotate(180deg);} .d-cats-mark{width:28px;height:18px;position:relative;flex:none;} .d-cats-mark::before,.d-cats-mark::after,.d-cats-mark span{content:"";position:absolute;left:0;right:0;height:2px;background:var(--accent);border-radius:2px;} .d-cats-mark::before{top:1px;} .d-cats-mark span{top:8px;right:9px;} .d-cats-mark::after{bottom:1px;right:4px;} .d-navlinks{display:flex;align-items:stretch;flex:1;min-width:0;} .d-navlink{display:inline-flex;align-items:center;gap:8px;padding:0 14px;font-size:14.5px;font-weight:600;color:var(--ink);position:relative;white-space:nowrap;} .d-navlink::after{content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:3px;background:var(--accent);border-radius:3px 3px 0 0;transform:scaleX(0);transform-origin:left;transition:transform .2s ease;} .d-navlink:hover::after{transform:scaleX(1);} .d-navlink.is-current{color:var(--accent-ink);} .d-navlink.is-current::after{transform:scaleX(1);} .d-cats.is-current{color:var(--accent-ink);} .d-nav-badge{font-size:11px;font-weight:700;padding:2px 7px;border-radius:999px;background:rgba(22,24,29,.06);color:var(--muted);} .d-nav-badge.brass{background:rgba(184,145,90,.16);color:#96743F;} .d-nav-chip{align-self:center;margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:rgba(184,145,90,.12);color:#96743F;font-size:12.5px;font-weight:700;white-space:nowrap;} /* ====================================================== */ /* ==================== DESKTOP FOOTER ================== */ /* ====================================================== */ .d-footer{background:var(--ink);color:var(--white);padding:80px 0 40px;} .d-footer-in{width:100%;padding:0 48px;} .df-top{display:flex;justify-content:space-between;align-items:flex-start;} .df-logo{font-weight:800;font-size:15px;line-height:1.25;letter-spacing:.04em;color:var(--white);} .df-logo span{display:block;} .df-tagline{font-size:15px;font-weight:400;color:rgba(255,255,255,.6);margin-top:14px;max-width:300px;line-height:1.6;} .df-contact{text-align:right;} .df-contact a.df-phone{font-weight:700;font-size:24px;color:var(--white);display:block;} .df-contact a.df-phone:hover{color:var(--accent);} .df-contact small{font-size:12px;color:rgba(255,255,255,.4);display:block;margin:6px 0 16px;} .df-divider{height:1px;background:rgba(255,255,255,.12);margin:48px 0;} .df-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:40px;} .df-col h4{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:20px;} .df-col ul{display:flex;flex-direction:column;gap:12px;} .df-col a{font-size:15px;color:rgba(255,255,255,.75);transition:color .18s ease;} .df-col a:hover{color:var(--white);} .df-col address{font-style:normal;font-size:15px;color:rgba(255,255,255,.75);line-height:1.6;} .df-socials{display:flex;gap:12px;margin-top:20px;} .df-socials a{width:40px;height:40px;border-radius:8px;border:1px solid rgba(184,145,90,.5);display:flex;align-items:center;justify-content:center;transition:border-color .18s ease,background .18s ease;} .df-socials a:hover{border-color:var(--accent);background:rgba(184,145,90,.12);} .df-bottom{margin-top:56px;padding-top:24px;border-top:1px solid rgba(255,255,255,.12);display:flex;flex-wrap:wrap;gap:8px 24px;font-size:12px;color:rgba(255,255,255,.4);} .df-bottom a{color:rgba(255,255,255,.4);} .df-bottom a:hover{color:rgba(255,255,255,.7);} /* ====================================================== */ /* ==================== MOBILE HEADER =================== */ /* ====================================================== */ .m-utility{background:var(--ink);height:34px;padding:0 16px;display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:600;color:rgba(255,255,255,.85);} .m-utility .du-open{font-size:12px;} .m-utility a{color:var(--white);display:inline-flex;align-items:center;gap:6px;font-weight:700;} .m-header{background:var(--white);border-bottom:1px solid var(--line);padding:10px 16px;display:flex;align-items:center;gap:12px;} .m-burger{width:44px;height:44px;flex:none;margin-left:-11px;border:none;background:transparent;cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:5px;padding:0 11px;} .m-burger i{display:block;height:2px;background:var(--ink);border-radius:2px;font-style:normal;transition:transform .3s cubic-bezier(.22,.8,.3,1),width .3s cubic-bezier(.22,.8,.3,1),opacity .2s ease;} .m-burger i:nth-child(1){width:22px;} .m-burger i:nth-child(2){width:14px;} .m-burger i:nth-child(3){width:22px;} .m-burger.open i:nth-child(1){transform:translateY(7px) rotate(45deg);} .m-burger.open i:nth-child(2){opacity:0;transform:scaleX(.4);} .m-burger.open i:nth-child(3){transform:translateY(-7px) rotate(-45deg);} .m-logo{display:flex;align-items:center;gap:10px;flex:1;min-width:0;} .m-logo-mark{width:40px;height:40px;border-radius:11px;flex:none;background:var(--ink);color:var(--accent);display:flex;align-items:center;justify-content:center;} .m-logo-text{min-width:0;} .m-logo-name{display:block;font-weight:800;font-size:14px;line-height:1;letter-spacing:-.01em;} .m-logo-sub{display:block;font-size:10.5px;color:var(--muted);margin-top:3px;} .m-call{width:44px;height:44px;border-radius:12px;flex:none;background:var(--cta);color:var(--white);display:flex;align-items:center;justify-content:center;} /* ====================================================== */ /* ==================== MOBILE FOOTER =================== */ /* ====================================================== */ .m-footer{background:var(--ink);color:var(--white);padding:48px 20px 32px;} .m-acc{border-bottom:1px solid rgba(255,255,255,.12);} .m-acc:first-child{border-top:1px solid rgba(255,255,255,.12);} .m-acc-head{display:flex;align-items:center;justify-content:space-between;padding:16px 0;font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);} .m-acc-body{display:flex;flex-direction:column;gap:12px;padding:0 0 20px;} .m-acc-body a{font-size:15px;color:rgba(255,255,255,.75);} .m-footer-phone{text-align:center;margin-top:36px;} .m-footer-phone a{font-weight:700;font-size:26px;color:var(--white);display:block;} .m-footer-phone small{font-size:12px;color:rgba(255,255,255,.4);display:block;margin-top:6px;} .m-footer .btn-outline-accent{width:100%;margin-top:20px;padding:16px 24px;color:var(--accent);} .m-footer-socials{display:flex;justify-content:center;gap:12px;margin-top:24px;} .m-footer-socials a{width:42px;height:42px;border-radius:8px;border:1px solid rgba(184,145,90,.5);display:flex;align-items:center;justify-content:center;} .m-footer-req{margin-top:32px;font-size:11px;line-height:1.7;color:rgba(255,255,255,.4);text-align:center;} .m-footer-req a{color:rgba(255,255,255,.4);text-decoration:underline;} .m-ctabar{background:var(--ink);padding:12px 16px;display:flex;gap:10px;} .m-ctabar .btn{flex:1;padding:15px 8px;font-size:13.5px;gap:8px;} .m-ctabar .btn svg{flex:none;} .m-ctabar .btn-call{background:transparent;color:var(--white);border:1px solid rgba(255,255,255,.35);} .m-ctabar .btn-call:hover{border-color:var(--white);} .m-ctabar .btn-cta:hover{background:var(--cta-hover);} /* ====================================================== */ /* ==================== PAGE KIT ====================== */ /* ====================================================== */ /* breadcrumb + page head (desktop) */ .crumbs{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted);font-weight:500;white-space:nowrap;flex-wrap:wrap;} .crumbs a:hover{color:var(--accent-ink);} .crumbs i{font-style:normal;color:var(--accent);font-size:11px;flex:none;} .crumbs .cur{color:var(--ink);font-weight:600;} .page-head{background:var(--paper);padding:40px 0 44px;border-bottom:1px solid var(--line);} .page-head-in{padding:0 48px;} .page-head h1{font-size:52px;line-height:1.06;font-weight:800;letter-spacing:-.02em;margin-top:20px;max-width:760px;} .page-head h1 em{font-style:normal;font-weight:800;background:linear-gradient(180deg,transparent 60%,rgba(184,145,90,.35) 60%);padding:0 2px;} .page-head .lead{font-size:18px;line-height:1.6;color:var(--muted);max-width:560px;margin-top:18px;} .page-head .overline{display:flex;align-items:center;gap:12px;font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);} /* generic section (desktop) */ .sec{padding:72px 0;} .sec-in{padding:0 48px;} .sec-head{max-width:680px;margin-bottom:36px;} .sec-head .overline{display:flex;align-items:center;gap:12px;font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);} .sec-head h2{font-size:40px;line-height:1.1;font-weight:800;letter-spacing:-.02em;margin-top:14px;} .sec-head h2 em{font-style:normal;font-weight:800;background:linear-gradient(180deg,transparent 60%,rgba(184,145,90,.35) 60%);padding:0 2px;} .sec-head p{font-size:16.5px;line-height:1.6;color:var(--muted);margin-top:14px;} .caps-head{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink);} /* dark reusable CTA band (desktop) */ .cta-band{background:var(--ink);color:var(--white);} .cta-band-in{padding:64px 48px;display:flex;align-items:center;justify-content:space-between;gap:48px;} .cta-band h2{font-size:38px;line-height:1.1;font-weight:800;letter-spacing:-.02em;max-width:560px;} .cta-band h2 em{font-style:normal;color:var(--accent);} .cta-band p{font-size:16px;color:rgba(255,255,255,.6);margin-top:16px;max-width:500px;line-height:1.6;} .cta-band-actions{display:flex;flex-direction:column;gap:14px;flex:none;align-items:stretch;min-width:300px;} .cta-band-actions .btn-calc{justify-content:flex-start;} .cta-band-actions .row{display:flex;align-items:center;gap:14px;} .cta-band-actions .row .du-call{font-size:14px;} /* mobile page head */ .m-page-head{background:var(--paper);padding:24px 20px 28px;border-bottom:1px solid var(--line);} .m-page-head .crumbs{font-size:12px;} .m-page-head h1{font-size:32px;line-height:1.1;font-weight:800;letter-spacing:-.02em;margin-top:14px;} .m-page-head h1 em{font-style:normal;font-weight:800;background:linear-gradient(180deg,transparent 60%,rgba(184,145,90,.35) 60%);padding:0 2px;} .m-page-head .lead{font-size:15.5px;line-height:1.55;color:var(--muted);margin-top:14px;} .m-page-head .overline{display:flex;align-items:center;gap:10px;font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);} /* mobile generic section */ .m-sec{padding:44px 20px;} .m-sec-head{margin-bottom:24px;} .m-sec-head .overline{display:flex;align-items:center;gap:10px;font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);} .m-sec-head h2{font-size:27px;line-height:1.15;font-weight:800;letter-spacing:-.02em;margin-top:12px;} .m-sec-head h2 em{font-style:normal;font-weight:800;background:linear-gradient(180deg,transparent 60%,rgba(184,145,90,.35) 60%);padding:0 2px;} .m-sec-head p{font-size:15px;line-height:1.55;color:var(--muted);margin-top:12px;} /* mobile dark cta band */ .m-cta-band{background:var(--ink);color:var(--white);padding:40px 20px;} .m-cta-band h2{font-size:26px;line-height:1.15;font-weight:800;letter-spacing:-.02em;} .m-cta-band h2 em{font-style:normal;color:var(--accent);} .m-cta-band p{font-size:15px;color:rgba(255,255,255,.6);margin-top:14px;line-height:1.55;} .m-cta-band .btn-calc{width:100%;justify-content:center;height:58px;margin-top:22px;} /* image-slot default look inside artboards */ image-slot{display:block;background:#EFEDE8;} /* ════════════════════════════════════════════════════════════════════════ TWO-LEVEL MENU v2 (chrome.js) — desktop mega (.d-mega2) + mobile drawer (.m-screen2). Ported from Claude Design "REMONT - Меню v2", adapted for production: the mega is centred + collapses its banner column on narrow desktops; the mobile drawer is viewport-fixed; the "case" banner carries no image-slot (an empty slot would paint a grey placeholder live). ════════════════════════════════════════════════════════════════════════ */ .d-mega2 button,.m-drawer2 button{font-family:inherit;} /* ── desktop: two-level mega panel ── */ .d-mega2{position:absolute;left:0;right:0;top:100%;z-index:30;max-width:1440px;margin:0 auto;background:var(--white);border-top:1px solid var(--line);box-shadow:var(--shadow-menu);opacity:0;transform:translateY(-8px);visibility:hidden;pointer-events:none;transition:opacity .2s ease,transform .2s ease,visibility .2s;} .d-mega2.open{opacity:1;transform:none;visibility:visible;pointer-events:auto;} .mega-vp{overflow:hidden;} .mega-track{display:flex;width:200%;transform:translateX(0);transition:transform .46s cubic-bezier(.22,.85,.28,1);} .d-mega2.lvl2 .mega-track{transform:translateX(-50%);} .mega-screen{width:50%;flex:none;} .s1-grid{display:grid;grid-template-columns:316px 1fr 372px;min-height:464px;} .mega-rail{padding:20px 20px 20px 40px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:2px;} .rail-item{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:none;border:none;padding:12px 14px;border-radius:12px;cursor:pointer;transition:background .15s ease;} .rail-item:hover{background:rgba(22,24,29,.045);} .rail-item.active{background:var(--accent-tint);} .rail-ic{width:40px;height:40px;border-radius:11px;background:var(--accent-tint-strong);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;flex:none;transition:background .15s ease,color .15s ease;} .rail-item.active .rail-ic{background:var(--accent);color:#fff;} .rail-tx{flex:1;min-width:0;} .rail-tx b{display:block;font-size:15.5px;font-weight:700;letter-spacing:-.01em;} .rail-tx small{display:block;font-size:12px;color:var(--muted);margin-top:2px;} .rail-arr{flex:none;color:var(--accent);opacity:0;transform:translateX(-5px);transition:opacity .16s ease,transform .16s ease;} .rail-item.active .rail-arr{opacity:1;transform:none;} .mega-preview{padding:30px 40px;display:flex;flex-direction:column;} .pv-cap{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink);} .pv-title{font-size:24px;font-weight:800;letter-spacing:-.02em;margin-top:12px;} .pv-desc{font-size:14px;line-height:1.55;color:var(--muted);margin-top:10px;max-width:380px;} .pv-links{margin-top:24px;display:flex;flex-direction:column;} .pv-link{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);font-size:16.5px;font-weight:600;color:var(--ink);transition:color .15s ease;} .pv-link:hover{color:var(--accent-ink);} .pv-link .pl-badge{font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:999px;background:var(--accent-tint-strong);color:var(--accent-ink);} .pv-link .arr{margin-left:auto;color:var(--accent);opacity:0;transform:translateX(-5px);transition:opacity .15s ease,transform .15s ease;} .pv-link:hover .arr{opacity:1;transform:none;} .pv-all{margin-top:auto;padding-top:22px;display:inline-flex;align-items:center;gap:9px;align-self:flex-start;font-size:14px;font-weight:700;color:var(--accent-ink);cursor:pointer;background:none;border:none;} .pv-all svg{transition:transform .16s ease;} .pv-all:hover svg{transform:translateX(3px);} .mega-bnwrap{padding:26px 40px 26px 0;display:flex;} .s2-grid{display:grid;grid-template-columns:1fr 392px;min-height:464px;} .s2-grid .mega-bnwrap{padding:26px 44px 26px 0;} .mega-detail{padding:24px 44px 30px 40px;display:flex;flex-direction:column;} .detail-head{display:flex;align-items:center;gap:16px;} .detail-back{display:inline-flex;align-items:center;gap:9px;background:none;border:1px solid var(--line);border-radius:999px;padding:9px 16px 9px 12px;font-size:13.5px;font-weight:700;color:var(--ink);cursor:pointer;transition:border-color .15s ease,color .15s ease,background .15s ease;} .detail-back:hover{border-color:var(--accent);color:var(--accent-ink);background:var(--accent-tint);} .detail-back svg{transition:transform .16s ease;} .detail-back:hover svg{transform:translateX(-3px);} .detail-title{font-size:25px;font-weight:800;letter-spacing:-.02em;} .detail-sub{font-size:13.5px;color:var(--muted);margin:14px 0 2px;} .detail-list{margin-top:10px;display:grid;grid-template-columns:1fr 1fr;gap:0 44px;} .detail-link{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--line);font-size:16px;font-weight:600;color:var(--ink);transition:color .15s ease;} .detail-link:hover{color:var(--accent-ink);} .detail-link .di{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none;opacity:0;transition:opacity .15s ease;} .detail-link:hover .di{opacity:1;} .detail-link .pl-badge{font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:999px;background:var(--accent-tint-strong);color:var(--accent-ink);} .detail-link .arr{margin-left:auto;color:var(--accent);opacity:0;transform:translateX(-5px);transition:opacity .15s ease,transform .15s ease;} .detail-link:hover .arr{opacity:1;transform:none;} .detail-foot{margin-top:auto;padding-top:22px;display:flex;align-items:center;gap:22px;} .detail-all{display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:700;color:var(--accent-ink);} .detail-allbar{height:1px;background:var(--line);flex:1;} /* mega banners */ .bn{border-radius:16px;width:100%;display:flex;flex-direction:column;} .bn-link{margin-top:14px;display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;color:var(--accent-ink);cursor:pointer;} .bn-case{background:var(--white);border:1px solid var(--line);overflow:hidden;box-shadow:var(--shadow-card);} .bn-case-top{background:var(--accent-tint);border-bottom:1px solid var(--line);padding:16px 20px;display:flex;align-items:center;} .bn-case-body{padding:18px 20px 20px;} .bn-tag{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-ink);background:var(--accent-tint);padding:4px 9px;border-radius:999px;} .bn-case-top .bn-tag{background:var(--white);} .bn-case-body b{display:block;font-size:17px;font-weight:700;letter-spacing:-.01em;} .bn-price{font-size:14px;color:var(--muted);margin-top:8px;} .bn-price strong{font-size:22px;font-weight:800;color:var(--ink);letter-spacing:-.01em;} .bn-promo{background:var(--accent-tint);border:1px solid rgba(184,145,90,.28);padding:26px 24px;justify-content:center;} .bn-badge{align-self:flex-start;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--accent);padding:4px 10px;border-radius:999px;} .bn-big{font-size:28px;font-weight:800;letter-spacing:-.02em;line-height:1.12;margin-top:16px;color:var(--ink);} .bn-promo p{font-size:14px;line-height:1.55;color:var(--accent-ink);margin-top:12px;} .bn-facts{background:var(--ink);color:#fff;padding:26px 26px 24px;justify-content:center;} .bn-cap{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);} .bn-facts ul{list-style:none;margin-top:18px;display:flex;flex-direction:column;gap:18px;} .bn-facts li{display:flex;flex-direction:column;gap:3px;} .bn-facts li b{font-size:26px;font-weight:800;letter-spacing:-.02em;} .bn-facts li span{font-size:13px;color:rgba(255,255,255,.6);} .bn-cta{background:var(--ink);color:#fff;padding:28px 26px;justify-content:center;} .bn-cta b{font-size:20px;font-weight:800;letter-spacing:-.01em;line-height:1.25;} .bn-cta p{font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.62);margin:12px 0 20px;} .bn-cta .btn{align-self:flex-start;} .btn-outline-accent.on-dark{color:var(--accent);} /* mega: collapse the decorative banner column + 2-col detail on narrow desktops */ @media (min-width:768px) and (max-width:1180px){ .s1-grid{grid-template-columns:300px 1fr;} .s2-grid{grid-template-columns:1fr;} .s1-grid .mega-bnwrap,.s2-grid .mega-bnwrap{display:none;} .detail-list{grid-template-columns:1fr;} .mega-preview{padding:28px 36px;} } /* ── mobile: two-level burger drawer (viewport-fixed) ── */ .m-screen2{position:fixed;inset:0;z-index:60;pointer-events:none;} .m-screen2.open{pointer-events:auto;} .m-scrim2{position:absolute;inset:0;background:rgba(10,11,14,.45);backdrop-filter:blur(2px);opacity:0;transition:opacity .28s ease;} .m-screen2.open .m-scrim2{opacity:1;} /* height uses the DYNAMIC viewport (100dvh) so the sticky .md-foot is never pushed below the mobile browser's address bar — with plain inset:0 / 100vh the foot was unreachable and the menu "wouldn't scroll to the bottom" on real phones. */ .m-drawer2{position:absolute;top:0;left:0;right:0;height:100vh;height:100dvh;background:var(--ink);color:#fff;display:flex;flex-direction:column;transform:translateY(-14px);opacity:0;transition:transform .34s var(--ease-out),opacity .24s ease;} .m-screen2.open .m-drawer2{transform:none;opacity:1;} .md-head{display:flex;align-items:center;justify-content:space-between;padding:14px 10px 14px 20px;border-bottom:1px solid var(--line-dark);flex:none;} .md-head b{font-weight:800;font-size:14px;letter-spacing:.02em;} .md-head b .geo{color:var(--accent);margin-left:6px;} .md-close{width:44px;height:44px;border:none;background:transparent;color:rgba(255,255,255,.85);display:flex;align-items:center;justify-content:center;cursor:pointer;} /* Single scroll container: .md-vp scrolls vertically (and clips the off-screen pane horizontally), the track sizes to content. The earlier nested per-.md-screen scroll (height:100% + overflow-y:auto inside a height:100% track) is unreliable in Safari / Responsive-Design-Mode — the middle list "wouldn't scroll to the bottom". */ .md-vp{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;position:relative;min-height:0;} .md-track{display:flex;width:200%;align-items:flex-start;transform:translateX(0);transition:transform .4s var(--ease-out);} .m-drawer2.lvl2 .md-track{transform:translateX(-50%);} .md-screen{width:50%;flex:none;} /* Only the ACTIVE level drives the scroll height, so a shorter L2 list scrolls to its own last item and no further (no big empty gap below it). The off-screen level is collapsed to 0 height (still width:50% so the horizontal slide is unaffected). */ .m-drawer2:not(.lvl2) #mdL2{height:0;overflow:hidden;} .m-drawer2.lvl2 #mdL1{height:0;overflow:hidden;} .md-quick{display:flex;flex-wrap:wrap;gap:8px;padding:16px 20px 4px;} .md-quick a{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.07);border:1px solid var(--line-dark);border-radius:999px;padding:8px 13px;font-size:13px;font-weight:600;color:rgba(255,255,255,.85);} .md-quick a .b{font-size:10.5px;font-weight:700;color:var(--accent);} .md-quick.qs-list{flex-direction:column;gap:0;padding:8px 20px 4px;} .md-quick.qs-list a{width:100%;justify-content:flex-start;background:none;border:none;border-bottom:1px solid var(--line-dark);border-radius:0;padding:14px 0;font-size:15.5px;} .md-quick.qs-list a:last-child{border-bottom:none;} .md-quick.qs-list a .b{margin-left:auto;} .md-cap{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);padding:18px 20px 6px;} .md-cat{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:none;border:none;border-top:1px solid var(--line-dark);padding:15px 20px;color:#fff;cursor:pointer;} .md-cat:active{background:rgba(255,255,255,.04);} .md-cat .mc-ic{width:42px;height:42px;border-radius:12px;flex:none;background:rgba(184,145,90,.16);color:var(--accent);display:flex;align-items:center;justify-content:center;} .md-cat .mc-tx{flex:1;min-width:0;} .md-cat .mc-tx b{display:block;font-size:17px;font-weight:700;letter-spacing:-.01em;} .md-cat .mc-tx span{display:block;font-size:12.5px;color:rgba(255,255,255,.5);margin-top:3px;} .md-cat .mc-chev{color:var(--accent);flex:none;} .md-back{display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.06);border:1px solid var(--line-dark);border-radius:999px;padding:9px 15px 9px 11px;font-size:13px;font-weight:700;color:#fff;margin:16px 20px 4px;cursor:pointer;} .md-l2title{font-size:24px;font-weight:800;letter-spacing:-.02em;padding:12px 20px 2px;} .md-l2sub{font-size:13px;line-height:1.5;color:rgba(255,255,255,.55);padding:0 20px 4px;} .md-l2list{padding:0 20px;} .md-l2list a{display:flex;align-items:center;gap:10px;padding:14px 0;border-top:1px solid var(--line-dark);font-size:16px;font-weight:600;color:#fff;} .md-l2list a:first-child{border-top:none;} .md-l2list a .pl-badge{font-size:10px;font-weight:700;padding:2px 7px;border-radius:999px;background:rgba(184,145,90,.2);color:var(--accent);} .md-l2list a .ar{margin-left:auto;color:var(--accent);} .md-l2all{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--accent);padding:18px 20px 24px;} .mb{margin:14px 20px 6px;border-radius:14px;padding:18px;} .mb-promo{background:rgba(184,145,90,.16);border:1px solid rgba(184,145,90,.3);} .mb-promo .bd{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--accent);} .mb-promo b{display:block;font-size:19px;font-weight:800;letter-spacing:-.01em;margin-top:8px;} .mb-promo p{font-size:13px;color:rgba(255,255,255,.62);margin-top:6px;line-height:1.45;} .mb-facts{background:rgba(255,255,255,.05);border:1px solid var(--line-dark);display:flex;gap:10px;} .mb-facts div{flex:1;} .mb-facts b{display:block;font-size:19px;font-weight:800;letter-spacing:-.02em;} .mb-facts span{font-size:11px;color:rgba(255,255,255,.5);} .mb-case{background:rgba(255,255,255,.05);border:1px solid var(--line-dark);} .mb-case .bd{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--accent);} .mb-case b{display:block;font-size:16px;font-weight:700;margin-top:8px;} .mb-case .pr{font-size:13px;color:rgba(255,255,255,.62);margin-top:7px;} .mb-case .pr strong{font-size:20px;font-weight:800;color:#fff;} .mb-cta{background:rgba(184,145,90,.14);border:1px solid rgba(184,145,90,.3);} .mb-cta b{display:block;font-size:18px;font-weight:800;letter-spacing:-.01em;} .mb-cta p{font-size:12.5px;color:rgba(255,255,255,.62);margin:7px 0 13px;line-height:1.45;} .mb-cta .btn{width:100%;} .md-foot{flex:none;padding:14px 20px 20px;border-top:1px solid var(--line-dark);background:var(--ink);} .md-foot .callrow{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;} .md-foot-call a{display:block;font-weight:800;font-size:20px;color:#fff;} .md-foot-call small{display:block;font-size:11px;color:rgba(255,255,255,.45);margin-top:3px;} .md-foot-socials{display:flex;gap:8px;flex:none;} .md-foot-socials a{width:40px;height:40px;border-radius:9px;flex:none;border:1px solid rgba(184,145,90,.5);color:var(--accent);display:flex;align-items:center;justify-content:center;} .md-foot-mail{display:block;font-size:13px;color:rgba(255,255,255,.62);margin-bottom:12px;} .md-foot .btn-cta{width:100%;padding:15px;} /* ════════ Unified pagination switcher (.pf-pager) ════════ One switcher look for the whole site: portfolio (client-side), blog and any future server-paginated archive (rm3_render_pager). Works as