:root{ --butter:#FFE08A; --butter-2:#FFF3C7; --mint:#E9FBF3; --teal:#29D3C2; --green:#3DC27A; --ink:#0E1B2E; --muted:#6B7A90; --card:#fff; --ring:rgba(41,211,194,.35); --shadow:0 20px 50px rgba(10,35,60,.08); --radius:18px; --container: 1200px; --page-gutter: clamp(16px, 5vw, 40px); /* centers content while keeping full-width backgrounds */ --container-inset: max(var(--page-gutter), calc((100vw - var(--container)) / 2)); /* Deal assessment colors */ --deal-good: #10b981; --deal-good-bg: #ecfdf5; --deal-fair: #f59e0b; --deal-over: #ef4444; /* Text hierarchy */ --text-secondary: #334a62; --text-tertiary: #94a3b8; /* Editorial design system (search-redesign-v2). Namespaced --ed-* so the existing teal/yellow palette keeps powering the public landing page, login, and any non-portal surface. Apply via .ed-* component classes or by overriding scoped portal selectors that opt in. */ --ed-paper: #FAF7F2; --ed-paper-2: #F3EEE5; --ed-paper-3: #EBE4D7; --ed-line: #E3DBCB; --ed-line-soft:#EEE8DC; --ed-ink: #1A1814; --ed-ink-2: #3A362E; --ed-ink-3: #6B6557; --ed-ink-4: #9A9282; --ed-mint: oklch(0.62 0.08 170); --ed-mint-2: oklch(0.72 0.06 170); --ed-mint-soft:oklch(0.94 0.03 170); --ed-mint-ink: oklch(0.32 0.06 170); --ed-amber: oklch(0.72 0.13 55); --ed-amber-soft:oklch(0.95 0.05 70); --ed-rose: oklch(0.62 0.14 25); --ed-rose-soft:oklch(0.94 0.04 25); --ed-lock: #B8AE9A; --ed-radius: 14px; --ed-radius-sm:10px; } /* Editorial typography helpers (search-redesign-v2). Opt-in only: they change nothing until applied as a class. Fonts are loaded from the shared Google Fonts link in static/index.html. */ .ed-serif{font-family:Georgia, "Times New Roman", serif;font-optical-sizing:auto;letter-spacing:-0.01em} .ed-mono{font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace} .ed-tabular{font-variant-numeric:tabular-nums} /* ============================================================ Phase 2 - Site-wide editorial foundation Warm paper background + ink text + serif headings, applied site-wide so every page (landing, login, portal, legal, lt landing pages) shares the same visual feel. Component-level overhauls (cards, buttons, ad cards, tabs) come in later phases. Source-order overrides only - no !important added beyond what existed already in the appbar rules. ============================================================ */ /* (body bg+color moved into the canonical body rule below at line ~95 so it actually wins the cascade. Earlier override was source-ordered BEFORE the original and silently lost.) */ /* Appbar: warmer translucent paper to match. */ .appbar{ background: rgba(250,247,242,0.92); border-bottom-color: var(--ed-line-soft); } @media (min-width: 1025px){ .appbar{ background: rgba(250,247,242,0.92) !important; } } /* Display typography: editorial serif on top-level headings and the brand mark, with optical sizing for a more refined render. */ h1, h2, h3, h4, .brand{ font-family:Georgia, "Times New Roman", serif; font-optical-sizing: auto; letter-spacing: -0.015em; } /* Base */ *{ box-sizing:border-box; } html{ height:100%; overflow-x: hidden; /* Prevent horizontal scrollbar */ overflow-y: auto; width: 100%; scroll-behavior: smooth; } body{ margin:0; /* min-height (NOT height) so body can grow with content. With `height: 100%`, body is locked at viewport height; sticky elements have body as their containing block and get released as soon as body scrolls past — which on iOS made tapping an input yank .lp-header / .appbar above the viewport. min-height keeps the "fill viewport when content is short" behavior while letting sticky work over the full scroll range. */ min-height: 100%; /* Do NOT add `overflow-x: hidden` here. Combined with constrained body height it makes a scroll container for sticky purposes, but itself doesn't actually scroll — does. html already has overflow-x: hidden so horizontal overflow is still clipped. */ width: 100%; min-width: 0; /* Allow shrinking */ font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; /* Editorial palette (search-redesign-v2): flat paper. The original butter-yellow radial+linear gradient is gone so the sidebar and main column share one continuous warm-paper field. */ color: var(--ed-ink); background: var(--ed-paper); letter-spacing:.1px; } a{ color:#0e7dc2; text-decoration:none; } .hidden{ display:none!important; } /* Hero */ .hero-wrap{ min-height:auto; display:grid; grid-template-columns:1.15fr 1fr; grid-template-rows: minmax(calc(100vh - 60px), auto); gap:48px; align-items:center; background: radial-gradient(ellipse 800px 400px at 20% 0%, rgba(41,211,194,0.08), transparent 50%), linear-gradient(180deg, var(--mint) 0%, rgba(233,251,243,0.3) 60%, transparent 100%); padding-block: 80px; padding-inline: var(--container-inset); position: relative; overflow: hidden; width: 100%; min-width: 0; box-sizing: border-box; } .hero-wrap > * { min-width: 0; /* Allow grid children to shrink */ } .hero-left h1{ font-size:clamp(40px, 5.5vw, 68px); line-height:1.1; margin:0 0 16px; font-weight:800; letter-spacing:-.03em; color: var(--ink); } .hero-left p{ margin:0 0 24px; color:var(--muted); font-size:clamp(16px,2.1vw,18px); } .hero-intro{ margin:12px 0 28px; color:#5a6a82; font-size:clamp(15px,2vw,17px); line-height:1.6; max-width:520px; } .h1-highlight{ color:#0f766e; } .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } .ai-features{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Override sr-only when visible class is present */ .ai-features.hero-features-visible{ position: static; width: auto; height: auto; padding: 0; margin: 8px 0 0; overflow: visible; clip: auto; white-space: normal; border: 0; list-style: none; display: grid; gap: 6px; max-width: 520px; } .ai-features li{ color:#3a4a61; font-size:clamp(13px,1.8vw,15px); line-height:1.5; padding-left:20px; position:relative; } .ai-features li::before{ content:"✓"; position:absolute; left:0; color:#0f766e; font-weight:600; } /* Hero browse CTA */ .hero-browse-cta{ margin-top: 20px; display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; font-size: 15px; font-weight: 600; border-radius: 12px; scroll-behavior: smooth; } /* Hero "View ads" button */ .hero-view-ads-cta{ margin-top: 20px; display: inline-flex; align-items: center; gap: 8px; padding: 12px 28px; font-size: 16px; font-weight: 700; border-radius: 12px; cursor: pointer; } .hero-bullets{ display:grid; gap:10px; margin-top:8px; } .bullet{ display:flex; gap:12px; align-items:flex-start; color:#3a4a61; } /* Modern Icons */ .icon-sm{ width: 16px; height: 16px; display: inline-block; vertical-align: middle; margin-right: 6px; } .icon-xs{ width: 14px; height: 14px; display: inline-block; vertical-align: middle; margin-right: 6px; } /* Badge */ .badge{ background:linear-gradient(180deg,var(--teal),#72E6DA); width:26px; height:26px; border-radius:10px; display:grid; place-items:center; font-size:14px; font-weight:800; color:#06423C; box-shadow:var(--shadow); } .hero-bullets .badge{ --s:26px; width:var(--s); height:var(--s); min-width:var(--s); min-height:var(--s); border-radius:50%; padding:0; display:inline-grid; place-items:center; line-height:1; font-variant-numeric:tabular-nums; font-feature-settings:"tnum"; } /* Auth */ .auth-card{ background:rgba(255,255,255,0.95); backdrop-filter: blur(10px); border:1px solid rgba(234,245,247,0.8); border-radius:20px; box-shadow:0 8px 32px rgba(10,35,60,.08); padding:32px 28px; position: relative; min-width: 0; overflow: hidden; width: 100%; } .tabs{ display:flex; gap:8px; margin-bottom:18px; position:relative; } .tab{ flex:1; text-align:center; padding:12px 14px; border-radius:12px; cursor:pointer; font-weight:700; background:#F7FAFD; border:1px solid #e8eef5; color:#334a62; transition:transform .06s ease, box-shadow .12s ease; position:relative; overflow:hidden; z-index:1; } .tab:hover{ box-shadow:inset 0 0 0 2px #e3eef7; } .tab:active{ transform:translateY(1px); } /* Active state (class or ARIA) */ .tab.active, .tabs .tab[aria-selected="true"]{ background:#ECFFFB; border:1px solid #d6f5ef; color:#0f766e; box-shadow:none; } .tabs .indicator{ display:none; } /* intentionally hidden */ /* Layout helpers */ .grid{ display:grid; gap:12px; } .row{ display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; } .row>div{ flex:1 1 240px; } label{ font-size:13px; color:#5a6a82; display:block; margin-bottom:6px; } input,select,button{ width:100%; padding:12px 14px; font:inherit; color:var(--ink); background:#fff; border:1px solid #e5edf5; border-radius:12px; outline:none; } input:focus,select:focus{ border-color:var(--teal); box-shadow:0 0 0 4px var(--ring); } /* Custom select */ .select-wrap{ position:relative; } .select-wrap select{ appearance:none; background:#fff; border:1px solid #e5edf5; border-radius:12px; padding:12px 38px 12px 14px; width:100%; font:inherit; color:var(--ink); outline:none; } .select-wrap::after{ content:"▾"; position:absolute; right:12px; top:50%; transform:translateY(-50%); color:#6B7A90; pointer-events:none; font-weight:700; } /* Closed select text is bold by default */ #source_name { font-weight: 700; } /* If the placeholder (value="") is selected, make the closed select look like a placeholder */ #source_name:has(option:checked[value=""]) { font-weight: 400; color: var(--muted); /* lighter text when nothing chosen */ } /* Inside the dropdown list: keep the placeholder normal and the real categories bold */ #source_name option[value=""] { font-weight: 400; color: var(--muted); } #source_name option:not([value=""]) { font-weight: 700; } /* Buttons */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:12px 14px; border-radius:12px; font-weight:800; letter-spacing:.2px; cursor:pointer; border:0; position:relative; transition:transform .06s ease, box-shadow .12s ease, background .2s ease, opacity .2s ease; } .btn:hover{ box-shadow:0 6px 18px rgba(10,35,60,.10); } .btn:active{ transform:translateY(1px); } .btn:focus-visible{ outline:0; box-shadow:0 0 0 4px var(--ring); } .btn:disabled{ opacity:.55; cursor:not-allowed; box-shadow:none; } .btn-primary{ background:linear-gradient(180deg,#FFD770,var(--butter)); color:#2d2200; box-shadow:var(--shadow); } .btn-ghost{ background:#F5FAFF; color:#24405c; border:1px solid #e7eef7; } .btn-danger{ background:linear-gradient(180deg,#FF7F8C,#EF4444); color:#fff; } .btn.is-loading{ pointer-events:none; } .btn.is-loading::after{ content:""; position:absolute; right:12px; top:50%; transform:translateY(-50%); width:16px; height:16px; border-radius:50%; border:2px solid rgba(10,35,60,.25); border-top-color:rgba(10,35,60,.8); animation:spin .8s linear infinite; } @keyframes spin { to { transform: translateY(-50%) rotate(360deg); } } /* Shell / Appbar */ .shell{ min-height:100vh; display:flex; flex-direction:column; overflow-x: hidden; /* Prevent horizontal overflow */ width: 100%; max-width: 100vw; /* Never exceed viewport width */ position: relative; /* Ensure sticky positioning works */ /* No padding-top by default (mobile - header scrolls with content) */ } /* Add padding-top only on larger screens where header is fixed */ @media (min-width: 1025px) { .shell { padding-top: 60px; /* Space for fixed header (approximate header height) */ } } .appbar{ position:sticky; /* Sticky by default (mobile) - scrolls with content */ top:0; z-index:100; /* Higher z-index to ensure it stays on top */ backdrop-filter:blur(6px); background:rgba(255,255,255,.95); border-bottom:1px solid #eef2f6; display:flex !important; align-items:center; justify-content:space-between !important; padding-top: calc(12px + env(safe-area-inset-top, 0px)); padding-bottom: 12px; padding-inline: var(--container-inset); width: 100%; box-sizing: border-box; } /* Force stack to right side of appbar on all screen sizes */ .appbar > .stack { margin-left: auto !important; } /* Fixed header only on larger screens */ @media (min-width: 1025px) { .appbar { position:fixed !important; /* Fixed to viewport on desktop */ left: 0 !important; right: 0 !important; background:rgba(255,255,255,.95) !important; /* More opaque background for better visibility */ will-change: transform; } } /* On smaller screens, reduce header padding */ @media (max-width: 1024px) { .appbar { padding-inline: var(--page-gutter); justify-content: space-between !important; } .appbar > .stack { margin-left: auto !important; } } @media (max-width: 768px) { .appbar { padding-inline: 8px; /* DO NOT use padding-block here — that's shorthand for both top and bottom and would wipe out the safe-area padding-top (line 363). On iOS that left the iOS status bar / Dynamic Island overlapping the header content (NTAlert logo, language toggles, hamburger). Only override the bottom; keep padding-top: calc(12px + safe-area). */ padding-bottom: 6px; justify-content: space-between !important; } .appbar > .stack { margin-left: auto !important; } } @media (max-width: 480px) { .appbar { padding-inline: 4px; padding-bottom: 4px; justify-content: space-between !important; } .appbar > .stack { margin-left: auto !important; } } .brand{ display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:.2px; } .brand-badge{ width:32px; height:32px; border-radius:10px; display:grid; place-items:center; overflow:hidden; } .brand-badge img{ width:100%; height:100%; object-fit:contain; } .who{ color:#6e819a; font-size:14px; } /* --- Hamburger button: softer, crisper, animated --- */ .icon-btn{ --size: 38px; width: var(--size); height: var(--size); display: inline-grid; place-items: center; background: #fff; border-radius: 12px; border: 1px solid #e7eef7; box-shadow: 0 3px 10px rgba(10,35,60,.06); cursor: pointer; transition: box-shadow .15s ease, transform .06s ease, border-color .15s ease, background .15s ease; } .icon-btn:hover{ background:#F8FBFF; border-color:#dfe7f1; box-shadow: 0 6px 18px rgba(10,35,60,.10); } .icon-btn:active{ transform: translateY(1px); } /* keep the strong ring for keyboard only */ .icon-btn:focus{ box-shadow:none; } .icon-btn:focus:not(:focus-visible){ box-shadow:none; } .icon-btn:focus-visible{ outline:0; box-shadow:0 0 0 3px var(--ring); } /* icon */ .icon-btn{ display:flex; align-items:center; justify-content:center; } .hamburger{ /* tweak --w to 22–24px if you want even wider */ --w: 22px; /* bar width */ --h: 2px; /* bar thickness */ --gap: 6px; /* distance between bars */ position: relative; width: var(--w); height: var(--h); margin: 0 auto; /* center the middle bar */ background: #24405c; border-radius: 2px; } .appbar .icon-btn{ position: relative; } /* ensure a containing block */ .appbar .icon-btn .hamburger{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); /* same as the pseudos */ margin: 0; /* kill auto-centering */ width: var(--w); /* exact same width */ } .hamburger::before, .hamburger::after{ content:""; position: absolute; left: 50%; /* anchor from the middle */ transform: translateX(-50%); /* exact centering */ width: var(--w); height: var(--h); background:#24405c; border-radius: 2px; } .hamburger::before{ top: calc(-1 * var(--gap)); } .hamburger::after { top: var(--gap); } /* hover tint */ .icon-btn:hover .hamburger, .icon-btn:hover .hamburger::before, .icon-btn:hover .hamburger::after{ background:#1a5b54; /* subtle teal tint on hover */ } /* open state = morph to “X” */ .icon-btn.is-open .hamburger{ background: transparent; } .icon-btn.is-open .hamburger::before{ top: 0; transform: translateX(-50%) rotate(45deg); } .icon-btn.is-open .hamburger::after{ top: 0; transform: translateX(-50%) rotate(-45deg); } /* --- Dropdown: add a small caret & tighter spacing --- */ .app-menu{ position:relative; } .menu-dropdown{ position:absolute; right:0; top:calc(100% + 10px); z-index:60; min-width:200px; background:#fff; border:1px solid #eaf1f7; border-radius:14px; box-shadow: var(--shadow); padding:6px; display:none; } .menu-dropdown.open{ display:block; } /* caret that points to the button */ .menu-dropdown::before{ content:""; position:absolute; right:14px; top:-6px; width:12px; height:12px; transform:rotate(45deg); background:#fff; border-left:1px solid #eaf1f7; border-top:1px solid #eaf1f7; } .menu-item{ width:100%; text-align:left; border:0; background:#fff; cursor:pointer; padding:10px 12px; border-radius:10px; font-weight:700; color:#24405c; transition: background .12s ease, border-color .12s ease; } .menu-item:hover{ background:#ECFFFB; border:1px solid #d6f5ef; } .menu-item:hover{ background: var(--save-bg-hover); /* #EEF7FF */ border: 1px solid var(--save-border); /* #e7eef7 */ color: var(--save-text); /* keep text consistent */ } .menu-item:focus-visible{ outline:0; box-shadow:0 0 0 4px var(--ring); } .menu-item-danger{ color:#dc2626; } .menu-item-danger:hover{ background:#fef2f2; border-color:#fecaca; color:#b91c1c; } /* Menu submenu (expandable section) */ .menu-submenu-toggle{ display:flex; align-items:center; justify-content:space-between; width:100%; cursor:pointer; } .menu-submenu-toggle .menu-chevron{ width:14px; height:14px; transition:transform 0.2s ease; color:var(--muted); } .menu-submenu-toggle[aria-expanded="true"] .menu-chevron{ transform:rotate(180deg); } .menu-submenu-body{ max-height:0; overflow:hidden; transition:max-height 0.25s ease; } .menu-submenu-body.open{ max-height:80px; } .menu-submenu-body .menu-item{ padding-left:20px; font-size:13px; } .menu-divider{ border:0; border-top:1px solid #e5e7eb; margin:4px 0; } /* Menu toggle switch (for push notifications) */ .menu-toggle{ display:flex; align-items:center; justify-content:space-between; cursor:default; } .toggle-switch{ position:relative; display:inline-block; width:44px; height:24px; flex-shrink:0; } .toggle-switch input{ opacity:0; width:0; height:0; } .toggle-switch .slider{ position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0; background:#ccc; transition:.3s; border-radius:24px; } .toggle-switch .slider:before{ position:absolute; content:""; height:18px; width:18px; left:3px; bottom:3px; background:#fff; transition:.3s; border-radius:50%; } .toggle-switch input:checked + .slider{ background:var(--teal); } .toggle-switch input:checked + .slider:before{ transform:translateX(20px); } .toggle-switch input:disabled + .slider{ opacity:0.5; cursor:not-allowed; } /* Info tooltip for menu items */ .info-tooltip{ position:relative; display:inline-flex; align-items:center; margin-left:4px; vertical-align:middle; } .info-icon{ display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:#e0e7ef; font-size:13px; font-weight:700; color:#64748b; cursor:help; font-style:italic; font-family:Georgia,serif; flex-shrink:0; } .tooltip-text{ visibility:hidden; opacity:0; position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%); white-space:nowrap; background:#1e293b; color:#fff; padding:6px 10px; border-radius:6px; font-size:12px; font-weight:400; z-index:100; transition:opacity .2s, visibility .2s; max-width:200px; white-space:normal; text-align:center; } .tooltip-text::after{ content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%); border:5px solid transparent; border-top-color:#1e293b; } .info-tooltip:hover .tooltip-text{ visibility:visible; opacity:1; } /* Label with tooltip (for menu items) */ .label-tooltip{ position:relative; cursor:help; } .label-tooltip .tooltip-text{ visibility:hidden; opacity:0; position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%); background:#1e293b; color:#fff; padding:6px 10px; border-radius:6px; font-size:12px; font-weight:400; z-index:100; transition:opacity .2s, visibility .2s; max-width:200px; white-space:normal; text-align:center; } .label-tooltip .tooltip-text::after{ content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%); border:5px solid transparent; border-top-color:#1e293b; } .label-tooltip:hover .tooltip-text{ visibility:visible; opacity:1; } /* Not supported state for push notifications */ .menu-item.not-supported{ opacity:0.6; cursor:not-allowed; } .menu-item.not-supported .toggle-switch{ pointer-events:none; } .menu-item.not-supported .slider{ background:#cbd5e1; } @media (max-width: 1025px){ .app-menu { position: relative; margin-right: 8px; /* Add spacing from right edge */ } .app-menu .menu-dropdown{ right: 0; /* anchor to the right edge */ left: auto; /* don't anchor left */ min-width: 220px; /* wide enough for toggle */ max-width: calc(100vw - 24px); /* never exceed viewport */ } .app-menu .menu-dropdown::before{ right: 14px; /* caret on right side */ left: auto; } } @media (max-width: 480px){ .app-menu { margin-right: 12px; /* More spacing on very small screens */ } .app-menu .menu-dropdown{ min-width: 200px; } } /* Main grid */ .main{ padding:28px; padding-inline: var(--container-inset); display:grid; gap:18px; grid-template-columns:1.2fr 1fr; align-items:stretch; grid-auto-rows:minmax(0,auto); min-width: 0; /* Allow grid to shrink */ max-width: var(--container); /* Match header max-width (1200px) - content width only */ margin: 0 auto; /* Center the grid */ width: 100%; box-sizing: content-box; /* Padding is outside max-width, like header */ overflow-x: hidden; /* Prevent horizontal overflow */ } /* Reduce gap on desktop when showing 3 columns */ @media (min-width: 1025px) { .main { gap: 8px; /* Further reduced from 10px for better fit */ } } /* On smaller screens, adjust padding and constraints */ @media (max-width: 1024px) { .main { padding: 6px; /* Further reduced from 8px */ padding-inline: 6px; /* Further reduced from 8px */ max-width: 100%; /* Remove max-width constraint on smaller screens */ box-sizing: border-box; /* Include padding in width calculation */ width: 100%; gap: 6px; /* Further reduced from 8px */ } } /* On mobile, use even smaller padding */ @media (max-width: 768px) { .main { padding: 2px; /* Further reduced from 4px */ padding-inline: 2px; /* Further reduced from 4px */ gap: 2px; /* Further reduced from 4px */ } } /* On very small mobile, use minimal padding */ @media (max-width: 480px) { .main { padding: 0; /* No padding on very small mobile */ padding-inline: 2px; /* Further reduced from 4px */ gap: 2px; /* Further reduced from 4px */ } } /* Ensure preview column doesn't shrink below minimum */ @media (min-width: 1025px) { .main { grid-template-columns: minmax(400px, 450px) minmax(550px, 1fr); /* Fixed search width, min 550px for preview */ } /* Ensure preview doesn't shrink */ .main > #cardPreview { min-width: 550px; } } /* Prevent search widget from shrinking on larger screens */ .main > #cardCreate { min-width: 400px; /* Minimum width for search form */ max-width: 450px; /* Maximum width to prevent it from getting too wide */ width: 100%; } /* On larger screens, ensure search widget maintains its size and preview doesn't shrink */ @media (min-width: 1400px) { .main:not(:has(#cardCreate:not(.hidden))) { grid-template-columns: 450px 1fr; /* Fixed search, flexible preview (only when form hidden) */ } .main > #cardPreview { min-width: 600px; } /* When form is visible, maintain fixed preview width */ .main:has(#cardCreate:not(.hidden)) { grid-template-columns: minmax(400px, 450px) minmax(550px, 750px) !important; /* Fixed max preview width */ } #cardCreate:not(.hidden) ~ #cardPreview { max-width: 750px !important; /* Prevent preview from growing too much */ } } /* On very large screens, ensure preview maintains minimum width */ @media (min-width: 1600px) { .main:not(:has(#cardCreate:not(.hidden))) { grid-template-columns: 450px 1fr; /* Fixed search, flexible preview (only when form hidden) */ } .main > #cardPreview { min-width: 650px; } /* When form is visible, maintain fixed preview width */ .main:has(#cardCreate:not(.hidden)) { grid-template-columns: minmax(400px, 450px) minmax(550px, 750px) !important; /* Fixed max preview width */ } #cardCreate:not(.hidden) ~ #cardPreview { max-width: 750px !important; /* Prevent preview from growing too much */ } } /* When preview-only, make it full width for three-column layout */ .shell.preview-only .main { grid-template-columns: 1fr; max-width: var(--container); /* Match header max-width (1200px) - content only */ margin: 0 auto; box-sizing: content-box; /* Padding outside max-width, like header */ } .main > *{ min-width:0; } /* overflow guard */ .wide{ grid-column:1 / -1; } /* Cards */ .card{ background:var(--card); border:1px solid #eef2f6; border-radius:var(--radius); box-shadow:var(--shadow); padding:18px; display:flex; flex-direction:column; min-height:0; height:100%; } /* Reduce card padding on mobile */ @media (max-width: 768px) { .card { padding: 10px; } } @media (max-width: 480px) { .card { padding: 6px; } } .card h3{ margin:0 0 12px; font-size:18px; } .split{ display:grid; gap:12px; grid-template-columns:1fr 1fr; } .stack{ display:flex; gap:12px; flex-wrap:wrap; } .pill{ display:inline-flex; gap:8px; align-items:center; padding:10px 16px; border-radius:999px; background:rgba(255,255,255,0.9); backdrop-filter: blur(8px); border:1px solid rgba(41,211,194,0.25); font-size:13px; font-weight:600; color:#0f766e; margin-bottom: 24px; box-shadow: 0 2px 8px rgba(10,35,60,.06); transition: all 0.2s ease; } .pill:hover{ box-shadow: 0 4px 12px rgba(10,35,60,.1); border-color: rgba(41,211,194,0.35); transform: translateY(-1px); } .pill svg{ width: 16px; height: 16px; color: #29D3C2; flex-shrink: 0; } .log{ background:#0b1525; border:1px solid #1a2b45; border-radius:14px; padding:12px; white-space:pre-wrap; max-height:480px; overflow:auto; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace; color:#baf7c8; } /* Ads preview (desktop base) */ #cardPreview{ display:flex; flex-direction:column; height:100%; min-height:0; align-self:stretch; overflow:hidden; contain:size; /* lock height to its own content (desktop) */ min-width: 550px; /* Minimum width to prevent shrinking */ flex: 1 1 auto; /* Allow growing and shrinking */ width: 100%; /* Full width of grid cell */ max-width: 100%; /* Don't exceed grid cell */ box-sizing: border-box; /* Include padding/border in width */ } #cardPreview .results{ background:linear-gradient(180deg,#fff,#FAFEFD); padding:16px; /* Increased padding for better spacing */ flex:1 1 auto; min-height:140px; overflow:auto; overscroll-behavior:contain; border:0; /* ⬅ no border */ border-radius:0; /* ⬅ no rounded frame */ box-shadow:none; /* safety: no shadow from wrapper */ width: 100%; /* Ensure full width */ min-width: 0; /* Allow shrinking */ box-sizing: border-box; /* Include padding in width */ max-width: 100%; /* Don't exceed container */ } /* Reduce padding in preview results on desktop for 3 columns */ @media (min-width: 1025px) { #cardPreview .results { padding: 8px; /* Further reduced from 10px for better fit with 3 columns */ } } .results-list{ list-style:none; margin:0; padding:0; display:grid; gap:8px; grid-template-columns: 1fr; align-items: stretch; /* Equal height cards per row */ } /* Tablet/Medium screens: Two columns with constrained width */ @media (min-width: 768px) and (max-width: 1024px) { .results-list { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); /* Further reduced min from 280px */ gap: 8px; /* Further reduced from 10px */ justify-content: center; } .results-item { max-width: 100%; /* Allow full width on tablet */ } } /* Desktop: Three columns with constrained card sizes */ @media (min-width: 1025px) { .results-list { grid-template-columns: repeat(3, minmax(250px, 1fr)); /* Further reduced min from 260px to 250px */ gap: 8px; /* Further reduced from 10px */ width: 100%; max-width: 100%; box-sizing: border-box; } .results-item { max-width: 100%; /* Use full grid cell width */ width: 100%; min-width: 0; /* Allow shrinking within grid cell */ box-sizing: border-box; } /* When form is visible, show single column in preview */ #cardCreate:not(.hidden) ~ #cardPreview .results-list { grid-template-columns: 1fr !important; max-width: 100% !important; width: 100% !important; gap: 6px !important; /* Smaller gap when single column */ } } /* Large screens: Keep three columns with consistent card sizes */ @media (min-width: 1400px) { .results-list { gap: 8px; /* Further reduced from 10px */ grid-template-columns: repeat(3, minmax(260px, 1fr)); /* Further reduced min from 270px to 260px */ } } /* Extra large screens: Prevent cards from getting too wide */ @media (min-width: 1600px) { .results-list { gap: 10px; /* Further reduced from 12px */ grid-template-columns: repeat(3, minmax(280px, 1fr)); /* Further reduced min from 290px to 280px */ } } /* Very large screens: Keep consistent card sizes */ @media (min-width: 1800px) { .results-list { gap: 10px; /* Consistent with extra large */ grid-template-columns: repeat(3, minmax(280px, 1fr)); /* Consistent sizing */ } } .results-item{ display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; /* Content at top, extra space at bottom */ gap:0; padding:0; border:1px solid #eaf1f7; border-radius:16px; background:#fff; box-shadow:0 4px 16px rgba(10,35,60,.06); transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease; text-decoration:none; color:inherit; min-width:0; height:100%; /* Fill grid cell */ width:100%; overflow:hidden; position: relative; contain: layout style; } .results-item:hover{ transform:translateY(-2px); border-color:#d6f5ef; box-shadow:0 8px 24px rgba(10,35,60,.12); } /* Image container - full width on desktop */ .results-image{ width:100%; height:180px; /* Increased from 160px for better visual balance */ aspect-ratio: 16 / 9; border-radius:0; /* No radius, card handles it */ overflow:hidden; background:#f8fafc; flex-shrink:0; position:relative; align-self:stretch; } /* Subtle gradient overlay for price/badge legibility */ .results-image::after{ content:''; position:absolute; bottom:0; left:0; right:0; height:60px; background:linear-gradient(transparent, rgba(0,0,0,0.08)); pointer-events:none; z-index:1; } .results-image-img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.2s ease, opacity 0.3s ease; opacity:0; animation:fadeInImage 0.3s ease forwards; } @keyframes fadeInImage{ from{ opacity:0; } to{ opacity:1; } } .results-item:hover .results-image-img{ transform:scale(1.05); } /* Placeholder when no image */ .results-image-placeholder{ display:flex; flex-direction:column; align-items:center; justify-content:center; background:linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%); border:1px solid #d6f5ef; color:#6B7A90; } .results-image-placeholder-content{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center; } .results-image-placeholder-content svg{ color:#94a3b8; opacity:0.7; } .results-image-placeholder-content span{ font-size:11px; font-weight:500; color:#6B7A90; } .results-city{ font-size:12px; color:#256b43; background:#F0FFF8; border:1px solid #d6f5e5; border-radius:999px; padding:4px 10px; white-space:nowrap; flex-shrink:0; height:28px; display:inline-flex; align-items:center; box-sizing:border-box; line-height:1.2; } .results-addr{ /* title/address bigger */ color:#24405c; font-weight:600; font-size:16px; line-height:1.4; margin:0; margin-top:8px; /* Space from header row */ width:100%; flex: 0 0 auto; /* Don't grow, maintain natural height */ } /* Price row - keeps price and price-change on same row */ .price-row { display: flex; flex-direction: row; align-items: center; gap: 6px; flex-wrap: nowrap; justify-content: flex-end; } /* Desktop: Price row in header - always visible */ .results-price-wrapper > .price-row { display: flex !important; /* Always visible */ flex-direction: row; align-items: center; gap: 6px; flex-wrap: nowrap; opacity: 1 !important; /* Always visible */ visibility: visible !important; /* Always visible */ } /* Desktop: Position price on image overlay - always visible */ @media (min-width: 1025px) { .results-item { position: relative !important; /* Ensure price is positioned relative to card, not page */ } .results-price-wrapper { position: absolute !important; right: 12px !important; top: 12px !important; /* Position on top of image */ z-index: 10 !important; opacity: 1 !important; visibility: visible !important; display: flex !important; } /* Ensure price elements are visible */ .results-price-wrapper .results-price, .results-price-wrapper .price-change, .results-price-wrapper .results-button-group { opacity: 1 !important; visibility: visible !important; display: flex !important; } } /* In preview widget ONLY when edit form is visible, stack price and price-change vertically */ #cardCreate:not(.hidden) ~ #cardPreview .price-row { flex-direction: column; align-items: flex-end; gap: 4px; } .results-price{ font-weight:700; font-size:14px; color:#fff; background:#1e293b; /* Dark slate - modern neutral */ border:none; border-radius:8px; padding:6px 12px; white-space: nowrap; line-height:1.2; height:28px; display:inline-flex; align-items:center; box-sizing:border-box; transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; } /* Price lift effect on card hover */ .results-item:hover .results-price{ transform: translateY(-1px); box-shadow: 0 4px 12px rgba(30, 41, 59, 0.25); background:#334155; /* Lighter slate on hover */ } /* Price change indicator - badge style like feature-tags */ .price-change { /*