/* Jamari Homes design tokens and shared components. Per build-plans/11-jamari-homes-design-plan.md */ :root{ --jh-teal-900:#0F3D3E; --jh-teal-800:#123f3d; --jh-teal-700:#14524F; --jh-teal-100:#E3EDEA; --jh-gold-500:#C9A227; --jh-gold-300:#E6C869; --jh-gold-deep:#8A6314; /* accessible gold for text on light */ --jh-ivory:#FAF7F0; --jh-cream:#F3EDE2; --jh-ink:#1F2421; --jh-stone:#6B7370; --jh-hairline:#E0DAD0; --jh-font-display:'Cormorant Garamond',Georgia,'Times New Roman',serif; --jh-font-body:'Jost','Segoe UI',system-ui,-apple-system,sans-serif; --jh-ease:cubic-bezier(.22,1,.36,1); --jh-slow:.6s; --jh-reveal:.9s; } *{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:1280px;margin:0 auto;padding:0 32px} .measure{max-width:66ch} h1,h2,h3{font-family:var(--jh-font-display);font-weight:600;color:var(--jh-teal-900);line-height:1.1;text-wrap:balance} .display{font-size:clamp(2.9rem,5.6vw,4.7rem);line-height:1.04;letter-spacing:0} h2{font-size:clamp(2rem,3.6vw,2.9rem);line-height:1.1} h3{font-size:1.7rem;line-height:1.18;font-weight:600} .eyebrow{display:inline-flex;align-items:center;gap:.7rem;font:600 12.5px/1.2 var(--jh-font-body);letter-spacing:.22em;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:1.05rem;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-teal-900)} .on-dark,.on-dark h2,.on-dark h3,.on-dark p{color:var(--jh-ivory)} .on-dark .lead{color:#CBD5CE} .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:.06em;text-transform:uppercase;padding:16px 30px;border-radius:2px;text-decoration:none;transition:all var(--jh-slow) var(--jh-ease);border:1px solid transparent;cursor:pointer} .btn-jh.primary{background:var(--jh-teal-900);color:var(--jh-ivory)} .btn-jh.primary:hover{background:#092827} .btn-jh.ghost{border-color:var(--jh-gold-500);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-gold-300)} .on-dark .btn-jh.ghost:hover{background:rgba(230,200,105,.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-teal-900);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} .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} .brand{font-family:var(--jh-font-display);font-size:26px;font-weight:600;letter-spacing:.1em;color:var(--jh-teal-900);text-decoration:none;margin-right:auto} .brand span{color:var(--jh-gold-500)} .nav-links{display:flex;gap:26px;list-style:none} .nav-links a{font:500 13px/1 var(--jh-font-body);letter-spacing:.05em;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} .nav-cta{display:inline-block;background:var(--jh-gold-500);color:var(--jh-teal-900);font:600 12px/1 var(--jh-font-body);letter-spacing:.14em;text-transform:uppercase;padding:13px 22px;border-radius:3px;text-decoration:none;white-space:nowrap;transition:background .25s var(--jh-ease)} .nav-cta:hover{background:var(--jh-gold-300)} @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;display:flex;align-items:center;overflow:hidden;background:var(--jh-teal-900)} .hero-media{position:absolute;inset:0;background: linear-gradient(105deg,rgba(9,40,41,.92) 0%,rgba(15,61,62,.82) 46%,rgba(15,61,62,.45) 100%), url('img/hero.jpg') center/cover no-repeat #0F3D3E} .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(15,61,62,.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,#DFE7E3,#CBD8D2)} .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)} .plate-card h3{color:var(--jh-ivory);font-size:1.25rem;margin-bottom:6px} .plate-card .pieces{color:#A9B8B1;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.35rem;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