/*! * Guida TV — stili delle pagine palinsesto (template "Stasera in TV"). * * Caricato dal plugin solo sulle pagine che usano page_staseraintv.php. * Prima stava inline in fondo al template: ora è un file a sé, quindi * viene messo in cache dal browser e caricato nell' (niente * sfarfallio di layout). */ html { scroll-behavior: smooth; } /* Spazio per la toolbar fissa in basso */ .ta-guidatv-main { padding-bottom: 140px; } /* ===================================================================== Palinsesto (resta dentro il container dell'articolo) ================================================================== */ .ta-epg { margin-top: 28px; } .ta-epg-intro { font-size: 15px; } /* Indice canali: stesso ul indicizzato, vestito da chip */ .ta-epg-index { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .ta-epg-index li { margin: 0; } .ta-epg-index a { display: inline-block; border: 1px solid #e3e3e3; border-radius: 20px; padding: 5px 14px; font-size: 13px; text-decoration: none; background: #fff; color: #333; } .ta-epg-index a:hover { border-color: #999; } /* Titolo con la data del giorno, tra indice canali e card */ .ta-epg-heading { font-size: 24px; line-height: 1.25; margin: 28px 0 0; } /* Link "Palinsesto completo" in fondo alle card di oggi/domani */ .ta-epg-card-more { border-top: 1px solid #f2f2f2; padding: 10px 18px; font-size: 13px; font-weight: 600; } .ta-epg-card-more a { text-decoration: none; } /* Sottopagina canale: card singola a tutta larghezza */ .ta-epg-grid-single { grid-template-columns: 1fr !important; } .ta-epg-back { margin: 24px 0 0; font-size: 14px; } .ta-epg-channel-desc { font-size: 15px; margin: 14px 0 0; } /* Griglia di card ordinata per riga: Rai 1, Rai 2, Rai 3 / Rete 4, ... */ .ta-epg-grid { display: grid; grid-template-columns: 1fr; gap: 22px; align-items: start; margin-top: 26px; } @media (min-width: 768px) { .ta-epg-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1250px) { .ta-epg-grid { grid-template-columns: repeat(3, 1fr); } } .ta-epg-channel { background: #fff; border: 1px solid #ececec; border-radius: 14px; box-shadow: 0 2px 12px rgba(0, 0, 0, .05); margin: 0; overflow: hidden; } .ta-epg-card-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid #f2f2f2; border-top: 4px solid var(--ch, #455a64); background: #fff; } /* Offset ancore: allineato a menuOffset() nello script */ .ta-epg-card-head h3 { margin: 0; font-size: 19px; line-height: 1.2; scroll-margin-top: 126px; } @media (max-width: 991.98px) { .ta-epg-card-head h3 { scroll-margin-top: 96px; } } .ta-epg-dot { width: 34px; height: 34px; border-radius: 50%; background: var(--ch, #455a64); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex: 0 0 auto; } .ta-epg-events { padding: 6px 18px 14px; } .ta-epg-event { padding: 11px 0; border-bottom: 1px dashed #ececec; font-size: 14px; line-height: 1.5; } .ta-epg-event:last-child { border-bottom: none; } .ta-epg-event time { display: inline-block; background: #f1f3f5; border-radius: 6px; padding: 1px 8px; font-weight: 700; font-variant-numeric: tabular-nums; } .ta-epg-event strong { font-size: 15px; } .ta-epg-event.ta-epg-now { background: #f1f8e9; border-radius: 10px; padding: 11px 12px; border-bottom: none; border-left: 4px solid #43a047; } .ta-epg-badge { background: #43a047; color: #fff; border-radius: 4px; padding: 1px 7px; font-size: 11px; font-weight: 700; vertical-align: middle; white-space: nowrap; } .ta-epg-empty { color: #757575; font-style: italic; padding: 14px 18px; margin: 0; } /* ===================================================================== Toolbar canali: fissa in basso (desktop e mobile) ================================================================== */ .ta-epg-toolbar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 600; background: rgba(255, 255, 255, .97); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-top: 1px solid #ececec; box-shadow: 0 -4px 18px rgba(0, 0, 0, .08); padding: 4px 14px calc(4px + env(safe-area-inset-bottom)); } .ta-epg-toolbar-row { display: flex; gap: 8px; overflow-x: auto; padding: 5px 0; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .ta-epg-toolbar-row::-webkit-scrollbar { display: none; } .ta-epg-slot-pill { white-space: nowrap; border-radius: 18px; padding: 4px 14px; font-size: 13px; font-weight: 600; text-decoration: none; background: #f1f3f5; color: #333; flex: 0 0 auto; } .ta-epg-slot-pill.current { background: #212121; color: #fff; } .ta-epg-chip { display: inline-flex; align-items: center; gap: 7px; border: 1px solid #e3e3e3; border-radius: 20px; padding: 3px 12px 3px 4px; font-size: 13px; white-space: nowrap; background: #fff; color: #333; text-decoration: none; flex: 0 0 auto; } .ta-epg-chip .ta-epg-dot { width: 25px; height: 25px; font-size: 11px; } .ta-epg-chip.current { border-color: var(--ch, #455a64); box-shadow: inset 0 0 0 1px var(--ch, #455a64); } .ta-epg-chip.current .ta-epg-chip-name { font-weight: 700; } /* ===================================================================== Box streaming ================================================================== */ .ta-stream { margin-top: 34px; } .ta-stream-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; margin-bottom: 26px; } .ta-stream-card { background: #fff; border: 1px solid #ececec; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 10px rgba(0, 0, 0, .04); } .ta-stream-card img { width: 100%; height: auto; display: block; } .ta-stream-card-body { padding: 10px 12px 12px; } .ta-stream-card-body a { font-weight: 600; display: block; line-height: 1.3; font-size: 14px; text-decoration: none; } .ta-stream-meta { color: #757575; font-size: 12px; } /* --- Commenti Spot.IM (ereditato dal vecchio template) --- */ .spot-im-comments { display: flex; flex-direction: column; } .spot-im-comments>div[data-spot-im-module-default-area='conversation'] { display: flex; flex-direction: column; } .spot-im-comments>div[data-spot-im-module-default-area='conversation']>div[data-spot-im-module-default-area='conversation'] { order: 1; } .spot-im-comments div[data-popular-in-the-community] { order: 2; }