/* PLANTATION BAY — DESIGN SYSTEM · dist/plantation-ds.css GENERATED FILE — do not hand-edit. Edit tokens/*.css or handoff/plantation-ds/plantation-ds.css then run ./build-dist.sh Load LAST in on the website so its corrections win. */ /* ===== TOKENS ===== */ /* ============================================================ Plantation Bay — Color System Direction: "Colonial Plantation Luxury" Warm ivory grounds · deep plantation greens · aged brass · burgundy calls-to-action. Palette derived from the live rooms + packages redesign; kept intentionally close to the colours already in production. ============================================================ */ :root { /* ── Warm neutrals (backgrounds & cards) ─────────────────── */ --pb-ivory: #F8F3EB; /* page ground (rooms) */ --pb-cream: #FAF8F4; /* page ground (packages) */ --pb-cream-card: #FFFEF9; /* room detail card fill */ --pb-ivory-dark: #EDE8DC; /* muted ivory / dividers block */ --pb-stone: #F0ECE4; /* image placeholder / inset fill */ --pb-white: #FFFFFF; /* ── Plantation greens ───────────────────────────────────── */ --pb-forest: #1A3628; /* deepest — full-bleed room panels */ --pb-deep: #1E3C38; /* package titles / deep headings */ --pb-teal-deep: #1E4A40; /* "Seniors, Golf & Solo" group */ --pb-teal: #3D6B64; /* section headings / links */ --pb-sage: #4A7060; /* quiet UI labels */ --pb-sage-mid: #4A8A7E; /* group mid-tone accents */ /* ── Aged brass / gold (metallic accent) ─────────────────── */ --pb-brass: #B8882E; /* rooms gold — rules, prices, eyebrows */ --pb-gold: #B8965A; /* packages gold — bullets, hairlines */ --pb-gold-light: #D4B07A; /* light brass — hover borders */ /* ── Burgundy / crimson (calls-to-action) ────────────────── */ --pb-crimson: #C0392B; /* primary Book button */ --pb-crimson-dark: #96281B; /* Book button hover */ --pb-burgundy: #5C2430; /* "All-Inclusive Wellness" group */ /* ── Slate (cool accent · group 3) ───────────────────────── */ --pb-slate: #2A3D5C; /* "Graceful Aging & Spa" group */ /* ── Ink & text ──────────────────────────────────────────── */ --pb-ink: #2A2016; /* darkest warm text */ --pb-text: #2A2420; /* body copy */ --pb-muted: #6B6259; /* secondary copy */ --pb-muted-warm: #6B5B47; /* captions on ivory */ --pb-on-dark: #FFFEF9; /* text on forest panels */ --pb-on-dark-soft: rgba(255, 254, 249, 0.72); /* body on forest */ /* ── Hairlines & borders ─────────────────────────────────── */ --pb-border-gold: rgba(184, 150, 90, 0.18); --pb-border-gold-strong: rgba(184, 136, 46, 0.35); --pb-border-hairline: rgba(184, 136, 46, 0.15); --pb-border-crimson: rgba(192, 57, 43, 0.18); /* ── Rate-row tints ──────────────────────────────────────── */ --pb-rate-nonpeak: #FCF8EF; /* non-peak row */ --pb-rate-peak: #F1F7FB; /* peak-period row (cool tint) */ /* ── Collection accents (package groups) ─────────────────── */ --pb-group-1: #1E4A40; /* Seniors, Golf & Solo */ --pb-group-1-light: #E8F2F0; --pb-group-2: #5C2430; /* All-Inclusive Wellness */ --pb-group-2-light: #F5EAEC; --pb-group-3: #2A3D5C; /* Graceful Aging & Spa */ --pb-group-3-light: #EAECF4; --pb-group-1-tint: #F4FAF9; /* group 1 section ground */ --pb-group-2-tint: #FDF5F6; /* group 2 section ground */ --pb-group-3-tint: #F4F6FB; /* group 3 section ground */ --pb-group-2-mid: #A05060; /* group 2 rule/dot mid-tone */ --pb-group-3-mid: #5A708A; /* group 3 rule/dot mid-tone */ /* ============================================================ EXISTING SITE CHROME (header / footer) — preserve as-is A cooler, brighter legacy palette kept for the persistent navigation so redesigned pages drop in without reskinning the chrome. ============================================================ */ --pb-brand-green: #42971F; /* green brush-script tagline */ --pb-nav-bg: #1E2D3D; /* main nav bar (slate) */ --pb-nav-selected: #679966; /* selected nav item */ --pb-nav-hover: #8ACD89; /* nav hover */ --pb-gold-solid: #F2BB2C; /* header gold top-border / mega rule */ --pb-cta-red: #C82020; /* header "I'm Ready to Book!" */ --pb-footer-menu: #1D2C26; /* footer nav strip */ --pb-subnav: #6E9C6B; /* footer / mobile sub-nav */ --pb-subnav-hover: #0B7B6C; /* sub-nav hover */ --pb-copyright: #004D4D; /* copyright bar */ --pb-legacy-teal: #008080; /* legacy teal (jQuery Mobile) */ /* ── Semantic aliases ────────────────────────────────────── */ --pb-surface-page: var(--pb-ivory); --pb-surface-alt: var(--pb-cream); --pb-surface-card: var(--pb-cream-card); --pb-surface-dark: var(--pb-forest); --pb-text-heading: var(--pb-deep); --pb-text-body: var(--pb-text); --pb-text-secondary: var(--pb-muted); --pb-accent: var(--pb-brass); --pb-accent-rule: var(--pb-gold); --pb-cta: var(--pb-crimson); --pb-cta-hover: var(--pb-crimson-dark); --pb-link: var(--pb-teal); } /* ============================================================ Plantation Bay — Typography System ONE sans-serif family across every role. Hierarchy comes from weight, size, letter-spacing and colour — never from a second typeface. Stack: Segoe UI · Roboto · Helvetica · Arial. ============================================================ */ :root { /* ── Family (single sans voice — all roles map to it) ────── */ --pb-font-sans: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --pb-font-display: var(--pb-font-sans); --pb-font-body: var(--pb-font-sans); --pb-font-script: var(--pb-font-sans); --pb-font-chrome: var(--pb-font-sans); /* ── Fluid type scale (role-based) ───────────────────────── */ --pb-text-hero: clamp(2rem, 5vw, 3.8rem); /* page hero title */ --pb-text-h1: clamp(1.6rem, 5vw, 2.5rem); /* section main title */ --pb-text-h2: clamp(1.35rem, 3.5vw, 2.2rem); /* room / group name */ --pb-text-h3: clamp(1.3rem, 3vw, 1.8rem); /* package title */ --pb-text-lead: clamp(1.15rem, 2vw, 1.4rem); /* italic subtitle */ --pb-text-body: clamp(0.9375rem, 1.5vw, 1.0625rem); --pb-text-price: 1.6rem; /* rate figure */ --pb-text-eyebrow: 0.68rem; /* gold micro-labels */ --pb-text-nav: 14px; /* main-nav links */ --pb-text-fine: 0.8rem; /* fine print */ /* ── Weights ─────────────────────────────────────────────── */ --pb-weight-light: 300; --pb-weight-regular: 400; --pb-weight-medium: 500; --pb-weight-semibold: 600; --pb-weight-bold: 700; /* ── Letter-spacing ──────────────────────────────────────── */ --pb-ls-display: 0.14em; /* airy uppercase hero */ --pb-ls-heading: 0.09em; /* group / section titles */ --pb-ls-eyebrow: 0.22em; /* gold micro-labels */ --pb-ls-nav: 0.05em; --pb-ls-body: 0.01em; /* ── Line-height ─────────────────────────────────────────── */ --pb-lh-tight: 1.2; /* @kind other */ --pb-lh-snug: 1.4; /* @kind other */ --pb-lh-normal: 1.7; /* @kind other */ --pb-lh-relaxed: 1.9; /* @kind other */ /* ── Measure (max line length) ───────────────────────────── */ --pb-measure: 68ch; --pb-measure-wide: 70ch; } /* ============================================================ Plantation Bay — Spacing System 8px base unit (from the site's global.css) extended with the larger section rhythms used by the redesigned landing pages. ============================================================ */ :root { /* ── Base scale (8px unit) ───────────────────────────────── */ --pb-space-xs: 4px; --pb-space-sm: 8px; --pb-space-md: 12px; --pb-space-base: 16px; --pb-space-lg: 20px; --pb-space-xl: 24px; --pb-space-2xl: 32px; --pb-space-3xl: 40px; --pb-space-4xl: 48px; --pb-space-5xl: 64px; /* card-to-card gap */ --pb-space-6xl: 80px; /* package group gap */ /* ── Layout rails ────────────────────────────────────────── */ --pb-container: 1200px; /* header / footer chrome width */ --pb-container-rooms: 1320px; /* rooms content rail */ --pb-container-pkg: 100%; /* packages content rail (full width since 2026-07-23) */ --pb-container-faq: 960px; /* FAQ rail (rooms page keeps the old pkg width) */ --pb-measure-col: 44ch; /* single readable column */ /* ── Gutters ─────────────────────────────────────────────── */ --pb-gutter-mobile: 16px; --pb-gutter-desktop: 24px; --pb-pad-card: 36px 40px; /* package card body padding */ --pb-pad-panel: 2.5rem; /* room detail panel padding */ /* ── Fixed chrome offsets ────────────────────────────────── */ --pb-header-h: 108px; /* brandbar height (desktop) */ --pb-header-total: 148px; /* full fixed chrome height: brandbar + nav bar */ --pb-scroll-offset: 115px; /* anchor scroll clearance (desktop) */ --pb-scroll-offset-m: 170px; /* anchor scroll clearance (mobile) */ /* ── Hit target ──────────────────────────────────────────── */ --pb-tap-min: 44px; /* ── Decorative placeholder ─────────────────────────────── */ --pb-placeholder-h: 180px; /* imageless card media block */ --pb-stripe: 10px; /* placeholder stripe width */ } /* ============================================================ Plantation Bay — Effects System Radii, shadows, borders, motion. The redesign favours small radii (2–4px), soft warm-grey card shadows, thin brass hairlines, and gentle 0.25–0.7s eases. No heavy glows. ============================================================ */ :root { /* ── Corner radii (restrained) ───────────────────────────── */ --pb-radius-sm: 2px; /* buttons, tags */ --pb-radius: 4px; /* cards */ --pb-radius-lg: 10px; /* language dropdown (chrome) */ --pb-radius-pill: 999px; /* ── Shadows ─────────────────────────────────────────────── */ --pb-shadow-card: 0 2px 24px rgba(30, 30, 20, 0.07), 0 1px 4px rgba(30, 30, 20, 0.04); --pb-shadow-hover: 0 8px 40px rgba(30, 30, 20, 0.12), 0 2px 8px rgba(30, 30, 20, 0.06); --pb-shadow-image: 0 4px 16px rgba(28, 54, 40, 0.12); /* floor-plan thumb */ --pb-shadow-cta: 0 4px 24px rgba(192, 57, 43, 0.30); --pb-shadow-cta-hv: 0 8px 32px rgba(150, 40, 27, 0.45); --pb-shadow-chrome: 0 2px 18px rgba(0, 0, 0, 0.35); /* fixed header */ /* ── Border widths ───────────────────────────────────────── */ --pb-hairline: 1px; --pb-rule: 2px; /* accent underlines, gold top-rule */ --pb-focus-offset: 2px; /* focus-ring offset from the element edge */ --pb-accent-bar: 3px; /* package-card top accent bar */ /* ── Decorative rules ────────────────────────────────────── */ --pb-rule-len-sm: 36px; /* under a heading */ --pb-rule-len-md: 52px; /* under hero title */ --pb-rule-len-lg: 120px; /* between package groups */ /* ── Motion ──────────────────────────────────────────────── */ --pb-ease: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */ --pb-dur-fast: 0.2s; /* @kind other */ --pb-dur: 0.25s; /* @kind other */ --pb-dur-slow: 0.35s; /* @kind other */ --pb-dur-reveal: 0.7s; /* @kind other */ /* scroll-reveal fade-up */ --pb-reveal-shift: 28px; /* scroll-reveal translate distance */ } /* ===== GLOBAL BASE — one sans voice across the whole site ===== */ body, button, input, select, textarea, .ui-body, .ui-content, [data-role="page"] { font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; } /* ===== ROOMS + PACKAGES (theme layer) ===== */ /* ============================================================================ PLANTATION BAY — DESIGN SYSTEM THEME LAYER (plantation-ds.css) ---------------------------------------------------------------------------- A TOGGLE-ONLY override sheet. Load it LAST (after every existing stylesheet AND after the page's inline