/* ========================================================================== avkuy.live — UI layer (rev 2) Presentation only: no markup, no copy, no URLs. Layout follows the owner's brief: one poster per row on a phone, three on a desktop, titles shown in full, and no coloured hover decoration on the header menu. ========================================================================== */ :root { --av-accent: #f26b21; --av-bg: #f2f4f8; --av-card: #ffffff; --av-text: #1b1e27; --av-muted: #6b7280; --av-line: #e5e7ef; --av-radius: 10px; --av-shadow: 0 1px 2px rgba(16, 20, 40, .05), 0 4px 14px rgba(16, 20, 40, .05); --av-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans Thai", "Sarabun", "IBM Plex Sans Thai", Roboto, "Helvetica Neue", Arial, sans-serif; } html { -webkit-text-size-adjust: 100%; } body { font-family: var(--av-font) !important; /* no !important: the theme's dark stylesheet must be able to win */ background: var(--av-bg); color: var(--av-text); line-height: 1.55; } /* The theme toggles dark mode by loading main-dark.css and adding .night to the logo - there is no class on , so that is what we key off. */ body:has(#logo.night), body:has(#logo-home.night) { --av-bg: #111318; --av-card: #1b1e26; --av-text: #e8eaf1; --av-line: #262a35; } img { max-width: 100%; height: auto; } a { color: inherit; } a:hover, a:focus { color: inherit; } /* --------------------------------------------------------------- header --- Keep the theme's own hover colour: no pills, no accent background. */ #header, .header, header { background: var(--av-card); box-shadow: 0 1px 0 var(--av-line); position: sticky; top: 0; z-index: 60; } .logo img, #header .logo img { height: 40px; width: auto; display: block; } #menu ul.top-menu, .main-menu ul, .nav-menu ul { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; } #menu ul.top-menu li, .main-menu li, .nav-menu li { float: none !important; margin: 0 !important; } #menu ul.top-menu li a, .main-menu li a, .nav-menu li a { display: block; padding: 9px 11px; font-size: 14.5px; font-weight: 400; border-radius: 0; background: none !important; } /* deliberately no colour change on hover - the theme handles it */ #search input[type=text], #search input[type=search], .search-content input { border: 1px solid var(--av-line) !important; border-radius: 8px !important; padding: 9px 13px !important; background: #fafbfe !important; } /* ------------------------------------------------------------ movie grid --- Owner's brief: one per row on a phone, three per row on a desktop. */ .movies-list, .movies-list-full, .mlw-related .movies-list { width: 100% !important; max-width: 100% !important; box-sizing: border-box; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 18px !important; float: none !important; margin: 0 !important; padding: 0 !important; } .movies-list::after, .movies-list-wrap::after { content: none !important; display: none !important; } .ml-item { float: none !important; width: auto !important; height: auto !important; margin: 0 !important; overflow: visible !important; background: var(--av-card); border-radius: var(--av-radius); box-shadow: var(--av-shadow); position: relative; } /* the theme absolutely positions this anchor over a fixed-height box, which is what used to hide the caption; put it back in normal flow */ .movies-list .ml-item > a, .movies-list .ml-item a.ml-mask { position: static !important; display: block !important; width: 100% !important; height: auto !important; top: auto !important; left: auto !important; border-radius: var(--av-radius) var(--av-radius) 0 0; overflow: hidden; } .movies-list .ml-item img.mli-thumb, .movies-list .ml-item img.thumb { width: 100% !important; height: auto !important; aspect-ratio: 16 / 9 !important; object-fit: cover !important; display: block; background: #e3e7ef; } .movies-list .ml-item .mli-info { display: block !important; position: static !important; background: none !important; padding: 10px 12px 13px !important; height: auto !important; } /* titles in full: the brief asks for the whole name, not a truncated one */ .movies-list .ml-item .mli-info h2 { font-size: 14px !important; font-weight: 500 !important; text-align: left !important; color: inherit !important; text-shadow: none !important; line-height: 1.5 !important; display: block !important; -webkit-line-clamp: unset !important; overflow: visible !important; word-break: break-word; } .ml-item .mli-quality { border-radius: 5px !important; font-weight: 600 !important; } /* --------------------------------------------------------------- post ----- */ #mv-info, .mvic-info, .mvic-info { background: var(--av-card); border-radius: var(--av-radius); box-shadow: var(--av-shadow); padding: 16px 18px !important; margin-top: 16px; } #player, .movieplay, #content-embed { border-radius: var(--av-radius) !important; overflow: hidden !important; background: #000; } #bar-player { border-radius: 0 0 var(--av-radius) var(--av-radius); } .btn, button, input[type=submit], a.btn { border-radius: 7px !important; font-family: var(--av-font); } h1.entry-title, .entry-title, .post-title { font-size: 21px !important; line-height: 1.45 !important; } .page-content, .entry-content, .post-content { line-height: 1.75; } .page-content img, .entry-content img { border-radius: var(--av-radius); } /* pagination */ .wp-pagenavi, .pagination, .page-numbers { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 24px 0; } .wp-pagenavi a, .wp-pagenavi span, .page-numbers a, .page-numbers span { border: 1px solid var(--av-line) !important; border-radius: 7px !important; padding: 7px 12px !important; background: var(--av-card); min-width: 38px; text-align: center; } .wp-pagenavi span.current, .page-numbers.current { background: var(--av-accent) !important; border-color: var(--av-accent) !important; color: #fff !important; } /* --------------------------------------------------------------- footer --- */ #footer, footer, .footer { background: #171a22 !important; color: #c9cede !important; margin-top: 30px; padding: 24px 0 !important; } #footer a, footer a { color: #e7eaf3 !important; } /* dead space the theme reserves above the grid */ #main, .main-content { padding-top: 10px !important; } .movies-list-wrap { margin-top: 0 !important; } .ml-title, .ml-title-page { margin: 6px 0 14px !important; padding: 8px 15px !important; } /* ------------------------------------------------- phone: one per row ----- */ @media (max-width: 900px) { .sidebar, #sidebar, .main-sidebar { float: none !important; width: 100% !important; min-height: 0 !important; margin: 0 0 16px !important; } .main-content, .main-content.main-category, .main-content.main-detail, .content-area, #content { float: none !important; width: 100% !important; max-width: 100% !important; } .container { width: 100% !important; max-width: 100% !important; padding-left: 12px; padding-right: 12px; } body { overflow-x: hidden; } img, iframe, table { max-width: 100% !important; } } @media (max-width: 640px) { .movies-list, .movies-list-full, .mlw-related .movies-list { grid-template-columns: 1fr !important; /* owner's brief: one per row */ gap: 14px !important; } .ml-item .mli-info { padding: 10px 12px 12px !important; } .ml-item .mli-info h2 { font-size: 14px !important; } .logo img, #header .logo img { height: 32px; } h1.entry-title, .entry-title { font-size: 18px !important; } .container { padding-left: 10px !important; padding-right: 10px !important; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } /* cards and captions follow the theme's own dark stylesheet */