/* ========================================================= InstaFreight • Videos page (scoped, dir-aware) - Scope everything under `.videos-page` (add this class on or a page wrapper) - Uses logical properties so RTL works without separate files - Dark-mode via [data-theme="dark"] ========================================================= */ /* ---------- Page head ---------- */ .videos-page .page-head{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-block:16px 8px; } .videos-page .page-head h1{ margin:0; font-size:22px; font-weight:800; letter-spacing:.2px; color:var(--if-ink, #0f172a); } .videos-page .page-head .subhead{ color:var(--if-muted, #64748b); font-size:13px; } /* ---------- Search ---------- */ .videos-page .search input[type="search"]{ padding:10px 12px; min-width:260px; border:1px solid var(--if-line, #e5e7eb); border-radius:10px; background:#fff; color:#111; transition:border-color .18s ease, box-shadow .18s ease; } .videos-page .search input[type="search"]::placeholder{ color:#9aa3af; } .videos-page .search input[type="search"]:focus{ outline:none; border-color: color-mix(in srgb, var(--if-accent, #1565C0) 60%, var(--if-line, #e5e7eb)); box-shadow:0 0 0 .2rem color-mix(in srgb, var(--if-accent, #1565C0) 22%, transparent); } /* ---------- Chips ---------- */ .videos-page .chips{ display:flex; flex-wrap:wrap; gap:8px; margin-block-end:12px; } .videos-page .chip{ padding:8px 12px; border-radius:999px; background:var(--if-chip, #eef2f7); border:1px solid var(--if-line, #e5e7eb); cursor:pointer; font-size:13px; color:#0b1020; transition:transform .12s ease, background .12s ease, border-color .12s ease; } .videos-page .chip:hover{ transform: translateY(-1px); } .videos-page .chip.is-active{ background:var(--if-chip-on, #d0faf7); border-color:#99f6e4; } /* ---------- Grid & cards ---------- */ .videos-page .grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap:14px; margin-block-start:12px; } .videos-page .card{ display:block; background:var(--if-surface, #ffffff); border:1px solid var(--if-line, #e5e7eb); border-radius:14px; overflow:hidden; text-decoration:none; color:#111; box-shadow:0 6px 20px rgba(2,6,23,.06); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .videos-page .card:hover{ transform: translateY(-3px); box-shadow:0 12px 28px rgba(2,8,20,.12); border-color: color-mix(in srgb, var(--if-accent, #1565C0) 30%, var(--if-line, #e5e7eb)); } .videos-page .card:focus-visible{ outline:none; box-shadow:0 0 0 .2rem color-mix(in srgb, var(--if-accent, #1565C0) 30%, transparent); } /* ---------- Thumbnail area ---------- */ .videos-page .thumb{ position:relative; aspect-ratio: 16 / 9; /* modern replacement for padding-top hack */ background:#000 center/cover no-repeat; border-block-end:1px solid var(--if-line, #e5e7eb); } /* Use a scoped badge so we don't fight Bootstrap's .badge elsewhere */ .videos-page .thumb .badge{ position:absolute; inset-block-start:10px; /* top:10px; */ inset-inline-start:10px; /* left in LTR, right in RTL */ font-size:11px; color:#fff; padding:4px 7px; border-radius:8px; background: rgba(0,0,0,.68); box-shadow:0 6px 16px rgba(0,0,0,.25); } /* Platform color accents */ .videos-page a.card[data-platform="youtube"] .thumb .badge{ background:#ff0000; } .videos-page a.card[data-platform="linkedin"] .thumb .badge{ background:#0a66c2; } .videos-page a.card[data-platform="x"] .thumb .badge, .videos-page a.card[data-platform="twitter"] .thumb .badge{ background:#111; } .videos-page a.card[data-platform="tiktok"] .thumb .badge{ background:#000; } .videos-page a.card[data-platform="vimeo"] .thumb .badge{ background:#1ab7ea; } /* ---------- Meta and title clamp ---------- */ .videos-page .meta{ padding:10px; } .videos-page .title{ font-size:16px; margin:2px 0 6px; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .videos-page .sub{ color:#6b7280; font-size:12px; } /* ---------- Empty state ---------- */ .videos-page .empty{ padding:24px; border:1px dashed var(--if-line, #e5e7eb); border-radius:12px; background:#f8fafc; color:var(--if-muted, #64748b); } /* ---------- Direction & language polish ---------- */ /* Flip tiny arrow-ish translations if you add any future icons with translateX; not needed now */ /* Better wrapping for long unspaced CJK titles */ .videos-page :is(:lang(zh), :lang(ja), :lang(ko)) .title{ word-break: keep-all; line-height:1.3; } /* Slightly looser tracking for Arabic/Hebrew can improve legibility (optional) */ html[dir="rtl"] .videos-page .title{ letter-spacing:.01em; } /* ---------- Dark mode ---------- */ [data-theme="dark"] .videos-page .page-head h1{ color:#e5e7eb; } [data-theme="dark"] .videos-page .search input[type="search"]{ background:#0f172a; color:#e5e7eb; border-color:#1f2937; } [data-theme="dark"] .videos-page .chip{ background:#101827; border-color:#223047; color:#dbeafe; } [data-theme="dark"] .videos-page .chip.is-active{ background:#093949; border-color:#0ea5a5; } [data-theme="dark"] .videos-page .card{ background:#0f172a; border-color:#1f2937; color:#e5e7eb; box-shadow:0 8px 26px rgba(0,0,0,.5); } [data-theme="dark"] .videos-page .thumb{ border-color:#1f2937; } [data-theme="dark"] .videos-page .sub{ color:#93a4b8; } [data-theme="dark"] .videos-page .empty{ background:#0b1220; border-color:#1f2937; color:#93a4b8; } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce){ .videos-page .card, .videos-page .chip{ transition: none !important; } } /* ---------- Responsive ---------- */ @media (max-width: 640px){ .videos-page .search input[type="search"]{ min-width:0; inline-size:100%; /* width */ } .videos-page .page-head{ flex-direction:column; align-items:stretch; } }