{/* Base — TOD-aware sky scene canvas */}

{/* Plains horizon — sense of place */} {/* Single dominant wash — anchors a clear light direction */}

{/* Edition mark only — no big "midwest" word, no state silhouette, no grid, no crosshair register marks. */} {/* Soft film grain — kept, but quieter than before */}

")`, backgroundSize:'220px 220px' }}/> {/* Slow horizontal scan line */}

{/* Soft vignette — just enough to focus eye, not a heavy frame */}

); } function CornerMark({ corner }) { const pos = { nw: { top:24, left:24, borderTop:'1px solid var(--border-strong)', borderLeft:'1px solid var(--border-strong)' }, ne: { top:24, right:24, borderTop:'1px solid var(--border-strong)', borderRight:'1px solid var(--border-strong)' }, sw: { bottom:24, left:24, borderBottom:'1px solid var(--border-strong)', borderLeft:'1px solid var(--border-strong)' }, se: { bottom:24, right:24, borderBottom:'1px solid var(--border-strong)', borderRight:'1px solid var(--border-strong)' }, }[corner]; return

; } function TypedVerb({ mounted, words }) { const [wi, setWi] = useStHr(0); const [chars, setChars] = useStHr(''); useEfHr(() => { if (!mounted) return; const word = words[wi]; let i = 0; setChars(''); const timers = []; const type = setInterval(() => { i++; setChars(word.slice(0,i)); if(i>=word.length){ clearInterval(type); timers.push(setTimeout(()=>{ let e=word.length; const er=setInterval(()=>{ e--; setChars(word.slice(0,e)); if(e<=0){ clearInterval(er); timers.push(setTimeout(()=>setWi(w=>(w+1)%words.length),120)); } },55); timers.push(er); },1900)); } },75); timers.push(type); return () => { timers.forEach(t => { clearInterval(t); clearTimeout(t); }); }; }, [wi, mounted]); // Reserve enough inline-width for the longest word so the line never reflows. const longest = words.reduce((a,b)=>a.length>=b.length?a:b, ''); return ( {chars} ); } function HeroLine({ children, delay = 0, mounted }) { return ( {children} ); } function Hero({ tod }) { const [time, setTime] = useStHr(() => new Date()); const [mounted, setMounted] = useStHr(false); const [stripScrolled, setStripScrolled] = useStHr(false); useEfHr(() => { const tick = setInterval(() => setTime(new Date()), 1000); const m = setTimeout(() => setMounted(true), 80); const fn = () => setStripScrolled(window.scrollY > 60); fn(); window.addEventListener('scroll', fn, {passive:true}); return () => { clearInterval(tick); clearTimeout(m); window.removeEventListener('scroll', fn); }; }, []); const hhmm = time.toLocaleTimeString('en-US', { hour12:false, timeZone:'America/Chicago' }); return (

{/* Sub-strip. The .mw-strip class lets globals.css collapse the three-column layout into a single centered line below 640px, where the long flanking spans wrap into multi-line panels and eat ~20% of the viewport. Side spans carry .mw-strip-side so the same media query can hide them; the center carries .mw-strip-center so it re-centers when alone. Desktop layout (>=768px) is unchanged — the inline gridTemplateColumns wins there because the media query doesn't apply. */}

35.47°N · 97.52°W — OKLAHOMA STATE LIVE · {hhmm} CT · {tod.toUpperCase()} SERVING OKC METRO & BEYOND

{/* Main content */}

{/* Left — headline */}

OKLAHOMA'S WEBSITE STUDIO | {(() => { /* Auto-derive "BOOKING " from the studio's local time (America/Chicago). Lead by one month so the label advertises the NEXT season, not the one we're already in. May 3 → June → SUMMER. Dec → next Jan → next-year WINTER. Using Intl.DateTimeFormat with an explicit timezone keeps the label deterministic across visitors — without it, a viewer in Asia or Europe near a month boundary could see a different season or year than someone in Oklahoma. */ const fmt = new Intl.DateTimeFormat('en-US', { timeZone: 'America/Chicago', month: 'numeric', year: 'numeric', }); const parts = fmt.formatToParts(new Date()); const monthPart = parts.find((p) => p.type === 'month'); const yearPart = parts.find((p) => p.type === 'year'); const m0 = monthPart ? Number(monthPart.value) - 1 : 0; const y0 = yearPart ? Number(yearPart.value) : new Date().getFullYear(); let m = m0 + 1; let y = y0; if (m > 11) { m = 0; y += 1; } const season = m <= 1 ? 'WINTER' : m <= 4 ? 'SPRING' : m <= 7 ? 'SUMMER' : m <= 10 ? 'FALL' : 'WINTER'; return `BOOKING ${season} ${y}`; })()}

A website your customers actually{' '}

Oklahoma's website studio. We build custom websites for service businesses, retailers, and real estate professionals in OKC and across the country — no templates, no Squarespace, no platform tax.

Lawn care, hydraulic shops, restaurants, real estate — whatever your trade, we hand-build a website in Oklahoma City that gets you found on Google and converts visitors into phone calls. No templates. No Squarespace. Code we write, a site you own.

Show up on Google. Look good on every device. Want a smart helper that talks to customers 24/7? We can wire that in too.

Get a free quote See our work

{/* Right — stat cards (removed; can be reintroduced later) */}

); } Object.assign(window, { Hero, HeroShader });