/* THEME VARIATIONS - Apply themes by adding class to body */ /* Use: */ /* Use: for light mode */ /* ===== LIGHT MODE ===== */ body.mode-light { --bg-primary: #f6f9fc; --bg-secondary: #ffffff; --bg-tertiary: #e7eef7; --surface: rgba(255, 255, 255, 0.9); --surface-hover: rgba(244, 248, 252, 0.96); --surface-light: rgba(232, 240, 248, 1); --text-primary: #0d1b2a; --text-secondary: #415466; --text-muted: #5b6b7c; --border: rgba(13, 27, 42, 0.1); --border-hover: rgba(13, 27, 42, 0.18); --border-light: rgba(13, 27, 42, 0.14); --glass: blur(12px) saturate(180%); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.1); --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.14); /* Sobrescreve o gradiente escuro hardcoded do body em styles.css */ background: radial-gradient(circle at top left, rgba(17, 103, 216, 0.05), transparent 30%), radial-gradient(circle at 82% 18%, rgba(24, 183, 181, 0.03), transparent 20%), var(--bg-primary); } /* Light mode keeps each theme's brand colors but adjusts backgrounds */ body.mode-light.theme-purple { --bg-primary: #f8f5ff; --bg-secondary: #ffffff; --bg-tertiary: #ede6f8; --surface: rgba(255, 255, 255, 0.9); --surface-hover: rgba(248, 243, 255, 0.95); --surface-light: rgba(237, 230, 248, 1); --text-primary: #1e1033; --text-secondary: #3d2e5a; --text-muted: #6b5d82; --shadow-sm: 0 2px 8px rgba(100, 30, 140, 0.08); --shadow-md: 0 8px 24px rgba(100, 30, 140, 0.1); --shadow-lg: 0 16px 48px rgba(100, 30, 140, 0.14); } body.mode-light.theme-green { --bg-primary: #f0f9f4; --bg-secondary: #ffffff; --bg-tertiary: #ddf0e6; --surface: rgba(255, 255, 255, 0.9); --surface-hover: rgba(242, 250, 246, 0.95); --surface-light: rgba(221, 240, 230, 1); --text-primary: #0d2818; --text-secondary: #1e4d35; --text-muted: #4a7a60; --shadow-sm: 0 2px 8px rgba(0, 120, 60, 0.08); --shadow-md: 0 8px 24px rgba(0, 120, 60, 0.1); --shadow-lg: 0 16px 48px rgba(0, 120, 60, 0.14); } body.mode-light.theme-sunset { --bg-primary: #fef5f2; --bg-secondary: #ffffff; --bg-tertiary: #f9e6df; --surface: rgba(255, 255, 255, 0.9); --surface-hover: rgba(254, 246, 243, 0.95); --surface-light: rgba(249, 230, 223, 1); --text-primary: #331810; --text-secondary: #5c3426; --text-muted: #8a5e4d; --shadow-sm: 0 2px 8px rgba(180, 70, 30, 0.08); --shadow-md: 0 8px 24px rgba(180, 70, 30, 0.1); --shadow-lg: 0 16px 48px rgba(180, 70, 30, 0.14); } body.mode-light.theme-ocean { --bg-primary: #f0f7fc; --bg-secondary: #ffffff; --bg-tertiary: #dce9f4; --surface: rgba(255, 255, 255, 0.9); --surface-hover: rgba(242, 248, 252, 0.95); --surface-light: rgba(220, 233, 244, 1); --text-primary: #0c1e2e; --text-secondary: #1e3a52; --text-muted: #4d6e84; --shadow-sm: 0 2px 8px rgba(0, 100, 160, 0.08); --shadow-md: 0 8px 24px rgba(0, 100, 160, 0.1); --shadow-lg: 0 16px 48px rgba(0, 100, 160, 0.14); } body.mode-light.theme-gold { --bg-primary: #fcf8f0; --bg-secondary: #ffffff; --bg-tertiary: #f2e8d4; --surface: rgba(255, 255, 255, 0.9); --surface-hover: rgba(253, 249, 242, 0.95); --surface-light: rgba(242, 232, 212, 1); --text-primary: #2e2410; --text-secondary: #5a4a2a; --text-muted: #87744e; --shadow-sm: 0 2px 8px rgba(150, 110, 40, 0.08); --shadow-md: 0 8px 24px rgba(150, 110, 40, 0.1); --shadow-lg: 0 16px 48px rgba(150, 110, 40, 0.14); } body.mode-light.theme-midnight { --bg-primary: #f3f3f5; --bg-secondary: #ffffff; --bg-tertiary: #e2e2e6; --surface: rgba(255, 255, 255, 0.9); --surface-hover: rgba(245, 245, 245, 0.95); --surface-light: rgba(226, 226, 230, 1); --text-primary: #111115; --text-secondary: #333340; --text-muted: #606070; --brand: #333333; --brand-hover: #1a1a1a; --brand-dark: #444444; } body.mode-light.theme-coral { --bg-primary: #fef4f6; --bg-secondary: #ffffff; --bg-tertiary: #f8dce3; --surface: rgba(255, 255, 255, 0.9); --surface-hover: rgba(254, 245, 247, 0.95); --surface-light: rgba(248, 220, 227, 1); --text-primary: #331018; --text-secondary: #5c2636; --text-muted: #8a4d5e; --shadow-sm: 0 2px 8px rgba(180, 60, 90, 0.08); --shadow-md: 0 8px 24px rgba(180, 60, 90, 0.1); --shadow-lg: 0 16px 48px rgba(180, 60, 90, 0.14); } /* Light mode para tema padrão dark-blue (sem classe de tema no body). Especificidade (0,2,1) vence body:not([class*="theme-"]) (0,1,1) */ body.mode-light:not([class*="theme-"]) { --bg-primary: #f0f6fc; --bg-secondary: #ffffff; --bg-tertiary: #dce9f4; --surface: rgba(255, 255, 255, 0.9); --surface-hover: rgba(242, 248, 252, 0.95); --surface-light: rgba(220, 233, 244, 1); --text-primary: #0c1e2e; --text-secondary: #1e3a52; --text-muted: #4d6e84; --shadow-sm: 0 2px 8px rgba(0, 100, 160, 0.08); --shadow-md: 0 8px 24px rgba(0, 100, 160, 0.1); --shadow-lg: 0 16px 48px rgba(0, 100, 160, 0.14); } /* Light mode overrides for hardcoded colors */ body.mode-light .navbar { background: rgba(255, 255, 255, 0.92); border-bottom: 1px solid rgba(0, 0, 0, 0.08); } body.mode-light .nav-links a { color: var(--text-secondary); } body.mode-light .nav-links a:hover { color: var(--brand-dark); } body.mode-light .background-grid { background-image: linear-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px); } body.mode-light .bg-shape { opacity: 0.12; } body.mode-light .mesh-gradient { opacity: 0.3; } body.mode-light .hero { background: linear-gradient(180deg, rgba(17, 103, 216, 0.06) 0%, transparent 100%); } /* Hero panel mantém fundo escuro por design — garante leitura do texto */ body.mode-light .hero-panel { color: #f0f6fc; } body.mode-light .hero-panel h2 { color: #f0f6fc; } body.mode-light .hero-panel p { color: rgba(220, 235, 250, 0.82); } body.mode-light .hero-panel-card strong { color: #e8f2fb; } body.mode-light .hero-panel-card span { color: rgba(212, 228, 246, 0.78); } body.mode-light .hero-badge { background: rgba(17, 103, 216, 0.08); border-color: rgba(13, 27, 42, 0.08); } body.mode-light .hero-subtitle { color: var(--text-secondary); } body.mode-light h1, body.mode-light h2, body.mode-light h3 { color: var(--text-primary); } body.mode-light .brand { color: var(--text-primary); } body.mode-light .brand-logo { content: url('logo-sosdados-horizontal-light.svg'); } body.mode-light .brand-mark { box-shadow: 0 8px 20px rgba(11, 63, 145, 0.18); } body.mode-light .search input { color: var(--text-primary); background: rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.12); } body.mode-light .search input::placeholder { color: var(--text-muted); } body.mode-light .search input:focus { background: #ffffff; border-color: var(--brand); } body.mode-light .secondary-btn { color: var(--text-primary); background: rgba(0, 0, 0, 0.03); border-color: rgba(0, 0, 0, 0.15); } body.mode-light .secondary-btn:hover { background: rgba(0, 0, 0, 0.06); border-color: var(--brand); } body.mode-light .contact-btn { color: #ffffff; background: linear-gradient(135deg, #0b3f91 0%, #18b7b5 100%); border-color: rgba(17, 103, 216, 0.24); font-weight: 700; } body.mode-light .contact-btn:hover { color: #ffffff; background: var(--brand); } body.mode-light .system-card, body.mode-light .diferencial-card { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.08); box-shadow: var(--shadow-sm); } body.mode-light .system-card:hover, body.mode-light .diferencial-card:hover { background: #ffffff; box-shadow: var(--shadow-lg); border-color: rgba(0, 0, 0, 0.12); } body.mode-light .diferencial-card .card-icon { background: rgba(0, 100, 180, 0.06); } body.mode-light .counter { background: rgba(0, 0, 0, 0.05); color: var(--text-primary); } body.mode-light .card-highlights { background: rgba(0, 0, 0, 0.02); border-color: rgba(0, 0, 0, 0.08); } body.mode-light .card-highlights li { color: var(--text-secondary); } body.mode-light .theme-toggle { background: rgba(0, 0, 0, 0.05); border-color: rgba(0, 0, 0, 0.15); } body.mode-light .mode-toggle { background: rgba(0, 0, 0, 0.05); border-color: rgba(0, 0, 0, 0.15); } body.mode-light .theme-dropdown { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.1); box-shadow: var(--shadow-lg); } body.mode-light .theme-option { color: var(--text-secondary); } body.mode-light .theme-option:hover { background: rgba(0, 100, 180, 0.06); color: var(--text-primary); } body.mode-light .theme-option.active { color: var(--brand-dark); background: rgba(0, 100, 180, 0.1); } body.mode-light .contact-modal { background: #ffffff; box-shadow: var(--shadow-lg); } body.mode-light .contact-modal h2 { color: var(--text-primary); } body.mode-light .contact-modal label { color: var(--text-secondary); } body.mode-light .contact-modal .form-group input, body.mode-light .contact-modal .form-group textarea { background: #f5f7fa; color: var(--text-primary); border-color: rgba(0, 0, 0, 0.12); } body.mode-light .contact-modal .form-group input:focus, body.mode-light .contact-modal .form-group textarea:focus { background: #ffffff; border-color: var(--brand); } body.mode-light .contact-modal .form-group input::placeholder, body.mode-light .contact-modal .form-group textarea::placeholder { color: var(--text-muted); } body.mode-light .footer { background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.03) 100%); border-top: 1px solid rgba(0, 0, 0, 0.06); } body.mode-light .footer h3, body.mode-light .footer h4 { color: var(--text-primary); } body.mode-light .footer p, body.mode-light .footer a, body.mode-light .footer li { color: var(--text-secondary); } body.mode-light .footer a:hover { color: var(--brand-dark); } body.mode-light .tech-item { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.08); box-shadow: var(--shadow-sm); } body.mode-light .tech-item h3 { color: var(--text-primary); } body.mode-light .tech-item p { color: var(--text-secondary); } body.mode-light .stat-label { color: var(--text-secondary); } body.mode-light .domain-link { color: var(--text-muted); } body.mode-light .domain-link:hover { color: var(--brand-dark); } body.mode-light .card-description { color: var(--text-secondary); } body.mode-light .card-meta span { color: var(--text-muted); } body.mode-light .status { color: #ffffff; } body.mode-light .contact-submit-btn { color: #ffffff; } body.mode-light .contact-modal-overlay { background: rgba(0, 0, 0, 0.4); } body.mode-light .primary-btn { color: #ffffff; } /* Matrix theme always stays dark */ body.mode-light.theme-matrix { --bg-primary: #000000; --bg-secondary: #050505; --bg-tertiary: #0a0a0a; --surface: rgba(0, 15, 0, 0.8); --surface-hover: rgba(0, 30, 0, 0.9); --surface-light: rgba(0, 50, 0, 0.95); --text-primary: #00ff41; --text-secondary: #008f11; --text-muted: #003b00; --border: #003b00; --border-light: #008f11; } body.mode-light.theme-matrix .navbar { background: rgba(0, 0, 0, 0.8); } body.mode-light.theme-matrix .system-card, body.mode-light.theme-matrix .diferencial-card { background: rgba(0, 15, 0, 0.8); box-shadow: var(--shadow-sm); } body.mode-light.theme-matrix .status, body.mode-light.theme-matrix .contact-submit-btn { color: #000000; } /* ===== DARK BLUE NEON (Default) ===== */ :root.theme-dark-blue, body:not([class*="theme-"]) { --bg-primary: #06111f; --bg-secondary: #0b1b2e; --bg-tertiary: #102a44; --surface: #0d2238; --surface-hover: #13304d; --surface-light: #1b4264; --text-primary: #f4f8fb; --text-secondary: #c5d2df; --text-muted: #a7b8c9; --brand: #1167d8; --brand-hover: #1ba6d9; --brand-dark: #08265a; --accent-1: #47d6cc; --accent-2: #1ba6d9; --accent-3: #18b7b5; --border: #1b3c5d; --border-light: #29557f; --shadow-sm: 0 4px 12px rgba(8, 38, 90, 0.18); --shadow-md: 0 10px 30px rgba(11, 63, 145, 0.18); --shadow-lg: 0 20px 60px rgba(17, 103, 216, 0.22); } /* ===== PURPLE MAGIC ===== */ body.theme-purple { --bg-primary: #2d1b69; --bg-secondary: #3d2a7f; --bg-tertiary: #4a3a92; --surface: #362152; --surface-hover: #3f2963; --surface-light: #4a3575; --text-primary: #f0e6ff; --text-secondary: #d4c4e8; --text-muted: #b0a4c4; --brand: #c041ff; --brand-hover: #d455ff; --brand-dark: #9030cc; --accent-1: #ff4da8; --accent-2: #00ffcc; --accent-3: #ffa500; --border: #4a3a75; --border-light: #5a4a85; --shadow-sm: 0 4px 12px rgba(192, 65, 255, 0.08); --shadow-md: 0 10px 30px rgba(192, 65, 255, 0.12); --shadow-lg: 0 20px 60px rgba(192, 65, 255, 0.2); } body.theme-purple .hero { background: linear-gradient(180deg, rgba(192, 65, 255, 0.1) 0%, transparent 100%); } /* ===== ECO GREEN ===== */ body.theme-green { --bg-primary: #0d3d2e; --bg-secondary: #1a5239; --bg-tertiary: #266845; --surface: #1a4a3d; --surface-hover: #22594e; --surface-light: #2a6b5d; --text-primary: #e8f5f0; --text-secondary: #c4d9d3; --text-muted: #a0b8b0; --brand: #00d97d; --brand-hover: #00ff8f; --brand-dark: #00a860; --accent-1: #00ffaa; --accent-2: #ff6b9d; --accent-3: #ffa500; --border: #2a5a4f; --border-light: #3a7a6f; --shadow-sm: 0 4px 12px rgba(0, 217, 125, 0.08); --shadow-md: 0 10px 30px rgba(0, 217, 125, 0.12); --shadow-lg: 0 20px 60px rgba(0, 217, 125, 0.2); } body.theme-green .hero { background: linear-gradient(180deg, rgba(0, 217, 125, 0.1) 0%, transparent 100%); } /* ===== SUNSET WARM ===== */ body.theme-sunset { --bg-primary: #5a2e3a; --bg-secondary: #6f3a4a; --bg-tertiary: #85465a; --surface: #6a3a49; --surface-hover: #78444f; --surface-light: #895566; --text-primary: #fff0f0; --text-secondary: #f0d4d4; --text-muted: #d9b0b0; --brand: #ff6b3b; --brand-hover: #ff7f4f; --brand-dark: #e64a1f; --accent-1: #ffb366; --accent-2: #ff4d7a; --accent-3: #ffda00; --border: #7a5a6f; --border-light: #8a6a7f; --shadow-sm: 0 4px 12px rgba(255, 107, 59, 0.08); --shadow-md: 0 10px 30px rgba(255, 107, 59, 0.12); --shadow-lg: 0 20px 60px rgba(255, 107, 59, 0.2); } body.theme-sunset .hero { background: linear-gradient(180deg, rgba(255, 107, 59, 0.1) 0%, transparent 100%); } /* ===== OCEAN BLUE ===== */ body.theme-ocean { --bg-primary: #0a2540; --bg-secondary: #143653; --bg-tertiary: #1f4a66; --surface: #163d52; --surface-hover: #1d4a63; --surface-light: #255a7a; --text-primary: #e6f0f9; --text-secondary: #c8dce8; --text-muted: #a8c4d8; --brand: #00a9e0; --brand-hover: #00c1ff; --brand-dark: #0080b8; --accent-1: #00e6ff; --accent-2: #ff6b9d; --accent-3: #ffa500; --border: #2a5270; --border-light: #3a6290; --shadow-sm: 0 4px 12px rgba(0, 169, 224, 0.08); --shadow-md: 0 10px 30px rgba(0, 169, 224, 0.12); --shadow-lg: 0 20px 60px rgba(0, 169, 224, 0.2); } body.theme-ocean .hero { background: linear-gradient(180deg, rgba(0, 169, 224, 0.1) 0%, transparent 100%); } /* ===== PREMIUM GOLD ===== */ body.theme-gold { --bg-primary: #3d2817; --bg-secondary: #523625; --bg-tertiary: #6a4831; --surface: #534129; --surface-hover: #614d35; --surface-light: #755f43; --text-primary: #fdf8f0; --text-secondary: #e8dcc8; --text-muted: #d4c4a8; --brand: #d4a745; --brand-hover: #e8bb57; --brand-dark: #b8873a; --accent-1: #ffdb5c; --accent-2: #ff8855; --accent-3: #ff6b4a; --border: #6a5845; --border-light: #7a6855; --shadow-sm: 0 4px 12px rgba(212, 167, 69, 0.08); --shadow-md: 0 10px 30px rgba(212, 167, 69, 0.12); --shadow-lg: 0 20px 60px rgba(212, 167, 69, 0.2); } body.theme-gold .hero { background: linear-gradient(180deg, rgba(212, 167, 69, 0.1) 0%, transparent 100%); } /* ===== MIDNIGHT BLACK ===== */ body.theme-midnight { --bg-primary: #0d0d0d; --bg-secondary: #1a1a1a; --bg-tertiary: #2a2a2a; --surface: #161616; --surface-hover: #1e1e1e; --surface-light: #282828; --text-primary: #ffffff; --text-secondary: #e0e0e0; --text-muted: #b0b0b0; --brand: #e8e8e8; --brand-hover: #ffffff; --brand-dark: #d0d0d0; --accent-1: #f0e68c; --accent-2: #ffb6c1; --accent-3: #ffe4b5; --border: #3a3a3a; --border-light: #4a4a4a; --shadow-sm: 0 4px 12px rgba(232, 232, 232, 0.08); --shadow-md: 0 10px 30px rgba(232, 232, 232, 0.12); --shadow-lg: 0 20px 60px rgba(232, 232, 232, 0.2); } body.theme-midnight .hero { background: linear-gradient(180deg, rgba(232, 232, 232, 0.05) 0%, transparent 100%); } /* ===== CORAL VIBES ===== */ body.theme-coral { --bg-primary: #4a2a3a; --bg-secondary: #5f3651; --bg-tertiary: #734a67; --surface: #603855; --surface-hover: #6f4463; --surface-light: #805575; --text-primary: #fff0f5; --text-secondary: #f5d4e0; --text-muted: #dab0c8; --brand: #ff6b8c; --brand-hover: #ff7fa0; --brand-dark: #ff4a75; --accent-1: #ff8ca8; --accent-2: #ffa8d2; --accent-3: #ffb84d; --border: #6a4a62; --border-light: #7a5a72; --shadow-sm: 0 4px 12px rgba(255, 107, 140, 0.08); --shadow-md: 0 10px 30px rgba(255, 107, 140, 0.12); --shadow-lg: 0 20px 60px rgba(255, 107, 140, 0.2); } body.theme-coral .hero { background: linear-gradient(180deg, rgba(255, 107, 140, 0.1) 0%, transparent 100%); } /* ===== SOSDADOS BLUE ===== */ body.theme-sosdados-blue { --bg-primary: #020d07; --bg-secondary: #061510; --bg-tertiary: #0a2017; --surface: #0a1d12; --surface-hover: #122819; --surface-light: #1a3524; --text-primary: #e8fff3; --text-secondary: #c0e8d4; --text-muted: #7ab09a; --brand: #1ba6d9; --brand-hover: #47d6cc; --brand-dark: #08265a; --accent-1: #47d6cc; --accent-2: #18b7b5; --accent-3: #1167d8; --border: #0f2e1e; --border-light: #1a4030; --shadow-sm: 0 4px 12px rgba(27, 166, 217, 0.08); --shadow-md: 0 10px 30px rgba(27, 166, 217, 0.12); --shadow-lg: 0 20px 60px rgba(27, 166, 217, 0.2); } body.theme-sosdados-blue .hero { background: linear-gradient(180deg, rgba(27, 166, 217, 0.1) 0%, transparent 100%); } body.mode-light.theme-sosdados-blue { --bg-primary: #f3f8fd; --bg-secondary: #ffffff; --bg-tertiary: #dbe8f7; --surface: rgba(255, 255, 255, 0.9); --surface-hover: rgba(245, 250, 255, 0.95); --surface-light: rgba(219, 232, 247, 1); --text-primary: #0c1e31; --text-secondary: #34516d; --text-muted: #5d7892; } /* ===== SOSDADOS TEAL ===== */ body.theme-sosdados-teal { --bg-primary: #030f0b; --bg-secondary: #081a14; --bg-tertiary: #0d241c; --surface: #0c1f18; --surface-hover: #142a22; --surface-light: #1c3a2e; --text-primary: #e0fff5; --text-secondary: #a8d9c0; --text-muted: #5a8a78; --brand: #18b7b5; --brand-hover: #47d6cc; --brand-dark: #0a5050; --accent-1: #1ba6d9; --accent-2: #47d6cc; --accent-3: #1167d8; --border: #0d2a20; --border-light: #163d30; --shadow-sm: 0 4px 12px rgba(24, 183, 181, 0.08); --shadow-md: 0 10px 30px rgba(24, 183, 181, 0.12); --shadow-lg: 0 20px 60px rgba(24, 183, 181, 0.2); } body.theme-sosdados-teal .hero { background: linear-gradient(180deg, rgba(24, 183, 181, 0.1) 0%, transparent 100%); } body.mode-light.theme-sosdados-teal { --bg-primary: #f2fbfb; --bg-secondary: #ffffff; --bg-tertiary: #d9f2f0; --surface: rgba(255, 255, 255, 0.9); --surface-hover: rgba(244, 253, 252, 0.95); --surface-light: rgba(217, 242, 240, 1); --text-primary: #0d232a; --text-secondary: #2e5960; --text-muted: #557b81; } /* ===== MATRIX DIGITAL ===== */ body.theme-matrix { --bg-primary: #000000; --bg-secondary: #050505; --bg-tertiary: #0a0a0a; --surface: rgba(0, 15, 0, 0.8); --surface-hover: rgba(0, 30, 0, 0.9); --surface-light: rgba(0, 50, 0, 0.95); --text-primary: #00ff41; /* Digital Green */ --text-secondary: #008f11; --text-muted: #003b00; --brand: #00ff41; --brand-hover: #00ff00; --brand-dark: #008f11; --accent-1: #00ff41; --accent-2: #00aa41; --accent-3: #ffffff; --border: #003b00; --border-light: #008f11; --shadow-sm: 0 4px 12px rgba(0, 255, 65, 0.1); --shadow-md: 0 10px 30px rgba(0, 255, 65, 0.15); --shadow-lg: 0 20px 60px rgba(0, 255, 65, 0.2); --glass: blur(4px); } body.theme-matrix .hero { background: transparent; } body.theme-matrix .background-grid, body.theme-matrix .mesh-gradient, body.theme-matrix .bg-shape { display: none !important; } /* ===== BACKGROUND GRID ADAPTATION ===== */ .background-grid { background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px); } /* ===== GRADIENT BG SHAPES ADAPTATION ===== */ body.theme-dark-blue .bg-shape-1 { background: rgba(0, 212, 255, 0.15); } body.theme-dark-blue .bg-shape-2 { background: rgba(255, 107, 157, 0.15); } body.theme-purple .bg-shape-1 { background: rgba(192, 65, 255, 0.15); } body.theme-purple .bg-shape-2 { background: rgba(255, 77, 168, 0.15); } body.theme-green .bg-shape-1 { background: rgba(0, 217, 125, 0.15); } body.theme-green .bg-shape-2 { background: rgba(255, 107, 157, 0.15); } body.theme-sunset .bg-shape-1 { background: rgba(255, 107, 59, 0.15); } body.theme-sunset .bg-shape-2 { background: rgba(255, 77, 122, 0.15); } body.theme-ocean .bg-shape-1 { background: rgba(0, 169, 224, 0.15); } body.theme-ocean .bg-shape-2 { background: rgba(0, 230, 255, 0.15); } body.theme-gold .bg-shape-1 { background: rgba(212, 167, 69, 0.15); } body.theme-gold .bg-shape-2 { background: rgba(255, 181, 93, 0.15); } body.theme-midnight .bg-shape-1 { background: rgba(255, 255, 255, 0.05); } body.theme-midnight .bg-shape-2 { background: rgba(240, 230, 140, 0.05); } body.theme-coral .bg-shape-1 { background: rgba(255, 107, 140, 0.15); } body.theme-coral .bg-shape-2 { background: rgba(255, 168, 210, 0.15); } body.theme-sosdados-blue .bg-shape-1 { background: rgba(27, 166, 217, 0.16); } body.theme-sosdados-blue .bg-shape-2 { background: rgba(71, 214, 204, 0.14); } body.theme-sosdados-teal .bg-shape-1 { background: rgba(24, 183, 181, 0.16); } body.theme-sosdados-teal .bg-shape-2 { background: rgba(17, 103, 216, 0.14); } /* ===== LIGHT MODE TEXT FIX ===== * body:not([class*="theme-"]) (dark-blue default) tem mesma especificidade * que body.mode-light mas vem depois no arquivo, sobrescrevendo as variáveis * de texto. Este bloco usa especificidade maior para garantir textos escuros * no modo claro independentemente do tema ativo. */ body.mode-light:not([class*="theme-"]), body.mode-light.theme-dark-blue { --text-primary: #0d1b2a; --text-secondary: #415466; --text-muted: #5b6b7c; }