@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 200 800;
font-display: swap;
src: url("../fonts/manrope-latin.woff2?v=20") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 200 800;
font-display: swap;
src: url("../fonts/manrope-latin-ext.woff2?v=20") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
html {
color-scheme: dark;
scroll-behavior: smooth;
}
[id] {
scroll-margin-top: 88px;
}
dialog {
margin: auto;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
.reveal,
.reveal.visible {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
}
body {
font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif;
}
header img[src$="logonuovo.webp"] {
transform-origin: 50% 52%;
transition: transform 0.22s ease;
will-change: transform;
}
header a:hover img[src$="logonuovo.webp"],
header a:focus-visible img[src$="logonuovo.webp"] {
animation: logoPlayfulTilt 1.6s ease both;
}
@keyframes logoPlayfulTilt {
0%,
48%,
100% {
transform: rotate(0deg) scale(1);
}
53% {
transform: rotate(3.4deg) scale(1.015);
}
58% {
transform: rotate(-3deg) scale(1.015);
}
63% {
transform: rotate(2.1deg) scale(1.01);
}
68% {
transform: rotate(-1.4deg) scale(1.005);
}
73% {
transform: rotate(0.6deg) scale(1);
}
}
@media (prefers-reduced-motion: reduce) {
header img[src$="logonuovo.webp"] {
animation: none;
}
}
.login-lock-icon {
transform-origin: 50% 58%;
transition: transform 0.22s ease, color 0.22s ease;
will-change: transform;
}
.auth-card:hover .login-lock-icon,
.auth-card:focus-within .login-lock-icon {
animation: loginLockPlayfulTilt 1.45s ease both;
color: rgba(23, 190, 187, 0.9);
}
@keyframes loginLockPlayfulTilt {
0%,
8%,
58%,
100% {
transform: rotate(0deg) scale(1);
}
13% {
transform: rotate(6deg) scale(1.035);
}
18% {
transform: rotate(-5.2deg) scale(1.035);
}
23% {
transform: rotate(3.8deg) scale(1.025);
}
28% {
transform: rotate(-2.6deg) scale(1.015);
}
33% {
transform: rotate(1.2deg) scale(1);
}
}
@media (prefers-reduced-motion: reduce) {
.login-lock-icon {
animation: none;
}
}
.hero-video-section::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: -1px;
z-index: 5;
height: clamp(8rem, 20vh, 16rem);
pointer-events: none;
background: none;
}
.hero-video-section {
background: transparent;
}
.nav-center-link {
position: relative;
display: inline-flex;
align-items: center;
padding: 0.35rem 0;
color: rgba(255, 255, 255, 0.75);
transform: translateY(0) scale(1);
transition: color 0.25s ease, transform 0.25s ease;
}
.nav-center-link:hover,
.nav-center-link:focus-visible {
color: rgba(255, 255, 255, 0.95);
transform: translateY(-3px) scale(1.04);
}
.nav-center-link::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
border-radius: 999px;
background: #17BEBB;
transform: scaleX(0);
transform-origin: left;
transition: transform 0.25s ease;
}
.nav-center-link:hover::after,
.nav-center-link:focus-visible::after,
.nav-center-link-active::after {
transform: scaleX(1);
}
#profileMenu {
width: 14rem;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 0.95rem;
background: rgba(35, 31, 32, 0.96);
padding: 0.42rem;
color: #FFFFFF;
opacity: 0;
box-shadow: 0 22px 58px rgba(0, 0, 0, 0.32);
transform: translateY(-0.35rem) scale(0.98);
transform-origin: top right;
transition: opacity 0.18s ease, transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
#profileMenu.is-open {
opacity: 1;
transform: translateY(0) scale(1);
}
#profileMenu > a,
#profileMenu > button,
#profileMenu > hr {
opacity: 0;
transform: translateY(-0.35rem);
transition: opacity 0.18s ease, transform 0.18s ease;
}
#profileMenu > a,
#profileMenu > button {
display: block;
width: 100%;
border-radius: 0.72rem;
padding: 0.72rem 0.9rem;
color: rgba(255, 255, 255, 0.76);
font-size: 0.875rem;
font-weight: 500;
line-height: 1.2;
text-align: left;
transition: opacity 0.18s ease, background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
#profileMenu > a:hover,
#profileMenu > a:focus-visible,
#profileMenu > button:hover,
#profileMenu > button:focus-visible {
background: rgba(255, 255, 255, 0.06);
color: #17BEBB;
transform: translateY(-1px);
}
#profileMenu > a.text-sea {
color: #17BEBB;
}
#profileMenu > a.text-lava,
#profileMenu > button.text-lava,
#profileMenu > #logoutBtn {
color: #E4572E;
}
#profileMenu > a.text-lava:hover,
#profileMenu > a.text-lava:focus-visible,
#profileMenu > button.text-lava:hover,
#profileMenu > button.text-lava:focus-visible,
#profileMenu > #logoutBtn:hover,
#profileMenu > #logoutBtn:focus-visible {
background: rgba(228, 87, 46, 0.1);
color: #E4572E;
}
#profileMenu > hr {
margin: 0.25rem 0.35rem;
border-color: rgba(255, 255, 255, 0.1);
}
#profileMenu.is-open > a,
#profileMenu.is-open > button,
#profileMenu.is-open > hr {
opacity: 1;
transform: translateY(0);
}
#profileMenu.is-open > :nth-child(1) { transition-delay: 0.03s; }
#profileMenu.is-open > :nth-child(2) { transition-delay: 0.06s; }
#profileMenu.is-open > :nth-child(3) { transition-delay: 0.09s; }
#profileMenu.is-open > :nth-child(4) { transition-delay: 0.12s; }
#profileMenu.is-open > :nth-child(5) { transition-delay: 0.15s; }
#profileMenu.is-open > :nth-child(6) { transition-delay: 0.18s; }
.nav-register-link {
display: inline-flex;
transform: translateY(0) scale(1);
transition: color 0.25s ease, transform 0.25s ease;
}
.nav-register-link:hover,
.nav-register-link:focus-visible {
color: #17BEBB;
transform: translateY(-3px) scale(1.04);
}
.social-auth-link {
transform: translateY(0) scale(1);
transition: color 0.25s ease, transform 0.25s ease;
}
.social-auth-link:hover,
.social-auth-link:focus-visible {
color: #17BEBB;
transform: translateY(-3px) scale(1.04);
}
.social-auth-link.is-auth-loading {
cursor: wait;
opacity: 0.72;
}
.card-shine {
position: relative;
overflow: hidden;
}
.card-shine::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle at center, rgba(255, 255, 255, 0.04) 0%, transparent 60%);
opacity: 0;
transition: opacity 0.5s ease;
pointer-events: none;
}
.card-shine:hover::before {
opacity: 1;
}
.headline-float {
animation: headlineFloat 5.5s ease-in-out infinite;
will-change: transform;
}
.category-preview-card {
min-height: 11.5rem;
transform: translateY(0) scale(1);
transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}
.category-preview-card:hover {
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.32);
transform: translateY(-0.45rem) scale(1.025);
}
.category-preview-image {
transition: opacity 0.28s ease, transform 0.7s ease;
}
.category-preview-image-right {
object-position: 96% center;
}
.category-preview-card:hover .category-preview-image {
opacity: 0.58;
transform: scale(1.1);
}
.category-preview-content {
transition: transform 0.28s ease;
}
.category-preview-card:hover .category-preview-content {
transform: translateY(-0.18rem);
}
@keyframes headlineFloat {
0%,
100% {
transform: translateY(0) rotate(0deg);
}
45% {
transform: translateY(-0.62rem) rotate(-0.45deg);
}
70% {
transform: translateY(0.24rem) rotate(0.24deg);
}
}
.pill-sea {
box-shadow: 0 0 20px rgba(23, 190, 187, 0.25);
}
.pill-lava {
box-shadow: 0 0 20px rgba(228, 87, 46, 0.25);
}
.pill-cactus {
box-shadow: 0 0 20px rgba(118, 176, 65, 0.25);
}
.reveal { opacity: 1; transform: none; }
html.ha-reveal-ready .reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.58s cubic-bezier(0.22, 1, 0.36, 1), transform 0.58s cubic-bezier(0.22, 1, 0.36, 1); }
html.ha-reveal-ready .reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.noise-overlay {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
background-size: 180px;
}
#map {
height: 100%;
min-height: 520px;
border-radius: 1.5rem;
z-index: 0;
}
.explore-sicily-outline {
filter: drop-shadow(0 0 18px rgba(23, 190, 187, 0.28));
pointer-events: none;
}
.explore-sicily-label {
display: inline-flex;
min-width: 5.5rem;
min-height: 1.75rem;
align-items: center;
justify-content: center;
border: 1px solid rgba(23, 190, 187, 0.34);
border-radius: 999px;
background: rgba(31, 27, 28, 0.78);
color: #FFFFFF;
font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
font-size: 0.74rem;
font-weight: 900;
letter-spacing: 0.04em;
text-transform: uppercase;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
}
.explore-map-tiles-failed {
background:
radial-gradient(circle at 42% 44%, rgba(23, 190, 187, 0.18), transparent 34%),
linear-gradient(135deg, rgba(20, 65, 76, 0.95), rgba(25, 46, 55, 0.98));
}
body.explore-page .leaflet-popup-content-wrapper,
body.explore-page .leaflet-popup-tip {
background: #1F1B1C;
color: #FFFFFF;
}
body.explore-page .leaflet-popup-content {
font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
line-height: 1.45;
}
body.explore-page .leaflet-popup-close-button { color: #FFFFFF; }
body.explore-page .ha-leaflet-marker { background: transparent; border: 0; }
body.explore-page #map .leaflet-tile-pane {
filter: invert(1) hue-rotate(180deg) brightness(0.85) contrast(0.9);
}
.event-tone-sea {
--event-color: #17BEBB;
--event-color-soft: rgba(23, 190, 187, 0.1);
--event-color-border: rgba(23, 190, 187, 0.2);
}
.event-tone-lava {
--event-color: #E4572E;
--event-color-soft: rgba(228, 87, 46, 0.1);
--event-color-border: rgba(228, 87, 46, 0.22);
}
.event-tone-sun {
--event-color: #FFC914;
--event-color-soft: rgba(255, 201, 20, 0.11);
--event-color-border: rgba(255, 201, 20, 0.22);
}
.event-tone-cactus {
--event-color: #76B041;
--event-color-soft: rgba(118, 176, 65, 0.11);
--event-color-border: rgba(118, 176, 65, 0.22);
}
.explore-map-marker {
position: relative;
display: grid;
width: 34px;
height: 44px;
place-items: start center;
color: #FFFFFF;
font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
font-size: 0.72rem;
font-weight: 800;
}
.explore-map-marker::before {
content: '';
width: 28px;
height: 28px;
border: 2px solid var(--event-color);
border-radius: 999px;
background: var(--event-color-soft);
box-shadow: inset 0 0 0 7px var(--event-color);
}
.explore-map-marker::after {
content: '';
position: absolute;
top: 30px;
width: 2px;
height: 12px;
border-radius: 999px;
background: var(--event-color);
}
.explore-user-marker {
width: 14px;
height: 14px;
border: 3px solid var(--event-color);
border-radius: 999px;
background: #FFFFFF;
box-shadow: 0 0 12px var(--event-color);
}
.explore-popup {
min-width: 0;
padding: 0;
}
.explore-popup-category {
margin-bottom: 0.28rem;
padding-right: 2.4rem;
color: var(--event-color);
font-size: 0.68rem;
font-weight: 900;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.explore-popup-title {
margin-bottom: 0.38rem;
padding-right: 2.4rem;
color: #FFFFFF;
font-size: 1.06rem;
font-weight: 900;
line-height: 1.22;
}
.explore-popup-meta {
margin-bottom: 0.62rem;
color: rgba(255, 255, 255, 0.68);
font-size: 0.78rem;
font-weight: 650;
}
.explore-popup-description {
margin-bottom: 0.7rem;
color: rgba(255, 255, 255, 0.66);
font-size: 0.76rem;
line-height: 1.5;
}
.explore-popup-progress,
.explore-progress-track {
overflow: hidden;
height: 4px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.08);
}
.explore-popup-progress {
margin-bottom: 0.5rem;
}
.explore-progress-fill {
height: 100%;
border-radius: inherit;
background: var(--event-color);
transition: width 0.7s ease;
}
.progress-fill-0 { width: 0%; }
.progress-fill-5 { width: 5%; }
.progress-fill-10 { width: 10%; }
.progress-fill-15 { width: 15%; }
.progress-fill-20 { width: 20%; }
.progress-fill-25 { width: 25%; }
.progress-fill-30 { width: 30%; }
.progress-fill-35 { width: 35%; }
.progress-fill-40 { width: 40%; }
.progress-fill-45 { width: 45%; }
.progress-fill-50 { width: 50%; }
.progress-fill-55 { width: 55%; }
.progress-fill-60 { width: 60%; }
.progress-fill-65 { width: 65%; }
.progress-fill-70 { width: 70%; }
.progress-fill-75 { width: 75%; }
.progress-fill-80 { width: 80%; }
.progress-fill-85 { width: 85%; }
.progress-fill-90 { width: 90%; }
.progress-fill-95 { width: 95%; }
.progress-fill-100 { width: 100%; }
.explore-popup-capacity {
color: rgba(255, 255, 255, 0.46);
font-size: 0.64rem;
font-weight: 700;
}
.explore-popup-route {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 2.75rem;
margin-top: 0.68rem;
border: 0;
border-radius: 0.62rem;
background: var(--event-color);
color: #2E282A;
cursor: pointer;
font-size: 0.68rem;
font-weight: 900;
transition: filter 0.18s ease, transform 0.18s ease;
}
.explore-popup-route:hover,
.explore-popup-route:focus-visible {
filter: brightness(1.08);
transform: translateY(-1px);
}
.explore-popup-detail {
display: flex;
width: 100%;
min-height: 2.75rem;
align-items: center;
justify-content: center;
margin-top: 0.45rem;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 0.62rem;
color: rgba(255, 255, 255, 0.78);
font-size: 0.68rem;
font-weight: 900;
text-decoration: none;
transition: border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
body.explore-page .explore-popup-route {
color: #2E282A;
text-decoration: none;
}
body.explore-page .explore-popup-detail {
color: rgba(255, 255, 255, 0.78);
}
body.explore-page .explore-popup-detail:hover,
body.explore-page .explore-popup-detail:focus-visible {
border-color: rgba(255, 201, 20, 0.55);
color: #FFC914;
transform: translateY(-1px);
}
.explore-page #event-list .event-card {
box-sizing: border-box;
width: 100%;
border: 1px solid rgba(255, 255, 255, 0.07);
border-radius: 1rem;
background: rgba(46, 40, 42, 0.78);
backdrop-filter: blur(8px);
padding: 0;
overflow: hidden;
cursor: pointer;
opacity: 0;
transform: translateY(16px);
transition: opacity 0.4s ease, transform 0.4s ease, border-color 0.25s ease, background 0.25s ease;
}
.explore-page #event-list .event-card.is-visible {
opacity: 1;
transform: translateY(0);
}
.explore-page #event-list .event-card.selected {
border-color: #17BEBB;
background: rgba(52, 45, 47, 0.86);
}
.explore-page #event-list .event-card:hover {
border-color: rgba(23, 190, 187, 0.4);
background: rgba(52, 45, 47, 0.86);
}
.explore-events-empty {
padding: 4rem 0;
color: rgba(255, 255, 255, 0.3);
font-size: 0.875rem;
text-align: center;
}
.event-card-bg-trail { background-image: url("../assets/trail-nebrodi.jpg"); }
.event-card-bg-yoga { background-image: url("../assets/yoga-etna.jpg"); }
.event-card-bg-surf { background-image: url("../assets/surf-alba.jpg"); }
.event-card-bg-mtb { background-image: url("../assets/mtb-madonie.jpg"); }
.event-card-bg-videogames { background-image: url("../assets/serata-videogiochi.jpg"); }
.event-card-bg-boardgames { background-image: url("../assets/giochi-tavolo.jpg"); }
#event-list::-webkit-scrollbar { width: 4px; }
#event-list::-webkit-scrollbar-track { background: transparent; }
#event-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 99px; }
.route-badge {
background: linear-gradient(135deg, rgba(23,190,187,0.15), rgba(228,87,46,0.1));
border: 1px solid rgba(23,190,187,0.25);
}
.explore-map-unavailable {
display: flex;
min-height: 520px;
height: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.65rem;
padding: 2rem;
background:
radial-gradient(circle at 50% 38%, rgba(23, 190, 187, 0.14), transparent 18rem),
rgba(35, 31, 32, 0.92);
color: rgba(255, 255, 255, 0.68);
text-align: center;
}
.explore-map-unavailable strong {
color: #FFFFFF;
font-size: 1rem;
font-weight: 900;
}
.explore-map-unavailable span {
max-width: 22rem;
font-size: 0.85rem;
line-height: 1.6;
}
#map-panel { display: flex; }
@media (max-width: 1023px) {
#map-panel { display: none; }
#map-panel.open {
display: flex;
order: -1;
scroll-margin-top: calc(var(--ha-navbar-height, 4.25rem) + 0.75rem);
}
}
@media (min-width: 1024px) {
.explore-page aside {
position: sticky;
top: 5.4rem;
align-self: flex-start;
}
.explore-page #event-list {
max-height: calc(100dvh - 13.5rem);
}
}
.explore-filters-button {
min-height: 2.75rem;
flex-shrink: 0;
background: rgba(23, 20, 21, 0.5);
transition: border-color 0.2s ease, color 0.2s ease;
}
.explore-filters-button:hover,
.explore-filters-button:focus-visible {
border-color: rgba(23, 190, 187, 0.6);
color: #FFFFFF;
}
.explore-filters-count {
display: inline-grid;
min-width: 1.25rem;
height: 1.25rem;
place-items: center;
border-radius: 999px;
background: #17BEBB;
color: #231F20;
font-size: 0.7rem;
font-weight: 800;
}
.explore-filters-count.hidden {
display: none;
}
.explore-filters-dialog {
width: 100%;
max-width: 100%;
max-height: 88dvh;
margin: auto 0 0;
padding: 0;
border: 1px solid rgba(255, 255, 255, 0.12);
border-bottom: 0;
border-radius: 1.5rem 1.5rem 0 0;
background: #231F20;
color: #FFFFFF;
box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.45);
}
.explore-filters-dialog::backdrop {
background: rgba(10, 8, 9, 0.62);
backdrop-filter: blur(3px);
}
.explore-filters-dialog[open] {
animation: exploreSheetIn 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes exploreSheetIn {
from { transform: translateY(1.5rem); opacity: 0; }
to { transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.explore-filters-dialog[open] { animation: none; }
}
.explore-filters-form {
display: grid;
gap: 1.25rem;
padding: 1.25rem 1.25rem max(1.25rem, env(safe-area-inset-bottom));
}
.explore-filters-head,
.explore-filters-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
}
.explore-filters-head h2 {
font-size: 1.15rem;
font-weight: 800;
}
.explore-filters-close {
width: 2.75rem;
height: 2.75rem;
border-radius: 999px;
color: rgba(255, 255, 255, 0.7);
font-size: 1.6rem;
line-height: 1;
}
.explore-filters-close:hover,
.explore-filters-close:focus-visible {
background: rgba(255, 255, 255, 0.08);
color: #FFFFFF;
}
.explore-filters-group {
display: grid;
gap: 0.6rem;
min-width: 0;
border: 0;
padding: 0;
margin: 0;
}
.explore-filters-group legend {
margin-bottom: 0.6rem;
color: #17BEBB;
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.explore-filters-options {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.explore-filters-options label {
position: relative;
display: inline-flex;
min-height: 2.75rem;
align-items: center;
padding: 0 1rem;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 999px;
color: rgba(255, 255, 255, 0.78);
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
}
.explore-filters-options input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.explore-filters-options label:has(input:checked) {
border-color: #17BEBB;
background: rgba(23, 190, 187, 0.16);
color: #FFFFFF;
}
.explore-filters-cats label { --pill-tone: #76B041; }
.explore-filters-cats label[data-tone="sea"] { --pill-tone: #17BEBB; }
.explore-filters-cats label[data-tone="lava"] { --pill-tone: #E4572E; }
.explore-filters-cats label[data-tone="sun"] { --pill-tone: #FFC914; }
.explore-filters-cats label::before {
content: '';
width: 0.5rem;
height: 0.5rem;
margin-right: 0.5rem;
border-radius: 999px;
background: var(--pill-tone);
}
.explore-filters-cats label:has(input:checked) {
border-color: var(--pill-tone);
background: color-mix(in srgb, var(--pill-tone) 18%, transparent);
}
.explore-filters-options label:has(input:focus-visible) {
outline: 2px solid #17BEBB;
outline-offset: 2px;
}
.explore-filters-range {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
}
.explore-filters-range label {
display: grid;
gap: 0.35rem;
color: rgba(255, 255, 255, 0.6);
font-size: 0.78rem;
}
.explore-filters-range input,
.explore-filters-group select {
min-height: 2.75rem;
width: 100%;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 0.9rem;
background: rgba(255, 255, 255, 0.04);
color: #FFFFFF;
padding: 0 0.85rem;
font-size: 1rem;
color-scheme: dark;
}
.explore-filters-check {
display: flex;
min-height: 2.75rem;
align-items: center;
gap: 0.7rem;
color: rgba(255, 255, 255, 0.82);
font-size: 0.9rem;
cursor: pointer;
}
.explore-filters-check input {
width: 1.15rem;
height: 1.15rem;
accent-color: #17BEBB;
}
.explore-filters-hint {
color: #FFC914;
font-size: 0.8rem;
}
.explore-filters-reset,
.explore-filters-apply {
min-height: 2.75rem;
border-radius: 999px;
padding: 0 1.25rem;
font-size: 0.9rem;
font-weight: 700;
}
.explore-filters-reset {
border: 1px solid rgba(255, 255, 255, 0.16);
color: rgba(255, 255, 255, 0.82);
}
.explore-filters-apply {
flex: 1;
background: #17BEBB;
color: #231F20;
}
.explore-filters-apply:hover,
.explore-filters-apply:focus-visible {
background: #FFC914;
}
@media (min-width: 768px) {
.explore-filters-dialog {
width: min(32rem, calc(100% - 2rem));
margin: auto;
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 1.5rem;
}
.explore-filters-form {
padding: 1.5rem;
}
}
@media (max-width: 600px) {
body.explore-page .leaflet-popup-content {
margin: 0.7rem 0.8rem;
line-height: 1.3;
}
body.explore-page .leaflet-popup-close-button {
width: 2.25rem;
height: 2.25rem;
font-size: 1.25rem;
line-height: 2.25rem;
}
.explore-popup {
display: grid;
width: min(16rem, calc(100vw - 6rem));
grid-template-columns: 1fr 1fr;
column-gap: 0.45rem;
}
body.explore-page .explore-popup > p {
grid-column: 1 / -1;
margin: 0 0 0.2rem;
}
.explore-popup-description,
.explore-popup-progress {
display: none;
}
.explore-popup-category {
font-size: 0.62rem;
}
.explore-popup-title {
display: -webkit-box;
overflow: hidden;
font-size: 0.95rem;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.explore-popup-meta {
font-size: 0.72rem;
}
.explore-popup-route,
.explore-popup-detail {
min-height: 2.5rem;
margin-top: 0.55rem;
}
}
.landing-page,
.home-page,
.my-events-page,
.explore-page {
min-height: 100dvh;
background:
radial-gradient(circle at 12% 8%, rgba(23, 190, 187, 0.15), transparent 26rem),
radial-gradient(circle at 82% 88%, rgba(255, 201, 20, 0.13), transparent 28rem),
radial-gradient(circle at 90% 42%, rgba(228, 87, 46, 0.07), transparent 26rem),
linear-gradient(135deg, #2E282A 0%, #231F20 46%, #171415 100%),
#171415;
background-attachment: fixed;
}
.landing-page #chi,
.landing-page #cosa,
.landing-page #eventi,
.landing-page footer,
.my-events-page .my-events-workspace,
.home-page .home-section,
.home-page .home-footer,
.explore-page .explore-hero-section,
.explore-page main,
.explore-page footer {
position: relative;
background: transparent !important;
}
.hero-fade-media {
-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 62%, rgba(0, 0, 0, 0.72) 76%, transparent 100%);
mask-image: linear-gradient(to bottom, #000 0%, #000 62%, rgba(0, 0, 0, 0.72) 76%, transparent 100%);
}
body.landing-page .hero-fade-media {
-webkit-mask-image: linear-gradient(
to bottom,
#000 0%,
#000 34%,
rgba(0, 0, 0, 0.82) 52%,
rgba(0, 0, 0, 0.38) 74%,
transparent 100%
);
mask-image: linear-gradient(
to bottom,
#000 0%,
#000 34%,
rgba(0, 0, 0, 0.82) 52%,
rgba(0, 0, 0, 0.38) 74%,
transparent 100%
);
}
.home-hero-section::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: -1px;
z-index: 5;
height: clamp(8rem, 20vh, 16rem);
pointer-events: none;
background: none;
}
.home-hero-connect {
display: inline-block;
font-size: 1.08em;
line-height: 0.95;
transform-origin: center;
animation: homeHeroConnectEntrance 1.8s cubic-bezier(0.25, 1, 0.5, 1) 0.45s both;
will-change: transform;
}
.home-hero-connect-inner {
display: inline-block;
transform-origin: center;
animation: homeHeroConnectIdle 4s ease-in-out 2.25s infinite;
will-change: transform;
}
.home-hero-question {
display: inline-block;
}
.home-hero-search {
position: relative;
z-index: 50;
display: grid;
width: min(100%, 58rem);
grid-template-columns: minmax(0, 1fr);
gap: 0.75rem;
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 1.35rem;
background:
linear-gradient(135deg, rgba(23, 190, 187, 0.12), rgba(255, 201, 20, 0.06) 52%, rgba(228, 87, 46, 0.1)),
rgba(23, 20, 21, 0.68);
padding: 0.65rem;
box-shadow: 0 28px 72px rgba(0, 0, 0, 0.36);
backdrop-filter: blur(14px);
}
.home-hero-search-input,
.home-hero-search-select {
width: 100%;
min-width: 0;
min-height: 3rem;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 1rem;
background: rgba(23, 20, 21, 0.42);
color: #FFFFFF;
padding: 0 1rem;
font-size: 0.92rem;
outline: none;
transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.home-hero-search-input::placeholder {
color: rgba(255, 255, 255, 0.58);
}
.home-hero-search-select {
cursor: pointer;
}
.home-hero-search-select-shell {
position: relative;
display: block;
min-width: 0;
}
.home-hero-search-select {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.home-hero-category-trigger {
position: relative;
width: 100%;
min-height: 3rem;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 1rem;
background: rgba(23, 20, 21, 0.42);
color: #ffffff;
padding: 0 2.8rem 0 1rem;
font-size: 0.92rem;
text-align: left;
outline: none;
cursor: pointer;
transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.home-hero-search-select-shell::after {
content: '';
position: absolute;
right: 1.15rem;
top: 50%;
width: 0.48rem;
height: 0.48rem;
border-right: 2px solid rgba(255, 255, 255, 0.72);
border-bottom: 2px solid rgba(255, 255, 255, 0.72);
pointer-events: none;
transform: translateY(-62%) rotate(45deg);
}
.home-hero-search-select-shell.is-open::after {
transform: translateY(-32%) rotate(225deg);
}
.home-hero-category-menu {
position: absolute;
top: calc(100% + 0.55rem);
right: 0;
left: 0;
z-index: 40;
display: grid;
gap: 0.25rem;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 1.05rem;
background: rgba(23, 20, 21, 0.96);
padding: 0.42rem;
opacity: 0;
pointer-events: none;
box-shadow: 0 22px 52px rgba(0, 0, 0, 0.28);
transform: translateY(-0.35rem) scale(0.98);
transform-origin: top;
transition: opacity 0.18s ease, transform 0.18s ease;
}
.home-hero-search-select-shell.is-open .home-hero-category-menu {
opacity: 1;
pointer-events: auto;
transform: translateY(0) scale(1);
}
.home-hero-category-option {
min-height: 2.45rem;
border: 0;
border-radius: 0.78rem;
background: transparent;
color: rgba(255, 255, 255, 0.78);
padding: 0 0.82rem;
font-size: 0.88rem;
font-weight: 700;
text-align: left;
cursor: pointer;
opacity: 0;
transform: translateY(-0.35rem);
transition: background 0.16s ease, color 0.16s ease, transform 0.16s ease;
}
.home-hero-search-select-shell.is-open .home-hero-category-option {
animation: homeCategoryCascade 0.28s ease both;
}
.home-hero-search-select-shell.is-open .home-hero-category-option:nth-child(1) {
animation-delay: 0ms;
}
.home-hero-search-select-shell.is-open .home-hero-category-option:nth-child(2) {
animation-delay: 45ms;
}
.home-hero-search-select-shell.is-open .home-hero-category-option:nth-child(3) {
animation-delay: 90ms;
}
.home-hero-search-select-shell.is-open .home-hero-category-option:nth-child(4) {
animation-delay: 135ms;
}
.home-hero-search-select-shell.is-open .home-hero-category-option:nth-child(5) {
animation-delay: 180ms;
}
.home-hero-search-select-shell.is-open .home-hero-category-option:nth-child(6) {
animation-delay: 225ms;
}
.home-hero-category-option:hover,
.home-hero-category-option:focus-visible,
.home-hero-category-option.is-selected {
background: rgba(23, 190, 187, 0.14);
color: #ffffff;
transform: translateX(0.12rem);
outline: none;
}
.home-hero-search-input:focus,
.home-hero-category-trigger:focus-visible {
border-color: rgba(23, 190, 187, 0.72);
background: rgba(23, 20, 21, 0.52);
box-shadow: 0 0 0 3px rgba(23, 190, 187, 0.16);
}
@keyframes homeCategoryCascade {
from {
opacity: 0;
transform: translateY(-0.45rem);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (prefers-reduced-motion: reduce) {
.home-hero-search-select-shell.is-open .home-hero-category-option {
animation: none;
opacity: 1;
transform: none;
}
}
.home-hero-search-button {
width: 100%;
min-width: 0;
min-height: 3rem;
border-radius: 1rem;
background: #FFC914;
color: #2E282A;
font-weight: 900;
transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.home-hero-search-button:hover,
.home-hero-search-button:focus-visible {
background: #17BEBB;
transform: translateY(-1px);
box-shadow: 0 14px 36px rgba(23, 190, 187, 0.24);
}
.home-hero-pills {
margin-top: 1rem;
display: flex;
flex-wrap: wrap;
gap: 0.55rem;
}
.home-hero-pills span {
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 999px;
background: rgba(23, 20, 21, 0.24);
padding: 0.42rem 0.72rem;
color: rgba(255, 255, 255, 0.82);
font-size: 0.78rem;
font-weight: 700;
}
@media (min-width: 768px) {
.home-hero-search {
grid-template-columns: minmax(14rem, 1fr) minmax(10rem, 13rem) minmax(6.5rem, 7.5rem);
align-items: center;
border-radius: 999px;
}
.home-hero-search-input,
.home-hero-category-trigger,
.home-hero-search-button {
border-radius: 999px;
}
.home-hero-search-select-shell,
.home-hero-search-select-shell .home-hero-category-trigger {
border-radius: 999px;
}
.home-hero-category-menu {
border-radius: 1.1rem;
}
}
.home-action-card,
.explore-search-panel,
.explore-control {
background: rgba(46, 40, 42, 0.78);
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.22);
backdrop-filter: blur(8px);
}
.home-action-layout {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
align-items: stretch;
}
.home-action-card {
position: relative;
overflow: hidden;
isolation: isolate;
border-radius: 1.35rem;
transform-origin: center;
transform: translateY(0) scale(1);
transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease, background 0.28s ease;
animation: homeActionCardIn 0.72s ease both;
will-change: transform;
}
.home-action-card-explore {
animation-delay: 0.12s;
}
.home-walker-scene {
position: relative;
display: flex;
align-items: flex-end;
justify-content: center;
min-height: 8rem;
overflow: hidden;
padding-bottom: 0.98rem;
}
.home-walker-floor {
position: absolute;
left: 50%;
bottom: 0.74rem;
width: min(12rem, 70vw);
height: 0.22rem;
border-radius: 999px;
background: linear-gradient(90deg, transparent, rgba(255, 201, 20, 0.58), rgba(23, 190, 187, 0.72), transparent);
box-shadow: 0 12px 28px rgba(23, 190, 187, 0.18);
transform: translateX(-50%);
}
.home-walker-floor::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: transparent;
animation: homeWalkerFloor 7.2s linear infinite;
will-change: transform;
}
.home-walker-hesitation {
position: relative;
animation: homeWalkerHesitate 7.2s ease-in-out infinite;
transform-origin: 50% 100%;
will-change: transform;
}
.home-walker {
position: relative;
width: 4.2rem;
height: 5.8rem;
transform: translate3d(0, 0, 0);
animation: homeWalkerBob 7.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
will-change: transform;
}
.home-walker-head,
.home-walker-body,
.home-walker-arm,
.home-walker-leg {
position: absolute;
display: block;
will-change: transform;
}
.home-walker-head {
top: -0.1rem;
left: 1.92rem;
width: 1.12rem;
height: 1.12rem;
border-radius: 999px;
background: #FFC914;
box-shadow: 0 0 18px rgba(255, 201, 20, 0.38);
transform: translate3d(-0.18rem, 0.06rem, 0) rotate(-24deg);
transform-origin: 30% 80%;
}
.home-walker-body {
top: 1.26rem;
left: 2.01rem;
width: 0.34rem;
height: 2.42rem;
border-radius: 999px;
background: #FFC914;
box-shadow: 0 0 14px rgba(255, 201, 20, 0.18);
transform: rotate(0deg);
transform-origin: 50% 10%;
}
.home-walker-arm,
.home-walker-leg {
width: 0.32rem;
border-radius: 999px;
background: #FFC914;
transform-origin: 50% 0.15rem;
}
.home-walker-arm {
top: 1.48rem;
left: 2rem;
height: 0.96rem;
}
.home-walker-arm::after {
content: '';
position: absolute;
top: 0.82rem;
left: 0;
width: 0.32rem;
height: 1rem;
border-radius: 999px;
background: inherit;
transform-origin: 50% 0.12rem;
}
.home-walker-arm-front {
z-index: 3;
animation: homeWalkerFrontArmCycle 7.2s cubic-bezier(0.42, 0, 0.58, 1) infinite;
}
.home-walker-arm-front::after {
transform: rotate(0deg);
}
.home-walker-arm-back {
z-index: 1;
background: rgba(255, 201, 20, 0.65);
animation: homeWalkerBackArmCycle 7.2s cubic-bezier(0.42, 0, 0.58, 1) infinite;
}
.home-walker-arm-back::after {
transform: rotate(0deg);
}
.home-walker-leg {
top: 3.48rem;
left: 2.01rem;
width: 0.34rem;
height: 2.55rem;
transform-origin: 50% 0.08rem;
}
.home-walker-leg-front {
z-index: 3;
animation: homeWalkerFrontLegCycle 7.2s cubic-bezier(0.42, 0, 0.58, 1) infinite;
}
.home-walker-leg-back {
z-index: 1;
background: rgba(255, 201, 20, 0.7);
animation: homeWalkerBackLegCycle 7.2s cubic-bezier(0.42, 0, 0.58, 1) infinite;
}
.home-action-card::after {
content: '';
position: absolute;
inset: 0;
z-index: 0;
border-radius: inherit;
background: linear-gradient(120deg, transparent 0%, transparent 38%, rgba(255, 255, 255, 0.08) 50%, transparent 62%, transparent 100%);
opacity: 0.7;
pointer-events: none;
transform: translateX(-130%);
transition: transform 0.48s ease, opacity 0.32s ease;
}
.home-action-card::before {
z-index: 0;
}
.home-action-card > * {
position: relative;
z-index: 1;
}
.home-action-card:hover,
.home-action-card:focus-within {
transform: translateY(-0.35rem) scale(1.015);
box-shadow: 0 32px 86px rgba(0, 0, 0, 0.34);
}
.home-action-card:hover::after,
.home-action-card:focus-within::after {
transform: translateX(130%);
}
.home-action-card h2,
.home-action-card p {
transition: transform 0.28s ease, color 0.28s ease;
}
.home-action-card:hover h2,
.home-action-card:focus-within h2 {
transform: translateY(-0.18rem);
}
.home-action-card:hover p,
.home-action-card:focus-within p {
transform: translateY(-0.08rem);
color: rgba(255, 255, 255, 0.78);
}
.home-action-card a,
.home-action-card button {
transition: transform 0.24s ease, background-color 0.24s ease, color 0.24s ease, box-shadow 0.24s ease;
}
.home-action-card:hover a,
.home-action-card:focus-within a,
.home-action-card:hover button,
.home-action-card:focus-within button {
transform: translateY(0.08rem) scale(1.015);
box-shadow: 0 18px 38px rgba(0, 0, 0, 0.22);
}
@keyframes homeActionCardIn {
from {
opacity: 0;
transform: translateY(1rem) scale(0.985);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes homeHeroConnectEntrance {
0% {
opacity: 0;
transform: translate3d(0, 2rem, 0);
}
45% {
opacity: 1;
transform: translate3d(0, -0.75rem, 0);
}
65% {
transform: translate3d(0, 0.25rem, 0);
}
82% {
transform: translate3d(0, -0.12rem, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}
@keyframes homeHeroConnectIdle {
0%,
100% {
transform: translate3d(0, 0, 0);
}
50% {
transform: translate3d(0, -0.22rem, 0);
}
}
@keyframes homeWalkerBob {
0%,
12%,
24%,
36%,
48%,
60%,
92%,
100% {
transform: translate3d(0, 0.08rem, 0);
}
6%,
18%,
30%,
42%,
54% {
transform: translate3d(0, -0.1rem, 0);
}
66%,
86% {
transform: translate3d(0, 0, 0);
}
}
@keyframes homeWalkerFloor {
0% {
transform: translate3d(0, 0, 0);
}
60% {
transform: translate3d(-5.4rem, 0, 0);
}
66% {
transform: translate3d(-5.75rem, 0, 0);
}
86% {
transform: translate3d(-5.75rem, 0, 0);
}
92% {
transform: translate3d(-6.1rem, 0, 0);
}
100% {
transform: translate3d(-6.75rem, 0, 0);
}
}
@keyframes homeWalkerHesitate {
0%,
60%,
100% {
transform: translate3d(0, 0, 0) rotate(0deg) scaleX(1);
}
66% {
transform: translate3d(0.04rem, 0, 0) rotate(0deg) scaleX(1);
}
72% {
transform: translate3d(0, 0, 0) rotate(0deg) scaleX(1);
}
78% {
transform: translate3d(-0.18rem, 0.01rem, 0) rotate(0deg) scaleX(-1);
}
84% {
transform: translate3d(-0.18rem, 0.01rem, 0) rotate(0deg) scaleX(-1);
}
90% {
transform: translate3d(0, 0, 0) rotate(0deg) scaleX(1);
}
}
@keyframes homeWalkerFrontArmCycle {
0%,
12%,
24%,
36%,
48%,
60%,
92%,
100% {
transform: rotate(-22deg);
}
6%,
18%,
30%,
42%,
54% {
transform: rotate(22deg);
}
66%,
72%,
78%,
84%,
88% {
transform: rotate(6deg);
}
}
@keyframes homeWalkerBackArmCycle {
0%,
12%,
24%,
36%,
48%,
60%,
92%,
100% {
transform: rotate(22deg);
}
6%,
18%,
30%,
42%,
54% {
transform: rotate(-22deg);
}
66%,
72%,
78%,
84%,
88% {
transform: rotate(-6deg);
}
}
@keyframes homeWalkerFrontLegCycle {
0%,
12%,
24%,
36%,
48%,
60%,
92%,
100% {
transform: rotate(30deg);
}
6%,
18%,
30%,
42%,
54% {
transform: rotate(-26deg);
}
66%,
72%,
78%,
84%,
88% {
transform: rotate(5deg);
}
}
@keyframes homeWalkerBackLegCycle {
0%,
12%,
24%,
36%,
48%,
60%,
92%,
100% {
transform: rotate(-26deg);
}
6%,
18%,
30%,
42%,
54% {
transform: rotate(30deg);
}
66%,
72%,
78%,
84%,
88% {
transform: rotate(-5deg);
}
}
@media (min-width: 768px) {
.home-action-layout {
grid-template-columns: minmax(0, 1fr) clamp(7rem, 12vw, 10rem) minmax(0, 1fr);
gap: 2rem;
}
.home-walker-scene {
min-height: 100%;
}
}
@media (prefers-reduced-motion: reduce) {
.home-action-card,
.home-action-card::after,
.home-hero-connect,
.home-walker-hesitation,
.home-walker,
.home-walker-floor::after,
.home-walker-arm-front,
.home-walker-arm-front::after,
.home-walker-arm-back,
.home-walker-arm-back::after,
.home-walker-leg-front,
.home-walker-leg-back {
animation: none;
}
.home-action-card,
.home-action-card:hover,
.home-action-card:focus-within {
transform: none;
}
.home-hero-connect {
transform: none;
}
}
.explore-page .leaflet-popup-content-wrapper,
.explore-page .leaflet-popup-tip {
background: rgba(31, 27, 28, 0.96) !important;
}
.my-events-workspace {
min-height: calc(100dvh - 4.25rem);
}
.my-events-shell {
max-width: 80rem;
margin: 0 auto;
padding: 3rem 1.5rem 5rem;
}
body.my-events-page .my-events-workspace .my-events-shell {
content-visibility: visible;
}
.my-events-hero {
display: flex;
flex-direction: column;
gap: 1.5rem;
justify-content: space-between;
margin-bottom: 1.5rem;
animation: my-events-reveal 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.my-events-kicker,
.my-events-section-heading p {
color: #17BEBB;
font-size: 0.75rem;
font-weight: 900;
letter-spacing: 0.24em;
text-transform: uppercase;
}
.my-events-hero .my-events-kicker {
color: #E4572E !important;
font-weight: 900;
}
.my-events-hero h1 {
margin-top: 0.55rem;
font-size: clamp(2.65rem, 8vw, 5.5rem);
font-weight: 900;
line-height: 0.95;
}
.my-events-hero p {
max-width: 42rem;
margin-top: 1rem;
color: rgba(255, 255, 255, 0.62);
line-height: 1.7;
}
.my-events-section-heading a {
display: inline-flex;
width: fit-content;
align-items: center;
justify-content: center;
border-radius: 0.9rem;
background: #FFC914;
color: #231F20;
font-size: 0.9rem;
font-weight: 900;
transition: transform 0.22s ease, background 0.22s ease, color 0.22s ease;
}
.my-events-section-heading a {
padding: 0.72rem 1rem;
}
.my-events-create-prompt {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.75rem 1rem;
}
.my-events-create-prompt a { flex-shrink: 0; }
.my-events-create-prompt span {
color: rgba(255, 255, 255, 0.62);
font-size: 0.9rem;
line-height: 1.5;
}
.my-events-section-heading a:hover,
.my-events-section-heading a:focus-visible {
background: #17BEBB;
color: #ffffff;
transform: translateY(-0.12rem);
}
.my-events-stats {
display: grid;
grid-template-columns: 1fr;
gap: 0.9rem;
margin-bottom: 2rem;
}
.my-events-stats a,
.my-events-empty {
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(46, 40, 42, 0.78);
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.2);
backdrop-filter: blur(8px);
}
.my-events-stats a {
position: relative;
overflow: hidden;
border-radius: 1.15rem;
padding: 1.1rem;
animation: my-events-rise 0.34s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.my-events-stats a:nth-child(1) {
animation-delay: 0.08s;
}
.my-events-stats a:nth-child(2) {
animation-delay: 0.13s;
}
.my-events-stats a:nth-child(3) {
animation-delay: 0.18s;
}
.my-events-stats a:nth-child(4) {
animation-delay: 0.23s;
}
.my-events-stats a {
display: block;
color: inherit;
text-decoration: none;
transition: border-color 0.2s ease, transform 0.2s ease;
}
.my-events-stats a:hover {
border-color: rgba(23, 190, 187, 0.45);
transform: translateY(-2px);
}
.my-events-stats a:focus-visible {
outline: 2px solid #FFC914;
outline-offset: 2px;
}
.my-events-section {
scroll-margin-top: 6rem;
}
.my-events-stats a::before,
.followed-stats article::before {
content: '';
position: absolute;
inset: 0 auto 0 0;
width: 0.24rem;
background: linear-gradient(180deg, #17BEBB, #FFC914);
opacity: 0.9;
}
.my-events-stats span {
display: block;
color: #FFC914;
font-size: 2rem;
font-weight: 900;
line-height: 1;
}
.my-events-stats p {
margin-top: 0.45rem;
color: rgba(255, 255, 255, 0.58);
font-size: 0.82rem;
font-weight: 700;
}
.my-events-section {
margin-top: 2rem;
animation: my-events-rise 0.36s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.my-events-section:nth-of-type(2) {
animation-delay: 0.16s;
}
.my-events-section:nth-of-type(3) {
animation-delay: 0.22s;
}
.my-events-section-heading {
display: flex;
flex-direction: column;
gap: 1rem;
justify-content: space-between;
margin-bottom: 1rem;
}
.my-events-section-heading h2 {
margin-top: 0.35rem;
font-size: clamp(1.6rem, 4vw, 2.35rem);
font-weight: 900;
}
.my-events-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
.my-events-empty {
border-radius: 1.25rem;
padding: 1.15rem;
}
.my-events-grid .my-events-empty:nth-child(1) {
animation-delay: 0.04s;
}
.my-events-grid .my-events-empty:nth-child(2) {
animation-delay: 0.09s;
}
.my-events-grid .my-events-empty:nth-child(3) {
animation-delay: 0.14s;
}
.my-events-grid .my-events-empty:nth-child(4) {
animation-delay: 0.19s;
}
.my-events-grid .my-events-empty:nth-child(n + 5) {
animation-delay: 0.24s;
}
.my-events-empty p {
color: rgba(255, 255, 255, 0.58);
font-size: 0.9rem;
line-height: 1.6;
}
.my-events-card-actions {
display: flex;
flex-wrap: wrap;
gap: 0.55rem;
}
.my-events-status {
border-radius: 999px;
padding: 0.42rem 0.72rem;
background: rgba(23, 190, 187, 0.12);
color: #17BEBB;
font-size: 0.75rem;
font-weight: 900;
}
.my-events-card-actions a,
.my-events-card-actions button {
border-radius: 0.8rem;
padding: 0.62rem 0.85rem;
font-size: 0.82rem;
font-weight: 900;
transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.my-events-card-actions a {
background: rgba(23, 190, 187, 0.14);
color: #17BEBB;
}
.my-events-card-actions button {
border: 1px solid rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.72);
}
.my-events-card-actions button.my-events-danger {
border-color: rgba(228, 87, 46, 0.38);
background: rgba(228, 87, 46, 0.12);
color: #FF9A7A;
margin-left: auto;
}
.my-events-card-actions button:disabled {
cursor: wait;
opacity: 0.62;
}
.my-events-card-actions a:hover,
.my-events-card-actions a:focus-visible {
background: #17BEBB;
color: #231F20;
}
.my-events-card-actions button:hover,
.my-events-card-actions button:focus-visible {
border-color: #FFC914;
color: #FFC914;
}
.my-events-card-actions button.my-events-danger:hover,
.my-events-card-actions button.my-events-danger:focus-visible {
border-color: rgba(228, 87, 46, 0.82);
background: rgba(228, 87, 46, 0.2);
color: #FFB096;
}
.my-events-empty {
display: grid;
gap: 0.75rem;
animation: my-events-card-in 0.34s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes my-events-reveal {
from {
opacity: 0;
transform: translateY(0.7rem) scale(0.995);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes my-events-rise {
from {
opacity: 0;
transform: translateY(0.9rem);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes my-events-card-in {
from {
opacity: 0;
transform: translateY(0.85rem);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (prefers-reduced-motion: reduce) {
.my-events-hero,
.my-events-stats a,
.my-events-section,
.my-events-empty {
animation: none;
}
}
@media (min-width: 768px) {
.my-events-hero,
.my-events-section-heading {
flex-direction: row;
align-items: end;
}
.my-events-stats {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.my-events-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 960px) {
.my-events-grid > .my-events-empty:only-child {
grid-column: 1 / -1;
}
}
.my-events-summary {
display: flex;
gap: 1rem 0;
margin: 0 0 2rem;
padding: .5rem 0 1.25rem;
border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.my-events-summary > a {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
column-gap: .85rem;
padding: 0 1.5rem;
min-width: 0;
}
.my-events-summary > a:first-child { padding-left: 0; }
.my-events-summary > a + div { border-left: 1px solid rgba(255, 255, 255, .14); }
.my-events-summary .my-events-summary-label {
grid-column: 2;
grid-row: 1;
color: #bdb7ba;
font-size: 1rem;
font-weight: 500;
line-height: 1.5;
}
.my-events-summary .my-events-summary-value {
grid-column: 1;
grid-row: 1;
margin: 0;
color: #f3efef;
font-size: 2rem;
font-weight: 800;
line-height: 1.2;
font-variant-numeric: tabular-nums;
}
.my-events-summary #next-event-label { color: #FFC914; }
@media (max-width: 1023px) {
.my-events-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.my-events-summary > a { grid-template-columns: minmax(0, 1fr); gap: .4rem; align-content: start; padding: 0 .5rem; }
.my-events-summary > a:last-child { padding-right: 0; }
.my-events-summary .my-events-summary-label { grid-column: 1; grid-row: 2; font-size: .9rem; overflow-wrap: anywhere; }
.my-events-summary .my-events-summary-value { font-size: 1.75rem; overflow-wrap: anywhere; }
}
@media (max-width: 767px) {
.my-events-summary {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0;
margin-bottom: 1.5rem;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
}
.my-events-summary > a:nth-child(n) {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto 1fr;
gap: .5rem;
align-items: start;
align-content: start;
padding: .875rem .125rem;
border-radius: 0;
text-align: center;
}
.my-events-summary > a:nth-child(2),
.my-events-summary > a:nth-child(3) {
border-left: 1px solid var(--ha-surface-border);
}
.my-events-summary > a:last-child {
grid-column: 1 / -1;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-rows: auto;
align-items: center;
padding: 1rem .375rem;
border-top: 1px solid var(--ha-surface-border);
text-align: left;
}
.my-events-summary .my-events-summary-label {
grid-column: 1;
grid-row: 1;
font-size: .75rem;
line-height: 1.4;
}
.my-events-summary .my-events-summary-value {
grid-column: 1;
grid-row: 2;
min-width: 0;
align-self: center;
font-size: clamp(1.5rem, 6vw, 1.75rem);
overflow-wrap: anywhere;
}
.my-events-summary #next-event-label {
grid-column: 2;
grid-row: 1;
font-size: 1.25rem;
white-space: nowrap;
overflow-wrap: normal;
}
.my-events-summary > a:last-child .my-events-summary-label {
font-size: .875rem;
}
.my-events-summary + .my-events-section {
margin-top: 1.5rem;
}
}
.my-events-summary > a { color: inherit; text-decoration: none; border-radius: .25rem; }
.my-events-summary > a:hover .my-events-summary-label { color: #fff; }
.my-events-summary > a:focus-visible { outline: 2px solid #FFC914; outline-offset: 5px; }
@media (min-width: 768px) and (max-width: 1023px) { .my-events-summary > a:nth-child(3) { border-left: 0; padding-left: 0; } }
.followed-page {
min-height: 100dvh;
background:
radial-gradient(circle at 12% 12%, rgba(23, 190, 187, 0.16), transparent 24rem),
radial-gradient(circle at 82% 8%, rgba(255, 201, 20, 0.12), transparent 26rem),
linear-gradient(135deg, #2E282A 0%, #231F20 52%, #171415 100%);
}
.followed-workspace {
min-height: calc(100dvh - 4.25rem);
}
.followed-shell {
max-width: 80rem;
margin: 0 auto;
padding: 3rem 1.5rem 5rem;
}
.followed-hero {
display: grid;
gap: 1.5rem;
align-items: end;
margin-bottom: 1.5rem;
}
.followed-kicker,
.followed-section-heading p {
color: #17BEBB;
font-size: 0.75rem;
font-weight: 900;
letter-spacing: 0.24em;
text-transform: uppercase;
}
.followed-page .followed-kicker {
color: #FFC914 !important;
}
.followed-hero h1 {
margin-top: 0.55rem;
font-size: clamp(2.55rem, 7.5vw, 5.2rem);
font-weight: 900;
line-height: 0.95;
}
.followed-hero .followed-title-accent {
color: #FFC914 !important;
-webkit-text-fill-color: #FFC914 !important;
}
.followed-hero p {
max-width: 43rem;
margin-top: 1rem;
color: rgba(255, 255, 255, 0.62);
line-height: 1.7;
}
.followed-stats {
display: grid;
grid-template-columns: 1fr;
gap: 0.9rem;
margin-bottom: 2rem;
}
.followed-stats article,
.followed-featured-card,
.followed-person-row,
.followed-list-card,
.followed-empty {
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(46, 40, 42, 0.78);
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.2);
backdrop-filter: blur(8px);
}
.followed-stats article {
position: relative;
overflow: hidden;
border-radius: 1.15rem;
padding: 1.1rem;
}
.followed-stats span {
display: block;
color: #FFC914;
font-size: 2rem;
font-weight: 900;
line-height: 1;
}
.followed-stats p {
margin-top: 0.45rem;
color: rgba(255, 255, 255, 0.58);
font-size: 0.82rem;
font-weight: 700;
}
.followed-section {
margin-top: 2rem;
}
.followed-section-heading {
display: flex;
flex-direction: column;
gap: 1rem;
justify-content: space-between;
margin-bottom: 1rem;
}
.followed-section-heading h2 {
margin-top: 0.35rem;
font-size: clamp(1.6rem, 4vw, 2.35rem);
font-weight: 900;
}
.followed-filters,
.followed-pill-row {
display: flex;
flex-wrap: wrap;
gap: 0.55rem;
}
.followed-filters-spaced {
margin-bottom: 1.5rem;
}
.followed-filter {
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 999px;
padding: 0.45rem 0.9rem;
color: rgba(255, 255, 255, 0.7);
font-size: 0.82rem;
font-weight: 900;
line-height: 1;
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.followed-filter:hover,
.followed-filter:focus-visible,
.followed-filter.is-active {
border-color: rgba(23, 190, 187, 0.45);
background: rgba(23, 190, 187, 0.14);
color: #17BEBB;
transform: translateY(-1px);
}
.followed-browser {
display: grid;
gap: 1rem;
}
.followed-featured {
min-width: 0;
}
.followed-featured.is-full-width {
grid-column: 1 / -1;
}
.followed-grid {
display: grid;
grid-template-columns: 1fr;
gap: 0.65rem;
}
.followed-featured-card,
.followed-person-row,
.followed-list-card,
.followed-empty {
border-radius: 1.25rem;
padding: 1.15rem;
}
.followed-featured-card {
display: grid;
gap: 1rem;
}
.followed-featured-card {
min-height: 100%;
overflow: hidden;
position: relative;
}
.followed-featured-card::after {
content: '';
position: absolute;
right: -4rem;
top: -5rem;
width: 14rem;
height: 14rem;
border-radius: 999px;
background: radial-gradient(circle, rgba(255, 201, 20, 0.14), transparent 68%);
pointer-events: none;
}
.followed-featured-main,
.followed-person-row,
.followed-list-card {
display: flex;
align-items: center;
gap: 0.9rem;
}
.followed-featured-main > div:nth-child(2) {
min-width: 0;
flex: 1;
}
.followed-avatar {
display: grid;
flex: 0 0 auto;
width: 3.65rem;
height: 3.65rem;
place-items: center;
border-radius: 1rem;
background:
radial-gradient(circle at 24% 22%, rgba(255, 255, 255, 0.34), transparent 28%),
linear-gradient(135deg, #17BEBB 0%, #FFC914 44%, #E4572E 72%, #76B041 100%);
color: #231F20;
font-weight: 900;
box-shadow: 0 16px 36px rgba(23, 190, 187, 0.14);
object-fit: cover;
}
.followed-avatar-small {
width: 3rem;
height: 3rem;
border-radius: 0.85rem;
}
.followed-avatar-featured {
width: 5rem;
height: 5rem;
border-radius: 1.35rem;
font-size: 1.25rem;
}
.followed-featured-card h3 {
color: #ffffff;
font-size: clamp(1.9rem, 4vw, 3rem);
font-weight: 900;
line-height: 1;
}
.followed-person-row h3,
.followed-list-card h3,
.followed-empty h3 {
color: #ffffff;
font-size: 1.2rem;
font-weight: 900;
}
.followed-featured-card p,
.followed-person-row p,
.followed-list-card p,
.followed-empty p {
color: rgba(255, 255, 255, 0.58);
font-size: 0.9rem;
line-height: 1.6;
}
.followed-person-row {
width: 100%;
cursor: pointer;
padding: 0.8rem;
transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.followed-person-row:hover,
.followed-person-row:focus-within,
.followed-person-row.is-selected {
border-color: rgba(23, 190, 187, 0.42);
background: rgba(23, 190, 187, 0.09);
}
.followed-person-row:hover {
transform: translateY(-1px);
}
.followed-person-row > div:nth-child(2) {
min-width: 0;
flex: 1;
}
.followed-pill {
display: inline-flex;
align-items: center;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 0.42rem 0.72rem;
color: rgba(255, 255, 255, 0.72);
font-size: 0.78rem;
font-weight: 800;
}
.followed-person-note {
display: grid;
gap: 0.38rem;
}
.followed-person-note strong {
color: rgba(255, 255, 255, 0.9);
font-size: 0.95rem;
}
.followed-person-note span {
color: #17BEBB;
font-size: 0.86rem;
font-weight: 900;
}
.followed-profile-metrics {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.8rem;
}
.followed-profile-metrics div {
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 1rem;
background: rgba(255, 255, 255, 0.045);
padding: 0.95rem;
}
.followed-profile-metrics strong,
.followed-profile-metrics span {
display: block;
}
.followed-profile-metrics strong {
color: #FFC914;
font-size: 1.22rem;
font-weight: 900;
line-height: 1.05;
}
.followed-profile-metrics span {
color: rgba(255, 255, 255, 0.5);
font-size: 0.8rem;
font-weight: 800;
line-height: 1.2;
margin-bottom: 0.38rem;
}
.followed-action,
.followed-mini-action,
.followed-remove {
min-height: 2.85rem;
border-radius: 0.85rem;
padding: 0.68rem 0.95rem;
font-size: 0.86rem;
font-weight: 900;
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.followed-action {
min-height: 2.35rem;
width: auto;
flex: 0 0 auto;
padding: 0.46rem 0.78rem;
background: #FFC914;
color: #231F20;
}
.followed-action:hover,
.followed-action:focus-visible {
background: #17BEBB;
transform: translateY(-1px);
}
.followed-action.is-followed {
border: 1px solid rgba(23, 190, 187, 0.45);
background: rgba(23, 190, 187, 0.12);
color: #17BEBB;
}
.followed-mini-action {
min-height: 2.35rem;
flex: 0 0 auto;
border: 1px solid rgba(255, 201, 20, 0.38);
background: rgba(255, 201, 20, 0.14);
color: #FFC914;
padding: 0.45rem 0.7rem;
}
.followed-mini-action:hover,
.followed-mini-action:focus-visible {
border-color: rgba(23, 190, 187, 0.5);
background: rgba(23, 190, 187, 0.15);
color: #17BEBB;
}
.followed-mini-action.is-followed {
border-color: rgba(23, 190, 187, 0.45);
background: rgba(23, 190, 187, 0.12);
color: #17BEBB;
}
.followed-list {
display: grid;
gap: 0.8rem;
}
.followed-list-card {
justify-content: space-between;
}
.followed-list-card > div:nth-child(2) {
min-width: 0;
flex: 1;
}
.followed-remove {
flex: 0 0 auto;
border: 1px solid rgba(255, 255, 255, 0.12);
color: rgba(255, 255, 255, 0.7);
}
.followed-remove:hover,
.followed-remove:focus-visible {
border-color: rgba(228, 87, 46, 0.55);
color: #E4572E;
}
.followed-search-bar {
display: flex;
flex-wrap: wrap;
gap: 0.65rem;
margin-bottom: 1rem;
}
.followed-search-input {
flex: 1 1 10rem;
min-height: 2.75rem;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 0.85rem;
background: rgba(46, 40, 42, 0.7);
padding: 0 1rem;
color: #fff;
font-size: 0.9rem;
font-family: inherit;
outline: none;
transition: border-color 0.2s ease;
}
.followed-search-input::placeholder { color: rgba(255,255,255,0.38); }
.followed-search-input:focus { border-color: rgba(23,190,187,0.55); }
.followed-select { cursor: pointer; }
.followed-select option { background: #231F20; color: #fff; }
.followed-search-btn {
min-height: 2.75rem;
border-radius: 0.85rem;
padding: 0 1.4rem;
background: #FFC914;
color: #231F20;
font-size: 0.88rem;
font-weight: 900;
transition: background 0.2s ease, transform 0.2s ease;
flex: 0 0 auto;
}
.followed-search-btn:hover { background: #17BEBB; transform: translateY(-1px); }
.followed-exp-badge {
display: inline-flex;
align-items: center;
border-radius: 999px;
padding: 0.2rem 0.6rem;
font-size: 0.72rem;
font-weight: 900;
letter-spacing: 0.04em;
}
.followed-exp-beginner     { background: rgba(118,176,65,.18);  color: #76B041; border: 1px solid rgba(118,176,65,.35); }
.followed-exp-intermediate { background: rgba(255,201,20,.14); color: #FFC914; border: 1px solid rgba(255,201,20,.3); }
.followed-exp-advanced     { background: rgba(228,87,46,.14);  color: #E4572E; border: 1px solid rgba(228,87,46,.3); }
.followed-action.is-pending,
.followed-mini-action.is-pending {
border: 1px solid rgba(255,255,255,0.18);
background: rgba(255,255,255,0.07);
color: rgba(255,255,255,0.5);
cursor: default;
}
.followed-action.is-pending:hover,
.followed-mini-action.is-pending:hover { transform: none; }
.followed-notif-card {
display: flex;
align-items: center;
gap: 0.9rem;
border: 1px solid rgba(255,201,20,0.22);
border-radius: 1.25rem;
background: rgba(255,201,20,0.06);
padding: 1rem;
}
.followed-notif-card.is-read {
opacity: 0.86;
}
.followed-notif-card h3 { color: #fff; font-size: 1.1rem; font-weight: 900; }
.followed-notif-card p  { color: rgba(255,255,255,0.55); font-size: 0.85rem; }
.followed-notif-card > div:nth-child(2) { flex: 1; min-width: 0; }
.followed-notif-actions { display: flex; gap: 0.5rem; flex: 0 0 auto; }
.followed-accept-btn {
min-height: 2.35rem;
border-radius: 0.75rem;
padding: 0.4rem 0.85rem;
background: rgba(23,190,187,0.18);
border: 1px solid rgba(23,190,187,0.45);
color: #17BEBB;
font-size: 0.82rem;
font-weight: 900;
transition: background 0.2s, transform 0.15s;
}
.followed-accept-btn:hover { background: rgba(23,190,187,0.3); transform: translateY(-1px); }
.followed-reject-btn {
min-height: 2.35rem;
border-radius: 0.75rem;
padding: 0.4rem 0.85rem;
border: 1px solid rgba(255,255,255,0.12);
color: rgba(255,255,255,0.55);
font-size: 0.82rem;
font-weight: 900;
transition: border-color 0.2s, color 0.2s;
}
.followed-reject-btn:hover { border-color: rgba(228,87,46,0.55); color: #E4572E; }
.notif-bell {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 2.65rem;
height: 2.65rem;
border-radius: 0.75rem;
border: 1px solid rgba(255,255,255,0.1);
color: rgba(255,255,255,0.7);
transition: background 0.2s, color 0.2s;
}
.notif-bell:hover { background: rgba(255,255,255,0.07); color: #FFC914; }
.notif-badge {
position: absolute;
top: -0.35rem;
right: -0.35rem;
min-width: 1.1rem;
height: 1.1rem;
border-radius: 999px;
background: #E4572E;
color: #fff;
font-size: 0.65rem;
font-weight: 900;
display: flex;
align-items: center;
justify-content: center;
padding: 0 0.22rem;
pointer-events: none;
}
.notif-badge.hidden { display: none; }
.followed-list-actions { display: flex; gap: 0.5rem; flex: 0 0 auto; flex-wrap: wrap; }
.followed-events-btn {
min-height: 2.35rem;
border-radius: 0.75rem;
padding: 0.4rem 0.85rem;
border: 1px solid rgba(23,190,187,0.35);
background: rgba(23,190,187,0.1);
color: #17BEBB;
font-size: 0.82rem;
font-weight: 900;
transition: background 0.2s, transform 0.15s;
}
.followed-events-btn:hover { background: rgba(23,190,187,0.2); transform: translateY(-1px); }
.followed-featured-actions { display: grid; gap: 0.85rem; }
.followed-modal {
position: fixed;
inset: 0;
z-index: 100;
background: rgba(0,0,0,0.6);
backdrop-filter: blur(4px);
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
}
.followed-modal.hidden { display: none; }
.followed-modal-panel {
width: 100%;
max-width: 36rem;
max-height: 80dvh;
border: 1px solid rgba(255,255,255,0.12);
border-radius: 1.5rem;
background: #231F20;
box-shadow: 0 32px 80px rgba(0,0,0,0.5);
display: flex;
flex-direction: column;
overflow: hidden;
}
.followed-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.25rem 1.5rem;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.followed-modal-header h3 { font-size: 1.15rem; font-weight: 900; color: #fff; }
.followed-modal-close {
width: 2.1rem;
height: 2.1rem;
border-radius: 0.6rem;
color: rgba(255,255,255,0.55);
font-size: 1rem;
transition: background 0.2s, color 0.2s;
}
.followed-modal-close:hover { background: rgba(255,255,255,0.08); color: #fff; }
.followed-modal-body {
overflow-y: auto;
padding: 1.25rem 1.5rem;
display: grid;
gap: 0.8rem;
}
.followed-modal-status {
color: rgba(255,255,255,0.55);
padding: 1rem 0;
}
.followed-modal-status-error {
color: #E4572E;
}
@media (min-width: 720px) {
.followed-stats {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.followed-section-heading {
flex-direction: row;
align-items: end;
}
.followed-profile-metrics {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
@media (min-width: 1100px) {
.followed-browser {
grid-template-columns: minmax(0, 1fr) minmax(22rem, 0.78fr);
}
}
body.followed-page .followed-avatar-monogram {
--avatar-surface: #235957;
--avatar-ink: #bcece1;
position: relative;
isolation: isolate;
overflow: hidden;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, .22);
background: var(--avatar-surface);
color: var(--avatar-ink);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
font-size: .88rem;
font-weight: 800;
letter-spacing: -.035em;
line-height: 1;
}
body.followed-page .followed-avatar-monogram::before {
content: '';
position: absolute;
width: 90%;
height: 90%;
right: -35%;
bottom: -40%;
border: 6px solid currentColor;
border-radius: 50%;
opacity: .09;
z-index: -1;
}
body.followed-page .followed-avatar-monogram[data-avatar-pattern="cross"]::before {
width: 48%;
height: 48%;
right: -4%;
bottom: -4%;
border: 0;
border-radius: 0;
background:
linear-gradient(45deg, transparent 43%, currentColor 43% 57%, transparent 57%),
linear-gradient(-45deg, transparent 43%, currentColor 43% 57%, transparent 57%);
}
body.followed-page .followed-avatar-monogram[data-avatar-pattern="stripes"]::before {
width: 65%;
height: 48%;
right: -10%;
bottom: -5%;
border: 0;
border-radius: 0;
background: repeating-linear-gradient(-45deg, transparent 0 5px, currentColor 5px 8px);
}
body.followed-page .followed-avatar-monogram[data-avatar-pattern="dots"]::before {
width: 48%;
height: 48%;
right: -3%;
bottom: -3%;
border: 0;
border-radius: 0;
background: radial-gradient(circle, currentColor 1.5px, transparent 2px) 0 0 / 7px 7px;
}
body.followed-page .followed-avatar-monogram span { position: relative; }
body.followed-page .followed-avatar-monogram[data-avatar-tone="sand"] {
--avatar-surface: #6b5023;
--avatar-ink: #ffe0a1;
}
body.followed-page .followed-avatar-monogram[data-avatar-tone="lavender"] {
--avatar-surface: #574166;
--avatar-ink: #ebd6fa;
}
body.followed-page .followed-avatar-monogram[data-avatar-tone="sky"] {
--avatar-surface: #304f70;
--avatar-ink: #cce6ff;
}
body.followed-page .followed-avatar-monogram[data-avatar-tone="rose"] {
--avatar-surface: #743f34;
--avatar-ink: #ffdac5;
}
body.followed-page .followed-avatar-monogram[data-avatar-tone="sage"] {
--avatar-surface: #435b3c;
--avatar-ink: #dfedbd;
}
.followed-connection-summary {
display: flex;
flex-wrap: wrap;
gap: 1rem 0;
margin: 0 0 1.5rem;
padding: .5rem 0 1.25rem;
border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.followed-connection-summary > div {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
column-gap: .65rem;
padding: 0 1.5rem;
}
.followed-connection-summary > div:first-child { padding-left: 0; }
.followed-connection-summary > div + div { border-left: 1px solid rgba(255, 255, 255, .14); }
.followed-connection-summary dt {
grid-column: 2;
grid-row: 1;
color: #bdb7ba;
font-size: .82rem;
font-weight: 500;
line-height: 1.5;
}
.followed-connection-summary dd {
grid-column: 1;
grid-row: 1;
margin: 0;
color: #f3efef;
font-size: 1.5rem;
font-weight: 800;
line-height: 1.2;
font-variant-numeric: tabular-nums;
}
.followed-connection-summary #pending-count { color: #FFC914; }
@media (max-width: 719px) {
.followed-connection-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.followed-connection-summary > div { grid-template-columns: minmax(0, 1fr); gap: .4rem; align-content: start; padding: 0 .75rem; }
.followed-connection-summary dt { grid-column: 1; grid-row: 2; font-size: .75rem; }
.followed-connection-summary dd { font-size: 1.4rem; }
}
body.followed-page .followed-shell,
body.followed-page .followed-shell :is(section, .followed-browser, .followed-list, .followed-grid) {
content-visibility: visible !important;
contain-intrinsic-block-size: none !important;
}
.push-settings[hidden],
.profile-switch-row[hidden],
.push-help [hidden] {
display: none !important;
}
.push-switch-title {
display: flex;
align-items: center;
gap: 0.15rem;
}
.push-info-ios {
margin-top: 0.6rem;
}
.push-switch-title label {
cursor: pointer;
}
.push-info-btn {
display: grid;
flex: 0 0 auto;
place-items: center;
width: 2.75rem;
height: 2.75rem;
margin: -0.7rem 0;
padding: 0;
border: 0;
background: none;
color: rgba(255, 255, 255, 0.7);
cursor: pointer;
}
.push-info-btn:hover {
color: #FFFFFF;
}
.push-info-btn:focus-visible {
outline: 2px solid #FFC914;
outline-offset: -4px;
border-radius: 999px;
}
.push-info-btn svg {
width: 1.25rem;
height: 1.25rem;
}
.push-switch-status:not(:empty) {
margin-top: 0.35rem;
color: #FFC914 !important;
}
.push-switch-status:empty {
display: none !important;
}
.push-help-secondary {
min-height: 2.75rem;
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 999px;
background: transparent;
padding: 0 1.1rem;
color: #FFFFFF;
font-weight: 700;
}
.push-help-secondary:hover {
border-color: #FFC914;
}
.push-help-secondary:focus-visible {
outline: 2px solid #FFC914;
outline-offset: 2px;
}
.profile-switch-row input[aria-busy="true"] {
opacity: 0.6;
cursor: wait;
}
.push-help {
margin: auto;
width: min(100% - 2rem, 30rem);
max-height: calc(100dvh - 2rem);
overflow-y: auto;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 1.25rem;
background: #231F20;
padding: 1.25rem;
color: #FFFFFF;
}
.push-help::backdrop {
background: rgba(0, 0, 0, 0.65);
}
.push-help h2 {
font-size: 1.3rem;
font-weight: 800;
line-height: 1.2;
}
.push-help h2:focus {
outline: none;
}
.push-help-browser {
margin-top: 0.35rem;
color: #17BEBB;
font-size: 0.8rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.push-help-steps {
display: grid;
gap: 0.6rem;
margin: 1rem 0 0;
padding-left: 1.3rem;
list-style: decimal;
color: rgba(255, 255, 255, 0.86);
line-height: 1.5;
}
.push-help-feedback:not(:empty) {
margin-top: 0.9rem;
color: #FFC914;
line-height: 1.45;
}
.push-help-actions {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
margin-top: 1.25rem;
}
@media (min-width: 640px) {
.push-help {
padding: 1.6rem;
}
}
.push-settings-status {
display: block;
margin-top: 0.5rem;
max-width: 38rem;
color: rgba(255, 255, 255, 0.72);
line-height: 1.5;
}
.create-page {
--create-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
--create-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
min-height: 100dvh;
background: #171415;
}
.create-workspace {
min-height: calc(100dvh - 4.25rem);
background:
radial-gradient(circle at 12% 10%, rgba(118, 176, 65, 0.16), transparent 26rem),
radial-gradient(circle at 82% 92%, rgba(255, 201, 20, 0.13), transparent 28rem),
radial-gradient(circle at 90% 52%, rgba(228, 87, 46, 0.07), transparent 26rem),
linear-gradient(135deg, #2E282A 0%, #231F20 46%, #171415 100%),
#171415;
isolation: isolate;
}
.create-backdrop {
position: absolute;
inset: -2px;
pointer-events: none;
background:
linear-gradient(90deg, rgba(23, 20, 21, 0.58), rgba(23, 20, 21, 0.2) 48%, rgba(23, 20, 21, 0.62)),
linear-gradient(180deg, rgba(23, 20, 21, 0), #171415 96%);
z-index: 0;
}
.create-backdrop::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(23, 20, 21, 0), #171415 96%);
}
.create-bottom-blob {
position: absolute;
right: clamp(-12rem, -10vw, -6rem);
bottom: clamp(1.5rem, 4vw, 3rem);
z-index: 0;
width: clamp(20rem, 38vw, 38rem);
aspect-ratio: 1;
border-radius: 999px;
pointer-events: none;
background: radial-gradient(circle, rgba(255, 201, 20, 0.13) 0%, rgba(255, 201, 20, 0.08) 34%, rgba(255, 201, 20, 0) 70%);
opacity: 0.72;
}
.create-form-card,
.create-preview-card {
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(46, 40, 42, 0.8);
box-shadow: 0 28px 80px rgba(0, 0, 0, 0.34);
backdrop-filter: blur(8px);
}
.create-editor-panel {
position: relative;
display: grid;
align-content: start;
gap: 1rem;
overflow: hidden;
}
.create-editor-panel::before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 0.25rem;
width: 220%;
background: linear-gradient(90deg, #76B041, #FFC914, #E4572E);
animation: createAccentFlow 5s var(--create-ease-in-out) infinite;
will-change: transform, opacity;
}
.create-form-card {
border-radius: 1.35rem;
}
.create-form-section {
min-width: 0;
border: 1px solid rgba(255, 255, 255, 0.09);
border-radius: 1.15rem;
background: rgba(23, 20, 21, 0.22);
padding: 1rem;
transition: border-color 0.18s ease, background 0.18s ease;
}
.create-section-heading {
float: left;
display: flex;
width: 100%;
align-items: flex-start;
gap: 0.75rem;
margin-bottom: 1rem;
padding: 0;
color: #FFFFFF;
outline: none;
}
.create-section-heading > span:nth-child(2) {
display: grid;
min-width: 0;
gap: 0.18rem;
}
.create-section-heading strong {
font-size: 1rem;
font-weight: 900;
}
.create-section-heading small {
color: rgba(255, 255, 255, 0.55);
font-size: 0.78rem;
font-weight: 500;
line-height: 1.45;
}
.create-section-number {
display: grid;
flex: 0 0 2rem;
width: 2rem;
height: 2rem;
place-items: center;
border: 1px solid rgba(118, 176, 65, 0.36);
border-radius: 999px;
background: rgba(118, 176, 65, 0.13);
color: #9BDC62;
font-size: 0.78rem;
font-weight: 900;
}
.create-section-body {
clear: both;
min-height: 0;
}
.create-steps-list {
display: flex;
gap: 0.35rem;
margin: 0;
padding: 0;
list-style: none;
}
.create-steps-list li {
flex: 1;
min-width: 0;
}
.create-step-tab {
display: grid;
width: 100%;
gap: 0.45rem;
padding: 0.35rem 0 0.25rem;
color: rgba(255, 255, 255, 0.55);
font-size: 0.74rem;
font-weight: 800;
text-align: left;
cursor: pointer;
}
.create-step-bar {
position: relative;
height: 4px;
overflow: hidden;
border-radius: 999px;
background: rgba(255, 255, 255, 0.14);
}
.create-step-bar::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: #17BEBB;
transform: scaleX(0);
transform-origin: left;
transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
.create-step-tab.is-done .create-step-bar::after { transform: scaleX(1); }
.create-step-tab[aria-current="step"] .create-step-bar::after {
background: linear-gradient(90deg, #17BEBB, #FFC914);
transform: scaleX(1);
}
.create-step-tab[aria-current="step"],
.create-step-tab:hover { color: #FFFFFF; }
.create-step-tab:focus-visible { outline: 3px solid rgba(118, 176, 65, 0.46); outline-offset: 3px; border-radius: 0.4rem; }
.create-step-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@media (max-width: 639px) {
.create-step-name { display: none; }
.create-step-tab { padding-block: 0.6rem; }
}
.create-steps .reg-progress-label { margin: 0.35rem 0 0; }
@media (min-width: 640px) {
.create-steps .reg-progress-label { display: none; }
}
.create-form-card.is-wizard .create-form-section:not([hidden]) > * {
animation: create-step-in 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.create-form-card.is-wizard[data-direction="back"] { --create-step-shift: -1.5rem; }
@keyframes create-step-in {
from { opacity: 0; transform: translateX(var(--create-step-shift, 1.5rem)); }
}
.create-back-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.35rem;
min-height: 3.05rem;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 1rem;
padding: 0 1rem;
color: rgba(255, 255, 255, 0.78);
font-weight: 900;
}
.create-back-button svg {
width: 1.1rem;
height: 1.1rem;
stroke: currentColor;
stroke-width: 2.2;
stroke-linecap: round;
stroke-linejoin: round;
}
.create-back-button:hover { border-color: rgba(118, 176, 65, 0.5); color: #FFFFFF; }
.create-back-button[hidden] { display: none; }
.create-form-summary {
border: 1px solid rgba(255, 90, 95, 0.42);
border-radius: 1rem;
background: rgba(255, 90, 95, 0.1);
color: #FFD4D5;
padding: 0.85rem 1rem;
}
.create-form-summary[hidden] {
display: none;
}
.create-form-summary strong,
.create-form-summary p {
display: block;
}
.create-required-note {
display: block;
margin-top: 0.45rem;
color: rgba(255, 255, 255, 0.52);
font-size: 0.72rem;
font-weight: 800;
}
.create-required-note > span {
color: #FF8D91;
}
.create-form-summary p {
margin-top: 0.2rem;
color: rgba(255, 255, 255, 0.68);
font-size: 0.8rem;
}
.create-page .text-sea,
.create-page .hover\:text-sea:hover {
color: var(--action-secondary) !important;
}
.create-page .bg-sea,
.create-page .hover\:bg-sea:hover {
background: var(--action-secondary) !important;
}
.create-page #profileBtn {
background: #17BEBB !important;
color: #2E282A !important;
}
.create-page #profileBtn:hover,
.create-page #profileBtn:focus-visible {
background: #FFC914 !important;
color: #2E282A !important;
}
.create-page .focus\:border-sea:focus,
.create-page .hover\:border-sea:hover {
border-color: var(--action-secondary) !important;
}
.create-field {
display: grid;
align-content: start;
gap: 0.35rem;
}
.create-field-heading {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.75rem;
}
.create-label {
color: rgba(255, 255, 255, 0.8);
font-size: 0.875rem;
font-weight: 600;
line-height: 1.5;
}
.create-label > span {
color: #FF8D91;
}
.create-input {
width: 100%;
min-height: 2.75rem;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 1rem;
background: rgba(35, 31, 32, 0.9);
color: white;
padding: 0.62rem 0.85rem;
transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.create-input::placeholder {
color: rgba(255, 255, 255, 0.32);
}
.create-input:hover {
border-color: rgba(118, 176, 65, 0.54);
background: rgba(35, 31, 32, 0.9);
}
.create-input:focus {
outline: none;
border-color: rgba(118, 176, 65, 0.58);
box-shadow: 0 0 0 2px rgba(118, 176, 65, 0.12);
}
.create-input[aria-invalid="true"] {
border-color: rgba(255, 90, 95, 0.78);
box-shadow: 0 0 0 2px rgba(255, 90, 95, 0.12);
}
.create-schedule-control {
--schedule-accent: #76B041;
position: relative;
display: grid;
grid-template-columns: 2.65rem minmax(0, 1fr) 1.75rem;
min-height: 4.6rem;
align-items: center;
gap: 0.7rem;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.11);
border-radius: 1rem;
background:
linear-gradient(110deg, color-mix(in srgb, var(--schedule-accent) 9%, transparent), transparent 54%),
rgba(35, 31, 32, 0.92);
padding: 0.55rem 0.7rem;
transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.create-schedule-control[data-kind="time"] {
--schedule-accent: #FFC914;
}
.create-schedule-control:hover,
.create-schedule-control:focus-within,
.create-schedule-control[data-filled="true"] {
border-color: color-mix(in srgb, var(--schedule-accent) 62%, transparent);
}
.create-schedule-control:focus-within {
box-shadow: 0 0 0 3px color-mix(in srgb, var(--schedule-accent) 14%, transparent);
}
.create-schedule-control:has(.create-schedule-input[aria-invalid="true"]) {
border-color: rgba(255, 90, 95, 0.78);
box-shadow: 0 0 0 3px rgba(255, 90, 95, 0.12);
}
.create-schedule-icon {
display: grid;
width: 2.65rem;
height: 2.65rem;
place-items: center;
border: 1px solid color-mix(in srgb, var(--schedule-accent) 30%, transparent);
border-radius: 0.85rem;
background: color-mix(in srgb, var(--schedule-accent) 12%, transparent);
color: var(--schedule-accent);
}
.create-schedule-icon svg {
width: 1.35rem;
height: 1.35rem;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 1.75;
}
.create-schedule-copy {
display: grid;
min-width: 0;
gap: 0.16rem;
}
.create-schedule-kicker {
color: color-mix(in srgb, var(--schedule-accent) 86%, white);
font-size: 0.63rem;
font-weight: 900;
letter-spacing: 0.1em;
line-height: 1;
text-transform: uppercase;
}
.create-schedule-input {
width: 100%;
min-width: 0;
min-height: 1.8rem;
border: 0;
outline: 0;
background: transparent;
color: #FFFFFF;
color-scheme: dark;
cursor: pointer;
font: inherit;
font-size: 1rem;
font-weight: 850;
font-variant-numeric: tabular-nums;
padding: 0;
}
.create-schedule-input::-webkit-calendar-picker-indicator {
cursor: pointer;
opacity: 0.7;
}
.create-schedule-ready {
display: grid;
width: 1.7rem;
height: 1.7rem;
place-items: center;
border-radius: 999px;
background: color-mix(in srgb, var(--schedule-accent) 18%, transparent);
color: var(--schedule-accent);
opacity: 0;
transform: scale(0.84);
transition: opacity 0.16s ease, transform 0.18s var(--create-ease-out);
}
.create-schedule-ready svg {
width: 1rem;
height: 1rem;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 2.2;
}
.create-schedule-control[data-filled="true"] .create-schedule-ready {
opacity: 1;
transform: scale(1);
}
.create-schedule-summary {
display: flex;
min-height: 3.25rem;
align-items: center;
gap: 0.75rem;
border: 1px solid rgba(23, 190, 187, 0.18);
border-radius: 1rem;
background: linear-gradient(90deg, rgba(23, 190, 187, 0.1), rgba(118, 176, 65, 0.06));
padding: 0.65rem 0.85rem;
}
.create-schedule-summary-mark {
flex: 0 0 0.55rem;
width: 0.55rem;
height: 0.55rem;
border-radius: 999px;
background: #17BEBB;
box-shadow: 0 0 0 0.3rem rgba(23, 190, 187, 0.12);
}
.create-schedule-summary > span:last-child {
display: grid;
min-width: 0;
gap: 0.08rem;
}
.create-schedule-summary small {
color: rgba(255, 255, 255, 0.42);
font-size: 0.62rem;
font-weight: 900;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.create-schedule-summary strong {
color: rgba(255, 255, 255, 0.88);
font-size: 0.82rem;
font-weight: 800;
}
.create-field-meta {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.75rem;
}
.create-field-help,
.create-character-count,
.create-field-error {
font-size: 0.75rem;
line-height: 1.45;
}
.create-field-help,
.create-character-count {
color: rgba(255, 255, 255, 0.44);
}
.create-character-count {
flex: 0 0 auto;
font-variant-numeric: tabular-nums;
}
.create-character-count.is-near-limit {
color: #FFC914;
}
.create-field-error {
min-height: 0;
color: #FF9A9D;
font-weight: 700;
}
.create-field-error:empty {
display: none;
}
.create-place-row {
display: grid;
gap: 0.65rem;
}
.create-place-verify {
min-height: 2.75rem;
border: 1px solid rgba(255, 201, 20, 0.28);
border-radius: 1rem;
background: #FFC914;
color: #2E282A;
font-weight: 900;
padding: 0 1.05rem;
transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.create-place-verify:hover:not(:disabled),
.create-place-verify:focus-visible:not(:disabled) {
background: #76B041;
border-color: rgba(118, 176, 65, 0.7);
transform: translateY(-1px);
}
.create-place-verify:disabled {
cursor: wait;
opacity: 0.72;
}
.create-place-options {
display: grid;
max-height: 16rem;
overflow-y: auto;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 1rem;
background: rgba(22, 19, 20, 0.98);
box-shadow: 0 18px 46px rgba(0, 0, 0, 0.26);
}
.create-place-options[hidden] {
display: none;
}
.create-place-option {
display: grid;
gap: 0.15rem;
width: 100%;
border: 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
background: transparent;
color: #FFFFFF;
padding: 0.72rem 0.85rem;
text-align: left;
transition: background 0.18s ease, color 0.18s ease;
}
.create-place-option:last-child {
border-bottom: 0;
}
.create-place-option:hover,
.create-place-option:focus-visible,
.create-place-option.is-active {
background: rgba(23, 190, 187, 0.14);
outline: none;
}
.create-place-option-title {
font-size: 0.92rem;
font-weight: 900;
}
.create-place-option-detail {
color: rgba(255, 255, 255, 0.55);
font-size: 0.78rem;
line-height: 1.35;
}
.create-place-status,
.create-place-attribution {
font-size: 0.78rem;
line-height: 1.45;
}
.create-place-confirmation {
position: relative;
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 0.8rem;
overflow: hidden;
border: 1px solid rgba(118, 176, 65, 0.32);
border-radius: 1rem;
background:
linear-gradient(rgba(118, 176, 65, 0.08), rgba(118, 176, 65, 0.08)),
repeating-linear-gradient(0deg, transparent 0 18px, rgba(255, 255, 255, 0.025) 18px 19px),
repeating-linear-gradient(90deg, transparent 0 18px, rgba(255, 255, 255, 0.025) 18px 19px),
#211E1F;
padding: 0.8rem;
}
.create-place-confirmation[hidden] {
display: none;
}
.create-place-confirmation > div:last-child {
display: grid;
min-width: 0;
gap: 0.12rem;
}
.create-place-confirmation span,
.create-place-confirmation small {
color: rgba(255, 255, 255, 0.5);
font-size: 0.7rem;
}
.create-place-confirmation strong {
overflow: hidden;
color: #FFFFFF;
font-size: 0.82rem;
text-overflow: ellipsis;
white-space: nowrap;
}
.create-place-pin {
display: grid;
width: 2.6rem;
height: 2.6rem;
place-items: center;
border-radius: 999px;
background: rgba(118, 176, 65, 0.17);
box-shadow: 0 0 0 6px rgba(118, 176, 65, 0.06);
}
.create-place-pin svg,
.create-upload-icon svg {
width: 1.35rem;
height: 1.35rem;
stroke: #9BDC62;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 1.8;
}
.create-place-status {
color: rgba(255, 255, 255, 0.5);
}
.create-place-status[data-state="success"] {
color: #76B041;
}
.create-place-status[data-state="error"] {
color: #FF5A5F;
}
.create-place-status[data-state="loading"] {
color: #FFC914;
}
.create-place-attribution {
color: rgba(255, 255, 255, 0.38);
}
@media (min-width: 640px) {
.create-place-row {
grid-template-columns: minmax(0, 1fr) auto;
}
}
textarea.create-input {
min-height: 5.5rem;
resize: none;
}
.create-category-select {
position: relative;
--category-accent: #17BEBB;
--category-surface: #146B69;
--category-soft: rgba(23, 190, 187, 0.18);
}
.create-category-select[data-tone="lava"] {
--category-accent: #E4572E;
--category-surface: #7A3928;
--category-soft: rgba(228, 87, 46, 0.2);
}
.create-category-select[data-tone="cactus"] {
--category-accent: #76B041;
--category-surface: #536F2D;
--category-soft: rgba(118, 176, 65, 0.2);
}
.create-category-select[data-tone="sun"] {
--category-accent: #FFC914;
--category-surface: #806509;
--category-soft: rgba(255, 201, 20, 0.2);
}
.create-category-select[data-tone="sea"] {
--category-accent: #17BEBB;
--category-surface: #146B69;
--category-soft: rgba(23, 190, 187, 0.18);
}
.create-category-select[data-category="altro"] {
--category-accent: #FFFFFF;
--category-surface: #403A3C;
--category-soft: rgba(255, 255, 255, 0.12);
}
.create-category-native {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
}
.create-category-trigger {
display: flex;
width: 100%;
min-height: 2.75rem;
cursor: pointer;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
border: 1px solid var(--category-accent);
border-radius: 1rem;
background: var(--category-surface);
color: #FFFFFF;
padding: 0.48rem 0.55rem 0.48rem 0.85rem;
text-align: left;
transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.create-category-trigger:hover,
.create-category-trigger[aria-expanded="true"] {
border-color: var(--category-accent);
background: var(--category-surface);
box-shadow: 0 0 0 3px var(--category-soft);
}
.create-category-trigger:focus-visible {
outline: none;
border-color: var(--category-accent);
box-shadow: 0 0 0 3px var(--category-soft);
}
.create-category-affordance {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
gap: 0.4rem;
border-radius: 0.7rem;
background: rgba(0, 0, 0, 0.2);
color: #FFFFFF;
padding: 0.35rem 0.42rem 0.35rem 0.55rem;
}
.create-category-affordance small {
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.01em;
}
.create-category-affordance svg {
width: 1rem;
height: 1rem;
color: var(--category-accent);
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 1.8;
transition: transform 0.18s var(--create-ease-out);
}
.create-category-trigger[aria-expanded="true"] .create-category-affordance svg {
transform: rotate(180deg);
}
.create-category-options {
position: relative;
z-index: 1;
display: grid;
gap: 0.2rem;
max-height: 0;
visibility: hidden;
box-sizing: border-box;
overflow: hidden;
border: 1px solid transparent;
border-radius: 1rem;
background: #211E1F;
box-shadow: none;
margin-top: 0.45rem;
opacity: 0;
padding: 0.4rem;
pointer-events: none;
transition: max-height 0.2s var(--create-ease-out), border-color 0.14s ease,
opacity 0.14s ease, visibility 0s linear 0.2s;
}
.create-category-options[data-open="true"] {
max-height: 20rem;
visibility: visible;
border-color: var(--category-accent);
opacity: 1;
pointer-events: auto;
transition-delay: 0s;
}
.create-category-options [role="option"] {
--option-accent: #FFFFFF;
--option-surface: #403A3C;
display: flex;
align-items: center;
gap: 0.55rem;
min-height: 2.5rem;
cursor: pointer;
border-radius: 0.7rem;
color: rgba(255, 255, 255, 0.74);
padding: 0.55rem 0.7rem;
text-align: left;
transition: color 0.14s ease, background 0.14s ease;
}
.create-category-options [role="option"]::before {
content: '';
flex: 0 0 0.55rem;
width: 0.55rem;
height: 0.55rem;
border-radius: 999px;
background: var(--option-accent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--option-accent) 18%, transparent);
}
.create-category-options [data-value="Sport"],
.create-category-options [data-value="Outdoor"] {
--option-accent: #17BEBB;
--option-surface: #146B69;
}
.create-category-options [data-value="Music"] {
--option-accent: #E4572E;
--option-surface: #7A3928;
}
.create-category-options [data-value="Talk"] {
--option-accent: #76B041;
--option-surface: #536F2D;
}
.create-category-options [data-value="Food"] {
--option-accent: #FFC914;
--option-surface: #806509;
}
.create-category-options [role="option"]:hover,
.create-category-options [role="option"]:focus-visible {
outline: none;
background: color-mix(in srgb, var(--option-accent) 16%, transparent);
color: #FFFFFF;
}
.create-category-options [role="option"][aria-selected="true"] {
background: var(--option-surface);
color: #FFFFFF;
font-weight: 800;
}
.create-file-input {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
}
.create-upload-zone {
display: flex;
min-height: 6rem;
cursor: pointer;
align-items: center;
justify-content: center;
gap: 0.85rem;
border: 1px dashed rgba(255, 255, 255, 0.22);
border-radius: 1rem;
background: rgba(35, 31, 32, 0.76);
padding: 1rem;
text-align: left;
transition: border-color 0.2s ease, background 0.2s ease;
}
.create-upload-zone.is-dragging,
.create-upload-zone:focus-within {
border-color: rgba(118, 176, 65, 0.72);
background: rgba(118, 176, 65, 0.1);
outline: 2px solid rgba(118, 176, 65, 0.15);
outline-offset: 2px;
}
.create-upload-zone > span:last-child {
display: grid;
gap: 0.22rem;
}
.create-upload-zone strong {
color: #FFFFFF;
font-size: 0.88rem;
}
.create-upload-zone small {
color: rgba(255, 255, 255, 0.46);
font-size: 0.75rem;
line-height: 1.4;
}
.create-upload-icon {
display: grid;
flex: 0 0 2.7rem;
width: 2.7rem;
height: 2.7rem;
place-items: center;
border-radius: 0.85rem;
background: rgba(118, 176, 65, 0.12);
}
.create-card-framing { position: relative; margin-top: 0.25rem; }
.create-card-framing .create-framing-trigger { padding-right: 3.25rem; }
.create-card-framing .create-framing-trigger-icon { display: none; }
.create-cover-remove {
position: absolute;
right: 0.6rem;
top: 0.6rem;
display: grid;
place-items: center;
width: 44px;
height: 44px;
border-radius: 0.7rem;
color: rgba(255, 255, 255, 0.65);
background: rgba(255, 255, 255, 0.05);
cursor: pointer;
}
.create-cover-remove svg { width: 1rem; height: 1rem; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.create-cover-remove:focus-visible { outline: 2px solid #FFC914; outline-offset: 2px; }
.create-cover-upload-status { display: block; margin-top: 0.5rem; color: rgba(255, 255, 255, 0.6); font-size: 0.75rem; }
.create-cover-upload-status[hidden] { display: none; }
.create-media-settings,
.create-publication-settings { display: grid; align-content: start; gap: 1rem; min-width: 0; }
.create-publish-grid { align-items: start; }
.create-publish-grid .create-field-error:empty { display: none; }
.create-publish-grid .create-field,
.create-publish-grid .create-field > * { min-width: 0; }
.create-upload-zone > span:last-child { min-width: 0; }
.create-publish-grid .create-guidelines-field,
.create-publish-grid .create-guidelines-error { grid-column: 1 / -1; }
.create-media-list { margin-top: 0.35rem; }
@media (hover: hover) and (pointer: fine) {
.create-cover-remove:hover { background: rgba(255, 90, 95, 0.12); color: #FFD4D5; }
}
.create-card-framing[hidden] { display: none; }
.create-card-framing-help {
margin: 0.4rem 0 1rem;
color: rgba(255, 255, 255, 0.65);
font-size: 0.85rem;
line-height: 1.6;
}
.create-framing-dialog {
position: fixed;
inset: 0;
width: min(38rem, calc(100% - 2rem));
max-height: calc(100dvh - 2rem);
margin: auto;
padding: 1.5rem;
overflow-y: auto;
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 1.5rem;
background: #231F20;
color: #fff;
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
}
.create-framing-dialog::backdrop { background: rgba(0, 0, 0, 0.72); }
.create-framing-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.create-framing-header h2 { margin: 0; font-size: 1.25rem; font-weight: 700; }
.create-framing-close {
flex: 0 0 44px;
height: 44px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.07);
color: #fff;
font-size: 1.6rem;
cursor: pointer;
}
.create-card-framing-stage {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: 1rem;
background: rgba(255, 255, 255, 0.06);
cursor: grab;
touch-action: none;
}
.create-card-framing-stage.is-dragging { cursor: grabbing; }
.create-card-framing-stage img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
user-select: none;
pointer-events: none;
}
.create-framing-grid {
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.2;
transition: opacity 160ms ease;
background-image: linear-gradient(to right, transparent calc(33.333% - 0.5px), #fff 33.333%, transparent calc(33.333% + 0.5px), transparent calc(66.666% - 0.5px), #fff 66.666%, transparent calc(66.666% + 0.5px)), linear-gradient(to bottom, transparent calc(33.333% - 0.5px), #fff 33.333%, transparent calc(33.333% + 0.5px), transparent calc(66.666% - 0.5px), #fff 66.666%, transparent calc(66.666% + 0.5px));
}
.create-framing-keyboard { margin: 0.75rem 0 1rem; color: rgba(255, 255, 255, 0.5); font-size: 0.75rem; }
.create-framing-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.create-framing-actions > :first-child { margin-right: auto; }
.create-framing-actions .create-framing-confirm { width: auto; min-height: 44px; padding: 0.75rem 1rem; font-size: 0.85rem; }
.create-framing-close:focus-visible,
.create-card-framing-stage:focus-visible { outline: 2px solid #FFC914; outline-offset: 3px; }
@media (max-width: 480px) {
.create-framing-dialog { padding: 1rem; }
.create-card-framing .create-framing-thumbnail { flex-basis: 3.5rem; width: 3.5rem; height: 2.6rem; }
.create-card-framing .create-framing-trigger { gap: 0.6rem; }
.create-framing-actions .create-framing-confirm { flex-basis: 100%; }
}
.create-framing-trigger {
display: flex;
align-items: center;
gap: 0.85rem;
width: 100%;
padding: 0.7rem;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 1rem;
background: rgba(255, 255, 255, 0.035);
color: #fff;
text-align: left;
cursor: pointer;
transition: border-color 160ms ease, background 160ms ease;
}
.create-framing-thumbnail {
flex: 0 0 4.5rem;
width: 4.5rem;
height: 3.2rem;
border-radius: 0.6rem;
object-fit: cover;
}
.create-framing-trigger-copy { display: grid; gap: 0.3rem; min-width: 0; }
.create-framing-trigger-copy strong { font-size: 0.85rem; font-weight: 700; }
.create-framing-trigger-copy small { color: rgba(255, 255, 255, 0.58); font-size: 0.75rem; line-height: 1.45; }
.create-framing-trigger-icon {
display: grid;
flex: 0 0 2.5rem;
height: 2.5rem;
margin-left: auto;
place-items: center;
border-radius: 0.7rem;
background: rgba(23, 190, 187, 0.12);
color: #17BEBB;
}
.create-framing-trigger-icon svg,
.create-framing-close svg,
.create-framing-drag-hint svg { width: 1.2rem; height: 1.2rem; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.create-framing-eyebrow { display: block; margin-bottom: 0.45rem; color: #17BEBB; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.create-framing-header { align-items: flex-start; }
.create-framing-header h2 { font-size: clamp(1.1rem, 3vw, 1.4rem); line-height: 1.3; letter-spacing: -0.025em; }
.create-framing-close { display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, 0.08); transition: background 160ms ease; }
.create-card-framing-stage { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
.create-framing-drag-hint {
position: absolute;
bottom: 0.8rem;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.75rem;
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 999px;
background: rgba(23, 20, 21, 0.72);
color: #fff;
font-size: 0.7rem;
white-space: nowrap;
pointer-events: none;
transition: opacity 120ms ease;
}
.create-card-framing-stage.is-dragging .create-framing-drag-hint { opacity: 0; }
.create-card-framing-stage.is-dragging .create-framing-grid,
.create-card-framing-stage:focus-visible .create-framing-grid { opacity: 0.45; }
.create-framing-keyboard { line-height: 1.5; }
.create-framing-actions { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.create-framing-cancel,
.create-framing-confirm { min-height: 44px; border-radius: 0.8rem; padding: 0.7rem 1rem; font-size: 0.8rem; font-weight: 700; cursor: pointer; transition: background 160ms ease, transform 120ms ease; }
.create-framing-cancel { background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.8); }
.create-framing-confirm { background: #17BEBB; color: #171415; }
.create-framing-cancel:active,
.create-framing-confirm:active { transform: scale(0.98); }
.create-framing-trigger:focus-visible,
.create-framing-cancel:focus-visible,
.create-framing-confirm:focus-visible { outline: 2px solid #FFC914; outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
.create-framing-trigger:hover { border-color: rgba(23, 190, 187, 0.5); background: rgba(23, 190, 187, 0.055); }
.create-framing-close:hover,
.create-framing-cancel:hover { background: rgba(255, 255, 255, 0.12); }
.create-framing-confirm:hover { background: #42cfcc; }
.create-card-framing-stage:hover .create-framing-grid { opacity: 0.45; }
}
@media (prefers-reduced-motion: reduce) {
.create-framing-trigger,
.create-framing-close,
.create-framing-cancel,
.create-framing-confirm,
.create-framing-grid,
.create-framing-drag-hint { transition: none; }
}
.create-media-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
gap: 0.6rem;
}
.create-media-list:empty {
display: none;
}
.create-media-item {
position: relative;
overflow: hidden;
aspect-ratio: 1;
border-radius: 0.8rem;
background: rgba(255, 255, 255, 0.05);
}
.create-media-item img,
.create-media-item video {
width: 100%;
height: 100%;
object-fit: cover;
}
.create-media-item[data-uploading="true"] :is(img, video) {
opacity: 0.45;
}
.create-media-label {
position: absolute;
left: 0.4rem;
bottom: 0.4rem;
border-radius: 999px;
background: rgba(23, 20, 21, 0.78);
padding: 0.15rem 0.5rem;
color: #FFFFFF;
font-size: 0.68rem;
font-weight: 800;
}
.create-media-actions {
position: absolute;
top: 0.3rem;
right: 0.3rem;
display: flex;
gap: 0.25rem;
}
.create-media-actions button {
width: 2rem;
height: 2rem;
border-radius: 999px;
background: rgba(23, 20, 21, 0.78);
color: #FFFFFF;
font-weight: 900;
}
.create-media-actions button:disabled {
display: none;
}
.create-links {
display: grid;
gap: 0.5rem;
}
.create-link-row {
display: flex;
gap: 0.5rem;
}
.create-link-row button {
width: 2.75rem;
flex: 0 0 auto;
border-radius: 0.8rem;
color: #FF9A9D;
font-size: 1.25rem;
font-weight: 800;
}
.create-inline-button {
justify-self: start;
min-height: 2.75rem;
color: #17BEBB;
font-size: 0.85rem;
font-weight: 800;
}
.create-inline-button[hidden] {
display: none;
}
.create-cohost-options {
display: flex;
max-height: 12rem;
flex-wrap: wrap;
gap: 0.5rem;
overflow-y: auto;
}
.create-cohost-option {
display: inline-flex;
min-height: 2.75rem;
align-items: center;
gap: 0.5rem;
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 999px;
padding: 0 0.9rem;
color: rgba(255, 255, 255, 0.8);
font-size: 0.85rem;
cursor: pointer;
}
.create-cohost-option:has(input:checked) {
border-color: #17BEBB;
background: rgba(23, 190, 187, 0.16);
color: #FFFFFF;
}
.create-cohost-option:has(input:disabled) {
cursor: not-allowed;
opacity: 0.5;
}
.create-end-toggle {
display: flex;
min-height: 2.9rem;
align-items: center;
gap: 0.75rem;
padding: 0 1rem;
cursor: pointer;
}
#event-end-fields {
margin-top: 0.75rem;
}
#event-end-fields[hidden] {
display: none;
}
.create-choice {
display: flex;
min-height: 2.9rem;
cursor: pointer;
align-items: center;
gap: 0.75rem;
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 1rem;
background: rgba(35, 31, 32, 0.7);
padding: 0.62rem 0.85rem;
color: rgba(255, 255, 255, 0.8);
transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.create-choice:hover {
border-color: var(--action-secondary);
background: rgba(35, 31, 32, 0.9);
transform: translateY(-1px);
}
.create-choice input {
accent-color: var(--action-secondary);
}
.create-checkbox {
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 1rem;
background: rgba(35, 31, 32, 0.7);
}
.create-checkbox {
display: flex;
align-items: flex-start;
gap: 0.85rem;
padding: 0.72rem 0.85rem;
}
.create-checkbox input {
margin-top: 0.2rem;
accent-color: var(--action-secondary);
}
.create-guidelines-link {
color: var(--action-secondary);
font-weight: 800;
text-decoration: underline;
text-underline-offset: 0.18rem;
}
.create-form-actions {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
.create-form-actions .create-submit { flex: 1 1 10rem; }
.create-form-actions .create-draft-button { flex: 1 1 100%; order: 3; }
.create-draft-button,
.create-submit {
min-height: 3.05rem;
border: 1px solid transparent;
border-radius: 1rem;
font-weight: 900;
}
.create-draft-button {
border-color: rgba(255, 255, 255, 0.14);
background: rgba(255, 255, 255, 0.05);
color: rgba(255, 255, 255, 0.78);
transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.create-submit {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
background: #FFC914;
color: #2E282A;
box-shadow: 0 18px 42px rgba(255, 201, 20, 0.16);
transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.create-submit:hover:not(:disabled) {
background: #76B041;
box-shadow: 0 20px 48px rgba(118, 176, 65, 0.2);
transform: translateY(-2px);
}
.create-submit:focus-visible {
outline: 3px solid rgba(118, 176, 65, 0.56);
outline-offset: 3px;
}
.create-draft-button:focus-visible {
outline: 3px solid rgba(118, 176, 65, 0.46);
outline-offset: 3px;
}
.create-submit:disabled,
.create-draft-button:disabled {
cursor: wait;
opacity: 0.6;
transform: none;
}
.create-submit-spinner {
display: none;
width: 1rem;
height: 1rem;
border: 2px solid rgba(46, 40, 42, 0.32);
border-top-color: #2E282A;
border-radius: 999px;
animation: createSpinner 0.7s linear infinite;
}
.create-submit.is-loading .create-submit-spinner {
display: block;
}
.create-draft-status {
min-height: 1.1rem;
color: rgba(255, 255, 255, 0.46);
font-size: 0.75rem;
text-align: right;
}
.create-preview-rail {
position: relative;
min-width: 0;
}
body.create-page .create-workspace > .create-workspace-content {
max-width: 90rem;
}
@media (min-width: 1024px) {
body.create-page .create-layout {
grid-template-columns: minmax(0, 1fr) minmax(0, min(42%, 32rem)) !important;
gap: clamp(1.5rem, 3vw, 3rem) !important;
}
body.create-page .create-form-card {
width: 100%;
max-width: none;
}
body.create-page .create-preview-rail {
position: sticky;
top: 6rem;
}
body.create-page .create-preview-card {
position: relative;
top: auto;
max-height: none;
overflow: hidden;
}
body.create-page .create-preview-heading {
padding: 1rem 1.25rem 0.5rem;
}
body.create-page .create-preview-heading h2 {
font-size: 1.4rem;
}
body.create-page .create-preview-progress {
margin: 0 1.25rem;
padding: 0.5rem 0 0.75rem;
}
body.create-page .create-preview-event {
padding: 1rem 1.25rem 0;
}
body.create-page .create-preview-event .ha-event-card-media {
height: clamp(9rem, 22vh, 13rem);
aspect-ratio: auto;
}
body.create-page .create-preview-event .ha-event-card-body {
gap: 0.35rem;
padding: 0.85rem 1rem;
}
body.create-page .create-preview-details {
gap: 1rem;
padding: 1rem 1.25rem;
}
}
.create-preview-heading {
padding: 1.5rem 1.5rem 1rem;
}
.create-preview-eyebrow {
margin: 0 0 0.5rem;
color: var(--action-secondary);
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.create-preview-heading h2 {
margin: 0;
color: var(--content-heading);
font-size: clamp(1.4rem, 2vw, 1.8rem);
font-weight: 800;
line-height: 1.2;
}
.create-preview-heading > p:last-child {
margin: 0.5rem 0 0;
color: var(--content-secondary);
font-size: 0.85rem;
line-height: 1.5;
}
body.create-page .create-preview-progress {
margin: 0 1.5rem;
padding: 0.75rem 0 1rem;
color: var(--content-secondary);
}
body.create-page .create-preview-event {
padding: 1.25rem 1.5rem 0;
}
body.create-page .create-preview-event .ha-event-card-media {
max-height: none;
}
body.create-page .create-preview-event .ha-event-card-body {
gap: 0.5rem;
padding: 1rem 1.25rem;
}
body.create-page .create-preview-event .ha-event-card-body h3 {
font-size: clamp(1.1rem, 1.5vw, 1.4rem);
line-height: 1.3;
}
.create-preview-details {
display: grid;
gap: 1.25rem;
padding: 1.5rem;
}
.create-preview-detail-label {
margin: 0 0 0.5rem;
color: var(--content-secondary);
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
}
body.create-page #preview-description {
margin: 0;
color: var(--content-secondary);
line-height: 1.7;
}
body.create-page .create-preview-visibility {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.5rem 1rem;
border-color: var(--ha-border);
background: var(--ha-surface);
}
.create-preview-visibility .create-preview-detail-label,
body.create-page #preview-privacy {
margin: 0;
}
@media (max-width: 1023px) {
body.create-page .create-workspace-content {
padding-bottom: calc(6rem + env(safe-area-inset-bottom));
}
body.create-page .create-layout {
gap: 1.5rem !important;
margin-top: 0 !important;
padding-top: 0.5rem;
}
.create-preview-heading {
padding: 1.25rem 3.75rem 1rem 1.25rem;
}
body.create-page .create-preview-progress {
margin: 0 1.25rem;
}
body.create-page .create-preview-event {
padding: 1rem 1rem 0;
}
.create-preview-details {
padding: 1.25rem;
}
}
@media (max-width: 639px) {
body.create-page .create-hero {
min-height: 20rem;
background-position: center, 58% 62%;
}
body.create-page #event-page-title {
font-size: clamp(1.75rem, 7.5vw, 2.5rem);
line-height: 1.15;
}
body.create-page :is(.create-input, .create-category-trigger) {
min-width: 0;
font-size: 1rem;
}
body.create-page .create-field-heading {
flex-wrap: wrap;
gap: 0.25rem 0.75rem;
}
body.create-page .create-form-section {
padding: 0.85rem;
}
}
.create-layout {
position: relative;
padding-top: clamp(1.5rem, 2.5vw, 2.5rem);
align-items: start;
}
@media (min-width: 1024px) {
}
@media (min-width: 1280px) {
.create-editor-panel {
gap: 0.85rem;
}
.create-form-section {
padding: 0.95rem;
}
.create-section-heading {
margin-bottom: 0.8rem;
}
.create-info-grid,
.create-publish-grid {
gap: 0.8rem;
}
textarea.create-input {
min-height: 4.75rem;
}
.create-publish-grid {
grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
align-items: start;
}
.create-media-settings,
.create-publication-settings {
display: contents;
}
.create-media-settings > :first-child { grid-area: 1 / 1; }
.create-media-settings > :nth-child(2) { grid-area: 2 / 1; }
.create-publication-settings > :first-child { grid-area: 1 / 2; }
.create-publication-settings > :nth-child(2) { grid-area: 2 / 2; }
.create-image-field,
.create-visibility-field {
display: flex;
flex-direction: column;
align-self: stretch;
}
.create-image-field > .create-upload-zone { flex: 1; }
.create-visibility-field > .grid {
flex: 1;
grid-auto-rows: 1fr;
}
.create-media-list:empty { display: none; }
.create-visibility-field > .grid {
grid-template-columns: 1fr;
gap: 0.55rem;
}
.create-guidelines-field,
.create-guidelines-error {
grid-column: 1 / -1;
}
.create-upload-zone {
min-height: 7.2rem;
}
.create-form-actions {
margin-top: 0.15rem;
}
}
.create-preview-card {
position: sticky;
top: 6rem;
overflow: hidden;
border-radius: 1.35rem;
}
.create-preview-progress {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 0.4rem 0.75rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
padding: 0.8rem 1rem;
color: rgba(255, 255, 255, 0.58);
font-size: 0.72rem;
}
.create-preview-progress strong {
color: #FFFFFF;
font-variant-numeric: tabular-nums;
}
.create-preview-progress-track {
grid-column: 1 / -1;
height: 0.25rem;
overflow: hidden;
border-radius: 999px;
background: rgba(255, 255, 255, 0.08);
}
.create-preview-progress-track > span {
display: block;
width: 0;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, #76B041, #FFC914);
transition: width 0.22s ease-out;
}
.create-preview-toggle {
display: none;
}
.create-preview-close {
display: none;
}
.create-toast {
position: fixed;
right: 1rem;
bottom: 1rem;
z-index: 100;
max-width: min(24rem, calc(100vw - 2rem));
border: 1px solid rgba(118, 176, 65, 0.32);
border-radius: 1rem;
background: rgba(30, 27, 28, 0.97);
color: #FFFFFF;
box-shadow: 0 18px 50px rgba(0, 0, 0, 0.38);
padding: 0.85rem 1rem;
font-size: 0.82rem;
font-weight: 700;
}
.create-toast[data-state="error"] {
border-color: rgba(255, 90, 95, 0.42);
}
.create-toast[hidden] {
display: none;
}
#preview-description {
max-width: 100%;
overflow-wrap: anywhere;
}
#preview-description {
white-space: pre-wrap;
}
.create-preview-event {
padding: 1.25rem 1.25rem 0;
}
.create-preview-facts {
display: grid;
grid-template-columns: auto 1fr;
gap: 0.45rem 1rem;
border-radius: 0.95rem;
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(35, 31, 32, 0.7);
padding: 0.8rem;
font-size: 0.85rem;
}
.create-preview-facts dt {
color: rgba(255, 255, 255, 0.45);
font-weight: 700;
}
.create-preview-facts dd {
margin: 0;
overflow-wrap: anywhere;
color: white;
font-weight: 800;
text-align: right;
}
@media (max-width: 1023px) {
.create-preview-card {
position: relative;
top: auto;
}
.create-preview-rail {
display: none;
}
.create-preview-rail.is-open {
position: fixed;
inset: 0;
z-index: 90;
display: grid;
place-items: center;
overflow-y: auto;
background: rgba(12, 10, 11, 0.78);
padding: max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom));
backdrop-filter: blur(10px);
}
.create-preview-rail.is-open .create-preview-card {
width: min(100%, 31rem);
max-height: calc(100dvh - 2rem);
overflow-y: auto;
overscroll-behavior: contain;
}
.create-preview-close {
position: sticky;
top: 0.65rem;
z-index: 4;
display: grid;
width: 2.75rem;
height: 2.75rem;
margin: 0.65rem 0.65rem -3.4rem auto;
place-items: center;
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 999px;
background: rgba(23, 20, 21, 0.9);
color: #FFFFFF;
font-size: 1.5rem;
line-height: 1;
backdrop-filter: blur(8px);
}
.create-preview-close:focus-visible {
outline: 3px solid rgba(118, 176, 65, 0.56);
outline-offset: 2px;
}
body.create-preview-open {
overflow: hidden;
}
body.create-page.create-preview-open > main {
z-index: 100 !important;
}
.create-preview-rail.is-open .create-preview-progress {
padding-right: 3.75rem;
}
.create-preview-toggle {
position: fixed;
right: 1rem;
bottom: max(1rem, env(safe-area-inset-bottom));
left: 1rem;
z-index: 40;
display: flex;
min-height: 3.25rem;
align-items: center;
justify-content: space-between;
gap: 1rem;
border: 1px solid rgba(118, 176, 65, 0.38);
border-radius: 1rem;
background: rgba(35, 31, 32, 0.96);
color: #FFFFFF;
box-shadow: 0 16px 42px rgba(0, 0, 0, 0.42);
padding: 0 1rem;
font-weight: 900;
backdrop-filter: blur(12px);
}
.create-preview-toggle span:last-child {
color: #9BDC62;
font-size: 0.78rem;
font-variant-numeric: tabular-nums;
}
.create-toast {
bottom: 5.25rem;
}
}
@media (min-width: 640px) {
.create-form-section {
padding: 1.15rem;
}
.create-form-actions .create-draft-button { flex: 0 1 11rem; order: 0; }
}
@media (hover: hover) and (pointer: fine) {
.create-upload-zone:hover {
border-color: rgba(118, 176, 65, 0.58);
background: rgba(118, 176, 65, 0.07);
}
.create-draft-button:hover:not(:disabled) {
border-color: rgba(118, 176, 65, 0.5);
background: rgba(118, 176, 65, 0.1);
color: #FFFFFF;
}
}
@keyframes createSpinner {
to {
transform: rotate(360deg);
}
}
@keyframes createAccentFlow {
0%,
100% {
opacity: 0.84;
transform: translate3d(-54.5%, 0, 0);
}
50% {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
@media (prefers-reduced-motion: reduce) {
.headline-float,
.create-editor-panel::before {
animation: none;
}
.create-category-options,
.create-category-options [role="option"],
.create-category-affordance svg {
transition: none;
}
.create-form-section,
.create-schedule-ready,
.create-step-bar::after {
transition: none;
}
.create-form-card.is-wizard .create-form-section:not([hidden]) > * {
animation: none;
}
}
[data-single-date][hidden],
.create-poll-fields[hidden],
#event-poll-deadline-field[hidden],
#event-poll-toggle-field[hidden] {
display: none;
}
.create-poll-fields {
display: grid;
gap: 0.75rem;
}
.create-poll-dates {
display: grid;
gap: 0.5rem;
}
.create-poll-row {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 0.7fr) 2.75rem;
gap: 0.5rem;
}
.create-poll-row button {
border-radius: 0.8rem;
color: #FF9A9D;
font-size: 1.25rem;
font-weight: 800;
}
.create-poll-row button:disabled {
visibility: hidden;
}
@media (max-width: 639px) {
.create-poll-dates {
gap: 0.9rem;
}
.create-poll-row {
grid-template-columns: minmax(0, 1fr) 2.75rem;
}
.create-poll-row input[type="date"] {
grid-column: 1 / -1;
}
}
.create-activity summary {
cursor: pointer;
}
.create-activity-grid {
display: grid;
gap: 0.9rem;
margin-top: 0.75rem;
}
@media (min-width: 768px) {
.create-activity-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.create-activity-grid .is-wide {
grid-column: 1 / -1;
}
.create-activity-chips {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
border: 0;
margin: 0;
padding: 0;
}
.create-activity-chips label {
display: inline-flex;
align-items: center;
gap: 0.4rem;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 999px;
padding: 0.4rem 0.8rem;
font-size: 0.85rem;
cursor: pointer;
}
.create-activity-chips label:has(input:checked) {
border-color: #17bebb;
background: rgba(23, 190, 187, 0.16);
}
.create-activity-chips input {
accent-color: #17bebb;
}
.profile-page {
min-height: 100dvh;
background:
radial-gradient(circle at 14% 14%, rgba(23, 190, 187, 0.14), transparent 24rem),
radial-gradient(circle at 88% 18%, rgba(255, 201, 20, 0.12), transparent 24rem),
linear-gradient(135deg, #2E282A 0%, #231F20 48%, #171415 100%);
}
.profile-nav-button {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.25rem 0.75rem 0.25rem 0.25rem;
border-radius: 999px;
border: 1px solid rgba(255,255,255,0.12);
background: transparent;
color: #fff;
font-weight: 600;
font-size: 0.875rem;
transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
white-space: nowrap;
}
.profile-nav-button:hover {
border-color: #17BEBB;
background: rgba(255,255,255,0.04);
}
.profile-nav-button:active {
transform: scale(0.97);
}
.profile-nav-button .profile-nav-avatar {
width: 2rem;
height: 2rem;
border-radius: 999px;
background: #17BEBB;
color: #2E282A;
font-weight: 900;
font-size: 0.75rem;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
flex-shrink: 0;
}
.profile-nav-button .profile-nav-name {
display: none;
}
@media (min-width: 1024px) {
.profile-nav-button .profile-nav-name {
display: inline;
}
}
.profile-nav-image {
width: 100%;
height: 100%;
object-fit: cover;
}
.profile-workspace {
min-height: calc(100dvh - 4.25rem);
}
.profile-shell {
width: min(100% - 2rem, 1180px);
margin: 0 auto;
padding: clamp(2rem, 4vw, 3.5rem) 0;
}
.profile-kicker,
.profile-panel-heading p {
color: #17BEBB;
font-size: 0.74rem;
font-weight: 900;
letter-spacing: 0.22em;
text-transform: uppercase;
}
.profile-panel,
.profile-sidebar {
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(35, 31, 32, 0.78);
box-shadow: 0 28px 80px rgba(0, 0, 0, 0.28);
backdrop-filter: blur(10px);
}
.profile-avatar-large {
display: grid;
flex: 0 0 auto;
width: 5.25rem;
height: 5.25rem;
place-items: center;
overflow: hidden;
border: 2px solid rgba(23, 190, 187, 0.5);
border-radius: 1.4rem;
background: linear-gradient(135deg, #17BEBB, #FFC914);
color: #2E282A;
font-size: 1.6rem;
font-weight: 900;
}
.profile-avatar-large img {
width: 100%;
height: 100%;
object-fit: cover;
}
.profile-layout {
display: grid;
gap: 1rem;
}
.profile-sidebar {
display: flex;
gap: 0.45rem;
overflow-x: auto;
border-radius: 1.15rem;
padding: 0.45rem;
}
.profile-tab {
position: relative;
min-height: 2.75rem;
flex: 0 0 auto;
border-radius: 0.85rem;
color: rgba(255, 255, 255, 0.64);
font-size: 0.9rem;
font-weight: 800;
padding: 0 1rem;
text-align: left;
transform: translate3d(0, 0, 0);
transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.22s ease;
}
.profile-tab:hover,
.profile-tab.is-active {
background: rgba(23, 190, 187, 0.14);
color: #17BEBB;
}
.profile-tab:hover,
.profile-tab:focus-visible {
box-shadow: 0 10px 24px rgba(23, 190, 187, 0.12);
transform: translate3d(0, -0.08rem, 0) scale(1.015);
}
.profile-tab:active {
transform: translate3d(0, 0, 0) scale(0.985);
}
.profile-content {
display: grid;
gap: 1rem;
min-width: 0;
}
.profile-panel {
border-radius: 1.25rem;
padding: clamp(1rem, 2vw, 1.4rem);
transform-origin: top center;
}
.profile-panel-enter {
animation: profilePanelEnter 260ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes profilePanelEnter {
from {
opacity: 0;
transform: translate3d(0, 0.65rem, 0) scale(0.992);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0) scale(1);
}
}
.profile-panel-heading {
display: flex;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1.2rem;
}
.profile-panel-heading h2 {
margin-top: 0.3rem;
color: white;
font-size: clamp(1.35rem, 3vw, 2rem);
font-weight: 900;
}
.profile-grid {
display: grid;
gap: 1rem;
}
.profile-field {
display: grid;
gap: 0.42rem;
}
.profile-field span {
color: rgba(255, 255, 255, 0.78);
font-size: 0.85rem;
font-weight: 800;
}
.profile-field input,
.profile-field select,
.profile-field textarea {
width: 100%;
min-height: 2.9rem;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 0.95rem;
background: rgba(23, 20, 21, 0.76);
color: white;
padding: 0.72rem 0.9rem;
outline: none;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.profile-field textarea {
min-height: 7rem;
resize: vertical;
}
.profile-field input:focus,
.profile-field select:focus,
.profile-field textarea:focus {
border-color: rgba(23, 190, 187, 0.65);
box-shadow: 0 0 0 3px rgba(23, 190, 187, 0.12);
}
.profile-photo-composer {
display: grid;
gap: 1rem;
align-items: stretch;
}
.profile-bio-field {
margin-top: 1.1rem;
}
.profile-avatar-stage {
position: relative;
display: grid;
min-height: 11.5rem;
align-content: center;
justify-items: center;
gap: 0.75rem;
overflow: hidden;
border: 1px solid rgba(23, 190, 187, 0.2);
border-radius: 1.15rem;
background:
linear-gradient(135deg, rgba(23, 190, 187, 0.18), rgba(255, 201, 20, 0.08) 48%, rgba(255, 255, 255, 0.04)),
rgba(255, 255, 255, 0.035);
padding: 1.15rem;
transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}
.profile-avatar-stage::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
background-size: 2.25rem 2.25rem;
opacity: 0.26;
pointer-events: none;
}
.profile-avatar-stage > * {
position: relative;
z-index: 1;
}
.profile-avatar-edit {
width: 5.75rem;
height: 5.75rem;
border-width: 3px;
border-radius: 1.15rem;
box-shadow: 0 14px 32px rgba(0, 0, 0, 0.22);
font-size: 1.6rem;
transition: box-shadow 0.22s ease, transform 0.22s ease;
}
.profile-avatar-caption {
display: grid;
gap: 0.2rem;
justify-items: center;
text-align: center;
}
.profile-avatar-caption span {
color: #17BEBB;
font-size: 0.72rem;
font-weight: 900;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.profile-avatar-caption strong {
color: #FFFFFF;
font-size: 1rem;
font-weight: 900;
}
.profile-photo-tools {
display: grid;
gap: 0.85rem;
align-content: start;
}
.profile-photo-actions {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.7rem;
width: 100%;
}
.profile-photo-actions .profile-upload,
.profile-photo-actions .profile-upload span,
.profile-photo-actions .profile-secondary-action {
width: 100%;
}
.profile-photo-actions .profile-upload span,
.profile-photo-actions .profile-secondary-action {
min-height: 2.65rem;
font-size: 0.88rem;
}
.profile-photo-actions p {
flex-basis: 100%;
max-width: 32rem;
color: rgba(255, 255, 255, 0.52);
font-size: 0.9rem;
line-height: 1.6;
}
.profile-current-badge {
display: grid;
grid-template-columns: 5rem minmax(0, 1fr);
gap: 1rem;
align-items: center;
width: 100%;
border: 1px solid rgba(255, 201, 20, 0.22);
border-radius: 1.1rem;
background: rgba(255, 201, 20, 0.075);
padding: 1.25rem;
transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}
.profile-avatar-stage:hover,
.profile-current-badge:hover {
border-color: rgba(23, 190, 187, 0.42);
box-shadow: 0 18px 38px rgba(23, 190, 187, 0.12);
transform: translate3d(0, -0.12rem, 0);
}
.profile-avatar-stage:hover .profile-avatar-edit {
box-shadow: 0 18px 38px rgba(23, 190, 187, 0.18);
transform: scale(1.025);
}
.profile-current-badge-image {
display: grid;
width: 5rem;
height: 5rem;
place-items: center;
border-radius: 1rem;
background: rgba(255, 255, 255, 0.08);
}
.profile-current-badge-image img {
width: 3.9rem;
height: 3.9rem;
object-fit: contain;
}
.profile-current-badge-copy {
display: grid;
gap: 0.35rem;
min-width: 0;
}
.profile-current-badge span {
color: #FFC914;
font-size: 0.72rem;
font-weight: 900;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.profile-current-badge strong {
color: #FFFFFF;
font-size: 1.18rem;
font-weight: 900;
}
.profile-current-badge p {
color: rgba(255, 255, 255, 0.58);
font-size: 0.92rem;
line-height: 1.55;
}
.profile-upload input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.profile-upload span,
.profile-primary-action,
.profile-secondary-action,
.profile-danger-action {
display: inline-flex;
min-height: 2.75rem;
cursor: pointer;
align-items: center;
justify-content: center;
border-radius: 0.9rem;
font-size: 0.92rem;
font-weight: 900;
padding: 0 1rem;
transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.profile-upload span,
.profile-primary-action {
background: #FFC914;
color: #2E282A;
}
.profile-upload span:hover,
.profile-primary-action:hover {
background: #17BEBB;
transform: translateY(-1px);
}
.profile-secondary-action {
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.05);
color: rgba(255, 255, 255, 0.82);
}
.profile-secondary-action:hover {
border-color: rgba(23, 190, 187, 0.48);
color: white;
}
.profile-danger-action {
border: 1px solid rgba(228, 87, 46, 0.38);
background: rgba(228, 87, 46, 0.1);
color: #E4572E;
}
.profile-danger-action:hover {
background: #E4572E;
color: white;
}
.profile-setting-list,
.profile-account-list {
display: grid;
gap: 0.85rem;
}
.profile-switch-row,
.profile-account-list > div:not(.profile-field) {
display: flex;
min-height: 4.5rem;
align-items: center;
justify-content: space-between;
gap: 1rem;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 1rem;
background: rgba(23, 20, 21, 0.5);
padding: 1rem;
}
.profile-switch-row strong,
.profile-account-list strong {
display: block;
color: white;
font-weight: 900;
}
.profile-switch-row small,
.profile-account-list span {
display: block;
margin-top: 0.2rem;
color: rgba(255, 255, 255, 0.48);
font-size: 0.82rem;
line-height: 1.4;
}
.profile-switch-row input {
width: 1.25rem;
height: 1.25rem;
flex: 0 0 auto;
accent-color: #17BEBB;
}
.profile-actions {
display: flex;
flex-direction: column;
gap: 0.85rem;
align-items: stretch;
justify-content: space-between;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 1.15rem;
background: rgba(23, 20, 21, 0.62);
padding: 0.85rem;
}
.profile-actions > div {
display: flex;
flex-wrap: wrap;
gap: 0.7rem;
}
#profileFeedback {
min-height: 1.35rem;
color: #76B041;
font-size: 0.9rem;
font-weight: 800;
}
#profileFeedback.is-error {
color: #E4572E;
}
.badge-page {
min-height: 100vh;
background:
radial-gradient(circle at 18% 10%, rgba(23, 190, 187, 0.16), transparent 30rem),
radial-gradient(circle at 82% 14%, rgba(255, 201, 20, 0.12), transparent 28rem),
#171415;
font-family: "Manrope", sans-serif;
}
.badge-catalog-workspace {
width: min(1180px, calc(100% - 2rem));
margin: 0 auto;
padding: 4rem 0;
}
.badge-catalog-hero {
display: flex;
gap: 1.5rem;
align-items: flex-end;
justify-content: space-between;
margin-bottom: 2rem;
}
.badge-catalog-kicker,
.badge-catalog-heading p,
.badge-catalog-card span {
color: #17BEBB;
font-size: 0.76rem;
font-weight: 900;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.badge-catalog-hero h1 {
margin-top: 0.5rem;
color: #FFFFFF;
font-size: clamp(2.6rem, 6vw, 5rem);
font-weight: 900;
letter-spacing: 0;
line-height: 0.95;
}
.badge-catalog-hero p {
max-width: 42rem;
margin-top: 1rem;
color: rgba(255, 255, 255, 0.68);
font-size: 1rem;
line-height: 1.7;
}
.badge-catalog-back {
display: inline-flex;
min-height: 2.8rem;
align-items: center;
justify-content: center;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 0.9rem;
background: rgba(255, 255, 255, 0.06);
padding: 0.75rem 1rem;
color: #FFFFFF;
font-size: 0.9rem;
font-weight: 900;
transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
}
.badge-catalog-back:hover,
.badge-catalog-back:focus-visible {
border-color: rgba(23, 190, 187, 0.45);
background: rgba(23, 190, 187, 0.12);
color: #17BEBB;
outline: none;
}
.badge-catalog-panel {
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 1.25rem;
background: rgba(35, 31, 32, 0.72);
padding: clamp(1rem, 3vw, 1.5rem);
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.22);
}
.badge-catalog-heading {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1rem;
}
.badge-catalog-heading h2 {
margin-top: 0.25rem;
color: #FFFFFF;
font-size: 1.5rem;
font-weight: 900;
}
.badge-catalog-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
gap: 1rem;
}
.badge-catalog-card {
display: grid;
grid-template-columns: 4.5rem minmax(0, 1fr);
min-height: 10rem;
gap: 1rem;
align-items: center;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 1rem;
background: rgba(255, 255, 255, 0.045);
padding: 1rem;
}
.badge-catalog-card-enter {
animation: badgeCatalogCardIn 0.58s cubic-bezier(0.22, 1, 0.36, 1) both;
animation-delay: var(--badge-enter-delay, 0ms);
will-change: opacity, transform;
}
@keyframes badgeCatalogCardIn {
from {
opacity: 0;
transform: translateY(1rem) scale(0.985);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.badge-catalog-image {
display: grid;
width: 4.5rem;
height: 4.5rem;
place-items: center;
border-radius: 1rem;
background: rgba(255, 255, 255, 0.08);
}
.badge-catalog-image img {
width: 3.6rem;
height: 3.6rem;
object-fit: contain;
}
.badge-catalog-copy {
display: grid;
gap: 0.35rem;
min-width: 0;
justify-items: start;
text-align: left;
}
.badge-catalog-card h3 {
color: #FFFFFF;
font-size: 1.08rem;
font-weight: 900;
line-height: 1.25;
}
.badge-catalog-card p {
color: rgba(255, 255, 255, 0.62);
font-size: 0.9rem;
line-height: 1.55;
}
.badge-catalog-card small {
color: rgba(255, 255, 255, 0.42);
font-size: 0.76rem;
font-weight: 800;
overflow-wrap: anywhere;
}
.badge-catalog-empty {
margin: 0;
color: rgba(255, 255, 255, 0.62);
font-size: 0.95rem;
line-height: 1.6;
}
@media (min-width: 768px) {
.profile-layout {
grid-template-columns: 15rem minmax(0, 1fr);
align-items: start;
}
.profile-sidebar {
position: sticky;
top: 5.5rem;
display: grid;
overflow: visible;
}
.profile-tab:hover,
.profile-tab:focus-visible {
transform: translate3d(0.18rem, 0, 0) scale(1.015);
}
.profile-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.profile-photo-composer {
grid-template-columns: minmax(10rem, 0.5fr) minmax(18rem, 1fr);
}
.profile-actions {
flex-direction: row;
align-items: center;
}
}
@media (max-width: 767px) {
.profile-photo-actions {
grid-template-columns: 1fr;
}
.profile-avatar-stage {
min-height: 10.5rem;
}
.profile-avatar-edit {
width: 5.25rem;
height: 5.25rem;
border-radius: 1.05rem;
font-size: 1.45rem;
}
.badge-catalog-workspace {
padding: 2.5rem 0;
}
.badge-catalog-hero {
display: grid;
align-items: start;
}
.badge-catalog-back {
justify-self: start;
}
.badge-catalog-card {
grid-template-columns: 4rem minmax(0, 1fr);
}
.badge-catalog-image {
width: 4rem;
height: 4rem;
}
.badge-catalog-image img {
width: 3.2rem;
height: 3.2rem;
}
}
@media (prefers-reduced-motion: reduce) {
.profile-panel-enter {
animation: none;
}
.badge-catalog-card-enter {
animation: none;
opacity: 1;
transform: none;
}
.profile-tab {
transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.profile-tab:hover,
.profile-tab:focus-visible,
.profile-tab:active,
.profile-avatar-stage:hover,
.profile-current-badge:hover,
.profile-avatar-stage:hover .profile-avatar-edit {
transform: none;
}
}
html[data-theme="dark"] body.landing-page header {
position: fixed !important;
top: 0;
left: 0;
right: 0;
background: transparent !important;
border-color: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
transition: background 0.24s ease, border-color 0.24s ease, box-shadow 0.24s ease, backdrop-filter 0.24s ease;
}
html[data-theme="dark"] body.landing-page header.nav-over-surface {
background: rgba(35, 31, 32, 0.94) !important;
border-color: rgba(255, 255, 255, 0.1) !important;
backdrop-filter: blur(14px) !important;
-webkit-backdrop-filter: blur(14px) !important;
box-shadow: 0 12px 38px rgba(0, 0, 0, 0.28);
}
html[data-theme="dark"] body.landing-page #mobile-menu {
background: rgba(35, 31, 32, 0.96) !important;
border-color: rgba(255, 255, 255, 0.1) !important;
}
body.auth-page {
min-height: 100dvh;
}
body.auth-page video {
filter: saturate(0.88) brightness(0.72) contrast(1.05);
transform: scale(1.02);
}
body.auth-page video + .absolute {
background: linear-gradient(115deg, rgba(23, 20, 21, 0.72), rgba(23, 20, 21, 0.5) 46%, rgba(23, 20, 21, 0.82)) !important;
}
body.auth-page .auth-card {
border: 1px solid rgba(255, 255, 255, 0.14);
background: rgba(35, 31, 32, 0.82) !important;
box-shadow: 0 28px 90px rgba(0, 0, 0, 0.34);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
}
body.auth-page > .relative {
padding-top: 5.25rem;
}
body.register-page > .relative {
padding-top: 4.25rem;
padding-bottom: 1.25rem;
}
body.register-page .auth-card {
padding: 1rem;
}
body.register-page .auth-card h1 {
font-size: 1.65rem;
line-height: 1.12;
}
body.register-page .auth-card h1 + p {
margin-top: 0.35rem;
}
body.register-page .auth-card form > .space-y-5 > :not([hidden]) ~ :not([hidden]) {
margin-top: 0.85rem;
}
body.register-page .auth-card label {
margin-bottom: 0.2rem;
}
body.register-page .auth-card input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
body.register-page .auth-card select {
min-height: 2.35rem;
padding-top: 0.4rem;
padding-bottom: 0.4rem;
}
body.register-page .auth-card .interest-tag {
padding: 0.38rem 0.78rem;
font-size: 0.82rem;
}
body.register-page #interests-container {
gap: 0.38rem;
}
html[data-theme="dark"] body.register-page .auth-card .interest-tag.is-selected {
border-color: rgba(23, 190, 187, 0.9);
background: rgba(23, 190, 187, 0.28) !important;
color: #ffffff;
box-shadow: 0 0 0 1px rgba(23, 190, 187, 0.22), 0 8px 18px rgba(23, 190, 187, 0.12);
}
@media (min-width: 768px) {
body.register-page .auth-card {
padding: 1.35rem;
}
}
body.auth-page header {
position: fixed !important;
top: 0;
left: 0;
right: 0;
background: transparent !important;
border-color: transparent !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
html[data-theme="dark"] body.auth-page header,
html[data-theme="dark"] body.auth-page header.nav-over-surface {
background: transparent !important;
border-color: transparent !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
body.auth-page header > nav {
background: transparent !important;
}
body.auth-page .nav-center-link,
body.auth-page .nav-register-link,
body.auth-page header .text-white\/85,
body.auth-page #menu-btn {
color: rgba(255, 255, 255, 0.88);
text-shadow: 0 1px 18px rgba(0, 0, 0, 0.42);
}
body.auth-page .nav-center-link:hover,
body.auth-page .nav-center-link:focus-visible,
body.auth-page .nav-register-link:hover,
body.auth-page .nav-register-link:focus-visible,
body.auth-page header .text-white\/85:hover,
body.auth-page header .text-white\/85:focus-visible {
color: #17BEBB;
}
body.auth-page #mobile-menu {
background: rgba(35, 31, 32, 0.94) !important;
border-color: rgba(255, 255, 255, 0.1) !important;
}
body.visual-hero-page header {
position: fixed !important;
top: 0;
left: 0;
right: 0;
background: transparent !important;
border-color: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
transition: background 0.24s ease, border-color 0.24s ease, box-shadow 0.24s ease, backdrop-filter 0.24s ease;
}
body.visual-hero-page .nav-center-link,
body.visual-hero-page header .text-white,
body.visual-hero-page header .text-white\/85,
body.visual-hero-page header input,
body.visual-hero-page header select {
text-shadow: 0 1px 18px rgba(0, 0, 0, 0.42);
}
html[data-theme="dark"] body.visual-hero-page header.nav-over-surface {
background: rgba(35, 31, 32, 0.94) !important;
border-color: rgba(255, 255, 255, 0.1) !important;
backdrop-filter: blur(14px) !important;
-webkit-backdrop-filter: blur(14px) !important;
box-shadow: 0 12px 38px rgba(0, 0, 0, 0.28);
}
.saved-events-empty {
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(46, 40, 42, 0.72);
box-shadow: 0 18px 52px rgba(0, 0, 0, 0.18);
backdrop-filter: blur(8px);
}
.saved-events-empty {
display: grid;
gap: 1.25rem;
min-height: 12rem;
border-style: dashed;
}
.saved-event-chip {
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.06);
}
body.home-page header {
transition: background 0.26s ease, border-color 0.26s ease, box-shadow 0.26s ease, backdrop-filter 0.26s ease;
}
.home-hero-section h1,
.home-hero-copy,
.home-hero-search,
.home-hero-pills {
animation: homeHeroReveal 0.72s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.home-hero-copy {
animation-delay: 0.08s;
}
.home-hero-search {
animation-delay: 0.16s;
}
.home-hero-pills {
animation-delay: 0.24s;
}
.home-section {
overflow: hidden;
}
.home-section-heading {
margin-bottom: clamp(1.5rem, 3vw, 2.6rem);
}
.home-section-heading-center {
text-align: center;
}
.home-section-heading p {
margin-bottom: 0.42rem;
color: #17BEBB;
font-size: 0.74rem;
font-weight: 900;
letter-spacing: 0.2em;
text-transform: uppercase;
}
.home-section-heading h2 {
color: #FFFFFF;
font-size: clamp(2rem, 5vw, 3.25rem);
font-weight: 900;
line-height: 1;
}
.home-action-card {
border-width: 1px !important;
border-radius: 1.15rem !important;
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.015)),
rgba(35, 31, 32, 0.78) !important;
}
.home-action-card::before {
content: '';
position: absolute;
inset: 0;
width: auto;
height: auto;
border-radius: inherit;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 36%),
radial-gradient(circle at 16% 0%, rgba(23, 190, 187, 0.2), transparent 34rem);
opacity: 0.86;
pointer-events: none;
}
.home-action-card-create::before {
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 36%),
radial-gradient(circle at 16% 0%, rgba(118, 176, 65, 0.24), transparent 34rem);
}
.home-action-card-explore::before {
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 36%),
radial-gradient(circle at 16% 0%, rgba(228, 87, 46, 0.22), transparent 34rem);
}
.home-action-card:hover,
.home-action-card:focus-within {
transform: translateY(-0.45rem) scale(1.01);
}
.home-action-card a,
.home-action-card button,
.home-hero-search-button,
.saved-events-empty a,
.home-footer button,
.home-footer a {
touch-action: manipulation;
}
.home-action-card a:active,
.home-action-card button:active,
.home-hero-search-button:active,
.saved-events-empty a:active,
.home-footer button:active,
.home-footer a:active {
transform: scale(0.98);
}
.home-walker-scene {
opacity: 0.9;
padding-bottom: 1.35rem;
}
.home-walker-floor {
width: min(10rem, 60vw);
height: 1px;
background: linear-gradient(90deg, transparent, rgba(23, 190, 187, 0.66), rgba(255, 201, 20, 0.5), transparent);
box-shadow: 0 12px 30px rgba(23, 190, 187, 0.12);
}
.home-walker-floor::after {
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
opacity: 0.5;
animation: homeMinimalPathTrace 4.8s ease-in-out infinite;
}
.home-walker {
width: 2.85rem;
height: 4.55rem;
animation: homeMinimalWalkerFloat 4.8s ease-in-out infinite;
}
.home-walker-head {
top: 0.16rem;
left: 1.36rem;
width: 0.58rem;
height: 0.58rem;
border: 1.5px solid #FFC914;
background: transparent;
box-shadow: 0 0 16px rgba(255, 201, 20, 0.24);
transform: translate3d(-0.08rem, 0.02rem, 0);
}
.home-walker-body {
top: 0.96rem;
left: 1.48rem;
width: 0.12rem;
height: 1.86rem;
background: rgba(255, 201, 20, 0.92);
box-shadow: none;
}
.home-walker-arm,
.home-walker-leg {
left: 1.44rem;
width: 0.11rem;
border-radius: 999px;
background: rgba(255, 201, 20, 0.88);
}
.home-walker-arm {
top: 1.18rem;
height: 1.06rem;
}
.home-walker-arm::after {
top: 0.78rem;
width: 0.11rem;
height: 0.7rem;
opacity: 0.82;
}
.home-walker-arm-front {
animation: homeMinimalFrontArm 4.8s ease-in-out infinite;
}
.home-walker-arm-back {
background: rgba(23, 190, 187, 0.72);
animation: homeMinimalBackArm 4.8s ease-in-out infinite;
}
.home-walker-leg {
top: 2.72rem;
height: 1.58rem;
}
.home-walker-leg-front {
animation: homeMinimalFrontLeg 4.8s ease-in-out infinite;
}
.home-walker-leg-back {
background: rgba(23, 190, 187, 0.68);
animation: homeMinimalBackLeg 4.8s ease-in-out infinite;
}
.home-page .event-card {
isolation: isolate;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 1.15rem !important;
box-shadow: 0 22px 64px rgba(0, 0, 0, 0.28);
transform: translateY(0) scale(1);
transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
animation: homeCardReveal 0.72s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.home-page .event-card:nth-child(2) { animation-delay: 0.06s; }
.home-page .event-card:nth-child(3) { animation-delay: 0.12s; }
.home-page .event-card:nth-child(4) { animation-delay: 0.18s; }
.home-page .event-card:nth-child(5) { animation-delay: 0.24s; }
.home-page .event-card:nth-child(6) { animation-delay: 0.3s; }
.home-page .event-card::before {
content: '';
position: absolute;
inset: 0;
z-index: 2;
background:
linear-gradient(180deg, rgba(0, 0, 0, 0.18), transparent 34%),
linear-gradient(0deg, rgba(0, 0, 0, 0.86), rgba(0, 0, 0, 0.38) 44%, transparent 72%);
pointer-events: none;
transition: opacity 0.3s ease;
}
.home-page .event-card::after {
content: attr(data-category);
position: absolute;
top: 1.1rem;
left: 1.1rem;
z-index: 12;
max-width: calc(100% - 2.2rem);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 999px;
background: rgba(23, 20, 21, 0.34);
padding: 0.42rem 0.7rem;
color: rgba(255, 255, 255, 0.9);
font-size: 0.68rem;
font-weight: 900;
letter-spacing: 0.12em;
text-transform: uppercase;
backdrop-filter: blur(12px);
}
.home-page .event-card:hover,
.home-page .event-card:focus-within {
border-color: rgba(23, 190, 187, 0.34);
box-shadow: 0 30px 84px rgba(0, 0, 0, 0.38);
transform: translateY(-0.45rem) scale(1.012);
}
.home-page .event-card:hover::before,
.home-page .event-card:focus-within::before {
opacity: 0.86;
}
.home-page .event-card .event-card-bg,
.home-page .event-card > img {
transform: scale(1.01);
transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), filter 0.32s ease;
}
.home-page .event-card:hover .event-card-bg,
.home-page .event-card:focus-within .event-card-bg,
.home-page .event-card:hover > img,
.home-page .event-card:focus-within > img {
filter: saturate(1.08) contrast(1.03);
transform: scale(1.075);
}
.home-page .event-card h3 {
max-width: 18rem;
line-height: 1.05;
}
.home-page .event-card p {
max-width: 20rem;
line-height: 1.45;
}
.saved-events-empty {
border-radius: 1.15rem !important;
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.016)),
rgba(35, 31, 32, 0.72);
}
.saved-events-empty {
position: relative;
overflow: hidden;
}
.saved-events-empty::before {
content: '';
position: absolute;
inset: 0 auto 0 0;
width: 0.2rem;
background: linear-gradient(180deg, #17BEBB, #FFC914, #E4572E);
opacity: 0.88;
}
.saved-events-empty a {
min-height: 2.45rem;
display: inline-flex;
align-items: center;
justify-content: center;
}
.home-footer {
background:
linear-gradient(180deg, rgba(23, 20, 21, 0.08), rgba(23, 20, 21, 0.28)),
rgba(23, 20, 21, 0.28) !important;
}
.home-footer input {
min-height: 3rem;
background: rgba(23, 20, 21, 0.58) !important;
border-color: rgba(255, 255, 255, 0.12) !important;
transition: border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}
.home-footer input:focus {
border-color: rgba(255, 201, 20, 0.68) !important;
background: rgba(23, 20, 21, 0.74) !important;
box-shadow: 0 0 0 4px rgba(255, 201, 20, 0.1);
}
.home-footer button {
min-height: 3rem;
transition: transform 0.22s ease, background 0.22s ease, color 0.22s ease, box-shadow 0.22s ease;
}
.home-footer button:hover,
.home-footer button:focus-visible {
box-shadow: 0 16px 34px rgba(23, 190, 187, 0.18);
transform: translateY(-0.1rem);
}
@keyframes homeHeroReveal {
from {
opacity: 0;
transform: translate3d(0, 1rem, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
@keyframes homeCardReveal {
from {
opacity: 0;
transform: translate3d(0, 1.1rem, 0) scale(0.985);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0) scale(1);
}
}
@keyframes homeMinimalPathTrace {
0%,
100% {
transform: translate3d(-62%, 0, 0);
opacity: 0;
}
26%,
72% {
opacity: 0.58;
}
84% {
transform: translate3d(62%, 0, 0);
opacity: 0;
}
}
@keyframes homeMinimalWalkerFloat {
0%,
100% {
transform: translate3d(-0.12rem, 0.04rem, 0);
}
50% {
transform: translate3d(0.12rem, -0.08rem, 0);
}
}
@keyframes homeMinimalFrontArm {
0%,
100% {
transform: rotate(-18deg);
}
50% {
transform: rotate(16deg);
}
}
@keyframes homeMinimalBackArm {
0%,
100% {
transform: rotate(18deg);
}
50% {
transform: rotate(-16deg);
}
}
@keyframes homeMinimalFrontLeg {
0%,
100% {
transform: rotate(18deg);
}
50% {
transform: rotate(-14deg);
}
}
@keyframes homeMinimalBackLeg {
0%,
100% {
transform: rotate(-14deg);
}
50% {
transform: rotate(18deg);
}
}
@media (max-width: 767px) {
.home-section-heading,
.home-section-heading-center {
text-align: left;
}
.home-page .event-card {
height: 390px;
}
.home-walker-scene {
min-height: 5.8rem;
}
}
@media (prefers-reduced-motion: reduce) {
.home-hero-section h1,
.home-hero-copy,
.home-hero-search,
.home-hero-pills,
.home-page .event-card,
.home-walker,
.home-walker-floor::after,
.home-walker-arm-front,
.home-walker-arm-back,
.home-walker-leg-front,
.home-walker-leg-back {
animation: none !important;
}
.home-page .event-card,
.home-page .event-card:hover,
.home-page .event-card:focus-within,
.home-action-card,
.home-action-card:hover,
.home-action-card:focus-within {
transform: none !important;
}
}
.home-walker-scene {
opacity: 1;
min-height: 8rem;
padding-bottom: 0.98rem;
}
.home-walker-floor {
width: min(12rem, 70vw);
height: 0.22rem;
background: linear-gradient(90deg, transparent, rgba(255, 201, 20, 0.58), rgba(23, 190, 187, 0.72), transparent);
box-shadow: 0 12px 28px rgba(23, 190, 187, 0.18);
}
.home-walker-floor::after {
height: auto;
background: transparent;
opacity: 1;
animation: homeWalkerFloor 7.2s linear infinite;
}
.home-walker {
width: 4.2rem;
height: 5.8rem;
animation: homeWalkerBob 7.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.home-walker-head {
top: -0.1rem;
left: 1.92rem;
width: 1.12rem;
height: 1.12rem;
border: 0;
background: #FFC914;
box-shadow: 0 0 18px rgba(255, 201, 20, 0.38);
transform: translate3d(-0.18rem, 0.06rem, 0) rotate(-24deg);
transform-origin: 30% 80%;
}
.home-walker-body {
top: 1.26rem;
left: 2.01rem;
width: 0.34rem;
height: 2.42rem;
background: #FFC914;
box-shadow: 0 0 14px rgba(255, 201, 20, 0.18);
transform: rotate(0deg);
transform-origin: 50% 10%;
}
.home-walker-arm,
.home-walker-leg {
width: 0.32rem;
border-radius: 999px;
background: #FFC914;
transform-origin: 50% 0.15rem;
}
.home-walker-arm {
top: 1.48rem;
left: 2rem;
height: 0.96rem;
}
.home-walker-arm::after {
top: 0.82rem;
left: 0;
width: 0.32rem;
height: 1rem;
opacity: 1;
}
.home-walker-arm-front {
animation: homeWalkerFrontArmCycle 7.2s cubic-bezier(0.42, 0, 0.58, 1) infinite;
}
.home-walker-arm-back {
background: rgba(255, 201, 20, 0.65);
animation: homeWalkerBackArmCycle 7.2s cubic-bezier(0.42, 0, 0.58, 1) infinite;
}
.home-walker-leg {
top: 3.48rem;
left: 2.01rem;
width: 0.34rem;
height: 2.55rem;
transform-origin: 50% 0.08rem;
}
.home-walker-leg-front {
animation: homeWalkerFrontLegCycle 7.2s cubic-bezier(0.42, 0, 0.58, 1) infinite;
}
.home-walker-leg-back {
background: rgba(255, 201, 20, 0.7);
animation: homeWalkerBackLegCycle 7.2s cubic-bezier(0.42, 0, 0.58, 1) infinite;
}
@media (max-width: 767px) {
.home-walker-scene {
min-height: 8rem;
}
}
@media (prefers-reduced-motion: reduce) {
.home-walker,
.home-walker-floor::after,
.home-walker-arm-front,
.home-walker-arm-back,
.home-walker-leg-front,
.home-walker-leg-back {
animation: none !important;
}
}
body.home-page {
--ha-home-control-radius: 0.92rem;
--ha-home-card-radius: 1.15rem;
--ha-home-focus: 0 0 0 4px rgba(23, 190, 187, 0.14);
}
body.home-page.visual-hero-page header {
background:
linear-gradient(135deg, rgba(23, 190, 187, 0.1), rgba(255, 201, 20, 0.045) 52%, rgba(228, 87, 46, 0.06)),
rgba(23, 20, 21, 0.58) !important;
border-color: rgba(255, 255, 255, 0.12) !important;
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.16);
backdrop-filter: blur(18px) saturate(1.12) !important;
-webkit-backdrop-filter: blur(18px) saturate(1.12) !important;
}
body.home-page.visual-hero-page header.nav-over-surface {
background:
linear-gradient(135deg, rgba(23, 190, 187, 0.08), rgba(255, 201, 20, 0.035) 52%, rgba(228, 87, 46, 0.05)),
rgba(23, 20, 21, 0.82) !important;
box-shadow: 0 18px 54px rgba(0, 0, 0, 0.22);
}
body.home-page .nav-center-link {
border-radius: 999px;
padding: 0.48rem 0;
}
body.home-page .nav-center-link::after {
bottom: -0.18rem;
height: 0.18rem;
background: linear-gradient(90deg, #17BEBB, #FFC914);
box-shadow: 0 0 18px rgba(23, 190, 187, 0.34);
}
body.home-page .nav-center-link-active {
color: #FFFFFF;
}
body.home-page #profileBtn {
border-radius: var(--ha-home-control-radius) !important;
border-color: rgba(255, 255, 255, 0.14) !important;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.018)),
rgba(23, 20, 21, 0.56) !important;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.045), 0 12px 28px rgba(0, 0, 0, 0.18);
transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
}
body.home-page #profileBtn:hover,
body.home-page #profileBtn:focus-visible {
border-color: rgba(23, 190, 187, 0.48) !important;
box-shadow: var(--ha-home-focus), 0 16px 34px rgba(0, 0, 0, 0.22);
transform: translateY(-0.1rem);
}
body.home-page #profileBtn > div:first-child {
background: linear-gradient(135deg, #17BEBB, #FFC914) !important;
box-shadow: 0 10px 22px rgba(23, 190, 187, 0.2);
}
body.home-page #profileMenu {
border-radius: var(--ha-home-card-radius);
border-color: rgba(255, 255, 255, 0.13);
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.018)),
rgba(23, 20, 21, 0.92);
box-shadow: 0 26px 68px rgba(0, 0, 0, 0.32);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
}
body.home-page #profileMenu > a,
body.home-page #profileMenu > button {
border-radius: 0.78rem;
}
body.home-page #profileMenu > a:hover,
body.home-page #profileMenu > a:focus-visible,
body.home-page #profileMenu > button:hover,
body.home-page #profileMenu > button:focus-visible {
background: rgba(23, 190, 187, 0.1);
}
.home-page .home-action-card > a:not(:has(button)),
.home-page .home-action-card > a > button,
.home-page .saved-events-empty a,
.home-page .home-footer button {
min-height: 2.8rem;
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 0.5rem;
border-radius: var(--ha-home-control-radius) !important;
font-weight: 900;
line-height: 1;
position: relative;
overflow: hidden;
transition: transform 0.22s ease, background 0.22s ease, color 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}
.home-page .home-action-card > a:not(:has(button))::after,
.home-page .home-action-card > a > button::after,
.home-page .saved-events-empty a:not(.home-nearby-search)::after,
.home-page .home-footer button::after {
content: '->';
font-size: 0.84em;
font-weight: 900;
transform: translateX(0);
transition: transform 0.22s ease;
}
.home-page .home-action-card > a:not(:has(button)):hover::after,
.home-page .home-action-card > a > button:hover::after,
.home-page .saved-events-empty a:not(.home-nearby-search):hover::after,
.home-page .home-footer button:hover::after {
transform: translateX(0.18rem);
}
.home-page .home-action-card > a:not(:has(button)):focus-visible,
.home-page .home-action-card > a > button:focus-visible,
.home-page .saved-events-empty a:focus-visible,
.home-page .home-footer button:focus-visible {
outline: none;
box-shadow: var(--ha-home-focus), 0 18px 42px rgba(0, 0, 0, 0.24);
}
.home-footer {
border-color: rgba(255, 255, 255, 0.09) !important;
}
.home-footer h4 {
color: rgba(255, 255, 255, 0.56) !important;
}
.home-footer ul a,
.home-footer p a[href^="mailto:"] {
position: relative;
display: inline-flex;
width: fit-content;
}
.home-footer ul a::after,
.home-footer p a[href^="mailto:"]::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: -0.18rem;
height: 1px;
border-radius: 999px;
background: linear-gradient(90deg, #17BEBB, #FFC914);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.22s ease;
}
.home-footer ul a:hover::after,
.home-footer ul a:focus-visible::after,
.home-footer p a[href^="mailto:"]:hover::after,
.home-footer p a[href^="mailto:"]:focus-visible::after {
transform: scaleX(1);
}
.home-social-link {
width: 2.8rem;
height: 2.8rem;
display: inline-grid !important;
place-items: center;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 0.92rem !important;
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
rgba(23, 20, 21, 0.36) !important;
box-shadow: none !important;
transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease !important;
}
.home-social-link:hover,
.home-social-link:focus-visible {
border-color: rgba(23, 190, 187, 0.46);
background:
linear-gradient(145deg, rgba(23, 190, 187, 0.18), rgba(255, 201, 20, 0.08)),
rgba(23, 20, 21, 0.48) !important;
box-shadow: 0 16px 36px rgba(23, 190, 187, 0.16) !important;
transform: translateY(-0.14rem) scale(1.03);
}
body:is(.landing-page, .home-page) footer a[aria-label="Instagram"]:is(:hover, :focus-visible) {
border-color: rgba(225, 48, 108, 0.65);
background:
linear-gradient(145deg, rgba(225, 48, 108, 0.32), rgba(245, 96, 64, 0.18)),
rgba(23, 20, 21, 0.48) !important;
box-shadow: 0 0 24px rgba(225, 48, 108, 0.38) !important;
}
body:is(.explore-page, .create-page, .followed-page, .my-events-page, .newsletter-private, .profile-page) header {
background:
linear-gradient(135deg, rgba(23, 190, 187, 0.1), rgba(255, 201, 20, 0.04) 52%, rgba(228, 87, 46, 0.055)),
rgba(23, 20, 21, 0.82) !important;
border-color: rgba(255, 255, 255, 0.12) !important;
box-shadow: 0 16px 44px rgba(0, 0, 0, 0.2);
backdrop-filter: blur(18px) saturate(1.12) !important;
-webkit-backdrop-filter: blur(18px) saturate(1.12) !important;
transition: background 0.24s ease, border-color 0.24s ease, box-shadow 0.24s ease, backdrop-filter 0.24s ease;
}
body:is(.explore-page, .create-page, .followed-page, .my-events-page, .newsletter-private, .profile-page) header nav {
position: relative;
}
body:is(.explore-page, .create-page, .followed-page, .my-events-page, .newsletter-private, .profile-page) header nav::after {
content: '';
position: absolute;
left: clamp(1.25rem, 4vw, 2rem);
right: clamp(1.25rem, 4vw, 2rem);
bottom: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(23, 190, 187, 0.34), rgba(255, 201, 20, 0.22), transparent);
pointer-events: none;
}
body:is(.explore-page, .create-page, .followed-page, .my-events-page, .newsletter-private, .profile-page) .nav-center-link {
border-radius: 999px;
color: rgba(255, 255, 255, 0.76);
padding: 0.48rem 0;
text-shadow: none;
}
body:is(.explore-page, .create-page, .followed-page, .my-events-page, .newsletter-private, .profile-page) .nav-center-link:hover,
body:is(.explore-page, .create-page, .followed-page, .my-events-page, .newsletter-private, .profile-page) .nav-center-link:focus-visible,
body:is(.explore-page, .create-page, .followed-page, .my-events-page, .newsletter-private, .profile-page) .nav-center-link-active {
color: #FFFFFF;
}
body:is(.explore-page, .create-page, .followed-page, .my-events-page, .newsletter-private, .profile-page) .nav-center-link::after {
bottom: -0.18rem;
height: 0.18rem;
background: linear-gradient(90deg, #17BEBB, #FFC914);
box-shadow: 0 0 18px rgba(23, 190, 187, 0.3);
}
body:is(.explore-page, .create-page, .followed-page, .my-events-page, .newsletter-private, .profile-page) .profile-nav-button,
body:is(.explore-page, .create-page, .followed-page, .my-events-page, .newsletter-private, .profile-page) #profileBtn {
border: 1px solid rgba(255, 255, 255, 0.14) !important;
background:
linear-gradient(135deg, rgba(23, 190, 187, 0.28), rgba(255, 201, 20, 0.9)),
#17BEBB !important;
color: #231F20 !important;
box-shadow: 0 12px 26px rgba(23, 190, 187, 0.18);
transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
}
body:is(.explore-page, .create-page, .followed-page, .my-events-page, .newsletter-private, .profile-page) .profile-nav-button:hover,
body:is(.explore-page, .create-page, .followed-page, .my-events-page, .newsletter-private, .profile-page) .profile-nav-button:focus-visible,
body:is(.explore-page, .create-page, .followed-page, .my-events-page, .newsletter-private, .profile-page) #profileBtn:hover,
body:is(.explore-page, .create-page, .followed-page, .my-events-page, .newsletter-private, .profile-page) #profileBtn:focus-visible {
border-color: rgba(255, 255, 255, 0.28) !important;
box-shadow: 0 0 0 4px rgba(23, 190, 187, 0.13), 0 16px 34px rgba(0, 0, 0, 0.22);
transform: translateY(-0.1rem);
}
body:is(.explore-page, .create-page, .followed-page, .my-events-page, .newsletter-private, .profile-page) #profileMenu {
border-color: rgba(255, 255, 255, 0.13) !important;
border-radius: 1.15rem !important;
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.018)),
rgba(23, 20, 21, 0.92) !important;
box-shadow: 0 26px 68px rgba(0, 0, 0, 0.32) !important;
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
}
body:is(.explore-page, .create-page, .followed-page, .my-events-page, .newsletter-private, .profile-page) #profileMenu > a,
body:is(.explore-page, .create-page, .followed-page, .my-events-page, .newsletter-private, .profile-page) #profileMenu > button {
border-radius: 0.78rem;
}
body:is(.explore-page, .create-page, .followed-page, .my-events-page, .newsletter-private, .profile-page) #profileMenu > a:hover,
body:is(.explore-page, .create-page, .followed-page, .my-events-page, .newsletter-private, .profile-page) #profileMenu > a:focus-visible,
body:is(.explore-page, .create-page, .followed-page, .my-events-page, .newsletter-private, .profile-page) #profileMenu > button:hover,
body:is(.explore-page, .create-page, .followed-page, .my-events-page, .newsletter-private, .profile-page) #profileMenu > button:focus-visible {
background: rgba(23, 190, 187, 0.1) !important;
color: #17BEBB !important;
}
body:is(.explore-page, .create-page, .followed-page, .my-events-page, .newsletter-private, .profile-page) .nav-register-link {
border-radius: 0.9rem;
transition: transform 0.22s ease, color 0.22s ease, background 0.22s ease;
}
body:is(.explore-page, .create-page, .followed-page, .my-events-page, .newsletter-private, .profile-page) .nav-register-link:hover,
body:is(.explore-page, .create-page, .followed-page, .my-events-page, .newsletter-private, .profile-page) .nav-register-link:focus-visible {
background: rgba(23, 190, 187, 0.1);
}
body:is(.explore-page, .create-page, .followed-page, .my-events-page, .newsletter-private, .profile-page) header a:is([href="login.html"], [href="HTML/login.html"]) {
border-radius: 0.9rem !important;
box-shadow: 0 12px 26px rgba(255, 201, 20, 0.16);
transition: transform 0.22s ease, background 0.22s ease, color 0.22s ease, box-shadow 0.22s ease;
}
body:is(.explore-page, .create-page, .followed-page, .my-events-page, .newsletter-private, .profile-page) header a:is([href="login.html"], [href="HTML/login.html"]):hover,
body:is(.explore-page, .create-page, .followed-page, .my-events-page, .newsletter-private, .profile-page) header a:is([href="login.html"], [href="HTML/login.html"]):focus-visible {
box-shadow: 0 16px 34px rgba(23, 190, 187, 0.18);
transform: translateY(-0.1rem);
}
body:is(.explore-page, .create-page, .followed-page, .my-events-page, .newsletter-private, .profile-page) #menu-btn,
body:is(.explore-page, .create-page, .followed-page, .my-events-page, .newsletter-private, .profile-page) header button[data-logout] {
border-radius: 0.9rem !important;
}
body:is(.explore-page, .create-page, .followed-page, .my-events-page, .newsletter-private, .profile-page) #mobile-menu {
margin-top: 0.35rem;
border-color: rgba(255, 255, 255, 0.12) !important;
border-radius: 0 0 1.15rem 1.15rem;
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.014)),
rgba(23, 20, 21, 0.9);
box-shadow: 0 20px 42px rgba(0, 0, 0, 0.22);
}
body:is(.landing-page, .auth-page, .newsletter-public, .home-page, .explore-page, .create-page, .followed-page, .my-events-page, .newsletter-private, .profile-page) header nav {
min-height: 4.25rem;
}
body:is(.landing-page, .auth-page, .newsletter-public, .home-page, .explore-page, .create-page, .followed-page, .my-events-page, .newsletter-private, .profile-page) .nav-center-link {
min-height: 2.65rem;
align-items: center;
padding: 0.52rem 0;
color: rgba(255, 255, 255, 0.76);
font-size: 0.95rem;
font-weight: 800;
letter-spacing: 0;
line-height: 1;
text-shadow: none;
transform: translateY(0) scale(1);
transition:
color 0.22s ease,
text-shadow 0.22s ease,
transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
}
body:is(.landing-page, .auth-page, .newsletter-public, .home-page, .explore-page, .create-page, .followed-page, .my-events-page, .newsletter-private, .profile-page) .nav-center-link:hover,
body:is(.landing-page, .auth-page, .newsletter-public, .home-page, .explore-page, .create-page, .followed-page, .my-events-page, .newsletter-private, .profile-page) .nav-center-link:focus-visible,
body:is(.landing-page, .auth-page, .newsletter-public, .home-page, .explore-page, .create-page, .followed-page, .my-events-page, .newsletter-private, .profile-page) .nav-center-link-active {
color: #FFFFFF;
text-shadow: 0 0 18px rgba(23, 190, 187, 0.18);
transform: translateY(-0.14rem) scale(1.02);
}
body:is(.landing-page, .auth-page, .newsletter-public, .home-page, .explore-page, .create-page, .followed-page, .my-events-page, .newsletter-private, .profile-page) .nav-center-link::after {
left: 50%;
bottom: 0.15rem;
width: 100%;
height: 0.18rem;
background: linear-gradient(90deg, #17BEBB 0%, #FFC914 54%, #E4572E 100%);
box-shadow: 0 0 18px rgba(23, 190, 187, 0.26);
opacity: 0;
transform: translateX(-50%) scaleX(0);
transform-origin: center;
transition:
opacity 0.2s ease,
transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}
body:is(.landing-page, .auth-page, .newsletter-public, .home-page, .explore-page, .create-page, .followed-page, .my-events-page, .newsletter-private, .profile-page) .nav-center-link:hover::after,
body:is(.landing-page, .auth-page, .newsletter-public, .home-page, .explore-page, .create-page, .followed-page, .my-events-page, .newsletter-private, .profile-page) .nav-center-link:focus-visible::after,
body:is(.landing-page, .auth-page, .newsletter-public, .home-page, .explore-page, .create-page, .followed-page, .my-events-page, .newsletter-private, .profile-page) .nav-center-link-active::after {
opacity: 1;
transform: translateX(-50%) scaleX(1);
}
body:is(.landing-page, .auth-page, .newsletter-public) header {
background:
linear-gradient(135deg, rgba(23, 190, 187, 0.1), rgba(255, 201, 20, 0.04) 52%, rgba(228, 87, 46, 0.055)),
rgba(23, 20, 21, 0.82) !important;
border-color: rgba(255, 255, 255, 0.12) !important;
box-shadow: 0 16px 44px rgba(0, 0, 0, 0.2);
backdrop-filter: blur(18px) saturate(1.12) !important;
-webkit-backdrop-filter: blur(18px) saturate(1.12) !important;
}
body:is(.landing-page, .auth-page, .newsletter-public) header nav {
position: relative;
}
body:is(.landing-page, .auth-page, .newsletter-public) header nav::after {
content: '';
position: absolute;
left: clamp(1.25rem, 4vw, 2rem);
right: clamp(1.25rem, 4vw, 2rem);
bottom: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(23, 190, 187, 0.34), rgba(255, 201, 20, 0.22), transparent);
pointer-events: none;
}
body:is(.landing-page, .auth-page, .newsletter-public) .nav-register-link {
min-height: 2.55rem;
border-radius: 0.9rem;
color: rgba(255, 255, 255, 0.82) !important;
transition:
color 0.22s ease,
background 0.22s ease,
transform 0.22s ease,
box-shadow 0.22s ease;
}
body:is(.landing-page, .auth-page, .newsletter-public) .nav-register-link:hover,
body:is(.landing-page, .auth-page, .newsletter-public) .nav-register-link:focus-visible {
background: rgba(23, 190, 187, 0.1);
color: #17BEBB !important;
transform: translateY(-0.1rem);
}
body:is(.landing-page, .auth-page, .newsletter-public) header a:is([href="login.html"], [href="HTML/login.html"]):not([aria-label]):not(.nav-register-link),
body:is(.landing-page, .auth-page, .newsletter-public) header a:is([href="index.html"], [href="../index.html"]):not([aria-label]):not(.nav-register-link) {
border-radius: 0.9rem !important;
background:
linear-gradient(135deg, #FFC914, #17BEBB) !important;
color: #231F20 !important;
box-shadow: 0 12px 26px rgba(255, 201, 20, 0.16);
transition:
color 0.22s ease,
background 0.22s ease,
transform 0.22s ease,
box-shadow 0.22s ease;
}
body:is(.landing-page, .auth-page, .newsletter-public) header a:is([href="login.html"], [href="HTML/login.html"]):not([aria-label]):not(.nav-register-link):hover,
body:is(.landing-page, .auth-page, .newsletter-public) header a:is([href="login.html"], [href="HTML/login.html"]):not([aria-label]):not(.nav-register-link):focus-visible,
body:is(.landing-page, .auth-page, .newsletter-public) header a:is([href="index.html"], [href="../index.html"]):not([aria-label]):not(.nav-register-link):hover,
body:is(.landing-page, .auth-page, .newsletter-public) header a:is([href="index.html"], [href="../index.html"]):not([aria-label]):not(.nav-register-link):focus-visible {
box-shadow: 0 16px 34px rgba(23, 190, 187, 0.2);
transform: translateY(-0.1rem);
}
body:is(.landing-page, .auth-page, .newsletter-public) #menu-btn {
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 0.9rem !important;
background: rgba(255, 255, 255, 0.04);
color: #FFFFFF !important;
transition:
background 0.22s ease,
border-color 0.22s ease,
color 0.22s ease,
transform 0.22s ease;
}
body:is(.landing-page, .auth-page, .newsletter-public) #menu-btn:hover,
body:is(.landing-page, .auth-page, .newsletter-public) #menu-btn:focus-visible {
border-color: rgba(23, 190, 187, 0.28);
background: rgba(23, 190, 187, 0.1);
color: #17BEBB !important;
transform: translateY(-0.06rem);
}
body:is(.landing-page, .auth-page, .newsletter-public) #mobile-menu {
margin-top: 0.35rem;
border-color: rgba(255, 255, 255, 0.12) !important;
border-radius: 0 0 1.15rem 1.15rem;
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.014)),
rgba(23, 20, 21, 0.9);
box-shadow: 0 20px 42px rgba(0, 0, 0, 0.22);
}
body:is(.landing-page, .auth-page, .newsletter-public) #mobile-menu a {
border-radius: 0.85rem;
padding-left: 0.85rem;
padding-right: 0.85rem;
transition:
color 0.2s ease,
background 0.2s ease,
transform 0.2s ease;
}
body:is(.landing-page, .auth-page, .newsletter-public) #mobile-menu a:hover,
body:is(.landing-page, .auth-page, .newsletter-public) #mobile-menu a:focus-visible {
background: rgba(23, 190, 187, 0.1);
color: #17BEBB !important;
transform: translateX(0.12rem);
}
body:is(.landing-page, .auth-page, .newsletter-public, .home-page, .explore-page, .create-page, .followed-page, .my-events-page, .newsletter-private, .profile-page) #menu-btn {
min-width: 2.75rem;
min-height: 2.75rem;
border-radius: 0.9rem !important;
transition:
background 0.22s ease,
border-color 0.22s ease,
color 0.22s ease,
transform 0.22s ease,
box-shadow 0.22s ease;
}
body:is(.landing-page, .auth-page, .newsletter-public, .home-page, .explore-page, .create-page, .followed-page, .my-events-page, .newsletter-private, .profile-page) #menu-btn:hover,
body:is(.landing-page, .auth-page, .newsletter-public, .home-page, .explore-page, .create-page, .followed-page, .my-events-page, .newsletter-private, .profile-page) #menu-btn:focus-visible {
box-shadow: 0 0 0 4px rgba(23, 190, 187, 0.1);
transform: translateY(-0.06rem);
}
body:is(.landing-page, .auth-page, .newsletter-public, .home-page, .explore-page, .create-page, .followed-page, .my-events-page, .newsletter-private, .profile-page) #mobile-menu a {
min-height: 2.7rem;
border-radius: 0.85rem;
padding-left: 0.85rem;
padding-right: 0.85rem;
transition:
color 0.2s ease,
background 0.2s ease,
transform 0.2s ease;
}
body:is(.landing-page, .auth-page, .newsletter-public, .home-page, .explore-page, .create-page, .followed-page, .my-events-page, .newsletter-private, .profile-page) #mobile-menu a:hover,
body:is(.landing-page, .auth-page, .newsletter-public, .home-page, .explore-page, .create-page, .followed-page, .my-events-page, .newsletter-private, .profile-page) #mobile-menu a:focus-visible {
background: rgba(23, 190, 187, 0.1);
color: #17BEBB !important;
transform: translateX(0.12rem);
}
body.home-page header > div {
min-height: 4.25rem;
padding-top: 0.375rem !important;
padding-bottom: 0.375rem !important;
}
body.home-page header nav[aria-label="Navigazione area privata"] {
min-height: 0;
}
body.home-page header img[alt="Logo HangingAround"] {
height: 3.5rem;
object-fit: contain;
}
body.home-page #profileBtn {
height: 2.75rem;
min-height: 2.75rem;
padding-left: 0.75rem;
padding-right: 0.9rem;
}
body.home-page #profileBtn > div:first-child {
width: 2.25rem;
height: 2.25rem;
}
:root {
--ha-navbar-height: 4.25rem;
--ha-navbar-y: 0.375rem;
--ha-navbar-logo: 3.5rem;
--ha-navbar-control: 2.75rem;
}
body:is(.landing-page, .auth-page, .newsletter-public, .explore-page, .create-page, .followed-page, .my-events-page, .newsletter-private, .profile-page) header > nav,
body.home-page header > div {
box-sizing: border-box;
min-height: var(--ha-navbar-height);
padding-top: var(--ha-navbar-y) !important;
padding-bottom: var(--ha-navbar-y) !important;
}
body:is(.landing-page, .auth-page, .newsletter-public, .explore-page, .create-page, .followed-page, .my-events-page, .newsletter-private, .profile-page) header > nav > div:first-child,
body.home-page header > div {
min-height: calc(var(--ha-navbar-height) - (var(--ha-navbar-y) * 2));
}
body:is(.landing-page, .auth-page, .newsletter-public, .home-page, .explore-page, .create-page, .followed-page, .my-events-page, .newsletter-private, .profile-page) header img[alt="Logo HangingAround"] {
height: var(--ha-navbar-logo) !important;
object-fit: contain;
}
body:is(.landing-page, .auth-page, .newsletter-public) header > nav > div:first-child ul,
body.home-page header > div ul {
gap: 2.5rem;
}
body:is(.landing-page,
.auth-page, .newsletter-public) header > nav > div:first-child .nav-register-link,
body:is(.landing-page,
.auth-page, .newsletter-public) header > nav > div:first-child a:is([href="login.html"],
[href="HTML/login.html"]):not([aria-label]):not(.nav-register-link),
body:is(.landing-page,
.auth-page, .newsletter-public) header > nav > div:first-child a:is([href="index.html"],
[href="../index.html"]):not([aria-label]):not(.nav-register-link),
body:is(.landing-page,
.auth-page, .newsletter-public,
.home-page,
.explore-page,
.create-page,
.followed-page,
.my-events-page, .newsletter-private,
.profile-page) #profileBtn,
body:is(.landing-page,
.auth-page, .newsletter-public,
.home-page,
.explore-page,
.create-page,
.followed-page,
.my-events-page, .newsletter-private,
.profile-page) .profile-nav-button,
body:is(.landing-page,
.auth-page, .newsletter-public,
.home-page,
.explore-page,
.create-page,
.followed-page,
.my-events-page, .newsletter-private,
.profile-page) #menu-btn {
min-height: var(--ha-navbar-control);
height: var(--ha-navbar-control);
}
body:is(.landing-page, .auth-page, .newsletter-public) header > nav > div:first-child .nav-register-link,
body:is(.landing-page, .auth-page, .newsletter-public) header > nav > div:first-child a:is([href="login.html"], [href="HTML/login.html"]):not([aria-label]):not(.nav-register-link),
body:is(.landing-page, .auth-page, .newsletter-public) header > nav > div:first-child a:is([href="index.html"], [href="../index.html"]):not([aria-label]):not(.nav-register-link) {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
@media (min-width: 1280px) {
body:is(.landing-page, .auth-page, .newsletter-public) header > nav > div:first-child ul,
body.home-page header > div ul {
gap: 3.5rem;
}
}
body.landing-page header {
background:
linear-gradient(135deg, rgba(23, 190, 187, 0.1), rgba(255, 201, 20, 0.045) 52%, rgba(228, 87, 46, 0.055)),
rgba(23, 20, 21, 0.76) !important;
border-bottom-color: rgba(255, 255, 255, 0.08) !important;
box-shadow: 0 14px 42px rgba(0, 0, 0, 0.16);
}
body.auth-page header {
background:
linear-gradient(135deg, rgba(23, 190, 187, 0.1), rgba(255, 201, 20, 0.045) 52%, rgba(228, 87, 46, 0.055)),
rgba(23, 20, 21, 0.84) !important;
border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}
body:is(.landing-page, .auth-page, .newsletter-public) header > nav::after {
left: 0;
right: 0;
bottom: -1px;
height: 1px;
background:
linear-gradient(90deg, transparent 0%, rgba(23, 190, 187, 0.28) 22%, rgba(255, 201, 20, 0.18) 50%, rgba(228, 87, 46, 0.16) 76%, transparent 100%);
opacity: 0.72;
}
body.landing-page header:not(.nav-over-surface) {
background:
linear-gradient(135deg, rgba(23, 190, 187, 0.1), rgba(255, 201, 20, 0.045) 52%, rgba(228, 87, 46, 0.055)),
rgba(23, 20, 21, 0.78) !important;
box-shadow: 0 14px 42px rgba(0, 0, 0, 0.18);
}
body.landing-page header.nav-over-surface {
background:
linear-gradient(135deg, rgba(23, 190, 187, 0.08), rgba(255, 201, 20, 0.035) 52%, rgba(228, 87, 46, 0.045)),
rgba(23, 20, 21, 0.72) !important;
box-shadow: 0 12px 34px rgba(0, 0, 0, 0.14);
}
body:is(.landing-page, .auth-page, .newsletter-public, .home-page, .explore-page, .create-page, .followed-page, .my-events-page, .newsletter-private, .profile-page) header,
body:is(.landing-page, .auth-page, .newsletter-public, .home-page, .explore-page, .create-page, .followed-page, .my-events-page, .newsletter-private, .profile-page) header.nav-over-surface,
body:is(.landing-page, .auth-page, .newsletter-public, .home-page, .explore-page, .create-page, .followed-page, .my-events-page, .newsletter-private, .profile-page) header:not(.nav-over-surface),
body.badge-page > header {
position: sticky;
background:
linear-gradient(135deg, rgba(23, 190, 187, 0.1), rgba(255, 201, 20, 0.045) 52%, rgba(228, 87, 46, 0.06)),
rgba(23, 20, 21, 0.76) !important;
border-bottom-color: rgba(255, 255, 255, 0.12) !important;
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.16) !important;
backdrop-filter: blur(18px) saturate(1.12) !important;
-webkit-backdrop-filter: blur(18px) saturate(1.12) !important;
transition:
background 0.24s ease,
border-color 0.24s ease,
box-shadow 0.24s ease,
backdrop-filter 0.24s ease;
}
body:is(.landing-page, .auth-page, .newsletter-public, .home-page, .explore-page, .create-page, .followed-page, .my-events-page, .newsletter-private, .profile-page) header > nav::after,
body:is(.landing-page, .auth-page, .newsletter-public, .home-page, .explore-page, .create-page, .followed-page, .my-events-page, .newsletter-private, .profile-page) header nav::after {
display: none;
}
body:is(.landing-page, .auth-page, .newsletter-public, .home-page, .explore-page, .create-page, .followed-page, .my-events-page, .newsletter-private, .profile-page) header::after {
content: '';
position: absolute;
left: clamp(1.25rem, 4vw, 2rem);
right: clamp(1.25rem, 4vw, 2rem);
bottom: -1px;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(23, 190, 187, 0.34), rgba(255, 201, 20, 0.22), transparent);
opacity: 0.78;
pointer-events: none;
}
body:is(.landing-page, .auth-page, .newsletter-public, .home-page, .explore-page, .create-page, .followed-page, .my-events-page, .newsletter-private, .profile-page) .nav-center-link,
body:is(.landing-page, .auth-page, .newsletter-public, .home-page, .explore-page, .create-page, .followed-page, .my-events-page, .newsletter-private, .profile-page) header.nav-over-surface .nav-center-link,
body:is(.landing-page, .auth-page, .newsletter-public, .home-page, .explore-page, .create-page, .followed-page, .my-events-page, .newsletter-private, .profile-page) header:not(.nav-over-surface) .nav-center-link {
color: rgba(255, 255, 255, 0.76) !important;
}
body:is(.landing-page, .auth-page, .newsletter-public, .home-page, .explore-page, .create-page, .followed-page, .my-events-page, .newsletter-private, .profile-page) .nav-center-link:hover,
body:is(.landing-page, .auth-page, .newsletter-public, .home-page, .explore-page, .create-page, .followed-page, .my-events-page, .newsletter-private, .profile-page) .nav-center-link:focus-visible,
body:is(.landing-page, .auth-page, .newsletter-public, .home-page, .explore-page, .create-page, .followed-page, .my-events-page, .newsletter-private, .profile-page) .nav-center-link-active {
color: #FFFFFF !important;
}
body:is(.landing-page, .auth-page, .newsletter-public, .home-page, .explore-page, .create-page, .followed-page, .my-events-page, .newsletter-private, .profile-page) #profileBtn,
body:is(.landing-page, .auth-page, .newsletter-public, .home-page, .explore-page, .create-page, .followed-page, .my-events-page, .newsletter-private, .profile-page) .profile-nav-button {
border: 1px solid rgba(255, 255, 255, 0.14) !important;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.018)),
rgba(23, 20, 21, 0.56) !important;
color: #FFFFFF !important;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.045), 0 12px 28px rgba(0, 0, 0, 0.18) !important;
}
body:is(.landing-page, .auth-page, .newsletter-public, .home-page, .explore-page, .create-page, .followed-page, .my-events-page, .newsletter-private, .profile-page) #profileBtn:hover,
body:is(.landing-page, .auth-page, .newsletter-public, .home-page, .explore-page, .create-page, .followed-page, .my-events-page, .newsletter-private, .profile-page) #profileBtn:focus-visible,
body:is(.landing-page, .auth-page, .newsletter-public, .home-page, .explore-page, .create-page, .followed-page, .my-events-page, .newsletter-private, .profile-page) .profile-nav-button:hover,
body:is(.landing-page, .auth-page, .newsletter-public, .home-page, .explore-page, .create-page, .followed-page, .my-events-page, .newsletter-private, .profile-page) .profile-nav-button:focus-visible {
border-color: rgba(23, 190, 187, 0.48) !important;
box-shadow: 0 0 0 4px rgba(23, 190, 187, 0.13), 0 16px 34px rgba(0, 0, 0, 0.22) !important;
}
body:is(.landing-page, .auth-page, .newsletter-public, .home-page, .explore-page, .create-page, .followed-page, .my-events-page, .newsletter-private, .profile-page) header .nav-center-link,
body:is(.landing-page, .auth-page, .newsletter-public, .home-page, .explore-page, .create-page, .followed-page, .my-events-page, .newsletter-private, .profile-page) header .nav-register-link,
body:is(.landing-page, .auth-page, .newsletter-public, .home-page, .explore-page, .create-page, .followed-page, .my-events-page, .newsletter-private, .profile-page) header a:is([href="login.html"], [href="HTML/login.html"]):not([aria-label]):not(.nav-register-link),
body:is(.landing-page, .auth-page, .newsletter-public, .home-page, .explore-page, .create-page, .followed-page, .my-events-page, .newsletter-private, .profile-page) header a:is([href="index.html"], [href="../index.html"]):not([aria-label]):not(.nav-register-link),
body:is(.landing-page, .auth-page, .newsletter-public, .home-page, .explore-page, .create-page, .followed-page, .my-events-page, .newsletter-private, .profile-page) header #navbarProfileName,
body:is(.landing-page, .auth-page, .newsletter-public, .home-page, .explore-page, .create-page, .followed-page, .my-events-page, .newsletter-private, .profile-page) header #mobile-menu a,
body:is(.landing-page, .auth-page, .newsletter-public, .home-page, .explore-page, .create-page, .followed-page, .my-events-page, .newsletter-private, .profile-page) header #profileMenu > a,
body:is(.landing-page, .auth-page, .newsletter-public, .home-page, .explore-page, .create-page, .followed-page, .my-events-page, .newsletter-private, .profile-page) header #profileMenu > button {
font-size: 0.95rem !important;
font-weight: 500 !important;
letter-spacing: 0 !important;
line-height: 1.1 !important;
text-transform: none !important;
}
@media (prefers-reduced-motion: reduce) {
body:is(.landing-page, .auth-page, .newsletter-public, .home-page, .explore-page, .create-page, .followed-page, .my-events-page, .newsletter-private, .profile-page) header,
body:is(.landing-page, .auth-page, .newsletter-public, .home-page, .explore-page, .create-page, .followed-page, .my-events-page, .newsletter-private, .profile-page) header::after,
body:is(.landing-page, .auth-page, .newsletter-public, .home-page, .explore-page, .create-page, .followed-page, .my-events-page, .newsletter-private, .profile-page) .nav-center-link,
body:is(.landing-page, .auth-page, .newsletter-public, .home-page, .explore-page, .create-page, .followed-page, .my-events-page, .newsletter-private, .profile-page) .nav-center-link::after,
body:is(.landing-page, .auth-page, .newsletter-public) .nav-register-link,
body:is(.landing-page, .auth-page, .newsletter-public, .home-page, .explore-page, .create-page, .followed-page, .my-events-page, .newsletter-private, .profile-page) #menu-btn,
body:is(.landing-page, .auth-page, .newsletter-public, .home-page, .explore-page, .create-page, .followed-page, .my-events-page, .newsletter-private, .profile-page) #mobile-menu a,
body:is(.landing-page, .auth-page, .newsletter-public) header a:is([href="login.html"], [href="HTML/login.html"]):not([aria-label]):not(.nav-register-link),
body:is(.landing-page, .auth-page, .newsletter-public) header a:is([href="index.html"], [href="../index.html"]):not([aria-label]):not(.nav-register-link) {
transition: none !important;
}
body:is(.landing-page, .auth-page, .newsletter-public, .home-page, .explore-page, .create-page, .followed-page, .my-events-page, .newsletter-private, .profile-page) .nav-center-link:hover,
body:is(.landing-page, .auth-page, .newsletter-public, .home-page, .explore-page, .create-page, .followed-page, .my-events-page, .newsletter-private, .profile-page) .nav-center-link:focus-visible,
body:is(.landing-page, .auth-page, .newsletter-public) .nav-register-link:hover,
body:is(.landing-page, .auth-page, .newsletter-public) .nav-register-link:focus-visible,
body:is(.landing-page, .auth-page, .newsletter-public, .home-page, .explore-page, .create-page, .followed-page, .my-events-page, .newsletter-private, .profile-page) #menu-btn:hover,
body:is(.landing-page, .auth-page, .newsletter-public, .home-page, .explore-page, .create-page, .followed-page, .my-events-page, .newsletter-private, .profile-page) #menu-btn:focus-visible,
body:is(.landing-page, .auth-page, .newsletter-public, .home-page, .explore-page, .create-page, .followed-page, .my-events-page, .newsletter-private, .profile-page) #mobile-menu a:hover,
body:is(.landing-page, .auth-page, .newsletter-public, .home-page, .explore-page, .create-page, .followed-page, .my-events-page, .newsletter-private, .profile-page) #mobile-menu a:focus-visible,
body:is(.landing-page, .auth-page, .newsletter-public) header a:is([href="login.html"], [href="HTML/login.html"]):not([aria-label]):not(.nav-register-link):hover,
body:is(.landing-page, .auth-page, .newsletter-public) header a:is([href="login.html"], [href="HTML/login.html"]):not([aria-label]):not(.nav-register-link):focus-visible,
body:is(.landing-page, .auth-page, .newsletter-public) header a:is([href="index.html"], [href="../index.html"]):not([aria-label]):not(.nav-register-link):hover,
body:is(.landing-page, .auth-page, .newsletter-public) header a:is([href="index.html"], [href="../index.html"]):not([aria-label]):not(.nav-register-link):focus-visible {
transform: none !important;
}
}
body:is(.landing-page,
.auth-page, .newsletter-public).visual-hero-page header,
body:is(.landing-page,
.auth-page, .newsletter-public).visual-hero-page header:not(.nav-over-surface),
html[data-theme="dark"] body:is(.landing-page,
.auth-page, .newsletter-public).visual-hero-page header,
html[data-theme="dark"] body:is(.landing-page,
.auth-page, .newsletter-public).visual-hero-page header:not(.nav-over-surface) {
background:
linear-gradient(135deg, rgba(23, 190, 187, 0.1), rgba(255, 201, 20, 0.045) 52%, rgba(228, 87, 46, 0.06)),
rgba(23, 20, 21, 0.58) !important;
border-color: rgba(255, 255, 255, 0.12) !important;
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.16) !important;
backdrop-filter: blur(18px) saturate(1.12) !important;
-webkit-backdrop-filter: blur(18px) saturate(1.12) !important;
}
html[data-theme="dark"] body:is(.landing-page, .auth-page, .newsletter-public).visual-hero-page header.nav-over-surface {
background:
linear-gradient(135deg, rgba(23, 190, 187, 0.08), rgba(255, 201, 20, 0.035) 52%, rgba(228, 87, 46, 0.05)),
rgba(23, 20, 21, 0.82) !important;
border-color: rgba(255, 255, 255, 0.12) !important;
box-shadow: 0 18px 54px rgba(0, 0, 0, 0.22) !important;
backdrop-filter: blur(18px) saturate(1.12) !important;
-webkit-backdrop-filter: blur(18px) saturate(1.12) !important;
}
body:is(.landing-page,
.auth-page, .newsletter-public).visual-hero-page header,
body:is(.landing-page,
.auth-page, .newsletter-public).visual-hero-page header:not(.nav-over-surface),
html[data-theme="dark"] body:is(.landing-page,
.auth-page, .newsletter-public).visual-hero-page header,
html[data-theme="dark"] body:is(.landing-page,
.auth-page, .newsletter-public).visual-hero-page header:not(.nav-over-surface) {
background: rgba(23, 20, 21, 0.58) !important;
}
html[data-theme="dark"] body:is(.landing-page, .auth-page, .newsletter-public).visual-hero-page header.nav-over-surface {
background: rgba(23, 20, 21, 0.82) !important;
}
body:is(.landing-page, .auth-page, .newsletter-public).visual-hero-page header::after {
background: rgba(255, 255, 255, 0.18) !important;
}
body:is(.landing-page, .auth-page, .newsletter-public).visual-hero-page #mobile-menu {
background: rgba(23, 20, 21, 0.94) !important;
}
body.auth-page .login-lock-icon {
display: inline-block;
transform-box: fill-box;
transform-origin: center;
}
html[data-theme="dark"] body.auth-page .auth-card:hover .login-lock-icon,
html[data-theme="dark"] body.auth-page .auth-card:focus-within .login-lock-icon {
animation: loginLockPlayfulTilt 1.45s ease both !important;
color: rgba(23, 190, 187, 0.95) !important;
}
body.register-page > .relative {
padding-top: 5.6rem !important;
padding-bottom: 0.75rem !important;
}
body.register-page > .relative > .relative {
max-width: 38rem !important;
}
body.register-page .auth-card {
padding: 0.9rem !important;
}
@media (min-width: 768px) {
body.register-page .auth-card {
padding: 1.05rem !important;
}
}
body.register-page .auth-card > .register-title-block {
margin-bottom: 0.65rem;
}
body.register-page .auth-card h1 {
font-size: 1.45rem !important;
line-height: 1.05 !important;
}
body.register-page .auth-card form > .space-y-5 > :not([hidden]) ~ :not([hidden]) {
margin-top: 0.55rem !important;
}
body.register-page .auth-card .grid {
gap: 0.55rem !important;
}
body.register-page .auth-card label {
margin-bottom: 0.12rem !important;
font-size: 0.78rem !important;
line-height: 1.15 !important;
}
body.register-page .auth-card input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
body.register-page .auth-card select {
min-height: 2.05rem !important;
padding-top: 0.28rem !important;
padding-bottom: 0.28rem !important;
font-size: 0.88rem !important;
}
body.register-page .auth-card input[class*="pl-10"],
body.register-page .auth-card select[class*="pl-10"] {
padding-left: 2.35rem !important;
}
body.register-page .auth-card svg.h-5 {
height: 1rem !important;
width: 1rem !important;
}
body.register-page .auth-card .interest-tag {
padding: 0.28rem 0.6rem !important;
font-size: 0.76rem !important;
line-height: 1.1 !important;
}
body.register-page #interests-container {
gap: 0.28rem !important;
}
body.register-page .auth-card .register-signin-hint {
margin-top: 0.42rem;
}
body.register-page .auth-card .register-divider {
margin-top: 0.35rem;
margin-bottom: 0.5rem;
}
body.register-page .auth-card .register-social-grid {
margin-bottom: 0.65rem;
}
body.auth-page .auth-card .auth-primary-submit {
padding-top: 0.58rem !important;
padding-bottom: 0.58rem !important;
}
body.register-page .auth-card .social-auth-link {
padding-top: 0.55rem !important;
padding-bottom: 0.55rem !important;
}
body :is(header, .notif-list) .notif-item {
display: flex;
align-items: center;
gap: 0.85rem;
width: 100%;
padding: 1rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
background: transparent;
text-align: left;
transition: background 160ms ease;
}
body :is(header, .notif-list) .notif-item.is-unread { background: rgba(23, 190, 187, 0.055); }
body :is(header, .notif-list) .notif-item:hover { background: rgba(255, 255, 255, 0.07); }
body :is(header, .notif-list) .notif-item:focus-visible { outline: 2px solid #17BEBB; outline-offset: -3px; }
body :is(header, .notif-list) .notif-preview-icon {
display: grid;
place-items: center;
flex: 0 0 3rem;
width: 3rem;
height: 3rem;
overflow: hidden;
border-radius: 50%;
background: rgba(23, 190, 187, 0.12);
color: #17BEBB;
font-size: 0.85rem;
font-weight: 800;
}
body :is(header, .notif-list) .notif-preview-icon.is-badge {
border-radius: 0.9rem;
background: rgba(255, 201, 20, 0.08);
color: #FFC914;
}
body :is(header, .notif-list) .notif-preview-icon img { width: 100%; height: 100%; object-fit: cover; }
body :is(header, .notif-list) .notif-preview-icon.is-badge img { object-fit: contain; padding: 0.25rem; }
body :is(header, .notif-list) .notif-preview-icon img + .notif-preview-fallback { display: none; }
body :is(header, .notif-list) .notif-preview-fallback svg { width: 1.6rem; height: 1.6rem; }
body :is(header, .notif-list) .notif-preview-content { flex: 1; min-width: 0; }
body :is(header, .notif-list) .notif-preview-message {
display: block;
color: #FFFFFF;
font-size: 0.875rem;
font-weight: 650;
line-height: 1.45;
overflow-wrap: anywhere;
}
body :is(header, .notif-list) .notif-item.is-read .notif-preview-message { color: rgba(255, 255, 255, 0.65); }
body :is(header, .notif-list) .notif-preview-time {
display: block;
margin-top: 0.35rem;
color: rgba(255, 255, 255, 0.45);
font-size: 0.7rem;
}
body :is(header, .notif-list) .notif-preview-unread {
flex: 0 0 0.4rem;
width: 0.4rem;
height: 0.4rem;
border-radius: 50%;
background: #17BEBB;
}
:root {
--ha-radius-control: 0.8rem;
--ha-radius-card: 1rem;
--ha-radius-panel: 1.15rem;
--ha-surface: rgba(35, 31, 32, 0.78);
--ha-surface-strong: rgba(23, 20, 21, 0.88);
--ha-border: rgba(255, 255, 255, 0.1);
--ha-border-strong: rgba(255, 255, 255, 0.16);
--ha-shadow-soft: 0 18px 48px rgba(0, 0, 0, 0.22);
--ha-shadow-lift: 0 24px 64px rgba(0, 0, 0, 0.28);
}
.landing-page .hero-video-section {
margin-top: calc(var(--ha-navbar-height, 4.25rem) * -1);
min-height: 100dvh;
padding-top: var(--ha-navbar-height, 4.25rem);
display: flex;
align-items: stretch;
}
.landing-page .hero-video-section > .relative.z-10 {
min-height: inherit;
width: 100%;
}
body:is(.landing-page, .auth-page).visual-hero-page header,
body:is(.landing-page, .auth-page).visual-hero-page header:not(.nav-over-surface),
html[data-theme="dark"] body:is(.landing-page, .auth-page).visual-hero-page header,
html[data-theme="dark"] body:is(.landing-page, .auth-page).visual-hero-page header:not(.nav-over-surface) {
background:
linear-gradient(135deg, rgba(23, 190, 187, 0.1), rgba(255, 201, 20, 0.045) 52%, rgba(228, 87, 46, 0.06)),
rgba(23, 20, 21, 0.58) !important;
border-color: rgba(255, 255, 255, 0.12) !important;
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.16) !important;
backdrop-filter: blur(18px) saturate(1.12) !important;
-webkit-backdrop-filter: blur(18px) saturate(1.12) !important;
}
body:is(.landing-page, .auth-page).visual-hero-page header.nav-over-surface,
html[data-theme="dark"] body:is(.landing-page, .auth-page).visual-hero-page header.nav-over-surface {
background:
linear-gradient(135deg, rgba(23, 190, 187, 0.08), rgba(255, 201, 20, 0.035) 52%, rgba(228, 87, 46, 0.05)),
rgba(23, 20, 21, 0.82) !important;
border-color: rgba(255, 255, 255, 0.12) !important;
box-shadow: 0 18px 54px rgba(0, 0, 0, 0.22) !important;
backdrop-filter: blur(18px) saturate(1.12) !important;
-webkit-backdrop-filter: blur(18px) saturate(1.12) !important;
}
body:is(.home-page, .explore-page, .create-page, .followed-page, .my-events-page, .profile-page, .badge-page) {
min-height: 100dvh;
background:
radial-gradient(circle at 12% 0%, rgba(23, 190, 187, 0.13), transparent 24rem),
radial-gradient(circle at 88% 100%, rgba(255, 201, 20, 0.1), transparent 26rem),
linear-gradient(135deg, #2E282A 0%, #231F20 44%, #171415 100%),
#171415;
background-attachment: fixed;
}
body:is(.home-page, .explore-page, .create-page, .followed-page, .my-events-page, .newsletter-private, .profile-page, .badge-page) header,
body:is(.home-page, .explore-page, .create-page, .followed-page, .my-events-page, .newsletter-private, .profile-page, .badge-page) header.nav-over-surface,
body:is(.home-page, .explore-page, .create-page, .followed-page, .my-events-page, .newsletter-private, .profile-page, .badge-page) header:not(.nav-over-surface) {
background:
linear-gradient(135deg, rgba(23, 190, 187, 0.08), rgba(255, 201, 20, 0.035) 52%, rgba(228, 87, 46, 0.045)),
rgba(23, 20, 21, 0.82) !important;
border-bottom-color: var(--ha-border) !important;
box-shadow: 0 14px 36px rgba(0, 0, 0, 0.18) !important;
backdrop-filter: blur(16px) saturate(1.08) !important;
-webkit-backdrop-filter: blur(16px) saturate(1.08) !important;
}
body:is(.badge-page) header > nav {
box-sizing: border-box;
min-height: var(--ha-navbar-height, 4.25rem);
padding-top: var(--ha-navbar-y, 0.375rem) !important;
padding-bottom: var(--ha-navbar-y, 0.375rem) !important;
}
body:is(.badge-page) header > nav > div:first-child {
min-height: calc(var(--ha-navbar-height, 4.25rem) - (var(--ha-navbar-y, 0.375rem) * 2));
}
body:is(.badge-page) header img[alt="Logo HangingAround"] {
height: var(--ha-navbar-logo, 3.5rem) !important;
object-fit: contain;
}
body:is(.home-page, .explore-page, .create-page, .followed-page, .my-events-page, .newsletter-private, .profile-page, .badge-page) .nav-center-link {
min-height: 2.65rem;
align-items: center;
padding: 0.52rem 0;
color: rgba(255, 255, 255, 0.76) !important;
font-size: 0.95rem !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
line-height: 1;
}
body:is(.home-page, .explore-page, .create-page, .followed-page, .my-events-page, .newsletter-private, .profile-page, .badge-page) .nav-center-link:hover,
body:is(.home-page, .explore-page, .create-page, .followed-page, .my-events-page, .newsletter-private, .profile-page, .badge-page) .nav-center-link:focus-visible,
body:is(.home-page, .explore-page, .create-page, .followed-page, .my-events-page, .newsletter-private, .profile-page, .badge-page) .nav-center-link-active {
color: #FFFFFF !important;
transform: translateY(-0.08rem);
}
body:is(.home-page, .explore-page, .create-page, .followed-page, .my-events-page, .newsletter-private, .profile-page, .badge-page) .nav-center-link::after {
height: 0.14rem;
background: linear-gradient(90deg, #17BEBB, #FFC914);
box-shadow: none;
}
body:is(.home-page, .explore-page, .create-page, .followed-page, .my-events-page, .newsletter-private, .profile-page, .badge-page) #mobile-menu {
margin-top: 0.35rem;
border-color: var(--ha-border) !important;
border-radius: 0 0 var(--ha-radius-panel) var(--ha-radius-panel);
background: rgba(23, 20, 21, 0.94);
box-shadow: var(--ha-shadow-soft);
}
body:is(.home-page, .explore-page, .create-page, .followed-page, .my-events-page, .newsletter-private, .profile-page, .badge-page) .profile-nav-button,
body:is(.home-page, .explore-page, .create-page, .followed-page, .my-events-page, .newsletter-private, .profile-page, .badge-page) #profileBtn {
border-radius: var(--ha-radius-control) !important;
}
body.home-page #profileBtn {
width: auto !important;
min-width: 0 !important;
overflow: visible !important;
}
body.home-page #profileBtn > div:first-child {
display: flex !important;
width: 2.25rem !important;
height: 2.25rem !important;
flex: 0 0 2.25rem !important;
align-items: center;
justify-content: center;
overflow: hidden;
border-radius: 999px;
}
body.home-page #navbarProfileImage {
width: 100% !important;
height: 100% !important;
object-fit: cover;
}
body.home-page #navbarProfileInitials {
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
}
body:is(.badge-page) .profile-nav-button,
body:is(.badge-page) #profileBtn,
body:is(.badge-page) #menu-btn {
min-height: var(--ha-navbar-control, 2.75rem);
height: var(--ha-navbar-control, 2.75rem);
}
body:is(.badge-page) .profile-nav-button {
display: grid;
width: var(--ha-navbar-control, 2.75rem);
place-items: center;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.14);
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.018)),
rgba(23, 20, 21, 0.56);
color: #FFFFFF;
font-weight: 900;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.045), 0 12px 28px rgba(0, 0, 0, 0.18);
}
body:is(.badge-page) .profile-nav-image {
height: 100%;
width: 100%;
object-fit: cover;
}
body:is(.home-page, .explore-page, .create-page, .followed-page, .my-events-page, .newsletter-private, .profile-page, .badge-page) #profileMenu {
border-radius: var(--ha-radius-panel) !important;
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012)),
rgba(23, 20, 21, 0.94) !important;
box-shadow: var(--ha-shadow-lift) !important;
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
}
.home-hero-section {
min-height: 34rem;
height: auto !important;
overflow: visible !important;
z-index: 20;
}
.home-hero-section > .relative.z-10 {
padding-top: 7rem;
padding-bottom: 6rem;
z-index: 30;
}
.home-hero-section h1 {
max-width: 56rem;
font-size: 2.75rem !important;
}
.home-hero-copy {
font-size: 1rem;
}
@media (min-width: 768px) {
.home-hero-section h1 {
font-size: 3.5rem !important;
}
}
.home-action-layout {
grid-template-columns: 1fr !important;
gap: 1.25rem !important;
}
.home-walker-scene {
display: none !important;
}
@media (min-width: 900px) {
.home-action-layout {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
.home-action-card {
padding: 1.5rem !important;
}
.home-action-card h2 {
font-size: 1.25rem !important;
}
.home-page #recommended-events-grid {
gap: 1rem !important;
}
.home-page #recommended-events-grid .event-card {
height: 22rem !important;
}
.home-page .event-card .group-hover\:scale-110 {
transition-duration: 420ms !important;
}
.explore-hero-section {
padding-top: 3.5rem !important;
padding-bottom: 2.5rem !important;
}
#map-toggle,
.route-badge {
min-height: 2.35rem;
border-radius: 999px !important;
background: rgba(255, 255, 255, 0.035);
}
.explore-page #event-list {
scrollbar-width: thin;
}
@media (max-width: 1023px) {
.explore-page #event-list {
max-height: none !important;
overflow-y: visible !important;
padding-right: 0 !important;
}
.explore-page #map-panel .relative.flex-1 {
min-height: 24rem !important;
}
}
.create-layout {
gap: 2rem !important;
}
@media (min-width: 1024px) {
.create-layout {
grid-template-columns: minmax(0, 1fr) minmax(22rem, 26rem) !important;
}
}
.create-input,
.profile-field input,
.profile-field select,
.profile-field textarea,
body.auth-page .auth-card input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
body.auth-page .auth-card select {
min-height: 2.75rem;
border-radius: var(--ha-radius-control) !important;
border-color: var(--ha-border-strong) !important;
background: rgba(23, 20, 21, 0.58) !important;
}
textarea.create-input,
.profile-field textarea {
min-height: 7rem;
}
.create-submit,
.profile-primary-action,
.profile-secondary-action,
.profile-danger-action,
.my-events-section-heading a,
.my-events-card-actions a,
.my-events-card-actions button,
.followed-action,
.followed-mini-action,
.followed-remove,
.badge-catalog-back,
.home-action-card > a,
.home-hero-search-button,
body.auth-page .auth-card button[type="submit"] {
min-height: 2.75rem;
border-radius: var(--ha-radius-control) !important;
font-weight: 800 !important;
letter-spacing: 0 !important;
}
.create-submit,
.profile-primary-action,
.home-hero-search-button,
body.auth-page .auth-card button[type="submit"] {
background: linear-gradient(135deg, #FFC914, #17BEBB) !important;
color: #231F20 !important;
box-shadow: 0 14px 30px rgba(23, 190, 187, 0.16);
}
.profile-danger-action,
.my-events-danger,
.followed-remove,
#logoutBtn,
[data-logout] {
color: #E4572E !important;
}
body.auth-page .auth-card {
border-radius: var(--ha-radius-panel) !important;
box-shadow: var(--ha-shadow-lift) !important;
}
body.login-page > .relative {
min-height: calc(100dvh - var(--ha-navbar-height, 4.25rem)) !important;
}
body.login-page .auth-card {
width: min(100%, 27rem);
}
body.auth-page .auth-inline-register-link {
display: inline-flex;
min-height: 2rem;
align-items: center;
justify-content: center;
margin-left: 0.35rem;
padding: 0.22rem 0.65rem;
position: relative;
overflow: hidden;
isolation: isolate;
border: 1px solid rgba(255, 201, 20, 0.58);
border-radius: 999px;
background: rgba(255, 255, 255, 0.06);
color: #FFC914 !important;
font-size: 0.875rem;
font-weight: 400;
line-height: 1;
text-decoration: none;
text-shadow: none !important;
transform: translateY(0);
transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
body.auth-page .auth-inline-register-link::before {
content: '';
position: absolute;
inset: -40% auto -40% -55%;
z-index: -1;
width: 42%;
transform: skewX(-18deg) translateX(0);
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
opacity: 0;
transition: opacity 0.2s ease, transform 0.46s ease;
}
body.auth-page .auth-inline-register-link:hover,
body.auth-page .auth-inline-register-link:focus-visible {
border-color: #FFC914;
background: #FFC914;
color: #231F20 !important;
box-shadow: 0 10px 24px rgba(255, 201, 20, 0.18);
transform: translateY(-1px);
}
body.auth-page .auth-inline-register-link:hover::before,
body.auth-page .auth-inline-register-link:focus-visible::before {
opacity: 1;
transform: skewX(-18deg) translateX(420%);
}
body.auth-page .auth-inline-register-link:active {
transform: translateY(0) scale(0.98);
}
body.auth-page .auth-inline-register-link:focus-visible {
outline: 3px solid rgba(23, 190, 187, 0.42);
outline-offset: 3px;
}
body.landing-page .landing-hero-primary-action {
border: 0 !important;
background: linear-gradient(135deg, #FFC914, #17BEBB) !important;
color: #231F20 !important;
font-size: 0.95rem !important;
box-shadow: 0 16px 34px rgba(23, 190, 187, 0.18);
}
body.landing-page .landing-hero-primary-action:hover,
body.landing-page .landing-hero-primary-action:focus-visible {
background: linear-gradient(135deg, #FFC914, #17BEBB) !important;
color: #231F20 !important;
box-shadow: 0 20px 42px rgba(23, 190, 187, 0.24);
}
body.auth-page .auth-card button.auth-primary-submit[type="submit"] {
font-weight: 500 !important;
}
@media (prefers-reduced-motion: reduce) {
body.auth-page .auth-inline-register-link,
body.auth-page .auth-inline-register-link::before {
transition: none !important;
}
}
body.login-page .auth-card::before {
display: none !important;
}
body.login-page {
min-height: 100dvh;
background: #171415;
overflow-x: hidden;
}
body.login-page header::after {
display: none !important;
}
body.login-page > .relative {
box-sizing: border-box;
overflow: hidden;
background: transparent;
}
body.login-page > .relative > video {
position: fixed !important;
inset: -1px;
z-index: 0;
width: calc(100vw + 2px);
height: calc(100dvh + 2px);
object-fit: cover;
}
body.login-page > .relative > video + .absolute {
position: fixed !important;
inset: 0;
z-index: 1;
}
body.login-page > .relative > section {
position: relative;
z-index: 2;
}
.home-hero-search .home-hero-search-button,
.home-hero-search .home-hero-search-input,
.home-hero-search .home-hero-category-trigger,
.home-hero-search .home-hero-search-select-shell {
border-radius: 999px !important;
}
.home-hero-search .home-hero-search-button {
padding-left: 1.35rem;
padding-right: 1.35rem;
}
body.register-page > .relative {
min-height: calc(100dvh - var(--ha-navbar-height, 4.25rem)) !important;
}
.badge-catalog-workspace {
padding-top: 3rem !important;
}
.badge-catalog-hero {
border-radius: var(--ha-radius-panel);
background:
linear-gradient(135deg, rgba(23, 190, 187, 0.1), rgba(255, 201, 20, 0.06)),
rgba(23, 20, 21, 0.48);
padding: 1.25rem;
}
@media (prefers-reduced-motion: reduce) {
.home-action-card,
.event-card,
.followed-person-row,
.badge-catalog-card {
transition: none !important;
transform: none !important;
}
}
body:is(.explore-page, .create-page, .profile-page, .my-events-page, .followed-page, .badge-page) {
position: relative;
}
body:is(.explore-page, .create-page, .profile-page, .my-events-page, .followed-page, .badge-page)::before {
content: '';
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
background:
linear-gradient(135deg, rgba(23, 20, 21, 0.92), rgba(23, 20, 21, 0.78) 46%, rgba(23, 20, 21, 0.95)),
var(--ha-page-media, url("../assets/outdoor.jpg")) var(--ha-page-media-position, center) / cover no-repeat;
opacity: 0.36;
filter: saturate(0.9) contrast(1.04);
}
body.explore-page { --ha-page-media: url("../assets/meetup.jpg"); }
body.create-page { --ha-page-media: url("../assets/outdoor.jpg"); }
body.profile-page { --ha-page-media: url("../assets/meetup.jpg"); }
body.profile-page { --ha-page-media-position: center 34%; }
body.my-events-page { --ha-page-media: url("../assets/trail-nebrodi.jpg"); }
body.followed-page { --ha-page-media: url("../assets/meetup.jpg"); }
body.badge-page { --ha-page-media: url("../assets/badge-1916.webp"); }
body:is(.explore-page, .create-page, .profile-page, .my-events-page, .followed-page, .badge-page) > main,
body:is(.explore-page, .create-page, .profile-page, .my-events-page, .followed-page, .badge-page) > footer {
position: relative;
z-index: 1;
}
body:is(.explore-page, .create-page, .profile-page, .my-events-page, .followed-page, .badge-page) :is(
.explore-hero-section,
.profile-hero,
.my-events-hero,
.followed-hero,
.badge-catalog-hero
) {
position: relative;
isolation: isolate;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--ha-radius-panel);
background:
linear-gradient(135deg, rgba(23, 190, 187, 0.12), rgba(255, 201, 20, 0.055) 50%, rgba(228, 87, 46, 0.08)),
rgba(23, 20, 21, 0.5);
box-shadow: var(--ha-shadow-soft);
}
.explore-hero-section {
margin: 1rem auto 0;
width: min(100% - 2rem, 80rem);
}
.profile-hero,
.my-events-hero,
.followed-hero,
.badge-catalog-hero {
padding: clamp(1.25rem, 3vw, 2rem);
}
body:is(.explore-page, .create-page, .profile-page, .my-events-page, .followed-page, .badge-page) :is(
.explore-hero-section,
.profile-hero,
.my-events-hero,
.followed-hero,
.badge-catalog-hero
)::before {
content: '';
position: absolute;
inset: 0;
z-index: -2;
background:
linear-gradient(90deg, rgba(23, 20, 21, 0.84), rgba(23, 20, 21, 0.58) 48%, rgba(23, 20, 21, 0.82)),
var(--ha-page-media, url("../assets/outdoor.jpg")) var(--ha-page-media-position, center) / cover no-repeat;
opacity: 0.72;
}
body:is(.explore-page, .create-page, .profile-page, .my-events-page, .followed-page, .badge-page) :is(
.explore-hero-section,
.profile-hero,
.my-events-hero,
.followed-hero,
.badge-catalog-hero
)::after {
content: '';
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background:
radial-gradient(circle at 14% 14%, rgba(23, 190, 187, 0.18), transparent 18rem),
radial-gradient(circle at 88% 76%, rgba(255, 201, 20, 0.13), transparent 18rem);
}
.create-workspace {
position: relative;
z-index: 1;
}
.create-hero {
position: relative;
padding: clamp(1.25rem, 4vw, 2.5rem);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--ha-radius-panel);
box-shadow: var(--ha-shadow-soft);
}
.create-workspace > .relative.z-10 {
position: relative;
z-index: 1;
}
@media (max-width: 767px) {
.explore-hero-section {
width: calc(100% - 1rem);
margin-top: 0.5rem;
}
.profile-hero,
.my-events-hero,
.followed-hero,
.badge-catalog-hero {
padding: 1rem;
}
}
body.create-page {
--ha-page-media: url("../assets/Crea_evento-1920.webp");
}
.create-hero {
min-height: clamp(20rem, 28vw, 27rem);
isolation: isolate;
}
.create-hero::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
transform: scaleX(-1);
background:
linear-gradient(270deg, rgba(23, 20, 21, 0.72), rgba(23, 20, 21, 0.2) 75%),
url("../assets/Crea_evento-1920.webp") center 62% / cover no-repeat;
background-position: inherit;
}
@media (min-width: 768px) {
body.create-page {
--ha-page-media: url("../assets/Crea_evento-2880.webp");
}
.create-hero::before {
background-image:
linear-gradient(270deg, rgba(23, 20, 21, 0.72), rgba(23, 20, 21, 0.2) 75%),
url("../assets/Crea_evento-2880.webp");
}
}
.create-workspace > .relative.z-10 {
max-width: 74rem;
}
body.create-page #event-page-kicker {
color: var(--action-secondary) !important;
text-shadow: none !important;
}
body.create-page #event-page-title {
color: #FFFFFF !important;
}
body.create-page #event-page-title .text-sun {
color: #FFC914 !important;
text-shadow: none !important;
}
body.create-page #event-page-description {
color: #FFFFFF !important;
}
.create-layout {
justify-content: center;
gap: clamp(2.75rem, 6vw, 4.75rem) !important;
margin-top: clamp(.875rem, 1.75vw, 1.5rem) !important;
}
.create-form-card {
max-width: 40rem;
justify-self: end;
}
@media (min-width: 1024px) {
.create-layout {
grid-template-columns: minmax(0, 40rem) minmax(20rem, 24rem) !important;
}
.create-preview-arrow {
top: 45.5rem;
bottom: auto;
left: calc(50% + 8rem);
right: auto;
width: clamp(23rem, 24vw, 28rem);
height: clamp(11.25rem, 11.8vw, 13.5rem);
transform: none;
}
.create-preview-arrow svg {
filter: drop-shadow(0 0 10px rgba(255, 201, 20, 0.2));
}
.create-preview-arrow-line,
.create-preview-arrow-tip {
stroke-width: 5.5;
}
}
@media (min-width: 1280px) {
.create-preview-arrow {
left: calc(50% + 7.75rem);
}
}
@media (max-width: 1023px) {
.create-form-card {
max-width: none;
justify-self: stretch;
}
}
body:is(.landing-page, .home-page, .explore-page, .create-page, .followed-page, .my-events-page, .profile-page, .badge-page) > header {
z-index: 80 !important;
overflow: visible !important;
isolation: isolate;
}
body:is(.landing-page, .home-page, .explore-page, .create-page, .followed-page, .my-events-page, .profile-page, .badge-page) > main,
body:is(.landing-page, .home-page, .explore-page, .create-page, .followed-page, .my-events-page, .profile-page, .badge-page) > footer {
z-index: 1 !important;
}
body:is(.landing-page, .home-page, .explore-page, .create-page, .followed-page, .my-events-page, .profile-page, .badge-page) header nav,
body:is(.landing-page, .home-page, .explore-page, .create-page, .followed-page, .my-events-page, .profile-page, .badge-page) header .relative {
overflow: visible !important;
}
body:is(.landing-page, .home-page, .explore-page, .create-page, .followed-page, .my-events-page, .profile-page, .badge-page) #profileBtn {
position: relative;
z-index: 91 !important;
pointer-events: auto;
}
body:is(.landing-page, .home-page, .explore-page, .create-page, .followed-page, .my-events-page, .profile-page, .badge-page) #profileMenu {
z-index: 90 !important;
pointer-events: auto;
}
body:is(.landing-page, .home-page, .explore-page, .create-page, .followed-page, .my-events-page, .profile-page, .badge-page) #profileMenu > a,
body:is(.landing-page, .home-page, .explore-page, .create-page, .followed-page, .my-events-page, .profile-page, .badge-page) #profileMenu > button {
position: relative;
z-index: 1;
pointer-events: auto;
}
body:is(.profile-page, .badge-page) {
background:
radial-gradient(circle at 10% 8%, rgba(23, 190, 187, 0.18), transparent 24rem),
radial-gradient(circle at 88% 14%, rgba(255, 201, 20, 0.13), transparent 22rem),
radial-gradient(circle at 78% 92%, rgba(228, 87, 46, 0.1), transparent 28rem),
linear-gradient(135deg, #2E282A 0%, #231F20 46%, #171415 100%) !important;
}
body:is(.profile-page, .badge-page)::before {
background:
radial-gradient(circle at 18% 24%, rgba(23, 190, 187, 0.12), transparent 18rem),
radial-gradient(circle at 82% 72%, rgba(255, 201, 20, 0.08), transparent 20rem),
linear-gradient(135deg, rgba(23, 20, 21, 0.34), rgba(23, 20, 21, 0.04)) !important;
opacity: 1 !important;
filter: none !important;
}
body:is(.profile-page, .badge-page) :is(.profile-hero, .badge-catalog-hero) {
border-color: rgba(255, 255, 255, 0.12) !important;
background:
linear-gradient(135deg, rgba(23, 190, 187, 0.16), rgba(255, 201, 20, 0.08) 48%, rgba(228, 87, 46, 0.1)),
rgba(35, 31, 32, 0.7) !important;
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.26) !important;
backdrop-filter: blur(14px) saturate(1.04);
-webkit-backdrop-filter: blur(14px) saturate(1.04);
}
body:is(.profile-page, .badge-page) :is(.profile-hero, .badge-catalog-hero)::before {
background:
linear-gradient(90deg, rgba(23, 20, 21, 0.9), rgba(23, 20, 21, 0.62) 48%, rgba(23, 20, 21, 0.84)),
var(--ha-page-media, url("../assets/outdoor.jpg")) var(--ha-page-media-position, center) / cover no-repeat !important;
opacity: 0.82 !important;
filter: none !important;
}
body:is(.profile-page, .badge-page) :is(.profile-hero, .badge-catalog-hero)::after {
background:
radial-gradient(circle at 84% 18%, rgba(23, 190, 187, 0.22), transparent 9rem),
radial-gradient(circle at 72% 88%, rgba(255, 201, 20, 0.16), transparent 11rem) !important;
opacity: 1;
}
body:is(.profile-page, .badge-page, .notifications-page) :is(
.profile-sidebar,
.profile-panel,
.profile-actions,
.profile-avatar-stage,
.profile-current-badge,
.profile-switch-row,
.profile-account-list > div:not(.profile-field),
.badge-catalog-panel,
.badge-catalog-card
) {
border-color: rgba(255, 255, 255, 0.11) !important;
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.072), rgba(255, 255, 255, 0.024)),
rgba(35, 31, 32, 0.76) !important;
box-shadow: 0 18px 46px rgba(0, 0, 0, 0.22) !important;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
body:is(.profile-page, .badge-page) :is(.badge-catalog-card, .profile-current-badge) {
position: relative;
overflow: hidden;
}
body:is(.profile-page, .badge-page) :is(.badge-catalog-card, .profile-current-badge)::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle at 0% 0%, rgba(23, 190, 187, 0.16), transparent 9rem),
linear-gradient(90deg, rgba(255, 201, 20, 0.08), transparent 42%);
opacity: 0.72;
pointer-events: none;
}
body:is(.profile-page, .badge-page) :is(.badge-catalog-card, .profile-current-badge) > * {
position: relative;
z-index: 1;
}
body:is(.profile-page, .badge-page) :is(.badge-catalog-image, .profile-current-badge-image) {
border: 1px solid rgba(255, 255, 255, 0.11);
background:
radial-gradient(circle at 32% 18%, rgba(255, 255, 255, 0.16), transparent 3.75rem),
linear-gradient(135deg, rgba(23, 190, 187, 0.16), rgba(255, 201, 20, 0.12)) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
body:is(.profile-page, .badge-page) .badge-catalog-card:hover {
border-color: rgba(23, 190, 187, 0.34) !important;
background:
linear-gradient(145deg, rgba(23, 190, 187, 0.11), rgba(255, 255, 255, 0.032)),
rgba(41, 36, 38, 0.86) !important;
}
body.badge-page .badge-catalog-kicker {
display: inline-flex;
align-items: center;
gap: 0.75rem;
border: 0 !important;
background: transparent !important;
color: #17BEBB !important;
text-shadow: none !important;
box-shadow: none !important;
padding: 0 !important;
font-size: 0.75rem;
font-weight: 900;
letter-spacing: 0.24em;
text-transform: uppercase;
}
body.badge-page .badge-catalog-kicker > span:first-child {
flex: 0 0 auto;
}
body.badge-page .badge-catalog-kicker > span:last-child {
color: #17BEBB !important;
}
body:is(.profile-page, .badge-page) {
--ha-profile-hero-border: rgba(255, 255, 255, 0.14);
--ha-profile-hero-glass: rgba(23, 20, 21, 0.22);
--ha-profile-hero-shadow: 0 24px 70px rgba(0, 0, 0, 0.26);
--ha-profile-hero-copy: rgba(255, 255, 255, 0.9);
--ha-profile-hero-kicker-bg: rgba(23, 20, 21, 0.46);
--ha-profile-hero-image-blur: 0.2px;
--ha-profile-hero-image-tone: saturate(1.04) contrast(1.04) brightness(0.88);
}
body:is(.profile-page,
.badge-page) :is(.profile-hero,
.badge-catalog-hero) {
border-color: var(--ha-profile-hero-border) !important;
background: transparent !important;
box-shadow: var(--ha-profile-hero-shadow) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
body:is(.profile-page,
.badge-page) :is(.profile-hero,
.badge-catalog-hero)::before {
inset: -2px !important;
background: var(--ha-page-media, url("../assets/outdoor.jpg")) var(--ha-page-media-position, center) / cover no-repeat !important;
opacity: 1 !important;
filter: blur(var(--ha-profile-hero-image-blur)) var(--ha-profile-hero-image-tone) !important;
transform: scale(1.01);
transition: filter 0.28s ease, opacity 0.28s ease;
}
body:is(.profile-page,
.badge-page) :is(.profile-hero,
.badge-catalog-hero)::after {
background: var(--ha-profile-hero-glass) !important;
opacity: 1 !important;
backdrop-filter: blur(3px) saturate(1.04);
-webkit-backdrop-filter: blur(3px) saturate(1.04);
}
body:is(.profile-page,
.badge-page) :is(.profile-hero h1,
.badge-catalog-hero h1) {
color: #FFFFFF !important;
text-shadow: 0 2px 16px rgba(0, 0, 0, 0.42);
}
body:is(.profile-page,
.badge-page) :is(.profile-hero p,
.badge-catalog-hero p) {
color: var(--ha-profile-hero-copy) !important;
text-shadow: 0 1px 12px rgba(0, 0, 0, 0.38);
}
body:is(.profile-page,
.badge-page) :is(.profile-kicker,
.badge-catalog-kicker) {
display: inline-flex;
width: fit-content;
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 999px;
background: var(--ha-profile-hero-kicker-bg);
color: #FFFFFF !important;
padding: 0.36rem 0.62rem;
text-shadow: 0 1px 10px rgba(0, 0, 0, 0.36);
backdrop-filter: blur(7px) saturate(1.08);
-webkit-backdrop-filter: blur(7px) saturate(1.08);
}
body.profile-page::before {
background:
radial-gradient(circle at 18% 24%, rgba(23, 190, 187, 0.12), transparent 18rem),
radial-gradient(circle at 82% 72%, rgba(255, 201, 20, 0.08), transparent 20rem),
linear-gradient(135deg, rgba(23, 20, 21, 0.34), rgba(23, 20, 21, 0.04)) !important;
opacity: 1 !important;
filter: none !important;
}
body.create-page .create-hero { margin-bottom: .75rem; }
@media (min-width: 1024px) {
body.create-page .create-hero { margin-bottom: 1rem; }
}
body:is(
.landing-page,
.auth-page,
.home-page,
.explore-page,
.create-page,
.followed-page,
.my-events-page,
.profile-page,
.badge-page
) {
--ha-page-bg-1: rgba(23, 190, 187, 0.16);
--ha-page-bg-2: rgba(255, 201, 20, 0.12);
--ha-page-bg-3: rgba(228, 87, 46, 0.1);
--ha-surface-glass: rgba(35, 31, 32, 0.72);
--ha-surface-glass-soft: rgba(255, 255, 255, 0.055);
--ha-surface-border: rgba(255, 255, 255, 0.12);
--ha-surface-border-strong: rgba(23, 190, 187, 0.28);
--ha-surface-shadow: 0 20px 54px rgba(0, 0, 0, 0.24);
--ha-surface-shadow-hover: 0 26px 64px rgba(0, 0, 0, 0.3);
--ha-surface-copy: rgba(255, 255, 255, 0.9);
--ha-surface-muted: rgba(255, 255, 255, 0.68);
--ha-field-bg: rgba(23, 20, 21, 0.52);
--ha-field-border: rgba(255, 255, 255, 0.12);
--ha-field-focus: rgba(23, 190, 187, 0.42);
}
body:is(
.home-page,
.explore-page,
.create-page,
.followed-page,
.my-events-page,
.badge-page
) {
background:
radial-gradient(circle at 8% 2%, var(--ha-page-bg-1), transparent 25rem),
radial-gradient(circle at 92% 12%, var(--ha-page-bg-2), transparent 24rem),
radial-gradient(circle at 82% 92%, var(--ha-page-bg-3), transparent 30rem),
linear-gradient(135deg, #2E282A 0%, #231F20 48%, #171415 100%) !important;
}
body:is(
.home-page,
.explore-page,
.create-page,
.followed-page,
.my-events-page,
.profile-page,
.badge-page
) header,
body:is(
.home-page,
.explore-page,
.create-page,
.followed-page,
.my-events-page,
.profile-page,
.badge-page
) header.nav-over-surface,
body:is(
.home-page,
.explore-page,
.create-page,
.followed-page,
.my-events-page,
.profile-page,
.badge-page
) header:not(.nav-over-surface) {
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.035) 52%, rgba(23, 190, 187, 0.07)),
rgba(23, 20, 21, 0.7) !important;
border-bottom-color: rgba(255, 255, 255, 0.12) !important;
box-shadow:
0 18px 46px rgba(0, 0, 0, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
backdrop-filter: blur(22px) saturate(1.16) !important;
-webkit-backdrop-filter: blur(22px) saturate(1.16) !important;
}
body:is(
.home-page,
.explore-page,
.create-page,
.followed-page,
.my-events-page,
.profile-page,
.badge-page
) header::after {
display: block !important;
opacity: 1 !important;
background:
linear-gradient(90deg, transparent 0%, rgba(23, 190, 187, 0.48) 18%, rgba(255, 201, 20, 0.36) 52%, rgba(228, 87, 46, 0.42) 82%, transparent 100%) !important;
box-shadow: 0 0 20px rgba(23, 190, 187, 0.16) !important;
}
body:is(
.explore-page,
.create-page,
.followed-page,
.my-events-page,
.badge-page
) :is(
.explore-hero-section,
.my-events-hero,
.followed-hero,
.badge-catalog-hero
) {
border-color: var(--ha-surface-border) !important;
background:
linear-gradient(135deg, rgba(23, 190, 187, 0.13), rgba(255, 201, 20, 0.08) 52%, rgba(228, 87, 46, 0.1)),
rgba(35, 31, 32, 0.56) !important;
box-shadow: var(--ha-surface-shadow) !important;
backdrop-filter: blur(14px) saturate(1.08) !important;
-webkit-backdrop-filter: blur(14px) saturate(1.08) !important;
}
body:is(
.home-page,
.explore-page,
.create-page,
.followed-page,
.my-events-page,
.profile-page,
.badge-page
) :is(
input,
select,
textarea,
.create-input,
.explore-control,
.home-hero-search-input,
.home-hero-category-trigger
) {
border-color: var(--ha-field-border) !important;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
var(--ha-field-bg) !important;
color: var(--ha-surface-copy) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.08),
0 1px 0 rgba(0, 0, 0, 0.08) !important;
backdrop-filter: blur(10px) saturate(1.04);
-webkit-backdrop-filter: blur(10px) saturate(1.04);
transition:
border-color 0.2s ease,
box-shadow 0.2s ease,
background 0.2s ease;
}
body:is(
.home-page,
.explore-page,
.create-page,
.followed-page,
.my-events-page,
.profile-page,
.badge-page
) :is(
input,
select,
textarea,
.create-input,
.explore-control,
.home-hero-search-input,
.home-hero-category-trigger
):hover {
border-color: var(--ha-surface-border-strong) !important;
}
body:is(
.home-page,
.explore-page,
.create-page,
.followed-page,
.my-events-page,
.profile-page,
.badge-page
) :is(
input,
select,
textarea,
.create-input,
.explore-control,
.home-hero-search-input,
.home-hero-category-trigger
):focus,
body:is(
.home-page,
.explore-page,
.create-page,
.followed-page,
.my-events-page,
.profile-page,
.badge-page
) :is(.home-hero-category-trigger:focus-visible) {
border-color: var(--ha-field-focus) !important;
box-shadow: 0 0 0 4px rgba(23, 190, 187, 0.14) !important;
outline: none;
}
body:is(
.landing-page,
.auth-page, .newsletter-public,
.home-page,
.explore-page,
.create-page,
.followed-page,
.my-events-page, .newsletter-private,
.profile-page,
.badge-page
) header,
body:is(
.landing-page,
.auth-page, .newsletter-public,
.home-page,
.explore-page,
.create-page,
.followed-page,
.my-events-page, .newsletter-private,
.profile-page,
.badge-page
) header.nav-over-surface,
body:is(
.landing-page,
.auth-page, .newsletter-public,
.home-page,
.explore-page,
.create-page,
.followed-page,
.my-events-page, .newsletter-private,
.profile-page,
.badge-page
) header:not(.nav-over-surface) {
background: rgba(35, 31, 32, 0.92) !important;
border-bottom-color: rgba(255, 255, 255, 0.1) !important;
box-shadow: none !important;
backdrop-filter: blur(16px) !important;
-webkit-backdrop-filter: blur(16px) !important;
}
body:is(
.landing-page,
.auth-page, .newsletter-public,
.home-page,
.explore-page,
.create-page,
.followed-page,
.my-events-page, .newsletter-private,
.profile-page,
.badge-page
) header > nav,
body:is(
.landing-page,
.auth-page, .newsletter-public,
.home-page,
.explore-page,
.create-page,
.followed-page,
.my-events-page, .newsletter-private,
.profile-page,
.badge-page
) header > div:first-child {
box-sizing: border-box;
min-height: var(--ha-navbar-height, 4.25rem);
padding-top: var(--ha-navbar-y, 0.375rem) !important;
padding-bottom: var(--ha-navbar-y, 0.375rem) !important;
}
body:is(
.landing-page,
.auth-page, .newsletter-public,
.home-page,
.explore-page,
.create-page,
.followed-page,
.my-events-page, .newsletter-private,
.profile-page,
.badge-page
) header img[alt="Logo HangingAround"] {
height: var(--ha-navbar-logo, 3.5rem) !important;
object-fit: contain;
}
body:is(
.landing-page,
.auth-page, .newsletter-public,
.home-page,
.explore-page,
.create-page,
.followed-page,
.my-events-page, .newsletter-private,
.profile-page,
.badge-page
) header::after,
body:is(
.landing-page,
.auth-page, .newsletter-public,
.home-page,
.explore-page,
.create-page,
.followed-page,
.my-events-page, .newsletter-private,
.profile-page,
.badge-page
) header > nav::after,
body:is(
.landing-page,
.auth-page, .newsletter-public,
.home-page,
.explore-page,
.create-page,
.followed-page,
.my-events-page, .newsletter-private,
.profile-page,
.badge-page
) header nav::after {
display: none !important;
background: none !important;
box-shadow: none !important;
}
body:is(
.landing-page,
.auth-page, .newsletter-public,
.home-page,
.explore-page,
.create-page,
.followed-page,
.my-events-page, .newsletter-private,
.profile-page,
.badge-page
) .nav-center-link::after {
background: #17BEBB !important;
box-shadow: none !important;
}
body:is(
.landing-page,
.auth-page, .newsletter-public,
.home-page,
.explore-page,
.create-page,
.followed-page,
.my-events-page, .newsletter-private,
.profile-page,
.badge-page
) header :is(.nav-center-link, .nav-register-link, #navbarProfileName, #menu-btn) {
color: rgba(255, 255, 255, 0.78) !important;
}
body:is(
.landing-page,
.auth-page, .newsletter-public,
.home-page,
.explore-page,
.create-page,
.followed-page,
.my-events-page, .newsletter-private,
.profile-page,
.badge-page
) header :is(.nav-center-link:hover, .nav-center-link:focus-visible, .nav-center-link-active, .nav-register-link:hover, .nav-register-link:focus-visible, #menu-btn:hover, #menu-btn:focus-visible) {
color: #FFFFFF !important;
}
body:is(.landing-page,
.auth-page, .newsletter-public,
.home-page,
.explore-page,
.create-page,
.followed-page,
.my-events-page, .newsletter-private,
.profile-page,
.badge-page) header :is(#profileBtn,
.profile-nav-button,
#menu-btn) {
border-color: rgba(255, 255, 255, 0.12) !important;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
rgba(23, 20, 21, 0.46) !important;
box-shadow: none !important;
backdrop-filter: blur(10px) saturate(1.04) !important;
-webkit-backdrop-filter: blur(10px) saturate(1.04) !important;
}
body:is(.landing-page,
.auth-page, .newsletter-public,
.home-page,
.explore-page,
.create-page,
.followed-page,
.my-events-page, .newsletter-private,
.profile-page,
.badge-page) header :is(#profileBtn:hover,
#profileBtn:focus-visible,
.profile-nav-button:hover,
.profile-nav-button:focus-visible,
#menu-btn:hover,
#menu-btn:focus-visible) {
border-color: rgba(23, 190, 187, 0.34) !important;
background: rgba(255, 255, 255, 0.08) !important;
box-shadow: 0 0 0 3px rgba(23, 190, 187, 0.11) !important;
}
body:is(
.landing-page,
.auth-page, .newsletter-public,
.home-page,
.explore-page,
.create-page,
.followed-page,
.my-events-page, .newsletter-private,
.profile-page,
.badge-page
) header :is(a:is([href="login.html"], [href="HTML/login.html"]):not([aria-label]):not(.nav-register-link), a:is([href="index.html"], [href="../index.html"]):not([aria-label]):not(.nav-register-link)) {
background: #FFC914 !important;
color: #231F20 !important;
border-color: transparent !important;
box-shadow: none !important;
}
body:is(
.landing-page,
.auth-page, .newsletter-public,
.home-page,
.explore-page,
.create-page,
.followed-page,
.my-events-page, .newsletter-private,
.profile-page,
.badge-page
) header :is(a:is([href="login.html"], [href="HTML/login.html"]):not([aria-label]):not(.nav-register-link), a:is([href="index.html"], [href="../index.html"]):not([aria-label]):not(.nav-register-link)):hover,
body:is(
.landing-page,
.auth-page, .newsletter-public,
.home-page,
.explore-page,
.create-page,
.followed-page,
.my-events-page, .newsletter-private,
.profile-page,
.badge-page
) header :is(a:is([href="login.html"], [href="HTML/login.html"]):not([aria-label]):not(.nav-register-link), a:is([href="index.html"], [href="../index.html"]):not([aria-label]):not(.nav-register-link)):focus-visible {
background: #17BEBB !important;
color: #231F20 !important;
}
body:is(
.landing-page,
.auth-page, .newsletter-public,
.home-page,
.explore-page,
.create-page,
.followed-page,
.my-events-page, .newsletter-private,
.profile-page,
.badge-page
) header :is(#profileMenu, #mobile-menu) {
border-color: rgba(255, 255, 255, 0.1) !important;
background: rgba(35, 31, 32, 0.96) !important;
color: rgba(255, 255, 255, 0.88) !important;
box-shadow: 0 20px 48px rgba(0, 0, 0, 0.28) !important;
backdrop-filter: blur(16px) saturate(1.08) !important;
-webkit-backdrop-filter: blur(16px) saturate(1.08) !important;
}
body:is(
.landing-page,
.auth-page, .newsletter-public,
.home-page,
.explore-page,
.create-page,
.followed-page,
.my-events-page, .newsletter-private,
.profile-page,
.badge-page
) header :is(#profileMenu a, #profileMenu button, #mobile-menu a) {
color: inherit !important;
}
body:is(
.landing-page,
.auth-page, .newsletter-public,
.home-page,
.explore-page,
.create-page,
.followed-page,
.my-events-page, .newsletter-private,
.profile-page,
.badge-page
) header :is(#profileMenu a:hover, #profileMenu a:focus-visible, #profileMenu button:hover, #profileMenu button:focus-visible, #mobile-menu a:hover, #mobile-menu a:focus-visible) {
background: rgba(23, 190, 187, 0.1) !important;
color: #17BEBB !important;
}
body:is(
.landing-page,
.auth-page, .newsletter-public,
.home-page,
.explore-page,
.create-page,
.followed-page,
.my-events-page, .newsletter-private,
.profile-page,
.badge-page
) header hr {
border-color: rgba(255, 255, 255, 0.1) !important;
}
body:is(
.landing-page,
.auth-page, .newsletter-public,
.home-page,
.explore-page,
.create-page,
.followed-page,
.my-events-page, .newsletter-private,
.profile-page,
.badge-page
) header :is(#profileMenu #logoutBtn, #profileMenu #logoutPanelBtn, #profileMenu a[href="#"]) {
color: #E4572E !important;
}
body:is(
.landing-page,
.auth-page, .newsletter-public,
.home-page,
.explore-page,
.create-page,
.followed-page,
.my-events-page, .newsletter-private,
.profile-page,
.badge-page
) header :is(#profileMenu #logoutBtn:hover, #profileMenu #logoutBtn:focus-visible, #profileMenu #logoutPanelBtn:hover, #profileMenu #logoutPanelBtn:focus-visible, #profileMenu a[href="#"]:hover, #profileMenu a[href="#"]:focus-visible) {
background: rgba(228, 87, 46, 0.1) !important;
color: #FF7A55 !important;
}
body.home-page.visual-hero-page header:not(.nav-over-surface),
html[data-theme="dark"] body.home-page.visual-hero-page header:not(.nav-over-surface) {
background: transparent !important;
border-color: transparent !important;
border-bottom-color: transparent !important;
box-shadow: none !important;
backdrop-filter: blur(4px) saturate(1.02) !important;
-webkit-backdrop-filter: blur(4px) saturate(1.02) !important;
}
body.home-page.visual-hero-page header.nav-over-surface,
html[data-theme="dark"] body.home-page.visual-hero-page header.nav-over-surface {
background: rgba(35, 31, 32, 0.88) !important;
border-color: transparent !important;
border-bottom-color: transparent !important;
box-shadow: none !important;
backdrop-filter: blur(8px) saturate(1.05) !important;
-webkit-backdrop-filter: blur(8px) saturate(1.05) !important;
}
body.home-page.visual-hero-page header:not(.nav-over-surface) :is(.nav-center-link,
.nav-register-link,
#navbarProfileName,
#menu-btn) {
color: rgba(255, 255, 255, 0.9) !important;
text-shadow: 0 1px 12px rgba(0, 0, 0, 0.28) !important;
}
body:is(.landing-page,
.auth-page, .newsletter-public,
.home-page,
.explore-page,
.create-page,
.followed-page,
.my-events-page, .newsletter-private,
.profile-page,
.badge-page) header .nav-center-link.nav-center-link-active::after {
content: '' !important;
position: absolute !important;
left: 50% !important;
bottom: -0.18rem !important;
display: block !important;
width: 100% !important;
height: 0.18rem !important;
border: 0 !important;
border-radius: 999px !important;
background: linear-gradient(90deg, #17BEBB, #FFC914) !important;
box-shadow: none !important;
transform: translateX(-50%) scaleX(1) !important;
transform-origin: center !important;
}
body:is(.landing-page,
.auth-page, .newsletter-public,
.home-page,
.explore-page,
.create-page,
.followed-page,
.my-events-page, .newsletter-private,
.profile-page,
.badge-page) header .nav-center-link::after {
content: '' !important;
position: absolute !important;
left: 50% !important;
bottom: -0.18rem !important;
display: block !important;
width: 100% !important;
height: 0.18rem !important;
border: 0 !important;
border-radius: 999px !important;
background: linear-gradient(90deg, #17BEBB, #FFC914) !important;
box-shadow: none !important;
transform: translateX(-50%) scaleX(0) !important;
transform-origin: center !important;
transition: transform 0.25s ease !important;
}
body:is(.landing-page,
.auth-page, .newsletter-public,
.home-page,
.explore-page,
.create-page,
.followed-page,
.my-events-page, .newsletter-private,
.profile-page,
.badge-page) header .nav-center-link:hover::after,
body:is(.landing-page,
.auth-page, .newsletter-public,
.home-page,
.explore-page,
.create-page,
.followed-page,
.my-events-page, .newsletter-private,
.profile-page,
.badge-page) header .nav-center-link:focus-visible::after,
body:is(.landing-page,
.auth-page, .newsletter-public,
.home-page,
.explore-page,
.create-page,
.followed-page,
.my-events-page, .newsletter-private,
.profile-page,
.badge-page) header .nav-center-link.nav-center-link-active::after {
transform: translateX(-50%) scaleX(1) !important;
}
body:is(
.landing-page,
.auth-page, .newsletter-public,
.home-page,
.explore-page,
.create-page,
.followed-page,
.my-events-page, .newsletter-private,
.profile-page,
.badge-page
) header #navbarProfileInitials {
display: inline-grid !important;
width: var(--ha-navbar-avatar, 3.25rem) !important;
height: var(--ha-navbar-avatar, 3.25rem) !important;
min-width: var(--ha-navbar-avatar, 3.25rem) !important;
min-height: var(--ha-navbar-avatar, 3.25rem) !important;
max-width: var(--ha-navbar-avatar, 3.25rem) !important;
max-height: var(--ha-navbar-avatar, 3.25rem) !important;
aspect-ratio: 1 / 1 !important;
flex: 0 0 var(--ha-navbar-avatar, 3.25rem) !important;
place-items: center !important;
overflow: hidden !important;
border-radius: 50% !important;
background: linear-gradient(135deg, #17BEBB, #FFC914) !important;
color: #231F20 !important;
font-size: 0.92rem !important;
font-weight: 900 !important;
line-height: 1 !important;
box-shadow: 0 10px 22px rgba(23, 190, 187, 0.18) !important;
}
body:is(
.landing-page,
.auth-page, .newsletter-public,
.home-page,
.explore-page,
.create-page,
.followed-page,
.my-events-page, .newsletter-private,
.profile-page,
.badge-page
) header .nav-center-link:hover,
body:is(
.landing-page,
.auth-page, .newsletter-public,
.home-page,
.explore-page,
.create-page,
.followed-page,
.my-events-page, .newsletter-private,
.profile-page,
.badge-page
) header .nav-center-link:focus-visible {
color: #17BEBB !important;
}
body.explore-page .explore-hero-section,
html[data-theme="dark"] body.explore-page .explore-hero-section {
background: transparent !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
body.explore-page .explore-hero-section::after,
html[data-theme="dark"] body.explore-page .explore-hero-section::after {
transform: scaleX(-1);
background:
linear-gradient(225deg, rgba(23, 20, 21, 0.86), rgba(23, 20, 21, 0.5) 48%, rgba(23, 20, 21, 0.82)),
url("../assets/Esplora_evento-1920.webp") center 65% / cover no-repeat !important;
}
@media (min-width: 768px) {
body.explore-page .explore-hero-section::after,
html[data-theme="dark"] body.explore-page .explore-hero-section::after {
background-image:
linear-gradient(225deg, rgba(23, 20, 21, 0.86), rgba(23, 20, 21, 0.5) 48%, rgba(23, 20, 21, 0.82)),
url("../assets/Esplora_evento-2880.webp") !important;
}
}
@media (max-width: 767px) {
body.explore-page .explore-hero-section::after,
html[data-theme="dark"] body.explore-page .explore-hero-section::after {
background-position: center, 30% bottom !important;
background-size: auto, auto max(calc(100% + 4rem), 66.5vw) !important;
}
}
body.explore-page::before,
html[data-theme="dark"] body.explore-page::before {
display: none !important;
background: none !important;
opacity: 0 !important;
}
body.explore-page .explore-hero-section::before,
html[data-theme="dark"] body.explore-page .explore-hero-section::before {
content: none !important;
display: none !important;
background: none !important;
opacity: 0 !important;
}
body.explore-page .explore-filter-search {
flex: none;
}
body.explore-page .explore-filter-search .explore-search-panel {
min-height: 2.35rem !important;
border-radius: 999px !important;
padding: 0.26rem 0.34rem 0.26rem 0.82rem !important;
box-shadow: none !important;
}
body.explore-page .explore-filter-search .explore-search-panel input,
html[data-theme="dark"] body.explore-page .explore-filter-search .explore-search-panel input {
min-height: 1.7rem !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
outline: none !important;
}
body:is(
.landing-page,
.auth-page, .newsletter-public,
.home-page,
.explore-page,
.create-page,
.followed-page,
.my-events-page, .newsletter-private,
.profile-page,
.badge-page
) header #navbarProfileInitials.hidden {
display: none !important;
}
body:is(
.landing-page,
.auth-page, .newsletter-public,
.home-page,
.explore-page,
.create-page,
.followed-page,
.my-events-page, .newsletter-private,
.profile-page,
.badge-page
) header :is(#profileBtn, .profile-nav-button):has(#navbarProfileInitials:not(.hidden)) {
border-color: transparent !important;
background: transparent !important;
background-image: none !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
body.home-page header #profileBtn:has(#navbarProfileInitials:not(.hidden)) {
padding-left: 0 !important;
padding-right: 0 !important;
}
body.home-page header #profileBtn:has(#navbarProfileInitials:not(.hidden)) #navbarProfileName {
display: none !important;
}
body:is(
.landing-page,
.auth-page, .newsletter-public,
.home-page,
.explore-page,
.create-page,
.followed-page,
.my-events-page, .newsletter-private,
.profile-page,
.badge-page
) header #navbarProfileInitials {
display: inline-grid !important;
width: 100% !important;
height: 100% !important;
min-width: var(--ha-navbar-avatar, 3.25rem) !important;
min-height: var(--ha-navbar-avatar, 3.25rem) !important;
place-items: center !important;
border-radius: 999px !important;
background: linear-gradient(135deg, #17BEBB, #FFC914) !important;
color: #231F20 !important;
font-size: 0.92rem !important;
font-weight: 900 !important;
line-height: 1 !important;
box-shadow: 0 10px 22px rgba(23, 190, 187, 0.18) !important;
}
body:is(
.landing-page,
.auth-page, .newsletter-public,
.home-page,
.explore-page,
.create-page,
.followed-page,
.my-events-page, .newsletter-private,
.profile-page,
.badge-page
) header #navbarProfileInitials.hidden {
display: none !important;
}
body:is(.landing-page,
.auth-page, .newsletter-public,
.home-page,
.explore-page,
.create-page,
.followed-page,
.my-events-page, .newsletter-private,
.profile-page,
.badge-page) header .nav-center-link::after {
content: '' !important;
position: absolute !important;
left: 50% !important;
bottom: -0.18rem !important;
display: block !important;
width: 100% !important;
height: 0.18rem !important;
border: 0 !important;
border-radius: 999px !important;
background: linear-gradient(90deg, #17BEBB, #FFC914) !important;
box-shadow: none !important;
transform: translateX(-50%) scaleX(0) !important;
transform-origin: center !important;
transition: transform 0.25s ease !important;
}
body:is(.landing-page,
.auth-page, .newsletter-public,
.home-page,
.explore-page,
.create-page,
.followed-page,
.my-events-page, .newsletter-private,
.profile-page,
.badge-page) header .nav-center-link:hover::after,
body:is(.landing-page,
.auth-page, .newsletter-public,
.home-page,
.explore-page,
.create-page,
.followed-page,
.my-events-page, .newsletter-private,
.profile-page,
.badge-page) header .nav-center-link:focus-visible::after,
body:is(.landing-page,
.auth-page, .newsletter-public,
.home-page,
.explore-page,
.create-page,
.followed-page,
.my-events-page, .newsletter-private,
.profile-page,
.badge-page) header .nav-center-link.nav-center-link-active::after {
transform: translateX(-50%) scaleX(1) !important;
}
body:is(.landing-page,
.auth-page, .newsletter-public,
.home-page,
.explore-page,
.create-page,
.followed-page,
.my-events-page, .newsletter-private,
.profile-page,
.badge-page) header .nav-center-link.nav-center-link-active::after {
content: '' !important;
position: absolute !important;
left: 50% !important;
bottom: -0.18rem !important;
display: block !important;
width: 100% !important;
height: 0.18rem !important;
border: 0 !important;
border-radius: 999px !important;
background: linear-gradient(90deg, #17BEBB, #FFC914) !important;
box-shadow: none !important;
transform: translateX(-50%) scaleX(1) !important;
transform-origin: center !important;
}
body.home-page.visual-hero-page header:not(.nav-over-surface) :is(#profileBtn,
.profile-nav-button,
#menu-btn) {
border-color: rgba(255, 255, 255, 0.16) !important;
background: rgba(23, 20, 21, 0.18) !important;
color: #FFFFFF !important;
box-shadow: none !important;
backdrop-filter: blur(4px) saturate(1.02) !important;
-webkit-backdrop-filter: blur(4px) saturate(1.02) !important;
}
body.home-page .nav-center-link::after {
display: none !important;
background: transparent !important;
box-shadow: none !important;
}
body.home-page .nav-center-link::after {
content: '' !important;
position: absolute !important;
left: 50% !important;
bottom: -0.18rem !important;
display: block !important;
width: 100% !important;
height: 0.18rem !important;
border: 0 !important;
border-radius: 999px !important;
background: linear-gradient(90deg, #17BEBB, #FFC914) !important;
box-shadow: none !important;
transform: translateX(-50%) scaleX(0) !important;
transform-origin: center !important;
transition: transform 0.25s ease !important;
}
body.home-page .nav-center-link:hover::after,
body.home-page .nav-center-link:focus-visible::after {
transform: translateX(-50%) scaleX(1) !important;
}
body.home-page .nav-center-link-active::after {
transform: translateX(-50%) scaleX(0) !important;
}
body.home-page .nav-center-link-active:hover::after,
body.home-page .nav-center-link-active:focus-visible::after {
transform: translateX(-50%) scaleX(1) !important;
}
:root {
--ha-navbar-logo: 3.5rem;
--ha-navbar-avatar: 3.25rem;
}
body:is(
.landing-page,
.auth-page, .newsletter-public,
.home-page,
.explore-page,
.create-page,
.followed-page,
.my-events-page, .newsletter-private,
.profile-page,
.badge-page
) header img[alt="Logo HangingAround"] {
height: var(--ha-navbar-logo) !important;
max-height: var(--ha-navbar-logo) !important;
width: auto !important;
object-fit: contain !important;
}
body:is(
.home-page,
.explore-page,
.create-page,
.followed-page,
.my-events-page, .newsletter-private,
.profile-page,
.badge-page
) header :is(#profileBtn, .profile-nav-button) {
min-height: var(--ha-navbar-avatar) !important;
height: var(--ha-navbar-avatar) !important;
}
body:is(
.explore-page,
.create-page,
.followed-page,
.my-events-page, .newsletter-private,
.profile-page,
.badge-page
) header :is(#profileBtn, .profile-nav-button) {
width: var(--ha-navbar-avatar) !important;
min-width: var(--ha-navbar-avatar) !important;
padding: 0 !important;
}
body.home-page header #profileBtn {
width: auto !important;
min-width: 0 !important;
padding-left: 0.75rem !important;
padding-right: 0.9rem !important;
}
body.home-page header #profileBtn > div:first-child {
width: var(--ha-navbar-avatar) !important;
height: var(--ha-navbar-avatar) !important;
flex: 0 0 var(--ha-navbar-avatar) !important;
}
body:is(
.home-page,
.explore-page,
.create-page,
.followed-page,
.my-events-page, .newsletter-private,
.profile-page,
.badge-page
) header :is(#navbarProfileImage, .profile-nav-image) {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
body.landing-page.visual-hero-page header:not(.nav-over-surface),
html[data-theme="dark"] body.landing-page.visual-hero-page header:not(.nav-over-surface) {
background: transparent !important;
border-color: transparent !important;
border-bottom-color: transparent !important;
box-shadow: none !important;
backdrop-filter: blur(4px) saturate(1.02) !important;
-webkit-backdrop-filter: blur(4px) saturate(1.02) !important;
}
body.landing-page.visual-hero-page header.nav-over-surface,
html[data-theme="dark"] body.landing-page.visual-hero-page header.nav-over-surface {
background: rgba(35, 31, 32, 0.88) !important;
border-color: transparent !important;
border-bottom-color: transparent !important;
box-shadow: none !important;
backdrop-filter: blur(8px) saturate(1.05) !important;
-webkit-backdrop-filter: blur(8px) saturate(1.05) !important;
}
body.landing-page header nav > div:first-child ul {
gap: 2.5rem !important;
}
@media (min-width: 1280px) {
body.landing-page header nav > div:first-child ul {
gap: 3.5rem !important;
}
}
body.landing-page.visual-hero-page header:not(.nav-over-surface) :is(.nav-center-link,
.nav-register-link,
#menu-btn) {
color: rgba(255, 255, 255, 0.9) !important;
text-shadow: 0 1px 12px rgba(0, 0, 0, 0.28) !important;
}
body.landing-page header::before,
body.landing-page header::after,
body.landing-page header > nav::before,
body.landing-page header > nav::after,
body.landing-page header nav::before,
body.landing-page header nav::after {
display: none !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
body.landing-page .nav-center-link::after {
content: '' !important;
position: absolute !important;
left: 50% !important;
bottom: -0.18rem !important;
display: block !important;
width: 100% !important;
height: 0.18rem !important;
border: 0 !important;
border-radius: 999px !important;
background: linear-gradient(90deg, #17BEBB, #FFC914) !important;
box-shadow: none !important;
transform: translateX(-50%) scaleX(0) !important;
transform-origin: center !important;
transition: transform 0.25s ease !important;
}
body.landing-page .nav-center-link:hover::after,
body.landing-page .nav-center-link:focus-visible::after {
transform: translateX(-50%) scaleX(1) !important;
}
body:is(.landing-page,
.auth-page, .newsletter-public,
.home-page,
.explore-page,
.create-page,
.followed-page,
.my-events-page, .newsletter-private,
.profile-page,
.badge-page) header .nav-center-link.nav-center-link-active::after {
content: '' !important;
position: absolute !important;
left: 50% !important;
bottom: -0.18rem !important;
display: block !important;
width: 100% !important;
height: 0.18rem !important;
border: 0 !important;
border-radius: 999px !important;
background: linear-gradient(90deg, #17BEBB, #FFC914) !important;
box-shadow: none !important;
transform: translateX(-50%) scaleX(1) !important;
transform-origin: center !important;
}
body:is(.landing-page,
.auth-page, .newsletter-public,
.home-page,
.explore-page,
.create-page,
.followed-page,
.my-events-page, .newsletter-private,
.profile-page,
.badge-page) header .nav-center-link::after {
content: '' !important;
position: absolute !important;
left: 50% !important;
bottom: -0.18rem !important;
display: block !important;
width: 100% !important;
height: 0.18rem !important;
border: 0 !important;
border-radius: 999px !important;
background: linear-gradient(90deg, #17BEBB, #FFC914) !important;
box-shadow: none !important;
transform: translateX(-50%) scaleX(0) !important;
transform-origin: center !important;
transition: transform 0.25s ease !important;
}
body:is(.landing-page,
.auth-page, .newsletter-public,
.home-page,
.explore-page,
.create-page,
.followed-page,
.my-events-page, .newsletter-private,
.profile-page,
.badge-page) header .nav-center-link:hover::after,
body:is(.landing-page,
.auth-page, .newsletter-public,
.home-page,
.explore-page,
.create-page,
.followed-page,
.my-events-page, .newsletter-private,
.profile-page,
.badge-page) header .nav-center-link:focus-visible::after,
body:is(.landing-page,
.auth-page, .newsletter-public,
.home-page,
.explore-page,
.create-page,
.followed-page,
.my-events-page, .newsletter-private,
.profile-page,
.badge-page) header .nav-center-link.nav-center-link-active::after {
transform: translateX(-50%) scaleX(1) !important;
}
body:is(
.landing-page,
.auth-page, .newsletter-public,
.home-page,
.explore-page,
.create-page,
.followed-page,
.my-events-page, .newsletter-private,
.profile-page,
.badge-page
) header #navbarProfileInitials {
display: inline-grid !important;
width: 100% !important;
height: 100% !important;
min-width: var(--ha-navbar-avatar, 3.25rem) !important;
min-height: var(--ha-navbar-avatar, 3.25rem) !important;
place-items: center !important;
border-radius: 999px !important;
background: linear-gradient(135deg, #17BEBB, #FFC914) !important;
color: #231F20 !important;
font-size: 0.92rem !important;
font-weight: 900 !important;
line-height: 1 !important;
box-shadow: 0 10px 22px rgba(23, 190, 187, 0.18) !important;
}
body header #profileMenu > .profile-menu-link {
display: flex !important;
align-items: center !important;
width: 100% !important;
min-height: 2.58rem !important;
border-radius: 0.74rem !important;
padding: 0 0.9rem !important;
background: transparent !important;
border-color: transparent !important;
box-shadow: none !important;
color: inherit !important;
margin: 0 !important;
line-height: 1.2 !important;
text-align: left !important;
}
body header #profileMenu > .profile-menu-link:hover,
body header #profileMenu > .profile-menu-link:focus-visible {
background:
linear-gradient(135deg, rgba(23, 190, 187, 0.16), rgba(255, 201, 20, 0.06)),
rgba(23, 190, 187, 0.1) !important;
color: #17BEBB !important;
}
body header #profileMenu > .profile-menu-link + .profile-menu-link {
margin-top: 0.18rem !important;
}
body:is(
.landing-page,
.auth-page, .newsletter-public,
.home-page,
.explore-page,
.create-page,
.followed-page,
.my-events-page, .newsletter-private,
.profile-page,
.badge-page
) header .nav-center-link {
font-size: 1rem !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
line-height: 1.5 !important;
}
body:is(
.landing-page,
.auth-page, .newsletter-public,
.home-page,
.explore-page,
.create-page,
.followed-page,
.my-events-page, .newsletter-private,
.profile-page,
.badge-page
) header #navbarProfileInitials.hidden {
display: none !important;
}
body:is(
.landing-page,
.auth-page, .newsletter-public,
.home-page,
.explore-page,
.create-page,
.followed-page,
.my-events-page, .newsletter-private,
.profile-page,
.badge-page
) header :is(#profileBtn, .profile-nav-button):has(#navbarProfileInitials:not(.hidden)) {
border-color: transparent !important;
background: transparent !important;
background-image: none !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
body.home-page header #profileBtn:has(#navbarProfileInitials:not(.hidden)) {
padding-left: 0 !important;
padding-right: 0 !important;
}
body.home-page header #profileBtn:has(#navbarProfileInitials:not(.hidden)) #navbarProfileName {
display: none !important;
}
body:is(
.landing-page,
.auth-page, .newsletter-public,
.home-page,
.explore-page,
.create-page,
.followed-page,
.my-events-page, .newsletter-private,
.profile-page,
.badge-page
) header #navbarProfileInitials {
display: inline-grid !important;
width: var(--ha-navbar-avatar, 3.25rem) !important;
height: var(--ha-navbar-avatar, 3.25rem) !important;
min-width: var(--ha-navbar-avatar, 3.25rem) !important;
min-height: var(--ha-navbar-avatar, 3.25rem) !important;
max-width: var(--ha-navbar-avatar, 3.25rem) !important;
max-height: var(--ha-navbar-avatar, 3.25rem) !important;
aspect-ratio: 1 / 1 !important;
flex: 0 0 var(--ha-navbar-avatar, 3.25rem) !important;
place-items: center !important;
overflow: hidden !important;
border-radius: 50% !important;
background: linear-gradient(135deg, #17BEBB, #FFC914) !important;
color: #231F20 !important;
font-size: 0.92rem !important;
font-weight: 900 !important;
line-height: 1 !important;
box-shadow: 0 10px 22px rgba(23, 190, 187, 0.18) !important;
}
body:is(.my-events-page,
.followed-page)::before,
html[data-theme="dark"] body:is(.my-events-page,
.followed-page)::before,
body:is(.my-events-page,
.followed-page) :is(.my-events-hero,
.followed-hero)::before,
html[data-theme="dark"] body:is(.my-events-page,
.followed-page) :is(.my-events-hero,
.followed-hero)::before {
content: none !important;
display: none !important;
background: none !important;
opacity: 0 !important;
filter: none !important;
}
body.my-events-page .my-events-hero,
html[data-theme="dark"] body.my-events-page .my-events-hero {
background: transparent !important;
}
body.my-events-page .my-events-hero::after,
html[data-theme="dark"] body.my-events-page .my-events-hero::after {
background:
linear-gradient(90deg, rgba(23, 20, 21, 0.65), rgba(23, 20, 21, 0.2) 75%),
url("../assets/i_tuoi_eventi-1920.webp") center 65% / cover no-repeat !important;
}
@media (min-width: 768px) {
body.my-events-page .my-events-hero::after,
html[data-theme="dark"] body.my-events-page .my-events-hero::after {
background-image:
linear-gradient(90deg, rgba(23, 20, 21, 0.65), rgba(23, 20, 21, 0.2) 75%),
url("../assets/i_tuoi_eventi-2880.webp") !important;
}
}
body.my-events-page .my-events-hero::before,
html[data-theme="dark"] body.my-events-page .my-events-hero::before {
content: none !important;
display: none !important;
}
body.my-events-page .my-events-hero h1,
body.my-events-page .my-events-hero .my-events-title-main,
html[data-theme="dark"] body.my-events-page .my-events-hero .my-events-title-main {
color: #FFFFFF !important;
text-shadow: 0 2px 18px rgba(0, 0, 0, 0.42);
}
body.my-events-page .my-events-hero .my-events-title-accent,
html[data-theme="dark"] body.my-events-page .my-events-hero .my-events-title-accent {
color: #FFC914 !important;
text-shadow: 0 2px 18px rgba(0, 0, 0, 0.42);
}
body.my-events-page .my-events-hero p,
body.my-events-page .my-events-hero .my-events-hero-copy,
body.my-events-page .my-events-hero #my-events-hero-copy,
html[data-theme="dark"] body.my-events-page .my-events-hero p,
html[data-theme="dark"] body.my-events-page .my-events-hero .my-events-hero-copy,
html[data-theme="dark"] body.my-events-page .my-events-hero #my-events-hero-copy,
body.my-events-page .my-events-hero .my-events-kicker,
html[data-theme="dark"] body.my-events-page .my-events-hero .my-events-kicker {
color: #FFFFFF !important;
text-shadow: 0 2px 14px rgba(0, 0, 0, 0.46);
}
body.my-events-page .my-events-hero .mb-4 > .h-px,
body.my-events-page .my-events-hero .my-events-kicker-line,
html[data-theme="dark"] body.my-events-page .my-events-hero .mb-4 > .h-px,
html[data-theme="dark"] body.my-events-page .my-events-hero .my-events-kicker-line {
background: #FFFFFF !important;
opacity: 1 !important;
}
#my-events-hero-copy,
html[data-theme="dark"] #my-events-hero-copy {
color: #FFFFFF !important;
-webkit-text-fill-color: #FFFFFF !important;
text-shadow: 0 2px 14px rgba(0, 0, 0, 0.46) !important;
}
body.my-events-page .my-events-hero > div > #my-events-hero-copy,
html[data-theme="dark"] body.my-events-page .my-events-hero > div > #my-events-hero-copy {
color: #FFFFFF !important;
-webkit-text-fill-color: #FFFFFF !important;
opacity: 1 !important;
}
body.followed-page .followed-hero,
html[data-theme="dark"] body.followed-page .followed-hero {
background: linear-gradient(135deg, #162222, #231f20) !important;
}
body.followed-page .followed-hero::before,
html[data-theme="dark"] body.followed-page .followed-hero::before {
content: '' !important;
position: absolute !important;
inset: -2px !important;
z-index: -1 !important;
display: block !important;
background:
linear-gradient(rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0.32)),
url("../assets/i_tuoi_seguiti-1920.webp") center 52% / cover no-repeat !important;
opacity: 1 !important;
filter: none !important;
transform: scaleX(-1) !important;
}
@media (min-width: 1024px) {
body.followed-page .followed-hero::before,
html[data-theme="dark"] body.followed-page .followed-hero::before {
background-position: center, center calc(52% + 40px) !important;
}
}
@media (min-width: 768px) {
body.followed-page .followed-hero::before,
html[data-theme="dark"] body.followed-page .followed-hero::before {
background-image:
linear-gradient(rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0.32)),
url("../assets/i_tuoi_seguiti-2880.webp") !important;
}
}
body.followed-page .followed-hero h1,
body.followed-page .followed-hero p,
body.followed-page .followed-hero .followed-kicker,
html[data-theme="dark"] body.followed-page .followed-hero h1,
html[data-theme="dark"] body.followed-page .followed-hero p,
html[data-theme="dark"] body.followed-page .followed-hero .followed-kicker {
color: #FFFFFF !important;
-webkit-text-fill-color: #FFFFFF !important;
text-shadow: 0 2px 14px rgba(0, 0, 0, 0.46) !important;
}
body.followed-page .followed-hero .mb-4 > .h-px,
html[data-theme="dark"] body.followed-page .followed-hero .mb-4 > .h-px {
background: #FFFFFF !important;
opacity: 1 !important;
}
body.home-page .home-action-layout {
max-width: min(100%, 72rem);
margin-inline: auto;
justify-content: center;
gap: clamp(2rem, 5vw, 4rem);
}
body.home-page .home-action-card {
display: flex;
min-height: clamp(12.5rem, 15.5vw, 15.25rem);
flex-direction: column;
justify-content: flex-end;
padding: clamp(1.15rem, 2.2vw, 1.8rem) !important;
background: rgba(35, 31, 32, 0.72) !important;
overflow: hidden;
transition: box-shadow 0.32s ease, transform 0.32s ease;
}
body.home-page .home-action-card::before {
content: '' !important;
position: absolute !important;
inset: -10px !important;
z-index: 0 !important;
display: block !important;
border-radius: inherit;
opacity: 1 !important;
filter: blur(1.2px) saturate(1.02) contrast(1.02);
transform: translate3d(0, 0, 0) scale(1.05);
transition: filter 0.42s ease, transform 0.42s ease;
}
body.home-page .home-action-card-create::before {
background:
linear-gradient(180deg, rgba(0, 0, 0, 0.34), rgba(0, 0, 0, 0.64)),
url("../assets/card_.esplora_evento.webp?v=20260717-img-v3") center / cover no-repeat !important;
}
body.home-page .home-action-card-explore::before {
background:
radial-gradient(circle at 18% 82%, rgba(0, 0, 0, 0.58), transparent 58%),
linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.56) 58%, rgba(0, 0, 0, 0.72) 100%),
url("../assets/card_ituoi_eventi.webp?v=20260717-img-v3") 42% 38% / cover no-repeat !important;
}
body.home-page .home-action-card::after {
content: '' !important;
position: absolute !important;
inset: 0 !important;
z-index: 1 !important;
display: block !important;
border-radius: inherit;
pointer-events: none;
background:
linear-gradient(112deg,
transparent 0%,
transparent 30%,
rgba(255, 255, 255, 0.1) 40%,
rgba(255, 255, 255, 0.34) 48%,
rgba(255, 255, 255, 0.12) 56%,
transparent 70%,
transparent 100%);
opacity: 0;
transform: translateX(-135%) skewX(-10deg);
}
body.home-page .home-action-card:hover::before,
body.home-page .home-action-card:focus-within::before {
filter: blur(3.2px) saturate(1.12) contrast(1.05);
transform: translate3d(-2%, -1.4%, 0) scale(1.14);
}
body.home-page .home-action-card:hover::after,
body.home-page .home-action-card:focus-within::after {
opacity: 1;
animation: homeActionCardShine 0.95s ease both;
}
body.home-page .home-action-card:hover,
body.home-page .home-action-card:focus-within {
transform: translateY(-5px) scale(1.025);
box-shadow: 0 24px 52px rgba(0, 0, 0, 0.32);
}
body.home-page .home-action-card > * {
position: relative;
z-index: 2;
}
body.home-page .home-action-card h2,
body.home-page .home-action-card p {
text-shadow: 0 3px 18px rgba(0, 0, 0, 0.72);
}
body.home-page .home-action-card p {
color: rgba(255, 255, 255, 0.82) !important;
}
body.home-page .home-action-card-explore h2 {
color: #E4572E !important;
text-shadow:
0 3px 14px rgba(0, 0, 0, 0.82),
0 0 22px rgba(228, 87, 46, 0.2);
}
body.home-page .home-action-card-explore p {
color: #FFFFFF !important;
text-shadow: 0 3px 14px rgba(0, 0, 0, 0.92);
}
body.home-page .home-action-card-explore > a::after {
content: none !important;
}
body.home-page .home-action-card-explore > a::before {
content: '<-';
font-size: 0.84em;
font-weight: 900;
transform: translateX(0);
transition: transform 0.22s ease;
}
body.home-page .home-action-card-explore > a:hover::before,
body.home-page .home-action-card-explore > a:focus-visible::before {
transform: translateX(-0.18rem);
}
@media (min-width: 900px) {
body.home-page .home-action-layout {
grid-template-columns: minmax(0, 29rem) clamp(5.5rem, 8vw, 8rem) minmax(0, 29rem) !important;
gap: clamp(1.75rem, 3vw, 2.75rem) !important;
}
}
body.home-page .home-walker-scene {
position: relative;
display: none !important;
}
@media (min-width: 900px) {
body.home-page .home-walker-scene {
display: grid !important;
min-height: clamp(12.5rem, 15.5vw, 15.25rem);
align-self: stretch;
place-items: center;
overflow: visible;
padding: 0 !important;
}
body.home-page .home-walker-scene::before {
content: '';
position: absolute;
inset: 50% -0.35rem auto;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(23, 190, 187, 0.72), rgba(255, 201, 20, 0.82), rgba(228, 87, 46, 0.72), transparent);
background-size: 220% 100%;
box-shadow: 0 0 18px rgba(255, 201, 20, 0.34);
transform: translateY(-50%);
animation: homeConnectorFlow 3.4s ease-in-out infinite;
}
body.home-page .home-walker-scene::after {
display: none !important;
}
body.home-page .home-walker-floor {
position: absolute;
top: 50% !important;
right: 0 !important;
left: 0 !important;
bottom: auto !important;
width: 100% !important;
height: 0.22rem;
border-radius: 999px;
background: linear-gradient(90deg, rgba(23, 190, 187, 0.24), rgba(23, 190, 187, 0.78), rgba(255, 201, 20, 0.94), rgba(228, 87, 46, 0.82), rgba(228, 87, 46, 0.24));
background-size: 220% 100%;
box-shadow: 0 0 22px rgba(255, 201, 20, 0.2);
transform: translateY(-50%);
animation: homeConnectorFlow 3.4s ease-in-out infinite;
}
body.home-page .home-walker-floor::before,
body.home-page .home-walker-floor::after {
content: '';
position: absolute;
top: 50%;
width: 1.15rem;
aspect-ratio: 1;
border-radius: 999px;
border: 2px solid rgba(255, 255, 255, 0.72);
background:
radial-gradient(circle, currentColor 0 32%, transparent 34%),
rgba(35, 31, 32, 0.82);
box-shadow:
0 0 0 0.36rem rgba(255, 255, 255, 0.04),
0 0 18px currentColor;
transform: translateY(-50%);
animation: homeConnectorPulse 1.8s ease-in-out infinite;
}
body.home-page .home-walker-floor::before {
left: -0.28rem !important;
right: auto !important;
color: #17BEBB;
}
body.home-page .home-walker-floor::after {
right: -0.28rem !important;
left: auto !important;
color: #E4572E;
animation-delay: 0.3s;
}
body.home-page .home-walker-hesitation {
display: none !important;
}
body.home-page .home-walker {
display: none !important;
}
body.home-page .home-walker span {
display: none !important;
}
}
@media (max-width: 767px) {
body.home-page .home-action-layout {
max-width: 100%;
gap: 1.5rem;
}
body.home-page .home-action-card {
min-height: 12rem;
}
}
@keyframes homeActionCardShine {
from {
transform: translateX(-135%) skewX(-10deg);
}
to {
transform: translateX(135%) skewX(-10deg);
}
}
@keyframes homeConnectorPulse {
50% {
transform: translateY(-50%) scale(1.35);
opacity: 0.72;
}
}
@media (prefers-reduced-motion: reduce) {
body.home-page .home-walker-scene::after,
body.home-page .home-walker-floor::before,
body.home-page .home-walker-floor::after,
body.home-page .home-walker-hesitation,
body.home-page .home-walker {
animation: none !important;
}
}
@media (min-width: 900px) {
body.home-page .home-walker-floor::before,
body.home-page .home-walker-floor::after {
content: '' !important;
display: block !important;
position: absolute !important;
top: 50% !important;
width: 1.22rem !important;
height: 1.22rem !important;
border-radius: 999px !important;
border: 2px solid rgba(255, 255, 255, 0.74) !important;
z-index: 3 !important;
}
body.home-page .home-walker-floor::before {
left: 0 !important;
right: auto !important;
color: #76B041 !important;
background:
radial-gradient(circle, #76B041 0 35%, transparent 37%),
rgba(20, 31, 24, 0.9) !important;
box-shadow:
0 0 0 0.38rem rgba(118, 176, 65, 0.12),
0 0 20px rgba(118, 176, 65, 0.72) !important;
transform: translate(-50%, -50%);
animation: homeConnectorAnchorLeft 2.4s ease-in-out infinite !important;
}
body.home-page .home-walker-floor::after {
right: 0 !important;
left: auto !important;
color: #E4572E !important;
background:
radial-gradient(circle, #E4572E 0 35%, transparent 37%),
rgba(38, 22, 20, 0.9) !important;
box-shadow:
0 0 0 0.38rem rgba(228, 87, 46, 0.12),
0 0 20px rgba(228, 87, 46, 0.72) !important;
transform: translate(50%, -50%);
animation: homeConnectorAnchorRight 2.4s ease-in-out 0.3s infinite !important;
}
}
@keyframes homeConnectorFlow {
0%,
100% {
background-position: 0% 50%;
box-shadow: 0 0 18px rgba(23, 190, 187, 0.18);
}
50% {
background-position: 100% 50%;
box-shadow: 0 0 28px rgba(255, 201, 20, 0.34);
}
}
@keyframes homeConnectorAnchorLeft {
0%,
100% {
transform: translate(-50%, -50%) scale(1);
filter: saturate(1);
}
50% {
transform: translate(-50%, -50%) scale(1.16);
filter: saturate(1.18);
}
}
@keyframes homeConnectorAnchorRight {
0%,
100% {
transform: translate(50%, -50%) scale(1);
filter: saturate(1);
}
50% {
transform: translate(50%, -50%) scale(1.16);
filter: saturate(1.18);
}
}
@media (prefers-reduced-motion: reduce) {
body.home-page .home-walker-scene::before,
body.home-page .home-walker-floor,
body.home-page .home-walker-floor::before,
body.home-page .home-walker-floor::after {
animation: none !important;
}
body.home-page .home-walker-floor::before {
transform: translate(-50%, -50%);
}
body.home-page .home-walker-floor::after {
transform: translate(50%, -50%);
}
}
body.followed-page .followed-filters {
align-items: flex-start;
}
body.followed-page .followed-pill-row {
align-items: flex-start;
align-content: flex-start;
}
body.followed-page .followed-filter,
html[data-theme="dark"] body.followed-page .followed-filter,
body.followed-page .followed-pill,
html[data-theme="dark"] body.followed-page .followed-pill {
display: inline-flex !important;
flex: 0 0 auto;
align-self: flex-start;
align-items: center;
justify-content: center;
width: auto !important;
min-width: 0 !important;
height: auto !important;
max-height: 2.25rem !important;
min-height: 0 !important;
padding: 0.55rem 0.95rem !important;
border-radius: 999px !important;
white-space: nowrap;
line-height: 1 !important;
}
body.followed-page .followed-filter,
html[data-theme="dark"] body.followed-page .followed-filter {
min-height: 2.25rem !important;
}
body.followed-page header {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
body.followed-page :is(
.followed-stats article,
.followed-person-row,
.followed-list-card,
.followed-empty
) {
contain: layout paint;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18) !important;
}
body.followed-page :is(.followed-section, .followed-browser, .followed-list, .followed-grid) {
content-visibility: auto;
contain-intrinsic-block-size: auto 28rem;
}
body.followed-page .followed-events-btn {
justify-self: start;
width: auto !important;
min-height: 2.35rem !important;
padding: 0.55rem 0.95rem !important;
border-radius: 999px !important;
}
body.followed-page .followed-browser {
grid-template-columns: 1fr !important;
gap: 1rem !important;
}
body.followed-page .followed-grid {
grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)) !important;
gap: 0.9rem !important;
}
body.followed-page .followed-grid .followed-person-row {
align-items: flex-start;
min-height: 0;
cursor: default;
padding: 0.8rem !important;
}
body.followed-page .followed-grid .followed-person-row > div:nth-child(2) {
display: grid;
gap: 0.25rem;
}
body.followed-page .followed-grid .followed-person-row h3 {
font-size: 1.05rem;
line-height: 1.35;
overflow-wrap: anywhere;
}
body.followed-page .followed-grid .followed-avatar-small {
width: 2.65rem;
height: 2.65rem;
}
body.followed-page .followed-person-tags {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
margin-top: 0.15rem;
}
body.followed-page .followed-person-tag {
display: inline-flex;
align-items: center;
gap: 0.32rem;
min-height: 1.65rem;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 999px;
padding: 0.28rem 0.55rem;
color: rgba(255, 255, 255, 0.66);
font-size: 0.72rem;
font-weight: 800;
line-height: 1;
}
body.followed-page .followed-interest-icon {
width: 0.86rem;
height: 0.86rem;
flex: 0 0 auto;
}
body.followed-page .followed-person-tag-outdoor { color: #9DDB6F; border-color: rgba(118, 176, 65, 0.28); background: rgba(118, 176, 65, 0.1); }
body.followed-page .followed-person-tag-sport { color: #17BEBB; border-color: rgba(23, 190, 187, 0.28); background: rgba(23, 190, 187, 0.1); }
body.followed-page .followed-person-tag-musica { color: #FFC914; border-color: rgba(255, 201, 20, 0.28); background: rgba(255, 201, 20, 0.1); }
body.followed-page .followed-person-tag-food { color: #FF8A65; border-color: rgba(228, 87, 46, 0.28); background: rgba(228, 87, 46, 0.1); }
body.followed-page .followed-person-tag-sociale,
body.followed-page .followed-person-tag-talk,
body.followed-page .followed-person-tag-benessere,
body.followed-page .followed-person-tag-wellness { color: #7AD9D7; border-color: rgba(23, 190, 187, 0.24); background: rgba(23, 190, 187, 0.08); }
body.followed-page .followed-person-tag-escursionismo,
body.followed-page .followed-person-tag-natura,
body.followed-page .followed-person-tag-animali { color: #9DDB6F; border-color: rgba(118, 176, 65, 0.28); background: rgba(118, 176, 65, 0.1); }
body.followed-page .followed-person-tag-cibocucina { color: #FF8A65; border-color: rgba(228, 87, 46, 0.28); background: rgba(228, 87, 46, 0.1); }
body.followed-page .followed-person-tag-fotografia,
body.followed-page .followed-person-tag-arte,
body.followed-page .followed-person-tag-cinema { color: #BFC7FF; border-color: rgba(191, 199, 255, 0.24); background: rgba(191, 199, 255, 0.08); }
body.followed-page .followed-person-tag-tecnologia,
body.followed-page .followed-person-tag-gaming { color: #D4B8FF; border-color: rgba(212, 184, 255, 0.24); background: rgba(212, 184, 255, 0.08); }
body.followed-page .followed-person-tag-viaggi,
body.followed-page .followed-person-tag-tech,
body.followed-page .followed-person-tag-giochi { color: rgba(255, 255, 255, 0.78); border-color: rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.055); }
body.followed-page .followed-section {
margin-top: clamp(2.25rem, 5vw, 4rem);
}
body.followed-page .followed-section + .followed-section {
margin-top: clamp(2rem, 4vw, 3rem);
}
body.followed-page .followed-section-primary {
margin-top: clamp(1.75rem, 3.5vw, 2.75rem);
}
body.followed-page .followed-section-discover {
margin-top: clamp(2rem, 4vw, 3.25rem);
}
body.followed-page .followed-discover-summary {
margin-bottom: 1rem;
}
body.followed-page .followed-discover-summary .followed-stats {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.65rem;
margin-bottom: 0;
}
body.followed-page .followed-discover-summary .followed-stats article {
display: flex;
min-height: 0;
align-items: center;
gap: 0.7rem;
padding: 0.8rem 0.9rem;
border-radius: 0.95rem;
}
body.followed-page .followed-discover-summary .followed-stats span {
flex: 0 0 auto;
font-size: 1.35rem;
}
body.followed-page .followed-discover-summary .followed-stats p {
margin-top: 0;
font-size: 0.78rem;
line-height: 1.2;
}
body.followed-page .followed-list {
gap: 0.75rem;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
align-items: start;
}
body.followed-page .followed-list > .followed-empty {
grid-column: 1 / -1;
}
body.followed-page :is(.followed-list-card, .followed-notif-card) {
display: grid !important;
grid-template-columns: auto minmax(0, 1fr);
align-items: start !important;
gap: 0.5rem 0.65rem !important;
padding: 0.8rem !important;
border-radius: 1rem;
min-width: 0;
box-sizing: border-box;
height: auto;
min-height: 11.5rem;
grid-template-rows: auto auto minmax(2.75rem, 1fr);
}
body.followed-page .followed-list-card > div:nth-child(2) {
display: grid;
gap: 0.2rem;
}
body.followed-page .followed-list :is(h3, p) {
overflow-wrap: anywhere;
}
body.followed-page .followed-list h3 {
font-size: 1rem;
line-height: 1.35;
}
body.followed-page .followed-list p {
font-size: 0.8rem;
line-height: 1.4;
}
body.followed-page .followed-list .followed-avatar-small {
width: 2.65rem;
height: 2.65rem;
border-radius: 50%;
box-shadow: none;
}
body.followed-page .followed-list-card > .followed-person-tags {
grid-column: 1 / -1;
grid-row: 2;
align-content: start;
margin: 0;
}
body.followed-page .followed-list .followed-person-tag {
max-width: 100%;
min-width: 0;
}
body.followed-page .followed-list .followed-person-tag > span {
overflow-wrap: anywhere;
}
body.followed-page :is(.followed-list-actions, .followed-notif-actions) {
grid-column: 1 / -1;
grid-row: 3;
align-self: end;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
width: 100%;
}
body.followed-page .followed-list-actions > *,
body.followed-page .followed-notif-actions > * {
flex: 0 1 auto;
min-height: 2.75rem;
padding: 0.45rem 0.65rem;
font-size: 0.75rem;
border-radius: 0.7rem;
}
body.followed-page .followed-list-actions .followed-report {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 2.75rem;
margin-left: auto;
color: #E4572E;
border: 1px solid #E4572E;
}
body.followed-page .followed-report svg {
width: 1rem;
height: 1rem;
}
body.followed-page .followed-report:hover {
color: #E4572E;
background: rgba(228, 87, 46, 0.1);
}
body.followed-page .followed-pending-label {
color: #FFC914;
font-size: 0.75rem;
}
body.followed-page .followed-list button:focus-visible {
outline: 2px solid #17BEBB;
outline-offset: 3px;
}
@keyframes followedFadeUp {
from {
opacity: 0;
transform: translateY(14px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
body.followed-page .followed-search-bar,
body.followed-page .followed-filters,
body.followed-page .followed-section-heading,
body.followed-page .followed-discover-summary,
body.followed-page .followed-person-row,
body.followed-page .followed-list-card,
body.followed-page .followed-empty {
animation: followedFadeUp 0.42s ease both;
}
body.followed-page .followed-person-row:nth-child(2),
body.followed-page .followed-list-card:nth-child(2) { animation-delay: 0.04s; }
body.followed-page .followed-person-row:nth-child(3),
body.followed-page .followed-list-card:nth-child(3) { animation-delay: 0.08s; }
body.followed-page .followed-person-row:nth-child(4),
body.followed-page .followed-list-card:nth-child(4) { animation-delay: 0.12s; }
body.followed-page .followed-person-row:nth-child(n+5),
body.followed-page .followed-list-card:nth-child(n+5) { animation-delay: 0.16s; }
@media (prefers-reduced-motion: reduce) {
body.followed-page .followed-search-bar,
body.followed-page .followed-filters,
body.followed-page .followed-section-heading,
body.followed-page .followed-discover-summary,
body.followed-page .followed-person-row,
body.followed-page .followed-list-card,
body.followed-page .followed-empty {
animation: none !important;
}
}
@media (max-width: 719px) {
body.followed-page .followed-discover-summary .followed-stats {
grid-template-columns: 1fr;
}
}
body.register-page .auth-card .interest-tag {
border-color: rgba(255, 255, 255, 0.12) !important;
background: rgba(35, 31, 32, 0.62) !important;
color: rgba(255, 255, 255, 0.7) !important;
}
body.register-page .auth-card .interest-tag.is-selected {
color: var(--interest-color, #17BEBB) !important;
border-color: color-mix(in srgb, var(--interest-color, #17BEBB) 52%, transparent) !important;
background: color-mix(in srgb, var(--interest-color, #17BEBB) 16%, transparent) !important;
box-shadow: 0 0 0 1px color-mix(in srgb, var(--interest-color, #17BEBB) 18%, transparent) !important;
}
body.register-page .auth-card .interest-tag-musica { --interest-color: #FFC914; }
body.register-page .auth-card .interest-tag-sport,
body.register-page .auth-card .interest-tag-talk { --interest-color: #17BEBB; }
body.register-page .auth-card .interest-tag-food { --interest-color: #FF8A65; }
body.register-page .auth-card .interest-tag-outdoor,
body.register-page .auth-card .interest-tag-benessere { --interest-color: #9DDB6F; }
body.register-page .auth-card .interest-tag-arte { --interest-color: #BFC7FF; }
body.register-page .auth-card .interest-tag-tecnologia { --interest-color: #D4B8FF; }
body.explore-page #event-list .event-card {
flex: 0 0 auto !important;
height: auto !important;
padding: 0 !important;
overflow: hidden;
}
@media (min-width: 1024px) {
body.explore-page main {
padding-left: 0 !important;
padding-right: 0 !important;
}
body.explore-page main > div {
gap: 2rem !important;
}
body.explore-page main aside {
width: 38rem !important;
}
}
body:is(
.landing-page, .home-page, .explore-page, .create-page, .followed-page,
.my-events-page, .newsletter-private, .profile-page, .badge-page
) header :is(#profileBtn, .profile-nav-button) {
width: auto !important;
min-width: 0 !important;
height: auto !important;
min-height: 0 !important;
padding: 0 !important;
justify-content: center !important;
gap: 0.6rem !important;
border-radius: 999px !important;
border: 1px solid rgba(255, 255, 255, 0.12) !important;
background: transparent !important;
display: flex !important;
align-items: center !important;
white-space: nowrap !important;
}
body:is(
.landing-page, .home-page, .explore-page, .create-page, .followed-page,
.my-events-page, .newsletter-private, .profile-page, .badge-page
) header :is(#profileBtn, .profile-nav-button):hover {
border-color: #17BEBB !important;
background: rgba(255, 255, 255, 0.04) !important;
}
body:is(
.landing-page, .auth-page, .home-page, .explore-page, .create-page,
.followed-page, .my-events-page, .newsletter-private, .profile-page, .badge-page
) header :is(#profileBtn, .profile-nav-button):has(#navbarProfileInitials:not(.hidden)) {
border-color: rgba(255, 255, 255, 0.12) !important;
background: transparent !important;
box-shadow: none !important;
}
body:is(
.landing-page, .home-page, .explore-page, .create-page, .followed-page,
.my-events-page, .newsletter-private, .profile-page, .badge-page
) header :is(#profileBtn, .profile-nav-button) > .profile-nav-avatar,
body.home-page header #profileBtn > div:first-child {
width: 2.5rem !important;
height: 2.5rem !important;
min-width: 2.5rem !important;
min-height: 2.5rem !important;
max-width: 2.5rem !important;
max-height: 2.5rem !important;
flex: 0 0 2.5rem !important;
border-radius: 999px !important;
overflow: hidden !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: linear-gradient(135deg, #17BEBB, #FFC914) !important;
color: #231F20 !important;
}
body:is(
.landing-page, .home-page, .explore-page, .create-page, .followed-page,
.my-events-page, .newsletter-private, .profile-page, .badge-page
) header .profile-nav-avatar #navbarProfileInitials {
min-width: 0 !important;
min-height: 0 !important;
width: 100% !important;
height: 100% !important;
background: transparent !important;
box-shadow: none !important;
font-size: 0.8rem !important;
font-weight: 900 !important;
color: #231F20 !important;
}
body:is(
.landing-page, .home-page, .explore-page, .create-page, .followed-page,
.my-events-page, .newsletter-private, .profile-page, .badge-page
) header :is(#profileBtn, .profile-nav-button) #navbarProfileName {
display: none !important;
}
@media (min-width: 1024px) {
body:is(
.landing-page, .home-page, .explore-page, .create-page, .followed-page,
.my-events-page, .newsletter-private, .profile-page, .badge-page
) header :is(#profileBtn, .profile-nav-button) #navbarProfileName {
display: inline !important;
font-size: 1rem !important;
font-weight: 700 !important;
color: rgba(255, 255, 255, 0.88) !important;
max-width: 10rem !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
body.home-page header #profileBtn:has(#navbarProfileInitials:not(.hidden)) #navbarProfileName {
display: inline !important;
}
}
body:is(
.landing-page, .home-page, .explore-page, .create-page, .followed-page,
.my-events-page, .newsletter-private, .profile-page, .badge-page
) header .notif-bell {
position: relative;
display: inline-grid;
width: var(--ha-navbar-avatar, 3.25rem);
height: var(--ha-navbar-avatar, 3.25rem);
place-items: center;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 999px;
background: rgba(23, 20, 21, 0.46);
color: rgba(255, 255, 255, 0.82);
transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
body:is(
.landing-page, .home-page, .explore-page, .create-page, .followed-page,
.my-events-page, .newsletter-private, .profile-page, .badge-page
) header .notif-bell:hover,
body:is(
.landing-page, .home-page, .explore-page, .create-page, .followed-page,
.my-events-page, .newsletter-private, .profile-page, .badge-page
) header .notif-bell:focus-visible {
border-color: rgba(23, 190, 187, 0.42);
color: #17BEBB;
}
body:is(
.landing-page, .home-page, .explore-page, .create-page, .followed-page,
.my-events-page, .newsletter-private, .profile-page, .badge-page
) header .notif-badge {
position: absolute;
top: -0.15rem;
right: -0.15rem;
min-width: 1.15rem;
height: 1.15rem;
border-radius: 999px;
background: #E4572E;
color: #FFFFFF;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 0.32rem;
font-size: 0.68rem;
font-weight: 900;
line-height: 1;
}
body:is(
.landing-page, .home-page, .explore-page, .create-page, .followed-page,
.my-events-page, .newsletter-private, .profile-page, .badge-page
) header .notif-badge.hidden {
display: none !important;
}
body header #notifDropdown.is-open {
transform-origin: top right;
animation: ha-notification-menu-in 180ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes ha-notification-menu-in {
from {
opacity: 0;
transform: translateY(-0.35rem) scale(0.98);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@media (prefers-reduced-motion: reduce) {
body header #notifDropdown.is-open {
animation: none;
}
}
html[data-theme="dark"] body:is(.landing-page, .auth-page) header :is(
a:is([href="login.html"], [href="HTML/login.html"]):not([aria-label]):not(.nav-register-link),
a:is([href="index.html"], [href="../index.html"]):not([aria-label]):not(.nav-register-link)
) {
border-color: transparent !important;
background: linear-gradient(135deg, #FFC914, #17BEBB) !important;
color: #231F20 !important;
box-shadow: 0 12px 26px rgba(255, 201, 20, 0.16) !important;
text-shadow: none !important;
}
html[data-theme="dark"] body:is(.landing-page, .auth-page) header :is(
a:is([href="login.html"], [href="HTML/login.html"]):not([aria-label]):not(.nav-register-link),
a:is([href="index.html"], [href="../index.html"]):not([aria-label]):not(.nav-register-link)
):hover,
html[data-theme="dark"] body:is(.landing-page, .auth-page) header :is(
a:is([href="login.html"], [href="HTML/login.html"]):not([aria-label]):not(.nav-register-link),
a:is([href="index.html"], [href="../index.html"]):not([aria-label]):not(.nav-register-link)
):focus-visible {
background: linear-gradient(135deg, #FFC914, #17BEBB) !important;
color: #231F20 !important;
box-shadow: 0 16px 34px rgba(23, 190, 187, 0.2) !important;
}
@media (min-width: 1024px) {
body:is(
.landing-page, .home-page, .explore-page, .create-page, .followed-page,
.my-events-page, .newsletter-private, .profile-page, .badge-page
) header :is(#profileBtn, .profile-nav-button),
body.home-page header #profileBtn:has(#navbarProfileInitials:not(.hidden)) {
padding: 1px 0.9rem 1px 1px !important;
}
}
body:is(
.landing-page,
.auth-page,
.home-page,
.explore-page,
.create-page,
.followed-page,
.my-events-page, .newsletter-private,
.profile-page,
.badge-page,
.event-detail-page
) header #mobile-menu {
opacity: 0;
transform: translateY(-0.45rem) scale(0.985);
transform-origin: top center;
transition: opacity 0.22s ease, transform 0.22s ease;
}
body:is(
.landing-page,
.auth-page,
.home-page,
.explore-page,
.create-page,
.followed-page,
.my-events-page, .newsletter-private,
.profile-page,
.badge-page,
.event-detail-page
) header #mobile-menu.is-open {
opacity: 1;
transform: translateY(0) scale(1);
}
body:is(
.landing-page,
.auth-page,
.home-page,
.explore-page,
.create-page,
.followed-page,
.my-events-page, .newsletter-private,
.profile-page,
.badge-page,
.event-detail-page
) header #mobile-menu > :is(a, button) {
opacity: 0;
transform: translateY(-0.65rem);
transition:
opacity 0.2s ease,
transform 0.2s ease,
background 0.18s ease,
color 0.18s ease !important;
}
body:is(
.landing-page,
.auth-page,
.home-page,
.explore-page,
.create-page,
.followed-page,
.my-events-page, .newsletter-private,
.profile-page,
.badge-page,
.event-detail-page
) header #mobile-menu.is-open > :is(a, button) {
opacity: 1;
transform: translateY(0);
}
#mobile-menu.is-open > :nth-child(1) { transition-delay: 0.03s; }
#mobile-menu.is-open > :nth-child(2) { transition-delay: 0.06s; }
#mobile-menu.is-open > :nth-child(3) { transition-delay: 0.09s; }
#mobile-menu.is-open > :nth-child(4) { transition-delay: 0.12s; }
#mobile-menu.is-open > :nth-child(5) { transition-delay: 0.15s; }
#mobile-menu.is-open > :nth-child(6) { transition-delay: 0.18s; }
#mobile-menu.is-open > :nth-child(7) { transition-delay: 0.21s; }
#mobile-menu.is-open > :nth-child(8) { transition-delay: 0.24s; }
#menu-btn.is-open {
background: rgba(255, 255, 255, 0.1);
}
@media (prefers-reduced-motion: reduce) {
body header #mobile-menu,
body header #mobile-menu > :is(a, button) {
opacity: 1;
transform: none;
transition: none !important;
}
}
body.home-page {
background:
radial-gradient(circle at 18% 10%, rgba(23, 190, 187, 0.2), transparent 28rem),
radial-gradient(circle at 88% 28%, rgba(255, 201, 20, 0.15), transparent 24rem),
radial-gradient(circle at 50% 92%, rgba(228, 87, 46, 0.13), transparent 30rem),
linear-gradient(135deg, #211f20 0%, #151314 56%, #0f1110 100%) !important;
}
body.home-page .home-hero-section {
min-height: clamp(43rem, 82vh, 55rem);
height: auto !important;
padding-block: clamp(5.5rem, 9vw, 7.5rem) clamp(4rem, 7vw, 6rem);
}
body.home-page .hero-fade-media {
-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 72%, rgba(0, 0, 0, 0.62) 86%, transparent 100%);
mask-image: linear-gradient(to bottom, #000 0%, #000 72%, rgba(0, 0, 0, 0.62) 86%, transparent 100%);
}
body.home-page .hero-fade-media img {
object-position: center 42%;
filter: brightness(1.12) saturate(1.08) contrast(0.98);
}
body.home-page .hero-fade-media::after {
content: '';
position: absolute;
inset: 0;
background:
linear-gradient(90deg, rgba(10, 10, 10, 0.68) 0%, rgba(10, 10, 10, 0.38) 43%, rgba(10, 10, 10, 0.12) 100%),
radial-gradient(circle at 78% 28%, rgba(23, 190, 187, 0.16), transparent 24rem),
linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.48));
pointer-events: none;
}
body.home-page .hero-fade-media > .absolute {
background: rgba(0, 0, 0, 0.12) !important;
}
body.home-page .home-hero-content {
display: grid;
width: 100%;
grid-template-columns: minmax(0, 1fr);
gap: clamp(2rem, 5vw, 4rem);
align-items: center;
}
body.home-page .home-hero-main {
max-width: 48rem;
}
body.home-page .home-hero-search-surface {
position: relative;
display: grid;
gap: 1.25rem;
width: min(100%, 28rem);
justify-self: start;
padding: 1.5rem;
transition: all 0.3s ease;
background: transparent !important;
border: none !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
body.home-page .home-hero-search-surface::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 2rem;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 100%), rgba(18, 16, 16, 0.45);
box-shadow:
0 30px 60px rgba(0, 0, 0, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
backdrop-filter: blur(25px) saturate(1.1);
-webkit-backdrop-filter: blur(25px) saturate(1.1);
overflow: hidden;
pointer-events: none;
}
body.home-page .home-hero-search-copy {
display: grid;
gap: 0.25rem;
padding-bottom: 0.35rem;
}
body.home-page .home-hero-search-copy span {
color: rgba(255, 255, 255, 0.64);
font-size: 0.7rem;
font-weight: 900;
letter-spacing: 0.16em;
line-height: 1;
text-transform: uppercase;
}
body.home-page .home-hero-search-copy strong {
color: #ffffff;
font-size: clamp(1.2rem, 2.1vw, 1.45rem);
line-height: 1.08;
}
body.home-page .home-hero-kicker,
body.home-page .home-action-kicker {
display: inline-flex;
align-items: center;
gap: 0.55rem;
color: #8df2ef;
font-size: 0.72rem;
font-weight: 900;
letter-spacing: 0.2em;
line-height: 1;
text-transform: uppercase;
}
body.home-page .home-hero-kicker::before,
body.home-page .home-action-kicker::before {
content: '';
width: 0.52rem;
height: 0.52rem;
border-radius: 999px;
background: #ffc914;
box-shadow: 0 0 18px rgba(255, 201, 20, 0.48);
}
body.home-page #home-welcome-title {
max-width: min(100%, 54rem);
margin-top: 0;
color: #ffffff;
font-size: clamp(3.15rem, 6.1vw, 5.45rem) !important;
line-height: 0.92 !important;
text-wrap: balance;
text-shadow: 0 18px 56px rgba(0, 0, 0, 0.48);
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
cursor: default;
}
body.home-page #home-welcome-title .home-hero-line {
display: block;
}
body.home-page #home-welcome-title .home-hero-line-welcome {
white-space: nowrap;
}
body.home-page #home-welcome-title .home-hero-connect {
color: #ffc914 !important;
text-shadow: 0 12px 38px rgba(255, 201, 20, 0.2);
}
body.home-page .home-hero-copy {
max-width: 42rem !important;
color: rgba(255, 255, 255, 0.78) !important;
font-size: clamp(1rem, 1.8vw, 1.22rem);
line-height: 1.7;
}
body.home-page .home-hero-question {
color: #ffffff;
font-weight: 800;
}
body.home-page .home-hero-search {
width: min(100%, 50rem) !important;
margin-top: 0 !important;
border: 0 !important;
border-radius: 0 !important;
padding: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
body.home-page .home-hero-search-surface .home-hero-search {
width: 100% !important;
grid-template-columns: minmax(0, 1fr) !important;
gap: 0.58rem !important;
margin-top: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
background-color: transparent !important;
padding: 0 !important;
box-shadow: none !important;
}
body.home-page .home-hero-search-surface #home-event-search-query,
body.home-page .home-hero-search-surface .home-hero-search-input,
body.home-page .home-hero-search-surface .home-hero-category-trigger {
border: 1px solid rgba(255, 255, 255, 0.15) !important;
border-radius: 9999px !important;
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
box-shadow: none !important;
outline: none !important;
-webkit-appearance: none !important;
appearance: none !important;
padding-inline: 1.25rem !important;
padding-block: 0.85rem !important;
color: #ffffff !important;
font-size: 0.95rem !important;
min-height: 3.2rem !important;
transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease !important;
}
body.home-page .home-hero-search-surface .home-hero-category-trigger {
padding-right: 2.8rem !important;
text-align: left !important;
}
body.home-page .home-hero-search-surface #home-event-search-query:focus,
body.home-page .home-hero-search-surface .home-hero-search-input:focus,
body.home-page .home-hero-search-surface .home-hero-category-trigger:focus,
body.home-page .home-hero-search-surface .home-hero-category-trigger:focus-visible {
border-color: #FFC914 !important;
box-shadow: 0 0 0 3px rgba(255, 201, 20, 0.2) !important;
outline: none !important;
}
body.home-page .home-hero-search-surface #home-event-search-query,
body.home-page .home-hero-search-surface #home-event-search-query:hover,
body.home-page .home-hero-search-surface #home-event-search-query:focus,
body.home-page .home-hero-search-surface #home-event-search-query:active,
body.home-page .home-hero-search-surface .home-hero-search-input,
body.home-page .home-hero-search-surface .home-hero-search-input:hover,
body.home-page .home-hero-search-surface .home-hero-search-input:focus,
body.home-page .home-hero-search-surface .home-hero-search-input:active,
body.home-page .home-hero-search-surface .home-hero-category-trigger,
body.home-page .home-hero-search-surface .home-hero-category-trigger:hover,
body.home-page .home-hero-search-surface .home-hero-category-trigger:focus,
body.home-page .home-hero-search-surface .home-hero-category-trigger:focus-visible,
body.home-page .home-hero-search-surface .home-hero-category-trigger:active,
body.home-page .home-hero-search-surface .home-hero-search-select-shell.is-open .home-hero-category-trigger,
body.home-page .home-hero-search-surface .home-hero-search-select-shell.is-open .home-hero-category-trigger:hover,
body.home-page .home-hero-search-surface .home-hero-search-select-shell.is-open .home-hero-category-trigger:focus {
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
outline: 0 !important;
}
body.home-page .home-hero-search-surface .home-hero-search-select-shell::after {
right: 0.5rem !important;
border-color: rgba(255, 255, 255, 0.7) !important;
transition: transform 0.25s ease !important;
}
body.home-page .home-hero-search-surface .home-hero-category-option:hover,
body.home-page .home-hero-search-surface .home-hero-category-option:focus-visible,
body.home-page .home-hero-search-surface .home-hero-category-option.is-selected {
background: rgba(255, 255, 255, 0.08) !important;
color: #ffffff !important;
}
body.home-page .home-hero-search-surface .home-hero-category-menu {
border: 1px solid rgba(255, 255, 255, 0.1) !important;
background: rgba(20, 18, 18, 0.95) !important;
backdrop-filter: blur(15px) !important;
-webkit-backdrop-filter: blur(15px) !important;
border-radius: 1rem !important;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.35) !important;
}
body.home-page .home-hero-search-surface .home-hero-search-button {
border: 0 !important;
background: linear-gradient(135deg, #FFC914 0%, #17BEBB 100%) !important;
color: #231F20 !important;
font-weight: 800 !important;
letter-spacing: 0.05em !important;
box-shadow: 0 4px 15px rgba(23, 190, 187, 0.25) !important;
min-height: 3.2rem !important;
border-radius: 1.6rem !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
cursor: pointer !important;
}
body.home-page .home-hero-search-surface .home-hero-search-button:hover,
body.home-page .home-hero-search-surface .home-hero-search-button:focus-visible {
background: linear-gradient(135deg, #FFE27B 0%, #1ce2de 100%) !important;
box-shadow: 0 6px 20px rgba(23, 190, 187, 0.4) !important;
transform: translateY(-1.5px) !important;
color: #231F20 !important;
}
body.home-page .home-hero-search-surface .home-hero-search-button:active {
transform: translateY(0) !important;
}
body.home-page .home-hero-search-surface .home-hero-search-input:-webkit-autofill,
body.home-page .home-hero-search-surface .home-hero-search-input:-webkit-autofill:hover,
body.home-page .home-hero-search-surface .home-hero-search-input:-webkit-autofill:focus,
body.home-page .home-hero-search-surface .home-hero-search-input:-webkit-autofill:active {
-webkit-text-fill-color: #ffffff !important;
box-shadow: 0 0 0px 1000px rgba(0, 0, 0, 0) inset !important;
transition: background-color 5000s ease-in-out 0s !important;
caret-color: #ffffff !important;
}
body.home-page .home-hero-pills {
margin-top: 1.1rem !important;
}
body.home-page .home-hero-search-surface .home-hero-pills {
margin-top: 0 !important;
}
body.home-page .home-hero-pills span {
border-color: rgba(255, 255, 255, 0.2) !important;
background: rgba(255, 255, 255, 0.08) !important;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
body.home-page .home-hero-panel {
position: relative;
display: grid;
gap: 1rem;
width: min(100%, 24.5rem);
min-height: 28rem;
justify-self: start;
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 1.15rem;
background:
linear-gradient(150deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.045)),
rgba(19, 18, 18, 0.62);
padding: 1rem;
box-shadow:
0 28px 82px rgba(0, 0, 0, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.14);
backdrop-filter: blur(18px) saturate(1.08);
-webkit-backdrop-filter: blur(18px) saturate(1.08);
}
body.home-page .home-hero-panel::before {
content: '';
position: absolute;
inset: -1px;
z-index: -1;
border-radius: inherit;
background: linear-gradient(135deg, rgba(23, 190, 187, 0.46), transparent 42%, rgba(255, 201, 20, 0.36));
opacity: 0.74;
}
body.home-page .home-hero-panel-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
padding-bottom: 1rem;
}
body.home-page .home-hero-panel-top span,
body.home-page .home-hero-panel-event small,
body.home-page .home-hero-panel-stat span {
color: rgba(255, 255, 255, 0.58);
font-size: 0.78rem;
}
body.home-page .home-hero-panel-top strong {
max-width: 8rem;
color: #ffffff;
font-size: 1.32rem;
line-height: 1.05;
text-align: right;
}
body.home-page .home-hero-panel-events {
display: grid;
gap: 1rem;
}
body.home-page .home-hero-panel-event {
position: relative;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
gap: 0.75rem;
align-items: center;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 0.9rem;
background: rgba(255, 255, 255, 0.055);
padding: 0.8rem;
color: inherit;
text-decoration: none;
cursor: pointer;
outline: none;
overflow: hidden;
transform: translateY(0) scale(1);
transition:
border-color 0.22s ease,
background 0.22s ease,
box-shadow 0.22s ease,
transform 0.22s ease;
}
body.home-page .home-hero-panel-event::after {
content: '>';
display: inline-grid;
width: 1.7rem;
height: 1.7rem;
place-items: center;
border-radius: 999px;
background: rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.72);
font-size: 0.95rem;
font-weight: 900;
opacity: 0;
transform: translateX(-0.45rem) scale(0.86);
transition: opacity 0.22s ease, transform 0.22s ease, background 0.22s ease, color 0.22s ease;
}
body.home-page .home-hero-panel-event:hover,
body.home-page .home-hero-panel-event:focus-visible {
border-color: rgba(23, 190, 187, 0.55);
background:
linear-gradient(135deg, rgba(23, 190, 187, 0.14), rgba(255, 201, 20, 0.08)),
rgba(255, 255, 255, 0.08);
box-shadow:
0 16px 36px rgba(0, 0, 0, 0.22),
inset 0 1px 0 rgba(255, 255, 255, 0.12);
transform: translateY(-0.18rem) scale(1.015);
}
body.home-page .home-hero-panel-event:hover::after,
body.home-page .home-hero-panel-event:focus-visible::after {
opacity: 1;
transform: translateX(0) scale(1);
background: #ffc914;
color: #231f20;
}
body.home-page .home-hero-panel-event:hover .home-hero-panel-dot,
body.home-page .home-hero-panel-event:focus-visible .home-hero-panel-dot {
transform: scale(1.18);
}
body.home-page .home-hero-panel-dot {
width: 0.8rem;
height: 0.8rem;
border-radius: 999px;
background: #17bebb;
box-shadow: 0 0 0 0.28rem rgba(23, 190, 187, 0.14);
transition: transform 0.22s ease, box-shadow 0.22s ease;
}
body.home-page .home-hero-panel-dot-lava {
background: #e4572e;
box-shadow: 0 0 0 0.28rem rgba(228, 87, 46, 0.14);
}
body.home-page .home-hero-panel-dot-sun {
background: #ffc914;
box-shadow: 0 0 0 0.28rem rgba(255, 201, 20, 0.14);
}
body.home-page .home-hero-panel-event p {
margin: 0;
color: #ffffff;
font-weight: 900;
line-height: 1.1;
}
body.home-page .home-hero-panel-stat {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 0.8rem;
align-items: center;
border-radius: 0.9rem;
background: linear-gradient(135deg, rgba(255, 201, 20, 0.18), rgba(23, 190, 187, 0.12));
padding: 0.9rem;
}
body.home-page .home-hero-panel-stat strong {
color: #ffc914;
font-size: 2rem;
line-height: 1;
}
body.home-page .home-actions-section {
margin-top: clamp(-2rem, -3vw, -1rem);
padding-top: clamp(3.5rem, 7vw, 6rem) !important;
}
body.home-page .home-section-heading span {
display: block;
max-width: 40rem;
margin: 0.9rem auto 0;
color: rgba(255, 255, 255, 0.62);
font-size: 1rem;
line-height: 1.65;
}
body.home-page .home-action-layout {
max-width: min(100%, 76rem) !important;
}
body.home-page .home-action-card {
min-height: clamp(17rem, 26vw, 22rem) !important;
border-radius: 1rem !important;
padding: clamp(1.2rem, 3vw, 2rem) !important;
}
body.home-page .home-action-kicker {
margin-bottom: auto;
color: rgba(255, 255, 255, 0.82) !important;
text-shadow: 0 2px 14px rgba(0, 0, 0, 0.58);
}
body.home-page .home-action-card h2 {
max-width: 13rem;
font-size: clamp(2rem, 4vw, 3.15rem) !important;
line-height: 0.96 !important;
}
body.home-page .home-action-card p {
max-width: 18rem;
line-height: 1.55;
}
body.home-page .home-action-card a {
align-self: flex-start;
border-radius: 999px !important;
}
body.home-page .home-section-top {
display: flex;
align-items: end;
justify-content: space-between;
gap: 1.5rem;
margin-bottom: clamp(1.5rem, 3vw, 2.4rem);
}
body.home-page .home-section-top .home-section-heading {
margin-bottom: 0 !important;
}
body.home-page .home-section-link {
display: inline-flex;
flex: 0 0 auto;
min-height: 2.65rem;
align-items: center;
justify-content: center;
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 999px;
background: rgba(255, 255, 255, 0.06);
padding: 0 1rem;
color: rgba(255, 255, 255, 0.82);
font-size: 0.88rem;
font-weight: 900;
transition: border-color 0.22s ease, background 0.22s ease, color 0.22s ease, transform 0.22s ease;
}
body.home-page .home-section-link:hover,
body.home-page .home-section-link:focus-visible {
border-color: rgba(23, 190, 187, 0.72);
background: rgba(23, 190, 187, 0.14);
color: #ffffff;
transform: translateY(-1px);
}
body.home-page .home-saved-section {
padding-block: clamp(4rem, 7vw, 6rem) !important;
}
body.home-page .home-recommended-section {
padding-top: clamp(2.5rem, 5vw, 4rem) !important;
}
body.home-page .home-events-grid {
gap: clamp(1rem, 2.2vw, 1.4rem) !important;
}
body.home-page .home-events-grid .event-card {
height: clamp(23rem, 37vw, 29rem) !important;
border-radius: 1rem !important;
}
body.home-page .home-events-grid .event-card:nth-child(3n + 1) {
transform-origin: 50% 80%;
}
body.home-page .home-events-grid .event-card h3 {
font-size: clamp(1.45rem, 2.3vw, 2rem) !important;
}
body.home-page .saved-events-empty {
display: grid;
gap: 1.35rem;
border: 1px solid rgba(255, 255, 255, 0.12);
padding: clamp(1.25rem, 3vw, 2rem) !important;
}
body.home-page .saved-event-chip {
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.055);
}
body.home-page .home-hero-search-surface .home-hero-pills span {
border: 1px solid rgba(255, 255, 255, 0.15) !important;
background: rgba(255, 255, 255, 0.06) !important;
color: rgba(255, 255, 255, 0.8) !important;
border-radius: 9999px !important;
padding: 0.35rem 0.85rem !important;
font-size: 0.78rem !important;
transition: all 0.25s ease !important;
cursor: pointer !important;
}
body.home-page .home-hero-search-surface .home-hero-pills span:hover {
background: rgba(255, 255, 255, 0.12) !important;
border-color: rgba(255, 255, 255, 0.3) !important;
color: #ffffff !important;
transform: translateY(-1px);
}
@media (min-width: 980px) {
body.home-page .home-hero-content {
grid-template-columns: minmax(0, 1fr);
gap: clamp(2.25rem, 5vw, 5rem);
}
}
@media (max-width: 899px) {
body.home-page #home-welcome-title {
max-width: 100%;
}
body.home-page .home-section-top {
display: grid;
align-items: start;
}
}
@media (max-width: 767px) {
body.home-page .home-hero-section {
min-height: 0;
padding-block: 5rem 3.5rem;
}
body.home-page #home-welcome-title {
font-size: clamp(2.55rem, 13.5vw, 4.1rem) !important;
}
body.home-page #home-welcome-title .home-hero-line-welcome {
font-size: 0.82em;
}
body.home-page .home-hero-search-surface {
width: 100%;
}
body.home-page .home-section-heading span {
margin-inline: 0;
}
}
@media (prefers-reduced-motion: reduce) {
body.home-page .home-hero-panel-event,
body.home-page .home-hero-panel-event::after,
body.home-page .home-hero-panel-dot {
transition: none !important;
}
body.home-page .home-hero-panel-event:hover,
body.home-page .home-hero-panel-event:focus-visible,
body.home-page .home-hero-panel-event:hover .home-hero-panel-dot,
body.home-page .home-hero-panel-event:focus-visible .home-hero-panel-dot {
transform: none !important;
}
}
body.explore-page .leaflet-marker-icon {
overflow: visible !important;
}
body.explore-page .ha-event-marker-icon {
position: absolute !important;
display: grid !important;
width: 56px !important;
height: 56px !important;
place-items: center !important;
overflow: visible !important;
border: 0 !important;
background: transparent !important;
pointer-events: auto !important;
}
body.explore-page .explore-map-marker {
position: relative !important;
display: grid !important;
width: 56px !important;
height: 56px !important;
place-items: center !important;
overflow: visible !important;
filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.36));
transform: translateZ(0);
}
body.explore-page .explore-map-marker::before {
content: none !important;
}
body.explore-page .explore-map-marker::after {
content: none !important;
}
body.explore-page .explore-map-marker-pulse {
position: absolute;
width: 38px;
height: 38px;
border-radius: 999px;
background: color-mix(in srgb, var(--event-color) 24%, transparent);
box-shadow: 0 0 30px color-mix(in srgb, var(--event-color) 48%, transparent);
opacity: 0.78;
}
body.explore-page .explore-map-marker-core {
position: relative;
z-index: 2;
display: block;
flex: 0 0 auto;
width: 20px;
height: 20px;
border: 4px solid #ffffff;
border-radius: 999px;
background: var(--event-color);
box-shadow:
0 0 0 5px color-mix(in srgb, var(--event-color) 18%, transparent),
0 0 24px color-mix(in srgb, var(--event-color) 68%, transparent),
inset 0 0 0 3px color-mix(in srgb, #ffffff 36%, transparent);
}
body.explore-page .ha-event-marker-icon.is-selected-event-marker {
z-index: 1000 !important;
}
body.explore-page .explore-map-marker.is-selected {
z-index: 900;
}
body.explore-page .explore-map-marker.is-selected .explore-map-marker-pulse {
width: 52px;
height: 52px;
animation: exploreSelectedMarkerPulseRing 1.45s ease-in-out infinite;
}
body.explore-page .explore-map-marker.is-selected .explore-map-marker-core {
width: 26px;
height: 26px;
animation: exploreSelectedMarkerPulseCore 1.45s ease-in-out infinite;
box-shadow:
0 0 0 7px color-mix(in srgb, var(--event-color) 24%, transparent),
0 0 34px color-mix(in srgb, var(--event-color) 74%, transparent),
0 18px 28px rgba(0, 0, 0, 0.32),
inset 0 0 0 3px color-mix(in srgb, var(--event-color) 88%, transparent) !important;
}
@keyframes exploreSelectedMarkerPulseCore {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
}
@keyframes exploreSelectedMarkerPulseRing {
0%,
100% {
opacity: 0.56;
transform: scale(0.88);
}
50% {
opacity: 0.18;
transform: scale(1.16);
}
}
@media (prefers-reduced-motion: reduce) {
body.explore-page .explore-map-marker.is-selected .explore-map-marker-pulse,
body.explore-page .explore-map-marker.is-selected .explore-map-marker-core {
animation: none !important;
}
}
body.explore-page .leaflet-overlay-pane .explore-selected-location-pulse,
body.explore-page .leaflet-overlay-pane .explore-selected-location-dot {
filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.42));
vector-effect: non-scaling-stroke;
}
body.explore-page #map {
position: relative;
}
body.explore-page .explore-selected-location-html-dot {
position: absolute;
z-index: 10000;
display: grid;
width: 52px;
height: 52px;
place-items: center;
pointer-events: none;
transform: translate(-50%, -50%);
filter: drop-shadow(0 14px 20px rgba(0, 0, 0, 0.45));
}
body.explore-page .explore-selected-location-html-ring,
body.explore-page .explore-selected-location-html-core {
position: absolute;
display: block;
border-radius: 999px;
}
body.explore-page .explore-selected-location-html-ring {
width: 48px;
height: 48px;
background: color-mix(in srgb, var(--selected-location-color, #17BEBB) 28%, transparent);
box-shadow: 0 0 32px color-mix(in srgb, var(--selected-location-color, #17BEBB) 58%, transparent);
animation: exploreSelectedLocationHtmlRing 1.45s ease-in-out infinite;
}
body.explore-page .explore-selected-location-html-core {
width: 22px;
height: 22px;
border: 4px solid #ffffff;
background: var(--selected-location-color, #17BEBB);
box-shadow:
0 0 0 6px color-mix(in srgb, var(--selected-location-color, #17BEBB) 20%, transparent),
0 0 26px color-mix(in srgb, var(--selected-location-color, #17BEBB) 72%, transparent),
inset 0 0 0 3px rgba(255, 255, 255, 0.32);
animation: exploreSelectedLocationHtmlCore 1.45s ease-in-out infinite;
}
body.explore-page .leaflet-overlay-pane .explore-selected-location-pulse {
animation: exploreSelectedLocationPulse 1.5s ease-in-out infinite;
transform-box: fill-box;
transform-origin: center;
}
body.explore-page .leaflet-overlay-pane .explore-selected-location-dot {
stroke-linejoin: round;
animation: exploreSelectedLocationDot 1.5s ease-in-out infinite;
transform-box: fill-box;
transform-origin: center;
}
@keyframes exploreSelectedLocationPulse {
0%,
100% {
opacity: 0.58;
transform: scale(0.82);
}
50% {
opacity: 0.2;
transform: scale(1.18);
}
}
@keyframes exploreSelectedLocationDot {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.08);
}
}
@keyframes exploreSelectedLocationHtmlRing {
0%,
100% {
opacity: 0.65;
transform: scale(0.84);
}
50% {
opacity: 0.18;
transform: scale(1.18);
}
}
@keyframes exploreSelectedLocationHtmlCore {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.08);
}
}
@media (prefers-reduced-motion: reduce) {
body.explore-page .leaflet-overlay-pane .explore-selected-location-pulse,
body.explore-page .leaflet-overlay-pane .explore-selected-location-dot,
body.explore-page .explore-selected-location-html-ring,
body.explore-page .explore-selected-location-html-core {
animation: none !important;
}
}
body.home-page .event-card {
display: flex !important;
flex-direction: column !important;
min-height: 26.25rem !important;
height: auto !important;
}
body.home-page .event-card > .relative.z-10 {
flex: 1 1 auto !important;
width: 100% !important;
}
body.home-page #recommended-events-grid .event-card {
display: flex !important;
flex-direction: column !important;
min-height: 26.25rem !important;
height: auto !important;
}
body.home-page #recommended-events-grid .event-card > .relative.z-10 {
flex: 1 1 auto !important;
width: 100% !important;
}
@media (max-width: 767px) {
body.home-page .event-card,
body.home-page #recommended-events-grid .event-card {
min-height: 24.375rem !important;
}
}
.nav-search-bar {
position: relative;
display: flex;
align-items: center;
border-radius: 9999px;
background: transparent;
border: 1px solid transparent;
padding-inline: 0.25rem;
margin-left: -0.65rem;
transform: scale(1);
transform-origin: right center;
transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.nav-search-bar button svg {
width: 1.38rem !important;
height: 1.38rem !important;
color: #ffffff !important;
}
.nav-search-bar.is-expanded {
background: rgba(255, 255, 255, 0.16) !important;
border-color: rgba(255, 255, 255, 0.25) !important;
padding-inline: 0.5rem;
backdrop-filter: blur(12px) saturate(1.2);
-webkit-backdrop-filter: blur(12px) saturate(1.2);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.15),
0 8px 32px rgba(0, 0, 0, 0.2);
transform: scale(1.1);
}
.nav-search-expanded {
display: flex;
align-items: center;
gap: 0.5rem;
max-width: 0;
opacity: 0;
visibility: hidden;
transition: max-width 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease, visibility 0.35s;
}
.nav-search-bar.is-expanded .nav-search-expanded {
max-width: 24rem;
opacity: 1;
visibility: visible;
}
.nav-search-input {
background: transparent !important;
border: none !important;
outline: none !important;
color: #ffffff !important;
font-size: 0.82rem;
width: 9.5rem;
padding: 0.3rem 0.5rem;
font-family: inherit;
flex-shrink: 0;
}
.nav-search-input::placeholder {
color: rgba(255, 255, 255, 0.5) !important;
}
.nav-search-city {
background: transparent !important;
border: none !important;
outline: none !important;
color: rgba(255, 255, 255, 0.9) !important;
font-size: 0.82rem;
width: 8rem;
padding: 0.3rem 0.5rem;
cursor: pointer;
border-left: 1px solid rgba(255, 255, 255, 0.25) !important;
font-family: inherit;
flex-shrink: 0;
}
.nav-search-city option {
background: #231F20;
color: #ffffff;
}
body.home-page header :is(.nav-search-input,
.nav-search-city) {
background: transparent !important;
border: none !important;
border-color: transparent !important;
box-shadow: none !important;
color: #ffffff !important;
text-shadow: none !important;
}
body.home-page header .nav-search-city {
border-left: 1px solid rgba(255, 255, 255, 0.25) !important;
}
body.home-page header .nav-search-input::placeholder {
color: rgba(255, 255, 255, 0.6) !important;
}
body.home-page header :is(#navSearchTrigger,
.nav-search-bar button) svg {
color: #ffffff !important;
stroke: #ffffff !important;
fill: none !important;
}
@media (max-width: 480px) {
.nav-search-input {
width: 6.5rem;
}
.nav-search-city {
width: 5.5rem;
}
}
h1, h2, h3, h4, h5, h6 {
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
cursor: default;
}
#menu-btn .ha-menu-icon path {
transform-origin: 12px 12px;
transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), opacity 160ms ease;
}
#menu-btn .ha-menu-icon path:nth-child(1) { transform-origin: 12px 6px; }
#menu-btn .ha-menu-icon path:nth-child(3) { transform-origin: 12px 18px; }
#menu-btn.is-open .ha-menu-icon path:nth-child(1) { transform: translateY(6px) rotate(45deg); }
#menu-btn.is-open .ha-menu-icon path:nth-child(2) { opacity: 0; transform: scaleX(0.5); }
#menu-btn.is-open .ha-menu-icon path:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) {
#menu-btn .ha-menu-icon path { transition: none; }
}
.event-detail-page {
--event-hero-image: none;
--event-bg-solid: #231f20;
--event-bg:
radial-gradient(circle at 18% 0%, rgba(23, 190, 187, 0.12), transparent 28rem),
radial-gradient(circle at 86% 26rem, rgba(255, 201, 20, 0.08), transparent 30rem),
linear-gradient(180deg, #231f20 0%, #1b1718 52%, #171415 100%);
--event-panel-bg: rgba(46, 40, 42, 0.9);
--event-panel-border: rgba(255, 255, 255, 0.12);
--event-panel-shadow: 0 1.5rem 4.5rem rgba(0, 0, 0, 0.22);
--event-text-primary: #ffffff;
--event-text-muted: rgba(255, 255, 255, 0.66);
--event-text-accent: #17bebb;
--event-color-sea: #17bebb;
--event-color-leaf: #76b947;
--event-color-sun: #ffc914;
--event-color-lava: #ff5a5f;
--event-info-bg: rgba(255, 255, 255, 0.035);
--event-info-border: rgba(255, 255, 255, 0.08);
--event-info-muted: rgba(255, 255, 255, 0.42);
--event-hero-overlay-gradient-1: linear-gradient(90deg, rgba(23, 20, 21, 0.88), rgba(23, 20, 21, 0.32) 48%, rgba(23, 20, 21, 0.1));
--event-hero-overlay-gradient-2: linear-gradient(0deg, #231f20 0%, rgba(35, 31, 32, 0.82) 18%, rgba(35, 31, 32, 0.18) 62%, rgba(35, 31, 32, 0.06) 100%);
--event-hero-blend: #231f20;
--event-hero-blend-mid: rgba(35, 31, 32, 0.72);
--event-hero-blend-strong: rgba(35, 31, 32, 0.86);
--event-hero-tail: clamp(16rem, 32dvh, 28rem);
--event-shell-media-opacity: 0.34;
--event-shell-media-filter: saturate(1.08) brightness(0.58) contrast(1.04);
--event-shell-overlay: linear-gradient(
180deg,
rgba(23, 20, 21, 0.2) 0%,
rgba(23, 20, 21, 0.16) 32%,
rgba(35, 31, 32, 0.82) 52%,
#231f20 64%,
#231f20 84%,
rgba(35, 31, 32, 0.72) 92%,
transparent 100%
);
--event-secondary-action-border: rgba(255, 255, 255, 0.12);
--event-secondary-action-text: rgba(255, 255, 255, 0.74);
--event-form-input-bg: rgba(255, 255, 255, 0.06);
--event-form-input-border: rgba(255, 255, 255, 0.11);
--event-avatar-bg: rgba(23, 190, 187, 0.12);
--event-avatar-border: rgba(23, 190, 187, 0.26);
--event-progress-bg: rgba(255, 255, 255, 0.08);
--event-back-border: rgba(255, 255, 255, 0.14);
--event-back-text: rgba(255, 255, 255, 0.78);
min-height: 100dvh;
background: var(--event-bg) !important;
font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
color: var(--event-text-primary);
}
.event-detail-page::before {
display: none !important;
}
.event-detail-shell {
position: relative;
isolation: isolate;
min-height: calc(100dvh - 7rem);
background: transparent;
overflow-x: clip;
}
.event-detail-shell::before,
.event-detail-shell::after {
content: "";
position: absolute;
inset: 0 0 auto;
height: min(clamp(40rem, 132dvh, 92rem), 100%);
pointer-events: none;
}
.event-detail-shell::before {
z-index: 0;
background: var(--event-hero-image) center top / 100% auto no-repeat;
filter: var(--event-shell-media-filter);
opacity: var(--event-shell-media-opacity);
transform: none;
transform-origin: center top;
-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 44%, rgba(0, 0, 0, 0.82) 62%, rgba(0, 0, 0, 0.34) 82%, transparent 100%);
mask-image: linear-gradient(to bottom, #000 0%, #000 44%, rgba(0, 0, 0, 0.82) 62%, rgba(0, 0, 0, 0.34) 82%, transparent 100%);
}
.event-detail-shell::after {
z-index: 0;
background: var(--event-shell-overlay);
-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 58%, rgba(0, 0, 0, 0.88) 72%, rgba(0, 0, 0, 0.32) 90%, transparent 100%);
mask-image: linear-gradient(to bottom, #000 0%, #000 58%, rgba(0, 0, 0, 0.88) 72%, rgba(0, 0, 0, 0.32) 90%, transparent 100%);
}
.event-detail-loading,
.event-detail-message {
position: relative;
z-index: 1;
display: grid;
min-height: 60dvh;
place-items: center;
padding: 4rem 1.5rem;
color: rgba(255, 255, 255, 0.6);
text-align: center;
}
.event-detail-message {
align-content: center;
gap: 1rem;
}
.event-detail-message h1 {
color: var(--event-text-primary);
font-size: clamp(2rem, 5vw, 4rem);
font-weight: 900;
}
.event-detail-message a {
border-radius: 0.75rem;
background: #17bebb;
color: #2e282a;
font-weight: 900;
padding: 0.85rem 1.2rem;
}
.event-detail-hero {
position: relative;
z-index: 1;
isolation: isolate;
min-height: 0;
margin-bottom: calc(var(--event-hero-tail) * -1);
padding-bottom: var(--event-hero-tail);
overflow: hidden;
background: transparent;
animation: event-detail-reveal 0.42s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.event-detail-hero img {
position: absolute;
top: 0;
left: 0;
width: 100%;
max-width: 100%;
height: auto;
image-rendering: auto;
filter: none;
transform: none;
-webkit-mask-image:
linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.46) 9%, #000 22%, #000 78%, rgba(0, 0, 0, 0.46) 91%, transparent 100%),
linear-gradient(to bottom, #000 0%, #000 58%, rgba(0, 0, 0, 0.82) 72%, rgba(0, 0, 0, 0.22) 88%, transparent 100%);
-webkit-mask-composite: source-in;
mask-image:
linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.46) 9%, #000 22%, #000 78%, rgba(0, 0, 0, 0.46) 91%, transparent 100%),
linear-gradient(to bottom, #000 0%, #000 58%, rgba(0, 0, 0, 0.82) 72%, rgba(0, 0, 0, 0.22) 88%, transparent 100%);
mask-composite: intersect;
}
.event-detail-shell[data-event-hero-layout="wide"] .event-detail-hero img {
width: 100%;
max-width: none;
-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 58%, rgba(0, 0, 0, 0.82) 72%, rgba(0, 0, 0, 0.22) 88%, transparent 100%);
mask-image: linear-gradient(to bottom, #000 0%, #000 58%, rgba(0, 0, 0, 0.82) 72%, rgba(0, 0, 0, 0.22) 88%, transparent 100%);
}
.event-detail-hero-overlay {
position: absolute;
inset: 0;
z-index: 1;
background: var(--event-hero-overlay-gradient-1), var(--event-hero-overlay-gradient-2);
}
.event-detail-hero::after {
content: "";
position: absolute;
inset: auto 0 -1px;
z-index: 2;
height: clamp(18rem, 36dvh, 30rem);
pointer-events: none;
background:
linear-gradient(180deg, rgba(35, 31, 32, 0), var(--event-hero-blend-mid) 46%, var(--event-hero-blend) 86%),
radial-gradient(ellipse at 50% 100%, var(--event-hero-blend-strong), transparent 74%);
}
.event-detail-hero-content {
position: relative;
z-index: 3;
display: flex;
min-height: 0;
width: min(100% - 2rem, 76rem);
flex-direction: column;
justify-content: space-between;
margin: 0 auto;
gap: 1.5rem;
padding: clamp(1.5rem, 3vw, 2.25rem) 0 0.5rem;
}
.event-detail-back {
display: grid;
width: 2.75rem;
height: 2.75rem;
place-items: center;
border-radius: 999px;
background: rgba(23, 20, 21, 0.55);
color: #FFFFFF;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
transition: background-color 0.2s ease;
}
.event-detail-back svg {
width: 1.4rem;
height: 1.4rem;
fill: none;
stroke: currentColor;
stroke-width: 2.4;
stroke-linecap: round;
stroke-linejoin: round;
}
.event-detail-back:hover,
.event-detail-back:focus-visible {
background: rgba(23, 20, 21, 0.8);
}
.event-detail-title-block {
max-width: 47rem;
}
.event-detail-category,
.event-detail-kicker,
.event-detail-section-heading p {
color: var(--event-text-accent);
font-size: 0.78rem;
font-weight: 900;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.event-detail-title-block h1 {
margin-top: 0.9rem;
padding-bottom: 0.12em;
color: var(--event-text-primary);
font-size: clamp(1.9rem, 4.2vw, 3.8rem);
font-weight: 900;
line-height: 1.18;
text-wrap: balance;
}
.event-detail-hero-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.event-detail-hero-actions {
display: flex;
gap: 0.5rem;
}
.event-detail-menu {
position: relative;
}
.event-detail-menu-button {
display: grid;
width: 2.75rem;
height: 2.75rem;
place-items: center;
border-radius: 999px;
background: rgba(23, 20, 21, 0.55);
color: #FFFFFF;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.event-detail-menu-button svg {
width: 1.35rem;
height: 1.35rem;
fill: currentColor;
}
.event-detail-menu-button:hover,
.event-detail-menu-button:focus-visible,
.event-detail-menu-button[aria-expanded="true"] {
background: rgba(23, 20, 21, 0.8);
}
.event-detail-menu-list {
position: absolute;
top: calc(100% + 0.5rem);
right: 0;
z-index: 20;
display: grid;
min-width: 14rem;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 1rem;
background: #231F20;
box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
}
.event-detail-menu-list[hidden] {
display: none;
}
.event-detail-menu-item {
display: flex;
min-height: 2.9rem;
align-items: center;
padding: 0 1.1rem;
color: rgba(255, 255, 255, 0.86);
font-size: 0.92rem;
font-weight: 700;
text-align: left;
}
.event-detail-menu-item + .event-detail-menu-item {
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.event-detail-menu-item:hover,
.event-detail-menu-item:focus-visible {
background: rgba(255, 255, 255, 0.06);
color: #FFFFFF;
}
.event-detail-menu-item--danger {
color: #FF9A80;
}
.event-detail-title-block .event-detail-category {
color: var(--event-text-accent);
}
.event-detail-hero-description {
display: -webkit-box;
overflow-wrap: anywhere;
max-width: 42rem;
margin-top: 0.75rem;
overflow: hidden;
color: var(--event-text-muted);
font-size: 0.98rem;
line-height: 1.6;
white-space: pre-line;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
.event-detail-hero-description.is-expanded {
display: block;
-webkit-line-clamp: unset;
}
.event-detail-description-toggle {
min-height: 2.75rem;
color: #17BEBB;
font-size: 0.9rem;
font-weight: 800;
}
.event-detail-facts {
display: grid;
margin: 0;
padding: 0;
list-style: none;
}
.event-detail-fact {
display: flex;
min-height: 3rem;
align-items: center;
gap: 0.85rem;
padding: 0.55rem 0;
}
.event-detail-fact + .event-detail-fact {
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.event-detail-fact-icon {
display: grid;
width: 2rem;
height: 2rem;
flex: 0 0 auto;
place-items: center;
color: #17BEBB;
}
.event-detail-fact-icon svg {
width: 1.3rem;
height: 1.3rem;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.event-detail-fact-avatar .event-detail-avatar {
width: 2rem;
height: 2rem;
border-radius: 999px;
font-size: 0.78rem;
}
.event-detail-fact-text {
display: grid;
min-width: 0;
gap: 0.1rem;
}
.event-detail-fact-text > span {
color: rgba(255, 255, 255, 0.55);
font-size: 0.75rem;
font-weight: 700;
}
.event-detail-fact-text strong {
overflow-wrap: anywhere;
color: var(--event-text-primary);
font-size: 0.98rem;
font-weight: 800;
}
.event-detail-fact--seats {
display: block;
}
.event-detail-fact-toggle {
display: flex;
width: 100%;
min-height: 3rem;
align-items: center;
gap: 0.85rem;
text-align: left;
}
.event-detail-fact-chevron {
width: 1.25rem;
height: 1.25rem;
margin-left: auto;
flex: 0 0 auto;
fill: none;
stroke: rgba(255, 255, 255, 0.6);
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
transition: transform 0.2s ease;
}
.event-detail-fact-toggle[aria-expanded="true"] .event-detail-fact-chevron {
transform: rotate(180deg);
}
.event-detail-participants-list {
display: grid;
gap: 0.35rem;
margin: 0.35rem 0 0.2rem 2.85rem;
padding: 0;
list-style: none;
}
.event-detail-participants-list[hidden] {
display: none;
}
.event-detail-participants-list li {
display: flex;
min-width: 0;
overflow-wrap: anywhere;
min-height: 2.5rem;
align-items: center;
gap: 0.65rem;
color: rgba(255, 255, 255, 0.86);
font-size: 0.92rem;
font-weight: 700;
}
.event-detail-participant-avatar {
display: grid;
width: 1.9rem;
height: 1.9rem;
flex: 0 0 auto;
place-items: center;
overflow: hidden;
border-radius: 999px;
background: rgba(23, 190, 187, 0.16);
color: #17BEBB;
font-size: 0.72rem;
font-weight: 900;
}
.event-detail-participant-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.event-detail-place-link {
padding-block: 0.6rem;
color: inherit;
overflow-wrap: anywhere;
text-decoration: underline;
text-decoration-color: rgba(23, 190, 187, 0.55);
text-decoration-thickness: 2px;
text-underline-offset: 4px;
transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.event-detail-place-link svg {
display: inline-block;
width: 0.95em;
height: 0.95em;
margin-left: 0.35em;
vertical-align: -0.1em;
fill: none;
stroke: #17BEBB;
stroke-width: 2.2;
stroke-linecap: round;
stroke-linejoin: round;
}
.event-detail-place-link:hover,
.event-detail-place-link:focus-visible {
color: #17BEBB;
text-decoration-color: #17BEBB;
}
.event-detail-content {
display: grid;
width: min(100% - 2rem, 76rem);
grid-template-columns: minmax(0, 1fr);
gap: 1.25rem;
margin: -0.5rem auto 2.5rem;
position: relative;
z-index: 2;
align-items: start;
animation: event-detail-fade 0.38s ease 0.08s backwards;
}
html.ha-page-ready body.event-detail-page > main {
animation-name: event-detail-fade;
}
@keyframes event-detail-fade {
from {
opacity: 0;
}
}
.event-detail-main {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto;
align-content: start;
gap: 1.25rem;
}
body.event-detail-page {
padding-bottom: calc(5.25rem + env(safe-area-inset-bottom));
}
body.event-detail-page:has(.event-detail-sidebar .event-detail-actions > * + *) {
padding-bottom: calc(8.5rem + env(safe-area-inset-bottom));
}
.event-detail-sidebar {
position: fixed;
right: 0;
bottom: 0;
left: 0;
z-index: 60;
}
.event-detail-panel {
--event-panel-accent: var(--event-color-sea);
border: 1px solid var(--event-panel-border);
border-radius: 1rem;
background: var(--event-panel-bg);
box-shadow: inset 3px 0 0 color-mix(in srgb, var(--event-panel-accent) 72%, transparent), var(--event-panel-shadow);
padding: 1.3rem;
animation: event-detail-panel-in 0.34s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.event-detail-panel--capacity {
--event-panel-accent: var(--event-color-leaf);
}
.event-detail-panel--capacity[data-capacity-state="full"] {
--event-panel-accent: var(--event-color-lava);
}
.event-detail-panel :is(.event-detail-kicker, .event-detail-section-heading p) {
color: var(--event-panel-accent);
}
.event-detail-main .event-detail-panel:nth-child(1) {
animation-delay: 0.12s;
}
.event-detail-main .event-detail-panel:nth-child(2) {
animation-delay: 0.17s;
}
.event-detail-main .event-detail-panel:nth-child(3) {
animation-delay: 0.22s;
}
.event-detail-main .event-detail-panel:nth-child(4) {
animation-delay: 0.27s;
}
.event-detail-sidebar .event-detail-panel {
animation-delay: 0.2s;
}
.event-detail-avatar {
display: grid;
flex: 0 0 auto;
place-items: center;
border: 1px solid var(--event-avatar-border);
border-radius: 0.85rem;
background: var(--event-avatar-bg);
color: var(--event-text-accent);
font-weight: 900;
object-fit: cover;
}
.event-detail-avatar {
width: 4rem;
height: 4rem;
font-size: 1.25rem;
}
.event-detail-section-heading h2,
.event-detail-capacity-header h2 {
margin-top: 0.2rem;
color: var(--event-text-primary);
font-size: 1.45rem;
font-weight: 900;
}
.event-detail-capacity-copy {
color: var(--event-text-muted);
font-size: 0.98rem;
line-height: 1.65;
}
.event-detail-attendance-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-top: 1rem;
border: 1px solid rgba(23, 190, 187, 0.22);
border-radius: 0.85rem;
background: rgba(23, 190, 187, 0.07);
padding: 0.75rem;
}
.event-detail-attendance-toolbar p {
color: var(--event-text-muted);
font-size: 0.78rem;
}
.event-detail-attendance-toolbar p strong {
color: var(--event-text-primary);
}
.event-detail-attendance-toolbar button {
min-height: 2.35rem;
flex: 0 0 auto;
border-radius: 0.7rem;
background: #17bebb;
color: #171415;
padding: 0 0.85rem;
font-size: 0.76rem;
font-weight: 900;
transition: background 180ms ease, transform 140ms ease;
}
.event-detail-attendance-toolbar button:hover {
background: #ffc914;
}
.event-detail-attendance-toolbar button:active {
transform: scale(0.97);
}
.event-detail-attendance-toolbar button:disabled {
cursor: progress;
opacity: 0.64;
}
.event-detail-attendance {
display: grid;
flex: 0 0 auto;
gap: 0.2rem;
}
.event-detail-attendance > span {
width: auto;
height: auto;
color: var(--event-info-muted);
font-size: 0.62rem;
font-weight: 900;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.event-detail-attendance select {
min-height: 2.15rem;
border: 1px solid var(--event-form-input-border);
border-radius: 0.65rem;
background: var(--event-form-input-bg);
color: var(--event-text-primary);
padding: 0 1.8rem 0 0.6rem;
font-size: 0.72rem;
font-weight: 800;
}
.event-detail-attendance select:focus-visible {
border-color: var(--event-text-accent);
outline: 3px solid rgba(23, 190, 187, 0.18);
outline-offset: 2px;
}
.event-detail-sidebar .event-detail-panel--capacity {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 0.5rem 0.9rem;
border-width: 1px 0 0;
border-radius: 1.1rem 1.1rem 0 0;
background: rgba(35, 31, 32, 0.97);
box-shadow: 0 -16px 40px rgba(0, 0, 0, 0.4);
padding: 0.8rem 1rem calc(0.8rem + env(safe-area-inset-bottom));
animation: none;
}
.event-detail-sidebar :is(.event-detail-progress, .event-detail-capacity-copy, .event-detail-kicker) {
display: none;
}
.event-detail-sidebar .event-detail-capacity-header h2 {
font-size: 1.05rem;
white-space: nowrap;
}
.event-detail-sidebar .event-detail-capacity-header > span {
display: none;
}
.event-detail-sidebar .event-detail-actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 0.5rem;
margin-top: 0;
}
.event-detail-sidebar .event-detail-actions > :empty {
display: none;
}
.event-detail-sidebar :is(.event-detail-primary-action, .event-detail-secondary-action) {
min-height: 2.75rem;
padding-inline: 1.25rem;
white-space: nowrap;
}
.event-detail-sticky {
position: static;
}
@media (min-width: 1024px) {
body.event-detail-page,
body.event-detail-page:has(.event-detail-sidebar .event-detail-actions > * + *) {
padding-bottom: 0;
}
.event-detail-hero,
.event-detail-hero-content {
min-height: clamp(29rem, 58dvh, 42rem);
}
.event-detail-hero-content {
padding-bottom: clamp(5rem, 11dvh, 8rem);
}
.event-detail-hero-description {
-webkit-line-clamp: 4;
}
.event-detail-content {
grid-template-columns: minmax(0, 1fr) 22rem;
margin-bottom: 4rem;
}
.event-detail-sidebar {
position: sticky;
top: calc(var(--ha-navbar-height, 4.25rem) + 1rem);
right: auto;
bottom: auto;
left: auto;
z-index: auto;
}
.event-detail-sidebar .event-detail-panel--capacity {
display: block;
border-width: 1px;
border-radius: 1rem;
background: var(--event-panel-bg);
box-shadow: inset 3px 0 0 color-mix(in srgb, var(--event-panel-accent) 72%, transparent), var(--event-panel-shadow);
padding: 1.3rem;
}
.event-detail-sidebar :is(.event-detail-progress, .event-detail-capacity-copy) {
display: block;
}
.event-detail-sidebar .event-detail-kicker {
display: block;
}
.event-detail-sidebar .event-detail-capacity-header > span {
display: inline-block;
}
.event-detail-sidebar .event-detail-capacity-header h2 {
font-size: revert;
}
.event-detail-sidebar .event-detail-actions {
display: grid;
margin-top: 1.1rem;
}
}
.event-detail-capacity-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
}
.event-detail-capacity-header span {
border-radius: 999px;
background: rgba(255, 201, 20, 0.14);
color: #ffc914;
font-size: 0.84rem;
font-weight: 900;
padding: 0.35rem 0.65rem;
}
.event-detail-panel--capacity[data-capacity-state="available"] .event-detail-capacity-header h2 {
color: #b4e391;
}
.event-detail-panel--capacity[data-capacity-state="full"] .event-detail-capacity-header h2,
.event-detail-panel--capacity[data-capacity-state="full"] .event-detail-capacity-header span {
color: #ff9a9e;
}
.event-detail-panel--capacity[data-capacity-state="full"] .event-detail-capacity-header span {
background: rgba(255, 90, 95, 0.12);
}
.event-detail-progress {
overflow: hidden;
height: 0.45rem;
margin: 1.15rem 0 0.9rem;
border-radius: 999px;
background: var(--event-progress-bg);
}
.event-detail-progress span {
display: block;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, var(--event-color-sea), var(--event-panel-accent));
transition: width 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}
.event-detail-progress .progress-fill-0 { width: 0%; }
.event-detail-progress .progress-fill-5 { width: 5%; }
.event-detail-progress .progress-fill-10 { width: 10%; }
.event-detail-progress .progress-fill-15 { width: 15%; }
.event-detail-progress .progress-fill-20 { width: 20%; }
.event-detail-progress .progress-fill-25 { width: 25%; }
.event-detail-progress .progress-fill-30 { width: 30%; }
.event-detail-progress .progress-fill-35 { width: 35%; }
.event-detail-progress .progress-fill-40 { width: 40%; }
.event-detail-progress .progress-fill-45 { width: 45%; }
.event-detail-progress .progress-fill-50 { width: 50%; }
.event-detail-progress .progress-fill-55 { width: 55%; }
.event-detail-progress .progress-fill-60 { width: 60%; }
.event-detail-progress .progress-fill-65 { width: 65%; }
.event-detail-progress .progress-fill-70 { width: 70%; }
.event-detail-progress .progress-fill-75 { width: 75%; }
.event-detail-progress .progress-fill-80 { width: 80%; }
.event-detail-progress .progress-fill-85 { width: 85%; }
.event-detail-progress .progress-fill-90 { width: 90%; }
.event-detail-progress .progress-fill-95 { width: 95%; }
.event-detail-progress .progress-fill-100 { width: 100%; }
.event-detail-actions {
display: grid;
gap: 0.7rem;
margin-top: 1.1rem;
}
.event-detail-primary-action,
.event-detail-secondary-action {
display: inline-flex;
min-height: 3rem;
align-items: center;
justify-content: center;
border-radius: 0.8rem;
font-size: 0.96rem;
font-weight: 900;
text-align: center;
transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.event-detail-primary-action {
border: 0;
background: #17bebb;
color: #2e282a;
cursor: pointer;
}
.event-detail-primary-action:hover:not(:disabled) {
background: #ffc914;
transform: translateY(-1px);
}
.event-detail-primary-action:disabled {
cursor: not-allowed;
opacity: 0.45;
}
.event-detail-attendance-state {
display: inline-flex;
min-height: 3rem;
align-items: center;
justify-content: center;
border: 1px solid;
border-radius: 0.8rem;
padding: 0.7rem 1rem;
font-size: 0.86rem;
font-weight: 900;
text-align: center;
}
.event-detail-attendance-state::before {
content: "";
width: 0.5rem;
height: 0.5rem;
margin-right: 0.5rem;
border-radius: 50%;
background: currentColor;
}
.event-detail-attendance-state-verified {
border-color: rgba(118, 185, 71, 0.34);
background: rgba(118, 185, 71, 0.09);
color: #9bd56e;
}
.event-detail-attendance-state-pending {
border-color: rgba(255, 201, 20, 0.34);
background: rgba(255, 201, 20, 0.08);
color: #ffc914;
}
.event-detail-secondary-action {
border: 1px solid var(--event-secondary-action-border);
color: var(--event-secondary-action-text);
}
.event-detail-secondary-action:hover {
border-color: rgba(23, 190, 187, 0.5);
color: var(--event-text-accent);
}
.event-detail-action--report {
border-color: rgba(255, 90, 95, 0.25);
color: #ff9a9e;
}
.event-detail-action--report:hover {
border-color: rgba(255, 90, 95, 0.52);
background: rgba(255, 90, 95, 0.07);
color: #ff9a9e;
}
@keyframes event-detail-reveal {
from {
opacity: 0;
transform: translateY(0.65rem) scale(0.995);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes event-detail-panel-in {
from {
opacity: 0;
transform: translateY(0.85rem);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (prefers-reduced-motion: reduce) {
.event-detail-hero,
.event-detail-content,
.event-detail-panel {
animation: none;
}
.event-detail-progress span {
transition: none;
}
}
@media (max-width: 640px) {
.event-detail-hero img {
-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 58%, rgba(0, 0, 0, 0.82) 72%, rgba(0, 0, 0, 0.22) 88%, transparent 100%);
mask-image: linear-gradient(to bottom, #000 0%, #000 58%, rgba(0, 0, 0, 0.82) 72%, rgba(0, 0, 0, 0.22) 88%, transparent 100%);
}
.event-detail-attendance {
width: 100%;
margin-top: 0.35rem;
}
.event-detail-attendance select {
width: 100%;
}
.event-detail-attendance-toolbar {
align-items: stretch;
flex-direction: column;
}
.event-detail-attendance-toolbar button {
width: 100%;
}
}
.event-detail-announce-action {
justify-self: start;
max-width: 100%;
gap: 0.5rem;
margin-top: 1.25rem;
padding: 0 1rem;
background: transparent;
cursor: pointer;
}
.event-detail-announce-action svg {
width: 1.15rem;
height: 1.15rem;
fill: currentColor;
}
.event-detail-reviews-later,
.event-detail-reviews-empty {
margin-top: 1rem;
color: rgba(255, 255, 255, 0.55);
font-size: 0.9rem;
}
.event-detail-reviews-section {
display: grid;
gap: 1.1rem;
margin-top: 1.25rem;
border-top: 1px solid rgba(255, 255, 255, 0.08);
padding-top: 1.25rem;
}
.event-detail-reviews-section > h2 {
color: var(--event-text-primary);
font-size: 1.15rem;
font-weight: 900;
}
.event-detail-review-summary {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 1.25rem;
}
.event-detail-review-score {
display: grid;
justify-items: center;
gap: 0.2rem;
}
.event-detail-review-score strong {
color: var(--event-text-primary);
font-size: 2.6rem;
font-weight: 900;
line-height: 1;
}
.event-detail-review-score > span:last-child {
color: rgba(255, 255, 255, 0.55);
font-size: 0.78rem;
}
.event-detail-stars {
display: inline-flex;
gap: 0.1rem;
}
.event-detail-stars svg {
width: 0.95rem;
height: 0.95rem;
fill: rgba(255, 255, 255, 0.18);
}
.event-detail-stars svg.is-on {
fill: #FFC914;
}
.event-detail-review-bars {
display: grid;
gap: 0.3rem;
margin: 0;
padding: 0;
list-style: none;
}
.event-detail-review-bars li {
display: grid;
grid-template-columns: 0.8rem minmax(0, 1fr);
align-items: center;
gap: 0.5rem;
color: rgba(255, 255, 255, 0.6);
font-size: 0.75rem;
font-weight: 700;
}
.event-detail-review-bar {
height: 0.5rem;
overflow: hidden;
border-radius: 999px;
background: rgba(255, 255, 255, 0.1);
}
.event-detail-review-bar span {
display: block;
height: 100%;
border-radius: inherit;
background: #FFC914;
}
.event-detail-review-list {
display: grid;
margin: 0;
padding: 0;
list-style: none;
}
.event-detail-review {
padding: 0.9rem 0;
}
.event-detail-review + .event-detail-review {
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.event-detail-review-head {
display: flex;
align-items: center;
gap: 0.75rem;
}
.event-detail-review-head strong {
display: block;
color: var(--event-text-primary);
font-size: 0.95rem;
font-weight: 800;
}
.event-detail-review-avatar {
display: grid;
width: 2.25rem;
height: 2.25rem;
flex: 0 0 auto;
place-items: center;
border-radius: 999px;
background: hsl(var(--review-hue, 180) 55% 40%);
color: #FFFFFF;
font-size: 0.8rem;
font-weight: 900;
}
.event-detail-review-avatar img {
width: 100%;
height: 100%;
border-radius: inherit;
object-fit: cover;
}
.event-detail-review-meta {
display: flex;
align-items: center;
gap: 0.5rem;
margin-top: 0.15rem;
color: rgba(255, 255, 255, 0.5);
font-size: 0.78rem;
}
.event-detail-review-comment {
display: -webkit-box;
overflow-wrap: anywhere;
margin-top: 0.6rem;
overflow: hidden;
color: rgba(255, 255, 255, 0.8);
font-size: 0.92rem;
line-height: 1.55;
white-space: pre-line;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
}
.event-detail-review-comment.is-expanded {
display: block;
}
.event-detail-review-more {
min-height: 2.25rem;
color: #17BEBB;
font-size: 0.85rem;
font-weight: 800;
}
.event-detail-review-form {
display: grid;
gap: 0.75rem;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 1rem;
background: rgba(255, 255, 255, 0.03);
padding: 1rem;
}
.event-detail-star-input {
margin: 0;
border: 0;
padding: 0;
}
.event-detail-star-input legend {
margin-bottom: 0.35rem;
color: var(--event-text-primary);
font-size: 0.95rem;
font-weight: 800;
}
.event-detail-star-options {
display: inline-flex;
flex-direction: row-reverse;
justify-content: flex-end;
}
.event-detail-star-options input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.event-detail-star-options label {
display: grid;
width: 2.75rem;
height: 2.75rem;
place-items: center;
cursor: pointer;
}
.event-detail-star-options label svg {
width: 2rem;
height: 2rem;
fill: none;
stroke: rgba(255, 255, 255, 0.45);
stroke-width: 1.4;
transition: fill 0.12s ease, stroke 0.12s ease;
}
.event-detail-star-options input:checked ~ label svg,
.event-detail-star-options label:hover svg,
.event-detail-star-options label:hover ~ label svg {
fill: #FFC914;
stroke: #FFC914;
}
.event-detail-star-options input:focus-visible + label {
border-radius: 999px;
outline: 2px solid #17BEBB;
}
.event-detail-review-textarea textarea {
width: 100%;
border: 1px solid var(--event-form-input-border);
border-radius: 0.8rem;
background: var(--event-form-input-bg);
color: var(--event-text-primary);
font-size: 1rem;
padding: 0.75rem 0.9rem;
resize: vertical;
}
.event-detail-review-form .event-detail-primary-action {
justify-self: start;
padding-inline: 1.5rem;
}
.event-detail-links {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem 1.25rem;
}
.event-detail-social {
display: inline-flex;
min-height: 2.75rem;
align-items: center;
gap: 0.45rem;
color: #FFFFFF;
font-size: 0.88rem;
font-weight: 800;
}
.event-detail-social svg {
width: 1.35rem;
height: 1.35rem;
flex: 0 0 auto;
}
.event-detail-social:hover,
.event-detail-social:focus-visible {
color: #17BEBB;
}
.event-detail-gallery {
display: grid;
gap: 0.75rem;
min-width: 0;
}
.event-detail-gallery-head {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.5rem 1rem;
}
.event-detail-gallery h2 {
color: var(--event-text-primary);
font-size: 1.15rem;
font-weight: 900;
}
.event-detail-gallery-add {
min-height: 2.75rem;
border: 1px solid rgba(255, 201, 20, 0.5);
border-radius: 0.75rem;
padding: 0 1rem;
color: #FFC914;
font-size: 0.85rem;
font-weight: 800;
}
.event-detail-gallery-add:hover:not(:disabled) {
background: rgba(255, 201, 20, 0.12);
}
.event-detail-gallery-add:disabled {
opacity: 0.5;
cursor: wait;
}
.event-detail-gallery-note {
margin: 0;
color: rgba(255, 255, 255, 0.6);
font-size: 0.85rem;
}
.event-detail-gallery-track {
display: flex;
gap: 0.75rem;
overflow-x: auto;
scroll-snap-type: x mandatory;
padding-bottom: 0.25rem;
}
.event-detail-gallery-item {
flex: 0 0 auto;
width: min(78%, 22rem);
aspect-ratio: 4 / 3;
overflow: hidden;
border-radius: 1rem;
background: #171415;
scroll-snap-align: start;
}
.event-detail-gallery-item {
position: relative;
margin: 0;
}
.event-detail-gallery-open {
display: block;
width: 100%;
height: 100%;
cursor: zoom-in;
}
.event-detail-gallery-item figcaption {
position: absolute;
left: 0.5rem;
bottom: 0.5rem;
max-width: calc(100% - 1rem);
overflow: hidden;
border-radius: 999px;
background: rgba(23, 20, 21, 0.72);
padding: 0.15rem 0.6rem;
color: #FFFFFF;
font-size: 0.72rem;
font-weight: 700;
text-overflow: ellipsis;
white-space: nowrap;
pointer-events: none;
}
.event-detail-gallery-remove {
position: absolute;
top: 0.5rem;
right: 0.5rem;
display: grid;
place-items: center;
width: 2.75rem;
height: 2.75rem;
border-radius: 999px;
background: rgba(23, 20, 21, 0.72);
color: #FFFFFF;
font-size: 1.4rem;
line-height: 1;
}
.event-detail-gallery-remove:hover {
color: #E4572E;
}
.event-detail-gallery-item :is(img, video) {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.event-detail-gallery-play {
position: absolute;
inset: 0;
display: grid;
place-items: center;
pointer-events: none;
}
.event-detail-gallery-play svg {
width: 3.25rem;
height: 3.25rem;
padding: 0.8rem;
border-radius: 999px;
background: rgba(23, 20, 21, 0.62);
fill: #FFFFFF;
}
.event-detail-hero[data-lightbox] {
cursor: zoom-in;
}
.event-detail-hero[data-lightbox] :is(a, button, h1, p) {
cursor: auto;
}
.event-detail-hero[data-lightbox] :is(a, button) {
cursor: pointer;
}
.event-detail-lightbox {
width: 100vw;
height: 100dvh;
max-width: none;
max-height: none;
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
background: #000000;
color: #FFFFFF;
overflow: hidden;
}
.event-detail-lightbox::backdrop {
background: #000000;
}
.event-detail-lightbox-stage {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: minmax(0, 1fr);
place-items: center;
width: 100%;
height: 100%;
}
.event-detail-lightbox-stage :is(img, video) {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
.event-detail-lightbox-close,
.event-detail-lightbox-nav {
position: absolute;
display: grid;
place-items: center;
width: 2.75rem;
height: 2.75rem;
border-radius: 999px;
background: rgba(23, 20, 21, 0.7);
color: #FFFFFF;
}
.event-detail-lightbox-close {
top: calc(0.75rem + env(safe-area-inset-top));
right: calc(0.75rem + env(safe-area-inset-right));
font-size: 1.6rem;
line-height: 1;
}
.event-detail-lightbox-nav {
top: 50%;
transform: translateY(-50%);
}
.event-detail-lightbox-nav[data-lightbox-step="-1"] {
left: calc(0.75rem + env(safe-area-inset-left));
}
.event-detail-lightbox-nav[data-lightbox-step="1"] {
right: calc(0.75rem + env(safe-area-inset-right));
}
.event-detail-lightbox-nav svg {
width: 1.4rem;
height: 1.4rem;
fill: none;
stroke: currentColor;
stroke-width: 2.5;
stroke-linecap: round;
stroke-linejoin: round;
}
.event-detail-lightbox-counter {
position: absolute;
left: 50%;
bottom: calc(1rem + env(safe-area-inset-bottom));
transform: translateX(-50%);
margin: 0;
padding: 0.2rem 0.7rem;
border-radius: 999px;
background: rgba(23, 20, 21, 0.7);
font-size: 0.8rem;
font-weight: 700;
}
.event-detail-lightbox[data-single] :is(.event-detail-lightbox-nav, .event-detail-lightbox-counter) {
display: none;
}
.event-detail-lightbox:has(video) .event-detail-lightbox-counter {
top: calc(1rem + env(safe-area-inset-top));
bottom: auto;
}
.event-detail-poll-badge {
display: inline-block;
margin-left: 0.5rem;
border-radius: 999px;
padding: 0.1rem 0.55rem;
background: rgba(255, 201, 20, 0.16);
color: #FFC914;
font-size: 0.7rem;
letter-spacing: 0.02em;
text-transform: none;
vertical-align: middle;
}
.event-detail-poll-badge[data-status="confirmed"] {
background: rgba(118, 176, 65, 0.18);
color: #9BD35F;
}
.event-detail-poll-badge[data-status="cancelled"] {
background: rgba(228, 87, 46, 0.18);
color: #FF9A80;
}
.event-detail-poll {
display: grid;
gap: 0.75rem;
}
.event-detail-poll > h2 {
color: var(--event-text-primary);
font-size: 1.15rem;
font-weight: 900;
}
.event-detail-poll-help {
color: rgba(255, 255, 255, 0.6);
font-size: 0.88rem;
}
.event-detail-poll ul {
display: grid;
gap: 0.6rem;
}
.event-detail-poll-date {
display: grid;
gap: 0.5rem;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 1rem;
padding: 0.85rem 1rem;
}
.event-detail-poll-date[aria-current="true"] {
border-color: #17BEBB;
}
.event-detail-poll-date[data-status="cancelled"] {
opacity: 0.6;
}
.event-detail-poll-date-head,
.event-detail-poll-date-foot {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
}
.event-detail-poll-date-head a {
color: #FFFFFF;
font-weight: 800;
}
.event-detail-poll-date-foot > span {
color: rgba(255, 255, 255, 0.6);
font-size: 0.85rem;
}
.event-detail-poll-date .event-detail-progress span {
background: #17BEBB;
}
.event-detail-poll-action {
min-height: 2.75rem;
border: 1px solid #17BEBB;
border-radius: 999px;
padding: 0 1.1rem;
display: inline-flex;
align-items: center;
color: #17BEBB;
font-size: 0.88rem;
font-weight: 800;
}
.event-detail-poll-action[data-joined="true"] {
background: #17BEBB;
color: #171415;
}
.event-detail-poll-add {
display: flex;
flex-wrap: wrap;
align-items: end;
gap: 0.5rem;
color: rgba(255, 255, 255, 0.7);
font-size: 0.85rem;
}
.event-detail-poll-add label {
display: grid;
gap: 0.25rem;
}
.event-detail-poll-add input {
min-height: 2.75rem;
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 0.8rem;
background: rgba(35, 31, 32, 0.7);
padding: 0 0.75rem;
color: #FFFFFF;
color-scheme: dark;
}
.event-detail-poll-add button {
min-height: 2.75rem;
border-radius: 0.8rem;
padding: 0 1rem;
background: rgba(23, 190, 187, 0.16);
color: #17BEBB;
font-weight: 800;
}
.event-detail-poll-error {
flex-basis: 100%;
color: #FF9A9D;
font-size: 0.8rem;
}
.event-detail-poll-dialog {
width: min(92vw, 28rem);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 1rem;
background: #231F20;
padding: 1.25rem;
color: #FFFFFF;
}
.event-detail-poll-dialog::backdrop {
background: rgba(0, 0, 0, 0.7);
}
.event-detail-poll-dialog form {
display: grid;
gap: 0.75rem;
}
.event-detail-poll-dialog p {
color: rgba(255, 255, 255, 0.7);
font-size: 0.9rem;
}
.event-detail-poll-dialog label {
display: flex;
min-height: 2.75rem;
align-items: center;
gap: 0.6rem;
}
.event-detail-poll-dialog-actions {
display: flex;
justify-content: flex-end;
gap: 0.75rem;
}
.event-detail-poll-dialog-actions button:first-child {
min-height: 2.75rem;
padding: 0 1rem;
color: rgba(255, 255, 255, 0.75);
}
.event-detail-poll-dialog-actions .event-detail-primary-action {
padding-inline: 1.5rem;
}
.event-detail-profile-link {
color: inherit;
text-decoration: underline;
text-decoration-color: rgba(255, 255, 255, 0.3);
text-underline-offset: 3px;
}
.event-detail-profile-link:hover { text-decoration-color: #17BEBB; }
:root {
--ha-perf-shadow-soft: 0 12px 30px rgba(0, 0, 0, 0.16);
--ha-perf-shadow-panel: 0 16px 40px rgba(0, 0, 0, 0.2);
}
body:is(
.home-page,
.explore-page,
.create-page,
.followed-page,
.my-events-page,
.profile-page,
.badge-page,
.event-detail-page,
.auth-page
) header,
body:is(
.home-page,
.explore-page,
.create-page,
.followed-page,
.my-events-page,
.profile-page,
.badge-page,
.event-detail-page,
.auth-page
) #profileMenu,
body:is(
.home-page,
.explore-page,
.create-page,
.followed-page,
.my-events-page,
.profile-page,
.badge-page,
.event-detail-page,
.auth-page
) #mobile-menu {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
body:is(.home-page, .explore-page, .create-page, .followed-page, .my-events-page, .profile-page, .badge-page) :is(.home-action-card,
.home-event-card,
.explore-search-panel,
.explore-control,
.create-card,
.followed-stats article,
.followed-person-row,
.followed-list-card,
.followed-empty,
.my-events-stats a,
.my-events-empty,
.profile-card,
.profile-current-badge,
.badge-card,
.badge-catalog-card) {
contain: layout paint;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
box-shadow: var(--ha-perf-shadow-soft) !important;
}
body:is(.home-page, .explore-page, .create-page, .followed-page, .my-events-page, .profile-page, .badge-page) :is(
section,
.home-section,
.explore-map-layout,
.followed-section,
.followed-browser,
.followed-list,
.followed-grid,
.my-events-section,
.profile-layout,
.badge-layout
) {
content-visibility: auto;
contain-intrinsic-block-size: auto 34rem;
}
body.create-page .create-layout,
body.event-detail-page .event-detail-content {
content-visibility: visible;
}
body.home-page .home-action-card::before {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
}
body.home-page :is(
.home-walker,
.home-walker *,
.home-minimal-walker,
.home-minimal-walker *,
.home-connector,
.home-connector *
) {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
}
body.create-page :is(.create-arrow, .create-arrow *, .create-accent, .create-accent *) {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
}
body:is(.home-page, .explore-page, .create-page, .followed-page, .my-events-page, .profile-page, .badge-page) :is(.home-action-card,
.event-card,
.followed-person-row,
.followed-list-card,
.profile-card,
.badge-card) {
transition-property: transform, opacity, border-color, background-color, color !important;
transition-duration: 180ms !important;
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
transition-duration: 0.001ms !important;
}
}
body.landing-page section:not(.hero-video-section) {
content-visibility: auto;
contain-intrinsic-block-size: auto 40rem;
}
body:not(.landing-page) header,
body.landing-page header {
will-change: auto;
}
img[loading="lazy"] {
content-visibility: auto;
}
.hero-fade-media video,
.hero-fade-media {
will-change: opacity;
transform: translateZ(0);
}
.reveal {
}
.card-shine {
isolation: isolate;
}
[class*="blur-3xl"] {
transform: translateZ(0);
will-change: auto;
}
.category-preview-card {
isolation: isolate;
transform: translateZ(0);
}
.category-preview-image {
will-change: transform;
}
@media (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth;
}
}
body.landing-page .noise-overlay {
contain: paint;
}
picture {
display: contents;
}
picture img {
display: block;
max-width: 100%;
}
@media (prefers-reduced-motion: no-preference) {
html.ha-page-loading body > :is(header, main, section, footer, .relative) {
opacity: 0;
transform: translate3d(0, 14px, 0);
}
html.ha-page-loading body > header {
transform: translate3d(0, -10px, 0);
}
html.ha-page-ready body > :is(header, main, section, footer, .relative) {
animation: haPageEnter 0.48s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
html.ha-page-ready body > header {
animation-duration: 0.36s;
}
html.ha-page-ready body > :is(main, section, .relative):nth-of-type(2),
html.ha-page-ready body > footer {
animation-delay: 0.06s;
}
}
@media (prefers-reduced-motion: reduce) {
html.ha-page-loading body > :is(header, main, section, footer, .relative) {
opacity: 1;
transform: none;
}
html.ha-page-ready body > :is(header, main, section, footer, .relative) {
animation: none !important;
}
html.ha-page-loading body > header {
transform: none;
}
}
@keyframes haPageEnter {
from {
opacity: 0;
transform: translate3d(0, 14px, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
body.explore-page #map.is-map-loading {
display: grid;
place-items: center;
background:
radial-gradient(circle at 45% 42%, rgba(23, 190, 187, 0.16), transparent 32%),
linear-gradient(135deg, #143f49 0%, #172f39 52%, #101f27 100%);
}
body.explore-page #map.is-map-loading::before {
content: "Caricamento mappa";
position: relative;
z-index: 1000;
display: inline-flex;
min-height: 2.5rem;
align-items: center;
justify-content: center;
border: 1px solid rgba(23, 190, 187, 0.28);
border-radius: 999px;
background: rgba(18, 16, 17, 0.72);
color: rgba(255, 255, 255, 0.76);
padding: 0 1rem;
font-size: 0.72rem;
font-weight: 900;
letter-spacing: 0.08em;
text-transform: uppercase;
backdrop-filter: blur(10px) saturate(1.1);
-webkit-backdrop-filter: blur(10px) saturate(1.1);
}
body.explore-page #map.is-map-loading .leaflet-map-pane {
opacity: 0;
}
body.explore-page #map.is-map-ready .leaflet-map-pane {
opacity: 1;
transition: opacity 0.18s ease;
}
body:is(
.home-page,
.explore-page,
.create-page,
.followed-page,
.my-events-page, .newsletter-private,
.profile-page,
.badge-page,
.event-detail-page,
.notifications-page
) header :is(a[aria-label*="HangingAround"], a[aria-label*="homepage"]) {
flex: 0 0 auto;
min-width: max-content;
}
body:is(
.home-page,
.explore-page,
.create-page,
.followed-page,
.my-events-page, .newsletter-private,
.profile-page,
.badge-page,
.event-detail-page,
.notifications-page
) header img[alt="Logo HangingAround"] {
width: auto !important;
min-width: 116px;
}
body:is(.home-page,
.explore-page,
.create-page,
.followed-page,
.my-events-page, .newsletter-private,
.profile-page,
.badge-page,
.event-detail-page,
.notifications-page) header :is(.notif-bell,
#profileBtn,
.profile-nav-button,
#menu-btn) {
min-height: 44px !important;
}
body:is(
.home-page,
.explore-page,
.create-page,
.followed-page,
.my-events-page, .newsletter-private,
.profile-page,
.badge-page,
.event-detail-page,
.notifications-page
) header :is(.notif-bell, #profileBtn, .profile-nav-button, #menu-btn) {
min-height: 44px !important;
}
body:is(
.home-page,
.explore-page,
.create-page,
.followed-page,
.my-events-page, .newsletter-private,
.profile-page,
.badge-page,
.event-detail-page,
.notifications-page
) header :is(.notif-bell, #menu-btn) {
width: 44px !important;
min-width: 44px !important;
height: 44px !important;
}
@media (min-width: 1024px) {
body:is(
.home-page,
.explore-page,
.create-page,
.followed-page,
.my-events-page, .newsletter-private,
.profile-page,
.badge-page,
.event-detail-page,
.notifications-page
) header :is(#profileBtn, .profile-nav-button) {
width: auto !important;
min-width: max-content !important;
height: 44px !important;
padding: 1px 0.9rem 1px 1px !important;
gap: 0.62rem !important;
}
body:is(
.home-page,
.explore-page,
.create-page,
.followed-page,
.my-events-page, .newsletter-private,
.profile-page,
.badge-page,
.event-detail-page,
.notifications-page
) header :is(#profileBtn, .profile-nav-button) > .profile-nav-avatar,
body.home-page header #profileBtn > div:first-child {
width: 42px !important;
min-width: 42px !important;
max-width: 42px !important;
height: 42px !important;
min-height: 42px !important;
max-height: 42px !important;
flex-basis: 42px !important;
}
body:is(
.home-page,
.explore-page,
.create-page,
.followed-page,
.my-events-page, .newsletter-private,
.profile-page,
.badge-page,
.event-detail-page,
.notifications-page
) header .profile-nav-avatar #navbarProfileInitials {
font-size: 0.88rem !important;
}
body:is(
.home-page,
.explore-page,
.create-page,
.followed-page,
.my-events-page, .newsletter-private,
.profile-page,
.badge-page,
.event-detail-page,
.notifications-page
) header :is(#profileBtn, .profile-nav-button) #navbarProfileName {
display: inline !important;
font-size: 17px !important;
font-weight: 800 !important;
line-height: 1 !important;
max-width: 12rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
body:is(.explore-page) :is(#search-button, #map-toggle),
body:is(.followed-page) :is(.followed-filter, .followed-action, .followed-mini-action),
body:is(.home-page) :is(.home-section-link),
body:is(.create-page) :is(.create-place-verify, .create-submit),
body:is(.auth-page) :is(input, select, .interest-tag, .social-auth-link) {
min-height: 44px !important;
}
body.explore-page :is(.explore-search-panel #search-input, .explore-search-panel #search-button, #sort-select),
body.home-page :is(.event-card) :is(button, a),
body.register-page :is(input:not([type="hidden"]), select, .interest-tag, button[type="submit"], .social-auth-link) {
min-height: 44px !important;
}
body:is(.landing-page, .home-page) footer input[type="email"] {
min-height: 44px !important;
}
body.register-page {
position: relative;
width: 100%;
max-width: 100%;
overflow-x: hidden;
background: #171415;
}
body.register-page::before {
content: '';
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
background:
linear-gradient(120deg, rgba(16, 14, 15, 0.46), rgba(23, 20, 21, 0.28) 48%, rgba(16, 14, 15, 0.5)),
url("../assets/Hero_homepage.webp") center / cover no-repeat;
}
body.auth-page > .auth-visual-surface {
overflow: hidden;
background:
linear-gradient(120deg, rgba(16, 14, 15, 0.46), rgba(23, 20, 21, 0.28) 48%, rgba(16, 14, 15, 0.5)),
url("../assets/Hero_homepage.webp") center / cover no-repeat;
isolation: isolate;
}
body.login-page > .auth-visual-surface {
min-height: 100dvh !important;
}
body.register-page > .auth-visual-surface {
z-index: 1;
background: transparent;
}
.birth-date-fieldset {
min-width: 0;
margin: 0;
padding: 0;
border: 0;
}
.birth-date-fieldset .birth-date-control {
opacity: 1;
transform: translate3d(0, 0, 0);
transition:
opacity 360ms cubic-bezier(0.22, 1, 0.36, 1),
transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
filter 220ms ease;
}
.birth-date-fieldset.is-motion-ready:not(.is-visible) .birth-date-control {
opacity: 0;
transform: translate3d(0, 0.7rem, 0) scale(0.975);
}
.birth-date-fieldset .birth-date-control:nth-child(2) {
transition-delay: 70ms;
}
.birth-date-fieldset .birth-date-control:nth-child(3) {
transition-delay: 140ms;
}
.birth-date-fieldset .birth-date-control:focus-within {
filter: drop-shadow(0 8px 18px rgba(23, 190, 187, 0.13));
transform: translate3d(0, -1px, 0);
}
@media (prefers-reduced-motion: reduce) {
.birth-date-fieldset .birth-date-control,
.birth-date-fieldset.is-motion-ready:not(.is-visible) .birth-date-control {
opacity: 1;
transform: none;
transition: none;
}
}
body.auth-page > .auth-visual-surface > video,
body.auth-page > .auth-visual-surface > .auth-visual-overlay {
display: none !important;
}
body.login-page {
background: #171415;
}
.auth-password-field {
position: relative;
}
.auth-password-field > input {
padding-right: 3.25rem !important;
}
.auth-password-toggle {
position: absolute;
top: 50%;
right: 0.2rem;
display: grid;
width: 44px;
height: 44px;
place-items: center;
transform: translateY(-50%);
border: 0;
border-radius: 999px;
background: transparent;
color: rgba(255, 255, 255, 0.55);
transition: color 160ms ease;
}
.auth-password-toggle:hover,
.auth-password-toggle:focus-visible,
.auth-password-toggle[aria-pressed="true"] {
color: #17bebb;
}
.password-eye {
width: 1.25rem;
height: 1.25rem;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.auth-password-toggle .password-eye-closed,
.auth-password-toggle[aria-pressed="true"] .password-eye-open {
display: none;
}
.auth-password-toggle[aria-pressed="true"] .password-eye-closed {
display: block;
}
body.register-page .auth-card input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
body.register-page .auth-card select {
min-height: 44px !important;
padding-top: 0.65rem !important;
padding-bottom: 0.65rem !important;
font-size: 1rem !important;
}
@media (min-width: 768px) {
body.register-page .auth-card input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
body.register-page .auth-card select {
font-size: 0.92rem !important;
}
}
body:is(.landing-page, .home-page) footer {
background:
radial-gradient(circle at 12% 0%, rgba(23, 190, 187, 0.08), transparent 22rem),
radial-gradient(circle at 92% 18%, rgba(255, 201, 20, 0.07), transparent 20rem),
rgba(16, 14, 15, 0.96) !important;
}
body:is(.landing-page, .home-page) footer > div:first-child {
align-items: start;
}
body:is(.landing-page, .home-page) footer h4 {
color: rgba(255, 255, 255, 0.62) !important;
letter-spacing: 0.14em !important;
}
body:is(.landing-page, .home-page) footer :is(p, li, a) {
line-height: 1.65;
}
body:is(.landing-page, .home-page) footer ul a,
body:is(.landing-page, .home-page) footer p a[href^="mailto:"] {
display: inline-flex;
min-height: 2rem;
align-items: center;
}
.badge-catalog-empty {
grid-column: 1 / -1;
display: grid;
justify-items: start;
gap: 0.7rem;
min-height: 16rem;
padding: clamp(1.4rem, 4vw, 2.5rem);
border: 1px dashed rgba(23, 190, 187, 0.3);
border-radius: 1.35rem;
background:
radial-gradient(circle at 88% 20%, rgba(255, 201, 20, 0.1), transparent 13rem),
rgba(255, 255, 255, 0.025);
align-content: center;
}
.badge-catalog-empty-symbol {
display: grid;
width: 3rem;
height: 3rem;
place-items: center;
border: 1px solid rgba(23, 190, 187, 0.36);
border-radius: 1rem;
background: rgba(23, 190, 187, 0.1);
color: #17BEBB;
font-size: 1.4rem;
}
.badge-catalog-empty h3 {
color: #fff;
font-size: clamp(1.25rem, 3vw, 1.7rem);
font-weight: 900;
}
.badge-catalog-empty p {
max-width: 38rem;
color: rgba(255, 255, 255, 0.6);
line-height: 1.65;
}
.badge-catalog-empty a {
display: inline-flex;
min-height: 44px;
align-items: center;
padding: 0.7rem 1rem;
border-radius: 0.8rem;
background: #17BEBB;
color: #171415;
font-size: 0.85rem;
font-weight: 900;
}
body:is(.landing-page, .home-page) footer input[type="email"] {
border-radius: 0.9rem 0 0 0.9rem !important;
}
body:is(.landing-page, .home-page) footer input[type="email"] + button {
min-height: 44px !important;
border-radius: 0 0.9rem 0.9rem 0 !important;
box-shadow: 0 10px 28px rgba(255, 201, 20, 0.18);
}
@media (max-width: 767px) {
body:is(.landing-page, .home-page) footer :is(ul a, p a[href^="mailto:"]) {
min-height: 44px;
}
body:is(.explore-page, .followed-page, .badge-page) :is(.followed-filter, .badge-filter),
body.my-events-page :is(.my-events-tab, .my-events-card-actions a, .my-events-card-actions button) {
min-height: 44px !important;
}
body:is(
.home-page,
.explore-page,
.create-page,
.followed-page,
.my-events-page, .newsletter-private,
.profile-page,
.badge-page,
.event-detail-page,
.notifications-page
) header :is(nav, > div:first-child) {
padding-inline: 0.75rem !important;
}
body:is(
.home-page,
.explore-page,
.create-page,
.followed-page,
.my-events-page, .newsletter-private,
.profile-page,
.badge-page,
.event-detail-page,
.notifications-page
) header :is(nav > div:first-child, > div:first-child) {
gap: 0.42rem !important;
}
body:is(
.home-page,
.explore-page,
.create-page,
.followed-page,
.my-events-page, .newsletter-private,
.profile-page,
.badge-page,
.event-detail-page,
.notifications-page
) header :is(a[aria-label*="HangingAround"], a[aria-label*="homepage"]) {
flex: 0 1 auto;
min-width: 0;
max-width: none;
overflow: visible;
}
body:is(
.home-page,
.explore-page,
.create-page,
.followed-page,
.my-events-page, .newsletter-private,
.profile-page,
.badge-page,
.event-detail-page,
.notifications-page
) header img[alt="Logo HangingAround"] {
width: auto !important;
min-width: 0;
max-width: 52vw !important;
height: 3rem !important;
max-height: none !important;
object-fit: contain;
}
body:is(
.home-page,
.explore-page,
.create-page,
.followed-page,
.my-events-page, .newsletter-private,
.profile-page,
.badge-page,
.event-detail-page,
.notifications-page
) header :is(.notif-bell, #profileBtn, .profile-nav-button, #menu-btn) {
width: 44px !important;
min-width: 44px !important;
height: 44px !important;
min-height: 44px !important;
}
body.home-page #home-welcome-title {
font-size: clamp(2.25rem, 11.5vw, 3.3rem) !important;
}
body.home-page .home-hero-copy {
max-width: 24rem;
font-size: 0.96rem;
line-height: 1.55;
}
body:is(.landing-page, .home-page) footer > div:first-child {
gap: 2rem !important;
padding-top: 3rem !important;
padding-bottom: 3rem !important;
}
body:is(.landing-page, .home-page) footer .flex:has(input[type="email"]) {
gap: 0.5rem;
}
body:is(.landing-page, .home-page) footer input[type="email"],
body:is(.landing-page, .home-page) footer input[type="email"] + button {
border-radius: 0.9rem !important;
}
}
body.home-page .home-actions-section {
position: relative;
z-index: 2;
margin-top: clamp(-2.4rem, -2.8vw, -1.45rem);
padding-top: clamp(7.2rem, 9vw, 8.9rem) !important;
overflow: hidden;
isolation: isolate;
}
body.home-page .home-hero-section {
min-height: calc(100svh - 4.75rem) !important;
height: auto !important;
padding-top: clamp(4.8rem, 7vw, 6.4rem) !important;
padding-bottom: clamp(5.25rem, 7vw, 6.8rem) !important;
}
body.home-page .home-actions-section::before {
content: '';
position: absolute;
top: clamp(-4.4rem, -5.5vw, -3.2rem);
right: -4vw;
left: -4vw;
z-index: -2;
height: clamp(14rem, 19vw, 18rem);
pointer-events: none;
background:
linear-gradient(180deg,
rgba(23, 20, 21, 0.02) 0%,
rgba(23, 20, 21, 0.32) 34%,
rgba(23, 20, 21, 0.84) 74%,
#171415 100%),
url("../assets/Hero_homepage.webp") center bottom / cover no-repeat;
filter: blur(20px) saturate(0.82) brightness(0.64);
opacity: 0.96;
transform: scale(1.06);
}
body.home-page .home-actions-section::after {
content: '';
position: absolute;
top: clamp(1.9rem, 3.6vw, 3.4rem);
right: 0;
left: 0;
z-index: -1;
height: clamp(9rem, 12vw, 11.5rem);
pointer-events: none;
background:
radial-gradient(ellipse at 28% 52%, rgba(118, 176, 65, 0.14), transparent 30rem),
radial-gradient(ellipse at 72% 52%, rgba(228, 87, 46, 0.14), transparent 30rem),
linear-gradient(180deg, rgba(23, 20, 21, 0), #171415 74%);
filter: blur(14px);
}
body.home-page .home-actions-shell {
width: 100% !important;
max-width: none !important;
padding-right: 0 !important;
padding-left: 0 !important;
}
body.home-page .home-actions-title,
body.home-page .home-actions-title.home-section-heading-center {
position: relative;
z-index: 4;
max-width: none;
margin-right: auto;
margin-bottom: 0;
margin-left: clamp(1.5rem, 4vw, 4rem);
text-align: center !important;
}
body.home-page .home-actions-title h2 {
margin-inline: auto;
max-width: calc(100vw - 3rem);
font-size: clamp(1.9rem, 4.2vw, 3.9rem) !important;
line-height: 1 !important;
letter-spacing: 0 !important;
text-shadow: 0 0.35rem 2rem rgba(0, 0, 0, 0.52);
white-space: nowrap;
}
body.home-page .home-action-story {
position: relative;
display: grid;
gap: clamp(0.75rem, 1.8vw, 1.75rem);
margin-top: clamp(1.35rem, 2.2vw, 2.2rem);
padding-top: clamp(1.2rem, 2vw, 1.8rem);
isolation: isolate;
}
body.home-page .home-action-story::before {
content: '';
position: absolute;
inset: -5rem 0 -4rem;
z-index: -2;
pointer-events: none;
background:
radial-gradient(ellipse at 8% 18%, rgba(118, 176, 65, 0.11), transparent 38rem),
radial-gradient(ellipse at 92% 72%, rgba(228, 87, 46, 0.12), transparent 42rem),
linear-gradient(180deg, transparent 0%, rgba(23, 20, 21, 0.34) 48%, transparent 100%);
}
body.home-page .home-action-story::after {
content: '';
position: absolute;
display: none;
top: clamp(0.5rem, 1vw, 1rem);
bottom: clamp(0.5rem, 1vw, 1rem);
left: 50%;
z-index: 2;
width: clamp(5rem, 10vw, 9rem);
pointer-events: none;
background:
radial-gradient(ellipse at 50% 50%, rgba(23, 20, 21, 0.86), rgba(23, 20, 21, 0.46) 44%, transparent 72%),
linear-gradient(90deg, transparent, rgba(23, 20, 21, 0.8) 48%, rgba(23, 20, 21, 0.8) 52%, transparent);
filter: blur(12px);
transform: translateX(-50%);
}
body.home-page .home-action-row {
position: relative;
display: grid;
min-height: clamp(22rem, 36vw, 34rem);
align-items: center;
overflow: visible;
isolation: isolate;
}
body.home-page .home-action-row::before {
content: '';
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background:
linear-gradient(180deg,
rgba(23, 20, 21, 0.34) 0%,
rgba(23, 20, 21, 0) 22%,
rgba(23, 20, 21, 0) 78%,
rgba(23, 20, 21, 0.34) 100%);
}
body.home-page .home-action-row-create {
justify-items: start;
padding-left: clamp(1.5rem, 8vw, 7rem);
}
body.home-page .home-action-row-explore {
justify-items: end;
margin-top: clamp(-4.5rem, -6vw, -2.25rem);
padding-right: clamp(1.5rem, 8vw, 7rem);
}
body.home-page .home-action-visual {
position: absolute;
top: 0;
bottom: clamp(-2.25rem, -4vw, -1rem);
z-index: -1;
width: min(82vw, 66rem);
background-position: center;
background-size: cover;
opacity: 0.78;
filter: saturate(0.96) contrast(1.03);
transform: translateZ(0);
}
body.home-page .home-action-visual::before {
content: '';
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background:
linear-gradient(180deg,
rgba(23, 20, 21, 0.38) 0%,
rgba(23, 20, 21, 0.16) 16%,
rgba(23, 20, 21, 0.04) 31%,
rgba(23, 20, 21, 0) 48%,
rgba(23, 20, 21, 0.28) 100%);
}
body.home-page .home-action-visual::after {
content: '';
position: absolute;
inset: 0;
z-index: 2;
background:
linear-gradient(180deg, rgba(23, 20, 21, 0.28), rgba(23, 20, 21, 0.58)),
radial-gradient(circle at 34% 66%, rgba(255, 201, 20, 0.14), transparent 42%),
rgba(23, 20, 21, 0.22);
}
body.home-page .home-action-row-create .home-action-visual {
left: 0;
background-image: url("../assets/card_.esplora_evento.webp?v=20260717-img-v3");
-webkit-mask-image: radial-gradient(ellipse 86% 76% at 18% 50%, #000 0%, #000 42%, rgba(0, 0, 0, 0.42) 66%, transparent 90%);
mask-image: radial-gradient(ellipse 86% 76% at 18% 50%, #000 0%, #000 42%, rgba(0, 0, 0, 0.42) 66%, transparent 90%);
}
body.home-page .home-action-row-explore .home-action-visual {
right: 0;
background-image: url("../assets/card_ituoi_eventi.webp?v=20260717-img-v3");
background-position: calc(50% - clamp(5rem, 16vw, 14rem)) 38%;
-webkit-mask-image: radial-gradient(ellipse 86% 76% at 82% 50%, #000 0%, #000 42%, rgba(0, 0, 0, 0.42) 66%, transparent 90%);
mask-image: radial-gradient(ellipse 86% 76% at 82% 50%, #000 0%, #000 42%, rgba(0, 0, 0, 0.42) 66%, transparent 90%);
}
body.home-page .home-action-row .home-action-card {
position: relative;
z-index: 1;
width: min(100%, 29rem);
min-height: auto !important;
justify-content: flex-start;
border-width: 0 0 0 2px !important;
border-color: rgba(255, 201, 20, 0.74) !important;
border-radius: 0 !important;
background:
linear-gradient(90deg, rgba(23, 20, 21, 0.72), rgba(23, 20, 21, 0.38) 72%, transparent),
transparent !important;
padding: clamp(1.1rem, 2.2vw, 1.7rem) clamp(1.1rem, 2.2vw, 1.8rem) !important;
box-shadow: none !important;
}
body.home-page .home-action-row .home-action-card::before,
body.home-page .home-action-row .home-action-card::after {
content: none !important;
display: none !important;
}
body.home-page .home-action-row .home-action-kicker {
margin: 0 0 0.8rem;
color: rgba(255, 255, 255, 0.72) !important;
font-size: 0.74rem;
font-weight: 900;
letter-spacing: 0.16em;
line-height: 1;
text-transform: uppercase;
text-shadow: none;
}
body.home-page .home-action-row .home-action-card h2 {
max-width: 9ch;
color: #FFFFFF !important;
font-size: clamp(2rem, 4vw, 3.75rem) !important;
line-height: 0.92 !important;
text-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
}
body.home-page .home-action-row .home-action-card p:not(.home-action-kicker) {
max-width: 24rem;
color: rgba(255, 255, 255, 0.82) !important;
font-size: clamp(0.95rem, 1.25vw, 1.05rem);
line-height: 1.58;
text-shadow: none;
}
body.home-page .home-action-row .home-action-card > a {
align-self: flex-start;
min-height: 2.85rem;
border-radius: 999px !important;
padding-inline: 1.1rem !important;
}
body.home-page .home-action-row .home-action-card-explore > a::before {
content: '<-' !important;
display: inline-block;
font-size: 0.84em;
font-weight: 900;
transform: translateX(0);
animation: homeActionArrowLeft 1.35s ease-in-out infinite;
}
body.home-page .home-action-row .home-action-card-create > a::after {
animation: homeActionArrowRight 1.35s ease-in-out infinite;
}
body.home-page .home-action-row .home-action-card-explore > a::after {
content: none !important;
display: none !important;
}
body.home-page .home-action-row .home-action-card-create > a,
body.home-page .home-action-row .home-action-card-explore > a {
animation: homeActionButtonIdle 2.4s ease-in-out infinite;
}
body.home-page .home-action-row .home-action-card-create > a {
background: #76B041 !important;
color: #171415 !important;
}
body.home-page .home-action-row .home-action-card-explore > a {
background: #E4572E !important;
color: #FFFFFF !important;
}
@keyframes homeActionArrowRight {
0%,
100% {
transform: translateX(0);
}
50% {
transform: translateX(0.24rem);
}
}
@keyframes homeActionArrowLeft {
0%,
100% {
transform: translateX(0);
}
50% {
transform: translateX(-0.24rem);
}
}
@keyframes homeActionButtonIdle {
0%,
100% {
box-shadow: 0 0 0 rgba(255, 255, 255, 0);
}
50% {
box-shadow: 0 0.55rem 1.25rem rgba(0, 0, 0, 0.18);
}
}
@media (prefers-reduced-motion: reduce) {
body.home-page .home-action-row .home-action-card-create > a,
body.home-page .home-action-row .home-action-card-create > a::after,
body.home-page .home-action-row .home-action-card-explore > a,
body.home-page .home-action-row .home-action-card-explore > a::before {
animation: none !important;
}
}
body.home-page .home-action-row-explore .home-action-card {
border-right-width: 2px !important;
border-left-width: 0 !important;
border-right-color: rgba(228, 87, 46, 0.78) !important;
background:
linear-gradient(270deg, rgba(23, 20, 21, 0.72), rgba(23, 20, 21, 0.38) 72%, transparent),
transparent !important;
text-align: left;
}
@media (min-width: 900px) {
body.home-page .home-action-story::after {
display: block;
}
body.home-page .home-action-story {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 0;
min-height: clamp(23rem, 31vw, 30rem);
overflow: hidden;
}
body.home-page .home-action-story::before {
inset: -3rem 0;
background:
radial-gradient(ellipse at 22% 38%, rgba(118, 176, 65, 0.1), transparent 35rem),
radial-gradient(ellipse at 78% 56%, rgba(228, 87, 46, 0.11), transparent 35rem),
linear-gradient(180deg, rgba(23, 20, 21, 0.28), transparent 26%, transparent 74%, rgba(23, 20, 21, 0.3));
}
body.home-page .home-action-row {
min-height: inherit;
overflow: hidden;
}
body.home-page .home-action-row::before {
background:
linear-gradient(180deg,
rgba(23, 20, 21, 0.6) 0%,
rgba(23, 20, 21, 0.12) 18%,
rgba(23, 20, 21, 0) 50%,
rgba(23, 20, 21, 0.28) 100%);
}
body.home-page .home-action-row-create {
padding-right: clamp(3rem, 6vw, 6rem);
}
body.home-page .home-action-row-explore {
margin-top: 0;
padding-left: clamp(3rem, 6vw, 6rem);
}
body.home-page .home-action-visual {
inset: 0;
width: 100%;
opacity: 0.86;
}
body.home-page .home-action-row-create .home-action-visual {
-webkit-mask-image:
linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.46) 14%, #000 32%, #000 100%),
linear-gradient(to right, #000 0%, #000 54%, rgba(0, 0, 0, 0.72) 70%, transparent 100%);
-webkit-mask-composite: source-in;
mask-image:
linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.46) 14%, #000 32%, #000 100%),
linear-gradient(to right, #000 0%, #000 54%, rgba(0, 0, 0, 0.72) 70%, transparent 100%);
mask-composite: intersect;
}
body.home-page .home-action-row-explore .home-action-visual {
-webkit-mask-image:
linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.46) 14%, #000 32%, #000 100%),
linear-gradient(to left, #000 0%, #000 54%, rgba(0, 0, 0, 0.72) 70%, transparent 100%);
-webkit-mask-composite: source-in;
mask-image:
linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.46) 14%, #000 32%, #000 100%),
linear-gradient(to left, #000 0%, #000 54%, rgba(0, 0, 0, 0.72) 70%, transparent 100%);
mask-composite: intersect;
}
body.home-page .home-action-row .home-action-card {
width: min(100%, 27.5rem);
}
body.home-page .home-action-row-explore .home-action-card {
justify-self: end;
}
}
body.home-page .home-saved-section {
padding-top: 1rem !important;
padding-bottom: clamp(4rem, 7vw, 6rem) !important;
scroll-margin-top: 5rem;
}
body.home-page .home-saved-section::before {
content: '';
position: absolute;
inset: -5rem 0 auto;
height: 11rem;
pointer-events: none;
background:
linear-gradient(180deg, rgba(23, 20, 21, 0.02), rgba(23, 20, 21, 0.92) 72%, transparent),
radial-gradient(ellipse at 50% 0%, rgba(255, 201, 20, 0.08), transparent 42rem);
}
body.home-page .home-saved-shell {
position: relative;
z-index: 1;
}
body.home-page .home-saved-section .home-section-top {
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
align-items: center;
gap: 1rem;
}
body.home-page .home-saved-section .home-section-heading {
grid-column: 2;
margin-bottom: 0 !important;
text-align: center;
}
body.home-page .home-saved-section .home-section-heading span {
margin-right: auto;
margin-left: auto;
}
body.home-page .home-saved-section .home-section-link {
grid-column: 3;
justify-self: end;
}
body.home-page .home-saved-dashboard {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: clamp(1rem, 2vw, 1.4rem);
align-items: stretch;
}
body.home-page .home-saved-main,
body.home-page .home-agenda-panel,
body.home-page .home-recommended-panel {
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 1.05rem;
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.016)),
rgba(23, 20, 21, 0.46);
}
body.home-page .home-saved-main,
body.home-page .home-recommended-panel {
min-height: 18rem;
padding: clamp(0.85rem, 1.5vw, 1rem);
}
body.home-page .home-recommended-panel {
position: relative;
overflow: hidden;
}
body.home-page .home-recommended-panel::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(circle at 14% 10%, rgba(228, 87, 46, 0.12), transparent 18rem),
radial-gradient(circle at 90% 92%, rgba(23, 190, 187, 0.12), transparent 18rem);
}
body.home-page .home-recommended-panel > * {
position: relative;
z-index: 1;
}
body.home-page .home-dashboard-panel-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
margin-bottom: 0.95rem;
padding: 0.15rem 0.1rem 0;
}
body.home-page .home-dashboard-panel-head p {
color: #17BEBB;
font-size: 0.68rem;
font-weight: 900;
letter-spacing: 0.16em;
line-height: 1;
text-transform: uppercase;
}
body.home-page .home-dashboard-panel-head h3 {
color: #FFFFFF;
font-size: clamp(1.2rem, 1.8vw, 1.55rem);
font-weight: 900;
line-height: 1;
}
body.home-page .home-dashboard-panel-head a {
display: inline-flex;
flex: 0 0 auto;
min-height: 2.35rem;
align-items: center;
justify-content: center;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 999px;
background: rgba(255, 255, 255, 0.045);
padding: 0 0.8rem;
color: rgba(255, 255, 255, 0.72);
font-size: 0.78rem;
font-weight: 900;
transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
body.home-page .home-dashboard-panel-head a:hover,
body.home-page .home-dashboard-panel-head a:focus-visible {
border-color: rgba(255, 201, 20, 0.42);
background: rgba(255, 201, 20, 0.1);
color: #FFFFFF;
outline: none;
}
body.home-page #saved-events-container {
display: grid;
gap: 0.72rem;
}
body.home-page .home-recommended-rail {
display: grid;
gap: 0.72rem;
}
body.home-page .home-recommended-empty {
display: grid;
min-height: 12rem;
place-items: center;
gap: 0.75rem;
border: 1px dashed rgba(255, 255, 255, 0.14);
border-radius: 0.9rem;
color: rgba(255, 255, 255, 0.58);
text-align: center;
}
body.home-page .home-recommended-empty a {
display: inline-flex;
min-height: 2.55rem;
align-items: center;
border-radius: 999px;
background: #17BEBB;
padding: 0 1rem;
color: #171415;
font-weight: 900;
}
body.home-page .home-agenda-panel {
position: relative;
overflow: hidden;
display: grid;
align-content: space-between;
gap: 1.35rem;
min-height: 18rem;
padding: clamp(1.1rem, 2vw, 1.35rem);
}
body.home-page .home-agenda-panel::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(circle at 20% 16%, rgba(23, 190, 187, 0.16), transparent 18rem),
radial-gradient(circle at 86% 94%, rgba(255, 201, 20, 0.16), transparent 18rem);
}
body.home-page .home-agenda-panel > * {
position: relative;
z-index: 1;
}
body.home-page .home-agenda-kicker {
color: #17BEBB;
font-size: 0.7rem;
font-weight: 900;
letter-spacing: 0.16em;
line-height: 1;
text-transform: uppercase;
}
body.home-page .home-agenda-panel h3 {
margin-top: 0.7rem;
max-width: 12rem;
color: #FFFFFF;
font-size: clamp(1.5rem, 2.2vw, 2rem);
font-weight: 900;
line-height: 0.98;
}
body.home-page .home-agenda-actions {
display: grid;
gap: 0.55rem;
}
body.home-page .home-agenda-actions a {
display: flex;
min-height: 2.75rem;
align-items: center;
justify-content: space-between;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 0.9rem;
background: rgba(255, 255, 255, 0.045);
padding: 0 0.9rem;
color: rgba(255, 255, 255, 0.82);
font-size: 0.88rem;
font-weight: 850;
transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
body.home-page .home-agenda-actions a::after {
content: '->';
color: #FFC914;
}
body.home-page .home-agenda-actions a:hover,
body.home-page .home-agenda-actions a:focus-visible {
border-color: rgba(23, 190, 187, 0.5);
background: rgba(23, 190, 187, 0.1);
color: #FFFFFF;
outline: none;
transform: translateY(-1px);
}
body.home-page .home-agenda-tags {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
}
body.home-page .home-agenda-tags span,
body.home-page .saved-event-chip {
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 999px;
background: rgba(255, 255, 255, 0.055);
color: rgba(255, 255, 255, 0.68);
font-size: 0.78rem;
font-weight: 800;
}
body.home-page .home-agenda-tags span {
padding: 0.45rem 0.72rem;
}
body.home-page .saved-events-empty {
min-height: 100%;
border: 0 !important;
border-radius: 0.85rem !important;
background:
linear-gradient(135deg, rgba(23, 190, 187, 0.08), rgba(255, 201, 20, 0.045) 54%, rgba(228, 87, 46, 0.08)),
rgba(255, 255, 255, 0.035) !important;
box-shadow: none !important;
}
body.home-page .saved-events-empty::before {
width: 0.16rem;
background: linear-gradient(180deg, #17BEBB, #FFC914, #E4572E);
}
body.landing-page #chi,
body.landing-page #cosa,
body.landing-page #eventi {
--landing-content-scale: 1.08;
}
body.landing-page #chi .landing-about-grid > div > p,
body.landing-page #chi .landing-about-grid .card-shine p,
body.landing-page #cosa .grid > div .card-shine p,
body.landing-page #eventi .category-preview-card p {
font-size: 1rem !important;
line-height: 1.62;
}
body.landing-page #chi .landing-about-stats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
text-align: center;
}
body.landing-page #chi .landing-about-stats > * {
min-width: 0;
padding: 0.25rem 0.5rem;
}
body.landing-page #chi .landing-about-stats > * + * {
border-left: 1px solid rgba(255, 255, 255, 0.1);
}
body.landing-page #chi .landing-about-stats p + p {
white-space: nowrap;
font-size: 0.72rem;
}
body.landing-page #chi .landing-about-stats p:first-child {
font-size: clamp(1.55rem, 8vw, 1.875rem);
}
@media (min-width: 768px) {
body.landing-page #chi .landing-about-stats {
max-width: 26rem;
text-align: left;
}
body.landing-page #chi .landing-about-stats > * {
padding: 0.25rem 0.9rem;
}
body.landing-page #chi .landing-about-stats > :first-child {
padding-left: 0;
}
body.landing-page #chi .landing-about-stats p + p {
font-size: 0.78rem;
}
}
@media (min-width: 1024px) {
body.landing-page #chi .landing-about-stats > * {
padding-inline: 1.5rem;
}
body.landing-page #chi .landing-about-stats > :first-child {
padding-left: 0;
}
}
body.landing-page #chi .landing-about-grid .card-shine,
body.landing-page #cosa .grid > div .card-shine {
padding: 1.8rem !important;
}
body.landing-page #chi .landing-about-grid .card-shine h3,
body.landing-page #cosa .grid > div .card-shine h3,
body.landing-page #eventi .category-preview-card h3 {
font-size: 1.3rem !important;
}
body.landing-page #eventi .category-preview-card {
min-height: 13rem;
padding: 2.2rem !important;
}
body.landing-page #chi > div > .flex > span,
body.landing-page #cosa > div > .flex > span,
body.landing-page #eventi > div > .flex > span {
font-size: 0.82rem;
}
@media (min-width: 768px) {
body.landing-page #chi .landing-about-grid,
body.landing-page #cosa .grid,
body.landing-page #eventi .grid {
gap: clamp(2.2rem, 3vw, 3.4rem);
}
body.landing-page #chi h2,
body.landing-page #cosa h2,
body.landing-page #eventi h2 {
font-size: clamp(3.1rem, 5.2vw, 4.4rem) !important;
}
}
@media (min-width: 900px) {
body.home-page .home-saved-dashboard {
grid-template-columns: minmax(0, 1.08fr) minmax(20rem, 0.92fr);
}
}
@media (max-width: 767px) {
body.home-page .home-saved-section {
padding-top: 1rem !important;
scroll-margin-top: 5.5rem;
}
body.home-page .home-saved-section::before {
display: none;
}
body.home-page .home-saved-section .home-section-top {
grid-template-columns: 1fr;
justify-items: center;
text-align: center;
}
body.home-page .home-saved-section .home-section-heading,
body.home-page .home-saved-section .home-section-link {
grid-column: 1;
}
body.home-page .home-section-heading span {
margin-right: auto;
margin-left: auto;
}
}
body.home-page .home-action-row .home-action-card:hover,
body.home-page .home-action-row .home-action-card:focus-within {
transform: translateY(-4px) scale(1.01);
}
body:is(
.landing-page,
.home-page,
.explore-page,
.create-page,
.followed-page,
.my-events-page,
.profile-page,
.badge-page,
.event-detail-page,
.notifications-page,
.auth-page,
.legal-page
) :is(a, button, input, select, textarea):focus-visible {
outline: 0 !important;
box-shadow:
0 0 0 3px rgba(23, 190, 187, 0.26),
0 0 0 6px rgba(255, 201, 20, 0.12) !important;
}
body:is(.legal-page, .newsletter-page) {
min-height: 100dvh;
background:
radial-gradient(circle at 12% 0%, rgba(23, 190, 187, 0.13), transparent 24rem),
radial-gradient(circle at 88% 100%, rgba(255, 201, 20, 0.1), transparent 26rem),
linear-gradient(135deg, #2E282A 0%, #231F20 44%, #171415 100%),
#171415 !important;
color: rgba(255, 255, 255, 0.78) !important;
}
.legal-faq-grid {
display: grid;
gap: 0.85rem;
}
.legal-faq-grid details,
.community-guideline-grid article {
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 1.1rem;
background: rgba(46, 40, 42, 0.62);
box-shadow: 0 18px 44px rgba(0, 0, 0, 0.16);
}
.legal-faq-grid details {
padding: 0 1.1rem;
}
.legal-faq-grid summary {
min-height: 3.5rem;
cursor: pointer;
align-content: center;
color: #FFFFFF;
font-weight: 800;
}
.legal-faq-grid details p {
border-top: 1px solid rgba(255, 255, 255, 0.08);
padding: 1rem 0 1.15rem;
}
.legal-faq-grid a,
.community-guideline-grid a {
color: #17BEBB;
}
.community-guideline-grid {
display: grid;
gap: 1rem;
}
.community-guideline-grid article {
padding: 1.25rem;
}
.community-guideline-grid article > span {
color: #FFC914;
font-size: 0.72rem;
font-weight: 900;
letter-spacing: 0.16em;
}
.community-guideline-grid h2 {
margin-top: 0.45rem;
color: #FFFFFF;
font-size: 1.1rem;
font-weight: 900;
}
.community-guideline-grid p {
margin-top: 0.55rem;
line-height: 1.65;
}
@media (min-width: 640px) {
.community-guideline-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
body:is(.legal-page, .newsletter-page) header {
background:
linear-gradient(135deg, rgba(23, 190, 187, 0.08), rgba(255, 201, 20, 0.035) 52%, rgba(228, 87, 46, 0.045)),
rgba(23, 20, 21, 0.88) !important;
border-color: rgba(255, 255, 255, 0.12) !important;
box-shadow: 0 14px 36px rgba(0, 0, 0, 0.2);
}
body.legal-page main {
position: relative;
}
body.legal-page main::before {
content: '';
display: block;
width: min(8rem, 34vw);
height: 0.18rem;
margin: 0 0 2rem;
border-radius: 999px;
background: linear-gradient(90deg, #17BEBB, #FFC914, #E4572E);
}
body.legal-page :is(h1, h2) {
color: #FFFFFF !important;
}
body.legal-page :is(p, li, main > div:last-child) {
color: rgba(255, 255, 255, 0.72) !important;
}
body.legal-page a {
color: #17BEBB !important;
text-underline-offset: 0.18em;
}
body.legal-page a:hover,
body.legal-page a:focus-visible {
color: #FFC914 !important;
}
body:is(.legal-page, .newsletter-page) .legal-home-button {
display: inline-flex;
min-height: 2.75rem;
align-items: center;
flex-shrink: 0;
border-radius: 0.75rem;
background: #FFC914;
padding: 0 1.25rem;
color: #171415 !important;
font-size: 0.9rem;
font-weight: 800;
white-space: nowrap;
text-decoration: none;
transition: background-color 0.2s ease;
}
body:is(.legal-page, .newsletter-page) .legal-home-button:hover,
body:is(.legal-page, .newsletter-page) .legal-home-button:focus-visible {
background: #FFD84D;
color: #171415 !important;
}
body.profile-page .profile-avatar-stage::before {
display: none;
}
body:is(
.landing-page,
.home-page,
.explore-page,
.create-page,
.followed-page,
.my-events-page, .newsletter-private,
.profile-page,
.badge-page,
.event-detail-page,
.notifications-page
) header .profile-nav-avatar:has(> .profile-nav-image:not(.hidden)) {
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
body:is(
.landing-page,
.home-page,
.explore-page,
.create-page,
.followed-page,
.my-events-page, .newsletter-private,
.profile-page,
.badge-page,
.event-detail-page,
.notifications-page
) header .profile-nav-avatar:has(> .profile-nav-image:not(.hidden)) > .profile-nav-image {
display: block !important;
width: 100% !important;
height: 100% !important;
border: 0 !important;
border-radius: inherit !important;
object-fit: cover !important;
}
body.landing-page .landing-hero-primary-action,
body:is(.auth-page, .create-page, .profile-page) button[type="submit"],
body:is(.home-page, .explore-page, .event-detail-page) :is(.home-hero-search-button, .event-detail-primary-action),
body:is(.followed-page, .my-events-page, .badge-page) :is(.followed-search-btn, .my-events-tab, .badge-catalog-back) {
position: relative;
overflow: hidden;
}
body.landing-page .landing-hero-primary-action::after,
body:is(.auth-page, .create-page, .profile-page) button[type="submit"]::after,
body:is(.home-page, .explore-page, .event-detail-page) :is(.home-hero-search-button, .event-detail-primary-action)::after,
body:is(.followed-page, .my-events-page, .badge-page) :is(.followed-search-btn, .my-events-tab, .badge-catalog-back)::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(110deg, transparent 0%, transparent 36%, rgba(255, 255, 255, 0.38) 48%, transparent 60%, transparent 100%);
opacity: 0;
pointer-events: none;
transform: translateX(-130%) skewX(-12deg);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
body.landing-page .landing-hero-primary-action:hover::after,
body:is(.auth-page, .create-page, .profile-page) button[type="submit"]:hover::after,
body:is(.home-page, .explore-page, .event-detail-page) :is(.home-hero-search-button, .event-detail-primary-action):hover::after,
body:is(.followed-page, .my-events-page, .badge-page) :is(.followed-search-btn, .my-events-tab, .badge-catalog-back):hover::after {
opacity: 1;
animation: haActionSweep 0.72s ease both;
}
body:is(.landing-page, .home-page, .explore-page, .create-page, .followed-page, .my-events-page, .profile-page, .badge-page) :is(.card-shine,
.category-preview-card,
.followed-person-row,
.profile-panel,
.badge-catalog-card,
.create-form-card) {
will-change: transform;
}
}
@keyframes haActionSweep {
from {
transform: translateX(-130%) skewX(-12deg);
}
to {
transform: translateX(130%) skewX(-12deg);
}
}
@media (prefers-reduced-motion: reduce) {
body :is(a, button)::after {
animation: none !important;
}
}
@media (max-width: 767px) {
body.home-page .home-hero-section {
min-height: calc(100svh - 4.5rem) !important;
padding-top: 5rem !important;
padding-bottom: 4.5rem !important;
}
body.home-page .home-actions-section {
margin-top: -1.65rem;
padding-top: 6.75rem !important;
scroll-margin-top: 5rem;
}
body.home-page .home-actions-section::before {
top: -3.35rem;
height: 12.5rem;
filter: blur(14px) saturate(0.88) brightness(0.72);
}
body.home-page .home-actions-section::after {
top: 2.3rem;
height: 6.5rem;
}
body.home-page .home-actions-title h2 {
max-width: calc(100vw - 3rem);
}
body.home-page .home-action-story {
margin-top: 0.75rem;
padding-top: 0.5rem;
gap: 0.75rem;
}
body.home-page .home-action-row,
body.home-page .home-action-row-create,
body.home-page .home-action-row-explore {
min-height: clamp(14.5rem, 34svh, 18rem);
justify-items: stretch;
margin-top: 0;
padding: 0.75rem 0 0;
}
body.home-page .home-action-visual,
body.home-page .home-action-row-create .home-action-visual,
body.home-page .home-action-row-explore .home-action-visual {
top: 0;
bottom: 0;
right: -1.5rem;
left: -1.5rem;
width: auto;
-webkit-mask-image:
linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.46) 14%, #000 32%, #000 100%),
radial-gradient(ellipse 112% 86% at 50% 48%, #000 0%, #000 48%, rgba(0, 0, 0, 0.52) 72%, transparent 100%);
-webkit-mask-composite: source-in;
mask-image:
linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.46) 14%, #000 32%, #000 100%),
radial-gradient(ellipse 112% 86% at 50% 48%, #000 0%, #000 48%, rgba(0, 0, 0, 0.52) 72%, transparent 100%);
mask-composite: intersect;
}
body.home-page .home-action-row .home-action-card {
width: min(100%, 25rem);
align-self: end;
margin-inline: auto;
padding: 0.9rem 1.1rem !important;
}
body.home-page .home-action-row .home-action-card h2 {
font-size: clamp(1.45rem, 6.6vw, 1.75rem) !important;
line-height: 1.1 !important;
}
body.home-page .home-action-row .home-action-card p:not(.home-action-kicker) {
margin-top: 0.4rem !important;
font-size: 0.875rem !important;
line-height: 1.45 !important;
}
body.home-page .home-action-row .home-action-card > a {
margin-top: 0.75rem !important;
}
}
body.home-page header :is(ul, ol),
body.home-page header #mobile-menu {
list-style: none !important;
}
body.home-page header :is(ul, ol) {
margin: 0 !important;
padding-left: 0 !important;
}
@media (max-width: 767px) {
body.home-page header > div,
body.home-page header nav > div:first-child,
body.home-page header .w-full.px-6,
body.home-page header .w-full.px-5 {
gap: 0.42rem !important;
padding-right: max(0.75rem, env(safe-area-inset-right)) !important;
padding-left: max(0.75rem, env(safe-area-inset-left)) !important;
}
body.home-page header .flex.items-center.gap-3,
body.home-page header .flex.items-center.gap-2,
body.home-page header .justify-self-end {
gap: 0.38rem !important;
}
body.home-page header :is(.notif-bell,
#menu-btn) {
width: 2.75rem !important;
min-width: 2.75rem !important;
height: 2.75rem !important;
min-height: 2.75rem !important;
border-radius: 999px !important;
}
body.home-page header :is(#profileBtn, .profile-nav-button) {
width: 2.75rem !important;
min-width: 2.75rem !important;
max-width: 2.75rem !important;
height: 2.75rem !important;
min-height: 2.75rem !important;
padding: 0 !important;
border-radius: 999px !important;
}
body.home-page header :is(#profileBtn, .profile-nav-button) > .profile-nav-avatar,
body.home-page header #profileBtn > div:first-child {
width: 2.35rem !important;
min-width: 2.35rem !important;
max-width: 2.35rem !important;
height: 2.35rem !important;
min-height: 2.35rem !important;
max-height: 2.35rem !important;
flex-basis: 2.35rem !important;
}
body.home-page header #navbarProfileName {
display: none !important;
}
body:is(
.landing-page,
.home-page,
.explore-page,
.create-page,
.followed-page,
.auth-page
) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) {
font-size: 1rem !important;
}
body.auth-page .auth-password-toggle {
min-height: 44px;
}
body.create-page .create-schedule-input {
min-height: 44px;
}
body.landing-page #chi .landing-about-grid {
grid-template-columns: minmax(0, 1fr);
}
body.landing-page #chi .landing-about-grid > * {
min-width: 0;
}
body.landing-page .headline-float {
animation: none;
transform: none;
}
body.legal-page :is(code, strong, a) {
overflow-wrap: anywhere;
word-break: break-word;
}
body.home-page .home-hero-main {
max-width: 21.5rem;
}
body.home-page .home-hero-section h1,
body.home-page #home-welcome-title {
font-size: clamp(2.85rem, 13vw, 3.65rem) !important;
line-height: 0.94 !important;
}
body.home-page .home-hero-copy {
max-width: 20.5rem;
font-size: 1rem !important;
line-height: 1.48 !important;
}
}
@media (max-width: 1023.98px) {
body[class] header :is(.notif-bell, #profileBtn, .profile-nav-button, #menu-btn),
body[class] header #profileBtn:has(#navbarProfileInitials:not(.hidden)) {
width: 44px !important;
min-width: 44px !important;
max-width: 44px !important;
height: 44px !important;
min-height: 44px !important;
padding: 0 !important;
justify-content: center !important;
border-radius: 999px !important;
}
}
body[class] header #mobile-menu {
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: 60;
margin-top: 0 !important;
padding-inline: 1rem !important;
max-height: calc(100dvh - var(--ha-navbar-height, 4.25rem) - 0.5rem);
overflow-y: auto;
overscroll-behavior: contain;
}
@media (max-width: 767.98px) {
body header #notifDropdown {
position: fixed !important;
top: calc(var(--ha-navbar-height, 4.25rem) + 0.25rem) !important;
right: 0.75rem !important;
left: 0.75rem !important;
width: auto !important;
max-width: none !important;
max-height: calc(100dvh - var(--ha-navbar-height, 4.25rem) - 1rem);
overflow-y: auto !important;
}
}
@media (max-width: 1023.98px) {
body.create-page > main {
padding-bottom: calc(3.25rem + 2rem + env(safe-area-inset-bottom)) !important;
}
body.create-page .create-toast {
bottom: calc(3.25rem + 1.75rem + env(safe-area-inset-bottom));
}
}
body[class] header:not(#_) :is(.notif-bell, #menu-btn),
body[class] header:not(#_) :is(.notif-bell, #menu-btn):is(:hover, :focus-visible, [aria-expanded="true"]) {
border-color: transparent !important;
background: transparent !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
@media (max-width: 1023.98px) {
body[class] header:not(#_) :is(#profileBtn, .profile-nav-button),
body[class] header:not(#_) :is(#profileBtn, .profile-nav-button):is(:hover, :focus-visible, :has(#navbarProfileInitials:not(.hidden))) {
border-color: transparent !important;
background: transparent !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
}
body[class] header:not(#_) :is(.notif-bell, #menu-btn, #profileBtn, .profile-nav-button) {
transition: opacity 0.15s ease;
}
body[class] header:not(#_) :is(.notif-bell, #menu-btn, #profileBtn, .profile-nav-button):hover {
opacity: 0.78;
}
body[class] header:not(#_) :is(.notif-bell, #menu-btn, #profileBtn, .profile-nav-button):focus-visible {
outline: 2px solid #17BEBB !important;
outline-offset: 2px;
}
body.home-page .home-hero-section {
min-height: calc(100svh - 73px) !important;
max-height: none;
height: calc(100svh - 73px) !important;
display: flex;
align-items: center;
overflow: hidden;
position: relative;
z-index: 3;
}
body.home-page .hero-fade-media {
-webkit-mask-image: linear-gradient(
to bottom,
#000 0%,
#000 34%,
rgba(0, 0, 0, 0.82) 52%,
rgba(0, 0, 0, 0.38) 74%,
transparent 100%
) !important;
mask-image: linear-gradient(
to bottom,
#000 0%,
#000 34%,
rgba(0, 0, 0, 0.82) 52%,
rgba(0, 0, 0, 0.38) 74%,
transparent 100%
) !important;
}
body.home-page .home-hero-section::after {
display: none !important;
}
body.home-page .home-actions-section {
position: relative;
z-index: 4 !important;
margin-top: clamp(-18vh, -12rem, -8rem) !important;
padding-top: clamp(8rem, 15vh, 12rem) !important;
padding-bottom: 0 !important;
overflow: visible !important;
}
body.home-page .home-action-story {
margin-bottom: 0 !important;
}
body.home-page .home-actions-section > div.max-w-7xl {
max-width: none !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
body.home-page .home-actions-section::before {
content: none !important;
display: none !important;
}
body.home-page .home-actions-section::after {
content: none !important;
display: none !important;
}
body.home-page .home-action-story::before {
background: none !important;
opacity: 0 !important;
}
body.home-page .home-action-story::after {
top: clamp(3.5rem, 7vw, 5.75rem) !important;
bottom: clamp(1.5rem, 4vw, 3rem) !important;
width: clamp(4rem, 7vw, 6.5rem) !important;
background:
radial-gradient(ellipse at 50% 50%, rgba(15, 13, 14, 0.92), rgba(15, 13, 14, 0.62) 38%, rgba(15, 13, 14, 0) 72%),
linear-gradient(90deg, transparent 0%, rgba(15, 13, 14, 0.76) 44%, rgba(15, 13, 14, 0.76) 56%, transparent 100%) !important;
filter: blur(6px) !important;
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.28) 14%, #000 34%, #000 82%, transparent 100%);
mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.28) 14%, #000 34%, #000 82%, transparent 100%);
}
body.home-page .home-actions-shell {
position: relative;
}
@media (prefers-reduced-motion: reduce) {
body.home-page .home-hero-section::after {
transition: none;
}
}
body.home-page {
background:
radial-gradient(circle at 12% 8%, rgba(23, 190, 187, 0.16), transparent 30rem),
radial-gradient(circle at 50% 92%, rgba(228, 87, 46, 0.13), transparent 30rem),
linear-gradient(135deg, #211f20 0%, #151314 56%, #0f1110 100%) !important;
background-attachment: scroll !important;
}
.scroll-reveal {
opacity: 0;
transform: translate3d(0, 24px, 0);
transition:
opacity 420ms cubic-bezier(0.22, 1, 0.36, 1),
transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
}
.scroll-reveal.is-visible {
opacity: 1;
transform: translate3d(0, 0, 0);
}
body.home-page .scroll-reveal,
body.home-page .jump-reveal {
will-change: opacity, transform;
backface-visibility: hidden;
transform-style: preserve-3d;
}
body.home-page .home-actions-section {
overflow-x: clip !important;
}
body.home-page .home-action-visual {
inset: 0 !important;
width: 100% !important;
opacity: 0.94 !important;
contain: paint;
will-change: auto !important;
}
body.home-page .home-action-visual::after {
background:
linear-gradient(180deg, rgba(15, 13, 14, 0.25), rgba(15, 13, 14, 0.14) 38%, rgba(15, 13, 14, 0.3) 100%) !important;
}
body.home-page .home-action-row-create .home-action-visual {
left: 0 !important;
right: auto !important;
-webkit-mask-image:
linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.68) 8%, #000 18%, #000 82%, rgba(0, 0, 0, 0.68) 92%, transparent 100%),
linear-gradient(to right, #000 0%, #000 84%, rgba(0, 0, 0, 0.72) 92%, transparent 100%) !important;
-webkit-mask-composite: source-in;
mask-image:
linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.68) 8%, #000 18%, #000 82%, rgba(0, 0, 0, 0.68) 92%, transparent 100%),
linear-gradient(to right, #000 0%, #000 84%, rgba(0, 0, 0, 0.72) 92%, transparent 100%) !important;
mask-composite: intersect;
}
body.home-page .home-action-row-explore .home-action-visual {
right: 0 !important;
left: auto !important;
-webkit-mask-image:
linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.68) 8%, #000 18%, #000 82%, rgba(0, 0, 0, 0.68) 92%, transparent 100%),
linear-gradient(to left, #000 0%, #000 84%, rgba(0, 0, 0, 0.72) 92%, transparent 100%) !important;
-webkit-mask-composite: source-in;
mask-image:
linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.68) 8%, #000 18%, #000 82%, rgba(0, 0, 0, 0.68) 92%, transparent 100%),
linear-gradient(to left, #000 0%, #000 84%, rgba(0, 0, 0, 0.72) 92%, transparent 100%) !important;
mask-composite: intersect;
}
body.home-page .home-action-row-create .home-action-card {
background:
linear-gradient(90deg, rgba(15, 13, 14, 0.84), rgba(15, 13, 14, 0.52) 72%, transparent),
transparent !important;
}
body.home-page .home-action-row-explore .home-action-card {
align-items: flex-end;
background:
linear-gradient(270deg, rgba(15, 13, 14, 0.84), rgba(15, 13, 14, 0.52) 72%, transparent),
transparent !important;
text-align: right !important;
}
body.home-page .home-action-row-explore .home-action-kicker,
body.home-page .home-action-row-explore .home-action-card h2,
body.home-page .home-action-row-explore .home-action-card p:not(.home-action-kicker) {
margin-left: auto;
}
body.home-page .home-action-row-explore .home-action-card > a {
align-self: flex-end;
}
body.home-page .home-action-row .home-action-card,
body.home-page .home-saved-main,
body.home-page .home-recommended-panel {
contain: layout paint;
}
body.home-page .home-action-row .home-action-card h2,
body.home-page .home-action-row .home-action-card p,
body.home-page .home-action-row .home-action-card > a {
transition-duration: 180ms !important;
}
body.home-page .home-action-row .home-action-card-create > a,
body.home-page .home-action-row .home-action-card-create > a::after,
body.home-page .home-action-row .home-action-card-explore > a,
body.home-page .home-action-row .home-action-card-explore > a::before {
animation: none !important;
}
body.home-page .home-saved-main {
display: flex !important;
flex-direction: column;
}
body.home-page #saved-events-container {
flex: 1 1 auto;
}
body.home-page #saved-events-container.has-saved-events {
grid-auto-rows: minmax(7.5rem, auto);
align-content: start;
}
body.home-page .saved-events-empty {
height: 100%;
min-height: clamp(19rem, 27vw, 24rem) !important;
justify-content: center;
}
body.home-page .saved-events-empty > div {
display: grid;
min-height: 100%;
align-content: center;
}
@media (max-width: 767px) {
body.home-page #saved-events-container.has-saved-events {
grid-auto-rows: minmax(8.5rem, auto);
}
}
body.home-page .home-saved-section .home-section-top {
grid-template-columns: minmax(0, 1fr) !important;
justify-items: center;
}
body.home-page .home-saved-section .home-section-heading {
grid-column: 1 !important;
}
.jump-reveal {
position: relative;
z-index: 10;
opacity: 0;
}
.jump-reveal.is-visible {
animation: bounce-up 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes bounce-up {
0% {
opacity: 0;
transform: translate3d(0, 120px, 0) scale(0.85);
}
50% {
opacity: 1;
transform: translate3d(0, -25px, 0) scale(1.05);
}
75% {
transform: translate3d(0, 10px, 0) scale(0.98);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0) scale(1);
}
}
@media (max-width: 767px) {
body.home-page #home-welcome-title .home-hero-line-welcome {
font-size: clamp(1.85rem, 8.2vw, 2.25rem) !important;
line-height: 1 !important;
}
body.home-page .hero-fade-media img {
object-position: 15% 15%;
}
body.home-page .home-action-story {
gap: 0.75rem !important;
}
body.home-page :is(.home-action-row, .home-action-row-create, .home-action-row-explore) {
min-height: auto !important;
padding: 0 !important;
}
body.home-page .home-action-row .home-action-card {
width: 100% !important;
align-self: stretch;
}
body.home-page :is(.home-action-row-create, .home-action-row-explore) .home-action-visual {
inset: 0 !important;
-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.75) 0%, #000 14%, #000 86%, rgba(0, 0, 0, 0.75) 100%) !important;
mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.75) 0%, #000 14%, #000 86%, rgba(0, 0, 0, 0.75) 100%) !important;
}
body.home-page .home-action-row-explore .home-action-visual {
background-position: center 40%;
}
body.home-page .home-action-row-create .home-action-card {
background: linear-gradient(90deg, rgba(15, 13, 14, 0.78), rgba(15, 13, 14, 0.4) 62%, rgba(15, 13, 14, 0.12)) !important;
}
body.home-page .home-action-row-explore .home-action-card {
background: linear-gradient(270deg, rgba(15, 13, 14, 0.78), rgba(15, 13, 14, 0.4) 62%, rgba(15, 13, 14, 0.12)) !important;
}
body.home-page .home-action-visual::after {
background: rgba(15, 13, 14, 0.12) !important;
}
}
@media (prefers-reduced-motion: reduce) {
body.home-page :is(.scroll-reveal, .jump-reveal) {
opacity: 1;
filter: none;
transform: none;
animation: none;
transition: none;
}
}
:root {
--ha-surface: #231f20;
--ha-surface-raised: #2e282a;
--ha-text: #ffffff;
--ha-muted: rgba(255, 255, 255, 0.64);
--ha-border: rgba(255, 255, 255, 0.13);
--ha-focus: rgba(23, 190, 187, 0.42);
}
.skip-link {
position: fixed;
z-index: 1000;
top: 0.75rem;
left: 0.75rem;
transform: translateY(-160%);
border-radius: 0.75rem;
background: #ffc914;
color: #231f20;
padding: 0.75rem 1rem;
font-weight: 900;
transition: transform 160ms ease;
}
.skip-link:focus {
transform: translateY(0);
outline: 3px solid var(--ha-focus);
outline-offset: 2px;
}
body.badge-page .badge-catalog-panel,
body.profile-page .profile-panel,
body.profile-page .profile-sidebar,
body.profile-page .profile-actions {
background: var(--ha-surface) !important;
border-color: var(--ha-border) !important;
box-shadow: 0 16px 36px rgba(0, 0, 0, 0.14) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
body.badge-page .badge-catalog-heading {
align-items: flex-start;
gap: 1rem;
}
.badge-catalog-summary {
display: grid;
grid-template-columns: 3rem minmax(0, 1fr);
align-items: center;
gap: 0.7rem;
min-width: min(100%, 16rem);
padding: 0.35rem 0;
}
.badge-catalog-summary.is-empty {
grid-template-columns: minmax(0, 1fr);
}
.badge-catalog-summary-image {
display: grid;
width: 3.25rem;
height: 3.25rem;
place-items: center;
}
.badge-catalog-summary-image img {
width: 3.25rem;
height: 3.25rem;
object-fit: contain;
}
.badge-catalog-summary-copy {
display: grid;
min-width: 0;
gap: 0.25rem;
}
.badge-catalog-summary strong {
color: var(--ha-text);
font-size: 0.94rem;
overflow-wrap: anywhere;
}
.badge-catalog-summary span,
.badge-catalog-feedback {
color: var(--ha-muted);
font-size: 0.82rem;
line-height: 1.45;
}
.badge-catalog-toolbar {
display: flex;
flex-wrap: wrap;
gap: 0.55rem;
align-items: center;
justify-content: space-between;
margin: 0 0 1rem;
}
.badge-filter-list {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.badge-filter {
min-height: 2.5rem;
border: 1px solid var(--ha-border);
border-radius: 999px;
background: transparent;
color: var(--ha-muted);
padding: 0 0.9rem;
font-size: 0.82rem;
font-weight: 800;
transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
}
.badge-filter[aria-pressed="true"] {
border-color: rgba(23, 190, 187, 0.62);
background: rgba(23, 190, 187, 0.14);
color: var(--ha-text);
}
.badge-filter:focus-visible,
.badge-catalog-card:focus-visible,
.profile-badge-change:focus-visible,
.profile-tab:focus-visible {
outline: 3px solid var(--ha-focus);
outline-offset: 3px;
}
body.badge-page .badge-catalog-grid {
grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
body.badge-page .badge-catalog-card {
--badge-enter-opacity: 1;
position: relative;
display: grid;
grid-template-columns: 5.75rem minmax(0, 1fr);
min-height: 11.5rem;
width: 100%;
gap: 1rem;
overflow: hidden;
border: 1px solid var(--ha-border) !important;
border-radius: 1rem;
background: var(--ha-surface-raised) !important;
color: var(--ha-text);
padding: 1rem;
text-align: left;
transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease, opacity 180ms ease;
}
body.badge-page .badge-catalog-card::before {
display: none;
}
body.badge-page button.badge-catalog-card {
cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
body.badge-page button.badge-catalog-card:hover {
border-color: rgba(23, 190, 187, 0.65) !important;
background: #353033 !important;
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18) !important;
}
}
body.badge-page .badge-catalog-card.is-featured {
border-color: #17bebb !important;
background: linear-gradient(135deg, rgba(23, 190, 187, 0.18), var(--ha-surface-raised)) !important;
box-shadow: 0 0 0 2px rgba(23, 190, 187, 0.2), 0 12px 28px rgba(23, 190, 187, 0.12) !important;
}
body.badge-page .badge-catalog-card.is-locked {
--badge-enter-opacity: 0.54;
cursor: not-allowed;
filter: saturate(0.34);
opacity: 0.54;
}
body.badge-page .badge-catalog-card.is-updating {
cursor: progress;
pointer-events: none;
}
body.badge-page .badge-catalog-card-enter {
animation: badgeCardReveal 520ms var(--badge-enter-delay, 0ms) cubic-bezier(0.23, 1, 0.32, 1) both;
will-change: opacity, transform;
}
@keyframes badgeCardReveal {
from {
opacity: 0;
transform: translate3d(0, 1rem, 0) scale(0.985);
}
to {
opacity: var(--badge-enter-opacity);
transform: translate3d(0, 0, 0) scale(1);
}
}
body.badge-page .badge-catalog-image {
width: 5.75rem;
height: 5.75rem;
border: 0;
background: transparent !important;
box-shadow: none !important;
}
body.badge-page .badge-catalog-image img {
width: 5.75rem;
height: 5.75rem;
object-fit: contain;
}
.badge-catalog-copy {
align-content: start;
}
body.badge-page .badge-catalog-card h3,
body.badge-page .badge-catalog-card p,
body.badge-page .badge-catalog-card small {
color: var(--ha-text) !important;
}
body.badge-page .badge-catalog-card p,
body.badge-page .badge-catalog-card small {
color: var(--ha-muted) !important;
}
.badge-card-status {
display: inline-flex;
gap: 0.35rem;
align-items: center;
width: fit-content;
border-radius: 999px;
background: rgba(23, 190, 187, 0.14);
color: #17bebb !important;
padding: 0.2rem 0.5rem;
font-size: 0.68rem !important;
font-weight: 900;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.badge-catalog-card.is-featured .badge-card-status {
background: rgba(255, 201, 20, 0.16);
color: #ffc914 !important;
}
.badge-catalog-card.is-locked .badge-card-status {
background: rgba(255, 255, 255, 0.1);
color: var(--ha-text) !important;
}
.badge-progress {
display: grid;
gap: 0.3rem;
width: 100%;
margin-top: 0.2rem;
}
.badge-progress-label {
color: var(--ha-muted);
font-size: 0.72rem;
font-weight: 800;
}
.badge-progress-track {
display: block;
width: 100%;
height: 0.35rem;
overflow: hidden;
border-radius: 999px;
background: rgba(255, 255, 255, 0.14);
}
.badge-progress-fill {
display: block;
height: 100%;
border-radius: inherit;
background: #17bebb;
}
.profile-current-badge {
align-items: center;
}
body.profile-page .profile-current-badge:hover {
border-color: rgba(255, 201, 20, 0.22);
box-shadow: none;
transform: none;
}
.profile-badge-change {
display: inline-flex;
width: fit-content;
margin-top: 0.2rem;
color: #17bebb;
font-size: 0.84rem;
font-weight: 900;
text-decoration: underline;
text-underline-offset: 0.22rem;
}
.profile-bio-label {
display: flex;
justify-content: space-between;
gap: 1rem;
}
.profile-bio-counter {
color: var(--ha-muted);
font-size: 0.76rem;
font-weight: 700;
}
.profile-bio-tools {
display: flex;
flex-wrap: wrap;
gap: 0.25rem 1rem;
margin-top: 0.5rem;
}
.profile-bio-add {
min-height: 36px;
color: #17bebb;
font-size: 0.84rem;
font-weight: 800;
}
.profile-bio-add:hover { text-decoration: underline; text-underline-offset: 0.22rem; }
.profile-bio-add-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
margin-top: 0.5rem;
}
.profile-bio-add-row[hidden],
.profile-bio-add-error[hidden] { display: none; }
.profile-bio-add-row input {
flex: 1 1 12rem;
min-width: 0;
}
.profile-bio-add-confirm {
min-height: 40px;
border-radius: 999px;
padding: 0 1rem;
background: #17bebb;
color: #0b1220;
font-size: 0.84rem;
font-weight: 800;
}
.profile-bio-add-error {
margin-top: 0.35rem;
color: #ff8a80;
font-size: 0.8rem;
}
.profile-actions {
position: sticky;
z-index: 10;
bottom: 0.75rem;
}
.profile-primary-action:disabled,
.profile-secondary-action:disabled {
cursor: not-allowed;
opacity: 0.48;
transform: none !important;
}
.profile-switch-row input {
width: 2.75rem;
height: 1.55rem;
appearance: none;
border: 1px solid var(--ha-border);
border-radius: 999px;
background: rgba(255, 255, 255, 0.12);
cursor: pointer;
padding: 0.16rem;
transition: background 180ms ease, border-color 180ms ease;
}
.profile-switch-row input::before {
display: block;
width: 1.05rem;
height: 1.05rem;
border-radius: 50%;
background: #ffffff;
content: '';
transition: transform 180ms ease;
}
.profile-switch-row input:checked {
border-color: #17bebb;
background: #17bebb;
}
.profile-switch-row input:checked::before {
transform: translateX(1.17rem);
}
.profile-switch-row input:focus-visible {
outline: 3px solid var(--ha-focus);
outline-offset: 3px;
}
@media (max-width: 767px) {
body.badge-page .badge-catalog-heading {
display: grid;
}
body.badge-page .badge-catalog-card {
min-height: 10.5rem;
}
.profile-actions {
bottom: 0.4rem;
}
}
@media (max-width: 420px) {
body.badge-page .badge-catalog-card {
grid-template-columns: 4.75rem minmax(0, 1fr);
gap: 0.8rem;
}
body.badge-page .badge-catalog-image {
width: 4.75rem;
height: 4.75rem;
}
body.badge-page .badge-catalog-image img {
width: 4.75rem;
height: 4.75rem;
}
}
@media (prefers-reduced-motion: reduce) {
.skip-link,
.badge-filter,
body.badge-page .badge-catalog-card,
.profile-switch-row input,
.profile-switch-row input::before {
transition: none;
}
body.badge-page .badge-catalog-card-enter {
opacity: var(--badge-enter-opacity);
transform: none;
animation: none;
}
}
body.profile-page .profile-sidebar {
gap: 0.3rem;
padding: 0.55rem;
}
body.profile-page .profile-tab {
display: grid;
grid-template-columns: 2.35rem minmax(0, 1fr);
min-height: 4.1rem;
align-items: center;
gap: 0.75rem;
padding: 0.55rem 0.7rem;
transform: none;
transition: background 180ms ease, color 180ms ease, box-shadow 180ms ease;
-webkit-font-smoothing: antialiased;
text-rendering: geometricPrecision;
}
body.profile-page .profile-tab:hover,
body.profile-page .profile-tab:focus-visible,
body.profile-page .profile-tab:active {
transform: none;
}
.profile-tab-icon {
display: grid;
width: 2.35rem;
height: 2.35rem;
place-items: center;
border-radius: 0.75rem;
background: rgba(255, 255, 255, 0.055);
color: rgba(255, 255, 255, 0.62);
}
.profile-tab-icon svg {
width: 1.15rem;
height: 1.15rem;
fill: none;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 1.8;
}
.profile-tab-copy {
display: grid;
min-width: 0;
gap: 0.16rem;
}
.profile-tab-copy strong {
color: rgba(255, 255, 255, 0.84);
font-size: 0.88rem;
font-weight: 900;
line-height: 1.22;
}
.profile-tab-copy small {
overflow: hidden;
color: rgba(255, 255, 255, 0.58);
font-size: 0.72rem;
font-weight: 700;
line-height: 1.25;
text-overflow: ellipsis;
white-space: nowrap;
}
body.profile-page :is(.profile-tab[data-profile-section="general"], .profile-panel[data-profile-panel="general"]) {
--profile-tab-accent: var(--color-sea, #17bebb);
--profile-tab-rgb: 23, 190, 187;
}
body.profile-page :is(.profile-tab[data-profile-section="photo"], .profile-panel[data-profile-panel="photo"]) {
--profile-tab-accent: var(--color-cactus, #76b041);
--profile-tab-rgb: 118, 176, 65;
}
body.profile-page :is(.profile-tab[data-profile-section="settings"], .profile-panel[data-profile-panel="settings"]) {
--profile-tab-accent: var(--color-sun, #ffc914);
--profile-tab-rgb: 255, 201, 20;
}
body.profile-page :is(.profile-tab[data-profile-section="account"], .profile-panel[data-profile-panel="account"]) {
--profile-tab-accent: var(--color-lava, #e4572e);
--profile-tab-rgb: 228, 87, 46;
}
body.profile-page .profile-tab .profile-tab-icon {
color: var(--profile-tab-accent);
background: rgba(var(--profile-tab-rgb), 0.09);
}
body.profile-page .profile-tab .profile-tab-copy strong {
color: var(--profile-tab-accent);
}
body.profile-page .profile-tab:is(:hover, .is-active) {
background: rgba(var(--profile-tab-rgb), 0.14);
color: var(--profile-tab-accent);
}
body.profile-page .profile-tab:is(:hover, :focus-visible) {
box-shadow: 0 10px 24px rgba(var(--profile-tab-rgb), 0.12);
}
body.profile-page .profile-tab.is-active .profile-tab-icon {
background: var(--profile-tab-accent, #17bebb);
color: #171415;
box-shadow: 0 8px 20px rgba(var(--profile-tab-rgb, 23, 190, 187), 0.2);
}
body.profile-page .profile-tab.is-active .profile-tab-copy strong {
color: var(--profile-tab-accent, #17bebb);
}
body.profile-page .profile-panel :is(
.profile-panel-heading p,
.profile-field-section h3,
.profile-avatar-caption span,
.profile-current-badge-copy > span,
.profile-badge-change,
.text-sea
) {
color: var(--profile-tab-accent);
}
body.profile-page .profile-panel a:is(.profile-badge-change, .text-sea):hover {
color: #fff;
}
body.profile-page .profile-panel .profile-account-link {
color: #70a9ff;
}
body.profile-page .profile-panel .profile-account-link:is(:hover, :focus-visible) {
color: #a2c8ff;
text-decoration: underline;
text-underline-offset: 3px;
}
body.profile-page .profile-danger-action:is(:hover, :focus-visible) {
background: #a92f1b;
border-color: #e4572e;
color: #fff !important;
}
body.profile-page .profile-panel {
padding: clamp(1.2rem, 2.5vw, 1.75rem);
}
body.profile-page .profile-panel-heading {
margin-bottom: 1.4rem;
}
body.profile-page .profile-panel-heading h2 {
margin-top: 0.4rem;
}
.profile-panel-description {
display: block;
max-width: 42rem;
margin-top: 0.4rem;
color: rgba(255, 255, 255, 0.5);
font-size: 0.86rem;
line-height: 1.55;
}
.profile-panel-heading-spaced {
margin-top: 1.75rem;
}
.profile-field-sections {
display: grid;
gap: 1rem;
}
.profile-field-section {
display: grid;
gap: 0.85rem;
border-top: 1px solid rgba(255, 255, 255, 0.08);
padding-top: 1rem;
}
.profile-field-section h3 {
color: #ffc914;
font-size: 0.72rem;
font-weight: 900;
letter-spacing: 0.15em;
text-transform: uppercase;
}
body.profile-page .profile-setting-list,
body.profile-page .profile-account-list {
gap: 0.72rem;
}
body.profile-page .profile-switch-row,
body.profile-page .profile-account-list > div:not(.profile-field) {
border-left: 3px solid rgba(23, 190, 187, 0.34) !important;
}
body.profile-page .profile-actions {
position: static;
background: rgba(35, 31, 32, 0.96) !important;
box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28) !important;
}
body.profile-page .profile-primary-action:disabled {
background: #3a3537 !important;
box-shadow: none !important;
color: rgba(255, 255, 255, 0.38) !important;
opacity: 1;
}
@media (min-width: 1180px) {
body.profile-page .profile-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 767px) {
body.profile-page .profile-shell {
width: min(100% - 1.25rem, 1180px);
padding-top: 1.5rem;
}
body.profile-page .profile-sidebar {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
overflow: visible;
gap: 0.4rem;
}
body.profile-page .profile-tab {
grid-template-columns: 2rem minmax(0, 1fr);
min-width: 0;
min-height: 3.6rem;
gap: 0.55rem;
padding: 0.45rem 0.55rem;
}
.profile-tab-icon {
width: 2rem;
height: 2rem;
border-radius: 0.62rem;
}
.profile-tab-copy strong {
font-size: 0.78rem;
}
.profile-tab-copy small {
display: none;
}
body.profile-page .profile-panel {
padding: 1rem;
}
body.profile-page .profile-actions > div {
display: grid;
grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
}
body.profile-page .profile-actions button {
width: 100%;
}
}
.profile-experience-list {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin: 0 0 1rem;
padding: 0;
list-style: none;
}
.profile-experience-list li {
display: inline-flex;
align-items: center;
gap: 0.5rem;
border: 1px solid var(--ha-border);
border-radius: 999px;
background: var(--ha-surface-raised);
padding: 0.4rem 0.5rem 0.4rem 0.9rem;
font-size: 0.85rem;
}
.profile-experience-list li span {
color: #17bebb;
font-weight: 800;
}
.profile-experience-list button {
width: 1.6rem;
height: 1.6rem;
border-radius: 999px;
color: var(--ha-muted);
line-height: 1;
}
.profile-experience-list button:hover,
.profile-experience-list button:focus-visible {
background: rgba(255, 255, 255, 0.1);
color: #ffffff;
}
.attendance-page {
--attendance-bg: #171415;
--attendance-bg-mid: #231f20;
--attendance-surface: rgba(46, 40, 42, 0.92);
--attendance-surface-soft: rgba(255, 255, 255, 0.045);
--attendance-border: rgba(255, 255, 255, 0.11);
--attendance-text: #fff;
--attendance-muted: rgba(255, 255, 255, 0.68);
--attendance-faint: rgba(255, 255, 255, 0.68);
--attendance-sea: #17bebb;
--attendance-grass: #76b947;
--attendance-sun: #ffc914;
--attendance-lava: #ff6b5f;
min-height: 100vh;
background: var(--attendance-bg) !important;
color: var(--attendance-text);
font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
}
.attendance-page::before {
display: none !important;
}
.attendance-page > header {
background: rgba(35, 31, 32, 0.95) !important;
border-color: rgba(255, 255, 255, 0.1) !important;
box-shadow: none !important;
backdrop-filter: blur(16px) saturate(1.08) !important;
}
.attendance-page > header nav {
min-height: 4.25rem;
}
.attendance-page > header img[alt="Logo HangingAround"] {
width: auto !important;
height: 3.5rem !important;
max-height: 3.5rem !important;
object-fit: contain !important;
}
@media (max-width: 767px) {
.attendance-page > header img[alt="Logo HangingAround"] {
height: 3rem !important;
max-height: 3rem !important;
}
}
.attendance-page > header :is(.nav-center-link, #navbarProfileName) {
color: rgba(255, 255, 255, 0.78) !important;
}
.attendance-page > header .nav-center-link:hover,
.attendance-page > header .nav-center-link:focus-visible,
.attendance-page > header .nav-center-link-active {
color: #fff !important;
}
.attendance-page > header :is(#profileBtn, .profile-nav-button, #menu-btn) {
min-height: 44px !important;
border-color: rgba(255, 255, 255, 0.12) !important;
background: rgba(23, 20, 21, 0.46) !important;
box-shadow: none !important;
}
.attendance-page > header .notif-bell {
display: grid;
width: 44px !important;
min-width: 44px !important;
height: 44px !important;
min-height: 44px !important;
place-items: center;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 999px !important;
background: rgba(23, 20, 21, 0.46);
color: rgba(255, 255, 255, 0.7);
transition:
border-color 180ms ease,
background 180ms ease,
color 180ms ease;
}
.attendance-page > header .notif-bell:hover,
.attendance-page > header .notif-bell:focus-visible {
border-color: rgba(255, 201, 20, 0.36);
background: rgba(255, 255, 255, 0.08);
color: var(--attendance-sun);
}
.attendance-page > header :is(#profileBtn, .profile-nav-button):hover,
.attendance-page > header :is(#profileBtn, .profile-nav-button):focus-visible {
border-color: rgba(23, 190, 187, 0.34) !important;
background: rgba(255, 255, 255, 0.08) !important;
box-shadow: none !important;
}
.attendance-page > footer {
color: var(--attendance-muted);
}
.attendance-page > header #profileMenu {
z-index: 70;
border-color: rgba(255, 255, 255, 0.1) !important;
background: rgba(35, 31, 32, 0.97) !important;
box-shadow: 0 20px 48px rgba(0, 0, 0, 0.28) !important;
backdrop-filter: blur(16px) saturate(1.08);
}
.attendance-page > header #mobile-menu {
background: rgba(35, 31, 32, 0.98);
}
@media (min-width: 1024px) {
.attendance-page > header :is(#profileBtn, .profile-nav-button) {
width: auto !important;
min-width: max-content !important;
height: 44px !important;
padding: 1px 0.9rem 1px 1px !important;
gap: 0.62rem !important;
}
.attendance-page > header :is(#profileBtn, .profile-nav-button) > .profile-nav-avatar {
width: 42px !important;
min-width: 42px !important;
max-width: 42px !important;
height: 42px !important;
min-height: 42px !important;
max-height: 42px !important;
flex-basis: 42px !important;
}
.attendance-page > header #navbarProfileName {
display: inline !important;
max-width: 12rem;
overflow: hidden;
font-size: 17px !important;
font-weight: 800 !important;
line-height: 1 !important;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.attendance-page .skip-link {
position: fixed;
top: 0.5rem;
left: 0.5rem;
z-index: 1000;
transform: translateY(-150%);
border-radius: 0.7rem;
background: var(--attendance-sea);
color: #171415;
padding: 0.7rem 1rem;
font-weight: 900;
}
.attendance-page .skip-link:focus {
transform: translateY(0);
}
.attendance-shell {
position: relative;
isolation: isolate;
width: min(100% - 2rem, 78rem);
min-height: calc(100vh - 8rem);
margin: 0 auto;
padding: clamp(2rem, 5vw, 4.5rem) 0 4rem;
}
.attendance-event-backdrop {
position: absolute;
z-index: -1;
top: 0;
left: calc(50% - 50vw);
width: 100vw;
height: min(clamp(40rem, 132dvh, 92rem), 100%);
overflow: hidden;
pointer-events: none;
mask-image: linear-gradient(#000 55%, transparent);
}
.attendance-event-backdrop img {
width: 100%;
height: auto;
opacity: 0.5;
}
.attendance-event-backdrop::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(23, 20, 21, 0.15), rgba(23, 20, 21, 0.8));
}
.attendance-loading,
.attendance-message {
display: grid;
min-height: 55vh;
place-items: center;
align-content: center;
gap: 1rem;
color: var(--attendance-muted);
text-align: center;
}
.attendance-message h1 {
color: var(--attendance-text);
font-size: clamp(1.8rem, 5vw, 3rem);
font-weight: 900;
}
.attendance-message p {
max-width: 38rem;
line-height: 1.65;
}
.attendance-text-link {
display: inline-flex;
min-height: 2.75rem;
align-items: center;
width: fit-content;
border-radius: 999px;
color: var(--attendance-muted);
font-size: 0.85rem;
font-weight: 800;
}
.attendance-text-link:hover {
color: var(--attendance-sea);
}
.attendance-hero {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 2rem;
align-items: end;
margin-bottom: 1.4rem;
}
.attendance-hero::before {
display: none;
}
.attendance-eyebrow {
color: var(--attendance-sea);
font-size: 0.75rem;
font-weight: 900;
letter-spacing: 0.15em;
text-transform: uppercase;
}
.attendance-hero h1 {
margin: 0;
font-size: clamp(2rem, 5vw, 4rem);
font-weight: 900;
line-height: 1.05;
text-wrap: balance;
letter-spacing: -0.025em;
}
.attendance-hero h1 span { color: var(--attendance-sun); }
.attendance-event-title {
max-width: 46rem;
margin-top: 0.85rem;
color: var(--attendance-muted);
font-size: 1rem;
line-height: 1.6;
}
.attendance-event-meta {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 0.55rem;
}
.attendance-event-meta span {
color: var(--attendance-muted);
padding: 0.25rem 0;
font-size: 0.8rem;
font-weight: 700;
}
.attendance-summary {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 1rem;
margin: 2rem 0;
padding: 1.25rem 0;
}
.attendance-stat {
--stat-color: 151, 225, 220;
position: relative;
min-width: 0;
overflow: hidden;
padding: 0;
}
.attendance-stat::after {
display: none;
}
.attendance-stat strong {
display: block;
color: rgb(var(--stat-color));
font-size: clamp(1.5rem, 3vw, 2.15rem);
font-variant-numeric: tabular-nums;
font-weight: 900;
line-height: 1;
text-shadow: none;
}
.attendance-stat span {
display: block;
margin-top: 0.5rem;
color: var(--attendance-muted);
font-size: 0.78rem;
font-weight: 800;
}
.attendance-stat-total {
--stat-color: 255, 201, 20;
}
.attendance-stat-verified {
--stat-color: 118, 185, 71;
}
.attendance-stat-manual {
--stat-color: 23, 190, 187;
}
.attendance-stat-pending {
--stat-color: 255, 201, 20;
}
.attendance-stat-absent {
--stat-color: 255, 107, 95;
}
.attendance-workspace {
display: grid;
grid-template-columns: minmax(17rem, 19rem) minmax(0, 1fr);
gap: 2rem;
align-items: start;
}
.attendance-panel {
border: 1px solid var(--attendance-border);
border-radius: 1rem;
background: var(--attendance-bg-mid);
}
.attendance-qr-panel {
grid-column: 1;
grid-row: 1;
position: sticky;
top: 6rem;
overflow: hidden;
border-color: var(--attendance-border);
background: var(--attendance-surface);
padding: 1.15rem;
background: var(--attendance-bg-mid);
}
.attendance-qr-panel::before {
display: none;
}
.attendance-panel-heading {
position: relative;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
}
.attendance-panel-heading h2 {
font-size: 1.2rem;
font-weight: 900;
}
.attendance-panel-heading p {
margin-top: 0.3rem;
color: var(--attendance-muted);
font-size: 0.82rem;
line-height: 1.45;
}
.attendance-qr-frame {
display: grid;
aspect-ratio: 1;
max-width: 18rem;
place-items: center;
margin: 1.4rem auto 1rem;
border-radius: 1.3rem;
background: #fff;
padding: 1rem;
}
.attendance-qr-frame img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
.attendance-qr-placeholder {
color: #423c3e;
font-size: 0.86rem;
font-weight: 800;
text-align: center;
}
.attendance-qr-status {
display: flex;
align-items: center;
justify-content: center;
gap: 0.55rem;
color: var(--attendance-muted);
font-size: 0.82rem;
font-weight: 700;
}
.attendance-qr-status strong {
color: var(--attendance-text);
font-variant-numeric: tabular-nums;
}
.attendance-qr-status::before {
content: "";
width: 0.5rem;
height: 0.5rem;
border-radius: 50%;
background: var(--attendance-grass);
box-shadow: 0 0 0 0.25rem rgba(118, 185, 71, 0.14);
}
.attendance-qr-error {
margin-top: 1.2rem;
border: 1px solid rgba(255, 201, 20, 0.28);
border-radius: 0.9rem;
background: rgba(255, 201, 20, 0.07);
color: var(--attendance-muted);
padding: 1rem;
font-size: 0.85rem;
line-height: 1.55;
}
.attendance-qr-error strong {
display: block;
color: var(--attendance-sun);
}
.attendance-button {
display: inline-flex;
min-height: 2.75rem;
align-items: center;
justify-content: center;
gap: 0.45rem;
border: 1px solid transparent;
border-radius: 0.8rem;
padding: 0.65rem 1rem;
font-size: 0.85rem;
font-weight: 900;
transition:
transform 160ms ease,
background 180ms ease,
border-color 180ms ease,
color 180ms ease;
touch-action: manipulation;
}
.attendance-button:hover:not(:disabled) {
transform: translateY(-1px);
}
.attendance-button:active:not(:disabled) {
transform: scale(0.98);
}
.attendance-button:disabled {
cursor: not-allowed;
opacity: 0.48;
}
.attendance-button-primary {
background: var(--attendance-sea);
color: #171415;
}
.attendance-button-primary:hover:not(:disabled) {
background: var(--attendance-sun);
}
.attendance-button-secondary {
border-color: var(--attendance-border);
color: var(--attendance-muted);
background: rgba(255, 255, 255, 0.025);
}
.attendance-button-secondary:hover:not(:disabled) {
border-color: rgba(23, 190, 187, 0.5);
color: var(--attendance-sea);
}
.attendance-button-danger {
border-color: rgba(255, 107, 95, 0.34);
color: #ffaaa3;
background: rgba(255, 107, 95, 0.07);
}
.attendance-qr-refresh {
width: 100%;
margin-top: 1rem;
}
.attendance-register {
grid-column: 2;
grid-row: 1;
min-width: 0;
overflow: hidden;
background: rgba(35, 31, 32, 0.94);
padding: 1.2rem;
}
.attendance-register-head {
padding: 0 0 1.2rem;
border-bottom: 1px solid var(--attendance-border);
}
.attendance-register-title-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
}
.attendance-register-title-row h2 {
font-size: 1.25rem;
font-weight: 900;
}
.attendance-register-title-row p {
margin-top: 0.3rem;
color: var(--attendance-muted);
font-size: 0.84rem;
}
.attendance-tools {
display: grid;
grid-template-columns: minmax(12rem, 1fr) auto;
gap: 0.75rem;
margin-top: 1rem;
}
.attendance-search {
position: relative;
}
.attendance-search label {
display: block;
margin-bottom: 0.4rem;
color: var(--attendance-muted);
font-size: 0.76rem;
font-weight: 800;
}
.attendance-search input,
.attendance-filter,
.attendance-dialog select,
.attendance-dialog input[type="number"],
.checkin-manual textarea {
width: 100%;
min-height: 2.75rem;
border: 1px solid var(--attendance-border);
border-radius: 0.8rem;
background: rgba(255, 255, 255, 0.055);
color: var(--attendance-text);
padding: 0.7rem 0.85rem;
font-size: 1rem;
}
.attendance-filter-wrap label {
display: block;
margin-bottom: 0.4rem;
color: var(--attendance-muted);
font-size: 0.76rem;
font-weight: 800;
}
.attendance-filter {
min-width: 11rem;
}
.attendance-list {
display: grid;
}
.attendance-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto auto;
gap: 1rem;
align-items: center;
min-width: 0;
padding: 1rem 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.07);
transition: background 160ms ease;
}
.attendance-row:hover {
background: rgba(255, 255, 255, 0.025);
}
.attendance-row:last-child {
border-bottom: 0;
}
.attendance-row[data-status="PENDING"] {
background: rgba(255, 201, 20, 0.035);
}
.attendance-person {
display: flex;
min-width: 0;
align-items: center;
gap: 0.75rem;
}
.attendance-avatar {
display: grid;
width: 2.75rem;
height: 2.75rem;
flex: 0 0 auto;
place-items: center;
overflow: hidden;
border: 1px solid rgba(23, 190, 187, 0.28);
border-radius: 50%;
background: rgba(23, 190, 187, 0.12);
color: var(--attendance-sea);
font-weight: 900;
}
.attendance-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.attendance-person-copy {
min-width: 0;
}
.attendance-person-copy strong {
display: block;
overflow: hidden;
color: var(--attendance-text);
font-size: 0.9rem;
text-overflow: ellipsis;
white-space: nowrap;
}
.attendance-person-copy small {
display: block;
margin-top: 0.18rem;
overflow: hidden;
color: var(--attendance-faint);
font-size: 0.74rem;
text-overflow: ellipsis;
white-space: nowrap;
}
.attendance-chip {
display: inline-flex;
min-height: 1.8rem;
align-items: center;
width: fit-content;
border: 1px solid var(--attendance-border);
border-radius: 999px;
padding: 0.25rem 0.6rem;
font-size: 0.72rem;
font-weight: 900;
}
.attendance-chip::before {
content: "";
width: 0.42rem;
height: 0.42rem;
margin-right: 0.42rem;
border-radius: 50%;
background: currentColor;
}
.attendance-chip-verified {
border-color: rgba(118, 185, 71, 0.32);
background: rgba(118, 185, 71, 0.09);
color: #9bd56e;
}
.attendance-chip-pending {
border-color: rgba(255, 201, 20, 0.32);
background: rgba(255, 201, 20, 0.08);
color: var(--attendance-sun);
}
.attendance-chip-present {
border-color: rgba(118, 185, 71, 0.32);
background: rgba(118, 185, 71, 0.09);
color: #9bd56e;
}
.attendance-chip-absent {
border-color: rgba(255, 107, 95, 0.32);
background: rgba(255, 107, 95, 0.08);
color: #ffaaa3;
}
.attendance-chip-unmarked {
color: var(--attendance-faint);
}
.attendance-method {
grid-column: 1;
grid-row: 2;
padding-left: 3.5rem;
color: var(--attendance-muted);
font-size: 0.78rem;
line-height: 1.45;
}
.attendance-method strong {
display: block;
color: var(--attendance-text);
font-size: 0.76rem;
}
.attendance-row-actions {
grid-column: 3;
grid-row: 1 / 3;
display: flex;
justify-content: flex-end;
gap: 0.5rem;
}
.attendance-row-actions .attendance-button {
min-height: 2.6rem;
white-space: nowrap;
}
.attendance-empty {
padding: 3rem 1.2rem;
color: var(--attendance-muted);
text-align: center;
}
.attendance-dialog {
width: min(100% - 2rem, 31rem);
max-height: calc(100dvh - 2rem);
overflow: auto;
border: 1px solid var(--attendance-border);
border-radius: 1.2rem;
background: #2e282a;
color: var(--attendance-text);
box-shadow: 0 2rem 7rem rgba(0, 0, 0, 0.55);
padding: 0;
}
.attendance-dialog::backdrop {
background: rgba(10, 8, 9, 0.68);
backdrop-filter: blur(5px);
}
.attendance-dialog-form {
display: grid;
gap: 1rem;
padding: 1.25rem;
}
.attendance-dialog-heading {
display: flex;
justify-content: space-between;
gap: 1rem;
}
.attendance-dialog-heading h2 {
font-size: 1.25rem;
font-weight: 900;
}
.attendance-dialog-heading p {
margin-top: 0.35rem;
color: var(--attendance-muted);
font-size: 0.84rem;
}
.attendance-dialog label {
display: grid;
gap: 0.4rem;
color: var(--attendance-muted);
font-size: 0.8rem;
font-weight: 800;
}
.attendance-dialog-warning {
border: 1px solid rgba(255, 201, 20, 0.3);
border-radius: 0.8rem;
background: rgba(255, 201, 20, 0.07);
color: #ffe27b;
padding: 0.85rem;
font-size: 0.82rem;
line-height: 1.5;
}
.attendance-dialog-actions {
display: flex;
justify-content: flex-end;
gap: 0.65rem;
margin-top: 0.25rem;
}
.checkin-shell {
width: min(100% - 2rem, 66rem);
}
.checkin-layout {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(18rem, 0.95fr);
gap: 1.25rem;
align-items: stretch;
margin-top: 1.5rem;
}
.checkin-panel {
padding: clamp(1.15rem, 3vw, 1.6rem);
}
.checkin-camera {
position: relative;
display: grid;
min-height: 27rem;
place-items: center;
overflow: hidden;
border: 1px solid var(--attendance-border);
border-radius: 1rem;
background: #0e0c0d;
}
.checkin-camera video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.checkin-camera::after {
content: "";
position: absolute;
width: min(62%, 16rem);
aspect-ratio: 1;
border: 3px solid rgba(255, 255, 255, 0.86);
border-radius: 1.5rem;
box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.28);
pointer-events: none;
}
.checkin-camera-copy {
position: relative;
z-index: 1;
display: grid;
place-items: center;
max-width: 25rem;
padding: 2rem;
color: var(--attendance-muted);
text-align: center;
}
.checkin-camera-copy h2 {
color: var(--attendance-text);
font-size: 1.25rem;
font-weight: 900;
}
.checkin-camera-copy p {
margin: 0.6rem 0 1.2rem;
line-height: 1.55;
}
.checkin-camera-active .checkin-camera-copy {
align-self: end;
margin-bottom: 1rem;
border-radius: 0.8rem;
background: rgba(10, 8, 9, 0.7);
padding: 0.75rem 1rem;
color: #fff;
}
.checkin-manual {
display: flex;
flex-direction: column;
justify-content: center;
}
.checkin-manual h2 {
font-size: 1.3rem;
font-weight: 900;
}
.checkin-manual > p {
margin: 0.45rem 0 1.2rem;
color: var(--attendance-muted);
font-size: 0.86rem;
line-height: 1.55;
}
.checkin-manual form {
display: grid;
gap: 0.85rem;
}
.checkin-manual label {
display: grid;
gap: 0.4rem;
color: var(--attendance-muted);
font-size: 0.8rem;
font-weight: 800;
}
.checkin-manual textarea {
min-height: 7rem;
resize: vertical;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 0.82rem;
}
.checkin-location-choice {
display: flex !important;
grid-template-columns: auto 1fr;
align-items: flex-start;
gap: 0.65rem !important;
border: 1px solid var(--attendance-border);
border-radius: 0.85rem;
padding: 0.8rem;
}
.checkin-location-choice input {
width: 1.1rem;
height: 1.1rem;
margin-top: 0.1rem;
accent-color: var(--attendance-sea);
}
.checkin-location-choice span {
color: var(--attendance-muted);
font-weight: 600;
line-height: 1.45;
}
.checkin-error {
border: 1px solid rgba(255, 107, 95, 0.34);
border-radius: 0.8rem;
background: rgba(255, 107, 95, 0.08);
color: #ffc0bb;
padding: 0.85rem;
font-size: 0.84rem;
line-height: 1.5;
}
.checkin-result {
display: grid;
min-height: 31rem;
place-items: center;
align-content: center;
gap: 1rem;
border: 1px solid var(--attendance-border);
border-radius: 1.2rem;
background: var(--attendance-surface);
padding: 2rem;
text-align: center;
}
.checkin-result-mark {
display: grid;
width: 4.5rem;
height: 4.5rem;
place-items: center;
border-radius: 50%;
font-size: 2rem;
font-weight: 900;
}
.checkin-result-verified .checkin-result-mark {
background: rgba(118, 185, 71, 0.13);
color: #9bd56e;
box-shadow: 0 0 0 0.5rem rgba(118, 185, 71, 0.06);
}
.checkin-result-pending .checkin-result-mark {
background: rgba(255, 201, 20, 0.13);
color: var(--attendance-sun);
box-shadow: 0 0 0 0.5rem rgba(255, 201, 20, 0.06);
}
.checkin-result h1 {
font-size: clamp(1.8rem, 5vw, 2.8rem);
font-weight: 900;
}
.checkin-result p {
max-width: 35rem;
color: var(--attendance-muted);
line-height: 1.65;
}
.attendance-page :is(a, button, input, select, textarea, dialog):focus-visible {
outline: 3px solid rgba(23, 190, 187, 0.72);
outline-offset: 3px;
}
@keyframes attendance-rise {
from {
opacity: 0;
transform: translateY(0.75rem);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (max-width: 1020px) {
.attendance-summary {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.attendance-workspace {
grid-template-columns: 1fr;
}
.attendance-qr-panel {
position: static;
grid-column: 1;
grid-row: 1;
}
.attendance-register {
grid-column: 1;
grid-row: 2;
}
.attendance-qr-content {
display: grid;
grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr);
gap: 1.2rem;
align-items: center;
}
.attendance-qr-frame {
margin: 1.2rem 0 0;
}
.attendance-row {
grid-template-columns: minmax(0, 1fr) auto auto;
}
.attendance-method {
display: none;
}
}
@media (max-width: 760px) {
.attendance-hero {
grid-template-columns: 1fr;
align-items: start;
}
.attendance-event-meta {
justify-content: flex-start;
}
.attendance-summary {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.attendance-tools {
grid-template-columns: 1fr;
}
.attendance-filter {
min-width: 0;
}
.attendance-row {
grid-template-columns: minmax(0, 1fr) auto;
gap: 0.75rem;
}
.attendance-row-status {
justify-self: end;
}
.attendance-row-actions {
grid-column: 1 / -1;
grid-row: auto;
justify-content: stretch;
}
.attendance-row-actions .attendance-button {
flex: 1;
}
.checkin-layout {
grid-template-columns: 1fr;
}
.checkin-camera {
min-height: 23rem;
}
}
@media (max-width: 520px) {
.attendance-shell {
width: min(100% - 1rem, 78rem);
padding-top: 1.5rem;
}
.attendance-hero h1 {
font-size: 2.2rem;
}
.attendance-summary {
gap: 0.5rem;
}
.attendance-stat {
padding: 0.25rem 0;
}
.attendance-qr-content {
display: block;
}
.attendance-qr-frame {
max-width: 15rem;
margin-inline: auto;
}
.attendance-register-head,
.attendance-row {
padding-inline: 0.85rem;
}
.attendance-register-title-row {
align-items: stretch;
flex-direction: column;
}
.attendance-register-title-row .attendance-button {
width: 100%;
}
.attendance-person-copy small {
white-space: normal;
}
.attendance-person-copy strong {
overflow-wrap: anywhere;
white-space: normal;
}
.attendance-register { padding: 1rem 0.75rem; }
.attendance-row { grid-template-columns: minmax(0, 1fr); }
.attendance-row-status { justify-self: start; padding-left: 3.5rem; }
.attendance-dialog-actions {
flex-direction: column-reverse;
}
.attendance-dialog-actions .attendance-button {
width: 100%;
}
}
@media (prefers-reduced-motion: reduce) {
.attendance-hero {
animation: none;
}
.attendance-page * {
scroll-behavior: auto !important;
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
}
}
.attendance-avatar { border: 0; background: none; }
.attendance-avatar .ha-person-avatar { width: 100%; height: 100%; }
.badge-achievements {
position: fixed;
top: max(92px, calc(env(safe-area-inset-top) + 20px));
left: 50%;
transform: translateX(-50%);
width: min(440px, calc(100% - 24px));
z-index: 1100;
pointer-events: none;
}
.badge-achievement {
position: relative;
display: flex;
align-items: center;
gap: 12px;
padding: 16px 42px 12px 16px;
border: 1px solid #58cbb866;
border-radius: 20px;
background: linear-gradient(120deg, #15312d, #101817 70%);
color: #fff;
box-shadow: 0 18px 56px #0008, inset 0 1px 0 #ffffff14;
pointer-events: auto;
animation: achievement-enter 300ms cubic-bezier(.2,.8,.2,1) both;
}
.badge-achievement.is-leaving { animation: achievement-leave 200ms ease-in both; }
.badge-achievement-art { position: relative; width: 64px; height: 64px; flex: 0 0 64px; }
.badge-achievement-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.badge-achievement-shadow { filter: grayscale(1) brightness(.28); }
.badge-achievement-color { animation: achievement-color 900ms 350ms ease-out both; }
.badge-achievement-content { min-width: 0; }
.badge-achievement .badge-achievement-eyebrow { margin: 0 0 5px; color: #82e6ce; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; }
.badge-achievement h2 { margin: 0; color: #fff; font-size: 19px; line-height: 1.2; font-weight: 800; overflow-wrap: anywhere; }
.badge-achievement .badge-achievement-message { margin: 8px 0; color: #d3dfdc; font-size: 13px; line-height: 1.5; }
.badge-achievement a { display: inline-flex; align-items: center; min-height: 44px; color: #82e6ce; font-size: 13px; font-weight: 700; }
.badge-achievement-close { position: absolute; top: 6px; right: 6px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: #d3dfdc; font-size: 26px; cursor: pointer; }
.badge-achievement :is(a, button):focus-visible { outline: 2px solid #82e6ce; outline-offset: 2px; }
.badge-achievement-announcement { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@keyframes achievement-enter { from { opacity: 0; transform: translateY(-16px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes achievement-leave { to { opacity: 0; transform: translateY(-10px); } }
@keyframes achievement-color { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: scale(1); } }
@media (max-width: 480px) {
.badge-achievement { gap: 12px; padding: 14px 40px 10px 12px; border-radius: 20px; }
.badge-achievement-art { width: 56px; height: 56px; flex-basis: 56px; }
.badge-achievement h2 { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
.badge-achievement, .badge-achievement.is-leaving, .badge-achievement-color { animation: none; }
}
.profile-completion-dialog {
overflow-y: auto;
width: min(480px, calc(100% - 32px));
max-height: calc(100dvh - 48px);
margin: auto;
padding: clamp(24px, 5vw, 36px);
border: 0;
border-top: 5px solid #ffc914;
border-radius: 24px;
background: #231f20;
color: #fff;
box-shadow: 0 24px 80px #0008;
}
.profile-completion-dialog::backdrop { background: #080d10b8; }
.profile-completion-eyebrow { margin: 0 0 14px; color: #ffc914; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.profile-completion-dialog h2 { margin: 0 0 18px; font-size: clamp(25px, 5vw, 30px); line-height: 1.15; letter-spacing: -.03em; }
#profileCompletionDescription, #deleteAccountDialogDescription { margin: 0; color: #ded9db; font-size: 15px; line-height: 1.65; }
.profile-completion-note { margin: 16px 0 24px; color: #bfb8bb; font-size: 13px; line-height: 1.5; }
.profile-completion-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.profile-completion-primary, .profile-completion-later { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 12px 18px; border-radius: 999px; font-size: 14px; font-weight: 800; text-decoration: none; cursor: pointer; }
.profile-completion-primary { color: #171c1c; background: #17bebb; border: 2px solid transparent; }
.profile-completion-later { border: 1px solid #ffffff30; color: #ded9db; background: transparent; }
.profile-completion-dialog :is(a, button):focus-visible { outline: 3px solid #ffc914; outline-offset: 4px; }
#profileCompletionDescription strong, #deleteAccountDialogDescription strong { color: #ffc914; }
.profile-completion-primary:hover { background: #65dcd8; }
.profile-completion-later:hover { background: #ffffff10; }
.avatar-crop-stage { position: relative; overflow: hidden; width: min(280px, 100%); aspect-ratio: 1; margin: 0 auto 20px; border-radius: 16px; background: #171c1c; touch-action: none; cursor: grab; }
.avatar-crop-stage:active { cursor: grabbing; }
.avatar-crop-stage:focus-visible { outline: 3px solid #ffc914; outline-offset: 4px; }
.avatar-crop-stage::after { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 999px #000a; border: 2px solid #ffffff80; pointer-events: none; }
.avatar-crop-stage img { position: absolute; top: 0; left: 0; max-width: none; transform-origin: 0 0; user-select: none; pointer-events: none; }
.avatar-crop-zoom { display: grid; gap: 8px; margin: 0 0 24px; color: #ded9db; font-size: 14px; font-weight: 700; }
.avatar-crop-zoom input { width: 100%; accent-color: #17bebb; }
.delete-account-confirmation { display: grid; gap: 8px; margin: 20px 0; color: #ded9db; font-size: 14px; font-weight: 700; }
.delete-account-confirmation input { width: 100%; min-height: 46px; padding: 12px 14px; border: 1px solid #ffffff30; border-radius: 12px; background: #171c1c; color: white; font: inherit; }
.delete-account-confirmation input:focus-visible { outline: 3px solid #ffc914; outline-offset: 2px; }
#interests { scroll-margin-top: 100px; margin-bottom: 32px; min-width: 0; }
#interests h2 { margin: 0 0 14px; font-size: clamp(24px, 5vw, 28px); font-weight: 800; line-height: 1.2; }
#interests .profile-panel-description { color: #ded9db; }
#interests:focus-visible { outline: 3px solid #ffc914; outline-offset: 6px; border-radius: 12px; }
.profile-interests-choices { display: flex; flex-wrap: wrap; gap: 10px; min-width: 0; margin: 20px 0 16px; padding: 0; border: 0; }
.profile-interest-choice { position: relative; cursor: pointer; }
.profile-interest-choice input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: inherit; }
.profile-interest-choice span { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 10px 18px; border: 1px solid #ffffff30; border-radius: 999px; color: #ded9db; background: #ffffff08; font-weight: 700; transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease; }
.profile-interest-choice input:checked + span { border-color: #17bebb; background: #17bebb; color: #171c1c; }
.profile-interest-choice input:checked + span::after { content: '✓'; position: absolute; top: -5px; right: 0; display: grid; place-items: center; width: 19px; height: 19px; border: 2px solid #231f20; border-radius: 50%; background: #ffc914; color: #171c1c; font-size: 12px; line-height: 1; animation: interest-check-in 220ms ease-out both; pointer-events: none; }
@keyframes interest-check-in { from { opacity: 0; transform: scale(.4) rotate(-20deg); } 70% { opacity: 1; transform: scale(1.15) rotate(0deg); } to { opacity: 1; transform: scale(1); } }
.profile-interests-choices { display: grid; gap: 0; }
:is(.profile-interest-group, .interest-group) { border-bottom: 1px solid #ffffff1a; }
:is(.profile-interest-group, .interest-group) > summary {
display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 2px;
cursor: pointer; list-style: none; color: #fff; font-weight: 800;
}
:is(.profile-interest-group, .interest-group) > summary::-webkit-details-marker { display: none; }
:is(.profile-interest-group, .interest-group) > summary::after {
content: ''; width: 8px; height: 8px; margin-left: auto; border: solid #ded9db; border-width: 0 2px 2px 0;
transform: rotate(45deg); transition: transform .2s ease;
}
:is(.profile-interest-group, .interest-group)[open] > summary::after { transform: rotate(-135deg); }
:is(.profile-interest-group-count, .interest-group-count) { color: #17bebb; font-size: .8rem; font-weight: 700; }
:is(.profile-interest-group, .interest-group) > summary:focus-visible { outline: 3px solid #ffc914; outline-offset: 2px; border-radius: 8px; }
.profile-interest-group-choices { display: flex; flex-wrap: wrap; gap: 10px; padding: 4px 2px 16px; }
.interest-group-chips { padding: 4px 0 14px; }
.profile-interest-choice span { min-height: 44px; padding: 8px 16px; }
@media (prefers-reduced-motion: reduce) {
.profile-interest-choice span { transition: none; }
:is(.profile-interest-group, .interest-group) > summary::after { transition: none; }
.profile-interest-choice input:checked + span::after { animation: none; }
}
.profile-interest-choice input:focus-visible + span { outline: 3px solid #ffc914; outline-offset: 3px; }
.profile-interests-choices:disabled { opacity: .6; }
.profile-interests-choices:disabled label { cursor: wait; }
.profile-interests-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
@media (max-width: 480px) {
.profile-interests-actions > button { width: 100%; min-height: 46px; }
.profile-completion-actions > :is(a, button) { width: 100%; }
}
.ha-event-card {
display: flex;
flex-direction: column;
min-width: 0;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 1rem;
background: rgba(46, 40, 42, 0.78);
color: #FFFFFF;
cursor: pointer;
transform: translateY(0);
transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.ha-event-card:hover,
.ha-event-card:focus-within {
border-color: rgba(23, 190, 187, 0.45);
box-shadow: 0 16px 34px rgba(0, 0, 0, 0.24), 0 0 0 1px rgba(23, 190, 187, 0.08);
transform: translateY(-0.35rem);
}
.ha-event-card:focus-visible { outline: 2px solid #FFC914; outline-offset: 2px; }
.ha-event-card-media {
position: relative;
aspect-ratio: 16 / 9;
max-height: 14rem;
background: rgba(255, 255, 255, 0.06);
}
.ha-event-card-media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1), filter 260ms ease;
}
.ha-event-card:hover .ha-event-card-media img,
.ha-event-card:focus-within .ha-event-card-media img {
filter: saturate(1.08);
transform: scale(1.045);
}
@media (prefers-reduced-motion: reduce) {
.ha-event-card,
.ha-event-card-media img {
transition: none;
}
.ha-event-card:hover,
.ha-event-card:focus-within,
.ha-event-card:hover .ha-event-card-media img,
.ha-event-card:focus-within .ha-event-card-media img {
transform: none;
}
}
.ha-event-card-badges {
position: absolute;
top: 0.75rem;
left: 0.75rem;
right: 0.75rem;
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
}
.ha-event-card-category,
.ha-event-card-poll,
.ha-event-card-ended {
border-radius: 999px;
background: rgba(23, 20, 21, 0.72);
backdrop-filter: blur(6px);
padding: 0.2rem 0.6rem;
color: #FFFFFF;
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.02em;
}
.ha-event-card-poll { color: #FFC914; }
.ha-event-card-ended { color: rgba(255, 255, 255, 0.7); }
.ha-event-card-heart {
display: grid;
flex-shrink: 0;
place-items: center;
width: 2.75rem;
height: 2.75rem;
border: 0;
border-radius: 0.6rem;
padding: 0;
background: transparent;
color: #FFFFFF;
cursor: pointer;
touch-action: manipulation;
transition: background-color 0.15s ease, color 0.2s ease;
}
.ha-event-card-heart:hover { background: rgba(255, 255, 255, 0.08); }
.ha-event-card-heart:active { background: rgba(255, 255, 255, 0.14); }
.ha-event-card-heart:focus-visible { outline: 2px solid #FFC914; outline-offset: 2px; }
.ha-event-card-heart svg {
width: 1.35rem;
height: 1.35rem;
fill: none;
stroke: currentColor;
stroke-width: 2;
}
.ha-event-card-heart[aria-pressed="true"] { color: #E4572E; }
.ha-event-card-heart[aria-pressed="true"] svg { fill: currentColor; }
@media (prefers-reduced-motion: reduce) {
.ha-event-card-heart { transition: none; }
}
.ha-event-card-body {
display: flex;
flex: 1;
flex-direction: column;
gap: 0.2rem;
padding: 0.8rem 0.95rem 0.9rem;
}
.ha-event-card-heading {
display: flex;
align-items: center;
gap: 0.5rem;
}
.ha-event-card-heading h3 {
flex: 1;
min-width: 0;
margin: 0;
color: #FFFFFF;
font-size: 1rem;
font-weight: 900;
line-height: 1.2;
overflow-wrap: anywhere;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.ha-event-card-place,
.ha-event-card-level {
margin: 0;
color: rgba(255, 255, 255, 0.6);
font-size: 0.8rem;
overflow-wrap: anywhere;
}
.ha-event-card-level { color: #17BEBB; font-weight: 700; }
.ha-event-card-footer {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
gap: 0.75rem;
margin-top: auto;
padding-top: 0.35rem;
font-size: 0.8rem;
font-weight: 800;
}
.ha-event-card-date { color: #FFC914; }
.ha-event-card-participants { color: rgba(255, 255, 255, 0.78); }
.ha-event-card-extra {
display: flex;
flex: 1 0 100%;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
}
.ha-event-card-extra :is(a, button) {
display: inline-flex;
align-items: center;
min-height: 2.25rem;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 0.6rem;
padding: 0 0.75rem;
color: #FFFFFF;
font-size: 0.75rem;
font-weight: 800;
text-decoration: none;
}
.ha-event-card-footer .my-events-danger {
display: inline-flex;
align-items: center;
gap: 0.35rem;
min-height: 2rem;
margin-right: auto;
border: 1px solid rgba(228, 87, 46, 0.45);
border-radius: 0.6rem;
padding: 0 0.65rem;
background: rgba(228, 87, 46, 0.1);
color: #FF9A7A;
font-size: 0.75rem;
font-weight: 800;
cursor: pointer;
}
.ha-event-card-footer .my-events-danger svg {
width: 0.95rem;
height: 0.95rem;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.ha-event-card-footer .my-events-danger:hover,
.ha-event-card-footer .my-events-danger:focus-visible {
border-color: rgba(228, 87, 46, 0.85);
background: rgba(228, 87, 46, 0.2);
color: #FFB096;
}
.ha-event-card-footer .my-events-danger:disabled { cursor: wait; opacity: 0.62; }
.followed-events-grid {
display: grid;
gap: 0.75rem;
}
.ha-event-card-head {
display: flex;
align-items: center;
min-width: 0;
padding: 0.6rem 0.8rem;
}
.ha-event-card-organizer {
display: inline-flex;
align-items: center;
gap: 0.55rem;
min-width: 0;
border-radius: 0.5rem;
color: #FFFFFF;
font-size: 0.85rem;
font-weight: 800;
text-decoration: none;
}
.ha-event-card-organizer span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ha-event-card-organizer:hover span { text-decoration: underline; }
.ha-event-card-organizer:focus-visible { outline: 2px solid #FFC914; outline-offset: 2px; }
.ha-event-card-organizer .ha-person-avatar {
width: 2rem;
height: 2rem;
font-size: 0.7rem;
}
.ha-event-card-action { margin-right: auto; }
.ha-event-card-join {
min-height: 2.25rem;
padding: 0.35rem 0.9rem;
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 0.6rem;
background: rgba(255, 255, 255, 0.08);
color: #FFFFFF;
font-size: 0.8rem;
font-weight: 800;
cursor: pointer;
transition: background 0.15s ease;
}
.ha-event-card-join:hover { background: rgba(255, 255, 255, 0.14); }
.ha-event-card-join.is-primary {
border-color: transparent;
background: var(--action-primary);
color: var(--action-ink);
}
.ha-event-card-join.is-primary:hover { background: var(--action-primary-hover); }
.ha-event-card-join.is-joined {
border-color: rgba(155, 220, 98, 0.35);
background: var(--action-success-surface);
color: var(--action-success);
}
.ha-event-card-join.is-joined:hover { background: var(--action-success-surface-hover); }
.ha-event-card-join:disabled { opacity: 0.55; cursor: progress; }
.ha-event-card-join:focus-visible { outline: 2px solid #FFC914; outline-offset: 2px; }
.ha-event-card-rating {
display: inline-flex;
align-items: center;
gap: 0.3rem;
color: #FFFFFF;
font-size: 0.95rem;
font-weight: 900;
}
.ha-event-card-rating svg {
width: 1.05rem;
height: 1.05rem;
fill: #FFC914;
}
.ha-event-card-rating.is-empty {
color: var(--content-secondary);
font-size: 0.78rem;
font-weight: 700;
}
.my-events-page .ha-event-card-extra { flex-wrap: nowrap; }
.my-events-page .ha-event-card-extra .my-events-status { margin-right: auto; }
.my-events-page .ha-event-card-extra .my-events-danger { min-height: 2.25rem; margin-right: 0; }
.my-events-page :is(.ha-event-card-date, .ha-event-card-participants) { font-size: 0.95rem; }
.my-events-page .ha-event-card-rating { font-size: 1.15rem; }
.my-events-page .ha-event-card-rating svg { width: 1.3rem; height: 1.3rem; }
.my-events-page .ha-event-card-rating.is-empty { font-size: 0.9rem; }
@media (max-width: 767px) {
body main :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select, textarea) {
font-size: 1rem;
min-width: 0;
max-width: 100%;
}
body.followed-page :is(.followed-list-card, .followed-notif-card) {
height: auto;
min-height: 0;
grid-template-rows: auto;
}
body.followed-page .followed-list-card > .followed-person-tags { min-height: 0; }
body.followed-page .followed-list-actions { margin-top: .5rem; }
body.followed-page .followed-grid .followed-person-row {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: .75rem;
}
body.followed-page .followed-person-row > div:nth-child(2) { min-width: 0; }
body.followed-page .followed-person-row h3 { overflow-wrap: anywhere; }
body.followed-page .followed-person-row > .followed-mini-action {
grid-column: 1 / -1;
justify-self: stretch;
min-height: 44px;
margin-top: .25rem;
}
body.followed-page :is(.followed-remove, .followed-events-btn, .followed-filter) { min-height: 44px !important; }
}
@media (max-width: 1023px) {
body.profile-page .profile-layout { grid-template-columns: minmax(0, 1fr); }
body.profile-page .profile-sidebar {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
width: auto;
min-width: 0;
}
body.profile-page .profile-tab { min-width: 0; }
}
@media (max-width: 480px) {
body:has(#profileBtn) header img[alt="Logo HangingAround"] {
width: clamp(7rem, 35vw, 10rem) !important;
height: auto !important;
}
body:has(#profileBtn) header nav > .grid { column-gap: .5rem !important; }
body:has(#profileBtn) header nav .justify-self-end { gap: .25rem !important; }
body:has(#profileBtn) header :is(#notifBellBtn, #menu-btn) { min-width: 44px; min-height: 44px; }
body.profile-page .profile-public-grid :is(.profile-photo-composer, .profile-current-badge) {
grid-template-columns: 4rem minmax(0, 1fr);
gap: 1rem .75rem;
padding: 1rem;
}
body.profile-page .profile-public-grid :is(.profile-avatar-edit, .profile-current-badge-image) {
width: 4rem;
height: 4rem;
}
body.profile-page .profile-public-grid .profile-current-badge-image img { width: 3.25rem; height: 3.25rem; }
body.profile-page .profile-public-grid .profile-photo-actions { gap: .5rem; }
body.profile-page .profile-public-cover-copy { padding: 1rem; }
body.profile-page .profile-actions { padding: 1rem; }
body.profile-page .profile-actions > div { grid-template-columns: minmax(0, 1fr); }
body.create-page #event-page-title { font-size: clamp(2rem, 8vw, 2.5rem); }
body.create-page .create-hero { padding: 1.25rem; }
}
@media (max-width: 1023px) {
body.create-page .create-layout { grid-template-columns: minmax(0, 1fr); }
body.create-page :is(.create-form-card, .create-form-section, .create-section-body, .create-field) { min-width: 0; }
body.create-page .create-form-card { width: 100%; justify-self: center; }
}
body.create-page .create-workspace { overflow: clip; }
@media (max-width: 767px) {
body.profile-page .profile-account-list { grid-template-columns: minmax(0, 1fr); }
body.profile-page .profile-account-list > div:not(.profile-field) {
flex-direction: column;
align-items: flex-start;
gap: .5rem;
min-width: 0;
overflow-wrap: anywhere;
}
body.home-page .home-recommendation-jump { min-width: 0; gap: .5rem; padding: .75rem; }
body.home-page .home-recommendation-jump > .flex-1 { min-width: 0; overflow-wrap: anywhere; }
}
body.notifications-page .followed-notif-card { grid-template-rows: auto auto; }
body.notifications-page .followed-notif-actions {
grid-column: 2;
grid-row: 2;
align-self: start;
}
.public-profile-status {
padding: 3rem 0;
color: rgba(255, 255, 255, 0.6);
text-align: center;
}
.public-profile-hero {
position: relative;
display: grid;
grid-template-columns: auto minmax(0, 1fr);
grid-template-areas:
"avatar head"
"meta meta"
"about about"
"actions actions";
align-items: center;
gap: 0.75rem 1rem;
width: min(100% - 2rem, 1180px);
margin: 0 auto;
padding: 1.25rem 0 0;
}
body.public-profile-page .public-profile-hero { content-visibility: visible; }
.public-profile-hero.has-menu .public-profile-head { padding-right: 3rem; }
.public-profile-avatar {
grid-area: avatar;
position: relative;
width: 5.25rem;
}
.public-profile-avatar-image {
position: relative;
display: grid;
place-items: center;
aspect-ratio: 1;
overflow: hidden;
border-radius: 50%;
background: linear-gradient(135deg, #17BEBB, #FFC914);
color: #231F20;
font-size: 1.75rem;
font-weight: 900;
}
.public-profile-avatar-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.public-profile-avatar-zoom {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
padding: 0;
border: 0;
border-radius: inherit;
background: transparent;
cursor: zoom-in;
}
.public-profile-avatar-zoom[hidden] { display: none; }
.public-profile-avatar-zoom:hover {
box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.6);
}
.public-profile-avatar-zoom:focus-visible {
outline: 3px solid var(--action-primary);
outline-offset: -3px;
}
.public-profile-badge {
position: absolute;
right: -0.15rem;
bottom: -0.15rem;
display: grid;
place-items: center;
width: 1.85rem;
height: 1.85rem;
border: 3px solid #1D1A1B;
border-radius: 50%;
background: #2E282A;
}
.public-profile-badge[hidden] { display: none; }
.public-profile-badge img {
width: 1.15rem;
height: 1.15rem;
object-fit: contain;
}
.public-profile-head {
grid-area: head;
min-width: 0;
}
.public-profile-head h1 {
overflow-wrap: anywhere;
color: #FFFFFF;
font-size: 1.3rem;
font-weight: 900;
line-height: 1.15;
}
.public-profile-stats {
display: flex;
gap: 1.25rem;
margin-top: 0.35rem;
}
.public-profile-stats button {
display: flex;
flex-direction: column;
align-items: flex-start;
min-height: 44px;
justify-content: center;
color: rgba(255, 255, 255, 0.6);
font-size: 0.75rem;
font-weight: 700;
line-height: 1.2;
}
.public-profile-stats strong {
color: #FFFFFF;
font-size: 1.05rem;
font-weight: 900;
}
.public-profile-stats button:hover strong,
.public-profile-stats button:focus-visible strong { color: #17BEBB; }
.public-profile-meta {
grid-area: meta;
color: rgba(255, 255, 255, 0.6);
font-size: 0.85rem;
font-weight: 700;
}
.public-profile-meta:empty { display: none; }
.public-profile-about {
grid-area: about;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.4rem;
min-width: 0;
}
.public-profile-bio {
max-width: 40rem;
color: rgba(255, 255, 255, 0.82);
font-size: 0.92rem;
line-height: 1.55;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.public-profile-bio:empty { display: none; }
.public-profile-bio-link {
display: inline-flex;
align-items: center;
gap: 0.35rem;
min-height: 32px;
margin: 0.1rem 0.15rem;
border-radius: 999px;
padding: 0 0.7rem 0 0.55rem;
background: rgba(23, 190, 187, 0.08);
color: #17BEBB;
font-size: 0.85rem;
font-weight: 700;
white-space: nowrap;
vertical-align: middle;
transition: background-color 0.15s;
}
.public-profile-bio-link:hover,
.public-profile-bio-link:focus-visible { background: rgba(23, 190, 187, 0.14); }
.public-profile-bio-link.ha-social-link--icon-only,
.public-profile-bio-link.ha-social-link--icon-only:is(:hover, :focus-visible) {
margin: 0;
padding: 0.375rem;
background: none;
transition: opacity 0.15s;
}
.public-profile-bio-link.ha-social-link--icon-only:hover { opacity: 0.78; }
.public-profile-bio.is-clamped {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
line-clamp: 3;
}
.public-profile-bio.is-clamped:empty { display: none; }
.public-profile-text-btn {
min-height: 32px;
color: rgba(255, 255, 255, 0.55);
font-size: 0.85rem;
font-weight: 800;
}
.public-profile-text-btn:hover { color: #17BEBB; }
.public-profile-text-btn[hidden] { display: none; }
.public-profile-info-btn {
display: inline-flex;
align-items: center;
gap: 0.4rem;
min-height: 36px;
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 999px;
padding: 0 0.85rem;
color: #FFFFFF;
font-size: 0.8rem;
font-weight: 800;
}
.public-profile-info-btn:hover { border-color: #17BEBB; }
.public-profile-info-btn[hidden] { display: none; }
.public-profile-info-btn svg {
width: 1rem;
height: 1rem;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
}
.public-profile-hero.is-blocked .public-profile-stats { display: none; }
.public-profile-actions {
grid-area: actions;
display: flex;
gap: 0.5rem;
align-items: center;
}
.public-profile-actions:not(:has(> :not([hidden]))) { display: none; }
.public-profile-follow {
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
border-radius: 0.75rem;
background: #17BEBB;
padding: 0 1.25rem;
color: #231F20;
font-weight: 900;
}
.public-profile-follow.is-secondary {
border: 1px solid rgba(255, 255, 255, 0.2);
background: rgba(255, 255, 255, 0.06);
color: #FFFFFF;
}
#publicFollowBtn {
cursor: pointer;
transition: transform 150ms cubic-bezier(0.23, 1, 0.32, 1),
background-color 180ms ease,
border-color 180ms ease,
box-shadow 180ms ease;
}
#publicFollowBtn:focus-visible {
outline: 3px solid rgba(255, 201, 20, 0.9);
outline-offset: 3px;
}
@media (hover: hover) and (pointer: fine) {
#publicFollowBtn:not(.is-secondary, :disabled):hover {
background: #20D5D1;
box-shadow: 0 10px 24px rgba(23, 190, 187, 0.28);
transform: translateY(-2px);
}
#publicFollowBtn.is-secondary:not(:disabled):hover {
border-color: rgba(23, 190, 187, 0.72);
background: rgba(23, 190, 187, 0.12);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
transform: translateY(-1px);
}
}
#publicFollowBtn:not(:disabled):active { transform: translateY(0) scale(0.97); }
.public-profile-follow:disabled {
opacity: 0.6;
cursor: wait;
}
@media (prefers-reduced-motion: reduce) {
#publicFollowBtn { transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease; }
#publicFollowBtn:not(:disabled):is(:hover, :active) { transform: none; }
}
.public-profile-follows-you {
flex: none;
border-radius: 999px;
background: rgba(255, 255, 255, 0.08);
padding: 0.35rem 0.75rem;
color: rgba(255, 255, 255, 0.75);
font-size: 0.75rem;
font-weight: 800;
}
.public-profile-menu {
position: absolute;
top: 1.25rem;
right: 0;
}
.public-profile-menu-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border: 1px solid rgba(23, 190, 187, 0.34);
border-radius: 50%;
background: linear-gradient(145deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.035));
color: #FFFFFF;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 8px 24px rgba(0, 0, 0, 0.2);
cursor: pointer;
transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.public-profile-menu-btn:hover,
.public-profile-menu-btn[aria-expanded="true"] {
border-color: rgba(23, 190, 187, 0.75);
background: rgba(23, 190, 187, 0.14);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24), 0 0 0 3px rgba(23, 190, 187, 0.08);
}
.public-profile-menu-label { display: none; }
.public-profile-menu-btn svg {
width: 1.35rem;
height: 1.35rem;
flex: none;
fill: currentColor;
}
.public-profile-menu-btn .public-profile-menu-chevron {
display: none;
width: 1rem;
height: 1rem;
fill: none;
stroke: currentColor;
stroke-width: 2.25;
stroke-linecap: round;
stroke-linejoin: round;
transition: transform 180ms ease;
}
.public-profile-menu-btn[aria-expanded="true"] .public-profile-menu-chevron { transform: rotate(180deg); }
.public-profile-menu-btn:focus-visible,
.public-profile-menu-list :is(a, button):focus-visible {
outline: 2px solid #FFC914;
outline-offset: 2px;
}
.public-profile-menu-list {
position: absolute;
top: calc(100% + 0.35rem);
right: 0;
z-index: 20;
width: max-content;
max-width: calc(100vw - 2rem);
min-width: 12rem;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 0.9rem;
background: #231F20;
padding: 0.4rem;
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}
.public-profile-menu-list :is(a, button) {
display: block;
width: 100%;
text-align: left;
border-radius: 0.6rem;
padding: 0.7rem 0.9rem;
color: #FFFFFF;
font-size: 0.9rem;
font-weight: 700;
}
.public-profile-menu-list :is(a, button):hover { background: rgba(255, 255, 255, 0.07); color: #17BEBB; }
.public-profile-menu-list .is-danger { color: #FF6B5B; }
.public-profile-shell {
display: grid;
grid-template-columns: 1fr;
padding-top: 0.75rem;
}
@media (min-width: 641px) {
.public-profile-hero {
grid-template-columns: auto minmax(0, 1fr) auto;
grid-template-rows: repeat(3, auto) 1fr;
grid-template-areas:
"avatar head actions"
"avatar meta meta"
"avatar about about"
"avatar . .";
align-items: start;
gap: 0.6rem 2rem;
padding-top: 2rem;
}
.public-profile-hero.has-menu { padding-right: 7.5rem; }
.public-profile-hero.has-menu .public-profile-head { padding-right: 0; }
.public-profile-avatar { width: clamp(7rem, 12vw, 9.5rem); }
.public-profile-avatar-image { font-size: 2.5rem; }
.public-profile-badge { width: 2.4rem; height: 2.4rem; border-width: 4px; }
.public-profile-badge img { width: 1.5rem; height: 1.5rem; }
.public-profile-head h1 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.public-profile-stats { gap: 2rem; }
.public-profile-stats button { flex-direction: row; align-items: baseline; gap: 0.35rem; min-height: 2rem; font-size: 0.9rem; }
.public-profile-stats strong { font-size: 1.15rem; }
.public-profile-actions { justify-content: flex-end; }
.public-profile-follow { flex: none; }
.public-profile-menu { top: 2rem; }
.public-profile-menu-btn {
gap: 0.5rem;
width: auto;
min-width: 6.75rem;
height: 48px;
border-radius: 999px;
padding: 0 0.85rem 0 1rem;
}
.public-profile-menu-label {
display: inline;
font-size: 0.82rem;
font-weight: 800;
letter-spacing: 0.01em;
}
.public-profile-menu-btn .public-profile-menu-dots { display: none; }
.public-profile-menu-btn .public-profile-menu-chevron { display: block; }
}
.public-profile-tabs {
grid-column: 1 / -1;
grid-row: 1;
display: grid;
grid-template-columns: repeat(4, 1fr);
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.public-profile-tabs button {
position: relative;
min-height: 48px;
margin-top: -1px;
border-top: 2px solid transparent;
color: rgba(255, 255, 255, 0.5);
font-size: 0.8rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
transition: color 220ms ease, transform 220ms ease;
}
.public-profile-tabs button[aria-selected="true"] {
border-top-color: #FFFFFF;
color: #FFFFFF;
transform: translateY(-1px);
}
.public-profile-tabs button::after {
position: absolute;
right: 18%;
bottom: -1px;
left: 18%;
height: 2px;
border-radius: 999px;
background: #17BEBB;
content: "";
opacity: 0;
transform: scaleX(0.35);
transition: opacity 220ms ease, transform 220ms ease;
}
.public-profile-tabs button[aria-selected="true"]::after {
opacity: 1;
transform: scaleX(1);
}
.public-profile-tabs button:focus-visible {
outline: 2px solid #FFC914;
outline-offset: -2px;
}
.public-profile-panel {
grid-column: 1 / -1;
grid-row: 2;
padding: 1.25rem 0 2rem;
opacity: 0;
transform: translateY(14px);
transition: opacity 260ms ease, transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
will-change: opacity, transform;
}
.public-profile-panel.is-visible {
opacity: 1;
transform: translateY(0);
}
.public-profile-events {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
gap: 1rem;
}
.public-profile-events .ha-event-card,
.public-profile-gallery figure,
.public-profile-badges li {
animation: public-profile-item-in 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.public-profile-events .ha-event-card:nth-child(2),
.public-profile-gallery figure:nth-child(2),
.public-profile-badges li:nth-child(2) { animation-delay: 40ms; }
.public-profile-events .ha-event-card:nth-child(3),
.public-profile-gallery figure:nth-child(3),
.public-profile-badges li:nth-child(3) { animation-delay: 80ms; }
.public-profile-events .ha-event-card:nth-child(4),
.public-profile-gallery figure:nth-child(4),
.public-profile-badges li:nth-child(4) { animation-delay: 120ms; }
@keyframes public-profile-item-in {
from { opacity: 0; }
to { opacity: 1; }
}
.public-profile-gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 3px;
}
.public-profile-gallery figure {
position: relative;
margin: 0;
aspect-ratio: 1;
overflow: hidden;
background: rgba(255, 255, 255, 0.06);
}
.public-profile-gallery button {
display: block;
width: 100%;
height: 100%;
}
.public-profile-gallery :is(img, video) {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.public-profile-gallery figure:hover :is(img, video) { transform: scale(1.04); }
.public-profile-gallery button:focus-visible {
outline: 2px solid #FFC914;
outline-offset: -2px;
}
.public-profile-video-mark {
position: absolute;
top: 0.5rem;
right: 0.6rem;
color: #FFFFFF;
text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}
.public-profile-gallery figcaption {
position: absolute;
inset: auto 0 0;
padding: 1.5rem 0.6rem 0.45rem;
background: linear-gradient(transparent, rgba(0, 0, 0, 0.75));
font-size: 0.75rem;
font-weight: 700;
opacity: 0;
transition: opacity 0.2s ease;
}
.public-profile-gallery figure:is(:hover, :focus-within) figcaption { opacity: 1; }
.public-profile-gallery figcaption a {
display: block;
overflow: hidden;
color: #FFFFFF;
text-overflow: ellipsis;
white-space: nowrap;
}
@media (hover: none) {
.public-profile-gallery figcaption { opacity: 1; }
}
.public-profile-badge-count {
margin-bottom: 1rem;
color: rgba(255, 255, 255, 0.6);
font-weight: 700;
}
.public-profile-badges {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
gap: 1rem;
}
.public-profile-badges li {
display: grid;
justify-items: center;
gap: 0.35rem;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 1rem;
background: rgba(46, 40, 42, 0.6);
padding: 1rem 0.75rem;
text-align: center;
transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1), background 220ms ease;
}
.public-profile-badges li:hover,
.public-profile-badges li:focus-within {
border-color: rgba(255, 201, 20, 0.5);
background: rgba(46, 40, 42, 0.9);
box-shadow: 0 16px 30px rgba(0, 0, 0, 0.24), 0 0 0 1px rgba(255, 201, 20, 0.08);
transform: translateY(-0.35rem) scale(1.02);
}
.public-profile-badges img {
width: 4rem;
height: 4rem;
object-fit: contain;
transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), filter 220ms ease;
}
.public-profile-badges li:hover img,
.public-profile-badges li:focus-within img {
filter: drop-shadow(0 8px 12px rgba(255, 201, 20, 0.2));
transform: translateY(-0.2rem) rotate(-3deg) scale(1.08);
}
.public-profile-badges strong { font-size: 0.9rem; }
.public-profile-badges span {
color: rgba(255, 255, 255, 0.55);
font-size: 0.75rem;
line-height: 1.4;
}
.public-profile-empty {
padding: 3rem 1rem;
color: rgba(255, 255, 255, 0.6);
text-align: center;
}
.public-profile-empty h3 {
margin-bottom: 0.35rem;
color: #FFFFFF;
font-size: 1.1rem;
font-weight: 900;
}
@media (prefers-reduced-motion: reduce) {
.public-profile-tabs button,
.public-profile-tabs button::after,
.public-profile-panel,
.public-profile-events .ha-event-card,
.public-profile-gallery figure,
.public-profile-badges li,
.public-profile-badges img {
transition: none;
animation: none;
transform: none;
}
.public-profile-tabs button[aria-selected="true"],
.public-profile-badges li:hover,
.public-profile-badges li:focus-within,
.public-profile-badges li:hover img,
.public-profile-badges li:focus-within img {
transform: none;
}
}
.public-people-dialog {
width: min(26rem, calc(100vw - 2rem));
max-height: min(32rem, calc(100vh - 4rem));
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 1rem;
background: #231F20;
padding: 0;
color: #FFFFFF;
}
.public-people-dialog::backdrop { background: rgba(0, 0, 0, 0.6); }
.public-people-head {
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
padding: 0.75rem 1rem;
}
.public-people-head h2 { font-weight: 900; }
.public-people-close {
width: 44px;
height: 44px;
font-size: 1.5rem;
}
.public-people-list { padding: 0.5rem; }
.public-people-list > li:not(:has(.ha-person-row)) { padding: 0.5rem; color: rgba(255, 255, 255, 0.6); }
@media (max-width: 640px) {
.public-people-dialog { width: calc(100vw - 1rem); }
.public-people-list { padding: 0.25rem; }
.public-profile-tabs button {
padding: 0 0.25rem;
font-size: 0.66rem;
letter-spacing: 0.02em;
line-height: 1.2;
}
}
.profile-back-link {
display: inline-flex;
align-items: center;
gap: 0.35rem;
min-height: 44px;
margin-bottom: 0.75rem;
color: rgba(255, 255, 255, 0.75);
font-weight: 800;
}
.profile-back-link:hover { color: #17BEBB; }
.profile-back-link svg {
width: 1.1rem;
height: 1.1rem;
fill: none;
stroke: currentColor;
stroke-width: 2.5;
stroke-linecap: round;
stroke-linejoin: round;
}
.public-sheet {
width: 100%;
max-width: 100%;
max-height: 85vh;
margin: auto 0 0;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 1.25rem 1.25rem 0 0;
background: #231F20;
padding: 0;
color: #FFFFFF;
}
.public-sheet::backdrop { background: rgba(0, 0, 0, 0.6); }
.public-sheet.public-profile-photo-dialog {
width: min(22rem, calc(100vw - 2rem));
max-height: calc(100dvh - 2rem);
margin: auto;
border-radius: 1rem;
border-color: rgba(255, 255, 255, 0.16);
background: #1b191a;
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
}
.public-profile-photo-dialog::backdrop {
background: rgba(12, 11, 12, 0.65);
backdrop-filter: blur(5px);
}
.public-profile-photo-dialog .public-people-head {
border-bottom-color: transparent;
}
.public-profile-photo-dialog .public-people-head h2 {
color: var(--content-secondary);
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 0.02em;
}
.public-profile-photo-dialog .public-people-close {
display: grid;
place-items: center;
border-radius: 50%;
background: rgba(255, 255, 255, 0.05);
color: var(--content-secondary);
cursor: pointer;
transition: background 150ms ease, color 150ms ease;
}
.public-profile-photo-dialog .public-people-close svg {
width: 1.125rem;
height: 1.125rem;
}
.public-profile-photo-dialog .public-people-close:hover {
background: rgba(255, 255, 255, 0.12);
color: var(--content-heading);
}
.public-profile-photo-dialog .public-people-close:focus-visible {
outline: 2px solid var(--action-primary);
outline-offset: 3px;
}
.public-profile-photo-body {
padding: 0 1rem 1rem;
}
.public-profile-photo-body img {
display: block;
width: 100%;
max-height: min(20rem, 60dvh);
object-fit: contain;
border-radius: 0.5rem;
background: rgba(255, 255, 255, 0.025);
}
@media (prefers-reduced-motion: no-preference) {
.public-sheet[open] {
--sheet-enter-transform: translateY(1.5rem);
animation: public-sheet-enter 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.public-sheet[open]::backdrop {
animation: public-sheet-backdrop-enter 220ms ease-out;
}
}
@keyframes public-sheet-enter {
from { opacity: 0; transform: var(--sheet-enter-transform); }
to { opacity: 1; transform: none; }
}
@keyframes public-sheet-backdrop-enter {
from { opacity: 0; }
to { opacity: 1; }
}
@media (min-width: 641px) and (prefers-reduced-motion: no-preference) {
.public-sheet[open] {
--sheet-enter-transform: translateY(0.5rem) scale(0.97);
}
}
.public-sheet-body {
display: grid;
gap: 0.6rem;
padding: 1rem 1.25rem 1.5rem;
}
.public-sheet-body h3 {
margin-top: 0.4rem;
color: rgba(255, 255, 255, 0.5);
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.public-sheet-body h4 { font-weight: 900; }
.public-sheet-chips {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
}
.public-profile-chip {
display: inline-flex;
align-items: center;
height: 1.9rem;
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 999px;
padding: 0 0.8rem;
color: #FFFFFF;
font-size: 0.82rem;
font-weight: 700;
}
.public-sheet-levels { display: grid; gap: 0.5rem; }
.public-sheet-levels li {
display: grid;
grid-template-columns: 1fr auto;
gap: 0 0.75rem;
border-radius: 0.75rem;
background: rgba(255, 255, 255, 0.05);
padding: 0.6rem 0.8rem;
}
.public-sheet-levels strong { color: #FFC914; font-size: 0.85rem; }
.public-sheet-levels small {
grid-column: 1 / -1;
color: rgba(255, 255, 255, 0.55);
font-size: 0.78rem;
}
.public-sheet-note { color: rgba(255, 255, 255, 0.65); }
.public-sheet-action { justify-self: start; margin-top: 0.5rem; }
.public-sheet-about {
display: grid;
justify-items: center;
gap: 0.3rem;
text-align: center;
}
.public-sheet-about :is(img, span) {
display: grid;
place-items: center;
width: 4.5rem;
height: 4.5rem;
border-radius: 50%;
object-fit: cover;
background: linear-gradient(135deg, #17BEBB, #FFC914);
color: #231F20;
font-size: 1.5rem;
font-weight: 900;
}
.public-sheet-about small { color: rgba(255, 255, 255, 0.55); }
.public-sheet-facts {
display: grid;
grid-template-columns: auto 1fr;
gap: 0.5rem 1rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-top: 0.75rem;
}
.public-sheet-facts dt { color: rgba(255, 255, 255, 0.55); }
.public-sheet-facts dd { margin: 0; font-weight: 800; text-align: right; }
.public-sheet-share { display: grid; gap: 0.5rem; }
.public-sheet-report { display: grid; gap: 0.75rem; }
.public-sheet-report fieldset { display: grid; gap: 0.25rem; }
.public-sheet-report legend { margin-bottom: 0.4rem; font-weight: 800; }
.public-sheet-report label:not(.public-sheet-details) {
display: flex;
align-items: center;
gap: 0.6rem;
min-height: 44px;
}
.public-sheet-report input[type="radio"] { accent-color: #17BEBB; width: 1.1rem; height: 1.1rem; }
.public-sheet-details { display: grid; gap: 0.35rem; color: rgba(255, 255, 255, 0.7); font-size: 0.85rem; }
.public-sheet-details textarea {
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 0.75rem;
background: rgba(255, 255, 255, 0.05);
padding: 0.6rem 0.75rem;
color: #FFFFFF;
}
@media (min-width: 641px) {
.public-sheet {
width: min(28rem, calc(100vw - 2rem));
margin: auto;
border-radius: 1.25rem;
}
}
.public-profile-attended-tools {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.75rem;
margin-bottom: 1rem;
}
.public-profile-attended-tools p,
.public-profile-attended-status {
color: var(--profile-muted, #c4c4c4);
font-size: 0.875rem;
}
.public-profile-attended-status:not(:empty) { margin-bottom: 1rem; }
.public-profile-attended-item { min-width: 0; }
.public-profile-attended-action {
position: relative;
min-height: 44px;
padding: 0.6rem 0.9rem;
border: 1px solid currentColor;
border-radius: 0.75rem;
color: inherit;
font-size: 0.875rem;
cursor: pointer;
transition: transform 140ms cubic-bezier(0.22, 1, 0.36, 1), opacity 140ms ease, background-color 160ms ease, border-color 160ms ease;
}
.public-profile-attended-action:active:not(:disabled) { transform: scale(0.97); }
.public-profile-attended-action[aria-pressed="true"] { background-color: rgba(23, 190, 187, 0.12); border-color: #17BEBB; }
.public-profile-attended-action.is-pending::after {
content: "";
position: absolute;
right: 0.35rem;
top: 0.35rem;
width: 0.5rem;
height: 0.5rem;
border: 1px solid currentColor;
border-right-color: transparent;
border-radius: 50%;
animation: attended-action-spin 650ms linear infinite;
}
@keyframes attended-action-spin { to { transform: rotate(360deg); } }
@media (hover: hover) and (pointer: fine) {
.public-profile-attended-action:hover:not(:disabled) { background-color: rgba(23, 190, 187, 0.1); transform: translateY(-1px); }
.public-profile-attended-action:active:not(:disabled) { transform: scale(0.97); }
}
@media (prefers-reduced-motion: reduce) {
.public-profile-attended-action { transition: none; }
.public-profile-attended-action.is-pending::after { animation: none; }
.public-profile-attended-action:hover:not(:disabled),
.public-profile-attended-action:active:not(:disabled) { transform: none; }
}
.public-profile-attended-item > .public-profile-attended-action { margin-top: 0.5rem; }
.public-profile-attended-action:disabled { opacity: 0.5; cursor: wait; }
.public-profile-attended-action:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.public-profile-gallery-menu { position: absolute; top: 0.4rem; right: 0.4rem; z-index: 1; }
.public-profile-gallery-menu summary {
display: grid; place-items: center; width: 2.75rem; height: 2.75rem;
margin-left: auto; border-radius: 50%; background: rgba(35, 31, 32, 0.92);
color: #FFFFFF; cursor: pointer; list-style: none;
}
.public-profile-gallery-menu summary::-webkit-details-marker { display: none; }
.public-profile-gallery-menu summary svg { width: 1.25rem; height: 1.25rem; fill: currentColor; }
.public-profile-gallery .public-profile-gallery-menu button {
width: auto; height: auto; min-height: 2.75rem; margin-top: 0.25rem;
padding: 0.5rem 0.65rem; border-radius: 0.6rem; background: #231F20;
color: #FFFFFF; font-size: 0.8rem; font-weight: 700; text-align: left;
}
.public-profile-gallery-menu summary:focus-visible { outline: 2px solid #FFC914; outline-offset: 2px; }
.public-profile-gallery-menu button:disabled { opacity: 0.6; cursor: wait; }
.public-profile-gallery:has(.public-profile-gallery-menu) .public-profile-video-mark { right: auto; left: 0.6rem; }
html {
overflow-x: clip;
}
body {
overflow-x: clip !important;
}
:is(.my-events-hero, .followed-hero, .badge-catalog-hero, .create-hero, .explore-hero-section) {
--page-hero-fade: 5rem;
width: 100vw !important;
max-width: none;
margin-top: 0 !important;
margin-left: calc(50% - 50vw) !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
align-items: start;
--page-hero-pad-top: clamp(1.75rem, 4vw, 3rem);
--page-hero-pad-x: max(1.5rem, calc((100vw - 80rem) / 2 + 1.5rem));
padding-top: var(--page-hero-pad-top) !important;
padding-bottom: calc(clamp(1.25rem, 3vw, 2rem) + var(--page-hero-fade)) !important;
padding-inline: var(--page-hero-pad-x) !important;
-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--page-hero-fade)), transparent);
mask-image: linear-gradient(to bottom, #000 calc(100% - var(--page-hero-fade)), transparent);
}
:is(.followed-hero, .my-events-hero, .badge-catalog-hero) {
min-height: clamp(20rem, 28vw, 27rem);
}
body.badge-page .badge-catalog-hero,
body.badge-page .badge-catalog-hero::after {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
body.badge-page .badge-catalog-hero::before {
filter: none !important;
transform: none;
}
.badge-catalog-back {
position: relative;
top: -10px;
}
@media (min-width: 768px) {
.badge-catalog-back {
margin-inline-end: 3.25rem;
}
}
.explore-hero-section > .relative {
max-width: none;
padding-inline: var(--page-hero-pad-x);
}
.explore-hero-section {
--explore-controls-shift: calc(clamp(1.25rem, 3vw, 2rem) + var(--page-hero-fade) * 0.55 - 1.5rem);
padding-inline: 0 !important;
padding-bottom: calc(var(--page-hero-fade) * 0.45 + 0.5rem) !important;
-webkit-mask-image: none;
mask-image: none;
}
.explore-hero-section #category-filters {
margin-top: calc(4rem + clamp(2rem, 10vw, 2.5rem) + var(--explore-controls-shift));
}
:is(.followed-shell, .my-events-shell, .badge-catalog-workspace, .create-workspace > .relative.z-10) {
padding-top: 0 !important;
}
@media (max-width: 767px) {
:is(.followed-hero, .my-events-hero, .badge-catalog-hero) {
min-height: 18rem;
}
:is(.my-events-hero, .followed-hero, .badge-catalog-hero, .create-hero, .explore-hero-section) {
--page-hero-fade: 3.5rem;
--page-hero-pad-x: 1rem;
}
.explore-hero-section {
padding-inline: 0 !important;
}
}
.page-hero-title {
display: flex;
align-items: center;
gap: 0.75rem;
padding-right: 2.75rem;
}
body .page-hero-title h1,
body.create-page #event-page-title {
min-width: 0;
margin: 0;
font-size: clamp(2.125rem, 6.375vw, 4.25rem);
font-weight: 900;
line-height: 1.08;
letter-spacing: -0.025em;
}
body.my-events-page .my-events-hero {
-webkit-mask-image: none;
mask-image: none;
box-shadow: none !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
}
.my-events-hero::after,
.explore-hero-section::after,
.create-hero::before {
-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--page-hero-fade)), transparent calc(100% - 1rem));
mask-image: linear-gradient(to bottom, #000 calc(100% - var(--page-hero-fade)), transparent calc(100% - 1rem));
}
body.create-page .create-hero {
display: flex;
background-position: center, center 62%;
padding-bottom: calc(var(--page-hero-fade) * 0.45 + 1rem) !important;
-webkit-mask-image: none;
mask-image: none;
}
.create-hero > div {
display: flex;
flex-direction: column;
width: 100%;
}
.create-hero .page-hero-title {
margin-top: 0;
}
@media (max-width: 639px) {
body.create-page .create-hero {
background-position: center, 58% 62%;
}
}
.page-hero-info-btn {
position: absolute;
top: var(--page-hero-pad-top);
right: var(--page-hero-pad-x);
z-index: 1;
display: grid;
place-items: center;
width: 2.75rem;
height: 2.75rem;
margin: -0.6rem -0.6rem 0 0;
padding: 0;
border: 0;
background: none;
color: #FFFFFF;
cursor: pointer;
opacity: 0.85;
filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
transition: opacity 0.2s ease;
}
.explore-hero-section .page-hero-info-btn {
top: 0;
right: var(--page-hero-pad-x);
}
.page-hero-info-btn:hover {
opacity: 1;
}
.page-hero-info-btn:focus-visible {
outline: 2px solid #FFC914;
outline-offset: 2px;
border-radius: 999px;
}
.page-hero-info-btn svg {
width: 1.6rem;
height: 1.6rem;
}
.page-hero-info {
inset: 0;
margin: auto;
height: fit-content;
width: min(26rem, calc(100vw - 2rem));
padding: 1.25rem 1.35rem;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: var(--ha-radius-panel, 1.15rem);
background: #231F20;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
color: rgba(255, 255, 255, 0.82);
font-size: 0.95rem;
line-height: 1.65;
}
.page-hero-info::backdrop {
background: rgba(0, 0, 0, 0.4);
}
.page-hero-info h2 {
margin-bottom: 0.4rem;
color: #FFFFFF;
font-size: 1rem;
font-weight: 800;
}
:root {
--action-primary: #FFC914;
--action-primary-hover: #FFE078;
--action-ink: #231F20;
--action-secondary: #17BEBB;
--action-secondary-hover: #64D8D5;
--action-secondary-surface: rgba(23, 190, 187, 0.1);
--action-secondary-surface-hover: rgba(23, 190, 187, 0.18);
--action-success: #9BDC62;
--action-success-surface: rgba(118, 176, 65, 0.12);
--action-success-surface-hover: rgba(118, 176, 65, 0.22);
--action-danger: #FF9A7A;
--action-danger-surface: rgba(228, 87, 46, 0.1);
--action-danger-surface-hover: rgba(228, 87, 46, 0.2);
--content-heading: #FFFFFF;
--content-secondary: #BDB7BA;
}
body :where(
.landing-hero-primary-action, .home-hero-search-button, #search-button,
.auth-primary-submit, .profile-primary-action, .create-submit,
.followed-search-btn, .followed-action, .followed-mini-action,
.event-detail-primary-action, .my-events-create-prompt a, .home-action-card-create > a,
.auth-card button[type="submit"], .email-state-primary, .attendance-button-primary
) {
--control-bg: var(--action-primary);
--control-hover-bg: var(--action-primary-hover);
--control-text: var(--action-ink);
--control-hover-text: var(--action-ink);
--control-border: transparent;
--control-hover-border: transparent;
--control-focus: var(--action-primary);
}
body :where(
.profile-secondary-action, .create-draft-button, .create-back-button, .create-inline-button,
.create-place-verify, .create-framing-cancel, .event-detail-secondary-action,
.followed-open, .followed-events-btn, .my-events-card-actions a,
.followed-notif-actions [data-action="read"], .followed-mini-action.is-pending,
.email-state-secondary, .attendance-button-secondary
) {
--control-bg: var(--action-secondary-surface);
--control-hover-bg: var(--action-secondary-surface-hover);
--control-text: var(--action-secondary);
--control-hover-text: var(--action-secondary-hover);
--control-border: rgba(23, 190, 187, 0.4);
--control-hover-border: var(--action-secondary);
--control-focus: var(--action-secondary);
}
body.home-page .home-action-card-explore > a {
--control-bg: #E4572E;
--control-hover-bg: #C64724;
--control-text: #FFFFFF;
--control-hover-text: #FFFFFF;
--control-border: transparent;
--control-hover-border: transparent;
--control-focus: #FF9A7A;
}
body :is(.followed-accept-btn[data-action="accept"], .create-framing-confirm, .followed-mini-action.is-followed, .followed-action.is-followed) {
--control-bg: var(--action-success-surface);
--control-hover-bg: var(--action-success-surface-hover);
--control-text: var(--action-success);
--control-hover-text: var(--action-success);
--control-border: rgba(118, 176, 65, 0.45);
--control-hover-border: var(--action-success);
--control-focus: var(--action-success);
}
body :is(
.profile-danger-action, #removePhotoBtn, .my-events-danger, .followed-remove,
.followed-reject-btn, .create-cover-remove, .create-media-remove, .attendance-button-danger
) {
--control-bg: var(--action-danger-surface);
--control-hover-bg: var(--action-danger-surface-hover);
--control-text: var(--action-danger);
--control-hover-text: var(--action-danger);
--control-border: rgba(228, 87, 46, 0.4);
--control-hover-border: var(--action-danger);
--control-focus: var(--action-danger);
}
body :is(
.landing-hero-primary-action, .home-hero-search-button, #search-button,
.auth-primary-submit, .profile-primary-action, .create-submit,
.followed-search-btn, .followed-action, .followed-mini-action,
.event-detail-primary-action, .my-events-create-prompt a, .home-action-card-create > a,
.home-action-card-explore > a, .auth-card button[type="submit"],
.email-state-primary, .email-state-secondary, .attendance-button-primary,
.attendance-button-secondary, .attendance-button-danger, .profile-secondary-action,
.create-draft-button, .create-back-button, .create-inline-button, .create-place-verify,
.create-framing-cancel, .event-detail-secondary-action,
.followed-open, .followed-events-btn, .my-events-card-actions a,
.followed-notif-actions [data-action="read"],
.followed-accept-btn[data-action="accept"], .create-framing-confirm,
.profile-danger-action, #removePhotoBtn, .my-events-danger,
.followed-remove, .followed-reject-btn, .create-cover-remove, .create-media-remove
) {
background: var(--control-bg) !important;
color: var(--control-text) !important;
border-color: var(--control-border) !important;
&:is(:hover, :focus-visible):not(:disabled):not([aria-disabled="true"]) {
background: var(--control-hover-bg) !important;
color: var(--control-hover-text) !important;
border-color: var(--control-hover-border) !important;
}
&:focus-visible {
outline: 2px solid var(--control-focus) !important;
outline-offset: 3px !important;
}
}
body .followed-open {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 2.75rem;
padding: 0.45rem 0.85rem;
border: 1px solid;
border-radius: 0.75rem;
font-size: 0.82rem;
font-weight: 900;
transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
body :is(.followed-filter, .my-events-tab, .badge-filter, .profile-tab).is-active {
background: var(--action-secondary-surface) !important;
color: var(--action-secondary) !important;
border-color: var(--action-secondary) !important;
}
body :is(.followed-section-heading, .page-hero-title, .my-events-section-heading) :is(h1, h2, h3) {
color: var(--content-heading) !important;
}
body :is(.followed-empty, .my-events-empty, .followed-notif-content) p {
color: var(--content-secondary) !important;
}
:root {
--text-meta-size: 0.8125rem;
--text-support-size: 0.875rem;
--text-secondary-readable: #BDB7BA;
}
body :is(
.notif-preview-time, .followed-notif-content small,
.ha-event-card-category, .ha-event-card-poll, .ha-event-card-ended,
.ha-event-card-footer, .ha-event-card-extra a, .ha-event-card-extra button,
.followed-person-tag, .followed-exp-badge, .my-events-status,
.create-character-count, .create-schedule-summary small,
.create-place-confirmation span, .create-place-confirmation small,
.create-category-affordance small, .create-draft-status,
.profile-avatar-caption span, .profile-current-badge span,
.badge-catalog-card small, .public-profile-badges span,
.public-profile-follows-you, .public-people-list small,
.event-detail-fact-text > span, .event-detail-attendance > span,
.event-detail-review-score > span:last-child, .event-detail-review-meta,
.attendance-person-copy small, .attendance-chip, .attendance-method,
.attendance-method strong, .attendance-search label, .attendance-filter-wrap label
) {
font-size: var(--text-meta-size) !important;
line-height: 1.45 !important;
}
body :is(
.create-field-help, .create-field-error, .create-required-note,
.create-place-option-detail, .create-place-status, .create-place-attribution,
.create-upload-zone small, .create-form-card .text-xs,
.followed-notif-content p, .followed-list-card p,
.ha-event-card-place, .ha-event-card-level,
.profile-field small, .profile-switch-row small, .profile-panel-description,
.profile-account-list span, .public-sheet-levels small
) {
font-size: var(--text-support-size) !important;
line-height: 1.5 !important;
}
body :is(
.notif-preview-time, .followed-notif-content small,
.ha-event-card-place, .ha-event-card-ended,
.create-field-help, .create-required-note, .create-character-count:not(.is-near-limit),
.create-schedule-summary small, .create-place-option-detail,
.create-place-attribution, .create-place-confirmation span,
.create-place-confirmation small, .create-upload-zone small, .create-draft-status,
.profile-field small, .profile-switch-row small, .profile-panel-description,
.profile-account-list span, .badge-catalog-card small,
.public-profile-badges span, .public-people-list small, .public-sheet-levels small,
.event-detail-fact-text > span, .event-detail-attendance > span,
.event-detail-review-score > span:last-child, .event-detail-review-meta,
.attendance-person-copy small, .attendance-method,
.attendance-search label, .attendance-filter-wrap label
) {
color: var(--text-secondary-readable) !important;
}
body.create-page .create-form-card .text-xs:is(.text-white\/40, .text-white\/50, .text-white\/60) {
color: var(--text-secondary-readable) !important;
}
body header #notifDropdown a {
font-size: var(--text-meta-size);
line-height: 1.45;
}
body header #notifDropdownList > div {
color: var(--text-secondary-readable);
}
body :is(.create-schedule-summary small, .attendance-method, .event-detail-review-meta) {
overflow-wrap: anywhere;
}
.ha-person-list {
display: grid;
gap: 0.15rem;
max-width: 42rem;
}
.ha-person-row {
position: relative;
display: flex;
align-items: center;
gap: 0.75rem;
min-height: 4rem;
padding: 0.5rem 0.25rem 0.5rem 0.5rem;
border-radius: 0.9rem;
transition: background 0.15s ease;
}
.ha-person-row:hover,
.ha-person-row:focus-within {
background: rgba(255, 255, 255, 0.05);
}
.ha-person-identity {
display: flex;
flex: 1;
align-items: center;
gap: 0.75rem;
min-width: 0;
border-radius: 0.75rem;
color: inherit;
text-decoration: none;
}
.ha-person-avatar {
display: grid;
flex: 0 0 auto;
place-items: center;
width: 2.75rem;
height: 2.75rem;
border-radius: 999px;
background: rgba(255, 255, 255, 0.08);
color: var(--content-secondary);
font-size: 0.95rem;
font-weight: 800;
object-fit: cover;
}
:is(.ha-person-avatar-fallback, .ha-avatar-fallback) {
position: relative;
overflow: hidden;
isolation: isolate;
background: var(--avatar-surface);
color: var(--avatar-ink);
box-shadow: inset 0 0 0 1px var(--avatar-detail);
}
:is(.ha-person-avatar-fallback, .ha-avatar-fallback)[data-tone="0"] { --avatar-surface: #293f3d; --avatar-ink: #c5e2dc; --avatar-detail: #83b7aa; }
:is(.ha-person-avatar-fallback, .ha-avatar-fallback)[data-tone="1"] { --avatar-surface: #303d50; --avatar-ink: #cedbee; --avatar-detail: #8da6ca; }
:is(.ha-person-avatar-fallback, .ha-avatar-fallback)[data-tone="2"] { --avatar-surface: #493a32; --avatar-ink: #ebd7c8; --avatar-detail: #c6a087; }
:is(.ha-person-avatar-fallback, .ha-avatar-fallback)[data-tone="3"] { --avatar-surface: #41374b; --avatar-ink: #e2d3ec; --avatar-detail: #b09ac2; }
:is(.ha-person-avatar-fallback, .ha-avatar-fallback)[data-tone="4"] { --avatar-surface: #3b4230; --avatar-ink: #dde5c9; --avatar-detail: #aab88b; }
:is(.ha-person-avatar-fallback, .ha-avatar-fallback)[data-tone="5"] { --avatar-surface: #4b343c; --avatar-ink: #efd1db; --avatar-detail: #c591a3; }
:is(.ha-person-avatar-fallback, .ha-avatar-fallback)::after {
content: '';
position: absolute;
z-index: -1;
pointer-events: none;
border: 2px solid var(--avatar-detail);
opacity: 0.4;
}
:is(.ha-person-avatar-fallback, .ha-avatar-fallback)[data-detail="0"]::after {
width: 65%;
height: 65%;
top: -25%;
right: -20%;
border-radius: 50%;
}
:is(.ha-person-avatar-fallback, .ha-avatar-fallback)[data-detail="1"]::after {
width: 45%;
height: 45%;
bottom: -22%;
left: -12%;
transform: rotate(35deg);
}
:is(.ha-person-avatar-fallback, .ha-avatar-fallback)[data-detail="2"]::after {
width: 12%;
height: 12%;
top: 15%;
right: 16%;
border: 0;
border-radius: 50%;
background: var(--avatar-detail);
}
.ha-person-text {
display: grid;
gap: 0.1rem;
min-width: 0;
}
.ha-person-name {
margin: 0;
overflow: hidden;
color: var(--content-heading);
font-size: 0.95rem;
font-weight: 700;
line-height: 1.25;
text-overflow: ellipsis;
white-space: nowrap;
}
.ha-person-meta {
overflow: hidden;
color: var(--content-secondary);
font-size: 0.82rem;
text-overflow: ellipsis;
white-space: nowrap;
}
.ha-person-actions {
display: flex;
flex: 0 0 auto;
align-items: center;
gap: 0.4rem;
}
.ha-person-button {
min-height: 2.25rem;
padding: 0.4rem 0.9rem;
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 0.6rem;
background: rgba(255, 255, 255, 0.08);
color: var(--content-heading);
font-size: 0.85rem;
font-weight: 700;
white-space: nowrap;
cursor: pointer;
transition: background 0.15s ease;
}
.ha-person-button:hover {
background: rgba(255, 255, 255, 0.14);
}
.ha-person-button.is-primary {
border-color: transparent;
background: var(--action-primary);
color: var(--action-ink);
}
.ha-person-button.is-primary:hover {
background: var(--action-primary-hover);
}
.ha-person-button.is-confirm {
border-color: rgba(155, 220, 98, 0.35);
background: var(--action-success-surface);
color: var(--action-success);
}
.ha-person-button.is-confirm:hover { background: var(--action-success-surface-hover); }
.ha-person-button.is-danger {
border-color: rgba(255, 154, 122, 0.35);
background: var(--action-danger-surface);
color: var(--action-danger);
}
.ha-person-button.is-danger:hover { background: var(--action-danger-surface-hover); }
.ha-person-button:disabled,
.ha-person-menu-item:disabled {
opacity: 0.55;
cursor: progress;
}
.ha-person-identity:focus-visible,
.ha-person-button:focus-visible,
.ha-person-menu-button:focus-visible,
.ha-person-menu-item:focus-visible {
outline: 2px solid var(--action-primary);
outline-offset: 2px;
}
.ha-person-menu {
position: relative;
}
.ha-person-menu-button {
display: grid;
place-items: center;
width: 2.25rem;
height: 2.25rem;
border: 0;
border-radius: 999px;
background: transparent;
color: var(--content-secondary);
cursor: pointer;
}
.ha-person-menu-button:hover,
.ha-person-menu-button[aria-expanded="true"] {
background: rgba(255, 255, 255, 0.1);
color: var(--content-heading);
}
.ha-person-menu-button svg {
width: 1.25rem;
height: 1.25rem;
fill: currentColor;
}
.ha-person-menu-list {
position: absolute;
top: calc(100% + 0.25rem);
right: 0;
z-index: 40;
display: grid;
min-width: 12rem;
padding: 0.35rem;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 0.85rem;
background: #2A2426;
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}
.ha-person-menu-list[hidden] {
display: none;
}
.ha-person-menu[data-placement="up"] .ha-person-menu-list {
top: auto;
bottom: calc(100% + 0.25rem);
}
.ha-person-menu-item {
padding: 0.65rem 0.8rem;
border: 0;
border-radius: 0.6rem;
background: transparent;
color: var(--content-heading);
font-size: 0.9rem;
font-weight: 600;
text-align: left;
cursor: pointer;
}
.ha-person-menu-item:hover {
background: rgba(255, 255, 255, 0.08);
}
.ha-person-menu-item.is-danger {
color: var(--action-danger);
}
.ha-person-more {
justify-self: center;
margin-top: 0.5rem;
}
@media (max-width: 640px) {
.followed-shell .ha-person-list { margin-inline: -1.1rem; }
.ha-person-row { gap: 0.5rem; padding: 0.45rem 0 0.45rem 0.3rem; }
.ha-person-identity { gap: 0.6rem; }
.ha-person-avatar { width: 2.5rem; height: 2.5rem; font-size: 0.85rem; }
.ha-person-name {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow-wrap: anywhere;
white-space: normal;
}
.ha-person-actions { gap: 0.5rem; }
.ha-person-button { padding-inline: 0.5rem; font-size: 0.8rem; }
.ha-person-menu-button { width: 2rem; }
}
body :is(header, .notif-list) .notif-item {
position: relative;
}
.notif-item-open {
display: flex;
flex: 1;
align-items: center;
gap: 0.85rem;
min-width: 0;
padding: 0;
border: 0;
background: transparent;
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
}
.notif-item-open::after {
content: "";
position: absolute;
inset: 0;
}
.notif-item-open:focus-visible {
outline: none;
}
.notif-item:has(.notif-item-open:focus-visible) {
outline: 2px solid #17BEBB;
outline-offset: -3px;
}
body :is(header, .notif-list) .notif-preview-message {
overflow-wrap: break-word;
}
.notif-preview-message strong {
color: var(--content-heading);
font-weight: 800;
}
.notif-item-thumb {
flex: 0 0 auto;
width: 2.75rem;
height: 2.75rem;
border-radius: 0.5rem;
object-fit: cover;
}
.notif-item-avatar {
position: relative;
z-index: 1;
flex: 0 0 auto;
border-radius: 50%;
}
.notif-item-avatar:focus-visible {
outline: 2px solid #17BEBB;
outline-offset: 2px;
}
.notif-item-actions {
position: relative;
z-index: 1;
display: flex;
flex: 0 0 auto;
gap: 0.4rem;
}
.notif-list {
display: grid;
gap: 1.25rem;
max-width: 42rem;
}
.notif-group {
display: grid;
gap: 0.15rem;
}
.notif-group-title {
margin: 0 0 0.35rem;
padding-inline: 0.75rem;
color: var(--content-heading);
font-size: 1rem;
font-weight: 800;
}
body .notif-list .notif-item {
padding: 0.65rem 0.75rem;
border-bottom: 0;
border-radius: 0.9rem;
}
header .notif-item:has(.notif-item-actions) {
flex-wrap: wrap;
row-gap: 0.5rem;
}
header .notif-item:has(.notif-item-actions) .notif-item-open {
flex-basis: calc(100% - 5.1rem);
}
header .notif-item-actions {
order: 3;
flex-basis: 100%;
padding-left: 3.85rem;
}
@media (max-width: 480px) {
body .notif-list .notif-item {
flex-wrap: wrap;
row-gap: 0.5rem;
padding-inline: 0.5rem;
}
body .notif-list .notif-item:has(.notif-item-actions) .notif-item-open {
flex-basis: calc(100% - 5.1rem);
}
body .notif-list .notif-item-actions {
order: 3;
flex-basis: 100%;
padding-left: 3.85rem;
}
}
.reg-step,
.reg-choice-group {
min-width: 0;
margin: 0;
padding: 0;
border: 0;
}
.reg-wizard:not(.is-wizard) .reg-step + .reg-step {
margin-top: 2rem;
}
.reg-wizard.is-wizard .reg-step:not(.is-current) {
display: none;
}
body.register-page .auth-card:has(.reg-wizard.is-wizard) {
display: flex;
flex-direction: column;
max-width: 32.5rem;
margin-inline: auto;
}
@media (min-width: 768px) {
body.register-page .auth-card:has(.reg-wizard.is-wizard) {
margin-top: clamp(0rem, 6vh, 3.5rem);
padding: 2rem 2.25rem !important;
}
}
body.register-page .auth-card:has(.reg-wizard.is-wizard) .register-title-block {
text-align: left;
}
body.register-page .auth-card:has(.reg-wizard.is-wizard) .register-title-block h1 {
font-size: 0.78rem !important;
font-weight: 800;
letter-spacing: 0.12em;
line-height: 1.2 !important;
text-transform: uppercase;
color: #17BEBB;
}
.reg-progress {
margin: 0.75rem 0 1.6rem;
}
.reg-progress-bar {
display: flex;
gap: 0.3rem;
}
.reg-progress-bar span {
position: relative;
flex: 1;
height: 4px;
overflow: hidden;
border-radius: 999px;
background: rgba(255, 255, 255, 0.14);
}
.reg-progress-bar span::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: #17BEBB;
transform: scaleX(0);
transform-origin: left;
transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
.reg-progress-bar span.is-done::after {
transform: scaleX(1);
}
.reg-progress-bar span.is-active::after {
background: linear-gradient(90deg, #17BEBB, #FFC914);
transform: scaleX(1);
}
.reg-progress-label {
margin-top: 0.6rem;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.62);
}
.reg-step-title {
display: block;
padding: 0;
font-size: clamp(1.5rem, 6vw, 1.9rem);
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.15;
color: #fff;
outline: none;
}
.reg-step-lead {
margin: 0.45rem 0 1.4rem;
font-size: 0.95rem;
line-height: 1.45;
color: rgba(255, 255, 255, 0.68);
}
.reg-wizard .birth-date-fieldset .grid {
grid-template-columns: 0.8fr 1.3fr 1fr;
}
body.register-page > .auth-visual-surface {
overflow: clip;
}
.reg-fields {
display: grid;
gap: 1.1rem;
}
@media (min-width: 640px) {
.reg-fields-2 {
grid-template-columns: 1fr 1fr;
}
}
.reg-wizard.is-wizard {
--reg-shift: 1.75rem;
}
.reg-wizard.is-wizard[data-direction="back"] {
--reg-shift: -1.75rem;
}
.reg-wizard.is-wizard .reg-step.is-current > * {
animation: reg-step-in 460ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.reg-wizard.is-wizard .reg-step.is-current > :nth-child(2) {
animation-delay: 50ms;
}
.reg-wizard.is-wizard .reg-step.is-current > :nth-child(n + 3) {
animation-delay: 110ms;
}
@keyframes reg-step-in {
from {
opacity: 0;
transform: translate3d(var(--reg-shift), 0, 0);
}
}
.reg-strength {
margin-top: 0.55rem;
}
.reg-strength-bar {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.25rem;
}
.reg-strength-bar span {
height: 4px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.12);
transition: background-color 220ms ease;
}
.reg-strength[data-score="1"] span:nth-child(-n + 1),
.reg-strength[data-score="2"] span:nth-child(-n + 2) {
background: #E4572E;
}
.reg-strength[data-score="3"] span:nth-child(-n + 3) {
background: #FFC914;
}
.reg-strength[data-score="4"] span {
background: #17BEBB;
}
.reg-strength-label {
margin-top: 0.35rem;
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.62);
}
.reg-strength[data-score="4"] .reg-strength-label {
color: #17BEBB;
font-weight: 700;
}
.reg-optional {
margin-left: 0.35rem;
font-size: 0.75rem;
font-weight: 500;
color: rgba(255, 255, 255, 0.55);
}
.reg-choices {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.5rem;
}
.reg-choice {
position: relative;
cursor: pointer;
}
.reg-choice input {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
opacity: 0;
cursor: pointer;
}
.reg-choice span {
display: flex;
align-items: center;
justify-content: center;
min-height: 48px;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 0.85rem;
background: rgba(35, 31, 32, 0.62);
font-size: 0.92rem;
font-weight: 600;
color: rgba(255, 255, 255, 0.75);
transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease;
}
.reg-choice:hover span {
border-color: rgba(23, 190, 187, 0.5);
color: #fff;
}
.reg-choice input:checked + span {
border-color: rgba(23, 190, 187, 0.75);
background: rgba(23, 190, 187, 0.16);
color: #fff;
box-shadow: 0 0 0 1px rgba(23, 190, 187, 0.25);
}
.reg-choice input:focus-visible + span {
outline: 3px solid #FFC914;
outline-offset: 2px;
}
.reg-interest-count:not(.hidden) {
display: inline-flex;
padding: 0.35rem 0.75rem;
border-radius: 999px;
background: rgba(228, 87, 46, 0.12);
font-weight: 700;
}
.reg-interest-count.is-complete {
color: #17BEBB;
background: rgba(23, 190, 187, 0.12);
}
.reg-summary {
margin: 0 0 1.4rem;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 1rem;
background: rgba(23, 20, 21, 0.45);
}
.reg-summary-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
column-gap: 0.6rem;
padding: 0.55rem 0.5rem 0.55rem 0.95rem;
}
.reg-summary-row + .reg-summary-row {
border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.reg-summary dt {
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.55);
}
.reg-summary dd {
grid-row: 2;
margin: 0.1rem 0 0;
overflow-wrap: anywhere;
font-size: 0.92rem;
color: #fff;
}
.reg-summary-edit {
grid-row: 1 / span 2;
grid-column: 2;
min-height: 44px;
padding: 0 0.5rem;
border-radius: 0.6rem;
font-size: 0.8rem;
font-weight: 700;
color: #17BEBB;
}
.reg-summary-edit:hover {
text-decoration: underline;
}
.reg-summary-edit:focus-visible,
.reg-back:focus-visible {
outline: 3px solid #FFC914;
outline-offset: 2px;
}
.reg-submit-error:not(.hidden) {
margin-top: 1rem;
font-size: 0.85rem;
}
.reg-actions {
display: flex;
align-items: center;
gap: 0.6rem;
margin-top: 1.75rem;
}
body.register-page .auth-card .reg-actions .reg-next {
flex: 1;
min-height: 48px !important;
font-weight: 700 !important;
}
.reg-back {
display: inline-flex;
align-items: center;
gap: 0.3rem;
min-height: 48px;
padding: 0 1rem 0 0.75rem;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 0.75rem;
background: rgba(255, 255, 255, 0.04);
font-weight: 700;
color: rgba(255, 255, 255, 0.82);
transition: border-color 180ms ease, color 180ms ease;
}
.reg-back svg {
width: 1.1rem;
height: 1.1rem;
}
.reg-back:hover {
border-color: rgba(23, 190, 187, 0.6);
color: #fff;
}
.reg-back.is-invisible {
display: none;
}
@media (max-width: 639px) {
body.register-page .auth-card:has(.reg-wizard.is-wizard):has(.register-social-grid.hidden) {
min-height: calc(100dvh - var(--ha-navbar-height, 4.25rem) - 2rem);
}
.reg-wizard.is-wizard {
display: flex;
flex: 1;
flex-direction: column;
}
.reg-wizard.is-wizard .reg-actions {
position: sticky;
bottom: 0;
z-index: 2;
margin-top: auto;
margin-inline: -1rem;
padding: 1.25rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
background: linear-gradient(to top, rgba(35, 31, 32, 0.96) 65%, rgba(35, 31, 32, 0));
}
.reg-wizard.is-wizard .reg-steps {
padding-bottom: 0.5rem;
}
}
body.register-page .email-registration-result:not(.hidden) {
animation: reg-success-in 620ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
body.register-page .email-registration-result:not(.hidden) .email-state-icon {
animation: reg-success-pop 700ms 180ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes reg-success-in {
from {
opacity: 0;
transform: translate3d(0, 1.25rem, 0) scale(0.98);
}
}
@keyframes reg-success-pop {
from {
opacity: 0;
transform: scale(0.4) rotate(-12deg);
}
}
@media (prefers-reduced-motion: reduce) {
.reg-wizard.is-wizard .reg-step.is-current > *,
body.register-page .email-registration-result:not(.hidden),
body.register-page .email-registration-result:not(.hidden) .email-state-icon {
animation: none;
}
.reg-progress-bar span::after,
.reg-strength-bar span,
.reg-choice span,
.reg-back {
transition: none;
}
}
.home-scroll-hint {
position: fixed;
z-index: 40;
left: 50%;
bottom: calc(1rem + env(safe-area-inset-bottom));
display: inline-flex;
align-items: center;
gap: 0.45rem;
min-height: 2.75rem;
border: 0;
border-radius: 999px;
background: #FFC914;
padding: 0 1.2rem;
color: #231F20;
font-size: 0.95rem;
font-weight: 900;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
transform: translateX(-50%);
cursor: pointer;
}
.home-scroll-hint[hidden] { display: none; }
.home-scroll-hint svg {
width: 1.2rem;
height: 1.2rem;
animation: home-scroll-hint-bounce 1.2s ease-in-out infinite;
}
.home-scroll-hint:focus-visible {
outline: 3px solid #17BEBB;
outline-offset: 3px;
}
@keyframes home-scroll-hint-bounce {
0%, 100% { transform: translateY(-2px); }
50% { transform: translateY(4px); }
}
@media (prefers-reduced-motion: reduce) {
.home-scroll-hint svg { animation: none; }
}
@media (min-width: 768px) {
.home-scroll-hint { display: none !important; }
}
.home-welcome-lead {
margin-top: 0.4rem;
color: rgba(255, 255, 255, 0.72);
}
.home-welcome-step {
margin-top: 1.1rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-top: 1rem;
}
.home-welcome-step h3 {
color: #17BEBB;
font-size: 1rem;
font-weight: 900;
}
.home-welcome-step > p {
margin-top: 0.35rem;
color: rgba(255, 255, 255, 0.78);
font-size: 0.92rem;
line-height: 1.5;
}
.home-welcome-step .push-help-steps { margin-top: 0.6rem; }
.home-welcome-step .push-help-steps:empty { display: none; }
.home-welcome-step .followed-search-btn { margin-top: 0.8rem; }
.home-welcome-step .profile-switch-row { margin-top: 0.75rem; }
.home-welcome-share {
display: inline-block;
width: 1.1em;
height: 1.1em;
vertical-align: -0.15em;
color: #17BEBB;
}
.home-welcome-push-off {
margin-top: 0.75rem;
border: 1px solid rgba(255, 201, 20, 0.3);
border-radius: 1rem;
background: rgba(255, 201, 20, 0.08);
padding: 0.8rem 1rem;
color: #FFC914;
font-size: 0.88rem;
line-height: 1.45;
}
.home-welcome-push-off[hidden] { display: none; }
.home-welcome-later {
margin-top: 1rem;
color: rgba(255, 255, 255, 0.55);
font-size: 0.82rem;
}
:root {
--social-facebook: #1877F2;
--social-whatsapp: #25D366;
--social-instagram: linear-gradient(135deg, #FCAF45, #E1306C 50%, #833AB4);
}
.social-brand-icon {
display: inline-grid;
place-items: center;
box-sizing: border-box;
width: 32px;
height: 32px;
flex: 0 0 32px;
padding: 0;
line-height: 0;
border-radius: 50%;
color: currentColor;
}
.social-brand-icon[data-social="instagram"] { background: var(--social-instagram); color: #FFF; }
.social-brand-icon[data-social="facebook"] { background: var(--social-facebook); color: #FFF; }
.social-brand-icon[data-social="whatsapp"] { background: var(--social-whatsapp); color: #FFF; }
.social-brand-icon svg,
.event-detail-social .social-brand-icon svg {
display: block;
width: 20px;
height: 20px;
flex: 0 0 auto;
overflow: visible;
}
.ha-social-link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
min-height: 2.75rem;
min-width: 2.75rem;
border-radius: 0.65rem;
padding: 0.25rem 0.5rem;
color: var(--content-heading);
font-size: 0.9rem;
font-weight: 700;
max-width: 100%;
overflow-wrap: anywhere;
}
.ha-social-link:hover { background: var(--action-secondary-surface); }
.ha-social-link--icon-only { gap: 0; padding: 0.375rem; }
.event-detail-organizer .event-detail-links {
margin-left: auto;
flex: 0 0 2.75rem;
width: 2.75rem;
max-width: 2.75rem;
min-width: 0;
min-inline-size: 0;
overflow: visible;
justify-content: flex-end;
gap: 0.25rem;
}
.event-detail-organizer .event-detail-links .ha-social-link {
box-sizing: border-box;
width: 2.75rem;
min-width: 2.75rem;
max-width: 2.75rem;
margin: 0;
padding-inline: 0.375rem;
}
.event-detail-organizer .event-detail-fact-text {
flex: 1 1 auto;
}
.event-detail-organizer {
padding-right: 1.25rem;
}
@media (max-width: 1023px) {
.event-detail-content,
.event-detail-main,
.event-detail-facts,
.event-detail-organizer {
min-width: 0;
max-width: 100%;
}
.event-detail-organizer {
display: grid;
grid-template-columns: 2rem minmax(0, 1fr) 2.75rem;
gap: 0.85rem;
box-sizing: border-box;
padding-right: 2rem;
}
.event-detail-organizer .event-detail-links {
grid-column: 3;
grid-row: 1;
margin-left: 0;
justify-self: end;
}
}
.event-detail-organizer .event-detail-fact-text { overflow-wrap: anywhere; }
@media (min-width: 1024px) {
.event-detail-shell:has(.event-detail-organizer .event-detail-links) .event-detail-hero-content {
padding-bottom: clamp(1.5rem, 5dvh, 3rem);
}
}
.ha-social-link:focus-visible {
outline: 2px solid var(--action-secondary);
outline-offset: 3px;
}
.public-profile-social-links {
display: flex;
flex: 0 0 auto;
gap: 0.25rem;
min-inline-size: 8.75rem;
}
.public-profile-social-links[hidden] { display: none; }
.public-profile-contact-row {
display: flex;
align-items: center;
gap: 0.5rem;
width: 100%;
margin-block: 0.35rem;
}
.public-profile-contact-row:not(:has(> :not([hidden]))) { display: none; }
.public-profile-contact-row .public-profile-info-btn {
min-height: 2.75rem;
min-width: 0;
}
.public-profile-contact-row .public-profile-info-btn svg { flex-shrink: 0; }
@media (max-width: 380px) {
.public-profile-contact-row .public-profile-info-btn {
font-size: 0.75rem;
gap: 0.25rem;
padding-inline: 0.5rem;
}
}
.profile-social-fields {
display: grid;
gap: 0.75rem;
min-width: 0;
margin-top: 1.5rem;
border: 0;
padding: 0;
}
.profile-social-fields legend {
padding: 0 0 0.5rem;
color: var(--content-heading);
font-weight: 800;
}
.profile-social-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
}
.profile-field.profile-social-field {
display: grid;
grid-template-columns: 2rem minmax(0, 1fr);
align-items: center;
gap: 0.5rem 0.75rem;
}
.profile-social-field input { min-width: 0; width: 100%; }
.profile-social-field .profile-bio-add-error { grid-column: 2; }
.profile-social-fields input[aria-invalid="true"] { border-color: var(--action-danger); }
.create-link-input { position: relative; flex: 1; min-width: 0; }
.create-link-input input { width: 100%; }
.create-link-input.has-social input { padding-left: 3rem; }
.create-link-brand {
position: absolute;
left: 0.6rem;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
}
.create-link-brand[hidden] { display: none; }
@media (max-width: 600px) {
.profile-social-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1023px) {
.event-detail-links .ha-social-link {
scroll-margin-block-end: calc(8.5rem + env(safe-area-inset-bottom));
}
}
.ha-dialog {
overflow-y: auto;
width: min(440px, calc(100% - 32px));
max-height: calc(100dvh - 48px);
margin: auto;
padding: clamp(22px, 5vw, 32px);
border: 0;
border-top: 5px solid #17bebb;
border-radius: 24px;
background: #231f20;
color: #fff;
font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif;
box-shadow: 0 24px 80px #0008;
}
.ha-dialog.is-danger { border-top-color: #e4572e; }
.ha-dialog::backdrop { background: #080d10b8; backdrop-filter: blur(3px); }
.ha-dialog[open] { animation: ha-dialog-in 220ms cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes ha-dialog-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.ha-dialog form { display: grid; gap: 14px; margin: 0; }
.ha-dialog-eyebrow { margin: 0; color: #ffc914; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.ha-dialog h2 { margin: 0; font-size: clamp(20px, 4.6vw, 24px); font-weight: 800; line-height: 1.2; letter-spacing: -.02em; overflow-wrap: anywhere; }
.ha-dialog-message { margin: 0; color: #ded9db; font-size: 15px; line-height: 1.6; white-space: pre-line; }
.ha-dialog-facts { display: grid; gap: 8px; margin: 0; padding: 12px 14px; border-radius: 14px; background: #ffffff0d; }
.ha-dialog-facts div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; }
.ha-dialog-facts dt { color: #bfb8bb; font-size: 13px; }
.ha-dialog-facts dd { margin: 0; color: #17bebb; font-size: 14px; font-weight: 800; }
.ha-dialog-field { display: grid; gap: 6px; color: #ded9db; font-size: 14px; font-weight: 700; }
.ha-dialog-field small { color: #bfb8bb; font-weight: 500; }
.ha-dialog-field :is(input, textarea) { width: 100%; min-height: 46px; padding: 12px 14px; border: 1px solid #ffffff30; border-radius: 12px; background: #171c1c; color: #fff; font: inherit; font-weight: 500; resize: vertical; }
.ha-dialog-field :is(input, textarea):focus-visible { outline: 3px solid #ffc914; outline-offset: 2px; }
.ha-dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 6px; }
.ha-dialog-actions button { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 12px 20px; border-radius: 999px; font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; }
.ha-dialog-cancel { border: 1px solid #ffffff30; background: transparent; color: #ded9db; }
.ha-dialog-cancel:hover { background: #ffffff10; }
.ha-dialog-confirm { border: 2px solid transparent; background: #17bebb; color: #171c1c; }
.ha-dialog-confirm:hover { background: #65dcd8; }
.ha-dialog.is-danger .ha-dialog-confirm { background: #e4572e; color: #fff; }
.ha-dialog.is-danger .ha-dialog-confirm:hover { background: #f0714b; }
.ha-dialog :is(button, input, textarea):focus-visible { outline: 3px solid #ffc914; outline-offset: 3px; }
@media (max-width: 480px) {
.ha-dialog-actions { flex-direction: column-reverse; }
.ha-dialog-actions button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .ha-dialog[open] { animation: none; } }
.ha-review-prompt-event { display: flex; align-items: center; gap: 14px; }
.ha-review-prompt-event img { flex: none; width: 64px; height: 64px; border-radius: 14px; object-fit: cover; }
.ha-review-prompt-event div { min-width: 0; }
.ha-review-prompt-event p { margin: 4px 0 0; color: #ffc914; font-size: 13px; font-weight: 800; }
.ha-review-prompt .event-detail-star-input legend { margin-bottom: 4px; color: #ded9db; font-size: 14px; font-weight: 700; }
.ha-review-prompt-error { margin: 0; color: #ff9a7a; font-size: 13px; }
.ha-review-prompt-error:empty { display: none; }
.ha-review-prompt-never { justify-self: center; min-height: 40px; border: 0; background: none; color: #bfb8bb; font: inherit; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ha-review-prompt-never:hover { color: #fff; }
.newsletter-main { width: 100%; max-width: 1200px; margin: 0 auto; padding: 28px 20px 64px; }
.newsletter-heading { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.newsletter-heading-copy { min-width: 0; }
.newsletter-home { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; flex-shrink: 0; }
.newsletter-home svg { width: 18px; height: 18px; }
.newsletter-home:focus-visible { outline: 3px solid #17bebb; outline-offset: 3px; }
.newsletter-page .newsletter-title { margin: 0; color: #fff; font-size: clamp(32px, 7vw, 46px); font-weight: 800; line-height: 1.05; letter-spacing: -.03em; }
.newsletter-page .newsletter-period { margin: 6px 0 0; color: #ffc914; font-size: clamp(22px, 5vw, 30px); font-weight: 800; letter-spacing: -.02em; }
.newsletter-page .newsletter-later { margin: 6px 0 0; color: #ded9db; font-size: 15px; font-weight: 700; }
.newsletter-page .newsletter-later[hidden] { display: none; }
.newsletter-page .newsletter-intro { margin: 18px 0 0; max-width: 62ch; color: #ded9db; font-size: 16px; line-height: 1.65; }
.newsletter-subscribe { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 22px; padding: 14px 18px; border: 1px solid #ffc91455; border-radius: 16px; background: #ffc91412; }
.newsletter-subscribe[hidden] { display: none; }
.newsletter-subscribe p { margin: 0; color: #fff; font-weight: 700; }
.newsletter-subscribe button:hover { background: #ffd84d; }
.newsletter-subscribe button { padding: 10px 18px; border: 0; border-radius: 999px; background: #ffc914; color: #2e282a; font: inherit; font-weight: 800; cursor: pointer; }
.newsletter-subscribe a { color: #bfb8bb; font-size: 13px; text-decoration: underline; }
.newsletter-tools { display: grid; gap: 18px; margin-top: 28px; padding: 18px; border: 1px solid #ffffff14; border-radius: 20px; background: #ffffff08; }
.newsletter-tools[hidden] { display: none; }
.newsletter-tool { display: grid; gap: 8px; min-width: 0; }
.newsletter-page .newsletter-tool-label { margin: 0; color: #a39a9d; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.newsletter-sort { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.newsletter-categories { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.newsletter-tools button { min-height: 44px; padding: 8px 12px; border: 1px solid #ffffff26; border-radius: 999px; background: transparent; color: #ded9db; font: inherit; font-size: 14px; font-weight: 700; text-align: center; cursor: pointer; transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.newsletter-tools button:hover { border-color: #17bebb88; color: #fff; }
.newsletter-tools button[aria-pressed="true"] { border-color: #ffc914; background: #ffc914; color: #2e282a; }
.newsletter-tools button:focus-visible { outline: 3px solid #17bebb; outline-offset: 2px; }
@media (min-width: 720px) {
.newsletter-main { padding: 48px 32px 80px; }
.newsletter-heading { flex-direction: row-reverse; align-items: flex-start; justify-content: space-between; gap: 24px; }
.newsletter-tools { grid-template-columns: 220px minmax(0, 1fr); align-items: start; gap: 32px; }
.newsletter-sort { grid-template-columns: 1fr; }
.newsletter-categories { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.newsletter-events { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.newsletter-subscribe { width: fit-content; }
}
.newsletter-page .newsletter-status { margin: 22px 0 0; color: #bfb8bb; font-size: 14px; font-weight: 700; }
.newsletter-events { display: grid; gap: 22px; margin: 14px 0 0; padding: 0; list-style: none; }
.newsletter-card { overflow: hidden; border: 1px solid #ffffff14; border-radius: 20px; background: #2e282acc; }
.newsletter-card-image { display: block; width: 100%; aspect-ratio: 16 / 9; max-height: 360px; object-fit: cover; }
.newsletter-card-body { padding: 20px 22px 22px; }
.newsletter-page .newsletter-card-category { margin: 0 0 6px; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #17bebb; }
.newsletter-card-category.is-cultura, .newsletter-card-category.is-serate { color: #f0764f; }
.newsletter-card-category.is-sagre, .newsletter-card-category.is-bambini { color: #ffc914; }
.newsletter-card-category.is-sport { color: #8bc453; }
.newsletter-page .newsletter-card h2 { margin: 0; color: #fff; font-size: 22px; font-weight: 800; line-height: 1.25; letter-spacing: -.02em; }
.newsletter-card-facts { display: grid; margin: 14px 0 0; }
.newsletter-card-facts div { display: grid; grid-template-columns: 78px 1fr; gap: 10px; padding: 8px 0; border-bottom: 1px solid #ffffff14; }
.newsletter-card-facts dt { color: #a39a9d; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; line-height: 20px; }
.newsletter-card-facts dd { margin: 0; color: #fff; font-size: 14px; font-weight: 700; line-height: 20px; min-width: 0; overflow-wrap: anywhere; }
.newsletter-page .newsletter-card-description { margin: 14px 0 0; color: #d3cccd; font-size: 15px; line-height: 1.6; }
.newsletter-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 16px 0 0; }
.newsletter-card-actions a { color: #fff; font-weight: 800; text-decoration: underline; }
.newsletter-card-actions a:hover { color: #ffc914; }
.newsletter-card-actions .newsletter-card-outing,
.newsletter-card-actions .newsletter-card-outing:hover { padding: 11px 18px; border-radius: 999px; background: #ffc914; color: #2e282a; text-decoration: none; }
.newsletter-card-actions .newsletter-card-outing:hover { background: #ffd84d; }
.newsletter-card-actions a:focus-visible { outline: 3px solid #17bebb; outline-offset: 3px; }
.newsletter-page .newsletter-card-credit { margin: 10px 0 0; color: #a39a9d; font-size: 12px; }
.newsletter-home-card { display: grid; gap: 4px; margin-bottom: 14px; padding: 16px 18px; border: 1px solid #ffc91466; border-radius: 18px; background: linear-gradient(135deg, #ffc9141f, #17bebb14); color: #fff; text-decoration: none; transition: border-color .2s ease, transform .2s ease; }
.newsletter-home-card:hover { border-color: #ffc914; transform: translateY(-2px); }
.newsletter-home-card-eyebrow { color: #ffc914; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.newsletter-home-card strong { font-size: 18px; font-weight: 800; line-height: 1.25; }
.newsletter-home-card-period { color: #ded9db; font-size: 14px; font-weight: 700; }
.newsletter-home-card-cta { margin-top: 4px; color: #17bebb; font-size: 14px; font-weight: 800; }
.newsletter-explore-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding: 12px 16px; border: 1px solid #ffffff1a; border-radius: 16px; background: #ffc9140f; color: #ded9db; font-size: 14px; font-weight: 700; text-decoration: none; }
.newsletter-explore-link:hover { border-color: #ffc91488; color: #fff; }
.newsletter-explore-link span:last-child { color: #ffc914; }
.ha-dialog-link { margin: -4px 0 0; font-size: 14px; }
.ha-dialog-link a { color: #17bebb; text-decoration: underline; }
@media (prefers-reduced-motion: reduce) {
.newsletter-home-card, .newsletter-tools button { transition: none; }
.newsletter-home-card:hover { transform: none; }
}