/* Jamari Homes design tokens and shared components. Per build-plans/11-jamari-homes-design-plan.md Black and gold (owner brief 28 Sep 2026, decision D6, 8 Oct 2026): black and deep charcoal for the dark grounds, warm ivory for the light ground, Jamari gold for accents, champagne for soft fills. No green anywhere. */ :root{ --jh-black:#0B0B0B; --jh-charcoal:#1C1C1C; --jh-charcoal-700:#2A2A2A; --jh-ivory:#FAF7F0; --jh-cream:#F3EDE2; --jh-champagne:#E9DFCB; --jh-gold-500:#C9A227; --jh-gold-300:#E6C869; --jh-gold-deep:#8A6314; /* accessible gold for text on light (5.1:1 on ivory) */ /* The former teal names stay defined so every older rule still resolves, but they now land on the black and gold palette: the deep greens become black and charcoal, the text accent becomes the deep gold, and the pale green tint becomes champagne. New rules use the names above. */ --jh-teal-950:var(--jh-black); --jh-teal-900:var(--jh-black); --jh-teal-800:var(--jh-charcoal-700); --jh-teal-700:var(--jh-gold-deep); --jh-teal-100:var(--jh-champagne); --jh-ink:#1F2421; --jh-stone:#625C54; --jh-hairline:#E3DACB; /* Phase 2 (2026-09-15): stone was a cool green-grey at 4.18:1 on cream, below AA; the warm stone passes on ivory (6.18), porcelain (6.39) and cream (5.67). Hairline warmed to match. */ --jh-font-display:'Cormorant Garamond',Georgia,'Times New Roman',serif; --jh-font-body:'Inter','Segoe UI',system-ui,-apple-system,sans-serif; --jh-ease:cubic-bezier(.22,1,.36,1); --jh-slow:.6s; --jh-reveal:.9s; /* Redesign additions (2026-08-24): porcelain white for product surfaces, and a fluid type scale so headings breathe between 360px and 1440px without per-breakpoint overrides. */ /* Aliases for names that crept into later CSS; kept so every usage lands on the one palette rather than on a stray fallback (bug-fix pass: wrong color basis). */ --jh-stone-500:var(--jh-stone); --jh-line:var(--jh-hairline); --jh-porcelain:#FCFBF7; /* The fluid type scale, set to the values the design actually ships (UX-005 tuned the display clamp during the audit; the earlier aspirational values here diverged and were consumed by nothing — bug-hunt finding). */ --jh-fs-display:clamp(2.35rem,5.6vw,4.7rem); --jh-fs-h2:clamp(2rem,3.6vw,2.9rem); --jh-fs-lead:1.05rem; --jh-measure:66ch; /* Spacing scale. The system had colour and type tokens but none for space, radius or elevation, so those three drifted into inline styles and one-off values (UX-001). Steps are the ones already in use, named. */ --jh-space-1:4px; --jh-space-2:8px; --jh-space-3:12px; --jh-space-4:18px; --jh-space-5:26px; --jh-space-6:40px; --jh-space-7:64px; --jh-space-8:96px; /* Radius. 2px is the house value — sharp, which is why this brand reads as considered. 50% is for circular marks only. Anything else is drift. */ --jh-radius:2px; --jh-radius-round:50%; /* Elevation. Three named steps replacing eight anonymous shadows. */ --jh-shadow-1:0 8px 22px -12px rgba(0,0,0,.26); --jh-shadow-2:0 22px 44px -18px rgba(0,0,0,.38); --jh-shadow-3:0 42px 72px -30px rgba(0,0,0,.36); /* ---- Semantic tokens (Phase 2). Components use these, never the raw palette above. ---- */ --surface:var(--jh-ivory); --surface-raised:var(--jh-porcelain); --surface-sunken:var(--jh-cream); --surface-inverse:var(--jh-black); --surface-inverse-raised:var(--jh-charcoal); /* Text. Every pairing below is at least 4.5:1 on ivory, porcelain and cream; the inverse pairings are at least 9:1 on black. Gold text on a light ground is always the deep gold, never gold-500. */ --text:var(--jh-ink); --text-muted:var(--jh-stone); --text-accent:var(--jh-gold-deep); --text-eyebrow:var(--jh-gold-deep); --text-inverse:var(--jh-ivory); --text-inverse-muted:#D8D2C6; --text-inverse-quiet:#B9B2A5; --text-inverse-accent:var(--jh-gold-300); /* Lines. --border-control is 3.6 to 4.0:1; the WCAG 2.2 minimum for a field boundary is 3:1. */ --border:var(--jh-hairline); --border-strong:#CFC3AF; --border-control:#857B6D; --rule-gold:var(--jh-gold-500); --focus:var(--jh-gold-deep); --focus-inverse:var(--jh-gold-500); /* --ok is the one green left: it is semantic (a success message), not decoration. */ --ok:#2F6B3F; --ok-bg:#E4EFE6; --warn:#7A5410; --warn-bg:#F6EDD8; --err:#8A2A1C; --err-bg:#F7E6E1; /* Type scale: one named step per role, in rem so it respects the reader's font size. */ --fs-display:clamp(2.4rem,1.7rem + 2.6vw,3.8rem); --fs-h1:clamp(2.2rem,1.7rem + 1.9vw,3.1rem); --fs-h2-scale:clamp(1.85rem,1.45rem + 1.5vw,2.6rem); --fs-h3:clamp(1.35rem,1.2rem + .55vw,1.65rem); --fs-h4:1.2rem; --fs-lead-scale:clamp(1.125rem,1.06rem + .28vw,1.3rem); --fs-body:1.0625rem; --fs-small:.9375rem; --fs-meta:.8125rem; --fs-eyebrow:.75rem; --fs-price:1.25rem; --lh-tight:1.06; --lh-heading:1.14; --lh-body:1.68; --fw-display:500; --fw-strong:600; /* Layout */ --container:1280px; --container-narrow:880px; --gutter:clamp(20px,3.2vw,40px); --section-y:clamp(64px,4vw + 48px,112px); /* Motion: 180 to 280ms for interface, slower only for editorial imagery. */ --dur-1:.18s; --dur-2:.28s; --dur-3:.6s; /* Layers */ --z-sticky:50; --z-mega:55; --z-drawer:60; --z-popover:70; --z-toast:80; --z-lightbox:200; } /* Utilities, so a template can express intent without an inline style. Migrating the 156 inline attributes onto these is incremental work; the vocabulary exists from here. */ .u-mt-1{margin-top:var(--jh-space-1)} .u-mt-2{margin-top:var(--jh-space-2)} .u-mt-3{margin-top:var(--jh-space-3)} .u-mt-4{margin-top:var(--jh-space-4)} .u-mt-5{margin-top:var(--jh-space-5)} .u-mt-6{margin-top:var(--jh-space-6)} .u-measure-tight{max-width:46ch} .u-center{text-align:center} .u-stack{display:flex;flex-direction:column;gap:var(--jh-space-3)} .u-row{display:flex;gap:var(--jh-space-3);flex-wrap:wrap} *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{font-family:var(--jh-font-body);font-size:17px;line-height:1.7;color:var(--jh-ink);background:var(--jh-ivory);-webkit-font-smoothing:antialiased} img{max-width:100%;display:block} .container{max-width:var(--container,1280px);margin:0 auto;padding:0 var(--gutter,32px)} .measure{max-width:66ch} h1,h2,h3{font-family:var(--jh-font-display);font-weight:500;color:var(--jh-ink);line-height:1.12;text-wrap:balance} .display{font-size:var(--jh-fs-display);line-height:1.06;letter-spacing:0;text-wrap:balance} /* At 375px the hero previously broke into five lines with "Creating" and "Inspiring" each alone on a line. A luxury hero is a composed image; orphans read as an accident (UX-005). */ @media (max-width:520px){ .display{font-size:2.35rem;line-height:1.1} .eyebrow{letter-spacing:.14em;font-size:12px} } h2{font-size:var(--jh-fs-h2);line-height:1.1} h3{font-size:1.7rem;line-height:1.18;font-weight:500} .eyebrow{display:inline-flex;align-items:center;gap:.7rem;font:600 12.5px/1.2 var(--jh-font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--jh-gold-deep)} .eyebrow::before{content:"";width:34px;height:2px;background:var(--jh-gold-500);flex:none} .on-dark .eyebrow{color:var(--jh-gold-300)} .lead{font-size:var(--jh-fs-lead);color:var(--jh-stone)} .price{font-weight:500;font-size:18px;font-feature-settings:"tnum";color:var(--jh-ink)} .section{padding:96px 0} @media (max-width:768px){.section{padding:64px 0}} .section.cream{background:var(--jh-cream)} .section.dark{background:var(--jh-black)} .on-dark,.on-dark h2,.on-dark h3,.on-dark p{color:var(--jh-ivory)} .on-dark .lead{color:var(--text-inverse-muted)} .gold-rule{width:56px;height:1px;background:var(--jh-gold-500);border:0;margin:20px 0 24px} .center .gold-rule{margin-left:auto;margin-right:auto} /* buttons: two only */ .btn-jh{display:inline-block;font:500 14px/1 var(--jh-font-body);letter-spacing:.08em;text-transform:uppercase;padding:16px 30px;border-radius:2px;text-decoration:none;transition:background-color var(--jh-slow) var(--jh-ease),color var(--jh-slow) var(--jh-ease),border-color var(--jh-slow) var(--jh-ease),box-shadow var(--jh-slow) var(--jh-ease);border:1px solid transparent;cursor:pointer} .btn-jh.primary{background:var(--jh-black);color:var(--jh-ivory)} .btn-jh.primary:hover{background:var(--jh-charcoal);border-color:var(--jh-gold-500)} .btn-jh.ghost{border-color:var(--jh-ink);color:var(--jh-ink);background:transparent} .btn-jh.ghost:hover{background:var(--jh-cream)} .on-dark .btn-jh.ghost{color:var(--jh-ivory);border-color:var(--jh-ivory)} .on-dark .btn-jh.ghost:hover{background:rgba(250,247,240,.08)} /* links: gold underline draw */ .link-jh{color:var(--jh-ink);text-decoration:none;background-image:linear-gradient(var(--jh-gold-500),var(--jh-gold-500));background-repeat:no-repeat;background-position:0 100%;background-size:100% 1px;padding-bottom:4px;transition:background-size var(--jh-slow) var(--jh-ease)} .link-jh:hover{background-size:100% 2px} /* header */ .topbar{background:var(--jh-black);color:var(--jh-ivory);font-size:12.5px;letter-spacing:.04em} .topbar .container{display:flex;justify-content:space-between;padding-top:9px;padding-bottom:9px} .topbar a{color:var(--jh-gold-300);text-decoration:none;margin-left:22px} .nav-jh{position:sticky;top:0;z-index:50;background:var(--jh-ivory);transition:all .35s var(--jh-ease);border-bottom:1px solid transparent} /* Child combinator, not descendant. The mega panels carry a .container of their own (.mega-inner), so a descendant selector here sized that panel as if it were the navigation bar. The scrolled variant below is the damaging one: at three classes it outranks the height:auto that site.css gives .mega-inner, so once the page had scrolled an open panel collapsed to its own padding and showed a sliver of itself. */ .nav-jh > .container{display:flex;align-items:center;gap:26px;height:84px;transition:height .35s var(--jh-ease)} .nav-jh.is-scrolled{border-bottom-color:var(--jh-hairline)} .nav-jh.is-scrolled > .container{height:62px} /* The royal lockup, drawn in HTML so it stays sharp and takes its colours from where it sits: the crest, then JAMARI over a jewelled rule carrying HOMES. Every size is in em of the brand's font-size, so one font-size rule rescales the whole mark. */ .brand{display:inline-flex;align-items:center;gap:.5em;font-family:var(--jh-font-display);font-size:24px;font-weight:600;line-height:1;color:var(--jh-black);text-decoration:none;margin-right:auto} .brand-crest{display:block;flex:none;width:auto;height:2.2em} .brand-words{display:inline-flex;flex-direction:column;align-items:stretch;gap:.26em} .bw-main{font-size:1em;font-weight:600;letter-spacing:.2em;margin-right:-.2em;line-height:.8;white-space:nowrap} .bw-sub{display:flex;align-items:center;gap:.5em;font-size:.36em;font-weight:600;letter-spacing:.62em;line-height:1;color:var(--jh-gold-deep)} .bw-sub b{font-weight:inherit;padding-left:.62em} .bw-sub i{position:relative;flex:1 1 auto;min-width:.8em;height:1px;background:currentColor} .bw-sub i::after{content:"";position:absolute;top:50%;width:.42em;height:.42em;background:currentColor;transform:translate(0,-50%) rotate(45deg)} .bw-sub i:first-child::after{right:-.1em} .bw-sub i:last-child::after{left:-.1em} .nav-links{display:flex;gap:26px;list-style:none} .nav-links a{font:500 13px/1 var(--jh-font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--jh-ink);text-decoration:none;padding-bottom:6px;background-image:linear-gradient(var(--jh-gold-500),var(--jh-gold-500));background-repeat:no-repeat;background-position:0 100%;background-size:0 1px;transition:background-size var(--jh-slow) var(--jh-ease)} .nav-links a:hover,.nav-links a.active{background-size:100% 1px} /* (The header's consultation button is a .btn-jh; the old free-standing gold .nav-cta styling fought it on padding and background and styled nothing else, so it was removed.) */ @media (max-width:900px){.nav-links{display:none}.topbar .util>a{display:none}.topbar .tb-addr{display:none}.topbar .container{justify-content:flex-end}.prefs{margin-right:0}} /* hero */ .hero{position:relative;min-height:86vh;min-height:86svh;display:flex;align-items:center;overflow:hidden;background:var(--jh-black)} /* A soft black to charcoal scrim over the photograph (site.css shapes it to the text column). */ .hero-media{position:absolute;inset:0;background: linear-gradient(105deg,rgba(11,11,11,.88) 0%,rgba(20,20,20,.72) 46%,rgba(28,28,28,.28) 100%), url('img/hero.jpg') center/cover no-repeat #0B0B0B; background: linear-gradient(105deg,rgba(11,11,11,.88) 0%,rgba(20,20,20,.72) 46%,rgba(28,28,28,.28) 100%), image-set(url('img/hero.webp') type('image/webp'), url('img/hero.jpg') type('image/jpeg')) center/cover no-repeat #0B0B0B} .hero-media::after{content:"";position:absolute;inset:0;background:radial-gradient(90rem 40rem at 82% 20%,rgba(230,200,105,.16),transparent 60%)} .hero .container{position:relative;z-index:2} .hero-plate{position:absolute;right:8%;top:50%;transform:translateY(-50%);width:min(34vw,420px);aspect-ratio:1;border-radius:50%;border:1px solid var(--jh-gold-300);opacity:.9} .hero-plate::before{content:"";position:absolute;inset:7%;border-radius:50%;border:1px solid rgba(230,200,105,.45)} .hero-plate::after{content:"";position:absolute;inset:16%;border-radius:50%;background:radial-gradient(circle at 38% 32%,#FBF8F1 0%,#EFE9DC 58%,#DCD3C0 100%);box-shadow:inset 0 0 0 1px rgba(201,162,39,.35), inset 0 18px 40px rgba(0,0,0,.18)} @media (max-width:900px){.hero-plate{display:none}} /* editorial world rows */ .world{display:grid;grid-template-columns:7fr 5fr;gap:48px;align-items:center} .world.flip{grid-template-columns:5fr 7fr} .world.flip .world-media{order:2} @media (max-width:900px){.world,.world.flip{grid-template-columns:1fr}.world.flip .world-media{order:0}} .world-media{aspect-ratio:3/2;position:relative;overflow:hidden} .world-media .ph{position:absolute;inset:0;transition:transform 1.2s var(--jh-ease)} .world:hover .world-media .ph{transform:scale(1.03)} .ph{display:flex;align-items:flex-end;padding:18px;color:var(--jh-stone);font:500 11px/1 var(--jh-font-body);letter-spacing:.14em;text-transform:uppercase} .ph.interior{background:linear-gradient(155deg,#E8E0D0,#D9CFBA)} .ph.porcelain{background:linear-gradient(155deg,#F2EEE4,#E2DACA)} .ph.hospitality{background:linear-gradient(155deg,#E9E3D6,#D6CDBB)} .ph.heritage{background:linear-gradient(155deg,#E4DFD2,#CFC4AC)} .ph.project{background:linear-gradient(155deg,#E6E1D4,#D5CCB8)} .ph::before{content:"";position:absolute;inset:14px;border:1px solid rgba(201,162,39,.35)} img.ph{object-fit:cover;width:100%;height:100%;padding:0} .world-media::after,.card-jh .media::after{content:"";position:absolute;inset:14px;border:1px solid rgba(201,162,39,.35);pointer-events:none} .world-media,.card-jh .media{background:var(--jh-cream)} /* jewel box */ .jewel{position:relative} .jewel .set{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:56px} @media (max-width:900px){.jewel .set{grid-template-columns:1fr}} .plate-card{text-align:center;padding:40px 24px;border:1px solid rgba(230,200,105,.25)} .plate{width:150px;height:150px;border-radius:50%;margin:0 auto 26px;background:radial-gradient(circle at 36% 30%,#FDFBF5 0%,#F0EADC 55%,#DFD6C2 100%);border:1px solid var(--jh-gold-300);box-shadow:inset 0 0 0 6px rgba(230,200,105,.18), 0 24px 40px rgba(0,0,0,.35);position:relative} .plate::after{content:"";position:absolute;inset:14px;border-radius:50%;border:1px solid rgba(201,162,39,.5)} /* Card titles carry the piece name — the second most important element on a card after the photograph. At 1.25rem they sat 3px above body copy and read as bold text rather than as a title, which made the catalogue scan as a list instead of a collection. */ .plate-card h3{color:var(--jh-ivory);font-size:1.45rem;margin-bottom:6px} .plate-card .pieces{color:var(--text-inverse-quiet);font-size:13px;letter-spacing:.08em;text-transform:uppercase} .plate-card .price{color:var(--jh-gold-300);display:block;margin-top:12px} /* cards grid (projects, journal) */ .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:32px} @media (max-width:900px){.grid-3{grid-template-columns:1fr}} .card-jh{text-decoration:none;color:inherit;display:block} .card-jh .media{aspect-ratio:4/5;overflow:hidden;position:relative;margin-bottom:18px} .card-jh .media .ph{position:absolute;inset:0;transition:transform 1.1s var(--jh-ease)} .card-jh:hover .media .ph{transform:scale(1.04)} .card-jh h3{font-size:1.5rem;display:inline;background-image:linear-gradient(var(--jh-gold-500),var(--jh-gold-500));background-repeat:no-repeat;background-position:0 100%;background-size:0 1px;transition:background-size var(--jh-slow) var(--jh-ease)} .card-jh:hover h3{background-size:100% 1px} .card-jh .cap{color:var(--jh-stone);font-size:14px;margin-top:8px} /* assurance */ .assure{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;text-align:center} @media (max-width:900px){.assure{grid-template-columns:repeat(2,1fr)}} .assure .item svg{width:30px;height:30px;stroke:var(--jh-gold-500);fill:none;stroke-width:1.2;margin:0 auto 14px} .assure h3{font:600 14px/1.4 var(--jh-font-body);letter-spacing:.08em;text-transform:uppercase} .assure p{font-size:13.5px;color:var(--jh-stone);margin-top:6px} /* footer */ /* scoped to #footer so the site-wide footer styles never leak into nested