admin/gw-svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Design Language tweaks

Browse Source
This commit is contained in:
ponzischeme89
2026-05-15 01:28:10 +12:00
parent baafafabdb
commit 580d600c47
52 changed files with 3465 additions and 1548 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/styles/responsive.css
+86 -144
View File
@@ -5,7 +5,6 @@
padding-right: var(--space-container-x-tablet);
}
.promise-inner,
.services-inner,
.values-inner,
.testimonials-inner,
@@ -78,6 +77,7 @@
}
.logo {
margin: 0;
justify-content: flex-start;
justify-self: start;
}
@@ -91,19 +91,16 @@
display: inline-flex;
justify-self: center;
align-self: center;
min-height: 44px;
padding: 11px 14px;
width: 40px;
height: 40px;
min-height: 40px;
padding: 0;
background: rgba(33, 48, 33, 0.1);
color: var(--gw-green);
font-family: var(--font-head);
font-size: 11px;
font-weight: 700;
line-height: 1.2;
letter-spacing: 0.01em;
}
.mobile-phone .icon {
font-size: 12px;
font-size: 15px;
}
.nav-links {
@@ -112,7 +109,13 @@
.nav-right {
display: flex;
gap: 18px;
align-items: center;
gap: 12px;
justify-content: flex-end;
}
.nav-end {
display: flex;
justify-content: flex-end;
grid-column: 3;
}
@@ -123,7 +126,7 @@
.instagram-icon {
color: #0a304e;
font-size: 24px;
font-size: 22px;
}
.hamburger {
@@ -170,6 +173,15 @@
visibility 160ms ease;
}
.mobile-menu-backdrop {
position: absolute;
inset: 0;
border: none;
padding: 0;
background: transparent;
cursor: pointer;
}
.mobile-menu-shell.open {
opacity: 1;
visibility: visible;
@@ -312,10 +324,6 @@
transform: none;
}
.hero-floating-pill {
display: none;
}
/* Text content sits above the gradient (z-index: 2) */
.hero-inner {
position: relative;
@@ -366,27 +374,27 @@
white-space: pre-line;
}
/* Subtitle and chips not needed — photo + kicker carry the context */
.hero-subtitle,
.hero-subtitle-desktop,
.hero-subtitle-desktop {
display: block;
margin: 0 0 16px;
max-width: 26ch;
font-size: 15px;
line-height: 1.45;
}
.hero-chips {
display: none;
}
.hero-trust-chip {
width: 100%;
justify-content: center;
margin-bottom: 14px;
padding: 9px 12px;
gap: 8px;
font-size: 11px;
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.18);
margin-bottom: 18px;
}
.hero-trust-stars {
font-size: 9px;
gap: 1px;
.hero-chip,
.hero-trust-chip {
min-height: 34px;
padding: 8px 12px;
font-size: 11px;
background: rgba(255, 255, 255, 0.09);
border-color: rgba(255, 255, 255, 0.14);
}
.hero-trust-logo {
@@ -397,11 +405,11 @@
.hero-buttons {
width: 100%;
flex-direction: column;
gap: 8px;
gap: 10px;
padding-right: 0;
}
.hero-buttons .btn {
.hero-buttons .btn-yellow {
width: 100%;
padding: 13px 20px;
font-size: 14px;
@@ -414,91 +422,60 @@
touch-action: manipulation;
}
.hero-buttons .btn-yellow {
background: var(--yellow);
color: #000;
}
.hero-buttons .btn-outline {
background: rgba(255, 255, 255, 0.08);
color: #fff;
border: 1.5px solid rgba(255, 255, 255, 0.3);
}
.hero-buttons .btn:active {
transform: translateY(1px) scale(0.985);
.hero-secondary-link {
justify-content: center;
width: 100%;
font-size: 13px;
}
.hero-buttons .btn-yellow:active {
background: #e6bb00;
}
.hero-buttons .btn-outline:active {
background: rgba(255, 255, 255, 0.14);
}
#intro {
padding: 30px 24px 24px;
padding: 20px 24px;
}
.intro-trust-badge {
grid-template-columns: 1fr;
gap: 14px;
padding: 18px 18px 16px;
border-radius: 22px;
grid-template-columns: auto minmax(0, 1fr);
gap: 12px;
align-items: center;
padding: 12px 14px;
border-radius: 999px;
background: rgba(33, 48, 33, 0.06);
box-shadow: inset 0 0 0 1px rgba(17, 20, 24, 0.06);
}
.intro-trust-mark {
width: 48px;
height: 48px;
font-size: 21px;
width: 36px;
height: 36px;
font-size: 18px;
box-shadow: none;
}
.intro-google-logo {
width: 24px;
width: 18px;
}
#intro p {
font-size: 17px;
line-height: 1.45;
font-weight: 600;
font-size: 13px;
line-height: 1.3;
font-weight: 700;
margin-bottom: 0;
}
.intro-trust-copy-desktop {
display: none;
}
.intro-trust-copy-mobile {
display: inline;
}
.intro-trust-meta {
flex-direction: column;
align-items: flex-start;
gap: 10px;
display: none;
}
.intro-trust-cta {
gap: 8px;
padding: 8px 14px;
font-size: 15px;
}
.intro-trust-stars {
font-size: 13px;
}
.promise-inner {
flex-direction: column;
padding: 0 var(--space-container-x-mobile);
}
.promise-text {
order: 1;
}
.promise-img {
order: 2;
flex: none;
width: 100%;
max-width: 360px;
margin: 0 auto;
}
.services-grid,
.testimonials-grid,
.info-inner,
.field-group,
@@ -506,30 +483,8 @@
grid-template-columns: 1fr;
}
.values-grid {
grid-template-columns: 1fr;
}
.value-card:nth-child(odd) {
border-right: none;
}
.value-card {
padding: 24px 0;
}
.service-icon-bubble {
width: 78px;
height: 78px;
margin-bottom: 20px;
}
.service-card .service-card-icon {
font-size: 30px;
}
.booking-header {
margin-bottom: 34px;
margin-bottom: 26px;
}
.booking-eyebrow {
@@ -656,21 +611,10 @@
gap: 12px 18px;
}
.booking-toggle-group {
.booking-inline-switch {
flex-direction: column;
}
.booking-toggle-option {
width: 100%;
border-width: 2px;
border-radius: 16px;
padding: 14px 16px;
}
.booking-toggle-indicator {
width: 22px;
height: 22px;
border-width: 2px;
text-align: center;
gap: 4px;
}
.booking-check-option {
@@ -707,12 +651,8 @@
padding: 0 var(--space-container-x-mobile);
}
.section-heading {
font-size: 30px;
}
footer {
padding: 40px var(--space-container-x-mobile) var(--space-container-x-mobile);
padding: 32px var(--space-container-x-mobile) var(--space-container-x-mobile);
}
.footer-inner {
@@ -750,7 +690,7 @@
}
#instagram {
padding: 48px 24px;
padding: 40px 24px;
}
}
@@ -766,13 +706,9 @@
}
.mobile-phone {
gap: 6px;
padding: 10px 12px;
font-size: 12px;
}
.mobile-phone span {
letter-spacing: -0.01em;
width: 38px;
height: 38px;
min-height: 38px;
}
.hero-text h1,
@@ -792,7 +728,7 @@
padding-right: 0;
}
.hero-buttons .btn {
.hero-buttons .btn-yellow {
flex: 1 1 0;
width: 0;
margin-right: 0 !important;
@@ -800,6 +736,12 @@
font-size: 12px;
line-height: 1.1;
}
.hero-secondary-link {
width: auto;
flex: 0 0 auto;
font-size: 12px;
}
}
@media (min-width: 769px) {