/* ========================================================================== Partner Portal — visual refresh Loaded after assets/css/style.css (vendor "SkyDash" theme). Refines the existing Bootstrap foundation rather than replacing it: typography, spacing, card/sidebar/navbar polish, timeline, document cards, and admin form/table styling. Brand accent stays purple (#4B49AC); base font moves to Inter (loaded in includes/header.php) for a more modern, standard look. ========================================================================== */ :root { --pp-primary: #4B49AC; --pp-primary-dark: #3a3888; --pp-primary-soft: #EEEDFB; --pp-ink: #23232f; --pp-muted: #6c7280; --pp-border: #e7e8f1; --pp-bg-soft: #f6f6fb; --pp-surface: #ffffff; --pp-radius: 14px; --pp-radius-sm: 10px; --pp-shadow: 0 2px 10px rgba(35, 35, 47, 0.06); --pp-shadow-hover: 0 12px 28px rgba(35, 35, 47, 0.12); --pp-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; } /* Dark mode — toggled by stamping data-theme="dark" on (see includes/header.php inline init script + navbar toggle button). */ :root[data-theme="dark"] { --pp-primary: #8482E0; --pp-primary-dark: #6f6dd6; --pp-primary-soft: rgba(132, 130, 224, 0.16); --pp-ink: #E7E7F0; --pp-muted: #A2A5BD; --pp-border: #34354a; --pp-bg-soft: #14141f; --pp-surface: #1b1c2b; --pp-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); --pp-shadow-hover: 0 12px 28px rgba(0, 0, 0, 0.5); } body, .btn, .form-control, input, select, textarea { font-family: var(--pp-font); } body { background: var(--pp-bg-soft); color: var(--pp-ink); } /* Vendor theme hardcodes an explicit background on .content-wrapper (and background-color is never inherited from body), so it needs its own override or it stays stuck on the light color in dark mode. */ .content-wrapper { background: var(--pp-bg-soft); } /* ---------- Typography ---------- */ h1, h2, h3, h4, h5, h6, .font-weight-bold { letter-spacing: -0.015em; font-family: var(--pp-font); } .content-wrapper h2.font-weight-bold, .content-wrapper h3.font-weight-bold { font-weight: 700 !important; } .content-wrapper > .row:first-child h3.font-weight-bold { font-size: 1.65rem; } .content-wrapper p { color: var(--pp-muted); } .card-title, h2.card-title, h4.card-title { font-weight: 700; letter-spacing: -0.01em; } /* Colored KPI cards (card-tale/card-dark-blue/card-light-blue/card-light-danger/ card-dark-yellow/card-light-yellow) set white text via inheritance from the vendor theme - the muted-text rule above must not win over that, or the labels/numbers become unreadable against the colored background. */ .card.card-tale .card-body, .card.card-tale .card-body *, .card.card-dark-blue .card-body, .card.card-dark-blue .card-body *, .card.card-light-blue .card-body, .card.card-light-blue .card-body *, .card.card-light-danger .card-body, .card.card-light-danger .card-body *, .card.card-dark-yellow .card-body, .card.card-dark-yellow .card-body *, .card.card-light-yellow .card-body, .card.card-light-yellow .card-body * { color: #ffffff; } /* ---------- Navbar ---------- */ .navbar { background: var(--pp-surface); border-bottom: 1px solid var(--pp-border); box-shadow: 0 1px 0 rgba(35, 35, 47, 0.02); } .navbar .navbar-brand-wrapper { border-right: 1px solid var(--pp-border); } .navbar .nav-profile img { border: 2px solid var(--pp-border); } .navbar-dropdown { background: var(--pp-surface); border-radius: var(--pp-radius-sm); border: 1px solid var(--pp-border); box-shadow: var(--pp-shadow-hover); } .navbar-dropdown .dropdown-item { color: var(--pp-ink); } /* Theme toggle button */ .theme-toggle-btn { background: transparent; border: 1px solid var(--pp-border); border-radius: 999px; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; color: var(--pp-muted); cursor: pointer; margin-right: .5rem; transition: background-color .15s ease, color .15s ease; } .theme-toggle-btn:hover { background: var(--pp-bg-soft); color: var(--pp-primary); } .theme-toggle-btn i { font-size: 1.2rem; } .theme-toggle-btn .icon-dark { display: none; } :root[data-theme="dark"] .theme-toggle-btn .icon-light { display: none; } :root[data-theme="dark"] .theme-toggle-btn .icon-dark { display: inline; } /* ---------- Sidebar ---------- */ .sidebar { background: var(--pp-surface); border-right: 1px solid var(--pp-border); } .sidebar .nav .nav-item { margin: 2px 12px; border-radius: var(--pp-radius-sm); overflow: hidden; } .sidebar .nav .nav-item .nav-link { border-radius: var(--pp-radius-sm); color: var(--pp-ink); font-weight: 500; transition: background-color .15s ease, color .15s ease; } .sidebar .nav .nav-item:not(.active) .nav-link:hover { background: var(--pp-bg-soft); } .sidebar .nav .nav-item.active .nav-link { background: var(--pp-primary); font-weight: 600; box-shadow: 0 4px 10px rgba(75, 73, 172, 0.25); } /* ---------- Cards (general) ---------- */ .card { background: var(--pp-surface); color: var(--pp-ink); border: 1px solid var(--pp-border); border-radius: var(--pp-radius); box-shadow: var(--pp-shadow); } a[target] .card, a[href] .card { transition: transform .15s ease, box-shadow .15s ease; } a[target] .card:hover, a[href] .card:hover { transform: translateY(-3px); box-shadow: var(--pp-shadow-hover); } /* ---------- KPI cards (dashboard summary tiles) ---------- */ .card.card-tale, .card.card-light-blue, .card.card-light-danger, .card.card-dark-blue, .card.card-dark-yellow, .card.card-light-yellow { border: none; position: relative; overflow: hidden; } .card.card-tale .card-body, .card.card-light-blue .card-body, .card.card-light-danger .card-body, .card.card-dark-blue .card-body, .card.card-dark-yellow .card-body, .card.card-light-yellow .card-body { padding: 1.75rem 1.5rem; } .card.card-tale .card-body p:first-child, .card.card-light-blue .card-body p:first-child, .card.card-light-danger .card-body p:first-child, .card.card-dark-blue .card-body p:first-child, .card.card-dark-yellow .card-body p:first-child, .card.card-light-yellow .card-body p:first-child { font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: .72rem; opacity: .92; display: flex; align-items: center; gap: .5rem; } .card.card-tale .card-body p:first-child::before, .card.card-light-blue .card-body p:first-child::before, .card.card-light-danger .card-body p:first-child::before, .card.card-dark-blue .card-body p:first-child::before { font-family: "Material Design Icons"; font-size: 1.1rem; opacity: .95; } .card.card-tale .card-body p:first-child::before { content: "\F05DA"; } .card.card-light-blue .card-body p:first-child::before { content: "\F040B"; } .card.card-light-danger .card-body p:first-child::before { content: "\F09EE"; } .card.card-tale .fs-30, .card.card-light-blue .fs-30, .card.card-light-danger .fs-30, .card.card-dark-blue .fs-30, .card.card-dark-yellow .fs-30, .card.card-light-yellow .fs-30 { font-weight: 800; letter-spacing: -0.02em; } /* ---------- Buttons ---------- */ .btn { border-radius: var(--pp-radius-sm); font-weight: 600; } .btn-primary { background-color: var(--pp-primary); border-color: var(--pp-primary); } .btn-primary:hover, .btn-primary:focus { background-color: var(--pp-primary-dark); border-color: var(--pp-primary-dark); } .btn.bg-black { border-radius: var(--pp-radius-sm); } .btn-outline-primary { color: var(--pp-primary); border-color: var(--pp-primary); } .btn-outline-primary:hover { background-color: var(--pp-primary); border-color: var(--pp-primary); } /* ---------- Forms (admin CRUD pages) ---------- */ .form-control { background-color: var(--pp-surface); color: var(--pp-ink); border-radius: var(--pp-radius-sm); border-color: var(--pp-border); } .form-control::placeholder { color: var(--pp-muted); opacity: 1; } .form-control:focus { background-color: var(--pp-surface); color: var(--pp-ink); border-color: var(--pp-primary); box-shadow: 0 0 0 3px rgba(75, 73, 172, 0.12); } .form-group label { font-weight: 600; font-size: .85rem; color: var(--pp-ink); } /* ---------- Tables (admin listing pages) ---------- */ .table { /* Bootstrap 5 table cells read color/bg/border from these custom properties (higher specificity than a plain .table rule), so override them directly rather than fighting the cascade. */ --bs-table-color: var(--pp-ink); --bs-table-bg: transparent; --bs-table-border-color: var(--pp-border); color: var(--pp-ink); border-color: var(--pp-border); } .table td, .table th { border-color: var(--pp-border); } .table thead th { border-bottom-width: 1px; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--pp-muted); font-weight: 700; } .table tbody tr:hover { background-color: var(--pp-bg-soft); } /* ---------- Recent Updates timeline (user.php dashboard) ---------- */ .update-timeline { position: relative; padding-left: 2rem; padding-right: .5rem; max-height: 560px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--pp-border) transparent; } .update-timeline::-webkit-scrollbar { width: 8px; } .update-timeline::-webkit-scrollbar-track { background: transparent; } .update-timeline::-webkit-scrollbar-thumb { background: var(--pp-border); border-radius: 999px; } .update-timeline-item { position: relative; padding: 1.25rem 1.5rem 1.25rem 1.75rem; margin-bottom: 1.25rem; border-left: 3px solid var(--pp-primary); border-radius: 0 var(--pp-radius-sm) var(--pp-radius-sm) 0; background: var(--pp-bg-soft); transition: background-color .15s ease; } .update-timeline-item:hover { background: var(--pp-primary-soft); } .update-timeline-item:last-child { margin-bottom: 0; } .update-timeline-marker { position: absolute; left: -9px; top: 1.5rem; width: 15px; height: 15px; border-radius: 50%; background: var(--pp-primary); border: 3px solid #fff; box-shadow: 0 0 0 2px var(--pp-primary); } .update-timeline-date { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #ffffff; background: var(--pp-primary); padding: .25rem .65rem; border-radius: 999px; margin-bottom: .6rem; } .update-timeline-title { margin-bottom: .25rem; font-weight: 700; font-size: 1.15rem; } .update-timeline-subtitle { color: var(--pp-muted); font-weight: 500; margin-bottom: .5rem; } .update-timeline-desc { color: var(--pp-ink); opacity: .8; margin-bottom: 0; } .update-timeline-video iframe { width: 100%; height: 100%; min-height: 160px; border-radius: var(--pp-radius-sm); box-shadow: var(--pp-shadow); } /* ---------- Document cards (alldocuments.php) ---------- Flex-column layout: content grows naturally, action buttons stay pinned to the bottom of each card via margin-top:auto (never absolutely positioned, so long author names / descriptions can never overlap them). */ .doc-card { height: 100%; } .doc-card .card-body { display: flex; flex-direction: column; height: 100%; } .doc-card-header { display: flex; align-items: center; gap: .9rem; margin-bottom: .75rem; } .doc-card-icon { flex: 0 0 auto; width: 44px; height: 44px; border-radius: var(--pp-radius-sm); background: var(--pp-primary-soft); color: var(--pp-primary); display: flex; align-items: center; justify-content: center; font-size: 1.35rem; } .doc-card-icon::before { font-family: "Material Design Icons"; content: "\F0224"; /* generic file, default */ } .doc-card-icon[data-type="pdf"] { background: #FBE7E8; color: #D64545; } .doc-card-icon[data-type="pdf"]::before { content: "\F0226"; } .doc-card-icon[data-type="word"] { background: #E7EEFB; color: #2F5FD6; } .doc-card-icon[data-type="word"]::before { content: "\F022D"; } .doc-card-icon[data-type="excel"] { background: #E6F6EC; color: #1F8A4C; } .doc-card-icon[data-type="excel"]::before { content: "\F021C"; } .doc-card-icon[data-type="powerpoint"] { background: #FBEDE7; color: #D6662F; } .doc-card-icon[data-type="powerpoint"]::before { content: "\F0228"; } .doc-card-icon[data-type="image"] { background: #F1E7FB; color: #7A3FD6; } .doc-card-icon[data-type="image"]::before { content: "\F0EB0"; } .doc-card-icon[data-type="video"] { background: #E7F6FB; color: #1D8CAE; } .doc-card-icon[data-type="video"]::before { content: "\F0E2C"; } :root[data-theme="dark"] .doc-card-icon[data-type="pdf"] { background: rgba(214, 69, 69, 0.18); color: #F0A0A0; } :root[data-theme="dark"] .doc-card-icon[data-type="word"] { background: rgba(47, 95, 214, 0.18); color: #9FB6F2; } :root[data-theme="dark"] .doc-card-icon[data-type="excel"] { background: rgba(31, 138, 76, 0.2); color: #8FDBB0; } :root[data-theme="dark"] .doc-card-icon[data-type="powerpoint"] { background: rgba(214, 102, 47, 0.18); color: #F0B48F; } :root[data-theme="dark"] .doc-card-icon[data-type="image"] { background: rgba(122, 63, 214, 0.2); color: #C7A6F2; } :root[data-theme="dark"] .doc-card-icon[data-type="video"] { background: rgba(29, 140, 174, 0.2); color: #9AD6EC; } .doc-card-title { flex: 1 1 auto; min-width: 0; font-weight: 700; color: var(--pp-ink) !important; font-size: 1rem; margin-bottom: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .doc-card-desc { font-size: .85rem; margin-bottom: .75rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .doc-card-meta-group { margin-bottom: .9rem; } .doc-card-meta { font-size: .78rem; color: var(--pp-muted); margin-bottom: .15rem; } .doc-card-actions { margin-top: auto; padding-top: .75rem; border-top: 1px solid var(--pp-border); display: flex; gap: .5rem; } /* ---------- Auth pages (login, OTP, reset password) ---------- */ .auth .auth-form-light { background: #ffffff; border: 1px solid var(--pp-border); border-radius: var(--pp-radius); box-shadow: var(--pp-shadow-hover); } .auth .brand-logo img { max-height: 42px; width: auto; } .auth h2 { font-weight: 800; letter-spacing: -0.02em; } .auth .auth-form-btn { border-radius: var(--pp-radius-sm); font-weight: 700; letter-spacing: .02em; } /* ---------- Split-panel auth layout (user-login.php, verifyotp.php) ---------- */ .auth-split { min-height: 100vh; display: flex; } .auth-split-brand { flex: 1 1 46%; display: flex; flex-direction: column; justify-content: center; padding: 4rem; background: linear-gradient(135deg, var(--pp-primary) 0%, var(--pp-primary-dark) 100%); color: #ffffff; position: relative; overflow: hidden; } .auth-split-brand::before { content: ""; position: absolute; width: 420px; height: 420px; border-radius: 50%; background: rgba(255, 255, 255, .06); top: -140px; right: -140px; } .auth-split-brand::after { content: ""; position: absolute; width: 280px; height: 280px; border-radius: 50%; background: rgba(255, 255, 255, .05); bottom: -110px; left: -90px; } .auth-split-brand-content { position: relative; z-index: 1; max-width: 420px; } .auth-split-logo img { height: 36px; margin-bottom: 2.5rem; filter: brightness(0) invert(1); } .auth-split-brand h1 { font-size: 2rem; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 1rem; } .auth-split-brand p { font-size: 1rem; opacity: .85; line-height: 1.65; margin-bottom: 0; } .auth-split-features { margin-top: 2.5rem; list-style: none; padding: 0; } .auth-split-features li { display: flex; align-items: center; gap: .65rem; margin-bottom: .9rem; font-size: .92rem; opacity: .92; } .auth-split-features i { font-size: 1.15rem; } .auth-split-form-wrap { flex: 1 1 54%; display: flex; align-items: center; justify-content: center; padding: 2rem; background: var(--pp-bg-soft); } .auth-card { width: 100%; max-width: 400px; background: var(--pp-surface); border: 1px solid var(--pp-border); border-radius: var(--pp-radius); box-shadow: var(--pp-shadow-hover); padding: 2.5rem 2.25rem; } .auth-card h2 { font-weight: 800; letter-spacing: -0.02em; color: var(--pp-ink); margin-bottom: .35rem; } .auth-card .auth-subtitle { color: var(--pp-muted); margin-bottom: 1.75rem; } .auth-input-group { position: relative; margin-bottom: 1.1rem; } .auth-input-group .auth-input-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--pp-muted); font-size: 1.1rem; pointer-events: none; } .auth-input-group input.form-control { padding-left: 42px; height: 48px; } .auth-input-group .auth-toggle-password { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--pp-muted); cursor: pointer; padding: 4px; font-size: 1.1rem; display: flex; align-items: center; } .auth-input-group .auth-toggle-password:hover { color: var(--pp-primary); } .auth-input-group input.form-control.auth-has-toggle { padding-right: 42px; } .auth-links { font-size: .88rem; color: var(--pp-muted); } .auth-links a { color: var(--pp-primary); font-weight: 600; text-decoration: none; } .auth-links a:hover { text-decoration: underline; } .auth-divider-links { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--pp-border); text-align: center; } /* Segmented OTP input */ .otp-boxes { display: flex; gap: .65rem; justify-content: center; margin-bottom: 1.5rem; } .otp-box { width: 52px; height: 58px; text-align: center; font-size: 1.5rem; font-weight: 700; border-radius: var(--pp-radius-sm); border: 1.5px solid var(--pp-border); background: var(--pp-surface); color: var(--pp-ink); } .otp-box:focus { outline: none; border-color: var(--pp-primary); box-shadow: 0 0 0 3px rgba(75, 73, 172, 0.15); } .auth-email-chip { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; color: var(--pp-ink); background: var(--pp-primary-soft); padding: .35rem .8rem; border-radius: 999px; font-size: .85rem; margin-bottom: 1.5rem; } @media (max-width: 900px) { .auth-split-brand { display: none; } .auth-split-form-wrap { flex: 1 1 100%; } } /* ---------- Footer ---------- */ .footer { background: transparent; border-top: 1px solid var(--pp-border); } /* ---------- Modals (Bootstrap "new discussion" / video modals, and the custom #viewModal on alldocuments.php) ---------- */ .modal-content { background: var(--pp-surface); color: var(--pp-ink); border-radius: var(--pp-radius); border: 1px solid var(--pp-border); } .modal-header, .modal-footer { border-color: var(--pp-border); } :root[data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(1.6); } #viewModal .modal-content { background: var(--pp-surface); color: var(--pp-ink); } #viewModal .close { color: var(--pp-muted); } #viewModal .close:hover { color: var(--pp-ink); } /* ---------- Scrollbar (dark mode only, keeps light mode native) ---------- */ :root[data-theme="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; } :root[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--pp-bg-soft); } :root[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--pp-border); border-radius: 999px; } /* ---------- Avatars (forum thread list / thread detail / replies) ---------- */ .pp-avatar { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--pp-primary); color: #ffffff; font-weight: 700; letter-spacing: 0; } .pp-avatar-sm { width: 34px; height: 34px; font-size: .8rem; } .pp-avatar-lg { width: 46px; height: 46px; font-size: 1rem; } /* ---------- Stat pills (reply / like counts) ---------- */ .stat-pill { display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem; font-weight: 600; color: var(--pp-muted); background: var(--pp-bg-soft); border: 1px solid var(--pp-border); border-radius: 999px; padding: .3rem .7rem; } .stat-pill i { font-size: .95rem; } .stat-pill.stat-pill-active { color: var(--pp-primary); background: var(--pp-primary-soft); border-color: transparent; } .dept-badge { display: inline-flex; align-items: center; font-size: .7rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--pp-primary); background: var(--pp-primary-soft); border-radius: 999px; padding: .2rem .6rem; } /* ---------- Forum thread list (forum.php) ---------- */ .thread-card { padding: 1.4rem 1.5rem; } .thread-card-top { display: flex; align-items: flex-start; gap: .9rem; margin-bottom: .6rem; } .thread-card-title { color: var(--pp-ink) !important; font-weight: 700; font-size: 1.05rem; margin-bottom: .25rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } a.thread-card-link { text-decoration: none; } a.thread-card-link:hover .thread-card-title { color: var(--pp-primary) !important; } .thread-card-meta { font-size: .8rem; color: var(--pp-muted); } .thread-card-desc { font-size: .88rem; color: var(--pp-muted); margin: .75rem 0 1rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .thread-card-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; padding-top: .9rem; border-top: 1px solid var(--pp-border); } .thread-card-stats { display: flex; gap: .5rem; } /* ---------- Thread detail (view_thread.php) ---------- */ .thread-detail-header { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.25rem; } .thread-detail-meta { display: flex; align-items: center; gap: .75rem; color: var(--pp-muted); font-size: .88rem; } .thread-detail-body { font-size: .98rem; line-height: 1.7; color: var(--pp-ink); padding: 1rem 0 1.5rem; border-bottom: 1px solid var(--pp-border); margin-bottom: 1.5rem; } .vote-btn { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; border-radius: 999px !important; padding: .5rem 1.1rem !important; } .reply-card { display: flex; gap: .9rem; padding: 1rem 0; border-bottom: 1px solid var(--pp-border); } .reply-card:last-child { border-bottom: none; } .reply-bubble { flex: 1 1 auto; min-width: 0; } .reply-bubble-header { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .25rem; } .reply-author { font-weight: 700; color: var(--pp-ink); font-size: .9rem; } .reply-time { font-size: .76rem; color: var(--pp-muted); } .reply-content { color: var(--pp-ink); opacity: .9; margin-bottom: 0; font-size: .92rem; } .reply-form-card { background: var(--pp-bg-soft); border: 1px solid var(--pp-border); border-radius: var(--pp-radius-sm); padding: 1.25rem; } /* ---------- Product Videos gallery (productvideos.php) ---------- */ .video-card { height: 100%; overflow: hidden; } .video-card .card-body { display: flex; flex-direction: column; height: 100%; padding: 0; } .video-thumb { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #0d0d16; cursor: pointer; overflow: hidden; } .video-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .2s ease; } .video-thumb:hover img { transform: scale(1.04); } .video-play-badge { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 56px; height: 56px; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: var(--pp-primary); display: flex; align-items: center; justify-content: center; font-size: 1.8rem; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); transition: transform .15s ease, background-color .15s ease; } .video-thumb:hover .video-play-badge { transform: translate(-50%, -50%) scale(1.08); background: var(--pp-primary); color: #ffffff; } .video-category-badge { position: absolute; top: .75rem; left: .75rem; font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #ffffff; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(2px); border-radius: 999px; padding: .25rem .65rem; } .video-card-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 1.25rem 1.4rem 1.4rem; } .video-card-title { font-weight: 700; color: var(--pp-ink); margin-bottom: .4rem; font-size: 1.02rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .video-card-desc { font-size: .85rem; color: var(--pp-muted); margin-bottom: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } #videoModal .modal-body { padding: 0; background: #000; } #videoModal iframe { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; }