/* ============================================================ 2026 visual polish — additive layer, loaded last. Keeps the original concept; refines type, depth, and the dropdown. Delete this file + its to fully revert. ============================================================ */ html, body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* "Sources >" pill — same format as the Home button on sources.html. */ .navPill { display: inline-flex; align-items: center; gap: 5px; padding: 8px 11px 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); color: #06280c; text-decoration: none; font-family: "Exo", sans-serif; font-weight: 700; font-size: 15px; letter-spacing: 0.3px; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: background 0.2s ease, transform 0.2s ease; } .navPill:hover { background: rgba(255, 255, 255, 0.34); transform: translateX(2px); } .navPill svg { display: block; } /* Richer, more dimensional green backdrop with a soft vignette (inset shadow paints under the floating bills + counter). */ .area { background: radial-gradient(125% 125% at 50% 18%, #8dffa0 0%, #25d44a 42%, #0c9a2e 78%, #077a25 100%); box-shadow: inset 0 0 240px rgba(0, 38, 12, 0.38); } /* Counter: steady digits with a cleaner, softer drop shadow. */ .moneyclass { font-variant-numeric: tabular-nums; text-shadow: 0 3px 14px rgba(0, 35, 10, 0.4); } /* The dollar sign: deep green with a soft green fade/glow. */ .dollarSign { color: #196619; text-shadow: 0 0 24px rgba(13, 220, 60, 0.85), 0 0 9px rgba(20, 255, 0, 0.5), 1px 2px 3px rgba(0, 40, 12, 0.4); } .netWorth { letter-spacing: 1px; } .ifstate { opacity: 0.92; letter-spacing: 0.4px; font-size: 0.34em; } @media only screen and (max-width: 750px) { /* Tone down the dollar-sign glow on phones (it's too much there). */ .dollarSign { text-shadow: 0 0 9px rgba(13, 220, 60, 0.55), 1px 1px 2px rgba(0, 40, 12, 0.35); } .ifstate { font-size: 0.4em; } } /* "I am ___" heading — a hair more refined. */ .holder .wrapper { text-shadow: 0 2px 10px rgba(0, 40, 12, 0.18); } .holder .placeholder { border-bottom-width: 3px; transition: color 0.25s ease; } /* ---- Top-left: obvious "click me" affordance ---- */ .clickIcon { animation: clickBob 1.3s ease-in-out infinite; } @keyframes clickBob { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(5px, 5px); } } .clickHint { display: block; margin-top: 8px; margin-left: 2px; font-family: "Exo", sans-serif; font-size: 15px; font-weight: 700; color: #0c451b; letter-spacing: 0.3px; } /* Custom SVG arrow (inherits the hint color, identical on every device). */ .hintArrow { display: inline-block; vertical-align: 0.5px; margin-left: -3px; transform: scaleX(-1); } .hintArrow svg { display: block; } @media only screen and (max-width: 750px) { .clickHint { font-size: 12px; margin-top: 5px; } } /* ---- Top-right: make reset read as a button with press feedback ---- */ .topRight { opacity: 0.85; outline: none; -webkit-tap-highlight-color: transparent; /* Transition opacity/filter only — never transform, so the spin doesn't flick back to a hover/resting angle when it finishes. */ transition: opacity 0.15s ease, filter 0.15s ease; } .topRight:focus { outline: none; } @media (hover: hover) { /* Glow + brighten so it's obvious the button is being hovered. */ .topRight:hover { opacity: 1; filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.9)) brightness(1.2); } } /* Press feedback on click/tap — a clean scale-down, clears on release. */ .topRight:active { opacity: 1; transform: scale(0.78); } /* Confirmation spin fired from reseter() on every reset. */ .topRight.spinning { animation: resetSpin 0.5s cubic-bezier(0.34, 1.4, 0.5, 1); } @keyframes resetSpin { 0% { transform: rotate(0deg) scale(1); } 35% { transform: rotate(-160deg) scale(0.72); } 100% { transform: rotate(-360deg) scale(1); } } .resetHint { position: fixed; top: 60px; right: 14px; font-family: "Exo", sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: rgba(255, 255, 255, 0.92); text-shadow: 0 1px 4px rgba(0, 40, 12, 0.55); z-index: 9999; pointer-events: none; } @media only screen and (max-width: 750px) { /* Bigger tap target, label tucked right beneath it. */ .topRight { width: 26px; top: 14px; right: 12px; } .resetHint { top: 43px; right: 9px; font-size: 10px; letter-spacing: 0.5px; } } /* ---- Money rain: real bills, 3D tumble, parallax depth ---- */ .circles li { background-color: transparent; background-size: contain; background-repeat: no-repeat; background-position: center; border-radius: 0; filter: drop-shadow(0 8px 14px rgba(0, 40, 12, 0.28)) blur(0.7px); animation-name: floatMoney; animation-timing-function: linear; will-change: transform, opacity; } /* Faster, steady durations so bills sail off-screen without crawling or pausing (overrides the slow 18s/35s/45s values in animated.css). */ .circles li:nth-child(1) { animation-duration: 7s; } .circles li:nth-child(2) { animation-duration: 5.5s; } .circles li:nth-child(3) { animation-duration: 6.5s; } .circles li:nth-child(4) { animation-duration: 8s; } .circles li:nth-child(5) { animation-duration: 5s; } .circles li:nth-child(6) { animation-duration: 9s; } .circles li:nth-child(7) { animation-duration: 6s; } .circles li:nth-child(8) { animation-duration: 7.5s; } .circles li:nth-child(9) { animation-duration: 6.8s; } .circles li:nth-child(10) { animation-duration: 9.5s; } /* Real US bills (public-domain Wikimedia Commons scans), mixed across the ten. */ .circles li:nth-child(1) { background-image: url(../img/real-100.png); } .circles li:nth-child(2) { background-image: url(../img/real-1.jpg); } .circles li:nth-child(3) { background-image: url(../img/real-20.jpg); } .circles li:nth-child(4) { background-image: url(../img/real-50.jpg); } .circles li:nth-child(5) { background-image: url(../img/real-5.jpg); } .circles li:nth-child(6) { background-image: url(../img/real-10.jpg); } .circles li:nth-child(7) { background-image: url(../img/real-20.jpg); } .circles li:nth-child(8) { background-image: url(../img/real-1.jpg); } .circles li:nth-child(9) { background-image: url(../img/real-100.png); } .circles li:nth-child(10) { background-image: url(../img/real-50.jpg); } /* Re-size the bills: no more tiny specks, with parallax variety. Heights stay near the real ~2.35:1 bill ratio. The far/small ones get a touch of blur for depth of field. */ .circles li:nth-child(1) { width: 150px; height: 64px; } .circles li:nth-child(2) { width: 92px; height: 39px; filter: drop-shadow(0 6px 10px rgba(0,40,12,.24)) blur(1.2px); } .circles li:nth-child(3) { width: 112px; height: 48px; } .circles li:nth-child(4) { width: 132px; height: 56px; } .circles li:nth-child(5) { width: 84px; height: 36px; filter: drop-shadow(0 6px 10px rgba(0,40,12,.24)) blur(1.3px); } .circles li:nth-child(6) { width: 172px; height: 73px; } .circles li:nth-child(7) { width: 104px; height: 44px; } .circles li:nth-child(8) { width: 96px; height: 41px; filter: drop-shadow(0 6px 10px rgba(0,40,12,.24)) blur(1.2px); } .circles li:nth-child(9) { width: 124px; height: 53px; } .circles li:nth-child(10) { width: 188px; height: 80px; } /* Bills flutter and sway upward like real paper money drifting on a breeze: side-to-side swing + a soft wobble (never edge-on), with parallax scale. */ @keyframes floatMoney { 0% { transform: translateY(-122vh) translateX(0) rotate(-8deg) scale(0.9); opacity: 0; } 10% { opacity: 0.58; } 25% { transform: translateY(-88vh) translateX(26px) rotate(9deg) scale(0.96); } 50% { transform: translateY(-55vh) translateX(-20px) rotate(-8deg) scale(1.02); } 75% { transform: translateY(-22vh) translateX(22px) rotate(7deg) scale(1.08); } 88% { opacity: 0.58; } 100% { transform: translateY(8vh) translateX(-6px) rotate(-3deg) scale(1.12); opacity: 0; } } @media only screen and (max-width: 750px) { .area { box-shadow: inset 0 0 140px rgba(0, 38, 12, 0.34); } /* Scale the bills down on phones but keep them readable. */ .circles li:nth-child(1) { width: 62px; height: 26px; } .circles li:nth-child(2) { width: 42px; height: 18px; } .circles li:nth-child(3) { width: 50px; height: 21px; } .circles li:nth-child(4) { width: 58px; height: 25px; } .circles li:nth-child(5) { width: 40px; height: 17px; } .circles li:nth-child(6) { width: 72px; height: 31px; } .circles li:nth-child(7) { width: 46px; height: 20px; } .circles li:nth-child(8) { width: 44px; height: 19px; } .circles li:nth-child(9) { width: 54px; height: 23px; } .circles li:nth-child(10) { width: 78px; height: 33px; } /* Smaller "Sources" link on phones, anchored so it isn't clipped at the edge and raised to sit level with the "Buy me a coffee" button on the right. */ .bottomlefter a { font-size: 11px !important; } .bottomleft { margin-left: 2px; transform-origin: left bottom; bottom: 10px; } }