/* ============================================================================= Grupo Thompson · folha de estilo do site 1. Tokens 7. Home · Contato 2. Base 8. Home · Rodapé 3. Ícones 9. Páginas internas · comuns 4. Entrada e rolagem 10. O Grupo 5. Home · Hero 11. Responsivo 6. Home · O Grupo/Soluções As três páginas compartilham este arquivo. O que muda de uma para outra fica sob a classe do : .page-home, .page-inner, .page-grupo. ========================================================================== */ /* 1. Tokens ================================================================ */ :root { --red: #A9060F; /* logo, headline, CTA */ --red-dark: #820007; /* CTA hover */ --red-bright: #D5252A; /* bordas, link ativo, ícones */ --red-tint: #FBEAEB; --ink: #0B0B0B; --muted: #66666C; --white: #fff; --card: rgba(255, 255, 255, .86); --font: 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif; --pad: clamp(24px, 6vw, 100px); /* respiro lateral das páginas internas */ --pad-x: clamp(28px, 6vw, 100px); /* respiro lateral da home */ /* geometria do hero da home (desktop) */ --gap: 14px; /* margem da página ao redor do hero */ --radius: 36px; /* cantos do hero */ --tab-w: clamp(330px, 31.7vw, 528px); /* aba branca do logo */ --tab-h: clamp(126px, 9.5vw, 160px); --tab-r: 68px; /* canto arredondado do balão */ --brand: clamp(26px, 2.22vw, 32px); /* escala do lockup do logo */ /* movimento */ --ease: cubic-bezier(.2, .7, .2, 1); --rv-dur: .85s; } .page-home { --muted: #6F6F75; --red-dark: #8A0009; } /* 2. Base ================================================================== */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } html, body { margin: 0; } body { color: var(--ink); background: var(--white); font-family: var(--font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: inherit; } img { max-width: 100%; } :focus-visible { outline: 2px solid var(--red-bright); outline-offset: 3px; border-radius: 5px; } /* 3. Ícones ================================================================ SVG externo pintado com currentColor via mask: herda cor, hover e transição. */ .ico { display: inline-block; width: 1em; height: 1em; flex: none; background: currentColor; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; transition: transform .3s var(--ease); } .ico--shield { --ico: url("assets/svg/icon-shield.svg"); } .ico--building { --ico: url("assets/svg/icon-building.svg"); } .ico--users { --ico: url("assets/svg/icon-users.svg"); } .ico--chat { --ico: url("assets/svg/icon-chat.svg"); } .ico--arrow { --ico: url("assets/svg/icon-arrow-right.svg"); } .ico--menu { --ico: url("assets/svg/icon-menu.svg"); } .ico--close { --ico: url("assets/svg/icon-close.svg"); } .ico--logo { --ico: url("assets/svg/logo-shield.svg"); } /* 4. Entrada e rolagem ===================================================== O estado escondido só existe com JS ativo (html.js). Sem JS a página aparece inteira, normalmente. O script marca .is-in quando o bloco entra na tela. */ @property --rv-a { syntax: ''; inherits: false; initial-value: 0deg; } @keyframes page-in { from { opacity: 0; } to { opacity: 1; } } html.js body { animation: page-in .45s ease both; } html.js [data-rv], html.js [data-rv-stagger] > * { opacity: 0; transform: translateY(26px); transition: opacity var(--rv-dur) var(--ease) var(--rv-delay, 0s), transform var(--rv-dur) var(--ease) var(--rv-delay, 0s), filter var(--rv-dur) var(--ease) var(--rv-delay, 0s); } html.js [data-rv="fade"] { transform: none; } html.js [data-rv="left"] { transform: translateX(-34px); } html.js [data-rv="right"] { transform: translateX(34px); } html.js [data-rv="zoom"] { transform: scale(.95); } html.js [data-rv="text"] { filter: blur(8px); } html.js [data-rv="icon"] { transform: scale(.72) rotate(-10deg); } html.js [data-rv].is-in, html.js [data-rv-stagger].is-in > * { opacity: 1; transform: none; filter: none; } /* cascata dos filhos de um bloco escalonado */ html.js [data-rv-stagger] > :nth-child(2) { --rv-delay: .08s; } html.js [data-rv-stagger] > :nth-child(3) { --rv-delay: .16s; } html.js [data-rv-stagger] > :nth-child(4) { --rv-delay: .24s; } html.js [data-rv-stagger] > :nth-child(5) { --rv-delay: .32s; } html.js [data-rv-stagger] > :nth-child(6) { --rv-delay: .40s; } html.js [data-rv-stagger] > :nth-child(7) { --rv-delay: .48s; } html.js [data-rv-stagger] > :nth-child(n + 8) { --rv-delay: .56s; } /* o filete do eyebrow se desenha da esquerda para a direita */ html.js [data-rv-stagger] .eyebrow::before, html.js .eyebrow[data-rv]::before { transform: scaleX(0); transform-origin: left center; transition: transform .75s var(--ease) calc(var(--rv-delay, 0s) + .1s); } html.js [data-rv-stagger].is-in .eyebrow::before, html.js .eyebrow[data-rv].is-in::before { transform: scaleX(1); } /* --- SVG: o ícone é "desenhado" da esquerda para a direita ---------------- */ html.js [data-rv="icon"] .ico { clip-path: inset(0 100% 0 0); transition: clip-path .72s var(--ease) calc(var(--rv-delay, 0s) + .2s), transform .3s var(--ease); } html.js [data-rv="icon"].is-in .ico { clip-path: inset(0); } /* ...e um anel percorre a borda do medalhão, como um carregamento */ [data-rv="icon"] { position: relative; } [data-rv="icon"]::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; background: conic-gradient(from -90deg, currentColor var(--rv-a), transparent 0); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px)); mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px)); opacity: 0; pointer-events: none; } html.js [data-rv="icon"].is-in::after { animation: rv-ring 1.1s var(--ease) calc(var(--rv-delay, 0s) + .05s) both; } @keyframes rv-ring { 0% { --rv-a: 0deg; opacity: 1; } 70% { --rv-a: 360deg; opacity: 1; } 100% { --rv-a: 360deg; opacity: 0; } } /* --- entrada imediata do hero (sem esperar rolagem) ---------------------- */ .rv { opacity: 0; transform: translateY(18px); animation: rv .9s var(--ease) forwards; animation-delay: var(--d, 0s); } @keyframes rv { to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } html.js body { animation: none; } html.js [data-rv], html.js [data-rv-stagger] > * { opacity: 1 !important; transform: none !important; filter: none !important; } html.js [data-rv-stagger] .eyebrow::before, html.js .eyebrow[data-rv]::before { transform: scaleX(1) !important; } html.js [data-rv="icon"] .ico { clip-path: none !important; } html.js [data-rv="icon"].is-in::after { animation: none !important; } .rv, .hero__bg img { animation: none; opacity: 1; transform: none; } * { transition-duration: 0s !important; } } /* 5. Home · Hero =========================================================== */ .hero { position: relative; isolation: isolate; margin: var(--gap); border-radius: var(--radius); overflow: hidden; /* altura pela proporção da foto, limitada à viewport (sem aspect-ratio: ele transfere min/max-height para a largura e faz o hero vazar) */ height: min(calc((100vw - 2 * var(--gap)) * 906 / 1630), calc(100vh - 2 * var(--gap))); min-height: 600px; display: grid; grid-template-rows: var(--tab-h) 1fr auto; background: #dfe6ee; } /* foto estática (WebP): uma por dispositivo via