/* FRAG.LOG case study: interactive product widgets. Scoped under .fg-embed and its own custom properties so this never touches the site's own light/dark theme system. The product itself is a fixed dark terminal UI regardless of the portfolio's theme toggle. Cascadia Mono is loaded via in the page , not @import here: see project-fraglog.html for why. */ .fg-embed { --fg-bg: #14100a; --fg-bg-row: #241d11; --fg-bg-input: #1c1811; --fg-border: #3a2f1c; --fg-text: #e6d9c4; --fg-text-secondary: #8e7a56; --fg-text-muted: #6a5b41; --fg-amber: #f0a93e; --fg-amber-dim: #9c6f28; --fg-loss: #c85a3e; --fg-tier-blue: #5a8fc0; --fg-tier-purple: #9b6fd6; font-family: 'Cascadia Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; background-color: var(--fg-bg); color: var(--fg-text); border-radius: 8px; border: 1px solid var(--fg-border); overflow: hidden; } .fg-embed * { box-sizing: border-box; } /* Window chrome */ .fg-window-bar { display: flex; align-items: center; gap: 6px; padding: 12px 16px; background: var(--fg-bg-input); border-bottom: 1px solid var(--fg-border); } .fg-window-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--fg-border); } .fg-window-label { margin-left: 8px; font-size: 11px; letter-spacing: 1px; color: var(--fg-text-muted); } /* Wordmark + blinking cursor */ .fg-wordmark { font-weight: 600; font-size: 18px; color: var(--fg-text); } .fg-wordmark .fg-dot-char { color: var(--fg-amber); } .fg-cursor { display: inline-block; width: 8px; height: 1em; background: var(--fg-amber); margin-left: 3px; vertical-align: text-bottom; animation: fg-blink 1.1s steps(1) infinite; } @keyframes fg-blink { 50% { opacity: 0; } } /* Hero widget */ .fg-hero-card { padding: 28px 32px 32px; } .fg-hero-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 36px; flex-wrap: wrap; gap: 16px; } .fg-hero-nav { display: flex; gap: 20px; flex-wrap: wrap; } .fg-hero-nav span { font-size: 11px; letter-spacing: 1px; color: var(--fg-text-secondary); } .fg-hero-nav span.active { color: var(--fg-amber); border-bottom: 1px solid var(--fg-amber); padding-bottom: 3px; } .fg-stat-row { display: flex; gap: 56px; flex-wrap: wrap; margin-bottom: 36px; } .fg-stat-label { font-size: 11px; text-transform: lowercase; letter-spacing: 1px; color: var(--fg-text-secondary); margin-bottom: 8px; } .fg-stat-value { font-size: 36px; font-weight: 600; color: var(--fg-text); font-variant-numeric: tabular-nums; line-height: 1; } .fg-stat-value.accent { color: var(--fg-amber); } .fg-chart-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; margin-bottom: 8px; } .fg-chart-label { font-size: 12px; color: var(--fg-text-secondary); letter-spacing: 1px; margin-bottom: 12px; } .fg-chart svg { width: 100%; height: auto; display: block; overflow: visible; } .fg-chart .fg-line { fill: none; stroke: var(--fg-amber); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .fg-chart .fg-grid-line { stroke: var(--fg-border); stroke-width: 1; stroke-dasharray: 3 4; } .fg-chart .fg-end-dot { fill: var(--fg-amber); } .fg-chart .fg-end-label { fill: var(--fg-amber); font-size: 13px; font-weight: 600; font-family: 'Cascadia Mono', monospace; } .fg-bars { display: flex; align-items: flex-end; gap: 10px; height: 100px; } .fg-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; justify-content: flex-end; } .fg-bar { width: 100%; background: var(--fg-amber); border-radius: 1px; transition: height 0.8s ease; } .fg-bar.below { background: var(--fg-loss); } .fg-bar-label { font-size: 10px; color: var(--fg-text-secondary); } .fg-matches { border-top: 1px solid var(--fg-border); margin-top: 28px; padding-top: 20px; } .fg-matches-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } .fg-matches-head span { font-size: 12px; color: var(--fg-text-secondary); letter-spacing: 1px; } .fg-btn { display: inline-flex; align-items: center; font-family: inherit; font-size: 12px; background: transparent; color: var(--fg-text); border: 1px solid var(--fg-border); border-radius: 2px; padding: 8px 14px; cursor: default; } .fg-match-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 6px; border-bottom: 1px solid var(--fg-border); font-size: 13px; } .fg-match-row:nth-child(even) { background: var(--fg-bg-row); } .fg-match-map { width: 90px; } .fg-match-kd { width: 60px; text-align: right; } .fg-match-time { width: 90px; text-align: right; color: var(--fg-text-muted); } .fg-tag { display: inline-block; font-size: 11px; padding: 2px 10px; border-radius: 2px; text-transform: lowercase; font-weight: 600; } .fg-tag-win { background: #3a2a12; color: var(--fg-amber); } .fg-tag-loss { background: #3a1f16; color: var(--fg-loss); } .fg-tag-pending { background: var(--fg-bg-row); color: var(--fg-text-secondary); } /* Product tour */ .fg-tour-tabs { display: flex; gap: 24px; padding: 14px 20px; border-bottom: 1px solid var(--fg-border); background: var(--fg-bg-input); flex-wrap: wrap; } .fg-tab { background: none; border: none; cursor: pointer; font-family: inherit; font-size: 12px; letter-spacing: 1px; text-transform: lowercase; color: var(--fg-text-secondary); padding-bottom: 4px; border-bottom: 1px solid transparent; transition: color 0.2s ease, border-color 0.2s ease; } .fg-tab:hover { color: var(--fg-text); } .fg-tab.active { color: var(--fg-amber); border-bottom-color: var(--fg-amber); } .fg-tour-screen { position: relative; background: var(--fg-bg); } .fg-tour-screen img { display: block; width: 100%; height: auto; opacity: 1; transition: opacity 0.25s ease; } .fg-tour-screen img.fg-fade { opacity: 0; } /* Color & type swatches */ .fg-swatch-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; } .fg-swatch { border-radius: 2px; overflow: hidden; border: 1px solid var(--fg-border); } .fg-swatch-fill { height: 56px; } .fg-swatch-info { padding: 8px 10px; background: var(--fg-bg-row); } .fg-swatch-info .name { display: block; font-weight: 600; font-size: 12px; color: var(--fg-text); } .fg-swatch-info .hex { font-size: 11px; color: var(--fg-text-secondary); } .fg-type-row { display: flex; gap: 32px; padding: 24px; flex-wrap: wrap; align-items: baseline; } .fg-type-row .regular { font-weight: 400; font-size: 22px; } .fg-type-row .semibold { font-weight: 600; font-size: 22px; } .fg-type-row .hero-sample { font-weight: 600; font-size: 40px; color: var(--fg-amber); } .fg-type-caption { font-size: 11px; color: var(--fg-text-secondary); display: block; margin-top: 6px; } @media (max-width: 700px) { .fg-stat-row { gap: 32px; } .fg-chart-grid { grid-template-columns: 1fr; gap: 28px; } .fg-hero-card { padding: 20px; } }