/* ============================================================ EventTitans Premium Layer — "Expo Hall, refined" ------------------------------------------------------------ Additive, brand-driven polish for the public event subdomain. Scope: everything gated behind body.et-glossy Colour: accents derived at runtime from the tenant brand vars --col-primary-color / --col-secondary-color (set on in _RightMenu.cshtml). Hard fallbacks match platform defaults. Header: stays DARK by design (premium near-black). Brand colour is used as ACCENT, never as the bar fill. Touches: presentation + a dormant-animation activator. No data flow, no markup logic. Remove body class to revert. ============================================================ */ body.et-glossy { /* ---- Brand-derived tokens ---- */ --gl-primary: var(--col-primary-color, #171766); --gl-secondary: var(--col-secondary-color, #ed1c24); --gl-primary-grad: linear-gradient(135deg, color-mix(in srgb, var(--gl-primary) 92%, #000) 0%, var(--gl-primary) 50%, color-mix(in srgb, var(--gl-primary) 70%, #fff) 100%); --gl-secondary-grad: linear-gradient(135deg, color-mix(in srgb, var(--gl-secondary) 90%, #000) 0%, var(--gl-secondary) 50%, color-mix(in srgb, var(--gl-secondary) 72%, #fff) 100%); --gl-accent-grad: linear-gradient(90deg, var(--gl-secondary), var(--gl-primary)); /* Premium dark for the header / top bar (NOT brand-coloured) */ --gl-dark-grad: linear-gradient(180deg, #17171c 0%, #0d0d11 100%); /* Brand-tinted soft shadows */ --gl-shadow-sm: 0 2px 8px color-mix(in srgb, var(--gl-primary) 16%, transparent); --gl-shadow-md: 0 10px 28px color-mix(in srgb, var(--gl-primary) 18%, transparent); --gl-shadow-lg: 0 22px 48px color-mix(in srgb, var(--gl-primary) 22%, transparent); --gl-shadow-secondary: 0 8px 22px color-mix(in srgb, var(--gl-secondary) 38%, transparent); --gl-border: color-mix(in srgb, var(--gl-primary) 14%, transparent); --gl-surface-tint: color-mix(in srgb, #fff 96%, var(--gl-primary)); /* Type — exhibition / conference */ --gl-font-signage: 'Oswald', 'Poppins', sans-serif; --gl-font-head: 'Poppins', 'Inter', sans-serif; /* Fluid type scale */ --gl-h-hero: clamp(2rem, 1.2rem + 3.4vw, 3.6rem); --gl-h-section: clamp(1.35rem, 1rem + 1.4vw, 2.05rem); --gl-h-sub: clamp(1.1rem, 0.95rem + 0.7vw, 1.4rem); --gl-eyebrow: clamp(0.72rem, 0.68rem + 0.2vw, 0.82rem); --gl-ease: cubic-bezier(0.22, 1, 0.36, 1); } /* ============================================================ 1. TOP BAR + HEADER — premium dark, brand accent only ============================================================ */ body.et-glossy .bg-dark { background: var(--gl-dark-grad) !important; position: relative; } /* brand specular hairline at the base of the dark bar */ body.et-glossy header .bg-dark::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--gl-accent-grad); opacity: .85; pointer-events: none; } /* contact + social icons in the bar → consistent glass chips */ body.et-glossy .top-detail .iconSize { width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.16); transition: background .28s var(--gl-ease), transform .28s var(--gl-ease); } body.et-glossy .top-detail .iconSize:hover { background: color-mix(in srgb, var(--gl-secondary) 75%, #fff); border-color: transparent; transform: translateY(-2px); } /* sticky header → frosts to glass on scroll (JS toggles .et-nav-scrolled) */ body.et-glossy #header-block .bg-white { transition: background .35s var(--gl-ease), backdrop-filter .35s var(--gl-ease), box-shadow .35s var(--gl-ease); } body.et-glossy #header-block.et-nav-scrolled .bg-white, body.et-glossy #header-block .et-nav-blur { background: color-mix(in srgb, #fff 82%, transparent) !important; -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); box-shadow: var(--gl-shadow-md) !important; } body.et-glossy .logo-99 img { transition: transform .4s var(--gl-ease); } body.et-glossy .logo-99 a:hover img { transform: scale(1.04); } /* ============================================================ 2. PRIMARY NAV ------------------------------------------------------------ The site already draws a brand hover underline (styles.css: border-bottom 3px var(--col-secondary-color)). We intentionally add NO underline here — a second one would render a double line on hover. Just a smooth colour easing. ============================================================ */ body.et-glossy .left-menu-box .nav-link { transition: color .25s var(--gl-ease), border-color .25s var(--gl-ease); } /* ============================================================ 3. TYPOGRAPHY — sectional scale ============================================================ */ /* Section titles (.title-design h2/h3/h4 is the shared pattern) */ body.et-glossy .title-design h2, body.et-glossy .title-design h3, body.et-glossy .title-design h4 { font-family: var(--gl-font-head); font-size: var(--gl-h-section); font-weight: 600; letter-spacing: .02em; line-height: 1.18; } /* standardize the title underline → brand gradient bar */ body.et-glossy .title-design h2:before, body.et-glossy .title-design h3:before, body.et-glossy .title-design h4:before, body.et-glossy .title-design2 h4:before { width: 64px !important; height: 4px !important; border-radius: 4px !important; background: var(--gl-accent-grad) !important; } /* Hero / event title */ body.et-glossy #h1EventTitle { font-family: var(--gl-font-head); font-size: var(--gl-h-hero) !important; font-weight: 700; letter-spacing: -.01em; line-height: 1.06; } /* Eyebrow labels */ body.et-glossy .et-label { font-family: var(--gl-font-signage); font-size: var(--gl-eyebrow); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gl-secondary); } /* Big faded section watermark → condensed signage */ body.et-glossy .primary-col-col.fs-7rem { font-family: var(--gl-font-signage); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; } /* Stat counters → condensed signage numerals */ body.et-glossy .count-area-content .counter, body.et-glossy .count-area-content h2, body.et-glossy .count-area-content h3, body.et-glossy .et-counter { font-family: var(--gl-font-signage); font-weight: 700; letter-spacing: .01em; color: var(--gl-primary); } /* ============================================================ 4. BUTTON SYSTEM — one standardized look ============================================================ */ /* shared geometry for the prominent CTAs */ body.et-glossy .btn-primary-c, body.et-glossy .btn-secondary-c, body.et-glossy .fancy-btn, body.et-glossy .btn-danger.bg-red-col, body.et-glossy .btn-new.red-new, body.et-glossy .btn-light.rounded-pill, body.et-glossy [onclick^="redirecttoticket"] { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 44px; padding: .6rem 1.6rem; font-weight: 600; letter-spacing: .02em; line-height: 1.1; border-radius: 50rem; position: relative; overflow: hidden; transition: transform .3s var(--gl-ease), box-shadow .3s var(--gl-ease), color .3s var(--gl-ease), background .3s var(--gl-ease); } /* Note: button icons are NOT restyled. Each CTA is inline-flex with a gap, so the existing icomoon glyph is centred automatically. Overriding the (display/font-size) previously misaligned it. */ /* Primary action = brand primary, glossy */ body.et-glossy .btn-primary-c { background: var(--gl-primary-grad) !important; color: #fff !important; border: none !important; box-shadow: var(--gl-shadow-md); } /* Secondary / danger actions = brand secondary, glossy */ body.et-glossy .btn-secondary-c, body.et-glossy .fancy-btn, body.et-glossy .btn-danger.bg-red-col { background: var(--gl-secondary-grad) !important; color: #fff !important; border: none !important; box-shadow: var(--gl-shadow-secondary); } /* Light pill (Message Us etc.) = clean outline that fills on hover */ body.et-glossy .btn-light.rounded-pill { background: #fff !important; color: var(--gl-primary) !important; border: 1px solid var(--gl-border) !important; } body.et-glossy .btn-light.rounded-pill:hover { background: var(--gl-primary-grad) !important; color: #fff !important; border-color: transparent !important; } /* White topbar pills */ body.et-glossy .btn-new.red-new { border: 1px solid color-mix(in srgb, var(--gl-secondary) 22%, transparent); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18); } body.et-glossy .btn-new.red-new:hover, body.et-glossy [onclick^="redirecttoticket"]:hover { color: #fff !important; background: var(--gl-secondary-grad) !important; box-shadow: var(--gl-shadow-secondary); } /* lift on hover for every standardized CTA */ body.et-glossy .btn-primary-c:hover, body.et-glossy .btn-secondary-c:hover, body.et-glossy .fancy-btn:hover, body.et-glossy .btn-danger.bg-red-col:hover, body.et-glossy .btn-new.red-new:hover, body.et-glossy [onclick^="redirecttoticket"]:hover { transform: translateY(-2px); } /* Signature: specular sheen sweep on filled CTAs */ body.et-glossy .btn-primary-c::before, body.et-glossy .btn-secondary-c::before, body.et-glossy .fancy-btn::before, body.et-glossy .btn-new.red-new::before { content: ""; position: absolute; top: 0; left: -120%; width: 80%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5), transparent); transform: skewX(-18deg); transition: left .6s var(--gl-ease); pointer-events: none; } body.et-glossy .btn-primary-c:hover::before, body.et-glossy .btn-secondary-c:hover::before, body.et-glossy .fancy-btn:hover::before, body.et-glossy .btn-new.red-new:hover::before { left: 130%; } /* ============================================================ 5. SIDE LOGIN / UTILITY MENU ============================================================ */ body.et-glossy .menu_login_btn { box-shadow: var(--gl-shadow-md); border: 1px solid var(--gl-border); } body.et-glossy .login-livepool { transition: background .28s var(--gl-ease), transform .28s var(--gl-ease), box-shadow .28s var(--gl-ease); } body.et-glossy .login-livepool:hover { background: var(--gl-surface-tint); transform: translateY(-2px); box-shadow: var(--gl-shadow-sm); } body.et-glossy .login-livepool i, body.et-glossy .menu_login_btn .secondary-col-col { color: var(--gl-secondary); } /* ============================================================ 6. CARDS + ACCENTS ============================================================ */ body.et-glossy .shadow, body.et-glossy .card.shadow, body.et-glossy .et-card { box-shadow: var(--gl-shadow-md) !important; transition: transform .35s var(--gl-ease), box-shadow .35s var(--gl-ease); } body.et-glossy .et-card:hover, body.et-glossy .card.shadow:hover { transform: translateY(-4px); box-shadow: var(--gl-shadow-lg) !important; } body.et-glossy .text-red-col { color: var(--gl-secondary) !important; } /* brand focus ring on inputs */ body.et-glossy .form-control:focus { border-color: color-mix(in srgb, var(--gl-primary) 55%, transparent) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--gl-primary) 16%, transparent) !important; } /* ============================================================ 7. SCROLL REVEAL — activates the page's dormant data-animation attributes. Base state is added by JS only (eventtitans- premium.js); with no JS / reduced motion everything stays fully visible. Namespaced keyframes (the common.css set is commented out / dead). ============================================================ */ body.et-glossy .gl-reveal { opacity: 0; transition: opacity .7s var(--gl-ease), transform .7s var(--gl-ease); will-change: opacity, transform; } body.et-glossy .gl-reveal.gl-up { transform: translateY(34px); } body.et-glossy .gl-reveal.gl-down { transform: translateY(-28px); } body.et-glossy .gl-reveal.gl-left { transform: translateX(-40px); } body.et-glossy .gl-reveal.gl-right { transform: translateX(40px); } body.et-glossy .gl-reveal.gl-zoom { transform: scale(.94); } body.et-glossy .gl-reveal.gl-in { opacity: 1; transform: none; } /* ============================================================ 7b. ORGANIZER "About" — tighten the fixed-height gap .hv-30 forces height:30vh, leaving a large empty scroll area when the about copy is short. Relax to auto height with a cap so short copy is tight, long copy still scrolls (the element already carries overflow-auto). ============================================================ */ body.et-glossy .description-content.hv-30 { height: auto !important; max-height: 34vh; } /* ============================================================ 8. ACCESSIBILITY + MOTION ============================================================ */ body.et-glossy a:focus-visible, body.et-glossy button:focus-visible, body.et-glossy .nav-link:focus-visible, body.et-glossy [onclick]:focus-visible { outline: 3px solid color-mix(in srgb, var(--gl-secondary) 70%, #fff); outline-offset: 3px; border-radius: 4px; } @media (prefers-reduced-motion: reduce) { body.et-glossy .btn-primary-c::before, body.et-glossy .btn-secondary-c::before, body.et-glossy .fancy-btn::before, body.et-glossy .btn-new.red-new::before { display: none; } body.et-glossy .gl-reveal { opacity: 1 !important; transform: none !important; } body.et-glossy *, body.et-glossy *::before, body.et-glossy *::after { transition-duration: .01ms !important; } } /* ============================================================ 9. color-mix() fallback (older engines get flat brand colour) ============================================================ */ @supports not (background: color-mix(in srgb, red, blue)) { body.et-glossy .btn-secondary-c, body.et-glossy .fancy-btn, body.et-glossy .btn-danger.bg-red-col, body.et-glossy .btn-new.red-new:hover, body.et-glossy [onclick^="redirecttoticket"]:hover { background: var(--gl-secondary, #ed1c24) !important; } body.et-glossy .btn-primary-c, body.et-glossy .btn-light.rounded-pill:hover { background: var(--gl-primary, #171766) !important; } } /* ============================================================ 10. Mobile polish ============================================================ */ @media (max-width: 767.98px) { body.et-glossy .login-livepool:hover, body.et-glossy .card.shadow:hover, body.et-glossy .et-card:hover { transform: none; /* no jumpy hover-on-tap */ } body.et-glossy #h1EventTitle { line-height: 1.12; } }