/* _brutal.css — Frederick & Sons SMB Automations brutalist reskin (Cherokee→F&S merger 2026-06-25). Append/override sheet, loaded LAST in . Drafted by Grok-build, audited by Claude: danger/warning kept FUNCTIONAL (not lime) so error/destructive states still read in the billing UI; the over-broad [class*=primary] match narrowed to button classes only. */ @import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;700;800;900&family=Space+Mono:wght@400;700&display=swap'); :root { --primary: #c8ff00 !important; --primary-dark: #c8ff00 !important; --primary-soft: rgba(200,255,0,.12) !important; --magenta: #c8ff00 !important; --violet: #c8ff00 !important; --blue: #c8ff00 !important; --bg: #0a0a0a !important; --surface: #0a0a0a !important; --surface-2: rgba(242,241,234,.02) !important; --border: rgba(242,241,234,.14) !important; --border-strong: rgba(242,241,234,.24) !important; --text: #f2f1ea !important; --text-muted: #a4a49c !important; --text-dim: #a4a49c !important; --success: #c8ff00 !important; --warning: #ffb020 !important; /* kept amber — warnings must stay distinct from the lime accent */ --danger: #ff5c5c !important; /* kept red — destructive/error states must never look like a CTA */ --radius: 0 !important; --radius-sm: 0 !important; --radius-lg: 0 !important; } * { border-radius: 0 !important; box-shadow: none !important; backdrop-filter: none !important; } html, body { background: #0a0a0a !important; color: #f2f1ea !important; font-family: "Archivo", system-ui, sans-serif !important; } body { background-image: linear-gradient(rgba(242,241,234,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(242,241,234,.05) 1px, transparent 1px) !important; background-size: 100% 88px, 8.33vw 100% !important; background-attachment: fixed !important; } h1, h2, h3 { font-family: "Archivo" !important; font-weight: 900 !important; text-transform: uppercase !important; letter-spacing: -.02em !important; } button, .btn, .button, a.btn, [class*="btn"] { border: 1px solid #c8ff00 !important; background: transparent !important; color: #c8ff00 !important; font-family: "Space Mono", monospace !important; text-transform: uppercase !important; } .btn-primary, .button-primary, [class*="btn-primary"], .cta, [class*="btn-cta"] { background: #c8ff00 !important; color: #0a0a0a !important; border-color: #c8ff00 !important; } /* destructive/error buttons stay red — never disguised as a lime CTA */ .btn-danger, .button-danger, [class*="btn-danger"], [class*="btn-delete"], [class*="destructive"] { border: 1px solid #ff5c5c !important; color: #ff5c5c !important; background: transparent !important; } .card, .panel, [class*="card"], [class*="panel"], .surface { background: rgba(242,241,234,.02) !important; border: 1px solid rgba(242,241,234,.14) !important; box-shadow: none !important; } .nav, nav, .nav a, nav a { font-family: "Space Mono", monospace !important; text-transform: uppercase !important; } input, textarea, select { background: #0a0a0a !important; border: 1px solid rgba(242,241,234,.14) !important; color: #f2f1ea !important; font-family: "Archivo", system-ui, sans-serif !important; } code, .mono, .badge, .tag, .pill, .kbd, kbd { font-family: "Space Mono", monospace !important; } /* "← Frederick & Sons" back-link (added to base.html) */ .fas-back { display: inline-flex; align-items: center; gap: .4rem; font-family: "Space Mono", monospace !important; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: #a4a49c !important; text-decoration: none; padding: .3rem 0; } .fas-back:hover { color: #c8ff00 !important; } /* hide the photographic Cherokee mountain logo — F&S brand is typographic (the wordmark IS the logo) */ .brand-mark, .auth-mark, .err-mark, .cherokee-brand-img, img[src*="og-image"], img[alt*="Cherokee"] { display: none !important; } /* ── Stray hardcoded brand-color sweep (cyan #c8ff00 / magenta / violet bypass :root tokens). Found via render-scan post-reskin; force them all to the single lime accent / neutralize washes. */ .grad, .gradc, [class*="grad"] { background: none !important; background-image: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; -webkit-text-fill-color: #c8ff00 !important; color: #c8ff00 !important; } .eyebrow, .hub-eyebrow, [class*="eyebrow"], .cs-badge, .pcard-tag, [class*="badge"], .preacher-action, .preacher-head-avatar { color: #c8ff00 !important; border-color: rgba(200,255,0,.45) !important; } .dot, [class*="-dot"], .preacher-bubble-dot { background: #c8ff00 !important; color: #c8ff00 !important; } .mark, .num, .arrow { color: #c8ff00 !important; } .sol-cta, .mm-cta, .pcard-cta, [class*="-cta"] { color: #c8ff00 !important; border-color: #c8ff00 !important; } /* colored background washes / animated scanflash → neutral dark */ .pricing-bg, .sol-wash, .bg-scanflash { background-image: none !important; background: #0a0a0a !important; } /* decorative SVG gradients/strokes → lime */ svg .path, svg .rect, svg path[fill]:not([fill="none"]), svg rect[fill]:not([fill="none"]) { fill: #c8ff00 !important; } svg [stroke]:not([stroke="none"]) { stroke: #c8ff00 !important; } /* marketing-page residuals (smart-home/trades/bigdog): neutralize washes, lime the accents + SVGs */ .bd-sec, .bd-surveil, .bd-tier { border-color: rgba(242,241,234,.14) !important; } .bd-tier [class*="accent"], .state, .bd-surveil [class*="dot"] { color: #c8ff00 !important; } .auth-wrap, [class*="-wash"], [class*="-bg"] { background-image: none !important; background-color: #0a0a0a !important; } svg path:not([fill="none"]), svg rect:not([fill="none"]), svg circle:not([fill="none"]), svg polygon { fill: #c8ff00 !important; } /* SVG icons inherit cyan via currentColor — force lime (brutalist icons are monochrome accent) */ svg { color: #c8ff00 !important; } svg [fill="currentColor"], svg path[fill="currentColor"] { fill: #c8ff00 !important; }