feat: refresh site pages and styling assets
- update contact, documentation, and home pages - refine global and page-specific CSS styles - add reusable global animations stylesheet - add pink Naliia background image asset
This commit is contained in:
@@ -153,6 +153,12 @@
|
||||
--main-border: 1px solid rgba(68, 68, 68, 0.2);
|
||||
--primarybutton-bgcolor: var(--main-pink-500);
|
||||
--primarybutton-txtcolor: var(--base-white);
|
||||
--convexCard-bgcolor: linear-gradient(145deg, #fff2df, #dccbbb);
|
||||
--convex-shadowbox:
|
||||
5px 5px 12px rgba(179, 179, 179, 0.5),
|
||||
-5px -5px 12px rgba(255, 255, 255, 0.6);
|
||||
|
||||
--offercard-bgcolor: var(--base-white);
|
||||
|
||||
--pricingcard-bgcolor: var(--dark-gray);
|
||||
--pricingcard-secundarybgcolor: var(--main-mistyRose-500);
|
||||
@@ -170,6 +176,7 @@
|
||||
--detailstable-primarytxtcolor: var(--light-gray);
|
||||
--detailstable-primaryborder: 1px solid rgba(68, 68, 68, 0.2);
|
||||
|
||||
--contactform-convexbgcolor: linear-gradient(145deg, #ffffff, #e6e6e6);
|
||||
--input-txtcolor: var(--light-gray);
|
||||
|
||||
--documentation-input-bgcolor: transparent;
|
||||
@@ -270,6 +277,11 @@
|
||||
--main-border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
--primarybutton-bgcolor: var(--main-pink-500);
|
||||
--primarybutton-txtcolor: var(--base-white);
|
||||
--convexCard-bgcolor: linear-gradient(145deg, #494949, #3d3d3d);
|
||||
--convex-shadowbox:
|
||||
6px 6px 16px rgba(32, 32, 32, 0.8), -6px -6px 16px rgba(42, 42, 42, 0.7);
|
||||
|
||||
--offercard-bgcolor: var(--dark-gray);
|
||||
|
||||
--pricingcard-bgcolor: var(--darker-gray);
|
||||
--pricingcard-secundarybgcolor: var(--light-gray);
|
||||
@@ -286,6 +298,7 @@
|
||||
--detailstable-primarytxtcolor: var(--base-white);
|
||||
--detailstable-primaryborder: 1px solid rgba(255, 255, 255, 0.2);
|
||||
|
||||
--contactform-convexbgcolor: linear-gradient(145deg, #282828, #212121);
|
||||
--input-txtcolor: var(--light-gray);
|
||||
|
||||
--documentation-input-bgcolor: var(--light-gray);
|
||||
@@ -298,33 +311,6 @@
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
background-color: var(--main-bg-color);
|
||||
font-family: var(--font-family-primary), sans-serif, Arial;
|
||||
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
overflow: hidden;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
& main {
|
||||
flex: 1 0 auto;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: var(--font-desktop-base);
|
||||
line-height: var(--line-height-desktop-base);
|
||||
@@ -444,151 +430,44 @@ summary {
|
||||
}
|
||||
}
|
||||
|
||||
.bg-svg {
|
||||
position: absolute;
|
||||
top: -180px;
|
||||
right: 0px;
|
||||
width: 1400px;
|
||||
height: 1400px;
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
opacity: 0.05;
|
||||
transform: translateX(8%);
|
||||
.whatsapp-link,
|
||||
.instagram-link,
|
||||
.email-link {
|
||||
transition: all 0.1s ease-in-out;
|
||||
}
|
||||
|
||||
.floating-buttons {
|
||||
position: fixed;
|
||||
.whatsapp-link:hover {
|
||||
transform: scale(1.1);
|
||||
|
||||
bottom: 124px;
|
||||
right: 24px;
|
||||
z-index: 1000;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
& .whatsapp-icon path {
|
||||
fill: #25d366;
|
||||
}
|
||||
}
|
||||
|
||||
.floating-button {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 68px;
|
||||
height: 68px;
|
||||
border-radius: 100%;
|
||||
box-shadow: 4px 4px 8px rgba(68, 68, 68, 0.3);
|
||||
.instagram-link:hover {
|
||||
transform: scale(1.1);
|
||||
|
||||
& .instagram-icon path {
|
||||
fill: #d6249f;
|
||||
}
|
||||
}
|
||||
|
||||
.email-link:hover {
|
||||
transform: scale(1.1);
|
||||
|
||||
& .email-icon path {
|
||||
fill: var(--main-pink-500);
|
||||
}
|
||||
}
|
||||
|
||||
.button-hover-effect {
|
||||
transition: all 0.1s ease;
|
||||
|
||||
&:hover {
|
||||
scale: 1.1;
|
||||
transition: scale 0.4s ease;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
|
||||
& .whatsapp-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
& .payment-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
scale: 1.03;
|
||||
}
|
||||
}
|
||||
|
||||
.whatsapp-floatingbutton {
|
||||
background-color: #25d366;
|
||||
|
||||
& .whatsapp-floatingbutton-text {
|
||||
width: max-content;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
background-color: #25d366;
|
||||
padding: var(--padding-sm-8px) var(--padding-lg-24px);
|
||||
color: var(--dark-gray);
|
||||
font-weight: bold;
|
||||
border-radius: var(--space-md-16px);
|
||||
|
||||
position: absolute;
|
||||
right: 80px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
z-index: 1001;
|
||||
|
||||
/* Estado inicial: invisible y cerca del botón */
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
&:hover .whatsapp-floatingbutton-text {
|
||||
/* Estado hover: visible y separado del botón */
|
||||
right: 100px;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
& .whatsapp-floatingbutton-text {
|
||||
font-size: var(--font-mobile-sm);
|
||||
padding: var(--padding-sm-8px) var(--padding-md-16px);
|
||||
}
|
||||
|
||||
&:hover .whatsapp-floatingbutton-text {
|
||||
right: 70px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.payment-floatingbutton {
|
||||
background-color: var(--main-pink-500);
|
||||
|
||||
& .payment-floatingbutton-text {
|
||||
width: max-content;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
background-color: var(--main-pink-500);
|
||||
padding: var(--padding-sm-8px) var(--padding-lg-24px);
|
||||
color: var(--base-white);
|
||||
font-weight: bold;
|
||||
border-radius: var(--space-md-16px);
|
||||
|
||||
position: absolute;
|
||||
right: 80px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
z-index: 1001;
|
||||
|
||||
/* Estado inicial: invisible y cerca del botón */
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
&:hover .payment-floatingbutton-text {
|
||||
/* Estado hover: visible y separado del botón */
|
||||
right: 100px;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
& .payment-floatingbutton-text {
|
||||
font-size: var(--font-mobile-sm);
|
||||
padding: var(--padding-sm-8px) var(--padding-md-16px);
|
||||
}
|
||||
|
||||
&:hover .payment-floatingbutton-text {
|
||||
right: 70px;
|
||||
}
|
||||
}
|
||||
.importantButton-hover-animation:hover {
|
||||
animation: heartBeat 1.2s infinite;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user