/* |-------------------------------------------------------------------------- | ORION THEMES |-------------------------------------------------------------------------- | CSS centrale per: | - Classic | - Nebula | - Cinematic | | PRIMA FASE: | Questo file centralizza colori e regole comuni. | Non modifica né sostituisce il CSS esistente delle singole pagine. |-------------------------------------------------------------------------- */ /* ========================================================================== 1. VARIABILI ORION ========================================================================== */ :root { /* Nebula */ --orion-nebula-blue: #00d9ff; --orion-nebula-purple: #8b5cf6; --orion-nebula-green: #00ff88; /* Cinematic */ --orion-cinematic-blue: #00b7ff; --orion-cinematic-green: #00e676; --orion-cinematic-pink: #ff2bd6; --orion-cinematic-red: #ff4d6d; --orion-cinematic-purple: #8b5cff; --orion-cinematic-yellow: #ffd740; --orion-cinematic-orange: #ff8a65; --orion-cinematic-cyan: #67e8f9; --orion-cinematic-lavender: #a78bfa; /* Header */ --orion-header-height: 70px; /* Sidebar */ --orion-sidebar-closed: 68px; --orion-sidebar-open: 240px; } /* ========================================================================== 2. COLORI NAVIGAZIONE ========================================================================== */ /* | Ordine menu: | 1 Home | 2 Live | 3 Film | 4 Serie | 5 Preferiti | 6 Guida TV | 7 Sync | 8 EPG | 9 Impostazioni */ /* ========================================================================== 3. SIDEBAR CINEMATIC ========================================================================== */ /* HOME */ body.orion-cinematic .orion-cinematic-sidebar-nav a:nth-child(1) i { color: var(--orion-cinematic-blue) !important; } /* LIVE */ body.orion-cinematic .orion-cinematic-sidebar-nav a:nth-child(2) i { color: var(--orion-cinematic-green) !important; } /* FILM */ body.orion-cinematic .orion-cinematic-sidebar-nav a:nth-child(3) i { color: var(--orion-cinematic-red) !important; } /* SERIE */ body.orion-cinematic .orion-cinematic-sidebar-nav a:nth-child(4) i { color: var(--orion-cinematic-purple) !important; } /* PREFERITI */ body.orion-cinematic .orion-cinematic-sidebar-nav a:nth-child(5) i { color: var(--orion-cinematic-yellow) !important; } /* GUIDA TV */ body.orion-cinematic .orion-cinematic-sidebar-nav a:nth-child(6) i { color: var(--orion-cinematic-green) !important; } /* SYNC */ body.orion-cinematic .orion-cinematic-sidebar-nav a:nth-child(7) i { color: var(--orion-cinematic-orange) !important; } /* AGGIORNA EPG */ body.orion-cinematic .orion-cinematic-sidebar-nav a:nth-child(8) i { color: var(--orion-cinematic-cyan) !important; } /* IMPOSTAZIONI */ body.orion-cinematic .orion-cinematic-sidebar-nav a:nth-child(9) i { color: var(--orion-cinematic-lavender) !important; } /* ========================================================================== 4. SIDEBAR CINEMATIC — BASE COMUNE ========================================================================== */ body.orion-cinematic .orion-cinematic-sidebar { width: var(--orion-sidebar-closed); min-width: var(--orion-sidebar-closed); } body.orion-cinematic .orion-cinematic-sidebar:hover { width: var(--orion-sidebar-open); } /* Icone sidebar */ body.orion-cinematic .orion-cinematic-sidebar-nav a i { font-size: 17px; } /* Testo sidebar */ body.orion-cinematic .orion-cinematic-sidebar-nav a span { font-size: 13px; font-weight: 700; } /* Hover */ body.orion-cinematic .orion-cinematic-sidebar-nav a:hover { background: rgba(255,255,255,.07); color: #fff; } /* ========================================================================== 5. ACTIVE SIDEBAR ========================================================================== */ body.orion-cinematic .orion-cinematic-sidebar-nav a.active { color: #fff; } /* Indicatore active */ body.orion-cinematic .orion-cinematic-sidebar-nav a:nth-child(1).active::before { background: var(--orion-cinematic-blue); } body.orion-cinematic .orion-cinematic-sidebar-nav a:nth-child(2).active::before { background: var(--orion-cinematic-green); } body.orion-cinematic .orion-cinematic-sidebar-nav a:nth-child(3).active::before { background: var(--orion-cinematic-red); } body.orion-cinematic .orion-cinematic-sidebar-nav a:nth-child(4).active::before { background: var(--orion-cinematic-purple); } body.orion-cinematic .orion-cinematic-sidebar-nav a:nth-child(5).active::before { background: var(--orion-cinematic-yellow); } /* ========================================================================== 6. MENU SUPERIORE — CINEMATIC ========================================================================== */ body.orion-cinematic header .orion-main-nav { display: flex; align-items: center; justify-content: flex-end; gap: 6px; } /* Voci */ body.orion-cinematic header .orion-main-nav a { display: inline-flex; align-items: center; justify-content: center; height: 42px; min-height: 42px; padding: 0 13px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: rgba(255,255,255,.72); font-size: 13px; font-weight: 700; line-height: 1; text-decoration: none; white-space: nowrap; transition: background .2s ease, color .2s ease, border-color .2s ease; } /* Icone */ body.orion-cinematic header .orion-main-nav a i { display: inline-block; margin-right: 7px; font-size: 14px; } /* Hover */ body.orion-cinematic header .orion-main-nav a:hover { color: #fff; background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.08); } /* ========================================================================== 7. MENU SUPERIORE — STESSI COLORI DELLA SIDEBAR ========================================================================== */ /* | 1 HOME = BLU | 2 LIVE = VERDE | 3 FILM = ROSSO | 4 SERIE = VIOLA | 5 PREFERITI = GIALLO | 6 GUIDA TV = VERDE | 7 SYNC = ARANCIO | 8 AGGIORNA EPG = CIANO | 9 IMPOSTAZIONI = LAVENDER */ /* HOME */ body.orion-cinematic header .orion-main-nav a.orion-menu-home i { color: var(--orion-cinematic-blue) !important; text-shadow: 0 0 8px rgba(0,183,255,.55) !important; } /* LIVE */ body.orion-cinematic header .orion-main-nav a.orion-menu-live i { color: var(--orion-cinematic-green) !important; text-shadow: 0 0 8px rgba(0,230,118,.55) !important; } /* FILM */ body.orion-cinematic header .orion-main-nav a.orion-menu-film i { color: var(--orion-cinematic-red) !important; text-shadow: 0 0 8px rgba(255,77,109,.55) !important; } /* SERIE */ body.orion-cinematic header .orion-main-nav a.orion-menu-series i { color: var(--orion-cinematic-purple) !important; text-shadow: 0 0 8px rgba(139,92,255,.55) !important; } /* PREFERITI */ body.orion-cinematic header .orion-main-nav a.orion-menu-favorites i { color: var(--orion-cinematic-yellow) !important; text-shadow: 0 0 8px rgba(255,215,64,.55) !important; } /* GUIDA TV */ body.orion-cinematic header .orion-main-nav a.orion-menu-guide i { color: var(--orion-cinematic-green) !important; text-shadow: 0 0 8px rgba(0,230,118,.55) !important; } /* SYNC */ body.orion-cinematic header .orion-main-nav a.orion-menu-sync i { color: var(--orion-cinematic-orange) !important; text-shadow: 0 0 8px rgba(255,138,101,.55) !important; } /* AGGIORNA EPG */ body.orion-cinematic header .orion-main-nav a.orion-menu-epg i { color: var(--orion-cinematic-cyan) !important; text-shadow: 0 0 8px rgba(103,232,249,.55) !important; } /* IMPOSTAZIONI */ body.orion-cinematic header .orion-main-nav a.orion-menu-settings i { color: var(--orion-cinematic-lavender) !important; text-shadow: 0 0 8px rgba(167,139,250,.55) !important; } /* ========================================================================== 8. TITOLI PAGINA ========================================================================== */ body.orion-cinematic .orion-page-title { font-size: 28px; line-height: 1.2; font-weight: 800; margin: 0; } /* ========================================================================== 9. NEBULA ========================================================================== */ body.orion-nebula { --orion-theme-primary: var(--orion-nebula-blue); --orion-theme-secondary: var(--orion-nebula-purple); --orion-theme-accent: var(--orion-nebula-green); } /* ========================================================================== 10. CLASSIC ========================================================================== */ body.orion-classic { --orion-theme-primary: #2563eb; --orion-theme-secondary: #7c3aed; --orion-theme-accent: #16a34a; } /* ========================================================================== 11. CINEMATIC ========================================================================== */ body.orion-cinematic { --orion-theme-primary: var(--orion-cinematic-blue); --orion-theme-secondary: var(--orion-cinematic-purple); --orion-theme-accent: var(--orion-cinematic-green); } /* ========================================================================== 12. RESPONSIVE ========================================================================== */ @media (max-width: 900px) { body.orion-cinematic header .orion-main-nav a { padding-left: 8px; padding-right: 8px; } body.orion-cinematic header .orion-main-nav a i { margin-right: 5px; } body.orion-cinematic .orion-page-title { font-size: 24px; } } /* ========================================================================== 13. TITOLI CINEMATIC — LIVE ========================================================================== */ body.orion-cinematic .live-page .live-page-header h1 { color: var(--orion-cinematic-green) !important; } body.orion-cinematic .live-page .live-page-header h1 i, body.orion-cinematic .live-page .live-page-header h1 span, body.orion-cinematic .live-page .live-page-header h1 strong { color: var(--orion-cinematic-green) !important; } /* ========================================================================== 14. FOOTER — CINEMATIC ========================================================================== */ /* | Il footer viene mantenuto nel layout per tutte le pagine. | Qui viene trasformato nello stesso stile del footer Cinematic della Home. | | IMPORTANTE: | - Classic non viene modificato | - Home Cinematic non viene modificata | - Live / Film / Serie / Preferiti / Guida TV / Sync / EPG / Impostazioni | ricevono lo stesso stile Cinematic */ body.orion-cinematic footer { position: relative; margin-top: 70px; padding: 35px 20px; text-align: center; background: linear-gradient( 180deg, rgba(0,183,255,.04), rgba(8,15,32,.85) 35%, rgba(2,6,23,1) ); border-top: 1px solid rgba(0,183,255,.18); box-shadow: 0 -15px 45px rgba(0,183,255,.08), inset 0 1px 0 rgba(139,92,255,.12); } /* -------------------------------------------------------------------------- LINEA ENERGETICA -------------------------------------------------------------------------- */ body.orion-cinematic footer::before { content: ""; position: absolute; top: -2px; left: 50%; width: 320px; height: 3px; transform: translateX(-50%); background: linear-gradient( 90deg, transparent, var(--orion-cinematic-blue) 20%, var(--orion-cinematic-purple) 50%, var(--orion-cinematic-blue) 80%, transparent ); box-shadow: 0 0 8px var(--orion-cinematic-blue), 0 0 22px rgba(0,183,255,.65), 0 0 45px rgba(139,92,255,.35); } /* -------------------------------------------------------------------------- BAGLIORE CENTRALE -------------------------------------------------------------------------- */ body.orion-cinematic footer::after { content: ""; position: absolute; top: -30px; left: 50%; width: 420px; height: 70px; transform: translateX(-50%); background: radial-gradient( ellipse, rgba(0,183,255,.16), transparent 70% ); pointer-events: none; } /* -------------------------------------------------------------------------- TESTO -------------------------------------------------------------------------- */ body.orion-cinematic footer p { position: relative; z-index: 2; margin: 0; color: var(--orion-cinematic-cyan); font-size: 13px; font-weight: 800; letter-spacing: 4px; text-transform: uppercase; text-shadow: 0 0 8px rgba(0,183,255,.55), 0 0 20px rgba(0,183,255,.25); transition: color .25s ease, text-shadow .25s ease; } /* -------------------------------------------------------------------------- HOVER -------------------------------------------------------------------------- */ body.orion-cinematic footer:hover p { color: #ffffff; text-shadow: 0 0 8px var(--orion-cinematic-blue), 0 0 18px var(--orion-cinematic-blue), 0 0 35px rgba(139,92,255,.8); }