/* JB Estrella Custom Styles - Shared between themes */ /* Utility classes and shared styles that apply regardless of theme */ /* Responsive embedded content */ .responsive-embed { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .responsive-embed iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* Media protection (#30): no drag-to-desktop (WebKit/Blink) and no iOS long-press "Save to Photos" sheet on artwork and video. The right-click menu and Firefox dragging are blocked in js/media-protection.js. */ img, video, audio, picture, canvas, [data-protect-media] { -webkit-user-drag: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } /* Accessibility helpers */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } /* Theme toggle button */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: none; background: transparent; cursor: pointer; transition: all 0.3s ease; } .theme-toggle:hover { background-color: rgba(255, 255, 255, 0.1); } .theme-toggle i { font-size: 1.2rem; } /* Main content wrapper. Clears the fixed navbar on interior pages; the homepage overrides this because its full-bleed hero already does. Kept here rather than as an inline style on the element so it can be overridden per page at all. */ .page-container { margin-top: 4rem; /* Was Bootstrap's .py-5. Spelled out here because utility classes carry !important, which no per-page rule can override. */ padding-top: 3rem; padding-bottom: 3rem; } /* Content containers */ .content-container { padding: var(--spacing-lg); margin-bottom: var(--spacing-lg); } /* Floating Action Button positioning */ .floating-action-btn { position: fixed; bottom: 50px; /* Adjusted since we removed bottom nav */ left: 50%; transform: translateX(-50%); z-index: 1000; font-size: 1.5rem; width: 56px; height: 56px; border: 1px solid var(--border-color); border-radius: 50%; background-color: var(--primary-color); color: white; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0, 0, 0, 1.0); transition: all 0.3s ease; position: fixed; } /* Pulse effect for the floating action button */ .floating-action-btn::before, .floating-action-btn::after { content: ''; position: absolute; width: 100%; height: 100%; border-radius: 50%; background-color: inherit; /* Takes the button's background color */ opacity: 0; z-index: -1; /* Place behind the button */ animation: pulse 2s cubic-bezier(0.65, 0, 0.35, 1) infinite; } /* Second pulse wave with delay */ .floating-action-btn::after { animation-delay: 0.7s; /* Delay for the second wave */ } /* Theme-specific pulse styling .theme-cosmic .floating-action-btn::before, .theme-cosmic .floating-action-btn::after { background: radial-gradient(circle, var(--primary-color) 0%, rgba(78, 107, 255, 0) 70%); box-shadow: 0 0 15px rgba(78, 107, 255, 0.5); /* Add a glow effect for cosmic theme } */ /* Keyframes for the pulse animation */ @keyframes pulse { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(3); /* Expand to 3x the size */ opacity: 0; } } /* Mobile Navigation Styles - Shared between themes */ @media (max-width: 768px) { /* Hide top navbar on mobile - with higher specificity */ body .navbar, body header.header, body nav.navbar-primary, body nav.navbar-static, body .navbar-collapse, body .navbar-header { display: none !important; } /* Mobile header */ .mobile-header { display: flex !important; align-items: center; justify-content: space-between; padding: 0 1rem; position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background-color: transparent; height: 60px; } .mobile-header .brand { font-weight: 700; font-size: var(--bs-body-font-size); text-decoration: none; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } .mobile-header .actions { display: flex; align-items: center; } .mobile-header .actions button { background: transparent; border: none; font-size: 1.25rem; padding: 0.5rem; margin-left: 0.5rem; } /* Hamburger menu button */ .hamburger-menu { background: transparent; border: none; font-size: 1.25rem; padding: 0.5rem; cursor: pointer; color: inherit; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } /* Mobile slide-out menu */ .mobile-menu-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 1001; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .mobile-menu-overlay.active { opacity: 1; visibility: visible; } .mobile-menu { position: fixed; top: 0; left: -280px; width: 280px; height: 100vh; z-index: 1002; transition: left 0.3s ease; display: block !important; overflow-y: auto; } .mobile-menu.active { left: 0; } .mobile-menu-header { display: flex; justify-content: flex-end; padding: 1rem; } .close-menu { background: transparent; border: none; font-size: 1.25rem; padding: 0.5rem; cursor: pointer; } .mobile-menu-items { padding: 1rem 0; } .mobile-menu-item { display: flex; align-items: center; padding: 1rem 1.5rem; text-decoration: none; transition: background-color 0.2s ease; } .mobile-menu-item i { font-size: 1.25rem; margin-right: 1rem; width: 24px; text-align: center; } .mobile-menu-item span { font-size: 1rem; } .mobile-menu-item.active { font-weight: bold; } /* Adjust main content for mobile */ main, body > .container { padding-bottom: 1rem !important; /* Remove extra padding for bottom nav */ } main .container { margin-top: 1rem !important; } /* Adjust footer for mobile */ footer { display: none !important; } /* Form adjustments for mobile */ .form-control { font-size: 16px; /* Prevent zoom on iOS */ } /* Ensure proper spacing for all page types */ body > .container, body > main > .container, .page_inner { margin-top: 60px !important; /* Space for mobile header */ } } /* Site footer (copyright). This is still a