:root {
--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
#header .header-nav a:not(.button) {
background: linear-gradient(92.88deg, #846240 0%, #f9de95 55%, #a57540 87%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: var(--fs-color-secondary);
}
.text-color-slate,
.text-color-slate * {
color: #64748b !important;
}
.button {
padding: 2px 30px;
font-weight: normal;
&.secondary {
background: linear-gradient(
135deg,
#d4af37 0%,
var(--fs-color-secondary) 100%
);
box-shadow: 0 10px 25px -5px rgba(180, 150, 80, 0.3);
transition: var(--transition);
i {
display: inline-block;
background: #fff;
border-radius: 100%;
aspect-ratio: 1;
width: 30px;
color: black;
line-height: 30px;
}
&:hover {
background: linear-gradient(135deg, #e5c158 0%, #d4af37 100%);
transform: translateY(-2px);
box-shadow: 0 15px 30px -5px rgba(180, 150, 80, 0.5);
i {
filter: invert(1);
}
}
}
}
.rigoni-whatsapp-button {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 9;
display: flex;
justify-content: center;
align-items: center;
pointer-events: none;
gap: 15px;
.icon {
width: 60px;
height: 60px;
padding: 10px;
background: #25d366;
line-height: 1;
border-radius: 100%;
transition: var(--transition);
pointer-events: all;
}
.ribbon {
background: #fff;
color: #000;
border-radius: 10px;
line-height: 1;
padding: 10px 15px;
text-transform: uppercase;
font-size: 12px;
font-weight: bold;
pointer-events: none;
opacity: 0;
user-select: none;
transition: var(--transition);
}
&:hover {
pointer-events: all;
.icon {
width: 70px;
height: 70px;
}
.ribbon {
opacity: 1;
}
}
}
.bouncing-box {
background: linear-gradient(
135deg,
#d4af37 0%,
var(--fs-color-secondary) 100%
);
box-shadow: 0 10px 25px -5px rgba(180, 150, 80, 0.3);
transition: var(--transition);
border-radius: 20px;
padding: 30px;
animation: bouncing 6s ease-in-out infinite;
&:hover {
background: linear-gradient(135deg, #e5c158 0%, #d4af37 100%);
box-shadow: 0 15px 30px -5px rgba(180, 150, 80, 0.5);
}
}
.footer-menu {
a {
font-size: 0.9rem;
}
}
.contact-container {
.row {
overflow: hidden !important;
border-radius: 30px;
.hover-effect {
background: linear-gradient(
135deg,
#d4af37 0%,
var(--fs-color-secondary) 100%
);
transition: var(--transition);
.col-inner {
transition: var(--transition);
}
&:hover {
background: linear-gradient(
135deg,
#e5c158 0%,
#d4af37 100%
) !important;
.col-inner {
transform: translateY(-2px);
}
}
}
.icon-box {
.icon-box-img {
background: rgb(255 255 255 / 0.1);
border: solid 1px rgb(255 255 255 / 0.1);
border-radius: 100%;
padding: 10px;
height: auto;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
line-height: 1;
svg {
padding: 0;
}
}
}
}
}
.office-card {
.col-inner {
transition: var(--transition);
border: solid 1px #fafafa;
&:before {
content: "";
position: absolute;
top: 10px;
right: 10px;
width: 30%;
height: 30%;
background-image: url(https://blueviolet-viper-294687.hostingersite.com/wp-content/uploads/2026/02/send-plane-line.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: top right;
pointer-events: none;
user-select: none;
opacity: 0.15;
transition: var(--transition);
}
&.dark:before {
filter: invert(1);
}
}
.stack {
position: relative;
> * {
width: 100%;
}
}
.location-box {
.icon-box-img {
background: rgb(180 150 80 / 0.1);
border-radius: 20px;
padding: 15px;
width: 60px !important;
height: 60px !important;
display: flex;
justify-content: center;
align-items: center;
transition: var(--transition);
}
}
.phone-box {
box-shadow:
0 10px 15px -3px rgb(0 0 0 / 0.1),
0 4px 6px -4px rgb(0 0 0 / 0.1);
padding: 20px;
border-radius: 20px;
border: solid 1px rgb(241 245 249 / 0.1);
background: #ffffff05;
transition: all 150ms ease;
}
&:hover {
.col-inner {
box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.15);
transform: translate(0, -20px);
&:before {
transform: translate(-20px, 20px);
}
}
.location-box {
.icon-box-img {
background: rgb(180 150 80 / 1);
}
path {
fill: #fff;
}
}
.phone-box {
border-color: rgb(180 150 80 / 30%);
}
}
}
.rigoni-team-member {
overflow: hidden;
border-radius: 20px;
box-shadow:
0 10px 15px -3px rgb(0 0 0 / 0.1),
0 4px 6px -4px rgb(0 0 0 / 0.1);
height: 100%;
background-image: linear-gradient(to top, rgb(0 0 0 / 15%), white 20%);
background-position: 0 80px;
transition: var(--transition);
.profile-info {
padding: 24px;
p {
line-height: 1;
}
svg {
width: 1em;
}
}
.profile-pic {
overflow: hidden;
img {
transition: var(--transition);
transform-origin: top;
transition-duration: 1s;
}
}
&:hover {
background-position: 0 0;
.profile-pic {
img {
transform: scale(1.3);
}
}
}
}
.rigoni-service-card {
display: block;
.service-icon {
padding: 14px;
background: #f8fafc;
border-radius: 16px;
display: inline-flex;
justify-content: center;
align-items: center;
border: solid 1px #e5e7eb;
margin-bottom: 20px;
transition: var(--transition);
svg {
width: 24px;
}
path {
transition: var(--transition);
}
}
.service-title {
font-size: 14px;
transition: var(--transition);
}
.service-button {
display: flex;
justify-content: flex-start;
align-items: center;
font-size: 14px;
transform: translate(-10px, 0);
opacity: 0;
pointer-events: none;
user-select: none;
transition: var(--transition);
svg {
width: 1em;
margin-left: 10px;
}
}
&:hover {
.service-icon {
background: var(--fs-color-secondary);
border-color: var(--fs-color-secondary);
path {
fill: #fff;
}
}
.service-title {
color: var(--fs-color-secondary);
}
.service-button {
transform: unset;
opacity: 1;
pointer-events: all;
user-select: all;
}
}
}
.rigoni-warning-list {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
gap: 15px;
.rigoni-warning-list-item {
background: #f6f8fa;
border: solid 1px rgb(241, 245, 249);
border-radius: 12px;
display: flex;
justify-content: flex-start;
align-items: center;
padding: 16px;
transition: var(--transition);
gap: 6px;
width: 100%;
text-transform: uppercase;
font-size: 0.75rem;
font-weight: bold;
color: rgb(30 41 59);
svg {
color: #bea66d;
width: 20px;
}
&:hover {
border-color: #bea66d;
}
}
}
.rigoni-alert {
background: #fffbeb;
border-left: solid 4px #f19c0b;
padding: 16px;
color: rgb(146, 64, 14);
font-size: 0.9rem;
a {
display: inline-flex;
align-items: center;
gap: 5px;
svg {
height: 1rem;
}
}
}
.bg-banner .banner {
height: 100%;
@media (max-width: 767px) {
height: 450px;
}
}
.rigoni-icon-card {
border-radius: 30px;
background: rgba(255, 255, 255, 0.02);
backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.05);
transition: var(--transition);
padding: 48px;
height: 100%;
.icon {
background: rgb(180 150 80 / 0.1);
border-radius: 20px;
transition: var(--transition);
scale: 0.9;
width: 64px;
height: 64px;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 20px;
color: var(--fs-color-secondary);
svg {
width: 30px;
}
}
&:hover {
border-color: var(--fs-color-secondary);
.icon {
scale: 1;
background: var(--fs-color-secondary);
color: #fff;
}
}
}
.stack-icons {
.icon-box {
background: rgba(255, 255, 255, 0.02);
backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 20px;
flex: 1;
padding: 16px;
line-height: 1.2;
transition: var(--transition);
svg {
color: var(--fs-color-secondary);
width: 48px;
transition: var(--transition);
}
.icon-box-text {
text-transform: uppercase;
font-size: 0.75rem;
font-weight: bold;
}
&:hover {
background: var(--fs-color-secondary);
border-color: var(--fs-color-secondary);
svg {
color: #fff;
}
}
}
}
.bg-dark-gradient .section-bg-overlay {
background-image: linear-gradient(to bottom, black 20%, transparent);
}
.accordion-item {
.accordion-title {
text-transform: uppercase;
font-weight: bold;
&.active {
color: var(--fs-color-secondary) !important;
}
}
&:first-child {
.accordion-title {
border-top: unset;
}
}
}
.box-glass {
background: rgba(255, 255, 255, 0.02);
backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 20px;
padding: 16px;
transition: var(--transition);
text-transform: uppercase;
font-size: 0.75rem;
font-weight: bold;
}
.rigoni-icon-bright-row {
display: inline-flex;
justify-content: center;
align-items: center;
gap: 12px;
padding: 12px 18px;
border: solid 1px;
border-radius: 30px;
font-size: 0.8rem;
line-height: 1;
margin: 0 15px 15px 0;
animation: glow-pulse 2s ease-in-out infinite;
position: relative;
background: rgba(255, 255, 255, 0.02);
backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.05);
overflow: hidden;
&::before {
content: "";
width: 100%;
height: 100%;
position: absolute;
background-image: linear-gradient(
to right,
rgba(0, 0, 0, 0),
rgba(255, 255, 255, 0.1),
rgba(0, 0, 0, 0)
);
animation: shimmer 5s infinite;
}
.icon {
display: flex;
justify-content: center;
align-items: center;
position: relative;
svg {
width: 24px;
height: auto;
color: var(--fs-color-secondary);
}
}
h5 {
position: relative;
}
}
@keyframes shimmer {
0% {
transform: translateX(-150%);
}
50% {
transform: translateX(150%);
}
100% {
transform: translateX(150%);
}
}
@keyframes glow-pulse {
0% {
box-shadow: 0 0 5px rgba(180, 150, 80, 0.2);
border-color: rgba(180, 150, 80, 0.3);
}
50% {
box-shadow: 0 0 20px rgba(180, 150, 80, 0.6);
border-color: rgba(180, 150, 80, 0.8);
}
100% {
box-shadow: 0 0 5px rgba(180, 150, 80, 0.2);
border-color: rgba(180, 150, 80, 0.3);
}
}
@keyframes bouncing {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-8px);
}
100% {
transform: translateY(0px);
}
}