/* ========================================================================== gstream — OTT design system Dark streaming-service theme. Loaded LAST on every page so it wins over the legacy inline styles and the two different Bootstrap versions this site mixes (BS3 on main.php, BS4 on movie.php). ========================================================================== */ :root { --st-bg: #0a0a0a; --st-bg-elevated: #141414; --st-surface: #191919; --st-surface-2: #212121; --st-border: rgba(255, 255, 255, .08); --st-border-strong: rgba(255, 255, 255, .16); --st-accent: #e50914; --st-accent-hover: #b70710; --st-accent-soft: rgba(229, 9, 20, .14); --st-text: #ffffff; --st-text-muted: #a6a6a6; --st-text-dim: #6f6f6f; --st-radius: 6px; --st-radius-lg: 10px; --st-shadow: 0 8px 28px rgba(0, 0, 0, .55); --st-shadow-hover: 0 14px 42px rgba(0, 0, 0, .75); --st-nav-h: 64px; --st-ease: cubic-bezier(.22, .61, .36, 1); } /* -------------------------------------------------------------------------- Base -------------------------------------------------------------------------- */ html { background: var(--st-bg); } body { background: var(--st-bg) !important; color: var(--st-text); font-family: 'Chakra Petch', -apple-system, 'Segoe UI', sans-serif !important; font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; margin: 0; } /* The login page paints a photo on ; keep it but darken it so the form stays readable. */ body.img[style*="background-image"] { background-size: cover !important; background-position: center !important; background-attachment: fixed !important; } body.img[style*="background-image"]::before { content: ""; position: fixed; inset: 0; background: radial-gradient(ellipse at 50% 0%, rgba(0, 0, 0, .45), rgba(0, 0, 0, .88) 65%), linear-gradient(180deg, rgba(10, 10, 10, .70), rgba(10, 10, 10, .96)); z-index: 0; pointer-events: none; } body.img[style*="background-image"] > * { position: relative; z-index: 1; } a { color: var(--st-text); text-decoration: none; transition: color .18s var(--st-ease); } a:hover, a:focus { color: var(--st-accent); text-decoration: none; } img { max-width: 100%; } ::selection { background: var(--st-accent); color: #fff; } /* Scrollbar */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--st-bg); } ::-webkit-scrollbar-thumb { background: #2e2e2e; border-radius: 6px; } ::-webkit-scrollbar-thumb:hover { background: #3d3d3d; } /* The legacy pages wrap everything in .container with inline black backgrounds; neutralise those so sections can run full-bleed. */ .container, .container_wrap { background-color: transparent !important; } /* -------------------------------------------------------------------------- Top navigation (built by header.php) -------------------------------------------------------------------------- */ .st-nav { /* header.php is included inside the legacy centred .container, so break the bar back out to the full viewport width. */ width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); position: sticky; top: 0; z-index: 1030; display: flex; align-items: center; gap: 20px; height: var(--st-nav-h); padding: 0 clamp(14px, 4vw, 46px); background: rgba(10, 10, 10, .82); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid var(--st-border); } .st-nav__brand { display: flex; align-items: center; gap: 9px; font-size: 21px; font-weight: 700; letter-spacing: .3px; color: var(--st-text); white-space: nowrap; } .st-nav__brand:hover { color: var(--st-text); } .st-nav__brand b { color: var(--st-accent); } .st-nav__brand img { height: 30px; width: auto; } .st-nav__links { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; flex: 1 1 auto; overflow-x: auto; scrollbar-width: none; } .st-nav__links::-webkit-scrollbar { display: none; } .st-nav__link { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: var(--st-radius); font-size: 15px; font-weight: 500; color: var(--st-text-muted); white-space: nowrap; transition: color .18s var(--st-ease), background-color .18s var(--st-ease); } .st-nav__link:hover { color: var(--st-text); background: rgba(255, 255, 255, .07); } .st-nav__link.is-active { color: var(--st-text); background: var(--st-accent-soft); box-shadow: inset 0 0 0 1px rgba(229, 9, 20, .35); } .st-nav__link i { font-size: 14px; opacity: .85; } .st-nav__link--danger:hover { color: #fff; background: var(--st-accent); } /* Mobile menu toggle */ .st-nav__toggle { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--st-border-strong); border-radius: var(--st-radius); background: transparent; color: var(--st-text); font-size: 18px; cursor: pointer; } /* -------------------------------------------------------------------------- News ticker -------------------------------------------------------------------------- */ .st-ticker { /* Same full-bleed break-out as .st-nav */ width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); display: flex; align-items: center; gap: 12px; padding: 9px clamp(14px, 4vw, 46px); background: linear-gradient(90deg, var(--st-accent-soft), transparent 60%); border-bottom: 1px solid var(--st-border); font-size: 14.5px; color: #e8e8e8; } .st-ticker__tag { flex: none; padding: 3px 10px; border-radius: 999px; background: var(--st-accent); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; } .st-ticker marquee { display: block; } /* -------------------------------------------------------------------------- Page shell -------------------------------------------------------------------------- */ .st-page { max-width: 1560px; margin: 0 auto; padding: clamp(22px, 4vw, 40px) clamp(14px, 4vw, 46px) 72px; } .st-section { margin-bottom: clamp(30px, 5vw, 54px); } .st-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 18px; } .st-section__title { position: relative; margin: 0; padding-left: 14px; font-size: clamp(19px, 2.4vw, 26px); font-weight: 700; letter-spacing: .2px; color: var(--st-text); } .st-section__title::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 4px; height: 1.05em; border-radius: 2px; background: var(--st-accent); } .st-section__link { font-size: 14px; color: var(--st-text-muted); } .st-section__link:hover { color: var(--st-accent); } /* -------------------------------------------------------------------------- Card grid + poster cards -------------------------------------------------------------------------- */ .st-grid { display: grid; gap: clamp(12px, 1.6vw, 20px); } /* Poster ratio (2:3) — movies, series */ .st-grid--poster { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); } /* Landscape ratio (16:9) — live channels, category banners */ .st-grid--wide { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); } /* Big feature tiles — the three main categories on main.php */ .st-grid--feature { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(14px, 2vw, 26px); } .st-card { position: relative; display: block; border-radius: var(--st-radius-lg); overflow: hidden; background: var(--st-surface); box-shadow: var(--st-shadow); transition: transform .28s var(--st-ease), box-shadow .28s var(--st-ease); } .st-card:hover, .st-card:focus-visible { transform: translateY(-5px) scale(1.022); box-shadow: var(--st-shadow-hover); z-index: 2; } .st-card__media { position: relative; display: block; width: 100%; aspect-ratio: 2 / 3; overflow: hidden; background: var(--st-surface-2); } .st-card--wide .st-card__media { aspect-ratio: 16 / 9; } .st-card--feature .st-card__media { aspect-ratio: 16 / 10; } .st-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--st-ease); } .st-card:hover .st-card__media img { transform: scale(1.07); } /* Gradient scrim so captions stay legible over artwork */ .st-card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 42%, rgba(0, 0, 0, .82)); opacity: .9; transition: opacity .28s var(--st-ease); } .st-card:hover .st-card__media::after { opacity: 1; } /* Play affordance on hover */ .st-card__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(.82); width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--st-accent); color: #fff; font-size: 20px; opacity: 0; z-index: 2; box-shadow: 0 6px 20px rgba(229, 9, 20, .5); transition: opacity .26s var(--st-ease), transform .26s var(--st-ease); pointer-events: none; } .st-card:hover .st-card__play { opacity: 1; transform: translate(-50%, -50%) scale(1); } .st-card__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 12px 13px 13px; } .st-card__title { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.3; color: #fff; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-shadow: 0 2px 8px rgba(0, 0, 0, .8); } .st-card__meta { margin: 4px 0 0; font-size: 12.5px; color: var(--st-text-muted); } .st-card--feature .st-card__title { font-size: clamp(18px, 2vw, 23px); font-weight: 700; } /* Badge (LIVE / 18+ / HD) */ .st-badge { position: absolute; top: 10px; left: 10px; z-index: 3; padding: 3px 9px; border-radius: 4px; background: var(--st-accent); color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; box-shadow: 0 2px 10px rgba(0, 0, 0, .5); } .st-badge--live::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: #fff; vertical-align: middle; animation: st-pulse 1.6s ease-in-out infinite; } @keyframes st-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } } /* -------------------------------------------------------------------------- Buttons -------------------------------------------------------------------------- */ .st-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 22px; border: 1px solid transparent; border-radius: var(--st-radius); background: var(--st-surface-2); color: var(--st-text); font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer; transition: background-color .18s var(--st-ease), transform .12s var(--st-ease), border-color .18s var(--st-ease); } .st-btn:hover { background: #2c2c2c; color: var(--st-text); } .st-btn:active { transform: translateY(1px); } .st-btn--primary { background: var(--st-accent); color: #fff; } .st-btn--primary:hover { background: var(--st-accent-hover); color: #fff; } .st-btn--ghost { background: transparent; border-color: var(--st-border-strong); } .st-btn--ghost:hover { background: rgba(255, 255, 255, .08); } .st-btn--block { width: 100%; } /* -------------------------------------------------------------------------- Forms (login, register, search, profile) -------------------------------------------------------------------------- */ .st-auth { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 40px 16px; } .st-auth__card { width: 100%; max-width: 412px; padding: clamp(26px, 4vw, 38px); border: 1px solid var(--st-border); border-radius: var(--st-radius-lg); background: rgba(18, 18, 18, .93); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: var(--st-shadow); } .st-auth__logo { display: block; max-width: 210px; margin: 0 auto 22px; } .st-auth__title { margin: 0 0 22px; font-size: 25px; font-weight: 700; text-align: center; } .st-field { margin-bottom: 15px; } .st-label { display: block; margin-bottom: 6px; font-size: 14px; color: var(--st-text-muted); } /* Also targets the legacy .form-control inputs the pages already emit */ .st-input, .st-auth .form-control, .st-page .form-control { width: 100%; padding: 12px 14px; border: 1px solid var(--st-border-strong); border-radius: var(--st-radius); background: rgba(255, 255, 255, .05) !important; color: var(--st-text) !important; font-family: inherit; font-size: 15px; height: auto; transition: border-color .18s var(--st-ease), box-shadow .18s var(--st-ease), background-color .18s var(--st-ease); } .st-input::placeholder, .st-auth .form-control::placeholder, .st-page .form-control::placeholder { color: var(--st-text-dim); } .st-input:focus, .st-auth .form-control:focus, .st-page .form-control:focus { outline: none !important; border-color: var(--st-accent) !important; background: rgba(255, 255, 255, .08) !important; box-shadow: 0 0 0 3px var(--st-accent-soft) !important; color: var(--st-text) !important; } select.st-input, .st-page select.form-control { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23a6a6a6' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 11px; padding-right: 36px; } .st-form-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; font-size: 14px; color: var(--st-text-muted); } .st-form-row a { color: var(--st-accent); } .st-alert { padding: 10px 13px; margin-bottom: 14px; border-radius: var(--st-radius); font-size: 14px; } .st-alert:empty { display: none; padding: 0; margin: 0; } .st-alert--error { background: var(--st-accent-soft); border: 1px solid rgba(229, 9, 20, .35); color: #ff8b8b; } /* Password reveal icon sits inside the field */ .st-field { position: relative; } .st-field .field-icon, .st-field .toggle-password { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); color: var(--st-text-dim); cursor: pointer; z-index: 3; } .st-field .field-icon:hover { color: var(--st-text); } /* -------------------------------------------------------------------------- Download / app links strip (login page) -------------------------------------------------------------------------- */ .st-apps { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--st-border); } .st-apps__label { margin: 0 0 14px; text-align: center; font-size: 13.5px; color: var(--st-text-muted); } .st-apps__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .st-apps__item { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 13px 6px; border: 1px solid var(--st-border); border-radius: var(--st-radius); background: rgba(255, 255, 255, .035); color: var(--st-text-muted); font-size: 12.5px; text-align: center; transition: background-color .18s var(--st-ease), border-color .18s var(--st-ease), color .18s var(--st-ease), transform .18s var(--st-ease); } .st-apps__item:hover { background: rgba(255, 255, 255, .075); border-color: var(--st-border-strong); color: var(--st-text); transform: translateY(-2px); } .st-apps__item i { font-size: 23px; color: var(--st-accent); } /* -------------------------------------------------------------------------- Tables (profile, package, top-up history) -------------------------------------------------------------------------- */ .st-table-wrap { overflow-x: auto; border: 1px solid var(--st-border); border-radius: var(--st-radius-lg); background: var(--st-surface); } .st-page table, .st-table { width: 100%; border-collapse: collapse; color: var(--st-text); margin: 0; } .st-page table th, .st-table th { padding: 13px 15px; text-align: left; font-size: 13px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--st-text-muted); background: var(--st-surface-2); border-bottom: 1px solid var(--st-border); white-space: nowrap; } .st-page table td, .st-table td { padding: 13px 15px; border-bottom: 1px solid var(--st-border); font-size: 14.5px; color: #dcdcdc; background: transparent; } .st-page table tbody tr:last-child td, .st-table tbody tr:last-child td { border-bottom: none; } .st-page table tbody tr:hover td, .st-table tbody tr:hover td { background: rgba(255, 255, 255, .04); } /* -------------------------------------------------------------------------- Info panels / stat cards (profile, expiry) -------------------------------------------------------------------------- */ .st-panel { padding: clamp(18px, 2.6vw, 26px); border: 1px solid var(--st-border); border-radius: var(--st-radius-lg); background: var(--st-surface); } .st-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: clamp(12px, 1.6vw, 18px); margin-bottom: 26px; } .st-stat { padding: 19px 21px; border: 1px solid var(--st-border); border-radius: var(--st-radius-lg); background: linear-gradient(155deg, var(--st-surface-2), var(--st-surface)); } .st-stat__label { margin: 0 0 7px; font-size: 13px; letter-spacing: .3px; text-transform: uppercase; color: var(--st-text-muted); } .st-stat__value { margin: 0; font-size: 26px; font-weight: 700; line-height: 1.15; color: var(--st-text); } .st-stat__value--accent { color: var(--st-accent); } /* -------------------------------------------------------------------------- Empty state -------------------------------------------------------------------------- */ .st-empty { padding: 66px 20px; text-align: center; color: var(--st-text-muted); } .st-empty i { display: block; margin-bottom: 14px; font-size: 42px; color: var(--st-text-dim); } /* -------------------------------------------------------------------------- Footer -------------------------------------------------------------------------- */ .st-footer { padding: 32px clamp(14px, 4vw, 46px); border-top: 1px solid var(--st-border); background: var(--st-bg-elevated); color: var(--st-text-dim); font-size: 13.5px; text-align: center; } .st-footer a { color: var(--st-text-muted); } .st-footer a:hover { color: var(--st-accent); } /* -------------------------------------------------------------------------- Legacy overrides The old markup hard-codes white borders, transparent buttons and 600px-tall images inline. Neutralise the ones that clash with the dark theme. -------------------------------------------------------------------------- */ .st-page .fit-image { height: auto !important; } .st-page .row > [class*="col-"] > a > img.img-responsive { border-radius: var(--st-radius-lg); } /* Old focus rings were a bright orange glow; replace with the accent. */ .st-page input:focus, .st-page button:focus, .st-page a:focus img { border-color: var(--st-accent) !important; box-shadow: 0 0 0 3px var(--st-accent-soft) !important; } /* -------------------------------------------------------------------------- Legacy page shell Every content page wraps its body in .container > .container_wrap. Treat that as the page shell so the table/form/panel rules below apply site-wide without having to edit each page's markup. -------------------------------------------------------------------------- */ /* 16 of the content pages pin `.container { width: 1280px !important }` in an inline