/* * theme-genz.css — bold redesign overlay * Editorial brutalism × Y2K pop. Loads AFTER style.css and applies only * when is set, so flipping the body class is * a one-line rollback. * * Don't add new class names that JS doesn't already render — this file * only restyles existing selectors so card render code in app-listings.js * stays untouched. */ /* ============== Tokens ============== */ .theme-genz { --gz-paper: #FFF9E6; --gz-ink: #0A0A0A; --gz-lime: #D4FF00; --gz-pink: #FF3366; --gz-cyan: #00E5FF; /* Constant — text color when sitting on top of bright lime/cyan/pink backgrounds. NEVER inverts in dark mode (those backgrounds stay bright in dark mode too, so text on top of them must always be dark). Apple flagged unreadable text on lime in dark mode review. */ --gz-bright-ink: #0A0A0A; --gz-on-pink: #FFF9E6; --gz-grain-opacity: 0.06; --gz-border: 2.5px solid var(--gz-ink); --gz-shadow: 6px 6px 0 0 var(--gz-ink); --gz-shadow-sm: 3px 3px 0 0 var(--gz-ink); --gz-radius: 22px; --gz-radius-sm: 12px; --gz-display: "Inter", "Helvetica Neue", system-ui, -apple-system, sans-serif; --gz-mono: ui-monospace, "JetBrains Mono", "SFMono-Regular", Menlo, monospace; } /* ============== Dark mode palette ============== The light-mode neon accents (#D4FF00 lime, #FF3366 hot pink, #00E5FF cyan) are calibrated against cream paper. Throwing them directly onto a dark background produces a saturation collision — bright neon next to cream text vibrates the eye and reduces apparent legibility (Apple App Review flagged this twice on 2026-05-06/07). Dark mode therefore uses muted, desaturated versions of every accent. Saturation drops ~30%, brightness drops ~20%. The result reads as confident and colorful but doesn't fight the dark surface. */ [data-theme="dark"] .theme-genz { --gz-paper: #121212; --gz-ink: #F5F0E0; /* Desaturated dark-mode accents */ --gz-lime: #A8C932; /* was #D4FF00 — olive-leaning lime */ --gz-pink: #D14C7B; /* was #FF3366 — deeper rose */ --gz-cyan: #4FB3BD; /* was #00E5FF — muted teal */ --gz-grain-opacity: 0.03; /* Constant: text color for sitting on the muted accents above. At these saturations, cream text on the accent is also readable, so we use cream rather than dark for visual cohesion with the rest of the dark surface. */ --gz-bright-ink: #F5F0E0; --gz-on-pink: #F5F0E0; } /* Special case: the lime is bright enough that dark text on it still reads marginally better than cream. Keep dark text on the few elements where lime is the dominant feature (card price stickers, primary CTAs, the fresh-batch banner). */ [data-theme="dark"] .theme-genz .card-price, [data-theme="dark"] .theme-genz .fresh-batch-banner, [data-theme="dark"] .theme-genz .fresh-batch-banner *, [data-theme="dark"] .theme-genz .signin-btn, [data-theme="dark"] .theme-genz .login-btn, [data-theme="dark"] .theme-genz .newsletter-submit, [data-theme="dark"] .theme-genz .contact-submit, [data-theme="dark"] .theme-genz .preview-signup-btn, [data-theme="dark"] .theme-genz .tab.active, [data-theme="dark"] .theme-genz .map-price-pin.price-low, [data-theme="dark"] .theme-genz .telegram-banner-btn, [data-theme="dark"] .theme-genz .cookie-accept, [data-theme="dark"] .theme-genz .verify-resend-btn, [data-theme="dark"] .theme-genz .upgrade-banner-btn, [data-theme="dark"] .theme-genz .guest-banner-btn, [data-theme="dark"] .theme-genz .scrape-btn, [data-theme="dark"] .theme-genz .save-search-btn, [data-theme="dark"] .theme-genz .card-tag.tag-furnished, [data-theme="dark"] .theme-genz .guest-hero-marquee span, [data-theme="dark"] .theme-genz .intro-telegram-pill, [data-theme="dark"] .theme-genz .card-tag.tag-bills, [data-theme="dark"] .theme-genz .card-tag.tag-balcony, [data-theme="dark"] .theme-genz .map-price-pin.price-mid { color: #0A0A0A !important; } /* ============== Page background ============== */ .theme-genz { background: radial-gradient(1200px 600px at 110% -10%, rgba(212,255,0,0.18), transparent 60%), radial-gradient(900px 500px at -10% 110%, rgba(255,51,102,0.12), transparent 55%), var(--gz-paper) !important; color: var(--gz-ink); font-family: var(--gz-display); -webkit-font-smoothing: antialiased; letter-spacing: -0.005em; /* Kill the legacy 1200px cage — go full bleed for density */ max-width: none !important; padding: 0 !important; margin: 0 !important; position: relative; overflow-x: hidden; } /* Giant editorial watermark in the side gutters (only visible on wide screens where there's actual real estate). Pure decoration, aria-hidden via #art-bg. */ .theme-genz::before, .theme-genz::after { content: "MILANO"; position: fixed; font-family: var(--gz-display); font-weight: 900; font-style: italic; font-size: clamp(140px, 18vw, 280px); letter-spacing: -0.06em; color: transparent; -webkit-text-stroke: 2px var(--gz-ink); opacity: 0.06; pointer-events: none; z-index: 0; user-select: none; white-space: nowrap; line-height: 0.85; } .theme-genz::before { content: "AFFITTI"; top: 18vh; left: -3vw; transform: rotate(-90deg); transform-origin: left top; } .theme-genz::after { content: "MILANO"; bottom: 8vh; right: -2vw; transform: rotate(90deg); transform-origin: right bottom; } @media (max-width: 1100px) { .theme-genz::before, .theme-genz::after { display: none; } } /* paper grain via SVG noise — adds subtle texture to flat colors */ .theme-genz #art-bg { position: fixed; inset: 0; pointer-events: none; opacity: var(--gz-grain-opacity); z-index: 0; background-image: url("data:image/svg+xml;utf8,"); background-size: 200px 200px; } /* ============== Header ============== */ .theme-genz header { background: transparent !important; border-bottom: var(--gz-border); backdrop-filter: none !important; box-shadow: none !important; } .theme-genz .header-bar { padding: 14px 20px !important; align-items: center; } .theme-genz .brand-logo { width: 44px !important; height: 44px !important; border: var(--gz-border); border-radius: 50%; background: var(--gz-lime); padding: 6px; box-shadow: var(--gz-shadow-sm); } .theme-genz h1 { font-family: var(--gz-display) !important; font-weight: 900 !important; font-size: clamp(20px, 3vw, 28px) !important; letter-spacing: -0.04em !important; font-style: italic; color: var(--gz-ink) !important; margin: 0 !important; line-height: 1 !important; } .theme-genz h1::after { content: "🍃"; font-style: normal; margin-left: 6px; font-size: 0.75em; vertical-align: middle; } .theme-genz .subtitle { font-family: var(--gz-mono) !important; font-size: 11px !important; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gz-ink) !important; opacity: 0.7; margin-top: 2px !important; } .theme-genz .subtitle::before { content: "● "; color: var(--gz-pink); animation: gz-pulse 2s ease-in-out infinite; } @keyframes gz-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } /* Header buttons — chunky brutalist */ .theme-genz .header-telegram, .theme-genz .dark-toggle, .theme-genz .user-menu-btn { border: var(--gz-border) !important; border-radius: 999px !important; background: var(--gz-paper) !important; box-shadow: var(--gz-shadow-sm); transition: transform 0.12s, box-shadow 0.12s; color: var(--gz-ink) !important; } .theme-genz .header-telegram:hover, .theme-genz .dark-toggle:hover, .theme-genz .user-menu-btn:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 0 var(--gz-ink); } .theme-genz .signin-btn { background: var(--gz-lime) !important; color: var(--gz-bright-ink) !important; border: var(--gz-border) !important; border-radius: 999px !important; font-weight: 800 !important; text-transform: uppercase; letter-spacing: 0.04em; padding: 9px 18px !important; box-shadow: var(--gz-shadow-sm); transition: transform 0.12s, box-shadow 0.12s; } .theme-genz .signin-btn:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 0 var(--gz-ink); } /* ============== Intro ribbon — replace generic copy vibe ============== */ .theme-genz .intro-ribbon { background: var(--gz-ink) !important; color: var(--gz-paper) !important; border: none !important; border-radius: 0 !important; padding: 10px 20px !important; font-family: var(--gz-mono); font-size: 12px !important; text-transform: uppercase; letter-spacing: 0.08em; overflow: hidden; position: relative; } .theme-genz .intro-text { color: var(--gz-paper) !important; font-family: var(--gz-mono) !important; font-size: 12px !important; } .theme-genz .intro-text::before { content: "✦ "; color: var(--gz-lime); } .theme-genz .intro-telegram-pill { background: var(--gz-lime) !important; color: var(--gz-bright-ink) !important; border: 2px solid var(--gz-paper) !important; border-radius: 999px !important; font-weight: 800; padding: 4px 12px !important; text-transform: uppercase; letter-spacing: 0.06em; } /* ============== Tabs ============== */ .theme-genz .tabs { padding: 18px 20px 6px !important; gap: 10px !important; flex-wrap: wrap; } .theme-genz .tab { background: var(--gz-paper) !important; color: var(--gz-ink) !important; border: var(--gz-border) !important; border-radius: 999px !important; padding: 9px 18px !important; font-weight: 800 !important; font-size: 13px !important; text-transform: uppercase; letter-spacing: 0.05em; box-shadow: var(--gz-shadow-sm); transition: transform 0.12s, box-shadow 0.12s, background 0.12s; font-family: var(--gz-display); } .theme-genz .tab:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 0 var(--gz-ink); } .theme-genz .tab.active { background: var(--gz-lime) !important; color: var(--gz-bright-ink) !important; } .theme-genz .map-toggle-btn, .theme-genz .compare-btn { background: var(--gz-paper) !important; color: var(--gz-ink) !important; border: var(--gz-border) !important; border-radius: 999px !important; padding: 9px 16px !important; font-weight: 800 !important; text-transform: uppercase; letter-spacing: 0.05em; box-shadow: var(--gz-shadow-sm); transition: transform 0.12s, box-shadow 0.12s; } .theme-genz .map-toggle-btn:hover, .theme-genz .compare-btn:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 0 var(--gz-ink); } .theme-genz .map-toggle-btn[aria-pressed="true"] { background: var(--gz-pink) !important; color: var(--gz-paper) !important; } .theme-genz .fav-count, .theme-genz .map-pin-count { background: var(--gz-pink) !important; color: var(--gz-paper) !important; border: 1.5px solid var(--gz-ink); font-family: var(--gz-mono); } /* ============== Filters ============== */ .theme-genz .filters { padding: 12px 20px !important; background: transparent !important; border: none !important; } .theme-genz .filter-fields { gap: 10px !important; } .theme-genz .search-input, .theme-genz .price-input, .theme-genz #sortBy, .theme-genz #filterHours, .theme-genz select.scrape-days { background: var(--gz-paper) !important; color: var(--gz-ink) !important; border: var(--gz-border) !important; border-radius: 999px !important; padding: 9px 16px !important; font-family: var(--gz-display); font-weight: 600 !important; font-size: 13px !important; box-shadow: var(--gz-shadow-sm); transition: transform 0.12s, box-shadow 0.12s; } .theme-genz .search-input::placeholder, .theme-genz .price-input::placeholder { color: var(--gz-ink) !important; /* Bumped from 0.45 to 0.65 — Apple flagged the input placeholders as low-contrast on iPad dark mode. 0.65 still reads as "placeholder dim" but stays comfortably above WCAG AA contrast. */ opacity: 0.65; font-weight: 600; } .theme-genz .search-input:focus, .theme-genz .price-input:focus, .theme-genz #sortBy:focus, .theme-genz #filterHours:focus { outline: none; transform: translate(-2px, -2px); box-shadow: 5px 5px 0 0 var(--gz-ink); } .theme-genz .checkbox-filter { background: var(--gz-paper) !important; border: var(--gz-border) !important; border-radius: 999px !important; padding: 8px 14px !important; font-weight: 700 !important; font-size: 13px !important; color: var(--gz-ink) !important; box-shadow: var(--gz-shadow-sm); text-transform: uppercase; letter-spacing: 0.04em; font-size: 11px !important; } .theme-genz .scrape-btn, .theme-genz .save-search-btn { background: var(--gz-cyan) !important; color: var(--gz-bright-ink) !important; border: var(--gz-border) !important; border-radius: 999px !important; font-weight: 800 !important; text-transform: uppercase; letter-spacing: 0.05em; box-shadow: var(--gz-shadow-sm); padding: 9px 18px !important; transition: transform 0.12s, box-shadow 0.12s; } .theme-genz .scrape-btn:hover, .theme-genz .save-search-btn:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 0 var(--gz-ink); } .theme-genz .filter-toggle { background: var(--gz-paper) !important; color: var(--gz-ink) !important; border: var(--gz-border) !important; border-radius: 999px !important; font-weight: 800 !important; box-shadow: var(--gz-shadow-sm); padding: 9px 16px !important; text-transform: uppercase; letter-spacing: 0.05em; font-size: 12px !important; } /* ============== Listings grid ============== */ .theme-genz #listings { padding: 16px 32px 80px !important; gap: 22px !important; /* Capped at 3 columns so cards stay roomy on wide displays instead of cramming 4-up. Tablet/mobile drop to 2 / 1 below. */ grid-template-columns: repeat(3, minmax(0, 1fr)) !important; position: relative; z-index: 1; } .theme-genz .skeleton-cards { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } /* Keep all primary content above the watermark layer */ .theme-genz header { position: relative; z-index: 50; /* above main so the user-menu dropdown can't get buried */ } .theme-genz main, .theme-genz footer { position: relative; z-index: 1; } /* Belt-and-suspenders: lift the dropdown well above any sibling stacking context */ .theme-genz .user-menu-dropdown { z-index: 9999 !important; } /* ============== Cards — THE main thing ============== */ .theme-genz .card { background: var(--gz-paper) !important; border: var(--gz-border) !important; border-radius: var(--gz-radius) !important; box-shadow: var(--gz-shadow); overflow: hidden; position: relative; transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.18s; } .theme-genz .card::after { /* Sticker corner cut — gives a chamfered cool-magazine vibe */ content: ""; position: absolute; top: 0; right: 0; width: 0; height: 0; border-style: solid; border-width: 0 28px 28px 0; border-color: transparent var(--gz-paper) transparent transparent; filter: drop-shadow(-1.5px 1.5px 0 var(--gz-ink)); pointer-events: none; } .theme-genz .card:hover { transform: translate(-4px, -4px) rotate(-0.4deg); box-shadow: 10px 10px 0 0 var(--gz-ink); } .theme-genz .card-gallery { border-bottom: var(--gz-border); border-radius: 0 !important; } .theme-genz .card-body { padding: 16px 18px 14px !important; background: var(--gz-paper); } /* Price as a chunky sticker, slightly rotated */ .theme-genz .card-price { display: inline-block !important; background: var(--gz-lime) !important; color: var(--gz-bright-ink) !important; border: var(--gz-border); border-radius: 12px !important; padding: 4px 12px !important; font-family: var(--gz-display) !important; font-weight: 900 !important; font-size: 22px !important; letter-spacing: -0.02em !important; margin-bottom: 10px !important; transform: rotate(-1.2deg); box-shadow: var(--gz-shadow-sm); line-height: 1.1 !important; } .theme-genz .card-title { font-family: var(--gz-display) !important; font-weight: 600 !important; font-size: 15px !important; line-height: 1.4 !important; color: var(--gz-ink) !important; margin-top: 6px !important; letter-spacing: -0.005em; } .theme-genz .card-details { font-family: var(--gz-mono) !important; font-size: 12px !important; color: var(--gz-ink) !important; opacity: 0.75; text-transform: uppercase; letter-spacing: 0.04em; margin-top: 8px !important; } /* Top badges row — chip-styled */ .theme-genz .card-top-row { gap: 6px !important; margin-bottom: 4px !important; flex-wrap: wrap; } .theme-genz .card-top-row > * { background: var(--gz-paper) !important; color: var(--gz-ink) !important; border: 1.5px solid var(--gz-ink) !important; border-radius: 999px !important; padding: 3px 10px !important; font-family: var(--gz-mono); font-size: 10px !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: 0.05em; } .theme-genz .age-badge, .theme-genz .size-badge, .theme-genz .type-badge { background: var(--gz-paper) !important; } .theme-genz .age-badge.fresh { background: var(--gz-pink) !important; color: var(--gz-paper) !important; } .theme-genz .rented-badge { background: var(--gz-ink) !important; color: var(--gz-paper) !important; border: 1.5px solid var(--gz-ink) !important; border-radius: 999px !important; text-transform: uppercase; letter-spacing: 0.06em; font-family: var(--gz-mono); font-size: 10px !important; padding: 3px 10px !important; } .theme-genz .card.rented { opacity: 0.55; } /* Highlight match: pink ribbon */ .theme-genz .highlight-match-tag { background: var(--gz-pink) !important; color: var(--gz-paper) !important; border: 1.5px solid var(--gz-ink) !important; font-family: var(--gz-mono); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 800 !important; } .theme-genz .shared-tag { background: var(--gz-cyan) !important; color: var(--gz-bright-ink) !important; border: 1.5px solid var(--gz-ink) !important; font-family: var(--gz-mono); text-transform: uppercase; letter-spacing: 0.08em; } .theme-genz .card.card-highlight-match { box-shadow: 6px 6px 0 0 var(--gz-pink), 6px 6px 0 2.5px var(--gz-ink); } /* Card footer / actions */ .theme-genz .card-footer { margin-top: 10px !important; padding-top: 10px !important; border-top: 1.5px dashed var(--gz-ink); gap: 8px !important; flex-wrap: wrap; } .theme-genz .card-actions { gap: 6px !important; flex-wrap: wrap; } /* Apple's HIG mandates 44pt minimum touch target. The base styles had 36px which fell foul of the iPad review (action buttons hard to tap / appearing crowded). Bump to 44px and ensure icons are visible. NOTE: scoped to direct action buttons only — NOT to overflow-menu items inside the dropdown, which are also buttons inside .card-actions but need their natural rectangular width to show their full labels ("Share", "Report" etc.). */ .theme-genz .card-actions > .fav-btn, .theme-genz .card-actions > .card-map-btn, .theme-genz .card-actions > .admin-remove-btn, .theme-genz .card-actions > .overflow-menu > .overflow-menu-btn { background: var(--gz-paper) !important; border: 2px solid var(--gz-ink) !important; border-radius: 999px !important; color: var(--gz-ink) !important; transition: transform 0.12s; min-width: 44px !important; min-height: 44px !important; width: 44px !important; height: 44px !important; padding: 0 !important; display: inline-flex !important; align-items: center; justify-content: center; } .theme-genz .card-actions > .fav-btn svg, .theme-genz .card-actions > .card-map-btn svg, .theme-genz .card-actions > .admin-remove-btn svg { width: 18px !important; height: 18px !important; stroke: var(--gz-ink) !important; stroke-width: 2.5 !important; fill: none !important; } .theme-genz .card-actions > .fav-btn:hover, .theme-genz .card-actions > .card-map-btn:hover, .theme-genz .card-actions > .overflow-menu > .overflow-menu-btn:hover { transform: translateY(-2px); } .theme-genz .overflow-menu-btn { font-weight: 900 !important; font-size: 18px !important; line-height: 1 !important; letter-spacing: -0.02em !important; } .theme-genz .fav-btn.active { background: var(--gz-pink) !important; color: var(--gz-paper) !important; border-color: var(--gz-ink) !important; } /* When favorited, force the inner heart SVG to high-contrast white so it stays visible on the pink button background. Cards have a more-specific override (.theme-genz .card-actions > .fav-btn svg) that draws a dark outline heart instead, and CSS specificity keeps that rule in charge there — this only kicks in for the focus panel where there's no card override and the inline fill="#ff3b30" red used to disappear into pink. */ .theme-genz .fav-btn.active svg { fill: var(--gz-paper) !important; stroke: var(--gz-paper) !important; } .theme-genz .admin-remove-btn { background: var(--gz-ink) !important; color: var(--gz-paper) !important; border: 1.5px solid var(--gz-ink) !important; border-radius: 999px !important; text-transform: uppercase; letter-spacing: 0.05em; font-family: var(--gz-mono); } /* "View" link in card */ .theme-genz .card-link, .theme-genz a.card-link { background: var(--gz-ink) !important; color: var(--gz-paper) !important; border: var(--gz-border) !important; border-radius: 999px !important; padding: 7px 14px !important; font-weight: 800 !important; font-size: 12px !important; text-transform: uppercase; letter-spacing: 0.06em; box-shadow: var(--gz-shadow-sm); } .theme-genz .card-link:hover { background: var(--gz-lime) !important; color: var(--gz-bright-ink) !important; } /* ============== Banners ============== */ .theme-genz .telegram-banner, .theme-genz .upgrade-banner, .theme-genz .verify-banner, .theme-genz .cookie-banner { background: var(--gz-paper) !important; border: var(--gz-border) !important; border-radius: var(--gz-radius-sm) !important; box-shadow: var(--gz-shadow); margin: 12px 20px !important; } .theme-genz .telegram-banner-btn, .theme-genz .upgrade-banner-btn, .theme-genz .verify-resend-btn, .theme-genz .cookie-accept { background: var(--gz-lime) !important; color: var(--gz-bright-ink) !important; border: var(--gz-border) !important; border-radius: 999px !important; font-weight: 800 !important; text-transform: uppercase; letter-spacing: 0.05em; box-shadow: var(--gz-shadow-sm); } .theme-genz .cookie-reject { background: var(--gz-paper) !important; color: var(--gz-ink) !important; border: var(--gz-border) !important; border-radius: 999px !important; font-weight: 800 !important; } .theme-genz .guest-banner { background: var(--gz-ink) !important; color: var(--gz-paper) !important; border-top: var(--gz-border); font-family: var(--gz-display); } .theme-genz .guest-banner-btn { background: var(--gz-lime) !important; color: var(--gz-bright-ink) !important; border: 2px solid var(--gz-paper) !important; border-radius: 999px !important; font-weight: 800 !important; text-transform: uppercase; letter-spacing: 0.05em; } /* ============== Modals ============== */ .theme-genz .modal-overlay { background: rgba(10, 10, 10, 0.55) !important; backdrop-filter: blur(6px); } .theme-genz .modal-box { background: var(--gz-paper) !important; border: var(--gz-border) !important; border-radius: var(--gz-radius) !important; box-shadow: var(--gz-shadow); color: var(--gz-ink); } .theme-genz .modal-box h2 { font-weight: 900 !important; letter-spacing: -0.03em; font-style: italic; } .theme-genz .newsletter-submit, .theme-genz .contact-submit, .theme-genz .preview-signup-btn { background: var(--gz-lime) !important; color: var(--gz-bright-ink) !important; border: var(--gz-border) !important; border-radius: 999px !important; font-weight: 800 !important; text-transform: uppercase; letter-spacing: 0.05em; box-shadow: var(--gz-shadow-sm); } .theme-genz .preview-signup-btn.apple-signup { background: var(--gz-ink) !important; color: var(--gz-paper) !important; } /* ============== Map view ============== */ .theme-genz .map-view { border: var(--gz-border) !important; border-radius: var(--gz-radius) !important; overflow: hidden; box-shadow: var(--gz-shadow); margin: 12px 20px !important; } /* The map close button was overlapping the MAP toggle in the tabs row on iPad (Apple's review screenshot showed both visible at the same time, "x MAP" hiding the toggle). The MAP toggle in the tabs row already serves to close the map, so this floating close-button is redundant — hide it. */ .theme-genz .map-close-btn { display: none !important; } .theme-genz .map-legend { background: var(--gz-paper) !important; border: var(--gz-border) !important; border-radius: var(--gz-radius-sm) !important; font-family: var(--gz-mono); text-transform: uppercase; letter-spacing: 0.05em; font-size: 11px; color: var(--gz-ink) !important; font-weight: 700; } .theme-genz .map-legend .legend-item, .theme-genz .map-legend span { color: var(--gz-ink) !important; } /* ============== Footer ============== */ .theme-genz .site-footer { background: transparent !important; border-top: var(--gz-border); padding: 28px 20px 36px !important; margin-top: 40px; } .theme-genz .footer-tagline { font-family: var(--gz-mono); text-transform: uppercase; letter-spacing: 0.08em; font-size: 11px !important; opacity: 0.7; } .theme-genz .footer-links a { color: var(--gz-ink) !important; font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; } .theme-genz .footer-disclaimer { font-family: var(--gz-mono); font-size: 10px !important; line-height: 1.6 !important; opacity: 0.6; } /* ============== Skeleton loader ============== */ .theme-genz .skeleton-card { border: var(--gz-border) !important; border-radius: var(--gz-radius) !important; box-shadow: var(--gz-shadow); background: var(--gz-paper) !important; } .theme-genz .skeleton-img, .theme-genz .skeleton-line { background: linear-gradient(90deg, transparent, rgba(10, 10, 10, 0.08), transparent) !important; background-size: 200% 100% !important; } /* ============== Empty state ============== */ .theme-genz .empty, .theme-genz .empty-state { border: var(--gz-border); border-radius: var(--gz-radius); background: var(--gz-paper); box-shadow: var(--gz-shadow); margin: 20px; padding: 40px 20px !important; } .theme-genz .empty h3, .theme-genz .empty-state h3 { font-weight: 900; font-style: italic; letter-spacing: -0.02em; } /* ============== User menu dropdown ============== */ .theme-genz .user-menu-dropdown { background: var(--gz-paper) !important; border: var(--gz-border) !important; border-radius: var(--gz-radius-sm) !important; box-shadow: var(--gz-shadow); color: var(--gz-ink); } .theme-genz .menu-item { color: var(--gz-ink) !important; font-weight: 600; } .theme-genz .menu-item:hover { background: var(--gz-lime) !important; } .theme-genz .menu-item-danger:hover { background: var(--gz-pink) !important; color: var(--gz-paper) !important; } /* ============== Mobile ============== */ @media (max-width: 600px) { .theme-genz .card-price { font-size: 19px !important; } .theme-genz h1 { font-size: 20px !important; } .theme-genz #listings { padding: 12px 14px 80px !important; grid-template-columns: 1fr !important; } .theme-genz .skeleton-cards { grid-template-columns: 1fr !important; } .theme-genz .card { border-radius: 18px !important; } .theme-genz .telegram-banner, .theme-genz .upgrade-banner, .theme-genz .verify-banner { margin: 10px 14px !important; } } /* ============== Guest hero ============== */ .theme-genz .guest-hero { margin: 0 0 8px; padding: 0; border-bottom: var(--gz-border); background: var(--gz-paper); overflow: hidden; position: relative; z-index: 1; } .theme-genz .guest-hero-marquee { background: var(--gz-lime); border-bottom: var(--gz-border); border-top: var(--gz-border); padding: 8px 0; overflow: hidden; white-space: nowrap; display: flex; gap: 0; } .theme-genz .guest-hero-marquee span { display: inline-block; padding-right: 40px; font-family: var(--gz-mono); font-weight: 800; font-size: 13px; letter-spacing: 0.18em; color: var(--gz-ink); animation: gz-marquee 28s linear infinite; flex-shrink: 0; } @keyframes gz-marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } } .theme-genz .guest-hero-body { padding: 36px 32px 30px; max-width: 980px; } .theme-genz .guest-hero-eyebrow { font-family: var(--gz-mono); font-size: 11px; font-weight: 800; letter-spacing: 0.2em; color: var(--gz-pink); margin-bottom: 14px; } .theme-genz .guest-hero-headline { font-family: var(--gz-display); font-weight: 900; font-size: clamp(40px, 7vw, 80px); line-height: 0.92; letter-spacing: -0.04em; margin: 0 0 14px; color: var(--gz-ink); } .theme-genz .guest-hero-headline em { font-style: italic; background: linear-gradient(105deg, var(--gz-lime) 0%, var(--gz-lime) 60%, var(--gz-cyan) 100%); padding: 0 12px 4px; border: var(--gz-border); box-shadow: var(--gz-shadow-sm); display: inline-block; transform: rotate(-1deg); } .theme-genz .guest-hero-sub { font-family: var(--gz-display); font-size: clamp(15px, 1.5vw, 18px); font-weight: 500; color: var(--gz-ink); opacity: 0.75; max-width: 600px; margin: 0; line-height: 1.5; } /* ============== Fresh-batch indicators ============== */ .theme-genz .fresh-batch-banner { grid-column: 1 / -1; background: var(--gz-lime); border: var(--gz-border); border-radius: 999px; padding: 10px 22px; display: flex; align-items: center; gap: 10px; font-family: var(--gz-mono); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gz-bright-ink) !important; box-shadow: var(--gz-shadow-sm); margin-bottom: 6px; } /* Force the descriptive text inside the banner to inherit the same dark color, so "FROM THE LATEST SCRAPE · Xh AGO" doesn't fade out in dark mode. */ .theme-genz .fresh-batch-banner * { color: var(--gz-bright-ink) !important; } .theme-genz .fresh-batch-banner strong { font-size: 16px; font-weight: 900; font-family: var(--gz-display); } .theme-genz .fresh-batch-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--gz-pink); animation: gz-pulse-dot 1.6s ease-in-out infinite; flex-shrink: 0; } @keyframes gz-pulse-dot { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.4); opacity: 0.4; } } /* Per-card NEW sticker — bold, rotated, unmissable. Sits diagonal across the top-right corner of the card. */ .theme-genz .fresh-tag { position: absolute; top: 14px; right: -32px; z-index: 10; background: var(--gz-pink); color: var(--gz-paper); border: var(--gz-border); border-radius: 4px; padding: 6px 38px; font-family: var(--gz-display); font-weight: 900; font-size: 13px; letter-spacing: 0.18em; box-shadow: 4px 4px 0 0 var(--gz-ink); transform: rotate(35deg); animation: gz-fresh-pop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both; text-shadow: 0 1px 0 rgba(0,0,0,0.2); pointer-events: none; } .theme-genz .fresh-tag::before { content: "🆕 "; margin-right: 2px; } @keyframes gz-fresh-pop { 0% { transform: rotate(35deg) scale(0); opacity: 0; } 100% { transform: rotate(35deg) scale(1); opacity: 1; } } /* Card itself gets a soft pink shadow so fresh listings stand out without dominating the grid. Lighter than the standard ink offset shadow on regular cards. */ .theme-genz .card.card-fresh { box-shadow: 6px 6px 0 0 rgba(255, 51, 102, 0.35), 6px 6px 0 2.5px var(--gz-ink); border-color: var(--gz-pink) !important; } .theme-genz .card.card-fresh::after { /* override the chamfered corner cut on fresh cards so the NEW ribbon has a clean canvas */ border-color: transparent !important; } .theme-genz .card.card-fresh:hover { box-shadow: 10px 10px 0 0 rgba(255, 51, 102, 0.35), 10px 10px 0 2.5px var(--gz-ink); } /* ============== AI tag stickers (emoji prefix per tag) ============== */ .theme-genz .card-tag.tag-furnished::before { content: "🛋 "; } .theme-genz .card-tag.tag-bills::before { content: "💡 "; } .theme-genz .card-tag.tag-private::before { content: "🤝 "; } .theme-genz .card-tag.tag-available::before { content: "🔥 "; } .theme-genz .card-tag.tag-balcony::before { content: "🌿 "; } .theme-genz .card-tag.tag-pets::before { content: "🐶 "; } .theme-genz .card-tag.tag-renovated::before { content: "✨ "; } .theme-genz .card-tag.tag-parking::before { content: "🚗 "; } .theme-genz .card-tag.tag-available { background: var(--gz-pink) !important; color: var(--gz-paper) !important; border-color: var(--gz-ink) !important; transform: rotate(2deg); } .theme-genz .card-tag.tag-furnished { background: var(--gz-lime) !important; transform: rotate(-1.5deg); } .theme-genz .card-tag.tag-bills, .theme-genz .card-tag.tag-balcony { background: var(--gz-cyan) !important; transform: rotate(1deg); } /* ============== Loading state — animated marquee ============== */ .theme-genz .skeleton-cards::before { content: "scraping facebook · scraping facebook · scraping facebook · scraping facebook · "; grid-column: 1 / -1; display: block; font-family: var(--gz-mono); font-size: 13px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gz-ink); background: var(--gz-lime); border: var(--gz-border); border-radius: 999px; padding: 10px 24px; margin: 0 0 18px; box-shadow: var(--gz-shadow-sm); overflow: hidden; white-space: nowrap; text-overflow: clip; } /* ============== Leaflet map markers — brutalist override ============== */ .theme-genz .leaflet-container { background: var(--gz-paper); font-family: var(--gz-display); } .theme-genz .leaflet-popup-content-wrapper { background: var(--gz-paper) !important; color: var(--gz-ink); border: var(--gz-border); border-radius: var(--gz-radius-sm) !important; box-shadow: var(--gz-shadow); } .theme-genz .leaflet-popup-tip { background: var(--gz-ink) !important; border: var(--gz-border); } .theme-genz .leaflet-control-zoom a { background: var(--gz-paper) !important; color: var(--gz-ink) !important; border: var(--gz-border) !important; border-radius: 999px !important; width: 34px !important; height: 34px !important; line-height: 30px !important; font-weight: 900; margin-bottom: 6px !important; box-shadow: var(--gz-shadow-sm); } .theme-genz .leaflet-control-attribution { background: var(--gz-ink) !important; color: var(--gz-paper) !important; font-family: var(--gz-mono); font-size: 9px; border-top-left-radius: 8px; } .theme-genz .leaflet-control-attribution a { color: var(--gz-lime) !important; } /* Custom price-pin marker styles (used by app-map.js if it sets these classes; safe if it doesn't — these have no effect without the markup). */ .theme-genz .map-price-pin { background: var(--gz-paper); border: var(--gz-border); border-radius: 999px; padding: 4px 10px; font-family: var(--gz-display); font-weight: 900; font-size: 12px; color: var(--gz-ink); box-shadow: var(--gz-shadow-sm); white-space: nowrap; transform: rotate(-2deg); } .theme-genz .map-price-pin.price-low { background: var(--gz-lime); } .theme-genz .map-price-pin.price-mid { background: var(--gz-cyan); } .theme-genz .map-price-pin.price-high { background: var(--gz-pink); color: var(--gz-paper); } /* ============== Login page ============== */ .theme-genz .login-container { background: var(--gz-paper) !important; border: var(--gz-border) !important; border-radius: var(--gz-radius) !important; box-shadow: var(--gz-shadow); padding: 32px 28px !important; max-width: 440px; } .theme-genz .login-container h1 { font-family: var(--gz-display) !important; font-weight: 900 !important; font-style: italic; letter-spacing: -0.03em; color: var(--gz-ink) !important; font-size: 32px !important; } .theme-genz .login-tagline { font-family: var(--gz-mono); text-transform: uppercase; letter-spacing: 0.08em; font-size: 11px !important; color: var(--gz-ink) !important; opacity: 0.75; } .theme-genz .login-subtitle { color: var(--gz-ink) !important; opacity: 0.7; } .theme-genz .login-form input[type="email"], .theme-genz .login-form input[type="password"], .theme-genz .login-form input[type="text"] { background: var(--gz-paper) !important; color: var(--gz-ink) !important; border: var(--gz-border) !important; border-radius: 999px !important; padding: 12px 18px !important; font-weight: 600; font-size: 15px; box-shadow: var(--gz-shadow-sm); } .theme-genz .login-form input:focus { outline: none; transform: translate(-2px, -2px); box-shadow: 5px 5px 0 0 var(--gz-ink); } .theme-genz .login-btn { background: var(--gz-lime) !important; color: var(--gz-bright-ink) !important; border: var(--gz-border) !important; border-radius: 999px !important; font-weight: 800 !important; font-size: 15px !important; text-transform: uppercase; letter-spacing: 0.05em; padding: 13px 18px !important; box-shadow: var(--gz-shadow-sm); transition: transform 0.12s, box-shadow 0.12s; } .theme-genz .login-btn:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 0 var(--gz-ink); } .theme-genz .social-btn { background: var(--gz-paper) !important; color: var(--gz-ink) !important; border: var(--gz-border) !important; border-radius: 999px !important; font-weight: 700 !important; box-shadow: var(--gz-shadow-sm); transition: transform 0.12s, box-shadow 0.12s; } .theme-genz .social-btn:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 0 var(--gz-ink); } .theme-genz .social-btn.apple { background: var(--gz-ink) !important; color: var(--gz-paper) !important; } .theme-genz .social-btn.facebook { background: #1877F2 !important; color: #fff !important; } .theme-genz .divider { color: var(--gz-ink) !important; opacity: 0.5; font-family: var(--gz-mono); text-transform: uppercase; letter-spacing: 0.1em; font-size: 11px; } .theme-genz .login-toggle a, .theme-genz .forgot-link { color: var(--gz-ink) !important; font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; } .theme-genz .consent-label { color: var(--gz-ink) !important; font-size: 13px; font-weight: 500; } @media (max-width: 600px) { .theme-genz .guest-hero-body { padding: 28px 18px 22px; } .theme-genz .guest-hero-headline { font-size: 38px; } } /* ============== iPad / tablet legibility fixes ============== App Store review (May 2026) flagged hard-to-read typography, crowded controls, and zero listings visible above the fold on iPad Air 11". Breakpoint extends to 1280px so iPad Air landscape (1180px) and iPad Pro 13" portrait (1024px) both get these fixes. */ @media (min-width: 601px) and (max-width: 1280px) { /* Reviewers complained the first iPad viewport had no listings. Aggressive fix: hide the guest hero + marquee + intro ribbon on tablet (these were marketing decoration — they belong on mobile where vertical space is plentiful). Also shrink the map to 18vh so the first row of card images is fully visible above the fold. */ .theme-genz .guest-hero, .theme-genz .guest-hero-marquee, .theme-genz .intro-ribbon { display: none !important; } /* Default map height drops from 27vh (~320px) to 18vh (~210px) on tablet so the first row of cards is fully visible above the fold. Users can still resize via the bottom drag handle. */ .map-container { height: 18vh !important; min-height: 160px; } .theme-genz .card-title { font-size: 17px !important; line-height: 1.5 !important; } .theme-genz .card-details { font-size: 13px !important; letter-spacing: 0.02em !important; text-transform: none !important; } .theme-genz .card-top-row > * { font-size: 12px !important; padding: 4px 12px !important; letter-spacing: 0.03em !important; } .theme-genz .card-price { font-size: 24px !important; } .theme-genz .fresh-batch-banner { font-size: 14px !important; } .theme-genz .intro-text { font-size: 13px !important; letter-spacing: 0.05em !important; } .theme-genz .guest-hero-marquee span { font-size: 14px !important; } /* Loosen tab labels — were cramped */ .theme-genz .tab, .theme-genz .map-toggle-btn, .theme-genz .compare-btn { font-size: 14px !important; padding: 11px 22px !important; } /* Ensure card actions don't crowd on tablet */ .theme-genz .card-actions { gap: 8px !important; } .theme-genz #listings { padding: 18px 28px 100px !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .theme-genz .skeleton-cards { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } /* The corner-ribbon NEW tag — make sure text is readable on tablet */ .theme-genz .fresh-tag { font-size: 14px !important; padding: 7px 40px !important; } /* Hide gutter watermark below 1100px (was already), make sure */ .theme-genz::before, .theme-genz::after { display: none !important; } } /* Cookie banner had been overlapping the bottom card row on iPad — pin a buffer so cards never disappear behind it. */ .theme-genz #listings { padding-bottom: 120px !important; } /* Card overflow menu was clipping on iPad. The button sits at the right end of the card actions row; default left:0 anchoring made the dropdown extend past the card's right edge, where overflow:hidden clipped it (Apple flagged "Sh..." and "Repor..." truncation in review). Anchor right:0 instead so the menu opens leftward and stays inside the card. Also widen the menu so the labels never truncate even with our larger tablet font sizes. */ .theme-genz .overflow-menu-dropdown { left: auto !important; right: 0 !important; min-width: 200px !important; background: var(--gz-paper) !important; border: var(--gz-border) !important; border-radius: var(--gz-radius-sm) !important; box-shadow: var(--gz-shadow); padding: 6px !important; } .theme-genz .overflow-item { color: var(--gz-ink) !important; font-weight: 700 !important; font-size: 14px !important; padding: 10px 14px !important; border-radius: 999px !important; white-space: nowrap !important; } .theme-genz .overflow-item:hover { background: var(--gz-lime) !important; } /* Belt-and-suspenders: keep the card's clip-radius for images while letting overflow menus escape. The menu has its own z-index above the card siblings already. */ .theme-genz .card { overflow: visible !important; } .theme-genz .card-gallery { overflow: hidden; border-top-left-radius: calc(var(--gz-radius) - 2px); border-top-right-radius: calc(var(--gz-radius) - 2px); } /* ============== Reduced motion ============== */ @media (prefers-reduced-motion: reduce) { .theme-genz .subtitle::before, .theme-genz .guest-hero-marquee span { animation: none; } .theme-genz .card, .theme-genz .tab, .theme-genz .map-toggle-btn, .theme-genz .compare-btn, .theme-genz .signin-btn { transition: none; } }