/* ========================================================================== SPARTAN HOMES — BASE Reset · typography · primitives (links, buttons, forms) · layout utilities Requires: tokens.css ========================================================================== */ /* -------------------------------------------------------------------------- 1. RESET -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + var(--space-lg)); -moz-text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { min-height: 100vh; min-height: 100svh; margin: 0; font-family: var(--font-sans); font-size: var(--step-0); font-weight: var(--wt-regular); line-height: var(--lh-body); letter-spacing: var(--ls-body); color: var(--ink); background-color: var(--surface); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; /* Nothing on this site may be faked by the browser. Vidaloka ships no bold and no italic; Open Sans ships no italic. Synthesis off means a missing face becomes a visible bug, not a smeared oblique. */ font-synthesis: none; /* clip, NOT hidden. overflow-x:hidden turns into a scroll container, which silently breaks `position: sticky` on the header (it would stick to the body's scroll box instead of the viewport). overflow-x:clip does the same containment WITHOUT creating a scroll container. */ overflow-x: clip; } /* Locked while the mobile drawer or lightbox is open (set by motion.js) */ body.is-locked { overflow: hidden; touch-action: none; } img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; } svg { fill: currentColor; } /* The hidden attribute must always win, even over display:flex/grid */ [hidden] { display: none !important; } input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; } button { background: none; border: 0; } p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } ul, ol { padding: 0; list-style: none; } table { border-collapse: collapse; width: 100%; } hr { border: 0; border-top: 1px solid var(--line); margin: var(--space-xl) 0; } ::selection { background: var(--selection-bg); color: var(--selection-fg); } :target { scroll-margin-top: calc(var(--header-h) + var(--space-lg)); } /* -------------------------------------------------------------------------- 2. TYPOGRAPHY Vidaloka = display. Open Sans = everything else. Raleway = italic voice. -------------------------------------------------------------------------- */ h1, h2, h3, h4, .h1, .h2, .h3, .h4, .display { font-family: var(--font-display); font-weight: var(--wt-regular); color: var(--ink-strong); letter-spacing: var(--ls-heading); line-height: var(--lh-snug); text-wrap: balance; } .display, .h-display { font-size: var(--step-7); line-height: var(--lh-tight); letter-spacing: var(--ls-display); } h1, .h1 { font-size: var(--step-6); line-height: var(--lh-tight); letter-spacing: var(--ls-display); } h2, .h2 { font-size: var(--step-5); line-height: var(--lh-snug); } h3, .h3 { font-size: var(--step-3); line-height: var(--lh-heading); } h4, .h4 { font-size: var(--step-2); line-height: var(--lh-heading); } /* Small headings drop the serif — they're UI, not editorial */ h5, h6, .h5, .h6 { font-family: var(--font-sans); font-size: var(--step-0); font-weight: var(--wt-semibold); line-height: var(--lh-heading); letter-spacing: var(--ls-ui); color: var(--ink-strong); } p { text-wrap: pretty; } p + p { margin-top: 1em; } /* -------------------------------------------------------------------------- ITALICS — the real face, everywhere. Open Sans has no italic. Without this, every on the site is an algorithmic slant. Raleway Italic is the declared italic face; route all body emphasis to it. ⚠ `i` is in this selector because is semantic emphasis in HTML5. But is ALSO the tag motion.js uses as a mechanical wrapper when it splits a .reveal-words headline into words — see the carve-out below. Without that carve-out the entire H1 renders in Raleway Italic (an italic-only family, so even font-style:normal cannot un-slant it) instead of Vidaloka. If you add another JS effect that wraps text in , exempt it here too. -------------------------------------------------------------------------- */ em, i, cite, blockquote em { font-family: var(--font-italic); font-style: italic; font-weight: inherit; } /* The word-split wrapper is plumbing, not emphasis. It must inherit the headline's face completely. */ .reveal-words .word > i { font-family: inherit; font-style: inherit; font-weight: inherit; } /* Headings are Vidaloka, which ships NO italic at all — a faked slanted didone is the ugliest outcome available. Heading emphasis is a colour shift. */ h1 em, h2 em, h3 em, h4 em, .h1 em, .h2 em, .h3 em, .h4 em, .display em, .hero__title em, .section-head__title em, .feature-row__title em, .card__title em, .step__title em, .quote__text em, .faq__q em { font-family: inherit; font-style: normal; font-weight: inherit; color: var(--accent-ink-on-light); } .prose > * + * { margin-top: var(--space-md); } .prose { max-width: var(--measure); } .prose h2, .prose h3 { margin-top: var(--space-xl); } .prose ul, .prose ol { padding-left: 1.25em; } .prose ul { list-style: disc; } .prose ol { list-style: decimal; } .prose li + li { margin-top: var(--space-2xs); } .prose strong { font-weight: var(--wt-semibold); color: var(--ink-strong); } /* Eyebrow / small caps — the letter-spacing is doing real work here */ .eyebrow { display: block; font-family: var(--font-sans); font-size: var(--step--1); font-weight: var(--wt-semibold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--ink-subtle); line-height: 1.4; } /* 13px semibold uppercase is NOT large text — it needs the full 4.5:1. amber-800 on cream = 5.75:1. amber-700 (the old value) was 3.66:1 and failed. */ .eyebrow--accent { color: var(--accent-ink-on-light); } .on-dark .eyebrow--accent, .on-media .eyebrow--accent, .section--dark .eyebrow--accent { color: var(--accent); } /* Eyebrow with a leading rule */ .eyebrow--rule { display: flex; align-items: center; gap: var(--space-xs); } .eyebrow--rule::before { content: ""; inline-size: clamp(1.5rem, 4vw, 2.75rem); block-size: 2px; background: var(--accent); flex: none; } .lede { font-size: var(--step-1); line-height: var(--lh-loose); font-weight: var(--wt-light); color: var(--ink-muted); max-width: var(--measure); } .pull { font-family: var(--font-italic); font-style: italic; font-weight: var(--wt-regular); font-size: var(--step-2); line-height: 1.4; color: var(--ink-strong); } .caption, figcaption { font-size: var(--step--1); line-height: 1.5; color: var(--ink-subtle); letter-spacing: var(--ls-ui); } .meta { font-size: var(--step--1); font-weight: var(--wt-semibold); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--ink-subtle); } .num { font-family: var(--font-display); font-variant-numeric: tabular-nums lining-nums; letter-spacing: -0.01em; } /* Accent text is only ever legal on ink, or as amber-800 on cream. */ .text-accent { color: var(--accent-ink-on-light); } .on-dark .text-accent, .on-media .text-accent, .section--dark .text-accent { color: var(--accent); } .text-muted { color: var(--ink-muted); } .text-subtle { color: var(--ink-subtle); } .u-underline-accent { background-image: linear-gradient(var(--accent), var(--accent)); background-repeat: no-repeat; background-position: 0 92%; background-size: 100% 0.14em; padding-inline: 0.04em; } /* -------------------------------------------------------------------------- 3. LINKS -------------------------------------------------------------------------- */ a { color: inherit; text-decoration: none; transition: color var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out); } .link { color: var(--ink-strong); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 0.22em; transition: text-decoration-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .link:hover { text-decoration-color: var(--ink-strong); } /* Arrow link — editorial, no icon font */ .link-arrow { display: inline-flex; align-items: center; gap: var(--space-2xs); min-height: 44px; font-size: var(--step--1); font-weight: var(--wt-semibold); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--ink-strong); border-bottom: 1px solid var(--line-strong); padding-block-end: var(--space-3xs); transition: border-color var(--dur-base) var(--ease), gap var(--dur-base) var(--ease); } .link-arrow::after { content: ""; inline-size: 1.15em; block-size: 1px; background: currentColor; position: relative; transition: transform var(--dur-base) var(--ease); } .link-arrow:hover { border-color: var(--accent); gap: var(--space-xs); } .link-arrow:hover::after { transform: translateX(3px); } /* Tel links get real tap targets on mobile */ a[href^="tel:"] { white-space: nowrap; } /* -------------------------------------------------------------------------- 4. FOCUS — visible, warm, never removed -------------------------------------------------------------------------- */ :focus { outline: none; } /* Two-tone ring. Amber alone on cream is 2.2:1 and fails SC 1.4.11 (needs 3:1), so the indicator is an INK line with an amber halo: the ink line carries the contrast on cream, the amber halo carries it on photography and dark bands. */ :focus-visible { outline: 2px solid var(--c-ink-900); outline-offset: 3px; box-shadow: 0 0 0 5px var(--accent); border-radius: var(--radius-xs); } /* On ink/photography the dark line disappears — swap it for cream. */ .on-dark :focus-visible, .on-media :focus-visible, .section--dark :focus-visible, .hero :focus-visible, .hero__bar :focus-visible, .bleed-image :focus-visible, .site-footer :focus-visible, .nav-drawer :focus-visible, .callbar :focus-visible, .lightbox :focus-visible { outline-color: var(--c-sand-100); box-shadow: 0 0 0 5px var(--accent); } .btn:focus-visible, .field__input:focus-visible, .field__select:focus-visible, .field__textarea:focus-visible { outline: 2px solid var(--c-ink-900); outline-offset: 3px; box-shadow: 0 0 0 5px var(--accent); } .on-dark .btn:focus-visible, .on-dark .field__input:focus-visible, .on-dark .field__select:focus-visible, .on-dark .field__textarea:focus-visible, .section--dark .btn:focus-visible, .section--dark .field__input:focus-visible, .section--dark .field__select:focus-visible, .section--dark .field__textarea:focus-visible, .hero .btn:focus-visible { outline-color: var(--c-sand-100); } .skip-link { position: absolute; inset-inline-start: var(--space-sm); inset-block-start: -100px; z-index: 999; padding: var(--space-xs) var(--space-md); background: var(--c-ink-900); color: var(--c-sand-100); font-size: var(--step--1); font-weight: var(--wt-semibold); letter-spacing: var(--ls-ui); border-radius: var(--radius-sm); transition: inset-block-start var(--dur-fast) var(--ease-out); } .skip-link:focus-visible { inset-block-start: var(--space-sm); } /* -------------------------------------------------------------------------- 5. BUTTONS Primary = orange with INK type (6.9:1). White-on-orange would fail — don't. -------------------------------------------------------------------------- */ .btn { --btn-bg: transparent; --btn-fg: var(--ink-strong); --btn-bd: var(--line-strong); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2xs); min-height: 48px; padding: var(--space-xs) var(--space-lg); font-family: var(--font-sans); font-size: var(--step--1); font-weight: var(--wt-semibold); letter-spacing: var(--ls-caps); text-transform: uppercase; line-height: 1.2; text-align: center; color: var(--btn-fg); background-color: var(--btn-bg); border: 1px solid var(--btn-bd); border-radius: var(--radius-sm); cursor: pointer; overflow: hidden; isolation: isolate; -webkit-tap-highlight-color: transparent; transition: background-color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease), transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0); transition-duration: var(--dur-instant); } .btn[disabled], .btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; transform: none; } /* Sheen — ONLY on the primary CTA, and barely there. It used to run on every .btn, including .btn--ghost, which streaked white across the hero photograph. A gloss sweep on a ghost button is a tell. */ .btn--primary::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient( 100deg, transparent 35%, rgba(255, 255, 255, 0.10) 50%, transparent 65%); transform: translateX(-120%); transition: transform var(--dur-slowest) var(--ease); } .btn--primary:hover::after { transform: translateX(120%); } .btn--primary { --btn-bg: var(--accent); --btn-fg: var(--accent-ink); --btn-bd: var(--accent); box-shadow: var(--shadow-sm); } .btn--primary:hover { --btn-bg: var(--accent-hover); --btn-bd: var(--accent-hover); box-shadow: var(--shadow-accent); } .btn--primary:active { --btn-bg: var(--accent-press); --btn-bd: var(--accent-press); } .btn--solid { --btn-bg: var(--c-ink-900); --btn-fg: var(--c-sand-100); --btn-bd: var(--c-ink-900); } .btn--solid:hover { --btn-bg: var(--c-ink-700); --btn-bd: var(--c-ink-700); } .btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink-strong); --btn-bd: var(--line-strong); } .btn--ghost:hover { --btn-bd: var(--accent); --btn-bg: var(--accent-soft); } /* On photography or dark bands */ .on-media .btn--ghost, .on-dark .btn--ghost, .section--dark .btn--ghost { --btn-fg: var(--c-sand-100); --btn-bd: rgba(252, 245, 234, 0.45); backdrop-filter: blur(2px); } .on-media .btn--ghost:hover, .on-dark .btn--ghost:hover, .section--dark .btn--ghost:hover { --btn-bd: var(--accent); --btn-bg: rgba(252, 245, 234, 0.08); } .btn--sm { min-height: 44px; padding: var(--space-2xs) var(--space-md); font-size: var(--step--2); } .btn--lg { min-height: 56px; padding: var(--space-sm) var(--space-xl); font-size: var(--step-0); letter-spacing: var(--ls-ui); } .btn--block { display: flex; inline-size: 100%; } /* Optional trailing arrow, pure CSS */ .btn--arrow::before { content: ""; order: 2; inline-size: 1.1em; block-size: 1px; background: currentColor; transition: transform var(--dur-base) var(--ease); } .btn--arrow:hover::before { transform: translateX(4px); } /* -------------------------------------------------------------------------- 6. FORM PRIMITIVES -------------------------------------------------------------------------- */ .field { display: flex; flex-direction: column; gap: var(--space-2xs); min-inline-size: 0; } .field__label { font-size: var(--step--1); font-weight: var(--wt-semibold); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--ink-muted); } .field__label .req { color: var(--danger); margin-inline-start: 0.2em; } .on-dark .field__label .req, .section--dark .field__label .req { color: var(--c-rust-400); } .field__input, .field__select, .field__textarea { inline-size: 100%; min-height: 48px; padding: var(--space-xs) var(--space-sm); font-size: var(--step-0); font-weight: var(--wt-regular); color: var(--ink-strong); background-color: var(--surface-raised); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); appearance: none; } /* On a --photo section the field sits on a PHOTOGRAPH. A translucent cream fill let the house wall, driveway and lawn show straight through the empty input, so at the conversion moment the fields read washed-out. A SOLID warm-ink fill (a touch lighter than the form panel behind it) makes each field crisp and obviously a field, without any photo bleeding through. */ .on-dark .field__input, .on-dark .field__select, .on-dark .field__textarea, .section--dark .field__input, .section--dark .field__select, .section--dark .field__textarea { background-color: var(--c-ink-800); border-color: var(--line-inverse-strong); color: var(--c-sand-100); } .field__textarea { min-height: 8.5rem; resize: vertical; line-height: var(--lh-body); } .field__input::placeholder, .field__textarea::placeholder { color: var(--ink-subtle); opacity: 1; } .field__input:hover, .field__select:hover, .field__textarea:hover { border-color: var(--ink-subtle); } .field__input:focus, .field__select:focus, .field__textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); outline: none; } .field__select { padding-inline-end: var(--space-xl); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238c8577' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--space-sm) center; background-size: 12px 8px; cursor: pointer; } /* Lighter chevron on the solid dark fill so the arrow reads on ink. */ .on-dark .field__select, .section--dark .field__select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23cbbfa8' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); } .field__hint { font-size: var(--step--2); color: var(--ink-subtle); } .field__error { font-size: var(--step--2); font-weight: var(--wt-semibold); color: var(--danger); } .on-dark .field__error, .section--dark .field__error { color: var(--c-rust-400); } .field.is-invalid .field__input, .field.is-invalid .field__select, .field.is-invalid .field__textarea { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(203, 65, 36, 0.14); } /* Checkbox / consent row */ .checkbox { display: flex; align-items: flex-start; gap: var(--space-2xs); min-height: 44px; cursor: pointer; } .checkbox input[type="checkbox"] { flex: none; inline-size: 22px; block-size: 22px; margin-block-start: 0.28em; accent-color: var(--accent); cursor: pointer; } .checkbox span { font-size: var(--step--1); line-height: 1.5; color: var(--ink-muted); } /* Honeypot — never visible, never announced */ .hp { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; opacity: 0; pointer-events: none; } /* -------------------------------------------------------------------------- 7. LAYOUT PRIMITIVES -------------------------------------------------------------------------- */ .container { inline-size: 100%; max-inline-size: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .container--narrow { max-inline-size: var(--container-narrow); } .container--text { max-inline-size: var(--container-text); } .container--flush { padding-inline: 0; } /* .section and every band variant live in components.css §1. There is ONE definition of the vertical rhythm on this site and that is where it is. */ /* Stacks & clusters */ .stack { display: flex; flex-direction: column; } .stack > * + * { margin-block-start: var(--stack-gap, var(--space-md)); } .stack--xs { --stack-gap: var(--space-2xs); } .stack--sm { --stack-gap: var(--space-sm); } .stack--lg { --stack-gap: var(--space-lg); } .stack--xl { --stack-gap: var(--space-xl); } .cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster-gap, var(--space-sm)); } .cluster--sm { --cluster-gap: var(--space-2xs); } .cluster--lg { --cluster-gap: var(--space-lg); } /* NO generic .grid / .split primitives. They are how the last build got asymmetric. auto-fit stretches an orphan tile across a whole row; a 1fr/1.15fr split leaves a void of cream beside a short paragraph. Every grid on this site is an EVEN repeat(N, 1fr) and it belongs to a named component — .cards, .gallery, .steps, .stats, .feature-row. If none of those fits what you are building, the answer is not a new grid. It is less content. See components.css, THE FIVE LAWS. Line art — floor plans, elevations — must never be cropped: object-fit:cover on a drawing amputates exactly the rooms the buyer is reading. Put this on the media wrapper of any card/gallery tile holding a plan. */ .is-plan { background-color: var(--c-white); } .is-plan img { object-fit: contain !important; padding: var(--space-md); } .is-plan:hover img { transform: none !important; } /* Utilities */ .visually-hidden { position: absolute !important; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .text-center { text-align: center; } .text-balance { text-wrap: balance; } .mx-auto { margin-inline: auto; } .measure { max-inline-size: var(--measure); } .measure-narrow { max-inline-size: var(--measure-narrow); } .center-copy { margin-inline: auto; text-align: center; } .center-copy .lede { margin-inline: auto; } .mt-0 { margin-block-start: 0; } .mt-sm { margin-block-start: var(--space-sm); } .mt-md { margin-block-start: var(--space-md); } .mt-lg { margin-block-start: var(--space-lg); } .mt-xl { margin-block-start: var(--space-xl); } .mt-2xl { margin-block-start: var(--space-2xl); } .hide { display: none !important; } @media (max-width: 47.99rem) { .hide-sm { display: none !important; } } @media (min-width: 48rem) { .hide-md-up { display: none !important; } } @media (max-width: 61.99rem) { .hide-md { display: none !important; } } @media (min-width: 62rem) { .hide-lg-up { display: none !important; } } /* Bottom padding so the mobile call bar never covers content */ @media (max-width: 47.99rem) { body { padding-block-end: var(--callbar-h); } } /* Print — clients do print these pages */ @media print { .site-header, .callbar, .lightbox, .hero__scroll, .nav { display: none !important; } body { background: #fff; color: #000; padding: 0; } .section { padding-block: 1.5rem; } [data-reveal] { opacity: 1 !important; transform: none !important; } }