consultoria-as/gestoria-lp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

redesign: dark premium theme matching logo identity

Browse Source 
Replace navy blue/gold color scheme with dark backgrounds (#0a0a0a, #111, #1a1a1a)
and silver/platinum metallic accents (#c0c0c0, #d4d4d4, #e8e8e8) to match the
LP logo's chrome/silver gradient aesthetic. All sections (navbar, hero, service
cards, values, testimonials, contact, footer, forms, confirmation page) updated
for luxury dark theme with subtle silver glow effects and metallic gradients.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Gestoría LP
2026-03-02 03:59:45 +00:00
parent 5c14c471fe
commit 10f0c25f74
2 changed files with 215 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files

371
assets/css/style.css
View File

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

3
includes/header.php
View File

@@ -16,6 +16,9 @@
<!-- Site Stylesheet --> <!-- Site Stylesheet -->
<link rel="stylesheet" href="assets/css/style.css"> <link rel="stylesheet" href="assets/css/style.css">
<!-- Dark theme meta -->
<meta name="theme-color" content="#0a0a0a">
</head> </head>
<body> <body>