/* ============================================================
DEMONIUM DOORS - APP.CSS
File principale che importa TUTTI gli altri CSS
Ultimo aggiornamento: 2025-06-30
✅ A COSA SERVE QUESTO FILE:
- Serve a NON dover scrivere mille nel tuo HTML
- Centralizza tutti gli import
- Permette di mantenere ordine nel progetto
- Facilita la gestione di versioni o cache busting
✅ COME FUNZIONA:
- Basta importare SOLO questo file nel tuo index.html o _Host.cshtml
- Esempio:
- Tutto il tuo progetto CSS viene caricato da qui.
=========================================================== */
/* ------------------------------------------------------------
VARIABILI GLOBALI
→ Definiscono colori, spaziature, font, shadows
→ Sono la base di tutto il tuo design system
------------------------------------------------------------ */
@import "variables.css";
/* ------------------------------------------------------------
BASE STYLES
→ Reset CSS + stili base comuni (body, html, link, immagini)
→ Imposta regole generali valide in tutto il sito
------------------------------------------------------------ */
@import "base.css";
/* ------------------------------------------------------------
DEBUG HELPER
→ Debug utility per evidenziare la situazione del css
------------------------------------------------------------ */
@import "components/debug-helper.css";
/* ------------------------------------------------------------
TRANSPARENT SPACE DECORATION
→ Spazio decorativo trasparente
------------------------------------------------------------ */
@import "components/transparent-space-decoration.css";
/* ------------------------------------------------------------
RED STRIPES DECORATION
→ Riga dcorativa rossa di separazione
------------------------------------------------------------ */
@import "components/red-stripes-decoration.css";
/* ------------------------------------------------------------
BRAND SECTION
→ Logo
→ Payoff o tagline
→ Stili istituzionali (colori, font brand)
→ Animazioni brand reveal
------------------------------------------------------------ */
@import "components/brand-section.css";
/* ------------------------------------------------------------
NAVIGATION SECTION
→ Menu di navigazione principale
------------------------------------------------------------ */
@import "components/nav-section.css";
/* ------------------------------------------------------------
NAVIGATION ALTERNATIVA SECTION
→ Menu di navigazione principale (alternativo)
------------------------------------------------------------ */
/*@import "components/nav-alternative-section.css";*/
/* ------------------------------------------------------------
BRAND LANGUAGE ACCESS SECTION
→ Menu con logo e accesso (login)
------------------------------------------------------------ */
@import "components/brand-access-section.css";
/* ------------------------------------------------------------
LANGUAGE SECTION
→ Selettore lingua con icona globo
------------------------------------------------------------ */
@import "components/language-section.css";
/* ------------------------------------------------------------
LANDING WITH IMAGE SECTION
→ Sezione di atterraggio con effetti atmosferici di cenere
→ Design horror immersivo con particelle animate
------------------------------------------------------------ */
@import "components/landing-with-image-section.css";
/* ------------------------------------------------------------
CALL TO ACTION SECTION
→ Area di invito all'azione
------------------------------------------------------------ */
@import "components/call-to-action-section.css";
/* ------------------------------------------------------------
PROMOTIONAL CARD SECTION
→ Area con card promozionale
------------------------------------------------------------ */
@import "components/promotional-card-section.css";
/* ------------------------------------------------------------
FEATURES SECTION
→ Sezione che presenta le caratteristiche del gioco
→ Layout alternato con immagini e testo
------------------------------------------------------------ */
@import "components/features-section.css";
/* ------------------------------------------------------------
TENDING CONTENT SECTION
→ Sezione che mostra i contenuti in tendenza
------------------------------------------------------------ */
@import "components/trending-content-section.css";
/* ------------------------------------------------------------
DIARY SECTION
→ Diario degli esploratori con atmosfera gotica
------------------------------------------------------------ */
@import "components/diary-section.css";
/* ------------------------------------------------------------
NEWS SECTION
→ Sezione notizie con cronache oscure e card responsive
------------------------------------------------------------ */
@import "components/news-section.css";
/* ------------------------------------------------------------
SPECIAL CONTENT SECTION
→ Sezione contenuti speciali con frame antico e tema horror
------------------------------------------------------------ */
@import "components/special-content-section.css";
/* ------------------------------------------------------------
PREMIUM SECTION
→ Sezione piani premium con tema horror e stile gotico
------------------------------------------------------------ */
@import "components/premium-section.css";
/* ------------------------------------------------------------
DARK GRID SECTION
→ Sezione con griglia scura di box informativi
------------------------------------------------------------ */
@import "components/dark-grid-section.css";
/* ------------------------------------------------------------
MORE INFORMATION SECTION
→ Sezione informativa premium con design
→ Card responsive con gradients e animazioni moderne
→ Perfetta per showcase di contenuti e call-to-action
------------------------------------------------------------ */
@import "components/more-information-section.css";
/* ------------------------------------------------------------
PHILOSOPHY OF THE GAME SECTION
→ Sezione dedicata alla filosofia del gioco con design immersivo
------------------------------------------------------------ */
@import "components/philosophy-of-the-game-section.css";
/* ------------------------------------------------------------
INFORMATION ABOUT THE PROJECT SECTION
→ Sezione dedicata a raccontare la storia del progetto e del creatore
------------------------------------------------------------ */
@import "components/information-about-the-project-section.css";
/* ------------------------------------------------------------
HOW TO PLAY SECTION
→ Sezione dedicata a spiegare il gameplay e i meccanismi del gioco
------------------------------------------------------------ */
@import "components/how-to-play-section.css";
/* ------------------------------------------------------------
PRESS KIT SECTION
→ Sezione press kit per streamers e giornalisti con download resources
------------------------------------------------------------ */
@import "components/press-kit-section.css";
/* ------------------------------------------------------------
RETURN BACK PAGE SECTION
→ Sezione per tornare alla pagina precedente
------------------------------------------------------------ */
@import "components/return-back-page-section.css";
/* ------------------------------------------------------------
CONTENT CAROUSEL SECTION
→ Sezione con carosello orizzontale di contenuti
------------------------------------------------------------ */
@import "components/content-carousel-section.css";
/* ------------------------------------------------------------
MESSAGE SECTION
→ Sezione per messaggi importanti o avvisi
------------------------------------------------------------ */
@import "components/message-section.css";
/* ------------------------------------------------------------
MYSTICAL SEPARATORE DECORATION
→ Decorazione con simbolo mistico di separazione
------------------------------------------------------------ */
@import "components/mystical-separator-decoration.css";
/* ------------------------------------------------------------
JAVASCRIPT DISABLED DECORATION
→ Notifica informativa per JavaScript disabilitato
→ Stile Demonium Doors non intimidatorio
------------------------------------------------------------ */
@import "components/javascript-disabled-decoration.css";
/* ------------------------------------------------------------
CONTACT SECTION
→ Sezione con form di contatto o info
------------------------------------------------------------ */
@import "components/contact-section.css";
/* ------------------------------------------------------------
PERSISTENT AUDIO SHARED
→ Shared styles per il player audio persistente
------------------------------------------------------------ */
@import "components/persistent-audio-shared.css";
/* ------------------------------------------------------------
SCROLL INDICATOR SHARED
→ Shared styles per l'indicatore di scroll globale
------------------------------------------------------------ */
@import "components/scroll-indicator-shared.css";
/* ------------------------------------------------------------
LAYOUT SYSTEM
→ Griglie, container, utility di layout (flex, grid, width)
→ Serve per strutturare le pagine senza ripetere codice
------------------------------------------------------------ */
/*
@import "layout.css";
*/
/* ------------------------------------------------------------
UTILITIES
→ Classi di utilità generiche
es. text-center, shadows, cursor-pointer
→ Permettono modifiche rapide senza scrivere nuovo CSS
------------------------------------------------------------ */
/*
@import "utilities.css";
*/
/* ------------------------------------------------------------
ANIMATIONS
→ Tutte le @keyframes e animazioni riutilizzabili
es. fadeIn, slideIn, horror pulse
→ Così non devi duplicare animazioni in ogni file
------------------------------------------------------------ */
/*
@import "animations.css";
*/
/* ============================================================
COMPONENTS
→ Qui importiamo i singoli componenti riutilizzabili
es. header, footer, hero, bottoni
→ Scopo:
- Modularità
- Facilità di manutenzione
- Evitare file CSS giganteschi
============================================================ */
/* HEADER
→ Contiene logo, navbar, sticky, animazioni scroll */
/*
@import "components/header.css";
*/
/* FOOTER SECTION
→ Contiene layout colonne, link, copyright */
@import "components/footer-section.css";
/* FOOTER SECTION CLEANER VERSION
→ Contiene layout colonne, link, copyright */
@import "components/footer-cleaner-version-section.css";
/* LOADER
→ Contiene gli stili per il loader */
/*
@import "components/loader.css";
*/
/* HERO
→ La sezione visiva più importante della landing page
con sfondi, overlay e CTA */
/*
@import "components/hero.css";
*/
/* SCROLL
→ Stili per il pulsante di scroll to top e animazioni */
/*
@import "components/scrollindicator.css";
*/
/* NAVIGATION
→ Eventuali menù laterali, breadcrumb, secondary nav */
/*
@import "components/navigation.css";
*/
/* CARDS
→ Box grafici usati ovunque (promo, trending, news) */
/*
@import "components/cards.css";
*/
/* MODALS
→ Finestre modali (overlay) per messaggi o conferme */
/*
@import "components/modals.css";
*/
/* BUTTONS
→ Stili standard per tutti i bottoni */
/*
@import "components/buttons.css";
*/
/* FORMS
→ Input, form, textarea, stili campi di testo */
/*
@import "components/forms.css";
*/
/* DOORS
→ Stili specifici per le porte Demonium Doors
incluse le animazioni delle 3 porte */
/*
@import "components/doors.css";
*/
/* ============================================================
PAGES
→ CSS dedicato a pagine specifiche
es. landing, game, faq
→ Serve a isolare layout e stili unici per una pagina
============================================================ */
/* LANDING PAGE
→ Layout e stili specifici della homepage */
/*
@import "pages/landing.css";
*/
/* GAME PAGE
→ UI e overlay specifici durante il gioco */
/*
@import "pages/game.css";
*/
/* GAME OVER PAGE
→ Schermata di sconfitta */
/*
@import "pages/game-over.css";
*/
/* FAQ PAGE
→ Accordion e layout delle domande frequenti */
@import "components/faq-section.css";
/* ------------------------------------------------------------
HELP CENTER MAIN PAGE
→ Has like background and other things
------------------------------------------------------------ */
@import "pages/help-center.css";
/* ------------------------------------------------------------
HELP CENTER BREADCRUMB NAVIGATION SECTION
→ Skip link e breadcrumb navigation
------------------------------------------------------------ */
@import "components/help-center-breadcrumb-navigation-section.css";
/* ------------------------------------------------------------
HELP CENTER SEARCH SECTION
→ Hero section with integrated search functionality
------------------------------------------------------------ */
@import "components/help-center-search-section.css";
/* ------------------------------------------------------------
HELP CENTER BROWSE BY CATEGORY SECTION
→ Category grid for help topics navigation
------------------------------------------------------------ */
@import "components/help-center-browse-by-category-section.css";
/* ------------------------------------------------------------
HELP CENTER POPULAR ARTICLES SECTION
→ Popular articles section with article cards
------------------------------------------------------------ */
@import "components/help-center-popular-articles-section.css";
/* ------------------------------------------------------------
HELP CENTER STILL NEED HELP SECTION
→ Contact support section with support options
------------------------------------------------------------ */
@import "components/help-center-still-need-help-section.css";
/* ------------------------------------------------------------
HELP CENTER SERVICE STATUS LEGAL SECTION
→ Service status and legal compliance section
------------------------------------------------------------ */
@import "components/help-center-service-status-legal-section.css";
/* ------------------------------------------------------------
HELP CENTER COOKIE POLICY SECTION
Cookie policy section with gothic styling and table
------------------------------------------------------------ */
@import "components/help-center-cookie-policy-section.css";
/* ------------------------------------------------------------
HELP CENTER PRIVACY POLICY SECTION
Privacy policy section with gothic styling
------------------------------------------------------------ */
@import "components/help-center-privacy-policy-section.css";
/* ------------------------------------------------------------
HELP CENTER TERMS AND CONDITIONS SECTION
Terms and conditions section with clean help center styling
------------------------------------------------------------ */
@import "components/help-center-terms-and-conditions-section.css";
/* ------------------------------------------------------------
HELP CENTER CONTACTS SECTION
Contacts section with clean help center styling and form
------------------------------------------------------------ */
@import "components/help-center-contacts-section.css";
/* ------------------------------------------------------------
HELP CENTER GDPR RIGHTS SECTION
GDPR rights section with comprehensive international compliance
------------------------------------------------------------ */
@import "components/help-center-gdpr-rights-section.css";
/* ------------------------------------------------------------
HELP CENTER ACCESSIBILITY SECTION
Accessibility statement section with clean help center styling
------------------------------------------------------------ */
@import "components/help-center-accessibility-section.css";
/* ============================================================
THEMES
→ Qui importiamo eventuali temi grafici diversi
es. dark mode, light mode, skin horror
→ Serve a cambiare look al gioco senza modificare componenti
============================================================ */
/* DARK THEME
→ Override colori per modalità dark */
@import "themes/dark.css";
/* LIGHT THEME
→ Override colori per modalità light (opzionale) */
/*
@import "themes/light.css";
*/