/* ════════════════════════════════════════════════════════════════════ PORTFOLIO HOME REALTY — DESIGN SYSTEM · "Editorial Coastal Luxury" One stylesheet that (a) powers the redesigned homepage natively and (b) re-skins every legacy page via design-token + font overrides. Loaded LAST in so it wins the cascade. ════════════════════════════════════════════════════════════════════ */ /* ── New palette + legacy token remap ─────────────────────────────── */ :root{ /* New semantic palette */ --paper:#F7F3EC; /* warm bone background */ --paper-2:#EFE9DC; /* deeper sand (tinted bands) */ --paper-3:#E7DFCF; --ink:#211C17; /* warm near-black */ --ink-soft:#41382F; /* warm body text */ --night:#1B1814; /* dark-section background */ --night-2:#13110E; --clay:#BC5B36; /* primary terracotta accent */ --clay-dark:#9C4A2B; --clay-tint:#F3E0D5; --clay-mid:#E1B69F; --sage:#566F4F; /* secondary green */ --sage-tint:#E7EDE1; --gold:#C2A06A; /* luxury highlight */ --gold-soft:#E9DCC2; --line:#E3DBCC; /* hairline on paper */ --line-2:#D6CBB6; /* ── Legacy tokens remapped onto new palette (cascade reskin) ── */ --orange:var(--clay); --orange-dark:var(--clay-dark); --orange-light:var(--clay-tint); --orange-mid:var(--clay-mid); --charcoal:var(--ink); --body:var(--ink-soft); --muted:#8C8475; --subtle:#B4AB99; --white:#fff; --off-white:#FBF8F2; --gray-1:var(--paper-2); --gray-2:var(--line); --gray-3:var(--line-2); --green:var(--sage); --green-light:var(--sage-tint); --blue:#3C6076; --blue-light:#E9F0F1; /* Geometry + depth */ --radius:7px; --radius-lg:13px; --radius-xl:20px; --shadow:0 2px 18px rgba(33,28,23,.07); --shadow-lg:0 18px 60px rgba(33,28,23,.13); /* Typography */ --font-display:'Fraunces','Cormorant Garamond',Georgia,serif; --font-body:'Hanken Grotesk',system-ui,-apple-system,sans-serif; --nav-h:74px; --section-pad:84px; } /* ── Base ─────────────────────────────────────────────────────────── */ html{font-size:17px;scroll-behavior:smooth} html body{ font-family:var(--font-body)!important; color:var(--ink-soft)!important; background:var(--paper)!important; line-height:1.72; -webkit-font-smoothing:antialiased; letter-spacing:.002em; } /* faint paper grain for atmosphere */ html body::before{ content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E"); } body>*{position:relative;z-index:1} h1,h2,h3,h4,h5,h6{ font-family:var(--font-display)!important; color:var(--ink); line-height:1.08; letter-spacing:-.018em; font-weight:430; font-optical-sizing:auto; } h1{font-size:clamp(2.5rem,5.4vw,4.5rem)} h2{font-size:clamp(1.85rem,3.4vw,2.95rem);font-weight:440} h3{font-size:clamp(1.1rem,1.8vw,1.35rem);font-weight:500} p{line-height:1.78} strong,b{color:var(--ink);font-weight:600} em{font-style:italic} a{transition:color .2s,background .2s,border-color .2s} ::selection{background:var(--clay);color:#fff} *:focus-visible{outline:2px solid var(--clay);outline-offset:3px} img{max-width:100%} /* ── Layout helpers (shared with legacy) ──────────────────────────── */ .container{max-width:1180px;margin:0 auto;padding:0 2rem} .section{padding:var(--section-pad) 0} .section-tinted{background:var(--paper-2)!important} .section-dark{background:var(--night)!important} .section-orange{background:var(--clay)!important} .text-center{text-align:center} /* reveal is opt-in: only hidden once JS confirms it can reveal them */ html.reveal-on .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)} html.reveal-on .reveal.visible{opacity:1;transform:none} /* Eyebrow / tag */ .tag,.eyebrow{ display:inline-flex;align-items:center;gap:7px; font-family:var(--font-body)!important; font-size:.7rem!important;font-weight:600!important;text-transform:uppercase; letter-spacing:.18em!important;padding:5px 13px;border-radius:100px; } .eyebrow{padding:0;letter-spacing:.24em;color:var(--clay);background:none} .tag-orange{background:var(--clay-tint)!important;color:var(--clay-dark)!important} .tag-green{background:var(--sage-tint)!important;color:var(--sage)!important} .tag-gray{background:var(--paper-3)!important;color:var(--muted)!important} .tag-white{background:rgba(255,255,255,.1)!important;color:rgba(255,255,255,.82)!important;border:1px solid rgba(255,255,255,.22)!important} /* ── Buttons (force new font + shape) ─────────────────────────────── */ .btn-primary,.btn-secondary,.btn-white,.btn-ghost-white,.hero-card-cta,.nav-cta,.form-submit{ font-family:var(--font-body)!important;font-weight:600!important;letter-spacing:.01em;text-decoration:none!important; } .btn-primary{ background:var(--clay)!important;color:#fff!important;border:none!important; padding:14px 30px!important;border-radius:100px!important;font-size:.9rem!important; box-shadow:0 10px 26px -10px rgba(188,91,54,.7)!important; display:inline-flex;align-items:center;gap:9px;cursor:pointer;transition:all .25s!important; } .btn-primary:hover{background:var(--clay-dark)!important;transform:translateY(-2px)!important;box-shadow:0 16px 34px -12px rgba(188,91,54,.8)!important} .btn-secondary{ background:transparent!important;color:var(--ink)!important; border:1.5px solid var(--line-2)!important;padding:13px 26px!important;border-radius:100px!important;font-size:.9rem!important; display:inline-flex;align-items:center;gap:8px;transition:all .25s!important; } .btn-secondary:hover{border-color:var(--clay)!important;color:var(--clay)!important;background:var(--clay-tint)!important} .btn-white{background:var(--paper)!important;color:var(--clay-dark)!important;padding:14px 30px!important;border-radius:100px!important;font-size:.9rem!important;display:inline-flex;align-items:center;gap:9px;transition:all .25s!important} .btn-white:hover{background:#fff!important;transform:translateY(-2px)!important} .btn-ghost-white{background:transparent!important;color:rgba(255,255,255,.8)!important;border:1.5px solid rgba(255,255,255,.28)!important;padding:13px 26px!important;border-radius:100px!important;font-size:.88rem!important;display:inline-flex;align-items:center;gap:8px;transition:all .25s!important} .btn-ghost-white:hover{color:#fff!important;border-color:rgba(255,255,255,.6)!important;background:rgba(255,255,255,.06)!important} /* ════════════════════════════════════════════════════════════════════ NAVIGATION (new markup uses .site-nav; also hardens legacy