/* ============================================================ AS Links - "uta" theme. Active when . ============================================================ */ .uta-theme { /* Semantic theme palette (overrides the :root defaults). */ --bg-gradient: linear-gradient(135deg, #05101f, #0f1a29); --surface: rgba(255, 255, 255, 0.07); --border: rgba(255, 255, 255, 0.15); --text: #d0e1f9; --text-secondary: rgba(208, 225, 249, 0.7); --grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.15'/%3E%3C/svg%3E"); } .uta-theme * { scrollbar-color: rgba(208, 225, 249, 0.15) rgba(12, 26, 42, 0.05); } .uta-theme .loading-overlay { background: var(--bg-gradient); background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.2'/%3E%3C/svg%3E"), var(--bg-gradient); background-size: 120px, 100%; } .uta-theme .loading-background { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.15'/%3E%3C/svg%3E"); } .uta-theme .as-logo { animation: showLogo 0.5s ease-out forwards, pulseUtaLogo 2s ease-in-out infinite 0.5s; } @keyframes pulseUtaLogo { 0%, 100% { filter: brightness(0.95) drop-shadow(0 0 20px rgba(208, 225, 249, 0)) saturate(0.95); transform: scale(1); } 50% { filter: brightness(1.05) drop-shadow(0 0 30px rgba(208, 225, 249, 0.3)) saturate(1.1); transform: scale(1.02); } } .uta-theme .profile-as-logo { stroke: var(--text); fill: transparent; filter: drop-shadow(0 2px 12px rgba(208, 225, 249, 0.3)); animation: fillLogoUta 1.5s ease-out forwards 0.5s; } @keyframes fillLogoUta { from { fill: transparent; } to { fill: var(--text); } } .links-page.uta-theme::after { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.2'/%3E%3C/svg%3E"), var(--bg-gradient); background-size: 120px, 100%; opacity: 1; } .uta-theme .link-item { background: var(--surface); border-color: var(--border); color: var(--text); } .uta-theme .link-item:hover { background: rgba(208, 225, 249, 0.15); border-color: rgba(208, 225, 249, 0.3); } .uta-theme .theme-switch { background: rgba(12, 26, 42, 0.3); border-color: rgba(208, 225, 249, 0.15); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); } .uta-theme .theme-switch:hover { background: rgba(12, 26, 42, 0.4); border-color: rgba(208, 225, 249, 0.25); } .uta-theme .theme-switch i { background: linear-gradient(135deg, #d0e1f9, rgba(208, 225, 249, 0.8)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; transform: rotate(90deg); filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2)); } .uta-theme .section-title { color: var(--text-secondary); } .uta-theme::before { content: ''; position: fixed; inset: 0; background-image: url('data:image/png;base64,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'); opacity: 0.05; pointer-events: none; z-index: 0; } .uta-theme .bio { color: rgba(208, 225, 249, 0.7); } .uta-theme .profile-website { background: rgba(208, 225, 249, 0.05); border: 1px solid rgba(208, 225, 249, 0.1); color: rgba(208, 225, 249, 0.8); } .uta-theme .profile-website:hover { background: rgba(208, 225, 249, 0.1); border-color: rgba(208, 225, 249, 0.2); } .uta-theme .streaming-modal { background: rgba(12, 26, 42, 0.95); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .uta-theme .streaming-popup { background: rgba(28, 43, 58, 0.2); border-color: rgba(208, 225, 249, 0.1); } .uta-theme .streaming-popup h3 { color: var(--text); } .uta-theme .streaming-link { border: 1px solid rgba(208, 225, 249, 0.1); color: var(--text); transition: all 0.3s ease; } .uta-theme .streaming-link:hover { background: rgba(208, 225, 249, 0.1); border-color: rgba(208, 225, 249, 0.2); transform: translateY(-2px); } .uta-theme .streaming-link i { color: rgba(255, 255, 255, 0.9) !important; transition: color 0.3s ease, transform 0.3s ease; } .uta-theme .streaming-link:hover i { color: rgba(255, 255, 255, 1) !important; transform: scale(1.1); } .uta-theme .streaming-link[data-platform="spotify"]:hover i { color: #1DB954; } .uta-theme .streaming-link[data-platform="apple"]:hover i { color: #FA243C; } .uta-theme .streaming-link[data-platform="youtube"]:hover i { color: #FF0000; } .uta-theme .streaming-link[data-platform="soundcloud"]:hover i { color: #FF3300; } .uta-theme .streaming-link[data-platform="tidal"]:hover i { color: #00FFFF; } .uta-theme .streaming-link[data-platform="amazon"]:hover i { color: #00A8E1; } .uta-theme .coming-soon-modal { background: rgba(12, 26, 42, 0.95); } .uta-theme .coming-soon-popup { background: rgba(28, 43, 58, 0.2); border-color: rgba(208, 225, 249, 0.1); } .uta-theme .coming-soon-content h3, .uta-theme .coming-soon-content p, .uta-theme .coming-soon-icon { color: var(--text); } .uta-theme .coming-soon-subtext { color: rgba(208, 225, 249, 0.6); } .uta-theme::-webkit-scrollbar-track { background: rgba(12, 26, 42, 0.05); } .uta-theme::-webkit-scrollbar-thumb { background: rgba(208, 225, 249, 0.15); } .uta-theme::-webkit-scrollbar-thumb:hover { background: rgba(208, 225, 249, 0.25); } .uta-theme .loading-overlay .logo-animation .as-text { filter: drop-shadow(0 0 5px rgba(208, 225, 249, 0.4)); } .uta-theme .profile-logo-container { position: relative; } @keyframes revertFillUta { from { fill: var(--text); } to { fill: transparent; } } .uta-theme .profile-as-logo-svg { filter: brightness(1.05); -webkit-transform: scale(1.6); transform: scale(1.6); } .uta-theme .links-page::after { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.2'/%3E%3C/svg%3E"), var(--bg-gradient); background-size: 120px, 100%; opacity: 1; } .uta-theme .latest-release, .uta-theme .coming-soon, .uta-theme .release-badge, .uta-theme .release-type, .uta-theme .release-meta span, .uta-theme .release-info-mini, .uta-theme .countdown-block, .uta-theme .release-description, .uta-theme .countdown-value, .uta-theme .countdown-label { transition-duration: 0.3s; transition-timing-function: ease; } .links-page.uta-theme::before, .links-page.uta-theme::after { transition: opacity 0.5s ease, background-image 0.5s ease; } .theme-transition.uta-theme { animation: themeTransition 0.4s ease-out; } .uta-theme.theme-transition.to-light { animation: utaToLightTransition 0.5s ease-out forwards; -webkit-transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); } .uta-theme .link-item.tidal .link-icon i, .uta-theme .link-item.amazon-music .link-icon i, .uta-theme .link-item.twitter .link-icon i { color: var(--text); } .uta-theme .link-item.tidal:hover .link-icon i, .uta-theme .link-item.amazon-music:hover .link-icon i, .uta-theme .link-item.twitter:hover .link-icon i { color: var(--text); opacity: 0.8; } .uta-theme .link-icon i { color: white; } .uta-theme .link-item:hover .link-icon i { color: white; opacity: 0.8; } .uta-theme .link-item.spotify:hover .link-icon i, .uta-theme .link-item.apple-music:hover .link-icon i, .uta-theme .link-item.youtube:hover .link-icon i, .uta-theme .link-item.soundcloud:hover .link-icon i, .uta-theme .link-item.tidal:hover .link-icon i, .uta-theme .link-item.amazon-music:hover .link-icon i, .uta-theme .link-item.instagram:hover .link-icon i, .uta-theme .link-item.twitter:hover .link-icon i, .uta-theme .link-item.tiktok:hover .link-icon i { color: white; opacity: 0.8; } .uta-theme .latest-release { border: 1px solid rgba(208, 225, 249, 0.1); backdrop-filter: blur(20px); transform: translateY(0); transition: transform 0.3s ease, background-color 0.3s ease, border-color 0.3s ease; } .uta-theme .release-details h3 { color: var(--text); background: linear-gradient(to right, var(--text), rgba(208, 225, 249, 0.8)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .uta-theme .release-meta span { background: rgba(208, 225, 249, 0.05); border: 1px solid rgba(208, 225, 249, 0.1); color: var(--text); } .uta-theme .release-meta span:hover { background: rgba(208, 225, 249, 0.1); border-color: rgba(208, 225, 249, 0.2); } .uta-theme .release-description { color: rgba(208, 225, 249, 0.7); } .uta-theme .release-type { background: rgba(208, 225, 249, 0.05); border: 1px solid rgba(208, 225, 249, 0.1); color: var(--text); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; padding: 6px 12px; border-radius: 8px; transition: all 0.3s ease; } .uta-theme .release-type:hover { background: rgba(208, 225, 249, 0.1); border-color: rgba(208, 225, 249, 0.2); } .uta-theme .release-type i { color: var(--text); opacity: 0.8; font-size: 12px; transition: transform 0.3s ease; } .uta-theme .release-badge { background: rgba(208, 225, 249, 0.05); border: 1px solid rgba(208, 225, 249, 0.1); color: var(--text); backdrop-filter: blur(10px); transition: all 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease; } .uta-theme .release-badge:hover { background: rgba(208, 225, 249, 0.1); border-color: rgba(208, 225, 249, 0.2); } .uta-theme .release-badge i { color: var(--text); opacity: 0.9; } .uta-theme .stream-now { background: linear-gradient(135deg, rgba(208, 225, 249, 0.9), rgba(208, 225, 249, 0.7)); color: #0c1a2a; border: 1px solid rgba(208, 225, 249, 0.2); box-shadow: 0 2px 4px rgba(12, 26, 42, 0.1); position: relative; overflow: hidden; transition: all 0.3s ease; } .uta-theme .stream-now::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(208, 225, 249, 0.2), rgba(208, 225, 249, 0.1)); opacity: 0; transition: opacity 0.3s ease; } .uta-theme .stream-now:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(12, 26, 42, 0.15); background: linear-gradient(135deg, rgba(208, 225, 249, 1), rgba(208, 225, 249, 0.8)); } .uta-theme .stream-now:hover::before { opacity: 1; } .uta-theme .stream-now:active { transform: translateY(0); box-shadow: 0 2px 4px rgba(12, 26, 42, 0.1); } .uta-theme .release-actions .stream-now { background: linear-gradient(135deg, rgba(208, 225, 249, 0.9), rgba(208, 225, 249, 0.7)) !important; color: #0c1a2a !important; border: 1px solid rgba(208, 225, 249, 0.2) !important; } .uta-theme .presave-card { background: radial-gradient(circle at 10% 15%, rgba(208, 225, 249, 0.08), transparent 46%), linear-gradient(160deg, rgba(208, 225, 249, 0.04), rgba(208, 225, 249, 0.015)); border-color: rgba(208, 225, 249, 0.14); } .uta-theme .presave-card:hover { border-color: rgba(208, 225, 249, 0.3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 20px 48px rgba(0, 0, 0, 0.25), 0 0 60px rgba(208, 225, 249, 0.06); } .uta-theme .presave-card::before { background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(208, 225, 249, 0.11) 0%, transparent 42%); } .uta-theme .presave-artwork { border-color: rgba(208, 225, 249, 0.2); background: linear-gradient(160deg, #1b3c5f, #0c1a2a); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35); } .uta-theme .presave-title { background: linear-gradient(to right, var(--text), rgba(208, 225, 249, 0.8)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .uta-theme .presave-overline { color: rgba(208, 225, 249, 0.6); } .uta-theme .presave-subtitle { color: rgba(208, 225, 249, 0.7); } .uta-theme .presave-platforms { border-color: rgba(208, 225, 249, 0.16); background: rgba(208, 225, 249, 0.04); } .uta-theme .presave-platforms i { color: var(--text); opacity: 0.75; } .uta-theme .presave-platform:hover, .uta-theme .presave-platform:focus-visible { background: rgba(208, 225, 249, 0.14); border-color: rgba(208, 225, 249, 0.28); } .uta-theme .presave-platform:hover i, .uta-theme .presave-platform:focus-visible i { color: white; opacity: 1; } .uta-theme .presave-platform-name { color: rgba(208, 225, 249, 0.95); } .uta-theme .countdown { display: flex; gap: 15px; justify-content: center; align-items: center; } .uta-theme .countdown-block { background: rgba(208, 225, 249, 0.05); border: 1px solid rgba(208, 225, 249, 0.1); border-radius: 12px; padding: 20px; min-width: 80px; text-align: center; transition: all 0.3s ease; } .uta-theme .countdown-block:hover { background: rgba(208, 225, 249, 0.1); border-color: rgba(208, 225, 249, 0.2); transform: translateY(-2px); } .uta-theme .countdown-value { font-size: 32px; font-weight: 600; color: var(--text); background: linear-gradient(135deg, rgba(208, 225, 249, 1), rgba(208, 225, 249, 0.8)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .uta-theme .countdown-label { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: rgba(208, 225, 249, 0.7); margin-top: 8px; } .uta-theme .share-release { background: rgba(208, 225, 249, 0.05); border: 1px solid rgba(208, 225, 249, 0.1); color: var(--text); transition: all 0.3s ease; } .uta-theme .share-release:hover { background: rgba(208, 225, 249, 0.1); border-color: rgba(208, 225, 249, 0.2); transform: translateY(-2px); } .uta-theme .share-release i { color: var(--text); transition: transform 0.3s ease; } .uta-theme .share-release:hover i { transform: scale(1.1); } .uta-theme .scroll-top { background: rgba(208, 225, 249, 0.05); border: 1px solid rgba(208, 225, 249, 0.1); color: var(--text); transition: all 0.3s ease; } .uta-theme .scroll-top:hover { background: rgba(208, 225, 249, 0.1); border-color: rgba(208, 225, 249, 0.2); transform: translateY(-2px); } .uta-theme .scroll-top i { color: var(--text); transition: transform 0.3s ease; } .uta-theme .scroll-top:hover i { transform: scale(1.1); } .uta-theme .profile-logo-container .profile-as-logo { -webkit-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } @-webkit-keyframes revertFillUta { from { fill: var(--text); } to { fill: transparent; } } @keyframes revertFillUta { from { fill: var(--text); } to { fill: transparent; } } @media (max-width: 768px) { .uta-theme .countdown { gap: 10px; } .uta-theme .countdown-block { padding: 15px; min-width: 60px; } .uta-theme .countdown-value { font-size: 24px; } .uta-theme .countdown-label { font-size: 10px; } } .link-item.uta-teaser:hover { background: radial-gradient(circle at top, rgba(208, 225, 249, 0.16), transparent 62%), linear-gradient(180deg, rgba(10, 22, 41, 0.94), rgba(12, 24, 44, 0.72)); transform: translateY(-2px) scale(1.01); border-color: rgba(208, 225, 249, 0.22); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 10px 24px rgba(0, 0, 0, 0.12); } .link-item.uta-teaser:hover::before { opacity: 0.82; } .link-item.uta-teaser:hover::after { display: none; }