Got a project in mind?
- Get in Touch → + Let's Talk →diff --git a/css/style.css b/css/style.css index f3523ac..5eb9252 100644 --- a/css/style.css +++ b/css/style.css @@ -245,51 +245,133 @@ a { } /* ======================================== - SERVICES - GRID BLOCKS + SERVICES - LIST ROWS ======================================== */ -.services-grid { - display: grid; - grid-template-columns: repeat(2, 1fr); - gap: 2rem; - background: transparent; -} - -.service-item { - background: var(--black); - padding: 3rem; - border: var(--border-orange); +.services-section { + background: var(--grey-light); + padding: 3rem 2.5rem 0; + margin-bottom: 2rem; box-shadow: var(--shadow); - transition: transform 0.2s; } -.service-item:hover { - transform: scale(1.02); -} - -.service-num { +.services-section-label { font-family: var(--mono); font-size: 0.8rem; - color: var(--black); - background: var(--accent); - padding: 2px 8px; - display: inline-block; - margin-bottom: 1.5rem; - font-weight: 900; -} - -.service-item h3 { - font-family: var(--mono); - font-size: 1.25rem; - font-weight: 800; - margin-bottom: 1rem; - color: var(--accent); text-transform: uppercase; + background: var(--black); + color: var(--accent); + padding: 5px 15px; + display: inline-block; + margin-bottom: 2rem; + font-weight: 900; + border: 1px solid rgba(255,255,255,0.15); } -.service-item p { +.services-heading { + font-family: 'Archivo Black', sans-serif; + font-size: clamp(4rem, 13vw, 13rem); + font-weight: 900; + text-transform: uppercase; + color: #ffffff; + line-height: 0.88; + letter-spacing: -0.02em; + margin-bottom: 3rem; +} + +.services-list { + border-top: 1px solid rgba(255,255,255,0.2); +} + +.service-row { + display: flex; + align-items: center; + padding: 2.5rem 1rem; + margin: 0 -1rem; + border-bottom: 1px solid rgba(255,255,255,0.2); + cursor: default; + overflow: hidden; + transition: background 0.15s ease; +} + +.service-row:hover { + background: var(--black); +} + +.service-row-body { + display: flex; + align-items: flex-start; + gap: 1.75rem; + flex: 1; + min-width: 0; +} + +.service-row-num { + font-family: var(--mono); font-size: 1rem; - color: var(--grey-text); + font-weight: 700; + color: #ff4d00; + padding-top: 0.6rem; + white-space: nowrap; + flex-shrink: 0; +} + +.service-row-content { + flex: 1; + min-width: 0; +} + +.service-row-title { + font-family: 'Archivo Black', sans-serif; + font-size: clamp(2.5rem, 6vw, 6rem); + font-weight: 900; + text-transform: uppercase; + color: #ffffff; + line-height: 0.92; + letter-spacing: -0.02em; + margin-bottom: 1.25rem; + transition: color 0.15s ease; +} + +.service-row:hover .service-row-title { + color: var(--accent); +} + +.service-row-tags { + display: flex; + gap: 0.6rem; + flex-wrap: wrap; +} + +.service-tag { + font-family: var(--mono); + font-size: 0.7rem; + text-transform: uppercase; + color: #ffffff; + border: 1px solid rgba(255,255,255,0.35); + border-radius: 100px; + padding: 5px 14px; + letter-spacing: 0.06em; + white-space: nowrap; +} + + +@media (max-width: 768px) { + .services-section { + padding: 2rem 1.5rem 0; + } + + .service-row { + padding: 2rem 0; + } + + .service-row-num { + padding-top: 0.3rem; + } + + .service-row-arrow { + display: none; + } } /* ======================================== diff --git a/includes/cs_footer.php b/includes/cs_footer.php index 5cffb25..43a81c8 100644 --- a/includes/cs_footer.php +++ b/includes/cs_footer.php @@ -4,7 +4,7 @@
diff --git a/includes/header.php b/includes/header.php index d58ef37..6c3e6a9 100644 --- a/includes/header.php +++ b/includes/header.php @@ -7,7 +7,7 @@ - + diff --git a/index.php b/index.php index 4bff094..b7a3494 100644 --- a/index.php +++ b/index.php @@ -11,7 +11,7 @@ require __DIR__.'/includes/header.php';I build web applications that work.
PHP, MySQL, clean code, no nonsense.
Clean, fast websites that look great on any device. Whether it's a refresh or a brand new site, built to make a good first impression.
-Need a booking page, job tracker, or customer portal? I'll build exactly what your business needs — no bloated templates.
-Let your customers book online, manage appointments, and cut down on phone tag. Perfect for garages, salons, and service businesses.
-Already got a website that needs some love? I'll tidy it up, speed it up, and keep it running smoothly.
-