/* ============================================================ Grovera Farms — /css/polish.css Premium motion & design enhancement layer Scoped to — additive only, never destructive. Respects prefers-reduced-motion. Safe to drop in; remove data-polish to disable instantly. ============================================================ */ /* ---------- design tokens (scoped, do not override existing) ---------- */ body[data-polish="on"] { --p-green-deep: #1F3D2B; --p-green: #2F6A3E; --p-green-soft: #A9C9A4; --p-terracotta: #B5643C; --p-cream: #F6F1E7; --p-ivory: #FDFBF5; --p-ink: #1A1A1A; --p-muted: #5F5A4D; --p-grain-opacity: 0.035; --p-radius-lg: 20px; --p-ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --p-ease-spring: cubic-bezier(0.34, 1.3, 0.64, 1); --p-reveal-y: 28px; --p-reveal-dur: 900ms; /* fallback for older browsers without color-mix */ --p-focus: 3px solid #D89478; --p-focus-offset: 3px; } @supports (background: color-mix(in oklab, red, blue)) { body[data-polish="on"] { --p-focus: 3px solid color-mix(in oklab, var(--p-terracotta) 60%, white); } } /* ---------- subtle film grain — DISABLED on data-polish="on" (GPU-cheap version only on opt-in data-polish="max") ---------- */ body[data-polish="max"]::before { content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: var(--p-grain-opacity); mix-blend-mode: multiply; background-image: url("data:image/svg+xml;utf8,"); background-size: 220px; } /* ---------- global focus ring (WCAG 2.2 AA compliant) ---------- */ body[data-polish="on"] a:focus-visible, body[data-polish="on"] button:focus-visible, body[data-polish="on"] input:focus-visible, body[data-polish="on"] select:focus-visible, body[data-polish="on"] textarea:focus-visible, body[data-polish="on"] [tabindex]:focus-visible { outline: var(--p-focus); outline-offset: var(--p-focus-offset); border-radius: 6px; } /* ---------- skip-to-main (add markup; styled here) ---------- */ body[data-polish="on"] .skip-link { position: absolute; left: -9999px; top: 8px; z-index: 10000; background: var(--p-green-deep); color: #fff; padding: 10px 18px; border-radius: 10px; font-weight: 700; text-decoration: none; } body[data-polish="on"] .skip-link:focus { left: 14px; } /* ---------- reveal / stagger system ---------- */ body[data-polish="on"] [data-reveal] { opacity: 0; transform: translate3d(0, var(--p-reveal-y), 0); transition: opacity var(--p-reveal-dur) var(--p-ease-out), transform var(--p-reveal-dur) var(--p-ease-out); will-change: transform, opacity; } body[data-polish="on"] [data-reveal].is-in { opacity: 1; transform: none; } body[data-polish="on"] [data-reveal-group] > * { opacity: 0; transform: translate3d(0, var(--p-reveal-y), 0); transition: opacity var(--p-reveal-dur) var(--p-ease-out), transform var(--p-reveal-dur) var(--p-ease-out); } body[data-polish="on"] [data-reveal-group].is-in > *:nth-child(1) { transition-delay: 0ms; } body[data-polish="on"] [data-reveal-group].is-in > *:nth-child(2) { transition-delay: 80ms; } body[data-polish="on"] [data-reveal-group].is-in > *:nth-child(3) { transition-delay: 160ms; } body[data-polish="on"] [data-reveal-group].is-in > *:nth-child(4) { transition-delay: 240ms; } body[data-polish="on"] [data-reveal-group].is-in > *:nth-child(5) { transition-delay: 320ms; } body[data-polish="on"] [data-reveal-group].is-in > *:nth-child(6) { transition-delay: 400ms; } body[data-polish="on"] [data-reveal-group].is-in > *:nth-child(n) { opacity: 1; transform: none; } /* ---------- magnetic button ---------- */ body[data-polish="on"] [data-magnetic] { position: relative; transition: transform 300ms var(--p-ease-spring); will-change: transform; } /* ---------- editorial section numbering ---------- */ body[data-polish="on"] [data-section-num]::before { content: attr(data-section-num); display: block; font-family: "DM Serif Display", Georgia, serif; font-size: 0.86rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--p-terracotta); margin-bottom: 14px; opacity: 0.9; } /* ---------- cursor glow — DISABLED on data-polish="on"; only active on explicit data-polish="max" (heavy: follows mouse via rAF with 40px blur + mix-blend-mode, known cause of cursor lag) ---------- */ @media (hover: hover) and (pointer: fine) { body[data-polish="max"] #polish-cursor { position: fixed; top: 0; left: 0; width: 280px; height: 280px; transform: translate3d(-50%, -50%, 0); pointer-events: none; z-index: 0; mix-blend-mode: screen; background: radial-gradient(circle at center, rgba(169, 201, 164, 0.35) 0%, transparent 60%); filter: blur(40px); opacity: 0; transition: opacity 400ms var(--p-ease-out); will-change: transform; } body[data-polish="max"].polish-cursor-live #polish-cursor { opacity: 1; } } /* ---------- number counter style ---------- */ body[data-polish="on"] [data-count] { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* ---------- line-clamp utilities ---------- */ body[data-polish="on"] .clamp-2, body[data-polish="on"] .clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } body[data-polish="on"] .clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; } body[data-polish="on"] .clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; } /* ---------- fluid heading scale (additive utility) ---------- */ body[data-polish="on"] .h-display { font-family: "DM Serif Display", Georgia, serif; font-size: clamp(2.4rem, 5.2vw, 4.8rem); line-height: 1.05; letter-spacing: -0.01em; } body[data-polish="on"] .h-eyebrow { font-family: "Plus Jakarta Sans", system-ui, sans-serif; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--p-terracotta); } /* ---------- trust-mark strip (optional lockup) ---------- */ body[data-polish="on"] .trust-strip { display: flex; gap: 28px; align-items: center; justify-content: center; flex-wrap: wrap; padding: 22px 5%; background: var(--p-ivory); border-top: 1px solid #EAE3D2; border-bottom: 1px solid #EAE3D2; } body[data-polish="on"] .trust-strip .mark { font-size: 0.78rem; color: var(--p-muted); font-weight: 600; letter-spacing: 0.05em; display: inline-flex; align-items: center; gap: 8px; } /* ---------- parallax hooks (controlled by JS) ---------- */ body[data-polish="on"] [data-parallax] { will-change: transform; } /* ---------- smooth scroll (only if user hasn't requested reduced motion) ---------- */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* ---------- reduced motion override (kill switch) ---------- */ @media (prefers-reduced-motion: reduce) { body[data-polish="on"] *, body[data-polish="on"] *::before, body[data-polish="on"] *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } body[data-polish="on"] [data-reveal], body[data-polish="on"] [data-reveal-group] > * { opacity: 1 !important; transform: none !important; } body[data-polish="on"] #polish-cursor { display: none; } body[data-polish="on"]::before { display: none; } } /* ---------- print polish ---------- */ @media print { body[data-polish="on"]::before, body[data-polish="on"] #polish-cursor, body[data-polish="on"] [data-reveal], body[data-polish="on"] [data-reveal-group] > * { opacity: 1 !important; transform: none !important; display: block !important; } body[data-polish="on"] #polish-cursor { display: none !important; } }