/* ============================================================
AWR TRADING — styles.css
Single shared stylesheet for all 6 pages.
============================================================
CONTENTS
--------
1. Design tokens (CSS custom properties)
2. Reset & base
3. Typography utilities
4. Layout: container, section, grid
5. Buttons, links, eyebrows
6. Header / nav
7. Hero
8. Stats / capability strip
9. Intro / pull-quote section
10. Capability cards (4-up)
11. CTA band
12. Footer
13. Page-specific blocks (about, what-we-do list, brands,
capabilities list, contact form, generic page hero)
14. Reveal-on-scroll animation
15. RTL hook (Arabic switch)
16. Reduced motion
17. Print
============================================================
COLOR SYSTEM — nuff palette (see :root below)
---------------------------------------------
STRICT RULES (enforced site-wide):
1. Void is the dominant background everywhere.
2. NEVER pure white (#FFFFFF). Light text/surfaces use Off White.
3. Dusk is an ACCENT only — never a large surface.
4. ONE Dusk accent element per section, max.
5. No color outside the palette. No warm tones / red / green.
6. No gradients, gloss, or color overlays. Flat color only.
7. Hierarchy via the mono ramp:
Void → background
OffWh → primary text
Ash → secondary text
Stone → captions / labels / muted numerals
Mist → disabled states / hairlines
8. Borders/dividers use Carbon.
9. "Partner with us" CTA: Dusk fill, Dusk Void text. Hover → Dusk Depth.
10. Sticky-nav current-page highlight: Dusk.
RTL / ARABIC
------------
This site uses CSS *logical* properties throughout
(margin-inline-*, padding-inline-*, inset-inline-*,
text-align: start/end, border-inline-*) instead of physical
left/right properties. That means setting
on a page will mirror the entire layout automatically.
To switch the whole site to Arabic:
1. Change →
on every page.
2. Load an Arabic font (e.g. "IBM Plex Sans Arabic") in
each page and add it to the --font-body stack
in the [dir="rtl"] block at the bottom of this file.
3. Translate the copy.
No layout rules need to change.
============================================================ */
/* ──────────────────────────────────────────────────────────
1. DESIGN TOKENS
────────────────────────────────────────────────────────── */
:root {
/* ── Mono ramp ── */
--void: #0A0A0A; /* primary background — hero, base */
--deep: #1C1C1A; /* secondary background — cards, panels */
--carbon: #3A3A38; /* dividers, borders, subtle UI */
--ash: #5A5A58; /* secondary text, metadata */
--stone: #909088; /* tertiary text, captions */
--mist: #C8C6C0; /* disabled states, hairlines */
--off-white: #F2F0EB; /* PRIMARY TEXT — never #FFFFFF */
/* ── Dusk accent ramp ── */
--dusk-frost: #EEF2F7; /* tinted info-panel bg (rare on this site) */
--dusk-pale: #C2D3E8; /* hover states, subtle icon fills */
--dusk: #7FA8CC; /* PRIMARY ACCENT — CTAs, dots, active states */
--dusk-depth: #4A7FA8; /* pressed states, outline CTAs */
--dusk-abyss: #2A5070; /* accent text on light surfaces */
--dusk-void: #1E3A52; /* text on Dusk fill */
/* ── Type families ── */
--font-display: "Fraunces", Georgia, "Times New Roman", serif;
--font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
/* ── Type scale — mobile-first ── */
--fs-xs: 0.75rem; /* 12px */
--fs-sm: 0.875rem; /* 14px */
--fs-base: 1rem; /* 16px */
--fs-md: 1.125rem; /* 18px */
--fs-lg: 1.375rem; /* 22px */
--fs-xl: 1.75rem; /* 28px */
--fs-2xl: 2.25rem; /* 36px */
--fs-3xl: 3rem; /* 48px */
--fs-4xl: 3.75rem; /* 60px */
--fs-5xl: 4.5rem; /* 72px */
/* ── Spacing rhythm ── */
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.5rem;
--space-6: 2rem;
--space-7: 3rem;
--space-8: 4rem;
--space-9: 6rem;
--space-10: 8rem;
/* ── Layout ── */
--container-w: 1280px;
--container-px: clamp(1.25rem, 4vw, 2.5rem);
/* ── Motion ── */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--dur-fast: 150ms;
--dur: 250ms;
--dur-slow: 600ms;
/* ── Misc ── */
--radius: 2px; /* deliberately small — architectural, not consumer */
--hairline: 1px;
}
@media (min-width: 1024px) {
:root {
--fs-base: 1.0625rem; /* 17px body on desktop */
--fs-md: 1.1875rem;
--fs-lg: 1.5rem;
--fs-xl: 2rem;
--fs-2xl: 2.75rem;
--fs-3xl: 3.75rem;
--fs-4xl: 5rem;
--fs-5xl: 6rem;
}
}
/* ──────────────────────────────────────────────────────────
2. RESET & BASE
────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
margin: 0;
background: var(--void);
color: var(--off-white);
font-family: var(--font-body);
font-size: var(--fs-base);
line-height: 1.65;
font-weight: 400;
text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5, h6, p { margin: 0; }
::selection { background: var(--dusk); color: var(--dusk-void); }
/* Visually-hidden helper (for screen-reader-only text) */
.visually-hidden {
position: absolute;
inline-size: 1px;
block-size: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}
/* Skip link — appears on focus */
.skip-link {
position: absolute;
inset-block-start: -100px;
inset-inline-start: var(--space-4);
background: var(--dusk);
color: var(--dusk-void);
padding: var(--space-3) var(--space-4);
border-radius: var(--radius);
z-index: 1000;
transition: inset-block-start var(--dur) var(--ease-out);
}
.skip-link:focus { inset-block-start: var(--space-4); }
/* Universal focus ring — Dusk accent */
:focus { outline: none; }
:focus-visible {
outline: 2px solid var(--dusk);
outline-offset: 3px;
border-radius: var(--radius);
}
/* ──────────────────────────────────────────────────────────
3. TYPOGRAPHY UTILITIES
────────────────────────────────────────────────────────── */
/* Display sizes — Fraunces with optical sizing.
font-variation-settings tunes the variable axes:
- "opsz" (optical size) bumps to 144 at display sizes so
letterforms get sharper, more editorial detail. */
.display-xl,
.display-lg,
.display-md,
.display-sm {
font-family: var(--font-display);
font-weight: 600;
line-height: 1.02;
letter-spacing: -0.02em;
color: inherit;
text-wrap: balance;
}
.display-xl {
font-size: var(--fs-5xl);
font-variation-settings: "opsz" 144;
}
.display-lg {
font-size: var(--fs-4xl);
font-variation-settings: "opsz" 144;
line-height: 1.04;
}
.display-md {
font-size: var(--fs-3xl);
font-variation-settings: "opsz" 96;
line-height: 1.06;
}
.display-sm {
font-size: var(--fs-2xl);
font-variation-settings: "opsz" 72;
line-height: 1.1;
letter-spacing: -0.015em;
}
/* Body sizes */
.lead {
font-size: var(--fs-lg);
line-height: 1.5;
color: var(--ash);
max-inline-size: 56ch;
font-weight: 400;
}
.body-lg {
font-size: var(--fs-md);
line-height: 1.65;
color: var(--ash);
max-inline-size: 62ch;
}
/* The accent-dot span on display headlines.
Under the new palette, default to inherit (off-white) so it
doesn't compete with the section's single Dusk accent.
Use .accent-dot--dusk if a section has no other accent and
needs the typographic dot as its one accent element. */
.accent-dot { color: inherit; }
.accent-dot--dusk { color: var(--dusk); }
/* Inline muted text used inside pull-quotes */
.muted-inline { color: var(--stone); }
/* ──────────────────────────────────────────────────────────
4. LAYOUT
────────────────────────────────────────────────────────── */
.container {
inline-size: 100%;
max-inline-size: var(--container-w);
margin-inline: auto;
padding-inline: var(--container-px);
}
.section {
padding-block: clamp(var(--space-8), 10vw, var(--space-10));
}
/* Surface modifiers.
Default body is Void. Use --deep for sections that need a
slight lift (CTA band, footer). Class names retained for
backwards compatibility with existing markup. */
.section--cream,
.section--navy { background: var(--void); color: var(--off-white); }
.section--cream-2,
.section--deep { background: var(--deep); color: var(--off-white); }
.section__head {
margin-block-end: clamp(var(--space-7), 6vw, var(--space-9));
max-inline-size: 60ch;
}
.section__narrow {
max-inline-size: 56rem;
}
.section__more {
margin-block-start: var(--space-6);
}
/* ──────────────────────────────────────────────────────────
5. BUTTONS, LINKS, EYEBROWS
────────────────────────────────────────────────────────── */
.btn {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-4) var(--space-6);
font-family: var(--font-body);
font-weight: 500;
font-size: var(--fs-sm);
line-height: 1;
letter-spacing: 0.02em;
text-transform: uppercase;
border-radius: var(--radius);
transition: background var(--dur) var(--ease-out),
color var(--dur) var(--ease-out),
border-color var(--dur) var(--ease-out),
transform var(--dur) var(--ease-out);
white-space: nowrap;
border: 1px solid transparent;
}
/* Primary CTA: Dusk fill, Dusk Void text. Hover → Dusk Depth. */
.btn--accent {
background: var(--dusk);
color: var(--dusk-void);
}
.btn--accent:hover { background: var(--dusk-depth); color: var(--off-white); }
/* Ghost on dark surfaces */
.btn--ghost {
background: transparent;
color: var(--off-white);
border-color: var(--carbon);
}
.btn--ghost:hover {
background: var(--off-white);
color: var(--void);
border-color: var(--off-white);
}
/* "ghost-light" alias retained for backwards compatibility */
.btn--ghost-light {
background: transparent;
color: var(--off-white);
border-color: var(--carbon);
}
.btn--ghost-light:hover {
background: var(--off-white);
color: var(--void);
border-color: var(--off-white);
}
.btn--sm {
padding: var(--space-3) var(--space-5);
font-size: var(--fs-xs);
}
/* Eyebrow — small uppercase label, often preceded by a short rule.
Rule color defaults to Carbon (mono). Use eyebrow--accent in
sections where the eyebrow rule should be the section's one
Dusk accent. */
.eyebrow {
display: inline-flex;
align-items: center;
gap: var(--space-3);
font-family: var(--font-body);
font-size: var(--fs-xs);
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--stone);
margin-block-end: var(--space-5);
}
.eyebrow--light { color: var(--stone); }
.eyebrow__rule {
display: inline-block;
inline-size: 2.5rem;
block-size: 1px;
background: var(--carbon);
flex-shrink: 0;
}
.eyebrow--accent .eyebrow__rule { background: var(--dusk); }
/* Inline "→" link — uses Dusk on hover.
Default state is mono; the hover lift to Dusk is the one
accent moment in sections that use this link. */
.link-arrow {
display: inline-flex;
align-items: center;
gap: var(--space-3);
font-weight: 500;
color: var(--off-white);
border-block-end: 1px solid var(--carbon);
padding-block-end: 2px;
transition: gap var(--dur) var(--ease-out),
color var(--dur) var(--ease-out),
border-color var(--dur) var(--ease-out);
}
.link-arrow:hover {
gap: var(--space-4);
color: var(--dusk);
border-block-end-color: var(--dusk);
}
/* ──────────────────────────────────────────────────────────
6. HEADER / NAV
────────────────────────────────────────────────────────── */
.site-header {
position: sticky;
inset-block-start: 0;
z-index: 100;
background: transparent;
backdrop-filter: blur(0);
transition: background var(--dur) var(--ease-out),
backdrop-filter var(--dur) var(--ease-out),
border-color var(--dur) var(--ease-out);
border-block-end: 1px solid transparent;
}
/* Scrolled state, applied via JS (data-scrolled) */
.site-header[data-scrolled="true"] {
background: rgba(10, 10, 10, 0.92);
backdrop-filter: saturate(140%) blur(10px);
border-block-end-color: var(--carbon);
}
/* On pages where the hero isn't full-bleed (sub-pages),
add class .site-header--solid for an immediately-solid header. */
.site-header--solid {
background: rgba(10, 10, 10, 0.92);
backdrop-filter: saturate(140%) blur(10px);
border-block-end-color: var(--carbon);
}
.site-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-5);
padding-block: var(--space-4);
}
.wordmark {
display: inline-flex;
align-items: center;
font-family: var(--font-display);
font-weight: 700;
font-size: 1.375rem;
letter-spacing: -0.01em;
color: var(--off-white);
font-variation-settings: "opsz" 36;
}
.wordmark__dot { color: var(--dusk); }
.wordmark--footer { font-size: 2rem; }
/* Logo image wordmark (replaces text "AWR.").
Header logo: ~22px tall, mirrors the original wordmark size.
Footer logo: ~38px tall.
Aspect ratio is preserved automatically via width: auto. */
.wordmark__img {
display: block;
block-size: 1.5rem; /* 24px */
inline-size: auto;
/* Logo is white-on-transparent; against light backgrounds we
do not currently use this wordmark, so no filter needed. */
}
.wordmark--footer .wordmark__img {
block-size: 2.5rem; /* 40px */
}
.site-nav__list {
display: flex;
align-items: center;
gap: var(--space-6);
}
.site-nav__list > li > a:not(.btn) {
font-size: var(--fs-sm);
font-weight: 500;
color: var(--off-white);
position: relative;
transition: color var(--dur) var(--ease-out);
}
.site-nav__list > li > a:not(.btn):hover { color: var(--dusk); }
.site-nav__list > li > a[aria-current="page"] {
color: var(--dusk);
}
/* Hamburger button — hidden on desktop */
.nav-toggle {
display: none;
flex-direction: column;
justify-content: center;
gap: 5px;
inline-size: 40px;
block-size: 40px;
padding: 8px;
}
.nav-toggle__bar {
display: block;
inline-size: 22px;
block-size: 1.5px;
background: var(--off-white);
transition: transform var(--dur) var(--ease-out),
opacity var(--dur) var(--ease-out);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:first-child {
transform: translateY(3.25px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:last-child {
transform: translateY(-3.25px) rotate(-45deg);
}
/* Mobile nav */
@media (max-width: 859px) {
.nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
.site-nav__list {
position: fixed;
inset-block-start: 64px;
inset-inline: 0;
flex-direction: column;
align-items: stretch;
gap: 0;
padding: var(--space-6) var(--container-px) var(--space-8);
background: var(--void);
border-block-start: 1px solid var(--carbon);
transform: translateY(-110%);
transition: transform var(--dur-slow) var(--ease-out);
block-size: calc(100vh - 64px);
overflow-y: auto;
}
.site-nav__list[data-open="true"] { transform: translateY(0); }
.site-nav__list > li {
border-block-end: 1px solid var(--carbon);
}
.site-nav__list > li > a:not(.btn) {
display: block;
padding-block: var(--space-5);
font-family: var(--font-display);
font-size: var(--fs-xl);
font-weight: 500;
color: var(--off-white);
}
.site-nav__list > li:last-child {
border-block-end: 0;
margin-block-start: var(--space-5);
}
.site-nav__list > li:last-child > .btn { display: flex; justify-content: center; }
body.nav-open { overflow: hidden; }
}
/* ──────────────────────────────────────────────────────────
7. HERO
────────────────────────────────────────────────────────── */
.hero {
position: relative;
background: var(--void);
color: var(--off-white);
overflow: hidden;
isolation: isolate;
/* Pull header onto hero (header is transparent at top) */
margin-block-start: -64px;
padding-block-start: calc(64px + clamp(var(--space-8), 14vw, var(--space-10)));
padding-block-end: clamp(var(--space-8), 12vw, var(--space-10));
}
.hero__inner {
position: relative;
z-index: 2;
max-inline-size: 60rem;
}
.hero__title {
margin-block: var(--space-5) var(--space-6);
}
.hero__lead {
color: var(--ash);
font-size: var(--fs-lg);
max-inline-size: 42ch;
}
.hero__ctas {
display: flex;
flex-wrap: wrap;
gap: var(--space-4);
margin-block-start: var(--space-7);
}
/* Decorative typographic mark — large outlined "A" on end side.
Under the new palette this is rendered in Off White at very
low opacity, so it reads as texture, not an accent element.
Hidden on small screens to keep the hero clean. */
.hero__mark {
position: absolute;
inset-block-end: -2vw;
inset-inline-end: -3vw;
z-index: 1;
pointer-events: none;
user-select: none;
line-height: 0.8;
opacity: 0.05;
}
.hero__mark-letter {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(20rem, 42vw, 38rem);
color: transparent;
-webkit-text-stroke: 1px var(--off-white);
font-variation-settings: "opsz" 144;
letter-spacing: -0.04em;
}
@media (max-width: 859px) { .hero__mark { display: none; } }
/* ──────────────────────────────────────────────────────────
8. STATS / CAPABILITY STRIP
────────────────────────────────────────────────────────── */
.strip {
background: var(--void);
border-block-start: 1px solid var(--carbon);
border-block-end: 1px solid var(--carbon);
}
.strip__grid {
display: grid;
grid-template-columns: 1fr;
gap: 0;
}
.strip__cell {
padding-block: var(--space-7);
border-block-end: 1px solid var(--carbon);
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.strip__cell:last-child { border-block-end: 0; }
.strip__num {
font-family: var(--font-display);
font-weight: 500;
font-variation-settings: "opsz" 144;
font-size: var(--fs-xl);
color: var(--stone);
letter-spacing: -0.02em;
}
.strip__statement {
font-family: var(--font-display);
font-weight: 500;
font-size: var(--fs-xl);
font-variation-settings: "opsz" 72;
line-height: 1.2;
letter-spacing: -0.015em;
color: var(--off-white);
text-wrap: balance;
}
@media (min-width: 768px) {
.strip__grid {
grid-template-columns: repeat(3, 1fr);
}
.strip__cell {
padding: var(--space-8) var(--space-6);
border-block-end: 0;
border-inline-end: 1px solid var(--carbon);
}
.strip__cell:first-child { padding-inline-start: 0; }
.strip__cell:last-child { padding-inline-end: 0; border-inline-end: 0; }
}
/* ──────────────────────────────────────────────────────────
9. INTRO / PULL-QUOTE SECTION
────────────────────────────────────────────────────────── */
.pull {
font-family: var(--font-display);
font-weight: 500;
font-variation-settings: "opsz" 144;
font-size: var(--fs-3xl);
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--off-white);
text-wrap: balance;
margin-block-end: var(--space-6);
}
/* ──────────────────────────────────────────────────────────
10. CAPABILITY CARDS (4-up)
────────────────────────────────────────────────────────── */
.cap-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--hairline);
background: var(--carbon);
border: 1px solid var(--carbon);
}
@media (min-width: 600px) {
.cap-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
.cap-grid { grid-template-columns: repeat(4, 1fr); }
}
.cap-card { background: var(--deep); }
.cap-card__link {
display: flex;
flex-direction: column;
gap: var(--space-5);
padding: var(--space-7) var(--space-6) var(--space-6);
block-size: 100%;
min-block-size: 14rem;
transition: background var(--dur) var(--ease-out);
position: relative;
}
.cap-card__link:hover {
background: var(--void);
}
.cap-card__num {
font-family: var(--font-display);
font-size: var(--fs-sm);
font-weight: 500;
letter-spacing: 0.16em;
color: var(--stone);
}
.cap-card__title {
font-family: var(--font-display);
font-variation-settings: "opsz" 96;
font-weight: 500;
font-size: var(--fs-xl);
line-height: 1.15;
letter-spacing: -0.015em;
color: var(--off-white);
margin-block-start: auto;
}
/* Arrow is mono at rest, Dusk only on hover (transient accent) */
.cap-card__arrow {
font-size: var(--fs-lg);
color: var(--mist);
transition: transform var(--dur) var(--ease-out),
color var(--dur) var(--ease-out);
align-self: flex-start;
}
.cap-card__link:hover .cap-card__arrow {
transform: translateX(6px);
color: var(--dusk);
}
/* ──────────────────────────────────────────────────────────
11. CTA BAND
────────────────────────────────────────────────────────── */
.cta-band {
background: var(--deep);
padding-block: clamp(var(--space-7), 8vw, var(--space-9));
border-block-start: 1px solid var(--carbon);
border-block-end: 1px solid var(--carbon);
}
.cta-band__inner {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-5);
text-align: start;
}
.cta-band__title {
max-inline-size: 18ch;
color: var(--off-white);
}
.cta-band__lead {
color: var(--stone);
font-size: var(--fs-md);
max-inline-size: 50ch;
}
@media (min-width: 900px) {
.cta-band__inner {
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: var(--space-7);
}
.cta-band__lead { flex: 1; }
}
/* ──────────────────────────────────────────────────────────
12. FOOTER
────────────────────────────────────────────────────────── */
.site-footer {
background: var(--deep);
color: var(--stone);
padding-block: var(--space-9) var(--space-6);
border-block-start: 1px solid var(--carbon);
}
.site-footer__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-7);
padding-block-end: var(--space-8);
border-block-end: 1px solid var(--carbon);
}
@media (min-width: 768px) {
.site-footer__grid {
grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
gap: var(--space-6);
}
}
.site-footer__brand .wordmark--footer {
color: var(--off-white);
display: inline-block;
margin-block-end: var(--space-4);
}
.site-footer__tag {
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
font-size: var(--fs-md);
color: var(--stone);
max-inline-size: 28ch;
}
.site-footer__h {
font-family: var(--font-body);
font-size: var(--fs-xs);
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--stone);
margin-block-end: var(--space-4);
}
.site-footer ul li {
margin-block-end: var(--space-3);
}
.site-footer a {
color: var(--off-white);
transition: color var(--dur) var(--ease-out);
}
.site-footer a:hover { color: var(--dusk); }
.site-footer__social { margin-block-start: var(--space-5); }
.site-footer__base {
display: flex;
flex-direction: column;
gap: var(--space-2);
padding-block-start: var(--space-5);
font-size: var(--fs-xs);
color: var(--ash);
}
@media (min-width: 768px) {
.site-footer__base {
flex-direction: row;
justify-content: space-between;
}
}
/* ── Minimal footer (current live nav: Home + Brands only) ──
Used while service / contact pages are not yet built.
When the other pages exist, switch back to .site-footer__grid. */
.site-footer__minimal {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-6);
padding-block-end: var(--space-7);
border-block-end: 1px solid var(--carbon);
}
@media (min-width: 768px) {
.site-footer__minimal {
grid-template-columns: 1fr auto;
align-items: end;
gap: var(--space-7);
}
}
.site-footer__inline-nav {
display: flex;
align-items: center;
gap: var(--space-4);
font-family: var(--font-body);
font-size: var(--fs-xs);
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.site-footer__inline-nav a {
color: var(--off-white);
transition: color var(--dur) var(--ease-out);
}
.site-footer__inline-nav a:hover { color: var(--dusk); }
.site-footer__inline-nav span {
color: var(--carbon);
user-select: none;
}
/* Footer meta block — stacks the inline-nav and the contact email */
.site-footer__meta {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-4);
}
@media (min-width: 768px) {
.site-footer__meta {
align-items: flex-end;
text-align: end;
}
}
.site-footer__email {
font-family: var(--font-display);
font-variation-settings: "opsz" 72;
font-weight: 500;
font-size: var(--fs-lg);
letter-spacing: -0.01em;
color: var(--off-white);
border-block-end: 1px solid var(--carbon);
padding-block-end: 2px;
transition: color var(--dur) var(--ease-out),
border-color var(--dur) var(--ease-out);
}
.site-footer__email:hover {
color: var(--dusk);
border-block-end-color: var(--dusk);
}
/* ──────────────────────────────────────────────────────────
13. PAGE-SPECIFIC BLOCKS
────────────────────────────────────────────────────────── */
/* Generic sub-page hero (About / What We Do / etc.) */
.page-hero {
background: var(--void);
padding-block: clamp(var(--space-9), 14vw, var(--space-10)) clamp(var(--space-7), 8vw, var(--space-9));
border-block-end: 1px solid var(--carbon);
}
.page-hero__inner { max-inline-size: 56rem; }
.page-hero__kicker { margin-block-end: var(--space-5); }
/* What We Do — large numbered capability rows */
.cap-list {
display: flex;
flex-direction: column;
gap: 0;
}
.cap-row {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-5);
padding-block: clamp(var(--space-7), 6vw, var(--space-8));
border-block-start: 1px solid var(--carbon);
}
.cap-row:last-child { border-block-end: 1px solid var(--carbon); }
@media (min-width: 768px) {
.cap-row {
grid-template-columns: 8rem 1fr;
gap: var(--space-7);
align-items: baseline;
}
}
@media (min-width: 1024px) {
.cap-row { grid-template-columns: 10rem 1fr 1fr; gap: var(--space-8); }
}
.cap-row__num {
font-family: var(--font-display);
font-variation-settings: "opsz" 144;
font-size: var(--fs-3xl);
font-weight: 500;
color: var(--stone);
line-height: 1;
}
.cap-row__title {
font-family: var(--font-display);
font-variation-settings: "opsz" 96;
font-weight: 500;
font-size: var(--fs-2xl);
line-height: 1.1;
letter-spacing: -0.015em;
color: var(--off-white);
text-wrap: balance;
}
.cap-row__body {
color: var(--ash);
font-size: var(--fs-md);
line-height: 1.65;
max-inline-size: 50ch;
}
/* ── Brands page ──
Single feature card for nuff. Wide and well-spaced.
Deep surface, Carbon border, single Dusk accent on the
"Live" status pill. Mono everywhere else. */
.brand-feature {
background: var(--deep);
border: 1px solid var(--carbon);
border-radius: var(--radius);
padding: clamp(var(--space-7), 6vw, var(--space-9));
display: grid;
grid-template-columns: 1fr;
gap: var(--space-7);
}
@media (min-width: 900px) {
.brand-feature {
grid-template-columns: 1fr 1fr;
gap: clamp(var(--space-7), 6vw, var(--space-9));
align-items: center;
}
}
.brand-feature__visual {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-6);
}
/* "Live" pill — THE single Dusk accent for this section */
.brand-feature__pill {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: 0.4rem 0.75rem;
font-family: var(--font-body);
font-size: var(--fs-xs);
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
background: var(--dusk);
color: var(--dusk-void);
border-radius: 999px;
}
.brand-feature__pill::before {
content: '';
inline-size: 6px;
block-size: 6px;
border-radius: 50%;
background: var(--dusk-void);
}
/* The "nuff" wordmark — large, present. Replace with an ![]()
when the real nuff logo is available:
*/
.brand-feature__wordmark {
font-family: var(--font-display);
font-variation-settings: "opsz" 144;
font-weight: 500;
font-size: clamp(5rem, 14vw, 9.5rem);
line-height: 0.9;
letter-spacing: -0.05em;
color: var(--off-white);
}
.brand-feature__body { display: flex; flex-direction: column; }
.brand-feature__category {
font-family: var(--font-body);
font-size: var(--fs-xs);
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--stone);
margin-block-end: var(--space-4);
}
.brand-feature__tagline {
font-family: var(--font-display);
font-variation-settings: "opsz" 96;
font-weight: 500;
font-size: var(--fs-2xl);
line-height: 1.1;
letter-spacing: -0.015em;
color: var(--off-white);
margin-block-end: var(--space-5);
}
.brand-feature__desc {
color: var(--ash);
font-size: var(--fs-md);
line-height: 1.65;
max-inline-size: 50ch;
margin-block-end: var(--space-6);
}
/* Mono CTA — uses .link-arrow underline pattern but stays
off-white at rest. Hover state is a subtle off-white lift
(NOT Dusk — the pill already owns the section's accent). */
.brand-feature__cta {
display: inline-flex;
align-items: center;
gap: var(--space-3);
font-family: var(--font-body);
font-size: var(--fs-sm);
font-weight: 500;
letter-spacing: 0.04em;
color: var(--off-white);
border-block-end: 1px solid var(--carbon);
padding-block-end: var(--space-2);
align-self: flex-start;
transition: gap var(--dur) var(--ease-out),
border-color var(--dur) var(--ease-out);
}
.brand-feature__cta:hover {
gap: var(--space-4);
border-block-end-color: var(--off-white);
}
/* Static "Coming soon" — used in place of a CTA link when the
destination isn't live yet. Styled to occupy the same visual
slot as the CTA so layout stays consistent, but plainly
non-interactive (Stone, muted underline). */
.brand-feature__soon {
display: inline-flex;
align-items: center;
gap: var(--space-3);
font-family: var(--font-body);
font-size: var(--fs-sm);
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--stone);
border-block-end: 1px dashed var(--carbon);
padding-block-end: var(--space-2);
align-self: flex-start;
}
/* "More brands" caption that sat below the card in the old
layout is no longer used (the line now lives in the page
hero as the intro). Keeping the rules in case it returns. */
.brand-more {
text-align: center;
padding-block: clamp(var(--space-8), 10vw, var(--space-10));
border-block-start: 1px solid var(--carbon);
margin-block-start: var(--space-9);
}
.brand-more__title { margin-block-end: var(--space-4); }
.brand-more__lead {
color: var(--ash);
font-size: var(--fs-md);
max-inline-size: 50ch;
margin-inline: auto;
}
/* Capabilities page bullets */
.cap-bullets {
display: grid;
grid-template-columns: 1fr;
gap: 0;
}
@media (min-width: 768px) {
.cap-bullets { grid-template-columns: 1fr 1fr; gap: 0 var(--space-8); }
}
.cap-bullet {
padding-block: var(--space-6);
border-block-start: 1px solid var(--carbon);
display: grid;
grid-template-columns: auto 1fr;
gap: var(--space-5);
align-items: baseline;
}
.cap-bullet__num {
font-family: var(--font-display);
font-variation-settings: "opsz" 96;
font-weight: 500;
font-size: var(--fs-xl);
color: var(--stone);
}
.cap-bullet__title {
font-family: var(--font-display);
font-variation-settings: "opsz" 72;
font-weight: 500;
font-size: var(--fs-lg);
line-height: 1.2;
letter-spacing: -0.01em;
margin-block-end: var(--space-2);
color: var(--off-white);
}
.cap-bullet__body {
font-size: var(--fs-base);
color: var(--ash);
line-height: 1.6;
max-inline-size: 44ch;
}
/* Careers page — single Dusk accent is the mailto: link.
Reused class so a future Contact page can pick it up too. */
.email-dusk {
color: var(--dusk);
border-block-end: 1px solid var(--dusk);
padding-block-end: 2px;
transition: color var(--dur) var(--ease-out),
border-block-end-color var(--dur) var(--ease-out);
}
.email-dusk:hover {
color: var(--dusk-pale);
border-block-end-color: var(--dusk-pale);
}
/* Contact page */
.contact-grid {
display: grid;
grid-template-columns: 1fr;
gap: clamp(var(--space-7), 6vw, var(--space-9));
}
@media (min-width: 900px) {
.contact-grid { grid-template-columns: 1fr 1.4fr; gap: var(--space-10); }
}
.contact-details__h {
font-family: var(--font-body);
font-size: var(--fs-xs);
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--stone);
margin-block: var(--space-5) var(--space-2);
}
.contact-details p,
.contact-details a {
font-size: var(--fs-md);
color: var(--off-white);
}
.contact-details a {
border-block-end: 1px solid var(--dusk);
padding-block-end: 2px;
transition: color var(--dur) var(--ease-out);
}
.contact-details a:hover { color: var(--dusk); }
/* Form */
.form {
display: grid;
gap: var(--space-5);
}
.form__row {
display: grid;
gap: var(--space-2);
}
.form label {
font-size: var(--fs-xs);
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--stone);
}
.form input,
.form select,
.form textarea {
font: inherit;
color: var(--off-white);
background: var(--deep);
border: 1px solid var(--carbon);
border-radius: var(--radius);
padding: var(--space-4);
inline-size: 100%;
transition: border-color var(--dur) var(--ease-out),
background var(--dur) var(--ease-out);
}
.form input:focus,
.form select:focus,
.form textarea:focus {
border-color: var(--dusk);
outline: none;
}
.form textarea { min-block-size: 8rem; resize: vertical; }
.form__grid-2 {
display: grid;
gap: var(--space-5);
grid-template-columns: 1fr;
}
@media (min-width: 600px) {
.form__grid-2 { grid-template-columns: 1fr 1fr; }
}
.form__actions {
display: flex;
align-items: center;
gap: var(--space-5);
margin-block-start: var(--space-3);
}
.form__msg {
font-size: var(--fs-sm);
color: var(--stone);
min-block-size: 1.5em;
}
.form__msg[data-state="success"] { color: var(--dusk); font-weight: 500; }
.form__msg[data-state="error"] { color: var(--mist); font-weight: 500; }
/* ──────────────────────────────────────────────────────────
14. REVEAL-ON-SCROLL
────────────────────────────────────────────────────────── */
.reveal {
opacity: 0;
transform: translateY(16px);
transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
will-change: opacity, transform;
}
.reveal.is-visible {
opacity: 1;
transform: translateY(0);
}
/* ──────────────────────────────────────────────────────────
15. RTL HOOK
────────────────────────────────────────────────────────── */
[dir="rtl"] .display-xl,
[dir="rtl"] .display-lg,
[dir="rtl"] .display-md,
[dir="rtl"] .display-sm,
[dir="rtl"] .pull,
[dir="rtl"] .cap-row__title,
[dir="rtl"] .strip__statement,
[dir="rtl"] .brand-feature__wordmark,
[dir="rtl"] .brand-feature__tagline {
letter-spacing: 0;
}
/* Arrows that pointed → should point ← in RTL */
[dir="rtl"] .cap-card__arrow,
[dir="rtl"] .link-arrow span[aria-hidden],
[dir="rtl"] .brand-feature__cta span[aria-hidden] {
transform: scaleX(-1);
}
[dir="rtl"] .cap-card__link:hover .cap-card__arrow {
transform: scaleX(-1) translateX(6px);
}
/* ──────────────────────────────────────────────────────────
16. REDUCED MOTION
────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.reveal { opacity: 1; transform: none; }
}
/* ──────────────────────────────────────────────────────────
17. PRINT
────────────────────────────────────────────────────────── */
@media print {
.site-header, .site-footer, .cta-band, .hero__mark, .nav-toggle { display: none; }
body { background: #fff; color: #000; }
a { color: #000; text-decoration: underline; }
}