/* ========================================================= FELIPE MOTO RACING — Peças e Serviços Garagem americana · chapa, cromo, neon ========================================================= */ :root { --asphalt: #0A0B0E; --graphite: #15171C; --steel: #22252C; --steel-2: #2E323B; --royal: #0033A0; --royal-glow: #2F6BFF; --red: #D0021B; --red-glow: #FF2A3D; --chrome: #C9CED6; --chrome-dim: #8A919C; --white: #F4F5F7; --f-display: "Anton", "Oswald", Impact, "Arial Narrow", sans-serif; --f-stencil: "Black Ops One", "Anton", Impact, sans-serif; --f-label: "Oswald", "Arial Narrow", sans-serif; --f-body: "Barlow", "Segoe UI", Roboto, Arial, sans-serif; --chamfer: 18px; --gutter: clamp(16px, 4vw, 40px); --header-h: 72px; --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); --concrete: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='5'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .52 0 0 0 0 .56 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E"); --star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cpath fill='%23F4F5F7' fill-opacity='.06' d='M14 4l2.6 5.8 6.2.6-4.7 4.2 1.4 6.2L14 17.6l-5.5 3.2 1.4-6.2L5.2 10.4l6.2-.6zM42 32l2.6 5.8 6.2.6-4.7 4.2 1.4 6.2L42 45.6l-5.5 3.2 1.4-6.2-4.7-4.2 6.2-.6z'/%3E%3C/svg%3E"); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); -webkit-text-size-adjust: 100%; /* No mobile Safari quem rola a página é o , não o . Sem isso aqui, um leve estouro de largura durante o carregamento das fontes (ou de uma imagem) deixa a página "empurrada" pro lado, com uma tarja preta sobrando à direita. */ overflow-x: hidden; overscroll-behavior-x: none; } body { margin: 0; background-color: var(--asphalt); background-image: var(--noise), var(--concrete); color: var(--chrome); font: 400 1.0625rem/1.65 var(--f-body); overflow-x: hidden; overscroll-behavior-x: none; } img { max-width: 100%; display: block; } a { color: inherit; } .sprite { position: absolute; width: 0; height: 0; overflow: hidden; } :focus-visible { outline: 2px solid var(--royal-glow); outline-offset: 3px; } .wrap { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: var(--gutter); } /* ---------- Tipos de efeito ---------- */ .chrome-text { background: linear-gradient(180deg, #FFFFFF 0%, #DDE1E7 38%, #6C7380 50%, #F1F3F6 58%, #9AA1AC 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.25); filter: drop-shadow(0 2px 0 #000) drop-shadow(0 0 14px rgba(47,107,255,.35)); } .neon-red { color: var(--white); -webkit-text-stroke: 1px var(--red-glow); text-shadow: 0 0 6px var(--red-glow), 0 0 22px rgba(208,2,27,.8), 0 3px 0 #5a0010; } .neon-blue { color: var(--white); -webkit-text-stroke: 1px var(--royal-glow); text-shadow: 0 0 6px var(--royal-glow), 0 0 22px rgba(0,51,160,.9), 0 3px 0 #001a55; } .stars-row { display: inline-flex; gap: 3px; vertical-align: middle; } .stars-row svg { width: 12px; height: 12px; color: var(--white); } /* ---------- Botões (placas chanfradas) ---------- */ .btn { --cut: 10px; display: inline-flex; align-items: center; justify-content: center; gap: .55em; padding: .8em 1.4em; font: 600 .95rem/1 var(--f-label); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; color: var(--white); border: 0; cursor: pointer; clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); transition: transform .15s ease, filter .2s ease, background-color .2s ease; white-space: nowrap; } .btn svg { width: 1.2em; height: 1.2em; flex: none; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn-lg { font-size: 1.05rem; padding: 1.05em 1.8em; --cut: 14px; } .btn-block { width: 100%; } .btn-red { background: linear-gradient(180deg, #F0112D 0%, var(--red) 55%, #9C0114 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.35); } .btn-red:hover { filter: drop-shadow(0 0 12px rgba(255,42,61,.75)); } .btn-blue { background: linear-gradient(180deg, #1C52D0 0%, var(--royal) 55%, #00216B 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.3); } .btn-blue:hover { filter: drop-shadow(0 0 12px rgba(47,107,255,.8)); } .btn-ghost { background: linear-gradient(var(--asphalt), var(--asphalt)) padding-box, linear-gradient(180deg, #fff, #6C7380 50%, #E6E9EE) border-box; border: 2px solid transparent; color: var(--white); clip-path: none; } .btn-ghost:hover { filter: drop-shadow(0 0 10px rgba(201,206,214,.5)); } /* ---------- HEADER ---------- */ .site-header { position: fixed; inset: 0 0 auto 0; z-index: 50; padding-top: env(safe-area-inset-top, 0px); background: rgba(10,11,14,.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid rgba(201,206,214,.08); transition: background-color .25s ease, box-shadow .25s ease; } .site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; background: linear-gradient(90deg, var(--royal) 0 33%, var(--white) 33% 36%, var(--red) 36% 100%); transform: scaleX(0); transform-origin: left; transition: transform .4s ease; } .site-header.scrolled { background: rgba(10,11,14,.95); box-shadow: 0 10px 30px rgba(0,0,0,.5); } .site-header.scrolled::after { transform: scaleX(1); } .header-inner { height: var(--header-h); display: flex; align-items: center; gap: 24px; } .brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex: none; } /* Piloto recortado da logo oficial */ .brand-rider { width: 74px; height: auto; filter: drop-shadow(0 0 8px rgba(47,107,255,.55)); } .brand-text { display: flex; flex-direction: column; line-height: .9; } .brand-name { font: 400 1.7rem/1 var(--f-display); letter-spacing: .04em; background: linear-gradient(180deg, #fff 0%, #DDE1E7 40%, #6C7380 52%, #F1F3F6 60%, #9AA1AC 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 8px rgba(47,107,255,.45)); } .brand-sub { font: 700 .72rem/1 var(--f-label); letter-spacing: .32em; color: var(--white); background: var(--royal); padding: 3px 6px 2px; margin-top: 3px; box-shadow: 0 0 10px rgba(47,107,255,.55); } .main-nav { margin-left: auto; display: flex; align-items: center; gap: 4px; } .main-nav a:not(.btn) { position: relative; padding: 10px 12px; font: 500 .88rem/1 var(--f-label); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; color: var(--chrome); transition: color .2s ease; } .main-nav a:not(.btn)::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; background: var(--red-glow); box-shadow: 0 0 8px var(--red-glow); transform: scaleX(0); transition: transform .2s ease; } .main-nav a:not(.btn):hover, .main-nav a.active { color: var(--white); } .main-nav a:not(.btn):hover::after, .main-nav a.active::after { transform: scaleX(1); } .nav-cta { display: none; } .menu-toggle { display: none; margin-left: auto; width: 46px; height: 46px; background: var(--steel); border: 1px solid rgba(201,206,214,.2); cursor: pointer; padding: 12px 10px; flex-direction: column; justify-content: space-between; } .menu-toggle span { display: block; height: 3px; background: var(--white); transition: transform .25s ease, opacity .2s ease; } .menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8.5px) rotate(45deg); } .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); } /* ---------- HERO ---------- */ .hero { position: relative; isolation: isolate; overflow: hidden; padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + clamp(48px, 9vw, 110px)); padding-bottom: clamp(64px, 10vw, 130px); } .hero-bg { position: absolute; inset: -20px; z-index: -2; background: radial-gradient(ellipse 60% 70% at 78% 40%, rgba(208,2,27,.28), transparent 60%), radial-gradient(ellipse 50% 60% at 10% 90%, rgba(0,51,160,.35), transparent 60%), linear-gradient(90deg, rgba(10,11,14,.96) 0%, rgba(10,11,14,.78) 45%, rgba(10,11,14,.55) 100%), url("https://images.unsplash.com/photo-1558981806-ec527fa84c39?auto=format&fit=crop&w=1600&q=70") center/cover no-repeat; } .hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--noise), linear-gradient(180deg, transparent 70%, var(--asphalt)); pointer-events: none; } .hero-stripes { position: absolute; right: -10%; bottom: 0; width: 60%; height: 16px; z-index: -1; transform: skewX(-30deg); background: linear-gradient(180deg, var(--red) 0 38%, transparent 38% 50%, var(--white) 50% 62%, transparent 62% 74%, var(--royal) 74% 100%); opacity: .9; } .hero-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 40px; } .kicker, .eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; font: 600 .85rem/1 var(--f-label); letter-spacing: .28em; text-transform: uppercase; color: var(--white); } .kicker { padding: 8px 14px 8px 10px; background: var(--royal); box-shadow: 0 0 18px rgba(47,107,255,.45); clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%); } .hero-title { margin: 0; font: 400 clamp(2.9rem, 8.4vw, 6.6rem)/.92 var(--f-display); text-transform: uppercase; letter-spacing: .01em; text-wrap: balance; } .hero-title span { display: block; } .hero-sub { max-width: 54ch; margin: 26px 0 34px; font-size: clamp(1.05rem, 1.6vw, 1.22rem); color: #D5D9E0; } .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; } /* Selo */ .hero-badge { transform: rotate(-8deg); } .badge-ring { position: relative; width: 220px; height: 220px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; background: radial-gradient(circle, var(--graphite) 0 58%, transparent 58.5%), repeating-conic-gradient(from 0deg, var(--red) 0 10deg, var(--white) 10deg 12deg, var(--royal) 12deg 22deg, var(--white) 22deg 24deg); box-shadow: 0 0 0 6px var(--asphalt), 0 0 0 9px var(--chrome-dim), 0 0 40px rgba(255,42,61,.35), 0 20px 50px rgba(0,0,0,.6); } .badge-ring::before { content: ""; position: absolute; inset: 30px; border-radius: 50%; border: 1px dashed rgba(201,206,214,.35); } .badge-top { font: 400 .78rem/1.1 var(--f-stencil); letter-spacing: .08em; color: var(--chrome); max-width: 120px; text-transform: uppercase; } .badge-rider { width: 96px; height: auto; filter: drop-shadow(0 0 8px rgba(255,42,61,.6)); } .badge-since { font: 400 1rem/1 var(--f-stencil); color: var(--white); text-transform: uppercase; letter-spacing: .06em; } .badge-since b { font-weight: 400; color: var(--white); text-shadow: 0 0 10px var(--royal-glow); } .badge-stars { display: flex; gap: 2px; } .badge-stars svg { width: 10px; height: 10px; color: var(--white); } /* ---------- FAIXA DE CONFIANÇA ---------- */ .trust { position: relative; background: repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 3px), linear-gradient(180deg, #2B2F37, #1A1D23 55%, #24282F); border-block: 1px solid rgba(255,255,255,.08); } .checker { height: 14px; background: repeating-conic-gradient(var(--white) 0 25%, #111 0 50%) 0 0 / 14px 14px; opacity: .9; } .trust-list { list-style: none; margin: 0 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding-block: 26px; } .trust-list li { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 6px 12px; font: 600 .95rem/1.15 var(--f-label); text-transform: uppercase; letter-spacing: .08em; color: var(--white); } .trust-list li + li { border-left: 1px solid rgba(201,206,214,.14); } .trust-list svg { flex: none; width: 40px; height: 40px; color: var(--chrome); filter: drop-shadow(0 0 6px rgba(47,107,255,.6)); } .trust-list li:nth-child(even) svg { filter: drop-shadow(0 0 6px rgba(255,42,61,.6)); } /* ---------- SEÇÕES ---------- */ .section { position: relative; padding-block: clamp(72px, 10vw, 130px); } .section-head { max-width: 760px; margin-bottom: clamp(36px, 5vw, 60px); } .eyebrow { color: var(--red-glow); } .eyebrow::before { content: ""; width: 34px; height: 4px; background: linear-gradient(90deg, var(--royal) 0 45%, var(--white) 45% 55%, var(--red) 55%); } .section-title { margin: 0; font: 400 clamp(2.4rem, 5.6vw, 4.4rem)/.95 var(--f-display); text-transform: uppercase; color: var(--white); letter-spacing: .01em; text-wrap: balance; text-shadow: 0 3px 0 #000, 0 0 30px rgba(47,107,255,.25); } .section-lead { margin: 18px 0 0; max-width: 60ch; color: #B9BEC7; } .section-lead.big { font: 500 clamp(1.2rem, 2.2vw, 1.55rem)/1.35 var(--f-label); color: var(--white); max-width: 34ch; } /* Divisor diagonal entre seções */ .services::before, .about::before, .reviews::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: repeating-linear-gradient(-45deg, var(--red) 0 14px, var(--asphalt) 14px 28px); opacity: .8; } .about::before { background: repeating-linear-gradient(-45deg, var(--royal) 0 14px, var(--asphalt) 14px 28px); } /* ---------- PLACAS METÁLICAS ---------- */ .plate { --c: var(--chamfer); position: relative; background: repeating-linear-gradient(90deg, rgba(255,255,255,.022) 0 1px, transparent 1px 4px), linear-gradient(160deg, #2F333C 0%, #1C1F25 45%, #262A31 100%); clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c)); transition: transform .25s ease, filter .25s ease; } /* Rebites nos quatro cantos */ .plate::after { content: ""; position: absolute; inset: 12px; pointer-events: none; z-index: 3; --rivet: radial-gradient(circle at 35% 35%, #F4F5F7 0 1.2px, #A7ADB7 2px, #4A505B 4.5px, #15171C 5.5px, transparent 6px); background: var(--rivet) left top / 14px 14px no-repeat, var(--rivet) right top / 14px 14px no-repeat, var(--rivet) left bottom / 14px 14px no-repeat, var(--rivet) right bottom / 14px 14px no-repeat; } /* Borda chanfrada simulada */ .plate::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,.14), transparent 30%, transparent 80%, rgba(0,0,0,.35)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); } .plate-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } .service { display: flex; flex-direction: column; } .service.featured { grid-column: span 2; grid-row: span 1; } .service.wide { grid-column: span 3; flex-direction: row; } .service.wide .plate-photo { flex: 1.2; aspect-ratio: auto; min-height: 240px; } .service.wide .plate-body { flex: 1; align-self: center; } /* As fotos da oficina são verticais: recorte quadrado aproveita melhor. */ .plate-photo { position: relative; aspect-ratio: 1 / 1; max-width: 100%; background-color: var(--steel); background-position: center 30%; background-size: cover; background-repeat: no-repeat; filter: saturate(.85) contrast(1.05); transition: filter .35s ease; } .service.featured .plate-photo { aspect-ratio: 16 / 11; } /* Serviço ainda sem foto */ .plate-photo.is-empty { background-image: repeating-linear-gradient(-45deg, rgba(47,107,255,.10) 0 16px, transparent 16px 32px), linear-gradient(160deg, #23262D, #16181D); } .plate-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(21,23,28,.95)); } .plate-body { position: relative; padding: 0 26px 30px; margin-top: -34px; z-index: 1; } .plate-icon { width: 52px; height: 52px; padding: 10px; color: var(--white); background: linear-gradient(180deg, #1C52D0, var(--royal)); clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); box-shadow: 0 0 0 1px rgba(255,255,255,.2); transition: background .25s ease; } .service:nth-child(even) .plate-icon { background: linear-gradient(180deg, #F0112D, var(--red)); } .plate-body h3 { margin: 14px 0 8px; font: 400 clamp(1.4rem, 2.2vw, 1.75rem)/1.05 var(--f-display); text-transform: uppercase; letter-spacing: .02em; color: var(--white); } .plate-body p { margin: 0; color: #AEB4BD; font-size: 1rem; max-width: 52ch; } .plate-tag { position: absolute; right: 26px; top: 46px; font: 400 .72rem/1 var(--f-stencil); text-transform: uppercase; letter-spacing: .06em; color: var(--white); padding: 6px 10px; background: var(--red); transform: rotate(-3deg); box-shadow: 0 0 14px rgba(255,42,61,.55); } .service:hover { transform: translateY(-4px); filter: drop-shadow(0 0 14px rgba(47,107,255,.55)); } .service:nth-child(even):hover { filter: drop-shadow(0 0 14px rgba(255,42,61,.55)); } .service:hover .plate-photo { filter: saturate(1.1) contrast(1.1); } /* ---------- MOTOS QUE ATENDEMOS ---------- */ .bikes { background: linear-gradient(180deg, var(--asphalt), transparent 20%, transparent 80%, var(--asphalt)), linear-gradient(115deg, rgba(0,51,160,.22), transparent 55%); } .stars-field { position: absolute; inset: 0; background: var(--star); mask-image: linear-gradient(90deg, #000, transparent 60%); -webkit-mask-image: linear-gradient(90deg, #000, transparent 60%); pointer-events: none; } .bikes .wrap { position: relative; } .bike-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .bike-card { --c: 22px; position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; min-height: 460px; padding: 28px; text-decoration: none; overflow: hidden; clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, var(--c) 100%, 0 calc(100% - var(--c))); } /* Foto em camada própria: background-image inline resolve o caminho a partir da página */ .bike-bg { position: absolute; inset: 0; z-index: -2; background-color: var(--steel); background-position: center; background-size: cover; background-repeat: no-repeat; filter: grayscale(.55) contrast(1.1) brightness(.75); transition: transform .6s ease, filter .4s ease; } .bike-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10,11,14,.1) 20%, rgba(10,11,14,.95) 88%), linear-gradient(0deg, var(--red) 0 6px, transparent 6px); transition: background .3s ease; } .bike-card:nth-child(2)::after { background: linear-gradient(180deg, rgba(10,11,14,.1) 20%, rgba(10,11,14,.95) 88%), linear-gradient(0deg, var(--royal-glow) 0 6px, transparent 6px); } .bike-card:nth-child(3)::after { background: linear-gradient(180deg, rgba(10,11,14,.1) 20%, rgba(10,11,14,.95) 88%), linear-gradient(0deg, var(--white) 0 6px, transparent 6px); } .bike-num { position: absolute; top: 18px; left: 24px; font: 400 1rem/1 var(--f-stencil); color: var(--white); padding: 6px 10px; border: 2px solid rgba(244,245,247,.6); } .bike-name { font: 400 clamp(2.6rem, 4.6vw, 3.8rem)/.9 var(--f-display); text-transform: uppercase; color: var(--white); text-shadow: 0 0 20px rgba(255,42,61,.5), 0 3px 0 #000; } .bike-card:nth-child(2) .bike-name { text-shadow: 0 0 20px rgba(47,107,255,.7), 0 3px 0 #000; } .bike-desc { margin-top: 10px; color: #C9CED6; max-width: 32ch; } .bike-card:hover .bike-bg { transform: scale(1.06); filter: grayscale(0) contrast(1.1) brightness(.85); } /* ---------- SOBRE ---------- */ .about-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(36px, 6vw, 80px); align-items: center; } .about-photo { position: relative; margin: 0; } .about-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; filter: saturate(.75) contrast(1.1); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), calc(100% - 40px) 100%, 0 100%); } .about-photo::before { content: ""; position: absolute; inset: 18px -18px -18px 18px; z-index: -1; background: repeating-linear-gradient(-45deg, var(--red) 0 10px, transparent 10px 20px); opacity: .5; } .about-stamp { position: absolute; left: -12px; bottom: 36px; display: flex; flex-direction: column; padding: 16px 22px; background: var(--royal); box-shadow: 0 0 28px rgba(47,107,255,.5), 0 12px 30px rgba(0,0,0,.5); transform: rotate(-4deg); } .about-stamp b { font: 400 3.2rem/.9 var(--f-display); color: var(--white); } .about-stamp span { font: 400 .85rem/1.1 var(--f-stencil); text-transform: uppercase; color: var(--white); letter-spacing: .05em; } .about-copy p { max-width: 62ch; color: #BFC4CC; } .about-copy .section-title { margin-bottom: 22px; } .spec-sheet { list-style: none; margin: 30px 0 0; padding: 0; border-top: 2px solid var(--chrome-dim); } .spec-sheet li { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 12px 0; border-bottom: 1px dashed rgba(201,206,214,.22); } .spec-sheet span { font: 500 .85rem/1.4 var(--f-label); text-transform: uppercase; letter-spacing: .14em; color: var(--chrome-dim); } .spec-sheet b { font: 600 1rem/1.4 var(--f-label); color: var(--white); text-transform: uppercase; letter-spacing: .04em; } /* ---------- GALERIA ANTES/DEPOIS ---------- */ .gallery { background: linear-gradient(180deg, transparent, rgba(21,23,28,.9) 30%, rgba(21,23,28,.9) 70%, transparent); } .ba-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .ba { position: relative; margin: 0; aspect-ratio: 3 / 4; max-width: 100%; overflow: hidden; cursor: pointer; background: var(--steel); outline-offset: 4px; } .ba-layer { position: absolute; inset: 0; background: center/cover no-repeat; } /* O "antes" é a foto real do serviço: só um leve rebaixamento. */ .ba-before { filter: saturate(.8) brightness(.78); } .ba-after { clip-path: inset(0 100% 0 0); transition: clip-path .6s cubic-bezier(.7, 0, .2, 1); } .ba-label { position: absolute; top: 14px; left: 14px; z-index: 2; font: 400 .8rem/1 var(--f-stencil); letter-spacing: .06em; padding: 6px 10px; color: var(--white); background: rgba(10,11,14,.8); border: 1px solid rgba(201,206,214,.4); transition: background-color .3s ease, border-color .3s ease; } .ba-label::before { content: "ANTES"; } /* Convite no centro, discreto, some ao abrir */ .ba-hint { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; padding: 0 20px 52px; text-align: center; font: 500 .95rem/1.4 var(--f-label); letter-spacing: .12em; text-transform: uppercase; color: rgba(244,245,247,.65); pointer-events: none; transition: opacity .3s ease; } /* Cartão ainda sem foto: placeholder liso */ .ba-empty .ba-before { background: linear-gradient(160deg, #23262D, #16181D); filter: none; } .ba-empty .ba-before::after { display: none; } .ba-empty .ba-after { background: linear-gradient(160deg, #2C3039, #1B1E24); } .ba-empty .ba-after::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(-45deg, rgba(47,107,255,.09) 0 14px, transparent 14px 28px); } .ba figcaption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 40px 18px 16px; background: linear-gradient(180deg, transparent, rgba(10,11,14,.95)); transform: translateY(calc(100% - 64px)); transition: transform .45s ease; } .ba figcaption b { display: block; font: 400 1.25rem/1.25 var(--f-display); text-transform: uppercase; color: var(--white); margin-bottom: 6px; } .ba figcaption span { font-size: .95rem; color: #C9CED6; } .ba::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 4px; z-index: 1; background: var(--red-glow); box-shadow: 0 0 14px var(--red-glow); opacity: 0; transition: left .6s cubic-bezier(.7, 0, .2, 1), opacity .3s ease; } /* Só o clique/toque decide o estado — no iPhone, :hover gastava o primeiro toque só pra "ativar" o hover, e o clique de verdade era o segundo. */ .ba.is-open .ba-after { clip-path: inset(0 0 0 0); } .ba.is-open::after { left: 100%; opacity: 1; } .ba.is-open figcaption { transform: translateY(0); } .ba.is-open .ba-label { background: var(--red); border-color: var(--red); } .ba.is-open .ba-label::before { content: "DEPOIS"; } .ba.is-open .ba-hint { opacity: 0; } /* ---------- CTA BANNER ---------- */ .cta-banner { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(70px, 9vw, 120px); border-block: 4px solid var(--white); } .cta-flag { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(10,11,14,.92) 0%, rgba(10,11,14,.55) 55%, rgba(10,11,14,.85) 100%), url("https://images.unsplash.com/photo-1558981285-6f0c94958bb6?auto=format&fit=crop&w=1600&q=70") center/cover no-repeat; } .cta-flag::before { content: ""; position: absolute; inset: 0; background: var(--star) 0 0 / 56px 56px, linear-gradient(90deg, rgba(0,51,160,.75) 0 38%, transparent 38%); mask-image: linear-gradient(180deg, #000 0 55%, transparent 55%); -webkit-mask-image: linear-gradient(180deg, #000 0 55%, transparent 55%); mix-blend-mode: screen; opacity: .9; } .cta-flag::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(180deg, rgba(208,2,27,.38) 0 7.69%, transparent 7.69% 15.38%); mix-blend-mode: overlay; transform: skewY(-3deg) scale(1.1); } .cta-inner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(24px, 4vw, 50px); } .cta-rider { width: 230px; height: auto; filter: drop-shadow(0 0 16px rgba(47,107,255,.65)); } .cta-title { margin: 0; font: 400 clamp(2.3rem, 5.4vw, 4.4rem)/.95 var(--f-display); text-transform: uppercase; text-wrap: balance; } .cta-title span { display: block; } .cta-copy p { margin: 16px 0 0; color: var(--white); font-size: 1.1rem; max-width: 46ch; } .cta-actions { display: flex; flex-direction: column; gap: 12px; } /* ---------- AVALIAÇÕES GOOGLE ---------- */ .google-card { max-width: 1040px; } .google-card .plate-body { margin: 0; padding: clamp(28px, 4vw, 44px); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(24px, 4vw, 48px); } .g-score { display: flex; align-items: center; gap: 18px; } .g-note { font: 400 clamp(4rem, 9vw, 6rem)/.85 var(--f-display); color: var(--white); text-shadow: 0 0 24px rgba(255,42,61,.55), 0 4px 0 #000; font-variant-numeric: tabular-nums; } .g-meta { display: flex; flex-direction: column; gap: 8px; } .g-stars { display: flex; gap: 3px; } .g-stars svg { width: 22px; height: 22px; color: var(--red-glow); filter: drop-shadow(0 0 6px rgba(255,42,61,.7)); } .g-count { font: 500 .9rem/1.2 var(--f-label); text-transform: uppercase; letter-spacing: .12em; color: var(--chrome); } .g-count b { color: var(--white); font-weight: 600; } .g-copy p { margin: 0; max-width: 46ch; color: #B9BEC7; } .g-copy .g-lead { margin-bottom: 8px; font: 400 clamp(1.3rem, 2.2vw, 1.7rem)/1.1 var(--f-display); text-transform: uppercase; color: var(--white); } .g-actions { display: flex; flex-direction: column; gap: 12px; } /* ---------- LOCALIZAÇÃO ---------- */ .loc-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 22px; align-items: stretch; } .map-frame { position: relative; min-height: 440px; background: var(--steel); border: 3px solid var(--steel-2); box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 0 30px rgba(0,51,160,.25); } .map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(.35) contrast(1.05); } .loc-card .plate-body { margin: 0; padding: 36px 30px; height: 100%; display: flex; flex-direction: column; gap: 28px; } .loc-info { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; } .loc-info li { display: flex; gap: 16px; align-items: flex-start; } .loc-info > li > svg { flex: none; width: 42px; height: 42px; padding: 9px; color: var(--white); background: var(--red); clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px); } .loc-info .label { display: block; font: 500 .78rem/1 var(--f-label); text-transform: uppercase; letter-spacing: .18em; color: var(--chrome-dim); margin-bottom: 6px; } .loc-info b { font: 600 1.1rem/1.35 var(--f-label); color: var(--white); letter-spacing: .02em; } .loc-info a { text-decoration: none; } .loc-info a:hover b { color: var(--red-glow); } .hours { margin: 0; display: grid; grid-template-columns: auto auto; gap: 4px 18px; font-variant-numeric: tabular-nums; } .hours dt { color: #AEB4BD; } .hours dd { margin: 0; color: var(--white); font-weight: 600; } .loc-actions { margin-top: auto; display: grid; gap: 12px; } /* ---------- FOOTER ---------- */ .site-footer { position: relative; overflow: hidden; background: linear-gradient(180deg, #111318, #07080A); padding-bottom: 24px; } .race-stripe { height: 10px; background: linear-gradient(180deg, var(--royal) 0 40%, var(--white) 40% 60%, var(--red) 60%); } .footer-inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; padding-block: 48px 32px; } .footer-brand { display: flex; } .footer-logo { width: min(320px, 70vw); height: auto; filter: drop-shadow(0 0 30px rgba(47,107,255,.35)); } .footer-social { display: flex; gap: 10px; } .footer-social a { width: 48px; height: 48px; display: grid; place-items: center; color: var(--chrome); background: var(--steel); clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); transition: color .2s ease, background-color .2s ease, filter .2s ease; } .footer-social svg { width: 22px; height: 22px; } .footer-social a:hover { color: var(--white); background: var(--red); filter: drop-shadow(0 0 10px rgba(255,42,61,.6)); } .footer-social a:nth-child(even):hover { background: var(--royal); filter: drop-shadow(0 0 10px rgba(47,107,255,.6)); } .footer-deco { position: absolute; width: 190px; height: 190px; opacity: .12; pointer-events: none; } .footer-deco.left { left: -50px; top: 50%; transform: translateY(-50%) rotate(-20deg); } .footer-deco.right { right: -40px; top: 50%; transform: translateY(-50%) rotate(25deg); } .copyright { margin: 0; padding-inline: var(--gutter); text-align: center; font-size: .85rem; color: #7C838F; border-top: 1px solid rgba(255,255,255,.06); padding-top: 20px; } /* ---------- WhatsApp fixo (mobile) ---------- */ .wa-bar { display: none; } /* ---------- Reveal ---------- */ .reveal { transition: transform .7s ease, opacity .7s ease; } .reveal.pending { transform: translateY(26px); opacity: .001; } /* ========================================================= RESPONSIVO ========================================================= */ @media (max-width: 1100px) { .main-nav a:not(.btn) { padding: 10px 8px; font-size: .8rem; } .badge-ring { width: 180px; height: 180px; } .badge-rider { width: 64px; height: 40px; } } @media (max-width: 960px) { .header-cta { display: none; } .menu-toggle { display: flex; } .main-nav { position: fixed; top: calc(var(--header-h) + env(safe-area-inset-top, 0px)); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 12px var(--gutter) 24px; background: rgba(10,11,14,.98); border-bottom: 3px solid var(--red); transform: translateY(-120%); visibility: hidden; transition: transform .3s ease, visibility .3s; } .main-nav.open { transform: translateY(0); visibility: visible; } .main-nav a:not(.btn) { padding: 16px 4px; font-size: 1rem; border-bottom: 1px solid rgba(201,206,214,.1); } .main-nav a:not(.btn)::after { display: none; } .nav-cta { display: inline-flex; margin-top: 18px; } .hero-inner { grid-template-columns: 1fr; } .hero-badge { position: absolute; right: var(--gutter); top: calc(var(--header-h) + 20px); transform: rotate(8deg) scale(.62); transform-origin: top right; } .trust-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 0; } .trust-list li { justify-content: flex-start; } .trust-list li:nth-child(3) { border-left: 0; } .plate-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .service.featured { grid-column: span 2; } .service.wide { grid-column: span 2; } .bike-grid { grid-template-columns: 1fr; } .bike-card { min-height: 280px; } .about-grid { grid-template-columns: 1fr; } .about-photo img { aspect-ratio: 16 / 11; } .ba-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cta-inner { grid-template-columns: 1fr; } .cta-rider { width: 120px; height: 76px; } .cta-actions { flex-direction: row; flex-wrap: wrap; } .google-card .plate-body { grid-template-columns: 1fr; } .g-actions { flex-direction: row; flex-wrap: wrap; } .loc-grid { grid-template-columns: 1fr; } .map-frame { min-height: 340px; } } @media (max-width: 640px) { :root { --header-h: 64px; --chamfer: 14px; } body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); } .brand-rider { width: 46px; height: 30px; } .brand-name { font-size: 1.4rem; } .brand-sub { font-size: .6rem; letter-spacing: .26em; } .hero-badge { display: none; } .hero-actions .btn { flex: 1 1 100%; } .trust-list { grid-template-columns: 1fr 1fr; padding-block: 20px; } .trust-list li { flex-direction: column; text-align: center; justify-content: center; gap: 8px; font-size: .82rem; } .trust-list li + li { border-left: 0; } .trust-list svg { width: 34px; height: 34px; } .plate-grid { grid-template-columns: 1fr; } .service.featured, .service.wide { grid-column: auto; } .service.wide { flex-direction: column; } .service.wide .plate-photo { aspect-ratio: 16 / 10; min-height: 0; flex: none; } .service.featured .plate-photo { aspect-ratio: 16 / 10; } .plate-body { padding: 0 20px 26px; } .ba-grid { grid-template-columns: 1fr; } .cta-actions .btn { flex: 1 1 100%; } .loc-card .plate-body { padding: 28px 20px; } .footer-inner { flex-direction: column; align-items: flex-start; } .wa-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px)); font: 600 1.05rem/1 var(--f-label); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; color: var(--white); background: linear-gradient(180deg, #F0112D, var(--red) 60%, #9C0114); box-shadow: 0 -2px 0 var(--white), 0 -6px 0 var(--royal), 0 -10px 30px rgba(0,0,0,.6); } .wa-bar svg { width: 24px; height: 24px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } .reveal.pending { transform: none; opacity: 1; } }