/* Theme Name: Lion Digital 2026 Theme URI: https://liondigital.com.au Author: LION Digital Author URI: https://liondigital.com.au Description: Custom theme for the 2026 Lion Digital website rebuild. Auto light/dark mode driven by system preference. Fully responsive, CWV-optimised. Version: 1.0.0 Requires at least: 6.0 Tested up to: 6.7 Requires PHP: 8.0 License: Proprietary Text Domain: liondigital-2026 */ /* ========================================================================== Reset ========================================================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } img, svg { max-width: 100%; display: block; height: auto; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; } ul { list-style: none; } input, textarea, select { font: inherit; color: inherit; } /* ========================================================================== Design tokens — Light mode (default) ========================================================================== */ :root { /* Brand */ --ld-red: #FF2C55; --ld-red-dark: #d4163c; --ld-red-soft: rgba(255, 44, 85, 0.10); --ld-red-glow: rgba(255, 44, 85, 0.06); /* Surfaces */ --ld-bg: #ffffff; --ld-bg-2: #f7f7f7; --ld-bg-3: #eeeeee; --ld-bg-alt: #f2f2f2; --ld-panel: #ffffff; /* Text */ --ld-text: #101010; --ld-text-muted: #555555; --ld-text-dim: #888888; /* Borders */ --ld-border: rgba(0, 0, 0, 0.08); --ld-border-strong: rgba(0, 0, 0, 0.16); /* Nav */ --ld-nav-bg: rgba(255, 255, 255, 0.88); --ld-nav-border: rgba(0, 0, 0, 0.06); /* Footer */ --ld-footer-bg: #0c0c0c; --ld-footer-text: #aaaaaa; --ld-footer-link: #cccccc; /* Layout */ --ld-container: 1180px; --ld-radius-sm: 8px; --ld-radius-md: 12px; --ld-radius-lg: 18px; --ld-radius-xl: 24px; --ld-radius-pill: 999px; /* Type */ --ld-font-sans: 'Inter', 'Helvetica Neue', Arial, system-ui, -apple-system, sans-serif; --ld-font-mono: 'Fira Code', 'Cascadia Code', 'JetBrains Mono', monospace; /* Effects */ --ld-shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04); --ld-shadow-md: 0 4px 16px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04); --ld-shadow-lg: 0 8px 32px rgba(0,0,0,0.10), 0 4px 12px rgba(0,0,0,0.06); /* Transitions */ --ld-ease: cubic-bezier(0.22, 1, 0.36, 1); color-scheme: light; } /* ========================================================================== Design tokens — Dark mode Applied when: (a) system prefers dark and user hasn't forced light, OR (b) user has manually toggled to dark via the theme switch. ========================================================================== */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ld-bg: #0e0e0e; --ld-bg-2: #161616; --ld-bg-3: #1c1c1c; --ld-bg-alt: #141414; --ld-panel: #161616; --ld-text: #f0f0f0; --ld-text-muted: #aaaaaa; --ld-text-dim: #666666; --ld-border: rgba(255, 255, 255, 0.07); --ld-border-strong: rgba(255, 255, 255, 0.14); --ld-nav-bg: rgba(14, 14, 14, 0.88); --ld-nav-border: rgba(255, 255, 255, 0.06); --ld-footer-bg: #080808; --ld-footer-text: #888888; --ld-footer-link: #aaaaaa; --ld-shadow-sm: 0 1px 3px rgba(0,0,0,0.5); --ld-shadow-md: 0 4px 20px rgba(0,0,0,0.5); --ld-shadow-lg: 0 8px 40px rgba(0,0,0,0.6); color-scheme: dark; } } /* Manual dark override (set via JS toggle → data-theme="dark" on ) */ :root[data-theme="dark"] { --ld-bg: #0e0e0e; --ld-bg-2: #161616; --ld-bg-3: #1c1c1c; --ld-bg-alt: #141414; --ld-panel: #161616; --ld-text: #f0f0f0; --ld-text-muted: #aaaaaa; --ld-text-dim: #666666; --ld-border: rgba(255, 255, 255, 0.07); --ld-border-strong: rgba(255, 255, 255, 0.14); --ld-nav-bg: rgba(14, 14, 14, 0.88); --ld-nav-border: rgba(255, 255, 255, 0.06); --ld-footer-bg: #080808; --ld-footer-text: #888888; --ld-footer-link: #aaaaaa; --ld-shadow-sm: 0 1px 3px rgba(0,0,0,0.5); --ld-shadow-md: 0 4px 20px rgba(0,0,0,0.5); --ld-shadow-lg: 0 8px 40px rgba(0,0,0,0.6); color-scheme: dark; } /* Manual light override — keeps light tokens even if system is dark */ :root[data-theme="light"] { color-scheme: light; } /* ========================================================================== Base ========================================================================== */ body { font-family: var(--ld-font-sans); background: var(--ld-bg); color: var(--ld-text); line-height: 1.65; font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100vh; display: flex; flex-direction: column; } body.admin-bar .site-header { top: 32px; } @media (max-width: 782px) { body.admin-bar .site-header { top: 46px; } } .site-main { flex: 1 0 auto; padding-top: 70px; } /* ========================================================================== Typography ========================================================================== */ h1, h2, h3, h4, h5, h6 { color: var(--ld-text); font-weight: 800; line-height: 1.15; letter-spacing: -0.025em; } h1 { font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 900; line-height: 1.08; } h2 { font-size: clamp(1.8rem, 3.5vw, 2.8rem); } h3 { font-size: clamp(1.1rem, 2vw, 1.35rem); font-weight: 700; } h4 { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; } p { color: var(--ld-text-muted); } a { transition: color 0.15s ease; } a:hover { color: var(--ld-red); } /* ========================================================================== Layout helpers ========================================================================== */ .ld-container { max-width: var(--ld-container); margin: 0 auto; padding: 0 2rem; width: 100%; } @media (max-width: 640px) { .ld-container { padding: 0 1.25rem; } } .ld-section { padding: 5rem 0; } @media (max-width: 768px) { .ld-section { padding: 3.5rem 0; } } /* ========================================================================== Post / blog list (fallback for non-home pages) ========================================================================== */ .post-list { padding: 3rem 0; } .post-list article { margin-bottom: 2rem; padding-bottom: 2rem; border-bottom: 1px solid var(--ld-border); } .entry-title a:hover { color: var(--ld-red); } /* ========================================================================== Reduced motion ========================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }