/** * E&N Janitorial Quote Configurator — frontend styles. * * Faithful port of the approved HTML prototype (blueprint backdrop, brand * blue → purple gradient, spec-sheet summary panel). Fully scoped under * .enj-app so the active theme cannot bleed in; the plugin never styles bare * global tags. Light mode only. Brand colours arrive as scoped CSS variables * (see ENJ_Frontend::scoped_css) so one admin change re-skins everything. * * Three density versions ship in this file: * .enj-v-full full page — top bar, hero, trust, sidebar, backdrop * .enj-v-medium mid-page section — compact intro, trust, sidebar * .enj-v-lite homepage / narrow column — configurator only, densest */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Sora:wght@500;600;700&display=swap'); /* ===================================================================== WRAPPER RESET (theme isolation) ===================================================================== */ .enj-app{ all: initial; display: block; position: relative; isolation: isolate; /* neutrals — self-contained, straight from the prototype */ --enj-surface:#ffffff; --enj-surface-2:#fbfcfe; --enj-page:#f6f8fb; --enj-text:#354360; --enj-line:#e3e9f1; --enj-line-strong:#cfd9e6; --enj-danger:#c0392b; /* brand palette (defaults; overridden by the scoped inline vars) */ --enj-ink:#2E436A; --enj-ink-soft:#5F6E88; --enj-accent:#3981BB; --enj-accent-mid:#357AB1; --enj-accent-deep:#2F6FA2; --enj-accent-ink:#2A6697; --enj-accent-darker:#275F8D; --enj-accent-soft:#edf4f9; --enj-accent-soft-2:#dbe8f3; --enj-accent-line:#b4cfe5; --enj-accent-a12:rgba(57,129,187,.12); --enj-accent-a22:rgba(57,129,187,.22); --enj-accent-a40:rgba(57,129,187,.40); --enj-accent2:#A53FAA; --enj-accent2-mid:#9b3ba0; --enj-accent2-deep:#86328b; --enj-accent2-a10:rgba(165,63,170,.10); --enj-ok:#1F7A4D; --enj-ok-tint:#eaf4ef; --enj-ok-ring:rgba(31,122,77,.40); --enj-grid:rgba(46,67,106,.055); --enj-grid-2:rgba(46,67,106,.09); --enj-grad:linear-gradient(135deg,var(--enj-accent-mid) 0%,var(--enj-accent2-mid) 100%); --enj-grad-hover:linear-gradient(135deg,var(--enj-accent-ink) 0%,var(--enj-accent2-deep) 100%); /* shape, shadow, motion */ --enj-r-sm:10px; --enj-r-md:14px; --enj-r-lg:20px; --enj-r-xl:26px; --enj-sh-1:0 1px 2px rgba(30,50,80,.05), 0 2px 8px rgba(30,50,80,.045); --enj-sh-2:0 2px 6px rgba(30,50,80,.06), 0 12px 28px -12px rgba(30,50,80,.18); --enj-sh-3:0 24px 60px -24px rgba(25,45,75,.28), 0 2px 8px rgba(30,50,80,.05); --enj-display:'Sora',ui-sans-serif,system-ui,-apple-system,sans-serif; --enj-body:'Inter',ui-sans-serif,system-ui,-apple-system,sans-serif; --enj-ease:cubic-bezier(.22,.61,.36,1); --enj-t-fast:.18s; --enj-t:.28s; --enj-t-slow:.42s; font-family: var(--enj-body); font-size: 16px; line-height: 1.55; color: var(--enj-text); /* Transparent so the widget blends into the host page; the full version paints its own page surface below. */ background: transparent; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .enj-app *, .enj-app *::before, .enj-app *::after{ box-sizing: border-box; } .enj-app ::selection{ background: var(--enj-accent); color:#fff; } .enj-app :focus-visible{ outline: 3px solid var(--enj-accent-ink); outline-offset: 2px; border-radius:8px; } /* Moving focus to the step heading on every step change is a screen-reader affordance (the heading is not interactive), so it must not paint a focus ring — the aria-live region already announces the change. */ .enj-app .enj-panel h2[tabindex]:focus, .enj-app .enj-panel h2[tabindex]:focus-visible, .enj-app .enj-panel[tabindex]:focus, .enj-app .enj-panel[tabindex]:focus-visible{ outline:none !important; } .enj-app [hidden]{ display:none !important; } /* ---------- THEME ARMOR (part 1: neutralise) ---------- Themes that style bare button/input/select/textarea (often with !important) would bleed in. `all:initial` resets only the wrapper, so controls are neutralised here and every component is re-asserted at higher specificity (.enj-app .class) with !important at the bottom of this file. */ .enj-app button, .enj-app input, .enj-app select, .enj-app textarea{ font-family: var(--enj-body) !important; letter-spacing: normal !important; text-transform: none !important; text-shadow: none !important; min-width: 0; } .enj-app button{ background-image: none; text-align: inherit; -webkit-appearance: none; appearance: none; cursor: pointer; min-height: 0; border: 0; } /* ===================================================================== BLUEPRINT BACKDROP (full version only) ===================================================================== */ .enj-app.enj-v-full{ background: var(--enj-page); padding: clamp(20px,4vw,56px) 0 clamp(40px,6vw,72px); } .enj-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; background-image: linear-gradient(to right, var(--enj-grid) 1px, transparent 1px), linear-gradient(to bottom, var(--enj-grid) 1px, transparent 1px), linear-gradient(to right, var(--enj-grid-2) 1px, transparent 1px), linear-gradient(to bottom, var(--enj-grid-2) 1px, transparent 1px); background-size:28px 28px, 28px 28px, 140px 140px, 140px 140px; -webkit-mask-image:radial-gradient(120% 78% at 50% 0%, #000 0%, rgba(0,0,0,.35) 55%, transparent 88%); mask-image:radial-gradient(120% 78% at 50% 0%, #000 0%, rgba(0,0,0,.35) 55%, transparent 88%); } .enj-bg::before, .enj-bg::after{ content:""; position:absolute; border-radius:50%; filter:blur(72px); } .enj-bg::before{ width:min(620px,90vw); height:min(620px,90vw); top:-260px; left:50%; transform:translateX(-58%); background:var(--enj-accent-a22); } .enj-bg::after{ width:min(420px,70vw); height:min(420px,70vw); top:120px; right:-140px; background:var(--enj-accent2-a10); } .enj-wrap{ position:relative; z-index:1; width:100%; max-width:1180px; margin:0 auto; padding:0 clamp(14px,3vw,32px); } .enj-sr{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } /* ===================================================================== TOP BAR (full version) ===================================================================== */ .enj-topbar{ position:relative; z-index:1; background:linear-gradient(120deg,#26374f,#1c2a3f); color:#fff; border-radius:var(--enj-r-lg); margin-bottom:clamp(18px,3vw,30px); } .enj-topbar-in{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px clamp(14px,3vw,24px); min-height:62px; flex-wrap:wrap; } .enj-brand{ display:flex; align-items:center; gap:12px; } .enj-logo{ width:40px; height:40px; border-radius:11px; flex:none; display:grid; place-items:center; color:#fff; background:var(--enj-grad); box-shadow:0 6px 16px -6px var(--enj-accent-a40), inset 0 1px 0 rgba(255,255,255,.35); } .enj-logo svg{ width:21px; height:21px; } .enj-brand-txt b{ font-family:var(--enj-display); font-weight:700; font-size:18px; letter-spacing:.2px; display:block; line-height:1.1; } .enj-brand-txt span{ display:block; font-size:12px; color:rgba(255,255,255,.66); letter-spacing:.4px; } .enj-meta{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; } .enj-badge24{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; color:#d8f0e5; background:rgba(31,122,77,.22); border:1px solid rgba(31,122,77,.5); padding:6px 11px; border-radius:999px; } .enj-badge24 i{ width:7px; height:7px; border-radius:50%; background:#3fd694; font-style:normal; animation:enj-live 2.4s var(--enj-ease) infinite; } @keyframes enj-live{ 0%{box-shadow:0 0 0 0 rgba(63,214,148,.55);} 70%{box-shadow:0 0 0 7px rgba(63,214,148,0);} 100%{box-shadow:0 0 0 0 rgba(63,214,148,0);} } .enj-app a.enj-tel, .enj-app a.enj-mail{ display:inline-flex; align-items:center; gap:8px; color:#fff !important; text-decoration:none; font-size:13.5px; font-weight:600; opacity:.94; transition:opacity var(--enj-t-fast) var(--enj-ease); } .enj-app a.enj-tel svg, .enj-app a.enj-mail svg{ width:16px; height:16px; color:#8fc0e6; } .enj-app a.enj-tel:hover, .enj-app a.enj-mail:hover{ opacity:1; } /* ===================================================================== HERO ===================================================================== */ .enj-hero{ position:relative; z-index:1; margin-bottom:clamp(18px,3vw,30px); } .enj-hero-compact{ margin-bottom:clamp(14px,2vw,22px); } .enj-hero-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; } .enj-eyebrow{ display:inline-flex; align-items:center; gap:8px; padding:6px 13px 6px 9px; border-radius:999px; background:var(--enj-surface); border:1px solid var(--enj-accent-line); color:var(--enj-accent-ink); font-size:12.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; box-shadow:var(--enj-sh-1); } .enj-eyebrow svg{ width:15px; height:15px; } .enj-h1{ font-family:var(--enj-display); font-weight:700; color:var(--enj-ink); font-size:clamp(26px,4.2vw,44px); line-height:1.1; letter-spacing:-.025em; margin:16px 0 0; max-width:22ch; } .enj-hero-p{ margin:12px 0 0; max-width:58ch; color:var(--enj-ink-soft); font-size:clamp(14.5px,1.5vw,17px); } .enj-trust{ display:flex; flex-wrap:wrap; gap:8px 10px; margin:20px 0 0; padding:0; list-style:none; } .enj-trust li{ display:inline-flex; align-items:center; gap:7px; padding:7px 13px; border-radius:999px; background:rgba(255,255,255,.72); border:1px solid var(--enj-line); font-size:13px; font-weight:500; color:var(--enj-ink); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); } .enj-trust svg{ width:15px; height:15px; color:var(--enj-accent-ink); flex:none; } /* language switch */ .enj-lang{ display:inline-flex; padding:3px; gap:2px; border-radius:999px; background:var(--enj-surface); border:1px solid var(--enj-line); box-shadow:var(--enj-sh-1); flex:none; } .enj-app .enj-lang-btn{ position:relative; overflow:hidden; background:transparent; padding:6px 14px; min-height:32px; border-radius:999px; font-size:13px; font-weight:600; color:var(--enj-ink-soft); transition:color var(--enj-t-fast) var(--enj-ease), background var(--enj-t-fast) var(--enj-ease); } .enj-app .enj-lang-btn[aria-pressed="true"]{ background:var(--enj-accent-soft-2); color:var(--enj-accent-ink); } /* ===================================================================== LAYOUT ===================================================================== */ .enj-layout{ position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1fr) 366px; gap:26px; align-items:start; } .enj-layout.enj-nosidebar{ grid-template-columns:minmax(0,880px); justify-content:center; } .enj-card{ background:var(--enj-surface); border:1px solid var(--enj-line); border-radius:var(--enj-r-xl); box-shadow:var(--enj-sh-3); } .enj-main{ overflow:hidden; min-width:0; } /* ===================================================================== STEPPER ===================================================================== */ .enj-stepper{ display:flex; align-items:center; gap:8px; padding:20px clamp(16px,3vw,30px); border-bottom:1px solid var(--enj-line); background:linear-gradient(180deg,var(--enj-accent-soft),var(--enj-surface)); } .enj-step{ display:flex; align-items:center; gap:10px; flex:none; cursor:default; } .enj-num{ width:36px; height:36px; border-radius:50%; flex:none; display:grid; place-items:center; font-family:var(--enj-display); font-weight:700; font-size:14px; background:var(--enj-surface); color:var(--enj-ink-soft); border:2px solid var(--enj-line-strong); transition:transform var(--enj-t) var(--enj-ease), border-color var(--enj-t) var(--enj-ease), color var(--enj-t) var(--enj-ease), background var(--enj-t) var(--enj-ease), box-shadow var(--enj-t) var(--enj-ease); } .enj-num svg{ width:17px; height:17px; display:none; } .enj-lbl{ font-size:12.5px; font-weight:600; color:var(--enj-ink-soft); letter-spacing:.01em; white-space:nowrap; transition:color var(--enj-t) var(--enj-ease); } .enj-sep{ flex:1 1 auto; height:3px; min-width:14px; background:var(--enj-line-strong); border-radius:99px; position:relative; overflow:hidden; } .enj-sep::after{ content:""; position:absolute; inset:0; width:0; border-radius:99px; background:var(--enj-grad); transition:width var(--enj-t-slow) var(--enj-ease); } .enj-step.done + .enj-sep::after{ width:100%; box-shadow:0 0 12px var(--enj-accent-a40); } .enj-step.active .enj-num{ background:var(--enj-grad); color:#fff; border-color:transparent; transform:scale(1.1); box-shadow:0 6px 16px -4px var(--enj-accent-a40); } .enj-step.active .enj-lbl{ color:var(--enj-ink); } .enj-step.done{ cursor:pointer; } .enj-step.done .enj-num{ background:var(--enj-accent-soft-2); color:var(--enj-accent-ink); border-color:var(--enj-accent-line); } .enj-step.done .enj-num .enj-numtxt{ display:none; } .enj-step.done .enj-num svg{ display:block; animation:enj-check-pop .42s var(--enj-ease) both; } .enj-stepper .enj-lang{ margin-left:auto; } /* ===================================================================== PANELS ===================================================================== */ .enj-panel-body{ padding:clamp(20px,3vw,34px); } .enj-panel{ display:none; } .enj-panel.show{ display:block; animation:enj-step-in var(--enj-t-slow) var(--enj-ease) both; } @keyframes enj-step-in{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } } .enj-step-head{ margin-bottom:22px; } .enj-kicker{ margin:0; font-size:12.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--enj-accent-ink); } .enj-step-head h2{ font-family:var(--enj-display); font-weight:600; color:var(--enj-ink); font-size:clamp(19px,2.4vw,25px); letter-spacing:-.015em; margin:6px 0 0; } .enj-step-head p{ margin:7px 0 0; color:var(--enj-ink-soft); font-size:14.5px; max-width:60ch; } .enj-count{ float:right; margin-left:12px; font-size:12.5px; font-weight:700; color:var(--enj-accent-ink); background:var(--enj-accent-soft); border:1px solid var(--enj-accent-line); padding:4px 11px; border-radius:999px; } /* urgent / emergency notice (off by default) */ .enj-emerg{ display:flex; gap:13px; align-items:flex-start; padding:14px 16px; border-radius:var(--enj-r-md); background:rgba(192,57,43,.06); border:1px solid rgba(192,57,43,.24); margin-bottom:18px; } .enj-emerg-ic{ color:var(--enj-danger); flex:none; margin-top:1px; } .enj-emerg-ic svg{ width:22px; height:22px; } .enj-emerg b{ display:block; font-family:var(--enj-display); font-size:14.5px; color:var(--enj-ink); } .enj-emerg span{ font-size:13px; color:var(--enj-ink-soft); } /* ===================================================================== FIELDS ===================================================================== */ .enj-field{ margin-bottom:26px; } .enj-field:last-child{ margin-bottom:0; } .enj-field > label, .enj-flabel{ display:flex; align-items:baseline; flex-wrap:wrap; gap:8px; margin-bottom:11px; font-size:14.5px; font-weight:600; color:var(--enj-ink); } .enj-opt-tag{ font-size:12px; font-weight:500; color:var(--enj-ink-soft); } .enj-req{ color:var(--enj-danger); margin-left:2px; } .enj-row2{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; } /* ---- required markers ---------------------------------------------------- The visitor must be able to tell, before touching anything, which fields decide whether Continue works — but a fresh form should not read as a wall of red "Required" labels. So the marker is quiet by default: a single red asterisk, with the word kept for screen readers only, and a legend under the step heading that explains it. It grows into the full red pill on exactly the fields that are still missing after a Continue press that could not go through (`.enj-missing-field` / `.enj-invalid`, both set behind the same "has tried" gate as the rest of the red marks), and shrinks back the moment the gap is filled. */ .enj-req-tag{ display:inline-flex; align-items:baseline; gap:5px; vertical-align:middle; font-size:15px; font-weight:700; line-height:1; letter-spacing:.01em; text-transform:none; color:var(--enj-danger); } .enj-req-star{ flex:none; } /* Visually hidden, never removed — the asterisk carries no meaning for a screen reader, so the word has to stay in the accessibility tree. */ .enj-req-word{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; border:0; overflow:hidden; clip:rect(0,0,0,0); clip-path:inset(50%); white-space:nowrap; } /* the pill — only on a required field the visitor actually tried to skip */ .enj-field.enj-missing-field .enj-req-tag, .enj-consent.enj-invalid .enj-req-tag{ align-items:center; padding:2px 9px; border-radius:999px; font-size:11.5px; line-height:1.5; background:rgba(192,57,43,.09); border:1px solid rgba(192,57,43,.26); } .enj-field.enj-missing-field .enj-req-word, .enj-consent.enj-invalid .enj-req-word{ position:static; width:auto; height:auto; margin:0; overflow:visible; clip:auto; clip-path:none; white-space:normal; } /* `.enj-step-head p` also matches this paragraph and is more specific, so the legend has to be qualified the same way or it inherits the subtitle size. */ /* A block, not a flex row: the sample asterisk has to flow with the sentence, or a flex line break drops it onto a line of its own on a phone. */ .enj-step-head p.enj-req-legend, .enj-req-legend{ display:block; margin:13px 0 0; font-size:12.8px; font-weight:500; color:var(--enj-ink-soft); line-height:1.45; /* `.enj-step-head p` caps at 60ch, which the marker would eat into and push the sentence onto a second line at the denser tier sizes. */ max-width:none; } .enj-req-legend .enj-req-tag{ margin-right:5px; } /* a required field the visitor tried to skip */ .enj-field.enj-missing-field > label, .enj-field.enj-missing-field > .enj-flabel{ color:var(--enj-danger); } .enj-app .enj-missing{ outline:2px solid var(--enj-danger); outline-offset:6px; border-radius:var(--enj-r-md); animation:enj-shake .4s var(--enj-ease) both; } @keyframes enj-shake{ 0%,100%{transform:translateX(0);} 22%{transform:translateX(-5px);} 55%{transform:translateX(4px);} 80%{transform:translateX(-2px);} } /* ---- service cards (multi-select) ---- */ .enj-svc-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; } .enj-svc{ position:relative; overflow:hidden; cursor:pointer; text-align:left; display:flex; flex-direction:column; align-items:stretch; padding:18px; border-radius:var(--enj-r-lg); background:var(--enj-surface-2); border:1.5px solid var(--enj-line); transition:transform var(--enj-t) var(--enj-ease), border-color var(--enj-t) var(--enj-ease), box-shadow var(--enj-t) var(--enj-ease), background var(--enj-t) var(--enj-ease); } .enj-svc-ic{ width:46px; height:46px; border-radius:13px; display:grid; place-items:center; flex:none; margin-bottom:13px; background:var(--enj-accent-soft); color:var(--enj-accent-ink); border:1px solid var(--enj-accent-line); transition:background var(--enj-t) var(--enj-ease), color var(--enj-t) var(--enj-ease), border-color var(--enj-t) var(--enj-ease); } .enj-svc-ic svg{ width:23px; height:23px; } .enj-svc-ic .enj-ic-img{ width:24px; height:24px; object-fit:contain; } .enj-svc b{ display:block; font-family:var(--enj-display); font-weight:600; font-size:15.5px; color:var(--enj-ink); line-height:1.3; padding-right:30px; overflow-wrap:break-word; } .enj-svc small{ display:block; margin-top:7px; font-size:13px; color:var(--enj-ink-soft); line-height:1.5; overflow-wrap:break-word; } .enj-svc-tick{ position:absolute; top:14px; right:14px; } .enj-svc[aria-pressed="true"]{ border-color:var(--enj-accent); background:var(--enj-accent-soft); box-shadow:0 0 0 4px var(--enj-accent-a12), var(--enj-sh-2); } .enj-svc[aria-pressed="true"] .enj-svc-ic{ background:var(--enj-grad); color:#fff; border-color:transparent; animation:enj-pop .45s var(--enj-ease) both; } .enj-svc:active{ transform:scale(.985); } /* ---- tick badge (shared) ---- */ .enj-tick{ width:24px; height:24px; border-radius:50%; display:grid; place-items:center; flex:none; border:2px solid var(--enj-line-strong); background:var(--enj-surface); color:transparent; transition:border-color var(--enj-t-fast) var(--enj-ease), background var(--enj-t-fast) var(--enj-ease); } .enj-tick svg{ width:14px; height:14px; transform:scale(0); transform-origin:center; } [aria-pressed="true"] > .enj-tick, .enj-consent input:checked + .enj-check{ border-color:transparent; background:var(--enj-grad); color:#fff; animation:enj-circle-pop .34s var(--enj-ease) both; } [aria-pressed="true"] > .enj-tick svg, .enj-consent input:checked + .enj-check svg{ animation:enj-check-pop .42s var(--enj-ease) .05s both; } @keyframes enj-pop{ 0%{transform:scale(1) rotate(0);} 35%{transform:scale(1.2) rotate(-6deg);} 65%{transform:scale(.9) rotate(1deg);} 100%{transform:scale(1) rotate(0);} } @keyframes enj-circle-pop{ 0%{transform:scale(.4);} 60%{transform:scale(1.14);} 100%{transform:scale(1);} } @keyframes enj-check-pop{ 0%{transform:scale(0) rotate(-14deg);} 60%{transform:scale(1.3) rotate(5deg);} 100%{transform:scale(1) rotate(0);} } @keyframes enj-dot-pop{ 0%{transform:scale(0);} 62%{transform:scale(1.4);} 100%{transform:scale(1);} } /* ---- chips (facility type) ---- */ .enj-chips{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; } .enj-chip{ position:relative; overflow:hidden; cursor:pointer; text-align:left; display:flex; align-items:center; gap:9px; padding:11px 13px; border-radius:var(--enj-r-md); min-height:48px; background:var(--enj-surface-2); border:1.5px solid var(--enj-line); font-size:13.5px; font-weight:500; color:var(--enj-text); line-height:1.3; transition:transform var(--enj-t) var(--enj-ease), border-color var(--enj-t) var(--enj-ease), box-shadow var(--enj-t) var(--enj-ease), background var(--enj-t) var(--enj-ease), color var(--enj-t) var(--enj-ease); } .enj-dot{ width:16px; height:16px; border-radius:50%; flex:none; border:2px solid var(--enj-line-strong); display:grid; place-items:center; transition:border-color var(--enj-t-fast) var(--enj-ease); } .enj-dot::after{ content:""; width:8px; height:8px; border-radius:50%; background:var(--enj-grad); transform:scale(0); } .enj-chip[aria-pressed="true"]{ border-color:var(--enj-accent); background:var(--enj-accent-soft); color:var(--enj-ink); font-weight:600; box-shadow:0 0 0 3px var(--enj-accent-a12); } .enj-chip[aria-pressed="true"] .enj-dot{ border-color:var(--enj-accent); } .enj-chip[aria-pressed="true"] .enj-dot::after{ animation:enj-dot-pop .34s var(--enj-ease) both; } .enj-chip:active{ transform:scale(.975); } /* ---- option rows (frequency / start / budget) ---- */ .enj-opts{ display:grid; gap:9px; } .enj-opts-2{ grid-template-columns:repeat(2,minmax(0,1fr)); } .enj-opt{ position:relative; overflow:hidden; cursor:pointer; text-align:left; display:flex; align-items:flex-start; gap:12px; padding:14px 15px; border-radius:var(--enj-r-md); min-height:52px; background:var(--enj-surface-2); border:1.5px solid var(--enj-line); transition:transform var(--enj-t) var(--enj-ease), border-color var(--enj-t) var(--enj-ease), box-shadow var(--enj-t) var(--enj-ease), background var(--enj-t) var(--enj-ease); } .enj-opt .enj-dot{ width:20px; height:20px; margin-top:1px; } .enj-opt .enj-dot::after{ width:10px; height:10px; } .enj-opt[aria-pressed="true"]{ border-color:var(--enj-accent); background:var(--enj-accent-soft); box-shadow:0 0 0 3px var(--enj-accent-a12); } .enj-opt[aria-pressed="true"] .enj-dot{ border-color:var(--enj-accent); } .enj-opt[aria-pressed="true"] .enj-dot::after{ animation:enj-dot-pop .34s var(--enj-ease) both; } .enj-opt:active{ transform:scale(.99); } .enj-opt-main{ display:block; font-size:14.5px; font-weight:600; color:var(--enj-ink); line-height:1.35; } .enj-opt-note{ display:block; margin-top:3px; font-size:12.8px; font-weight:400; color:var(--enj-ink-soft); line-height:1.45; } /* ---- add-on rows (multi-select) ---- */ .enj-extras{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; } .enj-extra{ position:relative; overflow:hidden; cursor:pointer; text-align:left; display:flex; align-items:flex-start; gap:12px; padding:14px 15px; border-radius:var(--enj-r-md); min-height:52px; background:var(--enj-surface-2); border:1.5px solid var(--enj-line); transition:transform var(--enj-t) var(--enj-ease), border-color var(--enj-t) var(--enj-ease), box-shadow var(--enj-t) var(--enj-ease), background var(--enj-t) var(--enj-ease); } .enj-extra .enj-tick{ margin-top:1px; } .enj-extra-ic{ width:34px; height:34px; border-radius:10px; display:grid; place-items:center; flex:none; background:var(--enj-accent-soft); color:var(--enj-accent-ink); } .enj-extra-ic svg{ width:18px; height:18px; } .enj-extra[aria-pressed="true"]{ border-color:var(--enj-accent); background:var(--enj-accent-soft); box-shadow:0 0 0 3px var(--enj-accent-a12); } .enj-extra[aria-pressed="true"] .enj-extra-ic{ background:var(--enj-grad); color:#fff; } .enj-extra:active{ transform:scale(.99); } /* ---- product cards (catalogue with quantity) ---- auto-fill so the grid adapts on its own as the catalogue grows. */ .enj-prod-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(212px,1fr)); gap:13px; } .enj-prod{ position:relative; overflow:hidden; cursor:pointer; text-align:left; display:flex; flex-direction:column; border-radius:var(--enj-r-lg); background:var(--enj-surface-2); border:1.5px solid var(--enj-line); animation:enj-card-in var(--enj-t-slow) var(--enj-ease) both; transition:transform var(--enj-t) var(--enj-ease), border-color var(--enj-t) var(--enj-ease), box-shadow var(--enj-t) var(--enj-ease), background var(--enj-t) var(--enj-ease); } @keyframes enj-card-in{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } } .enj-prod-media{ display:grid; place-items:center; padding:12px; min-height:132px; aspect-ratio:4/3; background:#fff; border-bottom:1px solid var(--enj-line); } .enj-prod-media img{ max-width:100%; max-height:160px; width:auto; height:auto; object-fit:contain; mix-blend-mode:multiply; } .enj-prod-badge{ position:absolute; top:10px; left:10px; z-index:2; padding:4px 10px; border-radius:999px; font-size:11.5px; font-weight:700; letter-spacing:.02em; background:var(--enj-grad); color:#fff; box-shadow:0 6px 14px -8px var(--enj-accent-a40); } .enj-prod-body{ display:block; padding:13px 14px 10px; } .enj-prod b{ display:block; font-family:var(--enj-display); font-weight:600; font-size:14px; line-height:1.35; color:var(--enj-ink); overflow-wrap:break-word; } .enj-prod small{ display:block; margin-top:6px; font-size:12.4px; line-height:1.5; color:var(--enj-ink-soft); overflow-wrap:break-word; } .enj-prod-price{ display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; margin-top:10px; } .enj-prod-amt{ font-family:var(--enj-display); font-weight:700; font-size:17px; color:var(--enj-ink); letter-spacing:-.01em; font-variant-numeric:tabular-nums; } .enj-prod-unit{ font-size:12.2px; color:var(--enj-ink-soft); } .enj-prod-foot{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:auto; padding:0 14px 14px; } .enj-app .enj-prod-add{ position:relative; overflow:hidden; cursor:pointer; display:inline-flex; align-items:center; gap:8px; padding:9px 15px; min-height:44px; border-radius:999px; background:var(--enj-surface); border:1.5px solid var(--enj-line-strong); font-size:13.5px; font-weight:600; color:var(--enj-ink); transition:background var(--enj-t-fast) var(--enj-ease), border-color var(--enj-t-fast) var(--enj-ease), color var(--enj-t-fast) var(--enj-ease); } .enj-prod-add .enj-tick{ width:20px; height:20px; } .enj-prod-add .enj-tick svg{ width:12px; height:12px; } .enj-prod[data-selected="true"]{ border-color:var(--enj-accent); background:var(--enj-accent-soft); box-shadow:0 0 0 4px var(--enj-accent-a12), var(--enj-sh-2); } .enj-prod[data-selected="true"] .enj-prod-media{ background:#fff; border-bottom-color:var(--enj-accent-line); } .enj-prod:active{ transform:scale(.99); } /* quantity stepper */ .enj-qty{ display:inline-flex; align-items:center; margin-left:auto; padding:2px; border-radius:999px; background:var(--enj-surface); border:1.5px solid var(--enj-accent-line); } .enj-app .enj-qty-btn{ width:44px; height:44px; border-radius:50%; display:grid; place-items:center; flex:none; background:transparent; color:var(--enj-accent-ink); font-size:18px; font-weight:700; line-height:1; transition:background var(--enj-t-fast) var(--enj-ease); } .enj-app input.enj-qty-val{ width:42px; padding:0; border:0; background:transparent; text-align:center; font-family:var(--enj-body); font-size:14.5px; font-weight:700; color:var(--enj-ink); font-variant-numeric:tabular-nums; -moz-appearance:textfield; } .enj-app input.enj-qty-val:focus{ outline:none; } .enj-prod-skip{ margin:16px 0 0; font-size:12.8px; color:var(--enj-ink-soft); } /* ---- area slider ---- */ .enj-slider-wrap{ padding:18px 18px 10px; border-radius:var(--enj-r-lg); background:var(--enj-surface-2); border:1.5px solid var(--enj-line); } .enj-slider-top{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:14px; flex-wrap:wrap; } .enj-slider-val{ font-family:var(--enj-display); font-size:clamp(22px,3vw,29px); font-weight:700; color:var(--enj-ink); letter-spacing:-.02em; font-variant-numeric:tabular-nums; } .enj-slider-val small{ font-family:var(--enj-body); font-size:15px; font-weight:600; color:var(--enj-ink-soft); margin-left:5px; } .enj-slider-alt{ font-size:13.5px; color:var(--enj-ink-soft); font-variant-numeric:tabular-nums; } .enj-slider-ends{ display:flex; justify-content:space-between; font-size:12px; color:var(--enj-ink-soft); margin-top:2px; font-variant-numeric:tabular-nums; } .enj-app input[type=range].enj-range{ -webkit-appearance:none; appearance:none; width:100%; height:30px; background:transparent; cursor:pointer; padding:0; border:0; --enj-pct:0%; } .enj-app input[type=range].enj-range::-webkit-slider-runnable-track{ height:8px; border-radius:99px; background: linear-gradient(90deg, var(--enj-accent-mid), var(--enj-accent2-mid)), linear-gradient(90deg, var(--enj-line-strong), var(--enj-line-strong)); background-size:var(--enj-pct) 100%, 100% 100%; background-position:0 0, 0 0; background-repeat:no-repeat, no-repeat; } .enj-app input[type=range].enj-range::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:26px; height:26px; margin-top:-9px; border-radius:50%; background:var(--enj-grad); border:3px solid #fff; box-shadow:0 2px 8px rgba(20,45,75,.28), 0 0 0 5px var(--enj-accent-a12); transition:transform var(--enj-t-fast) var(--enj-ease), box-shadow var(--enj-t-fast) var(--enj-ease); } .enj-app input[type=range].enj-range::-moz-range-track{ height:8px; border-radius:99px; background:var(--enj-line-strong); } .enj-app input[type=range].enj-range::-moz-range-progress{ height:8px; border-radius:99px; background:linear-gradient(90deg,var(--enj-accent-mid),var(--enj-accent2-mid)); } .enj-app input[type=range].enj-range::-moz-range-thumb{ width:20px; height:20px; border-radius:50%; background:var(--enj-accent-deep); border:3px solid #fff; box-shadow:0 2px 8px rgba(20,45,75,.28), 0 0 0 5px var(--enj-accent-a12); } .enj-app input[type=range].enj-range:focus-visible{ outline:none; } .enj-app input[type=range].enj-range:focus-visible::-webkit-slider-thumb{ box-shadow:0 2px 8px rgba(20,45,75,.28), 0 0 0 6px var(--enj-accent-a40); } .enj-app input[type=range].enj-range:focus-visible::-moz-range-thumb{ box-shadow:0 2px 8px rgba(20,45,75,.28), 0 0 0 6px var(--enj-accent-a40); } /* ---- text inputs ---- */ .enj-app input.enj-input, .enj-app select.enj-input, .enj-app textarea.enj-input{ width:100%; font-family:var(--enj-body); font-size:16px; color:var(--enj-ink); background:var(--enj-surface-2); border:1.5px solid var(--enj-line); border-radius:var(--enj-r-md); padding:13px 15px; min-height:50px; appearance:none; -webkit-appearance:none; line-height:1.4; transition:border-color var(--enj-t-fast) var(--enj-ease), box-shadow var(--enj-t-fast) var(--enj-ease), background var(--enj-t-fast) var(--enj-ease); } .enj-app textarea.enj-input{ min-height:104px; resize:vertical; line-height:1.55; } .enj-app .enj-input::placeholder{ color:#8a97ac; } .enj-app .enj-input:focus{ outline:none; border-color:var(--enj-accent); background:var(--enj-surface); box-shadow:0 0 0 4px var(--enj-accent-a12); } .enj-app select.enj-input{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235F6E88' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:40px; } .enj-app .enj-input.enj-invalid{ border-color:var(--enj-danger) !important; box-shadow:0 0 0 4px rgba(192,57,43,.10) !important; } /* ---- upload ---- */ .enj-upload{ display:block; border:1.5px dashed var(--enj-ok-ring); border-radius:var(--enj-r-md); padding:20px; text-align:center; cursor:pointer; color:var(--enj-ink-soft); background:var(--enj-ok-tint); transition:border-color var(--enj-t-fast) var(--enj-ease), color var(--enj-t-fast) var(--enj-ease); } .enj-upload svg{ width:24px; height:24px; margin:0 auto 6px; color:var(--enj-ok); } .enj-upload b{ display:block; color:var(--enj-ink); font-weight:600; font-size:14px; } .enj-upload small{ font-size:12.5px; } .enj-upload.enj-dragover{ border-color:var(--enj-ok); color:var(--enj-ok); } /* ---- consent ---- */ .enj-consent{ position:relative; overflow:hidden; cursor:pointer; margin-top:18px; display:flex; align-items:flex-start; gap:12px; padding:15px; border-radius:var(--enj-r-md); background:var(--enj-accent-soft); border:1.5px solid var(--enj-accent-line); } .enj-consent input{ position:absolute; opacity:0; width:1px; height:1px; pointer-events:none; } .enj-check{ width:24px; height:24px; border-radius:50%; display:grid; place-items:center; flex:none; margin-top:1px; border:2px solid var(--enj-line-strong); background:var(--enj-surface); color:transparent; transition:border-color var(--enj-t-fast) var(--enj-ease), background var(--enj-t-fast) var(--enj-ease); } .enj-check svg{ width:14px; height:14px; transform:scale(0); } .enj-consent-txt{ font-size:13.4px; color:var(--enj-text); line-height:1.5; } .enj-app .enj-consent-txt a{ color:var(--enj-accent-ink) !important; font-weight:600; text-underline-offset:2px; } .enj-consent input:focus-visible + .enj-check{ outline:3px solid var(--enj-accent-ink); outline-offset:2px; } .enj-consent.enj-invalid{ border-color:var(--enj-danger); box-shadow:0 0 0 3px rgba(192,57,43,.10); } /* ---- errors ---- */ .enj-err{ display:none; align-items:center; gap:7px; margin-top:10px; font-size:13px; font-weight:500; color:var(--enj-danger); } .enj-err.show{ display:flex; animation:enj-err-in var(--enj-t-fast) var(--enj-ease) both; } .enj-err::before{ content:""; width:15px; height:15px; flex:none; background-color:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E") center/contain no-repeat; } @keyframes enj-err-in{ from{opacity:0; transform:translateY(-3px);} to{opacity:1; transform:none;} } /* ===================================================================== BUTTONS ===================================================================== */ .enj-nav{ display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-top:28px; padding-top:22px; border-top:1px solid var(--enj-line); } .enj-nav .enj-spacer{ flex:1; } /* ---- "why can't I continue" line, next to the Continue button ---- The single most confusing moment in a stepped form is a Continue button that does nothing. The button is never hard-disabled (pressing it points at the gap); this line names the gap before it is pressed. */ .enj-nav-hint{ display:none; align-items:center; gap:8px; flex:0 0 100%; margin:0; font-size:13px; font-weight:600; color:var(--enj-danger); line-height:1.45; } .enj-nav-hint.show{ display:flex; } .enj-nav .enj-nav-hint.show{ margin-bottom:2px; } .enj-nav-hint::before{ content:""; width:16px; height:16px; flex:none; background-color:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E") center/contain no-repeat; } .enj-btn{ position:relative; overflow:hidden; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:13px 22px; min-height:50px; border-radius:999px; font-family:var(--enj-body); font-weight:600; font-size:15px; letter-spacing:.005em; white-space:nowrap; /* the gradient background-image is deliberately NOT transitioned — interpolating two gradients is unreliable and can drop the fill. */ transition:transform var(--enj-t-fast) var(--enj-ease), background-color var(--enj-t) var(--enj-ease), box-shadow var(--enj-t) var(--enj-ease), border-color var(--enj-t) var(--enj-ease), color var(--enj-t) var(--enj-ease); } .enj-btn svg{ width:18px; height:18px; } .enj-btn:active{ transform:scale(.975); } .enj-btn-ghost{ background:var(--enj-surface); border:1.5px solid var(--enj-line-strong); color:var(--enj-ink); } /* PRIMARY CTA — brand gradient, white bold label, darker on hover/press. background-color is a solid brand fallback UNDER the gradient so the label is never white-on-white if the gradient fails to paint. */ .enj-app .enj-btn-primary, .enj-app .enj-btn-primary:hover, .enj-app .enj-btn-primary:focus, .enj-app .enj-btn-primary:active{ color:#fff; } .enj-btn-primary{ background-color:var(--enj-accent-deep); background-image:var(--enj-grad); font-weight:700; font-size:16px; padding:15px 30px; min-height:56px; text-shadow:0 1px 1px rgba(10,35,60,.28); animation:enj-breathe 2.6s var(--enj-ease) infinite; } .enj-btn-primary svg{ color:#fff; } .enj-btn-primary:active{ background-color:var(--enj-accent-ink); background-image:var(--enj-grad-hover); } .enj-btn-primary:focus-visible{ animation:none; } .enj-btn-primary:disabled{ opacity:.55; cursor:not-allowed; animation:none; transform:none; } /* NOT-READY, not disabled: the step still has a gap, so the button is muted and the breathing ring stops — but it stays clickable, and pressing it scrolls to the missing field and says what it is. A dead button explains nothing. */ .enj-btn-primary.enj-notready{ opacity:.62; animation:none; cursor:pointer; } .enj-btn-primary.enj-notready:hover{ opacity:.78; } @keyframes enj-breathe{ 0%,100%{ box-shadow:0 10px 26px -10px rgba(20,50,80,.55), 0 0 0 0 var(--enj-accent-a40); } 55%{ box-shadow:0 10px 26px -10px rgba(20,50,80,.55), 0 0 0 9px transparent; } } .enj-btn.enj-loading{ color:transparent !important; } .enj-btn.enj-loading > *{ visibility:hidden; } .enj-btn.enj-loading::before{ content:""; position:absolute; width:20px; height:20px; border:2.5px solid rgba(255,255,255,.45); border-top-color:#fff; border-radius:50%; animation:enj-spin .7s linear infinite; } @keyframes enj-spin{ to{ transform:rotate(360deg); } } /* ripple */ .enj-ripple{ position:absolute; border-radius:50%; pointer-events:none; background:var(--enj-accent-a22); transform:scale(0); opacity:.85; animation:enj-ripple .58s var(--enj-ease) forwards; } .enj-btn-primary .enj-ripple, .enj-app a.enj-wa .enj-ripple{ background:rgba(255,255,255,.42); } @keyframes enj-ripple{ to{ transform:scale(2.4); opacity:0; } } /* ===================================================================== SUMMARY (spec sheet) ===================================================================== */ .enj-aside{ position:sticky; top:22px; } .enj-offer{ background:var(--enj-surface); border:1px solid var(--enj-line); border-radius:var(--enj-r-xl); box-shadow:var(--enj-sh-3); overflow:hidden; } .enj-offer-head{ padding:18px 20px 16px; border-bottom:1px solid var(--enj-line); background:linear-gradient(180deg,var(--enj-accent-soft),var(--enj-surface)); } .enj-offer-ttl{ font-family:var(--enj-display); font-weight:600; font-size:15.5px; color:var(--enj-ink); } .enj-offer-sub{ display:flex; align-items:center; gap:9px; margin-top:7px; font-size:13.5px; font-weight:600; color:var(--enj-accent-ink); } .enj-odot{ width:9px; height:9px; border-radius:50%; background:var(--enj-line-strong); flex:none; transition:background var(--enj-t) var(--enj-ease); } .enj-offer-note-top{ margin:6px 0 0; font-size:12.8px; color:var(--enj-ink-soft); } .enj-prog{ padding:14px 20px 0; } .enj-prog-bar{ height:6px; border-radius:99px; background:var(--enj-accent-soft-2); overflow:hidden; } .enj-prog-fill{ display:block; height:100%; width:0; border-radius:99px; background:var(--enj-grad); transition:width var(--enj-t-slow) var(--enj-ease); } .enj-prog-txt{ margin-top:7px; font-size:12px; font-weight:600; color:var(--enj-accent-ink); font-variant-numeric:tabular-nums; } .enj-offer-lines{ padding:4px 20px 16px; } .enj-sum-group{ padding:14px 0 4px; border-bottom:1px dashed var(--enj-line); } .enj-sum-group:last-child{ border-bottom:0; } .enj-sum-gtitle{ margin:0 0 9px; font-size:11.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--enj-ink-soft); } .enj-sum-row{ display:flex; align-items:baseline; gap:8px; padding:5px 0; font-size:13.6px; line-height:1.45; animation:enj-row-in .38s var(--enj-ease) both; } @keyframes enj-row-in{ from{opacity:0; transform:translateX(-6px);} to{opacity:1; transform:none;} } .enj-sum-k{ color:var(--enj-ink-soft); flex:none; max-width:48%; } .enj-sum-lead{ flex:1; border-bottom:1px dotted var(--enj-line-strong); transform:translateY(-3px); min-width:12px; } .enj-sum-v{ font-weight:600; color:var(--enj-ink); text-align:right; font-variant-numeric:tabular-nums; } .enj-sum-tags{ display:flex; flex-wrap:wrap; gap:6px; } .enj-sum-tag{ display:inline-flex; align-items:center; gap:6px; padding:6px 11px; border-radius:999px; font-size:12.6px; font-weight:600; background:var(--enj-accent-soft); color:var(--enj-accent-ink); border:1px solid var(--enj-accent-line); animation:enj-tag-in .38s var(--enj-ease) both; } .enj-sum-tag svg{ width:13px; height:13px; flex:none; } @keyframes enj-tag-in{ from{opacity:0; transform:scale(.88);} to{opacity:1; transform:none;} } .enj-offer-empty{ padding:22px 0 10px; text-align:center; color:var(--enj-ink-soft); font-size:13.4px; } .enj-offer-empty svg{ width:34px; height:34px; margin:0 auto 10px; color:var(--enj-accent-line); } .enj-offer-total{ padding:16px 20px; background:var(--enj-accent-soft); border-top:1px solid var(--enj-line); } .enj-offer-lab{ font-size:12.5px; color:var(--enj-ink-soft); font-weight:600; } .enj-offer-amt{ font-family:var(--enj-display); font-weight:700; font-size:24px; letter-spacing:-.02em; margin-top:4px; color:var(--enj-ink); } .enj-offer-note{ display:flex; gap:7px; font-size:11.8px; color:var(--enj-ink-soft); margin-top:9px; line-height:1.45; } .enj-offer-note svg{ width:14px; height:14px; flex:none; margin-top:1px; opacity:.8; } .enj-offer-foot{ display:flex; gap:9px; align-items:flex-start; padding:14px 20px; border-top:1px solid var(--enj-line); background:var(--enj-surface-2); font-size:12.4px; color:var(--enj-ink-soft); } .enj-offer-foot svg{ width:15px; height:15px; color:var(--enj-accent-ink); flex:none; margin-top:1px; } /* drawer (tablet / mobile / no-sidebar widths) */ .enj-drawer{ display:none; position:relative; z-index:1; margin-bottom:16px; } .enj-drawer-btn{ width:100%; position:relative; overflow:hidden; cursor:pointer; display:flex; align-items:center; gap:11px; padding:14px 18px; background:var(--enj-surface); border:1px solid var(--enj-line); border-radius:var(--enj-r-lg); box-shadow:var(--enj-sh-2); font-weight:600; color:var(--enj-ink); font-size:14.5px; } .enj-drawer-btn > svg:first-child{ width:18px; height:18px; color:var(--enj-accent-ink); } .enj-count-pill{ margin-left:auto; padding:3px 10px; border-radius:999px; font-size:12.5px; background:var(--enj-accent-soft-2); color:var(--enj-accent-ink); font-variant-numeric:tabular-nums; } .enj-chev{ width:18px; height:18px; transition:transform var(--enj-t) var(--enj-ease); } .enj-drawer.open .enj-chev{ transform:rotate(180deg); } .enj-drawer-body{ max-height:0; overflow:hidden; transition:max-height var(--enj-t-slow) var(--enj-ease); } .enj-drawer.open .enj-drawer-body{ max-height:1200px; } .enj-drawer .enj-offer{ margin-top:10px; } /* mobile price bar (pricing only) */ .enj-mtotal{ display:none; } /* ===================================================================== SUCCESS ===================================================================== */ .enj-success{ text-align:center; padding:12px 0 4px; } .enj-seal{ width:78px; height:78px; margin:0 auto 20px; border-radius:50%; display:grid; place-items:center; color:#fff; background:var(--enj-grad); box-shadow:0 16px 34px -12px var(--enj-accent-a40); animation:enj-circle-pop .5s var(--enj-ease) both; } .enj-seal svg{ width:38px; height:38px; animation:enj-check-pop .5s var(--enj-ease) .16s both; } .enj-success h2{ font-family:var(--enj-display); font-weight:700; font-size:clamp(21px,3vw,28px); color:var(--enj-ink); letter-spacing:-.02em; margin:0; } .enj-success p{ margin:11px auto 0; color:var(--enj-ink-soft); max-width:52ch; font-size:15px; } .enj-ref{ display:inline-flex; align-items:center; gap:10px; margin-top:22px; padding:13px 22px; border-radius:var(--enj-r-md); background:var(--enj-accent-soft); border:1.5px dashed var(--enj-accent-line); font-size:14px; color:var(--enj-accent-ink); } .enj-ref b{ font-family:var(--enj-display); font-size:17px; letter-spacing:.06em; color:var(--enj-ink); } .enj-next{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px; margin:30px 0 0; padding:0; list-style:none; text-align:left; } .enj-next li{ padding:16px; border-radius:var(--enj-r-lg); background:var(--enj-surface-2); border:1px solid var(--enj-line); } .enj-next b{ display:block; font-family:var(--enj-display); font-size:14px; color:var(--enj-ink); margin-bottom:5px; } .enj-next span{ display:block; font-size:12.8px; color:var(--enj-ink-soft); line-height:1.5; } .enj-next .enj-next-num{ width:26px; height:26px; border-radius:50%; display:grid; place-items:center; margin-bottom:11px; background:var(--enj-accent-soft-2); color:var(--enj-accent-ink); font-size:12.5px; font-weight:700; } /* WhatsApp send-on-success — white text enforced against theme link colours */ .enj-wa-success{ margin-top:26px; padding-top:22px; border-top:1px solid var(--enj-line); } .enj-app a.enj-wa{ position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:10px; background:#1FA855 !important; color:#fff !important; border-radius:999px; padding:14px 24px; min-height:52px; font-weight:700; font-size:15px; text-decoration:none; box-shadow:0 10px 24px -10px rgba(31,168,85,.6); transition:background var(--enj-t-fast) var(--enj-ease), transform var(--enj-t-fast) var(--enj-ease); } .enj-app a.enj-wa svg{ width:20px; height:20px; color:#fff !important; } .enj-app a.enj-wa span{ color:#fff !important; } .enj-app a.enj-wa:active{ transform:scale(.975); } .enj-wa-note{ font-size:12.4px; color:var(--enj-ink-soft); margin:12px auto 0; max-width:46ch; line-height:1.5; } /* ===================================================================== FOOTER ===================================================================== */ .enj-foot{ position:relative; z-index:1; margin-top:26px; display:flex; flex-wrap:wrap; gap:10px 26px; justify-content:center; font-size:13.5px; color:var(--enj-ink-soft); } .enj-app .enj-foot a, .enj-foot span{ display:inline-flex; align-items:center; gap:8px; } .enj-app .enj-foot a{ color:var(--enj-ink) !important; font-weight:600; text-decoration:none; } .enj-foot svg{ width:15px; height:15px; color:var(--enj-accent-ink); } /* honeypot */ .enj-hp{ position:absolute !important; left:-9999px !important; top:auto; width:1px; height:1px; overflow:hidden; } /* toast */ .enj-toast{ position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(20px); background:#2E436A; color:#fff; padding:13px 20px; border-radius:12px; font-family:'Inter',system-ui,sans-serif; font-size:14px; box-shadow:0 12px 32px -12px rgba(14,27,42,.6); z-index:99999; opacity:0; transition:.28s cubic-bezier(.22,.61,.36,1); max-width:90vw; } .enj-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); } .enj-toast.err{ background:#c0392b; } /* mobile sticky nav */ .enj-mnav{ display:none; } /* ===================================================================== HOVER (pointer devices only) ===================================================================== */ @media (hover:hover) and (pointer:fine){ .enj-svc:hover, .enj-chip:hover, .enj-opt:hover, .enj-extra:hover, .enj-prod:hover{ transform:translateY(-2px); border-color:var(--enj-accent-line); box-shadow:var(--enj-sh-2); } .enj-svc[aria-pressed="true"]:hover, .enj-chip[aria-pressed="true"]:hover, .enj-opt[aria-pressed="true"]:hover, .enj-extra[aria-pressed="true"]:hover, .enj-prod[data-selected="true"]:hover{ border-color:var(--enj-accent); } .enj-app .enj-prod-add:hover{ border-color:var(--enj-accent-line); background:var(--enj-accent-soft); color:var(--enj-accent-ink); } .enj-app .enj-qty-btn:hover{ background:var(--enj-accent-soft); } .enj-btn-ghost:hover{ transform:translateY(-1px); border-color:var(--enj-accent-line); background:var(--enj-accent-soft); color:var(--enj-accent-ink); } .enj-btn-primary:hover{ background-color:var(--enj-accent-ink); background-image:var(--enj-grad-hover); animation:none; box-shadow:0 14px 30px -10px rgba(20,50,80,.5), 0 2px 6px rgba(20,50,80,.2); transform:translateY(-1px); } .enj-app .enj-lang-btn:hover{ color:var(--enj-ink); } .enj-drawer-btn:hover{ border-color:var(--enj-accent-line); } .enj-upload:hover{ border-color:var(--enj-ok); color:var(--enj-ok); } .enj-app a.enj-wa:hover{ background:#178a45 !important; transform:translateY(-1px); } .enj-app .enj-foot a:hover{ color:var(--enj-accent-ink) !important; } .enj-app input[type=range].enj-range:hover::-webkit-slider-thumb{ transform:scale(1.08); } } /* ===================================================================== RESPONSIVE ===================================================================== */ @media (max-width:1023px){ .enj-layout{ grid-template-columns:minmax(0,1fr); } .enj-aside{ display:none; } .enj-drawer{ display:block; } .enj-svc-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:767px){ .enj-svc-grid{ grid-template-columns:1fr; gap:11px; } .enj-prod-grid{ grid-template-columns:repeat(auto-fill,minmax(158px,1fr)); gap:10px; } .enj-prod-media{ min-height:112px; } .enj-prod-foot{ gap:8px; } .enj-chips{ grid-template-columns:1fr; } .enj-opts-2, .enj-extras{ grid-template-columns:1fr; } .enj-row2{ grid-template-columns:1fr; } .enj-next{ grid-template-columns:1fr; } .enj-card{ border-radius:var(--enj-r-lg); } .enj-panel-body{ padding:20px 16px; } .enj-stepper{ padding:16px 14px; gap:4px; } .enj-lbl{ display:none; } .enj-num{ width:34px; height:34px; font-size:13px; } .enj-meta .enj-mail, .enj-meta .enj-badge24{ display:none; } /* the desktop nav becomes a sticky blurred bottom bar once the visitor actually engages with the form (never floats over unrelated content). */ .enj-nav{ display:none; } .enj-mnav{ display:flex; flex-wrap:wrap; gap:12px; position:static; padding:14px 2px 4px; } /* full-width line above the two sticky buttons (size is pinned by the armor) */ .enj-mnav .enj-nav-hint{ flex:0 0 100%; } /* `.enj-app` isolates itself from the theme (`isolation:isolate`), which also caps every z-index inside it at the widget's own paint layer — a theme footer that is positioned, or carries any z-index of its own, then paints straight over the fixed bar and swallows the Continue button. While the bar is pinned we step back into the page's stacking context so its z-index is measured against the page. Only the bar escapes: every other layer inside the widget stays at z-index ≤ 2. The reserved space at the end of the widget keeps the bar off its own footer links. */ .enj-app.enj-started{ isolation:auto; padding-bottom:calc(74px + env(safe-area-inset-bottom,0px)); } .enj-app.enj-started .enj-mnav{ position:fixed; left:0; right:0; bottom:0; z-index:99990; margin:0; padding:11px 14px calc(11px + env(safe-area-inset-bottom,0px)); border-top:1px solid var(--enj-line-strong); background:rgba(255,255,255,.96); -webkit-backdrop-filter:blur(16px) saturate(1.5); backdrop-filter:blur(16px) saturate(1.5); box-shadow:0 -8px 26px -14px rgba(25,45,75,.4); } .enj-mnav .enj-btn-primary{ flex:1.6; padding:14px 18px; min-height:54px; } .enj-mnav .enj-btn-ghost{ flex:none; } .enj-app.enj-started .enj-panel-body{ padding-bottom:calc(96px + env(safe-area-inset-bottom,0px)); } } @media (max-width:479px){ /* two product cards no longer fit side by side with a readable price row */ .enj-prod-grid{ grid-template-columns:1fr; } .enj-prod-media{ aspect-ratio:16/9; } } @media (max-width:400px){ .enj-btn{ font-size:14px; padding:13px 14px; } .enj-btn-primary{ font-size:15px; } } /* Explicit width modifiers (shortcode width="half|narrow"). */ .enj-app.enj-w-half, .enj-app.enj-w-narrow{ max-width:660px; } .enj-app.enj-w-half .enj-layout, .enj-app.enj-w-narrow .enj-layout{ grid-template-columns:minmax(0,1fr); } .enj-app.enj-w-half .enj-aside, .enj-app.enj-w-narrow .enj-aside{ display:none; } .enj-app.enj-w-half .enj-drawer, .enj-app.enj-w-narrow .enj-drawer{ display:block; } .enj-app.enj-w-half .enj-chips, .enj-app.enj-w-narrow .enj-chips{ grid-template-columns:repeat(2,minmax(0,1fr)); } .enj-app.enj-w-half .enj-opts-2, .enj-app.enj-w-narrow .enj-opts-2, .enj-app.enj-w-half .enj-extras, .enj-app.enj-w-narrow .enj-extras{ grid-template-columns:1fr; } /* reduced motion */ @media (prefers-reduced-motion: reduce){ .enj-app *, .enj-app *::before, .enj-app *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } .enj-app .enj-tick svg, .enj-app .enj-check svg, .enj-app .enj-seal svg, .enj-app .enj-dot::after{ transform:scale(1); } .enj-svc:hover, .enj-chip:hover, .enj-opt:hover, .enj-extra:hover, .enj-prod:hover, .enj-btn-primary:hover{ transform:none; } } /* ===================================================================== THEME ARMOR (part 2) — component appearance, size and box model re-asserted at high specificity so a hostile theme's `button{background:red!important;text-transform:uppercase!important}` cannot break the widget. ===================================================================== */ .enj-app .enj-svc{ background-color:var(--enj-surface-2) !important; background-image:none !important; color:var(--enj-ink) !important; text-transform:none !important; } .enj-app .enj-svc[aria-pressed="true"]{ background-color:var(--enj-accent-soft) !important; border-color:var(--enj-accent) !important; } .enj-app .enj-chip{ background-color:var(--enj-surface-2) !important; background-image:none !important; color:var(--enj-text) !important; text-transform:none !important; } .enj-app .enj-chip[aria-pressed="true"]{ background-color:var(--enj-accent-soft) !important; border-color:var(--enj-accent) !important; color:var(--enj-ink) !important; } .enj-app .enj-opt, .enj-app .enj-extra{ background-color:var(--enj-surface-2) !important; background-image:none !important; color:var(--enj-ink) !important; text-transform:none !important; } .enj-app .enj-opt[aria-pressed="true"], .enj-app .enj-extra[aria-pressed="true"]{ background-color:var(--enj-accent-soft) !important; border-color:var(--enj-accent) !important; } /* product cards: a hostile `button{…!important}` would otherwise repaint the Add button and the quantity stepper, and `input{…}` the quantity field. */ .enj-app .enj-prod{ background-color:var(--enj-surface-2) !important; background-image:none !important; color:var(--enj-ink) !important; text-transform:none !important; border:1.5px solid var(--enj-line) !important; border-radius:var(--enj-r-lg) !important; } .enj-app .enj-prod[data-selected="true"]{ background-color:var(--enj-accent-soft) !important; border-color:var(--enj-accent) !important; } .enj-app .enj-prod-media{ background-color:#fff !important; } .enj-app .enj-prod-add{ background-color:var(--enj-surface) !important; background-image:none !important; color:var(--enj-ink) !important; border:1.5px solid var(--enj-line-strong) !important; border-radius:999px !important; font-size:13.5px !important; font-weight:600 !important; letter-spacing:normal !important; padding:9px 15px !important; min-height:44px !important; text-transform:none !important; } .enj-app .enj-prod-add[aria-pressed="true"]{ background-color:var(--enj-accent-soft-2) !important; border-color:var(--enj-accent-line) !important; color:var(--enj-accent-ink) !important; } .enj-app .enj-qty-btn{ background-color:transparent !important; background-image:none !important; border:0 !important; color:var(--enj-accent-ink) !important; font-size:18px !important; font-weight:700 !important; padding:0 !important; width:44px !important; height:44px !important; min-height:44px !important; border-radius:50% !important; letter-spacing:normal !important; box-shadow:none !important; } .enj-app input.enj-qty-val{ background-color:transparent !important; background-image:none !important; border:0 !important; box-shadow:none !important; color:var(--enj-ink) !important; text-align:center !important; text-transform:none !important; font-size:14.5px !important; font-weight:700 !important; padding:0 !important; width:42px !important; min-height:40px !important; } .enj-app .enj-btn{ text-transform:none !important; letter-spacing:.005em !important; border-radius:999px !important; } .enj-app .enj-btn-primary{ background-image:var(--enj-grad) !important; background-color:var(--enj-accent-deep) !important; color:#fff !important; border:none !important; } .enj-app .enj-btn-ghost{ background-color:var(--enj-surface) !important; background-image:none !important; color:var(--enj-ink) !important; border:1.5px solid var(--enj-line-strong) !important; } .enj-app .enj-lang-btn{ background-color:transparent !important; background-image:none !important; text-transform:none !important; } .enj-app .enj-lang-btn[aria-pressed="true"]{ background-color:var(--enj-accent-soft-2) !important; color:var(--enj-accent-ink) !important; } .enj-app .enj-drawer-btn{ background-color:var(--enj-surface) !important; background-image:none !important; color:var(--enj-ink) !important; text-transform:none !important; border-radius:var(--enj-r-lg) !important; } .enj-app input.enj-input, .enj-app select.enj-input, .enj-app textarea.enj-input{ background-color:var(--enj-surface-2) !important; color:var(--enj-ink) !important; border:1.5px solid var(--enj-line) !important; border-radius:var(--enj-r-md) !important; text-align:left !important; text-transform:none !important; } .enj-app input.enj-input, .enj-app textarea.enj-input{ background-image:none !important; } .enj-app select.enj-input{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235F6E88' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important; background-repeat:no-repeat !important; background-position:right 14px center !important; } .enj-app input.enj-input:focus, .enj-app select.enj-input:focus, .enj-app textarea.enj-input:focus{ border-color:var(--enj-accent) !important; box-shadow:0 0 0 4px var(--enj-accent-a12) !important; } /* TYPOGRAPHY ARMOR — a theme that styles bare h1/h2/h3 or a/ul/li (colour, font-family, uppercase, underline) must not reach inside the widget. Pinned here because `all:initial` only resets the wrapper itself, not descendants. */ .enj-app h1, .enj-app h2, .enj-app h3, .enj-app h4, .enj-app p, .enj-app b, .enj-app strong, .enj-app small, .enj-app span, .enj-app li, .enj-app label, .enj-app div{ text-transform:none !important; font-style:normal !important; } .enj-app .enj-h1, .enj-app .enj-step-head h2, .enj-app .enj-success h2, .enj-app .enj-offer-ttl, .enj-app .enj-svc b, .enj-app .enj-next b, .enj-app .enj-slider-val, .enj-app .enj-brand-txt b, .enj-app .enj-num{ font-family:var(--enj-display) !important; } .enj-app .enj-h1, .enj-app .enj-step-head h2, .enj-app .enj-success h2, .enj-app .enj-offer-ttl, .enj-app .enj-svc b, .enj-app .enj-opt-main, .enj-app .enj-next b, .enj-app .enj-slider-val, .enj-app .enj-emerg b{ color:var(--enj-ink) !important; } .enj-app .enj-h1{ letter-spacing:-.025em !important; } .enj-app .enj-step-head p, .enj-app .enj-hero-p, .enj-app .enj-opt-note, .enj-app .enj-svc small, .enj-app .enj-next span, .enj-app .enj-offer-note-top{ color:var(--enj-ink-soft) !important; } .enj-app .enj-kicker{ color:var(--enj-accent-ink) !important; text-transform:uppercase !important; letter-spacing:.09em !important; } .enj-app .enj-eyebrow{ text-transform:uppercase !important; letter-spacing:.04em !important; } .enj-app a{ text-decoration:none !important; } .enj-app .enj-consent-txt a{ text-decoration:underline !important; } /* NB: deliberately no `box-shadow:none` here — it would out-specify the selected/hover shadows defined above and flatten the whole widget. */ .enj-app .enj-lang-btn, .enj-app .enj-drawer-btn, .enj-app .enj-svc, .enj-app .enj-chip, .enj-app .enj-opt, .enj-app .enj-extra, .enj-app .enj-btn{ font-style:normal !important; } /* A hostile `button{…!important}` beats any non-important rule of ours no matter how specific, so every property such a theme is likely to set has to be re-declared with !important here — not only on the obvious buttons. */ .enj-app .enj-lang-btn{ border:0 !important; border-radius:999px !important; color:var(--enj-ink-soft) !important; font-size:13px !important; padding:6px 14px !important; min-height:32px !important; letter-spacing:normal !important; } .enj-app .enj-lang-btn[aria-pressed="true"]{ color:var(--enj-accent-ink) !important; } .enj-app .enj-drawer-btn{ border:1px solid var(--enj-line) !important; font-size:14.5px !important; padding:14px 18px !important; letter-spacing:normal !important; } .enj-app input[type=range].enj-range{ background:transparent !important; border:0 !important; padding:0 !important; min-height:0 !important; height:30px !important; box-shadow:none !important; } .enj-app a.enj-tel, .enj-app a.enj-mail{ color:#fff !important; text-decoration:none !important; } .enj-app .enj-brand-txt span{ color:rgba(255,255,255,.66) !important; } .enj-app .enj-badge24{ color:#d8f0e5 !important; } /* SIZE ARMOR — pin the prototype dimensions so a theme that sets button/input/heading font-size or padding cannot shrink or bloat the widget. */ .enj-app .enj-chip{ font-size:13.5px !important; line-height:1.3 !important; padding:11px 13px !important; min-height:48px !important; } .enj-app .enj-opt, .enj-app .enj-extra{ padding:14px 15px !important; min-height:52px !important; } .enj-app .enj-svc{ padding:18px !important; } .enj-app .enj-btn{ font-size:15px !important; font-weight:600 !important; line-height:1.15 !important; padding:13px 22px !important; min-height:50px !important; } .enj-app .enj-btn-primary{ font-size:16px !important; font-weight:700 !important; padding:15px 30px !important; min-height:56px !important; } .enj-app input.enj-input, .enj-app select.enj-input, .enj-app textarea.enj-input{ font-size:16px !important; line-height:1.4 !important; padding:13px 15px !important; min-height:50px !important; } .enj-app textarea.enj-input{ min-height:104px !important; } .enj-app .enj-h1{ font-size:clamp(26px,4.2vw,44px) !important; line-height:1.1 !important; font-weight:700 !important; } .enj-app .enj-step-head h2{ font-size:clamp(19px,2.4vw,25px) !important; line-height:1.25 !important; font-weight:600 !important; } .enj-app .enj-step-head p{ font-size:14.5px !important; } .enj-app .enj-flabel, .enj-app .enj-field > label{ font-size:14.5px !important; font-weight:600 !important; } .enj-app .enj-slider-val{ font-size:clamp(22px,3vw,29px) !important; font-weight:700 !important; } .enj-app .enj-svc b{ font-size:15.5px !important; font-weight:600 !important; } .enj-app .enj-svc small{ font-size:13px !important; } .enj-app .enj-opt-main{ font-size:14.5px !important; font-weight:600 !important; } .enj-app .enj-opt-note{ font-size:12.8px !important; font-weight:400 !important; } .enj-app .enj-lbl{ font-size:12.5px !important; font-weight:600 !important; } .enj-app .enj-num{ width:36px !important; height:36px !important; font-size:14px !important; } /* LAYOUT ARMOR — force the flex/grid structure so a theme or page builder that resets or re-displays