/* ===== Thamara Books - Custom Styles ===== */ /* ===== Dark Mode ===== */ /* Activated by adding the `dark` class to via main.js. CSS custom properties handle theming so every component picks up the correct surface / text colors without touching Tailwind source classes. */ :root { --color-bg: #f8fafc; /* slate-50 */ --color-surface: #ffffff; --color-border: #e2e8f0; /* slate-200 */ --color-text: #1e293b; /* slate-800 */ --color-text-muted: #475569; /* slate-600 */ --color-heading: #0f172a; /* slate-900 */ } html.dark { --color-bg: #0f172a; /* slate-900 */ --color-surface: #1e293b; /* slate-800 */ --color-border: #334155; /* slate-700 */ --color-text: #cbd5e1; /* slate-300 */ --color-text-muted: #94a3b8; /* slate-400 */ --color-heading: #f1f5f9; /* slate-100 */ } html.dark body { background-color: var(--color-bg); color: var(--color-text); } html.dark #site-header { background-color: var(--color-surface); border-color: var(--color-border); } html.dark #mobile-menu { background-color: var(--color-surface); border-color: var(--color-border); } /* Cards & panels */ html.dark .bg-white { background-color: var(--color-surface) !important; } /* Force light style on specific buttons even in dark mode */ html.dark .btn-light-always { background-color: #ffffff !important; color: #064c83 !important; } html.dark .btn-light-always:hover { background-color: #f1f5f9 !important; } html.dark .bg-slate-50 { background-color: var(--color-bg) !important; } html.dark .border-slate-200 { border-color: var(--color-border) !important; } /* Text */ html.dark .text-slate-900 { color: var(--color-heading) !important; } html.dark .text-slate-800 { color: var(--color-text) !important; } html.dark .text-slate-700 { color: var(--color-text) !important; } html.dark .text-slate-600 { color: var(--color-text-muted) !important; } html.dark .text-slate-500 { color: var(--color-text-muted) !important; } /* Nav hover states */ html.dark .hover\:bg-slate-50:hover, html.dark .hover\:bg-slate-100:hover { background-color: var(--color-border) !important; } /* Sub-menus */ html.dark .menu li .sub-menu { background-color: var(--color-surface); border-color: var(--color-border); } /* Search modal */ html.dark #search-modal > div { background-color: var(--color-surface); } /* Scrollbar in dark mode */ html.dark ::-webkit-scrollbar-track { background: var(--color-surface); } html.dark ::-webkit-scrollbar-thumb { background: #475569; } html.dark ::-webkit-scrollbar-thumb:hover { background: #64748b; } /* Filter bar mobile toggle (inactive state) */ html.dark #filter-mobile-toggle { background-color: #334155; /* slate-700 */ color: #cbd5e1; /* slate-300 */ } html.dark #filter-mobile-toggle:hover { background-color: #475569; /* slate-600 */ } /* Filter panel selects in dark mode */ html.dark #filter-panel select { background-color: var(--color-surface); border-color: var(--color-border); color: var(--color-text); } /* Primary text colors — lighten for dark backgrounds */ html.dark .text-primary-700 { color: #7cc8fb !important; } /* primary-300 */ html.dark .text-primary-600 { color: #36aaf4 !important; } /* primary-400 */ /* ===== Additional dark mode fixes (single-book + single-author) ===== */ /* Light slate backgrounds that weren't covered */ html.dark .bg-slate-100 { background-color: #334155 !important; /* slate-700 */ } html.dark .bg-slate-200 { background-color: #475569 !important; /* slate-600 */ } html.dark .border-slate-100 { border-color: #334155 !important; /* slate-700 */ } html.dark .hover\:bg-slate-200:hover { background-color: #334155 !important; /* slate-700 */ } /* Primary tint backgrounds (badges, genre pills) */ html.dark .bg-primary-50 { background-color: rgba(1, 90, 159, 0.2) !important; } html.dark .hover\:bg-primary-100:hover { background-color: rgba(1, 90, 159, 0.3) !important; } /* Accent tint backgrounds (series box, award icon bg) */ html.dark .bg-accent-50 { background-color: rgba(245, 158, 11, 0.12) !important; } html.dark .border-accent-200 { border-color: rgba(245, 158, 11, 0.3) !important; } /* Accent text — lighten for dark backgrounds */ html.dark .text-accent-700 { color: #fcd34d !important; } /* accent-300 */ html.dark .text-accent-800 { color: #fbbf24 !important; } /* accent-400 */ /* Tab hover text on dark background */ html.dark .hover\:text-slate-700:hover { color: var(--color-heading) !important; } /* Dark mode — search modal */ html.dark #search-modal > div > div { background-color: var(--color-surface); } html.dark #search-input { background-color: var(--color-surface); color: var(--color-heading); } html.dark #search-input::placeholder { color: #64748b; } html.dark #search-results, html.dark #search-quick-links { border-color: var(--color-border); } html.dark #search-results-container a { color: var(--color-text); } html.dark #search-results-container a:hover { background-color: var(--color-border); } html.dark #search-quick-links p { color: #64748b; } html.dark #search-quick-links a { background-color: var(--color-border); color: var(--color-text); } html.dark #search-quick-links a:hover { background-color: #1e3a5f; color: #7cc8fb; } /* ===== Dark mode — Dashboard (Author + Reader) ===== */ /* Form fields */ html.dark .flavor-dashboard .form-field label { color: var(--color-heading); } html.dark .flavor-dashboard .form-field input, html.dark .flavor-dashboard .form-field textarea, html.dark .flavor-dashboard .form-field select { background-color: var(--color-bg); border-color: var(--color-border); color: var(--color-text); } html.dark .flavor-dashboard .form-field input:focus, html.dark .flavor-dashboard .form-field textarea:focus, html.dark .flavor-dashboard .form-field select:focus { border-color: #36aaf4; box-shadow: 0 0 0 3px rgba(54, 170, 244, 0.15); } html.dark .flavor-dashboard .form-field input::placeholder, html.dark .flavor-dashboard .form-field textarea::placeholder { color: #64748b; } /* Inline inputs (buy links, etc.) */ html.dark .flavor-dashboard input[type="text"], html.dark .flavor-dashboard input[type="url"], html.dark .flavor-dashboard input[type="number"], html.dark .flavor-dashboard input[type="date"], html.dark .flavor-dashboard input[type="email"], html.dark .flavor-dashboard input[type="password"], html.dark .flavor-dashboard input[type="file"] { color: var(--color-text); } /* Colored tint backgrounds */ html.dark .bg-green-50 { background-color: rgba(22, 163, 74, 0.12) !important; } html.dark .bg-amber-50 { background-color: rgba(245, 158, 11, 0.12) !important; } html.dark .bg-blue-50 { background-color: rgba(59, 130, 246, 0.12) !important; } html.dark .bg-red-50 { background-color: rgba(239, 68, 68, 0.12) !important; } html.dark .bg-amber-100 { background-color: rgba(245, 158, 11, 0.2) !important; } html.dark .bg-green-100 { background-color: rgba(22, 163, 74, 0.2) !important; } html.dark .bg-yellow-100 { background-color: rgba(234, 179, 8, 0.2) !important; } html.dark .bg-primary-100 { background-color: rgba(1, 90, 159, 0.25) !important; } /* Hover tint backgrounds */ html.dark .hover\:bg-red-50:hover { background-color: rgba(239, 68, 68, 0.15) !important; } html.dark .hover\:bg-red-100:hover { background-color: rgba(239, 68, 68, 0.2) !important; } html.dark .hover\:bg-primary-50:hover { background-color: rgba(1, 90, 159, 0.2) !important; } /* Colored border overrides */ html.dark .border-green-200 { border-color: rgba(22, 163, 74, 0.3) !important; } html.dark .border-amber-200 { border-color: rgba(245, 158, 11, 0.3) !important; } html.dark .border-red-200 { border-color: rgba(239, 68, 68, 0.3) !important; } /* Colored text — keep readable on dark surfaces */ html.dark .text-green-800 { color: #86efac !important; } html.dark .text-green-600 { color: #4ade80 !important; } html.dark .text-green-500 { color: #22c55e !important; } html.dark .text-amber-800 { color: #fcd34d !important; } html.dark .text-amber-600 { color: #fbbf24 !important; } html.dark .text-amber-500 { color: #f59e0b !important; } html.dark .text-blue-600 { color: #60a5fa !important; } html.dark .text-red-700 { color: #fca5a5 !important; } html.dark .text-red-600 { color: #f87171 !important; } html.dark .text-red-500 { color: #f87171 !important; } html.dark .text-red-400 { color: #f87171 !important; } html.dark .text-yellow-700 { color: #fde047 !important; } /* Status badges — dark mode */ html.dark .status-publish { background-color: rgba(22, 163, 74, 0.15); color: #86efac; } html.dark .status-pending { background-color: rgba(245, 158, 11, 0.15); color: #fcd34d; } html.dark .status-draft { background-color: rgba(100, 116, 139, 0.2); color: #94a3b8; } html.dark .status-rejected { background-color: rgba(239, 68, 68, 0.15); color: #fca5a5; } /* Prose headings in dark mode */ html.dark .prose h2, html.dark .prose h3 { color: var(--color-heading); } html.dark .prose blockquote { border-right-color: #36aaf4; color: var(--color-text-muted); } html.dark .prose a { color: #7cc8fb; } html.dark .prose a:hover { color: #bae0fd; } /* Footer in dark mode */ html.dark footer { background-color: var(--color-surface) !important; } html.dark .border-slate-700 { border-color: #475569 !important; } /* Dashboard genre/category checkbox labels */ html.dark .flavor-dashboard label.inline-flex { background-color: var(--color-bg); color: var(--color-text); } html.dark .flavor-dashboard label.inline-flex:hover { background-color: var(--color-border); } /* Reader dashboard tab buttons */ html.dark .border-b.border-slate-200 { border-color: var(--color-border) !important; } /* Quick action profile card border hover */ html.dark .hover\:border-primary-300:hover { border-color: rgba(1, 90, 159, 0.5) !important; } /* Comment form dark mode */ html.dark .comments-area input, html.dark .comments-area textarea { background-color: var(--color-bg); border-color: var(--color-border); color: var(--color-text); } html.dark .comments-area input:focus, html.dark .comments-area textarea:focus { border-color: #36aaf4; box-shadow: 0 0 0 3px rgba(54, 170, 244, 0.15); } html.dark .comment-body { background-color: var(--color-bg) !important; } /* ============================= */ /* RTL Base */ html { direction: rtl; } body { font-family: 'Tajawal', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Header logo */ #site-header .custom-logo-link { display: inline-flex; align-items: center; max-width: 12rem; line-height: 1; } #site-header .custom-logo { display: block; width: auto; max-width: 12rem; max-height: 3rem; object-fit: contain; } @media (min-width: 768px) { #site-header .custom-logo { max-height: 3.5rem; } } /* Line Clamp */ .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* WordPress Navigation Menu Styling */ .menu li { list-style: none; } .menu li a { display: block; padding: 0.5rem 1rem; border-radius: 0.5rem; font-weight: 500; font-size: 0.9375rem; transition: all 0.2s; white-space: nowrap; } .menu li a:hover { background-color: rgb(248 250 252); color: rgb(1 90 159); } /* Desktop nav — better spacing */ .nav-menu-desktop { gap: 0.25rem; } .nav-menu-desktop > li > a { padding: 0.5rem 0.875rem; } /* Current / active page highlight */ .menu li.current-menu-item > a, .menu li.current-menu-parent > a, .menu li.current-menu-ancestor > a { color: rgb(1 90 159); background-color: rgb(240 247 255); } html.dark .menu li.current-menu-item > a, html.dark .menu li.current-menu-parent > a, html.dark .menu li.current-menu-ancestor > a { color: #7cc8fb; background-color: rgba(1, 90, 159, 0.15); } html.dark .menu li a:hover { background-color: rgba(1, 90, 159, 0.15); color: #7cc8fb; } /* Sub-menu */ .menu li .sub-menu { position: absolute; top: 100%; right: 0; background: white; border: 1px solid rgb(226 232 240); border-radius: 0.75rem; padding: 0.5rem; min-width: 200px; box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1); opacity: 0; visibility: hidden; transform: translateY(8px); transition: all 0.2s; z-index: 50; } .menu li:hover > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); } .menu li .sub-menu li a { padding: 0.625rem 1rem; font-size: 0.875rem; } .menu > li { position: relative; } /* WordPress Pagination */ .nav-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.25rem; max-width: 100%; overflow: hidden; } .nav-links .page-numbers { display: flex; align-items: center; justify-content: center; min-width: 2.25rem; height: 2.25rem; padding: 0 0.5rem; border-radius: 0.5rem; font-size: 0.875rem; font-weight: 500; transition: all 0.2s; border: 1px solid rgb(226 232 240); background: white; color: rgb(71 85 105); white-space: nowrap; } .nav-links .page-numbers:hover { border-color: rgb(1 90 159); color: rgb(1 90 159); background: rgb(240 247 255); } .nav-links .page-numbers.current { background: rgb(1 90 159); color: white; border-color: rgb(1 90 159); } .nav-links .prev, .nav-links .next { gap: 0.5rem; } .nav-links .dots { border: none; background: none; color: rgb(148 163 184); } /* Dark mode — pagination */ html.dark .nav-links .page-numbers { background: var(--color-surface); border-color: var(--color-border); color: var(--color-text); } html.dark .nav-links .page-numbers:hover { background: #1e3a5f; border-color: #7cc8fb; color: #7cc8fb; } html.dark .nav-links .page-numbers.current { background: #015a9f; border-color: #015a9f; color: white; } html.dark .nav-links .dots { background: none; border: none; color: #64748b; } /* Prose / Content Styling */ .prose h2 { font-size: 1.5rem; font-weight: 700; margin-top: 2rem; margin-bottom: 0.75rem; color: rgb(15 23 42); } .prose h3 { font-size: 1.25rem; font-weight: 700; margin-top: 1.5rem; margin-bottom: 0.5rem; color: rgb(30 41 59); } .prose p { margin-bottom: 1rem; line-height: 1.8; } .prose ul, .prose ol { margin-bottom: 1rem; padding-right: 1.5rem; } .prose ul { list-style-type: disc; } .prose ol { list-style-type: decimal; } .prose li { margin-bottom: 0.25rem; line-height: 1.8; } .prose blockquote { border-right: 4px solid rgb(1 90 159); padding-right: 1rem; padding-left: 0; margin: 1.5rem 0; font-style: italic; color: rgb(71 85 105); } .prose a { color: rgb(1 90 159); text-decoration: underline; } .prose a:hover { color: rgb(6 76 131); } .prose img { border-radius: 0.75rem; margin: 1.5rem 0; } /* Search Modal Transitions */ #search-modal { animation: fadeIn 0.2s ease-out; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* Scroll animation */ .fade-in-up { opacity: 0; transform: translateY(20px); transition: all 0.5s ease-out; } .fade-in-up.animate-in { opacity: 1; transform: translateY(0); } /* Card hover lift */ article.group:hover { transform: translateY(-2px); } /* Selection Color */ ::selection { background-color: rgb(1 90 159); color: white; } /* Scrollbar */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: rgb(241 245 249); } ::-webkit-scrollbar-thumb { background: rgb(148 163 184); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: rgb(100 116 139); } /* Focus Visible */ *:focus-visible { outline: 2px solid rgb(1 90 159); outline-offset: 2px; border-radius: 4px; } /* Author Dashboard Styles */ .flavor-dashboard .form-field { margin-bottom: 1.5rem; } .flavor-dashboard .form-field label { display: block; font-weight: 600; margin-bottom: 0.5rem; color: rgb(30 41 59); } .flavor-dashboard .form-field input, .flavor-dashboard .form-field textarea, .flavor-dashboard .form-field select { width: 100%; padding: 0.75rem 1rem; border: 1px solid rgb(226 232 240); border-radius: 0.75rem; font-family: 'Tajawal', sans-serif; font-size: 0.875rem; transition: border-color 0.2s; background: white; } .flavor-dashboard .form-field input:focus, .flavor-dashboard .form-field textarea:focus, .flavor-dashboard .form-field select:focus { outline: none; border-color: rgb(1 90 159); box-shadow: 0 0 0 3px rgb(1 90 159 / 0.1); } /* Status badges */ .status-publish { background-color: rgb(220 252 231); color: rgb(22 101 52); } .status-pending { background-color: rgb(254 249 195); color: rgb(133 77 14); } .status-draft { background-color: rgb(241 245 249); color: rgb(71 85 105); } .status-rejected { background-color: rgb(254 226 226); color: rgb(153 27 27); } /* Print styles */ @media print { header, footer, #back-to-top, #search-modal, .no-print { display: none !important; } }