admin
a665368d02
Visual consistency pass so every page feels familiar. H1 token (clamp(34px, 4vw, 56px) / line-height 1.05 / letter-spacing -0.04em): - typography.css: hero H1 was 50.2px fixed (with 40px/38px breakpoints). - BookingPage: was clamp(32px, 4vw, 52px). Service-, About-, Pricing-, Legal-page H1s already matched. Shared .eyebrow utility (typography.css): - 13px, green, uppercase, 700, 0.08em letter-spacing. - Replaces the bespoke .service-eyebrow (14px) and .instagram-kicker (11px green pill). - The yellow 28px .service-highlight-eyebrow now inherits the same utility — the eyebrow line is no longer competing with the H2 underneath. Local rule kept only for the bottom-margin override. Card border-radius unified to 28px: - sections.css .service-card: 20px → 28px - sections.css .value-card: 16px → 28px - sections.css .testimonial-card: 20px → 28px - TestimonialsSection .testimonial-stage: 24px → 28px - AboutPage .about-section-gradient + .about-contact-card: 36px → 28px - LegalPage .legal-card: 32px → 28px (mobile 24px → 28px) - InstagramSection .instagram-panel: 24px → 28px - PricingPage .meet-greet-prompt: 24px → 28px (mobile 20px → 28px) Modal dialogs left at 24px (different visual class — overlay, not inline content card). Card hover transform unified to translateY(-6px) scale(1.012): - sections.css .service-card: -6px / 1.01 → 1.012 - sections.css .value-card: -5px (no scale) → -6px / 1.012 - sections.css .testimonial-card: -4px (no scale) → -6px / 1.012 - ServiceLandingPage .service-plan-card / .service-benefit-card: -8px → -6px - PricingPage .pricing-plan-card: -8px → -6px - ServiceLandingPage .service-related-card already -6px / 1.012. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
649 lines
11 KiB
CSS
649 lines
11 KiB
CSS
section {
|
||
padding: 80px 0;
|
||
}
|
||
|
||
#hero {
|
||
background: var(--green);
|
||
color: #fff;
|
||
padding: 44px 50px 0;
|
||
display: flex;
|
||
align-items: center;
|
||
min-height: 500px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.hero-inner {
|
||
align-items: flex-end;
|
||
}
|
||
|
||
.hero-text,
|
||
.promise-text {
|
||
flex: 1;
|
||
}
|
||
|
||
.hero-text {
|
||
padding-bottom: 44px;
|
||
}
|
||
|
||
.hero-subtitle {
|
||
margin: -8px 0 26px;
|
||
max-width: 460px;
|
||
color: rgba(255, 255, 255, 0.86);
|
||
font-size: 18px;
|
||
line-height: 1.55;
|
||
}
|
||
|
||
.hero-buttons {
|
||
display: flex;
|
||
gap: 16px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.hero-img {
|
||
flex: 0 0 46%;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
align-self: flex-end;
|
||
margin-top: 0;
|
||
}
|
||
|
||
.hero-img img {
|
||
width: min(100%, 530px);
|
||
margin: -12px -18px -72px 0;
|
||
}
|
||
|
||
#intro {
|
||
background: #fff;
|
||
padding: 8px 50px 26px;
|
||
text-align: left;
|
||
}
|
||
|
||
.intro-trust-badge {
|
||
display: grid;
|
||
grid-template-columns: auto minmax(0, 1fr);
|
||
gap: 18px;
|
||
align-items: center;
|
||
width: 100%;
|
||
margin: 0;
|
||
padding: 18px 22px;
|
||
border-radius: 26px;
|
||
background: linear-gradient(180deg, #ffffff 0%, #fbf8f2 100%);
|
||
box-shadow:
|
||
0 1px 0 rgba(17, 20, 24, 0.04),
|
||
0 14px 34px rgba(17, 20, 24, 0.06);
|
||
}
|
||
|
||
.intro-trust-mark {
|
||
display: inline-flex;
|
||
position: relative;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 56px;
|
||
height: 56px;
|
||
border-radius: 50%;
|
||
background: #fff;
|
||
color: #e00706;
|
||
font-size: 24px;
|
||
overflow: hidden;
|
||
box-shadow: inset 0 0 0 1px rgba(14, 27, 41, 0.08);
|
||
}
|
||
|
||
.intro-trust-mark-link {
|
||
text-decoration: none;
|
||
isolation: isolate;
|
||
transition:
|
||
transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
|
||
box-shadow 0.22s ease;
|
||
}
|
||
|
||
.intro-trust-mark-link::after {
|
||
content: '';
|
||
position: absolute;
|
||
inset: -30% 35%;
|
||
background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0.92) 50%, rgba(255, 255, 255, 0.2) 70%, transparent 100%);
|
||
transform: translateX(-220%) rotate(18deg);
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
animation: introGoogleShine 4.8s ease-in-out infinite;
|
||
}
|
||
|
||
.intro-trust-mark-link:hover,
|
||
.intro-trust-mark-link:focus-visible {
|
||
transform: translateY(-1px) scale(1.04);
|
||
box-shadow:
|
||
inset 0 0 0 1px rgba(14, 27, 41, 0.08),
|
||
0 10px 24px rgba(17, 20, 24, 0.12);
|
||
}
|
||
|
||
.intro-trust-mark-link:focus-visible {
|
||
outline: 2px solid rgba(10, 48, 78, 0.28);
|
||
outline-offset: 3px;
|
||
}
|
||
|
||
.intro-google-logo {
|
||
display: block;
|
||
position: relative;
|
||
z-index: 1;
|
||
width: 28px;
|
||
height: auto;
|
||
}
|
||
|
||
.intro-trust-copy {
|
||
min-width: 0;
|
||
}
|
||
|
||
#intro p {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
line-height: 1.35;
|
||
max-width: none;
|
||
margin: 0;
|
||
color: #34363a;
|
||
}
|
||
|
||
.intro-trust-meta {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 18px;
|
||
margin-top: 12px;
|
||
}
|
||
|
||
.intro-trust-stars {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
color: var(--yellow);
|
||
font-size: 14px;
|
||
}
|
||
|
||
.intro-trust-cta {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 9px 16px;
|
||
border-radius: 999px;
|
||
background: rgba(255, 255, 255, 0.92);
|
||
color: var(--green);
|
||
font-size: 16px;
|
||
font-weight: 700;
|
||
text-decoration: none;
|
||
box-shadow: inset 0 0 0 1px rgba(14, 27, 41, 0.08);
|
||
}
|
||
|
||
.intro-trust-cta .icon {
|
||
color: #e00706;
|
||
font-size: 20px;
|
||
}
|
||
|
||
@keyframes introGoogleShine {
|
||
0%,
|
||
64%,
|
||
100% {
|
||
transform: translateX(-220%) rotate(18deg);
|
||
opacity: 0;
|
||
}
|
||
|
||
72% {
|
||
opacity: 1;
|
||
}
|
||
|
||
84% {
|
||
transform: translateX(220%) rotate(18deg);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.intro-trust-mark-link,
|
||
.intro-trust-mark-link::after {
|
||
animation: none;
|
||
transition: none;
|
||
}
|
||
}
|
||
|
||
#promise,
|
||
#testimonials,
|
||
#info {
|
||
background: var(--off-white);
|
||
}
|
||
|
||
#services,
|
||
#newlead {
|
||
background: #fff;
|
||
}
|
||
|
||
.promise-text h2 {
|
||
text-align: center;
|
||
}
|
||
|
||
.promise-text p {
|
||
margin-bottom: 28px;
|
||
font-size: 16px;
|
||
max-width: 520px;
|
||
}
|
||
|
||
.promise-text .btn {
|
||
display: block;
|
||
width: fit-content;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.promise-text {
|
||
order: 2;
|
||
}
|
||
|
||
.promise-img {
|
||
order: 1;
|
||
flex: 0 0 48%;
|
||
max-width: 560px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: flex-end;
|
||
}
|
||
|
||
.promise-img img {
|
||
width: 100%;
|
||
max-width: 560px;
|
||
}
|
||
|
||
.service-card {
|
||
background: var(--off-white);
|
||
border-radius: 28px;
|
||
padding: 40px 32px;
|
||
text-align: center;
|
||
transition:
|
||
transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
|
||
box-shadow 0.22s ease;
|
||
}
|
||
|
||
.service-icon-bubble {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 88px;
|
||
height: 88px;
|
||
margin: 0 auto 24px;
|
||
border-radius: 50%;
|
||
box-shadow:
|
||
inset 0 0 0 1px rgba(17, 20, 24, 0.05),
|
||
0 10px 24px rgba(17, 20, 24, 0.08);
|
||
}
|
||
|
||
.service-icon-bubble {
|
||
background: linear-gradient(180deg, #ffe173 0%, #ffd54a 100%);
|
||
transform: translateY(0) rotate(0deg) scale(1);
|
||
transition:
|
||
transform 0.2s cubic-bezier(0.22, 1, 0.36, 1),
|
||
box-shadow 0.2s ease;
|
||
}
|
||
|
||
@media (hover: hover) {
|
||
.service-card:hover {
|
||
transform: translateY(-6px) scale(1.012);
|
||
box-shadow: 0 18px 38px rgba(0, 0, 0, 0.1);
|
||
}
|
||
}
|
||
|
||
@media (hover: hover) and (min-width: 769px) {
|
||
.service-card:hover .service-icon-bubble {
|
||
transform: translateY(-3px) rotate(-5deg) scale(1.04);
|
||
box-shadow:
|
||
inset 0 0 0 1px rgba(17, 20, 24, 0.05),
|
||
0 16px 28px rgba(17, 20, 24, 0.14);
|
||
}
|
||
|
||
.service-card:nth-child(even):hover .service-icon-bubble {
|
||
transform: translateY(-3px) rotate(5deg) scale(1.04);
|
||
}
|
||
}
|
||
|
||
.service-card:active {
|
||
transform: translateY(-1px) scale(0.992);
|
||
}
|
||
|
||
.service-card .service-card-icon {
|
||
font-size: 34px;
|
||
color: var(--green);
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
|
||
.service-card-price {
|
||
display: inline-block;
|
||
margin: 14px 0 0;
|
||
padding: 6px 14px;
|
||
border-radius: 999px;
|
||
background: rgba(33, 48, 33, 0.06);
|
||
color: var(--green);
|
||
font-family: var(--font-head);
|
||
font-size: 14px;
|
||
font-weight: 700;
|
||
letter-spacing: 0.02em;
|
||
}
|
||
|
||
.service-card a.btn {
|
||
margin-top: 18px;
|
||
}
|
||
|
||
.service-card-price + a.btn {
|
||
margin-top: 14px;
|
||
}
|
||
|
||
#values,
|
||
footer {
|
||
background: var(--green);
|
||
color: #fff;
|
||
}
|
||
|
||
#values .section-heading,
|
||
#testimonials .section-heading {
|
||
text-align: center;
|
||
}
|
||
|
||
#services .section-heading {
|
||
text-align: center;
|
||
}
|
||
|
||
footer {
|
||
padding: 60px 50px 32px;
|
||
}
|
||
|
||
.values-inner .section-heading {
|
||
color: #fff;
|
||
}
|
||
|
||
.value-card {
|
||
background: rgba(255, 255, 255, 0.07);
|
||
border-radius: 28px;
|
||
padding: 32px 28px;
|
||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||
transition:
|
||
transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
|
||
box-shadow 0.22s ease,
|
||
border-color 0.22s ease;
|
||
}
|
||
|
||
@media (hover: hover) {
|
||
.value-card:hover {
|
||
transform: translateY(-6px) scale(1.012);
|
||
box-shadow: 0 18px 34px rgba(0, 0, 0, 0.14);
|
||
border-color: rgba(255, 255, 255, 0.18);
|
||
}
|
||
}
|
||
|
||
.value-card:active {
|
||
transform: translateY(-1px) scale(0.994);
|
||
}
|
||
|
||
.value-card .value-card-icon {
|
||
font-size: 28px;
|
||
color: var(--yellow);
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.value-card p {
|
||
font-size: 14px;
|
||
line-height: 1.7;
|
||
opacity: 0.85;
|
||
}
|
||
|
||
.testimonial-card {
|
||
background: #fff;
|
||
border-radius: 28px;
|
||
padding: 36px 32px;
|
||
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
|
||
transition:
|
||
transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
|
||
box-shadow 0.22s ease;
|
||
}
|
||
|
||
@media (hover: hover) {
|
||
.testimonial-card:hover {
|
||
transform: translateY(-6px) scale(1.012);
|
||
box-shadow: 0 18px 34px rgba(0, 0, 0, 0.09);
|
||
}
|
||
}
|
||
|
||
.testimonial-card:active {
|
||
transform: translateY(-1px) scale(0.994);
|
||
}
|
||
|
||
.stars {
|
||
color: var(--yellow);
|
||
font-size: 18px;
|
||
margin-bottom: 14px;
|
||
}
|
||
|
||
.reviewer {
|
||
font-weight: 700;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.reviewer span {
|
||
font-weight: 400;
|
||
color: var(--gray);
|
||
}
|
||
|
||
.info-copy {
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.info-copy a {
|
||
color: var(--green);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.faq details {
|
||
border-bottom: 1px solid #ddd;
|
||
padding: 16px 0;
|
||
}
|
||
|
||
.faq summary {
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
list-style: none;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.faq summary::-webkit-details-marker {
|
||
display: none;
|
||
}
|
||
|
||
.faq summary::after {
|
||
content: '+';
|
||
font-size: 20px;
|
||
color: var(--green);
|
||
}
|
||
|
||
.faq details[open] summary::after {
|
||
content: '−';
|
||
}
|
||
|
||
.faq details p {
|
||
margin-top: 10px;
|
||
color: var(--gray);
|
||
}
|
||
|
||
#instagram {
|
||
background: var(--yellow);
|
||
text-align: center;
|
||
padding: 60px 50px;
|
||
}
|
||
|
||
.instagram-blurb {
|
||
margin: -8px 0 24px;
|
||
font-size: 16px;
|
||
color: rgba(0, 0, 0, 0.6);
|
||
}
|
||
|
||
#instagram .btn {
|
||
background: var(--green);
|
||
color: #fff;
|
||
}
|
||
|
||
.footer-logo {
|
||
display: block;
|
||
height: 22px;
|
||
width: auto;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.footer-brand p {
|
||
font-size: 14px;
|
||
line-height: 1.6;
|
||
opacity: 0.65;
|
||
margin-bottom: 24px;
|
||
white-space: pre-line;
|
||
}
|
||
|
||
.social-links a {
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 50%;
|
||
background: rgba(255, 255, 255, 0.1);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 16px;
|
||
transition: background 0.2s, color 0.2s;
|
||
}
|
||
|
||
.social-links a:hover {
|
||
background: var(--yellow);
|
||
color: #000;
|
||
}
|
||
|
||
.footer-col-label {
|
||
margin: 0 0 16px;
|
||
font-family: var(--font-head);
|
||
font-size: 10px;
|
||
font-weight: 700;
|
||
letter-spacing: 0.12em;
|
||
text-transform: uppercase;
|
||
opacity: 0.45;
|
||
}
|
||
|
||
.footer-nav {
|
||
list-style: none;
|
||
}
|
||
|
||
.footer-nav li {
|
||
margin: 0;
|
||
}
|
||
|
||
.footer-nav a {
|
||
display: block;
|
||
padding: 8px 0;
|
||
font-size: 15px;
|
||
font-weight: 500;
|
||
opacity: 0.75;
|
||
transition: opacity 0.18s;
|
||
}
|
||
|
||
.footer-nav a:hover {
|
||
opacity: 1;
|
||
}
|
||
|
||
.footer-book-btn {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 10px;
|
||
width: 100%;
|
||
padding: 15px 22px;
|
||
border-radius: 999px;
|
||
background: var(--yellow);
|
||
color: #000;
|
||
font-weight: 700;
|
||
font-size: 15px;
|
||
transition: background 0.2s, transform 0.15s;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.footer-book-btn:hover {
|
||
background: #ffe033;
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
.footer-book-note {
|
||
margin: 0 0 20px;
|
||
font-size: 13px;
|
||
opacity: 0.5;
|
||
text-align: center;
|
||
}
|
||
|
||
.footer-reviews {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 9px 16px;
|
||
border-radius: 999px;
|
||
background: rgba(255, 255, 255, 0.07);
|
||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||
font-size: 13px;
|
||
opacity: 0.8;
|
||
transition: background 0.2s, opacity 0.2s;
|
||
}
|
||
|
||
.footer-reviews:hover {
|
||
background: rgba(255, 255, 255, 0.13);
|
||
opacity: 1;
|
||
}
|
||
|
||
.footer-contact {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
margin-top: 16px;
|
||
padding-top: 16px;
|
||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||
}
|
||
|
||
.footer-contact-link {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
opacity: 0.7;
|
||
transition: opacity 0.18s;
|
||
}
|
||
|
||
.footer-contact-link:hover {
|
||
opacity: 1;
|
||
}
|
||
|
||
.footer-contact-link .icon {
|
||
font-size: 12px;
|
||
opacity: 0.8;
|
||
}
|
||
|
||
.footer-bottom {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
flex-wrap: wrap;
|
||
gap: 12px;
|
||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||
padding-top: 24px;
|
||
font-size: 13px;
|
||
opacity: 0.5;
|
||
}
|
||
|
||
.footer-legal {
|
||
display: flex;
|
||
gap: 20px;
|
||
}
|
||
|
||
.footer-legal a {
|
||
opacity: 0.8;
|
||
transition: opacity 0.2s;
|
||
}
|
||
|
||
.footer-legal a:hover {
|
||
opacity: 1;
|
||
}
|