/* Theme base styles */ /* Tools Any animations, or functions used throughout the project. Note: _macros.css needs to be imported into each stylesheet where macros are used and not included here */ /* Generic This is where reset, normalize & box-sizing styles go. */ /* GENERAL STYLES (SECTIONS, LAYOUTS, HEADER, HELPERS) */ *{ padding: 0; margin: 0; box-sizing: border-box; } *:root { --font-manrope: "Manrope", sans-serif; --font-baskervville: "Baskervville", serif; --font-inter: "Inter", sans-serif; } html { font-size: 62.5%; /* Prevent the off-screen mobile menu (right: -100%) from creating a horizontal scrollbar in any browser */ overflow-x: hidden; } body { font-family: var(--paragraph-font); background: var(--page-bg); /* Overflow-x on html alone isn't enough in some Safari versions */ overflow-x: hidden; } .header { /* Theme settings variables */ background: var(--header-bg); padding: var(--header-padding-vertical) 24px; /* Fixed properties */ display: flex; width: 100%; align-items: center; justify-content: flex-start; position: absolute; top: 0; left: 0; height: max-content; opacity: 0; transform: translateY(-20px); transition: none; /* Prevent initial transition */ backdrop-filter: blur(12px); border-bottom: 1px solid rgba(14, 112, 144, 0.08); box-shadow: 0 2px 20px rgba(14, 112, 144, 0.1); z-index: 100; } /* Initially hide all header elements for staggered reveal */ .header .nav-link, .header #user-info, .header #login-btn, .header .logo-link, .header .logo { opacity: 0; transform: translateY(-8px); } /* mobile-menu-toggle is display:none on desktop so no animation needed there; on tablet/mobile it should appear immediately without a fade-in delay */ .header .mobile-menu-toggle { opacity: 0; transform: translateY(-8px); } @media (max-width: 1024px) { .header .mobile-menu-toggle { opacity: 1 !important; transform: none !important; animation: none !important; } } .header.header-blur { position: fixed; top: 0; left: 0; z-index: 1000; background: var(--header-bg); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(0, 0, 0, 0.05); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); } /* Reveal the entire header smoothly once auth state is ready */ .header.header-ready { opacity: 1 !important; transform: translateY(0) scale(1) !important; animation: headerReveal 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; } /* Subtle header reveal animation */ @keyframes headerReveal { 0% { opacity: 0; transform: translateY(-12px) scale(0.98); } 60% { opacity: 0.8; transform: translateY(-2px) scale(1.01); } 100% { opacity: 1; transform: translateY(0) scale(1); } } /* Staggered animation for header elements */ .header.header-ready .logo-link { animation: headerElementReveal 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards; } .header.header-ready .nav-link:nth-child(1) { animation: headerElementReveal 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards; } .header.header-ready .nav-link:nth-child(2) { animation: headerElementReveal 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.25s forwards; } .header.header-ready .nav-link:nth-child(3) { animation: headerElementReveal 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards; } .header.header-ready .nav-link:nth-child(4) { animation: headerElementReveal 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.35s forwards; } .header.header-ready .nav-link:nth-child(5) { animation: headerElementReveal 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.4s forwards; } .header.header-ready #user-info, .header.header-ready #login-btn, .header.header-ready .mobile-menu-toggle { animation: headerElementReveal 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards; } /* Individual element reveal animation */ @keyframes headerElementReveal { 0% { opacity: 0; transform: translateY(-8px); } 100% { opacity: 1; transform: translateY(0); } } /* Smooth transitions for existing elements that change text/state */ #events { transition: all 0.3s ease-out; } .logo-link { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; margin-left: 0; /* Explicitly start at the left */ margin-right: 0; /* No auto margin - let main-nav handle spacing */ order: -1; /* Ensure logo is first */ justify-content: flex-start; /* Ensure content inside is left-aligned */ text-align: left; /* Override any inherited text-align */ } /* Override any HubSpot logo module wrapper alignment */ .logo-link span, .logo-link .hs_cos_wrapper { display: block; text-align: left; } .logo { height: 5rem; width: auto; display: block; } .nav { display: flex; align-items: center; } .main-nav { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-shrink: 0; margin-left: auto; /* Explicitly push nav to the right */ } .main-nav > div:first-child { display: flex; align-items: center; gap: 12px; } #auth-buttons { display: flex; align-items: center; gap: 16px; } /* ── Profile pill (logged-in state) ── */ .member-header-info { display: inline-flex; align-items: center; gap: 6px; position: relative; padding: 6px 12px 6px 8px; border-radius: 999px; border: 1px solid rgba(14, 112, 144, 0.18); cursor: pointer; transition: background 0.18s, border-color 0.18s; user-select: none; } .member-header-info:hover { background: rgba(14, 112, 144, 0.05); border-color: rgba(14, 112, 144, 0.35); } .member-header-info ion-icon[name="person-circle-outline"] { font-size: 2rem; color: var(--c-primary, #0e7090); flex-shrink: 0; } .member-header-info .member-name { font-size: 1.4rem; font-weight: 600; color: #374151; white-space: nowrap; } /* Tiny chevron indicator */ .member-header-info::after { content: ''; display: block; width: 0; height: 0; border-left: 3.5px solid transparent; border-right: 3.5px solid transparent; border-top: 4px solid #9ca3af; margin-left: 2px; flex-shrink: 0; transition: transform 0.18s; } .member-header-info:hover::after { transform: rotate(180deg); } /* Invisible bridge: keeps :hover active as the mouse travels from the pill down to the logout dropdown */ .member-header-info::before { content: ''; position: absolute; top: 100%; left: -8px; right: -8px; height: 12px; } /* ── Sign Out — hidden until parent is hovered ── */ #logout-btn { position: absolute; top: calc(100% + 10px); right: 0; display: flex; align-items: center; justify-content: center; gap: 8px; background: #fff; border: 1px solid rgba(0, 0, 0, 0.09); border-radius: 10px; padding: 11px 22px; font-size: 1.55rem; font-weight: 500; color: #6b7280; text-decoration: none; white-space: nowrap; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.09); opacity: 0; pointer-events: none; transform: translateY(-5px); transition: opacity 0.18s ease, transform 0.18s ease, color 0.15s; z-index: 200; } #logout-btn ion-icon { font-size: 1.8rem; flex-shrink: 0; } .member-header-info:hover #logout-btn { opacity: 1; pointer-events: auto; transform: translateY(0); } #logout-btn:hover { color: #dc2626; } /* ── Sign In — standout pill button ── */ #login-btn { display: inline-flex; align-items: center; gap: 6px; background: var(--c-primary, #0e7090); color: #fff !important; padding: 8px 18px; border-radius: 999px; font-size: 1.35rem; font-weight: 600; text-decoration: none !important; white-space: nowrap; border: none; transition: background 0.15s; } #login-btn ion-icon { font-size: 1.6rem; } #login-btn:hover { background: var(--c-primary-hover, #155b75); color: #fff !important; outline: none; } .section { padding: 96px 45px; display: flex; flex-direction: column; gap: 40px; background: var(--page-bg); } /* Scroll offset for anchor navigation to account for fixed header */ #events-section { scroll-margin-top: 20px; /* Account for fixed header height */ } .section-hero { background-image: linear-gradient(to bottom, #ffffff 5%, #ffffff00 30%, #ffffff00 100%), url("https://145176788.fs1.hubspotusercontent-eu1.net/hubfs/145176788/pexels-adrien-olichon-1257089-2387793.jpg"); background-size: 1300px; background-position: center; width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; animation: zoomin 7s 1 ease-in-out; } .admin-hero { background: #f8f9fa; border: 1px solid #e5e7eb; border-radius: 8px; padding: 24px; margin-bottom: 32px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } .admin-hero-welcome { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 20px; } .admin-hero-text { flex: 1; } .admin-hero-title { font-size: 2.4rem; font-weight: 600; color: var(--c-primary); margin: 0; line-height: 1.3; } .admin-hero-subtitle { font-size: 1.4rem; color: #6b7280; margin: 0; } .admin-hero-stats { display: flex; gap: 12px; flex-shrink: 0; } .admin-stat-card { background: white; border: 1px solid #e5e7eb; border-radius: 6px; padding: 8px 12px; text-align: center; min-width: 60px; } .admin-stat-number { font-size: 1.8rem; font-weight: 700; color: var(--c-primary); margin-bottom: 2px; } .admin-stat-label { font-size: 1rem; color: #6b7280; font-weight: 500; } .admin-hero-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 16px; border-top: 1px solid #e5e7eb; } .admin-hero-meta { font-size: 1.2rem; color: #9ca3af; } .flex-between { display: flex; justify-content: space-between; align-items: center; width: 100%; } .hero-text__wrapper { color: #fff; border-radius: 20px; width: 50vw; padding: 20px; padding-left: 30px; display: flex; align-items: start; justify-content: space-between; flex-direction: column; background-color: #ffffff00; margin: 0 auto; } .hero-btn__wrapper { display: flex; } @keyframes zoomin { 0% { background-size: 3000px; } 100% { background-size: 1300px; } } .hidden { display: none !important; visibility: hidden !important; } /* Ensure header is completely hidden when it has hidden class */ .header.hidden { display: none !important; visibility: hidden !important; opacity: 0 !important; } /* 🍎 iOS-Compatible Scroll Lock */ .no-scroll { overflow: hidden !important; position: fixed !important; width: 100% !important; height: 100% !important; /* Prevent iOS rubber-band scrolling */ -webkit-overflow-scrolling: auto !important; /* Prevent pull-to-refresh on iOS */ overscroll-behavior: none !important; } /* ===== BUTTON LOADING STATES ===== */ .btn-loading { position: relative; pointer-events: none; opacity: 0.7; cursor: not-allowed !important; } .btn-loading:hover { transform: none !important; box-shadow: none !important; } .btn-spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid transparent; border-top: 2px solid currentColor; border-radius: 50%; animation: btn-spinner-spin 1s linear infinite; margin-right: 8px; vertical-align: middle; } @keyframes btn-spinner-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .btn-loading .btn-text { opacity: 0.8; } /* Loading state for different button types */ .btn-primary.btn-loading, .btn-secondary.btn-loading, .btn-danger.btn-loading, .btn-success.btn-loading { background-color: rgba(59, 130, 246, 0.6) !important; border-color: rgba(59, 130, 246, 0.6) !important; } .btn-danger.btn-loading { background-color: rgba(220, 38, 38, 0.6) !important; border-color: rgba(220, 38, 38, 0.6) !important; } .success-btn.btn-loading { background-color: rgba(14, 112, 144, 0.6) !important; border-color: rgba(14, 112, 144, 0.6) !important; } /* ===== UNIFIED LOADING & SKELETON SYSTEM ===== */ /* Base Loading Animation - Used by all views */ .loading-container { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 20px; gap: 30px; min-height: 400px; } .loading-icon { position: relative; width: 80px; height: 80px; } .spinner-outer { position: absolute; width: 80px; height: 80px; border: 3px solid var(--c-primary); border-radius: 50%; border-top-color: transparent; animation: rotate 2s linear infinite; } .spinner-inner { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60px; height: 60px; border: 2px solid var(--c-accent); border-radius: 50%; border-bottom-color: transparent; animation: rotate-reverse 1.5s linear infinite; } .loading-symbol { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 2.5rem; color: var(--c-primary); animation: pulse 2s ease-in-out infinite; } .loading-text { text-align: center; animation: pulse 2s ease-in-out infinite; } .loading-title { font-family: 'Manrope', sans-serif; font-size: 2.4rem; font-weight: 700; color: var(--c-primary); margin-bottom: 8px; } .loading-subtitle { font-size: 1.6rem; color: #666; margin-bottom: 20px; } .loading-progress { display: flex; flex-direction: column; align-items: center; gap: 10px; animation: pulse 2s ease-in-out infinite; } .progress-bar { width: 200px; height: 4px; background: rgba(14, 112, 144, 0.1); border-radius: 2px; overflow: hidden; position: relative; } .progress-fill { height: 100%; background: linear-gradient(90deg, var(--c-primary), var(--c-accent)); border-radius: 2px; animation: progress 2s ease-in-out infinite; } /* Animation Keyframes */ @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes rotate-reverse { 0% { transform: translate(-50%, -50%) rotate(360deg); } 100% { transform: translate(-50%, -50%) rotate(0deg); } } @keyframes pulse { 0%, 100% { opacity: 0.8; transform: scale(1); } 50% { opacity: 1; transform: scale(1.02); } } @keyframes progress { 0% { width: 0%; transform: translateX(-100%); } 50% { width: 100%; transform: translateX(0%); } 100% { width: 100%; transform: translateX(100%); } } /* Loading Theme Variants */ .loading-container.admin { border-radius: 16px; border: 1px solid rgba(244, 164, 98, 0.1); min-height: 500px; padding: 80px 20px; gap: 40px; } .loading-container.admin .loading-symbol::before { content: "⚙️"; } .loading-container.attendee .loading-symbol::before { content: "📅"; } /* Public loading uses ion-icon in HTML instead of CSS ::before */ .loading-container.public .loading-symbol ion-icon { font-size: 2.5rem; color: var(--c-primary); } /* Unified Skeleton System */ .skeleton-container { display: flex; flex-direction: column; gap: 30px; padding: 40px 20px; min-height: 500px; animation: skeleton-wave 2s ease-in-out infinite; } .skeleton-welcome { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; } .skeleton-title { height: 32px; background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); border-radius: 6px; width: 60%; animation: skeleton-shimmer 2s ease-in-out infinite; } .skeleton-subtitle { height: 20px; background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); border-radius: 4px; width: 80%; animation: skeleton-shimmer 2s ease-in-out infinite; } .skeleton-events { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; } .skeleton-card { background: #ffffff; border-radius: 16px; padding: 20px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); animation: skeleton-shimmer 1.5s ease-in-out infinite; } .skeleton-image { width: 100%; height: 200px; background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; border-radius: 12px; animation: skeleton-wave 1.5s linear infinite; } .skeleton-content { margin-top: 16px; } .skeleton-line { height: 16px; background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; border-radius: 4px; margin-bottom: 12px; animation: skeleton-wave 1.5s linear infinite; } .skeleton-line.short { width: 60%; } .skeleton-line.medium { width: 80%; } .skeleton-line.long { width: 100%; } @keyframes skeleton-wave { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } @keyframes skeleton-shimmer { 0% { opacity: 1; } 50% { opacity: 0.8; } 100% { opacity: 1; } } /* Admin-specific skeleton elements */ .skeleton-container.admin .skeleton-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-bottom: 32px; } .skeleton-container.admin .skeleton-stat { background: #ffffff; border-radius: 12px; padding: 24px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); border: 1px solid rgba(14, 112, 144, 0.1); } .skeleton-container.admin .skeleton-stat-icon { width: 48px; height: 48px; background: linear-gradient(90deg, var(--c-primary) 25%, var(--c-primary-hover) 50%, var(--c-primary) 75%); background-size: 200% 100%; border-radius: 12px; animation: skeleton-wave 1.5s linear infinite; margin-bottom: 16px; } .skeleton-container.admin .skeleton-controls { display: flex; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; } .skeleton-container.admin .skeleton-button { height: 40px; width: 140px; background: linear-gradient(90deg, var(--c-primary) 25%, var(--c-primary-hover) 50%, var(--c-primary) 75%); background-size: 200% 100%; border-radius: 8px; animation: skeleton-wave 1.5s linear infinite; } .skeleton-container.admin .skeleton-table { background: #ffffff; border-radius: 12px; padding: 24px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); } .skeleton-container.admin .skeleton-row { display: grid; grid-template-columns: 1fr 200px 150px 100px; gap: 16px; padding: 16px 0; border-bottom: 1px solid #f3f4f6; } .skeleton-container.admin .skeleton-cell { height: 16px; background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; border-radius: 4px; animation: skeleton-wave 1.5s linear infinite; } .skeleton-container.admin .skeleton-cell:nth-child(odd) { animation-delay: 0.1s; } .skeleton-container.admin .skeleton-cell:nth-child(even) { animation-delay: 0.3s; } /* Legacy class mappings for existing HTML */ .events-loading, .admin-loading, .attendee-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 20px; gap: 30px; min-height: 400px; } .admin-loading { border-radius: 16px; border: 1px solid rgba(244, 164, 98, 0.1); min-height: 500px; padding: 80px 20px; gap: 40px; } /* Skeleton legacy mappings */ .admin-skeleton-dashboard, .attendee-skeleton-dashboard, .skeleton-cards { display: flex; flex-direction: column; gap: 30px; padding: 40px 20px; min-height: 500px; animation: skeleton-wave 2s ease-in-out infinite; } .skeleton-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; margin-top: 40px; padding: 0 20px; } /* ===== FOOTER STYLES ===== */ .footer { background: var(--c-neutral-0); color: var(--c-primary); padding: 40px 0 30px; margin-top: 60px; font-family: var(--ff-manrope); border-top: 1px solid rgba(14, 112, 144, 0.1); } .footer__container { max-width: 1200px; margin: 0 auto; padding: 0 20px; display: flex; flex-direction: column; align-items: center; gap: 24px; } .footer__social { display: flex; gap: 20px; align-items: center; } .footer__social-link { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: var(--c-neutral-0); border: 0.8px solid var(--c-primary); border-radius: 50%; color: var(--c-primary); text-decoration: none; transition: all 0.3s ease; } .footer__social-link:hover { color: var(--c-primary); } .footer__social-link ion-icon { font-size: 20px; } .footer__copyright { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; } .footer__copyright p { margin: 0; font-size: 14px; opacity: 0.9; font-weight: 400; } .footer__links { display: flex; align-items: center; gap: 12px; font-size: 13px; } .footer__links a { color: var(--c-neutral-0); text-decoration: none; opacity: 0.8; transition: opacity 0.3s ease; } .footer__links a:hover { opacity: 1; text-decoration: underline; } .footer__divider { opacity: 0.6; font-weight: 300; } /* ===== SANDWICH POPUP STYLES ===== */ .sandwich-popup { position: fixed; top: 20px; right: 20px; z-index: 10000; min-width: 320px; max-width: 500px; padding: 20px; border-radius: 12px; backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); transform: translateX(120%); transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); font-family: var(--font-manrope, 'Manrope', sans-serif); } .sandwich-popup.sandwich-show { transform: translateX(0); } .sandwich-popup.sandwich-exit { transform: translateY(-100px); opacity: 0; transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1); } .sandwich-success { background: linear-gradient(135deg, rgba(34, 197, 94, 0.9), rgba(22, 163, 74, 0.9)); color: white; } .sandwich-error { background: linear-gradient(135deg, rgba(239, 68, 68, 0.9), rgba(220, 38, 38, 0.9)); color: white; } .sandwich-content { display: flex; align-items: center; justify-content: space-between; gap: 15px; } .sandwich-message { flex: 1; font-size: 14px; font-weight: 500; line-height: 1.4; } .sandwich-close { background: none; border: none; color: white; cursor: pointer; padding: 4px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; opacity: 0.9; } .sandwich-close:hover { background-color: rgba(255, 255, 255, 0.2); opacity: 1; } .sandwich-close ion-icon { font-size: 20px; color: white; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3)); } /* Mobile responsive styles moved to media-queries.css */ /* ===== MOBILE RESPONSIVE DESIGN ===== */ /* Mobile Navigation */ .mobile-menu-toggle { display: none; background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px); border: 1px solid rgba(14, 112, 144, 0.1); font-size: 2.4rem; color: var(--c-primary); cursor: pointer; padding: 10px; border-radius: 8px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .mobile-menu-toggle:hover { background: rgba(14, 112, 144, 0.1); border-color: rgba(14, 112, 144, 0.2); box-shadow: 0 4px 12px rgba(14, 112, 144, 0.15); } .mobile-menu-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 9998; opacity: 0; visibility: hidden; transition: all 0.3s ease; } .mobile-menu-overlay.active { opacity: 1; visibility: visible; } .mobile-menu { position: fixed; top: 0; right: -100%; width: 100vw; height: 100vh; background: #ffffff !important; z-index: 9999; padding: 20px; transition: right 0.3s ease-in-out; overflow-y: auto; display: flex; flex-direction: column; } .mobile-menu.active { right: 0; } .mobile-menu-header { display: flex; justify-content: flex-end; align-items: center; padding-bottom: 20px; border-bottom: 1px solid rgba(14, 112, 144, 0.1); margin-bottom: 30px; } .mobile-menu-close { background: none; border: none; font-size: 2.4rem; color: #6b7280; cursor: pointer; padding: 4px; border-radius: 6px; transition: all 0.3s ease; } .mobile-menu-close:hover { background: rgba(14, 112, 144, 0.1); color: var(--c-primary); } .mobile-nav-links { display: flex; flex-direction: column; gap: 0; flex: 1; } .mobile-nav-link { display: flex; align-items: center; gap: 12px; padding: 16px 0; font-size: 1.8rem; font-weight: 500; color: #374151; text-decoration: none; border-bottom: 1px solid rgba(14, 112, 144, 0.05); transition: all 0.3s ease; } .mobile-nav-link:hover { color: var(--c-primary); padding-left: 8px; background: rgba(14, 112, 144, 0.05); margin: 0 -20px; padding-left: 28px; padding-right: 20px; } .mobile-nav-link ion-icon { font-size: 2rem; color: #6b7280; transition: color 0.3s ease; } .mobile-nav-link:hover ion-icon { color: var(--c-primary); } .mobile-auth-section { margin-top: auto; margin-bottom: 140px; /* Move 80px higher from bottom */ padding-top: 30px; border-top: 1px solid rgba(14, 112, 144, 0.1); } .mobile-user-info { display: flex; align-items: center; gap: 12px; padding: 16px 0; margin-bottom: 16px; } .mobile-user-avatar { width: 40px; height: 40px; border-radius: 50%; border: 2px solid rgba(14, 112, 144, 0.2); } .mobile-user-details h4 { font-size: 1.6rem; font-weight: 600; color: #374151; margin: 0 0 4px 0; } .mobile-user-details p { font-size: 1.4rem; color: #6b7280; margin: 0; } .mobile-login-btn, .mobile-logout-btn { width: 100%; padding: 12px 16px; font-size: 1.6rem; font-weight: 500; border: none; border-radius: 8px; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; gap: 8px; } .mobile-login-btn { background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-hover) 100%); color: white; } .mobile-login-btn:hover { opacity: 0.9; } .mobile-logout-btn { background: rgba(220, 38, 38, 0.1); color: #dc2626; border: 1px solid rgba(220, 38, 38, 0.2); } .mobile-logout-btn:hover { background: rgba(220, 38, 38, 0.2); } /* ===== DESKTOP USER DROPDOWN STYLES ===== */ #user-info { position: relative; } #user-avatar { width: 50px; height: 50px; border-radius: 50%; cursor: pointer; border: 2px solid rgba(14, 112, 144, 0.2); transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } #user-avatar:hover { border-color: rgba(14, 112, 144, 0.4); } #user-dropdown { position: absolute; top: 60px; right: 0; min-width: 240px; background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%); border: 1px solid rgba(14, 112, 144, 0.1); border-radius: 12px; padding: 20px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); backdrop-filter: blur(10px); opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); z-index: 1000; } #user-dropdown.show, #user-dropdown[style*="display: block"] { opacity: 1; visibility: visible; transform: translateY(0); } /* Dropdown arrow pointer */ #user-dropdown::before { content: ''; position: absolute; top: -8px; right: 20px; width: 16px; height: 16px; background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%); border: 1px solid rgba(14, 112, 144, 0.1); border-bottom: none; border-right: none; transform: rotate(45deg); border-radius: 2px 0 0 0; } .user-dropdown-header { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid rgba(14, 112, 144, 0.1); margin-bottom: 16px; } .user-dropdown-avatar { width: 40px; height: 40px; border-radius: 50%; border: 2px solid rgba(14, 112, 144, 0.2); } .user-dropdown-info h4 { font-size: 1.6rem; font-weight: 600; color: #374151; margin: 0 0 4px 0; font-family: var(--font-manrope); } .user-dropdown-info p { font-size: 1.3rem; color: #6b7280; margin: 0; font-family: var(--font-manrope); } #user-dropdown #user-name { font-size: 1.6rem; font-weight: 600; color: #374151; margin-bottom: 4px; display: block; font-family: var(--font-manrope); } #user-dropdown #user-email { font-size: 1.3rem; color: #6b7280; display: block; margin-bottom: 16px; font-family: var(--font-manrope); } .logout-btn { width: 100%; padding: 10px 16px; font-size: 1.4rem; font-weight: 500; background: linear-gradient(135deg, rgba(220, 38, 38, 0.1) 0%, rgba(185, 28, 28, 0.1) 100%); color: #dc2626; border: 1px solid rgba(220, 38, 38, 0.2); border-radius: 8px; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-manrope); } .logout-btn:hover { border:1px solid #dc2626f0; background-color: rgba(250, 200, 200, 0.297); } /* User name and badge wrapper */ .user-name-badge-wrapper { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } /* Role badge in dropdown */ .user-role-badge { display: inline-block; padding: 3px 8px; font-size: 1.0rem; font-weight: 500; background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-hover) 100%); color: white; border-radius: 4px; margin-top: 0; font-family: var(--font-manrope); white-space: nowrap; } .user-role-badge.admin { background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%); } .user-role-badge.attendee { background: linear-gradient(135deg, #059669 0%, #047857 100%); } /* Mobile Media Queries moved to media-queries.css */ /* Small mobile media queries moved to media-queries.css */ /* ================================================ * ATTENDEE-SPECIFIC COMPONENTS (Non-loading styles) * ================================================ */ /* Use unified skeleton classes: .skeleton-welcome, .skeleton-title, .skeleton-subtitle, .skeleton-events */ /* Attendee Welcome Message */ .attendee-welcome { background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-light-teal) 100%); color: white; padding: 15px; border-radius: 16px; margin-bottom: 40px; box-shadow: 0 8px 32px rgba(14, 112, 144, 0.15); } .attendee-welcome h2 { font-family: 'Manrope', sans-serif; font-size: 2.8rem; font-weight: 700; margin-bottom: 12px; color: white; } .attendee-welcome p { font-size: 1.6rem; opacity: 0.95; line-height: 1; } .attendee-welcome strong { color: var(--c-accent); font-weight: 600; } .attendee-welcome em { color: rgba(255, 255, 255, 0.9); font-style: italic; } /* Attendee Empty State */ .attendee-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 80px 20px; text-align: center; min-height: 400px; } .empty-state-icon { font-size: 6rem; color: var(--c-primary); margin-bottom: 30px; opacity: 0.7; } .attendee-empty-state h3 { color: var(--c-primary); margin-bottom: 16px; font-family: 'Manrope', sans-serif; font-weight: 700; } .attendee-empty-state p { color: #666; margin-bottom: 30px; max-width: 500px; line-height: 1.6; } .attendee-empty-state .cta-btn { display: inline-flex; align-items: center; gap: 10px; background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-light-teal) 100%); color: white; padding: 16px 32px; border-radius: 50px; text-decoration: none; font-weight: 600; font-size: 1.6rem; transition: all 0.3s ease; box-shadow: 0 4px 16px rgba(14, 112, 144, 0.25); } .attendee-empty-state .cta-btn:hover { opacity: 0.9; } .attendee-empty-state .cta-btn ion-icon { font-size: 2rem; } /* Use main .events-wrapper instead of duplicate attendee-events-container */ /* Mobile Responsive - Attendee Components moved to media-queries.css */ /* ===== SMOOTH SCROLLING BEHAVIOR ===== */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* =================================================== @hubspot/menu MODULE — DESKTOP HEADER NAV Wrapping div: .header-nav-menu-wrapper Module tag:
==================================================== */ /* Include the wrapper in the staggered reveal animation */ .header .header-nav-menu-wrapper { opacity: 0; transform: translateY(-8px); } .header.header-ready .header-nav-menu-wrapper { animation: headerElementReveal 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards; } /* Strip HubSpot's default menu chrome */ .header-nav-menu-wrapper .hs-menu-wrapper { background: none; border: none; padding: 0; margin: 0; } /* Horizontal flex row for top-level items */ .header-nav-menu-wrapper .hs-menu-wrapper > ul { display: flex; align-items: center; gap: 28px; list-style: none; margin: 0; padding: 0; } .header-nav-menu-wrapper .hs-menu-item { list-style: none; margin: 0; padding: 0; } /* Top-level links — minimalist with growing underline on hover */ .header-nav-menu-wrapper .hs-menu-depth-1 > a { color: #374151; font-family: var(--font-manrope, sans-serif); font-size: 1.4rem; font-weight: 500; background: transparent; border: none; border-radius: 0; padding: 4px 2px; position: relative; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; white-space: nowrap; transition: color 0.2s ease; } /* Growing underline */ .header-nav-menu-wrapper .hs-menu-depth-1 > a::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 0; height: 1.5px; background: var(--c-primary, #0e7090); transition: width 0.22s ease; } .header-nav-menu-wrapper .hs-menu-depth-1 > a:hover, .header-nav-menu-wrapper .hs-menu-depth-1 > a:focus { background: transparent; color: var(--c-primary, #0e7090); border: none; outline: none; } .header-nav-menu-wrapper .hs-menu-depth-1 > a:hover::after, .header-nav-menu-wrapper .hs-menu-depth-1 > a:focus::after { width: 100%; } /* Active / current page — underline always visible */ .header-nav-menu-wrapper .hs-menu-depth-1.active > a, .header-nav-menu-wrapper .hs-menu-depth-1 > a[aria-current="page"] { color: var(--c-primary, #0e7090); } .header-nav-menu-wrapper .hs-menu-depth-1.active > a::after, .header-nav-menu-wrapper .hs-menu-depth-1 > a[aria-current="page"]::after { width: 100%; } /* =================================================== @hubspot/menu MODULE — MOBILE SLIDE-OUT NAV Container: .mobile-nav-links Module tag:
==================================================== */ /* Strip HubSpot's default menu chrome */ .mobile-nav-links .hs-menu-wrapper { background: none; border: none; padding: 0; margin: 0; width: 100%; } .mobile-nav-links .hs-menu-wrapper ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .mobile-nav-links .hs-menu-item { list-style: none; margin: 0; padding: 0; } /* Mobile links — identical to .mobile-nav-link */ .mobile-nav-links .hs-menu-depth-1 > a { display: flex; align-items: center; gap: 12px; padding: 16px 0; font-size: 1.8rem; font-weight: 500; color: #374151; text-decoration: none; border-bottom: 1px solid rgba(14, 112, 144, 0.05); transition: all 0.3s ease; width: 100%; } .mobile-nav-links .hs-menu-depth-1 > a:hover { color: var(--c-primary); background: rgba(14, 112, 144, 0.05); margin: 0 -20px; padding-left: 28px; padding-right: 20px; } /* =================================================== GRANTS LISTING SECTION Wrapper around the grants_grid DND area in main.html. Centres the content and adds consistent padding. The DND columns inside handle the 2-column split. =================================================== */ .grants-listing-section { max-width: 1280px; margin: 0 auto; padding: 48px 24px 80px; } /* Tighten up the DND section's own default padding so cards sit closer together and the gap is controlled here */ .grants-listing-section .dnd-section { padding-top: 0 !important; padding-bottom: 0 !important; } /* Comfortable column gap */ .grants-listing-section .row-fluid { gap: 24px; } /* Each DND column stretches to hold the card naturally */ .grants-listing-section .widget-span { display: flex; flex-direction: column; padding: 12px; } /* On tablet and below, stack columns to single-card rows */ @media (max-width: 1024px) { .grants-listing-section { padding: 32px 16px 60px; } .grants-listing-section .row-fluid { flex-direction: column; gap: 16px; } .grants-listing-section .widget-span { width: 100% !important; } } @media (max-width: 480px) { .grants-listing-section { padding: 24px 12px 48px; } } /* ================================================================== Buttons — identical visuals, cleaner source ================================================================== */ /* ---------- Minimal shared rules (only things ALL six buttons had) */ .cta-secondary, .submit-btn, .register-btn, .cta-btn, .danger-btn, .add-standalone-btn { display: inline-flex; align-items: center; justify-content: center; transition: background 0.3s; border: none; font-family: var(--ff-inter); border-radius: 50px; font-weight: 600; text-decoration: none; cursor: pointer; /* typography */ font-size: 1.8rem; padding: 1.6rem 2.2rem; text-align: center; transition: 0.3s all; } /* ------------------------------------------------------------------ Primary CTA ------------------------------------------------------------------ */ .cta-btn { gap: 1rem; padding: 1.6rem 2.2rem; margin-right: 1rem; /* visual */ color: var(--c-primary); /* #0E7090 */ background-color: var(--c-neutral-0); /* #ffffff */ } .cta-btn:hover { background-color: var(--c-cyan-light); /* #155B75 */ } /* ------------------------------------------------------------------ Secondary CTA ------------------------------------------------------------------ */ .cta-secondary { gap: 5px; padding: 1.6rem 2.2rem; background-color: var(--c-secondary); /* #c6dbdd19 */ color: var(--c-neutral-0); /* #0E7090 */ border: 1.5px solid var(--c-primary); } .cta-secondary:hover { background-color: transparent; color: var(--c-cyan-light); } /* ------------------------------------------------------------------ Submit button NOTE: Styles controlled by theme settings variables ------------------------------------------------------------------ */ .submit-btn { /* Theme settings variables */ background-color: var(--form-btn-bg); color: var(--form-btn-color); font-family: var(--form-btn-font), var(--ff-inter); font-size: var(--form-btn-font-size); font-weight: var(--form-btn-font-weight); border: var(--form-btn-border); border-radius: var(--form-btn-radius); padding: var(--form-btn-padding); transition: all 0.3s ease; /* Fixed properties */ width: 100%; margin: 0 auto; } .submit-btn:hover { background-color: var(--form-btn-hover-bg); color: var(--form-btn-hover-color); border: var(--form-btn-hover-border); } /* ------------------------------------------------------------------ Event Card Actions Container (Register + View Details) NOTE: Layout controlled by theme settings (horizontal/vertical) ------------------------------------------------------------------ */ .event-card-actions { position: absolute; bottom: 2rem; left: 50%; transform: translate(-50%); display: flex; flex-direction: var(--event-card-button-direction); align-items: center; gap: var(--event-card-button-gap); width: max-content; } /* ------------------------------------------------------------------ Register button (NO positioning - lives inside .event-card-actions) NOTE: Styles controlled by theme settings variables ------------------------------------------------------------------ */ .register-btn { gap: 1rem; /* Theme settings variables */ background-color: var(--register-btn-bg); color: var(--register-btn-color); font-family: var(--register-btn-font), var(--ff-inter); font-size: var(--register-btn-font-size); font-weight: var(--register-btn-font-weight); border: var(--register-btn-border); border-radius: var(--register-btn-radius); padding: var(--register-btn-padding); transition: all 0.3s ease; } .register-btn:hover { background-color: var(--register-btn-hover-bg); color: var(--register-btn-hover-color); border: var(--register-btn-hover-border); } /* ------------------------------------------------------------------ Register button on event-detail page NOTE: Same theme settings, but NOT absolutely positioned + 20% bigger font ------------------------------------------------------------------ */ .register-btn-detail { position: static; transform: none; font-size: 17px; /* 20% bigger than default 14px - NOT editable */ } /* ------------------------------------------------------------------ View Details button (NO positioning - lives inside .event-card-actions) NOTE: Styles controlled by theme settings variables ------------------------------------------------------------------ */ .view-details-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; padding: var(--view-details-btn-padding); font-size: var(--view-details-btn-font-size); font-family: var(--view-details-btn-font); font-weight: var(--view-details-btn-font-weight); background-color: var(--view-details-btn-bg); color: var(--view-details-btn-color); border: none; border-bottom: var(--view-details-btn-border-bottom); cursor: pointer; transition: color 0.3s, border-color 0.3s; position: relative; } /* No arrow icon needed - removed from HTML */ /* Growing border-bottom animation from left to right */ .view-details-btn::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background-color: var(--view-details-btn-hover-border-color); transition: width 0.3s ease; } .view-details-btn:hover { color: var(--view-details-btn-hover-color); } .view-details-btn:hover::after { width: 100%; /* grow from left to right */ } /* ------------------------------------------------------------------ Cancel Registration button (attendee view only) NOTE: Minimalist text-link style - same hover effect as View Details but red ------------------------------------------------------------------ */ .cancel-registration-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0; font-size: 1.2rem; font-family: var(--ff-inter); font-weight: 400; background: none; color: #9ca3af; border: none; border-bottom: 1px solid transparent; cursor: pointer; transition: color 0.3s, border-color 0.3s; position: relative; } /* Growing border-bottom animation from left to right (red variant) */ .cancel-registration-btn::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background-color: #dc2626; transition: width 0.3s ease; } .cancel-registration-btn:hover { color: #dc2626; } .cancel-registration-btn:hover::after { width: 100%; /* grow from left to right */ } .cancel-registration-btn:active { color: #b91c1c; } /* ------------------------------------------------------------------ Add-standalone button ------------------------------------------------------------------ */ .add-standalone-btn { gap: .6rem; padding: 1.2rem 1.6rem; font-size: 1.6rem; background: transparent; border: 1px solid var(--c-primary); color: var(--c-primary); border-radius: 1rem; width: max-content; } .add-standalone-btn:hover { background-color: var(--c-cyan-light); } /* ------------------------------------------------------------------ Success button (for positive actions: Create, Edit, Associate) ------------------------------------------------------------------ */ .success-btn { font-family: var(--ff-inter); background: linear-gradient(135deg, rgba(14, 112, 144, 0.12) 0%, rgba(21, 91, 117, 0.12) 100%); color: var(--c-primary); border: 1px solid rgba(14, 112, 144, 0.25); border-radius: 8px; width: 100%; margin: 20px auto; transition: all 0.3s ease; font-weight: 600; } .success-btn:hover { background: linear-gradient(135deg, rgba(14, 112, 144, 0.2) 0%, rgba(21, 91, 117, 0.2) 100%); border-color: rgba(14, 112, 144, 0.4); color: var(--c-primary-hover); } /* ------------------------------------------------------------------ Danger button (for destructive actions: Delete) ------------------------------------------------------------------ */ .danger-btn { font-family: var(--ff-inter); background: linear-gradient(135deg, rgba(220, 38, 38, 0.1) 0%, rgba(185, 28, 28, 0.1) 100%); color: #dc2626; border: 1px solid rgba(220, 38, 38, 0.2); border-radius: 8px; width: 100%; margin: 20px auto; transition: all 0.3s ease; font-weight: 600; } .danger-btn:hover { background-color: #dc2626; color: #fff; border: 1px solid #dc2626; } /* ------------------------------------------------------------------ Small utility buttons & icons ------------------------------------------------------------------ */ .tool-btn { background-color: transparent; border: none; padding: 0.8rem; transition: 0.3s all; } .action-icon { font-size: 2.6rem; color: var(--c-accent); transition: all 0.3s; } .tool-btn:hover { background-color: #fcf6d7da; cursor: pointer; } .add-edition-btn { display: flex; align-items: center; justify-content: center; gap: .6rem; padding: 1.2rem 1.6rem; font-size: 1.6rem; background: transparent; border: 1px solid var(--c-accent-hover); border: none; color: var(--c-accent-hover); transition: 0.3s all; border-radius: 1rem; cursor: pointer; } .add-edition-btn:hover { background-color: #fcf6d7da; } .close-modal { position: absolute; top: 1%; right: 2%; display: flex; align-items: center; justify-content: center; font-size: 3.5rem; background-color: transparent; color: var(--c-neutral-950); border: none; cursor: pointer; } .close-modal:hover { color: var(--c-950-hover); } .icon-add, .icon-arrow, .icon-toggle { font-size: 2.4rem; font-weight: 600; } /* STYLES FOR TYPOGRAPHY */ /* Base HTML Elements - Theme-controlled */ h1 { color: var(--h1-color); font-family: var(--h1-font); font-size: var(--h1-font-size); font-weight: var(--h1-font-weight); text-transform: var(--h1-transform); line-height: 1.5; margin: 0; margin-bottom: 1.8rem; letter-spacing: 0.02%; } h2 { color: var(--h2-color); font-family: var(--h2-font); font-size: var(--h2-font-size); font-weight: var(--h2-font-weight); text-transform: var(--h2-transform); line-height: 1.5; margin-bottom: 1rem; } h3 { color: var(--h3-color); font-family: var(--h3-font); font-size: var(--h3-font-size); font-weight: var(--h3-font-weight); text-transform: var(--h3-transform); line-height: 1.5; text-align: left; margin-bottom: 1rem; } h4 { color: var(--h4-color); font-family: var(--h4-font); font-size: var(--h4-font-size); font-weight: var(--h4-font-weight); text-transform: var(--h4-transform); line-height: 1.5; margin-bottom: 1rem; } h5 { color: var(--h5-color); font-family: var(--h5-font); font-size: var(--h5-font-size); font-weight: var(--h5-font-weight); text-transform: var(--h5-transform); line-height: 1.5; margin-bottom: 1rem; } p { color: var(--paragraph-color); font-family: var(--paragraph-font); font-size: var(--paragraph-font-size); font-weight: var(--paragraph-font-weight); line-height: 1.5; margin-bottom: 1.4rem; } /* Links inherit paragraph font by default */ a { font-family: var(--paragraph-font); } /* Exclusions - Elements that should NOT use typography theme settings */ .series-name, .edition-name { font-family: inherit !important; color: inherit !important; font-size: inherit !important; font-weight: inherit !important; text-transform: inherit !important; } /* Legacy Classes - Kept for backwards compatibility */ .heading-primary { color: var(--h1-color); font-family: var(--h1-font); font-weight: var(--h1-font-weight); text-transform: var(--h1-transform); font-size: 5.8rem; letter-spacing: 0.02%; margin: 0; margin-bottom: 1.8rem; } .heading-secondary { color: var(--h2-color); font-family: var(--h2-font); font-size: var(--h2-font-size); font-weight: var(--h2-font-weight); text-transform: var(--h2-transform); margin-bottom: 1rem; } .heading-tertiary { color: var(--h3-color); font-family: var(--h3-font); font-size: var(--h3-font-size); font-weight: var(--h3-font-weight); text-transform: var(--h3-transform); text-align: left; margin-bottom: 1rem; } .paragraph { color: var(--paragraph-color); font-family: var(--paragraph-font); font-size: var(--paragraph-font-size); font-weight: var(--paragraph-font-weight); margin-bottom: 1.4rem; } .title-italic { font-family: var(--font-baskervville); font-weight: 200; font-style: italic; } .title-underline { position: relative; font-weight: 500; } .title-underline::after { content: ''; width: 100%; height: 2px; background-color: #0C111D; position: absolute; bottom: 0; left: 0; } .nav-link { /* Theme settings variables */ background: var(--nav-link-bg); color: var(--nav-link-color); font-family: var(--nav-link-font); font-size: var(--nav-link-font-size); font-weight: var(--nav-link-font-weight); border: var(--nav-link-border); border-radius: var(--nav-link-radius); padding: var(--nav-link-padding); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Fixed properties */ position: relative; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; margin-left: 0; backdrop-filter: blur(10px); } .nav-link ion-icon { font-size: 1.8rem; color: var(--nav-link-color); opacity: 0.7; transition: all 0.3s ease; } .nav-link:hover { background: var(--nav-link-hover-bg); color: var(--nav-link-hover-color); border: var(--nav-link-hover-border); } .nav-link:hover ion-icon { color: var(--nav-link-hover-color); opacity: 1; } .nav-link:focus { outline: 2px solid rgba(14, 112, 144, 0.3); outline-offset: 2px; } /* Additional */ .hero-text__wrapper .paragraph{ color: #f2f2f2; text-shadow: 0 3px 5px rgba(0, 0, 0, 0.6); } .collection-header .heading-secondary { margin-bottom: 0; } .registered-label { position: absolute; font-size: 1.4rem; color:#475467; font-weight: 600; bottom: 5%; left: 50%; transform: translate(-50%); background-color: #d3f8e5; padding: 1rem 2rem; border-radius: 0.3rem; } /* When registered-label is inside event-card-actions, remove absolute positioning */ .event-card-actions .registered-label { position: static; transform: none; bottom: auto; left: auto; } /* Cancelled registration label (light red variant) */ .cancelled-label { position: absolute; font-size: 1.4rem; color: #dc2626; font-weight: 600; bottom: 5%; left: 50%; transform: translate(-50%); background-color: #fee2e2; padding: 1rem 2rem; border-radius: 0.3rem; } /* When cancelled-label is inside event-card-actions, remove absolute positioning */ .event-card-actions .cancelled-label { position: static; transform: none; bottom: auto; left: auto; } .event-span { text-transform: uppercase; color: #7a8697; font-size: 1.2rem; } /* ==================================================== SIMPLE FORM STYLES - Based on Calendar Forms Theme-overridable, No fancy effects ==================================================== */ :root { /* Theme-overridable variables */ --form-primary: #3d5a80; --form-primary-hover: #2c4a6e; --form-text: #33475b; --form-text-light: #7c98b6; --form-border: #cbd6e2; --form-border-hover: #99acc2; --form-bg: #ffffff; --form-bg-light: #f5f8fa; --form-overlay: rgba(41, 50, 65, 0.5); --form-danger: #dc2626; --form-danger-hover: #b91c1c; } /* ==================================================== MODAL OVERLAY - Mobile: Bottom, Desktop: Center ==================================================== */ .modal-basic { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: var(--form-overlay); z-index: 1111; display: flex; align-items: flex-end; /* Mobile: stick to bottom */ justify-content: center; } /* ==================================================== MODAL CONTENT - Mobile First ==================================================== */ .modal-content { position: relative; background: var(--form-bg); width: 100%; max-width: 100%; max-height: 85vh; overflow-y: auto; overflow-x: hidden; padding: 0; /* No padding on container - add to inner content */ border-radius: 20px 20px 0 0; /* Mobile: rounded top only */ border: none; } /* Inner content wrapper with padding (scrollbar stays right) */ .modal-content > * { padding: 2rem 2rem; /* Smaller padding for mobile */ } .modal-content > .close-modal { padding: 0; /* No padding on close button */ } /* Close Button - Fixed position, no padding affect */ .close-modal { position: fixed; /* Fixed so padding doesn't affect it */ top: 1rem; right: 1rem; background: rgba(255, 255, 255, 0.9); border: none; border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; font-size: 2.4rem; color: var(--form-text-light); cursor: pointer; transition: color 0.2s, background-color 0.2s; z-index: 10; } .close-modal:hover { color: var(--form-text); background: rgba(255, 255, 255, 1); } /* ==================================================== FORM STRUCTURE ==================================================== */ .form-basic { width: 100%; display: flex; flex-direction: column; gap: 2rem; } .heading-tertiary { font-size: 1.8rem; font-weight: 600; color: var(--form-text); margin: 0 0 0.5rem 0; } .paragraph { font-size: 1.4rem; color: var(--form-text-light); margin: 0 0 2rem 0; line-height: 1.5; } .form-fields__wrapper { display: flex; flex-direction: column; gap: 2rem; width: 100%; } /* ==================================================== LABELS & INPUTS - Exactly Like Calendar ==================================================== */ .label { display: block; font-size: 1.3rem; font-weight: 500; color: var(--form-text); margin-bottom: 0.6rem; } .input, .textarea, .select { width: 100%; padding: 1rem 1.2rem; border: 1px solid var(--form-border); border-radius: 6px; font-size: 1.4rem; color: var(--form-text); background: var(--form-bg); font-family: inherit; transition: border-color 0.2s; } .input:focus, .textarea:focus, .select:focus { outline: none; border-color: var(--form-primary); } .input:hover, .textarea:hover, .select:hover { border-color: var(--form-border-hover); } .textarea { min-height: 100px; resize: vertical; line-height: 1.6; } .input[type="hidden"] { display: none; } /* ==================================================== BUTTONS - Simple, No Transforms ==================================================== */ .submit-btn { width: 100%; padding: 1.2rem 2.4rem; font-size: 1.4rem; font-weight: 500; color: white; background: var(--form-primary); border: none; border-radius: 6px; cursor: pointer; transition: background-color 0.2s; margin-top: 1rem; } .submit-btn:hover { background: var(--form-primary-hover); } .submit-btn:disabled { background: var(--form-text-light); cursor: not-allowed; opacity: 0.6; } /* Danger Button (Delete, Cancel, etc.) */ .submit-btn.danger, .btn-danger { background: var(--form-danger); } .submit-btn.danger:hover, .btn-danger:hover { background: var(--form-danger-hover); } /* Secondary Button */ .btn-secondary { background: var(--form-bg-light); color: var(--form-text); border: 1px solid var(--form-border); } .btn-secondary:hover { background: #eaf0f6; } /* ==================================================== SPECIFIC MODAL SIZES ==================================================== */ /* Registration Modal - Compact */ #register-popup .modal-content { max-width: 450px; padding: 3.5rem; } #register-popup .form-fields__wrapper { gap: 2rem; } /* Delete/Associate/Cancel - Compact */ #delete-popup .modal-content, #associate-popup .modal-content, #cancel-registration-popup .modal-content { max-width: 450px; padding: 3rem; } #delete-popup .heading-tertiary, #associate-popup .heading-tertiary { text-align: center; } /* Admin Forms - Two Column on Desktop */ #edit-popup .modal-content, #create-popup .modal-content { max-width: 900px; width: 95%; } /* ==================================================== TABLET (768px+) - Centered Modal ==================================================== */ @media (min-width: 768px) { .modal-basic { align-items: center; /* Center on desktop */ } .modal-content { width: 90%; max-width: 500px; max-height: 90vh; border-radius: 12px; /* All corners rounded */ padding: 3rem; /* Restore padding on desktop */ } /* Reset inner content padding */ .modal-content > * { padding: 0; } /* Inputs full width on desktop */ .input, .textarea, .select, .submit-btn { width: 100% !important; margin: 0 !important; } .label { width: 100%; margin: 0; } /* Close button */ .close-modal { position: absolute; top: 1.5rem; right: 1.5rem; } } /* ==================================================== DESKTOP (1024px+) - Admin Forms ==================================================== */ @media (min-width: 1024px) { /* Admin forms: Two-column layout */ #edit-popup .form-fields__wrapper, #create-popup .form-fields__wrapper { flex-direction: row; gap: 3rem; } .form-column { flex: 1; display: flex; flex-direction: column; gap: 2rem; } .form-column:first-child { flex: 1.1; } /* Datetime groups */ .datetime-group { display: flex; flex-direction: column; gap: 1.5rem; } .datetime-row { display: flex !important; gap: 1.5rem; } .datetime-field { flex: 1; display: flex; flex-direction: column; gap: 0.6rem; } } @media (min-width: 1440px) { #edit-popup .modal-content, #create-popup .modal-content { max-width: 1100px; } } /* ==================================================== MOBILE - Full Width Bottom Sheet ==================================================== */ @media (max-width: 767px) { .modal-basic { align-items: flex-end; /* Stick to bottom */ } .modal-content { width: 100%; max-width: 100%; max-height: 85vh; border-radius: 20px 20px 0 0; padding: 0; /* No padding on container for scrollbar */ } /* Inner content gets padding */ .modal-content > * { padding-left: 1.5rem; padding-right: 1.5rem; padding-top: 1.5rem; padding-bottom: 1.5rem; } .modal-content > .close-modal { padding: 0; /* Close button no padding */ } /* Form takes full width */ .form-basic, .form-fields__wrapper { width: 100%; padding: 0; } /* ALL inputs exactly same width - 95% of container */ .input, .textarea, .select, .submit-btn { width: 95% !important; max-width: 95% !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box; } /* Labels align with inputs */ .label { width: 95%; margin-left: auto; margin-right: auto; padding-left: 0; } /* Touch-friendly sizes */ .input, .textarea, .select { font-size: 16px; /* Prevent iOS zoom */ min-height: 48px; } .submit-btn { min-height: 48px; } /* Close button positioning on mobile */ .close-modal { top: 1rem; right: 1rem; } } /* ==================================================== IMAGE PREVIEW ==================================================== */ .image-preview { margin-top: 1rem; padding: 1.5rem; background: var(--form-bg-light); border-radius: 8px; border: 1px solid var(--form-border); } .image-preview img { max-width: 100%; border-radius: 6px; } /* ==================================================== SERIES INPUT ==================================================== */ .series-input { padding: 1.5rem; background: var(--form-bg-light); border-radius: 8px; border: 1px solid var(--form-border); margin-bottom: 1rem; } .series-input .label { font-size: 1.2rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; } #series_name { font-weight: 600; } /* ==================================================== SCROLLBAR ==================================================== */ .modal-content::-webkit-scrollbar { width: 8px; } .modal-content::-webkit-scrollbar-track { background: var(--form-bg-light); } .modal-content::-webkit-scrollbar-thumb { background: var(--form-border); border-radius: 4px; } /* STYLES FOR EVENT CARDS AND CONTAINERS */ /* Testing hs watch functionality - safe test comment */ #user-events-output { display: flex; flex-wrap: wrap; padding: 40px 0; gap: 35px; } /* Container for all event series */ .events-wrapper { display: flex; flex-direction: column; gap: 9.6rem; } .series-badge { /* Theme settings variables */ background: var(--series-badge-bg); color: var(--series-badge-color); font-family: var(--series-badge-font); font-size: var(--series-badge-font-size); font-weight: var(--series-badge-font-weight); border-radius: var(--series-badge-border-radius); padding: var(--series-badge-padding); /* Fixed properties */ margin-right: 1.6rem; } .edition-badge { /* Theme settings variables */ background: var(--edition-badge-bg); color: var(--edition-badge-color); font-family: var(--edition-badge-font); font-size: var(--edition-badge-font-size); font-weight: var(--edition-badge-font-weight); border-radius: var(--edition-badge-border-radius); padding: var(--edition-badge-padding); /* Fixed properties */ margin-right: 1.6rem; } /* Container for cards only (layout) */ .cards-wrapper { /* Theme settings variables */ justify-content: var(--event-card-alignment); /* Fixed properties */ display: flex; flex-wrap: wrap; align-items: stretch; gap: 3.2rem; padding: 2.2rem; width: 100%; position: relative; /* Dynamic accordion animation - no fixed height */ opacity: 1; transform: translateY(0); transition: height 0.3s ease, opacity 0.2s ease, transform 0.3s ease, padding 0.3s ease; overflow: hidden; } /* Accordion collapsed state - dynamic height */ .cards-wrapper.hidden { display: flex !important; visibility: visible !important; height: 0 !important; opacity: 0; transform: translateY(-10px); padding: 0 2.2rem; } .collection-header { /* Theme settings variables */ border: var(--collection-header-border); box-shadow: var(--collection-header-shadow); padding: var(--collection-header-padding); /* Fixed properties */ display: flex; width: 90%; justify-content: space-between; align-items: center; margin: 0 auto; } .collection-header:hover { cursor: pointer; } .collection-header h2 { display: flex; align-items: center; gap: 1rem; } .series-name, .edition-name { font-weight: 700; color: #1f2937; } .collection-header div { display: flex; align-items: center; gap: 2rem; } /* Chevron rotation animation */ .icon-toggle { transition: transform 0.3s ease; } .event-card { /* Theme settings variables */ width: var(--event-card-width); background: var(--event-card-bg); border-radius: var(--event-card-border-radius); box-shadow: var(--event-card-shadow); padding: var(--event-card-padding); /* Fixed properties */ display: flex; flex-direction: column; position: relative; scroll-snap-align: start; transition: all 0.3s ease; border: 1px solid rgba(234, 236, 240, 0.3); } .event-card:hover { box-shadow: var(--event-card-hover-shadow); } .event-img { /* Theme settings variables - dynamic based on card width */ width: 100%; height: var(--event-card-img-height); border-radius: var(--event-card-img-border-radius); /* Fixed properties */ object-fit: cover; object-position: center; display: block; margin-bottom: 1.6rem; filter: brightness(105%) contrast(70%); } /* ===== PROGRESSIVE IMAGE LOADING SYSTEM ===== */ .event-img-container { /* Theme settings variables - dynamic based on card width */ width: 100%; height: var(--event-card-img-height); border-radius: var(--event-card-img-border-radius); /* Fixed properties */ position: relative; margin-bottom: 1.6rem; overflow: hidden; } .event-img-placeholder { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #f5576c 75%, #4facfe 100%); background-size: 300% 300%; animation: gradient-shift 6s ease infinite; border-radius: var(--event-card-img-border-radius); display: flex; align-items: center; justify-content: center; opacity: 1; transition: opacity 0.6s ease; } .event-img-placeholder::before { content: "📸"; font-size: 3rem; opacity: 0.7; color: white; text-shadow: 0 2px 4px rgba(0,0,0,0.3); } .event-img-progressive { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: var(--event-card-img-border-radius); filter: brightness(105%) contrast(70%); opacity: 0; transition: opacity 0.6s ease; } .event-img-progressive.loaded { opacity: 1; } .event-img-container.image-loaded .event-img-placeholder { opacity: 0; } /* Gradient animation */ @keyframes gradient-shift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* Alternative placeholder styles for variety */ .event-img-placeholder.style-1 { background: linear-gradient(45deg, #ff9a9e 0%, #fecfef 50%, #fecfef 100%); } .event-img-placeholder.style-2 { background: linear-gradient(45deg, #a8edea 0%, #fed6e3 100%); } .event-img-placeholder.style-3 { background: linear-gradient(45deg, #d299c2 0%, #fef9d7 100%); } .event-img-placeholder.style-4 { background: linear-gradient(45deg, #89f7fe 0%, #66a6ff 100%); } /* Location + Date span */ .event-data-wrapper { display: flex; padding: 0 0 1rem 0; width: 100%; justify-content: space-between; align-items: center; } /* Title + Description */ .event-card__text-wrapper { display: flex; flex-direction: column; justify-content: space-between; align-items: start; padding: 0; } /* Admin PassKit Info Display */ .admin-passkit-info { margin-top: 1.6rem; padding: 1.5rem; background: #f8f9fa; border-radius: 1rem; width: 100%; } .passkit-field { font-size: 1.3rem; margin-bottom: 0.5rem; color: #6c757d; line-height: 1.4; } .passkit-field:last-child { margin-bottom: 0; } .passkit-field strong { color: #495057; font-weight: 600; } /* Admin tools (associate/edit/delete) */ .event-tools-wrapper { position: absolute; bottom: 2rem; right: 2rem; display: flex; align-items: center; justify-content: flex-end; gap: 1rem; padding: 0; } /* Mobile optimizations moved to media-queries.css */ /* ==================================== 🎯 CAPACITY MANAGEMENT STYLES ==================================== */ /* Event full label - replaces register button when at capacity */ .event-full-label { position: absolute; bottom: 5%; left: 50%; transform: translate(-50%); display: inline-flex; align-items: center; gap: 0.5rem; padding: 1rem 2rem; background-color: #ffffff; /* box-shadow: 0 0 5px 2px rgba(111, 107, 107, 0.31); */ color: #475467; color: red; border: none; border-radius: 0.3rem; font-weight: 600; font-size: 1.6rem; text-decoration: none; cursor: not-allowed; opacity: 1 !important; transition: all 0.3s ease; } /* Capacity status indicators for admin */ .capacity-status.at-capacity { background-color: rgba(231, 76, 60, 0.1); border-left: 3px solid #e74c3c; padding-left: 0.5rem; } .capacity-status.near-capacity { background-color: rgba(243, 156, 18, 0.1); border-left: 3px solid #f39c12; padding-left: 0.5rem; } /* Field description styling for capacity input */ .field-description { display: block; font-size: 0.8rem; color: #666; margin-top: 0.25rem; font-style: italic; } /* Event card capacity indicators for public view */ .event-card.near-capacity { border: 2px solid #f39c12; background: linear-gradient(to bottom, #fff, #fef9e7); } .event-card.at-capacity { border: 2px solid #e74c3c; background: linear-gradient(to bottom, #fff, #fdf2f2); } .event-card.event-full { box-shadow: none; opacity: 0.75 !important; } .event-card.event-full:hover { transform: none; box-shadow: none; opacity: 0.65; } /* Keep the "Fully Booked" badge bright even when the card is dimmed */ .event-card.event-full .event-full-label { opacity: 1 !important; } .capacity-warning { background: linear-gradient(135deg, #f39c12, #e67e22); color: white; padding: 0.3rem 0.8rem; border-radius: 15px; font-size: 0.75rem; font-weight: 600; margin-top: 0.5rem; display: inline-block; box-shadow: 0 2px 4px rgba(243, 156, 18, 0.3); } /* Admin capacity info styling */ .admin-passkit-info .passkit-field { margin-bottom: 0.5rem; } .admin-passkit-info .capacity-info { font-family: 'Courier New', monospace; background: rgba(52, 152, 219, 0.1); padding: 0.2rem 0.4rem; border-radius: 4px; } .admin-passkit-info .registration-count { font-family: 'Courier New', monospace; font-weight: bold; } /* Admin hero actions styling */ .admin-hero-actions { display: flex; gap: 1rem; align-items: center; } /* _variables.css – literal copies of your current palette, fonts & radii */ :root { /* colours */ --c-primary: #0E7090; --c-primary-hover: #155B75; --c-light-teal: #B8E0EA; --c-cyan-light: #ECFDFF; --c-secondary: #c6dbdd19; --c-accent: #F4A461; --c-accent-hover: #e58e47; --c-danger: #bf3b13; --c-danger-hover: #9d3414; --c-neutral-0: #ffffff; --c-0-hover: #f5f5f5; --c-neutral-900: #000000; --c-neutral-950: #0C111D; --c-950-hover: #0c111dd4; /* fonts */ --ff-manrope: "Manrope", sans-serif; --ff-inter: "Inter", sans-serif; --ff-baskervville: "Baskervville", serif; /* radii */ --radii-pill: 5rem; /* used on buttons */ /* Register Button - Theme Settings */ --register-btn-bg: rgba(255, 255, 255, 1.0); --register-btn-color: #405d64; --register-btn-font: "Inter", var(--ff-inter); --register-btn-font-size: 14px; --register-btn-font-weight: 600; --register-btn-border: 1px solid rgba(64, 93, 100, 1.0); --register-btn-radius: 50px; --register-btn-padding: 10px 20px 10px 20px; /* Register Button - Hover States */ --register-btn-hover-color: rgba(52, 58, 66, 1.0); --register-btn-hover-bg: rgba(205, 232, 239, 0.85); --register-btn-hover-border: 1px solid rgba(52, 58, 66, 1.0); /* Form Submit Button - Theme Settings */ --form-btn-bg: rgba(0, 0, 0, 1.0); --form-btn-color: #ffffff; --form-btn-font: "Inter", var(--ff-inter); --form-btn-font-size: 18px; --form-btn-font-weight: 600; --form-btn-border: 1.5px solid rgba(0, 0, 0, 1.0); --form-btn-radius: 50px; --form-btn-padding: 16px 22px 16px 22px; /* Form Submit Button - Hover States */ --form-btn-hover-color: rgba(255, 255, 255, 1.0); --form-btn-hover-bg: rgba(12, 17, 29, 0.83); --form-btn-hover-border: 1.5px solid rgba(12, 17, 29, 1.0); /* View Details Button - Theme Settings */ --view-details-btn-bg: rgba(255, 255, 255, 0.0); --view-details-btn-color: #1f222d; --view-details-btn-font: "Inter", var(--ff-inter); --view-details-btn-font-size: 14px; --view-details-btn-font-weight: 500; --view-details-btn-border-bottom: 1px solid rgba(31, 34, 45, 0.0); --view-details-btn-padding: 6px 12px 6px 12px; /* View Details Button - Hover States */ --view-details-btn-hover-color: rgba(36, 39, 52, 1.0); --view-details-btn-hover-border-color: rgba(36, 39, 52, 1.0); /* Typography - H1 */ --h1-color: #0C111D; --h1-font: "Manrope", sans-serif; --h1-font-size: 58px; --h1-font-weight: 700; --h1-transform: none; /* Typography - H2 */ --h2-color: #0C111D; --h2-font: "Manrope", sans-serif; --h2-font-size: 26px; --h2-font-weight: 700; --h2-transform: none; /* Typography - H3 */ --h3-color: #0C111D; --h3-font: "Manrope", sans-serif; --h3-font-size: 18px; --h3-font-weight: 700; --h3-transform: none; /* Typography - H4 */ --h4-color: #0C111D; --h4-font: "Manrope", sans-serif; --h4-font-size: 16px; --h4-font-weight: 700; --h4-transform: none; /* Typography - H5 */ --h5-color: #0C111D; --h5-font: "Manrope", sans-serif; --h5-font-size: 14px; --h5-font-weight: 700; --h5-transform: none; /* Typography - Paragraphs */ --paragraph-color: #475467; --paragraph-font: "Manrope", sans-serif; --paragraph-font-size: 16px; --paragraph-font-weight: 400; /* Event Card - Theme Settings */ --event-card-alignment: start; --event-card-width: 520px; --event-card-bg: rgba(255, 255, 255, 1.0); --event-card-border-radius: 8px; --event-card-shadow: 0px 4px 6px rgba(0, 0, 0, 0.05); --event-card-hover-shadow: 0px 8px 25px rgba(0, 0, 0, 0.06); --event-card-button-direction: row; --event-card-button-gap: 1rem; --event-card-padding: 20px 20px 95px 20px; --event-card-img-height: 188.0px; --event-card-img-border-radius: 8px; /* Event Collections - Collection Header */ --collection-header-border: 1.2px solid rgba(234, 236, 240, 1.0); --collection-header-shadow: 0px 0px 0px rgba(0, 0, 0, 0.0); --collection-header-padding: 5px 32px; /* Event Collections - Series Badge */ --series-badge-bg: rgba(227, 254, 236, 1.0); --series-badge-color: rgba(31, 41, 55, 1.0); --series-badge-font: "Inter", sans-serif; --series-badge-font-size: 12px; --series-badge-font-weight: 200; --series-badge-border-radius: 5px; --series-badge-padding: 6px 10px; /* Event Collections - Edition Badge */ --edition-badge-bg: rgba(203, 241, 252, 1.0); --edition-badge-color: rgba(31, 41, 55, 1.0); --edition-badge-font: "Inter", sans-serif; --edition-badge-font-size: 12px; --edition-badge-font-weight: 200; --edition-badge-border-radius: 5px; --edition-badge-padding: 6px 10px; /* Global Page Settings - Theme Settings */ --page-bg: rgba(249, 252, 255, 1.0); /* Header Styles - Theme Settings */ --header-bg: rgba(255, 255, 255, 0.85); --header-padding-vertical: 12px; /* Navigation Links - Theme Settings */ --nav-link-bg: rgba(255, 255, 255, 0.05); --nav-link-color: #374151; --nav-link-font: "Manrope", sans-serif; --nav-link-font-size: 15px; --nav-link-font-weight: 500; --nav-link-border: 1px solid rgba(14, 112, 144, 0.1); --nav-link-radius: 8px; --nav-link-padding: 10px 16px 10px 16px; /* Navigation Links - Hover States */ --nav-link-hover-color: rgba(14, 112, 144, 1.0); --nav-link-hover-bg: rgba(14, 112, 144, 0.1); --nav-link-hover-border: 1px solid rgba(14, 112, 144, 0.2); /* (spacing & font-sizes stay as px for now — safer) */ } *, *:before, *:after { box-sizing: border-box; } /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ /* Document ========================================================================== */ /** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font size after orientation changes in iOS. */ html { line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ } /* Sections ========================================================================== */ /** * Remove the margin in all browsers. */ body { margin: 0; } /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; margin: 0.67em 0; } /* Grouping content ========================================================================== */ /** * Add the correct box sizing in Firefox. */ hr { box-sizing: content-box; height: 0; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /* Text-level semantics ========================================================================== */ /** * 1. Remove the bottom border in Chrome 57- * 2. Add the correct text decoration in Chrome, Edge, Opera, and Safari. */ abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ text-decoration: underline dotted; /* 2 */ } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * Add the correct font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* Forms ========================================================================== */ /** * 1. Change the font styles in all browsers. * 2. Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ } /** * Remove the inheritance of text transform in Edge and Firefox. * 1. Remove the inheritance of text transform in Firefox. */ button, select { /* 1 */ text-transform: none; } /** * Correct the inability to style clickable types in iOS and Safari. */ button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } /** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } /** * Correct the padding in Firefox. */ fieldset { padding: 0.35em 0.75em 0.625em; } /** * Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers. */ legend { padding: 0; } /** * Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { vertical-align: baseline; } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ [type="search"] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** * Remove the inner padding in Chrome and Safari on macOS. */ [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Interactive ========================================================================== */ /* * Add the correct display in Edge and Firefox. */ details { display: block; } /* * Add the correct display in all browsers. */ summary { display: list-item; } /* =================================================================== * CONSOLIDATED MEDIA QUERIES * All responsive styles organized by breakpoint * ================================================================= */ /* =================================================================== * LARGE SCREENS - 1200px and below * ================================================================= */ @media (max-width: 1200px) { /* Modal adjustments for large screens */ .modal-content { width: 95%; max-width: 100rem; padding: 2rem; } } /* =================================================================== * MEDIUM SCREENS - 900px and below * ================================================================= */ @media (max-width: 900px) { /* Modal adjustments for medium screens */ .modal-content { width: 95%; max-width: 80rem; padding: 1.8rem; } /* Form column adjustments */ .form-column:first-child { width: 60%; } .form-column:last-child { width: 40%; } } /* =================================================================== * TABLET NAVIGATION - 1024px and below * Nav links collapse to hamburger/slide-out menu * ================================================================= */ @media (max-width: 1024px) { /* Show hamburger, hide desktop nav and auth buttons */ .mobile-menu-toggle { display: block; /* Override the opacity-0 animation start so it's immediately visible */ opacity: 1 !important; transform: none !important; animation: none !important; } .main-nav > div:first-child { display: none; } #auth-buttons #login-btn { display: none; } #auth-buttons #user-info { display: none !important; } } /* =================================================================== * TABLET/SMALL SCREENS - 768px and below * ================================================================= */ @media (max-width: 768px) { /* HEADER */ .header { padding: var(--header-padding-vertical) 20px; } .logo { height: 4rem; } /* TYPOGRAPHY */ .heading-primary { font-size: 5.8rem; line-height: 1.1; } .heading-secondary { font-size: 1.8rem; line-height: 1.2; margin-bottom: 0.8rem; } .heading-tertiary { font-size: 1.6rem; line-height: 1.3; margin-bottom: 0.8rem; } .paragraph { font-size: 1.4rem; line-height: 1.4; margin-bottom: 1rem; } .nav-link { font-size: 1.4rem; } /* HERO SECTION */ .hero-text__wrapper { width: 90vw; padding: 16px 20px; text-align: center; } .hero-btn__wrapper { flex-direction: column; gap: 12px; width: 100%; } .cta-btn { width: 100%; justify-content: center; } /* SECTIONS */ .section { padding: 48px 20px; } /* EVENT CARDS */ .events-wrapper { max-width: 100%; padding: 0; } .cards-wrapper { padding: 0 20px; margin: 0 auto; } .event-card { margin: 0 auto; max-width: 100%; } /* EVENT CARDS SPECIFIC STYLES */ .event-card { width: 97%; margin: 0 auto; } .event-card .card-image { height: 200px; } .event-card .card-content { padding: 20px; } .event-card .card-title { font-size: 1.8rem; margin-bottom: 10px; } .event-card .card-description { font-size: 1.4rem; margin-bottom: 15px; } .event-card .card-details { font-size: 1.2rem; } .event-card .card-actions { flex-direction: column; gap: 8px; } .event-card .btn { width: 100%; padding: 12px; font-size: 1.4rem; } /* COLLECTION HEADER STYLES */ .collection-header { width: 100%; padding: 0.5rem !important; } .collection-header h2 { flex-direction: column; align-items: start; gap: .5rem; } .add-edition-btn { padding: .2rem; } .collection-header div { gap: 0 !important; } /* Admin Hero Mobile Layout */ .admin-hero { margin-top: 5rem; margin-bottom: 24px; padding: 16px; } .admin-hero-welcome { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 16px; } .admin-hero-title { font-size: 2.2rem; } .admin-hero-subtitle { font-size: 1.3rem; } .admin-hero-stats { gap: 8px; align-self: stretch; } .admin-stat-card { padding: 6px 8px; flex: 1; } .admin-stat-number { font-size: 1.4rem; } .admin-stat-label { font-size: 0.9rem; } .admin-hero-footer { flex-direction: column; gap: 12px; align-items: stretch; } .admin-hero-meta { justify-content: center; font-size: 1.1rem; } /* LOADING ANIMATIONS */ .events-loading { padding: 40px 20px; min-height: 300px; gap: 20px; } .loading-spinner { width: 50px; height: 50px; } .loading-text { font-size: 1.6rem; } .skeleton-cards { grid-template-columns: 1fr; padding: 0 20px; gap: 16px; } .admin-loading { padding: 40px 20px; min-height: 350px; gap: 24px; } .admin-loading-icon { width: 60px; height: 60px; } .admin-spinner-outer, .admin-spinner-inner { width: 60px; height: 60px; } .admin-spinner-inner { width: 45px; height: 45px; } .admin-loading-title { font-size: 2rem; } .admin-loading-subtitle { font-size: 1.4rem; } .admin-progress-bar { width: 150px; } .admin-skeleton-stats { grid-template-columns: 1fr; gap: 16px; } .admin-skeleton-controls { flex-direction: column; gap: 12px; } .admin-skeleton-button { width: 100%; } .admin-skeleton-row { grid-template-columns: 1fr 100px; gap: 12px; } /* FORMS */ .modal-content { width: 98% !important; max-width: 98% !important; padding: 1.5rem !important; } #delete-popup .modal-content, #associate-popup .modal-content { height: 40vh !important; width: 80% !important; padding: 1.5rem !important; } #delete-popup .form-basic, #associate-popup .form-basic { display: flex; align-items: center; justify-content: center; } #edit-popup .modal-content, #create-popup .modal-content { height: 100vh !important; /* ✅ Full height on mobile too */ width: 98% !important; /* Wider on mobile too */ padding: 1.5rem !important; align-items: flex-start !important; /* Align to top */ } .form-fields__wrapper { flex-direction: column !important; gap: 2rem !important; } /* ✅ Enhanced mobile spacing for edit/create forms */ #edit-popup .form-fields__wrapper, #create-popup .form-fields__wrapper { gap: 2.5rem !important; /* Slightly more space on mobile */ max-width: none !important; /* No width constraint on mobile */ } .form-column, .form-column:first-child, .form-column:last-child { width: 100% !important; gap: 2rem !important; } .form-column > div { padding: 0.8rem !important; } /* ✅ Enhanced mobile column styling for edit/create forms */ #edit-popup .form-column, #create-popup .form-column { gap: 2rem !important; /* Good spacing on mobile */ padding: 1rem !important; /* Less padding on mobile */ background: rgba(14, 112, 144, 0.01) !important; border-radius: 8px !important; } .form-basic { height: 100%; overflow-y: scroll; width: 95%; } /* ✅ General scrollbar styling for all forms on mobile */ .form-basic::-webkit-scrollbar { width: 6px; } .form-basic::-webkit-scrollbar-track { background: rgba(14, 112, 144, 0.05); border-radius: 3px; } .form-basic::-webkit-scrollbar-thumb { background: rgba(14, 112, 144, 0.25); border-radius: 3px; } /* ✅ Enhanced form styling for mobile edit/create modals */ #edit-popup .form-basic, #create-popup .form-basic { height: calc(100% - 2rem) !important; /* Account for reduced padding */ padding-top: 0.5rem !important; padding-right: 0.8rem !important; /* Space for scrollbar on mobile */ overflow-y: scroll !important; /* Always show scrollbar on mobile */ scrollbar-width: thin !important; /* Firefox: thin scrollbar */ } /* ✅ Mobile webkit scrollbar styling */ #edit-popup .form-basic::-webkit-scrollbar, #create-popup .form-basic::-webkit-scrollbar { width: 6px !important; /* Slightly thinner on mobile */ } #edit-popup .form-basic::-webkit-scrollbar-track, #create-popup .form-basic::-webkit-scrollbar-track { background: rgba(14, 112, 144, 0.05) !important; border-radius: 3px !important; } #edit-popup .form-basic::-webkit-scrollbar-thumb, #create-popup .form-basic::-webkit-scrollbar-thumb { background: rgba(14, 112, 144, 0.4) !important; /* Slightly more visible on mobile */ border-radius: 3px !important; } .input { font-size: 16px; padding: 12px 8px; width: 100%; box-sizing: border-box; } .textarea, textarea.input[name="edition_description"] { min-height: 100px !important; } .select { height: 4.5rem !important; } .submit-btn, .danger-btn, .success-btn { width: 100%; font-size: 1.6rem; padding: 14px 20px; margin: 16px auto 8px auto; } .close-modal { font-size: 3rem; top: 2%; right: 3%; } /* Stack date/time fields on mobile */ .datetime-row { flex-direction: column !important; gap: 1.2rem !important; } .datetime-field { width: 100% !important; } .datetime-field .input { font-size: 1.3rem !important; height: 3.8rem !important; } /* ✅ Mobile image preview styling */ .image-preview { margin-top: 0.5rem !important; padding: 0.8rem !important; } .image-preview img { max-width: 150px !important; /* Smaller on mobile */ max-height: 80px !important; } /* TOASTS */ .sandwich-popup { top: 10px; right: 10px; left: 10px; min-width: auto; max-width: none; transform: translateY(-120%); } .sandwich-popup.sandwich-show { transform: translateY(0); } /* ATTENDEE COMPONENTS */ .attendee-welcome { padding: 30px 20px; margin-bottom: 30px; } .attendee-welcome h2 { font-size: 2.2rem; margin-bottom: 10px; } .attendee-welcome p { font-size: 1.4rem; } .attendee-empty-state { padding: 60px 20px; min-height: 300px; } .empty-state-icon { font-size: 4.5rem; margin-bottom: 20px; } .attendee-empty-state .cta-btn { padding: 14px 28px; font-size: 1.4rem; } /* ACCESSIBILITY HELPERS */ .show-for-sr--mobile { border: 0 !important; clip: rect(0, 0, 0, 0) !important; height: 1px !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; white-space: nowrap !important; width: 1px !important; } /* FOOTER */ .footer { margin-top: 50px; padding: 36px 0 28px; } .footer__container { padding: 0 20px; gap: 22px; } .footer__social { gap: 18px; } .footer__social-link { width: 42px; height: 42px; } .footer__social-link ion-icon { font-size: 19px; } } /* =================================================================== * SMALL MOBILE SCREENS - 480px and below * ================================================================= */ @media (max-width: 480px) { /* HEADER */ .header { padding: var(--header-padding-vertical) 16px; } .logo { height: 3.5rem; } /* SECTIONS */ .section { padding: 32px 16px; } .cards-wrapper { padding: 0 16px; } .skeleton-cards { padding: 0 16px; } .events-loading { padding: 32px 16px; } .admin-loading { padding: 32px 16px; } /* TYPOGRAPHY */ .heading-secondary { font-size: 1.8rem; } .heading-tertiary { font-size: 1.4rem; } .paragraph { font-size: 1.3rem; } /* EVENT CARDS */ .event-card { width: 97%; } .event-card .card-image { height: 180px; } .event-card .card-content { padding: 16px; } .event-card .card-title { font-size: 1.6rem; margin-bottom: 8px; } .event-card .card-description { font-size: 1.3rem; margin-bottom: 12px; } .event-card .card-details { font-size: 1.1rem; } .event-card .btn { padding: 10px; font-size: 1.3rem; } /* ADMIN HERO ADJUSTMENTS */ .admin-hero .heading-secondary { font-size: 1.8rem; } /* FORMS */ .modal-content { width: 98% !important; max-width: 98% !important; padding: 1rem !important; } .form-fields__wrapper { gap: 1.5rem; } .form-column > div { padding: 0.6rem !important; } .form-basic { width: 100% !important; padding-top: 20px !important; } .input { font-size: 14px !important; padding: 10px 6px !important; } /* ATTENDEE COMPONENTS */ .attendee-welcome { padding: 24px 16px; margin-bottom: 24px; } .attendee-welcome h2 { font-size: 2rem; } .attendee-welcome p { font-size: 1.3rem; } .attendee-empty-state { padding: 48px 16px; min-height: 280px; } .empty-state-icon { font-size: 4rem; } /* FOOTER */ .footer { margin-top: 40px; padding: 32px 0 24px; } .footer__container { padding: 0 16px; gap: 20px; } .footer__social { gap: 16px; } .footer__social-link { width: 40px; height: 40px; } .footer__social-link ion-icon { font-size: 18px; } .footer__copyright p { font-size: 13px; } .footer__links { flex-direction: column; gap: 8px; font-size: 12px; } .footer__divider { display: none; } }