/* ==================================================
   HOME.CSS
   Estilos exclusivos da HOME
   Refatoração SEM alteração visual
   ================================================== */


/* ===============================
   HEADER — HOME
   =============================== */

.header-banner {
  background: var(--cor-fundo-site);
  border-bottom: 3px solid var(--cor-primaria);
  padding: 5px 0;
  box-shadow: 0 5px 15px rgba(0,0,0,.7),
              0 5px 15px var(--neon-glow-sutil);
}

.header-title {
  font-family: var(--fonte-titulo);
  font-size: 3rem;
  color: var(--cor-primaria);
  letter-spacing: 5px;
  margin-bottom: 0 !important;

  text-shadow:
    0 0 5px var(--cor-primaria),
    0 0 15px var(--cor-primaria),
    0 0 30px #ff3333;

  animation: glow 2s ease-in-out infinite alternate;
}

@keyframes glow {
  from {
    text-shadow:
      0 0 5px var(--cor-primaria),
      0 0 10px var(--cor-primaria);
  }
  to {
    text-shadow:
      0 0 10px var(--cor-primaria),
      0 0 20px #ff3333,
      0 0 30px #ff3333;
  }
}



.header-subtitle {
  font-family: var(--fonte-corpo);
  font-size: .9rem;
  letter-spacing: 3px;
  color: #aaa;
  margin-top: 0;
  text-shadow: 1px 1px 3px rgba(0,0,0,.8);
}


/* ===============================
   FRASE / MANIFESTO — HOME
   =============================== */

.home .frase-portal {
  text-align: center;
  margin-bottom: 40px;
  padding: 40px 20px;
}

.home .frase-portal p {
  font-size: 1.85rem;
  font-weight: 500;
  max-width: 720px;
  margin: 0 auto;
  line-height: 1.6;
  letter-spacing: 1px;
  color: #f1f1f1;
  text-shadow: 0 2px 6px rgba(0,0,0,.6);
}

.home .frase-portal .frase-principal {
  font-size: 1.45rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 6px;
  text-shadow:
    0 0 6px rgba(0,0,0,.6),
    0 0 12px rgba(255,0,0,.25);
}

.home .frase-portal .frase-secundaria {
  font-size: 1rem;
  color: #ddd;
}

@media (max-width: 768px) {
  .home .frase-portal .frase-principal {
    font-size: 1.05rem;
    letter-spacing: 0.5px;
  }

  .home .frase-portal .frase-secundaria {
    font-size: .95rem;
    line-height: 1.5;
  }
}

/* REFINO PREMIUM — BORDA DOS CARDS NO MOBILE */
@media (max-width: 768px) {

  .home .section-box {
    border-image-slice: 28;
    box-shadow: 0 0 12px rgba(255, 0, 0, 0.35);
  }

}




/* ===============================
   CARDS PRINCIPAIS — HOME
   =============================== */

.home .card-grid {
  display: flex;
  gap: 40px;
  max-width: 1300px;
  margin: 50px auto;
  justify-content: center;
  flex-wrap: wrap;
}

.home .section-box {
  width: 380px;
  height: 480px;
  position: relative;
  overflow: hidden;

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-clip: padding-box;

  border: 15px solid transparent;
  border-image: url('../img/border-image.jpg') 30 round;

  padding: 30px 20px;
  box-shadow: 0 0 20px rgba(0,0,0,.7);
  transition: transform .35s ease, box-shadow .35s ease;
}

.home #biker  { background-image: url('../img/biker-fundo.jpg'); }
.home #rock   { background-image: url('../img/rock-fundo.jpg'); }
.home #tattoo { background-image: url('../img/tattoo-fundo.jpg'); }

.home .section-box::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 1;
}

.home .section-box > * {
  position: relative;
  z-index: 2;
}

.home .section-box h2 {
  font-family: var(--fonte-titulo);
  font-size: 2.5rem;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 100px;

  text-shadow:
    0 0 6px rgba(255,0,0,.7),
    0 0 12px rgba(255,0,0,.5);

  /* 🔥 CORREÇÃO DE CENTRALIZAÇÃO */
  text-align: center;
  width: 100%;
}


.home .button-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.home .section-box .btn-danger,
.home .section-box .list-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 55px;
}

.home .section-box:hover {
  transform: scale(1.03);
  box-shadow: 0 0 30px var(--cor-primaria);

  /* 🔥 BORDA DE FOGO */
  border-image: url('../img/border-image.jpg') 30 round;
  border-image-slice: 30;
  border-image-width: 15px;
  border-image-outset: 0;
  border-image-repeat: repeat;
}


/* ===============================
   AVISO / STATUS / ROADMAP — HOME (VISUAL FINAL)
   =============================== */

.home .aviso-card {
  max-width: 1300px;
  margin: 30px auto 0;
  padding: 20px 30px;

  /* Overlay editorial sutil atrás do texto */
  background: rgba(0, 0, 0, 0.35);

  border-radius: 6px;
  border: none;
  text-align: center;

  box-shadow: none;
}


/* 🔥 Ajuste fino apenas do conteúdo da coluna direita */
.home .roadmap-conteudo {
  padding-top: 12px;
}


.home .aviso-card h3 {
  font-family: var(--fonte-titulo);
  font-size: 1.8rem;
  color: var(--cor-primaria);
  text-transform: uppercase;
  margin-bottom: 15px;
}

/* AJUSTE DE ALINHAMENTO DO TÍTULO DIREITO */
.home .titulo-direita {
  margin-top: -14px;
  margin-bottom: -20px;
  text-align: center;
}

.home .aviso-card p,
.home .aviso-card li {
  font-family: var(--fonte-corpo);
  font-size: .95rem;
  color: #ccc;
  line-height: 1.6;
}


/* ---------- STATUS (PRODUÇÃO ESTÁVEL) ---------- */

.home .status-numeros {
  max-width: 420px;
  margin: 0 auto 3rem;
  padding: 0;
  background: none;
  box-shadow: none;
  text-align: left;
}

.home .status-item {
  display: flex;
  align-items: baseline;
  margin-bottom: 1.2rem;
}

.home .status-numero {
  width: 3rem;
  text-align: right;
  font-size: 2.1rem;
  font-weight: 900;
  color: var(--cor-primaria);
  text-shadow: 0 0 10px rgba(255,0,0,.4);
}

.home .status-label {
  margin-left: 1rem;
  font-size: .95rem;
  color: #ccc;
}

.home .status-divider {
  border-color: rgba(255,0,0,.35);
  margin: 1.5rem 0;
}

.home .status-item.status-total {
  margin-top: 1.2rem;
  padding-top: .6rem;
  border-top: 1px solid rgba(255,0,0,.35);
}

.home .status-item.status-total .status-numero {
  font-size: 2.5rem;
  margin-left: 12px;
  text-shadow: 0 0 10px rgba(255,0,0,.45);
}

.home .status-item.status-total .status-label {
  font-weight: 700;
  color: #fff;
}



/* ---------- ROADMAP ---------- */

.home .roadmap-resumo {
  font-weight: 700;
  margin-top: 0px;
}

.home .roadmap-status {
  color: var(--cor-primaria);
}

.home .roadmap-divider {
  border-color: rgba(255,0,0,.3);
}

.home .roadmap-nota {
  font-size: .9rem;
  opacity: .85;
}

.home .roadmap {
  padding-left: 1.2rem;
  border-left: 1px solid rgba(255,255,255,.08);
  margin-top: 3rem;
}


/* ===============================
   RESPONSIVIDADE — HOME
   =============================== */

@media (max-width: 992px) {

  .home .card-grid {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .home .section-box {
    max-width: 95%;
    height: auto;
  }

  .home .section-box h2 {
    font-size: 2rem;
    margin-bottom: 50px;
  }

  /* HERO — compactar e melhorar leitura (REFINO PREMIUM) */
.home .frase-portal {
  padding: 22px 15px;
  margin-bottom: 20px;
}

.home .frase-portal .frase-principal {
  font-size: 1.05rem;
  line-height: 1.35;
  letter-spacing: 0.5px;
}

.home .frase-portal .frase-secundaria {
  font-size: .9rem;
  line-height: 1.5;
  margin-top: 8px;
}


  /* ROADMAP — mais confortável no mobile */
  .home .aviso-card {
    padding: 15px 20px;
  }

  .home .aviso-card h3 {
    font-size: 1.5rem;
  }

  .home .aviso-card p,
  .home .aviso-card li {
    font-size: .9rem;
    line-height: 1.5;
  }

  .home .roadmap-conteudo {
    padding-top: 15px;
  }

  .home .roadmap-resumo {
    font-size: 1rem;
    margin-bottom: 10px;
  }
}


/* ===== ROADMAP — RESTAURA BRANCO FORTE (PRODUÇÃO) ===== */

.home .roadmap-status,
.home .roadmap-resumo,
.home .roadmap-nota strong,
.home .aviso-card strong,
.home .status-item.status-total .status-label {
  color: #ffffff !important;
  opacity: 1 !important;
}

/* Subtítulos importantes */
.home .aviso-card p strong {
  color: #ffffff !important;
}

/* ===== TRANSPARÊNCIA TOTAL — COMO NA PRODUÇÃO ===== */

/* Menu */
.home .nav-principal {
  background: transparent !important;
  box-shadow: none !important;
}


/* Footer */
.home .footer {
  background: transparent !important;
  box-shadow: none !important;
  border-top: 1px solid rgba(255,0,0,0.25);
}

/* ===============================
   FOOTER — CORREÇÃO DE ALINHAMENTO
   =============================== */

.footer-editorial-grid {
  display: flex;              /* garante comportamento previsível */
  align-items: flex-start;    /* 🔥 ALINHA TODAS AS COLUNAS PELO TOPO */
  justify-content: space-between;
}

.footer-col {
  display: flex;
  flex-direction: column;
  align-items: center;        /* mantém centralizado como estava */
}


/* ===== FIX ÍCONE CARTA (EMAIL) ===== */

.footer a,
.footer i,
.footer svg {
  color: #ffffff !important;
  fill: #ffffff !important;
}

.footer a:hover {
  color: var(--cor-primaria) !important;
}

/* ==================================================
   ROADMAP — REMOÇÃO TOTAL DE LINHAS
   ================================================== */

/* Remove qualquer <hr> dentro do aviso */
.home .aviso-card hr {
  display: none !important;
}

/* Remove divisor dos números */
.home .status-divider {
  display: none !important;
}

/* Remove divisor do roadmap */
.home .roadmap-divider {
  display: none !important;
}

/* ==================================================
   ROADMAP — REMOÇÃO TOTAL DE LINHAS
   ================================================== */

/* Remove qualquer <hr> dentro do aviso */
.home .aviso-card hr {
  display: none !important;
}

/* Remove divisor dos números */
.home .status-divider {
  display: none !important;
}

/* Remove divisor do roadmap */
.home .roadmap-divider {
  display: none !important;
}


/* ===============================
   OVERLAY DOS CARDS (HOME)
   =============================== */

.home .section-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.65);
  z-index: 2;
}

/* Conteúdo acima do overlay */
.home .section-box > * {
  position: relative;
  z-index: 3;
}

/* ===============================
   IMAGENS DE FUNDO DOS CARDS (HOME)
   =============================== */

.home #biker {
  background-image: url('../img/biker-fundo.jpg');
}

.home #rock {
  background-image: url('../img/rock-fundo.jpg');
}

.home #tattoo {
  background-image: url('../img/tattoo-fundo.jpg');
}

/* ===============================
   BOTÕES DOS CARDS — HOME
   =============================== */

.home .btn-danger { 
  background: #222; 
  border: 2px solid var(--cor-primaria); 
  color: #fff; 
  text-shadow: 0 0 5px #000; 
  transition: all 0.3s ease; 
  font-family: var(--fonte-titulo); 
  letter-spacing: 1px;
  font-weight: 700;
  position: relative;
  overflow: hidden; 
  z-index: 1;
  padding: 10px 20px; 
  text-transform: uppercase;
  box-shadow: 0 0 5px rgba(255, 0, 0, 0.4); 
}

.home .btn-danger:hover { 
  transform: translateY(-3px) scale(1.02); 
  box-shadow: var(--neon-glow); 
  color: #fff; 
}

/* ===============================
   TOPO TRANSPARENTE + GLOW ORIGINAL — HOME
   =============================== */

.home .header-banner {
  background: transparent !important;
  border-bottom: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.home .nav-principal {
  background: transparent !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

/* Remove qualquer overlay invisível */
.home .header-banner::before,
.home .header-banner::after {
  content: none !important;
}

/* ===============================
   REMOVE DIVISORES DO ROADMAP — HOME
   =============================== */

.home .aviso-card hr,
.home .status-divider,
.home .roadmap-divider {
  display: none !important;
}

/* ===============================
   TRANSPARÊNCIA FINAL DO ROADMAP — HOME
   =============================== */

.home .aviso-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* ==============================
   HOME – DESCRIÇÃO DOS BLOCOS DE CATEGORIA (BIKER / ROCK / TATTOO)
   ============================== */
.section-box .section-desc {
    font-size: 0.8rem;
    color: #ccc;
    margin-top: -4px;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    text-align: center;

    /* 🔥 TRAVA DE ALTURA PARA ALINHAR OS CARDS */
    min-height: 32px;
    line-height: 1.2;
}

/* HOME – Subtítulo da seção "Já fazem parte da cena" */
.status-subtitulo {
    font-size: 0.85rem;
    color: #ccc;
    margin-left: 4px;
    margin-bottom: 18px;
}

.home .status-cta {
  margin-top: 16px;
  font-size: 0.9rem;
  color: #fff;
  opacity: 0.85;
  font-style: italic;
}

/* ===============================
   CTA FINAL — ENTRAR NA CENA
=============================== */

.home .cta-cena {
  position: relative;
  max-width: 900px;
  margin: 80px auto 50px;
  padding: 65px 20px;
  text-align: center;
}

/* Halo / foco escuro atrás do CTA (mais suave e elegante) */
.home .cta-cena::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at center,
    rgba(0, 0, 0, 0.42) 0%,
    rgba(0, 0, 0, 0.7) 55%,
    rgba(0, 0, 0, 0.88) 100%
  );
  z-index: -1;
  border-radius: 14px;
}

.home .cta-titulo {
  font-family: var(--fonte-titulo);
  font-size: 1.85rem;
  color: var(--cor-primaria);
  text-transform: uppercase;
  margin-bottom: 14px;
  letter-spacing: 1px;
  text-shadow:
    0 0 6px rgba(255,0,0,.6),
    0 0 12px rgba(255,0,0,.35);
}

.home .cta-texto {
  color: #ccc;
  font-size: 0.95rem;
  margin-bottom: 34px;
  letter-spacing: 0.6px;
}

/* ===============================
   BOTÃO PRINCIPAL
=============================== */

.home .btn-cta-cena {
  padding: 15px 40px;
  font-size: 1rem;
  letter-spacing: 1.2px;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  box-shadow: 0 0 12px rgba(255,0,0,.45);
  transition: all 0.25s ease;
}

.home .btn-cta-cena:hover {
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 0 22px rgba(255, 0, 0, 0.75);
}

/* ===============================
   SELETOR DE CULTURA
=============================== */

.home .seletor-cultura {
  margin-top: 42px;
  padding: 30px 22px;
  background: rgba(0, 0, 0, 0.58);
  border-radius: 10px;
  animation: fadeIn .25s ease;
  box-shadow: 0 0 25px rgba(0,0,0,.65);
}

.home .seletor-titulo {
  color: #fff;
  margin-bottom: 20px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-shadow: 0 0 8px rgba(255, 0, 0, 0.4);
}

.home .seletor-opcoes {
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}

.home .seletor-opcoes button {
  min-width: 190px;
  font-weight: 700;
  letter-spacing: 0.6px;
  transition: all 0.2s ease;
}

/* Hover refinado nos botões de cultura */
.home .seletor-opcoes button:hover {
  background-color: rgba(255, 0, 0, 0.18);
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 0 12px rgba(255, 0, 0, 0.5);
}

/* ===============================
   CTA — AJUSTES MOBILE
=============================== */

@media (max-width: 768px) {

  .home .cta-cena {
    margin: 50px 15px 30px;
    padding: 45px 15px;
  }

  .home .cta-titulo {
    font-size: 1.4rem;
    line-height: 1.3;
  }

  .home .cta-texto {
    font-size: 0.9rem;
    margin-bottom: 22px;
  }

  .home .btn-cta-cena {
    width: 100%;
    max-width: 320px;
    padding: 14px 20px;
    font-size: 0.95rem;
  }

  .home .seletor-cultura {
    margin-top: 28px;
    padding: 24px 15px;
  }

   Public Note (Register for private notes)

Search
My Saved Notes
Sort by Title Sort by Updated
All Notes
Inbox
Manage Folders
Read Note Note 01/26/2026 22:2 
Download on the Apple Store   Get it on Google Play

© 2009-2026 aNotepad.com

About Privacy Features Resume Builder Free Fax Report Abuse

aNotepad.com is your everyday online notepad. You can take notes and share notes online without having to login.
You can use a rich text editor and download your note as PDF or Word document.
Best of all - aNotepad is a fast, clean, and easy-to-use notepad online.


 

  .home .seletor-titulo {
    font-size: 0.9rem;
    letter-spacing: 1.2px;
  }

  .home .seletor-opcoes {
    flex-direction: column;
    gap: 12px;
  }

  .home .seletor-opcoes button {
    width: 100%;
    min-width: auto;
  }

}