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
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;
}

3
includes/header.php
View File

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