#vp-root {
–paper: #f6f5f2;
–panel: #ffffff;
–ink: #15171b;
–ink-soft: #5a5e66;
–ink-faint: #92959c;
–line: #dcdad3;
–signal: #e1341e;
–signal-dim: #f7e3e0;
–radius: 2px;
font-family: ‘Inter’, -apple-system, BlinkMacSystemFont, sans-serif;
color: var(–ink);
background: var(–paper);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
#vp-root * { box-sizing: border-box; }
#vp-root a { color: inherit; text-decoration: none; }
#vp-root img { max-width: 100%; display: block; }
@import url(‘https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap’);
#vp-root .vp-display {
font-family: ‘Space Grotesk’, sans-serif;
}
#vp-root .vp-mono {
font-family: ‘IBM Plex Mono’, monospace;
letter-spacing: 0.02em;
}
#vp-root .vp-wrap {
max-width: 1120px;
margin: 0 auto;
padding: 0 32px;
}
/* ———- NAV ———- */
#vp-root .vp-nav {
position: sticky;
top: 0;
z-index: 40;
background: rgba(246,245,242,0.88);
backdrop-filter: blur(8px);
border-bottom: 1px solid var(–line);
}
#vp-root .vp-nav-inner {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 32px;
max-width: 1120px;
margin: 0 auto;
}
#vp-root .vp-wordmark {
display: flex;
flex-direction: column;
line-height: 1.1;
}
#vp-root .vp-wordmark .vp-name {
font-family: ‘Space Grotesk’, sans-serif;
font-weight: 700;
font-size: 19px;
letter-spacing: -0.01em;
}
#vp-root .vp-wordmark .vp-role {
font-family: ‘IBM Plex Mono’, monospace;
font-size: 11px;
color: var(–ink-faint);
margin-top: 2px;
text-transform: uppercase;
letter-spacing: 0.08em;
}
#vp-root .vp-navlinks {
display: flex;
gap: 28px;
align-items: center;
}
#vp-root .vp-navlinks a {
font-size: 14px;
color: var(–ink-soft);
transition: color 0.15s ease;
}
#vp-root .vp-navlinks a:hover { color: var(–ink); }
#vp-root .vp-cta-btn {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(–signal);
color: #fff;
font-size: 14px;
font-weight: 500;
padding: 10px 18px;
border-radius: var(–radius);
border: none;
cursor: pointer;
transition: transform 0.15s ease, background 0.15s ease;
}
#vp-root .vp-cta-btn:hover { background: #c4290f; }
#vp-root .vp-cta-btn:focus-visible,
#vp-root a:focus-visible,
#vp-root button:focus-visible,
#vp-root input:focus-visible,
#vp-root textarea:focus-visible {
outline: 2px solid var(–signal);
outline-offset: 2px;
}
#vp-root .vp-navlinks-mobile-hide { display: flex; }
@media (max-width: 720px) {
#vp-root .vp-navlinks-mobile-hide { display: none; }
}
/* ———- HERO ———- */
#vp-root .vp-hero {
padding: 88px 0 64px;
border-bottom: 1px solid var(–line);
}
#vp-root .vp-hero-grid {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 56px;
align-items: end;
}
#vp-root .vp-eyebrow {
font-size: 12px;
color: var(–signal);
text-transform: uppercase;
letter-spacing: 0.12em;
margin-bottom: 18px;
display: flex;
align-items: center;
gap: 8px;
}
#vp-root .vp-eyebrow .vp-dot {
width: 7px; height: 7px; border-radius: 50%;
background: var(–signal);
animation: vp-blink 1.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
#vp-root .vp-eyebrow .vp-dot { animation: none; }
}
@keyframes vp-blink { 0%,100% { opacity:1; } 50% { opacity:0.25; } }
#vp-root .vp-h1 {
font-family: ‘Space Grotesk’, sans-serif;
font-weight: 600;
font-size: clamp(34px, 4.6vw, 58px);
line-height: 1.04;
letter-spacing: -0.02em;
margin: 0 0 22px;
}
#vp-root .vp-hero-sub {
font-size: 17px;
color: var(–ink-soft);
max-width: 46ch;
margin-bottom: 28px;
}
#vp-root .vp-hero-actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
#vp-root .vp-link-ghost {
font-size: 14px;
font-weight: 500;
padding: 10px 4px;
border-bottom: 1px solid var(–ink);
}
/* video-frame mock */
#vp-root .vp-frame {
background: #101114;
border-radius: var(–radius);
aspect-ratio: 16/10;
position: relative;
overflow: hidden;
box-shadow: 0 24px 48px -24px rgba(21,23,27,0.35);
}
#vp-root .vp-frame::before {
content: ”;
position: absolute; inset: 0;
background:
radial-gradient(circle at 30% 20%, rgba(225,52,30,0.18), transparent 55%),
linear-gradient(135deg, #1c1e24 0%, #0c0d10 100%);
}
#vp-root .vp-frame-play {
position: absolute; top: 50%; left: 50%;
transform: translate(-50%,-50%);
width: 56px; height: 56px;
border-radius: 50%;
background: rgba(255,255,255,0.94);
display: flex; align-items: center; justify-content: center;
cursor: pointer;
transition: transform 0.15s ease;
}
#vp-root .vp-frame-play:hover { transform: translate(-50%,-50%) scale(1.06); }
#vp-root .vp-frame-play svg { margin-left: 3px; }
#vp-root .vp-frame-bar {
position: absolute; left: 16px; right: 16px; bottom: 14px;
display: flex; align-items: center; gap: 10px;
}
#vp-root .vp-frame-track {
flex: 1; height: 3px; background: rgba(255,255,255,0.22); border-radius: 2px; overflow: hidden;
}
#vp-root .vp-frame-track-fill {
height: 100%; width: 38%; background: var(–signal);
}
#vp-root .vp-frame-tc {
font-family: ‘IBM Plex Mono’, monospace;
font-size: 11px;
color: rgba(255,255,255,0.75);
}
#vp-root .vp-frame-label {
position: absolute; top: 14px; left: 16px;
font-family: ‘IBM Plex Mono’, monospace;
font-size: 10px;
color: rgba(255,255,255,0.6);
text-transform: uppercase;
letter-spacing: 0.1em;
}
@media (max-width: 860px) {
#vp-root .vp-hero-grid { grid-template-columns: 1fr; }
}
/* ———- ABOUT ———- */
#vp-root .vp-about-grid {
display: grid; grid-template-columns: 0.75fr 1.25fr; gap: 48px; align-items: center;
}
#vp-root .vp-about-photo {
aspect-ratio: 4/5;
border-radius: var(–radius);
overflow: hidden;
background: linear-gradient(150deg,#20242b,#0c0d10 75%);
position: relative;
}
#vp-root .vp-about-photo img {
width: 100%; height: 100%; object-fit: cover; display: block;
}
#vp-root .vp-about-photo::after {
content: ”;
position: absolute; inset: 0;
background-image: repeating-linear-gradient(0deg, rgba(255,255,255,0.035) 0px, rgba(255,255,255,0.035) 1px, transparent 1px, transparent 3px);
pointer-events: none;
}
#vp-root .vp-about-photo-label {
position: absolute; bottom: 10px; left: 12px;
font-family: ‘IBM Plex Mono’, monospace;
font-size: 10px; color: rgba(255,255,255,0.6);
text-transform: uppercase; letter-spacing: 0.08em;
z-index: 1;
}
#vp-root .vp-about-blurb {
font-size: 16px; color: var(–ink-soft); max-width: 52ch; margin-bottom: 20px;
}
#vp-root .vp-about-blurb strong { color: var(–ink); font-weight: 600; }
@media (max-width: 760px) {
#vp-root .vp-about-grid { grid-template-columns: 1fr; }
#vp-root .vp-about-photo { max-width: 280px; }
}
/* ———- SECTION HEADERS ———- */
#vp-root section { padding: 72px 0; border-bottom: 1px solid var(–line); }
#vp-root .vp-sec-head {
display: flex; justify-content: space-between; align-items: flex-end;
margin-bottom: 40px; gap: 24px; flex-wrap: wrap;
}
#vp-root .vp-sec-eyebrow {
font-family: ‘IBM Plex Mono’, monospace;
font-size: 11px; color: var(–ink-faint);
text-transform: uppercase; letter-spacing: 0.1em;
margin-bottom: 10px;
}
#vp-root .vp-sec-title {
font-family: ‘Space Grotesk’, sans-serif;
font-weight: 600; font-size: 30px; letter-spacing: -0.01em;
}
#vp-root .vp-sec-note { font-size: 14px; color: var(–ink-soft); max-width: 40ch; }
/* ———- WORK GRID ———- */
#vp-root .vp-work-grid {
display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px;
}
#vp-root .vp-card {
background: var(–panel);
border: 1px solid var(–line);
border-radius: var(–radius);
overflow: hidden;
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
#vp-root .vp-card:hover {
transform: translateY(-3px);
box-shadow: 0 20px 34px -22px rgba(21,23,27,0.28);
}
#vp-root .vp-thumb {
aspect-ratio: 16/9;
position: relative;
overflow: hidden;
}
#vp-root .vp-thumb-a { background: linear-gradient(135deg,#20242b,#0c0d10 70%); }
#vp-root .vp-thumb-b { background: linear-gradient(135deg,#26201f,#0c0d10 70%); }
#vp-root .vp-thumb-c { background: linear-gradient(135deg,#1a2420,#0c0d10 70%); }
#vp-root .vp-thumb-d { background: linear-gradient(135deg,#241a24,#0c0d10 70%); }
#vp-root .vp-thumb::after {
content: ”;
position: absolute; inset: 0;
background-image: repeating-linear-gradient(0deg, rgba(255,255,255,0.035) 0px, rgba(255,255,255,0.035) 1px, transparent 1px, transparent 3px);
}
#vp-root .vp-thumb-tc {
position: absolute; bottom: 10px; left: 12px;
font-family: ‘IBM Plex Mono’, monospace;
font-size: 11px; color: rgba(255,255,255,0.7);
}
#vp-root .vp-thumb-dur {
position: absolute; top: 10px; right: 12px;
font-family: ‘IBM Plex Mono’, monospace;
font-size: 11px; color: rgba(255,255,255,0.7);
background: rgba(0,0,0,0.35); padding: 2px 7px; border-radius: 2px;
}
#vp-root .vp-card-body { padding: 18px 20px 20px; }
#vp-root .vp-card-tag {
font-family: ‘IBM Plex Mono’, monospace;
font-size: 10px; color: var(–signal);
text-transform: uppercase; letter-spacing: 0.08em;
margin-bottom: 8px; display: block;
}
#vp-root .vp-card-title {
font-family: ‘Space Grotesk’, sans-serif;
font-weight: 600; font-size: 18px; margin-bottom: 4px;
}
#vp-root .vp-card-desc { font-size: 13.5px; color: var(–ink-soft); }
@media (max-width: 760px) {
#vp-root .vp-work-grid { grid-template-columns: 1fr; }
}
/* ———- SERVICES ———- */
#vp-root .vp-services-grid {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
background: var(–line); border: 1px solid var(–line);
}
#vp-root .vp-service {
background: var(–panel); padding: 28px 22px;
}
#vp-root .vp-service-num {
font-family: ‘IBM Plex Mono’, monospace;
font-size: 11px; color: var(–ink-faint); margin-bottom: 20px;
}
#vp-root .vp-service-title {
font-family: ‘Space Grotesk’, sans-serif;
font-weight: 600; font-size: 17px; margin-bottom: 10px;
}
#vp-root .vp-service-desc {
font-size: 13.5px; color: var(–ink-soft); margin-bottom: 18px; min-height: 60px;
}
#vp-root .vp-service-price {
font-family: ‘IBM Plex Mono’, monospace;
font-size: 13px; color: var(–ink);
border-top: 1px solid var(–line); padding-top: 14px;
}
@media (max-width: 900px) {
#vp-root .vp-services-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
#vp-root .vp-services-grid { grid-template-columns: 1fr; }
}
/* ———- PROCESS ———- */
#vp-root .vp-process-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px;
}
#vp-root .vp-process-step .vp-service-num { color: var(–signal); }
#vp-root .vp-process-step h3 {
font-family: ‘Space Grotesk’, sans-serif;
font-weight: 600; font-size: 18px; margin: 12px 0 8px;
}
#vp-root .vp-process-step p { font-size: 14px; color: var(–ink-soft); }
@media (max-width: 760px) {
#vp-root .vp-process-grid { grid-template-columns: 1fr; gap: 28px; }
}
/* ———- TESTIMONIAL ———- */
#vp-root .vp-testimonial {
display: flex; gap: 32px; align-items: flex-start; flex-wrap: wrap;
}
#vp-root .vp-quote {
font-family: ‘Space Grotesk’, sans-serif;
font-size: 24px; font-weight: 500; line-height: 1.35; letter-spacing: -0.01em;
max-width: 62ch; flex: 1;
}
#vp-root .vp-quote-attr {
font-family: ‘IBM Plex Mono’, monospace;
font-size: 12px; color: var(–ink-faint); margin-top: 18px; display: block;
}
/* ———- CONTACT ———- */
#vp-root .vp-contact {
border-bottom: none;
background: var(–ink);
color: #f2f1ee;
padding: 80px 0;
}
#vp-root .vp-contact .vp-sec-eyebrow { color: rgba(242,241,238,0.5); }
#vp-root .vp-contact-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 56px;
}
#vp-root .vp-contact-title {
font-family: ‘Space Grotesk’, sans-serif;
font-weight: 600; font-size: 34px; letter-spacing: -0.01em; margin-bottom: 16px;
}
#vp-root .vp-contact-sub { font-size: 15px; color: rgba(242,241,238,0.65); margin-bottom: 26px; max-width: 40ch; }
#vp-root .vp-contact-email {
font-family: ‘IBM Plex Mono’, monospace;
font-size: 16px; border-bottom: 1px solid rgba(242,241,238,0.4);
padding-bottom: 4px; display: inline-block;
}
#vp-root .vp-field { margin-bottom: 16px; }
#vp-root .vp-field label {
display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em;
color: rgba(242,241,238,0.5); margin-bottom: 6px;
}
#vp-root .vp-field input, #vp-root .vp-field textarea {
width: 100%; background: rgba(242,241,238,0.06);
border: 1px solid rgba(242,241,238,0.22);
border-radius: var(–radius);
padding: 11px 12px; font-size: 14px; color: #f2f1ee;
font-family: ‘Inter’, sans-serif;
}
#vp-root .vp-field input::placeholder, #vp-root .vp-field textarea::placeholder { color: rgba(242,241,238,0.35); }
#vp-root .vp-field textarea { resize: vertical; min-height: 90px; }
#vp-root .vp-form-note { font-size: 12px; color: rgba(242,241,238,0.45); margin-top: 6px; }
/* ———- FOOTER ———- */
#vp-root footer {
padding: 28px 0; display: flex; justify-content: space-between; align-items: center;
font-size: 13px; color: var(–ink-faint); flex-wrap: wrap; gap: 12px;
}
#vp-root footer .vp-social { display: flex; gap: 18px; }
#vp-root footer a:hover { color: var(–ink); }
@media (max-width: 760px) {
#vp-root .vp-contact-grid { grid-template-columns: 1fr; }
#vp-root .vp-wrap { padding: 0 20px; }
#vp-root .vp-nav-inner { padding: 16px 20px; }
#vp-root section { padding: 52px 0; }
}
Stories that
REECE GARRETT — on set
(function() {
var root = document.getElementById(‘vp-root’);
if (!root) return;
// Footer year
var yearEl = root.querySelector(‘#vp-year’);
if (yearEl) yearEl.textContent = new Date().getFullYear();
// Hero timecode ticker — cosmetic, counts frames since page load
var tcEl = root.querySelector(‘#vp-tc’);
var reduceMotion = window.matchMedia && window.matchMedia(‘(prefers-reduced-motion: reduce)’).matches;
if (tcEl && !reduceMotion) {
var start = Date.now();
setInterval(function () {
var elapsed = Date.now() – start;
var totalFrames = Math.floor(elapsed / (1000 / 24)); // 24fps
var frames = totalFrames % 24;
var totalSeconds = Math.floor(totalFrames / 24);
var seconds = totalSeconds % 60;
var minutes = Math.floor(totalSeconds / 60) % 60;
var hours = Math.floor(totalSeconds / 3600);
function pad(n) { return String(n).padStart(2, ‘0’); }
tcEl.textContent = pad(hours) + ‘:’ + pad(minutes) + ‘:’ + pad(seconds) + ‘:’ + pad(frames);
}, 1000 / 24);
}
// Contact form fallback handler (only used if no plugin/Formspree action is set)
window.vpHandleSubmit = function (e) {
var form = e.target;
if (form.getAttribute(‘action’) === ‘#’) {
e.preventDefault();
var name = form.querySelector(‘#vp-name’).value;
var email = form.querySelector(‘#vp-email’).value;
var message = form.querySelector(‘#vp-message’).value;
var subject = encodeURIComponent(‘Project inquiry from ‘ + name);
var body = encodeURIComponent(message + ‘\n\n— ‘ + name + ‘ (‘ + email + ‘)’);
window.location.href = ‘mailto:[EMAIL]?subject=’ + subject + ‘&body=’ + body;
return false;
}
return true; // let it POST normally once action is set to a real endpoint
};
})();
REECE GARRETT
Video / Edit / Post
Available for new projects — [CITY]
Stories that
strengthen
community.
Documentary-style video production for nonprofits, communities, and mission-driven organizations.
Showreel — 2026
About
The person behind the camera
Reece Garrett is a videographer and editor based in [CITY], working across brand film, documentary, and social content. A short blurb here about your background, what you shoot, and the kind of clients you love working with — two or three sentences is plenty.
More about me →Selected work
Recent projects
Replace these four cards with your own thumbnails and links to Vimeo/YouTube or your reel host.
00:00:12:04
2:14
Brand Film
Project Title One
Short description of the shoot, the client, and what you delivered.
00:01:03:17
4:02
Documentary
Project Title Two
Short description of the shoot, the client, and what you delivered.
00:00:41:09
1:38
Social / Ad
Project Title Three
Short description of the shoot, the client, and what you delivered.
00:02:18:22
5:47
Event Coverage
Project Title Four
Short description of the shoot, the client, and what you delivered.
Services
What I offer
Adjust names, descriptions, and pricing to match what you actually offer.
01
Video Production
On-location filming — brand films, interviews, events, and social content, single or multi-camera.
From $[XXX] / day
02
Editing & Post
Story-first edits from raw footage — pacing, sound design, and structure that holds attention.
From $[XXX] / project
03
Motion Graphics
Titles, lower thirds, and animated inserts that fit your brand without slowing the edit down.
From $[XXX] / project
04
Color Grading
Consistent, intentional color across every deliverable — from quick grades to full DaVinci passes.
From $[XXX] / project
How it works
Three steps, start to delivery
01 — Shoot
Plan & film
We lock the brief, shot list, and schedule, then film on location or in studio.
02 — Edit
Cut & refine
First cut goes out for review, then we refine pacing, sound, and graphics together.
03 — Deliver
Export & ship
Final files delivered in every format and aspect ratio you need, ready to publish.
“Turned three days of raw footage into a two-minute film that actually got watched to the end. Fast, clean, no back-and-forth.” — Client Name, Company
Get in touch
Have a project in mind?
Tell me a bit about it and I’ll reply within a day or two with next steps and availability.
[EMAIL]
<!–
NOTE ON THIS FORM:
As plain HTML, this form does not send email by itself —
WordPress needs a form plugin to process submissions.
Easiest options:
1) Install "Contact Form 7" or "WPForms", build the form there,
and swap this block for the shortcode it gives you.
2) Keep this exact form and point the “action” at a service like
Formspree.io (free tier) — just set action=”https://formspree.io/f/yourID”
and method=”POST” below.
Until then, the “mailto” link above will work with no setup.
–>
Name
Email
Project details
This form needs a plugin (see note in the code) to actually send — until then, use the email link.