Spaces:

---

ee-in

/

survey-visualization-engine

Like 0

Running

<title>Survey Visualization Engine — YouGov four-country study</title>

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{

--font-body:'Inter',ui-sans-serif,system-ui,sans-serif;

--font-display:'Plus Jakarta Sans',ui-sans-serif,system-ui,sans-serif;

--radius:12px; --radius-sm:8px;

--s1:#FF6756; --s2:#6ACAF5; --s3:#5AD5B9; --s4:#616E90; --s5:#FF7BB3;

}

body[data-theme="evidence"]{

--bg:#0a0e1a; --bg2:#0d1424; --ink:#e8eaf0; --muted:#8b90a0;

--line:rgba(255,255,255,.09); --line-strong:rgba(255,255,255,.18);

--panel:rgba(255,255,255,.045); --panel-ink:#cfd4e0;

--accent:#b8e648; --accent-ink:#0a0e1a; --accent-soft:rgba(184,230,72,.12);

--pos:#b8e648; --neg:#e86050; --warn:#e8c840; --info:#6ACAF5;

--chip:rgba(255,255,255,.06); --chip-ink:#d0d4e0;

}

body[data-theme="paper"]{

--bg:#F7F5F1; --bg2:#ffffff; --ink:#1e293b; --muted:#64748b;

--line:#e2ded6; --line-strong:#cfc9be;

--panel:#ffffff; --panel-ink:#334155;

--accent:#4338CA; --accent-ink:#ffffff; --accent-soft:#eef2ff;

--pos:#15803d; --neg:#b91c1c; --warn:#b45309; --info:#0369a1;

--chip:#ffffff; --chip-ink:#334155;

}

html,body{height:100%}

body{

font-family:var(--font-body); color:var(--ink); background:var(--bg);

-webkit-font-smoothing:antialiased; font-size:14px; line-height:1.55;

background-image:radial-gradient(ellipse 70% 50% at 30% 100%, rgba(120,200,140,.06), transparent 70%);

}

#app{max-width:1180px;margin:0 auto;padding:22px 20px 70px}

/* ---- top bar ---- */

.topbar{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-start;justify-content:space-between;padding-bottom:16px;border-bottom:1px solid var(--line)}

.brand .kicker{font-size:.66rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}

.brand h1{font-family:var(--font-display);font-weight:300;font-size:clamp(1.35rem,3.2vw,1.95rem);line-height:1.12;margin-top:4px}

.brand p.sub{font-size:.78rem;color:var(--muted);margin-top:5px;max-width:60ch}

.actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}

/* ---- nav ---- */

nav.tabs{display:flex;flex-wrap:wrap;gap:6px;margin:16px 0 18px}

nav.tabs button{

font-family:var(--font-body);font-size:.72rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;

padding:.45rem .8rem;border-radius:100px;border:1px solid var(--line);background:transparent;color:var(--muted);

cursor:pointer;transition:.15s;

}

nav.tabs button:hover{color:var(--ink);border-color:var(--line-strong)}

nav.tabs button.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}

/* ---- generic ---- */

.btn{

font-family:var(--font-body);font-size:.74rem;font-weight:600;padding:.42rem .8rem;border-radius:var(--radius-sm);

border:1px solid var(--line-strong);background:var(--chip);color:var(--chip-ink);cursor:pointer;transition:.15s;

}

.btn:hover{border-color:var(--accent);color:var(--accent)}

.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}

.btn.primary:hover{filter:brightness(1.08);color:var(--accent-ink)}

.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;margin-bottom:16px}

.card h3{font-family:var(--font-display);font-weight:400;font-size:1.05rem;margin-bottom:4px}

.card h3 + .cap{font-size:.76rem;color:var(--muted);margin-bottom:14px}

.grid2{display:grid;grid-template-columns:1fr;gap:16px}

@media(min-width:820px){.grid2{grid-template-columns:1fr 1fr}}

.grid4{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}

.eyebrow{font-size:.64rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}

.muted{color:var(--muted)}

.tiny{font-size:.72rem}

.rule{height:1px;background:var(--line);margin:14px 0}

.badge{display:inline-block;font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.16rem .5rem;border-radius:100px;border:1px solid var(--line-strong);color:var(--muted)}

.badge.ok{color:var(--pos);border-color:var(--pos)}

.badge.no{color:var(--neg);border-color:var(--neg)}

.badge.warn{color:var(--warn);border-color:var(--warn)}

.kv{display:flex;justify-content:space-between;gap:10px;padding:.3rem 0;border-bottom:1px solid var(--line);font-size:.78rem}

.kv:last-child{border-bottom:none}

.kv b{font-weight:600}

/* ---- controls ---- */

.controls{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-bottom:16px}

.field{display:flex;flex-direction:column;gap:4px}

.field label{font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

select,input[type=text],input[type=number],textarea{

font-family:var(--font-body);font-size:.78rem;padding:.42rem .6rem;border-radius:var(--radius-sm);

border:1px solid var(--line-strong);background:var(--bg2);color:var(--ink);min-width:120px;

}

select{max-width:320px}

textarea{width:100%;min-height:110px;font-family:ui-monospace,Menlo,monospace;font-size:.72rem;line-height:1.45}

input[type=checkbox]{accent-color:var(--accent);width:15px;height:15px;cursor:pointer}

/* ---- charts ---- */

.chart{display:block;overflow:visible}

.sv-grid{stroke:var(--line);stroke-width:1;opacity:.75}