/* === extracted from remont-pod-klyuch-samara.html: inline-style === */ .hi-about-photo-mobile{ display:none; } @media (max-width: 900px){ /* Центровка текста в блоке "О студии HomeInterior" на мобильной версии */ #services .hi-about{ text-align: center; } #services .hi-about p{ text-align: center; } /* На мобиле картинка про HomeInterior идёт после "Наши услуги" */ #services .hi-about-layout .hi-about-photo{ display: none; } .hi-about-photo-mobile{ display: block; margin: 24px auto 0; max-width: 480px; } .hi-about-photo-mobile img{ display: block; width: 100%; height: auto; border-radius: 14px; box-shadow: 0 0 40px rgba(0,0,0,0.6); object-fit: cover; } /* Тексты под ценами на мобиле — строго по левому краю */ #prices .muted.prices-contract-note, #prices .muted.footnote{ text-align: left; } /* В разделе "Обо мне и команде" на мобиле сначала фото, потом текст */ #team .grid.cols-2 > div:first-child{ order: 2; } #team .grid.cols-2 > div:last-child{ order: 1; } } /* vNext SEO: disable not-ready projects */ .gallery-item-inner.is-disabled{pointer-events:none;cursor:default;} .gallery-item-inner.is-disabled .project-cta-circle{display:none;} .project-badge{position:absolute;left:14px;top:14px;padding:6px 10px;border-radius:999px;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid rgba(191,169,122,.35);color:#fff;font-size:12px;letter-spacing:.06em;text-transform:uppercase;} /* === extracted from remont-pod-klyuch-samara.html: inline-style === */ *{box-sizing:border-box;}body{margin:0;font-family:Manrope,Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;color:var(--text);background:var(--bg);line-height:1.65;}h1,h2,h3{margin:0 0 12px;line-height:1.2}p{margin:0 0 12px}a{text-decoration:none}.wrap{width:min(90%,1600px);margin-inline:auto;}section{padding:80px 0;border-top:1px solid var(--border);}.btn,.btn-outline{display:inline-block;padding:13px 22px;border-radius:10px;font-weight:600;transition:.25s}.btn{background:#222;color:#fff}.btn-outline{border:1px solid #222;color:#222}.btn:hover,.btn-outline:hover{opacity:.9}/* HERO */#hero{ min-height:100vh; display:flex; align-items:center; justify-content:center; text-align:center; color:#fff; overflow:hidden; }.hero-bg{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity 1.2s ease-in-out; will-change: opacity; }.hero-bg.active{opacity:1;}#hero::after{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.35); z-index:1; }#hero .content{ position:relative; z-index:2; width:min(96%,1280px); }.hero-subtitle{ font-size:clamp(16px,1.8vw,22px); /* увеличен размер */ letter-spacing:.4px; margin:0 0 8px; /* меньше отступа вниз */ text-shadow:0 1px 3px rgba(0,0,0,.45); /* чуть сильнее тень */ }.hero-title{ font-size:clamp(26px,3.6vw,46px); font-weight:700; margin-bottom:8px; position:relative; min-height:44px; }.hero-title span{ position:absolute; left:0;right:0; opacity:0; transition:opacity 0.7s ease; white-space:nowrap; }.hero-title span.active{opacity:1;}.hero-subline{ position:relative; min-height:30px; font-size:clamp(14px,1.6vw,20px); opacity:.95; text-shadow:0 1px 2px rgba(0,0,0,.35); margin-bottom:12px; transition: opacity .28s ease; }.hero-subline.is-fading{opacity:0;}#hero .cta{margin-top:18px;gap:12px;flex-wrap:wrap}/* Навигация: стрелки */.hero-nav { position: absolute; top: 50%; transform: translateY(-50%); font-size: 42px; color: #fff; cursor: pointer; z-index: 5; padding: 8px 16px; user-select: none; transition: opacity .3s; opacity: .7; }.hero-nav:hover { opacity: 1; }.hero-nav.left { left: 20px; }.hero-nav.right { right: 20px; }/* Навигация: точки (под обоими текстами) */.hero-dots{ display:flex; gap:10px; justify-content:center; margin:10px auto 0; }.hero-dot{ width:12px;height:12px;border-radius:50%; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.7); cursor:pointer; transition:transform .2s ease, background .2s ease, border-color .2s ease; }.hero-dot:hover{ transform:scale(1.1); }.hero-dot.active{ background:#fff; border-color:#fff; }.hero-counter{ display:flex; justify-content:center; align-items:center; gap:6px; margin:10px auto 0; font-size:12px; letter-spacing:.08em; text-transform:uppercase; opacity:.85; user-select:none; }.grid{display:grid;gap:28px}@media (min-width:920px){ .grid.cols-2{grid-template-columns:1fr 1fr}.grid.cols-3{grid-template-columns:repeat(3,1fr)} } .gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:14px}.gallery img{width:100%;height:auto;border-radius:12px;}.gallery-item img{ transition:transform .6s ease-out; }.gallery-item-more{ display:none; }.gallery-item{ position:relative; width:100%; overflow:hidden; border-radius:12px; }.gallery-item img{ display:block; width:100%; height:auto; border-radius:12px; transition:transform .4s ease; }.gallery-item-inner{ position:relative; display:block; width:100%; height:100%; }.project-cta-circle{ position:absolute; right:16px; bottom:16px; width:44px; height:44px; border-radius:999px; border:none; background:rgba(0,0,0,.45); display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 0 0 rgba(191,169,122,0); transition:box-shadow .3s ease, transform .3s ease, border-color .3s ease, background .3s ease; z-index:2; }.project-cta-circle span{ display:block; font-size:20px; line-height:1; color:#fff; transition:transform .3s ease; }.gallery-item:hover .project-cta-circle span{ transform:rotate(45deg); }.gallery-item:hover img{ transform:scale(1.08); }.gallery-item:hover .project-cta-circle{ box-shadow:0 0 18px rgba(191,169,122,.65); border-color:var(--hi-accent); background:rgba(0,0,0,.7); transform:translateY(-2px); }/* Touch feedback for project cards on tap (mobile) */.gallery-item-inner.is-touching img{ transform:scale(1.08); }.gallery-item-inner.is-touching .project-cta-circle{ box-shadow:0 0 18px rgba(191,169,122,.65); border-color:var(--hi-accent); background:rgba(0,0,0,.7); transform:translateY(-2px); }.gallery-item-inner.is-touching .project-cta-circle span{ transform:rotate(45deg); }.portfolio-more-wrap{ margin-top:24px; text-align:center; }.portfolio-more-btn{ min-width:260px; }.muted{color:var(--muted)}#about{padding:60px 0;}@media (max-width: 768px){ section { padding: 40px 0; }#hero { min-height: 90vh; }.hero-title span{white-space:normal;position:relative;display:none;opacity:1;}.hero-title{min-height:auto;}.hero-subline{min-height:auto;}.hero-title span.active{display:block;}.wrap { width: 92%; }.btn, .btn-outline { width: 100%; max-width: 300px; margin-inline: auto; } } /* == Active menu highlight (scrollspy) == *//* == Unified button hover (gold bg, dark text — matches social icons) == */@media (max-width: 900px){ #portfolio{ scroll-margin-top:80px !important; }#prices{ margin-top:-40px !important; } } /* === extracted from remont-pod-klyuch-samara.html: inline-style === */ /* ===== FIXED BUTTON HOVER PRIORITY ===== */ /* === extracted from remont-pod-klyuch-samara.html: inline-style === */ /* === v30: Clean unified styles for entire site === *//* Header stability *//* General button design *//* Hover states - uniform gold glow for all buttons *//* Specific fix: phone button equal neon distribution *//* Ensure consistent rounding */@media (max-width: 768px){ .cta .btn, .cta .btn-outline { width: 100%; max-width: 280px; } } /* === extracted from remont-pod-klyuch-samara.html: hero-buttons-align-v34 === */ /* === v34: Perfect horizontal alignment for hero CTA buttons === */ #hero .cta { display: flex; justify-content: center; align-items: center; gap: 18px; flex-wrap: nowrap; margin-top: 22px; } #hero .cta a { display: inline-flex; align-items: center; justify-content: center; padding: 14px 38px; line-height: 1; white-space: nowrap; } @media (max-width: 768px) { #hero .cta { flex-wrap: wrap; gap: 14px; } #hero .cta a { width: 100%; max-width: 300px; } } /* === extracted from remont-pod-klyuch-samara.html: header-match-v23-v51 === */ /* === v51: Header width & nav layout exactly like v23 === */ /* === extracted from remont-pod-klyuch-samara.html: phone-match-call-v52 === */ /* v52: Make phone button identical in size & styling to 'Заказать звонок' */ /* === extracted from remont-pod-klyuch-samara.html: phone-transparent-v53 === */ /* v53: Phone button without default fill/border; keep gold fill + neon glow on hover */ /* === extracted from remont-pod-klyuch-samara.html: header-nav-like-phone-v88 === */ /* v88: Header nav buttons hover like 'Телефон' (gold fill, black text, neon glow) *//* Hover state to match phone button */ /* === extracted from remont-pod-klyuch-samara.html: logo-neon-hover-v89 === */ /* v89: Neon glow on hover for the 'Home Interior' logo (no background fill change) *//* Soft golden neon glow similar to buttons, but kept as text glow to avoid layout shift */ /* === extracted from remont-pod-klyuch-samara.html: header-nav-fill-v91 === */ /* v91: Match vertical fill to VK/IG without changing spacing or centering *//* Keep the gold hover from v88 */ /* === extracted from remont-pod-klyuch-samara.html: call-btn-flush-v92 === */ /* v92: Make 'Заказать звонок' button flush top/bottom like VK & Instagram *//* Keep the same hover behavior as other header buttons */ /* === extracted from remont-pod-klyuch-samara.html: phone-flush-v93 === */ /* v93: Make 'Телефон' button flush top/bottom like other header buttons *//* Keep hover behavior intact (gold fill + neon) */ /* === extracted from remont-pod-klyuch-samara.html: phone-compact-v94 === */ /* v94: Make 'Телефон' button less wide horizontally (keep same height) */ /* === extracted from remont-pod-klyuch-samara.html: cta-taller-v99 === */ /* v99: Make 'Портфолио' and 'Оставить заявку' buttons slightly taller (keep width same) */ .cta .btn, .cta .btn-outline { padding-block: 16px !important; /* increase height */ } /* === extracted from remont-pod-klyuch-samara.html: cta-taller-v100 === */ /* v100: Make 'Портфолио' and 'Оставить заявку' buttons a bit taller */ /* === extracted from remont-pod-klyuch-samara.html: cta-narrower-v101 === */ /* v101: Make 'Портфолио' and 'Оставить заявку' buttons slightly narrower */ .cta .btn, .cta .btn-outline { padding-inline: 18px !important; /* was wider, now narrower */ /* keep previous height */ /* keep single line text */ } /* === extracted from remont-pod-klyuch-samara.html: cta-narrower-v102 === */ /* v102: Slightly reduce width of 'Портфолио' and 'Оставить заявку' (minor adjustment) */ .cta .btn, .cta .btn-outline { padding-inline: 20px !important; /* was 18px, now a bit wider again */ padding-block: 20px !important; /* keep height */ line-height: 1 !important; border-radius: 12px !important; white-space: nowrap !important; } /* === extracted from remont-pod-klyuch-samara.html: nocross-active-core-v3 === */ /* Remove the cross near HOME INTERIOR logo *//* Make .active match :hover (gold fill + neon + lift) */ /* === extracted from remont-pod-klyuch-samara.html: hero-dots-original-brightglow-v2 === */ /* Original white dots + GOLD neon glow on hover & active; active fills gold */ .hero-dot{ background: rgba(255,255,255,0.12) !important; /* original subtle white fill */ border: 1px solid rgba(255,255,255,0.8) !important; /* original white border */ border-radius: 50% !important; box-shadow: none !important; transition: background .25s ease, box-shadow .35s ease, transform .25s ease, border-color .25s ease; } .hero-dot:hover{ background: rgba(255,255,255,0.22) !important; /* slight brighten on hover */ box-shadow: 0 0 18px rgba(191,169,122,0.70), /* GOLD glow like buttons */ 0 0 36px rgba(191,169,122,0.45) !important; transform: scale(1.12); border-color: rgba(255,255,255,0.95) !important; /* keep white edge crisp */ } .hero-dot.active{ background: #BFA97A !important; /* solid GOLD when active */ border-color: #BFA97A !important; box-shadow: 0 0 22px rgba(191,169,122,0.85), 0 0 48px rgba(191,169,122,0.60), 0 0 80px rgba(191,169,122,0.40) !important; /* deeper GOLD halo */ transform: scale(1.18); } /* === extracted from remont-pod-klyuch-samara.html: header-glow-dynamic-v18 === */ /* === GLOWFIX10_final: starts exactly at header bottom, short smooth downward gradient === */ /* === extracted from remont-pod-klyuch-samara.html: contacts-map-styles === */ .contact-grid{display:grid;grid-template-columns:1.1fr 1.6fr;gap:24px;align-items:start} @media(max-width: 900px){.contact-grid{grid-template-columns:1fr;gap:16px}} .contact-info .nap p{margin:4px 0 8px} .contact-info .cta-row{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap} .contact-map{position:relative;min-height:280px;border-radius:14px;overflow:hidden;border:1px solid var(--border)} .map-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at center, rgba(255,255,255,.12), rgba(0,0,0,.35)), url("data:image/svg+xml;utf8,");backdrop-filter: blur(2px);cursor:pointer} .map-placeholder span{padding:10px 14px;border-radius:999px;background:rgba(0,0,0,.55);color:#fff;box-shadow:0 0 16px rgba(191,169,122,.5), 0 0 36px rgba(191,169,122,.35)} .map-canvas{position:absolute;inset:0} /* === extracted from remont-pod-klyuch-samara.html: prices-polish === */ .hi-prices-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px} @media(max-width:1024px){.hi-prices-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:680px){.hi-prices-grid{grid-template-columns:1fr}} .price-card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:22px;box-shadow:0 8px 28px rgba(0,0,0,.04);transition:transform .25s ease, box-shadow .25s ease} .price-card:hover{transform:translateY(-2px);box-shadow:0 12px 36px rgba(0,0,0,.07)} .price-card header{margin-bottom:10px} .price-card h3{margin:4px 0 2px;font-size:20px} .price-card .subtitle{margin:0;color:#6b7280;font-size:14px} .price-card .features{margin:12px 0 16px;padding-left:18px;line-height:1.6} .price-card .price{font-weight:700;font-size:18px;margin:0 0 14px} .price-card .price.main{font-size:20px} .price-card .icon-dot,.price-card .icon-crown,.price-card .icon-star{width:26px;height:26px;border-radius:50%;box-shadow:0 0 16px rgba(191,169,122,.45), 0 0 32px rgba(191,169,122,.25);margin-bottom:6px} .price-card .icon-dot{background:radial-gradient(circle at 50% 50%, #f2e7c8 0%, #bfa97a 70%)} .price-card .icon-crown{background:radial-gradient(circle at 50% 50%, #fff8db 0%, #d4b97a 70%)} .price-card .icon-star{background:radial-gradient(circle at 50% 50%, #fdeab8 0%, #c9ad6e 70%)} .price-card.featured{border:2px solid var(--hi-accent);position:relative} .price-card.featured::after{content:"";position:absolute;top:10px;right:12px;font-size:12px;color:#bfa97a} .hi-prices-table-wrap{overflow:auto;border:1px solid var(--border);border-radius:14px;background:#fff} .hi-prices-table{width:100%;border-collapse:separate;border-spacing:0} .hi-prices-table th,.hi-prices-table td{padding:14px 16px;border-bottom:1px solid var(--border);vertical-align:top} .hi-prices-table thead th{font-weight:700;text-align:left;background:#fafafa} .hi-prices-table tbody tr:last-child td{border-bottom:0} .hi-prices-table .price-col{white-space:nowrap} .hi-prices-table tbody tr.featured{background:linear-gradient(180deg,#fff,#fffef7)} .btn.sm{padding:8px 12px;font-size:14px} .btn-outline.sm{padding:8px 12px;font-size:14px} @media(max-width:720px){ .hi-prices-table thead{display:none} .hi-prices-table tbody tr{display:block;border-bottom:1px solid var(--border)} .hi-prices-table td{display:flex;justify-content:space-between;gap:12px} .hi-prices-table td::before{content:attr(data-label);font-weight:600;color:#6b7280} .hi-prices-table td.price-col{justify-content:flex-start} } /* === extracted from remont-pod-klyuch-samara.html: hi-about-min === */ #services .hi-about{margin: 0 0 22px 0;} #services .hi-about p{margin: 0 auto 4px; max-width: 1100px; text-align:center; white-space: normal; overflow-wrap: normal; word-break: normal; hyphens: none;} #services .hi-about-title{margin: 0 0 8px 0; font-weight: 700;} #services .hi-about-layout{display:flex;align-items:flex-start;gap:40px;} #services .hi-about-photo{flex:0 0 48%;max-width:48%;margin-top:20px;} #services .hi-about-photo img{display:block;width:100%;height:auto;border-radius:14px;box-shadow:0 0 40px rgba(0,0,0,0.6);object-fit:cover;} #services .hi-services-main strong{ color: var(--hi-text-dim); font-weight: 600; } #services .hi-services-layout{display:flex;align-items:flex-start;gap:40px;margin-top:-6px;} #services .hi-services-main{flex:1 1 52%;} #services .hi-services-side{flex:0 0 48%;max-width:48%;padding-top:0;} #services .hi-services-side h2{margin:0 0 10px 0;font-weight:700;} #services .hi-services-side p{margin:0 0 6px 0;font-size:inherit;line-height:inherit;} #services .hi-services-side ul{margin:0;padding-left:18px;font-size:inherit;line-height:inherit;} #services .hi-services-side li{margin-bottom:6px;} #services .hi-services-main h2, #services .hi-services-side h2{text-align:left;margin:0 0 16px 0;} #services .hi-services-main ul{list-style:none;padding-left:0;margin:0;} #services .hi-services-main li{margin-bottom:6px;} @media(max-width:900px){ #services .hi-about p{text-align:center;} #services .hi-services-layout{flex-direction:column;gap:24px;margin-top:12px;} #services .hi-services-side{flex:0 0 auto;max-width:100%;} #services .hi-services-main{flex:1 1 auto;} #services .hi-about-layout{flex-direction:column;} #services .hi-about-photo{flex:0 0 auto;max-width:100%;margin-top:20px;} } /* === extracted from remont-pod-klyuch-samara.html: hi-headings-underline === */ /* Gold underline auto-fits the width of each heading text (except hero) */ section:not(#hero) h2.section-title, section:not(#hero) > .wrap > h2, #services h2, #design-steps h2, #portfolio h2, #prices h2, #pricing h2, #partners h2, #contacts h2 { position: relative; display: inline-block; margin-bottom: 16px; } section:not(#hero) h2.section-title::after, section:not(#hero) > .wrap > h2::after, #services h2::after, #design-steps h2::after, #portfolio h2::after, #prices h2::after, #pricing h2::after, #partners h2::after, #contacts h2::after { content: ""; position: absolute; left: 0; /* align underline to start of heading */ bottom: -10px; height: 1px; width: 100%; /* auto = full width of heading text */ background: linear-gradient(90deg, rgba(191,169,122,0.0) 0%, rgba(191,169,122,0.85) 12%, rgba(191,169,122,0.95) 50%, rgba(191,169,122,0.85) 88%, rgba(191,169,122,0.0) 100%); box-shadow: 0 0 10px rgba(191,169,122,.45), 0 0 22px rgba(191,169,122,.25); border-radius: 2px; } @media (max-width: 768px){ section:not(#hero) h2.section-title::after, section:not(#hero) > .wrap > h2::after, #services h2::after, #design-steps h2::after, #portfolio h2::after, #prices h2::after, #pricing h2::after, #partners h2::after, #contacts h2::after { bottom: -8px; } } /* === extracted from remont-pod-klyuch-samara.html: hero-underline-tapered === */ /* Thin, subtle animated gold underline (auto-width) */ #hero .hero-subtitle{ display:inline-block; padding-bottom:14px; } #hero .hero-subtitle .u-core, #hero .hero-subtitle .u-glow{ top:100%; position:absolute; left:50%; transform: translate(-50%,-50%); bottom:0; width:0; pointer-events:none; } /* Core line: 2px with tapered gradient */ #hero .hero-subtitle .u-core{ height:2px; background: linear-gradient(90deg, rgba(191,169,122,0.00) 0%, rgba(191,169,122,0.70) 15%, rgba(191,169,122,0.90) 50%, rgba(191,169,122,0.70) 85%, rgba(191,169,122,0.00) 100%); box-shadow: 0 0 4px rgba(191,169,122,.25), 0 0 10px rgba(191,169,122,.18); -webkit-mask-image: radial-gradient(110% 100% at 50% 50%, #000 55%, rgba(0,0,0,0) 100%); mask-image: radial-gradient(110% 100% at 50% 50%, #000 55%, rgba(0,0,0,0) 100%); border-radius: 2px; } /* Mid highlight strip inside core for metallic feel (1px) */ #hero .hero-subtitle .u-core::before{ content:""; position:absolute; left:0; right:0; top:50%; height:1px; transform:translateY(-50%); background: linear-gradient(90deg, rgba(255, 240, 200, 0.00) 0%, rgba(255, 240, 200, 0.70) 48%, rgba(255, 240, 200, 0.70) 52%, rgba(255, 240, 200, 0.00) 100%); -webkit-mask-image: radial-gradient(110% 100% at 50% 50%, #000 60%, rgba(0,0,0,0) 100%); mask-image: radial-gradient(110% 100% at 50% 50%, #000 60%, rgba(0,0,0,0) 100%); border-radius: 1px; } /* Soft halo: 6px height, light blur & low opacity */ #hero .hero-subtitle .u-glow{ top:100%; height:8px; background: linear-gradient(90deg, rgba(191,169,122,0.00) 0%, rgba(191,169,122,0.22) 20%, rgba(191,169,122,0.28) 50%, rgba(191,169,122,0.22) 80%, rgba(191,169,122,0.00) 100%); filter: blur(1px); opacity:.75; -webkit-mask-image: radial-gradient(140% 100% at 50% 50%, #000 55%, rgba(0,0,0,0) 100%); mask-image: radial-gradient(140% 100% at 50% 50%, #000 55%, rgba(0,0,0,0) 100%); border-radius: 6px; } @media (max-width: 768px){ #hero .hero-subtitle{ padding-bottom:12px; } #hero .hero-subtitle .u-glow{ top:100%; height:8px; } } /* === extracted from remont-pod-klyuch-samara.html: hero-subtitle-size-clamp === */ #hero .hero-subtitle{ font-size: clamp(16px, calc(1.2vw + 12px), 22px) !important; line-height: 1.25; } /* === extracted from remont-pod-klyuch-samara.html: night-theme-v1 === */ body{ background:var(--hi-bg); color:var(--hi-text); }section{ background:var(--hi-surface); color:var(--hi-text); }section p, section li{ color:var(--hi-text-dim); }/* Hero overlay: gentle darkening for slides */#hero{ position:relative; }#hero::before{ content:""; position:absolute; inset:0; pointer-events:none; z-index:1; background: linear-gradient(to bottom, rgba(0,0,0,.22) 0%, rgba(0,0,0,.42) 100%); }#hero .content, #hero .hero-title, #hero .hero-subtitle, #hero .cta{ position:relative; z-index:2; }/* Keep hero underline above overlay */#hero .hero-subtitle{ position:relative; z-index:3; }/* Header underglow: bright core line + soft glow strictly below the header */ /* === extracted from remont-pod-klyuch-samara.html: merge-services-steps-equal-12 === */ #services{ padding-bottom:12px !important; } #design-steps{ border-top:0 !important; padding-top:12px !important; } /* === extracted from remont-pod-klyuch-samara.html: prices-polish-v2 === */ /* Grid */ #prices .hi-prices-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; align-items: stretch; } /* Card */ #prices .price-card{ background: #1b1b1c; border: 1px solid rgba(191,169,122,0.28); border-radius: 16px; padding: 22px 22px 24px; box-shadow: 0 1px 0 rgba(255,255,255,0.02), inset 0 0 0 1px rgba(255,255,255,0.03); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; position: relative; overflow: hidden; } #prices .price-card:hover{ transform: translateY(-2px); border-color: rgba(191,169,122,0.45); box-shadow: 0 0 22px rgba(191,169,122,0.20), 0 8px 24px rgba(0,0,0,0.35); } /* Featured */ #prices .price-card.featured{ background: #202021; border-color: rgba(191,169,122,0.55); box-shadow: 0 0 26px rgba(191,169,122,0.18), 0 10px 28px rgba(0,0,0,0.38); } /* Header */ #prices .price-card h3{ font-size: clamp(18px, 1.45vw, 22px); line-height: 1.15; margin: 6px 0 6px; color: var(--hi-text, #E8E3D4); letter-spacing: .2px; } #prices .price-card .subtitle{ margin: 0; font-size: clamp(12px, .95vw, 14px); color: var(--hi-text-dim, #CFC8B5); opacity: .9; } /* Icons (gold, minimalist) */ #prices .icon-dot, #prices .icon-crown{ width: 22px; height: 22px; border-radius: 50%; position: relative; display: inline-block; background: radial-gradient(circle at 50% 50%, rgba(191,169,122,0.32), rgba(191,169,122,0.06) 60%, transparent 70%); box-shadow: 0 0 10px rgba(191,169,122,0.25); } #prices .icon-dot::after{ content:""; position:absolute; inset:6px; border-radius: 50%; border:1px solid rgba(191,169,122,0.9); } #prices .icon-crown::after{ content:""; position:absolute; left:5px; right:5px; top:6px; bottom:6px; background: linear-gradient(135deg, transparent 45%, rgba(191,169,122,0.95) 46%, rgba(191,169,122,0.95) 54%, transparent 55%) left top/50% 50% no-repeat, linear-gradient(225deg, transparent 45%, rgba(191,169,122,0.95) 46%, rgba(191,169,122,0.95) 54%, transparent 55%) right top/50% 50% no-repeat, linear-gradient(0deg, rgba(191,169,122,0.95), rgba(191,169,122,0.95)) center bottom/60% 18% no-repeat; border-radius: 2px; } /* Features list */ #prices .features{ list-style: none; padding: 0; margin: 10px 0 12px; } #prices .features li{ display: grid; grid-template-columns: 18px 1fr; align-items: center; gap: 10px; margin: 6px 0; font-size: clamp(13px, 1.05vw, 15px); color: var(--hi-text-dim, #CFC8B5); } #prices .features li::before{ content:""; width: 14px; height: 14px; margin-top: 2px; border-radius: 50%; border: 1px solid rgba(191,169,122,.9); box-shadow: 0 0 10px rgba(191,169,122,.35); background: radial-gradient(circle at 50% 50%, rgba(191,169,122,.35), rgba(191,169,122,.10) 60%, transparent 70%); } /* Price value */ #prices .price{ font-size: clamp(16px, 1.2vw, 18px); color: var(--hi-text, #E8E3D4); letter-spacing: .2px; margin: 10px 0 12px; } #prices .price strong, #prices .price b{ color: var(--hi-gold, #BFA97A); font-weight: 600; } /* CTA inside prices only: align with night theme */ #prices .btn-outline{ display: inline-block; padding: 10px 14px; border: 1px solid rgba(191,169,122,.7); border-radius: 999px; color: var(--hi-text, #E8E3D4); text-decoration: none; transition: box-shadow .25s ease, background-color .25s ease, transform .2s ease; background: rgba(191,169,122,.08); box-shadow: 0 0 10px rgba(191,169,122,.18) inset, 0 0 0 rgba(0,0,0,0); } #prices .btn-outline:hover{ background: rgba(191,169,122,.16); box-shadow: 0 0 18px rgba(191,169,122,.28), 0 0 1px rgba(191,169,122,.65) inset; transform: translateY(-1px); } /* Small rhythm tweaks */ #prices h2{ margin-bottom: 12px; } #prices p.muted{ color: var(--hi-text-dim, #CFC8B5); } /* === extracted from remont-pod-klyuch-samara.html: contacts-link-and-btn-style === */ #contacts a[href^="tel:"], #contacts a[href^="mailto:"]{ color: var(--hi-text, #E8E3D4) !important; text-decoration: none; } #contacts a[href^="tel:"]:hover, #contacts a[href^="mailto:"]:hover{ color: var(--hi-text, #E8E3D4) !important; text-shadow: 0 0 10px rgba(191,169,122,.25); } #contacts .btn, #contacts button, #contacts input[type="submit"]{ display:inline-block; padding:12px 18px; border-radius:999px; text-decoration:none; border:1px solid rgba(255,255,255,.12); background:#111; color:#E8E3D4; box-shadow:0 0 12px rgba(0,0,0,.45), 0 0 16px rgba(191,169,122,.20); cursor:pointer; } #contacts .btn:hover, #contacts button:hover, #contacts input[type="submit"]:hover{ background:#161616; box-shadow:0 0 18px rgba(0,0,0,.55), 0 0 22px rgba(191,169,122,.28); } /* === extracted from remont-pod-klyuch-samara.html: inline-style === */ /* footer socials row */ .hi-socials-footer{display:flex;justify-content:center;gap:12px;margin:18px 0 6px} @media (max-width:640px){.hi-socials-footer{gap:10px;margin:14px 0 4px}} /* === extracted from remont-pod-klyuch-samara.html: inline-style === */ /* === Unify footer nav button look with header === *//* Hover/focus = gold fill + black text + neon (same as header) *//* Active state in footer mirrors header's active */ /* === extracted from remont-pod-klyuch-samara.html: footer-nav-stablesize === */ /* Footer nav — no visual pill in idle, but reserve space to avoid shift *//* Hover/focus — match header pill (gold + glow) without moving *//* Active in footer — optionally the same as hover; keep size identical */ /* === extracted from remont-pod-klyuch-samara.html: mobile-cls-guard === */ @media (max-width: 768px){ html, body { width:100%; max-width:100vw; overflow-x:hidden; } section, [class*="section"], [class*="block"], .container { box-sizing:border-box; width:100%; max-width:100%; margin-left:auto; margin-right:auto; } header nav a[href^="#"]{ padding: 8px 14px; border:1px solid transparent; border-radius:12px; } * { transition-property: color, background-color, box-shadow, opacity, transform !important; } img, video { display:block; max-width:100%; height:auto; } } /* === extracted from remont-pod-klyuch-samara.html: hi-mobile-header-v1 === */ /* Drawer *//* Sticky header & scroll compensation */:root { scroll-behavior: smooth; }@media (max-width: 880px){ body{ scroll-padding-top: 72px; } } /* === extracted from remont-pod-klyuch-samara.html: inline-style === */ @media (max-width: 900px){ h2.section-title, #services h2, #design-steps h2, #portfolio h2, #prices h2, #team h2, #partners h2, #contacts h2 { display: block !important; margin-left: auto !important; margin-right: auto !important; text-align: center !important; } } /* === extracted from remont-pod-klyuch-samara.html: inline-style === */ /* Remove horizontal divider lines between sections */ section{ border-top:none !important; } /* === extracted from remont-pod-klyuch-samara.html: desktop-headings-left-final === */ @media (min-width: 901px) { h2.section-title, #services h2, #design-steps h2, #portfolio h2, #prices h2, #team h2, #partners h2, #contacts h2 { text-align: left !important; margin-left: 0 !important; margin-right: 0 !important; } } /* === extracted from remont-pod-klyuch-samara.html: inline-style === */ /* Desktop: underline slightly wider than heading text */ @media (min-width: 1025px){ section:not(#hero) h2.section-title::after, section:not(#hero) > .wrap > h2::after, #services h2::after, #design-steps h2::after, #portfolio h2::after, #prices h2::after, #pricing h2::after, #partners h2::after, #contacts h2::after { left:-5% !important; width:110% !important; } } /* === extracted from remont-pod-klyuch-samara.html: inline-style === */ /* Смещаем скролл по якорям на мобиле, чтобы шапка не перекрывала заголовки */ @media (max-width: 900px){ section[id], [id^="section"], #hero, #services, #design-steps, #portfolio, #prices, #team, #partners, #contacts { scroll-margin-top: var(--himob-h) !important; } } /* === extracted from remont-pod-klyuch-samara.html: inline-style === */ /* chernovich: отключаем подсветку подвала и горизонтальную линию */ #footer-light, .foot-underline { display: none !important; } /* === extracted from remont-pod-klyuch-samara.html: inline-style === */ /* Точное смещение якоря для раздела Портфолио на мобиле: выравниваем отступ по шапке как у остальных разделов */ @media (max-width: 900px){ #portfolio{ scroll-margin-top: var(--himob-h) !important; } } /* === extracted from remont-pod-klyuch-samara.html: portfolio-gallery-2cols-desktop === */ @media (min-width: 1024px){ .gallery{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } /* === extracted from remont-pod-klyuch-samara.html: desktop-typography-tune === */ /* Увеличение читабельности на десктопе */ @media (min-width: 1024px){ body{ font-size:17px; } h2{ font-size:28px; } #hero .hero-title{ font-size:clamp(30px,3.8vw,50px); } #hero .hero-subline{ font-size:18px; } #services p, #portfolio p, #prices p, #team p, #contacts p{ font-size:18px; line-height:1.5; } #prices .hi-price-title{ font-size:20px; } #prices .hi-price-tagline{ font-size:16px; } } /* === extracted from remont-pod-klyuch-samara.html: desktop-center-main-headings-v2 === */ @media (min-width: 1024px){ /* Центруем ключевые заголовки на десктопе: "О студии", "Цены", "Как мы работаем", портфолио */ #services .hi-about-title.section-title, #portfolio > .wrap > h2, #prices > .wrap > h2, #design-steps h2{ display:block !important; width:max-content !important; margin-left:auto !important; margin-right:auto !important; text-align:center !important; } } /* === extracted from remont-pod-klyuch-samara.html: desktop-main-headings-bigger === */ @media (min-width: 1024px){ #services .hi-about-title.section-title, #portfolio > .wrap > h2, #prices > .wrap > h2, #team > .wrap > h2{ font-size:36px !important; } } /* === extracted from remont-pod-klyuch-samara.html: desktop-bodytext-unify-v1 === */ /* Выровнял размер шрифта для всего основного текста на десктопе (услуги, этапы, описания пакетов и списки) под разделы "О студии" и "Обо мне и команде". */ @media (min-width: 1024px){ /* Список услуг под "О студии" */ #services li{ font-size:18px; line-height:1.5; } /* Описания этапов работы */ #design-steps p{ font-size:18px; line-height:1.5; } /* Текст в карточках тарифов: подзаголовки и пункты списков */ #prices .price-card .subtitle, #prices .features li{ font-size:18px; } } /* === extracted from remont-pod-klyuch-samara.html: hi-mobile-tune-v2 === */ @media (max-width: 900px){ #services, #design-steps, #portfolio, #prices, #team, #partners, #contacts { scroll-margin-top: 56px !important; } } /* === extracted from remont-pod-klyuch-samara.html: mobile-team-gap-fix === */ @media (max-width: 900px){ /* Поднять раздел "Обо мне и команде" ближе к "Цены на дизайн интерьера" и не трогать десктоп */ #team{ margin-top: -30px !important; padding-top: 20px !important; } } /* === extracted from remont-pod-klyuch-samara.html: mobile-micro-fixes-20251129 === */ @media (max-width: 900px){ /* 1) Anchor offset: slightly more gap between header and "Обо мне и команде" */#team{ scroll-margin-top: 61px !important; }/* 2) Bigger mobile logo *//* 3) Vertically center contents in mobile header (slightly lower) *//* 4) Mobile nav background closer to desktop transparency *//* 5) Reduce gap before "Наши партнёры" */#partners{ padding-top:60px; }/* 6) Slimmer project CTA arrows on mobile */.project-cta-circle{ width:40px; height:40px; right:12px; bottom:12px; }.project-cta-circle span{ font-size:22px; font-weight:600; }/* 7a) Bigger tariff titles on mobile */#prices .price-card h3{ font-size:21px; }/* 7) Unify font size in prices section on mobile */#prices .price-card .subtitle, #prices .features li, #prices .price{ font-size:17px; line-height:1.6; }/* 8) Center "Заказать" buttons in tariff cards */#prices .price-card .btn{ display:block; width:max-content; margin:8px auto 0; text-align:center; } } /* === extracted from remont-pod-klyuch-samara.html: homeinterior-extra-fixes-20251129 === */ /* Slightly more transparent header on mobile + clearer project tap feedback + partners gap + price header centering */#partners{ padding-top:60px !important; }@media (max-width: 900px){ /* Active (tap) feedback for project cards */.gallery-item-inner:active img{ transform:scale(1.08); }.gallery-item-inner:active .project-cta-circle{ box-shadow:0 0 18px rgba(191,169,122,.65); border-color:var(--hi-accent); background:rgba(0,0,0,.7); transform:translateY(-2px); }.gallery-item-inner:active .project-cta-circle span{ transform:rotate(45deg); } } /* Hide "рекомендуем" label on featured tariff */#prices .price-card.featured::after{ content:""; display:none; } /* === extracted from remont-pod-klyuch-samara.html: mobile-final-tweaks-20251129b === */ /* 5) Partners gap globally tightened */#partners{ padding-top:40px !important; }/* 7) Align price headers: icon + title in one row, subtitle below */#prices .price-card header{ margin-bottom:10px; justify-content:center; text-align:center; }#prices .price-card header .icon-dot, #prices .price-card header .icon-crown, #prices .price-card header .icon-star{ margin-bottom:0; }@media (max-width: 900px){ /* 4) More transparent mobile header + nav *//* 6) Slightly thicker project arrow on mobile */.project-cta-circle span{ font-size:24px !important; font-weight:700 !important; } } /* === extracted from remont-pod-klyuch-samara.html: desktop-prices-align-20251129 === */ @media (min-width: 1024px){ #prices .price-card .subtitle{ display:block; text-align:left; } #prices .price-card .btn{ display:block; width:max-content; margin:12px auto 0; text-align:center; } } /* === extracted from remont-pod-klyuch-samara.html: prices-subtitle-all-align-20251129 === */ #prices .price-card .subtitle{ display:block; text-align:left; } #prices .price-card .price{ text-align:center; } /* === extracted from remont-pod-klyuch-samara.html: prices-price-row-align-20251129 === */ #prices .price-card .price-row{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:12px; } #prices .price-card .price-row .price{ text-align:left; margin:0; } #prices .price-card .price-row .btn{ display:inline-flex; width:auto; margin:0; text-align:center; } /* === extracted from remont-pod-klyuch-samara.html: prices-header-icon-left-20251130 === */ #prices .price-card header{ gap:10px; } #prices .price-card header .icon-dot, #prices .price-card header .icon-crown, #prices .price-card header .icon-star{ margin:0; flex:0 0 auto; } /* === extracted from remont-pod-klyuch-samara.html: prices-price-size-20251130 === */ #prices .price-card .price{ font-size:20px; } #prices .price-card .price.main{ font-size:22px; } /* === extracted from remont-pod-klyuch-samara.html: prices-stars-inline-left-20251129 === */ /* Stars + title in one line, left-aligned, both desktop and mobile */ #prices .price-card header{ display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-start; text-align:left; gap:8px; } #prices .price-card header .price-stars{ font-size:20px; letter-spacing:2px; color:var(--hi-accent); line-height:1; } #prices .price-card header h3{ margin:0; } #prices .price-card header .subtitle{ flex-basis:100%; margin-top:4px; } /* === extracted from remont-pod-klyuch-samara.html: prices-finetune-20251130 === */ /* 3) Extra space under prices heading */ #prices h2{ margin-bottom: 24px !important; } /* 4) More top margin for contract note under packages */ #prices .prices-contract-note{ margin-top: 24px; } /* 5) Contract link color same as main text (like "Эскизный проект") */ #prices .prices-contract-note a{ color: var(--hi-text); text-decoration: underline; } /* 6) Contract texts alignment and rhythm unified with "О студии" */ #prices .prices-contract-note, #prices .footnote{ text-align: justify; text-justify: inter-word; } /* === extracted from remont-pod-klyuch-samara.html: mobile-body-text-up-20251130 === */ @media (max-width: 900px){ #prices p.muted, #services p, #services li, #design-steps p, #design-steps li, #team p, #team li, #partners p, #partners li{ font-size: 18px; line-height: 1.5; } } /* === extracted from remont-pod-klyuch-samara.html: team-text-justify-20251130 === */ /* Выравнивание текста по правой границе в блоке "Обо мне и команде" (ПК + мобайл) */ #team .wrap p{ text-align: justify; text-justify: inter-word; } /* === extracted from remont-pod-klyuch-samara.html: team-mobile-hyphens-20251130 === */ @media (max-width: 900px){ #team p{ -webkit-hyphens: auto; hyphens: auto; } } /* === extracted from remont-pod-klyuch-samara.html: team-mobile-left-align-20251130 === */ @media (max-width: 900px){ #team .wrap p{ text-align: left !important; text-justify: auto; -webkit-hyphens: none; hyphens: none; } } /* === extracted from remont-pod-klyuch-samara.html: inline-style === */ /* ЕДИНЫЙ СТИЛЬ ДЛЯ ОСНОВНОГО ТЕКСТА НА ВСЁМ САЙТЕ */ section p, section li { font-size: 18px !important; line-height: 1.5; } /* Возврат согласованного отступа фото в блоке "Обо мне и команде" на ПК */ @media (min-width: 901px){ #team .grid > div:last-child img{ margin-top: 10px; } } /* === extracted from remont-pod-klyuch-samara.html: inline-style === */ /* Дополнительно: приравниваем стиль текста под ценами к основному */ .muted.prices-contract-note{ /* цвет как у обычного текста */ color: inherit !important; } /* === extracted from remont-pod-klyuch-samara.html: inline-style === */ @media (max-width: 900px) { /* Prices note: align left on mobile */ .prices-contract-note { text-align: left !important; } /* Hide paragraph about voice assistant "Алиса" only on mobile */ #services .hi-about p:nth-of-type(3) { display: none; } /* Hide list item "Всегда на связи..." in calm block only on mobile */ #services .hi-services-side ul li:last-child { display: none; } } /* === extracted from remont-pod-klyuch-samara.html: inline-style === */ #design-steps .grid { counter-reset: hi-step; } #design-steps .grid > div { position: relative; padding-left: 52px; } #design-steps .grid > div::before { counter-increment: hi-step; content: counter(hi-step); position: absolute; top: -0.38em; left: 0; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--hi-accent); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 15px; color: #fff; } #design-steps .grid > div.hi-step-active::before { background: #BFA97A; color: #000; border-color: #BFA97A; box-shadow: 0 0 18px rgba(191,169,122,0.7), 0 0 36px rgba(191,169,122,0.45); } @media (max-width: 900px) { #design-steps .grid > div { padding-left: 44px; } #design-steps .grid > div::before { width: 30px; height: 30px; font-size: 14px; } } /* === extracted from remont-pod-klyuch-samara.html: inline-style === */ /* Более компактные отступы между этапами "Как мы работаем" на мобиле */ @media (max-width: 900px){ #design-steps .grid{ gap: 18px; } #design-steps .grid h3{ margin-bottom: 6px; } #design-steps .grid p{ margin-bottom: 0; } } /* === extracted from remont-pod-klyuch-samara.html: services-pages-nav === */ /* Services dropdown in header (desktop) */.hi-dd{ position:relative; display:inline-flex; align-items:center; }.hi-dd-trigger{ position:relative; padding-right:18px; }.hi-dd-trigger::after{ content:"▾"; position:absolute; right:4px; top:50%; transform:translateY(-50%); font-size:12px; opacity:.8; }.hi-dd-menu{ position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%); min-width: 260px; background: rgba(0,0,0,.92); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 8px; box-shadow: 0 18px 50px rgba(0,0,0,.45); display:none; z-index: 10050; }.hi-dd:hover .hi-dd-menu, .hi-dd:focus-within .hi-dd-menu{ display:block; }.hi-dd-item{ display:block; padding:10px 12px; border-radius: 12px; color:#fff; text-decoration:none; border:1px solid transparent; }.hi-dd-item:hover, .hi-dd-item:focus{ background:#BFA97A; color:#000; border-color:#BFA97A; box-shadow:0 0 18px rgba(191,169,122,.55); }@media (max-width:900px){ .hi-dd-trigger::after{ display:none; }.hi-dd-menu{ display:none !important; } } /* Drawer accordion */.hi-dd.open .hi-dd-menu{ display:block; } /* === extracted from remont-pod-klyuch-samara.html: svc-cta-style === */ #services .svc-cta{ display:flex; gap:10px; flex-wrap:wrap; margin:0 0 14px 0; } #services .svc-cta a{ white-space:nowrap; } @media(max-width:680px){ #services .svc-cta{ flex-direction:column; } #services .svc-cta a{ width:100%; text-align:center; } } /* === extracted from remont-pod-klyuch-samara.html: hi-ui-from-project-1 === */ body{ scroll-padding-top: 84px; }@media (max-width: 900px){ body{ scroll-padding-top: 72px; } } /* === extracted from remont-pod-klyuch-samara.html: hi-header-footer-reset === */ @media (prefers-reduced-motion: reduce){html{scroll-behavior:auto;}} /* hi-header-footer reset (from project-1.html) */ [data-hi-call].hi-btn{ transition: background .35s ease, box-shadow .35s ease, color .3s ease, border-color .3s ease !important; } .hi-btn:hover, .hi-btn-ghost:hover { background: var(--hi-accent) !important; color: #222 !important; border-color: var(--hi-accent) !important; box-shadow: 0 10px 24px rgba(191,169,122,.35); }:root { --hi-bg: transparent; --hi-text: #ffffff; --hi-accent: #BFA97A; --hi-shadow: rgba(0,0,0,.25); --hi-border-neutral: rgba(255,255,255,0.32); --hi-border-neutral-hover: rgba(255,255,255,0.46); } .hi-btn{ background: transparent; border:1px solid var(--hi-accent); font-weight:800; padding:12px 16px; border-radius:14px; cursor:pointer; transition: transform .15s, box-shadow .25s, background .2s, color .2s; white-space:nowrap; }.hi-btn:hover{ background: var(--hi-accent); color:#222; box-shadow: 0 10px 24px rgba(191,169,122,.35); } .hi-modal-backdrop{ position: fixed; inset:0; background: rgba(0,0,0,.55); display:none; align-items:center; justify-content:center; z-index:10000; opacity:0; transition: opacity .25s ease; }.hi-modal-backdrop.open{ display:flex; opacity:1; }.hi-modal{ width: min(520px, 92vw); background: #222; color:#fff; border-radius: 18px; box-shadow: 0 24px 60px rgba(0,0,0,.35); padding: 24px; transform: translateY(10px) scale(.98); transition: transform .25s ease; }.hi-modal-backdrop.open .hi-modal{ transform: translateY(0) scale(1); }.hi-modal h3{ margin:0 0 12px; font-size:22px; }.hi-modal p{ margin:0 0 16px; opacity:.8; }.hi-btn-ghost{ background: transparent; color:#fff; border:1px solid rgba(255,255,255,.2); border-radius:12px; padding:10px 14px; cursor:pointer; }.hi-toast{ position: fixed; left:50%; bottom:24px; transform: translateX(-50%); background:#222; color:#fff; border:1px solid rgba(255,255,255,.12); padding:10px 14px; border-radius:12px; box-shadow: 0 12px 30px rgba(0,0,0,.25); opacity:0; pointer-events:none; transition: opacity .25s ease; z-index:10001; }.hi-toast.show{ opacity:1; }button:hover:not(.pswp__button), .hi-btn:hover, .hi-btn-ghost:hover, .hi-actions .hi-btn:hover, .hi-actions .hi-btn-ghost:hover { background: var(--hi-accent) !important; color: #222 !important; border-color: var(--hi-accent) !important; box-shadow: 0 10px 24px rgba(191,169,122,.35); transition: all .25s ease !important; }.hi-btn{ display: inline-block; border: 1px solid #BFA97A; background: rgba(0,0,0,0.65); color: #fff; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; transition: all 0.35s ease; box-shadow: none; text-shadow: none; }.hi-btn:hover{ background: #BFA97A; color: #000; border-color: #BFA97A; text-shadow: 0 0 10px rgba(191,169,122,0.9), 0 0 22px rgba(191,169,122,0.75); box-shadow: 0 0 18px rgba(191,169,122,0.6), 0 0 36px rgba(191,169,122,0.4); transform: translateY(-1px); }.hi-btn{ border-radius: 12px; }[data-hi-call], [data-hi-call].hi-btn{ display: inline-flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; padding-block: var(--hi-hdr-btn-py, 10px) !important; border-radius: 12px !important; box-sizing: border-box !important; }[data-hi-call]:hover, [data-hi-call].hi-btn:hover{ background: #BFA97A !important; color: #000 !important; border-color: #BFA97A !important; box-shadow: 0 0 18px rgba(191,169,122,0.7), 0 0 36px rgba(191,169,122,0.45) !important; transform: translateY(-1px); }:root{ --hi-bg:#0f0f10; --hi-surface:#171718; --hi-text:#E8E3D4; --hi-text-dim:#CFC8B5; --hi-gold:#BFA97A; --hi-gold-bright:#CFB88C; }body.project-hero-fullscreen-page.header-visible #hero::before{ opacity:1; }@media (max-width: 900px){ body.project-hero-fullscreen-page.header-visible #hero::before{ background: linear-gradient(to bottom, rgba(0,0,0,.48) 0%, rgba(0,0,0,.82) 100%) !important; } } @media (min-width: 901px){ body.project-hero-fullscreen-page.header-visible #hero::before{ background: linear-gradient(to bottom, rgba(0,0,0,.48) 0%, rgba(0,0,0,.82) 100%) !important; } } :root{--project-page-bg:#0a0a0a;--bg:var(--project-page-bg);--hi-bg:var(--project-page-bg);} @media (max-width: 900px){ :root{ --hi-mob-ctl: clamp(36px, 10vw, 42px); --hi-mob-ctl-r: clamp(10px, 3vw, 12px); --hi-mob-gap: clamp(8px, 2.8vw, 12px); --hi-mob-pad-x: clamp(10px, 3.2vw, 12px); --hi-mob-pad-y: clamp(8px, 2.4vw, 10px); --hi-mob-logo-h: 34px; } } @media (max-width: 414px){ :root{ --hi-mob-logo-h: clamp(30px, 8vw, 32px) !important; } } /* === extracted from remont-pod-klyuch-samara.html: hi-float-burger-fixed-v1 === */ /* Mobile: floating burger must not create a top gap and must stay visible on scroll */ /* === extracted from remont-pod-klyuch-samara.html: hi-header-footer-bugfix-v05 === */ /* v05: fix header glow/line and top-state behavior on pages without project body classes */ /* glow + line should be OFF until header-light-on is set by JS */ /* === extracted from remont-pod-klyuch-samara.html: hi-form-success-fix-v11 === */ .hi-form-success{display:none;margin-top:14px;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(191,169,122,.25);} .hi-form-success-title{font-weight:800;margin:0 0 6px;} .hi-form-success-text{margin:0;} #hi-form.is-success .hi-field{display:none;} #hi-form.is-success .hi-actions button[type="submit"]{display:none;} #hi-form.is-success .hi-form-success{display:block;} #hi-form.is-success .hi-actions{justify-content:center;} .hi-modal.is-success > h3, .hi-modal.is-success > p, #hi-modal.is-success .hi-modal > h3, #hi-modal.is-success .hi-modal > p{display:none;} /* === extracted from remont-pod-klyuch-samara.html: hi-modal-form-unify-v14 === */ /* v14: unify modal form layout (inputs full width, actions right) across all pages */ .hi-field{ display:flex; flex-direction:column; gap:6px; margin-bottom:14px; } .hi-input{ background:#fff; color:#222; border:1px solid rgba(0,0,0,.12); border-radius:12px; padding:12px 14px; font-size:16px; outline:none; transition:border-color .2s, box-shadow .2s; } .hi-input:focus{ border-color: var(--hi-accent); box-shadow: 0 0 0 4px rgba(191,169,122,.22); } .hi-actions{ display:flex; gap:10px; align-items:center; justify-content:flex-end; margin-top:8px; } /* === extracted from remont-pod-klyuch-samara.html: hi-mobile-header-tune-v15 === */