/** * Brother Tours — locked design tokens, light and dark. * * The color values are brand-locked (Master Build Prompt, "Color tokens * (locked)" and "Typography (locked)") for DARK mode, which remains the * site's default and primary identity — every reference screenshot, hero * treatment and piece of photography in this build assumes the dark ground. * LIGHT mode is a genuine second palette built from the same brand hues * (the locked green and gold) rather than a generic theme swap, so the site * still reads as Brother Tours on paper-white as much as on dark ground. * Every text/background pairing below was checked against WCAG AA (4.5:1 * for body text, 3:1 for large text and UI-component boundaries) — see * docs/light-dark-mode.md for the worked contrast table. * * Do not introduce colors or font families outside this file. * * Why this lives in the child theme: the WPistic parent is a reusable * presentation base shipped to more than one site, and its own palette is a * different warm-editorial scheme. Overriding here keeps the parent * reusable and keeps every Brother Tours-specific value in one auditable * place. * * Mode switching: the parent theme (themes/wpistic/header.php, * inc/template-tags.php, assets/js/navigation.js) already implements the * mechanism this file styles — a no-flash inline script sets * `data-theme="light|dark"` on before first paint from, in order, * the visitor's saved localStorage choice, then `prefers-color-scheme`, * then the site's configured default; a keyboard-operable toggle button * (`wpistic_theme_toggle()`) persists the visitor's choice. Brother Tours * only supplies the values each mode renders and sets its own default (dark) * — see the `theme_mod_wpistic_default_mode` filter in functions.php. * * Loaded after the parent's tokens.css, so these declarations win on * specificity ties by cascade order alone -- no !important needed. */ /* =========================================================================== * Mode-independent tokens — typography, layout, motion, and the "always * dark" decorative surfaces (hero/footer bands that stay dark-grounded * regardless of the page's overall mode, matching the parent theme's * original --surface-dark/--on-dark* design intent). * ========================================================================= */ :root { /* ---- Locked typography --------------------------------------------- */ --serif-display: "Playfair Display", "Times New Roman", Times, serif; --serif-body: "Crimson Pro", Georgia, "Times New Roman", serif; --mono: "DM Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace; --hand: "Caveat", "Brush Script MT", cursive; /* Parent aliases. */ --serif: var(--serif-display); --body: var(--serif-body); --script: var(--hand); --coord: var(--mono); --font-display:var(--serif-display); --font-body: var(--serif-body); --font-mono: var(--mono); --font-script: var(--hand); /* ---- Layout ---------------------------------------------------------- */ --container: 1280px; --container-narrow: 880px; --form-width: 720px; --max: 1280px; --wrap: 1280px; /* Square corners throughout. The reference design uses no rounding. */ --radius: 0px; --body-base: 18px; --section-pad: 160px; --ease: cubic-bezier(.22, .61, .36, 1); /* ---- Always-dark decorative surfaces (both modes) -------------------- * Hero bands, the footer, and full-bleed photography overlays stay on a * dark ground even when the rest of the page is in light mode -- this is * a deliberate editorial device, not a mode leak. */ --surface-dark: #0E100D; --surface-dark-2: #161812; --on-dark: #EDE6D3; --on-dark-soft: #B8B09D; --on-dark-muted: #7A7566; --on-green: #FFFFFF; --rule-on-dark: rgba(237, 230, 211, 0.12); --rule-on-dark-strong: rgba(237, 230, 211, 0.22); /* Green is mode-independent: it already reads correctly on both a light * and a dark ground and never changes between them. */ --green: #1B5E3B; --green-bright: #2A7A50; } /* =========================================================================== * DARK MODE (default) — the locked Brother Tours palette, unchanged from * the original single-palette build. * ========================================================================= */ :root, [data-theme="dark"] { --bg: #0E100D; /* page background */ --bg-raise: #161812; /* card / alternate section background */ --bg-card: #161812; /* elevated card surface */ --ink: #EDE6D3; /* primary text */ --ink-soft: #B8B09D; /* secondary text */ --ink-muted: #7A7566; /* tertiary / metadata */ --gold: #C9A96E; /* italic accent device, text, borders, actions */ --gold-fill: #C9A96E; /* solid button / filled-chip background */ --rule: rgba(237, 230, 211, 0.12); /* hairline borders */ --rule-s: rgba(237, 230, 211, 0.08); --rule-strong: rgba(237, 230, 211, 0.22); /* input underlines */ /* Parent-theme aliases -- the parent's components.css and pages.css are * written against these names. Remapping them is what makes the whole * inherited component set adopt the locked palette without forking a * single parent template. */ --c-navy: #0E100D; --c-navy-2: #161812; --c-green: #1B5E3B; --c-gold: #C9A96E; --c-sand: #161812; --c-white: #EDE6D3; --c-char: #0E100D; --bg-sand: #161812; --on-gold: #0E100D; --gold-soft: #D8BE8B; --gold-deep: #A8874C; --gold-ink: #C9A96E; --gold-accent: #C9A96E; --clay: #C9A96E; --status-success: #4FAE7C; --status-warning: #D9A441; --status-danger: #E08469; --shadow-card: 0 1px 2px rgba(0, 0, 0, .25), 0 12px 32px -16px rgba(0, 0, 0, .5); --shadow-float: 0 24px 60px -24px rgba(0, 0, 0, .65); --color-shadow: rgba(0, 0, 0, .5); --color-overlay: rgba(14, 16, 13, 0.72); /* Photography sits on dark ground; the parent's paper grain is wrong here. */ --grain-opacity: 0; color-scheme: dark; } /* =========================================================================== * LIGHT MODE — a genuine second palette in the same brand hues, not a * generic theme swap. Every pairing below is WCAG AA-checked; see * docs/light-dark-mode.md for the contrast table these values come from. * A single gold cannot serve as both small text (needs 4.5:1 on paper) and * a legible button fill (needs the ink text on top to hit 4.5:1) at once, * so light mode splits the role: --gold is the text/border tone, --gold-fill * is the button-background tone. Dark mode does not need this split -- one * value already served both roles there -- so --gold-fill equals --gold * above and no component CSS had to change to consume the new token. * ========================================================================= */ [data-theme="light"] { --bg: #FAF6EC; /* warm paper, not stark white */ --bg-raise: #F1E7D2; /* warm sand card / section band */ --bg-card: #FFFDF8; /* elevated card, lighter than the raised band */ --ink: #1E2117; /* near-black warm charcoal — primary text */ --ink-soft: #4A4839; /* secondary text */ --ink-muted: #6B6656; /* tertiary / metadata — 4.5:1+ on bg AND bg-raise */ --gold: #835D1E; /* deepened for 4.5:1+ text/border legibility on paper */ --gold-fill: #C9A050; /* lighter — legible as a button fill with dark ink text */ --rule: rgba(30, 33, 23, 0.14); --rule-s: rgba(30, 33, 23, 0.09); --rule-strong: rgba(30, 33, 23, 0.28); --c-navy: #1E2117; --c-navy-2: #F1E7D2; --c-green: #1B5E3B; --c-gold: #835D1E; --c-sand: #F1E7D2; --c-white: #FAF6EC; --c-char: #1E2117; --bg-sand: #F1E7D2; --on-gold: #1E2117; /* ink text on the --gold-fill button background */ --gold-soft: #DDBD7E; --gold-deep: #6E4E1A; --gold-ink: #835D1E; --gold-accent: #835D1E; --clay: #835D1E; --status-success: #2E7D4F; --status-warning: #87600F; --status-danger: #B84A34; --shadow-card: 0 1px 2px rgba(30, 33, 23, .06), 0 12px 32px -16px rgba(30, 33, 23, .16); --shadow-float: 0 24px 60px -24px rgba(30, 33, 23, .28); --color-shadow: rgba(30, 33, 23, .18); --color-overlay: rgba(250, 246, 236, 0.82); /* A faint paper grain suits the light mode's editorial-print feel. */ --grain-opacity: 0.12; color-scheme: light; } /* =========================================================================== * Generic semantic aliases (design-system-agnostic names), synced to the * mode-dependent tokens above so they resolve correctly in both modes with * no separate light/dark block of their own. Elementor global colors, * dashboard UI, and any new component should prefer these names; existing * templates keep using the brand-specific names above unchanged. * ========================================================================= */ :root { --color-background: var(--bg); --color-surface: var(--bg-raise); --color-surface-elevated: var(--bg-card); --color-text: var(--ink); --color-text-muted: var(--ink-muted); --color-border: var(--rule); --color-primary: var(--gold); --color-primary-fill: var(--gold-fill); --color-primary-hover: var(--gold-deep); --color-accent: var(--green); --color-success: var(--status-success); --color-warning: var(--status-warning); --color-danger: var(--status-danger); --color-focus: var(--gold); } /* --------------------------------------------------------------------------- * Base typography * ------------------------------------------------------------------------ */ body { background: var(--bg); color: var(--ink-soft); font-family: var(--serif-body); font-size: var(--body-base); line-height: 1.65; font-weight: 400; -webkit-font-smoothing: antialiased; transition: background-color 0.2s var(--ease, ease), color 0.2s var(--ease, ease); } @media (prefers-reduced-motion: reduce) { body { transition: none; } } h1, h2, h3, h4, h5, h6 { font-family: var(--serif-display); font-weight: 500; line-height: 1.08; letter-spacing: -0.015em; color: var(--ink); } /* --------------------------------------------------------------------------- * The italic-gold accent device. * * Signature of the brand: exactly one word (or short phrase) per headline set * in gold italic, carrying the headline's meaning. Marked up as inside the * heading. In body copy stays ink-colored so the device reads as a * headline gesture rather than general emphasis. * ------------------------------------------------------------------------ */ h1 em, h2 em, h3 em, h4 em, .section-title em, .hero-title em { font-family: var(--serif-display); font-style: italic; font-weight: 400; color: var(--gold); } p em, li em, blockquote em { font-family: var(--serif-display); font-style: italic; color: inherit; } /* --------------------------------------------------------------------------- * Eyebrow / label * ------------------------------------------------------------------------ */ .eyebrow, .wpistic-eyebrow, .section-eyebrow { display: block; font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold); } /* --------------------------------------------------------------------------- * Actions * * Two treatments only: a solid gold action for the primary conversion path, * and a ghost-gold action everywhere else. Square, mono, wide-tracked. * * The ghost state (border + text) uses --gold, the text/border-safe tone. * The solid-fill state (background) uses --gold-fill, the fill-safe tone -- * in dark mode the two are identical, so this reads as a single design in * either mode; only light mode actually has two different values here. * ------------------------------------------------------------------------ */ .btn, .button, .wp-block-button__link, .wpistic-btn { display: inline-flex; align-items: center; gap: 14px; padding: 18px 36px; border-radius: 0; border: 1px solid var(--gold); background: transparent; color: var(--gold); font-family: var(--mono); font-size: 12px; font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; text-decoration: none; transition: background-color 0.3s var(--ease, ease), color 0.3s var(--ease, ease), border-color 0.3s var(--ease, ease); } .btn:hover, .btn:focus-visible, .button:hover, .wp-block-button__link:hover, .wpistic-btn:hover { border-color: var(--gold-fill); background: var(--gold-fill); color: var(--on-gold); } .btn--primary, .btn-primary, .wpistic-btn--primary { border-color: var(--gold-fill); background: var(--gold-fill); color: var(--on-gold); } .btn--primary:hover, .btn--primary:focus-visible, .btn-primary:hover, .wpistic-btn--primary:hover { background: transparent; border-color: var(--gold); color: var(--gold); } /* --------------------------------------------------------------------------- * Accessibility * * A visible, high-contrast focus ring in either mode. * ------------------------------------------------------------------------ */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } /* Respect a reduced-motion preference: the reference design's reveal * animations are decorative and must not gate access to content. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .reveal { opacity: 1 !important; transform: none !important; } } /* --------------------------------------------------------------------------- * Forms — Formistic frontend * * The reference uses underline-only fields, gold on focus. Field text and * placeholder colors already come from --ink/--ink-muted, so they follow the * mode automatically; only the accent needs the text-safe --gold, not the * fill-safe --gold-fill, since it colors an underline, not a filled area. * ------------------------------------------------------------------------ */ .wpistic-formistic-form-wrap { --wpf-accent: var(--gold); --wpf-btn-text: var(--on-gold); --wpf-radius: 0px; max-width: var(--form-width); color: var(--ink-soft); } /* Upstream form.css ships a boxed white-card skin (its own generic default, * not brand-specific). Brother Tours renders the form directly on the page * ground instead, so the card chrome is retoned to the mode's own surface * rather than staying hardcoded white in either mode. */ .wpistic-formistic-form { background: var(--bg-raise); border: 1px solid var(--rule); border-radius: var(--radius); color: var(--ink-soft); } .wpistic-formistic-form-title { color: var(--ink); font-family: var(--serif-display); font-weight: 500; } .wpistic-formistic-field--file input[type="file"] { border-color: var(--rule-strong); background: var(--bg-raise); color: var(--ink-soft); } .wpistic-formistic-field__help { color: var(--ink-muted); } .wpistic-formistic-form .wpistic-formistic-field > span, .wpistic-formistic-form legend { display: block; margin-bottom: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-muted); } .wpistic-formistic-form input[type="text"], .wpistic-formistic-form input[type="email"], .wpistic-formistic-form input[type="tel"], .wpistic-formistic-form input[type="url"], .wpistic-formistic-form input[type="date"], .wpistic-formistic-form select, .wpistic-formistic-form textarea { width: 100%; padding: 10px 0; border: 0; border-bottom: 1px solid var(--rule-strong); border-radius: 0; background: transparent; color: var(--ink); font-family: var(--serif-body); font-size: 17px; } .wpistic-formistic-form input:focus, .wpistic-formistic-form select:focus, .wpistic-formistic-form textarea:focus { border-bottom-color: var(--gold); outline: none; } .wpistic-formistic-form input::placeholder, .wpistic-formistic-form textarea::placeholder { color: var(--ink-muted); font-style: italic; } .wpistic-formistic-form input[type="checkbox"], .wpistic-formistic-form input[type="radio"] { accent-color: var(--gold); width: 16px; height: 16px; } .wpistic-formistic-form-submit { margin-top: 8px; padding: 18px 36px; border: 1px solid var(--gold-fill); border-radius: 0; background: var(--gold-fill); color: var(--on-gold); font-family: var(--mono); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; cursor: pointer; transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; } .wpistic-formistic-form-submit:hover { background: transparent; border-color: var(--gold); color: var(--gold); } /* Error and success states must not rely on color alone -- both carry a * left rule plus distinct text, and the notice text itself states the * outcome in words. */ .wpistic-formistic-form-notice { padding: 14px 18px; border-left: 3px solid var(--color-success); background: var(--bg-raise); color: var(--ink); font-family: var(--serif-body); } .wpistic-formistic-form-notice--err { border-left-color: var(--color-danger); } /* --------------------------------------------------------------------------- * Mobile sticky Build My Trip action * * Keyboard-reachable, and padded out of the way of form controls: the bar is * hidden while a field has focus so it can never cover the input a guest is * typing into, and body padding reserves its height so it never overlaps the * end of the page. * * Deliberately an "always-dark" surface (see --surface-dark note at the top * of this file) in both modes -- it sits over page content like a hero * overlay, not as part of the page's own surface stack. * ------------------------------------------------------------------------ */ .bt-sticky-cta { position: fixed; inset: auto 0 0 0; z-index: 90; display: none; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--rule-on-dark); background: rgba(14, 16, 13, 0.96); backdrop-filter: blur(10px); } .bt-sticky-cta__link { display: block; padding: 16px 20px; /* Fixed dark-mode values, not the mode-variable tokens: this bar is an * always-dark overlay surface (see --surface-dark note above), so it * must not shift when the page itself switches to light mode. */ border: 1px solid #C9A96E; background: #C9A96E; color: #0E100D; font-family: var(--mono); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; text-align: center; text-decoration: none; } @media (max-width: 860px) { .bt-sticky-cta { display: block; } body.bt-has-sticky-cta { padding-bottom: 84px; } /* Yield to the keyboard while a control is focused. */ body.bt-form-focus .bt-sticky-cta { display: none; } } /* The sticky action is redundant on the page it points at. */ .page-build-my-trip .bt-sticky-cta { display: none; }