/* ============================================================================= sobe-ui.css — Linguagem visual das ferramentas web Sobe® ----------------------------------------------------------------------------- Fonte de verdade única para Aprova aí, Cronogramas & Gantt e Mosaico. Base flat dark (img1) + vidro seletivo no chrome (refs Apple) + gradiente ambiente. COMO USAR 1. Hospedar em apps.sobe.ae (raiz), ao lado da pasta /fonts. 2. Linkar no de cada ferramenta, com cache-busting: Subir o número do ?v= a cada alteração para furar o cache do cPanel. 3. Derivar TODA cor, raio e sombra dos tokens abaixo. Não reintroduzir hex solto. REGRAS INEGOCIÁVEIS (o que quebrou nas tentativas anteriores) · Vidro escuro APENAS no chrome: busca, botões, dock. Nunca em card, painel ou nas linhas repetidas de uma lista (custo de backdrop-filter no scroll). · Verde exclusivo de ação primária e estado ativo. · As oito cores de status vivem só em chip e dot. Não invadem superfícies. · Gradiente ambiente fraco e fixo. É ele que dá ao vidro algo para refratar; sobre preto chapado o vidro some. DEPENDÊNCIAS · Gilroy (woff2 em /fonts). Cai para Manrope (CDN) e depois system-ui. · Fallback de backdrop-filter já embutido (@supports mais abaixo). · Reduced-motion respeitado no fim do arquivo. ============================================================================= */ /* ---- Fontes de marca (path relativo a este .css) ---- */ @font-face{font-family:'Gilroy';src:url('fonts/Gilroy-Semibold.woff2') format('woff2');font-weight:600;font-display:swap} @font-face{font-family:'Gilroy';src:url('fonts/Gilroy-Medium.woff2') format('woff2');font-weight:500;font-display:swap} /* =============================== TOKENS ==================================== */ :root{ color-scheme:dark; /* Cores de marca / superfícies (idênticas às ferramentas atuais) */ --green:#1ED760; --green-2:#62E390; --green-3:#8FEBB0; --dark:#161616; --bg-2:#0F0F0F; --card:#1E1E1E; --card-2:#242424; --border:#262626; --dark-2:#58595B; --gray:#8B8B8D; --gray-2:#CDCECE; --white:#FFFFFF; /* Cores de STATUS (reservadas a chip/dot — ver mapa no bloco .chip) */ --red:#FF5A5A; --blue:#3B82F6; --orange:#FB923C; --yellow:#FACC15; --pink:#F472B6; --indigo:#6366F1; /* Raios (tokenizados a partir dos valores validados no kit) */ --r-pill:999px; --r-btn:10px; --r-glass:14px; --r-search:16px; --r-dock:30px; --r-card:14px; --r-panel:22px; /* Vidro seletivo (chrome Apple: busca, botões, dock) */ --glass-fill:rgba(22,22,22,.55); --glass-fill-2:rgba(32,32,32,.6); --glass-blur:blur(22px) saturate(150%); --glass-hi:inset 0 1px 0 rgba(255,255,255,.10); /* brilho superior */ --glass-edge:inset 0 0 0 1px rgba(255,255,255,.07); --glass-shadow:0 10px 34px rgba(0,0,0,.5); /* Acentos ambientais */ --bleed:rgba(30,215,96,.16); /* light-bleed verde (papel do rosa das refs) */ --hatch:rgba(30,215,96,.09); /* hachura da zona-alvo ativa */ } /* Fallback: sem backdrop-filter, o vidro vira sólido para não perder legibilidade */ @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ :root{--glass-fill:#1b1b1b; --glass-fill-2:#202020} } /* =============================== BASE ===================================== */ /* Gradiente ambiente. Aplicar ao body da ferramenta. Se a ferramenta já define background próprio no body, substituir por este bloco. */ .sobe-ambient, body.sobe-ambient{ background: radial-gradient(78% 55% at 6% -6%, rgba(30,215,96,.075) 0%, transparent 55%), radial-gradient(68% 60% at 102% 106%, rgba(30,215,96,.05) 0%, transparent 55%), var(--dark); background-attachment:fixed; } /* =============================== BOTÕES =================================== */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none; border-radius:var(--r-btn);padding:10px 16px;font-weight:600;font-size:14px; transition:background .15s,border-color .15s,color .15s,scale .15s} .btn:active{scale:.96} .btn-primary{background:var(--green);color:var(--dark);font-weight:700} .btn-primary:hover{background:var(--green-2)} .btn-ghost{background:var(--card);border:1px solid var(--border);color:var(--gray-2)} .btn-ghost:hover{border-color:var(--green);color:var(--green)} /* Botão de ícone redondo (cluster superior, img1) */ .icon-btn{width:40px;height:40px;border-radius:50%;background:var(--card); border:1px solid var(--border);color:var(--gray-2);display:grid;place-items:center; transition:border-color .15s,color .15s} .icon-btn:hover{border-color:var(--green);color:var(--green)} .icon-btn svg{width:18px;height:18px} .icon-btn.fab{width:46px;height:46px;background:var(--white);color:#111;border-color:#000; box-shadow:0 6px 20px rgba(0,0,0,.5)} /* ========================= VIDRO SELETIVO (chrome) ======================= */ .glass{background:var(--glass-fill); -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur); box-shadow:var(--glass-hi),var(--glass-edge),var(--glass-shadow); position:relative;overflow:hidden} /* Barra de busca (ref 1): canto contínuo, brilho superior, bleed verde */ .searchbar{display:flex;align-items:center;gap:12px;height:52px;padding:0 18px; border-radius:var(--r-search);color:var(--gray-2);font-size:15px;max-width:520px} .searchbar svg{width:19px;height:19px;color:var(--gray);flex:none} .searchbar .ph{color:var(--gray)} .searchbar .caret{width:1.5px;height:20px;background:var(--green);margin:0 -6px 0 2px; animation:blink 1.1s steps(1) infinite} .searchbar::after{content:"";position:absolute;right:-34px;top:-46px;width:170px;height:170px; background:radial-gradient(circle,var(--bleed),transparent 68%);pointer-events:none} /* Botão de vidro (secundário) */ .btn-glass{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 18px; border-radius:calc(var(--r-glass) - 1px);color:var(--white);font-weight:600;font-size:14px;border:none; background:var(--glass-fill-2); -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur); box-shadow:var(--glass-hi),var(--glass-edge);transition:box-shadow .16s,transform .12s} .btn-glass:hover{box-shadow:var(--glass-hi),inset 0 0 0 1px color-mix(in srgb,var(--green) 45%,transparent),0 6px 20px rgba(0,0,0,.4)} .btn-glass:active{transform:scale(.97)} /* Ícone de vidro (canto contínuo Apple) */ .icon-glass{width:46px;height:46px;border-radius:var(--r-glass);display:grid;place-items:center; color:var(--gray-2);border:none;background:var(--glass-fill-2); -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur); box-shadow:var(--glass-hi),var(--glass-edge);transition:color .16s,box-shadow .16s} .icon-glass:hover{color:var(--green)} .icon-glass svg{width:20px;height:20px} /* Dock flutuante (ref 3): bleed no rodapé + ícone ativo branco. Vertical por padrão; para horizontal, trocar flex-direction em .dock no HTML. */ .dock{width:66px;padding:12px 0;border-radius:var(--r-dock);display:flex;flex-direction:column; align-items:center;gap:6px} .dock .di{width:44px;height:44px;border-radius:var(--r-glass);display:grid;place-items:center; color:var(--gray);background:transparent;border:none;transition:color .15s,background .15s} .dock .di:hover{color:var(--gray-2);background:rgba(255,255,255,.05)} .dock .di svg{width:20px;height:20px} .dock .di.active{background:var(--white);color:#111;position:relative;z-index:1} .dock .di.active::before{content:"";position:absolute;inset:-13px;border-radius:50%;z-index:-1; background:radial-gradient(circle,var(--bleed),transparent 70%);animation:glowpulse 3.2s ease-in-out infinite} .dock::after{content:"";position:absolute;left:50%;bottom:-8px;transform:translateX(-50%); width:120px;height:88px;background:radial-gradient(circle,var(--bleed),transparent 65%);pointer-events:none} /* ===================== FPILL: pill com badge circular ==================== */ /* Assinatura da img1. .b = badge circular (A / # / ícone de formato). */ .rail{display:flex;flex-direction:column;gap:9px} .rail-title{font-size:15px;font-weight:600;color:var(--white);margin-bottom:4px} .fpill{display:inline-flex;align-items:center;gap:11px;align-self:flex-start; padding:6px 18px 6px 6px;border-radius:var(--r-pill);background:var(--card); border:1px solid var(--border);color:var(--gray-2);font-size:13.5px;font-weight:500; cursor:grab;transition:border-color .15s,background .15s,transform .12s} .fpill:hover{border-color:var(--dark-2);transform:translateX(2px)} .fpill .b{width:28px;height:28px;border-radius:50%;flex:none;display:grid;place-items:center; background:var(--card-2);border:1px solid var(--border); font-family:'Gilroy','Manrope',sans-serif;font-weight:600;font-size:12px;color:var(--white)} .fpill .b svg{width:14px;height:14px} .fpill.on{border-color:color-mix(in srgb,var(--green) 55%,transparent); background:color-mix(in srgb,var(--green) 9%,var(--card));color:var(--white)} .fpill.on .b{border-color:color-mix(in srgb,var(--green) 55%,transparent);color:var(--green-3)} .fpill.ghost{background:transparent;border-style:dashed;color:var(--gray);cursor:default} .fpill.ghost .b{background:transparent;border-style:dashed} /* Pill em arraste, com rastro direcional (o "momento" da img1). .drag-trail precisa de um pai position:relative para se posicionar. */ .drag-trail{position:absolute;left:0;top:50%;transform:translateY(-50%); width:230px;height:38px;border-radius:var(--r-pill);pointer-events:none; background:linear-gradient(to right,transparent,color-mix(in srgb,var(--green) 42%,transparent)); filter:blur(9px);opacity:.8;animation:trailpulse 1.9s ease-in-out infinite} .fpill.dragging{cursor:grabbing;border-color:color-mix(in srgb,var(--green) 60%,transparent); background:color-mix(in srgb,var(--green) 12%,var(--card));color:var(--white); box-shadow:0 10px 30px rgba(0,0,0,.5);position:relative;z-index:2} .fpill.dragging .b{background:linear-gradient(180deg,var(--green-2),var(--green));color:var(--dark);border-color:transparent} /* ===================== PAINÉIS + ZONA-ALVO (flat) ======================= */ .panels{display:grid;grid-template-columns:1fr 1fr;gap:16px;position:relative} .panel{background:var(--card);border:1px solid var(--border);border-radius:var(--r-panel);padding:20px} .panel h4{font-size:15px;font-weight:600;color:var(--white);margin-bottom:14px} /* Zona-alvo ativa: preenchida + hachura (coral→verde). Chapada, sem vidro. */ .zone{border-radius:var(--r-panel);padding:20px; border:1px solid color-mix(in srgb,var(--green) 45%,transparent); background: repeating-linear-gradient(-45deg,var(--hatch) 0 9px,transparent 9px 18px), color-mix(in srgb,var(--green) 11%,var(--card)); animation:zonebreathe 4.5s ease-in-out infinite} .zone h4{color:var(--green-3)} .zone .drop-hint{text-align:center;color:color-mix(in srgb,var(--green-3) 80%,transparent); font-size:13px;font-weight:600;padding:8px 0 16px} .zone .plus{width:38px;height:38px;border-radius:50%;margin:6px auto 10px;display:grid;place-items:center; color:var(--green-2);font-size:20px;border:1px solid color-mix(in srgb,var(--green) 45%,transparent)} .seam-fab{position:absolute;left:calc(50% - 23px);top:34px;z-index:5} /* ============================ CHIPS / STATUS ============================= */ /* Chip neutro por padrão; a cor vive no --c do dot. .solid preenche (só status). MAPA DE STATUS (definir --c inline no HTML): Rascunho→--gray Em criação→--indigo Em revisão→--orange Aguardando cliente→--yellow Ajustes solicitados→--pink Reprovado→--red Aprovado→--green Publicado→--blue */ .chip{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600; padding:4px 11px;border-radius:var(--r-pill);white-space:nowrap; background:var(--card-2);color:var(--gray-2);border:1px solid var(--border)} .chip .dot{width:7px;height:7px;border-radius:var(--r-pill);background:var(--c,var(--gray));flex:none} .chip.solid{background:color-mix(in srgb,var(--c) 15%,transparent);color:var(--c);border-color:transparent} /* ==================== DECK DE CARDS (opcional — Aprova aí) =============== */ /* Específico do deck de peças. Gantt/Mosaico podem ignorar este bloco. */ .deck{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:16px} .pcard{background:var(--card);border:1px solid var(--border);border-radius:var(--r-card);overflow:hidden; display:flex;flex-direction:column;transition:border-color .16s,box-shadow .16s,transform .16s;cursor:pointer} .pcard:hover{border-color:var(--dark-2);box-shadow:0 14px 34px rgba(0,0,0,.4);transform:translateY(-3px)} .pcard .thumb{aspect-ratio:1/1;background:var(--card-2);position:relative;display:grid;place-items:center} .pcard .thumb .b{width:34px;height:34px;border-radius:50%;background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.14); display:grid;place-items:center;color:#fff} .pcard .thumb .b svg{width:16px;height:16px} .tbadge{position:absolute;top:8px;left:8px} .pbody{padding:12px 13px 13px;display:flex;flex-direction:column;gap:9px;flex:1} .ptitle{font-size:14px;font-weight:600;line-height:1.25} .pfoot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:8px} .pdate{font-size:11.5px;color:var(--gray-2);font-weight:600} /* =============================== MOTION ================================== */ @keyframes blink{0%,50%{opacity:1}51%,100%{opacity:0}} @keyframes glowpulse{0%,100%{opacity:.65}50%{opacity:1}} @keyframes zonebreathe{0%,100%{box-shadow:0 0 0 0 rgba(30,215,96,0)}50%{box-shadow:0 0 26px 0 rgba(30,215,96,.10)}} @keyframes trailpulse{0%,100%{opacity:.8}50%{opacity:.5}} @media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}