/* ============================================================ PropTales — warm editorial brand theme (single source of truth) Palette derived from the generated PropTales golden-hour imagery. Type: Fraunces (editorial serif display) + Inter (UI/body sans). Load AFTER vendor/fonts/fonts.css. Opt a page in with . ============================================================ */ :root{ /* --- core palette (from the image tone) --- */ --pt-cream:#f8f1df; /* page background (warm golden) */ --pt-paper:#fdf9ef; /* cards / raised surfaces */ --pt-sand:#e3ccae; /* soft fills / borders */ --pt-sand-2:#d8bd98; /* deeper sand */ --pt-amber:#c1852e; /* PRIMARY accent (golden amber / honey) */ --pt-amber-deep:#9c631e; /* accent hover / pressed */ --pt-honey:#d9a94e; /* luminous golden highlight */ --pt-terracotta:#a56238; /* secondary accent (warm) */ --pt-ink:#201a12; /* primary text */ --pt-espresso:#14110d; /* dark sections / hero overlay / footer */ --pt-muted:#6e5f4c; /* muted text */ --pt-line:rgba(32,26,18,.14); --pt-line-soft:rgba(32,26,18,.08); --pt-line-solid:#e7ded0; /* opaque warm hairline (for pages using solid borders) */ --pt-gold-grad:linear-gradient(135deg,#cf9539 0%,#9c631e 100%); /* on-dark */ --pt-on-dark:#f4ead6; --pt-on-dark-muted:#c9b79a; /* --- type --- */ --pt-serif:"Fraunces",Georgia,"Times New Roman",serif; --pt-sans:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif; /* --- shape / depth --- */ --pt-r-sm:8px; --pt-r:14px; --pt-r-lg:22px; --pt-r-pill:999px; --pt-shadow:0 1px 2px rgba(20,17,13,.06),0 10px 30px rgba(20,17,13,.08); --pt-shadow-lg:0 30px 70px rgba(20,17,13,.18); --pt-maxw:1180px; } /* ---------- base (scoped to .pt so it never hijacks unstyled pages) ---------- */ body.pt{ margin:0; background:var(--pt-cream); color:var(--pt-ink); font-family:var(--pt-sans); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } .pt h1,.pt h2,.pt h3,.pt h4,.pt .pt-display{ font-family:var(--pt-serif); font-weight:600; color:var(--pt-ink); line-height:1.08; letter-spacing:-.01em; margin:0 0 .4em; } .pt h1,.pt .pt-display{ font-size:clamp(2.2rem,5vw,4rem); font-weight:600; } .pt h2{ font-size:clamp(1.6rem,3.2vw,2.5rem); } .pt h3{ font-size:1.35rem; } .pt p{ color:var(--pt-ink); } .pt a{ color:var(--pt-amber-deep); text-decoration:none; } .pt a:hover{ color:var(--pt-terracotta); } .pt ::selection{ background:var(--pt-sand); color:var(--pt-ink); } /* editorial kicker / eyebrow */ .pt-kicker{ font-family:var(--pt-sans); font-weight:600; font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--pt-amber); display:inline-block; margin-bottom:.9rem; } .pt-lead{ font-size:1.18rem; line-height:1.65; color:var(--pt-muted); } .pt-muted{ color:var(--pt-muted); } .pt-wrap{ max-width:var(--pt-maxw); margin:0 auto; padding:0 24px; } .pt-serif{ font-family:var(--pt-serif); } /* ---------- buttons ---------- */ .pt-btn{ display:inline-flex; align-items:center; gap:.5em; cursor:pointer; font-family:var(--pt-sans); font-weight:600; font-size:.98rem; padding:.8em 1.5em; border-radius:var(--pt-r-pill); border:1px solid transparent; background:var(--pt-gold-grad); color:#fff; box-shadow:var(--pt-shadow); transition:transform .15s ease, box-shadow .15s ease, background .15s ease; } .pt-btn:hover{ transform:translateY(-1px); box-shadow:var(--pt-shadow-lg); color:#fff; } .pt-btn:active{ transform:translateY(0); } .pt-btn-ghost{ background:transparent; color:var(--pt-ink); border:1px solid var(--pt-line); box-shadow:none; } .pt-btn-ghost:hover{ border-color:var(--pt-amber); color:var(--pt-amber-deep); background:rgba(193,133,46,.09); } .pt-btn-lg{ padding:1em 1.9em; font-size:1.05rem; } /* ---------- surfaces ---------- */ .pt-card{ background:var(--pt-paper); border:1px solid var(--pt-line-soft); border-radius:var(--pt-r-lg); box-shadow:var(--pt-shadow); padding:26px; } .pt-hairline{ border:0; border-top:1px solid var(--pt-line); margin:0; } .pt-dark{ background:var(--pt-espresso); color:var(--pt-on-dark); } .pt-dark h1,.pt-dark h2,.pt-dark h3{ color:var(--pt-on-dark); } .pt-dark .pt-muted,.pt-dark p{ color:var(--pt-on-dark-muted); } /* ---------- forms ---------- */ .pt-input,.pt input[type=text],.pt input[type=email],.pt input[type=url], .pt input[type=password],.pt input[type=search],.pt textarea,.pt select{ font-family:var(--pt-sans); font-size:1rem; color:var(--pt-ink); background:var(--pt-paper); border:1px solid var(--pt-line); border-radius:var(--pt-r-sm); padding:.7em .9em; outline:none; transition:border-color .15s ease, box-shadow .15s ease; } .pt-input:focus,.pt input:focus,.pt textarea:focus,.pt select:focus{ border-color:var(--pt-amber); box-shadow:0 0 0 3px rgba(193,133,46,.20); } .pt-label{ font-weight:600; font-size:.82rem; color:var(--pt-muted); letter-spacing:.02em; } /* ---------- badge / pill ---------- */ .pt-badge{ display:inline-flex; align-items:center; gap:.4em; font-size:.74rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--pt-amber-deep); background:rgba(193,133,46,.13); border:1px solid rgba(193,133,46,.26); padding:.35em .8em; border-radius:var(--pt-r-pill); } /* ---------- top bar / brand wordmark ---------- */ .pt-brand{ font-family:var(--pt-serif); font-weight:600; font-size:1.35