:root{ --bg0:#07101b; --bg1:#0b1830; --card: rgba(255,255,255,.06); --card2: rgba(255,255,255,.08); --stroke: rgba(255,255,255,.12); --stroke2: rgba(255,255,255,.18); --text: rgba(255,255,255,.92); --muted: rgba(255,255,255,.72); --muted2: rgba(255,255,255,.62); --accent:#3b82f6; --ok:#22c55e; --warn:#f59e0b; --err:#ef4444; --shadow: 0 18px 50px rgba(0,0,0,.35); --radius: 18px; } *{ box-sizing:border-box; } html,body{ height:100%; } html{ /* Put the background on to avoid any tiling/seams while scrolling */ background: radial-gradient(1200px 700px at 25% -10%, rgba(59,130,246,.24), transparent 60%), radial-gradient(900px 600px at 90% 10%, rgba(34,197,94,.14), transparent 55%), radial-gradient(900px 600px at 40% 100%, rgba(245,158,11,.10), transparent 55%), linear-gradient(180deg, var(--bg0), var(--bg1)); background-repeat: no-repeat; background-attachment: fixed; } body{ margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; color: var(--text); background: transparent; min-height: 100vh; } .wrap{ max-width: 1180px; margin: 0 auto; padding: 18px 14px 40px; } .topbar{ display:flex; align-items:center; justify-content:space-between; padding: 10px 14px; position: sticky; top:0; z-index:10; backdrop-filter: blur(12px); background: rgba(7,16,27,.55); border-bottom: 1px solid rgba(255,255,255,.08); } .topbar-logo{ display:flex; align-items:center; gap:10px; text-decoration:none; color: var(--text); } .utixo-logo{ height: 34px; width:auto; display:block; /* logo.png has a white background: make it look intentional */ background: rgba(255,255,255,.95); border-radius: 12px; padding: 4px; } .brand-title{ color: var(--text); text-decoration: none; display: inline-block; } .brand-title:hover{ text-decoration: underline; } .header{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin: 14px 0 14px; } .brand{ display:flex; align-items:center; gap:12px; } .brand-logo{ display:flex; } .brand-text h1{ margin:0; font-size: 20px; letter-spacing: .2px; } .sub{ margin-top: 3px; color: rgba(255,255,255,.72); font-size: 12.5px; } .badge{ display:inline-flex; align-items:center; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--stroke); background: rgba(255,255,255,.06); color: rgba(255,255,255,.86); font-weight: 800; font-size: 12px; } .badge.ok{ border-color: rgba(34,197,94,.45); } .badge.warn{ border-color: rgba(245,158,11,.45); } .badge.err{ border-color: rgba(239,68,68,.45); } .card{ background: var(--card); border: 1px solid var(--stroke); border-radius: var(--radius); box-shadow: var(--shadow); backdrop-filter: blur(14px); } .hero{ padding: 14px; } .section{ padding: 14px; } .grid{ display:grid; grid-template-columns: 1fr; gap: 14px; margin-top: 14px; } @media (max-width: 980px){ .header .badge{ display:none; } } .row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; } .input{ display:flex; align-items:center; gap:10px; padding: 12px 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 16px; } .icon{ opacity:.8; } input{ width:100%; border:none; outline:none; background: transparent; color: var(--text); font-size: 14px; } .btn{ border: 1px solid rgba(255,255,255,.15); background: linear-gradient(180deg, rgba(59,130,246,.96), rgba(37,99,235,.96)); color: white; font-weight: 900; border-radius: 14px; padding: 11px 14px; cursor:pointer; transition: transform .08s ease, filter .12s ease; } .btn:hover{ filter: brightness(1.05); } .btn:active{ transform: scale(.985); } .btn.secondary{ background: rgba(255,255,255,.06); color: rgba(255,255,255,.92); border: 1px solid rgba(255,255,255,.16); } .btn.secondary:hover{ background: rgba(255,255,255,.08); } .small{ margin-top: 10px; font-size: 12px; color: rgba(255,255,255,.70); } .hr{ height:1px; background: rgba(255,255,255,.10); margin: 12px 0; } .title{ display:flex; align-items:center; justify-content:space-between; gap: 10px; margin-bottom: 10px; } .title-left{ display:flex; align-items:center; gap: 10px; min-width: 0; } .title h2{ margin:0; font-size: 14px; letter-spacing: .2px; } /* Collapsible sections */ .collapse-btn{ display:inline-flex; align-items:center; justify-content:center; width: 38px; height: 38px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: rgba(255,255,255,.88); cursor: pointer; transition: transform .12s ease, background .12s ease, border-color .12s ease; } .collapse-btn:hover{ background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); } .collapse-btn svg{ transition: transform .14s ease; } .collapse-btn.is-collapsed svg{ transform: rotate(-90deg); } .section-body{ min-width: 0; } .kv{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; } @media (max-width: 520px){ .kv{ grid-template-columns: 1fr; } } .k{ font-size: 11px; color: rgba(255,255,255,.62); margin-bottom: 4px; } .v{ font-size: 14px; font-weight: 800; color: rgba(255,255,255,.92); } .mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } .list{ display:flex; flex-direction:column; gap: 10px; } .item{ padding: 12px; border-radius: 16px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.10); } .chips{ display:flex; gap: 8px; flex-wrap:wrap; } .chip{ display:inline-flex; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); color: rgba(255,255,255,.88); font-weight: 800; font-size: 12px; } .hchip{ border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); color: rgba(255,255,255,.9); border-radius: 999px; padding: 7px 10px; cursor:pointer; display:inline-flex; gap:8px; align-items:center; } .hchip:hover{ background: rgba(255,255,255,.08); } .status{ display:inline-flex; align-items:center; gap: 8px; font-weight: 900; font-size: 12px; color: rgba(255,255,255,.88); } .dot{ width: 9px; height: 9px; border-radius: 99px; display:inline-block; } .dot.ok{ background: var(--ok); } .dot.warn{ background: var(--warn); } .dot.err{ background: var(--err); } .techmeta{ margin-top: 8px; font-size: 12px; color: rgba(255,255,255,.70); } .loader{ display:none; align-items:center; gap: 10px; margin-top: 10px; color: rgba(255,255,255,.80); font-weight: 800; font-size: 12px; } /* History chips spacing */ .history{ display:flex; flex-wrap:wrap; gap: 8px; margin-top: 12px; } .spin{ width: 16px; height: 16px; border-radius: 999px; border: 2px solid rgba(255,255,255,.18); border-top-color: rgba(255,255,255,.75); animation: spin 1s linear infinite; } @keyframes spin{ to{ transform: rotate(360deg); } } /* Score text */ .score-text{ margin-top:10px; font-weight: 900; color: rgba(255,255,255,.90); } .score-reasons{ margin-top:6px; color: rgba(255,255,255,.72); } /* Footer */ .site-footer{ margin-top:18px; padding: 16px 6px 26px; } .site-footer-inner{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:center; color: rgba(255,255,255,.62); font-size: 12px; } .site-footer-inner a{ color: rgba(255,255,255,.78); text-decoration:none; font-weight: 800; } .site-footer-inner a:hover{ text-decoration: underline; } .dotsep{ opacity: .55; } /* About */ .abouttext{ color: rgba(255,255,255,.78); line-height: 1.55; } .abouttext ul{ margin: 8px 0 14px 18px; } .abouttext li{ margin: 6px 0; } /* ----------------------------- Mobile layout FIX (replace old mobile blocks) Put this at the VERY END of app.css ----------------------------- */ @media (max-width: 640px){ /* overall spacing */ .wrap{ padding: 12px 10px 28px; } .topbar{ padding: 8px 10px; } /* header: less tall, avoid weird wrapping */ .header{ flex-direction: column; align-items: flex-start; gap: 8px; margin: 10px 0; } .brand-text h1{ font-size: 17px; line-height: 1.15; } .sub{ font-size: 12px; line-height: 1.25; } /* hero: tighten */ .hero{ padding: 12px; } .section{ padding: 12px; } /* --- IMPORTANT: first row (search + analyze + example) becomes a clean grid --- */ .hero > .row:first-of-type{ display: grid; grid-template-columns: 1fr 1fr; /* two buttons under the input */ gap: 10px; align-items: stretch; } /* input full width on its own row */ .hero > .row:first-of-type .input{ grid-column: 1 / -1; width: 100%; padding: 10px 10px; border-radius: 14px; } /* buttons same size, NOT huge */ #go, #ex{ width: 100%; min-width: 0; padding: 10px 12px; border-radius: 14px; font-size: 14px; } /* history chips smaller and not too tall */ .history{ margin-top: 10px; gap: 6px; } .hchip{ padding: 6px 9px; font-size: 12px; } /* action buttons row (Share/Copy/Export): keep 2x2 but compact */ .hero .row:last-of-type{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; margin-top: 12px; } .hero .row:last-of-type .btn{ width: 100%; padding: 10px 12px; border-radius: 14px; font-size: 13.5px; } /* cards and chips slightly smaller */ .item{ padding: 11px; border-radius: 14px; } .chip{ padding: 5px 9px; font-size: 11.5px; } .k{ font-size: 10.5px; } .v{ font-size: 13.5px; } } /* ultra small phones: stack buttons 1 per row */ @media (max-width: 360px){ .hero > .row:first-of-type{ grid-template-columns: 1fr; } .hero .row:last-of-type{ grid-template-columns: 1fr; } } /* --- Mobile: cards width + overflow fix (append after your mobile block) --- */ @media (max-width: 640px){ /* give breathing room so cards don't feel full-bleed */ .wrap{ padding-left: 14px; padding-right: 14px; max-width: 520px; /* keeps cards visually narrower on phones */ margin-left: auto; margin-right: auto; } /* never let cards/sections overflow viewport */ .card{ width: 100%; max-width: 100%; overflow: hidden; /* avoids "wider than phone" look */ } /* long strings were pushing width (domains, reverse, TXT, etc.) */ .mono, .v, .item, .chip{ overflow-wrap: anywhere; word-break: break-word; } /* chips container shouldn't create horizontal scroll */ .chips{ max-width: 100%; } /* sometimes inner rows force width */ .grid, .section, .hero, .list{ max-width: 100%; min-width: 0; } }