/* DEPANNAGE CSS v4 */ /* ========================================================================== Global — fonte, tokens, resets ========================================================================== */ @font-face{ font-family: "InterVariable"; src: url("/assets/fonts/Inter-Variable.woff2") format("woff2-variations"); font-weight: 100 900; font-style: normal; font-display: swap; } :root{ /* cores base */ --ink:#0f172a; /* texto primário (slate-900) */ --muted:#475569; /* texto secundário (slate-600) */ --line:#e2e8f0; /* bordas (slate-200) */ --pill:#f1f5f9; /* chips (slate-100) */ /* ações */ --blue:#2563eb; /* CTA */ --blueShadow: rgba(37,99,235,.35); /* feedback */ --red:#dc2626; /* raios */ --r-sm:12px; --r-md:14px; --r-lg:16px; --r-xl:20px; } *{ box-sizing:border-box; } html,body{ height:100%; } body{ margin:0; color:var(--ink); background:#0b1220; /* Home escura; telas internas setam branco no */ font-family: "InterVariable", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } button{ font-family:inherit; } button[disabled] { opacity:.55; cursor:not-allowed; filter:saturate(.85); } /* utilidades */ .container,.page{ max-width: 720px; margin: 0 auto; padding: 16px clamp(12px,4vw,20px) 28px; } /* ========================================================================== Header / Lang (todas as telas) ========================================================================== */ .topbar{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:6px 0 2px; } .brand{ display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.2px; } .logo{ width:34px; height:34px; border-radius:10px; background:linear-gradient(135deg,#4f46e5,#22c55e); display:grid; place-items:center; box-shadow:0 8px 20px rgba(0,0,0,.2); } .lang{ display:flex; gap:6px } .lang button{ appearance:none; border:1px solid var(--line); background:#fff; color:var(--ink); font-weight:600; padding:8px 10px; border-radius:var(--r-md); cursor:pointer; font-size:14px; } .lang button.active{ border-color:rgba(37,99,235,.6); background:rgba(37,99,235,.08); } /* Títulos padrões */ .title{ font-size: clamp(24px, 6.2vw, 36px); line-height:1.15; margin:10px 0 14px; font-weight:800; letter-spacing:.2px; } /* ========================================================================== Botões (CTA padrão) ========================================================================== */ .button, .primary{ appearance:none; border:none; cursor:pointer; color:#fff; background:var(--blue); font-weight:800; letter-spacing:.2px; font-size:17px; padding:16px 22px; border-radius:var(--r-lg); box-shadow:0 10px 24px var(--blueShadow); text-align:center; display:block; text-decoration:none; transition: transform .15s ease, filter .25s ease; } .button:active, .primary:active{ transform:translateY(1px) scale(.99); } /* animação simples para CTA que aparece depois */ .cta-delayed{ opacity:0; transform:translateY(8px); animation:fadeUp .5s ease .5s forwards; } /* estado "aparece quando válido" (tela 2) */ .primary.guard{ opacity:0; visibility:hidden; pointer-events:none; transform:translateY(8px); } .primary.guard.show{ visibility:visible; pointer-events:auto; animation:fadeUpLong 1s ease forwards; } /* ========================================================================== HOME (hero sobre foto — tela 1) ========================================================================== */ .hero-full{ position:relative; min-height:100dvh; /* IMPORTANTE: como o style.css está na raiz, use caminho absoluto da imagem */ background:url("/assets/img/hero-faucet-pro.jpg") center/cover no-repeat; color:#fff; } .hero-full::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,.72) 85%, rgba(0,0,0,.88) 100%); pointer-events:none; z-index:0; } .top-left,.top-right{ position:absolute; top:12px; z-index:6; pointer-events:auto; } .top-left{ left:12px; display:flex; align-items:center; gap:10px; } .top-right{ right:12px; } .center-stack{ position:relative; z-index:2; display:grid; place-items:center; gap:16px; padding:80px 14px 24px; } /* Tipografia do hero */ .h1{ font-size: clamp(28px, 7vw, 40px); line-height:1.05; font-weight:900; letter-spacing:.2px; text-align:center; text-wrap:balance; } .p{ font-size: clamp(16px, 4.2vw, 18px); line-height:1.45; color:#e2e8f0; text-align:center; max-width: 46ch; } /* Tags/serviços */ .tags{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; } .tag{ background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.2); color:#e2e8f0; padding:8px 12px; border-radius:999px; font-weight:700; } /* Metadados/bullets */ .meta{ display:flex; flex-direction:column; gap:6px; align-items:center; color:#cbd5e1; } .meta .dot::before{ content:"• "; margin-right:6px; } /* nota de rodapé do hero */ .footer-note{ color:#94a3b8; font-size:13px; text-align:center; max-width: 52ch; } /* ========================================================================== TELA 2 — Describe Issue (fundo branco) ========================================================================== */ /* endereço */ .address{ display:flex; align-items:center; gap:10px; border:1px solid var(--line); border-radius:var(--r-md); padding:12px 14px; background:#fff; box-shadow:0 1px 0 rgba(2,6,23,.03); } .address .pin{ width:18px; height:18px; } .address input{ flex:1; border:none; outline:none; background:transparent; font-size:16px; color:var(--ink); } /* texto explicativo curto */ .helper{ text-align:left; color:var(--muted); font-size:16px; line-height:1.55; margin:12px 2px 10px; } /* Foto */ .photo-cta{ display:flex; align-items:center; gap:8px; background:#fff; border:1px solid rgba(37,99,235,.35); color:#0f172a; border-radius:999px; padding:12px 16px; font-weight:700; cursor:pointer; box-shadow:0 6px 16px rgba(37,99,235,.10); } .photo-cta:hover{ background:rgba(37,99,235,.06) } .photo-cta svg{ width:18px; height:18px } .photo-cta-only{ display:grid; place-items:center; margin-top:8px; } .photo-card{ position:relative; margin-top:8px; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); background:#f8fafc; min-height:220px; display:none; place-items:center; } .preview{ width:100%; height:100%; object-fit:cover; display:none; } .camera-wrap{ position:relative; width:100%; height:100%; display:none; } #camera{ width:100%; height:100%; object-fit:cover; } .capture-bar{ position:absolute; inset:auto 0 10px 0; display:flex; justify-content:center; } #snapBtn{ background:var(--blue); color:#fff; border:none; border-radius:999px; padding:12px 18px; font-weight:800; box-shadow:0 8px 22px var(--blueShadow); } /* Modal (popup) elegante */ .modal-overlay{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(15,23,42,.35); backdrop-filter: blur(6px); z-index:50; } .modal-overlay.open{ display:flex; animation:fadeUp .18s ease both; } .modal{ width:min(520px,92%); background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:0 20px 60px rgba(0,0,0,.25); padding:16px; } .modal h3{ margin:6px 6px 12px; font-size:16px; font-weight:800; } .modal .row{ display:flex; gap:10px; } .modal .opt{ flex:1; border:1px solid var(--line); border-radius:var(--r-md); padding:16px; text-align:center; font-weight:700; cursor:pointer; transition:background .2s ease, border-color .2s ease, box-shadow .2s ease; } .modal .opt:hover{ background:#f8fafc; border-color:rgba(37,99,235,.5); box-shadow:0 6px 16px rgba(37,99,235,.12) } /* Áudio */ .controls{ display:flex; align-items:center; justify-content:center; gap:12px; margin:16px 0 6px; } .micBtn, .stopBtn, .reMicBtn{ width:76px; height:76px; border-radius:999px; border:none; cursor:pointer; display:grid; place-items:center; color:#fff; box-shadow:0 10px 24px rgba(0,0,0,.2); transition:transform .15s ease, filter .25s ease; } .micBtn{ background: radial-gradient(120% 120% at 50% 10%, #ef4444, #b91c1c); } .stopBtn{ background: radial-gradient(120% 120% at 50% 10%, #111827, #0f172a); } .reMicBtn{ background: radial-gradient(120% 120% at 50% 10%, #ef4444, #b91c1c); width:54px; height:54px; } .wave{ display:none; align-items:center; gap:10px; justify-content:center; } .wave svg{ width:120px; height:28px } /* Texto alternativo */ .alttext{ margin-top:6px; border:1px solid var(--line); border-radius:var(--r-md); background:#fff; padding:10px 12px; } .alttext textarea{ width:100%; min-height:70px; border:none; outline:none; resize:vertical; font-size:16px; color:var(--ink); } /* Rodapé/CTA (tela 2 usa .primary.guard para controlar exibição via JS) */ .footer{ display:flex; flex-direction:column; gap:10px; margin-top:16px; } /* ========================================================================== Animações ========================================================================== */ @keyframes fadeUp{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } } @keyframes fadeUpLong{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } } /* Reveal genérico para qualquer elemento (título e botões) */ .guard{ opacity:0; visibility:hidden; pointer-events:none; transform:translateY(8px); } .guard.show{ visibility:visible; pointer-events:auto; animation:fadeUpLong 1s ease forwards; } /* ========================================================================== PRO DASHBOARD — estilos escopados (não afetam telas existentes) ========================================================================== */ /* Painéis horizontais (mobile) + grid (desktop) */ #proPanels{ display:flex; gap:26px; overflow-x:auto; -webkit-overflow-scrolling:touch; scroll-snap-type:x mandatory; } #proPanels .panel{ scroll-snap-align:start; flex:0 0 100%; } /* Dots de navegação (apenas mobile) */ #panelDots{ display:flex; gap:8px; justify-content:center; margin-top:10px; } #panelDots button{ width:8px; height:8px; border-radius:999px; border:0; background:rgba(255,255,255,.25); cursor:pointer; } #panelDots button.active{ background:#fff } /* No desktop, vira grid e esconde dots */ @media (min-width:960px){ #proPanels{ display:grid; grid-template-columns:1fr .9fr; overflow:visible } #proPanels .panel{ flex:initial; scroll-snap-align:unset } #panelDots{ display:none } } /* Cards base do dashboard pro (apenas dentro do pro) */ #proPanels .card, #newReqCard.card{ background: rgba(15,23,42,.70); border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:26px; backdrop-filter: blur(8px); } /* Card em destaque (Nova demanda) — glass + alto contraste */ #newReqCard.card{ background: linear-gradient(180deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.07) 100%); border: 1px solid rgba(255,255,255,.22); box-shadow: 0 12px 32px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.18); backdrop-filter: blur(12px) saturate(120%); -webkit-backdrop-filter: blur(12px) saturate(120%); margin-bottom:38px; /* mais respiro até os painéis */ } /* Títulos de seção (somente no pro) */ #proPanels .h, #newReqCard .h{ font-weight:900; font-size:12px; letter-spacing:.32px; color:#9aa4b2; text-transform:uppercase; margin-bottom:10px; } /* Nova demanda: texto com alto contraste */ #newReqCard .h, #newReqCard .title-sheen{ color:#f8fafc; } #newReqCard .meta{ color:rgba(255,255,255,.86); } /* Título “Nouvelle demande” com animação elegante */ #newReqCard .demand-title{ display:flex; align-items:center; gap:8px; margin-bottom:12px } #newReqCard .title-sheen{ background: linear-gradient(90deg,#ffffff,#93c5fd,#ffffff); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation: pro_sheen 3s ease-in-out infinite; } @keyframes pro_sheen{ from{ background-position:200% 0 } to{ background-position:-200% 0 } } #newReqCard .ping{ position:relative; width:8px; height:8px; border-radius:999px; background:#60a5fa; } #newReqCard .ping::after{ content:""; position:absolute; inset:-6px; border:2px solid rgba(96,165,250,.6); border-radius:999px; opacity:0; animation: pro_ping 2s cubic-bezier(0,0,.2,1) infinite; } @keyframes pro_ping{ 0%{ transform:scale(.6); opacity:.9 } 80%,100%{ transform:scale(1.8); opacity:0 } } /* Barra de tempo (contador sem números) no card de nova demanda */ #newReqCard .timebar{ height:3px; width:100%; border-radius:999px; overflow:hidden; background:rgba(255,255,255,.22); margin:-6px 0 18px; } #newReqCard .timebar > i{ display:block; height:100%; width:100%; background: linear-gradient(90deg, rgba(255,255,255,.95), rgba(255,255,255,.55)); animation: pro_elapse 45s linear forwards; transform-origin:left center; } @keyframes pro_elapse{ from{ transform:scaleX(1) } to{ transform:scaleX(0) } } /* Campos/inputs apenas dentro dos painéis do pro */ #proPanels .row{ display:grid; gap:18px } @media (min-width:640px){ #proPanels .row.two{ grid-template-columns:1fr 1fr } } #proPanels .field{ display:flex; align-items:center; gap:10px; background: rgba(12,18,32,.9); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:12px 14px; } #proPanels .field input, #proPanels .field select{ flex:1; border:none; outline:none; background:transparent; color:#e5e7eb; font-size:15px; } /* Chips de categoria (apenas no pro) */ #proPanels .chips{ display:flex; flex-wrap:wrap; gap:8px } #proPanels .chip{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background:#0f172a; border:1px solid rgba(255,255,255,.08); font-weight:800; font-size:13px; color:#dbe2ea; } #proPanels .chip input{ width:16px; height:16px; appearance:none; border:2px solid rgba(255,255,255,.25); border-radius:4px; } #proPanels .chip input:checked{ background:var(--blue); border-color:var(--blue) } /* Avatar (apenas no pro) */ #proPanels .avatar{ display:flex; align-items:center; gap:12px } #proPanels .ph{ width:72px; height:72px; border-radius:999px; overflow:hidden; background:#0d1222; border:1px solid rgba(255,255,255,.08); display:grid; place-items:center; color:#94a3b8; font-size:24px; } #proPanels .ph img{ width:100%; height:100%; object-fit:cover } /* Botões usados no pro (não conflitam com .primary global) */ #proPanels .btn, #newReqCard .btn{ border:1px solid rgba(255,255,255,.08); background:#0e1627; color:#e5e7eb; font-weight:900; padding:12px 16px; border-radius:12px; cursor:pointer; } #proPanels .btn.primary, #newReqCard .btn.primary{ border-color:transparent; background:var(--blue); color:#fff; box-shadow:0 16px 28px rgba(37,99,235,.45); } #proPanels .btn.ghost, #newReqCard .btn.ghost{ background:transparent } #proPanels .btn[disabled]{ opacity:.6; cursor:not-allowed } /* Listagens (agenda/histórico) apenas no pro */ #proPanels .list{ display:flex; flex-direction:column; gap:14px } #proPanels .item{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:4px 0; border-bottom:1px solid rgba(255,255,255,.06); } #proPanels .item:last-child{ border-bottom:none } #proPanels .meta{ color:#9aa4b2; font-size:14px } /* Flash de sucesso (apenas dentro de .page pa* /* ====================================================================== PRO DASHBOARD — styles (v2) Escopo apenas em .pro-* | Depannage ====================================================================== */ /* Palette/vars locais do dashboard (dependem do root existente só em --blue) */ :root{ --pro-bg: #0b1220; --pro-surface: #0e1626; --pro-surface-2: #0f192b; --pro-ink: #e5e7eb; --pro-muted: #94a3b8; --pro-line: rgba(148,163,184,.15); --pro-pill: rgba(148,163,184,.10); --pro-accent: var(--blue, #2563eb); --pro-accent-2: rgba(37,99,235,.2); --pro-danger: #ef4444; } /* Layout base */ .pro-page{ background: var(--pro-bg); color: var(--pro-ink); min-height: 100dvh; max-width: 980px; margin: 0 auto; padding: 18px clamp(12px,4vw,20px) 28px; font-family: "InterVariable", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji", sans-serif; } /* Topbar */ .pro-topbar{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:6px 0 2px; } .pro-topbar .brand{ display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.2px; } .pro-topbar .logo{ width:34px; height:34px; border-radius:10px; background:linear-gradient(135deg,#4f46e5,#22c55e); display:grid; place-items:center; box-shadow:0 8px 20px rgba(0,0,0,.2); } .pro-topbar .brand-name{ font-weight:800; } .pro-topbar .actions{ display:flex; align-items:center; gap:8px; } .pro-topbar .lang{ display:flex; gap:6px; } .pro-topbar .lang a{ display:inline-block; padding:6px 10px; border-radius:12px; border:1px solid var(--pro-line); color:var(--pro-ink); text-decoration:none; background:transparent; font-weight:600; font-size:14px; } .pro-topbar .lang a.active{ border-color:var(--pro-accent-2); background:rgba(37,99,235,.10); } /* Banner */ .pro-banner{ margin:12px 0 18px; padding:12px 14px; border-radius:14px; border:1px solid var(--pro-line); background:rgba(148,163,184,.06); font-weight:700; color:var(--pro-ink); } .pro-banner.alert{ border-color:rgba(234,179,8,.25); background:rgba(234,179,8,.08); } .pro-banner.warn{ border-color:rgba(239,68,68,.25); background:rgba(239,68,68,.08); } /* Cartões */ .pro-card{ border:1px solid var(--pro-line); border-radius:16px; background: linear-gradient( to bottom right, rgba(255,255,255,.02), rgba(255,255,255,.00) ); backdrop-filter: saturate(120%) blur(4px); padding:14px; box-shadow:0 10px 28px rgba(2,6,23,.35); margin-bottom:12px; } .pro-card.highlight{ /* destaque sutil e transparente */ background: linear-gradient( to bottom right, rgba(255,255,255,.06), rgba(255,255,255,.02) ); border:1px solid rgba(255,255,255,.14); } .pro-card-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; } .pro-card-head h3, .pro-card-head h2{ margin:0; font-size:18px; font-weight:800; } /* Título com “ping” suave para nova demanda */ .title-ping{ position:relative; display:inline-block; } .title-ping.ping::after{ content:""; position:absolute; inset:-6px -8px; border-radius:12px; border:1px solid rgba(255,255,255,.25); animation: proPulse 0.9s ease-out 1; } @keyframes proPulse{ from{ opacity:0; transform:scale(.98); } 50%{ opacity:1; } to{ opacity:0; transform:scale(1.02); } } /* Chips e grid meta */ .chips{ display:flex; gap:8px; flex-wrap:wrap; } .chip{ background: var(--pro-pill); border:1px solid var(--pro-line); color: var(--pro-ink); padding:6px 10px; border-radius:999px; font-weight:700; font-size:12px; } .pro-grid.meta{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:8px; } .pro-grid .k{ color:var(--pro-muted); font-size:12px; } .pro-grid .v{ font-weight:700; } /* Texto do brief */ .pro-brief{ margin: 6px 2px 2px; line-height:1.55; color:var(--pro-ink); } /* Ações */ .pro-actions{ display:flex; gap:10px; margin-top:10px; } /* Botões */ .pro-btn{ appearance:none; border:none; cursor:pointer; border-radius:14px; padding:12px 16px; font-weight:800; letter-spacing:.2px; } .pro-btn.primary{ background: var(--pro-accent); color:#fff; box-shadow:0 10px 24px rgba(37,99,235,.35); } .pro-btn.ghost{ background:transparent; color:var(--pro-ink); border:1px solid var(--pro-line); } .pro-btn.danger{ background:transparent; color:#fecaca; border:1px solid rgba(239,68,68,.35); } .pro-btn[disabled]{ opacity:.6; cursor:not-allowed; } /* Colunas principais */ .pro-columns{ display:grid; grid-template-columns: 1.05fr .95fr; gap:12px; margin-top:16px; } @media (max-width: 860px){ .pro-columns{ grid-template-columns:1fr; } } /* Listas (agenda/histórico) */ .pro-list{ list-style:none; padding:0; margin:0; display:grid; gap:8px; } .pro-item{ display:flex; align-items:center; justify-content:space-between; gap:10px; border:1px solid var(--pro-line); border-radius:12px; padding:10px 12px; background:rgba(255,255,255,.02); } .pro-item .left .strong{ font-weight:800; } .muted{ color:var(--pro-muted); } /* Formulário do perfil */ .pro-form{ display:grid; gap:10px; } .pro-form .row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; } @media (max-width: 620px){ .pro-form .row{ grid-template-columns:1fr; } } .pro-form .field{ display:grid; gap:6px; } .pro-form .field > span{ color:var(--pro-muted); font-weight:700; font-size:12px; } .pro-form input[type="text"], .pro-form input[type="email"], .pro-form input[type="tel"], .pro-form input[type="password"]{ width:100%; padding:12px 12px; border-radius:12px; border:1px solid var(--pro-line); background:rgba(255,255,255,.03); color:var(--pro-ink); outline:none; } .pro-form input::placeholder{ color:#cbd5e1; opacity:.6; } /* Chips de categorias */ .chips-select{ display:flex; flex-wrap:wrap; gap:8px; } .chip-check{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border:1px solid var(--pro-line); border-radius:999px; background:rgba(255,255,255,.02); } .chip-check input{ accent-color: var(--pro-accent); } /* Foto do perfil */ .pro-photo{ display:flex; align-items:center; gap:10px; } .pro-photo img{ width:96px; height:96px; border-radius:999px; object-fit:cover; background:#cbd5e1; border:1px solid var(--pro-line); } /* Modal de login/registro */ .pro-modal-overlay{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(2,6,23,.60); backdrop-filter: blur(6px); z-index:1000; } .pro-modal-overlay.open{ display:flex; } .pro-modal{ width:min(480px,92%); background:var(--pro-surface); color:var(--pro-ink); border:1px solid var(--pro-line); border-radius:16px; padding:16px; box-shadow:0 30px 80px rgba(0,0,0,.45); } .pro-modal h3{ margin:6px 6px 12px; font-size:18px; font-weight:800; } .pro-modal .or{ text-align:center; color:var(--pro-muted); margin:8px 0; } /* Utilitários extra */ .pro-sep{ height:1px; background:var(--pro-line); margin:8px 0; } /* Pro dashboard – mobile-first sizing */ .pro-form input[type="text"], .pro-form input[type="email"], .pro-form input[type="tel"], .pro-form input[type="password"]{ font-size:16px; } .pro-btn{ font-size:16px; } /* === Google Places Autocomplete (dark + acima de tudo) === */ .pac-container{ z-index: 2147483647 !important; background: #0f172a !important; /* fundo dark */ border: 1px solid #334155 !important; /* borda slate-700 */ border-radius: 12px !important; box-shadow: 0 22px 60px rgba(0,0,0,.40) !important; backdrop-filter: blur(8px); } .pac-item{ color:#e5e7eb !important; /* slate-200 */ padding: 10px 12px !important; } .pac-item:hover{ background: rgba(148,163,184,.08) !important; } .pac-item-query{ color:#fff !important; } .pac-matched{ color:#93c5fd !important; } /* realce leve */