Nav apraksta
Nevar pievienot vairāk kā 25 tēmas Tēmai ir jāsākas ar burtu vai ciparu, tā var saturēt domu zīmes ('-') un var būt līdz 35 simboliem gara.

welcome.css 25KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193
  1. /**
  2. * Welcome — bacheca (allineata a evento/prenota public)
  3. */
  4. .welcome-bacheca {
  5. --fest-orange: #f58220;
  6. --fest-orange-soft: #ff9a2e;
  7. --fest-purple: #602d91;
  8. --fest-navy: #15265c;
  9. --fest-text: #15265c;
  10. --fest-text-muted: #5b6579;
  11. --fest-surface: #ffffff;
  12. --fest-card: #ffffff;
  13. --fest-radius: 0.85rem;
  14. --fest-shadow: 0 2px 12px rgba(21, 38, 92, 0.06);
  15. --evento-accent: var(--fest-orange);
  16. --evento-navy: var(--fest-navy);
  17. --evento-muted: var(--fest-text-muted);
  18. --evento-purple: var(--fest-purple);
  19. --evento-border: rgba(21, 38, 92, 0.1);
  20. --evento-gutter: clamp(0.85rem, 3vw, 1.25rem);
  21. position: relative;
  22. width: 100%;
  23. max-width: 100%;
  24. min-height: 100vh;
  25. min-height: 100dvh;
  26. display: flex;
  27. flex-direction: column;
  28. font-family: "Plus Jakarta Sans", "Public Sans", system-ui, sans-serif;
  29. color: var(--fest-text);
  30. overflow-x: hidden;
  31. }
  32. html.welcome-bacheca-page,
  33. html.welcome-bacheca-page body {
  34. height: 100%;
  35. margin: 0;
  36. background: #f4f5f9;
  37. }
  38. html.welcome-bacheca-page .layout-wrapper,
  39. html.welcome-bacheca-page .content-wrapper,
  40. html.welcome-bacheca-page .layout-page,
  41. html.welcome-bacheca-page .container-xxl {
  42. padding: 0 !important;
  43. margin: 0 !important;
  44. max-width: 100% !important;
  45. }
  46. html.welcome-bacheca-page .d-flex.flex-column.min-vh-100 {
  47. min-height: 100vh !important;
  48. min-height: 100dvh !important;
  49. }
  50. html.welcome-bacheca-page .misc-wrapper,
  51. .misc-wrapper.misc-wrapper--welcome-bacheca {
  52. display: flex !important;
  53. flex-direction: column !important;
  54. min-height: 100vh;
  55. min-height: 100dvh;
  56. width: 100%;
  57. max-width: 100%;
  58. padding: 0;
  59. margin: 0;
  60. align-items: stretch !important;
  61. justify-content: flex-start !important;
  62. text-align: start !important;
  63. background: transparent;
  64. }
  65. html.welcome-bacheca-page .row.mt-3.mb-3,
  66. html.welcome-bacheca-page footer:not(.welcome-bacheca__footer) {
  67. display: none !important;
  68. }
  69. .welcome-bacheca__bg {
  70. position: fixed;
  71. inset: 0;
  72. z-index: 0;
  73. pointer-events: none;
  74. background: linear-gradient(150deg, #fff7f0 0%, #f3ebf8 42%, #e8eef8 100%);
  75. }
  76. .welcome-bacheca__bg::before {
  77. content: "";
  78. position: absolute;
  79. inset: 0;
  80. background:
  81. radial-gradient(ellipse 70% 45% at 12% 12%, color-mix(in srgb, var(--evento-accent) 28%, transparent) 0%, transparent 55%),
  82. radial-gradient(ellipse 55% 40% at 90% 80%, rgba(96, 45, 145, 0.18) 0%, transparent 52%);
  83. }
  84. .welcome-bacheca__top {
  85. position: sticky;
  86. top: 0;
  87. z-index: 20;
  88. display: flex;
  89. align-items: center;
  90. justify-content: space-between;
  91. gap: 1rem;
  92. width: 100%;
  93. padding: calc(0.75rem + env(safe-area-inset-top, 0px)) var(--evento-gutter) 0.75rem;
  94. background: rgba(255, 255, 255, 0.92);
  95. backdrop-filter: blur(10px);
  96. border-bottom: 1px solid var(--evento-border);
  97. }
  98. .welcome-bacheca__top::after {
  99. content: "";
  100. position: absolute;
  101. left: 0;
  102. right: 0;
  103. bottom: 0;
  104. height: 3px;
  105. background: linear-gradient(90deg, var(--evento-accent) 0%, var(--evento-purple) 55%, var(--evento-navy) 100%);
  106. opacity: 0.85;
  107. }
  108. .welcome-bacheca__top-link {
  109. display: inline-flex;
  110. align-items: center;
  111. gap: 0.35rem;
  112. font-size: 0.88rem;
  113. font-weight: 600;
  114. color: var(--evento-navy);
  115. text-decoration: none;
  116. max-width: 70%;
  117. }
  118. .welcome-bacheca__top-link span {
  119. overflow: hidden;
  120. text-overflow: ellipsis;
  121. white-space: nowrap;
  122. }
  123. .welcome-bacheca__top-link:hover {
  124. color: var(--evento-accent);
  125. }
  126. .welcome-bacheca__brand-logo {
  127. display: block;
  128. height: 1.55rem !important;
  129. width: auto !important;
  130. max-height: 1.55rem !important;
  131. max-width: 7.5rem;
  132. object-fit: contain;
  133. opacity: 0.92;
  134. }
  135. .welcome-bacheca__shell {
  136. position: relative;
  137. z-index: 2;
  138. width: 100%;
  139. max-width: 72rem;
  140. margin: 0 auto;
  141. padding: 1.15rem var(--evento-gutter) 2rem;
  142. display: flex;
  143. flex-direction: column;
  144. flex: 1;
  145. }
  146. .welcome-bacheca__intro {
  147. margin-bottom: 1.15rem;
  148. max-width: 40rem;
  149. }
  150. .welcome-bacheca__btn {
  151. display: inline-flex;
  152. align-items: center;
  153. justify-content: center;
  154. gap: 0.35rem;
  155. padding: 0.55rem 1.1rem;
  156. font-size: 0.875rem;
  157. font-weight: 600;
  158. border-radius: 0.65rem;
  159. text-decoration: none;
  160. border: 1px solid transparent;
  161. transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  162. }
  163. .welcome-bacheca__btn--ghost {
  164. color: var(--fest-navy);
  165. background: #fff;
  166. border-color: rgba(21, 38, 92, 0.16);
  167. }
  168. .welcome-bacheca__btn--ghost:hover {
  169. color: var(--fest-navy);
  170. background: #fff;
  171. border-color: var(--fest-navy);
  172. }
  173. .welcome-bacheca__btn--primary {
  174. color: #fff;
  175. background: linear-gradient(135deg, var(--fest-orange) 0%, var(--fest-orange-soft) 100%);
  176. box-shadow: 0 3px 12px rgba(245, 130, 32, 0.3);
  177. }
  178. .welcome-bacheca__btn--primary:hover {
  179. color: #fff;
  180. box-shadow: 0 4px 16px rgba(245, 130, 32, 0.38);
  181. transform: translateY(-1px);
  182. }
  183. .welcome-bacheca__eyebrow {
  184. display: inline-flex;
  185. align-items: center;
  186. gap: 0.45rem;
  187. margin: 0 0 0.45rem;
  188. font-size: 0.72rem;
  189. font-weight: 700;
  190. letter-spacing: 0.12em;
  191. text-transform: uppercase;
  192. color: var(--fest-purple);
  193. }
  194. .welcome-bacheca__live-dot {
  195. width: 0.5rem;
  196. height: 0.5rem;
  197. border-radius: 50%;
  198. background: #22c55e;
  199. box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.25);
  200. animation: welcome-pulse 2s ease-in-out infinite;
  201. }
  202. @keyframes welcome-pulse {
  203. 0%, 100% { opacity: 1; transform: scale(1); }
  204. 50% { opacity: 0.65; transform: scale(0.92); }
  205. }
  206. .welcome-bacheca__title {
  207. font-size: clamp(1.45rem, 3.5vw, 1.85rem);
  208. font-weight: 800;
  209. color: var(--fest-navy);
  210. margin: 0;
  211. line-height: 1.15;
  212. letter-spacing: -0.03em;
  213. }
  214. .welcome-bacheca__lead {
  215. font-size: 0.95rem;
  216. line-height: 1.55;
  217. color: var(--fest-text-muted);
  218. margin: 0.45rem 0 0;
  219. max-width: 32rem;
  220. }
  221. /* Board */
  222. .welcome-bacheca__board {
  223. margin-bottom: 1rem;
  224. }
  225. .welcome-bacheca__search {
  226. display: flex;
  227. align-items: center;
  228. gap: 0.55rem;
  229. margin-bottom: 0.85rem;
  230. padding: 0.6rem 0.95rem;
  231. border-radius: 0.85rem;
  232. background: #fff;
  233. border: 1px solid rgba(21, 38, 92, 0.06);
  234. box-shadow: 0 2px 12px rgba(21, 38, 92, 0.06);
  235. }
  236. .welcome-bacheca__search i {
  237. color: var(--fest-text-muted);
  238. font-size: 1.15rem;
  239. }
  240. .welcome-bacheca__search-input {
  241. flex: 1;
  242. min-width: 0;
  243. border: none;
  244. background: transparent;
  245. font: inherit;
  246. font-size: 0.92rem;
  247. color: var(--fest-text);
  248. outline: none;
  249. }
  250. .welcome-bacheca__search-input::placeholder {
  251. color: #9aa3b2;
  252. }
  253. .welcome-bacheca__search-empty {
  254. margin: 0.5rem 0 0;
  255. text-align: center;
  256. font-size: 0.9rem;
  257. color: var(--fest-text-muted);
  258. }
  259. /* Carosello organizzazioni */
  260. .welcome-bacheca__carousel {
  261. position: relative;
  262. margin-bottom: 1rem;
  263. }
  264. .welcome-bacheca__carousel-viewport {
  265. overflow: hidden;
  266. }
  267. .welcome-bacheca__carousel-track {
  268. display: flex;
  269. gap: 0.75rem;
  270. padding: 0.15rem 0 0.65rem;
  271. transition: transform 0.32s ease;
  272. will-change: transform;
  273. }
  274. .welcome-bacheca__carousel-slide {
  275. flex: 0 0 min(100%, 18rem);
  276. min-width: min(100%, 18rem);
  277. cursor: pointer;
  278. }
  279. .welcome-bacheca__carousel-slide-inner {
  280. display: flex;
  281. align-items: center;
  282. gap: 0.85rem;
  283. min-height: 0;
  284. padding: 0.85rem 1rem;
  285. border-radius: 0.85rem;
  286. background: #fff;
  287. border: 1px solid rgba(21, 38, 92, 0.06);
  288. box-shadow: 0 2px 12px rgba(21, 38, 92, 0.06);
  289. transition: border-color 0.2s ease, box-shadow 0.2s ease;
  290. }
  291. .welcome-bacheca__carousel-slide.is-active .welcome-bacheca__carousel-slide-inner {
  292. border-color: color-mix(in srgb, var(--org-accent, var(--fest-orange)) 40%, #fff);
  293. box-shadow: 0 4px 16px color-mix(in srgb, var(--org-accent, var(--fest-orange)) 12%, transparent);
  294. }
  295. .welcome-bacheca__carousel-slide-title {
  296. margin: 0;
  297. font-size: 1rem;
  298. font-weight: 700;
  299. color: var(--fest-navy);
  300. line-height: 1.2;
  301. }
  302. .welcome-bacheca__carousel-slide-meta {
  303. margin: 0.2rem 0 0;
  304. font-size: 0.8rem;
  305. font-weight: 500;
  306. color: var(--fest-text-muted);
  307. }
  308. .welcome-bacheca__org-avatar--lg {
  309. width: 3rem;
  310. height: 3rem;
  311. border-radius: 0.85rem;
  312. flex-shrink: 0;
  313. }
  314. .welcome-bacheca__carousel-slide-copy {
  315. min-width: 0;
  316. }
  317. .welcome-bacheca__carousel-nav {
  318. position: absolute;
  319. top: 50%;
  320. transform: translateY(-65%);
  321. z-index: 2;
  322. width: 2.35rem;
  323. height: 2.35rem;
  324. display: flex;
  325. align-items: center;
  326. justify-content: center;
  327. border: 1px solid rgba(21, 38, 92, 0.1);
  328. border-radius: 50%;
  329. background: rgba(255, 255, 255, 0.95);
  330. color: var(--fest-navy);
  331. box-shadow: 0 8px 20px rgba(21, 38, 92, 0.12);
  332. transition: opacity 0.15s ease, transform 0.15s ease;
  333. }
  334. .welcome-bacheca__carousel-nav:hover:not(:disabled) {
  335. transform: translateY(-65%) scale(1.05);
  336. }
  337. .welcome-bacheca__carousel-nav:disabled {
  338. opacity: 0.35;
  339. cursor: not-allowed;
  340. }
  341. .welcome-bacheca__carousel-nav--prev {
  342. left: -0.35rem;
  343. }
  344. .welcome-bacheca__carousel-nav--next {
  345. right: -0.35rem;
  346. }
  347. .welcome-bacheca__carousel-nav i {
  348. font-size: 1.45rem;
  349. }
  350. .welcome-bacheca__carousel-dots {
  351. display: flex;
  352. justify-content: center;
  353. flex-wrap: wrap;
  354. gap: 0.45rem;
  355. margin-top: 0.35rem;
  356. }
  357. .welcome-bacheca__carousel-dot {
  358. width: 0.55rem;
  359. height: 0.55rem;
  360. padding: 0;
  361. border: none;
  362. border-radius: 50%;
  363. background: rgba(21, 38, 92, 0.18);
  364. transition: transform 0.15s ease, background 0.15s ease;
  365. }
  366. .welcome-bacheca__carousel-dot.is-active {
  367. transform: scale(1.25);
  368. background: var(--fest-orange);
  369. }
  370. .welcome-bacheca__org-solo {
  371. margin-bottom: 1.35rem;
  372. }
  373. .welcome-bacheca__org-solo .welcome-bacheca__carousel-slide {
  374. flex: 1 1 auto;
  375. min-width: 0;
  376. cursor: default;
  377. }
  378. /* Pannello attività */
  379. .welcome-bacheca__org-stage {
  380. padding-top: 0.25rem;
  381. }
  382. .welcome-bacheca__org-stage-body {
  383. padding: 0;
  384. }
  385. .welcome-bacheca__org-panel-body.is-active {
  386. animation: welcome-panel-in 0.32s ease both;
  387. }
  388. @keyframes welcome-panel-in {
  389. from {
  390. opacity: 0;
  391. transform: translateY(8px);
  392. }
  393. to {
  394. opacity: 1;
  395. transform: translateY(0);
  396. }
  397. }
  398. /* Organizzazioni (avatar condiviso) */
  399. .welcome-bacheca__org-avatar {
  400. flex-shrink: 0;
  401. width: 3.25rem;
  402. height: 3.25rem;
  403. display: flex;
  404. align-items: center;
  405. justify-content: center;
  406. border-radius: 1rem;
  407. overflow: hidden;
  408. background: #fff;
  409. border: 2px solid color-mix(in srgb, var(--org-accent, var(--fest-orange)) 35%, #fff);
  410. box-shadow:
  411. 0 0 0 3px color-mix(in srgb, var(--org-accent, var(--fest-orange)) 12%, transparent),
  412. 0 8px 20px rgba(21, 38, 92, 0.1);
  413. }
  414. .welcome-bacheca__org-avatar img,
  415. .welcome-bacheca__org-avatar-img {
  416. width: 72%;
  417. height: 72%;
  418. object-fit: contain;
  419. }
  420. .welcome-bacheca__org-monogram {
  421. display: flex;
  422. align-items: center;
  423. justify-content: center;
  424. width: 100%;
  425. height: 100%;
  426. font-size: 0.95rem;
  427. font-weight: 800;
  428. letter-spacing: 0.04em;
  429. color: #fff;
  430. background: linear-gradient(
  431. 145deg,
  432. var(--org-accent, var(--fest-orange)) 0%,
  433. color-mix(in srgb, var(--org-accent, var(--fest-orange)) 60%, var(--fest-navy)) 100%
  434. );
  435. }
  436. .welcome-bacheca__org-kicker {
  437. margin: 0 0 0.15rem;
  438. font-size: 0.68rem;
  439. font-weight: 700;
  440. letter-spacing: 0.14em;
  441. text-transform: uppercase;
  442. color: color-mix(in srgb, var(--org-accent, var(--fest-purple)) 70%, var(--fest-text-muted));
  443. }
  444. .welcome-bacheca__org-badge {
  445. flex-shrink: 0;
  446. font-size: 0.78rem;
  447. font-weight: 700;
  448. color: var(--fest-navy);
  449. background: rgba(255, 255, 255, 0.92);
  450. border: 1px solid rgba(21, 38, 92, 0.1);
  451. padding: 0.35rem 0.7rem;
  452. border-radius: 2rem;
  453. white-space: nowrap;
  454. }
  455. .welcome-bacheca__org-grid {
  456. gap: 1rem;
  457. }
  458. @keyframes welcome-org-in {
  459. from {
  460. opacity: 0;
  461. transform: translateY(12px);
  462. }
  463. to {
  464. opacity: 1;
  465. transform: translateY(0);
  466. }
  467. }
  468. /* Grid eventi — card locandina A4 */
  469. .welcome-bacheca__grid {
  470. display: grid;
  471. grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr));
  472. gap: 1.15rem;
  473. align-items: stretch;
  474. padding: 0;
  475. margin: 0;
  476. }
  477. @media (min-width: 640px) {
  478. .welcome-bacheca__grid {
  479. grid-template-columns: repeat(auto-fill, minmax(14.5rem, 1fr));
  480. gap: 1.25rem;
  481. }
  482. }
  483. @media (min-width: 900px) {
  484. .welcome-bacheca__org-grid {
  485. grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
  486. }
  487. }
  488. @media (min-width: 1200px) {
  489. .welcome-bacheca__org-grid {
  490. grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr));
  491. }
  492. }
  493. .welcome-bacheca__card {
  494. position: relative;
  495. display: flex;
  496. flex-direction: column;
  497. min-width: 0;
  498. height: 100%;
  499. }
  500. .welcome-bacheca__card-shell {
  501. position: relative;
  502. display: flex;
  503. flex-direction: column;
  504. height: 100%;
  505. border-radius: 0.9rem;
  506. background: #fff;
  507. border: 1px solid rgba(21, 38, 92, 0.08);
  508. box-shadow: 0 2px 12px rgba(21, 38, 92, 0.05);
  509. overflow: hidden;
  510. transition: box-shadow 0.2s ease, transform 0.2s ease;
  511. }
  512. .welcome-bacheca__card:hover .welcome-bacheca__card-shell {
  513. transform: translateY(-3px);
  514. box-shadow: 0 8px 24px rgba(21, 38, 92, 0.1);
  515. }
  516. .welcome-bacheca__card-poster-link {
  517. display: block;
  518. color: inherit;
  519. text-decoration: none;
  520. }
  521. .welcome-bacheca__card-poster-link:focus-visible {
  522. outline: 2px solid var(--fest-orange);
  523. outline-offset: -2px;
  524. }
  525. .welcome-bacheca__card-menu {
  526. position: absolute;
  527. top: 0.45rem;
  528. right: 0.45rem;
  529. z-index: 2;
  530. width: 1.85rem;
  531. height: 1.85rem;
  532. display: flex;
  533. align-items: center;
  534. justify-content: center;
  535. padding: 0;
  536. border: none;
  537. border-radius: 50%;
  538. background: rgba(255, 255, 255, 0.94);
  539. color: var(--fest-navy);
  540. font-size: 1.15rem;
  541. line-height: 1;
  542. cursor: pointer;
  543. box-shadow: 0 2px 10px rgba(21, 38, 92, 0.12);
  544. transition: transform 0.15s ease, box-shadow 0.15s ease;
  545. }
  546. .welcome-bacheca__card-menu:hover {
  547. transform: scale(1.06);
  548. box-shadow: 0 4px 14px rgba(21, 38, 92, 0.16);
  549. }
  550. .welcome-bacheca__card-menu:focus-visible {
  551. outline: 2px solid var(--fest-orange);
  552. outline-offset: 2px;
  553. }
  554. .welcome-bacheca__card-poster {
  555. position: relative;
  556. flex-shrink: 0;
  557. width: 100%;
  558. aspect-ratio: 210 / 297;
  559. background: #e8ecf4;
  560. overflow: hidden;
  561. }
  562. .welcome-bacheca__card-poster::after {
  563. content: "";
  564. position: absolute;
  565. inset: 0;
  566. z-index: 1;
  567. pointer-events: none;
  568. box-shadow: inset 0 0 0 1px rgba(21, 38, 92, 0.08);
  569. }
  570. .welcome-bacheca__card-poster-img {
  571. display: block;
  572. width: 100%;
  573. height: 100%;
  574. object-fit: cover;
  575. object-position: center top;
  576. }
  577. .welcome-bacheca__card-poster--placeholder {
  578. background: linear-gradient(
  579. 165deg,
  580. color-mix(in srgb, var(--card-accent, var(--fest-orange)) 28%, #fff) 0%,
  581. color-mix(in srgb, var(--card-accent, var(--fest-orange)) 12%, #eef1f7) 38%,
  582. #e8ecf4 68%,
  583. color-mix(in srgb, var(--fest-purple) 16%, #e8ecf4) 100%
  584. );
  585. }
  586. .welcome-bacheca__card-poster--placeholder::before {
  587. content: "";
  588. position: absolute;
  589. inset: 0;
  590. background:
  591. radial-gradient(circle at 18% 14%, rgba(255, 255, 255, 0.55) 0%, transparent 42%),
  592. radial-gradient(circle at 82% 88%, rgba(255, 255, 255, 0.35) 0%, transparent 40%);
  593. pointer-events: none;
  594. }
  595. .welcome-bacheca__card-poster-placeholder {
  596. position: relative;
  597. z-index: 0;
  598. display: flex;
  599. align-items: center;
  600. justify-content: center;
  601. width: 100%;
  602. height: 100%;
  603. padding: 1.5rem 1rem;
  604. }
  605. .welcome-bacheca__card-poster-placeholder-logo {
  606. display: block;
  607. width: min(72%, 6.5rem);
  608. height: auto;
  609. object-fit: contain;
  610. opacity: 0.95;
  611. filter: drop-shadow(0 8px 18px rgba(21, 38, 92, 0.16));
  612. }
  613. .welcome-bacheca__card-chip--poster {
  614. position: absolute;
  615. left: 0.5rem;
  616. bottom: 0.5rem;
  617. z-index: 2;
  618. box-shadow: 0 2px 8px rgba(21, 38, 92, 0.15);
  619. }
  620. .welcome-bacheca__card-head {
  621. display: flex;
  622. align-items: center;
  623. gap: 0.55rem;
  624. min-width: 0;
  625. }
  626. .welcome-bacheca__card-logo {
  627. flex-shrink: 0;
  628. width: 2.25rem;
  629. height: 2.25rem;
  630. display: flex;
  631. align-items: center;
  632. justify-content: center;
  633. border-radius: 0.5rem;
  634. background: #fff;
  635. border: 1px solid rgba(21, 38, 92, 0.08);
  636. box-shadow: 0 2px 8px rgba(21, 38, 92, 0.06);
  637. overflow: hidden;
  638. }
  639. .welcome-bacheca__card-logo img {
  640. width: 88%;
  641. height: 88%;
  642. object-fit: contain;
  643. }
  644. .welcome-bacheca__card-avatar {
  645. display: flex;
  646. align-items: center;
  647. justify-content: center;
  648. width: 100%;
  649. height: 100%;
  650. font-size: 1.1rem;
  651. font-weight: 800;
  652. color: #fff;
  653. background: linear-gradient(135deg, var(--card-accent, var(--fest-orange)), var(--fest-purple));
  654. }
  655. .welcome-bacheca__card-content {
  656. display: flex;
  657. flex-direction: column;
  658. flex: 1;
  659. gap: 0.35rem;
  660. min-height: 5.75rem;
  661. padding: 0.8rem 0.85rem 0.9rem;
  662. color: inherit;
  663. text-decoration: none;
  664. }
  665. .welcome-bacheca__card-footer {
  666. border-top: 3px solid var(--card-accent, var(--fest-orange));
  667. background: linear-gradient(
  668. 180deg,
  669. color-mix(in srgb, var(--card-accent, var(--fest-orange)) 7%, #fff) 0%,
  670. #f8f9fc 100%
  671. );
  672. }
  673. .welcome-bacheca__card:hover .welcome-bacheca__card-footer {
  674. background: linear-gradient(
  675. 180deg,
  676. color-mix(in srgb, var(--card-accent, var(--fest-orange)) 10%, #fff) 0%,
  677. #fff 100%
  678. );
  679. }
  680. .welcome-bacheca__card-content:hover {
  681. color: inherit;
  682. }
  683. .welcome-bacheca__card-content:focus-visible {
  684. outline: 2px solid var(--fest-orange);
  685. outline-offset: -2px;
  686. }
  687. .welcome-bacheca__card-title {
  688. margin: 0;
  689. font-size: 0.95rem;
  690. font-weight: 700;
  691. color: var(--fest-navy);
  692. line-height: 1.25;
  693. min-height: 2.5rem;
  694. overflow: hidden;
  695. text-overflow: ellipsis;
  696. display: -webkit-box;
  697. -webkit-line-clamp: 2;
  698. -webkit-box-orient: vertical;
  699. }
  700. .welcome-bacheca__card-desc {
  701. margin: 0;
  702. font-size: 0.82rem;
  703. line-height: 1.45;
  704. color: var(--fest-text-muted);
  705. min-height: 2.35rem;
  706. overflow: hidden;
  707. text-overflow: ellipsis;
  708. display: -webkit-box;
  709. -webkit-line-clamp: 2;
  710. -webkit-box-orient: vertical;
  711. }
  712. .welcome-bacheca__card-chip {
  713. display: inline-flex;
  714. align-items: center;
  715. gap: 0.25rem;
  716. align-self: flex-start;
  717. font-size: 0.68rem;
  718. font-weight: 600;
  719. color: #c45f00;
  720. background: rgba(245, 130, 32, 0.1);
  721. padding: 0.15rem 0.45rem;
  722. border-radius: 2rem;
  723. }
  724. /* Empty */
  725. .welcome-bacheca__empty {
  726. text-align: center;
  727. padding: 3rem 1.35rem;
  728. background: #fff;
  729. border-radius: 0.85rem;
  730. border: 1px solid rgba(21, 38, 92, 0.06);
  731. box-shadow: 0 2px 12px rgba(21, 38, 92, 0.06);
  732. }
  733. .welcome-bacheca__empty-icon {
  734. width: 4rem;
  735. height: 4rem;
  736. margin: 0 auto 1rem;
  737. display: flex;
  738. align-items: center;
  739. justify-content: center;
  740. border-radius: 50%;
  741. background: linear-gradient(135deg, rgba(245, 130, 32, 0.15), rgba(96, 45, 145, 0.12));
  742. color: var(--fest-purple);
  743. font-size: 1.75rem;
  744. }
  745. .welcome-bacheca__empty-title {
  746. font-size: 1.15rem;
  747. font-weight: 700;
  748. color: var(--fest-navy);
  749. margin: 0 0 0.5rem;
  750. }
  751. .welcome-bacheca__empty-text {
  752. color: var(--fest-text-muted);
  753. margin: 0 0 1.25rem;
  754. max-width: 22rem;
  755. margin-inline: auto;
  756. }
  757. /* Footer */
  758. .welcome-bacheca__footer {
  759. margin-top: auto;
  760. padding-top: 2rem;
  761. font-size: 0.78rem;
  762. color: var(--fest-text-muted);
  763. text-align: center;
  764. }
  765. /* Modal */
  766. body.modal-open > .modal-backdrop.show {
  767. --bs-backdrop-bg: #15265c;
  768. --bs-backdrop-opacity: 0.48;
  769. z-index: 1050;
  770. }
  771. #welcomeAttivitaModal {
  772. z-index: 1055;
  773. }
  774. #welcomeAttivitaModal.show .modal-dialog {
  775. position: relative;
  776. z-index: 1;
  777. }
  778. .welcome-bacheca__modal-dialog {
  779. width: min(22.5rem, calc(100% - 2rem));
  780. max-width: 22.5rem;
  781. margin: 1.75rem auto;
  782. display: flex;
  783. align-items: center;
  784. min-height: calc(100% - 3.5rem);
  785. }
  786. .welcome-bacheca__modal-dialog.modal-dialog-centered {
  787. min-height: calc(100% - 3.5rem);
  788. }
  789. .welcome-bacheca__modal {
  790. overflow: hidden;
  791. border: 1px solid rgba(21, 38, 92, 0.1);
  792. border-radius: 1rem;
  793. background: #fff;
  794. box-shadow: 0 20px 56px rgba(21, 38, 92, 0.2);
  795. font-family: "Plus Jakarta Sans", "Public Sans", system-ui, sans-serif;
  796. }
  797. .welcome-bacheca__modal-hero {
  798. position: relative;
  799. width: 100%;
  800. aspect-ratio: 210 / 120;
  801. background: #e8ecf4;
  802. overflow: hidden;
  803. }
  804. .welcome-bacheca__modal-hero::after {
  805. content: "";
  806. position: absolute;
  807. inset: 0;
  808. pointer-events: none;
  809. box-shadow: inset 0 0 0 1px rgba(21, 38, 92, 0.08);
  810. }
  811. .welcome-bacheca__modal-hero-img {
  812. display: block;
  813. width: 100%;
  814. height: 100%;
  815. object-fit: cover;
  816. object-position: center top;
  817. }
  818. .welcome-bacheca__modal-hero--placeholder {
  819. background: linear-gradient(
  820. 165deg,
  821. color-mix(in srgb, var(--card-accent, var(--fest-orange)) 28%, #fff) 0%,
  822. color-mix(in srgb, var(--card-accent, var(--fest-orange)) 12%, #eef1f7) 38%,
  823. #e8ecf4 68%,
  824. color-mix(in srgb, var(--fest-purple) 16%, #e8ecf4) 100%
  825. );
  826. }
  827. .welcome-bacheca__modal-hero-placeholder {
  828. display: flex;
  829. align-items: center;
  830. justify-content: center;
  831. width: 100%;
  832. height: 100%;
  833. padding: 1rem;
  834. }
  835. .welcome-bacheca__modal-hero-placeholder-logo {
  836. display: block;
  837. width: min(42%, 4.5rem);
  838. height: auto;
  839. object-fit: contain;
  840. opacity: 0.95;
  841. filter: drop-shadow(0 6px 14px rgba(21, 38, 92, 0.14));
  842. }
  843. .welcome-bacheca__modal-panel {
  844. border-top: 3px solid var(--card-accent, var(--fest-orange));
  845. background: linear-gradient(
  846. 180deg,
  847. color-mix(in srgb, var(--card-accent, var(--fest-orange)) 7%, #fff) 0%,
  848. #fff 100%
  849. );
  850. }
  851. .welcome-bacheca__modal-header {
  852. display: flex;
  853. align-items: flex-start;
  854. gap: 0.75rem;
  855. padding: 1rem 1rem 0.35rem;
  856. }
  857. .welcome-bacheca__modal-head {
  858. display: flex;
  859. align-items: center;
  860. gap: 0.75rem;
  861. flex: 1;
  862. min-width: 0;
  863. }
  864. .welcome-bacheca__modal-copy {
  865. min-width: 0;
  866. }
  867. .welcome-bacheca__modal-close {
  868. flex-shrink: 0;
  869. margin: 0;
  870. padding: 0.35rem;
  871. opacity: 0.55;
  872. transform: none !important;
  873. box-shadow: none !important;
  874. background-color: transparent !important;
  875. filter: none !important;
  876. border-radius: 0.35rem;
  877. }
  878. .welcome-bacheca__modal-close::before {
  879. display: none;
  880. }
  881. .welcome-bacheca__modal-close:hover,
  882. .welcome-bacheca__modal-close:focus {
  883. opacity: 0.85;
  884. transform: none !important;
  885. box-shadow: none !important;
  886. }
  887. .welcome-bacheca__modal-media {
  888. flex-shrink: 0;
  889. width: 2.75rem;
  890. height: 2.75rem;
  891. display: flex;
  892. align-items: center;
  893. justify-content: center;
  894. border-radius: 0.55rem;
  895. background: #fff;
  896. border: 1px solid rgba(21, 38, 92, 0.08);
  897. box-shadow: 0 2px 8px rgba(21, 38, 92, 0.06);
  898. overflow: hidden;
  899. }
  900. .welcome-bacheca__modal-logo {
  901. width: 88%;
  902. height: 88%;
  903. object-fit: contain;
  904. }
  905. .welcome-bacheca__modal-avatar {
  906. display: flex;
  907. align-items: center;
  908. justify-content: center;
  909. width: 100%;
  910. height: 100%;
  911. font-weight: 700;
  912. font-size: 0.85rem;
  913. color: #fff;
  914. background: linear-gradient(135deg, var(--card-accent, var(--fest-orange)), var(--fest-purple));
  915. }
  916. .welcome-bacheca__modal-title {
  917. margin: 0;
  918. font-size: 1.05rem;
  919. font-weight: 700;
  920. color: var(--fest-navy);
  921. line-height: 1.25;
  922. }
  923. .welcome-bacheca__modal-desc {
  924. margin: 0.2rem 0 0;
  925. font-size: 0.84rem;
  926. color: var(--fest-text-muted);
  927. line-height: 1.45;
  928. }
  929. .welcome-bacheca__modal-body {
  930. padding: 0.35rem 1rem 1.1rem;
  931. }
  932. .welcome-bacheca__modal-hint {
  933. font-size: 0.72rem;
  934. font-weight: 700;
  935. text-transform: uppercase;
  936. letter-spacing: 0.06em;
  937. color: var(--fest-text-muted);
  938. margin: 0 0 0.65rem;
  939. }
  940. .welcome-bacheca__modal-actions {
  941. display: flex;
  942. flex-direction: column;
  943. gap: 0.55rem;
  944. }
  945. .welcome-bacheca__modal-actions .welcome-bacheca__action[hidden] {
  946. display: none !important;
  947. }
  948. .welcome-bacheca__action {
  949. display: flex;
  950. align-items: center;
  951. gap: 0.85rem;
  952. width: 100%;
  953. padding: 0.8rem 0.9rem;
  954. text-align: left;
  955. text-decoration: none;
  956. color: var(--fest-text);
  957. background: #fff;
  958. border: 1px solid rgba(21, 38, 92, 0.08);
  959. border-radius: 0.7rem;
  960. box-shadow: 0 1px 4px rgba(21, 38, 92, 0.04);
  961. transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
  962. }
  963. button.welcome-bacheca__action {
  964. font: inherit;
  965. }
  966. .welcome-bacheca__action:not(.is-disabled):hover {
  967. background: #fff;
  968. border-color: color-mix(in srgb, var(--card-accent, var(--fest-orange)) 28%, rgba(21, 38, 92, 0.16));
  969. color: var(--fest-navy);
  970. transform: translateY(-1px);
  971. box-shadow: 0 6px 16px rgba(21, 38, 92, 0.08);
  972. }
  973. .welcome-bacheca__action.is-disabled {
  974. opacity: 0.55;
  975. cursor: not-allowed;
  976. }
  977. .welcome-bacheca__action strong {
  978. display: block;
  979. font-size: 0.9rem;
  980. font-weight: 600;
  981. color: var(--fest-navy);
  982. }
  983. .welcome-bacheca__action small {
  984. display: block;
  985. font-size: 0.78rem;
  986. color: var(--fest-text-muted);
  987. margin-top: 0.1rem;
  988. }
  989. .welcome-bacheca__action-icon {
  990. flex-shrink: 0;
  991. width: 2.25rem;
  992. height: 2.25rem;
  993. display: flex;
  994. align-items: center;
  995. justify-content: center;
  996. border-radius: 0.5rem;
  997. font-size: 1.15rem;
  998. background: rgba(21, 38, 92, 0.08);
  999. color: var(--fest-navy);
  1000. }
  1001. .welcome-bacheca__action-icon--orange {
  1002. background: rgba(245, 130, 32, 0.15);
  1003. color: #c45f00;
  1004. }
  1005. .welcome-bacheca__action-icon--purple {
  1006. background: rgba(96, 45, 145, 0.12);
  1007. color: var(--fest-purple);
  1008. }
  1009. .welcome-bacheca__action-icon--navy {
  1010. background: rgba(21, 38, 92, 0.1);
  1011. color: var(--fest-navy);
  1012. }
  1013. @media (max-width: 575.98px) {
  1014. .welcome-bacheca__intro {
  1015. margin-bottom: 1rem;
  1016. }
  1017. .welcome-bacheca__grid {
  1018. grid-template-columns: repeat(2, minmax(0, 1fr));
  1019. gap: 1rem;
  1020. }
  1021. .welcome-bacheca__org-grid {
  1022. grid-template-columns: repeat(2, minmax(0, 1fr));
  1023. }
  1024. .welcome-bacheca__carousel-nav--prev {
  1025. left: 0.15rem;
  1026. }
  1027. .welcome-bacheca__carousel-nav--next {
  1028. right: 0.15rem;
  1029. }
  1030. .welcome-bacheca__carousel-slide {
  1031. flex-basis: 100%;
  1032. min-width: 100%;
  1033. }
  1034. .welcome-bacheca__org-stage-head {
  1035. flex-direction: column;
  1036. align-items: flex-start;
  1037. }
  1038. .welcome-bacheca__org-badge {
  1039. align-self: flex-start;
  1040. }
  1041. .welcome-bacheca__org-stage-body {
  1042. padding: 0;
  1043. }
  1044. }