/* ============================================================================ * Little Farm · POLISH OVERLAY (non-destructive, opt-in) * Layers on TOP of app.css. Nothing here changes unless . * data-polish="depth" — direction A: depth, light, refined motion * data-polish="crisp" — direction B: A + legibility (crisper glass, punchier ink) * Both respect the file's rules: glass fills, the two skins, the contrast budget. * ==========================================================================*/ /* ---- 1. ELEVATION: swap the single soft shadow for a layered light model ---- * The "flat" read comes from every surface sharing one diffuse shadow. Real * depth needs a tight contact shadow + a wide ambient one, tuned per skin. */ :root[data-polish="depth"][data-lights="on"], :root[data-polish="crisp"][data-lights="on"] { --shadow: 0 1px 2px rgba(46,66,42,.16), 0 10px 22px -10px rgba(46,66,42,.30), 0 34px 56px -26px rgba(46,66,42,.40); --shadow-sm: 0 1px 2px rgba(46,66,42,.14), 0 5px 14px -7px rgba(46,66,42,.30); --glass-top: rgba(255,255,255,.55); } :root[data-polish="depth"][data-lights="off"], :root[data-polish="crisp"][data-lights="off"] { --shadow: 0 1px 2px rgba(0,0,0,.34), 0 12px 26px -10px rgba(0,0,0,.44), 0 38px 60px -28px rgba(0,0,0,.52); --shadow-sm: 0 1px 2px rgba(0,0,0,.32), 0 6px 16px -8px rgba(0,0,0,.44); --glass-top: rgba(255,255,255,.14); } /* ---- 2. GLASS EDGES: a brighter top light + a soft bottom shade so panels * read as objects with thickness, not printed rectangles. ---------------------*/ :root[data-polish] .glass, :root[data-polish] .pot-card, :root[data-polish] .alert-card { box-shadow: var(--shadow-sm), inset 0 1px 0 var(--glass-top), inset 0 -14px 26px -18px rgba(30,45,30,.20); } :root[data-polish] .hero { box-shadow: var(--shadow), inset 0 1px 0 var(--glass-top), inset 0 -18px 34px -22px rgba(30,45,30,.22); } :root[data-polish][data-lights="off"] .glass, :root[data-polish][data-lights="off"] .pot-card, :root[data-polish][data-lights="off"] .alert-card, :root[data-polish][data-lights="off"] .hero { border-color: color-mix(in srgb, var(--line) 82%, transparent); } /* ---- 3. HERO: give the headline surface a faint top-light sheen so the * verdict sits on the brightest plane on the page (hierarchy anchor). --------*/ :root[data-polish] .hero::after { content: none; /* leave the weather wash pseudo intact — we add sheen on a child */ } :root[data-polish] .hero { background-image: radial-gradient(120% 80% at 22% -10%, color-mix(in srgb, var(--glass-top) 60%, transparent), transparent 55%), linear-gradient(180deg, color-mix(in srgb, var(--card) var(--glass-a), transparent), color-mix(in srgb, var(--card) var(--glass-a), transparent)); } /* ---- 4. MOTION: springier hover lift + a real pressed state on the cards, * and a soft sheen sweep on pot cards. Honors reduced-motion (base file * already zeroes .reveal there; these are hover-only, safe). -----------------*/ @media (prefers-reduced-motion: no-preference) { :root[data-polish] .pot-card, :root[data-polish] .card { transition: transform .32s cubic-bezier(.2,.8,.25,1), box-shadow .32s ease, border-color .25s ease, background-color .25s ease; will-change: transform; } :root[data-polish] .pot-card:hover { transform: translateY(-5px); box-shadow: var(--shadow), inset 0 1px 0 var(--glass-top), inset 0 -14px 26px -18px rgba(30,45,30,.18); } :root[data-polish] .pot-card:active { transform: translateY(-1px) scale(.995); } /* diagonal sheen that sweeps once on hover — reads as light catching glass */ :root[data-polish] .pot-card { position: relative; } :root[data-polish] .pot-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(115deg, transparent 30%, color-mix(in srgb, #fff 30%, transparent) 47%, transparent 60%); background-size: 220% 100%; background-position: 140% 0; opacity: 0; transition: opacity .3s ease; } :root[data-polish] .pot-card:hover::after { opacity: 1; animation: polishSheen .8s ease forwards; } @keyframes polishSheen { to { background-position: -40% 0; } } /* entrance: a hair more spring + a gentle stagger read (cards already reveal) */ :root[data-polish] .reveal { transition: opacity .6s ease, transform .6s cubic-bezier(.2,.85,.3,1); transform: translateY(20px); } :root[data-polish] .reveal.in { transform: none; } } /* ---- 5. SECTION RHYTHM: a short accent tick before each eyebrow so the eye * catches the start of every block — cheap, strong hierarchy cue. ------------*/ :root[data-polish] .eyebrow, :root[data-polish] .card h3 { display: inline-flex; align-items: center; gap: 8px; } :root[data-polish] .eyebrow::before, :root[data-polish] .card h3::before { content: ""; width: 14px; height: 2px; border-radius: 2px; flex: none; background: linear-gradient(90deg, var(--leaf), var(--leaf-deep)); } /* ==== DIRECTION B ONLY · "crisp" — legibility on top of depth ===============*/ /* Slightly more opaque glass (numbers stop fighting the weather wash) and one * step more ink on the small mono labels. Stays inside the glass-not-opacity * rule — we raise the FILL's alpha, never the box opacity. */ :root[data-polish="crisp"][data-lights="on"] { --glass-a: 74%; } :root[data-polish="crisp"][data-lights="off"] { --glass-a: 80%; } :root[data-polish="crisp"] .stat-k, :root[data-polish="crisp"] .eyebrow, :root[data-polish="crisp"] .card h3, :root[data-polish="crisp"] .day-ticks, :root[data-polish="crisp"] .band-legend { color: var(--ink-soft); } :root[data-polish="crisp"] .stat-v { color: var(--ink); } /* a touch more weight on the hero sub + verdict for punch */ :root[data-polish="crisp"] .verdict-sub { color: var(--ink-soft); }