Keine Beschreibung
Du kannst nicht mehr als 25 Themen auswählen Themen müssen mit entweder einem Buchstaben oder einer Ziffer beginnen. Sie können Bindestriche („-“) enthalten und bis zu 35 Zeichen lang sein.

welcome.css 27KB

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