/* ============================================================ Samana — Design Tokens Every color, font, size and spacing value the theme uses lives here. Component CSS only references these variables — so a palette/type change is a one-file edit. ============================================================ */ :root { /* ---------------------------------------------------------- PALETTE — sampled from the design PDF ( design/Edens-Semana.pdf). Raw values only here; the rest of the CSS uses the semantic aliases below. ---------------------------------------------------------- */ --color-white: #FFFFFF; --color-black: #000000; --color-ocean: #006993; /* section headings, secondary buttons, active tab */ --color-turquoise: #24957F; /* primary CTA — "Book a Stay", form submit */ --color-petrol: #003F58; /* booking bands, solid header, mobile menu */ --color-deep-teal: #063B46; /* "Villa Highlights" section bg */ --color-sand: #F4EDE3; /* "Staff & Services" / contact form section bg */ --color-cream: #FBF9F6; /* amenities box, "Follow" section bg */ --color-beige: #E9E2D6; /* borders/dividers on sand backgrounds */ --color-gold: #C2A277; /* list bullets, small accents */ --color-ink: #14100D; /* headings on light backgrounds */ --color-text: #4A4239; /* body copy — warm gray-brown */ --color-gray-200: #E4E2DF; /* card/input borders, dividers on white */ --color-gray-400: #9B9A98; /* footer text, muted labels */ --color-black-a07: rgba(0, 0, 0, 0.07); --color-white-a12: rgba(255, 255, 255, 0.12); --color-white-a85: rgba(255, 255, 255, 0.85); /* ---------------------------------------------------------- SEMANTIC ALIASES ---------------------------------------------------------- */ --color-primary: var(--color-ocean); --color-accent: var(--color-gold); --color-background: var(--color-white); --color-heading: var(--color-ink); --color-heading-accent: var(--color-ocean); --color-heading-inverse: var(--color-white); --color-text-muted: var(--color-gray-400); --color-border: var(--color-gray-200); --color-border-warm: var(--color-beige); --color-focus: var(--color-ocean); --color-cta: var(--color-turquoise); /* primary button */ --color-cta-text: var(--color-white); --color-cta-alt: var(--color-ocean); /* secondary button */ --color-cta-alt-text: var(--color-white); /* Header — transparent over a hero/banner, solid petrol once scrolled (or always, on pages without one). White text in both states. */ --color-header-bg: var(--color-petrol); --color-header-text: var(--color-white); --color-nav-link: var(--color-white); --color-nav-link-hover: var(--color-white); --color-dropdown-bg: var(--color-white); --color-dropdown-hover: var(--color-cream); --color-mobile-menu-bg: var(--color-petrol); --color-mobile-submenu-bg: var(--color-deep-teal); --color-mobile-menu-text: var(--color-white); --color-mobile-divider: var(--color-white-a12); --color-footer-bg: var(--color-black); --color-footer-text: var(--color-gray-400); --color-footer-heading: var(--color-white); --color-footer-link-hover: var(--color-white); --color-footer-divider: #222221; /* ---------------------------------------------------------- FONTS — Google Fonts (URL in samana_google_fonts_url(), functions.php): - Syncopate — headings. Wide, caps-only display face; only ships 400/700, so headings use --fw-heading (400), never a 600 that would make the browser fake a bold. - Jost — body, nav, buttons, labels (variable 400–700). ---------------------------------------------------------- */ --font-heading: "Syncopate", Arial, "Helvetica Neue", sans-serif; /* plain Arial, not Arial Black — closest weight to Syncopate 400 while the web font swaps in */ --font-body: "Jost", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --fw-heading: 400; --fw-medium: 500; --fw-regular: 400; --fw-semibold: 600; --fw-bold: 700; /* ---------------------------------------------------------- FLUID TYPE SCALE — same sizes as Pure Massage. clamp(min, rem + vw, max): grows smoothly between ~360px and ~1200px viewports with no breakpoints. The rem part keeps browser zoom / user font-size settings working (WCAG 1.4.4). ---------------------------------------------------------- */ --fs-xs: 0.8125rem; /* 13px — copyright, fine print */ --fs-sm: 0.875rem; /* 14px — eyebrows, labels */ --fs-nav: 0.9375rem; /* 15px — nav, buttons */ --fs-body: 1rem; /* 16px — body copy */ --fs-lead: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem); /* 16 → 17px — section descriptions */ --fs-h4: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem); /* 18 → 20px */ --fs-h3: clamp(1.375rem, 1.15rem + 1vw, 1.75rem); /* 22 → 28px — card titles */ --fs-h2: clamp(1.625rem, 1.15rem + 2vw, 2.5rem); /* 26 → 40px — section headings */ --fs-h1: var(--fs-h2); /* inner-page H1 uses the section heading style */ --fs-display: clamp(2.25rem, 1.5rem + 3.5vw, 4rem); /* 36 → 64px — hero headline */ --lh-tight: 1.15; --lh-heading: 1.2; --lh-body: 1.7; --ls-caps: 0.05em; /* letter-spacing for uppercase labels */ --ls-button: 0.1em; /* ---------------------------------------------------------- LAYOUT — same frame as Pure Massage: 1280px max container, 24px side gutter (20px on phones). ---------------------------------------------------------- */ --container-max: 1280px; --container-narrow: 922px; /* .section-header, centered intros */ --container-prose: 720px; /* .entry-content reading width */ --container-pad: 1.25rem; --header-height: clamp(70px, 7vw, 90px); /* Vertical section rhythm — 40px mobile, 60px from 1024px. */ --section-space: 40px; /* Spacing scale */ --space-2xs: 0.25rem; --space-xs: 0.5rem; --space-sm: 0.75rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 2.5rem; --space-3xl: 3rem; /* Radius / shadow / motion */ --radius-sm: 8px; --radius-md: 16px; --radius-lg: 25px; --radius-pill: 50px; --radius-button: 2px; /* near-square buttons, per the design */ --shadow-header: 0 4px 16px rgba(0, 0, 0, 0.18); --shadow-dropdown: 0 12px 28px var(--color-black-a07); --transition: 0.2s ease; /* Stacking */ --z-header: 100; --z-mobile-menu: 150; --z-skip-link: 1000; } @media (min-width: 769px) { :root { --container-pad: 1.5rem; } } @media (min-width: 1024px) { :root { --section-space: 60px; } }