@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;700&display=swap'); /* Material-inspired theming with light/dark modes - Use data-theme on to switch between modes - Respect prefers-color-scheme for initial load */ :root { /* Palette */ --primary: #2c7a7b; /* Teal */ --primary-variant: #225e5f; /* Light theme (default) */ --bg: #f5f7f8; --surface: #ffffff; --text: #1f2937; --muted-text: #6b7280; --border: #e5e7eb; --shadow: 0 8px 24px rgba(0, 0, 0, 0.08); --overlay: rgba(0,0,0,0.4); /* Component sizing */ --radius: 16px; --radius-sm: 12px; --gap: 1rem; } /* Dark theme overrides */ html[data-theme="dark"] { --bg: #0f172a; /* slate-900 */ --surface: #111827; /* gray-900 */ --text: #e5e7eb; /* gray-200 */ --muted-text: #9ca3af; /* gray-400 */ --border: #1f2937; /* gray-800 */ --shadow: 0 10px 30px rgba(0, 0, 0, 0.45); --overlay: rgba(0,0,0,0.55); } /* Respect system setting on first paint (can be overridden by data-theme) */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --bg: #0f172a; --surface: #111827; --text: #e5e7eb; --muted-text: #9ca3af; --border: #1f2937; --shadow: 0 10px 30px rgba(0, 0, 0, 0.45); --overlay: rgba(0,0,0,0.55); } } /* --- Animations --- */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* Respect reduced-motion preference */ @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } } .fade-in-up { animation: fadeInUp 0.6s ease-out forwards; } /* Base */ html { font-size: 16px; } body { font-family: 'Cairo', sans-serif; background: var(--bg); color: var(--text); padding-top: 72px; /* For fixed navbar */ font-size: 1.05rem; /* Subtle geometric pattern */ background-image: linear-gradient(45deg, rgba(0,0,0,0.03) 25%, transparent 25%, transparent 50%, rgba(0,0,0,0.03) 50%, rgba(0,0,0,0.03) 75%, transparent 75%, transparent); background-size: 40px 40px; } /* Navbar */ .navbar { background: var(--surface) !important; border-bottom: 1px solid var(--border); box-shadow: var(--shadow); } .navbar-brand { font-weight: 700; color: var(--primary) !important; } .nav-link { color: var(--muted-text) !important; } .nav-link.active, .nav-link:hover { color: var(--primary) !important; } /* Improve toggler contrast in both themes */ .navbar-toggler { border-color: var(--border); } .navbar-toggler-icon { filter: invert(0.6); } html[data-theme="dark"] .navbar-toggler-icon { filter: invert(1); } /* Theme toggle button */ .theme-toggle { border: 1px solid var(--border); background: transparent; color: var(--text); border-radius: 999px; padding: 0.4rem 0.9rem; display: inline-flex; align-items: center; gap: 0.5rem; transition: background 0.2s ease, color 0.2s ease; } .theme-toggle:hover { background: rgba(0,0,0,0.05); } html[data-theme="dark"] .theme-toggle:hover { background: rgba(255,255,255,0.06); } /* Header / Hero */ header { position: relative; } /* Removed hero banner styles */ header h1 { font-weight: 800; font-size: 2.4rem; margin: 0; } header .lead { font-size: 1.15rem; margin-top: 0.25rem; opacity: 0.95; } /* Cards / Surfaces */ .card { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background: var(--surface); transition: transform 0.2s ease, box-shadow 0.2s ease; } .card:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(0,0,0,0.12); } .card-body { background: var(--surface); } /* Playlist */ #current-track-name { color: var(--primary); font-weight: 700; font-size: 1.2rem; } audio { filter: hue-rotate(140deg); width: 100%; } .list-group-item { background: var(--surface); cursor: pointer; transition: background-color 0.25s, color 0.25s, transform 0.25s; padding: 1.05rem 1.2rem; border-bottom: 1px solid var(--border); color: var(--muted-text); font-size: 1.05rem; } /* Smooth image zoom on hover for clarity */ .media-frame img { transition: transform .35s ease; } .card:hover .media-frame img { transform: scale(1.03); } .list-group-item:last-child { border-bottom: none; } .list-group-item:hover { background-color: rgba(44, 122, 123, 0.08); color: var(--primary); transform: translateX(-4px); } .list-group-item.active { background-color: var(--primary); border-color: var(--primary); color: #fff; font-weight: 700; } /* Footer */ footer { background: var(--surface); border-top: 1px solid var(--border); padding-top: 1.25rem; padding-bottom: 1.25rem; } footer p { color: var(--muted-text); } /* Modal */ .modal-content { background: var(--surface); border: 1px solid var(--border); } .modal-header { border-bottom: 1px solid var(--border); background: transparent; } .modal-title { color: var(--primary); font-weight: 700; font-size: 1.4rem; } .modal-body p { font-size: 1.1rem; line-height: 1.8; text-align: justify; color: var(--text); } .modal-footer { border-top: 1px solid var(--border); } /* Primary button */ .btn-primary { background-color: var(--primary); border-color: var(--primary); transition: background-color 0.25s, border-color 0.25s, transform 0.2s; } .btn-primary:hover { background-color: var(--primary-variant); border-color: var(--primary-variant); transform: translateY(-1px); } /* Utility spacing */ .section { margin-top: 2rem; } /* Media frame for consistent image aspect ratios */ .media-frame { position: relative; aspect-ratio: 4 / 3; /* Clear 4:3 preview */ overflow: hidden; border-radius: var(--radius-sm); } .media-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; /* Keep faces/center clear */ } /* Unified caption overlay for images */ .caption-overlay { position: absolute; left: 0; right: 0; top: 0; padding: .5rem .75rem; background: linear-gradient(to bottom, rgba(0,0,0,.6), rgba(0,0,0,0)); color: #fff; font-weight: 700; font-size: .95rem; z-index: 2; } /* RTL tweaks (Bootstrap handles most; ensure consistent rounding) */ img, .card, .list-group-item, .modal-content { border-radius: var(--radius); }