/* ===================================================== Lumee Homes — Design System Single source of truth for tokens, base, and every reusable component used across all pages. ===================================================== */ /* ───────────────────────────────────────────────────── DESIGN TOKENS ───────────────────────────────────────────────────── */ :root { /* ── Palette — canonical names (from CLAUDE.md) ───── */ --sage-teal-deep: #2C3C3C; /* logo, nav, footer, key headings */ --deep-charcoal: #2A2925; /* body text, dark panels */ --dawn-cream: #F6F0E4; /* primary background, light sections */ --off-white: #FAF7F2; /* spec strips, form cards, plan views */ --red-clay: #8A2D19; /* CTA / accent — used sparingly */ --yellow-poplar: #C49A6E; /* warm secondary, material panels */ --gunmetal: #5A6560; /* captions, dividers, secondary text */ --brass: #A78B5C; /* small icons, rules, premium detail */ /* ── Palette shades (design-template additions) ───── */ --cream-2: #EFE7D6; --cream-3: #E8DFC9; --sage-2: #243131; --sage-3: #1B2525; --clay-2: #74240f; --poplar-soft: #E1C9A7; /* ── Short aliases used throughout component CSS ──── */ --cream: var(--dawn-cream); --charcoal: var(--deep-charcoal); --sage: var(--sage-teal-deep); --clay: var(--red-clay); --poplar: var(--yellow-poplar); /* ── Placeholder image helpers ─────────────────────── */ --ph: #D8D5CE; --ph-on-sage: #3A4949; --ph-on-clay: #6E2414; --ph-border: rgba(90,101,96,.30); --ph-text: #6b6f6a; /* ── Border radii ───────────────────────────────────── */ --radius: 18px; --radius-lg: 28px; --radius-xl: 36px; /* ── Layout ─────────────────────────────────────────── */ --container: 1320px; --container-narrow: 980px; --gutter: clamp(20px, 4vw, 56px); --nav-h: 52px; /* ── Typography TODO: placeholder web fonts loaded in base.njk confirm final typeface with client */ --font: "Inter", "Manrope", -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif; --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; } /* ───────────────────────────────────────────────────── RESETS + BASE ───────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--cream); color: var(--charcoal); font-family: var(--font); font-size: 17px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; } /* ── Layout containers ──────────────────────────────── */ .container { width: 100%; max-width: var(--container); margin: 0 auto; padding-inline: var(--gutter); } .container-narrow { width: 100%; max-width: var(--container-narrow); margin: 0 auto; padding-inline: var(--gutter); } .container-wide { width: 100%; padding-inline: clamp(20px, 3vw, 40px); } /* ───────────────────────────────────────────────────── TYPOGRAPHY SCALE ───────────────────────────────────────────────────── */ .eyebrow { font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--gunmetal); font-weight: 600; } .eyebrow.on-dark { color: rgba(246,240,228,.62); } h1, h2, h3, h4, h5 { color: var(--sage); font-weight: 600; letter-spacing: -0.025em; line-height: 1.02; margin: 0; text-wrap: balance; } .h-mega { font-size: clamp(56px, 11vw, 168px); font-weight: 700; letter-spacing: -0.045em; line-height: 0.92; } .h-display { font-size: clamp(52px, 8.4vw, 124px); font-weight: 700; letter-spacing: -0.04em; line-height: 0.95; } .h1 { font-size: clamp(44px, 6vw, 92px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.0; } .h2 { font-size: clamp(36px, 4.6vw, 68px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.02; } .h3 { font-size: clamp(24px, 2.2vw, 34px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; } .lede { font-size: clamp(18px, 1.5vw, 23px); line-height: 1.45; color: var(--gunmetal); font-weight: 400; text-wrap: pretty; max-width: 60ch; } .lede-sm { font-size: clamp(15px, 1.05vw, 17px); line-height: 1.55; color: var(--gunmetal); } .on-dark .lede, .on-dark p, .on-dark { color: rgba(246,240,228,.78); } .on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: var(--cream); } /* ───────────────────────────────────────────────────── NAVIGATION ───────────────────────────────────────────────────── */ .nav { position: fixed; inset: 0 0 auto 0; z-index: 80; background: rgba(246,240,228,0.72); backdrop-filter: saturate(180%) blur(22px); -webkit-backdrop-filter: saturate(180%) blur(22px); border-bottom: 1px solid rgba(90,101,96,0.10); } .nav-inner { display: flex; align-items: center; justify-content: space-between; height: var(--nav-h); max-width: var(--container); margin: 0 auto; padding-inline: var(--gutter); } .logo { display: inline-flex; align-items: center; gap: 8px; color: var(--sage); font-weight: 700; font-size: 19px; letter-spacing: -0.02em; } .logo .mark { width: 18px; height: 18px; border-radius: 4px; background: var(--sage); position: relative; display: inline-block; } .logo .mark::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--clay); } .nav-links { display: flex; align-items: center; gap: 32px; } .nav-links a { font-size: 13px; font-weight: 500; color: var(--charcoal); opacity: .82; transition: opacity .15s ease; } .nav-links a:hover, .nav-links a[aria-current="page"] { opacity: 1; } .nav-links a[aria-current="page"] { color: var(--sage); font-weight: 600; } .nav-burger { display: none; background: none; border: 0; padding: 8px; color: var(--sage); } @media (max-width: 880px) { .nav-links { display: none; } .nav-burger { display: inline-flex; } .nav-links.nav-open { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; position: absolute; top: var(--nav-h); left: 0; right: 0; background: rgba(246,240,228,0.97); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); padding: 14px var(--gutter) 20px; border-bottom: 1px solid rgba(90,101,96,.12); } .nav-links.nav-open a { font-size: 15px; padding: 6px 0; opacity: 1; } } /* ───────────────────────────────────────────────────── BUTTONS ───────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 999px; padding: 14px 26px; font-size: 15px; font-weight: 600; letter-spacing: -0.005em; transition: transform .15s ease, background-color .2s ease, color .2s ease; white-space: nowrap; text-align: center; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--clay); color: var(--cream); } .btn-primary:hover { background: var(--clay-2); } .btn-ghost { background: transparent; color: var(--sage); padding: 14px 22px; border-radius: 999px; } .btn-ghost:hover { background: rgba(44,60,60,.08); } .btn-ghost.on-dark { color: var(--cream); border: 1px solid rgba(246,240,228,.32); } .btn-ghost.on-dark:hover { background: rgba(246,240,228,.08); } .btn-light { background: var(--cream); color: var(--clay); } .btn-light:hover { background: #fff; } .btn-link { background: transparent; padding: 0; color: var(--sage); font-weight: 600; font-size: 15px; border-radius: 0; display: inline-flex; align-items: center; gap: 6px; } .btn-link.on-dark { color: var(--cream); } .btn-link::after { content: "→"; transition: transform .2s ease; display: inline-block; } .btn-link:hover::after { transform: translateX(4px); } .btn-sm { padding: 9px 18px; font-size: 13px; } .btn-lg { padding: 18px 32px; font-size: 16px; } /* ───────────────────────────────────────────────────── PLACEHOLDER IMAGE BOXES (.ph + aspect-ratio helpers) ───────────────────────────────────────────────────── */ .ph { background: var(--ph); border: 1px solid var(--ph-border); border-radius: inherit; position: relative; overflow: hidden; color: var(--ph-text); display: flex; align-items: center; justify-content: center; isolation: isolate; width: 100%; height: 100%; } .ph::before { content: ""; position: absolute; inset: 0; background: radial-gradient(140% 100% at 20% 15%, rgba(255,255,255,.5), transparent 60%), radial-gradient(140% 100% at 85% 95%, rgba(42,60,60,.10), transparent 55%); pointer-events: none; } .ph::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(90,101,96,.06) 1px, transparent 1px), linear-gradient(to bottom, rgba(90,101,96,.06) 1px, transparent 1px); background-size: 80px 80px; mask-image: radial-gradient(120% 80% at 50% 50%, #000 30%, transparent 80%); -webkit-mask-image: radial-gradient(120% 80% at 50% 50%, #000 30%, transparent 80%); pointer-events: none; } .ph .label { font-family: var(--mono); font-size: 12px; letter-spacing: 0.01em; text-align: center; padding: 14px 22px; color: var(--ph-text); position: relative; z-index: 1; max-width: 80%; } .ph .corner { position: absolute; top: 16px; left: 18px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; color: var(--ph-text); opacity: .8; z-index: 1; white-space: nowrap; } .ph.on-sage { background: var(--ph-on-sage); border-color: rgba(246,240,228,.10); color: rgba(246,240,228,.55); } .ph.on-sage::before { background: radial-gradient(140% 100% at 20% 15%, rgba(246,240,228,.10), transparent 60%), radial-gradient(140% 100% at 85% 95%, rgba(0,0,0,.30), transparent 55%); } .ph.on-sage::after { background-image: linear-gradient(to right, rgba(246,240,228,.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(246,240,228,.05) 1px, transparent 1px); } .ph.on-sage .label, .ph.on-sage .corner { color: rgba(246,240,228,.55); } .ph.on-clay { background: var(--ph-on-clay); border-color: rgba(246,240,228,.10); color: rgba(246,240,228,.6); } .ph.on-clay .label, .ph.on-clay .corner { color: rgba(246,240,228,.6); } .ratio { position: relative; width: 100%; border-radius: inherit; } .r-16x9 { aspect-ratio: 16 / 9; } .r-4x3 { aspect-ratio: 4 / 3; } .r-3x2 { aspect-ratio: 3 / 2; } .r-3x4 { aspect-ratio: 3 / 4; } .r-1x1 { aspect-ratio: 1 / 1; } .r-21x9 { aspect-ratio: 21 / 9; } .r-2x3 { aspect-ratio: 2 / 3; } .r-2x1 { aspect-ratio: 2 / 1; } /* ───────────────────────────────────────────────────── STORM BADGE ───────────────────────────────────────────────────── */ .storm-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--clay); color: var(--cream); border-radius: 999px; padding: 8px 16px 8px 14px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.01em; white-space: nowrap; } .storm-badge .dot { width: 7px; height: 7px; background: var(--cream); border-radius: 50%; box-shadow: 0 0 0 4px rgba(246,240,228,.16); } /* ───────────────────────────────────────────────────── SECTIONS + SECTION HEADS ───────────────────────────────────────────────────── */ section { padding: clamp(80px, 12vw, 180px) 0; } section.tight { padding: clamp(64px, 9vw, 140px) 0; } section[id] { scroll-margin-top: calc(var(--nav-h) + 12px); } .section-head { text-align: center; margin-bottom: clamp(56px, 7vw, 96px); } .section-head .eyebrow { display: block; margin-bottom: 18px; } .section-head .lede { margin: 22px auto 0; } .section-head.left { text-align: left; margin-left: 0; } .section-head.left .lede { margin-left: 0; } /* ───────────────────────────────────────────────────── BREADCRUMBS ───────────────────────────────────────────────────── */ .crumbs { padding-top: calc(var(--nav-h) + clamp(28px, 3vw, 44px)); padding-bottom: 0; } .crumbs ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--gunmetal); } .crumbs li { display: inline-flex; align-items: center; gap: 10px; } .crumbs li + li::before { content: "/"; color: var(--brass); } .crumbs a:hover { color: var(--sage); } .crumbs [aria-current="page"] { color: var(--sage); } /* ───────────────────────────────────────────────────── HERO ───────────────────────────────────────────────────── */ .hero { padding-top: calc(var(--nav-h) + clamp(56px, 7vw, 96px)); padding-bottom: clamp(40px, 6vw, 80px); text-align: center; position: relative; } .hero .container { display: flex; flex-direction: column; align-items: center; gap: 28px; } .hero .h-mega { max-width: 16ch; } .hero .lede { margin: 0 auto; text-align: center; } .hero-ctas { display: inline-flex; gap: 14px; flex-wrap: wrap; justify-content: center; } .hero-stage { margin-top: clamp(48px, 7vw, 96px); padding-inline: clamp(16px, 2.5vw, 40px); } .hero-stage .ratio { border-radius: var(--radius-xl); overflow: hidden; max-width: 1640px; margin: 0 auto; } .hero-meta { margin-top: 22px; display: flex; justify-content: center; gap: 36px; color: var(--gunmetal); font-size: 13px; flex-wrap: wrap; } .hero-meta span { display: inline-flex; align-items: center; gap: 8px; } .hero-meta .pip { width: 6px; height: 6px; border-radius: 50%; background: var(--clay); display: inline-block; } @media (max-width: 640px) { .hero-meta { flex-direction: column; align-items: center; gap: 10px; } } /* ───────────────────────────────────────────────────── STATEMENT (Home — gradient display heading) ───────────────────────────────────────────────────── */ .statement { padding: clamp(80px, 10vw, 140px) 0; text-align: center; } .statement .h-display { background: linear-gradient(180deg, var(--sage) 0%, var(--sage-2) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .statement .lede { margin: 36px auto 0; } /* ───────────────────────────────────────────────────── STATS ───────────────────────────────────────────────────── */ .stats { padding: clamp(40px, 6vw, 96px) 0 clamp(80px, 12vw, 160px); } .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 2.5vw, 40px); align-items: stretch; border-top: 1px solid rgba(90,101,96,.25); } .stat { padding-top: 28px; display: flex; flex-direction: column; } .stat .n { font-size: clamp(48px, 6.5vw, 96px); font-weight: 700; letter-spacing: -0.045em; color: var(--sage); line-height: 0.95; font-feature-settings: "tnum" 1; } .stat .n .u { font-size: 0.4em; font-weight: 600; margin-left: 6px; color: var(--gunmetal); letter-spacing: -0.01em; } .stat .l { margin-top: 18px; font-size: 14px; color: var(--gunmetal); line-height: 1.45; max-width: 24ch; } .stat .k { font-family: var(--mono); font-size: 11px; color: var(--gunmetal); letter-spacing: .04em; margin-bottom: 12px; display: block; } @media (max-width: 900px) { .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 44px 28px; } } @media (max-width: 520px) { .stats-grid { grid-template-columns: 1fr; } } /* ───────────────────────────────────────────────────── MODEL TILES (product cards, 3-col grid) ───────────────────────────────────────────────────── */ .models { background: var(--cream); } .models-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: clamp(48px, 6vw, 80px); } .models-head h2 { max-width: 16ch; } @media (max-width: 720px) { .models-head { flex-direction: column; align-items: flex-start; } } .models-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2vw, 32px); } .model-tile { background: var(--cream-2); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; transition: transform .25s ease; } .model-tile:hover { transform: translateY(-4px); } .model-tile .ratio { border-radius: 0; } .model-tile .ph { border-radius: 0; border-top: 0; border-left: 0; border-right: 0; border-bottom: 1px solid var(--ph-border); } .model-tile.cream-3 { background: var(--cream-3); } .model-tile.poplar { background: var(--poplar-soft); } .model-tile-body { padding: clamp(24px, 2.4vw, 36px); display: flex; flex-direction: column; gap: 14px; flex: 1; } .model-tile-body .row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .model-tile h3 { letter-spacing: -0.025em; } .model-tile .tag { font-family: var(--mono); font-size: 11px; color: var(--gunmetal); letter-spacing: .04em; } .model-tile .desc { color: var(--gunmetal); font-size: 15px; line-height: 1.5; margin: 0; } .model-specs { display: flex; gap: 22px; flex-wrap: wrap; color: var(--charcoal); font-size: 13.5px; padding-top: 16px; margin-top: auto; border-top: 1px solid rgba(90,101,96,.18); } .model-specs span { display: inline-flex; align-items: center; gap: 7px; color: var(--sage); font-weight: 600; } .model-specs span .u { color: var(--gunmetal); font-weight: 500; } .model-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 4px; } @media (max-width: 980px) { .models-grid { grid-template-columns: 1fr; } } /* ───────────────────────────────────────────────────── MATTERS (4-card grid) ───────────────────────────────────────────────────── */ .matters { background: var(--cream); } .matters-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 1.8vw, 24px); } .matter { background: var(--cream-2); border-radius: var(--radius-lg); padding: clamp(28px, 2.8vw, 40px); min-height: 300px; display: flex; flex-direction: column; } .matter .matter-eyebrow { font-family: var(--mono); font-size: 11px; color: var(--clay); letter-spacing: .08em; margin-bottom: 32px; } .matter h3 { margin: 0 0 12px; max-width: 14ch; } .matter p { font-size: 14.5px; line-height: 1.5; color: var(--gunmetal); margin: auto 0 0; max-width: 32ch; } .matters-grid.three { grid-template-columns: repeat(3, 1fr); } .matters-grid.two { grid-template-columns: repeat(2, 1fr); } @media (max-width: 1080px) { .matters-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 980px) { .matters-grid.three { grid-template-columns: 1fr; } } @media (max-width: 560px) { .matters-grid, .matters-grid.two { grid-template-columns: 1fr; } } /* ───────────────────────────────────────────────────── BENTO / FEATURE TILES (Home page) ───────────────────────────────────────────────────── */ .bento { padding: clamp(40px, 6vw, 96px) 0 clamp(80px, 12vw, 160px); } .bento-grid { display: grid; grid-template-columns: 1.4fr 1fr; grid-template-rows: auto auto; gap: clamp(16px, 1.8vw, 24px); } .tile { position: relative; border-radius: var(--radius-lg); overflow: hidden; padding: clamp(28px, 3vw, 48px); background: var(--cream-2); color: var(--charcoal); display: flex; flex-direction: column; min-height: 320px; } .tile.dark { background: var(--sage); color: rgba(246,240,228,.82); } .tile.dark h3 { color: var(--cream); } .tile.clay { background: var(--clay); color: rgba(246,240,228,.86); } .tile.clay h3 { color: var(--cream); } .tile.poplar { background: var(--poplar-soft); } .tile .tile-eyebrow { font-family: var(--mono); font-size: 11px; color: inherit; opacity: .65; letter-spacing: .06em; margin-bottom: 18px; } .tile h3 { max-width: 18ch; margin-bottom: 14px; } .tile p { font-size: 15px; line-height: 1.5; color: inherit; opacity: .8; margin: 0; max-width: 38ch; } .tile .tile-art { margin-top: auto; padding-top: 28px; } .tile-art .ratio { border-radius: var(--radius); overflow: hidden; } .tile .tile-art .ph { border-radius: var(--radius); } .bento .feature-big { grid-column: 1 / 2; grid-row: 1 / 3; min-height: 560px; } .bento .feature-big .tile-art { margin-top: 36px; } .bento .feature-big .ratio { aspect-ratio: 16 / 11; } @media (max-width: 980px) { .bento-grid { grid-template-columns: 1fr; } .bento .feature-big { grid-column: auto; grid-row: auto; min-height: 480px; } } /* ───────────────────────────────────────────────────── PROCESS / STEPS ───────────────────────────────────────────────────── */ .process { background: var(--cream-2); } .process-head { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; margin-bottom: clamp(56px, 7vw, 96px); } .process-head h2 { max-width: 16ch; } .process-head .lede { max-width: 44ch; } @media (max-width: 820px) { .process-head { grid-template-columns: 1fr; } } .steps-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(16px, 1.6vw, 24px); } .step { background: var(--cream); border-radius: var(--radius); padding: 28px 24px; display: flex; flex-direction: column; min-height: 220px; } .step .num { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--clay); margin-bottom: 32px; } .step h4 { font-size: 17px; font-weight: 600; color: var(--sage); margin: 0 0 8px; letter-spacing: -0.015em; line-height: 1.2; } .step p { font-size: 13.5px; line-height: 1.5; color: var(--gunmetal); margin: 0; } @media (min-width: 1101px) { .steps-grid.five { grid-template-columns: repeat(5, 1fr); } } @media (max-width: 1100px) { .steps-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 640px) { .steps-grid { grid-template-columns: repeat(2, 1fr); } .step { min-height: 180px; } } /* ───────────────────────────────────────────────────── WHY-STEEL (dark sage section) ───────────────────────────────────────────────────── */ .why-steel { background: var(--sage); color: rgba(246,240,228,.78); padding: clamp(96px, 13vw, 200px) 0; overflow: hidden; } .why-steel h2 { color: var(--cream); } .why-steel .eyebrow { color: rgba(246,240,228,.55); } .why-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(48px, 6vw, 96px); align-items: center; } .why-copy h2 { max-width: 14ch; margin-bottom: 28px; } .why-copy .lede { color: rgba(246,240,228,.78); margin-bottom: 40px; max-width: 50ch; } .why-art .ratio { border-radius: var(--radius-lg); overflow: hidden; } .why-art .ph { border-radius: var(--radius-lg); } .why-benefits { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 36px; margin-bottom: 40px; } .why-benefit { padding-top: 22px; border-top: 1px solid rgba(246,240,228,.18); } .why-benefit h4 { font-size: 16px; color: var(--cream); margin: 0 0 6px; letter-spacing: -0.015em; } .why-benefit p { font-size: 13.5px; color: rgba(246,240,228,.7); line-height: 1.5; margin: 0; } @media (max-width: 980px) { .why-grid { grid-template-columns: 1fr; } .why-benefits { grid-template-columns: 1fr; } } /* ───────────────────────────────────────────────────── TOUR CINEMA (dark sage-3 full-width) ───────────────────────────────────────────────────── */ .tour { background: var(--sage-3); color: var(--cream); padding: clamp(96px, 13vw, 200px) 0; } .tour .section-head h2 { color: var(--cream); max-width: 18ch; margin: 0 auto; } .tour .section-head .eyebrow { color: rgba(246,240,228,.55); } .tour .section-head .lede { color: rgba(246,240,228,.7); } .tour-frame { position: relative; border-radius: var(--radius-xl); overflow: hidden; } .tour-frame .ratio { border-radius: var(--radius-xl); overflow: hidden; } .tour-frame .ph { border-radius: var(--radius-xl); } .play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 2; pointer-events: none; } .play .dot { width: clamp(72px, 7vw, 112px); height: clamp(72px, 7vw, 112px); border-radius: 50%; background: rgba(246,240,228,.94); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 50px rgba(0,0,0,.4); } .play svg { width: 32%; height: 32%; fill: var(--sage); } .tour-cap { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-top: 32px; color: rgba(246,240,228,.7); } .tour-cap .h3 { color: var(--cream); } @media (max-width: 720px) { .tour-cap { flex-direction: column; align-items: flex-start; } } /* ───────────────────────────────────────────────────── TOUR PREVIEW CARDS (Home page grid) ───────────────────────────────────────────────────── */ .tours { background: var(--sage-3); color: var(--cream); padding: clamp(96px, 13vw, 180px) 0; } .tours .section-head h2 { color: var(--cream); } .tours .section-head .eyebrow { color: rgba(246,240,228,.55); } .tours .section-head .lede { color: rgba(246,240,228,.7); margin: 28px auto 0; } .tours-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2vw, 28px); } .tour-card { background: var(--sage-2); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; transition: transform .25s ease; } .tour-card:hover { transform: translateY(-4px); } .tour-card .frame { position: relative; border-radius: 0; } .tour-card .frame .ph { border-radius: 0; } .tour-card .play .dot { width: 64px; height: 64px; } .tour-card-body { padding: 26px 28px 30px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .tour-card-body .row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .tour-card h3 { color: var(--cream); } .tour-card .tag { font-family: var(--mono); font-size: 11px; color: rgba(246,240,228,.55); letter-spacing: .06em; } .tour-card .desc { color: rgba(246,240,228,.7); font-size: 14px; margin: 0; line-height: 1.5; } .tour-card .btn-link { margin-top: auto; padding-top: 18px; color: var(--cream); } .tours .tours-foot { margin-top: clamp(40px, 5vw, 64px); text-align: center; } @media (max-width: 900px) { .tours-grid { grid-template-columns: 1fr; } } /* ───────────────────────────────────────────────────── COLLAGE GRID ───────────────────────────────────────────────────── */ .collage-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 1.8vw, 24px); } .collage-tile { background: var(--cream-2); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; } .collage-tile .ratio { border-radius: 0; } .collage-tile .ph { border-radius: 0; border-top: 0; border-left: 0; border-right: 0; border-bottom: 1px solid var(--ph-border); } .collage-cap { display: flex; justify-content: space-between; align-items: baseline; padding: 22px 28px; font-size: 14.5px; gap: 16px; } .collage-cap .label { color: var(--sage); font-weight: 600; letter-spacing: -0.01em; } .collage-cap .ratio-tag { font-family: var(--mono); font-size: 11px; color: var(--gunmetal); letter-spacing: .04em; } @media (max-width: 720px) { .collage-grid { grid-template-columns: 1fr; } } /* ───────────────────────────────────────────────────── FAQ ACCORDION ───────────────────────────────────────────────────── */ .faq { background: var(--cream); } .faq .container-narrow { max-width: 920px; } .faq-list { border-top: 1px solid rgba(90,101,96,.22); margin-top: clamp(24px, 3vw, 40px); } .faq-item { border-bottom: 1px solid rgba(90,101,96,.22); } .faq-item > summary { list-style: none; cursor: pointer; padding: 28px 0; display: flex; align-items: center; gap: 28px; justify-content: space-between; } .faq-item > summary::-webkit-details-marker { display: none; } .faq-item .q { font-size: clamp(19px, 1.5vw, 23px); font-weight: 600; color: var(--sage); letter-spacing: -0.015em; line-height: 1.25; flex: 1; max-width: 60ch; } .faq-item .toggle { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(90,101,96,.4); position: relative; transition: background .2s ease, border-color .2s ease; } .faq-item .toggle::before, .faq-item .toggle::after { content: ""; position: absolute; inset: 0; margin: auto; background: var(--sage); } .faq-item .toggle::before { width: 12px; height: 1.5px; } .faq-item .toggle::after { width: 1.5px; height: 12px; transition: transform .25s ease, opacity .2s ease; } .faq-item[open] > summary .toggle { background: var(--sage); border-color: var(--sage); } .faq-item[open] > summary .toggle::before { background: var(--cream); } .faq-item[open] > summary .toggle::after { opacity: 0; transform: rotate(90deg); } .faq-item .a { color: var(--gunmetal); font-size: 16px; line-height: 1.6; max-width: 64ch; padding: 0 0 32px; margin: 0; } .faq-item .a + .a { margin-top: 14px; padding-top: 0; } /* ───────────────────────────────────────────────────── COMPARISON TABLE (desktop) + CARDS (mobile) ───────────────────────────────────────────────────── */ .compare { background: var(--cream); } .compare-table { width: 100%; border-collapse: collapse; table-layout: fixed; } .compare-table th, .compare-table td { padding: 22px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid rgba(90,101,96,.18); } .compare-table thead th { font-size: clamp(20px, 1.6vw, 26px); color: var(--sage); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; padding-top: 0; padding-bottom: 26px; border-bottom: 1px solid rgba(90,101,96,.32); } .compare-table thead .label-col, .compare-table tbody th.label-col { font-family: var(--mono); font-size: 11px; color: var(--gunmetal); letter-spacing: .08em; text-transform: uppercase; font-weight: 600; } .compare-table tbody th.label-col { width: 22%; vertical-align: middle; } .compare-table td { font-size: 15.5px; color: var(--charcoal); font-feature-settings: "tnum" 1; } .compare-table td.available { color: var(--sage); font-weight: 600; } .compare-table td .sub { display: block; font-size: 12.5px; color: var(--gunmetal); font-weight: 400; margin-top: 4px; } .compare-table .price-cta { color: var(--clay); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .compare-foot { margin-top: clamp(40px, 5vw, 64px); display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; } .compare-cards { display: none; } @media (max-width: 820px) { .compare-table { display: none; } .compare-cards { display: grid; gap: 20px; } .compare-card { background: var(--cream-2); border-radius: var(--radius-lg); padding: clamp(24px, 3vw, 32px); } .compare-card h3 { margin: 0 0 18px; font-size: 26px; } .compare-card .row { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px 16px; padding: 14px 0; border-top: 1px solid rgba(90,101,96,.2); } .compare-card .k { font-family: var(--mono); font-size: 11px; color: var(--gunmetal); letter-spacing: .06em; text-transform: uppercase; font-weight: 600; } .compare-card .v { font-size: 15px; color: var(--charcoal); } .compare-card .v.available { color: var(--sage); font-weight: 600; } } /* ───────────────────────────────────────────────────── CTA BANNERS (three variants) ───────────────────────────────────────────────────── */ .cta-banner { background: var(--clay); color: var(--cream); padding: clamp(120px, 16vw, 240px) 0; text-align: center; } .cta-banner h2 { color: var(--cream); margin: 0 auto; max-width: 18ch; } .cta-banner .lede { color: rgba(246,240,228,.78); margin: 28px auto 0; } .cta-banner .actions { margin-top: 44px; display: inline-flex; gap: 14px; flex-wrap: wrap; justify-content: center; } .cta-soft { background: var(--cream-2); padding: clamp(96px, 12vw, 160px) 0; text-align: center; } .cta-soft .eyebrow { display: block; margin-bottom: 18px; } .cta-soft h2 { max-width: 18ch; margin: 0 auto; } .cta-soft .lede { margin: 24px auto 0; } .cta-soft .actions { margin-top: 36px; display: inline-flex; gap: 14px; flex-wrap: wrap; justify-content: center; } .cta-split { background: var(--cream-2); padding: clamp(96px, 12vw, 160px) 0; } .cta-split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 2vw, 32px); } .cta-split-tile { border-radius: var(--radius-lg); padding: clamp(40px, 5vw, 64px); display: flex; flex-direction: column; gap: 16px; min-height: 380px; } .cta-split-tile.dark { background: var(--sage); color: rgba(246,240,228,.78); } .cta-split-tile.dark h3 { color: var(--cream); } .cta-split-tile.clay { background: var(--clay); color: rgba(246,240,228,.86); } .cta-split-tile.clay h3 { color: var(--cream); } .cta-split-tile .eyebrow { color: inherit; opacity: .7; display: block; margin-bottom: 4px; } .cta-split-tile h3 { font-size: clamp(28px, 3vw, 44px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.05; max-width: 16ch; } .cta-split-tile p { margin: 0; max-width: 36ch; line-height: 1.55; } .cta-split-tile .actions { margin-top: auto; padding-top: 24px; } @media (max-width: 820px) { .cta-split-grid { grid-template-columns: 1fr; } } /* ───────────────────────────────────────────────────── FOOTER ───────────────────────────────────────────────────── */ footer { background: var(--sage); color: rgba(246,240,228,.7); padding: clamp(72px, 8vw, 120px) 0 36px; } footer a { color: rgba(246,240,228,.78); } footer a:hover { color: var(--cream); } .footer-top { display: grid; grid-template-columns: 1.4fr 0.8fr 0.8fr 0.8fr 1.4fr; gap: clamp(28px, 4vw, 56px); padding-bottom: 56px; border-bottom: 1px solid rgba(246,240,228,.12); } .footer-brand .logo { color: var(--cream); font-size: 22px; margin-bottom: 18px; } .footer-brand p { font-size: 14px; line-height: 1.55; max-width: 32ch; margin: 0; } .footer-col h5 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--cream); font-weight: 600; margin: 0 0 18px; } .footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; font-size: 14px; } .footer-form h5 { margin-bottom: 14px; } .footer-form .lede-sm { color: rgba(246,240,228,.6); margin: 0 0 18px; font-size: 13.5px; } .footer-form .field { display: flex; gap: 10px; background: rgba(246,240,228,.07); border: 1px solid rgba(246,240,228,.18); border-radius: 999px; padding: 6px 6px 6px 20px; align-items: center; } .footer-form input { flex: 1; background: transparent; border: 0; color: var(--cream); font: inherit; font-size: 14px; padding: 10px 0; outline: none; } .footer-form input::placeholder { color: rgba(246,240,228,.45); } .footer-form .btn { background: var(--clay); color: var(--cream); } .footer-form .btn:hover { background: var(--clay-2); } .footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 32px; font-size: 12.5px; color: rgba(246,240,228,.55); flex-wrap: wrap; gap: 16px; } .footer-bottom nav { display: flex; gap: 22px; } @media (max-width: 1080px) { .footer-top { grid-template-columns: 1.4fr 1fr 1fr; } .footer-form { grid-column: 1 / -1; max-width: 520px; } } @media (max-width: 640px) { .footer-top { grid-template-columns: 1fr 1fr; } .footer-brand, .footer-form { grid-column: 1 / -1; } } /* ───────────────────────────────────────────────────── SCROLL REVEAL ───────────────────────────────────────────────────── */ .js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); will-change: opacity, transform; } .js .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } } /* ===================================================== PAGE-SPECIFIC COMPONENTS ===================================================== */ /* ── Hero — catalogue variant (Homes catalogue page) ─── */ .hero-catalogue .h-mega { font-size: clamp(48px, 7vw, 100px); max-width: 22ch; } .hero-catalogue .thumbs { margin-top: clamp(48px, 7vw, 96px); padding-inline: clamp(16px, 2.5vw, 40px); } .hero-catalogue .thumbs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 1.8vw, 24px); max-width: 1640px; margin: 0 auto; } .hero-catalogue .thumb { background: var(--cream-2); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; transition: transform .25s ease; } .hero-catalogue .thumb:hover { transform: translateY(-4px); } .hero-catalogue .thumb.cream-3 { background: var(--cream-3); } .hero-catalogue .thumb.poplar { background: var(--poplar-soft); } .hero-catalogue .thumb .ratio { border-radius: 0; } .hero-catalogue .thumb .ph { border-radius: 0; } .hero-catalogue .thumb-cap { padding: 22px 24px; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; } .hero-catalogue .thumb-cap .name { color: var(--sage); font-weight: 700; font-size: 20px; letter-spacing: -0.015em; } .hero-catalogue .thumb-cap .tag { font-family: var(--mono); font-size: 11px; color: var(--gunmetal); letter-spacing: .06em; } @media (max-width: 820px) { .hero-catalogue .thumbs-grid { grid-template-columns: 1fr; } } /* ── Model hero (spec strip) ─────────────────────────── */ .model-hero { padding-top: clamp(28px, 3vw, 44px); padding-bottom: clamp(64px, 8vw, 120px); } .model-hero .head { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(32px, 4vw, 56px); align-items: end; margin-bottom: clamp(40px, 5vw, 72px); } .model-hero .head h1 { max-width: 12ch; } .model-hero .head .lede { max-width: 44ch; margin: 24px 0 0; } .model-hero .head .meta { display: flex; flex-direction: column; gap: 18px; } .model-hero .head .actions { display: inline-flex; gap: 12px; flex-wrap: wrap; } @media (max-width: 880px) { .model-hero .head { grid-template-columns: 1fr; align-items: start; } } .model-stage { position: relative; border-radius: var(--radius-xl); overflow: hidden; } .model-stage .ratio { border-radius: var(--radius-xl); overflow: hidden; } .model-stage .ph { border-radius: var(--radius-xl); } .spec-strip { margin-top: clamp(20px, 2vw, 28px); background: var(--off-white); border: 1px solid rgba(90,101,96,.18); border-radius: var(--radius); padding: clamp(20px, 2vw, 28px) clamp(24px, 3vw, 40px); display: grid; grid-template-columns: repeat(5, 1fr); gap: 28px; } .spec-strip .cell { display: flex; flex-direction: column; gap: 6px; } .spec-strip .k { font-family: var(--mono); font-size: 11px; color: var(--gunmetal); letter-spacing: .08em; text-transform: uppercase; font-weight: 600; } .spec-strip .v { font-size: clamp(20px, 2vw, 28px); color: var(--sage); font-weight: 700; letter-spacing: -0.02em; font-feature-settings: "tnum" 1; } .spec-strip .v .u { font-size: 0.5em; font-weight: 600; color: var(--gunmetal); margin-left: 4px; letter-spacing: 0; } @media (max-width: 880px) { .spec-strip { grid-template-columns: repeat(2, 1fr); gap: 18px 24px; } } @media (max-width: 480px) { .spec-strip { grid-template-columns: 1fr 1fr; } } /* ── Editorial 2×2 grid (Interior Experience) ────────── */ .editorial-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 1.8vw, 24px); } .editorial-tile { background: var(--cream-2); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; } .editorial-tile.poplar { background: var(--poplar-soft); } .editorial-tile .ratio { border-radius: 0; } .editorial-tile .ph { border-radius: 0; border-top: 0; border-left: 0; border-right: 0; border-bottom: 1px solid var(--ph-border); } .editorial-tile .body { padding: clamp(24px, 2.5vw, 36px); display: flex; flex-direction: column; gap: 10px; } .editorial-tile .body .tag { font-family: var(--mono); font-size: 11px; color: var(--clay); letter-spacing: .08em; margin-bottom: 4px; } .editorial-tile h3 { font-size: clamp(22px, 1.8vw, 28px); } .editorial-tile p { color: var(--gunmetal); font-size: 14.5px; margin: 0; line-height: 1.5; max-width: 36ch; } @media (max-width: 720px) { .editorial-grid { grid-template-columns: 1fr; } } /* ── Split layout (text + art, reversible) ───────────── */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 5vw, 80px); align-items: center; } .split.reverse { direction: rtl; } .split.reverse > * { direction: ltr; } .split .art .ratio { border-radius: var(--radius-lg); overflow: hidden; } .split .art .ph { border-radius: var(--radius-lg); } .split .copy h2 { max-width: 14ch; margin-bottom: 22px; } .split .copy .lede { margin: 0 0 32px; max-width: 48ch; } .split-list { display: flex; flex-direction: column; border-top: 1px solid rgba(90,101,96,.22); } .split-list .item { padding: 20px 0; border-bottom: 1px solid rgba(90,101,96,.22); display: grid; grid-template-columns: 72px 1fr; gap: 24px; align-items: baseline; } .split-list .item .k { font-family: var(--mono); font-size: 11px; color: var(--clay); letter-spacing: .08em; text-transform: uppercase; font-weight: 600; } .split-list .item h4 { font-size: 17px; color: var(--sage); margin: 0 0 6px; letter-spacing: -0.015em; } .split-list .item p { font-size: 14px; color: var(--gunmetal); margin: 0; line-height: 1.5; max-width: 48ch; } @media (max-width: 880px) { .split { grid-template-columns: 1fr; } } /* ── Floor plan block ─────────────────────────────────── */ .plan-block { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(32px, 4vw, 64px); align-items: start; } .plan-block .plan-sheet { background: var(--off-white); border: 1px solid var(--ph-border); border-radius: var(--radius-lg); overflow: hidden; padding: clamp(20px, 2.5vw, 36px); } .plan-block .plan-sheet .ratio { border-radius: var(--radius); overflow: hidden; } .plan-block .plan-sheet .ph { background: var(--off-white); border: 1px dashed var(--ph-border); border-radius: var(--radius); } .plan-block .plan-sheet .ph::after { display: none; } .plan-block .plan-meta { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; font-family: var(--mono); font-size: 11px; color: var(--gunmetal); letter-spacing: .06em; text-transform: uppercase; } .plan-block .copy h2 { max-width: 14ch; margin-bottom: 22px; } .plan-block .copy .lede { max-width: 40ch; margin: 0 0 24px; } .plan-block .copy .download-row { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; padding-top: 28px; border-top: 1px solid rgba(90,101,96,.22); } .download-card { display: flex; align-items: center; gap: 18px; padding: 18px 20px; background: var(--cream-2); border-radius: var(--radius); text-decoration: none; } .download-card:hover { background: var(--cream-3); } .download-card .icon { width: 40px; height: 40px; border-radius: 10px; background: var(--sage); color: var(--cream); display: flex; align-items: center; justify-content: center; flex: 0 0 40px; } .download-card .icon svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.6; } .download-card .meta { display: flex; flex-direction: column; gap: 2px; flex: 1; } .download-card .meta .label { font-weight: 600; color: var(--sage); font-size: 15px; } .download-card .meta .sub { font-family: var(--mono); font-size: 11px; color: var(--gunmetal); letter-spacing: .06em; text-transform: uppercase; } .download-card .arrow { color: var(--sage); font-weight: 700; } @media (max-width: 880px) { .plan-block { grid-template-columns: 1fr; } } /* ── Elevations (tabbed gallery) ─────────────────────── */ .elevations { background: var(--cream-2); } .elev-tabs { display: flex; gap: 6px; background: var(--cream); padding: 6px; border-radius: 999px; margin: 0 auto clamp(32px, 4vw, 48px); width: fit-content; border: 1px solid var(--ph-border); } .elev-tab { border: 0; background: transparent; padding: 10px 22px; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--gunmetal); border-radius: 999px; cursor: pointer; transition: background .2s ease, color .2s ease; } .elev-tab.is-active { background: var(--sage); color: var(--cream); } .elev-pane { display: none; } .elev-pane.is-active { display: block; } .elev-pane .ratio { border-radius: var(--radius-lg); overflow: hidden; max-width: 1280px; margin: 0 auto; } .elev-pane .ph { background: var(--off-white); border: 1px dashed var(--ph-border); border-radius: var(--radius-lg); } .elev-pane .ph::after { display: none; } .elev-pane .cap { text-align: center; margin-top: 18px; font-family: var(--mono); font-size: 11px; color: var(--gunmetal); letter-spacing: .08em; text-transform: uppercase; } /* ── Kit columns (Included / Not included) ───────────── */ .kit { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 2vw, 32px); } .kit-col { border-radius: var(--radius-lg); padding: clamp(32px, 3.5vw, 48px); display: flex; flex-direction: column; } .kit-col.included { background: var(--cream-2); } .kit-col.excluded { background: var(--sage); color: rgba(246,240,228,.82); } .kit-col.excluded h3 { color: var(--cream); } .kit-col .kit-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; margin-bottom: 24px; } .kit-col.included .kit-eyebrow { color: var(--clay); } .kit-col.excluded .kit-eyebrow { color: var(--poplar); } .kit-col h3 { margin: 0 0 28px; max-width: 14ch; } .kit-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; } .kit-list li { display: grid; grid-template-columns: 28px 1fr; gap: 18px; padding: 18px 0; border-top: 1px solid rgba(90,101,96,.18); font-size: 15px; line-height: 1.45; } .kit-col.excluded .kit-list li { border-color: rgba(246,240,228,.14); } .kit-list li:first-child { border-top: 0; padding-top: 0; } .kit-list .icon { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 12px; font-weight: 700; margin-top: 1px; } .kit-col.included .icon { background: var(--sage); color: var(--cream); } .kit-col.excluded .icon { background: rgba(246,240,228,.10); color: var(--cream); border: 1px solid rgba(246,240,228,.24); } .kit-list .lab { color: var(--sage); font-weight: 600; } .kit-col.excluded .kit-list .lab { color: var(--cream); } .kit-list .desc { display: block; color: var(--gunmetal); font-weight: 400; margin-top: 2px; font-size: 13.5px; } .kit-col.excluded .kit-list .desc { color: rgba(246,240,228,.6); } .kit-foot { margin-top: auto; padding-top: 28px; font-size: 12.5px; color: var(--gunmetal); line-height: 1.55; font-family: var(--mono); letter-spacing: .04em; text-transform: uppercase; } .kit-col.excluded .kit-foot { color: rgba(246,240,228,.55); } @media (max-width: 820px) { .kit { grid-template-columns: 1fr; } } /* ── Available options cards ─────────────────────────── */ .options-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 1.8vw, 24px); } .option-card { background: var(--cream-2); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; } .option-card .ratio { border-radius: 0; } .option-card .ph { border-radius: 0; border-top: 0; border-left: 0; border-right: 0; border-bottom: 1px solid var(--ph-border); } .option-card .body { padding: 24px 26px 28px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .option-card .body .tag { font-family: var(--mono); font-size: 11px; color: var(--clay); letter-spacing: .08em; } .option-card h4 { font-size: 20px; color: var(--sage); margin: 0; letter-spacing: -0.015em; } .option-card p { color: var(--gunmetal); font-size: 14px; margin: 0; line-height: 1.5; } .option-card .opts { margin-top: auto; padding-top: 18px; border-top: 1px solid rgba(90,101,96,.18); font-family: var(--mono); font-size: 11px; color: var(--gunmetal); letter-spacing: .06em; text-transform: uppercase; } @media (max-width: 980px) { .options-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .options-grid { grid-template-columns: 1fr; } } /* ── Load-path diagram ───────────────────────────────── */ .load-path { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(40px, 5vw, 80px); align-items: center; } .load-stack { display: flex; flex-direction: column; gap: 16px; position: relative; } .load-layer { background: var(--cream-2); border-radius: var(--radius); padding: 22px 26px; display: grid; grid-template-columns: 56px 1fr auto; gap: 22px; align-items: center; position: relative; } .load-layer .num { font-family: var(--mono); font-size: 11px; color: var(--clay); letter-spacing: .08em; font-weight: 600; } .load-layer h4 { font-size: 18px; color: var(--sage); margin: 0 0 4px; letter-spacing: -0.015em; } .load-layer p { font-size: 13.5px; color: var(--gunmetal); margin: 0; line-height: 1.5; max-width: 40ch; } .load-layer .ico { width: 44px; height: 44px; border-radius: 10px; background: var(--sage); color: var(--cream); display: flex; align-items: center; justify-content: center; flex: 0 0 44px; font-family: var(--mono); font-size: 14px; font-weight: 700; } .load-layer + .load-layer::before { content: ""; position: absolute; top: -16px; left: 50px; width: 1px; height: 16px; background: var(--brass); } .load-layer + .load-layer::after { content: ""; position: absolute; top: -8px; left: 46px; width: 9px; height: 9px; border-right: 1px solid var(--brass); border-bottom: 1px solid var(--brass); transform: rotate(45deg); } @media (max-width: 880px) { .load-path { grid-template-columns: 1fr; } } /* ── Process cards (horizontal 4-col) ───────────────── */ .proc-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 1.6vw, 24px); counter-reset: proc; } .proc-card { background: var(--cream); border: 1px solid rgba(90,101,96,.18); border-radius: var(--radius); padding: 28px 24px; display: flex; flex-direction: column; gap: 12px; position: relative; } .proc-card .num { font-family: var(--mono); font-size: 11px; color: var(--clay); letter-spacing: .08em; } .proc-card h4 { font-size: 18px; color: var(--sage); margin: 0; letter-spacing: -0.015em; } .proc-card p { font-size: 13.5px; color: var(--gunmetal); line-height: 1.5; margin: 0; } .proc-card .ico-row { margin-top: auto; padding-top: 20px; display: flex; gap: 6px; } .proc-card .pip { width: 10px; height: 10px; border-radius: 50%; background: var(--brass); opacity: .3; } .proc-card .pip.on { opacity: 1; } @media (max-width: 980px) { .proc-row { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 540px) { .proc-row { grid-template-columns: 1fr; } } /* ── Vertical timeline ───────────────────────────────── */ .timeline { display: flex; flex-direction: column; gap: 0; position: relative; } .timeline .tl-item { display: grid; grid-template-columns: 88px 1fr; gap: clamp(20px, 3vw, 40px); padding: clamp(28px, 3vw, 40px) 0; border-top: 1px solid rgba(90,101,96,.22); align-items: start; } .timeline .tl-item:last-child { border-bottom: 1px solid rgba(90,101,96,.22); } .timeline .tl-num { font-family: var(--mono); font-size: 13px; letter-spacing: .08em; color: var(--clay); font-weight: 600; } .timeline .tl-content { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(20px, 3vw, 40px); } .timeline .tl-content h3 { font-size: clamp(24px, 2vw, 30px); margin: 0 0 10px; max-width: 16ch; } .timeline .tl-content p { font-size: 15.5px; color: var(--gunmetal); margin: 0; line-height: 1.55; max-width: 48ch; } .timeline .tl-content .meta { display: flex; flex-direction: column; gap: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--gunmetal); } .timeline .tl-content .meta .what { color: var(--sage); } @media (max-width: 880px) { .timeline .tl-item { grid-template-columns: 1fr; gap: 12px; } .timeline .tl-content { grid-template-columns: 1fr; } } /* ── Checklist grid ──────────────────────────────────── */ .checklist-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-top: 1px solid rgba(90,101,96,.22); } .check-item { display: grid; grid-template-columns: 36px 1fr; gap: 20px; padding: 24px 28px 24px 0; border-bottom: 1px solid rgba(90,101,96,.22); align-items: start; } .check-item:nth-child(odd) { border-right: 1px solid rgba(90,101,96,.22); padding-right: 32px; padding-left: 0; } .check-item:nth-child(even) { padding-left: 32px; } .check-item .box { width: 24px; height: 24px; border-radius: 6px; background: var(--sage); color: var(--cream); display: flex; align-items: center; justify-content: center; flex: 0 0 24px; margin-top: 2px; } .check-item .box svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.2; } .check-item .lab { font-size: 16px; color: var(--sage); font-weight: 600; letter-spacing: -0.01em; display: block; margin-bottom: 4px; } .check-item p { margin: 0; font-size: 13.5px; color: var(--gunmetal); line-height: 1.55; } @media (max-width: 720px) { .checklist-grid { grid-template-columns: 1fr; } .check-item, .check-item:nth-child(odd), .check-item:nth-child(even) { padding-left: 0; padding-right: 0; border-right: 0; } } /* ── Get Pricing form ────────────────────────────────── */ .form-shell { display: grid; grid-template-columns: 1fr 1.5fr; gap: clamp(40px, 5vw, 80px); align-items: start; } .form-side { position: sticky; top: calc(var(--nav-h) + 32px); display: flex; flex-direction: column; gap: 28px; } .form-side h2 { max-width: 14ch; } .form-side .lede { max-width: 36ch; margin: 0; } .form-side .meta-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; border-top: 1px solid rgba(90,101,96,.22); padding-top: 28px; font-size: 13.5px; color: var(--gunmetal); } .form-side .meta-list li { display: grid; grid-template-columns: 100px 1fr; gap: 16px; } .form-side .meta-list .k { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--gunmetal); } .form-side .meta-list .v { color: var(--sage); font-weight: 600; } .form-card { background: var(--off-white); border: 1px solid var(--ph-border); border-radius: var(--radius-lg); padding: clamp(32px, 3.5vw, 56px); display: flex; flex-direction: column; gap: clamp(36px, 4vw, 56px); } .form-section { display: flex; flex-direction: column; gap: 22px; } .form-section h3 { font-size: clamp(20px, 1.6vw, 26px); margin: 0; padding-bottom: 14px; border-bottom: 1px solid rgba(90,101,96,.18); } .form-section h3 .num { font-family: var(--mono); font-size: 11px; color: var(--clay); letter-spacing: .08em; margin-right: 14px; vertical-align: middle; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .form-field { display: flex; flex-direction: column; gap: 8px; } .form-field.full { grid-column: 1 / -1; } .form-field label { font-family: var(--mono); font-size: 11px; color: var(--gunmetal); letter-spacing: .08em; text-transform: uppercase; font-weight: 600; } .form-field label .req { color: var(--clay); margin-left: 4px; } .form-field input, .form-field select, .form-field textarea { background: var(--cream); border: 1px solid rgba(90,101,96,.22); border-radius: 10px; padding: 14px 16px; font: inherit; font-size: 15px; color: var(--charcoal); outline: none; transition: border-color .2s ease, background .2s ease; } .form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--sage); background: #fff; } .form-field textarea { min-height: 120px; resize: vertical; line-height: 1.5; font-family: inherit; } .form-field select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--gunmetal) 50%), linear-gradient(135deg, var(--gunmetal) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 36px; } .form-radio-group { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .form-radio-group.two { grid-template-columns: repeat(2, 1fr); } .form-radio { display: flex; align-items: center; gap: 10px; background: var(--cream); border: 1px solid rgba(90,101,96,.22); border-radius: 10px; padding: 14px 16px; cursor: pointer; font-size: 14px; color: var(--charcoal); transition: border-color .2s ease, background .2s ease; } .form-radio:hover { border-color: var(--sage); } .form-radio input { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--gunmetal); margin: 0; flex: 0 0 16px; position: relative; } .form-radio input:checked { border-color: var(--clay); } .form-radio input:checked::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--clay); } .form-radio:has(input:checked) { border-color: var(--clay); background: #fff; } .file-drop { display: flex; align-items: center; gap: 16px; padding: 20px; background: var(--cream); border: 1px dashed rgba(90,101,96,.4); border-radius: 12px; cursor: pointer; } .file-drop .ico { width: 40px; height: 40px; border-radius: 10px; background: var(--sage); color: var(--cream); display: flex; align-items: center; justify-content: center; flex: 0 0 40px; } .file-drop .ico svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.6; } .file-drop .meta { display: flex; flex-direction: column; gap: 2px; flex: 1; } .file-drop .meta .label { font-weight: 600; font-size: 14.5px; color: var(--sage); } .file-drop .meta .sub { font-family: var(--mono); font-size: 11px; color: var(--gunmetal); letter-spacing: .06em; text-transform: uppercase; } .file-drop input { display: none; } .form-foot { padding-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; } .form-foot .legal { font-size: 12.5px; color: var(--gunmetal); line-height: 1.5; max-width: 48ch; } @media (max-width: 980px) { .form-shell { grid-template-columns: 1fr; } .form-side { position: static; } .form-grid { grid-template-columns: 1fr; } .form-radio-group { grid-template-columns: 1fr 1fr; } } /* ── FAQ shell with sticky sidebar nav ───────────────── */ .faq-nav { position: sticky; top: calc(var(--nav-h) + 32px); display: flex; flex-direction: column; gap: 4px; } .faq-nav .head { font-family: var(--mono); font-size: 11px; color: var(--gunmetal); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 14px; } .faq-nav a { display: block; padding: 12px 18px; border-radius: 999px; font-size: 14px; color: var(--charcoal); transition: background .2s ease, color .2s ease; } .faq-nav a:hover { background: rgba(44,60,60,.06); } .faq-nav a.is-active { background: var(--sage); color: var(--cream); } .faq-shell { display: grid; grid-template-columns: 280px 1fr; gap: clamp(40px, 5vw, 80px); align-items: start; } .faq-category { margin-bottom: clamp(48px, 6vw, 80px); } .faq-category h2 { font-size: clamp(28px, 2.6vw, 40px); margin-bottom: 20px; letter-spacing: -0.025em; } .faq-category .eyebrow { display: block; margin-bottom: 12px; } @media (max-width: 880px) { .faq-shell { grid-template-columns: 1fr; } .faq-nav { position: static; flex-direction: row; flex-wrap: wrap; gap: 8px; } .faq-nav .head { width: 100%; margin-bottom: 6px; } .faq-nav a { padding: 8px 14px; font-size: 13px; } }