/* ============================================================ FixPoint — styles.css Single file. Mobile-first. Tokens → global → blocks → media. ============================================================ */ /* ---------- 1. Tokens ---------- */ /* Palette A — Craftsman: warm grey + burnt orange. Default: no class on . */ :root, .theme-a { --surface: #F6F2EE; --surface-2: #FFFFFF; --anchor: #3A322C; --anchor-ink: #F2EBE4; --anchor-ink-soft: #C4B6A9; --ink: #2B2420; --ink-soft: #5E534C; --accent: #B34A16; --accent-rgb: 179 74 22; --accent-bright: #E9762F; --accent-ink: #FFFFFF; --focus: #2B2420; --line: #E2D9D1; --accent-deep: #B34A16; --line-strong: #8A7F76; } /* Palette B — Navigation: deep navy + amber. */ .theme-b { --surface: #F4F6F9; --surface-2: #FFFFFF; --anchor: #12233D; --anchor-ink: #E8EDF5; --anchor-ink-soft: #A9B8CE; --ink: #12233D; --ink-soft: #4A5A72; --accent: #E9A13B; --accent-rgb: 233 161 59; --accent-bright: #E9A13B; --accent-ink: #1A1206; --focus: #12233D; --line: #D5DBE4; --accent-deep: #BE7A14; --line-strong: #7E8798; } /* Palette C — Service: graphite + green. */ .theme-c { --surface: #F2F3F1; --surface-2: #FFFFFF; --anchor: #23272A; --anchor-ink: #EDEFEC; --anchor-ink-soft: #B4BAB6; --ink: #1C1F21; --ink-soft: #52585C; --accent: #1F7A51; --accent-rgb: 31 122 81; --accent-bright: #3FBF7F; --accent-ink: #FFFFFF; --focus: #1C1F21; --line: #DADCD8; --accent-deep: #1F7A51; --line-strong: #7C8280; } :root { --font-text: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", monospace; --radius: 4px; --radius-plate: 2px; --section-y: 56px; --header-h: 56px; --bar-h: 56px; --maxw: 1140px; --measure: 62ch; --shadow: 0 1px 2px rgb(0 0 0 / .05), 0 4px 14px rgb(0 0 0 / .04); --shadow-lift: 0 2px 4px rgb(0 0 0 / .06), 0 10px 24px rgb(0 0 0 / .07); } /* ---------- 2. Reset / global ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; /* The site has no dark theme. Saying so keeps native controls and the scrollbar light instead of letting the OS repaint them. */ color-scheme: light; /* Default is a grey flash on every tap, including on plain text links. */ -webkit-tap-highlight-color: transparent; /* Keep keyboard-focused elements clear of the sticky header and mobile bar. */ scroll-padding-top: calc(var(--header-h) + 1rem); scroll-padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom) + .5rem); } body { margin: 0; background: var(--surface); color: var(--ink); font-family: var(--font-text); font-size: 18px; line-height: 1.6; padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom)); } h1, h2, h3, p, ul, ol { margin: 0; } h3 { font-size: 20px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; color: var(--ink); text-wrap: balance; } img, svg { max-width: 100%; } [hidden] { display: none !important; } a { color: inherit; } .sprite { position: absolute; width: 0; height: 0; overflow: hidden; } :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; } .plate :focus-visible, .footer :focus-visible, .skip-link:focus { outline-color: var(--anchor-ink); } /* ---------- 3. skip-link ---------- */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 50; padding: .75rem 1.25rem; background: var(--anchor); color: var(--anchor-ink); text-decoration: none; font-weight: 600; } .skip-link:focus { left: 0; top: 0; } /* ---------- 4. Header ---------- */ .header-sentinel { height: 1px; } .site-header { position: sticky; top: 0; z-index: 20; height: var(--header-h); display: flex; align-items: center; justify-content: space-between; padding: 0 1rem; background: var(--surface); border-bottom: 1px solid var(--line); transition: height 150ms ease, padding 150ms ease; } .site-header.is-compact { height: calc(var(--header-h) - 8px); padding: 0 .75rem; } .brand { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--font-mono); font-weight: 600; color: var(--ink); text-decoration: none; /* One short word. Breaking it gave "FixPo / int" once the header gained a CTA. The 359px query below buys the row the width instead. */ white-space: nowrap; } .site-header__right { display: flex; align-items: center; gap: .5rem; } .site-header nav { display: flex; } .lang { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 .5rem; font-family: var(--font-mono); font-size: 13px; color: var(--ink-soft); text-decoration: none; } .lang.is-current { color: var(--ink); font-weight: 600; border-bottom: 2px solid var(--accent-deep); } /* ---------- 5. Hero / Plate ---------- */ .hero { background: var(--surface); } .hero__inner { padding-top: 1.5rem; padding-bottom: var(--section-y); } .hero h1 { font-size: clamp(30px, 8vw, 52px); line-height: 1.12; letter-spacing: -.02em; font-weight: 700; max-width: 30ch; overflow-wrap: anywhere; text-wrap: balance; } .hero__lead { margin-top: .75rem; color: var(--ink-soft); max-width: 46ch; } .plate { /* A dark surface, but not a .section--dark, so the token remap that keeps accent graphics readable on --anchor has to be repeated here. Base --accent on --anchor drops to 2.34:1 in palette A and 2.84:1 in C. --accent-bright is the same hue lifted to clear 3:1 for decorative graphics. Applied only to graphics: remapping --accent wholesale would repaint the primary button's fill, and accent-ink on the lifted colour fails 4.5:1 (rule 2 in DESIGN.md). */ --accent-deep: var(--accent-bright); position: relative; margin-top: 1.5rem; background: var(--anchor); color: var(--anchor-ink); border-radius: var(--radius-plate); padding: 1.25rem; box-shadow: var(--shadow); } .plate--repeat { background: transparent; border: 1px solid var(--line); } .plate__cross { position: absolute; width: 16px; height: 16px; color: var(--accent-deep); } .plate__cross--tl { top: 0; left: 0; transform: translate(-50%, -50%); } .plate__cross--tr { top: 0; right: 0; transform: translate(50%, -50%); } .plate__cross--bl { bottom: 0; left: 0; transform: translate(-50%, 50%); } .plate__cross--br { bottom: 0; right: 0; transform: translate(50%, 50%); } .plate__phone { display: flex; align-items: center; min-height: 44px; margin-top: 0; font-family: var(--font-mono); font-size: 27px; font-weight: 600; color: var(--anchor-ink); text-decoration: none; overflow-wrap: anywhere; } .plate__phone:hover { text-decoration: underline; } .plate__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1rem; } .plate__actions .btn { flex: 1 1 100%; } .facts { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; } .fact { display: inline-flex; align-items: center; gap: .5rem; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: .375rem .75rem; font-size: 13px; font-weight: 600; line-height: 1.3; } .fact::before { content: ""; flex-shrink: 0; width: 7px; height: 7px; background: var(--accent-deep); transform: rotate(45deg); } /* ---------- 6. Sections ---------- */ .hero__inner, .section__inner, .footer__inner { max-width: var(--maxw); margin: 0 auto; padding-inline: 1rem; } .section { padding: var(--section-y) 0; } .section--light { background: var(--surface); } .section--white { background: var(--surface-2); } /* #why and #trust are both light, so their seam would read as one tall band. A hairline marks it without adding space. */ .section--light + .section--light { border-top: 1px solid var(--line); } .section--dark { background: var(--anchor); --ink: var(--anchor-ink); --ink-soft: var(--anchor-ink-soft); --line: rgb(255 255 255 / .40); --focus: var(--anchor-ink); --accent-deep: var(--accent-bright); --line-strong: rgb(255 255 255 / .40); color: var(--ink); } .section--dark .contact-card { background: rgb(255 255 255 / .06); } .section__title { font-size: clamp(22px, 4.6vw, 36px); line-height: 1.2; font-weight: 600; text-wrap: balance; overflow-wrap: anywhere; } .section__lead { margin-top: .75rem; color: var(--ink-soft); max-width: 62ch; } /* ---------- 7. Steps ---------- */ .steps__list { list-style: none; margin-top: 1.5rem; padding: 0; display: grid; gap: 1.5rem; counter-reset: steps; } .steps__item { counter-increment: steps; } .steps__item::before { content: counter(steps, decimal-leading-zero); display: block; font-family: var(--font-mono); font-size: 36px; font-weight: 600; line-height: 1; color: var(--ink); margin-bottom: .5rem; } .steps__item p { margin-top: .5rem; max-width: var(--measure); color: var(--ink-soft); } /* ---------- 8. Service cards ---------- */ .cards { margin-top: 1.5rem; display: grid; grid-template-columns: 1fr; gap: 1rem; } .card { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; box-shadow: var(--shadow); transition: transform 150ms ease, box-shadow 150ms ease; } /* The tinted backing is what anchors the eye in a card that has no photo. rgb(var(--accent-rgb) / .12) rather than a flat hex: the tint has to sit correctly on both the white card and the light section behind it. */ .card__badge { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 16px; background: rgb(var(--accent-rgb) / .12); color: var(--accent-deep); } .card__icon { width: 40px; height: 40px; } .card h3 { margin-top: .75rem; } .card ul { list-style: none; padding: 0; margin-top: .75rem; display: grid; gap: .375rem; } .card li { position: relative; padding-left: 1.25rem; color: var(--ink-soft); font-size: 17px; line-height: 1.5; font-weight: 400; } .card li::before { content: ""; position: absolute; left: 0; top: .45em; width: 7px; height: 7px; background: var(--accent-deep); transform: rotate(45deg); } .card__more { margin-top: .75rem; } .card__more summary { display: flex; align-items: center; gap: .375rem; min-height: 44px; font-size: 15px; font-weight: 600; color: var(--ink-soft); cursor: pointer; list-style: none; } .card__more summary::-webkit-details-marker { display: none; } /* The glyph alone leaves the label reading "show all" while it is already open. */ .card__more-hide { display: none; } .card__more[open] .card__more-show { display: none; } .card__more[open] .card__more-hide { display: inline; } .card__more summary::after { content: "+"; font-family: var(--font-mono); } .card__more[open] summary::after { content: "\2212"; } /* ---------- 9. Chips (audience) ---------- */ .chips { list-style: none; margin-top: 1.5rem; padding: 0; display: grid; grid-template-columns: 1fr; gap: .75rem; } .chip { display: flex; align-items: center; gap: .625rem; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.125rem 1.25rem; font-size: 18px; } .chip__icon { width: 24px; height: 24px; color: var(--accent-deep); flex-shrink: 0; } .chip__body { display: grid; gap: .125rem; min-width: 0; } .chip__text { font-size: 15px; line-height: 1.35; color: var(--ink-soft); } /* ---------- 10. Pricing ---------- */ .pricing__points { list-style: none; margin-top: 1.5rem; padding: 0; display: grid; gap: .5rem; } .pricing__points li { position: relative; padding-left: 1.25rem; max-width: var(--measure); color: var(--ink-soft); } .pricing__points li::before { content: ""; position: absolute; left: 0; top: .45em; width: 7px; height: 7px; background: var(--accent-deep); transform: rotate(45deg); } .pricing__note { margin-top: 1rem; max-width: var(--measure); color: var(--ink-soft); font-size: 16px; } /* ---------- 11. Why ---------- */ .why__grid { margin-top: 1.5rem; display: grid; grid-template-columns: 1fr; gap: 1.5rem; } .why__item h3 { position: relative; padding-top: 1rem; } .why__item h3::before { content: ""; position: absolute; top: 0; left: 0; width: 28px; height: 2px; background: var(--accent-deep); } .why__item p { margin-top: .5rem; max-width: var(--measure); color: var(--ink-soft); } /* ---------- 12. Trust ---------- */ .trust__stat { margin-top: .75rem; font-family: var(--font-mono); color: var(--ink-soft); } .proof { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .5rem; } .proof__item { position: relative; padding-left: 1.75rem; font-weight: 600; line-height: 1.4; } .proof__item::before { content: ""; position: absolute; left: 0; top: .3em; width: 10px; height: 6px; border-left: 2px solid var(--accent-deep); border-bottom: 2px solid var(--accent-deep); transform: rotate(-45deg); } .proof__registry { margin-top: 1.5rem; font-family: var(--font-mono); font-size: 15px; color: var(--ink-soft); overflow-wrap: anywhere; } .proof__code { display: block; } .proof__link { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } .trust__list { list-style: none; margin-top: 1.5rem; padding: 0; display: grid; grid-template-columns: 1fr; gap: 1rem; } .review { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; box-shadow: var(--shadow); } .review__text { font-size: 17px; line-height: 1.5; } .review__who { margin-top: .75rem; font-size: 15px; line-height: 1.4; color: var(--ink-soft); } .review__name { display: block; font-weight: 600; color: var(--ink); } .google { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; margin-top: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius); padding: .75rem 1rem; text-decoration: none; } .google:hover { border-color: var(--ink-soft); } .google__rating { font-family: var(--font-mono); font-size: 22px; font-weight: 600; } .google__label { font-size: 15px; color: var(--ink-soft); } /* ---------- 13. Form ---------- */ /* Confirms arrival for anyone who came from the header or hero button. Fades an overlay rather than the section's own background-color, which would repaint a full screen of content on every frame. */ @keyframes form-flash { from { opacity: 1; } to { opacity: 0; } } #form { position: relative; } #form:target::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; pointer-events: none; background: var(--accent-deep); animation: form-flash 900ms ease-out forwards; } .botcheck { display: none !important; } .form { margin-top: 1.5rem; display: grid; gap: 1rem; max-width: 42rem; } .form__field { display: grid; gap: .375rem; } .form__field label { font-weight: 600; font-size: 16px; color: var(--ink); } .label__opt { font-family: var(--font-mono); font-size: 12px; font-weight: 400; color: var(--ink-soft); } .form input, .form textarea { width: 100%; font: inherit; font-size: 16px; padding: .75rem; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface-2); color: var(--ink); transition: border-color 120ms; } .form input::placeholder, .form textarea::placeholder { color: var(--ink-soft); opacity: 1; } .form textarea { resize: vertical; min-height: 8rem; } .form input:focus-visible, .form textarea:focus-visible { border-color: var(--ink); } /* Colour alone would not carry the error: the disc and the sentence do the work, and the field border only reinforces them. */ .form__error { display: flex; align-items: flex-start; gap: .5rem; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--ink); } .form__error::before { content: "!"; flex-shrink: 0; display: grid; place-items: center; width: 18px; height: 18px; margin-top: .05em; border-radius: 50%; background: var(--accent-deep); color: var(--accent-ink); font-size: 13px; font-weight: 700; line-height: 1; } .form input[aria-invalid="true"], .form textarea[aria-invalid="true"] { border-color: var(--accent-deep); } /* Reserved before the widget paints, so it cannot push the submit button down while the user is reaching for it. 85px is the measured height of the rendered widget on lvh.me. */ .h-captcha { min-height: 85px; } /* Same treatment as .status--error: on the white form section the tinted block is what separates the message from the fields. */ .form__fallback { margin-top: .75rem; padding: .875rem 1rem; background: var(--surface); border-left: 4px solid var(--accent-deep); font-size: 16px; line-height: 1.45; } .form__fallback-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .75rem; } /* reveal.js puts .js on before first paint. Without JS the captcha widget never renders and the server rejects the submission, so the form is hidden and the direct-contact block takes its place. */ .js .form__nojs { display: none; } html:not(.js) #request-form { display: none; } .form__privacy { margin: 0; max-width: 52ch; color: var(--ink-soft); font-size: 15px; line-height: 1.4; } .form__b2c { margin-top: .5rem; max-width: var(--measure); font-weight: 600; } .form__status { max-width: 42rem; margin: 1rem 0 0; } .form__status:empty { margin: 0; } .form__status.status--error { background: var(--surface); border-left: 4px solid var(--accent-deep); padding: .875rem 1rem; color: var(--ink); } #form-error-call { margin-top: .75rem; } .form__success { margin-top: 1.5rem; max-width: 42rem; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; display: grid; gap: .75rem; } /* Marks the outcome before the sentence is read. Decorative: the heading text already states that the request was sent. */ .form__success h3::before { content: "\2713\00a0"; color: var(--accent-deep); } .form__success p { color: var(--ink-soft); } /* ---------- 14. Contacts ---------- */ .contact-cards { margin-top: 1.5rem; display: grid; grid-template-columns: 1fr; gap: 1rem; } .contact-card { display: block; text-decoration: none; color: inherit; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; transition: border-color 120ms, transform 150ms ease, box-shadow 150ms ease; } .contact-card:hover { border-color: var(--ink-soft); } /* The brand colour is what makes the channel recognisable before the label is read. This is the only place on the page where a colour outside the palette is allowed. */ .contact-card__logo { display: block; width: 44px; height: 44px; margin-bottom: .75rem; } .contact-card__logo--wa { color: #25D366; } .contact-card__logo--tg { color: #26A5E4; } .contact-card__logo--mail { color: var(--accent-deep); } .contact-card h3 { color: var(--ink); } .contact-card p { margin-top: .5rem; color: var(--ink-soft); } /* ---------- 15. Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: .75rem 1.25rem; border-radius: var(--radius); border: 1px solid transparent; font: inherit; font-weight: 600; text-decoration: none; text-align: center; cursor: pointer; transition: background-color 120ms, border-color 120ms, transform 150ms, box-shadow 150ms; touch-action: manipulation; } .btn--primary { background: var(--accent); color: var(--accent-ink); } .btn--primary:hover { filter: brightness(.94); } .btn--ghost { background: transparent; border-color: currentColor; color: inherit; } .btn--ghost:hover { border-color: var(--accent-deep); } .btn--quiet { background: transparent; border-color: transparent; color: inherit; text-decoration: underline; text-underline-offset: 3px; } .btn--quiet:hover { text-decoration-thickness: 2px; } /* 44px is the tap-target floor, and it still clears the 48px compact header. */ .header-cta { min-height: 44px; padding: .375rem .75rem; font-size: 15px; white-space: nowrap; } .btn--wide { width: 100%; } .btn:disabled { opacity: .6; cursor: not-allowed; } .btn[aria-busy="true"] { cursor: progress; } /* ---------- 16. Footer ---------- */ .footer { background: var(--anchor); color: var(--anchor-ink); border-top: 1px solid rgb(255 255 255 / .40); } .footer__inner { padding-top: 2.5rem; padding-bottom: 2.5rem; display: grid; gap: 1rem; } .footer__address { font-style: normal; font-family: var(--font-mono); display: grid; gap: .375rem; overflow-wrap: anywhere; } .footer__address a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; } .footer__brand { font-family: var(--font-text); font-size: 20px; font-weight: 600; } .footer__channels { list-style: none; margin: 0; padding: 0; display: flex; gap: .25rem; } .footer__channels a { display: grid; place-items: center; width: 44px; height: 44px; } .footer__logo { width: 32px; height: 32px; } .footer__logo--wa { color: #25D366; } .footer__logo--tg { color: #26A5E4; } /* The footer is not .section--dark, so --accent-deep is still the light-mode value here and would drop to 2.34:1 on --anchor. */ .footer__logo--mail { color: var(--accent-bright); } .footer__langs { display: flex; gap: .5rem; } .footer__langs .lang { color: var(--anchor-ink-soft); } .footer__langs .lang.is-current { color: var(--anchor-ink); opacity: 1; border-bottom-color: var(--accent-bright); } .footer__privacy, .footer__copy { font-size: 15px; color: var(--anchor-ink-soft); } .footer__privacy a { display: inline-flex; align-items: center; min-height: 44px; } /* ---------- 17. Mobile bar ---------- */ .mobilebar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; gap: .5rem; padding: .375rem .5rem; padding-bottom: calc(.375rem + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line); transition: transform 160ms, visibility 160ms; } .mobilebar .btn { flex: 1; min-width: 0; min-height: 44px; padding-inline: .5rem; font-size: 16px; white-space: nowrap; } .mobilebar.is-hidden { visibility: hidden; transform: translateY(100%); } /* ---------- 18. Themebar ---------- */ /* THEME-SWITCHER:START */ /* Preview-only widget. Parked one bar-height up so it clears the sticky action bar, which used to clip it. Top-right is worse: there it covers the h1, which is the thing being reviewed. */ .themebar { position: fixed; right: .75rem; bottom: calc(var(--bar-h) + env(safe-area-inset-bottom) + .5rem); z-index: 40; display: flex; gap: .25rem; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: .25rem; } .themebar__btn { width: 44px; height: 44px; font-family: var(--font-mono); background: transparent; border: 1px solid var(--line); color: var(--ink); cursor: pointer; border-radius: var(--radius); } .themebar__btn[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } /* THEME-SWITCHER:END */ /* ---------- 19. Animation ---------- */ /* No js-reveal class on means no JS ran: content stays visible. */ .js-reveal .reveal { opacity: 0; transform: translateY(12px); transition: opacity 400ms ease, transform 400ms ease; } .js-reveal .reveal.is-visible { opacity: 1; transform: none; } .card:hover, .contact-card:hover, .btn:not(:disabled):hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); } /* ---------- 20. Media queries ---------- */ /* At 320px the Russian fact chips need a third row, which pushed the hero buttons 8px below the fold. Tightening the plate buys back 16px. */ @media (max-width: 359px) { .hero__inner { padding-top: 1rem; } .plate { padding: 1rem; } /* Brand + three language links + the request button do not fit 320px at full width. The links keep their 44px height and give up horizontal padding: 38x44 still clears WCAG 2.5.8, and the alternative was a wrapped brand or no CTA at all on the narrowest phones. */ .site-header { padding: 0 .75rem; } .lang { min-width: 38px; } } @media (min-width: 480px) { .plate__actions .btn { flex: 1 1 auto; } .why__grid, .cards, .chips { grid-template-columns: repeat(2, 1fr); } /* One chip carries a subtitle, so its row would otherwise be taller than the others and read as emphasis. Equal rows keep all seven equal in weight. Single-column below this width, where the extra height would just be cost. */ .chips { grid-auto-rows: 1fr; } } @media (min-width: 768px) { body { padding-bottom: 0; } html { scroll-padding-bottom: 0; } .site-header { padding: 0 1.5rem; } .site-header.is-compact { padding: 0 1.25rem; } :root { --section-y: 96px; --header-h: 64px; } body { font-size: 19px; line-height: 1.6; } .hero__inner { padding-top: 3rem; padding-bottom: var(--section-y); } .plate { padding: 2.25rem; } .plate__phone { font-size: 34px; } .hero__inner, .section__inner, .footer__inner { padding-inline: 1.5rem; } h3 { font-size: 22px; } .card { padding: 1.5rem; } .card__badge { width: 72px; height: 72px; border-radius: 18px; } .card__icon { width: 48px; height: 48px; } .card li { font-size: 18px; } .steps__item::before { font-size: 64px; } .steps__list { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .cards { grid-template-columns: repeat(2, 1fr); } .chips { grid-template-columns: repeat(2, 1fr); } .why__grid { gap: 2rem; } .contact-cards { grid-template-columns: repeat(3, 1fr); } .trust__list { grid-template-columns: repeat(3, 1fr); } .proof { grid-template-columns: repeat(3, 1fr); gap: 1rem; } .footer__inner { padding-top: 3.5rem; padding-bottom: 3.5rem; } .mobilebar { display: none; } /* THEME-SWITCHER:START */ .themebar { bottom: .75rem; } /* THEME-SWITCHER:END */ } @media (min-width: 1024px) { .hero__inner, .section__inner, .footer__inner { padding-inline: 2rem; } .cards { grid-template-columns: repeat(3, 1fr); } .chips { grid-template-columns: repeat(3, 1fr); } } @media print { .js-reveal .reveal { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .js-reveal .reveal { opacity: 1; transform: none; } }