/* ========================================================================== rapidcloud.cc — player skin & overlay Brand palette: blue #3F7FBE, gold #F3BA2A / #ffe69d, dark #181818 ========================================================================== */ :root { --rc-blue: #2C7CC0; --rc-blue-dark: #2566a0; --rc-gold: #F3BA2A; --rc-gold-soft: #ffe69d; --rc-dark: #181818; } /* NB: no html/body reset here — this file is also injected into the full on-site download page, so it must not restyle the host document. The embed iframe sets its own body styles inline in video_embed.html. */ /* Fills its container: the full-height inside the embed iframe, or the fixed-ratio box on the on-site download page. */ .rc-stage { position: relative; width: 100%; height: 100%; background: #000; overflow: hidden; } .rc-stage .video-js { width: 100% !important; height: 100% !important; font-family: 'Segoe UI', Roboto, sans-serif; background: #000; } /* ---- control bar accents ---- */ .vjs-control-bar { background: rgba(20, 20, 20, 0.78); } .vjs-play-progress { background: linear-gradient(90deg, var(--rc-gold-soft) 0%, #c5aa6a 100%); } .vjs-volume-level { background: var(--rc-gold-soft); } .vjs-big-play-button { border-radius: 3em !important; border: 2px solid #fff; background: rgba(0, 0, 0, 0.72); } .vjs-big-play-button:hover { color: var(--rc-blue); border-color: #fff; } .vjs-loading-spinner { border-color: var(--rc-blue); border-top-color: transparent; } /* ---- quality selector ---- */ .vjs-quality-selector .vjs-menu-button-inner::after, .vjs-quality-badge { content: 'HD'; font-size: 11px; color: var(--rc-gold-soft); } .vjs-quality-badge { min-width: 3em; line-height: 3em; text-align: center; font-weight: 600; } /* ---- persistent top bar ---- */ .rc-topbar { position: absolute; top: 0; left: 0; right: 0; z-index: 6; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0)); pointer-events: none; /* bar itself doesn't block the video */ } .rc-topbar { flex-wrap: wrap; } .rc-topbar--end { justify-content: flex-end; } .rc-topbar .rc-topbar-link, .rc-topbar .rc-preview-tag { pointer-events: auto; } .rc-topbar-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } /* icons inside buttons scale with the font-size; display:block + the parent's align-items:center keeps them centred on the text line (no baseline gap). */ .rc-ic { width: 1.3em; height: 1.3em; flex: none; display: block; } /* "Free preview" tag with live countdown — larger, no icon */ .rc-preview-tag { display: inline-flex; align-items: baseline; gap: 4px; padding: 11px 18px; border-radius: 6px; background: rgba(0, 0, 0, 0.58); color: #fff; font: 600 1.05rem/1 'Segoe UI', sans-serif; letter-spacing: 0.2px; } .rc-preview-time { font-variant-numeric: tabular-nums; color: var(--rc-gold-soft); font-weight: 700; } /* top-bar buttons ~1.5x larger */ .rc-topbar-link { display: inline-flex; align-items: center; gap: 9px; padding: 14px 28px; border-radius: 6px; font: 700 1.2rem/1 'Segoe UI', sans-serif; text-decoration: none; white-space: nowrap; transition: background 0.2s, color 0.2s; } /* Premium Pro — brand yellow */ .rc-pro { background: var(--rc-gold); color: #1a1a1a; box-shadow: 0 4px 18px rgba(243, 186, 42, 0.4); } .rc-pro:hover { background: #ffc94d; } /* Download — site blue */ .rc-download { background: var(--rc-blue); color: #fff; box-shadow: 0 3px 16px rgba(44, 124, 192, 0.35); } .rc-download:hover { background: var(--rc-blue-dark); } .rc-profile { background: rgba(255, 255, 255, 0.16); color: #fff; } .rc-profile:hover { background: rgba(255, 255, 255, 0.28); } @media (max-width: 640px) { .rc-topbar-link { padding: 10px 18px; font-size: 1rem; gap: 7px; } .rc-preview-tag { padding: 9px 13px; font-size: 0.9rem; } } /* ---- watermark ---- */ .rc-watermark { position: absolute; bottom: 50px; right: 14px; z-index: 5; color: rgba(255, 255, 255, 0.42); font: 600 12px/1 'Segoe UI', sans-serif; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); pointer-events: none; user-select: none; } /* ---- debug HUD (?rc_debug=1) ---- */ .rc-hud { position: absolute; left: 10px; bottom: 52px; z-index: 50; padding: 8px 10px; background: rgba(0, 0, 0, 0.72); color: #7CFC7C; font: 11px/1.5 ui-monospace, Menlo, Consolas, monospace; border: 1px solid rgba(124, 252, 124, 0.35); border-radius: 6px; cursor: pointer; user-select: none; white-space: nowrap; } .rc-hud b { color: #fff; } /* ---- premium overlay ---- */ .rc-overlay { position: absolute; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, 0.40); backdrop-filter: blur(3px); } .rc-card { position: relative; width: 100%; max-width: 460px; /* Deep navy card so it reads as a spotlight on the blue backdrop. */ background: linear-gradient(180deg, #16293f00 0%, #182137 100%); border-radius: 16px; box-shadow: 0 22px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(44, 124, 192, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.06); padding: 32px 28px; text-align: center; color: #fff; font-family: 'Montserrat', 'Segoe UI', sans-serif; overflow: hidden; } /* thin brand accent strip along the top of the card */ .rc-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--rc-blue), #6fb1e6, var(--rc-gold)); } .rc-logo { width: 210px; max-width: 78%; height: auto; margin-bottom: 20px; } .rc-card h2 { font-size: 1.4rem; font-weight: 700; line-height: 1.3; margin: 0 0 22px; } .rc-hl { color: var(--rc-gold); letter-spacing: 0.5px; } .rc-buttons { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; } /* Buttons match the site's front-office style: 6px radius, larger, blue. */ .rc-btn { flex: 1 1 auto; min-width: 168px; min-height: 52px; padding: 10px 24px; border: none; border-radius: 6px; font-size: 1.15rem; font-weight: 700; cursor: pointer; text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 10px; transition: background 0.2s, transform 0.05s; } .rc-btn:active { transform: translateY(1px); } /* Premium Pro — brand yellow */ .rc-btn-primary { background: var(--rc-gold); color: #1a1a1a; box-shadow: 0 4px 24px rgba(243, 186, 42, 0.4); } .rc-btn-primary:hover { background: #ffc94d; } .rc-btn-ghost { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, 0.35); } .rc-btn-ghost:hover { background: rgba(255, 255, 255, 0.12); } .rc-status { margin-top: 14px; min-height: 1em; font-size: 0.85rem; color: var(--rc-gold-soft); } @media (max-width: 480px) { .rc-card { padding: 22px 18px; } .rc-card h2 { font-size: 1.15rem; } .rc-btn { min-width: 120px; padding: 12px 14px; font-size: 0.88rem; } .rc-logo { width: 120px; } }