/** * Il Tifoso Reggino - Modalita' app (PWA) * * Caricato SOLO quando il sito e' aperto come app installata (o in anteprima * dallo staff). Il viene stampato da inc/pwa.php con * media="(display-mode: standalone)...": in questo modo il browser lo scopre * subito e lo applica prima del primo disegno dentro l'app, mentre per il * visitatore normale resta un foglio che non corrisponde, scaricato a bassa * priorita' e senza mai bloccare nulla. * * Ogni regola e' figlia di .tifoso-app: nulla puo' sfuggire sul sito pubblico. */ .tifoso-app { /* Il tema usa --header-height per il padding di .site-content: cambiandola qui la barra dell'app prende il posto dell'header del sito. */ --header-height: 56px; --tifoso-app-bar: 56px; --tifoso-app-nav: 60px; --tifoso-app-safe-top: env(safe-area-inset-top, 0px); /* Sull'iPhone l'inset vale 34px, ma lasciarli tutti sotto le etichette fa sembrare la barra staccata dal fondo: se ne tolgono 10, restano ~24px di margine dalla barra home. Dove l'inset e' zero il minimo e' 8px. */ --tifoso-app-safe-bottom: max(calc(env(safe-area-inset-bottom, 0px) - 10px), 8px); /* Tirando la pagina verso il basso iOS scopre lo sfondo di : in amaranto lo strappo elastico continua la barra invece di lampeggiare bianco. Il fondo del contenuto resta bianco perche' lo dipinge . */ background: #8B0000; -webkit-tap-highlight-color: transparent; overscroll-behavior-y: contain; /* Niente ingrandimento col doppio tocco (lo scorrimento resta normale) e niente ingrossamento automatico del testo quando si ruota il telefono. */ touch-action: manipulation; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--tifoso-app-bar) + var(--tifoso-app-safe-top) + 8px); } /* ========================================================================== Via l'impalcatura da "sito" ========================================================================== */ .tifoso-app .site-header, .tifoso-app .site-footer, .tifoso-app .floating-search-btn, .tifoso-app .skip-link { display: none !important; } /* Lo spazio delle due barre e' riservato dal CSS, non dal JavaScript: il contenuto puo' cosi' essere disegnato subito, nella posizione definitiva, senza aspettare che la struttura dell'app venga costruita. */ .tifoso-app body { /* Il bianco deve coprire tutto lo schermo anche sulle pagine corte: altrimenti sotto il contenuto si vedrebbe l'amaranto di , che deve comparire soltanto quando si tira la pagina oltre il bordo. */ background: #fff; min-height: 100vh; padding-bottom: calc(var(--tifoso-app-nav) + var(--tifoso-app-safe-bottom)); } .tifoso-app .site-content { min-height: auto; padding-top: calc(var(--tifoso-app-bar) + var(--tifoso-app-safe-top)); } /* ========================================================================== Barra superiore ========================================================================== */ .tifoso-app-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 9990; display: flex; align-items: center; gap: 4px; height: calc(var(--tifoso-app-bar) + var(--tifoso-app-safe-top)); padding: var(--tifoso-app-safe-top) 6px 0; background: linear-gradient(135deg, #8B0000, #6B0000); color: #fff; box-shadow: 0 2px 12px rgba(0, 0, 0, .22); user-select: none; -webkit-user-select: none; } /* Finche' il JavaScript non l'ha costruita, la barra e' comunque disegnata come fascia piena: nessuno sfarfallio, nessun salto del contenuto. */ .tifoso-app::before { content: ''; position: fixed; top: 0; left: 0; right: 0; height: calc(var(--tifoso-app-bar) + var(--tifoso-app-safe-top)); background: linear-gradient(135deg, #8B0000, #6B0000); z-index: 9989; } .tifoso-app-bar__btn { flex: 0 0 auto; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: 0; padding: 0; background: transparent; color: inherit; border-radius: 50%; cursor: pointer; } .tifoso-app-bar__btn:active { background: rgba(255, 255, 255, .18); } /* Aspetto del tratto per tutte le icone dell'app: sta qui e non dentro ogni SVG, cosi' i disegni restano corti nell'HTML. */ .tifoso-app-bar svg, .tifoso-app-nav svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .tifoso-app-bar__btn svg { width: 22px; height: 22px; } .tifoso-app-bar__brand { flex: 1 1 auto; display: flex; align-items: center; gap: 9px; min-width: 0; color: inherit; text-decoration: none; padding-left: 4px; } .tifoso-app-bar__brand img { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 50%; background: #fff; } .tifoso-app-bar__title { font-family: 'Oswald', 'Arial Narrow', sans-serif; font-size: 1.02rem; font-weight: 600; letter-spacing: .3px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ========================================================================== Barra di avanzamento In un'app non c'e' la barra di caricamento del browser: senza un segnale, il tocco su un link sembra non aver fatto niente. ========================================================================== */ .tifoso-app-progress { position: fixed; top: calc(var(--tifoso-app-bar) + var(--tifoso-app-safe-top)); left: 0; height: 3px; width: 0; z-index: 9995; background: linear-gradient(90deg, #FFD166, #fff); box-shadow: 0 0 8px rgba(255, 209, 102, .8); opacity: 0; } .tifoso-app-progress.is-loading { opacity: 1; animation: tifoso-app-progress 8s cubic-bezier(.1, .9, .2, 1) forwards; } @keyframes tifoso-app-progress { 0% { width: 0; } 30% { width: 55%; } 70% { width: 82%; } 100% { width: 94%; } } /* ========================================================================== Animazione di attesa La barra sottile basta per un caricamento breve; quando il server ci mette davvero (uno scraping lento, la rete che arranca) senza altro segnale l'app sembra bloccata. Compare dopo un terzo di secondo, per non lampeggiare a ogni tocco. La rotazione del cerchio la fa il JavaScript (app-shell.js), cosi' gira anche se questo foglio di stile non e' stato caricato. ========================================================================== */ .tifoso-app-loader { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 9994; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 22px 26px; border-radius: 18px; background: rgba(17, 17, 17, .82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: #fff; font-size: 13px; font-weight: 600; letter-spacing: .2px; opacity: 0; animation: tifoso-app-loader-in .18s ease .05s forwards; pointer-events: none; } .tifoso-app-loader__ring { width: 34px; height: 34px; border: 3px solid rgba(255, 255, 255, .25); border-top-color: #fff; border-radius: 50%; } @keyframes tifoso-app-loader-in { to { opacity: 1; } } /* ========================================================================== Menu del sito come cassetto dell'app Le voci restano quelle di WordPress: qui cambia solo dove si apre, cioe' fra la barra superiore e quella inferiore, senza coprirle. ========================================================================== */ .tifoso-app #mobile-menu { top: calc(var(--tifoso-app-bar) + var(--tifoso-app-safe-top)); /* Alto quanto le voci, non quanto lo schermo: un pannello bianco vuoto sembrerebbe una pagina caricata male, e cosi' resta visibile il velo su cui toccare per chiudere. */ bottom: auto; max-height: calc(100vh - var(--tifoso-app-bar) - var(--tifoso-app-safe-top) - var(--tifoso-app-nav) - var(--tifoso-app-safe-bottom)); border-radius: 0 0 18px 18px; z-index: 9993; padding: 8px 20px 24px; border-bottom: 0; box-shadow: 0 18px 40px rgba(0, 0, 0, .28); animation: tifoso-app-drawer .18s ease both; } @keyframes tifoso-app-drawer { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } } /* Velo sul contenuto mentre il cassetto e' aperto. */ .tifoso-app-scrim { position: fixed; inset: 0; z-index: 9992; background: rgba(0, 0, 0, .35); } /* ========================================================================== Richiamo al campanello Un alone che pulsa e, la prima volta, un fumetto: senza, nessuno scopre che quel pulsante attiva le notifiche. ========================================================================== */ .tifoso-app-bar__btn.is-calling { position: relative; animation: tifoso-app-bell 2.6s ease-in-out 3; } .tifoso-app-bar__btn.is-calling::after { content: ''; position: absolute; top: 7px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: #FFD166; box-shadow: 0 0 0 2px rgba(139, 0, 0, .9); } @keyframes tifoso-app-bell { 0%, 70%, 100% { transform: rotate(0); } 74% { transform: rotate(-14deg); } 78% { transform: rotate(12deg); } 82% { transform: rotate(-8deg); } 86% { transform: rotate(6deg); } 90% { transform: rotate(0); } } .tifoso-app-hint { position: fixed; top: calc(var(--tifoso-app-bar) + var(--tifoso-app-safe-top) + 8px); right: 12px; z-index: 9994; max-width: 230px; padding: 12px 14px; border-radius: 14px; background: #1F2937; color: #fff; box-shadow: 0 12px 30px rgba(0, 0, 0, .35); font-size: .82rem; line-height: 1.35; cursor: pointer; animation: tifoso-app-hint-in .25s ease both; } .tifoso-app-hint strong { display: block; margin-bottom: 2px; } .tifoso-app-hint span { opacity: .8; } /* Punta al campanello, che sta sopra a destra. */ .tifoso-app-hint::before { content: ''; position: absolute; top: -6px; right: 46px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 7px solid #1F2937; } .tifoso-app-hint.is-leaving { opacity: 0; transition: opacity .35s ease; } @keyframes tifoso-app-hint-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } } /* ========================================================================== Pannello notifiche / diagnostica Dentro un'app installata non c'e' console e non si puo' aprire un indirizzo a mano: questo e' l'unico posto in cui un problema si puo' leggere. ========================================================================== */ .tifoso-app-panel { position: fixed; inset: 0; z-index: 9996; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(0, 0, 0, .55); } .tifoso-app-panel__box { width: 100%; max-width: 380px; max-height: 80vh; overflow-y: auto; padding: 22px; border-radius: 18px; background: #fff; color: #1F2937; box-shadow: 0 24px 60px rgba(0, 0, 0, .4); } .tifoso-app-panel__box h2 { margin: 0 0 14px; font-size: 1.15rem; color: #8B0000; } .tifoso-app-panel dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: .86rem; } .tifoso-app-panel dt { font-weight: 700; color: #6B7280; } .tifoso-app-panel dd { margin: 0; word-break: break-word; } /* Riquadro di conferma delle notifiche: testo, non tabella tecnica. */ .tifoso-app-panel__msg { font-size: .9rem; line-height: 1.45; } .tifoso-app-panel__msg p { margin: 0 0 8px; } .tifoso-app-panel__msg p:last-child { margin-bottom: 0; } .tifoso-app-panel__ok { font-weight: 700; color: #15803d; } .tifoso-app-panel__ok::before { content: '✓ '; } .tifoso-app-panel__hint { font-size: .78rem; color: #6B7280; } .tifoso-app-panel__err { color: #991b1b; font-weight: 600; } .tifoso-app-panel__actions { display: flex; gap: 8px; margin-top: 18px; } .tifoso-app-panel__btn { flex: 1 1 0; padding: 12px 10px; border: 0; border-radius: 999px; background: #8B0000; color: #fff; font-family: inherit; font-size: .9rem; font-weight: 700; cursor: pointer; } .tifoso-app-panel__btn--ghost { background: #F3F4F6; color: #6B7280; } /* ========================================================================== Strisce di stato (offline, anteprima) ========================================================================== */ .tifoso-app-strip { position: fixed; left: 0; right: 0; bottom: calc(var(--tifoso-app-nav) + var(--tifoso-app-safe-bottom)); z-index: 9992; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 7px 12px; font-size: 12px; font-weight: 700; } .tifoso-app-strip--preview { background: #FEF3C7; color: #92400E; } .tifoso-app-strip--offline { background: #1F2937; color: #fff; } .tifoso-app-strip a { color: inherit; text-decoration: underline; } /* ========================================================================== Barra di navigazione in basso ========================================================================== */ .tifoso-app-nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 9991; display: flex; align-items: stretch; /* Fondo pieno e senza sfocatura. Il backdrop-filter qui non si vedeva comunque - dietro c'e' la fascia bianca di .tifoso-app::after, quindi sfocava del bianco su del bianco - ma obbligava iOS a ridisegnare una superficie fissa a tutta larghezza a ogni fotogramma di scorrimento: era quello a far "ballare" la barra. */ background: #fff; border-top: 1px solid #E5E7EB; padding-bottom: var(--tifoso-app-safe-bottom); user-select: none; -webkit-user-select: none; /* Livello proprio: cosi' resta incollata al bordo durante lo scorrimento per inerzia, invece di inseguire il contenuto di qualche pixel. */ transform: translateZ(0); } .tifoso-app-nav__item { position: relative; flex: 1 1 0; display: flex; flex-direction: column; align-items: center; /* Ancorate in alto e non centrate: cosi' le icone restano tutte sulla stessa linea anche quando un'etichetta va su due righe e un'altra no. */ justify-content: flex-start; padding-top: 9px; gap: 3px; min-width: 0; height: var(--tifoso-app-nav); /* Lo spazio ai lati separa visivamente le voci: senza, etichette lunghe come "Calciomercato" e "News Reggina" si toccano. */ padding-left: 5px; padding-right: 5px; border: 0; background: transparent; color: #6B7280; font-family: inherit; font-size: 9.5px; font-weight: 600; line-height: 1.12; text-decoration: none; cursor: pointer; /* Senza questo il doppio tocco veloce viene interpretato come "ingrandisci" e il secondo tocco va perso: e' il motivo per cui la barra ogni tanto sembrava non rispondere. */ touch-action: manipulation; } .tifoso-app-nav__item svg { width: 22px; height: 22px; } /* Fino a due righe: nomi come "Domotek Volley" o "News Reggina" non stanno su una riga sola alla larghezza di un quinto di schermo, e troncati non si leggono. Oltre la seconda riga si taglia con i puntini. */ .tifoso-app-nav__label { max-width: 100%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-align: center; word-break: break-word; hyphens: auto; } .tifoso-app-nav__item:active { background: rgba(139, 0, 0, .06); } .tifoso-app-nav__item.is-active { color: #8B0000; } /* Trattino sopra la voce attiva, come nelle app native. */ .tifoso-app-nav__item.is-active::before { content: ''; position: absolute; top: 0; width: 26px; height: 3px; border-radius: 0 0 3px 3px; background: #8B0000; } /* Fascia piena anche prima che il JavaScript costruisca le voci. */ .tifoso-app::after { content: ''; position: fixed; left: 0; right: 0; bottom: 0; height: calc(var(--tifoso-app-nav) + var(--tifoso-app-safe-bottom)); background: #fff; border-top: 1px solid #E5E7EB; z-index: 9989; } /* ========================================================================== Ritocchi grafici: meno "pagina web", piu' app ========================================================================== */ .tifoso-app .container { padding-left: 14px; padding-right: 14px; } /* Su touch il :hover resta "appiccicato" dopo il tocco: al suo posto un feedback alla pressione. */ .tifoso-app .news-card-modern:hover { transform: none; border-color: #E5E7EB; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06); } .tifoso-app .news-card-modern:hover .news-card-image img { transform: none; } .tifoso-app .news-card-modern { border-radius: 14px; border-color: #EEF0F2; transition: transform .12s ease; } .tifoso-app .news-card-modern:active { transform: scale(.985); } .tifoso-app .section-title { font-size: 1.05rem; letter-spacing: .4px; } .tifoso-app .breadcrumbs { display: none; } /* Senza header e footer del sito il testo puo' respirare come in un lettore. */ .tifoso-app .single-post-title, .tifoso-app .entry-title { line-height: 1.18; } .tifoso-app .entry-content { font-size: 1.06rem; line-height: 1.72; } .tifoso-app .site-content img, .tifoso-app .news-card-modern { -webkit-touch-callout: none; } /* Il contenuto entra con un piccolo scorrimento verso l'alto: e' cio' che distingue il cambio di schermata di un'app dal salto secco di una pagina web. Parte da opacita' 0.55 e non da zero, cosi' non ritarda mai il primo disegno: qualcosa e' sempre visibile fin dal primo fotogramma. */ .tifoso-app .site-content { animation: tifoso-app-enter .22s cubic-bezier(.2, .7, .3, 1) both; } @keyframes tifoso-app-enter { from { opacity: .55; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* Su tablet e desktop installati la barra inferiore diventa scomoda: le voci restano, ma centrate e con la larghezza del contenuto. */ @media (min-width: 720px) { .tifoso-app-nav { justify-content: center; gap: 6px; } .tifoso-app-nav__item { flex: 0 0 110px; } } @media (prefers-reduced-motion: reduce) { .tifoso-app-progress.is-loading { animation: none; width: 60%; } .tifoso-app .news-card-modern { transition: none; } .tifoso-app .site-content, .tifoso-app #mobile-menu, .tifoso-app-loader { animation: none; opacity: 1; } }