-
{pageContent.hero.eyebrow}
+
{pageContent.hero.eyebrow}
{pageContent.hero.title}
{#each pageContent.hero.paragraphs as paragraph}
@@ -63,7 +63,7 @@
{#if pageContent.highlight}
-
{pageContent.highlight.eyebrow}
+
{pageContent.highlight.eyebrow}
{pageContent.highlight.title}
@@ -351,16 +351,6 @@
align-items: center;
}
- .service-eyebrow {
- margin: 0 0 18px;
- color: var(--green);
- font-family: var(--font-head);
- font-size: 14px;
- font-weight: 700;
- letter-spacing: 0.08em;
- text-transform: uppercase;
- }
-
.service-hero-copy h1,
.service-section-heading h2,
.service-highlight-copy h2 {
@@ -405,12 +395,13 @@
margin-bottom: 34px;
}
+ /*
+ * Decorative dingbat eyebrow on the highlight section. Inherits sizing /
+ * colour from the shared .eyebrow utility; this rule only adjusts the
+ * downward spacing relative to the H2 underneath.
+ */
.service-highlight-eyebrow {
margin: 0 0 16px;
- color: var(--yellow);
- font-family: var(--font-head);
- font-size: 28px;
- line-height: 1;
}
.service-highlight-image img {
@@ -478,7 +469,7 @@
@media (hover: hover) {
.service-plan-card:hover,
.service-benefit-card:hover {
- transform: translateY(-8px) scale(1.012);
+ transform: translateY(-6px) scale(1.012);
box-shadow: 0 22px 44px rgba(17, 20, 24, 0.1);
}
}
@@ -688,10 +679,6 @@
padding-bottom: 72px;
}
- .service-highlight-eyebrow {
- font-size: 24px;
- }
-
.service-extra-row {
flex-direction: column;
align-items: flex-start;
diff --git a/src/lib/components/TestimonialsSection.svelte b/src/lib/components/TestimonialsSection.svelte
index 73c807e..c18272c 100644
--- a/src/lib/components/TestimonialsSection.svelte
+++ b/src/lib/components/TestimonialsSection.svelte
@@ -326,7 +326,7 @@
.testimonial-stage {
position: relative;
overflow: hidden;
- border-radius: 24px;
+ border-radius: 28px;
background: #fff;
box-shadow: 0 10px 30px rgba(20, 24, 20, 0.06);
min-height: 620px;
diff --git a/src/lib/styles/sections.css b/src/lib/styles/sections.css
index 5ba2070..64294c0 100644
--- a/src/lib/styles/sections.css
+++ b/src/lib/styles/sections.css
@@ -249,7 +249,7 @@ section {
.service-card {
background: var(--off-white);
- border-radius: 20px;
+ border-radius: 28px;
padding: 40px 32px;
text-align: center;
transition:
@@ -280,7 +280,7 @@ section {
@media (hover: hover) {
.service-card:hover {
- transform: translateY(-6px) scale(1.01);
+ transform: translateY(-6px) scale(1.012);
box-shadow: 0 18px 38px rgba(0, 0, 0, 0.1);
}
}
@@ -355,7 +355,7 @@ footer {
.value-card {
background: rgba(255, 255, 255, 0.07);
- border-radius: 16px;
+ border-radius: 28px;
padding: 32px 28px;
border: 1px solid rgba(255, 255, 255, 0.12);
transition:
@@ -366,7 +366,7 @@ footer {
@media (hover: hover) {
.value-card:hover {
- transform: translateY(-5px);
+ 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);
}
@@ -390,7 +390,7 @@ footer {
.testimonial-card {
background: #fff;
- border-radius: 20px;
+ border-radius: 28px;
padding: 36px 32px;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
transition:
@@ -400,7 +400,7 @@ footer {
@media (hover: hover) {
.testimonial-card:hover {
- transform: translateY(-4px);
+ transform: translateY(-6px) scale(1.012);
box-shadow: 0 18px 34px rgba(0, 0, 0, 0.09);
}
}
diff --git a/src/lib/styles/typography.css b/src/lib/styles/typography.css
index f9ef9eb..8506001 100644
--- a/src/lib/styles/typography.css
+++ b/src/lib/styles/typography.css
@@ -35,13 +35,28 @@
.hero-text h1 {
font-family: var(--font-head);
- font-size: 50.2px;
+ font-size: clamp(34px, 4vw, 56px);
font-weight: 800;
- line-height: 1.1;
+ line-height: 1.05;
+ letter-spacing: -0.04em;
margin-bottom: 28px;
color: #fff;
}
+/*
+ * Shared eyebrow utility for the small uppercase label that introduces a
+ * heading. Use this instead of bespoke per-section kickers.
+ */
+.eyebrow {
+ font-family: var(--font-head);
+ font-size: 13px;
+ font-weight: 700;
+ letter-spacing: 0.08em;
+ text-transform: uppercase;
+ color: var(--green);
+ margin: 0 0 14px;
+}
+
.hero-text h1 .hero-heading-mobile {
display: none;
}