/* ============================================================
CYBERSYS.CO.MZ - CUSTOM OVERRIDES
Carregar este ficheiro DEPOIS de style.css
Inclui no do index.html:
============================================================ */
/* ------------------------------------------------------------
VARIÁVEIS DE MARCA
------------------------------------------------------------ */
:root {
--cyber-orange: #ff6b1a;
--cyber-orange-light: #ff8a42;
--cyber-orange-glow: rgba(255, 107, 26, 0.35);
--cyber-dark: #0a0e1a;
--cyber-navy: #0f1729;
--glass-bg: rgba(255, 255, 255, 0.04);
--glass-border: rgba(255, 255, 255, 0.08);
--glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.35);
}
/* ------------------------------------------------------------
1. LOGO — 'c' sempre laranja
(usa-se CSS filter caso a imagem tenha o C noutra cor)
Se o logo já é PNG com C laranja, isto não altera nada.
------------------------------------------------------------ */
.navbar-brand .navbar-logo {
/* mantém as cores originais — não força filtro */
transition: filter 0.3s ease, transform 0.3s ease;
}
/* garantir que no hover o C não fica esbatido */
.navbar-brand:hover .navbar-logo {
filter: drop-shadow(0 0 12px var(--cyber-orange-glow));
transform: scale(1.03);
}
/* Se algum ::before ou overlay estiver a pintar o C de branco, neutraliza */
.navbar.scrolled .navbar-logo,
.navbar .navbar-logo {
filter: none !important;
opacity: 1 !important;
}
/* ------------------------------------------------------------
2. MENU — transparente com um pouco de fundo branco + blur
------------------------------------------------------------ */
#mainNavbar,
nav.navbar.fixed-top {
background: rgba(255, 255, 255, 0.08) !important;
-webkit-backdrop-filter: saturate(160%) blur(18px);
backdrop-filter: saturate(160%) blur(18px);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
transition: background 0.35s ease, backdrop-filter 0.35s ease, border-color 0.35s ease;
}
/* quando faz scroll, levemente mais sólido para leitura */
#mainNavbar.scrolled,
nav.navbar.fixed-top.scrolled {
background: rgba(10, 14, 26, 0.55) !important;
border-bottom-color: rgba(255, 107, 26, 0.15);
}
/* links do menu */
#mainNavbar .nav-link {
color: rgba(255, 255, 255, 0.85) !important;
font-weight: 500;
letter-spacing: 0.3px;
position: relative;
padding: 0.5rem 1rem !important;
transition: color 0.25s ease;
}
#mainNavbar .nav-link::after {
content: "";
position: absolute;
left: 50%;
bottom: 6px;
width: 0;
height: 2px;
background: linear-gradient(90deg, var(--cyber-orange), var(--cyber-orange-light));
border-radius: 2px;
transform: translateX(-50%);
transition: width 0.3s ease;
}
#mainNavbar .nav-link:hover,
#mainNavbar .nav-link.active {
color: var(--cyber-orange) !important;
}
#mainNavbar .nav-link:hover::after,
#mainNavbar .nav-link.active::after {
width: 60%;
}
/* hamburger mobile */
#mainNavbar .navbar-toggler {
border-color: rgba(255, 255, 255, 0.25);
padding: 0.4rem 0.6rem;
}
#mainNavbar .navbar-toggler:focus { box-shadow: 0 0 0 2px var(--cyber-orange-glow); }
#mainNavbar .navbar-toggler-icon {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23ff6b1a' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.5' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
/* ------------------------------------------------------------
3. PARCEIROS — 2 do meio coloridos, restantes monocromáticos
------------------------------------------------------------ */
.parceiros-carousel-wrapper {
position: relative;
overflow: hidden;
padding: 2rem 0;
-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}
.parceiros-track {
display: flex;
gap: 3rem;
width: max-content;
animation: parceiros-scroll 40s linear infinite;
}
@keyframes parceiros-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.parceiro-slide {
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.5rem;
min-width: 180px;
padding: 1rem 1.2rem;
text-decoration: none;
color: rgba(255, 255, 255, 0.6);
border-radius: 14px;
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.05);
transition: all 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.parceiro-logo {
max-height: 60px;
width: auto;
filter: grayscale(100%) opacity(0.55);
transition: filter 0.45s ease, transform 0.45s ease;
}
/* Hover — qualquer slide ao passar rato */
.parceiro-slide:hover .parceiro-logo {
filter: none;
transform: scale(1.08);
}
.parceiro-slide:hover {
color: var(--cyber-orange);
border-color: rgba(255, 107, 26, 0.35);
background: rgba(255, 107, 26, 0.06);
transform: translateY(-4px);
}
/* Os dois centrais (visíveis a meio do viewport) — coloridos.
Calculamos pela posição relativa dentro da lista visível. */
.parceiros-track .parceiro-slide.is-focus .parceiro-logo {
filter: none !important;
}
.parceiros-track .parceiro-slide.is-focus {
color: #fff;
}
/* Fallback: se não houver JS para calcular, destaca os do meio via nth-child pares */
@media (min-width: 992px) {
.parceiros-track:not(:hover) .parceiro-slide:nth-child(4n+2) .parceiro-logo,
.parceiros-track:not(:hover) .parceiro-slide:nth-child(4n+3) .parceiro-logo {
filter: grayscale(0%) opacity(1);
}
}
/* Pausar animação ao hover */
.parceiros-carousel-wrapper:hover .parceiros-track {
animation-play-state: paused;
}
/* ------------------------------------------------------------
4. SECÇÃO SERVIÇOS — Glassmorphism
------------------------------------------------------------ */
#servicos,
.servicos-section {
position: relative;
background: linear-gradient(180deg, transparent 0%, rgba(255, 107, 26, 0.02) 50%, transparent 100%);
}
#servicos .service-card,
.servicos-section .service-card,
.servico-card {
position: relative;
background: var(--glass-bg) !important;
-webkit-backdrop-filter: blur(20px) saturate(180%);
backdrop-filter: blur(20px) saturate(180%);
border: 1px solid var(--glass-border);
border-radius: 18px;
padding: 2rem 1.75rem;
box-shadow: var(--glass-shadow);
overflow: hidden;
transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
border-color 0.35s ease,
box-shadow 0.45s ease;
}
/* Borda gradiente subtil (efeito vidro premium) */
#servicos .service-card::before,
.servicos-section .service-card::before,
.servico-card::before {
content: "";
position: absolute;
inset: 0;
padding: 1px;
border-radius: inherit;
background: linear-gradient(135deg, rgba(255, 107, 26, 0.35), rgba(255, 255, 255, 0.02) 40%, rgba(255, 107, 26, 0.15));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
opacity: 0.6;
transition: opacity 0.45s ease;
}
/* Reflexo superior diagonal (efeito vidro) */
#servicos .service-card::after,
.servicos-section .service-card::after,
.servico-card::after {
content: "";
position: absolute;
top: -50%;
left: -30%;
width: 60%;
height: 200%;
background: linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, 0.06) 50%, transparent 80%);
transform: rotate(20deg);
pointer-events: none;
transition: left 0.8s ease;
}
#servicos .service-card:hover,
.servicos-section .service-card:hover,
.servico-card:hover {
transform: translateY(-6px);
border-color: rgba(255, 107, 26, 0.35);
box-shadow: 0 20px 60px rgba(255, 107, 26, 0.12), var(--glass-shadow);
}
#servicos .service-card:hover::before,
.servicos-section .service-card:hover::before,
.servico-card:hover::before { opacity: 1; }
#servicos .service-card:hover::after,
.servicos-section .service-card:hover::after,
.servico-card:hover::after { left: 120%; }
/* Ícone do serviço */
.servico-card .service-icon,
#servicos .service-icon,
.servicos-section .service-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: 14px;
background: linear-gradient(135deg, rgba(255, 107, 26, 0.2), rgba(255, 107, 26, 0.04));
color: var(--cyber-orange);
font-size: 1.6rem;
margin-bottom: 1rem;
box-shadow: 0 4px 16px rgba(255, 107, 26, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
/* ------------------------------------------------------------
5. HEXÁGONOS DE FUNDO — moderno e profissional
------------------------------------------------------------ */
.hex-bg,
.hexagons-bg,
.hero-hex,
.bg-hex {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
z-index: 0;
opacity: 0.55;
-webkit-mask-image: radial-gradient(ellipse at center, #000 40%, transparent 75%);
mask-image: radial-gradient(ellipse at center, #000 40%, transparent 75%);
}
/* Grelha de hexágonos via SVG data URI — pattern estático elegante */
.hex-bg::before,
.hexagons-bg::before,
.hero-hex::before,
.bg-hex::before {
content: "";
position: absolute;
inset: -10%;
background-image: url("data:image/svg+xml;utf8,");
background-size: 120px 104px;
animation: hex-drift 60s linear infinite;
}
/* Pontos brilhantes a pulsar nos vértices */
.hex-bg::after,
.hexagons-bg::after,
.hero-hex::after,
.bg-hex::after {
content: "";
position: absolute;
inset: 0;
background-image:
radial-gradient(circle at 20% 30%, rgba(255, 107, 26, 0.4) 0, transparent 1.5px),
radial-gradient(circle at 70% 20%, rgba(255, 107, 26, 0.3) 0, transparent 2px),
radial-gradient(circle at 85% 65%, rgba(255, 107, 26, 0.35) 0, transparent 1.8px),
radial-gradient(circle at 30% 80%, rgba(255, 107, 26, 0.25) 0, transparent 2px),
radial-gradient(circle at 50% 50%, rgba(255, 107, 26, 0.5) 0, transparent 2.5px);
filter: blur(0.3px);
animation: hex-pulse 6s ease-in-out infinite;
}
@keyframes hex-drift {
from { transform: translate(0, 0); }
to { transform: translate(-120px, -104px); }
}
@keyframes hex-pulse {
0%, 100% { opacity: 0.9; }
50% { opacity: 0.35; }
}
/* Gradiente radial de fundo que dá profundidade (aurora) */
.hero,
#inicio,
.hero-section {
position: relative;
background:
radial-gradient(ellipse 80% 50% at 20% 0%, rgba(255, 107, 26, 0.12), transparent 60%),
radial-gradient(ellipse 60% 50% at 100% 100%, rgba(99, 102, 241, 0.08), transparent 60%),
linear-gradient(180deg, #0a0e1a 0%, #0f1729 100%);
}
/* ------------------------------------------------------------
6. NOVOS PROJECTOS — CyberGest & SysWater
Estilos base para a secção (HTML adicionar separadamente)
------------------------------------------------------------ */
#projectos,
.projectos-section,
#projetos {
position: relative;
padding: 6rem 0;
}
.projecto-card {
position: relative;
display: flex;
flex-direction: column;
min-height: 340px;
padding: 2rem;
border-radius: 20px;
background: var(--glass-bg);
-webkit-backdrop-filter: blur(22px) saturate(180%);
backdrop-filter: blur(22px) saturate(180%);
border: 1px solid var(--glass-border);
overflow: hidden;
text-decoration: none;
color: inherit;
transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
border-color 0.4s ease,
box-shadow 0.5s ease;
}
.projecto-card::before {
content: "";
position: absolute;
inset: 0;
background: var(--projecto-accent, linear-gradient(135deg, rgba(255, 107, 26, 0.15), transparent 60%));
opacity: 0.7;
z-index: 0;
pointer-events: none;
}
.projecto-card::after {
content: "";
position: absolute;
inset: 0;
padding: 1px;
border-radius: inherit;
background: linear-gradient(135deg, rgba(255, 107, 26, 0.45), transparent 40%, rgba(255, 107, 26, 0.25));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
opacity: 0;
transition: opacity 0.5s ease;
}
.projecto-card > * { position: relative; z-index: 1; }
.projecto-card:hover {
transform: translateY(-8px);
border-color: rgba(255, 107, 26, 0.35);
box-shadow: 0 24px 70px rgba(255, 107, 26, 0.15);
}
.projecto-card:hover::after { opacity: 1; }
.projecto-badge {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.35rem 0.8rem;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.5px;
text-transform: uppercase;
color: var(--cyber-orange);
background: rgba(255, 107, 26, 0.1);
border: 1px solid rgba(255, 107, 26, 0.25);
border-radius: 100px;
margin-bottom: 1rem;
width: fit-content;
}
.projecto-title {
font-size: 1.75rem;
font-weight: 700;
margin-bottom: 0.75rem;
background: linear-gradient(120deg, #fff 30%, rgba(255, 107, 26, 0.85) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.projecto-desc {
font-size: 0.98rem;
line-height: 1.6;
color: rgba(255, 255, 255, 0.72);
margin-bottom: 1.5rem;
flex-grow: 1;
}
.projecto-stack {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 1.25rem;
}
.projecto-stack .tag {
font-size: 0.75rem;
padding: 0.25rem 0.6rem;
border-radius: 6px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.75);
}
.projecto-cta {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-weight: 600;
color: var(--cyber-orange);
text-decoration: none;
transition: gap 0.25s ease;
}
.projecto-card:hover .projecto-cta {
gap: 0.8rem;
}
/* Variantes por projecto */
.projecto-card.cybergest {
--projecto-accent: radial-gradient(ellipse at top right, rgba(255, 107, 26, 0.25), transparent 60%);
}
.projecto-card.syswater {
--projecto-accent: radial-gradient(ellipse at top right, rgba(37, 193, 245, 0.28), transparent 60%);
}
.projecto-card.syswater .projecto-badge {
color: #25c1f5;
background: rgba(37, 193, 245, 0.1);
border-color: rgba(37, 193, 245, 0.3);
}
.projecto-card.syswater .projecto-title {
background: linear-gradient(120deg, #fff 30%, #25c1f5 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.projecto-card.syswater .projecto-cta { color: #25c1f5; }
/* ------------------------------------------------------------
7. RESPONSIVE / MOBILE
------------------------------------------------------------ */
@media (max-width: 991.98px) {
/* Navbar mobile — fundo mais sólido para legibilidade */
#mainNavbar {
background: rgba(10, 14, 26, 0.82) !important;
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
}
#mainNavbar .navbar-collapse {
margin-top: 0.75rem;
padding: 1rem;
border-radius: 14px;
background: rgba(15, 23, 41, 0.95);
border: 1px solid rgba(255, 255, 255, 0.08);
}
#mainNavbar .nav-link {
padding: 0.75rem 1rem !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
#mainNavbar .nav-link::after { display: none; }
#mainNavbar .nav-link.active,
#mainNavbar .nav-link:hover {
background: rgba(255, 107, 26, 0.08);
border-radius: 8px;
border-bottom-color: transparent;
}
/* Service cards */
#servicos .service-card,
.servico-card {
padding: 1.5rem 1.25rem;
}
/* Partners — slides mais compactos */
.parceiro-slide { min-width: 140px; padding: 0.75rem 1rem; }
.parceiro-logo { max-height: 48px; }
.parceiros-track { gap: 1.75rem; animation-duration: 28s; }
/* Projectos */
.projecto-card { min-height: 280px; padding: 1.5rem; }
.projecto-title { font-size: 1.4rem; }
/* Hexagons menos densos em mobile */
.hex-bg::before, .hexagons-bg::before, .hero-hex::before, .bg-hex::before {
background-size: 80px 70px;
}
}
@media (max-width: 575.98px) {
.projecto-title { font-size: 1.25rem; }
.projecto-desc { font-size: 0.9rem; }
.parceiro-slide { min-width: 120px; }
.parceiro-logo { max-height: 40px; }
#mainNavbar .navbar-logo { max-height: 36px; }
}
/* ------------------------------------------------------------
8. SUAVIDADES E ACESSIBILIDADE
------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
.parceiros-track { animation: none; }
.hex-bg::before, .hexagons-bg::before, .hero-hex::before, .bg-hex::before { animation: none; }
.hex-bg::after, .hexagons-bg::after, .hero-hex::after, .bg-hex::after { animation: none; }
.servico-card, .projecto-card, #mainNavbar { transition: none; }
}
html { scroll-behavior: smooth; }
*:focus-visible {
outline: 2px solid var(--cyber-orange);
outline-offset: 2px;
border-radius: 4px;
}