/* ═══════════════════════════════════════════════════════════════════════════ ASPEN LIVING UTAH — STYLESHEET v1.0 Aesthetic: Warm domesticity · paper-warm ground, forest ink, committed green Palette: Ivory paper / Bone / Forest ink / Aspen green / Aspen blue / Warm clay Fonts: Switzer (single-family, weights 300/400/500/600) ═══════════════════════════════════════════════════════════════════════════ */ /* ─── DESIGN TOKENS ───────────────────────────────────────────────────────── */ :root { /* Surfaces — warm paper, never #fff */ --bg: oklch(97.5% 0.008 95); --bg-alt: oklch(95% 0.012 92); --bg-tint: oklch(93% 0.014 90); --bg-deep: oklch(20% 0.025 145); --bg-deeper: oklch(15% 0.022 150); /* Brand — drawn from logo, calmed for interface use */ --brand: oklch(58% 0.16 145); --brand-deep: oklch(45% 0.14 148); --brand-light: oklch(72% 0.13 142); --brand-mist: oklch(58% 0.16 145 / 0.10); --brand-veil: oklch(58% 0.16 145 / 0.22); /* Trust — drawn from logo blue */ --trust: oklch(50% 0.13 245); --trust-deep: oklch(38% 0.12 248); --trust-light: oklch(68% 0.10 242); --trust-mist: oklch(50% 0.13 245 / 0.08); /* Warmth accent — used rarely */ --warm: oklch(58% 0.10 50); --warm-deep: oklch(46% 0.09 48); /* Ink — never #000 */ --ink: oklch(22% 0.018 150); --ink-mid: oklch(38% 0.014 145 / 0.92); --ink-lo: oklch(52% 0.012 140 / 0.78); --ink-dim: oklch(64% 0.010 135 / 0.55); /* Ink on dark sections */ --ink-on-deep: oklch(96% 0.012 95); --ink-on-deep-mid: oklch(86% 0.014 95 / 0.84); --ink-on-deep-lo: oklch(72% 0.012 95 / 0.65); /* Borders */ --line: oklch(22% 0.018 150 / 0.10); --line-mid: oklch(22% 0.018 150 / 0.20); --line-strong: oklch(22% 0.018 150 / 0.36); --line-brand: oklch(58% 0.16 145 / 0.45); /* Focus */ --focus: oklch(58% 0.16 145); --focus-shadow: 0 0 0 3px oklch(58% 0.16 145 / 0.32); /* Type scale */ --type-xs: 0.84rem; --type-sm: 0.95rem; --type-base: 1.06rem; --type-md: 1.22rem; --type-lg: 1.45rem; --type-xl: 1.85rem; --type-2xl: 2.4rem; --type-3xl: clamp(2.8rem, 5.5vw, 4.5rem); --type-hero: clamp(3.4rem, 7vw, 6.2rem); --lh-tight: 1.12; --lh-snug: 1.32; --lh-body: 1.65; --lh-loose: 1.78; --tracking-tight: -0.012em; --tracking-eyebrow: 0.18em; /* Fonts */ --font-display: 'Fraunces', 'Georgia', 'Times New Roman', serif; --font-head: 'Switzer', 'Helvetica Neue', Arial, sans-serif; --font-body: 'Switzer', 'Helvetica Neue', Arial, sans-serif; /* Motion */ --ease: cubic-bezier(0.65, 0.05, 0, 1); --t: 0.22s; --t-slow: 0.6s; /* Radius */ --r-xs: 4px; --r-sm: 8px; --r: 14px; --r-lg: 22px; --r-pill: 999px; /* Shadow */ --shadow-xs: 0 1px 2px oklch(22% 0.018 150 / 0.05); --shadow-sm: 0 2px 8px oklch(22% 0.018 150 / 0.06); --shadow-md: 0 8px 24px oklch(22% 0.018 150 / 0.08); --shadow-lg: 0 18px 48px oklch(22% 0.018 150 / 0.10); /* Spacing */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-8: 3rem; --space-10: 4.5rem; --space-12: 6rem; /* Layout */ --container: 1240px; --section-y: clamp(4rem, 9vw, 7rem); --measure: 68ch; } /* ─── READING CONTROLS — applied via .text-lg, .text-xl, .high-contrast, .dyslexia-font on */ html.text-lg { font-size: 19.5px; } html.text-xl { font-size: 21px; } html.high-contrast { --bg: oklch(99% 0 0); --bg-alt: oklch(97% 0 0); --bg-tint: oklch(95% 0 0); --ink: oklch(10% 0 0); --ink-mid: oklch(18% 0 0); --ink-lo: oklch(28% 0 0); --line: oklch(10% 0 0 / 0.3); --line-mid: oklch(10% 0 0 / 0.5); --brand: oklch(40% 0.18 148); --brand-deep: oklch(32% 0.18 148); } html.dyslexia-font, html.dyslexia-font body, html.dyslexia-font * { font-family: 'Atkinson Hyperlegible', 'Lexend', 'Arial', sans-serif !important; letter-spacing: 0.02em; word-spacing: 0.06em; } /* ─── RESET ───────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 18px; scroll-behavior: smooth; } @media (max-width: 480px) { html { font-size: 17px; } } body { font-family: var(--font-body); font-size: var(--type-base); font-weight: 400; background: var(--bg); color: var(--ink); line-height: var(--lh-body); overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Whisper-quiet paper grain */ body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9999; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); opacity: 0.025; mix-blend-mode: multiply; } img, svg { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; transition: color var(--t) var(--ease); } ul, ol { list-style: none; } address { font-style: normal; } button, input, textarea, select { font-family: inherit; font-size: inherit; } button { cursor: pointer; border: none; background: none; color: inherit; } /* ─── FOCUS STYLES (always visible, never removed) ──────────────────────── */ :focus { outline: none; } :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: var(--r-xs); } /* ─── SKIP LINK ──────────────────────────────────────────────────────────── */ .skip-link { position: absolute; top: -40px; left: 0; background: var(--ink); color: var(--bg); padding: 0.75rem 1.25rem; z-index: 999; font-weight: 500; border-bottom-right-radius: var(--r); } .skip-link:focus { top: 0; } /* ─── CONTAINER & SECTION ────────────────────────────────────────────────── */ .container { max-width: var(--container); margin: 0 auto; padding: 0 2rem; } @media (max-width: 640px) { .container { padding: 0 1.25rem; } } .section { padding: var(--section-y) 0; position: relative; } .section--alt { background: var(--bg-alt); } .section--tint { background: var(--bg-tint); } .section--deep { background: var(--bg-deep); color: var(--ink-on-deep); } .section--deep p { color: var(--ink-on-deep-mid); } .section-head { text-align: center; max-width: 660px; margin: 0 auto var(--space-10); } .section-head--left { text-align: left; margin-left: 0; } /* Eyebrow / section-label */ .eyebrow, .section-label { display: inline-block; font-size: 0.82rem; font-weight: 500; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--brand-deep); margin-bottom: var(--space-4); } .section--deep .eyebrow, .section--deep .section-label { color: var(--brand-light); } .section-label { position: relative; padding: 0 1.2rem; } .section-label::before, .section-label::after { content: ''; position: absolute; top: 50%; width: 28px; height: 1px; background: var(--brand); opacity: 0.5; } .section-label::before { right: 100%; transform: translateX(0.8rem); } .section-label::after { left: 100%; transform: translateX(-0.8rem); } /* Section title + sub */ .section-title { font-family: var(--font-head); font-size: var(--type-3xl); font-weight: 500; line-height: var(--lh-tight); color: var(--ink); margin-bottom: var(--space-5); letter-spacing: var(--tracking-tight); } .section--deep .section-title { color: var(--ink-on-deep); } .section-title em { font-style: italic; color: var(--brand); font-weight: 400; } .section-sub { font-size: var(--type-md); color: var(--ink-mid); line-height: var(--lh-snug); max-width: 580px; margin: 0 auto; } .section-head--left .section-sub { margin: 0; } /* ─── TYPOGRAPHY UTILITIES ───────────────────────────────────────────────── */ h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 500; line-height: var(--lh-tight); color: var(--ink); letter-spacing: var(--tracking-tight); } h1 { font-size: var(--type-hero); font-weight: 600; } h2 { font-size: var(--type-3xl); } h3 { font-size: var(--type-2xl); line-height: var(--lh-snug); } h4 { font-size: var(--type-md); font-weight: 500; } p { line-height: var(--lh-body); } p + p { margin-top: var(--space-4); } .lead { font-size: var(--type-md); line-height: var(--lh-snug); color: var(--ink-mid); } .measure { max-width: var(--measure); } .brand-em { font-style: italic; color: var(--brand); font-weight: 400; } /* Flow — vertical rhythm using owl selector */ .flow > * + * { margin-top: var(--space-4); } .flow--tight > * + * { margin-top: var(--space-2); } .flow--loose > * + * { margin-top: var(--space-6); } /* ─── BUTTONS ────────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--font-head); font-size: var(--type-sm); font-weight: 500; letter-spacing: 0.04em; padding: 0.95rem 1.6rem; border-radius: var(--r); border: 1px solid var(--line-strong); color: var(--ink); background: transparent; transition: background var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease), transform var(--t) var(--ease); cursor: pointer; white-space: nowrap; } .btn:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); } .btn:focus-visible { outline-offset: 4px; } .btn--brand { background: var(--brand); color: var(--bg); border-color: var(--brand); } .btn--brand:hover { background: var(--brand-deep); border-color: var(--brand-deep); } .btn--ghost { background: transparent; color: var(--brand-deep); border-color: var(--brand); } .btn--ghost:hover { background: var(--brand); color: var(--bg); } .btn--quiet { border: none; padding: 0.5rem 0; position: relative; border-radius: 0; } .btn--quiet::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor; transform-origin: left; transition: transform var(--t) var(--ease); } .btn--quiet:hover { background: transparent; color: var(--brand-deep); border: none; } .btn--quiet:hover::after { transform: scaleX(0.6); } .btn--lg { padding: 1.1rem 2rem; font-size: var(--type-base); } .btn--block { display: flex; width: 100%; justify-content: center; } .section--deep .btn { color: var(--ink-on-deep); border-color: var(--ink-on-deep-mid); } .section--deep .btn:hover { background: var(--ink-on-deep); color: var(--bg-deep); } .section--deep .btn--brand { background: var(--brand); color: var(--bg-deep); border-color: var(--brand); } /* ─── HEADER ─────────────────────────────────────────────────────────────── */ .header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: oklch(97.5% 0.008 95 / 0); transition: background var(--t-slow) var(--ease), box-shadow var(--t-slow) var(--ease); } .header.scrolled { background: oklch(97.5% 0.008 95 / 0.92); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); box-shadow: 0 1px 0 var(--line); } .header__inner { display: flex; align-items: center; justify-content: space-between; height: 76px; } .brand-mark { display: flex; align-items: center; gap: 0.65rem; font-family: var(--font-head); font-size: 1.2rem; font-weight: 500; color: var(--ink); line-height: 1; letter-spacing: -0.005em; } .brand-mark img { height: 36px; width: auto; } .brand-mark__name em { font-style: italic; color: var(--brand); font-weight: 400; } /* ─── NAV ────────────────────────────────────────────────────────────────── */ .nav { display: flex; align-items: center; gap: 0.25rem; } .nav__list { display: flex; align-items: center; gap: 0.1rem; } .nav__item { position: relative; } .nav__link { display: inline-block; font-size: 0.95rem; font-weight: 500; letter-spacing: 0.02em; color: var(--ink-mid); padding: 0.6rem 0.9rem; border-radius: var(--r-sm); transition: color var(--t) var(--ease), background var(--t) var(--ease); position: relative; } .nav__link:hover { color: var(--ink); } .nav__link.is-active { color: var(--brand-deep); } .nav__link.is-active::after { content: ''; position: absolute; bottom: 0.2rem; left: 0.9rem; right: 0.9rem; height: 1px; background: var(--brand); } /* Dropdown */ .nav__item--dropdown:hover > .nav__dropdown, .nav__item--dropdown:focus-within > .nav__dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .nav__dropdown { position: absolute; top: calc(100% - 4px); left: 0; min-width: 240px; background: var(--bg); border: 1px solid var(--line-mid); border-radius: var(--r); box-shadow: var(--shadow-md); padding: 0.5rem; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity var(--t) var(--ease), transform var(--t) var(--ease), visibility var(--t) var(--ease); } .nav__dropdown li > a { display: block; padding: 0.6rem 0.85rem; font-size: 0.95rem; color: var(--ink-mid); border-radius: var(--r-sm); transition: background var(--t) var(--ease), color var(--t) var(--ease); } .nav__dropdown li > a:hover { background: var(--brand-mist); color: var(--brand-deep); } .nav__cta { margin-left: 0.6rem; } /* Mobile menu toggle */ .nav__toggle { display: none; width: 44px; height: 44px; border-radius: var(--r-sm); background: transparent; position: relative; } .nav__toggle span { position: absolute; left: 10px; right: 10px; height: 1.5px; background: var(--ink); transition: transform var(--t) var(--ease), opacity var(--t) var(--ease), top var(--t) var(--ease); } .nav__toggle span:nth-child(1) { top: 16px; } .nav__toggle span:nth-child(2) { top: 22px; } .nav__toggle span:nth-child(3) { top: 28px; } .nav.is-open .nav__toggle span:nth-child(1) { top: 22px; transform: rotate(45deg); } .nav.is-open .nav__toggle span:nth-child(2) { opacity: 0; } .nav.is-open .nav__toggle span:nth-child(3) { top: 22px; transform: rotate(-45deg); } @media (max-width: 980px) { .nav__toggle { display: block; } .nav__list { position: fixed; inset: 76px 0 0 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--bg); padding: 2rem 1.5rem; overflow-y: auto; transform: translateX(100%); transition: transform var(--t-slow) var(--ease); border-top: 1px solid var(--line); } .nav.is-open .nav__list { transform: translateX(0); } .nav__link { font-size: 1.15rem; padding: 0.95rem 1rem; } .nav__dropdown { position: static; background: var(--bg-alt); box-shadow: none; border: none; opacity: 1; visibility: visible; transform: none; margin: 0.25rem 0 0.75rem 1.5rem; padding: 0.25rem; } .nav__cta { margin: 1rem 1rem 0; } } /* ─── HERO ───────────────────────────────────────────────────────────────── */ .hero { position: relative; padding: 11rem 0 var(--space-10); overflow: hidden; } .hero__inner { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--space-10); align-items: center; } .hero__title { font-family: var(--font-head); font-size: var(--type-hero); font-weight: 600; line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); color: var(--ink); margin-bottom: var(--space-5); } .hero__title em { font-style: italic; color: var(--brand); font-weight: 400; } .hero__sub { font-size: var(--type-md); color: var(--ink-mid); line-height: var(--lh-snug); max-width: 540px; margin-bottom: var(--space-6); } .hero__actions { display: flex; gap: 0.75rem; flex-wrap: wrap; } .hero__visual { position: relative; aspect-ratio: 4/5; border-radius: var(--r-lg); overflow: hidden; background: linear-gradient(160deg, var(--brand-mist), var(--trust-mist)); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; } .hero__visual img { width: 70%; height: auto; opacity: 0.92; } .hero__visual::after { content: attr(data-caption); position: absolute; bottom: 1.5rem; left: 1.5rem; font-size: 0.82rem; color: var(--ink-lo); letter-spacing: 0.02em; } @media (max-width: 900px) { .hero { padding: 8rem 0 var(--space-8); } .hero__inner { grid-template-columns: 1fr; gap: var(--space-8); } .hero__visual { aspect-ratio: 3/4; max-width: 480px; margin: 0 auto; } } /* Typography-first hero variant (no visual column) — used on pages where a placeholder image would weaken the moment */ .hero--solo .hero__solo { max-width: 920px; padding-top: var(--space-4); } .hero--solo .hero__title { max-width: 19ch; } .hero--solo .hero__sub { max-width: 60ch; } /* ─── DISPLAY HEADLINE TREATMENT (Fraunces serif for editorial moments) */ .display { font-family: var(--font-display); font-weight: 400; font-style: normal; font-variation-settings: "opsz" 144, "SOFT" 50; letter-spacing: var(--tracking-tight); line-height: var(--lh-tight); } .display em, .display .brand-em { font-family: var(--font-display); font-style: italic; font-weight: 400; color: var(--brand); } /* ─── 5-AUDIENCE GRID (network model audience entry points) ─────────── */ .audience-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-3); } @media (max-width: 1100px) { .audience-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 720px) { .audience-grid { grid-template-columns: 1fr; gap: var(--space-2); } } .audience-tile { display: flex; flex-direction: column; justify-content: space-between; padding: var(--space-6); min-height: 240px; background: var(--bg); border: 1px solid var(--line-mid); border-radius: var(--r); transition: border-color var(--t) var(--ease), transform var(--t) var(--ease), box-shadow var(--t) var(--ease); position: relative; text-decoration: none; color: inherit; } .audience-tile:hover { border-color: var(--brand); transform: translateY(-3px); box-shadow: var(--shadow-md); } .audience-tile__num { font-family: var(--font-display); font-style: italic; font-size: var(--type-md); color: var(--brand); font-weight: 400; letter-spacing: 0; } .audience-tile__name { font-family: var(--font-head); font-size: var(--type-md); font-weight: 500; line-height: var(--lh-snug); color: var(--ink); margin-top: var(--space-5); } .audience-tile__hint { font-size: 0.88rem; color: var(--ink-mid); margin-top: var(--space-3); } .audience-tile__arrow { position: absolute; bottom: var(--space-5); right: var(--space-5); font-size: 1.4rem; color: var(--ink-lo); transition: transform var(--t) var(--ease), color var(--t) var(--ease); } .audience-tile:hover .audience-tile__arrow { transform: translateX(4px); color: var(--brand-deep); } /* ─── PARTNERSHIP LIST (replaces svc-grid for partnership types) ────── */ .partnership-list { display: grid; gap: 0; max-width: 880px; margin: 0 auto; border-top: 1px solid var(--line); } .partnership-list__item { display: grid; grid-template-columns: 100px 1fr auto; gap: var(--space-5); align-items: baseline; padding: var(--space-6) 0; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; transition: padding-left var(--t) var(--ease); } .partnership-list__item:hover { padding-left: var(--space-3); } .partnership-list__num { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: var(--type-md); color: var(--brand); letter-spacing: 0; } .partnership-list__body h3 { font-family: var(--font-head); font-size: var(--type-lg); font-weight: 500; line-height: var(--lh-snug); margin-bottom: var(--space-2); color: var(--ink); } .partnership-list__body p { color: var(--ink-mid); max-width: 56ch; } .partnership-list__arrow { color: var(--ink-lo); font-size: 1.4rem; transition: transform var(--t) var(--ease), color var(--t) var(--ease); } .partnership-list__item:hover .partnership-list__arrow { color: var(--brand-deep); transform: translateX(4px); } @media (max-width: 720px) { .partnership-list__item { grid-template-columns: 60px 1fr; gap: var(--space-4); } .partnership-list__arrow { display: none; } } /* ─── PHOTO SECTION (full-bleed editorial section break) ────────────── */ .section--photo { position: relative; min-height: 70vh; background-size: cover; background-position: center; display: grid; align-items: center; color: var(--ink-on-deep); overflow: hidden; isolation: isolate; padding: var(--section-y) 0; } .section--photo::before { content: ''; position: absolute; inset: 0; background: linear-gradient( to right, oklch(13% 0.020 150 / 0.70) 0%, oklch(13% 0.020 150 / 0.40) 50%, transparent 90% ); z-index: -1; } .section--photo .section-head { color: var(--ink-on-deep); } .section--photo .section-title { color: var(--ink-on-deep); } .section--photo p { color: var(--ink-on-deep-mid); } .section--photo .eyebrow, .section--photo .section-label { color: var(--brand-light); } /* Photographic hero variant — image as background, text overlay on left */ .hero--image { position: relative; padding: 13rem 0 var(--space-12); background-color: var(--bg-deep); background-size: cover; background-position: center right; background-repeat: no-repeat; color: var(--ink-on-deep); overflow: hidden; isolation: isolate; } .hero--image::before { content: ''; position: absolute; inset: 0; background: linear-gradient( to right, oklch(15% 0.022 150 / 0.78) 0%, oklch(15% 0.022 150 / 0.55) 38%, oklch(15% 0.022 150 / 0.18) 64%, transparent 92% ); z-index: -1; } .hero--image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, oklch(15% 0.022 150 / 0.35) 0%, transparent 30%); z-index: -1; pointer-events: none; } .hero--image .hero__solo { max-width: 720px; padding-top: var(--space-5); position: relative; z-index: 1; } .hero--image .eyebrow { color: var(--brand-light); } .hero--image .hero__title { color: var(--ink-on-deep); max-width: 18ch; text-shadow: 0 2px 24px oklch(15% 0.022 150 / 0.4); } .hero--image .hero__title em.brand-em { color: var(--brand-light); font-style: italic; } .hero--image .hero__sub { color: var(--ink-on-deep-mid); max-width: 56ch; text-shadow: 0 1px 12px oklch(15% 0.022 150 / 0.35); } .hero--image .btn { color: var(--ink-on-deep); border-color: oklch(96% 0.012 95 / 0.45); background: oklch(15% 0.022 150 / 0.35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .hero--image .btn:hover { background: var(--ink-on-deep); color: var(--bg-deep); border-color: var(--ink-on-deep); } .hero--image .btn--brand { background: var(--brand); color: var(--bg); border-color: var(--brand); backdrop-filter: none; -webkit-backdrop-filter: none; } .hero--image .btn--brand:hover { background: var(--brand-deep); border-color: var(--brand-deep); } @media (max-width: 720px) { .hero--image { padding: 9rem 0 var(--space-10); } .hero--image::before { background: linear-gradient( to right, oklch(15% 0.022 150 / 0.85) 0%, oklch(15% 0.022 150 / 0.55) 70%, oklch(15% 0.022 150 / 0.35) 100% ); } } /* ─── DECLARATIVE TRUST LINE (replaces hero-metric trust strip) ─────────── */ .declarative { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: var(--space-6) 0; background: var(--bg-alt); } .declarative__inner { max-width: 880px; margin: 0 auto; text-align: center; padding: 0 2rem; } .declarative p { font-size: var(--type-md); color: var(--ink); line-height: var(--lh-snug); margin: 0; } .declarative strong { color: var(--ink); font-weight: 600; } /* ─── AUDIENCE CARD VARIANTS ─────────────────────────────────────────────── */ .audience__card--families { background: var(--brand-mist); border-color: var(--brand-veil); } .audience__card--families:hover { border-color: var(--brand); background: oklch(58% 0.16 145 / 0.16); } .audience__card--cm { background: var(--trust-mist); border-color: oklch(50% 0.13 245 / 0.22); } .audience__card--cm:hover { border-color: var(--trust); background: oklch(50% 0.13 245 / 0.14); } .audience__card--cm h3, .audience__card--cm .eyebrow { color: var(--trust-deep); } /* ─── OPENINGS PROMINENT (For Case Managers, above-the-fold treatment) ──── */ .openings--prominent { background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--r-lg); padding: var(--space-8); box-shadow: var(--shadow-md); position: relative; } .openings--prominent .openings__header { flex-direction: column; align-items: flex-start; gap: var(--space-2); border-bottom: 1px solid var(--line); padding-bottom: var(--space-5); margin-bottom: var(--space-6); } .openings--prominent .openings__title { font-size: var(--type-xl); font-family: var(--font-head); font-weight: 500; margin: 0; letter-spacing: var(--tracking-tight); } .openings--prominent .openings__updated { font-size: 0.92rem; } /* SLA stat row inside the openings panel */ .openings__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); padding: var(--space-5) 0; margin: 0 0 var(--space-6); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .openings__stat-num { font-family: var(--font-head); font-size: var(--type-lg); font-weight: 500; color: var(--brand-deep); line-height: 1; letter-spacing: var(--tracking-tight); } .openings__stat-label { font-size: 0.82rem; color: var(--ink-lo); margin-top: var(--space-2); letter-spacing: 0.02em; } @media (max-width: 640px) { .openings__stats { grid-template-columns: 1fr; gap: var(--space-3); } } /* ─── SECTION MODIFIERS for varying rhythm ──────────────────────────────── */ .section--tight { padding-top: var(--space-8); padding-bottom: var(--space-8); } .section--loose { padding-top: var(--space-12); padding-bottom: var(--space-12); } .section--no-top { padding-top: 0; } .section--no-bottom { padding-bottom: 0; } /* ─── PROMISE LIST (replaces a card-grid restatement) ──────────────────── */ .promise-list { display: grid; gap: var(--space-5); max-width: 780px; margin: 0 auto; } .promise-list__item { display: grid; grid-template-columns: 32px 1fr; gap: var(--space-4); padding: var(--space-4) 0; border-bottom: 1px solid var(--line); } .promise-list__item:last-child { border-bottom: none; } .promise-list__num { font-family: var(--font-head); font-size: var(--type-md); font-weight: 500; color: var(--brand); line-height: 1.4; } .promise-list__body p { color: var(--ink-mid); } .promise-list__body strong { color: var(--ink); font-weight: 500; display: block; margin-bottom: var(--space-1); } /* ─── TRUST STRIP ────────────────────────────────────────────────────────── */ .trust-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: var(--space-6) 0; background: var(--bg-alt); } .trust-strip__inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); } .trust-strip__item { text-align: center; } .trust-strip__num { font-size: var(--type-xl); font-weight: 600; color: var(--brand-deep); font-family: var(--font-head); line-height: 1; } .trust-strip__label { font-size: 0.82rem; text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--ink-lo); margin-top: var(--space-2); } @media (max-width: 720px) { .trust-strip__inner { grid-template-columns: repeat(2, 1fr); gap: var(--space-5); } } /* ─── AUDIENCE SWITCH (For Families / For Case Managers) ─────────────────── */ .audience { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); } .audience__card { padding: var(--space-8); border: 1px solid var(--line-mid); border-radius: var(--r); background: var(--bg); transition: border-color var(--t) var(--ease), transform var(--t) var(--ease), box-shadow var(--t) var(--ease); } .audience__card:hover { border-color: var(--brand); transform: translateY(-2px); box-shadow: var(--shadow-md); } .audience__card h3 { margin-bottom: var(--space-3); } .audience__card p { color: var(--ink-mid); margin-bottom: var(--space-5); } @media (max-width: 720px) { .audience { grid-template-columns: 1fr; } } /* ─── SERVICE GRID ───────────────────────────────────────────────────────── */ .svc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-5); } .svc-card { position: relative; padding: var(--space-6); border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease); } .svc-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-sm); } .svc-card__num { font-family: var(--font-head); font-size: 0.78rem; font-weight: 500; letter-spacing: var(--tracking-eyebrow); color: var(--brand-deep); margin-bottom: var(--space-3); display: block; } .svc-card h3 { font-size: var(--type-lg); margin-bottom: var(--space-3); line-height: var(--lh-snug); } .svc-card p { color: var(--ink-mid); } .svc-card__link { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: var(--space-4); font-size: 0.9rem; color: var(--brand-deep); font-weight: 500; letter-spacing: 0.02em; } .svc-card__link::after { content: '→'; transition: transform var(--t) var(--ease); } .svc-card:hover .svc-card__link::after { transform: translateX(4px); } /* ─── PROCESS / NUMBERED STEPS ───────────────────────────────────────────── */ .steps { display: grid; gap: var(--space-6); max-width: 820px; margin: 0 auto; } .step { display: grid; grid-template-columns: 64px 1fr; gap: var(--space-5); align-items: start; padding-bottom: var(--space-6); border-bottom: 1px solid var(--line); } .step:last-child { border-bottom: none; } .step__num { font-family: var(--font-head); font-size: var(--type-2xl); font-weight: 300; color: var(--brand); line-height: 1; } .step__body h3 { font-size: var(--type-md); margin-bottom: var(--space-2); line-height: var(--lh-snug); } .step__body p { color: var(--ink-mid); } @media (max-width: 540px) { .step { grid-template-columns: 1fr; gap: var(--space-2); } .step__num { font-size: var(--type-xl); } } /* ─── TESTIMONIAL ────────────────────────────────────────────────────────── */ .quote { max-width: 760px; margin: 0 auto; text-align: left; padding: var(--space-8) 0; } .quote__body { font-size: var(--type-lg); font-weight: 400; line-height: var(--lh-snug); color: var(--ink); font-style: italic; } .quote__body::before { content: '“'; color: var(--brand); margin-right: 0.1em; } .quote__body::after { content: '”'; color: var(--brand); margin-left: 0.05em; } .quote__attribution { margin-top: var(--space-5); font-size: var(--type-sm); color: var(--ink-lo); letter-spacing: 0.02em; } .quote__attribution strong { color: var(--ink); font-weight: 500; } /* ─── FAQ / ACCORDION ────────────────────────────────────────────────────── */ .faq { max-width: 820px; margin: 0 auto; } .faq__item { border-bottom: 1px solid var(--line); } .faq__q { width: 100%; text-align: left; padding: var(--space-5) 0; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); font-family: var(--font-head); font-size: var(--type-md); font-weight: 500; color: var(--ink); line-height: var(--lh-snug); cursor: pointer; transition: color var(--t) var(--ease); } .faq__q:hover { color: var(--brand-deep); } .faq__q::after { content: '+'; font-weight: 300; font-size: var(--type-xl); color: var(--brand); transition: transform var(--t) var(--ease); flex: 0 0 auto; } .faq__item.is-open .faq__q::after { transform: rotate(45deg); } .faq__a { max-height: 0; overflow: hidden; transition: max-height var(--t-slow) var(--ease), padding var(--t-slow) var(--ease); } .faq__a-inner { padding: 0 0 var(--space-5); color: var(--ink-mid); max-width: 64ch; } .faq__item.is-open .faq__a { max-height: 800px; } /* ─── INTAKE FORM ────────────────────────────────────────────────────────── */ .form { max-width: 640px; margin: 0 auto; display: grid; gap: var(--space-4); } .form__row { display: grid; gap: var(--space-2); } .form__row--two { grid-template-columns: 1fr 1fr; gap: var(--space-4); } @media (max-width: 540px) { .form__row--two { grid-template-columns: 1fr; } } .form__label { font-size: 0.85rem; font-weight: 500; color: var(--ink); letter-spacing: 0.01em; } .form__hint { font-size: 0.82rem; color: var(--ink-lo); margin-top: -0.25rem; } .form__input, .form__textarea, .form__select { font-family: var(--font-body); font-size: var(--type-base); padding: 0.85rem 1rem; background: var(--bg); border: 1px solid var(--line-mid); border-radius: var(--r-sm); color: var(--ink); transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease); } .form__input:focus, .form__textarea:focus, .form__select:focus { border-color: var(--brand); box-shadow: var(--focus-shadow); outline: none; } .form__textarea { resize: vertical; min-height: 140px; } .form__radio-group { display: flex; gap: var(--space-3); flex-wrap: wrap; } .form__radio { display: flex; align-items: center; gap: 0.4rem; padding: 0.55rem 0.95rem; border: 1px solid var(--line-mid); border-radius: var(--r-pill); cursor: pointer; font-size: 0.92rem; transition: border-color var(--t) var(--ease), background var(--t) var(--ease); } .form__radio input { accent-color: var(--brand); } .form__radio:has(input:checked) { border-color: var(--brand); background: var(--brand-mist); } .form__submit { margin-top: var(--space-2); } /* ─── HOMES / PROPERTY CARDS ─────────────────────────────────────────────── */ .homes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-5); } .home-card { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--bg); transition: box-shadow var(--t) var(--ease), transform var(--t) var(--ease); } .home-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .home-card__photo { aspect-ratio: 4/3; background: var(--bg-tint); position: relative; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--line); color: var(--ink-lo); font-size: 0.85rem; } .home-card__photo::before { content: ''; position: absolute; inset: 16px; border: 1px dashed var(--line-mid); border-radius: 8px; } .home-card__body { padding: var(--space-5); } .home-card__city { font-size: 0.78rem; text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--brand-deep); margin-bottom: var(--space-2); } .home-card h3 { font-size: var(--type-md); margin-bottom: var(--space-2); } .home-card p { color: var(--ink-mid); font-size: var(--type-sm); } .home-card__meta { display: flex; gap: var(--space-4); margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--line); font-size: 0.85rem; color: var(--ink-lo); } /* ─── OPENINGS PANEL (Case-Managers page) ────────────────────────────────── */ .openings { background: var(--bg); border: 1px solid var(--line-mid); border-radius: var(--r); padding: var(--space-6); } .openings__header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--space-5); padding-bottom: var(--space-4); border-bottom: 1px solid var(--line); } .openings__updated { font-size: 0.82rem; color: var(--ink-lo); } .openings__list { display: grid; gap: var(--space-4); } .opening { display: grid; grid-template-columns: 100px 1fr auto; gap: var(--space-4); padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--r-sm); align-items: center; } .opening__city { font-weight: 500; font-size: 0.95rem; } .opening__details { color: var(--ink-mid); font-size: 0.92rem; } .opening__status { font-size: 0.82rem; text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); padding: 0.25rem 0.6rem; border-radius: var(--r-pill); background: var(--brand-mist); color: var(--brand-deep); font-weight: 500; } .opening__status--watch { background: oklch(58% 0.13 75 / 0.15); color: var(--warm-deep); } .opening__status--full { background: var(--bg-tint); color: var(--ink-lo); } @media (max-width: 540px) { .opening { grid-template-columns: 1fr; gap: var(--space-2); } } /* ─── CITY GRID ──────────────────────────────────────────────────────────── */ .city-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-3); } .city-grid a { display: block; padding: var(--space-4) var(--space-5); border: 1px solid var(--line); border-radius: var(--r-sm); font-size: 0.95rem; color: var(--ink); background: var(--bg); transition: border-color var(--t) var(--ease), background var(--t) var(--ease), color var(--t) var(--ease); } .city-grid a:hover { border-color: var(--brand); background: var(--brand-mist); color: var(--brand-deep); } /* ─── DSPD CALLOUT ───────────────────────────────────────────────────────── */ .callout { background: var(--brand-mist); border-left: none; border: 1px solid var(--brand-veil); border-radius: var(--r); padding: var(--space-6); max-width: 760px; margin: 0 auto; } .callout h3 { font-size: var(--type-md); margin-bottom: var(--space-3); color: var(--brand-deep); } .callout p { color: var(--ink); } /* ─── FOOTER ─────────────────────────────────────────────────────────────── */ .footer { background: var(--bg-deep); color: var(--ink-on-deep); padding: var(--space-12) 0 var(--space-6); } .footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-8); margin-bottom: var(--space-10); } .footer__col h4 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--brand-light); margin-bottom: var(--space-4); font-weight: 500; } .footer__brand { display: flex; align-items: center; gap: 0.65rem; margin-bottom: var(--space-4); color: var(--ink-on-deep); font-family: var(--font-head); font-size: 1.2rem; font-weight: 500; } .footer__brand img { height: 36px; width: auto; } .footer__bio { color: var(--ink-on-deep-mid); font-size: 0.95rem; max-width: 380px; line-height: var(--lh-snug); } .footer ul { display: grid; gap: var(--space-3); } .footer ul a { color: var(--ink-on-deep-mid); font-size: 0.95rem; transition: color var(--t) var(--ease); } .footer ul a:hover { color: var(--brand-light); } .footer__contact a { color: var(--ink-on-deep); font-size: 0.95rem; } .footer__contact a:hover { color: var(--brand-light); } .footer__bottom { display: flex; justify-content: space-between; align-items: center; padding-top: var(--space-5); border-top: 1px solid oklch(96% 0.012 95 / 0.15); font-size: 0.82rem; color: var(--ink-on-deep-lo); flex-wrap: wrap; gap: var(--space-3); } .footer__legal { display: flex; gap: var(--space-5); } .footer__legal a { color: var(--ink-on-deep-lo); } .footer__legal a:hover { color: var(--brand-light); } @media (max-width: 880px) { .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--space-6); } } @media (max-width: 540px) { .footer__grid { grid-template-columns: 1fr; } } /* ─── READING CONTROLS WIDGET ────────────────────────────────────────────── */ .rc-toggle { position: fixed; bottom: 1.25rem; right: 1.25rem; z-index: 90; width: 48px; height: 48px; border-radius: 50%; background: var(--ink); color: var(--bg); display: grid; place-items: center; box-shadow: var(--shadow-md); transition: background var(--t) var(--ease), transform var(--t) var(--ease); } .rc-toggle:hover { background: var(--brand-deep); transform: translateY(-2px); } .rc-toggle svg { width: 22px; height: 22px; } .rc-panel { position: fixed; bottom: 5.5rem; right: 1.25rem; z-index: 90; width: 280px; background: var(--bg); border: 1px solid var(--line-mid); border-radius: var(--r); padding: var(--space-5); box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity var(--t) var(--ease), transform var(--t) var(--ease), visibility var(--t) var(--ease); } .rc-panel.is-open { opacity: 1; visibility: visible; transform: translateY(0); } .rc-panel h4 { font-size: 0.92rem; margin-bottom: var(--space-3); } .rc-row { display: grid; gap: var(--space-2); margin-bottom: var(--space-4); } .rc-row:last-child { margin-bottom: 0; } .rc-row__label { font-size: 0.82rem; color: var(--ink-lo); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); } .rc-buttons { display: flex; gap: 0.4rem; } .rc-btn { flex: 1; padding: 0.55rem 0.6rem; border: 1px solid var(--line-mid); border-radius: var(--r-sm); font-size: 0.85rem; background: var(--bg); color: var(--ink-mid); cursor: pointer; transition: all var(--t) var(--ease); } .rc-btn:hover { border-color: var(--brand); color: var(--brand-deep); } .rc-btn.is-active { border-color: var(--brand); background: var(--brand-mist); color: var(--brand-deep); font-weight: 500; } /* ─── REVEAL ANIMATIONS ──────────────────────────────────────────────────── */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); } .reveal.in { opacity: 1; transform: translateY(0); } .reveal--delay-1 { transition-delay: 0.08s; } .reveal--delay-2 { transition-delay: 0.16s; } .reveal--delay-3 { transition-delay: 0.24s; } /* ─── MEDIA QUERIES — 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; } } /* ─── PRINT ──────────────────────────────────────────────────────────────── */ @media print { body { background: white; color: black; font-size: 11pt; } .header, .footer, .rc-toggle, .rc-panel, .nav__toggle { display: none; } body::before { display: none; } a { color: black; text-decoration: underline; } .section { padding: 1rem 0; } }