Skip to content

Apply the copy and layout trims from the 1 Oct client review #7

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
laveshparyani merged 1 commit into from
Oct 1, 2026
Merged

Apply the copy and layout trims from the 1 Oct client review #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 29 additions & 15 deletions src/App.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -166,6 +166,16 @@ main, .footer { position: relative; z-index: 1; }
}
.nav__cta:hover { background: var(--olive-900); }

/* Icon-only link, so it needs its own 44px hit area rather than inheriting
the text link's. Survives below 620px where .nav__cta is hidden. */
.nav__social {
display: inline-flex; align-items: center; justify-content: center;
width: 40px; height: 40px; margin-right: -8px;
color: var(--text-strong); border-radius: var(--radius);
transition: color .3s var(--ease), background .3s var(--ease);
}
.nav__social:hover { color: var(--accent-deep); background: var(--bg-alt); }

.nav__toggle {
display: none; align-items: center; justify-content: center;
width: 44px; height: 44px; background: transparent;
Expand Down Expand Up @@ -226,10 +236,6 @@ main, .footer { position: relative; z-index: 1; }
}
.hero__inner { position: relative; z-index: 1; }

.hero__eyebrow {
font-size: var(--step--1); font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
color: var(--accent); margin-bottom: 24px;
}
.hero__title {
font-family: var(--font-serif);
/* Capped just below --step-4 so each authored line stays on one line inside
Expand All @@ -242,8 +248,6 @@ main, .footer { position: relative; z-index: 1; }
.line__inner { display: block; }
.hero__lede { margin-top: 26px; max-width: 42ch; font-size: var(--step-1); line-height: 1.5; color: var(--text-muted); }
.hero__foot { margin-top: 40px; display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.hero__phone { font-size: var(--step-0); font-weight: 500; color: var(--text-strong); }
.hero__phone:hover { color: var(--accent-deep); }

.hero__media {
position: relative; overflow: hidden;
Expand Down Expand Up @@ -376,9 +380,6 @@ main, .footer { position: relative; z-index: 1; }
.cta__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 30px; }
.cta__title { font-size: var(--step-3); max-width: 18ch; text-transform: lowercase; }
.cta__actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.cta__phone { font-size: var(--step-0); font-weight: 500; color: var(--text-muted); }
.cta__phone:hover { color: var(--accent-deep); }
.section--deep .cta__phone, .section--wine .cta__phone { color: var(--text-on-dark-muted); }

/* ─────────────── Services page ─────────────── */

Expand Down Expand Up @@ -528,11 +529,12 @@ main, .footer { position: relative; z-index: 1; }

.contact-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.contact-aside { display: flex; flex-direction: column; gap: 32px; }
.contact-phone { display: inline-flex; align-items: center; gap: 10px; margin-top: 12px; font-family: var(--font-serif); font-size: var(--step-2); color: var(--text-strong); }
.contact-phones { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 12px; }
/* Both numbers are published equally — the client was explicit about that —
so they share one size and stack rather than sharing a line, which is what
made them collide. */
.contact-phone { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-serif); font-size: var(--step-2); color: var(--text-strong); line-height: 1.25; }
.contact-phone:hover { color: var(--accent-deep); }
/* Secondary number: same affordance, visibly subordinate to the primary. */
.contact-phone--alt { margin-top: 6px; font-size: var(--step-1); color: var(--text-muted); }
.contact-phone--alt:hover { color: var(--accent-deep); }
.contact-person { margin-top: 14px; font-weight: 500; }
.contact-person span { font-weight: 400; color: var(--text-muted); }
.contact-note p { margin-top: 10px; color: var(--text-muted); }
Expand Down Expand Up @@ -652,7 +654,6 @@ main, .footer { position: relative; z-index: 1; }
}
.footer__brand img { height: 64px; width: auto; margin-bottom: 18px; }
.footer__wordmark { font-size: var(--step-2); color: var(--off-white); line-height: 1.06; }
.footer__tag { margin-top: 12px; font-size: var(--step--1); letter-spacing: .1em; text-transform: uppercase; color: var(--text-on-dark-muted); }

.footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 32px; }
.footer__col { display: flex; flex-direction: column; gap: 11px; align-items: flex-start; min-width: 0; }
Expand All @@ -663,7 +664,13 @@ main, .footer { position: relative; z-index: 1; }
.footer__col a { color: var(--text-on-dark-muted); transition: color .3s var(--ease); }
.footer__col a:hover { color: var(--off-white); }
.footer__note { font-size: var(--step--1); color: var(--text-on-dark-muted); max-width: 30ch; }
.footer__social { display: inline-flex; align-items: center; gap: 8px; }
.footer__social {
display: inline-flex; align-items: center; justify-content: center;
width: 44px; height: 44px; margin-left: -11px;
border-radius: var(--radius);
transition: color .3s var(--ease), background .3s var(--ease);
}
.footer__social:hover { background: rgba(247, 247, 247, 0.08); }
.footer__cta {
display: inline-flex; align-items: center; gap: 7px; margin-top: 6px;
color: var(--olive-100) !important; border-bottom: 1px solid var(--line-on-dark); padding-bottom: 4px;
Expand All @@ -673,4 +680,11 @@ main, .footer { position: relative; z-index: 1; }
padding-top: 24px; font-size: var(--step--1); color: var(--text-on-dark-muted);
}

/* auto-fit splits the row evenly, which left the Contact column ~204px — just
under what the email address needs, so it broke mid-word. Follow is now a
single icon plus a short link, so the width goes where it is actually used. */
@media (min-width: 821px) {
.footer__cols { grid-template-columns: minmax(110px, .8fr) minmax(240px, 1.4fr) minmax(110px, .8fr); }
}

@media (max-width: 820px) { .footer__top { grid-template-columns: 1fr; } }
14 changes: 11 additions & 3 deletions src/components/Footer.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ export default function Footer() {
<h2 className="serif footer__wordmark">
{BRAND.nameUpper}<br />{BRAND.nameSuffix}
</h2>
<p className="footer__tag">{BRAND.discipline}</p>
</div>

<div className="footer__cols">
Expand All @@ -35,8 +34,17 @@ export default function Footer() {

<div className="footer__col">
<h3 className="eyebrow">Follow</h3>
<a href={CONTACT.instagram} target="_blank" rel="noopener noreferrer" className="footer__social">
<Instagram size={15} aria-hidden="true" /> {CONTACT.instagramHandle}
{/* Icon only, per the client: the handle is already the brand
name, so spelling it out read as repetition. The label moves
to aria-label so the link is still announced. */}
<a
href={CONTACT.instagram}
target="_blank"
rel="noopener noreferrer"
className="footer__social"
aria-label={`${BRAND.nameFull} on Instagram — ${CONTACT.instagramHandle}`}
>
<Instagram size={26} aria-hidden="true" />
</a>
<Link href="/contact" className="footer__cta">
Start a project <ArrowUpRight size={15} aria-hidden="true" />
Expand Down
14 changes: 13 additions & 1 deletion src/components/Nav.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { useState, useEffect, useRef } from 'react'
import { Link, useLocation } from 'wouter'
import { Menu, X } from 'lucide-react'
import { Menu, X, Instagram } from 'lucide-react'
import { BRAND, VISIBLE_NAV, CONTACT, LOGO, asset } from '../data/site'

const isActive = (loc, path) => (path === '/' ? loc === '/' : loc.startsWith(path))
Expand Down Expand Up @@ -64,6 +64,18 @@ export default function Nav() {
</nav>

<div className="nav__actions">
{/* Instagram sits in the header because that is where the practice's
traffic actually comes from — the first enquiry arrived via the
profile. Kept at every width, unlike the Enquire button. */}
<a
href={CONTACT.instagram}
target="_blank"
rel="noopener noreferrer"
className="nav__social"
aria-label={`${BRAND.nameFull} on Instagram`}
>
<Instagram size={20} aria-hidden="true" />
</a>
<Link href="/contact" className="nav__cta">Enquire</Link>
<button
ref={toggleRef}
Expand Down
20 changes: 11 additions & 9 deletions src/pages/Contact.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,16 +111,18 @@ export default function Contact() {
<div className="contact-aside">
<Reveal>
<h2 className="eyebrow">Speak to us</h2>
<a href={CONTACT.phoneHref} className="contact-phone">
<Phone size={18} aria-hidden="true" />
{CONTACT.phone}
</a>
{CONTACT.phoneAlt && (
<a href={CONTACT.phoneAltHref} className="contact-phone contact-phone--alt">
<Phone size={15} aria-hidden="true" />
{CONTACT.phoneAlt}
<div className="contact-phones">
<a href={CONTACT.phoneHref} className="contact-phone">
<Phone size={18} aria-hidden="true" />
{CONTACT.phone}
</a>
)}
{CONTACT.phoneAlt && (
<a href={CONTACT.phoneAltHref} className="contact-phone">
<Phone size={18} aria-hidden="true" />
{CONTACT.phoneAlt}
</a>
)}
</div>
<p className="contact-person">
{CONTACT.principal}<br />
<span>{CONTACT.principalRole}</span>
Expand Down
9 changes: 2 additions & 7 deletions src/pages/Home.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { ArrowUpRight, ArrowDown } from 'lucide-react'
import { gsap, reducedMotion } from '../lib/motion'
import Reveal from '../components/Reveal'
import Picture from '../components/Picture'
import { BRAND, CONTACT, HERO_VIDEO, asset } from '../data/site'
import { BRAND, HERO_VIDEO, asset } from '../data/site'
import { STREAMS } from '../data/services'
import { PROCESS } from '../data/process'

Expand All @@ -24,8 +24,7 @@ function Hero() {
if (reducedMotion()) return
const ctx = gsap.context(() => {
const tl = gsap.timeline({ defaults: { ease: 'power3.out' } })
tl.fromTo('.hero__eyebrow', { autoAlpha: 0, y: 12 }, { autoAlpha: 1, y: 0, duration: 0.8 }, 0.1)
.fromTo('.hero__title .line__inner', { yPercent: 110 }, { yPercent: 0, duration: 1.1, stagger: 0.12 }, 0.2)
tl.fromTo('.hero__title .line__inner', { yPercent: 110 }, { yPercent: 0, duration: 1.1, stagger: 0.12 }, 0.2)
.fromTo('.hero__lede', { autoAlpha: 0, y: 16 }, { autoAlpha: 1, y: 0, duration: 0.9 }, 0.7)
.fromTo('.hero__foot', { autoAlpha: 0, y: 16 }, { autoAlpha: 1, y: 0, duration: 0.9 }, 0.85)
.fromTo('.hero__media', { autoAlpha: 0, clipPath: 'inset(0 0 100% 0)' },
Expand All @@ -49,8 +48,6 @@ function Hero() {
<section className="hero" ref={ref}>
<div className="container hero__grid">
<div className="hero__inner">
<p className="hero__eyebrow">{BRAND.discipline}</p>

<h1 className="serif hero__title">
<span className="line"><span className="line__inner">stories behind</span></span>
<span className="line"><span className="line__inner">every detail</span></span>
Expand All @@ -65,7 +62,6 @@ function Hero() {
<Link href="/contact" className="btn btn--dark">
Start a project <ArrowUpRight size={17} aria-hidden="true" />
</Link>
<a href={CONTACT.phoneHref} className="hero__phone">{CONTACT.phone}</a>
</div>
</div>

Expand Down Expand Up @@ -196,7 +192,6 @@ function CTA() {
<Link href="/contact" className="btn btn--dark">
Start a project <ArrowUpRight size={17} aria-hidden="true" />
</Link>
<a href={CONTACT.phoneHref} className="cta__phone">{CONTACT.phone}</a>
</Reveal>
</div>
</section>
Expand Down
Loading