From a665368d02a4188520b61fffc07d83628486a7d7 Mon Sep 17 00:00:00 2001 From: ponzischeme89 Date: Tue, 5 May 2026 21:23:41 +1200 Subject: [PATCH] UI: unify H1 size, eyebrow style, card radius and hover transform MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- src/lib/components/AboutPage.svelte | 4 +-- src/lib/components/BookingPage.svelte | 2 +- src/lib/components/InstagramSection.svelte | 17 ++++------- src/lib/components/LegalPage.svelte | 4 +-- src/lib/components/PricingPage.svelte | 6 ++-- src/lib/components/ServiceLandingPage.svelte | 29 +++++-------------- src/lib/components/TestimonialsSection.svelte | 2 +- src/lib/styles/sections.css | 12 ++++---- src/lib/styles/typography.css | 19 ++++++++++-- 9 files changed, 45 insertions(+), 50 deletions(-) diff --git a/src/lib/components/AboutPage.svelte b/src/lib/components/AboutPage.svelte index dfc7d91..d98dfb2 100644 --- a/src/lib/components/AboutPage.svelte +++ b/src/lib/components/AboutPage.svelte @@ -102,7 +102,7 @@ .about-section-gradient { margin: 0 24px 88px; padding: 40px 0; - border-radius: 36px; + border-radius: 28px; background: linear-gradient(180deg, #f5efe6 0%, #f9f6ef 100%); } @@ -168,7 +168,7 @@ } .about-contact-card { - border-radius: 36px; + border-radius: 28px; background: #fff; padding: 42px 48px; box-shadow: 0 14px 34px rgba(17, 20, 24, 0.05); diff --git a/src/lib/components/BookingPage.svelte b/src/lib/components/BookingPage.svelte index bf5480e..e0f8459 100644 --- a/src/lib/components/BookingPage.svelte +++ b/src/lib/components/BookingPage.svelte @@ -58,7 +58,7 @@ .booking-page-hero h1 { margin: 0 0 14px; font-family: var(--font-head); - font-size: clamp(32px, 4vw, 52px); + font-size: clamp(34px, 4vw, 56px); line-height: 1.05; letter-spacing: -0.04em; color: #fff; diff --git a/src/lib/components/InstagramSection.svelte b/src/lib/components/InstagramSection.svelte index d655951..00a5875 100644 --- a/src/lib/components/InstagramSection.svelte +++ b/src/lib/components/InstagramSection.svelte @@ -11,7 +11,7 @@
- Daily walks, happy dogs + Daily walks, happy dogs

{instagram.title}

See our dogs in action — walks, play, and happy pups

@@ -43,7 +43,7 @@ position: relative; min-height: 150px; padding: 24px 320px 24px 44px; - border-radius: 24px; + border-radius: 28px; background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.52), transparent 42%), linear-gradient(135deg, rgba(255, 252, 242, 0.98), rgba(255, 243, 198, 0.96)); @@ -63,16 +63,9 @@ } .instagram-kicker { - display: inline-flex; - margin-bottom: 10px; - padding: 6px 12px; - border-radius: 999px; - background: rgba(33, 48, 33, 0.08); - color: var(--green); - font-size: 11px; - font-weight: 700; - letter-spacing: 0.08em; - text-transform: uppercase; + /* All visual styling comes from the shared .eyebrow utility. */ + display: inline-block; + margin: 0 0 10px; } .instagram-copy :global(h2) { diff --git a/src/lib/components/LegalPage.svelte b/src/lib/components/LegalPage.svelte index f4a75e0..19edef7 100644 --- a/src/lib/components/LegalPage.svelte +++ b/src/lib/components/LegalPage.svelte @@ -83,7 +83,7 @@ .legal-card { padding: 40px 44px; - border-radius: 32px; + border-radius: 28px; background: #fff; box-shadow: 0 14px 34px rgba(17, 20, 24, 0.05); } @@ -172,7 +172,7 @@ .legal-card { padding: 28px 22px; - border-radius: 24px; + border-radius: 28px; } .legal-section + .legal-section { diff --git a/src/lib/components/PricingPage.svelte b/src/lib/components/PricingPage.svelte index 4ff7b23..40e335a 100644 --- a/src/lib/components/PricingPage.svelte +++ b/src/lib/components/PricingPage.svelte @@ -349,7 +349,7 @@ gap: 18px; width: min(420px, calc(100vw - 32px)); padding: 18px 18px 18px 20px; - border-radius: 24px; + border-radius: 28px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(247, 243, 232, 0.98)); box-shadow: @@ -460,7 +460,7 @@ @media (hover: hover) { .pricing-plan-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); } } @@ -547,7 +547,7 @@ align-items: stretch; gap: 14px; padding: 18px 18px 16px; - border-radius: 20px; + border-radius: 28px; } .meet-greet-copy p { diff --git a/src/lib/components/ServiceLandingPage.svelte b/src/lib/components/ServiceLandingPage.svelte index e48f846..ba7d7ca 100644 --- a/src/lib/components/ServiceLandingPage.svelte +++ b/src/lib/components/ServiceLandingPage.svelte @@ -38,7 +38,7 @@
-

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