/* ═══════════════════════════════════════════════════════════════════════ Roadlez — Componentes reutilizáveis Carregado DEPOIS de roadlez-ui.css. Cada bloco define a classe do componente e lista junto os seletores legados que já usavam o mesmo padrão. Uma definição, vários consumidores: telas antigas continuam funcionando sem alterar markup, telas novas usam a classe do componente. Toda cor vem de moto-theme.css. Nada de hex escrito aqui. ═══════════════════════════════════════════════════════════════════════ */ /* ── Barras segmentadas ──────────────────────────────────────────────── O dispositivo de marca: faixas paralelas inclinadas. O ângulo ecoa as arestas do hexágono e sugere movimento sem desenhar nada literal. Uso:
Modificadores: .is-sm (5px) · .is-lg (9px) · .is-right (ancora à direita) Nota: .roadlez-footer-stripes ficou de fora da base porque usa altura no contêiner, margin no lugar de gap e ângulo de -32deg. Alinhar esse -32 com o -31 do token é uma decisão visual, não uma limpeza. ────────────────────────────────────────────────────────────────────── */ .roadlez-stripes, .roadlez-login-hex-stripes { display: flex; gap: var(--moto-stripe-gap); transform: skewX(var(--moto-stripe-skew)); transform-origin: left; pointer-events: none; } .roadlez-stripes > span, .roadlez-login-hex-stripes span { display: block; height: var(--moto-stripe-height); } .roadlez-stripes.is-sm > span { height: 5px; } .roadlez-stripes.is-lg > span { height: 9px; } .roadlez-stripes.is-right { transform-origin: right; } /* Ritmo padrão: a primeira faixa domina, a segunda acompanha. Só se aplica quando as larguras não vêm de fora. */ .roadlez-stripes > span:first-child { width: 62%; background: var(--moto-accent); } .roadlez-stripes > span:last-child { width: 26%; background: var(--moto-primary); } /* Variante sobre superfície escura: a segunda faixa vira branca */ .roadlez-stripes.on-dark > span:last-child { background: rgba(255, 255, 255, .82); } /* ── Marca d'água hexagonal ──────────────────────────────────────────── Hexágonos concêntricos em contorno, sangrando por um canto da superfície. Geometria oficial da marca: hexágono regular pointy-top com canto arredondado a 18% do raio (tangente), Bézier quadrática com o vértice como ponto de controle — a mesma construção do símbolo. Antes disso eram de canto vivo e nem regulares: o do rodapé estava 24% deformado e os dois anéis do hero tinham deformações diferentes. Desenhado como MÁSCARA, não imagem de fundo: a forma vem do SVG e a cor de background-color. Assim a marca d'água acompanha o token — o que era impossível com a cor presa dentro do data-URI. A opacidade fica no elemento, não na máscara, para cada superfície calibrar a sua sem precisar de outra máscara. Uso: .roadlez-hex-watermark no contêiner (precisa de position:relative e overflow:hidden) Variantes: .is-single (um anel) · .is-light (sobre superfície escura) ────────────────────────────────────────────────────────────────────── */ .roadlez-hex-watermark::after, .search-hero::after, .emergency-hero::after, .garage-hero::after, .roadlez-module-hero::after { position: absolute; top: -82px; right: -58px; width: 256px; height: 295px; content: ""; opacity: .18; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2083.14%2096.00%27%3E%3Cpath%20d%3D%27M34.55%207.05Q41.57%203%2048.58%207.05L73.53%2021.45Q80.54%2025.5%2080.54%2033.6L80.54%2062.4Q80.54%2070.5%2073.53%2074.55L48.58%2088.95Q41.57%2093%2034.55%2088.95L9.61%2074.55Q2.6%2070.5%202.6%2062.4L2.6%2033.6Q2.6%2025.5%209.61%2021.45Z%27%20fill%3D%27none%27%20stroke%3D%27%23fff%27%20stroke-opacity%3D%271%27%20stroke-width%3D%275.545333865512517%27%2F%3E%3Cpath%20d%3D%27M36.18%2016.55Q41.57%2013.44%2046.96%2016.55L66.11%2027.61Q71.5%2030.72%2071.5%2036.94L71.5%2059.06Q71.5%2065.28%2066.11%2068.39L46.96%2079.45Q41.57%2082.56%2036.18%2079.45L17.03%2068.39Q11.64%2065.28%2011.64%2059.06L11.64%2036.94Q11.64%2030.72%2017.03%2027.61Z%27%20fill%3D%27none%27%20stroke%3D%27%23fff%27%20stroke-opacity%3D%27.72%27%20stroke-width%3D%271.729279526276767%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2083.14%2096.00%27%3E%3Cpath%20d%3D%27M34.55%207.05Q41.57%203%2048.58%207.05L73.53%2021.45Q80.54%2025.5%2080.54%2033.6L80.54%2062.4Q80.54%2070.5%2073.53%2074.55L48.58%2088.95Q41.57%2093%2034.55%2088.95L9.61%2074.55Q2.6%2070.5%202.6%2062.4L2.6%2033.6Q2.6%2025.5%209.61%2021.45Z%27%20fill%3D%27none%27%20stroke%3D%27%23fff%27%20stroke-opacity%3D%271%27%20stroke-width%3D%275.545333865512517%27%2F%3E%3Cpath%20d%3D%27M36.18%2016.55Q41.57%2013.44%2046.96%2016.55L66.11%2027.61Q71.5%2030.72%2071.5%2036.94L71.5%2059.06Q71.5%2065.28%2066.11%2068.39L46.96%2079.45Q41.57%2082.56%2036.18%2079.45L17.03%2068.39Q11.64%2065.28%2011.64%2059.06L11.64%2036.94Q11.64%2030.72%2017.03%2027.61Z%27%20fill%3D%27none%27%20stroke%3D%27%23fff%27%20stroke-opacity%3D%27.72%27%20stroke-width%3D%271.729279526276767%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; transform: rotate(8deg); pointer-events: none; } /* A cor só entra onde a máscara funciona. Sem esse guarda, um navegador sem suporte a mask pintaria um retângulo âmbar sólido no canto. */ @supports (mask-image: url("#")) or (-webkit-mask-image: url("#")) { .roadlez-hex-watermark::after, .search-hero::after, .emergency-hero::after, .garage-hero::after, .roadlez-module-hero::after, .roadlez-footer::after, .roadlez-login-brand-panel::after { background-color: var(--moto-accent); } .roadlez-hex-watermark.is-light::after, .roadlez-login-brand-panel::after { background-color: #FFFFFF; } } /* Um anel só, mais discreto — rodapé e painéis grandes */ .roadlez-hex-watermark.is-single::after, .roadlez-footer::after, .roadlez-login-brand-panel::after { opacity: .055; -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2083.14%2096.00%27%3E%3Cpath%20d%3D%27M34.55%207.05Q41.57%203%2048.58%207.05L73.53%2021.45Q80.54%2025.5%2080.54%2033.6L80.54%2062.4Q80.54%2070.5%2073.53%2074.55L48.58%2088.95Q41.57%2093%2034.55%2088.95L9.61%2074.55Q2.6%2070.5%202.6%2062.4L2.6%2033.6Q2.6%2025.5%209.61%2021.45Z%27%20fill%3D%27none%27%20stroke%3D%27%23fff%27%20stroke-opacity%3D%271%27%20stroke-width%3D%275.154583203324979%27%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2083.14%2096.00%27%3E%3Cpath%20d%3D%27M34.55%207.05Q41.57%203%2048.58%207.05L73.53%2021.45Q80.54%2025.5%2080.54%2033.6L80.54%2062.4Q80.54%2070.5%2073.53%2074.55L48.58%2088.95Q41.57%2093%2034.55%2088.95L9.61%2074.55Q2.6%2070.5%202.6%2062.4L2.6%2033.6Q2.6%2025.5%209.61%2021.45Z%27%20fill%3D%27none%27%20stroke%3D%27%23fff%27%20stroke-opacity%3D%271%27%20stroke-width%3D%275.154583203324979%27%2F%3E%3C%2Fsvg%3E"); } /* ── Rótulo de seção (eyebrow) ───────────────────────────────────────── A linha curta em caixa alta que antecede um título. Uso: Sua garagem ────────────────────────────────────────────────────────────────────── */ .roadlez-eyebrow, .emergency-hero-copy > span, .emergency-section-heading small, .garage-hero-copy span, .garage-section-heading span { color: var(--moto-accent); font-size: .65rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; } /* Só a classe do componente vira bloco. Os seletores legados acima são inline e mudar isso deslocaria o texto ao lado deles. */ .roadlez-eyebrow { display: block; } /* Sobre fundo claro o âmbar reprova em contraste — usar petróleo */ .roadlez-eyebrow.on-light { color: var(--moto-primary); } /* ── Coluna fixa ─────────────────────────────────────────────────────── Barra lateral que acompanha a rolagem, respeitando a altura do topo. Uso: