/* ==========================================================================
Utopany - apartment move-in commerce
THE THEME IS THE MARKETING PAGE'S. This file deliberately mirrors
apps/landing-page-astro/src/styles/global.css rather than inventing a palette.
Two apps share one hostname, so a visitor who follows utopany.com/ into the shop
must not feel they have landed somewhere else. Same lime, same navy, same
signature, same type scale - copied rather than approximated, because
"approximately the same lime" is exactly how two products end up looking like
two products.
## The signature
A chunky 3px outline meeting a tight 4px radius. The two together are what stop
this reading as another rounded soft-SaaS card grid. `--border-chunky` and
`--radius-btn` are tokens rather than literals for the same reason the landing
page makes them tokens.
## Hard shadows, never soft ones
`6px 6px 0` in navy, offset to the bottom-right. A blurred shadow on a 3px border
looks like a rendering bug; a hard offset shadow looks like a decision.
## No dark mode
The marketing page is light-only, deliberately. An app that follows it must too -
and a site that flips to grey while its own marketing page does not reads as
broken rather than considered.
## Type scale
The same fluid `clamp()` steps as `--text-h1`..`--text-h5` in global.css. Page
titles use the h2/h3 steps rather than h1: the landing page has exactly one h1
(the hero), and 44px is right for a marketing hero and wrong for a product name.
The weight, colour and tracking are identical at every step.
## No build step
Served as a static asset, so no page view invokes the Worker. That is why the
layout system is custom properties and a grid rather than utility classes, and
why the component classes below are written out rather than composed per element.
========================================================================== */
/* The webfont faces are inlined in the page head from `views/font-faces.ts`, which
`scripts/vendor-be-vietnam-pro.ps1` generates. They are deliberately neither an
`@import` here nor a sibling to a stylesheet: an `@import` in a
render-blocking stylesheet is not free, and a second made a file that cannot
paint on its own render-blocking while also delaying the discovery of the woff2 URLs
to a second hop. See the module's own comment. */
/* --- Metric-matched fallback ------------------------------------------------
The face used for the few hundred milliseconds before Be Vietnam Pro arrives.
## Why this exists
Lighthouse reported a layout shift on `h1.hero-title` with all five woff2 files
listed as the culprits. The cause is *re-wrapping*, not a height change: this
stylesheet sets `line-height` as a unitless number (1.6 on body, 1.18 on
headings), so the line box is `1.18 x font-size` no matter which font is
loaded and cannot change on swap. What does change is how many lines the
sentence needs, because Be Vietnam Pro is much wider than Arial.
## Why size-adjust is derived from width, not x-height
Matching x-height (the usual advice, and what `next/font` does by default) would
give 102.21%. That makes the fallback *look* the right size while being ~11% too
narrow, so it breaks the same paragraph at different points and the block still
gains or loses a line - the shift survives. Measured over lowercase plus space:
Be Vietnam Pro 400 average advance 55.204% of em
Arial average advance 48.555% of em
which is 113.69%. At that value the fallback wraps where the webfont wraps, so
the line count holds and there is nothing to shift. The trade is that the
fallback's glyphs read ~14% larger during that window. A brief size difference
is far less visible than a paragraph jumping.
## Why ascent/descent are divided by size-adjust
Because the overrides are percentages of the *adjusted* em. Compensating for the
scale keeps the resulting line box exactly 126.50% of em - the webfont's own
asc+desc+gap - so nothing about the box moves. One face per weight because the
webfont's advance widths differ per weight; the 700 face carries 700 and 800.
Regenerate with the numbers printed by the metric script if the typeface or its
versions ever change. */
@font-face {
font-family: 'Be Vietnam Pro Fallback';
font-style: normal;
font-weight: 400;
src: local('Arial'), local('Helvetica'), local('Liberation Sans');
size-adjust: 113.69%;
ascent-override: 87.96%;
descent-override: 23.31%;
line-gap-override: 0%;
}
@font-face {
font-family: 'Be Vietnam Pro Fallback';
font-style: normal;
font-weight: 700;
src: local('Arial'), local('Helvetica'), local('Liberation Sans');
size-adjust: 118.13%;
ascent-override: 84.65%;
descent-override: 22.43%;
line-gap-override: 0%;
}
@font-face {
font-family: 'Be Vietnam Pro Fallback';
font-style: normal;
font-weight: 800;
src: local('Arial'), local('Helvetica'), local('Liberation Sans');
size-adjust: 119.58%;
ascent-override: 83.63%;
descent-override: 22.16%;
line-gap-override: 0%;
}
/* --- Tokens --------------------------------------------------------------
Copied from global.css's @theme block. Same names, same values, so a change
to the brand is one edit in two places rather than a design review.
------------------------------------------------------------------------- */
:root {
/* Primary: lime. Text on it must be navy, never white - #fff on #c2d500 is
about 1.6:1 and fails WCAG AA outright. */
--primary: #c2d500;
--primary-hover: #e2f600;
--primary-medium: #eaff00;
--primary-semi-light: #f0ff4d;
--primary-light: #f9ffb3;
--primary-semi-dark: #a4b300;
--primary-dark: #758000;
/* Secondary: cyan. Navy text on it, not white: #fff on #00b1dd is ~2.3:1. */
--secondary: #00b1dd;
--secondary-hover: #00cafc;
--secondary-semi-light: #4ddbff;
--secondary-light: #b3f0ff;
--secondary-semi-dark: #008fb3;
--secondary-dark: #006680;
/* Base: navy. Carries headings, footer, full-bleed sections. */
--navy: #093756;
--navy-hover: #0b4165;
--navy-dark: #051e2e;
--navy-semi-dark: #1168a2;
--navy-medium: #1894e7;
--navy-semi-light: #5db4ee;
--navy-light: #badff8;
/* Neutrals */
--ink: #0b1c2a;
--body: #4c5761;
--mist: #efedf4;
--white: #fff;
/* Accent rotation. A single hue would flatten the difference between two
adjacent room tiles, which is the same reason the marketing page rotates
them across its feature cards. */
--accent-orange: #f37424;
--accent-amber: #f8aa1f;
--accent-magenta: #e8138b;
--accent-blue: #146ff8;
--accent-teal: #3cbcac;
--accent-red: #d92638;
/* Darkened counterparts, for anything *read* rather than filled in. These
clear 4.5:1 on --mist, the stricter of the two light backgrounds, so one
token works on both. Derived by scripts/derive-contrast.mjs in the landing
page, not picked by eye. */
--accent-cyan-dark: #007693;
--accent-orange-dark: #ab5119;
--accent-magenta-dark: #ce117b;
--accent-teal-dark: #26786e;
--accent-blue-dark: #1265e2;
--accent-amber-dark: #916312;
/* Lightened counterpart for step numbers on the navy band. Magenta is the
one vivid hue that fails there at 2.89:1; this reaches 4.52:1. */
--accent-pink: #f16eb8;
/* The signature. */
--radius-btn: 0.25em;
--border-chunky: 3px;
--spacing-btn-x: 2em;
--spacing-btn-y: 0.75em;
/* Section rhythm, from the marketing page's `py-20 sm:py-28`. */
--pad-section: 5rem;
--pad-section-lg: 7rem;
/* Container: `max-w-6xl` with `px-4 sm:px-6 lg:px-8`. */
--wrap: 72rem;
--gutter: 1rem;
/* One height for every interactive control that sits beside another one.
*
* A quantity input and the button beside it are two halves of one control, and
* they were 12px apart because they differ in *two* properties rather than one:
* the input is 1rem/line-height 1.6 (25.6px of text) while the button is
* 0.875rem/line-height 1 (14px), on identical padding and border.
*
* Matching them by lowering the input's font size is not an option - iOS Safari
* zooms the page on focus below 16px, so a 14px input means a shopper ends up
* zoomed in mid-checkout. So both get an explicit height instead, which is also
* a better touch target than either was.
*
* 2.75rem / 44px, the same figure the marketing page uses for its nav toggle.
*/
/* The sticky header's rendered height, measured at a 390px viewport (83px). Used to
keep scroll-into-view clear of it - see the `scroll-margin-top` rule. Only an
approximation of the real height: the header wraps on narrow screens, so this is
the common case rather than a guaranteed fit. */
--header-h: 5.2rem;
--control-h: 2.75rem;
/* The large control's height, for the product page's quantity + add-to-cart pair.
* 16px text at line-height 1, plus 1rem padding and the 3px border, is 54px. */
--control-h-lg: 3.375rem;
/* The hard shadow, used where the marketing page uses
`shadow-[6px_6px_0_var(--color-navy)]`. */
--shadow-hard: 6px 6px 0 var(--navy);
--shadow-hard-sm: 4px 4px 0 var(--navy);
}
@media (min-width: 40rem) {
:root {
--gutter: 1.5rem;
}
}
@media (min-width: 64rem) {
:root {
--gutter: 2rem;
--pad-section: var(--pad-section-lg);
}
}
/* --- Reset --------------------------------------------------------------- */
*,
*::before,
*::after {
box-sizing: border-box;
}
* {
margin: 0;
}
html {
-webkit-text-size-adjust: 100%;
}
body {
background: var(--white);
color: var(--body);
font-family:
'Be Vietnam Pro',
'Be Vietnam Pro Fallback',
ui-sans-serif,
system-ui,
-apple-system,
'Segoe UI',
sans-serif;
font-weight: 400;
/* Vietnamese renders taller than Latin at the same size, so this is a little
above the usual 1.5. Stacked tone marks need the room. */
line-height: 1.6;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img,
svg {
display: block;
max-width: 100%;
}
input,
button,
textarea,
select {
font: inherit;
color: inherit;
}
/* --- Typography ----------------------------------------------------------
The same fluid steps as global.css's `--text-h1`..`--text-h5`. A heading is the
same visual weight on a phone and on a 27" display without six breakpoints.
------------------------------------------------------------------------- */
/* --- Typography ----------------------------------------------------------
The same fluid steps as global.css's `--text-h1`..`--text-h5`. A heading is the
same visual weight on a phone and on a 27" display.
## Weight 800, not the marketing page's 900
Deliberate divergence, for a font reason rather than a brand one. The marketing
page uses 900 because Lato has no 800, so headings jump 700 -> 900 - Black, the
heaviest weight available. On Latin that is fine; on Vietnamese it is the worst
case, because the stacked marks on â êậ ệ and the horns on ơ ư fill in at Black
and collide with the lines either side. Be Vietnam Pro ships a true 800, so a
heading can be emphatic without being solid.
## Line-height 1.18, not the marketing page's 1.05
The other half of the fix, and the bigger one. 1.05 was tuned for Latin and is
too tight for Vietnamese: measured on this page's hero it gave a 58.7px heading a
61.6px line box, which is about 1.5px of clearance for a two-tier stack of
diacritics. 1.18 is the smallest value where the marks on `nhận` and `hoàn` stop
reading as crowded.
Both are visible in font-specimen.html, which renders the proposition in six
families at 1.05 and 1.18 side by side.
------------------------------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
color: var(--navy);
font-weight: 800;
line-height: 1.18;
letter-spacing: -0.02em;
}
.text-h1 {
font-size: clamp(2.7648rem, 1.88444vw + 2.16178rem, 4.8rem);
}
.text-h2 {
font-size: clamp(2.304rem, 0.828148vw + 2.03899rem, 3.19rem);
}
.text-h3 {
font-size: clamp(1.92rem, 0.443889vw + 1.77796rem, 2.3994rem);
}
.text-h4 {
font-size: clamp(1.6rem, 0.185185vw + 1.54074rem, 1.8rem);
}
.text-h5 {
font-size: 1.2rem;
}
/* Hero uses the full h1 step; every other page uses h2/h3 for its title. */
.hero-title {
font-size: clamp(2.7648rem, 1.88444vw + 2.16178rem, 4.8rem);
}
.page-title {
font-size: clamp(1.92rem, 0.443889vw + 1.77796rem, 2.3994rem);
}
.section-title {
font-size: clamp(1.6rem, 0.185185vw + 1.54074rem, 1.8rem);
}
p {
text-wrap: pretty;
}
a {
color: var(--navy);
text-underline-offset: 2px;
text-decoration-thickness: 1px;
}
a:hover {
text-decoration-thickness: 2px;
}
/* Visible focus ring, and it has to be visible: with a palette this saturated a
lime button on white is otherwise indistinguishable from its hover state. Cyan,
because lime on white is the button's own fill and reads as nothing. */
:focus-visible {
outline: 3px solid var(--secondary);
outline-offset: 3px;
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.skip {
position: absolute;
top: 1rem;
left: 1rem;
z-index: 100;
padding: 0.5rem 1rem;
background: var(--navy);
color: var(--primary);
border-radius: var(--radius-btn);
text-decoration: none;
font-weight: 700;
transform: translateY(-200%);
}
.skip:focus {
transform: translateY(0);
}
/* --- Layout -------------------------------------------------------------- */
.wrap {
width: 100%;
max-width: var(--wrap);
margin-inline: auto;
padding-inline: var(--gutter);
}
.section {
padding-block: var(--pad-section);
}
.section-alt {
background: var(--mist);
/* The 3px rule is what separates two white sections without a gap. */
border-top: var(--border-chunky) solid var(--navy);
}
.page-plain .section {
padding-block: 0;
}
.section-head {
display: flex;
flex-wrap: wrap;
align-items: end;
justify-content: space-between;
gap: var(--s3, 0.75rem);
margin-bottom: 2rem;
}
.section-lede {
margin-top: 0.75rem;
max-width: 42rem;
color: var(--body);
}
.section-cta {
margin-top: 2.5rem;
text-align: center;
}
.section-foot {
margin-top: 1.5rem;
font-size: 0.875rem;
}
.section-band {
margin-top: var(--pad-section);
padding: 3rem;
background: var(--navy);
color: #fff;
border-radius: var(--radius-btn);
text-align: center;
}
.section-band .section-title {
color: #fff;
}
.section-band .section-lede {
margin: 0.75rem auto 1.5rem;
color: var(--navy-light);
max-width: 34rem;
}
/* --- Header --------------------------------------------------------------
Mirrors the marketing page's `sticky top-0 z-40 border-b-[3px] border-navy
bg-white/90 backdrop-blur` with an `h-20` bar.
------------------------------------------------------------------------- */
.site-header {
position: sticky;
top: 0;
z-index: 40;
background: rgb(255 255 255 / 0.9);
border-bottom: var(--border-chunky) solid var(--navy);
}
/* The header is sticky, so any "scroll it into view" - the browser focusing a
control, an anchor jump, a test driver positioning an element - puts the target
directly underneath it. Measured at a 390px viewport: the header is 83px tall and
all five wizard radios sat under it once focused, so a keyboard user tabbing to an
option could see neither the control nor the selection they had just made, and a
tap aimed at it landed on the nav instead.
*
* `scroll-margin-top` reserves the header's height above the target. Deliberately not
* gated on `:focus` - this property only affects scroll-into-view, so leaving it on
always costs nothing and also covers anchor jumps and test drivers.
*/
:is(a, button, input, select, textarea, [tabindex], .choice) {
scroll-margin-top: calc(var(--header-h) + 0.75rem);
}
@supports (backdrop-filter: blur(8px)) {
.site-header {
background: rgb(255 255 255 / 0.9);
backdrop-filter: blur(8px);
}
}
.header-inner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
min-height: 5rem;
padding-inline: var(--gutter);
}
.brand {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 1.125rem;
font-weight: 800;
letter-spacing: -0.02em;
color: var(--navy);
text-decoration: none;
}
.brand-mark {
display: grid;
place-items: center;
width: 2rem;
height: 2rem;
background: var(--primary);
border-radius: var(--radius-btn);
font-size: 1rem;
line-height: 1;
}
.nav-toggle {
display: grid;
place-items: center;
width: 2.75rem;
height: 2.75rem;
background: none;
border: var(--border-chunky) solid var(--navy);
border-radius: var(--radius-btn);
cursor: pointer;
}
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
display: block;
width: 18px;
height: 2px;
background: var(--navy);
content: '';
}
.nav-toggle-bars {
position: relative;
}
.nav-toggle-bars::before {
position: absolute;
top: -6px;
}
.nav-toggle-bars::after {
position: absolute;
top: 6px;
}
/* Collapsed on a phone, a row from `sm`. The `hidden` attribute set by the inline
script is what actually hides it, so CSS alone never shows a nav that JavaScript
has closed. */
.site-nav {
display: none;
flex-basis: 100%;
flex-direction: column;
gap: 0.5rem;
padding-block: 1rem;
}
.site-nav:not([hidden]) {
display: flex;
}
@media (min-width: 56rem) {
.nav-toggle {
display: none;
}
.site-nav {
display: flex;
flex-basis: auto;
flex-direction: row;
align-items: center;
gap: 1.5rem;
}
}
.nav-link {
color: var(--navy);
text-decoration: none;
font-weight: 700;
transition: color 0.15s ease;
white-space: nowrap;
}
.nav-link:hover {
color: var(--accent-cyan-dark);
}
.nav-link.is-current {
color: var(--secondary-dark);
}
/* `min-width: 0` overrides the base button's 14rem, and the tighter padding is the
marketing page's `min-w-0 px-5 py-2.5 text-sm` header CTA. A 14rem button does not
fit a header beside four links. */
.nav-cta {
min-width: 0;
padding: 0.625rem 1.25rem;
font-size: 0.875rem;
}
/* Ghost, not lime. The header has exactly one filled button - the wizard CTA, which
is the one thing worth sending a visitor to. A second filled button beside it says
"these two matter equally", and the cart is not equal to the wizard. The count
badge is what makes an empty cart still worth clicking. */
.nav-cart {
display: inline-flex;
align-items: center;
gap: 0.5rem;
min-width: 0;
padding: 0.625rem 1.25rem;
background: transparent;
border: var(--border-chunky) solid var(--navy);
border-radius: var(--radius-btn);
color: var(--navy);
font-size: 0.875rem;
font-weight: 700;
line-height: 1;
text-decoration: none;
white-space: nowrap;
}
.nav-cart:hover {
background: var(--navy);
color: var(--primary);
}
.cart-count {
display: grid;
place-items: center;
min-width: 1.4rem;
height: 1.4rem;
padding-inline: 0.3rem;
background: var(--primary);
border: var(--border-chunky) solid var(--navy);
border-radius: var(--radius-btn);
font-size: 0.75rem;
font-weight: 800;
color: var(--navy-dark);
}
/* --- Buttons -------------------------------------------------------------
Byte-for-byte the marketing page's `.btn` block. `min-width: 14rem` is the
part that looks wrong until you see it: it is what makes a column of CTAs
line up as a column rather than as ragged text.
------------------------------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
min-width: 14rem;
padding: var(--spacing-btn-y) var(--spacing-btn-x);
border: var(--border-chunky) solid transparent;
border-radius: var(--radius-btn);
font-weight: 700;
line-height: 1;
text-align: center;
text-decoration: none;
cursor: pointer;
transition:
background-color 0.15s ease,
color 0.15s ease,
border-color 0.15s ease;
}
.btn-primary {
background: var(--primary);
border-color: var(--primary);
color: var(--navy-dark);
}
.btn-primary:hover {
background: var(--primary-hover);
border-color: var(--primary-hover);
}
.btn-secondary {
background: var(--secondary);
border-color: var(--secondary);
color: var(--navy-dark);
}
.btn-secondary:hover {
background: var(--secondary-hover);
border-color: var(--secondary-hover);
}
/* Outlined on light backgrounds. */
.btn-ghost {
background: transparent;
border-color: var(--navy);
color: var(--navy);
}
.btn-ghost:hover {
background: var(--navy);
color: var(--primary);
}
/* Outlined on navy. The border is cyan rather than white, because white-on-navy
is what the button is already saying and a white outline reads as an artefact.
The dark sections are in this selector list rather than carrying their own copy of
these four declarations, and rather than relying on each call site remembering to
swap `btn-ghost` for `btn-ghost-light`. Two call sites did not: `home.ts` put a
`btn-ghost` in `.closing` (navy on navy-dark, 1.37:1) and `routes/packages.ts` put
one in `.package-foot-cta` (navy on navy, 1.00:1 - text the same colour as its
background). Both were invisible, and both were invisible *because* the class was
written for a light background and the section around it was dark. Listing the
sections here makes that impossible rather than merely fixed. */
.btn-ghost-light,
.closing .btn-ghost,
.product-cta-band .btn-ghost,
.package-foot-cta .btn-ghost {
background: transparent;
border-color: var(--secondary-semi-light);
color: #fff;
}
.btn-ghost-light:hover,
.closing .btn-ghost:hover,
.product-cta-band .btn-ghost:hover,
.package-foot-cta .btn-ghost:hover {
background: var(--secondary-semi-light);
border-color: var(--secondary-semi-light);
color: var(--navy-dark);
}
/* Explicit height, so this lines up with the input beside it. See `--control-h`. */
.btn-sm {
min-width: 0;
height: var(--control-h);
padding: 0.5rem 1rem;
font-size: 0.875rem;
}
.btn-lg {
height: var(--control-h-lg);
padding: 1rem 2.5rem;
}
.btn-block {
display: flex;
width: 100%;
}
/* Already added, or a room fully in the cart. Lime-tinted rather than lime, so a
row of confirmed states does not shout louder than the primary action. */
.btn-done {
background: var(--primary-light);
border-color: var(--primary-dark);
color: var(--navy-dark);
}
.link-arrow {
color: var(--navy);
font-weight: 700;
white-space: nowrap;
}
.link-arrow:hover {
color: var(--accent-cyan-dark);
}
/* --- Hero ----------------------------------------------------------------
The marketing page's hero, on the shop's proposition.
------------------------------------------------------------------------- */
.hero {
padding-block: var(--pad-section) var(--pad-section-lg);
text-align: center;
}
.hero-inner {
max-width: 56rem;
margin-inline: auto;
}
.hero-eyebrow {
display: inline-block;
padding: 0.5rem 1rem;
background: var(--white);
border: var(--border-chunky) solid var(--navy);
border-radius: var(--radius-btn);
font-size: 0.75rem;
font-weight: 800;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--navy);
}
.hero-title {
margin-block: 2rem;
color: var(--navy);
}
.hero-lede {
max-width: 44rem;
margin-inline: auto;
font-size: 1.125rem;
}
.hero-actions {
display: flex;
flex-direction: column;
gap: 1rem;
margin-top: 2.5rem;
}
@media (min-width: 40rem) {
.hero-actions {
flex-direction: row;
justify-content: center;
}
}
.hero-note {
margin-top: 1rem;
font-size: 0.875rem;
}
/* --- Stats ---------------------------------------------------------------
The shop's own section - the marketing page has no equivalent - built from the
same parts: a navy band and lime numerals.
------------------------------------------------------------------------- */
.stats {
padding-block: 2.5rem;
background: var(--navy);
border-top: var(--border-chunky) solid var(--navy);
color: #fff;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
text-align: center;
}
@media (min-width: 48rem) {
.stats-grid {
grid-template-columns: repeat(4, 1fr);
}
}
.stat-value {
font-size: clamp(1.5rem, 4vw, 2rem);
font-weight: 800;
color: var(--primary);
line-height: 1.1;
}
.stat-label {
font-size: 0.875rem;
color: var(--navy-light);
}
/* --- Steps ---------------------------------------------------------------
`HowItWorks` on the marketing page, copied: a navy band, a 3px translucent rule
above each step, and a lime numeral.
The band is not decoration - it is what the step colours are designed for. An
earlier version of this file had the same step styles over a white section, where
`#fff` titles on white measured 1:1 and simply disappeared. Light-on-dark is how
the marketing page does it, and the only way to have both is the navy band.
------------------------------------------------------------------------- */
.steps-band {
background: var(--navy);
color: #fff;
}
.steps-band .section-title {
color: #fff;
}
.steps-band .section-lede {
color: var(--navy-light);
}
.steps {
display: grid;
gap: 2.5rem;
padding: 0;
margin: 0;
list-style: none;
}
@media (min-width: 48rem) {
.steps {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 64rem) {
.steps {
grid-template-columns: repeat(4, 1fr);
}
}
.step {
position: relative;
padding-top: 1.5rem;
border-top: var(--border-chunky) solid rgb(186 223 248 / 0.3);
color: #fff;
}
.step-num {
display: block;
margin-bottom: 0.75rem;
font-size: 2.25rem;
font-weight: 800;
line-height: 1;
color: var(--primary);
}
.step-title {
color: #fff;
font-size: var(--text-h5, 1.2rem);
font-weight: 800;
}
.step-body {
margin-top: 0.5rem;
font-size: 0.9rem;
color: rgb(186 223 248 / 0.8);
}
/* --- Cards ---------------------------------------------------------------
The `Features` card: 3px navy, 4px radius, and a full invert on hover. The
invert is the part that carries the energy - a card that only changes its
border colour on hover is a card you can miss.
------------------------------------------------------------------------- */
.card,
.product-card,
.room-tile,
.package-tile,
.package-card {
background: var(--white);
border: var(--border-chunky) solid var(--navy);
border-radius: var(--radius-btn);
transition:
background-color 0.15s ease,
color 0.15s ease;
}
.product-card:hover,
.room-tile:hover,
.package-tile:hover {
background: var(--navy);
}
.product-grid {
display: grid;
gap: 1.5rem;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
}
.product-card {
display: flex;
flex-direction: column;
overflow: hidden;
}
.product-media {
position: relative;
display: grid;
place-items: center;
aspect-ratio: 4 / 3;
background: var(--mist);
border-bottom: var(--border-chunky) solid var(--navy);
}
.product-glyph {
font-size: 3.5rem;
line-height: 1;
}
.product-badge {
position: absolute;
top: 0.5rem;
left: 0.5rem;
padding: 0.25rem 0.5rem;
background: var(--primary);
border: var(--border-chunky) solid var(--navy);
border-radius: var(--radius-btn);
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.03em;
text-transform: uppercase;
}
.product-body {
display: flex;
flex-direction: column;
gap: 0.5rem;
padding: 1.5rem;
flex: 1;
}
.product-eyebrow {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
font-size: 0.75rem;
font-weight: 700;
}
.product-eyebrow a {
color: var(--accent-cyan-dark);
text-decoration: none;
}
.product-eyebrow a:hover {
text-decoration: underline;
}
.dot {
color: var(--navy-light);
}
.product-card:hover .product-eyebrow a {
color: var(--secondary-semi-light);
}
.product-title {
font-size: 1rem;
font-weight: 800;
line-height: 1.35;
letter-spacing: -0.02em;
}
.product-title a {
color: var(--navy);
text-decoration: none;
}
.product-card:hover .product-title a,
.product-card:hover .product-brand,
.product-card:hover .product-desc {
color: var(--navy-light);
}
.product-brand,
.product-desc {
font-size: 0.85rem;
color: var(--body);
}
.product-desc {
font-size: 0.875rem;
}
.product-foot {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
margin-top: auto;
padding-top: 0.5rem;
}
.product-price {
font-size: 1.1rem;
font-weight: 800;
color: var(--navy);
}
.product-card:hover .product-price {
color: var(--primary);
}
.rating {
display: inline-flex;
align-items: center;
gap: 0.25rem;
font-size: 0.85rem;
font-weight: 700;
color: var(--accent-amber-dark);
letter-spacing: 0.05em;
}
.rating-count {
color: var(--body);
font-weight: 400;
letter-spacing: 0;
}
.product-card:hover .rating-count {
color: var(--navy-light);
}
.product-in-cart {
font-size: 0.8rem;
font-weight: 800;
color: var(--accent-teal-dark);
}
/* --- Room and category tiles -------------------------------------------- */
.room-grid {
display: grid;
gap: 1rem;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
}
.room-tile {
display: flex;
flex-direction: column;
gap: 0.25rem;
padding: 1.5rem;
color: var(--body);
text-decoration: none;
}
.room-tile-link {
display: flex;
flex-direction: column;
gap: 0.25rem;
height: 100%;
color: inherit;
text-decoration: none;
}
.room-glyph {
font-size: 1.9rem;
line-height: 1.2;
}
.room-name {
font-size: 1.05rem;
font-weight: 800;
color: var(--navy);
}
.room-blurb {
font-size: 0.9rem;
}
.room-count {
margin-top: auto;
padding-top: 0.5rem;
font-size: 0.8rem;
font-weight: 700;
color: var(--accent-cyan-dark);
}
.room-tile:hover .room-name,
.room-tile:hover .room-count,
.room-tile:hover .room-blurb {
color: var(--navy-light);
}
.room-tile:hover .room-count {
color: var(--primary);
}
.category-list {
display: grid;
gap: 0.75rem;
padding: 0;
margin: 0;
list-style: none;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
}
/* The card fills the
, and the
is what the grid equalises.
Without this the grid stretched the