/* LANCER FARMS & GARDENS — THEME ENGINE v1 Four themes via [data-theme] on . Sun mode via [data-vis="high"]. Craft layer via body.craft. Phosphor scanlines via [data-scanlines="on"]. Contrast-hardened per WCAG AA audit (citrus text-orange, night nav, 14px floor). */ :root, [data-theme="inland"] { --bg: #2C1A0E; --surface: #F5EFE0; --surface2: #FDFAF4; --mist: #EAE4D4; --ink: #2C1A0E; --ink-soft: #4A2E1A; --on-bg: #F5EFE0; --on-bg-soft: #C8A96E; --accent: #3D6B45; --accent-2: #7A9E7E; --on-accent: #F5EFE0; --alert: #B85C2A; --on-alert: #FDF1E8; --font-head: Georgia, serif; --font-body: 'Source Sans 3', 'Helvetica Neue', sans-serif; --radius: 10px; --border-w: 1.5px; } [data-theme="citrus"] { --bg: #FFF7E8; --surface: #FFFFFF; --surface2: #FFFFFF; --mist: #FDEBD2; --ink: #5A3517; --ink-soft: #9c6b3f; --on-bg: #5A3517; --on-bg-soft: #A65A14; --accent: #E8862F; --accent-2: #6B8F3D; --on-accent: #3d2008; --alert: #C84B2A; --on-alert: #fdeae4; } [data-theme="night"] { --bg: #0E1810; --surface: #1A2A1E; --surface2: #1A2A1E; --mist: #2c4233; --ink: #DCE8DA; --ink-soft: #8FB896; --on-bg: #DCE8DA; --on-bg-soft: #7d9a83; --accent: #4F7A58; --accent-2: #8FB896; --on-accent: #0E1810; --alert: #D88A5C; --on-alert: #2b1608; } [data-theme="phosphor"] { --bg: #0A0E0A; --surface: #0A0E0A; --surface2: #102a14; --mist: #1d3b1d; --ink: #33FF66; --ink-soft: #1f9e44; --on-bg: #33FF66; --on-bg-soft: #1f9e44; --accent: #33FF66; --accent-2: #1f9e44; --on-accent: #0A0E0A; --alert: #FFB000; --on-alert: #332600; --font-head: 'Courier New', monospace; --font-body: 'Courier New', monospace; --radius: 3px; } /* Sun mode — high-visibility override. Theme accent survives, surfaces go max-contrast. */ [data-vis="high"] { --bg: #FDFDFB; --surface: #FFFFFF; --surface2: #FFFFFF; --mist: #e8e8e2; --ink: #141a15; --ink-soft: #2b332d; --on-bg: #141a15; --on-bg-soft: #3a463d; --on-accent: #FFFFFF; --alert: #8a1f00; --on-alert: #FFFFFF; --border-w: 2px; } [data-vis="high"][data-theme="inland"] { --accent: #2e4f34; --accent-2: #2e4f34; } [data-vis="high"][data-theme="citrus"] { --accent: #8a4410; --accent-2: #4a6328; } [data-vis="high"][data-theme="night"] { --accent: #2e5238; --accent-2: #2e5238; } [data-vis="high"][data-theme="phosphor"] { --accent: #0c5f28; --accent-2: #0c5f28; --font-head: Georgia, serif; --font-body: 'Source Sans 3', sans-serif; --radius: 10px; } [data-vis="high"] body { font-weight: 500; } [data-vis="high"] .card, [data-vis="high"] .btn { border-width: 2px !important; } [data-vis="high"] .craft-tilt { transform: none !important; } * { box-sizing: border-box; margin: 0; padding: 0; } html { background: var(--bg); } body { font-family: var(--font-body); color: var(--on-bg); background: var(--bg); min-height: 100vh; font-size: 16px; line-height: 1.6; transition: background-color .45s ease, color .45s ease; } h1, h2, h3 { font-family: var(--font-head); font-weight: 500; } body { font-size: max(14px, 1em); } .shell { max-width: 640px; margin: 0 auto; padding: 24px 18px 64px; } .site-header { text-align: center; padding: 16px 0 4px; } .site-header h1 { color: var(--on-bg); font-size: 22px; letter-spacing: 2px; } .site-header .tag { color: var(--on-bg-soft); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; } [data-theme="phosphor"] .site-header h1 { text-transform: uppercase; letter-spacing: 3px; } .card { background: var(--surface2); color: var(--ink); border: var(--border-w) solid var(--ink); border-radius: var(--radius); padding: 16px 18px; margin: 12px 0; display: block; text-decoration: none; } .card h2 { color: var(--ink); font-size: 17px; } .card p { color: var(--ink-soft); font-size: 14px; margin-top: 3px; } .card.primary { background: var(--accent); border-color: var(--accent); } .card.primary h2, .card.primary p { color: var(--on-accent); } [data-theme="phosphor"] .card.primary { background: var(--surface2); border-color: var(--accent); } [data-theme="phosphor"] .card.primary h2 { color: var(--accent); } [data-theme="phosphor"] .card.primary p { color: var(--ink-soft); } .btn { display: inline-block; background: var(--accent); color: var(--on-accent); border: var(--border-w) solid var(--accent); border-radius: calc(var(--radius) - 4px); font-family: var(--font-body); font-size: 14px; letter-spacing: 1px; padding: 11px 22px; cursor: pointer; text-decoration: none; } .btn.ghost { background: transparent; color: var(--ink); border-color: var(--ink); } .gate-screen .btn.ghost, .mood-screen .btn.ghost { color: var(--on-bg); border-color: var(--on-bg); } .stamp { display: inline-block; border: var(--border-w) solid var(--alert); color: var(--alert); font-size: 11px; letter-spacing: 1.5px; padding: 4px 10px; border-radius: 3px; font-weight: 600; text-transform: uppercase; } /* ── Craft layer ─────────────────────────────────────────── */ body.craft .craft-tilt:nth-child(3n+1) { transform: rotate(calc(var(--tilt, 0.35deg) * -1)); } body.craft .craft-tilt:nth-child(3n) { transform: rotate(var(--tilt, 0.35deg)); } body.craft .craft-stamp { transform: rotate(-1.2deg); } body.craft .rule { height: 10px; border: none; background-repeat: no-repeat; background-size: 100% 100%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 560 10' preserveAspectRatio='none'%3E%3Cpath d='M8,5 C60,3.4 110,6.2 170,4.8 S 280,3.6 340,5.4 S 460,6 552,4.4' fill='none' stroke='%23888' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E"); opacity: .8; } body:not(.craft) .rule { height: 1px; background: var(--mist); border: none; } [data-theme="phosphor"] body.craft .craft-tilt, [data-theme="phosphor"] .craft-tilt { transform: none !important; } /* ── Phosphor scanlines (config-gated) ───────────────────── */ [data-theme="phosphor"][data-scanlines="on"] body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9999; background: repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px); } [data-vis="high"] body::after { display: none; } /* ── Gate & mood screens ─────────────────────────────────── */ .overlay-screen { position: fixed; inset: 0; background: var(--bg); z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px; transition: opacity .4s ease, transform .4s ease; } .overlay-screen.leaving { opacity: 0; transform: scale(.96); pointer-events: none; } .panel { width: 100%; max-width: 380px; text-align: center; } .panel input[type="password"], .panel textarea { width: 100%; background: var(--surface2); color: var(--ink); border: var(--border-w) solid var(--ink); border-radius: calc(var(--radius) - 4px); font-family: var(--font-body); font-size: 16px; padding: 11px 12px; margin: 10px 0; } .gate-msg { font-size: 13px; color: var(--alert); min-height: 1.4em; } .mood-box { position: relative; width: 300px; height: 300px; max-width: 100%; border: var(--border-w) solid #C8A96E; border-radius: 14px; overflow: hidden; cursor: pointer; touch-action: none; margin: 8px auto; background: #FDFAF4; } .mood-box .mq { position: absolute; width: 50%; height: 50%; } .mood-box .mq-tl { left: 0; top: 0; background: #D0FBD4; } .mood-box .mq-tr { right: 0; top: 0; background: #F8DDC3; } .mood-box .mq-bl { left: 0; bottom: 0; background: #A6AAA2; } .mood-box .mq-br { right: 0; bottom: 0; background: #DAE1D4; } .mood-box .plot-grid { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, transparent 0 29px, rgba(44,26,14,0.10) 29px 30px), repeating-linear-gradient(90deg, transparent 0 29px, rgba(44,26,14,0.10) 29px 30px); } .mood-box .vline { position: absolute; left: 50%; top: 0; bottom: 0; width: 1.5px; background: rgba(44,26,14,0.5); } .mood-box .hline { position: absolute; top: 50%; left: 0; right: 0; height: 1.5px; background: rgba(44,26,14,0.5); } .mood-box .mw { position: absolute; width: 50%; text-align: center; pointer-events: none; font-family: Georgia, serif; font-style: italic; font-size: 13px; font-weight: 600; } .mood-box .mw-tl { left: 0; top: 20%; color: #0a3d1a; } .mood-box .mw-tr { right: 0; top: 20%; color: #6b3408; } .mood-box .mw-bl { left: 0; bottom: 20%; color: #1e3326; } .mood-box .mw-br { right: 0; bottom: 20%; color: #1e3326; } .mood-box .dot { position: absolute; width: 18px; height: 18px; border-radius: 50%; background: #F5EFE0; border: 3px solid #2C1A0E; transform: translate(-50%,-50%); display: none; pointer-events: none; } .mood-box .dot.show { display: block; animation: pulse .3s ease; } .mood-greet { font-family: Georgia, serif; font-style: italic; font-size: 14px; color: var(--on-bg); margin-top: 10px; min-height: 1.4em; } @keyframes pulse { 0% { transform: translate(-50%,-50%) scale(.4); } 70% { transform: translate(-50%,-50%) scale(1.25);} 100% { transform: translate(-50%,-50%) scale(1);} } .axis { font-size: 12px; color: var(--on-bg-soft); } .axis-row { display: flex; align-items: center; gap: 8px; } .axis-row .axis { writing-mode: vertical-rl; } .axis-row .axis.flip { transform: rotate(180deg); } /* ── Sun toggle & feedback tab ───────────────────────────── */ .sun-toggle { position: fixed; top: 14px; right: 14px; z-index: 50; width: 42px; height: 42px; border-radius: 50%; background: var(--surface2); color: var(--ink); border: var(--border-w) solid var(--ink); font-size: 20px; cursor: pointer; line-height: 1; } [data-vis="high"] .sun-toggle { background: #141a15; color: #FDFDFB; border-color: #141a15; } .fb-tab { position: fixed; bottom: 18px; right: 14px; z-index: 50; background: var(--surface2); color: var(--ink); border: var(--border-w) solid var(--ink); border-radius: calc(var(--radius) - 2px); font-size: 13px; letter-spacing: 1px; padding: 9px 16px; cursor: pointer; font-family: var(--font-body); } .fb-panel { position: fixed; bottom: 64px; right: 14px; z-index: 60; width: min(320px, calc(100vw - 28px)); background: var(--surface2); color: var(--ink); border: var(--border-w) solid var(--ink); border-radius: var(--radius); padding: 14px; display: none; text-align: left; } .fb-panel.open { display: block; } .fb-panel label { font-size: 11px; letter-spacing: 1.5px; color: var(--ink-soft); text-transform: uppercase; } .fb-panel .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } .fb-status { font-size: 12px; color: var(--ink-soft); min-height: 1.3em; margin-top: 6px; } .site-footer { text-align: center; margin-top: 40px; font-size: 13px; color: var(--on-bg-soft); } .site-footer a { color: var(--on-bg-soft); } .sr-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } @media (prefers-reduced-motion: reduce) { *, body { transition: none !important; animation: none !important; } .overlay-screen { transition: none; } }