/* ============================================================================ J.A.R.V.I.S. · Tokens, reset e ambiente ---------------------------------------------------------------------------- A PALETA VIVE AQUI e em mais lado nenhum: os tokens --glass/--blur/--edge/ --amber(violeta)/--cyan alimentam as três soluções ao mesmo tempo. Também aqui: o reset, o fundo com os blooms de luz (a MATÉRIA que o vidro desfoca) e a sequência de arranque. ========================================================================== */ /* ============================================================ J.A.R.V.I.S. — HUD v3 «Mark VII» FUI à Homem de Ferro: reator com anel segmentado + arco âmbar em contra-rotação, telemetria decorativa a ladear o reator (ecrãs largos), arranque com o nome holográfico num anel, varrimento no cabeçalho, cantos HUD nas bolhas, grelha + anéis de radar no fundo. Ciano/dourado/âmbar; movimento controlado (prefers-reduced-motion). REGRA: todos os seletores usados pelo js/app.js mantêm o nome. ============================================================ */ /* ============================================================================ SISTEMA DE DESIGN v4 «Glass» (30 jul 2026) ---------------------------------------------------------------------------- O redesenho da app de música mostrou o caminho: vidro a sério, cantos largos, violeta + ciano, e tipografia limpa em vez de mono a fingir de terminal. Estas variáveis são o ÚNICO sítio onde a paleta vive — mudar aqui muda o Jarvis OS, a app do Mac e a .ipa ao mesmo tempo, sem tocar num único seletor. NOMES MANTIDOS de propósito (--amber, --cyan…): são usados em ~150 sítios e trocar-lhes o nome era partir tudo por estética. Mudou o VALOR, não o nome: o "amber" do HUD é agora o violeta da casa. ========================================================================== */ :root { --dock-scale: 1; /* tamanho da barra de baixo — ajustável (JS persiste em jarvis.dockScale) */ --bg: #08061a; --bg-2: #0d0a24; /* VIDRO A SÉRIO: branco translúcido por cima do fundo, não um azul-escuro opaco a fingir. É isto que dá o efeito das referências. */ /* ===== MATERIAL «VIDRO» (v4.3) — a receita da Apple, não «cor com alpha» ===== O que me faltava era o INGREDIENTE PRINCIPAL: brightness(). O material da Apple CLAREIA o que está por trás (fica leitoso, translúcido) em vez de só deixar passar a cor do fundo — e tem GRÃO fininho, que é o que o olho lê como "fosco". São quatro camadas: 1. película branca em gradiente (o leite) 2. grão (a textura do vidro fosco) 3. backdrop-filter com blur + saturate + BRIGHTNESS 4. aresta de luz especular em cima, sombra em baixo ========================================================================= */ --grao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.09'/%3E%3C/svg%3E"); /* MENOS LEITE, MAIS COR (31 jul 2026: "estão muito murchas, quero mais vivas e não tão opacas"). A película branca a 0.30 lia-se como cinzento leitoso e TAPAVA os blooms — o vidro ficava baço. Baixa-se o branco para metade, entra um tinte cromático da casa (violeta→ciano→magenta, subtil) por baixo dele, e o backdrop satura mais: a cor do fundo passa a atravessar as superfícies. */ --glass: var(--grao), linear-gradient(155deg, rgba(255, 255, 255, 0.17), rgba(255, 255, 255, 0.06) 48%, rgba(255, 255, 255, 0.10)), linear-gradient(215deg, rgba(160, 107, 255, 0.20), rgba(74, 217, 245, 0.10) 55%, rgba(227, 100, 216, 0.14)); --glass-strong: var(--grao), linear-gradient(155deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.09) 46%, rgba(255, 255, 255, 0.13)), linear-gradient(215deg, rgba(160, 107, 255, 0.26), rgba(74, 217, 245, 0.13) 55%, rgba(227, 100, 216, 0.18)); --edge: rgba(255, 255, 255, 0.34); --edge-strong: rgba(255, 255, 255, 0.5); /* Receita do vidro, num sítio só — usada por todas as superfícies. */ /* brightness moderado: o vidro ESCURO da Apple levanta pouco — quem vende o material é a aresta especular, não a claridade. Com 1.32 ficava leitoso ao ponto de o texto branco deixar de se ler. */ --blur: blur(34px) saturate(240%) brightness(1.14); --glass-shadow: 0 22px 55px rgba(4, 2, 16, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.7), /* brilho especular no topo */ inset 0 -1px 0 rgba(255, 255, 255, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.06); --cyan: #4ad9f5; --cyan-hi: #c8f6ff; --cyan-dim: #2b7f9c; --cyan-glow: rgba(74, 217, 245, 0.45); --gold: #c9a7ff; --gold-glow: rgba(201, 167, 255, 0.4); /* «amber» = o violeta da casa (mesmo tom da app de música). */ --amber: #a06bff; --amber-glow: rgba(160, 107, 255, 0.45); --violet: #a06bff; --violet-hi: #c79dff; --magenta: #e364d8; --grad: linear-gradient(135deg, #a06bff, #e364d8); --r-lg: 22px; /* raio dos cartões grandes */ --r-md: 16px; /* raio médio (bolhas, painéis pequenos) */ --r-sm: 12px; --text: #f4f1ff; --text-dim: #a79ec6; --danger: #ff6b8a; --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif; --font-mono: ui-monospace, "SF Mono", "Menlo", "Roboto Mono", "Consolas", monospace; --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); } * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { height: 100%; background: var(--bg); color: var(--text); font-family: var(--font-ui); overflow: hidden; overscroll-behavior: none; -webkit-user-select: none; user-select: none; -webkit-font-smoothing: antialiased; } /* Camada ambiente: orbes de luz profundas (dark glassmorphism) + grelha de engenharia ténue, desvanecida nas margens. Só gradientes — barato. */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; /* Orbes de luz violeta/ciano (as das referências) + uma grelha de engenharia quase invisível. Só gradientes — não custa nada a pintar. */ /* BLOOMS FORTES, não um véu tímido. Isto não é decoração: é a MATÉRIA que o `backdrop-filter` das superfícies desfoca. Com um fundo escuro e liso, o vidro não tem nada para mostrar e lê-se como cartão cinzento — foi o erro da primeira tentativa ("vejo imenso roxo, nada glass"). */ /* LUZ EM TODO O ECRÃ, não só nos cantos. Erro da 2.ª tentativa: as manchas estavam nas bordas e os painéis vivem no MEIO — assentavam sobre preto e o desfoque não tinha nada para mostrar. Agora há sempre cor por baixo de qualquer painel, esteja ele onde estiver. */ background: radial-gradient(55% 45% at 74% 2%, rgba(168, 85, 247, 0.85), transparent 72%), radial-gradient(50% 42% at 10% 8%, rgba(34, 211, 238, 0.5), transparent 70%), radial-gradient(48% 40% at 96% 58%, rgba(236, 72, 153, 0.45), transparent 70%), radial-gradient(58% 48% at 18% 88%, rgba(99, 102, 241, 0.6), transparent 72%), radial-gradient(52% 44% at 60% 104%, rgba(56, 189, 248, 0.4), transparent 70%), radial-gradient(80% 70% at 50% 46%, rgba(120, 92, 220, 0.35), transparent 78%), linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px); background-size: auto, auto, auto, auto, auto, auto, 72px 72px, 72px 72px; filter: saturate(1.2); -webkit-mask: radial-gradient(120% 100% at 50% 40%, #000 55%, rgba(0,0,0,0.35) 100%); mask: radial-gradient(120% 100% at 50% 40%, #000 55%, rgba(0,0,0,0.35) 100%); } /* Vinheta + varrimento ultra subtil por cima de tudo (não intercepta toques). */ body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 90; /* Só vinheta. As riscas de "varrimento de televisão" saíram: sujavam o vidro e eram exatamente o oposto de «clean». */ background: radial-gradient(125% 95% at 50% 45%, transparent 60%, rgba(4, 2, 14, 0.55) 100%); } .hidden { display: none !important; } /* ===== Arranque ===== */ .boot { position: fixed; inset: 0; background: var(--bg); display: flex; align-items: center; justify-content: center; z-index: 100; transition: opacity 0.6s; } .boot.fade { opacity: 0; pointer-events: none; } .boot-inner { text-align: center; padding: 24px; position: relative; z-index: 1; } /* Emblema de arranque: anel holográfico com o NOME atravessado (ref. imagem «JARVIS in a ring») — o reator antigo vira anel de fundo, mais difuso. */ .boot-emblem { position: relative; width: 200px; height: 200px; margin: 0 auto 28px; } .boot-name { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 24px; font-weight: 700; letter-spacing: 5px; padding-left: 5px; /* compensa o letter-spacing do último caráter */ color: var(--cyan-hi); text-shadow: 0 0 8px var(--cyan-glow), 0 0 26px rgba(63, 220, 255, 0.55), 0 0 60px rgba(63, 220, 255, 0.35); animation: nameFlicker 2.8s ease-in-out infinite; } @keyframes nameFlicker { 0%, 100% { opacity: 0.92; } 6% { opacity: 0.65; } 9% { opacity: 1; } 48% { opacity: 0.95; } 52% { opacity: 0.8; } 55% { opacity: 1; } } /* O emblema de arranque é a MESMA nebulosa de partículas do reator (canvas atado pelo js/reactor.js em modo ciano) com um anel fino de instrumento e um arco a rodar devagar — o nome holográfico fica por cima. */ .boot-reactor { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 50% 50%, rgba(63, 220, 255, 0.10) 0%, rgba(63, 220, 255, 0.05) 45%, transparent 68%); } .boot-reactor::before { content: ""; position: absolute; inset: -6%; border-radius: 50%; background: conic-gradient(from 0deg, rgba(126, 222, 255, 0.55) 0 40deg, transparent 40deg 200deg, rgba(126, 222, 255, 0.3) 200deg 255deg, transparent 255deg 360deg); -webkit-mask: radial-gradient(circle, transparent 70.5%, #000 71%, #000 71.8%, transparent 72.3%); mask: radial-gradient(circle, transparent 70.5%, #000 71%, #000 71.8%, transparent 72.3%); animation: spin 6s linear infinite; } .boot-reactor::after { content: ""; position: absolute; inset: 4%; border-radius: 50%; border: 1px solid rgba(63, 220, 255, 0.16); } .boot-log { font-family: var(--font-mono); font-size: 12px; color: var(--cyan); text-align: left; min-height: 130px; width: min(330px, 80vw); margin: 0 auto; white-space: pre-wrap; text-shadow: 0 0 10px var(--cyan-glow); opacity: 0.92; } /* ===== SUPERFÍCIES DE VIDRO — a lista canónica ============================== TODAS as superfícies do sistema herdam o material aqui, uma vez só. Antes isto estava declarado 5× para cada painel (no os.css, no apps.css e duas no v4.css, uma delas com !important a martelar as outras): 115 declarações que se anulavam umas às outras. Se acrescentares uma superfície nova, junta o seletor A ESTA LISTA — não faças outro bloco. ========================================================================== */ /* (a) CARTÕES — flutuam, por isso têm contorno completo e cantos largos. */ .conv-rail, .hud-bottom, .ws-win, .notas-box, .jos-setup-box, .jos-power-menu, .mini-player, .osk, .mu-prompt-box { background: var(--glass); background-size: 160px 160px, cover; border: 1px solid var(--edge); border-radius: var(--r-lg); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); box-shadow: var(--glass-shadow); } /* (b) SUPERFÍCIE DE BORDO — encosta a um lado do ecrã. Leva o MATERIAL, mas nunca cantos nem contorno completo: foi o que a partiu quando a meti na lista dos cartões. NOTA: o launcher NÃO entra aqui. É um VÉU que cobre o ecrã inteiro — dar-lhe película branca pintou o ecrã todo de claro (medido: 98% dos pixels diferentes). Véus ficam no os.css, com o seu próprio fundo escuro. */ .settings-sheet { background: var(--glass); background-size: 160px 160px, cover; backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }