feat: dynamic service pages with custom forms
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Gestoría LP
@@ -1050,6 +1050,178 @@ select.form-control {
|
||||
color: #0c5460;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Service Page — Hero
|
||||
============================================================ */
|
||||
.service-hero {
|
||||
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 50%, #0E1F30 100%);
|
||||
padding: calc(var(--navbar-height) + var(--space-3xl)) 0 var(--space-3xl);
|
||||
text-align: center;
|
||||
color: var(--color-white);
|
||||
}
|
||||
|
||||
.service-hero__icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
border-radius: 50%;
|
||||
background: rgba(201, 169, 78, 0.15);
|
||||
border: 2px solid rgba(201, 169, 78, 0.3);
|
||||
color: var(--color-accent);
|
||||
font-size: 2.2rem;
|
||||
margin-bottom: var(--space-lg);
|
||||
}
|
||||
|
||||
.service-hero h1 {
|
||||
font-size: var(--font-size-3xl);
|
||||
font-weight: 800;
|
||||
color: var(--color-white);
|
||||
margin-bottom: var(--space-md);
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.service-hero__price {
|
||||
font-size: var(--font-size-lg);
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.service-hero__price strong {
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
.service-hero__price i {
|
||||
color: var(--color-accent);
|
||||
margin-right: var(--space-xs);
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Service Page — Detail Layout
|
||||
============================================================ */
|
||||
.service-detail {
|
||||
display: grid;
|
||||
grid-template-columns: 1.4fr 1fr;
|
||||
gap: var(--space-3xl);
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.service-detail__info {
|
||||
padding-right: var(--space-xl);
|
||||
}
|
||||
|
||||
.service-detail__desc {
|
||||
font-size: var(--font-size-md);
|
||||
color: var(--color-gray-700);
|
||||
line-height: var(--line-height-loose);
|
||||
margin-bottom: var(--space-2xl);
|
||||
}
|
||||
|
||||
.service-detail__info h2 {
|
||||
font-size: var(--font-size-xl);
|
||||
font-weight: 700;
|
||||
color: var(--color-gray-900);
|
||||
margin-bottom: var(--space-lg);
|
||||
margin-top: var(--space-2xl);
|
||||
}
|
||||
|
||||
.service-detail__info h2:first-of-type {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.service-detail__info h2 i {
|
||||
color: var(--color-accent);
|
||||
margin-right: var(--space-sm);
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Service Page — Requirements List
|
||||
============================================================ */
|
||||
.requirements-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-md);
|
||||
}
|
||||
|
||||
.requirements-list li {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: var(--space-sm);
|
||||
font-size: var(--font-size-base);
|
||||
color: var(--color-gray-700);
|
||||
line-height: var(--line-height-normal);
|
||||
}
|
||||
|
||||
.requirements-list li i {
|
||||
color: var(--color-success);
|
||||
font-size: var(--font-size-md);
|
||||
flex-shrink: 0;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Service Page — Process Steps
|
||||
============================================================ */
|
||||
.process-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-lg);
|
||||
counter-reset: none;
|
||||
}
|
||||
|
||||
.process-list li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-md);
|
||||
font-size: var(--font-size-base);
|
||||
color: var(--color-gray-700);
|
||||
line-height: var(--line-height-normal);
|
||||
}
|
||||
|
||||
.step-number {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
|
||||
color: var(--color-white);
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: 700;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Service Page — Form Card
|
||||
============================================================ */
|
||||
.service-detail__form {
|
||||
background-color: var(--color-white);
|
||||
border: 1px solid var(--color-gray-200);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--space-2xl);
|
||||
box-shadow: var(--shadow-md);
|
||||
position: sticky;
|
||||
top: calc(var(--navbar-height) + var(--space-lg));
|
||||
}
|
||||
|
||||
.service-detail__form h2 {
|
||||
font-size: var(--font-size-xl);
|
||||
font-weight: 700;
|
||||
color: var(--color-gray-900);
|
||||
margin-bottom: var(--space-xl);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.service-detail__form label {
|
||||
display: block;
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: 600;
|
||||
color: var(--color-gray-800);
|
||||
margin-bottom: var(--space-xs);
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Scroll Animations
|
||||
============================================================ */
|
||||
@@ -1218,6 +1390,24 @@ select.form-control {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
/* Service page */
|
||||
.service-hero h1 {
|
||||
font-size: var(--font-size-2xl);
|
||||
}
|
||||
|
||||
.service-detail {
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--space-2xl);
|
||||
}
|
||||
|
||||
.service-detail__info {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.service-detail__form {
|
||||
position: static;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
.footer__grid {
|
||||
grid-template-columns: 1fr;
|
||||
@@ -1258,6 +1448,25 @@ select.form-control {
|
||||
padding: 0.75rem 1.5rem;
|
||||
font-size: var(--font-size-base);
|
||||
}
|
||||
|
||||
/* Service page small mobile */
|
||||
.service-hero {
|
||||
padding: calc(var(--navbar-height) + var(--space-2xl)) var(--space-md) var(--space-2xl);
|
||||
}
|
||||
|
||||
.service-hero__icon {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.service-hero h1 {
|
||||
font-size: var(--font-size-xl);
|
||||
}
|
||||
|
||||
.service-detail__form {
|
||||
padding: var(--space-xl) var(--space-lg);
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
|
||||
Reference in New Issue
Block a user