/* ========================================================= Jockey Club de Sorocaba — Placar Totalizador Esmalte cobalto · lâmpadas âmbar · letreiro estêncil ========================================================= */ @font-face { font-family: "Archivo"; src: url("../fonts/archivo.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; } @font-face { font-family: "Big Shoulders"; src: url("../fonts/bigshoulders.woff2") format("woff2"); font-weight: 500 900; font-display: swap; } @font-face { font-family: "Big Shoulders Stencil"; src: url("../fonts/bigshoulders-stencil.woff2") format("woff2"); font-weight: 700 900; font-display: swap; } @font-face { font-family: "Doto"; src: url("../fonts/doto.woff2") format("woff2"); font-weight: 500 900; font-display: swap; } :root { --enamel: #1B34C9; --enamel-2: #1830BC; --enamel-deep: #11249A; --enamel-ink: #0A1868; --housing: #0A0D19; --housing-2: #111628; --housing-3: #1A2140; --lamp: #FFB21A; --lamp-hot: #FFD66E; --lamp-off: rgba(255, 178, 26, .11); --stencil: #F4F6FB; --stencil-2: #C9D1F4; --stencil-3: #93A0DA; --steel: #D6DBE7; --steel-2: #9AA4BD; --paper: #F3F5FA; --paper-2: #E4E8F2; --ink: #0A1440; --ink-2: #3B4670; --live: #E8322B; --rail: #4A5478; --ok: #1FA35C; --r1: #D62B2B; --r1t: #fff; --r2: #FFFFFF; --r2t: #0A0D19; --r3: #1F4FD8; --r3t: #fff; --r4: #F4D021; --r4t: #0A0D19; --r5: #178A45; --r5t: #fff; --r6: #0A0D19; --r6t: #F4D021; --r7: #F07B16; --r7t: #0A0D19; --r8: #F48FB1; --r8t: #0A0D19; --r9: #19B3B1; --r9t: #0A0D19; --r10: #6D3AA8; --r10t: #fff; --f-stencil: "Big Shoulders Stencil", "Big Shoulders", "Archivo Narrow", sans-serif; --f-display: "Big Shoulders", "Archivo Narrow", sans-serif; --f-body: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif; --f-dot: "Doto", ui-monospace, monospace; --ease: cubic-bezier(.16, 1, .3, 1); --ease-in: cubic-bezier(.7, 0, .84, 0); --gutter: clamp(16px, 4vw, 40px); --radius: 4px; --header-h: 76px; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); } body { margin: 0; font-family: var(--f-body); font-size: 16.5px; line-height: 1.55; color: var(--stencil); background-color: var(--enamel); background-image: repeating-linear-gradient(180deg, transparent 0 239px, rgba(6, 14, 70, .22) 239px 240px), radial-gradient(120% 60% at 50% 0%, rgba(255, 255, 255, .06), transparent 60%); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-variant-numeric: tabular-nums; overflow-x: hidden; } body.is-locked { overflow: hidden; } ::selection { background: var(--lamp); color: var(--housing); } :focus-visible { outline: 3px solid var(--lamp); outline-offset: 3px; border-radius: 2px; } html { scrollbar-color: var(--lamp) var(--enamel-deep); } ::-webkit-scrollbar { width: 12px; height: 10px; } ::-webkit-scrollbar-track { background: var(--enamel-deep); } ::-webkit-scrollbar-thumb { background: var(--lamp); border: 3px solid var(--enamel-deep); border-radius: 10px; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; } button { font: inherit; color: inherit; } input, select, textarea { font: inherit; caret-color: var(--lamp); } h1, h2, h3, h4 { margin: 0; font-weight: 800; line-height: 1; text-wrap: balance; } p { margin: 0 0 1em; } p:last-child { margin-bottom: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } table { border-collapse: collapse; width: 100%; } .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--lamp); color: var(--housing); padding: 10px 16px; font-weight: 700; border-radius: 3px; } .skip:focus { top: 12px; } .wrap { width: 100%; max-width: 1320px; margin: 0 auto; padding-inline: var(--gutter); } .ico { width: 1.1em; height: 1.1em; flex: none; fill: currentColor; vertical-align: -.16em; } [hidden] { display: none !important; } /* ---------- Tipografia ---------- */ .h-stencil, .h1, .h2 { font-family: var(--f-stencil); font-weight: 900; text-transform: uppercase; letter-spacing: -.005em; } .h1 { font-size: clamp(3rem, 7.4vw, 6rem); line-height: .86; } .h2 { font-size: clamp(2.2rem, 4.6vw, 3.7rem); line-height: .9; } .h3 { font-family: var(--f-display); font-weight: 800; font-size: clamp(1.35rem, 2.1vw, 1.7rem); line-height: 1.05; text-transform: uppercase; letter-spacing: .01em; } .h4 { font-family: var(--f-display); font-weight: 800; font-size: 1.15rem; line-height: 1.1; text-transform: uppercase; letter-spacing: .03em; } .lead { font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.5; color: var(--stencil-2); max-width: 58ch; } .muted { color: var(--stencil-2); } .label { font-family: var(--f-body); font-stretch: 75%; font-weight: 700; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--stencil-3); } .num { font-family: var(--f-dot); font-weight: 800; color: var(--lamp); letter-spacing: .02em; } .prose { max-width: 70ch; } .prose h2 { font-family: var(--f-display); font-size: clamp(1.6rem, 2.6vw, 2.1rem); text-transform: uppercase; margin: 2.2em 0 .5em; } .prose h3 { font-family: var(--f-display); font-size: 1.3rem; text-transform: uppercase; margin: 1.8em 0 .45em; letter-spacing: .02em; } .prose p, .prose li { color: inherit; } .prose ul { margin: 0 0 1.2em; } .prose ul li { position: relative; padding-left: 1.4em; margin-bottom: .45em; } .prose ul li::before { content: ""; position: absolute; left: .2em; top: .62em; width: .5em; height: .5em; border-radius: 50%; background: var(--lamp); box-shadow: 0 0 8px rgba(255, 178, 26, .6); } .prose ol { counter-reset: n; margin: 0 0 1.2em; } .prose ol li { counter-increment: n; position: relative; padding-left: 2.2em; margin-bottom: .6em; } .prose ol li::before { content: counter(n); position: absolute; left: 0; top: .05em; width: 1.6em; height: 1.6em; display: grid; place-items: center; font: 800 .9rem/1 var(--f-display); background: var(--housing); color: var(--lamp); border-radius: 3px; } .prose a { color: var(--lamp); } .prose strong { font-weight: 700; } /* ---------- Matriz de lâmpadas ---------- */ .lamps { --dot: 4px; --gap: 1.6px; display: inline-flex; align-items: flex-end; gap: calc(var(--dot) * 1.3); line-height: 1; vertical-align: middle; } .lamps-fallback { font-family: var(--f-dot); font-weight: 900; color: var(--lamp); font-size: calc(var(--dot) * 8); line-height: 1; letter-spacing: .06em; text-shadow: 0 0 12px rgba(255, 178, 26, .45); } .lamps.is-ready .lamps-fallback { display: none; } .lamp-ch { display: grid; grid-template-columns: repeat(5, var(--dot)); grid-auto-rows: var(--dot); gap: var(--gap); } .lamp-ch.is-narrow { grid-template-columns: repeat(2, var(--dot)); } .lamp-ch.is-space { grid-template-columns: repeat(2, var(--dot)); } .lamp-ch i { display: block; width: var(--dot); height: var(--dot); border-radius: 50%; background: var(--lamp-off); transition: background .18s linear, box-shadow .18s linear; transition-delay: calc(var(--c, 0) * 22ms); } .lamps.is-lit .lamp-ch i.on { background: radial-gradient(circle at 38% 34%, #FFF5CF 0 18%, var(--lamp) 52%, #C86C00 100%); box-shadow: 0 0 calc(var(--dot) * 1.1) rgba(255, 178, 26, .62); } .lamps--sm { --dot: 3px; --gap: 1.2px; } .lamps--lg { --dot: 6px; --gap: 2px; } .lamps--xl { --dot: 10px; --gap: 3px; } .lamps--red .lamp-ch i { background: rgba(232, 50, 43, .14); } .lamps--red.is-lit .lamp-ch i.on { background: radial-gradient(circle at 38% 34%, #FFD8D2 0 16%, #FF4A3D 52%, #A5140C 100%); box-shadow: 0 0 calc(var(--dot) * 1.1) rgba(232, 50, 43, .7); } /* ---------- Botões ---------- */ .btn { --bg: transparent; --fg: var(--stencil); --wipe: var(--housing); --wipe-fg: var(--lamp); position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: .6em; min-height: 50px; padding: 0 24px; font-family: var(--f-display); font-weight: 800; font-size: 1.08rem; letter-spacing: .07em; text-transform: uppercase; line-height: 1; color: var(--fg); background: var(--bg); border: 0; border-radius: 3px; cursor: pointer; text-decoration: none; white-space: nowrap; transition: color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease); } .btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--wipe); clip-path: inset(0 100% 0 0); transition: clip-path .5s var(--ease); } .btn::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 6px; height: 4px; background: radial-gradient(circle, var(--wipe-fg) 0 1.3px, transparent 1.9px) 0 50% / 8px 4px repeat-x; clip-path: inset(0 100% 0 0); transition: clip-path .55s steps(14, end) .08s; filter: drop-shadow(0 0 3px var(--wipe-fg)); } .btn .ico { transition: transform .45s var(--ease); } .btn:hover, .btn:focus-visible { color: var(--wipe-fg); } .btn:hover::before, .btn:focus-visible::before { clip-path: inset(0 0 0 0); } .btn:hover::after, .btn:focus-visible::after { clip-path: inset(0 0 0 0); } .btn:hover .ico, .btn:focus-visible .ico { transform: translateX(4px); } .btn:active { transform: translateY(1px) scale(.99); } .btn-lamp { --bg: var(--lamp); --fg: var(--housing); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 10px 24px -12px rgba(255, 178, 26, .75); } .btn-ghost { --fg: var(--stencil); --wipe: var(--stencil); --wipe-fg: var(--enamel); box-shadow: inset 0 0 0 2px rgba(244, 246, 251, .75); } .btn-ghost::after { background-image: radial-gradient(circle, var(--enamel) 0 1.3px, transparent 1.9px); filter: none; } .btn-dark { --bg: var(--housing); --fg: var(--stencil); --wipe: var(--lamp); --wipe-fg: var(--housing); } .btn-dark::after { filter: none; } .btn-ink { --bg: transparent; --fg: var(--ink); --wipe: var(--ink); --wipe-fg: var(--lamp); box-shadow: inset 0 0 0 2px var(--ink); } .btn-live { --bg: var(--live); --fg: #fff; --wipe: var(--housing); --wipe-fg: #FF6A5F; } .btn-sm { min-height: 40px; padding: 0 16px; font-size: .95rem; } .btn-block { width: 100%; } .btn[disabled], .btn.is-loading { opacity: .6; pointer-events: none; } .btn.is-loading .btn-label::after { content: ""; display: inline-block; width: .9em; height: .9em; margin-left: .5em; vertical-align: -.1em; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .linklike { background: none; border: 0; padding: 0; cursor: pointer; text-align: left; text-decoration: underline; text-underline-offset: .22em; text-decoration-thickness: 1px; } .arrow-link { display: inline-flex; align-items: center; gap: .5em; font-family: var(--f-display); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; text-decoration: none; color: var(--stencil); position: relative; padding-bottom: 6px; } .arrow-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: radial-gradient(circle, var(--lamp) 0 1.3px, transparent 1.9px) 0 50% / 8px 4px repeat-x; opacity: .3; } .arrow-link::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; z-index: 1; background: radial-gradient(circle, var(--lamp-hot) 0 1.5px, transparent 2px) 0 50% / 8px 4px repeat-x; clip-path: inset(0 100% 0 0); transition: clip-path .5s steps(12, end); filter: drop-shadow(0 0 3px var(--lamp)); } .arrow-link .ico { transition: transform .4s var(--ease); } .arrow-link:hover::before, .arrow-link:focus-visible::before { clip-path: inset(0 0 0 0); } .arrow-link:hover .ico { transform: translateX(5px); } /* ---------- Topo ---------- */ .rail-top { background: var(--housing); color: var(--stencil-2); font-size: .82rem; border-bottom: 1px solid rgba(255, 255, 255, .06); } .rail-top-in { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 36px; } .rail-top p { margin: 0; } .rail-top a { color: var(--stencil); } .rail-next { display: flex; align-items: center; gap: 8px; white-space: nowrap; } .rail-next strong { color: var(--lamp); font-weight: 600; } .badge18 { display: inline-grid; place-items: center; min-width: 30px; height: 20px; padding: 0 5px; margin-right: 6px; border-radius: 3px; background: var(--live); color: #fff; font: 800 .78rem/1 var(--f-display); letter-spacing: .04em; vertical-align: 1px; } .badge18--lg { min-width: 42px; height: 28px; font-size: 1rem; } .dot-live { width: 8px; height: 8px; border-radius: 50%; background: var(--lamp); box-shadow: 0 0 10px var(--lamp); animation: blink 1.6s steps(2, jump-none) infinite; } @keyframes blink { 50% { opacity: .25; } } .site-header { position: sticky; top: 0; z-index: 60; background: rgba(17, 36, 154, .94); backdrop-filter: saturate(1.3) blur(10px); -webkit-backdrop-filter: saturate(1.3) blur(10px); border-bottom: 2px solid rgba(214, 219, 231, .18); transition: box-shadow .3s; } .site-header.is-stuck { box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .8); } .header-in { display: flex; align-items: center; gap: 24px; min-height: var(--header-h); } .logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--stencil); flex: none; } .mark { width: 50px; height: 50px; overflow: visible; } .mark-shoe { fill: var(--steel); } .mark-calk { fill: var(--steel-2); } .mark-socket { fill: var(--housing); } .mark-bulb { opacity: 0; transform-box: fill-box; transform-origin: center; } .mark-q path { fill: var(--stencil); } .mark-slash { fill: var(--lamp) !important; } .logo-word { display: flex; flex-direction: column; line-height: .9; } .logo-top { font: 700 .72rem/1 var(--f-body); font-stretch: 80%; letter-spacing: .22em; text-transform: uppercase; color: var(--stencil-2); margin-bottom: 4px; } .logo-main { font: 900 1.9rem/.85 var(--f-stencil); text-transform: uppercase; letter-spacing: .02em; } .logo--compact .mark { width: 60px; height: 60px; } .logo--compact .logo-main { font-size: 2.3rem; } /* animação da marca: as oito raias acendem em varredura */ .is-lit .mark-bulb, .mark.is-lit .mark-bulb { animation: bulb-on .5s var(--ease) calc(var(--i) * 90ms) both; } .logo:hover .mark-bulb, .logo:focus-visible .mark-bulb { animation: bulb-chase 1.1s linear calc(var(--i) * 70ms) both; } .mark-q { transform-box: fill-box; } .mark .mark-slash { transform-box: fill-box; transform-origin: 50% 50%; } .is-lit .mark-slash { animation: slash-in .7s var(--ease) .75s both; } .logo:hover .mark-slash { animation: slash-flash .9s steps(2, jump-none) .5s 1; } @keyframes bulb-on { 0% { opacity: 0; transform: scale(.4); } 55% { opacity: 1; transform: scale(1.35); filter: drop-shadow(0 0 3px #FFB21A); } 100% { opacity: 1; transform: scale(1); filter: drop-shadow(0 0 1.6px #FFB21A); } } @keyframes bulb-chase { 0% { opacity: 1; filter: drop-shadow(0 0 1.6px #FFB21A); } 20% { opacity: .15; filter: none; } 45% { opacity: 1; transform: scale(1.3); filter: drop-shadow(0 0 4px #FFB21A); } 100% { opacity: 1; transform: scale(1); filter: drop-shadow(0 0 1.6px #FFB21A); } } @keyframes slash-in { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } } @keyframes slash-flash { 50% { opacity: .2; } } .mark-bulb { filter: drop-shadow(0 0 1.6px #FFB21A); } .nav { margin-left: auto; } .nav-list { display: flex; align-items: center; gap: 2px; } .nav-link { position: relative; display: inline-flex; align-items: center; gap: 4px; padding: 10px 11px 12px; background: none; border: 0; cursor: pointer; font: 700 .98rem/1 var(--f-display); letter-spacing: .06em; text-transform: uppercase; color: var(--stencil); text-decoration: none; white-space: nowrap; } .nav-link::after { content: ""; position: absolute; left: 11px; right: 11px; bottom: 2px; height: 4px; background: radial-gradient(circle, var(--lamp) 0 1.3px, transparent 1.9px) 0 50% / 7px 4px repeat-x; clip-path: inset(0 100% 0 0); transition: clip-path .42s steps(10, end); filter: drop-shadow(0 0 3px var(--lamp)); } .nav-link:hover::after, .nav-link:focus-visible::after, .nav-link.is-active::after { clip-path: inset(0 0 0 0); } .nav-link.is-active { color: var(--lamp); } .nav-link .ico { transition: transform .3s var(--ease); } .nav-more-btn[aria-expanded="true"] .ico { transform: rotate(180deg); } .nav-more { position: relative; } .more-panel { position: absolute; right: 0; top: calc(100% + 14px); width: 300px; padding: 8px; background: var(--housing); border-radius: var(--radius); box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .75), inset 0 0 0 1px rgba(255, 255, 255, .08); animation: drop .35s var(--ease); } @keyframes drop { from { opacity: 0; transform: translateY(-8px); } } .more-link { display: flex; align-items: center; gap: 12px; padding: 12px 12px; border-radius: 3px; text-decoration: none; font-weight: 600; font-size: .95rem; position: relative; overflow: hidden; } .more-link .ico { color: var(--lamp); width: 1.25em; height: 1.25em; } .more-link::before { content: ""; position: absolute; inset: 0; background: var(--housing-3); z-index: -1; clip-path: inset(0 100% 0 0); transition: clip-path .4s var(--ease); } .more-link { isolation: isolate; } .more-link:hover::before, .more-link:focus-visible::before, .more-link.is-active::before { clip-path: inset(0 0 0 0); } .header-actions { display: flex; align-items: center; gap: 14px; } .acct-link { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 600; font-size: .95rem; max-width: 160px; } .acct-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .acct-link .ico { width: 1.3em; height: 1.3em; color: var(--lamp); } .acct-link:hover span { text-decoration: underline; text-underline-offset: .25em; } .burger { display: none; width: 46px; height: 46px; border: 0; border-radius: 3px; background: var(--housing); cursor: pointer; position: relative; } .burger span { position: absolute; left: 12px; right: 12px; height: 2px; background: var(--stencil); transition: transform .4s var(--ease), opacity .2s, top .4s var(--ease); } .burger span:nth-child(1) { top: 16px; } .burger span:nth-child(2) { top: 22px; right: 18px; background: var(--lamp); } .burger span:nth-child(3) { top: 28px; } .burger[aria-expanded="true"] span:nth-child(1) { top: 22px; transform: rotate(45deg); } .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .burger[aria-expanded="true"] span:nth-child(3) { top: 22px; transform: rotate(-45deg); } .mnav { position: fixed; inset: 0; top: 0; z-index: 55; background: var(--housing); padding-top: calc(var(--header-h) + 36px); overflow-y: auto; } .mnav-in { padding: 16px var(--gutter) 40px; } .mnav-list li { opacity: 0; transform: translateX(-16px); animation: mnav-in .5s var(--ease) calc(var(--i) * 30ms) forwards; } @keyframes mnav-in { to { opacity: 1; transform: none; } } .mnav-list a { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 0; border-bottom: 1px solid rgba(255, 255, 255, .08); text-decoration: none; font: 800 1.55rem/1 var(--f-display); text-transform: uppercase; letter-spacing: .03em; } .mnav-list a .ico { color: var(--lamp); opacity: .5; } .mnav-list a[aria-current] { color: var(--lamp); } .mnav-foot { display: grid; gap: 12px; margin-top: 28px; } .mnav-legal { color: var(--stencil-2); font-size: .9rem; margin-top: 8px; } .demo-note { background: var(--enamel-ink); color: var(--stencil-2); font-size: .82rem; } .demo-note .wrap { display: flex; gap: 10px; align-items: center; padding-block: 8px; } .demo-note .ico { color: var(--lamp); } /* ---------- Blocos-base ---------- */ .section { padding-block: clamp(56px, 7.5vw, 104px); position: relative; } .section--tight { padding-block: clamp(40px, 6vw, 72px); } .section--deep { background: var(--enamel-deep); } .section--paper { background: var(--paper); color: var(--ink); } .section--housing { background: var(--housing); } .sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: clamp(28px, 4vw, 44px); padding-bottom: 18px; border-bottom: 2px solid rgba(214, 219, 231, .22); } .section--paper .sec-head { border-bottom-color: rgba(10, 20, 64, .15); } .sec-head p { margin: 12px 0 0; color: var(--stencil-2); max-width: 56ch; } .section--paper .sec-head p { color: var(--ink-2); } /* módulo: caixa de lâmpadas com rebites */ .module { position: relative; background: var(--housing); border-radius: var(--radius); color: var(--stencil); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), inset 0 0 0 1px rgba(255, 255, 255, .05), 0 22px 44px -26px rgba(2, 6, 40, .9); } .module--rivets::before { content: ""; position: absolute; inset: 8px; pointer-events: none; background: radial-gradient(circle at 3px 3px, var(--steel-2) 0 1.6px, transparent 2.2px) 0 0 / 100% 100% no-repeat, radial-gradient(circle at calc(100% - 3px) 3px, var(--steel-2) 0 1.6px, transparent 2.2px) 0 0 / 100% 100% no-repeat, radial-gradient(circle at 3px calc(100% - 3px), var(--steel-2) 0 1.6px, transparent 2.2px) 0 0 / 100% 100% no-repeat, radial-gradient(circle at calc(100% - 3px) calc(100% - 3px), var(--steel-2) 0 1.6px, transparent 2.2px) 0 0 / 100% 100% no-repeat; opacity: .55; } .sign { background: var(--paper); color: var(--ink); border-radius: var(--radius); box-shadow: 0 22px 44px -26px rgba(2, 6, 40, .7); } .sign .muted, .sign .lead { color: var(--ink-2); } .sign a:not(.btn) { color: var(--enamel); } /* chip de raia */ .raia { display: inline-grid; place-items: center; width: 28px; height: 28px; flex: none; font: 800 .98rem/1 var(--f-display); border-radius: 3px; background: var(--r1); color: var(--r1t); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .18), 0 0 0 1px rgba(255, 255, 255, .14); transition: transform .35s var(--ease); } .raia-2 { background: var(--r2); color: var(--r2t); } .raia-3 { background: var(--r3); color: var(--r3t); box-shadow: inset 0 -2px 0 rgba(0,0,0,.18), 0 0 0 1px rgba(255,255,255,.55); } .raia-4 { background: var(--r4); color: var(--r4t); } .raia-5 { background: var(--r5); color: var(--r5t); } .raia-6 { background: var(--r6); color: var(--r6t); box-shadow: 0 0 0 1px rgba(255,255,255,.35); } .raia-7 { background: var(--r7); color: var(--r7t); } .raia-8 { background: var(--r8); color: var(--r8t); } .raia-9 { background: var(--r9); color: var(--r9t); } .raia-10 { background: var(--r10); color: var(--r10t); } .raia--lg { width: 40px; height: 40px; font-size: 1.35rem; } /* status */ .status { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px 5px 8px; border-radius: 3px; font: 700 .74rem/1 var(--f-body); font-stretch: 80%; letter-spacing: .1em; text-transform: uppercase; background: rgba(255, 255, 255, .07); color: var(--stencil-2); white-space: nowrap; } .status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .status--programado { color: var(--stencil-2); } .status--aberto { color: var(--lamp); background: rgba(255, 178, 26, .1); } .status--proxima { color: var(--stencil); background: rgba(255, 255, 255, .08); } .status--proxima::before { background: var(--lamp); } .status--aberto::before, .status--proxima::before { box-shadow: 0 0 8px var(--lamp); } .status--oficial, .status--realizada, .status--encerrado { color: #7FE0A8; background: rgba(31, 163, 92, .12); } .status--ao-vivo { color: #FF6B61; background: rgba(232, 50, 43, .14); } .status--ao-vivo::before { animation: blink 1s steps(2, jump-none) infinite; } .sign .status { background: var(--paper-2); color: var(--ink-2); } /* barra de distância (402 m = 100%) */ .distbar { position: relative; display: block; width: 100%; min-width: 90px; height: 22px; } .distbar::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; transform: translateY(-50%); background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .22) 0 2px, transparent 2px 8px); } .distbar-fill { position: absolute; left: 0; top: 50%; height: 6px; width: var(--d); transform: translateY(-50%); background: var(--stencil); border-radius: 1px; transform-origin: left; transition: transform .6s var(--ease), background .3s; } .distbar-fill::after { content: ""; position: absolute; right: -1px; top: -6px; bottom: -6px; width: 2px; background: var(--lamp); box-shadow: 0 0 8px var(--lamp); } .distbar-label { position: absolute; right: 0; top: -14px; font: 700 .72rem/1 var(--f-body); font-stretch: 80%; letter-spacing: .08em; color: var(--stencil-3); } /* ---------- Hero ---------- */ .hero { position: relative; padding-top: clamp(20px, 2.4vw, 32px); padding-bottom: clamp(40px, 5vw, 64px); overflow: hidden; } .hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 3vw, 48px); align-items: stretch; } .hero-copy { display: flex; flex-direction: column; justify-content: center; padding-block: 12px; } .hero h1 { font-family: var(--f-stencil); font-weight: 900; text-transform: uppercase; } .h1-claim { display: block; font-size: clamp(3rem, 5.8vw, 4.9rem); line-height: 1; letter-spacing: -.01em; } .h1-claim em { font-style: normal; color: var(--stencil); text-decoration: underline dotted var(--lamp); text-decoration-thickness: .09em; text-underline-offset: .05em; text-decoration-skip-ink: none; } .hero .lead { margin-top: 18px; } .cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; } .hero-window { position: relative; min-height: 380px; border-radius: var(--radius); overflow: hidden; background: var(--housing); box-shadow: 0 0 0 6px var(--enamel-deep), 0 0 0 8px rgba(214, 219, 231, .25), 0 30px 60px -30px rgba(0, 0, 0, .8); } .hero-window .photo { position: absolute; inset: 0; } .hero-next { position: absolute; left: 14px; right: 14px; bottom: 14px; padding: 18px 20px 20px; } .hero-next-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; } .hero-next-title { font: 800 1.35rem/1 var(--f-display); text-transform: uppercase; letter-spacing: .03em; } .countdown { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 6px 18px; } .countdown-unit { display: flex; flex-direction: column; gap: 8px; } .countdown-unit .label { font-size: .68rem; } .hero-next-meta { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 16px; padding-top: 14px; border-top: 1px dashed rgba(255, 255, 255, .14); font-size: .92rem; color: var(--stencil-2); } .hero-next-meta strong { color: var(--stencil); font-weight: 600; } /* pista (cancha reta) */ .track { margin-top: clamp(20px, 2vw, 28px); padding: 14px 20px 12px; } .track-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 10px; flex-wrap: wrap; } .track-title { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } .track-title .h4 { color: var(--stencil); } .track-title span:not(.h4) { color: var(--stencil-3); font-size: .85rem; } .track-clock { display: flex; align-items: center; gap: 12px; } .track-canvas { display: block; width: 100%; height: 214px; } .track-foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 10px; font-size: .82rem; color: var(--stencil-3); } .track-replay { background: none; border: 0; color: var(--lamp); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font: 700 .8rem/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; padding: 4px 0; } .track-replay:hover { text-decoration: underline; text-underline-offset: .25em; } /* ---------- Foto (duotone cobalto → cor com varredura de photo-finish) ---------- */ .photo { position: relative; overflow: hidden; background: var(--enamel-deep); isolation: isolate; } .photo img { width: 100%; height: 100%; object-fit: cover; } .photo-base { filter: grayscale(1) contrast(1.15) brightness(.95); } .photo::before { content: ""; position: absolute; inset: 0; background: var(--enamel); mix-blend-mode: multiply; z-index: 1; pointer-events: none; } .photo-color { position: absolute; inset: 0; z-index: 2; clip-path: inset(0 100% 0 0); transition: clip-path .9s var(--ease); } .photo::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 2px; z-index: 3; background: var(--lamp); box-shadow: 0 0 14px 2px rgba(255, 178, 26, .7); transform: translateX(-4px); opacity: 0; transition: transform .9s var(--ease), opacity .2s; pointer-events: none; } .photo-shade { position: absolute; inset: 0; z-index: 4; pointer-events: none; background: linear-gradient(180deg, rgba(10, 13, 25, 0) 35%, rgba(10, 13, 25, .88)); } .is-hoverable:hover .photo-color, .is-hoverable:focus-within .photo-color, .photo.is-color .photo-color { clip-path: inset(0 0 0 0); } .is-hoverable:hover .photo::after, .is-hoverable:focus-within .photo::after { opacity: 1; transform: translateX(var(--pw, 600px)); } .photo.is-color::after { display: none; } .photo-credit { position: absolute; right: 8px; top: 8px; z-index: 5; font-size: .66rem; letter-spacing: .06em; color: rgba(255, 255, 255, .7); background: rgba(10, 13, 25, .5); padding: 3px 6px; border-radius: 2px; } /* ---------- Linhas de páreo ---------- */ .pareo-list, .gp-list, .prog-list, .rail-stack { display: grid; gap: 2px; padding: 2px; background: var(--rail); border-radius: var(--radius); } .rail-stack .race + .race { margin-top: 0; } .pareo-row { position: relative; display: grid; align-items: center; gap: 18px; grid-template-columns: 74px 70px minmax(0, 1.5fr) minmax(140px, 1fr) 150px 24px; padding: 16px 20px; background: var(--housing); border-radius: 0; text-decoration: none; overflow: hidden; isolation: isolate; transition: background .35s var(--ease), transform .35s var(--ease); } .pareo-row::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--housing-3), var(--housing-2)); opacity: 0; transition: opacity .35s var(--ease); } .pareo-row::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: var(--lamp); box-shadow: 0 0 16px 3px rgba(255, 178, 26, .55); opacity: 0; transform: translateX(-10px); pointer-events: none; } .pareo-row:hover::before, .pareo-row:focus-visible::before { opacity: 1; } .pareo-row:hover::after, .pareo-row:focus-visible::after { animation: finish-scan .85s var(--ease) forwards; } @keyframes finish-scan { 0% { opacity: 1; transform: translateX(0); } 85% { opacity: 1; } 100% { opacity: 0; transform: translateX(var(--rw, 1100px)); } } .pareo-row:hover .distbar-fill { background: var(--lamp); } .pareo-row:hover .pareo-go { transform: translateX(4px); color: var(--lamp); } .pareo-num { display: flex; flex-direction: column; gap: 6px; } .pareo-num .label { font-size: .64rem; } .pareo-hora { font: 800 1.35rem/1 var(--f-display); letter-spacing: .02em; } .pareo-prova { min-width: 0; } .pareo-prova strong { display: block; font: 800 1.2rem/1.1 var(--f-display); text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pareo-prova span { font-size: .85rem; color: var(--stencil-3); } .pareo-go { color: var(--stencil-3); transition: transform .35s var(--ease), color .35s; } .pareo-go .ico { width: 1.3em; height: 1.3em; } /* ---------- Destaques / GP ---------- */ .feature { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: stretch; } .feature-photo { position: relative; min-height: 460px; border-radius: var(--radius); overflow: hidden; display: block; text-decoration: none; } .feature-photo .photo { position: absolute; inset: 0; } .feature-body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; padding: clamp(20px, 3vw, 36px); } .feature-body .h2 { font-size: clamp(2rem, 3.6vw, 3.1rem); max-width: 14ch; } .feature-meta { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 16px; color: var(--stencil-2); font-size: .95rem; } .feature-meta strong { color: var(--stencil); } .gp-row { position: relative; display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 14px 16px; background: var(--enamel-deep); text-decoration: none; overflow: hidden; isolation: isolate; } .gp-row::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--housing); clip-path: inset(0 100% 0 0); transition: clip-path .55s var(--ease); } .gp-row:hover::before, .gp-row:focus-visible::before { clip-path: inset(0 0 0 0); } .gp-row:hover .gp-date b { color: var(--lamp); } .gp-date { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding-right: 14px; border-right: 1px solid rgba(255, 255, 255, .14); } .gp-date b { font: 900 2rem/.9 var(--f-stencil); transition: color .3s; } .gp-date span { font: 700 .72rem/1 var(--f-body); font-stretch: 80%; letter-spacing: .14em; text-transform: uppercase; color: var(--stencil-2); } .gp-name { display: block; font: 800 1.12rem/1.1 var(--f-display); text-transform: uppercase; letter-spacing: .02em; } .gp-sub { display: block; font-size: .84rem; color: var(--stencil-2); margin-top: 3px; } /* ---------- Faixa Ao Vivo ---------- */ .live-band { position: relative; min-height: 460px; display: grid; align-items: end; overflow: hidden; } .live-band .photo { position: absolute; inset: 0; } .live-band .photo::before { background: var(--enamel-ink); } .live-band-in { position: relative; z-index: 6; padding-block: clamp(40px, 6vw, 72px); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: end; } .live-tag { display: inline-flex; align-items: center; gap: 14px; margin: 0 0 18px; } .live-sub { font: 800 clamp(1.6rem, 3vw, 2.4rem)/1 var(--f-display); text-transform: uppercase; letter-spacing: .01em; max-width: 22ch; color: var(--stencil); } .demo-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 3px; background: var(--enamel-deep); color: var(--stencil-2); font-size: .76rem; white-space: nowrap; } .demo-chip .ico { color: var(--lamp); } .rail-right { display: flex; align-items: center; gap: 16px; } .live-band .h2 { max-width: 16ch; } .live-band p { color: var(--stencil-2); max-width: 52ch; margin-top: 14px; } /* ---------- Resultados (placas de chegada) ---------- */ .results-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px; } .results-side { display: grid; gap: 16px; } .result-card { padding: 22px 22px 18px; display: flex; flex-direction: column; gap: 14px; text-decoration: none; transition: transform .45s var(--ease), box-shadow .45s var(--ease); } .result-card:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(255, 178, 26, .35), 0 30px 50px -26px rgba(2, 6, 40, .95); } .result-card-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; } .result-card-head .h3 { max-width: 20ch; } .result-card-head small { display: block; margin-top: 6px; color: var(--stencil-3); font-size: .84rem; } .podium { display: grid; gap: 6px; } .podium-row { display: grid; grid-template-columns: 30px 28px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 3px; background: rgba(255, 255, 255, .03); } .podium-row:first-child { background: rgba(255, 178, 26, .08); } .podium-pos { font: 900 1.3rem/1 var(--f-stencil); color: var(--stencil-3); } .podium-row:first-child .podium-pos { color: var(--lamp); } .podium-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .podium-name small { display: block; font-weight: 400; color: var(--stencil-3); font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .result-card:hover .raia { transform: translateY(-2px) rotate(-4deg); } .result-card:hover .podium-row:nth-child(2) .raia { transition-delay: .05s; } .result-card:hover .podium-row:nth-child(3) .raia { transition-delay: .1s; } .result-card--big .podium-row { padding: 12px 14px; } /* ---------- Trilho de GPs ---------- */ .gp-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 1fr); gap: 2px; padding: 2px; background: var(--rail); border-radius: var(--radius); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; } .gp-plate { scroll-snap-align: start; position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 28px; min-height: 280px; padding: 22px; text-decoration: none; background: var(--housing); overflow: hidden; isolation: isolate; } .gp-plate::before { content: ""; position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 22px); } .gp-plate::after { content: ""; position: absolute; left: 22px; right: 22px; top: 12px; height: 4px; background: radial-gradient(circle, var(--lamp) 0 1.4px, transparent 2px) 0 50% / 9px 4px repeat-x; clip-path: inset(0 100% 0 0); transition: clip-path .6s steps(16, end); filter: drop-shadow(0 0 3px var(--lamp)); } .gp-plate:hover::after, .gp-plate:focus-visible::after { clip-path: inset(0 0 0 0); } .gp-plate:hover .gp-plate-dist { color: var(--lamp); } .gp-plate-cat { font: 700 .74rem/1 var(--f-body); font-stretch: 80%; letter-spacing: .14em; text-transform: uppercase; color: var(--stencil-3); display: flex; justify-content: space-between; gap: 8px; align-items: center; } .gp-plate-name { font: 900 2rem/.92 var(--f-stencil); text-transform: uppercase; } .gp-plate-dist { font: 900 3.6rem/.8 var(--f-stencil); color: var(--stencil); transition: color .3s; } .gp-plate-dist small { font-size: .38em; letter-spacing: .06em; margin-left: 4px; } .gp-plate-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; color: var(--stencil-2); font-size: .9rem; } /* ---------- Vídeos ---------- */ .video-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; padding: 2px; background: var(--rail); border-radius: var(--radius); } .video-card { position: relative; display: flex; flex-direction: column; text-decoration: none; overflow: hidden; background: var(--housing); } .video-card .photo { aspect-ratio: 16 / 10; } .video-play { position: absolute; z-index: 6; left: 14px; top: 14px; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--lamp); color: var(--housing); transition: transform .45s var(--ease), box-shadow .45s; box-shadow: 0 0 0 0 rgba(255, 178, 26, .5); } .video-play .ico { width: 20px; height: 20px; margin-left: 2px; } .video-card:hover .video-play { transform: scale(1.12); box-shadow: 0 0 0 10px rgba(255, 178, 26, .18); } .video-card--off .video-play { background: rgba(255, 255, 255, .15); color: var(--stencil); } .video-meta { padding: 14px 16px 16px; display: grid; gap: 6px; } .video-meta strong { font: 800 1.05rem/1.1 var(--f-display); text-transform: uppercase; letter-spacing: .02em; } .video-meta span { font-size: .84rem; color: var(--stencil-3); } .video-card--wide { grid-column: span 2; grid-row: span 2; } .video-card--wide .photo { aspect-ratio: auto; flex: 1; min-height: 260px; } /* ---------- Partidor: Como apostar em 8 baias ---------- */ .gate { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 3px; background: var(--rail); border-radius: var(--radius); padding: 3px; box-shadow: 0 22px 44px -26px rgba(2, 6, 40, .9); } .stall { position: relative; padding: 22px 16px 22px; min-height: 250px; display: flex; flex-direction: column; gap: 14px; background: var(--housing); overflow: hidden; isolation: isolate; } .stall::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 100%; z-index: -1; background: linear-gradient(180deg, rgba(255, 178, 26, .14), transparent 70%); transform: translateY(-100%); transition: transform .6s var(--ease); } .stall:hover::before { transform: translateY(0); } .stall:hover .raia { transform: translateY(-3px) scale(1.08); } .stall-doors { position: absolute; left: 0; right: 0; top: 0; height: 6px; background: repeating-linear-gradient(90deg, var(--steel-2) 0 6px, transparent 6px 10px); opacity: .5; } .stall h3 { font: 800 1.1rem/1.1 var(--f-display); text-transform: uppercase; letter-spacing: .02em; } .stall p { font-size: .9rem; color: var(--stencil-2); line-height: 1.45; } /* ---------- Jogo responsável (placa branca) ---------- */ .resp { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: clamp(20px, 4vw, 56px); align-items: center; padding: clamp(28px, 4vw, 48px); } .resp-18 { display: grid; place-items: center; width: clamp(140px, 16vw, 200px); aspect-ratio: 1; border-radius: var(--radius); background: var(--housing); } .resp p { color: var(--stencil-2); margin-top: 12px; max-width: 60ch; } .resp .resp-18 { background: var(--housing-3); } .resp-links { display: grid; gap: 10px; } /* ---------- Page head ---------- */ .page-head { padding-top: clamp(40px, 6vw, 80px); padding-bottom: clamp(28px, 4vw, 48px); position: relative; } .page-head .h1 { max-width: 16ch; } .page-head .lead { margin-top: 18px; } .page-head-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: end; } .crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: .84rem; color: var(--stencil-3); margin-bottom: 22px; } .crumbs a { color: var(--stencil-2); text-decoration: none; } .crumbs a:hover { color: var(--lamp); } .crumbs li + li::before { content: "/"; margin-right: 6px; opacity: .6; } .head-photo { position: relative; height: clamp(180px, 26vw, 340px); border-radius: var(--radius); overflow: hidden; margin-top: 32px; } .head-photo .photo { position: absolute; inset: 0; } /* ---------- Abas / filtros ---------- */ .tabs { display: inline-flex; gap: 4px; padding: 5px; background: var(--housing); border-radius: 5px; flex-wrap: wrap; } .tab { position: relative; padding: 11px 18px; border: 0; background: none; border-radius: 3px; cursor: pointer; font: 800 1rem/1 var(--f-display); letter-spacing: .07em; text-transform: uppercase; color: var(--stencil-2); transition: color .3s, background .3s; } .tab:hover { color: var(--stencil); background: rgba(255, 255, 255, .05); } .tab[aria-selected="true"] { background: var(--lamp); color: var(--housing); } .tab .count { font-family: var(--f-body); font-weight: 700; font-size: .75rem; margin-left: 6px; opacity: .7; } .filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin: 22px 0 28px; } .field { display: grid; gap: 6px; min-width: 150px; } .field > span, .field > label { font: 700 .74rem/1 var(--f-body); font-stretch: 80%; letter-spacing: .12em; text-transform: uppercase; color: var(--stencil-2); } .select, .input, .textarea { width: 100%; min-height: 48px; padding: 12px 14px; border-radius: 3px; border: 0; background: var(--housing); color: var(--stencil); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); transition: box-shadow .25s var(--ease), background .25s; } .select { appearance: none; -webkit-appearance: none; padding-right: 40px; background-image: linear-gradient(45deg, transparent 50%, var(--lamp) 50%), linear-gradient(135deg, var(--lamp) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; cursor: pointer; } .select:hover, .input:hover, .textarea:hover { box-shadow: inset 0 0 0 1px rgba(255, 178, 26, .45); } .select:focus, .input:focus, .textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--lamp); background-color: var(--housing-2); } .input::placeholder, .textarea::placeholder { color: #8390BF; } .textarea { min-height: 140px; resize: vertical; line-height: 1.5; } .sign .input, .sign .select, .sign .textarea, .section--paper .input, .section--paper .select, .section--paper .textarea { background-color: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px rgba(10, 20, 64, .22); } .sign .input:focus, .sign .select:focus, .sign .textarea:focus { box-shadow: inset 0 0 0 2px var(--enamel); } .sign .input::placeholder, .sign .textarea::placeholder { color: #6A7399; } .sign .field > span, .sign .field > label { color: var(--ink-2); } .field-err { color: #FF8A80; font-size: .82rem; min-height: 0; } .sign .field-err { color: #C21E16; } .field.has-err .input, .field.has-err .select { box-shadow: inset 0 0 0 2px #FF6B61; } .sign .field.has-err .input { box-shadow: inset 0 0 0 2px #C21E16; } .check { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; font-size: .95rem; line-height: 1.45; } .check input { appearance: none; -webkit-appearance: none; flex: none; width: 22px; height: 22px; margin: 1px 0 0; border-radius: 3px; background: #fff; box-shadow: inset 0 0 0 2px rgba(10, 20, 64, .35); cursor: pointer; display: grid; place-items: center; transition: background .2s, box-shadow .2s; } .check input::after { content: ""; width: 10px; height: 6px; border-left: 2.5px solid var(--housing); border-bottom: 2.5px solid var(--housing); transform: rotate(-45deg) translate(1px, -1px) scale(0); transition: transform .25s var(--ease); } .check input:checked { background: var(--lamp); box-shadow: none; } .check input:checked::after { transform: rotate(-45deg) translate(1px, -1px) scale(1); } /* ---------- Tabelas do placar ---------- */ .board-table-wrap { overflow-x: auto; border-radius: var(--radius); background: var(--housing); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); } .board-table { min-width: 720px; font-size: .94rem; } .board-table th { text-align: left; padding: 14px 14px; font: 700 .72rem/1 var(--f-body); font-stretch: 78%; letter-spacing: .13em; text-transform: uppercase; color: var(--stencil-3); border-bottom: 1px solid rgba(255, 255, 255, .1); white-space: nowrap; background: var(--housing-2); } .board-table td { padding: 12px 14px; border-bottom: 1px solid rgba(255, 255, 255, .06); vertical-align: middle; } .board-table tbody tr { transition: background .25s; } .board-table tbody tr:hover { background: rgba(255, 178, 26, .06); } .board-table tbody tr:hover .raia { transform: scale(1.12); } .board-table tbody tr:last-child td { border-bottom: 0; } .board-table .t-animal { font-weight: 700; } .board-table .t-animal small { display: block; font-weight: 400; color: var(--stencil-3); font-size: .78rem; margin-top: 2px; } .board-table .t-time { font-family: var(--f-dot); font-weight: 800; color: var(--lamp); font-size: 1.05rem; white-space: nowrap; } .board-table .t-pos { font: 900 1.25rem/1 var(--f-stencil); } .board-table tr.is-winner .t-pos { color: var(--lamp); } .board-table .t-dim { color: var(--stencil-2); } /* páreo accordion (Race centre) */ .race { background: var(--housing); overflow: hidden; } .race + .race { margin-top: 8px; } .race > summary { list-style: none; cursor: pointer; } .race > summary::-webkit-details-marker { display: none; } .race > summary .pareo-row { background: transparent; box-shadow: none; } .race[open] > summary .pareo-go { transform: rotate(90deg); color: var(--lamp); } .race-body { padding: 4px 20px 22px; } .race-body .board-table-wrap { background: var(--housing-2); } .race-lanes { display: grid; gap: 4px; margin: 6px 0 18px; } .lane { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 10px; } .lane-strip { position: relative; height: 34px; border-radius: 2px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 10%), #0E1428; display: flex; align-items: center; padding-left: 12px; font-weight: 600; font-size: .92rem; overflow: hidden; } .lane-strip::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 6px; background: repeating-linear-gradient(180deg, #fff 0 6px, var(--housing) 6px 12px); opacity: .8; } .lane-strip span { position: relative; z-index: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 16px; } .lane-strip small { color: var(--stencil-3); margin-left: 8px; font-weight: 400; } .lane:hover .lane-strip { background-color: #16204A; } .race-note { font-size: .84rem; color: var(--stencil-3); } .empty { padding: clamp(32px, 5vw, 56px); text-align: center; display: grid; justify-items: center; gap: 14px; } .empty .ico { width: 40px; height: 40px; color: var(--lamp); } .empty p { color: var(--stencil-2); max-width: 46ch; } .sign .empty p { color: var(--ink-2); } /* ---------- Grids genéricos ---------- */ .grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(24px, 5vw, 72px); align-items: start; } .split--rev { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } .stack { display: grid; gap: 16px; } .pad { padding: clamp(22px, 3vw, 34px); } .side-nav { position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: 2px; } .side-nav a { display: block; padding: 10px 14px; border-radius: 3px; text-decoration: none; font-weight: 600; color: var(--stencil-2); position: relative; overflow: hidden; isolation: isolate; } .side-nav a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--housing); clip-path: inset(0 100% 0 0); transition: clip-path .4s var(--ease); } .side-nav a:hover { color: var(--stencil); } .side-nav a:hover::before, .side-nav a.is-active::before { clip-path: inset(0 0 0 0); } .side-nav a.is-active { color: var(--lamp); } .doc-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: start; } /* fatos (lista em placa) */ .facts { display: grid; gap: 0; } .facts > div { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, .08); } .sign .facts > div { border-bottom-color: rgba(10, 20, 64, .1); } .facts dt { font: 700 .74rem/1.6 var(--f-body); font-stretch: 80%; letter-spacing: .12em; text-transform: uppercase; color: var(--stencil-3); } .sign .facts dt { color: var(--ink-2); } .facts dd { margin: 0; font-weight: 600; } /* painel de programa oficial */ .prog-row { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 16px 20px; background: var(--housing); position: relative; overflow: hidden; isolation: isolate; } .prog-row::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--housing-3); clip-path: inset(0 100% 0 0); transition: clip-path .5s var(--ease); } .prog-row:hover::before { clip-path: inset(0 0 0 0); } .prog-date b { display: block; font: 900 2.2rem/.85 var(--f-stencil); } .prog-date span { font: 700 .72rem/1 var(--f-body); font-stretch: 80%; letter-spacing: .12em; text-transform: uppercase; color: var(--stencil-2); } .prog-title { font: 800 1.2rem/1.1 var(--f-display); text-transform: uppercase; letter-spacing: .02em; } .prog-sub { color: var(--stencil-3); font-size: .86rem; margin-top: 4px; } .prog-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } /* guia */ .guide-hero-nums { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-top: 28px; } .dist-tile { background: var(--housing); border-radius: var(--radius); padding: 16px 14px; display: grid; gap: 8px; text-decoration: none; position: relative; overflow: hidden; transition: transform .4s var(--ease); } .dist-tile:hover { transform: translateY(-4px); } .dist-tile b { font: 900 2.6rem/.85 var(--f-stencil); } .dist-tile span { font-size: .8rem; color: var(--stencil-3); } .dist-tile .distbar { margin-top: 6px; } /* estatística de apoio sem template de métricas: linha de régua */ .ruler { position: relative; height: 56px; margin: 18px 0 8px; } .ruler::before { content: ""; position: absolute; left: 0; right: 0; top: 28px; height: 2px; background: var(--stencil-3); } .ruler-mark { position: absolute; top: 12px; transform: translateX(-50%); display: grid; justify-items: center; gap: 6px; font: 800 .9rem/1 var(--f-display); } .ruler-mark::before { content: ""; width: 2px; height: 34px; background: var(--lamp); box-shadow: 0 0 8px var(--lamp); order: 1; } .ruler-mark span { order: 2; } /* Apostas: fluxo */ .flow { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; } .steps-bar { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin-bottom: 24px; counter-reset: s; } .steps-bar li { position: relative; padding: 12px 10px 10px; border-radius: 3px; background: var(--housing); font: 700 .78rem/1.2 var(--f-body); font-stretch: 85%; letter-spacing: .06em; text-transform: uppercase; color: var(--stencil-3); counter-increment: s; } .steps-bar li::before { content: counter(s); display: block; font: 900 1.4rem/1 var(--f-stencil); margin-bottom: 6px; color: var(--stencil-3); } .steps-bar li.is-done { color: var(--stencil-2); } .steps-bar li.is-done::before { color: var(--stencil); } .steps-bar li.is-current { background: var(--lamp); color: var(--housing); } .steps-bar li.is-current::before { color: var(--housing); } .choice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; } .choice { position: relative; display: grid; gap: 6px; text-align: left; padding: 16px; border: 0; border-radius: var(--radius); background: var(--housing); color: var(--stencil); cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); transition: box-shadow .3s var(--ease), transform .3s var(--ease), background .3s; overflow: hidden; } .choice:hover { box-shadow: inset 0 0 0 1px rgba(255, 178, 26, .6); transform: translateY(-2px); } .choice[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--lamp); background: var(--housing-3); } .choice[aria-pressed="true"]::after { content: ""; position: absolute; right: 12px; top: 12px; width: 10px; height: 10px; border-radius: 50%; background: var(--lamp); box-shadow: 0 0 10px var(--lamp); } .choice strong { font: 800 1.1rem/1.1 var(--f-display); text-transform: uppercase; letter-spacing: .02em; } .choice > span:not(.raia), .choice > span > span { font-size: .85rem; color: var(--stencil-3); } .choice--runner { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; } .slip { position: sticky; top: calc(var(--header-h) + 24px); padding: 22px; } .slip h2 { margin-bottom: 14px; } .slip-row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px dashed rgba(255, 255, 255, .12); font-size: .92rem; } .slip-row span { color: var(--stencil-3); } .slip-row strong { text-align: right; } .slip-note { font-size: .82rem; color: var(--stencil-3); margin-top: 14px; } .amount-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .amount-row button { padding: 10px 14px; border: 0; border-radius: 3px; background: var(--housing); color: var(--stencil); font: 800 1rem/1 var(--f-display); cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); transition: box-shadow .25s, color .25s; } .amount-row button:hover { box-shadow: inset 0 0 0 1px var(--lamp); color: var(--lamp); } /* Conta / auth */ .auth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: calc(100vh - 150px); } .auth-side { position: relative; overflow: hidden; } .auth-side .photo { position: absolute; inset: 0; } .auth-side-copy { position: absolute; z-index: 6; left: 0; right: 0; bottom: 0; padding: clamp(24px, 4vw, 56px); } .auth-main { display: grid; align-items: center; padding: clamp(28px, 5vw, 72px) var(--gutter); } .auth-card { width: 100%; max-width: 520px; margin: 0 auto; padding: clamp(24px, 3.5vw, 40px); } .auth-card .h2 { font-size: clamp(2rem, 3.6vw, 2.8rem); color: var(--ink); } .auth-card form { display: grid; gap: 16px; margin-top: 24px; } .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .form-grid .full { grid-column: 1 / -1; } .form-msg { padding: 12px 14px; border-radius: 3px; font-size: .92rem; display: flex; gap: 10px; align-items: flex-start; } .form-msg--err { background: #FDE8E6; color: #9E1810; } .form-msg--ok { background: #E4F6EC; color: #11613A; } .auth-alt { margin-top: 18px; font-size: .95rem; color: var(--ink-2); } .pw-wrap { position: relative; } .pw-wrap .input { padding-right: 52px; } .pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: 0; background: none; cursor: pointer; color: var(--ink-2); display: grid; place-items: center; } .reg-steps { display: flex; gap: 4px; margin: 20px 0 6px; } .reg-steps span { flex: 1; height: 6px; border-radius: 2px; background: var(--paper-2); position: relative; overflow: hidden; } .reg-steps span::after { content: ""; position: absolute; inset: 0; background: var(--enamel); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); } .reg-steps span.is-done::after { transform: scaleX(1); } .reg-step-label { font: 700 .76rem/1 var(--f-body); font-stretch: 80%; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); } .reg-panel { display: grid; gap: 16px; animation: panel-in .45s var(--ease); } @keyframes panel-in { from { opacity: 0; transform: translateX(14px); } } .reg-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; } .pw-meter { height: 4px; border-radius: 2px; background: var(--paper-2); overflow: hidden; margin-top: 6px; } .pw-meter i { display: block; height: 100%; width: 100%; background: #C21E16; transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease), background .3s; } .acct { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 24px; align-items: start; } .acct-menu { padding: 12px; position: sticky; top: calc(var(--header-h) + 24px); } .acct-menu button { width: 100%; display: flex; align-items: center; gap: 10px; padding: 11px 12px; border: 0; background: none; border-radius: 3px; cursor: pointer; text-align: left; font-weight: 600; color: var(--stencil-2); transition: background .25s, color .25s; } .acct-menu button .ico { color: var(--stencil-3); } .acct-menu button:hover { background: rgba(255, 255, 255, .05); color: var(--stencil); } .acct-menu button[aria-selected="true"] { background: var(--lamp); color: var(--housing); } .acct-menu button[aria-selected="true"] .ico { color: var(--housing); } .acct-panel { padding: clamp(22px, 3vw, 34px); } .acct-panel .h3 { margin-bottom: 18px; } .verif { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 16px 0 22px; } .verif li { padding: 14px; border-radius: 3px; background: var(--housing-2); color: var(--stencil-3); font-weight: 600; font-size: .92rem; display: flex; gap: 10px; align-items: center; } .verif li.is-current { background: rgba(255, 178, 26, .12); color: var(--lamp); box-shadow: inset 0 0 0 1px rgba(255, 178, 26, .5); } .verif li.is-done { color: #7FE0A8; } /* Ouvidoria: fluxo */ .proto-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 18px 0 26px; } .proto-flow li { padding: 14px; border-radius: 3px; background: var(--paper-2); color: var(--ink); font-weight: 700; font-size: .92rem; display: grid; gap: 6px; } .proto-flow li b { font: 900 1.5rem/1 var(--f-stencil); color: var(--enamel); } /* FAQ */ .faq details { border-bottom: 1px solid rgba(255, 255, 255, .1); } .faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 18px 0; font: 800 1.12rem/1.2 var(--f-display); text-transform: uppercase; letter-spacing: .02em; transition: color .25s; } .faq summary::-webkit-details-marker { display: none; } .faq summary:hover { color: var(--lamp); } .faq summary .ico { transition: transform .35s var(--ease); color: var(--lamp); flex: none; } .faq details[open] summary .ico { transform: rotate(45deg); } .faq details > div { padding: 0 0 20px; color: var(--stencil-2); max-width: 70ch; } .help-cats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; } .help-cats a { padding: 10px 14px; border-radius: 3px; background: var(--housing); text-decoration: none; font-weight: 600; font-size: .92rem; transition: background .25s, color .25s; } .help-cats a:hover { background: var(--lamp); color: var(--housing); } /* Ao vivo */ .live-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; } .player { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: var(--housing); } .player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .player-off { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 24px; z-index: 6; } .player-off .photo { position: absolute; inset: 0; z-index: -1; } .live-panel { padding: 20px; display: grid; gap: 4px; } .live-panel .facts > div { grid-template-columns: 120px minmax(0, 1fr); } /* toast */ .toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 120; background: var(--housing); color: var(--stencil); padding: 14px 18px; border-radius: 4px; box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(255, 178, 26, .4); max-width: min(92vw, 520px); animation: toast-in .45s var(--ease); } @keyframes toast-in { from { opacity: 0; transform: translate(-50%, 12px); } } /* ---------- Age gate ---------- */ .agegate { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; padding: 16px; background: rgba(8, 16, 80, .86); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: fade .4s ease; } @keyframes fade { from { opacity: 0; } } .agegate-board { width: min(560px, 100%); padding: clamp(26px, 4vw, 44px); background: var(--housing); border-radius: 6px; text-align: center; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9), inset 0 0 0 1px rgba(255, 255, 255, .08); display: grid; justify-items: center; gap: 18px; } .agegate-mark .mark { width: 64px; height: 64px; } .agegate-q { font: 900 clamp(1.9rem, 4.2vw, 2.6rem)/.95 var(--f-stencil); text-transform: uppercase; } .agegate-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .agegate-note { font-size: .88rem; color: var(--stencil-2); max-width: 44ch; } .agegate-denied { background: rgba(232, 50, 43, .12); color: #FFD0CC; border-radius: 4px; padding: 14px; font-size: .92rem; } .agegate-denied a { color: #fff; } /* ---------- Cookies ---------- */ .cookiebar { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 110; display: flex; justify-content: center; pointer-events: none; } .cookiebar-in { pointer-events: auto; width: min(980px, 100%); display: flex; gap: 18px; align-items: center; justify-content: space-between; padding: 16px 18px; background: var(--housing); border-radius: 5px; box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .85), inset 0 0 0 1px rgba(255, 255, 255, .08); animation: toast-in .5s var(--ease); font-size: .9rem; color: var(--stencil-2); } .cookiebar-in p { margin: 0; } .cookiebar-in a { color: var(--lamp); } .cookiebar-actions { display: flex; gap: 8px; flex-wrap: wrap; flex: none; } .cookie-dialog { border: 0; padding: 0; border-radius: 6px; background: var(--paper); color: var(--ink); width: min(560px, calc(100vw - 32px)); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9); } .cookie-dialog::backdrop { background: rgba(8, 16, 80, .7); backdrop-filter: blur(4px); } .cookie-form { padding: 26px; display: grid; gap: 4px; } .cookie-form .h3 { margin-bottom: 12px; } .switch-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid rgba(10, 20, 64, .1); cursor: pointer; position: relative; } .switch-row small { display: block; color: var(--ink-2); font-size: .85rem; margin-top: 2px; } .switch-row input { position: absolute; opacity: 0; width: 1px; height: 1px; } .switch { width: 48px; height: 28px; border-radius: 14px; background: #C3C9DA; position: relative; transition: background .25s; } .switch::after { content: ""; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .3s var(--ease); } .switch-row input:checked + .switch { background: var(--enamel); } .switch-row input:checked + .switch::after { transform: translateX(20px); } .switch-row input:disabled + .switch { opacity: .55; } .switch-row input:focus-visible + .switch { outline: 3px solid var(--lamp); outline-offset: 2px; } .cookie-form-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; } /* ---------- Rodapé ---------- */ .site-footer { background: var(--housing); color: var(--stencil-2); position: relative; padding-bottom: 28px; margin-top: 0; } .footer-finish { height: 14px; background: repeating-linear-gradient(90deg, var(--stencil) 0 14px, var(--housing) 14px 28px); opacity: .9; } .footer-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: clamp(28px, 5vw, 80px); padding-block: clamp(44px, 6vw, 72px) 36px; } .footer-brand { display: grid; gap: 18px; align-content: start; justify-items: start; } .footer-claim { font: 800 1.4rem/1.05 var(--f-display); color: var(--stencil); text-transform: uppercase; max-width: 16ch; margin: 0; } .footer-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } .footer-h { font: 700 .76rem/1 var(--f-body); font-stretch: 80%; letter-spacing: .14em; text-transform: uppercase; color: var(--stencil-3); margin-bottom: 14px; } .footer-col li { margin-bottom: 9px; } .footer-col a, .footer-col .linklike { color: var(--stencil-2); text-decoration: none; font-size: .93rem; background-image: linear-gradient(var(--lamp), var(--lamp)); background-size: 0 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .4s var(--ease), color .25s; padding-bottom: 2px; } .footer-col a:hover, .footer-col .linklike:hover { color: var(--stencil); background-size: 100% 1px; } .footer-plates { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; padding: 2px; background: var(--rail); border-radius: var(--radius); } .plate { padding: 18px; background: var(--housing-2); font-size: .88rem; line-height: 1.55; } .plate strong { color: var(--stencil); } .plate-h { font: 700 .72rem/1 var(--f-body); font-stretch: 80%; letter-spacing: .14em; text-transform: uppercase; color: var(--stencil-3); margin-bottom: 10px; } .plate-small { font-size: .8rem; color: var(--stencil-3); margin-top: 8px; } .plate--resp { background: #2A1320; } .footer-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 28px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .08); font-size: .82rem; color: var(--stencil-3); } .footer-bottom p { margin: 0; } .footer-bottom a { color: var(--stencil-2); } /* ---------- Revelação (conteúdo visível por padrão; JS só anima) ---------- */ .js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .8s var(--ease); } .js .reveal.is-in { opacity: 1; transform: none; } /* ---------- Responsivo ---------- */ @media (max-width: 1240px) { .nav-link { padding-inline: 8px; font-size: .92rem; } .nav-link::after { left: 8px; right: 8px; } .acct-link span { display: none; } } @media (max-width: 1100px) { .nav { display: none; } .burger { display: block; } .header-actions { margin-left: auto; } .acct-link span { display: inline; } .pareo-row { grid-template-columns: 64px 60px minmax(0, 1fr) 130px 24px; } .pareo-row .status { display: none; } .video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gate { grid-template-columns: repeat(4, minmax(0, 1fr)); } .footer-top { grid-template-columns: 1fr; } .footer-plates { grid-template-columns: repeat(2, minmax(0, 1fr)); } .flow { grid-template-columns: 1fr; } .slip { position: static; } .live-grid { grid-template-columns: 1fr; } .guide-hero-nums { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 900px) { :root { --header-h: 66px; } .hero-grid, .feature, .results-grid, .split, .split--rev, .doc-layout, .acct, .auth { grid-template-columns: 1fr; } .hero-window { min-height: 420px; } .feature-photo { min-height: 380px; } .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .resp { grid-template-columns: 1fr; } .side-nav, .acct-menu { position: static; } .side-nav { display: flex; overflow-x: auto; gap: 4px; } .side-nav a { white-space: nowrap; } .acct-menu { display: flex; overflow-x: auto; gap: 4px; } .acct-menu button { width: auto; white-space: nowrap; } .auth-side { min-height: 260px; } .live-band-in { grid-template-columns: 1fr; } .page-head-grid { grid-template-columns: 1fr; } .steps-bar { grid-template-columns: repeat(3, minmax(0, 1fr)); } .proto-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 680px) { body { font-size: 16px; } .rail-next { display: none; } .rail-top-in { justify-content: center; text-align: center; font-size: .76rem; } .logo-main { font-size: 1.55rem; } .logo-top { font-size: .62rem; } .mark { width: 42px; height: 42px; } .header-actions .btn { display: none; } .acct-link span { display: none; } .acct-link { width: 46px; height: 46px; justify-content: center; background: var(--housing); border-radius: 3px; } .sec-head { flex-direction: column; align-items: flex-start; } .hero-window { min-height: 380px; } .countdown { gap: 6px 12px; } .pareo-row { grid-template-columns: 52px minmax(0, 1fr) 22px; gap: 12px 14px; padding: 14px; } .pareo-row .pareo-hora { display: none; } .pareo-row .distbar { grid-column: 2 / 3; grid-row: 2; } .pareo-row .pareo-go { grid-row: 1; grid-column: 3; } .pareo-prova strong { white-space: normal; } .video-grid { grid-template-columns: 1fr; } .video-card--wide { grid-column: auto; grid-row: auto; } .gate { grid-template-columns: 1fr 1fr; } .stall { min-height: 0; } .grid-2, .grid-3, .form-grid { grid-template-columns: 1fr; } .footer-cols { grid-template-columns: 1fr 1fr; } .footer-plates { grid-template-columns: 1fr; } .cookiebar-in { flex-direction: column; align-items: stretch; } .cookiebar-actions .btn { flex: 1; } .facts > div { grid-template-columns: 1fr; gap: 4px; } .gp-row { grid-template-columns: 70px minmax(0, 1fr); } .gp-row .status { grid-column: 2; justify-self: start; } .prog-row { grid-template-columns: 80px minmax(0, 1fr); } .prog-actions { grid-column: 1 / -1; justify-content: flex-start; } .guide-hero-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); } .verif { grid-template-columns: 1fr; } .steps-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); } .track { padding: 14px 12px; } .track-canvas { height: 220px; } .tabs { display: flex; width: 100%; } .tab { flex: 1; padding-inline: 10px; } .filters .field { flex: 1 1 140px; min-width: 0; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; } .mark-bulb { opacity: 1; } .js .reveal { opacity: 1; transform: none; } } @media print { .site-header, .rail-top, .site-footer, .cookiebar, .agegate, .demo-note { display: none !important; } body { background: #fff; color: #000; } } /* listas quando o próprio