/* === EX MA 2026 — Global Page Layout === */
:root{
/* Sidebar width scales: 200px @ 1920, 400px @ 3840, ~120px minimum */
--sidebar-w: clamp(120px, 10.4167vw, 400px);
--page-max: 3840px;
--gutter: 16px;
--centerwrap-pad: 5px;
--accent: #d31f23;
--bg: #fff;
}
/* Page container centers content and constrains max width */
.ex-page {
background: var(--bg);
width: 100%;
max-width: var(--page-max);
margin: 0 auto;
min-height: 100vh;
display: grid;
grid-template-rows: auto 1fr auto; /* header | content | footer */
}
/* Header bar */
.ex-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--gutter);
padding: 12px var(--gutter);
border-bottom: 1px solid #e9e9e9;
position: sticky;
top: 0;
z-index: 30;
background: var(--bg);
}
.ex-header .brand {
font-weight: 700;
font-size: clamp(1.1rem, 1.2vw, 1.6rem);
letter-spacing: .02em;
}
/* ===== Header brand logo ===== */
.brand {
display: flex;
align-items: center;
}
/* base logo sizing */
.ns-logo {
max-width: 325px;
height: auto;
display: block;
}
/* default = light theme */
.ns-logo-dark {
display: none;
}
/* dark theme switch */
[data-theme="dark"] .ns-logo-light {
display: none;
}
[data-theme="dark"] .ns-logo-dark {
display: block;
}
/* Layout: sidebar + main; desktop/tablet */
.ex-layout {
display: grid;
grid-template-columns: var(--sidebar-w) 1fr;
gap: var(--gutter);
padding: var(--gutter);
position: relative;
}
/* Sidebar (left column) */
.ex-sidebar {
border-right: 1px solid #eee;
padding-right: var(--gutter);
}
/* === Sidebar nav: submenus + accordion === */
.ex-sidebar .ex-nav { list-style: none; margin: 0; padding: 0; }
.ex-sidebar .ex-nav > li { position: relative; }
.ex-sidebar .ex-nav a.ex-nav-link{
display:block;
padding:6px 40px 7px 12px; /* room for chevron toggle on the right */
border-radius:6px;
color:#222; text-decoration:none;
text-transform: uppercase;
}
.ex-sidebar .ex-nav a.ex-nav-link:hover{ background:#f4f4f4; }
.ex-sidebar .ex-sub-toggle{
position:absolute; right:8px; top:50%;
transform:translateY(-50%) rotate(0deg);
width:28px; height:28px; border:0; background:transparent; padding:0;
display:grid; place-items:center; cursor:pointer; color:#555;
transition:transform .18s ease, color .18s ease;
}
.ex-sidebar .ex-sub-toggle:hover{ color:#000; }
.ex-sidebar li.has-sub.is-open > .ex-sub-toggle{ transform:translateY(-50%) rotate(90deg); }
/* SUBMENU: hidden by default; JS toggles slideUp/Down */
.ex-sidebar .ex-sub{
display:none;
margin:4px 0 8px 0;
padding-left:12px;
border-left:2px solid #eee;
}
.ex-sidebar li.has-sub.is-open > .ex-sub{ display:block !important; }
.ex-sidebar .ex-sub a{
display:block;
padding:8px 12px 8px 20px;
border-radius:6px;
font-size:.95em;
color:#333;
text-decoration:none;
text-transform: uppercase;
}
.ex-sidebar .ex-sub a:hover{ background:#f7f7f7; }
.ex-sidebar .ex-nav a.is-active{ background:#f0f0f0; font-weight:700; }
@media (max-width:575.98px){
.ex-sidebar .ex-nav a.ex-nav-link{ padding-right:36px; }
.ex-sidebar .ex-sub-toggle{ right:6px; }
}
/* default inherits link color */
.ex-sidebar .ex-nav .ex-sub-toggle { color: inherit; }
/* turn chevron white when the parent label is hovered/focused */
.ex-sidebar .ex-nav li.has-sub > a:hover .ex-sub-toggle,
.ex-sidebar .ex-nav li.has-sub > a:focus .ex-sub-toggle,
.ex-sidebar .ex-nav .ex-sub-toggle:hover {
color: #fff;
}
/* === Sticky sidebar (desktop only) === */
@media (min-width: 992px){
.ex-layout{ align-items: start; } /* ensure the sticky child can size itself */
.ex-sidebar{
position: sticky;
top: calc(var(--header-h, 0px) + var(--gutter)); /* clears the sticky header */
align-self: start;
height: fit-content; /* shrink-wrap content */
max-height: calc(100vh - var(--gutter) - var(--header-h, 0px));
overflow: auto; /* own scroll if content is taller */
-webkit-overflow-scrolling: touch; /* smooth iOS scroll in the pane */
}
}
/* Highlighted navigation item (used for JOIN NOW) */
.ex-sidebar .ex-nav > li.ex-nav-highlight > a.ex-nav-link{
background: #2e9b3f;
color: #fff;
font-weight: 700;
}
.ex-sidebar .ex-nav > li.ex-nav-highlight > a.ex-nav-link:hover{
background: #278537;
color: #fff;
}
.ex-sidebar .ex-nav > li.ex-nav-highlight > a.ex-nav-link:focus-visible{
background: #278537;
color: #fff;
}
/* Hamburger (hidden on wide screens) */
.ex-menu-toggle {
display: none;
width: 40px; height: 36px;
border: 1px solid #ccc;
border-radius: 8px;
background: #fafafa;
cursor: pointer;
position: relative;
}
.ex-menu-toggle:before,
.ex-menu-toggle:after,
.ex-menu-toggle i {
content: "";
position: absolute;
left: 8px; right: 8px; height: 2px; background: #333;
}
.ex-menu-toggle i { top: 50%; transform: translateY(-50%); }
.ex-menu-toggle:before { top: 10px; }
.ex-menu-toggle:after { bottom: 10px; }
/* Main body (right column) */
.ex-main { min-width: 0; }
/* Centering wrapper for each module inside main */
.centerwrap {
margin: var(--centerwrap-pad) auto;
padding: var(--centerwrap-pad);
width: calc(100% - (var(--centerwrap-pad) * 2));
max-width: 100%;
background: transparent;
}
/* Module block */
.ex-module { background: #fff; }
/* Module header with H2 left + View All right */
.ex-module-header {
display: flow-root;
padding: 8px 6px;
border-bottom: 1px solid #eaeaea;
}
.ex-module-header h2{
margin: 0;
color:#d31f23;
font-weight:700;
font-size: clamp(18px, 1.4vw, 24px);
line-height: 1.2;
float: left;
text-transform: uppercase;
}
/* EX: stylized "View all" link-button (accent #d31f23, bg #f5f5f5) */
.ex-module-header .ex-view-all{
--ex-viewall-accent: #d31f23; /* red text/icon */
--ex-viewall-bg: #f5f5f5; /* match sidebar background */
--ex-viewall-bd: rgba(211, 31, 35, .25); /* subtle red border */
display:inline-flex;
align-items:center;
gap:.5rem;
padding:.5rem .85rem;
border-radius:9999px;
color:var(--ex-viewall-accent);
background:var(--ex-viewall-bg);
border:1px solid var(--ex-viewall-bd);
text-decoration:none;
font-weight:700;
line-height:1;
white-space:nowrap;
transition: background .18s ease, border-color .18s ease, color .18s ease, transform .06s ease;
}
/* Chevron (inherits currentColor) */
.ex-module-header .ex-view-all::after{
content:"";
width:1.05em; height:1.05em; flex:0 0 auto;
background:currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,") no-repeat 50% 50% / contain;
mask: url("data:image/svg+xml;utf8,") no-repeat 50% 50% / contain;
transform: translateX(0);
transition: transform .18s ease;
}
/* Hover / active */
.ex-module-header .ex-view-all:hover{
background:#efefef; /* subtle hover lift over #f5f5f5 */
border-color:rgba(211, 31, 35, .35);
}
.ex-module-header .ex-view-all:hover::after{ transform: translateX(2px); }
.ex-module-header .ex-view-all:active{ transform: translateY(0.5px); }
/* Focus ring */
.ex-module-header .ex-view-all:focus-visible{
outline:none;
box-shadow:0 0 0 3px rgba(211, 31, 35, .35);
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce){
.ex-module-header .ex-view-all,
.ex-module-header .ex-view-all::after{
transition: none;
}
}
.ex-view-all {
float: right;
display: inline-block;
font-size: .9rem;
line-height: 1;
padding: 8px 10px;
border-radius: 6px;
color: #111;
text-decoration: none;
border: 1px solid #ddd;
background: #f8f8f8;
}
.ex-view-all:hover { background: #f1f1f1; }
/* ============ Tablet & down: sidebar becomes a drawer ============ */
@media (max-width: 991.98px) {
.ex-menu-toggle { display: inline-block; }
.ex-layout { grid-template-columns: 1fr; }
.ex-sidebar {
position: fixed;
inset: 0 auto 0 0;
width: 36.333vw; /* was: min(80vw, 320px) */
max-width: 36.333vw; /* was: 90vw */
background: #fff;
border-right: 1px solid #eaeaea;
padding: var(--gutter);
transform: translateX(-100%);
transition: transform .24s ease;
z-index: 50;
}
.ex-layout.is-menu-open .ex-sidebar { transform: translateX(0); }
.ex-layout::after {
content: "";
position: fixed;
inset: 0;
background: rgba(0,0,0,.28);
opacity: 0;
pointer-events: none;
transition: opacity .2s ease;
z-index: 40;
}
.ex-layout.is-menu-open::after {
opacity: 1;
pointer-events: auto;
}
}
/* ============ Very small screens tweaks ============ */
@media (max-width: 575.98px){
.ex-header { padding: 10px 12px; }
.ex-layout { padding: 12px; gap: 12px; }
.ex-module-header { padding: 8px 4px; }
}
/* === Footer === */
.ex-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--gutter);
padding: 12px var(--gutter);
border-top: 1px solid #e9e9e9;
background: var(--bg);
z-index: 20;
font-size: clamp(.9rem, 1vw, 1rem);
}
.ex-footer .foot-left,
.ex-footer .foot-right {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
.ex-footer a { color: #333; text-decoration: none; }
.ex-footer a:hover { text-decoration: underline; }
@media (max-width: 575.98px){
.ex-footer { flex-direction: column; align-items: flex-start; gap: 8px; }
}
/* === EX MA 2026 Slider Styles === */
.ex-slider {
position: relative;
overflow: hidden;
width: 100%;
--gap: 16px;
--items: 1;
margin-bottom: 18px;
}
.ex-slider-track {
display: flex;
gap: var(--gap);
will-change: transform;
transition: transform var(--ex-dur, .35s) ease;
}
.ex-slide { flex: 0 0 calc((100% - (var(--gap) * (var(--items) - 1))) / var(--items)); }
.ex-slide img,
.ex-slide video {
width: 100%;
height: auto;
display: block;
border-radius: .5rem;
}
/* Arrows */
.ex-slider-prev,
.ex-slider-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 5;
padding: .9rem 1.05rem;
font-size: 1.75rem;
line-height: 1;
border-radius: 999px;
background: rgba(0,0,0,.55);
color: #fff;
border: 1px solid rgba(255,255,255,.35);
box-shadow: 0 2px 12px rgba(0,0,0,.35);
cursor: pointer;
}
.ex-slider-prev:hover, .ex-slider-next:hover { background: rgba(0,0,0,.7); }
.ex-slider-prev { left: .5rem; }
.ex-slider-next { right: .5rem; }
.ex-slider-prev[disabled], .ex-slider-next[disabled] {
opacity: .35; pointer-events: none;
}
/* Dots */
.ex-slider-dots {
display: flex; justify-content: center; gap: 10px; margin: 14px 0 0; user-select: none; position: relative; z-index: 5;
}
.ex-slider-dot {
width: 14px; height: 14px; padding: 0; border-radius: 50%;
background: #b5b5b5; border: 2px solid #000;
display: inline-block; cursor: pointer;
appearance: none; -webkit-appearance: none;
line-height: 0; vertical-align: middle;
transition: transform .12s ease, opacity .12s ease, background-color .12s ease, border-color .12s ease;
}
.ex-slider-dot:hover { transform: scale(1.12); opacity: .95; }
.ex-slider-dot.is-active { background: #c40000; border-color: #000; }
.ex-slider-dot:focus-visible { outline: 2px solid #000; outline-offset: 2px; }
@media (max-width: 575.98px) {
.ex-slider-prev, .ex-slider-next {
padding: .7rem .85rem; font-size: 1.35rem;
}
}
/* Fade mode for slider */
.ex-slider.is-fade .ex-slider-track {
position: relative; display: block; gap: 0 !important; transition: none !important;
}
.ex-slider.is-fade .ex-slide {
position: absolute; inset: 0; width: 100%; flex: none;
opacity: 0; pointer-events: none; transition: opacity var(--ex-dur, .35s) ease;
}
.ex-slider.is-fade .ex-slide.is-active { opacity: 1; pointer-events: auto; }
/* --- Fix: make slider arrows visible regardless of site/global SVG rules --- */
.ex-slider-prev,
.ex-slider-next{
color:#fff !important; /* drives `currentColor` for the path stroke */
}
.ex-slider-prev svg,
.ex-slider-next svg{
width:22px; height:22px; display:block;
}
.ex-slider-prev svg path,
.ex-slider-next svg path{
fill: none !important;
stroke: currentColor !important; /* = #fff from the buttons above */
stroke-width: 2.5 !important;
stroke-linecap: round !important;
stroke-linejoin: round !important;
}
/* --- Responsive arrow sizing driven by slider height --- */
.ex-slider{
/* JS sets --ex-h to the current item height (px). Fallback below. */
--ex-h: 260px; /* safe default */
/* Arrow dimensions scale with --ex-h, but are clamped */
--ex-arrow-fs: clamp(14px, calc(var(--ex-h) * 0.18), 26px); /* icon size */
--ex-arrow-min: clamp(30px, calc(var(--ex-h) * 0.32), 48px); /* hit area */
--ex-arrow-pad: clamp(6px, calc(var(--ex-h) * 0.08), 12px); /* button pad */
}
.ex-slider-prev,
.ex-slider-next{
font-size: var(--ex-arrow-fs); /* drives SVG (1em) */
min-width: var(--ex-arrow-min);
min-height: var(--ex-arrow-min);
padding: var(--ex-arrow-pad);
display: inline-grid;
place-items: center;
border-radius: 999px;
}
/* SVG uses currentColor and scales with font-size */
.ex-slider-prev svg,
.ex-slider-next svg{ width:1em; height:1em; display:block; }
.ex-slider-prev,
.ex-slider-next{ color:#fff !important; }
.ex-slider-prev svg path,
.ex-slider-next svg path{
fill:none !important;
stroke:currentColor !important;
stroke-width:2.5 !important;
stroke-linecap:round !important;
stroke-linejoin:round !important;
}
/* ===========================
Minibite
=========================== */
.ex-minibite{
position: relative;
overflow: hidden;
width: 100%;
border-radius: .5rem;
background: #000;
cursor: pointer;
/* each instance sets --ar like "16/9" via JS; default fallback */
aspect-ratio: var(--ar, 16/9);
/* lock a sane base type for the widget only */
font-size: 14px;
line-height: 1.35;
}
/* Poster sits behind overlays; fades when video plays */
.ex-minibite-poster{
position:absolute; inset:0;
width:100%; height:100%;
object-fit:cover;
display:block;
transition:opacity .18s ease;
z-index:1;
}
.ex-minibite.is-playing .ex-minibite-poster{ opacity:0; }
/* Video fills the ratio box */
.ex-minibite video.ex-minibite-video{
position:absolute; inset:0;
width:100%; height:100%;
object-fit:cover;
display:block;
}
/* Center play badge */
.ex-minibite-play{
opacity:0;
position:absolute; left:50%; top:50%;
transform:translate(-50%, -50%) scale(.92);
width:56px; height:56px; border-radius:999px;
background:rgba(0,0,0,.55); color:#fff;
display:flex; align-items:center; justify-content:center;
font-size:28px; line-height:1;
box-shadow:0 2px 12px rgba(0,0,0,.35);
pointer-events:none;
z-index:3;
}
.ex-minibite-play svg{ width:26px; height:26px; display:block; fill:currentColor; }
.ex-minibite:hover .ex-minibite-play{ opacity:1; transform:translate(-50%, -50%) scale(1); }
/* Caption bar */
.ex-minibite-caption{
position:absolute; left:0; right:0; bottom:0;
background:rgba(255,255,255,.7);
padding:6px 10px;
line-height:1.2;
z-index:2;
}
/* One-line TITLE with ellipsis (all sizes) */
.ex-minibite .ex-minibite-title{
color:#c40000;
text-transform:uppercase;
font-weight:700;
display:block; /* needed for ellipsis */
white-space:nowrap; /* single line */
overflow:hidden;
text-overflow:ellipsis;
/* scale relative to widget base (14px) */
font-size:1.00em;
letter-spacing:.01em;
}
/* One-line STARS with ellipsis (all sizes) */
.ex-minibite .ex-minibite-stars{
margin-top:.35em;
display:block;
white-space:nowrap; /* single line */
overflow:hidden;
text-overflow:ellipsis;
font-size:.90em;
color:#111;
}
.ex-minibite .ex-minibite-stars a{
color:inherit;
font-weight:700;
text-decoration:none;
}
.ex-minibite .ex-minibite-stars a:hover{ text-decoration:underline; }
/* --- Mobile tightening (<=520px): 8px text --- */
@media (max-width: 520px){
.ex-minibite .ex-minibite-title,
.ex-minibite .ex-minibite-stars{
font-size: 8.0px !important;
line-height: 1.15 !important;
}
}
/* ==========================================================
EX Player Base
========================================================== */
.ex-player{
position: relative;
width: 100%;
background: #000;
border-radius: .5rem;
overflow: hidden;
aspect-ratio: var(--ar, 16/9);
}
.ex-player .exp-video{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
background: #000;
}
.ex-player .exp-title{
position: absolute;
left: 10px;
top: 8px;
z-index: 3;
color: #fff;
font-weight: 600;
font-size: .95rem;
text-shadow: 0 1px 2px rgba(0,0,0,.6);
pointer-events: none;
}
.ex-player .exp-center-play{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
width: 84px;
height: 84px;
border-radius: 999px;
background: rgba(0,0,0,.55);
color:#fff;
display:flex;
align-items:center;
justify-content:center;
border:1px solid rgba(255,255,255,.35);
box-shadow: 0 6px 26px rgba(0,0,0,.4);
opacity: 0;
z-index: 20;
pointer-events: auto; /* allow clicking the overlay */
transition: opacity .18s ease, transform .18s ease;
}
.ex-player .exp-center-play svg{
width: 36px;
height: 36px;
display:block;
fill: currentColor;
}
.ex-player.is-paused .exp-center-play{
opacity:1;
pointer-events:auto;
}
.ex-player.is-paused .exp-center-play:hover{
transform: translate(-50%,-50%) scale(1.04);
}
/* ==========================================================
EX Player Chrome (desktop/tablet default)
========================================================== */
.ex-player .exp-chrome{
position:absolute;
left:0;
right:0;
bottom:0;
z-index: 4;
padding: 8px 10px 10px;
color:#fff;
background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.35) 35%, rgba(0,0,0,.65) 100%);
transition: opacity .18s ease;
}
.ex-player.is-controls-hidden .exp-chrome{
opacity: 0;
pointer-events: none;
}
.ex-player:hover .exp-chrome{
opacity: 1;
pointer-events: auto;
}
.ex-player .exp-progress{
position:relative;
height: 6px;
margin: 0 8px 6px;
cursor: pointer;
}
.ex-player .exp-progress-track{
position:absolute;
inset:0;
background: rgba(255,255,255,.25);
border-radius: 4px;
}
.ex-player .exp-progress-buffered{
position:absolute;
left:0;
top:0;
bottom:0;
width:0;
background: rgba(255,255,255,.45);
border-radius: 4px;
}
.ex-player .exp-progress-played{
position:absolute;
left:0;
top:0;
bottom:0;
width:0;
background: #c40000;
border-radius: 4px;
}
.ex-player .exp-row{
display:flex;
align-items:center;
justify-content:space-between;
gap: 8px;
}
.ex-player .exp-left,
.ex-player .exp-right{
display:flex;
align-items:center;
gap: 6px;
}
.ex-player .exp-btn{
display:inline-flex;
align-items:center;
justify-content:center;
width: 36px;
height: 28px;
border: 0;
background: transparent;
color: #ddd;
border-radius: 6px;
cursor: pointer;
}
.ex-player .exp-btn:hover{
color:#fff;
background: rgba(255,255,255,.07);
}
.ex-player .exp-btn:active{ transform: translateY(0.5px); }
.ex-player .exp-btn:focus-visible{ outline: 2px solid #fff; outline-offset: 2px; }
.ex-player .exp-btn svg{
width: 20px;
height: 20px;
display:block;
fill: currentColor;
}
.ex-player .exp-time{
font-variant-numeric: tabular-nums;
font-size: 0.95rem;
opacity: .95;
white-space: nowrap;
}
.ex-player .exp-vol{
display:flex;
align-items:center;
gap: 6px;
}
.ex-player .exp-vol-slider{
-webkit-appearance:none;
appearance:none;
width: 100px;
height: 4px;
background: rgba(255,255,255,.3);
border-radius: 2px;
}
.ex-player .exp-vol-slider::-webkit-slider-thumb{
-webkit-appearance:none;
appearance:none;
width: 12px;
height: 12px;
border-radius: 50%;
background: #fff;
border: 0;
}
.ex-player .exp-vol-slider::-moz-range-thumb{
width: 12px;
height: 12px;
border-radius: 50%;
background: #fff;
border: 0;
}
.ex-player .exp-btn.exp-cc.is-on{
color:#fff;
background: rgba(196,0,0,.18);
}
/* Legacy in-player dropdown (harmless if unused) */
.ex-player .exp-menu{
position:absolute;
right: 10px;
bottom: 56px;
min-width: 220px;
display:none;
z-index: 5;
background: rgba(20,20,20,.96);
color:#fff;
border: 1px solid rgba(255,255,255,.12);
border-radius: 9px;
padding: 6px;
box-shadow: 0 10px 30px rgba(0,0,0,.45);
}
.ex-player .exp-menu.open{ display:block; }
.ex-player .exp-menu h4{
margin: .25rem .35rem .4rem;
font-size: 12px;
text-transform: uppercase;
opacity: .8;
letter-spacing: .02em;
}
.ex-player .exp-menu .exp-menu-items{ display:block; }
.ex-player .exp-menu .exp-menu-item{
display:flex;
align-items:center;
justify-content:space-between;
padding: .4rem .55rem;
border-radius: 6px;
cursor:pointer;
}
.ex-player .exp-menu .exp-menu-item:hover{ background: rgba(255,255,255,.08); }
/* Floating menus */
.exp-menu-floating{
position:fixed;
display:none;
z-index:99999;
background:#111;
color:#fff;
border-radius:10px;
box-shadow:0 12px 26px rgba(0,0,0,.4);
min-width:220px;
max-width:280px;
max-height:min(60vh,340px);
overflow:auto;
padding:8px 0;
font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
.exp-menu-floating.open{ display:block; }
.exp-menu-floating .exp-menu-section h4{
margin:0;
padding:10px 14px 6px;
font-size:.9rem;
font-weight:600;
color:#cfcfcf;
}
.exp-menu-floating .exp-menu-items{ padding:4px 0; }
.exp-menu-floating .exp-menu-item{
display:flex;
justify-content:space-between;
gap:16px;
padding:10px 14px;
font-size:.95rem;
line-height:1.25;
cursor:pointer;
}
.exp-menu-floating .exp-menu-item:hover{ background:rgba(255,255,255,.08); }
.exp-menu-floating .exp-menu-item.is-active{ background:rgba(255,255,255,.14); }
/* Theater mode */
.ex-player.is-theater{ aspect-ratio: auto; height: 65vh; }
/* Fullscreen tweaks */
.ex-player:fullscreen,
.ex-player:-webkit-full-screen{ border-radius: 0; }
/* Mobile: prevent tapping video from invoking iOS native overlay controls */
@media (max-width: 991.98px){
.ex-player .exp-video{ pointer-events: none; }
}
/* Slight mobile tightening */
@media (max-width: 575.98px){
.ex-player .exp-vol-slider{ width: 70px; }
.ex-player .exp-btn{ width: 32px; height: 26px; }
.ex-player .exp-title{ font-size: .85rem; }
}
/* ==========================================================
EX Player Mobile "YouTube-style" chrome (FINAL)
Top: main controls
Bottom: time + fullscreen + progress bar
NOTE: These rules MUST be last.
========================================================== */
@media (max-width: 640px){
/* Make chrome fill player so we can anchor items precisely */
.ex-player .exp-chrome{
position:absolute !important;
inset:0 !important;
padding:0 !important;
background: none !important;
z-index: 6 !important;
pointer-events:none;
}
.ex-player .exp-chrome *{ pointer-events:auto; }
/* Top bar */
.ex-player .exp-row{
position:absolute !important;
left:0 !important;
right:0 !important;
top:10px !important;
padding:0 10px !important;
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
gap:10px !important;
background: linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,0)) !important;
}
.ex-player .exp-left,
.ex-player .exp-right{
display:flex !important;
align-items:center !important;
gap:10px !important;
min-width:0 !important;
}
/* Bottom progress bar */
.ex-player .exp-progress{
position:absolute !important;
left:12px !important;
right:12px !important;
bottom:10px !important;
margin:0 !important;
}
/* Bottom time (left) */
.ex-player .exp-time{
position:absolute !important;
left:12px !important;
bottom:30px !important;
margin:0 !important;
line-height:1 !important;
font-size:16px !important;
white-space:nowrap !important;
text-shadow:0 2px 10px rgba(0,0,0,.6) !important;
}
/* Bottom fullscreen (right) aligned with time */
.ex-player .exp-btn.exp-fs{
position:absolute !important;
right:10px !important;
bottom:22px !important;
margin:0 !important;
}
/* Mobile cleanup */
.ex-player .exp-vol-slider{ display:none !important; }
/* Optional: hide rarely used to reduce clutter/cutoff */
.ex-player .exp-btn.exp-theater,
.ex-player .exp-btn.exp-pip{
display:none !important;
}
}
/* Mobile landscape: keep FS button bottom-right */
@media (max-width: 640px) and (orientation: landscape){
.ex-player .exp-btn.exp-fs{
position: absolute !important;
right: 10px !important;
left: auto !important;
bottom: 26px !important; /* adjust if you want it closer to the bar */
top: auto !important;
z-index: 10 !important;
}
}
@media (max-width: 640px){
.ex-player .exp-chrome{ pointer-events: none; }
.ex-player .exp-chrome *{ pointer-events: auto; }
.ex-player .exp-btn.exp-fs{ pointer-events: auto; }
}
.ex-rating-badge{
/* responsive half size */
--size: clamp(24px, 5.5vw, 30px);
width: var(--size);
height: var(--size);
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: clamp(11px, 2.6vw, 13px);
line-height: 1;
color: #111;
/* dynamic hue mapping (unchanged) */
--h: calc(60 - (60 * var(--rt)));
background: radial-gradient(circle at 30% 25%,
hsl(var(--h) 100% 62%) 0%,
hsl(var(--h) 100% 48%) 55%,
hsl(var(--h) 100% 38%) 100%
);
box-shadow:
0 4px 10px rgba(0,0,0,.22),
inset 0 1px 0 rgba(255,255,255,.35);
border: 1px solid rgba(255,255,255,.25);
text-shadow: 0 1px 0 rgba(255,255,255,.25);
}
/* Scrub thumbnail preview */
.ex-player .exp-thumb-preview{
position: absolute;
left: 0;
bottom: 44px; /* above progress bar */
transform: translateX(-50%);
width: 160px; /* displayed size (can be bigger than 120 thumbs) */
aspect-ratio: 16/9;
background: #000;
background-size: cover;
background-position: center;
border-radius: 10px;
box-shadow: 0 10px 26px rgba(0,0,0,.45);
border: 1px solid rgba(255,255,255,.15);
opacity: 0;
pointer-events: none;
transition: opacity .12s ease;
z-index: 30;
}
.ex-player .exp-thumb-preview.is-on{ opacity: 1; }
.ex-player .exp-thumb-preview .exp-thumb-time{
position: absolute;
left: 8px;
bottom: 8px;
padding: 2px 8px;
font-size: 13px;
line-height: 1.4;
border-radius: 999px;
background: rgba(0,0,0,.55);
color: #fff;
text-shadow: 0 1px 2px rgba(0,0,0,.6);
font-variant-numeric: tabular-nums;
}
/* The moving background (base) */
.ex-parallax{
background-repeat: no-repeat;
background-position: 50% 0%;
background-size: cover;
/* Optional: if used as a banner section */
/* min-height: 320px; */
}
/* Nice-to-have: if scroll-linked animations are supported, this gives you
a CSS-only sweep; JS below still runs everywhere. */
@supports (animation-timeline: view()) {
.ex-parallax{
animation: exParallaxY linear both;
animation-timeline: view();
/* Tune the range: start when the element enters, finish when it leaves */
animation-range: entry 0% exit 100%;
}
@keyframes exParallaxY{
0% { background-position: 50% 0%; }
100% { background-position: 50% 100%; }
}
}
/* === Sidebar theme overrides (place at end of CSS) === */
/* Sidebar background */
.ex-sidebar{
background: #f5f5f5; /* light gray */
}
/* Make sure drawer version on mobile uses same bg */
@media (max-width: 991.98px){
.ex-sidebar{ background: #f5f5f5; }
}
/* Give list items rounded corners so LI hover bg looks clean */
.ex-sidebar .ex-nav > li,
.ex-sidebar .ex-sub li{
border-radius: 6px;
list-style:none;
}
/* Base link color (dark gray) */
.ex-sidebar .ex-nav a.ex-nav-link,
.ex-sidebar .ex-sub a{
color: #444;
background: transparent;
}
/* Hover: LI background black + text white */
.ex-sidebar .ex-nav > li:hover,
.ex-sidebar .ex-sub li:hover{
background: #000; /* black block behind link + chevron */
}
.ex-sidebar .ex-nav > li:hover > a.ex-nav-link,
.ex-sidebar .ex-sub li:hover > a{
color: #fff; /* white text on hover */
background: transparent; /* override any older :hover bg on */
}
/* Make submenu chevron readable on hover */
.ex-sidebar li.has-sub:hover > .ex-sub-toggle{
color: #fff;
}
/* Active link: brand red */
.ex-sidebar .ex-nav a.is-active,
.ex-sidebar .ex-sub a.is-active{
color: #d31f23; /* active link text */
background: transparent; /* no gray chip behind it */
font-weight: 700;
}
/* Optional: keyboard focus for accessibility */
.ex-sidebar .ex-nav a.ex-nav-link:focus-visible,
.ex-sidebar .ex-sub a:focus-visible{
outline: 2px solid #000;
outline-offset: 2px;
background: #000;
color: #fff;
}
/* Remove bullets + stray markers in the sidebar (incl. submenus) */
.ex-sidebar .ex-nav,
.ex-sidebar .ex-nav ul,
.ex-sidebar .ex-nav li{
list-style: none;
}
.ex-sidebar .ex-nav li::marker{ content: none; } /* Safari/Firefox */
/* Keep a clean indent for submenus */
.ex-sidebar .ex-sub{
padding-left: 12px; /* your indent */
margin-left: 0;
border-left: 2px solid #eee; /* your guide line */
}
.ex-sidebar .ex-sub li{
margin-left: 0;
padding-left: 0;
}
/* top-level: only the link turns black on hover */
.ex-sidebar .ex-nav > li:hover { background: transparent; }
.ex-sidebar .ex-nav > li:hover > a.ex-nav-link{
background:#000;
color:#fff;
}
/* submenu: default stays light; only the hovered item turns black */
.ex-sidebar .ex-sub li{ background: transparent; }
.ex-sidebar .ex-sub li:hover > a{
background:#000;
color:#fff;
}
/* keep chevron readable when hovering the top-level link */
.ex-sidebar li.has-sub:hover > a.ex-nav-link + .ex-sub-toggle{ color:#fff; }
.ex-sidebar li.has-sub.is-open > a.ex-nav-link > .ex-sub-toggle{
transform: translateY(-50%) rotate(90deg);
}
/* ===== EX Grid ===== */
.ex-grid{
display: grid;
grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr));
gap: var(--gap, 16px);
align-items: start;
width: 100%;
}
.ex-grid > .ex-grid-item{ min-width: 0; }
/* Make typical media responsive inside items */
.ex-grid-item img,
.ex-grid-item video{
display:block;
width:100%;
height:auto; /* preserves aspect ratio */
}
.ex-grid-item .ex-minibite{ width:100%; } /* your minibite already uses aspect-ratio */
.ex-grid-item--wide-span3{
grid-column: span 3; /* 75% of a 4-col grid */
}
.ex-grid-item--wide-span2{
grid-column: span 2; /* 50% of a 4-col grid */
}
/* Fluid iframe helper (use this wrapper for embeds) */
/* Make the square and center anything inside it */
.ex-fluid{
position: relative;
width: 100%;
aspect-ratio: var(--ar, 1/1);
display: grid; /* enables centering for non-absolute kids */
place-items: center; /* centers regular flow content */
overflow: hidden; /* trims oversize content (like scaled iframes) */
}
/* Keep our iframe-scaler behavior intact */
.ex-fluid > iframe{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%); /* your scaler also adds scale(...) */
transform-origin: 50% 50%;
border: 0;
}
/* Center AJAX-loaded wrappers and images on the same grid cell */
.ex-fluid > div,
.ex-fluid > a,
.ex-fluid > img,
.ex-fluid > video{
grid-area: 1 / 1; /* stack them in the center cell */
}
/* Make images fit the square without stretching */
.ex-fluid img{
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain; /* preserves aspect ratio inside the square */
display: block; /* removes baseline gaps */
}
/* Remove accidental margins from injected wrappers */
.ex-fluid > div{ margin: 0; }
/* === Parallax FIXED background masked by the section ===
Markup:
*/
.ex-parallax-window{
position: relative;
overflow: hidden;
/* Tunables (per-site defaults) */
--par-min: 180px; /* absolute floor on tiny phones */
--par-ideal: 48vh; /* target height as a slice of viewport */
--par-max: 560px; /* never exceed this on desktop */
min-height: clamp(var(--par-min), var(--par-ideal), var(--par-max));
max-height: 80svh; /* guardrail: don't exceed most of the screen */
}
/* Tablet: shorten a bit */
@media (max-width: 991.98px){
.ex-parallax-window{
--par-ideal: 40vh;
--par-max: 460px;
}
}
/* Phones: shorten more */
@media (max-width: 575.98px){
.ex-parallax-window{
--par-min: 150px;
--par-ideal: 32vh;
--par-max: 360px;
}
}
/* Clickable overlay (so the fixed layer can be pointer-events:none) */
.ex-parallax-window > .ex-parallax-link{
position: absolute;
inset: 0;
z-index: 2;
}
/* The background that is truly fixed to the viewport and clipped to the window */
/* Parallax fixed layer cap image to viewport width */
/* Parallax fixed layer JS will clamp size/position */
.ex-parallax-fixed-layer{
position: fixed;
inset: 0;
pointer-events: none;
background-repeat: no-repeat;
background-position: center top; /* JS will override X/Y when needed */
will-change: clip-path, background-position, background-size;
/* intentionally NO background-size here */
}
/* Optional: per-banner tuning via data attributes (handled in JS)
- data-bg-position="50% 20%" overrides background-position
- data-bg-size="cover|contain|auto 120%" overrides background-size
- data-bg-color sets a fallback color while the image loads
*/
/* === Portrait overlay on landscape banner for Model Bio========================== */
.ex-feature-card{
position: relative;
width: 100%;
aspect-ratio: var(--ratio, 21/6); /* keep cells consistent; adjust per use */
border-radius: 10px;
overflow: hidden;
background: #000;
}
/* Banner fills the box */
.ex-feature-card .exfc-banner{
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
/* Subtle bottom gradient so text always reads */
.ex-feature-card::after{
content: "";
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.55) 100%);
pointer-events: none;
}
/* Overlay row (thumb + text) */
.ex-feature-card .exfc-overlay{
position: absolute;
left: clamp(12px, 2vw, 28px);
bottom: clamp(12px, 2vw, 28px);
display: flex;
align-items: center;
gap: clamp(12px, 1.6vw, 20px);
}
/* Portrait thumb (3:4 by default) */
.ex-feature-card .exfc-thumb{
width: clamp(68px, 14vw, 120px);
aspect-ratio: 3/4;
object-fit: cover;
border-radius: 10px;
border: 2px solid rgba(255,255,255,.9);
box-shadow: 0 6px 18px rgba(0,0,0,.45);
background: #111;
}
/* Title block */
.ex-feature-card .exfc-meta{
min-width: 0; /* allow text truncation */
}
.ex-feature-card .exfc-title{
margin: 0;
color: #fff;
font-weight: 700;
font-size: clamp(14px, 2vw, 22px);
line-height: 1.1;
text-shadow: 0 2px 6px rgba(0,0,0,.6);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: min(60ch, 70vw); /* keeps long names tidy inside grids */
}
/* Optional subline style
.ex-feature-card .exfc-sub{
margin-top: 6px;
color:#eaeaea;
font-size: clamp(12px, 1.5vw, 16px);
opacity: .9;
}
*/
/* Make whole card clickable */
.ex-feature-card .exfc-link{
position: absolute; inset: 0;
text-indent: -9999px;
}
/* Hover polish (desktop) */
@media (hover:hover){
.ex-feature-card:hover .exfc-thumb{
transform: translateY(-1px);
box-shadow: 0 10px 24px rgba(0,0,0,.5);
}
}
/* Tight phones: shrink thumb a touch, keep layout intact */
@media (max-width: 480px){
.ex-feature-card .exfc-thumb{ width: clamp(58px, 18vw, 80px); border-radius: 8px; }
.ex-feature-card .exfc-title{ font-size: clamp(12px, 4.4vw, 18px); }
}
/* === Model Listing (reuses Minibite overlay styles) === */
.model-listing{
position: relative;
overflow: hidden;
width: 100%;
border-radius: .5rem;
background: #000;
aspect-ratio: var(--ar, 3/4); /* default portrait; can be overridden via JS */
font-size: 14px; /* match minibite base type */
line-height: 1.35;
cursor: pointer;
}
.model-listing img.ml-thumb{
position:absolute; inset:0;
width:100%; height:100%;
object-fit:cover; display:block;
}
/* we reuse .ex-minibite-caption styles (already global),
so just ensure the title styling also applies under .model-listing */
.model-listing .ex-minibite-title{
color:#c40000;
text-transform:uppercase;
font-weight:700;
display:block; /* ellipsis */
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
font-size:1.00em; /* same as minibite */
letter-spacing:.01em;
}
/* Smooth color change */
.model-listing .ex-minibite-title{
transition: color .15s ease;
}
/* Hover to black (and keyboard focus) */
@media (hover:hover){
.model-listing:hover .ex-minibite-title{ color:#000; }
}
.model-listing:focus-within .ex-minibite-title{ color:#000; }
/* tighten text on very small phones mirror the minibite rule */
@media (max-width: 520px){
.model-listing .ex-minibite-title{
font-size: 8px !important;
line-height: 1.15 !important;
}
}
/* full-card link hit area */
.model-listing .ml-link{
position:absolute; inset:0;
z-index:4;
text-indent:-9999px;
}
/* ==========================================================================
EX Pagination + EX Alpha (consolidated + fixed)
- Pagination uses: .ex-pagination .ex-pg-group .ex-pg-controls .ex-pg-btn/.ex-pg-icon/.ex-pg-ellip
- Desktop alpha uses: .ex-alpha .ex-alpha-group .ex-alpha-btn
- Mobile windowed alpha uses pagination UI: .ex-alpha-mobile with .ex-pg-*
========================================================================== */
:root{
--pg-size: 44px;
--pg-gap: 10px;
--pg-radius: 14px;
--pg-border: #e0e0e0;
--pg-bg: #fff;
--pg-fg: #111;
--pg-active-bg: #d31f23;
--pg-active-fg: #fff;
--pg-hover-bg: #f4f4f4;
}
/* ===== Pagination wrapper ===== */
.ex-pagination{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:12px;
padding: 8px 0 16px;
}
/* Row: buttons */
.ex-pagination .ex-pg-group{
display:flex;
flex-wrap:wrap;
justify-content:center;
align-items:center;
gap: var(--pg-gap);
}
/* Row: controls (page size / sort) */
.ex-pagination .ex-pg-controls{
display:flex;
flex-wrap:wrap;
align-items:center;
justify-content:center;
gap: 16px;
}
/* Base button styles (shared by pagination + mobile alpha) */
.ex-pagination .ex-pg-btn,
.ex-pagination .ex-pg-ellip,
.ex-alpha-mobile .ex-pg-btn,
.ex-alpha-mobile .ex-pg-ellip{
min-width: var(--pg-size);
height: var(--pg-size);
padding: 0 14px;
border-radius: var(--pg-radius);
border: 1px solid var(--pg-border);
background: var(--pg-bg);
color: var(--pg-fg);
font-weight: 600;
line-height: 1;
display:inline-flex;
align-items:center;
justify-content:center;
cursor:pointer;
user-select:none;
}
/* Hover */
.ex-pagination .ex-pg-btn:hover,
.ex-pagination .ex-pg-ellip:hover,
.ex-alpha-mobile .ex-pg-btn:hover,
.ex-alpha-mobile .ex-pg-ellip:hover{
background: var(--pg-hover-bg);
}
/* Current/active page */
.ex-pagination .ex-pg-btn[aria-current="page"],
.ex-alpha-mobile .ex-pg-btn[aria-current="page"]{
background: var(--pg-active-bg);
color: var(--pg-active-fg);
border-color: var(--pg-active-bg);
}
/* Disabled */
.ex-pagination .ex-pg-btn:disabled,
.ex-alpha-mobile .ex-pg-btn:disabled{
opacity: .45;
cursor: default;
pointer-events: none;
}
/* IMPORTANT: truly remove hidden items so they do NOT reserve flex space
(this is what fixes the big gap after 1 when something is hidden) */
.ex-pagination .ex-pg-btn[aria-hidden="true"],
.ex-pagination .ex-pg-ellip[aria-hidden="true"],
.ex-alpha-mobile .ex-pg-btn[aria-hidden="true"],
.ex-alpha-mobile .ex-pg-ellip[aria-hidden="true"],
.ex-pagination .ex-pg-btn.is-hidden,
.ex-pagination .ex-pg-ellip.is-hidden,
.ex-alpha-mobile .ex-pg-btn.is-hidden,
.ex-alpha-mobile .ex-pg-ellip.is-hidden,
.ex-pagination .ex-pg-btn[hidden],
.ex-pagination .ex-pg-ellip[hidden],
.ex-alpha-mobile .ex-pg-btn[hidden],
.ex-alpha-mobile .ex-pg-ellip[hidden]{
display:none !important;
}
/* Icon buttons (chevrons) */
.ex-pagination .ex-pg-icon,
.ex-alpha-mobile .ex-pg-icon{
width: var(--pg-size);
min-width: var(--pg-size);
padding: 0;
line-height: 0;
display:inline-flex;
align-items:center;
justify-content:center;
}
/* Make SVG chevrons always visible even with global svg rules */
.ex-pagination .ex-pg-icon svg,
.ex-alpha-mobile .ex-pg-icon svg{
width:18px !important;
height:18px !important;
display:block !important;
}
.ex-pagination .ex-pg-icon svg path,
.ex-alpha-mobile .ex-pg-icon svg path{
fill:none !important;
stroke: currentColor !important;
stroke-width: 2.5 !important;
stroke-linecap: round !important;
stroke-linejoin: round !important;
}
/* If an icon button becomes current, make stroke white */
.ex-pagination .ex-pg-btn[aria-current="page"].ex-pg-icon,
.ex-alpha-mobile .ex-pg-btn[aria-current="page"].ex-pg-icon{
color: var(--pg-active-fg);
}
/* Select wrappers */
.ex-pagination .ex-pg-select{
display:inline-flex;
align-items:center;
gap: 8px;
padding: 6px 10px;
border: 1px solid var(--pg-border);
border-radius: var(--pg-radius);
background: #fff;
color: #111;
white-space: nowrap;
}
.ex-pagination .ex-pg-select select{
height: 40px;
padding: 0 10px;
border: 0;
background: transparent;
border-radius: 10px;
outline: none;
font: inherit;
color: inherit;
}
/* ===== Desktop alpha (full A..Z # ALL) ===== */
.ex-alpha{
display:flex; /* desktop ON by default */
align-items:center;
justify-content:center;
padding: 8px 0 16px;
}
.ex-alpha .ex-alpha-group{
display:flex;
flex-wrap:wrap;
justify-content:center;
align-items:center;
gap: var(--pg-gap);
width: 100%;
max-width: 1600px;
}
.ex-alpha .ex-alpha-btn{
min-width: var(--pg-size);
height: var(--pg-size);
padding: 0 14px;
border-radius: var(--pg-radius);
border: 1px solid var(--pg-border);
background: var(--pg-bg);
color: var(--pg-fg);
font-weight: 600;
line-height: 1;
display:inline-flex;
align-items:center;
justify-content:center;
cursor:pointer;
user-select:none;
}
.ex-alpha .ex-alpha-btn:hover{ background: var(--pg-hover-bg); }
/* Use the same aria-current convention as pagination */
.ex-alpha .ex-alpha-btn[aria-current="page"]{
background: var(--pg-active-bg);
color: var(--pg-active-fg);
border-color: var(--pg-active-bg);
}
/* ===== Mobile windowed alpha ===== */
.ex-alpha-mobile{
display:none; /* mobile OFF by default */
align-items:center;
justify-content:center;
padding: 8px 0 16px;
}
.ex-alpha-mobile .ex-pg-group{
display:flex;
flex-wrap:wrap;
justify-content:center;
align-items:center;
gap: var(--pg-gap);
}
/* Switch: desktop shows full alpha, mobile shows windowed alpha */
@media (max-width: 991.98px){
.ex-alpha{ display:none !important; }
.ex-alpha-mobile{ display:flex !important; }
}
/* Tight phones */
@media (max-width: 520px){
:root{
--pg-size: 34px;
--pg-radius: 10px;
--pg-gap: 8px;
}
.ex-pagination .ex-pg-controls{ gap: 12px; }
.ex-pagination .ex-pg-icon svg,
.ex-alpha-mobile .ex-pg-icon svg{
width:16px !important;
height:16px !important;
}
}
/* ===========================
EX Popup (JS-compatible)
=========================== */
/* Backdrop (hidden until .is-open) */
.ex-popup-overlay,
.ex-pop__overlay {
position: fixed;
inset: 0;
display: none; /* shown when .is-open is added */
align-items: center;
justify-content: center;
background: rgba(0,0,0,.5);
z-index: 100000;
/* allow a subtle blur if supported */
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
}
/* Open state */
.ex-popup-overlay.is-open,
.ex-pop__overlay.is-open {
display: flex;
}
/* Panel / card */
.ex-popup,
.ex-pop,
.ex-pop__card { /* alias so legacy .ex-pop works */
--ex-pop-bg: #f5f5f7; /* light gray */
--ex-pop-fg: #111; /* near-black text */
--ex-pop-radius: 14px;
--ex-pop-shadow: 0 18px 40px rgba(0,0,0,.35);
background: var(--ex-pop-bg);
color: var(--ex-pop-fg);
width: min(92vw, 560px);
max-height: 80vh;
border-radius: var(--ex-pop-radius);
box-shadow: var(--ex-pop-shadow);
overflow: hidden;
/* entrance feel */
transform: translateY(8px) scale(.985);
opacity: 0;
transition: opacity .2s ease, transform .2s ease;
/* center all text by default */
text-align: center;
}
/* Animate the panel in when overlay is open */
.ex-popup-overlay.is-open .ex-popup,
.ex-pop__overlay.is-open .ex-pop,
.ex-pop__overlay.is-open .ex-pop__card {
transform: none;
opacity: 1;
}
/* Header */
.ex-popup-header,
.ex-pop__head {
position: relative;
padding: 16px 48px; /* room for the close button */
font-weight: 700;
font-size: clamp(15px, 2.2vw, 18px);
letter-spacing: .2px;
border-bottom: 1px solid rgba(0,0,0,.06);
}
/* Title text */
.ex-popup-title,
.ex-pop__title {
margin: 0;
}
/* Close button (X) */
.ex-popup-close,
.ex-pop__close {
position: absolute;
top: 6px;
right: 6px;
width: 40px;
height: 40px;
border: 0;
background: transparent;
color: inherit;
display: grid;
place-items: center;
cursor: pointer;
border-radius: 10px;
transition: background-color .15s ease, color .15s ease;
}
.ex-popup-close:hover,
.ex-popup-close:focus-visible,
.ex-pop__close:hover,
.ex-pop__close:focus-visible {
background: rgba(0,0,0,.06);
outline: none;
}
.ex-popup-close svg,
.ex-pop__close svg {
width: 22px;
height: 22px;
}
/* Body/content */
.ex-popup-body,
.ex-pop__body {
padding: 18px 20px 20px;
line-height: 1.5;
font-size: clamp(14px, 2vw, 16px);
max-height: 70vh; /* long content scrolls inside */
overflow: auto;
-webkit-overflow-scrolling: touch;
}
/* Links inside body */
.ex-popup-body a,
.ex-pop__body a {
color: inherit;
text-decoration: underline;
}
/* Small screens */
@media (max-width: 420px) {
.ex-popup,
.ex-pop,
.ex-pop__card { border-radius: 12px; width: min(96vw, 560px); }
.ex-popup-header,
.ex-pop__head { padding-left: 44px; padding-right: 44px; }
.ex-popup-body,
.ex-pop__body { padding-left: 16px; padding-right: 16px; }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.ex-popup,
.ex-pop,
.ex-pop__card { transition: none; transform: none; }
}
/* Center the popup title perfectly */
.ex-popup-header,
.ex-pop__head {
display: flex;
align-items: center;
justify-content: center; /* centers the title */
text-align: center; /* keeps multiline centered */
}
.ex-popup-title,
.ex-pop__title {
margin: 0;
line-height: 1.2;
}
/* ===========================
EX Scene Meta Block
=========================== */
.ex-scene-meta{
width:100%;
margin: 12px 0 20px;
font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
color:#111;
}
/* Title */
.ex-scene-title{
font-size: clamp(16px, 2.2vw, 22px);
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
margin: 0 0 8px;
}
/* Horizontal rule */
.ex-scene-rule{
border: 0;
border-top: 3px solid #222;
margin: 8px 0;
}
/* Metadata row */
.ex-scene-info{
display:flex;
flex-wrap:wrap;
align-items:center;
gap: 10px 14px;
font-size: 14px;
line-height: 1.35;
}
/* Rating */
.ex-scene-rating{
display:flex;
align-items:center;
gap:6px;
white-space:nowrap;
}
.ex-scene-rating .stars{
color:#ccc;
letter-spacing:1px;
}
.ex-scene-rating .score{
font-weight:600;
}
/* Labels */
.ex-scene-label{
font-weight:700;
color:#111;
}
/* Links */
.ex-scene-info a,
.ex-scene-desc a{
color: var(--accent, #d31f23);
text-decoration: none;
font-weight:600;
}
.ex-scene-info a:hover,
.ex-scene-desc a:hover{
text-decoration: underline;
}
/* Description */
.ex-scene-desc{
margin-top: 10px;
font-size: 14px;
line-height: 1.5;
}
.ex-scene-desc .ex-scene-label{
margin-right:4px;
}
/* Mobile tightening */
@media (max-width: 575.98px){
.ex-scene-info{
font-size:13px;
gap: 8px 10px;
}
.ex-scene-desc{
font-size:13px;
}
}
/* ==========================================================================
EX MA 2026 Dark Theme (drop-in override) + Theme Toggle
- Place at END of style.css so it wins
- Theme applied by:
- Brand red preserved via --accent
========================================================================== */
/* =========================
1) Theme tokens
========================= */
:root{
--accent: #d31f23;
/* Light defaults */
--ex-bg: #ffffff;
--ex-surface: #ffffff;
--ex-surface-2: #f5f5f5;
--ex-text: #111111;
--ex-text-2: #333333;
--ex-border: #e0e0e0;
--ex-muted: #777777;
--ex-shadow: 0 12px 30px rgba(0,0,0,.10);
--ex-link: var(--accent);
--ex-link-hover: #ff4b4f;
}
/* =========================
2) Dark overrides
========================= */
html[data-theme="dark"]{
--ex-bg: #0b0c0f;
--ex-surface: #111318;
--ex-surface-2: #0f1116;
--ex-text: #f2f2f2;
--ex-text-2: #cfcfcf;
--ex-border: rgba(255,255,255,.12);
--ex-muted: rgba(255,255,255,.60);
--ex-shadow: 0 12px 30px rgba(0,0,0,.45);
--ex-link: var(--accent);
--ex-link-hover: #ff4b4f;
}
/* =========================
3) Global surfaces/text
========================= */
html[data-theme="dark"] body,
html[data-theme="dark"] .ex-page{
background: var(--ex-bg) !important;
color: var(--ex-text) !important;
}
html[data-theme="dark"] .ex-module,
html[data-theme="dark"] .centerwrap{
background: transparent !important;
}
/* Header / footer / sidebar */
html[data-theme="dark"] .ex-header,
html[data-theme="dark"] .ex-footer{
background: var(--ex-surface) !important;
border-color: var(--ex-border) !important;
}
html[data-theme="dark"] .ex-sidebar{
background: var(--ex-surface-2) !important;
border-color: var(--ex-border) !important;
color: var(--ex-text) !important;
}
/* Prevent any horizontal bleed in mobile drawer */
@media (max-width: 991.98px){
.ex-sidebar{
overflow-x: hidden;
}
}
/* Module header */
html[data-theme="dark"] .ex-module-header{
border-color: var(--ex-border) !important;
}
html[data-theme="dark"] .ex-module-header h2{
color: var(--accent) !important;
}
/* Links */
html[data-theme="dark"] a{
color: var(--ex-link) !important;
}
html[data-theme="dark"] .ex-sidebar .ex-nav > li.ex-nav-highlight > a.ex-nav-link{
color: #fff !important;
}
html[data-theme="dark"] a:hover{
color: var(--ex-link-hover) !important;
}
/* Rules / dividers */
html[data-theme="dark"] hr,
html[data-theme="dark"] .ex-scene-rule{
border-color: var(--ex-border) !important;
}
/* Chips / pagination / alpha */
html[data-theme="dark"] .ex-view-all{
background: rgba(255,255,255,.06) !important;
border-color: rgba(255,255,255,.18) !important;
color: var(--accent) !important;
}
html[data-theme="dark"] .ex-pagination .ex-pg-btn,
html[data-theme="dark"] .ex-pagination .ex-pg-ellip,
html[data-theme="dark"] .ex-alpha .ex-alpha-btn,
html[data-theme="dark"] .ex-alpha-mobile .ex-pg-btn,
html[data-theme="dark"] .ex-alpha-mobile .ex-pg-ellip{
background: rgba(255,255,255,.06) !important;
border-color: rgba(255,255,255,.16) !important;
color: var(--ex-text) !important;
}
html[data-theme="dark"] .ex-pagination .ex-pg-btn:hover,
html[data-theme="dark"] .ex-alpha .ex-alpha-btn:hover,
html[data-theme="dark"] .ex-alpha-mobile .ex-pg-btn:hover{
background: rgba(255,255,255,.10) !important;
}
html[data-theme="dark"] .ex-pagination .ex-pg-btn[aria-current="page"],
html[data-theme="dark"] .ex-alpha .ex-alpha-btn[aria-current="true"],
html[data-theme="dark"] .ex-alpha-mobile .ex-pg-btn[aria-current="page"]{
background: var(--accent) !important;
border-color: var(--accent) !important;
color: #fff !important;
}
/* Inputs/selects */
html[data-theme="dark"] select,
html[data-theme="dark"] input,
html[data-theme="dark"] textarea{
background: rgba(255,255,255,.06) !important;
color: var(--ex-text) !important;
border-color: rgba(255,255,255,.18) !important;
}
/* =========================
4) Theme Toggle UI
========================= */
/* Toggle container */
.ex-theme-toggle{
width: 100%;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 12px;
margin: 8px 0 14px;
border-radius: 12px;
border: 1px solid var(--ex-border, #e0e0e0);
background: rgba(0,0,0,.02);
overflow: hidden;
}
html[data-theme="dark"] .ex-theme-toggle{
background: rgba(255,255,255,.04);
border-color: rgba(255,255,255,.12);
}
/* Label (supports both names safely) */
.ex-theme-toggle .label,
.ex-theme-toggle .ex-theme-label{
font-weight: 800;
text-transform: uppercase;
letter-spacing: .03em;
font-size: 12px;
opacity: .9;
flex: 1 1 auto;
min-width: 0;
}
/* Switch */
.ex-switch{
position: relative;
width: 50px;
height: 28px;
border-radius: 999px;
border: 1px solid var(--ex-border, #e0e0e0);
background: #e9e9e9;
cursor: pointer;
flex: 0 0 auto;
}
.ex-switch .knob{
position:absolute;
top: 2px;
left: 2px;
width: 24px;
height: 24px;
border-radius: 999px;
background: #fff;
box-shadow: 0 4px 10px rgba(0,0,0,.20);
transition: transform .18s ease;
}
html[data-theme="dark"] .ex-switch{
background: rgba(255,255,255,.10);
border-color: rgba(255,255,255,.18);
}
.ex-switch[aria-checked="true"]{
background: rgba(211,31,35,.35);
border-color: rgba(211,31,35,.60);
}
.ex-switch[aria-checked="true"] .knob{
transform: translateX(22px);
}
/* =========================
Mobile: stack label ABOVE switch
========================= */
@media (max-width: 575.98px){
.ex-theme-toggle{
flex-direction: column;
align-items: stretch;
gap: 10px;
}
.ex-theme-toggle .label,
.ex-theme-toggle .ex-theme-label{
flex: 0 0 auto;
text-align: left;
line-height: 1.1;
}
.ex-theme-toggle .ex-switch{
align-self: flex-start;
}
}
/* ==========================================================================
Mobile Density Adjustment EXTRA WIDE (reduce side margins further)
========================================================================== */
@media (max-width: 575.98px){
/* Main layout padding (effectively 75% reduction from desktop) */
.ex-layout{
padding-left: 4px;
padding-right: 4px;
}
/* Inner module wrapper */
.centerwrap{
padding-left: 2px;
padding-right: 2px;
width: calc(100% - 4px);
}
/* Header + footer */
.ex-header,
.ex-footer{
padding-left: 6px;
padding-right: 6px;
}
/* Module headers */
.ex-module-header{
padding-left: 2px;
padding-right: 2px;
}
}
/* ==========================================================================
Mobile alignment fixes (after widening tweaks)
- Fixes: "View all" vertical alignment in module headers
- Fixes: footer link baseline/askew alignment
========================================================================== */
/* 1) Module header: stop float-based layout on small screens and align cleanly */
@media (max-width: 575.98px){
.ex-module-header{
display:flex;
align-items:center; /* vertical alignment fix */
justify-content:space-between;
gap: 12px;
padding: 8px 4px; /* keep your existing feel */
}
.ex-module-header h2{
float: none !important;
margin: 0 !important;
line-height: 1.15; /* keeps the baseline tidy */
}
.ex-module-header .ex-view-all{
float: none !important;
align-self:center;
margin: 0 !important;
line-height: 1; /* prevents vertical drift */
}
}
/* 2) Footer: normalize link baselines + prevent staggered rows */
@media (max-width: 575.98px){
.ex-footer{
align-items:flex-start; /* your existing mobile stack */
}
.ex-footer .foot-left,
.ex-footer .foot-right{
align-items:center; /* baseline/bobble fix */
}
.ex-footer a{
display:inline-flex; /* makes mixed-size links align */
align-items:center;
line-height: 1.2;
margin: 0;
padding: 0;
}
}
/* ==========================================================================
EX Grid Collapse (container-level)
- Wrap .ex-grid inside .ex-grid-collapse
========================================================================== */
.ex-grid-collapse{
width: 100%;
}
/* Header row (single line) */
.ex-grid-collapse-head{
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 12px 12px;
border: 1px solid var(--ex-border, #e0e0e0);
border-radius: 12px;
background: rgba(0,0,0,.02);
color: inherit;
cursor: pointer;
text-align: left;
}
html[data-theme="dark"] .ex-grid-collapse-head{
background: rgba(255,255,255,.04);
border-color: rgba(255,255,255,.12);
}
/* Label */
.ex-grid-collapse-label{
font-weight: 800;
letter-spacing: .02em;
font-size: 13px;
line-height: 1.2;
text-transform: uppercase;
flex: 1 1 auto;
min-width: 0;
}
/* Chevron */
.ex-grid-collapse-chev{
flex: 0 0 auto;
width: 28px;
height: 28px;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--ex-border, #e0e0e0);
background: rgba(255,255,255,.7);
}
html[data-theme="dark"] .ex-grid-collapse-chev{
background: rgba(255,255,255,.08);
border-color: rgba(255,255,255,.16);
}
.ex-grid-collapse-chev::before{
content: "";
width: 8px;
height: 8px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg);
transition: transform .18s ease;
}
/* Body (animated via max-height set by JS) */
.ex-grid-collapse-body{
overflow: hidden;
max-height: 0;
transition: max-height .22s ease;
}
/* Inner spacing above the revealed grid */
.ex-grid-collapse-inner{
padding: 12px 0 0;
}
/* Open state chevron */
.ex-grid-collapse.is-open .ex-grid-collapse-chev::before{
transform: rotate(-135deg);
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce){
.ex-grid-collapse-body{ transition: none; }
.ex-grid-collapse-chev::before{ transition: none; }
}
/* Mobile touch sizing */
@media (max-width: 575.98px){
.ex-grid-collapse-head{
padding: 12px 10px;
}
.ex-grid-collapse-label{
font-size: 12px;
}
.ex-grid-collapse-inner{
padding: 10px 0 0;
}
}
.ex-btn.ex-btn-trailer{
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
padding:12px 16px;
border-radius:12px;
border:1px solid rgba(0,0,0,.12);
background:#fff;
font-weight:800;
letter-spacing:.02em;
text-transform:uppercase;
cursor:pointer;
}
html[data-theme="dark"] .ex-btn.ex-btn-trailer{
background:rgba(255,255,255,.06);
border-color:rgba(255,255,255,.16);
color:var(--ex-text);
}
.ex-btn.ex-btn-trailer.is-trailer{
border-color:rgba(211,31,35,.55);
}
html[data-theme="dark"] .ex-pg-select{
background: #111;
color: #fff;
border-color:rgba(255,255,255,.18);
}
html[data-theme="dark"] .ex-pg-select option{
background: #111;
color: #fff;
}
:root{
/* If you already have this, keep yours and remove this line */
--ex-red: #d51f2a; /* brand red fallback */
}
/* ===============================
Favorites Icon (Heart Toggle)
FIX: outline color is theme-aware
=============================== */
.ex-favicon{
--fav-size: 22px;
--fav-red: #d51f2a; /* brand red */
appearance: none;
border: 0;
background: none;
padding: 0;
margin: 0;
width: var(--fav-size);
height: var(--fav-size);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.ex-favicon:disabled{
opacity: .55;
cursor: not-allowed;
}
.ex-favicon::before{
content: "";
width: 100%;
height: 100%;
display: block;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
transition: transform .12s ease, opacity .15s ease;
}
/* ---------- OFF (outlined heart) ----------
Use explicit stroke color per theme (no inheritance issues)
*/
.ex-favicon[data-fav="0"]::before{
/* default to dark-theme-safe (white outline) */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.6l-1-1a5.5 5.5 0 0 0-7.8 7.8l1 1L12 21l7.8-7.8 1-1a5.5 5.5 0 0 0 0-7.8Z'/%3E%3C/svg%3E");
}
/* If you use html[data-theme="light"] to toggle themes, make outline black in light mode */
html[data-theme="light"] .ex-favicon[data-fav="0"]::before{
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.6l-1-1a5.5 5.5 0 0 0-7.8 7.8l1 1L12 21l7.8-7.8 1-1a5.5 5.5 0 0 0 0-7.8Z'/%3E%3C/svg%3E");
}
/* ---------- ON (filled heart) ---------- */
.ex-favicon[data-fav="1"]::before{
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23d51f2a' d='M12 21s-7.3-4.6-9.6-8.6C.3 9 2.1 4.7 6.5 4.2c2-.2 3.7.8 4.7 2 1-1.2 2.7-2.2 4.7-2 4.4.5 6.2 4.8 4.1 8.2C19.3 16.4 12 21 12 21z'/%3E%3C/svg%3E");
}
/* ---------- Interaction polish ---------- */
.ex-favicon:hover::before{ transform: scale(1.08); }
.ex-favicon:active::before{ transform: scale(0.95); }
/* =========================================================
EX MA 2026 Cinematic Edge Fade (Ultra-Smooth, Theme-Correct)
========================================================= */
.ex-edge-fade{
position: relative;
display: block;
width: 100%;
height: 100%;
overflow: hidden;
--fade-width: 88px;
}
.ex-edge-fade::before,
.ex-edge-fade::after {
content: "";
position: absolute;
top: 0;
width: var(--fade-width);
height: 100%;
pointer-events: none;
z-index: 3;
}
/* -----------------------
Direction
------------------------ */
.ex-edge-fade--left::before { left: 0; }
.ex-edge-fade--right::after { right: 0; }
.ex-edge-fade--both::before { left: 0; }
.ex-edge-fade--both::after { right: 0; }
/* =========================================================
LIGHT THEME (fade to white)
========================================================= */
html[data-theme="light"] .ex-edge-fade--left::before,
html[data-theme="light"] .ex-edge-fade--both::before {
background: linear-gradient(
to right,
rgba(255,255,255,1.00) 0%,
rgba(255,255,255,0.96) 12%,
rgba(255,255,255,0.88) 22%,
rgba(255,255,255,0.72) 34%,
rgba(255,255,255,0.52) 46%,
rgba(255,255,255,0.32) 60%,
rgba(255,255,255,0.16) 72%,
rgba(255,255,255,0.06) 84%,
rgba(255,255,255,0.00)100%
);
}
html[data-theme="light"] .ex-edge-fade--right::after,
html[data-theme="light"] .ex-edge-fade--both::after {
background: linear-gradient(
to left,
rgba(255,255,255,1.00) 0%,
rgba(255,255,255,0.96) 12%,
rgba(255,255,255,0.88) 22%,
rgba(255,255,255,0.72) 34%,
rgba(255,255,255,0.52) 46%,
rgba(255,255,255,0.32) 60%,
rgba(255,255,255,0.16) 72%,
rgba(255,255,255,0.06) 84%,
rgba(255,255,255,0.00)100%
);
}
/* =========================================================
DARK THEME (fade to #0b0c0f)
========================================================= */
html[data-theme="dark"] .ex-edge-fade--left::before,
html[data-theme="dark"] .ex-edge-fade--both::before {
background: linear-gradient(
to right,
rgba(11,12,15,1.00) 0%,
rgba(11,12,15,0.96) 12%,
rgba(11,12,15,0.88) 22%,
rgba(11,12,15,0.72) 34%,
rgba(11,12,15,0.52) 46%,
rgba(11,12,15,0.32) 60%,
rgba(11,12,15,0.16) 72%,
rgba(11,12,15,0.06) 84%,
rgba(11,12,15,0.00)100%
);
}
html[data-theme="dark"] .ex-edge-fade--right::after,
html[data-theme="dark"] .ex-edge-fade--both::after {
background: linear-gradient(
to left,
rgba(11,12,15,1.00) 0%,
rgba(11,12,15,0.96) 12%,
rgba(11,12,15,0.88) 22%,
rgba(11,12,15,0.72) 34%,
rgba(11,12,15,0.52) 46%,
rgba(11,12,15,0.32) 60%,
rgba(11,12,15,0.16) 72%,
rgba(11,12,15,0.06) 84%,
rgba(11,12,15,0.00)100%
);
}
/* -----------------------
Mobile tuning
------------------------ */
/* Tablet */
@media (max-width: 991.98px) {
.ex-edge-fade {
--fade-width: 64px;
}
}
/* Large phones */
@media (max-width: 575.98px) {
.ex-edge-fade {
--fade-width: 36px;
}
}
/* Small phones */
@media (max-width: 420px) {
.ex-edge-fade {
--fade-width: clamp(18px, 6vw, 28px);
}
}
/* The image/video inside must fit that box responsively */
.ex-edge-fade > img,
.ex-edge-fade > picture > img,
.ex-edge-fade > video{
display: block;
width: 100%;
height: auto; /* responsive by default */
max-width: 100%;
}
/* If you want it to behave like a cover banner instead */
.ex-edge-fade.is-cover{
aspect-ratio: 16 / 9; /* optional; or whatever your module uses */
}
.ex-edge-fade.is-cover > img,
.ex-edge-fade.is-cover > picture > img,
.ex-edge-fade.is-cover > video{
width: 100%;
height: 100%;
object-fit: cover;
}
/* Button with right-side icon */
.ex-btn--iconright{
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
}
.ex-btn--iconright .ex-btn__icon{
display:inline-flex;
align-items:center;
justify-content:center;
flex:0 0 auto;
}
.ex-btn--iconright .ex-icon{
width:18px;
height:18px;
display:block;
color: currentColor; /* theme-aware automatically */
}
/* ==========================================================
EX Button WATCH FULL SCENE
Matches ex-btn / ex-btn-trailer visual language
========================================================== */
.ex-btn-fullscene{
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
padding:12px 18px;
border-radius:12px;
background: rgba(213,31,42,.10);
border:1px solid rgba(213,31,42,.45);
color:#d51f2a;
font: 700 13px/1 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
letter-spacing:.08em;
text-transform:uppercase;
white-space:nowrap;
cursor:pointer;
user-select:none;
-webkit-tap-highlight-color:transparent;
transition:
background .18s ease,
border-color .18s ease,
color .18s ease,
transform .06s ease,
box-shadow .18s ease;
}
.ex-btn-fullscene:hover{
background: rgba(213,31,42,.18);
border-color: rgba(213,31,42,.75);
color:#d51f2a;
}
.ex-btn-fullscene:active{
transform: translateY(1px);
}
.ex-btn-fullscene:focus-visible{
outline:none;
box-shadow:0 0 0 3px rgba(213,31,42,.35);
}
/* Optional icon inside button */
.ex-btn-fullscene svg{
width:18px;
height:18px;
stroke: currentColor;
fill:none;
stroke-width:1.75;
stroke-linecap:round;
stroke-linejoin:round;
}
/* ==========================================================
Dark theme
========================================================== */
html[data-theme="dark"] .ex-btn-fullscene{
background: rgba(213,31,42,.22);
border-color: rgba(213,31,42,.65);
color:#fff;
}
html[data-theme="dark"] .ex-btn-fullscene:hover{
background: rgba(213,31,42,.32);
border-color: rgba(213,31,42,.9);
color:#fff;
}
/* Disabled state */
.ex-btn-fullscene[disabled]{
opacity:.55;
cursor:not-allowed;
pointer-events:none;
}
/* ================================
EX Rating Thumbs Up / Down
================================ */
.ex-ratingbox{
display:inline-flex;
align-items:center;
gap:6px;
--rate-neutral: #9aa0a6;
--rate-up: #1db954; /* green */
--rate-down: #d51f2a; /* brand red */
user-select:none;
}
/* Base button */
.ex-ratebtn{
appearance:none;
border:0;
background:none;
padding:2px;
display:inline-flex;
align-items:center;
justify-content:center;
cursor:pointer;
color:var(--rate-neutral);
transition:
color .18s ease,
transform .12s ease,
opacity .15s ease;
}
.ex-ratebtn svg{
width:22px;
height:22px;
display:block;
}
/* Hover affordance */
.ex-ratebtn:hover{
transform:translateY(-1px);
opacity:.9;
}
/* Active press */
.ex-ratebtn:active{
transform:translateY(0);
}
/* ===== SELECTED STATES ===== */
/* Thumbs UP selected */
.ex-ratingbox.is-up .ex-ratebtn--up{
color:var(--rate-up);
}
/* Thumbs DOWN selected */
.ex-ratingbox.is-down .ex-ratebtn--down{
color:var(--rate-down);
}
/* De-emphasize the opposite button once voted */
.ex-ratingbox.is-up .ex-ratebtn--down,
.ex-ratingbox.is-down .ex-ratebtn--up{
opacity:.35;
}
/* ===== LOCKED (during ajax) ===== */
.ex-ratingbox[data-votelock="1"]{
pointer-events:none;
opacity:.6;
}
/* ===== DARK THEME ===== */
html[data-theme="dark"] .ex-ratingbox{
--rate-neutral: #cfd3d8;
}
/* ===== OPTIONAL: tooltips ===== */
.ex-ratebtn[aria-label]{
position:relative;
}
.ex-ratebtn[aria-label]::after{
content:attr(aria-label);
position:absolute;
bottom:125%;
left:50%;
transform:translateX(-50%);
background:#111;
color:#fff;
font-size:11px;
padding:4px 8px;
border-radius:6px;
white-space:nowrap;
opacity:0;
pointer-events:none;
transition:opacity .15s ease;
}
html[data-theme="dark"] .ex-ratebtn[aria-label]::after{
background:#0b0c0f;
}
.ex-ratebtn:hover::after{
opacity:1;
}
/* Download icon button (matches your other icon buttons) */
.ex-iconbtn.ex-iconbtn--download{
display:inline-flex;
align-items:center;
justify-content:center;
width:40px;
height:40px;
border-radius:12px;
border:1px solid rgba(0,0,0,.12);
background: rgba(255,255,255,.85);
color:#111;
cursor:pointer;
-webkit-tap-highlight-color: transparent;
position: relative;
}
html[data-theme="dark"] .ex-iconbtn.ex-iconbtn--download{
background: #0b0c0f;
color:#fff;
}
.ex-iconbtn.ex-iconbtn--download .ex-icon{
width:22px;
height:22px;
}
/* Download menu: one-column items (no right-side column spacing) */
.exd-menu .exp-menu-item{
justify-content: flex-start;
}
/* ============================
Comment count badge (icon)
============================ */
.ex-iconbtn--comments{
position: relative;
}
.ex-iconbtn--comments .ex-comment-badge{
position: absolute;
top: -6px;
right: -6px;
min-width: 18px;
height: 18px;
padding: 0 6px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
font: 800 11px/1 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
background: var(--accent, #d31f23);
color: #fff;
box-shadow: 0 6px 16px rgba(0,0,0,.22);
}
.ex-iconbtn--comments .ex-comment-badge.is-zero{
display: none;
}
/* Optional open state accent */
.ex-iconbtn--comments.is-open{
color: var(--accent, #d31f23);
}
/* ============================
Smooth slide-down maincomments
(no display:none anywhere)
============================ */
#maincomments{
overflow: hidden;
max-height: 0;
opacity: 0;
transform: translateY(-6px);
transition:
max-height .28s ease,
opacity .20s ease,
transform .20s ease;
margin-top: 14px;
}
#maincomments.is-open{
opacity: 1;
transform: translateY(0);
}
@media (prefers-reduced-motion: reduce){
#maincomments{ transition: none; }
}
/* ============================
EX Comments (grid + cards)
============================ */
.ex-comments-grid{ width:100%; }
.ex-comment{
border: 1px solid rgba(0,0,0,.10);
border-radius: 12px;
padding: 12px 14px;
background: rgba(0,0,0,.02);
display: flex;
flex-direction: column;
height: 100%;
}
html[data-theme="dark"] .ex-comment{
border-color: rgba(255,255,255,.14);
background: rgba(255,255,255,.04);
}
.ex-comment-name{
margin: 0 0 8px;
font-size: 14px;
font-weight: 800;
letter-spacing: .02em;
text-transform: uppercase;
}
.ex-comment-name a{
color: inherit;
text-decoration: none;
}
.ex-comment-name a:hover{ text-decoration: underline; }
.ex-comment-text{
margin: 0 0 10px;
font-size: 14px;
line-height: 1.45;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
.ex-comment-date{
font-size: 12px;
opacity: .75;
position: static !important; /* overrides any absolute positioning elsewhere */
margin-top: 10px;
}
/* ============================
Comments form single-row layout
============================ */
#maincomments .ex-comments-form form{
display: flex;
align-items: center;
gap: 12px;
width: 100%;
margin: 0;
}
/* Hide the two hidden inputs but keep them functional */
#maincomments .ex-comments-form input[type="hidden"]{
display: none;
}
/* Shared field sizing */
#maincomments .ex-comments-form .yourName,
#maincomments .ex-comments-form textarea,
#maincomments .ex-comments-form .submit{
height: 42px;
border-radius: 10px;
border: 1px solid rgba(255,255,255,.14);
background: rgba(255,255,255,.06);
color: inherit;
outline: none;
}
/* Name field: fixed-ish width */
#maincomments .ex-comments-form .yourName{
width: 240px;
padding: 0 12px;
}
/* Comment field: flexible, same height as others, but resizable */
#maincomments .ex-comments-form textarea{
flex: 1 1 auto;
min-width: 260px;
padding: 10px 12px; /* gives comfortable text inset */
line-height: 20px; /* keeps text vertically comfy */
resize: vertical; /* shows the draggable corner */
overflow: auto; /* scrollbar if resized smaller */
}
/* Submit button */
#maincomments .ex-comments-form .submit{
flex: 0 0 auto;
padding: 0 16px;
font-weight: 800;
cursor: pointer;
background: rgba(255,255,255,.10);
}
/* Focus states */
#maincomments .ex-comments-form .yourName:focus,
#maincomments .ex-comments-form textarea:focus{
border-color: rgba(255,255,255,.28);
box-shadow: 0 0 0 3px rgba(255,255,255,.06);
}
/* Hover on submit */
#maincomments .ex-comments-form .submit:hover{
background: rgba(255,255,255,.14);
}
/* Responsive: stack nicely on smaller screens */
@media (max-width: 720px){
#maincomments .ex-comments-form form{
flex-wrap: wrap;
}
#maincomments .ex-comments-form .yourName{
width: 100%;
}
#maincomments .ex-comments-form textarea{
min-width: 0;
width: 100%;
flex: 1 1 100%;
}
#maincomments .ex-comments-form .submit{
width: 100%;
}
}
/* Space between comment form row and the comment cards grid */
#maincomments .ex-comments-form{
margin-bottom: 16px;
}
/* (Optional) also add a touch of top padding inside the panel */
#maincomments .ex-comments{
padding-top: 6px;
}
/* Optional divider line under the form */
#maincomments .ex-comments-form{
padding-bottom: 12px;
margin-bottom: 18px;
border-bottom: 1px solid rgba(255,255,255,.10);
}
/* ============================
Comment text clamping
============================ */
/* Default: clamp to 3 lines */
.ex-comment-text{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
/* Expanded comment */
.ex-comment.is-expanded .ex-comment-text{
-webkit-line-clamp: unset;
overflow: visible;
}
/* "More / Less" toggle */
.ex-comment-toggle{
/* display: inline-block; */
margin-top: 6px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .04em;
cursor: pointer;
opacity: .7;
user-select: none;
}
.ex-comment-toggle:hover{
opacity: 1;
}
.ex-comment:not(.is-expanded) .ex-comment-text{
mask-image: none !important;
}
/* Footer row: date (left) + toggle (right) */
.ex-comment-footer{
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 10px;
}
/* Normal (non-theater) player width clamp */
#mainplayer .ex-player{
max-width: 1200px; /* tweak: 11001400 */
margin-left: auto;
margin-right: auto;
}
/* If you later add a class to enable theater, this removes the clamp */
#mainplayer .ex-player.is-theater{
max-width: none;
}
/* =========================================================
PATCH ZONE ex-minibite inside ex-slider
Goal: ensure hover-play never changes layout (no reflow)
========================================================= */
.ex-slider .ex-slide{
height: 100%;
}
/* The minibite card defines its own fixed box */
.ex-slider .ex-minibite{
position: relative;
width: 100%;
aspect-ratio: 16 / 9; /* change if your minibites are not 16:9 */
overflow: hidden;
border-radius: 12px; /* optional */
box-sizing: border-box;
}
/* Anything inside shouldn't alter sizing */
.ex-slider .ex-minibite,
.ex-slider .ex-minibite *{
box-sizing: border-box;
}
/* Poster/video must be absolute overlays so swapping can't reflow */
.ex-slider .ex-minibite > img,
.ex-slider .ex-minibite > video,
.ex-slider .ex-minibite .ex-minibite-poster,
.ex-slider .ex-minibite img,
.ex-slider .ex-minibite video{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
/* If your JS toggles .is-playing for hover-play */
.ex-slider .ex-minibite video{
opacity: 0;
pointer-events: none;
}
.ex-slider .ex-minibite.is-playing video{ opacity: 1; }
.ex-slider .ex-minibite.is-playing img{ opacity: 0; }
/* =========================================================
ex-grid Masonry Mode (Pinterest style)
Opt-in: data-masonry="on"
Uses existing data-items breakpoints
========================================================= */
.ex-grid[data-masonry="on"]{
display: block !important; /* override grid/flex */
column-gap: var(--ex-gap, 16px);
}
.ex-grid[data-masonry="on"] > .ex-grid-item{
display: inline-block;
width: 100%;
break-inside: avoid;
-webkit-column-break-inside: avoid;
margin: 0 0 var(--ex-gap, 16px);
}
/* ==========================================
EX Lightbox (overlay + controls)
========================================== */
body.ex-lightbox-open{
/* overflow is set inline by JS; this is just a semantic hook */
}
.ex-lightbox{
position: fixed;
inset: 0;
z-index: 9999;
display: none;
}
.ex-lightbox.is-open{
display: block;
}
.ex-lightbox__backdrop{
position: absolute;
inset: 0;
background: rgba(0,0,0,.78);
}
.ex-lightbox__dialog{
position: absolute;
inset: 24px;
display: grid;
grid-template-rows: auto 1fr auto;
align-items: center;
justify-items: center;
pointer-events: none; /* enable only for inner controls */
}
@media (max-width: 640px){
.ex-lightbox__dialog{ inset: 14px; }
}
.ex-lightbox__figure{
pointer-events: auto;
margin: 0;
width: min(1200px, 100%);
height: 100%;
display: grid;
grid-template-rows: 1fr auto;
gap: 10px;
align-items: end;
}
.ex-lightbox__img{
width: 100%;
height: 100%;
max-height: calc(100vh - 160px);
object-fit: contain;
border-radius: 14px;
background: rgba(255,255,255,.04);
box-shadow: 0 22px 70px rgba(0,0,0,.45);
}
.ex-lightbox__cap{
color: rgba(255,255,255,.92);
font: 600 13px/1.35 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
text-align: center;
padding: 0 10px 4px;
}
/* Close button (top right) */
.ex-lightbox__close{
pointer-events: auto;
position: absolute;
top: 10px;
right: 10px;
width: 44px;
height: 44px;
border-radius: 999px;
background: rgba(0,0,0,.45);
border: 1px solid rgba(255,255,255,.18);
}
.ex-lightbox__x{
position: relative;
display: block;
width: 16px;
height: 16px;
margin: 0 auto;
}
.ex-lightbox__x::before,
.ex-lightbox__x::after{
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 16px;
height: 2px;
background: currentColor;
transform-origin: center;
transform: translate(-50%,-50%) rotate(45deg);
}
.ex-lightbox__x::after{
transform: translate(-50%,-50%) rotate(-45deg);
}
/* Controls bottom middle */
.ex-lightbox__controls{
pointer-events: auto;
margin-top: 10px;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: 999px;
background: rgba(0,0,0,.45);
border: 1px solid rgba(255,255,255,.18);
backdrop-filter: blur(8px);
}
.ex-lightbox__btn{
width: 44px;
height: 44px;
border-radius: 999px;
}
/* Play/pause icon swap */
.ex-lightbox .ex-lb-ico-pause{ display: none; }
.ex-lightbox.is-playing .ex-lb-ico-play{ display: none; }
.ex-lightbox.is-playing .ex-lb-ico-pause{ display: inline-block; }
/* Thumb styling (your clickable grid item) */
.ex-lightthumb{
cursor: pointer;
position: relative;
border-radius: 12px;
overflow: hidden;
}
.ex-lightthumb img{
width: 100%;
height: auto;
display: block;
}
/* Keep hover feel consistent with icon buttons */
.ex-lightthumb:hover{
outline: 2px solid rgba(255,255,255,.14);
outline-offset: -2px;
}
html[data-theme="dark"] .ex-lightthumb:hover{
outline-color: rgba(255,255,255,.22);
}
/* --- Header search wrapper -------------------------------------------- */
.ex-header-search {
position: relative;
z-index: 99999;
text-align: right;
width: 100%;
}
.ex-header-search__inner {
position: relative;
display: inline-block;
width: 485px;
max-width: 100%;
}
/* --- Search input ------------------------------------------------------ */
.ex-header-search__input {
display: block;
width: 100%;
height: 42px;
padding: 0 12px;
box-sizing: border-box;
font: inherit;
color: var(--ex-search-input-color, inherit);
background: var(--ex-search-input-bg, var(--ex-surface, #fff));
border: 1px solid var(--ex-search-border, rgba(127,127,127,.35));
border-radius: var(--ex-search-radius, 6px);
box-shadow: none;
outline: none;
transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease;
}
.ex-header-search__input::placeholder {
color: var(--ex-search-placeholder, rgba(127,127,127,.8));
}
.ex-header-search__input:focus {
border-color: var(--ex-search-focus-border, rgba(127,127,127,.65));
box-shadow: 0 0 0 2px var(--ex-search-focus-ring, rgba(127,127,127,.12));
}
/* --- Dropdown ---------------------------------------------------------- */
.ex-header-search__dropdown {
display: none;
position: absolute;
top: calc(100% + 4px);
left: 0;
right: 0;
max-height: 420px;
overflow-y: auto;
box-sizing: border-box;
background: var(--ex-search-dropdown-bg, var(--ex-surface, #fff));
color: var(--ex-search-dropdown-color, inherit);
border: 1px solid var(--ex-search-border, rgba(127,127,127,.35));
border-radius: var(--ex-search-radius, 6px);
box-shadow: var(--ex-search-shadow, 0 10px 28px rgba(0,0,0,.18));
}
/* --- Groups ------------------------------------------------------------ */
.ex-header-search__group {
padding: 6px 0;
border-bottom: 1px solid var(--ex-search-divider, rgba(127,127,127,.16));
}
.ex-header-search__group:last-child {
border-bottom: 0;
}
.ex-header-search__group-title {
padding: 6px 12px;
font-size: 11px;
font-weight: 700;
letter-spacing: .5px;
text-transform: uppercase;
color: var(--ex-search-muted, rgba(127,127,127,.9));
}
/* --- Items ------------------------------------------------------------- */
.ex-header-search__item {
padding: 9px 12px;
line-height: 1.3;
cursor: pointer;
transition: background-color .12s ease;
}
.ex-header-search__item:hover,
.ex-header-search__item.is-hover {
background: var(--ex-search-hover-bg, rgba(127,127,127,.10));
}
.ex-header-search__label {
display: block;
color: var(--ex-search-item-color, inherit);
font: inherit;
}
.ex-header-search__empty {
padding: 12px;
color: var(--ex-search-muted, rgba(127,127,127,.9));
}
.ex-header-search__footer {
padding: 6px 0;
}
.ex-header-search__footer .ex-header-search__item {
font-weight: 700;
}
.ex-header-search__footer--top {
padding: 6px 0;
border-bottom: 1px solid var(--ex-search-divider, rgba(127,127,127,.16));
}
.ex-header-search__footer--top .ex-header-search__item {
font-weight: 700;
}
/* --- Responsive behavior ---------------------------------------------- */
/* Desktop/tablet: keep it aligned right and sized */
@media (max-width: 1024px) {
.ex-header-search__inner {
width: 410px;
}
}
/* Mobile: duck under the left-side header message and take full width */
@media (max-width: 767px) {
.ex-header-search {
display: block;
clear: both;
text-align: left;
width: 100%;
margin-top: 10px;
}
.ex-header-search__inner {
display: block;
width: 100%;
max-width: none;
}
.ex-header-search__dropdown {
left: 0;
right: 0;
width: 100%;
max-width: none;
max-height: 420px;
}
}
.ex-header-search__group-link {
cursor: pointer;
text-decoration: underline;
text-underline-offset: 2px;
}
.ex-header-search__group-link:hover {
opacity: .85;
}
/* --- Light/Dark fallbacks --------------------------------------------- */
body.dark .ex-header-search__input,
[data-theme="dark"] .ex-header-search__input {
background: var(--ex-search-input-bg-dark, #1f1f1f);
color: var(--ex-search-input-color-dark, #f1f1f1);
border-color: var(--ex-search-border-dark, rgba(255,255,255,.18));
}
body.dark .ex-header-search__input::placeholder,
[data-theme="dark"] .ex-header-search__input::placeholder {
color: var(--ex-search-placeholder-dark, rgba(255,255,255,.55));
}
body.dark .ex-header-search__dropdown,
[data-theme="dark"] .ex-header-search__dropdown {
background: var(--ex-search-dropdown-bg-dark, #1f1f1f);
color: var(--ex-search-dropdown-color-dark, #f1f1f1);
border-color: var(--ex-search-border-dark, rgba(255,255,255,.18));
box-shadow: var(--ex-search-shadow-dark, 0 10px 28px rgba(0,0,0,.45));
}
body.dark .ex-header-search__group,
[data-theme="dark"] .ex-header-search__group {
border-bottom-color: var(--ex-search-divider-dark, rgba(255,255,255,.10));
}
body.dark .ex-header-search__group-title,
body.dark .ex-header-search__empty,
[data-theme="dark"] .ex-header-search__group-title,
[data-theme="dark"] .ex-header-search__empty {
color: var(--ex-search-muted-dark, rgba(255,255,255,.65));
}
body.dark .ex-header-search__item:hover,
body.dark .ex-header-search__item.is-hover,
[data-theme="dark"] .ex-header-search__item:hover,
[data-theme="dark"] .ex-header-search__item.is-hover {
background: var(--ex-search-hover-bg-dark, rgba(255,255,255,.08));
}
body.dark .ex-header-search__footer--top,
[data-theme="dark"] .ex-header-search__footer--top {
border-bottom-color: var(--ex-search-divider-dark, rgba(255,255,255,.10));
}
/* Mobile header layout: welcome + menu on first row, search full-width below */
@media (max-width: 767px) {
.ex-header {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
}
.ex-header .brand {
flex: 1 1 auto;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ex-header .ex-menu-toggle {
flex: 0 0 auto;
}
.ex-header .ex-header-search {
order: 10;
flex: 0 0 100%;
width: 100%;
margin-top: 8px;
text-align: left;
}
.ex-header .ex-header-search__inner {
width: 100%;
max-width: none;
}
.ex-header .ex-header-search__input,
.ex-header .ex-header-search__dropdown {
width: 100%;
}
}
/* Desktop: let the dropdown escape the header container cleanly */
@media (min-width: 768px) {
.ex-header,
.ex-header-search,
.ex-header-search__inner {
overflow: visible;
}
.ex-header .ex-header-search {
text-align: right;
}
.ex-header .ex-header-search__inner {
width: 485px;
max-width: 100%;
}
.ex-header .ex-header-search__dropdown {
left: auto;
right: 0;
width: 485px;
max-width: calc(100vw - 24px);
max-height: 546px;
}
}
.ex-header-search__tabs {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-top: 8px;
margin-bottom: 8px;
}
.ex-header-search__tab {
appearance: none;
-webkit-appearance: none;
border: 1px solid var(--ex-search-border, rgba(127,127,127,.35));
background: var(--ex-search-input-bg, var(--ex-surface, #fff));
color: var(--ex-search-input-color, inherit);
border-radius: 999px;
padding: 6px 12px;
font: inherit;
line-height: 1.2;
cursor: pointer;
transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.ex-header-search__tab:hover {
background: var(--ex-search-hover-bg, rgba(127,127,127,.10));
}
.ex-header-search__tab.is-active {
background: var(--ex-search-hover-bg, rgba(127,127,127,.18));
border-color: var(--ex-search-focus-border, rgba(127,127,127,.65));
font-weight: 700;
}
.ex-header-search__tab:focus {
outline: none;
box-shadow: 0 0 0 2px var(--ex-search-focus-ring, rgba(127,127,127,.12));
}
/* Dark mode fallbacks */
body.dark .ex-header-search__tab,
[data-theme="dark"] .ex-header-search__tab {
background: var(--ex-search-input-bg-dark, #1f1f1f);
color: var(--ex-search-input-color-dark, #f1f1f1);
border-color: var(--ex-search-border-dark, rgba(255,255,255,.18));
}
body.dark .ex-header-search__tab:hover,
[data-theme="dark"] .ex-header-search__tab:hover {
background: var(--ex-search-hover-bg-dark, rgba(255,255,255,.08));
}
body.dark .ex-header-search__tab.is-active,
[data-theme="dark"] .ex-header-search__tab.is-active {
background: var(--ex-search-hover-bg-dark, rgba(255,255,255,.14));
border-color: var(--ex-search-focus-border-dark, rgba(255,255,255,.35));
}
body.dark .ex-header-search__tab:focus,
[data-theme="dark"] .ex-header-search__tab:focus {
box-shadow: 0 0 0 2px var(--ex-search-focus-ring-dark, rgba(255,255,255,.12));
}
.search-video-controls {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 18px;
flex-wrap: wrap;
}
.search-video-controls label {
font-weight: 600;
}
.search-video-controls select {
min-width: 160px;
}
.search-video-controls {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 18px;
flex-wrap: wrap;
}
.search-video-controls label {
font-weight: 600;
}
.search-video-controls select {
min-width: 160px;
height: 40px;
padding: 0 12px;
box-sizing: border-box;
font: inherit;
color: var(--ex-search-input-color, inherit);
background: var(--ex-search-input-bg, var(--ex-surface, #fff));
border: 1px solid var(--ex-search-border, rgba(127,127,127,.35));
border-radius: 6px;
outline: none;
}
.search-video-controls select:focus {
border-color: var(--ex-search-focus-border, rgba(127,127,127,.65));
box-shadow: 0 0 0 2px var(--ex-search-focus-ring, rgba(127,127,127,.12));
}
body.dark .search-video-controls select,
[data-theme="dark"] .search-video-controls select {
background: var(--ex-search-input-bg-dark, #1f1f1f);
color: var(--ex-search-input-color-dark, #f1f1f1);
border-color: var(--ex-search-border-dark, rgba(255,255,255,.18));
}
body.dark .search-video-controls select:focus,
[data-theme="dark"] .search-video-controls select:focus {
box-shadow: 0 0 0 2px var(--ex-search-focus-ring-dark, rgba(255,255,255,.12));
}
.search-video-controls select {
min-width: 160px;
height: 40px;
padding: 0 12px;
box-sizing: border-box;
font: inherit;
color: var(--ex-search-input-color, inherit);
background: var(--ex-search-input-bg, var(--ex-surface, #fff));
border: 1px solid var(--ex-search-border, rgba(127,127,127,.35));
border-radius: 6px;
outline: none;
color-scheme: light;
}
body.dark .search-video-controls select,
[data-theme="dark"] .search-video-controls select {
background: var(--ex-search-input-bg-dark, #1f1f1f);
color: var(--ex-search-input-color-dark, #f1f1f1);
border-color: var(--ex-search-border-dark, rgba(255,255,255,.18));
color-scheme: dark;
}
.search-video-controls select option {
background: #fff;
color: #000;
}
body.dark .search-video-controls select option,
[data-theme="dark"] .search-video-controls select option {
background: #1f1f1f;
color: #f1f1f1;
}
/* ==========================================================
Header ticker
========================================================== */
.ex-header{
position: sticky;
top: 0;
z-index: 30;
background: var(--bg);
padding: 0;
display: block;
}
.ex-header-main{
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--gutter);
padding: 12px var(--gutter);
}
.ex-header .brand{
display: flex;
align-items: center;
flex: 0 0 auto;
}
.ex-header .ex-menu-toggle{
flex: 0 0 auto;
}
.ex-header-main > form,
.ex-header-main > .searchbar,
.ex-header-main > .ex-searchbar,
.ex-header-main > div:last-child{
margin-left: auto;
}
/* ==========================================================
Mobile header: search drops to second row
========================================================== */
.ex-header-main{
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--gutter);
flex-wrap: nowrap;
}
.ex-header-search{
margin-left: auto;
min-width: 0;
}
/* mobile/tablet */
@media (max-width: 991.98px){
.ex-header-main{
flex-wrap: wrap;
align-items: center;
}
.ex-header-search{
order: 3;
flex: 0 0 100%;
width: 100%;
margin-left: 0;
margin-top: 10px;
min-width: 0;
}
.ex-header-search__inner,
.ex-header-search__inner form,
.ex-header-search__input{
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
}
.brand{
flex: 0 1 auto;
min-width: 0;
}
.ex-menu-toggle{
flex: 0 0 auto;
margin-left: auto;
}
}
/* extra small phones */
@media (max-width: 575.98px){
.ex-header-main{
gap: 10px;
padding: 10px 12px;
}
.ns-logo{
max-width: 220px;
width: 100%;
height: auto;
}
.ex-header-search{
margin-top: 8px;
}
}
/* ticker stays full width underneath */
.ex-header-ticker{
width: 100%;
height: 30px;
background: #000;
color: #fff;
overflow: hidden;
border-top: 1px solid rgba(255,255,255,.08);
}
.ex-header-ticker-inner{
position: relative;
width: 100%;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 32px 0 10px;
}
.ex-header-ticker-text{
position: absolute;
left: 50%;
top: 50%;
white-space: nowrap;
font-size: 14px;
line-height: 1;
color: #fff;
transform: translate(-50%, -50%);
}
/* only animate on first-ever view */
.ex-header-ticker.is-animate .ex-header-ticker-text{
transform: translate(-200%, -50%);
animation: exTickerSlideToCenter 1.5s ease-out forwards;
}
.ex-header-ticker-text a{
color: #fff;
text-decoration: underline;
}
.ex-header-ticker-close{
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
width: 18px;
height: 18px;
padding: 0;
border: 0;
background: transparent;
color: #fff;
font-size: 18px;
line-height: 18px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.ex-header-ticker-close:hover{
opacity: .75;
}
@keyframes exTickerSlideToCenter{
from{
transform: translate(-200%, -50%);
}
to{
transform: translate(-50%, -50%);
}
}
@media (max-width: 575.98px){
.ex-header-ticker{
height: 26px;
}
.ex-header-ticker-inner{
height: 26px;
padding-right: 28px;
}
.ex-header-ticker-text{
font-size: 11px;
}
.ex-header-ticker-close{
width: 16px;
height: 16px;
font-size: 16px;
line-height: 16px;
}
}
/* =========================================================
Header ticker — responsive 2-line wrap support
========================================================= */
.ex-header-ticker {
height: auto; /* allow height expansion */
min-height: 28px; /* keep desktop baseline tidy */
display: flex;
align-items: center;
}
/* default: desktop stays single-line */
.ex-header-ticker-text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* -----------------------
Mobile: allow 2-line wrap
------------------------ */
@media (max-width: 575.98px){
.ex-header-ticker{
height: auto;
min-height: 0;
overflow: visible;
}
.ex-header-ticker-inner{
position: relative;
width: 100%;
height: auto;
min-height: 26px;
display: flex;
align-items: flex-start;
justify-content: flex-start;
padding: 4px 28px 4px 8px;
}
.ex-header-ticker-text{
position: static; /* was absolute */
left: auto;
top: auto;
transform: none; /* kill center translate */
width: 100%;
max-width: none;
margin: 0;
text-align: center;
white-space: normal;
overflow: visible;
text-overflow: unset;
display: block;
font-size: 11px;
line-height: 1.2;
}
.ex-header-ticker.is-animate .ex-header-ticker-text{
transform: none;
animation: none;
}
.ex-header-ticker-close{
position: absolute;
right: 6px;
top: 6px;
transform: none;
width: 16px;
height: 16px;
font-size: 16px;
line-height: 16px;
}
}
.ex-iconbtn--poll{
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
padding: 0;
border: 0;
background: transparent;
color: #fff;
cursor: pointer;
}
.ex-iconbtn--poll svg{
display: block;
width: 20px;
height: 20px;
fill: currentColor;
}
/* poll icon color */
[data-theme="light"] .ex-iconbtn--poll{
color:#111;
}
[data-theme="dark"] .ex-iconbtn--poll{
color:#fff;
}
/* hover accent */
.ex-iconbtn--poll:hover{
color:#c41e2a;
}
/* ==========================================================
EX Poll (theme-aware)
========================================================== */
.ex-poll{
font-size: 0.95rem;
line-height: 1.45;
}
/* ---------- header ---------- */
.ex-poll-header{
margin-bottom: 14px;
padding-bottom: 10px;
border-bottom: 1px solid;
}
[data-theme="light"] .ex-poll-header{
border-bottom-color: rgba(0,0,0,.12);
}
[data-theme="dark"] .ex-poll-header{
border-bottom-color: rgba(255,255,255,.12);
}
.ex-poll-title{
margin: 0;
font-size: 1.15rem;
font-weight: 700;
letter-spacing: .02em;
text-transform: uppercase;
}
/* accent color matches your site */
[data-theme="light"] .ex-poll-title{
color: #c41e2a;
}
[data-theme="dark"] .ex-poll-title{
color: #ff4b5c;
}
/* ---------- structure ---------- */
.ex-poll-body{
display: flex;
flex-direction: column;
gap: 18px;
}
.ex-poll-question{
display: flex;
flex-direction: column;
gap: 12px;
}
.ex-poll-question-title{
font-weight: 700;
}
/* ---------- results summary ---------- */
.ex-poll-results-summary{
font-size: .9rem;
opacity: .85;
}
/* ---------- results bars ---------- */
.ex-poll-results{
display: flex;
flex-direction: column;
gap: 12px;
}
.ex-poll-result-row{
display: flex;
flex-direction: column;
gap: 6px;
}
.ex-poll-result-label{
font-weight: 600;
}
/* progress track */
.ex-poll-result-bar-wrap{
position: relative;
width: 100%;
height: 20px;
border-radius: 999px;
overflow: hidden;
}
[data-theme="light"] .ex-poll-result-bar-wrap{
background: rgba(0,0,0,.08);
}
[data-theme="dark"] .ex-poll-result-bar-wrap{
background: rgba(255,255,255,.12);
}
/* progress fill */
.ex-poll-result-bar{
display: flex;
align-items: center;
justify-content: flex-end;
min-width: 44px;
height: 100%;
padding: 0 8px;
border-radius: 999px;
font-size: .8rem;
font-weight: 700;
white-space: nowrap;
}
/* accent fill */
[data-theme="light"] .ex-poll-result-bar{
background: #c41e2a;
color: #fff;
}
[data-theme="dark"] .ex-poll-result-bar{
background: #ff4b5c;
color: #111;
}
.ex-poll-result-votes{
font-size: .85rem;
opacity: .75;
}
/* ---------- answer inputs ---------- */
.ex-poll-options{
display: flex;
flex-direction: column;
gap: 10px;
}
.ex-poll-option-label{
display: flex;
align-items: flex-start;
gap: 10px;
cursor: pointer;
}
.ex-poll-radio{
margin-top: 2px;
}
.ex-poll-option-text{
display: inline-block;
}
/* ---------- select dropdown ---------- */
.ex-poll-select{
width: 100%;
max-width: 420px;
padding: 10px 12px;
border-radius: 10px;
border: 1px solid;
}
[data-theme="light"] .ex-poll-select{
background: #fff;
border-color: rgba(0,0,0,.18);
color: #111;
}
[data-theme="dark"] .ex-poll-select{
background: #181818;
border-color: rgba(255,255,255,.18);
color: #f3f3f3;
}
/* ---------- vote button ---------- */
.ex-poll-actions{
padding-top: 6px;
}
.ex-poll-submit{
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 120px;
padding: 10px 18px;
border-radius: 999px;
border: 0;
font-weight: 700;
letter-spacing: .02em;
cursor: pointer;
}
/* accent button */
[data-theme="light"] .ex-poll-submit{
background: #c41e2a;
color: #fff;
}
[data-theme="dark"] .ex-poll-submit{
background: #ff4b5c;
color: #111;
}
.ex-poll-submit:hover{
opacity: .92;
}
.ex-poll-submit:focus-visible{
outline: 2px solid currentColor;
outline-offset: 2px;
}
/* ==========================================================
Poll popup theme compatibility
========================================================== */
.ex-popup .popuptitle,
.ex-popup .polltext,
.ex-popup .pollrow,
.ex-popup .pollcell{
background:transparent !important;
}
/* LIGHT MODE */
[data-theme="light"] .ex-popup{
background:#ffffff;
color:#111;
}
[data-theme="light"] .ex-popup__head{
border-bottom:1px solid rgba(0,0,0,.08);
}
/* DARK MODE */
[data-theme="dark"] .ex-popup{
background:#0f0f12;
color:#f2f2f2;
}
[data-theme="dark"] .ex-popup__head{
border-bottom:1px solid rgba(255,255,255,.08);
}
/* ensure form text inherits correctly */
.ex-popup label,
.ex-popup input,
.ex-popup select{
color:inherit;
}
/* ==========================================================
/* ==========================================================
Unified icon row / tooltips / magic wand sync button
========================================================== */
.ex-actions-row{
position: relative;
margin-top: 15px;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
}
.ex-iconbtn,
.ex-favicon,
.ex-ratebtn{
position: relative;
}
.ex-iconbtn{
appearance: none;
border: 0;
background: transparent !important;
box-shadow: none !important;
padding: 6px;
margin: 0;
cursor: pointer;
color: currentColor;
line-height: 0;
display: inline-flex;
align-items: center;
justify-content: center;
vertical-align: middle;
-webkit-tap-highlight-color: transparent;
transition: color .16s ease, opacity .16s ease, transform .06s ease;
}
.ex-iconbtn:hover{
opacity: .88;
}
.ex-iconbtn:active{
transform: scale(.94);
}
.ex-iconbtn:focus-visible,
.ex-favicon:focus-visible,
.ex-ratebtn:focus-visible{
outline: 2px solid currentColor;
outline-offset: 2px;
border-radius: 10px;
}
.ex-icon,
.ex-iconbtn svg,
.ex-favicon svg,
.ex-ratebtn svg{
width: 20px;
height: 20px;
display: block;
flex: 0 0 auto;
}
.ex-iconbtn--comments .ex-icon{
width: 22px;
height: 22px;
}
.ex-iconbtn--comments.is-open{
color: var(--accent, #d31f23);
}
.ex-icon-tooltip,
.ex-fav-tooltip{
position: absolute;
left: 50%;
bottom: calc(100% + 8px);
transform: translateX(-50%) translateY(4px);
opacity: 0;
visibility: hidden;
pointer-events: none;
z-index: 50;
display: inline-flex;
align-items: center;
justify-content: center;
white-space: nowrap;
padding: 6px 10px;
border-radius: 999px;
font: 600 11px/1 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
letter-spacing: .01em;
transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}
.ex-favicon[data-fav="1"] .ex-fav-tooltip::before{
content: "Delete from favorites";
}
.ex-favicon[data-fav="0"] .ex-fav-tooltip::before{
content: "Add to favorites";
}
.ex-icon-tooltip::after,
.ex-fav-tooltip::after{
content: "";
position: absolute;
left: 50%;
top: 100%;
transform: translateX(-50%);
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid;
}
.ex-iconbtn:hover .ex-icon-tooltip,
.ex-iconbtn:focus-visible .ex-icon-tooltip,
.ex-favicon:hover .ex-fav-tooltip,
.ex-favicon:focus-visible .ex-fav-tooltip,
.ex-ratebtn:hover .ex-icon-tooltip,
.ex-ratebtn:focus-visible .ex-icon-tooltip{
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
[data-theme="light"] .ex-iconbtn,
[data-theme="light"] .ex-favicon,
[data-theme="light"] .ex-ratebtn{
color: #111;
}
[data-theme="light"] .ex-icon-tooltip,
[data-theme="light"] .ex-fav-tooltip{
background: rgba(17,17,17,.96);
color: #fff;
box-shadow: 0 8px 20px rgba(0,0,0,.18);
}
[data-theme="light"] .ex-icon-tooltip::after,
[data-theme="light"] .ex-fav-tooltip::after{
border-top-color: rgba(17,17,17,.96);
}
[data-theme="dark"] .ex-iconbtn,
[data-theme="dark"] .ex-favicon,
[data-theme="dark"] .ex-ratebtn{
color: #f3f3f3;
}
[data-theme="dark"] .ex-icon-tooltip,
[data-theme="dark"] .ex-fav-tooltip{
background: rgba(255,255,255,.96);
color: #111;
box-shadow: 0 8px 20px rgba(0,0,0,.28);
}
[data-theme="dark"] .ex-icon-tooltip::after,
[data-theme="dark"] .ex-fav-tooltip::after{
border-top-color: rgba(255,255,255,.96);
}
.ex-ratebtn .ex-icon-tooltip{
white-space: nowrap;
}
@media (max-width: 767.98px), (hover: none){
.ex-icon-tooltip,
.ex-fav-tooltip{
display: none !important;
}
}
/* ==========================================================
Dark theme sidebar scrollbar
========================================================== */
[data-theme="dark"] .ex-sidebar {
scrollbar-color: #5a5a66 #11131a; /* Firefox */
scrollbar-width: auto;
}
[data-theme="dark"] .ex-sidebar::-webkit-scrollbar {
width: 12px;
}
[data-theme="dark"] .ex-sidebar::-webkit-scrollbar-track {
background: #11131a;
}
[data-theme="dark"] .ex-sidebar::-webkit-scrollbar-thumb {
background: #5a5a66;
border-radius: 999px;
border: 2px solid #11131a;
}
[data-theme="dark"] .ex-sidebar::-webkit-scrollbar-thumb:hover {
background: #767684;
}
[data-theme="dark"] .ex-sidebar::-webkit-scrollbar-corner {
background: #11131a;
}
[data-theme="light"] .ex-sidebar {
scrollbar-color: #b8b8c2 #f3f3f5; /* Firefox */
scrollbar-width: auto;
}
[data-theme="light"] .ex-sidebar::-webkit-scrollbar {
width: 12px;
}
[data-theme="light"] .ex-sidebar::-webkit-scrollbar-track {
background: #f3f3f5;
}
[data-theme="light"] .ex-sidebar::-webkit-scrollbar-thumb {
background: #b8b8c2;
border-radius: 999px;
border: 2px solid #f3f3f5;
}
[data-theme="light"] .ex-sidebar::-webkit-scrollbar-thumb:hover {
background: #9f9fac;
}
[data-theme="light"] .ex-sidebar::-webkit-scrollbar-corner {
background: #f3f3f5;
}
/* Neutralize Lovense injected pink sync button */
#iToys .lvs-pc-sync-btn {
display: inline !important;
width: auto !important;
height: auto !important;
background: none !important;
color: var(--accent-red, #c00) !important;
font-size: inherit !important;
line-height: inherit !important;
text-align: left !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
border: none !important;
cursor: pointer;
}
/* Optional hover behavior to match your site action links */
#iToys .lvs-pc-sync-btn:hover {
text-decoration: underline;
}
/* Remove wrapper block spacing */
#iToys.toysbutton {
display: inline !important;
margin: 0;
padding: 0;
}
/* Hide HD button only while trailer is active */
#mainplayer .ex-player.is-trailer-mode .exp-quality {
display: none !important;
}
/* Hide only the floating quality menu while trailer is active */
#mainplayer .ex-player.is-trailer-mode ~ .exp-menu-quality,
body .exp-menu-quality.is-trailer-hidden {
display: none !important;
}
.ex-minibite-media-link {
position: absolute;
inset: 0;
z-index: 4;
display: block;
text-decoration: none;
background: transparent;
}
/* Keep caption/buttons above or separately clickable */
.ex-minibite-caption {
position: absolute;
z-index: 6;
}
.ex-minibite-play {
z-index: 5;
}
.ex-player.is-idle .exp-chrome {
opacity: 0;
pointer-events: none;
transform: translateY(12px);
}
.ex-player .exp-chrome {
transition: opacity .22s ease, transform .22s ease;
}
.ex-player.is-idle .exp-center-play {
opacity: 0;
pointer-events: none;
}
.ex-thumb-carousel {
position: relative;
display: block;
width: 100%;
aspect-ratio: var(--ar, 16 / 9);
overflow: hidden;
background: #000;
}
.ex-thumb-carousel-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity .22s ease;
}
.ex-thumb-carousel-img.is-active {
opacity: 1;
}
/* ==========================================================================
Expanded Site Footer
========================================================================== */
.ex-footer {
display: block;
padding: clamp(24px, 3vw, 48px) var(--gutter);
border-top: 1px solid var(--ex-border, #e9e9e9);
background: var(--ex-surface, var(--bg, #fff));
color: var(--ex-text, #111);
font-size: clamp(.82rem, .9vw, .95rem);
line-height: 1.55;
z-index: 20;
}
/* Main logo and navigation area */
.ex-footer-main {
display: grid;
grid-template-columns: minmax(180px, 280px) minmax(0, 1fr);
gap: clamp(28px, 5vw, 80px);
align-items: start;
max-width: var(--page-max);
margin: 0 auto;
}
.ex-footer-brand {
min-width: 0;
}
.ex-footer-brand a {
display: inline-block;
}
.ex-footer-logo {
/* display: block; */
width: 100%;
max-width: 260px;
height: auto;
}
/* Navigation columns */
.ex-footer-nav {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(22px, 4vw, 60px);
}
.ex-footer-group {
min-width: 0;
}
.ex-footer-heading {
margin: 0 0 12px;
color: var(--ex-text, #111);
font-size: .82rem;
font-weight: 800;
line-height: 1.2;
letter-spacing: .055em;
text-transform: uppercase;
}
.ex-footer-links {
margin: 0;
padding: 0;
list-style: none;
}
.ex-footer-links li {
margin: 0 0 8px;
padding: 0;
list-style: none;
}
.ex-footer-links li::marker {
content: none;
}
.ex-footer a {
color: var(--ex-text-2, #333);
text-decoration: none;
transition:
color .16s ease,
text-decoration-color .16s ease;
}
.ex-footer a:hover {
color: var(--accent, #d31f23);
text-decoration: underline;
text-underline-offset: 3px;
}
.ex-footer a:focus-visible {
outline: 2px solid var(--accent, #d31f23);
outline-offset: 3px;
border-radius: 2px;
}
/* Join link receives restrained brand emphasis */
.ex-footer .ex-footer-join {
color: var(--accent, #d31f23);
font-weight: 800;
text-transform: uppercase;
}
.ex-footer-separator {
margin: 0 .3em;
color: var(--ex-muted, #777);
}
/* Legal copy */
.ex-footer-legal {
max-width: var(--page-max);
margin: clamp(24px, 3vw, 40px) auto 0;
padding-top: clamp(18px, 2vw, 28px);
border-top: 1px solid var(--ex-border, #e0e0e0);
color: var(--ex-muted, #666);
font-size: clamp(.72rem, .78vw, .84rem);
line-height: 1.6;
}
.ex-footer-legal p {
margin: 0 0 8px;
}
.ex-footer-legal p:last-child {
margin-bottom: 0;
}
/* Copyright and social row */
.ex-footer-bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
max-width: var(--page-max);
margin: clamp(20px, 2.5vw, 32px) auto 0;
padding-top: clamp(16px, 2vw, 24px);
border-top: 1px solid var(--ex-border, #e0e0e0);
}
.ex-footer-copyright {
color: var(--ex-muted, #777);
white-space: nowrap;
}
.ex-footer-social {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px 18px;
flex-wrap: wrap;
}
/* Dark theme */
html[data-theme="dark"] .ex-footer {
background: var(--ex-surface) !important;
color: var(--ex-text) !important;
border-color: var(--ex-border) !important;
}
html[data-theme="dark"] .ex-footer-heading {
color: var(--ex-text) !important;
}
html[data-theme="dark"] .ex-footer a {
color: var(--ex-text-2) !important;
}
html[data-theme="dark"] .ex-footer a:hover,
html[data-theme="dark"] .ex-footer .ex-footer-join {
color: var(--ex-link-hover, #ff4b4f) !important;
}
html[data-theme="dark"] .ex-footer-legal,
html[data-theme="dark"] .ex-footer-copyright,
html[data-theme="dark"] .ex-footer-separator {
color: var(--ex-muted) !important;
}
html[data-theme="dark"] .ex-footer-legal,
html[data-theme="dark"] .ex-footer-bottom {
border-color: var(--ex-border) !important;
}
/* Medium screens */
@media (max-width: 991.98px) {
.ex-footer-main {
grid-template-columns: 1fr;
gap: 28px;
}
.ex-footer-logo {
max-width: 230px;
}
.ex-footer-nav {
gap: 28px;
}
}
/* Small tablets and phones */
@media (max-width: 700px) {
.ex-footer-nav {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ex-footer-bottom {
align-items: flex-start;
flex-direction: column;
}
.ex-footer-social {
justify-content: flex-start;
}
}
/* Narrow phones */
@media (max-width: 480px) {
.ex-footer {
padding: 24px 12px;
}
.ex-footer-nav {
grid-template-columns: 1fr;
gap: 24px;
}
.ex-footer-heading {
margin-bottom: 9px;
}
.ex-footer-links li {
margin-bottom: 7px;
}
.ex-footer-social {
display: grid;
grid-template-columns: repeat(2, minmax(0, max-content));
gap: 8px 20px;
}
.ex-footer-copyright {
white-space: normal;
}
}