/* ═══════════════════════════════════════════════════════════════ themes.css — Sistema de temas (claro rosa-suave / noturno) ──────────────────────────────────────────────────────────────── • Claro (padrão): rosa suave elegante (ver :root em base.css). • Escuro: céu noturno azul/rosa profundo, estrelas piscando + estrelas cadentes, via [data-theme="dark"] no . ═══════════════════════════════════════════════════════════════ */ /* ─── Variáveis do tema escuro ─────────────────────────────── */ [data-theme="dark"] { --cream: #0E1026; --cream-2: #171A38; --rose: #E79AB0; --rose-deep: #EF7FA4; --rose-soft: #251A38; --gold: #D9B45C; --gold-soft: #3A3150; --sage: #8B93D8; --ink: #F0E7F6; --ink-60: rgba(240, 231, 246, .62); --ink-40: rgba(240, 231, 246, .45); --ink-12: rgba(240, 231, 246, .14); --white-75: rgba(20, 18, 48, .72); --glass: rgba(20, 18, 48, .62); --glass-strong: rgba(24, 21, 56, .88); --shadow-soft: 0 10px 30px rgba(0, 0, 0, .35); --shadow-lift: 0 18px 44px rgba(0, 0, 0, .50); --shadow-card: 0 6px 22px rgba(0, 0, 0, .40); --ring-gold: 0 0 0 1px rgba(217,180,92,.5), 0 10px 34px rgba(231,154,176,.14); } /* Fundo do corpo com nebulosa rosa/azul no escuro */ [data-theme="dark"] body { background: radial-gradient(110% 80% at 15% 0%, rgba(231,154,176,.10), transparent 55%), radial-gradient(90% 70% at 85% 15%, rgba(139,147,216,.12), transparent 60%), radial-gradient(120% 90% at 50% 110%, rgba(70,40,110,.25), transparent 65%), var(--cream); } /* Telas no escuro */ [data-theme="dark"] #screen-portal, [data-theme="dark"] #screen-welcome { background: radial-gradient(100% 70% at 20% 5%, rgba(231,154,176,.12), transparent 55%), radial-gradient(90% 70% at 80% 10%, rgba(139,147,216,.14), transparent 60%), radial-gradient(120% 90% at 50% 110%, rgba(52,32,92,.35), transparent 70%), linear-gradient(180deg, #0E1026, #131233); } [data-theme="dark"] #screen-gallery, [data-theme="dark"] #screen-atelier { background: var(--cream); } /* ─── Superfícies / componentes no escuro ─────────────────── */ [data-theme="dark"] .topbar { background: rgba(14,16,38,.82); border-bottom-color: rgba(217,180,92,.25); } [data-theme="dark"] .tabs { background: rgba(20,18,48,.5); border-bottom-color: rgba(217,180,92,.22); } [data-theme="dark"] .panel-card { background: rgba(23,26,56,.55); border-color: rgba(217,180,92,.22); } [data-theme="dark"] .group-head { background: rgba(23,26,56,.6); border-color: rgba(217,180,92,.22); } [data-theme="dark"] .item-row { background: rgba(20,22,48,.5); border-color: rgba(217,180,92,.16); } [data-theme="dark"] .board-card { background: rgba(23,26,56,.7); border-color: rgba(217,180,92,.2); } [data-theme="dark"] .board-grid { background: rgba(20,22,48,.4); border-color: rgba(217,180,92,.16); } [data-theme="dark"] .up-row { background: rgba(23,26,56,.7); border-color: rgba(217,180,92,.2); } [data-theme="dark"] .dropzone { background: rgba(23,26,56,.4); } [data-theme="dark"] .input, [data-theme="dark"] .select, [data-theme="dark"] .textarea { background: rgba(23,26,56,.6); color: var(--ink); border-color: var(--ink-12); } [data-theme="dark"] .input:focus, [data-theme="dark"] .select:focus, [data-theme="dark"] .textarea:focus { background: #1B1E42; box-shadow: 0 0 0 3px rgba(231,154,176,.15); } [data-theme="dark"] .tool-btn { background: rgba(23,26,56,.6); border-color: var(--ink-12); color: var(--ink-60); } [data-theme="dark"] .chip { background: rgba(23,26,56,.5); border-color: var(--ink-12); color: var(--ink-60); } [data-theme="dark"] .chip.is-active { background: rgba(231,154,176,.16); border-color: var(--rose); color: var(--rose); } [data-theme="dark"] .icon-btn { background: rgba(23,26,56,.7); } [data-theme="dark"] .toast { background: rgba(24,21,56,.92); border-color: var(--ink-12); } [data-theme="dark"] .modal { background: var(--glass-strong); } [data-theme="dark"] .cover-card { background: var(--cream-2); } [data-theme="dark"] .rail-nav { background: rgba(24,21,56,.85); } [data-theme="dark"] .reader-layer { background: rgba(10,11,28,.97); } [data-theme="dark"] .reader-bar { background: rgba(20,18,48,.7); } [data-theme="dark"] .reader-dock { background: rgba(24,21,56,.9); } [data-theme="dark"] .reader-canvas-wrap { background: #fff; } [data-theme="dark"] .letter-frame { background: #fff; } [data-theme="dark"] .envelope-layer { background: rgba(10,11,28,.85); } [data-theme="dark"] .loading-overlay { background: rgba(10,11,28,.75); } [data-theme="dark"] .editor-inspector { background: rgba(23,26,56,.7); border-color: rgba(217,180,92,.22); } [data-theme="dark"] .editor-banner { background: rgba(23,26,56,.5); } [data-theme="dark"] .reader-outline { background: rgba(20,18,48,.96); } [data-theme="dark"] .page-error { background: #171A38; } [data-theme="dark"] .board-thumb, [data-theme="dark"] .up-thumb, [data-theme="dark"] .item-thumb { background: var(--cream-2); } [data-theme="dark"] .letter-canvas { box-shadow: 0 0 0 1px rgba(217,180,92,.3); } [data-theme="dark"] .portal-card, [data-theme="dark"] .loading-card { background: var(--glass); } [data-theme="dark"] .sync-pill { background: rgba(23,26,56,.6); } [data-theme="dark"] .btn { background: transparent; } [data-theme="dark"] .btn-gold { background: linear-gradient(135deg, rgba(217,180,92,.16), rgba(231,154,176,.06)); } [data-theme="dark"] .cover-placeholder { background: linear-gradient(160deg, var(--cream), var(--rose-soft)); color: var(--ink-40); } [data-theme="dark"] .reader-page-ph { background: linear-gradient(110deg,#171A38 30%,#20234c 50%,#171A38 70%); background-size:220% 100%; } /* Overrides adicionais de legibilidade no escuro */ [data-theme="dark"] .board-group-head { background: rgba(23,26,56,.6); border-color: rgba(217,180,92,.22); } [data-theme="dark"] .reader-jump { background: rgba(23,26,56,.7); color: var(--ink); border-color: var(--ink-12); } [data-theme="dark"] .select { background-image: linear-gradient(45deg, transparent 50%, rgba(240,231,246,.5) 50%), linear-gradient(135deg, rgba(240,231,246,.5) 50%, transparent 50%); } [data-theme="dark"] .btn-solid { background: var(--rose); color: #14122e; border-color: var(--rose); } [data-theme="dark"] .btn-solid:hover { background: var(--rose-deep); } [data-theme="dark"] .up-config { border-top-color: var(--ink-12); } [data-theme="dark"] .cover-badge { background: rgba(20,18,48,.85); color: var(--ink); border-color: rgba(217,180,92,.4); } [data-theme="dark"] .code-input { color: var(--ink); } [data-theme="dark"] .item-row:hover { background: rgba(28,31,64,.8); } [data-theme="dark"] .glass { background: var(--glass); } [data-theme="dark"] .modal.slim, [data-theme="dark"] .modal.wide { background: var(--glass-strong); } [data-theme="dark"] .publish-bar { background: rgba(24,21,56,.9); } [data-theme="dark"] .letter-stage .letter-cap h3 { color: var(--ink); } [data-theme="dark"] .welcome-title, [data-theme="dark"] .script-title { color: var(--ink); } [data-theme="dark"] .drag-handle:hover { background: rgba(231,154,176,.15); color: var(--rose); } /* ═══════ Céu estrelado (somente no escuro) ═══════ */ #stars-layer { position: fixed; inset: 0; z-index: 45; pointer-events: none; overflow: hidden; display: none; } [data-theme="dark"] #stars-layer { display: block; } #stars-layer .star { position: absolute; border-radius: 50%; background: #fff; box-shadow: 0 0 6px rgba(255,255,255,.5); animation: twinkle ease-in-out infinite; } #stars-layer .star.pink { background: #F3B9CC; box-shadow: 0 0 6px rgba(243,185,204,.6); } #stars-layer .star.blue { background: #A9B4F0; box-shadow: 0 0 6px rgba(169,180,240,.6); } @keyframes twinkle { 0%, 100% { opacity: .12; transform: scale(.75); } 50% { opacity: .95; transform: scale(1.2); } } .shooting-star { position: absolute; width: 130px; height: 2px; background: linear-gradient(90deg, #fff, rgba(243,185,204,.6), transparent); border-radius: 2px; opacity: 0; transform: rotate(-32deg); animation: shoot 7s linear infinite; } .shooting-star.s2 { animation-delay: 3.4s; top: 12%; left: 88%; } .shooting-star.s1 { top: 6%; left: 78%; } @keyframes shoot { 0% { transform: translate(0,0) rotate(-32deg); opacity: 0; } 4% { opacity: 1; } 14% { transform: translate(-58vw, 36vw) rotate(-32deg); opacity: 0; } 100% { transform: translate(-58vw, 36vw) rotate(-32deg); opacity: 0; } } /* ═══════ Botão flutuante de tema ═══════ */ .theme-toggle { position: fixed; right: 20px; bottom: 20px; z-index: 5200; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--ink); background: var(--glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(212,175,55,.4); box-shadow: var(--shadow-lift); transition: transform .3s var(--ease), box-shadow .3s var(--ease); } .theme-toggle:hover { transform: translateY(-3px) rotate(8deg); box-shadow: var(--ring-gold); } .theme-toggle svg { position: absolute; inset: 0; margin: auto; transition: opacity .3s, transform .4s var(--ease); } .theme-toggle .icon-moon { opacity: 0; transform: scale(.5) rotate(-90deg); } .theme-toggle .icon-sun { opacity: 1; transform: scale(1); } [data-theme="dark"] .theme-toggle .icon-moon { opacity: 1; transform: scale(1) rotate(0); } [data-theme="dark"] .theme-toggle .icon-sun { opacity: 0; transform: scale(.5) rotate(90deg); }