idk
This commit is contained in:
andre committed
1 parent
e68d357177
commit
3e3382df57
65 files changed
+1836
-42
No files matched your search
@@ -2634,4 +2634,282 @@ section[id] {
|
||||
|
||||
.trial-form .site-btn {
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* ══════════════════════════════════════════════════════════════════════════
|
||||
Events — homepage banner + landing page (/evento/<slug>)
|
||||
══════════════════════════════════════════════════════════════════════════ */
|
||||
|
||||
/* ── Active events — featured inside the hero/header ───────────────────────── */
|
||||
.event-live-dot {
|
||||
width: 9px; height: 9px;
|
||||
flex: 0 0 auto;
|
||||
border-radius: 50%;
|
||||
background: var(--fitme-accent);
|
||||
box-shadow: 0 0 0 0 rgba(var(--fitme-accent-rgb), .7);
|
||||
animation: event-pulse 1.8s infinite;
|
||||
}
|
||||
@keyframes event-pulse {
|
||||
0% { box-shadow: 0 0 0 0 rgba(var(--fitme-accent-rgb), .7); }
|
||||
70% { box-shadow: 0 0 0 10px rgba(var(--fitme-accent-rgb), 0); }
|
||||
100% { box-shadow: 0 0 0 0 rgba(var(--fitme-accent-rgb), 0); }
|
||||
}
|
||||
|
||||
.hero-events {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 1.75rem;
|
||||
}
|
||||
.hero-event {
|
||||
--ev-accent: var(--fitme-accent);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
width: min(640px, 92vw);
|
||||
padding: 12px 14px 12px 18px;
|
||||
background: rgba(11, 11, 13, .55);
|
||||
border: 1.5px solid rgba(var(--fitme-accent-rgb), .55);
|
||||
border-radius: 999px;
|
||||
backdrop-filter: blur(8px);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
text-decoration: none;
|
||||
text-align: left;
|
||||
animation: hero-event-glow 2.8s ease-in-out infinite;
|
||||
transition: transform var(--fitme-transition), box-shadow var(--fitme-transition), border-color var(--fitme-transition);
|
||||
}
|
||||
/* The event's own image as a frosted (blurred + darkened) backdrop inside the
|
||||
pill — only when --ev-img is set; otherwise the translucent dark bg shows. */
|
||||
.hero-event.has-img::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
background-image: var(--ev-img);
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
filter: blur(6px) saturate(1.15) brightness(.5);
|
||||
transform: scale(1.18); /* hide the blur's transparent edges */
|
||||
transition: transform var(--fitme-transition);
|
||||
}
|
||||
.hero-event.has-img:hover::before { transform: scale(1.24); }
|
||||
/* Keep the content above the image layer. */
|
||||
.hero-event > * { position: relative; z-index: 1; }
|
||||
@keyframes hero-event-glow {
|
||||
0%, 100% { box-shadow: 0 10px 34px rgba(0,0,0,.45), 0 0 18px rgba(var(--fitme-accent-rgb), .14); }
|
||||
50% { box-shadow: 0 10px 34px rgba(0,0,0,.45), 0 0 30px rgba(var(--fitme-accent-rgb), .32); }
|
||||
}
|
||||
.hero-event:hover {
|
||||
transform: translateY(-2px);
|
||||
border-color: var(--ev-accent);
|
||||
box-shadow: 0 16px 44px rgba(0, 0, 0, .55), 0 0 34px rgba(var(--fitme-accent-rgb), .38);
|
||||
}
|
||||
.hero-event-badge {
|
||||
flex: 0 0 auto;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
padding: 7px 13px;
|
||||
font-size: .72rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: 1.5px;
|
||||
text-transform: uppercase;
|
||||
color: var(--fitme-accent);
|
||||
background: rgba(var(--fitme-accent-rgb), .14);
|
||||
border-radius: 999px;
|
||||
}
|
||||
.hero-event-text {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
line-height: 1.22;
|
||||
}
|
||||
.hero-event-title {
|
||||
font-size: 1.12rem;
|
||||
font-weight: 800;
|
||||
color: #fff;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.hero-event-sub {
|
||||
font-size: .9rem;
|
||||
color: rgba(255, 255, 255, .72);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.hero-event-go {
|
||||
flex: 0 0 auto;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 11px 20px;
|
||||
font-size: .92rem;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
color: var(--fitme-dark);
|
||||
background: var(--ev-accent);
|
||||
border-radius: 999px;
|
||||
}
|
||||
.hero-event-go i { transition: transform var(--fitme-transition); }
|
||||
.hero-event:hover .hero-event-go i { transform: translateX(4px); }
|
||||
|
||||
@media (max-width: 575px) {
|
||||
.hero-event {
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
border-radius: 18px;
|
||||
gap: 10px;
|
||||
padding: 14px;
|
||||
}
|
||||
.hero-event-text { flex-basis: 100%; align-items: center; }
|
||||
.hero-event-title, .hero-event-sub { white-space: normal; }
|
||||
.hero-event-go { flex-basis: 100%; justify-content: center; }
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.hero-event { animation: none; }
|
||||
.event-live-dot { animation: none; }
|
||||
}
|
||||
|
||||
/* ── Staff preview ribbon ──────────────────────────────────────────────────── */
|
||||
.event-preview-bar {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1080;
|
||||
padding: 8px 16px;
|
||||
text-align: center;
|
||||
font-size: .85rem;
|
||||
font-weight: 600;
|
||||
color: #0B0B0D;
|
||||
background: #ffd84d;
|
||||
}
|
||||
|
||||
/* ── Landing hero ──────────────────────────────────────────────────────────── */
|
||||
.event-hero {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 70vh;
|
||||
padding: 160px 0 90px;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
color: #fff;
|
||||
}
|
||||
.event-hero--plain {
|
||||
background: linear-gradient(135deg, var(--fitme-dark) 0%, var(--fitme-dark-2) 100%);
|
||||
}
|
||||
.event-hero-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(180deg, rgba(11,11,13,.35) 0%, rgba(11,11,13,.78) 100%);
|
||||
}
|
||||
.event-hero .container { position: relative; z-index: 2; }
|
||||
.event-hero-inner { max-width: 760px; }
|
||||
.event-hero-eyebrow {
|
||||
display: inline-block;
|
||||
font-size: .8rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 3px;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.event-hero-inner h1 {
|
||||
font-size: clamp(2.2rem, 5vw, 3.6rem);
|
||||
line-height: 1.08;
|
||||
margin: 0 0 14px;
|
||||
color: #fff;
|
||||
}
|
||||
.event-hero-sub {
|
||||
font-size: 1.2rem;
|
||||
color: rgba(255,255,255,.85);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.event-hero-meta {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0 0 26px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px 26px;
|
||||
}
|
||||
.event-hero-meta li {
|
||||
font-size: 1rem;
|
||||
color: rgba(255,255,255,.9);
|
||||
}
|
||||
.event-hero-meta i { margin-right: 8px; opacity: .85; }
|
||||
.event-hero-cta { border: none; color: var(--fitme-dark) !important; }
|
||||
|
||||
/* ── Landing body (admin HTML) ─────────────────────────────────────────────── */
|
||||
.event-body { padding: 70px 0; background: var(--fitme-white); }
|
||||
.event-body p { font-size: 1.05rem; line-height: 1.7; color: var(--fitme-text-soft); }
|
||||
.event-body h2, .event-body h3, .event-body h4 { margin-top: 1.6rem; }
|
||||
.event-body img { max-width: 100%; height: auto; border-radius: var(--fitme-radius); }
|
||||
|
||||
/* ── Lead form ─────────────────────────────────────────────────────────────── */
|
||||
.event-leadform { padding: 70px 0; background: var(--fitme-surface); }
|
||||
.event-form { margin-top: 26px; }
|
||||
.event-form-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 16px;
|
||||
}
|
||||
.event-field--full { grid-column: 1 / -1; }
|
||||
.event-field label {
|
||||
display: block;
|
||||
font-size: .85rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 6px;
|
||||
color: var(--fitme-text-soft);
|
||||
}
|
||||
.event-field input,
|
||||
.event-field textarea {
|
||||
width: 100%;
|
||||
padding: 12px 14px;
|
||||
font-size: 1rem;
|
||||
background: var(--fitme-white);
|
||||
border: 1px solid var(--fitme-surface-dark);
|
||||
border-radius: var(--fitme-radius);
|
||||
color: var(--fitme-text);
|
||||
}
|
||||
.event-field input:focus,
|
||||
.event-field textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--fitme-accent);
|
||||
box-shadow: 0 0 0 3px rgba(var(--fitme-accent-rgb), .2);
|
||||
}
|
||||
/* honeypot — visually hidden, kept in the layout flow for bots */
|
||||
.event-hp {
|
||||
position: absolute !important;
|
||||
left: -9999px;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
opacity: 0;
|
||||
}
|
||||
.event-alert {
|
||||
padding: 12px 16px;
|
||||
margin-bottom: 16px;
|
||||
border-radius: var(--fitme-radius);
|
||||
font-size: .95rem;
|
||||
}
|
||||
.event-alert--ok { background: #e6f6ea; color: #1c6b34; border: 1px solid #9fdcb0; }
|
||||
.event-alert--err { background: #fdecec; color: #a32424; border: 1px solid #f1b5b5; }
|
||||
.event-consent {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 9px;
|
||||
margin-top: 16px;
|
||||
font-size: .88rem;
|
||||
color: var(--fitme-text-soft);
|
||||
cursor: pointer;
|
||||
}
|
||||
.event-consent input { margin-top: 3px; flex: 0 0 auto; }
|
||||
.event-consent a { color: var(--fitme-accent-dark); text-decoration: underline; }
|
||||
@media (max-width: 575px) {
|
||||
.event-form-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
Reference in new issue
Block a user