/* ========================================================================== InvestBuffet — ib-shared.css Shared layout for all hand-crafted market pages Loaded via in every main page ========================================================================== */ /* ── CSS variables ── */ :root { --bg: #0a0a0a; --bg2: #111111; --bg3: #1a1a1a; --border: rgba(255,255,255,0.07); --border2:rgba(255,255,255,0.12); --text: #f0f0f0; --text2: #888; --text3: #808080; --green: #7ec8a0; --red: #ff4757; --blue: #94adc8; --radius: 12px; --font: "IBM Plex Sans","Sarabun","Noto Sans Thai","Leelawadee UI",system-ui,sans-serif; --font-display: "Sarabun","Noto Sans Thai","Leelawadee UI",system-ui,sans-serif; --font-mono: "IBM Plex Mono",ui-monospace,"Courier New",monospace; --ib-surface-depth: radial-gradient(circle at 18% 0%, rgba(240,240,240,0.08), rgba(240,240,240,0) 30%), linear-gradient(137deg, rgba(148,173,200,0.055) 0 18%, rgba(255,255,255,0) 18% 46%, rgba(0,0,0,0.22) 46% 70%, rgba(255,255,255,0.03) 70% 100%), linear-gradient(145deg, #151718 0%, #101112 48%, #070808 100%); --ib-inset-depth: inset 0 0 0 1px rgba(0,0,0,0.72), inset 0 1px 0 rgba(255,255,255,0.055); } /* ── Base reset ── */ *,*::before,*::after { box-sizing:border-box; margin:0; padding:0; } body { font-family:var(--font); background:var(--bg); color:var(--text); min-height:100dvh; -webkit-font-smoothing:antialiased; } h1,h2,h3,h4 { font-family:"Sarabun","Noto Sans Thai","Leelawadee UI",system-ui,sans-serif; } a { text-decoration:none; color:inherit; } /* ── Navbar ── */ .navbar { position:sticky; top:0; z-index:100; height:60px; background:rgba(10,10,10,0.95); border-bottom:1px solid var(--border); backdrop-filter:blur(16px); display:flex; align-items:center; } .navbar-inner { width:min(1200px,100% - 40px); margin-inline:auto; display:flex; align-items:center; gap:16px; } .nav-logo { display:flex; align-items:center; gap:9px; font-size:1.1rem; font-weight:800; letter-spacing:0; } .nav-logo-icon { width:32px; height:32px; border-radius:8px; background:#111111 url("/logos/investbuffet-market-stack-mark.svg") center/100% 100% no-repeat; border:1px solid rgba(255,255,255,0.14); display:flex; align-items:center; justify-content:center; font-size:0; font-weight:900; color:transparent; } .nav-logo-text { font-size:1.1rem; font-weight:800; letter-spacing:0; } .nav-logo-text span { color:#fff; } .nav-links { display:flex; align-items:center; gap:2px; list-style:none; margin-left:6px; } .nav-links a { padding:6px 11px; border-radius:8px; font-size:.84rem; font-weight:600; color:var(--text2); transition:all .15s; } .nav-links a:hover, .nav-links a.active { color:var(--text); background:rgba(255,255,255,0.06); } .nav-spacer { flex:1; } .nav-cta { display:flex; align-items:center; gap:8px; } /* ── Nav buttons (injected by IB_AUTH.mountNavAuth) ── */ .nav-btn-outline, .btn-ghost { display:inline-flex; align-items:center; padding:7px 14px; border-radius:9px; font-size:.83rem; font-weight:700; white-space:nowrap; cursor:pointer; color:var(--text2); border:1px solid var(--border2); background:transparent; font-family:var(--font); transition:all .18s; } .nav-btn-outline:hover, .btn-ghost:hover { color:var(--text); background:rgba(255,255,255,0.06); } .nav-btn-primary, .btn-primary { display:inline-flex; align-items:center; padding:7px 14px; border-radius:9px; font-size:.83rem; font-weight:700; white-space:nowrap; cursor:pointer; background:#fff; color:#000; border:none; font-family:var(--font); transition:all .18s; } .nav-btn-primary:hover, .btn-primary:hover { background:rgba(255,255,255,0.88); } /* ── General button base ── */ .btn { display:inline-flex; align-items:center; justify-content:center; padding:7px 16px; border-radius:9px; font-size:.83rem; font-weight:700; cursor:pointer; border:none; font-family:var(--font); transition:all .18s; white-space:nowrap; } .btn-danger { background:rgba(239,68,68,0.15); color:#f87171; border:1px solid rgba(239,68,68,0.35); } .btn-danger:hover { background:rgba(239,68,68,0.25); border-color:rgba(239,68,68,0.6); color:#fca5a5; } .btn-danger:disabled { opacity:.5; cursor:not-allowed; } .btn-xs { padding:4px 10px; font-size:.76rem; border-radius:7px; } /* ── Mobile nav toggle ── */ .nav-mobile-toggle { display:none; margin-left:auto; background:none; border:1px solid var(--border2); color:var(--text); border-radius:8px; padding:7px 12px; cursor:pointer; font-size:1rem; font-family:var(--font); transition:background .15s; } .nav-mobile-toggle[aria-expanded="true"] { background:rgba(255,255,255,0.08); } .navbar.nav-open .nav-links { display:flex; flex-direction:column; position:absolute; top:100%; left:0; right:0; background:rgba(10,10,10,0.97); border-bottom:1px solid var(--border); padding:10px 0; gap:0; z-index:200; } .navbar.nav-open .nav-links li a { display:block; padding:11px 22px; font-size:.95rem; } @media (max-width:768px) { .nav-links, .nav-cta { display:none; } .nav-mobile-toggle { display:flex; } } /* ── Page layout ── */ .main-wrap { width:min(1200px,100% - 40px); margin-inline:auto; padding:32px 0 80px; } .page-hdr { position:relative; margin-bottom:24px; padding:4px 0 18px; border-bottom:1px solid rgba(255,255,255,0.07); overflow:hidden; } .page-hdr::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:linear-gradient(90deg, rgba(148,173,200,0.45), rgba(240,240,240,0.12), rgba(148,173,200,0)); opacity:.72; pointer-events:none; } .page-title { font-size:1.8rem; font-weight:900; letter-spacing:-0.03em; margin-bottom:6px; } .page-subtitle { font-size:.86rem; color:var(--text2); line-height:1.75; max-width:72ch; } .tv-card { border-radius:var(--radius); overflow:hidden; background:var(--ib-surface-depth); border:1px solid rgba(255,255,255,0.075); box-shadow:var(--ib-inset-depth); margin-bottom:20px; } .section-title { font-size:.95rem; font-weight:800; letter-spacing:-0.02em; margin-bottom:12px; } .ib-card { border-radius:var(--radius); background:var(--ib-surface-depth); border:1px solid rgba(255,255,255,0.075); box-shadow:var(--ib-inset-depth); } .info-card { padding:16px 18px; border-radius:var(--radius); background:var(--ib-surface-depth); border:1px solid rgba(255,255,255,0.075); box-shadow:var(--ib-inset-depth); } .info-card-label { font-size:.76rem; color:var(--text2); font-weight:600; margin-bottom:4px; } .info-card-sub { font-size:.75rem; color:var(--text2); margin-top:2px; } /* ── Price flash animations ── */ @keyframes ib-flash-up { 0%{background:rgba(126,200,160,.25);border-radius:4px} 100%{background:transparent} } @keyframes ib-flash-down { 0%{background:rgba(255,71,87,.22);border-radius:4px} 100%{background:transparent} } .ib-flash-up { animation: ib-flash-up 0.9s ease-out forwards; } .ib-flash-down { animation: ib-flash-down 0.9s ease-out forwards; } /* ── Live indicator ── */ .live-pill { display:inline-flex; align-items:center; gap:5px; padding:2px 9px; border-radius:999px; background:rgba(126,200,160,.1); border:1px solid rgba(126,200,160,.25); font-size:.7rem; font-weight:700; color:var(--green); } .live-dot { width:6px; height:6px; border-radius:50%; background:var(--green); animation:ib-pulse 1.6s ease-in-out infinite; } @keyframes ib-pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.85)} } /* ── Data table ── */ .data-table { width:100%; border-collapse:collapse; font-size:.88rem; background:transparent; } .data-table thead th { padding:9px 14px; text-align:left; font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--text2); border-bottom:1px solid var(--border); background:linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015)); } .data-table tbody tr { border-bottom:1px solid rgba(255,255,255,0.04); transition:background .12s; } .data-table tbody tr:hover { background:rgba(255,255,255,0.03); } .data-table tbody td { padding:10px 14px; } .data-table .num { text-align:right; font-variant-numeric:tabular-nums; } .data-table .pos { color:var(--green); font-weight:700; } .data-table .neg { color:var(--red); font-weight:700; } /* ── Skeleton shimmer ── */ @keyframes ib-shimmer { 0%{background-position:-400px 0} 100%{background-position:400px 0} } .skeleton { background: linear-gradient(90deg, var(--bg3) 25%, rgba(255,255,255,0.04) 50%, var(--bg3) 75%); background-size: 800px 100%; animation: ib-shimmer 1.4s ease infinite; border-radius:6px; display:inline-block; } .skeleton-row { height:14px; margin:10px 14px; border-radius:4px; } .skeleton-row + .skeleton-row { margin-top:14px; } /* ── Empty state ── */ .no-data { text-align:center; padding:48px 20px; color:var(--text2); border-radius:var(--radius); background:linear-gradient(145deg, rgba(17,17,17,0.72), rgba(8,8,8,0.86)); border:1px solid rgba(255,255,255,0.06); } .no-data-icon { display:inline-flex; width:44px; height:44px; margin-bottom:12px; border-radius:var(--radius); background:#111111 url("/logos/investbuffet-market-stack-mark.svg") center/100% 100% no-repeat; box-shadow:var(--ib-inset-depth), 0 10px 22px rgba(0,0,0,0.36); font-size:0; opacity:1; } .no-data-title { font-size:.92rem; font-weight:700; margin-bottom:4px; color:var(--text); } .no-data-sub { font-size:.82rem; color:var(--text2); } /* ── Badge / pill ── */ .badge { display:inline-flex; align-items:center; padding:2px 9px; border-radius:999px; font-size:.72rem; font-weight:700; } .badge-green { background:rgba(126,200,160,0.14); color:var(--green); } .badge-red { background:rgba(248,113,113,0.14); color:var(--red); } .badge-blue { background:rgba(148,173,200,0.14); color:var(--blue); } .badge-gray { background:rgba(255,255,255,0.07); color:var(--text2); } /* ── Toast notification ── */ .toast-container { position:fixed; bottom:24px; right:24px; z-index:600; display:flex; flex-direction:column; gap:8px; pointer-events:none; } .toast-item { padding:11px 18px; border-radius:10px; background:var(--bg2); border:1px solid var(--border2); font-size:.84rem; color:var(--text); box-shadow:0 4px 20px rgba(0,0,0,0.5); opacity:0; transform:translateY(8px); transition:opacity .25s,transform .25s; pointer-events:auto; } .toast-item.show { opacity:1; transform:none; } /* ── Site footer layout ── */ .site-footer { border-top:1px solid var(--border); padding:40px 0 24px; margin-top:40px; } .site-footer .ft-inner { width:min(1200px,100% - 40px); margin:0 auto; } .site-footer .ft-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr 1fr; gap:32px; margin-bottom:32px; } .site-footer .ft-logo { display:flex; align-items:center; gap:9px; font-size:1.05rem; font-weight:800; letter-spacing:0; margin-bottom:10px; } .site-footer .ft-logo-icon { width:30px; height:30px; border-radius:8px; background:#111111 url("/logos/investbuffet-market-stack-mark.svg") center/100% 100% no-repeat; border:1px solid rgba(255,255,255,0.14); display:flex; align-items:center; justify-content:center; font-size:0; font-weight:900; color:transparent; } .site-footer .ft-logo span { color:#f0f0f0; } .site-footer .ft-tagline { font-size:.82rem; color:var(--text2); line-height:1.7; max-width:26ch; } .site-footer .ft-col h3, .site-footer .ft-col h4 { font-size:.82rem; font-weight:700; color:var(--text2); margin-bottom:12px; } .site-footer .ft-col ul { list-style:none; } .site-footer .ft-col ul li { margin-bottom:9px; } .site-footer .ft-col a { font-size:.84rem; color:var(--text3); transition:color .15s; } .site-footer .ft-col a:hover { color:var(--text); } .site-footer .ft-bottom { border-top:1px solid var(--border); padding-top:20px; display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; } .site-footer .ft-copy { font-size:.78rem; color:var(--text3); line-height:1.6; } .site-footer .ft-btm-links { display:flex; gap:16px; } .site-footer .ft-btm-links a { font-size:.78rem; color:var(--text3); transition:color .15s; } .site-footer .ft-btm-links a:hover { color:var(--text2); } @media (max-width:980px) { .site-footer .ft-grid { grid-template-columns:repeat(3,1fr); } } @media (max-width:768px) { .site-footer .ft-grid { grid-template-columns:1fr 1fr; } } @media (max-width:480px) { .site-footer .ft-grid { grid-template-columns:1fr; } } /* ── Local ticker bar ── */ .local-ticker-bar{padding:8px;overflow-x:auto;display:flex;background:var(--ib-surface-depth);box-shadow:var(--ib-inset-depth)} .local-ticker-bar .lt{display:flex;flex-direction:column;align-items:center;padding:10px 18px;border-right:1px solid var(--border);gap:2px;white-space:nowrap;min-width:90px;flex-shrink:0} .local-ticker-bar .lt:last-child{border-right:none} .ls{font-size:.8rem;font-weight:800;color:var(--text2)} .lp{font-size:.9rem;font-weight:700;color:var(--text)} .lc{font-size:.75rem;font-weight:700} .lc.pos{color:var(--green)} .lc.neg{color:var(--red)} .local-ticker-bar .lt .ib-mkt{margin-left:0;margin-top:1px;font-size:.6rem} /* ── Accessibility baseline (QA audit 2026-06-20) ── */ /* Visible keyboard focus ring on all interactive elements */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [role="button"]:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; border-radius: 3px; } /* Respect reduced-motion preference site-wide */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* Minimum 44px touch target for the mobile nav toggle (QA audit 2026-06-20) */ @media (max-width: 768px) { .nav-mobile-toggle { min-width: 44px; min-height: 44px; } }