/* ═══════════════════════════════════════════════ MOD „PAGINĂ SIMPLĂ" — activ când are .ui-simple Același HTML/JS, dar se comportă ca un site clasic: header static, scroll natural pe document, coloană de conținut centrată, fără artefacte de PWA. Comutare: buton în meniu, sau ?ui=simple / ?ui=app în URL. ═══════════════════════════════════════════════ */ /* ── Documentul derulează natural ── */ html.ui-simple, html.ui-simple body { height: auto; /* overflow-x: hidden (din reset) strică position: sticky — clip nu */ overflow-x: clip; } /* ── Header sticky (ca la un site clasic), cu conținut centrat ── */ html.ui-simple .app-header { position: sticky; top: 0; z-index: 100; padding-left: max(16px, calc((100% - 960px) / 2)); padding-right: max(16px, calc((100% - 960px) / 2)); } /* ── Paginile nu mai sunt blocate la înălțimea ecranului ── ATENȚIE: lista trebuie ținută la zi. Orice `#page-*` care primește în style.css `padding-top: calc(var(--header-h) + ...)` — compensare pentru header-ul `position: fixed` — TREBUIE resetat aici, fiindcă sub `ui-simple` header-ul devine `sticky`, deci ocupă deja spațiu în flux. Altfel decalajul se dublează și tot conținutul paginii apare împins în jos, ca la o pagină deja scrollată. (Exact așa a scăpat `#page-video`.) */ html.ui-simple #page-admin, html.ui-simple #page-regulation, html.ui-simple #page-quiz, html.ui-simple #page-mentor, html.ui-simple #page-cursant, html.ui-simple #page-video { height: auto !important; overflow: visible !important; padding-top: 0 !important; } /* containerele interne de scroll devin conținut normal — la fel, orice `.*-body` cu `flex: 1; overflow-y: auto` trebuie adăugat aici, altfel rămâne un scroller în interiorul unei pagini care deja scrollează (scroll imbricat) */ html.ui-simple .admin-body, html.ui-simple .regulation-body, html.ui-simple .quiz-body, html.ui-simple .mentor-body, html.ui-simple .cursant-body, html.ui-simple .video-body, html.ui-simple .tab-panel { overflow: visible; flex: none; min-height: 0; } /* ── Coloană de conținut centrată, ca un site ── */ html.ui-simple .regulation-body, html.ui-simple .quiz-body, html.ui-simple .mentor-body, html.ui-simple .cursant-body, html.ui-simple .admin-body { max-width: 960px; margin: 0 auto; width: 100%; } /* tab-urile admin rămân full-width dark, dar cu conținut centrat */ html.ui-simple .admin-body { max-width: none; } html.ui-simple .admin-tabs { padding-left: max(16px, calc((100% - 960px) / 2)); padding-right: max(16px, calc((100% - 960px) / 2)); } html.ui-simple .tab-panel { max-width: 960px; margin: 0 auto; width: 100%; } /* bara de căutare din regulament, centrată la fel */ html.ui-simple .reg-search-bar { max-width: 960px; margin: 0 auto; width: 100%; } /* ── Chat: bara de input intră în fluxul paginii ── */ /* ── Zonele care compensau header/nav fix nu mai au nevoie de spațiu ── */ html.ui-simple .regulation-body { padding-bottom: 48px; } html.ui-simple .quiz-body { padding-bottom: 3rem; } /* ── Fără artefacte de „aplicație" ── */ /* pill-ul „Întreabă AI" rămâne, dar mai discret, lipit de colț */ /* ── Desktop: fundal de canvas doar în jurul coloanei ── */ @media (min-width: 1100px) { html.ui-simple body { background: var(--paper); } }