/* ====================================================================== style-prod-music-v2.css Safer, page-scoped stylesheet for prod-music.html only. IMPORTANT: 1) In prod-music.html, change to: 2) Link this file instead of style-old.css + style.css. 3) Keep reset.css, contact-form.css, and fonts.css. ====================================================================== */ html { scroll-behavior: smooth; overflow-x: hidden; } body.prod-music-page { text-align: center; font-family: Arial, sans-serif; font-size: 16px; color: #333; background: linear-gradient(0deg, rgba(0,188,212,1) 0%, rgba(85,197,197,1) 0%, rgba(255,255,255,1) 39%, rgba(254,65,151,1) 100%); max-width: 800px; margin: 0 auto; } body.prod-music-page * { box-sizing: border-box; } body.prod-music-page a { color: #462582; text-decoration: none; } body.prod-music-page a:hover { color: #333; } /* Banner */ body.prod-music-page .banner { padding-top: 40px; padding-bottom: 16px; margin-bottom: clamp(16px, 3vw, 40px); } body.prod-music-page .banner h1, body.prod-music-page .banner .animated-header { font-family: 'donovanregular', sans-serif !important; font-weight: 400 !important; } body.prod-music-page .banner h1 { font-size: 4rem; text-align: center; margin: 0; color: #fff; line-height: 1.1; background: none !important; background-image: none !important; height: auto !important; padding-top: 40px; padding-bottom: 10px; } body.prod-music-page .banner .animated-header { display: inline-block; width: 100%; background: linear-gradient(270deg, #0ff, #ff9955, #0ff); background-size: 600% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 0 1px #0ff, 0 0 2px #0ff, 0 0 4px #ff9955; animation: prodBannerGradientMove 6s linear infinite, prodBannerNeonPulse 4s ease-in-out infinite alternate; } @keyframes prodBannerGradientMove { 0% { background-position: 0% 0; } 100% { background-position: 100% 0; } } @keyframes prodBannerNeonPulse { 0% { text-shadow: 0 0 1px #0ff, 0 0 2px #0ff, 0 0 4px #ff9955; } 50% { text-shadow: 0 0 1.5px #0ff, 0 0 3px #0ff, 0 0 5px #ff9955; } 100% { text-shadow: 0 0 1px #0ff, 0 0 2px #0ff, 0 0 4px #ff9955; } } /* Typography matching the original page more closely */ body.prod-music-page .motto { font-size: 40px; margin-top: 12px; margin-bottom: 20px; padding: 10px 16px; font-family: 'AwakeRegular', sans-serif; font-weight: normal; color: #462582; } body.prod-music-page h2 { font-family: 'AwakeRegular', sans-serif; font-weight: normal; color: #462582; font-size: 28px; margin-bottom: 16px; margin-top: .5rem; padding: 0 16px 16px; } body.prod-music-page h4 { font-family: 'AwakeRegular', sans-serif; font-weight: normal; color: #462582; font-size: 20px; margin-bottom: 1rem; margin-top: .5rem; padding-bottom: 30px; } body.prod-music-page p { font-size: 16px; margin-bottom: 25px; font-family: 'AwakeRegular', sans-serif; font-weight: normal; color: #462582; text-align: justify; text-justify: inter-word; padding-left: 15px; padding-right: 15px; } /* Video */ body.prod-music-page .video-container { position: relative; width: 100%; padding-bottom: 56.25%; height: 0; margin-bottom: 36px; } body.prod-music-page .video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } body.prod-music-page .player { margin-bottom: 20px; } /* Services */ body.prod-music-page .services { max-width: 800px; margin: 0 auto; font-family: Arial, sans-serif; } body.prod-music-page .services h2 { font-family: 'donovanregular', sans-serif; font-size: 40px; font-weight: bold; color: #462582; margin-top: 40px; margin-bottom: 20px; } body.prod-music-page .services p { font-family: 'AwakeRegular', sans-serif; font-weight: normal; font-size: 20px; line-height: 1.5; color: #462582; margin-bottom: 20px; text-align: justify; text-justify: inter-word; padding-left: 15px; padding-right: 15px; } body.prod-music-page .services ul { list-style: none; padding: 0 15px; margin-bottom: 20px; text-align: justify; text-justify: inter-word; } body.prod-music-page .services li { font-family: 'AwakeRegular', sans-serif; font-size: 20px; margin-bottom: 10px; padding-left: 20px; padding-bottom: 20px; position: relative; color: #462582; line-height: 1.5; } body.prod-music-page .services li::before { content: "\2022"; position: absolute; left: 0; color: #462582; font-weight: bold; } body.prod-music-page .services a { background-color: rgba(254, 65, 151, 0.77); } /* Links / menu area */ body.prod-music-page .links { text-align: center; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: 36px; padding-top: 10px; background: linear-gradient(180deg, rgba(62,253,255,0.22507645) 0%, rgba(188,254,255,0.36422018348) 32%, rgba(251,254,254,1) 100%); min-height: 550px; padding-bottom: 20px; margin-bottom: 60px; } body.prod-music-page .links a { font-size: 28px; display: block; margin-bottom: 10px; margin-top: 10px; } body.prod-music-page .links > div, body.prod-music-page .menu-wrapper { position: relative; display: inline-block; text-align: center; } body.prod-music-page #dropdown-button { display: block; margin: 0 auto; cursor: pointer; width: 55%; height: auto; position: relative; top: -175px; z-index: 2; } body.prod-music-page #circle-logo { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 60%; max-width: 550px; height: auto; opacity: 0.24; pointer-events: none; z-index: 1; } body.prod-music-page #dropdown-content { position: absolute; left: 50%; transform: translateX(-50%); min-width: 320px; max-width: 90vw; display: none; z-index: 1000; top: -15px; margin-bottom: 40px; } body.prod-music-page #dropdown-content ul { list-style: none; margin: 0; padding: 0; } body.prod-music-page #dropdown-content li { background-color: rgba(254, 65, 151, 0.77); border-bottom: 1px solid #fe4197; } body.prod-music-page #dropdown-content a { display: block; color: white; padding: 6px 10px; text-decoration: none; font-size: 28px; } body.prod-music-page #dropdown-content li:hover { background-color: #3DCFD0; } /* Button */ body.prod-music-page .btn { display: inline-block; color: #FFF; padding: 10px 20px; font-size: 28px; text-transform: uppercase; background-color: #05adb0; border-width: 3px; border-radius: 6px; border-color: #4efcfc; border-style: solid; } /* Social/footer */ body.prod-music-page .food { font-size: 18px; margin-bottom: 16px; font-family: 'AwakeRegular', sans-serif; font-weight: normal; color: #462582; align-items: center; justify-content: center; margin-top: 60px; } body.prod-music-page .footer { font-family: 'AwakeRegular', sans-serif; font-weight: normal; font-size: 12px; color: #462582; margin-bottom: 16px; text-align: center; } body.prod-music-page .footer, body.prod-music-page .footer p { text-align: center; } body.prod-music-page .footer p { font-size: 12px; margin: 0; padding-left: 15px; padding-right: 15px; color: inherit; text-align: center; } body.prod-music-page .footer a { font-size: 12px; color: inherit; } /* Mobile */ @media (max-width: 600px) { body.prod-music-page .banner h1 { font-size: 2.5rem; padding: 0 1rem; padding-top: 40px; } body.prod-music-page .banner .animated-header { width: auto; max-width: 85%; margin: 0 auto; } body.prod-music-page .motto { font-size: 32px; line-height: 1.2; } body.prod-music-page #dropdown-button { width: 70%; top: -135px; } body.prod-music-page #circle-logo { width: 72%; } body.prod-music-page #dropdown-content { min-width: min(320px, 92vw); } body.prod-music-page #dropdown-content a, body.prod-music-page .links a, body.prod-music-page .btn { font-size: 24px; } }