/* ============================================================ Olympus Real Estate — Brand tokens Version 1.0 · September 2026 Pairs with olympus-brand-guidelines.md ============================================================ */ /* The font is ed in each page's (with preconnect) rather than @imported here: an @import cannot start downloading until this stylesheet has itself arrived, which delays first paint of every heading. */ :root { /* ---------- CORE PALETTE ---------- */ --ore-paper: #F5F2EC; /* ground ~50% */ --ore-anchor: #1D2326; /* ink ~25% */ --ore-rust: #A24B2B; /* voice ~14% */ --ore-tint: #D6CFC3; /* fills ~8% */ --ore-slate: #7FA3AE; /* relief ~3% */ /* ---------- SAME HUES, OPPOSITE CONTEXT ---------- */ --ore-rust-light: #CE6E48; /* rust on dark — 4.50:1 on anchor */ --ore-slate-deep: #456F7D; /* slate on light — 4.92:1 on paper */ --ore-tint-deep: #A49C92; /* tint on dark — 5.87:1 on anchor */ /* Tint had no dark-context counterpart, and that was the gap that broke the proportions above. Secondary text on an inverted page had only Slate to fall back on, so a colour budgeted at 3% relief became every line of body copy on any page built dark — the gate reads 76% cool, 0% warm. Tint Deep sits at the same relative luminance as Slate, so it inherits Slate's documented 5.87:1 on anchor unchanged: this is a hue correction, not a brightness one, and nothing in the contrast table below moves. Slate keeps the relief job it was budgeted for — eyebrows, the small letterspaced labels, links and focus rings on dark. */ /* ---------- UTILITY ---------- */ --ore-muted: #5E686A; /* 5.13:1 on paper */ --ore-rust-hover: #8A3F24; /* 6.67:1 on paper */ --ore-rust-active: #74351E; --ore-slate-hover: #385C68; /* 6.48:1 on paper */ --ore-slate-light: #A8C6CE; /* 8.81:1 on anchor */ --ore-border: #DCD6CB; /* ---------- SURFACES ---------- */ --bg: var(--ore-paper); --bg-sunken: #EFEBE3; /* stays near paper -- see note below */ --bg-card: var(--ore-tint); /* Tint is the fills colour and it was sitting at about 1% of the site against an 8% budget, while Anchor ran at roughly double its own. Cards were #FAF8F4 -- a whisker off paper -- so they never read as surfaces. Spending Tint here is what the budget was for. Tint is a far darker ground than #FAF8F4, so --text-muted (#5E686A, quoted at 5.13:1 on PAPER) drops to 3.64:1 on it and fails. Tinted surfaces therefore re-point --text-muted at a warm dark grey; see .card below. Cards ONLY. Tinting the full-width sunken bands as well pushed Tint to 22-32% of painted area on four pages against its 8% budget, and it came out of Paper's share rather than Anchor's, which was the opposite of the point. A fill is an object on the ground, not the ground. */ --bg-fill: var(--ore-tint); --bg-inverse: var(--ore-anchor); /* ---------- TEXT ---------- */ --text: var(--ore-anchor); /* 14.23:1 */ --text-muted: var(--ore-muted); /* 5.13:1 */ --text-inverse: var(--ore-paper); /* 14.23:1 on inverse */ --text-inverse-muted: var(--ore-tint-deep); /* 5.87:1 on inverse */ --text-accent: var(--ore-rust); /* 5.25:1 */ --text-accent-inverse: var(--ore-rust-light); /* 4.50:1 on inverse */ /* ---------- LINKS ---------- */ --link: var(--ore-rust); --link-hover: var(--ore-rust-hover); --link-quiet: var(--ore-slate-deep); --link-quiet-hover: var(--ore-slate-hover); --link-inverse: var(--ore-slate); --link-inverse-hover: var(--ore-slate-light); /* ---------- BUTTONS ---------- */ --btn-bg: var(--ore-rust); --btn-text: var(--ore-paper); /* 5.25:1 */ --btn-bg-hover: var(--ore-rust-hover); --btn-bg-active: var(--ore-rust-active); --btn2-bg: transparent; --btn2-text: var(--ore-anchor); --btn2-border: var(--ore-anchor); --btn2-bg-hover: var(--ore-tint); /* ---------- LINES AND FOCUS ---------- */ --border: var(--ore-border); --border-strong: var(--ore-muted); --rule-accent: var(--ore-rust); --focus-ring: var(--ore-anchor); /* NOT rust — invisible on a rust button */ --focus-ring-inverse: var(--ore-slate); /* ---------- TYPE ---------- */ --font: 'Archivo', 'Helvetica Neue', Arial, sans-serif; --fs-xs: 11px; --fs-sm: 13px; --fs-base: 15px; --fs-body: 17px; --fs-lead: 21px; --fs-h3: 26px; --fs-h2: clamp(26px, 3.2vw, 34px); --fs-h1: clamp(34px, 5vw, 54px); --fs-display: clamp(52px, 8vw, 88px); --lh-tight: 1.08; --lh-heading: 1.18; --lh-body: 1.62; --measure: 70ch; --measure-lead: 46ch; /* ---------- SPACE ---------- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --page-max: 1200px; --text-max: 700px; --radius-control: 5px; --radius-card: 10px; --radius-image: 8px; } /* ============================================================ BASE ============================================================ */ html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); /* never #FFFFFF */ color: var(--text); font-family: var(--font); font-size: var(--fs-body); font-weight: 400; line-height: var(--lh-body); font-stretch: 100%; -webkit-font-smoothing: antialiased; } h1, h2, h3 { margin: 0; font-weight: 600; font-stretch: 100%; } h1 { font-size: var(--fs-h1); letter-spacing: -0.03em; line-height: var(--lh-tight); } h2 { font-size: var(--fs-h2); letter-spacing: -0.025em; line-height: var(--lh-heading); } h3 { font-size: var(--fs-h3); letter-spacing: -0.015em; line-height: 1.25; } p { max-width: var(--measure); margin: 0 0 1em; } .lead { font-size: var(--fs-lead); line-height: 1.55; max-width: var(--measure-lead); } .caption, small { font-size: var(--fs-sm); color: var(--text-muted); } /* ---------- eyebrow / values line ---------- */ .eyebrow { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.20em; text-transform: uppercase; color: var(--text-accent); } /* ---------- the numbers device ---------- */ .number { font-size: var(--fs-display); font-weight: 700; font-stretch: 125%; letter-spacing: -0.035em; line-height: 0.95; color: var(--text-accent); } .on-dark .number { color: var(--text-accent-inverse); } .number-label { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.20em; text-transform: uppercase; color: var(--text); } /* ============================================================ LINKS ============================================================ */ a { color: var(--link); text-underline-offset: 3px; } a:hover { color: var(--link-hover); } a.quiet { color: var(--link-quiet); } a.quiet:hover { color: var(--link-quiet-hover); } .on-dark a { color: var(--link-inverse); } .on-dark a:hover { color: var(--link-inverse-hover); } nav a { text-decoration: none; font-size: var(--fs-base); font-weight: 500; color: var(--text); } nav a:hover { box-shadow: inset 0 -2px 0 var(--ore-rust); } /* ============================================================ BUTTONS ============================================================ */ .btn { display: inline-block; background: var(--btn-bg); color: var(--btn-text); padding: 14px 26px; border: 0; border-radius: var(--radius-control); font-family: var(--font); font-size: 12px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; text-decoration: none; cursor: pointer; } .btn:hover { background: var(--btn-bg-hover); color: var(--btn-text); } .btn:active { background: var(--btn-bg-active); } .btn-secondary { background: var(--btn2-bg); color: var(--btn2-text); box-shadow: inset 0 0 0 1.5px var(--btn2-border); } .btn-secondary:hover { background: var(--btn2-bg-hover); color: var(--btn2-text); } /* ============================================================ SURFACES ============================================================ */ .section { padding: var(--s-9) var(--s-5); } .section-sunken { background: var(--bg-sunken); } .section-inverse { background: var(--bg-inverse); color: var(--text-inverse); } .section-inverse .eyebrow { color: var(--text-accent-inverse); } .section-inverse .caption { color: var(--text-inverse-muted); } .container { max-width: var(--page-max); margin: 0 auto; } /* Secondary text on a tinted fill needs a darker ink than it does on paper. #4A443D is 6.21:1 on Tint and 7.47:1 on the sunken band, and it is warm, so it agrees with the fill instead of dragging blue back in. */ .card { --text-muted: #4A443D; } .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-card); padding: var(--s-5); /* no shadows anywhere in this identity */ } .rule-accent { height: 2px; width: 48px; background: var(--rule-accent); border: 0; margin: var(--s-4) 0; } hr { height: 1px; background: var(--border); border: 0; margin: var(--s-6) 0; } img { max-width: 100%; height: auto; border-radius: var(--radius-image); } /* ============================================================ FORMS ============================================================ */ label { display: block; font-size: var(--fs-sm); font-weight: 600; margin-bottom: var(--s-2); } input, textarea, select { width: 100%; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-control); padding: 12px 14px; font-family: var(--font); font-size: var(--fs-base); } input::placeholder, textarea::placeholder { color: var(--text-muted); } .field-error { font-size: var(--fs-sm); color: var(--ore-rust-hover); margin-top: var(--s-2); } /* never signal an error with colour alone — include the word "Error" or an icon */ /* ============================================================ FOCUS — always visible ============================================================ */ :focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; } .on-dark :focus-visible, .section-inverse :focus-visible { outline-color: var(--focus-ring-inverse); } /* ============================================================ LOGO ============================================================ */ .logo { display: block; width: 168px; min-width: 150px; color: var(--text); } .logo svg { display: block; width: 100%; height: auto; } .on-dark .logo, .section-inverse .logo { color: var(--text-inverse); } /* SVGs use fill="currentColor" — set colour on the parent, never edit the file */ /* ============================================================ CONTOUR TEXTURE — the only supporting graphic ============================================================ */ .topo { position: absolute; inset: 0; color: var(--ore-slate-deep); opacity: 0.13; pointer-events: none; z-index: 0; } .on-dark .topo { color: var(--ore-slate); opacity: 0.20; } .topo + * { position: relative; z-index: 1; } /* ============================================================ PRINT — plain white stock, two inks only ============================================================ */ @media print { :root { --bg: #FFFFFF; /* the sheet. never print a Paper background */ --bg-card: #FFFFFF; --bg-sunken: #FFFFFF; --text: #1D2326; /* 15.90:1 on white */ --text-muted: #1D2326; /* grey secondary text just looks faded on paper */ --text-accent: #A24B2B; /* 5.87:1 on white */ --link: #1D2326; --border: #D6CFC3; } body { background: #FFFFFF; font-size: 10pt; } .btn, nav, .topo { display: none; } .card { border: 1px solid #D6CFC3; } .section-inverse { max-height: 0.75in; } /* office lasers streak on large solids */ a { text-decoration: underline; } a::after { content: " (" attr(href) ")"; font-size: 8pt; color: #1D2326; } } /* Slate, Slate Deep and Muted are SCREEN COLOURS. In greyscale they land at 61%, 60% and 62% K alongside Rust — indistinguishable on a photocopy. Never print them next to Rust. */ /* ============================================================ FORBIDDEN — left here so nobody rediscovers them ------------------------------------------------------------ slate #7FA3AE on paper #F5F2EC = 2.42:1 use slate-deep rust #A24B2B on anchor #1D2326 = 2.71:1 use rust-light paper #F5F2EC on slate #7FA3AE = 2.42:1 use anchor on slate tint #D6CFC3 as text, anywhere = 1.38:1 fills only background: #FFFFFF on screen breaks the whole palette ============================================================ */