/* --------------------------------------------------------------------------- lions.ro — calendarul de evenimente Fisier separat de `lions.css`: se incarca doar pe /calendar si pe pagina unui eveniment, adica exact acolo unde e nevoie de el si de FullCalendar. Cardul de pe prima pagina, in schimb, sta in lions.css — el se vede la fiecare vizita. Variabilele de brand (--lions-blue, --lions-gold, --ink, --rule...) vin din lions.css, incarcat inaintea acestui fisier de layout. --------------------------------------------------------------------------- */ :root { /* Aceleasi trei culori ca in App\Models\CalendarEvent::CULORI. Cand se schimba acolo, se schimba si aici — sunt doua locuri fiindca unul deseneaza legenda statica, celalalt vine prin JSON pe fiecare eveniment. */ --cal-cluburi: #00338D; --cal-district: #B8860B; --cal-guvernator: #8E1B2E; --cal-cluburi-pal: #EAF0FA; --cal-district-pal: #FAF3E0; --cal-guvernator-pal: #FBECEE; } /* --- antetul paginii ----------------------------------------------------- */ .cal-head { background: var(--ground); border-bottom: 1px solid var(--rule); padding: 2.6rem 0 2.2rem; } .cal-head .kicker { margin: 0 0 0.4rem; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lions-blue); font-weight: 700; } .cal-head h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin-bottom: 0.5rem; } .cal-head .lead { color: var(--muted); max-width: 60ch; margin: 0; font-size: 1.03rem; } .cal-band { padding: 2rem 0 2.6rem; } /* --- legenda ------------------------------------------------------------- */ .cal-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-bottom: 1.4rem; } .cal-leg { display: inline-flex; align-items: center; gap: 0.5rem; /* 44px inaltime minima: sub atat, degetul rateaza tinta pe telefon. */ min-height: 2.75rem; padding: 0.45rem 0.95rem; border: 1px solid var(--rule); border-radius: 999px; background: var(--surface); color: var(--ink); font: inherit; font-size: 0.88rem; font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s, opacity .15s; } .cal-leg:hover { border-color: #C3CAD5; background: var(--ground); } .cal-leg-semn { font-size: 0.72rem; line-height: 1; } /* Categoria stinsa: mai palida SI taiata, ca sa nu depinda numai de culoare. */ .cal-leg--stins { opacity: .5; background: var(--ground); } .cal-leg--stins .cal-leg-nume { text-decoration: line-through; } .cal-legend-nota { margin: 0; flex-basis: 100%; font-size: 0.82rem; color: var(--faint); } @media (min-width: 60rem) { .cal-legend-nota { flex-basis: auto; margin-left: auto; } } /* --- grila --------------------------------------------------------------- */ .cal-grid { background: var(--surface); border: 1px solid var(--rule); border-radius: 14px; padding: 1rem 1.1rem 1.2rem; box-shadow: 0 1px 2px rgba(13, 34, 64, .04), 0 8px 24px rgba(13, 34, 64, .05); /* Variabilele proprii ale lui FullCalendar 6: se stabilesc aici, o data, in loc sa fie vanate cu `!important` prin selectorii lui. */ --fc-border-color: var(--rule); --fc-today-bg-color: #FFFBEA; --fc-neutral-bg-color: var(--ground); --fc-page-bg-color: var(--surface); --fc-now-indicator-color: var(--lions-gold-d); --fc-small-font-size: 0.82rem; /* Butoanele lui FullCalendar sunt albastru-inchis din fabrica. Se sting de la radacina, prin variabilele lui: asa nu conteaza ca foaia lui e injectata in DUPA a noastra si nu e nevoie de niciun `!important`. */ --fc-button-bg-color: #FFFFFF; --fc-button-border-color: var(--field-rule); --fc-button-text-color: var(--ink); --fc-button-hover-bg-color: var(--ground); --fc-button-hover-border-color: #B9C2CE; --fc-button-active-bg-color: var(--lions-blue); --fc-button-active-border-color: var(--lions-blue); } .cal-grid.fc { font-family: inherit; } .cal-grid.fc .fc-toolbar.fc-header-toolbar { margin-bottom: 1rem; gap: 0.6rem; flex-wrap: wrap; } .cal-grid.fc .fc-toolbar-title { font-family: Archivo, "Public Sans", system-ui, sans-serif; font-size: clamp(1.1rem, 2.6vw, 1.45rem); font-weight: 700; letter-spacing: -0.01em; text-transform: capitalize; } /* Butoanele: albastru Lions in loc de albastrul implicit al bibliotecii. */ .cal-grid.fc .fc-button { background: var(--surface); border: 1px solid var(--field-rule); color: var(--ink); font: inherit; font-size: 0.86rem; font-weight: 600; padding: 0.5rem 0.85rem; min-height: 2.6rem; border-radius: 9px; box-shadow: none; text-transform: none; } .cal-grid.fc .fc-button:hover { background: var(--ground); border-color: #B9C2CE; } .cal-grid.fc .fc-button:disabled { opacity: .45; } .cal-grid.fc .fc-button-primary:not(:disabled).fc-button-active, .cal-grid.fc .fc-button-primary:not(:disabled):active { background: var(--lions-blue); border-color: var(--lions-blue); color: #FFF; } .cal-grid.fc .fc-button:focus-visible { outline: 3px solid var(--lions-gold); outline-offset: 2px; box-shadow: none; } .cal-grid.fc .fc-button-group > .fc-button:not(:last-child) { margin-right: -1px; } .cal-grid.fc .fc-col-header-cell-cushion { padding: 0.6rem 0.3rem; color: var(--muted); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; } .cal-grid.fc .fc-daygrid-day-number { padding: 0.35rem 0.5rem; color: var(--ink); font-size: 0.86rem; font-weight: 600; text-decoration: none; } .cal-grid.fc .fc-day-other .fc-daygrid-day-number { color: var(--faint); font-weight: 400; } .cal-grid.fc .fc-day-today .fc-daygrid-day-number { color: var(--lions-blue); font-weight: 800; } /* --- evenimentele in grila ------------------------------------------------ */ .cal-grid.fc .fc-event { border-radius: 5px; border: none; padding: 1px 0; cursor: pointer; } .cal-grid.fc .fc-daygrid-event { margin-top: 2px; } .cal-ev-chip .fc-event-main { display: flex; align-items: baseline; gap: 0.3rem; padding: 2px 6px; color: #FFF; font-size: 0.8rem; line-height: 1.35; } .cal-ev-chip .cal-semn { font-size: 0.6rem; opacity: .9; flex: 0 0 auto; } .cal-ev-chip .cal-ora { font-variant-numeric: tabular-nums; opacity: .92; flex: 0 0 auto; } /* Titlul lung nu are voie sa latasca celula zilei. */ .cal-ev-chip .cal-titlu { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .cal-grid.fc .fc-daygrid-more-link { font-size: 0.76rem; font-weight: 700; color: var(--lions-blue); padding: 1px 6px; } /* Filtrul din legenda: containerul poarta clasa, evenimentul dispare. */ .cal-fara-cluburi .cal-ev-chip--cluburi, .cal-fara-district .cal-ev-chip--district, .cal-fara-guvernator .cal-ev-chip--guvernator { display: none !important; } .cal-eroare { margin: 0 0 1rem; padding: 0.8rem 1rem; border-radius: 9px; background: var(--cal-guvernator-pal); color: #6E1524; font-size: 0.92rem; } /* --- panoul zilei (telefon) ---------------------------------------------- */ .cal-zi { margin-top: 1.1rem; border: 1px solid var(--rule); border-radius: 14px; background: var(--surface); padding: 1rem 1.1rem 1.2rem; } .cal-zi-titlu { font-size: 1.05rem; margin: 0 0 0.8rem; } .cal-zi-rand { display: grid; grid-template-columns: auto 1fr; gap: 0.15rem 0.7rem; align-items: baseline; padding: 0.7rem 0.8rem; margin-bottom: 0.5rem; border-left: 4px solid var(--c, var(--lions-blue)); border-radius: 0 9px 9px 0; background: var(--ground); text-decoration: none; color: var(--ink); } .cal-zi-rand:last-child { margin-bottom: 0; } .cal-zi-ora { font-size: 0.8rem; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; } .cal-zi-titlu-ev { font-weight: 700; } .cal-zi-cat { grid-column: 1 / -1; font-size: 0.78rem; color: var(--muted); } /* --- lista „ce urmeaza" -------------------------------------------------- */ .cal-urmatoare { padding: 0 0 3rem; } .cal-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; } .cal-rand > a { display: flex; align-items: flex-start; gap: 1rem; padding: 0.95rem 1.1rem; border: 1px solid var(--rule); border-left: 4px solid var(--lions-blue); border-radius: 12px; background: var(--surface); text-decoration: none; color: var(--ink); transition: box-shadow .15s, transform .15s, border-color .15s; } .cal-rand > a:hover { box-shadow: 0 8px 22px rgba(13, 34, 64, .09); transform: translateY(-1px); } .cal-rand--cluburi > a { border-left-color: var(--cal-cluburi); } .cal-rand--district > a { border-left-color: var(--cal-district); } .cal-rand--guvernator > a { border-left-color: var(--cal-guvernator); } .cal-data { flex: 0 0 3.2rem; text-align: center; line-height: 1.05; padding-top: 0.1rem; } .cal-data-zi { display: block; font-family: Archivo, sans-serif; font-size: 1.5rem; font-weight: 700; } .cal-data-luna { display: block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; color: var(--muted); } .cal-rand-text { min-width: 0; } .cal-rand-titlu { display: block; font-weight: 700; font-size: 1.02rem; margin-bottom: 0.25rem; } .cal-rand-meta { display: flex; flex-wrap: wrap; gap: 0.35rem 0.7rem; align-items: center; font-size: 0.86rem; color: var(--muted); } .cal-rand-loc::before { content: "· "; } .cal-eticheta { display: inline-flex; align-items: center; gap: 0.32rem; padding: 0.12rem 0.55rem; border-radius: 999px; background: color-mix(in srgb, var(--c, var(--lions-blue)) 10%, #FFF); color: var(--c, var(--lions-blue)); font-size: 0.76rem; font-weight: 700; white-space: nowrap; } /* Browserele fara `color-mix` primesc un fundal neutru, nu unul transparent. */ @supports not (background: color-mix(in srgb, red 10%, white)) { .cal-eticheta { background: var(--ground); } } .cal-gol { color: var(--muted); margin: 0; } /* --- fereastra de detalii ------------------------------------------------ */ body.cal-blocat { overflow: hidden; } /* `hidden` trebuie sa castige in fata regulilor de mai jos. Atributul HTML se bazeaza pe `display: none` din foaia browserului, iar orice regula proprie care da un `display` (`.btn` e inline-flex, randurile din `dl` sunt flex) il calca fara sa para ca o face: butonul „Detalii si inscriere" si randul „Unde" apareau si la evenimentele care n-au link, respectiv loc. */ .cal-modal [hidden], .cal-zi [hidden] { display: none !important; } .cal-modal { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 1rem; } .cal-modal[hidden] { display: none; } .cal-modal-fundal { position: absolute; inset: 0; background: rgba(13, 34, 64, .55); backdrop-filter: blur(2px); } .cal-modal-cutie { position: relative; width: min(46rem, 100%); max-height: min(88vh, 52rem); overflow-y: auto; background: var(--surface); border-radius: 16px; box-shadow: 0 24px 60px rgba(13, 34, 64, .28); } .cal-modal-x { position: absolute; top: 0.6rem; right: 0.7rem; width: 2.5rem; height: 2.5rem; border: none; border-radius: 999px; background: rgba(255, 255, 255, .9); color: var(--muted); font-size: 1.6rem; line-height: 1; cursor: pointer; } .cal-modal-x:hover { background: var(--ground); color: var(--ink); } .cal-modal-corp { padding: 1.6rem 1.8rem 1.8rem; } .cal-modal-categorie { margin: 0 0 0.5rem; } .cal-modal-corp h2 { font-size: clamp(1.3rem, 3vw, 1.7rem); margin-bottom: 0.9rem; padding-right: 2.4rem; } .cal-modal-fapte { margin: 0 0 1.1rem; display: grid; gap: 0.5rem; } .cal-modal-fapte > div { display: flex; gap: 0.6rem; flex-wrap: wrap; } .cal-modal-fapte dt { margin: 0; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); flex: 0 0 5.5rem; } .cal-modal-fapte dd { margin: 0; } .cal-modal-imagine { display: block; width: 100%; height: auto; border-radius: 11px; margin: 0 0 1.1rem; } .cal-modal-descriere { color: var(--ink); } .cal-modal-descriere :first-child { margin-top: 0; } .cal-modal-descriere :last-child { margin-bottom: 0; } .cal-modal-actiuni { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.4rem 0 0; align-items: flex-start; } /* --- „Adauga in calendarul meu" ------------------------------------------ */ /* Meniul e un `
`: se deschide fara JavaScript si e anuntat corect de cititoarele de ecran. Sageata implicita a browserului se scoate — butonul are deja iconita lui. */ .cal-adauga { position: relative; } .cal-adauga > summary { display: inline-flex; align-items: center; gap: 0.45rem; cursor: pointer; list-style: none; user-select: none; } .cal-adauga > summary::-webkit-details-marker { display: none; } .cal-adauga > summary::marker { content: ""; } .cal-adauga-meniu { position: absolute; z-index: 5; top: calc(100% + 0.45rem); left: 0; min-width: 15rem; padding: 0.35rem; background: var(--surface); border: 1px solid var(--rule); border-radius: 11px; box-shadow: 0 14px 34px rgba(13, 34, 64, .16); } .cal-adauga-meniu a { display: block; padding: 0.6rem 0.75rem; border-radius: 8px; color: var(--ink); font-size: 0.9rem; font-weight: 600; text-decoration: none; } .cal-adauga-meniu a:hover { background: var(--ground); } .cal-ev-actiuni { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: flex-start; } /* In fereastra de detalii meniul NU poate atarna peste marginea cutiei: aceea are `overflow-y: auto` pentru descrierile lungi, deci ar taia exact optiunile. Acolo butonul isi ia un rand intreg, iar meniul curge dedesubt si impinge continutul — la fel ca pe telefon. */ .cal-modal .cal-adauga { flex: 1 1 100%; } .cal-modal .cal-adauga-meniu { position: static; min-width: 0; margin-top: 0.5rem; box-shadow: none; background: var(--ground); } .cal-modal .cal-adauga-meniu a:hover { background: var(--surface); } .btn-outline-blue { background: transparent; color: var(--lions-blue); box-shadow: inset 0 0 0 2px var(--lions-blue); } .btn-outline-blue:hover { background: var(--cal-cluburi-pal); } /* --- pagina unui eveniment ----------------------------------------------- */ .cal-ev { padding: 2.2rem 0 3.4rem; } .cal-ev-inapoi { margin: 0 0 1.2rem; font-size: 0.9rem; } .cal-ev-inapoi a { text-decoration: none; font-weight: 600; } .cal-ev-inapoi a:hover { text-decoration: underline; } .cal-ev-categorie { margin: 0 0 0.6rem; } .cal-ev h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); } .cal-ev-fapte { margin: 1.2rem 0 1.6rem; display: grid; gap: 0.5rem; } .cal-ev-fapte > div { display: flex; gap: 0.6rem; flex-wrap: wrap; } .cal-ev-fapte dt { margin: 0; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); flex: 0 0 5.5rem; padding-top: 0.15rem; } .cal-ev-fapte dd { margin: 0; font-size: 1.02rem; } .cal-ev-imagine { display: block; width: 100%; height: auto; border-radius: 14px; margin: 0 0 1.6rem; } .cal-ev-text { font-size: 1.03rem; } .cal-ev-text :first-child { margin-top: 0; } .cal-ev-actiuni { margin: 1.6rem 0 0; } .cal-ev-altele { margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid var(--rule); } .cal-ev-altele h2 { font-size: 1.25rem; margin-bottom: 1rem; } /* --- ecrane mici --------------------------------------------------------- */ @media (max-width: 40rem) { .cal-band { padding: 1.4rem 0 2rem; } .cal-grid { padding: 0.8rem 0.6rem 1rem; border-radius: 12px; } /* Bara de sus, pe trei randuri, cu butoanele intinse: pe 390px, „Săptămânal" si „Zilnic" nu incap langa titlu. */ .cal-grid.fc .fc-toolbar.fc-header-toolbar { flex-direction: column; align-items: stretch; } .cal-grid.fc .fc-toolbar-chunk { display: flex; justify-content: center; } .cal-grid.fc .fc-toolbar-chunk:nth-child(2) { order: -1; margin-bottom: 0.5rem; } .cal-grid.fc .fc-button { flex: 1 1 auto; } .cal-grid.fc .fc-col-header-cell-cushion { padding: 0.45rem 0.1rem; font-size: 0.68rem; } .cal-grid.fc .fc-daygrid-day-number { padding: 0.25rem 0.3rem; font-size: 0.8rem; } .cal-grid.fc .fc-daygrid-day-frame { min-height: 3.4rem; } /* Evenimentele devin dungi subtiri colorate: titlul nu incape pe 390px, iar ziua apasata isi arata lista completa in panoul de dedesubt (vezi calendar.js). Dunga, si nu un punct: punctul stă intr-o singura casuta, deci o conventie de trei zile ar fi aparut marcata doar in prima. Dunga pastreaza intinderea pe care o deseneaza FullCalendar, adica exact zilele in care se tine evenimentul. */ .cal-grid.fc .fc-daygrid-day-events { margin: 0; padding: 0 2px 4px; min-height: 0; } .cal-grid.fc .fc-daygrid-event-harness { margin-top: 2px; } .cal-grid.fc .fc-event { padding: 0; border-radius: 3px; } .cal-ev-chip .fc-event-main { padding: 0; height: 6px; overflow: hidden; } .cal-punct { display: none; } .cal-grid.fc .fc-daygrid-more-link { font-size: 0.66rem; padding: 0; } .cal-modal { padding: 0; align-items: flex-end; } .cal-modal-cutie { width: 100%; max-height: 92vh; border-radius: 16px 16px 0 0; } .cal-modal-corp { padding: 1.3rem 1.2rem 1.6rem; } .cal-modal-actiuni .btn { flex: 1 1 100%; text-align: center; } .cal-adauga { flex: 1 1 100%; } .cal-adauga > summary { width: 100%; justify-content: center; } /* Pe telefon meniul nu mai atarna peste marginea ferestrei: curge in pagina, sub buton, si impinge ce urmeaza. */ .cal-adauga-meniu { position: static; min-width: 0; margin-top: 0.45rem; box-shadow: none; } .cal-rand > a { padding: 0.85rem 0.9rem; gap: 0.8rem; } .cal-data { flex-basis: 2.8rem; } } @media (prefers-reduced-motion: reduce) { .cal-rand > a, .cal-leg { transition: none; } .cal-rand > a:hover { transform: none; } }