/* ========================================================================== ParfAI — shared design system Card grids, product hero, and CTA bands keep the original Direction B full-bleed saturated family-color gradients and black pill buttons. The page-top hero ("Atelier" direction) is a plain panel — no gradient box — set in Fraunces (display) and Inter (body), with a thin rust rule standing in for the old oversized gradient block. ========================================================================== */ /* Self-hosted Inter stays as an offline-safe fallback behind the Google Fonts Fraunces/Inter request each page's makes — if the network request fails or is blocked, these local files still render. */ @font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/inter-latin-400-normal.woff2') format('woff2')} @font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/inter-latin-500-normal.woff2') format('woff2')} @font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/inter-latin-600-normal.woff2') format('woff2')} :root{ --bg:#FAFAF7;--panel:#FFFFFF;--ink:#141414;--ink2:#4A4A46;--muted:#8A8378; --violet:#8B7CFF;--cyan:#00B8D4;--pink:#FF4D9D;--orange:#FF8C42;--mint:#00C48B; --rust:#A85C3B; --border:rgba(20,20,20,.09); --irid:linear-gradient(120deg,#8B7CFF 0%,#C86BFF 30%,#FF4D9D 62%,#FF8C42 100%); --disp:'Fraunces','Georgia',serif;--body:'Inter','Helvetica Neue',Arial,sans-serif; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{background:var(--bg);color:var(--ink);font-family:var(--body);line-height:1.55;overflow-x:hidden} a{color:inherit;text-decoration:none} .wrap{max-width:1180px;margin:0 auto;padding:0 28px} .wrap.narrow{max-width:760px} .disp{font-family:var(--disp)} .g{background:var(--irid);-webkit-background-clip:text;background-clip:text;color:transparent} /* ---- buttons ---- */ .btn{font-family:var(--body);font-weight:700;font-size:13px;letter-spacing:.4px;text-transform:uppercase;padding:15px 28px;border-radius:100px;background:var(--ink);color:#fff;border:none;cursor:pointer;display:inline-block} .btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--border)} .btn.irid{background:var(--irid);color:#fff} .btn.block{width:100%;text-align:center} .btn.sm{padding:10px 18px;font-size:11px;border-radius:100px} .btn:hover{opacity:.88} /* ---- nav ---- */ nav{position:sticky;top:0;z-index:40;background:rgba(250,250,247,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--border)} .nav{display:flex;align-items:center;gap:24px;height:76px} .logo{display:flex;align-items:center;gap:11px;font-family:var(--disp);font-weight:700;font-size:22px;letter-spacing:-.02em} .navlinks{display:flex;gap:22px;font-size:14px;color:var(--ink);font-weight:500;align-items:center} .navlinks a:hover,.navlinks .menu:hover{color:var(--violet)} .navlinks a.on{color:var(--violet)} .navsp{flex:1} .menu{display:flex;align-items:center;gap:5px;cursor:pointer} .menu .car{font-size:11px;transition:transform .15s} .megawrap{position:relative} .megawrap.open .mega{display:block} .megawrap.open .car{transform:rotate(180deg)} .mega{position:absolute;left:0;top:36px;width:920px;max-width:calc(100vw - 40px); background:var(--panel);border:1px solid var(--border);border-radius:24px;box-shadow:0 34px 70px -34px rgba(20,20,20,.22);padding:32px 36px;display:none;z-index:60} .mega .cols{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px 44px} .colhead{font-size:12px;color:var(--muted);font-weight:600;margin-bottom:18px;letter-spacing:.3px;min-height:14px} .it{display:block;margin-bottom:20px} .it b{font-family:var(--disp);font-weight:700;font-size:15px;display:block;letter-spacing:-.01em} .it span{font-size:13px;color:var(--muted)} .it:hover b{color:var(--violet)} /* ---- mobile nav: hamburger + slide-down drawer ---- Below 900px .navlinks becomes a full-height fixed drawer (toggled by #navburger, see bindMobileNav in data.js) instead of the inline row — there is otherwise no way to reach Explore/Houses/Community/Pricing on a phone. The mega dropdowns reuse the exact same markup as tap-to-open accordion sections rather than floating absolutely-positioned panels. */ .navburger{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:34px;height:34px;border:none;background:transparent;cursor:pointer;padding:0;flex-shrink:0} .navburger span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;transition:transform .2s ease,opacity .2s ease} .navburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)} .navburger.open span:nth-child(2){opacity:0} .navburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} body.navlock{overflow:hidden} @media(max-width:900px){ .navburger{display:flex} .navlinks{display:none} .navlinks.mobileopen{ display:flex;flex-direction:column;align-items:stretch;gap:0; /* position:absolute, anchored to