/* ===================================================================== modern-ui.css — Site-wide "refined polish" design layer --------------------------------------------------------------------- Loaded LAST (via header.ejs, which renders at the top of ) so it refines on top of every page's stylesheet without rewriting any of them. Rules: - Colours & themes are NOT changed. Everything reuses the existing CSS custom properties (brand gold #e4bc1c / #bf9d17, charcoal #1c1c1c) so both light and `body.dark-mode` adapt automatically. - No layout/behaviour changes — purely visual refinement (radii, shadows, spacing rhythm, typography, focus/hover micro-interactions). - Selectors stay targeted to the catalogued components to avoid specificity collisions and accidental breakage. ===================================================================== */ /* ============================= */ /* 1. DESIGN TOKENS (additive) */ /* ============================= */ :root { /* Unified elevation scale — soft, layered, modern */ --mu-shadow-sm: 0 1px 2px rgba(17, 17, 17, 0.04), 0 1px 3px rgba(17, 17, 17, 0.06); --mu-shadow-md: 0 2px 4px rgba(17, 17, 17, 0.04), 0 6px 16px rgba(17, 17, 17, 0.08); --mu-shadow-lg: 0 8px 24px rgba(17, 17, 17, 0.10), 0 16px 48px rgba(17, 17, 17, 0.10); --mu-shadow-xl: 0 12px 32px rgba(17, 17, 17, 0.14), 0 24px 64px rgba(17, 17, 17, 0.16); /* Brand-tinted focus ring (gold) */ --mu-ring: 0 0 0 3px rgba(228, 188, 28, 0.35); /* Unified corner radii */ --mu-radius-xs: 8px; --mu-radius: 12px; --mu-radius-lg: 16px; --mu-radius-pill: 999px; /* Motion */ --mu-ease: cubic-bezier(0.22, 0.61, 0.36, 1); --mu-dur: 0.22s; /* Hairline border that respects the theme */ --mu-border: 1px solid var(--border-subtle, #e3e3e3); } body.dark-mode { /* Deeper, softer shadows read better on dark surfaces */ --mu-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30), 0 1px 3px rgba(0, 0, 0, 0.35); --mu-shadow-md: 0 2px 6px rgba(0, 0, 0, 0.35), 0 8px 20px rgba(0, 0, 0, 0.45); --mu-shadow-lg: 0 10px 28px rgba(0, 0, 0, 0.50), 0 18px 52px rgba(0, 0, 0, 0.55); --mu-shadow-xl: 0 14px 36px rgba(0, 0, 0, 0.55), 0 26px 70px rgba(0, 0, 0, 0.60); --mu-ring: 0 0 0 3px rgba(253, 220, 92, 0.30); } /* ============================= */ /* 2. BASE / GLOBAL */ /* ============================= */ body { /* Modern UI font; Segoe UI kept as graceful fallback. Cinzel headings declare their own font-family and are intentionally left untouched. */ font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; line-height: 1.55; } /* Slightly tighter, more confident headings (font-family untouched) */ h1, h2, h3, h4, h5, h6 { letter-spacing: -0.01em; line-height: 1.2; } /* On-brand text selection */ ::selection { background: rgba(228, 188, 28, 0.30); color: inherit; } /* Accessible, on-brand keyboard focus ring (mouse clicks stay clean) */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: none; /* Ring follows each element's own border-radius, so shapes are preserved */ box-shadow: var(--mu-ring); } /* Subtle, themed custom scrollbars */ * { scrollbar-width: thin; scrollbar-color: var(--border-subtle, #cfcfcf) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-thumb { background: var(--border-subtle, #cfcfcf); border-radius: var(--mu-radius-pill); border: 2px solid transparent; background-clip: padding-box; } *::-webkit-scrollbar-thumb:hover { background: var(--text-secondary, #9a9a9a); background-clip: padding-box; } /* Smooth links */ a { transition: color var(--mu-dur) var(--mu-ease); } /* ============================= */ /* 3. BUTTONS (targeted) */ /* ============================= */ .add-to-cart-btn, .jackpot-add-to-cart-btn, .checkout-btn, .cart-checkout, .footer__form button, .answer-btn, .quantity-btn, .question-modal__cancel { border-radius: var(--mu-radius-xs); transition: background-color var(--mu-dur) var(--mu-ease), box-shadow var(--mu-dur) var(--mu-ease), transform var(--mu-dur) var(--mu-ease), border-color var(--mu-dur) var(--mu-ease); } /* Gold primary actions: gentle lift + soft shadow on hover */ .add-to-cart-btn:hover, .jackpot-add-to-cart-btn:hover, .checkout-btn:hover, .cart-checkout:hover, .footer__form button:hover { transform: translateY(-1px); box-shadow: var(--mu-shadow-md); } .add-to-cart-btn:active, .jackpot-add-to-cart-btn:active, .checkout-btn:active, .cart-checkout:active, .footer__form button:active, .answer-btn:active, .quantity-btn:active { transform: translateY(0); box-shadow: var(--mu-shadow-sm); } /* Never apply the lift to disabled / sold-out states */ .sold-out-btn, .add-to-cart-btn:disabled, .checkout-btn:disabled, button[disabled] { transform: none !important; box-shadow: none !important; } /* Circular quantity steppers keep their round shape, gain smooth motion */ .qty-btn { transition: opacity var(--mu-dur) var(--mu-ease), transform var(--mu-dur) var(--mu-ease), box-shadow var(--mu-dur) var(--mu-ease); } .qty-btn:hover { transform: translateY(-1px); box-shadow: var(--mu-shadow-sm); } .qty-btn:active { transform: translateY(0); } /* Hamburger menu — match the unified radius softly */ .header__tabsdropdown { transition: transform var(--mu-dur) var(--mu-ease), box-shadow var(--mu-dur) var(--mu-ease); } .header__tabsdropdown:hover { box-shadow: var(--mu-shadow-sm); } /* ============================= */ /* 4. CARDS / PANELS (targeted) */ /* ============================= */ .raffle-card, .jackpot-card, .competition-card, .cart-item, .login-container, .checkout-container, .panel-tabs-container, .dropdown-menu__section { border-radius: var(--mu-radius); transition: transform var(--mu-dur) var(--mu-ease), box-shadow var(--mu-dur) var(--mu-ease), border-color var(--mu-dur) var(--mu-ease); } /* Refined resting elevation. NOTE: we deliberately do NOT touch .raffle-card:hover / .jackpot-card:hover so the existing gold-glow hover treatment is preserved untouched. */ .cart-item { box-shadow: var(--mu-shadow-sm); } .login-container, .checkout-container { box-shadow: var(--mu-shadow-lg); border-radius: var(--mu-radius-lg); } .panel-tabs-container { box-shadow: var(--mu-shadow-sm); } .cart-item:hover { box-shadow: var(--mu-shadow-md); transform: translateY(-1px); } /* --------------------------------------------------------------------- Stop raffle / competition cards from resizing on hover. Two independent causes were making the card "extend": (a) the card border grows 1px -> 4px on hover (border-box + auto height => ~6px taller); (b) the footer swaps a taller "buy controls" block in place of the resting price text, growing the card downward. --------------------------------------------------------------------- */ /* (a) Compensate the padding by the 3px the border gains, so edge-to-content distance and overall height stay identical. */ .raffle-card:hover, .raffle-card.active, .competition-card:hover, .competition-card.active { padding: calc(0.5rem - 3px); } /* (b) Stack the default + hover footer states in a single grid cell so the footer always reserves the TALLER of the two, then reveal with visibility/opacity instead of display:none — the box never changes size. */ /* Raffle: stacking container is .raffle-footer-content */ .raffle-footer-content { display: grid; align-items: center; } .raffle-footer-content > .raffle-footer-default, .raffle-footer-content > .raffle-footer-hover { grid-area: 1 / 1; /* occupy the same cell -> height = max(default, hover) */ width: 100%; } /* Competition: default/hover live directly inside .competition-footer (alongside .input-error-wrapper, which stays on its own row below). */ .competition-footer { display: grid; align-items: center; } .competition-footer > .competition-footer-default, .competition-footer > .competition-footer-hover { grid-area: 1 / 1; width: 100%; } .competition-footer > .input-error-wrapper { grid-area: 2 / 1; } /* Keep the hover block in layout at rest (so its height is reserved) but hidden + non-interactive until hover. */ .raffle-footer-hover, .competition-footer-hover { display: flex; flex-direction: column; justify-content: center; gap: 8px; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity 0.18s ease, visibility 0.18s ease; } .raffle-card:hover .raffle-footer-hover, .raffle-card.active .raffle-footer-hover, .competition-card:hover .competition-footer-hover, .competition-card.active .competition-footer-hover { visibility: visible; opacity: 1; pointer-events: auto; } /* The default block stays in layout on hover too (override the original display:none) but is simply hidden — so the reserved height never drops. */ .raffle-card:hover .raffle-footer-default, .raffle-card.active .raffle-footer-default, .competition-card:hover .competition-footer-default, .competition-card.active .competition-footer-default { display: block; visibility: hidden; opacity: 0; pointer-events: none; } /* ============================= */ /* 5. INPUTS / SELECTS / AREAS */ /* ============================= */ .login-form input[type="email"], .login-form input[type="text"], .login-form input[type="password"], .checkout-form input[type="text"], .checkout-form input[type="email"], .checkout-form input[type="tel"], .checkout-form textarea, .quantity-input, .ticket-qty, #winner-search, #winnersSortOrder, .welcome-age-select, #custom-prompt-input { border-radius: var(--mu-radius-xs); transition: border-color var(--mu-dur) var(--mu-ease), box-shadow var(--mu-dur) var(--mu-ease), background-color var(--mu-dur) var(--mu-ease); } .login-form input[type="email"]:focus, .login-form input[type="text"]:focus, .login-form input[type="password"]:focus, .checkout-form input[type="text"]:focus, .checkout-form input[type="email"]:focus, .checkout-form input[type="tel"]:focus, .checkout-form textarea:focus, #winner-search:focus, #winnersSortOrder:focus, .welcome-age-select:focus, #custom-prompt-input:focus { outline: none; box-shadow: var(--mu-ring); } /* ============================= */ /* 6. MODALS / OVERLAYS */ /* ============================= */ .question-modal .modal-content, .welcome-modal, #custom-alert-box, #custom-prompt-box { border-radius: var(--mu-radius); box-shadow: var(--mu-shadow-xl); } /* Subtle backdrop blur on scrims for a modern, focused feel */ .question-modal.modal-overlay, .modal-overlay, #custom-alert-overlay, #custom-prompt-overlay { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } /* Notifications: a touch more depth + unified radius */ .notification-container, .alert-notification { border-radius: var(--mu-radius-xs); box-shadow: var(--mu-shadow-lg); } /* Card-info / jackpot-info overlays inherit the card radius */ .card-info-overlay, .jackpot-info-overlay { border-radius: var(--mu-radius); } /* ============================= */ /* 7. HEADER / FOOTER */ /* ============================= */ #header { box-shadow: var(--mu-shadow-sm); } .dropdown-menu { border-radius: 0 0 var(--mu-radius) var(--mu-radius); box-shadow: var(--mu-shadow-lg); } .dropdown-menu__section { box-shadow: var(--mu-shadow-sm); } .footer { /* keep flush layout; just firm up the divider hairline */ border-top: var(--mu-border); } /* ============================= */ /* 8. BADGES / PILLS / TAGS */ /* ============================= */ .winner-badge, .progress-bubble { border-radius: var(--mu-radius-pill); letter-spacing: 0.01em; } .header__top-cart-count, .notification-bubble { border-radius: var(--mu-radius-pill); } .raffle-id-badge, .jackpot-id-badge { border-radius: var(--mu-radius-xs); } /* ============================= */ /* 9. TABS (subtle polish) */ /* ============================= */ /* tabs.css uses !important on active border-bottom; we only soften the resting corners + motion, leaving its active-state logic intact. */ .panel-tab-button, .panel-internal-tab-button { transition: background-color var(--mu-dur) var(--mu-ease), color var(--mu-dur) var(--mu-ease), border-color var(--mu-dur) var(--mu-ease); }