listing grid (.hp-content .page in this codebase), visually aligned with the homepage `.hp-cards` grids. --------------------------------------------------------------------- */ .hp-content hr { border: none; border-top: 1px solid #e3e6ea; margin: 14px 0 18px; } .breadcrumb { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; row-gap: 4px; padding: 10px 0 6px; margin: 0; font-size: 15px; font-weight: bold; color: #1f2328; list-style: none; } .breadcrumb a, .breadcrumb a:visited { color: #1f2328 !important; text-decoration: none; } .breadcrumb a:hover { color: #d92121 !important; text-decoration: none; } .breadcrumb .sep { color: #8c959f; font-weight: 400; font-size: 16px; line-height: 1; user-select: none; } .breadcrumb .current { color: #0099ff; } .breadcrumb a.current { color: #0099ff !important; } .breadcrumb a.current:hover { color: #007acc !important; } /* Category sort filter (cele mai noi / vizionate / votate). Underline tabs with a small "Sorteaza" label; active tab gets a red underline. */ .cat-sort { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; margin: 8px 0 18px; border-bottom: 1px solid #e3e6ea; } .cat-sort__label { font: 600 11px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; text-transform: uppercase; letter-spacing: .6px; color: #8c959f; padding: 0 14px 0 2px; margin-bottom: -1px; } .cat-sort__item, .cat-sort__item:link, .cat-sort__item:visited { position: relative; padding: 11px 14px 12px; font: 600 13px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #57606a !important; text-decoration: none !important; white-space: nowrap; margin-bottom: -1px; border-bottom: 2px solid transparent; transition: color .15s ease, border-color .15s ease; } .cat-sort__item:hover { color: #1f2328 !important; border-bottom-color: #d0d7de; } .cat-sort__item.is-active, .cat-sort__item.is-active:link, .cat-sort__item.is-active:visited { color: #d92121 !important; border-bottom-color: #d92121; } .cat-sort__item.is-active:hover { color: #b41818 !important; border-bottom-color: #b41818; } @media (max-width: 520px) { .cat-sort__label { width: 100%; padding: 8px 0 0; } .cat-sort__item { padding: 10px 10px 11px; font-size: 12px; } } .hp-content .page { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 14px; background: transparent; } /* Reset legacy float/width for cards rendered by large_item() inside the listing grid. The .hp-card class supplies the modern flex layout. */ .hp-content .page > .home_swf_item { width: auto; margin: 0; padding: 0; float: none; min-width: 0; text-align: left; } /* The trailing

is a legacy clearfix for the old floats; not needed (and visually noisy) inside the grid. */ .hp-content .page > .block { display: none; } /* Homepage + listing grids on desktop: 3-across so each thumbnail is larger than the base 4-col layout; keep the roomier gutters (unchanged px). */ @media (min-width: 901px) { .hp-cards, .hp-content .page { grid-template-columns: repeat(3, 1fr); column-gap: 24px; row-gap: 26px; } } /* responsive */ @media (max-width: 900px) { .hp-main { grid-template-columns: 1fr; } .hp-sidebar { display: none; } .hp-featured { grid-template-columns: 1fr; } .hp-cards { grid-template-columns: repeat(2, 1fr); } .hp-content .page { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .hp-cards { grid-template-columns: 1fr; } .hp-content .page { grid-template-columns: 1fr; } } /* Reusable confirm modal --------------------------------------------- */ .av-modal { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 20px; font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } .av-modal[hidden] { display: none; } .av-modal__overlay { position: absolute; inset: 0; background: rgba(15, 17, 21, 0.55); backdrop-filter: blur(2px); animation: av-modal-fade .15s ease; } .av-modal__panel { position: relative; width: 100%; max-width: 420px; background: #ffffff; border-radius: 16px; box-shadow: 0 20px 60px rgba(0, 0, 0, .25); padding: 24px 26px 20px; text-align: center; animation: av-modal-pop .18s ease; } .av-modal__icon { width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #ddf4ff; color: #0969da; } .av-modal--danger .av-modal__icon { background: #ffebe9; color: #cf222e; } .av-modal__icon svg { width: 26px; height: 26px; } .av-modal__title { margin: 0 0 6px; font: 700 18px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #1f2328; } .av-modal__message { margin: 0 0 20px; font-size: 14px; line-height: 1.5; color: #57606a; } .av-modal__actions { display: flex; gap: 10px; justify-content: center; } .av-modal__btn { display: inline-flex; align-items: center; justify-content: center; min-width: 110px; padding: 10px 18px; border-radius: 999px; font: 600 13px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: .3px; cursor: pointer; transition: background .15s ease, transform .05s ease, border-color .15s ease; } .av-modal__btn--cancel { background: #f6f8fa; color: #1f2328; border: 1px solid #d0d7de; } .av-modal__btn--cancel:hover { background: #eaeef2; border-color: #afb8c1; } .av-modal__btn--confirm { background: #0969da; color: #ffffff; border: 1px solid #0758b8; } .av-modal__btn--confirm:hover { background: #0758b8; } .av-modal__btn:active { transform: translateY(1px); } .av-modal--danger .av-modal__btn--confirm { background: #d92121; border-color: #b41818; } .av-modal--danger .av-modal__btn--confirm:hover { background: #b41818; } @keyframes av-modal-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes av-modal-pop { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } } @media (max-width: 480px) { .av-modal__panel { padding: 22px 20px 18px; } .av-modal__actions { flex-direction: column-reverse; } .av-modal__btn { width: 100%; } } /* ===================================================================== MOBILE RESPONSIVENESS - 2026 The site has had mobile breakpoints scattered through the file as it grew; this block consolidates the cross-cutting tweaks needed to make every page genuinely usable down to 320px viewports. Component-local responsive rules above (cat-sort, ss-box, av-modal, pg-nav, ...) stay where they are so they're easy to find next to the component. ===================================================================== */ /* ---- Tablet / narrow desktop (≤ 900px) ---- At this width the sidebar already collapses (display:none above), the main grid drops to a single column and the home cards drop to 2-up. */ @media (max-width: 900px) { .hp-main { padding: 14px 12px 40px; gap: 16px; } .hp-header-inner { gap: 10px; padding: 12px 12px; } .hp-search-box { max-width: none; } .hp-cat-row { margin-bottom: 22px; } } /* ---- Phone landscape / small tablet (≤ 700px) ---- Compress the header so logo + search + add + menu fit. The "+ Adauga video" pill drops its label and becomes an icon-only button. */ @media (max-width: 700px) { .hp-logo img { height: 30px; } .hp-add { padding: 6px 9px; font-size: 0; /* hide label */ gap: 0; white-space: nowrap; } .hp-add::before { font-size: 18px; } /* font-size MUST be ≥16px on iOS or Safari auto-zooms the page on focus. Keep it at 16px on phones; the input itself is wide enough to accommodate the slightly larger glyphs. */ .hp-search-box input[type="text"] { height: 36px; font-size: 16px; } .hp-user-icons { gap: 8px; } /* Featured + main card grid go single column on small phones too, which is already declared above for 520px. Repeat at 700px so 2-up on tablets remains; then 1-up at 520px below. */ .hp-featured { gap: 10px; } .hp-cards { gap: 10px; } /* Card thumb overlays — larger title + views on handheld screens */ .hp-card-thumb .hp-card-info { padding: 16px 12px 10px; } .hp-card-thumb .hp-card-info .title { font-size: 16px; line-height: 1.3; margin-bottom: 4px; } .hp-card-thumb .hp-card-info .meta { font-size: 13px; color: rgba(255, 255, 255, 0.92); } .hp-stars { font-size: 14px; } /* Footer: single-line on desktop, stacked on phones. */ .hp-footer { padding: 18px 14px; font-size: 12px; } /* Bigger tap targets in dropdown menus (account / sidebar drawer). */ .hp-user-menu__item { padding: 11px 16px !important; } /* The trigger icons aren't at the viewport's right edge (hamburger sits next to the user icon, etc.), so an absolutely-positioned panel anchored to the trigger container ends up extending past the left side of the screen. Pin to the viewport instead. */ .hp-user-menu__panel, .hp-nav-menu__panel { position: fixed; top: 58px; left: 8px; right: 8px; width: auto; min-width: 0; max-width: none; max-height: calc(100vh - 70px); overflow-y: auto; overscroll-behavior: contain; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; } .hp-nav-menu__panel { padding: 12px; } } /* Hamburger drawer open: stop background page scrolling behind the panel (touch / mobile). */ html.hp-nav-drawer-open { overflow: hidden; height: 100%; overscroll-behavior: none; } body.hp-nav-drawer-open { overflow: hidden; } /* ---- Phone portrait (≤ 520px) ---- The hp-cards grid drops to 1 column above; tighten paddings and ensure the card-cb pill never overflows when titles wrap. */ @media (max-width: 520px) { .hp-main { padding: 10px 10px 30px; } .hp-section-heading { font-size: 14px; margin: 18px 0 12px; } .hp-cat-title { font-size: 13px; } /* Card chips slightly larger so they're easier to tap. */ .hp-card-cb__ico { width: 20px; height: 20px; } /* Pagination already adapts at 520px. */ /* Confirm modal already adapts at 480px. */ /* Breadcrumb: keep on a single line if possible, else wrap nicely. */ .breadcrumb { font-size: 13px; padding: 8px 0 4px; gap: 6px 6px; } /* Footer: stack the inline links vertically. */ .hp-footer { padding: 16px 10px; line-height: 1.6; } .hp-footer p { margin: 6px 0 0; } } /* ---- Tiny phones (≤ 360px) ---- */ @media (max-width: 360px) { .hp-header-inner { padding: 10px 8px; gap: 6px; } .hp-logo img { height: 26px; } .hp-search-box input[type="text"] { padding: 0 36px 0 12px; } .hp-add { padding: 6px 7px; } .hp-theme-toggle { width: 32px; height: 32px; margin-right: 0; } .hp-theme-toggle svg { width: 18px; height: 18px; } } /* ---- Floating playlist drawer (legacy jcarousel) ---- Defaults to ~120px tall with 290px wide cards. On phones the drawer would cover ~25% of the viewport and the cards would extend beyond the screen; collapse the prev/next buttons closer to the edges and shrink the cards. */ @media (max-width: 700px) { #hp_fb_like_wrapper { font-size: 12px; } #hp_fb_like_wrapper .jcarousel-skin-tango .jcarousel-container-horizontal { padding: 6px 44px !important; } #hp_fb_like_wrapper .jcarousel-skin-tango .jcarousel-prev-horizontal { left: 4px; } #hp_fb_like_wrapper .jcarousel-skin-tango .jcarousel-next-horizontal { right: 4px; } #hp_fb_like_wrapper .jcarousel-skin-tango .jcarousel-item, .playlist-item { width: 240px !important; } .playlist-item__thumb { width: 86px; height: 50px; } .playlist-toggle { font-size: 10px; padding: 5px 10px; } } @media (max-width: 420px) { #hp_fb_like_wrapper .jcarousel-skin-tango .jcarousel-item, .playlist-item { width: 220px !important; } .playlist-item__title { font-size: 11px; } } /* ---- Form responsiveness ---- The legacy stylesheet has many inputs hard-coded to widths like 367px / 200px / 116px. Inputs/textareas inside the modern .adv-card, .pg-* layouts, the contact + login forms, and any plain in _pages should never exceed their parent's width on phones. */ @media (max-width: 700px) { body.page-app input[type="text"], body.page-app input[type="email"], body.page-app input[type="password"], body.page-app input[type="search"], body.page-app input[type="url"], body.page-app input[type="number"], body.page-app input[type="tel"], body.page-app textarea, body.page-app select { max-width: 100%; box-sizing: border-box; } /* Tables emitted by legacy pages can blow out the viewport. Wrap them in a horizontal scroll container by allowing the page itself to never overflow horizontally. */ body.page-app #page_core { overflow-x: hidden; } body.page-app #page_core table { max-width: 100%; } body.page-app img { max-width: 100%; height: auto; } } /* ---- Touch tweaks ---- Disable hover styles that block taps on touch devices (the dropdowns already handled above). Increase minimum tap targets on key actions. */ @media (hover: none) and (pointer: coarse) { .hp-tab:hover { background: transparent; } .hp-card-cb:hover { background: #ffffff; border-color: #d0d7de; } .hp-card-cb:has(.hp-card-cb__input:checked):hover { background: #eef9f1; border-color: #a8d9b6; } .cat-sort__item:hover { color: #57606a !important; border-bottom-color: transparent; } .cat-sort__item.is-active:hover { color: #d92121 !important; border-bottom-color: #d92121; } /* Account / hamburger panels: on touch devices the trigger button keeps :focus after a tap, which would keep the panel visible via :focus-within even after the explicit click handler removes the `is-open` class. Disable the hover/focus-within open paths here so the panel is driven exclusively by `is-open` -> the second tap really closes it. */ .hp-user-menu:hover .hp-user-menu__panel, .hp-user-menu:focus-within .hp-user-menu__panel, .hp-nav-menu:hover .hp-nav-menu__panel, .hp-nav-menu:focus-within .hp-nav-menu__panel { opacity: 0; visibility: hidden; transform: translateY(-6px); } .hp-user-menu.is-open .hp-user-menu__panel, .hp-nav-menu.is-open .hp-nav-menu__panel { opacity: 1; visibility: visible; transform: translateY(0); } } /* ===================================================================== DARK MODE OVERRIDES The legacy stylesheets (anuntul_video_main.css and ~80 page-specific files under _pages/) hard-code colors, and many redesign rules above already use `color: ... !important` to defeat the legacy `body.page-app a { color: ...; }` cascade. To beat those without touching the original rules, the dark overrides below all use `!important` for color/background/border declarations. ===================================================================== */ :root[data-theme="dark"] body, :root[data-theme="dark"] body.page-home, :root[data-theme="dark"] body.page-app { background: var(--av-bg-page) !important; color: var(--av-text) !important; } /* Generic link recolor (legacy CSS uses a navy that is unreadable on a dark background). The redesign's blueish link is lightened. NOTE: we deliberately do NOT include `:link / :visited / :active` pseudo-class selectors here — each adds +1 to specificity and would beat component-level overrides like `:root[data-theme="dark"] .hp-side-link` (specificity 0,3,0). The bare `a` selector (specificity 0,2,1) loses cleanly to component rules but still defeats legacy `a:link { color: ... }` rules thanks to !important. */ :root[data-theme="dark"] a { color: var(--av-link) !important; } :root[data-theme="dark"] a:hover { color: var(--av-link-hover) !important; } /* ---------------- header ---------------- */ :root[data-theme="dark"] .hp-header { background: var(--av-bg-surface) !important; border-bottom-color: var(--av-border) !important; } /* `.hp-search-box` is just a position:relative wrapper - the rounded pill is the inner (border-radius 19px). Painting the wrapper would put a SQUARE dark surface behind the round input, leaking visibly at the four corners. So drop the dark background on the wrapper and apply it directly to the rounded input instead. */ :root[data-theme="dark"] .hp-search-box { background: transparent !important; } :root[data-theme="dark"] .hp-search-box input[type="text"] { background: var(--av-bg-elev) !important; border-color: var(--av-border) !important; color: var(--av-text) !important; } :root[data-theme="dark"] .hp-search-box input[type="text"]:focus { background: var(--av-bg-muted) !important; border-color: var(--av-link) !important; } :root[data-theme="dark"] .hp-search-box input[type="text"]::placeholder { color: var(--av-text-faint) !important; } :root[data-theme="dark"] .hp-search-box button { color: var(--av-text-muted) !important; background: transparent !important; } :root[data-theme="dark"] .hp-add { background: green !important; color: #fff !important; border-color: #006400 !important; } :root[data-theme="dark"] .hp-add:hover { background: #009900 !important; color: #fff !important; } :root[data-theme="dark"] .hp-user-icons > a { color: var(--av-text-muted) !important; } :root[data-theme="dark"] .hp-user-icons > a:hover { color: var(--av-link) !important; } :root[data-theme="dark"] .hp-user-menu__trigger { color: var(--av-text-muted) !important; } :root[data-theme="dark"] .hp-user-menu__trigger:hover { color: var(--av-link) !important; } :root[data-theme="dark"] .hp-nav-menu__trigger { color: var(--av-text-muted) !important; } :root[data-theme="dark"] .hp-nav-menu__trigger:hover { background: var(--av-bg-elev) !important; } /* ---------------- popovers ---------------- */ :root[data-theme="dark"] .hp-user-menu__panel, :root[data-theme="dark"] .hp-nav-menu__panel, :root[data-theme="dark"] .hp-tab-menu { background: var(--av-bg-surface) !important; border-color: var(--av-border) !important; box-shadow: var(--av-shadow-lg) !important; } :root[data-theme="dark"] .hp-user-menu__title { color: var(--av-text-muted) !important; } :root[data-theme="dark"] .hp-user-menu__item { color: var(--av-text-muted) !important; } :root[data-theme="dark"] .hp-user-menu__ico { color: var(--av-text-muted) !important; } :root[data-theme="dark"] .hp-user-menu__item:hover { background: var(--av-bg-elev) !important; color: #ff6b6b !important; } :root[data-theme="dark"] .hp-user-menu__item:hover .hp-user-menu__ico { color: #ff6b6b !important; } :root[data-theme="dark"] .hp-user-menu__item--danger:hover { background: var(--av-accent-soft) !important; } :root[data-theme="dark"] .hp-user-menu__divider { background: var(--av-border) !important; } :root[data-theme="dark"] .hp-tab-menu__item { color: var(--av-text-muted) !important; } :root[data-theme="dark"] .hp-tab-menu__item:hover { background: var(--av-bg-elev) !important; color: var(--av-text) !important; } :root[data-theme="dark"] .hp-tab-menu__item.is-current, :root[data-theme="dark"] .hp-tab-menu__item.is-current:link, :root[data-theme="dark"] .hp-tab-menu__item.is-current:visited { background: var(--av-bg-elev) !important; color: var(--av-text-strong) !important; } :root[data-theme="dark"] .hp-tab-menu__item.is-current:hover { background: var(--av-bg-elev) !important; color: var(--av-text-strong) !important; } /* ---------------- sidebar ---------------- In dark mode the sidebar uses a muted grey for resting state so the labels and icons don't shout against the page surface; hover and active states bump back up to bright text/icons for affordance. */ :root[data-theme="dark"] .hp-sidebar { color: var(--av-text-muted) !important; } :root[data-theme="dark"] .hp-side-link, :root[data-theme="dark"] .hp-side-link--home { color: var(--av-text-muted) !important; background: transparent !important; /* `.hp-side-link--home` carries `border: 1px solid #d0d7de` from the light-mode rule; that's bright on the dark surface so we recolor it to match the rest of the sidebar pills. */ border-color: var(--av-border) !important; } :root[data-theme="dark"] .hp-side-link--home .ico, :root[data-theme="dark"] .hp-side-link .ico { color: var(--av-text-muted) !important; } :root[data-theme="dark"] .hp-side-link:hover, :root[data-theme="dark"] .hp-side-link.is-active { background: var(--av-bg-elev) !important; color: var(--av-text) !important; } :root[data-theme="dark"] .hp-side-link--home:hover { background: var(--av-bg-elev) !important; color: var(--av-text) !important; } /* The Home pill keeps the same surface background as the category pills (`.hp-side-pill`) below it, both at rest and when active, so the sidebar reads as a single column of consistent pills. Listed AFTER the generic hover/active rule above (and uses the same 3-class specificity as `.hp-side-link.hp-side-link--home.is-active`) so it wins the cascade for the home link's active state. */ :root[data-theme="dark"] .hp-side-link.hp-side-link--home, :root[data-theme="dark"] .hp-side-link.hp-side-link--home.is-active { background: var(--av-bg-surface) !important; } :root[data-theme="dark"] .hp-side-link:hover .ico, :root[data-theme="dark"] .hp-side-link.is-active .ico, :root[data-theme="dark"] .hp-side-link--home:hover .ico, :root[data-theme="dark"] .hp-side-link--home.is-active .ico { color: var(--av-text) !important; } :root[data-theme="dark"] .hp-side-pill { color: var(--av-text-muted) !important; border-color: var(--av-border) !important; background: var(--av-bg-surface) !important; } :root[data-theme="dark"] .hp-side-pill:hover { background: var(--av-bg-elev) !important; color: var(--av-text) !important; } :root[data-theme="dark"] .hp-rubrici h3 { color: var(--av-text-faint) !important; } :root[data-theme="dark"] .hp-rubrici > ul > li > a { color: var(--av-text-muted) !important; } :root[data-theme="dark"] .hp-rubrici > ul > li > a:hover { background: var(--av-bg-elev) !important; color: var(--av-text) !important; } :root[data-theme="dark"] .hp-rubrici > ul > li > a.is-current, :root[data-theme="dark"] .hp-rubrici > ul > li > a.is-current:link, :root[data-theme="dark"] .hp-rubrici > ul > li > a.is-current:visited, :root[data-theme="dark"] .hp-rubrici > ul > li.has-current-sub > a, :root[data-theme="dark"] .hp-rubrici > ul > li.has-current-sub > a:link, :root[data-theme="dark"] .hp-rubrici > ul > li.has-current-sub > a:visited { background: var(--av-bg-elev) !important; color: var(--av-text-strong) !important; } :root[data-theme="dark"] .hp-rubrici > ul > li > a.is-current:hover, :root[data-theme="dark"] .hp-rubrici > ul > li.has-current-sub > a:hover { background: var(--av-bg-elev) !important; color: var(--av-text-strong) !important; } :root[data-theme="dark"] .hp-subcats li a { color: var(--av-text-muted) !important; background: transparent !important; } :root[data-theme="dark"] .hp-subcats li a:hover { background: var(--av-bg-elev) !important; color: var(--av-text) !important; } :root[data-theme="dark"] .hp-subcats li a.is-current, :root[data-theme="dark"] .hp-subcats li a.is-current:link, :root[data-theme="dark"] .hp-subcats li a.is-current:visited { background: var(--av-bg-elev) !important; color: var(--av-text-strong) !important; } :root[data-theme="dark"] .hp-subcats li a.is-current:hover { background: var(--av-bg-elev) !important; color: var(--av-text-strong) !important; } :root[data-theme="dark"] .hp-side-services a { color: var(--av-text-muted) !important; background: transparent !important; } :root[data-theme="dark"] .hp-side-services a:hover { background: var(--av-bg-elev) !important; color: var(--av-text) !important; } /* ---------------- top tabs ---------------- */ :root[data-theme="dark"] .hp-tabs { border-bottom-color: var(--av-border) !important; background: transparent !important; } :root[data-theme="dark"] .hp-tab { color: var(--av-text-muted) !important; background: transparent !important; } :root[data-theme="dark"] .hp-tab:hover { color: var(--av-text) !important; background: var(--av-bg-elev) !important; } /* Active top tab keeps the same muted grey as the others - the red bottom underline already signals the active section, so no need to bump the text to bright white. */ :root[data-theme="dark"] .hp-tab.is-active { color: var(--av-text-strong) !important; } :root[data-theme="dark"] .hp-tab__chev-btn { color: var(--av-text-muted) !important; background: transparent !important; } :root[data-theme="dark"] .hp-tabs-arrow { background: var(--av-bg-surface) !important; color: var(--av-text) !important; border-color: var(--av-border) !important; } /* ---------------- cards / video grids ---------------- */ :root[data-theme="dark"] .hp-card, :root[data-theme="dark"] .hp-cat-row, :root[data-theme="dark"] .hp-content, :root[data-theme="dark"] .hp-main { color: var(--av-text) !important; } /* Use #page_core to outweigh the generic `:root[data-theme="dark"] #page_core h1..h5 { color: --av-text-strong }` rule below; otherwise the section/category headings stay bright white (the user wants them in muted grey). */ :root[data-theme="dark"] #page_core .hp-cat-title, :root[data-theme="dark"] #page_core .hp-section-heading, :root[data-theme="dark"] .hp-cat-title, :root[data-theme="dark"] .hp-section-heading { color: var(--av-text-muted) !important; } :root[data-theme="dark"] .hp-card-cb { background: #FFF !important; border-color: var(--av-border) !important; color: #FFF !important; box-shadow: var(--av-shadow-sm) !important; } :root[data-theme="dark"] .hp-card-cb:hover { background: var(--av-bg-muted) !important; border-color: var(--av-border-strong) !important; color: var(--av-text) !important; } :root[data-theme="dark"] .hp-card-cb__ico { color: var(--av-text-faint) !important; } /* "In playlist" checked state - same dark-green palette as the detail-page .df-playlist-toggle for visual consistency. */ :root[data-theme="dark"] .hp-card-cb:has(.hp-card-cb__input:checked) { background: #0f2a1a !important; border-color: #1f5034 !important; color: #7ee2a8 !important; } :root[data-theme="dark"] .hp-card-cb:has(.hp-card-cb__input:checked) .hp-card-cb__ico { color: #7ee2a8 !important; } /* Same in the mobile media query at 480px which redeclares the hover/ checked colors using literal hex values. */ @media (max-width: 480px) { :root[data-theme="dark"] .hp-card-cb:hover { background: var(--av-bg-elev) !important; border-color: var(--av-border) !important; } :root[data-theme="dark"] .hp-card-cb:has(.hp-card-cb__input:checked):hover { background: #0f2a1a !important; border-color: #1f5034 !important; } } :root[data-theme="dark"] .hp-card-thumb { background: #000 !important; } /* Starbox rating widgets: in light mode the sprite gutter is opaque white which blends with the page; in dark mode the same gutter becomes a glaring bright bar around the stars. Override by clipping the .stars track to the star shapes via a CSS mask (gutter becomes transparent and picks up the dark surface). The masks are alpha inverses of the sprite PNGs - generated by _tools/starbox_make_masks.py. */ :root[data-theme="dark"] .df-meta__rating .starbox .stars { -webkit-mask-image: url("../_js/starbox/images/starbox/pointy7_mask.png"); mask-image: url("../_js/starbox/images/starbox/pointy7_mask.png"); -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x; -webkit-mask-size: 23px 22px; mask-size: 23px 22px; background: #6b737f !important; } /* Right-rail "similar films" stars already use the small7 mask in _pages/detalii_film.php; only the track colour needs a dark tweak. */ :root[data-theme="dark"] .df-film-similar #same_category .starbox .stars { background: #6b737f !important; } :root[data-theme="dark"] .hp-card-info__row { color: var(--av-text-muted) !important; } :root[data-theme="dark"] .hp-card-action, :root[data-theme="dark"] .hp-card-action:link, :root[data-theme="dark"] .hp-card-action:visited { background: var(--av-bg-elev) !important; color: var(--av-text) !important; border-color: var(--av-border) !important; } :root[data-theme="dark"] .hp-card-action:hover { background: var(--av-bg-muted) !important; } /* Mirror the light-mode color story for the three coloured variants (blue Modifica / red Sterge / yellow Sterge din favorite) using translucent washes so they pop against the dark card without being harsh. Listed after the generic .hp-card-action override so the variant rules win the cascade. */ :root[data-theme="dark"] .hp-card-action--edit, :root[data-theme="dark"] .hp-card-action--edit:link, :root[data-theme="dark"] .hp-card-action--edit:visited { background: rgba(56,139,253,.16) !important; border-color: rgba(56,139,253,.45) !important; color: #58a6ff !important; } :root[data-theme="dark"] .hp-card-action--edit:hover { background: rgba(56,139,253,.28) !important; border-color: rgba(56,139,253,.6) !important; color: #79b8ff !important; } :root[data-theme="dark"] .hp-card-action--del, :root[data-theme="dark"] .hp-card-action--del:link, :root[data-theme="dark"] .hp-card-action--del:visited { background: rgba(248,81,73,.16) !important; border-color: rgba(248,81,73,.45) !important; color: #ff7b72 !important; } :root[data-theme="dark"] .hp-card-action--del:hover { background: rgba(248,81,73,.28) !important; border-color: rgba(248,81,73,.6) !important; color: #ffa198 !important; } :root[data-theme="dark"] .hp-card-action--fav-rem, :root[data-theme="dark"] .hp-card-action--fav-rem:link, :root[data-theme="dark"] .hp-card-action--fav-rem:visited { background: rgba(245,180,0,.14) !important; border-color: rgba(245,180,0,.45) !important; color: #f5b400 !important; } :root[data-theme="dark"] .hp-card-action--fav-rem:hover { background: rgba(245,180,0,.24) !important; border-color: rgba(245,180,0,.6) !important; color: #ffd56a !important; } :root[data-theme="dark"] .hp-card-thumb--processing { background: var(--av-bg-elev) !important; color: var(--av-text-muted) !important; } /* ---------------- footer ---------------- */ :root[data-theme="dark"] .hp-footer { background: var(--av-bg-surface) !important; border-top-color: var(--av-border) !important; color: var(--av-text-muted) !important; } :root[data-theme="dark"] .hp-footer a { color: var(--av-text-muted) !important; } :root[data-theme="dark"] .hp-footer a:hover { color: var(--av-text) !important; } /* ---------------- breadcrumb / sort bar ---------------- */ :root[data-theme="dark"] .breadcrumb { color: var(--av-text-muted) !important; } :root[data-theme="dark"] .breadcrumb a, :root[data-theme="dark"] .breadcrumb a:visited { color: var(--av-text-muted) !important; } :root[data-theme="dark"] .breadcrumb a:hover { color: var(--av-text) !important; } /* Current page in the breadcrumb - render in pure white so the user can clearly see where they are, while parent links stay muted. The harsh blue (#0099ff) from light mode is dropped for a clean white that's consistent with section headings/strong text in dark mode. */ :root[data-theme="dark"] .breadcrumb .current, :root[data-theme="dark"] .breadcrumb a.current, :root[data-theme="dark"] .breadcrumb a.current:hover { color: var(--av-text-muted) !important; } :root[data-theme="dark"] .cat-sort { border-bottom-color: var(--av-border) !important; } :root[data-theme="dark"] .cat-sort__label { color: var(--av-text-muted) !important; } :root[data-theme="dark"] .cat-sort__item { color: var(--av-text-muted) !important; } :root[data-theme="dark"] .cat-sort__item:hover { color: var(--av-text) !important; } :root[data-theme="dark"] .cat-sort__item.is-active { color: var(--av-accent) !important; } /* ---------------- modals (av-modal) ---------------- */ :root[data-theme="dark"] .av-modal__overlay { background: var(--av-bg-overlay) !important; } :root[data-theme="dark"] .av-modal__panel { background: var(--av-bg-surface) !important; color: var(--av-text) !important; border-color: var(--av-border) !important; box-shadow: var(--av-shadow-lg) !important; } :root[data-theme="dark"] .av-modal__title { color: var(--av-text-strong) !important; } :root[data-theme="dark"] .av-modal__message { color: var(--av-text-muted) !important; } :root[data-theme="dark"] .av-modal__btn--cancel { background: var(--av-bg-elev) !important; color: var(--av-text) !important; border-color: var(--av-border) !important; } :root[data-theme="dark"] .av-modal__btn--cancel:hover { background: var(--av-bg-muted) !important; } /* ---------------- detail page (df-* / ab-*) ---------------- The detail page (_pages/detalii_film.php) carries its own inline