diff --git a/assets/css/style.css b/assets/css/style.css
index 17c315c..5e7fe61 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -1,31 +1,37 @@
/* ============================================================
- Gestoría LP — Main Stylesheet
+ Gestoria LP -- Main Stylesheet
Professional immigration services site
- Color scheme: Navy Blue (#1B3A5C) + Gold (#C9A94E)
+ Color scheme: Dark (#0a0a0a) + Silver/Platinum (#c0c0c0)
+ Premium luxury aesthetic matching logo identity
============================================================ */
/* ----- CSS Custom Properties ----- */
:root {
- /* Brand colors */
- --color-primary: #1B3A5C;
- --color-primary-dark: #122841;
- --color-primary-light: #2A5580;
- --color-accent: #C9A94E;
- --color-accent-dark: #B0912F;
- --color-accent-light: #D4BC70;
+ /* Brand colors -- Dark & Silver */
+ --color-primary: #0a0a0a;
+ --color-primary-dark: #000000;
+ --color-primary-light: #1a1a1a;
+ --color-accent: #c0c0c0;
+ --color-accent-dark: #999999;
+ --color-accent-light: #e0e0e0;
+
+ /* Metallic gradients */
+ --gradient-silver: linear-gradient(135deg, #b8b8b8 0%, #e8e8e8 25%, #c0c0c0 50%, #d4d4d4 75%, #b0b0b0 100%);
+ --gradient-dark: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #111111 100%);
+ --gradient-hero: linear-gradient(135deg, #000000 0%, #1a1a1a 40%, #0d0d0d 100%);
/* Neutrals */
--color-white: #FFFFFF;
- --color-off-white: #F8F9FA;
- --color-gray-100: #F1F3F5;
- --color-gray-200: #E9ECEF;
- --color-gray-300: #DEE2E6;
- --color-gray-400: #CED4DA;
- --color-gray-500: #ADB5BD;
- --color-gray-600: #6C757D;
- --color-gray-700: #495057;
- --color-gray-800: #343A40;
- --color-gray-900: #212529;
+ --color-off-white: #111111;
+ --color-gray-100: #1a1a1a;
+ --color-gray-200: #2a2a2a;
+ --color-gray-300: #3a3a3a;
+ --color-gray-400: #555555;
+ --color-gray-500: #777777;
+ --color-gray-600: #999999;
+ --color-gray-700: #bbbbbb;
+ --color-gray-800: #d4d4d4;
+ --color-gray-900: #e8e8e8;
/* Semantic */
--color-success: #28A745;
@@ -59,11 +65,12 @@
--space-3xl: 4rem;
--space-4xl: 6rem;
- /* Shadows */
- --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
- --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
- --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12);
- --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.15);
+ /* Shadows -- silver glow for dark theme */
+ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
+ --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
+ --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.5);
+ --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.6);
+ --shadow-silver: 0 0 20px rgba(192, 192, 192, 0.08);
/* Borders */
--radius-sm: 4px;
@@ -105,7 +112,7 @@ body {
font-size: var(--font-size-base);
line-height: var(--line-height-normal);
color: var(--color-gray-800);
- background-color: var(--color-white);
+ background-color: var(--color-primary);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
@@ -192,51 +199,55 @@ p:last-child {
transform: translateY(0);
}
+/* Primary button -- silver metallic gradient with dark text */
.btn--primary {
- background-color: var(--color-accent);
- color: var(--color-primary-dark);
- border-color: var(--color-accent);
+ background: var(--gradient-silver);
+ color: #0a0a0a;
+ border-color: rgba(192, 192, 192, 0.3);
}
.btn--primary:hover {
- background-color: var(--color-accent-dark);
- border-color: var(--color-accent-dark);
- box-shadow: var(--shadow-md);
+ background: linear-gradient(135deg, #c8c8c8 0%, #f0f0f0 25%, #d0d0d0 50%, #e0e0e0 75%, #c0c0c0 100%);
+ border-color: rgba(192, 192, 192, 0.5);
+ box-shadow: 0 4px 20px rgba(192, 192, 192, 0.2);
}
+/* Secondary button -- dark with silver border */
.btn--secondary {
- background-color: var(--color-primary);
- color: var(--color-white);
- border-color: var(--color-primary);
+ background-color: var(--color-primary-light);
+ color: var(--color-accent-light);
+ border-color: var(--color-accent-dark);
}
.btn--secondary:hover {
- background-color: var(--color-primary-dark);
- border-color: var(--color-primary-dark);
- box-shadow: var(--shadow-md);
+ background-color: var(--color-accent);
+ color: var(--color-primary);
+ border-color: var(--color-accent);
+ box-shadow: 0 4px 20px rgba(192, 192, 192, 0.15);
}
+/* Outline button -- silver border, silver text */
.btn--outline {
background-color: transparent;
- color: var(--color-white);
- border-color: var(--color-white);
+ color: var(--color-accent-light);
+ border-color: var(--color-accent);
}
.btn--outline:hover {
- background-color: var(--color-white);
+ background: var(--gradient-silver);
color: var(--color-primary);
- box-shadow: var(--shadow-md);
+ box-shadow: 0 4px 20px rgba(192, 192, 192, 0.2);
}
.btn--outline-primary {
background-color: transparent;
- color: var(--color-primary);
- border-color: var(--color-primary);
+ color: var(--color-accent);
+ border-color: var(--color-accent);
}
.btn--outline-primary:hover {
- background-color: var(--color-primary);
- color: var(--color-white);
+ background: var(--gradient-silver);
+ color: var(--color-primary);
}
.btn--sm {
@@ -254,6 +265,7 @@ p:last-child {
width: 100%;
}
+/* WhatsApp button -- keep green, styled for dark theme */
.btn--whatsapp {
background-color: #25D366;
color: var(--color-white);
@@ -263,6 +275,7 @@ p:last-child {
.btn--whatsapp:hover {
background-color: #1DA851;
border-color: #1DA851;
+ box-shadow: 0 4px 20px rgba(37, 211, 102, 0.25);
}
/* ============================================================
@@ -274,15 +287,18 @@ p:last-child {
left: 0;
width: 100%;
height: var(--navbar-height);
- background-color: rgba(255, 255, 255, 0.97);
- backdrop-filter: blur(10px);
- -webkit-backdrop-filter: blur(10px);
+ background-color: rgba(10, 10, 10, 0.95);
+ backdrop-filter: blur(12px);
+ -webkit-backdrop-filter: blur(12px);
z-index: 1000;
transition: box-shadow var(--transition-base), background-color var(--transition-base);
+ border-bottom: 1px solid rgba(192, 192, 192, 0.06);
}
.navbar--scrolled {
- box-shadow: var(--shadow-md);
+ background-color: rgba(0, 0, 0, 0.98);
+ box-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
+ border-bottom-color: rgba(192, 192, 192, 0.1);
}
.navbar__inner {
@@ -297,7 +313,7 @@ p:last-child {
align-items: center;
gap: var(--space-sm);
font-size: var(--font-size-xl);
- color: var(--color-primary);
+ color: var(--color-accent-light);
font-weight: 600;
transition: color var(--transition-fast);
text-decoration: none;
@@ -310,13 +326,13 @@ p:last-child {
}
.navbar__logo {
- height: 40px;
+ height: 55px;
width: auto;
border-radius: 4px;
}
.footer__logo {
- height: 30px;
+ height: 35px;
width: auto;
border-radius: 4px;
vertical-align: middle;
@@ -330,6 +346,7 @@ p:last-child {
.navbar__brand strong {
font-weight: 800;
+ color: var(--color-white);
}
.navbar__list {
@@ -345,15 +362,15 @@ p:last-child {
padding: 0.5rem 1rem;
font-size: var(--font-size-sm);
font-weight: 500;
- color: var(--color-gray-700);
+ color: var(--color-accent);
border-radius: var(--radius-md);
transition: color var(--transition-fast), background-color var(--transition-fast);
text-decoration: none;
}
.navbar__link:hover {
- color: var(--color-primary);
- background-color: var(--color-gray-100);
+ color: var(--color-white);
+ background-color: rgba(192, 192, 192, 0.08);
}
.navbar__link--dropdown i {
@@ -371,10 +388,10 @@ p:last-child {
top: 100%;
left: 0;
min-width: 260px;
- background-color: var(--color-white);
- border: 1px solid var(--color-gray-200);
+ background-color: #141414;
+ border: 1px solid rgba(192, 192, 192, 0.12);
border-radius: var(--radius-lg);
- box-shadow: var(--shadow-lg);
+ box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
opacity: 0;
visibility: hidden;
transform: translateY(8px);
@@ -400,15 +417,15 @@ p:last-child {
gap: var(--space-sm);
padding: 0.65rem 1rem;
font-size: var(--font-size-sm);
- color: var(--color-gray-700);
+ color: var(--color-accent);
border-radius: var(--radius-md);
transition: all var(--transition-fast);
text-decoration: none;
}
.navbar__dropdown-link:hover {
- background-color: var(--color-gray-100);
- color: var(--color-primary);
+ background-color: rgba(192, 192, 192, 0.08);
+ color: var(--color-white);
}
.navbar__dropdown-link i {
@@ -437,7 +454,7 @@ p:last-child {
display: block;
width: 24px;
height: 2.5px;
- background-color: var(--color-primary);
+ background-color: var(--color-accent);
border-radius: 2px;
transition: all var(--transition-base);
transform-origin: center;
@@ -466,7 +483,7 @@ p:last-child {
justify-content: center;
min-height: 100vh;
padding: calc(var(--navbar-height) + var(--space-3xl)) var(--space-lg) var(--space-3xl);
- background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 50%, #0E1F30 100%);
+ background: var(--gradient-hero);
overflow: hidden;
}
@@ -474,8 +491,8 @@ p:last-child {
position: absolute;
inset: 0;
background-image:
- radial-gradient(ellipse at 20% 80%, rgba(201, 169, 78, 0.12) 0%, transparent 50%),
- radial-gradient(ellipse at 80% 20%, rgba(201, 169, 78, 0.08) 0%, transparent 50%);
+ radial-gradient(ellipse at 20% 80%, rgba(192, 192, 192, 0.04) 0%, transparent 50%),
+ radial-gradient(ellipse at 80% 20%, rgba(192, 192, 192, 0.03) 0%, transparent 50%);
pointer-events: none;
}
@@ -484,7 +501,7 @@ p:last-child {
position: absolute;
inset: 0;
background:
- url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Ccircle cx='30' cy='30' r='1.5'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+ url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.02'%3E%3Ccircle cx='30' cy='30' r='1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.hero__content {
@@ -505,7 +522,7 @@ p:last-child {
.hero__subtitle {
font-size: var(--font-size-lg);
- color: rgba(255, 255, 255, 0.8);
+ color: rgba(192, 192, 192, 0.8);
margin-bottom: var(--space-2xl);
line-height: var(--line-height-loose);
max-width: 620px;
@@ -526,6 +543,7 @@ p:last-child {
============================================================ */
.section {
padding: var(--space-4xl) 0;
+ background-color: var(--color-primary);
}
.section:nth-child(even) {
@@ -547,8 +565,9 @@ p:last-child {
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
- color: var(--color-accent-dark);
- background-color: rgba(201, 169, 78, 0.12);
+ color: var(--color-accent-light);
+ background-color: rgba(192, 192, 192, 0.08);
+ border: 1px solid rgba(192, 192, 192, 0.15);
border-radius: var(--radius-full);
margin-bottom: var(--space-md);
}
@@ -556,7 +575,7 @@ p:last-child {
.section__title {
font-size: var(--font-size-3xl);
font-weight: 800;
- color: var(--color-gray-900);
+ color: var(--color-white);
margin-bottom: var(--space-md);
letter-spacing: -0.01em;
}
@@ -577,8 +596,8 @@ p:last-child {
}
.card--service {
- background-color: var(--color-white);
- border: 1px solid var(--color-gray-200);
+ background-color: #141414;
+ border: 1px solid rgba(192, 192, 192, 0.1);
border-radius: var(--radius-lg);
padding: var(--space-2xl) var(--space-xl);
text-align: center;
@@ -594,7 +613,7 @@ p:last-child {
left: 0;
right: 0;
height: 3px;
- background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
+ background: var(--gradient-silver);
transform: scaleX(0);
transform-origin: left;
transition: transform var(--transition-base);
@@ -602,8 +621,8 @@ p:last-child {
.card--service:hover {
transform: translateY(-6px);
- box-shadow: var(--shadow-lg);
- border-color: transparent;
+ box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4), 0 0 20px rgba(192, 192, 192, 0.05);
+ border-color: rgba(192, 192, 192, 0.2);
}
.card--service:hover::before {
@@ -617,21 +636,24 @@ p:last-child {
width: 64px;
height: 64px;
border-radius: var(--radius-lg);
- background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
- color: var(--color-white);
+ background: rgba(192, 192, 192, 0.08);
+ border: 1px solid rgba(192, 192, 192, 0.12);
+ color: var(--color-accent);
font-size: 1.5rem;
margin-bottom: var(--space-lg);
- transition: transform var(--transition-base);
+ transition: all var(--transition-base);
}
.card--service:hover .card__icon {
transform: scale(1.08);
+ background: rgba(192, 192, 192, 0.12);
+ border-color: rgba(192, 192, 192, 0.2);
}
.card__title {
font-size: var(--font-size-lg);
font-weight: 700;
- color: var(--color-gray-900);
+ color: var(--color-white);
margin-bottom: var(--space-sm);
}
@@ -648,13 +670,13 @@ p:last-child {
gap: 0.4rem;
font-size: var(--font-size-sm);
font-weight: 600;
- color: var(--color-primary);
+ color: var(--color-accent);
transition: color var(--transition-fast), gap var(--transition-fast);
text-decoration: none;
}
.card__link:hover {
- color: var(--color-accent-dark);
+ color: var(--color-accent-light);
gap: 0.7rem;
}
@@ -679,23 +701,26 @@ p:last-child {
width: 72px;
height: 72px;
border-radius: 50%;
- background-color: rgba(201, 169, 78, 0.1);
- color: var(--color-accent-dark);
+ background-color: rgba(192, 192, 192, 0.06);
+ border: 1px solid rgba(192, 192, 192, 0.12);
+ color: var(--color-accent);
font-size: 1.6rem;
margin-bottom: var(--space-lg);
transition: all var(--transition-base);
}
.value-card:hover .value-card__icon {
- background-color: var(--color-accent);
- color: var(--color-white);
+ background: var(--gradient-silver);
+ color: #0a0a0a;
+ border-color: transparent;
transform: scale(1.1);
+ box-shadow: 0 0 20px rgba(192, 192, 192, 0.15);
}
.value-card__title {
font-size: var(--font-size-md);
font-weight: 700;
- color: var(--color-gray-900);
+ color: var(--color-white);
margin-bottom: var(--space-sm);
}
@@ -709,7 +734,7 @@ p:last-child {
Testimonials
============================================================ */
.testimonials {
- background-color: var(--color-off-white);
+ background-color: var(--color-primary);
}
.testimonials__grid {
@@ -719,8 +744,8 @@ p:last-child {
}
.testimonial-card {
- background-color: var(--color-white);
- border: 1px solid var(--color-gray-200);
+ background-color: #141414;
+ border: 1px solid rgba(192, 192, 192, 0.1);
border-radius: var(--radius-lg);
padding: var(--space-2xl);
transition: all var(--transition-base);
@@ -735,8 +760,8 @@ p:last-child {
}
.testimonial-card:hover {
- box-shadow: var(--shadow-md);
- border-color: var(--color-gray-300);
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 15px rgba(192, 192, 192, 0.04);
+ border-color: rgba(192, 192, 192, 0.18);
}
.testimonial-card__stars {
@@ -777,15 +802,15 @@ p:last-child {
width: 40px;
height: 40px;
border-radius: 50%;
- background-color: var(--color-primary);
- color: var(--color-white);
+ background: var(--gradient-silver);
+ color: #0a0a0a;
font-size: var(--font-size-sm);
flex-shrink: 0;
}
.testimonial-card__name {
font-weight: 600;
- color: var(--color-gray-900);
+ color: var(--color-white);
font-size: var(--font-size-sm);
}
@@ -810,14 +835,16 @@ p:last-child {
align-items: flex-start;
gap: var(--space-md);
padding: var(--space-lg);
- background-color: var(--color-off-white);
+ background-color: #141414;
+ border: 1px solid rgba(192, 192, 192, 0.08);
border-radius: var(--radius-lg);
transition: all var(--transition-base);
}
.contact__info-card:hover {
- background-color: var(--color-white);
- box-shadow: var(--shadow-md);
+ background-color: #1a1a1a;
+ border-color: rgba(192, 192, 192, 0.15);
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.contact__info-icon {
@@ -827,8 +854,9 @@ p:last-child {
width: 48px;
height: 48px;
border-radius: var(--radius-md);
- background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
- color: var(--color-white);
+ background: rgba(192, 192, 192, 0.08);
+ border: 1px solid rgba(192, 192, 192, 0.12);
+ color: var(--color-accent);
font-size: var(--font-size-lg);
flex-shrink: 0;
}
@@ -836,7 +864,7 @@ p:last-child {
.contact__info-card h4 {
font-size: var(--font-size-sm);
font-weight: 700;
- color: var(--color-gray-900);
+ color: var(--color-white);
margin-bottom: 0.2rem;
}
@@ -849,7 +877,7 @@ p:last-child {
}
.contact__info-card a:hover {
- color: var(--color-primary);
+ color: var(--color-accent-light);
}
.contact__map {
@@ -857,7 +885,7 @@ p:last-child {
overflow: hidden;
box-shadow: var(--shadow-md);
min-height: 350px;
- border: 1px solid var(--color-gray-200);
+ border: 1px solid rgba(192, 192, 192, 0.1);
}
.contact__map iframe {
@@ -868,9 +896,10 @@ p:last-child {
Footer
============================================================ */
.footer {
- background-color: var(--color-primary-dark);
- color: rgba(255, 255, 255, 0.75);
+ background-color: #050505;
+ color: rgba(192, 192, 192, 0.65);
padding: var(--space-3xl) 0 0;
+ border-top: 1px solid rgba(192, 192, 192, 0.06);
}
.footer__grid {
@@ -878,7 +907,7 @@ p:last-child {
grid-template-columns: 1.3fr 1fr 0.8fr;
gap: var(--space-2xl);
padding-bottom: var(--space-2xl);
- border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+ border-bottom: 1px solid rgba(192, 192, 192, 0.08);
}
.footer__heading {
@@ -899,7 +928,7 @@ p:last-child {
.footer__text {
font-size: var(--font-size-sm);
line-height: var(--line-height-loose);
- color: rgba(255, 255, 255, 0.65);
+ color: rgba(192, 192, 192, 0.55);
}
.footer__contact-list {
@@ -923,13 +952,13 @@ p:last-child {
}
.footer__contact-list a {
- color: rgba(255, 255, 255, 0.75);
+ color: rgba(192, 192, 192, 0.65);
transition: color var(--transition-fast);
text-decoration: none;
}
.footer__contact-list a:hover {
- color: var(--color-accent);
+ color: var(--color-accent-light);
}
.footer__social {
@@ -944,24 +973,27 @@ p:last-child {
width: 42px;
height: 42px;
border-radius: 50%;
- background-color: rgba(255, 255, 255, 0.1);
- color: var(--color-white);
+ background-color: rgba(192, 192, 192, 0.08);
+ border: 1px solid rgba(192, 192, 192, 0.1);
+ color: var(--color-accent);
font-size: var(--font-size-md);
transition: all var(--transition-base);
text-decoration: none;
}
.footer__social-link:hover {
- background-color: var(--color-accent);
- color: var(--color-primary-dark);
+ background: var(--gradient-silver);
+ color: #0a0a0a;
+ border-color: transparent;
transform: translateY(-2px);
+ box-shadow: 0 0 15px rgba(192, 192, 192, 0.15);
}
.footer__bottom {
text-align: center;
padding: var(--space-lg) 0;
font-size: var(--font-size-xs);
- color: rgba(255, 255, 255, 0.45);
+ color: rgba(192, 192, 192, 0.35);
}
/* ============================================================
@@ -975,7 +1007,7 @@ p:last-child {
display: block;
font-size: var(--font-size-sm);
font-weight: 600;
- color: var(--color-gray-800);
+ color: var(--color-accent-light);
margin-bottom: var(--space-xs);
}
@@ -989,16 +1021,16 @@ p:last-child {
padding: 0.7rem 1rem;
font-size: var(--font-size-base);
color: var(--color-gray-800);
- background-color: var(--color-white);
- border: 1.5px solid var(--color-gray-300);
+ background-color: #1a1a1a;
+ border: 1.5px solid rgba(192, 192, 192, 0.15);
border-radius: var(--radius-md);
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
outline: none;
}
.form-control:focus {
- border-color: var(--color-primary);
- box-shadow: 0 0 0 3px rgba(27, 58, 92, 0.12);
+ border-color: var(--color-accent);
+ box-shadow: 0 0 0 3px rgba(192, 192, 192, 0.1);
}
.form-control::placeholder {
@@ -1012,7 +1044,7 @@ textarea.form-control {
select.form-control {
appearance: none;
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%236C757D' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23999999' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 1rem center;
background-size: 12px;
@@ -1029,7 +1061,8 @@ select.form-control {
font-size: var(--font-size-sm);
color: var(--color-success);
padding: var(--space-md);
- background-color: rgba(40, 167, 69, 0.08);
+ background-color: rgba(40, 167, 69, 0.1);
+ border: 1px solid rgba(40, 167, 69, 0.2);
border-radius: var(--radius-md);
margin-bottom: var(--space-md);
}
@@ -1046,37 +1079,38 @@ select.form-control {
}
.alert--success {
- background-color: rgba(40, 167, 69, 0.08);
- border-color: rgba(40, 167, 69, 0.2);
- color: #155724;
+ background-color: rgba(40, 167, 69, 0.1);
+ border-color: rgba(40, 167, 69, 0.25);
+ color: #7dcea0;
}
.alert--danger {
- background-color: rgba(220, 53, 69, 0.08);
- border-color: rgba(220, 53, 69, 0.2);
- color: #721c24;
+ background-color: rgba(220, 53, 69, 0.1);
+ border-color: rgba(220, 53, 69, 0.25);
+ color: #f1948a;
}
.alert--warning {
background-color: rgba(255, 193, 7, 0.1);
- border-color: rgba(255, 193, 7, 0.3);
- color: #856404;
+ border-color: rgba(255, 193, 7, 0.25);
+ color: #f9e79f;
}
.alert--info {
- background-color: rgba(23, 162, 184, 0.08);
- border-color: rgba(23, 162, 184, 0.2);
- color: #0c5460;
+ background-color: rgba(23, 162, 184, 0.1);
+ border-color: rgba(23, 162, 184, 0.25);
+ color: #85c1e9;
}
/* ============================================================
- Service Page — Hero
+ Service Page -- Hero
============================================================ */
.service-hero {
- background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 50%, #0E1F30 100%);
+ background: var(--gradient-hero);
padding: calc(var(--navbar-height) + var(--space-3xl)) 0 var(--space-3xl);
text-align: center;
color: var(--color-white);
+ border-bottom: 1px solid rgba(192, 192, 192, 0.06);
}
.service-hero__icon {
@@ -1086,8 +1120,8 @@ select.form-control {
width: 90px;
height: 90px;
border-radius: 50%;
- background: rgba(201, 169, 78, 0.15);
- border: 2px solid rgba(201, 169, 78, 0.3);
+ background: rgba(192, 192, 192, 0.06);
+ border: 2px solid rgba(192, 192, 192, 0.15);
color: var(--color-accent);
font-size: 2.2rem;
margin-bottom: var(--space-lg);
@@ -1103,12 +1137,12 @@ select.form-control {
.service-hero__price {
font-size: var(--font-size-lg);
- color: rgba(255, 255, 255, 0.85);
+ color: rgba(192, 192, 192, 0.75);
margin-bottom: 0;
}
.service-hero__price strong {
- color: var(--color-accent);
+ color: var(--color-accent-light);
}
.service-hero__price i {
@@ -1117,7 +1151,7 @@ select.form-control {
}
/* ============================================================
- Service Page — Detail Layout
+ Service Page -- Detail Layout
============================================================ */
.service-detail {
display: grid;
@@ -1140,7 +1174,7 @@ select.form-control {
.service-detail__info h2 {
font-size: var(--font-size-xl);
font-weight: 700;
- color: var(--color-gray-900);
+ color: var(--color-white);
margin-bottom: var(--space-lg);
margin-top: var(--space-2xl);
}
@@ -1155,7 +1189,7 @@ select.form-control {
}
/* ============================================================
- Service Page — Requirements List
+ Service Page -- Requirements List
============================================================ */
.requirements-list {
display: flex;
@@ -1180,7 +1214,7 @@ select.form-control {
}
/* ============================================================
- Service Page — Process Steps
+ Service Page -- Process Steps
============================================================ */
.process-list {
display: flex;
@@ -1205,19 +1239,19 @@ select.form-control {
width: 36px;
height: 36px;
border-radius: 50%;
- background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
- color: var(--color-white);
+ background: var(--gradient-silver);
+ color: #0a0a0a;
font-size: var(--font-size-sm);
font-weight: 700;
flex-shrink: 0;
}
/* ============================================================
- Service Page — Form Card
+ Service Page -- Form Card
============================================================ */
.service-detail__form {
- background-color: var(--color-white);
- border: 1px solid var(--color-gray-200);
+ background-color: #141414;
+ border: 1px solid rgba(192, 192, 192, 0.1);
border-radius: var(--radius-lg);
padding: var(--space-2xl);
box-shadow: var(--shadow-md);
@@ -1228,7 +1262,7 @@ select.form-control {
.service-detail__form h2 {
font-size: var(--font-size-xl);
font-weight: 700;
- color: var(--color-gray-900);
+ color: var(--color-white);
margin-bottom: var(--space-xl);
text-align: center;
}
@@ -1237,7 +1271,7 @@ select.form-control {
display: block;
font-size: var(--font-size-sm);
font-weight: 600;
- color: var(--color-gray-800);
+ color: var(--color-accent-light);
margin-bottom: var(--space-xs);
}
@@ -1257,7 +1291,8 @@ select.form-control {
max-width: 500px;
margin: 0 auto;
padding: var(--space-3xl);
- background: var(--color-white);
+ background: #141414;
+ border: 1px solid rgba(192, 192, 192, 0.1);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
}
@@ -1269,7 +1304,7 @@ select.form-control {
}
.confirmation-card h1 {
- color: var(--color-primary);
+ color: var(--color-white);
margin-bottom: var(--space-md);
}
@@ -1301,7 +1336,7 @@ select.form-control {
}
/* ============================================================
- Responsive — Tablet (768px)
+ Responsive -- Tablet (768px)
============================================================ */
@media (max-width: 1024px) {
.values__grid {
@@ -1330,12 +1365,13 @@ select.form-control {
width: 85%;
max-width: 360px;
height: 100vh;
- background-color: var(--color-white);
+ background-color: #0a0a0a;
box-shadow: var(--shadow-xl);
padding: calc(var(--navbar-height) + var(--space-lg)) var(--space-xl) var(--space-xl);
transition: right var(--transition-slow);
overflow-y: auto;
z-index: 999;
+ border-left: 1px solid rgba(192, 192, 192, 0.08);
}
.navbar__menu.active {
@@ -1351,7 +1387,7 @@ select.form-control {
.navbar__link {
padding: 0.85rem 0;
font-size: var(--font-size-base);
- border-bottom: 1px solid var(--color-gray-100);
+ border-bottom: 1px solid rgba(192, 192, 192, 0.06);
}
.navbar__link:hover {
@@ -1369,6 +1405,7 @@ select.form-control {
max-height: 0;
overflow: hidden;
transition: max-height var(--transition-base);
+ background-color: transparent;
}
.navbar__item--dropdown.active .navbar__dropdown {
@@ -1377,14 +1414,14 @@ select.form-control {
.navbar__dropdown-link {
padding: 0.6rem 0;
- border-bottom: 1px solid var(--color-gray-100);
+ border-bottom: 1px solid rgba(192, 192, 192, 0.06);
}
/* Mobile overlay */
.navbar__overlay {
position: fixed;
inset: 0;
- background-color: rgba(0, 0, 0, 0.4);
+ background-color: rgba(0, 0, 0, 0.6);
z-index: 998;
opacity: 0;
visibility: hidden;
@@ -1477,10 +1514,15 @@ select.form-control {
grid-template-columns: 1fr;
gap: var(--space-xl);
}
+
+ /* Logo smaller on mobile */
+ .navbar__logo {
+ height: 45px;
+ }
}
/* ============================================================
- Responsive — Small Mobile (480px)
+ Responsive -- Small Mobile (480px)
============================================================ */
@media (max-width: 480px) {
.container {
@@ -1561,20 +1603,31 @@ select.form-control {
min-height: auto;
padding: var(--space-xl) 0;
background: none;
- color: var(--color-gray-900);
+ color: #212529;
}
.hero__title,
.hero__subtitle {
- color: var(--color-gray-900);
+ color: #212529;
}
.section {
padding: var(--space-xl) 0;
+ background-color: #fff;
}
body {
font-size: 12pt;
+ color: #212529;
+ background-color: #fff;
+ }
+
+ h1, h2, h3, h4, h5, h6 {
+ color: #212529;
+ }
+
+ .section__title {
+ color: #212529;
}
}
@@ -1598,7 +1651,7 @@ select.form-control {
}
:focus-visible {
- outline: 2px solid var(--color-primary);
+ outline: 2px solid var(--color-accent);
outline-offset: 2px;
}
diff --git a/includes/header.php b/includes/header.php
index c9b15d2..7fc88d4 100644
--- a/includes/header.php
+++ b/includes/header.php
@@ -16,6 +16,9 @@
+
+
+