/* ============================================================
UBIICA DESIGN SYSTEM
Canonical tokens + typography + primitives.
Import this file first in every UBIICA page:
Applies to:
- ubiica.com (umbrella brand)
- kendallhomefinder.com (head-term LP)
- micasakendall.com (ES mirror)
- crossingshomes.com
- kendallbreezehomes.com
- countrywalkhomes.com
- thehammockshomes.com
- sabalchasehomes.com
- devonairehomes.com
- lakesofthemeadowhomes.com
Direction (locked 2026-04-23, Hillcrest-ground-truthed):
Inter single-face type system. White paper, near-black ink.
No color accent — restraint IS the design. Ink is the only
"accent" — anything that needs emphasis gets weight/contrast,
not hue. Passe-partout frame (16px) around the hero block.
Radius-pill is a subtle 32px (not fully rounded).
Reset history:
- 2026-04-22 · Almarai + sage #3E5641 + cream #F5F2EC
direction locked (superseded — see below).
- 2026-04-23 · Reset to real Hillcrest after reviewing the
actual template running on localhost:3000. Previous
charter had been built from a WebSearch snippet rather
than the real source.
============================================================ */
/* ---------- Fonts ----------
Loaded via Google Fonts. Include this in :
--------------------------------- */
/* ============ TOKENS ============ */
:root{
/* Color — white + ink, no hue accent */
--paper:#FFFFFF; /* primary background, pure white */
--paper-2:#F7F7F8; /* alt band / card background — barely-there gray */
--ink:#18181B; /* primary text, near-black */
--ink-2:#45454A; /* secondary ink for body copy */
--muted:#73737D; /* secondary text, captions, de-emphasized accent */
--rule:#E7E7E9; /* hairlines, dividers */
--surface-dark:#18181B; /* full-dark section background (same as ink) */
/* Semantic alias: "accent" is not a color here. Muted serves as
the visual cousin of an accent — used in headlines' trailing
phrase, secondary chips, etc. The philosophy is restraint. */
--accent:#18181B; /* = ink, for components that bind to it */
--accent-soft:#73737D; /* = muted, for the "accent" phrasing in headlines */
/* Type stack — single face, weight and tracking do the work */
--display:'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
--sans:'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
--mono:'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
/* Scale */
--max:1320px;
--pad-x:clamp(20px, 4vw, 48px);
--section-y:clamp(80px, 10vw, 136px);
/* Shape */
--radius:8px;
--radius-card:8px;
--radius-pill:32px; /* NOT fully rounded — this is a signature */
/* Passe-partout frame around hero (Hillcrest signature) */
--frame-pad:16px;
}
/* ============ RESET ============ */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
background:var(--paper);
color:var(--ink);
font-family:var(--sans);
font-size:16px;
line-height:1.5;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
hr{border:0;border-top:1px solid var(--rule);margin:0}
/* ============ PRIMITIVES ============ */
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad-x)}
.section{padding:var(--section-y) 0}
/* Passe-partout frame — wraps the nav + hero block with 16px breathing room */
.frame{padding:0 var(--frame-pad) var(--frame-pad);background:var(--paper)}
.frame-spacer{height:2px}
/* Type utilities — all Inter, scale via weight + tracking, not font-family */
.display{font-family:var(--display);font-weight:500;letter-spacing:-0.04em;line-height:1.1}
.display-light{font-family:var(--display);font-weight:300;letter-spacing:-0.03em;line-height:1.15}
.sans-500{font-family:var(--sans);font-weight:500}
.mono{font-family:var(--mono);font-size:14px;color:var(--muted)}
/* Eyebrow — uppercase label above headings. No hairline tick. */
.eyebrow{font-family:var(--sans);font-size:14px;color:var(--muted);text-transform:uppercase;display:inline-block;line-height:1.2}
/* "Accent" = muted color on the trailing phrase of a headline.
Uses muted not ink because ink is the headline itself; the
accent phrase steps BACK, not forward. */
.accent{color:var(--muted);font-weight:400}
.on-dark .accent{color:rgba(255,255,255,.5)}
/* Buttons */
.btn-primary{
background:var(--ink);color:var(--paper);
padding:12px 24px;border-radius:var(--radius-pill);
font-family:var(--sans);font-weight:500;font-size:14px;letter-spacing:-0.5px;
display:inline-flex;align-items:center;gap:10px;
transition:background .25s;
}
.btn-primary:hover{background:#000}
.btn-primary svg{width:13px;height:13px;transition:transform .25s}
.btn-primary:hover svg{transform:translateX(4px)}
.btn-outline{
background:transparent;color:var(--ink);border:1px solid var(--ink);
padding:11px 22px;border-radius:var(--radius-pill);
font-family:var(--sans);font-weight:500;font-size:14px;letter-spacing:-0.5px;
display:inline-flex;align-items:center;gap:8px;
transition:background .25s,color .25s;
}
.btn-outline:hover{background:var(--ink);color:var(--paper)}
.on-dark .btn-outline{color:var(--paper);border-color:rgba(255,255,255,.4)}
.on-dark .btn-outline:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn-light{
background:var(--paper);color:var(--ink);
padding:12px 24px;border-radius:var(--radius-pill);
font-family:var(--sans);font-weight:500;font-size:14px;letter-spacing:-0.5px;
display:inline-flex;align-items:center;gap:10px;
transition:background .25s;
}
.btn-light:hover{background:var(--paper-2)}
/* Section header pattern — stacked, not three-column grid.
Title is the star; idx above and aux below are muted meta. */
.section-head{margin-bottom:40px}
.section-head .idx{font-size:14px;text-transform:uppercase;color:var(--muted);margin-bottom:12px;line-height:1.2}
.section-head .title{
font-family:var(--display);font-weight:500;
font-size:clamp(28px,3.6vw,40px);line-height:1.2;letter-spacing:-1.3px;
margin:0;color:var(--ink);
}
.section-head .title .accent{color:var(--muted);font-weight:400}
.section-head .aux{font-size:14px;color:var(--muted);margin-top:8px}
/* Dark surface inversion */
.on-dark{background:var(--surface-dark);color:var(--paper)}
.on-dark .section-head .title{color:var(--paper)}
.on-dark .section-head .idx,.on-dark .section-head .aux{color:rgba(255,255,255,.5)}
/* Placeholder markers — purple dashed outline + "TBD" badge
Use ... around any value that still
needs real data. Strip this class once replaced. */
.todo{outline:2px dashed #C084FC;outline-offset:2px;position:relative}
.todo::after{
content:'TBD';position:absolute;top:-8px;right:-4px;
background:#C084FC;color:#FFF;font-size:9px;
padding:1px 5px;border-radius:3px;pointer-events:none;
}
/* ============ MOTION ============
Reveal-on-scroll baseline + per-section stagger.
IntersectionObserver in page JS adds .in when an element enters viewport.
--reveal-delay (CSS variable, default 0ms) lets individual elements
stagger inside a section without changing the JS observer.
All motion is wrapped in prefers-reduced-motion: no-preference for a11y. */
[data-reveal]{opacity:0;transform:translateY(20px)}
[data-reveal].in{opacity:1;transform:none}
@media (prefers-reduced-motion: no-preference){
[data-reveal]{
transition: opacity .9s ease var(--reveal-delay, 0ms),
transform .9s cubic-bezier(.2,.65,.3,1) var(--reveal-delay, 0ms);
}
/* Communities tile grid — cascade across the row, 60ms per tile. 8 tiles total. */
.communities-grid > .community-tile:nth-child(1){--reveal-delay:0ms}
.communities-grid > .community-tile:nth-child(2){--reveal-delay:60ms}
.communities-grid > .community-tile:nth-child(3){--reveal-delay:120ms}
.communities-grid > .community-tile:nth-child(4){--reveal-delay:180ms}
.communities-grid > .community-tile:nth-child(5){--reveal-delay:240ms}
.communities-grid > .community-tile:nth-child(6){--reveal-delay:300ms}
.communities-grid > .community-tile:nth-child(7){--reveal-delay:360ms}
.communities-grid > .community-tile:nth-child(8){--reveal-delay:420ms}
/* FAQ list — sequential rhythm, 80ms per item. 6 items total. */
.faq-list > .faq-item:nth-child(1){--reveal-delay:0ms}
.faq-list > .faq-item:nth-child(2){--reveal-delay:80ms}
.faq-list > .faq-item:nth-child(3){--reveal-delay:160ms}
.faq-list > .faq-item:nth-child(4){--reveal-delay:240ms}
.faq-list > .faq-item:nth-child(5){--reveal-delay:320ms}
.faq-list > .faq-item:nth-child(6){--reveal-delay:400ms}
/* Hero entrance — eyebrow → headline → sub → search, 100ms apart.
Hero is above the fold so observer fires immediately on load. */
.hero-overlay [data-reveal-hero="1"]{--reveal-delay:200ms}
.hero-overlay [data-reveal-hero="2"]{--reveal-delay:300ms}
.hero-overlay [data-reveal-hero="3"]{--reveal-delay:400ms}
.hero-overlay [data-reveal-hero="4"]{--reveal-delay:500ms}
}
@media (prefers-reduced-motion: reduce){
[data-reveal]{opacity:1;transform:none;transition:none}
}
/* ============ RESPONSIVE BREAKPOINTS ============
The system uses two breakpoints everywhere:
tablet: 980px
mobile: 560px
Page stylesheets should respect these.
============================================== */