/* ============================================================ Meto Tech — main.css (VISUAL UPGRADE, drop-in replacement) ------------------------------------------------------------ This is a SKIN-ONLY upgrade of the original main.css. - Same class names, same structure, same selectors. - No HTML/template/logic changes required (one exception: add the font to base.html — see README). - Safe to drop in over static/css/main.css. What changed vs. original (all visual): - Typeface: Hanken Grotesk for UI, JetBrains Mono for numbers - Tokens: softer borders, larger radius (8 -> 11px), refined muted - Body: subtle cyan radial wash on the near-black background - Sidebar active state: accent bar + cyan glow - Cards / stats / map: gradient surfaces + soft depth shadows - Buttons: gradient primary + lift on hover + focus rings - Inputs/selects: focus ring, custom chevron - Table: tighter type, cyan-tinted row hover - .score-chip promoted here (was inline in scrape/search.html) ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;600;700&display=swap'); *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --bg: #04080d; --surface: rgba(255,255,255,.035); --surface2: rgba(255,255,255,.06); --border: rgba(138,150,163,.16); --accent: #00E5FF; --accent-rgb: 0,229,255; --accent-border: rgba(0,229,255,.36); --cream: #ffffff; --muted: #7d8a99; --success: #22c55e; --danger: #ef4444; --r: 11px; --font: 'Hanken Grotesk', system-ui, -apple-system, sans-serif; --font-mono:'JetBrains Mono', ui-monospace, monospace; --shadow-card: 0 1px 0 0 rgba(255,255,255,.04) inset, 0 24px 48px -32px rgba(0,0,0,.9); --shadow-pop: 0 12px 40px -12px rgba(0,0,0,.8); } html, body { background: radial-gradient(80% 60% at 50% -10%, rgba(0,229,255,.06), transparent 60%), radial-gradient(90% 70% at 100% 0%, rgba(0,229,255,.04), transparent 55%), #04080d; background-attachment: fixed; color: var(--cream); font-family: var(--font); font-size: 16px; line-height: 1.6; min-height: 100vh; letter-spacing: -.005em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } a { color: var(--accent); text-decoration: none; } a:hover { opacity: .78; } /* Tabular figures for any numeric-heavy element */ .mono, .stat-value, .score-chip, .basket-item-price, .basket-total span { font-family: var(--font-mono); font-feature-settings: "tnum"; } /* ── APP SHELL (sidebar layout) ── */ .app-shell { display: flex; min-height: 100vh; } .sidebar { width: 260px; flex-shrink: 0; background: linear-gradient(180deg, #070f17, #050a11); border-right: 1px solid rgba(138,150,163,.12); display: flex; flex-direction: column; justify-content: space-between; position: fixed; top: 0; left: 0; bottom: 0; z-index: 50; overflow-y: auto; } .sidebar-top { padding: 28px 20px 20px; } .sidebar-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 32px; text-decoration: none; } .sidebar-brand-mark { width: 26px; height: auto; flex-shrink: 0; } .sidebar-brand-text { font-size: 1.05rem; font-weight: 800; color: #fff; letter-spacing: -.03em; } .sidebar-brand-accent { color: var(--accent); } .sidebar-nav { display: flex; flex-direction: column; gap: 4px; } .sidebar-section-label { margin: 16px 10px 5px; color: #5a6672; font-size: .6rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; } .sidebar-link { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 10px; position: relative; color: var(--muted); font-size: .9rem; font-weight: 500; text-decoration: none; transition: background .15s, color .15s; } .sidebar-link svg { width: 18px; height: 18px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .sidebar-link:hover { background: rgba(255,255,255,.04); color: var(--cream); opacity: 1; } .sidebar-link.active { background: linear-gradient(90deg, rgba(0,229,255,.16), rgba(0,229,255,.04)); color: #7df4ff; box-shadow: inset 0 0 0 1px rgba(0,229,255,.22); } .sidebar-link.active::before { content: ""; position: absolute; left: -20px; top: 50%; transform: translateY(-50%); width: 3px; height: 20px; border-radius: 0 3px 3px 0; background: var(--accent); box-shadow: 0 0 12px 1px rgba(0,229,255,.7); } .sidebar-link-disabled { cursor: default; opacity: .42; } .sidebar-link-disabled:hover { background: transparent; color: var(--muted); } .sidebar-bottom { padding: 16px 20px 24px; border-top: 1px solid var(--border); } .sidebar-biz { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--r); background: linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); border: 1px solid rgba(138,150,163,.16); box-shadow: 0 8px 24px -16px rgba(0,0,0,.9); } .sidebar-biz-icon { width: 36px; height: 36px; border-radius: 8px; background: linear-gradient(160deg,#0c2730,#08161d); box-shadow: inset 0 0 0 1px rgba(0,229,255,.18); display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; } .sidebar-biz-icon img { width: 100%; height: 100%; object-fit: cover; } .sidebar-biz-icon svg { width: 18px; height: 18px; stroke: var(--accent); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .sidebar-biz-info { display: flex; flex-direction: column; min-width: 0; } .sidebar-biz-name { font-size: .85rem; font-weight: 600; color: var(--cream); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar-biz-sub { font-size: .75rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar-logout { width: 100%; padding: 8px 0; border: none; background: none; color: var(--muted); font-size: .82rem; cursor: pointer; text-align: left; font-family: var(--font); transition: color .15s; } .sidebar-logout:hover { color: var(--cream); } .app-main { margin-left: 260px; flex: 1; min-width: 0; } /* ── HAMBURGER / MOBILE TOPBAR ── */ .mobile-topbar { display: none; } .hamburger { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--r); cursor: pointer; flex-shrink: 0; } .hamburger svg { width: 20px; height: 20px; stroke: var(--cream); fill: none; stroke-width: 2; stroke-linecap: round; } .sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 199; } @media (max-width: 768px) { .sidebar { position: fixed; top: 0; left: 0; bottom: 0; z-index: 200; transform: translateX(-100%); transition: transform .25s ease; box-shadow: 4px 0 24px rgba(0,0,0,.4); } .sidebar.open { transform: translateX(0); } .sidebar-backdrop.open { display: block; } .app-main { margin-left: 0; } .hamburger { display: flex; } .mobile-topbar { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border); background: rgba(4,8,13,.9); backdrop-filter: blur(10px); position: sticky; top: 0; z-index: 90; } .mobile-topbar-title { font-size: .95rem; font-weight: 600; color: var(--cream); flex: 1; } } /* ── NAV (logged-out marketing) ── */ .nav { display: flex; align-items: center; justify-content: space-between; padding: 20px 32px; position: sticky; top: 0; background: rgba(4,8,13,.8); backdrop-filter: blur(10px); z-index: 100; } .nav-brand { display: flex; align-items: center; gap: 8px; font-size: 1.05rem; font-weight: 800; color: var(--cream); text-decoration: none; letter-spacing: -.02em; } .nav-brand span { color: var(--accent); } .nav-links { display: flex; gap: 20px; align-items: center; } .nav-links a { color: var(--muted); font-size: .88rem; letter-spacing: .02em; } .nav-links a:hover { color: var(--cream); opacity: 1; } /* ── LAYOUT ── */ .container { max-width: 1100px; margin: 0 auto; padding: 40px 24px; } .container-sm { max-width: 520px; margin: 0 auto; padding: 40px 24px; } .container-xs { max-width: 420px; margin: 0 auto; padding: 40px 16px; } /* ── MESSAGES ── */ .messages { padding: 0 24px; } .message { padding: 12px 16px; border-radius: var(--r); margin: 10px 0; font-size: .9rem; } .message-success { background: rgba(34,197,94,.12); border: 1px solid rgba(34,197,94,.3); color: #86efac; } .message-error { background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.3); color: #fca5a5; } .message-info { background: rgba(var(--accent-rgb),.10); border: 1px solid rgba(var(--accent-rgb),.36); color: var(--accent); } /* ── CARDS ── */ .card { background: linear-gradient(165deg, rgba(255,255,255,.045), rgba(255,255,255,.012)); border: 1px solid rgba(138,150,163,.14); border-radius: 14px; padding: 24px; box-shadow: var(--shadow-card); } .card + .card { margin-top: 16px; } .module-card-title { color: #6b7785; font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 16px; } .module-card-spaced { margin-bottom: 16px; } .module-form-grid, .module-filter-grid { display: grid; gap: 12px; align-items: end; } .module-form-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } .module-filter-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .module-stack-form { display: flex; flex-direction: column; gap: 12px; } .form-group-compact { margin: 0; } .form-group-wide { grid-column: 1 / -1; } .module-action { height: 42px; } .module-form-error { color: var(--danger); font-size: .85rem; margin-top: 12px; } .module-empty { color: var(--muted); font-size: .9rem; padding: 12px 0; } .module-muted { color: var(--muted); font-size: .9rem; } .module-description { color: var(--muted); font-size: .9rem; line-height: 1.6; margin-top: 16px; } .table-main-cell { font-weight: 600; } .table-muted-cell { color: var(--muted); } /* ── FORMS ── */ .form-group { margin-bottom: 18px; } .form-group label { display: block; font-size: .7rem; color: #6b7785; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 7px; } .form-group input, .form-group textarea, .form-group select { width: 100%; background: rgba(255,255,255,.04); border: 1px solid rgba(138,150,163,.2); border-radius: 10px; color: var(--cream); padding: 11px 14px; font-size: .95rem; font-family: var(--font); outline: none; transition: border-color .18s, box-shadow .18s; } .form-group select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='6 9 12 15 18 9' fill='none' stroke='%237d8a99' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 15px; padding-right: 36px; } .form-group input:focus, .form-group textarea:focus, .form-group select:focus { border-color: var(--accent-border); box-shadow: 0 0 0 3px rgba(0,229,255,.14); } .form-group input[type="color"] { height: 42px; padding: 4px 8px; cursor: pointer; } .form-group textarea { resize: vertical; min-height: 80px; } .errorlist { list-style: none; color: #fca5a5; font-size: .82rem; margin-top: 4px; } .helptext { font-size: .78rem; color: var(--muted); margin-top: 4px; } /* ── BUTTONS ── */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 10px; font-size: .9rem; font-weight: 600; cursor: pointer; border: none; font-family: var(--font); text-decoration: none; letter-spacing: .005em; transition: transform .12s, box-shadow .18s, opacity .15s, border-color .15s, background .15s; } .btn:hover { opacity: 1; transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn-primary { background: linear-gradient(180deg,#3df0ff,#00d2ec); color: #00181d; box-shadow: 0 8px 24px -10px rgba(0,229,255,.6), inset 0 1px 0 rgba(255,255,255,.4); } .btn-primary:hover { box-shadow: 0 12px 30px -10px rgba(0,229,255,.75), inset 0 1px 0 rgba(255,255,255,.5); } .btn-danger { background: var(--danger); color: #fff; } .btn-ghost { background: rgba(255,255,255,.02); border: 1px solid rgba(138,150,163,.24); color: var(--cream); } .btn-ghost:hover { border-color: var(--accent-border); color: #7df4ff; background: rgba(0,229,255,.05); } .btn-success { background: var(--success); color: #fff; } .btn-sm { padding: 6px 14px; font-size: .82rem; } .btn-block { width: 100%; justify-content: center; } /* ── TABLE ── */ .table-wrap { overflow-x: auto; } table { width: 100%; border-collapse: collapse; font-size: .9rem; } th { text-align: left; padding: 12px 12px; color: #65717f; font-size: .66rem; text-transform: uppercase; letter-spacing: .1em; border-bottom: 1px solid rgba(138,150,163,.16); } td { padding: 14px 12px; border-bottom: 1px solid rgba(138,150,163,.08); vertical-align: middle; transition: background .12s; } tr:last-child td { border-bottom: none; } tbody tr:hover td { background: rgba(0,229,255,.045); } /* ── INTERVENTIONS TABLE SCROLL ── */ .table-scroll { overflow: auto; max-height: calc(100vh - 280px); cursor: grab; } .table-scroll.dragging { cursor: grabbing; user-select: none; } .table-scroll thead th { background: #060d14; position: sticky; top: 0; z-index: 3; } .tr-new td { position: sticky; top: 41px; z-index: 2; background: #060d14; border-bottom: 1px solid var(--border); } .tr-new { cursor: pointer; } .tr-new td { color: var(--muted); font-size: .82rem; padding: 10px 14px; transition: color .15s; } .tr-new:hover td { color: var(--accent); } .tr-new-inner { display: inline-flex; align-items: center; gap: 6px; } .td-act { width: 36px; text-align: center; padding: 0 8px !important; } .act-plus { background: none; border: 1px solid var(--border); border-radius: 6px; color: var(--muted); width: 24px; height: 24px; font-size: 1rem; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: border-color .15s, color .15s; font-family: var(--font); } .act-plus:hover { border-color: var(--accent); color: var(--accent); } /* ── SORTABLE TABLE HEADERS ── */ .th-sort { cursor: pointer; user-select: none; white-space: nowrap; color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; } .th-sort:hover { color: var(--cream); opacity: 1; } .th-sort-icon { opacity: .4; font-size: .8em; } .th-sort-icon::after { content: "↕"; } .th-sort.asc .th-sort-icon::after { content: "↑"; opacity: 1; } .th-sort.desc .th-sort-icon::after { content: "↓"; opacity: 1; } .th-sort.asc .th-sort-icon, .th-sort.desc .th-sort-icon { opacity: 1; color: var(--accent); } /* ── SCORE CHIP (promoted from scrape/search.html inline