/* basalto.css */
/* created by Carlo Basalto - Copyright 2025 */

/* Only Light */
html {
  color-scheme: light;
}

/* Global Backcground */
.bslt-body {
  background-color: #000000;

}

.bslt-pattern {
  background-image: url('https://via.placeholder.com/500');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

::selection {
    background-color: white;
    color: black;
}


/* Global Variables */
:root {
  /* Font Variables */
  --bslt-font1: 'Titillium Web', sans-serif;
  --bslt-font2: 'Raleway', sans-serif;
  --bslt-font3: 'Abel', sans-serif;
  
  /* Color Variables */
  --bslt-color1: #9a1f31;
  --bslt-color2:rgb(255, 255, 255);
  --bslt-color3: #3FDFBF; 
}

/* Background Color */
.bslt-bg-1 {
  background-color: #EBEBFF;
}
.bslt-bg-2 {
  background-color: #524FFD;
}
.bslt-bg-3 {
  background-color: #809293;
}

/* Background Gradient */
.bslt-gradient {
  background: -webkit-linear-gradient(45deg, #EBEBFF, #0703E2);
  background: -moz-linear-gradient(45deg, #EBEBFF, #0703E2);
  background: -o-linear-gradient(45deg, #EBEBFF, #0703E2);
  background: linear-gradient(45deg, #EBEBFF, #0703E2);
}

/* Navbar Icons */
.bslt-social-icons i {
  font-size: 1.25em; /* 25% più grande rispetto alla dimensione base */
  transition: transform 0.2s ease-in-out; /* Effetto fluido */
}

.uk-navbar-nav li a i {
  transition: color 0.3s ease-in-out; /* Animazione fluida */
}

.uk-navbar-nav li a:hover i {
  color: #a50909 !important; /* Cambia colore su hover */
}

.uk-navbar-nav i {
  font-size: 1.3rem;
}


/* Hover Icons */
.bslt-social-icons i:hover {
  transform: scale(1.2); /* Ingrandisce leggermente */
}

/* Font1 Titillium Web */
.bslt-font1-bold {
  font-family: var(--bslt-font1);
  font-weight: bold;
}
.bslt-font1-italic {
  font-family: var(--bslt-font1);
  font-style: italic;
}
.bslt-font1-medium {
  font-family: var(--bslt-font1);
  font-weight: 500;
}
.bslt-font1-light {
  font-family: var(--bslt-font1);
  font-weight: 300;
}

.bslt-heading1 {
    font-family: var(--bslt-font1);
    font-size: 54px;
    font-weight: 500;
}


/* Font2 Raleway */
.bslt-font2-bold {
  font-family: var(--bslt-font2);
  font-weight: bold;
}
.bslt-font2-italic {
  font-family: var(--bslt-font2);
  font-style: italic;
}
.bslt-font2-medium {
  font-family: var(--bslt-font2);
  font-weight: 500;
}
.bslt-font2-light {
  font-family: var(--bslt-font2);
  font-weight: 300;
}

.bslt-heading2 {
    font-family: var(--bslt-font2);
    font-size: 54px;
    font-weight: 500;
}

/* Font3 Abel */
.bslt-font3-bold {
  font-family: var(--bslt-font3);
  font-weight: bold;
}
.bslt-font3-italic {
  font-family: var(--bslt-font3);
  font-style: italic;
}
.bslt-font3-medium {
  font-family: var(--bslt-font3);
  font-weight: 500;
}
.bslt-font3-light {
  font-family: var(--bslt-font3);
  font-weight: 300;
}

.bslt-heading3 {
  font-family: var(--bslt-font3);
  font-size: 54px;
  font-weight: 500;
}

/* Text Color */
.bslt-color1 {
  color: var(--bslt-color1);
}
.bslt-color2 {
  color: var(--bslt-color2);
}
.bslt-color3 {
  color: var(--bslt-color3);
}

/* Effetto glow "neon" sfumato */
.bslt-neon {
  box-shadow: 0 0 10px #38FF3B, 0 0 20px #38FF3B, 0 0 30px #38FF3B;
}

/* Scroll to top button */

.bslt-scroll-top {
  position: fixed; /* Fissa il pulsante in basso a destra */
  bottom: 20px;  /* Distanza dal fondo */
  right: 20px;   /* Distanza dal lato destro */
  padding: 18px; /* Spazio attorno alla freccia */
  background: #232327;  /* Sfondo quadrato nero */
  color: white;  /* Colore della freccia */
  border-radius: 5px;  /* Angoli leggermente arrotondati */
  opacity: 0;  /* Inizialmente nascosto */
  transform: scale(1.2); /* Ingrandito del 20% */
  transition: opacity 0.3s ease-in-out, background 0.2s, color 0.2s; /* Animazioni fluide */
}

/* Cambio colore al passaggio del mouse */
.bslt-scroll-top:hover {
  color: #a50909; /* Freccia diventa bordeaux */
}



/* Quando si scorre oltre 800px, la freccia appare */
.bslt-scroll-top.show {
  opacity: 1;
}

/* Cambia colore quando viene cliccata */
.bslt-scroll-top:active {
  background: #b1ff00; /* Verde fluorescente */
}

/* INGRANDISCE IL TRIANGOLO DELLA FRECCIA DEL 20% */
.bslt-scroll-icon svg {
  width: 1.4em;
  height: 1.4em;
}

/* LATEST RELEASES */

/* Contenitore dell’immagine + icona Play */
.release-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.release-item img {
  width: 100%;
  display: block;
  transition: filter 0.3s;
}

/* Posizionamento dell’icona Play al centro */
.play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.3s;
}

.play-icon .fa-play {
  font-size: 2rem;
  color: #fff;
  background-color: transparent;
  padding: 20px;
  border-radius: 50%;
  transition: transform 0.3s;
}

/* Effetto hover: immagine in bianco e nero, icona ingrandita del 20% */
.release-item:hover img {
  filter: grayscale(100%);
}

.release-item:hover .play-icon {
  transform: translate(-50%, -50%) scale(1.2);
}

/* SOURCE */

.source-container {
  margin-top: 10px;
  color: #fff;
}

.source-toggle {
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}

.source-menu {
  display: none; /* nascosto di default */
  margin-top: 8px;
}

.source-menu a {
  margin-right: 10px;
  color: #fff;
  text-decoration: none;
  font-size: 1.2rem;
}


/* LOGOS */

.qobra-logo {
  max-width: 300px;
  width: 100%;
  height: auto;
}

  .hero-section {
    height: auto;
    padding: 0;
  }

  .qobra-logo {
    max-width: 60%;
    height: auto;
  }

  /* Ottimizzazione per dispositivi mobile */
  @media (max-width: 767px) {
    .hero-section {
      height: 80vh; /* Altezza 80% della finestra su mobile */
    }
  }
 

.bslt-border {
    border-radius: 12px;
}

.bslt-music-button {
    background: #4e4e4e;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    font-weight: bold;
    font-size: 14px;
    transition: background 0.9s ease;
}

.bslt-music-button:hover {
    background: #a50909;
    color: white;
}

.source-icons {
  display: flex;
  justify-content: center;
  gap: 30px; 
  padding-top: 10px;
}

.source-icons a {
  color: #626262;
  font-size: 20px;
  transition: color 0.3s ease-in-out;
}

.source-icons a:hover {
  color: #a50909; 
}

.footer-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px; /* Leggermente più stretto per bilanciare */
  font-size: 14px;
  text-transform: none; /* Rimuove il maiuscolo */
}

.footer-links a {
  color: white;
  text-decoration: none;
  transition: color 0.3s ease-in-out;
}

.footer-links a:hover {
  color: #a50909;
}

.footer-links .separator {
  color: white;
  font-weight: bold;
  pointer-events: none; /* Non cliccabile */
}

.copyright-text {
  margin-top: 5px; /* Avvicina il testo "Created by BSLT" */
  font-size: 13px;
}

.bslt-link {
  color: white;
  text-decoration: none;
  transition: color 0.3s ease-in-out;
}

.bslt-link:hover {
  color: #a50909;
}

.footer-links a {
  text-transform: none !important;
}

.full-width-divider {
    width: 100%;
    height: 4px;
    background-color: #ff5733;
    border: none;
    margin: 20px auto;
}