- altro aggiornamento restying
- Invio RIS aggiornato - Eventi - Home Page restyling
This commit is contained in:
Surya Paolo
375
src/components/Riso_Home_ParteFinale/Riso_Home_ParteFinale.scss
Normal file
375
src/components/Riso_Home_ParteFinale/Riso_Home_ParteFinale.scss
Normal file
@@ -0,0 +1,375 @@
|
||||
|
||||
/* =========================================================
|
||||
RISO Home (parte finale) — refresh estetico coerente
|
||||
========================================================= */
|
||||
|
||||
.riso-modern-home {
|
||||
padding: $s-md;
|
||||
padding-bottom: calc(#{$s-md} + env(safe-area-inset-bottom));
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $s-md;
|
||||
|
||||
}
|
||||
|
||||
/* ---- Section shell (glass card) ---- */
|
||||
.content-section,
|
||||
.community-actions-section,
|
||||
.footer-section-modern {
|
||||
border-radius: $r-lg;
|
||||
padding: $s-md;
|
||||
background: rgba(255, 255, 255, 0.72);
|
||||
border: 1px solid rgba(255, 255, 255, 0.55);
|
||||
box-shadow: 0 14px 40px rgba(16, 24, 40, 0.08);
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
|
||||
:global(body.body--dark) {
|
||||
.content-section,
|
||||
.community-actions-section,
|
||||
.footer-section-modern {
|
||||
background: rgba(16, 24, 40, 0.55);
|
||||
border: 1px solid rgba(255, 255, 255, 0.10);
|
||||
box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
}
|
||||
|
||||
/* ---- Titles ---- */
|
||||
.section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: $s-sm;
|
||||
margin-bottom: $s-sm;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 1.12rem;
|
||||
font-weight: 900;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $s-sm;
|
||||
letter-spacing: 0.01em;
|
||||
|
||||
/* gradient text */
|
||||
background: $gradient-primary;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
|
||||
.q-icon {
|
||||
background: $gradient-primary;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---- Organizations: horizontal scroll ---- */
|
||||
.org-scroll {
|
||||
display: flex;
|
||||
gap: $s-sm;
|
||||
overflow-x: auto;
|
||||
padding-bottom: 4px;
|
||||
scroll-snap-type: x mandatory;
|
||||
|
||||
/* smoother */
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
height: 8px;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: rgba(0, 0, 0, 0.12);
|
||||
border-radius: 999px;
|
||||
}
|
||||
&::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
:global(body.body--dark) {
|
||||
.org-scroll::-webkit-scrollbar-thumb {
|
||||
background: rgba(255, 255, 255, 0.16);
|
||||
}
|
||||
}
|
||||
|
||||
.org-card-scroll {
|
||||
min-width: 190px;
|
||||
max-width: 240px;
|
||||
padding: $s-sm;
|
||||
border-radius: $r-lg;
|
||||
cursor: pointer;
|
||||
scroll-snap-align: start;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: 54px 1fr;
|
||||
gap: $s-sm;
|
||||
align-items: center;
|
||||
|
||||
background: rgba(255, 255, 255, 0.86);
|
||||
border: 1px solid rgba(0, 0, 0, 0.06);
|
||||
transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 16px 36px rgba(16, 24, 40, 0.14);
|
||||
filter: saturate(1.04);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(0px) scale(0.99);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 3px solid rgba(102, 126, 234, 0.35);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.org-info {
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.org-name {
|
||||
font-weight: 900;
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.15;
|
||||
opacity: 0.92;
|
||||
|
||||
/* show full titles (no truncation) */
|
||||
white-space: normal;
|
||||
overflow: visible;
|
||||
text-overflow: unset;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.org-subtitle {
|
||||
font-size: 0.82rem;
|
||||
opacity: 0.72;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
:global(body.body--dark) {
|
||||
.org-card-scroll {
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
border: 1px solid rgba(255, 255, 255, 0.10);
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 16px 36px rgba(0, 0, 0, 0.40);
|
||||
}
|
||||
|
||||
.org-subtitle {
|
||||
opacity: 0.84;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.org-card-scroll.see-more-card {
|
||||
grid-template-columns: 1fr;
|
||||
place-items: center;
|
||||
text-align: center;
|
||||
background: $gradient-primary;
|
||||
border: 1px solid rgba(255, 255, 255, 0.18);
|
||||
color: white;
|
||||
|
||||
.see-more-circle {
|
||||
width: 54px;
|
||||
height: 54px;
|
||||
border-radius: 18px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background: rgba(255, 255, 255, 0.18);
|
||||
border: 1px solid rgba(255, 255, 255, 0.20);
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.see-more-count {
|
||||
font-weight: 900;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.org-name {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
/* Small helper text under scroll */
|
||||
.org-scroll-hint {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $s-xs;
|
||||
font-size: 0.86rem;
|
||||
opacity: 0.72;
|
||||
margin-top: $s-sm;
|
||||
}
|
||||
|
||||
/* ---- Community invite banner ---- */
|
||||
.invite-banner {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: $s-sm;
|
||||
padding: $s-md;
|
||||
border-radius: $r-lg;
|
||||
|
||||
background: linear-gradient(135deg, rgba(34, 197, 94, 0.14), rgba(16, 185, 129, 0.10));
|
||||
border: 1px solid rgba(34, 197, 94, 0.22);
|
||||
}
|
||||
|
||||
:global(body.body--dark) {
|
||||
.invite-banner {
|
||||
background: linear-gradient(135deg, rgba(34, 197, 94, 0.18), rgba(16, 185, 129, 0.12));
|
||||
border: 1px solid rgba(34, 197, 94, 0.22);
|
||||
}
|
||||
}
|
||||
|
||||
.invite-message {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: $s-sm;
|
||||
|
||||
.invite-text {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.invite-main {
|
||||
font-weight: 800;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.invite-count {
|
||||
font-size: 0.86rem;
|
||||
opacity: 0.78;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---- Telegram ---- */
|
||||
.telegram-grid-modern {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: $s-md;
|
||||
|
||||
@media (min-width: 700px) {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
.telegram-card-modern {
|
||||
border-radius: $r-lg;
|
||||
overflow: hidden;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
color: inherit;
|
||||
position: relative;
|
||||
transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease;
|
||||
|
||||
background: rgba(255, 255, 255, 0.86);
|
||||
border: 1px solid rgba(0, 0, 0, 0.06);
|
||||
box-shadow: 0 10px 26px rgba(16, 24, 40, 0.10);
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 16px 36px rgba(16, 24, 40, 0.14);
|
||||
filter: saturate(1.03);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(0px) scale(0.99);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 3px solid rgba(59, 130, 246, 0.25);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
:global(body.body--dark) {
|
||||
.telegram-card-modern {
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
border: 1px solid rgba(255, 255, 255, 0.10);
|
||||
box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.telegram-card-image {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.telegram-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background: linear-gradient(135deg, rgba(59, 130, 246, 0.32), rgba(14, 165, 233, 0.22));
|
||||
}
|
||||
|
||||
.telegram-icon-wrapper {
|
||||
height: 130px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background: linear-gradient(135deg, rgba(59, 130, 246, 0.18), rgba(14, 165, 233, 0.12));
|
||||
}
|
||||
|
||||
.telegram-card-content {
|
||||
padding: $s-md;
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
|
||||
.telegram-card-title {
|
||||
font-weight: 900;
|
||||
font-size: 1.02rem;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.telegram-card-subtitle {
|
||||
font-size: 0.86rem;
|
||||
opacity: 0.74;
|
||||
line-height: 1.25;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---- Footer ---- */
|
||||
.footer-section-modern {
|
||||
display: grid;
|
||||
gap: $s-sm;
|
||||
|
||||
@media (min-width: 700px) {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
align-items: stretch;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-btn-modern {
|
||||
width: 100%;
|
||||
border-radius: 16px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.01em;
|
||||
text-transform: none;
|
||||
|
||||
background: rgba(255, 255, 255, 0.86);
|
||||
border: 1px solid rgba(0, 0, 0, 0.06);
|
||||
|
||||
&:hover {
|
||||
filter: saturate(1.03);
|
||||
}
|
||||
}
|
||||
|
||||
:global(body.body--dark) {
|
||||
.footer-btn-modern {
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
border: 1px solid rgba(255, 255, 255, 0.10);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user