← back to Designtradelive
polish: editorial-bold hero + Field Guide section (3-card 'How to work the year')
4b9a7a97bca15f5ff25f9f4ed608230d2fa4ef3d · 2026-05-13 14:02:15 -0700 · Steve Abrams
Files touched
M public/styles.cssM views/index.ejs
Diff
commit 4b9a7a97bca15f5ff25f9f4ed608230d2fa4ef3d
Author: Steve Abrams <steve@designerwallcoverings.com>
Date: Wed May 13 14:02:15 2026 -0700
polish: editorial-bold hero + Field Guide section (3-card 'How to work the year')
---
public/styles.css | 121 +++++++++++++++++++++++++++++++++++++++++++++++-------
views/index.ejs | 41 +++++++++++++++---
2 files changed, 143 insertions(+), 19 deletions(-)
diff --git a/public/styles.css b/public/styles.css
index 7a9d669..cde5399 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -128,13 +128,13 @@ a:hover { color: var(--accent-2); }
[data-theme="dark"] .theme-icon-light,
[data-theme="light"] .theme-icon-dark { display: none; }
-/* Hero */
+/* Hero — editorial-bold */
.hero {
- padding: 4rem 1.5rem 2.5rem;
+ padding: 5rem 1.5rem 3rem;
border-bottom: 1px solid var(--line);
background:
- radial-gradient(ellipse at top right, rgba(201,161,74,0.08), transparent 60%),
- radial-gradient(ellipse at bottom left, rgba(108,140,214,0.06), transparent 60%),
+ radial-gradient(ellipse at top right, rgba(201,161,74,0.10), transparent 62%),
+ radial-gradient(ellipse at bottom left, rgba(108,140,214,0.07), transparent 60%),
var(--bg);
}
.hero-inner {
@@ -142,26 +142,115 @@ a:hover { color: var(--accent-2); }
margin: 0 auto;
}
.kicker {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.7rem;
text-transform: uppercase;
- letter-spacing: 0.18em;
- font-size: 0.78rem;
+ letter-spacing: 0.22em;
+ font-size: 0.74rem;
+ font-weight: 600;
color: var(--accent);
- margin: 0 0 0.75rem;
+ margin: 0 0 1.1rem;
+}
+.kicker-rule {
+ display: inline-block;
+ width: 28px;
+ height: 1px;
+ background: var(--accent);
+ opacity: 0.7;
}
.hero h1 {
font-family: var(--font-serif);
font-weight: 600;
- font-size: clamp(2rem, 4.5vw, 3.4rem);
- line-height: 1.1;
- margin: 0 0 1rem;
- letter-spacing: -0.01em;
+ font-size: clamp(2.4rem, 6vw, 4.6rem);
+ line-height: 1.02;
+ margin: 0 0 1.25rem;
+ letter-spacing: -0.018em;
+ max-width: 16ch;
+}
+.hero h1 .hero-accent {
+ font-style: italic;
+ color: var(--accent);
+ font-weight: 500;
}
.hero .lede {
- font-size: 1.1rem;
+ font-size: 1.18rem;
+ line-height: 1.5;
color: var(--text-dim);
- max-width: 60ch;
+ max-width: 58ch;
margin: 0 0 1.75rem;
}
+.hero-stats {
+ margin: 1.5rem 0 0;
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.55rem 0.9rem;
+ font-size: 0.83rem;
+ color: var(--text-dim);
+ text-transform: uppercase;
+ letter-spacing: 0.12em;
+}
+.hero-stats strong { color: var(--text); font-weight: 700; }
+.hero-stats .hero-dot { color: var(--accent); }
+
+/* Field Guide — editorial section */
+.field-guide {
+ border-bottom: 1px solid var(--line);
+ background: var(--bg-2);
+ padding: 4rem 1.5rem;
+}
+.field-guide-inner {
+ max-width: var(--max-w);
+ margin: 0 auto;
+}
+.field-guide h2 {
+ font-family: var(--font-serif);
+ font-size: clamp(1.6rem, 3.4vw, 2.4rem);
+ font-weight: 600;
+ letter-spacing: -0.012em;
+ margin: 0 0 2rem;
+ max-width: 22ch;
+ line-height: 1.1;
+}
+.field-guide-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+ gap: 1.5rem;
+}
+.fg-card {
+ padding: 1.75rem 1.5rem 1.5rem;
+ background: var(--bg);
+ border: 1px solid var(--line);
+ border-radius: var(--radius-lg);
+ position: relative;
+ transition: border-color var(--transition), transform var(--transition);
+}
+.fg-card:hover { border-color: var(--accent); transform: translateY(-2px); }
+.fg-num {
+ display: block;
+ font-family: var(--font-serif);
+ font-size: 1.6rem;
+ font-weight: 600;
+ font-style: italic;
+ color: var(--accent);
+ letter-spacing: 0;
+ margin-bottom: 0.6rem;
+ line-height: 1;
+}
+.fg-card h3 {
+ font-family: var(--font-serif);
+ font-size: 1.35rem;
+ font-weight: 600;
+ letter-spacing: -0.008em;
+ margin: 0 0 0.55rem;
+ line-height: 1.2;
+}
+.fg-card p {
+ margin: 0;
+ font-size: 0.94rem;
+ line-height: 1.55;
+ color: var(--text-dim);
+}
.search-bar {
display: flex;
@@ -480,7 +569,11 @@ a:hover { color: var(--accent-2); }
@media (max-width: 720px) {
.site-header { gap: 0.75rem; padding: 0.75rem 1rem; }
.site-nav { display: none; }
- .hero { padding: 3rem 1.25rem 2rem; }
+ .hero { padding: 3.5rem 1.25rem 2.25rem; }
+ .hero h1 br { display: none; }
+ .hero-stats { gap: 0.4rem 0.7rem; font-size: 0.75rem; letter-spacing: 0.1em; }
+ .field-guide { padding: 3rem 1.25rem; }
+ .field-guide h2 { margin-bottom: 1.25rem; }
.filters { gap: 0.75rem; }
.grid-controls { width: 100%; }
}
diff --git a/views/index.ejs b/views/index.ejs
index 12e0f60..2878bfe 100644
--- a/views/index.ejs
+++ b/views/index.ejs
@@ -1,8 +1,8 @@
<!doctype html>
<html lang="en">
<head>
- <title>DesignTradeLive — design industry trade shows & events calendar</title>
- <% const metaDescription = 'Live calendar of design industry trade shows: ICFF, NeoCon, KBIS, High Point Market, BDNY, Salone del Mobile, Maison&Objet, Heimtextil, Decorex, Cersaie, and more.'; %>
+ <title>DesignTradeLive — the <%= new Date().getFullYear() %> design trade-show calendar</title>
+ <% const metaDescription = 'The live ' + new Date().getFullYear() + ' design industry calendar: ICFF, NeoCon, KBIS, High Point Market, BDNY, Salone del Mobile, Maison&Objet, Heimtextil, Decorex, Cersaie. Filter by city, category, season.'; %>
<%- include('partials/head', { GA_ID, metaDescription }) %>
</head>
<body>
@@ -10,9 +10,9 @@
<section class="hero">
<div class="hero-inner">
- <p class="kicker">Trade shows · Markets · Design Weeks</p>
- <h1>The live calendar for the design industry.</h1>
- <p class="lede">Every major furniture, hospitality, kitchen-and-bath, textile, and tile show — in one place. Filter by city, category, or season. Built for designers, buyers, sales reps, and brand teams who actually go.</p>
+ <p class="kicker"><span class="kicker-rule"></span>Issue · The <%= new Date().getFullYear() %> Trade Calendar</p>
+ <h1>Where the design trade<br><span class="hero-accent">actually shows up.</span></h1>
+ <p class="lede">High Point to Salone, ICFF to Heimtextil — every market that moves furniture, textiles, tile, and hospitality design, with the dates, venues, and tier you need to plan the year.</p>
<form class="search-bar" method="get" action="/">
<label for="q" class="visually-hidden">Search events</label>
<input id="q" name="q" type="search" placeholder="Search city, show, country, or category" value="<%= q %>">
@@ -20,6 +20,37 @@
<% if (sort && sort !== 'date') { %><input type="hidden" name="sort" value="<%= sort %>"><% } %>
<button type="submit">Search</button>
</form>
+ <p class="hero-stats">
+ <span><strong><%= total %></strong> shows tracked</span>
+ <span class="hero-dot" aria-hidden="true">·</span>
+ <span><strong><%= categories.length %></strong> categories</span>
+ <span class="hero-dot" aria-hidden="true">·</span>
+ <span>Updated for <strong><%= new Date().getFullYear() %></strong></span>
+ </p>
+ </div>
+ </section>
+
+ <section class="field-guide" aria-labelledby="field-guide-title">
+ <div class="field-guide-inner">
+ <p class="kicker"><span class="kicker-rule"></span>Field Guide</p>
+ <h2 id="field-guide-title">How to work the year.</h2>
+ <div class="field-guide-grid">
+ <article class="fg-card">
+ <span class="fg-num">01</span>
+ <h3>Plan in pairs.</h3>
+ <p>Design weeks travel in clusters — NYCxDESIGN wraps ICFF and WantedDesign into one trip; Milan stretches Salone, Fuorisalone, and the Rho satellites across nine days. Budget the corridor, not the show.</p>
+ </article>
+ <article class="fg-card">
+ <span class="fg-num">02</span>
+ <h3>Pick your pass.</h3>
+ <p>Trade-only shows (NeoCon, BDNY, KBIS) gate the floor with a credential check; consumer-facing markets (Maison&Objet, Heimtextil) sell day passes. Apply early — same-week trade approvals are a coin flip.</p>
+ </article>
+ <article class="fg-card">
+ <span class="fg-num">03</span>
+ <h3>Work the rooms, not the booths.</h3>
+ <p>The deals happen at the showroom dinners, the rooftop after-parties, and the off-floor previews — not at the 10×10. Calendar the social side first, then fit the floor walk around it.</p>
+ </article>
+ </div>
</div>
</section>
← b1ed8f3 hamburger nav: apply canonical pattern from sister-site flee
·
back to Designtradelive
·
harden static layer: ignore + 404-guard editor/refactor snap e7feded →