Remove services heading and increase services section top padding

Redesign services section with bold typographic layout and update CTA copy across site
2026-03-14 07:29:07 +00:00 · 2026-03-14 07:18:24 +00:00
5 changed files with 176 additions and 62 deletions
--- a/css/style.css
+++ b/css/style.css
@@ -119,7 +119,7 @@ a {
    display: flex;
    flex-direction: column;
    justify-content: center;
-    padding: 4rem 3rem 2rem;
+    padding: 7rem 3rem 2rem;
    border: var(--border-thick);
    background: var(--grey-light);
    margin-bottom: 2rem;
@@ -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;
+    }
 }

 /* ========================================
--- a/includes/cs_footer.php
+++ b/includes/cs_footer.php
@@ -4,7 +4,7 @@
 	<div class="section-content">
 		<a href="/portfolio" class="cs-back cs-back--lg">← Back to All Work</a>
 		<p class="large-text">Got a project in mind?</p>
-		<a href="mailto:hello@uovidiu.com" class="btn">Get in Touch →</a>
+		<a href="mailto:hello@uovidiu.com" class="btn">Let's Talk →</a>
 	</div>
 </section>

--- a/includes/header.php
+++ b/includes/header.php
@@ -7,7 +7,7 @@
    <meta name="description" content="<?php echo htmlspecialchars($description); ?>">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=DM+Sans:wght@400;500&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700;900&family=DM+Sans:wght@400;500&family=Archivo+Black&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="/css/style.css">
    <?php if (!empty($extra_css)): ?>
        <link rel="stylesheet" href="<?php echo htmlspecialchars($extra_css); ?>">
--- a/index.php
+++ b/index.php
@@ -11,7 +11,7 @@ require __DIR__.'/includes/header.php';
 	<p class="hero-sub">I build web applications that work.<br>PHP, MySQL, clean code, no nonsense.</p>
 	<div class="hero-cta">
 		<a href="/portfolio" class="btn">View Work →</a>
-		<a href="#contact" class="btn btn-ghost">Get in Touch</a>
+		<a href="#contact" class="btn btn-ghost">Let's Talk</a>
 	</div>
 </header>

@@ -24,29 +24,61 @@ require __DIR__.'/includes/header.php';
 	</div>
 </section>

-<section id="services" class="section">
-	<div class="section-label">002 — Services</div>
-	<div class="services-grid">
-		<div class="service-item">
-			<span class="service-num">01</span>
-			<h3>Website Design & Development</h3>
-			<p>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.</p>
-		</div>
-		<div class="service-item">
-			<span class="service-num">02</span>
-			<h3>Custom Tools & Systems</h3>
-			<p>Need a booking page, job tracker, or customer portal? I'll build exactly what your business needs — no bloated templates.</p>
-		</div>
-		<div class="service-item">
-			<span class="service-num">03</span>
-			<h3>Booking & Scheduling Systems</h3>
-			<p>Let your customers book online, manage appointments, and cut down on phone tag. Perfect for garages, salons, and service businesses.</p>
-		</div>
-		<div class="service-item">
-			<span class="service-num">04</span>
-			<h3>Ongoing Support & Updates</h3>
-			<p>Already got a website that needs some love? I'll tidy it up, speed it up, and keep it running smoothly.</p>
-		</div>
+<section id="services" class="services-section">
+	<div class="services-section-label">002 — Services</div>
+	<div class="services-list">
+		<div class="service-row">
+			<div class="service-row-body">
+				<span class="service-row-num">(01)</span>
+				<div class="service-row-content">
+					<h3 class="service-row-title">Website Design<br>&amp; Development</h3>
+					<div class="service-row-tags">
+						<span class="service-tag">Design</span>
+						<span class="service-tag">Development</span>
+						<span class="service-tag">Responsive</span>
+					</div>
+				</div>
+			</div>
+			</div>
+		<div class="service-row">
+			<div class="service-row-body">
+				<span class="service-row-num">(02)</span>
+				<div class="service-row-content">
+					<h3 class="service-row-title">Custom Tools<br>&amp; Systems</h3>
+					<div class="service-row-tags">
+						<span class="service-tag">PHP</span>
+						<span class="service-tag">MySQL</span>
+						<span class="service-tag">Custom Builds</span>
+					</div>
+				</div>
+			</div>
+			</div>
+		<div class="service-row">
+			<div class="service-row-body">
+				<span class="service-row-num">(03)</span>
+				<div class="service-row-content">
+					<h3 class="service-row-title">Booking &amp;<br>Scheduling</h3>
+					<div class="service-row-tags">
+						<span class="service-tag">Bookings</span>
+						<span class="service-tag">Automation</span>
+						<span class="service-tag">Small Business</span>
+					</div>
+				</div>
+			</div>
+			</div>
+		<div class="service-row">
+			<div class="service-row-body">
+				<span class="service-row-num">(04)</span>
+				<div class="service-row-content">
+					<h3 class="service-row-title">Ongoing Support<br>&amp; Updates</h3>
+					<div class="service-row-tags">
+						<span class="service-tag">Maintenance</span>
+						<span class="service-tag">Performance</span>
+						<span class="service-tag">Support</span>
+					</div>
+				</div>
+			</div>
+			</div>
 	</div>
 </section>

--- a/portfolio.php
+++ b/portfolio.php
@@ -63,7 +63,7 @@ require __DIR__ . '/data/projects.php';
 	<div class="section-label">002 — Contact</div>
 	<div class="section-content">
 		<p class="large-text">Got a project in mind?</p>
-		<a href="mailto:hello@uovidiu.com" class="btn">Get in Touch →</a>
+		<a href="mailto:hello@uovidiu.com" class="btn">Let's Talk →</a>
 	</div>
 </section>
Author	SHA1	Message	Date
Ovidiu U	a4be60147d	Remove services heading and increase services section top padding	2026-03-14 07:29:07 +00:00
Ovidiu U	a4c8912b61	Redesign services section with bold typographic layout and update CTA copy across site	2026-03-14 07:18:24 +00:00