/* ========================================================================== LPE.OS — Tema claro/escuro (o mesmo da calculadora) -------------------------------------------------------------------------- Carregar DEPOIS de style.css e auth.css: esta folha reescreve os tokens dos dois e é a última palavra sobre cor, fundo e tipografia. Escuro é o padrão; `.tema-claro` (na tag e espelhado no ) liga o claro. A escolha vive em localStorage['memorial_precificacao_tema'], a MESMA chave da calculadora — escolher o tema num lugar vale no outro. Fontes (declarar os no da página): Saira — texto e títulos (--font / --sans) Manrope — números e valores (--number-font) IBM Plex Mono — códigos e etiquetas (--mono) ========================================================================== */ /* ------------------------------------------------------------ Tokens ------ */ :root { color-scheme: dark; /* Fundo e superfícies */ --bg: #082B63; --surface: rgba(8, 43, 99, .96); --surface-alt: rgba(255, 255, 255, .07); --border: rgba(255, 255, 255, .18); --border-strong: rgba(255, 255, 255, .30); /* Texto */ --text: #FFFFFF; --text-soft: rgba(255, 255, 255, .72); --text-muted: rgba(255, 255, 255, .52); /* Marca */ --accent: #C8993B; --accent-soft: rgba(200, 153, 59, .16); --accent-dark: #D8AC54; --navy: #082B63; --gold: #C8993B; --gold-soft: rgba(200, 153, 59, .16); /* Sinalização */ --ok: #3FAE86; --warn: #E0B45C; --warn-soft: rgba(200, 153, 59, .16); /* Sombras — sobre marinho, sombra escura */ --shadow-sm: 0 1px 2px rgba(2, 12, 32, .30); --shadow-md: 0 6px 18px rgba(2, 12, 32, .38); --shadow-lg: 0 18px 40px rgba(2, 12, 32, .46); /* Tipografia da calculadora */ --font: 'Saira', Arial, Helvetica, sans-serif; --sans: 'Saira', Arial, Helvetica, sans-serif; --number-font: 'Manrope', 'Saira', system-ui, sans-serif; --mono: 'IBM Plex Mono', 'Courier New', monospace; /* Imagens de fundo (extraídas da calculadora) */ --fundo-escuro: url("../img/fundo-tecnico-escuro.webp"); --fundo-claro: url("../img/fundo-tecnico-claro.webp"); } :root.tema-claro { color-scheme: light; --bg: #FFFFFF; --surface: #FFFFFF; --surface-alt: #F4F6FA; --border: rgba(112, 112, 112, .24); --border-strong: rgba(112, 112, 112, .38); --text: #082B63; --text-soft: #707070; --text-muted: rgba(112, 112, 112, .80); --accent: #C8993B; --accent-soft: rgba(8, 43, 99, .08); --accent-dark: #A3781F; --gold-soft: rgba(200, 153, 59, .16); --ok: #187553; --warn: #A86713; --warn-soft: #F6EAD0; --shadow-sm: 0 1px 2px rgba(8, 43, 99, .06); --shadow-md: 0 4px 14px rgba(8, 43, 99, .09); --shadow-lg: 0 14px 34px rgba(8, 43, 99, .14); } /* --------------------------------------------------------------- Fundo ---- */ body { background-color: var(--bg); color: var(--text); font-family: var(--font); } /* Prancha técnica ladrilhada, igual à da calculadora. Substitui a camada de fundo.jpg que o style.css pinta. */ body::before { content: ""; position: fixed; inset: 0; z-index: -2; opacity: 1; background-color: var(--bg); background-image: var(--fundo-escuro); background-repeat: repeat; background-position: center top; background-size: 820px auto; background-attachment: fixed; } :root.tema-claro body::before { background-image: var(--fundo-claro); } /* Véu de leitura — leve, só o bastante para o texto não brigar com o traço. */ body::after { content: ""; position: fixed; inset: 0; z-index: -1; background: radial-gradient(120% 78% at 50% 8%, rgba(8, 43, 99, .34) 0%, rgba(8, 43, 99, .62) 58%, rgba(6, 33, 78, .78) 100%); } :root.tema-claro body::after { background: radial-gradient(120% 78% at 50% 8%, rgba(255, 255, 255, .40) 0%, rgba(255, 255, 255, .70) 58%, rgba(255, 255, 255, .84) 100%); } @media (max-width: 700px) { body::before { background-size: 520px auto; } } @media print { body::before, body::after { display: none !important; } body { background: #fff !important; color: #082B63 !important; } } /* ------------------------------------------------- Componentes do painel -- */ .brand__mark { background: var(--surface); border-color: var(--border); color: var(--text); } /* O logo é marinho com um detalhe dourado: sobre o fundo marinho ele some. No tema escuro entra em branco, como a assinatura do cabeçalho da calculadora. No claro fica o arquivo original, colorido. */ :root:not(.tema-claro) .brand__logo, :root:not(.tema-claro) .brand__mark img, :root:not(.tema-claro) .gate-card__logo { filter: brightness(0) invert(1); opacity: .96; } .brand__name span { color: var(--text-muted); } .brand__desc { color: var(--text-soft); } .module { background: var(--surface); border-color: var(--border); } .module:hover { background: var(--surface); border-color: var(--gold); } .module__icon { background: var(--gold-soft); color: var(--gold); } .module__desc { color: var(--text-soft); } .module__arrow { color: var(--text-muted); } .module--off .module__icon { background: var(--surface-alt); color: var(--text-muted); } .tag { background: var(--gold-soft); color: var(--gold); } .foot { color: var(--text-muted); } .foot a { color: var(--text-soft); border-bottom-color: var(--border-strong); } .foot a:hover { color: var(--gold); border-color: var(--gold); } .back, .card, .soon { background: var(--surface); border-color: var(--border); color: var(--text); } .back:hover { color: var(--gold); border-color: var(--gold); } .soon { background: var(--surface-alt); } .page-head__icon { background: var(--gold-soft); color: var(--gold); } .page-head, .page-head p { border-color: var(--border); color: var(--text-soft); } .page-head h1 { color: var(--text); } /* --------------------------------------------------------- Formulários ---- */ .field label { color: var(--text-soft); } .field input, .field select, .field textarea { background: var(--surface-alt); border-color: var(--border-strong); color: var(--text); } :root.tema-claro .field input, :root.tema-claro .field select, :root.tema-claro .field textarea { background: var(--surface); } .field input::placeholder, .field textarea::placeholder { color: var(--text-muted); } .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); } select option, select optgroup { background-color: var(--navy); color: #fff; } :root.tema-claro select option, :root.tema-claro select optgroup { background-color: #fff; color: var(--navy); } select option:checked { background-color: var(--gold); color: var(--navy); } /* Botão cheio: dourado com texto marinho, como na calculadora. */ .btn { background: var(--gold); color: var(--navy); border-color: var(--gold); font-weight: 600; } .btn:hover { background: #FFFFFF; color: var(--navy); border-color: #FFFFFF; } :root.tema-claro .btn:hover { background: var(--navy); color: #FFFFFF; border-color: var(--navy); } .btn--ghost { background: transparent; color: var(--text); border-color: var(--border-strong); } .btn--ghost:hover { background: transparent; color: var(--gold); border-color: var(--gold); } .note { color: var(--text-muted); border-left-color: var(--border-strong); } .checklist { color: var(--text-soft); } .checklist li::before { background: var(--gold); } .saved { color: var(--ok); } ::selection { background: var(--gold); color: var(--navy); } :focus-visible { outline-color: var(--gold); } /* ------------------------------------------------------- Portão de login -- */ .gate-card { background: var(--surface); border-color: rgba(200, 153, 59, .42); color: var(--text); } .gate-card h1 { color: var(--text); } .gate-card__kicker { color: var(--gold); } .gate-card__copy, .gate-status, .gate-link { color: var(--text-soft); } .gate-card label { color: var(--text); } .gate-card input { background: var(--surface-alt); border-color: var(--border-strong); color: var(--text); } :root.tema-claro .gate-card input { background: #fff; } .gate-card input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); } .gate-submit { background: var(--gold); border-color: var(--gold); color: var(--navy); } .gate-submit:hover:not(:disabled) { background: #fff; border-color: #fff; color: var(--navy); } :root.tema-claro .gate-submit:hover:not(:disabled) { background: var(--navy); border-color: var(--navy); color: #fff; } .gate-link:hover { color: var(--gold); } .gate-status.is-error { color: #F0654A; } :root.tema-claro .gate-status.is-error { color: #b3261e; } .lpe-session { color: var(--text-soft); } .lpe-session__mail { color: var(--text-muted); } .lpe-session__out { background: transparent; border-color: var(--border-strong); color: var(--text-soft); } .lpe-session__out:hover { border-color: var(--gold); color: var(--gold); } .lpe-devbadge { background: var(--surface); border-color: var(--border-strong); color: var(--text-muted); } /* --------------------------------------------------- Seletor de tema ------ */ .tema-seletor { display: inline-grid; grid-auto-flow: column; gap: 4px; padding: 3px; border: 1px solid var(--border); border-radius: 10px; background: rgba(0, 0, 0, .18); } :root.tema-claro .tema-seletor { background: #F2F4F8; border-color: #E6E9F0; } .tema-opcao { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 32px; padding: 5px 12px; border: 0; border-radius: 7px; background: transparent; color: var(--text-soft); font: 600 11px var(--font); letter-spacing: .02em; cursor: pointer; transition: background 140ms ease, color 140ms ease; } .tema-opcao:hover, .tema-opcao:focus-visible { color: var(--text); background: rgba(255, 255, 255, .08); outline: none; } :root.tema-claro .tema-opcao:hover, :root.tema-claro .tema-opcao:focus-visible { color: var(--navy); background: #fff; } .tema-opcao[aria-checked="true"], .tema-opcao[aria-checked="true"]:hover, .tema-opcao[aria-checked="true"]:focus-visible { background: var(--gold); color: var(--navy); } .tema-opcao__icone { font-size: 13px; line-height: 1; } /* No painel o seletor flutua no canto, para funcionar também na tela de login */ .tema-seletor--flutuante { position: fixed; top: 14px; right: 14px; z-index: 1001; box-shadow: var(--shadow-md); backdrop-filter: blur(4px); } @media (max-width: 560px) { .tema-seletor--flutuante { top: 10px; right: 10px; } .tema-opcao { padding: 5px 9px; } .tema-opcao span:not(.tema-opcao__icone) { display: none; } } @media print { .tema-seletor { display: none !important; } }