/* ==================================================================== FINNHEAP — quant workstation stylesheet DESKTOP: .canvas is a free-form area. Windows are absolutely positioned (coords set by app.js) and draggable. A web of lines behind them connects each panel to the chart. MOBILE (<= 900px): absolute positioning is switched off and everything stacks into a normal scrolling column. THEMING: two palettes below. Dark is the default (:root). Light is applied when . The toggle in the top bar swaps the attribute; app.js also recolours the chart canvas. ==================================================================== */ /* ---- DARK theme (default) ----------------------------------------- */ :root { --bg: #0d1117; --panel: #0d1117; --bar: #161b22; --border: #30363d; --border-dim:#21262d; --text: #e6edf3; --text-dim: #7d8590; --green: #3fb950; --red: #e2484a; --blue: #58a6ff; --amber: #d29922; --dot: #ffffff14; /* backdrop dot colour */ --web: #ffffff14; /* connecting-line colour */ --shadow: rgba(0,0,0,0.40); --mono: "SF Mono", "JetBrains Mono", "Consolas", "Liberation Mono", monospace; } /* ---- LIGHT theme -------------------------------------------------- */ :root[data-theme="light"] { --bg: #f4f5f7; --panel: #ffffff; --bar: #eceef1; --border: #d4d8dd; --border-dim:#e4e7ea; --text: #1a1f26; --text-dim: #687280; --green: #1a7f37; --red: #c93c3e; --blue: #0a66c2; --amber: #9a6700; --dot: #00000012; --web: #00000014; --shadow: rgba(0,0,0,0.12); } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { min-height: 100%; } body { /* dot-grid backdrop: a repeating radial-gradient of faint dots */ background-color: var(--bg); background-image: radial-gradient(var(--dot) 0.8px, transparent 0.8px); background-size: 22px 22px; color: var(--text); font-family: var(--mono); font-size: 14px; line-height: 1.6; -webkit-font-smoothing: antialiased; transition: background-color 0.2s, color 0.2s; } a { color: var(--blue); text-decoration: none; } a:hover { text-decoration: underline; } .muted { color: var(--text-dim); } /* ==================================================================== TOP BAR ==================================================================== */ .topbar { display: flex; justify-content: space-between; align-items: center; padding: 10px 18px; background: var(--bar); border-bottom: 0.5px solid var(--border); position: sticky; /* stays pinned to the top when scrolling */ top: 0; z-index: 5000; /* stays above dragged windows */ } .topbar-title { font-size: 13px; font-weight: 500; } .topbar-nav { display: flex; align-items: center; gap: 16px; font-size: 12px; } .topbar-nav > a { color: var(--text-dim); } .topbar-nav > a:hover { color: var(--blue); text-decoration: none; } .theme-toggle { background: none; border: 0.5px solid var(--border); border-radius: 4px; color: var(--text-dim); font-family: var(--mono); font-size: 11px; padding: 3px 8px; cursor: pointer; } .theme-toggle:hover { color: var(--blue); border-color: var(--blue); } .clock { font-size: 12px; color: var(--green); min-width: 96px; /* wider — now includes timezone */ text-align: right; } .dropdown { position: relative; } .dropdown-toggle { background: none; border: none; color: var(--blue); font-family: var(--mono); font-size: 12px; cursor: pointer; padding: 0; } .dropdown-menu { display: none; position: absolute; top: 160%; right: 0; min-width: 170px; background: var(--bar); border: 0.5px solid var(--border); border-radius: 6px; padding: 6px 0; z-index: 6000; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } .dropdown-menu a { display: block; padding: 6px 14px; color: var(--text); font-size: 12px; } .dropdown-menu a:hover { background: var(--border-dim); text-decoration: none; } /* ==================================================================== INTRO HERO — the self-introduction above the workstation ==================================================================== */ .hero { max-width: 760px; margin: 0 auto; padding: 46px 24px 30px; text-align: left; } .hero-title { font-size: 30px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 12px; } .hero-lead { font-size: 16px; line-height: 1.65; color: var(--text); margin-bottom: 10px; } .hero-sub { font-size: 13px; line-height: 1.7; } /* ==================================================================== CANVAS (desktop free-form area) Height scales with the viewport; app.js positions windows inside. ==================================================================== */ .canvas { position: relative; width: 84%; max-width: 100%; margin: 0 auto; height: 84vh; /* scales with the viewport height */ min-height: 1140px; /* floor — taller chart needs more room */ } /* the connecting web — an SVG layer filling the canvas, behind windows */ .web { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; /* never blocks dragging or clicks */ z-index: 1; /* windows (z >= 100) sit above this */ } /* ==================================================================== WINDOW CHROME ==================================================================== */ .window { position: absolute; /* desktop: free-form. overridden on mobile. */ border: 0.5px solid var(--border); border-radius: 7px; background: var(--panel); overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 6px 22px var(--shadow); z-index: 100; /* sits above the connecting web (z:1) */ } /* the window currently in front (set by app.js on click) */ .window.is-front { border-color: var(--blue); } .window-bar { display: flex; justify-content: space-between; align-items: center; padding: 7px 11px; background: var(--bar); border-bottom: 0.5px solid var(--border); cursor: grab; /* signals draggability */ user-select: none; } .window-bar:active { cursor: grabbing; } .window-name { font-size: 10.5px; color: var(--text); } .window-meta { font-size: 10px; color: var(--text-dim); } .window-body { padding: 12px 13px; flex: 1; overflow: hidden; } .window-body-flush { padding: 0; } /* ---- per-window sizes (desktop) ----------------------------------- */ /* ---- per-window sizes (desktop) ----------------------------------- Widths are a percentage of the canvas, so they scale with the window. The min-width floor stops a window shrinking so far that its text/tables break — that floor is the safety net. */ .w-chart { width: 40%; min-width: 460px; } .w-watch { width: 19%; min-width: 210px; } .w-stats { width: 22%; min-width: 250px; } .w-res { width: 26%; min-width: 290px; } .w-term { width: 25%; min-width: 280px; } .w-int { width: 21%; min-width: 240px; } .w-about { width: 27%; min-width: 300px; } .w-contact { width: 20%; min-width: 230px; } /* ==================================================================== CHART WINDOW ==================================================================== */ .chart-canvas { width: 100%; height: 340px; /* taller chart */ display: block; cursor: crosshair; /* signals the candles are interactive */ } /* description box below the chart: a header row then a paragraph */ .chart-detail { margin-top: 10px; padding: 9px 12px; border-left: 2px solid var(--blue); min-height: 78px; /* room for a couple of lines of description */ } .detail-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; } .cap-date { font-size: 10px; color: var(--text-dim); } .cap-title { font-size: 14px; color: var(--text); font-weight: 600; } .cap-desc { font-size: 12px; line-height: 1.6; } /* ==================================================================== DATA TABLE ==================================================================== */ .data-table { width: 100%; border-collapse: collapse; font-size: 11.5px; } .data-table th { text-align: left; font-weight: 400; color: var(--text-dim); font-size: 9.5px; padding: 7px 11px; border-bottom: 0.5px solid var(--border); background: var(--bar); } .data-table td { padding: 7px 11px; border-bottom: 0.5px solid var(--border-dim); } .data-table tr:last-child td { border-bottom: none; } .data-table tbody tr:hover { background: var(--border-dim); } .col-r { text-align: right; } .sym { color: var(--text); } .up { color: var(--green); } .flat { color: var(--amber); } /* ==================================================================== STATS WINDOW ==================================================================== */ .stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } .stat { border: 0.5px solid var(--border); border-radius: 5px; padding: 9px 10px; } .stat-label { font-size: 9px; color: var(--text-dim); letter-spacing: 0.04em; } .stat-val { font-size: 17px; color: var(--text); margin-top: 2px; } .stat-note { font-size: 9.5px; margin-top: 9px; line-height: 1.5; } /* ==================================================================== INTERESTS ==================================================================== */ .tag-list { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; } .tag-list li { font-size: 11px; color: var(--text); border: 0.5px solid var(--border); border-radius: 4px; padding: 4px 9px; background: var(--bar); } /* ==================================================================== ABOUT ==================================================================== */ .about-text { font-size: 12px; line-height: 1.75; margin-bottom: 8px; } /* ==================================================================== TERMINAL LOG ==================================================================== */ .term-log { font-family: var(--mono); font-size: 11px; line-height: 1.85; color: var(--text-dim); white-space: pre-wrap; min-height: 130px; } .term-log .ok { color: var(--green); } .term-log .info { color: var(--blue); } .term-log .warn { color: var(--amber); } /* ==================================================================== CONTACT ==================================================================== */ .link-list { list-style: none; font-size: 12px; display: flex; gap: 22px; flex-wrap: wrap; } /* ==================================================================== DRAG HINT + FOOTER ==================================================================== */ .drag-hint { text-align: center; font-size: 10.5px; color: var(--text-dim); padding: 6px 0 0; } .footer { text-align: center; padding: 16px 20px 28px; font-size: 11px; color: var(--text-dim); } /* ==================================================================== MOBILE — switch off the free-form canvas; stack everything. This is the safety net: dragging makes no sense on a phone, so the absolute positioning is cancelled and windows flow as a column. ==================================================================== */ @media (max-width: 900px) { .canvas { height: auto; /* let it grow with content */ display: flex; flex-direction: column; gap: 12px; padding: 12px; } .window { position: static !important; /* cancel app.js positioning */ left: auto !important; top: auto !important; width: auto !important; /* full width */ transform: none !important; } .window-bar { cursor: default; } /* no drag affordance on mobile */ .topbar { padding: 10px 12px; } .topbar-nav { gap: 12px; } .clock { display: none; } .chart-canvas { height: 260px; } .hero { padding: 30px 16px 18px; } .hero-title { font-size: 23px; } .hero-lead { font-size: 14px; } .drag-hint { display: none; } /* the tip is desktop-only */ }