/* LEITURA: Aparência do login e do aplicativo: cores, espaçamentos, responsividade e animações. CSS não concede */ /* LEITURA: permissões e não protege dados; isso cabe ao backend. */ /* ========================================================================== OIIO · Superapp de Foco e Dopamina para TDAH Versão Titânio Acessibilidade · Google Pro Vinculado Desenvolvido & Proprietário: SintNext Web (sintnextweb.com) ========================================================================== */ /* LEITURA: Seleciona :root: raiz do documento: variáveis daqui são herdadas e reutilizadas com var(--nome). As */ /* LEITURA: declarações abaixo definem sua aparência. */ :root { /* 1. Paleta Neuroacolhedora (UX Confortável & Unissex) */ /* LEITURA: Variável --bg-app: guarda #1E222B para reutilizar com var(--bg-app); mudar este valor afeta todos os */ /* LEITURA: seletores que o usam. */ --bg-app: #1E222B; /* Modo escuro cinza-azulado anti-fadiga */ /* LEITURA: Variável --bg-card: guarda #272C38 para reutilizar com var(--bg-card); mudar este valor afeta todos os */ /* LEITURA: seletores que o usam. */ --bg-card: #272C38; /* Superfície de cards suave */ /* LEITURA: Variável --bg-card-subtle: guarda #212631 para reutilizar com var(--bg-card-subtle); mudar este valor */ /* LEITURA: afeta todos os seletores que o usam. */ --bg-card-subtle: #212631; /* Elementos secundários */ /* LEITURA: Variável --bg-hover: guarda #313746 para reutilizar com var(--bg-hover); mudar este valor afeta todos */ /* LEITURA: os seletores que o usam. */ --bg-hover: #313746; /* Hover suave */ /* LEITURA: Variável --text-main: guarda #E2E8F0 para reutilizar com var(--text-main); mudar este valor afeta */ /* LEITURA: todos os seletores que o usam. */ --text-main: #E2E8F0; /* Branco off-white suave */ /* LEITURA: Variável --text-secondary: guarda #94A3B8 para reutilizar com var(--text-secondary); mudar este valor */ /* LEITURA: afeta todos os seletores que o usam. */ --text-secondary: #94A3B8; /* Cinza azulado de suporte */ /* LEITURA: Variável --text-muted: guarda #64748B para reutilizar com var(--text-muted); mudar este valor afeta */ /* LEITURA: todos os seletores que o usam. */ --text-muted: #64748B; /* Texto desativado */ /* Acentos Funcionais */ /* LEITURA: Variável --accent-focus: guarda #A5B4FC para reutilizar com var(--accent-focus); mudar este valor */ /* LEITURA: afeta todos os seletores que o usam. */ --accent-focus: #A5B4FC; /* Lavanda pastel (Foco & relaxamento) */ /* LEITURA: Variável --accent-focus-glow: guarda rgba(165, 180, 252, 0.25) para reutilizar com var(--accent-focus- */ /* LEITURA: glow); mudar este valor afeta todos os seletores que o usam. */ --accent-focus-glow: rgba(165, 180, 252, 0.25); /* LEITURA: Variável --accent-habits: guarda #86EFAC para reutilizar com var(--accent-habits); mudar este valor */ /* LEITURA: afeta todos os seletores que o usam. */ --accent-habits: #86EFAC; /* Verde menta claro (Hábitos & sucesso) */ /* LEITURA: Variável --accent-habits-glow: guarda rgba(134, 239, 172, 0.25) para reutilizar com var(--accent- */ /* LEITURA: habits-glow); mudar este valor afeta todos os seletores que o usam. */ --accent-habits-glow: rgba(134, 239, 172, 0.25); /* LEITURA: Variável --accent-dopamine: guarda #FDE047 para reutilizar com var(--accent-dopamine); mudar este */ /* LEITURA: valor afeta todos os seletores que o usam. */ --accent-dopamine: #FDE047; /* Amarelo manteiga pastel (Dopamina & energia) */ /* LEITURA: Variável --accent-dopamine-glow: guarda rgba(253, 224, 71, 0.25) para reutilizar com var(--accent- */ /* LEITURA: dopamine-glow); mudar este valor afeta todos os seletores que o usam. */ --accent-dopamine-glow: rgba(253, 224, 71, 0.25); /* LEITURA: Variável --accent-emergency: guarda #FCA5A5 para reutilizar com var(--accent-emergency); mudar este */ /* LEITURA: valor afeta todos os seletores que o usam. */ --accent-emergency: #FCA5A5; /* Coral pastel suave (Paralisia Total) */ /* LEITURA: Variável --accent-emergency-bg: guarda rgba(239, 68, 68, 0.15) para reutilizar com var(--accent- */ /* LEITURA: emergency-bg); mudar este valor afeta todos os seletores que o usam. */ --accent-emergency-bg: rgba(239, 68, 68, 0.15); /* LEITURA: Variável --border-subtle: guarda rgba(255, 255, 255, 0.08) para reutilizar com var(--border-subtle); */ /* LEITURA: mudar este valor afeta todos os seletores que o usam. */ --border-subtle: rgba(255, 255, 255, 0.08); /* LEITURA: Variável --border-active: guarda rgba(165, 180, 252, 0.4) para reutilizar com var(--border-active); */ /* LEITURA: mudar este valor afeta todos os seletores que o usam. */ --border-active: rgba(165, 180, 252, 0.4); /* LEITURA: Variável --font-sans: guarda 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif para reutilizar */ /* LEITURA: com var(--font-sans); mudar este valor afeta todos os seletores que o usam. */ --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; /* LEITURA: Variável --font-display: guarda 'Outfit', var(--font-sans) para reutilizar com var(--font-display); */ /* LEITURA: mudar este valor afeta todos os seletores que o usam. */ --font-display: 'Outfit', var(--font-sans); /* LEITURA: Variável --radius-sm: guarda 10px para reutilizar com var(--radius-sm); mudar este valor afeta todos */ /* LEITURA: os seletores que o usam. */ --radius-sm: 10px; /* LEITURA: Variável --radius-md: guarda 16px para reutilizar com var(--radius-md); mudar este valor afeta todos */ /* LEITURA: os seletores que o usam. */ --radius-md: 16px; /* LEITURA: Variável --radius-lg: guarda 24px para reutilizar com var(--radius-lg); mudar este valor afeta todos */ /* LEITURA: os seletores que o usam. */ --radius-lg: 24px; /* LEITURA: Variável --radius-full: guarda 9999px para reutilizar com var(--radius-full); mudar este valor afeta */ /* LEITURA: todos os seletores que o usam. */ --radius-full: 9999px; /* LEITURA: Variável --shadow-card: guarda 0 10px 25px -5px rgba(0, 0, 0, 0.35) para reutilizar com var(--shadow- */ /* LEITURA: card); mudar este valor afeta todos os seletores que o usam. */ --shadow-card: 0 10px 25px -5px rgba(0, 0, 0, 0.35); /* LEITURA: Variável --transition-fast: guarda 0.18s cubic-bezier(0.4, 0, 0.2, 1) para reutilizar com */ /* LEITURA: var(--transition-fast); mudar este valor afeta todos os seletores que o usam. */ --transition-fast: 0.18s cubic-bezier(0.4, 0, 0.2, 1); /* LEITURA: Variável --transition-smooth: guarda 0.32s cubic-bezier(0.4, 0, 0.2, 1) para reutilizar com */ /* LEITURA: var(--transition-smooth); mudar este valor afeta todos os seletores que o usam. */ --transition-smooth: 0.32s cubic-bezier(0.4, 0, 0.2, 1); } /* LEITURA: Seleciona *: todos os elementos: normaliza medidas e espaçamentos padrão. As declarações abaixo definem */ /* LEITURA: sua aparência. */ * { /* LEITURA: box-sizing: define como largura/altura são calculadas; border-box inclui padding e borda no tamanho */ /* LEITURA: declarado. Valor nesta regra: border-box. */ box-sizing: border-box; /* LEITURA: margin: espaço externo: 1 valor vale para todos os lados; 2 = vertical/horizontal; 4 = */ /* LEITURA: topo/direita/baixo/esquerda; auto pode centralizar. Valor nesta regra: 0. */ margin: 0; /* LEITURA: padding: espaço interno entre conteúdo e borda, com a mesma ordem topo/direita/baixo/esquerda quando */ /* LEITURA: há quatro valores. Valor nesta regra: 0. */ padding: 0; /* LEITURA: -webkit-tap-highlight-color: cor do realce de toque em navegadores WebKit; transparent o oculta. Valor */ /* LEITURA: nesta regra: transparent. */ -webkit-tap-highlight-color: transparent; } /* LEITURA: Seleciona body: corpo da página inteira, comum ao login e à tela principal. As declarações abaixo */ /* LEITURA: definem sua aparência. */ body { /* LEITURA: font-family: lista de fontes em ordem de preferência; o navegador usa a próxima se a anterior não */ /* LEITURA: estiver disponível. Valor nesta regra: var(--font-sans). */ font-family: var(--font-sans); /* LEITURA: background-color: cor sólida de fundo. Valor nesta regra: var(--bg-app). */ background-color: var(--bg-app); /* LEITURA: color: cor do texto e referência de currentColor para ícones. Valor nesta regra: var(--text-main). */ color: var(--text-main); /* LEITURA: min-height: altura mínima; 100vh corresponde à altura da área de visualização usada pelo navegador. */ /* LEITURA: Valor nesta regra: 100vh. */ min-height: 100vh; /* LEITURA: display: modelo de layout: none esconde o elemento; flex organiza em eixo; grid organiza em grade; */ /* LEITURA: block ocupa bloco. Valor nesta regra: flex. */ display: flex; /* LEITURA: justify-content: distribuição dos itens no eixo principal do flexbox ou alinhamento correspondente no */ /* LEITURA: grid. Valor nesta regra: center. */ justify-content: center; /* LEITURA: line-height: altura das linhas de texto; valor sem unidade multiplica o tamanho da fonte. Valor nesta */ /* LEITURA: regra: 1.5. */ line-height: 1.5; /* LEITURA: overflow-x: tratamento do conteúdo que excede a largura. Valor nesta regra: hidden. */ overflow-x: hidden; /* LEITURA: background-image: imagem ou camadas de gradientes do fundo. Valor nesta regra: continua nas próximas */ /* LEITURA: linhas. */ background-image: /* LEITURA: Camada de gradiente: define forma/posição, cores e pontos de transição. As camadas separadas por */ /* LEITURA: vírgula compõem o fundo da regra anterior. */ radial-gradient(circle at 10% 15%, rgba(165, 180, 252, 0.05) 0%, transparent 40%), /* LEITURA: Camada de gradiente: define forma/posição, cores e pontos de transição. As camadas separadas por */ /* LEITURA: vírgula compõem o fundo da regra anterior. */ radial-gradient(circle at 90% 20%, rgba(253, 224, 71, 0.04) 0%, transparent 35%), /* LEITURA: Camada de gradiente: define forma/posição, cores e pontos de transição. As camadas separadas por */ /* LEITURA: vírgula compõem o fundo da regra anterior. */ radial-gradient(circle at 50% 85%, rgba(134, 239, 172, 0.04) 0%, transparent 45%); /* LEITURA: background-attachment: comportamento do fundo na rolagem; fixed o prende à área de visualização. Valor */ /* LEITURA: nesta regra: fixed. */ background-attachment: fixed; } /* App Wrapper Mobile-First */ /* LEITURA: Seleciona .oiio-app-wrapper: contêiner estreito que organiza o aplicativo e centraliza o conteúdo. As */ /* LEITURA: declarações abaixo definem sua aparência. */ .oiio-app-wrapper { /* LEITURA: width: largura; % depende do bloco de referência, vw da largura da tela e px usa pixels CSS. Valor */ /* LEITURA: nesta regra: 100%. */ width: 100%; /* LEITURA: max-width: largura máxima, impedindo que o bloco cresça além do valor mesmo em tela larga. Valor nesta */ /* LEITURA: regra: 500px. */ max-width: 500px; /* LEITURA: min-height: altura mínima; 100vh corresponde à altura da área de visualização usada pelo navegador. */ /* LEITURA: Valor nesta regra: 100vh. */ min-height: 100vh; /* LEITURA: display: modelo de layout: none esconde o elemento; flex organiza em eixo; grid organiza em grade; */ /* LEITURA: block ocupa bloco. Valor nesta regra: flex. */ display: flex; /* LEITURA: flex-direction: direção do eixo principal do flexbox; column empilha verticalmente e row organiza */ /* LEITURA: horizontalmente. Valor nesta regra: column. */ flex-direction: column; /* LEITURA: padding: espaço interno entre conteúdo e borda, com a mesma ordem topo/direita/baixo/esquerda quando */ /* LEITURA: há quatro valores. Valor nesta regra: 1rem 1rem 6.5rem 1rem. */ padding: 1rem 1rem 6.5rem 1rem; /* LEITURA: position: referência de posicionamento: relative mantém o espaço no fluxo; absolute sai do fluxo; */ /* LEITURA: fixed fica preso à janela. Valor nesta regra: relative. */ position: relative; } /* ========================================================================== TELA DE ATIVAÇÃO / LOCK SCREEN ANTI-PIRATARIA (FASE 1) ========================================================================== */ /* LEITURA: Seleciona .auth-lock-overlay: estrutura usada pela tela de login; a classe active controla sua exibição */ /* LEITURA: visual, mas a autenticação real está no backend. As declarações abaixo definem sua aparência. */ .auth-lock-overlay { /* LEITURA: position: referência de posicionamento: relative mantém o espaço no fluxo; absolute sai do fluxo; */ /* LEITURA: fixed fica preso à janela. Valor nesta regra: fixed. */ position: fixed; /* LEITURA: top: deslocamento da borda superior quando o elemento é posicionado. Valor nesta regra: 0. */ top: 0; /* LEITURA: left: deslocamento da borda esquerda quando o elemento é posicionado. Valor nesta regra: 0. */ left: 0; /* LEITURA: width: largura; % depende do bloco de referência, vw da largura da tela e px usa pixels CSS. Valor */ /* LEITURA: nesta regra: 100vw. */ width: 100vw; /* LEITURA: height: altura; % depende da altura do bloco de referência, vh da tela e px usa pixels CSS. Valor */ /* LEITURA: nesta regra: 100vh. */ height: 100vh; /* LEITURA: background: atalho que configura o fundo; pode receber cor, imagem ou gradiente. Valor nesta regra: */ /* LEITURA: #151821. */ background: #151821; /* LEITURA: z-index: ordem de sobreposição dentro do contexto de empilhamento; não é prioridade global absoluta */ /* LEITURA: entre todos os elementos. Valor nesta regra: 2000. */ z-index: 2000; /* LEITURA: display: modelo de layout: none esconde o elemento; flex organiza em eixo; grid organiza em grade; */ /* LEITURA: block ocupa bloco. Valor nesta regra: none. */ display: none; /* LEITURA: flex-direction: direção do eixo principal do flexbox; column empilha verticalmente e row organiza */ /* LEITURA: horizontalmente. Valor nesta regra: column. */ flex-direction: column; /* LEITURA: align-items: alinhamento dos itens no eixo transversal do flexbox ou dentro das áreas de grid. Valor */ /* LEITURA: nesta regra: center. */ align-items: center; /* LEITURA: justify-content: distribuição dos itens no eixo principal do flexbox ou alinhamento correspondente no */ /* LEITURA: grid. Valor nesta regra: center. */ justify-content: center; /* LEITURA: padding: espaço interno entre conteúdo e borda, com a mesma ordem topo/direita/baixo/esquerda quando */ /* LEITURA: há quatro valores. Valor nesta regra: 1.5rem. */ padding: 1.5rem; /* LEITURA: text-align: alinhamento horizontal do texto dentro da caixa. Valor nesta regra: center. */ text-align: center; /* LEITURA: backdrop-filter: efeito aplicado ao conteúdo atrás do elemento, como desfoque; suporte varia entre */ /* LEITURA: navegadores. Valor nesta regra: blur(20px). */ backdrop-filter: blur(20px); } /* LEITURA: Seleciona .auth-lock-overlay.active: estrutura usada pela tela de login; a classe active controla sua */ /* LEITURA: exibição visual, mas a autenticação real está no backend. a classe active é um estado atribuído pelo */ /* LEITURA: JavaScript, diferente da pseudoclasse :active. */ .auth-lock-overlay.active { /* LEITURA: display: modelo de layout: none esconde o elemento; flex organiza em eixo; grid organiza em grade; */ /* LEITURA: block ocupa bloco. Valor nesta regra: flex. */ display: flex; } /* LEITURA: Seleciona .auth-card: cartão com campos de login. As declarações abaixo definem sua aparência. */ .auth-card { /* LEITURA: background: atalho que configura o fundo; pode receber cor, imagem ou gradiente. Valor nesta regra: */ /* LEITURA: var(--bg-card). */ background: var(--bg-card); /* LEITURA: border: atalho para espessura, estilo e cor da borda. Valor nesta regra: 1.5px solid rgba(165, 180, */ /* LEITURA: 252, 0.3). */ border: 1.5px solid rgba(165, 180, 252, 0.3); /* LEITURA: border-radius: arredondamento dos cantos; 50% pode gerar círculo em uma caixa quadrada. Valor nesta */ /* LEITURA: regra: var(--radius-lg). */ border-radius: var(--radius-lg); /* LEITURA: max-width: largura máxima, impedindo que o bloco cresça além do valor mesmo em tela larga. Valor nesta */ /* LEITURA: regra: 420px. */ max-width: 420px; /* LEITURA: width: largura; % depende do bloco de referência, vw da largura da tela e px usa pixels CSS. Valor */ /* LEITURA: nesta regra: 100%. */ width: 100%; /* LEITURA: padding: espaço interno entre conteúdo e borda, com a mesma ordem topo/direita/baixo/esquerda quando */ /* LEITURA: há quatro valores. Valor nesta regra: 2.2rem 1.75rem. */ padding: 2.2rem 1.75rem; /* LEITURA: box-shadow: sombra: deslocamentos horizontal/vertical, desfoque, espalhamento opcional e cor; não */ /* LEITURA: aumenta a caixa de layout. Valor nesta regra: 0 20px 50px rgba(0, 0, 0, 0.6). */ box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6); /* LEITURA: animation: animação nomeada em @keyframes, com duração, curva, repetição e demais opções indicadas. */ /* LEITURA: Valor nesta regra: modalPop 0.35s ease-out. */ animation: modalPop 0.35s ease-out; } /* LEITURA: Define os quadros da animação modalPop. Elementos a usam ao declarar animation com esse nome. */ @keyframes modalPop { /* LEITURA: Define o aspecto no quadro from da animação (from=0%, to=100%). opacity: opacidade de todo o elemento */ /* LEITURA: e seus filhos, de 0 (invisível) a 1 (opaco); valor 0; transform: transformação visual como deslocar, */ /* LEITURA: girar ou escalar; não reorganiza automaticamente os vizinhos no fluxo; valor scale(0.95). */ from { opacity: 0; transform: scale(0.95); } /* LEITURA: Define o aspecto no quadro to da animação (from=0%, to=100%). opacity: opacidade de todo o elemento e */ /* LEITURA: seus filhos, de 0 (invisível) a 1 (opaco); valor 1; transform: transformação visual como deslocar, */ /* LEITURA: girar ou escalar; não reorganiza automaticamente os vizinhos no fluxo; valor scale(1). */ to { opacity: 1; transform: scale(1); } } /* LEITURA: Seleciona .auth-mascot-img: os elementos cujas tags/classes/atributos correspondem ao seletor. As */ /* LEITURA: declarações abaixo definem sua aparência. */ .auth-mascot-img { /* LEITURA: width: largura; % depende do bloco de referência, vw da largura da tela e px usa pixels CSS. Valor */ /* LEITURA: nesta regra: 90px. */ width: 90px; /* LEITURA: height: altura; % depende da altura do bloco de referência, vh da tela e px usa pixels CSS. Valor */ /* LEITURA: nesta regra: 90px. */ height: 90px; /* LEITURA: border-radius: arredondamento dos cantos; 50% pode gerar círculo em uma caixa quadrada. Valor nesta */ /* LEITURA: regra: 50%. */ border-radius: 50%; /* LEITURA: margin: espaço externo: 1 valor vale para todos os lados; 2 = vertical/horizontal; 4 = */ /* LEITURA: topo/direita/baixo/esquerda; auto pode centralizar. Valor nesta regra: -1rem auto 1rem auto. */ margin: -1rem auto 1rem auto; /* LEITURA: border: atalho para espessura, estilo e cor da borda. Valor nesta regra: 3px solid var(--accent- */ /* LEITURA: focus). */ border: 3px solid var(--accent-focus); /* LEITURA: box-shadow: sombra: deslocamentos horizontal/vertical, desfoque, espalhamento opcional e cor; não */ /* LEITURA: aumenta a caixa de layout. Valor nesta regra: 0 8px 25px var(--accent-focus-glow). */ box-shadow: 0 8px 25px var(--accent-focus-glow); /* LEITURA: object-fit: como a imagem se ajusta à caixa; cover preenche e pode recortar as bordas. Valor nesta */ /* LEITURA: regra: cover. */ object-fit: cover; /* LEITURA: animation: animação nomeada em @keyframes, com duração, curva, repetição e demais opções indicadas. */ /* LEITURA: Valor nesta regra: floatMascot 4s ease-in-out infinite. */ animation: floatMascot 4s ease-in-out infinite; } /* LEITURA: Seleciona .auth-title: os elementos cujas tags/classes/atributos correspondem ao seletor. As declarações */ /* LEITURA: abaixo definem sua aparência. */ .auth-title { /* LEITURA: font-family: lista de fontes em ordem de preferência; o navegador usa a próxima se a anterior não */ /* LEITURA: estiver disponível. Valor nesta regra: var(--font-display). */ font-family: var(--font-display); /* LEITURA: font-size: tamanho das letras; rem é relativo à fonte raiz, px é pixel CSS. Valor nesta regra: 1.5rem. */ font-size: 1.5rem; /* LEITURA: font-weight: peso visual das letras; valores maiores normalmente pedem traços mais grossos. Valor */ /* LEITURA: nesta regra: 800. */ font-weight: 800; /* LEITURA: color: cor do texto e referência de currentColor para ícones. Valor nesta regra: #fff. */ color: #fff; /* LEITURA: margin-bottom: espaço externo abaixo do elemento. Valor nesta regra: 0.4rem. */ margin-bottom: 0.4rem; } /* LEITURA: Seleciona .auth-subtitle: os elementos cujas tags/classes/atributos correspondem ao seletor. As */ /* LEITURA: declarações abaixo definem sua aparência. */ .auth-subtitle { /* LEITURA: font-size: tamanho das letras; rem é relativo à fonte raiz, px é pixel CSS. Valor nesta regra: */ /* LEITURA: 0.88rem. */ font-size: 0.88rem; /* LEITURA: color: cor do texto e referência de currentColor para ícones. Valor nesta regra: var(--text- */ /* LEITURA: secondary). */ color: var(--text-secondary); /* LEITURA: line-height: altura das linhas de texto; valor sem unidade multiplica o tamanho da fonte. Valor nesta */ /* LEITURA: regra: 1.5. */ line-height: 1.5; /* LEITURA: margin-bottom: espaço externo abaixo do elemento. Valor nesta regra: 1.5rem. */ margin-bottom: 1.5rem; } /* ========================================================================== TELA DE INSTALAÇÃO OBRIGATÓRIA DO OIIO (PWA INSTALL GATE) ========================================================================== */ /* LEITURA: Seleciona .pwa-force-overlay: guia de instalação controlado por PWAForceInstallGate.init; o dono não */ /* LEITURA: precisa instalá-lo. As declarações abaixo definem sua aparência. */ .pwa-force-overlay { /* LEITURA: position: referência de posicionamento: relative mantém o espaço no fluxo; absolute sai do fluxo; */ /* LEITURA: fixed fica preso à janela. Valor nesta regra: fixed. */ position: fixed; /* LEITURA: top: deslocamento da borda superior quando o elemento é posicionado. Valor nesta regra: 0. */ top: 0; /* LEITURA: left: deslocamento da borda esquerda quando o elemento é posicionado. Valor nesta regra: 0. */ left: 0; /* LEITURA: width: largura; % depende do bloco de referência, vw da largura da tela e px usa pixels CSS. Valor */ /* LEITURA: nesta regra: 100vw. */ width: 100vw; /* LEITURA: height: altura; % depende da altura do bloco de referência, vh da tela e px usa pixels CSS. Valor */ /* LEITURA: nesta regra: 100vh. */ height: 100vh; /* LEITURA: background: atalho que configura o fundo; pode receber cor, imagem ou gradiente. Valor nesta regra: */ /* LEITURA: #12151e. */ background: #12151e; /* LEITURA: z-index: ordem de sobreposição dentro do contexto de empilhamento; não é prioridade global absoluta */ /* LEITURA: entre todos os elementos. Valor nesta regra: 3000. */ z-index: 3000; /* LEITURA: display: modelo de layout: none esconde o elemento; flex organiza em eixo; grid organiza em grade; */ /* LEITURA: block ocupa bloco. Valor nesta regra: none. */ display: none; /* LEITURA: flex-direction: direção do eixo principal do flexbox; column empilha verticalmente e row organiza */ /* LEITURA: horizontalmente. Valor nesta regra: column. */ flex-direction: column; /* LEITURA: align-items: alinhamento dos itens no eixo transversal do flexbox ou dentro das áreas de grid. Valor */ /* LEITURA: nesta regra: center. */ align-items: center; /* LEITURA: justify-content: distribuição dos itens no eixo principal do flexbox ou alinhamento correspondente no */ /* LEITURA: grid. Valor nesta regra: flex-start. */ justify-content: flex-start; /* LEITURA: padding: espaço interno entre conteúdo e borda, com a mesma ordem topo/direita/baixo/esquerda quando */ /* LEITURA: há quatro valores. Valor nesta regra: 2.2rem 1.25rem 3.5rem 1.25rem. */ padding: 2.2rem 1.25rem 3.5rem 1.25rem; /* LEITURA: text-align: alinhamento horizontal do texto dentro da caixa. Valor nesta regra: center. */ text-align: center; /* LEITURA: overflow-y: tratamento do conteúdo que excede a altura. Valor nesta regra: auto. */ overflow-y: auto; /* LEITURA: -webkit-overflow-scrolling: preferência antiga do WebKit para rolagem com inércia em áreas roláveis. */ /* LEITURA: Valor nesta regra: touch. */ -webkit-overflow-scrolling: touch; } /* LEITURA: Seleciona .pwa-force-overlay.active: guia de instalação controlado por PWAForceInstallGate.init; o dono */ /* LEITURA: não precisa instalá-lo. a classe active é um estado atribuído pelo JavaScript, diferente da pseudoclasse */ /* LEITURA: :active. */ .pwa-force-overlay.active { /* LEITURA: display: modelo de layout: none esconde o elemento; flex organiza em eixo; grid organiza em grade; */ /* LEITURA: block ocupa bloco. Valor nesta regra: flex. */ display: flex; } /* LEITURA: Seleciona .pwa-force-card: os elementos cujas tags/classes/atributos correspondem ao seletor. As */ /* LEITURA: declarações abaixo definem sua aparência. */ .pwa-force-card { /* LEITURA: max-width: largura máxima, impedindo que o bloco cresça além do valor mesmo em tela larga. Valor nesta */ /* LEITURA: regra: 440px. */ max-width: 440px; /* LEITURA: width: largura; % depende do bloco de referência, vw da largura da tela e px usa pixels CSS. Valor */ /* LEITURA: nesta regra: 100%. */ width: 100%; /* LEITURA: background: atalho que configura o fundo; pode receber cor, imagem ou gradiente. Valor nesta regra: */ /* LEITURA: var(--bg-card). */ background: var(--bg-card); /* LEITURA: border: atalho para espessura, estilo e cor da borda. Valor nesta regra: 2px solid rgba(165, 180, 252, */ /* LEITURA: 0.4). */ border: 2px solid rgba(165, 180, 252, 0.4); /* LEITURA: border-radius: arredondamento dos cantos; 50% pode gerar círculo em uma caixa quadrada. Valor nesta */ /* LEITURA: regra: var(--radius-lg). */ border-radius: var(--radius-lg); /* LEITURA: padding: espaço interno entre conteúdo e borda, com a mesma ordem topo/direita/baixo/esquerda quando */ /* LEITURA: há quatro valores. Valor nesta regra: 2.2rem 1.5rem. */ padding: 2.2rem 1.5rem; /* LEITURA: box-shadow: sombra: deslocamentos horizontal/vertical, desfoque, espalhamento opcional e cor; não */ /* LEITURA: aumenta a caixa de layout. Valor nesta regra: 0 25px 60px rgba(0, 0, 0, 0.75). */ box-shadow: 0 25px 60px rgba(0, 0, 0, 0.75); /* LEITURA: display: modelo de layout: none esconde o elemento; flex organiza em eixo; grid organiza em grade; */ /* LEITURA: block ocupa bloco. Valor nesta regra: flex. */ display: flex; /* LEITURA: flex-direction: direção do eixo principal do flexbox; column empilha verticalmente e row organiza */ /* LEITURA: horizontalmente. Valor nesta regra: column. */ flex-direction: column; /* LEITURA: align-items: alinhamento dos itens no eixo transversal do flexbox ou dentro das áreas de grid. Valor */ /* LEITURA: nesta regra: center. */ align-items: center; /* LEITURA: position: referência de posicionamento: relative mantém o espaço no fluxo; absolute sai do fluxo; */ /* LEITURA: fixed fica preso à janela. Valor nesta regra: relative. */ position: relative; /* LEITURA: animation: animação nomeada em @keyframes, com duração, curva, repetição e demais opções indicadas. */ /* LEITURA: Valor nesta regra: modalPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1). */ animation: modalPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); /* LEITURA: margin: espaço externo: 1 valor vale para todos os lados; 2 = vertical/horizontal; 4 = */ /* LEITURA: topo/direita/baixo/esquerda; auto pode centralizar. Valor nesta regra: auto 0. */ margin: auto 0; } /* LEITURA: Seleciona .pwa-force-mascot: os elementos cujas tags/classes/atributos correspondem ao seletor. As */ /* LEITURA: declarações abaixo definem sua aparência. */ .pwa-force-mascot { /* LEITURA: width: largura; % depende do bloco de referência, vw da largura da tela e px usa pixels CSS. Valor */ /* LEITURA: nesta regra: 95px. */ width: 95px; /* LEITURA: height: altura; % depende da altura do bloco de referência, vh da tela e px usa pixels CSS. Valor */ /* LEITURA: nesta regra: 95px. */ height: 95px; /* LEITURA: border-radius: arredondamento dos cantos; 50% pode gerar círculo em uma caixa quadrada. Valor nesta */ /* LEITURA: regra: 50%. */ border-radius: 50%; /* LEITURA: border: atalho para espessura, estilo e cor da borda. Valor nesta regra: 3.5px solid var(--accent- */ /* LEITURA: focus). */ border: 3.5px solid var(--accent-focus); /* LEITURA: box-shadow: sombra: deslocamentos horizontal/vertical, desfoque, espalhamento opcional e cor; não */ /* LEITURA: aumenta a caixa de layout. Valor nesta regra: 0 10px 30px var(--accent-focus-glow). */ box-shadow: 0 10px 30px var(--accent-focus-glow); /* LEITURA: object-fit: como a imagem se ajusta à caixa; cover preenche e pode recortar as bordas. Valor nesta */ /* LEITURA: regra: cover. */ object-fit: cover; /* LEITURA: animation: animação nomeada em @keyframes, com duração, curva, repetição e demais opções indicadas. */ /* LEITURA: Valor nesta regra: floatMascot 4s ease-in-out infinite. */ animation: floatMascot 4s ease-in-out infinite; /* LEITURA: margin-bottom: espaço externo abaixo do elemento. Valor nesta regra: 1rem. */ margin-bottom: 1rem; } /* LEITURA: Seleciona .pwa-force-badge: os elementos cujas tags/classes/atributos correspondem ao seletor. As */ /* LEITURA: declarações abaixo definem sua aparência. */ .pwa-force-badge { /* LEITURA: font-size: tamanho das letras; rem é relativo à fonte raiz, px é pixel CSS. Valor nesta regra: */ /* LEITURA: 0.72rem. */ font-size: 0.72rem; /* LEITURA: font-weight: peso visual das letras; valores maiores normalmente pedem traços mais grossos. Valor */ /* LEITURA: nesta regra: 800. */ font-weight: 800; /* LEITURA: text-transform: transformação visual de maiúsculas/minúsculas; não altera o texto armazenado. Valor */ /* LEITURA: nesta regra: uppercase. */ text-transform: uppercase; /* LEITURA: letter-spacing: distância adicional entre caracteres. Valor nesta regra: 0.08em. */ letter-spacing: 0.08em; /* LEITURA: background: atalho que configura o fundo; pode receber cor, imagem ou gradiente. Valor nesta regra: */ /* LEITURA: rgba(165, 180, 252, 0.15). */ background: rgba(165, 180, 252, 0.15); /* LEITURA: border: atalho para espessura, estilo e cor da borda. Valor nesta regra: 1px solid var(--accent- */ /* LEITURA: focus). */ border: 1px solid var(--accent-focus); /* LEITURA: color: cor do texto e referência de currentColor para ícones. Valor nesta regra: var(--accent-focus). */ color: var(--accent-focus); /* LEITURA: padding: espaço interno entre conteúdo e borda, com a mesma ordem topo/direita/baixo/esquerda quando */ /* LEITURA: há quatro valores. Valor nesta regra: 0.3rem 0.85rem. */ padding: 0.3rem 0.85rem; /* LEITURA: border-radius: arredondamento dos cantos; 50% pode gerar círculo em uma caixa quadrada. Valor nesta */ /* LEITURA: regra: var(--radius-full). */ border-radius: var(--radius-full); /* LEITURA: margin-bottom: espaço externo abaixo do elemento. Valor nesta regra: 0.75rem. */ margin-bottom: 0.75rem; } /* LEITURA: Seleciona .pwa-force-title: os elementos cujas tags/classes/atributos correspondem ao seletor. As */ /* LEITURA: declarações abaixo definem sua aparência. */ .pwa-force-title { /* LEITURA: font-family: lista de fontes em ordem de preferência; o navegador usa a próxima se a anterior não */ /* LEITURA: estiver disponível. Valor nesta regra: var(--font-display). */ font-family: var(--font-display); /* LEITURA: font-size: tamanho das letras; rem é relativo à fonte raiz, px é pixel CSS. Valor nesta regra: */ /* LEITURA: 1.45rem. */ font-size: 1.45rem; /* LEITURA: font-weight: peso visual das letras; valores maiores normalmente pedem traços mais grossos. Valor */ /* LEITURA: nesta regra: 800. */ font-weight: 800; /* LEITURA: color: cor do texto e referência de currentColor para ícones. Valor nesta regra: #fff. */ color: #fff; /* LEITURA: line-height: altura das linhas de texto; valor sem unidade multiplica o tamanho da fonte. Valor nesta */ /* LEITURA: regra: 1.25. */ line-height: 1.25; /* LEITURA: margin-bottom: espaço externo abaixo do elemento. Valor nesta regra: 0.5rem. */ margin-bottom: 0.5rem; } /* LEITURA: Seleciona .pwa-force-desc: os elementos cujas tags/classes/atributos correspondem ao seletor. As */ /* LEITURA: declarações abaixo definem sua aparência. */ .pwa-force-desc { /* LEITURA: font-size: tamanho das letras; rem é relativo à fonte raiz, px é pixel CSS. Valor nesta regra: */ /* LEITURA: 0.88rem. */ font-size: 0.88rem; /* LEITURA: color: cor do texto e referência de currentColor para ícones. Valor nesta regra: var(--text- */ /* LEITURA: secondary). */ color: var(--text-secondary); /* LEITURA: line-height: altura das linhas de texto; valor sem unidade multiplica o tamanho da fonte. Valor nesta */ /* LEITURA: regra: 1.5. */ line-height: 1.5; /* LEITURA: margin-bottom: espaço externo abaixo do elemento. Valor nesta regra: 1.5rem. */ margin-bottom: 1.5rem; } /* LEITURA: Seleciona .pwa-steps-container: os elementos cujas tags/classes/atributos correspondem ao seletor. As */ /* LEITURA: declarações abaixo definem sua aparência. */ .pwa-steps-container { /* LEITURA: width: largura; % depende do bloco de referência, vw da largura da tela e px usa pixels CSS. Valor */ /* LEITURA: nesta regra: 100%. */ width: 100%; /* LEITURA: display: modelo de layout: none esconde o elemento; flex organiza em eixo; grid organiza em grade; */ /* LEITURA: block ocupa bloco. Valor nesta regra: flex. */ display: flex; /* LEITURA: flex-direction: direção do eixo principal do flexbox; column empilha verticalmente e row organiza */ /* LEITURA: horizontalmente. Valor nesta regra: column. */ flex-direction: column; /* LEITURA: gap: espaçamento entre itens de flex/grid, sem exigir margem em cada filho. Valor nesta regra: */ /* LEITURA: 0.75rem. */ gap: 0.75rem; /* LEITURA: text-align: alinhamento horizontal do texto dentro da caixa. Valor nesta regra: left. */ text-align: left; /* LEITURA: margin-bottom: espaço externo abaixo do elemento. Valor nesta regra: 1.5rem. */ margin-bottom: 1.5rem; } /* LEITURA: Seleciona .pwa-step-item: os elementos cujas tags/classes/atributos correspondem ao seletor. As */ /* LEITURA: declarações abaixo definem sua aparência. */ .pwa-step-item { /* LEITURA: display: modelo de layout: none esconde o elemento; flex organiza em eixo; grid organiza em grade; */ /* LEITURA: block ocupa bloco. Valor nesta regra: flex. */ display: flex; /* LEITURA: align-items: alinhamento dos itens no eixo transversal do flexbox ou dentro das áreas de grid. Valor */ /* LEITURA: nesta regra: center. */ align-items: center; /* LEITURA: gap: espaçamento entre itens de flex/grid, sem exigir margem em cada filho. Valor nesta regra: */ /* LEITURA: 0.85rem. */ gap: 0.85rem; /* LEITURA: background: atalho que configura o fundo; pode receber cor, imagem ou gradiente. Valor nesta regra: */ /* LEITURA: var(--bg-card-subtle). */ background: var(--bg-card-subtle); /* LEITURA: border: atalho para espessura, estilo e cor da borda. Valor nesta regra: 1px solid var(--border- */ /* LEITURA: subtle). */ border: 1px solid var(--border-subtle); /* LEITURA: border-radius: arredondamento dos cantos; 50% pode gerar círculo em uma caixa quadrada. Valor nesta */ /* LEITURA: regra: var(--radius-md). */ border-radius: var(--radius-md); /* LEITURA: padding: espaço interno entre conteúdo e borda, com a mesma ordem topo/direita/baixo/esquerda quando */ /* LEITURA: há quatro valores. Valor nesta regra: 0.85rem 1rem. */ padding: 0.85rem 1rem; } /* LEITURA: Seleciona .pwa-step-num: os elementos cujas tags/classes/atributos correspondem ao seletor. As */ /* LEITURA: declarações abaixo definem sua aparência. */ .pwa-step-num { /* LEITURA: width: largura; % depende do bloco de referência, vw da largura da tela e px usa pixels CSS. Valor */ /* LEITURA: nesta regra: 32px. */ width: 32px; /* LEITURA: height: altura; % depende da altura do bloco de referência, vh da tela e px usa pixels CSS. Valor */ /* LEITURA: nesta regra: 32px. */ height: 32px; /* LEITURA: border-radius: arredondamento dos cantos; 50% pode gerar círculo em uma caixa quadrada. Valor nesta */ /* LEITURA: regra: 50%. */ border-radius: 50%; /* LEITURA: background: atalho que configura o fundo; pode receber cor, imagem ou gradiente. Valor nesta regra: */ /* LEITURA: rgba(165, 180, 252, 0.2). */ background: rgba(165, 180, 252, 0.2); /* LEITURA: color: cor do texto e referência de currentColor para ícones. Valor nesta regra: var(--accent-focus). */ color: var(--accent-focus); /* LEITURA: font-weight: peso visual das letras; valores maiores normalmente pedem traços mais grossos. Valor */ /* LEITURA: nesta regra: 800. */ font-weight: 800; /* LEITURA: font-size: tamanho das letras; rem é relativo à fonte raiz, px é pixel CSS. Valor nesta regra: 0.9rem. */ font-size: 0.9rem; /* LEITURA: display: modelo de layout: none esconde o elemento; flex organiza em eixo; grid organiza em grade; */ /* LEITURA: block ocupa bloco. Valor nesta regra: flex. */ display: flex; /* LEITURA: align-items: alinhamento dos itens no eixo transversal do flexbox ou dentro das áreas de grid. Valor */ /* LEITURA: nesta regra: center. */ align-items: center; /* LEITURA: justify-content: distribuição dos itens no eixo principal do flexbox ou alinhamento correspondente no */ /* LEITURA: grid. Valor nesta regra: center. */ justify-content: center; /* LEITURA: flex-shrink: quanto o item pode encolher quando falta espaço no contêiner flex. Valor nesta regra: 0. */ flex-shrink: 0; /* LEITURA: border: atalho para espessura, estilo e cor da borda. Valor nesta regra: 1px solid var(--accent- */ /* LEITURA: focus). */ border: 1px solid var(--accent-focus); } /* LEITURA: Seleciona .pwa-step-text: os elementos cujas tags/classes/atributos correspondem ao seletor. As */ /* LEITURA: declarações abaixo definem sua aparência. */ .pwa-step-text { /* LEITURA: font-size: tamanho das letras; rem é relativo à fonte raiz, px é pixel CSS. Valor nesta regra: */ /* LEITURA: 0.85rem. */ font-size: 0.85rem; /* LEITURA: color: cor do texto e referência de currentColor para ícones. Valor nesta regra: var(--text-main). */ color: var(--text-main); /* LEITURA: line-height: altura das linhas de texto; valor sem unidade multiplica o tamanho da fonte. Valor nesta */ /* LEITURA: regra: 1.35. */ line-height: 1.35; } /* LEITURA: Seleciona .pwa-step-text b: os elementos cujas tags/classes/atributos correspondem ao seletor. As */ /* LEITURA: declarações abaixo definem sua aparência. */ .pwa-step-text b { /* LEITURA: color: cor do texto e referência de currentColor para ícones. Valor nesta regra: #fff. */ color: #fff; } /* LEITURA: Seleciona .pwa-step-text .highlight: os elementos cujas tags/classes/atributos correspondem ao seletor. */ /* LEITURA: As declarações abaixo definem sua aparência. */ .pwa-step-text .highlight { /* LEITURA: color: cor do texto e referência de currentColor para ícones. Valor nesta regra: var(--accent-focus). */ color: var(--accent-focus); /* LEITURA: font-weight: peso visual das letras; valores maiores normalmente pedem traços mais grossos. Valor */ /* LEITURA: nesta regra: 700. */ font-weight: 700; } /* LEITURA: Seleciona .btn-pwa-install-action: os elementos cujas tags/classes/atributos correspondem ao seletor. As */ /* LEITURA: declarações abaixo definem sua aparência. */ .btn-pwa-install-action { /* LEITURA: width: largura; % depende do bloco de referência, vw da largura da tela e px usa pixels CSS. Valor */ /* LEITURA: nesta regra: 100%. */ width: 100%; /* LEITURA: background: atalho que configura o fundo; pode receber cor, imagem ou gradiente. Valor nesta regra: */ /* LEITURA: linear-gradient(135deg, var(--accent-focus) 0%, #818cf8 100%). */ background: linear-gradient(135deg, var(--accent-focus) 0%, #818cf8 100%); /* LEITURA: color: cor do texto e referência de currentColor para ícones. Valor nesta regra: #0d131f. */ color: #0d131f; /* LEITURA: border: atalho para espessura, estilo e cor da borda. Valor nesta regra: none. */ border: none; /* LEITURA: border-radius: arredondamento dos cantos; 50% pode gerar círculo em uma caixa quadrada. Valor nesta */ /* LEITURA: regra: var(--radius-sm). */ border-radius: var(--radius-sm); /* LEITURA: padding: espaço interno entre conteúdo e borda, com a mesma ordem topo/direita/baixo/esquerda quando */ /* LEITURA: há quatro valores. Valor nesta regra: 1.05rem. */ padding: 1.05rem; /* LEITURA: font-family: lista de fontes em ordem de preferência; o navegador usa a próxima se a anterior não */ /* LEITURA: estiver disponível. Valor nesta regra: var(--font-sans). */ font-family: var(--font-sans); /* LEITURA: font-size: tamanho das letras; rem é relativo à fonte raiz, px é pixel CSS. Valor nesta regra: */ /* LEITURA: 1.05rem. */ font-size: 1.05rem; /* LEITURA: font-weight: peso visual das letras; valores maiores normalmente pedem traços mais grossos. Valor */ /* LEITURA: nesta regra: 800. */ font-weight: 800; /* LEITURA: cursor: cursor sugerido ao passar o mouse; pointer sinaliza ação e wait indica espera. Valor nesta */ /* LEITURA: regra: pointer. */ cursor: pointer; /* LEITURA: box-shadow: sombra: deslocamentos horizontal/vertical, desfoque, espalhamento opcional e cor; não */ /* LEITURA: aumenta a caixa de layout. Valor nesta regra: 0 8px 25px var(--accent-focus-glow). */ box-shadow: 0 8px 25px var(--accent-focus-glow); /* LEITURA: display: modelo de layout: none esconde o elemento; flex organiza em eixo; grid organiza em grade; */ /* LEITURA: block ocupa bloco. Valor nesta regra: flex. */ display: flex; /* LEITURA: align-items: alinhamento dos itens no eixo transversal do flexbox ou dentro das áreas de grid. Valor */ /* LEITURA: nesta regra: center. */ align-items: center; /* LEITURA: justify-content: distribuição dos itens no eixo principal do flexbox ou alinhamento correspondente no */ /* LEITURA: grid. Valor nesta regra: center. */ justify-content: center; /* LEITURA: gap: espaçamento entre itens de flex/grid, sem exigir margem em cada filho. Valor nesta regra: 0.5rem. */ gap: 0.5rem; /* LEITURA: transition: transição suave quando uma propriedade muda, inclusive por classe adicionada pelo */ /* LEITURA: JavaScript. Valor nesta regra: transform var(--transition-fast). */ transition: transform var(--transition-fast); } /* LEITURA: Seleciona .btn-pwa-install-action:hover: os elementos cujas tags/classes/atributos correspondem ao */ /* LEITURA: seletor. vale quando o ponteiro está sobre o elemento. */ .btn-pwa-install-action:hover { /* LEITURA: transform: transformação visual como deslocar, girar ou escalar; não reorganiza automaticamente os */ /* LEITURA: vizinhos no fluxo. Valor nesta regra: translateY(-2px). */ transform: translateY(-2px); } /* LEITURA: Seleciona .btn-pwa-install-action:active: os elementos cujas tags/classes/atributos correspondem ao */ /* LEITURA: seletor. vale durante a ativação, como pressionar o botão. */ .btn-pwa-install-action:active { /* LEITURA: transform: transformação visual como deslocar, girar ou escalar; não reorganiza automaticamente os */ /* LEITURA: vizinhos no fluxo. Valor nesta regra: scale(0.98). */ transform: scale(0.98); } /* LEITURA: Seleciona .ios-arrow-pointer: os elementos cujas tags/classes/atributos correspondem ao seletor. As */ /* LEITURA: declarações abaixo definem sua aparência. */ .ios-arrow-pointer { /* LEITURA: display: modelo de layout: none esconde o elemento; flex organiza em eixo; grid organiza em grade; */ /* LEITURA: block ocupa bloco. Valor nesta regra: none. */ display: none; /* LEITURA: flex-direction: direção do eixo principal do flexbox; column empilha verticalmente e row organiza */ /* LEITURA: horizontalmente. Valor nesta regra: column. */ flex-direction: column; /* LEITURA: align-items: alinhamento dos itens no eixo transversal do flexbox ou dentro das áreas de grid. Valor */ /* LEITURA: nesta regra: center. */ align-items: center; /* LEITURA: margin-top: espaço externo acima do elemento. Valor nesta regra: 1.25rem. */ margin-top: 1.25rem; /* LEITURA: animation: animação nomeada em @keyframes, com duração, curva, repetição e demais opções indicadas. */ /* LEITURA: Valor nesta regra: bounceArrow 1.4s infinite. */ animation: bounceArrow 1.4s infinite; } /* LEITURA: Seleciona .ios-arrow-pointer.active: os elementos cujas tags/classes/atributos correspondem ao seletor. */ /* LEITURA: a classe active é um estado atribuído pelo JavaScript, diferente da pseudoclasse :active. */ .ios-arrow-pointer.active { /* LEITURA: display: modelo de layout: none esconde o elemento; flex organiza em eixo; grid organiza em grade; */ /* LEITURA: block ocupa bloco. Valor nesta regra: flex. */ display: flex; } /* LEITURA: Seleciona .ios-arrow-pointer span: os elementos cujas tags/classes/atributos correspondem ao seletor. As */ /* LEITURA: declarações abaixo definem sua aparência. */ .ios-arrow-pointer span { /* LEITURA: font-size: tamanho das letras; rem é relativo à fonte raiz, px é pixel CSS. Valor nesta regra: */ /* LEITURA: 0.78rem. */ font-size: 0.78rem; /* LEITURA: color: cor do texto e referência de currentColor para ícones. Valor nesta regra: var(--accent-focus). */ color: var(--accent-focus); /* LEITURA: font-weight: peso visual das letras; valores maiores normalmente pedem traços mais grossos. Valor */ /* LEITURA: nesta regra: 700. */ font-weight: 700; } /* LEITURA: Seleciona .ios-arrow-pointer svg: os elementos cujas tags/classes/atributos correspondem ao seletor. As */ /* LEITURA: declarações abaixo definem sua aparência. */ .ios-arrow-pointer svg { /* LEITURA: stroke: cor do traço dos desenhos SVG. Valor nesta regra: var(--accent-focus). */ stroke: var(--accent-focus); /* LEITURA: margin-top: espaço externo acima do elemento. Valor nesta regra: 0.25rem. */ margin-top: 0.25rem; } /* LEITURA: Define os quadros da animação bounceArrow. Elementos a usam ao declarar animation com esse nome. */ @keyframes bounceArrow { /* LEITURA: Define o aspecto no quadro 0%, 100% da animação (from=0%, to=100%). transform: transformação visual */ /* LEITURA: como deslocar, girar ou escalar; não reorganiza automaticamente os vizinhos no fluxo; valor */ /* LEITURA: translateY(0). */ 0%, 100% { transform: translateY(0); } /* LEITURA: Define o aspecto no quadro 50% da animação (from=0%, to=100%). transform: transformação visual como */ /* LEITURA: deslocar, girar ou escalar; não reorganiza automaticamente os vizinhos no fluxo; valor */ /* LEITURA: translateY(8px). */ 50% { transform: translateY(8px); } } /* LEITURA: Seleciona .pwa-desktop-fallback: os elementos cujas tags/classes/atributos correspondem ao seletor. As */ /* LEITURA: declarações abaixo definem sua aparência. */ .pwa-desktop-fallback { /* LEITURA: margin-top: espaço externo acima do elemento. Valor nesta regra: 1.25rem. */ margin-top: 1.25rem; /* LEITURA: font-size: tamanho das letras; rem é relativo à fonte raiz, px é pixel CSS. Valor nesta regra: */ /* LEITURA: 0.78rem. */ font-size: 0.78rem; /* LEITURA: color: cor do texto e referência de currentColor para ícones. Valor nesta regra: var(--text-muted). */ color: var(--text-muted); } /* LEITURA: Seleciona .pwa-desktop-fallback button: os elementos cujas tags/classes/atributos correspondem ao */ /* LEITURA: seletor. As declarações abaixo definem sua aparência. */ .pwa-desktop-fallback button { /* LEITURA: background: atalho que configura o fundo; pode receber cor, imagem ou gradiente. Valor nesta regra: */ /* LEITURA: transparent. */ background: transparent; /* LEITURA: border: atalho para espessura, estilo e cor da borda. Valor nesta regra: none. */ border: none; /* LEITURA: color: cor do texto e referência de currentColor para ícones. Valor nesta regra: var(--text- */ /* LEITURA: secondary). */ color: var(--text-secondary); /* LEITURA: text-decoration: sublinhado e outros traços de decoração do texto. Valor nesta regra: underline. */ text-decoration: underline; /* LEITURA: cursor: cursor sugerido ao passar o mouse; pointer sinaliza ação e wait indica espera. Valor nesta */ /* LEITURA: regra: pointer. */ cursor: pointer; /* LEITURA: font-size: tamanho das letras; rem é relativo à fonte raiz, px é pixel CSS. Valor nesta regra: */ /* LEITURA: 0.78rem. */ font-size: 0.78rem; /* LEITURA: font-family: lista de fontes em ordem de preferência; o navegador usa a próxima se a anterior não */ /* LEITURA: estiver disponível. Valor nesta regra: inherit. */ font-family: inherit; } /* LEITURA: Seleciona .auth-input-group: os elementos cujas tags/classes/atributos correspondem ao seletor. As */ /* LEITURA: declarações abaixo definem sua aparência. */ .auth-input-group { /* LEITURA: display: modelo de layout: none esconde o elemento; flex organiza em eixo; grid organiza em grade; */ /* LEITURA: block ocupa bloco. Valor nesta regra: flex. */ display: flex; /* LEITURA: flex-direction: direção do eixo principal do flexbox; column empilha verticalmente e row organiza */ /* LEITURA: horizontalmente. Valor nesta regra: column. */ flex-direction: column; /* LEITURA: gap: espaçamento entre itens de flex/grid, sem exigir margem em cada filho. Valor nesta regra: */ /* LEITURA: 0.75rem. */ gap: 0.75rem; /* LEITURA: margin-bottom: espaço externo abaixo do elemento. Valor nesta regra: 1.25rem. */ margin-bottom: 1.25rem; /* LEITURA: text-align: alinhamento horizontal do texto dentro da caixa. Valor nesta regra: left. */ text-align: left; } /* LEITURA: display: modelo de layout: none esconde o elemento; flex organiza em eixo; grid organiza em grade; block */ /* LEITURA: ocupa bloco. Valor nesta regra: none. Regra de .auth-input-group[hidden]. */ .auth-input-group[hidden] { display: none; } /* LEITURA: background: atalho que configura o fundo; pode receber cor, imagem ou gradiente. Valor nesta regra: */ /* LEITURA: none; border: atalho para espessura, estilo e cor da borda. Valor nesta regra: 0; color: cor do texto e */ /* LEITURA: referência de currentColor para ícones. Valor nesta regra: #a5b4fc; text-decoration: sublinhado e outros */ /* LEITURA: traços de decoração do texto. Valor nesta regra: underline; cursor: cursor sugerido ao passar o mouse; */ /* LEITURA: pointer sinaliza ação e wait indica espera. Valor nesta regra: pointer; margin: espaço externo: 1 valor */ /* LEITURA: vale para todos os lados; 2 = vertical/horizontal; 4 = topo/direita/baixo/esquerda; auto pode */ /* LEITURA: centralizar. Valor nesta regra: 14px auto; display: modelo de layout: none esconde o elemento; flex */ /* LEITURA: organiza em eixo; grid organiza em grade; block ocupa bloco. Valor nesta regra: block; font: atalho para */ /* LEITURA: propriedades de fonte; inherit copia a fonte do elemento pai. Valor nesta regra: inherit. Regra de */ /* LEITURA: .auth-switch. */ .auth-switch { background: none; border: 0; color: #a5b4fc; text-decoration: underline; cursor: pointer; margin: 14px auto; display: block; font: inherit; } /* LEITURA: color: cor do texto e referência de currentColor para ícones. Valor nesta regra: #fca5a5; min-height: */ /* LEITURA: altura mínima; 100vh corresponde à altura da área de visualização usada pelo navegador. Valor nesta */ /* LEITURA: regra: 1.2em. Regra de #dev-auth-message. */ #dev-auth-message { color: #fca5a5; min-height: 1.2em; } /* LEITURA: Seleciona .auth-label: os elementos cujas tags/classes/atributos correspondem ao seletor. As declarações */ /* LEITURA: abaixo definem sua aparência. */ .auth-label { /* LEITURA: font-size: tamanho das letras; rem é relativo à fonte raiz, px é pixel CSS. Valor nesta regra: */ /* LEITURA: 0.75rem. */ font-size: 0.75rem; /* LEITURA: font-weight: peso visual das letras; valores maiores normalmente pedem traços mais grossos. Valor */ /* LEITURA: nesta regra: 700. */ font-weight: 700; /* LEITURA: color: cor do texto e referência de currentColor para ícones. Valor nesta regra: var(--text- */ /* LEITURA: secondary). */ color: var(--text-secondary); /* LEITURA: text-transform: transformação visual de maiúsculas/minúsculas; não altera o texto armazenado. Valor */ /* LEITURA: nesta regra: uppercase. */ text-transform: uppercase; /* LEITURA: letter-spacing: distância adicional entre caracteres. Valor nesta regra: 0.05em. */ letter-spacing: 0.05em; } /* LEITURA: Seleciona .auth-input: os elementos cujas tags/classes/atributos correspondem ao seletor. As declarações */ /* LEITURA: abaixo definem sua aparência. */ .auth-input { /* LEITURA: width: largura; % depende do bloco de referência, vw da largura da tela e px usa pixels CSS. Valor */ /* LEITURA: nesta regra: 100%. */ width: 100%; /* LEITURA: background: atalho que configura o fundo; pode receber cor, imagem ou gradiente. Valor nesta regra: */ /* LEITURA: var(--bg-card-subtle). */ background: var(--bg-card-subtle); /* LEITURA: border: atalho para espessura, estilo e cor da borda. Valor nesta regra: 1.5px solid var(--border- */ /* LEITURA: subtle). */ border: 1.5px solid var(--border-subtle); /* LEITURA: border-radius: arredondamento dos cantos; 50% pode gerar círculo em uma caixa quadrada. Valor nesta */ /* LEITURA: regra: var(--radius-sm). */ border-radius: var(--radius-sm); /* LEITURA: padding: espaço interno entre conteúdo e borda, com a mesma ordem topo/direita/baixo/esquerda quando */ /* LEITURA: há quatro valores. Valor nesta regra: 0.85rem 1rem. */ padding: 0.85rem 1rem; /* LEITURA: font-family: lista de fontes em ordem de preferência; o navegador usa a próxima se a anterior não */ /* LEITURA: estiver disponível. Valor nesta regra: var(--font-sans). */ font-family: var(--font-sans); /* LEITURA: font-size: tamanho das letras; rem é relativo à fonte raiz, px é pixel CSS. Valor nesta regra: */ /* LEITURA: 0.95rem. */ font-size: 0.95rem; /* LEITURA: color: cor do texto e referência de currentColor para ícones. Valor nesta regra: #fff. */ color: #fff; /* LEITURA: outline: contorno extra que não ocupa espaço; none o remove, então é necessário outro destaque de foco */ /* LEITURA: acessível. Valor nesta regra: none. */ outline: none; /* LEITURA: transition: transição suave quando uma propriedade muda, inclusive por classe adicionada pelo */ /* LEITURA: JavaScript. Valor nesta regra: border-color var(--transition-fast). */ transition: border-color var(--transition-fast); } /* LEITURA: Seleciona .auth-input:focus: os elementos cujas tags/classes/atributos correspondem ao seletor. vale */ /* LEITURA: quando o elemento recebe foco de teclado/clique. */ .auth-input:focus { /* LEITURA: border-color: cor das bordas sem alterar sua espessura. Valor nesta regra: var(--accent-focus). */ border-color: var(--accent-focus); } /* LEITURA: Seleciona .btn-unlock-app: os elementos cujas tags/classes/atributos correspondem ao seletor. As */ /* LEITURA: declarações abaixo definem sua aparência. */ .btn-unlock-app { /* LEITURA: width: largura; % depende do bloco de referência, vw da largura da tela e px usa pixels CSS. Valor */ /* LEITURA: nesta regra: 100%. */ width: 100%; /* LEITURA: background: atalho que configura o fundo; pode receber cor, imagem ou gradiente. Valor nesta regra: */ /* LEITURA: linear-gradient(135deg, var(--accent-focus) 0%, #818cf8 100%). */ background: linear-gradient(135deg, var(--accent-focus) 0%, #818cf8 100%); /* LEITURA: color: cor do texto e referência de currentColor para ícones. Valor nesta regra: #0d131f. */ color: #0d131f; /* LEITURA: border: atalho para espessura, estilo e cor da borda. Valor nesta regra: none. */ border: none; /* LEITURA: border-radius: arredondamento dos cantos; 50% pode gerar círculo em uma caixa quadrada. Valor nesta */ /* LEITURA: regra: var(--radius-sm). */ border-radius: var(--radius-sm); /* LEITURA: padding: espaço interno entre conteúdo e borda, com a mesma ordem topo/direita/baixo/esquerda quando */ /* LEITURA: há quatro valores. Valor nesta regra: 0.95rem. */ padding: 0.95rem; /* LEITURA: font-family: lista de fontes em ordem de preferência; o navegador usa a próxima se a anterior não */ /* LEITURA: estiver disponível. Valor nesta regra: var(--font-sans). */ font-family: var(--font-sans); /* LEITURA: font-size: tamanho das letras; rem é relativo à fonte raiz, px é pixel CSS. Valor nesta regra: 1rem. */ font-size: 1rem; /* LEITURA: font-weight: peso visual das letras; valores maiores normalmente pedem traços mais grossos. Valor */ /* LEITURA: nesta regra: 800. */ font-weight: 800; /* LEITURA: cursor: cursor sugerido ao passar o mouse; pointer sinaliza ação e wait indica espera. Valor nesta */ /* LEITURA: regra: pointer. */ cursor: pointer; /* LEITURA: box-shadow: sombra: deslocamentos horizontal/vertical, desfoque, espalhamento opcional e cor; não */ /* LEITURA: aumenta a caixa de layout. Valor nesta regra: 0 4px 18px var(--accent-focus-glow). */ box-shadow: 0 4px 18px var(--accent-focus-glow); /* LEITURA: transition: transição suave quando uma propriedade muda, inclusive por classe adicionada pelo */ /* LEITURA: JavaScript. Valor nesta regra: transform var(--transition-fast). */ transition: transform var(--transition-fast); } /* LEITURA: Seleciona .btn-unlock-app:hover: os elementos cujas tags/classes/atributos correspondem ao seletor. vale */ /* LEITURA: quando o ponteiro está sobre o elemento. */ .btn-unlock-app:hover { /* LEITURA: transform: transformação visual como deslocar, girar ou escalar; não reorganiza automaticamente os */ /* LEITURA: vizinhos no fluxo. Valor nesta regra: translateY(-2px). */ transform: translateY(-2px); } /* LEITURA: Seleciona .auth-footer-help: os elementos cujas tags/classes/atributos correspondem ao seletor. As */ /* LEITURA: declarações abaixo definem sua aparência. */ .auth-footer-help { /* LEITURA: margin-top: espaço externo acima do elemento. Valor nesta regra: 1.2rem. */ margin-top: 1.2rem; /* LEITURA: font-size: tamanho das letras; rem é relativo à fonte raiz, px é pixel CSS. Valor nesta regra: */ /* LEITURA: 0.78rem. */ font-size: 0.78rem; /* LEITURA: color: cor do texto e referência de currentColor para ícones. Valor nesta regra: var(--text-muted). */ color: var(--text-muted); } /* LEITURA: Seleciona .auth-footer-help a: os elementos cujas tags/classes/atributos correspondem ao seletor. As */ /* LEITURA: declarações abaixo definem sua aparência. */ .auth-footer-help a { /* LEITURA: color: cor do texto e referência de currentColor para ícones. Valor nesta regra: var(--accent-focus). */ color: var(--accent-focus); /* LEITURA: text-decoration: sublinhado e outros traços de decoração do texto. Valor nesta regra: none. */ text-decoration: none; /* LEITURA: font-weight: peso visual das letras; valores maiores normalmente pedem traços mais grossos. Valor */ /* LEITURA: nesta regra: 700. */ font-weight: 700; } /* ========================================================================== TOPBAR & MASCOTE OIIO 3D ========================================================================== */ /* LEITURA: Seleciona .app-topbar: os elementos cujas tags/classes/atributos correspondem ao seletor. As declarações */ /* LEITURA: abaixo definem sua aparência. */ .app-topbar { /* LEITURA: display: modelo de layout: none esconde o elemento; flex organiza em eixo; grid organiza em grade; */ /* LEITURA: block ocupa bloco. Valor nesta regra: flex. */ display: flex; /* LEITURA: align-items: alinhamento dos itens no eixo transversal do flexbox ou dentro das áreas de grid. Valor */ /* LEITURA: nesta regra: center. */ align-items: center; /* LEITURA: justify-content: distribuição dos itens no eixo principal do flexbox ou alinhamento correspondente no */ /* LEITURA: grid. Valor nesta regra: space-between. */ justify-content: space-between; /* LEITURA: padding: espaço interno entre conteúdo e borda, com a mesma ordem topo/direita/baixo/esquerda quando */ /* LEITURA: há quatro valores. Valor nesta regra: 0.5rem 0.25rem 1rem 0.25rem. */ padding: 0.5rem 0.25rem 1rem 0.25rem; } /* LEITURA: Seleciona .mascot-profile-row: os elementos cujas tags/classes/atributos correspondem ao seletor. As */ /* LEITURA: declarações abaixo definem sua aparência. */ .mascot-profile-row { /* LEITURA: display: modelo de layout: none esconde o elemento; flex organiza em eixo; grid organiza em grade; */ /* LEITURA: block ocupa bloco. Valor nesta regra: flex. */ display: flex; /* LEITURA: align-items: alinhamento dos itens no eixo transversal do flexbox ou dentro das áreas de grid. Valor */ /* LEITURA: nesta regra: center. */ align-items: center; /* LEITURA: gap: espaçamento entre itens de flex/grid, sem exigir margem em cada filho. Valor nesta regra: */ /* LEITURA: 0.75rem. */ gap: 0.75rem; /* LEITURA: cursor: cursor sugerido ao passar o mouse; pointer sinaliza ação e wait indica espera. Valor nesta */ /* LEITURA: regra: pointer. */ cursor: pointer; } /* Mascote 3D Imagem Renderizada & Expressões Vivas */ /* LEITURA: Seleciona .mascot-3d-avatar: os elementos cujas tags/classes/atributos correspondem ao seletor. As */ /* LEITURA: declarações abaixo definem sua aparência. */ .mascot-3d-avatar { /* LEITURA: width: largura; % depende do bloco de referência, vw da largura da tela e px usa pixels CSS. Valor */ /* LEITURA: nesta regra: 54px. */ width: 54px; /* LEITURA: height: altura; % depende da altura do bloco de referência, vh da tela e px usa pixels CSS. Valor */ /* LEITURA: nesta regra: 54px. */ height: 54px; /* LEITURA: border-radius: arredondamento dos cantos; 50% pode gerar círculo em uma caixa quadrada. Valor nesta */ /* LEITURA: regra: var(--radius-md). */ border-radius: var(--radius-md); /* LEITURA: border: atalho para espessura, estilo e cor da borda. Valor nesta regra: 2px solid rgba(165, 180, 252, */ /* LEITURA: 0.4). */ border: 2px solid rgba(165, 180, 252, 0.4); /* LEITURA: box-shadow: sombra: deslocamentos horizontal/vertical, desfoque, espalhamento opcional e cor; não */ /* LEITURA: aumenta a caixa de layout. Valor nesta regra: 0 4px 18px var(--accent-focus-glow). */ box-shadow: 0 4px 18px var(--accent-focus-glow); /* LEITURA: object-fit: como a imagem se ajusta à caixa; cover preenche e pode recortar as bordas. Valor nesta */ /* LEITURA: regra: cover. */ object-fit: cover; /* LEITURA: animation: animação nomeada em @keyframes, com duração, curva, repetição e demais opções indicadas. */ /* LEITURA: Valor nesta regra: floatMascot 4s ease-in-out infinite. */ animation: floatMascot 4s ease-in-out infinite; /* LEITURA: transition: transição suave quando uma propriedade muda, inclusive por classe adicionada pelo */ /* LEITURA: JavaScript. Valor nesta regra: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s */ /* LEITURA: ease. */ transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease; /* LEITURA: position: referência de posicionamento: relative mantém o espaço no fluxo; absolute sai do fluxo; */ /* LEITURA: fixed fica preso à janela. Valor nesta regra: relative. */ position: relative; /* LEITURA: cursor: cursor sugerido ao passar o mouse; pointer sinaliza ação e wait indica espera. Valor nesta */ /* LEITURA: regra: pointer. */ cursor: pointer; } /* LEITURA: Seleciona .mascot-3d-avatar:hover: os elementos cujas tags/classes/atributos correspondem ao seletor. */ /* LEITURA: vale quando o ponteiro está sobre o elemento. */ .mascot-3d-avatar:hover { /* LEITURA: transform: transformação visual como deslocar, girar ou escalar; não reorganiza automaticamente os */ /* LEITURA: vizinhos no fluxo. Valor nesta regra: scale(1.12) rotate(2deg). */ transform: scale(1.12) rotate(2deg); } /* LEITURA: Seleciona .mascot-3d-avatar:active: os elementos cujas tags/classes/atributos correspondem ao seletor. */ /* LEITURA: vale durante a ativação, como pressionar o botão. */ .mascot-3d-avatar:active { /* LEITURA: transform: transformação visual como deslocar, girar ou escalar; não reorganiza automaticamente os */ /* LEITURA: vizinhos no fluxo. Valor nesta regra: scale(0.95). */ transform: scale(0.95); } /* Quando o Oiio está falando */ /* LEITURA: Seleciona .mascot-3d-avatar.speaking: os elementos cujas tags/classes/atributos correspondem ao seletor. */ /* LEITURA: As declarações abaixo definem sua aparência. */ .mascot-3d-avatar.speaking, /* LEITURA: Seleciona .oiio-companion-avatar.speaking: os elementos cujas tags/classes/atributos correspondem ao */ /* LEITURA: seletor. As declarações abaixo definem sua aparência. */ .oiio-companion-avatar.speaking { /* LEITURA: animation: animação nomeada em @keyframes, com duração, curva, repetição e demais opções indicadas. */ /* LEITURA: Valor nesta regra: talkingRhythm 0.38s ease-in-out infinite alternate !important. */ animation: talkingRhythm 0.38s ease-in-out infinite alternate !important; /* LEITURA: border-color: cor das bordas sem alterar sua espessura. Valor nesta regra: var(--accent-focus). */ border-color: var(--accent-focus); /* LEITURA: box-shadow: sombra: deslocamentos horizontal/vertical, desfoque, espalhamento opcional e cor; não */ /* LEITURA: aumenta a caixa de layout. Valor nesta regra: 0 0 25px rgba(165, 180, 252, 0.75), 0 0 50px rgba(253, */ /* LEITURA: 224, 71, 0.35). */ box-shadow: 0 0 25px rgba(165, 180, 252, 0.75), 0 0 50px rgba(253, 224, 71, 0.35); } /* Quando o Oiio está comemorando uma vitória */ /* LEITURA: Seleciona .mascot-3d-avatar.cheering: os elementos cujas tags/classes/atributos correspondem ao seletor. */ /* LEITURA: As declarações abaixo definem sua aparência. */ .mascot-3d-avatar.cheering, /* LEITURA: Seleciona .oiio-companion-avatar.cheering: os elementos cujas tags/classes/atributos correspondem ao */ /* LEITURA: seletor. As declarações abaixo definem sua aparência. */ .oiio-companion-avatar.cheering { /* LEITURA: animation: animação nomeada em @keyframes, com duração, curva, repetição e demais opções indicadas. */ /* LEITURA: Valor nesta regra: cheerHop 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) !important. */ animation: cheerHop 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) !important; /* LEITURA: border-color: cor das bordas sem alterar sua espessura. Valor nesta regra: var(--accent-habits). */ border-color: var(--accent-habits); /* LEITURA: box-shadow: sombra: deslocamentos horizontal/vertical, desfoque, espalhamento opcional e cor; não */ /* LEITURA: aumenta a caixa de layout. Valor nesta regra: 0 0 30px var(--accent-habits-glow). */ box-shadow: 0 0 30px var(--accent-habits-glow); } /* Curiosidade / Inclinação */ /* LEITURA: Seleciona .mascot-3d-avatar.curious: os elementos cujas tags/classes/atributos correspondem ao seletor. */ /* LEITURA: As declarações abaixo definem sua aparência. */ .mascot-3d-avatar.curious, /* LEITURA: Seleciona .oiio-companion-avatar.curious: os elementos cujas tags/classes/atributos correspondem ao */ /* LEITURA: seletor. As declarações abaixo definem sua aparência. */ .oiio-companion-avatar.curious { /* LEITURA: transform: transformação visual como deslocar, girar ou escalar; não reorganiza automaticamente os */ /* LEITURA: vizinhos no fluxo. Valor nesta regra: rotate(-7deg) scale(1.08). */ transform: rotate(-7deg) scale(1.08); } /* LEITURA: Define os quadros da animação floatMascot. Elementos a usam ao declarar animation com esse nome. */ @keyframes floatMascot { /* LEITURA: Define o aspecto no quadro 0%, 100% da animação (from=0%, to=100%). transform: transformação visual */ /* LEITURA: como deslocar, girar ou escalar; não reorganiza automaticamente os vizinhos no fluxo; valor */ /* LEITURA: translateY(0) rotate(0deg). */ 0%, 100% { transform: translateY(0) rotate(0deg); } /* LEITURA: Define o aspecto no quadro 35% da animação (from=0%, to=100%). transform: transformação visual como */ /* LEITURA: deslocar, girar ou escalar; não reorganiza automaticamente os vizinhos no fluxo; valor */ /* LEITURA: translateY(-5px) rotate(1.5deg). */ 35% { transform: translateY(-5px) rotate(1.5deg); } /* LEITURA: Define o aspecto no quadro 70% da animação (from=0%, to=100%). transform: transformação visual como */ /* LEITURA: deslocar, girar ou escalar; não reorganiza automaticamente os vizinhos no fluxo; valor */ /* LEITURA: translateY(-2px) rotate(-1.5deg). */ 70% { transform: translateY(-2px) rotate(-1.5deg); } } /* LEITURA: Define os quadros da animação talkingRhythm. Elementos a usam ao declarar animation com esse nome. */ @keyframes talkingRhythm { /* LEITURA: Define o aspecto no quadro 0% da animação (from=0%, to=100%). transform: transformação visual como */ /* LEITURA: deslocar, girar ou escalar; não reorganiza automaticamente os vizinhos no fluxo; valor translateY(0) */ /* LEITURA: scale(1) rotate(-1deg). */ 0% { transform: translateY(0) scale(1) rotate(-1deg); } /* LEITURA: Define o aspecto no quadro 50% da animação (from=0%, to=100%). transform: transformação visual como */ /* LEITURA: deslocar, girar ou escalar; não reorganiza automaticamente os vizinhos no fluxo; valor */ /* LEITURA: translateY(-3px) scale(1.05) rotate(1.5deg). */ 50% { transform: translateY(-3px) scale(1.05) rotate(1.5deg); } /* LEITURA: Define o aspecto no quadro 100% da animação (from=0%, to=100%). transform: transformação visual como */ /* LEITURA: deslocar, girar ou escalar; não reorganiza automaticamente os vizinhos no fluxo; valor */ /* LEITURA: translateY(-1px) scale(1.02) rotate(-0.5deg). */ 100% { transform: translateY(-1px) scale(1.02) rotate(-0.5deg); } } /* LEITURA: Define os quadros da animação cheerHop. Elementos a usam ao declarar animation com esse nome. */ @keyframes cheerHop { /* LEITURA: Define o aspecto no quadro 0% da animação (from=0%, to=100%). transform: transformação visual como */ /* LEITURA: deslocar, girar ou escalar; não reorganiza automaticamente os vizinhos no fluxo; valor scale(1) */ /* LEITURA: translateY(0). */ 0% { transform: scale(1) translateY(0); } /* LEITURA: Define o aspecto no quadro 30% da animação (from=0%, to=100%). transform: transformação visual como */ /* LEITURA: deslocar, girar ou escalar; não reorganiza automaticamente os vizinhos no fluxo; valor scale(0.9) */ /* LEITURA: translateY(4px). */ 30% { transform: scale(0.9) translateY(4px); } /* LEITURA: Define o aspecto no quadro 55% da animação (from=0%, to=100%). transform: transformação visual como */ /* LEITURA: deslocar, girar ou escalar; não reorganiza automaticamente os vizinhos no fluxo; valor scale(1.22) */ /* LEITURA: translateY(-14px) rotate(5deg). */ 55% { transform: scale(1.22) translateY(-14px) rotate(5deg); } /* LEITURA: Define o aspecto no quadro 75% da animação (from=0%, to=100%). transform: transformação visual como */ /* LEITURA: deslocar, girar ou escalar; não reorganiza automaticamente os vizinhos no fluxo; valor scale(1.05) */ /* LEITURA: translateY(-4px) rotate(-3deg). */ 75% { transform: scale(1.05) translateY(-4px) rotate(-3deg); } /* LEITURA: Define o aspecto no quadro 100% da animação (from=0%, to=100%). transform: transformação visual como */ /* LEITURA: deslocar, girar ou escalar; não reorganiza automaticamente os vizinhos no fluxo; valor scale(1) */ /* LEITURA: translateY(0) rotate(0deg). */ 100% { transform: scale(1) translateY(0) rotate(0deg); } } /* ========================================================================== COMPANION FLUTUANTE VIVO DO OIIO (PET VIRTUAL PELA TELA) ========================================================================== */ /* LEITURA: Seleciona .oiio-floating-companion: os elementos cujas tags/classes/atributos correspondem ao seletor. */ /* LEITURA: As declarações abaixo definem sua aparência. */ .oiio-floating-companion { /* LEITURA: position: referência de posicionamento: relative mantém o espaço no fluxo; absolute sai do fluxo; */ /* LEITURA: fixed fica preso à janela. Valor nesta regra: fixed. */ position: fixed; /* LEITURA: bottom: deslocamento da borda inferior quando o elemento é posicionado. Valor nesta regra: 86px. */ bottom: 86px; /* LEITURA: right: deslocamento da borda direita quando o elemento é posicionado. Valor nesta regra: 18px. */ right: 18px; /* LEITURA: z-index: ordem de sobreposição dentro do contexto de empilhamento; não é prioridade global absoluta */ /* LEITURA: entre todos os elementos. Valor nesta regra: 950. */ z-index: 950; /* LEITURA: display: modelo de layout: none esconde o elemento; flex organiza em eixo; grid organiza em grade; */ /* LEITURA: block ocupa bloco. Valor nesta regra: flex. */ display: flex; /* LEITURA: flex-direction: direção do eixo principal do flexbox; column empilha verticalmente e row organiza */ /* LEITURA: horizontalmente. Valor nesta regra: column. */ flex-direction: column; /* LEITURA: align-items: alinhamento dos itens no eixo transversal do flexbox ou dentro das áreas de grid. Valor */ /* LEITURA: nesta regra: flex-end. */ align-items: flex-end; /* LEITURA: pointer-events: define se o elemento participa de cliques/toques; none deixa eventos passarem para o */ /* LEITURA: que estiver atrás. Valor nesta regra: none. */ pointer-events: none; /* LEITURA: transition: transição suave quando uma propriedade muda, inclusive por classe adicionada pelo */ /* LEITURA: JavaScript. Valor nesta regra: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1). */ transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } /* LEITURA: Seleciona .oiio-companion-trigger: os elementos cujas tags/classes/atributos correspondem ao seletor. As */ /* LEITURA: declarações abaixo definem sua aparência. */ .oiio-companion-trigger { /* LEITURA: pointer-events: define se o elemento participa de cliques/toques; none deixa eventos passarem para o */ /* LEITURA: que estiver atrás. Valor nesta regra: auto. */ pointer-events: auto; /* LEITURA: background: atalho que configura o fundo; pode receber cor, imagem ou gradiente. Valor nesta regra: */ /* LEITURA: transparent. */ background: transparent; /* LEITURA: border: atalho para espessura, estilo e cor da borda. Valor nesta regra: none. */ border: none; /* LEITURA: cursor: cursor sugerido ao passar o mouse; pointer sinaliza ação e wait indica espera. Valor nesta */ /* LEITURA: regra: pointer. */ cursor: pointer; /* LEITURA: position: referência de posicionamento: relative mantém o espaço no fluxo; absolute sai do fluxo; */ /* LEITURA: fixed fica preso à janela. Valor nesta regra: relative. */ position: relative; /* LEITURA: display: modelo de layout: none esconde o elemento; flex organiza em eixo; grid organiza em grade; */ /* LEITURA: block ocupa bloco. Valor nesta regra: flex. */ display: flex; /* LEITURA: align-items: alinhamento dos itens no eixo transversal do flexbox ou dentro das áreas de grid. Valor */ /* LEITURA: nesta regra: center. */ align-items: center; /* LEITURA: justify-content: distribuição dos itens no eixo principal do flexbox ou alinhamento correspondente no */ /* LEITURA: grid. Valor nesta regra: center. */ justify-content: center; } /* LEITURA: Seleciona .oiio-companion-avatar: os elementos cujas tags/classes/atributos correspondem ao seletor. As */ /* LEITURA: declarações abaixo definem sua aparência. */ .oiio-companion-avatar { /* LEITURA: width: largura; % depende do bloco de referência, vw da largura da tela e px usa pixels CSS. Valor */ /* LEITURA: nesta regra: 58px. */ width: 58px; /* LEITURA: height: altura; % depende da altura do bloco de referência, vh da tela e px usa pixels CSS. Valor */ /* LEITURA: nesta regra: 58px. */ height: 58px; /* LEITURA: border-radius: arredondamento dos cantos; 50% pode gerar círculo em uma caixa quadrada. Valor nesta */ /* LEITURA: regra: 50%. */ border-radius: 50%; /* LEITURA: border: atalho para espessura, estilo e cor da borda. Valor nesta regra: 2.5px solid var(--accent- */ /* LEITURA: focus). */ border: 2.5px solid var(--accent-focus); /* LEITURA: box-shadow: sombra: deslocamentos horizontal/vertical, desfoque, espalhamento opcional e cor; não */ /* LEITURA: aumenta a caixa de layout. Valor nesta regra: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 20px var(--accent- */ /* LEITURA: focus-glow). */ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 20px var(--accent-focus-glow); /* LEITURA: object-fit: como a imagem se ajusta à caixa; cover preenche e pode recortar as bordas. Valor nesta */ /* LEITURA: regra: cover. */ object-fit: cover; /* LEITURA: animation: animação nomeada em @keyframes, com duração, curva, repetição e demais opções indicadas. */ /* LEITURA: Valor nesta regra: floatCompanion 4.5s ease-in-out infinite. */ animation: floatCompanion 4.5s ease-in-out infinite; /* LEITURA: transition: transição suave quando uma propriedade muda, inclusive por classe adicionada pelo */ /* LEITURA: JavaScript. Valor nesta regra: transform 0.25s ease, box-shadow 0.25s ease. */ transition: transform 0.25s ease, box-shadow 0.25s ease; /* LEITURA: background: atalho que configura o fundo; pode receber cor, imagem ou gradiente. Valor nesta regra: */ /* LEITURA: var(--bg-card). */ background: var(--bg-card); } /* LEITURA: Seleciona .oiio-companion-trigger:hover .oiio-companion-avatar: os elementos cujas */ /* LEITURA: tags/classes/atributos correspondem ao seletor. vale quando o ponteiro está sobre o elemento. */ .oiio-companion-trigger:hover .oiio-companion-avatar { /* LEITURA: transform: transformação visual como deslocar, girar ou escalar; não reorganiza automaticamente os */ /* LEITURA: vizinhos no fluxo. Valor nesta regra: scale(1.14) rotate(4deg). */ transform: scale(1.14) rotate(4deg); /* LEITURA: box-shadow: sombra: deslocamentos horizontal/vertical, desfoque, espalhamento opcional e cor; não */ /* LEITURA: aumenta a caixa de layout. Valor nesta regra: 0 12px 35px rgba(0, 0, 0, 0.6), 0 0 28px var(--accent- */ /* LEITURA: focus-glow). */ box-shadow: 0 12px 35px rgba(0, 0, 0, 0.6), 0 0 28px var(--accent-focus-glow); } /* LEITURA: Seleciona .companion-pulse-ring: os elementos cujas tags/classes/atributos correspondem ao seletor. As */ /* LEITURA: declarações abaixo definem sua aparência. */ .companion-pulse-ring { /* LEITURA: position: referência de posicionamento: relative mantém o espaço no fluxo; absolute sai do fluxo; */ /* LEITURA: fixed fica preso à janela. Valor nesta regra: absolute. */ position: absolute; /* LEITURA: top: deslocamento da borda superior quando o elemento é posicionado. Valor nesta regra: -4px. */ top: -4px; /* LEITURA: left: deslocamento da borda esquerda quando o elemento é posicionado. Valor nesta regra: -4px. */ left: -4px; /* LEITURA: right: deslocamento da borda direita quando o elemento é posicionado. Valor nesta regra: -4px. */ right: -4px; /* LEITURA: bottom: deslocamento da borda inferior quando o elemento é posicionado. Valor nesta regra: -4px. */ bottom: -4px; /* LEITURA: border-radius: arredondamento dos cantos; 50% pode gerar círculo em uma caixa quadrada. Valor nesta */ /* LEITURA: regra: 50%. */ border-radius: 50%; /* LEITURA: border: atalho para espessura, estilo e cor da borda. Valor nesta regra: 2px solid var(--accent- */ /* LEITURA: focus). */ border: 2px solid var(--accent-focus); /* LEITURA: opacity: opacidade de todo o elemento e seus filhos, de 0 (invisível) a 1 (opaco). Valor nesta regra: */ /* LEITURA: 0.6. */ opacity: 0.6; /* LEITURA: animation: animação nomeada em @keyframes, com duração, curva, repetição e demais opções indicadas. */ /* LEITURA: Valor nesta regra: companionPulse 2.8s infinite. */ animation: companionPulse 2.8s infinite; /* LEITURA: pointer-events: define se o elemento participa de cliques/toques; none deixa eventos passarem para o */ /* LEITURA: que estiver atrás. Valor nesta regra: none. */ pointer-events: none; } /* LEITURA: Define os quadros da animação floatCompanion. Elementos a usam ao declarar animation com esse nome. */ @keyframes floatCompanion { /* LEITURA: Define o aspecto no quadro 0%, 100% da animação (from=0%, to=100%). transform: transformação visual */ /* LEITURA: como deslocar, girar ou escalar; não reorganiza automaticamente os vizinhos no fluxo; valor */ /* LEITURA: translateY(0) rotate(0deg). */ 0%, 100% { transform: translateY(0) rotate(0deg); } /* LEITURA: Define o aspecto no quadro 50% da animação (from=0%, to=100%). transform: transformação visual como */ /* LEITURA: deslocar, girar ou escalar; não reorganiza automaticamente os vizinhos no fluxo; valor */ /* LEITURA: translateY(-7px) rotate(2deg). */ 50% { transform: translateY(-7px) rotate(2deg); } } /* LEITURA: Define os quadros da animação companionPulse. Elementos a usam ao declarar animation com esse nome. */ @keyframes companionPulse { /* LEITURA: Define o aspecto no quadro 0% da animação (from=0%, to=100%). transform: transformação visual como */ /* LEITURA: deslocar, girar ou escalar; não reorganiza automaticamente os vizinhos no fluxo; valor scale(0.95); */ /* LEITURA: opacity: opacidade de todo o elemento e seus filhos, de 0 (invisível) a 1 (opaco); valor 0.8. */ 0% { transform: scale(0.95); opacity: 0.8; } /* LEITURA: Define o aspecto no quadro 70% da animação (from=0%, to=100%). transform: transformação visual como */ /* LEITURA: deslocar, girar ou escalar; não reorganiza automaticamente os vizinhos no fluxo; valor scale(1.35); */ /* LEITURA: opacity: opacidade de todo o elemento e seus filhos, de 0 (invisível) a 1 (opaco); valor 0. */ 70% { transform: scale(1.35); opacity: 0; } /* LEITURA: Define o aspecto no quadro 100% da animação (from=0%, to=100%). transform: transformação visual como */ /* LEITURA: deslocar, girar ou escalar; não reorganiza automaticamente os vizinhos no fluxo; valor scale(1.4); */ /* LEITURA: opacity: opacidade de todo o elemento e seus filhos, de 0 (invisível) a 1 (opaco); valor 0. */ 100% { transform: scale(1.4); opacity: 0; } } /* Balãozinho Flutuante Compacto do Companion */ /* LEITURA: Seleciona .companion-bubble: os elementos cujas tags/classes/atributos correspondem ao seletor. As */ /* LEITURA: declarações abaixo definem sua aparência. */ .companion-bubble { /* LEITURA: pointer-events: define se o elemento participa de cliques/toques; none deixa eventos passarem para o */ /* LEITURA: que estiver atrás. Valor nesta regra: auto. */ pointer-events: auto; /* LEITURA: background: atalho que configura o fundo; pode receber cor, imagem ou gradiente. Valor nesta regra: */ /* LEITURA: rgba(33, 38, 49, 0.96). */ background: rgba(33, 38, 49, 0.96); /* LEITURA: border: atalho para espessura, estilo e cor da borda. Valor nesta regra: 1.5px solid rgba(165, 180, */ /* LEITURA: 252, 0.35). */ border: 1.5px solid rgba(165, 180, 252, 0.35); /* LEITURA: border-radius: arredondamento dos cantos; 50% pode gerar círculo em uma caixa quadrada. Valor nesta */ /* LEITURA: regra: var(--radius-md) var(--radius-md) 4px var(--radius-md). */ border-radius: var(--radius-md) var(--radius-md) 4px var(--radius-md); /* LEITURA: padding: espaço interno entre conteúdo e borda, com a mesma ordem topo/direita/baixo/esquerda quando */ /* LEITURA: há quatro valores. Valor nesta regra: 0.65rem 0.9rem. */ padding: 0.65rem 0.9rem; /* LEITURA: margin-bottom: espaço externo abaixo do elemento. Valor nesta regra: 0.5rem. */ margin-bottom: 0.5rem; /* LEITURA: max-width: largura máxima, impedindo que o bloco cresça além do valor mesmo em tela larga. Valor nesta */ /* LEITURA: regra: 230px. */ max-width: 230px; /* LEITURA: font-size: tamanho das letras; rem é relativo à fonte raiz, px é pixel CSS. Valor nesta regra: */ /* LEITURA: 0.78rem. */ font-size: 0.78rem; /* LEITURA: color: cor do texto e referência de currentColor para ícones. Valor nesta regra: #fff. */ color: #fff; /* LEITURA: line-height: altura das linhas de texto; valor sem unidade multiplica o tamanho da fonte. Valor nesta */ /* LEITURA: regra: 1.35. */ line-height: 1.35; /* LEITURA: box-shadow: sombra: deslocamentos horizontal/vertical, desfoque, espalhamento opcional e cor; não */ /* LEITURA: aumenta a caixa de layout. Valor nesta regra: 0 10px 25px rgba(0, 0, 0, 0.45). */ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.45); /* LEITURA: backdrop-filter: efeito aplicado ao conteúdo atrás do elemento, como desfoque; suporte varia entre */ /* LEITURA: navegadores. Valor nesta regra: blur(12px). */ backdrop-filter: blur(12px); /* LEITURA: -webkit-backdrop-filter: variante prefixada do desfoque de fundo para navegadores que exigem WebKit. */ /* LEITURA: Valor nesta regra: blur(12px). */ -webkit-backdrop-filter: blur(12px); /* LEITURA: opacity: opacidade de todo o elemento e seus filhos, de 0 (invisível) a 1 (opaco). Valor nesta regra: */ /* LEITURA: 0. */ opacity: 0; /* LEITURA: transform: transformação visual como deslocar, girar ou escalar; não reorganiza automaticamente os */ /* LEITURA: vizinhos no fluxo. Valor nesta regra: translateY(10px) scale(0.95). */ transform: translateY(10px) scale(0.95); /* LEITURA: transition: transição suave quando uma propriedade muda, inclusive por classe adicionada pelo */ /* LEITURA: JavaScript. Valor nesta regra: all 0.28s cubic-bezier(0.34, 1.56, 0.64, 1). */ transition: all 0.28s cubic-bezier(0.34, 1.56, 0.64, 1); /* LEITURA: position: referência de posicionamento: relative mantém o espaço no fluxo; absolute sai do fluxo; */ /* LEITURA: fixed fica preso à janela. Valor nesta regra: relative. */ position: relative; /* LEITURA: text-align: alinhamento horizontal do texto dentro da caixa. Valor nesta regra: left. */ text-align: left; } /* LEITURA: Seleciona .companion-bubble.show: os elementos cujas tags/classes/atributos correspondem ao seletor. As */ /* LEITURA: declarações abaixo definem sua aparência. */ .companion-bubble.show { /* LEITURA: opacity: opacidade de todo o elemento e seus filhos, de 0 (invisível) a 1 (opaco). Valor nesta regra: */ /* LEITURA: 1. */ opacity: 1; /* LEITURA: transform: transformação visual como deslocar, girar ou escalar; não reorganiza automaticamente os */ /* LEITURA: vizinhos no fluxo. Valor nesta regra: translateY(0) scale(1). */ transform: translateY(0) scale(1); } /* LEITURA: Seleciona .companion-bubble::after: os elementos cujas tags/classes/atributos correspondem ao seletor. */ /* LEITURA: inclui um pseudo-elemento decorativo. */ .companion-bubble::after { /* LEITURA: content: conteúdo criado por pseudo-elementos como ::before e ::after. Valor nesta regra: ''. */ content: ''; /* LEITURA: position: referência de posicionamento: relative mantém o espaço no fluxo; absolute sai do fluxo; */ /* LEITURA: fixed fica preso à janela. Valor nesta regra: absolute. */ position: absolute; /* LEITURA: bottom: deslocamento da borda inferior quando o elemento é posicionado. Valor nesta regra: -6px. */ bottom: -6px; /* LEITURA: right: deslocamento da borda direita quando o elemento é posicionado. Valor nesta regra: 20px. */ right: 20px; /* LEITURA: width: largura; % depende do bloco de referência, vw da largura da tela e px usa pixels CSS. Valor */ /* LEITURA: nesta regra: 10px. */ width: 10px; /* LEITURA: height: altura; % depende da altura do bloco de referência, vh da tela e px usa pixels CSS. Valor */ /* LEITURA: nesta regra: 10px. */ height: 10px; /* LEITURA: background: atalho que configura o fundo; pode receber cor, imagem ou gradiente. Valor nesta regra: */ /* LEITURA: rgba(33, 38, 49, 0.96). */ background: rgba(33, 38, 49, 0.96); /* LEITURA: border-right: borda direita. Valor nesta regra: 1.5px solid rgba(165, 180, 252, 0.35). */ border-right: 1.5px solid rgba(165, 180, 252, 0.35); /* LEITURA: border-bottom: borda inferior. Valor nesta regra: 1.5px solid rgba(165, 180, 252, 0.35). */ border-bottom: 1.5px solid rgba(165, 180, 252, 0.35); /* LEITURA: transform: transformação visual como deslocar, girar ou escalar; não reorganiza automaticamente os */ /* LEITURA: vizinhos no fluxo. Valor nesta regra: rotate(45deg). */ transform: rotate(45deg); } /* Partículas Flutuantes de Afeto / Estrelinhas */ /* LEITURA: Seleciona .oiio-sparkle: brilho temporário criado por OiioLife.spawnSparkles. As declarações abaixo */ /* LEITURA: definem sua aparência. */ .oiio-sparkle { /* LEITURA: position: referência de posicionamento: relative mantém o espaço no fluxo; absolute sai do fluxo; */ /* LEITURA: fixed fica preso à janela. Valor nesta regra: fixed. */ position: fixed; /* LEITURA: font-size: tamanho das letras; rem é relativo à fonte raiz, px é pixel CSS. Valor nesta regra: */ /* LEITURA: 1.25rem. */ font-size: 1.25rem; /* LEITURA: pointer-events: define se o elemento participa de cliques/toques; none deixa eventos passarem para o */ /* LEITURA: que estiver atrás. Valor nesta regra: none. */ pointer-events: none; /* LEITURA: z-index: ordem de sobreposição dentro do contexto de empilhamento; não é prioridade global absoluta */ /* LEITURA: entre todos os elementos. Valor nesta regra: 1000. */ z-index: 1000; /* LEITURA: animation: animação nomeada em @keyframes, com duração, curva, repetição e demais opções indicadas. */ /* LEITURA: Valor nesta regra: floatSparkle 1.2s ease-out forwards. */ animation: floatSparkle 1.2s ease-out forwards; } /* LEITURA: Define os quadros da animação floatSparkle. Elementos a usam ao declarar animation com esse nome. */ @keyframes floatSparkle { /* LEITURA: Define o aspecto no quadro 0% da animação (from=0%, to=100%). transform: transformação visual como */ /* LEITURA: deslocar, girar ou escalar; não reorganiza automaticamente os vizinhos no fluxo; valor translate(0, 0) */ /* LEITURA: scale(0.5); opacity: opacidade de todo o elemento e seus filhos, de 0 (invisível) a 1 (opaco); valor */ /* LEITURA: 1. */ 0% { transform: translate(0, 0) scale(0.5); opacity: 1; } /* LEITURA: Define o aspecto no quadro 100% da animação (from=0%, to=100%). transform: transformação visual como */ /* LEITURA: deslocar, girar ou escalar; não reorganiza automaticamente os vizinhos no fluxo; valor */ /* LEITURA: translate(var(--tx, 0px), -60px) scale(1.3); opacity: opacidade de todo o elemento e seus filhos, de 0 */ /* LEITURA: (invisível) a 1 (opaco); valor 0. */ 100% { transform: translate(var(--tx, 0px), -60px) scale(1.3); opacity: 0; } } /* LEITURA: Seleciona .mascot-title-group h1: os elementos cujas tags/classes/atributos correspondem ao seletor. As */ /* LEITURA: declarações abaixo definem sua aparência. */ .mascot-title-group h1 { /* LEITURA: font-family: lista de fontes em ordem de preferência; o navegador usa a próxima se a anterior não */ /* LEITURA: estiver disponível. Valor nesta regra: var(--font-display). */ font-family: var(--font-display); /* LEITURA: font-size: tamanho das letras; rem é relativo à fonte raiz, px é pixel CSS. Valor nesta regra: */ /* LEITURA: 1.35rem. */ font-size: 1.35rem; /* LEITURA: font-weight: peso visual das letras; valores maiores normalmente pedem traços mais grossos. Valor */ /* LEITURA: nesta regra: 800. */ font-weight: 800; /* LEITURA: letter-spacing: distância adicional entre caracteres. Valor nesta regra: -0.02em. */ letter-spacing: -0.02em; /* LEITURA: color: cor do texto e referência de currentColor para ícones. Valor nesta regra: #fff. */ color: #fff; /* LEITURA: display: modelo de layout: none esconde o elemento; flex organiza em eixo; grid organiza em grade; */ /* LEITURA: block ocupa bloco. Valor nesta regra: flex. */ display: flex; /* LEITURA: align-items: alinhamento dos itens no eixo transversal do flexbox ou dentro das áreas de grid. Valor */ /* LEITURA: nesta regra: center. */ align-items: center; /* LEITURA: gap: espaçamento entre itens de flex/grid, sem exigir margem em cada filho. Valor nesta regra: 0.4rem. */ gap: 0.4rem; } /* LEITURA: Seleciona .badge-device-sync: os elementos cujas tags/classes/atributos correspondem ao seletor. As */ /* LEITURA: declarações abaixo definem sua aparência. */ .badge-device-sync { /* LEITURA: font-size: tamanho das letras; rem é relativo à fonte raiz, px é pixel CSS. Valor nesta regra: */ /* LEITURA: 0.65rem. */ font-size: 0.65rem; /* LEITURA: font-family: lista de fontes em ordem de preferência; o navegador usa a próxima se a anterior não */ /* LEITURA: estiver disponível. Valor nesta regra: var(--font-sans). */ font-family: var(--font-sans); /* LEITURA: background: atalho que configura o fundo; pode receber cor, imagem ou gradiente. Valor nesta regra: */ /* LEITURA: rgba(134, 239, 172, 0.15). */ background: rgba(134, 239, 172, 0.15); /* LEITURA: border: atalho para espessura, estilo e cor da borda. Valor nesta regra: 1px solid rgba(134, 239, 172, */ /* LEITURA: 0.35). */ border: 1px solid rgba(134, 239, 172, 0.35); /* LEITURA: color: cor do texto e referência de currentColor para ícones. Valor nesta regra: var(--accent-habits). */ color: var(--accent-habits); /* LEITURA: padding: espaço interno entre conteúdo e borda, com a mesma ordem topo/direita/baixo/esquerda quando */ /* LEITURA: há quatro valores. Valor nesta regra: 0.15rem 0.5rem. */ padding: 0.15rem 0.5rem; /* LEITURA: border-radius: arredondamento dos cantos; 50% pode gerar círculo em uma caixa quadrada. Valor nesta */ /* LEITURA: regra: var(--radius-full). */ border-radius: var(--radius-full); /* LEITURA: font-weight: peso visual das letras; valores maiores normalmente pedem traços mais grossos. Valor */ /* LEITURA: nesta regra: 700. */ font-weight: 700; } /* LEITURA: Seleciona .mascot-subtext: os elementos cujas tags/classes/atributos correspondem ao seletor. As */ /* LEITURA: declarações abaixo definem sua aparência. */ .mascot-subtext { /* LEITURA: font-size: tamanho das letras; rem é relativo à fonte raiz, px é pixel CSS. Valor nesta regra: */ /* LEITURA: 0.75rem. */ font-size: 0.75rem; /* LEITURA: color: cor do texto e referência de currentColor para ícones. Valor nesta regra: var(--text- */ /* LEITURA: secondary). */ color: var(--text-secondary); } /* Controles do Topbar */ /* LEITURA: Seleciona .topbar-actions: os elementos cujas tags/classes/atributos correspondem ao seletor. As */ /* LEITURA: declarações abaixo definem sua aparência. */ .topbar-actions { /* LEITURA: display: modelo de layout: none esconde o elemento; flex organiza em eixo; grid organiza em grade; */ /* LEITURA: block ocupa bloco. Valor nesta regra: flex. */ display: flex; /* LEITURA: align-items: alinhamento dos itens no eixo transversal do flexbox ou dentro das áreas de grid. Valor */ /* LEITURA: nesta regra: center. */ align-items: center; /* LEITURA: gap: espaçamento entre itens de flex/grid, sem exigir margem em cada filho. Valor nesta regra: 0.5rem. */ gap: 0.5rem; } /* LEITURA: Seleciona .btn-icon-top: os elementos cujas tags/classes/atributos correspondem ao seletor. As */ /* LEITURA: declarações abaixo definem sua aparência. */ .btn-icon-top { /* LEITURA: width: largura; % depende do bloco de referência, vw da largura da tela e px usa pixels CSS. Valor */ /* LEITURA: nesta regra: 38px. */ width: 38px; /* LEITURA: height: altura; % depende da altura do bloco de referência, vh da tela e px usa pixels CSS. Valor */ /* LEITURA: nesta regra: 38px. */ height: 38px; /* LEITURA: border-radius: arredondamento dos cantos; 50% pode gerar círculo em uma caixa quadrada. Valor nesta */ /* LEITURA: regra: var(--radius-sm). */ border-radius: var(--radius-sm); /* LEITURA: background: atalho que configura o fundo; pode receber cor, imagem ou gradiente. Valor nesta regra: */ /* LEITURA: var(--bg-card). */ background: var(--bg-card); /* LEITURA: border: atalho para espessura, estilo e cor da borda. Valor nesta regra: 1px solid var(--border- */ /* LEITURA: subtle). */ border: 1px solid var(--border-subtle); /* LEITURA: color: cor do texto e referência de currentColor para ícones. Valor nesta regra: var(--text- */ /* LEITURA: secondary). */ color: var(--text-secondary); /* LEITURA: display: modelo de layout: none esconde o elemento; flex organiza em eixo; grid organiza em grade; */ /* LEITURA: block ocupa bloco. Valor nesta regra: flex. */ display: flex; /* LEITURA: align-items: alinhamento dos itens no eixo transversal do flexbox ou dentro das áreas de grid. Valor */ /* LEITURA: nesta regra: center. */ align-items: center; /* LEITURA: justify-content: distribuição dos itens no eixo principal do flexbox ou alinhamento correspondente no */ /* LEITURA: grid. Valor nesta regra: center. */ justify-content: center; /* LEITURA: cursor: cursor sugerido ao passar o mouse; pointer sinaliza ação e wait indica espera. Valor nesta */ /* LEITURA: regra: pointer. */ cursor: pointer; /* LEITURA: transition: transição suave quando uma propriedade muda, inclusive por classe adicionada pelo */ /* LEITURA: JavaScript. Valor nesta regra: all var(--transition-fast). */ transition: all var(--transition-fast); } /* LEITURA: Seleciona .btn-icon-top:hover: os elementos cujas tags/classes/atributos correspondem ao seletor. vale */ /* LEITURA: quando o ponteiro está sobre o elemento. */ .btn-icon-top:hover { /* LEITURA: color: cor do texto e referência de currentColor para ícones. Valor nesta regra: #fff. */ color: #fff; /* LEITURA: border-color: cor das bordas sem alterar sua espessura. Valor nesta regra: rgba(255, 255, 255, 0.2). */ border-color: rgba(255, 255, 255, 0.2); } /* LEITURA: Seleciona .btn-icon-top.active-push: os elementos cujas tags/classes/atributos correspondem ao seletor. */ /* LEITURA: a classe active é um estado atribuído pelo JavaScript, diferente da pseudoclasse :active. */ .btn-icon-top.active-push { /* LEITURA: color: cor do texto e referência de currentColor para ícones. Valor nesta regra: var(--accent- */ /* LEITURA: dopamine). */ color: var(--accent-dopamine); /* LEITURA: border-color: cor das bordas sem alterar sua espessura. Valor nesta regra: rgba(253, 224, 71, 0.4). */ border-color: rgba(253, 224, 71, 0.4); /* LEITURA: background: atalho que configura o fundo; pode receber cor, imagem ou gradiente. Valor nesta regra: */ /* LEITURA: rgba(253, 224, 71, 0.1). */ background: rgba(253, 224, 71, 0.1); } /* LEITURA: Seleciona .btn-icon-top.muted svg: os elementos cujas tags/classes/atributos correspondem ao seletor. As */ /* LEITURA: declarações abaixo definem sua aparência. */ .btn-icon-top.muted svg { /* LEITURA: color: cor do texto e referência de currentColor para ícones. Valor nesta regra: var(--accent- */ /* LEITURA: emergency). */ color: var(--accent-emergency); } /* Balão de Fala Dinâmico do Oiio */ /* LEITURA: Seleciona .oiio-speech-bubble: os elementos cujas tags/classes/atributos correspondem ao seletor. As */ /* LEITURA: declarações abaixo definem sua aparência. */ .oiio-speech-bubble { /* LEITURA: background: atalho que configura o fundo; pode receber cor, imagem ou gradiente. Valor nesta regra: */ /* LEITURA: linear-gradient(135deg, rgba(165, 180, 252, 0.12) 0%, rgba(39, 44, 56, 0.95) 100%). */ background: linear-gradient(135deg, rgba(165, 180, 252, 0.12) 0%, rgba(39, 44, 56, 0.95) 100%); /* LEITURA: border: atalho para espessura, estilo e cor da borda. Valor nesta regra: 1.5px solid rgba(165, 180, */ /* LEITURA: 252, 0.3). */ border: 1.5px solid rgba(165, 180, 252, 0.3); /* LEITURA: border-radius: arredondamento dos cantos; 50% pode gerar círculo em uma caixa quadrada. Valor nesta */ /* LEITURA: regra: var(--radius-md). */ border-radius: var(--radius-md); /* LEITURA: padding: espaço interno entre conteúdo e borda, com a mesma ordem topo/direita/baixo/esquerda quando */ /* LEITURA: há quatro valores. Valor nesta regra: 0.9rem 1.1rem. */ padding: 0.9rem 1.1rem; /* LEITURA: margin-bottom: espaço externo abaixo do elemento. Valor nesta regra: 1.25rem. */ margin-bottom: 1.25rem; /* LEITURA: display: modelo de layout: none esconde o elemento; flex organiza em eixo; grid organiza em grade; */ /* LEITURA: block ocupa bloco. Valor nesta regra: flex. */ display: flex; /* LEITURA: align-items: alinhamento dos itens no eixo transversal do flexbox ou dentro das áreas de grid. Valor */ /* LEITURA: nesta regra: flex-start. */ align-items: flex-start; /* LEITURA: gap: espaçamento entre itens de flex/grid, sem exigir margem em cada filho. Valor nesta regra: */ /* LEITURA: 0.75rem. */ gap: 0.75rem; /* LEITURA: box-shadow: sombra: deslocamentos horizontal/vertical, desfoque, espalhamento opcional e cor; não */ /* LEITURA: aumenta a caixa de layout. Valor nesta regra: 0 4px 18px rgba(0, 0, 0, 0.2). */ box-shadow: 0 4px 18px rgba(0, 0, 0, 0.2); /* LEITURA: animation: animação nomeada em @keyframes, com duração, curva, repetição e demais opções indicadas. */ /* LEITURA: Valor nesta regra: fadeIn 0.3s ease. */ animation: fadeIn 0.3s ease; /* LEITURA: position: referência de posicionamento: relative mantém o espaço no fluxo; absolute sai do fluxo; */ /* LEITURA: fixed fica preso à janela. Valor nesta regra: relative. */ position: relative; } /* LEITURA: Seleciona .oiio-mini-mascot: os elementos cujas tags/classes/atributos correspondem ao seletor. As */ /* LEITURA: declarações abaixo definem sua aparência. */ .oiio-mini-mascot { /* LEITURA: width: largura; % depende do bloco de referência, vw da largura da tela e px usa pixels CSS. Valor */ /* LEITURA: nesta regra: 28px. */ width: 28px; /* LEITURA: height: altura; % depende da altura do bloco de referência, vh da tela e px usa pixels CSS. Valor */ /* LEITURA: nesta regra: 28px. */ height: 28px; /* LEITURA: border-radius: arredondamento dos cantos; 50% pode gerar círculo em uma caixa quadrada. Valor nesta */ /* LEITURA: regra: 50%. */ border-radius: 50%; /* LEITURA: flex-shrink: quanto o item pode encolher quando falta espaço no contêiner flex. Valor nesta regra: 0. */ flex-shrink: 0; /* LEITURA: object-fit: como a imagem se ajusta à caixa; cover preenche e pode recortar as bordas. Valor nesta */ /* LEITURA: regra: cover. */ object-fit: cover; } /* LEITURA: Seleciona .oiio-bubble-text: os elementos cujas tags/classes/atributos correspondem ao seletor. As */ /* LEITURA: declarações abaixo definem sua aparência. */ .oiio-bubble-text { /* LEITURA: flex: atalho para crescimento, encolhimento e tamanho base de um item dentro de flexbox. Valor nesta */ /* LEITURA: regra: 1. */ flex: 1; /* LEITURA: font-size: tamanho das letras; rem é relativo à fonte raiz, px é pixel CSS. Valor nesta regra: */ /* LEITURA: 0.88rem. */ font-size: 0.88rem; /* LEITURA: color: cor do texto e referência de currentColor para ícones. Valor nesta regra: #f1f5f9. */ color: #f1f5f9; /* LEITURA: line-height: altura das linhas de texto; valor sem unidade multiplica o tamanho da fonte. Valor nesta */ /* LEITURA: regra: 1.45. */ line-height: 1.45; } /* LEITURA: Seleciona .btn-speak-again: os elementos cujas tags/classes/atributos correspondem ao seletor. As */ /* LEITURA: declarações abaixo definem sua aparência. */ .btn-speak-again { /* LEITURA: background: atalho que configura o fundo; pode receber cor, imagem ou gradiente. Valor nesta regra: */ /* LEITURA: none. */ background: none; /* LEITURA: border: atalho para espessura, estilo e cor da borda. Valor nesta regra: none. */ border: none; /* LEITURA: color: cor do texto e referência de currentColor para ícones. Valor nesta regra: var(--accent-focus). */ color: var(--accent-focus); /* LEITURA: cursor: cursor sugerido ao passar o mouse; pointer sinaliza ação e wait indica espera. Valor nesta */ /* LEITURA: regra: pointer. */ cursor: pointer; /* LEITURA: padding: espaço interno entre conteúdo e borda, com a mesma ordem topo/direita/baixo/esquerda quando */ /* LEITURA: há quatro valores. Valor nesta regra: 0.2rem. */ padding: 0.2rem; /* LEITURA: display: modelo de layout: none esconde o elemento; flex organiza em eixo; grid organiza em grade; */ /* LEITURA: block ocupa bloco. Valor nesta regra: flex. */ display: flex; /* LEITURA: align-items: alinhamento dos itens no eixo transversal do flexbox ou dentro das áreas de grid. Valor */ /* LEITURA: nesta regra: center. */ align-items: center; /* LEITURA: justify-content: distribuição dos itens no eixo principal do flexbox ou alinhamento correspondente no */ /* LEITURA: grid. Valor nesta regra: center. */ justify-content: center; /* LEITURA: opacity: opacidade de todo o elemento e seus filhos, de 0 (invisível) a 1 (opaco). Valor nesta regra: */ /* LEITURA: 0.8. */ opacity: 0.8; /* LEITURA: transition: transição suave quando uma propriedade muda, inclusive por classe adicionada pelo */ /* LEITURA: JavaScript. Valor nesta regra: opacity var(--transition-fast). */ transition: opacity var(--transition-fast); } /* LEITURA: Seleciona .btn-speak-again:hover: os elementos cujas tags/classes/atributos correspondem ao seletor. */ /* LEITURA: vale quando o ponteiro está sobre o elemento. */ .btn-speak-again:hover { /* LEITURA: opacity: opacidade de todo o elemento e seus filhos, de 0 (invisível) a 1 (opaco). Valor nesta regra: */ /* LEITURA: 1. */ opacity: 1; } /* Botão de Emergência Rápido */ /* LEITURA: Seleciona .btn-emergency-paralysis: os elementos cujas tags/classes/atributos correspondem ao seletor. */ /* LEITURA: As declarações abaixo definem sua aparência. */ .btn-emergency-paralysis { /* LEITURA: width: largura; % depende do bloco de referência, vw da largura da tela e px usa pixels CSS. Valor */ /* LEITURA: nesta regra: 100%. */ width: 100%; /* LEITURA: background: atalho que configura o fundo; pode receber cor, imagem ou gradiente. Valor nesta regra: */ /* LEITURA: var(--accent-emergency-bg). */ background: var(--accent-emergency-bg); /* LEITURA: border: atalho para espessura, estilo e cor da borda. Valor nesta regra: 1.5px solid rgba(248, 113, */ /* LEITURA: 113, 0.35). */ border: 1.5px solid rgba(248, 113, 113, 0.35); /* LEITURA: color: cor do texto e referência de currentColor para ícones. Valor nesta regra: #fca5a5. */ color: #fca5a5; /* LEITURA: border-radius: arredondamento dos cantos; 50% pode gerar círculo em uma caixa quadrada. Valor nesta */ /* LEITURA: regra: var(--radius-md). */ border-radius: var(--radius-md); /* LEITURA: padding: espaço interno entre conteúdo e borda, com a mesma ordem topo/direita/baixo/esquerda quando */ /* LEITURA: há quatro valores. Valor nesta regra: 0.85rem 1rem. */ padding: 0.85rem 1rem; /* LEITURA: font-family: lista de fontes em ordem de preferência; o navegador usa a próxima se a anterior não */ /* LEITURA: estiver disponível. Valor nesta regra: var(--font-sans). */ font-family: var(--font-sans); /* LEITURA: font-size: tamanho das letras; rem é relativo à fonte raiz, px é pixel CSS. Valor nesta regra: */ /* LEITURA: 0.92rem. */ font-size: 0.92rem; /* LEITURA: font-weight: peso visual das letras; valores maiores normalmente pedem traços mais grossos. Valor */ /* LEITURA: nesta regra: 700. */ font-weight: 700; /* LEITURA: cursor: cursor sugerido ao passar o mouse; pointer sinaliza ação e wait indica espera. Valor nesta */ /* LEITURA: regra: pointer. */ cursor: pointer; /* LEITURA: display: modelo de layout: none esconde o elemento; flex organiza em eixo; grid organiza em grade; */ /* LEITURA: block ocupa bloco. Valor nesta regra: flex. */ display: flex; /* LEITURA: align-items: alinhamento dos itens no eixo transversal do flexbox ou dentro das áreas de grid. Valor */ /* LEITURA: nesta regra: center. */ align-items: center; /* LEITURA: justify-content: distribuição dos itens no eixo principal do flexbox ou alinhamento correspondente no */ /* LEITURA: grid. Valor nesta regra: center. */ justify-content: center; /* LEITURA: gap: espaçamento entre itens de flex/grid, sem exigir margem em cada filho. Valor nesta regra: 0.6rem. */ gap: 0.6rem; /* LEITURA: margin-bottom: espaço externo abaixo do elemento. Valor nesta regra: 1.25rem. */ margin-bottom: 1.25rem; /* LEITURA: box-shadow: sombra: deslocamentos horizontal/vertical, desfoque, espalhamento opcional e cor; não */ /* LEITURA: aumenta a caixa de layout. Valor nesta regra: 0 4px 14px rgba(239, 68, 68, 0.12). */ box-shadow: 0 4px 14px rgba(239, 68, 68, 0.12); /* LEITURA: transition: transição suave quando uma propriedade muda, inclusive por classe adicionada pelo */ /* LEITURA: JavaScript. Valor nesta regra: all var(--transition-fast). */ transition: all var(--transition-fast); } /* LEITURA: Seleciona .btn-emergency-paralysis:hover: os elementos cujas tags/classes/atributos correspondem ao */ /* LEITURA: seletor. vale quando o ponteiro está sobre o elemento. */ .btn-emergency-paralysis:hover { /* LEITURA: background: atalho que configura o fundo; pode receber cor, imagem ou gradiente. Valor nesta regra: */ /* LEITURA: rgba(239, 68, 68, 0.22). */ background: rgba(239, 68, 68, 0.22); /* LEITURA: border-color: cor das bordas sem alterar sua espessura. Valor nesta regra: rgba(248, 113, 113, 0.6). */ border-color: rgba(248, 113, 113, 0.6); /* LEITURA: transform: transformação visual como deslocar, girar ou escalar; não reorganiza automaticamente os */ /* LEITURA: vizinhos no fluxo. Valor nesta regra: translateY(-1px). */ transform: translateY(-1px); } /* ========================================================================== ABAS & TRANSIÇÕES FLUIDAS (FASE 5) ========================================================================== */ /* LEITURA: Seleciona .oiio-tab-panel: painel de uma aba; switchTab aplica active ao painel selecionado. As */ /* LEITURA: declarações abaixo definem sua aparência. */ .oiio-tab-panel { /* LEITURA: display: modelo de layout: none esconde o elemento; flex organiza em eixo; grid organiza em grade; */ /* LEITURA: block ocupa bloco. Valor nesta regra: none. */ display: none; /* LEITURA: flex-direction: direção do eixo principal do flexbox; column empilha verticalmente e row organiza */ /* LEITURA: horizontalmente. Valor nesta regra: column. */ flex-direction: column; /* LEITURA: gap: espaçamento entre itens de flex/grid, sem exigir margem em cada filho. Valor nesta regra: */ /* LEITURA: 1.25rem. */ gap: 1.25rem; /* LEITURA: animation: animação nomeada em @keyframes, com duração, curva, repetição e demais opções indicadas. */ /* LEITURA: Valor nesta regra: fadeSlideUp var(--transition-smooth). */ animation: fadeSlideUp var(--transition-smooth); } /* LEITURA: Seleciona .oiio-tab-panel.active: painel de uma aba; switchTab aplica active ao painel selecionado. a */ /* LEITURA: classe active é um estado atribuído pelo JavaScript, diferente da pseudoclasse :active. */ .oiio-tab-panel.active { /* LEITURA: display: modelo de layout: none esconde o elemento; flex organiza em eixo; grid organiza em grade; */ /* LEITURA: block ocupa bloco. Valor nesta regra: flex. */ display: flex; } /* LEITURA: Define os quadros da animação fadeSlideUp. Elementos a usam ao declarar animation com esse nome. */ @keyframes fadeSlideUp { /* LEITURA: Define o aspecto no quadro from da animação (from=0%, to=100%). opacity: opacidade de todo o elemento */ /* LEITURA: e seus filhos, de 0 (invisível) a 1 (opaco); valor 0; transform: transformação visual como deslocar, */ /* LEITURA: girar ou escalar; não reorganiza automaticamente os vizinhos no fluxo; valor translateY(8px). */ from { opacity: 0; transform: translateY(8px); } /* LEITURA: Define o aspecto no quadro to da animação (from=0%, to=100%). opacity: opacidade de todo o elemento e */ /* LEITURA: seus filhos, de 0 (invisível) a 1 (opaco); valor 1; transform: transformação visual como deslocar, */ /* LEITURA: girar ou escalar; não reorganiza automaticamente os vizinhos no fluxo; valor translateY(0). */ to { opacity: 1; transform: translateY(0); } } /* LEITURA: Seleciona .card-oiio: os elementos cujas tags/classes/atributos correspondem ao seletor. As declarações */ /* LEITURA: abaixo definem sua aparência. */ .card-oiio { /* LEITURA: background: atalho que configura o fundo; pode receber cor, imagem ou gradiente. Valor nesta regra: */ /* LEITURA: var(--bg-card). */ background: var(--bg-card); /* LEITURA: border: atalho para espessura, estilo e cor da borda. Valor nesta regra: 1px solid var(--border- */ /* LEITURA: subtle). */ border: 1px solid var(--border-subtle); /* LEITURA: border-radius: arredondamento dos cantos; 50% pode gerar círculo em uma caixa quadrada. Valor nesta */ /* LEITURA: regra: var(--radius-lg). */ border-radius: var(--radius-lg); /* LEITURA: padding: espaço interno entre conteúdo e borda, com a mesma ordem topo/direita/baixo/esquerda quando */ /* LEITURA: há quatro valores. Valor nesta regra: 1.25rem. */ padding: 1.25rem; /* LEITURA: box-shadow: sombra: deslocamentos horizontal/vertical, desfoque, espalhamento opcional e cor; não */ /* LEITURA: aumenta a caixa de layout. Valor nesta regra: var(--shadow-card). */ box-shadow: var(--shadow-card); } /* LEITURA: Seleciona .card-header-row: os elementos cujas tags/classes/atributos correspondem ao seletor. As */ /* LEITURA: declarações abaixo definem sua aparência. */ .card-header-row { /* LEITURA: display: modelo de layout: none esconde o elemento; flex organiza em eixo; grid organiza em grade; */ /* LEITURA: block ocupa bloco. Valor nesta regra: flex. */ display: flex; /* LEITURA: align-items: alinhamento dos itens no eixo transversal do flexbox ou dentro das áreas de grid. Valor */ /* LEITURA: nesta regra: center. */ align-items: center; /* LEITURA: justify-content: distribuição dos itens no eixo principal do flexbox ou alinhamento correspondente no */ /* LEITURA: grid. Valor nesta regra: space-between. */ justify-content: space-between; /* LEITURA: margin-bottom: espaço externo abaixo do elemento. Valor nesta regra: 1rem. */ margin-bottom: 1rem; } /* LEITURA: Seleciona .card-label: os elementos cujas tags/classes/atributos correspondem ao seletor. As declarações */ /* LEITURA: abaixo definem sua aparência. */ .card-label { /* LEITURA: font-family: lista de fontes em ordem de preferência; o navegador usa a próxima se a anterior não */ /* LEITURA: estiver disponível. Valor nesta regra: var(--font-display). */ font-family: var(--font-display); /* LEITURA: font-size: tamanho das letras; rem é relativo à fonte raiz, px é pixel CSS. Valor nesta regra: */ /* LEITURA: 1.05rem. */ font-size: 1.05rem; /* LEITURA: font-weight: peso visual das letras; valores maiores normalmente pedem traços mais grossos. Valor */ /* LEITURA: nesta regra: 700. */ font-weight: 700; /* LEITURA: display: modelo de layout: none esconde o elemento; flex organiza em eixo; grid organiza em grade; */ /* LEITURA: block ocupa bloco. Valor nesta regra: flex. */ display: flex; /* LEITURA: align-items: alinhamento dos itens no eixo transversal do flexbox ou dentro das áreas de grid. Valor */ /* LEITURA: nesta regra: center. */ align-items: center; /* LEITURA: gap: espaçamento entre itens de flex/grid, sem exigir margem em cada filho. Valor nesta regra: 0.5rem. */ gap: 0.5rem; /* LEITURA: color: cor do texto e referência de currentColor para ícones. Valor nesta regra: #fff. */ color: #fff; } /* Módulo 1: Checklist & Ampulheta */ /* LEITURA: Seleciona .task-entry-form: os elementos cujas tags/classes/atributos correspondem ao seletor. As */ /* LEITURA: declarações abaixo definem sua aparência. */ .task-entry-form { /* LEITURA: display: modelo de layout: none esconde o elemento; flex organiza em eixo; grid organiza em grade; */ /* LEITURA: block ocupa bloco. Valor nesta regra: flex. */ display: flex; /* LEITURA: gap: espaçamento entre itens de flex/grid, sem exigir margem em cada filho. Valor nesta regra: 0.5rem. */ gap: 0.5rem; /* LEITURA: margin-bottom: espaço externo abaixo do elemento. Valor nesta regra: 1rem. */ margin-bottom: 1rem; } /* LEITURA: Seleciona .input-oiio: os elementos cujas tags/classes/atributos correspondem ao seletor. As declarações */ /* LEITURA: abaixo definem sua aparência. */ .input-oiio { /* LEITURA: flex: atalho para crescimento, encolhimento e tamanho base de um item dentro de flexbox. Valor nesta */ /* LEITURA: regra: 1. */ flex: 1; /* LEITURA: background: atalho que configura o fundo; pode receber cor, imagem ou gradiente. Valor nesta regra: */ /* LEITURA: var(--bg-card-subtle). */ background: var(--bg-card-subtle); /* LEITURA: border: atalho para espessura, estilo e cor da borda. Valor nesta regra: 1.5px solid var(--border- */ /* LEITURA: subtle). */ border: 1.5px solid var(--border-subtle); /* LEITURA: border-radius: arredondamento dos cantos; 50% pode gerar círculo em uma caixa quadrada. Valor nesta */ /* LEITURA: regra: var(--radius-sm). */ border-radius: var(--radius-sm); /* LEITURA: padding: espaço interno entre conteúdo e borda, com a mesma ordem topo/direita/baixo/esquerda quando */ /* LEITURA: há quatro valores. Valor nesta regra: 0.8rem 1rem. */ padding: 0.8rem 1rem; /* LEITURA: font-family: lista de fontes em ordem de preferência; o navegador usa a próxima se a anterior não */ /* LEITURA: estiver disponível. Valor nesta regra: var(--font-sans). */ font-family: var(--font-sans); /* LEITURA: font-size: tamanho das letras; rem é relativo à fonte raiz, px é pixel CSS. Valor nesta regra: */ /* LEITURA: 0.92rem. */ font-size: 0.92rem; /* LEITURA: color: cor do texto e referência de currentColor para ícones. Valor nesta regra: #fff. */ color: #fff; /* LEITURA: outline: contorno extra que não ocupa espaço; none o remove, então é necessário outro destaque de foco */ /* LEITURA: acessível. Valor nesta regra: none. */ outline: none; /* LEITURA: transition: transição suave quando uma propriedade muda, inclusive por classe adicionada pelo */ /* LEITURA: JavaScript. Valor nesta regra: border-color var(--transition-fast). */ transition: border-color var(--transition-fast); } /* LEITURA: Seleciona .input-oiio:focus: os elementos cujas tags/classes/atributos correspondem ao seletor. vale */ /* LEITURA: quando o elemento recebe foco de teclado/clique. */ .input-oiio:focus { /* LEITURA: border-color: cor das bordas sem alterar sua espessura. Valor nesta regra: var(--accent-focus). */ border-color: var(--accent-focus); } /* LEITURA: Seleciona .btn-primary-focus: os elementos cujas tags/classes/atributos correspondem ao seletor. As */ /* LEITURA: declarações abaixo definem sua aparência. */ .btn-primary-focus { /* LEITURA: background: atalho que configura o fundo; pode receber cor, imagem ou gradiente. Valor nesta regra: */ /* LEITURA: var(--accent-focus). */ background: var(--accent-focus); /* LEITURA: color: cor do texto e referência de currentColor para ícones. Valor nesta regra: #1e222b. */ color: #1e222b; /* LEITURA: border: atalho para espessura, estilo e cor da borda. Valor nesta regra: none. */ border: none; /* LEITURA: border-radius: arredondamento dos cantos; 50% pode gerar círculo em uma caixa quadrada. Valor nesta */ /* LEITURA: regra: var(--radius-sm). */ border-radius: var(--radius-sm); /* LEITURA: padding: espaço interno entre conteúdo e borda, com a mesma ordem topo/direita/baixo/esquerda quando */ /* LEITURA: há quatro valores. Valor nesta regra: 0 1.15rem. */ padding: 0 1.15rem; /* LEITURA: font-family: lista de fontes em ordem de preferência; o navegador usa a próxima se a anterior não */ /* LEITURA: estiver disponível. Valor nesta regra: var(--font-sans). */ font-family: var(--font-sans); /* LEITURA: font-size: tamanho das letras; rem é relativo à fonte raiz, px é pixel CSS. Valor nesta regra: 0.9rem. */ font-size: 0.9rem; /* LEITURA: font-weight: peso visual das letras; valores maiores normalmente pedem traços mais grossos. Valor */ /* LEITURA: nesta regra: 800. */ font-weight: 800; /* LEITURA: cursor: cursor sugerido ao passar o mouse; pointer sinaliza ação e wait indica espera. Valor nesta */ /* LEITURA: regra: pointer. */ cursor: pointer; /* LEITURA: transition: transição suave quando uma propriedade muda, inclusive por classe adicionada pelo */ /* LEITURA: JavaScript. Valor nesta regra: all var(--transition-fast). */ transition: all var(--transition-fast); } /* LEITURA: Seleciona .btn-primary-focus:hover: os elementos cujas tags/classes/atributos correspondem ao seletor. */ /* LEITURA: vale quando o ponteiro está sobre o elemento. */ .btn-primary-focus:hover { /* LEITURA: box-shadow: sombra: deslocamentos horizontal/vertical, desfoque, espalhamento opcional e cor; não */ /* LEITURA: aumenta a caixa de layout. Valor nesta regra: 0 4px 14px var(--accent-focus-glow). */ box-shadow: 0 4px 14px var(--accent-focus-glow); /* LEITURA: transform: transformação visual como deslocar, girar ou escalar; não reorganiza automaticamente os */ /* LEITURA: vizinhos no fluxo. Valor nesta regra: translateY(-1px). */ transform: translateY(-1px); } /* Barra do Foco Ativo (Ampulheta Horizontal) */ /* LEITURA: Seleciona .active-focus-container: os elementos cujas tags/classes/atributos correspondem ao seletor. a */ /* LEITURA: classe active é um estado atribuído pelo JavaScript, diferente da pseudoclasse :active. */ .active-focus-container { /* LEITURA: display: modelo de layout: none esconde o elemento; flex organiza em eixo; grid organiza em grade; */ /* LEITURA: block ocupa bloco. Valor nesta regra: none. */ display: none; /* LEITURA: background: atalho que configura o fundo; pode receber cor, imagem ou gradiente. Valor nesta regra: */ /* LEITURA: linear-gradient(135deg, rgba(165, 180, 252, 0.15) 0%, rgba(39, 44, 56, 0.95) 100%). */ background: linear-gradient(135deg, rgba(165, 180, 252, 0.15) 0%, rgba(39, 44, 56, 0.95) 100%); /* LEITURA: border: atalho para espessura, estilo e cor da borda. Valor nesta regra: 1.5px solid var(--accent- */ /* LEITURA: focus). */ border: 1.5px solid var(--accent-focus); /* LEITURA: border-radius: arredondamento dos cantos; 50% pode gerar círculo em uma caixa quadrada. Valor nesta */ /* LEITURA: regra: var(--radius-md). */ border-radius: var(--radius-md); /* LEITURA: padding: espaço interno entre conteúdo e borda, com a mesma ordem topo/direita/baixo/esquerda quando */ /* LEITURA: há quatro valores. Valor nesta regra: 1.1rem. */ padding: 1.1rem; /* LEITURA: margin-bottom: espaço externo abaixo do elemento. Valor nesta regra: 1.1rem. */ margin-bottom: 1.1rem; /* LEITURA: animation: animação nomeada em @keyframes, com duração, curva, repetição e demais opções indicadas. */ /* LEITURA: Valor nesta regra: fadeSlideUp 0.3s ease. */ animation: fadeSlideUp 0.3s ease; } /* LEITURA: Seleciona .focus-header: os elementos cujas tags/classes/atributos correspondem ao seletor. As */ /* LEITURA: declarações abaixo definem sua aparência. */ .focus-header { /* LEITURA: display: modelo de layout: none esconde o elemento; flex organiza em eixo; grid organiza em grade; */ /* LEITURA: block ocupa bloco. Valor nesta regra: flex. */ display: flex; /* LEITURA: align-items: alinhamento dos itens no eixo transversal do flexbox ou dentro das áreas de grid. Valor */ /* LEITURA: nesta regra: center. */ align-items: center; /* LEITURA: justify-content: distribuição dos itens no eixo principal do flexbox ou alinhamento correspondente no */ /* LEITURA: grid. Valor nesta regra: space-between. */ justify-content: space-between; /* LEITURA: margin-bottom: espaço externo abaixo do elemento. Valor nesta regra: 0.65rem. */ margin-bottom: 0.65rem; } /* LEITURA: Seleciona .focus-task-title: os elementos cujas tags/classes/atributos correspondem ao seletor. As */ /* LEITURA: declarações abaixo definem sua aparência. */ .focus-task-title { /* LEITURA: font-size: tamanho das letras; rem é relativo à fonte raiz, px é pixel CSS. Valor nesta regra: */ /* LEITURA: 1.05rem. */ font-size: 1.05rem; /* LEITURA: font-weight: peso visual das letras; valores maiores normalmente pedem traços mais grossos. Valor */ /* LEITURA: nesta regra: 700. */ font-weight: 700; /* LEITURA: color: cor do texto e referência de currentColor para ícones. Valor nesta regra: #fff. */ color: #fff; } /* LEITURA: Seleciona .hourglass-track: os elementos cujas tags/classes/atributos correspondem ao seletor. As */ /* LEITURA: declarações abaixo definem sua aparência. */ .hourglass-track { /* LEITURA: width: largura; % depende do bloco de referência, vw da largura da tela e px usa pixels CSS. Valor */ /* LEITURA: nesta regra: 100%. */ width: 100%; /* LEITURA: height: altura; % depende da altura do bloco de referência, vh da tela e px usa pixels CSS. Valor */ /* LEITURA: nesta regra: 10px. */ height: 10px; /* LEITURA: background: atalho que configura o fundo; pode receber cor, imagem ou gradiente. Valor nesta regra: */ /* LEITURA: rgba(0, 0, 0, 0.35). */ background: rgba(0, 0, 0, 0.35); /* LEITURA: border-radius: arredondamento dos cantos; 50% pode gerar círculo em uma caixa quadrada. Valor nesta */ /* LEITURA: regra: var(--radius-full). */ border-radius: var(--radius-full); /* LEITURA: overflow: tratamento de conteúdo que ultrapassa a caixa; hidden corta e auto oferece rolagem quando */ /* LEITURA: necessária. Valor nesta regra: hidden. */ overflow: hidden; /* LEITURA: margin: espaço externo: 1 valor vale para todos os lados; 2 = vertical/horizontal; 4 = */ /* LEITURA: topo/direita/baixo/esquerda; auto pode centralizar. Valor nesta regra: 0.6rem 0. */ margin: 0.6rem 0; } /* LEITURA: Seleciona .hourglass-fill: barra de tempo restante atualizada por renderFocus. As declarações abaixo */ /* LEITURA: definem sua aparência. */ .hourglass-fill { /* LEITURA: height: altura; % depende da altura do bloco de referência, vh da tela e px usa pixels CSS. Valor */ /* LEITURA: nesta regra: 100%. */ height: 100%; /* LEITURA: width: largura; % depende do bloco de referência, vw da largura da tela e px usa pixels CSS. Valor */ /* LEITURA: nesta regra: 100%. */ width: 100%; /* LEITURA: background: atalho que configura o fundo; pode receber cor, imagem ou gradiente. Valor nesta regra: */ /* LEITURA: linear-gradient(90deg, #818cf8, #a5b4fc). */ background: linear-gradient(90deg, #818cf8, #a5b4fc); /* LEITURA: border-radius: arredondamento dos cantos; 50% pode gerar círculo em uma caixa quadrada. Valor nesta */ /* LEITURA: regra: var(--radius-full). */ border-radius: var(--radius-full); /* LEITURA: transition: transição suave quando uma propriedade muda, inclusive por classe adicionada pelo */ /* LEITURA: JavaScript. Valor nesta regra: width 1s linear. */ transition: width 1s linear; } /* LEITURA: Seleciona .focus-footer-row: os elementos cujas tags/classes/atributos correspondem ao seletor. As */ /* LEITURA: declarações abaixo definem sua aparência. */ .focus-footer-row { /* LEITURA: display: modelo de layout: none esconde o elemento; flex organiza em eixo; grid organiza em grade; */ /* LEITURA: block ocupa bloco. Valor nesta regra: flex. */ display: flex; /* LEITURA: align-items: alinhamento dos itens no eixo transversal do flexbox ou dentro das áreas de grid. Valor */ /* LEITURA: nesta regra: center. */ align-items: center; /* LEITURA: justify-content: distribuição dos itens no eixo principal do flexbox ou alinhamento correspondente no */ /* LEITURA: grid. Valor nesta regra: space-between. */ justify-content: space-between; /* LEITURA: margin-top: espaço externo acima do elemento. Valor nesta regra: 0.5rem. */ margin-top: 0.5rem; } /* LEITURA: Seleciona .focus-calm-status: os elementos cujas tags/classes/atributos correspondem ao seletor. As */ /* LEITURA: declarações abaixo definem sua aparência. */ .focus-calm-status { /* LEITURA: font-size: tamanho das letras; rem é relativo à fonte raiz, px é pixel CSS. Valor nesta regra: */ /* LEITURA: 0.78rem. */ font-size: 0.78rem; /* LEITURA: color: cor do texto e referência de currentColor para ícones. Valor nesta regra: var(--accent-focus). */ color: var(--accent-focus); /* LEITURA: font-weight: peso visual das letras; valores maiores normalmente pedem traços mais grossos. Valor */ /* LEITURA: nesta regra: 600. */ font-weight: 600; } /* LEITURA: Seleciona .btn-finish-focus: os elementos cujas tags/classes/atributos correspondem ao seletor. As */ /* LEITURA: declarações abaixo definem sua aparência. */ .btn-finish-focus { /* LEITURA: background: atalho que configura o fundo; pode receber cor, imagem ou gradiente. Valor nesta regra: */ /* LEITURA: var(--accent-habits). */ background: var(--accent-habits); /* LEITURA: color: cor do texto e referência de currentColor para ícones. Valor nesta regra: #13271d. */ color: #13271d; /* LEITURA: border: atalho para espessura, estilo e cor da borda. Valor nesta regra: none. */ border: none; /* LEITURA: border-radius: arredondamento dos cantos; 50% pode gerar círculo em uma caixa quadrada. Valor nesta */ /* LEITURA: regra: var(--radius-sm). */ border-radius: var(--radius-sm); /* LEITURA: padding: espaço interno entre conteúdo e borda, com a mesma ordem topo/direita/baixo/esquerda quando */ /* LEITURA: há quatro valores. Valor nesta regra: 0.45rem 0.9rem. */ padding: 0.45rem 0.9rem; /* LEITURA: font-size: tamanho das letras; rem é relativo à fonte raiz, px é pixel CSS. Valor nesta regra: 0.8rem. */ font-size: 0.8rem; /* LEITURA: font-weight: peso visual das letras; valores maiores normalmente pedem traços mais grossos. Valor */ /* LEITURA: nesta regra: 800. */ font-weight: 800; /* LEITURA: cursor: cursor sugerido ao passar o mouse; pointer sinaliza ação e wait indica espera. Valor nesta */ /* LEITURA: regra: pointer. */ cursor: pointer; /* LEITURA: display: modelo de layout: none esconde o elemento; flex organiza em eixo; grid organiza em grade; */ /* LEITURA: block ocupa bloco. Valor nesta regra: flex. */ display: flex; /* LEITURA: align-items: alinhamento dos itens no eixo transversal do flexbox ou dentro das áreas de grid. Valor */ /* LEITURA: nesta regra: center. */ align-items: center; /* LEITURA: gap: espaçamento entre itens de flex/grid, sem exigir margem em cada filho. Valor nesta regra: */ /* LEITURA: 0.35rem. */ gap: 0.35rem; } /* Lista de Tarefas */ /* LEITURA: Seleciona .task-items-list: os elementos cujas tags/classes/atributos correspondem ao seletor. As */ /* LEITURA: declarações abaixo definem sua aparência. */ .task-items-list { /* LEITURA: display: modelo de layout: none esconde o elemento; flex organiza em eixo; grid organiza em grade; */ /* LEITURA: block ocupa bloco. Valor nesta regra: flex. */ display: flex; /* LEITURA: flex-direction: direção do eixo principal do flexbox; column empilha verticalmente e row organiza */ /* LEITURA: horizontalmente. Valor nesta regra: column. */ flex-direction: column; /* LEITURA: gap: espaçamento entre itens de flex/grid, sem exigir margem em cada filho. Valor nesta regra: */ /* LEITURA: 0.55rem. */ gap: 0.55rem; } /* LEITURA: Seleciona .task-card-item: cartão criado por renderTasks, com classes adicionais conforme conclusão. As */ /* LEITURA: declarações abaixo definem sua aparência. */ .task-card-item { /* LEITURA: display: modelo de layout: none esconde o elemento; flex organiza em eixo; grid organiza em grade; */ /* LEITURA: block ocupa bloco. Valor nesta regra: flex. */ display: flex; /* LEITURA: align-items: alinhamento dos itens no eixo transversal do flexbox ou dentro das áreas de grid. Valor */ /* LEITURA: nesta regra: center. */ align-items: center; /* LEITURA: gap: espaçamento entre itens de flex/grid, sem exigir margem em cada filho. Valor nesta regra: */ /* LEITURA: 0.75rem. */ gap: 0.75rem; /* LEITURA: background: atalho que configura o fundo; pode receber cor, imagem ou gradiente. Valor nesta regra: */ /* LEITURA: var(--bg-card-subtle). */ background: var(--bg-card-subtle); /* LEITURA: border: atalho para espessura, estilo e cor da borda. Valor nesta regra: 1px solid var(--border- */ /* LEITURA: subtle). */ border: 1px solid var(--border-subtle); /* LEITURA: border-radius: arredondamento dos cantos; 50% pode gerar círculo em uma caixa quadrada. Valor nesta */ /* LEITURA: regra: var(--radius-sm). */ border-radius: var(--radius-sm); /* LEITURA: padding: espaço interno entre conteúdo e borda, com a mesma ordem topo/direita/baixo/esquerda quando */ /* LEITURA: há quatro valores. Valor nesta regra: 0.8rem 0.95rem. */ padding: 0.8rem 0.95rem; /* LEITURA: transition: transição suave quando uma propriedade muda, inclusive por classe adicionada pelo */ /* LEITURA: JavaScript. Valor nesta regra: all var(--transition-fast). */ transition: all var(--transition-fast); /* LEITURA: cursor: cursor sugerido ao passar o mouse; pointer sinaliza ação e wait indica espera. Valor nesta */ /* LEITURA: regra: pointer. */ cursor: pointer; } /* LEITURA: Seleciona .task-card-item:hover: cartão criado por renderTasks, com classes adicionais conforme */ /* LEITURA: conclusão. vale quando o ponteiro está sobre o elemento. */ .task-card-item:hover { /* LEITURA: background: atalho que configura o fundo; pode receber cor, imagem ou gradiente. Valor nesta regra: */ /* LEITURA: var(--bg-hover). */ background: var(--bg-hover); /* LEITURA: border-color: cor das bordas sem alterar sua espessura. Valor nesta regra: rgba(255, 255, 255, 0.14). */ border-color: rgba(255, 255, 255, 0.14); } /* LEITURA: Seleciona .task-card-item.completed: cartão criado por renderTasks, com classes adicionais conforme */ /* LEITURA: conclusão. As declarações abaixo definem sua aparência. */ .task-card-item.completed { /* LEITURA: background: atalho que configura o fundo; pode receber cor, imagem ou gradiente. Valor nesta regra: */ /* LEITURA: rgba(134, 239, 172, 0.08). */ background: rgba(134, 239, 172, 0.08); /* LEITURA: border-color: cor das bordas sem alterar sua espessura. Valor nesta regra: rgba(134, 239, 172, 0.3). */ border-color: rgba(134, 239, 172, 0.3); } /* LEITURA: Seleciona .btn-check-task: os elementos cujas tags/classes/atributos correspondem ao seletor. As */ /* LEITURA: declarações abaixo definem sua aparência. */ .btn-check-task { /* LEITURA: width: largura; % depende do bloco de referência, vw da largura da tela e px usa pixels CSS. Valor */ /* LEITURA: nesta regra: 24px. */ width: 24px; /* LEITURA: height: altura; % depende da altura do bloco de referência, vh da tela e px usa pixels CSS. Valor */ /* LEITURA: nesta regra: 24px. */ height: 24px; /* LEITURA: border-radius: arredondamento dos cantos; 50% pode gerar círculo em uma caixa quadrada. Valor nesta */ /* LEITURA: regra: 7px. */ border-radius: 7px; /* LEITURA: border: atalho para espessura, estilo e cor da borda. Valor nesta regra: 1.5px solid var(--text- */ /* LEITURA: muted). */ border: 1.5px solid var(--text-muted); /* LEITURA: background: atalho que configura o fundo; pode receber cor, imagem ou gradiente. Valor nesta regra: */ /* LEITURA: transparent. */ background: transparent; /* LEITURA: display: modelo de layout: none esconde o elemento; flex organiza em eixo; grid organiza em grade; */ /* LEITURA: block ocupa bloco. Valor nesta regra: flex. */ display: flex; /* LEITURA: align-items: alinhamento dos itens no eixo transversal do flexbox ou dentro das áreas de grid. Valor */ /* LEITURA: nesta regra: center. */ align-items: center; /* LEITURA: justify-content: distribuição dos itens no eixo principal do flexbox ou alinhamento correspondente no */ /* LEITURA: grid. Valor nesta regra: center. */ justify-content: center; /* LEITURA: flex-shrink: quanto o item pode encolher quando falta espaço no contêiner flex. Valor nesta regra: 0. */ flex-shrink: 0; /* LEITURA: transition: transição suave quando uma propriedade muda, inclusive por classe adicionada pelo */ /* LEITURA: JavaScript. Valor nesta regra: all var(--transition-fast). */ transition: all var(--transition-fast); } /* LEITURA: Seleciona .task-card-item.completed .btn-check-task: cartão criado por renderTasks, com classes */ /* LEITURA: adicionais conforme conclusão. As declarações abaixo definem sua aparência. */ .task-card-item.completed .btn-check-task { /* LEITURA: background: atalho que configura o fundo; pode receber cor, imagem ou gradiente. Valor nesta regra: */ /* LEITURA: var(--accent-habits). */ background: var(--accent-habits); /* LEITURA: border-color: cor das bordas sem alterar sua espessura. Valor nesta regra: var(--accent-habits). */ border-color: var(--accent-habits); /* LEITURA: color: cor do texto e referência de currentColor para ícones. Valor nesta regra: #1e222b. */ color: #1e222b; } /* LEITURA: Seleciona .task-label-text: os elementos cujas tags/classes/atributos correspondem ao seletor. As */ /* LEITURA: declarações abaixo definem sua aparência. */ .task-label-text { /* LEITURA: flex: atalho para crescimento, encolhimento e tamanho base de um item dentro de flexbox. Valor nesta */ /* LEITURA: regra: 1. */ flex: 1; /* LEITURA: font-size: tamanho das letras; rem é relativo à fonte raiz, px é pixel CSS. Valor nesta regra: 0.9rem. */ font-size: 0.9rem; /* LEITURA: color: cor do texto e referência de currentColor para ícones. Valor nesta regra: var(--text-main). */ color: var(--text-main); /* LEITURA: transition: transição suave quando uma propriedade muda, inclusive por classe adicionada pelo */ /* LEITURA: JavaScript. Valor nesta regra: color var(--transition-fast). */ transition: color var(--transition-fast); } /* LEITURA: Seleciona .task-card-item.completed .task-label-text: cartão criado por renderTasks, com classes */ /* LEITURA: adicionais conforme conclusão. As declarações abaixo definem sua aparência. */ .task-card-item.completed .task-label-text { /* LEITURA: text-decoration: sublinhado e outros traços de decoração do texto. Valor nesta regra: line-through. */ text-decoration: line-through; /* LEITURA: color: cor do texto e referência de currentColor para ícones. Valor nesta regra: var(--text-muted). */ color: var(--text-muted); } /* LEITURA: Seleciona .btn-play-task: os elementos cujas tags/classes/atributos correspondem ao seletor. As */ /* LEITURA: declarações abaixo definem sua aparência. */ .btn-play-task { /* LEITURA: background: atalho que configura o fundo; pode receber cor, imagem ou gradiente. Valor nesta regra: */ /* LEITURA: rgba(165, 180, 252, 0.15). */ background: rgba(165, 180, 252, 0.15); /* LEITURA: border: atalho para espessura, estilo e cor da borda. Valor nesta regra: 1px solid rgba(165, 180, 252, */ /* LEITURA: 0.35). */ border: 1px solid rgba(165, 180, 252, 0.35); /* LEITURA: color: cor do texto e referência de currentColor para ícones. Valor nesta regra: var(--accent-focus). */ color: var(--accent-focus); /* LEITURA: border-radius: arredondamento dos cantos; 50% pode gerar círculo em uma caixa quadrada. Valor nesta */ /* LEITURA: regra: 6px. */ border-radius: 6px; /* LEITURA: padding: espaço interno entre conteúdo e borda, com a mesma ordem topo/direita/baixo/esquerda quando */ /* LEITURA: há quatro valores. Valor nesta regra: 0.25rem 0.6rem. */ padding: 0.25rem 0.6rem; /* LEITURA: font-size: tamanho das letras; rem é relativo à fonte raiz, px é pixel CSS. Valor nesta regra: */ /* LEITURA: 0.72rem. */ font-size: 0.72rem; /* LEITURA: font-weight: peso visual das letras; valores maiores normalmente pedem traços mais grossos. Valor */ /* LEITURA: nesta regra: 700. */ font-weight: 700; /* LEITURA: cursor: cursor sugerido ao passar o mouse; pointer sinaliza ação e wait indica espera. Valor nesta */ /* LEITURA: regra: pointer. */ cursor: pointer; /* LEITURA: transition: transição suave quando uma propriedade muda, inclusive por classe adicionada pelo */ /* LEITURA: JavaScript. Valor nesta regra: all var(--transition-fast). */ transition: all var(--transition-fast); } /* LEITURA: Seleciona .btn-play-task:hover: os elementos cujas tags/classes/atributos correspondem ao seletor. vale */ /* LEITURA: quando o ponteiro está sobre o elemento. */ .btn-play-task:hover { /* LEITURA: background: atalho que configura o fundo; pode receber cor, imagem ou gradiente. Valor nesta regra: */ /* LEITURA: var(--accent-focus). */ background: var(--accent-focus); /* LEITURA: color: cor do texto e referência de currentColor para ícones. Valor nesta regra: #1e222b. */ color: #1e222b; } /* LEITURA: Seleciona .btn-delete-item: os elementos cujas tags/classes/atributos correspondem ao seletor. As */ /* LEITURA: declarações abaixo definem sua aparência. */ .btn-delete-item { /* LEITURA: background: atalho que configura o fundo; pode receber cor, imagem ou gradiente. Valor nesta regra: */ /* LEITURA: none. */ background: none; /* LEITURA: border: atalho para espessura, estilo e cor da borda. Valor nesta regra: none. */ border: none; /* LEITURA: color: cor do texto e referência de currentColor para ícones. Valor nesta regra: var(--text-muted). */ color: var(--text-muted); /* LEITURA: font-size: tamanho das letras; rem é relativo à fonte raiz, px é pixel CSS. Valor nesta regra: 1.1rem. */ font-size: 1.1rem; /* LEITURA: cursor: cursor sugerido ao passar o mouse; pointer sinaliza ação e wait indica espera. Valor nesta */ /* LEITURA: regra: pointer. */ cursor: pointer; /* LEITURA: padding: espaço interno entre conteúdo e borda, com a mesma ordem topo/direita/baixo/esquerda quando */ /* LEITURA: há quatro valores. Valor nesta regra: 0 0.3rem. */ padding: 0 0.3rem; } /* Módulo 2: Cardápio de Dopamina */ /* LEITURA: Seleciona .dopamine-filter-nav: os elementos cujas tags/classes/atributos correspondem ao seletor. As */ /* LEITURA: declarações abaixo definem sua aparência. */ .dopamine-filter-nav { /* LEITURA: display: modelo de layout: none esconde o elemento; flex organiza em eixo; grid organiza em grade; */ /* LEITURA: block ocupa bloco. Valor nesta regra: flex. */ display: flex; /* LEITURA: gap: espaçamento entre itens de flex/grid, sem exigir margem em cada filho. Valor nesta regra: 0.4rem. */ gap: 0.4rem; /* LEITURA: background: atalho que configura o fundo; pode receber cor, imagem ou gradiente. Valor nesta regra: */ /* LEITURA: var(--bg-card-subtle). */ background: var(--bg-card-subtle); /* LEITURA: padding: espaço interno entre conteúdo e borda, com a mesma ordem topo/direita/baixo/esquerda quando */ /* LEITURA: há quatro valores. Valor nesta regra: 0.35rem. */ padding: 0.35rem; /* LEITURA: border-radius: arredondamento dos cantos; 50% pode gerar círculo em uma caixa quadrada. Valor nesta */ /* LEITURA: regra: var(--radius-sm). */ border-radius: var(--radius-sm); /* LEITURA: margin-bottom: espaço externo abaixo do elemento. Valor nesta regra: 1rem. */ margin-bottom: 1rem; } /* LEITURA: Seleciona .btn-filter-dopa: os elementos cujas tags/classes/atributos correspondem ao seletor. As */ /* LEITURA: declarações abaixo definem sua aparência. */ .btn-filter-dopa { /* LEITURA: flex: atalho para crescimento, encolhimento e tamanho base de um item dentro de flexbox. Valor nesta */ /* LEITURA: regra: 1. */ flex: 1; /* LEITURA: background: atalho que configura o fundo; pode receber cor, imagem ou gradiente. Valor nesta regra: */ /* LEITURA: transparent. */ background: transparent; /* LEITURA: border: atalho para espessura, estilo e cor da borda. Valor nesta regra: none. */ border: none; /* LEITURA: border-radius: arredondamento dos cantos; 50% pode gerar círculo em uma caixa quadrada. Valor nesta */ /* LEITURA: regra: 8px. */ border-radius: 8px; /* LEITURA: padding: espaço interno entre conteúdo e borda, com a mesma ordem topo/direita/baixo/esquerda quando */ /* LEITURA: há quatro valores. Valor nesta regra: 0.55rem 0.35rem. */ padding: 0.55rem 0.35rem; /* LEITURA: color: cor do texto e referência de currentColor para ícones. Valor nesta regra: var(--text- */ /* LEITURA: secondary). */ color: var(--text-secondary); /* LEITURA: font-size: tamanho das letras; rem é relativo à fonte raiz, px é pixel CSS. Valor nesta regra: */ /* LEITURA: 0.76rem. */ font-size: 0.76rem; /* LEITURA: font-weight: peso visual das letras; valores maiores normalmente pedem traços mais grossos. Valor */ /* LEITURA: nesta regra: 700. */ font-weight: 700; /* LEITURA: cursor: cursor sugerido ao passar o mouse; pointer sinaliza ação e wait indica espera. Valor nesta */ /* LEITURA: regra: pointer. */ cursor: pointer; /* LEITURA: transition: transição suave quando uma propriedade muda, inclusive por classe adicionada pelo */ /* LEITURA: JavaScript. Valor nesta regra: all var(--transition-fast). */ transition: all var(--transition-fast); } /* LEITURA: Seleciona .btn-filter-dopa.active: os elementos cujas tags/classes/atributos correspondem ao seletor. a */ /* LEITURA: classe active é um estado atribuído pelo JavaScript, diferente da pseudoclasse :active. */ .btn-filter-dopa.active { /* LEITURA: background: atalho que configura o fundo; pode receber cor, imagem ou gradiente. Valor nesta regra: */ /* LEITURA: var(--accent-dopamine). */ background: var(--accent-dopamine); /* LEITURA: color: cor do texto e referência de currentColor para ícones. Valor nesta regra: #272a08. */ color: #272a08; /* LEITURA: box-shadow: sombra: deslocamentos horizontal/vertical, desfoque, espalhamento opcional e cor; não */ /* LEITURA: aumenta a caixa de layout. Valor nesta regra: 0 2px 8px var(--accent-dopamine-glow). */ box-shadow: 0 2px 8px var(--accent-dopamine-glow); } /* LEITURA: Seleciona .btn-unlock-brain: os elementos cujas tags/classes/atributos correspondem ao seletor. As */ /* LEITURA: declarações abaixo definem sua aparência. */ .btn-unlock-brain { /* LEITURA: width: largura; % depende do bloco de referência, vw da largura da tela e px usa pixels CSS. Valor */ /* LEITURA: nesta regra: 100%. */ width: 100%; /* LEITURA: background: atalho que configura o fundo; pode receber cor, imagem ou gradiente. Valor nesta regra: */ /* LEITURA: linear-gradient(135deg, var(--accent-dopamine) 0%, #eab308 100%). */ background: linear-gradient(135deg, var(--accent-dopamine) 0%, #eab308 100%); /* LEITURA: color: cor do texto e referência de currentColor para ícones. Valor nesta regra: #262305. */ color: #262305; /* LEITURA: border: atalho para espessura, estilo e cor da borda. Valor nesta regra: none. */ border: none; /* LEITURA: border-radius: arredondamento dos cantos; 50% pode gerar círculo em uma caixa quadrada. Valor nesta */ /* LEITURA: regra: var(--radius-md). */ border-radius: var(--radius-md); /* LEITURA: padding: espaço interno entre conteúdo e borda, com a mesma ordem topo/direita/baixo/esquerda quando */ /* LEITURA: há quatro valores. Valor nesta regra: 0.95rem. */ padding: 0.95rem; /* LEITURA: font-family: lista de fontes em ordem de preferência; o navegador usa a próxima se a anterior não */ /* LEITURA: estiver disponível. Valor nesta regra: var(--font-sans). */ font-family: var(--font-sans); /* LEITURA: font-size: tamanho das letras; rem é relativo à fonte raiz, px é pixel CSS. Valor nesta regra: */ /* LEITURA: 0.95rem. */ font-size: 0.95rem; /* LEITURA: font-weight: peso visual das letras; valores maiores normalmente pedem traços mais grossos. Valor */ /* LEITURA: nesta regra: 800. */ font-weight: 800; /* LEITURA: cursor: cursor sugerido ao passar o mouse; pointer sinaliza ação e wait indica espera. Valor nesta */ /* LEITURA: regra: pointer. */ cursor: pointer; /* LEITURA: display: modelo de layout: none esconde o elemento; flex organiza em eixo; grid organiza em grade; */ /* LEITURA: block ocupa bloco. Valor nesta regra: flex. */ display: flex; /* LEITURA: align-items: alinhamento dos itens no eixo transversal do flexbox ou dentro das áreas de grid. Valor */ /* LEITURA: nesta regra: center. */ align-items: center; /* LEITURA: justify-content: distribuição dos itens no eixo principal do flexbox ou alinhamento correspondente no */ /* LEITURA: grid. Valor nesta regra: center. */ justify-content: center; /* LEITURA: gap: espaçamento entre itens de flex/grid, sem exigir margem em cada filho. Valor nesta regra: */ /* LEITURA: 0.55rem. */ gap: 0.55rem; /* LEITURA: margin-bottom: espaço externo abaixo do elemento. Valor nesta regra: 1.1rem. */ margin-bottom: 1.1rem; /* LEITURA: box-shadow: sombra: deslocamentos horizontal/vertical, desfoque, espalhamento opcional e cor; não */ /* LEITURA: aumenta a caixa de layout. Valor nesta regra: 0 4px 18px var(--accent-dopamine-glow). */ box-shadow: 0 4px 18px var(--accent-dopamine-glow); /* LEITURA: transition: transição suave quando uma propriedade muda, inclusive por classe adicionada pelo */ /* LEITURA: JavaScript. Valor nesta regra: all var(--transition-fast). */ transition: all var(--transition-fast); } /* LEITURA: Seleciona .btn-unlock-brain:hover: os elementos cujas tags/classes/atributos correspondem ao seletor. */ /* LEITURA: vale quando o ponteiro está sobre o elemento. */ .btn-unlock-brain:hover { /* LEITURA: transform: transformação visual como deslocar, girar ou escalar; não reorganiza automaticamente os */ /* LEITURA: vizinhos no fluxo. Valor nesta regra: translateY(-2px). */ transform: translateY(-2px); } /* LEITURA: Seleciona .dopamine-cards-grid: os elementos cujas tags/classes/atributos correspondem ao seletor. As */ /* LEITURA: declarações abaixo definem sua aparência. */ .dopamine-cards-grid { /* LEITURA: display: modelo de layout: none esconde o elemento; flex organiza em eixo; grid organiza em grade; */ /* LEITURA: block ocupa bloco. Valor nesta regra: flex. */ display: flex; /* LEITURA: flex-direction: direção do eixo principal do flexbox; column empilha verticalmente e row organiza */ /* LEITURA: horizontalmente. Valor nesta regra: column. */ flex-direction: column; /* LEITURA: gap: espaçamento entre itens de flex/grid, sem exigir margem em cada filho. Valor nesta regra: 0.6rem. */ gap: 0.6rem; } /* LEITURA: Seleciona .dopamine-item-row: linha de recompensa criada por renderDopamine. As declarações abaixo */ /* LEITURA: definem sua aparência. */ .dopamine-item-row { /* LEITURA: display: modelo de layout: none esconde o elemento; flex organiza em eixo; grid organiza em grade; */ /* LEITURA: block ocupa bloco. Valor nesta regra: flex. */ display: flex; /* LEITURA: align-items: alinhamento dos itens no eixo transversal do flexbox ou dentro das áreas de grid. Valor */ /* LEITURA: nesta regra: center. */ align-items: center; /* LEITURA: justify-content: distribuição dos itens no eixo principal do flexbox ou alinhamento correspondente no */ /* LEITURA: grid. Valor nesta regra: space-between. */ justify-content: space-between; /* LEITURA: background: atalho que configura o fundo; pode receber cor, imagem ou gradiente. Valor nesta regra: */ /* LEITURA: var(--bg-card-subtle). */ background: var(--bg-card-subtle); /* LEITURA: border: atalho para espessura, estilo e cor da borda. Valor nesta regra: 1px solid var(--border- */ /* LEITURA: subtle). */ border: 1px solid var(--border-subtle); /* LEITURA: border-radius: arredondamento dos cantos; 50% pode gerar círculo em uma caixa quadrada. Valor nesta */ /* LEITURA: regra: var(--radius-sm). */ border-radius: var(--radius-sm); /* LEITURA: padding: espaço interno entre conteúdo e borda, com a mesma ordem topo/direita/baixo/esquerda quando */ /* LEITURA: há quatro valores. Valor nesta regra: 0.85rem 1rem. */ padding: 0.85rem 1rem; /* LEITURA: transition: transição suave quando uma propriedade muda, inclusive por classe adicionada pelo */ /* LEITURA: JavaScript. Valor nesta regra: all var(--transition-fast). */ transition: all var(--transition-fast); } /* LEITURA: Seleciona .dopamine-item-row:hover: linha de recompensa criada por renderDopamine. vale quando o */ /* LEITURA: ponteiro está sobre o elemento. */ .dopamine-item-row:hover { /* LEITURA: border-color: cor das bordas sem alterar sua espessura. Valor nesta regra: rgba(253, 224, 71, 0.35). */ border-color: rgba(253, 224, 71, 0.35); /* LEITURA: transform: transformação visual como deslocar, girar ou escalar; não reorganiza automaticamente os */ /* LEITURA: vizinhos no fluxo. Valor nesta regra: translateX(3px). */ transform: translateX(3px); } /* LEITURA: Seleciona .dopamine-info: os elementos cujas tags/classes/atributos correspondem ao seletor. As */ /* LEITURA: declarações abaixo definem sua aparência. */ .dopamine-info { /* LEITURA: display: modelo de layout: none esconde o elemento; flex organiza em eixo; grid organiza em grade; */ /* LEITURA: block ocupa bloco. Valor nesta regra: flex. */ display: flex; /* LEITURA: align-items: alinhamento dos itens no eixo transversal do flexbox ou dentro das áreas de grid. Valor */ /* LEITURA: nesta regra: center. */ align-items: center; /* LEITURA: gap: espaçamento entre itens de flex/grid, sem exigir margem em cada filho. Valor nesta regra: 0.7rem. */ gap: 0.7rem; /* LEITURA: font-size: tamanho das letras; rem é relativo à fonte raiz, px é pixel CSS. Valor nesta regra: */ /* LEITURA: 0.88rem. */ font-size: 0.88rem; /* LEITURA: color: cor do texto e referência de currentColor para ícones. Valor nesta regra: var(--text-main). */ color: var(--text-main); } /* LEITURA: Seleciona .btn-claim-dopa: os elementos cujas tags/classes/atributos correspondem ao seletor. As */ /* LEITURA: declarações abaixo definem sua aparência. */ .btn-claim-dopa { /* LEITURA: background: atalho que configura o fundo; pode receber cor, imagem ou gradiente. Valor nesta regra: */ /* LEITURA: rgba(253, 224, 71, 0.15). */ background: rgba(253, 224, 71, 0.15); /* LEITURA: border: atalho para espessura, estilo e cor da borda. Valor nesta regra: 1px solid rgba(253, 224, 71, */ /* LEITURA: 0.35). */ border: 1px solid rgba(253, 224, 71, 0.35); /* LEITURA: color: cor do texto e referência de currentColor para ícones. Valor nesta regra: #fef08a. */ color: #fef08a; /* LEITURA: border-radius: arredondamento dos cantos; 50% pode gerar círculo em uma caixa quadrada. Valor nesta */ /* LEITURA: regra: var(--radius-full). */ border-radius: var(--radius-full); /* LEITURA: padding: espaço interno entre conteúdo e borda, com a mesma ordem topo/direita/baixo/esquerda quando */ /* LEITURA: há quatro valores. Valor nesta regra: 0.35rem 0.8rem. */ padding: 0.35rem 0.8rem; /* LEITURA: font-size: tamanho das letras; rem é relativo à fonte raiz, px é pixel CSS. Valor nesta regra: */ /* LEITURA: 0.75rem. */ font-size: 0.75rem; /* LEITURA: font-weight: peso visual das letras; valores maiores normalmente pedem traços mais grossos. Valor */ /* LEITURA: nesta regra: 700. */ font-weight: 700; /* LEITURA: cursor: cursor sugerido ao passar o mouse; pointer sinaliza ação e wait indica espera. Valor nesta */ /* LEITURA: regra: pointer. */ cursor: pointer; /* LEITURA: transition: transição suave quando uma propriedade muda, inclusive por classe adicionada pelo */ /* LEITURA: JavaScript. Valor nesta regra: all var(--transition-fast). */ transition: all var(--transition-fast); } /* Módulo 3: Autocuidado (Clean Slate) */ /* LEITURA: Seleciona .care-progress-card: os elementos cujas tags/classes/atributos correspondem ao seletor. As */ /* LEITURA: declarações abaixo definem sua aparência. */ .care-progress-card { /* LEITURA: background: atalho que configura o fundo; pode receber cor, imagem ou gradiente. Valor nesta regra: */ /* LEITURA: linear-gradient(135deg, rgba(134, 239, 172, 0.12) 0%, rgba(39, 44, 56, 0.95) 100%). */ background: linear-gradient(135deg, rgba(134, 239, 172, 0.12) 0%, rgba(39, 44, 56, 0.95) 100%); /* LEITURA: border: atalho para espessura, estilo e cor da borda. Valor nesta regra: 1.5px solid rgba(134, 239, */ /* LEITURA: 172, 0.35). */ border: 1.5px solid rgba(134, 239, 172, 0.35); /* LEITURA: border-radius: arredondamento dos cantos; 50% pode gerar círculo em uma caixa quadrada. Valor nesta */ /* LEITURA: regra: var(--radius-md). */ border-radius: var(--radius-md); /* LEITURA: padding: espaço interno entre conteúdo e borda, com a mesma ordem topo/direita/baixo/esquerda quando */ /* LEITURA: há quatro valores. Valor nesta regra: 1.25rem. */ padding: 1.25rem; } /* LEITURA: Seleciona .care-progress-header: os elementos cujas tags/classes/atributos correspondem ao seletor. As */ /* LEITURA: declarações abaixo definem sua aparência. */ .care-progress-header { /* LEITURA: display: modelo de layout: none esconde o elemento; flex organiza em eixo; grid organiza em grade; */ /* LEITURA: block ocupa bloco. Valor nesta regra: flex. */ display: flex; /* LEITURA: align-items: alinhamento dos itens no eixo transversal do flexbox ou dentro das áreas de grid. Valor */ /* LEITURA: nesta regra: center. */ align-items: center; /* LEITURA: justify-content: distribuição dos itens no eixo principal do flexbox ou alinhamento correspondente no */ /* LEITURA: grid. Valor nesta regra: space-between. */ justify-content: space-between; /* LEITURA: margin-bottom: espaço externo abaixo do elemento. Valor nesta regra: 0.6rem. */ margin-bottom: 0.6rem; } /* LEITURA: Seleciona .care-progress-title: os elementos cujas tags/classes/atributos correspondem ao seletor. As */ /* LEITURA: declarações abaixo definem sua aparência. */ .care-progress-title { /* LEITURA: font-size: tamanho das letras; rem é relativo à fonte raiz, px é pixel CSS. Valor nesta regra: */ /* LEITURA: 0.92rem. */ font-size: 0.92rem; /* LEITURA: font-weight: peso visual das letras; valores maiores normalmente pedem traços mais grossos. Valor */ /* LEITURA: nesta regra: 700. */ font-weight: 700; /* LEITURA: color: cor do texto e referência de currentColor para ícones. Valor nesta regra: #bbf7d0. */ color: #bbf7d0; } /* LEITURA: Seleciona .care-progress-percent: os elementos cujas tags/classes/atributos correspondem ao seletor. As */ /* LEITURA: declarações abaixo definem sua aparência. */ .care-progress-percent { /* LEITURA: font-family: lista de fontes em ordem de preferência; o navegador usa a próxima se a anterior não */ /* LEITURA: estiver disponível. Valor nesta regra: var(--font-display). */ font-family: var(--font-display); /* LEITURA: font-size: tamanho das letras; rem é relativo à fonte raiz, px é pixel CSS. Valor nesta regra: */ /* LEITURA: 1.35rem. */ font-size: 1.35rem; /* LEITURA: font-weight: peso visual das letras; valores maiores normalmente pedem traços mais grossos. Valor */ /* LEITURA: nesta regra: 800. */ font-weight: 800; /* LEITURA: color: cor do texto e referência de currentColor para ícones. Valor nesta regra: var(--accent-habits). */ color: var(--accent-habits); } /* LEITURA: Seleciona .care-track: os elementos cujas tags/classes/atributos correspondem ao seletor. As declarações */ /* LEITURA: abaixo definem sua aparência. */ .care-track { /* LEITURA: width: largura; % depende do bloco de referência, vw da largura da tela e px usa pixels CSS. Valor */ /* LEITURA: nesta regra: 100%. */ width: 100%; /* LEITURA: height: altura; % depende da altura do bloco de referência, vh da tela e px usa pixels CSS. Valor */ /* LEITURA: nesta regra: 10px. */ height: 10px; /* LEITURA: background: atalho que configura o fundo; pode receber cor, imagem ou gradiente. Valor nesta regra: */ /* LEITURA: rgba(0, 0, 0, 0.4). */ background: rgba(0, 0, 0, 0.4); /* LEITURA: border-radius: arredondamento dos cantos; 50% pode gerar círculo em uma caixa quadrada. Valor nesta */ /* LEITURA: regra: var(--radius-full). */ border-radius: var(--radius-full); /* LEITURA: overflow: tratamento de conteúdo que ultrapassa a caixa; hidden corta e auto oferece rolagem quando */ /* LEITURA: necessária. Valor nesta regra: hidden. */ overflow: hidden; } /* LEITURA: Seleciona .care-fill: os elementos cujas tags/classes/atributos correspondem ao seletor. As declarações */ /* LEITURA: abaixo definem sua aparência. */ .care-fill { /* LEITURA: height: altura; % depende da altura do bloco de referência, vh da tela e px usa pixels CSS. Valor */ /* LEITURA: nesta regra: 100%. */ height: 100%; /* LEITURA: width: largura; % depende do bloco de referência, vw da largura da tela e px usa pixels CSS. Valor */ /* LEITURA: nesta regra: 0%. */ width: 0%; /* LEITURA: background: atalho que configura o fundo; pode receber cor, imagem ou gradiente. Valor nesta regra: */ /* LEITURA: linear-gradient(90deg, #4ade80, #86efac). */ background: linear-gradient(90deg, #4ade80, #86efac); /* LEITURA: border-radius: arredondamento dos cantos; 50% pode gerar círculo em uma caixa quadrada. Valor nesta */ /* LEITURA: regra: var(--radius-full). */ border-radius: var(--radius-full); /* LEITURA: transition: transição suave quando uma propriedade muda, inclusive por classe adicionada pelo */ /* LEITURA: JavaScript. Valor nesta regra: width 0.4s ease. */ transition: width 0.4s ease; } /* LEITURA: Seleciona .habits-interactive-grid: os elementos cujas tags/classes/atributos correspondem ao seletor. */ /* LEITURA: As declarações abaixo definem sua aparência. */ .habits-interactive-grid { /* LEITURA: display: modelo de layout: none esconde o elemento; flex organiza em eixo; grid organiza em grade; */ /* LEITURA: block ocupa bloco. Valor nesta regra: flex. */ display: flex; /* LEITURA: flex-direction: direção do eixo principal do flexbox; column empilha verticalmente e row organiza */ /* LEITURA: horizontalmente. Valor nesta regra: column. */ flex-direction: column; /* LEITURA: gap: espaçamento entre itens de flex/grid, sem exigir margem em cada filho. Valor nesta regra: */ /* LEITURA: 0.65rem. */ gap: 0.65rem; } /* LEITURA: Seleciona .habit-care-row: linha de hábito criada por renderCare; checked indica hábito marcado. As */ /* LEITURA: declarações abaixo definem sua aparência. */ .habit-care-row { /* LEITURA: display: modelo de layout: none esconde o elemento; flex organiza em eixo; grid organiza em grade; */ /* LEITURA: block ocupa bloco. Valor nesta regra: flex. */ display: flex; /* LEITURA: align-items: alinhamento dos itens no eixo transversal do flexbox ou dentro das áreas de grid. Valor */ /* LEITURA: nesta regra: center. */ align-items: center; /* LEITURA: justify-content: distribuição dos itens no eixo principal do flexbox ou alinhamento correspondente no */ /* LEITURA: grid. Valor nesta regra: space-between. */ justify-content: space-between; /* LEITURA: background: atalho que configura o fundo; pode receber cor, imagem ou gradiente. Valor nesta regra: */ /* LEITURA: var(--bg-card-subtle). */ background: var(--bg-card-subtle); /* LEITURA: border: atalho para espessura, estilo e cor da borda. Valor nesta regra: 1px solid var(--border- */ /* LEITURA: subtle). */ border: 1px solid var(--border-subtle); /* LEITURA: border-radius: arredondamento dos cantos; 50% pode gerar círculo em uma caixa quadrada. Valor nesta */ /* LEITURA: regra: var(--radius-sm). */ border-radius: var(--radius-sm); /* LEITURA: padding: espaço interno entre conteúdo e borda, com a mesma ordem topo/direita/baixo/esquerda quando */ /* LEITURA: há quatro valores. Valor nesta regra: 0.85rem 1rem. */ padding: 0.85rem 1rem; /* LEITURA: cursor: cursor sugerido ao passar o mouse; pointer sinaliza ação e wait indica espera. Valor nesta */ /* LEITURA: regra: pointer. */ cursor: pointer; /* LEITURA: transition: transição suave quando uma propriedade muda, inclusive por classe adicionada pelo */ /* LEITURA: JavaScript. Valor nesta regra: all var(--transition-fast). */ transition: all var(--transition-fast); } /* LEITURA: Seleciona .habit-care-row.checked: linha de hábito criada por renderCare; checked indica hábito marcado. */ /* LEITURA: As declarações abaixo definem sua aparência. */ .habit-care-row.checked { /* LEITURA: background: atalho que configura o fundo; pode receber cor, imagem ou gradiente. Valor nesta regra: */ /* LEITURA: rgba(134, 239, 172, 0.08). */ background: rgba(134, 239, 172, 0.08); /* LEITURA: border-color: cor das bordas sem alterar sua espessura. Valor nesta regra: rgba(134, 239, 172, 0.35). */ border-color: rgba(134, 239, 172, 0.35); } /* LEITURA: Seleciona .habit-care-left: os elementos cujas tags/classes/atributos correspondem ao seletor. As */ /* LEITURA: declarações abaixo definem sua aparência. */ .habit-care-left { /* LEITURA: display: modelo de layout: none esconde o elemento; flex organiza em eixo; grid organiza em grade; */ /* LEITURA: block ocupa bloco. Valor nesta regra: flex. */ display: flex; /* LEITURA: align-items: alinhamento dos itens no eixo transversal do flexbox ou dentro das áreas de grid. Valor */ /* LEITURA: nesta regra: center. */ align-items: center; /* LEITURA: gap: espaçamento entre itens de flex/grid, sem exigir margem em cada filho. Valor nesta regra: */ /* LEITURA: 0.75rem. */ gap: 0.75rem; /* LEITURA: font-size: tamanho das letras; rem é relativo à fonte raiz, px é pixel CSS. Valor nesta regra: */ /* LEITURA: 0.92rem. */ font-size: 0.92rem; /* LEITURA: color: cor do texto e referência de currentColor para ícones. Valor nesta regra: var(--text-main). */ color: var(--text-main); } /* LEITURA: Seleciona .habit-checkbox-circle: os elementos cujas tags/classes/atributos correspondem ao seletor. As */ /* LEITURA: declarações abaixo definem sua aparência. */ .habit-checkbox-circle { /* LEITURA: width: largura; % depende do bloco de referência, vw da largura da tela e px usa pixels CSS. Valor */ /* LEITURA: nesta regra: 24px. */ width: 24px; /* LEITURA: height: altura; % depende da altura do bloco de referência, vh da tela e px usa pixels CSS. Valor */ /* LEITURA: nesta regra: 24px. */ height: 24px; /* LEITURA: border-radius: arredondamento dos cantos; 50% pode gerar círculo em uma caixa quadrada. Valor nesta */ /* LEITURA: regra: 50%. */ border-radius: 50%; /* LEITURA: border: atalho para espessura, estilo e cor da borda. Valor nesta regra: 1.5px solid var(--text- */ /* LEITURA: muted). */ border: 1.5px solid var(--text-muted); /* LEITURA: display: modelo de layout: none esconde o elemento; flex organiza em eixo; grid organiza em grade; */ /* LEITURA: block ocupa bloco. Valor nesta regra: flex. */ display: flex; /* LEITURA: align-items: alinhamento dos itens no eixo transversal do flexbox ou dentro das áreas de grid. Valor */ /* LEITURA: nesta regra: center. */ align-items: center; /* LEITURA: justify-content: distribuição dos itens no eixo principal do flexbox ou alinhamento correspondente no */ /* LEITURA: grid. Valor nesta regra: center. */ justify-content: center; /* LEITURA: transition: transição suave quando uma propriedade muda, inclusive por classe adicionada pelo */ /* LEITURA: JavaScript. Valor nesta regra: all var(--transition-fast). */ transition: all var(--transition-fast); } /* LEITURA: Seleciona .habit-care-row.checked .habit-checkbox-circle: linha de hábito criada por renderCare; checked */ /* LEITURA: indica hábito marcado. As declarações abaixo definem sua aparência. */ .habit-care-row.checked .habit-checkbox-circle { /* LEITURA: background: atalho que configura o fundo; pode receber cor, imagem ou gradiente. Valor nesta regra: */ /* LEITURA: var(--accent-habits). */ background: var(--accent-habits); /* LEITURA: border-color: cor das bordas sem alterar sua espessura. Valor nesta regra: var(--accent-habits). */ border-color: var(--accent-habits); /* LEITURA: color: cor do texto e referência de currentColor para ícones. Valor nesta regra: #1e222b. */ color: #1e222b; } /* LEITURA: Seleciona .water-cups-row: os elementos cujas tags/classes/atributos correspondem ao seletor. As */ /* LEITURA: declarações abaixo definem sua aparência. */ .water-cups-row { /* LEITURA: display: modelo de layout: none esconde o elemento; flex organiza em eixo; grid organiza em grade; */ /* LEITURA: block ocupa bloco. Valor nesta regra: flex. */ display: flex; /* LEITURA: align-items: alinhamento dos itens no eixo transversal do flexbox ou dentro das áreas de grid. Valor */ /* LEITURA: nesta regra: center. */ align-items: center; /* LEITURA: gap: espaçamento entre itens de flex/grid, sem exigir margem em cada filho. Valor nesta regra: */ /* LEITURA: 0.35rem. */ gap: 0.35rem; /* LEITURA: margin-top: espaço externo acima do elemento. Valor nesta regra: 0.5rem. */ margin-top: 0.5rem; /* LEITURA: padding-left: espaço interno à esquerda. Valor nesta regra: 2.4rem. */ padding-left: 2.4rem; } /* LEITURA: Seleciona .cup-chip: copo de água criado por renderCare; filled marca até a quantidade atual. As */ /* LEITURA: declarações abaixo definem sua aparência. */ .cup-chip { /* LEITURA: width: largura; % depende do bloco de referência, vw da largura da tela e px usa pixels CSS. Valor */ /* LEITURA: nesta regra: 28px. */ width: 28px; /* LEITURA: height: altura; % depende da altura do bloco de referência, vh da tela e px usa pixels CSS. Valor */ /* LEITURA: nesta regra: 28px. */ height: 28px; /* LEITURA: border-radius: arredondamento dos cantos; 50% pode gerar círculo em uma caixa quadrada. Valor nesta */ /* LEITURA: regra: 6px. */ border-radius: 6px; /* LEITURA: background: atalho que configura o fundo; pode receber cor, imagem ou gradiente. Valor nesta regra: */ /* LEITURA: rgba(255, 255, 255, 0.05). */ background: rgba(255, 255, 255, 0.05); /* LEITURA: border: atalho para espessura, estilo e cor da borda. Valor nesta regra: 1px solid var(--border- */ /* LEITURA: subtle). */ border: 1px solid var(--border-subtle); /* LEITURA: display: modelo de layout: none esconde o elemento; flex organiza em eixo; grid organiza em grade; */ /* LEITURA: block ocupa bloco. Valor nesta regra: flex. */ display: flex; /* LEITURA: align-items: alinhamento dos itens no eixo transversal do flexbox ou dentro das áreas de grid. Valor */ /* LEITURA: nesta regra: center. */ align-items: center; /* LEITURA: justify-content: distribuição dos itens no eixo principal do flexbox ou alinhamento correspondente no */ /* LEITURA: grid. Valor nesta regra: center. */ justify-content: center; /* LEITURA: font-size: tamanho das letras; rem é relativo à fonte raiz, px é pixel CSS. Valor nesta regra: */ /* LEITURA: 0.75rem. */ font-size: 0.75rem; /* LEITURA: cursor: cursor sugerido ao passar o mouse; pointer sinaliza ação e wait indica espera. Valor nesta */ /* LEITURA: regra: pointer. */ cursor: pointer; /* LEITURA: transition: transição suave quando uma propriedade muda, inclusive por classe adicionada pelo */ /* LEITURA: JavaScript. Valor nesta regra: all var(--transition-fast). */ transition: all var(--transition-fast); } /* LEITURA: Seleciona .cup-chip.filled: copo de água criado por renderCare; filled marca até a quantidade atual. As */ /* LEITURA: declarações abaixo definem sua aparência. */ .cup-chip.filled { /* LEITURA: background: atalho que configura o fundo; pode receber cor, imagem ou gradiente. Valor nesta regra: */ /* LEITURA: #38bdf8. */ background: #38bdf8; /* LEITURA: color: cor do texto e referência de currentColor para ícones. Valor nesta regra: #0b1a2c. */ color: #0b1a2c; /* LEITURA: border-color: cor das bordas sem alterar sua espessura. Valor nesta regra: #38bdf8. */ border-color: #38bdf8; /* LEITURA: font-weight: peso visual das letras; valores maiores normalmente pedem traços mais grossos. Valor */ /* LEITURA: nesta regra: bold. */ font-weight: bold; } /* Módulo 4: Paralisia Total Overlay */ /* LEITURA: Seleciona .emergency-overlay: painel aberto/fechado por openEmergencyMode e closeEmergencyMode. As */ /* LEITURA: declarações abaixo definem sua aparência. */ .emergency-overlay { /* LEITURA: position: referência de posicionamento: relative mantém o espaço no fluxo; absolute sai do fluxo; */ /* LEITURA: fixed fica preso à janela. Valor nesta regra: fixed. */ position: fixed; /* LEITURA: top: deslocamento da borda superior quando o elemento é posicionado. Valor nesta regra: 0. */ top: 0; /* LEITURA: left: deslocamento da borda esquerda quando o elemento é posicionado. Valor nesta regra: 0. */ left: 0; /* LEITURA: width: largura; % depende do bloco de referência, vw da largura da tela e px usa pixels CSS. Valor */ /* LEITURA: nesta regra: 100vw. */ width: 100vw; /* LEITURA: height: altura; % depende da altura do bloco de referência, vh da tela e px usa pixels CSS. Valor */ /* LEITURA: nesta regra: 100vh. */ height: 100vh; /* LEITURA: background: atalho que configura o fundo; pode receber cor, imagem ou gradiente. Valor nesta regra: */ /* LEITURA: #15181F. */ background: #15181F; /* LEITURA: z-index: ordem de sobreposição dentro do contexto de empilhamento; não é prioridade global absoluta */ /* LEITURA: entre todos os elementos. Valor nesta regra: 1000. */ z-index: 1000; /* LEITURA: display: modelo de layout: none esconde o elemento; flex organiza em eixo; grid organiza em grade; */ /* LEITURA: block ocupa bloco. Valor nesta regra: none. */ display: none; /* LEITURA: flex-direction: direção do eixo principal do flexbox; column empilha verticalmente e row organiza */ /* LEITURA: horizontalmente. Valor nesta regra: column. */ flex-direction: column; /* LEITURA: align-items: alinhamento dos itens no eixo transversal do flexbox ou dentro das áreas de grid. Valor */ /* LEITURA: nesta regra: center. */ align-items: center; /* LEITURA: justify-content: distribuição dos itens no eixo principal do flexbox ou alinhamento correspondente no */ /* LEITURA: grid. Valor nesta regra: center. */ justify-content: center; /* LEITURA: padding: espaço interno entre conteúdo e borda, com a mesma ordem topo/direita/baixo/esquerda quando */ /* LEITURA: há quatro valores. Valor nesta regra: 2rem. */ padding: 2rem; /* LEITURA: text-align: alinhamento horizontal do texto dentro da caixa. Valor nesta regra: center. */ text-align: center; /* LEITURA: animation: animação nomeada em @keyframes, com duração, curva, repetição e demais opções indicadas. */ /* LEITURA: Valor nesta regra: fadeIn 0.3s ease. */ animation: fadeIn 0.3s ease; } /* LEITURA: Seleciona .emergency-overlay.active: painel aberto/fechado por openEmergencyMode e closeEmergencyMode. a */ /* LEITURA: classe active é um estado atribuído pelo JavaScript, diferente da pseudoclasse :active. */ .emergency-overlay.active { /* LEITURA: display: modelo de layout: none esconde o elemento; flex organiza em eixo; grid organiza em grade; */ /* LEITURA: block ocupa bloco. Valor nesta regra: flex. */ display: flex; } /* LEITURA: Seleciona .emergency-mascot-img: os elementos cujas tags/classes/atributos correspondem ao seletor. As */ /* LEITURA: declarações abaixo definem sua aparência. */ .emergency-mascot-img { /* LEITURA: width: largura; % depende do bloco de referência, vw da largura da tela e px usa pixels CSS. Valor */ /* LEITURA: nesta regra: 80px. */ width: 80px; /* LEITURA: height: altura; % depende da altura do bloco de referência, vh da tela e px usa pixels CSS. Valor */ /* LEITURA: nesta regra: 80px. */ height: 80px; /* LEITURA: border-radius: arredondamento dos cantos; 50% pode gerar círculo em uma caixa quadrada. Valor nesta */ /* LEITURA: regra: 50%. */ border-radius: 50%; /* LEITURA: margin-bottom: espaço externo abaixo do elemento. Valor nesta regra: 1.25rem. */ margin-bottom: 1.25rem; /* LEITURA: border: atalho para espessura, estilo e cor da borda. Valor nesta regra: 2px solid #fca5a5. */ border: 2px solid #fca5a5; /* LEITURA: object-fit: como a imagem se ajusta à caixa; cover preenche e pode recortar as bordas. Valor nesta */ /* LEITURA: regra: cover. */ object-fit: cover; } /* LEITURA: Seleciona .emergency-title: os elementos cujas tags/classes/atributos correspondem ao seletor. As */ /* LEITURA: declarações abaixo definem sua aparência. */ .emergency-title { /* LEITURA: font-family: lista de fontes em ordem de preferência; o navegador usa a próxima se a anterior não */ /* LEITURA: estiver disponível. Valor nesta regra: var(--font-display). */ font-family: var(--font-display); /* LEITURA: font-size: tamanho das letras; rem é relativo à fonte raiz, px é pixel CSS. Valor nesta regra: 1.7rem. */ font-size: 1.7rem; /* LEITURA: font-weight: peso visual das letras; valores maiores normalmente pedem traços mais grossos. Valor */ /* LEITURA: nesta regra: 800. */ font-weight: 800; /* LEITURA: color: cor do texto e referência de currentColor para ícones. Valor nesta regra: #fff. */ color: #fff; /* LEITURA: margin-bottom: espaço externo abaixo do elemento. Valor nesta regra: 0.5rem. */ margin-bottom: 0.5rem; } /* LEITURA: Seleciona .emergency-desc: os elementos cujas tags/classes/atributos correspondem ao seletor. As */ /* LEITURA: declarações abaixo definem sua aparência. */ .emergency-desc { /* LEITURA: font-size: tamanho das letras; rem é relativo à fonte raiz, px é pixel CSS. Valor nesta regra: 1rem. */ font-size: 1rem; /* LEITURA: color: cor do texto e referência de currentColor para ícones. Valor nesta regra: var(--text- */ /* LEITURA: secondary). */ color: var(--text-secondary); /* LEITURA: max-width: largura máxima, impedindo que o bloco cresça além do valor mesmo em tela larga. Valor nesta */ /* LEITURA: regra: 380px. */ max-width: 380px; /* LEITURA: line-height: altura das linhas de texto; valor sem unidade multiplica o tamanho da fonte. Valor nesta */ /* LEITURA: regra: 1.5. */ line-height: 1.5; /* LEITURA: margin-bottom: espaço externo abaixo do elemento. Valor nesta regra: 2rem. */ margin-bottom: 2rem; } /* LEITURA: Seleciona .emergency-timer-circle: os elementos cujas tags/classes/atributos correspondem ao seletor. As */ /* LEITURA: declarações abaixo definem sua aparência. */ .emergency-timer-circle { /* LEITURA: width: largura; % depende do bloco de referência, vw da largura da tela e px usa pixels CSS. Valor */ /* LEITURA: nesta regra: 120px. */ width: 120px; /* LEITURA: height: altura; % depende da altura do bloco de referência, vh da tela e px usa pixels CSS. Valor */ /* LEITURA: nesta regra: 120px. */ height: 120px; /* LEITURA: border-radius: arredondamento dos cantos; 50% pode gerar círculo em uma caixa quadrada. Valor nesta */ /* LEITURA: regra: 50%. */ border-radius: 50%; /* LEITURA: border: atalho para espessura, estilo e cor da borda. Valor nesta regra: 3px solid rgba(248, 113, 113, */ /* LEITURA: 0.4). */ border: 3px solid rgba(248, 113, 113, 0.4); /* LEITURA: display: modelo de layout: none esconde o elemento; flex organiza em eixo; grid organiza em grade; */ /* LEITURA: block ocupa bloco. Valor nesta regra: flex. */ display: flex; /* LEITURA: flex-direction: direção do eixo principal do flexbox; column empilha verticalmente e row organiza */ /* LEITURA: horizontalmente. Valor nesta regra: column. */ flex-direction: column; /* LEITURA: align-items: alinhamento dos itens no eixo transversal do flexbox ou dentro das áreas de grid. Valor */ /* LEITURA: nesta regra: center. */ align-items: center; /* LEITURA: justify-content: distribuição dos itens no eixo principal do flexbox ou alinhamento correspondente no */ /* LEITURA: grid. Valor nesta regra: center. */ justify-content: center; /* LEITURA: margin-bottom: espaço externo abaixo do elemento. Valor nesta regra: 2rem. */ margin-bottom: 2rem; /* LEITURA: background: atalho que configura o fundo; pode receber cor, imagem ou gradiente. Valor nesta regra: */ /* LEITURA: rgba(239, 68, 68, 0.08). */ background: rgba(239, 68, 68, 0.08); } /* LEITURA: Seleciona .emergency-seconds: os elementos cujas tags/classes/atributos correspondem ao seletor. As */ /* LEITURA: declarações abaixo definem sua aparência. */ .emergency-seconds { /* LEITURA: font-family: lista de fontes em ordem de preferência; o navegador usa a próxima se a anterior não */ /* LEITURA: estiver disponível. Valor nesta regra: var(--font-display). */ font-family: var(--font-display); /* LEITURA: font-size: tamanho das letras; rem é relativo à fonte raiz, px é pixel CSS. Valor nesta regra: 2.6rem. */ font-size: 2.6rem; /* LEITURA: font-weight: peso visual das letras; valores maiores normalmente pedem traços mais grossos. Valor */ /* LEITURA: nesta regra: 800. */ font-weight: 800; /* LEITURA: color: cor do texto e referência de currentColor para ícones. Valor nesta regra: #fca5a5. */ color: #fca5a5; /* LEITURA: line-height: altura das linhas de texto; valor sem unidade multiplica o tamanho da fonte. Valor nesta */ /* LEITURA: regra: 1. */ line-height: 1; } /* LEITURA: Seleciona .emergency-sub: os elementos cujas tags/classes/atributos correspondem ao seletor. As */ /* LEITURA: declarações abaixo definem sua aparência. */ .emergency-sub { /* LEITURA: font-size: tamanho das letras; rem é relativo à fonte raiz, px é pixel CSS. Valor nesta regra: */ /* LEITURA: 0.72rem. */ font-size: 0.72rem; /* LEITURA: text-transform: transformação visual de maiúsculas/minúsculas; não altera o texto armazenado. Valor */ /* LEITURA: nesta regra: uppercase. */ text-transform: uppercase; /* LEITURA: color: cor do texto e referência de currentColor para ícones. Valor nesta regra: var(--text-muted). */ color: var(--text-muted); /* LEITURA: margin-top: espaço externo acima do elemento. Valor nesta regra: 0.2rem. */ margin-top: 0.2rem; } /* LEITURA: Seleciona .emergency-input-box: os elementos cujas tags/classes/atributos correspondem ao seletor. As */ /* LEITURA: declarações abaixo definem sua aparência. */ .emergency-input-box { /* LEITURA: width: largura; % depende do bloco de referência, vw da largura da tela e px usa pixels CSS. Valor */ /* LEITURA: nesta regra: 100%. */ width: 100%; /* LEITURA: max-width: largura máxima, impedindo que o bloco cresça além do valor mesmo em tela larga. Valor nesta */ /* LEITURA: regra: 380px. */ max-width: 380px; /* LEITURA: margin-bottom: espaço externo abaixo do elemento. Valor nesta regra: 1.5rem. */ margin-bottom: 1.5rem; } /* LEITURA: Seleciona .emergency-input: os elementos cujas tags/classes/atributos correspondem ao seletor. As */ /* LEITURA: declarações abaixo definem sua aparência. */ .emergency-input { /* LEITURA: width: largura; % depende do bloco de referência, vw da largura da tela e px usa pixels CSS. Valor */ /* LEITURA: nesta regra: 100%. */ width: 100%; /* LEITURA: background: atalho que configura o fundo; pode receber cor, imagem ou gradiente. Valor nesta regra: */ /* LEITURA: rgba(0, 0, 0, 0.3). */ background: rgba(0, 0, 0, 0.3); /* LEITURA: border: atalho para espessura, estilo e cor da borda. Valor nesta regra: 1.5px solid rgba(255, 255, */ /* LEITURA: 255, 0.15). */ border: 1.5px solid rgba(255, 255, 255, 0.15); /* LEITURA: border-radius: arredondamento dos cantos; 50% pode gerar círculo em uma caixa quadrada. Valor nesta */ /* LEITURA: regra: var(--radius-md). */ border-radius: var(--radius-md); /* LEITURA: padding: espaço interno entre conteúdo e borda, com a mesma ordem topo/direita/baixo/esquerda quando */ /* LEITURA: há quatro valores. Valor nesta regra: 1rem. */ padding: 1rem; /* LEITURA: font-size: tamanho das letras; rem é relativo à fonte raiz, px é pixel CSS. Valor nesta regra: 1rem. */ font-size: 1rem; /* LEITURA: color: cor do texto e referência de currentColor para ícones. Valor nesta regra: #fff. */ color: #fff; /* LEITURA: text-align: alinhamento horizontal do texto dentro da caixa. Valor nesta regra: center. */ text-align: center; /* LEITURA: outline: contorno extra que não ocupa espaço; none o remove, então é necessário outro destaque de foco */ /* LEITURA: acessível. Valor nesta regra: none. */ outline: none; } /* LEITURA: Seleciona .btn-emergency-done: os elementos cujas tags/classes/atributos correspondem ao seletor. As */ /* LEITURA: declarações abaixo definem sua aparência. */ .btn-emergency-done { /* LEITURA: background: atalho que configura o fundo; pode receber cor, imagem ou gradiente. Valor nesta regra: */ /* LEITURA: var(--accent-habits). */ background: var(--accent-habits); /* LEITURA: color: cor do texto e referência de currentColor para ícones. Valor nesta regra: #0e2017. */ color: #0e2017; /* LEITURA: border: atalho para espessura, estilo e cor da borda. Valor nesta regra: none. */ border: none; /* LEITURA: border-radius: arredondamento dos cantos; 50% pode gerar círculo em uma caixa quadrada. Valor nesta */ /* LEITURA: regra: var(--radius-full). */ border-radius: var(--radius-full); /* LEITURA: padding: espaço interno entre conteúdo e borda, com a mesma ordem topo/direita/baixo/esquerda quando */ /* LEITURA: há quatro valores. Valor nesta regra: 0.9rem 2.2rem. */ padding: 0.9rem 2.2rem; /* LEITURA: font-size: tamanho das letras; rem é relativo à fonte raiz, px é pixel CSS. Valor nesta regra: 1rem. */ font-size: 1rem; /* LEITURA: font-weight: peso visual das letras; valores maiores normalmente pedem traços mais grossos. Valor */ /* LEITURA: nesta regra: 800. */ font-weight: 800; /* LEITURA: cursor: cursor sugerido ao passar o mouse; pointer sinaliza ação e wait indica espera. Valor nesta */ /* LEITURA: regra: pointer. */ cursor: pointer; /* LEITURA: transition: transição suave quando uma propriedade muda, inclusive por classe adicionada pelo */ /* LEITURA: JavaScript. Valor nesta regra: all var(--transition-fast). */ transition: all var(--transition-fast); } /* LEITURA: Seleciona .btn-emergency-cancel: os elementos cujas tags/classes/atributos correspondem ao seletor. As */ /* LEITURA: declarações abaixo definem sua aparência. */ .btn-emergency-cancel { /* LEITURA: background: atalho que configura o fundo; pode receber cor, imagem ou gradiente. Valor nesta regra: */ /* LEITURA: none. */ background: none; /* LEITURA: border: atalho para espessura, estilo e cor da borda. Valor nesta regra: none. */ border: none; /* LEITURA: color: cor do texto e referência de currentColor para ícones. Valor nesta regra: var(--text-muted). */ color: var(--text-muted); /* LEITURA: font-size: tamanho das letras; rem é relativo à fonte raiz, px é pixel CSS. Valor nesta regra: */ /* LEITURA: 0.85rem. */ font-size: 0.85rem; /* LEITURA: cursor: cursor sugerido ao passar o mouse; pointer sinaliza ação e wait indica espera. Valor nesta */ /* LEITURA: regra: pointer. */ cursor: pointer; /* LEITURA: margin-top: espaço externo acima do elemento. Valor nesta regra: 1.25rem. */ margin-top: 1.25rem; } /* ========================================================================== POPUP GUIADO DE INSTALAÇÃO PWA (FASE 4) ========================================================================== */ /* LEITURA: Seleciona .pwa-install-banner: os elementos cujas tags/classes/atributos correspondem ao seletor. As */ /* LEITURA: declarações abaixo definem sua aparência. */ .pwa-install-banner { /* LEITURA: position: referência de posicionamento: relative mantém o espaço no fluxo; absolute sai do fluxo; */ /* LEITURA: fixed fica preso à janela. Valor nesta regra: fixed. */ position: fixed; /* LEITURA: bottom: deslocamento da borda inferior quando o elemento é posicionado. Valor nesta regra: 5.5rem. */ bottom: 5.5rem; /* LEITURA: left: deslocamento da borda esquerda quando o elemento é posicionado. Valor nesta regra: 50%. */ left: 50%; /* LEITURA: transform: transformação visual como deslocar, girar ou escalar; não reorganiza automaticamente os */ /* LEITURA: vizinhos no fluxo. Valor nesta regra: translateX(-50%). */ transform: translateX(-50%); /* LEITURA: max-width: largura máxima, impedindo que o bloco cresça além do valor mesmo em tela larga. Valor nesta */ /* LEITURA: regra: 460px. */ max-width: 460px; /* LEITURA: width: largura; % depende do bloco de referência, vw da largura da tela e px usa pixels CSS. Valor */ /* LEITURA: nesta regra: calc(100% - 2rem). */ width: calc(100% - 2rem); /* LEITURA: background: atalho que configura o fundo; pode receber cor, imagem ou gradiente. Valor nesta regra: */ /* LEITURA: rgba(30, 36, 48, 0.96). */ background: rgba(30, 36, 48, 0.96); /* LEITURA: backdrop-filter: efeito aplicado ao conteúdo atrás do elemento, como desfoque; suporte varia entre */ /* LEITURA: navegadores. Valor nesta regra: blur(16px). */ backdrop-filter: blur(16px); /* LEITURA: border: atalho para espessura, estilo e cor da borda. Valor nesta regra: 1.5px solid rgba(165, 180, */ /* LEITURA: 252, 0.35). */ border: 1.5px solid rgba(165, 180, 252, 0.35); /* LEITURA: border-radius: arredondamento dos cantos; 50% pode gerar círculo em uma caixa quadrada. Valor nesta */ /* LEITURA: regra: var(--radius-md). */ border-radius: var(--radius-md); /* LEITURA: padding: espaço interno entre conteúdo e borda, com a mesma ordem topo/direita/baixo/esquerda quando */ /* LEITURA: há quatro valores. Valor nesta regra: 0.9rem 1.1rem. */ padding: 0.9rem 1.1rem; /* LEITURA: display: modelo de layout: none esconde o elemento; flex organiza em eixo; grid organiza em grade; */ /* LEITURA: block ocupa bloco. Valor nesta regra: none. */ display: none; /* LEITURA: align-items: alinhamento dos itens no eixo transversal do flexbox ou dentro das áreas de grid. Valor */ /* LEITURA: nesta regra: center. */ align-items: center; /* LEITURA: gap: espaçamento entre itens de flex/grid, sem exigir margem em cada filho. Valor nesta regra: */ /* LEITURA: 0.85rem. */ gap: 0.85rem; /* LEITURA: box-shadow: sombra: deslocamentos horizontal/vertical, desfoque, espalhamento opcional e cor; não */ /* LEITURA: aumenta a caixa de layout. Valor nesta regra: 0 10px 30px rgba(0, 0, 0, 0.5). */ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); /* LEITURA: z-index: ordem de sobreposição dentro do contexto de empilhamento; não é prioridade global absoluta */ /* LEITURA: entre todos os elementos. Valor nesta regra: 150. */ z-index: 150; /* LEITURA: animation: animação nomeada em @keyframes, com duração, curva, repetição e demais opções indicadas. */ /* LEITURA: Valor nesta regra: fadeSlideUp 0.35s ease. */ animation: fadeSlideUp 0.35s ease; } /* LEITURA: Seleciona .pwa-install-banner.show: os elementos cujas tags/classes/atributos correspondem ao seletor. */ /* LEITURA: As declarações abaixo definem sua aparência. */ .pwa-install-banner.show { /* LEITURA: display: modelo de layout: none esconde o elemento; flex organiza em eixo; grid organiza em grade; */ /* LEITURA: block ocupa bloco. Valor nesta regra: flex. */ display: flex; } /* LEITURA: Seleciona .pwa-banner-img: os elementos cujas tags/classes/atributos correspondem ao seletor. As */ /* LEITURA: declarações abaixo definem sua aparência. */ .pwa-banner-img { /* LEITURA: width: largura; % depende do bloco de referência, vw da largura da tela e px usa pixels CSS. Valor */ /* LEITURA: nesta regra: 44px. */ width: 44px; /* LEITURA: height: altura; % depende da altura do bloco de referência, vh da tela e px usa pixels CSS. Valor */ /* LEITURA: nesta regra: 44px. */ height: 44px; /* LEITURA: border-radius: arredondamento dos cantos; 50% pode gerar círculo em uma caixa quadrada. Valor nesta */ /* LEITURA: regra: 50%. */ border-radius: 50%; /* LEITURA: object-fit: como a imagem se ajusta à caixa; cover preenche e pode recortar as bordas. Valor nesta */ /* LEITURA: regra: cover. */ object-fit: cover; /* LEITURA: flex-shrink: quanto o item pode encolher quando falta espaço no contêiner flex. Valor nesta regra: 0. */ flex-shrink: 0; } /* LEITURA: Seleciona .pwa-banner-text: os elementos cujas tags/classes/atributos correspondem ao seletor. As */ /* LEITURA: declarações abaixo definem sua aparência. */ .pwa-banner-text { /* LEITURA: flex: atalho para crescimento, encolhimento e tamanho base de um item dentro de flexbox. Valor nesta */ /* LEITURA: regra: 1. */ flex: 1; /* LEITURA: font-size: tamanho das letras; rem é relativo à fonte raiz, px é pixel CSS. Valor nesta regra: */ /* LEITURA: 0.82rem. */ font-size: 0.82rem; /* LEITURA: color: cor do texto e referência de currentColor para ícones. Valor nesta regra: #e2e8f0. */ color: #e2e8f0; /* LEITURA: line-height: altura das linhas de texto; valor sem unidade multiplica o tamanho da fonte. Valor nesta */ /* LEITURA: regra: 1.4. */ line-height: 1.4; } /* LEITURA: Seleciona .btn-close-pwa: os elementos cujas tags/classes/atributos correspondem ao seletor. As */ /* LEITURA: declarações abaixo definem sua aparência. */ .btn-close-pwa { /* LEITURA: background: atalho que configura o fundo; pode receber cor, imagem ou gradiente. Valor nesta regra: */ /* LEITURA: none. */ background: none; /* LEITURA: border: atalho para espessura, estilo e cor da borda. Valor nesta regra: none. */ border: none; /* LEITURA: color: cor do texto e referência de currentColor para ícones. Valor nesta regra: var(--text-muted). */ color: var(--text-muted); /* LEITURA: font-size: tamanho das letras; rem é relativo à fonte raiz, px é pixel CSS. Valor nesta regra: 1.2rem. */ font-size: 1.2rem; /* LEITURA: cursor: cursor sugerido ao passar o mouse; pointer sinaliza ação e wait indica espera. Valor nesta */ /* LEITURA: regra: pointer. */ cursor: pointer; } /* Bottom Navigation Bar */ /* LEITURA: Seleciona .oiio-bottom-nav: os elementos cujas tags/classes/atributos correspondem ao seletor. As */ /* LEITURA: declarações abaixo definem sua aparência. */ .oiio-bottom-nav { /* LEITURA: position: referência de posicionamento: relative mantém o espaço no fluxo; absolute sai do fluxo; */ /* LEITURA: fixed fica preso à janela. Valor nesta regra: fixed. */ position: fixed; /* LEITURA: bottom: deslocamento da borda inferior quando o elemento é posicionado. Valor nesta regra: 0. */ bottom: 0; /* LEITURA: left: deslocamento da borda esquerda quando o elemento é posicionado. Valor nesta regra: 0. */ left: 0; /* LEITURA: width: largura; % depende do bloco de referência, vw da largura da tela e px usa pixels CSS. Valor */ /* LEITURA: nesta regra: 100%. */ width: 100%; /* LEITURA: background: atalho que configura o fundo; pode receber cor, imagem ou gradiente. Valor nesta regra: */ /* LEITURA: rgba(24, 28, 36, 0.94). */ background: rgba(24, 28, 36, 0.94); /* LEITURA: backdrop-filter: efeito aplicado ao conteúdo atrás do elemento, como desfoque; suporte varia entre */ /* LEITURA: navegadores. Valor nesta regra: blur(16px). */ backdrop-filter: blur(16px); /* LEITURA: -webkit-backdrop-filter: variante prefixada do desfoque de fundo para navegadores que exigem WebKit. */ /* LEITURA: Valor nesta regra: blur(16px). */ -webkit-backdrop-filter: blur(16px); /* LEITURA: border-top: borda superior. Valor nesta regra: 1px solid var(--border-subtle). */ border-top: 1px solid var(--border-subtle); /* LEITURA: padding: espaço interno entre conteúdo e borda, com a mesma ordem topo/direita/baixo/esquerda quando */ /* LEITURA: há quatro valores. Valor nesta regra: 0.65rem 1rem 0.85rem 1rem. */ padding: 0.65rem 1rem 0.85rem 1rem; /* LEITURA: display: modelo de layout: none esconde o elemento; flex organiza em eixo; grid organiza em grade; */ /* LEITURA: block ocupa bloco. Valor nesta regra: flex. */ display: flex; /* LEITURA: justify-content: distribuição dos itens no eixo principal do flexbox ou alinhamento correspondente no */ /* LEITURA: grid. Valor nesta regra: center. */ justify-content: center; /* LEITURA: z-index: ordem de sobreposição dentro do contexto de empilhamento; não é prioridade global absoluta */ /* LEITURA: entre todos os elementos. Valor nesta regra: 100. */ z-index: 100; } /* LEITURA: Seleciona .oiio-nav-container: os elementos cujas tags/classes/atributos correspondem ao seletor. As */ /* LEITURA: declarações abaixo definem sua aparência. */ .oiio-nav-container { /* LEITURA: width: largura; % depende do bloco de referência, vw da largura da tela e px usa pixels CSS. Valor */ /* LEITURA: nesta regra: 100%. */ width: 100%; /* LEITURA: max-width: largura máxima, impedindo que o bloco cresça além do valor mesmo em tela larga. Valor nesta */ /* LEITURA: regra: 500px. */ max-width: 500px; /* LEITURA: display: modelo de layout: none esconde o elemento; flex organiza em eixo; grid organiza em grade; */ /* LEITURA: block ocupa bloco. Valor nesta regra: flex. */ display: flex; /* LEITURA: justify-content: distribuição dos itens no eixo principal do flexbox ou alinhamento correspondente no */ /* LEITURA: grid. Valor nesta regra: space-around. */ justify-content: space-around; /* LEITURA: align-items: alinhamento dos itens no eixo transversal do flexbox ou dentro das áreas de grid. Valor */ /* LEITURA: nesta regra: center. */ align-items: center; } /* LEITURA: Seleciona .oiio-nav-item: os elementos cujas tags/classes/atributos correspondem ao seletor. As */ /* LEITURA: declarações abaixo definem sua aparência. */ .oiio-nav-item { /* LEITURA: display: modelo de layout: none esconde o elemento; flex organiza em eixo; grid organiza em grade; */ /* LEITURA: block ocupa bloco. Valor nesta regra: flex. */ display: flex; /* LEITURA: flex-direction: direção do eixo principal do flexbox; column empilha verticalmente e row organiza */ /* LEITURA: horizontalmente. Valor nesta regra: column. */ flex-direction: column; /* LEITURA: align-items: alinhamento dos itens no eixo transversal do flexbox ou dentro das áreas de grid. Valor */ /* LEITURA: nesta regra: center. */ align-items: center; /* LEITURA: gap: espaçamento entre itens de flex/grid, sem exigir margem em cada filho. Valor nesta regra: */ /* LEITURA: 0.25rem. */ gap: 0.25rem; /* LEITURA: background: atalho que configura o fundo; pode receber cor, imagem ou gradiente. Valor nesta regra: */ /* LEITURA: transparent. */ background: transparent; /* LEITURA: border: atalho para espessura, estilo e cor da borda. Valor nesta regra: none. */ border: none; /* LEITURA: color: cor do texto e referência de currentColor para ícones. Valor nesta regra: var(--text-muted). */ color: var(--text-muted); /* LEITURA: font-size: tamanho das letras; rem é relativo à fonte raiz, px é pixel CSS. Valor nesta regra: */ /* LEITURA: 0.72rem. */ font-size: 0.72rem; /* LEITURA: font-weight: peso visual das letras; valores maiores normalmente pedem traços mais grossos. Valor */ /* LEITURA: nesta regra: 700. */ font-weight: 700; /* LEITURA: cursor: cursor sugerido ao passar o mouse; pointer sinaliza ação e wait indica espera. Valor nesta */ /* LEITURA: regra: pointer. */ cursor: pointer; /* LEITURA: padding: espaço interno entre conteúdo e borda, com a mesma ordem topo/direita/baixo/esquerda quando */ /* LEITURA: há quatro valores. Valor nesta regra: 0.25rem 0.8rem. */ padding: 0.25rem 0.8rem; /* LEITURA: border-radius: arredondamento dos cantos; 50% pode gerar círculo em uma caixa quadrada. Valor nesta */ /* LEITURA: regra: var(--radius-sm). */ border-radius: var(--radius-sm); /* LEITURA: transition: transição suave quando uma propriedade muda, inclusive por classe adicionada pelo */ /* LEITURA: JavaScript. Valor nesta regra: all var(--transition-fast). */ transition: all var(--transition-fast); } /* LEITURA: Seleciona .oiio-nav-item.active: os elementos cujas tags/classes/atributos correspondem ao seletor. a */ /* LEITURA: classe active é um estado atribuído pelo JavaScript, diferente da pseudoclasse :active. */ .oiio-nav-item.active { /* LEITURA: color: cor do texto e referência de currentColor para ícones. Valor nesta regra: var(--accent-focus). */ color: var(--accent-focus); } /* LEITURA: Seleciona .oiio-nav-item.active.tab-dopa: os elementos cujas tags/classes/atributos correspondem ao */ /* LEITURA: seletor. a classe active é um estado atribuído pelo JavaScript, diferente da pseudoclasse :active. */ .oiio-nav-item.active.tab-dopa { /* LEITURA: color: cor do texto e referência de currentColor para ícones. Valor nesta regra: var(--accent- */ /* LEITURA: dopamine). */ color: var(--accent-dopamine); } /* LEITURA: Seleciona .oiio-nav-item.active.tab-care: os elementos cujas tags/classes/atributos correspondem ao */ /* LEITURA: seletor. a classe active é um estado atribuído pelo JavaScript, diferente da pseudoclasse :active. */ .oiio-nav-item.active.tab-care { /* LEITURA: color: cor do texto e referência de currentColor para ícones. Valor nesta regra: var(--accent-habits). */ color: var(--accent-habits); } /* LEITURA: Seleciona .oiio-footer: os elementos cujas tags/classes/atributos correspondem ao seletor. As */ /* LEITURA: declarações abaixo definem sua aparência. */ .oiio-footer { /* LEITURA: margin-top: espaço externo acima do elemento. Valor nesta regra: auto. */ margin-top: auto; /* LEITURA: padding-top: espaço interno superior. Valor nesta regra: 1.5rem. */ padding-top: 1.5rem; /* LEITURA: text-align: alinhamento horizontal do texto dentro da caixa. Valor nesta regra: center. */ text-align: center; /* LEITURA: font-size: tamanho das letras; rem é relativo à fonte raiz, px é pixel CSS. Valor nesta regra: */ /* LEITURA: 0.75rem. */ font-size: 0.75rem; /* LEITURA: color: cor do texto e referência de currentColor para ícones. Valor nesta regra: var(--text-muted). */ color: var(--text-muted); } /* LEITURA: Seleciona .oiio-footer a: os elementos cujas tags/classes/atributos correspondem ao seletor. As */ /* LEITURA: declarações abaixo definem sua aparência. */ .oiio-footer a { /* LEITURA: color: cor do texto e referência de currentColor para ícones. Valor nesta regra: var(--text- */ /* LEITURA: secondary). */ color: var(--text-secondary); /* LEITURA: text-decoration: sublinhado e outros traços de decoração do texto. Valor nesta regra: none. */ text-decoration: none; } /* LEITURA: Seleciona #confetti-canvas: os elementos cujas tags/classes/atributos correspondem ao seletor. As */ /* LEITURA: declarações abaixo definem sua aparência. */ #confetti-canvas { /* LEITURA: position: referência de posicionamento: relative mantém o espaço no fluxo; absolute sai do fluxo; */ /* LEITURA: fixed fica preso à janela. Valor nesta regra: fixed. */ position: fixed; /* LEITURA: top: deslocamento da borda superior quando o elemento é posicionado. Valor nesta regra: 0. */ top: 0; /* LEITURA: left: deslocamento da borda esquerda quando o elemento é posicionado. Valor nesta regra: 0. */ left: 0; /* LEITURA: width: largura; % depende do bloco de referência, vw da largura da tela e px usa pixels CSS. Valor */ /* LEITURA: nesta regra: 100vw. */ width: 100vw; /* LEITURA: height: altura; % depende da altura do bloco de referência, vh da tela e px usa pixels CSS. Valor */ /* LEITURA: nesta regra: 100vh. */ height: 100vh; /* LEITURA: pointer-events: define se o elemento participa de cliques/toques; none deixa eventos passarem para o */ /* LEITURA: que estiver atrás. Valor nesta regra: none. */ pointer-events: none; /* LEITURA: z-index: ordem de sobreposição dentro do contexto de empilhamento; não é prioridade global absoluta */ /* LEITURA: entre todos os elementos. Valor nesta regra: 9999. */ z-index: 9999; } /* Push Notification Botão Ativo */ /* LEITURA: Seleciona .btn-icon-top.active-push: os elementos cujas tags/classes/atributos correspondem ao seletor. */ /* LEITURA: a classe active é um estado atribuído pelo JavaScript, diferente da pseudoclasse :active. */ .btn-icon-top.active-push { /* LEITURA: color: cor do texto e referência de currentColor para ícones. Valor nesta regra: var(--accent-focus). */ color: var(--accent-focus); /* LEITURA: background: atalho que configura o fundo; pode receber cor, imagem ou gradiente. Valor nesta regra: */ /* LEITURA: rgba(165, 180, 252, 0.15). */ background: rgba(165, 180, 252, 0.15); /* LEITURA: border-color: cor das bordas sem alterar sua espessura. Valor nesta regra: var(--accent-focus). */ border-color: var(--accent-focus); /* LEITURA: box-shadow: sombra: deslocamentos horizontal/vertical, desfoque, espalhamento opcional e cor; não */ /* LEITURA: aumenta a caixa de layout. Valor nesta regra: 0 0 12px var(--accent-focus-glow). */ box-shadow: 0 0 12px var(--accent-focus-glow); } /* Banner PWA Guiado (Fase 4) */ /* LEITURA: Seleciona .pwa-install-banner: os elementos cujas tags/classes/atributos correspondem ao seletor. As */ /* LEITURA: declarações abaixo definem sua aparência. */ .pwa-install-banner { /* LEITURA: position: referência de posicionamento: relative mantém o espaço no fluxo; absolute sai do fluxo; */ /* LEITURA: fixed fica preso à janela. Valor nesta regra: fixed. */ position: fixed; /* LEITURA: bottom: deslocamento da borda inferior quando o elemento é posicionado. Valor nesta regra: 82px. */ bottom: 82px; /* LEITURA: left: deslocamento da borda esquerda quando o elemento é posicionado. Valor nesta regra: 50%. */ left: 50%; /* LEITURA: transform: transformação visual como deslocar, girar ou escalar; não reorganiza automaticamente os */ /* LEITURA: vizinhos no fluxo. Valor nesta regra: translateX(-50%) translateY(140%). */ transform: translateX(-50%) translateY(140%); /* LEITURA: width: largura; % depende do bloco de referência, vw da largura da tela e px usa pixels CSS. Valor */ /* LEITURA: nesta regra: calc(100% - 1.5rem). */ width: calc(100% - 1.5rem); /* LEITURA: max-width: largura máxima, impedindo que o bloco cresça além do valor mesmo em tela larga. Valor nesta */ /* LEITURA: regra: 480px. */ max-width: 480px; /* LEITURA: background: atalho que configura o fundo; pode receber cor, imagem ou gradiente. Valor nesta regra: */ /* LEITURA: rgba(33, 38, 49, 0.98). */ background: rgba(33, 38, 49, 0.98); /* LEITURA: border: atalho para espessura, estilo e cor da borda. Valor nesta regra: 1.5px solid rgba(165, 180, */ /* LEITURA: 252, 0.4). */ border: 1.5px solid rgba(165, 180, 252, 0.4); /* LEITURA: border-radius: arredondamento dos cantos; 50% pode gerar círculo em uma caixa quadrada. Valor nesta */ /* LEITURA: regra: var(--radius-md). */ border-radius: var(--radius-md); /* LEITURA: padding: espaço interno entre conteúdo e borda, com a mesma ordem topo/direita/baixo/esquerda quando */ /* LEITURA: há quatro valores. Valor nesta regra: 0.85rem 1rem. */ padding: 0.85rem 1rem; /* LEITURA: box-shadow: sombra: deslocamentos horizontal/vertical, desfoque, espalhamento opcional e cor; não */ /* LEITURA: aumenta a caixa de layout. Valor nesta regra: 0 16px 40px rgba(0, 0, 0, 0.6). */ box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6); /* LEITURA: backdrop-filter: efeito aplicado ao conteúdo atrás do elemento, como desfoque; suporte varia entre */ /* LEITURA: navegadores. Valor nesta regra: blur(16px). */ backdrop-filter: blur(16px); /* LEITURA: -webkit-backdrop-filter: variante prefixada do desfoque de fundo para navegadores que exigem WebKit. */ /* LEITURA: Valor nesta regra: blur(16px). */ -webkit-backdrop-filter: blur(16px); /* LEITURA: z-index: ordem de sobreposição dentro do contexto de empilhamento; não é prioridade global absoluta */ /* LEITURA: entre todos os elementos. Valor nesta regra: 999. */ z-index: 999; /* LEITURA: display: modelo de layout: none esconde o elemento; flex organiza em eixo; grid organiza em grade; */ /* LEITURA: block ocupa bloco. Valor nesta regra: flex. */ display: flex; /* LEITURA: align-items: alinhamento dos itens no eixo transversal do flexbox ou dentro das áreas de grid. Valor */ /* LEITURA: nesta regra: center. */ align-items: center; /* LEITURA: gap: espaçamento entre itens de flex/grid, sem exigir margem em cada filho. Valor nesta regra: */ /* LEITURA: 0.85rem. */ gap: 0.85rem; /* LEITURA: transition: transição suave quando uma propriedade muda, inclusive por classe adicionada pelo */ /* LEITURA: JavaScript. Valor nesta regra: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease. */ transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease; /* LEITURA: pointer-events: define se o elemento participa de cliques/toques; none deixa eventos passarem para o */ /* LEITURA: que estiver atrás. Valor nesta regra: none. */ pointer-events: none; /* LEITURA: opacity: opacidade de todo o elemento e seus filhos, de 0 (invisível) a 1 (opaco). Valor nesta regra: */ /* LEITURA: 0. */ opacity: 0; } /* LEITURA: Seleciona .pwa-install-banner.show: os elementos cujas tags/classes/atributos correspondem ao seletor. */ /* LEITURA: As declarações abaixo definem sua aparência. */ .pwa-install-banner.show { /* LEITURA: transform: transformação visual como deslocar, girar ou escalar; não reorganiza automaticamente os */ /* LEITURA: vizinhos no fluxo. Valor nesta regra: translateX(-50%) translateY(0). */ transform: translateX(-50%) translateY(0); /* LEITURA: pointer-events: define se o elemento participa de cliques/toques; none deixa eventos passarem para o */ /* LEITURA: que estiver atrás. Valor nesta regra: auto. */ pointer-events: auto; /* LEITURA: opacity: opacidade de todo o elemento e seus filhos, de 0 (invisível) a 1 (opaco). Valor nesta regra: */ /* LEITURA: 1. */ opacity: 1; } /* LEITURA: Seleciona .pwa-banner-img: os elementos cujas tags/classes/atributos correspondem ao seletor. As */ /* LEITURA: declarações abaixo definem sua aparência. */ .pwa-banner-img { /* LEITURA: width: largura; % depende do bloco de referência, vw da largura da tela e px usa pixels CSS. Valor */ /* LEITURA: nesta regra: 46px. */ width: 46px; /* LEITURA: height: altura; % depende da altura do bloco de referência, vh da tela e px usa pixels CSS. Valor */ /* LEITURA: nesta regra: 46px. */ height: 46px; /* LEITURA: border-radius: arredondamento dos cantos; 50% pode gerar círculo em uma caixa quadrada. Valor nesta */ /* LEITURA: regra: 12px. */ border-radius: 12px; /* LEITURA: object-fit: como a imagem se ajusta à caixa; cover preenche e pode recortar as bordas. Valor nesta */ /* LEITURA: regra: cover. */ object-fit: cover; /* LEITURA: flex-shrink: quanto o item pode encolher quando falta espaço no contêiner flex. Valor nesta regra: 0. */ flex-shrink: 0; /* LEITURA: border: atalho para espessura, estilo e cor da borda. Valor nesta regra: 2px solid var(--accent- */ /* LEITURA: focus). */ border: 2px solid var(--accent-focus); /* LEITURA: box-shadow: sombra: deslocamentos horizontal/vertical, desfoque, espalhamento opcional e cor; não */ /* LEITURA: aumenta a caixa de layout. Valor nesta regra: 0 4px 14px var(--accent-focus-glow). */ box-shadow: 0 4px 14px var(--accent-focus-glow); } /* LEITURA: Seleciona .pwa-banner-content: os elementos cujas tags/classes/atributos correspondem ao seletor. As */ /* LEITURA: declarações abaixo definem sua aparência. */ .pwa-banner-content { /* LEITURA: flex: atalho para crescimento, encolhimento e tamanho base de um item dentro de flexbox. Valor nesta */ /* LEITURA: regra: 1. */ flex: 1; /* LEITURA: text-align: alinhamento horizontal do texto dentro da caixa. Valor nesta regra: left. */ text-align: left; } /* LEITURA: Seleciona .pwa-banner-title: os elementos cujas tags/classes/atributos correspondem ao seletor. As */ /* LEITURA: declarações abaixo definem sua aparência. */ .pwa-banner-title { /* LEITURA: font-size: tamanho das letras; rem é relativo à fonte raiz, px é pixel CSS. Valor nesta regra: */ /* LEITURA: 0.84rem. */ font-size: 0.84rem; /* LEITURA: font-weight: peso visual das letras; valores maiores normalmente pedem traços mais grossos. Valor */ /* LEITURA: nesta regra: 800. */ font-weight: 800; /* LEITURA: color: cor do texto e referência de currentColor para ícones. Valor nesta regra: #fff. */ color: #fff; /* LEITURA: margin-bottom: espaço externo abaixo do elemento. Valor nesta regra: 0.2rem. */ margin-bottom: 0.2rem; /* LEITURA: display: modelo de layout: none esconde o elemento; flex organiza em eixo; grid organiza em grade; */ /* LEITURA: block ocupa bloco. Valor nesta regra: flex. */ display: flex; /* LEITURA: align-items: alinhamento dos itens no eixo transversal do flexbox ou dentro das áreas de grid. Valor */ /* LEITURA: nesta regra: center. */ align-items: center; /* LEITURA: gap: espaçamento entre itens de flex/grid, sem exigir margem em cada filho. Valor nesta regra: */ /* LEITURA: 0.35rem. */ gap: 0.35rem; } /* LEITURA: Seleciona .pwa-banner-text: os elementos cujas tags/classes/atributos correspondem ao seletor. As */ /* LEITURA: declarações abaixo definem sua aparência. */ .pwa-banner-text { /* LEITURA: font-size: tamanho das letras; rem é relativo à fonte raiz, px é pixel CSS. Valor nesta regra: */ /* LEITURA: 0.75rem. */ font-size: 0.75rem; /* LEITURA: color: cor do texto e referência de currentColor para ícones. Valor nesta regra: var(--text- */ /* LEITURA: secondary). */ color: var(--text-secondary); /* LEITURA: line-height: altura das linhas de texto; valor sem unidade multiplica o tamanho da fonte. Valor nesta */ /* LEITURA: regra: 1.35. */ line-height: 1.35; } /* LEITURA: Seleciona .pwa-banner-text b: os elementos cujas tags/classes/atributos correspondem ao seletor. As */ /* LEITURA: declarações abaixo definem sua aparência. */ .pwa-banner-text b { /* LEITURA: color: cor do texto e referência de currentColor para ícones. Valor nesta regra: var(--accent-focus). */ color: var(--accent-focus); } /* LEITURA: Seleciona .btn-close-pwa: os elementos cujas tags/classes/atributos correspondem ao seletor. As */ /* LEITURA: declarações abaixo definem sua aparência. */ .btn-close-pwa { /* LEITURA: background: atalho que configura o fundo; pode receber cor, imagem ou gradiente. Valor nesta regra: */ /* LEITURA: transparent. */ background: transparent; /* LEITURA: border: atalho para espessura, estilo e cor da borda. Valor nesta regra: none. */ border: none; /* LEITURA: color: cor do texto e referência de currentColor para ícones. Valor nesta regra: var(--text-muted). */ color: var(--text-muted); /* LEITURA: font-size: tamanho das letras; rem é relativo à fonte raiz, px é pixel CSS. Valor nesta regra: 1.3rem. */ font-size: 1.3rem; /* LEITURA: line-height: altura das linhas de texto; valor sem unidade multiplica o tamanho da fonte. Valor nesta */ /* LEITURA: regra: 1. */ line-height: 1; /* LEITURA: cursor: cursor sugerido ao passar o mouse; pointer sinaliza ação e wait indica espera. Valor nesta */ /* LEITURA: regra: pointer. */ cursor: pointer; /* LEITURA: padding: espaço interno entre conteúdo e borda, com a mesma ordem topo/direita/baixo/esquerda quando */ /* LEITURA: há quatro valores. Valor nesta regra: 0.25rem. */ padding: 0.25rem; /* LEITURA: transition: transição suave quando uma propriedade muda, inclusive por classe adicionada pelo */ /* LEITURA: JavaScript. Valor nesta regra: color var(--transition-fast). */ transition: color var(--transition-fast); } /* LEITURA: Seleciona .btn-close-pwa:hover: os elementos cujas tags/classes/atributos correspondem ao seletor. vale */ /* LEITURA: quando o ponteiro está sobre o elemento. */ .btn-close-pwa:hover { /* LEITURA: color: cor do texto e referência de currentColor para ícones. Valor nesta regra: #fff. */ color: #fff; } /* LEITURA: position: referência de posicionamento: relative mantém o espaço no fluxo; absolute sai do fluxo; fixed */ /* LEITURA: fica preso à janela. Valor nesta regra: fixed; inset: atalho de top/right/bottom/left; zero em elemento */ /* LEITURA: fixed pode cobrir a janela inteira. Valor nesta regra: 0; z-index: ordem de sobreposição dentro do */ /* LEITURA: contexto de empilhamento; não é prioridade global absoluta entre todos os elementos. Valor nesta regra: */ /* LEITURA: 99999; background: atalho que configura o fundo; pode receber cor, imagem ou gradiente. Valor nesta */ /* LEITURA: regra: #151821; color: cor do texto e referência de currentColor para ícones. Valor nesta regra: white; */ /* LEITURA: display: modelo de layout: none esconde o elemento; flex organiza em eixo; grid organiza em grade; block */ /* LEITURA: ocupa bloco. Valor nesta regra: grid; place-content: atalho para align-content e justify-content; center */ /* LEITURA: centraliza o conjunto de conteúdo. Valor nesta regra: center; gap: espaçamento entre itens de flex/grid, */ /* LEITURA: sem exigir margem em cada filho. Valor nesta regra: 1rem; text-align: alinhamento horizontal do texto */ /* LEITURA: dentro da caixa. Valor nesta regra: center. Regra de .startup-overlay. */ .startup-overlay {position:fixed;inset:0;z-index:99999;background:#151821;color:white;display:grid;place-content:center;gap:1rem;text-align:center;} /* LEITURA: display: modelo de layout: none esconde o elemento; flex organiza em eixo; grid organiza em grade; block */ /* LEITURA: ocupa bloco. Valor nesta regra: none. Regra de .startup-overlay[hidden]. */ .startup-overlay[hidden] {display:none;} /* LEITURA: color: cor do texto e referência de currentColor para ícones. Valor nesta regra: #a5b4fc. Regra de */ /* LEITURA: .startup-overlay a. */ .startup-overlay a {color:#a5b4fc;} /* LEITURA: display: modelo de layout: none esconde o elemento; flex organiza em eixo; grid organiza em grade; block */ /* LEITURA: ocupa bloco. Valor nesta regra: flex; flex-wrap: permite ou impede quebra dos itens flex em mais de uma */ /* LEITURA: linha. Valor nesta regra: wrap; gap: espaçamento entre itens de flex/grid, sem exigir margem em cada */ /* LEITURA: filho. Valor nesta regra: 12px; align-items: alinhamento dos itens no eixo transversal do flexbox ou */ /* LEITURA: dentro das áreas de grid. Valor nesta regra: center; margin: espaço externo: 1 valor vale para todos os */ /* LEITURA: lados; 2 = vertical/horizontal; 4 = topo/direita/baixo/esquerda; auto pode centralizar. Valor nesta */ /* LEITURA: regra: 12px 0; font-size: tamanho das letras; rem é relativo à fonte raiz, px é pixel CSS. Valor nesta */ /* LEITURA: regra: .8rem; color: cor do texto e referência de currentColor para ícones. Valor nesta regra: #bbb. */ /* LEITURA: Regra de .account-save-bar. */ .account-save-bar {display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:12px 0;font-size:.8rem;color:#bbb;} /* LEITURA: background: atalho que configura o fundo; pode receber cor, imagem ou gradiente. Valor nesta regra: */ /* LEITURA: #303545; border: atalho para espessura, estilo e cor da borda. Valor nesta regra: 1px solid #545b72; */ /* LEITURA: color: cor do texto e referência de currentColor para ícones. Valor nesta regra: white; border-radius: */ /* LEITURA: arredondamento dos cantos; 50% pode gerar círculo em uma caixa quadrada. Valor nesta regra: 8px; */ /* LEITURA: padding: espaço interno entre conteúdo e borda, com a mesma ordem topo/direita/baixo/esquerda quando há */ /* LEITURA: quatro valores. Valor nesta regra: 8px; cursor: cursor sugerido ao passar o mouse; pointer sinaliza ação */ /* LEITURA: e wait indica espera. Valor nesta regra: pointer. Regra de .account-save-bar button. */ .account-save-bar button {background:#303545;border:1px solid #545b72;color:white;border-radius:8px;padding:8px;cursor:pointer;} /* LEITURA: max-height: propriedade visual aplicada ao seletor atual. Valor nesta regra: 90vh; overflow-y: */ /* LEITURA: tratamento do conteúdo que excede a altura. Valor nesta regra: auto. Regra de .auth-card. */ .auth-card {max-height:90vh;overflow-y:auto;} /* LEITURA: opacity: opacidade de todo o elemento e seus filhos, de 0 (invisível) a 1 (opaco). Valor nesta regra: */ /* LEITURA: .6; cursor: cursor sugerido ao passar o mouse; pointer sinaliza ação e wait indica espera. Valor nesta */ /* LEITURA: regra: wait. Regra de .auth-card button:disabled. */ .auth-card button:disabled {opacity:.6;cursor:wait;} /* Painel responsivo para escrever e ouvir frases com a voz fixa. */ .voice-lab { margin: 1rem 0; padding: 1rem; border: 1px solid #7776; border-radius: 12px; } .voice-lab summary { cursor: pointer; font-weight: 600; } .voice-lab form { display: grid; gap: .65rem; margin-top: 1rem; } .voice-lab textarea { width: 100%; box-sizing: border-box; font: inherit; padding: .75rem; border-radius: 8px; resize: vertical; } .voice-lab button { padding: .65rem; cursor: pointer; font: inherit; } #voice-status { min-height: 1.5em; font-size: .9rem; }