/* SPM GLOBAL MASTER — CONSOLIDATION TEST v4.0 | 2026-10-25 Source: original production v2.0. Do not deploy without multi-page regression testing. Load after Bootstrap; frontgate.css loads after this master on homepage only. */ /* SCOTT PRICE MEDIA MASTER CSS FILE V2.0 Release Notes: The carousel has been updated 08-23-2026 NEW CSS Responsive Carousel is installed here. ================================================*/ .dropdown-divider{ border-top: 1px solid #6610f2; } strong{ color: var(--spm-strong-color); } /*-- Google Icons Styling --*/ .material-icons { font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: 24px; /* Preferred icon size */ display: inline-block; vertical-align: -11px; line-height: 1; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; /* Support for all WebKit browsers. */ -webkit-font-smoothing: antialiased; /* Support for Safari and Chrome. */ text-rendering: optimizeLegibility; /* Support for Firefox. */ -moz-osx-font-smoothing: grayscale; /* Support for IE. */ font-feature-settings: 'liga'; } /*-- Material Icon Styling --*/ /* Rules for sizing the icon. */ .material-icons.md-18 { font-size: 18px; } .material-icons.md-24 { font-size: 24px; } .material-icons.md-36 { font-size: 36px; } .material-icons.md-40 { font-size: 40px; } .material-icons.md-42 { font-size: 42px; } .material-icons.md-46 { font-size: 46px; } .material-icons.md-48 { font-size: 48px; } /* Rules for using icons as black on a light background. */ .material-icons.md-dark { color: rgba(0, 0, 0, 0.54); } .material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); } /* Rules for using icons as white on a dark background. */ .material-icons.md-light { color: rgba(255, 255, 255, 1); } .material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); } [data-bs-theme=light] { --spm-icon-color: #6610f2; --bs-bi-color-active: #6610F2; --bs-deep-purple: #2C096C; --bs-vivid-purple: #6610F2; --bs-sky-neon: #00D4FF; --bs-orange: #FF8C00; --bs-secondary: #4B2C82; --bs-secondary-rgb: 75, 44, 130; --spm-body-color: #212529; --bs-body-bg: #F0F2FF; --bs-body-bg-rgb: 240, 242, 255; --bs-secondary-bg: #00D4FF; --bs-secondary-bg-rgb: 0, 212, 255; --bs-link-color: #6610f2; --bs-link-color-rgb: 102, 16, 242; --bs-link-hover-color: #2C096C; --bs-link-hover-color-rgb: 44, 9, 108; --bs-border-color: #6610f260; --bs-border-color-translucent: rgba(102, 16, 242, 0.6); --bs-navbar-brand-color: #181818; --bs-navbar-bg: #0F051D; --bs-navbar-body-color: #000000; --spm-nav-active-color: #00D4FF; --spm-nav-focus-color: #2C096C; --bs-card-color: #FFFFFF; --bs-card-border-color: #130e22; --bs-dropdown-link-color: #2C096C; --bs-dropdown-hover-link-color: #fff; --spm-dropdown-link-hover-bg: #00D4FF; --bs-dropdown-active-link-color:#47238b; --spm-nav-pill-text-color: #FFFFFF; --spm-nav-pill-bg: #6610F2; --spm-nav-pill-hover-bg: #0dcaf0; --spm-nav-pill-hover-color: #000; --bs-nav-pills-link-active-bg: #00D4FF; --bs-nav-pills-link-active-color: #1A0B2E; --spm-nav-pill-active-border-color: #5d4092; --bs-featured-body-color: #6610F2; --bs-carousel-control-icon-filter: none; --bs-carousel-indicator-active-bg: #F0F2FF; --spm-nav-pill-border-color: #00D4FF; --tech-card-glow: 0 8px 32px 0 rgba(112, 0, 255, 0.2); --spm-strong-color: #4B0BB3; --featured-color: #4B0BB3; --spm-card-hover-bg: #00D4FF; --spm-card-hover-bg-hover: #2C096C; --bg-gradient-1: #f1aeb5; --bg-gradient-2: #cfe2ff; --bg-gradient-3: #F0F2FF; --bg-gradient-4: #FFFFFF; --bs-offcanvas-bg: #00D4FF; --lyric-accent: #6610F2; --spm-footer-bg-color: #cfe2ff; --spm-gallery-link-color: #00D4FF; } [data-bs-theme=dark] { color-scheme: dark; --bs-vivid-purple: #6610F2; --bs-deep-purple: #2C096C; --bs-sky-neon: #00D4FF; --spm-icon-color: #FFD700; --bs-bi-color-active: #dee2e6; --spm-body-color: #E9ECEF; --bs-body-color: #E9ECEF; --bs-body-bg: #07010F; --bs-body-bg-rgb: 7, 1, 15; --bs-secondary: #D1C4E9; --bs-secondary-rgb: 209, 196, 233; --bs-secondary-bg: #2C096C; --bs-secondary-bg-rgb: 44, 9, 108; --bs-link-hover-color: #f8f9fa; --bs-link-hover-color-rgb: 248, 249, 250; --bs-border-color: #6610F2; --bs-border-color-translucent: rgba(255, 215, 0, 0.6); --bs-navbar-brand-color: #dee2e6; --spm-nav-pill-text-color: #fff; --spm-nav-active-color: #D4AF37; --spm-nav-focus-color: #D4AF37; --bs-nav-pills-link-active-bg: #D4AF37; --spm-nav-pill-active-border-color: #00D4FF; --spm-nav-pill-bg: #2c096c; --spm-nav-pill-hover-bg: #FF8C00; --spm-nav-pill-hover-color: #000; --bs-navbar-body-color: #ffffff; --bs-navbar-bg: #130e22; --bs-card-color: #1C0D34; --bs-card-border-color: #D4AF37; --bs-dropdown-link-color: #6610f2; --spm-dropdown-link-hover-bg: #6610F2; --bs-dropdown-hover-link-color: #fff; --bs-dropdown-active-link-color:#47238b; --bs-featured-body-color: #ffffff; --bs-carousel-control-icon-filter: none; --bs-carousel-indicator-active-bg: #D4AF37; --spm-nav-pill-border-color: #D4AF37; --tech-card-glow: 0 8px 32px 0 rgba(112, 0, 255, 0.2); --spm-strong-color: #FF8C00; --featured-color: #00D4FF; --spm-card-hover-bg: #2C096C; --spm-card-hover-bg-hover: #00D4FF; --bg-gradient-1: #191825; --bg-gradient-2: #0B0909; --bg-gradient-3: #0B011D; --bg-gradient-4: #000000; --bs-offcanvas-bg: #2C096C; --lyric-accent: #FFD700; --spm-footer-bg-color: #2C096C; --spm-gallery-link-color: #D4AF37; } /*** Primary Buttons ***/ .btn-primary { border-radius: 20px; } [data-bs-theme="light"] .btn-primary { --bs-btn-color: #fff; --bs-btn-bg: #2C096C; --bs-btn-border-color: var(--bs-border-color-translucent); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #6610F2; --bs-btn-hover-border-color: #6f42c1; --bs-btn-focus-shadow-rgb: 102, 16, 242; --bs-btn-active-color: #fff; --bs-btn-active-bg: #6610F2; --bs-btn-active-border-color: var(--bs-border-color-translucent); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #6f42c1; --bs-btn-disabled-border-color: #6f42c1; } [data-bs-theme="dark"] .btn-primary { --bs-btn-color: #fff; --bs-btn-bg: #6610F2; --bs-btn-border-color: var(--bs-border-color-translucent); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #6f42c1; --bs-btn-hover-border-color: #fff; --bs-btn-focus-shadow-rgb: 212, 175, 55; --bs-btn-active-color: #fff; --bs-btn-active-bg: #FF8C00; --bs-btn-active-border-color: var(--bs-border-color-translucent); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #47238b; --bs-btn-disabled-border-color: #6610F2; } .spm-footer-bg { background-color: var(--spm-footer-bg-color); } /* ========================================================= SPM FOOTER SOCIAL LINKS ========================================================= */ .spm-social-links li { line-height: 1; } .spm-social-link { --spm-social-icon-color: #6610F2; --spm-social-fill: #6610F2; position: relative; isolation: isolate; display: grid; place-items: center; width: 3rem; height: 3rem; overflow: hidden; color: var(--spm-social-icon-color); background-color: #FFFFFF; border: 2px solid var(--bs-border-color-translucent); border-radius: 50%; box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.12); text-decoration: none; transition: color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease; } .spm-social-link::before { position: absolute; inset: 0; z-index: -1; content: ""; background: var(--spm-social-fill); border-radius: inherit; transform: scale(0); transition: transform 0.25s ease; } .spm-social-link i { position: relative; z-index: 1; font-size: 1.35rem; line-height: 1; } .spm-social-link:hover, .spm-social-link:focus-visible { color: #FFFFFF; border-color: var(--spm-social-icon-color); box-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.2); transform: translateY(-2px); } .spm-social-link:hover::before, .spm-social-link:focus-visible::before { transform: scale(1); } .spm-social-link:focus-visible { outline: 3px solid var(--spm-nav-focus-color); outline-offset: 3px; } /* Facebook */ .spm-social-facebook { --spm-social-icon-color: #1877F2; --spm-social-fill: #1877F2; } /* X */ .spm-social-x { --spm-social-icon-color: #111111; --spm-social-fill: #000000; } /* Pinterest */ .spm-social-pinterest { --spm-social-icon-color: #E60023; --spm-social-fill: #E60023; } /* Instagram */ .spm-social-instagram { --spm-social-icon-color: #E1306C; --spm-social-fill: radial-gradient( circle at 30% 107%, #FDF497 0%, #FDF497 5%, #FD5949 45%, #D6249F 60%, #285AEB 90% ); } /* YouTube */ .spm-social-youtube { --spm-social-icon-color: #FF0000; --spm-social-fill: #FF0000; } @media (prefers-reduced-motion: reduce) { .spm-social-link, .spm-social-link::before { transition: none; } .spm-social-link:hover, .spm-social-link:focus-visible { transform: none; } } /* Theme Toggler */ .bi-color { color: var(--spm-icon-color); } /*** Logo for Light and Dark Theme ***/ .d-dark-inline-block { display: none !important; } [data-bs-theme="dark"] .d-dark-none { display: none !important; } [data-bs-theme="dark"] .d-dark-inline-block { display: inline-block !important; } /*** Navbar ***/ /* ========================================================= SPM NAVBAR — RESERVE SPACE BEFORE DYNAMIC INJECTION Prevents content shifting while navbar HTML loads. ========================================================= */ @media (min-width: 1200px) { #nav-placeholder { min-height: 72px; } } .navbar .navbar-nav .nav-link { padding: 10px 5px; color: var(--bs-body-color); font-size: 22px; font-weight: 600; outline: none; } .navbar .navbar-nav .nav-link:hover, .navbar .navbar-nav .nav-link.active { color: var(--bs-body-color); } .navbar .navbar-nav .nav-link:active, .navbar .navbar-nav .nav-link.active { color: var(--spm-nav-active-color); } .navbar .navbar-nav .nav-link:focus, .navbar .navbar-nav .nav-link.active { color: var(--spm-nav-focus-color); } @media (max-width: 991.98px) { .navbar .navbar-nav .nav-link { padding: 0; } } @media (min-width: 992px) and (hover: hover) and (pointer: fine) { .spm-primary-nav > .nav-item.dropdown:hover > .dropdown-menu { display: block; } } .navbar-brand img { height: 46px; /* Adjust based on your logo preference */ width: auto; } .nav-link { text-transform: uppercase; font-weight: 600; font-size: 18px; } /*---nav effects--*/ .dropdown-menu{ --bs-dropdown-bg: var(--bs-body-bg); --bs-dropdown-link-hover-bg: var(--spm-dropdown-link-hover-bg); color: var(--bs-body-color); border-radius:10px; opacity: 1; z-index: 1100; } .slide { animation: 0.6s slidedown; } @keyframes slidedown { from { transform: translateY(-10%); } to { transform: translateY(0); } } /* ========================================================= NAV PILLS ========================================================= */ .nav-pills .nav-link { border: 1px solid var(--spm-nav-pill-border-color); border-radius: 50px; padding: 4px 20px; background-color: var(--spm-nav-pill-bg); color: var(--spm-nav-pill-text-color); font-size: 16px; font-weight: 600; transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s ease; } .nav-pills .nav-link:hover { background-color: var(--spm-nav-pill-hover-bg); border-color: var(--spm-nav-pill-border-color); color: var(--spm-nav-pill-hover-color); transform: translateY(-1px); } .nav-pills .nav-link.active, .nav-pills .show > .nav-link { background-color: var(--bs-nav-pills-link-active-bg); border-color: var(--spm-nav-pill-active-border-color); color: var(--bs-nav-pills-link-active-color); font-size: 22px; } .nav-pills .nav-link.active:hover, .nav-pills .show > .nav-link:hover { background-color: var(--bs-nav-pills-link-active-bg); border-color: var(--spm-nav-pill-active-border-color); color: var(--bs-nav-pills-link-active-color); transform: none; } .nav-pills .nav-link:focus-visible { outline: 3px solid rgba(44, 9, 108, 0.35); outline-offset: 3px; } /*--neon glow--*/ .neon-text { color: var(--bs-body-color); text-shadow: 0 0 5px #ff005e, 0 0 10px #ff005e, 0 0 20px #ff005e, 0 0 40px #ff005e, 0 0 80px #ff005e; animation: glow 1.5s infinite alternate; } @keyframes glow { 0% { text-shadow: 0 0 5px #ff005e, 0 0 10px #ff005e, 0 0 20px #ff005e, 0 0 40px #ff005e, 0 0 80px #ff005e; } 100% { text-shadow: 0 0 10px #00d4ff, 0 0 20px #00d4ff, 0 0 40px #00d4ff, 0 0 80px #00d4ff, 0 0 160px #00d4ff; } } /* Media Query for devices withi coarse pointers and no hover functionality */ /* This will use a fallback image instead of a video for devices that commonly do not support the HTML5 video element */ @media (pointer: coarse) and (hover: none) { header { background: var(--bs-body-bg) scroll; } } /*--Hide and Seek--*/ @media screen and (min-width:767.2px){ .hide-lg { display: none!important; } } @media screen and (max-width:767px){ .show-tablet { display: none!important; } } /* === Reusable static glass surfaces === */ /* * SPM Glow Glass — Static Surfaces Only v1.0 * TEST VERSION. Replaces glow-glass.css on the TEST homepage only. * Retains original .glass and colored .glass-* appearance. * Removes legacy .spm-card animations, 3D effects and duplicate pseudo-elements. * Keep spm-home-cards-v1.css loaded AFTER all other stylesheets. */ /*-- GLASSMORPHISM CUSTOM CSS STYLE SHEET --*/ /*-- Default Style --*/ /* Glassmorphism CSS Default */ .glass-default { background: rgba(102, 16, 242, 0.1); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); border-radius: 15px; border: 1px solid rgba(102, 16, 242, 0.4); box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37); } /* Glassmorphism CSS PINK */ .glass-pink { background: rgba(242, 16, 255, 0.1); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); border-radius: 15px; border: 1px solid rgba(242, 16, 255, 0.4); box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37); } /* Glassmorphism CSS Light White (purple hue) */ .glass-light-white { background: rgba(242, 242, 255, 0.1); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); border-radius: 15px; border: 1px solid rgba(242, 242, 255, 0.3); box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37); } /* Glassmorphism CSS Orange */ .glass-orange { background: rgba(255, 140, 0, 0.38); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); border-radius: 15px; border: 1px solid rgba(255, 140, 0, 0.35); box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37); } /* Glassmorphism CSS YELLOW */ .glass-yellow { background: rgba(255, 193, 7, 0.41); backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); border-radius: 15px; border: 1px solid rgba(255, 193, 7, 0.35); box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37); } /* Glassmorphism CSS CYAN */ .glass-cyan { background: rgba(15, 205, 160, 0.41); backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); border-radius: 15px; border: 1px solid rgba(15, 205, 160, 0.35); box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37); } /* Glassmorphism CSS TEAL */ .glass-teal { background: rgba(32, 201, 151, 0.41); backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); border-radius: 15px; border: 1px solid rgba(32, 201, 151, 0.35); box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37); } /* Glassmorphism CSS RED*/ .glass-red { background: rgba(220, 53, 69, 0.41); backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); border-radius: 15px; border: 1px solid rgba(220, 53, 69, 0.35); box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37); } /* Glassmorphism CSS BLUE */ .glass-blue { background: rgba(13, 110, 254, 0.41); backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); border-radius: 15px; border: 1px solid rgba(13, 110, 254, 0.35); box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37); } /* Glassmorphism CSS BLACK */ .glass-black { background: rgba(24, 24, 24, 0.41); backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); border-radius: 15px; border: 1px solid rgba(24, 24, 24, 0.35); box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37); } /* Glassmorphism CSS Grey */ .glass-grey { background: rgba(143, 143, 143, 0.41); backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); border-radius: 15px; border: 1px solid rgba(143, 143, 143, 0.35); box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37); } /* Glassmorphism CSS Transparent*/ .glass-transparent { background: rgba(255, 255, 255, 0); backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); border-radius: 15px; border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37); } /* Glassmorphism CSS Trans brand*/ .glass-trans-brand { background: rgba(105, 61, 158, 0); backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); border-radius: 15px; border: 1px solid rgba(105, 61, 158, 0.2); box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37); } /* Glassmorphism CSS */ .glass { background: rgba(44, 2, 59, 0.09); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); border-radius: 20px; border: 1px solid rgba(44, 2, 59, 0.11); box-shadow: 0 8px 22px rgba(31, 38, 135, 0.37); } /* === Global accessibility === */ /* ========================================================= SCOTT PRICE MEDIA ACCESSIBILITY CONTROLS ========================================================= */ /* --------------------------------------------------------- CONTROL CENTER SETTINGS --------------------------------------------------------- */ .spm-accessibility-setting { padding-block: 0.25rem; } .spm-accessibility-controls .form-check-label { cursor: pointer; } .spm-accessibility-controls .form-check-input { cursor: pointer; } /* ========================================================= ENHANCED CONTRAST ========================================================= */ /* LIGHT THEME */ html[data-bs-theme="light"].spm-high-contrast { --bs-body-bg: #ffffff; --bs-body-color: #000000; --bs-secondary-color: #212529; --bs-border-color: #000000; --bs-link-color: #0000ee; --bs-link-hover-color: #551a8b; } /* DARK THEME */ html[data-bs-theme="dark"].spm-high-contrast { --bs-body-bg: #000000; --bs-body-color: #ffffff; --bs-secondary-color: #e9ecef; --bs-border-color: #ffffff; --bs-link-color: #8ec5ff; --bs-link-hover-color: #ffffff; } /* Common high-contrast elements */ html.spm-high-contrast .card, html.spm-high-contrast .accordion-item, html.spm-high-contrast .offcanvas, html.spm-high-contrast .dropdown-menu, html.spm-high-contrast .list-group-item { border-color: var(--bs-border-color) !important; } /* ========================================================= REDUCED MOTION ========================================================= */ html.spm-reduced-motion { scroll-behavior: auto !important; } html.spm-reduced-motion *, html.spm-reduced-motion *::before, html.spm-reduced-motion *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; } /* ========================================================= UNDERLINED LINKS ========================================================= */ html.spm-underline-links a:not(.btn):not(.nav-link):not(.dropdown-item) { text-decoration: underline !important; text-decoration-thickness: 0.08em !important; text-underline-offset: 0.18em !important; } /* ========================================================= ACTIVE TEXT SIZE BUTTON ========================================================= */ .spm-text-size-option.active { font-weight: 600; } /* ========================================================= ACCESSIBLE KEYBOARD FOCUS ========================================================= */ .spm-accessibility-controls button:focus-visible, .spm-accessibility-controls input:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; } /* === Global back-to-top === */ /* ============================================================ SCOTT PRICE MEDIA Back to Top Component Bootstrap 5.3 ============================================================ */ /* ------------------------------------------------------------ BUTTON ------------------------------------------------------------ */ .spm-back-to-top { position: fixed; right: clamp(1rem, 2vw, 1.5rem); bottom: clamp(1rem, 2vw, 1.5rem); z-index: 1030; display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; padding: 0; border: 1px solid rgba(102, 16, 242, 0.35); border-radius: 50%; color: #ffffff; background: linear-gradient( 135deg, rgba(102, 16, 242, 0.92), rgba(79, 9, 190, 0.78) ); box-shadow: 0 8px 24px rgba(102, 16, 242, 0.24); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); cursor: pointer; /* Hidden state */ opacity: 0; visibility: hidden; transform: translateY(0.75rem); pointer-events: none; transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } /* ------------------------------------------------------------ VISIBLE STATE ------------------------------------------------------------ */ .spm-back-to-top.spm-back-to-top-visible { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } /* ------------------------------------------------------------ ICON ------------------------------------------------------------ */ .spm-back-to-top i { font-size: 1.25rem; line-height: 1; } /* ------------------------------------------------------------ HOVER ------------------------------------------------------------ */ .spm-back-to-top:hover { color: #ffffff; border-color: rgba(255, 255, 255, 0.35); background: linear-gradient( 135deg, rgba(117, 38, 255, 0.98), rgba(102, 16, 242, 0.88) ); box-shadow: 0 10px 28px rgba(102, 16, 242, 0.34); transform: translateY(-2px); } /* ------------------------------------------------------------ ACTIVE ------------------------------------------------------------ */ .spm-back-to-top:active { transform: translateY(0); } /* ------------------------------------------------------------ KEYBOARD FOCUS ------------------------------------------------------------ */ .spm-back-to-top:focus-visible { outline: none; border-color: #ffffff; box-shadow: 0 0 0 0.25rem rgba(102, 16, 242, 0.30), 0 8px 24px rgba(102, 16, 242, 0.28); } /* ------------------------------------------------------------ LIGHT THEME ------------------------------------------------------------ */ [data-bs-theme="light"] .spm-back-to-top { color: #ffffff; border-color: rgba(102, 16, 242, 0.32); background: linear-gradient( 135deg, rgba(102, 16, 242, 0.94), rgba(79, 9, 190, 0.84) ); box-shadow: 0 8px 24px rgba(102, 16, 242, 0.22); } /* ------------------------------------------------------------ DARK THEME ------------------------------------------------------------ */ [data-bs-theme="dark"] .spm-back-to-top { color: #ffffff; border-color: rgba(149, 92, 255, 0.40); background: linear-gradient( 135deg, rgba(102, 16, 242, 0.94), rgba(82, 12, 198, 0.82) ); box-shadow: 0 8px 26px rgba(102, 16, 242, 0.30); } /* ------------------------------------------------------------ MOBILE ------------------------------------------------------------ */ @media (max-width: 575.98px) { .spm-back-to-top { right: 1rem; bottom: 1rem; width: 2.75rem; height: 2.75rem; } .spm-back-to-top i { font-size: 1.15rem; } } /* ------------------------------------------------------------ REDUCED MOTION ------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { .spm-back-to-top { transition: opacity 0.01ms, visibility 0.01ms; } .spm-back-to-top:hover, .spm-back-to-top:active { transform: none; } } /* === Global search panel === */ /* ========================================================= SCOTT PRICE MEDIA GLOBAL SEARCH PANEL v3 Stable two-state interface: 1. Compact Search 2. Expanded Results ========================================================= */ /* ========================================================= PANEL — COMPACT STATE ========================================================= */ .spm-global-search { --spm-search-card-radius: 1rem; --spm-search-panel-radius: 0 0 1.4rem 1.4rem; /* * Bootstrap Offcanvas uses this variable for height. * This gives us a predictable compact opening state. */ --bs-offcanvas-height: 175px; height: var(--bs-offcanvas-height) !important; max-height: var(--bs-offcanvas-height); color: var(--bs-body-color); background: linear-gradient( 135deg, color-mix( in srgb, var(--bs-body-bg) 94%, #6610f2 6% ), var(--bs-body-bg) ); border-bottom: 1px solid var(--bs-border-color-translucent); border-radius: var(--spm-search-panel-radius); box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, 0.3); overflow: hidden; transition: height 220ms ease, max-height 220ms ease; } /* ========================================================= PANEL — RESULTS STATE ========================================================= */ .spm-global-search.spm-search-expanded { --bs-offcanvas-height: min(78dvh, 860px); height: var(--bs-offcanvas-height) !important; max-height: var(--bs-offcanvas-height); } /* ========================================================= HEADER ========================================================= */ .spm-global-search .offcanvas-header { flex: 0 0 auto; padding: 0.9rem clamp(1rem, 4vw, 3rem); border-bottom: none; } .spm-search-heading { display: flex; align-items: center; gap: 0.65rem; margin: 0; font-size: 1.15rem; font-weight: 700; } .spm-search-heading i { color: var(--spm-icon-color); } .spm-search-subtitle { margin: 0.15rem 0 0; color: var(--bs-secondary-color); font-size: 0.875rem; } /* ========================================================= BODY ========================================================= */ .spm-global-search .offcanvas-body { flex: 1 1 auto; padding: 1rem clamp(1rem, 4vw, 3rem); overflow: hidden; } /* * Scrolling is allowed only after actual results * have expanded the Search panel. */ .spm-global-search.spm-search-expanded .offcanvas-body { overflow-y: auto; overscroll-behavior: contain; } .spm-search-inner { width: min(100%, 1160px); margin-inline: auto; } /* ========================================================= SEARCH FORM ========================================================= */ .spm-search-form { margin: 0; } .spm-search-input-group { display: flex; gap: 0.65rem; } .spm-search-input-wrap { position: relative; flex: 1 1 auto; } .spm-search-input-icon { position: absolute; top: 50%; left: 1rem; z-index: 2; color: var(--spm-icon-color); pointer-events: none; transform: translateY(-50%); } #spmGlobalSearchInput { min-height: 3.4rem; padding-left: 2.8rem; color: var(--bs-body-color); background-color: var(--bs-body-bg); border: 2px solid var(--bs-border-color-translucent); border-radius: 1rem; font-size: 1rem; transition: border-color 0.2s ease, box-shadow 0.2s ease; } #spmGlobalSearchInput:focus { border-color: #6610f2; box-shadow: 0 0 0 0.25rem rgba(102, 16, 242, 0.18); } .spm-search-submit { min-width: 7.5rem; min-height: 3.4rem; border-radius: 1rem; } /* ========================================================= COMPACT STATUS ========================================================= */ /* * Reserved feedback area. * * Because its height is always reserved, typing/searching * does not change the geometry of the panel. */ .spm-search-compact-status { min-height: 1.35rem; margin-top: 0.45rem; color: var(--bs-secondary-color); font-size: 0.82rem; } /* ========================================================= RESULTS AREA ========================================================= */ .spm-search-response { display: none; margin-top: 0.8rem; } .spm-global-search.spm-search-expanded .spm-search-response { display: block; } /* ========================================================= RESULT SUMMARY ========================================================= */ .spm-search-result-summary-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.65rem; } .spm-search-status { margin: 0; color: var(--bs-secondary-color); font-size: 0.9rem; } /* ========================================================= DYNAMIC FILTERS ========================================================= */ .spm-search-filters { display: none; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.8rem; } .spm-search-filters.has-filters { display: flex; } .spm-search-filter { padding: 0.4rem 0.8rem; color: var(--bs-body-color); background: transparent; border: 1px solid var(--bs-border-color-translucent); border-radius: 999px; font-size: 0.85rem; font-weight: 600; transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease; } .spm-search-filter:hover { border-color: #6610f2; } .spm-search-filter.active, .spm-search-filter[aria-pressed="true"] { color: #fff; background-color: #6610f2; border-color: #6610f2; } .spm-search-filter:focus-visible { outline: 3px solid var(--spm-nav-focus-color); outline-offset: 3px; } .spm-search-filter-count { margin-left: 0.25rem; opacity: 0.8; } /* ========================================================= RESULTS ========================================================= */ .spm-search-results { display: grid; gap: 0.55rem; } .spm-search-result { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.8rem; padding: 0.75rem; color: inherit; background: color-mix( in srgb, var(--bs-body-bg) 95%, #6610f2 5% ); border: 1px solid var(--bs-border-color-translucent); border-radius: var(--spm-search-card-radius); text-decoration: none; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .spm-search-result:hover { color: inherit; border-color: #6610f2; box-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.12); } .spm-search-result:focus-visible { outline: 3px solid var(--spm-nav-focus-color); outline-offset: 3px; } /* ========================================================= RESULT THUMBNAIL ========================================================= */ .spm-search-result-thumb { width: 76px; height: 58px; overflow: hidden; background-color: var(--bs-secondary-bg); border-radius: 0.65rem; } .spm-search-result-thumb img { width: 100%; height: 100%; object-fit: cover; } /* ========================================================= RESULT CONTENT ========================================================= */ .spm-search-result-body { min-width: 0; } .spm-search-result-meta { display: flex; align-items: center; gap: 0.45rem; margin-bottom: 0.2rem; } .spm-search-result-type { display: inline-flex; padding: 0.12rem 0.5rem; color: #fff; background-color: #6610f2; border-radius: 999px; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .spm-search-result-title { margin: 0 0 0.15rem; color: var(--bs-body-color); font-size: 0.98rem; font-weight: 700; line-height: 1.25; } .spm-search-result-description { display: -webkit-box; margin: 0; overflow: hidden; color: var(--bs-secondary-color); font-size: 0.82rem; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } /* ========================================================= EMPTY / ERROR ========================================================= */ .spm-search-message { padding: 1.4rem; text-align: center; border: 1px solid var(--bs-border-color-translucent); border-radius: var(--spm-search-card-radius); background: color-mix( in srgb, var(--bs-body-bg) 95%, #6610f2 5% ); } .spm-search-message h3 { margin-bottom: 0.35rem; font-size: 1.1rem; } .spm-search-message p { margin: 0; color: var(--bs-secondary-color); } /* ========================================================= ACTIONS ========================================================= */ .spm-search-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 0.85rem; } .spm-search-load-more { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; min-width: 8.5rem; border-radius: 999px; } .spm-search-load-more[hidden] { display: none !important; } .spm-search-view-all { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 700; text-decoration: none; } .spm-search-view-all:hover { text-decoration: underline; } .spm-search-view-all[hidden] { display: none !important; } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767.98px) { .spm-global-search { --bs-offcanvas-height: 215px; border-radius: 0; } .spm-global-search.spm-search-expanded { --bs-offcanvas-height: 92dvh; } .spm-global-search .offcanvas-header { padding: 0.8rem 1rem; } .spm-global-search .offcanvas-body { padding: 0.85rem 1rem; } .spm-search-input-group { flex-direction: column; } #spmGlobalSearchInput { min-height: 3rem; } .spm-search-submit { width: 100%; min-height: 2.8rem; } .spm-search-result-thumb { width: 62px; height: 50px; } .spm-search-result-description { -webkit-line-clamp: 1; } .spm-search-actions { flex-direction: column; align-items: stretch; } .spm-search-load-more, .spm-search-view-all { justify-content: center; width: 100%; padding: 0.7rem; } } /* ========================================================= SHORT DESKTOP VIEWPORTS ========================================================= */ @media (max-height: 750px) and (min-width: 768px) { .spm-global-search.spm-search-expanded { --bs-offcanvas-height: 96dvh; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .spm-global-search, .spm-search-result, .spm-search-filter, #spmGlobalSearchInput { transition: none; } } /* ========================================================= SPM CONTROL CENTER — v4.1 added after testing Global component styling ========================================================= */ /* SPM Control Center v4.1 — load after the v4.0 global master. */ .spm-control-center .spm-control-preference { padding: 1.35rem 1rem; border-bottom: 1px solid var(--bs-border-color); } .spm-control-center .spm-control-preference--theme { padding-top: .75rem; } .spm-control-center .spm-control-preference--accessibility { padding-top: 1.35rem; } .spm-control-center .spm-control-preference--accessibility .spm-accessibility-controls { width: 100%; } .spm-control-center .spm-control-preference--language .accordion-body { padding: 0; } .spm-control-center .spm-translate-label { display: flex !important; align-items: center; } /* GTranslate injects its own native select after the navbar is fetched. */ .spm-control-center .gtranslate_wrapper { position: relative; width: 100%; max-width: 22rem; } .spm-control-center .gtranslate_wrapper select, .spm-control-center .gtranslate_wrapper .gt_selector { display: block; width: 100%; min-height: 2.9rem; padding: .65rem 2.65rem .65rem 1rem; border: 1px solid #8a54ef; border-radius: .8rem; color: var(--bs-body-color); background-color: var(--bs-body-bg); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23a777ff' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .85rem center; box-shadow: 0 2px 10px rgba(102,16,242,.10); font: inherit; font-weight: 600; appearance: none; -webkit-appearance: none; cursor: pointer; transition: border-color .2s ease, box-shadow .2s ease; } .spm-control-center .gtranslate_wrapper select:hover, .spm-control-center .gtranslate_wrapper .gt_selector:hover { border-color: #b48cff; box-shadow: 0 3px 15px rgba(102,16,242,.20); } .spm-control-center .gtranslate_wrapper select:focus-visible, .spm-control-center .gtranslate_wrapper .gt_selector:focus-visible { outline: 3px solid #d4af37; outline-offset: 3px; } .spm-control-center .gtranslate_wrapper select option { color: #171020; background: #fff; } [data-bs-theme="light"] .spm-control-center .gtranslate_wrapper select, [data-bs-theme="light"] .spm-control-center .gtranslate_wrapper .gt_selector { background-color: #fff; color: #2c096c; } @media (prefers-reduced-motion: reduce) { .spm-control-center .gtranslate_wrapper select, .spm-control-center .gtranslate_wrapper .gt_selector { transition: none; } }