/* ============================================================ DMVKurtains Navy ink, warm paper, rowhouse brick. Arch-top (fanlight) frames are the signature shape; everything else is square-edged and quiet so the photos and prices do the work. Fonts: Bricolage Grotesque (display) + Instrument Sans (text), linked in . ============================================================ */ :root { --ink: #152033; --ink-2: #2b3649; --muted: #5b6576; --paper: #f7f4ee; --plaster: #efe9df; --mist: #e6ecf1; --white: #ffffff; --brick: #b84a32; --brick-dk: #963925; --brick-lt: #e48a70; --brick-tint: #f7e5dc; --line: rgba(21, 32, 51, 0.12); --line-2: rgba(21, 32, 51, 0.24); --r-sm: 4px; --r: 8px; --r-lg: 14px; --arch: 999px 999px var(--r) var(--r); --shadow: 0 1px 2px rgba(21, 32, 51, 0.06), 0 10px 26px -14px rgba(21, 32, 51, 0.22); --shadow-lg: 0 34px 70px -34px rgba(21, 32, 51, 0.45); --display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif; --sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --container: 1200px; --ease: cubic-bezier(0.2, 0.8, 0.2, 1); } /* ---------- reset ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } } body { font-family: var(--sans); color: var(--ink); background: var(--paper); line-height: 1.6; -webkit-font-smoothing: antialiased; } img { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; cursor: pointer; border: none; background: none; } :focus-visible { outline: 2px solid var(--brick); outline-offset: 3px; } .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(20px, 5vw, 48px); } .hp { position: absolute; left: -9999px; opacity: 0; pointer-events: none; } /* ---------- type ---------- */ .eyebrow { display: inline-flex; align-items: center; gap: .6rem; font-size: .76rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--brick); } .eyebrow::before { content: ""; width: 1.4rem; height: 2px; background: currentColor; } .section__title, .hero__title { font-family: var(--display); font-weight: 700; letter-spacing: -.03em; color: var(--ink); } .section__title { font-size: clamp(2rem, 4.4vw, 3.2rem); line-height: 1.04; } .section__title em, .hero__title em { font-style: normal; color: var(--brick); } .section__lede { max-width: 58ch; color: var(--muted); font-size: 1.08rem; margin-top: 1rem; } /* ---------- buttons ---------- */ .btn { --py: .8rem; --px: 1.3rem; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: var(--py) var(--px); border: 1.5px solid transparent; border-radius: var(--r); font-weight: 600; font-size: .95rem; white-space: nowrap; transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .15s var(--ease); } .btn:active { transform: translateY(1px); } .btn--sm { --py: .55rem; --px: 1rem; font-size: .86rem; } .btn--lg { --py: 1rem; --px: 1.6rem; font-size: 1rem; } .btn--block { width: 100%; } .btn--icon { width: 2.7rem; height: 2.7rem; padding: 0; } .btn--icon svg { width: 18px; height: 18px; } .btn--solid { background: var(--brick); color: var(--white); } .btn--solid:hover { background: var(--brick-dk); } .btn--outline, .btn--ghost { border-color: var(--ink); color: var(--ink); } .btn--outline:hover, .btn--ghost:hover { background: var(--ink); color: var(--paper); } /* ---------- logo ---------- */ .brand { display: inline-flex; align-items: center; gap: .5rem; color: var(--ink); } .brand__mark { flex: none; width: 34px; height: 34px; } .brand__mark svg { width: 100%; height: 100%; } .brand__name { font-family: var(--display); font-weight: 500; font-size: 1.38rem; letter-spacing: -.035em; line-height: 1; } .brand__name b { font-weight: 800; } /* ============================================================ NAV ============================================================ */ .nav { position: sticky; top: 0; z-index: 100; background: rgba(247, 244, 238, .93); backdrop-filter: saturate(160%) blur(12px); border-bottom: 1px solid var(--line); } .nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: 72px; } .nav__links { display: flex; gap: 1.9rem; } .nav__links a { font-size: .95rem; font-weight: 500; color: var(--ink-2); padding: .3rem 0; border-bottom: 2px solid transparent; transition: border-color .2s var(--ease), color .2s var(--ease); } .nav__links a:hover { color: var(--ink); border-color: var(--brick); } .nav__cta { display: flex; align-items: center; gap: .6rem; } .nav__toggle { display: none; width: 42px; height: 42px; flex-direction: column; gap: 5px; align-items: center; justify-content: center; } .nav__toggle span { display: block; width: 22px; height: 2px; background: var(--ink); transition: transform .25s var(--ease), opacity .2s; } .nav__toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav__toggle.open span:nth-child(2) { opacity: 0; } .nav__toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .nav__mobile { display: none; flex-direction: column; padding: .4rem clamp(20px, 5vw, 48px) 1.5rem; border-top: 1px solid var(--line); background: var(--paper); } .nav__mobile a { padding: .85rem 0; font-weight: 600; font-size: 1.05rem; border-bottom: 1px solid var(--line); } .nav__mobile a.btn { margin-top: .9rem; border-bottom: none; color: var(--white); } .nav__mobile.open { display: flex; } /* ============================================================ HERO ============================================================ */ .hero { padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(3.5rem, 7vw, 6rem); } .hero__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; } .hero__title { font-size: clamp(2.4rem, 5.2vw, 4.3rem); line-height: 1; margin: 1.1rem 0 1.3rem; max-width: 17ch; } .hero__sub { font-size: clamp(1.02rem, 1.5vw, 1.18rem); color: var(--muted); max-width: 50ch; } .hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; } .hero__facts { list-style: none; display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 1.2rem 2.2rem; margin-top: 2.6rem; padding-top: 1.5rem; border-top: 1px solid var(--line-2); } .hero__facts li { display: flex; flex-direction: column; font-size: .82rem; color: var(--muted); line-height: 1.35; } .hero__facts strong { font-family: var(--display); font-weight: 700; font-size: 1.12rem; color: var(--ink); letter-spacing: -.01em; } .hero__visual { position: relative; } .hero__media { aspect-ratio: 4/5; box-shadow: var(--shadow-lg); } /* the signature arch frame, with an inset line like a window stop */ .arch { position: relative; border-radius: var(--arch); overflow: hidden; background: var(--plaster); } .arch img { width: 100%; height: 100%; object-fit: cover; } .arch::after { content: ""; position: absolute; inset: 12px; border: 1.5px solid rgba(255, 255, 255, .6); border-radius: inherit; pointer-events: none; } /* price-tag chip: the hole-punch dot is the detail */ .tag { display: inline-flex; flex-direction: column; background: var(--white); border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: .55rem 1rem .6rem 1.8rem; box-shadow: var(--shadow); position: relative; line-height: 1.15; } .tag::before { content: ""; position: absolute; left: .7rem; top: 50%; width: .5rem; height: .5rem; border-radius: 50%; border: 1.5px solid var(--ink); transform: translateY(-50%); } .tag span { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; } .tag strong { font-family: var(--display); font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; color: var(--brick); } .tag--float { position: absolute; left: -1.4rem; bottom: 2.4rem; transition: transform .2s var(--ease); } .tag--float:hover { transform: translateY(-2px); } /* ============================================================ MARQUEE ============================================================ */ .marquee { background: var(--plaster); border-block: 1px solid var(--line); overflow: hidden; padding: .85rem 0; } .marquee__track { display: inline-flex; align-items: center; gap: 1.5rem; white-space: nowrap; animation: marquee 45s linear infinite; } .marquee__track span { font-family: var(--display); font-weight: 600; font-size: 1.05rem; letter-spacing: -.01em; color: var(--ink-2); } .marquee__track span:nth-child(even) { color: var(--brick); } @keyframes marquee { to { transform: translateX(-50%); } } /* ============================================================ SECTIONS ============================================================ */ .section { padding: clamp(4rem, 8vw, 7rem) 0; } .section__head { max-width: 780px; margin-bottom: clamp(2.2rem, 4vw, 3.2rem); } .section__head .eyebrow { margin-bottom: 1rem; } /* price-first band */ .price-band { background: var(--ink); color: var(--paper); padding: clamp(3.5rem, 7vw, 5.5rem) 0; } .price-band__inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(1.5rem, 5vw, 4rem); align-items: end; } .price-band .eyebrow { color: var(--brick-lt); margin-bottom: 1rem; } .price-band .section__title { color: var(--paper); } .price-band .section__title em { color: var(--brick-lt); } .price-band .section__lede { color: rgba(247, 244, 238, .75); margin: 0 0 1.6rem; } /* style cards: arch-top photos */ .cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem clamp(.8rem, 1.6vw, 1.2rem); } .card { display: flex; flex-direction: column; color: inherit; } .card__img { position: relative; aspect-ratio: 3/4; border-radius: var(--arch); overflow: hidden; background: var(--plaster); } .card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); } .card:hover .card__img img { transform: scale(1.05); } .card__body { position: relative; padding: .9rem .15rem 0; } .card__body h3 { font-family: var(--display); font-weight: 700; font-size: 1.14rem; letter-spacing: -.015em; line-height: 1.2; } .card__body p { color: var(--muted); font-size: .87rem; margin-top: .3rem; line-height: 1.5; } .card__tag { position: absolute; top: -2.5rem; left: .55rem; background: var(--paper); color: var(--ink); font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: .28rem .5rem; border-radius: var(--r-sm); } .card--calc .card__body::after { content: "See the price \2192"; display: block; margin-top: .55rem; font-size: .86rem; font-weight: 600; color: var(--brick); } /* why */ .why { background: var(--plaster); } .why__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; } .why__media { position: relative; aspect-ratio: 4/5; border-radius: var(--arch); overflow: hidden; background: var(--mist); } .why__media img { width: 100%; height: 100%; object-fit: cover; } .why__stat { position: absolute; left: 1.2rem; right: 1.2rem; bottom: 1.2rem; background: var(--white); border-radius: var(--r); padding: .8rem 1rem; display: flex; align-items: baseline; gap: .7rem; box-shadow: var(--shadow); } .why__stat strong { font-family: var(--display); font-size: 2.1rem; line-height: 1; color: var(--brick); font-weight: 800; } .why__stat span { font-size: .88rem; color: var(--muted); } .features { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 1.8rem 2rem; margin-top: .5rem; } .features li { display: flex; flex-direction: column; gap: .4rem; padding-top: 1rem; border-top: 2px solid var(--ink); } .features__icon { display: none; } .features h3 { font-family: var(--display); font-weight: 700; font-size: 1.14rem; letter-spacing: -.015em; } .features p { color: var(--muted); font-size: .95rem; } /* outdoor band: photo on the right, cool background */ .outdoor-band { background: var(--mist); } .outdoor-band .why__grid { grid-template-columns: 1.1fr .9fr; } /* process */ .steps { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line-2); } .step { padding: 1.8rem 1.6rem 0 0; } .step + .step { padding-left: 1.6rem; border-left: 1px solid var(--line); } .step__num { display: block; font-family: var(--display); font-weight: 800; font-size: 3.4rem; line-height: 1; margin-bottom: 1rem; color: transparent; -webkit-text-stroke: 1.5px var(--ink); } .step h3 { font-family: var(--display); font-weight: 700; font-size: 1.3rem; letter-spacing: -.015em; margin-bottom: .4rem; } .step p { color: var(--muted); } /* areas */ .areas__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; } .area { display: flex; flex-direction: column; gap: .35rem; padding: 1.15rem 1.1rem 1.1rem; background: var(--white); border: 1px solid var(--line-2); border-radius: var(--r); transition: border-color .2s var(--ease), transform .2s var(--ease); } .area:hover { border-color: var(--brick); transform: translateY(-2px); } .area strong { font-family: var(--display); font-weight: 700; font-size: 1.14rem; letter-spacing: -.015em; } .area strong::after { content: " \2192"; color: var(--brick); } .area span { color: var(--muted); font-size: .84rem; line-height: 1.4; } .areas__more { color: var(--muted); margin-top: 1.6rem; max-width: 72ch; } /* reviews (only rendered if enabled in config.py) */ .reviews { background: var(--mist); } .reviews__track { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 1rem; scrollbar-width: none; } .reviews__track::-webkit-scrollbar { display: none; } .review { flex: 0 0 min(360px, 82vw); scroll-snap-align: start; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.6rem; display: flex; flex-direction: column; gap: .9rem; } .review__stars { color: var(--brick); letter-spacing: .12em; } .review p { color: var(--ink-2); } .review footer { display: flex; align-items: center; gap: .6rem; font-weight: 600; font-size: .92rem; margin-top: auto; } .review footer em { font-style: normal; color: var(--muted); font-weight: 500; font-size: .8rem; margin-left: auto; } .review__avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--plaster); display: grid; place-items: center; font-weight: 700; } .reviews__controls { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1rem; } .reviews__arrows { display: flex; gap: .6rem; } .rev-btn { width: 44px; height: 44px; border: 1.5px solid var(--line-2); border-radius: var(--r); background: var(--white); } .rev-btn:disabled { opacity: .35; cursor: default; } /* ============================================================ CONTACT ============================================================ */ .contact { background: var(--plaster); } .contact__inner { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; } .contact__copy .section__title { margin-top: 1rem; } .contact__methods { display: grid; gap: .7rem; margin-top: 2rem; } .contact__methods:empty { display: none; } .method { display: flex; align-items: center; gap: .9rem; padding: .9rem 1.1rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--r); transition: border-color .2s var(--ease); } .method:hover { border-color: var(--brick); } .method__ic { font-size: 1.2rem; } .method span:not(.method__ic) { display: flex; flex-direction: column; color: var(--muted); font-size: .9rem; } .method strong { color: var(--ink); font-size: 1rem; } .contact__booking { display: flex; flex-direction: column; gap: 1.4rem; } .booking__primary { position: relative; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: .4rem; overflow: hidden; } .booking__tag { position: absolute; top: .9rem; left: .9rem; z-index: 2; background: var(--ink); color: var(--paper); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: .35rem .7rem; border-radius: var(--r-sm); } .calendly-inline-widget { border-radius: var(--r); overflow: hidden; } .calendly-inline-widget:empty { background: var(--mist); } .booking__divider { display: flex; align-items: center; gap: 1rem; color: var(--muted); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; } .booking__divider::before, .booking__divider::after { content: ""; flex: 1; height: 1px; background: var(--line-2); } .contact__form { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.4rem, 3vw, 2.2rem); display: grid; gap: 1rem; box-shadow: var(--shadow); } .field { display: grid; gap: .35rem; } .field-row { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1rem; } .field label { font-size: .84rem; font-weight: 600; color: var(--ink-2); } .field label span { color: var(--muted); font-weight: 400; } .field input, .field select, .field textarea { font: inherit; font-size: 1rem; color: var(--ink); width: 100%; padding: .78rem .9rem; border: 1.5px solid var(--line-2); border-radius: var(--r-sm); background: var(--paper); transition: border-color .2s var(--ease), box-shadow .2s var(--ease); } .field textarea { resize: vertical; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(21, 32, 51, .12); } .contact__note { font-size: .9rem; text-align: center; min-height: 1.2em; } .contact__note.ok { color: #2e7d4f; } .contact__note.err { color: var(--brick-dk); } /* ============================================================ FOOTER ============================================================ */ .footer { background: var(--ink); color: rgba(247, 244, 238, .72); padding-top: clamp(3rem, 6vw, 4.5rem); } .footer__inner { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2rem; padding-bottom: 2.6rem; } .footer .brand { color: var(--paper); } .footer__brand p { margin-top: 1rem; max-width: 36ch; font-size: .92rem; } .footer__col h3 { color: var(--paper); font-size: .76rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; margin-bottom: .9rem; } .footer__col a { display: block; padding: .28rem 0; font-size: .94rem; transition: color .2s var(--ease); } .footer__col a:hover { color: var(--paper); } .footer__social { display: flex; gap: 1rem; margin-top: 1rem; } .footer__bar { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-block: 1.3rem; border-top: 1px solid rgba(247, 244, 238, .12); font-size: .82rem; color: rgba(247, 244, 238, .5); } /* ============================================================ CONTENT PAGES (calculator, outdoor, city pages) ============================================================ */ .blog-hero { padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(2.5rem, 5vw, 3.5rem); } .blog-hero .section__title { max-width: 22ch; margin-top: 1rem; } .crumbs { font-size: .82rem; color: var(--muted); display: flex; gap: .5rem; flex-wrap: wrap; } .crumbs a:hover { color: var(--brick); } .post-body { max-width: 68ch; } .post-body h2 { font-family: var(--display); font-weight: 700; font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.15; letter-spacing: -.025em; margin: 2.6rem 0 .8rem; } .post-body h2:first-child { margin-top: 0; } .post-body h3 { font-family: var(--display); font-weight: 700; font-size: 1.15rem; letter-spacing: -.01em; margin: 1.7rem 0 .45rem; } .post-body p { color: var(--ink-2); font-size: 1.05rem; line-height: 1.75; margin-bottom: 1.1rem; } .post-body ul, .post-body ol { margin: 0 0 1.2rem 1.3rem; color: var(--ink-2); font-size: 1.02rem; line-height: 1.7; } .post-body li { margin-bottom: .45rem; } .post-body li::marker { color: var(--brick); font-weight: 700; } .post-body strong { color: var(--ink); } .post-body figure { margin: 0 0 2.2rem; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 16/10; background: var(--plaster); } .post-body figure img { width: 100%; height: 100%; object-fit: cover; } .post-body a:not(.btn) { color: var(--brick-dk); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .post-body .zips { font-size: .95rem; color: var(--muted); } .callout { border-left: 3px solid var(--brick); background: var(--white); padding: 1.1rem 1.3rem; margin: 0 0 2.2rem; border-radius: 0 var(--r) var(--r) 0; } .callout strong { display: block; font-family: var(--display); margin-bottom: .3rem; } .callout p { margin: 0; font-size: 1rem; } .specs { width: 100%; border-collapse: collapse; margin: 1.2rem 0 2rem; font-size: .98rem; } .specs th, .specs td { text-align: left; padding: .75rem .5rem; border-bottom: 1px solid var(--line); } .specs td { font-variant-numeric: tabular-nums; } .faq details { border-bottom: 1px solid var(--line-2); padding: 1rem 0; } .faq summary { cursor: pointer; font-weight: 600; font-size: 1.05rem; list-style: none; display: flex; justify-content: space-between; gap: 1rem; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; font-family: var(--display); font-size: 1.4rem; line-height: 1; color: var(--brick); transition: transform .2s var(--ease); } .faq details[open] summary::after { transform: rotate(45deg); } .faq details p { margin: .7rem 0 0; } /* ============================================================ PRICE CALCULATOR ============================================================ */ .pc-wrap { max-width: 1080px; } .pc { display: grid; gap: 2.8rem; } .pc-sample { background: var(--brick-tint); border: 1px solid rgba(184, 74, 50, .3); color: var(--ink-2); border-radius: var(--r); padding: .9rem 1.1rem; font-size: .92rem; margin-bottom: 2.2rem; } .pc-block { scroll-margin-top: 90px; } .pc-h { display: flex; align-items: center; gap: .7rem; font-family: var(--display); font-weight: 700; font-size: clamp(1.25rem, 2.4vw, 1.55rem); letter-spacing: -.02em; margin-bottom: .4rem; } .pc-n { flex: none; width: 1.8rem; height: 1.8rem; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--ink); color: var(--paper); font-family: var(--sans); font-size: .85rem; font-weight: 700; } .pc-sub { color: var(--muted); font-size: .93rem; margin-bottom: 1.2rem; max-width: 64ch; } .pc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .pc-card { display: flex; flex-direction: column; background: var(--white); border: 1.5px solid var(--line); border-radius: var(--r-lg); overflow: hidden; scroll-margin-top: 100px; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); } .pc-card:hover { border-color: var(--line-2); } .pc-card.is-on { border-color: var(--brick); box-shadow: 0 0 0 1px var(--brick), var(--shadow); } .pc-card__img { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--plaster); } .pc-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); } .pc-card:hover .pc-card__img img { transform: scale(1.04); } .pc-card.is-on .pc-card__img::after { content: "\2713"; position: absolute; top: .7rem; right: .7rem; width: 2rem; height: 2rem; border-radius: var(--r-sm); background: var(--brick); color: var(--white); display: grid; place-items: center; font-weight: 700; } .pc-card__body { display: flex; flex-direction: column; gap: .3rem; padding: 1rem 1.1rem 1.1rem; flex: 1; } .pc-card__name { font-family: var(--display); font-weight: 700; font-size: 1.16rem; letter-spacing: -.015em; line-height: 1.2; } .pc-card__hint { color: var(--muted); font-size: .85rem; line-height: 1.45; } .pc-card__foot { margin-top: auto; padding-top: .9rem; display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; } .pc-card__price { font-weight: 700; font-size: .9rem; font-variant-numeric: tabular-nums; color: var(--ink); } .pc-card__price em { font-style: normal; font-weight: 500; color: var(--muted); } .pc-stepper { display: flex; align-items: center; gap: .25rem; } .pc-step { width: 34px; height: 34px; border: 1.5px solid var(--line-2); border-radius: var(--r-sm); background: var(--white); font-size: 1.15rem; line-height: 1; transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease); } .pc-step:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); } .pc-num { width: 2.6rem; text-align: center; padding: .35rem .2rem; font: inherit; font-weight: 700; font-variant-numeric: tabular-nums; border: 1.5px solid var(--line-2); border-radius: var(--r-sm); background: var(--white); color: var(--ink); -moz-appearance: textfield; } .pc-num::-webkit-outer-spin-button, .pc-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .pc-card.is-on .pc-num { border-color: var(--brick); } .pc-opts { display: grid; gap: .9rem; } .pc-opts--2 { grid-template-columns: repeat(2, 1fr); } .pc-opts--3 { grid-template-columns: repeat(3, 1fr); } .pc-opt { position: relative; display: block; } .pc-opt input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } .pc-opt__in { display: flex; flex-direction: column; gap: .3rem; height: 100%; padding: 1rem 1.1rem 1.1rem; background: var(--white); border: 1.5px solid var(--line); border-radius: var(--r-lg); transition: border-color .2s var(--ease), box-shadow .2s var(--ease); } .pc-opt:hover .pc-opt__in { border-color: var(--line-2); } .pc-opt input:checked + .pc-opt__in { border-color: var(--brick); box-shadow: 0 0 0 1px var(--brick); } .pc-opt input:focus-visible + .pc-opt__in { outline: 2px solid var(--brick); outline-offset: 2px; } .pc-opt__ico { width: 44px; height: 44px; color: var(--ink); opacity: .7; margin-bottom: .2rem; } .pc-opt__ico svg { width: 100%; height: 100%; } .pc-opt input:checked + .pc-opt__in .pc-opt__ico { color: var(--brick); opacity: 1; } .pc-opt__name { font-weight: 700; } .pc-opt__hint { color: var(--muted); font-size: .84rem; line-height: 1.4; } .pc-seg { display: flex; flex-wrap: wrap; gap: .5rem; } .pc-seg label { position: relative; } .pc-seg input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } .pc-seg span { display: block; padding: .6rem 1.2rem; border: 1.5px solid var(--line-2); border-radius: var(--r); background: var(--white); font-weight: 600; font-size: .95rem; color: var(--ink-2); transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease); } .pc-seg input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--paper); } .pc-seg input:focus-visible + span { outline: 2px solid var(--brick); outline-offset: 2px; } .pc-bar { position: sticky; bottom: 0; z-index: 20; margin-top: 2.2rem; background: var(--ink); color: var(--paper); box-shadow: 0 -12px 30px -14px rgba(21, 32, 51, .45); } .pc-bar__in { padding-block: .95rem 1rem; } .pc-bar__empty { opacity: .7; font-size: .92rem; text-align: center; } .pc-bar__figs { display: flex; align-items: center; flex-wrap: wrap; gap: .7rem 2rem; } .pc-bar__figs[hidden], .pc-bar__empty[hidden] { display: none; } .pc-fig--big { margin-right: auto; } .pc-fig__k { display: block; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; opacity: .65; margin-bottom: .1rem; } .pc-fig__k em { font-style: normal; } .pc-fig strong { font-family: var(--display); font-weight: 700; font-size: 1.15rem; font-variant-numeric: tabular-nums; white-space: nowrap; } .pc-fig--big strong { font-size: clamp(1.5rem, 3.2vw, 2rem); letter-spacing: -.02em; } .pc-go { background: var(--brick); color: var(--white); } .pc-go:hover { background: var(--paper); color: var(--ink); } .pc-clear { border: 1px solid rgba(247, 244, 238, .3); padding: .45rem .9rem; border-radius: var(--r); font-size: .82rem; transition: border-color .2s; } .pc-clear:hover { border-color: rgba(247, 244, 238, .75); } /* ============================================================ SCROLL REVEAL + MOBILE ACTION BAR ============================================================ */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); } .reveal.in { opacity: 1; transform: none; } .actbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 110; display: none; gap: .6rem; padding: .6rem .8rem calc(.6rem + env(safe-area-inset-bottom)); background: rgba(247, 244, 238, .96); backdrop-filter: blur(12px); border-top: 1px solid var(--line); transform: translateY(110%); transition: transform .3s var(--ease); } .actbar.is-on { transform: none; } .actbar a { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; border-radius: var(--r); font-weight: 700; font-size: .95rem; padding: .85rem 1rem; } .actbar__call { flex: 0 0 34%; border: 1.5px solid var(--ink); background: var(--white); color: var(--ink); } .actbar__call svg { width: 18px; height: 18px; } .actbar__book { flex: 1 1 auto; background: var(--brick); color: var(--white); } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 1100px) { .nav__links, .nav__cta { display: none; } .nav__toggle { display: flex; } } @media (max-width: 1024px) { .cards { grid-template-columns: repeat(3, 1fr); } .areas__grid { grid-template-columns: repeat(3, 1fr); } .pc-grid { grid-template-columns: repeat(2, 1fr); } .footer__inner { grid-template-columns: 1fr 1fr; } .hero__facts { grid-template-columns: repeat(2, auto); } } @media (max-width: 860px) { .hero__grid, .why__grid, .outdoor-band .why__grid, .contact__inner, .price-band__inner { grid-template-columns: 1fr; } .hero__visual { max-width: 440px; margin-left: 1.4rem; } .why__media { max-width: 440px; } .features, .pc-opts--3 { grid-template-columns: 1fr; } .steps { grid-template-columns: 1fr; } .step, .step + .step { padding: 1.4rem 0; border-left: none; border-bottom: 1px solid var(--line); } .actbar { display: flex; } body.has-actbar { padding-bottom: 72px; } .pc-bar__figs { gap: .4rem .8rem; } .pc-fig--big { flex: 1 0 100%; } .pc-fig--min { display: none; } .pc-go { margin-left: auto; } } @media (max-width: 620px) { .cards { grid-template-columns: repeat(2, 1fr); gap: 1.6rem .8rem; } .card__body p { display: none; } .areas__grid { grid-template-columns: 1fr 1fr; } .pc-grid { grid-template-columns: 1fr 1fr; gap: .7rem; } .pc-card__hint { display: none; } .pc-card__body { padding: .75rem .75rem .85rem; } .pc-card__name { font-size: 1rem; } .pc-card__foot { flex-direction: column; align-items: stretch; gap: .5rem; } .pc-card__price { font-size: .8rem; } .pc-stepper { justify-content: space-between; } .pc-opts--2, .field-row, .footer__inner { grid-template-columns: 1fr; } .tag--float { left: -1rem; bottom: 1.4rem; } }