/** * Sekaiplus — Design System (dark-first) * ------------------------------------------------------------------ * Loaded after style.css. Provides a single source of truth for * colors, spacing, radii, shadows and the dark/light theme switch. * * Theme model: * - Dark is the DEFAULT ( gets .dark-mode). * - Light is opt-in ( gets .light-mode). * - Legacy `body.dark-mode` rules in style.css keep working because * the same class is mirrored onto by the inline boot script. */ /* ------------------------------------------------------------------ * 1. Tokens — dark (default) * ------------------------------------------------------------------ */ :root, html.dark-mode { color-scheme: dark; /* Surfaces */ --sk-bg: #0e1117; --sk-bg-2: #161a22; --sk-bg-3: #1e2330; --sk-bg-elevated: #232937; --sk-overlay: rgba(6, 8, 12, .72); /* Text */ --sk-text: #e7e9ee; --sk-text-soft: #c3c9d4; --sk-text-muted: #8b94a5; --sk-text-faint: #646d7e; /* Lines */ --sk-border: #262c38; --sk-border-strong: #333b4a; /* Brand accent (MangaDex orange) */ --sk-accent: #ff6740; --sk-accent-hover: #ff8161; --sk-accent-active: #e8562f; --sk-accent-contrast:#ffffff; --sk-accent-soft: rgba(255, 103, 64, .14); --sk-accent-ring: rgba(255, 103, 64, .35); /* Status */ --sk-success: #3ecf8e; --sk-success-soft: rgba(62, 207, 142, .14); --sk-warning: #f5c451; --sk-warning-soft: rgba(245, 196, 81, .14); --sk-danger: #ff5c6c; --sk-danger-soft: rgba(255, 92, 108, .14); --sk-info: #4aa8ff; --sk-info-soft: rgba(74, 168, 255, .14); /* Shape */ --sk-radius-xs: 6px; --sk-radius-sm: 8px; --sk-radius: 12px; --sk-radius-lg: 16px; --sk-radius-pill: 999px; /* Space scale */ --sk-space-1: 4px; --sk-space-2: 8px; --sk-space-3: 12px; --sk-space-4: 16px; --sk-space-5: 24px; --sk-space-6: 32px; --sk-space-7: 48px; /* Elevation */ --sk-shadow-sm: 0 1px 2px rgba(0,0,0,.4); --sk-shadow: 0 6px 20px rgba(0,0,0,.4); --sk-shadow-lg: 0 16px 40px rgba(0,0,0,.5); /* Layout */ --sk-sidebar-w: 244px; --sk-topbar-h: 64px; /* Motion */ --sk-ease: cubic-bezier(.2, .7, .3, 1); --sk-dur: .2s; /* Back-compat aliases so older style.css rules resolve */ --primary-color: var(--sk-accent); --primary-rgb: 255, 103, 64; /* Re-point Bootstrap's brand colour at the new accent */ --bs-primary: var(--sk-accent); --bs-primary-rgb: 255, 103, 64; --bs-link-color: var(--sk-accent); --bs-link-color-rgb: 255, 103, 64; --bs-link-hover-color: var(--sk-accent-hover); --bs-link-hover-color-rgb: 255, 129, 97; --bg-color: var(--sk-bg); --text-color: var(--sk-text); --header-bg: var(--sk-bg-2); --card-bg: var(--sk-bg-2); --border-color: var(--sk-border); --icon-color: var(--sk-text); --link-color: var(--sk-accent); --hover-color: var(--sk-accent-hover); --dropdown-bg: var(--sk-bg-3); --dropdown-text: var(--sk-text); --dropdown-hover: var(--sk-bg-elevated); --light-bg: var(--sk-bg-2); --light-color: var(--sk-bg-3); --button-bg: var(--sk-bg-3); --button-text: var(--sk-text); --card-border-radius: var(--sk-radius); /* Previously undefined tokens that many rules referenced */ --success-color: var(--sk-success); --warning-color: var(--sk-warning); --danger-color: var(--sk-danger); --hover-bg: var(--sk-bg-elevated); --unread-bg: var(--sk-accent-soft); --text-muted: var(--sk-text-muted); --darker-bg: var(--sk-bg); --muted-text: var(--sk-text-muted); --dark-bg: var(--sk-bg); --dark-text: var(--sk-text); --dark-border: var(--sk-border); --dark-card-bg: var(--sk-bg-2); --dark-secondary-bg: var(--sk-bg-3); --dark-text-color: var(--sk-text); --dark-text-muted: var(--sk-text-muted); --dark-accent: var(--sk-accent); --dark-accent-hover: var(--sk-accent-hover); --dark-link: var(--sk-accent); } /* ------------------------------------------------------------------ * 2. Tokens — light (opt-in) * ------------------------------------------------------------------ */ html.light-mode { color-scheme: light; --sk-bg: #f6f7f9; --sk-bg-2: #ffffff; --sk-bg-3: #f0f2f5; --sk-bg-elevated: #ffffff; --sk-overlay: rgba(15, 18, 24, .5); --sk-text: #14181f; --sk-text-soft: #333a45; --sk-text-muted: #5c6572; --sk-text-faint: #8a929e; --sk-border: #e2e5ea; --sk-border-strong: #ccd1d9; --sk-shadow-sm: 0 1px 2px rgba(16,24,40,.06); --sk-shadow: 0 6px 20px rgba(16,24,40,.1); --sk-shadow-lg: 0 16px 40px rgba(16,24,40,.14); } /* ------------------------------------------------------------------ * 3. Base * ------------------------------------------------------------------ */ html { background-color: var(--sk-bg); } body { background-color: var(--sk-bg); color: var(--sk-text); font-family: 'Noto Kufi Arabic', 'Tajawal', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; transition: background-color var(--sk-dur) var(--sk-ease), color var(--sk-dur) var(--sk-ease); } a { color: var(--sk-accent); transition: color var(--sk-dur) var(--sk-ease); } a:hover, a:focus { color: var(--sk-accent-hover); } :focus-visible { outline: 2px solid var(--sk-accent); outline-offset: 2px; } ::selection { background: var(--sk-accent); color: var(--sk-accent-contrast); } /* Custom scrollbar */ * { scrollbar-width: thin; scrollbar-color: var(--sk-border-strong) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--sk-border-strong); border-radius: var(--sk-radius-pill); border: 2px solid var(--sk-bg); } *::-webkit-scrollbar-thumb:hover { background: var(--sk-text-faint); } /* ------------------------------------------------------------------ * 4. Buttons — modern, flat * ------------------------------------------------------------------ */ .btn { border-radius: var(--sk-radius-sm); font-weight: 600; transition: background-color var(--sk-dur) var(--sk-ease), border-color var(--sk-dur) var(--sk-ease), color var(--sk-dur) var(--sk-ease), transform var(--sk-dur) var(--sk-ease); } .btn:active { transform: translateY(1px); } .btn-primary { background-color: var(--sk-accent); border-color: var(--sk-accent); color: var(--sk-accent-contrast); } .btn-primary:hover, .btn-primary:focus, .btn-primary:active { background-color: var(--sk-accent-hover) !important; border-color: var(--sk-accent-hover) !important; color: var(--sk-accent-contrast); } .btn-outline-primary { color: var(--sk-accent); border-color: var(--sk-accent); } .btn-outline-primary:hover, .btn-outline-primary:focus { background-color: var(--sk-accent); border-color: var(--sk-accent); color: var(--sk-accent-contrast); } .btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; border-radius: var(--sk-radius-sm); background: var(--sk-bg-3); border: 1px solid var(--sk-border); color: var(--sk-text-soft); } .btn-icon:hover, .btn-icon:focus { background: var(--sk-bg-elevated); color: var(--sk-text); border-color: var(--sk-border-strong); } /* ------------------------------------------------------------------ * 5. Cards / surfaces * ------------------------------------------------------------------ */ .novel-card, .card { background-color: var(--sk-bg-2); border: 1px solid var(--sk-border); border-radius: var(--sk-radius); box-shadow: var(--sk-shadow-sm); transition: transform var(--sk-dur) var(--sk-ease), box-shadow var(--sk-dur) var(--sk-ease), border-color var(--sk-dur) var(--sk-ease); } .novel-card:hover { transform: translateY(-4px); border-color: var(--sk-border-strong); box-shadow: var(--sk-shadow); } /* ------------------------------------------------------------------ * 6. Badges * ------------------------------------------------------------------ */ .badge { border-radius: var(--sk-radius-pill); font-weight: 600; padding: .35em .7em; } .bg-primary { background-color: var(--sk-accent) !important; } .bg-success { background-color: var(--sk-success) !important; } .bg-warning { background-color: var(--sk-warning) !important; color: #1a1300 !important; } .bg-danger { background-color: var(--sk-danger) !important; } .bg-info { background-color: var(--sk-info) !important; } /* ------------------------------------------------------------------ * 7. Dark-mode toggle icon states * (markup uses .fa-moon / .fa-sun; old CSS targeted .dark-icon/.light-icon) * ------------------------------------------------------------------ */ #darkModeToggle .toggle-icons-wrapper { position: relative; display: inline-flex; } #darkModeToggle .fa-sun { display: none; } html.dark-mode #darkModeToggle .fa-sun { display: inline-block; } html.dark-mode #darkModeToggle .fa-moon { display: none; } /* ------------------------------------------------------------------ * 8. Forms * ------------------------------------------------------------------ */ .form-control, .form-select { background-color: var(--sk-bg-3); border: 1px solid var(--sk-border); color: var(--sk-text); border-radius: var(--sk-radius-sm); } .form-control:focus, .form-select:focus { background-color: var(--sk-bg-3); border-color: var(--sk-accent); color: var(--sk-text); box-shadow: 0 0 0 3px var(--sk-accent-ring); } .form-control::placeholder { color: var(--sk-text-faint); } /* ------------------------------------------------------------------ * 9. Modals / dropdowns * ------------------------------------------------------------------ */ .modal-content, .dropdown-menu { background-color: var(--sk-bg-2); border: 1px solid var(--sk-border); border-radius: var(--sk-radius); color: var(--sk-text); box-shadow: var(--sk-shadow-lg); } .dropdown-item { color: var(--sk-text-soft); border-radius: var(--sk-radius-xs); } .dropdown-item:hover, .dropdown-item:focus { background-color: var(--sk-bg-3); color: var(--sk-text); } .dropdown-divider { border-color: var(--sk-border); } /* Dropdowns inside the top bar must stay on-theme regardless of legacy inline rules */ .sk-topbar .dropdown-menu { background-color: var(--sk-bg-2); border: 1px solid var(--sk-border); border-radius: var(--sk-radius); box-shadow: var(--sk-shadow-lg); overflow: hidden; } .sk-topbar .dropdown-menu .dropdown-item { color: var(--sk-text-soft); } .sk-topbar .dropdown-menu .dropdown-item:hover, .sk-topbar .dropdown-menu .dropdown-item:focus { background-color: var(--sk-bg-3); color: var(--sk-text); } .sk-topbar .dropdown-menu .dropdown-header { color: var(--sk-text-muted); } /* Keep the user/notification header flush with the menu surface (no tinted slab) */ .sk-topbar .dropdown-menu .dropdown-header, .sk-topbar .user-dropdown .dropdown-header { background-color: transparent !important; border-bottom: 1px solid var(--sk-border); } /* ------------------------------------------------------------------ * 10. App shell: fixed sidebar (inline-start → right in RTL) + top bar * ------------------------------------------------------------------ */ @media (min-width: 992px) { body { padding-inline-start: var(--sk-sidebar-w); padding-top: var(--sk-topbar-h); transition: padding-inline-start var(--sk-dur) var(--sk-ease); } /* Desktop sidebar collapse (toggled from the top bar, persisted in localStorage and restored pre-paint via html.sk-sidebar-collapsed). */ html.sk-sidebar-collapsed body { padding-inline-start: 0; } html.sk-sidebar-collapsed .sk-sidebar { transform: translateX(-100%); } html[dir="rtl"].sk-sidebar-collapsed .sk-sidebar { transform: translateX(100%); } html.sk-sidebar-collapsed .sk-topbar { inset-inline-start: 0; } } .sk-collapse-btn { align-items: center; justify-content: center; } .sk-collapse-btn:focus-visible { outline: 2px solid var(--sk-accent); outline-offset: 2px; box-shadow: none; } .sk-sidebar { position: fixed; top: 0; bottom: 0; inset-inline-start: 0; width: var(--sk-sidebar-w); background: var(--sk-bg-2); border-inline-end: 1px solid var(--sk-border); display: flex; flex-direction: column; overflow-y: auto; z-index: 1040; transition: transform var(--sk-dur) var(--sk-ease); } .sk-sidebar__brand { display: flex; align-items: center; justify-content: space-between; gap: var(--sk-space-3); padding: var(--sk-space-4); min-height: var(--sk-topbar-h); border-bottom: 1px solid var(--sk-border); } .sk-sidebar__brand .custom-logo-link { display: block; line-height: 0; } .sk-sidebar__brand .custom-logo-link img { max-width: 100%; max-height: 40px; width: auto; height: auto; } .sk-sidebar__brand .site-title { display: block; font-weight: 700; font-size: 1.15rem; color: var(--sk-text); } .sk-sidebar__nav { padding: var(--sk-space-3); flex: 1 1 auto; } /* Nav list (overrides the Bootstrap classes emitted by the walker) */ .sk-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .sk-nav li { position: relative; } .sk-nav a { display: flex; align-items: center; gap: var(--sk-space-3); padding: 10px 12px; border-radius: var(--sk-radius-sm); color: var(--sk-text-soft); text-decoration: none; font-weight: 500; line-height: 1.4; transition: background-color var(--sk-dur) var(--sk-ease), color var(--sk-dur) var(--sk-ease); } .sk-nav a:hover, .sk-nav a:focus { background: var(--sk-bg-3); color: var(--sk-text); } .sk-nav a i { width: 20px; text-align: center; flex: 0 0 auto; } .sk-nav .current-menu-item > a, .sk-nav .current_page_item > a, .sk-nav .current-menu-ancestor > a, .sk-nav a.is-active { background: var(--sk-accent-soft); color: var(--sk-accent); } .sk-nav .sub-menu { list-style: none; margin: 4px 0; padding-inline-start: 14px; display: none; } .sk-nav li.open > .sub-menu, .sk-nav li:hover > .sub-menu { display: block; } .sk-nav .sub-menu a { font-size: .92rem; padding: 8px 12px; } /* Top bar */ .sk-topbar { position: fixed; top: 0; left: 0; right: 0; height: var(--sk-topbar-h); padding: 0; background: var(--sk-bg-2); border-bottom: 1px solid var(--sk-border); z-index: 1030; transition: left var(--sk-dur) var(--sk-ease), right var(--sk-dur) var(--sk-ease); } /* Higher specificity to beat the theme's legacy inline .navbar rules */ .sk-topbar.navbar { padding: 0; box-shadow: none; border-radius: 0; } .sk-topbar .sk-menu-btn:focus-visible { outline: 2px solid var(--sk-accent); outline-offset: 2px; box-shadow: none; } @media (min-width: 992px) { .sk-topbar { inset-inline-start: var(--sk-sidebar-w); } } .sk-topbar__container { height: 100%; padding-inline: var(--sk-space-4); } .sk-topbar__inner { display: flex; align-items: center; gap: var(--sk-space-2); height: 100%; } .sk-topbar .navbar-actions { margin-inline-start: auto; } .sk-menu-btn { display: none; } @media (max-width: 991.98px) { body { padding-inline-start: 0; padding-top: var(--sk-topbar-h); } .sk-menu-btn { display: inline-flex !important; align-items: center; justify-content: center; } .sk-sidebar { transform: translateX(-100%); box-shadow: none; width: min(82vw, var(--sk-sidebar-w)); } [dir="rtl"] .sk-sidebar { transform: translateX(100%); } .sk-sidebar.open { transform: translateX(0); box-shadow: var(--sk-shadow-lg); } [dir="rtl"] .sk-sidebar.open { transform: translateX(0); } .sk-sidebar-backdrop { position: fixed; inset: 0; background: var(--sk-overlay); z-index: 1035; } } /* ------------------------------------------------------------------ * 11. Home / content components * ------------------------------------------------------------------ */ .hero-section--empty .hero-content-container { flex: 0 0 100%; max-width: 100%; } .hero-section--empty .hero-content { text-align: center; margin-inline: auto; } .hero-section--empty .hero-stats, .hero-section--empty .hero-actions { justify-content: center !important; } .sk-main .hero-title { background: linear-gradient(120deg, var(--sk-accent), #ffb27a) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; } .sk-main .hero-content-container { background: radial-gradient(120% 120% at 100% 0%, rgba(255, 103, 64, .12), transparent 52%), var(--sk-bg-2) !important; border: 1px solid var(--sk-border) !important; } .sk-main .section-icon { background: var(--sk-accent-soft) !important; color: var(--sk-accent) !important; box-shadow: none !important; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; } .sk-main .section-icon i { font-size: 1.15rem !important; } .sk-main .stat-pill { background: var(--sk-bg-3) !important; border: 1px solid var(--sk-border) !important; color: var(--sk-text-soft); } .sk-main .stat-pill i { color: var(--sk-accent); } .sk-main .hero-image-container { box-shadow: none !important; border: 1px solid var(--sk-border); } /* Unify the guest CTA banner (was an orange→green gradient) */ .sk-main .auth-prompt-card { background: var(--sk-bg-2) !important; border: 1px solid var(--sk-border) !important; } .sk-main .auth-prompt-icon { background: linear-gradient(135deg, var(--sk-accent), #ff8f5e) !important; box-shadow: none !important; } .sk-main .auth-prompt-actions .btn-primary { background: linear-gradient(135deg, var(--sk-accent), #ff8f5e) !important; border: none !important; } .sk-main .auth-prompt-actions .btn-outline-primary { border-color: var(--sk-accent) !important; color: var(--sk-accent) !important; background: transparent !important; } /* Neutralise muddy primary-tinted slabs on the novel detail page */ .sk-main .novel-meta-container { background-color: var(--sk-bg-2) !important; border: 1px solid var(--sk-border); box-shadow: none !important; } .sk-main .novel-meta-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--sk-space-3) var(--sk-space-5) !important; } .sk-main .meta-item { align-items: center !important; gap: var(--sk-space-3) !important; } .sk-main .meta-icon { width: 40px !important; height: 40px !important; border-radius: 10px !important; background: var(--sk-accent-soft) !important; color: var(--sk-accent) !important; border: none !important; box-shadow: none !important; overflow: hidden; } .sk-main .meta-icon i { color: var(--sk-accent) !important; } .sk-main .meta-label { color: var(--sk-text-muted) !important; font-size: .78rem !important; letter-spacing: .01em; } .sk-main .meta-value { color: var(--sk-text) !important; font-weight: 600; } .sk-main .meta-value a { color: var(--sk-text) !important; text-decoration: none; } .sk-main .meta-value a:hover { color: var(--sk-accent) !important; text-decoration: none !important; } .sk-main .meta-value .badge { font-size: .72rem; } .sk-main .novel-content-card .card-header, .sk-main .novel-sidebar-card .card-header { background-color: var(--sk-bg-3) !important; border-bottom: 1px solid var(--sk-border) !important; } /* ---- Novel cards (MangaDex-style) ---- */ .sk-main .novel-card .novel-cover-link { aspect-ratio: 2 / 3; background: var(--sk-bg-3); } .sk-main .novel-card .novel-cover, .sk-main .novel-card .default-cover { width: 100%; height: 100%; object-fit: cover; display: block; } .sk-main .novel-card .novel-title-overlay { z-index: 3; padding: var(--sk-space-3) !important; } .sk-main .novel-card .title-gradient { background: linear-gradient(to top, rgba(8,10,14,.94) 0%, rgba(8,10,14,.5) 48%, transparent 100%); } .sk-main .novel-card .novel-title-overlay .card-title { font-size: .95rem; line-height: 1.35; text-shadow: 0 1px 3px rgba(0,0,0,.6); } .sk-main .novel-card .novel-cover-link .hover-info-bg { background: linear-gradient(to top, rgba(10, 12, 16, .95) 0%, rgba(10, 12, 16, .82) 55%, rgba(10, 12, 16, .15) 100%) !important; -webkit-backdrop-filter: blur(7px) saturate(130%); backdrop-filter: blur(7px) saturate(130%); } /* Hover info = frosted panel that slides up from the bottom (cover stays visible) */ .sk-main .novel-card .novel-cover-link .novel-hover-info { top: auto !important; bottom: 0 !important; height: auto !important; max-height: 100% !important; justify-content: flex-end !important; background: transparent !important; backdrop-filter: none !important; padding: var(--sk-space-3) !important; transform: translateY(101%); transition: transform .3s cubic-bezier(.2, .7, .3, 1); } .sk-main .novel-card:hover .novel-cover-link .novel-hover-info { opacity: 1 !important; transform: translateY(0); } /* Slight cover zoom on hover */ .sk-main .novel-card .novel-cover-link .novel-cover { transition: transform .4s cubic-bezier(.2, .7, .3, 1); } .sk-main .novel-card:hover .novel-cover-link .novel-cover { transform: scale(1.06); } .sk-main .novel-card .novel-cover-link .genre-badge { background: rgba(255, 255, 255, .16) !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, .18); font-size: .68rem; font-weight: 600; padding: .3em .7em; } .sk-main .novel-card .novel-cover-link .novel-hover-info .novel-excerpt { color: rgba(255, 255, 255, .8); } .sk-main .novel-card .novel-cover-link .novel-hover-info .chapter-count { color: rgba(255, 255, 255, .85); } .sk-main .novel-card .novel-cover-link .novel-hover-info .btn { font-size: .72rem; padding: .32rem .7rem; white-space: nowrap; } .sk-main .novel-card .novel-cover-link .novel-hover-info .card-title { font-size: .9rem; line-height: 1.35; } /* Status badges */ .sk-status-badge { position: absolute; top: 10px; inset-inline-start: 10px; z-index: 4; padding: 3px 10px; font-size: .7rem; font-weight: 700; border-radius: var(--sk-radius-pill); color: #fff; line-height: 1.5; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); } .sk-status-ongoing { background: rgba(62, 207, 142, .95); } .sk-status-completed { background: rgba(74, 168, 255, .95); } .sk-status-hiatus { background: rgba(245, 196, 81, .97); color: #1a1300; } .sk-status-unknown { background: rgba(140, 148, 160, .92); } /* ---- Novel detail tabs ---- */ .sk-novel-tabs { display: flex; gap: var(--sk-space-1); border-bottom: 1px solid var(--sk-border); margin-bottom: var(--sk-space-5); flex-wrap: wrap; } .sk-tab { appearance: none; background: transparent; border: none; border-bottom: 2px solid transparent; color: var(--sk-text-muted); font-weight: 600; font-size: .98rem; padding: 10px 16px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: color var(--sk-dur) var(--sk-ease), border-color var(--sk-dur) var(--sk-ease); } .sk-tab:hover { color: var(--sk-text); } .sk-tab.is-active { color: var(--sk-accent); border-bottom-color: var(--sk-accent); } .sk-tab-panel { display: none; } .sk-tab-panel.is-active { display: block; } /* ---- Chapter list rows (MangaDex-style) ---- */ .sk-main .chapter-list { padding: 0; display: block; } .sk-main .chapter-item { margin-bottom: 0; border-bottom: 1px solid var(--sk-border); } .sk-main .chapter-item:last-child { border-bottom: none; } .sk-main .chapter-link { background: transparent; border: none; border-radius: 0; padding: 12px 14px; transform: none !important; color: var(--sk-text-soft); } .sk-main .chapter-link:hover { background: var(--sk-bg-3); box-shadow: none; color: var(--sk-text); } .sk-main .chapter-link:hover .chapter-number { color: var(--sk-accent); } .sk-main .chapter-number { color: var(--sk-text); } .sk-main .chapter-title { color: var(--sk-text-soft); } .sk-main .chapter-count { background: var(--sk-bg-3); color: var(--sk-text-muted); } .sk-main .volume-header { background: var(--sk-bg-3); border: 1px solid var(--sk-border); border-radius: var(--sk-radius-sm); padding: 12px 14px; cursor: pointer; } .sk-main .volume-header:hover { background: var(--sk-bg-elevated); } /* ---- Archive (unified novels grid) ---- */ .sk-archive__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sk-space-4); margin-bottom: var(--sk-space-5); padding-bottom: var(--sk-space-3); border-bottom: 1px solid var(--sk-border); } .sk-archive__title { font-size: 1.5rem; font-weight: 700; margin: 0; display: inline-flex; align-items: center; gap: 10px; } .sk-archive__title i { color: var(--sk-accent); } .sk-archive__count { color: var(--sk-text-muted); font-size: .9rem; } .sk-empty { text-align: center; padding: var(--sk-space-7) var(--sk-space-4); color: var(--sk-text-muted); } .sk-empty i { font-size: 2.5rem; opacity: .5; display: block; margin-bottom: var(--sk-space-3); } .sk-empty h5 { color: var(--sk-text); } .sk-archive__pagination { margin-top: var(--sk-space-6); } .sk-archive__pagination .nav-links { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; } .sk-archive__pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 10px; border-radius: var(--sk-radius-sm); background: var(--sk-bg-2); border: 1px solid var(--sk-border); color: var(--sk-text-soft); text-decoration: none; } .sk-archive__pagination .page-numbers:hover { background: var(--sk-bg-3); color: var(--sk-text); } .sk-archive__pagination .page-numbers.current { background: var(--sk-accent); border-color: var(--sk-accent); color: #fff; } /* ---- Hero slider (MangaDex-style featured carousel) ---- */ .sk-hero { position: relative; border-radius: var(--sk-radius-lg); overflow: hidden; border: 1px solid var(--sk-border); background: var(--sk-bg-2); } .sk-hero-slider { height: 400px; } .sk-hero-slide { position: relative; overflow: hidden; } .sk-hero-bg { position: absolute; inset: -24px; background-size: cover; background-position: center; filter: blur(30px) saturate(125%); transform: scale(1.18); opacity: .6; } .sk-hero-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--sk-bg) 92%, transparent) 0%, color-mix(in srgb, var(--sk-bg) 55%, transparent) 48%, color-mix(in srgb, var(--sk-bg) 88%, transparent) 100%); } .sk-hero-inner { position: relative; z-index: 2; display: flex; align-items: center; gap: var(--sk-space-6); height: 100%; padding: var(--sk-space-6); } .sk-hero-cover { flex: 0 0 190px; width: 190px; aspect-ratio: 2 / 3; border-radius: var(--sk-radius); overflow: hidden; display: block; box-shadow: var(--sk-shadow-lg); } .sk-hero-cover-img { width: 100%; height: 100%; object-fit: cover; display: block; } .sk-hero-cover-fallback { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: var(--sk-bg-3); color: var(--sk-text-muted); font-size: 2rem; } .sk-hero-info { flex: 1; min-width: 0; } .sk-hero-title { font-size: 2rem; font-weight: 800; line-height: 1.3; margin: 0 0 12px; } .sk-hero-title a { color: var(--sk-text); text-decoration: none; } .sk-hero-title a:hover { color: var(--sk-accent); } .sk-hero-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; } .sk-hero-tag { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: var(--sk-text-soft); background: rgba(255, 255, 255, .06); border: 1px solid var(--sk-border); padding: 3px 10px; border-radius: var(--sk-radius-pill); } .sk-hero-synopsis { color: var(--sk-text-soft); font-size: .95rem; line-height: 1.8; margin: 0 0 14px; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .sk-hero-credits { color: var(--sk-text-muted); font-size: .85rem; display: flex; align-items: center; gap: 8px; } .sk-hero-nav { position: absolute; z-index: 5; inset-inline-end: 24px; bottom: 20px; display: flex; align-items: center; gap: 10px; } .sk-hero-index { color: var(--sk-text-soft); font-weight: 700; font-size: .9rem; } .sk-hero-arrow { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--sk-border); background: rgba(0, 0, 0, .4); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background var(--sk-dur) var(--sk-ease), border-color var(--sk-dur) var(--sk-ease); } .sk-hero-arrow:hover { background: var(--sk-accent); border-color: var(--sk-accent); } .sk-hero .swiper-slide { pointer-events: none; } .sk-hero .swiper-slide-active { pointer-events: auto; } @media (max-width: 767.98px) { .sk-hero-slider { height: auto; min-height: 420px; } .sk-hero-inner { flex-direction: column; text-align: center; gap: var(--sk-space-4); padding: var(--sk-space-5) var(--sk-space-4) 64px; } .sk-hero-cover { flex-basis: 150px; width: 150px; } .sk-hero-title { font-size: 1.35rem; } .sk-hero-tags, .sk-hero-credits { justify-content: center; } .sk-hero-synopsis { -webkit-line-clamp: 3; } .sk-hero-nav { inset-inline: 0; justify-content: center; } } /* ---- Unified section headers (MangaDex-style) ---- */ .sk-main .section-header { margin-bottom: var(--sk-space-4) !important; padding-bottom: var(--sk-space-3); border-bottom: 1px solid var(--sk-border); } .sk-main .section-title { font-size: 1.3rem !important; font-weight: 700; color: var(--sk-text); display: inline-flex; align-items: center; gap: 10px; } .sk-main .section-icon { width: 34px; height: 34px; padding: 0 !important; background: transparent !important; color: var(--sk-accent) !important; border: none !important; box-shadow: none !important; } .sk-main .section-icon i { font-size: 1.15rem !important; } .sk-main .section-header .btn-outline-primary { border: none !important; background: transparent !important; color: var(--sk-text-muted) !important; padding: 4px 8px !important; font-size: .9rem; font-weight: 600; } .sk-main .section-header .btn-outline-primary:hover { color: var(--sk-accent) !important; background: transparent !important; } /* ---- Comments: one flat surface, no nested boxes / white frames ---- */ .sk-main .comments-area, .sk-main .modern-comments { background: transparent !important; box-shadow: none !important; border: none !important; border-radius: 0 !important; padding: 0 !important; margin: 0 !important; max-width: none !important; font-family: inherit !important; } .sk-main .comments-header { padding: 0 0 var(--sk-space-3) !important; margin-bottom: var(--sk-space-4); border-bottom: 1px solid var(--sk-border); background: transparent !important; } .sk-main .comments-title { color: var(--sk-text) !important; } /* The wrapping card already provides the "التعليقات" heading — avoid a duplicate title */ .sk-main .novel-content-card .comments-header .comments-title { display: none !important; } /* Replace the broken FA glyph (chapter page) with a clean accent bar */ .sk-main .comments-title::before, .sk-main .comments-title:before { content: '' !important; display: inline-block !important; position: static !important; width: 4px !important; height: 1.1em !important; background: var(--sk-accent) !important; border-radius: 2px !important; margin-inline-end: 10px !important; font-family: inherit !important; font-weight: inherit !important; } .sk-main .btn-comment-submit { background-color: var(--sk-accent) !important; color: #fff !important; border: none !important; } .sk-main .btn-comment-submit:hover, .sk-main .btn-comment-submit:focus { background-color: var(--sk-accent-hover) !important; } .sk-main .comments-title:before { background-color: var(--sk-accent) !important; } .sk-main .comment-sort-select, .sk-main .comment-sort-select:hover, .sk-main .comment-sort-select:focus { background-color: var(--sk-bg-3) !important; border: 1px solid var(--sk-border) !important; color: var(--sk-text) !important; box-shadow: none !important; } .sk-main .comment-form-wrapper { margin-bottom: 0 !important; padding: 0 !important; background: transparent !important; } .sk-main .comment-form-card { background-color: var(--sk-bg-2) !important; border: none !important; border-radius: var(--sk-radius) !important; box-shadow: none !important; overflow: hidden; } .sk-main .guest-comment-card { background-color: var(--sk-bg-3) !important; border: 1px solid var(--sk-border) !important; border-radius: var(--sk-radius) !important; box-shadow: none !important; overflow: hidden; } .sk-main .guest-comment-title { color: var(--sk-text) !important; } .sk-main .guest-comment-placeholder { color: var(--sk-text-muted) !important; } .sk-main .guest-avatar .guest-icon { background: var(--sk-accent-soft) !important; color: var(--sk-accent) !important; } .sk-main .comment-form-notice, .sk-main .comment-form-notice.info { background: var(--sk-bg-2) !important; color: var(--sk-text-soft) !important; border-bottom: 1px solid var(--sk-border) !important; } .sk-main .comment-form-notice i { color: var(--sk-accent); } .sk-main .comment-textarea { background-color: var(--sk-bg-2) !important; border: 1px solid var(--sk-border) !important; color: var(--sk-text) !important; } .sk-main .comment-textarea:focus { border-color: var(--sk-accent) !important; box-shadow: 0 0 0 3px var(--sk-accent-ring) !important; } .sk-main .comment-item, .sk-main .comment-body, .sk-main .comment-content { background: transparent !important; color: var(--sk-text-soft) !important; } .sk-main .comment-item { border: 1px solid var(--sk-border) !important; border-radius: var(--sk-radius) !important; } .sk-main .comment-meta, .sk-main .comment-time { color: var(--sk-text-muted) !important; } .sk-main .comment-list { background: transparent !important; } .sk-main .comments-list-container { background: transparent !important; border: none !important; } /* ---- Chapter reader (single-chapter.php) ---- */ .sk-main .chapter-header-card, .sk-main .chapter-content-card, .sk-main .chapter-navigation, .sk-main .other-translations-card, .sk-main .comments-card { background-color: var(--sk-bg-2) !important; border: 1px solid var(--sk-border) !important; border-radius: var(--sk-radius) !important; box-shadow: none !important; } .sk-main .chapter-meta-container { background-color: var(--sk-bg-3) !important; border: 1px solid var(--sk-border); border-radius: var(--sk-radius) !important; } .sk-main .chapter-title { color: var(--sk-text) !important; } .sk-main .chapter-subtitle { color: var(--sk-text-muted) !important; } .sk-main .breadcrumb-item a { color: var(--sk-accent) !important; } .sk-main .breadcrumb-item.active { color: var(--sk-text-muted) !important; } .sk-main .translator-name { color: var(--sk-text) !important; } .sk-main .translator-name:hover { color: var(--sk-accent) !important; } .sk-main .chapter-date { color: var(--sk-text-muted) !important; } .sk-main .translator-avatar { border-color: var(--sk-accent) !important; } .sk-main .stats-item { background-color: var(--sk-bg-2) !important; border: 1px solid var(--sk-border) !important; color: var(--sk-text-soft) !important; box-shadow: none !important; } .sk-main .stats-item.likes { cursor: pointer; } .sk-main .stats-item.likes:hover, .sk-main .stats-item.likes.liked { background-color: rgba(255, 92, 108, .15) !important; color: var(--sk-danger) !important; border-color: rgba(255, 92, 108, .3) !important; } .sk-main .chapter-controls { border-top: 1px solid var(--sk-border) !important; } .sk-main .control-btn { background-color: var(--sk-bg-3) !important; border: 1px solid var(--sk-border) !important; color: var(--sk-text) !important; } .sk-main .control-btn:hover { background-color: var(--sk-accent) !important; border-color: var(--sk-accent) !important; color: #fff !important; transform: none; } .sk-main .control-btn.read-aloud { color: var(--sk-success) !important; border-color: var(--sk-success) !important; } .sk-main .control-btn.read-aloud:hover { background: var(--sk-success) !important; color: #fff !important; } .sk-main .control-btn.stop-reading { color: var(--sk-danger) !important; border-color: var(--sk-danger) !important; } .sk-main .control-btn.stop-reading:hover { background: var(--sk-danger) !important; color: #fff !important; } /* Replace FA5 glyph with a clean accent bar */ .sk-main .other-translations-title::before, .sk-main .other-translations-title:before { content: '' !important; display: inline-block !important; position: static !important; width: 4px !important; height: 1.05em !important; background: var(--sk-accent) !important; border-radius: 2px !important; margin-inline-end: 10px !important; font-family: inherit !important; } .sk-main .chapter-end-mark { color: var(--sk-text-muted) !important; } .sk-main .end-mark-line { background-color: var(--sk-border) !important; } /* ---- Latest chapters table (MangaDex-style rows) ---- */ .sk-main .chapters-table { background-color: transparent !important; color: var(--sk-text) !important; --bs-table-bg: transparent; --bs-table-hover-bg: transparent; } .sk-main .chapters-table thead th { background-color: transparent !important; color: var(--sk-text-muted) !important; border-bottom: 1px solid var(--sk-border) !important; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; } .sk-main .chapters-table tbody tr { border-bottom: 1px solid var(--sk-border) !important; transition: background var(--sk-dur) var(--sk-ease); } .sk-main .chapters-table tbody tr:last-child { border-bottom: none !important; } .sk-main .chapters-table tbody tr:hover { background: var(--sk-bg-3) !important; } .sk-main .chapters-table td { border: none !important; padding: 10px 12px !important; vertical-align: middle; } .sk-main .chapter-row .novel-thumbnail { width: 42px; height: 58px; border-radius: 6px; overflow: hidden; flex: 0 0 auto; } .sk-main .chapter-row .novel-cover { width: 100%; height: 100%; object-fit: cover; display: block; } .sk-main .chapter-row .novel-link { color: var(--sk-text-muted) !important; text-decoration: none; } .sk-main .chapter-row .novel-link:hover { color: var(--sk-accent) !important; } .sk-main .chapter-row .chapter-link { color: var(--sk-text) !important; text-decoration: none; } .sk-main .chapter-row .chapter-link:hover { color: var(--sk-accent) !important; } .sk-main .chapter-row .translator-link { color: var(--sk-text-soft) !important; text-decoration: none; } .sk-main .chapter-row .translator-link:hover { color: var(--sk-accent) !important; } .sk-main .chapter-row .chapter-date { color: var(--sk-text-muted) !important; } /* ---- Volume page (single-volume.php) ---- */ .sk-main .breadcrumb-wrapper { background: transparent !important; border-bottom: 1px solid var(--sk-border) !important; } .sk-main .volume-header-card, .sk-main .chapters-section { background-color: var(--sk-bg-2) !important; border: 1px solid var(--sk-border) !important; border-radius: var(--sk-radius) !important; box-shadow: none !important; } .sk-main .chapters-header { background-color: var(--sk-bg-3) !important; border-bottom: 1px solid var(--sk-border) !important; } .sk-main .chapters-title { color: var(--sk-text) !important; } .sk-main .chapters-title i { color: var(--sk-accent) !important; } .sk-main .volume-title { color: var(--sk-text) !important; } .sk-main .volume-subtitle { color: var(--sk-text-muted) !important; } .sk-main .volume-title-text { color: var(--sk-text-soft) !important; opacity: 1 !important; } .sk-main .volume-badge { background-color: var(--sk-accent-soft) !important; color: var(--sk-accent) !important; } .sk-main .back-to-novel-btn { background-color: var(--sk-bg-3) !important; color: var(--sk-text-soft) !important; border: 1px solid var(--sk-border); } .sk-main .back-to-novel-btn:hover { background-color: var(--sk-accent) !important; color: #fff !important; border-color: var(--sk-accent); } .sk-main .chapter-item { border: 1px solid var(--sk-border) !important; background: transparent !important; } .sk-main .chapter-item:hover { border-color: var(--sk-border-strong) !important; box-shadow: none !important; transform: none !important; } .sk-main .chapter-link { color: var(--sk-text) !important; } .sk-main .chapter-link:hover { background-color: var(--sk-bg-3) !important; } .sk-main .chapter-number { color: var(--sk-accent) !important; } .sk-main .chapter-title { color: var(--sk-text-soft) !important; } .sk-main .chapter-badge.new { background-color: var(--sk-success-soft) !important; color: var(--sk-success) !important; } .sk-main .chapter-meta { color: var(--sk-text-muted) !important; } /* ---- Taxonomy pages (taxonomy.php) ---- */ .sk-main { --taxonomy-bg: var(--sk-bg); --taxonomy-card: var(--sk-bg-2); --taxonomy-text: var(--sk-text); --taxonomy-border: var(--sk-border); --taxonomy-primary: var(--sk-accent); } .sk-main .taxonomy-hero, .sk-main .dark-mode .taxonomy-hero, body.dark-mode .taxonomy-hero { background: radial-gradient(120% 150% at 18% 0%, var(--sk-accent-soft), transparent 55%), var(--sk-bg-2) !important; border-bottom: 1px solid var(--sk-border); } .sk-main .taxonomy-icon { background: var(--sk-accent-soft) !important; color: var(--sk-accent) !important; } .sk-main .taxonomy-count { background: var(--sk-bg-3) !important; color: var(--sk-text-soft) !important; } .sk-main .taxonomy-title { color: var(--sk-text) !important; } .sk-main .taxonomy-title span::after { background-color: var(--sk-accent) !important; } .sk-main .taxonomy-description { color: var(--sk-text-muted) !important; } .sk-main .taxonomy-filter { background-color: var(--sk-bg-2) !important; border: 1px solid var(--sk-border) !important; border-radius: var(--sk-radius) !important; } .sk-main .taxonomy-sidebar .card, .sk-main .taxonomy-sidebar > * { background-color: var(--sk-bg-2) !important; border-color: var(--sk-border) !important; } /* ---- Author / profile page (author.php, template-profile.php) ---- */ .sk-main .profile-modern { background-color: var(--sk-bg) !important; --profile-primary: var(--sk-accent); --profile-primary-dark: var(--sk-accent-active); --profile-secondary: var(--sk-accent); --profile-accent: var(--sk-accent); --profile-info: var(--sk-accent); --profile-bg: var(--sk-bg); --profile-card: var(--sk-bg-2); --profile-card-bg: var(--sk-bg-2); --profile-input-bg: var(--sk-bg-3); --profile-hover: var(--sk-bg-3); --profile-text: var(--sk-text); --profile-text-light: var(--sk-text-muted); --profile-shadow: none; --profile-border-radius: var(--sk-radius); } .sk-main .profile-header-modern { border: 1px solid var(--sk-border); background: var(--sk-bg-2) !important; } .sk-main .profile-header-overlay { background: linear-gradient(to bottom, rgba(8, 10, 14, .25) 0%, rgba(8, 10, 14, .72) 100%) !important; } .sk-main .stat-card { background-color: var(--sk-bg-2) !important; border: 1px solid var(--sk-border) !important; border-top: 3px solid var(--sk-accent) !important; } .sk-main .stat-card:nth-child(2), .sk-main .stat-card:nth-child(3) { border-top-color: var(--sk-accent) !important; } .sk-main .stat-icon, .sk-main .stat-card:nth-child(2) .stat-icon, .sk-main .stat-card:nth-child(3) .stat-icon { color: var(--sk-accent) !important; } .sk-main .stat-value { color: var(--sk-text) !important; } .sk-main .stat-label { color: var(--sk-text-muted) !important; } .sk-main .profile-tabs-modern { background: var(--sk-bg-2) !important; border: 1px solid var(--sk-border); border-radius: var(--sk-radius) !important; } .sk-main .tab-link-modern { color: var(--sk-text-muted) !important; } .sk-main .tab-link-modern.active { background: var(--sk-accent) !important; color: #fff !important; } .sk-main .profile-badges-section, .sk-main .profile-modern .card { background-color: var(--sk-bg-2) !important; border: 1px solid var(--sk-border) !important; border-radius: var(--sk-radius) !important; } /* ---- Privacy / Terms pages (template-privacy.php, template-terms.php) ---- */ .sk-main { --privacy-primary: var(--sk-accent); --privacy-secondary: var(--sk-accent); --privacy-accent: var(--sk-accent); --privacy-bg: var(--sk-bg); --privacy-card: var(--sk-bg-2); --privacy-text: var(--sk-text); --privacy-text-light: var(--sk-text-muted); --privacy-shadow: none; --privacy-border-radius: var(--sk-radius); } .sk-main .privacy-policy-container { background-color: var(--sk-bg) !important; color: var(--sk-text) !important; } .sk-main .privacy-policy-header { background: radial-gradient(120% 150% at 20% 0%, var(--sk-accent-soft), transparent 55%), var(--sk-bg-2) !important; border-bottom: 1px solid var(--sk-border); box-shadow: none !important; } .sk-main .privacy-policy-header::before { display: none !important; } .sk-main .privacy-title { color: var(--sk-text) !important; } .sk-main .lang-btn { background-color: var(--sk-bg-3) !important; color: var(--sk-text-soft) !important; border: 1px solid var(--sk-border) !important; } .sk-main .lang-btn:hover { background-color: var(--sk-bg-elevated) !important; } .sk-main .lang-btn.active { background-color: var(--sk-accent) !important; color: #fff !important; border-color: var(--sk-accent) !important; } .sk-main .privacy-section h2 { color: var(--sk-text) !important; border-bottom: 1px solid var(--sk-border); padding-bottom: 8px; } .sk-main .privacy-section h3 { color: var(--sk-text) !important; } .sk-main .privacy-section li:before { color: var(--sk-accent) !important; } .sk-main .privacy-section a { color: var(--sk-accent) !important; } .sk-main .privacy-policy-content, .sk-main .privacy-policy-container .privacy-content-ar, .sk-main .privacy-policy-container .privacy-content-en, .sk-main .privacy-policy-container .privacy-content-ja { color: var(--sk-text-soft) !important; } .sk-main .privacy-policy-content { max-width: 920px !important; margin-inline: auto !important; } .sk-main .terms-of-service-container { background-color: var(--sk-bg) !important; color: var(--sk-text) !important; } .sk-main .terms-of-service-header { background: radial-gradient(120% 150% at 20% 0%, var(--sk-accent-soft), transparent 55%), var(--sk-bg-2) !important; border-bottom: 1px solid var(--sk-border); box-shadow: none !important; } .sk-main .terms-of-service-header::before { display: none !important; } .sk-main .terms-title { color: var(--sk-text) !important; } .sk-main .terms-section h2 { color: var(--sk-text) !important; border-bottom: 1px solid var(--sk-border); padding-bottom: 8px; } .sk-main .terms-section h3 { color: var(--sk-text) !important; } .sk-main .terms-section a { color: var(--sk-accent) !important; } .sk-main .terms-section li:before { color: var(--sk-accent) !important; } .sk-main .terms-of-service-content { max-width: 920px !important; margin-inline: auto !important; } /* Language tabs for the terms/privacy blocks — global so the register modal (appended to , outside .sk-main) also toggles correctly. */ .terms-content-ar, .terms-content-en, .terms-content-ja { display: none; } .terms-content-ar.active, .terms-content-en.active, .terms-content-ja.active { display: block; } .terms-content-ar { direction: rtl; text-align: right; } .terms-content-en, .terms-content-ja { direction: ltr; text-align: left; } /* ---- Library page (template-library.php) ---- */ .sk-main { --library-primary: var(--sk-accent); --library-success: var(--sk-success); --library-warning: var(--sk-warning); --library-danger: var(--sk-danger); --library-bg: var(--sk-bg); --library-card: var(--sk-bg-2); --library-text: var(--sk-text); --library-secondary: var(--sk-text-muted); --library-border: var(--sk-border); --library-shadow: none; } .sk-main .library-container { background-color: var(--sk-bg) !important; } .sk-main .library-title { color: var(--sk-text) !important; } .sk-main .library-subtitle { color: var(--sk-text-muted) !important; } .sk-main .library-container .novel-card { background: var(--sk-bg-2) !important; border: 1px solid var(--sk-border) !important; border-radius: var(--sk-radius) !important; box-shadow: none !important; } .sk-main .library-container .novel-card:hover { border-color: var(--sk-border-strong) !important; box-shadow: var(--sk-shadow) !important; } .sk-main .library-container .novel-cover { background: var(--sk-bg-3) !important; } .sk-main .library-container .novel-info { padding: var(--sk-space-4) !important; } .sk-main .library-container .novel-title a { color: var(--sk-text) !important; } .sk-main .library-container .novel-title a:hover { color: var(--sk-accent) !important; } .sk-main .library-container .novel-meta { color: var(--sk-text-muted) !important; } .sk-main .library-container .novel-rating { background: rgba(0, 0, 0, .55) !important; color: var(--sk-warning) !important; } .sk-main .library-container .novel-status.ongoing { background: var(--sk-success) !important; } .sk-main .library-container .novel-status.completed { background: var(--sk-info) !important; } .sk-main .library-container .novel-status.hiatus { background: var(--sk-warning) !important; color: #1a1300 !important; } .sk-main .library-container .novel-status.cancelled { background: var(--sk-danger) !important; } /* Frosted slide-up hover (replace full black overlay) */ .sk-main .library-container .novel-card .novel-cover .novel-hover-info { top: auto !important; bottom: 0 !important; height: auto !important; max-height: 100% !important; align-items: flex-end !important; justify-content: flex-start !important; background: linear-gradient(to top, rgba(10, 12, 16, .95) 0%, rgba(10, 12, 16, .8) 60%, rgba(10, 12, 16, .15) 100%) !important; -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); opacity: 1 !important; transform: translateY(101%); transition: transform .3s cubic-bezier(.2, .7, .3, 1); } .sk-main .library-container .novel-card:hover .novel-cover .novel-hover-info { transform: translateY(0); } /* Category tabs + filters */ .sk-main .library-container .tab-btn { background: var(--sk-bg-2) !important; border: 1px solid var(--sk-border) !important; color: var(--sk-text-soft) !important; } .sk-main .library-container .tab-btn:hover { color: var(--sk-text) !important; } .sk-main .library-container .tab-btn.active { background: var(--sk-accent) !important; color: #fff !important; border-color: var(--sk-accent) !important; } .sk-main .library-container .filters-section { background: transparent !important; } /* ---- Recommended novels + Top-10 lists (home) ---- */ .sk-main .recommended-novel-item, .sk-main .top-novel-item { border-bottom: 1px solid var(--sk-border) !important; background: transparent !important; transition: background var(--sk-dur) var(--sk-ease); } .sk-main .recommended-novel-item:hover, .sk-main .top-novel-item:hover { background: var(--sk-bg-3) !important; } .sk-main .rank-badge { background: linear-gradient(135deg, var(--sk-accent), #ff8f5e) !important; color: #fff !important; } .sk-main .rank-number { color: var(--sk-text-muted) !important; } .sk-main .recommended-novel-item h6 a, .sk-main .top-novel-item h6 a, .sk-main .recommended-novel-item a.text-dark, .sk-main .top-novel-item a.text-dark { color: var(--sk-text) !important; } .sk-main .recommended-novel-item h6 a:hover, .sk-main .top-novel-item h6 a:hover { color: var(--sk-accent) !important; } .sk-main .recommended-novel-item .genres-list, .sk-main .recommended-novel-item .novel-stats, .sk-main .top-novel-item .text-muted { color: var(--sk-text-muted) !important; } .sk-main .recommended-novel-item .novel-thumbnail, .sk-main .top-novel-item .novel-thumbnail { border-radius: var(--sk-radius-sm) !important; } /* Register success alert */ .sk-main .alert-success-modern { border-color: var(--sk-success) !important; } .sk-main .alert-success-modern .alert-icon { color: var(--sk-success) !important; } .sk-main .alert-success-modern p { color: var(--sk-text) !important; } /* ---- Auth pages (login / register / lostpassword) ---- */ .sk-main .login-background { background: radial-gradient(110% 80% at 50% -10%, var(--sk-accent-soft), transparent 60%), radial-gradient(80% 60% at 100% 100%, rgba(255, 103, 64, .08), transparent 60%), var(--sk-bg) !important; } .sk-main .login-container { background: transparent !important; } .sk-main .login-wrapper { background: var(--sk-bg-2) !important; border: 1px solid var(--sk-border) !important; border-radius: var(--sk-radius-lg) !important; box-shadow: var(--sk-shadow-lg) !important; } .sk-main .login-icon { background: linear-gradient(135deg, var(--sk-accent), #ff8f5e) !important; box-shadow: 0 8px 24px var(--sk-accent-ring) !important; } .sk-main .login-title { color: var(--sk-text) !important; } .sk-main .login-subtitle { color: var(--sk-text-muted) !important; } .sk-main .form-label-modern { color: var(--sk-text-soft) !important; } .sk-main .form-text-modern { color: var(--sk-text-faint) !important; } .sk-main .form-input-modern { background: var(--sk-bg-3) !important; border: 1px solid var(--sk-border) !important; color: var(--sk-text) !important; border-radius: var(--sk-radius-sm) !important; } .sk-main .form-input-modern:focus { background: var(--sk-bg-3) !important; border-color: var(--sk-accent) !important; box-shadow: 0 0 0 3px var(--sk-accent-ring) !important; } .sk-main .form-input-modern::placeholder { color: var(--sk-text-faint) !important; } .sk-main .input-icon, .sk-main .input-icon i { color: var(--sk-accent) !important; } .sk-main .toggle-password { color: var(--sk-text-muted) !important; } .sk-main .toggle-password:hover { color: var(--sk-accent) !important; } .sk-main .btn-login-modern { background: linear-gradient(135deg, var(--sk-accent), #ff8f5e) !important; border: none !important; color: #fff !important; box-shadow: none !important; border-radius: var(--sk-radius) !important; } .sk-main .btn-login-modern:hover { background: linear-gradient(135deg, var(--sk-accent-hover), #ffa884) !important; transform: translateY(-1px); } .sk-main .link-modern, .sk-main .forgot-password, .sk-main .signup, .sk-main .terms-link { color: var(--sk-accent) !important; } .sk-main .login-footer, .sk-main .login-links { color: var(--sk-text-muted) !important; } .sk-main .link-separator { color: var(--sk-border-strong) !important; } /* Account type (reader / translator) */ .sk-main .role-option label { background: var(--sk-bg-3) !important; border: 2px solid var(--sk-border) !important; color: var(--sk-text-soft) !important; border-radius: var(--sk-radius) !important; } .sk-main .role-option label i { color: var(--sk-accent) !important; } .sk-main .role-option label small { color: var(--sk-text-faint) !important; } .sk-main .role-option input[type="radio"]:checked + label { border-color: var(--sk-accent) !important; background: var(--sk-accent-soft) !important; box-shadow: 0 0 0 3px var(--sk-accent-ring) !important; } /* Custom checkbox */ .sk-main .checkbox-custom { border: 2px solid var(--sk-border-strong) !important; background: var(--sk-bg-3) !important; border-radius: 4px !important; } .sk-main .form-check-input-modern:checked + .form-check-label-modern .checkbox-custom, .sk-main .form-check-input-modern:checked ~ .checkbox-custom { background: var(--sk-accent) !important; border-color: var(--sk-accent) !important; } /* Alerts on auth pages */ .sk-main .alert-modern { background: var(--sk-bg-3) !important; border: 1px solid var(--sk-border) !important; border-radius: var(--sk-radius) !important; color: var(--sk-text) !important; } .sk-main .alert-danger-modern { border-color: rgba(255, 92, 108, .4) !important; } .sk-main .alert-danger-modern .alert-icon { color: var(--sk-danger) !important; } /* Turnstile widget on dark */ .sk-main .cf-turnstile-wrapper { border-radius: var(--sk-radius-sm); overflow: hidden; } /* ---- Auth: split-screen layout (2026) ---- */ .sk-main .login-background { background: radial-gradient(120% 90% at 20% 0%, var(--sk-accent-soft), transparent 55%), radial-gradient(90% 70% at 100% 100%, rgba(255, 103, 64, .07), transparent 60%), var(--sk-bg) !important; } /* Auth pages: let
fill the space between the fixed top bar and the footer, then center the card both ways (overflow-safe via auto margins). */ body.sk-auth-page .sk-main { flex: 1 1 auto !important; display: flex !important; flex-direction: column !important; align-items: center !important; padding-block: clamp(20px, 4vh, 56px); } .sk-main .login-container { display: grid !important; grid-template-columns: 1fr !important; align-items: stretch !important; justify-content: center !important; max-width: 1080px !important; width: 100% !important; min-height: 0 !important; /* drop the legacy min-height:100vh */ margin: auto !important; /* center within the grown
*/ padding: clamp(16px, 4vw, 40px) !important; background: transparent !important; border: none !important; box-shadow: none !important; gap: 0 !important; } .sk-main .login-wrapper { background: var(--sk-bg-2) !important; border: 1px solid var(--sk-border) !important; border-radius: var(--sk-radius-lg) !important; box-shadow: var(--sk-shadow-lg) !important; max-width: none !important; width: 100% !important; margin: 0 !important; } .sk-main .sk-auth__brand { display: none; } @media (min-width: 900px) { .sk-main .login-container { grid-template-columns: 1.05fr 1fr !important; min-height: min(660px, calc(100vh - var(--sk-topbar-h, 64px) - 120px)) !important; padding: 0 !important; } .sk-main .sk-auth__brand { display: flex; order: 2; /* left column (RTL) */ align-items: center; position: relative; overflow: hidden; padding: clamp(30px, 3.6vw, 58px); border-radius: var(--sk-radius-lg) 0 0 var(--sk-radius-lg); background: radial-gradient(130% 100% at 100% 0%, var(--sk-accent-soft), transparent 52%), linear-gradient(158deg, #191310 0%, #241a15 52%, #100d0b 100%); } .sk-main .login-wrapper { order: 1; /* right column (RTL) */ border-radius: 0 var(--sk-radius-lg) var(--sk-radius-lg) 0 !important; border-inline-end: none !important; box-shadow: none !important; display: flex; flex-direction: column; justify-content: center; } } .sk-main .sk-auth__brand-inner { position: relative; z-index: 2; width: 100%; max-width: 380px; } .sk-main .sk-auth__glow { position: absolute; top: 8%; inset-inline-start: -12%; width: 55%; padding-bottom: 55%; border-radius: 50%; background: radial-gradient(circle, var(--sk-accent) 0%, transparent 65%); opacity: .35; filter: blur(26px); pointer-events: none; } .sk-main .sk-auth__logo { display: inline-block; margin-bottom: 30px; line-height: 0; } .sk-main .sk-auth__logo img { max-height: 46px; width: auto; } .sk-main .sk-auth__site { font-size: 1.5rem; font-weight: 800; color: #fff; } .sk-main .sk-auth__headline { color: #fff; font-size: clamp(1.55rem, 2.2vw, 2.05rem); font-weight: 800; line-height: 1.4; margin: 0 0 14px; } .sk-main .sk-auth__lead { color: rgba(255, 255, 255, .72); font-size: 1rem; line-height: 1.9; margin: 0 0 26px; } .sk-main .sk-auth__features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 15px; } .sk-main .sk-auth__features li { display: flex; align-items: center; gap: 12px; color: rgba(255, 255, 255, .9); font-size: .95rem; } .sk-main .sk-auth__features li i { color: var(--sk-accent); width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: rgba(255, 103, 64, .14); flex: 0 0 auto; } /* Form side padding on desktop */ @media (min-width: 900px) { .sk-main .login-wrapper .login-header, .sk-main .login-wrapper .login-form, .sk-main .login-wrapper .login-footer, .sk-main .login-wrapper > form { max-width: 420px; width: 100%; margin-inline: auto; } } /* ---- Generic pages (page.php, privacy, terms, news, …) ---- */ .sk-page { background: var(--sk-bg-2); border: 1px solid var(--sk-border); border-radius: var(--sk-radius); padding: var(--sk-space-6); max-width: 900px; margin-inline: auto; } .sk-page__title { color: var(--sk-text); font-size: 1.8rem; font-weight: 800; margin: 0 0 var(--sk-space-4); padding-bottom: var(--sk-space-3); border-bottom: 1px solid var(--sk-border); } .sk-page__content { color: var(--sk-text-soft); line-height: 1.9; } .sk-page__content h2, .sk-page__content h3, .sk-page__content h4 { color: var(--sk-text); margin-top: 1.6em; } .sk-page__content a { color: var(--sk-accent); } .sk-page__content img { max-width: 100%; height: auto; border-radius: var(--sk-radius-sm); } .sk-page__content ul, .sk-page__content ol { padding-inline-start: 1.4rem; } /* ---- News cards ---- */ .sk-main .news-card-modern { background: var(--sk-bg-2); border: 1px solid var(--sk-border); border-radius: var(--sk-radius); overflow: hidden; transition: transform var(--sk-dur) var(--sk-ease), border-color var(--sk-dur) var(--sk-ease); } .sk-main .news-card-modern:hover { transform: translateY(-4px); border-color: var(--sk-border-strong); } .sk-main .news-image-modern { aspect-ratio: 16 / 9; background: var(--sk-bg-3); } .sk-main .news-image-modern img { width: 100%; height: 100%; object-fit: cover; } /* News archive page */ .sk-main .news-archive-wrapper { background-color: var(--sk-bg) !important; color: var(--sk-text) !important; } .sk-main .news-date-modern { z-index: 10; } .sk-main .date-badge { background: var(--sk-accent) !important; color: #fff !important; box-shadow: none !important; } .sk-main .news-read-btn { background: transparent !important; } .sk-main .btn-read-more { background: var(--sk-accent) !important; color: #fff !important; box-shadow: none !important; } .sk-main .btn-read-more:hover { background: var(--sk-accent-hover) !important; color: #fff !important; transform: none; box-shadow: none !important; } .sk-main .news-title-modern a { color: var(--sk-text) !important; } .sk-main .news-title-modern a:hover { color: var(--sk-accent) !important; } .sk-main .news-excerpt-modern { color: var(--sk-text-muted) !important; } .sk-main .news-author-modern { color: var(--sk-text-muted) !important; } .sk-main .news-controls, .sk-main .news-controls select { background: var(--sk-bg-2) !important; border-color: var(--sk-border) !important; color: var(--sk-text) !important; } /* ---- Volume covers ---- */ .sk-main .volume-cover { aspect-ratio: 2 / 3; box-shadow: var(--sk-shadow-sm); } /* ---- Brand-colour sweep: beat hardcoded blue buttons in legacy CSS ---- */ .sk-main .btn-primary { background-color: var(--sk-accent) !important; border-color: var(--sk-accent) !important; color: #fff !important; } .sk-main .btn-primary:hover, .sk-main .btn-primary:focus { background-color: var(--sk-accent-hover) !important; border-color: var(--sk-accent-hover) !important; } .sk-main .btn-outline-primary { color: var(--sk-accent) !important; border-color: var(--sk-accent) !important; } .sk-main .btn-outline-primary:hover, .sk-main .btn-outline-primary:focus { background-color: var(--sk-accent) !important; color: #fff !important; } .sk-main .btn-login-to-comment { background-color: var(--sk-accent) !important; color: #fff !important; } .sk-main .btn-login-to-comment:hover { background-color: var(--sk-accent-hover) !important; } /* ------------------------------------------------------------------ * 12. Accessibility helpers * ------------------------------------------------------------------ */ .skip-link { position: absolute; inset-inline-start: var(--sk-space-4); top: -100px; z-index: 2000; background: var(--sk-accent); color: var(--sk-accent-contrast); padding: var(--sk-space-2) var(--sk-space-4); border-radius: var(--sk-radius-sm); transition: top var(--sk-dur) var(--sk-ease); } .skip-link:focus { top: var(--sk-space-3); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* ------------------------------------------------------------------ * Quick search modal — retheme to the app-shell tokens (dark + light) * ------------------------------------------------------------------ */ #quickSearchModal .sekaiplus-search-modal { background: var(--sk-bg-2) !important; border: 1px solid var(--sk-border) !important; border-radius: var(--sk-radius-lg) !important; box-shadow: var(--sk-shadow-lg) !important; } #quickSearchModal .sekaiplus-search-header { background: radial-gradient(130% 170% at 100% 0%, var(--sk-accent-soft), transparent 62%), var(--sk-bg-2) !important; border-bottom: 1px solid var(--sk-border) !important; color: var(--sk-text) !important; } #quickSearchModal .search-header-content h5 { color: var(--sk-text) !important; } #quickSearchModal .search-header-content h5 i { color: var(--sk-accent) !important; } #quickSearchModal .search-subtitle { color: var(--sk-text-muted) !important; opacity: 1 !important; } #quickSearchModal .sekaiplus-search-body { background: var(--sk-bg-2) !important; } #quickSearchModal .search-input-container { background: var(--sk-bg-3) !important; border: 1px solid var(--sk-border) !important; border-bottom: none !important; border-radius: var(--sk-radius) var(--sk-radius) 0 0 !important; } #quickSearchModal .search-input-container:focus-within { border-color: var(--sk-accent) !important; box-shadow: 0 0 0 3px var(--sk-accent-ring) !important; } #quickSearchModal .search-icon { color: var(--sk-accent) !important; } #quickSearchModal .sekaiplus-search-input, #quickSearchModal #quickSearch { background: transparent !important; color: var(--sk-text) !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; padding: 14px 48px 14px 16px !important; font-size: 16px !important; } #quickSearchModal .sekaiplus-search-input::placeholder, #quickSearchModal #quickSearch::placeholder { color: var(--sk-text-faint) !important; opacity: 1 !important; } #quickSearchModal #quickSearch:focus { border: none !important; box-shadow: none !important; } #quickSearchModal .btn-clear-search { color: var(--sk-text-muted) !important; } #quickSearchModal .btn-clear-search:hover { color: var(--sk-accent) !important; } #quickSearchModal .sekaiplus-search-results-wrapper { background: var(--sk-bg-3) !important; border: 1px solid var(--sk-border) !important; border-top: none !important; border-radius: 0 0 var(--sk-radius) var(--sk-radius) !important; } #quickSearchModal .search-result-item { background: transparent !important; border-bottom-color: var(--sk-border) !important; color: var(--sk-text-soft) !important; } #quickSearchModal .search-result-item:hover, #quickSearchModal .search-result-item.selected { background: var(--sk-bg-elevated) !important; } #quickSearchModal .result-title { color: var(--sk-text) !important; } #quickSearchModal .result-meta { color: var(--sk-text-muted) !important; opacity: 1 !important; } #quickSearchModal .result-thumbnail, #quickSearchModal .result-avatar { background: var(--sk-bg-elevated) !important; } #quickSearchModal .result-icon { color: var(--sk-accent) !important; } #quickSearchModal .category-title { color: var(--sk-text-muted) !important; } #quickSearchModal .search-loading, #quickSearchModal .search-no-results, #quickSearchModal .search-error { color: var(--sk-text-muted) !important; } #quickSearchModal .spinner { border-color: var(--sk-border) !important; border-top-color: var(--sk-accent) !important; } #quickSearchModal .search-empty-state, #quickSearchModal .search-initial-state, #quickSearchModal .search-empty-state p, #quickSearchModal .search-initial-state p { color: var(--sk-text-muted) !important; } #quickSearchModal .empty-icon, #quickSearchModal .initial-icon { color: var(--sk-border-strong) !important; opacity: 1 !important; } #quickSearchModal .search-empty-state h6 { color: var(--sk-text) !important; } #quickSearchModal .sekaiplus-search-footer { background: var(--sk-bg-2) !important; border-top: 1px solid var(--sk-border) !important; } #quickSearchModal .btn-link-footer { color: var(--sk-accent) !important; } #quickSearchModal .btn-link-footer:hover { color: var(--sk-accent-hover) !important; } #quickSearchModal .btn-close-modal { background: var(--sk-bg-3) !important; color: var(--sk-text) !important; border: 1px solid var(--sk-border) !important; border-radius: var(--sk-radius-sm) !important; } #quickSearchModal .btn-close-modal:hover { background: var(--sk-bg-elevated) !important; } /* ------------------------------------------------------------------ * Attribution / copyright modal (single novel) * ------------------------------------------------------------------ */ #attributionModal .modal-dialog { max-width: 720px; } #attributionModal .sk-attr { background: var(--sk-bg-2); border: 1px solid var(--sk-border); border-radius: var(--sk-radius-lg); overflow: hidden; box-shadow: var(--sk-shadow-lg); color: var(--sk-text); } #attributionModal .sk-attr__head { display: flex; align-items: center; gap: 14px; padding: 20px 22px; background: radial-gradient(120% 200% at 100% 0%, var(--sk-accent-soft), transparent 60%), var(--sk-bg-2); border-bottom: 1px solid var(--sk-border); } #attributionModal .sk-attr__head-icon { width: 46px; height: 46px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border-radius: 14px; font-size: 1.2rem; color: #fff; background: linear-gradient(135deg, var(--sk-accent), #ff8f5e); box-shadow: 0 8px 20px var(--sk-accent-ring); } #attributionModal .sk-attr__head-text { flex: 1 1 auto; min-width: 0; } #attributionModal .sk-attr__title { margin: 0; font-size: 1.2rem; font-weight: 800; color: var(--sk-text); } #attributionModal .sk-attr__subtitle { margin: 3px 0 0; font-size: .86rem; color: var(--sk-text-muted); } #attributionModal .sk-attr__x { flex: 0 0 auto; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--sk-border); border-radius: 10px; background: var(--sk-bg-3); color: var(--sk-text-muted); cursor: pointer; transition: all var(--sk-dur) var(--sk-ease); } #attributionModal .sk-attr__x:hover { color: var(--sk-text); border-color: var(--sk-border-strong); background: var(--sk-bg-elevated); } #attributionModal .sk-attr__body { padding: 18px 22px 22px; background: var(--sk-bg-2); display: flex; flex-direction: column; gap: 14px; } #attributionModal .sk-attr__card { background: var(--sk-bg-3); border: 1px solid var(--sk-border); border-radius: var(--sk-radius); padding: 16px 18px; } #attributionModal .sk-attr__card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } #attributionModal .sk-attr__card-head i { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; font-size: .85rem; color: var(--sk-accent); background: var(--sk-accent-soft); } #attributionModal .sk-attr__card-head h6 { margin: 0; font-size: .98rem; font-weight: 700; color: var(--sk-text); } #attributionModal .sk-attr__facts { margin: 0; } #attributionModal .sk-attr__fact { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px dashed var(--sk-border); } #attributionModal .sk-attr__fact:first-child { padding-top: 0; } #attributionModal .sk-attr__fact:last-child { border-bottom: none; padding-bottom: 0; } #attributionModal .sk-attr__fact dt { flex: 0 0 auto; margin: 0; font-size: .82rem; font-weight: 600; color: var(--sk-text-muted); } #attributionModal .sk-attr__fact dd { margin: 0; text-align: end; font-size: .9rem; font-weight: 600; color: var(--sk-text); min-width: 0; word-break: break-word; } #attributionModal .sk-attr__publisher { display: inline-flex; align-items: center; gap: 8px; } #attributionModal .sk-attr__publisher-logo { width: 22px; height: 22px; border-radius: 6px; object-fit: contain; background: var(--sk-bg-elevated); } #attributionModal .sk-attr__publisher a { color: var(--sk-accent); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; } #attributionModal .sk-attr__publisher a:hover { text-decoration: underline; } #attributionModal .sk-attr__publisher a i { font-size: .68rem; } #attributionModal .sk-attr__alert { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--sk-radius); background: rgba(255, 176, 32, .10); border: 1px solid rgba(255, 176, 32, .32); } #attributionModal .sk-attr__alert-icon { width: 34px; height: 34px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; color: var(--sk-warning); background: rgba(255, 176, 32, .16); } #attributionModal .sk-attr__alert-text strong { display: block; color: var(--sk-text); font-size: .92rem; margin-bottom: 3px; } #attributionModal .sk-attr__alert-text p { margin: 0; font-size: .86rem; color: var(--sk-text-soft); line-height: 1.7; } #attributionModal .sk-attr__checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } #attributionModal .sk-attr__checks li { display: flex; gap: 10px; align-items: flex-start; font-size: .88rem; color: var(--sk-text-soft); line-height: 1.7; } #attributionModal .sk-attr__checks li i { flex: 0 0 auto; margin-top: 3px; font-size: 1rem; color: var(--sk-success); } #attributionModal .sk-attr__checks--legal li i { font-size: .78rem; color: var(--sk-accent); margin-top: 6px; } #attributionModal .sk-attr__foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 22px; background: var(--sk-bg-2); border-top: 1px solid var(--sk-border); } #attributionModal .sk-attr__brand { display: flex; align-items: center; gap: 10px; min-width: 0; } #attributionModal .sk-attr__brand-logo { width: 34px; height: 34px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; color: var(--sk-accent); background: var(--sk-accent-soft); } #attributionModal .sk-attr__brand-text { font-size: .82rem; color: var(--sk-text-muted); } #attributionModal .sk-attr__brand-text strong { color: var(--sk-text); } #attributionModal .sk-attr__cta { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border: none; border-radius: var(--sk-radius); font-size: .9rem; font-weight: 700; color: #fff; cursor: pointer; background: linear-gradient(135deg, var(--sk-accent), #ff8f5e); box-shadow: 0 8px 20px var(--sk-accent-ring); transition: transform var(--sk-dur) var(--sk-ease), background var(--sk-dur) var(--sk-ease); } #attributionModal .sk-attr__cta:hover { transform: translateY(-1px); background: linear-gradient(135deg, var(--sk-accent-hover), #ffa884); } @media (max-width: 576px) { #attributionModal .sk-attr__foot { flex-direction: column-reverse; align-items: stretch; } #attributionModal .sk-attr__cta { justify-content: center; } #attributionModal .sk-attr__fact { flex-direction: column; gap: 4px; } #attributionModal .sk-attr__fact dd { text-align: start; } }