/* ============================================================================ FYL forge design system — web port of the app's theme (workout-tracker src/constants/theme.ts). Scoped to — which, since the 2026-07 rollout, is every page on the site. style.css keeps layout/base structure; this file owns the design system and every [data-forge] re-voice of marketing components (the two-file split is deliberate — merging would only remove the var remap indirection at the cost of a huge diff). Two voices: Spline Sans carries all reading text; Geist Mono carries ALL data — numerals, units, timestamps, axis labels, micro-labels. Semantic color: graphite neutrals do the layout work, green appears only for actions, PRs and the one headline data point per chart; amber owns streak/time-pressure. Light is the default token set; dark (the flagship) applies via prefers-color-scheme, and [data-theme="light"|"dark"] on is the user override persisted in localStorage ("fyl-theme"). Naming: structural components are .f-*; chart internals are .fc-*. ========================================================================= */ /* ---------------- Tokens ---------------- */ [data-forge] { color-scheme: light; /* Voices (also remap the site's font vars so nav/footer inherit) */ --font: 'Spline Sans', ui-sans-serif, system-ui, -apple-system, sans-serif; --font-display: 'Spline Sans', ui-sans-serif, system-ui, -apple-system, sans-serif; --mono: 'Geist Mono', ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, monospace; /* forge / light */ --fg-bg: #FAFAF7; --fg-el: #EEF1EC; --fg-sel: #DFE8DE; --fg-card: #FFFFFF; --fg-glass: rgba(250, 250, 247, 0.78); --fg-border: #E2E6E1; --fg-text: #12161B; --fg-text-2: #5F6B61; --fg-muted: #879187; --fg-primary: #15803D; --fg-on-primary: #FFFFFF; --fg-primary-muted: #ECFDF5; --fg-accent: #BBF7D0; --fg-on-accent: #14532D; --fg-danger: #C93D3D; --fg-danger-muted: #F8DEDC; --fg-warning: #B45309; --fg-warning-muted: #F6EBD2; --fg-chart-bar: #DFE8DE; --fg-shadow: 0 1px 2px rgba(18, 22, 27, 0.04), 0 10px 28px -14px rgba(18, 22, 27, 0.12); /* Remap the marketing stylesheet's variables so its components (nav, footer, buttons, spinner) re-skin automatically inside this scope. */ --bg: var(--fg-bg); --bg-soft: var(--fg-el); --bg-soft-2: var(--fg-sel); --border: var(--fg-border); --border-2: var(--fg-border); --text: var(--fg-text); --text-2: var(--fg-text-2); --muted: var(--fg-muted); --brand: var(--fg-primary); --brand-700: var(--fg-primary); --ember: var(--fg-primary); --ember-bright: var(--fg-primary); --ember-deep: var(--fg-primary); --ember-50: var(--fg-primary-muted); --ember-100: var(--fg-sel); --ember-200: var(--fg-sel); --forge: linear-gradient(102deg, var(--fg-primary), var(--fg-primary)); --shadow-sm: 0 1px 2px rgba(18, 22, 27, 0.05); --shadow: var(--fg-shadow); --shadow-lg: 0 24px 60px -24px rgba(18, 22, 27, 0.25); --shadow-ember: 0 10px 24px -12px rgba(21, 128, 61, 0.45); } /* forge / dark — flagship */ [data-forge][data-theme='dark'] { color-scheme: dark; --fg-bg: #0E1116; --fg-el: #1F2630; --fg-sel: #2A3340; --fg-card: #161B22; --fg-glass: rgba(14, 17, 22, 0.72); --fg-border: #262E37; --fg-text: #F2F5EE; --fg-text-2: #98A2A9; --fg-muted: #6B7680; --fg-primary: #22C55E; --fg-on-primary: #06130A; --fg-primary-muted: #133A24; --fg-accent: #1B4D2E; --fg-on-accent: #BBF7D0; --fg-danger: #FF7A72; --fg-danger-muted: #3A1F1D; --fg-warning: #F0BC5E; --fg-warning-muted: #382A13; --fg-chart-bar: #242C36; --fg-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px -16px rgba(0, 0, 0, 0.5); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-lg: 0 24px 60px -24px rgba(0, 0, 0, 0.6); --shadow-ember: 0 10px 26px -12px rgba(34, 197, 94, 0.35); } @media (prefers-color-scheme: dark) { [data-forge]:not([data-theme='light']) { color-scheme: dark; --fg-bg: #0E1116; --fg-el: #1F2630; --fg-sel: #2A3340; --fg-card: #161B22; --fg-glass: rgba(14, 17, 22, 0.72); --fg-border: #262E37; --fg-text: #F2F5EE; --fg-text-2: #98A2A9; --fg-muted: #6B7680; --fg-primary: #22C55E; --fg-on-primary: #06130A; --fg-primary-muted: #133A24; --fg-accent: #1B4D2E; --fg-on-accent: #BBF7D0; --fg-danger: #FF7A72; --fg-danger-muted: #3A1F1D; --fg-warning: #F0BC5E; --fg-warning-muted: #382A13; --fg-chart-bar: #242C36; --fg-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px -16px rgba(0, 0, 0, 0.5); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-lg: 0 24px 60px -24px rgba(0, 0, 0, 0.6); --shadow-ember: 0 10px 26px -12px rgba(34, 197, 94, 0.35); } } /* ---------------- Base voice ---------------- */ [data-forge] body { line-height: 1.5; } /* The app never goes past 700 on display faces (Archivo's 800/900 stays on marketing pages only). */ [data-forge] h1, [data-forge] h2, [data-forge] h3, [data-forge] h4, [data-forge] h5 { font-weight: 700; letter-spacing: -0.01em; } [data-forge] a:focus-visible, [data-forge] button:focus-visible, [data-forge] summary:focus-visible, [data-forge] select:focus-visible { outline: 2px solid var(--fg-primary); outline-offset: 2px; } /* Micro-label — the mono tracked caption above every numeral. */ .t-micro { font-family: var(--mono); font-weight: 500; font-size: 11px; line-height: 14px; letter-spacing: 1.3px; text-transform: uppercase; color: var(--fg-muted); } /* ---------------- Marketing-chrome dark fixes ---------------- These style.css rules hardcode white; remap them inside the scope. */ [data-forge] .nav { background: var(--fg-glass); } [data-forge] .nav.scrolled { background: var(--fg-glass); border-bottom-color: var(--fg-border); } [data-forge] .nav__toggle { background: var(--fg-card); } [data-forge] .btn--ghost { background: var(--fg-card); } [data-forge] .btn--ghost:hover { background: var(--fg-el); color: var(--fg-text); border-color: var(--fg-sel); } /* Ghost buttons inside dark CTA panels keep their translucent treatment — without this the forge card background wins and the label goes white-on-white. */ [data-forge] .btn--ghost.soon__ghost { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.2); } [data-forge] .btn--ghost.soon__ghost:hover { background: rgba(255,255,255,.16); color: #fff; border-color: rgba(255,255,255,.32); } [data-forge] .btn--ember { background: var(--fg-primary); color: var(--fg-on-primary); } /* style.css paints this graphite-on-white — invisible on the dark bg. */ [data-forge] .btn--primary { background: var(--fg-primary); color: var(--fg-on-primary); box-shadow: var(--shadow-ember); } [data-forge] .logo__mark { filter: none; } [data-forge] footer { background: var(--fg-bg); } @media (max-width: 980px) { [data-forge] .nav__links { background: var(--fg-card); } } /* Phase-2 sweep — more hardcoded-white components, found page by page. (Whites inside --ink bands and phone mockups are intentional; left alone.) */ [data-forge] .cmp-nav { background: var(--fg-glass); } [data-forge] .cmp-nav a.active { color: var(--fg-bg); background: var(--fg-text); } [data-forge] .cmp-head { background: var(--fg-glass); } [data-forge] .ex-search input, [data-forge] .ex-select { background: var(--fg-card); } [data-forge] .ex-tag { background: var(--fg-card); } [data-forge] .ex-status--error { color: var(--fg-danger); } [data-forge] .faq-item.open { background: var(--fg-card); } [data-forge] .plan { background: var(--fg-card); } [data-forge] .pricelane--pro { background: var(--fg-card); } [data-forge] .tile .ic { background: var(--fg-card); } /* Buttons inside legal copy (404) shouldn't inherit the link underline. */ [data-forge] .legal__body a.btn { text-decoration: none; } /* ---------------- Buttons (forge voice: sentence case, quiet) ---------------- */ .f-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font); font-weight: 600; font-size: 14px; line-height: 18px; padding: 9px 16px; border-radius: 10px; border: 1px solid transparent; cursor: pointer; white-space: nowrap; text-decoration: none; transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.15s ease; } .f-btn--primary { background: var(--fg-primary); color: var(--fg-on-primary); } .f-btn--primary:hover { transform: translateY(-1px); box-shadow: var(--shadow-ember); } .f-btn--ghost { background: var(--fg-card); color: var(--fg-text); border-color: var(--fg-border); } .f-btn--ghost:hover { background: var(--fg-el); border-color: var(--fg-sel); } .f-btn--sm { font-size: 13px; padding: 7px 12px; border-radius: 9px; } .f-btn--block { width: 100%; padding: 12px 16px; font-size: 15px; } .f-iconbtn { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--fg-border); background: var(--fg-card); color: var(--fg-text-2); cursor: pointer; transition: background 0.18s ease, color 0.18s ease; } .f-iconbtn:hover { background: var(--fg-el); color: var(--fg-text); } .f-iconbtn svg { width: 16px; height: 16px; } /* ---------------- Page shell ---------------- */ .f-shell { padding: 28px 0 96px; } /* Identity strip — the hero IS the user. */ .f-id { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 10px 0 22px; } .f-id__who { display: flex; align-items: center; gap: 16px; min-width: 0; } .f-avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; border: 1px solid var(--fg-border); background: var(--fg-el); } .f-avatar--ph { display: grid; place-items: center; font-family: var(--font); font-weight: 600; font-size: 22px; color: var(--fg-primary); background: var(--fg-primary-muted); text-transform: uppercase; } .f-id__greeting { font-family: var(--font); font-weight: 700; font-size: 28px; line-height: 34px; letter-spacing: -0.4px; color: var(--fg-text); margin: 0; } .f-id__sub { display: flex; align-items: center; gap: 10px; margin-top: 3px; font-family: var(--mono); font-size: 13px; line-height: 18px; color: var(--fg-muted); } .f-id__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .f-chip--pro { font-family: var(--mono); font-weight: 500; font-size: 10px; letter-spacing: 1.2px; padding: 3px 8px; border-radius: 999px; background: var(--fg-accent); color: var(--fg-on-accent); } /* Badge shelf */ .f-badges { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 18px; } .f-badge { display: inline-flex; align-items: center; gap: 7px; background: var(--fg-card); border: 1px solid var(--fg-border); border-radius: 999px; padding: 5px 12px 5px 9px; font-family: var(--font); font-weight: 500; font-size: 13px; color: var(--fg-text); } .f-badge svg { width: 15px; height: 15px; flex: none; } .f-badge--bronze svg { color: #B0713A; } .f-badge--silver svg { color: #8A94A3; } .f-badge--gold svg { color: #D9A106; } .f-badge--emerald svg { color: var(--fg-primary); } .f-badge--legendary svg { color: #A78BFA; } /* ---------------- Sticky section tabs ---------------- */ .f-tabs { position: sticky; top: var(--nav-h); z-index: 50; margin: 0 -24px; padding: 0 24px; background: var(--fg-glass); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid var(--fg-border); } .f-tabs__in { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; } .f-tabs__in::-webkit-scrollbar { display: none; } .f-tab { position: relative; flex: none; padding: 13px 14px 12px; font-family: var(--font); font-weight: 500; font-size: 13.5px; line-height: 18px; color: var(--fg-text-2); border: none; background: none; border-radius: 0; cursor: pointer; transition: color 0.15s ease; } .f-tab:hover { color: var(--fg-text); } .f-tab::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; border-radius: 2px; background: transparent; transition: background 0.18s ease; } .f-tab.on { color: var(--fg-text); } .f-tab.on::after { background: var(--fg-primary); } /* ---------------- Sections ---------------- */ .f-sec { padding-top: 34px; scroll-margin-top: calc(var(--nav-h) + 54px); } .f-sec__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; } .f-sec__title { display: flex; align-items: baseline; gap: 10px; font-family: var(--font); font-weight: 600; font-size: 18px; line-height: 23px; color: var(--fg-text); margin: 0; } .f-sec__title .idx { font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: 1.3px; color: var(--fg-muted); } .f-sec__aside { font-family: var(--mono); font-size: 13px; color: var(--fg-muted); } /* ---------------- Cards ---------------- */ .f-card { background: var(--fg-card); border: 1px solid var(--fg-border); border-radius: 16px; padding: 20px; box-shadow: var(--shadow-sm); } .f-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; } .f-card__title { font-family: var(--font); font-weight: 600; font-size: 15px; line-height: 20px; color: var(--fg-text); margin: 0; } /* ---------------- Stat band ---------------- */ .f-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .f-stat { background: var(--fg-card); border: 1px solid var(--fg-border); border-radius: 16px; padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; min-width: 0; } .f-stat__num { display: flex; align-items: baseline; gap: 6px; font-family: var(--mono); font-weight: 500; font-size: 28px; line-height: 34px; letter-spacing: -0.6px; color: var(--fg-text); font-variant-numeric: tabular-nums; } .f-stat__num .unit { font-family: var(--mono); font-weight: 400; font-size: 13px; line-height: 18px; letter-spacing: 0; color: var(--fg-text-2); } .f-stat__num .rank { font-family: var(--font); font-weight: 500; font-size: 13px; color: var(--fg-text-2); } .f-stat__sub { font-family: var(--font); font-size: 13px; line-height: 18px; color: var(--fg-text-2); } .f-stat__sub + .f-stat__sub { margin-top: -2px; } .f-stat--active .f-stat__num { color: var(--fg-primary); } .f-stat--at_risk .f-stat__num { color: var(--fg-warning); } .f-stat--at_risk .f-stat__sub:first-of-type { color: var(--fg-warning); } .f-stat--broken .f-stat__num, .f-stat--new .f-stat__num { color: var(--fg-muted); } .f-flame { width: 20px; height: 20px; align-self: center; flex: none; } /* XP bar — final width is inline; the keyframe animates the fill in from 0. */ .f-xp { height: 6px; border-radius: 3px; background: var(--fg-el); overflow: hidden; margin-top: 2px; } .f-xp > span { display: block; height: 100%; border-radius: 3px; background: var(--fg-primary); animation: f-xpfill 0.9s cubic-bezier(0.22, 1, 0.36, 1); } @keyframes f-xpfill { from { width: 0; } } /* ---------------- Segmented control ---------------- */ .f-seg { display: inline-flex; background: var(--fg-el); border: 1px solid var(--fg-border); border-radius: 10px; padding: 3px; gap: 2px; } .f-seg button { border: none; background: none; cursor: pointer; font-family: var(--font); font-weight: 500; font-size: 13px; line-height: 18px; color: var(--fg-text-2); padding: 4px 12px; border-radius: 8px; transition: background 0.15s ease, color 0.15s ease; } .f-seg button[aria-pressed='true'] { background: var(--fg-card); color: var(--fg-text); box-shadow: var(--shadow-sm); } /* Slim select (exercise picker) */ .f-select { appearance: none; -webkit-appearance: none; font-family: var(--font); font-weight: 500; font-size: 13px; color: var(--fg-text); background: var(--fg-el); border: 1px solid var(--fg-border); border-radius: 10px; padding: 6px 30px 6px 12px; max-width: 230px; cursor: pointer; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23879187' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; } /* ---------------- Charts (.fc-*) ---------------- */ .f-chart { position: relative; } .f-chart svg { display: block; width: 100%; height: auto; } .fc-gridline { stroke: var(--fg-border); stroke-width: 1; } .fc-baseline { stroke: var(--fg-sel); stroke-width: 1; } .fc-axis { fill: var(--fg-muted); font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.4px; } /* Resting bars are neutral structure; only the headline bar takes primary. */ .fc-bar { fill: var(--fg-chart-bar); } .fc-bar--peak { fill: var(--fg-primary); } .fc-peak { fill: var(--fg-text); font-family: var(--mono); font-weight: 500; font-size: 11.5px; } .fc-hit { fill: transparent; cursor: pointer; outline-offset: -2px; } .fc-hit:hover, .fc-hit:focus-visible { fill: color-mix(in srgb, var(--fg-primary) 9%, transparent); } .fc-line { fill: none; stroke: var(--fg-primary); stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; } .fc-area { fill: var(--fg-primary); opacity: 0.09; } .fc-dot { fill: var(--fg-card); stroke: var(--fg-primary); stroke-width: 2; } .f-tip { position: absolute; top: 0; transform: translate(-50%, -6px); background: var(--fg-text); color: var(--fg-bg); font-family: var(--mono); font-size: 12px; padding: 6px 10px; border-radius: 8px; white-space: nowrap; pointer-events: none; box-shadow: var(--shadow-lg); z-index: 5; } .f-tip strong { font-weight: 500; margin-right: 6px; } /* Chart entrance: bars grow from the baseline, once, on first paint. */ .f-grow .fc-bar { transform-box: fill-box; transform-origin: bottom; animation: fc-grow 0.65s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: calc(var(--i, 0) * 45ms); } @keyframes fc-grow { from { transform: scaleY(0); } } .f-astable { margin-top: 12px; } .f-astable summary { font-family: var(--font); font-size: 12.5px; color: var(--fg-muted); cursor: pointer; } .f-astable table { width: 100%; border-collapse: collapse; margin-top: 8px; } .f-astable th { text-align: left; font-family: var(--mono); font-weight: 500; font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--fg-muted); padding: 5px 8px; } .f-astable td { padding: 6px 8px; border-top: 1px solid var(--fg-border); font-family: var(--mono); font-size: 13px; color: var(--fg-text); font-variant-numeric: tabular-nums; } /* ---------------- Grids ---------------- */ .f-grid2 { display: grid; grid-template-columns: 3fr 2fr; gap: 14px; align-items: start; } .f-stack { display: grid; gap: 14px; } .f-gap { margin-top: 14px; } /* ---------------- Rows (history, routines) ---------------- */ .f-list { display: grid; gap: 8px; } .f-row { background: var(--fg-card); border: 1px solid var(--fg-border); border-radius: 12px; transition: border-color 0.15s ease; } .f-row:hover { border-color: var(--fg-sel); } .f-row summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 16px; cursor: pointer; list-style: none; } .f-row summary::-webkit-details-marker { display: none; } .f-row__main { display: grid; gap: 2px; min-width: 0; } .f-row__title { font-family: var(--font); font-weight: 600; font-size: 15px; line-height: 20px; color: var(--fg-text); } .f-row__date { font-family: var(--mono); font-size: 12px; line-height: 16px; color: var(--fg-muted); } .f-row__meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; font-family: var(--mono); font-size: 12.5px; line-height: 17px; color: var(--fg-text-2); font-variant-numeric: tabular-nums; } .f-row__meta .chev { width: 14px; height: 14px; color: var(--fg-muted); transition: transform 0.18s ease; } .f-row[open] .chev { transform: rotate(90deg); } .f-row__body { border-top: 1px solid var(--fg-border); padding: 12px 16px 15px; display: grid; gap: 9px; } .f-exline { display: grid; gap: 1px; } .f-exline strong { font-family: var(--font); font-weight: 500; font-size: 14px; line-height: 19px; color: var(--fg-text); } .f-exline span { font-family: var(--mono); font-size: 12.5px; line-height: 18px; color: var(--fg-text-2); font-variant-numeric: tabular-nums; } .f-notes { font-family: var(--font); font-size: 13px; line-height: 19px; color: var(--fg-text-2); font-style: italic; } /* PR chip — achievement, so it earns the accent surface. */ .f-pr { font-family: var(--mono); font-weight: 500; font-size: 10.5px; letter-spacing: 0.8px; padding: 3px 9px; border-radius: 999px; background: var(--fg-accent); color: var(--fg-on-accent); white-space: nowrap; } /* Lazy media grid */ .f-media { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; margin-top: 4px; } .f-media img, .f-media video { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 10px; border: 1px solid var(--fg-border); background: var(--fg-el); } .f-media__ph { display: grid; place-items: center; aspect-ratio: 1 / 1; border-radius: 10px; border: 1px dashed var(--fg-sel); color: var(--fg-muted); font-family: var(--mono); font-size: 11px; } /* ---------------- Records table ---------------- */ .f-scroll { overflow-x: auto; } .f-table { width: 100%; border-collapse: collapse; } .f-table th { text-align: left; font-family: var(--mono); font-weight: 500; font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--fg-muted); padding: 6px 10px; white-space: nowrap; } .f-table td { padding: 9px 10px; border-top: 1px solid var(--fg-border); } .f-table tbody tr { transition: background 0.12s ease; } .f-table tbody tr:hover { background: var(--fg-el); } .f-td-name { font-family: var(--font); font-weight: 500; font-size: 14px; color: var(--fg-text); } .f-td-num { text-align: right; font-family: var(--mono); font-size: 13px; color: var(--fg-text); font-variant-numeric: tabular-nums; white-space: nowrap; } .f-td-dim { color: var(--fg-text-2); } /* ---------------- Measurements ---------------- */ .f-meas-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(122px, 1fr)); gap: 10px; margin-top: 14px; } .f-meas { background: var(--fg-el); border: 1px solid var(--fg-border); border-radius: 12px; padding: 11px 13px; display: grid; gap: 3px; } .f-meas strong { font-family: var(--mono); font-weight: 500; font-size: 17px; line-height: 22px; color: var(--fg-text); font-variant-numeric: tabular-nums; } .f-meas .when { font-family: var(--mono); font-size: 11px; color: var(--fg-muted); } /* ---------------- Leagues strip ---------------- */ .f-leagues { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .f-leagues li { background: var(--fg-el); border: 1px solid var(--fg-border); border-radius: 999px; padding: 6px 14px; font-family: var(--font); font-weight: 500; font-size: 13.5px; color: var(--fg-text); } /* ---------------- States ---------------- */ .f-loading { text-align: center; padding: 56px 0; color: var(--fg-text-2); font-family: var(--font); font-size: 14px; } .f-spinner { display: inline-block; width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--fg-border); border-top-color: var(--fg-primary); animation: f-spin 0.8s linear infinite; margin-bottom: 10px; } @keyframes f-spin { to { transform: rotate(360deg); } } .f-empty { text-align: center; padding: 44px 20px; color: var(--fg-text-2); } .f-empty svg { display: block; width: 40px; height: 40px; margin: 0 auto 10px; color: var(--fg-muted); } .f-empty h3 { font-family: var(--font); font-weight: 600; font-size: 16px; color: var(--fg-text); margin: 0 0 4px; } .f-empty p { font-family: var(--font); font-size: 14px; max-width: 380px; margin: 0 auto; } .f-empty .f-btn { margin-top: 16px; } .f-quiet { font-family: var(--font); font-size: 13.5px; color: var(--fg-text-2); padding: 4px 0; } .f-error { background: var(--fg-danger-muted); color: var(--fg-danger); border-radius: 12px; padding: 14px 16px; font-family: var(--font); font-size: 14px; } .f-error:empty { display: none; } .f-nudge { background: var(--fg-el); border: 1px solid var(--fg-border); border-radius: 12px; padding: 11px 15px; font-family: var(--font); font-size: 13px; line-height: 19px; color: var(--fg-text-2); margin-bottom: 14px; } .f-nudge strong { color: var(--fg-text); font-weight: 600; } .f-fineprint { font-family: var(--font); font-size: 12.5px; color: var(--fg-muted); margin-top: 12px; } .f-more { margin-top: 12px; } /* ---------------- Login (split screen) ---------------- */ .f-auth { display: grid; grid-template-columns: 1fr 1fr; min-height: calc(100vh - var(--nav-h)); } .f-auth__brand { position: relative; overflow: hidden; background: #0E1116; color: #F2F5EE; display: flex; flex-direction: column; justify-content: flex-end; padding: 56px; gap: 18px; } .f-auth__brand::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(242, 245, 238, 0.045) 1px, transparent 1px), linear-gradient(to bottom, rgba(242, 245, 238, 0.045) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask-image: radial-gradient(130% 110% at 20% 100%, #000 0%, transparent 72%); mask-image: radial-gradient(130% 110% at 20% 100%, #000 0%, transparent 72%); } .f-auth__brand > * { position: relative; } .f-auth__logo { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font); font-weight: 700; font-size: 19px; } .f-auth__logo img { width: 52px; height: auto; } .f-auth__title { font-family: var(--font); font-weight: 700; font-size: clamp(30px, 3.2vw, 42px); line-height: 1.12; letter-spacing: -0.5px; margin: 0; max-width: 420px; } .f-auth__title em { font-style: normal; color: #22C55E; } .f-auth__stats { display: flex; flex-wrap: wrap; gap: 8px 20px; font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: 1.3px; text-transform: uppercase; color: #98A2A9; } .f-auth__panel { display: flex; align-items: center; justify-content: center; padding: 48px 24px; } .f-auth__panel .auth-wrap { width: 100%; } /* Re-skin the existing auth-card vocabulary (js/login.js markup untouched). */ [data-forge] .auth-card { background: var(--fg-card); border-color: var(--fg-border); border-radius: 20px; box-shadow: var(--shadow); } [data-forge] .auth-card h2 { font-family: var(--font); font-weight: 700; font-size: 22px; text-transform: none; letter-spacing: -0.3px; } [data-forge] .auth-sub { font-family: var(--font); } [data-forge] .auth-provider { background: var(--fg-el); border-color: var(--fg-border); color: var(--fg-text); font-family: var(--font); font-weight: 500; font-size: 14.5px; border-radius: 11px; } [data-forge] .auth-provider:hover { background: var(--fg-sel); border-color: var(--fg-sel); box-shadow: none; } [data-forge] .fld > span { font-family: var(--mono); font-weight: 500; font-size: 10.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--fg-muted); } [data-forge] .fld input { background: var(--fg-bg); border-color: var(--fg-border); color: var(--fg-text); border-radius: 10px; } [data-forge] .fld input:focus { border-color: var(--fg-primary); } [data-forge] .fld input::placeholder { color: var(--fg-muted); } [data-forge] .auth-msg { color: var(--fg-danger); font-family: var(--font); } [data-forge] .auth-msg--ok { color: var(--fg-primary); } [data-forge] .auth-divider { color: var(--fg-muted); font-family: var(--mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; } [data-forge] .auth-divider::before, [data-forge] .auth-divider::after { background: var(--fg-border); } [data-forge] .auth-toggle { font-family: var(--font); color: var(--fg-text-2); } [data-forge] .auth-toggle button { color: var(--fg-primary); font-family: var(--font); font-weight: 600; } [data-forge] .auth-note { font-family: var(--font); color: var(--fg-muted); } [data-forge] .auth-note a { color: var(--fg-primary); font-weight: 500; } [data-forge] .btn--ember.btn--block { font-family: var(--font); font-weight: 600; font-size: 15px; border-radius: 11px; } /* ---------------- Toast ---------------- */ .f-toast { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 12px); z-index: 200; max-width: min(440px, calc(100vw - 32px)); background: var(--fg-card); color: var(--fg-text); border: 1px solid var(--fg-border); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 12px 18px; font-family: var(--font); font-size: 14px; line-height: 19px; opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; } .f-toast.show { opacity: 1; transform: translate(-50%, 0); } .f-toast--err { border-color: var(--fg-danger); color: var(--fg-danger); } .f-toast--ok { border-color: var(--fg-primary); } /* ---------------- Modal ---------------- */ body.modal-open { overflow: hidden; } .f-modal { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 20px; } .f-modal__scrim { position: absolute; inset: 0; background: rgba(9, 12, 16, 0.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: f-fade 0.18s ease both; } .f-modal__card { position: relative; width: 100%; max-width: 480px; max-height: calc(100vh - 40px); overflow-y: auto; background: var(--fg-card); border: 1px solid var(--fg-border); border-radius: 20px; box-shadow: var(--shadow-lg); padding: 20px; animation: f-pop 0.2s cubic-bezier(0.22, 1, 0.36, 1) both; } .f-modal__card--wide { max-width: 720px; } .f-modal__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; } .f-modal__title { font-family: var(--font); font-weight: 700; font-size: 18px; line-height: 23px; color: var(--fg-text); margin: 0; letter-spacing: -0.2px; } .f-modal__body { display: grid; gap: 14px; } .f-modal__actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin-top: 4px; } @keyframes f-fade { from { opacity: 0; } } @keyframes f-pop { from { opacity: 0; transform: translateY(8px) scale(0.98); } } /* ---------------- Form fields ---------------- */ .f-field { display: grid; gap: 6px; } .f-field > label { font-family: var(--mono); font-weight: 500; font-size: 10.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--fg-muted); } .f-input, .f-textarea { width: 100%; font-family: var(--font); font-size: 14.5px; line-height: 20px; color: var(--fg-text); background: var(--fg-bg); border: 1px solid var(--fg-border); border-radius: 10px; padding: 10px 12px; transition: border-color 0.15s ease; } .f-input:focus, .f-textarea:focus { outline: none; border-color: var(--fg-primary); } .f-input::placeholder, .f-textarea::placeholder { color: var(--fg-muted); } .f-textarea { resize: vertical; min-height: 72px; } .f-field__hint { font-family: var(--font); font-size: 12.5px; line-height: 17px; color: var(--fg-muted); } select.f-input { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 34px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23879187' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; } /* Invite-code input — the one oversized mono moment in a form. */ .f-input--code { font-family: var(--mono); font-size: 20px; letter-spacing: 4px; text-transform: uppercase; text-align: center; } /* Search field with a leading glyph. */ .f-search { position: relative; flex: 1 1 260px; max-width: 420px; } .f-search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--fg-muted); pointer-events: none; } .f-search .f-input { padding-left: 34px; } .f-check { display: flex; align-items: flex-start; gap: 9px; font-family: var(--font); font-size: 13.5px; line-height: 19px; color: var(--fg-text-2); cursor: pointer; } .f-check input { margin-top: 2px; accent-color: var(--fg-primary); flex: none; } .f-check strong { color: var(--fg-text); font-weight: 600; } /* ---------------- Status chips ---------------- */ .f-chip { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-weight: 500; font-size: 10px; letter-spacing: 1.1px; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: var(--fg-el); color: var(--fg-text-2); white-space: nowrap; } .f-chip--ok { background: var(--fg-accent); color: var(--fg-on-accent); } .f-chip--danger { background: var(--fg-danger-muted); color: var(--fg-danger); } .f-chip--warn { background: var(--fg-warning-muted); color: var(--fg-warning); } /* Danger actions. --danger states its color up front (modal confirm buttons); --danger-quiet reads as a ghost until hovered (in-card Disband/Leave). */ .f-btn--danger { background: var(--fg-card); color: var(--fg-danger); border-color: var(--fg-border); } .f-btn--danger:hover { background: var(--fg-danger-muted); border-color: var(--fg-danger); } .f-btn--danger-quiet { background: var(--fg-card); color: var(--fg-text-2); border-color: var(--fg-border); } .f-btn--danger-quiet:hover { background: var(--fg-danger-muted); border-color: var(--fg-danger); color: var(--fg-danger); } /* ---------------- Admin bars & rows ---------------- */ .f-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; } .f-bar__spacer { flex: 1 1 auto; } /* Clickable table row (user directory). */ .f-table tbody tr.f-rowlink { cursor: pointer; } .f-table tbody tr.f-rowlink:focus-visible { outline: 2px solid var(--fg-primary); outline-offset: -2px; } .f-uc { display: flex; align-items: center; gap: 10px; min-width: 0; } .f-uc__name { display: grid; gap: 1px; min-width: 0; } .f-uc__name strong { font-family: var(--font); font-weight: 600; font-size: 14px; color: var(--fg-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .f-uc__name span { font-family: var(--mono); font-size: 11.5px; color: var(--fg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .f-avatar--sm { width: 30px; height: 30px; font-size: 12px; } /* Key/value grid for the user drawer. */ .f-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; } .f-kv > div { display: grid; gap: 3px; min-width: 0; } .f-kv strong { font-family: var(--mono); font-weight: 500; font-size: 15px; color: var(--fg-text); font-variant-numeric: tabular-nums; } /* Audit entry payload. */ .f-pre { font-family: var(--mono); font-size: 11.5px; line-height: 17px; color: var(--fg-text-2); background: var(--fg-el); border-radius: 8px; padding: 9px 11px; overflow-x: auto; white-space: pre-wrap; word-break: break-word; margin: 0; } /* ---------------- Marketing voice (phase 3) ---------------- Re-voices style.css marketing components inside the forge scope: sentence case at 700 max, mono for every numeral/label, green audited down to action + achievement. Phase 6 deletes the superseded rules. */ /* Sentence case — kill the Archivo-era uppercase everywhere it was set. */ [data-forge] .hero h1, [data-forge] .help-hero h1, [data-forge] .legal h1, [data-forge] .feat__copy h3, [data-forge] .forge h2, [data-forge] .cta h2, [data-forge] .live__intro h2, [data-forge] .live__step h3, [data-forge] .gcard h4, [data-forge] .tile h4, [data-forge] .faq-cat__title, [data-forge] .faq-empty h3, [data-forge] .help-contact h3, [data-forge] .rz-card h3, [data-forge] .guide-card h4, [data-forge] .ex-detail__head h3 { text-transform: none; } /* Display weight caps at 700; sentence case needs real line-height. */ [data-forge] .hero h1 { font-weight: 700; letter-spacing: -0.03em; line-height: 1.04; font-size: clamp(40px, 6vw, 68px); } [data-forge] .help-hero h1, [data-forge] .legal h1, [data-forge] .forge h2, [data-forge] .cta h2 { letter-spacing: -0.02em; line-height: 1.08; } /* Eyebrows become the mono tracked micro-label. */ [data-forge] .eyebrow { font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: 1.3px; color: var(--fg-muted); } [data-forge] .eyebrow::before { background: var(--fg-muted); } [data-forge] .eyebrow--green { color: var(--fg-muted); } [data-forge] .eyebrow--green::before { background: var(--fg-muted); } /* Footer column headings share the micro voice. */ [data-forge] .foot h5 { font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: 1.3px; } /* Stat strips: numerals in mono, one green per band. */ [data-forge] .stat .n, [data-forge] .forge__stat .n { font-family: var(--mono); font-weight: 500; font-size: 26px; letter-spacing: -0.2px; font-variant-numeric: tabular-nums; } [data-forge] .stat .n.bl { color: var(--fg-text); } /* The forge band is theme-static graphite: pin the flagship green so light mode doesn't put deep green on near-black (same trick as .f-auth__title em). */ [data-forge] .forge__stat .n.em { color: #22C55E; } /* Floating PR/volume cards: glass surface (was hardcoded white — invisible text in dark mode once --text/--muted remap to the light palette) + the usual micro-label + mono value. */ [data-forge] .floaty { background: var(--fg-glass); border-color: var(--fg-border); } [data-forge] .floaty small { font-family: var(--mono); font-weight: 500; letter-spacing: 1px; } [data-forge] .floaty b { font-family: var(--mono); font-weight: 500; font-size: 14px; } /* Feature callout chips pinned to screenshots: same fix, solid card surface. */ [data-forge] .callout { background: var(--fg-card); border-color: var(--fg-border); } /* Gallery/resource badges: neutral mono chips — green is not decoration. */ [data-forge] .badge, [data-forge] .rz-tag { font-family: var(--mono); font-weight: 500; font-size: 10.5px; letter-spacing: 1.1px; color: var(--fg-text-2); background: var(--fg-el); border-color: var(--fg-border); } [data-forge] .badge.bl { color: var(--fg-text-2); background: var(--fg-el); border-color: var(--fg-border); } /* Bento level tile: XP numbers are data. */ [data-forge] .lvlrow { font-family: var(--mono); font-weight: 500; font-size: 12px; } /* Demo step numbers (features). */ [data-forge] .live__num { font-family: var(--mono); font-weight: 500; letter-spacing: 1.5px; } /* Ticks: hardcoded pastels → tokens. */ [data-forge] .tick { background: var(--fg-primary-muted); color: var(--fg-primary); border-color: var(--fg-border); } [data-forge] .tick.y { background: var(--fg-primary-muted); color: var(--fg-primary); border-color: var(--fg-border); } [data-forge] .tick.n { background: var(--fg-el); color: var(--fg-muted); border-color: var(--fg-border); } /* Pricing: the billing toggle becomes the forge segmented control. */ [data-forge] .toggle { border-radius: 10px; padding: 3px; gap: 2px; background: var(--fg-el); border-color: var(--fg-border); } [data-forge] .toggle button { font-family: var(--font); font-weight: 500; font-size: 13px; border-radius: 8px; padding: 6px 14px; } [data-forge] .toggle button.on { background: var(--fg-card); color: var(--fg-text); box-shadow: var(--shadow-sm); } [data-forge] .toggle .save { font-family: var(--mono); font-weight: 500; font-size: 10px; letter-spacing: 0.4px; color: var(--fg-primary); background: var(--fg-primary-muted); } [data-forge] .toggle button.on .save { color: var(--fg-primary); background: var(--fg-primary-muted); } /* Plan cards: mono money, micro plan names. */ [data-forge] .plan__name, [data-forge] .pricelane__name { font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: 1.3px; } [data-forge] .price .amt { font-family: var(--mono); font-weight: 500; font-size: 44px; letter-spacing: -1px; font-variant-numeric: tabular-nums; } [data-forge] .price .per { font-family: var(--mono); font-weight: 400; font-size: 12.5px; } [data-forge] .plan__tag, [data-forge] .pricelane__tag { font-family: var(--mono); font-weight: 500; font-size: 10px; letter-spacing: 1.1px; } /* Exercise library (resources): cards join the card voice; tags are data. */ [data-forge] .ex-card { background: var(--fg-card); box-shadow: var(--shadow-sm); } [data-forge] .ex-card:hover { border-color: var(--fg-sel); box-shadow: var(--shadow); } [data-forge] .ex-tag { font-family: var(--mono); font-weight: 500; font-size: 10px; letter-spacing: 0.6px; } [data-forge] .ex-tag--muscle { color: var(--fg-text-2); background: var(--fg-el); border-color: var(--fg-border); } [data-forge] .ex-count { font-family: var(--mono); font-size: 12.5px; } [data-forge] .rz-card, [data-forge] .guide-card { background: var(--fg-card); box-shadow: var(--shadow-sm); } [data-forge] .rz-card:hover { border-color: var(--fg-sel); } [data-forge] .guide-card .ic { background: var(--fg-el); border-color: var(--fg-border); } [data-forge] .guide-card .ic .icon { color: var(--fg-text-2); } /* Support FAQ: category icons are structure, not achievement — mute them. */ [data-forge] .faq-cat__ic { color: var(--fg-text-2); } /* Exercise detail modal: match the .f-modal look without touching its JS. */ [data-forge] .ex-modal__card { background: var(--fg-card); border: 1px solid var(--fg-border); border-radius: 20px; } [data-forge] .ex-modal__close { background: var(--fg-card); border-color: var(--fg-border); color: var(--fg-text-2); } [data-forge] .ex-modal__close:hover { background: var(--fg-el); } [data-forge] .ex-detail__body h4 { font-family: var(--mono); font-weight: 500; font-size: 10.5px; letter-spacing: 1.2px; color: var(--fg-muted); } /* Coming-soon band (challenges): the badge chip joins the micro voice; its h1 sits on the theme-static ink band so white + sentence case is right. */ [data-forge] .soon__badge { font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: 1.3px; } [data-forge] .cta.soon h1 { text-transform: none; font-weight: 700; letter-spacing: -0.02em; line-height: 1.06; } /* Comparison matrix (features): f-table voice — mono headers, cats, values. */ [data-forge] .cmp-head__feat { font-family: var(--mono); font-weight: 500; font-size: 10.5px; letter-spacing: 1px; } [data-forge] .cmp-head__plan { font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: 1px; } [data-forge] .cmp-head__plan--pro { color: var(--fg-on-accent); background: var(--fg-accent); } [data-forge] .cmp-cat { font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: 1.3px; color: var(--fg-text-2); } [data-forge] .cmp-val { font-family: var(--mono); font-weight: 500; font-size: 12.5px; } /* Low-alpha wash works on both themes' cards. */ [data-forge] .cmp-row > .cmp-cell:last-child { background: rgba(34, 197, 94, 0.07); } /* Features pricerail: mono money; Pro lane mirrors the accent plan card. */ [data-forge] .pricelane__amt { font-family: var(--mono); font-weight: 500; letter-spacing: -1px; font-variant-numeric: tabular-nums; } [data-forge] .pricelane__u { font-family: var(--mono); font-weight: 400; font-size: 12.5px; } [data-forge] .pricerail__vs { font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: 1.3px; } [data-forge] .pricelane--pro { background: var(--fg-accent); outline: none; box-shadow: var(--shadow); } [data-forge] .pricelane--pro .pricelane__name, [data-forge] .pricelane--pro .pricelane__amt, [data-forge] .pricelane--pro .pricelane__per { color: var(--fg-on-accent); } [data-forge] .pricelane--pro .pricelane__u { color: var(--fg-on-accent); opacity: 0.72; } [data-forge] .pricelane--pro .pricelane__tag { background: var(--fg-on-accent); color: var(--fg-accent); } /* The Pro card is the page's single accent surface. */ [data-forge] .plan--pro { background: var(--fg-accent); outline: none; border-color: transparent; box-shadow: var(--shadow); } [data-forge] .plan--pro .plan__name, [data-forge] .plan--pro .plan__desc, [data-forge] .plan--pro .price .amt, [data-forge] .plan--pro .price__sub, [data-forge] .plan--pro li { color: var(--fg-on-accent); } [data-forge] .plan--pro .price .per { color: var(--fg-on-accent); opacity: 0.72; } [data-forge] .plan--pro .plan__tag { background: var(--fg-on-accent); color: var(--fg-accent); } [data-forge] .plan--pro .tick.y { background: transparent; border-color: currentColor; color: var(--fg-on-accent); opacity: 0.85; } /* ---------------- Legal + utility (phase 4) ---------------- */ /* "Last updated" line is a timestamp — data voice. */ [data-forge] .legal__meta { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.3px; } /* Callout boxes read as cards with one semantic green edge, not green slabs. */ [data-forge] .legal__note { background: var(--fg-card); border: 1px solid var(--fg-border); border-left: 3px solid var(--fg-primary); } [data-forge] .legal__note strong { color: var(--fg-primary); } /* Table headers join the micro voice. */ [data-forge] .legal th { font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--fg-text-2); } /* ---------------- League cards ---------------- */ .f-card__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-family: var(--mono); font-size: 12px; line-height: 17px; color: var(--fg-muted); margin: 4px 0 0; } .f-card__meta b { font-weight: 500; color: var(--fg-text); } .f-card__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .f-standings { margin-top: 14px; border-top: 1px solid var(--fg-border); padding-top: 6px; } .f-standings .f-chip { margin-left: 6px; } .f-empty__actions { display: flex; justify-content: center; gap: 8px; margin-top: 16px; } .f-empty__actions .f-btn { margin-top: 0; } /* ---------------- Motion guard ---------------- */ @media (prefers-reduced-motion: reduce) { [data-forge] *, [data-forge] *::before, [data-forge] *::after { animation-duration: 0.001s !important; animation-delay: 0s !important; transition-duration: 0.001s !important; } } /* ---------------- Responsive ---------------- */ @media (max-width: 980px) { .f-stats { grid-template-columns: repeat(2, 1fr); } .f-grid2 { grid-template-columns: 1fr; } .f-auth { grid-template-columns: 1fr; } .f-auth__brand { min-height: 240px; padding: 36px 28px; justify-content: center; } } @media (max-width: 560px) { .f-hide-sm { display: none; } } @media (max-width: 460px) { .f-stats { grid-template-columns: 1fr; } .f-id__greeting { font-size: 24px; line-height: 30px; } .f-row summary { flex-direction: column; align-items: flex-start; gap: 6px; } .f-row__meta { justify-content: flex-start; } .f-card { padding: 16px; } .f-modal { padding: 12px; } .f-modal__card { padding: 16px; border-radius: 16px; } .f-search { max-width: none; } } /* ---------------- Signed-in account menu (js/main.js) ---------------- */ /* Only the hardcoded white needs remapping — the menu's border, text and hover tokens (--border, --text-2, --bg-soft) are already remapped above. */ [data-forge] .nav__menu { background: var(--fg-card); } [data-forge] .nav__dd-menu { background: var(--fg-card); } /* The signed-out theme toggle rides in .nav__cta (login page). */ [data-forge] .nav__cta .f-iconbtn { width: 42px; height: 42px; } /* ---------------- Exercise picker (js/lib/exercise-picker.js) ---------------- */ .f-picker { display: grid; gap: 6px; max-height: 46vh; overflow-y: auto; padding-right: 2px; } .f-pick { display: grid; gap: 2px; text-align: left; cursor: pointer; background: var(--fg-bg); border: 1px solid var(--fg-border); border-radius: 10px; padding: 9px 12px; transition: border-color 0.15s ease, background 0.15s ease; } .f-pick:hover { border-color: var(--fg-primary); background: var(--fg-el); } .f-pick strong { font-family: var(--font); font-size: 14px; line-height: 19px; color: var(--fg-text); } .f-pick span { font-family: var(--mono); font-size: 11.5px; color: var(--fg-muted); } /* ---------------- Builder (routines + workout logger) ---------------- */ .f-build { display: grid; gap: 14px; } .f-bex { background: var(--fg-card); border: 1px solid var(--fg-border); border-radius: 16px; padding: 16px; } .f-bex__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; } .f-bex__name { font-family: var(--font); font-weight: 600; font-size: 15px; color: var(--fg-text); margin: 0; } .f-bex__tools { display: flex; gap: 6px; } /* Set grid: index | type | metric inputs | (done) | remove */ .f-sets { display: grid; gap: 6px; } .f-setrow { display: grid; grid-template-columns: 26px 92px 1fr auto; gap: 8px; align-items: center; } .f-setrow--done { grid-template-columns: 26px 92px 1fr auto auto; } .f-setrow .idx { font-family: var(--mono); font-size: 12px; color: var(--fg-muted); text-align: center; } .f-setrow .f-input, .f-setrow select.f-input { padding: 7px 10px; font-size: 13.5px; } .f-setrow select.f-input { padding-right: 28px; background-position: right 9px center; } .f-set-metrics { display: flex; gap: 8px; min-width: 0; } .f-set-metrics .f-input { font-family: var(--mono); font-variant-numeric: tabular-nums; } .f-setrow input[type='checkbox'] { width: 18px; height: 18px; accent-color: var(--fg-primary); cursor: pointer; } .f-formgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; } /* Avatar editor on /settings. */ .f-avatarrow { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .f-avatarrow .f-avatar { width: 64px; height: 64px; font-size: 24px; } /* Sticky footer bar on the logger/builder with the save controls. */ .f-savebar { position: sticky; bottom: 12px; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: var(--fg-glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--fg-border); border-radius: 16px; padding: 12px 16px; box-shadow: var(--shadow-lg); } .f-savebar__meta { font-family: var(--mono); font-size: 12.5px; color: var(--fg-text-2); } .f-savebar__actions { display: flex; gap: 8px; } @media (max-width: 560px) { .f-setrow, .f-setrow--done { grid-template-columns: 20px 84px 1fr auto; } .f-setrow--done { grid-template-columns: 20px 84px 1fr auto auto; } .f-set-metrics { flex-wrap: wrap; } }