/* ===========================================================================
HOOME. DIRECT MAIL LANDING PAGE
---------------------------------------------------------------------------
Structure of this file
1. Tokens
2. Reset & base
3. Typographic scale
4. Document rail
5. Reveal motion system
6. Section 01. The reveal
7. Section 01b. Introduction
8. Section 02. Recognition
9. Section 03. Closing the loop
10. Section 04. Proof
11. Section 05. The invitation
12. Reduced motion
Design rules this file holds to, deliberately:
• Two colours do the work. Ivory paper, black envelope. Green and tan
appear a handful of times each, and nowhere else.
• No gradients, no shadows, no border-radius above 0. The only soft
edge on the page is the mask over the photograph.
• Nothing is in a card. Hierarchy comes from size, weight, and space.
• Mobile-first: every size below is written for a phone, then widened.
=========================================================================== */
/* 1. TOKENS ---------------------------------------------------------------
Colours are taken verbatim from the Hoome Brand Guidelines (p.14–15).
Do not add to this list without a guideline reference. */
:root {
/* Brand */
--ivory: #F6F5F2; /* Primary White */
--black: #151515; /* Primary Black */
--green: #334737; /* Primary Green */
--blue: #193741; /* Accent Blue */
--tan: #C1A26C; /* Accent Tan */
--brown: #7C5C3C; /* Accent Brown */
/* Neutrals */
--n100: #DAD6CE;
--n300: #BEB9B3;
--n400: #8F8C89;
--n500: #555555;
/* Contextual: reassigned inside dark panels */
--paper: var(--ivory);
--ink: var(--black);
--quiet: var(--n400);
--rule: rgba(21, 21, 21, .15);
/* Rhythm. One scale, used everywhere. */
--gutter: clamp(1.5rem, 6vw, 6rem);
--section: clamp(6rem, 16vw, 13rem);
--measure: 34em;
/* Motion */
--ease: cubic-bezier(.22, .61, .36, 1);
}
/* Dark panels swap the contextual tokens rather than overriding every rule. */
.panel--dark {
--paper: var(--black);
--ink: var(--ivory);
--quiet: rgba(246, 245, 242, .52);
--rule: rgba(246, 245, 242, .18);
background: var(--paper);
color: var(--ink);
}
/* 2. RESET & BASE --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--ivory);
color: var(--black);
font-family: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-size: 1rem;
line-height: 1.6;
font-weight: 400;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
h1, h2, h3, p, figure, blockquote, ol, ul { margin: 0; padding: 0; }
ol, ul { list-style: none; }
img, svg { display: block; max-width: 100%; }
em { font-style: normal; color: var(--green); }
a { color: inherit; }
::selection { background: var(--green); color: var(--ivory); }
:focus-visible {
outline: 2px solid var(--green);
outline-offset: 4px;
}
.panel--dark :focus-visible { outline-color: var(--tan); }
/* Every section is a full-width band; `.wrap` holds the measure inside it. */
.wrap {
width: 100%;
max-width: 76rem;
margin-inline: auto;
padding-inline: var(--gutter);
}
/* Paper grain. Printed matter, not a screen. Dark panels only, barely there. */
.panel--dark::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: .05;
background-image: url("data:image/svg+xml;utf8, or inline SVG
if you would rather keep it as true currentColor. */
filter: none;
transition: filter .45s var(--ease);
}
.rail--light .rail__mark img { filter: invert(1) brightness(1.12); }
.rail__for {
text-align: right;
/* Long builder names wrap to a second line rather than crowding the mark.
Two lines of 10px still sit inside the rail's height. */
max-width: 58%;
font-size: .625rem; /* 10px, intentionally quiet */
line-height: 1.35;
letter-spacing: .16em;
text-transform: uppercase;
}
.rail__for-label { display: block; opacity: .5; }
.rail__for-name { display: block; font-weight: 600; }
/* 5. REVEAL MOTION SYSTEM -------------------------------------------------
One transition, used for everything that reveals on scroll: 12px up and
a fade. Nothing scales, nothing slides sideways, nothing bounces.
Rules are scoped to `.js` so content is never hidden if the script fails. */
.js [data-reveal] {
opacity: 0;
transform: translate3d(0, 12px, 0);
transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.js [data-reveal].is-in {
opacity: 1;
transform: none;
}
.js [data-reveal-delay="1"] { transition-delay: .10s; }
.js [data-reveal-delay="2"] { transition-delay: .20s; }
/* 6. SECTION 01. THE REVEAL ---------------------------------------------
The card that was in the envelope, at the size it was in the envelope,
opening out into the page. */
.reveal {
position: relative;
min-height: 100svh;
display: flex;
flex-direction: column;
justify-content: center;
padding: 7rem var(--gutter) 5rem;
overflow: hidden;
}
/* The A6 frame. 30 × 42 in a 100 × 100 box is the proportion of the card. */
.reveal__frame {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
color: var(--ivory);
opacity: .5;
}
.js .reveal__frame rect {
animation: card-open 1200ms 250ms var(--ease) forwards;
}
@keyframes card-open {
from { x: 35; y: 29; width: 30; height: 42; opacity: .55; }
to { x: 0; y: 0; width: 100; height: 100; opacity: 0; }
}
/* No max-width here. `ch` on a wrapper resolves against the wrapper's own
16px font, not the 112px headline inside it, which throttles the headline
to a fraction of the width it should have. Measure is set on the type. */
.reveal__inner {
position: relative;
z-index: 1;
}
.reveal__eyebrow { margin-bottom: 1.6rem; color: var(--tan); }
/* The line breaks in this headline are art direction, not accident, so the
balancer is switched off here and the