/** * Laydn tour — BOARD SCREEN (Find Loads, list view). * * Prefix: .flb- (find-loads board). Every selector below starts with a .flb * class or is scoped under .lw-scaler, so nothing reaches the marketing page * or another screen. * * ⚠️ THE APP IS A LIGHT THEME INSIDE A DARK SITE. The marketing body colour is * var(--white) (#F2F2F2) and style.css paints every bare

in * var(--muted) (rgba(242,242,242,.55)); inheriting either into a white card * is the documented way to render an invisible screen on this theme. Every * container AND every text element below sets its own colour. The dark hero * card sets a LIGHT colour on itself, so nothing inside it can inherit the * screen's black ink either. * * ⚠️ Volt #C8F135 is text ONLY on a black surface (hero card, "Interested" * button). On white it is a fill or a border; as text it is #4a6b00/#2d6300. * * ⚠️ style.css forces 16px !important on every input/select on touch devices * (the iOS focus-zoom guard). It reaches in here on a real phone, so the * controls below are sized to survive 16px text: selects size to their * longest option instead of a fixed width, and grid tracks are minmax(0,…). * * Palette (shared with laydn-tour.css tokens): * ink #0a0a0a · body #5a6068 · faint #8a909a · line #e3e6ea · hairline #eef0f3 * card #fff · ground #f7f8fa · volt #C8F135 · volt-as-text #4a6b00 * fire #ff5c35 · amber #fff4e0 / #8a5a00 / #f0dcb8 · cyan #e0f6fb / #0b6b7d * * Loaded alongside assets/css/laydn-tour.css, which owns .lw-* and the tokens. * Rules that compete with .lw-head are written as `.flb .flb-head …` so they * win on specificity whichever of the two sheets loads first. */ /* [hidden] needs help: several blocks below set display explicitly, and the engine reveals states purely by toggling the hidden attribute. */ .flb [hidden] { display: none !important; } .flb { color: #0a0a0a; font-family: 'Inter', system-ui, sans-serif; } /* ============================================================ * 1. HEADSTACK — the dark hero card on the light page * ========================================================== */ /* .lw-head already gives us #0a0a0a, the volt border, the halo and the shadow. */ .flb .flb-head { padding: 20px 22px 18px; margin-bottom: 18px; color: #F2F2F2; } .flb-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .flb-page-head-text { min-width: 0; color: #F2F2F2; } .flb .flb-head .k { color: rgba(242,242,242,.55); } .flb .flb-head h1 { color: #F2F2F2; font-size: 34px; line-height: 1.05; margin: 0; } .flb .flb-head h1 .a { color: #C8F135; } .flb .flb-head h1 .flb-num { color: #F2F2F2; font-variant-numeric: tabular-nums; } /* the Filters pill */ .flb-toggle { position: relative; flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 12px; border-radius: 99px; cursor: pointer; background: rgba(200,241,53,.10); border: 1px solid rgba(200,241,53,.45); color: #C8F135; font-family: 'Anta', 'Inter', sans-serif; font-size: 11px; line-height: 1.3; text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; } .flb-toggle > i.fa-solid { font-size: 12px; color: #C8F135; } .flb-toggle span { color: #C8F135; } /* The pill can't clip (its aura glows outward), so keep the press ripple inside the pill's own box instead of letting a 100px disc spill off it. */ .flb-toggle.lw-rippling::after { max-width: 100%; max-height: 100%; } /* The collapsed-state aura, breathing so the eye finds it. It only runs while the film plays: pause must pause the picture, and a paused or screenshotted frame must not depend on wall-clock time. */ .flb-aura { position: absolute; inset: -1px; border-radius: 99px; pointer-events: none; border: 1px solid #C8F135; animation: flb-aura 2.2s ease-in-out infinite; animation-play-state: paused; } .lw.is-playing .lw-scaler .flb-aura { animation-play-state: running; } @keyframes flb-aura { 0%, 100% { box-shadow: 0 0 0 0 rgba(200,241,53,.34); } 50% { box-shadow: 0 0 0 7px rgba(200,241,53,0); } } @media (prefers-reduced-motion: reduce) { .flb-aura { animation: none; } } /* ============================================================ * 2. THE FILTER CARD — translucent, inside the black hero card * ========================================================== */ .flb-filters { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; background: rgba(255,255,255,.03); border: 1px solid rgba(200,241,53,.35); border-radius: 12px; padding: 16px; color: rgba(242,242,242,.75); } .flb-grid { display: grid; gap: 12px; } .flb-grid > div { min-width: 0; } .flb-row-1 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .flb-row-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Field labels only. Scoped to the grids so it cannot also restyle the "Hide my loads"