|
|
| Riga 2: |
Riga 2: |
| <html> | | <html> |
| <style> | | <style> |
| /* ========================================================= | | /* ===== HERO FULLSCREEN ===== */ |
| STEP 1: HERO FULLSCREEN “PULITO”
| |
| - niente template
| |
| - niente box
| |
| - niente pulsanti
| |
| - stabile loggato / non loggato
| |
| ========================================================= */
| |
| | |
| /* nascondi titolo MediaWiki solo qui */
| |
| #firstHeading, #siteSub, #contentSub { display:none !important; }
| |
| | |
| /* full-bleed: esce dal contenitore MediaWiki */
| |
| .mp-fullhero{
| |
| position: relative;
| |
| width: 100vw;
| |
| left: 50%;
| |
| right: 50%;
| |
| margin-left: -50vw;
| |
| margin-right: -50vw;
| |
| padding: 0;
| |
| overflow: hidden;
| |
| }
| |
| | |
| /* HERO vero: prende 100vh */
| |
| .mp-hero{ | | .mp-hero{ |
| position: relative; | | width: 100%; |
| min-height: 100vh; | | min-height: 100vh; |
| width: 100%;
| | background-image: url("/wiki/Special:FilePath/Masticationpedia_Header_2025.png"); |
| display: block;
| |
| border-radius: 0 !important;
| |
| | |
| /* 👇 metti qui la tua immagine */
| |
| background-image: url("/wiki/Special:FilePath/BrainHero.jpg"); | |
| background-size: cover; | | background-size: cover; |
| background-position: center center; | | background-position: center center; |
| background-repeat: no-repeat; | | background-repeat: no-repeat; |
| }
| |
|
| |
| /* overlay leggero per leggere bene i testi */
| |
| .mp-hero::before{
| |
| content:"";
| |
| position:absolute;
| |
| inset:0;
| |
| background: linear-gradient(90deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,.10) 45%, rgba(0,0,0,.18) 100%);
| |
| pointer-events:none;
| |
| }
| |
|
| |
| /* contenuto centrato */
| |
| .mp-hero-content{
| |
| position: relative; | | position: relative; |
| z-index: 2;
| |
| height: 100vh;
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| text-align: center;
| |
| padding: 0 18px;
| |
| } | | } |
| | </style> |
| | </html> |
| | <div class="mp-hero"> |
|
| |
|
| /* titolo */
| | <div class="hero-subtitle-block"> |
| .mp-hero-title{
| | <div class="hero-psi">Indice <math>\Psi</math></div> |
| font-family: Georgia, "Times New Roman", serif;
| | <div class="hero-tagline">Un criterio clinico avanzato</div> |
| font-size: 54px;
| | </div> |
| font-weight: 700;
| |
| color: #ffffff; | |
| letter-spacing: 0.02em;
| |
| margin: 0;
| |
| text-shadow: 0 2px 14px rgba(0,0,0,.35);
| |
| }
| |
|
| |
|
| /* mini-blocco “Indice Ψ” in alto a destra (solo testo) */
| | <h1 class="hero-title">Masticationpedia</h1> |
| .mp-hero-corner{
| |
| position: absolute;
| |
| z-index: 2;
| |
| top: 60px;
| |
| right: 70px;
| |
| text-align: right;
| |
| color: rgba(255,255,255,.92);
| |
| font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
| |
| }
| |
|
| |
|
| .mp-hero-psi{
| |
| font-size: 28px;
| |
| font-weight: 500;
| |
| letter-spacing: 0.04em;
| |
| color: #C9A24D;
| |
| margin: 0;
| |
| }
| |
|
| |
| .mp-hero-tagline{
| |
| font-size: 16px;
| |
| font-weight: 400;
| |
| margin: 6px 0 0 0;
| |
| opacity: .95;
| |
| }
| |
|
| |
| /* mobile */
| |
| @media (max-width: 768px){
| |
| .mp-hero-title{ font-size: 38px; }
| |
| .mp-hero-corner{
| |
| top: 24px;
| |
| right: 20px;
| |
| }
| |
| .mp-hero-psi{ font-size: 22px; }
| |
| .mp-hero-tagline{ font-size: 14px; }
| |
| }
| |
| </style>
| |
|
| |
| <div class="mp-fullhero">
| |
| <section class="mp-hero">
| |
| <div class="mp-hero-corner">
| |
| <div class="mp-hero-psi">Indice Ψ</div>
| |
| <div class="mp-hero-tagline">Un criterio clinico avanzato</div>
| |
| </div>
| |
|
| |
| <div class="mp-hero-content">
| |
| <h1 class="mp-hero-title">Masticationpedia</h1>
| |
| </div>
| |
| </section>
| |
| </div> | | </div> |
| </html>
| |