/* ============================================================================ VERSO — SITE STYLES ---------------------------------------------------------------------------- One stylesheet for the whole site. Ordered: 01 Design tokens (colours, type, spacing) << edit colours here 02 Reset and base elements 03 Layout helpers 04 Typography 05 Buttons and links 06 Announcement bar, header and navigation 07 Hero 08 Section furniture 09 Product cards and grids 10 Categories 11 How it works 12 Spotlight 13 Testimonials 14 Email signup 15 FAQ and accordions 16 Footer 17 Shop page 18 Product page 19 Forms and contact 20 Prose pages (policies, about) 21 Thank-you and 404 22 Utilities 23 Responsive breakpoints 24 Reduced motion and print Brand system: Verso. Monochrome, square corners, hairline borders, no drop shadows, no gradients, no accent hue. ========================================================================= */ /* ============================================================================ 01 DESIGN TOKENS ---------------------------------------------------------------------------- TO CHANGE THE BRAND COLOURS, edit the four values in "Palette" below. Everything else on the site refers to them, so nothing else needs touching. ========================================================================= */ :root { /* --- Palette (the whole brand is these four values) --- */ --color-onyx: #2F2F2F; /* Primary — dark surfaces, primary buttons */ --color-chalk: #E8E8E8; /* Secondary — page background, type on dark */ --color-ink: #000000; /* Text — headings on light, button hover */ --color-ash: #9C9C9C; /* Accent — hairlines, eyebrow labels only */ /* --- Semantic aliases (use these in rules, not the raw palette) --- */ --bg-page: var(--color-chalk); --bg-dark: var(--color-onyx); --surface: var(--color-chalk); --text-primary: var(--color-ink); --text-body: var(--color-onyx); /* body copy on light: never Ash */ --text-muted: #6A6A6A; /* Onyx lightened for fine print */ --text-on-dark: var(--color-chalk); --text-muted-on-dark: var(--color-ash); --hairline: var(--color-ash); --hairline-strong: var(--color-onyx); /* --- Type families --- Poppins is loaded from Google Fonts in the of every page. To change the fonts, swap the Google Fonts link and these two lines. */ --font-display: 'Poppins', 'Helvetica Neue', Helvetica, Arial, sans-serif; --font-body: 'Poppins', 'Helvetica Neue', Helvetica, Arial, sans-serif; /* --- Heading case --- The Verso brand system sets hero and section headings in uppercase. This site uses sentence case for readability. Change the value below to "uppercase" if you want the full brand treatment back. */ --heading-case: none; --button-case: none; --button-tracking: 0.01em; /* --- Type scale --- */ --type-display: clamp(2.5rem, 5.4vw, 4rem); /* 40 - 64px */ --type-h1: clamp(2.125rem, 4.4vw, 3rem); /* 34 - 48px */ --type-h2: clamp(1.625rem, 2.9vw, 2rem); /* 26 - 32px */ --type-h3: 1.25rem; /* 20px */ --type-h4: 1rem; /* 16px */ --type-body-lg: 1.0625rem; /* 17px */ --type-body: 0.9375rem; /* 15px */ --type-small: 0.8125rem; /* 13px */ --type-eyebrow: 0.6875rem; /* 11px */ --lh-display: 1.04; --lh-heading: 1.15; --lh-body: 1.65; --tracking-eyebrow: 0.16em; /* --- Spacing scale (4, 8, 12, 16, 24, 40, 64, 96) --- */ --space-2xs: 0.25rem; --space-xs: 0.5rem; --space-sm: 0.75rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2.5rem; --space-2xl: 4rem; --space-3xl: 6rem; --section-padding: 6rem; /* 96px, reduced on small screens */ --card-padding: 2.5rem; /* 40px */ --grid-gutter: 1.5rem; /* 24px */ --max-width: 1200px; --max-width-prose: 68ch; /* --- Shape --- */ --radius: 0; /* Square corners. Brand non-negotiable. */ --border: 1px solid var(--hairline); --border-dark: 1px solid rgba(232, 232, 232, 0.28); /* --- Motion (kept minimal on purpose) --- */ --transition: 150ms ease; /* --- Focus ring --- */ --focus-width: 2px; --focus-offset: 3px; } /* ============================================================================ 02 RESET AND BASE ========================================================================= */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--bg-page); color: var(--text-body); font-family: var(--font-body); font-size: var(--type-body-lg); line-height: var(--lh-body); font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg, video { max-width: 100%; height: auto; display: block; } /* Images inside fixed-ratio frames must fill them without changing the frame. */ .media-frame img, .media-frame svg { width: 100%; height: 100%; object-fit: cover; } ul, ol { margin: 0; padding: 0; } li { list-style: none; } hr { border: 0; border-top: 1px solid var(--hairline-strong); margin: var(--space-lg) 0; } /* Skip link: visible only once focused by keyboard. */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--color-onyx); color: var(--color-chalk); padding: var(--space-sm) var(--space-md); font-size: var(--type-small); text-decoration: none; } .skip-link:focus { left: var(--space-md); top: var(--space-md); } /* Visible keyboard focus everywhere. Never remove this. */ :focus-visible { outline: var(--focus-width) solid var(--color-ink); outline-offset: var(--focus-offset); } .section--dark :focus-visible, .site-footer :focus-visible, .announcement :focus-visible { outline-color: var(--color-chalk); } /* Screen-reader-only text. */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* ============================================================================ 03 LAYOUT HELPERS ========================================================================= */ .container { width: 100%; max-width: var(--max-width); margin-inline: auto; padding-inline: var(--space-lg); } .container--narrow { max-width: 860px; } .section { padding-block: var(--section-padding); border-top: 1px solid var(--hairline); } .section--flush { border-top: 0; } .section--dark { background: var(--bg-dark); color: var(--text-on-dark); border-top: 0; } .section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--text-on-dark); } .grid { display: grid; gap: var(--grid-gutter); } .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .stack > * + * { margin-top: var(--space-md); } .stack-lg > * + * { margin-top: var(--space-lg); } /* ============================================================================ 04 TYPOGRAPHY ========================================================================= */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); color: var(--text-primary); margin: 0; text-wrap: balance; } .display { font-size: var(--type-display); font-weight: 800; line-height: var(--lh-display); letter-spacing: -0.015em; text-transform: var(--heading-case); } h1, .h1 { font-size: var(--type-h1); font-weight: 800; line-height: var(--lh-heading); letter-spacing: -0.01em; text-transform: var(--heading-case); } h2, .h2 { font-size: var(--type-h2); font-weight: 700; line-height: var(--lh-heading); letter-spacing: -0.005em; text-transform: var(--heading-case); } h3, .h3 { font-size: var(--type-h3); font-weight: 700; line-height: 1.3; } h4, .h4 { font-size: var(--type-h4); font-weight: 700; line-height: 1.4; } p { margin: 0; } p + p { margin-top: var(--space-md); } .eyebrow { font-family: var(--font-body); font-size: var(--type-eyebrow); font-weight: 400; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-muted); margin: 0 0 var(--space-md); display: block; } .section--dark .eyebrow, .site-footer .eyebrow { color: var(--text-muted-on-dark); } .lead { font-size: 1.1875rem; line-height: 1.6; color: var(--text-body); max-width: 56ch; } .section--dark .lead { color: var(--text-on-dark); } .body-sm { font-size: var(--type-body); line-height: 1.6; } .fine-print { font-size: var(--type-small); line-height: 1.6; color: var(--text-muted); } .section--dark .fine-print, .site-footer .fine-print { color: var(--text-muted-on-dark); } /* The signature Verso device: a short rule under a heading. */ .rule { width: 60px; height: 1px; background: var(--hairline-strong); border: 0; margin: var(--space-lg) 0 0; } .section--dark .rule { background: var(--color-ash); } /* ============================================================================ 05 BUTTONS AND LINKS ========================================================================= */ a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--transition); } a:hover { color: var(--color-ash); } .text-link { color: var(--text-primary); text-decoration: underline; text-underline-offset: 3px; font-weight: 500; } .section--dark .text-link { color: var(--text-on-dark); } /* Arrow link, used for "view all" style navigation. */ .arrow-link { display: inline-flex; align-items: center; gap: var(--space-xs); font-size: var(--type-body); font-weight: 500; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; color: var(--text-primary); } .section--dark .arrow-link { color: var(--text-on-dark); } .arrow-link svg { flex: none; transition: transform var(--transition); } .arrow-link:hover svg { transform: translateX(3px); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); font-family: var(--font-body); font-size: var(--type-body); font-weight: 500; letter-spacing: var(--button-tracking); text-transform: var(--button-case); text-decoration: none; text-align: center; border: 1px solid transparent; border-radius: var(--radius); padding: 0.875rem 2rem; cursor: pointer; transition: background-color var(--transition), color var(--transition), border-color var(--transition); white-space: nowrap; line-height: 1.2; } .btn--primary { background: var(--color-onyx); border-color: var(--color-onyx); color: var(--color-chalk); } .btn--primary:hover { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-chalk); } .btn--secondary { background: transparent; border-color: var(--color-ink); color: var(--color-ink); } .btn--secondary:hover { background: var(--color-ink); color: var(--color-chalk); } /* For use on Onyx backgrounds. */ .btn--ghost { background: transparent; border-color: var(--color-chalk); color: var(--color-chalk); } .btn--ghost:hover { background: var(--color-chalk); color: var(--color-onyx); } .btn--invert { background: var(--color-chalk); border-color: var(--color-chalk); color: var(--color-onyx); } .btn--invert:hover { background: var(--color-ash); border-color: var(--color-ash); color: var(--color-ink); } .btn--block { display: flex; width: 100%; } .btn--sm { padding: 0.625rem 1.25rem; font-size: var(--type-small); } .btn--lg { padding: 1.0625rem 2.5rem; } /* ============================================================================ 06 ANNOUNCEMENT BAR, HEADER AND NAVIGATION ========================================================================= */ .announcement { background: var(--color-onyx); color: var(--color-chalk); text-align: center; font-size: var(--type-small); line-height: 1.4; padding: 0.6875rem var(--space-lg); } .announcement p { margin: 0; } .announcement a { color: var(--color-chalk); text-decoration: underline; text-underline-offset: 3px; } .announcement a:hover { color: var(--color-ash); } .site-header { position: sticky; top: 0; z-index: 100; background: var(--bg-page); border-bottom: 1px solid var(--hairline); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: 76px; } /* The Verso wordmark is set type, so it is rendered as live text. To use an image logo instead, replace the contents of .wordmark in each HTML file with: Verso */ .wordmark { font-family: var(--font-display); font-size: 1.375rem; font-weight: 800; letter-spacing: 0.01em; text-transform: uppercase; text-decoration: none; color: var(--color-ink); line-height: 1; flex: none; } .wordmark:hover { color: var(--color-onyx); } .site-nav { margin-left: auto; } .site-nav__list { display: flex; align-items: center; gap: var(--space-xl); } .site-nav__link { font-size: var(--type-body); font-weight: 400; text-decoration: none; color: var(--text-body); padding-block: 0.25rem; border-bottom: 1px solid transparent; transition: border-color var(--transition), color var(--transition); } .site-nav__link:hover { color: var(--color-ink); border-bottom-color: var(--color-ink); } .site-nav__link[aria-current="page"] { color: var(--color-ink); font-weight: 500; border-bottom-color: var(--color-ink); } .header-actions { display: flex; align-items: center; gap: var(--space-md); flex: none; } /* Mobile menu toggle: hidden on desktop, shown under 900px. */ .nav-toggle { display: none; align-items: center; gap: var(--space-xs); background: transparent; border: 1px solid var(--color-ink); color: var(--color-ink); font-family: var(--font-body); font-size: var(--type-small); font-weight: 500; padding: 0.5rem 0.75rem; cursor: pointer; border-radius: var(--radius); } .nav-toggle:hover { background: var(--color-ink); color: var(--color-chalk); } .nav-toggle__icon-close { display: none; } .nav-toggle[aria-expanded="true"] .nav-toggle__icon-open { display: none; } .nav-toggle[aria-expanded="true"] .nav-toggle__icon-close { display: block; } /* Mobile drawer. Hidden with the [hidden] attribute when closed, so it stays out of the accessibility tree and out of the tab order. */ .mobile-nav { display: none; background: var(--bg-page); border-bottom: 1px solid var(--hairline); } .mobile-nav[hidden] { display: none; } .mobile-nav__list { padding-block: var(--space-md); } .mobile-nav__list li + li { border-top: 1px solid var(--hairline); } .mobile-nav__link { display: block; padding: var(--space-md) 0; font-size: 1.125rem; font-weight: 500; text-decoration: none; color: var(--text-primary); } .mobile-nav__link[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; } .mobile-nav__cta { padding-block: var(--space-md) var(--space-lg); } /* ============================================================================ 07 HERO ========================================================================= */ .hero { padding-block: clamp(3.5rem, 8vw, 7rem); border-bottom: 1px solid var(--hairline); } .hero__inner { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(2.5rem, 6vw, 5rem); align-items: center; } .hero__copy { max-width: 42ch; } .hero__title { margin-bottom: var(--space-lg); } .hero__text { max-width: 46ch; } .hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-xl); } .hero__meta { display: flex; flex-wrap: wrap; gap: var(--space-lg); margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid var(--hairline); font-size: var(--type-small); color: var(--text-muted); } .hero__meta li { display: flex; align-items: center; gap: 0.5rem; } /* Fixed ratio so nothing shifts while the image decodes. */ .hero__media { aspect-ratio: 3 / 4; border: var(--border); overflow: hidden; background: var(--color-chalk); } /* ============================================================================ 08 SECTION FURNITURE ========================================================================= */ .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-lg); margin-bottom: var(--space-xl); } .section-head__copy { max-width: 52ch; } .section-head__copy h2 + p { margin-top: var(--space-md); } .section-head__aside { flex: none; padding-bottom: 0.25rem; } /* ============================================================================ 09 PRODUCT CARDS AND GRIDS ========================================================================= */ .product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--space-xl) var(--grid-gutter); } .product-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .product-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Reserves vertical space before the JavaScript renders, so the page below the grid does not jump. */ .product-grid[data-loading="true"] { min-height: 520px; } .product-card { display: flex; flex-direction: column; background: var(--surface); border: var(--border); height: 100%; } .product-card__media { position: relative; aspect-ratio: 4 / 5; /* fixed ratio prevents layout shift */ overflow: hidden; border-bottom: var(--border); background: var(--color-chalk); } .product-card__media img { width: 100%; height: 100%; object-fit: cover; transition: opacity var(--transition); } .product-card:hover .product-card__media img { opacity: 0.88; } .product-card__badge { position: absolute; top: 0; left: 0; background: var(--color-onyx); color: var(--color-chalk); font-size: 0.625rem; font-weight: 500; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; padding: 0.4375rem 0.75rem; } .product-card__body { display: flex; flex-direction: column; flex: 1; padding: var(--space-lg); gap: var(--space-xs); } .product-card__category { font-size: var(--type-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-muted); } .product-card__title { font-size: 1.0625rem; font-weight: 700; line-height: 1.35; margin: 0; } .product-card__title a { text-decoration: none; color: var(--text-primary); } /* Makes the whole card clickable while keeping one real link for screen readers and keyboard users. */ .product-card__title a::after { content: ''; position: absolute; inset: 0; } .product-card { position: relative; } .product-card:hover { border-color: var(--color-onyx); } .product-card:focus-within { border-color: var(--color-ink); } .product-card__summary { font-size: var(--type-body); line-height: 1.55; color: var(--text-body); margin-top: var(--space-2xs); } .product-card__foot { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-sm); margin-top: auto; padding-top: var(--space-md); font-size: var(--type-body); } .product-card__price { font-weight: 700; color: var(--text-primary); } .product-card__compare { font-size: var(--type-small); color: var(--text-muted); text-decoration: line-through; margin-left: 0.4rem; font-weight: 400; } .product-card__cue { font-size: var(--type-small); color: var(--text-muted); } /* ============================================================================ 10 CATEGORIES ========================================================================= */ .category-list { border-top: 1px solid var(--hairline-strong); } .category-row { display: grid; grid-template-columns: 3.5rem minmax(0, 18rem) minmax(0, 1fr) auto; align-items: center; gap: var(--space-lg); padding-block: var(--space-lg); border-bottom: 1px solid var(--hairline); text-decoration: none; color: inherit; transition: padding-inline var(--transition); } .category-row:hover { padding-inline: var(--space-sm); color: inherit; } .category-row__index { font-size: var(--type-small); color: var(--text-muted); letter-spacing: 0.08em; } .category-row__name { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; color: var(--text-primary); } .category-row__desc { font-size: var(--type-body); color: var(--text-body); } .category-row__count { font-size: var(--type-small); color: var(--text-muted); white-space: nowrap; } /* ============================================================================ 11 HOW IT WORKS ========================================================================= */ .steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--grid-gutter); counter-reset: step; } .step { border-top: 1px solid var(--color-ash); padding-top: var(--space-lg); } .section--dark .step { border-top-color: rgba(232, 232, 232, 0.35); } .step__num { font-size: var(--type-small); letter-spacing: 0.1em; color: var(--text-muted); display: block; margin-bottom: var(--space-md); } .section--dark .step__num { color: var(--text-muted-on-dark); } .step h3 { margin-bottom: var(--space-xs); } .step p { font-size: var(--type-body); } /* ============================================================================ 12 SPOTLIGHT ========================================================================= */ .spotlight { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; } .spotlight__media { aspect-ratio: 4 / 5; border: 1px solid rgba(232, 232, 232, 0.3); overflow: hidden; } .spotlight__list { margin-top: var(--space-lg); border-top: 1px solid rgba(232, 232, 232, 0.3); } .spotlight__list li { display: flex; gap: var(--space-sm); padding-block: var(--space-sm); border-bottom: 1px solid rgba(232, 232, 232, 0.3); font-size: var(--type-body); } .spotlight__list svg { flex: none; margin-top: 0.3rem; color: var(--color-ash); } .spotlight__price { display: flex; align-items: baseline; gap: var(--space-sm); margin-top: var(--space-lg); } .spotlight__price strong { font-family: var(--font-display); font-size: 1.75rem; font-weight: 800; } .spotlight__price s { color: var(--color-ash); font-size: var(--type-body); } /* ============================================================================ 13 TESTIMONIALS ========================================================================= */ .testimonial { border-top: 1px solid var(--hairline-strong); padding-top: var(--space-lg); display: flex; flex-direction: column; height: 100%; } .testimonial__quote { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 400; line-height: 1.55; color: var(--text-primary); margin: 0 0 var(--space-lg); } .testimonial__attr { margin-top: auto; font-size: var(--type-small); color: var(--text-muted); font-style: normal; } .testimonial__attr strong { display: block; color: var(--text-body); font-weight: 500; } /* ============================================================================ 14 EMAIL SIGNUP ========================================================================= */ .signup { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; } .signup-form { display: flex; gap: var(--space-sm); flex-wrap: wrap; } .signup-form__field { flex: 1 1 16rem; } .signup-form input[type="email"] { width: 100%; background: transparent; border: 1px solid var(--color-ash); color: var(--color-chalk); font-family: var(--font-body); font-size: var(--type-body); padding: 0.875rem 1rem; border-radius: var(--radius); } .signup-form input[type="email"]::placeholder { color: var(--color-ash); } .signup-form input[type="email"]:focus { border-color: var(--color-chalk); } /* Honeypot field for spam bots. Hidden from people, visible to scripts. */ .honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* ============================================================================ 15 FAQ AND ACCORDIONS ========================================================================= */ .faq-list { border-top: 1px solid var(--hairline-strong); } .faq-item { border-bottom: 1px solid var(--hairline); } .faq-item > summary { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-lg); padding-block: var(--space-lg); cursor: pointer; font-family: var(--font-display); font-size: 1.0625rem; font-weight: 700; line-height: 1.4; color: var(--text-primary); list-style: none; } .faq-item > summary::-webkit-details-marker { display: none; } .faq-item > summary:hover { color: var(--color-onyx); } .faq-item__icon { flex: none; width: 16px; height: 16px; position: relative; margin-top: 0.4rem; } .faq-item__icon::before, .faq-item__icon::after { content: ''; position: absolute; background: currentColor; transition: transform var(--transition), opacity var(--transition); } .faq-item__icon::before { top: 7.5px; left: 0; width: 16px; height: 1.5px; } .faq-item__icon::after { left: 7.5px; top: 0; width: 1.5px; height: 16px; } .faq-item[open] .faq-item__icon::after { transform: rotate(90deg); opacity: 0; } .faq-item__answer { padding-bottom: var(--space-lg); max-width: 68ch; font-size: var(--type-body); } .faq-item__answer p + p { margin-top: var(--space-sm); } .faq-item__answer ul { margin-top: var(--space-sm); padding-left: var(--space-md); } .faq-item__answer li { list-style: disc; margin-bottom: var(--space-2xs); } /* ============================================================================ 16 FOOTER ========================================================================= */ .site-footer { background: var(--bg-dark); color: var(--text-on-dark); padding-block: var(--section-padding) var(--space-xl); } .site-footer__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: var(--space-xl) var(--grid-gutter); padding-bottom: var(--space-xl); border-bottom: 1px solid rgba(232, 232, 232, 0.25); } .site-footer .wordmark { color: var(--color-chalk); font-size: 1.5rem; display: inline-block; margin-bottom: var(--space-md); } .site-footer .wordmark:hover { color: var(--color-ash); } .footer-blurb { font-size: var(--type-body); color: var(--text-on-dark); max-width: 34ch; } .footer-heading { font-size: var(--type-eyebrow); font-weight: 400; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-muted-on-dark); margin: 0 0 var(--space-md); } .footer-list li + li { margin-top: var(--space-sm); } .footer-list a { font-size: var(--type-body); color: var(--text-on-dark); text-decoration: none; } .footer-list a:hover { color: var(--color-ash); text-decoration: underline; text-underline-offset: 3px; } .footer-social { display: flex; gap: var(--space-sm); margin-top: var(--space-lg); } .footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid rgba(232, 232, 232, 0.4); color: var(--color-chalk); } .footer-social a:hover { background: var(--color-chalk); color: var(--color-onyx); border-color: var(--color-chalk); } .site-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md); padding-top: var(--space-lg); font-size: var(--type-small); color: var(--text-muted-on-dark); } .site-footer__bottom ul { display: flex; flex-wrap: wrap; gap: var(--space-lg); } .site-footer__bottom a { color: var(--text-muted-on-dark); text-decoration: none; } .site-footer__bottom a:hover { color: var(--color-chalk); } /* ============================================================================ 17 SHOP PAGE ========================================================================= */ .page-head { padding-block: clamp(2.5rem, 6vw, 4.5rem) var(--space-xl); border-bottom: 1px solid var(--hairline); } .page-head__title { margin-bottom: var(--space-md); } .page-head p { max-width: 56ch; } .breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); font-size: var(--type-small); color: var(--text-muted); margin-bottom: var(--space-lg); } .breadcrumbs a { text-decoration: none; color: var(--text-muted); } .breadcrumbs a:hover { color: var(--text-primary); text-decoration: underline; text-underline-offset: 3px; } .breadcrumbs li::after { content: '/'; margin-left: var(--space-xs); color: var(--color-ash); } .breadcrumbs li:last-child::after { content: ''; } .breadcrumbs li[aria-current="page"] { color: var(--text-body); } .shop-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md); padding-block: var(--space-lg); border-bottom: 1px solid var(--hairline); margin-bottom: var(--space-xl); } .filters { display: flex; flex-wrap: wrap; gap: var(--space-xs); } .filter-btn { background: transparent; border: 1px solid var(--hairline); color: var(--text-body); font-family: var(--font-body); font-size: var(--type-small); padding: 0.5rem 1rem; cursor: pointer; border-radius: var(--radius); transition: background-color var(--transition), color var(--transition), border-color var(--transition); } .filter-btn:hover { border-color: var(--color-ink); color: var(--color-ink); } .filter-btn[aria-pressed="true"] { background: var(--color-onyx); border-color: var(--color-onyx); color: var(--color-chalk); } .result-count { font-size: var(--type-small); color: var(--text-muted); } .empty-state { padding: var(--space-2xl) 0; text-align: center; color: var(--text-muted); } /* ============================================================================ 18 PRODUCT PAGE ========================================================================= */ .product-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; padding-block: var(--space-xl) var(--section-padding); } .gallery__main { aspect-ratio: 4 / 5; border: var(--border); overflow: hidden; background: var(--color-chalk); } .gallery__thumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm); margin-top: var(--space-sm); } .gallery__thumb { aspect-ratio: 4 / 5; border: var(--border); background: var(--color-chalk); padding: 0; cursor: pointer; overflow: hidden; transition: border-color var(--transition); } .gallery__thumb img { width: 100%; height: 100%; object-fit: cover; } .gallery__thumb:hover { border-color: var(--color-onyx); } .gallery__thumb[aria-current="true"] { border-color: var(--color-ink); border-width: 2px; } .product-detail__category { font-size: var(--type-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-muted); } .product-detail__title { margin: var(--space-sm) 0 var(--space-md); } .product-detail__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-sm); margin-block: var(--space-lg); padding-block: var(--space-lg); border-block: 1px solid var(--hairline); } .product-detail__price strong { font-family: var(--font-display); font-size: 1.75rem; font-weight: 800; color: var(--text-primary); } .product-detail__price s { color: var(--text-muted); } .product-detail__price span { font-size: var(--type-small); color: var(--text-muted); } .buy-note { font-size: var(--type-small); color: var(--text-muted); margin-top: var(--space-md); display: flex; align-items: flex-start; gap: var(--space-xs); } .buy-note svg { flex: none; margin-top: 0.15rem; } /* Boxed notice, used for the digital-download statement. */ .notice { border: var(--border); padding: var(--space-lg); margin-top: var(--space-lg); font-size: var(--type-body); } .notice h2, .notice h3 { font-size: var(--type-h4); margin-bottom: var(--space-xs); } .notice ul { margin-top: var(--space-sm); } .notice li { display: flex; gap: var(--space-xs); margin-bottom: var(--space-2xs); line-height: 1.5; } .notice li svg { flex: none; margin-top: 0.3rem; color: var(--color-onyx); } .notice--dark { background: var(--bg-dark); color: var(--text-on-dark); border-color: var(--bg-dark); } .notice--dark h2, .notice--dark h3 { color: var(--text-on-dark); } .notice--dark li svg { color: var(--color-ash); } /* Specification list. */ .spec-list { border-top: 1px solid var(--hairline-strong); } .spec-list > div { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); gap: var(--space-lg); padding-block: var(--space-md); border-bottom: 1px solid var(--hairline); } .spec-list dt { font-size: var(--type-small); letter-spacing: 0.04em; color: var(--text-muted); } .spec-list dd { margin: 0; font-size: var(--type-body); color: var(--text-body); } .spec-list dd ul li { margin-bottom: var(--space-2xs); } .feature-list li { display: flex; gap: var(--space-sm); padding-block: var(--space-sm); border-bottom: 1px solid var(--hairline); font-size: var(--type-body); } .feature-list li svg { flex: none; margin-top: 0.3rem; color: var(--color-onyx); } .feature-list li:first-child { border-top: 1px solid var(--hairline); } .product-sections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 4rem); } /* ============================================================================ 19 FORMS AND CONTACT ========================================================================= */ .form-grid { display: grid; gap: var(--space-lg); } .form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); } .field { display: flex; flex-direction: column; gap: var(--space-xs); } .field label { font-size: var(--type-small); font-weight: 500; color: var(--text-primary); } .field .field-hint { font-size: var(--type-small); color: var(--text-muted); } .field .req { color: var(--text-muted); font-weight: 400; } input[type="text"], input[type="email"], input[type="tel"], input[type="url"], select, textarea { width: 100%; font-family: var(--font-body); font-size: var(--type-body-lg); line-height: 1.5; color: var(--text-body); background: transparent; border: 1px solid var(--color-ash); border-radius: var(--radius); padding: 0.8125rem 1rem; transition: border-color var(--transition); } input:hover, select:hover, textarea:hover { border-color: var(--color-onyx); } input:focus, select:focus, textarea:focus { border-color: var(--color-ink); } textarea { resize: vertical; min-height: 10rem; } select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--color-onyx) 50%), linear-gradient(135deg, var(--color-onyx) 50%, transparent 50%); background-position: calc(100% - 20px) calc(1.35rem), calc(100% - 14px) calc(1.35rem); background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; } .form-status { border: var(--border); padding: var(--space-md); font-size: var(--type-body); } .form-status[hidden] { display: none; } .contact-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; } .info-block { border-top: 1px solid var(--hairline-strong); padding-top: var(--space-lg); } .info-block + .info-block { margin-top: var(--space-xl); } .info-block h2 { font-size: var(--type-h3); margin-bottom: var(--space-xs); } .info-block p { font-size: var(--type-body); } /* ============================================================================ 20 PROSE PAGES (policies, about) ========================================================================= */ .prose { max-width: var(--max-width-prose); font-size: var(--type-body-lg); } .prose > * + * { margin-top: var(--space-md); } .prose h2 { font-size: var(--type-h2); margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid var(--hairline); } .prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; } .prose h3 { margin-top: var(--space-lg); } .prose ul, .prose ol { padding-left: var(--space-lg); } .prose li { list-style: disc; margin-bottom: var(--space-xs); line-height: var(--lh-body); } .prose ol li { list-style: decimal; } .prose a { color: var(--text-primary); text-decoration: underline; text-underline-offset: 3px; } /* Marks a paragraph that needs professional review before going live. */ .review-note { border-left: 2px solid var(--color-onyx); background: transparent; padding: var(--space-md) var(--space-lg); font-size: var(--type-body); color: var(--text-body); } .review-note strong { color: var(--text-primary); } .policy-meta { font-size: var(--type-small); color: var(--text-muted); padding-bottom: var(--space-lg); border-bottom: 1px solid var(--hairline); margin-bottom: var(--space-xl); } .toc { border: var(--border); padding: var(--space-lg); margin-bottom: var(--space-xl); } .toc h2 { font-size: var(--type-h4); border: 0; margin: 0 0 var(--space-sm); padding: 0; } .toc li { list-style: none; margin-bottom: var(--space-2xs); } .toc a { font-size: var(--type-body); } /* ============================================================================ 21 THANK-YOU AND 404 ========================================================================= */ .centred-page { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding-block: clamp(4rem, 12vw, 8rem); min-height: 52vh; } .centred-page .lead { margin-inline: auto; } .centred-page__actions { display: flex; flex-wrap: wrap; gap: var(--space-md); justify-content: center; margin-top: var(--space-xl); } .next-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gutter); text-align: left; margin-top: var(--space-2xl); width: 100%; } .error-code { font-family: var(--font-display); font-size: clamp(4rem, 16vw, 9rem); font-weight: 800; line-height: 1; letter-spacing: -0.02em; color: var(--text-primary); margin-bottom: var(--space-lg); } /* ============================================================================ 22 UTILITIES ========================================================================= */ .text-centre { text-align: center; } .mt-0 { margin-top: 0 !important; } .mt-sm { margin-top: var(--space-sm); } .mt-md { margin-top: var(--space-md); } .mt-lg { margin-top: var(--space-lg); } .mt-xl { margin-top: var(--space-xl); } .mt-2xl { margin-top: var(--space-2xl); } .mb-lg { margin-bottom: var(--space-lg); } .mb-xl { margin-bottom: var(--space-xl); } .no-wrap { white-space: nowrap; } .divider { border-top: 1px solid var(--hairline); } /* ============================================================================ 23 RESPONSIVE BREAKPOINTS ========================================================================= */ @media (max-width: 1080px) { .product-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl) var(--grid-gutter); } .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 900px) { :root { --section-padding: 4rem; --card-padding: 1.5rem; } /* Desktop nav out, mobile toggle in. */ .site-nav { display: none; } .nav-toggle { display: inline-flex; } .mobile-nav { display: block; } .header-actions .btn--header { display: none; } .hero__inner { grid-template-columns: minmax(0, 1fr); } .hero__copy { max-width: 100%; } .hero__media { aspect-ratio: 3 / 2; } .spotlight, .signup, .contact-layout, .product-layout, .product-sections { grid-template-columns: minmax(0, 1fr); } .section-head { flex-direction: column; align-items: flex-start; } .category-row { grid-template-columns: 2.5rem minmax(0, 1fr) auto; gap: var(--space-md); align-items: baseline; } .category-row__desc { display: none; } .next-steps { grid-template-columns: minmax(0, 1fr); } .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 700px) { .product-grid, .product-grid--3, .product-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .product-grid { gap: var(--space-xl) var(--space-md); } .product-card__body { padding: var(--space-md); } .product-card__summary { display: none; } .form-row { grid-template-columns: minmax(0, 1fr); } .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); } .steps { grid-template-columns: minmax(0, 1fr); } .site-footer__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); } .spec-list > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); } .signup-form { flex-direction: column; } .signup-form .btn { width: 100%; } .shop-toolbar { flex-direction: column; align-items: flex-start; } } @media (max-width: 460px) { .product-grid, .product-grid--3, .product-grid--4 { grid-template-columns: minmax(0, 1fr); } .product-card__summary { display: block; } .hero__actions .btn { width: 100%; } .gallery__thumbs { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* ============================================================================ 24 REDUCED MOTION AND PRINT ========================================================================= */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .arrow-link:hover svg { transform: none; } .category-row:hover { padding-inline: 0; } } @media print { .announcement, .site-header, .mobile-nav, .site-footer, .signup { display: none !important; } body { background: #fff; color: #000; font-size: 11pt; } .section { padding-block: 1rem; } a::after { content: ' (' attr(href) ')'; font-size: 9pt; color: #555; } }