/* ======================================================= FPVBASE — "FLIGHT DECK" DESIGN SYSTEM Mission-placard palette (French Blue / Scarlet Fire / White / Onyx / Lilac), square corners throughout, bold uppercase monospace for labels/controls, a two-tier blueprint grid behind everything, and real seven-segment digits for numeric readouts. ======================================================= */ :root { --onyx: #0f110c; --panel: #1c1c1c; --panel-raised: #232323; --panel-hover: #2b2b2b; --line: #3a3a3a; --line-bright: #545454; --cream: #ffffff; --cream-dim: #a8a8a8; --blue: #0b3d91; --blue-bright: #1b53b8; --scarlet: #fc3d21; --lilac: #c297b8; /* Scarlet/lilac AS TEXT (not border/background fill) need their own token: both are light/bright enough that white/near-white panels in light mode drop them below readable contrast (scarlet lands around 3.4:1, lilac worse at ~2.4:1 — both fail the 4.5:1 text minimum). Identical to --scarlet/--lilac here in dark mode (already high-contrast against near-black), overridden to a darker shade of the same hue in the light theme below. */ --scarlet-text: #fc3d21; --lilac-text: #c297b8; /* Doesn't flip between themes: --blue/--blue-bright stay dark enough in both that anything sitting on top of them (button text, the save/avatar-edit overlays that are always a fixed dark scrim regardless of theme) needs to stay light either way — unlike --cream, which is the general "readable on the current background" text color and DOES flip. */ --on-dark: #ffffff; /* Ghost (unlit) seven-segment digit background — a low-opacity tint of the *opposite* of the current surface color, so an unlit segment stays faintly visible against whichever panel it's drawn on instead of vanishing (white-on-white in light mode) or looking like a smudge (white-on-dark stays as before). */ --seg-ghost: rgba(255, 255, 255, 0.03); --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Roboto Mono", Consolas, monospace; --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; } /* ---- Light theme ---- Toggled via a button in the header (see .theme-toggle / auth.js), persisted to localStorage, applied to before first paint (inline script in each page's ) to avoid a flash of the wrong theme. Only the neutral surface/text tokens flip — the accent colors (blue/scarlet/lilac) and --on-dark stay identical in both themes, so buttons/badges/links read as the same brand regardless of which theme is active. */ :root[data-theme="light"] { /* Onyx (page background) noticeably darker than white panels/ cards on purpose — the contrast is what makes them read as distinct "raised" surfaces instead of blending into the page. */ --onyx: #e2e6ec; --panel: #ffffff; --panel-raised: #f6f7f9; --panel-hover: #dde1e7; --line: #dde1e6; --line-bright: #b6bcc5; --cream: #14161a; --cream-dim: #5c6169; --seg-ghost: rgba(15, 17, 12, 0.025); /* Darker shades of the same scarlet/lilac hue — ~5:1 contrast against white instead of --scarlet/--lilac's own ~3.4:1/~2.4:1. --scarlet/--lilac themselves are untouched (still used for borders and background fills, which don't need text-level contrast and should stay the actual brand color). */ --scarlet-text: #c8331c; --lilac-text: #8c4f74; } * { box-sizing: border-box; margin: 0; padding: 0; } html { background: var(--onyx); } body { /* Two-tier blueprint grid: fine lines every 32px, a bolder rule every 4th line (128px) — the fine/bold convention of real engineering graph paper, tinted blue so it reads as "blueprint," not static. Kept subtle: felt before it's read. */ background-color: var(--onyx); background-image: repeating-linear-gradient(to bottom, rgba(59, 120, 220, 0.06) 0 1px, transparent 1px 128px), repeating-linear-gradient(to right, rgba(59, 120, 220, 0.06) 0 1px, transparent 1px 128px), repeating-linear-gradient(to bottom, rgba(59, 120, 220, 0.028) 0 1px, transparent 1px 32px), repeating-linear-gradient(to right, rgba(59, 120, 220, 0.028) 0 1px, transparent 1px 32px); min-height: 100vh; font-family: var(--font-sans); color: var(--cream); line-height: 1.5; } /* ---- Typography ---- */ h1 { font-family: var(--font-mono); font-weight: 800; font-size: clamp(26px, 3.4vw, 38px); letter-spacing: 0.005em; text-wrap: balance; } h2 { font-family: var(--font-mono); font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream-dim); display: flex; align-items: center; gap: 12px; margin-bottom: 4px; } h2::after { content: ""; flex: 1; height: 2px; background: var(--line); } h3 { font-family: var(--font-sans); font-size: 15px; font-weight: 700; } /* Blocky mono label style — tabs, tags, buttons, captions. */ .osd { font-family: var(--font-mono); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; } /* ---- Header ---- */ /* min-height (not a hard height) keeps the bar at its usual size on one line — a bigger .logo just centers inside it via align-items — but still lets it grow when there isn't room for logo + nav side by side (narrow phones): flex-wrap moves nav to its own row instead of squeezing everything into a fixed box. */ .header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 20px; min-height: 66px; padding: 12px 8%; background: var(--panel); color: var(--cream); } /* Two logo images, not one — the wordmark's "Base" half is white in the dark-theme file, unreadable now that the header follows the theme again. CSS toggles which one is visible (no flash: the attribute is already set by the inline anti-FOUC script before first paint). .logo itself is just the clickable wrapper; sizing lives on the img so its own aspect ratio is preserved regardless of height. */ .logo { display: flex; align-items: center; cursor: pointer; } .logo img { display: block; height: 56px; width: auto; } /* .logo img (specificity 0,1,1) would otherwise beat a plain .logo-light (0,1,0) and win the display:block/none conflict — this needs .logo img.logo-light to actually out-rank it and stay hidden by default. */ .logo img.logo-light { display: none; } :root[data-theme="light"] .logo-dark { display: none; } :root[data-theme="light"] .logo-light { display: block; } /* nav itself wraps its links (rather than relying on plain inline text-wrap, which reads unevenly) — gap gives consistent spacing whether it's one row on desktop or several on a narrow phone. */ nav { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 8px 22px; } nav a { font-family: var(--font-mono); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--cream-dim); text-decoration: none; } nav a:hover { color: var(--scarlet-text); } /* Hamburger toggle — hidden by default (desktop keeps the plain nav row above); shown below the mobile breakpoint, where nav becomes a slide-in drawer instead (see the media query + .nav-backdrop further down). Three hand-drawn bars, not a "☰" glyph — same reasoning as every other icon in this design system. */ .nav-toggle { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 34px; height: 34px; padding: 0; border: 2px solid var(--line-bright); background: transparent; cursor: pointer; flex-shrink: 0; } .nav-toggle span { display: block; width: 18px; height: 2px; background: var(--cream); transition: transform 0.15s ease, opacity 0.15s ease; } .nav-toggle:hover { border-color: var(--blue-bright); } /* Open state: the three bars redraw into an X. */ .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle.open span:nth-child(2) { opacity: 0; } .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Dims the page behind the open drawer and gives a tap-anywhere way to close it — created in JS (setupMobileNav() in auth.js) rather than hand-placed on every page. */ .nav-backdrop { position: fixed; inset: 0; background: rgba(15, 17, 12, 0.7); z-index: 1090; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; } .nav-backdrop.open { opacity: 1; pointer-events: auto; } @media (max-width: 1000px) { /* Shrinks alongside a slide-in drawer — the full 56px felt oversized next to it, same reasoning as when this was still text. */ .logo img { height: 32px; } .nav-toggle { display: flex; } /* Slides in from the right edge; links/auth actions stack top to bottom instead of wrapping in a row. Height is set twice on purpose: 100vh first as a fallback, then 100dvh — on a real phone (unlike a resized desktop window) 100vh is measured against the viewport with the browser's address bar hidden, so it overshoots the space actually visible and cuts off whatever sits lowest in the stack (the profile link, being one of the last items) without any obvious way to tell it needs scrolling. 100dvh tracks the real visible height instead; overflow-y:auto stays as a safety net regardless. */ .header nav { position: fixed; top: 0; right: 0; height: 100vh; height: 100dvh; width: min(62vw, 240px); overflow-y: auto; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 6px; background: var(--panel); border-left: 2px solid var(--line); padding: 76px 26px 26px; transform: translateX(100%); transition: transform 0.2s ease; z-index: 1100; } .header nav.open { transform: translateX(0); } /* display:contents un-nests #authStatus's own children (the moderation link if any, the profile link, the log in/out button) straight into nav's column flow — so the profile link lands right after Home/Explore/Requests/Publish as just another stacked row, instead of staying visually grouped inside a separate inline block that was easy to miss. */ .header nav .auth-status { display: contents; } /* Destinations (Home, Explore... and the profile link, once flattened above) read as a list; log in/out is an action, not a destination, so it's excluded here and styled + positioned on its own right below. */ .header nav a:not(.auth-btn) { width: 100%; padding: 10px 0; border-bottom: 1px solid var(--line); } /* margin-top:auto pins it to the bottom of the drawer (nav is a column flex container) regardless of how many links sit above it, with its own top border as a divider — "lower down and visually separate," not just another row in the list. */ .header nav .auth-btn { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); } } /* ---- Hero ---- */ .hero { text-align: center; padding: 64px 8% 40px; } .hero h1 { font-size: clamp(30px, 4.4vw, 46px); margin-bottom: 14px; } .hero p { color: var(--cream-dim); font-size: 16px; max-width: 56ch; margin: 0 auto 28px; } #searchInput { width: 100%; max-width: 650px; padding: 15px 18px; border: 2px solid var(--blue-bright); background: rgba(11, 61, 145, 0.12); color: var(--cream); font-family: var(--font-sans); font-size: 15px; outline: none; transition: border-color 0.12s ease, background 0.12s ease; } #searchInput::placeholder { color: var(--cream-dim); } #searchInput:hover { background: rgba(11, 61, 145, 0.18); } #searchInput:focus { border-color: var(--scarlet); background: rgba(11, 61, 145, 0.18); } /* ---- Platform stats — seven-segment readout ---- */ .stats-section { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; max-width: 720px; margin: 36px auto 0; background: var(--line); border: 2px solid var(--line); } .stat-card { background: var(--panel-raised); padding: 20px 18px; text-align: center; } .stat-card strong { display: inline-flex; justify-content: center; } .stat-card span { display: block; margin-top: 8px; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--scarlet-text); } /* Smaller variant — same red/bordered look, sitting under the hero title instead of below the search bar. The digits themselves stay at their normal (.stat-card) size — every attempt at shrinking the hand-built segment geometry further fell apart (glow bleed, then lost chevron points, then plain rectangles that still didn't read as real digits at a glance). Only the surrounding chrome (card padding, gaps, max-width, label size) is more compact. */ .stats-section.small { max-width: 480px; margin: 14px auto 6px; } .stats-section.small .stat-card { padding: 12px 10px; } .stats-section.small .stat-card span { margin-top: 6px; font-size: 10px; } /* ---- Section titles ---- */ /* Same box model as .models-grid (width:92% below 1320px, capped and centered above it) so a title/subtitle/controls row never runs wider than the card grid sitting right under it. */ .section-title { width: 92%; max-width: 1320px; margin: 50px auto 0; } .section-title p { color: var(--cream-dim); margin-top: 8px; max-width: 60ch; } /* Puts the subtitle and an adjacent control group (see .sort-controls) on the same row, forming one header block instead of two stacked ones. */ .section-title-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px 20px; margin-top: 8px; } .section-title-row p { margin-top: 0; } /* Sort controls (Trending / Most Downloaded / Recent) — sits in the same row as the "Popular models" subtitle. */ .sort-controls { display: flex; gap: 8px; flex-wrap: wrap; } .sort-btn { font-family: var(--font-mono); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 10px 16px; border: 2px solid var(--line-bright); background: var(--panel-raised); color: var(--cream-dim); cursor: pointer; transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease; } .sort-btn:hover { border-color: var(--scarlet); color: var(--cream); background: var(--panel-hover); } .sort-btn.active { border-color: var(--scarlet); color: var(--scarlet-text); background: rgba(252, 61, 33, 0.08); } /* ---- Model cards ---- */ /* auto-fit still shrinks down to 3/2/1 columns on narrower screens on its own, same as before — the max-width is what stops it from ever growing past 4: at 1320px, a 5th 260px column plus its gap (1380px) no longer fits, so auto-fit settles on 4 and stretches them to fill the space instead. width:92% (rather than the old 8% side padding) keeps the same side gutter below that width, and the max-width takes over once the viewport outgrows it. */ /* auto-fill, not auto-fit: with only one card, auto-fit collapses the unused column tracks to 0 width and lets that single 1fr stretch to fill the whole row — auto-fill keeps those empty tracks reserved instead, so one card stays card-sized (as if 3 more were about to sit next to it) rather than blowing up to full width. Both behave identically once there's enough cards to fill every column, this only changes the sparse case. */ .models-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; width: 92%; max-width: 1320px; margin: 0 auto; padding: 30px 0 60px; } .model-card { position: relative; background: var(--panel-raised); border: 2px solid var(--line); cursor: pointer; transition: border-color 0.12s ease, background 0.12s ease, transform 0.12s ease; } /* (hover: hover) and (pointer: fine) — real mouse only, not touch: on a phone, an element with :hover styles needs a first tap just to "preview" the hover state and a second one to actually fire the click, since the browser can't otherwise tell a hover from a tap. Gating this on real-hover capability means the first tap on a phone opens the model directly. */ @media (hover: hover) and (pointer: fine) { .model-card:hover { border-color: var(--cream-dim); background: var(--panel-hover); transform: translateY(-2px); } } .model-card:active { transform: translateY(0); } /* Archived — only ever rendered on the creator's own profile (see profile.js); scarlet is this design system's one alert color, same treatment as .archived-warning on the model page itself. */ .model-card.archived { border-color: var(--scarlet); background: rgba(252, 61, 33, 0.06); } .model-card.archived:hover { border-color: var(--scarlet); background: rgba(252, 61, 33, 0.1); } .archived-badge { position: absolute; top: 10px; left: 10px; z-index: 1; font-family: var(--font-mono); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 4px 8px; border: 1px solid var(--scarlet); background: rgba(15, 17, 12, 0.85); color: var(--scarlet-text); } .model-image { aspect-ratio: 4 / 3; background: linear-gradient(135deg, rgba(11, 61, 145, 0.35), var(--panel)); border-bottom: 2px solid var(--line); display: flex; align-items: center; justify-content: center; } .thumb-icon { opacity: 0.9; } .model-content { padding: 18px; } /* Reserves space for exactly 2 lines, whether the title needs one or two — otherwise a wrapped title pushes the folder path and creator row down only on THAT card, throwing off alignment across a row of cards with shorter titles. A would-be 3rd line clamps with an ellipsis instead of growing the card further. */ .model-content h3 { margin-bottom: 8px; font-size: 18px; line-height: 1.3; min-height: calc(1.3em * 2); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Real around the title now (search engines only follow actual links, not the card's onclick) — styled to look exactly like plain text, same as before this existed. */ .model-content h3 a { color: inherit; text-decoration: none; } .model-content p { color: var(--cream-dim); font-size: 14px; margin-bottom: 12px; line-height: 1.45; } /* Same alignment reasoning as the title above: always exactly one line, so the creator/downloads row starts at the same height whether the folder path is short or long enough to have wrapped. */ .model-content .folder-path { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Bottom row of a model card — replaces the old "View model" button (the whole card is already a click target). Creator name on the left, download count on the right, with a divider above to separate it from the folder path/description. */ .card-meta { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; } /* Wraps the avatar + the name badge together so they read as one unit and truncate together on a narrow card. */ .card-creator-group { display: inline-flex; align-items: center; gap: 6px; min-width: 0; } /* Sized to match .card-creator's own rendered height (11px mono text + 4px vertical padding + 1px border, both sides) so it sits flush next to the name instead of looking mismatched. */ .card-creator-avatar { width: 26px; height: 26px; flex-shrink: 0; object-fit: cover; border: 1px solid var(--line-bright); display: block; } .card-creator-avatar-placeholder { display: flex; align-items: center; justify-content: center; background: var(--panel); color: var(--cream-dim); font-family: var(--font-mono); font-weight: 800; font-size: 12px; } .card-creator { display: inline-block; min-width: 0; padding: 4px 9px; border: 1px solid var(--blue-bright); background: var(--blue); color: var(--on-dark); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .card-downloads { display: inline-flex; align-items: center; gap: 4px; color: var(--cream-dim); flex-shrink: 0; } .card-downloads svg { flex-shrink: 0; } .tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; } .tag { font-family: var(--font-mono); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; background: var(--panel); color: var(--cream-dim); border: 1px solid var(--line-bright); padding: 5px 9px; cursor: default; } .download-btn { /* display/text-align/text-decoration: no effect on a