/* Note: Audiowide & Michroma fonts are now loaded via in HTML (faster than @import, which blocks parallel discovery). */ /* ===== Variables ===== */ :root{ --font-display: 'Audiowide','Michroma','Orbitron','Segoe UI',sans-serif; --matrix-lead: #e0aaff; --matrix-trail: #7b2cbf; --matrix-hero-lead: #ffd9b3; --matrix-hero-trail: #ff7a18; --purple:#7b2cbf; --purple-deep:#3c096c; --purple-light:#c77dff; --orange:#ff7a18; --orange-soft:#ffb36b; --pink:#ff3cac; --cyan:#00e0ff; --white:#ffffff; --black:#0a0a0a; --bg-soft:#faf6ff; --txt:#221833; --txt-soft:#5b4a6e; --card-bg: linear-gradient(140deg,#ffffff 0%,#fff0db 55%,#ecd9ff 100%); --section-light-bg: linear-gradient(135deg,#ffffff 0%,#ffe7cc 50%,#e8d4ff 100%); --header-bg: rgba(0,0,0,.85); --shadow: 0 10px 30px rgba(60,9,108,.12); --shadow-strong: 0 25px 60px -10px rgba(60,9,108,.45); --radius: 16px; --grad-main: linear-gradient(135deg,#7b2cbf 0%,#ff3cac 50%,#ff7a18 100%); --grad-cool: linear-gradient(135deg,#3c096c 0%,#7b2cbf 50%,#00e0ff 100%); --grad-warm: linear-gradient(135deg,#ff3cac 0%,#ff7a18 100%); --grad-dark: linear-gradient(135deg,#1a0033 0%,#3c096c 60%,#000 100%); --grad-light: linear-gradient(135deg,#fdf6ff 0%,#f3e8ff 35%,#fff1e0 100%); --grad-light-alt: linear-gradient(135deg,#ffffff 0%,#ffe7cc 50%,#e8d4ff 100%); --grad-card: linear-gradient(140deg,#ffffff 0%,#fff0db 55%,#ecd9ff 100%); --grad-purple-heavy: linear-gradient(135deg,#1a0033 0%,#3c096c 25%,#5a189a 55%,#7b2cbf 80%,#9d4edd 100%); } /* ===== Dark theme ===== */ [data-theme="dark"]{ --bg-soft:#0a0014; --txt:#e8d9ff; --txt-soft:#b59ed6; --card-bg: linear-gradient(140deg,#1c0633 0%,#2a0a4a 55%,#3c0a5e 100%); --section-light-bg: linear-gradient(135deg,#0f0322 0%,#2a0a4a 50%,#3c0a5e 100%); --header-bg: rgba(0,0,0,.95); --shadow: 0 10px 30px rgba(0,0,0,.5); --shadow-strong: 0 25px 60px -10px rgba(255,60,172,.35); } [data-theme="dark"] body{ background: radial-gradient(1200px 600px at 10% -10%, rgba(199,125,255,.20), transparent 60%), radial-gradient(900px 500px at 110% 10%, rgba(255,122,24,.15), transparent 60%), radial-gradient(800px 500px at 50% 100%, rgba(255,60,172,.12), transparent 60%), linear-gradient(135deg,#0a0014 0%,#1a0033 50%,#0a0014 100%); } [data-theme="dark"] .section-sub, [data-theme="dark"] .track-card p, [data-theme="dark"] .tl-card p, [data-theme="dark"] .social-card .meta span, [data-theme="dark"] .service-card p, [data-theme="dark"] .release-card p, [data-theme="dark"] .bio-block p, [data-theme="dark"] .faq details > *:not(summary){color:var(--txt-soft)} [data-theme="dark"] .track-card h3, [data-theme="dark"] .tl-card h3, [data-theme="dark"] .social-card .meta strong, [data-theme="dark"] .service-card h3, [data-theme="dark"] .release-card h3, [data-theme="dark"] .faq summary, [data-theme="dark"] .tab-btn{color:#fff} [data-theme="dark"] .tracks-tabs{background:#1c0633;border-color:rgba(199,125,255,.15)} [data-theme="dark"] .loc-chip{ background:linear-gradient(135deg,rgba(199,125,255,.18),rgba(255,122,24,.18)); color:#fff;border-color:rgba(199,125,255,.3); } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ font-family:'Inter','Segoe UI',system-ui,sans-serif; color:var(--txt); background: radial-gradient(1200px 600px at 10% -10%, rgba(199,125,255,.28), transparent 60%), radial-gradient(900px 500px at 110% 10%, rgba(255,122,24,.22), transparent 60%), radial-gradient(800px 500px at 50% 100%, rgba(255,60,172,.10), transparent 60%), var(--grad-light); background-attachment:fixed; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; } /* Light gradient section (replaces pure #fff) — white → orange → purple */ .section-light{ background:var(--section-light-bg); position:relative; } /* Purple-heavy variant for Services & collaborations */ .section-purple{ background:var(--grad-purple-heavy); background-size:200% 200%; animation:gradientShift 14s ease infinite; position:relative;color:#fff;overflow:hidden; } .section-purple::before{ content:"";position:absolute;inset:0;pointer-events:none; background: radial-gradient(700px 350px at 0% 0%, rgba(255,60,172,.25), transparent 60%), radial-gradient(700px 350px at 100% 100%, rgba(255,122,24,.22), transparent 60%), radial-gradient(600px 300px at 50% 50%, rgba(199,125,255,.18), transparent 60%); } .section-purple > *{position:relative;z-index:1} .section-purple .section-title{ background:linear-gradient(90deg,#fff 0%,#ffd9b3 50%,#fff 100%); background-size:200% 100%; -webkit-background-clip:text;background-clip:text;color:transparent; animation:gradientShift 6s ease infinite; } .section-purple .section-sub{color:rgba(255,255,255,.85)} .section-purple .service-card{ background:linear-gradient(140deg,rgba(255,255,255,.08) 0%,rgba(199,125,255,.12) 100%); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.12); color:#fff; } .section-purple .service-card h3{color:#fff} .section-purple .service-card p{color:rgba(255,255,255,.85)} .section-purple .service-card .svc-ico{ background:linear-gradient(135deg,#ff7a18,#ff3cac); box-shadow:0 12px 28px -6px rgba(255,60,172,.6); } .section-purple .service-card:hover{ border-color:var(--orange); background:linear-gradient(140deg,rgba(255,255,255,.14) 0%,rgba(199,125,255,.20) 100%); } .section-purple .loc-chip{ background:rgba(255,255,255,.10);color:#fff;border-color:rgba(255,255,255,.20); backdrop-filter:blur(6px); } .section-purple .loc-chip i{color:var(--orange-soft)} .section-purple .loc-chip:hover{ background:var(--grad-warm);color:#000;border-color:transparent; } .section-purple .loc-chip:hover i{color:#000} .section-light::before{ content:"";position:absolute;inset:0;pointer-events:none; background: radial-gradient(700px 350px at 0% 0%, rgba(255,255,255,.7), transparent 60%), radial-gradient(700px 350px at 50% 50%, rgba(255,122,24,.10), transparent 60%), radial-gradient(700px 350px at 100% 100%, rgba(123,44,191,.12), transparent 60%); } .section-light > *{position:relative;z-index:1} img{max-width:100%;display:block} a{color:inherit;text-decoration:none} /* ===== Animated gradient utility ===== */ @keyframes gradientShift{ 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } .gradient-animated{ background-size:200% 200%; animation:gradientShift 8s ease infinite; } /* ===== Reveal on scroll ===== */ .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)} .reveal.in{opacity:1;transform:none} .reveal.delay-1{transition-delay:.08s} .reveal.delay-2{transition-delay:.16s} .reveal.delay-3{transition-delay:.24s} .reveal.delay-4{transition-delay:.32s} @media (prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;transition:none} *{animation:none!important;transition:none!important} } /* ===== Header / Navbar ===== */ .site-header{ background:var(--header-bg); backdrop-filter:blur(14px) saturate(160%); -webkit-backdrop-filter:blur(14px) saturate(160%); color:#fff; position:sticky;top:0;z-index:50; border-bottom:1px solid rgba(255,255,255,.06); } .site-header::after{ content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px; background:var(--grad-main);background-size:200% 100%; animation:gradientShift 6s linear infinite; } .nav-wrap{ max-width:1200px;margin:0 auto; display:flex;align-items:center;justify-content:space-between; padding:14px 22px; } .brand{ font-family:var(--font-display); font-weight:800;letter-spacing:.18em;font-size:1.25rem; color:#fff; position:relative;transition:transform .3s ease; } .brand:hover{transform:scale(1.05)} .brand span{ background:var(--grad-warm);-webkit-background-clip:text;background-clip:text;color:transparent; } .nav-links{display:flex;gap:6px;flex-wrap:wrap;align-items:center} .nav-links a{ color:#fff;padding:10px 14px;border-radius:10px; font-weight:500;letter-spacing:.04em; transition:color .25s ease,background .25s ease,transform .25s ease; position:relative; } .nav-links a::after{ content:"";position:absolute;left:14px;right:14px;bottom:6px; height:2px;background:var(--grad-warm);transform:scaleX(0);transform-origin:left; transition:transform .35s cubic-bezier(.2,.7,.2,1); border-radius:2px; } .nav-links a:hover{color:var(--orange-soft);transform:translateY(-2px)} .nav-links a:hover::after{transform:scaleX(1)} .nav-links a.active{color:var(--orange)} .nav-links a.active::after{transform:scaleX(1)} .lang-switch{ margin-left:10px;border:1px solid rgba(255,255,255,.15);border-radius:10px;overflow:hidden; display:inline-flex; } .lang-switch a{padding:8px 12px;font-size:.85rem;letter-spacing:.1em;border-radius:0} .lang-switch a:hover{background:rgba(255,255,255,.06)} .lang-switch a.on{background:var(--grad-warm);color:#000;font-weight:700} .menu-toggle{display:none;background:none;border:0;color:#fff;font-size:1.6rem;cursor:pointer} @media (max-width:820px){ .menu-toggle{display:block} .nav-links{ display:none;position:absolute;top:100%;left:0;right:0; background:rgba(0,0,0,.95);flex-direction:column;align-items:stretch; padding:10px 16px;border-bottom:2px solid var(--purple); } .nav-links.open{display:flex} .nav-links a{padding:12px 8px} .nav-links a::after{display:none} } /* ===== Hero ===== */ .hero{ background:var(--grad-dark); color:#fff;padding:110px 22px 130px;text-align:center;position:relative;overflow:hidden; } .hero::before{ content:"";position:absolute;inset:-40% -20% auto auto;width:60vmax;height:60vmax; background:radial-gradient(closest-side,var(--orange) 0%,transparent 70%); opacity:.35;filter:blur(20px); animation:floatA 14s ease-in-out infinite; } .hero::after{ content:"";position:absolute;inset:auto auto -40% -20%;width:55vmax;height:55vmax; background:radial-gradient(closest-side,var(--pink) 0%,transparent 70%); opacity:.28;filter:blur(30px); animation:floatB 18s ease-in-out infinite; } @keyframes floatA{ 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-30px,40px) scale(1.1)} } @keyframes floatB{ 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(40px,-30px) scale(1.15)} } .hero > *{position:relative;z-index:2} .hero canvas.hero-matrix{ position:absolute;inset:0;width:100%;height:100%; z-index:1;opacity:.45; mix-blend-mode:screen;pointer-events:none; } .hero::before, .hero::after{z-index:0} .hero h1{ font-family:var(--font-display);font-size:clamp(2rem,5vw,3.8rem); letter-spacing:.1em;margin-bottom:14px;text-transform:uppercase; background:linear-gradient(90deg,#fff,#ffd9b3,#fff); background-size:200% 100%; -webkit-background-clip:text;background-clip:text;color:transparent; animation:gradientShift 6s ease infinite; } .hero h1 .accent{ background:var(--grad-warm);-webkit-background-clip:text;background-clip:text;color:transparent; } .hero p{max-width:720px;margin:0 auto 32px;font-size:1.12rem;opacity:.95} .hero .cta{display:inline-flex;gap:14px;flex-wrap:wrap;justify-content:center} .btn{ display:inline-flex;align-items:center;gap:10px; padding:14px 28px;border-radius:999px;font-weight:600; letter-spacing:.06em;border:2px solid transparent;cursor:pointer; transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease,background .3s ease,color .3s ease; position:relative;overflow:hidden; } .btn::before{ content:"";position:absolute;inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent); transform:translateX(-100%);transition:transform .6s ease; } .btn:hover::before{transform:translateX(100%)} .btn-primary{ background:var(--grad-warm);color:#0a0a0a; box-shadow:0 10px 30px -5px rgba(255,60,172,.5); } .btn-primary:hover{ transform:translateY(-4px) scale(1.04); box-shadow:0 20px 45px -10px rgba(255,122,24,.7); } .btn-ghost{border-color:#fff;color:#fff;background:rgba(255,255,255,.04)} .btn-ghost:hover{ background:#fff;color:var(--purple-deep);transform:translateY(-4px) scale(1.04); box-shadow:0 20px 45px -10px rgba(255,255,255,.35); } /* ===== Sections ===== */ .section{padding:90px 22px;position:relative} .section .inner{max-width:1100px;margin:0 auto} .section-title{ font-family:var(--font-display);letter-spacing:.08em;text-transform:uppercase; font-size:clamp(1.6rem,3vw,2.4rem);margin-bottom:12px; background:var(--grad-cool);-webkit-background-clip:text;background-clip:text;color:transparent; } .section-title .accent{ background:var(--grad-warm);-webkit-background-clip:text;background-clip:text;color:transparent; } .section-sub{color:#5b4a6e;margin-bottom:36px;max-width:740px} /* ===== Cards / Tracks ===== */ .tracks-tabs{ display:flex;gap:8px;flex-wrap:wrap;margin-bottom:28px; background:#fff;padding:6px;border-radius:16px;box-shadow:var(--shadow);width:fit-content; border:1px solid rgba(123,44,191,.08); } .tab-btn{ border:0;background:transparent;padding:11px 20px;border-radius:12px; font-weight:600;letter-spacing:.05em;cursor:pointer;color:var(--purple-deep); transition:all .3s ease;display:inline-flex;align-items:center;gap:8px; } .tab-btn i{font-size:1rem} .tab-btn:hover{color:#fff;background:linear-gradient(135deg,rgba(123,44,191,.6),rgba(255,122,24,.6))} .tab-btn.active{ background:var(--grad-main);color:#fff; box-shadow:0 8px 22px -6px rgba(255,60,172,.6); } .tracks-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:22px} .track-card{ background:var(--card-bg);border-radius:var(--radius);overflow:hidden; box-shadow:var(--shadow); transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s ease,border-color .3s ease; border:2px solid transparent; position:relative; } .track-card::before{ content:"";position:absolute;inset:0;border-radius:var(--radius); background:var(--grad-main);opacity:0;transition:opacity .4s ease; z-index:0; } .track-card > *{position:relative;z-index:1} .track-card:hover{ transform:translateY(-10px) scale(1.02); box-shadow:var(--shadow-strong); border-color:transparent; } .track-card:hover::before{opacity:.06} .track-card .card-body{padding:22px 22px 24px} .track-card h3{ color:var(--purple-deep);margin-bottom:8px;font-size:1.1rem; display:flex;align-items:center;gap:12px; } .track-card h3 .card-ico{ width:42px;height:42px;border-radius:12px;display:grid;place-items:center; background:var(--grad-main);color:#fff;font-size:1.1rem;flex-shrink:0; box-shadow:0 8px 20px -6px rgba(123,44,191,.5); transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s ease; } .track-card:hover h3 .card-ico{ transform:rotate(-8deg) scale(1.12); box-shadow:0 12px 28px -6px rgba(255,60,172,.7); } .track-card p{font-size:.92rem;color:#6b5b80} .tracks-panel{display:none} .tracks-panel.active{display:block;animation:fade .45s cubic-bezier(.2,.7,.2,1)} @keyframes fade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} /* ===== Timeline ===== */ .timeline{position:relative;padding:30px 0;margin-top:30px} .timeline::before{ content:"";position:absolute;left:50%;top:0;bottom:0;width:4px; background:var(--grad-main);background-size:100% 300%; animation:gradientShift 10s ease infinite; transform:translateX(-50%);border-radius:4px; box-shadow:0 0 24px rgba(255,60,172,.4); } .tl-item{ position:relative;width:50%;padding:24px 44px; } .tl-item:nth-child(odd){left:0;text-align:right} .tl-item:nth-child(even){left:50%} .tl-item::after{ content:"";position:absolute;top:42px;width:20px;height:20px;border-radius:50%; background:var(--grad-warm);border:4px solid #fff; box-shadow:0 0 0 3px var(--purple),0 0 18px rgba(255,122,24,.6); transition:transform .35s ease,box-shadow .35s ease; } .tl-item:nth-child(odd)::after{right:-10px} .tl-item:nth-child(even)::after{left:-10px} .tl-item:hover::after{ transform:scale(1.35); box-shadow:0 0 0 3px var(--purple),0 0 28px rgba(255,122,24,.9); } .tl-card{ background:var(--card-bg);border-radius:var(--radius);padding:0 0 22px;box-shadow:var(--shadow); border:2px solid transparent; transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s ease,border-color .3s ease; overflow:hidden;position:relative; } .tl-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-strong); border-color:var(--orange); } .tl-card .tl-body{padding:16px 22px 0} .tl-year{ display:inline-block;background:var(--grad-main);color:#fff;padding:5px 14px;border-radius:999px; font-family:var(--font-display);font-weight:700;letter-spacing:.1em;font-size:.85rem;margin-bottom:10px; box-shadow:0 6px 18px -4px rgba(123,44,191,.5); } .tl-card h3{color:var(--purple-deep);margin-bottom:6px;font-size:1.1rem} .tl-card p{color:#5b4a6e;font-size:.95rem} .tl-img{ width:100%;aspect-ratio:16/9; background-size:cover;background-position:center; position:relative;overflow:hidden; } .tl-img::after{ content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(60,9,108,.0) 0%,rgba(60,9,108,.55) 100%); transition:background .4s ease; } .tl-card:hover .tl-img::after{ background:linear-gradient(180deg,rgba(60,9,108,.0) 0%,rgba(123,44,191,.45) 100%); } .tl-img .tl-img-year{ position:absolute;left:14px;bottom:10px;z-index:1; font-family:var(--font-display);font-weight:800;letter-spacing:.18em;font-size:1.4rem; color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.5); transition:color .35s ease,text-shadow .35s ease; } .tl-card:hover .tl-img-year{ color:var(--orange); text-shadow:0 2px 14px rgba(255,122,24,.7),0 0 28px rgba(255,122,24,.45); } .tl-year{transition:background .4s ease,box-shadow .4s ease,color .35s ease} .tl-card:hover .tl-year{ background:var(--grad-warm);color:#0a0a0a; box-shadow:0 8px 22px -4px rgba(255,122,24,.65); } @media (max-width:780px){ .timeline::before{left:20px} .tl-item,.tl-item:nth-child(even){width:100%;left:0;padding:18px 18px 18px 46px;text-align:left} .tl-item::after,.tl-item:nth-child(odd)::after,.tl-item:nth-child(even)::after{left:11px;right:auto} } /* ===== Contact / Social ===== */ .social-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:24px} .social-card{ display:flex;align-items:center;gap:16px;padding:20px; background:var(--card-bg); border-radius:var(--radius);box-shadow:var(--shadow); border:2px solid transparent; transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s ease,border-color .3s ease; position:relative;overflow:hidden; } .social-card::before{ content:"";position:absolute;inset:auto auto -60% -20%;width:60%;height:200%; background:var(--grad-main);opacity:0;transform:rotate(25deg); transition:opacity .5s ease,transform .8s cubic-bezier(.2,.7,.2,1); z-index:0; } .social-card > *{position:relative;z-index:1} .social-card:hover{ transform:translateY(-6px) scale(1.025); box-shadow:var(--shadow-strong); border-color:var(--orange); } .social-card:hover::before{opacity:.08;transform:rotate(15deg) translate(30%,-10%)} .social-card .ico{ width:52px;height:52px;border-radius:14px;display:grid;place-items:center; background:var(--grad-main);color:#fff;font-weight:700;font-size:1.25rem; font-family:var(--font-display); box-shadow:0 10px 24px -8px rgba(123,44,191,.55); transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s ease; } .social-card:hover .ico{ transform:rotate(-10deg) scale(1.12); box-shadow:0 14px 30px -8px rgba(255,60,172,.7); } .social-card .meta strong{display:block;color:var(--purple-deep);font-size:1rem} .social-card .meta span{font-size:.85rem;color:#6b5b80} /* Brand-specific gradients for social icons */ .ico.ico-soundcloud{background:linear-gradient(135deg,#ff7a18,#ff3300)} .ico.ico-spotify{background:linear-gradient(135deg,#1ed760,#0a8a3e)} .ico.ico-bandcamp{background:linear-gradient(135deg,#629aa9,#2a5d6b)} .ico.ico-mixcloud{background:linear-gradient(135deg,#52aad8,#1d4f8e)} .ico.ico-facebook{background:linear-gradient(135deg,#1877f2,#0a3d80)} .ico.ico-instagram{background:linear-gradient(135deg,#f09433,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888)} .ico.ico-telegram{background:linear-gradient(135deg,#37bbfe,#007dbb)} .ico.ico-star{background:linear-gradient(135deg,#ffd700,#ff7a18)} /* ===== Footer ===== */ .site-footer{ background:#0a0a0a;color:#bbb;padding:42px 22px;text-align:center; position:relative; } .site-footer::before{ content:"";position:absolute;left:0;right:0;top:0;height:2px; background:var(--grad-main);background-size:200% 100%; animation:gradientShift 6s linear infinite; } .site-footer a{color:var(--orange-soft);transition:color .25s ease} .site-footer a:hover{color:var(--orange)} .site-footer .brand{color:#fff;margin-bottom:8px;display:block} /* ===== Embed responsive ===== */ .embed-wrap{ background:var(--card-bg);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow); transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s ease; border:2px solid transparent; } .embed-wrap:hover{ transform:translateY(-6px); box-shadow:var(--shadow-strong); border-color:var(--purple-light); } .embed-wrap iframe{display:block;width:100%;border:0} /* ===== Direct contact cards (email/phone) ===== */ .contact-direct{ display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px;margin-top:24px; } .contact-direct .cdc{ display:flex;align-items:center;gap:18px; padding:26px 28px;border-radius:var(--radius); color:#fff;text-decoration:none;position:relative;overflow:hidden; box-shadow:0 18px 40px -12px rgba(60,9,108,.45); transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s ease; } .contact-direct .cdc::before{ content:"";position:absolute;inset:0; background:linear-gradient(120deg,rgba(255,255,255,.0) 0%,rgba(255,255,255,.25) 50%,rgba(255,255,255,.0) 100%); transform:translateX(-100%);transition:transform .8s cubic-bezier(.2,.7,.2,1); } .contact-direct .cdc:hover{ transform:translateY(-8px) scale(1.03); box-shadow:0 28px 55px -10px rgba(60,9,108,.6); } .contact-direct .cdc:hover::before{transform:translateX(100%)} .contact-direct .cdc .cdc-ico{ width:64px;height:64px;border-radius:18px;display:grid;place-items:center; background:rgba(255,255,255,.18);backdrop-filter:blur(8px); font-size:1.6rem;flex-shrink:0; transition:transform .45s cubic-bezier(.2,.7,.2,1); } .contact-direct .cdc:hover .cdc-ico{transform:rotate(-10deg) scale(1.15)} .contact-direct .cdc .cdc-meta{position:relative;z-index:1} .contact-direct .cdc .cdc-label{ font-family:var(--font-display);letter-spacing:.18em;font-size:.72rem; text-transform:uppercase;opacity:.85;display:block;margin-bottom:4px; } .contact-direct .cdc .cdc-value{ font-size:1.15rem;font-weight:700;letter-spacing:.02em;display:block; } .cdc.cdc-email{background:linear-gradient(135deg,#7b2cbf 0%,#3c096c 60%,#ff3cac 100%)} .cdc.cdc-phone{background:linear-gradient(135deg,#ff7a18 0%,#ff3cac 50%,#7b2cbf 100%)} .cdc.cdc-telegram{background:linear-gradient(135deg,#37bbfe 0%,#007dbb 50%,#3c096c 100%)} /* ===== Homepage contact bar ===== */ .home-contact-bar{ display:flex;justify-content:center;gap:20px;flex-wrap:wrap; margin-top:28px; } .home-contact-bar a{ display:inline-flex;align-items:center;gap:10px; padding:12px 22px;border-radius:999px; background:rgba(255,255,255,.10);backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.22); color:#fff;font-weight:600;letter-spacing:.04em;font-size:.95rem; transition:all .35s cubic-bezier(.2,.7,.2,1); } .home-contact-bar a:hover{ background:var(--grad-warm);color:#000; border-color:transparent;transform:translateY(-3px); box-shadow:0 12px 28px -6px rgba(255,122,24,.5); } .home-contact-bar a i{font-size:1.1rem} /* ===== Explore grid (homepage) — card orizzontali full-width ===== */ .explore-grid{ display:flex;flex-direction:column;gap:18px;margin-top:24px;width:100%; } .explore-card{ --ex-c:var(--orange); display:flex;flex-direction:row;align-items:center;text-align:left; gap:24px;padding:24px 34px;width:100%; border-radius:var(--radius); background:var(--card-bg);box-shadow:var(--shadow); border:2px solid transparent; transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s ease,border-color .3s ease; text-decoration:none;color:var(--txt); position:relative;overflow:hidden; } .explore-card::before{ content:"";position:absolute;inset:0; background:var(--ex-c);opacity:0;transition:opacity .4s ease;z-index:0; } .explore-card > *{position:relative;z-index:1} .explore-txt{flex:1;min-width:0} .explore-card:hover{ transform:translateY(-6px) scale(1.01); box-shadow:0 18px 42px -16px var(--ex-c); border-color:var(--ex-c); } .explore-card:hover::before{opacity:.08} .explore-card .explore-ico{ flex:0 0 auto; width:60px;height:60px;border-radius:16px;display:grid;place-items:center; background:var(--ex-c);color:#fff;font-size:1.4rem; box-shadow:0 10px 24px -8px var(--ex-c); transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s ease; } .explore-card:hover .explore-ico{ transform:rotate(-8deg) scale(1.12); box-shadow:0 14px 30px -6px var(--ex-c); } .explore-card h3{ font-family:var(--font-display);letter-spacing:.06em; font-size:1.1rem;color:var(--purple-deep);margin-bottom:5px; transition:color .3s ease; } .explore-card:hover h3{color:var(--ex-c)} .explore-card p{font-size:.92rem;color:var(--txt-soft);line-height:1.45} .explore-card .explore-go{ flex:0 0 auto; display:inline-flex;align-items:center;gap:8px; color:var(--ex-c);font-weight:600;font-size:.92rem;letter-spacing:.04em; margin-left:auto;transition:gap .3s ease;white-space:nowrap; } .explore-card:hover .explore-go{gap:14px} /* colore hover diverso per ogni card */ .explore-card:nth-child(1){--ex-c:#ff7a18} .explore-card:nth-child(2){--ex-c:#b14cff} .explore-card:nth-child(3){--ex-c:#2ec5ff} .explore-card:nth-child(4){--ex-c:#21d07a} [data-theme="dark"] .explore-card h3{color:#fff} [data-theme="dark"] .explore-card:hover h3{color:var(--ex-c)} [data-theme="dark"] .explore-card p{color:var(--txt-soft)} @media (max-width:560px){ .explore-card{flex-wrap:wrap;gap:14px 20px;padding:20px 22px} .explore-card .explore-go{margin-left:0} } /* ===== Flow / timeline verticale (Come lavoriamo) ===== */ .flow{position:relative;max-width:680px;margin:32px auto 0} .flow::before{ content:"";position:absolute;left:29px;top:10px;bottom:10px;width:2px; background:linear-gradient(var(--orange),var(--purple)); } .flow-item{ position:relative;display:flex;gap:24px;align-items:flex-start; padding-bottom:34px; } .flow-item:last-child{padding-bottom:0} .flow-marker{ flex:0 0 auto;position:relative;z-index:1; width:60px;height:60px;border-radius:50%;display:grid;place-items:center; font-family:var(--font-display);font-size:1.3rem;font-weight:700;color:#fff; background:var(--grad-main); box-shadow:0 8px 22px -6px rgba(123,44,191,.6); } .flow-content{ flex:1;min-width:0;background:var(--card-bg);border-radius:var(--radius); box-shadow:var(--shadow);padding:18px 24px; border:1px solid transparent; transition:transform .3s ease,box-shadow .3s ease; } .flow-content:hover{transform:translateX(6px);box-shadow:var(--shadow-strong)} .flow-content h3{ font-family:var(--font-display);letter-spacing:.05em; color:var(--purple-deep);margin-bottom:6px;font-size:1.05rem; } .flow-content p{color:var(--txt-soft);line-height:1.5;font-size:.92rem} [data-theme="dark"] .flow-content h3{color:#fff} @media (max-width:560px){ .flow-item{gap:16px} .flow::before{left:24px} .flow-marker{width:50px;height:50px;font-size:1.1rem} } /* ===== Mobile fine-tuning (spaziatura & tap target) ===== */ @media (max-width:600px){ .hero{padding:72px 18px 88px} .hero p{font-size:1.02rem} .section{padding:60px 18px} .hero .cta{width:100%} .hero .cta .btn{width:100%;justify-content:center} .home-contact-bar a{font-size:.9rem;padding:11px 18px} } @media (max-width:380px){ .hero{padding:60px 14px 76px} .section{padding:48px 14px} .explore-card{padding:18px 18px} } /* ===== Discography / Releases ===== */ .releases-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px;margin-top:24px} .release-card{ background:var(--card-bg); border-radius:var(--radius);box-shadow:var(--shadow); padding:22px;border:2px solid transparent;position:relative;overflow:hidden; transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s ease,border-color .3s ease; } .release-card::before{ content:"";position:absolute;inset:0;background:var(--grad-main);opacity:0; transition:opacity .4s ease;z-index:0; } .release-card > *{position:relative;z-index:1} .release-card:hover{ transform:translateY(-8px) scale(1.02); box-shadow:var(--shadow-strong); border-color:var(--orange); } .release-card:hover::before{opacity:.06} .release-card .rel-cover{ width:80px;height:80px;border-radius:14px;display:grid;place-items:center; background:var(--grad-main);color:#fff;font-size:1.8rem;margin-bottom:14px; box-shadow:0 10px 24px -8px rgba(123,44,191,.55); } .release-card .rel-year{ font-family:var(--font-display);font-size:.78rem;letter-spacing:.18em; color:var(--orange);font-weight:700; } .release-card h3{color:var(--purple-deep);margin:4px 0 6px;font-size:1.1rem} .release-card p{font-size:.92rem;color:#6b5b80} /* ===== Services ===== */ .services-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:24px} @media (max-width:720px){.services-grid{grid-template-columns:1fr}} .service-card{ background:var(--card-bg); border-radius:var(--radius);padding:26px;box-shadow:var(--shadow); border:2px solid transparent;position:relative;overflow:hidden; transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s ease,border-color .3s ease; } .service-card:hover{ transform:translateY(-8px) scale(1.02); box-shadow:var(--shadow-strong); border-color:var(--purple-light); } .service-card .svc-ico{ width:58px;height:58px;border-radius:16px;display:grid;place-items:center; background:var(--grad-cool);color:#fff;font-size:1.5rem;margin-bottom:16px; box-shadow:0 10px 24px -8px rgba(60,9,108,.5); transition:transform .4s cubic-bezier(.2,.7,.2,1); } .service-card:hover .svc-ico{transform:rotate(-8deg) scale(1.1)} .service-card h3{ color:var(--purple-deep);margin-bottom:8px;font-size:1.15rem; font-family:var(--font-display);letter-spacing:.05em; } .service-card p{color:#5b4a6e;font-size:.95rem} /* ===== Locations chips ===== */ .locations{ display:flex;flex-wrap:wrap;gap:12px;margin-top:18px; } .loc-chip{ display:inline-flex;align-items:center;gap:8px; padding:10px 18px;border-radius:999px; background:linear-gradient(135deg,rgba(123,44,191,.10),rgba(255,122,24,.10)); color:var(--purple-deep);font-weight:600;font-size:.92rem;letter-spacing:.04em; border:1px solid rgba(123,44,191,.18); transition:transform .3s ease,background .3s ease,color .3s ease,box-shadow .3s ease; } .loc-chip i{color:var(--orange)} .loc-chip:hover{ transform:translateY(-3px) scale(1.05); background:var(--grad-main);color:#fff; box-shadow:0 12px 24px -6px rgba(255,60,172,.5); } .loc-chip:hover i{color:#fff} /* ===== FAQ ===== */ .faq{display:grid;gap:14px;margin-top:24px;max-width:860px} .faq details{ background:var(--card-bg); border-radius:var(--radius);box-shadow:var(--shadow); padding:0;overflow:hidden;border:2px solid transparent; transition:border-color .3s ease,box-shadow .3s ease,transform .3s ease; } .faq details:hover{border-color:var(--purple-light);box-shadow:var(--shadow-strong);transform:translateY(-2px)} .faq summary{ list-style:none;cursor:pointer;padding:18px 24px; font-weight:600;color:var(--purple-deep); display:flex;align-items:center;gap:14px; font-family:var(--font-display);letter-spacing:.04em;font-size:1rem; position:relative; } .faq summary::-webkit-details-marker{display:none} .faq summary::after{ content:"\f078";font-family:"Font Awesome 6 Free";font-weight:900; margin-left:auto;color:var(--orange);transition:transform .35s cubic-bezier(.2,.7,.2,1); } .faq details[open] summary::after{transform:rotate(180deg)} .faq details > *:not(summary){padding:0 24px 20px;color:#5b4a6e;font-size:.95rem} /* ===== Bio block ===== */ .bio-block{ background:var(--card-bg); border-radius:var(--radius);padding:32px;box-shadow:var(--shadow); border-left:6px solid transparent; border-image:var(--grad-main) 1; margin-bottom:32px; } .bio-block p{color:#3a2d4f;font-size:1.02rem;margin-bottom:12px} .bio-block p:last-child{margin-bottom:0} .bio-block strong{ background:var(--grad-warm);-webkit-background-clip:text;background-clip:text;color:transparent; font-weight:700; } /* ===== Leaflet map ===== */ .map-wrap{ margin-top:28px;border-radius:var(--radius);overflow:hidden; box-shadow:var(--shadow-strong); border:2px solid transparent; background:var(--grad-main);padding:3px; transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s ease; } .map-wrap:hover{transform:translateY(-4px);box-shadow:0 30px 60px -10px rgba(123,44,191,.55)} .map-wrap .map-inner{ border-radius:calc(var(--radius) - 3px);overflow:hidden; height:420px;background:#0a0014; } #kingior-map{height:100%;width:100%;background:#0a0014} .leaflet-container{font-family:'Inter',sans-serif!important;background:#0a0014!important} .leaflet-popup-content-wrapper{ background:var(--card-bg)!important;color:var(--txt)!important; border-radius:14px!important;box-shadow:var(--shadow-strong)!important; border:1px solid rgba(123,44,191,.18); } .leaflet-popup-tip{background:#fff0db!important} .leaflet-popup-content{margin:14px 18px!important;font-size:.95rem} .leaflet-popup-content strong{ font-family:var(--font-display);letter-spacing:.05em; background:var(--grad-warm);-webkit-background-clip:text;background-clip:text;color:transparent; display:block;margin-bottom:4px;font-size:1rem; } [data-theme="dark"] .leaflet-popup-content{color:#fff} .leaflet-popup-close-button{color:var(--purple)!important;font-size:20px!important;padding:6px 8px 0 0!important} .leaflet-control-attribution{background:rgba(0,0,0,.6)!important;color:#aaa!important;font-size:11px!important} .leaflet-control-attribution a{color:var(--orange-soft)!important} .leaflet-control-zoom a{ background:rgba(0,0,0,.7)!important;color:#fff!important;border:1px solid rgba(255,255,255,.12)!important; transition:background .3s ease,color .3s ease; } .leaflet-control-zoom a:hover{background:var(--orange)!important;color:#000!important} .map-marker{ width:42px;height:42px;border-radius:50%; background:var(--grad-warm); display:grid;place-items:center;color:#000; box-shadow:0 0 0 4px rgba(255,122,24,.25),0 8px 22px -4px rgba(255,60,172,.6); font-size:1.1rem; animation:markerPulse 2.4s ease-in-out infinite; } @keyframes markerPulse{ 0%,100%{box-shadow:0 0 0 4px rgba(255,122,24,.25),0 8px 22px -4px rgba(255,60,172,.6)} 50%{box-shadow:0 0 0 12px rgba(255,122,24,.10),0 12px 30px -4px rgba(255,60,172,.8)} } /* ===== Final CTA grid (home) ===== */ .cta-grid{ display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:24px; } @media (max-width:720px){.cta-grid{grid-template-columns:1fr}} .cta-card{ position:relative;overflow:hidden;border-radius:var(--radius); padding:42px 36px;min-height:280px; display:flex;flex-direction:column;justify-content:space-between; text-decoration:none;color:#fff; box-shadow:var(--shadow-strong); transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s ease; background-size:cover;background-position:center; } .cta-card::before{ content:"";position:absolute;inset:0;z-index:0; transition:opacity .5s ease; } .cta-card::after{ content:"";position:absolute;inset:auto -20% -30% auto;width:60%;height:60%; background:radial-gradient(closest-side,rgba(255,122,24,.5),transparent 70%); filter:blur(20px);transition:transform .8s cubic-bezier(.2,.7,.2,1),opacity .5s ease; opacity:.6;z-index:0; } .cta-card > *{position:relative;z-index:1} .cta-card.cta-about{ background-image: linear-gradient(135deg,rgba(26,0,51,.85),rgba(60,9,108,.75)), url('https://images.unsplash.com/photo-1567696911980-2eed69a46042?auto=format&fit=crop&w=1200&q=70'); } .cta-card.cta-contact{ background-image: linear-gradient(135deg,rgba(60,9,108,.80),rgba(255,60,172,.70)), url('https://images.unsplash.com/photo-1571330735066-03aaa9429d89?auto=format&fit=crop&w=1200&q=70'); } .cta-card:hover{ transform:translateY(-10px) scale(1.015); box-shadow:0 35px 75px -10px rgba(123,44,191,.65); } .cta-card:hover::after{transform:translate(-30%,-30%) scale(1.4);opacity:.85} .cta-card .cta-eyebrow{ font-family:var(--font-display);letter-spacing:.22em;font-size:.72rem; text-transform:uppercase;opacity:.85;margin-bottom:14px; display:flex;align-items:center;gap:10px; } .cta-card .cta-eyebrow i{ color:var(--orange);font-size:.9rem; } .cta-card h3{ font-family:var(--font-display);letter-spacing:.04em; font-size:clamp(1.5rem,2.8vw,2rem);line-height:1.15; margin-bottom:16px; } .cta-card h3 .accent{ background:var(--grad-warm);-webkit-background-clip:text;background-clip:text;color:transparent; } .cta-card p{ font-size:1rem;opacity:.9;margin-bottom:28px;max-width:42ch; } .cta-card .cta-go{ display:inline-flex;align-items:center;gap:14px; padding:14px 22px 14px 18px;border-radius:999px; background:rgba(255,255,255,.12);backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.22); font-weight:700;letter-spacing:.06em;font-size:.95rem; align-self:flex-start; transition:all .4s cubic-bezier(.2,.7,.2,1); } .cta-card .cta-go .arrow{ display:grid;place-items:center;width:32px;height:32px;border-radius:50%; background:var(--grad-warm);color:#000; transition:transform .4s cubic-bezier(.2,.7,.2,1); } .cta-card:hover .cta-go{ background:#fff;color:#0a0014;border-color:transparent; } .cta-card:hover .cta-go .arrow{transform:translateX(6px) rotate(-8deg)} /* ===== Accessibility helpers ===== */ .sr-only{ position:absolute!important;width:1px!important;height:1px!important; padding:0!important;margin:-1px!important;overflow:hidden!important; clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important; } .skip-link{ position:absolute;left:-9999px;top:0;z-index:1000; background:var(--orange);color:#000;padding:10px 18px;border-radius:0 0 10px 0; font-weight:700;letter-spacing:.06em; } .skip-link:focus{left:0} /* ===== Footer legal links ===== */ .site-footer .footer-legal{ margin:14px 0;font-size:.88rem;letter-spacing:.04em; } .site-footer .footer-legal a{ color:#bbb;margin:0 4px;transition:color .25s ease; } .site-footer .footer-legal a:hover{color:var(--orange)} /* ===== Cookie consent banner ===== */ .cookie-banner{ position:fixed;left:18px;right:18px;bottom:18px;z-index:200; max-width:920px;margin:0 auto; background:linear-gradient(135deg,rgba(20,4,40,.96) 0%,rgba(60,9,108,.94) 100%); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border:1px solid rgba(199,125,255,.25);border-radius:18px; padding:22px 24px;color:#fff; box-shadow:0 25px 60px -10px rgba(0,0,0,.6); display:flex;flex-wrap:wrap;align-items:center;gap:18px; transform:translateY(120%);opacity:0; transition:transform .55s cubic-bezier(.2,.7,.2,1),opacity .4s ease; pointer-events:none; } .cookie-banner.show{transform:translateY(0);opacity:1;pointer-events:auto} .cookie-banner .cb-ico{ width:48px;height:48px;border-radius:14px;display:grid;place-items:center; background:var(--grad-warm);color:#000;font-size:1.3rem;flex-shrink:0; box-shadow:0 10px 24px -8px rgba(255,122,24,.6); } .cookie-banner .cb-text{flex:1 1 260px;font-size:.9rem;line-height:1.55;color:#e8d9ff} .cookie-banner .cb-text strong{ display:block;font-family:var(--font-display);letter-spacing:.06em; color:#fff;margin-bottom:4px;font-size:.95rem; } .cookie-banner .cb-text a{color:var(--orange-soft);font-weight:600;text-decoration:underline} .cookie-banner .cb-text a:hover{color:var(--orange)} .cookie-banner .cb-actions{display:flex;gap:10px;flex-wrap:wrap} .cookie-banner button{ border:0;cursor:pointer;padding:11px 18px;border-radius:999px; font-weight:700;letter-spacing:.04em;font-size:.88rem; transition:transform .3s ease,box-shadow .3s ease,background .3s ease; } .cookie-banner .cb-accept{ background:var(--grad-warm);color:#000; box-shadow:0 10px 22px -6px rgba(255,60,172,.55); } .cookie-banner .cb-accept:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 14px 30px -6px rgba(255,122,24,.7)} .cookie-banner .cb-essential{ background:transparent;color:#fff;border:1px solid rgba(255,255,255,.3); } .cookie-banner .cb-essential:hover{background:rgba(255,255,255,.12);transform:translateY(-3px)} @media (max-width:560px){ .cookie-banner{flex-direction:column;text-align:center;padding:20px} .cookie-banner .cb-actions{width:100%;justify-content:center} } /* ===== Theme toggle ===== */ .theme-toggle{ background:transparent;border:1px solid rgba(255,255,255,.18); color:#fff;width:38px;height:38px;border-radius:10px; display:inline-grid;place-items:center;cursor:pointer;font-size:1rem; margin-left:10px;transition:all .35s cubic-bezier(.2,.7,.2,1); position:relative;overflow:hidden; } .theme-toggle:hover{ background:var(--grad-warm);color:#000;border-color:transparent; transform:rotate(360deg) scale(1.1); box-shadow:0 8px 22px -6px rgba(255,122,24,.6); } .theme-toggle .ico-sun{display:none} .theme-toggle .ico-moon{display:block} [data-theme="dark"] .theme-toggle .ico-sun{display:block} [data-theme="dark"] .theme-toggle .ico-moon{display:none} /* ===== Hero MiniMix player ===== */ .hero-player{ margin-top:26px;display:flex;flex-direction:column;align-items:center;gap:14px; position:relative;z-index:2; } .hero-player .play-btn{ display:inline-flex;align-items:center;gap:14px; padding:14px 24px 14px 18px;border-radius:999px;cursor:pointer;border:0; background:rgba(255,255,255,.10);backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.22); color:#fff;font-weight:600;letter-spacing:.05em;font-size:.95rem; transition:all .4s cubic-bezier(.2,.7,.2,1); box-shadow:0 10px 30px -8px rgba(255,60,172,.4); } .hero-player .play-btn .pulse{ width:42px;height:42px;border-radius:50%;display:grid;place-items:center; background:var(--grad-warm);color:#000;font-size:1.05rem; box-shadow:0 0 0 0 rgba(255,122,24,.6);animation:pulseRing 2.2s ease-out infinite; } @keyframes pulseRing{ 0%{box-shadow:0 0 0 0 rgba(255,122,24,.7)} 70%{box-shadow:0 0 0 18px rgba(255,122,24,0)} 100%{box-shadow:0 0 0 0 rgba(255,122,24,0)} } .hero-player .play-btn:hover{ background:var(--grad-warm);color:#000;transform:translateY(-3px) scale(1.04); border-color:transparent; } .hero-player .play-btn:hover .pulse{ background:#000;color:var(--orange);animation:none; box-shadow:0 0 18px rgba(0,0,0,.6); } .hero-player .sc-embed{ width:100%;max-width:720px;border-radius:14px;overflow:hidden; box-shadow:0 18px 40px -10px rgba(0,0,0,.45); max-height:0;opacity:0;transition:max-height .6s ease,opacity .5s ease,margin-top .4s ease; } .hero-player.active .sc-embed{max-height:300px;opacity:1;margin-top:6px} .hero-player .sc-embed iframe{display:block;width:100%;height:166px;border:0;background:#000} /* ===== Splash screen page transition ===== */ .splash-screen{ position:fixed;inset:0;z-index:9999;pointer-events:none; background:radial-gradient(circle at center,#3c096c 0%,#1a0033 60%,#000 100%); display:grid;place-items:center; opacity:0;transition:opacity .35s ease; } .splash-screen.in{opacity:1;pointer-events:auto} .splash-screen .splash-ico{ font-family:var(--font-display);font-weight:800;letter-spacing:.25em; font-size:clamp(2rem,6vw,4rem);color:#fff; display:flex;align-items:center;gap:18px; opacity:0;transform:scale(.85); transition:opacity .45s ease .1s,transform .55s cubic-bezier(.2,.7,.2,1) .1s; } .splash-screen.in .splash-ico{opacity:1;transform:scale(1)} .splash-screen .splash-ico .ring{ width:64px;height:64px;border-radius:50%; border:3px solid transparent; border-top-color:var(--orange);border-right-color:var(--pink);border-bottom-color:var(--purple-light); animation:spinRing 1s linear infinite; } @keyframes spinRing{to{transform:rotate(360deg)}} .splash-screen .splash-ico .ico-text span{ background:var(--grad-warm);-webkit-background-clip:text;background-clip:text;color:transparent; } /* Page enter fade-in */ body.page-enter{animation:pageEnter .55s ease both} @keyframes pageEnter{ from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} } /* ===== Matrix landing ===== */ body.matrix-body{background:#000;color:var(--purple-light);overflow:hidden;height:100vh} #matrix-canvas{position:fixed;inset:0;z-index:0} .matrix-overlay{ position:fixed;inset:0;z-index:2;display:flex;flex-direction:column; align-items:center;justify-content:center;text-align:center;padding:22px; background:radial-gradient(circle at center, rgba(0,0,0,0) 30%, rgba(0,0,0,.75) 100%); } .matrix-overlay h1{ font-family:var(--font-display);font-size:clamp(2.4rem,7vw,5.5rem); letter-spacing:.25em;color:var(--purple-light);text-transform:uppercase; text-shadow:0 0 12px var(--purple),0 0 28px var(--purple-deep); animation:glow 2.4s ease-in-out infinite alternate; } @keyframes glow{ from{text-shadow:0 0 8px var(--purple),0 0 18px var(--purple-deep)} to{text-shadow:0 0 18px var(--purple-light),0 0 40px var(--purple)} } .matrix-overlay p.tag{ color:var(--purple-light);letter-spacing:.4em;margin-top:8px;font-size:.95rem;opacity:.85; } .matrix-lang{ margin-top:46px;display:flex;gap:16px;flex-wrap:wrap;justify-content:center; } .matrix-lang a{ border:1px solid var(--purple);color:var(--purple-light); padding:14px 30px;border-radius:999px;font-family:var(--font-display); letter-spacing:.2em;font-size:.9rem; transition:all .35s cubic-bezier(.2,.7,.2,1);background:rgba(0,0,0,.4);backdrop-filter:blur(4px); } .matrix-lang a:hover{ color:#000;background:var(--purple-light); box-shadow:0 0 35px var(--purple-light),0 0 70px var(--purple); transform:translateY(-3px) scale(1.05); } .matrix-foot{ position:fixed;bottom:18px;left:0;right:0;text-align:center;z-index:3; color:var(--purple-light);opacity:.6;font-size:.8rem;letter-spacing:.2em; } /* ============================================================ ===== ADDITIONS — 2026-06 update ============================ ============================================================ */ /* --- Areas-served as cards in a 5-column grid --- */ .loc-grid{ display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:16px; margin-top:24px; } @media (max-width:980px){ .loc-grid{ grid-template-columns:repeat(4,1fr) } } @media (max-width:760px){ .loc-grid{ grid-template-columns:repeat(3,1fr) } } @media (max-width:520px){ .loc-grid{ grid-template-columns:repeat(2,1fr) } } .loc-card{ position:relative; display:flex;flex-direction:column;align-items:center;justify-content:center; gap:8px; padding:18px 12px; text-align:center; background:var(--card-bg); border-radius:var(--radius); border:1px solid rgba(123,44,191,.18); box-shadow:var(--shadow); color:var(--purple-deep); transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, border-color .25s ease, color .25s ease; overflow:hidden; font-weight:600; letter-spacing:.04em; } .loc-card::before{ content:"";position:absolute;inset:0; background:var(--grad-main);opacity:0; transition:opacity .35s ease;z-index:0; } .loc-card > *{position:relative;z-index:1} .loc-card i{ font-size:1.5rem;color:var(--orange); transition:transform .35s ease, color .25s ease; } .loc-card span{font-size:.95rem} .loc-card:hover{ transform:translateY(-5px) scale(1.03); border-color:var(--orange); box-shadow:var(--shadow-strong); color:#fff; } .loc-card:hover::before{opacity:1} .loc-card:hover i{color:#fff;transform:scale(1.18) rotate(-8deg)} /* Inside purple sections (homepage) — keep glassy look */ .section-purple .loc-card{ background:linear-gradient(140deg,rgba(255,255,255,.08) 0%,rgba(199,125,255,.12) 100%); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.14); color:#fff; } .section-purple .loc-card i{color:var(--orange-soft)} .section-purple .loc-card:hover{ background:linear-gradient(140deg,rgba(255,255,255,.18) 0%,rgba(199,125,255,.25) 100%); border-color:var(--orange);color:#fff; } .section-purple .loc-card::before{display:none} /* Dark theme override */ [data-theme="dark"] .loc-card{ background:linear-gradient(140deg,#1c0633 0%,#2a0a4a 55%,#3c0a5e 100%); border-color:rgba(199,125,255,.22);color:#fff; } [data-theme="dark"] .loc-card i{color:var(--orange-soft)} /* --- Release-card colour variants --- */ .release-card.r1{ --rc-grad:linear-gradient(135deg,#ff3cac 0%,#ff7a18 100%); --rc-accent:#ff3cac } .release-card.r2{ --rc-grad:linear-gradient(135deg,#7b2cbf 0%,#3c096c 100%); --rc-accent:#9d4edd } .release-card.r3{ --rc-grad:linear-gradient(135deg,#00e0ff 0%,#7b2cbf 100%); --rc-accent:#00b8d4 } .release-card.r4{ --rc-grad:linear-gradient(135deg,#ff7a18 0%,#ffd60a 100%); --rc-accent:#ff7a18 } .release-card.r5{ --rc-grad:linear-gradient(135deg,#06d6a0 0%,#118ab2 100%); --rc-accent:#06d6a0 } .release-card.r6{ --rc-grad:linear-gradient(135deg,#ef476f 0%,#9d4edd 100%); --rc-accent:#ef476f } .release-card[class*=" r"], .release-card[class^="r"]{ border-top:4px solid transparent; border-image: var(--rc-grad, var(--grad-main)) 1; } .release-card.r1 .rel-cover, .release-card.r2 .rel-cover, .release-card.r3 .rel-cover, .release-card.r4 .rel-cover, .release-card.r5 .rel-cover, .release-card.r6 .rel-cover{ background:var(--rc-grad); box-shadow:0 10px 24px -8px color-mix(in srgb, var(--rc-accent) 65%, transparent); } .release-card.r1 .rel-year, .release-card.r2 .rel-year, .release-card.r3 .rel-year, .release-card.r4 .rel-year, .release-card.r5 .rel-year, .release-card.r6 .rel-year{ color:var(--rc-accent) } .release-card.r1:hover, .release-card.r2:hover, .release-card.r3:hover, .release-card.r4:hover, .release-card.r5:hover, .release-card.r6:hover{ border-color:var(--rc-accent) } .release-card.r1::before, .release-card.r2::before, .release-card.r3::before, .release-card.r4::before, .release-card.r5::before, .release-card.r6::before{ background:var(--rc-grad) } /* --- Matrix colour theming (light vs dark) --- */ /* Light theme: classic Matrix — black bg + green glyphs */ :root{ --matrix-bg-rgb: 245,247,243; /* near-white fade for light theme hero */ --matrix-bg-fullscreen-rgb: 0,0,0; /* fullscreen landing always cinematic */ } .matrix-overlay h1{ text-shadow:0 0 12px var(--purple),0 0 28px var(--purple-deep); } /* When NOT in dark theme, treat the hero matrix as classic green */ html:not([data-theme="dark"]) .hero canvas.hero-matrix{ opacity:.85 } /* --- Map always light --- */ #kingior-map{ background:#e6f0ff !important; } .leaflet-container{ background:#e6f0ff !important; } /* 3-column services grid for the dedicated Services page */ .services-grid-3{grid-template-columns:repeat(3,1fr)} @media (max-width:980px){.services-grid-3{grid-template-columns:repeat(2,1fr)}} @media (max-width:600px){.services-grid-3{grid-template-columns:1fr}} /* ===== Logo image inside brand ===== */ .brand{ display:inline-flex; align-items:center; gap:12px; } .brand-logo{ height:55px; width:auto; display:block; filter:drop-shadow(0 0 12px rgba(199,125,255,.35)); transition:filter .35s ease, transform .35s cubic-bezier(.2,.7,.2,1); } .brand:hover .brand-logo{ filter:drop-shadow(0 0 18px rgba(199,125,255,.65)); transform:scale(1.04); } @media (max-width:640px){ .brand-logo{ height:44px } } .site-footer .brand{ display:inline-flex; align-items:center; gap:12px; justify-content:center; margin-bottom:8px; } .site-footer .brand-logo{ height:73px; filter:drop-shadow(0 0 16px rgba(199,125,255,.45)); } /* ===== Matrix landing logo ===== */ .matrix-logo{ display:block; margin:0 auto 28px; width:clamp(208px, 28.6vw, 338px); height:auto; filter:drop-shadow(0 0 26px rgba(199,125,255,.55)); animation:logoFloat 6s ease-in-out infinite; } @keyframes logoFloat{ 0%,100%{ transform:translateY(0); filter:drop-shadow(0 0 26px rgba(199,125,255,.55)) } 50%{ transform:translateY(-10px); filter:drop-shadow(0 0 36px rgba(199,125,255,.8)) } }