/* * Fix Revenue Leaks shared web theme * Based on the AI Workshops design system. * * Quick start: * 1. Link this file in . * 2. Add class="frl-theme" to . * 3. Use the frl-* component classes below. * * Header example: *

* FIX REVENUE LEAKS * BUSINESS EFFICIENCY · AI SYSTEMS * * *

* * The font stack matches the workshop. To guarantee Manrope on devices * that do not have it installed, load Manrope separately or self-host it. */ :root { --frl-green: #14513d; --frl-deep: #0f2f2c; --frl-ivory: #f7f6f2; --frl-gold: #cfa66b; --frl-ink: #223047; --frl-muted: #57616b; --frl-line: #d8ded8; --frl-white: #ffffff; --frl-soft-green: #ecefe8; --frl-tag-green: #e7ede6; --frl-dark-panel: #183b36; --frl-dark-line: #48615c; --frl-font-sans: Manrope, Arial, sans-serif; --frl-content-width: 1250px; --frl-radius: 6px; --frl-pill-radius: 999px; --frl-shadow: 0 16px 42px rgba(15, 47, 44, 0.09); } .frl-theme, .frl-theme * { box-sizing: border-box; } .frl-theme { margin: 0; background: var(--frl-ivory); color: var(--frl-ink); font-family: var(--frl-font-sans); font-size: 18px; line-height: 1.55; } .frl-theme button, .frl-theme input, .frl-theme textarea, .frl-theme select { font: inherit; } .frl-theme :is(a, button, input, textarea, select):focus-visible { outline: 3px solid var(--frl-gold); outline-offset: 4px; } .frl-theme a { color: var(--frl-green); } .frl-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 4.5vw; border-bottom: 1px solid var(--frl-line); background: var(--frl-ivory); } .frl-brand { color: var(--frl-green); font-size: 16px; font-weight: 800; letter-spacing: 0.09em; line-height: 1.2; text-decoration: none; } .frl-brand span { display: block; margin-top: 5px; color: var(--frl-muted); font-size: 12px; letter-spacing: 0.16em; } .frl-header-actions, .frl-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .frl-actions { margin: 20px 0; } .frl-shell { width: min(100% - 12vw, var(--frl-content-width)); margin-inline: auto; } .frl-section { padding-block: clamp(42px, 7vw, 90px); } .frl-eyebrow { margin: 0 0 18px; color: var(--frl-green); font-size: 13px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; } .frl-theme :is(h1, h2) { margin: 0 0 24px; color: var(--frl-deep); font-weight: 800; letter-spacing: -0.045em; line-height: 1.06; } .frl-theme h1 { font-size: clamp(40px, 5.1vw, 76px); } .frl-theme h2 { font-size: clamp(34px, 4vw, 58px); } .frl-theme h3 { margin: 0 0 10px; font-size: 23px; letter-spacing: -0.02em; line-height: 1.25; } .frl-theme p { margin: 0 0 18px; } .frl-lead { max-width: 830px; font-size: clamp(20px, 2vw, 27px); line-height: 1.45; } .frl-small, .frl-muted { color: var(--frl-muted); } .frl-small { font-size: 14px; } .frl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; align-items: start; } .frl-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .frl-card { padding: 25px; border: 1px solid var(--frl-line); border-radius: var(--frl-radius); background: var(--frl-white); } .frl-card-dark { border-color: var(--frl-green); background: var(--frl-green); color: var(--frl-white); } .frl-card-dark .frl-small { color: #dfe8e1; } .frl-button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 11px 21px; border: 1px solid var(--frl-green); border-radius: var(--frl-pill-radius); background: var(--frl-green); color: var(--frl-white) !important; cursor: pointer; font-size: 16px; font-weight: 700; text-decoration: none; } .frl-button:hover { filter: brightness(1.13); } .frl-button:disabled { cursor: default; opacity: 0.38; } .frl-button-secondary { background: transparent; color: var(--frl-green) !important; } .frl-button-gold { border-color: var(--frl-gold); background: var(--frl-gold); color: var(--frl-deep) !important; } .frl-tag, .frl-pill { display: inline-block; font-weight: 800; } .frl-tag { margin-bottom: 14px; padding: 5px 9px; border-radius: 4px; background: var(--frl-tag-green); color: var(--frl-green); font-size: 12px; letter-spacing: 0.07em; } .frl-pill { margin-bottom: 25px; padding: 7px 13px; border: 1px solid var(--frl-dark-line); border-radius: var(--frl-pill-radius); color: #dfe8e1; font-size: 13px; } .frl-callout { margin: 22px 0; padding: 14px 22px; border-left: 4px solid var(--frl-gold); background: var(--frl-soft-green); } .frl-rule { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--frl-line); } .frl-hero { padding-block: clamp(48px, 8vw, 105px); background: var(--frl-deep); color: var(--frl-white); } .frl-hero :is(h1, h2) { color: var(--frl-white); } .frl-hero .frl-eyebrow, .frl-hero .frl-small { color: #dec299; } .frl-hero .frl-lead { color: #e0e7e2; } .frl-hero .frl-accent { color: var(--frl-gold); } .frl-hero .frl-button-secondary { border-color: #80938d; color: var(--frl-white) !important; } .frl-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .frl-theme label { display: block; font-size: 14px; font-weight: 700; } .frl-theme :is(input, textarea, select) { display: block; width: 100%; margin-top: 7px; padding: 12px; border: 1px solid #aab6ad; border-radius: 4px; background: var(--frl-white); color: var(--frl-ink); font-size: 16px; } .frl-theme textarea { min-height: 94px; resize: vertical; } .frl-checklist { padding: 0; list-style: none; } .frl-checklist li { position: relative; margin-bottom: 10px; padding-left: 30px; } .frl-checklist li::before { position: absolute; left: 0; color: var(--frl-green); content: "✓"; font-weight: 800; } .frl-table-wrap { overflow-x: auto; } .frl-theme table { width: 100%; border-collapse: collapse; font-size: 15px; } .frl-theme :is(th, td) { padding: 12px 9px; border-bottom: 1px solid var(--frl-line); text-align: left; vertical-align: top; } .frl-theme th { color: var(--frl-green); } .frl-offer { padding: 30px; border: 1px solid var(--frl-gold); background: var(--frl-white); } .frl-price, .frl-big-value { color: var(--frl-green); font-weight: 800; line-height: 1.1; } .frl-price { margin: 20px 0 8px; font-size: 60px; } .frl-big-value { font-size: clamp(36px, 4.5vw, 65px); } .frl-footer-nav { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 12px 4.5vw; border-top: 1px solid var(--frl-line); background: var(--frl-ivory); } .frl-progress { height: 3px; background: #dbe2da; } .frl-progress > span { display: block; height: 100%; background: var(--frl-gold); } @media (max-width: 800px) { .frl-header { flex-wrap: wrap; padding: 14px 5vw; } .frl-brand { font-size: 14px; } .frl-shell { width: min(100% - 10vw, var(--frl-content-width)); } .frl-grid, .frl-grid-3, .frl-form-grid { grid-template-columns: 1fr; gap: 22px; } .frl-theme h1 { font-size: 44px; } .frl-card { padding: 22px; } .frl-price { font-size: 48px; } } @media (prefers-reduced-motion: reduce) { .frl-theme *, .frl-theme *::before, .frl-theme *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; } } @media print { .frl-theme { background: var(--frl-white); font-size: 13px; } .frl-no-print, .frl-header-actions { display: none !important; } .frl-card { break-inside: avoid; } }