/* ====================================================================== MANVERSE — EVENTS STYLESHEET Shared by events.html, event-registration-in-person.html, and event-registration-virtual.html (also used by the older generic event-registration.html). Depends on css/style.css for shared tokens (--variables), reset, header/nav, footer, and .btn — load style.css BEFORE this file. ====================================================================== */ /* ====================================================================== EVENT REGISTRATION PAGE ONLY (active when ) New page — does not modify or reuse the .page-registration rules above, which belong to a separate registration page. Only shared tokens/utilities (--variables, .btn, .wrap, .logo, footer, .eyebrow, .section-head) are reused. ====================================================================== */ /* ---------- HEADER ---------- */ .ereg-header{ position:sticky; top:0; z-index:200; background:rgba(23,22,20,0.94); backdrop-filter:blur(14px); border-bottom:1px solid var(--line-dark); } .ereg-header .wrap{ display:flex; align-items:center; justify-content:space-between; height:76px; } .ereg-header-tag{ font-size:13px; font-weight:600; color:var(--muted); padding:8px 16px; border:1px solid var(--line-dark); border-radius:999px; } /* ---------- PROGRESS ---------- */ .ereg-page-top{ padding-top:56px; } .ereg-progress-wrap{ position:relative; z-index:3; } .ereg-progress-label{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; font-size:13px; font-weight:700; color:var(--grey-soft); } .ereg-progress-label span.gold{ color:var(--gold); } .ereg-progress-bar{ height:8px; background:var(--tan); border-radius:999px; overflow:hidden; } .ereg-progress-fill{ width:33.3%; height:100%; background:linear-gradient(90deg, var(--gold), var(--gold-soft)); transition:width .4s cubic-bezier(.2,.7,.3,1); border-radius:999px; } /* ---------- TABS ---------- */ .ereg-tabs{ display:flex; gap:8px; overflow-x:auto; padding:6px; background:var(--tan-soft); border-radius:999px; margin-top:26px; } .ereg-tabs::-webkit-scrollbar{ height:0; } .ereg-tab-btn{ border:none; padding:13px 22px; background:transparent; color:var(--grey); font-weight:600; font-size:14px; cursor:pointer; border-radius:999px; transition:.25s; white-space:nowrap; font-family:inherit; } .ereg-tab-btn:hover{ color:var(--ink); background:rgba(255,255,255,.5); } .ereg-tab-btn.active{ background:var(--ink); color:var(--cream); box-shadow:0 10px 22px -10px rgba(28,27,25,.35); } /* ---------- FORM CARD ---------- */ .ereg-card{ background:var(--white); padding:48px; border-radius:24px; border:1px solid var(--line-light); box-shadow:0 20px 50px -20px rgba(28,27,25,.28); margin-top:22px; position:relative; overflow:hidden; } .ereg-card::before{ content:""; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg, var(--gold), var(--rust), var(--olive)); } .ereg-panel{ display:none; animation:ereg-fade .4s cubic-bezier(.2,.7,.3,1); } .ereg-panel.active{ display:block; } @keyframes ereg-fade{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:translateY(0); } } .ereg-panel-title{ font-size:30px; margin-bottom:8px; color:var(--ink); position:relative; padding-top:16px; } .ereg-panel-title::before{ content:""; position:absolute; top:0; left:0; width:40px; height:3px; border-radius:3px; background:var(--gold); } .ereg-panel-subtitle{ color:var(--grey); margin-bottom:32px; } /* ---------- FIELDS ---------- */ .ereg-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:22px; } .ereg-field{ margin-bottom:24px; } .ereg-field label{ display:block; font-size:14px; font-weight:700; margin-bottom:9px; color:var(--ink); } .ereg-field label .opt{ font-weight:500; color:var(--grey-soft); } .ereg-field label.req::after{ content:" *"; color:var(--rust); } .ereg-field input, .ereg-field select, .ereg-field textarea{ width:100%; padding:15px 16px; border-radius:14px; border:1px solid var(--line-light); background:var(--cream); font-size:15px; font-family:inherit; color:var(--ink); transition:.25s; } .ereg-field select:invalid{ color:var(--grey-soft); } .ereg-field input:focus, .ereg-field select:focus, .ereg-field textarea:focus{ outline:none; border-color:var(--gold); background:var(--white); box-shadow:0 0 0 5px rgba(218,147,22,.12); } .ereg-field textarea{ resize:vertical; min-height:110px; } .ereg-phone{ display:flex; gap:10px; } .ereg-phone .ereg-prefix{ flex:none; width:64px; display:flex; align-items:center; justify-content:center; border-radius:14px; background:var(--tan-soft); color:var(--ink); font-weight:700; font-size:15px; } .ereg-phone input{ flex:1; } /* ---------- YES/NO OPTIONS ---------- */ .ereg-options{ display:flex; flex-wrap:wrap; gap:12px; } .ereg-option{ display:flex; align-items:center; gap:10px; padding:13px 20px; background:var(--cream); border:1px solid var(--line-light); border-radius:999px; cursor:pointer; transition:.25s; } .ereg-option:hover{ background:var(--white); border-color:rgba(218,147,22,.35); transform:translateY(-2px); } .ereg-option:has(input:checked){ border-color:var(--gold); background:rgba(218,147,22,.08); } .ereg-option input{ width:17px; height:17px; accent-color:var(--gold); } .ereg-option span{ color:var(--ink); font-size:14.5px; } /* ---------- CONSENT CHECKBOXES ---------- */ .ereg-consent-list{ display:flex; flex-direction:column; gap:12px; } .ereg-consent-item{ display:flex; gap:14px; align-items:flex-start; padding:18px 20px; background:var(--cream); border:1px solid var(--line-light); border-radius:16px; cursor:pointer; transition:.25s; } .ereg-consent-item:hover{ border-color:rgba(218,147,22,.35); background:var(--white); } .ereg-consent-item:has(input:checked){ border-color:var(--gold); background:rgba(218,147,22,.06); } .ereg-consent-item input{ width:18px; height:18px; margin-top:3px; flex:none; accent-color:var(--gold); } .ereg-consent-item span{ color:var(--ink); font-size:14.5px; line-height:1.6; } .ereg-subheading{ font-size:16px; font-weight:700; color:var(--ink); margin:36px 0 16px; } .ereg-note{ color:var(--grey-soft); font-size:13.5px; margin-top:28px; line-height:1.6; } /* ---------- ACTIONS ---------- */ .ereg-actions{ display:flex; justify-content:space-between; align-items:center; margin-top:44px; } /* ---------- SUCCESS PANEL ---------- */ .ereg-success{ text-align:center; padding:20px 0; } .ereg-success .ereg-check{ width:64px; height:64px; border-radius:50%; margin:0 auto 22px; background:rgba(218,147,22,.14); color:var(--gold); display:flex; align-items:center; justify-content:center; animation:pop-in .4s cubic-bezier(.2,.8,.3,1.3); } .ereg-success h2{ font-size:26px; margin-bottom:10px; color:var(--ink); } .ereg-success p{ color:var(--grey); max-width:440px; margin:0 auto; } /* ---------- RESPONSIVE ---------- */ @media (max-width:768px){ .ereg-header .wrap{ padding:0 20px; } .ereg-page-top{ padding-top:36px; } .ereg-card{ padding:26px; } .ereg-actions{ flex-direction:column-reverse; gap:14px; } .ereg-actions .btn{ width:100%; } } /* ====================================================================== EVENTS LANDING PAGE ONLY (active when ) New page — reuses only shared/global pieces (header, nav, footer, .btn, .eyebrow, .section-head, .dims-grid/.dim-card). Does not modify any rules belonging to the landing or registration pages above. ====================================================================== */ /* ---------- HERO ---------- */ .evt-hero{ background: radial-gradient(560px 420px at 78% 0%, rgba(218,147,22,0.16), transparent 65%), var(--ink); color:var(--cream); padding:130px 0 90px; overflow:hidden; position:relative; } .evt-hero-rings{ position:absolute; right:-140px; top:40px; width:500px; height:500px; pointer-events:none; opacity:.5; animation:spin-slow 110s linear infinite; } .evt-hero .wrap{ position:relative; z-index:2; } .evt-hero .eyebrow{ margin-bottom:20px; } .evt-hero h1{ font-size:clamp(34px, 4.8vw, 40px); margin-bottom:24px; max-width:950px; } .evt-hero p.lede{ font-size:14px; color:var(--muted); margin-bottom:16px; max-width:950px; } .evt-hero-actions{ margin-top:32px; margin-bottom:56px; } /* ---------- INCLUSIVE CALLOUT (now part of the hero, full width) ---------- */ .evt-inclusive-banner{ background:linear-gradient(120deg, var(--gold) 0%, var(--gold-soft) 100%); border-radius:26px; padding:48px 56px; box-shadow:0 30px 60px -24px rgba(218,147,22,.4); } .evt-inclusive-banner h2{ color:var(--ink); font-size:26px; margin-bottom:16px; } .evt-inclusive-banner p{ color:rgba(28,27,25,.75); font-size:15.5px; max-width:800px; } .evt-inclusive-banner p + p{ margin-top:14px; } .evt-inclusive-banner strong{ color:var(--ink); } /* ---------- WHAT TO EXPECT (reuses .dims-grid / .dim-card) ---------- */ .evt-expect-section{ background:var(--white); padding:100px 0; } /* ---------- UPCOMING EVENTS (matches provided reference screenshot) ---------- */ .evt-events-section{ --nv-bg:var(--tan); --nv-card:var(--white); --nv-border:var(--gold); --nv-border-strong:rgba(148,163,184,0.32); --nv-text:#F1F5F9; --nv-muted:#94A3B8; --nv-teal:var(--gold); --nv-blue:var(--rust); --nv-purple:var(--olive); background:var(--nv-bg); padding:100px 0; } .evt-events-section .eyebrow{ color:var(--nv-teal); } .evt-events-section .section-head h2{ color:var(--nv-ink); } .evt-events-section .section-desc{ color:var(--nv-grey); } .evt-toolbar{ display:flex; align-items:flex-end; justify-content:space-between; gap:28px; flex-wrap:wrap; margin:44px 0 40px; padding-bottom:26px; border-bottom:1px solid var(--nv-border); } .evt-filter-groups{ display:flex; flex-wrap:wrap; gap:30px; flex:1 1 auto; } .evt-filter-group{ display:flex; flex-direction:column; gap:10px; } .evt-filter-label{ font-size:11.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--nv-grey); } .evt-filter-pills{ display:flex; gap:8px; flex-wrap:wrap; } .evt-tab-btn{ border:1.5px solid var(--nv-border-strong); background:transparent; color:var(--nv-tan); font-weight:600; font-size:14px; padding:11px 22px; border-radius:999px; cursor:pointer; transition:.22s; white-space:nowrap; font-family:inherit; } .evt-tab-btn:hover{ color:var(--nv-tan); border-color:var(--nv-teal); } .evt-tab-btn.active{ border-color:var(--nv-teal); color:var(--nv-tan); background:rgba(218,147,22,0.12); } .evt-city-group select{ padding:11px 18px; border-radius:999px; border:1.5px solid var(--nv-border-strong); background:transparent; color:var(--nv-tan); font-size:14px; font-family:inherit; cursor:pointer; transition:.22s; } .evt-city-group select:hover, .evt-city-group select:focus{ outline:none; border-color:var(--nv-teal); color:var(--nv-text); } .evt-city-group select option{ background:var(--nv-card); color:var(--nv-ink); } .evt-search{ flex:none; } .evt-search input{ width:270px; max-width:100%; padding:12px 18px; border-radius:999px; border:1px solid var(--nv-border-strong); background:rgba(255,255,255,0.03); color:var(--nv-text); font-size:14px; font-family:inherit; transition:.22s; } .evt-search input::placeholder{ color:var(--nv-muted); } .evt-search input:focus{ outline:none; border-color:var(--nv-ink); background:rgba(255,255,255,0.05); } .evt-events-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:26px; } .evt-event-card{ display:none; flex-direction:column; background:var(--nv-card); border:1px solid var(--nv-border); border-radius:18px; padding:28px; transition:transform .3s cubic-bezier(.2,.8,.3,1.2), border-color .25s ease; } .evt-event-card.show{ display:flex; animation:evt-fade .4s ease; } @keyframes evt-fade{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:translateY(0); } } .evt-event-card:hover{ transform:translateY(-4px); border-color:var(--nv-border-strong); } .evt-card-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:22px; } .evt-badge{ font-size:11.5px; font-weight:800; letter-spacing:.03em; padding:6px 14px; border-radius:999px; border:1px solid; } .evt-badge.men-only{ color:var(--nv-blue); border-color:rgba(182,106,46,.45); background:rgba(182,106,46,.14); } .evt-badge.open{ color:var(--nv-purple); border-color:rgba(110,106,72,.5); background:rgba(110,106,72,.16); } .evt-format-label{ font-size:13.5px; color:var(--nv-muted); } .evt-event-card h3{ font-size:19px; color:var(--nv-grey); margin-bottom:14px; line-height:1.32; } .evt-desc{ color:var(--nv-tan); font-size:14.5px; line-height:1.65; margin-bottom:22px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; } .evt-divider{ border-top:1px solid var(--nv-border); margin-bottom:18px; } .evt-meta-row{ display:flex; align-items:center; gap:10px; font-size:14px; color:var(--nv-tan); margin-bottom:10px; } .evt-meta-row svg{ color:var(--nv-teal); flex:none; } .evt-price{ font-weight:800; font-size:15px; margin:6px 0 22px; } .evt-price.paid{ color:var(--nv-teal); } .evt-price.free{ color:var(--nv-blue); } .evt-cta{ display:block; text-align:center; padding:14px; border-radius:12px; border:1.5px solid var(--nv-teal); color:var(--nv-teal); font-weight:700; font-size:14.5px; background:transparent; text-decoration:none; transition:.22s; font-family:inherit; width:100%; cursor:pointer; } .evt-cta:hover{ background:rgba(218,147,22,0.12); } .evt-cta-past{ border-color:var(--nv-border-strong); color:var(--nv-muted); } .evt-cta-past:hover{ background:rgba(255,255,255,0.05); border-color:var(--nv-muted); } .evt-event-card[data-status="past"]{ opacity:.75; } .evt-event-card[data-status="past"]:hover{ opacity:1; } .evt-empty-note{ text-align:center; color:var(--nv-muted); font-size:14.5px; padding:20px 0; display:none; } /* ---------- EVENT DETAILS MODAL ---------- */ .evt-modal-overlay{ position:fixed; inset:0; z-index:500; background:rgba(11,14,22,0.72); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; padding:24px; opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease; } .evt-modal-overlay.active{ opacity:1; visibility:visible; } .evt-modal-card{ background:#fff; border:1px solid rgba(148,163,184,0.16); border-radius:22px; padding:56px 40px 40px; max-width:680px; width:100%; max-height:88vh; overflow-y:auto; position:relative; transform:translateY(24px); transition:transform .35s cubic-bezier(.2,.8,.3,1.2); box-shadow:0 40px 90px -20px rgba(0,0,0,.6); } .evt-modal-overlay.active .evt-modal-card{ transform:translateY(0); } .evt-modal-close{ position:absolute; top:22px; left:22px; background:none; border:none; color:#94A3B8; cursor:pointer; padding:6px; line-height:1; transition:color .2s ease; } .evt-modal-close:hover{ color:#F1F5F9; } .evt-modal-top{ display:flex; align-items:center; gap:14px; margin-bottom:22px; } .evt-modal-format{ font-size:14px; color:#94A3B8; font-weight:600; } .evt-modal-card h2{ font-size:clamp(24px,3vw,30px); color:var(--gold-soft); margin-bottom:18px; line-height:1.3; } .evt-modal-meta{ color:var(--gold); font-weight:700; font-size:15px; margin-bottom:22px; } .evt-modal-desc{ color:#94A3B8; font-size:15px; line-height:1.7; margin-bottom:28px; } .evt-modal-subhead{ color:var(--ink); font-size:16px; font-weight:800; margin-bottom:14px; } .evt-modal-list{ list-style:none; padding:0; margin:0 0 36px; display:flex; flex-direction:column; gap:12px; } .evt-modal-list li{ position:relative; padding-left:20px; color:#94A3B8; font-size:14.5px; line-height:1.6; } .evt-modal-list li::before{ content:"•"; position:absolute; left:0; color:var(--gold); font-weight:800; } .evt-modal-list strong{ color:#94A3B8; } .evt-modal-cta{ display:block; text-align:center; padding:16px; border-radius:14px; background:var(--gold); color:var(--ink); font-weight:800; font-size:15.5px; text-decoration:none; transition:.22s; border:none; width:100%; cursor:pointer; font-family:inherit; } .evt-modal-cta:hover{ background:var(--gold-soft); } .evt-modal-cta-disabled{ background:rgba(148,163,184,0.16); color:var(--nv-muted); cursor:not-allowed; pointer-events:none; } .evt-modal-cta-disabled:hover{ background:rgba(148,163,184,0.16); } @media (max-width:600px){ .evt-modal-card{ padding:50px 24px 30px; } } /* ---------- PARTNER CTA ---------- */ .evt-partner-section{ background:var(--white); color:var(--cream); padding:90px 0; text-align:center; position:relative; overflow:hidden; } .evt-partner-section::before{ content:""; position:absolute; inset:0; background:radial-gradient(520px 320px at 50% 0%, rgba(218,147,22,.16), transparent 65%); pointer-events:none; } .evt-partner-section .wrap{ position:relative; z-index:2; max-width:950px; } .evt-partner-section h2{ font-size:clamp(26px, 3.2vw, 36px); margin-bottom:16px; color:var(--ink); } .evt-partner-section p{ color:var(--ink); font-size:16px; margin-bottom:30px; } /* ---------- RESPONSIVE ---------- */ @media (max-width:768px){ .evt-hero{ padding:100px 0 60px; } .evt-inclusive-banner{ padding:32px 26px; } .evt-inclusive-banner h2{ font-size:22px; } .evt-events-section, .evt-expect-section, .evt-partner-section{ padding:64px 0; } .evt-toolbar{ flex-direction:column; align-items:stretch; } .evt-filter-groups{ gap:22px; } .evt-search input{ width:100%; } }