Unify label styling by replacing hero-label with section-label and comment out portfolio CTA section

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:45:23 +00:00 · 2026-03-14 07:29:07 +00:00 · 2026-03-14 07:18:24 +00:00
7 changed files with 193 additions and 79 deletions
--- a/404.php
+++ b/404.php
@@ -22,7 +22,7 @@
    </nav>

    <header class="hero" style="text-align: center; align-items: center;">
-        <div class="hero-label">Error 404</div>
+        <div class="section-label">Error 404</div>
        <h1>Not<br>Found</h1>
        <p class="hero-sub" style="text-align: center;">This page doesn't exist. It probably never did.</p>
        <div class="hero-cta">
--- a/css/style.css
+++ b/css/style.css
@@ -119,22 +119,18 @@ 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;
    box-shadow: var(--shadow);
 }

-.hero-label {
-    font-family: var(--mono);
-    font-size: 0.85rem;
-    text-transform: uppercase;
+.hero .section-label {
    background: var(--accent);
    color: var(--black);
-    display: inline-block;
+    font-size: 0.85rem;
    padding: 4px 12px;
-    font-weight: 900;
    margin-bottom: 2rem;
    width: fit-content;
 }
@@ -245,51 +241,137 @@ 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: var(--mono), serif;
+    font-size: clamp(3rem, 8vw, 8rem);
+    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;
+    }
+
+    .service-row-title {
+        font-size: clamp(2rem, 10vw, 3rem);
+    }
 }

 /* ========================================
--- 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/cs_header.php
+++ b/includes/cs_header.php
@@ -27,7 +27,7 @@ require __DIR__ . '/header.php';
 </div>

 <header class="hero">
-	<div class="hero-label">Case Study — <?= htmlspecialchars($p['num']) ?></div>
+	<div class="section-label">Case Study — <?= htmlspecialchars($p['num']) ?></div>
 	<h1><?= htmlspecialchars($p['h1'][0]) ?><br><span class="h1-sub"><?= htmlspecialchars($p['h1'][1]) ?></span></h1>
 	<p class="hero-sub"><?= htmlspecialchars($p['sub']) ?></p>
 	<ul class="cs-meta-bar">
--- 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
@@ -6,12 +6,12 @@ require __DIR__.'/includes/header.php';
 ?>

 <header class="hero">
-	<div class="hero-label">Web Developer — UK</div>
+	<div class="section-label">Web Developer — UK</div>
 	<h1>Ovidiu<br>Ungureanu</h1>
 	<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,39 +24,71 @@ 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>
+<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 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>
 	</div>
 </section>

-<section class="section section-cta">
-	<div class="section-label">003 — Work</div>
-	<div class="section-content">
-		<p class="large-text">A few recent builds.</p>
-		<a href="/portfolio" class="btn">View Work →</a>
-	</div>
-</section>
+<!--<section class="section section-cta">-->
+<!--	<div class="section-label">003 — Work</div>-->
+<!--	<div class="section-content">-->
+<!--		<p class="large-text">A few recent builds.</p>-->
+<!--		<a href="/portfolio" class="btn">View Work →</a>-->
+<!--	</div>-->
+<!--</section>-->

 <section id="contact" class="section">
 	<div class="section-label">004 — Contact</div>
--- a/portfolio.php
+++ b/portfolio.php
@@ -9,7 +9,7 @@ require __DIR__ . '/data/projects.php';
 ?>

 <header class="hero">
-	<div class="hero-label">Portfolio — Selected Work</div>
+	<div class="section-label">Portfolio — Selected Work</div>
 	<h1>Selected<br>Work</h1>
 	<p class="hero-sub">Client projects and builds.</p>
 </header>
@@ -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	43ba520dae	Unify label styling by replacing hero-label with section-label and comment out portfolio CTA section	2026-03-14 07:45:23 +00:00
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