/* BMW Service — компоненты и материалы. Все значения берутся из tokens.css (tokens.json): цвета, тени, отступы, радиусы, blur, facet, длительности и кривые. */ /* ── Регистрация анимируемых переменных (плавный блик за курсором, наклон дисплея) ── */ @property --mx { syntax: ''; inherits: true; initial-value: 30%; } @property --my { syntax: ''; inherits: true; initial-value: -10%; } @property --rx { syntax: ''; inherits: false; initial-value: 0deg; } @property --ry { syntax: ''; inherits: false; initial-value: 0deg; } @property --fill { syntax: ''; inherits: true; initial-value: 0; } /* ── 0. База ─────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { color-scheme: dark; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--night-100); color: var(--ink); font-family: var(--font-sans); font-size: 16px; line-height: 26px; font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } ::selection { background: var(--ice-veil); color: var(--ice-bright); } a { color: var(--link); text-decoration: none; } :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } h1, h2, h3, h4, p { margin: 0; } .t-label { text-transform: uppercase; } .halo-tnum { font-variant-numeric: tabular-nums; } .halo-ink-soft { color: var(--ink-soft); } .halo-ink-muted { color: var(--ink-muted); } .halo-ice { color: var(--ice); } .halo-cabin { color: var(--cabin); } .halo-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ── 1. Раскладка ────────────────────────────────────────────────────────── */ .halo-container { width: 100%; max-width: calc(var(--container) + 2 * var(--space-6)); margin-inline: auto; padding-inline: var(--space-6); } .halo-container--wide { max-width: calc(var(--container-wide) + 2 * var(--space-6)); } .halo-container--text { max-width: calc(var(--container-text) + 2 * var(--space-6)); } .halo-section { padding-block: var(--space-24); position: relative; } .halo-section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-6); margin-bottom: var(--space-12); flex-wrap: wrap; } .halo-section__head > div { display: grid; gap: var(--space-3); max-width: 640px; } .halo-kicker { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--ice); } .halo-kicker::before { content: ""; width: 24px; height: 1px; background: currentColor; box-shadow: 0 0 8px var(--ice-glow); } .halo-kicker--cabin { color: var(--cabin); } .halo-kicker--cabin::before { box-shadow: 0 0 8px var(--cabin-glow); } .halo-grid { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); } .halo-split { display: grid; gap: var(--space-10); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; } .halo-rule { height: 1px; border: 0; margin: 0; background: var(--line); } .halo-section--tight { padding-block: var(--space-12); } .halo-section--first { padding-top: var(--space-6); } .halo-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Пять карточек: две крупные сверху, три снизу */ .halo-grid--5 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .halo-grid--5 > * { grid-column: span 2; } .halo-grid--5 > :nth-child(-n+2) { grid-column: span 3; } .halo-grid--5 > :nth-child(-n+2) .halo-service__art { height: 220px; } .halo-svc-group__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-5); margin-bottom: var(--space-6); } @media (max-width: 900px) { .halo-section { padding-block: var(--space-16); } .halo-section--tight { padding-block: var(--space-10); } .halo-section--first { padding-top: var(--space-4); } .halo-split { grid-template-columns: 1fr; } .halo-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 900px) { .halo-grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .halo-grid--5 > *, .halo-grid--5 > :nth-child(-n+2) { grid-column: auto; } .halo-grid--5 > :first-child { grid-column: 1 / -1; } } @media (max-width: 600px) { .halo-grid--3, .halo-grid--5 { grid-template-columns: 1fr; } } @media (max-width: 600px) { .halo-container { padding-inline: var(--space-4); } /* На телефоне дисплейные стили уменьшаются, остальная шкала — та же */ .t-display-xl { font-size: 56px; line-height: 58px; } .t-display { font-size: 40px; line-height: 44px; } .t-title-1 { font-size: 32px; line-height: 38px; } .t-title-2 { font-size: 26px; line-height: 32px; } .halo-section__head { margin-bottom: var(--space-8); } } /* ── 2. Атмосфера: ночная сцена со светом (лёд сверху справа, тепло снизу слева) ── */ .halo-atmos { position: relative; isolation: isolate; background: var(--night-100); overflow: clip; } .halo-atmos::before { content: ""; position: absolute; inset: -12%; z-index: -2; pointer-events: none; background: radial-gradient(42% 38% at 80% 16%, var(--ice-haze), transparent 70%), radial-gradient(36% 32% at 10% 96%, var(--cabin-haze), transparent 72%), radial-gradient(70% 55% at 52% 42%, var(--night-200), transparent 78%); animation: halo-drift 30s var(--ease-breathe) infinite alternate; } .halo-atmos::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(130% 95% at 50% 35%, transparent 55%, var(--night-000) 100%); } @keyframes halo-drift { from { transform: translate3d(-1.5%, -1%, 0) scale(1); } to { transform: translate3d(1.5%, 1.5%, 0) scale(1.05); } } /* Зерно — матовое покрытие экрана. Кладётся поверх сцены, не мешает кликам. */ .halo-grain { position: relative; } .halo-grain::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: .05; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); } /* ── 3. Стекло ───────────────────────────────────────────────────────────── */ .halo-glass { position: relative; isolation: isolate; border-radius: var(--radius-lg); background: linear-gradient(180deg, var(--glass-top), transparent 42%), var(--glass-fill); -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(1.5); backdrop-filter: blur(var(--blur-glass)) saturate(1.5); box-shadow: var(--edge-light), var(--shadow-float); transition: background-color var(--dur-micro) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), transform var(--dur-glide) var(--ease-expo), --mx var(--dur-glide) var(--ease-out), --my var(--dur-glide) var(--ease-out); } /* Градиентная кромка: блик сверху-слева, гаснет к середине */ .halo-glass::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; padding: 1px; background: linear-gradient(155deg, var(--glass-edge-hi) 0%, var(--glass-edge) 24%, transparent 55%, var(--glass-edge) 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; } /* Антиблик: мягкое отражение идёт за курсором (координаты ставит Halo.sheen) */ .halo-glass::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; background: radial-gradient(520px circle at var(--mx) var(--my), var(--glass-sheen), transparent 62%); } .halo-glass--deep { background: linear-gradient(180deg, var(--glass-top), transparent 30%), var(--glass-deep); } .halo-glass--clear { background: linear-gradient(180deg, var(--glass-top), transparent 50%); box-shadow: var(--edge-light), var(--shadow-rest); } .halo-glass--flat { box-shadow: var(--edge-light); } .halo-glass--lit { background: linear-gradient(180deg, var(--ice-veil), transparent 80%), var(--glass-fill); box-shadow: var(--edge-light), var(--glow-ice); } .halo-glass--lit::before { background: linear-gradient(155deg, var(--ice-bright), var(--ice) 30%, var(--ice-veil) 65%, var(--ice) 100%); opacity: .75; } .halo-glass--warm { background: linear-gradient(180deg, var(--cabin-veil), transparent 80%), var(--glass-fill); box-shadow: var(--edge-light), var(--glow-cabin); } .halo-glass--warm::before { background: linear-gradient(155deg, var(--cabin-bright), var(--cabin) 30%, var(--cabin-veil) 65%, var(--cabin) 100%); opacity: .7; } /* Эксперимент: глянцевое стекло — чёткая полоса отражения поверх антиблика */ .halo-glass--gloss::after { background: linear-gradient(112deg, transparent 0 20%, var(--gloss-reflection) 20.2%, var(--glass-top) 33%, transparent 33.2%), linear-gradient(112deg, transparent 0 37%, var(--gloss-reflection) 37.2%, transparent 38.6%), radial-gradient(520px circle at var(--mx) var(--my), var(--glass-sheen), transparent 62%); } .halo-glass--gloss::before { background: linear-gradient(180deg, var(--glass-edge-hi), var(--glass-edge) 18%, transparent 60%, var(--glass-edge) 100%); } /* ── 4. Алькантара ───────────────────────────────────────────────────────── */ .halo-alcantara { position: relative; isolation: isolate; border-radius: var(--radius-lg); background-color: var(--alcantara); background-image: radial-gradient(160% 90% at 18% -10%, var(--alcantara-hi), transparent 62%), radial-gradient(120% 100% at 105% 110%, var(--alcantara-lo), transparent 58%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8 1.2' numOctaves='3' seed='9' stitchTiles='stitch'/%3E%3CfeGaussianBlur stdDeviation='.35' result='n'/%3E%3CfeColorMatrix in='n' type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .7 .7 .7 0 -1.27' result='hi'/%3E%3CfeColorMatrix in='n' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -.7 -.7 -.7 0 1.02' result='lo'/%3E%3CfeMerge%3E%3CfeMergeNode in='lo'/%3E%3CfeMergeNode in='hi'/%3E%3C/feMerge%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"); box-shadow: var(--shadow-rest), inset 0 1px 0 var(--glass-edge); color: var(--ink); transition: --mx var(--dur-glide) var(--ease-out), --my var(--dur-glide) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } /* Ворс ловит свет там, где «провели рукой» — мягкое пятно за курсором */ .halo-alcantara::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; background: radial-gradient(380px circle at var(--mx) var(--my), var(--alcantara-hi), transparent 65%); opacity: .55; mix-blend-mode: screen; } .halo-alcantara--mocha { background-color: var(--alcantara-mocha); } .halo-alcantara--recessed { box-shadow: var(--recess); } /* Прострочка: тёплая нить в 9px от края */ .halo-alcantara--stitched::after { content: ""; position: absolute; inset: 9px; z-index: -1; pointer-events: none; border-radius: max(0px, calc(var(--radius-lg) - 9px)); border: 1.5px dashed var(--stitch); filter: drop-shadow(0 1px 0 var(--alcantara-lo)); } /* ── 5. Глянец (экспериментально) ────────────────────────────────────────── */ .halo-gloss { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--radius-lg); background: radial-gradient(120% 70% at 50% -20%, var(--gloss-reflection), transparent 60%), linear-gradient(180deg, var(--night-400), var(--night-000) 58%, var(--night-200)); box-shadow: inset 0 1px 0 var(--glass-edge-hi), inset 0 -1px 0 var(--glass-edge), var(--shadow-float); } .halo-gloss::before { /* отражения в лаке: широкая полоса «окна» и тонкий блик */ content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(108deg, transparent 0 58%, var(--glass-top) 58.2%, transparent 72%), linear-gradient(108deg, transparent 0 76%, var(--gloss-reflection) 76.2%, transparent 77.4%), linear-gradient(180deg, transparent 0 78%, var(--glass-edge) 78.2%, transparent 78.6%); } /* Проход света по поверхности — для глянца и стекла. Луч — отдельный элемент .halo-sweep__beam (Halo.init добавляет его сам), запускается наведением или классом .is-sweeping */ .halo-sweep { position: relative; overflow: hidden; } .halo-sweep__beam { position: absolute; top: -20%; bottom: -20%; left: 0; width: 38%; z-index: 3; pointer-events: none; background: linear-gradient(100deg, transparent, var(--gloss-reflection) 45%, var(--glass-sheen) 55%, transparent); transform: translateX(-140%) skewX(-12deg); } .halo-sweep:hover > .halo-sweep__beam, .halo-sweep.is-sweeping > .halo-sweep__beam { animation: halo-sweep var(--dur-wake) var(--ease-in-out) 1; } @keyframes halo-sweep { from { transform: translateX(-140%) skewX(-12deg); } to { transform: translateX(380%) skewX(-12deg); } } /* ── 6. Свет ─────────────────────────────────────────────────────────────── */ .halo-ambient { --a: var(--ice); --b: var(--ice-bright); position: relative; display: block; height: 2px; border: 0; margin: 0; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--a) 18%, var(--b) 50%, var(--a) 82%, transparent); } .halo-ambient::after { /* ореол того же цвета */ content: ""; position: absolute; inset: -5px 6%; border-radius: 50%; pointer-events: none; background: inherit; filter: blur(8px); opacity: .7; } .halo-ambient--cabin { --a: var(--cabin); --b: var(--cabin-bright); } .halo-ambient--split { background: linear-gradient(90deg, transparent, var(--ice) 14%, var(--ice-bright) 36%, var(--cabin-bright) 64%, var(--cabin) 86%, transparent); } .halo-ambient--flow { background-size: 220% 100%; animation: halo-flow 9s linear infinite; } @keyframes halo-flow { from { background-position: 0 0; } to { background-position: -220% 0; } } .halo-ambient--short { width: 64px; } .halo-breathe { animation: halo-breathe var(--dur-breathe) var(--ease-breathe) infinite; } @keyframes halo-breathe { 0%, 100% { opacity: .55; } 50% { opacity: 1; } } .halo-glow-text { text-shadow: 0 0 22px var(--ice-glow), 0 0 2px var(--ice-glow); } .halo-glow-text--cabin { text-shadow: 0 0 22px var(--cabin-glow), 0 0 2px var(--cabin-glow); } /* ── 7. Грань (срезанный угол) ───────────────────────────────────────────── */ .halo-facet { --f: var(--facet-md); clip-path: polygon(var(--f) 0, 100% 0, 100% calc(100% - var(--f)), calc(100% - var(--f)) 100%, 0 100%, 0 var(--f)); } .halo-facet--sm { --f: var(--facet-sm); } .halo-facet--lg { --f: var(--facet-lg); } /* ── 8. Иконки ───────────────────────────────────────────────────────────── */ .halo-icon { display: inline-flex; flex: none; width: var(--icon-md); height: var(--icon-md); color: inherit; } .halo-icon svg { width: 100%; height: 100%; display: block; } .halo-icon--sm { width: var(--icon-sm); height: var(--icon-sm); } .halo-icon--lg { width: var(--icon-lg); height: var(--icon-lg); } /* ── 9. Кнопки ───────────────────────────────────────────────────────────── */ .halo-btn { --h: var(--control-md); --edge-a: var(--glass-edge-hi); --edge-b: var(--glass-edge); position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: var(--h); padding: 0 var(--space-6); border: 0; border-radius: var(--radius-sm); font: inherit; font-size: 15px; line-height: 20px; font-weight: 450; letter-spacing: .01em; white-space: nowrap; color: var(--ink); background: linear-gradient(180deg, var(--glass-top), transparent 75%), var(--glass-fill); -webkit-backdrop-filter: blur(var(--blur-soft)); backdrop-filter: blur(var(--blur-soft)); box-shadow: var(--edge-light), var(--shadow-rest); cursor: pointer; text-decoration: none; user-select: none; -webkit-tap-highlight-color: transparent; transition: color var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-expo), --mx var(--dur-glide) var(--ease-out), --my var(--dur-glide) var(--ease-out); } .halo-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; padding: 1px; background: linear-gradient(160deg, var(--edge-a), var(--edge-b) 40%, transparent 70%, var(--edge-b)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; } .halo-btn::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; background: radial-gradient(160px circle at var(--mx) var(--my), var(--glass-sheen), transparent 70%); opacity: 0; transition: opacity var(--dur-base) var(--ease-out); } .halo-btn:hover { background-color: var(--glass-fill-hover); transform: translateY(-1px); } .halo-btn:hover::after { opacity: 1; } .halo-btn:active { transform: translateY(1px) scale(.985); transition-duration: var(--dur-micro); } .halo-btn .halo-icon { margin-inline: -2px; } .halo-btn--primary { --edge-a: var(--ice-bright); --edge-b: var(--ice); color: var(--ice-bright); background: linear-gradient(180deg, var(--ice-veil), transparent 90%), var(--glass-fill); box-shadow: var(--edge-light), var(--glow-ice); } .halo-btn--primary:hover { color: var(--ink); box-shadow: var(--edge-light), var(--glow-ice), 0 0 64px var(--ice-haze); } .halo-btn--solid { --edge-a: var(--crystal-hi); --edge-b: var(--ice-bright); color: var(--on-ice); font-weight: 500; background: linear-gradient(180deg, var(--ice-bright), var(--ice)); box-shadow: inset 0 1px 0 var(--crystal-hi), var(--glow-ice), 0 12px 32px -12px var(--ice-glow); -webkit-backdrop-filter: none; backdrop-filter: none; } .halo-btn--solid:hover { background-color: transparent; box-shadow: inset 0 1px 0 var(--crystal-hi), var(--glow-ice), 0 16px 44px -10px var(--ice-glow); } .halo-btn--warm { --edge-a: var(--cabin-bright); --edge-b: var(--cabin); color: var(--cabin-bright); background: linear-gradient(180deg, var(--cabin-veil), transparent 90%), var(--glass-fill); box-shadow: var(--edge-light), var(--glow-cabin); } .halo-btn--warm:hover { color: var(--ink); box-shadow: var(--edge-light), var(--glow-cabin), 0 0 64px var(--cabin-haze); } .halo-btn--ghost { color: var(--ink-soft); background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding-inline: var(--space-3); } .halo-btn--ghost::before { /* световая черта, растёт из центра */ inset: auto 14px 8px; height: 1px; padding: 0; -webkit-mask: none; mask: none; background: var(--ice); box-shadow: 0 0 8px var(--ice-glow); transform: scaleX(0); transition: transform var(--dur-glide) var(--ease-expo); } .halo-btn--ghost:hover { color: var(--ink); background-color: transparent; transform: none; } .halo-btn--ghost:hover::before { transform: scaleX(1); } .halo-btn--ghost::after { display: none; } .halo-btn--sm { --h: var(--control-sm); padding-inline: var(--space-4); font-size: 14px; } .halo-btn--lg { --h: var(--control-lg); padding-inline: var(--space-8); font-size: 16px; } .halo-btn--icon { width: var(--h); padding: 0; border-radius: var(--radius-full); } .halo-btn--block { width: 100%; } .halo-btn:disabled, .halo-btn[aria-disabled="true"] { color: var(--ink-faint); background: var(--night-500); box-shadow: none; cursor: not-allowed; transform: none; -webkit-backdrop-filter: none; backdrop-filter: none; } .halo-btn:disabled::before, .halo-btn[aria-disabled="true"]::before { opacity: .3; } /* ── 10. Чипы и статусы ──────────────────────────────────────────────────── */ .halo-chip { --c: var(--ink-soft); --bg: var(--glass-fill); display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: var(--radius-full); border: 0; font: inherit; font-size: 13px; line-height: 16px; font-weight: 450; letter-spacing: .01em; white-space: nowrap; color: var(--c); background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); } .halo-chip .halo-icon { width: var(--icon-sm); height: var(--icon-sm); margin-left: -2px; } .halo-chip--ok { --c: var(--signal-ok); --bg: var(--signal-ok-veil); box-shadow: none; } .halo-chip--warn { --c: var(--signal-warn); --bg: var(--signal-warn-veil); box-shadow: none; } .halo-chip--crit { --c: var(--signal-crit); --bg: var(--signal-crit-veil); box-shadow: none; } .halo-chip--info { --c: var(--ice); --bg: var(--ice-veil); box-shadow: none; } .halo-chip--warm { --c: var(--cabin); --bg: var(--cabin-veil); box-shadow: none; } .halo-chip__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; flex: none; } .halo-chip--live .halo-chip__dot { animation: halo-breathe 2.4s var(--ease-breathe) infinite; } /* Чип-фильтр — кнопка */ button.halo-chip, a.halo-chip { cursor: pointer; transition: color var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } button.halo-chip:hover, a.halo-chip:hover { --c: var(--ink); --bg: var(--glass-fill-hover); } .halo-chip[aria-pressed="true"] { --c: var(--ice-bright); --bg: var(--ice-veil); box-shadow: inset 0 0 0 1px var(--ice), 0 0 16px var(--ice-veil); } /* ── 11. Переключатель режимов ──────────────────────────────────────────── */ .halo-modes { position: relative; isolation: isolate; display: inline-flex; align-items: stretch; gap: 0; height: var(--control-md); padding: 4px; border-radius: var(--radius-full); background: var(--glass-recess); box-shadow: var(--recess), inset 0 0 0 1px var(--line); } .halo-modes__thumb { position: absolute; z-index: -1; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: var(--radius-full); transform: translateX(var(--x, 4px)); width: var(--w, 0px); background: linear-gradient(180deg, var(--ice-veil), transparent 90%), var(--glass-fill-hover); box-shadow: inset 0 0 0 1px var(--ice), var(--glow-ice); transition: transform var(--dur-glide) var(--ease-expo), width var(--dur-glide) var(--ease-expo); } .halo-modes__opt { position: relative; border: 0; background: transparent; cursor: pointer; padding: 0 var(--space-5); border-radius: var(--radius-full); font: inherit; font-size: 15px; line-height: 20px; font-weight: 450; letter-spacing: .01em; white-space: nowrap; color: var(--ink-muted); transition: color var(--dur-base) var(--ease-out); } .halo-modes__opt:hover { color: var(--ink); } .halo-modes__opt[aria-checked="true"] { color: var(--ice-bright); } .halo-modes--sm { height: var(--control-sm); padding: 3px; } .halo-modes--sm .halo-modes__thumb { top: 3px; bottom: 3px; } .halo-modes--sm .halo-modes__opt { padding-inline: var(--space-4); font-size: 14px; } /* ── 12. Поля ввода ──────────────────────────────────────────────────────── */ .halo-field { display: grid; gap: var(--space-2); } .halo-field__label { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); transition: color var(--dur-base) var(--ease-out); } .halo-field__hint { font-size: 13px; line-height: 18px; color: var(--ink-muted); display: inline-flex; gap: 6px; align-items: center; } .halo-field:focus-within .halo-field__label { color: var(--ice); } .halo-input, .halo-select select, .halo-textarea { width: 100%; height: var(--control-md); padding: 0 var(--space-4); border: 1px solid var(--line-control); border-radius: var(--radius-sm); background: var(--glass-recess); box-shadow: var(--recess); font: inherit; font-size: 16px; line-height: 24px; color: var(--ink); transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out); -webkit-appearance: none; appearance: none; } .halo-input::placeholder, .halo-textarea::placeholder { color: var(--ink-muted); opacity: 1; } .halo-input:hover, .halo-select select:hover, .halo-textarea:hover { border-color: var(--ink-muted); } .halo-input:focus, .halo-select select:focus, .halo-textarea:focus { outline: none; border-color: var(--ice); box-shadow: var(--recess), var(--glow-ice); background-color: var(--night-200); } .halo-input--lg, .halo-select--lg select { height: var(--control-lg); } .halo-textarea { height: auto; min-height: 120px; padding: 12px var(--space-4); resize: vertical; } .halo-select { position: relative; display: block; } .halo-select select { padding-right: 44px; cursor: pointer; } .halo-select select option { background: var(--night-300); color: var(--ink); } .halo-select::after { content: ""; position: absolute; right: 18px; top: 50%; width: 7px; height: 7px; pointer-events: none; border-right: 1.5px solid var(--ink-muted); border-bottom: 1.5px solid var(--ink-muted); transform: translateY(-70%) rotate(45deg); } .halo-field--error .halo-input, .halo-field--error .halo-select select, .halo-field--error .halo-textarea { border-color: var(--signal-crit); background-color: var(--signal-crit-veil); } .halo-field--error .halo-field__hint, .halo-field--error .halo-field__label { color: var(--signal-crit); } .halo-input:disabled { color: var(--ink-faint); background: var(--night-500); border-color: var(--night-500); box-shadow: none; cursor: not-allowed; } .halo-check { display: inline-grid; grid-template-columns: 20px 1fr; gap: var(--space-3); align-items: start; font-size: 14px; line-height: 22px; color: var(--ink-soft); cursor: pointer; } .halo-check input { -webkit-appearance: none; appearance: none; margin: 1px 0 0; width: 20px; height: 20px; flex: none; cursor: pointer; border: 1px solid var(--line-control); border-radius: var(--radius-xs); background: var(--glass-recess); box-shadow: var(--recess); display: grid; place-content: center; transition: background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .halo-check input::after { content: ""; width: 10px; height: 5px; margin-top: -3px; border-left: 2px solid var(--on-ice); border-bottom: 2px solid var(--on-ice); transform: rotate(-45deg) scale(0); transition: transform var(--dur-base) var(--ease-expo); } .halo-check input:checked { background: var(--ice); border-color: var(--ice); box-shadow: var(--glow-ice); } .halo-check input:checked::after { transform: rotate(-45deg) scale(1); } .halo-check a { color: var(--ice); } /* ── 13. Виджет ──────────────────────────────────────────────────────────── */ .halo-widget { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-rows: auto 1fr auto; min-height: 320px; padding: var(--space-5); border-radius: var(--radius-md); color: var(--ink); text-decoration: none; } .halo-widget.halo-glass { border-radius: var(--radius-md); } .halo-widget__head { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding-bottom: 10px; border-bottom: 1px solid var(--line); color: var(--ink-muted); } .halo-widget__label { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); } .halo-widget__art { position: absolute; inset: 0; z-index: -1; opacity: .9; transition: transform var(--dur-wake) var(--ease-expo), opacity var(--dur-base) var(--ease-out); } .halo-widget__art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--night-100) 0%, transparent 22%, transparent 44%, var(--night-100) 80%); opacity: .94; } .halo-widget__body { position: relative; z-index: 1; align-self: end; display: grid; gap: 6px; margin-top: var(--space-6); text-shadow: 0 0 18px var(--night-000), 0 0 2px var(--night-000); } .halo-widget__value { font-size: 44px; line-height: 44px; font-weight: 200; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .halo-widget__value small { font-size: 16px; font-weight: 400; letter-spacing: .02em; color: var(--ink-muted); margin-left: 6px; } .halo-widget__title { font-size: 20px; line-height: 26px; font-weight: 400; letter-spacing: -.005em; } .halo-widget__meta { font-size: 13px; line-height: 18px; color: var(--ink-muted); } .halo-widget__foot { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-4); padding-top: 10px; border-top: 1px solid var(--line); font-size: 13px; line-height: 18px; color: var(--ink-soft); } a.halo-widget:hover, .halo-widget--interactive:hover { transform: translateY(-4px); } a.halo-widget:hover .halo-widget__art, .halo-widget--interactive:hover .halo-widget__art { transform: scale(1.06); } .halo-widget.is-active { box-shadow: var(--edge-light), var(--glow-ice); } .halo-widget.is-active::before { background: linear-gradient(155deg, var(--ice-bright), var(--ice) 30%, var(--ice-veil) 65%, var(--ice) 100%); opacity: .7; } .halo-widget--warm .halo-widget__head { color: var(--cabin); } .halo-widget--warm .halo-widget__label { color: var(--cabin); } .halo-widget-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(210px, 1fr); gap: var(--space-3); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 2px; } .halo-widget-row::-webkit-scrollbar { display: none; } .halo-widget-row > * { scroll-snap-align: start; } /* ── 14. Дисплей (герой) ─────────────────────────────────────────────────── */ .halo-display { --rx: 0deg; --ry: 0deg; position: relative; padding: 10px; border-radius: var(--radius-xl); background: linear-gradient(180deg, var(--night-400), var(--night-000) 55%, var(--night-200)); box-shadow: inset 0 1px 0 var(--glass-edge), inset 0 0 0 1px var(--line), var(--shadow-deep); transform: perspective(2400px) rotateX(var(--rx)) rotateY(var(--ry)); transition: --rx var(--dur-glide) var(--ease-out), --ry var(--dur-glide) var(--ease-out); } .halo-display__screen { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: 76px minmax(0, 1fr); grid-template-rows: auto 1fr; min-height: 360px; border-radius: calc(var(--radius-xl) - 10px); background: radial-gradient(90% 80% at 85% 0%, var(--ice-haze), transparent 60%), radial-gradient(70% 70% at 0% 100%, var(--cabin-haze), transparent 65%), linear-gradient(180deg, var(--night-300), var(--night-100)); box-shadow: inset 0 0 0 1px var(--glass-edge); } /* Антибликовое покрытие экрана: широкое диагональное отражение */ .halo-display__screen::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; background: linear-gradient(118deg, var(--glass-top) 0%, transparent 34%), radial-gradient(60% 40% at 15% 0%, var(--glass-sheen), transparent 70%); } .halo-display__status { grid-column: 2; display: flex; align-items: center; justify-content: flex-end; gap: var(--space-4); padding: var(--space-3) var(--space-5) 0; font-size: 12px; line-height: 16px; letter-spacing: .04em; color: var(--ink-muted); } .halo-display__status .halo-icon { width: 14px; height: 14px; } .halo-display__rail { grid-row: 1 / span 2; display: grid; align-content: center; gap: var(--space-5); padding: var(--space-4) 0; border-right: 1px solid var(--line); } .halo-display__rail a { display: grid; justify-items: center; gap: 6px; color: var(--ink-muted); font-size: 9px; line-height: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; transition: color var(--dur-micro) var(--ease-out); } .halo-display__rail a:hover, .halo-display__rail a[aria-current] { color: var(--ice-bright); } .halo-display__rail a[aria-current] .halo-icon { filter: drop-shadow(0 0 6px var(--ice-glow)); } .halo-display__main { grid-column: 2; padding: var(--space-4) var(--space-5) var(--space-5); min-width: 0; } .halo-display + .halo-ambient { margin: var(--space-6) 8% 0; } .halo-display { container-type: inline-size; } @container (max-width: 720px) { .halo-display__screen { grid-template-columns: minmax(0, 1fr); } .halo-display__rail { display: none; } .halo-display__status, .halo-display__main { grid-column: 1; } .halo-display__main { padding-inline: var(--space-3); } } /* «Пробуждение»: экран вспыхивает из темноты, проходит свет, виджеты встают каскадом */ .halo-js .halo-display[data-halo-wake]:not(.is-awake) .halo-display__screen { filter: brightness(0); } .halo-js .halo-display[data-halo-wake]:not(.is-awake) .halo-display__main > :not(.halo-widget-row), .halo-js .halo-display[data-halo-wake]:not(.is-awake) .halo-widget-row > * { opacity: 0; transform: translate3d(0, 14px, 0); } .halo-display.is-awake .halo-display__screen { animation: halo-wake var(--dur-wake) var(--ease-expo) both; } .halo-display.is-awake .halo-display__main > :not(.halo-widget-row), .halo-display.is-awake .halo-widget-row > * { opacity: 1; transform: none; transition: opacity var(--dur-reveal) var(--ease-expo), transform var(--dur-reveal) var(--ease-expo); transition-delay: calc(400ms + var(--i, 0) * var(--dur-stagger)); } .halo-display.is-awake .halo-display__screen::before { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; background: linear-gradient(100deg, transparent 0 40%, var(--glass-sheen) 48%, var(--gloss-reflection) 50%, var(--glass-sheen) 52%, transparent 60%); background-size: 300% 100%; animation: halo-scan var(--dur-wake) var(--ease-in-out) both; } @keyframes halo-wake { 0% { filter: brightness(0); } 35% { filter: brightness(.6); } 100% { filter: brightness(1); } } @keyframes halo-scan { from { background-position: 100% 0; opacity: 1; } to { background-position: 0% 0; opacity: 0; } } /* ── 15. Шапка и навигация ───────────────────────────────────────────────── */ .halo-header { position: sticky; top: 0; z-index: var(--z-header); height: var(--header-h); display: flex; align-items: center; transition: background-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), -webkit-backdrop-filter var(--dur-base) var(--ease-out), backdrop-filter var(--dur-base) var(--ease-out); } .halo-header.is-scrolled, .halo-header--solid { background: linear-gradient(180deg, var(--glass-top), transparent), var(--glass-deep); -webkit-backdrop-filter: blur(var(--blur-glass-strong)) saturate(1.4); backdrop-filter: blur(var(--blur-glass-strong)) saturate(1.4); box-shadow: inset 0 -1px 0 var(--line); } .halo-header__inner { display: flex; align-items: center; gap: var(--space-8); width: 100%; } .halo-header__aside { margin-left: auto; display: flex; align-items: center; gap: var(--space-4); } .halo-header__phone { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--ink); font-size: 15px; line-height: 20px; font-weight: 400; letter-spacing: .02em; font-variant-numeric: tabular-nums; white-space: nowrap; } .halo-header__phone .halo-icon { width: var(--icon-sm); height: var(--icon-sm); color: var(--ice); } .halo-header__phone:hover { color: var(--ice-bright); } .halo-header__burger { display: none; } /* Основной знак «Линия в надписи»: BMW ━ SERVICE в одну строку. Живой текст Geologica + линия на CSS. Размер задаёт --halo-wm-size (кегль слов); отступы — в em от него, как в файлах знака: зазор 0.32em, линия 2.55em × 0.165em. */ .halo-wordmark { --halo-wm-size: 16px; display: inline-flex; align-items: center; gap: var(--space-4); color: var(--ink); text-decoration: none; } .halo-wordmark__mark { display: inline-flex; align-items: center; gap: .32em; padding: .35em 0; font-size: var(--halo-wm-size); } .halo-wordmark__word { display: block; padding: .32em 0; margin: -.32em -.30em -.32em 0; font-size: 1em; line-height: .7; font-weight: 400; letter-spacing: .30em; text-transform: uppercase; white-space: nowrap; color: var(--ink); } @supports ((-webkit-background-clip: text) or (background-clip: text)) { .halo-wordmark__word { background-image: linear-gradient(180deg, var(--crystal-hi), var(--crystal)); -webkit-background-clip: text; background-clip: text; color: transparent; } } .halo-wordmark__line { position: relative; flex: none; width: 2.55em; height: max(2px, .165em); margin-left: .02em; border-radius: 50%; background: linear-gradient(90deg, var(--ice), var(--ice-bright) 35%, var(--crystal-hi) 50%, var(--cabin-bright) 65%, var(--cabin)); } .halo-wordmark__line::before { content: ""; position: absolute; inset: -.42em -.25em; border-radius: 50%; pointer-events: none; background: linear-gradient(90deg, transparent, var(--ice-glow) 28%, var(--cabin-glow) 72%, transparent); filter: blur(.38em); opacity: .8; } .halo-wordmark__sep { width: 1px; height: 1.9em; font-size: var(--halo-wm-size); background: var(--line-strong); } .halo-wordmark__sub { font-size: 11px; line-height: 14px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); max-width: 13em; } .halo-wordmark--lg { --halo-wm-size: 22px; } .halo-wordmark--sm { --halo-wm-size: 13px; } /* Включение (data-halo-ignite): линия вырастает из центра за dur-wake, слова проявляются следом. Без JS и при «меньше движения» знак сразу горит. */ .halo-js .halo-wordmark[data-halo-ignite] .halo-wordmark__line { transform: scaleX(.02); opacity: 0; } .halo-js .halo-wordmark[data-halo-ignite] .halo-wordmark__word { opacity: .2; } .halo-js .halo-wordmark[data-halo-ignite].is-lit .halo-wordmark__line { transform: none; opacity: 1; transition: transform var(--dur-wake) var(--ease-expo), opacity var(--dur-base) var(--ease-out); } .halo-js .halo-wordmark[data-halo-ignite].is-lit .halo-wordmark__word { opacity: 1; transition: opacity var(--dur-reveal) var(--ease-expo) 420ms; } @media (prefers-reduced-motion: reduce) { .halo-js .halo-wordmark[data-halo-ignite] .halo-wordmark__line, .halo-js .halo-wordmark[data-halo-ignite] .halo-wordmark__word { transform: none; opacity: 1; transition: none; } } .halo-nav { display: flex; align-items: center; gap: var(--space-1); } .halo-nav__link { position: relative; display: inline-flex; align-items: center; height: var(--control-sm); padding: 0 var(--space-3); border-radius: var(--radius-sm); font-size: 15px; line-height: 20px; font-weight: 400; letter-spacing: .01em; color: var(--ink-soft); transition: color var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out); } .halo-nav__link::after { content: ""; position: absolute; left: var(--space-3); right: var(--space-3); bottom: -2px; height: 2px; border-radius: 2px; background: var(--ice); box-shadow: 0 0 10px var(--ice-glow); transform: scaleX(0); transition: transform var(--dur-glide) var(--ease-expo); } .halo-nav__link:hover { color: var(--ink); } .halo-nav__link[aria-current="page"] { color: var(--ice-bright); } .halo-nav__link[aria-current="page"]::after, .halo-nav__link:hover::after { transform: scaleX(1); } .halo-nav__link:hover::after { opacity: .5; } .halo-nav__link[aria-current="page"]:hover::after { opacity: 1; } /* Мобильное меню */ .halo-menu { position: fixed; inset: 0; z-index: calc(var(--z-header) - 1); display: grid; align-content: start; gap: var(--space-2); padding: calc(var(--header-h) + var(--space-6)) var(--space-6) var(--space-10); background: var(--glass-deep); -webkit-backdrop-filter: blur(var(--blur-glass-strong)); backdrop-filter: blur(var(--blur-glass-strong)); opacity: 0; visibility: hidden; transition: opacity var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base); } .halo-menu a { font-size: 32px; line-height: 44px; font-weight: 300; letter-spacing: -.015em; color: var(--ink); opacity: 0; transform: translate3d(0, 12px, 0); transition: opacity var(--dur-glide) var(--ease-expo), transform var(--dur-glide) var(--ease-expo); transition-delay: calc(var(--i, 0) * var(--dur-stagger)); } .halo-menu.is-open { opacity: 1; visibility: visible; transition: opacity var(--dur-base) var(--ease-out); } .halo-menu.is-open a { opacity: 1; transform: none; } .halo-header { container-type: inline-size; container-name: halo-header; } @container halo-header (max-width: 1240px) { .halo-header .halo-open { display: none; } } @container halo-header (max-width: 1080px) { .halo-header .halo-nav__link--minor { display: none; } } @container halo-header (max-width: 960px) { .halo-nav { display: none; } .halo-header__burger { display: inline-flex; } } @container halo-header (max-width: 760px) { .halo-header .halo-msg { display: none; } } @container halo-header (max-width: 600px) { .halo-header__phone { display: none; } .halo-wordmark__sub, .halo-wordmark__sep { display: none; } .halo-header .halo-chip { display: none; } .halo-header__inner { gap: var(--space-4); } .halo-header .halo-wordmark { --halo-wm-size: 13px; } } /* ── 16. Карточка услуги ─────────────────────────────────────────────────── */ .halo-service { display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; border-radius: var(--radius-md); color: var(--ink); text-decoration: none; } .halo-service.halo-glass, .halo-service.halo-alcantara { border-radius: var(--radius-md); } .halo-service__art { position: relative; height: 150px; overflow: hidden; border-radius: calc(var(--radius-md) - 1px) calc(var(--radius-md) - 1px) 0 0; transition: transform var(--dur-wake) var(--ease-expo); } .halo-service__art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, var(--night-100)); opacity: .55; } .halo-service__body { display: grid; gap: var(--space-2); align-content: start; padding: var(--space-5) var(--space-6) var(--space-4); } .halo-service__kicker { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); } .halo-service__title { font-size: 22px; line-height: 28px; font-weight: 400; letter-spacing: -.005em; } .halo-service__text { font-size: 14px; line-height: 22px; color: var(--ink-soft); } .halo-service__foot { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-6) var(--space-5); border-top: 1px solid var(--line); margin-inline: 0; } .halo-service__time { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; line-height: 18px; color: var(--ink-muted); } .halo-service__go { margin-left: auto; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-full); color: var(--ink-soft); box-shadow: inset 0 0 0 1px var(--line-strong); transition: color var(--dur-micro) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), transform var(--dur-glide) var(--ease-expo); } .halo-service--wide { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); grid-template-rows: auto auto; } .halo-service--wide .halo-service__art { grid-row: span 2; height: auto; min-height: 220px; border-radius: calc(var(--radius-md) - 1px) 0 0 calc(var(--radius-md) - 1px); } .halo-service--wide .halo-service__body { align-self: end; padding-top: var(--space-8); } @media (max-width: 600px) { .halo-service--wide { grid-template-columns: 1fr; } .halo-service--wide .halo-service__art { grid-row: auto; min-height: 160px; border-radius: calc(var(--radius-md) - 1px) calc(var(--radius-md) - 1px) 0 0; } } a.halo-service:hover, .halo-service--interactive:hover { transform: translateY(-4px); } a.halo-service:hover .halo-service__art, .halo-service--interactive:hover .halo-service__art { transform: scale(1.04); } a.halo-service:hover .halo-service__go, .halo-service--interactive:hover .halo-service__go { color: var(--ice-bright); box-shadow: inset 0 0 0 1px var(--ice), var(--glow-ice); transform: translate(2px, -2px); } .halo-price { display: inline-flex; align-items: baseline; gap: 6px; font-size: 20px; line-height: 24px; font-weight: 300; letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; } .halo-price__from { font-size: 13px; font-weight: 400; letter-spacing: .02em; color: var(--ink-muted); } /* ── 17. Показатель (Readout) ────────────────────────────────────────────── */ .halo-readout { position: relative; display: inline-grid; justify-items: center; align-content: center; min-width: 180px; padding: var(--space-4); text-align: center; } .halo-readout__arc { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .halo-readout__arc .track { fill: none; stroke: var(--line-strong); stroke-width: 2; } .halo-readout__arc .ticks { fill: none; stroke: var(--ink-faint); stroke-width: 1; } .halo-readout__arc .value { fill: none; stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 6px var(--ice-glow)); transition: stroke-dashoffset var(--dur-wake) var(--ease-expo); } .halo-readout__value { position: relative; display: flex; align-items: baseline; gap: 6px; color: var(--ink); } .halo-readout__num { font-size: 56px; line-height: 56px; font-weight: 200; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .halo-readout__unit { font-size: 16px; line-height: 20px; font-weight: 400; letter-spacing: .02em; color: var(--ink-muted); } .halo-readout__label { position: relative; margin-top: var(--space-2); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); } .halo-readout__meta { position: relative; margin-top: 2px; font-size: 13px; line-height: 18px; color: var(--ink-soft); } .halo-readout--gauge { width: 220px; aspect-ratio: 1; padding-top: var(--space-6); } .halo-readout--warm .halo-readout__arc .value { filter: drop-shadow(0 0 6px var(--cabin-glow)); } /* ── 18. Прайс-лист ──────────────────────────────────────────────────────── */ .halo-prices { width: 100%; border-collapse: collapse; table-layout: fixed; font-variant-numeric: tabular-nums; } .halo-prices caption { caption-side: top; text-align: left; padding: 0 0 var(--space-3); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); } .halo-prices th, .halo-prices td { padding: var(--space-4) 0; border-bottom: 1px solid var(--line); vertical-align: baseline; text-align: left; font-weight: 400; } .halo-prices tbody tr { transition: background-color var(--dur-micro) var(--ease-out); } .halo-prices tbody tr:hover { background: linear-gradient(90deg, transparent, var(--glass-fill-hover) 12%, var(--glass-fill-hover) 88%, transparent); } .halo-prices th { font-size: 16px; line-height: 24px; color: var(--ink); padding-right: var(--space-6); } .halo-prices__group th { padding: var(--space-6) 0 var(--space-2); border-bottom: 1px solid var(--line-strong); font-size: 13px; line-height: 18px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ice); } .halo-prices__group th a { color: var(--ice); } .halo-prices__group th a:hover { color: var(--ice-bright); } .halo-prices tbody tr.halo-prices__group:hover { background: none; } .halo-prices th a { color: var(--ink); } .halo-prices th a:hover { color: var(--ice-bright); } .halo-prices__note { display: block; font-size: 13px; line-height: 18px; color: var(--ink-muted); margin-top: 2px; } .halo-prices__time { width: 120px; font-size: 14px; line-height: 20px; color: var(--ink-muted); white-space: nowrap; padding-right: var(--space-8) !important; text-align: right !important; } .halo-prices__price { width: 132px; font-size: 18px; line-height: 24px; font-weight: 300 !important; color: var(--ink); white-space: nowrap; text-align: right !important; } .halo-prices__price small { font-size: 13px; color: var(--ink-muted); } @media (max-width: 600px) { .halo-prices__time { display: none; } .halo-prices__price { width: 104px; font-size: 16px; } .halo-prices th { padding-right: var(--space-3); font-size: 15px; } } /* ── 19. Шаги / статус работ ─────────────────────────────────────────────── */ .halo-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); position: relative; container-type: inline-size; } .halo-steps__item { position: relative; display: grid; justify-items: center; align-content: start; gap: var(--space-2); text-align: center; padding: 0 var(--space-2); } /* Связка к следующему шагу: пройденная — светится, свет «перетекает» по очереди */ .halo-steps__item::before { content: ""; position: absolute; top: 9px; left: 50%; width: 100%; height: 2px; border-radius: 2px; background: var(--line-strong); transform-origin: 0 50%; } .halo-steps__item::after { content: ""; position: absolute; top: 9px; left: 50%; width: 100%; height: 2px; border-radius: 2px; opacity: 0; background: linear-gradient(90deg, var(--ice), var(--ice-bright)); box-shadow: 0 0 12px var(--ice-glow); transform-origin: 0 50%; } .halo-steps__item:last-child::before, .halo-steps__item:last-child::after { display: none; } .halo-steps__item.is-done::after { opacity: 1; } .halo-js [data-halo-steps]:not(.is-in) .halo-steps__item.is-done::after { transform: scaleX(0); } .halo-js [data-halo-steps].is-in .halo-steps__item.is-done::after { transition: transform var(--dur-glide) var(--ease-in-out); transition-delay: calc(var(--i, 0) * var(--dur-glide) * .6); } .halo-steps__node { position: relative; z-index: 1; width: 20px; height: 20px; display: grid; place-items: center; } .halo-steps__node::before { content: ""; width: 12px; height: 12px; transform: rotate(45deg); border-radius: 2px; background: var(--night-100); box-shadow: inset 0 0 0 1.5px var(--line-control); transition: background-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .halo-steps__title { font-size: 15px; line-height: 20px; font-weight: 400; color: var(--ink-muted); } .halo-steps__meta { font-size: 12px; line-height: 16px; color: var(--ink-muted); } .halo-steps__item.is-done .halo-steps__node::before { background: var(--ice); box-shadow: 0 0 10px var(--ice-glow); } .halo-steps__item.is-done .halo-steps__title { color: var(--ink-soft); } .halo-steps__item.is-current .halo-steps__node::before { background: var(--night-100); box-shadow: inset 0 0 0 2px var(--ice-bright), 0 0 14px var(--ice-glow); animation: halo-breathe 2.6s var(--ease-breathe) infinite; } .halo-steps__item.is-current .halo-steps__title { color: var(--ice-bright); font-weight: 500; } @container (max-width: 560px) { .halo-steps:not(.halo-steps--vertical) .halo-steps__title { font-size: 13px; line-height: 18px; } .halo-steps:not(.halo-steps--vertical) .halo-steps__meta { display: none; } } /* Вертикальные шаги: модификатор --vertical, а на телефоне — всегда */ .halo-steps--vertical { grid-auto-flow: row; grid-auto-columns: auto; gap: var(--space-5); } .halo-steps--vertical .halo-steps__item { grid-template-columns: 20px 1fr; justify-items: start; text-align: left; column-gap: var(--space-4); row-gap: 2px; padding: 0; } .halo-steps--vertical .halo-steps__node { grid-row: span 2; } .halo-steps--vertical .halo-steps__item::before, .halo-steps--vertical .halo-steps__item::after { top: 10px; left: 9px; width: 2px; height: calc(100% + var(--space-5)); transform-origin: 50% 0; } .halo-steps--vertical .halo-steps__item::after { background: linear-gradient(180deg, var(--ice), var(--ice-bright)); } .halo-js .halo-steps--vertical[data-halo-steps]:not(.is-in) .halo-steps__item.is-done::after { transform: scaleY(0); } @media (max-width: 600px) { .halo-steps { grid-auto-flow: row; grid-auto-columns: auto; gap: var(--space-5); } .halo-steps .halo-steps__item { grid-template-columns: 20px 1fr; justify-items: start; text-align: left; column-gap: var(--space-4); row-gap: 2px; padding: 0; } .halo-steps .halo-steps__node { grid-row: span 2; } .halo-steps .halo-steps__item::before, .halo-steps .halo-steps__item::after { top: 10px; left: 9px; width: 2px; height: calc(100% + var(--space-5)); transform-origin: 50% 0; } .halo-steps .halo-steps__item::after { background: linear-gradient(180deg, var(--ice), var(--ice-bright)); } .halo-js .halo-steps[data-halo-steps]:not(.is-in) .halo-steps__item.is-done::after { transform: scaleY(0); } .halo-steps:not(.halo-steps--vertical) .halo-steps__title { font-size: 15px; line-height: 20px; } .halo-steps:not(.halo-steps--vertical) .halo-steps__meta { display: block; } } /* ── 20. Аккордеон (FAQ) ─────────────────────────────────────────────────── */ .halo-acc { display: grid; gap: var(--space-2); } .halo-acc__item { border-radius: var(--radius-md); box-shadow: inset 0 0 0 1px var(--line); transition: background-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .halo-acc__item[open] { background: linear-gradient(180deg, var(--glass-top), transparent 60%), var(--glass-fill); box-shadow: inset 0 0 0 1px var(--glass-edge), var(--shadow-rest); } .halo-acc__q { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-5) var(--space-6); cursor: pointer; border-radius: var(--radius-md); font-size: 18px; line-height: 26px; font-weight: 400; color: var(--ink); } .halo-acc__q::-webkit-details-marker { display: none; } .halo-acc__q:hover { color: var(--ice-bright); } .halo-acc__chev { position: relative; flex: none; width: 32px; height: 32px; border-radius: var(--radius-full); box-shadow: inset 0 0 0 1px var(--line-strong); transition: transform var(--dur-glide) var(--ease-expo), box-shadow var(--dur-base) var(--ease-out); } .halo-acc__chev::before, .halo-acc__chev::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; margin: -0.75px 0 0 -6px; background: currentColor; border-radius: 1px; transition: transform var(--dur-glide) var(--ease-expo); } .halo-acc__chev::after { transform: rotate(90deg); } .halo-acc__item[open] .halo-acc__chev { color: var(--ice-bright); box-shadow: inset 0 0 0 1px var(--ice), var(--glow-ice); } .halo-acc__item[open] .halo-acc__chev::after { transform: rotate(0deg); } .halo-acc__a { padding: 0 var(--space-6) var(--space-6); max-width: 760px; color: var(--ink-soft); font-size: 16px; line-height: 26px; overflow: hidden; } .halo-acc__a p + p { margin-top: var(--space-3); } /* ── 21. Кристалл (генеративный арт граней) ──────────────────────────────── */ :where(.halo-crystal) { position: relative; overflow: hidden; background: radial-gradient(120% 90% at 70% 30%, var(--crystal-core), var(--night-000)); } .halo-widget__art.halo-crystal, .halo-service__art.halo-crystal { overflow: hidden; } .halo-crystal > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } /* ── 22. Фото ────────────────────────────────────────────────────────────── */ /* Свои фото сервиса — «ночная» обработка: приглушённая насыщенность, затемнение, холодная дымка, затухание к night-100. Номера машин закрыты заглушками ещё в файле (группа ассетов Photos). Размеры картинки — всегда в разметке (width/height), чтобы ничего не прыгало. */ .halo-photo { position: relative; overflow: hidden; margin: 0; border-radius: var(--radius-md); background: var(--night-300); isolation: isolate; } .halo-photo img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.8) contrast(1.06) brightness(.78); transition: transform var(--dur-wake) var(--ease-expo), filter var(--dur-glide) var(--ease-out); } .halo-photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; background: linear-gradient(180deg, transparent 48%, color-mix(in srgb, var(--night-100) 92%, transparent)), linear-gradient(0deg, var(--ice-haze), var(--ice-haze)); } .halo-photo--clean::after { background: linear-gradient(180deg, transparent 70%, color-mix(in srgb, var(--night-100) 70%, transparent)); } .halo-photo--clean img { filter: saturate(.9) contrast(1.04) brightness(.9); } .halo-photo--wide { aspect-ratio: 16 / 9; } .halo-photo--classic { aspect-ratio: 4 / 3; } .halo-photo--tall { aspect-ratio: 4 / 5; } .halo-photo--square { aspect-ratio: 1; } .halo-photo__cap { position: absolute; left: var(--space-4); right: var(--space-4); bottom: var(--space-3); z-index: 2; display: flex; gap: var(--space-2); align-items: baseline; font-size: 13px; line-height: 18px; color: var(--ink-soft); text-shadow: 0 0 12px var(--night-000); } .halo-photo__cap b { font-weight: 500; color: var(--ink); } a .halo-photo img, a.halo-photo img { will-change: transform; } a:hover .halo-photo img, a.halo-photo:hover img { transform: scale(1.035); filter: saturate(.9) contrast(1.06) brightness(.86); } .halo-photo__tag { position: absolute; left: var(--space-3); top: var(--space-3); z-index: 2; } .halo-photo--empty { display: grid; place-items: center; min-height: 220px; background: radial-gradient(70% 60% at 70% 20%, var(--ice-haze), transparent 70%), repeating-linear-gradient(135deg, var(--night-300) 0 12px, var(--night-200) 12px 24px); } .halo-photo--empty::after { display: none; } .halo-photo--empty .halo-photo__need { display: grid; justify-items: center; gap: var(--space-2); padding: var(--space-6); text-align: center; font-size: 13px; line-height: 18px; color: var(--ink-muted); } .halo-photo--empty .halo-photo__need .halo-icon { color: var(--ink-soft); width: var(--icon-lg); height: var(--icon-lg); } /* Галерея работ: три кадра с подписями; на телефоне — лента с прокруткой */ .halo-gallery { display: grid; gap: var(--space-4); grid-template-columns: repeat(3, minmax(0, 1fr)); } .halo-gallery .halo-photo { aspect-ratio: 4 / 3; } .halo-gallery--feature { grid-template-columns: 2fr 1fr; } .halo-gallery--feature .halo-photo { aspect-ratio: 4 / 3; } .halo-gallery--feature .halo-photo:first-child { grid-row: span 2; aspect-ratio: auto; } .halo-gallery--feature .halo-photo:first-child img { position: absolute; inset: 0; } @media (max-width: 900px) { .halo-gallery, .halo-gallery--feature { grid-template-columns: none; grid-template-rows: none; grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(-1 * var(--space-4)); padding-inline: var(--space-4); } .halo-gallery::-webkit-scrollbar { display: none; } .halo-gallery > * { scroll-snap-align: start; } .halo-gallery--feature .halo-photo, .halo-gallery--feature .halo-photo:first-child { grid-row: auto; aspect-ratio: 4 / 3; } } /* ── 23. Подвал ──────────────────────────────────────────────────────────── */ .halo-footer { border-radius: var(--radius-xl) var(--radius-xl) 0 0; padding: var(--space-16) 0 var(--space-10); } .halo-footer__cols { display: grid; gap: var(--space-8); grid-template-columns: 1.5fr repeat(3, 1fr); } .halo-footer__brand { display: grid; gap: var(--space-5); align-content: start; } .halo-footer__about { font-size: 15px; line-height: 24px; color: var(--ink-soft); max-width: 30ch; } .halo-footer__title { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: var(--space-3); } .halo-footer__col a, .halo-footer__col p { display: block; color: var(--ink-soft); font-size: 15px; line-height: 30px; } .halo-footer__col a:hover { color: var(--ink); } .halo-footer__col .halo-tnum { font-variant-numeric: tabular-nums; } .halo-footer__links { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); } .halo-footer__legal { margin-top: var(--space-12); padding-top: var(--space-6); border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: var(--space-3) var(--space-6); flex-wrap: wrap; font-size: 13px; line-height: 20px; color: var(--ink-muted); } .halo-footer__legal a { color: var(--ink-soft); } .halo-footer__legal a:hover { color: var(--ink); } .halo-footer__legal p { display: flex; flex-wrap: wrap; gap: 0 var(--space-4); } .halo-footer__dealer { color: var(--ink-soft); } /* Знак подвала «Корма»: название между двумя L-фонарями — как надпись на крышке багажника. Только в подвале. Размер — --halo-stern-size (кегль надписи). data-halo-brake: сначала габариты вполсилы, у подвала в поле зрения — полный свет. */ .halo-stern { --halo-stern-size: 13px; display: inline-flex; align-items: center; gap: 1.3em; font-size: var(--halo-stern-size); color: var(--ink); text-decoration: none; } .halo-stern__name { padding: .32em 0; margin: -.32em -.36em -.32em 0; font-size: 1em; line-height: .7; font-weight: 500; letter-spacing: .36em; text-transform: uppercase; white-space: nowrap; color: var(--crystal-hi); } .halo-stern__lamp { position: relative; flex: none; box-sizing: border-box; width: 1.3em; height: 1.62em; margin-top: .14em; border: 0 solid var(--tail); border-left-width: .2em; border-bottom-width: .2em; border-bottom-left-radius: .34em; filter: drop-shadow(0 0 .08em var(--tail)) drop-shadow(0 0 .55em var(--tail-glow)); } .halo-stern__lamp::after { content: ""; position: absolute; left: .15em; top: .44em; right: 0; bottom: .15em; box-sizing: border-box; border: 0 solid var(--tail); border-left-width: .2em; border-bottom-width: .2em; border-bottom-left-radius: .2em; } .halo-stern__lamp, .halo-stern__lamp::after { box-shadow: inset .05em -.05em 0 var(--tail-core); } .halo-stern__lamp--r { transform: scaleX(-1); } .halo-stern--lg { --halo-stern-size: 16px; } .halo-js .halo-stern[data-halo-brake] .halo-stern__lamp { opacity: .45; filter: drop-shadow(0 0 .06em var(--tail)); } .halo-js .halo-stern[data-halo-brake].is-braking .halo-stern__lamp { opacity: 1; filter: drop-shadow(0 0 .08em var(--tail)) drop-shadow(0 0 .55em var(--tail-glow)); transition: opacity var(--dur-base) var(--ease-out), filter var(--dur-reveal) var(--ease-out); } @media (prefers-reduced-motion: reduce) { .halo-js .halo-stern[data-halo-brake] .halo-stern__lamp { opacity: 1; filter: drop-shadow(0 0 .08em var(--tail)) drop-shadow(0 0 .55em var(--tail-glow)); transition: none; } } @media (max-width: 900px) { .halo-footer__cols { grid-template-columns: 1fr 1fr; } .halo-footer__brand { grid-column: 1 / -1; } } @media (max-width: 600px) { .halo-footer__cols { grid-template-columns: 1fr; } } /* ── 24. Появление при прокрутке ─────────────────────────────────────────── */ .halo-js [data-halo-reveal]:not([data-halo-reveal="stagger"]), .halo-js [data-halo-reveal="stagger"] > * { opacity: 0; transform: translate3d(0, 18px, 0); filter: blur(6px); } .halo-js [data-halo-reveal].is-in:not([data-halo-reveal="stagger"]), .halo-js [data-halo-reveal="stagger"].is-in > * { opacity: 1; transform: none; filter: none; transition: opacity var(--dur-reveal) var(--ease-expo), transform var(--dur-reveal) var(--ease-expo), filter var(--dur-reveal) var(--ease-out); transition-delay: calc(var(--i, 0) * var(--dur-stagger)); } /* ── 25. Наклон (tilt) ───────────────────────────────────────────────────── */ [data-halo-tilt]:not(.halo-display) { transform: perspective(1200px) rotateX(var(--rx)) rotateY(var(--ry)); transition: --rx var(--dur-glide) var(--ease-out), --ry var(--dur-glide) var(--ease-out), transform var(--dur-glide) var(--ease-expo); } /* ── 26. Хлебные крошки ──────────────────────────────────────────────────── */ /* Все страницы, кроме главной: «Главная → страница», у кейса — «Главная → Примеры работ → кейс». Разделитель — тонкая косая черта. */ .halo-crumbs { min-height: var(--crumbs-h); display: flex; align-items: center; } .halo-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; font-size: 13px; line-height: 18px; color: var(--ink-muted); } .halo-crumbs li { display: inline-flex; align-items: center; min-width: 0; } .halo-crumbs li + li::before { content: ""; width: 1px; height: 12px; margin: 0 12px; background: var(--line-control); transform: skewX(-20deg); flex: none; } .halo-crumbs a { color: var(--ink-soft); padding: 6px 0; transition: color var(--dur-micro) var(--ease-out); } .halo-crumbs a:hover { color: var(--ice-bright); } .halo-crumbs [aria-current="page"] { color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60vw; } /* ── 27. «Только BMW и MINI» ─────────────────────────────────────────────── */ /* Отсечка на каждой странице работы и в герое главной: видна до звонка. */ .halo-only { display: inline-flex; align-items: center; gap: 10px; height: 32px; padding: 0 14px 0 10px; border-radius: var(--radius-full); font-size: 13px; line-height: 16px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); background: linear-gradient(90deg, var(--ice-veil), var(--cabin-veil)); box-shadow: inset 0 0 0 1px var(--glass-edge); white-space: nowrap; } .halo-only::before { content: ""; width: 18px; height: 3px; border-radius: 50%; background: linear-gradient(90deg, var(--ice), var(--crystal-hi) 50%, var(--cabin)); box-shadow: 0 0 10px var(--ice-glow); } .halo-only--lg { height: 40px; padding: 0 18px 0 14px; font-size: 14px; } /* ── 28. Факты: цена, время, гарантия ─────────────────────────────────────── */ /* Светящиеся цифры — живой текст (выделяется мышью), не картинка. */ .halo-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3); margin: 0; } .halo-facts > div { display: grid; gap: 4px; align-content: start; padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); background: linear-gradient(180deg, var(--glass-top), transparent 60%), var(--glass-fill); box-shadow: var(--edge-light); } .halo-facts dt { order: 2; font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); } .halo-facts dd { order: 1; margin: 0; display: flex; align-items: baseline; gap: 6px; font-size: 32px; line-height: 38px; font-weight: 200; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; text-shadow: 0 0 22px var(--ice-glow); } .halo-facts dd small { font-size: 14px; line-height: 20px; font-weight: 400; letter-spacing: .02em; color: var(--ink-muted); text-shadow: none; } .halo-facts__note { order: 3; font-size: 13px; line-height: 18px; color: var(--ink-soft); } /* ── 29. Герой страниц ───────────────────────────────────────────────────── */ /* Текст виден с первого кадра: никаких «появлений» у заголовка и абзаца. Анимируются только свет, линия и стрелка спидометра. */ .halo-hero { position: relative; isolation: isolate; overflow: clip; } .halo-hero__media { position: absolute; inset: 0 0 0 28%; z-index: -1; margin: 0; } .halo-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; display: block; filter: saturate(.85) contrast(1.05) brightness(.8); } .halo-hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--night-100) 0%, color-mix(in srgb, var(--night-100) 80%, transparent) 14%, color-mix(in srgb, var(--night-100) 25%, transparent) 42%, transparent 64%), linear-gradient(180deg, color-mix(in srgb, var(--night-100) 55%, transparent) 0%, transparent 18%, transparent 60%, var(--night-100) 100%); } .halo-hero__inner { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "copy gauge" "meta gauge" "rail rail"; column-gap: var(--space-10); row-gap: var(--space-6); align-items: end; min-height: min(780px, calc(100svh - var(--header-h))); padding-block: var(--space-16) var(--space-10); } .halo-hero__copy { grid-area: copy; align-self: center; display: grid; gap: var(--space-5); max-width: 700px; } .halo-hero__copy > .halo-only, .halo-hero__copy > .halo-chip { justify-self: start; } .halo-hero__lead { font-size: 19px; line-height: 30px; font-weight: 300; color: var(--ink-soft); max-width: 34em; } .halo-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; } .halo-hero__meta { grid-area: meta; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-6); font-size: 14px; line-height: 20px; color: var(--ink-soft); } .halo-hero__meta span:not(.halo-chip):not(.halo-chip *), .halo-hero__meta > a { display: inline-flex; align-items: center; gap: var(--space-2); } .halo-hero__meta > a .halo-icon, .halo-hero__meta > span > .halo-icon { width: var(--icon-sm); height: var(--icon-sm); color: var(--ice); } .halo-hero__meta > a { color: var(--ink-soft); } .halo-hero__meta > a:hover { color: var(--ice-bright); } .halo-hero__gauge { grid-area: gauge; align-self: end; } .halo-hero__rail { grid-area: rail; min-width: 0; } /* Страница работы: текст слева, кадр работы справа */ .halo-hero--split .halo-hero__inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); grid-template-areas: none; align-items: center; gap: var(--space-12); min-height: 0; padding-block: var(--space-8) var(--space-16); } .halo-hero--split .halo-hero__copy { grid-area: auto; } .halo-hero--split .halo-hero__shot { position: relative; margin: 0; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 1; max-height: 560px; justify-self: end; width: 100%; box-shadow: var(--edge-light), var(--shadow-deep); } .halo-hero--split .halo-hero__shot.halo-photo--classic { aspect-ratio: 4 / 3; } .halo-hero--split .halo-hero__shot::before { content: ""; position: absolute; inset: auto 10% -1px; height: 2px; z-index: 3; background: linear-gradient(90deg, transparent, var(--ice), var(--crystal-hi), var(--cabin), transparent); box-shadow: 0 0 18px var(--ice-glow); } @media (max-width: 900px) { .halo-hero__media { inset: 0 0 auto 0; height: 46vh; min-height: 300px; } .halo-hero__media::after { background: linear-gradient(180deg, color-mix(in srgb, var(--night-100) 45%, transparent) 0%, transparent 22%, color-mix(in srgb, var(--night-100) 55%, transparent) 62%, var(--night-100) 100%); } .halo-hero__inner { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "rail" "meta" "gauge"; min-height: 0; row-gap: var(--space-6); padding-block: max(28vh, 200px) var(--space-8); } .halo-hero__gauge { justify-self: center; } .halo-hero--split .halo-hero__inner { grid-template-columns: 1fr; grid-template-areas: none; gap: var(--space-6); padding-block: var(--space-4) var(--space-10); } .halo-hero--split .halo-hero__shot { order: -1; aspect-ratio: 16 / 9; max-height: none; justify-self: stretch; } .halo-hero__lead { font-size: 17px; line-height: 27px; } } @media (max-width: 600px) { .halo-hero__actions { display: none; } .halo-facts { grid-template-columns: 1fr 1fr; } .halo-facts > div:first-child:nth-last-child(odd) { grid-column: 1 / -1; } .halo-facts dd { font-size: 28px; line-height: 34px; } .halo-hero__inner { padding-block: max(21vh, 160px) var(--space-6); row-gap: var(--space-5); } .halo-hero--home .halo-hero__copy { gap: var(--space-4); } .halo-hero--home .halo-hero__lead { font-size: 16px; line-height: 25px; } .halo-hero--home .t-display { font-size: 38px; line-height: 42px; } } /* ── 30. Спидометр ───────────────────────────────────────────────────────── */ /* data-halo-speedo: шкала 270°, стрелка и светящаяся дуга. Цифры в центре — живой текст. Режимы: "rating" — при входе стрелка пробегает шкалу до упора и встаёт на значение (как самопроверка приборов при пуске); "scroll" — стрелка показывает, сколько страницы пройдено. Шкала — декор: aria-hidden; смысл — в тексте рядом. */ .halo-speedo { --size: 280px; --p: 0; position: relative; width: var(--size); aspect-ratio: 1; display: grid; place-items: center; color: var(--ink); } .halo-speedo__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .halo-speedo__svg .track { fill: none; stroke: var(--line-strong); stroke-width: 1.2; } .halo-speedo__svg .tick { stroke: var(--ink-faint); stroke-width: .8; } .halo-speedo__svg .tick--major { stroke: var(--ink-muted); stroke-width: 1.4; } .halo-speedo__svg .num { fill: var(--ink-muted); font: 500 7px/1 var(--font-sans); letter-spacing: .04em; text-anchor: middle; dominant-baseline: middle; } .halo-speedo__svg .red { fill: none; stroke: var(--tail); stroke-width: 2.4; opacity: .75; } .halo-speedo__svg .arc { fill: none; stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 4px var(--ice-glow)); } .halo-speedo__svg .needle { transform-origin: 50px 50px; transform: rotate(calc(-135deg + var(--p) * 270deg)); } .halo-speedo__svg .needle path { fill: var(--cabin-bright); filter: drop-shadow(0 0 3px var(--cabin-glow)); } .halo-speedo__svg .hub { fill: var(--night-300); stroke: var(--glass-edge); stroke-width: .8; } .halo-speedo__read { position: relative; z-index: 1; display: grid; justify-items: center; gap: 2px; text-align: center; margin-top: 8%; } .halo-speedo__num { font-size: calc(var(--size) * .2); line-height: 1; font-weight: 200; letter-spacing: -.03em; font-variant-numeric: tabular-nums; text-shadow: 0 0 22px var(--ice-glow); } .halo-speedo__unit { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); } .halo-speedo__meta { font-size: 13px; line-height: 18px; color: var(--ink-soft); } .halo-speedo__meta a { color: var(--ink-soft); text-decoration: underline; text-decoration-color: var(--line-control); text-underline-offset: 3px; } .halo-speedo__meta a:hover { color: var(--ice-bright); text-decoration-color: var(--ice); } .halo-speedo--glass { padding: 0; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--night-300) 92%, transparent), color-mix(in srgb, var(--night-100) 60%, transparent) 88%, transparent); box-shadow: inset 0 0 0 1px var(--glass-edge), var(--shadow-float); -webkit-backdrop-filter: blur(var(--blur-glass)); backdrop-filter: blur(var(--blur-glass)); } .halo-speedo.is-sweeping .needle, .halo-speedo.is-sweeping .arc { transition: none; } /* Спидометр прокрутки: маленький, в углу; только там, где есть поле справа и он не закрывает текст */ .halo-speedo--dock { --size: 76px; position: fixed; right: var(--space-5); bottom: var(--space-5); z-index: var(--z-dock); pointer-events: none; opacity: 0; transform: translateY(12px); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-glide) var(--ease-expo); } .halo-speedo--dock.is-on { opacity: 1; transform: none; } .halo-speedo--dock .halo-speedo__num { font-size: 19px; font-weight: 300; text-shadow: 0 0 10px var(--ice-glow); } .halo-speedo--dock .halo-speedo__unit { font-size: 8px; line-height: 10px; letter-spacing: .12em; } .halo-speedo--dock .halo-speedo__read { margin-top: 18%; } .halo-speedo--dock .num { display: none; } @media (max-width: 1399px) { .halo-speedo--dock { display: none; } } /* ── 31. Рейтинг и доверие ───────────────────────────────────────────────── */ /* Цифры площадок — всегда с датой и ссылкой на карточку: счётчики растут. */ .halo-rating { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 10px; border-radius: var(--radius-full); color: var(--ink); background: var(--glass-fill); box-shadow: inset 0 0 0 1px var(--glass-edge); font-size: 14px; line-height: 20px; white-space: nowrap; } .halo-rating__star { color: var(--cabin-bright); text-shadow: 0 0 10px var(--cabin-glow); font-size: 15px; } .halo-rating__value { font-weight: 500; font-variant-numeric: tabular-nums; } .halo-rating__src { color: var(--ink-soft); } .halo-rating__date { color: var(--ink-muted); font-size: 12px; } a.halo-rating:hover { box-shadow: inset 0 0 0 1px var(--cabin), var(--glow-cabin); } .halo-trust { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-10); align-items: center; padding: var(--space-10); border-radius: var(--radius-lg); } .halo-trust__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); } .halo-trust__list li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--space-4); align-items: start; padding-bottom: var(--space-4); border-bottom: 1px solid var(--line); } .halo-trust__list li:last-child { border-bottom: 0; padding-bottom: 0; } .halo-trust__mark { width: 40px; height: 40px; border-radius: var(--radius-sm); display: grid; place-items: center; background: var(--cabin-veil); color: var(--cabin-bright); } .halo-trust__title { display: block; font-size: 17px; line-height: 24px; color: var(--ink); } .halo-trust__meta { display: block; margin-top: 2px; font-size: 13px; line-height: 20px; color: var(--ink-muted); } .halo-trust__meta a { color: var(--ink-soft); text-decoration: underline; text-decoration-color: var(--line-control); text-underline-offset: 3px; } @media (max-width: 900px) { .halo-trust { grid-template-columns: 1fr; padding: var(--space-6); justify-items: center; } .halo-trust__list { justify-self: stretch; } } /* ── 32. Отзыв ───────────────────────────────────────────────────────────── */ .halo-review { display: grid; gap: var(--space-4); align-content: start; padding: var(--space-6); border-radius: var(--radius-md); } .halo-review__stars { color: var(--cabin-bright); letter-spacing: .18em; font-size: 14px; text-shadow: 0 0 10px var(--cabin-glow); } .halo-review__text { margin: 0; font-size: 16px; line-height: 26px; color: var(--ink); } /* 2.1.0: кавычки — в тексте отзыва, CSS их не добавляет */ .halo-review__foot { display: flex; flex-wrap: wrap; gap: 4px var(--space-3); align-items: baseline; font-size: 13px; line-height: 18px; color: var(--ink-muted); padding-top: var(--space-3); border-top: 1px solid var(--line); } .halo-review__car { color: var(--ink-soft); } .halo-review__src { margin-left: auto; } /* ── 33. Кейс ────────────────────────────────────────────────────────────── */ /* Симптом словами клиента → что нашла диагностика → что сделали → цена и срок; фото до и после. */ .halo-case { display: grid; grid-template-rows: auto 1fr; overflow: hidden; border-radius: var(--radius-md); color: var(--ink); text-decoration: none; } .halo-case__shots { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; } .halo-case__shots .halo-photo { border-radius: 0; aspect-ratio: 4 / 3; } .halo-case__shots .halo-photo:only-child { grid-column: span 2; aspect-ratio: 16 / 9; } .halo-case__body { display: grid; gap: var(--space-3); align-content: start; padding: var(--space-5) var(--space-6) var(--space-6); } .halo-case__model { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ice); } .halo-case__title { font-size: 20px; line-height: 26px; font-weight: 400; } .halo-case__quote { margin: 0; font-size: 15px; line-height: 23px; color: var(--ink-soft); font-style: normal; } .halo-case__quote::before { content: "«"; } .halo-case__quote::after { content: "»"; } .halo-case__foot { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); align-items: center; padding-top: var(--space-3); border-top: 1px solid var(--line); font-size: 13px; line-height: 18px; color: var(--ink-muted); } .halo-case__foot .halo-price { font-size: 17px; } a.halo-case:hover { transform: translateY(-4px); } a.halo-case:hover .halo-photo img { transform: scale(1.035); } .halo-case--second .halo-case__model { color: var(--cabin); } /* История кейса на его странице */ .halo-story { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); counter-reset: story; } .halo-story > li { counter-increment: story; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--space-5); padding: var(--space-6); border-radius: var(--radius-md); background: linear-gradient(180deg, var(--glass-top), transparent 50%), var(--glass-fill); box-shadow: var(--edge-light); } .halo-story > li::before { content: counter(story, decimal-leading-zero); font-size: 28px; line-height: 32px; font-weight: 200; color: var(--ice); font-variant-numeric: tabular-nums; text-shadow: 0 0 18px var(--ice-glow); } .halo-story h3 { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: var(--space-2); } .halo-story p { font-size: 17px; line-height: 27px; color: var(--ink); } .halo-story__client p::before { content: "«"; } .halo-story__client p::after { content: "»"; } .halo-story > li.halo-story__result::before { color: var(--cabin); text-shadow: 0 0 18px var(--cabin-glow); } /* ── 34. Связь: «Написать мастеру», мессенджеры с готовым текстом ─────────── */ /* Ссылки собираются из data-halo-prefill: шаблон «Здравствуйте. BMW ___, кузов ___. Нужен ___. Когда можно приехать?»; на странице работы подставляется её название (data-halo-need). */ .halo-msg { position: relative; display: inline-flex; } .halo-msg__menu { position: absolute; right: 0; top: calc(100% + 10px); z-index: var(--z-menu); width: 300px; padding: var(--space-3); border-radius: var(--radius-md); display: grid; gap: 4px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-glide) var(--ease-expo), visibility 0s linear var(--dur-base); } .halo-msg.is-open .halo-msg__menu, .halo-msg__menu--static { opacity: 1; visibility: visible; transform: none; transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-glide) var(--ease-expo); } .halo-msg__menu--static { position: static; width: auto; } .halo-msg__hint { padding: 6px 10px 8px; font-size: 12px; line-height: 17px; color: var(--ink-muted); } .halo-msg__hint q { color: var(--ink-soft); quotes: "«" "»"; } .halo-msg__item { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; padding: 10px; border-radius: var(--radius-sm); color: var(--ink); transition: background-color var(--dur-micro) var(--ease-out); } .halo-msg__item:hover { background: var(--glass-fill-hover); } .halo-msg__item .halo-icon { width: 36px; height: 36px; padding: 8px; border-radius: var(--radius-full); background: var(--cabin-veil); color: var(--cabin-bright); } .halo-msg__name { font-size: 15px; line-height: 20px; } .halo-msg__sub { display: block; font-size: 12px; line-height: 16px; color: var(--ink-muted); } .halo-msg__go { color: var(--ink-muted); } .halo-channels { display: flex; flex-wrap: wrap; gap: var(--space-2); } /* ── 35. Нижняя панель на телефоне ───────────────────────────────────────── */ /* «Позвонить» (с номером) · «Написать» · «Маршрут» — на любом экране; тонкая линия сверху — тахометр прокрутки. */ .halo-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-header); display: none; grid-template-columns: 2fr 1fr 1fr; gap: 6px; padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, var(--glass-top), transparent 70%), var(--glass-deep); -webkit-backdrop-filter: blur(var(--blur-glass-strong)) saturate(1.4); backdrop-filter: blur(var(--blur-glass-strong)) saturate(1.4); box-shadow: inset 0 1px 0 var(--line-strong); } .halo-bar--demo { position: absolute; display: grid; } @media (max-width: 900px) { .halo-bar { display: grid; } .halo-has-bar { padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom)); } } .halo-bar__btn { display: grid; grid-auto-flow: row; justify-items: center; align-content: center; gap: 2px; min-height: 48px; padding: 4px 6px; border-radius: var(--radius-sm); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .02em; color: var(--ink-soft); background: var(--glass-fill); box-shadow: inset 0 0 0 1px var(--glass-edge); } .halo-bar__btn .halo-icon { width: var(--icon-md); height: var(--icon-md); } .halo-bar__btn--call { grid-auto-flow: column; gap: 6px; justify-content: center; white-space: nowrap; color: var(--on-ice); background: linear-gradient(180deg, var(--ice-bright), var(--ice)); box-shadow: inset 0 1px 0 var(--crystal-hi), var(--glow-ice); font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: 0; } .halo-bar__btn--write { color: var(--cabin-bright); background: linear-gradient(180deg, var(--cabin-veil), transparent 90%), var(--glass-fill); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cabin) 55%, transparent); } .halo-bar__rev { position: absolute; left: 0; right: 0; top: -1px; height: 2px; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, var(--ice), var(--ice-bright) 60%, var(--cabin) 88%, var(--tail)); box-shadow: 0 0 10px var(--ice-glow); pointer-events: none; } /* Плашка cookie внутри панели: строка над кнопками, ничего не закрывает */ .halo-bar__cookie { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--space-3); padding: 4px 4px 6px; font-size: 12px; line-height: 16px; color: var(--ink-soft); } .halo-bar__cookie p { flex: 1; } .halo-bar__cookie a { color: var(--ice); } /* ── 36. Метка «Сейчас открыто» ──────────────────────────────────────────── */ /* data-halo-open="пн-пт 10-19; сб 10-17" — считает по времени Твери (UTC+3). Без JS — просто часы работы текстом. */ .halo-open { --c: var(--ink-soft); } .halo-open.is-open { --c: var(--signal-ok); --bg: var(--signal-ok-veil); box-shadow: none; } .halo-open.is-closed { --c: var(--ink-soft); } .halo-open.is-closed .halo-chip__dot { background: var(--ink-faint); box-shadow: none; animation: none; } /* ── 37. Заявка с согласием ──────────────────────────────────────────────── */ /* Согласие на обработку ПДн — отдельная галочка, по умолчанию не отмечена, со ссылкой на политику. Без неё кнопка недоступна. */ .halo-form { display: grid; gap: var(--space-5); } .halo-form__row { display: grid; gap: var(--space-4); grid-template-columns: repeat(2, minmax(0, 1fr)); } .halo-form__row--1 { grid-template-columns: 1fr; } .halo-form__foot { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; justify-content: space-between; } .halo-form__note { font-size: 13px; line-height: 20px; color: var(--ink-muted); max-width: 46ch; } .halo-form__ok { display: none; gap: var(--space-3); padding: var(--space-6); border-radius: var(--radius-md); background: var(--signal-ok-veil); color: var(--ink); } .halo-form.is-sent > :not(.halo-form__ok) { display: none; } .halo-form.is-sent .halo-form__ok { display: grid; } .halo-consent { font-size: 13px; line-height: 20px; } @media (max-width: 600px) { .halo-form__row { grid-template-columns: 1fr; } } /* ── 38. Cookie ──────────────────────────────────────────────────────────── */ /* На компьютере — карточка в правом нижнем углу над фото героя, на телефоне — строка в нижней панели. Окна поверх текста нет. */ .halo-cookie { position: fixed; right: var(--space-5); bottom: var(--space-5); z-index: var(--z-dock); width: 360px; display: grid; gap: var(--space-3); padding: var(--space-5); border-radius: var(--radius-md); font-size: 14px; line-height: 21px; color: var(--ink-soft); } .halo-cookie[hidden], .halo-bar__cookie[hidden] { display: none; } .halo-cookie__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); } .halo-cookie a { color: var(--ice); } .halo-cookie--inline { position: static; width: auto; } .halo-cookie-set { display: grid; gap: var(--space-3); } .halo-cookie-set__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-4); align-items: center; padding: var(--space-4) 0; border-bottom: 1px solid var(--line); } .halo-cookie-set__row b { display: block; font-weight: 400; color: var(--ink); } .halo-cookie-set__row span { font-size: 13px; color: var(--ink-muted); } .halo-switch { position: relative; width: 44px; height: 26px; flex: none; -webkit-appearance: none; appearance: none; margin: 0; border-radius: var(--radius-full); background: var(--night-500); box-shadow: inset 0 0 0 1px var(--line-control); cursor: pointer; transition: background-color var(--dur-base) var(--ease-out); } .halo-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--ink-soft); transition: transform var(--dur-glide) var(--ease-expo), background-color var(--dur-base) var(--ease-out); } .halo-switch:checked { background: var(--ice); box-shadow: var(--glow-ice); } .halo-switch:checked::after { transform: translateX(18px); background: var(--on-ice); } .halo-switch:disabled { opacity: .6; cursor: not-allowed; } @media (max-width: 900px) { .halo-cookie:not(.halo-cookie--inline) { display: none; } } /* ── 39. Блок связи (CTA) ────────────────────────────────────────────────── */ .halo-cta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-10); padding: var(--space-10); border-radius: var(--radius-lg); align-items: start; } .halo-cta__how { display: grid; gap: var(--space-3); padding: var(--space-5); border-radius: var(--radius-md); background: var(--glass-recess); box-shadow: var(--recess); font-size: 15px; line-height: 24px; color: var(--ink-soft); } .halo-cta__phones { display: grid; gap: 2px; } .halo-cta__phones a { font-size: 22px; line-height: 32px; font-weight: 300; letter-spacing: .01em; color: var(--ink); font-variant-numeric: tabular-nums; } .halo-cta__phones a:first-child { font-size: 32px; line-height: 40px; font-weight: 200; text-shadow: 0 0 22px var(--ice-glow); } .halo-cta__phones a:hover { color: var(--ice-bright); } @media (max-width: 900px) { .halo-cta { grid-template-columns: 1fr; padding: var(--space-6); gap: var(--space-6); } } /* ── 40. Соседние работы и список работ ───────────────────────────────────── */ .halo-links { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); } .halo-links--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 900px) { .halo-links--3 { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .halo-links--3 { grid-template-columns: 1fr; } } .halo-link { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--space-4); align-items: center; padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow var(--dur-base) var(--ease-out), background-color var(--dur-micro) var(--ease-out), transform var(--dur-glide) var(--ease-expo); } .halo-link:hover { background: var(--glass-fill); box-shadow: inset 0 0 0 1px var(--glass-edge), var(--shadow-rest); transform: translateY(-2px); } .halo-link__name { font-size: 17px; line-height: 24px; } .halo-link__price { grid-row: 2; font-size: 13px; line-height: 18px; color: var(--ink-muted); font-variant-numeric: tabular-nums; } .halo-link .halo-icon { grid-row: span 2; color: var(--ink-muted); transition: color var(--dur-micro) var(--ease-out), transform var(--dur-glide) var(--ease-expo); } .halo-link:hover .halo-icon { color: var(--ice-bright); transform: translateX(3px); } /* ── 41. Списки «что входит» ─────────────────────────────────────────────── */ .halo-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); } .halo-checks li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--space-3); font-size: 16px; line-height: 25px; color: var(--ink-soft); } .halo-checks li::before { content: ""; width: 10px; height: 10px; margin: 8px 0 0 5px; transform: rotate(45deg); border-radius: 2px; background: var(--ice); box-shadow: 0 0 10px var(--ice-glow); } .halo-checks b { font-weight: 400; color: var(--ink); } .halo-checks--cols { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-8); } @media (max-width: 600px) { .halo-checks--cols { grid-template-columns: 1fr; } } .halo-panel { padding: var(--space-8); border-radius: var(--radius-lg); } .halo-panel__title { font-size: 22px; line-height: 28px; font-weight: 400; margin-bottom: var(--space-5); } @media (max-width: 600px) { .halo-panel { padding: var(--space-6); } } /* ── 42. Карта и въезд ───────────────────────────────────────────────────── */ /* Место под карту Яндекса (тёмная тема) с меткой; сама карта подключается виджетом, размер задан заранее. */ .halo-map { position: relative; overflow: hidden; width: 100%; border-radius: var(--radius-lg); aspect-ratio: 16 / 10; background: radial-gradient(40% 50% at 64% 34%, var(--ice-haze), transparent 70%), linear-gradient(0deg, transparent 49.6%, var(--line) 50%, transparent 50.4%) 0 0 / 100% 64px, linear-gradient(90deg, transparent 49.6%, var(--line) 50%, transparent 50.4%) 0 0 / 64px 100%, var(--night-200); box-shadow: var(--edge-light), var(--shadow-float); } .halo-map::before { content: ""; position: absolute; inset: -20% -10%; background: linear-gradient(28deg, transparent 46%, var(--line-strong) 46.4%, var(--line-strong) 47.6%, transparent 48%), linear-gradient(-12deg, transparent 62%, var(--line-strong) 62.3%, var(--line-strong) 63.2%, transparent 63.5%); } .halo-map__pin { position: absolute; left: 64%; top: 34%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--cabin-bright); box-shadow: 0 0 0 6px var(--cabin-veil), 0 0 28px var(--cabin-glow); } .halo-map__pin::after { content: ""; position: absolute; inset: -16px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--cabin); animation: halo-breathe var(--dur-breathe) var(--ease-breathe) infinite; } .halo-map__card { position: absolute; left: var(--space-5); bottom: var(--space-5); right: var(--space-5); max-width: 380px; display: grid; gap: var(--space-2); padding: var(--space-5); border-radius: var(--radius-md); } .halo-map__label { position: absolute; right: var(--space-4); top: var(--space-4); font-size: 12px; line-height: 16px; color: var(--ink-muted); } @media (max-width: 600px) { .halo-map { aspect-ratio: auto; height: 420px; } } .halo-gate { position: relative; } .halo-gate__mark { position: absolute; z-index: 3; display: grid; justify-items: center; gap: 6px; transform: translate(-50%, -100%); } .halo-gate__mark span { padding: 6px 12px; border-radius: var(--radius-full); font-size: 13px; line-height: 18px; color: var(--on-ice); background: var(--ice-bright); box-shadow: var(--glow-ice); white-space: nowrap; } .halo-gate__mark::after { content: ""; width: 2px; height: 34px; background: linear-gradient(180deg, var(--ice-bright), transparent); box-shadow: 0 0 10px var(--ice-glow); } /* ── 43. Меню работ (выпадающее из «Услуги») ──────────────────────────────── */ .halo-nav__group { position: relative; } .halo-mega { position: absolute; left: -16px; top: calc(100% + 14px); z-index: var(--z-menu); width: min(720px, 80vw); display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); padding: var(--space-6); border-radius: var(--radius-lg); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-glide) var(--ease-expo), visibility 0s linear var(--dur-base); } .halo-nav__group:hover .halo-mega, .halo-nav__group:focus-within .halo-mega, .halo-mega--static { opacity: 1; visibility: visible; transform: none; transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-glide) var(--ease-expo); } .halo-mega--static { position: static; width: auto; } .halo-mega__title { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: var(--space-2); } .halo-mega a { display: grid; gap: 1px; padding: 7px 10px; margin-inline: -10px; border-radius: var(--radius-sm); font-size: 15px; line-height: 20px; color: var(--ink); } .halo-mega a b { font-weight: 400; } .halo-mega a span { color: var(--ink-muted); font-size: 13px; line-height: 18px; font-variant-numeric: tabular-nums; } .halo-mega a:hover { background: var(--glass-fill-hover); color: var(--ice-bright); } /* ── 44. Запас: онлайн-запись, квиз, чат, обратный звонок ─────────────────── */ .halo-slots { display: grid; gap: var(--space-5); } .halo-slots__days { display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: none; } .halo-slots__day { display: grid; justify-items: center; gap: 2px; min-width: 64px; padding: 10px 8px; border: 0; border-radius: var(--radius-md); font: inherit; color: var(--ink-soft); background: var(--glass-fill); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; } .halo-slots__day b { font-size: 20px; line-height: 24px; font-weight: 300; color: var(--ink); font-variant-numeric: tabular-nums; } .halo-slots__day span { font-size: 11px; line-height: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); } .halo-slots__day[aria-pressed="true"] { background: linear-gradient(180deg, var(--ice-veil), transparent 90%), var(--glass-fill-hover); box-shadow: inset 0 0 0 1px var(--ice), var(--glow-ice); } .halo-slots__day:disabled { opacity: .4; cursor: not-allowed; } .halo-slots__times { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: var(--space-2); } .halo-slots__time { height: 40px; border: 0; border-radius: var(--radius-sm); font: inherit; font-size: 15px; font-variant-numeric: tabular-nums; color: var(--ink); background: var(--glass-fill); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; } .halo-slots__time[aria-pressed="true"] { color: var(--on-ice); background: var(--ice); box-shadow: var(--glow-ice); } .halo-slots__time:disabled { color: var(--ink-faint); text-decoration: line-through; cursor: not-allowed; } .halo-quiz { display: grid; gap: var(--space-6); } .halo-quiz__progress { display: grid; grid-auto-flow: column; gap: 6px; } .halo-quiz__progress span { height: 3px; border-radius: 3px; background: var(--line-strong); } .halo-quiz__progress span.is-done { background: var(--ice); box-shadow: 0 0 8px var(--ice-glow); } .halo-quiz__q { font-size: 24px; line-height: 30px; font-weight: 300; } .halo-quiz__opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-3); } .halo-quiz__opt { display: grid; gap: 4px; padding: var(--space-4) var(--space-5); border: 0; border-radius: var(--radius-md); text-align: left; font: inherit; color: var(--ink); background: var(--glass-fill); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; transition: box-shadow var(--dur-base) var(--ease-out), background-color var(--dur-micro) var(--ease-out); } .halo-quiz__opt span { font-size: 13px; line-height: 18px; color: var(--ink-muted); } .halo-quiz__opt:hover, .halo-quiz__opt[aria-pressed="true"] { background: var(--glass-fill-hover); box-shadow: inset 0 0 0 1px var(--ice), var(--glow-ice); } .halo-chat { position: relative; width: 360px; max-width: 100%; display: grid; grid-template-rows: auto 1fr auto; border-radius: var(--radius-lg); overflow: hidden; } .halo-chat__head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--line); } .halo-chat__head b { font-weight: 500; } .halo-chat__head span { font-size: 12px; color: var(--ink-muted); display: block; } .halo-chat__log { display: grid; gap: var(--space-3); align-content: end; min-height: 240px; padding: var(--space-5); } .halo-chat__msg { max-width: 82%; padding: 10px 14px; border-radius: 16px 16px 16px 4px; font-size: 14px; line-height: 21px; background: var(--glass-fill-hover); color: var(--ink); } .halo-chat__msg--me { justify-self: end; border-radius: 16px 16px 4px 16px; background: var(--ice-veil); color: var(--ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ice) 40%, transparent); } .halo-chat__form { display: flex; gap: var(--space-2); padding: var(--space-3); border-top: 1px solid var(--line); } .halo-chat__launch { position: relative; width: 56px; height: 56px; border-radius: 50%; } .halo-callback { display: grid; gap: var(--space-4); } .halo-callback__row { display: flex; gap: var(--space-2); } .halo-callback__row .halo-input { flex: 1; } /* ── 45. Запас: мастер, гарантия, заказ-наряд, оборудование, видео, VIN ───── */ .halo-master { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--space-4); align-items: center; padding: var(--space-5); border-radius: var(--radius-md); } .halo-master__face { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 50% 35%, var(--night-500), var(--night-300)); box-shadow: inset 0 0 0 1px var(--glass-edge); color: var(--ink-muted); font-size: 22px; font-weight: 300; overflow: hidden; } .halo-master__face img { width: 100%; height: 100%; object-fit: cover; } .halo-master__name { font-size: 18px; line-height: 24px; } .halo-master__meta { font-size: 13px; line-height: 19px; color: var(--ink-muted); } .halo-order { display: grid; gap: 0; padding: var(--space-6); border-radius: var(--radius-md); background: linear-gradient(180deg, #f3f5f8, #e6eaf0); color: #11161d; font-size: 13px; line-height: 19px; box-shadow: var(--shadow-float); } .halo-order__head { display: flex; justify-content: space-between; gap: var(--space-4); padding-bottom: var(--space-3); margin-bottom: var(--space-2); border-bottom: 1.5px solid #11161d; } .halo-order__head b { font-size: 15px; font-weight: 600; } .halo-order__row { display: grid; grid-template-columns: minmax(0, 1fr) 64px 84px; gap: var(--space-3); padding: 7px 0; border-bottom: 1px solid #c9d0da; font-variant-numeric: tabular-nums; } .halo-order__row span:nth-child(n+2) { text-align: right; } .halo-order__row--sum { border-bottom: 0; padding-top: var(--space-3); font-weight: 600; } .halo-order__sign { margin-top: var(--space-4); display: flex; justify-content: space-between; gap: var(--space-4); color: #4a5563; font-size: 12px; } .halo-equip { display: grid; gap: var(--space-3); align-content: start; padding: var(--space-5); border-radius: var(--radius-md); } .halo-equip__title { font-size: 17px; line-height: 24px; } .halo-equip__text { font-size: 14px; line-height: 22px; color: var(--ink-soft); } .halo-video { position: relative; overflow: hidden; border-radius: var(--radius-lg); aspect-ratio: 16 / 9; background: var(--night-300); } .halo-video img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.7) saturate(.85); } .halo-video__play { position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; border: 0; border-radius: 50%; cursor: pointer; display: grid; place-items: center; color: var(--on-ice); background: var(--ice-bright); box-shadow: var(--glow-ice), 0 0 0 12px var(--ice-veil); } .halo-video__play .halo-icon { width: 30px; height: 30px; margin-left: 4px; } .halo-video__cap { position: absolute; left: var(--space-5); bottom: var(--space-4); font-size: 14px; color: var(--ink-soft); } .halo-vin { display: grid; gap: var(--space-3); } .halo-vin__row { display: flex; gap: var(--space-2); } .halo-vin__row .halo-input { flex: 1; font-family: var(--font-mono); font-size: 15px; letter-spacing: .12em; text-transform: uppercase; } .halo-vin__row .halo-input::placeholder { font-family: var(--font-sans); letter-spacing: 0; text-transform: none; } .halo-vin__count { font-size: 12px; line-height: 16px; color: var(--ink-muted); font-variant-numeric: tabular-nums; } .halo-vin.is-valid .halo-vin__count { color: var(--signal-ok); } .halo-vin.is-invalid .halo-input { border-color: var(--signal-crit); } .halo-vin.is-invalid .halo-vin__count { color: var(--signal-crit); } /* ── 47. Быстрые входы с ценой (ряд в герое главной) ──────────────────────── */ .halo-tiles { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(176px, 1fr); gap: var(--space-3); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 2px; } .halo-tiles::-webkit-scrollbar { display: none; } .halo-tile { scroll-snap-align: start; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--space-3); align-items: end; min-height: 96px; padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); color: var(--ink); } .halo-tile__name { grid-column: 1 / -1; align-self: start; font-size: 16px; line-height: 22px; } .halo-tile .halo-price { font-size: 18px; } .halo-tile .halo-icon { color: var(--ink-muted); transition: color var(--dur-micro) var(--ease-out), transform var(--dur-glide) var(--ease-expo); } a.halo-tile:hover { transform: translateY(-3px); } a.halo-tile:hover .halo-icon { color: var(--ice-bright); transform: translate(2px, -2px); } .halo-tile--all { background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); } .halo-tile--all::before, .halo-tile--all::after { display: none; } /* Меню мессенджеров над кнопкой (нижняя панель) и диалоги */ .halo-msg--up .halo-msg__menu { top: auto; bottom: calc(100% + 12px); right: auto; left: 50%; transform: translate(-50%, 6px); width: min(330px, calc(100vw - 16px)); } .halo-msg--up.is-open .halo-msg__menu { transform: translate(-50%, 0); } .halo-bar__msg { display: grid; position: static; } .halo-bar .halo-msg__menu { left: 8px; right: 8px; bottom: calc(100% + 8px); width: auto; transform: translateY(6px); } .halo-bar .halo-msg.is-open .halo-msg__menu { transform: none; } .halo-bar__msg > .halo-bar__btn { width: 100%; border: 0; font: inherit; font-size: 12px; line-height: 16px; font-weight: 500; cursor: pointer; } .halo-dialog { width: min(480px, calc(100vw - 32px)); padding: var(--space-6); border: 0; color: var(--ink); } .halo-dialog::backdrop { background: color-mix(in srgb, var(--night-000) 70%, transparent); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } /* ── 48. Тексты штаба на страницах (2.1.0) ─────────────────────────────────── */ /* Разделы страницы: заголовок слева, текст, цены и списки справа; на телефоне — друг под другом */ .halo-article { display: grid; } .halo-article__sec { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-5) var(--space-12); padding-block: var(--space-10); border-top: 1px solid var(--line); } .halo-article__sec:first-child { border-top: 0; padding-top: 0; } .halo-article__title { font-size: 24px; line-height: 30px; font-weight: 400; letter-spacing: -.005em; color: var(--ink); } .halo-article__body { display: grid; gap: var(--space-5); align-content: start; min-width: 0; } .halo-article__body > p { font-size: 17px; line-height: 28px; color: var(--ink-soft); max-width: 68ch; } .halo-article__body > p b { font-weight: 400; color: var(--ink); } .halo-article__body > p a, .halo-cta__lead a { color: var(--ice); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--ice) 40%, transparent); text-underline-offset: 3px; } .halo-article__body > p a:hover, .halo-cta__lead a:hover { color: var(--ice-bright); } .halo-article__body .halo-checks li { color: var(--ink-soft); } .halo-article__prices .halo-prices th, .halo-article__prices .halo-prices td { padding-block: var(--space-3); } .halo-article__prices .halo-prices tr:first-child th, .halo-article__prices .halo-prices tr:first-child td { padding-top: 0; } .halo-article__body .halo-review { max-width: 620px; } @media (max-width: 900px) { .halo-article__sec { grid-template-columns: 1fr; gap: var(--space-4); padding-block: var(--space-8); } .halo-article__title { font-size: 22px; line-height: 28px; } .halo-article__body > p { font-size: 16px; line-height: 26px; } } /* Факты-работы в герое: название обычным регистром, цена светящимися цифрами, срок под ней */ .halo-facts--work dt { text-transform: none; letter-spacing: 0; font-size: 13px; line-height: 18px; font-weight: 400; color: var(--ink-soft); } .halo-facts__from { font-size: 14px; line-height: 20px; font-weight: 400; letter-spacing: .02em; color: var(--ink-muted); text-shadow: none; margin-right: 2px; } /* Цена с подписью: в карточке работы, в плитке героя, в меню «Услуги» */ .halo-service__price { display: grid; gap: 2px; min-width: 0; } .halo-service__label, .halo-tile__label, .halo-service__after { font-size: 13px; line-height: 18px; color: var(--ink-muted); font-weight: 400; } .halo-service__body:empty { display: none; } .halo-service--wide .halo-service__text { font-size: 17px; line-height: 27px; color: var(--ink-soft); max-width: 46ch; } .halo-tile__price { display: grid; gap: 1px; align-self: end; } .halo-tile--all .halo-tile__name { align-self: center; } /* Кейс без фото: световая линия сверху, заголовок, описание, стрелка */ .halo-case--text { position: relative; grid-template-rows: 1fr; } .halo-case--text::before { content: ""; position: absolute; left: var(--space-6); right: var(--space-6); top: 0; height: 2px; z-index: 1; background: linear-gradient(90deg, transparent, var(--ice), var(--crystal-hi), var(--cabin), transparent); box-shadow: 0 0 14px var(--ice-glow); opacity: .85; } .halo-case--text .halo-case__body { grid-template-rows: auto 1fr auto; padding-top: var(--space-8); min-height: 168px; } .halo-case__text { margin: 0; font-size: 15px; line-height: 23px; color: var(--ink-soft); } .halo-case__go { justify-self: end; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-full); color: var(--ink-soft); box-shadow: inset 0 0 0 1px var(--line-strong); transition: color var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out); } a.halo-case:hover .halo-case__go { color: var(--ice-bright); box-shadow: inset 0 0 0 1px var(--ice), var(--glow-ice); } .halo-case-works { font-size: 15px; line-height: 24px; color: var(--ink-muted); } .halo-case-works a { color: var(--ice); } .halo-case-works a:hover { color: var(--ice-bright); } .halo-story h2 { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: var(--space-2); } .halo-story .halo-checks { margin-top: var(--space-3); } /* Отзыв: подпись как в источнике */ .halo-review { margin: 0; } .halo-review__text { margin: 0; } .halo-review__sign { color: var(--ink-soft); } /* Блок связи: текст «Как записаться», кнопки, ссылки; справа — заявка */ .halo-cta__main { display: grid; gap: var(--space-5); align-content: start; } .halo-cta__lead { font-size: 17px; line-height: 28px; color: var(--ink-soft); max-width: 52ch; } .halo-cta__lead a[href^="tel:"] { white-space: nowrap; } .halo-cta__actions, .halo-cta__links { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; } .halo-cta__open { display: flex; } .halo-form-panel { scroll-margin-top: calc(var(--header-h, 72px) + var(--space-6)); } .halo-consent-row { display: grid; gap: var(--space-2); } .halo-consent-row__policy { font-size: 13px; line-height: 20px; color: var(--ink-muted); text-decoration: underline; text-decoration-color: var(--line-control); text-underline-offset: 3px; margin-left: 32px; } .halo-consent-row__policy:hover { color: var(--ice-bright); } /* Страница «Цены»: группы прайса в две колонки */ .halo-price-cols { columns: 2; column-gap: var(--space-6); } .halo-price-cols > * { break-inside: avoid; margin-bottom: var(--space-6); } .halo-prices--two .halo-prices__price { width: 136px; } @media (max-width: 1080px) { .halo-price-cols { columns: 1; } } /* Отсечка в сетке не растягивается на всю ширину */ .halo-only { justify-self: start; max-width: 100%; } /* Метка на фото въезда: подпись слева от точки — у правого края кадра */ .halo-gate__mark--end { transform: translate(calc(-100% + 12px), -100%); justify-items: end; } .halo-gate__mark--end::after { margin-right: 11px; } /* Строка рейтинга на телефоне переносится */ @media (max-width: 600px) { .halo-rating { flex-wrap: wrap; white-space: normal; row-gap: 2px; border-radius: var(--radius-md); } } /* Сетки на две и четыре колонки */ .halo-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .halo-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 1080px) { .halo-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .halo-grid--2, .halo-grid--4 { grid-template-columns: 1fr; } } /* Спидометр рейтинга: звезда перед цифрой; одиночная панель */ .halo-speedo__star { font-size: .42em; vertical-align: .55em; margin-right: .12em; color: var(--cabin-bright); text-shadow: 0 0 10px var(--cabin-glow); } .halo-trust--solo { grid-template-columns: 1fr; justify-items: center; padding: var(--space-8); } /* ── Меньше движения ─────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; } .halo-js [data-halo-reveal]:not([data-halo-reveal="stagger"]), .halo-js [data-halo-reveal="stagger"] > * { opacity: 1; transform: none; filter: none; } .halo-js .halo-display[data-halo-wake]:not(.is-awake) .halo-display__screen { filter: none; } .halo-js .halo-display[data-halo-wake]:not(.is-awake) .halo-display__main > :not(.halo-widget-row), .halo-js .halo-display[data-halo-wake]:not(.is-awake) .halo-widget-row > * { opacity: 1; transform: none; } .halo-display { transform: none; } .halo-speedo--dock { transition: none; } }