/* ==========================================================================
Bodhi Furniture Collection - landing page
Built from the AA26015 CHL Bodhi landing page v1 design (Adobe XD)
All sizes are in pixels, taken straight from the design.
Base values = the Web 1920 artboard (1640px content, 140px margins).
Values at <=819px = the iPhone 14 Pro artboard (323px content, 35px margins).
The breakpoints in between step down from one to the other.
The mobile artboard stops at the Barley section; everything below it
follows the desktop layout logic.
========================================================================== */
/* ---------------------------------------------------------------- tokens */
:root {
/* palette from the document colour library */
--navy: #2a425e; /* CHL dark blue RGB */
--blue: #66a6d7; /* CHL blue RGB */
--cream: #fef6e6;
--gold: #f1d885;
--deep: #064461;
--white: #fff;
/* --- Type: values from the Web 1920 artboard ------------------------- */
--fs-display: 72px; /* Raleway Light - hero, Barley, Juniper, ... */
--fs-ribbon: 56px; /* Raleway Regular - Bodhi Furniture Collection */
--fs-badge: 56px; /* Raleway Regular - NEW */
--fs-bar: 32px; /* Raleway Medium - OUR FURNITURE RANGES */
--fs-lead: 32px; /* Raleway Medium - intro copy, card headings */
--fs-body: 24px; /* Raleway Medium - body copy */
--fs-btn: 24px; /* Raleway SemiBold - buttons */
--fs-label: 20px; /* Raleway SemiBold - field labels */
--fs-tag: 20px; /* Raleway Medium - tags */
--fs-note: 20px; /* Raleway SemiBold - notes */
--fs-micro: 18px; /* Raleway Medium - opening hours, consent */
/* --- Spacing ---------------------------------------------------------- */
--container: 1640px;
--gutter: 140px;
--section-y: 100px;
--panel-pad: 74px; /* inner padding of the navy Barley panel */
--header-y: 44px;
--ribbon-y: 28px;
--bar-y: 42px;
--gap-sm: 16px;
--gap-md: 24px;
--gap-lg: 48px;
--gap-xl: 76px;
/* --- Components (design heights: button 64, tag 52, input 70) --------- */
--btn-py: 18px; /* 24 + 18*2 + 2*2 = 64 */
--btn-px: 40px;
--tag-py: 15px; /* 20 + 15*2 + 1*2 = 52 */
--tag-px: 20px;
--input-py: 22px;
--input-px: 20px;
--badge-py: 10px; /* 56 + 10*2 = 76, design 77 */
--badge-px: 35px;
--order-copy-mb: 64px; /* copy -> first button, "Request a brochure" */
--btn-stack-gap: 35px; /* between the two stacked brochure buttons */
/* "How to order" vertical rhythm, derived from the design's y positions */
--sp-lede-sub: 55px; /* lede -> "Contact Customer Services" */
--sp-tight: 6px; /* subhead -> Call/Email row */
--sp-xtight: 4px; /* Call/Email -> opening hours */
--sp-hours-lead: 30px; /* opening hours -> "Alternatively..." */
--sp-lead-form: 13px; /* "Alternatively..." -> first field */
--sp-field: 21px; /* between form fields */
--sp-form-radio: 47px; /* last field -> "I am interested in" */
/* Delivery information */
--sp-delivery-head: 38px; /* heading -> copy */
--sp-delivery-para: 40px; /* between paragraphs */
--logo-w: 440px;
--range-img: 375px; /* packshot height in Our Furniture Ranges */
--cover-w: 372px; /* brochure cover */
--juniper-img: 536px; /* Juniper photo frame */
}
/* ---------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
body {
margin: 0;
font-family: Raleway, "Helvetica Neue", Arial, sans-serif;
font-weight: 500;
font-size: var(--fs-body);
line-height: 1.5;
color: var(--navy);
background: var(--white);
-webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--blue); }
h1, h2, h3, p, figure, fieldset, legend { margin: 0; }
/* --container is the CONTENT width (1640px in the design), so the outer
box has to carry the gutters on top of it: 1640 + 140*2 = 1920. */
.container {
max-width: calc(var(--container) + var(--gutter) * 2);
margin-inline: auto;
padding-inline: var(--gutter);
}
.note { font-size: var(--fs-note); font-weight: 600; }
/* ---------------------------------------------------------------- header */
.site-header {
display: flex;
justify-content: center;
padding: var(--header-y) var(--gutter);
}
.site-header__logo img { width: var(--logo-w); }
/* ---------------------------------------------------------------- ribbon */
.ribbon {
background: var(--navy);
padding: var(--ribbon-y) var(--gutter);
}
.ribbon__inner {
max-width: var(--container);
margin-inline: auto;
display: flex;
align-items: center;
justify-content: center;
gap: var(--gap-sm);
flex-wrap: wrap;
}
.ribbon__badge {
background: var(--cream);
color: var(--deep);
font-size: var(--fs-badge);
font-weight: 400;
line-height: 1;
padding: var(--badge-py) var(--badge-px);
}
.ribbon__title {
color: var(--cream);
font-size: var(--fs-ribbon);
font-weight: 400;
line-height: 1.15;
}
/* ---------------------------------------------------------------- hero */
.hero {
display: grid;
grid-template-columns: 968fr 952fr; /* proportions from the design */
background: var(--cream);
}
.hero__copy {
display: flex;
flex-direction: column;
justify-content: center;
gap: var(--gap-lg);
padding: var(--section-y) var(--gap-lg) var(--section-y) var(--gutter);
}
.hero__heading {
font-size: var(--fs-display);
font-weight: 300;
line-height: 1.25;
/*max-width: 15ch;*/
}
/* in the design the buttons are stacked and left-aligned */
.hero__copy .btn-group { flex-direction: column; align-items: flex-start; }
.hero__media { display: block; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
/* ---------------------------------------------------------------- buttons */
.btn-group { display: flex; flex-wrap: wrap; gap: var(--gap-sm); }
.btn-group--stack { flex-direction: column; align-items: flex-start; }
.btn {
display: inline-block;
font: inherit;
font-size: var(--fs-btn);
font-weight: 600;
line-height: 1;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0.02em;
padding: var(--btn-py) var(--btn-px);
border: 2px solid transparent;
border-radius: 999px; /* design: r=32 on a 64px height - a full pill */
cursor: pointer;
transition: background-color .18s, color .18s, border-color .18s;
}
.btn--navy { background: var(--navy); color: var(--cream); border-color: var(--navy); }
.btn--white { background: var(--white); color: var(--navy); border-color: var(--white); }
.btn--cream { background: var(--cream); color: var(--navy); border-color: var(--cream); }
.btn--outline-cream { background: transparent; color: var(--cream); border-color: var(--cream); }
.btn--navy:hover,
.btn--outline-cream:hover { background: var(--blue); color: var(--white); border-color: var(--blue); }
.btn--white:hover,
.btn--cream:hover { background: var(--navy); color: var(--cream); border-color: var(--navy); }
.btn:focus-visible,
a:focus-visible,
input:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
/* ---------------------------------------------------------------- intro */
.intro { padding-block: var(--section-y); }
.intro__lead {
font-size: var(--fs-lead);
line-height: 1.45;
text-align: center;
max-width: 1154px; /* text block width in the design */
margin-inline: auto;
}
.intro__grid {
margin-top: var(--gap-xl);
display: grid;
/* column proportions from the design: 444 / 376 / 506 / 398.
The packshots carry their own whitespace, so the design runs the
columns edge to edge - no column gap here. */
grid-template-columns: 444fr 376fr 506fr 398fr;
align-items: center;
column-gap: 0;
row-gap: var(--gap-lg);
}
/* In the design both packshots are scaled up and cropped inside their frame
(XD pattern fill). Frame ratio, zoom and offset are taken from the .xd:
Admonere Bedside frame 444x445, scale 1.8767, offset (-0.0354, -0.0518)
Ravenna Chair frame 506x506, scale 1.0994, offset (0, -0.0497)
Without this the furniture floats in its own white margin and reads far
smaller than the design. */
.intro__figure {
display: block;
overflow: hidden;
}
.intro__figure img {
width: 100%;
height: 100%;
object-fit: cover;
transform-origin: center;
}
.intro__figure--bedside { aspect-ratio: 444 / 445; }
.intro__figure--bedside img { transform: scale(1.8767) translate(-3.54%, -5.18%); }
.intro__figure--chair { aspect-ratio: 506 / 506; }
.intro__figure--chair img { transform: scale(1.0994) translate(0, -4.97%); }
/* ---------------------------------------------------------------- bar */
.bar {
background: var(--navy);
color: var(--cream);
font-size: var(--fs-bar);
font-weight: 500;
line-height: 1.5;
letter-spacing: 0.02em;
text-transform: uppercase;
text-align: center;
padding: var(--bar-y) var(--gutter);
}
/* ---------------------------------------------------------------- ranges */
.ranges { padding-block: var(--section-y); }
.ranges__grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--gap-lg);
}
.range a {
display: grid;
grid-template-rows: 1fr auto auto;
gap: var(--gap-md);
/*height: 100%;*/
text-align: center;
text-decoration: none;
color: inherit;
}
.range__media { display: flex; align-items: flex-end; justify-content: center; }
.range__media img { max-height: var(--range-img); width: auto; }
.range__title { font-size: var(--fs-lead); font-weight: 500; }
.range__text { font-size: var(--fs-body); }
.range a:hover .range__title { color: var(--blue); }
/* ---------------------------------------------------------------- split */
.display {
font-size: var(--fs-display);
font-weight: 300;
line-height: 1.2;
}
.display--cream { color: var(--cream); }
/* The design has no button in these sections, so the section link sits on
the heading and the image. The heading must still read as plain type. */
.display__link { color: inherit; text-decoration: none; }
.display__link:hover { color: var(--blue); }
.split { display: grid; align-items: center; }
.split__media img { width: 100%; }
/* Barley - full-bleed panels, 50/50 */
.split--bleed { grid-template-columns: 1fr 1fr; align-items: stretch; }
.split--bleed .split__media { height: 100%; }
.split--bleed .split__media img { height: 100%; object-fit: cover; }
.split__panel--navy { background: var(--navy); color: var(--white); height: 100%; }
.split--bleed .split__panel {
display: flex;
flex-direction: column;
justify-content: center;
gap: var(--gap-md);
padding: var(--section-y) var(--gutter) var(--section-y) var(--panel-pad);
}
.split--bleed .split__panel p { max-width: 746px; }
.split__panel--navy .note { color: var(--cream); }
/* Juniper / We make the perfect match - inside the container.
Column proportions from the design: Juniper 746/536, perfect match 828/746. */
.split--contained {
max-width: calc(var(--container) + var(--gutter) * 2);
margin-inline: auto;
padding: var(--section-y) var(--gutter);
grid-template-columns: 746fr 536fr;
gap: var(--gap-lg);
}
.split--contained .split__panel {
display: flex;
flex-direction: column;
gap: var(--gap-md);
}
/* "We make the perfect match". The left column holds the chairs (828 wide)
AND the swatch strip below them (908 wide, x=60 - it is the widest thing
in the column, so the column is sized on it). Copy column is 746. */
.split--reverse { grid-template-columns: 908fr 746fr; }
.split__media--match {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--gap-md);
}
.match__chairs { display: block; width: 91.2%; } /* 828 of 908 */
.match__swatches { width: 100%; }
/* The design does NOT stretch this block across the container: the copy is
746 wide, then a 220 gap, then a 536 frame, leaving 138 of slack on the
right. Capping the frame at its design width reproduces that.
The source photo is 2480x3508 but the design frame is 536x729, so XD crops
it (fill mode "cover"). Reproducing that frame gives the design height. */
.split__media--juniper {
display: block;
width: 100%;
max-width: var(--juniper-img);
aspect-ratio: 536 / 729;
overflow: hidden;
}
.split__media--juniper img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* ---------------------------------------------------------------- tags */
.tags { display: flex; flex-wrap: wrap; gap: var(--gap-sm); }
.tag {
display: inline-block;
font-size: var(--fs-tag);
font-weight: 500;
line-height: 1;
text-transform: uppercase;
letter-spacing: 0.02em;
padding: var(--tag-py) var(--tag-px);
border: 1px solid transparent;
}
.tag--navy { background: var(--navy); color: var(--cream); }
.tag--cream { background: var(--cream); color: var(--navy); }
.tag--outline-cream { border-color: var(--cream); color: var(--cream); }
.tag--outline-navy { border-color: var(--navy); color: var(--navy); }
/* ---------------------------------------------------------------- order */
.order { display: grid; grid-template-columns: 1fr 1fr; }
/* Each panel is half the page (962 wide). The design keeps the page gutter
on the OUTER edge and a smaller inset on the inner edge where the two
panels meet: navy copy runs 140..893, cream copy runs 82..1774. */
.order__panel { padding: var(--section-y) var(--gutter); }
.order__panel--navy { background: var(--navy); color: var(--cream); padding-right: var(--panel-pad); }
.order__panel--cream { background: var(--cream); padding-left: var(--panel-pad); }
.order__inner {
display: flex;
flex-direction: column;
gap: var(--gap-md);
}
/* Everything in the navy panel is left-aligned in the design (heading, copy
and both buttons all start at x=140); only the cover is centred. */
.order__cover { width: var(--cover-w); margin-inline: auto; }
/* Design: 64px between the copy and the first button. .order__inner already
spaces its children by --gap-md, so subtract that to land on 64 exactly. */
.order__panel--navy .order__inner > p {
margin-bottom: calc(var(--order-copy-mb) - var(--gap-md));
}
/* Design: buttons sit at y 6220..6284 and 6319..6383 - a 35px gap. */
.order__panel--navy .btn-group--stack { gap: var(--btn-stack-gap); }
/* Sizes read off the design. The lede is one 32px line with a 20px aside
under it - the ranged styles in the .xd give 32 / 32 / 20. */
.order__lede { font-size: var(--fs-lead); font-weight: 500; line-height: 1.35; }
.order__aside { display: block; font-size: var(--fs-label); line-height: 1.4; }
.order__subhead { font-size: var(--fs-lead); font-weight: 500; }
.order__contact { display: flex; flex-wrap: wrap; gap: var(--gap-md) var(--gap-lg); }
.order__contact a { text-decoration: none; }
.order__contact a:hover { text-decoration: underline; }
.order__contact + .note { font-size: var(--fs-micro); font-weight: 500; }
.order__formlead { font-size: var(--fs-body); }
/* Vertical rhythm from the design's top-to-top deltas (5349 -> 5460 -> 5586
-> 5640 -> 5680 -> 5737 -> 5786), minus each block's rendered height.
The panel spaces its own children, so gap is off here. */
.order__panel--cream .order__inner { gap: 0; }
.order__panel--cream .order__lede { margin-top: var(--gap-md); }
.order__panel--cream .order__subhead { margin-top: var(--sp-lede-sub); }
.order__panel--cream .order__contact { margin-top: var(--sp-tight); }
.order__panel--cream .order__contact + .note { margin-top: var(--sp-xtight); }
.order__panel--cream .order__formlead { margin-top: var(--sp-hours-lead); }
.order__panel--cream .callback { margin-top: var(--sp-lead-form); }
/* ---------------------------------------------------------------- form */
/* Field spacing from the design: rects at y 5786, 5879, 5969 (each 70 tall),
so 23 then 20 between them. */
.callback { display: flex; flex-direction: column; gap: var(--sp-field); }
.callback__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-md); }
.field { display: block; }
/* label kept for assistive tech only - the design shows placeholders */
.sr-only {
position: absolute;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.field input::placeholder {
color: var(--navy);
opacity: 1;
font-weight: 600;
}
.field input {
width: 100%;
font: inherit;
font-size: var(--fs-label);
line-height: 1.2; /* 20*1.2 + 22*2 + 1*2 = 70 - input height from the design */
color: var(--navy);
background: var(--white);
border: 1px solid transparent;
padding: var(--input-py) var(--input-px);
border-radius: 0; /* inputs are square in the design */
}
.interests {
border: 0;
padding: 0;
/* design: last field ends 6039, "I am interested in" at 6086 */
margin: calc(var(--sp-form-radio) - var(--sp-field)) 0 0;
display: grid;
grid-template-columns: repeat(3, auto);
gap: var(--gap-sm) var(--gap-md);
justify-content: start;
}
.interests__legend {
font-size: var(--fs-label); /* 20px SemiBold in the design */
font-weight: 600;
margin-bottom: 12px;
}
.interests label {
display: flex;
align-items: center;
gap: 8px;
font-size: var(--fs-label);
font-weight: 600;
cursor: pointer;
}
.interests input[type="radio"] { accent-color: var(--navy); width: 18px; height: 18px; margin: 0; }
.callback__consent { font-size: var(--fs-micro); font-weight: 600; }
.callback button { align-self: flex-start; }
/* ---------------------------------------------------------------- delivery */
/* Design: the heading is centred (paragraphAlign "center"), but the copy
block below it is left-aligned - the .xd sets no align on that node. */
.delivery { padding-block: var(--section-y); }
.delivery__heading {
text-align: center;
font-size: var(--fs-bar);
font-weight: 500;
letter-spacing: 0.02em; /* design charSpacing 20 = 0.02em */
text-transform: uppercase;
/* design: heading at y=6552 (48 line box), copy at 6638 -> 38px below */
margin-bottom: var(--sp-delivery-head);
}
/* The design holds all four paragraphs in ONE text block with lineHeight 40
and a blank line between them, so the gap between paragraphs is also 40. */
.delivery p {
max-width: 1624px; /* copy width in the design */
margin-inline: auto;
line-height: 1.667; /* 24 * 1.667 = 40 */
}
.delivery p + p { margin-top: var(--sp-delivery-para); }
/* ==========================================================================
Breakpoints - stepping down from 1920 to 393
========================================================================== */
/* --- 1280–1599 -------------------------------------------------------- */
@media (max-width: 1599px) {
:root {
--fs-display: 56px; --fs-ribbon: 44px; --fs-badge: 44px;
--fs-bar: 30px; --fs-lead: 28px; --fs-body: 20px;
--fs-btn: 20px; --fs-label: 18px; --fs-tag: 18px;
--fs-note: 18px; --fs-micro: 16px;
--gutter: 80px; --section-y: 76px; --panel-pad: 56px;
--header-y: 34px; --ribbon-y: 22px; --bar-y: 34px;
--gap-sm: 14px; --gap-md: 20px; --gap-lg: 38px; --gap-xl: 60px;
--btn-py: 15px; --btn-px: 32px;
--tag-py: 13px; --tag-px: 17px;
--input-py: 19px; --input-px: 17px;
--badge-py: 8px; --badge-px: 28px;
--sp-lede-sub: 43px; --sp-tight: 5px; --sp-xtight: 3px;
--sp-hours-lead: 23px; --sp-lead-form: 10px; --sp-field: 16px; --sp-form-radio: 37px;
--sp-delivery-head: 30px; --sp-delivery-para: 31px;
--order-copy-mb: 50px; --btn-stack-gap: 28px;
--logo-w: 340px; --range-img: 300px; --cover-w: 300px; --juniper-img: 440px;
}
}
/* --- 1024–1279 -------------------------------------------------------- */
@media (max-width: 1279px) {
:root {
--fs-display: 46px; --fs-ribbon: 38px; --fs-badge: 38px;
--fs-bar: 28px; --fs-lead: 25px; --fs-body: 18px;
--fs-btn: 18px; --fs-label: 17px; --fs-tag: 17px;
--fs-note: 16px; --fs-micro: 15px;
--gutter: 56px; --section-y: 62px; --panel-pad: 44px;
--header-y: 28px; --ribbon-y: 18px; --bar-y: 30px;
--gap-sm: 12px; --gap-md: 18px; --gap-lg: 32px; --gap-xl: 50px;
--btn-py: 13px; --btn-px: 28px;
--tag-py: 12px; --tag-px: 15px;
--input-py: 17px; --input-px: 15px;
--badge-py: 7px; --badge-px: 24px;
--sp-lede-sub: 37px; --sp-tight: 4px; --sp-xtight: 3px;
--sp-hours-lead: 20px; --sp-lead-form: 9px; --sp-field: 14px; --sp-form-radio: 32px;
--sp-delivery-head: 26px; --sp-delivery-para: 27px;
--order-copy-mb: 42px; --btn-stack-gap: 24px;
--logo-w: 290px; --range-img: 250px; --cover-w: 260px; --juniper-img: 370px;
}
.intro__grid {
grid-template-columns: 444fr 376fr;
row-gap: var(--gap-lg);
}
.interests { grid-template-columns: repeat(2, auto); }
}
/* --- 820–1023 --------------------------------------------------------- */
@media (max-width: 1023px) {
:root {
--fs-display: 40px; --fs-ribbon: 32px; --fs-badge: 34px;
--fs-bar: 26px; --fs-lead: 22px; --fs-body: 17px;
--fs-btn: 17px; --fs-label: 16px; --fs-tag: 16px;
--fs-note: 15px; --fs-micro: 14px;
--gutter: 44px; --section-y: 52px; --panel-pad: 40px;
--header-y: 24px; --ribbon-y: 16px; --bar-y: 28px;
--gap-sm: 10px; --gap-md: 16px; --gap-lg: 28px; --gap-xl: 42px;
--btn-py: 12px; --btn-px: 26px;
--tag-py: 11px; --tag-px: 14px;
--input-py: 16px; --input-px: 14px;
--badge-py: 6px; --badge-px: 21px;
--sp-lede-sub: 33px; --sp-tight: 4px; --sp-xtight: 2px;
--sp-hours-lead: 18px; --sp-lead-form: 8px; --sp-field: 13px; --sp-form-radio: 28px;
--sp-delivery-head: 23px; --sp-delivery-para: 24px;
--order-copy-mb: 36px; --btn-stack-gap: 20px;
--logo-w: 250px; --range-img: 220px; --cover-w: 240px; --juniper-img: 320px;
}
}
/* --- <=819: values from the iPhone 14 Pro artboard -------------------- */
@media (max-width: 819px) {
:root {
--fs-display: 34px; --fs-ribbon: 26px; --fs-badge: 31px;
--fs-bar: 24px; --fs-lead: 20px; --fs-body: 16px;
--fs-btn: 16px; --fs-label: 16px; --fs-tag: 15px;
--fs-note: 14px; --fs-micro: 13px;
--gutter: 35px; --section-y: 44px; --panel-pad: 35px;
--header-y: 22px; --ribbon-y: 14px; --bar-y: 26px;
--gap-sm: 10px; --gap-md: 16px; --gap-lg: 24px; --gap-xl: 32px;
--btn-py: 11px; --btn-px: 24px; /* 16 + 11*2 + 2*2 = 42 - matches the design */
--tag-py: 11px; --tag-px: 13px; /* 15 + 11*2 + 1*2 = 39 - matches the design */
--input-py: 15px; --input-px: 13px;
--badge-py: 5px; --badge-px: 19px; /* 31 + 5*2 = 41 - matches the design */
--sp-lede-sub: 29px; --sp-tight: 3px; --sp-xtight: 2px;
--sp-hours-lead: 16px; --sp-lead-form: 7px; --sp-field: 11px; --sp-form-radio: 24px;
--sp-delivery-head: 20px; --sp-delivery-para: 21px;
--order-copy-mb: 32px; --btn-stack-gap: 18px;
--logo-w: 226px; --range-img: 221px; --cover-w: 240px; --juniper-img: 420px;
}
/* The mobile artboard has no cream panel behind the hero copy - that
rect only exists on the desktop board, so here it sits on white. */
.hero { grid-template-columns: 1fr; background: var(--white); }
/* Artboard: the second hero button is an outline (fill none, 2px navy
stroke) - a white fill would be invisible on the white background. */
.hero__copy .btn--white {
background: transparent;
color: var(--navy);
border-color: var(--navy);
}
.hero__copy .btn--white:hover {
background: var(--navy);
color: var(--cream);
border-color: var(--navy);
}
/* Mobile artboard: the hero copy and both buttons are left-aligned at
x=31..35, NOT centred. Image sits above the copy (y=232 vs y=558). */
.hero__copy {
order: 2;
padding: var(--section-y) var(--gutter);
}
.hero__heading { max-width: none; }
/* Artboard frame is 404x305 - the photo is cropped, not shown whole
(its own aspect is 1.5). */
.hero__media { order: 1; aspect-ratio: 404 / 305; }
/* Artboard: packshots are centred, but the copy under each one is
left-aligned at x=34 (only the lead paragraph is centred). */
.intro__grid {
grid-template-columns: 1fr;
justify-items: stretch;
}
/* Constrain the frame, not the img - the img has to keep filling it so the
design's crop stays intact. Artboard widths against 323 of content:
bedside 201 (62%), chair 251 (78%). */
.intro__figure { margin-inline: auto; }
.intro__figure--bedside { width: 62%; }
.intro__figure--chair { width: 78%; }
/* Artboard: badge above the title, both centred in the navy band. */
.ribbon__inner { flex-direction: column; gap: var(--gap-md); }
.ranges__grid { grid-template-columns: 1fr; }
.split--bleed,
.split--contained,
.split--reverse,
.order { grid-template-columns: 1fr; }
/* Artboard frame is 394x472 - portrait. The source is 2000x1129 (landscape),
so the design crops it hard and keeps the left part of the room: wardrobe,
armchair, table, chest of drawers. */
.split--bleed .split__media {
aspect-ratio: 394 / 472;
height: auto;
}
.split--bleed .split__media img {
height: 100%;
object-fit: cover;
object-position: 10% center;
}
.split--bleed .split__panel { padding: var(--section-y) var(--gutter); }
.split--contained .split__media { justify-self: center; }
.split--contained .split__media img { width: min(100%, 420px); }
/* on mobile the image sits above the text in both sections */
.split--contained .split__panel { order: 2; }
.split--contained .split__media { order: 1; }
/* "Perfect match": the swatch strip must not land above the section
heading. Unwrap the media column so chairs and swatches can be ordered
around the copy: chairs -> copy -> swatches. */
.split__media--match { display: contents; }
.match__chairs { order: 1; width: min(100%, 420px); margin-inline: auto; }
.split--reverse .split__panel { order: 2; }
.match__swatches { order: 3; margin-top: var(--gap-md); }
.order__panel--navy .order__inner { margin-left: 0; }
.order__inner { max-width: none; }
.callback__row { grid-template-columns: 1fr; }
.interests { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
* { transition: none !important; }
}
/* ==========================================================================
Contact Form 7 overrides for the Bodhi call-back form.
Written against CF7 6.1.6's ACTUAL output, with its auto-paragraph filter
left ON. That filter wraps the fields in
and separates them with ,
and the shortcode sits inside a wrapper:
div.callback > div.wpcf7 > form.wpcf7-form
fieldset.hidden-fields-container (CF7's hidden inputs)
div.callback__row > p > label.field + br + label.field
p > label.field + br + label.field
fieldset.interests > legend + p > span.wpcf7-form-control-wrap
p.callback__consent
p > input.wpcf7-submit
div.wpcf7-response-output
Append AFTER style.css, or paste into Appearance > Customise > Additional CSS.
========================================================================== */
/* --- the form, not the wrapper, carries the layout ---------------------- */
/* .callback is now an outer
; the flex column has to move to the form. */
.callback .wpcf7-form {
display: flex;
flex-direction: column;
gap: var(--sp-field);
}
/* CF7's hidden inputs live in a fieldset that would otherwise draw a border
and eat a gap. Hidden inputs still submit from a display:none container. */
.callback .hidden-fields-container { display: none; }
/* CF7's own a11y region - visually hidden, still read by screen readers. */
.callback .screen-reader-response {
position: absolute;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
/* --- undo the auto-paragraph damage ------------------------------------- */
.callback .wpcf7-form p { margin: 0; }
.callback .wpcf7-form br { display: none; }
.callback .wpcf7-form p:empty { display: none; }
/* The two-name row: autop puts BOTH labels inside one
, so the 2-column
grid has to sit on that
rather than on .callback__row. */
.callback .callback__row { display: block; }
.callback .callback__row > p {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--gap-md);
}
/* The
that holds company + telephone: the labels are blocks, so they
need the field gap between them. Note `~` and not `+`: the is still
an element between them, so the adjacent combinator would never match.
`> p >` keeps this away from the pair inside .callback__row. */
.callback .wpcf7-form > p > .field ~ .field { margin-top: var(--sp-field); }
/* --- fields -------------------------------------------------------------- */
/* CF7 wraps each control in an inline span - the input's width:100% has
nothing to resolve against until this becomes a block. */
.callback .wpcf7-form-control-wrap { display: block; }
/* CF7 puts size="40" on text inputs; width:100% from style.css wins, but be
explicit so a theme reset cannot flip it back. */
.callback .field input { width: 100%; }
/* --- radio group --------------------------------------------------------- */
/* In style.css the fieldset itself is the 3+2 grid. Here its children are a