<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Jost:wght@300;400;500;600&display=swap" rel="stylesheet">
<style>
/* Scoped to .hg-trade to avoid conflicts with Shopify theme */
.hg-trade {
--hg-cream: #f5f0e8;
--hg-parchment: #ede5d4;
--hg-sage: #6b7c5e;
--hg-deep-sage: #3d4f35;
--hg-moss: #2c3a24;
--hg-gold: #b8973a;
--hg-warm-gold: #d4a843;
--hg-stone: #8a7d6a;
--hg-charcoal: #2a2520;
--hg-mist: #c8d4be;
font-family: 'Jost', sans-serif;
color: var(--hg-charcoal);
overflow-x: hidden;
/* Full-width breakout from Shopify's narrow content container */
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}
.hg-trade *, .hg-trade *::before, .hg-trade *::after {
box-sizing: border-box;
}
/* HERO */
.hg-hero {
position: relative;
min-height: 90vh;
display: grid;
grid-template-columns: 1fr 1fr;
overflow: hidden;
}
.hg-hero-left {
background: var(--hg-moss);
padding: 6rem 5rem 5rem;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
overflow: hidden;
}
.hg-hero-left::before {
content: '';
position: absolute;
top: -60px; right: -60px;
width: 300px; height: 300px;
border-radius: 50%;
background: rgba(184,151,58,0.12);
pointer-events: none;
}
.hg-hero-left::after {
content: '';
position: absolute;
bottom: 40px; left: -80px;
width: 250px; height: 250px;
border-radius: 50%;
background: rgba(107,124,94,0.2);
pointer-events: none;
}
.hg-eyebrow {
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--hg-warm-gold);
margin-bottom: 1.5rem;
display: flex;
align-items: center;
gap: 0.8rem;
position: relative; z-index: 1;
}
.hg-eyebrow::before {
content: '';
width: 2rem;
height: 1px;
background: var(--hg-warm-gold);
flex-shrink: 0;
}
.hg-hero-title {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(3rem, 4.5vw, 5rem);
font-weight: 300;
line-height: 1.05;
color: var(--hg-cream);
margin-bottom: 2rem;
position: relative; z-index: 1;
}
.hg-hero-title em {
font-style: italic;
color: var(--hg-mist);
}
.hg-hero-desc {
font-size: 1rem;
font-weight: 300;
line-height: 1.8;
color: rgba(245,240,232,0.7);
max-width: 380px;
margin-bottom: 3rem;
position: relative; z-index: 1;
}
.hg-hero-actions {
display: flex;
gap: 1rem;
flex-wrap: wrap;
position: relative; z-index: 1;
}
.hg-btn-primary {
display: inline-flex;
align-items: center;
gap: 0.6rem;
background: var(--hg-warm-gold);
color: var(--hg-moss) !important;
padding: 0.9rem 2rem;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.15em;
text-transform: uppercase;
text-decoration: none !important;
border: none;
cursor: pointer;
transition: all 0.25s;
border-radius: 2px;
font-family: 'Jost', sans-serif;
}
.hg-btn-primary:hover {
background: var(--hg-gold);
transform: translateY(-1px);
box-shadow: 0 8px 24px rgba(0,0,0,0.2);
color: var(--hg-moss) !important;
}
.hg-btn-ghost {
display: inline-flex;
align-items: center;
gap: 0.6rem;
background: transparent;
color: var(--hg-cream) !important;
padding: 0.9rem 2rem;
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.15em;
text-transform: uppercase;
text-decoration: none !important;
border: 1px solid rgba(245,240,232,0.35);
cursor: pointer;
transition: all 0.25s;
border-radius: 2px;
font-family: 'Jost', sans-serif;
}
.hg-btn-ghost:hover {
border-color: var(--hg-cream);
background: rgba(245,240,232,0.08);
}
.hg-hero-right {
position: relative;
overflow: hidden;
}
.hg-hero-right img {
width: 100%;
height: 100%;
object-fit: cover;
filter: saturate(0.85) brightness(0.88);
transition: transform 6s ease;
display: block;
}
.hg-hero:hover .hg-hero-right img {
transform: scale(1.03);
}
.hg-hero-right-overlay {
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(44,58,36,0.4) 0%, transparent 60%);
}
.hg-hero-badge {
position: absolute;
bottom: 2.5rem;
right: 2.5rem;
background: var(--hg-cream);
padding: 1.2rem 1.5rem;
text-align: center;
border-radius: 2px;
box-shadow: 0 12px 40px rgba(0,0,0,0.15);
}
.hg-hero-badge-num {
font-family: 'Cormorant Garamond', serif;
font-size: 2.2rem;
font-weight: 600;
color: var(--hg-deep-sage);
line-height: 1;
}
.hg-hero-badge-label {
font-size: 0.65rem;
font-weight: 600;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--hg-stone);
margin-top: 0.3rem;
}
/* MARQUEE */
.hg-marquee {
background: var(--hg-deep-sage);
padding: 0.85rem 0;
overflow: hidden;
white-space: nowrap;
}
.hg-marquee-inner {
display: inline-flex;
animation: hg-marquee 30s linear infinite;
}
.hg-marquee-item {
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--hg-mist);
padding: 0 2.5rem;
display: inline-flex;
align-items: center;
gap: 2.5rem;
}
.hg-marquee-item::after {
content: '✦';
color: var(--hg-warm-gold);
font-size: 0.5rem;
}
@keyframes hg-marquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* SHARED LAYOUT */
.hg-section {
padding: 6rem 0;
}
.hg-section--parchment { background: var(--hg-parchment); }
.hg-section--cream { background: var(--hg-cream); }
.hg-section--moss { background: var(--hg-moss); }
.hg-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 3rem;
}
.hg-section-label {
font-size: 0.65rem;
font-weight: 600;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--hg-sage);
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 0.8rem;
}
.hg-section-label::before {
content: '';
width: 2rem;
height: 1px;
background: var(--hg-sage);
flex-shrink: 0;
}
.hg-section-label--light {
color: var(--hg-mist);
}
.hg-section-label--light::before {
background: var(--hg-mist);
}
.hg-section-title {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(2rem, 3vw, 3rem);
font-weight: 400;
line-height: 1.15;
color: var(--hg-charcoal);
margin-bottom: 1.5rem;
}
.hg-section-title em {
font-style: italic;
color: var(--hg-sage);
}
.hg-section-title--light {
color: var(--hg-cream);
}
.hg-section-title--light em {
color: var(--hg-warm-gold);
}
/* ABOUT */
.hg-about-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 7rem;
align-items: center;
}
.hg-about-text p {
font-size: 1rem;
font-weight: 300;
line-height: 1.9;
color: var(--hg-stone);
margin-bottom: 1.2rem;
}
.hg-about-text strong {
color: var(--hg-deep-sage);
font-weight: 500;
}
.hg-award-quote {
margin-top: 2.5rem;
padding: 1.2rem 1.5rem;
border-left: 3px solid var(--hg-warm-gold);
background: rgba(184,151,58,0.06);
font-size: 0.9rem;
font-weight: 400;
color: var(--hg-deep-sage);
font-style: italic;
font-family: 'Cormorant Garamond', serif;
line-height: 1.6;
}
.hg-about-img-block {
position: relative;
}
.hg-about-img-block img {
width: 100%;
height: 460px;
object-fit: cover;
border-radius: 2px;
filter: saturate(0.9);
display: block;
}
.hg-about-img-card {
position: absolute;
bottom: -2rem;
left: -2rem;
background: var(--hg-moss);
color: var(--hg-cream);
padding: 2rem 2.5rem;
max-width: 240px;
border-radius: 2px;
}
.hg-about-img-card-num {
font-family: 'Cormorant Garamond', serif;
font-size: 2.2rem;
font-weight: 300;
line-height: 1;
margin-bottom: 0.3rem;
}
.hg-about-img-card-label {
font-size: 0.65rem;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--hg-mist);
}
/* SERVICES */
.hg-services-header {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: end;
margin-bottom: 4rem;
}
.hg-services-header p {
font-size: 1rem;
font-weight: 300;
line-height: 1.9;
color: var(--hg-stone);
}
.hg-services-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2px;
}
.hg-service-card {
background: var(--hg-parchment);
padding: 3rem 2.5rem;
transition: all 0.3s;
position: relative;
overflow: hidden;
}
.hg-service-card::before {
content: '';
position: absolute;
inset: 0;
background: var(--hg-deep-sage);
transform: scaleY(0);
transform-origin: bottom;
transition: transform 0.4s cubic-bezier(0.4,0,0.2,1);
z-index: 0;
}
.hg-service-card:hover::before { transform: scaleY(1); }
.hg-service-card > * { position: relative; z-index: 1; }
.hg-service-num {
font-family: 'Cormorant Garamond', serif;
font-size: 3rem;
font-weight: 300;
color: rgba(107,124,94,0.3);
line-height: 1;
margin-bottom: 1.5rem;
transition: color 0.3s;
}
.hg-service-card:hover .hg-service-num { color: rgba(245,240,232,0.2); }
.hg-service-title {
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--hg-charcoal);
margin-bottom: 1rem;
transition: color 0.3s;
}
.hg-service-card:hover .hg-service-title { color: var(--hg-cream); }
.hg-service-desc {
font-size: 0.9rem;
font-weight: 300;
line-height: 1.8;
color: var(--hg-stone);
transition: color 0.3s;
}
.hg-service-card:hover .hg-service-desc { color: rgba(245,240,232,0.75); }
/* CLIENTS */
.hg-clients-header {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: end;
margin-bottom: 4rem;
}
.hg-clients-header p {
font-size: 1rem;
font-weight: 300;
line-height: 1.9;
color: rgba(245,240,232,0.6);
}
.hg-clients-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: rgba(245,240,232,0.08);
}
.hg-client-item {
background: rgba(44,58,36,0.95);
padding: 2rem 2.5rem;
transition: background 0.25s;
}
.hg-client-item:hover { background: rgba(107,124,94,0.3); }
.hg-client-name {
font-family: 'Cormorant Garamond', serif;
font-size: 1.1rem;
font-weight: 400;
color: var(--hg-cream);
margin-bottom: 0.3rem;
line-height: 1.3;
}
.hg-client-detail {
font-size: 0.72rem;
font-weight: 400;
color: rgba(200,212,190,0.55);
}
.hg-client-tag {
display: inline-block;
margin-top: 0.6rem;
font-size: 0.6rem;
font-weight: 600;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--hg-warm-gold);
border: 1px solid rgba(212,168,67,0.3);
padding: 0.15rem 0.5rem;
border-radius: 2px;
}
/* PROMISE */
.hg-promise-header {
text-align: center;
max-width: 600px;
margin: 0 auto 4rem;
}
.hg-promise-header .hg-section-label {
justify-content: center;
}
.hg-promise-header .hg-section-label::before {
display: none;
}
.hg-promise-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
border: 1px solid rgba(107,124,94,0.15);
}
.hg-promise-item {
padding: 3rem 2rem;
text-align: center;
border-right: 1px solid rgba(107,124,94,0.15);
transition: background 0.25s;
}
.hg-promise-item:last-child { border-right: none; }
.hg-promise-item:hover { background: var(--hg-parchment); }
.hg-promise-circle {
width: 3rem;
height: 3rem;
border-radius: 50%;
border: 1px solid var(--hg-sage);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
font-family: 'Cormorant Garamond', serif;
font-size: 1.2rem;
color: var(--hg-sage);
}
.hg-promise-title {
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--hg-charcoal);
margin-bottom: 0.8rem;
line-height: 1.4;
}
.hg-promise-desc {
font-size: 0.8rem;
font-weight: 300;
line-height: 1.7;
color: var(--hg-stone);
}
/* CONTACT */
.hg-contact-grid {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 6rem;
align-items: start;
}
.hg-contact-intro {
font-size: 1rem;
font-weight: 300;
line-height: 1.9;
color: var(--hg-stone);
margin-bottom: 2.5rem;
max-width: 480px;
}
.hg-contact-methods {
display: flex;
flex-direction: column;
gap: 1rem;
margin-bottom: 2.5rem;
}
.hg-contact-method {
display: flex;
align-items: center;
gap: 1.2rem;
padding: 1.2rem 1.5rem;
background: var(--hg-cream);
border-radius: 2px;
text-decoration: none !important;
color: var(--hg-charcoal) !important;
transition: all 0.25s;
border: 1px solid transparent;
}
.hg-contact-method:hover {
border-color: var(--hg-sage);
transform: translateX(4px);
}
.hg-contact-icon {
width: 2.5rem;
height: 2.5rem;
background: var(--hg-deep-sage);
border-radius: 2px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.hg-contact-icon svg {
width: 1rem;
height: 1rem;
stroke: var(--hg-cream);
fill: none;
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
}
.hg-contact-label {
font-size: 0.65rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--hg-stone);
margin-bottom: 0.2rem;
}
.hg-contact-value {
font-size: 1rem;
font-weight: 400;
color: var(--hg-charcoal);
}
.hg-payment-card {
background: var(--hg-cream);
padding: 3rem;
border-radius: 2px;
border: 1px solid rgba(107,124,94,0.15);
}
.hg-payment-card h3 {
font-family: 'Cormorant Garamond', serif;
font-size: 1.6rem;
font-weight: 400;
color: var(--hg-charcoal);
margin-bottom: 0.5rem;
}
.hg-payment-card > p {
font-size: 0.85rem;
font-weight: 300;
color: var(--hg-stone);
margin-bottom: 1.5rem;
}
.hg-payment-block {
background: var(--hg-moss);
color: var(--hg-cream);
padding: 2rem;
border-radius: 2px;
}
.hg-payment-block h4 {
font-size: 0.65rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--hg-warm-gold);
margin-bottom: 1.2rem;
}
.hg-payment-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.6rem 0;
border-bottom: 1px solid rgba(245,240,232,0.1);
}
.hg-payment-row:last-child { border-bottom: none; }
.hg-payment-row-label {
font-size: 0.65rem;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(245,240,232,0.5);
}
.hg-payment-row-value {
font-weight: 400;
color: var(--hg-cream);
font-family: 'Cormorant Garamond', serif;
font-size: 1rem;
}
.hg-address-note {
margin-top: 1.5rem;
padding: 1.2rem 1.5rem;
border-left: 3px solid var(--hg-mist);
font-size: 0.85rem;
font-weight: 300;
color: var(--hg-stone);
line-height: 1.7;
}
.hg-address-note strong {
color: var(--hg-charcoal);
font-weight: 500;
}
/* REVEAL ANIMATIONS */
.hg-reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.7s ease, transform 0.7s ease;
}
.hg-reveal.hg-visible {
opacity: 1;
transform: translateY(0);
}
.hg-delay-1 { transition-delay: 0.1s; }
.hg-delay-2 { transition-delay: 0.2s; }
.hg-delay-3 { transition-delay: 0.3s; }
.hg-delay-4 { transition-delay: 0.4s; }
/* RESPONSIVE */
@media (max-width: 900px) {
.hg-hero { grid-template-columns: 1fr; }
.hg-hero-right { height: 40vh; }
.hg-hero-left { padding: 4rem 1.5rem 3rem; }
.hg-about-grid,
.hg-services-header,
.hg-clients-header,
.hg-contact-grid { grid-template-columns: 1fr; gap: 2.5rem; }
.hg-services-grid,
.hg-clients-grid { grid-template-columns: 1fr; }
.hg-promise-grid { grid-template-columns: 1fr 1fr; }
.hg-container { padding: 0 1.25rem; }
.hg-section { padding: 4rem 0; }
.hg-about-img-card { position: static; margin-top: 1.5rem; max-width: 100%; }
.hg-about-img-block img { height: 280px; }
}
@media (max-width: 540px) {
.hg-promise-grid { grid-template-columns: 1fr; }
.hg-promise-item { border-right: none; border-bottom: 1px solid rgba(107,124,94,0.15); }
.hg-hero-actions { flex-direction: column; }
}
</style>
<!-- ==============================
PAGE CONTENT
============================== -->
<div class="hg-trade">
<!-- HERO -->
<div class="hg-hero">
<div class="hg-hero-left">
<p class="hg-eyebrow">Trade Sales Department</p>
<h1 class="hg-hero-title">
Supplying Britain's Finest<br>
<em>Gardens & Estates</em>
</h1>
<p class="hg-hero-desc">
Specialist garden products for hotels, National Trust properties, wedding venues, care homes, universities, and film productions. Personal service, trade discounts, and bespoke sourcing.
</p>
<div class="hg-hero-actions">
<a href="tel:07770989897" class="hg-btn-primary">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 13a19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 3.6 2.18h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l.81-.81a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 17z"/></svg>
07770 989897
</a>
<a href="mailto:trade@heritagegardens.co.uk" class="hg-btn-ghost">Email Trade Team</a>
</div>
</div>
<div class="hg-hero-right">
<img src="https://cdn.shopify.com/s/files/1/0045/0462/files/SAM_0492.jpg?v=1613528436" alt="Heritage Gardens trade supply - garden furniture and products">
<div class="hg-hero-right-overlay"></div>
<div class="hg-hero-badge">
<div class="hg-hero-badge-num">2008</div>
<div class="hg-hero-badge-label">Est. Devon, England</div>
</div>
</div>
</div>
<!-- MARQUEE -->
<div class="hg-marquee">
<div class="hg-marquee-inner">
<span class="hg-marquee-item">National Trust Properties</span>
<span class="hg-marquee-item">English Heritage Estates</span>
<span class="hg-marquee-item">Luxury Hotels</span>
<span class="hg-marquee-item">Wedding Venues</span>
<span class="hg-marquee-item">Cambridge University</span>
<span class="hg-marquee-item">Film Productions</span>
<span class="hg-marquee-item">Care Homes</span>
<span class="hg-marquee-item">Housing Associations</span>
<span class="hg-marquee-item">Country Estates</span>
<span class="hg-marquee-item">Holiday Retreats</span>
<span class="hg-marquee-item">National Trust Properties</span>
<span class="hg-marquee-item">English Heritage Estates</span>
<span class="hg-marquee-item">Luxury Hotels</span>
<span class="hg-marquee-item">Wedding Venues</span>
<span class="hg-marquee-item">Cambridge University</span>
<span class="hg-marquee-item">Film Productions</span>
<span class="hg-marquee-item">Care Homes</span>
<span class="hg-marquee-item">Housing Associations</span>
<span class="hg-marquee-item">Country Estates</span>
<span class="hg-marquee-item">Holiday Retreats</span>
</div>
</div>
<!-- ABOUT -->
<div class="hg-section hg-section--parchment">
<div class="hg-container">
<div class="hg-about-grid">
<div class="hg-about-text hg-reveal">
<p class="hg-section-label">Who We Are</p>
<h2 class="hg-section-title">A Trusted Specialist<br><em>Since 2008</em></h2>
<p>Heritage Gardens is a media-recommended UK online retailer and specialist in Garden Buildings, Furniture, and Landscaping Products. We supply businesses and organisations of all sizes — from grand National Trust estates to boutique ho
