/* Theme Name: SzymonExplores Theme URI: https://szymonexplores.com Author: Szymon Author URI: https://szymonexplores.com Description: A bespoke WordPress theme for travel photography. Immersive East Asia expeditions, editorial photo galleries, and fine-art print sales. Version: 0.9.0 Requires at least: 6.4 Tested up to: 6.7 Requires PHP: 8.1 License: Private, All Rights Reserved Text Domain: szymonexplores Tags: photography, portfolio, travel, full-width-template, custom-logo */ /* ========================================================================== DESIGN TOKENS All theme-wide values. Change a variable → the entire site updates. ========================================================================== */ :root { /* ── Palette: Open Sky ───────────────────────────────────────────────── */ --clr-ink: #17140F; /* Richest black – body text, dark sections */ --clr-ink-soft: #2A2219; /* Softer black – card / hover surfaces */ --clr-bg: #FAF8F3; /* Warm paper white – main background */ --clr-bg-alt: #EFE7D8; /* Surface – alternate sections (deeper) */ --clr-accent: #16798B; /* Tide-deep – primary accent (AA-safe links) */ --clr-accent-bright: #1C8CA0; /* Bright Tide – large display / hover */ --clr-accent-strong: #115F6E; /* Deep Tide – active / pressed states */ --clr-accent-alt: #115F6E; /* Tide for use ON --clr-bg-alt and other deep surfaces. Plain Tide (#16798B) scores 4.13 there - under the 4.5 AA floor; this scores 5.92. See the contrast guard below. */ --clr-sage: #2F6353; /* Dusty sage – secondary accent */ --clr-mist: #DBD0BD; /* Mist – borders, dividers (more visible) */ --clr-shell: #D2C6AE; /* Shell – deep full-bleed bands. Display use only: headings/large text - body or muted text on Shell fails AA. */ --clr-white: #FBF7EF; --clr-surface: #FBF7EF; /* Card / input surface - flips dark in dark mode */ --clr-text: #2A2520; /* Primary body text */ --clr-text-muted: #6E665E; /* Secondary / muted text */ /* ── Open Sky - signature & support ─────────────────────────────────────── --clr-accent* is the Tide (sea-blue) signature. Change the values here and every button, link, label, and accent across the theme follows. */ --clr-on-accent: #FBF7EF; /* text on Tide fills (flips dark in dark mode) */ --clr-tide: #1C8CA0; /* bright signature - large display / icons */ --clr-tide-deep: #16798B; /* AA-safe Tide for small text / links */ --clr-pine: #2F6353; /* grounding green (= --clr-sage) */ --clr-sand: #D9B36C; /* warm support */ --clr-coral: #F07A57; /* single vivid action (CTA) */ --clr-coral-dark: #DA5C39; /* coral hover / pressed */ --clr-on-coral: #2A2520; /* dark label on Coral (AA 5.5) */ --clr-link: #16798B; /* body link colour */ /* Tints - low-opacity fills for badges, notices, active chips */ --clr-tide-tint: rgba(28,140,160,0.12); --clr-pine-tint: rgba(47,99,83,0.12); --clr-coral-tint: rgba(240,122,87,0.14); --clr-sand-tint: rgba(217,179,108,0.18); /* Semantic / UI state - distinct from brand colour; error is NOT Coral */ --clr-success: #2E7D5B; --clr-success-tint: rgba(46,125,91,0.12); --clr-warning: #9A6410; --clr-warning-tint: rgba(154,100,16,0.14); --clr-error: #C0392B; --clr-error-tint: rgba(192,57,43,0.12); --clr-info: #16798B; --clr-info-tint: rgba(22,121,139,0.12); --clr-on-status: #FBF7EF; /* white label on solid status fills */ /* Interaction */ --clr-focus: #1C8CA0; --clr-selection: rgba(28,140,160,0.22); --clr-overlay: rgba(23,20,15,0.45); /* ── Typography ──────────────────────────────────────────────────────── */ --font-display: 'Fraunces', 'Fraunces Fallback', Georgia, serif; --font-body: 'DM Sans', 'DM Sans Fallback', Arial, sans-serif; --font-mono: 'DM Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* ── Fluid Type Scale ─────────────────────────────────────────────────── */ --text-xs: clamp(0.70rem, 1.4vw, 0.75rem); --text-sm: clamp(0.82rem, 1.6vw, 0.875rem); --text-base: clamp(1rem, 2vw, 1.0625rem); --text-lg: clamp(1.1rem, 2.2vw, 1.1875rem); --text-xl: clamp(1.25rem, 2.8vw, 1.375rem); --text-2xl: clamp(1.5rem, 3.2vw, 1.75rem); --text-3xl: clamp(1.875rem, 4vw, 2.25rem); --text-4xl: clamp(2.25rem, 5vw, 3rem); --text-5xl: clamp(3rem, 6vw, 4rem); --text-6xl: clamp(3.75rem, 8vw, 5.5rem); --text-7xl: clamp(4.5rem, 10vw, 7rem); /* ── Spacing Scale ───────────────────────────────────────────────────── */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem; --sp-16: 4rem; --sp-20: 5rem; --sp-24: 6rem; --sp-32: 8rem; --sp-40: 10rem; --sp-48: 12rem; /* ── Layout ──────────────────────────────────────────────────────────── */ --container-max: 1440px; --container-prose: 720px; --container-narrow: 960px; --gutter: clamp(1.25rem, 5vw, 2.5rem); --header-height: 80px; /* ── Editorial lanes (journal posts) ───────────────────────────────── Four widths on one named grid: text, feature, wide, full. Every block in a post sits in a lane; the hero and the body share the same lines, so a title and the paragraph under it start on the same edge. The measure is rem, not ch: DM Sans has a wide zero, so 65ch set ~93 characters a line, while 38rem at the 19px body size sets ~66. */ --lane-text: 38rem; --lane-feature: 54rem; --lane-wide: 76rem; --lanes: [full-start] minmax(var(--gutter), 1fr) [wide-start] minmax(0, calc((var(--lane-wide) - var(--lane-feature)) / 2)) [feature-start] minmax(0, calc((var(--lane-feature) - var(--lane-text)) / 2)) [text-start] min(var(--lane-text), 100% - 2 * var(--gutter)) [text-end] minmax(0, calc((var(--lane-feature) - var(--lane-text)) / 2)) [feature-end] minmax(0, calc((var(--lane-wide) - var(--lane-feature)) / 2)) [wide-end] minmax(var(--gutter), 1fr) [full-end]; /* ── Borders ─────────────────────────────────────────────────────────── */ --border: 1px solid var(--clr-mist); --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px; --radius-full: 9999px; /* ── Shadows ─────────────────────────────────────────────────────────── */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04); --shadow-md: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04); --shadow-lg: 0 8px 32px rgba(0,0,0,0.10), 0 4px 8px rgba(0,0,0,0.04); --shadow-xl: 0 16px 48px rgba(0,0,0,0.14), 0 8px 16px rgba(0,0,0,0.06); /* ── Animation ───────────────────────────────────────────────────────── */ --ease-out: cubic-bezier(0.0, 0.0, 0.2, 1); --ease-in: cubic-bezier(0.4, 0.0, 1.0, 1); --ease-inout: cubic-bezier(0.4, 0.0, 0.2, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --dur-fast: 150ms; --dur-base: 300ms; --dur-slow: 500ms; --dur-slower: 750ms; /* ── Z-Index ─────────────────────────────────────────────────────────── */ --z-base: 0; --z-above: 10; --z-dropdown: 100; --z-sticky: 200; --z-overlay: 300; --z-modal: 400; --z-toast: 500; } /* ── Photograph placeholder colour ─────────────────────────────────────── Each carries its own average colour as --ph (worked out at upload, see includes/placeholders.php); main.css paints it behind the image until the pixels arrive. Registered as a non-inheriting colour so it can never leak into a nested image, and a malformed value falls back to transparent instead of breaking the declaration that uses it. */ @property --ph { syntax: ""; inherits: false; initial-value: transparent; } /* ========================================================================== DARK MODE - Open Sky Follows the OS setting automatically; a manual toggle sets [data-theme] on to override (and persists the choice). Text is always cream; accents brighten so they stay vivid on the warm-black ground. ========================================================================== */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; /* scrollbars and form controls follow the page */ --clr-bg:#17140F; --clr-bg-alt:#2A2219; --clr-mist:#3D352A; --clr-shell:#3E3527; --clr-ink:#0E0C09; --clr-ink-soft:#181410; --clr-text:#ECE4D8; --clr-text-muted:#A89E90; --clr-white:#FBF7EF; --clr-surface:#322A20; --clr-accent:#3FB0C2; --clr-accent-bright:#63C4D4; --clr-accent-strong:#2E97A8; --clr-on-accent:#15110C; --clr-accent-alt:#3FB0C2; --clr-tide:#3FB0C2; --clr-tide-deep:#3FB0C2; --clr-sage:#5FA98C; --clr-pine:#5FA98C; --clr-sand:#E0BE7C; --clr-coral:#F0805F; --clr-coral-dark:#F2906F; --clr-on-coral:#15110C; --clr-link:#3FB0C2; --clr-tide-tint:rgba(63,176,194,0.16); --clr-pine-tint:rgba(95,169,140,0.16); --clr-coral-tint:rgba(240,128,95,0.18); --clr-sand-tint:rgba(224,190,124,0.18); --clr-success:#5FB98E; --clr-success-tint:rgba(95,185,142,0.16); --clr-warning:#E0A33E; --clr-warning-tint:rgba(224,163,62,0.18); --clr-error:#E97361; --clr-error-tint:rgba(233,115,97,0.16); --clr-info:#3FB0C2; --clr-info-tint:rgba(63,176,194,0.16); --clr-on-status:#15110C; --clr-focus:#3FB0C2; --clr-selection:rgba(63,176,194,0.26); --clr-overlay:rgba(5,4,3,0.55); } } :root[data-theme="dark"] { color-scheme: dark; --clr-bg:#17140F; --clr-bg-alt:#2A2219; --clr-mist:#3D352A; --clr-shell:#3E3527; --clr-ink:#0E0C09; --clr-ink-soft:#181410; --clr-text:#ECE4D8; --clr-text-muted:#A89E90; --clr-white:#FBF7EF; --clr-surface:#322A20; --clr-accent:#3FB0C2; --clr-accent-bright:#63C4D4; --clr-accent-strong:#2E97A8; --clr-on-accent:#15110C; --clr-accent-alt:#3FB0C2; --clr-tide:#3FB0C2; --clr-tide-deep:#3FB0C2; --clr-sage:#5FA98C; --clr-pine:#5FA98C; --clr-sand:#E0BE7C; --clr-coral:#F0805F; --clr-coral-dark:#F2906F; --clr-on-coral:#15110C; --clr-link:#3FB0C2; --clr-tide-tint:rgba(63,176,194,0.16); --clr-pine-tint:rgba(95,169,140,0.16); --clr-coral-tint:rgba(240,128,95,0.18); --clr-sand-tint:rgba(224,190,124,0.18); --clr-success:#5FB98E; --clr-success-tint:rgba(95,185,142,0.16); --clr-warning:#E0A33E; --clr-warning-tint:rgba(224,163,62,0.18); --clr-error:#E97361; --clr-error-tint:rgba(233,115,97,0.16); --clr-info:#3FB0C2; --clr-info-tint:rgba(63,176,194,0.16); --clr-on-status:#15110C; --clr-focus:#3FB0C2; --clr-selection:rgba(63,176,194,0.26); --clr-overlay:rgba(5,4,3,0.55); } /* ========================================================================== CONTRAST GUARD - accents on the alternate surface -------------------------------------------------------------------------- Tide (#16798B) scores 4.13 against --clr-bg-alt (#EFE7D8): below the WCAG AA floor of 4.5 for body-size text. Rather than patch each component, the link/accent tokens are re-mapped inside every container that paints that surface - descendants inherit automatically, so components added later are correct by default. --clr-accent-alt resolves per mode: #115F6E in light (5.92 on alt), and plain #3FB0C2 in dark, where the standard accent already passes at 6.11. Darkening it in dark mode would FAIL (4.11 on the dark card surface) - which is exactly why this is a mode-aware token, not a blanket override. ========================================================================== */ .section--alt, .prose blockquote, .filter-bar__count, .contact-info-block--accent, .print-detail__assurance, .print-detail__no-buy, .series-lead, .single-photo__collection, .portfolio-card { --clr-link: var(--clr-accent-alt); --clr-accent: var(--clr-accent-alt); --clr-tide-deep: var(--clr-accent-alt); } /* Text selection + visible focus (global, both modes) */ ::selection { background: var(--clr-selection); } :focus-visible { outline: 2px solid var(--clr-focus); outline-offset: 2px; box-shadow: 0 0 0 2px var(--clr-bg); } /* Smooth the mode switch (respect reduced motion) */ @media (prefers-reduced-motion: no-preference) { body, .site-header, .card, .btn, a { transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); } }