/* Theme: BeamMPRP Modern Author: TheYatkinss (design refresh prepared by assistant) Notes: - Uses ONLY existing assets from the repo (images/background/* and back.gif). - Drop-in: link this file after any old CSS to override styles, or replace old link with this. - Supports light/dark (auto via prefers-color-scheme) + manual .theme-dark on or overrides. */ /* ---------- CSS Variables ---------- */ :root { --bg: #0c0f14; --bg-soft: #121722; --card: #161b26; --elev: #0a0d12; --text: #e8eef7; --muted: #a9b4c4; --primary: #5aa2ff; --primary-700: #2e7ff4; --accent: #7af0d2; --danger: #ff6b6b; --warning: #ffb020; --success: #44d19a; --ring: rgba(90, 162, 255, 0.5); --border: rgba(255, 255, 255, 0.06); --shadow: 0 10px 25px rgba(0,0,0,0.35); --radius: 16px; --radius-sm: 12px; --radius-lg: 22px; --gap: 14px; --gap-lg: 24px; --maxw: 1200px; --transition: 220ms cubic-bezier(.2,.7,.2,1); } @media (prefers-color-scheme: light) { :root { --bg: #f6f8fb; --bg-soft: #ffffff; --card: #ffffff; --elev: #f1f4f9; --text: #0b1220; --muted: #4b5565; --primary: #2563eb; --primary-700: #1d4ed8; --accent: #06b6d4; --ring: rgba(37, 99, 235, 0.35); --border: rgba(10, 15, 30, 0.08); } } /* Manual dark override */ .theme-dark { --bg: #0c0f14; --bg-soft: #121722; --card: #161b26; --elev: #0a0d12; --text: #e8eef7; --muted: #a9b4c4; --primary: #5aa2ff; --primary-700: #2e7ff4; --accent: #7af0d2; --ring: rgba(90, 162, 255, 0.5); --border: rgba(255, 255, 255, 0.06); } /* ---------- Global Reset & Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji", "Segoe UI Emoji"; background: var(--bg); color: var(--text); line-height: 1.55; } /* Subtle global background texture using existing back.gif (if present) */ body::before { content: ""; position: fixed; inset: 0; opacity: .08; pointer-events: none; z-index: -2; } /* ---------- Background Slideshow (CSS-only, no new assets) ---------- */ /* Add this HTML somewhere near the top of : */ .bg-slides { position: fixed; inset: 0; z-index: -3; overflow: hidden; filter: saturate(1.05) contrast(1.02) brightness(.95); } /* We layer 9 slides using multiple backgrounds via :before/:after + children injected by PHP if desired. For a zero-HTML-change fallback we use two pseudo-layers that crossfade through 9 steps each. */ .bg-slides::before, .bg-slides::after { content: ""; position: absolute; inset: 0; background-size: cover; background-position: center; animation: slideA 72s infinite steps(1, end); opacity: .8; transition: opacity var(--transition); } .bg-slides::after { animation: slideB 72s infinite steps(1, end); mix-blend-mode: overlay; opacity: .35; } @keyframes slideA { 0% { background-image: url("images/background/1.png"); } 11% { background-image: url("images/background/2.png"); } 22% { background-image: url("images/background/3.png"); } 33% { background-image: url("images/background/4.png"); } 44% { background-image: url("images/background/5.png"); } 55% { background-image: url("images/background/6.png"); } 66% { background-image: url("images/background/7.png"); } 77% { background-image: url("images/background/8.png"); } 88% { background-image: url("images/background/9.png"); } 100% { background-image: url("images/background/1.png"); } } @keyframes slideB { 0% { background-image: url("images/background/9.png"); } 11% { background-image: url("images/background/1.png"); } 22% { background-image: url("images/background/2.png"); } 33% { background-image: url("images/background/3.png"); } 44% { background-image: url("images/background/4.png"); } 55% { background-image: url("images/background/5.png"); } 66% { background-image: url("images/background/6.png"); } 77% { background-image: url("images/background/7.png"); } 88% { background-image: url("images/background/8.png"); } 100% { background-image: url("images/background/9.png"); } } /* ---------- Containers & Layout ---------- */ .container { width: min(100% - 32px, var(--maxw)); margin-inline: auto; } .section { padding: clamp(28px, 4vw, 56px) 0; } .grid { display: grid; gap: var(--gap-lg); } .grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 1100px) { .grid.cols-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 720px) { .grid.cols-3, .grid.cols-2, .grid.cols-4 { grid-template-columns: 1fr; } } /* ---------- Card ---------- */ .card { background: linear-gradient(180deg, var(--card), var(--bg-soft)); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: clamp(16px, 2vw, 24px); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition); } .card:hover { transform: translateY(-2px); border-color: rgba(122, 240, 210, 0.25); box-shadow: 0 12px 35px rgba(0, 0, 0, 0.45); } /* ---------- Header / Nav ---------- */ .header { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--bg) 80%, transparent); } .nav { display: flex; align-items: center; justify-content: space-between; gap: var(--gap); padding: 12px 16px; } .nav .brand { display: flex; align-items: center; gap: 12px; font-weight: 700; letter-spacing: 0.4px; } .nav .brand img { height: 32px; width: auto; border-radius: 8px; } .nav .links { display: flex; gap: 8px; flex-wrap: wrap; } .nav a, .nav button.link { text-decoration: none; color: var(--text); padding: 10px 14px; border-radius: 999px; border: 1px solid transparent; transition: background var(--transition), border-color var(--transition), transform var(--transition); } .nav a:hover, .nav button.link:hover { background: color-mix(in srgb, var(--card) 60%, transparent); border-color: var(--border); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 42px; padding: 0 16px; border-radius: 12px; border: 1px solid transparent; background: linear-gradient(180deg, var(--primary), var(--primary-700)); color: white; font-weight: 600; letter-spacing: .2px; cursor: pointer; transition: transform var(--transition), filter var(--transition), box-shadow var(--transition); box-shadow: 0 6px 20px rgba(46, 127, 244, .35); } .btn:hover { transform: translateY(-1px); filter: brightness(1.05); } .btn:active { transform: translateY(0); filter: brightness(.97); } .btn-outline { background: transparent; border-color: var(--border); color: var(--text); box-shadow: none; } .btn-outline:hover { border-color: var(--primary); color: var(--primary); } /* ---------- Inputs & Forms ---------- */ .input, input[type="text"], input[type="password"], input[type="email"], input[type="number"], select, textarea { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); background: color-mix(in srgb, var(--bg-soft) 85%, transparent); color: var(--text); outline: none; transition: border-color var(--transition), box-shadow var(--transition), background var(--transition); } .input::placeholder, textarea::placeholder { color: color-mix(in srgb, var(--muted) 60%, transparent); } .input:focus, input:focus, select:focus, textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 6px var(--ring); } /* Toggle switch (for dark/light or features) */ .switch { position: relative; width: 52px; height: 28px; } .switch input { display: none; } .switch .track { position: absolute; inset: 0; background: color-mix(in srgb, var(--muted) 25%, transparent); border: 1px solid var(--border); border-radius: 999px; transition: background var(--transition); } .switch .thumb { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow); transition: transform var(--transition), background var(--transition); } .switch input:checked + .track { background: color-mix(in srgb, var(--primary) 35%, transparent); } .switch input:checked ~ .thumb { transform: translateX(24px); background: var(--primary); } /* ---------- Tables ---------- */ .table { width: 100%; border-collapse: collapse; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--border); box-shadow: var(--shadow); background: var(--card); } .table th, .table td { padding: 12px 14px; border-bottom: 1px solid var(--border); text-align: left; } .table th { font-weight: 700; color: var(--muted); background: color-mix(in srgb, var(--elev) 70%, transparent); } .table tr:hover td { background: color-mix(in srgb, var(--card) 70%, transparent); } /* ---------- Badges ---------- */ .badge { display: inline-block; padding: 6px 10px; border-radius: 999px; font-size: 12px; border: 1px solid var(--border); background: color-mix(in srgb, var(--card) 70%, transparent); } .badge.success { color: var(--success); border-color: color-mix(in srgb, var(--success) 50%, var(--border)); } .badge.warn { color: var(--warning); border-color: color-mix(in srgb, var(--warning) 50%, var(--border)); } .badge.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 50%, var(--border)); } /* ---------- Cards: vehicle & character thumbnails ---------- */ .card.thumb { display: flex; flex-direction: column; gap: 12px; } .thumb .media { position: relative; width: 100%; aspect-ratio: 2 / 1; overflow: hidden; border-radius: var(--radius-sm); background: #0b0b0b; } .thumb .media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform var(--transition), filter var(--transition); filter: saturate(1.05) contrast(1.05); } .thumb:hover .media img { transform: scale(1.06); } .thumb .title { font-weight: 700; letter-spacing: .2px; } .thumb .meta { color: var(--muted); font-size: 14px; } /* ---------- Hero / Trailer section ---------- */ .hero { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); background: linear-gradient(180deg, color-mix(in srgb, var(--elev) 85%, transparent), color-mix(in srgb, var(--card) 85%, transparent)); box-shadow: var(--shadow); } .hero .content { position: absolute; inset: 0; display: grid; place-items: center; padding: clamp(16px, 4vw, 48px); background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.25)); text-align: center; } .hero h1 { font-size: clamp(28px, 6vw, 56px); margin: 0 0 10px 0; } .hero p { color: var(--muted); margin: 0 0 20px 0; } .hero .actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; } /* Video player wrapper */ .video-frame { position: relative; width: 100%; aspect-ratio: 16/9; background: #000; border-bottom: 1px solid var(--border); } /* ---------- Footer ---------- */ .footer { margin-top: 40px; padding: 18px; border-top: 1px solid var(--border); color: var(--muted); text-align: center; background: color-mix(in srgb, var(--bg) 80%, transparent); } /* ---------- Loading Overlay with Blur ---------- */ #loading-screen { position: fixed; inset: 0; background: rgba(5, 8, 13, 0.65); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: grid; place-items: center; z-index: 9999; transition: opacity var(--transition), visibility var(--transition); } #loading-screen.hidden { opacity: 0; visibility: hidden; } .loader { width: 64px; height: 64px; border-radius: 50%; border: 6px solid color-mix(in srgb, var(--muted) 25%, transparent); border-top-color: var(--primary); animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ---------- Utilities ---------- */ .center { display: grid; place-items: center; } .stack { display: flex; flex-direction: column; gap: var(--gap); } .row { display: flex; align-items: center; gap: var(--gap); flex-wrap: wrap; } .hidden { display: none !important; } .muted { color: var(--muted); } .mt { margin-top: 16px; } .mb { margin-bottom: 16px; } .mx-auto { margin-inline: auto; } .round { border-radius: var(--radius); overflow: hidden; } .shadow { box-shadow: var(--shadow); } /* ---------- Login Panel ---------- */ .login-panel { width: min(480px, 100%); padding: clamp(18px, 3vw, 28px); border: 1px solid var(--border); border-radius: var(--radius); background: linear-gradient(180deg, var(--card), var(--bg-soft)); box-shadow: var(--shadow); } .login-panel h2 { margin: 0 0 8px 0; } .login-panel .subtitle { color: var(--muted); margin-bottom: 16px; font-size: 14px; } .login-panel .actions { display: flex; gap: 10px; justify-content: flex-end; } /* ---------- Alerts ---------- */ .alert { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); background: color-mix(in srgb, var(--card) 80%, transparent); } .alert.info { border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); } .alert.success { border-color: color-mix(in srgb, var(--success) 40%, var(--border)); } .alert.warn { border-color: color-mix(in srgb, var(--warning) 40%, var(--border)); } .alert.error { border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); } /* ---------- Chips / Pills ---------- */ .pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 999px; background: color-mix(in srgb, var(--elev) 70%, transparent); border: 1px solid var(--border); font-size: 13px; } /* ---------- Links ---------- */ a { color: var(--primary); text-decoration: none; } a:hover { text-decoration: underline; } /* ---------- Images ---------- */ img { max-width: 100%; height: auto; display: block; } .logo { height: 40px; width: auto; } /* ---------- Modal (if used) ---------- */ .modal { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.5); z-index: 60; padding: 20px; } .modal .dialog { width: min(560px, 100%); border-radius: var(--radius); background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow); padding: 18px; }