/* * Clever LCR Directory — scoped stylesheet. * * Status: Step 1 scaffolding. This file currently contains ONLY the design * tokens (CSS custom properties), the page-level scope rule, and a handful * of placeholder/empty-state styles. As we land each section in subsequent * steps, real component CSS gets appended below — translating each Tailwind * utility from the reference HTML to a prefixed class scoped under * .lcr-page-v1. * * No Tailwind. No frameworks. Every selector lives under .lcr-page-v1. */ /* ── Design tokens (byte-identical to tailwind.config in reference HTML) ── */ .lcr-page-v1 { /* Brand — from tailwind.config.theme.extend.colors.brand */ --lcr-blue: #0075EB; --lcr-blue-hover: #005FBF; --lcr-blue-light: #E8F2FE; --lcr-green: #00B373; --lcr-green-hover: #009960; --lcr-green-light: #ECFDF5; --lcr-green-border: #6EE7B7; /* Neutrals */ --lcr-dark: #161E26; /* text-dark */ --lcr-muted: #6B7280; /* text-muted */ /* Hairline. Raised from #E5E7EB to sell-fast's #DDE4ED (2026-08-11) — a touch darker and bluer. It was introduced when the page briefly went white and the card border had to carry all the separation on its own; that base has since reverted to off-white, but the stronger hairline is KEPT deliberately, because "cards blending into the background" was the complaint that prompted the revert and this is the half of the fix that costs nothing. Still no shadow: sell-fast doesn't use one here. */ --lcr-border: #DDE4ED; /* The page base (see .lcr-page-v1) and every component inset — listing-fee cells, card tabs, hover states. White is reserved for things that should read as raised off it: cards, controls, the minibar. */ --lcr-surface-subtle: #F9FAFB; /* bg-surface-subtle */ --lcr-white: #FFFFFF; --lcr-lwc-navy: #2F3B54; --lcr-star-gold: #F5A623; /* Sentiment (positive/negative theme cards) */ --lcr-sentiment-positive-bg: #D1FAE5; --lcr-sentiment-positive-text: #059669; --lcr-sentiment-negative-bg: #FEF3C7; --lcr-sentiment-negative-text: #B45309; /* Layout */ --lcr-content-w: 1144px; /* maxWidth.content */ /* Reading measure for running text and the narrow furniture that should share its right edge (intro copy, TOC bar, the how-to-choose drawers). Mirrors Clever's shared --clvr-content-width (810px); --lcr-content-w already matches --clvr-wide-width. Added for ALGCON-1670 — the intro, TOC and drawers each carried their own ad-hoc cap and so ended at three different right edges. Anything using this MUST also set box-sizing: border-box: this page is content-box, so a bordered element declaring 810px renders 812px, which is exactly the 2px that made the TOC miss an aligned divider. */ --lcr-reading-w: 810px; --lcr-radius-card: 12px; /* borderRadius.card */ --lcr-radius-btn: 8px; /* borderRadius.btn */ --lcr-radius-badge: 4px; /* borderRadius.badge */ --lcr-radius-pill: 100px; /* borderRadius.pill */ /* Typography */ --lcr-font-sans: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif; --lcr-font-serif: 'Libre Baskerville', Georgia, serif; --lcr-tracking-clever: -0.02em; /* letterSpacing.clever — applied to body */ /* Scope */ font-family: var(--lcr-font-sans); color: var(--lcr-dark); font-size: 16px; line-height: 1.5; letter-spacing: var(--lcr-tracking-clever); -webkit-font-smoothing: antialiased; } /* Page base is the off-white, not white (Hannah, 2026-08-11). This page went white for one round, matching sell-fast exactly, and the ranked cards blended into it: they are white with a 1px hairline and no shadow, so on a white field the card edge was the only thing separating a card from the page, and it wasn't enough. Sell-fast gets away with white because its cards are sparser; a 5-card ranked list plus 13 more-companies cards is a denser grid and needs the field behind it to do some work. So white is now a COMPONENT colour, not a page colour — cards, controls and the minibar are white, and they read as raised because everything behind them is #F9FAFB. That keeps the two-value system this pass was about, just with off-white as the base instead of white: #F9FAFB page base — everything that isn't a band #E8F2FE hero, About the author, and the inset accent panels ALGCON-1579's 520px blue-light bottom fade stays removed: it was the third treatment and the thing that read as a gradient in the methodology section. The flat author band replaces it. */ .lcr-page-v1 { background-color: var(--lcr-surface-subtle); } /* Heading defaults (from reference body global rules) */ .lcr-page-v1 h1, .lcr-page-v1 h2, .lcr-page-v1 h3, .lcr-page-v1 h4, .lcr-page-v1 h5, .lcr-page-v1 h6 { font-family: var(--lcr-font-sans); font-weight: 600; line-height: 1.25; margin: 0; } /* Structural-only headings. The FAQ questions and the two compact drawers wrap their toggle