/** * „Stingem lumina” — vălul de solidaritate energetică. * * Ascuns implicit: nimic nu se vede până când nu primește * `lights-out-on` (pusă de scriptul inline din head, după ce trece de cookie și * de bannerul de consimțământ). Așa nu există flash nici într-o direcție, nici * în cealaltă. * * Stările, în ordine: stins → `is-lit` (becul se aprinde, o clipă) → * `is-leaving` (vălul se retrage) → elementul dispare din DOM. */ .lights-out { display: none; } html.lights-out-on .lights-out { display: flex; position: fixed; inset: 0; z-index: 2147483000; flex-direction: column; align-items: center; justify-content: center; gap: clamp(1.5rem, 4vh, 2.75rem); padding: 2rem 1.25rem calc(2rem + env(safe-area-inset-bottom)); overflow-y: auto; background: radial-gradient(120% 90% at 50% -10%, #141926 0%, #0a0d15 45%, #05070c 100%); color: #e8eaf0; -webkit-font-smoothing: antialiased; animation: lights-out-fade-in .5s ease-out both; } html.lights-out-on, html.lights-out-on body { overflow: hidden; } @keyframes lights-out-fade-in { from { opacity: 0; } to { opacity: 1; } } /* ------------------------------------------------------------------ lampa */ .lights-out-lamp { position: relative; display: flex; flex-direction: column; align-items: center; /* Firul urcă până în tavanul ecranului; marginea negativă îl scoate din fluxul de centrare, ca să nu împingă textul în jos. */ margin-top: calc(-1 * clamp(2rem, 8vh, 5rem)); padding-top: clamp(2rem, 8vh, 5rem); } .lights-out-cord { width: 2px; flex: 1 0 auto; min-height: clamp(2rem, 8vh, 5rem); background: linear-gradient(180deg, rgba(232, 234, 240, 0) 0%, rgba(232, 234, 240, .28) 100%); } .lights-out-switch { position: relative; padding: 0; border: 0; background: none; cursor: pointer; line-height: 0; transform-origin: 50% -400%; animation: lights-out-sway 7s ease-in-out infinite; } .lights-out-switch:focus-visible { outline: 2px solid #ffd67e; outline-offset: 8px; border-radius: 12px; } @keyframes lights-out-sway { 0%, 100% { transform: rotate(-.6deg); } 50% { transform: rotate(.6deg); } } .lights-out-bulb { width: clamp(64px, 12vw, 92px); height: auto; overflow: visible; } .lights-out-glass { fill: rgba(232, 234, 240, .05); stroke: rgba(232, 234, 240, .32); stroke-width: 2; transition: fill .35s ease, stroke .35s ease; } .lights-out-filament { fill: none; stroke: rgba(232, 234, 240, .3); stroke-width: 2; stroke-linecap: round; transition: stroke .35s ease, filter .35s ease; } .lights-out-cap { fill: rgba(232, 234, 240, .22); transition: fill .35s ease; } /* Halo-ul e pictat sub bec și crește la aprindere. */ .lights-out-halo { position: absolute; top: 42%; left: 50%; width: 240px; height: 240px; margin: -120px 0 0 -120px; border-radius: 50%; pointer-events: none; opacity: 0; background: radial-gradient(circle, rgba(255, 202, 92, .55) 0%, rgba(255, 202, 92, .12) 40%, rgba(255, 202, 92, 0) 70%); transition: opacity .45s ease, transform .45s ease; transform: scale(.4); } /* Hover/focus = un fir de curent, cât să se vadă că becul e de apăsat. */ .lights-out-switch:hover .lights-out-filament, .lights-out-switch:focus-visible .lights-out-filament { stroke: rgba(255, 214, 126, .85); filter: drop-shadow(0 0 6px rgba(255, 202, 92, .6)); } .lights-out-switch:hover .lights-out-halo, .lights-out-switch:focus-visible .lights-out-halo { opacity: .35; transform: scale(.75); } .lights-out-switch:active { transform: translateY(2px); } /* --------------------------------------------------------------- mesajul */ .lights-out-panel { max-width: 46rem; text-align: center; } .lights-out-window { display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 1.25rem; padding: .35rem .85rem; border: 1px solid rgba(255, 202, 92, .28); border-radius: 999px; background: rgba(255, 202, 92, .07); color: #ffd67e; font-size: .8125rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; } .lights-out-pulse { width: 7px; height: 7px; border-radius: 50%; background: #ffca5c; box-shadow: 0 0 0 0 rgba(255, 202, 92, .7); animation: lights-out-pulse 2.4s ease-out infinite; } @keyframes lights-out-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 202, 92, .6); } 70%, 100% { box-shadow: 0 0 0 10px rgba(255, 202, 92, 0); } } .lights-out-title { margin: 0 0 1rem; font-size: clamp(1.6rem, 4.5vw, 2.5rem); font-weight: 700; line-height: 1.15; letter-spacing: -.02em; color: #fff; } .lights-out-message { margin: 0 auto 1.75rem; max-width: 40rem; font-size: clamp(.95rem, 2.2vw, 1.0625rem); line-height: 1.65; color: rgba(232, 234, 240, .78); } .lights-out-cta { display: inline-flex; align-items: center; gap: .55rem; padding: .8rem 1.6rem; border: 0; border-radius: 999px; background: linear-gradient(180deg, #ffd67e 0%, #f2b544 100%); color: #241a05; font-size: 1rem; font-weight: 700; cursor: pointer; box-shadow: 0 10px 30px -12px rgba(255, 202, 92, .8); transition: transform .18s ease, box-shadow .18s ease; } .lights-out-cta:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -12px rgba(255, 202, 92, .95); } .lights-out-cta:active { transform: translateY(0); } .lights-out-cta:focus-visible { outline: 2px solid #ffd67e; outline-offset: 4px; } .lights-out-cta-icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .lights-out-note { margin: 1.1rem 0 0; font-size: .8125rem; color: rgba(232, 234, 240, .45); } /* ------------------------------------------------------- becul se aprinde */ .lights-out.is-lit { background: radial-gradient(120% 90% at 50% 12%, #2e2a20 0%, #0f121b 55%, #05070c 100%); } .lights-out.is-lit .lights-out-glass { fill: rgba(255, 214, 126, .5); stroke: rgba(255, 233, 186, .95); } .lights-out.is-lit .lights-out-filament { stroke: #fff6e0; filter: drop-shadow(0 0 10px rgba(255, 214, 126, .95)); } .lights-out.is-lit .lights-out-cap { fill: rgba(255, 233, 186, .55); } .lights-out.is-lit .lights-out-halo { opacity: 1; transform: scale(1.6); } .lights-out.is-lit .lights-out-switch { animation: none; } .lights-out.is-leaving { opacity: 0; transition: opacity .45s ease .15s; pointer-events: none; } /* --------------------------------------------------------------- respect */ @media (prefers-reduced-motion: reduce) { html.lights-out-on .lights-out, .lights-out-switch, .lights-out-pulse { animation: none; } .lights-out-cta, .lights-out-halo, .lights-out-glass, .lights-out-filament, .lights-out-cap, .lights-out.is-leaving { transition-duration: .01ms; } } @media (max-width: 480px) { .lights-out-window { font-size: .72rem; } .lights-out-cta { width: 100%; justify-content: center; } }