@import url('fonts.css'); /* ========================================================================== IVAYLO STOYANOV — SITE STYLESHEET ========================================================================== Design source: myoakvillehomes.ca, decomposed in DESIGN-AUDIT.md §7. The look is "delicate and luxurious", and that is six MECHANICAL choices, none of which are colour: 1. the headline is LIGHT (300) and SMALL -> --fw-hero / --fs-hero 2. the eyebrow carries the emphasis, tracked 4px -> --track-hero-eyebrow 3. a hairline rule separates them -> .rule 4. the hero CTA is an OUTLINE, never a fill -> .btn--ghost 5. space is the material -> --sp-10, --section-y 6. headings are serif -> --font-display Heavy display type is the OTHER family recipe (neighbourhood-pages) and is the thing two previous attempts were rejected for. Do not reintroduce it. ┌────────────────────────────────────────────────────────────────────────┐ │ BRAND TOKENS │ │ │ │ Four values, approved 2026-09-08. Editing them rebrands the entire │ │ site — no colour is hardcoded in this stylesheet, the HTML, or the │ │ JS. Everything else derives from them via color-mix(). │ │ │ │ Maps 1:1 onto the family's runtime theming contract in tokens.js: │ │ --brand-primary <-> primary_color (#0d163b) │ │ accent_color <-> DELIBERATELY UNMAPPED │ │ │ │ THERE IS NO ACCENT COLOUR. The team brand is navy, white and ink. │ │ The live team site uses no gold anywhere and neither does this. │ │ Do not reintroduce a second hue: emphasis comes from type weight, │ │ wide tracking on small caps, space, and photography. │ │ │ │ ONE EXCEPTION, unavoidable: in each page's │ │ must be a literal hex — HTML meta cannot read a CSS variable. │ │ It mirrors --brand-primary. │ └────────────────────────────────────────────────────────────────────────┘ Sections 1. Tokens 2. Reset & base 3. Typography 4. Layout 5. Components 6. Homepage 7. Motion 8. Utilities & print ========================================================================== */ /* ========================================================================== 1. TOKENS ========================================================================== */ :root { /* ---- 1.1 Brand — the entire rebrand surface ---------------------------- */ --brand-primary: #0d163b; /* primary_color · live site, 69 uses */ --brand-primary-2: #162561; /* live secondary navy */ /* ---- 1.2 Ground & ink — myoakvillehomes values exactly ----------------- */ --ground: #ffffff; --ground-alt: #f8f9fa; --ground-deep: var(--brand-primary); --ink: #1a1f2e; --ink-muted: #5a6278; --ink-faint: #667085; /* WCAG AA on both grounds — 4.97:1 / 4.72:1 */ --ink-on-dark: #ffffff; --ink-on-dark-soft: rgba(255, 255, 255, .72); --ink-on-dark-faint: rgba(255, 255, 255, .55); /* AA on navy — 5.99:1 */ /* ---- 1.3 Lines & scrims — brand-derived, so a rebrand cascades --------- */ --line: color-mix(in srgb, var(--brand-primary) 10%, transparent); --line-strong: color-mix(in srgb, var(--brand-primary) 18%, transparent); --line-on-dark: rgba(255, 255, 255, .22); --hairline: rgba(255, 255, 255, .35); /* the 60x1.5 hero rule */ --focus: var(--brand-primary); /* white on dark grounds, see §5 */ /* Chrome that sits ON a photograph. Kept as tokens so a rebrand or a lighter photo treatment is a change here, not a hunt through §6. */ --on-photo-line: rgba(255, 255, 255, .40); /* ghost CTA border */ --on-photo-line-strong: rgba(255, 255, 255, .65); /* ghost CTA, hover */ --on-photo-fill: rgba(255, 255, 255, .08); /* ghost CTA, hover fill */ --field-line: rgba(255, 255, 255, .30); /* address bar border */ --field-line-focus: rgba(255, 255, 255, .70); /* address bar, focused */ /* Scrims. --scrim flattens a whole photo; the others are bottom-up gradients that keep type legible over the lower third of a card. */ --scrim: rgba(0, 0, 0, .45); --scrim-strong: rgba(0, 0, 0, .72); --scrim-soft: rgba(0, 0, 0, .25); --scrim-card: rgba(0, 0, 0, .75); /* Print only — ink on paper, never the brand navy. */ --print-ink: #000000; --print-ground: #ffffff; /* ---- 1.4 Semantic — family-consistent ---------------------------------- */ --up: #22c55e; --down: #ef4444; --flat: #94a3b8; /* ---- 1.5 Type ---------------------------------------------------------- */ --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --fs-eyebrow: .78rem; --fs-body: 1rem; --fs-lede: 1.0625rem; --fs-small: .875rem; --fs-fine: .78rem; --fs-h3: clamp(1.15rem, 1rem + .7vw, 1.4rem); --fs-h2: clamp(1.6rem, 1.3rem + 1.5vw, 2.4rem); --fs-h1: clamp(1.9rem, 1.5rem + 2.2vw, 3rem); --fs-hero: clamp(1.75rem, 1.35rem + 2.4vw, 2.75rem); --fs-figure: clamp(1.6rem, 1.2rem + 2vw, 2.5rem); --fw-hero: 300; --fw-body: 400; --fw-med: 500; --fw-semi: 600; --fw-bold: 700; --track-hero-eyebrow: .26em; /* 4px @1.15rem — audit §7.2 */ --track-eyebrow: .18em; --track-cta: .16em; /* 2.5px @.8rem — audit §7.4 */ --track-tight: -.01em; --lh-tight: 1.18; --lh-body: 1.6; /* ---- 1.6 Space — 4px base, mobile-first -------------------------------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 160px; --section-y: clamp(var(--sp-6), 5vw, var(--sp-8)); --container: 1200px; --container-narrow: 760px; --gutter: clamp(20px, 4vw, 32px); --header-h: 64px; /* ---- 1.7 Radius & shadow ----------------------------------------------- */ --r-sm: 8px; --r: 12px; --r-lg: 16px; --r-pill: 100px; --shadow: 0 2px 16px rgba(0, 0, 0, .07); --shadow-hover: 0 8px 32px rgba(0, 0, 0, .12); --shadow-lift: 0 12px 40px color-mix(in srgb, var(--brand-primary) 16%, transparent); /* ---- 1.8 Motion --------------------------------------------------------- */ --ease: cubic-bezier(.22, 1, .36, 1); --t-fast: .15s; --t: .2s; --t-slow: .45s; } /* ========================================================================== 2. RESET & BASE ========================================================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + var(--sp-4)); } body { background: var(--ground); color: var(--ink); font-family: var(--font-sans); font-size: var(--fs-body); font-weight: var(--fw-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg, video { display: block; max-width: 100%; } img { height: auto; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: none; } ul, ol { list-style: none; } /* Visible keyboard focus. Navy on light grounds; every dark ground re-points --focus at white so the ring never disappears. */ :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: var(--r-sm); } :focus:not(:focus-visible) { outline: none; } ::selection { background: var(--brand-primary); color: var(--ink-on-dark); } .skip-link { position: absolute; left: var(--sp-4); top: calc(-1 * var(--sp-10)); z-index: 200; padding: var(--sp-3) var(--sp-5); background: var(--brand-primary); color: var(--ink-on-dark); border-radius: var(--r-sm); font-size: var(--fs-small); font-weight: var(--fw-semi); transition: top var(--t) var(--ease); } .skip-link:focus { top: var(--sp-4); } /* ========================================================================== 3. TYPOGRAPHY ========================================================================== Headings are serif — audit §7.6. The ONE exception is the hero headline, which is light Inter, exactly as myoakvillehomes.ca does it. ========================================================================== */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: var(--fw-body); line-height: var(--lh-tight); letter-spacing: var(--track-tight); color: var(--brand-primary); } h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); font-weight: var(--fw-med); } h4 { font-size: var(--fs-body); font-weight: var(--fw-semi); } p { max-width: 68ch; } strong { font-weight: var(--fw-semi); } /* The eyebrow — tiny, uppercase, widely tracked. The family's counterweight. */ .eyebrow { display: block; font-family: var(--font-sans); font-size: var(--fs-eyebrow); font-weight: var(--fw-semi); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--ink-muted); margin-bottom: var(--sp-3); } .lede { font-size: var(--fs-lede); color: var(--ink-muted); line-height: var(--lh-body); } /* The hairline rule. 60x1.5, audit §7.3. */ .rule { width: 60px; height: 1.5px; border: 0; background: var(--line-strong); margin: var(--sp-5) 0; } .rule--center { margin-left: auto; margin-right: auto; } .rule--on-dark { background: var(--hairline); } .tabular { font-variant-numeric: tabular-nums; } /* ========================================================================== 4. LAYOUT ========================================================================== */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .container--narrow { max-width: var(--container-narrow); } .section { padding-block: var(--section-y); } .section--alt { background: var(--ground-alt); } .section--deep { background: var(--ground-deep); color: var(--ink-on-dark); } .section--deep h2, .section--deep h3 { color: var(--ink-on-dark); } .section--deep .eyebrow { color: var(--ink-on-dark-faint); } .section--deep .lede { color: var(--ink-on-dark-soft); } /* Navy-on-navy is invisible: every dark ground re-points the focus ring. */ .section--deep, .hero, .page-head, .site-footer, .site-header { --focus: var(--ink-on-dark); } .section__head { margin-bottom: var(--sp-6); } .section__head--center { text-align: center; } .section__head--center .rule { margin-inline: auto; } .grid { display: grid; gap: var(--sp-4); } @media (min-width: 700px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 700px) { .grid--3 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 700px) { .grid--4 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .grid--4 { grid-template-columns: repeat(4, 1fr); } } /* ========================================================================== 5. COMPONENTS ========================================================================== */ /* ---- 5.1 Header --------------------------------------------------------- Transparent over the hero, solidifies on scroll (JS adds .is-solid). ------------------------------------------------------------------------- */ .site-header { position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--header-h); display: flex; align-items: center; transition: background var(--t) var(--ease), border-color var(--t) var(--ease); border-bottom: 1px solid transparent; } .site-header.is-solid { background: color-mix(in srgb, var(--ground) 97%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom-color: var(--line); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); width: 100%; } /* Wordmark — the RECO title travels with the name, per tokens.js. */ .wordmark { display: flex; flex-direction: column; line-height: 1.1; } .wordmark__name { font-family: var(--font-display); font-size: 1.15rem; font-weight: var(--fw-med); letter-spacing: var(--track-tight); color: var(--ink-on-dark); transition: color var(--t) var(--ease); } .wordmark__title { font-size: .62rem; font-weight: var(--fw-semi); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--ink-on-dark-soft); margin-top: 2px; } .is-solid .wordmark__name { color: var(--brand-primary); } .nav-toggle { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-fine); font-weight: var(--fw-semi); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--ink-on-dark); padding: var(--sp-2); transition: color var(--t) var(--ease); } .is-solid .nav-toggle { color: var(--brand-primary); } .nav-toggle__bars { position: relative; width: 20px; height: 9px; } .nav-toggle__bars::before, .nav-toggle__bars::after { content: ''; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform var(--t) var(--ease); } .nav-toggle__bars::before { top: 0; } .nav-toggle__bars::after { bottom: 0; } [aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(3.75px) rotate(45deg); } [aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-3.75px) rotate(-45deg); } .site-nav { position: fixed; inset: var(--header-h) 0 auto 0; background: var(--ground); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); padding: var(--sp-4) var(--gutter) var(--sp-6); display: none; max-height: calc(100dvh - var(--header-h)); overflow-y: auto; } .site-nav[data-open="true"] { display: block; } body.is-locked { overflow: hidden; } .site-nav__list { display: flex; flex-direction: column; } .site-nav__list a { display: block; padding: var(--sp-3) 0; font-size: var(--fs-body); font-weight: var(--fw-med); color: var(--brand-primary); border-bottom: 1px solid var(--line); transition: color var(--t) var(--ease); } .site-nav__list a:hover { color: var(--ink-muted); } .site-nav__list a[aria-current="page"] { color: var(--ink-muted); } .site-nav__cta { margin-top: var(--sp-5); width: 100%; justify-content: center; } @media (min-width: 900px) { .nav-toggle { display: none; } .site-nav { position: static; display: flex; align-items: center; gap: var(--sp-5); background: none; border: 0; box-shadow: none; padding: 0; max-height: none; overflow: visible; } .site-nav__list { flex-direction: row; gap: var(--sp-5); } .site-nav__list a { padding: 0; border: 0; font-size: var(--fs-small); color: var(--ink-on-dark-soft); } .site-nav__list a:hover, .site-nav__list a[aria-current="page"] { color: var(--ink-on-dark); } .is-solid .site-nav__list a { color: var(--ink-muted); } .is-solid .site-nav__list a:hover, .is-solid .site-nav__list a[aria-current="page"] { color: var(--brand-primary); } .site-nav__cta { margin-top: 0; width: auto; } /* .btn--outline is declared later in the file, so these need the extra class to win on specificity rather than source order. */ .btn.site-nav__cta { color: var(--ink-on-dark); border-color: var(--on-photo-line); } .btn.site-nav__cta:hover { background: var(--on-photo-fill); border-color: var(--on-photo-line-strong); } .is-solid .btn.site-nav__cta { color: var(--brand-primary); border-color: var(--line-strong); } .is-solid .btn.site-nav__cta:hover { background: transparent; border-color: var(--brand-primary); } } /* ---- 5.2 Buttons -------------------------------------------------------- Three tiers, all navy: solid, outline, and outline-on-photography. ------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-6); font-size: var(--fs-small); font-weight: var(--fw-med); letter-spacing: var(--track-cta); text-transform: uppercase; border-radius: var(--r-sm); border: 1.5px solid transparent; transition: background var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease); text-align: center; } .btn--solid { background: var(--brand-primary); color: var(--ink-on-dark); border-color: var(--brand-primary); } .btn--solid:hover { background: var(--brand-primary-2); border-color: var(--brand-primary-2); } .btn--outline { color: var(--brand-primary); border-color: var(--line-strong); } .btn--outline:hover { border-color: var(--brand-primary); } /* The hero CTA — outline on photography, never a fill. Audit §7.4. */ .btn--ghost { padding: var(--sp-4) var(--sp-7); color: var(--ink-on-dark); border-color: var(--on-photo-line); background: transparent; } .btn--ghost:hover { background: var(--on-photo-fill); border-color: var(--on-photo-line-strong); } .btn--sm { padding: var(--sp-2) var(--sp-4); font-size: var(--fs-fine); } .btn--block { width: 100%; } /* A quiet text link with an arrow — used to leave a section. */ .link-more { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-small); font-weight: var(--fw-semi); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--brand-primary); border-bottom: 1px solid var(--line-strong); padding-bottom: 2px; transition: border-color var(--t) var(--ease), gap var(--t) var(--ease); } .link-more:hover { border-bottom-color: var(--brand-primary); gap: var(--sp-3); } .section--deep .link-more { color: var(--ink-on-dark); border-bottom-color: var(--line-on-dark); } .section--deep .link-more:hover { border-bottom-color: var(--ink-on-dark); } /* ---- 5.3 Card ----------------------------------------------------------- */ .card { background: var(--ground); border: 1px solid var(--line); border-radius: var(--r); padding: var(--sp-5); box-shadow: var(--shadow); transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease); } a.card:hover, .card--interactive:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); } /* ---- 5.4 Stat ----------------------------------------------------------- The family invariant: wide-tracked label ABOVE, tight figure BELOW, colour only ever on the delta. Audit §6. ------------------------------------------------------------------------- */ .stat__label { display: block; font-size: .66rem; font-weight: var(--fw-semi); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--ink-muted); margin-bottom: var(--sp-2); } .stat__value { display: block; font-family: var(--font-display); font-size: var(--fs-figure); font-weight: var(--fw-med); letter-spacing: var(--track-tight); line-height: 1; font-variant-numeric: tabular-nums; color: var(--brand-primary); } .stat__note { display: block; font-size: var(--fs-fine); color: var(--ink-faint); margin-top: var(--sp-2); } .stat__delta { font-size: var(--fs-small); font-weight: var(--fw-semi); } .stat__delta.is-up { color: var(--up); } .stat__delta.is-down { color: var(--down); } .stat__delta.is-flat { color: var(--flat); } .section--deep .stat__label { color: var(--ink-on-dark-faint); } .section--deep .stat__value { color: var(--ink-on-dark); } .section--deep .stat__note { color: var(--ink-on-dark-faint); } /* An empty slot. NEVER a plausible fake number — audit brief step 8. */ .stat--empty .stat__value { color: var(--ink-faint); font-style: italic; font-size: var(--fs-h3); } .section--deep .stat--empty .stat__value { color: var(--ink-on-dark-faint); } /* ---- 5.5 Agent card ----------------------------------------------------- */ .agent { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-5); } .agent__photo-wrap { width: 140px; height: 140px; flex-shrink: 0; border-radius: 50%; overflow: hidden; border: 1.5px solid var(--line-on-dark); } .agent__photo { width: 100%; height: 100%; object-fit: cover; } .agent__name { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: var(--fw-med); letter-spacing: var(--track-tight); color: var(--ink-on-dark); } .agent__title { font-size: var(--fs-small); font-weight: var(--fw-semi); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--ink-on-dark-soft); margin-top: var(--sp-1); } .agent__brokerage { font-size: var(--fs-small); color: var(--ink-on-dark-soft); margin-top: var(--sp-3); } .agent__contact { display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: center; margin-top: var(--sp-4); } .agent__contact a { font-size: var(--fs-small); font-weight: var(--fw-semi); color: var(--ink-on-dark); border-bottom: 1px solid var(--line-on-dark); } .agent__contact a:hover { border-bottom-color: var(--ink-on-dark); } @media (min-width: 700px) { .agent { flex-direction: row; text-align: left; gap: var(--sp-7); } .agent__info { flex: 1; min-width: 0; } .agent__contact { justify-content: flex-start; } } /* ---- 5.6 Footer --------------------------------------------------------- RECO compliance block. Brokerage name is legible, not fine print. ------------------------------------------------------------------------- */ .site-footer { background: var(--ground-deep); color: var(--ink-on-dark-soft); padding-block: var(--sp-8) var(--sp-5); font-size: var(--fs-small); } .site-footer__grid { display: grid; gap: var(--sp-7); } @media (min-width: 800px) { .site-footer__grid { grid-template-columns: 1.6fr 1fr 1fr; } } .site-footer h2 { font-size: var(--fs-eyebrow); font-family: var(--font-sans); font-weight: var(--fw-semi); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--ink-on-dark-faint); margin-bottom: var(--sp-4); } .site-footer a { color: var(--ink-on-dark-soft); transition: color var(--t) var(--ease); } .site-footer a:hover { color: var(--ink-on-dark); } .site-footer__links li + li { margin-top: var(--sp-3); } /* The RECO block itself. */ .reco__name { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: var(--fw-med); color: var(--ink-on-dark); } .reco__title { font-size: var(--fs-fine); font-weight: var(--fw-semi); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--ink-on-dark-soft); margin-top: var(--sp-1); } .reco__brokerage { font-size: var(--fs-body); font-weight: var(--fw-semi); color: var(--ink-on-dark); margin-top: var(--sp-4); letter-spacing: .01em; } .reco__address { margin-top: var(--sp-2); font-style: normal; line-height: var(--lh-body); } .site-footer__bottom { margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid var(--line-on-dark); display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: space-between; font-size: var(--fs-fine); color: var(--ink-on-dark-faint); } /* ========================================================================== 6. HOMEPAGE ========================================================================== */ /* ---- 6.1 Hero ----------------------------------------------------------- Four layers, per the family: brand gradient fallback -> photo -> scrim -> content. The gradient means the hero still reads before the photo exists. ------------------------------------------------------------------------- */ .hero { position: relative; min-height: 92vh; min-height: 92dvh; display: flex; align-items: center; justify-content: center; text-align: center; padding: calc(var(--header-h) + var(--sp-8)) 0 var(--sp-8); color: var(--ink-on-dark); isolation: isolate; } .hero__bg { position: absolute; inset: 0; z-index: -2; background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-2) 100%); } .hero__bg img { width: 100%; height: 100%; object-fit: cover; } .hero__scrim { position: absolute; inset: 0; z-index: -1; background: var(--scrim); } .hero__inner { width: 100%; max-width: 820px; margin-inline: auto; padding-inline: var(--gutter); } /* The name IS the eyebrow — prominent, tracked 4px. Audit §7.2. */ .hero__eyebrow { font-size: clamp(.95rem, .85rem + .4vw, 1.15rem); font-weight: var(--fw-med); letter-spacing: var(--track-hero-eyebrow); text-transform: uppercase; color: var(--ink-on-dark); margin-bottom: var(--sp-3); } .hero__title-role { display: block; font-size: var(--fs-fine); font-weight: var(--fw-semi); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--ink-on-dark-soft); margin-bottom: var(--sp-6); } /* The headline. LIGHT and SMALL — the single most important rule here. */ .hero__title { font-family: var(--font-sans); font-size: var(--fs-hero); font-weight: var(--fw-hero); line-height: 1.25; letter-spacing: -.3px; color: var(--ink-on-dark); max-width: 24ch; margin-inline: auto; } /* ---- 6.2 Address bar — the primary element ------------------------------ */ .address { margin-top: var(--sp-7); display: grid; gap: var(--sp-3); } .address__label { font-size: var(--fs-fine); font-weight: var(--fw-semi); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--ink-on-dark-soft); } .address__row { display: grid; gap: var(--sp-3); background: color-mix(in srgb, var(--ground) 12%, transparent); border: 1px solid var(--field-line); border-radius: var(--r); padding: var(--sp-3); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: border-color var(--t) var(--ease), background var(--t) var(--ease); } .address__row:focus-within { border-color: var(--field-line-focus); background: color-mix(in srgb, var(--ground) 18%, transparent); } .address__input { width: 100%; padding: var(--sp-4); background: var(--ground); border: 0; border-radius: var(--r-sm); font-size: var(--fs-body); color: var(--ink); } .address__input::placeholder { color: var(--ink-faint); } .address__hint { font-size: var(--fs-fine); color: var(--ink-on-dark-soft); } @media (min-width: 640px) { .address__row { grid-template-columns: 1fr auto; align-items: center; } } .hero__scroll { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); margin-top: var(--sp-9); opacity: .7; } .hero__scroll::before { content: ''; width: 1.5px; height: 45px; background: var(--ink-on-dark); } .hero__scroll span { font-size: var(--fs-fine); letter-spacing: .12em; } @media (min-width: 900px) { .hero__scroll { margin-top: var(--sp-10); } } /* ---- 6.3 Team production strip ------------------------------------------ MUST read as the TEAM's numbers, never Ivaylo's. Visually separated from his name and photo by living in its own dark band with its own label. ------------------------------------------------------------------------- */ .team-strip__label { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-3); margin-bottom: var(--sp-5); } .team-strip__badge { display: inline-block; padding: var(--sp-1) var(--sp-3); border: 1px solid var(--line-on-dark); border-radius: var(--r-pill); font-size: .66rem; font-weight: var(--fw-semi); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--ink-on-dark-soft); } .team-strip__period { font-size: var(--fs-fine); color: var(--ink-on-dark-faint); } .team-strip__grid { display: grid; gap: var(--sp-6); } @media (min-width: 700px) { .team-strip__grid { grid-template-columns: repeat(2, 1fr); } } .team-strip__disclaimer { margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--line-on-dark); font-size: var(--fs-fine); color: var(--ink-on-dark-faint); max-width: none; } .team-strip__disclaimer > span { display: block; max-width: 70ch; } /* ---- 6.4 Service panels (sell / buy) ------------------------------------ */ .panel { position: relative; display: flex; align-items: flex-end; min-height: 340px; border-radius: var(--r); overflow: hidden; color: var(--ink-on-dark); isolation: isolate; background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-2) 100%); } .panel__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; } .panel::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, var(--scrim-strong) 0%, var(--scrim-soft) 55%, transparent 100%); } .panel__body { padding: var(--sp-6); } .panel__title { font-family: var(--font-display); font-size: var(--fs-h2); color: var(--ink-on-dark); } .panel__text { color: var(--ink-on-dark-soft); font-size: var(--fs-small); margin-top: var(--sp-3); max-width: 42ch; } .panel__body .link-more { margin-top: var(--sp-5); color: var(--ink-on-dark); border-bottom-color: var(--line-on-dark); } .panel__body .link-more:hover { border-bottom-color: var(--ink-on-dark); } /* ---- 6.5 Market teaser --------------------------------------------------- */ .market-grid { display: grid; gap: var(--sp-5); } @media (min-width: 700px) { .market-grid { grid-template-columns: repeat(3, 1fr); } } /* The one featured figure on a page. A navy rule, not a second colour. */ .market-featured { border: 2px solid var(--brand-primary); border-radius: var(--r); padding: var(--sp-6); background: var(--ground); box-shadow: var(--shadow); } /* ---- 6.6 Neighbourhood explorer ----------------------------------------- */ .nb-card { position: relative; display: block; border-radius: var(--r); overflow: hidden; isolation: isolate; } .nb-card__img { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease); } .nb-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, var(--scrim-card) 0%, transparent 62%); } .nb-card__body { position: absolute; inset: auto 0 0 0; z-index: 1; padding: var(--sp-5); color: var(--ink-on-dark); } .nb-card__name { display: block; font-family: var(--font-display); font-size: var(--fs-h3); font-weight: var(--fw-med); color: var(--ink-on-dark); } .nb-card__meta { display: block; font-size: var(--fs-fine); color: var(--ink-on-dark-soft); margin-top: var(--sp-1); } .nb-card:hover .nb-card__img { transform: scale(1.04); } /* ---- 6.7 Testimonials ---------------------------------------------------- */ .quote { border-left: 1.5px solid var(--line-strong); padding-left: var(--sp-5); } .quote__text { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: var(--fw-body); line-height: 1.45; color: var(--brand-primary); } .quote__attr { display: block; font-size: var(--fs-fine); font-weight: var(--fw-semi); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--ink-muted); margin-top: var(--sp-4); } .quote--empty .quote__text { color: var(--ink-faint); font-style: italic; } /* ---- 6.8 Contact --------------------------------------------------------- */ .contact-grid { display: grid; gap: var(--sp-7); } @media (min-width: 900px) { .contact-grid { grid-template-columns: 1fr 1fr; align-items: center; } } /* ---- 6.9 Forms ----------------------------------------------------------- */ .field { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-5); } .field__label { font-size: var(--fs-fine); font-weight: var(--fw-semi); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--ink-muted); } .field__input, .field__select, .field__textarea { width: 100%; padding: var(--sp-4); background: var(--ground); color: var(--ink); border: 1.5px solid var(--line-strong); border-radius: var(--r-sm); font-size: var(--fs-body); transition: border-color var(--t) var(--ease); } .field__input:focus, .field__select:focus, .field__textarea:focus { border-color: var(--brand-primary); } .field__input::placeholder { color: var(--ink-faint); } .field__textarea { min-height: 8rem; resize: vertical; } .field__hint { font-size: var(--fs-fine); color: var(--ink-muted); } .check { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3); align-items: start; } .check input { margin-top: .3em; width: 1.05rem; height: 1.05rem; accent-color: var(--brand-primary); } .check label { font-size: var(--fs-small); color: var(--ink-muted); line-height: var(--lh-body); } .form__status { margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm); font-size: var(--fs-small); border: 1px solid var(--line-strong); } .form__status--ok { border-color: var(--up); color: var(--ink); } .form__status--err { border-color: var(--down); color: var(--ink); } /* A standing note — used where something is honestly not wired up yet. */ .notice { border-left: 2px solid var(--brand-primary); background: var(--ground-alt); padding: var(--sp-4) var(--sp-5); border-radius: 0 var(--r-sm) var(--r-sm) 0; font-size: var(--fs-small); color: var(--ink-muted); } .notice strong { color: var(--brand-primary); } /* ---- 6.10 The /value router --------------------------------------------- */ .router { max-width: 34rem; } .router__question { font-family: var(--font-display); font-size: var(--fs-h2); color: var(--brand-primary); margin: var(--sp-6) 0 var(--sp-5); } .router__choices { display: grid; gap: var(--sp-3); } @media (min-width: 560px) { .router__choices { grid-template-columns: 1fr 1fr; } } .choice { display: grid; gap: var(--sp-1); padding: var(--sp-5); text-align: left; border: 1.5px solid var(--line-strong); border-radius: var(--r); background: var(--ground); transition: border-color var(--t) var(--ease), transform var(--t) var(--ease); } .choice:hover { border-color: var(--brand-primary); transform: translateY(-2px); } .choice__title { font-size: var(--fs-body); font-weight: var(--fw-semi); letter-spacing: var(--track-cta); text-transform: uppercase; color: var(--brand-primary); } .choice__note { font-size: var(--fs-fine); color: var(--ink-muted); text-transform: none; letter-spacing: 0; } /* ---- 6.11 Sold results --------------------------------------------------- */ .sold-grid { display: grid; gap: var(--sp-5); } @media (min-width: 700px) { .sold-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .sold-grid { grid-template-columns: repeat(3, 1fr); } } .sold-card { display: flex; flex-direction: column; gap: var(--sp-2); } .sold-card__address { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: var(--fw-med); color: var(--brand-primary); } .sold-card__meta { font-size: var(--fs-fine); color: var(--ink-muted); } .sold-card__price { font-family: var(--font-display); font-size: var(--fs-h3); font-variant-numeric: tabular-nums; color: var(--brand-primary); } .sold-card__foot { margin-top: auto; padding-top: var(--sp-4); } /* ---- 6.12 Prose (about / privacy / guides) ------------------------------- */ .prose { max-width: 68ch; } .prose > * + * { margin-top: var(--sp-4); } .prose h2 { margin-top: var(--sp-7); } .prose h3 { margin-top: var(--sp-6); } .prose ul { padding-left: 1.1rem; list-style: disc; } .prose li + li { margin-top: var(--sp-2); } .prose a { border-bottom: 1px solid var(--line-strong); } .prose a:hover { border-bottom-color: var(--brand-primary); } .prose--on-dark { color: var(--ink-on-dark-soft); } /* ---- 6.13 Link list (tools / news) --------------------------------------- */ .linklist { display: grid; gap: var(--sp-4); } .linklist__item { display: grid; gap: var(--sp-2); padding: var(--sp-5); border: 1px solid var(--line); border-radius: var(--r); background: var(--ground); transition: border-color var(--t) var(--ease), transform var(--t) var(--ease); } a.linklist__item:hover { border-color: var(--line-strong); transform: translateY(-2px); } .linklist__title { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: var(--fw-med); color: var(--brand-primary); } .linklist__note { font-size: var(--fs-small); color: var(--ink-muted); } .linklist__meta { font-size: var(--fs-fine); color: var(--ink-muted); letter-spacing: var(--track-eyebrow); text-transform: uppercase; } /* ---- 6.14 Page header (interior pages) ----------------------------------- */ .page-head { background: var(--ground-deep); color: var(--ink-on-dark); padding: calc(var(--header-h) + var(--sp-8)) 0 var(--sp-8); } .page-head h1 { color: var(--ink-on-dark); font-size: var(--fs-h1); } .page-head .eyebrow { color: var(--ink-on-dark-faint); } .page-head .lede { color: var(--ink-on-dark-soft); margin-top: var(--sp-4); } /* ---- 6.15 The Oakville map ------------------------------------------------ Hand-pathed SVG lifted from myoakvillehomes.ca, restyled to this palette. The original used a clay accent (#c9a07a) for labels; there is no accent colour here, so the labels are white and the separation comes from the stroke and the hover lift instead. -------------------------------------------------------------------------- */ .oakmap { position: relative; } .oakmap svg { width: 100%; height: auto; overflow: visible; display: block; } .oakmap .nh-group { cursor: pointer; transform-origin: center; transition: transform var(--t) var(--ease), filter var(--t) var(--ease); } .oakmap .nh { fill: color-mix(in srgb, var(--brand-primary) 92%, white); stroke: var(--ground); stroke-width: 3; transition: fill var(--t) var(--ease); } .oakmap .nh-group:hover { transform: scale(1.06); } .oakmap .nh-group:hover .nh { fill: var(--brand-primary-2); } .oakmap .nh-group:focus-within .nh { fill: var(--brand-primary-2); } .oakmap .nh-group:focus-within { outline: none; transform: scale(1.06); } .oakmap text { font-family: var(--font-sans); pointer-events: none; } .oakmap .nh-label { fill: var(--ink-on-dark); font-weight: var(--fw-semi); text-anchor: middle; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; } .oakmap .nh-sub { fill: rgba(255,255,255,.6); font-style: italic; font-size: 7px; text-anchor: middle; } .oakmap .road-label, .oakmap .road-label-gap, .oakmap .sub-label { fill: rgba(255,255,255,.6); font-size: 7px; text-anchor: middle; } .oakmap .road-label-gap { fill: color-mix(in srgb, var(--brand-primary) 45%, transparent); } .oakmap .nh-tooltip { opacity: 0; } @media (prefers-reduced-motion: reduce) { .oakmap .nh-group:hover { transform: none; } } .oakmap__legend { margin-top: var(--sp-5); font-size: var(--fs-fine); color: var(--ink-muted); } /* The list beside the map — every community, whether or not the map shows it. */ .nb-list { display: grid; gap: var(--sp-2); } @media (min-width: 560px) { .nb-list { grid-template-columns: 1fr 1fr; } } .nb-list a, .nb-list span { display: block; padding: var(--sp-2) 0; font-size: var(--fs-small); border-bottom: 1px solid var(--line); color: var(--brand-primary); transition: color var(--t) var(--ease); } .nb-list a:hover { color: var(--ink-muted); } .nb-list span { color: var(--ink-faint); } /* ---- 6.16 GTA explorer ---------------------------------------------------- */ .explorer { display: grid; gap: var(--sp-4); max-width: 44rem; } @media (min-width: 720px) { .explorer { grid-template-columns: 1fr 1fr auto; align-items: end; } } .explorer .field { margin-bottom: 0; } /* ---- 6.16b Neighbourhood tracker signup ---------------------------------- Deliberately NOT .explorer. That grid is `1fr 1fr auto`, shaped for exactly [select][select][button]; this form has three fields plus a consent block, a button, a status line and the CASL sender block, and reusing it packed them into three columns and squeezed the labels. Two columns for the pair of selects; everything else spans. */ .tracker-form { display: grid; gap: var(--sp-4); max-width: 44rem; } .tracker-form .field { margin-bottom: 0; } .tracker-form > :not(.field), .tracker-form .field--wide { grid-column: 1 / -1; } @media (min-width: 720px) { .tracker-form { grid-template-columns: 1fr 1fr; } } /* ---- 6.17 Market page ----------------------------------------------------- */ .mk-controls { display: grid; gap: var(--sp-4); margin-bottom: var(--sp-6); } @media (min-width: 720px) { .mk-controls { grid-template-columns: minmax(12rem, 18rem) 1fr; align-items: end; } } .mk-controls .field { margin-bottom: 0; } .pill { font-size: var(--fs-fine); font-weight: var(--fw-semi); letter-spacing: var(--track-eyebrow); text-transform: uppercase; padding: var(--sp-2) var(--sp-4); border-radius: var(--r-pill); border: 1.5px solid var(--line-strong); color: var(--ink-muted); background: transparent; transition: all var(--t) var(--ease); } .pill:hover { border-color: var(--brand-primary); color: var(--brand-primary); } .pill.is-active { background: var(--brand-primary); border-color: var(--brand-primary); color: var(--ink-on-dark); } .pill-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); } .mk-headline { display: grid; gap: var(--sp-5); margin-bottom: var(--sp-6); } @media (min-width: 700px) { .mk-headline { grid-template-columns: 2fr 1fr 1fr; align-items: end; } } .mk-chart { position: relative; } .mk-chart svg { width: 100%; display: block; } .mk-chart svg:first-child { height: 260px; } .mk-line { fill: none; stroke: var(--brand-primary); stroke-width: 2; vector-effect: non-scaling-stroke; } .mk-area { fill: color-mix(in srgb, var(--brand-primary) 8%, transparent); stroke: none; } /* Year labels are HTML, positioned by percentage — SVG text inside a preserveAspectRatio="none" chart would be stretched horizontally. */ .mk-axis { position: relative; height: 1.4rem; margin-top: var(--sp-1); } .mk-tick { position: absolute; transform: translateX(-50%); font-size: var(--fs-fine); color: var(--ink-muted); white-space: nowrap; } .mk-range { display: flex; justify-content: space-between; font-size: var(--fs-fine); color: var(--ink-faint); margin-top: var(--sp-2); font-variant-numeric: tabular-nums; } /* A delta used AS the figure should be sized like one. */ .stat__value .stat__delta { font-size: inherit; font-family: inherit; font-weight: var(--fw-med); } .mk-source { margin-top: var(--sp-4); font-size: var(--fs-fine); color: var(--ink-muted); } /* ---- 6.18 Reviews carousel ------------------------------------------------ Google returns at most five reviews and picks which. Sized for a variable count; with one review the dots are removed rather than shown as a single inert dot. -------------------------------------------------------------------------- */ .rv { overflow: hidden; } .rv-viewport { overflow: hidden; } .rv-track { display: flex; transition: transform var(--t-slow) var(--ease); will-change: transform; } @media (prefers-reduced-motion: reduce) { .rv-track { transition: none; } } .rv-slide { flex: 0 0 auto; padding-right: var(--sp-6); margin: 0; } .rv-text { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: var(--fw-body); line-height: 1.5; color: var(--brand-primary); margin: 0 0 var(--sp-5); max-width: 60ch; } .section--deep .rv-text { color: var(--ink-on-dark); } .rv-by { display: flex; align-items: center; gap: var(--sp-3); } .rv-photo { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .rv-photo--blank { background: var(--line); display: block; } .rv-meta { display: grid; gap: 2px; } .rv-name { font-size: var(--fs-small); font-weight: var(--fw-semi); color: var(--brand-primary); } .section--deep .rv-name { color: var(--ink-on-dark); } .rv-sub { font-size: var(--fs-fine); color: var(--ink-muted); } .section--deep .rv-sub { color: var(--ink-on-dark-soft); } .rv-stars { letter-spacing: .12em; } .rv-dots { display: flex; gap: var(--sp-2); margin-top: var(--sp-6); } .rv-dot { width: 8px; height: 8px; border-radius: 50%; padding: 0; background: var(--line-strong); border: 0; transition: background var(--t) var(--ease), transform var(--t) var(--ease); } .section--deep .rv-dot { background: var(--line-on-dark); } .rv-dot[aria-current="true"] { background: var(--brand-primary); transform: scale(1.4); } .section--deep .rv-dot[aria-current="true"] { background: var(--ink-on-dark); } .rv-attrib { margin-top: var(--sp-5); font-size: var(--fs-fine); color: var(--ink-muted); } .section--deep .rv-attrib { color: var(--ink-on-dark-soft); } .rv-attrib a { border-bottom: 1px solid currentColor; } /* ========================================================================== 7. MOTION ========================================================================== */ [data-reveal] { opacity: 0; transform: translateY(10px); } [data-reveal].is-revealed { opacity: 1; transform: none; /* site.js sets --reveal-delay to stagger siblings inside a .grid */ transition: opacity var(--t-slow) var(--ease) var(--reveal-delay, 0ms), transform var(--t-slow) var(--ease) var(--reveal-delay, 0ms); } .no-js [data-reveal] { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } [data-reveal] { opacity: 1; transform: none; } .site-nav { transition: none; } } /* ========================================================================== 8. UTILITIES & PRINT ========================================================================== */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .stack > * + * { margin-top: var(--sp-4); } .section__foot { margin-top: var(--sp-6); } .center { text-align: center; } @media print { .site-header, .site-nav, .hero__scroll, .address { display: none !important; } body { color: var(--print-ink); background: var(--print-ground); } .section--deep, .site-footer { background: var(--print-ground) !important; color: var(--print-ink) !important; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; } }