/* Custom styles for Hyogo Kasumi Fishery Radio Station - Futuristic Theme */ /* Font setup handled in HTML with Google Fonts import */ /* Futuristic Grid Background */ body { position: relative; background-image: linear-gradient(rgba(0, 168, 120, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 168, 120, 0.03) 1px, transparent 1px); background-size: 50px 50px; background-position: -1px -1px; } body::before { content: ''; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 20% 50%, rgba(0, 168, 120, 0.05) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(0, 127, 95, 0.05) 0%, transparent 50%); pointer-events: none; z-index: 0; } /* Tab entry animation */ .tab-content { animation: fadeIn 0.5s ease-out forwards; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* Tab Navigation Default State */ .nav-tab, nav[role="tablist"] a { background-color: transparent; color: #333232; } /* Tab Navigation Active State with glow effect */ .nav-tab[aria-selected="true"] { position: relative; text-shadow: 0 0 10px rgba(252, 250, 240, 0.5); background-color: #426F45 !important; color: #ffffff !important; } /* Tab Navigation Hover State */ .nav-tab:hover, nav[role="tablist"] a:hover { background-color: #426F45 !important; color: #ffffff !important; } /* Smooth Scrolling */ html { scroll-behavior: smooth; } /* Custom scrollbar for webkit with glow */ ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: #fffafa; border-radius: 5px; } ::-webkit-scrollbar-thumb { background: #898989; border-radius: 5px; box-shadow: 0 0 10px #426F45; } ::-webkit-scrollbar-thumb:hover { background: #474a4d; box-shadow: 0 0 15px #426F45; } /* Glassmorphism effect for cards */ .bg-white { background: rgba(255, 255, 255, 0.7) !important; backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.3); } /* Glow effect for headers */ header { box-shadow: 0 4px 30px rgba(0, 168, 120, 0.2); } /* Pulse animation for logo */ @keyframes pulse-glow { 0%, 100% { box-shadow: 0 0 3px rgba(0, 168, 120, 0.3); } 50% { box-shadow: 0 0 10px rgba(0, 168, 120, 0.5); } } header .w-10.h-10.bg-white { animation: pulse-glow 3s ease-in-out infinite; } /* Hover effects with glow */ button:hover, a:hover { transition: all 0.3s ease; } .hover\:shadow-md:hover { box-shadow: 0 10px 40px rgba(0, 168, 120, 0.15) !important; } /* Responsive Header Title */ h1 { font-family: "WDXL Lubrifont SC", sans-serif; font-weight: 400; font-style: normal; font-size: 1.25rem; /* Base size for mobile */ color: #426F45; transition: font-size 0.5s ease; } @media (min-width: 768px) { h1 { font-size: 2.5rem; } } .header-title { white-space: nowrap; } /*h3 font*/ h3 { font-family: "M PLUS 1P", sans-serif; font-weight: 400; font-style: normal; font-size: 150%; color: #333232; ; } /*h4 font*/ h4 { font-family: "WDXL Lubrifont SC", sans-serif; font-weight: 400; font-style: normal; font-size: 150%; color: #ffffff; } /*days font*/ .orbitron-uniquifier { font-family: "Orbitron", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; } /* Futuristic button glow */ .bg-brand-text { position: relative; overflow: hidden; } .bg-brand-text::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent); transform: rotate(45deg); animation: shine 3s infinite; } @keyframes shine { 0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); } 100% { transform: translateX(100%) translateY(100%) rotate(45deg); } } /* Icon glow effect */ .text-brand-text svg { filter: drop-shadow(0 0 3px rgba(0, 168, 120, 0.3)); } /* Enhanced border glow */ .border-brand-text { box-shadow: 0 0 10px rgba(0, 168, 120, 0.1); } .spacer { display: block; height: 20px; } /* Mobile Menu and Hamburger Animation */ #mobile-menu { transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); } #mobile-menu.hidden { display: none; opacity: 0; pointer-events: none; } #mobile-menu:not(.hidden) { display: block; opacity: 1; pointer-events: auto; } /* Hamburger Animation Styles */ .mobile-menu-active .hamburger-line:nth-child(1) { transform: translateY(8px) rotate(45deg); } .mobile-menu-active .hamburger-line:nth-child(2) { opacity: 0; transform: translateX(10px); } .mobile-menu-active .hamburger-line:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } /* Mobile Nav Tab Styles */ .mobile-nav-tab { position: relative; overflow: hidden; } .mobile-nav-tab[aria-selected="true"] { background-color: #007f5f; color: white; box-shadow: 0 10px 25px -5px rgba(0, 127, 95, 0.4); } /* Scan line effect update */ .aspect-video { box-shadow: 0 0 30px rgba(0, 168, 120, 0.2), inset 0 0 30px rgba(0, 168, 120, 0.05); } @keyframes scan { 0% { transform: translateY(-100%); } 100% { transform: translateY(100%); } } .aspect-video::after { content: ''; position: absolute; top: 0; left: 0; right: 0; animation: scan 4s linear infinite; pointer-events: none; } /* Mobile Menu Item Animations */ #mobile-menu:not(.hidden) .mobile-nav-tab, #mobile-menu:not(.hidden) a.w-full { animation: slideInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards; opacity: 0; } @keyframes slideInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* Staggered Delay for HUD menu items */ .mobile-nav-tab:nth-of-type(1) { animation-delay: 0.1s !important; } .mobile-nav-tab:nth-of-type(2) { animation-delay: 0.2s !important; } .mobile-nav-tab:nth-of-type(3) { animation-delay: 0.3s !important; } #mobile-menu nav>a:nth-of-type(1) { animation-delay: 0.4s !important; } .mobile-nav-tab:nth-of-type(4) { animation-delay: 0.5s !important; } .mobile-nav-tab:nth-of-type(5) { animation-delay: 0.6s !important; } .mobile-nav-tab:nth-of-type(6) { animation-delay: 0.7s !important; } #mobile-menu button:last-of-type { animation-delay: 0.9s !important; } /* HUD Button Specific Styles (Dark Theme) */ .mobile-nav-tab:hover { background: rgba(87, 255, 190, 0.1) !important; border-color: rgb(3, 228, 172); } .mobile-nav-tab[aria-selected="true"] { position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; background: #000000 !important; color: #a3ff00 !important; border-color: #a3ff00 !important; box-shadow: -5px 0 15px rgba(163, 255, 0, 0.3), 5px 0 15px rgba(163, 255, 0, 0.3), inset 8px 0 12px rgba(163, 255, 0, 0.2), inset -8px 0 12px rgba(163, 255, 0, 0.2); text-shadow: 0 0 8px rgba(163, 255, 0, 0.4); animation: neon-pulse 3s infinite ease-in-out; } .mobile-nav-tab[aria-selected="true"]::before { content: ''; position: absolute; left: 1.5rem; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; background-image: url('../images/logo.png'); background-size: contain; background-repeat: no-repeat; background-position: left; filter: drop-shadow(0 0 10px rgba(163, 255, 0, 0.9)) drop-shadow(0 0 20px rgba(163, 255, 0, 0.6)); animation: icon-glow-pulse 3s infinite ease-in-out; } @keyframes neon-pulse { 0%, 100% { box-shadow: -5px 0 15px rgba(163, 255, 0, 0.3), 5px 0 15px rgba(163, 255, 0, 0.3), inset 8px 0 12px rgba(163, 255, 0, 0.2), inset -8px 0 12px rgba(163, 255, 0, 0.2); } 50% { box-shadow: -8px 0 25px rgba(163, 255, 0, 0.4), 8px 0 25px rgba(163, 255, 0, 0.4), inset 12px 0 18px rgba(163, 255, 0, 0.3), inset -12px 0 18px rgba(163, 255, 0, 0.3); } } @keyframes icon-glow-pulse { 0%, 100% { filter: drop-shadow(0 0 8px rgba(163, 255, 0, 0.7)) drop-shadow(0 0 15px rgba(163, 255, 0, 0.4)); transform: translateY(-50%) scale(1); } 50% { filter: drop-shadow(0 0 20px rgba(163, 255, 0, 1)) drop-shadow(0 0 35px rgba(163, 255, 0, 0.8)) drop-shadow(0 0 50px rgba(163, 255, 0, 0.6)); transform: translateY(-50%) scale(1.15); } } /* Feature Card Hover Effect */ .feature-card-emerald { transition: all 0.3s ease; box-shadow: none !important; } .feature-card-emerald:hover { background-color: #f0fdf4 !important; /* Light emerald green */ border-color: rgba(0, 127, 95, 0.2); } /* Futuristic Timeline Styles */ .timeline-container { position: relative; max-width: 1000px; margin: 0 auto; padding: 2rem 0; } .timeline-container::after { content: ''; position: absolute; width: 2px; background: linear-gradient(to bottom, transparent, #007f5f, #57ffbe, #007f5f, transparent); top: 0; bottom: 0; left: 50%; margin-left: -1px; box-shadow: 0 0 10px rgba(87, 255, 190, 0.5); } .timeline-item { padding: 10px 40px; position: relative; background-color: inherit; width: 50%; opacity: 0; transform: translateY(20px); animation: fadeInTimeline 0.6s ease forwards; } @keyframes fadeInTimeline { to { opacity: 1; transform: translateY(0); } } .timeline-item::after { content: ''; position: absolute; width: 16px; height: 16px; right: -8px; background-color: #fcfaf0; border: 3px solid #007f5f; top: 24px; border-radius: 50%; z-index: 1; box-shadow: 0 0 10px #57ffbe; transition: all 0.3s ease; } .timeline-item.left { left: 0; } .timeline-item.right { left: 50%; } .timeline-item.left::after { right: -8px; } .timeline-item.right::after { left: -8px; } .timeline-content { background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(10px); border: 1px solid rgba(0, 168, 120, 0.2); border-radius: 12px; padding: 20px; position: relative; transition: all 0.3s ease; } .timeline-content:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0, 168, 120, 0.15); border-color: rgba(87, 255, 190, 0.8); } .timeline-content::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(87, 255, 190, 0.1) 0%, transparent 100%); opacity: 0; transition: opacity 0.3s ease; border-radius: 12px; pointer-events: none; } .timeline-content:hover::before { opacity: 1; } .timeline-date { display: inline-block; padding: 4px 12px; background: #007f5f; color: white; font-family: 'Orbitron', sans-serif; font-size: 0.85rem; border-radius: 20px; margin-bottom: 10px; box-shadow: 0 0 10px rgba(0, 127, 95, 0.3); letter-spacing: 1px; } .timeline-date .era { font-family: 'Noto Sans JP', sans-serif; font-size: 0.75rem; margin-left: 6px; opacity: 0.9; } .timeline-text { color: #333232; font-size: 0.95rem; line-height: 1.6; } @media screen and (max-width: 768px) { .timeline-container::after { left: 31px; } .timeline-item { width: 100%; padding-left: 70px; padding-right: 15px; } .timeline-item.left::after, .timeline-item.right::after { left: 23px; } .timeline-item.right { left: 0%; } } /* Ken Burns Effect for Slide Images - Reverse (Zoom Out) */ @keyframes ken-burns { 0% { transform: scale(1.3) translate(-2%, -1%); } 100% { transform: scale(1) translate(0, 0); } } .animate-ken-burns { will-change: transform; animation: none; } .is-active .animate-ken-burns { animation: ken-burns 5.0s ease-in-out forwards; } /* Diagonal Double Shine Effect Overlay */ .shine-overlay { position: absolute; top: 0; left: 0; width: 250%; /* Increased for better sweep range */ height: 250%; top: -75%; left: -75%; /* Double line: Main impactful line + Semi-transparent companion */ background: linear-gradient(115deg, transparent 0%, transparent 40%, rgba(255, 255, 255, 0.4) 43%, /* Companion line */ transparent 46%, transparent 47%, rgba(255, 255, 255, 0.9) 50%, /* Main impactful line */ transparent 53%, transparent 100%); pointer-events: none; z-index: 10; animation: none; opacity: 0; will-change: transform, opacity; } .is-active .shine-overlay { /* Precise sync: Starts at 3.5s, finishes at 5.0s (transition point) */ animation: diagonal-double-shine 1.5s cubic-bezier(0.16, 1, 0.3, 1) 3.5s forwards; } @keyframes diagonal-double-shine { 0% { opacity: 0; transform: translate(45%, 45%); } 10% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; transform: translate(-45%, -45%); } } /* Modal vertical expansion animation */ .modal-animate-in { animation: modalExpandVertical 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; transform-origin: center; } @keyframes modalExpandVertical { from { opacity: 0; transform: scaleY(0.7) translateY(-10px); } to { opacity: 1; transform: scaleY(1) translateY(0); } } /* ================================== Futuristic Boot Sequence Loader ================================== */ .animate-spin-slow { animation: spin-slow 10s linear infinite; } .animate-spin-reverse { animation: spin-reverse 15s linear infinite; } @keyframes spin-slow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes spin-reverse { from { transform: rotate(360deg); } to { transform: rotate(0deg); } } .loader-icon-pulse { animation: loader-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } @keyframes loader-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.6; transform: scale(0.95); } } .loader-dot-1 { animation: loader-blink 1.5s infinite; } .loader-dot-2 { animation: loader-blink 1.5s infinite 0.3s; } .loader-dot-3 { animation: loader-blink 1.5s infinite 0.6s; } @keyframes loader-blink { 0%, 100% { opacity: 0.2; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.2); box-shadow: 0 0 8px #57ffbe; } } /* Loader Exit Animations */ body.loaded-state { overflow: auto; } /* Background fade: black → white over the full loader duration */ @keyframes loader-bg-fade { 0% { background-color: #000000; } 100% { background-color: #ffffff; } } #futuristic-loader { animation: loader-bg-fade 2.0s ease-in-out forwards; } #futuristic-loader.loader-hidden { opacity: 0; pointer-events: none; /* background is already white at this point */ background-color: #ffffff; transition: opacity 0.8s ease-in-out; } #futuristic-loader.loader-hidden .loader-split-top { transform: translateY(-100%); } #futuristic-loader.loader-hidden .loader-split-bottom { transform: translateY(100%); } #futuristic-loader.loader-hidden .loader-hud-container { transform: scale(2); opacity: 0; transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); } /* Metallic Green Header/Style */ .modal-header-metallic { background: linear-gradient(to bottom, #005a5c 0%, #004d4f 50%, #003e40 100%) !important; position: relative; overflow: hidden; border-bottom: 2px solid #426F45 !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 4px 6px -1px rgba(0, 0, 0, 0.3); color: #ffffff !important; } .metallic-header { background: linear-gradient(to bottom, #005a5c 0%, #004d4f 50%, #003e40 100%) !important; position: relative; overflow: hidden; border-bottom: 2px solid #426F45; } .metallic-header::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 100%; background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.05) 45%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.05) 55%, transparent 100%); pointer-events: none; z-index: 1; } .metallic-header h3 { color: #ffffff !important; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); position: relative; z-index: 2; } /* Default to white for main table and important headers */ .metallic-header th, .metallic-header span { color: #ffffff !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); position: relative; z-index: 2; } /* Specific modal headers to be dark for cleaner look */ .catch-table .metallic-header th:not(.modal-total-cell) { color: #333232 !important; text-shadow: none; } .metallic-header th { border-color: #426F45 !important; } /* Modal Table Refinements */ .modal-total-cell { background-color: #3f20ca !important; font-weight: 700 !important; color: #f7f7f7 !important; text-shadow: none; border-left: 2px solid #3f20ca !important; } /* Stripe color controlled via bg-purple-row class in JS */ .bg-purple-row { background-color: rgba(99, 102, 241, 0.08) !important; } .catch-table table { border: 2px solid #3f20ca !important; border-collapse: collapse !important; } .catch-table th, .catch-table td { border: 1px solid #e0e7ff !important; } /* Thin indigo border for the catch table rows */ .bg-white td, .bg-brand-base td, .bg-purple-row td, .catch-table tr td, .catch-table tr th { border: 1px solid #e0e7ff !important; } /* Hover function removed per user request */ .catch-table thead { border-bottom: 2px solid #3f20ca !important; position: sticky; top: 0; z-index: 10; } /* Zoom Feature for Modal Table */ .zoom-container { transform-origin: top left; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); width: 100%; min-width: min-content; } .zoom-target { /* Ensure table borders and layout remain consistent when scaled */ backface-visibility: hidden; -webkit-font-smoothing: subpixel-antialiased; } /* .catch-table tr:hover td removed to disable hover effect */ /* Custom Scrollbar for Modal Table */ .custom-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; } .custom-scrollbar::-webkit-scrollbar-track { background: #f1f1f1; } .custom-scrollbar::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 3px; } .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #a1a1a1; } /* Mobile optimizations for Table */ @media (max-width: 768px) { .catch-table th, .catch-table td { padding: 0.5rem 0.75rem !important; font-size: 12px !important; } .metallic-header th { font-size: 13px !important; } } /* Responsive display utilities */ @media (max-width: 767px) { .hidden-mobile { display: none !important; } } .mobile-total-row { background-color: rgba(66, 111, 69, 0.08) !important; display: none; } @media (max-width: 767px) { .mobile-total-row { display: table-row !important; } } .mobile-total-row td { border-bottom: 2px solid #ff8018 !important; color: #ff8018 !important; font-weight: 800 !important; padding-left: 1.5rem !important; } .text-mikan { color: #F39800 !important; } /* Modal Footer Button */ .btn-modal-footer-close { color: #F39800 !important; background-color: #ffffff !important; border: 1px solid #F39800 !important; transition: all 0.3s ease !important; } .btn-modal-footer-close:hover { color: #ffffff !important; background-color: #F39800 !important; }