/* Os três templates do site público — docs/05-site-publico.md §1. * * Um conjunto de templates, N temas por CSS variables: o HTML é o mesmo * para todas as oficinas, o que muda é a paleta e a classe do . * Gerar CSS por tenant seria um build por cliente e um jeito novo de * quebrar a cada deploy. * * As variáveis --brand* vêm inline do context processor (a cor que o dono * escolheu). O que este arquivo faz é decidir como cada template usa essa * cor: o clássico a espalha no fundo, o moderno a reserva para os botões. */ /* ---------------------------------------------------------- 1. carbono * Escuro industrial, o visual padrão do produto — a mesma base de * carbono da plataforma. A cor primária do dono tinge o fundo do topo; o * destaque manda nos botões. */ body.theme-classico { --bg: #0a0a0b; --bg-2: #121315; --bg-3: #1a1c1f; --line: #2e3237; --line-soft: #23262a; --fg: #f1f3f5; --fg-muted: #c1c7cb; --fg-dim: #7c848b; } /* ---------------------------------------------------------- 2. moderno * Claro, muito branco. É o que a oficina de concessionária pede — e o * que fotografa melhor no print do Instagram. */ body.theme-moderno { --bg: #ffffff; --bg-2: #f6f6f4; --bg-3: #eeeeea; --line: #e2e2dd; --line-soft: #ededea; --fg: #14130f; --fg-muted: #5f5c55; --fg-dim: #8b8880; } body.theme-moderno .site-header { background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(8px); } /* No claro, o cinza de borda some sobre branco: o card precisa de sombra * em vez de contorno, senão a página vira um bloco só. */ body.theme-moderno .card, body.theme-moderno .cta-box { box-shadow: 0 1px 2px rgba(20, 19, 15, 0.06), 0 8px 24px rgba(20, 19, 15, 0.05); } /* ------------------------------------------------------------- 3. dark * Preto real, contraste alto, sem o azulado do carbono. Para quem quer * "oficina de rua" e acha o carbono frio demais. */ body.theme-dark { --bg: #000000; --bg-2: #0a0a0a; --bg-3: #141414; --line: #262626; --line-soft: #1a1a1a; --fg: #fafafa; --fg-muted: #a1a1a1; --fg-dim: #6b6b6b; } /* ------------------------------------------------- aplicação da marca * Vale para os três: a cor escolhida pelo dono manda nos elementos de * ação, e --brand-fg (calculado por luminância) garante que o texto por * cima dela continue legível. */ body[class*="theme-"] { --racing: var(--brand-accent); --racing-soft: var(--brand-accent); /* ⚠ precisa ser redeclarado aqui, e não só no :root do marketing.css: `--gold: var(--racing)` é substituído onde é DECLARADO, então a versão do :root congela o vermelho do produto e ignoraria a cor da oficina. */ --gold: var(--brand-accent); --radius: var(--brand-radius); --display: var(--brand-font), ui-sans-serif, system-ui, sans-serif; } body[class*="theme-"] .btn-primary { background: var(--brand-accent); color: var(--brand-accent-fg); border-color: var(--brand-accent); } body[class*="theme-"] .btn-primary:hover { filter: brightness(1.08); } /* ---------------------------------------------------------- identidade */ .site-logo-img { height: 34px; width: auto; max-width: 180px; object-fit: contain; display: block; } /* Capa: a foto da oficina atrás do nome. O gradiente existe para o * texto sobreviver a QUALQUER foto que o dono suba — inclusive uma foto * clara e estourada, que é o caso comum. */ .hero-cover { position: relative; background-size: cover; background-position: center; isolation: isolate; } .hero-cover::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient( 180deg, color-mix(in srgb, var(--brand) 62%, transparent) 0%, color-mix(in srgb, var(--brand) 88%, transparent) 100% ); } .hero-cover h1, .hero-cover .hero-sub, .hero-cover .eyebrow { color: var(--brand-fg); } /* Sem capa o hero ainda usa a cor primária — a página nunca fica um * retângulo branco com um nome no meio. */ .hero-solid { background: var(--brand); } .hero-solid h1, .hero-solid .hero-sub, .hero-solid .eyebrow { color: var(--brand-fg); } .pro-photo { width: 96px; height: 96px; border-radius: 50%; margin: 0 auto 14px; object-fit: cover; display: block; } .social-row { display: flex; gap: 14px; justify-content: center; margin-top: 14px; } .social-row a { color: var(--fg-muted); font-size: 14px; } .social-row a:hover { color: var(--racing); } /* Shop presentation: photographs and motion stay separate from booking logic. */ .shop-hero { min-height: 570px; min-height: min(720px, 78svh); display: flex; align-items: center; padding-block: 92px 100px; isolation: isolate; } .shop-hero .wrap { width: 100%; } .shop-hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; } .shop-hero.hero-cover::before { z-index: -1; background: linear-gradient(90deg, #080a0deb 0%, #080a0d9e 50%, #080a0d30 100%), linear-gradient(0deg, #080a0d99, transparent 55%); } .shop-hero.hero-cover h1, .shop-hero.hero-cover .hero-sub, .shop-hero.hero-cover .eyebrow, .shop-hero.hero-cover .shop-signature { color: #fff; } .shop-hero h1 { max-width: 16ch; font-size: clamp(42px, 6.5vw, 88px); line-height: 1.04; letter-spacing: -.045em; overflow-wrap: anywhere; } .shop-signature { display: flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-fg); margin: 0 0 24px; } .shop-signature::before { content: ""; width: 32px; height: 2px; background: currentColor; } .shop-hero .hero-sub { font-size: 16px; max-width: 48ch; margin-block: 26px 32px; } .shop-hero .hero-actions { align-items: center; gap: 28px; } .shop-gallery-link { font-size: 14px; color: var(--brand-fg); text-decoration: none; } .hero-cover .shop-gallery-link { color: #fff; } .shop-gallery-link span { display: inline-block; margin-left: 12px; } .shop-gallery-link:hover { text-decoration: underline; text-underline-offset: 5px; } .shop-about { padding-bottom: 20px; } .shop-gallery-heading { display: flex; justify-content: space-between; align-items: end; gap: 32px; margin-bottom: 30px; } .shop-gallery-heading h2 { font-size: clamp(30px, 4vw, 48px); letter-spacing: -.035em; margin: 8px 0 0; } .shop-gallery-heading > p { max-width: 30ch; color: var(--fg-muted); font-size: 14px; margin: 0; } .shop-gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .shop-gallery-item { position: relative; display: block; overflow: hidden; min-width: 0; aspect-ratio: 4/3; background: var(--bg-3); border-radius: var(--radius); } .shop-gallery-item:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; } .shop-gallery-grid[data-count="1"] { grid-template-columns: 1fr; } .shop-gallery-grid[data-count="1"] .shop-gallery-item { grid-column: auto; grid-row: auto; aspect-ratio: 16/9; max-height: 620px; } .shop-gallery-grid[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } .shop-gallery-grid[data-count="2"] .shop-gallery-item { grid-column: auto; grid-row: auto; aspect-ratio: 4/3; } .shop-gallery-grid[data-count="4"] .shop-gallery-item:first-child { grid-column: auto; grid-row: auto; aspect-ratio: 4/3; } .shop-gallery-grid[data-count="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } .shop-gallery-grid[data-count="5"] .shop-gallery-item:first-child { grid-column: auto; grid-row: span 2; } .shop-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2,.7,.3,1); } .shop-gallery-item::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(transparent, #000b); pointer-events: none; } .shop-photo-index { position: absolute; left: 18px; top: 18px; color: white; background: #0009; padding: 5px 9px; font-size: 11px; font-variant-numeric: tabular-nums; } .shop-photo-caption { position: absolute; bottom: 20px; left: 20px; right: 65px; z-index: 1; color: white; font-size: 14px; overflow-wrap: anywhere; } .shop-photo-open { position: absolute; right: 16px; bottom: 16px; z-index: 1; color: white; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid #fff8; border-radius: 50%; } .shop-gallery-hint { color: var(--fg-muted); font-size: 12px; margin: 16px 0 0; } .shop-lightbox { width: min(1100px, 94vw); max-width: 94vw; max-height: 94svh; margin: auto; padding: 16px; border: 1px solid #ffffff30; border-radius: 8px; background: #101114; color: white; } .shop-lightbox::backdrop { background: #000e; } .shop-lightbox-image { display: block; width: 100%; height: min(70svh, 760px); object-fit: contain; } .shop-lightbox-toolbar, .shop-lightbox-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .shop-lightbox-toolbar { padding-bottom: 8px; } .shop-lightbox-bottom { padding-top: 8px; } .shop-lightbox button { flex-shrink: 0; width: 44px; height: 44px; border: 1px solid #ffffff50; border-radius: 50%; background: transparent; color: white; font-size: 24px; cursor: pointer; } .shop-lightbox-caption { margin: 0; text-align: center; overflow-wrap: anywhere; min-width: 0; font-size: 14px; } body.shop-modal-open { overflow: hidden; } body[class*="theme-"] :focus-visible { outline: 2px solid var(--fg); outline-offset: 5px; } .shop-lightbox button:focus-visible { outline-color: white; } @media (hover: hover) { .shop-gallery-item:hover img { transform: scale(1.045); } } @keyframes shop-enter { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } @keyframes shop-cover-enter { from { transform: scale(1.045); } to { transform: scale(1); } } @media (prefers-reduced-motion: no-preference) { .shop-hero h1 { animation: shop-enter .7s .08s both; } .shop-hero .hero-sub { animation: shop-enter .7s .18s both; } .shop-hero .hero-actions { animation: shop-enter .7s .28s both; } .shop-hero-photo { animation: shop-cover-enter 1.5s ease-out both; } .shop-reveal-visible { animation: shop-enter .65s both; } .step-panel:not([hidden]) { animation: shop-enter .24s ease-out both; } } @media (max-width: 640px) { .shop-hero { min-height: 520px; padding-block: 65px; } .shop-hero h1 { font-size: clamp(38px, 10vw, 58px); } .shop-hero .hero-sub { font-size: 14px; } .shop-hero.hero-cover::before { background: linear-gradient(90deg, #080a0de0, #080a0d70), linear-gradient(0deg, #080a0d99, transparent); } .shop-gallery-heading { display: block; } .shop-gallery-heading > p { margin-top: 14px; } .shop-gallery-grid[data-count] { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--fg-dim) transparent; gap: 12px; padding-bottom: 12px; } .shop-gallery-grid[data-count] .shop-gallery-item { flex: 0 0 86%; aspect-ratio: 4/5; scroll-snap-align: start; } .shop-gallery-grid[data-count="1"] .shop-gallery-item { flex-basis: 100%; aspect-ratio: 4/3; } .shop-lightbox { padding: 12px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } body[class*="theme-"] *, body[class*="theme-"] *::before, body[class*="theme-"] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } body[class*="theme-"] .btn:hover, .shop-gallery-item:hover img { transform: none; } }