/* GLOBAL */
/* ==== */
html {
scroll-behavior: smooth;
}
#savecontent {
margin-top: -2px;
}
.anchor {
scroll-margin-top: 150px;
}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 {
color: white;
}
h1, .h1 {
font-size: clamp(35px, 4.4vw, 46px);
}
h1.mega, .h1.mega {
font-size: clamp(36px, 4.7vw, 70px);
}
h1.ultra, .h1.ultra {
font-size: clamp(37px, 5.3vw, 95px);
}
h2, .h2 {
font-size: clamp(32px, 4vw, 42px);
}
h3, .h3 {
font-size: clamp(29px, 3.6vw, 37px);
}
h4, .h4 {
font-size: clamp(26px, 3.2vw, 32px);
}
h5, .h5 {
font-size: clamp(23px, 2.8vw, 27px);
}
h6, .h6 {
font-size: clamp(20px, 2.4vw, 22px);
}
body {
font-size: clamp(15px, 2vw, 18px);
}
.btn {
white-space: normal;
}
a:hover img,
a.bg-img:hover a.bg-image:hover {
opacity: .85;
}
#savecontent img {
max-width: 100% !important;
height: auto !important;
}
.rightfloat {
float: right;
margin: 0 0 .5rem 1rem;
width: 40%;
}
@media (max-width: 767px) {
.rightfloat {
float: none;
margin: 0 0 1rem 0;
width: 100%;
}
}
.btn-primary {
color: white !important;
}
.round {
border-radius: 12px;
}
.carousel-control-next-icon,
.carousel-control-prev-icon {
background-color: rgba(0, 0, 0, 0.9);
padding: 1rem;
background-size: 20px;
}
@media(min-width: 1600px) {
.container {
max-width: 1300px;
}
}
@media(min-width: 1600px) {
.container.container-wide {
width: 1500px !important;
max-width: 1500px !important;
}
}
.product-image {
background-size: cover !important;
min-height: auto !important;
padding-bottom: 75%;
}
#savecontent form label {
font-weight: bold;
}
#savecontent form .checkbox-group label,
#savecontent form .radio-group label {
font-weight: normal;
}
.formbuilder-required {
color: red;
}
.text-right.addToCart {
text-align: left !important;
}
.blog-detail-page {
}
.blog-detail-page .blog {
border-radius: 12px;
padding: 1.5rem;
background: var(--dark);
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);
border: 1px solid #333;
}
.blog-detail-page .blog h4 {
margin-top: 1rem;
}
.blog-byline {
display: none;
}
form li p {
margin-bottom: 0;
}
form label {
font-weight: bold;
}
form .checkbox-group label,
form .radio-group label {
font-weight: normal;
}
.formbuilder-checkbox,
.formbuilder-radio {
margin-bottom: 4px;
}
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,400;1,500&display=swap');
/* ============================================================
HOMER REED LTD | HOMEPAGE | site id 2735
Scoped to .hr-home. Uses theme tokens with safe fallbacks:
--primary = red accent, --dark = darker band, --secondary = card.
============================================================ */
.hr-home {
--c-red: var(--primary, #b21f2d);
--c-dark: var(--dark, #0e0f11);
--c-card: var(--secondary, #1f2126);
--c-text: #e9e7e2;
--c-muted: rgba(233,231,226,.66);
--c-line: rgba(233,231,226,.14);
color: var(--c-text);
overflow-x: clip; /* clip (not hidden) so position:sticky still works */
}
.hr-home p { color: var(--c-muted); }
.hr-home a { transition: color .2s ease; }
/* ---------- display type ---------- */
.hr-display {
font-family: 'Cormorant Garamond', Georgia, serif;
font-weight: 300;
line-height: 1.02;
letter-spacing: .5px;
font-size: clamp(2.4rem, 5vw, 4.25rem);
margin: 0 0 .5em;
}
.hr-eyebrow {
text-transform: uppercase;
letter-spacing: .28em;
font-size: .72rem;
font-weight: 600;
color: var(--c-red) !important;
margin: 0 0 1.1rem;
}
.hr-lead {
font-size: 1.15rem;
line-height: 1.7;
color: var(--c-text) !important;
max-width: 38em;
}
/* ---------- section rhythm ---------- */
.hr-section { position: relative; padding: 5.5rem 0; }
.hr-section::before {
content: "";
position: absolute;
inset: 0;
background: var(--bloom);
pointer-events: none;
z-index: 0;
}
.hr-section > .snip { position: relative; z-index: 1; }
.hr-band { background: var(--c-dark); }
@media (min-width: 992px) { .hr-pl { padding-left: 2.5rem; } }
/* ---------- hero ---------- */
.hr-hero {
position: relative;
min-height: 84vh;
display: flex;
align-items: center;
overflow: hidden;
}
.hr-hero-bg {
position: absolute; inset: 0;
background-size: cover;
background-position: center;
}
.hr-hero-overlay {
position: absolute; inset: 0;
background: linear-gradient(180deg,
rgba(10,10,12,.34) 0%,
rgba(10,10,12,.50) 55%,
rgba(10,10,12,.80) 100%);
}
.hr-hero-inner {
position: relative;
}
.hr-hero .hr-lead { margin-bottom: 2rem; }
.hr-hero-cta .btn { margin: .35rem .6rem .35rem 0; }
@media (max-width: 600px) { .hr-hero { min-height: 60vh; } }
/* shorter hero for interior / subpages */
.hr-hero-sub { min-height: 55vh; }
@media (max-width: 600px) { .hr-hero-sub { min-height: 44vh; } }
/* ---------- framed image ---------- */
.hr-framed { width: 100%; border: 1px solid var(--c-line); }
/* ---------- contact list ---------- */
.hr-contact li {
padding: 1.1rem 0;
border-bottom: 1px solid rgba(233,231,226,.12);
}
.hr-contact .hr-loc {
display: block;
text-transform: uppercase;
letter-spacing: .14em;
font-size: .72rem;
color: var(--c-muted);
margin-bottom: .4rem;
}
.hr-contact a { color: var(--c-text); }
.hr-contact a:hover { color: var(--c-red); text-decoration: none; }
.hr-contact .hr-phone { font-size: 1.25rem; }
.hr-contact .hr-addr {
display: block;
margin-top: .35rem;
font-size: .95rem;
color: var(--c-muted);
}
/* ---------- feature cards ---------- */
.hr-card {
background: var(--c-card);
border-color: var(--c-line) !important;
}
.hr-card-img {
aspect-ratio: 4 / 3;
background-size: cover;
background-position: center;
}
.hr-card-body { padding: 1.75rem; }
.hr-card-title {
font-family: 'Cormorant Garamond', Georgia, serif;
font-weight: 400;
font-size: 1.7rem;
letter-spacing: .3px;
margin: 0 0 .75rem;
}
/* ---------- editorial link ---------- */
.hr-link {
display: inline-block;
margin-top: .4rem;
text-transform: uppercase;
letter-spacing: .16em;
font-size: .74rem;
font-weight: 600;
color: var(--c-text);
border-bottom: 1px solid var(--c-red);
padding-bottom: 3px;
}
.hr-link:hover { color: var(--c-red); text-decoration: none; }
/* ---------- brand story ---------- */
.hr-home .hr-section p:not([class]) { font-size: 1.08rem; line-height: 1.8; }
.hr-rule { width: 64px; height: 2px; background: var(--c-red); margin: 1.5rem 0 2rem; }
.hr-closer {
font-family: 'Cormorant Garamond', Georgia, serif;
font-style: italic;
font-size: 1.5rem !important;
color: var(--c-text) !important;
margin-top: 1.5rem;
}
.hr-accent { color: var(--c-red); }
/* ---------- sign-up (Omnia formbuilder shortcode) ---------- */
.hr-signup { padding: 2.25rem; }
.hr-signup .form-group { margin-bottom: 1rem; }
.hr-signup .formbuilder-text-label {
display: block;
text-transform: uppercase;
letter-spacing: .12em;
font-size: .68rem;
font-weight: 600;
color: var(--c-muted);
margin-bottom: .3rem;
}
.hr-signup .formbuilder-required { color: var(--c-red); margin-left: .15rem; }
.hr-signup .form-control {
background: transparent;
border: 0;
border-bottom: 1px solid rgba(233,231,226,.25);
border-radius: 0;
color: var(--c-text);
padding-left: 0;
}
.hr-signup .form-control:focus {
background: transparent;
box-shadow: none;
border-color: var(--c-red);
color: var(--c-text);
}
.hr-signup .form-control::placeholder { color: var(--c-muted); }
.hr-signup button[type="submit"] { width: 100%; margin-top: 1.25rem; }
/* ---------- alteration band ---------- */
.hr-alter {
position: relative;
background-size: cover;
background-position: center;
padding: 7rem 0;
}
.hr-alter-overlay { position: absolute; inset: 0; background: rgba(10,10,12,.64); }
.hr-alter-inner { position: relative; }
@media (min-width: 992px) { .hr-alter { background-attachment: fixed; } }
/* ---------- buttons (geometry only; theme owns colors) ---------- */
.hr-home .btn {
border-radius: 0;
text-transform: uppercase;
letter-spacing: .14em;
font-size: .78rem;
font-weight: 600;
padding: .85rem 2rem;
}
/* shared section bloom: neutral gray glow from top-center, ~50% section height */
:root {
--bloom: radial-gradient(ellipse 85% 55% at 50% top,
rgba(232,232,232,.12) 0%,
rgba(232,232,232,.04) 42%,
rgba(232,232,232,0) 88%);
}
/* bloom on the global footer */
.oms-footer { background-image: var(--bloom); background-repeat: no-repeat; }
/* ============================================================
INTERIOR-PAGE TOOLKIT (reused across Shirts&Trousers, Suits,
Sport Coats, Formal Wear, etc.): centered section header +
alternating brand-feature rows.
============================================================ */
/* centered section intro */
.hr-sec-head { max-width: 760px; margin: 0 auto 3.5rem; }
.hr-sec-head .hr-lead { margin-left: auto; margin-right: auto; }
/* brand feature row */
.hr-brand { margin-top: 4.5rem; }
.hr-sec-head + .hr-brand { margin-top: 0; }
@media (min-width: 992px) {
/* intro column sticks to top while the taller gallery scrolls past */
.hr-brand-body { padding-right: 1.5rem; position: sticky; top: 130px; align-self: flex-start; }
.flex-lg-row-reverse .hr-brand-body { padding-right: 0; padding-left: 1.5rem; }
}
.hr-brand-name {
font-family: 'Cormorant Garamond', Georgia, serif;
font-weight: 300;
line-height: 1.05;
letter-spacing: .5px;
font-size: clamp(2rem, 3.6vw, 2.9rem);
margin: 0 0 .35rem;
}
.hr-price { font-size: .95rem; color: var(--c-muted); margin: 0 0 1.35rem; }
.hr-price span { color: var(--c-red); font-weight: 600; }
/* available-styles list */
.hr-styles-label {
text-transform: uppercase; letter-spacing: .16em;
font-size: .68rem; font-weight: 600;
color: var(--c-red) !important; margin: 1.75rem 0 .5rem;
}
.hr-styles li {
padding: .45rem 0;
border-bottom: 1px solid var(--c-line);
color: var(--c-muted);
font-size: .98rem;
}
.hr-brand-links { margin-top: 1.75rem; }
.hr-brand-links .hr-link { margin-right: 1.75rem; }
/* brand logo badge (light chip so on-white logos read on the dark bg) */
.hr-brand-logo {
display: inline-block;
width: 50%;
background: #fff;
padding: .6rem .8rem;
border-radius: 2px;
margin-bottom: 1.15rem;
line-height: 0;
}
.hr-brand-logo img { width: 100%; height: auto; }
/* house-line crest: shown directly on the dark bg, no white chip */
.hr-brand-crest { display: block; width: 62%; max-width: 280px; margin-bottom: 1.15rem; }
/* feature logo (simple content pages): partner logo shown on the dark bg */
.hr-feature-logo { display: block; width: 80%; }
/* product tile gallery */
.hr-product { margin-bottom: 1.5rem; }
.hr-product-img {
aspect-ratio: 1 / 1;
background-size: cover;
background-position: center;
}
.hr-product-cap {
margin: .55rem 0 0;
font-size: .7rem;
text-transform: uppercase;
letter-spacing: .1em;
color: var(--c-muted);
}
/* ---------- care-step list (content pages) ---------- */
.hr-step {
display: flex;
gap: 1.5rem;
padding: 1.4rem 0;
border-bottom: 1px solid var(--c-line);
}
.hr-step:first-child { border-top: 1px solid var(--c-line); }
.hr-step-num {
font-family: 'Cormorant Garamond', Georgia, serif;
font-weight: 300;
font-size: 2.9rem;
line-height: .9;
color: var(--c-red);
flex: 0 0 auto;
min-width: 2.4rem;
}
.hr-step-title {
font-family: 'Cormorant Garamond', Georgia, serif;
font-weight: 400;
font-size: 1.55rem;
letter-spacing: .3px;
margin: .15rem 0 .5rem;
}
.hr-step-body p { margin: 0; }
/* ---------- pricing table (Tailoring) ---------- */
.hr-pricegrid { columns: 3 250px; column-gap: 1.75rem; }
@media (max-width: 991px) { .hr-pricegrid { columns: 2 240px; } }
@media (max-width: 575px) { .hr-pricegrid { columns: 1; } }
.hr-pricecard {
break-inside: avoid;
background: var(--c-card);
border: 1px solid var(--c-line);
padding: 1.5rem 1.6rem 1.25rem;
margin: 0 0 1.75rem;
}
.hr-pricecard-title {
font-family: 'Cormorant Garamond', Georgia, serif;
font-weight: 400;
font-size: 1.45rem;
color: #fff;
margin: 0 0 1rem;
padding-bottom: .8rem;
border-bottom: 1px solid var(--c-red);
}
.hr-pricelist { list-style: none; margin: 0; padding: 0; }
.hr-pricelist li {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 1rem;
padding: .55rem 0;
border-bottom: 1px solid var(--c-line);
}
.hr-pricelist li:last-child { border-bottom: 0; padding-bottom: 0; }
.hr-pricelist .svc { color: var(--c-muted); font-size: .97rem; }
.hr-pricelist .amt { color: var(--c-text); font-weight: 600; white-space: nowrap; }
.hr-note { text-align: center; color: var(--c-muted); font-size: .92rem; margin-top: 2rem; }
.hr-note strong { color: var(--c-red); font-weight: 600; }
/* ---------- locations ---------- */
.hr-loclist { margin: 1.25rem 0 0; }
.hr-loclist li { display: flex; align-items: baseline; padding: .55rem 0; color: var(--c-muted); font-size: 1.02rem; }
.hr-loclist li i { color: var(--c-red); width: 1.5em; flex: 0 0 auto; }
.hr-loclist a { color: var(--c-text); }
.hr-loclist a:hover { color: var(--c-red); text-decoration: none; }
.hr-map { display: block; width: 100%; height: 400px; border: 1px solid var(--c-line); }
/* ---------- pull quote (About) ---------- */
.hr-quote-band { padding: 6rem 0; }
.hr-quote { max-width: 900px; margin: 0 auto; text-align: center; position: relative; }
.hr-quote-mark {
display: block;
font-family: 'Cormorant Garamond', Georgia, serif;
font-weight: 500;
font-size: 7rem;
line-height: .6;
color: var(--c-red);
margin-bottom: 1rem;
}
.hr-quote-text {
font-family: 'Cormorant Garamond', Georgia, serif;
font-style: italic;
font-weight: 300;
font-size: clamp(1.9rem, 4.4vw, 3.1rem);
line-height: 1.25;
letter-spacing: .3px;
color: #fff;
margin: 0;
border: 0;
padding: 0;
}
.hr-quote-cite {
margin-top: 1.9rem;
text-transform: uppercase;
letter-spacing: .28em;
font-size: .74rem;
font-weight: 600;
color: var(--c-muted);
}
.hr-quote-cite::before {
content: "";
display: block;
width: 52px;
height: 2px;
background: var(--c-red);
margin: 0 auto 1.1rem;
}
/* inline variant: left-justified, sits under the owner photo */
.hr-quote-inline { max-width: none; margin: 1.75rem 0 0; text-align: left; }
.hr-quote-inline .hr-quote-mark { font-size: 5rem; margin-bottom: -.5rem; }
.hr-quote-inline .hr-quote-text { font-size: clamp(1.55rem, 2.6vw, 2rem); }
.hr-quote-inline .hr-quote-cite { margin-top: 1.25rem; }
.hr-quote-inline .hr-quote-cite::before { margin: 0 0 1rem; }
/* PAGE SPECIFIC */
/* FOOTER */