/* darkmode.css */ /* This class is applied to the tag to activate dark mode */ body.dark-mode { --bg: #060606; --panel: #1f2937; --text: #e5e7eb; --muted: #9ca3af; --brand: #f27e97; /* Brand color for dark mode */ --border: #374151; --card-glass: rgba(31, 41, 55, 0.7); /* Dark semi-transparent glass */ --shadow: 0 10px 40px 0 rgba(0,0,0,0.2); /* Update background gradient for dark mode */ background: linear-gradient(145deg, var(--bg) 0%, #1f2937 80%, var(--brand) 100%); } /* Header and Footer */ body.dark-mode .site-header, body.dark-mode .site-footer { background: rgba(31, 41, 55, 0.8); border-color: var(--border); } /* Brand and Text Colors */ body.dark-mode .brand { background: linear-gradient(90deg, var(--brand), var(--accent3) 80%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } body.dark-mode .nav-list a { color: var(--text); } body.dark-mode .nav-list a:hover { color: #fff; } /* Hero Section */ body.dark-mode .hero { background: linear-gradient(180deg, var(--bg) 0%, var(--panel) 100%); border-color: var(--border); } /* Cards */ body.dark-mode .card { background: var(--card-glass); border-color: var(--border); } body.dark-mode .card:hover { border-color: var(--brand); box-shadow: 0 10px 48px 0 rgba(167, 139, 250, 0.15); } body.dark-mode .card h3 { color: var(--brand); } /* Search Inputs */ body.dark-mode .controls input[type=search] { background: var(--bg); border-color: var(--border); color: var(--text); } body.dark-mode .controls input[type=search]:focus { border-color: var(--accent3); box-shadow: 0 4px 20px 0 rgba(52,152,219,0.2); } /* Slider and Nav Buttons */ body.dark-mode .nav-button { background: rgba(55, 65, 81, 0.7); color: var(--muted); border-color: var(--border); } body.dark-mode .nav-button:hover { background: var(--panel); border-color: var(--brand); color: var(--brand); } body.dark-mode .nav-button.active { background: var(--brand); color: #fff; border-color: var(--brand); box-shadow: 0 4px 16px rgba(167, 139, 250, 0.3); } /* Dark Mode Toggle Button */ .dark-mode-toggle { background: none; border: none; cursor: pointer; padding: 8px; border-radius: 999px; display: flex; align-items: center; justify-content: center; margin-left: 1rem; } .dark-mode-toggle:hover { background: rgba(0,0,0,0.05); } body.dark-mode .dark-mode-toggle:hover { background: rgba(255,255,255,0.1); } .dark-mode-toggle .icon { width: 24px; height: 24px; } /* Hide one icon based on the current mode */ .icon-moon { display: block; } .icon-sun { display: none; } body.dark-mode .icon-moon { display: none; } body.dark-mode .icon-sun { display: block; } /* --- Go to Top Button Icon Visibility (Dark Mode) --- */ body.dark-mode .go-to-top .icon-arrow-light { display: none; } body.dark-mode .go-to-top .icon-arrow-dark { display: block; }