/* Theme Name: 3RG Theme URI: https://3rdrockgrid.com Author: 3RD Rock Grid Author URI: https://3rdrockgrid.com Description: The official WordPress theme for 3RD Rock Grid — the original virtual world pioneer. A professional dual-mode design system inspired by the 3RG brand identity, crafted to reflect the history and prestige of the second oldest OpenSim grid, established December 2007. Version: 1.0.10 Requires at least: 6.0 Tested up to: 6.7 Requires PHP: 8.0 License: Proprietary Text Domain: thrdrockgrid Tags: dark-mode, light-mode, custom-logo, custom-menu, featured-images, full-width-template, sticky-post, translation-ready, accessibility-ready, wide-blocks */ /* ============================================================ 3RG DESIGN TOKENS ============================================================ */ :root { /* Brand */ --clr-orange: #E07820; --clr-orange-light: #F0933A; --clr-orange-dark: #B85E18; --clr-orange-glow: rgba(224, 120, 32, 0.20); --clr-orange-subtle: rgba(224, 120, 32, 0.10); --clr-silver: #C4C4C4; --clr-silver-bright: #E8E8E8; /* Typography */ --font-heading: 'Orbitron', 'Exo 2', sans-serif; --font-ui: 'Rajdhani', 'Exo 2', sans-serif; --font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; /* Type Scale (fluid) */ --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-4xl: 2.25rem; --text-5xl: 3rem; --text-6xl: clamp(2.5rem, 6vw, 4rem); /* Spacing */ --s1: 0.25rem; --s2: 0.5rem; --s3: 0.75rem; --s4: 1rem; --s5: 1.25rem; --s6: 1.5rem; --s8: 2rem; --s10: 2.5rem; --s12: 3rem; --s16: 4rem; --s20: 5rem; --s24: 6rem; --s32: 8rem; /* Layout */ --container: 1200px; --container-wide: 1400px; --header-height: 72px; /* Radius */ --r-sm: 3px; --r-md: 6px; --r-lg: 10px; --r-xl: 16px; --r-pill: 9999px; /* Easing */ --ease-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --ease-base: 250ms cubic-bezier(0.4, 0, 0.2, 1); --ease-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1); --ease-spring: 350ms cubic-bezier(0.34, 1.56, 0.64, 1); /* Z-Index */ --z-sticky: 200; --z-overlay: 300; --z-modal: 400; /* ── Light Mode Semantic Colors ── */ --bg-base: #F5F3EF; --bg-surface: #FFFFFF; --bg-elevated: #EDE9E3; --bg-sunken: #E8E3DC; --fg-1: #1A1816; --fg-2: #4A4541; --fg-3: #8A8480; --fg-4: #A8A4A0; --fg-inv: #FFFFFF; --bd-subtle: #DDD8D0; --bd-default: #C8C4BC; --bd-strong: #A8A4A0; --sh-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05); --sh-md: 0 4px 8px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.05); --sh-lg: 0 12px 20px rgba(0,0,0,0.10), 0 4px 8px rgba(0,0,0,0.05); --sh-xl: 0 24px 32px rgba(0,0,0,0.10), 0 8px 12px rgba(0,0,0,0.06); --sh-accent: 0 4px 24px rgba(224, 120, 32, 0.22); --header-bg: rgba(245, 243, 239, 0.94); --header-border: rgba(200, 196, 188, 0.80); color-scheme: light; } /* ── Dark Mode Semantic Colors ── Applied via: html.dark-mode (anti-flash, zero-flash) OR body.dark-mode (JS toggle). html.dark-mode is set synchronously in before first paint. body.dark-mode is added after DOMContentLoaded for parity. Both selectors are needed so custom properties are available from the very first painted frame — eliminating any flash of light mode on dark-mode visitors. */ html.dark-mode, body.dark-mode { --bg-base: #0C0C0C; --bg-surface: #141414; --bg-elevated: #1C1C1C; --bg-sunken: #090909; --fg-1: #EAEAE8; --fg-2: #A8A8A4; --fg-3: #686864; --fg-4: #484844; --fg-inv: #0C0C0C; --bd-subtle: #222220; --bd-default: #2E2E2A; --bd-strong: #444440; --sh-sm: 0 1px 3px rgba(0,0,0,0.50), 0 1px 2px rgba(0,0,0,0.40); --sh-md: 0 4px 8px rgba(0,0,0,0.60), 0 2px 4px rgba(0,0,0,0.40); --sh-lg: 0 12px 20px rgba(0,0,0,0.70), 0 4px 8px rgba(0,0,0,0.50); --sh-xl: 0 24px 32px rgba(0,0,0,0.80), 0 8px 12px rgba(0,0,0,0.60); --sh-accent: 0 4px 24px rgba(224, 120, 32, 0.30); --header-bg: rgba(10, 10, 10, 0.96); --header-border: rgba(40, 40, 38, 0.80); color-scheme: dark; } /* ============================================================ RESET & NORMALIZE ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; tab-size: 4; } body { font-family: var(--font-body); font-size: var(--text-base); font-weight: 400; line-height: 1.7; color: var(--fg-1); background-color: var(--bg-base); transition: background-color var(--ease-slow), color var(--ease-slow); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, svg, video { display: block; max-width: 100%; } a { color: var(--clr-orange); text-decoration: none; transition: color var(--ease-fast), opacity var(--ease-fast); } a:hover { color: var(--clr-orange-light); } a:focus-visible { outline: 2px solid var(--clr-orange); outline-offset: 3px; border-radius: var(--r-sm); } button, input, select, textarea { font-family: inherit; font-size: inherit; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 700; line-height: 1.2; color: var(--fg-1); letter-spacing: 0.02em; } h1 { font-size: var(--text-4xl); } h2 { font-size: var(--text-3xl); } h3 { font-size: var(--text-2xl); } h4 { font-size: var(--text-xl); } h5 { font-size: var(--text-lg); } h6 { font-size: var(--text-base); } p { margin-bottom: var(--s4); } p:last-child { margin-bottom: 0; } strong { font-weight: 600; } em { font-style: italic; } blockquote { border-left: 3px solid var(--clr-orange); padding: var(--s4) var(--s6); margin: var(--s8) 0; background: var(--bg-surface); border-radius: 0 var(--r-md) var(--r-md) 0; font-style: italic; color: var(--fg-2); } blockquote cite { display: block; margin-top: var(--s3); font-style: normal; font-size: var(--text-sm); color: var(--fg-3); } ul, ol { padding-left: var(--s6); margin-bottom: var(--s4); } li { margin-bottom: var(--s2); } hr { border: none; border-top: 1px solid var(--bd-subtle); margin: var(--s8) 0; } table { width: 100%; border-collapse: collapse; margin-bottom: var(--s6); } th, td { padding: var(--s3) var(--s4); border: 1px solid var(--bd-default); text-align: left; } th { background: var(--bg-elevated); font-family: var(--font-ui); font-weight: 600; font-size: var(--text-sm); letter-spacing: 0.05em; text-transform: uppercase; color: var(--fg-2); } code { font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace; font-size: 0.875em; background: var(--bg-elevated); padding: 0.15em 0.4em; border-radius: var(--r-sm); color: var(--clr-orange); } pre { background: var(--bg-sunken); border: 1px solid var(--bd-subtle); border-radius: var(--r-md); padding: var(--s6); overflow-x: auto; margin-bottom: var(--s6); } pre code { background: none; padding: 0; color: var(--fg-1); font-size: var(--text-sm); } /* ============================================================ ACCESSIBILITY ============================================================ */ .screen-reader-text { clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important; } .screen-reader-text:focus { clip: auto !important; clip-path: none; display: block; height: auto; left: var(--s4); top: var(--s4); width: auto; z-index: var(--z-modal); background: var(--bg-surface); color: var(--fg-1); padding: var(--s3) var(--s6); border: 2px solid var(--clr-orange); border-radius: var(--r-md); box-shadow: var(--sh-lg); font-size: var(--text-sm); font-weight: 600; } /* ============================================================ LAYOUT UTILITIES ============================================================ */ .container { max-width: var(--container); margin-inline: auto; padding-inline: var(--s6); } .container-wide { max-width: var(--container-wide); margin-inline: auto; padding-inline: var(--s6); } .site-wrapper { display: flex; flex-direction: column; min-height: 100vh; } .site-main { flex: 1; padding-top: var(--header-height); } .content-area { display: grid; grid-template-columns: 1fr 300px; gap: var(--s10); align-items: start; padding-block: var(--s12); } .content-area.no-sidebar { grid-template-columns: 1fr; max-width: 860px; margin-inline: auto; width: 100%; } .content-area.full-width { grid-template-columns: 1fr; max-width: none; } /* ============================================================ BUTTONS ============================================================ */ .btn { display: inline-flex; align-items: center; gap: var(--s2); padding: var(--s3) var(--s6); border-radius: var(--r-md); font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; border: none; transition: all var(--ease-base); white-space: nowrap; text-decoration: none; } .btn:hover { text-decoration: none; } .btn:focus-visible { outline: 2px solid var(--clr-orange); outline-offset: 3px; } .btn-primary { background: linear-gradient(135deg, var(--clr-orange-dark) 0%, var(--clr-orange) 60%, var(--clr-orange-light) 100%); color: #fff; box-shadow: var(--sh-md); } .btn-primary:hover { opacity: 0.92; transform: translateY(-1px); box-shadow: var(--sh-accent); color: #fff; } .btn-primary:active { transform: translateY(0); } .btn-secondary { background: transparent; color: var(--clr-orange); border: 1.5px solid var(--clr-orange); } .btn-secondary:hover { background: var(--clr-orange-subtle); color: var(--clr-orange-light); border-color: var(--clr-orange-light); } .btn-ghost { background: transparent; color: var(--fg-2); border: 1px solid var(--bd-default); } .btn-ghost:hover { background: var(--bg-elevated); color: var(--fg-1); border-color: var(--bd-strong); } .btn-lg { padding: var(--s4) var(--s10); font-size: var(--text-base); border-radius: var(--r-lg); } .btn-sm { padding: var(--s2) var(--s4); font-size: var(--text-xs); border-radius: var(--r-sm); } /* ============================================================ HEADER ============================================================ */ .site-header { position: fixed; top: 0; left: 0; right: 0; height: var(--header-height); z-index: var(--z-sticky); background: var(--header-bg); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border-bottom: 1px solid var(--header-border); transition: background var(--ease-slow), border-color var(--ease-slow), box-shadow var(--ease-slow); } .site-header.scrolled { box-shadow: var(--sh-md); } .site-header.scrolled::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, var(--clr-orange) 30%, var(--clr-orange-light) 60%, transparent 100%); opacity: 0.5; } /* The .container between .site-header and .header-inner has no height set, so height:100% on .header-inner would resolve to content height (~50px) rather than the full 72px header. Fix: reference --header-height directly so the value is always correct regardless of what the parent .container is doing. */ .header-inner { display: flex; align-items: center; justify-content: space-between; height: var(--header-height); /* explicit — never relative to .container */ gap: var(--s6); } /* Give .container the full header height so height:100% children resolve correctly. No display:flex here — .header-inner must stay a block element so it naturally spans the full container width. */ .site-header .container { height: 100%; } /* Site Logo — no height:100% needed; parent flex centers it automatically */ .site-logo { flex-shrink: 0; display: flex; align-items: center; } .site-logo > a, .site-logo > span.custom-logo-link { display: flex; align-items: center; text-decoration: none; } /* Legacy selector */ .site-logo a { display: flex; align-items: center; } .site-logo img, .site-logo .custom-logo { height: 50px !important; /* beats HTML height="" attribute */ width: auto !important; display: block; max-width: 260px; object-fit: contain; align-self: center; transition: opacity var(--ease-fast); } .site-logo a:hover img, .site-logo a:hover .custom-logo { opacity: 0.88; } /* ── Mode-aware logo switching ─────────────────────────────── Two elements are rendered in the header: .thrg-logo-for-light Black mono — visible on the cream light-mode header .thrg-logo-for-dark Full-colour transparent — correct on the dark header IMPORTANT: selectors use .site-logo as a parent to reach specificity (0,2,0) which beats .site-logo img at (0,1,1). Without the parent selector the display:block on .site-logo img overrides our display:none here. */ .site-logo .thrg-logo-for-dark { display: none; } /* hidden in light mode */ .site-logo .thrg-logo-for-light { display: block; } /* visible in light mode */ html.dark-mode .site-logo .thrg-logo-for-light, body.dark-mode .site-logo .thrg-logo-for-light { display: none; } html.dark-mode .site-logo .thrg-logo-for-dark, body.dark-mode .site-logo .thrg-logo-for-dark { display: block; } .site-logo .logo-text { font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 700; letter-spacing: 0.1em; color: var(--fg-1); text-transform: uppercase; } .site-logo .logo-text span { color: var(--clr-orange); } /* Primary Navigation */ .primary-nav { flex: 1; display: flex; justify-content: center; } .primary-nav ul { display: flex; align-items: center; gap: 0; list-style: none; padding: 0; margin: 0; } .primary-nav ul li { position: relative; } /* ── Top-level nav links ─────────────────────────────────── */ .primary-nav ul li a { display: block; padding: var(--s3) var(--s4); font-family: var(--font-ui); font-size: 0.8125rem; /* 13px — crisp without being too large */ font-weight: 500; /* was 600 — lighter reads as more refined */ letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-2); /* muted silver-gray, not bright */ text-decoration: none; position: relative; transition: color var(--ease-fast); white-space: nowrap; } /* Thin underline slide-in — 1px feels more elegant than 2px */ .primary-nav ul li a::after { content: ''; position: absolute; bottom: 5px; left: var(--s4); right: var(--s4); height: 1px; background: var(--clr-orange); border-radius: 1px; transform: scaleX(0); transform-origin: left; transition: transform var(--ease-base); } /* Hover: step up to primary text colour — subtle, not jarring */ .primary-nav ul li a:hover { color: var(--fg-1); } /* Current page: earns the orange */ .primary-nav ul li.current-menu-item > a, .primary-nav ul li.current_page_item > a { color: var(--clr-orange); } /* Ancestor of current page: just brighten, never full orange — prevents the entire nav glowing orange when a submenu page is active */ .primary-nav ul li.current-menu-ancestor > a { color: var(--fg-1); } /* Underline only for hover and the exact current item, not ancestors */ .primary-nav ul li a:hover::after, .primary-nav ul li.current-menu-item > a::after, .primary-nav ul li.current_page_item > a::after { transform: scaleX(1); } /* ── Dropdown menus ────────────────────────────────────────── */ .primary-nav ul li ul { position: absolute; top: 100%; /* flush — no gap, padding-top creates visual space */ left: 50%; transform: translateX(-50%) translateY(-6px); min-width: 220px; background: var(--bg-surface); border: 1px solid var(--bd-default); border-top: 2px solid var(--clr-orange); /* orange accent stripe at top */ border-radius: 0 0 var(--r-lg) var(--r-lg); box-shadow: var(--sh-xl); padding: 6px 0 8px; /* padding-top = visual gap without breaking hover zone */ flex-direction: column; gap: 0; opacity: 0; visibility: hidden; pointer-events: none; display: flex; /* ── Hover-timing fix ────────────────────────────────────── Delay visibility:hidden by 300ms on close. While opacity fades (200ms) the element stays visible so diagonal mouse movement from the parent link into the submenu doesn't close the menu. On open: show instantly, no delay. */ transition: opacity 200ms ease, transform 200ms ease, visibility 0ms linear 300ms; } .primary-nav ul li:hover > ul, .primary-nav ul li:focus-within > ul { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); transition: opacity 200ms ease, transform 200ms ease, visibility 0ms linear 0ms; /* open immediately */ } /* ── Third-level flyouts ───────────────────────────────────── Nested submenus (e.g. Legal → Terms of Service) inherit the dropdown rules above, which would drop them on top of their own parent menu. Fly them out to the right of the parent item instead. */ .primary-nav ul li ul li ul { top: -8px; /* aligns first flyout item with its parent item */ left: 100%; margin-left: 2px; transform: translateX(-6px); border-radius: 0 var(--r-lg) var(--r-lg) var(--r-lg); } .primary-nav ul li ul li:hover > ul, .primary-nav ul li ul li:focus-within > ul { transform: translateX(0); } /* ── Dropdown items ─────────────────────────────────────────── */ .primary-nav ul li ul li a { padding: 0.5rem 1.25rem 0.5rem 1rem; font-family: var(--font-body); /* Inter — more readable than Rajdhani */ font-size: 0.8125rem; font-weight: 400; /* regular weight, not bold */ letter-spacing: 0; /* no letter-spacing — normal reading */ text-transform: none; /* sentence case, NOT uppercase */ color: var(--fg-2); white-space: nowrap; width: 100%; border-left: 2px solid transparent; transition: background var(--ease-fast), color var(--ease-fast), border-color var(--ease-fast), padding-left var(--ease-fast); } .primary-nav ul li ul li a::after { display: none; } /* Hover: subtle tint + orange left-border accent + slight indent */ .primary-nav ul li ul li a:hover { background: var(--clr-orange-subtle); color: var(--fg-1); border-left-color: var(--clr-orange); padding-left: 1.375rem; } /* Header Controls */ .header-controls { display: flex; align-items: center; gap: var(--s2); flex-shrink: 0; } .header-btn { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--r-md); background: transparent; border: 1px solid transparent; color: var(--fg-2); cursor: pointer; transition: all var(--ease-fast); } .header-btn:hover { background: var(--bg-elevated); border-color: var(--bd-subtle); color: var(--fg-1); } .header-btn svg { width: 18px; height: 18px; } /* Theme Toggle */ .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } body.dark-mode .theme-toggle .icon-sun { display: block; } body.dark-mode .theme-toggle .icon-moon { display: none; } /* Mobile Hamburger */ .menu-toggle { display: none; } /* ============================================================ MOBILE NAVIGATION DRAWER ============================================================ */ .mobile-nav-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.60); z-index: calc(var(--z-sticky) + 5); opacity: 0; visibility: hidden; transition: opacity var(--ease-base), visibility var(--ease-base); } .mobile-nav-overlay.open { opacity: 1; visibility: visible; } .mobile-nav-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(320px, 90vw); background: var(--bg-surface); z-index: calc(var(--z-sticky) + 10); transform: translateX(100%); transition: transform var(--ease-slow); display: flex; flex-direction: column; overflow-y: auto; border-left: 1px solid var(--bd-default); } .mobile-nav-drawer.open { transform: translateX(0); } .mobile-nav-header { display: flex; align-items: center; justify-content: space-between; padding: var(--s5) var(--s6); border-bottom: 1px solid var(--bd-subtle); } .mobile-nav-close { background: none; border: none; cursor: pointer; color: var(--fg-2); padding: var(--s2); border-radius: var(--r-md); transition: background var(--ease-fast), color var(--ease-fast); } .mobile-nav-close:hover { background: var(--bg-elevated); color: var(--fg-1); } .mobile-nav-menu { padding: var(--s4) 0; flex: 1; } .mobile-nav-menu ul { list-style: none; padding: 0; margin: 0; } .mobile-nav-menu ul li a { display: block; padding: var(--s4) var(--s6); font-family: var(--font-ui); font-weight: 600; font-size: var(--text-base); letter-spacing: 0.05em; text-transform: uppercase; color: var(--fg-1); border-bottom: 1px solid var(--bd-subtle); transition: background var(--ease-fast), color var(--ease-fast); } .mobile-nav-menu ul li a:hover, .mobile-nav-menu ul li.current-menu-item > a { background: var(--clr-orange-subtle); color: var(--clr-orange); } .mobile-nav-menu ul li ul { background: var(--bg-elevated); } .mobile-nav-menu ul li ul li a { padding-left: var(--s10); font-size: var(--text-sm); } /* ============================================================ SEARCH OVERLAY ============================================================ */ .search-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: var(--z-overlay); display: flex; align-items: flex-start; justify-content: center; padding-top: var(--s32); opacity: 0; visibility: hidden; transition: opacity var(--ease-base), visibility var(--ease-base); } .search-overlay.open { opacity: 1; visibility: visible; } .search-overlay-inner { width: min(640px, 90vw); transform: translateY(-16px); transition: transform var(--ease-base); } .search-overlay.open .search-overlay-inner { transform: translateY(0); } .search-overlay form { display: flex; gap: var(--s3); background: var(--bg-surface); border: 1px solid var(--bd-default); border-radius: var(--r-xl); padding: var(--s3); box-shadow: var(--sh-xl); } .search-overlay input[type="search"] { flex: 1; background: none; border: none; outline: none; padding: var(--s3) var(--s4); font-size: var(--text-lg); color: var(--fg-1); } .search-overlay input[type="search"]::placeholder { color: var(--fg-4); } .search-overlay button[type="submit"] { display: flex; align-items: center; justify-content: center; gap: 4px; background: var(--clr-orange); color: #fff; fill: #fff; /* ensure SVG fill:currentColor resolves to white */ border: none; border-radius: var(--r-lg); padding: var(--s3) var(--s5); font-family: var(--font-ui); font-weight: 600; flex-shrink: 0; cursor: pointer; transition: opacity var(--ease-fast), transform var(--ease-fast); } .search-overlay button[type="submit"] svg { fill: #fff; /* hard-coded fallback so icons are always white */ display: block; flex-shrink: 0; } .search-overlay button[type="submit"]:hover { opacity: 0.88; } .search-overlay-close { position: absolute; top: var(--s6); right: var(--s6); background: rgba(255,255,255,0.10); border: none; color: #fff; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; font-size: var(--text-xl); display: flex; align-items: center; justify-content: center; transition: background var(--ease-fast); } .search-overlay-close:hover { background: rgba(255,255,255,0.20); } /* ============================================================ HERO SECTION (Front Page) ============================================================ */ .hero { position: relative; min-height: calc(100vh - var(--header-height)); display: flex; align-items: center; justify-content: center; overflow: hidden; background: #0A0A0A; padding-block: var(--s20); } body:not(.dark-mode) .hero { background: linear-gradient(160deg, #1A1816 0%, #0C0C0C 100%); } .hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 50% at 50% 30%, rgba(224, 120, 32, 0.08) 0%, transparent 70%), radial-gradient(circle at 80% 80%, rgba(224, 120, 32, 0.05) 0%, transparent 50%); pointer-events: none; } .hero-rings { position: absolute; inset: 0; overflow: hidden; pointer-events: none; opacity: 0.08; } .hero-rings::before, .hero-rings::after { content: ''; position: absolute; border-radius: 50%; border: 1px solid var(--clr-silver); top: 50%; left: 50%; transform: translate(-50%, -50%); } .hero-rings::before { width: min(600px, 80vw); height: min(600px, 80vw); } .hero-rings::after { width: min(900px, 120vw); height: min(900px, 120vw); } .hero-content { position: relative; z-index: 2; text-align: center; max-width: 800px; padding-inline: var(--s6); } .hero-logo { max-width: min(780px, 90vw); height: auto; margin-inline: auto; margin-bottom: var(--s10); filter: drop-shadow(0 8px 40px rgba(224, 120, 32, 0.25)); animation: hero-logo-in 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } @keyframes hero-logo-in { from { opacity: 0; transform: translateY(20px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } .hero-eyebrow { font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.25em; text-transform: uppercase; color: var(--clr-orange); margin-bottom: var(--s4); animation: fade-up 0.6s var(--ease-slow) 0.3s both; } .hero-heading { font-family: var(--font-heading); font-size: var(--text-6xl); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--clr-silver-bright); line-height: 1.1; margin-bottom: var(--s6); animation: fade-up 0.6s var(--ease-slow) 0.4s both; } .hero-heading em { font-style: normal; color: var(--clr-orange); } .hero-sub { font-size: var(--text-lg); color: rgba(200, 200, 200, 0.70); max-width: 560px; margin-inline: auto; margin-bottom: var(--s10); line-height: 1.65; animation: fade-up 0.6s var(--ease-slow) 0.5s both; } .hero-cta { display: flex; align-items: center; justify-content: center; gap: var(--s4); flex-wrap: wrap; animation: fade-up 0.6s var(--ease-slow) 0.6s both; } @keyframes fade-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } /* ============================================================ MILESTONES / PIONEER STRIP ============================================================ */ .milestones-strip { background: var(--bg-surface); border-top: 1px solid var(--bd-subtle); border-bottom: 1px solid var(--bd-subtle); padding-block: var(--s10); } body.dark-mode .milestones-strip { background: var(--bg-elevated); } .milestones-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; } .milestone-item { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--s6) var(--s8); position: relative; } .milestone-item + .milestone-item::before { content: ''; position: absolute; left: 0; top: 20%; bottom: 20%; width: 1px; background: linear-gradient(to bottom, transparent, var(--bd-default), transparent); } .milestone-icon { width: 48px; height: 48px; border-radius: var(--r-lg); background: var(--clr-orange-subtle); border: 1px solid rgba(224, 120, 32, 0.25); display: flex; align-items: center; justify-content: center; margin-bottom: var(--s4); color: var(--clr-orange); } .milestone-icon svg { width: 24px; height: 24px; } .milestone-label { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--clr-orange); margin-bottom: var(--s2); } .milestone-title { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 700; color: var(--fg-1); margin-bottom: var(--s2); letter-spacing: 0.03em; } .milestone-desc { font-size: var(--text-sm); color: var(--fg-3); line-height: 1.5; max-width: 200px; } /* ============================================================ CONNECT TO THE GRID STRIP ============================================================ */ .connect-strip { background: var(--bg-surface); border-top: 1px solid var(--bd-subtle); border-bottom: 1px solid var(--bd-subtle); padding-block: var(--s8); } body.dark-mode .connect-strip, html.dark-mode .connect-strip { background: var(--bg-elevated); } .connect-strip-inner { display: flex; align-items: center; gap: var(--s8); flex-wrap: wrap; } .connect-strip-text { flex: 1; min-width: 200px; } .connect-strip-label { font-family: var(--font-heading); font-size: var(--text-base); font-weight: 700; color: var(--fg-1); letter-spacing: 0.03em; margin-bottom: var(--s1); } .connect-strip-hint { font-size: var(--text-sm); color: var(--fg-3); line-height: 1.5; margin: 0; } .connect-strip-fields { display: flex; gap: var(--s4); flex-wrap: wrap; flex: 2; } .connect-field { display: flex; flex-direction: column; gap: var(--s1); min-width: 180px; } .connect-field-label { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-3); } .connect-field-value { display: flex; align-items: center; gap: var(--s2); background: var(--bg-base); border: 1.5px solid var(--bd-default); border-radius: var(--r-md); padding: var(--s2) var(--s3); transition: border-color var(--ease-fast); } .connect-field-value:focus-within { border-color: var(--clr-orange); } .connect-field-value code { flex: 1; font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace; font-size: 0.8125rem; color: var(--clr-orange); background: none; padding: 0; user-select: all; /* click to select the whole URI */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .connect-copy-btn { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; background: transparent; border: 1px solid var(--bd-default); border-radius: var(--r-sm); color: var(--fg-3); font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 600; cursor: pointer; flex-shrink: 0; transition: all var(--ease-fast); white-space: nowrap; } .connect-copy-btn:hover { background: var(--clr-orange-subtle); border-color: var(--clr-orange); color: var(--clr-orange); } .connect-copy-btn.copied { background: var(--clr-orange); border-color: var(--clr-orange); color: #fff; } .connect-strip-cta { display: inline-flex; align-items: center; gap: var(--s2); padding: var(--s3) var(--s6); background: linear-gradient(135deg, var(--clr-orange-dark), var(--clr-orange)); color: #fff; border-radius: var(--r-md); font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; white-space: nowrap; flex-shrink: 0; transition: opacity var(--ease-fast), transform var(--ease-fast); box-shadow: var(--sh-md); } .connect-strip-cta:hover { opacity: 0.90; transform: translateY(-1px); color: #fff; } @media (max-width: 768px) { .connect-strip-inner { flex-direction: column; align-items: stretch; gap: var(--s5); } .connect-strip-fields { flex-direction: column; } .connect-strip-cta { text-align: center; justify-content: center; } } /* ============================================================ SECTION COMPONENTS ============================================================ */ .section { padding-block: var(--s20); } .section-alt { background: var(--bg-surface); } body.dark-mode .section-alt { background: var(--bg-elevated); } .section-header { text-align: center; margin-bottom: var(--s12); } .section-eyebrow { font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.20em; text-transform: uppercase; color: var(--clr-orange); margin-bottom: var(--s3); } .section-title { font-family: var(--font-heading); font-size: var(--text-4xl); font-weight: 700; letter-spacing: 0.03em; color: var(--fg-1); margin-bottom: var(--s4); } .section-subtitle { font-size: var(--text-lg); color: var(--fg-3); max-width: 600px; margin-inline: auto; line-height: 1.65; } .section-divider { display: flex; align-items: center; gap: var(--s4); margin-bottom: var(--s4); } .section-divider::before, .section-divider::after { content: ''; flex: 1; height: 1px; background: var(--bd-subtle); } .section-divider-icon { color: var(--clr-orange); font-size: var(--text-xl); } /* ============================================================ POST CARDS ============================================================ */ .posts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s6); } .post-card { background: var(--bg-surface); border: 1px solid var(--bd-subtle); border-radius: var(--r-xl); overflow: hidden; display: flex; flex-direction: column; transition: transform var(--ease-base), box-shadow var(--ease-base), border-color var(--ease-base); } .post-card:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); border-color: var(--bd-default); } .post-card-image { aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-elevated); position: relative; } .post-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--ease-slow); } .post-card:hover .post-card-image img { transform: scale(1.04); } .post-card-image-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--bg-elevated) 0%, var(--bg-sunken) 100%); color: var(--fg-4); } .post-card-image-placeholder svg { width: 48px; height: 48px; opacity: 0.4; } .post-card-body { padding: var(--s6); flex: 1; display: flex; flex-direction: column; } .post-card-meta { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s4); } .post-category { display: inline-flex; align-items: center; padding: 2px var(--s3); background: var(--clr-orange-subtle); color: var(--clr-orange); border: 1px solid rgba(224, 120, 32, 0.25); border-radius: var(--r-pill); font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; transition: background var(--ease-fast), color var(--ease-fast); } .post-category:hover { background: var(--clr-orange); color: #fff; } .post-date { font-size: var(--text-xs); color: var(--fg-3); font-family: var(--font-ui); letter-spacing: 0.05em; } .post-card-title { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 700; line-height: 1.3; margin-bottom: var(--s3); letter-spacing: 0.02em; } .post-card-title a { color: var(--fg-1); text-decoration: none; transition: color var(--ease-fast); } .post-card-title a:hover { color: var(--clr-orange); } .post-card-excerpt { font-size: var(--text-sm); color: var(--fg-2); line-height: 1.65; flex: 1; margin-bottom: var(--s5); } .post-card-footer { display: flex; align-items: center; justify-content: space-between; padding-top: var(--s4); border-top: 1px solid var(--bd-subtle); } .read-more { display: inline-flex; align-items: center; gap: var(--s2); font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--clr-orange); text-decoration: none; transition: gap var(--ease-fast); } .read-more:hover { gap: var(--s3); color: var(--clr-orange-light); } .read-more svg { width: 14px; height: 14px; } .post-read-time { font-size: var(--text-xs); color: var(--fg-3); font-family: var(--font-ui); } /* Featured Post Card */ .post-card-featured { grid-column: span 2; flex-direction: row; } .post-card-featured .post-card-image { flex-shrink: 0; width: 55%; aspect-ratio: auto; min-height: 280px; } .post-card-featured .post-card-title { font-size: var(--text-2xl); } /* ============================================================ SINGLE POST ============================================================ */ .single-post-hero { position: relative; height: 480px; overflow: hidden; background: var(--bg-sunken); margin-top: calc(var(--header-height) * -1); padding-top: var(--header-height); } .single-post-hero img { width: 100%; height: 100%; object-fit: cover; } .single-post-hero::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 60%; background: linear-gradient(to top, rgba(0,0,0,0.80) 0%, transparent 100%); } .single-post-hero-content { position: absolute; bottom: 0; left: 0; right: 0; padding: var(--s10) var(--s6); z-index: 2; } .single-post-hero-content .post-category { margin-bottom: var(--s4); } .single-post-title { font-family: var(--font-heading); font-size: clamp(1.75rem, 4vw, 2.75rem); font-weight: 700; color: #fff; letter-spacing: 0.03em; max-width: 780px; margin-bottom: var(--s4); text-shadow: 0 2px 12px rgba(0,0,0,0.5); } .post-meta-row { display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap; color: rgba(255,255,255,0.75); font-size: var(--text-sm); font-family: var(--font-ui); } .post-meta-row a { color: inherit; text-decoration: none; } .post-meta-row a:hover { color: var(--clr-orange-light); } .post-meta-separator { opacity: 0.40; } .single-post-content { padding-block: var(--s16); max-width: 780px; margin-inline: auto; padding-inline: var(--s6); } .single-post-content p { margin-bottom: var(--s5); } .single-post-content h2, .single-post-content h3, .single-post-content h4 { margin-top: var(--s10); margin-bottom: var(--s4); } .single-post-content h2 { padding-bottom: var(--s3); border-bottom: 2px solid var(--bd-subtle); } .single-post-content h2::before { content: ''; display: inline-block; width: 4px; height: 1em; background: var(--clr-orange); border-radius: 2px; margin-right: var(--s3); vertical-align: middle; } .single-post-content ul, .single-post-content ol { margin-bottom: var(--s5); } .single-post-content a { color: var(--clr-orange); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(224, 120, 32, 0.40); transition: text-decoration-color var(--ease-fast); } .single-post-content a:hover { text-decoration-color: var(--clr-orange); } .single-post-content img { border-radius: var(--r-lg); margin-block: var(--s6); } .post-tags { display: flex; flex-wrap: wrap; gap: var(--s2); padding-top: var(--s8); border-top: 1px solid var(--bd-subtle); margin-top: var(--s8); } .post-tag { display: inline-block; padding: var(--s1) var(--s3); background: var(--bg-elevated); border: 1px solid var(--bd-default); border-radius: var(--r-pill); font-size: var(--text-xs); color: var(--fg-2); text-decoration: none; font-family: var(--font-ui); font-weight: 500; letter-spacing: 0.04em; transition: all var(--ease-fast); } .post-tag:hover { background: var(--clr-orange-subtle); border-color: rgba(224, 120, 32, 0.35); color: var(--clr-orange); } /* Author Box */ .author-box { display: flex; gap: var(--s6); padding: var(--s8); background: var(--bg-surface); border: 1px solid var(--bd-subtle); border-radius: var(--r-xl); margin: var(--s10) auto; max-width: 780px; margin-inline: 0; } .author-avatar img { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 2px solid var(--bd-default); } .author-info h4 { font-size: var(--text-lg); font-family: var(--font-heading); margin-bottom: var(--s2); color: var(--fg-1); } .author-info p { font-size: var(--text-sm); color: var(--fg-2); margin: 0; } /* Post Navigation */ .post-navigation { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); max-width: 780px; margin-inline: 0; padding-block: var(--s8); } .post-nav-link { display: flex; flex-direction: column; padding: var(--s5) var(--s6); background: var(--bg-surface); border: 1px solid var(--bd-subtle); border-radius: var(--r-lg); text-decoration: none; transition: all var(--ease-base); } .post-nav-link:hover { border-color: var(--clr-orange); background: var(--clr-orange-subtle); transform: translateY(-2px); box-shadow: var(--sh-sm); } .post-nav-label { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--clr-orange); margin-bottom: var(--s2); } .post-nav-title { font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 600; color: var(--fg-1); line-height: 1.3; letter-spacing: 0.02em; } .post-nav-link.next-post { text-align: right; } /* ============================================================ RELATED POSTS ============================================================ */ .related-posts { padding-block: var(--s12); border-top: 1px solid var(--bd-subtle); } .related-posts .section-eyebrow { margin-bottom: var(--s8); } .related-posts .posts-grid { grid-template-columns: repeat(3, 1fr); } /* ============================================================ SIDEBAR ============================================================ */ .sidebar { position: sticky; top: calc(var(--header-height) + var(--s6)); } .widget { background: var(--bg-surface); border: 1px solid var(--bd-subtle); border-radius: var(--r-xl); padding: var(--s6); margin-bottom: var(--s6); } .widget-title { font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-1); padding-bottom: var(--s4); margin-bottom: var(--s4); border-bottom: 2px solid var(--bd-subtle); position: relative; } .widget-title::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 32px; height: 2px; background: var(--clr-orange); } .widget ul { list-style: none; padding: 0; margin: 0; } .widget ul li { padding: var(--s2) 0; border-bottom: 1px solid var(--bd-subtle); font-size: var(--text-sm); } .widget ul li:last-child { border-bottom: none; padding-bottom: 0; } .widget ul li a { color: var(--fg-2); text-decoration: none; transition: color var(--ease-fast); } .widget ul li a:hover { color: var(--clr-orange); } /* Search widgets (block or classic) render searchform.php — the block's own markup is replaced via render_block_core/search in functions.php — so the sidebar uses the same .search-form styles as the header. These rules only keep it from overflowing the narrow widget card. */ .widget .search-form { width: 100%; } .widget .search-form .search-field { min-width: 0; width: 100%; } /* ============================================================ ARCHIVE / BLOG LIST ============================================================ */ .archive-header { padding-block: var(--s12); border-bottom: 1px solid var(--bd-subtle); margin-bottom: var(--s10); } .archive-eyebrow { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.20em; text-transform: uppercase; color: var(--clr-orange); margin-bottom: var(--s3); } .archive-title { font-family: var(--font-heading); font-size: var(--text-4xl); font-weight: 700; letter-spacing: 0.03em; color: var(--fg-1); margin-bottom: var(--s4); } .archive-description { font-size: var(--text-lg); color: var(--fg-2); max-width: 600px; line-height: 1.65; } /* ============================================================ PAGINATION ============================================================ */ .pagination { display: flex; align-items: center; justify-content: center; gap: var(--s2); padding-block: var(--s10); flex-wrap: wrap; } .pagination a, .pagination .current, .pagination span { display: flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding-inline: var(--s3); border-radius: var(--r-md); font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 600; text-decoration: none; transition: all var(--ease-fast); } .pagination a { background: var(--bg-surface); border: 1px solid var(--bd-default); color: var(--fg-2); } .pagination a:hover { background: var(--clr-orange-subtle); border-color: var(--clr-orange); color: var(--clr-orange); } .pagination .current { background: var(--clr-orange); border: 1px solid var(--clr-orange); color: #fff; } .pagination .dots { background: none; border: none; color: var(--fg-3); } /* ============================================================ FORMS & COMMENTS ============================================================ */ .form-group { margin-bottom: var(--s5); } .form-label { display: block; font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.05em; color: var(--fg-2); margin-bottom: var(--s2); } .form-input, .form-textarea, .form-select { width: 100%; padding: var(--s3) var(--s4); background: var(--bg-surface); border: 1.5px solid var(--bd-default); border-radius: var(--r-md); color: var(--fg-1); font-size: var(--text-base); font-family: var(--font-body); outline: none; transition: border-color var(--ease-fast), box-shadow var(--ease-fast); -webkit-appearance: none; } .form-input:focus, .form-textarea:focus, .form-select:focus { border-color: var(--clr-orange); box-shadow: 0 0 0 3px var(--clr-orange-subtle); } .form-input::placeholder, .form-textarea::placeholder { color: var(--fg-4); } .form-textarea { resize: vertical; min-height: 140px; } /* ============================================================ DMCA TAKEDOWN FORM ([dmca_form] shortcode) ============================================================ */ .dmca-form-wrap, .contact-form-wrap { max-width: 720px; } .dmca-form-wrap h3 { margin-top: var(--s8); margin-bottom: var(--s4); padding-bottom: var(--s2); border-bottom: 1px solid var(--bd-subtle); } /* Honeypot — visually removed but still submittable by naive bots */ .dmca-hp, .form-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } .dmca-checkbox label { display: flex; gap: var(--s3); align-items: flex-start; cursor: pointer; color: var(--fg-2); font-size: var(--text-sm); line-height: 1.6; } .dmca-checkbox input[type="checkbox"] { flex-shrink: 0; width: 18px; height: 18px; margin-top: 3px; accent-color: var(--clr-orange); } .form-notice { padding: var(--s4) var(--s5); border-radius: var(--r-md); margin-bottom: var(--s6); font-size: var(--text-sm); line-height: 1.6; } .form-notice strong { display: block; margin-bottom: var(--s1); } .form-notice-success { background: var(--clr-orange-subtle); border: 1.5px solid var(--clr-orange); color: var(--fg-1); } .form-notice-error { background: color-mix(in srgb, #c0392b 10%, transparent); border: 1.5px solid #c0392b; color: var(--fg-1); } /* ============================================================ GRID HISTORY PAGE ============================================================ */ .grid-history { max-width: 780px; } .history-lede { font-size: var(--text-lg); line-height: 1.75; color: var(--fg-2); border-left: 3px solid var(--clr-orange); padding-left: var(--s5); margin-bottom: var(--s10); } .history-era { margin-top: var(--s12); margin-bottom: var(--s5); } .history-era-years { display: block; font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--clr-orange); margin-bottom: var(--s2); } .history-callout { background: var(--bg-surface); border: 1px solid var(--bd-subtle); border-left: 3px solid var(--clr-orange); border-radius: var(--r-md); padding: var(--s5) var(--s6); margin: var(--s6) 0; } .history-callout-label { display: block; font-family: var(--font-ui); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--clr-orange); margin-bottom: var(--s2); } .history-callout p { margin: 0; color: var(--fg-2); } /* ============================================================ TEAM MEMBERS PAGE ============================================================ */ .team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s6); margin-top: var(--s8); } .team-card { background: var(--bg-surface); border: 1px solid var(--bd-subtle); border-radius: var(--r-lg, var(--r-md)); padding: var(--s8) var(--s6); text-align: center; transition: transform var(--ease-fast), box-shadow var(--ease-fast); } .team-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); } /* Featured (founder) card — spans the full row, horizontal on desktop */ .team-card-featured { grid-column: 1 / -1; display: flex; gap: var(--s8); align-items: center; text-align: left; padding: var(--s8); } .team-card-featured .team-photo { flex-shrink: 0; } @media (max-width: 640px) { .team-card-featured { flex-direction: column; text-align: center; } } .team-photo { width: 140px; height: 140px; border-radius: 50%; object-fit: cover; border: 3px solid var(--clr-orange); margin-inline: auto; } .team-card-featured .team-photo { width: 180px; height: 180px; } /* Silhouette placeholder for unfilled positions */ .team-photo-placeholder { width: 140px; height: 140px; border-radius: 50%; margin-inline: auto; display: flex; align-items: center; justify-content: center; background: var(--bg-base); border: 3px dashed var(--bd-default); color: var(--fg-4); } .team-photo-placeholder svg { width: 64px; height: 64px; } .team-role { display: block; font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--clr-orange); margin-top: var(--s5); } .team-card h3 { margin-top: var(--s2); margin-bottom: var(--s3); } .team-bio { font-size: var(--text-sm); color: var(--fg-2); line-height: 1.7; margin-bottom: var(--s4); } .team-contact { display: inline-flex; align-items: center; gap: var(--s2); font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 600; color: var(--clr-orange); text-decoration: none; } .team-contact:hover { text-decoration: underline; } /* Open-position variant */ .team-card-open { border-style: dashed; border-color: var(--bd-default); background: transparent; } .team-card-open:hover { transform: none; box-shadow: none; } .team-card-open .team-role { color: var(--fg-3); } /* ============================================================ FAQ PAGE (accordion via native
) ============================================================ */ .faq-list { max-width: 780px; } .faq-list h2 { margin-top: var(--s10); margin-bottom: var(--s5); padding-bottom: var(--s2); border-bottom: 1px solid var(--bd-subtle); } .faq-item { background: var(--bg-surface); border: 1px solid var(--bd-subtle); border-radius: var(--r-md); margin-bottom: var(--s3); overflow: hidden; transition: border-color var(--ease-fast); } .faq-item[open] { border-color: var(--clr-orange); } .faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding: var(--s4) var(--s5); cursor: pointer; font-family: var(--font-ui); font-weight: 600; font-size: var(--text-base); color: var(--fg-1); list-style: none; transition: color var(--ease-fast); } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary:hover { color: var(--clr-orange); } /* Plus sign that rotates into an X when open */ .faq-item summary::after { content: "+"; flex-shrink: 0; font-size: 1.4rem; font-weight: 400; line-height: 1; color: var(--clr-orange); transition: transform var(--ease-fast); } .faq-item[open] summary::after { transform: rotate(45deg); } .faq-answer { padding: 0 var(--s5) var(--s5); color: var(--fg-2); line-height: 1.7; } .faq-answer p { margin-bottom: var(--s3); } .faq-answer p:last-child { margin-bottom: 0; } /* ============================================================ ABOUT PAGE ============================================================ */ .about-pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s5); margin: var(--s8) 0; } .about-pillar { background: var(--bg-surface); border: 1px solid var(--bd-subtle); border-left: 3px solid var(--clr-orange); border-radius: var(--r-md); padding: var(--s5) var(--s6); } .about-pillar h3 { font-size: var(--text-base); margin-bottom: var(--s2); } .about-pillar p { font-size: var(--text-sm); color: var(--fg-2); line-height: 1.65; margin: 0; } .feature-checklist { list-style: none; padding: 0; margin: var(--s6) 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--s2) var(--s8); } .feature-checklist li { position: relative; padding-left: var(--s6); color: var(--fg-2); line-height: 1.7; } .feature-checklist li::before { content: "\2713"; position: absolute; left: 0; color: var(--clr-orange); font-weight: 700; } /* ============================================================ GET LAND — PRICING CARDS ============================================================ */ .land-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s5); margin-top: var(--s8); } .land-card { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; background: var(--bg-surface); border: 1px solid var(--bd-subtle); border-radius: var(--r-lg, var(--r-md)); padding: var(--s7) var(--s5) var(--s6); transition: transform var(--ease-fast), box-shadow var(--ease-fast), border-color var(--ease-fast); } .land-card:hover { transform: translateY(-4px); border-color: var(--clr-orange); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.10); } .land-card-name { font-family: var(--font-ui); font-size: var(--text-base); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-1); margin-bottom: var(--s2); } .land-card-spec { font-size: var(--text-sm); color: var(--fg-3); line-height: 1.6; margin-bottom: var(--s4); } .land-card-price { font-family: var(--font-ui); font-size: 2.25rem; font-weight: 700; color: var(--clr-orange); line-height: 1; margin-bottom: var(--s1); } .land-card-period { font-size: 0.75rem; color: var(--fg-4); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: var(--s5); } .land-card .btn { width: 100%; margin-top: auto; } /* "Most Popular" ribbon — add class land-card-featured to a card, plus a Most Popular inside it */ .land-card-featured { border-color: var(--clr-orange); border-width: 2px; } .land-card-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--clr-orange); color: #fff; font-family: var(--font-ui); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 14px; border-radius: 999px; white-space: nowrap; } /* WordPress comment form */ #respond { margin-top: var(--s10); } #respond h3 { font-family: var(--font-heading); font-size: var(--text-2xl); margin-bottom: var(--s6); color: var(--fg-1); } #respond input[type="text"], #respond input[type="email"], #respond input[type="url"], #respond textarea { width: 100%; padding: var(--s3) var(--s4); background: var(--bg-surface); border: 1.5px solid var(--bd-default); border-radius: var(--r-md); color: var(--fg-1); font-family: var(--font-body); font-size: var(--text-base); outline: none; transition: border-color var(--ease-fast), box-shadow var(--ease-fast); margin-bottom: var(--s4); } #respond input[type="text"]:focus, #respond input[type="email"]:focus, #respond input[type="url"]:focus, #respond textarea:focus { border-color: var(--clr-orange); box-shadow: 0 0 0 3px var(--clr-orange-subtle); } #respond textarea { min-height: 160px; resize: vertical; } #respond label { display: block; font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 600; color: var(--fg-2); margin-bottom: var(--s2); letter-spacing: 0.04em; } #respond .comment-form-cookies-consent label { display: inline; font-weight: 400; font-size: var(--text-sm); letter-spacing: 0; } #respond input[type="submit"] { background: linear-gradient(135deg, var(--clr-orange-dark) 0%, var(--clr-orange) 60%, var(--clr-orange-light) 100%); color: #fff; border: none; padding: var(--s4) var(--s10); border-radius: var(--r-md); font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; box-shadow: var(--sh-md); transition: all var(--ease-base); } #respond input[type="submit"]:hover { opacity: 0.90; transform: translateY(-1px); box-shadow: var(--sh-accent); } /* Comment List */ .comment-list { list-style: none; padding: 0; margin: 0 0 var(--s8); } .comment { display: flex; gap: var(--s5); padding-block: var(--s6); border-bottom: 1px solid var(--bd-subtle); } .comment:last-child { border-bottom: none; } .comment-avatar img { width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0; border: 2px solid var(--bd-default); } .comment-body { flex: 1; } .comment-author-name { font-family: var(--font-ui); font-weight: 600; font-size: var(--text-base); color: var(--fg-1); margin-bottom: var(--s1); } .comment-meta-date { font-size: var(--text-xs); color: var(--fg-3); font-family: var(--font-ui); margin-bottom: var(--s3); } .comment-content p { font-size: var(--text-sm); color: var(--fg-2); margin-bottom: var(--s2); } .comment-reply-link { font-size: var(--text-xs); font-family: var(--font-ui); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--clr-orange); } .children { list-style: none; padding-left: var(--s10); border-left: 2px solid var(--bd-subtle); margin-left: var(--s4); margin-top: var(--s4); } /* ============================================================ ABOUT / HISTORY SECTION ============================================================ */ .history-section { position: relative; overflow: hidden; } .history-content { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s16); align-items: center; } .history-text h2 { font-family: var(--font-heading); font-size: var(--text-4xl); font-weight: 700; letter-spacing: 0.03em; color: var(--fg-1); margin-bottom: var(--s4); } .history-text h2 em { font-style: normal; color: var(--clr-orange); } .history-text p { color: var(--fg-2); line-height: 1.8; } .history-timeline { display: flex; flex-direction: column; gap: var(--s6); } .timeline-item { display: flex; gap: var(--s5); align-items: flex-start; } .timeline-dot { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--clr-orange-subtle); border: 2px solid var(--clr-orange); display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 700; color: var(--clr-orange); letter-spacing: 0.04em; } .timeline-body h4 { font-family: var(--font-heading); font-size: var(--text-base); font-weight: 700; color: var(--fg-1); margin-bottom: var(--s1); letter-spacing: 0.04em; } .timeline-body p { font-size: var(--text-sm); color: var(--fg-3); margin: 0; line-height: 1.55; } /* ============================================================ CTA SECTION ============================================================ */ .cta-section { background: linear-gradient(135deg, #0A0A0A 0%, #141210 100%); padding-block: var(--s20); text-align: center; position: relative; overflow: hidden; } .cta-section::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(224, 120, 32, 0.10) 0%, transparent 70%); pointer-events: none; } .cta-section * { position: relative; z-index: 1; } .cta-title { font-family: var(--font-heading); font-size: var(--text-4xl); font-weight: 700; letter-spacing: 0.04em; color: var(--clr-silver-bright); margin-bottom: var(--s4); } .cta-subtitle { font-size: var(--text-lg); color: rgba(196, 196, 196, 0.70); max-width: 560px; margin-inline: auto; margin-bottom: var(--s8); line-height: 1.65; } /* ============================================================ PAGE TEMPLATES ============================================================ */ .page-header { padding-block: var(--s16); background: var(--bg-surface); border-bottom: 1px solid var(--bd-subtle); } .page-header-inner { max-width: 780px; } .page-header-eyebrow { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.20em; text-transform: uppercase; color: var(--clr-orange); margin-bottom: var(--s3); } .page-title { font-family: var(--font-heading); font-size: clamp(1.75rem, 5vw, 3rem); font-weight: 700; letter-spacing: 0.03em; color: var(--fg-1); margin-bottom: var(--s4); } .page-content { padding-block: var(--s12); } /* ============================================================ 404 PAGE ============================================================ */ .error-404 { min-height: 70vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--s16); } .error-404-inner { max-width: 540px; } .error-number { font-family: var(--font-heading); font-size: clamp(6rem, 20vw, 10rem); font-weight: 700; letter-spacing: 0.05em; line-height: 1; background: linear-gradient(135deg, var(--clr-orange-dark) 0%, var(--clr-orange) 50%, var(--clr-orange-light) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: var(--s4); } .error-404-title { font-family: var(--font-heading); font-size: var(--text-3xl); font-weight: 700; letter-spacing: 0.03em; color: var(--fg-1); margin-bottom: var(--s4); } .error-404-message { font-size: var(--text-lg); color: var(--fg-2); margin-bottom: var(--s8); line-height: 1.65; } /* ============================================================ SEARCH RESULTS ============================================================ */ .search-results-header { padding-block: var(--s12); border-bottom: 1px solid var(--bd-subtle); margin-bottom: var(--s8); } .search-results-count { font-size: var(--text-sm); color: var(--fg-3); font-family: var(--font-ui); margin-bottom: var(--s2); letter-spacing: 0.04em; } .search-results-query { font-family: var(--font-heading); font-size: var(--text-3xl); color: var(--fg-1); margin-bottom: 0; } .search-results-query em { font-style: normal; color: var(--clr-orange); } /* ============================================================ FOOTER ============================================================ */ .site-footer { background: #0A0A0A; border-top: 1px solid rgba(40, 40, 38, 0.60); position: relative; } body:not(.dark-mode) .site-footer { background: #141210; border-top-color: rgba(60, 58, 54, 0.60); } .site-footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, var(--clr-orange) 25%, var(--clr-orange-light) 50%, var(--clr-orange) 75%, transparent 100%); opacity: 0.60; } .footer-main { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: var(--s10); padding-block: var(--s16); } .footer-brand .footer-logo { max-width: 180px; margin-bottom: var(--s5); filter: brightness(0.90); } .footer-brand .footer-tagline { font-size: var(--text-sm); color: rgba(168, 168, 164, 0.80); line-height: 1.7; margin-bottom: var(--s6); } .footer-social { display: flex; gap: var(--s3); } .footer-social a { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--r-md); background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.10); color: rgba(168, 168, 164, 0.80); transition: all var(--ease-fast); } .footer-social a:hover { background: var(--clr-orange-subtle); border-color: rgba(224, 120, 32, 0.40); color: var(--clr-orange); } .footer-social a svg { width: 16px; height: 16px; } .footer-col h4 { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--clr-silver-bright); margin-bottom: var(--s5); padding-bottom: var(--s3); border-bottom: 1px solid rgba(255,255,255,0.08); } .footer-col ul { list-style: none; padding: 0; margin: 0; } .footer-col ul li { margin-bottom: var(--s3); } .footer-col ul li a { font-size: var(--text-sm); color: rgba(168, 168, 164, 0.75); text-decoration: none; transition: color var(--ease-fast); font-family: var(--font-body); } .footer-col ul li a:hover { color: var(--clr-orange-light); } .footer-bottom { display: flex; align-items: center; justify-content: space-between; padding-block: var(--s6); border-top: 1px solid rgba(255,255,255,0.06); flex-wrap: wrap; gap: var(--s4); } .footer-copyright { font-size: var(--text-xs); color: rgba(104, 104, 100, 0.90); font-family: var(--font-ui); letter-spacing: 0.04em; } .footer-copyright a { color: rgba(168, 168, 164, 0.70); } .footer-copyright a:hover { color: var(--clr-orange); } .footer-links { display: flex; gap: var(--s5); } .footer-links a { font-size: var(--text-xs); color: rgba(104, 104, 100, 0.90); text-decoration: none; font-family: var(--font-ui); letter-spacing: 0.06em; transition: color var(--ease-fast); } .footer-links a:hover { color: var(--clr-orange); } /* ============================================================ BLOCK EDITOR SUPPORT ============================================================ */ .alignleft { float: left; margin-right: var(--s6); margin-bottom: var(--s4); } .alignright { float: right; margin-left: var(--s6); margin-bottom: var(--s4); } .aligncenter { display: block; margin-inline: auto; margin-bottom: var(--s4); } .alignwide { width: calc(100% + var(--s16)); margin-inline: calc(var(--s8) * -1); max-width: none; } .alignfull { width: 100vw; margin-inline: calc(50% - 50vw); max-width: 100vw; } .wp-caption { max-width: 100%; } .wp-caption-text { font-size: var(--text-sm); color: var(--fg-3); text-align: center; padding-top: var(--s2); font-style: italic; } .gallery { display: grid; gap: var(--s3); } .gallery-columns-2 { grid-template-columns: repeat(2, 1fr); } .gallery-columns-3 { grid-template-columns: repeat(3, 1fr); } .gallery-columns-4 { grid-template-columns: repeat(4, 1fr); } .gallery-item img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-md); } /* ============================================================ LOADING / SKELETON ============================================================ */ @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .skeleton { background: linear-gradient(90deg, var(--bg-elevated) 25%, var(--bg-sunken) 50%, var(--bg-elevated) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: var(--r-md); } /* ============================================================ RESPONSIVE — TABLET ============================================================ */ @media (max-width: 1024px) { .posts-grid { grid-template-columns: repeat(2, 1fr); } .post-card-featured { grid-column: span 2; flex-direction: column; } .post-card-featured .post-card-image { width: 100%; } .footer-main { grid-template-columns: 1fr 1fr; gap: var(--s8); } .history-content { grid-template-columns: 1fr; gap: var(--s10); } .milestones-grid { gap: 0; } } @media (max-width: 900px) { .content-area { grid-template-columns: 1fr; } .sidebar { position: static; } } /* ============================================================ RESPONSIVE — MOBILE ============================================================ */ @media (max-width: 768px) { :root { --header-height: 64px; } .primary-nav { display: none; } .menu-toggle { display: flex; } h1 { font-size: var(--text-3xl); } h2 { font-size: var(--text-2xl); } h3 { font-size: var(--text-xl); } .posts-grid { grid-template-columns: 1fr; } .post-card-featured { grid-column: span 1; } .milestones-grid { grid-template-columns: 1fr; } .milestone-item + .milestone-item::before { display: none; } .milestone-item { padding: var(--s5) var(--s6); border-bottom: 1px solid var(--bd-subtle); } .milestone-item:last-child { border-bottom: none; } .footer-main { grid-template-columns: 1fr; gap: var(--s8); } .footer-brand { margin-bottom: var(--s4); } .hero-cta { flex-direction: column; align-items: stretch; } .hero-cta .btn { text-align: center; justify-content: center; } .single-post-hero { height: 320px; } .post-navigation { grid-template-columns: 1fr; } .post-nav-link.next-post { text-align: left; } .author-box { flex-direction: column; } .history-content { gap: var(--s8); } .footer-bottom { flex-direction: column; text-align: center; } .container { padding-inline: var(--s4); } } @media (max-width: 480px) { .hero-heading { font-size: clamp(1.75rem, 8vw, 2.5rem); } .milestone-icon { width: 40px; height: 40px; } .milestones-grid { grid-template-columns: 1fr; } } /* ============================================================ SEARCH FORM (standalone) ============================================================ */ .search-form { display: flex; gap: var(--s2); position: relative; } .search-form .search-field { flex: 1; padding: var(--s3) var(--s4); background: var(--bg-surface); border: 1.5px solid var(--bd-default); border-radius: var(--r-md); color: var(--fg-1); font-family: var(--font-body); font-size: var(--text-base); outline: none; transition: border-color var(--ease-fast), box-shadow var(--ease-fast); -webkit-appearance: none; appearance: none; } .search-form .search-field:focus { border-color: var(--clr-orange); box-shadow: 0 0 0 3px var(--clr-orange-subtle); } .search-form .search-field::placeholder { color: var(--fg-4); } .search-form .search-submit { display: flex; align-items: center; justify-content: center; gap: 4px; min-width: 52px; height: 44px; flex-shrink: 0; background: var(--clr-orange); color: #fff; border: none; border-radius: var(--r-md); cursor: pointer; transition: opacity var(--ease-fast), transform var(--ease-fast); } .search-form .search-submit:hover { opacity: 0.88; transform: scale(1.04); } /* ============================================================ NAV ARROW ICON ============================================================ */ .primary-nav .nav-arrow { display: inline-block; width: 10px; height: 6px; margin-left: var(--s1); vertical-align: middle; transition: transform var(--ease-fast); flex-shrink: 0; } .primary-nav li:hover > a .nav-arrow, .primary-nav li:focus-within > a .nav-arrow { transform: rotate(180deg); } /* ============================================================ ANIMATE ON SCROLL UTILITY ============================================================ */ .animate-on-scroll { opacity: 0; transform: translateY(24px); transition: opacity var(--ease-slow), transform var(--ease-slow); } .animate-on-scroll.is-visible { opacity: 1; transform: translateY(0); } /* Delay helpers */ .delay-1 { transition-delay: 0.1s; } .delay-2 { transition-delay: 0.2s; } .delay-3 { transition-delay: 0.3s; } .delay-4 { transition-delay: 0.4s; } .delay-5 { transition-delay: 0.5s; } /* ============================================================ GETTING STARTED / REGION CALLOUT BAND ============================================================ */ .callout-band { background: var(--clr-orange-subtle); border: 1px solid rgba(224, 120, 32, 0.25); border-radius: var(--r-xl); padding: var(--s8) var(--s10); display: flex; align-items: center; justify-content: space-between; gap: var(--s6); flex-wrap: wrap; } .callout-band-text h3 { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 700; color: var(--fg-1); margin-bottom: var(--s2); } .callout-band-text p { font-size: var(--text-sm); color: var(--fg-2); margin: 0; } /* ============================================================ GRID STAT BOXES ============================================================ */ .grid-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s4); } .grid-stat { background: var(--bg-surface); border: 1px solid var(--bd-subtle); border-radius: var(--r-lg); padding: var(--s6); text-align: center; } .grid-stat-number { font-family: var(--font-heading); font-size: var(--text-3xl); font-weight: 700; color: var(--clr-orange); letter-spacing: 0.02em; line-height: 1; margin-bottom: var(--s2); } .grid-stat-label { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-3); } @media (max-width: 768px) { .grid-stats { grid-template-columns: repeat(2, 1fr); } } /* ============================================================ WORDPRESS ADMIN BAR COMPATIBILITY When logged in, WordPress adds a 32px (desktop) or 46px (mobile) admin bar fixed at the top with z-index 99999. Our header must shift down so it isn't hidden behind it. ============================================================ */ .admin-bar .site-header { top: 32px; } /* When the admin bar is showing, the hero's viewport calculation must also subtract the admin bar height */ .admin-bar .hero { min-height: calc(100vh - var(--header-height) - 32px); } /* Admin bar collapses to 46px on mobile (≤782px) */ @media screen and (max-width: 782px) { .admin-bar .site-header { top: 46px; } .admin-bar .hero { min-height: calc(100vh - var(--header-height) - 46px); } } /* WordPress hides the admin bar entirely below 600px — restore our header to top: 0 at that width */ @media screen and (max-width: 600px) { .admin-bar .site-header { top: 0; } .admin-bar .hero { min-height: calc(100vh - var(--header-height)); } } /* ============================================================ PERFORMANCE: CSS CONTAINMENT Limits layout/paint/style scope so the browser can skip unaffected subtrees during re-renders. ============================================================ */ .post-card { contain: layout style; } .widget { contain: layout style; } .milestone-item { contain: layout style; } .timeline-item { contain: layout style; } .footer-col { contain: layout style; } /* below-the-fold sections can be skipped until they scroll into view */ .history-section, .related-posts, .cta-section, .milestones-strip { content-visibility: auto; contain-intrinsic-size: 0 400px; } /* ============================================================ PERFORMANCE: HARDWARE-ACCELERATED ANIMATIONS ONLY ============================================================ */ .post-card, .post-nav-link, .btn, .hero-logo { will-change: transform; } /* Reset will-change after hover to free GPU memory */ .post-card:not(:hover), .post-nav-link:not(:hover), .btn:not(:hover) { will-change: auto; } /* ============================================================ ACCESSIBILITY: PREFERS-REDUCED-MOTION Users who have requested reduced motion get instant transitions and no decorative animations. This also benefits performance. ============================================================ */ @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; } .hero-logo { animation: none; } .hero-eyebrow, .hero-heading, .hero-sub, .hero-cta { animation: none; opacity: 1; transform: none; } .animate-on-scroll { opacity: 1; transform: none; transition: none; } .post-card:hover { transform: none; } .post-nav-link:hover { transform: none; } .btn-primary:hover { transform: none; } } /* ============================================================ FLUID TYPOGRAPHY — clamp() across the full type scale Minimum at 320px viewport, maximum at 1200px viewport. ============================================================ */ :root { --text-base-fluid: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem); --text-lg-fluid: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); --text-xl-fluid: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); --text-2xl-fluid: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem); --text-3xl-fluid: clamp(1.5rem, 1.2rem + 1.5vw, 1.875rem); --text-4xl-fluid: clamp(1.75rem, 1.3rem + 2vw, 2.25rem); --text-5xl-fluid: clamp(2rem, 1.5rem + 2.5vw, 3rem); --text-hero-fluid: clamp(1.75rem, 1.2rem + 3vw, 3.5rem); } body { font-size: var(--text-base-fluid); } h1 { font-size: var(--text-4xl-fluid); } h2 { font-size: var(--text-3xl-fluid); } h3 { font-size: var(--text-2xl-fluid); } .hero-heading { font-size: var(--text-hero-fluid); } .section-title { font-size: var(--text-4xl-fluid); } .archive-title { font-size: var(--text-4xl-fluid); } /* ============================================================ RESPONSIVE — LARGE DESKTOP (1440px+) Loosen the container to fill ultra-wide screens better ============================================================ */ @media (min-width: 1440px) { :root { --container: 1280px; } .hero-content { max-width: 960px; } .hero-logo { max-width: 780px; } .posts-grid { grid-template-columns: repeat(3, 1fr); } } /* ============================================================ RESPONSIVE — TABLET LANDSCAPE (1024px and below) ============================================================ */ @media (max-width: 1024px) { .posts-grid { grid-template-columns: repeat(2, 1fr); } .post-card-featured { grid-column: span 2; flex-direction: column; } .post-card-featured .post-card-image { width: 100%; min-height: 240px; } .post-card-featured .post-card-title { font-size: var(--text-xl-fluid); } .footer-main { grid-template-columns: 1fr 1fr; gap: var(--s8); } .history-content { grid-template-columns: 1fr; gap: var(--s10); } .grid-stats { grid-template-columns: repeat(4, 1fr); } .content-area { gap: var(--s8); } } /* ============================================================ RESPONSIVE — TABLET PORTRAIT / sidebar collapse (900px) ============================================================ */ @media (max-width: 900px) { .content-area { grid-template-columns: 1fr; } .content-area.no-sidebar { max-width: none; } .sidebar { position: static; } .primary-nav ul li ul { display: none; } /* prevent hover flicker on touch */ } /* ============================================================ RESPONSIVE — MOBILE LANDSCAPE / large phones (768px) ============================================================ */ @media (max-width: 768px) { :root { --header-height: 60px; } .primary-nav { display: none; } .menu-toggle { display: flex; } .posts-grid { grid-template-columns: 1fr; gap: var(--s5); } .post-card-featured { grid-column: span 1; } .milestones-grid { grid-template-columns: 1fr; } .milestone-item + .milestone-item::before { display: none; } .milestone-item { padding: var(--s5) var(--s6); border-bottom: 1px solid var(--bd-subtle); } .milestone-item:last-child { border-bottom: none; } .footer-main { grid-template-columns: 1fr; gap: var(--s8); } .footer-brand { margin-bottom: var(--s4); } .footer-bottom { flex-direction: column; text-align: center; } .hero { padding-block: var(--s16) var(--s12); min-height: 80vh; } .hero-cta { flex-direction: column; align-items: stretch; } .hero-cta .btn { text-align: center; justify-content: center; } .single-post-hero { height: 280px; } .post-navigation { grid-template-columns: 1fr; } .post-nav-link.next-post { text-align: left; } .author-box { flex-direction: column; align-items: flex-start; } .grid-stats { grid-template-columns: repeat(2, 1fr); } .callout-band { flex-direction: column; text-align: center; } .container { padding-inline: var(--s4); } /* Ensure all tap targets meet 44 × 44px minimum */ .header-btn, .primary-nav ul li a, .mobile-nav-menu ul li a, .post-category, .read-more, .pagination a, .pagination .current, .btn { min-height: 44px; } .header-btn { width: 44px; height: 44px; } } /* ============================================================ RESPONSIVE — SMALL PHONES (480px) ============================================================ */ @media (max-width: 480px) { :root { --header-height: 56px; } .hero-logo { max-width: 90vw; } .milestones-grid { grid-template-columns: 1fr; } .milestone-icon { width: 40px; height: 40px; } .section { padding-block: var(--s12); } .history-section { padding-block: var(--s12); } .cta-section { padding-block: var(--s12); } .page-header { padding-block: var(--s10); } .single-post-hero { height: 220px; } .error-number { font-size: clamp(5rem, 20vw, 8rem); } .footer-main { gap: var(--s6); } .footer-col h4 { margin-bottom: var(--s3); } } /* ============================================================ RESPONSIVE — MINIMUM SUPPORTED WIDTH (375px — iPhone SE 3) ============================================================ */ @media (max-width: 375px) { html { font-size: 15px; } /* slightly smaller root keeps layouts intact */ .container { padding-inline: var(--s3); } .hero-content { padding-inline: var(--s4); } .hero-cta .btn { padding: var(--s3) var(--s6); font-size: 0.8rem; } .btn-lg { padding: var(--s3) var(--s8); font-size: 0.875rem; } .footer-social a { width: 32px; height: 32px; } } /* ============================================================ RESPONSIVE — VERY SMALL (320px — Galaxy A2 / older devices) ============================================================ */ @media (max-width: 320px) { html { font-size: 14px; } .hero-logo { max-width: 92vw; } .milestone-title { font-size: var(--text-base); } .section-title { font-size: var(--text-2xl); } .btn-lg { padding: var(--s3) var(--s5); } .hero { padding-block: var(--s12) var(--s8); min-height: 70vh; } } /* ============================================================ RESPONSIVE: TOUCH — ensure :hover only activates on pointer devices ============================================================ */ @media (hover: none) { .post-card:hover { transform: none; box-shadow: var(--sh-sm); } .btn-primary:hover { opacity: 1; transform: none; } /* Touch devices: disable CSS hover dropdowns — mobile drawer handles navigation */ .primary-nav ul li:hover > ul { opacity: 0; visibility: hidden; pointer-events: none; transition: none; /* no delay on touch — instant collapse */ } } /* ============================================================ RESPONSIVE: FORCED COLORS (Windows High Contrast Mode) ============================================================ */ @media (forced-colors: active) { .btn-primary, .btn-secondary { border: 2px solid ButtonText; } .post-category { border: 1px solid ButtonText; } .site-header { border-bottom: 1px solid ButtonBorder; } .theme-toggle .icon-sun, .theme-toggle .icon-moon { forced-color-adjust: auto; } } /* ============================================================ DARK MODE TOGGLE — visible in both modes, prominent enough ============================================================ */ .theme-toggle { position: relative; } /* Orange ring on hover/focus to make it discoverable */ .theme-toggle:hover, .theme-toggle:focus-visible { border-color: var(--clr-orange) !important; background: var(--clr-orange-subtle) !important; color: var(--clr-orange) !important; } /* Dark-mode indicator dot under the toggle */ .theme-toggle::after { content: ''; position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--clr-orange); opacity: 0; transition: opacity var(--ease-fast); } body.dark-mode .theme-toggle::after, html.dark-mode .theme-toggle::after { opacity: 1; } /* ============================================================ PRINT ============================================================ */ @media print { .site-header, .site-footer, .sidebar, .post-navigation, .related-posts, #respond { display: none !important; } body { font-size: 12pt; color: #000; background: #fff; } a { color: #000; text-decoration: underline; } a[href]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; } img { max-width: 100% !important; } h1, h2, h3 { page-break-after: avoid; } .site-main { padding-top: 0; } }