:root {
--white: #FFFFFF;
--black: #000000;
--primary: #6A9340;
--primary-dark: #4a6b2a;
--primary-light: #8fb05c;
--accent: #9bc53d;
--gradient-primary: linear-gradient(135deg, #6A9340 0%, #9bc53d 100%);
--gradient-dark: linear-gradient(135deg, #4a6b2a 0%, #6A9340 100%);
--shadow-soft: 0 10px 40px rgba(0,0,0,0.1);
--shadow-strong: 0 20px 60px rgba(106, 147, 64, 0.3);
}
* {
font-family: 'Inter', sans-serif;
} .glass-effect {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.gradient-text {
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.morphism {
background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
}
.neumorphism {
background: #f0f0f0;
border-radius: 20px;
box-shadow: 
20px 20px 60px #bebebe,
-20px -20px 60px #ffffff;
}
.hover-lift {
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.hover-lift:hover {
transform: translateY(-15px) scale(1.02);
box-shadow: var(--shadow-strong);
}
.parallax-bg {
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.clip-path-hero {
clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}
.clip-path-section {
clip-path: polygon(0 15%, 100% 0, 100% 100%, 0 100%);
} @keyframes float {
0%, 100% { transform: translateY(0px) rotate(0deg); }
33% { transform: translateY(-20px) rotate(2deg); }
66% { transform: translateY(-10px) rotate(-2deg); }
}
@keyframes pulse-glow {
0%, 100% { box-shadow: 0 0 20px rgba(106, 147, 64, 0.4); }
50% { box-shadow: 0 0 40px rgba(106, 147, 64, 0.8); }
}
@keyframes gradient-shift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
@keyframes slide-in-left {
from { transform: translateX(-100px); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
@keyframes slide-in-right {
from { transform: translateX(100px); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
@keyframes fade-in-up {
from { transform: translateY(50px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
@keyframes scale-in {
from { transform: scale(0.8); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
.animate-float { animation: float 6s ease-in-out infinite; }
.animate-pulse-glow { animation: pulse-glow 3s ease-in-out infinite; }
.animate-gradient { 
background: linear-gradient(-45deg, #6A9340, #9bc53d, #4a6b2a, #8fb05c);
background-size: 400% 400%;
animation: gradient-shift 8s ease infinite;
} .scroll-animate {
opacity: 0;
transform: translateY(50px);
transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.scroll-animate.visible {
opacity: 1;
transform: translateY(0);
}
.scroll-slide-left {
opacity: 0;
transform: translateX(-100px);
transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.scroll-slide-left.visible {
opacity: 1;
transform: translateX(0);
}
.scroll-slide-right {
opacity: 0;
transform: translateX(100px);
transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.scroll-slide-right.visible {
opacity: 1;
transform: translateX(0);
}
.scroll-scale {
opacity: 0;
transform: scale(0.8);
transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.scroll-scale.visible {
opacity: 1;
transform: scale(1);
} .btn-modern {
position: relative;
overflow: hidden;
background: var(--gradient-primary);
border: none;
border-radius: 50px;
display: inline-block;
padding: 16px 40px;
font-weight: 600;
font-size: 16px;
color: white;
text-transform: uppercase;
letter-spacing: 1px;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
box-shadow: 0 8px 30px rgba(106, 147, 64, 0.3);
}
.btn-modern::before, .btn-outline-modern::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
transition: left 0.6s;
}
.btn-modern:hover::before, .btn-outline-modern:hover::before {
left: 100%;
}
.btn-modern:hover, .btn-outline-modern:hover {
transform: translateY(-3px) scale(1.05);
box-shadow: 0 15px 50px rgba(106, 147, 64, 0.5);
}
.btn-outline-modern {
background: transparent;
box-shadow: 0 8px 30px rgba(106, 147, 64, 0.3);
border: 2px solid var(--primary);
border-radius: 50px;
color: var(--white);
display: inline-block;
overflow: hidden;
position: relative;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.btn-outline-modern:hover {
background: var(--gradient-primary);
color: white;
border-color: transparent;
} .hero-gradient {
background: linear-gradient(135deg, 
rgba(106, 147, 64, 0.9) 0%, 
rgba(74, 107, 42, 0.8) 50%, 
rgba(155, 197, 61, 0.9) 100%),
url(//bioamb.com.br/wp-content/themes/bioamb-landing/assets/img/capa.jpg);
background-size: cover;
background-position: center;
background-attachment: fixed;
} .card-modern {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
border-radius: 24px;
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
position: relative;
overflow: hidden;
}
.card-modern::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--gradient-primary);
}
.card-modern:hover {
transform: translateY(-10px) scale(1.02);
box-shadow: 0 30px 80px rgba(106, 147, 64, 0.2);
} .icon-modern {
width: 80px;
height: 80px;
background: var(--gradient-primary);
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 2rem;
position: relative;
overflow: hidden;
}
.icon-modern::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%);
transform: scale(0);
transition: transform 0.6s ease;
}
.icon-modern:hover::before {
transform: scale(1);
} .text-shadow-soft {
text-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.text-shadow-strong {
text-shadow: 2px 2px 8px rgba(0,0,0,0.3);
}
#navbar .logo-b {
display: none;
}
#navbar.glass-effect .logo-b {
display: inline-block;
}
#navbar.glass-effect .logo-w {
display: none;
}
#navbar .logo {
max-width: 220px;
transition: all ease-in-out 0.3s;
}
#navbar.glass-effect .logo {
max-width: 200px;
transition: all ease-in-out 0.3s;
}
#navbar #menu-principal li a {
color: var(--white);
}
#navbar.glass-effect #menu-principal li a {
color: var(--black);
}
#footer .logo {
max-width: 180px;
}
#servicos .card-modern {
padding-bottom: 100px;
}
#servicos .card-modern .btn-modern {
bottom: 30px;
left: 30px;
position: absolute;
text-align: center;
width: calc(100% - 60px);
} @media (max-width: 768px) {
.clip-path-hero {
clip-path: polygon(0 0, 100% 0, 100% 95%, 0 100%);
}
.parallax-bg {
background-attachment: scroll;
}
.box-logo {
width: 100% !important;
}
.box-logo .logo {
max-width: 150px !important;
}
#servicos .card-modern {
padding-bottom: 70px;
}
#servicos .card-modern .btn-modern {
bottom: 20px;
left: 15px;
width: calc(100% - 30px);
}
} ::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: var(--gradient-primary);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--gradient-dark);
}