/** * WTS Travel & Tours — Design Tokens * Luxury & Premium Theme Pack * ───────────────────────────────────── * Drop this file into your WordPress theme's /css/ folder * and enqueue it before all other stylesheets. */ :root { /* ─── Colour Palette ──────────────────────────────── */ /* Core Neutrals */ --color-navy-deepest: #0B1220; /* page background, hero bg */ --color-navy-deep: #101C32; /* section alt bg */ --color-navy-mid: #1A2B4A; /* card bg, input bg */ --color-navy-surface: #223358; /* borders, dividers */ --color-navy-subtle: #2E4270; /* hover states, subtle outlines */ /* Gold Spectrum */ --color-gold-bright: #F4C542; /* primary CTA, active states */ --color-gold-warm: #D4A82A; /* hover on gold, secondary accents */ --color-gold-muted: #A07C20; /* disabled states, tertiary text */ --color-gold-pale: #F9E8A0; /* highlight, selection bg */ /* Cyan Accent (signature touch) */ --color-cyan-vivid: #3DD6F5; /* links, tags, badges, icon highlights */ --color-cyan-soft: #1FB8D4; /* hover on cyan elements */ --color-cyan-ghost: rgba(61,214,245,0.12); /* glow behind hero elements */ /* Text */ --color-text-primary: #F0EDE6; /* main body text */ --color-text-secondary: #A8B2C4; /* captions, metadata, helper text */ --color-text-muted: #5E6E88; /* placeholders, disabled */ --color-text-inverse: #0B1220; /* text on gold/light backgrounds */ /* Semantic */ --color-success: #2ECC8C; --color-warning: #F4C542; /* reuse gold — fits brand */ --color-error: #E05A5A; --color-info: #3DD6F5; /* reuse cyan */ /* ─── Typography ──────────────────────────────────── */ /* Import from Google Fonts — add to functions.php or : https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400&family=DM+Sans:wght@300;400;500;600&family=DM+Mono:wght@400&display=swap */ --font-display: 'Cormorant Garamond', 'Georgia', serif; /* Luxury display — used at large sizes only (h1, hero) */ --font-body: 'DM Sans', 'Helvetica Neue', sans-serif; /* All body copy, UI labels, navigation */ --font-mono: 'DM Mono', 'Courier New', monospace; /* Price figures, booking codes, dates */ /* Type Scale (fluid clamp) */ --text-xs: clamp(0.70rem, 0.65rem + 0.25vw, 0.75rem); --text-sm: clamp(0.85rem, 0.80rem + 0.25vw, 0.875rem); --text-base: clamp(0.95rem, 0.90rem + 0.25vw, 1.00rem); --text-md: clamp(1.05rem, 1.00rem + 0.25vw, 1.125rem); --text-lg: clamp(1.15rem, 1.10rem + 0.5vw, 1.25rem); --text-xl: clamp(1.35rem, 1.20rem + 0.75vw, 1.5rem); --text-2xl: clamp(1.65rem, 1.40rem + 1.25vw, 2.00rem); --text-3xl: clamp(2.00rem, 1.60rem + 2.00vw, 2.75rem); --text-4xl: clamp(2.50rem, 1.80rem + 3.50vw, 4.00rem); --text-hero: clamp(3.00rem, 2.00rem + 5.00vw, 6.00rem); /* Font Weights */ --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; /* Line Heights */ --leading-tight: 1.15; --leading-snug: 1.35; --leading-normal: 1.6; --leading-relaxed: 1.75; /* Letter Spacing */ --tracking-tight: -0.025em; --tracking-normal: 0em; --tracking-wide: 0.05em; --tracking-widest: 0.15em; /* eyebrows, ALL CAPS labels */ /* ─── Spacing Scale ───────────────────────────────── */ --space-1: 0.25rem; --space-2: 0.50rem; --space-3: 0.75rem; --space-4: 1.00rem; --space-5: 1.25rem; --space-6: 1.50rem; --space-8: 2.00rem; --space-10: 2.50rem; --space-12: 3.00rem; --space-16: 4.00rem; --space-20: 5.00rem; --space-24: 6.00rem; --space-32: 8.00rem; /* Section vertical rhythm */ --section-pad-y: clamp(4rem, 8vw, 8rem); --section-pad-x: clamp(1.25rem, 5vw, 5rem); /* ─── Border Radius ───────────────────────────────── */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 20px; --radius-pill: 999px; --radius-card: 10px; /* ─── Shadows & Glows ─────────────────────────────── */ --shadow-card: 0 2px 16px rgba(0,0,0,0.45); --shadow-card-hover:0 8px 40px rgba(0,0,0,0.65), 0 0 0 1px var(--color-navy-subtle); --shadow-gold-glow: 0 0 24px rgba(244,197,66,0.25); --shadow-cyan-glow: 0 0 24px rgba(61,214,245,0.20); --shadow-input: inset 0 1px 3px rgba(0,0,0,0.4); /* ─── Transitions ─────────────────────────────────── */ --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --duration-fast: 150ms; --duration-base: 250ms; --duration-slow: 450ms; --transition-base: var(--duration-base) var(--ease-out-quint); --transition-slow: var(--duration-slow) var(--ease-out-quint); /* ─── Z-Index Stack ───────────────────────────────── */ --z-below: -1; --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-dropdown: 200; --z-modal: 500; --z-toast: 900; /* ─── Layout Widths ───────────────────────────────── */ --container-xs: 480px; --container-sm: 640px; --container-md: 768px; --container-lg: 1024px; --container-xl: 1200px; --container-2xl: 1440px; --container-pad: clamp(1rem, 4vw, 2.5rem); /* ─── Signature Element: Gold Rule ───────────────── */ /* A thin animated gold underline that draws across section headings on scroll. Apply .wts-gold-rule to any

. */ --gold-rule-height: 2px; --gold-rule-color: var(--color-gold-bright); } /* ─── Base Reset ────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { background-color: var(--color-navy-deepest); color: var(--color-text-primary); font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--weight-regular); line-height: var(--leading-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ─── Headings ──────────────────────────────────────── */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: var(--weight-semibold); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--color-text-primary); } h1 { font-size: var(--text-hero); } h2 { font-size: var(--text-4xl); } h3 { font-size: var(--text-3xl); } h4 { font-size: var(--text-2xl); } h5 { font-size: var(--text-xl); } h6 { font-size: var(--text-lg); font-family: var(--font-body); font-weight: var(--weight-semibold); } /* ─── Eyebrow Labels ────────────────────────────────── */ .wts-eyebrow { display: inline-block; font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-cyan-vivid); } /* ─── Gold Rule Signature Heading ───────────────────── */ .wts-gold-rule { position: relative; display: inline-block; padding-bottom: var(--space-3); } .wts-gold-rule::after { content: ''; position: absolute; bottom: 0; left: 0; height: var(--gold-rule-height); width: 0; background: var(--color-gold-bright); transition: width 0.7s var(--ease-out-quint); } .wts-gold-rule.is-visible::after { width: 60px; } /* ─── Links ─────────────────────────────────────────── */ a { color: var(--color-cyan-vivid); text-decoration: none; transition: color var(--transition-base); } a:hover { color: var(--color-cyan-soft); } a:focus-visible { outline: 2px solid var(--color-gold-bright); outline-offset: 3px; border-radius: var(--radius-sm); } /* ─── Container ─────────────────────────────────────── */ .wts-container { width: 100%; max-width: var(--container-xl); margin-inline: auto; padding-inline: var(--container-pad); } .wts-container--wide { max-width: var(--container-2xl); } .wts-container--narrow{ max-width: var(--container-md); } /* ─── Reduced Motion ────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }