/* Earno marketing site, shared layer. Source of pixel truth: website_handoff_earno (compiled pages). The rebuild keeps the design's per-element inline styles verbatim in the HTML; this file holds only what is genuinely shared: fonts, keyframes, the data-attribute hover/media systems, and the few site-wide element rules. Do NOT restyle; every value here is lifted from the handoff (or from the shipped coming-soon page where its fix is strictly better, see .shoot). */ /* Fonts: self-hosted, same files the coming-soon page shipped (GDPR-clean, no runtime CDN). Weight 400 is never used by the design; 500-800 cover every style. */ @font-face { font-family: "Plus Jakarta Sans"; src: url("/fonts/PlusJakartaSans-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Plus Jakarta Sans"; src: url("/fonts/PlusJakartaSans-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Plus Jakarta Sans"; src: url("/fonts/PlusJakartaSans-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Plus Jakarta Sans"; src: url("/fonts/PlusJakartaSans-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; } html { scroll-behavior: smooth; } body { margin: 0; -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* Balanced headline wrapping: translated headlines are longer than the English design and used to strand a single word on its own line. EN keeps its designed
breaks (balance then changes nothing); fr/es/pt/de headlines have no hard break and let the engine even the lines out. */ h1, h2 { text-wrap: balance; } /* Night pages (home, wins) set these on via .night; legal pages use .paper. */ body.night { background: #16132C; color: #F7F3EA; } body.paper { background: #F7F3EA; color: #2C2A5A; } html.night { background: #16132C; } html.paper { background: #F7F3EA; } ::selection { background: #3ED598; color: #123B2C; } /* Link styling differs by page family (handoff: mint on night pages, green + underline-on-hover on legal pages). */ body.night a { color: #3ED598; text-decoration: none; } body.night a:hover { color: #A9F5CF; } body.paper a { color: #17A673; text-decoration: none; } body.paper a:hover { color: #14A97C; } /* Underline-on-hover is a legal-page BODY affordance only (the handoff's legal pages); the shared footer and header on those pages keep the night-page behavior. */ .doc a:hover { text-decoration: underline; } a { transition: color 0.2s ease, background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease, filter 0.25s ease; } /* ---- Hover system (verbatim from the handoff) ---- */ [data-hov="ios"]:hover { box-shadow: 0 14px 40px rgba(62, 213, 152, 0.6) !important; filter: brightness(1.08); transform: translateY(-2px); } [data-hov="ghost"]:hover { background: rgba(247, 243, 234, 0.22) !important; border-color: rgba(247, 243, 234, 0.6) !important; transform: translateY(-2px); } [data-hov="badge"]:hover { border-color: #3ED598 !important; box-shadow: 0 10px 30px rgba(62, 213, 152, 0.4); transform: translateY(-2px); } [data-hov="link"]:hover { color: #3ED598 !important; } /* The wordmark never underlines, and never inherits the paper-page underline-on-hover. */ [data-wordmark]:hover, [data-wordmark] { text-decoration: none !important; border-bottom: none !important; color: #F7F3EA; } /* ---- Keyframes (verbatim from the handoff; shoot uses the shipped anti-freeze form) ---- */ @keyframes twinkle { 0%, 100% { opacity: 0.15; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.15); } } @keyframes aurora1 { 0% { transform: translate3d(-12%, 1%, 0) rotate(-10deg) scaleY(0.9); } 50% { transform: translate3d(13%, 6%, 0) rotate(-2deg) scaleY(1.45); } 100% { transform: translate3d(-8%, -4%, 0) rotate(-11deg) scaleY(0.85); } } @keyframes aurora2 { 0% { transform: translate3d(10%, -2%, 0) rotate(9deg) scaleY(1.25); } 50% { transform: translate3d(-13%, 6%, 0) rotate(1deg) scaleY(0.8); } 100% { transform: translate3d(12%, -4%, 0) rotate(10deg) scaleY(1.35); } } @keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @keyframes blink { 0%, 91%, 100% { transform: scaleY(1); } 94% { transform: scaleY(0.06); } } @keyframes shoot { 0% { transform: translate3d(0, 0, 0) rotate(18deg); opacity: 0; } 4% { opacity: 0.9; } 9%, 100% { transform: translate3d(46vw, 14vh, 0) rotate(18deg); opacity: 0; } } @keyframes floatCoin { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-14px) rotate(5deg); } } /* The "More" scroll cue's chevron. The full bob rises 10px, which crossed into the label above it; the cue nudges DOWNWARD instead, away from the text and in the direction it invites you to go. */ @keyframes cueNudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } } @keyframes winSlosh { 0% { transform: rotate(-1.7deg); } 50% { transform: rotate(1.7deg); } 100% { transform: rotate(-1.7deg); } } @keyframes winSloshSlow { 0% { transform: rotate(1.2deg); } 50% { transform: rotate(-1.2deg); } 100% { transform: rotate(1.2deg); } } /* The traveling crest of the win-card water (matches the app's WaterScene phase loop: linear, one full wave period per cycle, moving left). The svg is 3 periods wide; -1/3 = one period. */ @keyframes waveTravel { to { transform: translateX(-33.3333%); } } /* Twinkling star dot. Position/size/duration/delay are inline per star (baked from the design's seeded PRNG so the field is identical to the handoff's). */ .tw { position: absolute; border-radius: 999px; background: #D9D5F2; box-shadow: 0 0 6px rgba(199, 195, 232, 0.9); animation: twinkle 4s ease-in-out infinite; } /* Shooting star. THE ANTI-FREEZE FIX (commit bb711a5 on the shipped coming-soon page, strictly better than the handoff's JS-only restart): base opacity 0 hides the streak whenever no animation state applies, and the inline animations use fill-mode BOTH so the 0% frame (also opacity 0) covers the initial delay. Without this the element sits fully visible as a frozen streak until its first cycle. site.js additionally restarts these on pageshow so back-navigation (bfcache) never leaves them stuck mid-flight. */ .shoot { position: absolute; height: 2px; border-radius: 999px; background: linear-gradient(90deg, rgba(217, 213, 242, 0), #E9E6FA); opacity: 0; } /* Hide the carousel scrollbar on both engines. */ [data-carousel]::-webkit-scrollbar { display: none; } /* ---- Desktop bumps (verbatim from the handoff) ---- */ @media (min-width: 1024px) { [data-dl="badge"] { min-width: 240px !important; padding: 15px 28px !important; border-radius: 20px !important; } [data-dl="badge"] svg { width: 31px !important; height: 31px !important; } [data-dls="1"] { font-size: 13px !important; } [data-dlb="1"] { font-size: 22px !important; } [data-seeall="1"] { padding: 18px 34px !important; font-size: 20px !important; } [data-seeall="1"] svg { width: 19px !important; height: 19px !important; } [data-dsk="eyebrow"] { font-size: 14.5px !important; } [data-dsk="h2app"] { font-size: 60px !important; } [data-dsk="cap"] { font-size: 16px !important; } [data-dsk="ftile"] { width: 50px !important; height: 50px !important; } [data-dsk="ftitle"] { font-size: 19px !important; } [data-dsk="fdesc"] { font-size: 16px !important; } } @media (min-width: 1000px) { [data-wordmark] { font-size: 34px !important; } } /* HERO store badges only, 10% smaller than the design (owner request 2026-08-16): every value is 0.9x the design's base and desktop numbers. The wins-page badges keep the design sizes; higher specificity + later position beats the generic [data-dl] rules above. */ .badges-sm [data-dl="badge"] { min-width: 194px !important; padding: 12px 22px !important; border-radius: 16px !important; gap: 11px !important; } .badges-sm [data-store="ios"] svg { width: 25px !important; height: 25px !important; } .badges-sm [data-store="play"] svg { width: 23px !important; height: 23px !important; } .badges-sm [data-dls="1"] { font-size: 11px !important; } .badges-sm [data-dlb="1"] { font-size: 18px !important; } @media (min-width: 1024px) { .badges-sm [data-dl="badge"] { min-width: 216px !important; padding: 13.5px 25px !important; border-radius: 18px !important; } .badges-sm [data-store="ios"] svg, .badges-sm [data-store="play"] svg { width: 28px !important; height: 28px !important; } .badges-sm [data-dls="1"] { font-size: 12px !important; } .badges-sm [data-dlb="1"] { font-size: 20px !important; } } /* ---- Language selector (new, not in the handoff; the owner asked for it top-right). Ghost-pill in the design language; dropdown panel in the night palette (it always sits on the dark header band, legal pages included). ---- */ .lang { position: relative; font-family: "Plus Jakarta Sans", sans-serif; } .lang-btn { display: flex; align-items: center; gap: 7px; border: 1.5px solid rgba(247, 243, 234, 0.3); background: rgba(247, 243, 234, 0.08); border-radius: 999px; padding: 9px 15px; font-size: 12.5px; font-weight: 700; letter-spacing: 1px; color: #F7F3EA; cursor: pointer; transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease; font-family: inherit; } .lang-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 176px; background: #211D49; border: 1px solid rgba(199, 195, 232, 0.18); border-radius: 16px; padding: 6px; box-shadow: 0 18px 44px rgba(13, 11, 28, 0.55); display: none; flex-direction: column; z-index: 60; } .lang.open .lang-menu { display: flex; } .lang-item { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 12px; border-radius: 11px; font-size: 14px; font-weight: 600; color: #C7C3E8; cursor: pointer; background: none; border: none; text-align: left; width: 100%; font-family: inherit; } .lang-item:hover { background: rgba(247, 243, 234, 0.08); color: #F7F3EA; } .lang-item[aria-current="true"] { color: #3ED598; } /* ---- Platform tabs (testing page; new, no tab pattern existed in the handoff). Same design language as the language selector's ghost pill: a pill rail, the active tab filled mint with the ink text the design pairs with mint (selection, join CTA). Keyboard behavior lives in site.js (wireTabs): roving tabindex + arrow keys. ---- */ .tabs { display: inline-flex; gap: 6px; padding: 6px; background: rgba(247, 243, 234, 0.08); border: 1.5px solid rgba(247, 243, 234, 0.25); border-radius: 999px; font-family: "Plus Jakarta Sans", sans-serif; } .tab { display: flex; align-items: center; gap: 9px; border: none; background: none; color: #C7C3E8; font-family: inherit; font-size: 15px; font-weight: 800; letter-spacing: 0.2px; padding: 11px 22px; border-radius: 999px; cursor: pointer; transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease; } .tab:hover { color: #F7F3EA; background: rgba(247, 243, 234, 0.1); } .tab[aria-selected="true"] { background: #3ED598; color: #123B2C; box-shadow: 0 10px 30px rgba(62, 213, 152, 0.35); } .tab[aria-selected="true"]:hover { color: #123B2C; background: #3ED598; } .tab:focus-visible { outline: 2px solid #A9F5CF; outline-offset: 2px; } .tab svg { flex: none; } /* ---- Tester feedback form (/testers; new, no form pattern existed in the handoff). Same design language as the platform tabs and the install-link CTA: ghost inputs on the night palette, mint focus, the mint pill for both buttons. Lives here (not inline) because form STATES (focus, disabled, placeholder, the native date picker's palette) cannot be inline styles. ---- */ .fb-fields { display: grid; gap: 14px; grid-template-columns: 1fr; } @media (min-width: 560px) { .fb-fields { grid-template-columns: 1fr 1fr; } .fb-wide { grid-column: 1 / -1; } } .fb-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; } .fb-label { font-size: 12.5px; font-weight: 700; letter-spacing: 0.4px; color: #C7C3E8; } .fb-input { width: 100%; box-sizing: border-box; background: rgba(247, 243, 234, 0.06); border: 1.5px solid rgba(199, 195, 232, 0.22); border-radius: 14px; padding: 12px 14px; font-family: inherit; font-size: 15px; font-weight: 600; color: #F7F3EA; color-scheme: dark; /* the native date picker follows the night palette */ transition: border-color 0.25s ease, background 0.25s ease; } .fb-input::placeholder { color: #8F89C9; font-weight: 500; } .fb-input:focus { outline: none; border-color: #3ED598; background: rgba(247, 243, 234, 0.09); } .fb-textarea { resize: vertical; min-height: 120px; line-height: 1.6; } /* The exact mint pill of the install-link CTA (build-fragments testingLinkHTML), as a class: same colors, weight, radius, padding and shadow, so the two CTAs on this page are twins. */ .fb-btn { display: inline-flex; align-items: center; border: none; cursor: pointer; background: #3ED598; color: #123B2C; font-family: inherit; font-size: 15.5px; font-weight: 800; border-radius: 999px; padding: 14px 24px; box-shadow: 0 10px 30px rgba(62, 213, 152, 0.28); } .fb-btn:focus-visible { outline: 2px solid #A9F5CF; outline-offset: 2px; } .fb-btn[disabled] { opacity: 0.6; pointer-events: none; } /* `display: inline-flex` above beats the UA's [hidden] display:none; restate it, or the open button keeps standing above the form it just unfolded. */ .fb-btn[hidden] { display: none; } /* The honeypot: parked off-screen rather than display:none, so it stays fillable for the bots it exists to catch while no human ever sees it or tabs into it (tabindex -1). */ .fb-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* ---- Coming-soon toast for the store badges (until the store URLs exist) ---- */ .toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(8px); background: rgba(13, 11, 28, 0.94); border: 1px solid rgba(199, 195, 232, 0.22); border-radius: 999px; padding: 12px 22px; font-family: "Plus Jakarta Sans", sans-serif; font-size: 14px; font-weight: 600; color: #F7F3EA; opacity: 0; pointer-events: none; transition: opacity 0.3s ease, transform 0.3s ease; z-index: 90; white-space: nowrap; } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* ---- Legal document body (renders src/content/legal.ts shapes; skeleton from the handoff's legal pages: repeating h2 21px/800 + 15.5px body) ---- */ .doc { max-width: 760px; margin: 0 auto; padding: clamp(30px, 5vw, 50px) clamp(20px, 5vw, 56px) 70px; font-size: 15.5px; line-height: 1.7; color: #4B463B; font-weight: 500; } .doc p { margin: 10px 0 0; } .doc p.intro { margin: 0; } .doc h2 { font-size: 21px; font-weight: 800; color: #2C2A5A; margin: 30px 0 0; } .doc h2:first-of-type { margin-top: 34px; } .doc ul { margin: 10px 0 0; padding-left: 22px; } .doc li { margin: 6px 0 0; } /* ---- Reduced motion: collapse ALL animation, CSS and JS alike (site.js checks the same media query before starting the phone rotation, screen auto-cycle and carousel auto-advance). ---- */ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01s !important; animation-iteration-count: 1 !important; } html { scroll-behavior: auto; } }