*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
color-scheme: light;
scroll-behavior: smooth;
scroll-padding-top: 1rem;
}
body {
margin: 0;
background: var(--c-bg);
color: var(--c-ink);
font-family: var(--font-text);
font-size: 1.0625rem;
line-height: 1.55;
text-rendering: optimizeLegibility;
padding-bottom: 4.5rem;
}
@media (min-width: 60em) {
body {
font-size: 1.125rem;
padding-bottom: 0;
}
}
img,
svg {
display: block;
max-width: 100%;
}
h1,
h2,
h3 {
margin: 0;
font-family: var(--font-display);
font-weight: var(--w-head, 700);
line-height: 1.1;
letter-spacing: var(--tracking-head, -0.015em);
text-wrap: balance;
overflow-wrap: break-word;
hyphens: auto;
}
h2 {
font-size: calc(clamp(1.75rem, 1.2rem + 2.2vw, 2.6rem) * var(--head-scale, 1));
}
h3 {
font-size: calc(1.3rem * var(--head-scale, 1));
line-height: 1.2;
}
p,
ul,
ol,
dl,
dd,
figure {
margin: 0;
}
ul,
ol {
padding: 0;
list-style: none;
}
a {
color: var(--c-link, var(--c-accent));
text-decoration-thickness: 1px;
text-underline-offset: 0.2em;
}
a:hover {
text-decoration-thickness: 2px;
}
:focus-visible {
outline: 3px solid var(--c-focus, var(--c-accent));
outline-offset: 3px;
}
button {
font: inherit;
color: inherit;
}
.wrap {
width: min(100% - 2rem, 74rem);
margin-inline: auto;
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.skip-link {
position: absolute;
left: 1rem;
top: -4rem;
z-index: 10;
padding: 0.75rem 1rem;
background: var(--c-bg);
}
.skip-link:focus {
top: 1rem;
}
.demo-bar {
background: var(--c-ink);
color: var(--c-bg);
font-size: 0.875rem;
line-height: 1.35;
}
.demo-bar .wrap {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding-block: 0.15rem;
}
.demo-bar button {
flex: none;
min-height: 2.75rem;
padding: 0 0.25rem;
border: 0;
background: none;
color: inherit;
text-decoration: underline;
text-underline-offset: 0.2em;
cursor: pointer;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.55rem;
min-height: 3rem;
padding: 0.7rem 1.35rem;
border: 2px solid var(--c-accent);
border-radius: var(--radius, 4px);
background: var(--c-accent);
color: var(--c-on-accent);
font-weight: 600;
line-height: 1.2;
text-decoration: none;
cursor: pointer;
}
.btn:hover {
background: var(--c-accent-strong);
border-color: var(--c-accent-strong);
}
.btn--ghost {
background: transparent;
color: var(--c-accent-ink, var(--c-accent));
}
.btn--ghost:hover {
background: var(--c-panel);
border-color: var(--c-accent);
}
.btn svg {
width: 1.25rem;
height: 1.25rem;
flex: none;
}
.btns {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
.header .wrap {
display: flex;
align-items: center;
gap: 1rem;
min-height: 4.25rem;
}
.brand {
display: flex;
align-items: center;
gap: 0.65rem;
color: var(--c-ink);
text-decoration: none;
}
.brand__mark {
width: 2.6rem;
color: var(--c-accent);
}
.brand__name {
display: block;
font-family: var(--font-display);
font-weight: var(--w-head, 700);
font-size: calc(1.15rem * var(--head-scale, 1));
line-height: 1.1;
}
.brand__note {
display: block;
color: var(--c-muted);
font-size: 0.8125rem;
}
.nav {
display: none;
}
.header__phone {
margin-left: auto;
min-height: 2.75rem;
padding: 0.25rem 0;
border: 0;
background: none;
color: var(--c-ink);
font-weight: 600;
white-space: nowrap;
text-decoration: none;
cursor: pointer;
}
.header__phone:hover {
color: var(--c-accent);
}
@media (max-width: 29.99em) {
.brand__note {
display: none;
}
.brand__mark {
width: 2.1rem;
}
.header__phone {
font-size: 0.95rem;
}
}
@media (min-width: 60em) {
.nav {
display: flex;
gap: 1.6rem;
margin-left: auto;
}
.nav a {
color: var(--c-ink);
text-decoration: none;
}
.nav a:hover {
color: var(--c-accent);
text-decoration: underline;
}
.header__phone {
margin-left: 1.75rem;
}
}
.hero {
padding-top: 0.5rem;
}
.hero__frame {
position: relative;
}
.roof {
width: 100%;
height: auto;
color: var(--c-line);
}
.roof .d-roof {
color: var(--c-accent);
stroke-width: 3;
}
.roof .d-sheet {
color: var(--c-accent);
opacity: 0.35;
stroke-width: 1;
}
.hero__body {
position: relative;
display: grid;
gap: 1.75rem;
padding: 1.25rem calc(3.333% + 1rem) 2.75rem;
}
.hero--arch .hero__body::before,
.hero--arch .hero__body::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 2px;
background: var(--c-line);
}
.hero--arch .hero__body::before {
left: calc(3.333% - 1px);
}
.hero--arch .hero__body::after {
right: calc(3.333% - 1px);
}
.hero:not(.hero--arch) .hero__body {
padding: 2.5rem 0 3rem;
}
.hero__drawing {
align-self: center;
}
.hero__drawing .drawing {
width: 100%;
height: auto;
}
@media (min-width: 60em) {
.hero--drawing .hero__body {
grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
align-items: center;
}
.hero--arch.hero--drawing .hero__drawing {
align-self: start;
padding-top: 3rem;
}
}
.hero__ground {
height: 0.75rem;
border-top: 2px solid var(--c-line);
background: repeating-linear-gradient(-45deg, transparent 0 8px, var(--c-line-soft) 8px 9.5px);
}
.hero h1 {
font-size: calc(clamp(2.15rem, 1.3rem + 4.2vw, 4rem) * var(--head-scale, 1));
max-width: 15ch;
}
.hero h1.hero__title--long {
max-width: 18ch;
font-size: calc(clamp(1.9rem, 1.1rem + 3vw, 3.1rem) * var(--head-scale, 1));
}
.hero__lead {
margin-top: 1rem;
max-width: 36rem;
color: var(--c-muted);
font-size: 1.15rem;
}
.hero__price {
margin-top: 1.5rem;
display: flex;
flex-wrap: wrap;
align-items: baseline;
column-gap: 0.6rem;
}
.hero__price-sum {
display: inline-flex;
flex-wrap: wrap;
align-items: baseline;
column-gap: 0.6rem;
}
.hero__price strong {
color: var(--c-price);
font-family: var(--font-display);
font-size: calc(clamp(1.7rem, 1.3rem + 1.6vw, 2.3rem) * var(--head-scale, 1));
font-variant-numeric: tabular-nums;
font-weight: var(--w-head, 700);
white-space: nowrap;
}
.hero__price-note {
flex-basis: 100%;
color: var(--c-muted);
font-size: 0.9375rem;
}
.hero .btns {
margin-top: 1.5rem;
}
.facts {
display: grid;
gap: 1rem;
margin-top: 2rem;
}
.facts li {
padding-left: 0.9rem;
border-left: 2px solid var(--c-accent);
}
.facts strong {
display: block;
font-weight: 600;
}
.facts span {
color: var(--c-muted);
font-size: 0.9375rem;
}
.hero__photo img {
width: 100%;
height: auto;
aspect-ratio: 4 / 5;
object-fit: cover;
border-radius: var(--radius-photo, 2px);
background: var(--c-panel);
}
.hero__photo figcaption,
.caption {
margin-top: 0.5rem;
color: var(--c-muted);
font-size: 0.875rem;
}
@media (min-width: 40em) {
.facts {
grid-template-columns: repeat(3, 1fr);
}
.facts--4 {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 60em) {
.hero__body {
grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
align-items: start;
gap: 3rem;
padding-top: 0.5rem;
padding-bottom: 3.5rem;
}
.hero__photo {
margin-top: 0.5rem;
}
}
.section {
padding-block: 4rem;
}
.section--panel {
background: var(--c-panel);
}
.section__head {
display: grid;
gap: 0.85rem;
max-width: 44rem;
margin-bottom: 2.25rem;
}
.section__head p {
color: var(--c-muted);
}
@media (min-width: 60em) {
.section {
padding-block: 5.5rem;
}
}
.work-group + .work-group {
margin-top: 3rem;
}
.work-group__head {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 0.5rem 1.5rem;
margin-bottom: 1rem;
}
.work-group__head a {
font-weight: 600;
}
.shots {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 80%;
gap: 0.9rem;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
padding-bottom: 0.75rem;
}
.shots li {
scroll-snap-align: start;
}
.shot {
display: block;
width: 100%;
padding: 0;
border: 0;
background: var(--c-panel);
cursor: zoom-in;
}
.shot--drawing {
display: grid;
place-items: center;
aspect-ratio: 4 / 3;
padding: 0.75rem;
border: 1px solid var(--c-rule);
border-radius: var(--radius-photo, 2px);
background: var(--c-bg);
cursor: default;
}
.shot img {
width: 100%;
height: auto;
aspect-ratio: 4 / 3;
object-fit: cover;
object-position: center 40%;
border-radius: var(--radius-photo, 2px);
}
.shot__title {
margin-top: 0.65rem;
font-weight: 600;
line-height: 1.3;
}
.shot__meta {
color: var(--c-muted);
font-size: 0.9375rem;
}
@media (min-width: 48em) {
.shots {
grid-auto-flow: row;
grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
overflow: visible;
padding-bottom: 0;
}
}
.lightbox {
width: min(100vw - 1.5rem, 72rem);
max-height: calc(100dvh - 1.5rem);
margin: auto;
padding: 0;
border: 0;
background: var(--c-ink);
color: var(--c-bg);
}
.lightbox::backdrop {
background: rgb(8 16 20 / 0.82);
}
.lightbox img {
width: 100%;
height: auto;
max-height: calc(100dvh - 7rem);
object-fit: contain;
}
.lightbox__bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.75rem 1rem;
font-size: 0.9375rem;
}
.lightbox__close {
flex: none;
min-height: 2.75rem;
padding: 0 1rem;
border: 1px solid currentColor;
border-radius: var(--radius, 4px);
background: none;
cursor: pointer;
}
.prices {
display: grid;
gap: 1.25rem;
}
.price {
display: grid;
gap: 1.25rem;
padding: 1.25rem;
background: var(--c-bg);
border-radius: var(--radius, 4px);
}
.price__sheet {
border: 1px solid var(--c-rule);
padding: 0.75rem;
}
.drawing {
width: 100%;
height: auto;
color: var(--c-line);
}
.drawing * {
vector-effect: non-scaling-stroke;
}
.drawing .d-roof {
color: var(--c-accent);
stroke-width: 3.5;
}
.drawing .d-thin {
stroke-width: 1.2;
}
.drawing .d-sheet {
color: var(--c-accent);
opacity: 0.4;
stroke-width: 1;
}
.drawing .d-fill {
fill: var(--c-bg);
}
.drawing .d-walk {
color: var(--c-accent);
stroke-width: 1.6;
}
.d-label {
fill: var(--c-ink);
stroke: none;
font-family: var(--font-text);
font-size: 15px;
font-weight: 600;
}
.price h3 {
font-size: calc(1.4rem * var(--head-scale, 1));
}
.price__value {
margin-top: 0.4rem;
color: var(--c-muted);
}
.price__value strong {
color: var(--c-price);
font-family: var(--font-display);
font-size: calc(1.85rem * var(--head-scale, 1));
font-variant-numeric: tabular-nums;
font-weight: var(--w-head, 700);
}
.price__text {
margin-top: 0.75rem;
max-width: 38rem;
}
.price__note {
margin-top: 0.5rem;
color: var(--c-muted);
font-size: 0.9375rem;
}
.price__link {
margin-top: 0.85rem;
}
.prices__more {
margin-top: 1.75rem;
}
@media (min-width: 48em) {
.price {
grid-template-columns: minmax(14rem, 21rem) 1fr;
align-items: center;
gap: 2rem;
padding: 1.5rem;
}
}
.steps {
display: grid;
gap: 2rem;
counter-reset: step;
}
.step {
counter-increment: step;
}
.step__time {
position: relative;
margin-bottom: 1rem;
padding-bottom: 0.4rem;
color: var(--c-accent-ink, var(--c-accent));
font-weight: 600;
text-align: center;
font-variant-numeric: tabular-nums;
}
.step__time::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 0.7rem;
border-inline: 1.5px solid var(--c-line);
background: linear-gradient(var(--c-line), var(--c-line)) center / 100% 1.5px no-repeat;
}
.step h3::before {
content: counter(step) '. ';
color: var(--c-muted);
}
.step p {
margin-top: 0.5rem;
}
.terms {
display: grid;
gap: 1.5rem;
margin-top: 3rem;
}
.terms > div {
padding: 1.25rem 1.25rem 1.35rem;
border: 1px solid var(--c-rule);
border-radius: var(--radius, 4px);
}
.terms h3 {
margin-bottom: 0.5rem;
}
@media (min-width: 48em) {
.steps {
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
}
.terms {
grid-template-columns: 1fr 1fr;
}
}
.about {
display: grid;
gap: 2rem;
}
.about__text p + p {
margin-top: 1rem;
}
.about__text h2 {
margin-bottom: 1rem;
}
.about__facts {
display: grid;
gap: 1.25rem;
}
.about__facts dt {
font-family: var(--font-display);
font-size: calc(1.6rem * var(--head-scale, 1));
font-weight: var(--w-head, 700);
line-height: 1.1;
color: var(--c-accent-ink, var(--c-accent));
}
.about__facts dd {
color: var(--c-muted);
}
@media (min-width: 60em) {
.about {
grid-template-columns: 1.2fr 0.8fr;
gap: 4rem;
}
}
.faq {
max-width: 50rem;
border-top: 1px solid var(--c-rule);
}
.faq details {
border-bottom: 1px solid var(--c-rule);
}
.faq summary {
display: flex;
justify-content: space-between;
gap: 1rem;
padding: 1.1rem 0;
font-weight: 600;
cursor: pointer;
list-style: none;
}
.faq summary::-webkit-details-marker {
display: none;
}
.faq summary::after {
content: '+';
flex: none;
color: var(--c-accent);
font-size: 1.5rem;
line-height: 1;
}
.faq details[open] summary::after {
content: '−';
}
.faq details p {
max-width: 44rem;
padding-bottom: 1.25rem;
}
.contacts {
background: var(--c-accent);
color: var(--c-on-accent);
}
.contacts a {
color: inherit;
}
.contacts__grid {
display: grid;
gap: 2rem;
}
.contacts__lead {
margin-top: 1rem;
max-width: 30rem;
font-size: 1.15rem;
}
.contacts__card {
display: grid;
gap: 1.25rem;
}
.contacts__phone {
justify-self: start;
padding: 0;
border: 0;
background: none;
color: inherit;
font-family: var(--font-display);
font-size: calc(clamp(2rem, 1.4rem + 2.6vw, 3rem) * var(--head-scale, 1));
font-weight: var(--w-head, 700);
font-variant-numeric: tabular-nums;
line-height: 1.1;
text-decoration: none;
cursor: pointer;
}
.contacts__phone:hover {
text-decoration: underline;
text-decoration-thickness: 2px;
}
.contacts .btn {
background: var(--c-on-accent);
border-color: var(--c-on-accent);
color: var(--c-accent-strong);
}
.contacts .btn:hover {
background: transparent;
color: var(--c-on-accent);
}
.contacts dl {
display: grid;
gap: 0.75rem;
}
.contacts dt {
font-weight: 600;
}
.contacts :focus-visible {
outline-color: var(--c-on-accent);
}
@media (min-width: 60em) {
.contacts__grid {
grid-template-columns: 1fr 1fr;
gap: 4rem;
}
}
.footer {
padding-block: 2.5rem;
color: var(--c-muted);
font-size: 0.9375rem;
}
.footer .wrap {
display: grid;
gap: 1rem;
}
.footer summary {
cursor: pointer;
color: var(--c-ink);
}
.footer details p {
margin-top: 0.5rem;
max-width: 48rem;
}
.footer ul {
display: grid;
gap: 0.35rem;
margin-top: 0.5rem;
}
.not-found {
margin-top: 1rem;
}
.page-head {
padding-bottom: 3rem;
}
.page-head__grid {
display: grid;
gap: 2rem;
}
.crumbs {
margin-bottom: 1.25rem;
color: var(--c-muted);
font-size: 0.9375rem;
}
.page-head h1 {
max-width: 20ch;
font-size: clamp(2rem, 1.3rem + 3vw, 3.2rem);
}
.page-head__intro {
margin-top: 1rem;
max-width: 40rem;
color: var(--c-muted);
font-size: 1.15rem;
}
.page-head .price__value {
margin-top: 1.25rem;
}
.page-head__time {
margin-top: 0.5rem;
}
.page-head .btns {
margin-top: 1.5rem;
}
.section__title {
margin-bottom: 1.5rem;
}
.price-table {
width: 100%;
max-width: 46rem;
border-collapse: collapse;
background: var(--c-bg);
}
.price-table caption {
padding-bottom: 0.75rem;
color: var(--c-muted);
font-size: 0.9375rem;
text-align: left;
}
.price-table th,
.price-table td {
padding: 0.85rem 0.5rem;
border-bottom: 1px solid var(--c-rule);
text-align: left;
vertical-align: top;
}
.price-table th[scope="row"] {
hyphens: auto;
overflow-wrap: anywhere;
}
.price-table thead th {
color: var(--c-muted);
font-size: 0.875rem;
font-weight: 600;
}
.price-table td {
color: var(--c-price);
font-variant-numeric: tabular-nums;
font-weight: 600;
}
.factors__title {
margin: 2.25rem 0 0.75rem;
}
.factors {
display: grid;
gap: 0.5rem;
max-width: 44rem;
padding-left: 1.2rem;
list-style: square;
}
.price-blocks > * {
min-width: 0;
}
.price-blocks {
display: grid;
gap: 2.5rem;
margin-top: 2.5rem;
}
.price-block h2 {
margin-bottom: 1rem;
font-size: 1.5rem;
}
.price-block > a {
display: inline-block;
margin-top: 0.85rem;
font-weight: 600;
}
@media (min-width: 30em) {
.price-table th,
.price-table td {
padding-inline: 1rem;
}
}
@media (min-width: 48em) {
.price--plain {
grid-template-columns: 1fr;
}
}
@media (min-width: 60em) {
.page-head__grid {
grid-template-columns: 1.1fr 0.9fr;
align-items: center;
gap: 3rem;
}
}
.note {
width: min(100vw - 2rem, 30rem);
margin: auto;
padding: 1.5rem;
border: 0;
border-radius: var(--radius, 4px);
background: var(--c-bg);
color: var(--c-ink);
box-shadow: 0 1.5rem 3rem rgb(0 0 0 / 0.25);
}
.note::backdrop {
background: rgb(8 16 20 / 0.6);
}
.note h2 {
font-size: 1.4rem;
}
.note p {
margin-top: 0.75rem;
}
.note .btn {
margin-top: 1.25rem;
}
.lightbox,
.note {
display: none;
}
.lightbox:popover-open {
display: block;
}
.note:popover-open {
display: block;
}
.callbar {
position: fixed;
inset: auto 0 0;
z-index: 5;
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(0, 1fr);
gap: 1px;
background: var(--c-ink);
border-top: 1px solid var(--c-ink);
}
.callbar > * {
display: flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
min-height: 3.5rem;
padding: 0 0.5rem;
border: 0;
background: var(--c-ink);
color: var(--c-bg);
font-weight: 600;
font-size: 0.9375rem;
text-decoration: none;
cursor: pointer;
}
.callbar > :first-child {
background: var(--c-accent);
color: var(--c-on-accent);
}
.callbar svg {
width: 1.15rem;
height: 1.15rem;
}
@media (min-width: 60em) {
.callbar {
display: none;
}
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}
@media print {
.demo-bar,
.callbar,
.lightbox,
.note {
display: none;
}
}
@font-face{font-family:'Literata';font-style:normal;font-weight:200 900;font-display:swap;src:url('/fonts/literata-cyrillic.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Literata';font-style:normal;font-weight:200 900;font-display:swap;src:url('/fonts/literata-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Literata';font-style:normal;font-weight:200 900;font-display:swap;src:url('/fonts/literata-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:100 700;font-display:swap;src:url('/fonts/ibm-plex-sans-cyrillic.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:100 700;font-display:swap;src:url('/fonts/ibm-plex-sans-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:100 700;font-display:swap;src:url('/fonts/ibm-plex-sans-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{--c-bg:#1c2023;--c-panel:#252a2e;--c-ink:#efece6;--c-muted:#b4b9bb;--c-accent:#d39c63;--c-accent-strong:#e2b07c;--c-on-accent:#1c2023;--c-price:#e6b47e;--c-line:#8a9397;--c-line-soft:#3b4246;--c-rule:#353c40;--font-display:'Literata',Georgia,'Times New Roman',serif;--font-text:'IBM Plex Sans','Segoe UI',Roboto,Arial,sans-serif;--w-head:600;--tracking-head:-0.01em;--head-scale:1;--radius:3px;--radius-photo:2px}
html{color-scheme:dark}