/* ============================================================ LANDING PAGE — Design system Sistema fixo (grafite/papel/aço) + acento dinâmico do tenant (--cor-primaria / --cor-secundaria, injetadas via inline style no a partir de tenant_config). ============================================================ */ :root { /* Neutros fixos do sistema — não mudam por tenant */ --grafite-950: #0D0F12; --grafite-800: #1B1F24; --grafite-600: #3A4048; --aco-400: #8C97A3; --papel-50: #F6F5F2; --papel-100: #EDEBE6; --tinta-900: #14171A; /* Acento do tenant — valor real vem inline do PHP, isto é só fallback */ --cor-primaria: #1A1A1A; --cor-secundaria: #FFFFFF; --fonte-display: 'Big Shoulders Display', sans-serif; --fonte-corpo: 'IBM Plex Sans', sans-serif; --fonte-mono: 'IBM Plex Mono', monospace; --largura-maxima: 1200px; --espaco-secao: clamp(4rem, 8vw, 8rem); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--fonte-corpo); color: var(--tinta-900); background: var(--papel-50); -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } .container { max-width: var(--largura-maxima); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); } a { color: inherit; } /* ------------------------------------------------------------ Utilitário de "ficha técnica" — o elemento assinatura da página. Usado no hero, nos cards de veículo e nas estatísticas. ------------------------------------------------------------ */ .ficha { position: relative; border: 1px solid var(--grafite-600); border-radius: 2px; } .ficha__topo { display: flex; justify-content: space-between; align-items: center; padding: 0.6rem 1rem; border-bottom: 1px solid var(--grafite-600); font-family: var(--fonte-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--aco-400); } .ficha__ref { font-family: var(--fonte-mono); font-size: 0.7rem; color: var(--aco-400); } /* Régua de "tick marks" — remete ao painel/velocímetro */ .regua { height: 6px; background-image: repeating-linear-gradient( 90deg, var(--grafite-600) 0, var(--grafite-600) 1px, transparent 1px, transparent 12px ); opacity: 0.6; } /* ------------------------------------------------------------ Header ------------------------------------------------------------ */ .cabecalho { position: sticky; top: 0; z-index: 10; display: flex; justify-content: space-between; align-items: center; padding: 1rem clamp(1.25rem, 4vw, 2.5rem); background: color-mix(in srgb, var(--papel-50) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--papel-100); } .cabecalho__logo { height: 36px; } .cabecalho__nome { font-family: var(--fonte-display); font-size: 1.5rem; font-weight: 700; letter-spacing: 0.01em; } .cabecalho nav a { text-decoration: none; font-family: var(--fonte-mono); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; margin-left: 1.5rem; } .btn-primario { display: inline-block; background: var(--cor-primaria); color: var(--cor-secundaria); font-family: var(--fonte-mono); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; text-decoration: none; padding: 0.75rem 1.5rem; border-radius: 2px; border: none; cursor: pointer; transition: transform 0.15s ease, opacity 0.15s ease; } .btn-primario:hover { transform: translateY(-2px); opacity: 0.92; } /* ------------------------------------------------------------ Hero — "ficha técnica" do próprio site como abertura ------------------------------------------------------------ */ .hero { background: var(--grafite-950); color: var(--papel-50); padding-block: clamp(3rem, 10vw, 6rem); } .hero__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; } @media (max-width: 860px) { .hero__grid { grid-template-columns: 1fr; } } .hero__eyebrow { font-family: var(--fonte-mono); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--cor-primaria); border-bottom: 2px solid var(--cor-primaria); display: inline-block; padding-bottom: 0.3rem; margin-bottom: 1.25rem; } .hero__titulo { font-family: var(--fonte-display); font-weight: 700; font-size: clamp(2.6rem, 6vw, 4.5rem); line-height: 0.95; margin: 0 0 1.25rem; letter-spacing: -0.01em; } .hero__texto { color: var(--aco-400); font-size: 1.05rem; max-width: 42ch; margin-bottom: 2rem; } /* Plaquinha flutuante com o veículo em destaque (dado real do catálogo) */ .hero__ficha { background: var(--grafite-800); color: var(--papel-50); max-width: 380px; } .hero__ficha .ficha__corpo { padding: 1.25rem; } .hero__ficha .ficha__modelo { font-family: var(--fonte-display); font-size: 1.8rem; margin: 0 0 0.75rem; } .hero__ficha dl { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem 1rem; margin: 0; font-family: var(--fonte-mono); font-size: 0.8rem; } .hero__ficha dt { color: var(--aco-400); text-transform: uppercase; font-size: 0.65rem; letter-spacing: 0.05em; } .hero__ficha dd { margin: 0; } .hero__ficha .valor-destaque { font-family: var(--fonte-mono); font-size: 1.4rem; color: var(--cor-primaria); margin-top: 0.75rem; } /* ------------------------------------------------------------ Seções gerais ------------------------------------------------------------ */ .secao { padding-block: var(--espaco-secao); } .secao--clara { background: var(--papel-50); } .secao--escura { background: var(--grafite-950); color: var(--papel-50); } .secao__eyebrow { font-family: var(--fonte-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--aco-400); } .secao__titulo { font-family: var(--fonte-display); font-size: clamp(2rem, 4vw, 3rem); margin: 0.4rem 0 1rem; line-height: 1; } .secao__texto { max-width: 60ch; color: var(--grafite-600); font-size: 1.05rem; } .secao--escura .secao__texto { color: var(--aco-400); } /* Diferenciais — grid de fichas curtas */ .grid-diferenciais { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.25rem; margin-top: 2.5rem; } .grid-diferenciais .ficha { padding: 1.5rem; border-color: var(--papel-100); } .grid-diferenciais .ficha__ref { display: block; margin-bottom: 0.75rem; } /* Catálogo em destaque (reaproveita os mesmos .card-veiculo do catálogo) */ .grid-destaque { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.5rem; margin-top: 2.5rem; } /* Estatísticas com contador tipo odômetro */ .grid-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1.5rem; margin-top: 2.5rem; } .stat { text-align: left; border-top: 1px solid var(--grafite-600); padding-top: 0.75rem; } .stat__numero { font-family: var(--fonte-mono); font-size: clamp(2rem, 4vw, 3rem); color: var(--cor-primaria); font-variant-numeric: tabular-nums; } .stat__label { font-family: var(--fonte-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--aco-400); } /* Depoimentos */ .grid-depoimentos { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin-top: 2.5rem; } .depoimento { padding: 1.5rem; background: var(--papel-100); border-radius: 2px; } .depoimento p:first-child { font-size: 1.05rem; } .depoimento cite { font-family: var(--fonte-mono); font-size: 0.75rem; font-style: normal; color: var(--aco-400); } /* Contato */ .secao-contato { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; } @media (max-width: 760px) { .secao-contato { grid-template-columns: 1fr; } } /* Rodapé */ .rodape { background: var(--grafite-950); color: var(--aco-400); padding: 2.5rem clamp(1.25rem, 4vw, 2.5rem); font-family: var(--fonte-mono); font-size: 0.75rem; } /* ------------------------------------------------------------ Scroll reveal (classes controladas pelo JS) ------------------------------------------------------------ */ .revelar { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; } .revelar.visivel { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .revelar { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }