/* ============================================================ Boardwalk Realty — Shared Portal Design System Linked by every /portal and /admin page. Single source of truth for brand tokens, the sticky top nav, and the reusable .pds-* components used by upgraded pages. Namespaced (.pnav / .pds-) so it never collides with a page's own existing inline styles. ============================================================ */ :root{ --ink:#14213D; --ink-2:#1E2F5C; --ink-deep:#0E1830; --muted:#6E7180; --gold:#B08D57; --gold-light:#C9A86A; --gold-soft:#EFE7DA; --cream:#F6F1E7; --cream-soft:#FBF8F1; --surface:#FFFFFF; --border:#E3DCCD; --border-soft:#EFE9DC; --line:#E3DCCD; --ok:#2E7D32; --pending:#C67C1E; --danger:#B23A48; --shadow-sm:0 6px 16px rgba(20,33,61,.06); --shadow:0 16px 34px rgba(20,33,61,.08); --shadow-navy:0 22px 46px rgba(10,16,36,.26); --r-card:16px; --r-btn:10px; --page-bg: radial-gradient(820px 480px at 6% -8%, #FFF0D6 0%, rgba(255,240,214,0) 60%), radial-gradient(720px 420px at 104% 2%, #F4EAD6 0%, rgba(244,234,214,0) 58%), linear-gradient(180deg,#FCFAF5 0%,#F4F0E6 100%); } /* ---- shared page base (opt-in via class on ) ---- */ .pds-body{ font-family:'Montserrat',sans-serif; margin:0; color:var(--ink); min-height:100vh; background:var(--page-bg); } .pds-shell{max-width:1280px;margin:0 auto;padding:22px 22px 72px} .pds-shell-narrow{max-width:960px;margin:0 auto;padding:22px 22px 72px} /* ============================================================ Sticky top nav (injected by /js/portal-nav.js) ============================================================ */ .pnav{ position:sticky;top:0;z-index:40; backdrop-filter:saturate(1.1) blur(10px); background:rgba(252,250,245,.82); border-bottom:1px solid var(--border-soft); } .pnav-inner{max-width:1280px;margin:0 auto;padding:12px 22px;display:flex;align-items:center;gap:18px} .pnav-brand{display:flex;align-items:center;gap:11px;font-weight:700;text-decoration:none;color:var(--ink)} .pnav-brand img{height:30px;width:auto;display:block} .pnav-wm{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);font-weight:600} .pnav-links{display:flex;gap:2px;margin-left:6px;flex-wrap:wrap} .pnav-link{ font-size:.86rem;font-weight:600;color:#54607A;padding:8px 11px;border-radius:9px;text-decoration:none; transition:background .16s ease,color .16s ease; } .pnav-link:hover{background:rgba(176,141,87,.10);color:var(--ink)} .pnav-link.active{color:var(--ink);background:rgba(20,33,61,.06)} .pnav-right{margin-left:auto;display:flex;align-items:center;gap:12px} .pnav-avatar{ width:38px;height:38px;border-radius:999px;object-fit:cover;border:2px solid var(--gold-soft);overflow:hidden; background:linear-gradient(135deg,#14213D,#3A4B76);color:#FFF8EC;display:grid;place-items:center; font-size:.82rem;font-weight:700;box-shadow:var(--shadow-sm);text-decoration:none } .pnav-avatar img{width:100%;height:100%;object-fit:cover;display:block} .pnav-btn{ border:1px solid var(--border);background:#fff;color:var(--ink);border-radius:9px; padding:8px 13px;font:inherit;font-size:.84rem;font-weight:600;cursor:pointer;text-decoration:none; display:inline-flex;align-items:center;gap:6px;transition:border-color .16s ease,transform .16s ease } .pnav-btn:hover{border-color:var(--gold);transform:translateY(-1px)} .pnav-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px} /* ============================================================ Reusable components (.pds-*) for upgraded pages ============================================================ */ /* eyebrow / hero */ .pds-eyebrow{font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);font-weight:600} .pds-hero{ position:relative;overflow:hidden;border-radius:22px;color:#F8F4EA;margin-top:18px; background: radial-gradient(640px 320px at 88% -30%, rgba(176,141,87,.42) 0%, rgba(176,141,87,0) 62%), linear-gradient(118deg,#14213D 0%,#1B2A52 56%,#0E1830 100%); box-shadow:var(--shadow-navy); padding:28px 32px;border:1px solid rgba(255,255,255,.08); } .pds-hero::before{ content:"";position:absolute;inset:0;opacity:.05;pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .pds-hero .pds-eyebrow{color:var(--gold-light)} .pds-hero h1{ font-family:'Cormorant Garamond',Georgia,serif;font-weight:600; font-size:clamp(1.9rem,3.2vw,2.7rem);line-height:1.05;margin:8px 0 6px;letter-spacing:.005em;position:relative; } .pds-hero p{margin:0;color:rgba(248,244,234,.78);font-size:.96rem;max-width:60ch;line-height:1.55;position:relative} .pds-hero-row{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;position:relative;flex-wrap:wrap} /* card */ .pds-card{ background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card); box-shadow:var(--shadow-sm);overflow:hidden } .pds-card-head{ display:flex;align-items:center;justify-content:space-between;gap:12px; padding:15px 18px;border-bottom:1px solid var(--border-soft); background:linear-gradient(180deg,#fff 0%,#FCF9F1 100%) } .pds-card-head h2{ margin:0;font-family:'Cormorant Garamond',serif;font-weight:600;font-size:1.32rem;letter-spacing:.01em; display:flex;align-items:center;gap:10px } .pds-card-body{padding:16px 18px} .pds-card-link{ display:block;text-decoration:none;color:inherit;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease } .pds-card-link:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:#DCCFB6} /* buttons */ .pds-btn{ border:1px solid transparent;border-radius:var(--r-btn);padding:10px 16px;font:inherit;font-size:.9rem;font-weight:700; cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px; transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease,background .16s ease } .pds-btn:hover{transform:translateY(-1px)} .pds-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px} .pds-btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none} .pds-btn-gold{background:linear-gradient(180deg,#C29A5E,#B08D57);color:#fff;box-shadow:0 10px 22px rgba(176,141,87,.28)} .pds-btn-gold:hover{box-shadow:0 14px 28px rgba(176,141,87,.36)} .pds-btn-ink{background:linear-gradient(135deg,var(--ink),var(--ink-2));color:#F4E9D4} .pds-btn-ghost{background:#fff;color:var(--ink);border-color:var(--border)} .pds-btn-ghost:hover{border-color:var(--gold)} .pds-btn-outline{color:#F8F4EA;border-color:rgba(248,244,234,.35);background:rgba(248,244,234,.06)} .pds-btn-outline:hover{border-color:rgba(248,244,234,.75)} /* misc */ .pds-badge{font-size:.62rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:3px 8px;border-radius:999px;background:var(--cream-soft);color:var(--muted)} .pds-eyebrow-dark{color:var(--gold)} .pds-muted{color:var(--muted)} .pds-empty{padding:24px;text-align:center;color:var(--muted);font-size:.9rem;border:1px dashed var(--border);border-radius:12px;background:rgba(255,255,255,.6)} .pds-loading{padding:28px;text-align:center;color:var(--muted);font-size:.9rem} .pds-title{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:1.6rem;margin:0} @media (max-width:600px){ .pnav-links{display:none} .pnav-inner{padding:11px 16px} } @media (prefers-reduced-motion:reduce){ .pnav *, .pds-card-link, .pds-btn{transition:none !important} }