/* ─── HobbyComp shared stylesheet ─── */ /* Loaded by every page. Browsers cache this after the first hit, so subsequent pages pay zero CSS parse cost. */ /* ── FONTS (preconnect handled in each HTML ) ── */ :root { --purple: #5B3FA6; --purple-light: #EEEDFE; --purple-mid: #AFA9EC; --purple-dark: #3C3489; --lime: #A3E635; --lime-dark: #639922; --lime-bg: #EAF3DE; --red: #E24B4A; --red-bg: #FCEBEB; --red-dark: #A32D2D; --green-bg: #EAF3DE; --green-dark: #3B6D11; --amber-bg: #FAEEDA; --teal: #1D9E75; --teal-bg: #E1F5EE; --gray-50: #F8F8F6; --gray-100: #F1EFE8; --gray-200: #D3D1C7; --gray-400: #888780; --gray-600: #5F5E5A; --gray-900: #1a1a18; --text: #1a1a18; --text-secondary:#5F5E5A; --text-tertiary: #888780; --border: rgba(0,0,0,0.10); --border-strong: rgba(0,0,0,0.18); --surface: #ffffff; --bg: #F8F8F6; --radius: 10px; --radius-lg: 14px; --shadow: 0 1px 3px rgba(0,0,0,0.07),0 1px 2px rgba(0,0,0,0.04); --shadow-md: 0 4px 12px rgba(0,0,0,0.08),0 2px 4px rgba(0,0,0,0.05); } * { box-sizing:border-box; margin:0; padding:0; } body { font-family:'DM Sans',sans-serif; background:var(--bg); color:var(--text); font-size:14px; line-height:1.6; } /* ── BUTTONS ── */ .btn { padding:8px 18px; border-radius:var(--radius); font-size:13px; font-weight:500; cursor:pointer; border:none; transition:all .15s; font-family:inherit; text-decoration:none; display:inline-block; } .btn-ghost { background:transparent; color:var(--text-secondary); border:1px solid var(--border-strong); } .btn-ghost:hover { background:var(--gray-100); } .btn-primary { background:var(--purple); color:#fff; } .btn-primary:hover { background:var(--purple-dark); } .btn-lime { background:var(--lime); color:#1a1a18; font-weight:600; } .btn-lime:hover { background:#8ed623; } .btn-outline-purple { background:transparent; color:var(--purple); border:1px solid var(--purple); } .btn-outline-purple:hover { background:var(--purple-light); } .btn-sm { padding:5px 12px; font-size:12px; } /* ── TOPBAR ── */ .topbar { display:flex; align-items:center; padding:0 32px; height:76px; gap:32px; background:var(--surface); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:50; } .topbar-logo { display:flex; align-items:center; text-decoration:none; flex-shrink:0; } /* HC Logo.svg: 1500×1500 canvas, content at y=480–896. Crop to 60px tall. */ .hc-logo-wrap { width:196px; height:60px; overflow:hidden; position:relative; flex-shrink:0; } .hc-logo-img { position:absolute; height:216px; width:auto; top:-69px; left:-11px; } .topbar-nav { display:flex; gap:28px; align-items:center; flex:1; } .topbar-right { display:flex; gap:8px; align-items:center; margin-left:auto; flex-shrink:0; } .topbar-nav-link { font-size:13px; color:var(--text-secondary); text-decoration:none; transition:color .15s; white-space:nowrap; } .topbar-nav-link:hover,.topbar-nav-link.active { color:var(--purple); font-weight:500; } .topbar-divider { width:1px; height:18px; background:var(--border-strong); margin:0 4px; } .topbar-avatar { width:32px; height:32px; border-radius:50%; background:var(--purple); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:600; color:#fff; flex-shrink:0; cursor:pointer; } /* ── LAYOUT ── */ .page-wrap { max-width:1100px; margin:0 auto; padding:32px 32px 56px; } .page-wrap-narrow { max-width:520px; margin:0 auto; padding:40px 24px 56px; } /* ── FOOTER ── */ .page-footer { display:flex; justify-content:space-between; align-items:center; padding:20px 32px; border-top:1px solid var(--border); font-size:12px; color:var(--text-tertiary); max-width:1100px; margin:0 auto; } .page-footer-narrow { max-width:520px; } .footer-links { display:flex; gap:20px; flex-wrap:wrap; } .footer-links a { color:var(--text-tertiary); text-decoration:none; transition:color .15s; } .footer-links a:hover { color:var(--text); } /* ── BADGES ── */ .badge { display:inline-block; font-size:11px; padding:2px 9px; border-radius:10px; font-weight:500; } .badge.up { background:var(--green-bg); color:var(--green-dark); } .badge.down { background:var(--red-bg); color:var(--red-dark); } .badge.hot { background:var(--red-bg); color:var(--red-dark); } .badge.trending { background:var(--green-bg); color:var(--green-dark); } .badge.new { background:var(--purple-light); color:var(--purple-dark); } .badge.teal { background:var(--teal-bg); color:var(--teal); } .page-badge { display:inline-block; padding:3px 10px; border-radius:20px; background:var(--purple-light); color:var(--purple-dark); font-size:11px; font-weight:500; margin-bottom:10px; } .page-badge.lime { background:var(--lime-bg); color:var(--lime-dark); } .page-badge.teal { background:var(--teal-bg); color:var(--teal); } .page-badge.gray { background:var(--gray-100); color:var(--gray-600); } /* ── METRIC TILES ── */ .metric-row { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:20px; } .metric-tile { background:var(--gray-100); border-radius:var(--radius); padding:16px 14px; text-align:center; } .metric-num { font-size:24px; font-weight:600; color:var(--purple); margin-bottom:3px; font-family:'DM Mono',monospace; } .metric-num.lime { color:var(--lime-dark); } .metric-label { font-size:11px; color:var(--text-tertiary); } /* ── SECTION HEADER ── */ .section-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; } .section-title { font-size:11px; font-weight:600; color:var(--text-tertiary); letter-spacing:.08em; text-transform:uppercase; } .section-link { font-size:12px; color:var(--purple); text-decoration:none; cursor:pointer; } .section-link:hover { text-decoration:underline; } .divider { height:1px; background:var(--border); margin:20px 0; } /* ── PILLS ── */ .pills { display:flex; gap:7px; flex-wrap:wrap; margin-bottom:16px; } .pill { padding:5px 14px; border-radius:20px; font-size:12px; cursor:pointer; transition:all .15s; border:1px solid var(--border); background:var(--surface); color:var(--text-secondary); user-select:none; } .pill:hover { border-color:var(--purple-mid); color:var(--purple); } .pill.active { background:var(--purple); color:#fff; border-color:var(--purple); } /* ── SURFACE CARDS ── */ .card-surface { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); } /* ── FORMS ── */ .form-group { margin-bottom:14px; } .form-label { font-size:12px; font-weight:500; color:var(--text-secondary); margin-bottom:5px; display:block; } .form-input { width:100%; padding:10px 12px; border:1.5px solid var(--border-strong); border-radius:var(--radius); font-size:13px; font-family:inherit; background:var(--gray-50); color:var(--text); outline:none; transition:border-color .15s; } .form-input:focus { border-color:var(--purple); background:var(--surface); } .form-select { width:100%; padding:10px 12px; border:1.5px solid var(--border-strong); border-radius:var(--radius); font-size:13px; font-family:inherit; background:var(--gray-50); color:var(--text); outline:none; cursor:pointer; } .form-select:focus { border-color:var(--purple); } .form-divider { display:flex; align-items:center; gap:10px; margin:16px 0; } .form-divider-line { flex:1; height:1px; background:var(--border); } .form-divider-text { font-size:11px; color:var(--text-tertiary); white-space:nowrap; } /* ── TOGGLE SWITCH ── */ .toggle { width:36px; height:20px; border-radius:10px; background:var(--gray-200); position:relative; cursor:pointer; flex-shrink:0; transition:background .2s; } .toggle::after { content:''; position:absolute; width:14px; height:14px; border-radius:50%; background:#fff; top:3px; left:3px; transition:transform .2s; box-shadow:0 1px 3px rgba(0,0,0,0.2); } .toggle.on { background:var(--purple); } .toggle.on::after { transform:translateX(16px); } /* ── TABLES ── */ .data-table { width:100%; border-collapse:collapse; } .data-table th { padding:10px 14px; font-size:11px; font-weight:600; color:var(--text-tertiary); text-align:left; text-transform:uppercase; letter-spacing:.06em; background:var(--gray-50); border-bottom:1px solid var(--border); } .data-table td { padding:12px 14px; font-size:13px; border-bottom:1px solid var(--border); vertical-align:middle; } .data-table tr:last-child td { border-bottom:none; } .data-table tr:hover td { background:var(--gray-50); } /* ── CTA BANNER ── */ .cta-banner { background:var(--purple); border-radius:var(--radius-lg); padding:44px 32px; text-align:center; margin-bottom:28px; } .cta-inner-badge { display:inline-block; padding:4px 14px; border-radius:20px; background:rgba(255,255,255,0.12); color:rgba(255,255,255,0.8); font-size:11px; font-weight:500; margin-bottom:14px; } .cta-banner h2 { font-size:24px; font-weight:600; color:#fff; margin-bottom:10px; } .cta-banner p { font-size:14px; color:rgba(255,255,255,0.68); margin-bottom:22px; max-width:400px; margin-left:auto; margin-right:auto; line-height:1.6; } .cta-btns { display:flex; gap:12px; justify-content:center; }