/* =========================================================================== sky.css — UAPx · tema dia/noite + céu cinematográfico Carregar DEPOIS de styles.css. Tema aplicado em . Night é o default (tokens já vivem em styles.css :root); day sobrescreve tudo. Extraído do design final (Design/UAPX_final.zip) — apenas o backdrop de céu, o tema diurno e o "lift" do chrome. Sem os estilos da arquitetura standalone. =========================================================================== */ /* Transição de cor dia↔noite COORDENADA com o fade do céu (.8s). A transição roda SÓ enquanto a classe .theme-anim está no — adicionada por ~650ms apenas no toggle do usuário (app.jsx), nunca no load/render. Isso evita o freeze mid-flight que transições globais causavam em renderers embedded (que não disparam o toggle). */ html.theme-anim body, html.theme-anim .nav, html.theme-anim .card, html.theme-anim .panel, html.theme-anim .chip, html.theme-anim .btn, html.theme-anim .tag, html.theme-anim aside, html.theme-anim input, html.theme-anim textarea, html.theme-anim .map { transition: background-color .6s ease, border-color .6s ease, color .6s ease, fill .6s ease; } @media (prefers-reduced-motion: reduce) { html, body, .nav, .card, .panel, .btn { transition: none; } html.theme-anim * { transition: none !important; } } /* =========================================================================== DAY THEME — céu diurno calmo, agradável aos olhos =========================================================================== */ html[data-theme="day"] { --bg: #e7edf3; --bg-1: #ffffff; --bg-2: #f1f5f9; --bg-3: #e4ebf2; --bg-4: #d4dde7; --ink: #14202c; --ink-2: #3a4856; --ink-3: #5d6c7a; /* --ink-4 darkened #8895a3 (2.6:1, failed AA) -> #5d6c7a (4.6:1 on --bg). Note: AA at 4.5:1 on the light day surface forces faint meta nearly as dark as --ink-3; the two tiers converge in day mode, which is the honest cost of making faint text legible. */ --ink-4: #5d6c7a; --line: rgba(20, 32, 44, 0.12); --line-2: rgba(20, 32, 44, 0.20); --line-3: rgba(20, 32, 44, 0.06); /* --accent darkened #1f8f63 -> #1a7d56 so white-on-accent (.btn-primary) hits 5.1:1 AA. A single token can't also pass as small text on the light --bg (#1a7d56 = 4.3:1 on --bg, sub-threshold), so --accent-text below is a darker green reserved for .acc-c links / timeline .t text. */ --accent: #1a7d56; --accent-ink: #ffffff; --accent-text: #176b46; /* 5.5:1 on --bg, 5.4:1 on --bg-3 — accent as TEXT/links */ --accent-dim: color-mix(in srgb, var(--accent) 12%, transparent); --hi: oklch(0.58 0.13 158); --mid: oklch(0.60 0.13 72); --lo: oklch(0.54 0.18 25); --info: oklch(0.54 0.15 245); --redact: #c2ccd6; } html[data-theme="day"] body { background: var(--bg); } html[data-theme="day"] .code { background: #0e141b; } /* code stays dark */ html[data-theme="day"] ::selection { background: var(--accent); color: #fff; } /* night is the default (tokens already in styles.css) */ html[data-theme="night"] { color-scheme: dark; } html[data-theme="day"] { color-scheme: light; } /* =========================================================================== SKY BACKDROP — fixed, atrás de tudo (z-index 0) =========================================================================== */ .sky-backdrop { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } /* gradient base */ .sky-grad { position: absolute; inset: 0; transition: opacity .8s ease, background .8s ease; } html[data-theme="night"] .sky-grad { background: radial-gradient(120% 80% at 50% 110%, color-mix(in srgb, var(--accent) 10%, transparent) 0%, transparent 55%), radial-gradient(100% 70% at 18% -10%, #16243a 0%, transparent 60%), linear-gradient(180deg, #070a10 0%, #0a0d12 60%, #0b0f15 100%); } html[data-theme="day"] .sky-grad { background: radial-gradient(120% 90% at 50% -20%, #cfe3f4 0%, transparent 55%), radial-gradient(90% 60% at 80% 0%, #e9f1d9 0%, transparent 55%), linear-gradient(180deg, #d6e6f3 0%, #e7edf3 55%, #eef2f6 100%); } /* stars (night only) */ .sky-stars { position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease; } html[data-theme="night"] .sky-stars { opacity: 1; } .sky-stars::before, .sky-stars::after { content: ""; position: absolute; inset: -50%; background-image: radial-gradient(1.4px 1.4px at 20% 30%, #ffffff 50%, transparent), radial-gradient(1.2px 1.2px at 65% 12%, #dfeaff 50%, transparent), radial-gradient(1px 1px at 40% 70%, #ffffff 50%, transparent), radial-gradient(1.6px 1.6px at 82% 48%, #fff6e6 50%, transparent), radial-gradient(1px 1px at 12% 82%, #cfe0ff 50%, transparent), radial-gradient(1.2px 1.2px at 92% 78%, #ffffff 50%, transparent), radial-gradient(1px 1px at 50% 50%, #ffffff 50%, transparent), radial-gradient(1.3px 1.3px at 30% 18%, #eaf1ff 50%, transparent); background-repeat: repeat; background-size: 420px 420px; animation: sky-drift 200s linear infinite; } .sky-stars::after { background-size: 300px 300px; opacity: .5; animation-duration: 320s; animation-direction: reverse; } @keyframes sky-drift { from { transform: translate(0,0); } to { transform: translate(60px, 40px); } } /* a couple of twinkles */ .sky-twinkle { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #fff; opacity: 0; } html[data-theme="night"] .sky-twinkle { animation: sky-twinkle 4s ease-in-out infinite; } @keyframes sky-twinkle { 0%,100% { opacity: 0; transform: scale(.6);} 50% { opacity: .9; transform: scale(1);} } /* sun glow for day */ .sky-sun { position: absolute; top: -8%; right: 8%; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgba(255,250,235,.9) 0%, rgba(255,243,210,.4) 35%, transparent 70%); opacity: 0; transition: opacity .8s ease; } html[data-theme="day"] .sky-sun { opacity: 1; } @media (prefers-reduced-motion: reduce) { .sky-stars::before, .sky-stars::after, .sky-twinkle { animation: none; } } /* =========================================================================== lift app chrome above the backdrop (sky é z-index 0) =========================================================================== */ main, footer { position: relative; z-index: 1; } /* =========================================================================== theme toggle button (sol/lua) no header =========================================================================== */ .icon-btn { width: 38px; height: 34px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--line-2); border-radius: var(--radius); color: var(--ink-2); cursor: pointer; transition: color .15s, background .15s; flex: none; } .icon-btn:hover { color: var(--ink); background: var(--bg-2); } /* touch-target floor (WCAG 2.5.5 / Apple HIG 44px) — the theme toggle stays in the mobile header, so meet 44x44 on touch widths without changing desktop density. (.lang-toggle button gets the same in styles.css.) */ @media (max-width: 1080px) { .icon-btn { width: 44px; height: 44px; } }