/* ========================================================================== AMPY LED CALCULATOR — SNIPPET 1 of 3: CSS Paste as a Fluent Snippets snippet of type 'CSS'. All COMPONENT styling is scoped under .ampy-calc. The file additionally sets two global lines: the @import for the fonts (below) and the 62.5% base (last). Generated by build-snippets.js — DO NOT EDIT here; change ../styles.css. ========================================================================== */ /* ============================================================================= LED calculator — STYLES (matches Ampy's battery calculator, same design system) 1rem = 10px (html font-size 62.5%). Tokens on .ampy-calc. BEM ampy-calc__*. ============================================================================= */ /* Fonts are self-hosted and emitted by the render (LED.php); the prototype's Google Fonts @import has been removed - no third-party font request. */ /* ── WordPress container context ───────────────────────────────────────────── The prototype sized itself off the VIEWPORT (@media). Inside a Bricks column the viewport is wide while the component is narrow, so viewport breakpoints misfire and desktop rules apply in a narrow slot. Breakpoint VALUES are unchanged; they are now evaluated against the component's own inline size. `.ampy-led-outer` is already emitted by the render, so it becomes the named container. Same pattern the EV calculator already uses. Must stay AFTER the @import above: a rule before an @import makes the browser discard that @import, and the fonts then fail silently. */ .ampy-led-outer{ display:block; width:100%; max-width:100%; box-sizing:border-box; overflow-x:hidden; container-type:inline-size; container-name:ampy; } /* NOTE: this tool builds on Ampy's design-system base html{font-size:62.5%} (1rem = 10px) — same as the battery calculator. The global base is set by the host page/theme (or by in the standalone version), NOT by this file, so that embedding in Bricks/WordPress does not affect the rest of the page. */ #ampyLed{ /* Color — semantic tokens (light surface) */ --bg-primary: rgb(247, 249, 251); --bg-surface: rgb(9, 11, 50); --bg-subtle: rgb(234, 239, 243); --text-primary: rgb(15, 18, 60); --text-secondary: rgb(86, 94, 130); --text-inverse: rgb(255, 255, 255); --action-primary: rgb(0, 169, 145); --action-secondary: rgb(28, 196, 175); --state-success: rgb(57, 194, 129); --state-error: rgb(214, 76, 76); --state-warning: rgb(240, 175, 56); --border-default: rgba(15, 18, 60, 0.12); --border-focus: rgb(0, 169, 145); /* On dark navy surface */ --on-surface-text: rgba(255, 255, 255, 0.94); --on-surface-text-muted: rgba(255, 255, 255, 0.66); --on-surface-text-faint: rgba(255, 255, 255, 0.55); /* AA: supporting text on navy ~5:1 */ --on-surface-border: rgba(255, 255, 255, 0.14); --on-surface-border-strong: rgba(255, 255, 255, 0.28); --on-surface-subtle-bg: rgba(255, 255, 255, 0.06); /* Chart (stacked bar) */ --chart-stream-1: rgb(0, 169, 145); --chart-stream-2: rgb(57, 194, 129); --chart-stream-3: rgb(122, 208, 198); --chart-stream-4: rgb(160, 184, 196); /* Payback curve */ --chart-line-loss: rgb(240, 175, 56); --chart-line-profit: rgb(0, 169, 145); --chart-zone-loss: rgba(240, 175, 56, 0.18); --chart-zone-profit: rgba(0, 169, 145, 0.16); /* Spacing */ --spacing-xs: 0.5rem; --spacing-sm: 0.75rem; --spacing-md: 1rem; --spacing-lg: 1.5rem; --spacing-xl: 2rem; --spacing-2xl: 3rem; --spacing-3xl: 4rem; /* Radius */ --radius-sm: 0.6rem; --radius-md: 1.2rem; --radius-lg: 2rem; --radius-full: 999rem; /* Shadow */ --shadow-sm: 0 1px 2px rgba(15, 18, 60, 0.06); --shadow-md: 0 0.4rem 1.2rem rgba(15, 18, 60, 0.08); --shadow-lg: 0 1.6rem 4rem rgba(15, 18, 60, 0.14); /* Motion */ --motion-fast: 150ms; --motion-normal: 300ms; --easing: cubic-bezier(0.2, 0, 0.2, 1); /* Type scale — TRUE fluid (vw-based slope, anchors 375→1280px, 1rem=10px). Makes the typography actually grow on desktop (a touch larger) while holding a deliberate mobile minimum. The previous formula grew in px and got stuck at min. */ --fs-xs: clamp(1.2rem, calc(1.159rem + 0.110vw), 1.3rem); --fs-sm: clamp(1.3rem, calc(1.217rem + 0.221vw), 1.5rem); --fs-md: clamp(1.6rem, calc(1.476rem + 0.331vw), 1.9rem); --fs-lg: clamp(1.8rem, calc(1.551rem + 0.663vw), 2.4rem); --fs-xl: clamp(2.1rem, calc(1.810rem + 0.773vw), 2.8rem); --fs-2xl: clamp(2.4rem, calc(1.986rem + 1.105vw), 3.4rem); --fs-3xl: clamp(2.8rem, calc(2.137rem + 1.768vw), 4.4rem); --fs-4xl: clamp(3.8rem, calc(3.054rem + 1.989vw), 5.6rem); --font-heading: "Plus Jakarta Sans", system-ui, sans-serif; --font-body: "Outfit", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; box-sizing: border-box; color: var(--text-primary); /* Section background removed: the Bricks SECTION owns the band now. The token is kept because cards/inputs/methodology still fill with it. Was: var(--bg-primary). */ background: transparent; font-family: var(--font-body); font-size: var(--fs-md); line-height: 1.5; font-weight: 400; -webkit-font-smoothing: antialiased; } #ampyLed *, #ampyLed *::before, #ampyLed *::after{ box-sizing: border-box; } #ampyLed p, #ampyLed h1, #ampyLed h2, #ampyLed h3{ margin: 0; } #ampyLed :where(.ampy-calc button){ font: inherit; color: inherit; background: transparent; border: 0; cursor: pointer; } #ampyLed a{ color: var(--action-primary); text-decoration: none; } #ampyLed a:hover{ text-decoration: underline; } #ampyLed .ampy-calc__t-mono{ font-family: var(--font-mono); font-feature-settings: "tnum" 1, "lnum" 1; } /* Utility classes scoped to the widget so they do not clash with the host page */ #ampyLed .sr-only{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } #ampyLed .is-hidden{ display: none !important; } /* --- Layout --------------------------------------------------------------- */ #ampyLed .ampy-calc__container{ max-width: 128rem; margin: 0 auto; padding: var(--spacing-xl) var(--spacing-lg); display: flex; flex-direction: column; gap: var(--spacing-2xl); } #ampyLed .ampy-calc__header{ display: flex; flex-direction: column; gap: var(--spacing-xs); } #ampyLed .ampy-calc__header h1{ font-family: var(--font-heading); font-size: var(--fs-2xl); line-height: 1.2; font-weight: 700; letter-spacing: -0.015em; max-width: 80rem; } #ampyLed .ampy-calc__header p{ color: var(--text-secondary); font-size: var(--fs-sm); max-width: 70rem; } #ampyLed .ampy-calc__main{ display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--spacing-xl); align-items: start; } #ampyLed .ampy-calc__result-stack{ display: flex; flex-direction: column; gap: var(--spacing-md); min-width: 0; } #ampyLed .ampy-calc__card{ min-width: 0; max-width: 100%; } @container ampy (max-width: 960px){ #ampyLed .ampy-calc__main{ grid-template-columns: minmax(0, 1fr); }} @container ampy (max-width: 768px){ #ampyLed .ampy-calc__container{ padding: var(--spacing-lg) var(--spacing-md); gap: var(--spacing-xl); }} /* --- Cards ---------------------------------------------------------------- */ #ampyLed .ampy-calc__card{ background: var(--bg-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--spacing-xl); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: var(--spacing-lg); } @container ampy (max-width: 600px){ #ampyLed .ampy-calc__card{ padding: var(--spacing-lg); }} #ampyLed .ampy-calc__card--surface{ background: var(--bg-surface); color: var(--text-inverse); border-color: transparent; box-shadow: var(--shadow-lg); /* Airy result card with even vertical rhythm (senior spacing) */ padding: var(--spacing-3xl); gap: var(--spacing-2xl); background-image: radial-gradient(120% 60% at 90% -10%, rgba(0, 169, 145, 0.28), transparent 60%), radial-gradient(80% 50% at -10% 110%, rgba(57, 194, 129, 0.16), transparent 60%); } @container ampy (max-width: 600px){ #ampyLed .ampy-calc__card--surface{ padding: var(--spacing-xl) var(--spacing-lg); gap: var(--spacing-xl); }} /* --- Tiers / fields ------------------------------------------------------- */ #ampyLed .ampy-calc__tier{ display: flex; flex-direction: column; gap: var(--spacing-md); } #ampyLed .ampy-calc__tier--primary{ gap: var(--spacing-lg); } #ampyLed .ampy-calc__tier + .ampy-calc__tier{ margin-top: var(--spacing-lg); padding-top: var(--spacing-lg); border-top: 1px solid var(--border-default); } #ampyLed .ampy-calc__tier-label{ font-size: var(--fs-sm); color: var(--text-secondary); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: calc(-1 * var(--spacing-xs)); } #ampyLed .ampy-calc__field{ display: flex; flex-direction: column; gap: var(--spacing-xs); } #ampyLed .ampy-calc__field-row{ display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-md); } #ampyLed .ampy-calc__field-label-tiny{ font-size: var(--fs-xs); color: var(--text-secondary); font-weight: 500; letter-spacing: 0.02em; display: inline-flex; align-items: center; gap: var(--spacing-xs); } #ampyLed .ampy-calc__field-label{ font-family: var(--font-heading); font-size: var(--fs-sm); font-weight: 600; color: var(--text-primary); letter-spacing: 0.01em; /* Bricks gives