/* FixBox — общие стили для всех страниц. Монохромная палитра, акцент только на WhatsApp-кнопке. Тема: авто по prefers-color-scheme + ручной переключатель (data-theme на ). */ :root { --bg: #ffffff; --bg-soft: #f5f5f7; --bg-elevated: #ffffff; --fg: #16161a; --fg-muted: #6b6b72; --border: #e2e2e6; --border-strong: #c9c9d0; /* Фирменный зелёный WhatsApp с белым текстом даёт контраст 1.98 при норме 4.5, поэтому текст тёмный: цвет остаётся узнаваемым, кнопка проходит WCAG AA. */ --accent: #25d366; --accent-fg: #06301a; --accent-hover: #1fbb59; --shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 8px 24px rgb(0 0 0 / 0.06); --radius: 14px; --radius-sm: 10px; --maxw: 1120px; --gap: clamp(1rem, 3vw, 2rem); --section-y: clamp(3.5rem, 9vw, 7rem); } @media (prefers-color-scheme: dark) { :root { --bg: #0c0c0e; --bg-soft: #151518; --bg-elevated: #1a1a1f; --fg: #f2f2f5; --fg-muted: #9c9ca6; --border: #2a2a31; --border-strong: #3d3d46; --shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 8px 24px rgb(0 0 0 / 0.35); } } /* Ручной выбор темы перебивает системный */ :root[data-theme='light'] { --bg: #ffffff; --bg-soft: #f5f5f7; --bg-elevated: #ffffff; --fg: #16161a; --fg-muted: #6b6b72; --border: #e2e2e6; --border-strong: #c9c9d0; --shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 8px 24px rgb(0 0 0 / 0.06); } :root[data-theme='dark'] { --bg: #0c0c0e; --bg-soft: #151518; --bg-elevated: #1a1a1f; --fg: #f2f2f5; --fg-muted: #9c9ca6; --border: #2a2a31; --border-strong: #3d3d46; --shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 8px 24px rgb(0 0 0 / 0.35); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--fg); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem); line-height: 1.6; -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; } h1, h2, h3 { line-height: 1.15; letter-spacing: -0.022em; margin: 0; font-weight: 700; } h1 { font-size: clamp(2.1rem, 1.4rem + 3.4vw, 3.9rem); } h2 { font-size: clamp(1.65rem, 1.25rem + 1.9vw, 2.6rem); } h3 { font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem); } p { margin: 0; } .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(1.15rem, 4vw, 2.5rem); } .section { padding-block: var(--section-y); } .section--soft { background: var(--bg-soft); } .section__head { max-width: 46rem; margin-bottom: clamp(2rem, 5vw, 3.25rem); } .section__head p { color: var(--fg-muted); margin-top: 0.9rem; font-size: 1.05em; } .eyebrow { display: block; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--fg-muted); margin-bottom: 0.85rem; } /* ---------- Шапка ---------- */ .header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--border); } .header__inner { display: flex; align-items: center; gap: 1rem; min-height: 62px; } .brand { display: inline-flex; align-items: baseline; gap: 0.55rem; text-decoration: none; font-weight: 700; font-size: 1.2rem; letter-spacing: -0.03em; margin-right: auto; } .brand__city { font-weight: 500; font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-muted); } .nav { display: none; gap: 1.6rem; font-size: 0.94rem; } .nav a { text-decoration: none; color: var(--fg-muted); transition: color 0.15s; } .nav a:hover { color: var(--fg); } @media (min-width: 780px) { .nav { display: flex; } } .theme-toggle { display: inline-grid; place-items: center; width: 38px; height: 38px; flex: none; border: 1px solid var(--border); border-radius: 50%; background: transparent; color: var(--fg); cursor: pointer; padding: 0; transition: border-color 0.15s, background 0.15s; } .theme-toggle:hover { border-color: var(--border-strong); background: var(--bg-soft); } .theme-toggle svg { width: 17px; height: 17px; } .theme-toggle .icon-moon { display: none; } @media (prefers-color-scheme: dark) { .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } } :root[data-theme='dark'] .theme-toggle .icon-sun { display: none; } :root[data-theme='dark'] .theme-toggle .icon-moon { display: block; } :root[data-theme='light'] .theme-toggle .icon-sun { display: block; } :root[data-theme='light'] .theme-toggle .icon-moon { display: none; } /* ---------- Кнопки ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; padding: 0.85rem 1.5rem; border-radius: 999px; border: 1px solid transparent; font-size: 1rem; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background 0.15s, border-color 0.15s, transform 0.1s; } .btn:active { transform: translateY(1px); } .btn svg { width: 19px; height: 19px; flex: none; } .btn--wa { background: var(--accent); color: var(--accent-fg); } .btn--wa:hover { background: var(--accent-hover); } .btn--ghost { border-color: var(--border-strong); color: var(--fg); background: var(--bg-elevated); } .btn--ghost:hover { background: var(--bg-soft); } /* ---------- Hero ---------- */ .hero { padding-block: clamp(2.5rem, 6vw, 4.5rem) var(--section-y); } .hero__grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; } @media (min-width: 900px) { .hero__grid { grid-template-columns: 1.05fr 0.95fr; } } .hero__title { text-wrap: balance; } .hero__lead { margin-top: 1.25rem; font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem); color: var(--fg-muted); max-width: 34rem; } .hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; } .hero__meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; margin-top: 2rem; padding-top: 1.6rem; border-top: 1px solid var(--border); font-size: 0.94rem; color: var(--fg-muted); } .hero__meta strong { color: var(--fg); font-weight: 600; } .hero__media { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); /* Исходники вертикальные: на десктопе даём портретный кадр, на мобиле режем в широкий, иначе фото занимает весь экран и оттесняет кнопки. */ aspect-ratio: 16 / 10; background: var(--bg-soft); } /* Кадр с фасадом вертикальный, и вывеска в нём вверху: широкий кроп её срезает. Даём высокую пропорцию и тянем кадр к верхнему краю. */ .hero__media--building { aspect-ratio: 5 / 6; } .hero__media--building img { object-position: 50% 20%; } @media (min-width: 900px) { .hero__media { aspect-ratio: 4 / 5; } .hero__media--building img { object-position: 50% 35%; } } .hero__media img { width: 100%; height: 100%; object-fit: cover; } .rating { display: inline-flex; align-items: center; gap: 0.4rem; } .rating__stars { color: #f5a623; letter-spacing: 0.05em; } /* ---------- Сетка карточек ---------- */ .grid { display: grid; gap: clamp(0.9rem, 2vw, 1.35rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); } /* Услуг восемь, и в один столбец на мобиле это простыня. Здесь — две колонки с компактными карточками; описание остаётся в HTML (его читает Google), но прячется на узких экранах, где оно только удлиняет прокрутку. */ .grid--services { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; } @media (min-width: 620px) { .grid--services { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: clamp(0.9rem, 2vw, 1.35rem); } } .card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); padding: clamp(1.35rem, 3vw, 1.75rem); display: flex; flex-direction: column; gap: 0.6rem; } .grid--services .card { padding: 1rem 0.9rem 1.1rem; gap: 0.4rem; } @media (min-width: 620px) { .grid--services .card { padding: clamp(1.35rem, 3vw, 1.75rem); gap: 0.6rem; } } .card__icon { width: 34px; height: 34px; color: var(--fg); margin-bottom: 0.35rem; } .grid--services .card__icon { width: 26px; height: 26px; margin-bottom: 0.15rem; } @media (min-width: 620px) { .grid--services .card__icon { width: 34px; height: 34px; margin-bottom: 0.35rem; } } .grid--services .card h3 { font-size: 0.95rem; line-height: 1.25; } @media (min-width: 620px) { .grid--services .card h3 { font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem); line-height: 1.15; } } .card p { color: var(--fg-muted); font-size: 0.96rem; } /* Описание услуги — только для широких экранов и для поисковых роботов. */ .grid--services .card__desc { display: none; } @media (min-width: 620px) { .grid--services .card__desc { display: block; } } .card__time { margin-top: auto; padding-top: 0.9rem; font-size: 0.85rem; font-weight: 600; color: var(--fg-muted); letter-spacing: 0.02em; } .grid--services .card__time { padding-top: 0.5rem; font-size: 0.78rem; } @media (min-width: 620px) { .grid--services .card__time { padding-top: 0.9rem; font-size: 0.85rem; } } /* ---------- Блок «почему мы» с картинкой ---------- */ .feature { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; } @media (min-width: 900px) { .feature { grid-template-columns: 1fr 1fr; } .feature--reverse .feature__media { order: -1; } } .feature__media { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 3 / 2; background: var(--bg-soft); } .feature__media img { width: 100%; height: 100%; object-fit: cover; } .feature__list { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: 0.85rem; } .feature__list li { display: flex; gap: 0.7rem; align-items: flex-start; color: var(--fg-muted); } .feature__list svg { width: 20px; height: 20px; flex: none; margin-top: 0.15rem; color: var(--fg); } /* ---------- Шаги ---------- */ .steps { display: grid; gap: clamp(1.1rem, 2.5vw, 1.75rem); counter-reset: step; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); } .step { display: flex; flex-direction: column; gap: 0.7rem; } .step__media { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; background: var(--bg-soft); border: 1px solid var(--border); } .step__media img { width: 100%; height: 100%; object-fit: cover; /* Сюжет во всех кадрах в верхней половине — низ (столы, пол) не нужен. */ object-position: 50% 30%; } /* Широкий кадр интерьера: режется по бокам, держим правую часть со стойкой. */ .step__media--interior img { object-position: 70% 50%; } /* line-height: 1 обязателен: иначе бокс строки выше глифа и цифра визуально съезжает вниз от центра кружка. */ .step__num { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--fg); color: var(--bg); font-size: 0.86rem; font-weight: 700; line-height: 1; margin-top: 0.35rem; } .step p { color: var(--fg-muted); font-size: 0.96rem; } /* На Бали ориентируются по карте, а не по адресу — даём ткнуть прямо из шага. */ .step__link { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.15rem; font-size: 0.92rem; font-weight: 600; text-decoration: none; color: var(--fg); border-bottom: 1px solid var(--border-strong); padding-bottom: 0.15rem; align-self: flex-start; transition: border-color 0.15s; } .step__link:hover { border-color: var(--fg); } .step__link svg { width: 16px; height: 16px; flex: none; } /* ---------- Отзывы ---------- */ .review { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); padding: clamp(1.35rem, 3vw, 1.75rem); display: flex; flex-direction: column; gap: 0.9rem; } .review__stars { color: #f5a623; font-size: 0.95rem; letter-spacing: 0.08em; } .review blockquote { margin: 0; font-size: 1rem; } .review__author { margin-top: auto; padding-top: 0.5rem; font-size: 0.9rem; color: var(--fg-muted); font-weight: 600; } /* ---------- FAQ ---------- */ .faq { display: grid; gap: 0.7rem; max-width: 52rem; } .faq details { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-elevated); overflow: hidden; } .faq summary { cursor: pointer; padding: 1.1rem clamp(1.1rem, 3vw, 1.45rem); font-weight: 600; list-style: none; display: flex; align-items: center; gap: 1rem; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: '+'; margin-left: auto; font-size: 1.35rem; font-weight: 400; color: var(--fg-muted); line-height: 1; flex: none; } .faq details[open] summary::after { content: '\2212'; } .faq details > div { padding: 0 clamp(1.1rem, 3vw, 1.45rem) 1.25rem; color: var(--fg-muted); } /* ---------- Контакты и карта ---------- */ .contact { display: grid; gap: clamp(1.5rem, 4vw, 2.5rem); align-items: start; } @media (min-width: 900px) { .contact { grid-template-columns: 0.85fr 1.15fr; } } .contact__list { display: grid; gap: 1.35rem; margin: 0; } .contact__list dt { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-muted); margin-bottom: 0.3rem; } .contact__list dd { margin: 0; font-size: 1.02rem; } .contact__list a { text-decoration: none; border-bottom: 1px solid var(--border-strong); } .contact__list a:hover { border-color: var(--fg); } .hours { display: grid; gap: 0.2rem; font-size: 0.98rem; } .hours div { display: flex; justify-content: space-between; gap: 1rem; max-width: 17rem; } .hours span:last-child { color: var(--fg-muted); } .contact__actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 0.5rem; } .map { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); aspect-ratio: 4 / 3; background: var(--bg-soft); } @media (min-width: 900px) { .map { aspect-ratio: 16 / 12; } } .map iframe { width: 100%; height: 100%; border: 0; display: block; } /* Google-карта всегда светлая — в тёмной теме глушим её, иначе бьёт по глазам. Полную инверсию не делаем: карта должна оставаться узнаваемой. */ @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .map iframe { filter: invert(0.9) hue-rotate(180deg) brightness(0.92) contrast(0.95); } } :root[data-theme='dark'] .map iframe { filter: invert(0.9) hue-rotate(180deg) brightness(0.92) contrast(0.95); } /* ---------- Вторая локация ---------- */ .other-location { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(1rem, 3vw, 2rem); padding: clamp(1.5rem, 4vw, 2.25rem); border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-elevated); } .other-location__text { flex: 1 1 16rem; } .other-location__text p { color: var(--fg-muted); margin-top: 0.4rem; font-size: 0.97rem; } /* ---------- Подвал ---------- */ .footer { border-top: 1px solid var(--border); padding-block: clamp(2.25rem, 5vw, 3.25rem); font-size: 0.9rem; color: var(--fg-muted); } .footer__grid { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; justify-content: space-between; align-items: flex-start; } .footer a { text-decoration: none; } .footer a:hover { text-decoration: underline; } .footer__links { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; } .footer__legal { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--border); font-size: 0.82rem; line-height: 1.55; } /* ---------- Плавающая кнопка WhatsApp на мобиле ---------- */ .wa-float { position: fixed; right: 1rem; bottom: 1rem; z-index: 60; display: inline-grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--accent); color: var(--accent-fg); box-shadow: 0 6px 20px rgb(0 0 0 / 0.22); transition: background 0.15s; } .wa-float:hover { background: var(--accent-hover); } .wa-float svg { width: 27px; height: 27px; } @media (min-width: 780px) { .wa-float { display: none; } } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }