/* Unmute (The Season / NAFA) survey theme: self-hosted fonts + scoped title/label fonts. Loaded from survey.evaluoi.app on both standalone and embed; url() resolves against THIS stylesheet's origin, so fonts always come from survey.evaluoi.app. Overrides are scoped to .ev-theme-unmute (loader adds it to when theme_json.themeName === "unmute") so other tenants are unaffected. No external font fetch (CSP font-src 'self'; cross-origin needs ACAO on fonts). */ @font-face { font-family:'Outfit'; font-style:normal; font-weight:600; font-display:swap; src:url('./fonts/outfit-600-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122,U+2212; } @font-face { font-family:'Outfit'; font-style:normal; font-weight:700; font-display:swap; src:url('./fonts/outfit-700-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122,U+2212; } @font-face { font-family:'DM Mono'; font-style:normal; font-weight:400; font-display:swap; src:url('./fonts/dm-mono-400-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122,U+2212; } @font-face { font-family:'DM Mono'; font-style:normal; font-weight:500; font-display:swap; src:url('./fonts/dm-mono-500-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122,U+2212; } @font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url('./fonts/inter-400-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122,U+2212; } @font-face { font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap; src:url('./fonts/inter-500-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122,U+2212; } @font-face { font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap; src:url('./fonts/inter-600-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122,U+2212; } /* Titles in Outfit, rating anchors/labels in DM Mono; body stays Inter (via theme --sjs-font-family). */ .ev-theme-unmute .sd-title, .ev-theme-unmute .sd-header__text, .ev-theme-unmute .sd-element__title, .ev-theme-unmute .sd-panel__title { font-family:'Outfit', system-ui, -apple-system, sans-serif; } .ev-theme-unmute .sd-rating__min-text, .ev-theme-unmute .sd-rating__max-text, .ev-theme-unmute .sd-selectbase__label, .ev-theme-unmute .sd-progress__text { font-family:'DM Mono', ui-monospace, monospace; letter-spacing:.2px; } /* Mobile: keep the 7-point button scale usable on narrow screens (same discrete model, tighter). */ @media (max-width: 540px) { .ev-theme-unmute .sd-rating { flex-wrap: wrap; gap: 4px; } .ev-theme-unmute .sd-rating__item { min-width: 1.9em; padding-left: .35em; padding-right: .35em; } .ev-theme-unmute .sd-rating__item-text { font-size: 13px; } } /* ===== Custom scale widget (loader ev-scale), per scale-render artifact 2026-07-09 ===== RESPONSIVE REWRITE 2026-07-09 (fixes two live bugs): 1) SurveyJS question containers set `white-space: nowrap` (inherited into the widget) -> the pole labels ("Strongly disagree") could never wrap and were painted UNDER the dots at every width. Fixed by restoring `white-space: normal` inside the widget. 2) The one-row [pole|dots|pole] layout starved the dots on narrow CONTAINERS (10-19px dots on phones and in narrow embed columns; vw units sized fonts to the viewport, not the embed column). Fixed with a container query on .ev-scale-host: the layout responds to the ACTUAL container width (correct in both standalone and embed), never the viewport. Layout model: - Narrow container (default, and the safe fallback for old browsers): poles on one row above (left-aligned / right-aligned), dots on their own full-width row -> 7 dots stay on ONE line and keep a tappable size. - Wide container (>= 460px): EXACTLY the artifact -> one line, left pole | 7 dots | right pole, labels may wrap inside their column, dots never wrap. Values stay 1..N integers; no JS change. */ .ev-scale-host{ display:block; width:100%; container-type:inline-size; } .ev-scale, .ev-scale *, .ev-pills, .ev-pills * { box-sizing:border-box; white-space:normal; } /* --- default = narrow/stacked (mobile-first; also the no-container-query fallback) --- */ .ev-scale{ display:grid; grid-template-columns:1fr 1fr; gap:6px 12px; align-items:end; margin:10px 0; } .ev-pole{ font-size:12.5px; color:var(--sjs-general-forecolor-light,#5b6472); line-height:1.25; } .ev-pole.left{ grid-area:1 / 1; text-align:left; } .ev-pole.right{ grid-area:1 / 2; text-align:right; } .ev-dots{ grid-area:2 / 1 / 3 / 3; display:flex; align-items:center; justify-content:space-between; gap:4px; gap:clamp(4px,1.5cqi,9px); min-width:0; } /* dots scale to the CONTAINER (flex-grow, capped) so 7 always fit one row and never wrap/overflow */ .ev-dot{ flex:1 1 0; min-width:0; max-width:44px; aspect-ratio:1/1; height:auto; border-radius:50%; border:1.6px solid var(--sjs-border-default,#cfd6de); background:#fff; display:flex; align-items:center; justify-content:center; font-size:13px; color:#8a94a2; cursor:pointer; user-select:none; transition:.12s; } .ev-dot:hover{ border-color:var(--sjs-secondary-backcolor,#F5A623); } .ev-dot.sel{ background:var(--sjs-primary-backcolor,#1B3A5C); border-color:var(--sjs-primary-backcolor,#1B3A5C); color:#fff; } /* --- wide container: the artifact's one-line layout [left pole | dots | right pole] --- */ @container (min-width: 460px){ .ev-scale{ display:flex; align-items:center; gap:12px; } .ev-pole{ flex:0 0 auto; width:clamp(64px,18%,120px); font-size:13px; } .ev-dots{ flex:1 1 auto; } } /* fallback for browsers without container queries: approximate with the viewport (standalone page is a single centered column, so viewport ~ container there; embeds on such browsers stay stacked only below 700px, which is the safe direction) */ @supports not (container-type: inline-size){ @media (min-width: 700px){ .ev-scale{ display:flex; align-items:center; gap:12px; } .ev-pole{ flex:0 0 auto; width:clamp(64px,18%,120px); font-size:13px; } .ev-dots{ flex:1 1 auto; } } } /* frequency: horizontal pills, wrap allowed (5 labeled options). */ .ev-pills{ display:flex; flex-wrap:wrap; gap:8px; } .ev-pill{ border:1.6px solid var(--sjs-border-default,#cfd6de); border-radius:22px; padding:9px 15px; font-size:13.5px; color:var(--sjs-general-forecolor,#2D3436); cursor:pointer; user-select:none; transition:.12s; } .ev-pill:hover{ border-color:var(--sjs-secondary-backcolor,#F5A623); } .ev-pill.sel{ background:var(--sjs-primary-backcolor,#1B3A5C); border-color:var(--sjs-primary-backcolor,#1B3A5C); color:#fff; } /* Narrow screens: trim SurveyJS's wide question-frame padding so the dots get the width back. (Generic .sd-* selectors: every tenant uses the same widget, so this is widget-level, not tenant-level.) */ @media (max-width: 480px){ .sd-element--with-frame{ padding-left:16px; padding-right:16px; } .sd-panel .sd-question__content{ padding-left:0; padding-right:0; } }