fix: group all styling in syle.css

Author: taghizadlaura

website/js/fair-distribution.js

@@ -48,7 +48,6 @@
       state.columns = detectColumns(rows);
 
       ensureRequiredColumns();
-      injectStyles();
       removeLoading(root);
       buildScaffold();
       initializeState();
@@ -92,225 +91,6 @@
     if (missing.length > 0) throw new Error(`Missing columns: ${missing.join(", ")}`);
   }
 
-  function injectStyles() {
-    if (document.getElementById("fair-distribution-inline-styles")) return;
-
-    const style = document.createElement("style");
-    style.id = "fair-distribution-inline-styles";
-
-    style.textContent = `
-      #fair-viz {
-        color: white;
-        width: 100%;
-        max-width: 1440px;
-        margin: 0 auto;
-      }
-
-      .fair-controls {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 14px 18px;
-        align-items: center;
-        justify-content: center;
-        margin-bottom: 22px;
-      }
-
-      .fair-control {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        color: white;
-        font-size: 18px;
-        font-weight: 700;
-        white-space: nowrap;
-      }
-
-      .fair-control select {
-        background: #bfe2eb;
-        border: 2px solid #2c2c2c;
-        border-radius: 10px;
-        padding: 7px 12px;
-        font-size: 18px;
-        font-weight: 700;
-        color: #111;
-        cursor: pointer;
-      }
-
-      .fair-summary {
-        display: flex;
-        justify-content: center;
-        gap: 14px;
-        flex-wrap: wrap;
-        margin-bottom: 22px;
-        font-size: 14px;
-        color: #dddddd;
-      }
-
-      .fair-summary-box {
-        border: 1px solid rgba(255,255,255,0.22);
-        border-radius: 12px;
-        padding: 9px 15px;
-        background: rgba(255,255,255,0.03);
-      }
-
-      .fair-grid {
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        gap: 28px;
-        align-items: stretch;
-      }
-
-      .fair-country-card {
-        border-radius: 16px;
-        padding: 20px;
-        background: rgba(255,255,255,0.03);
-      }
-
-      .fair-country-title {
-        text-align: center;
-        font-size: 24px;
-        font-weight: 800;
-        margin-bottom: 6px;
-        color: white;
-      }
-
-      .fair-country-subtitle {
-        text-align: center;
-        font-size: 14px;
-        color: #d0d0d0;
-        margin-bottom: 18px;
-      }
-
-      .fair-box {
-        border: 1px solid rgba(255,255,255,0.24);
-        border-radius: 12px;
-        padding: 14px 16px;
-        margin-bottom: 16px;
-        background: rgba(255,255,255,0.02);
-      }
-
-      .fair-box:last-child {
-        margin-bottom: 0;
-      }
-
-      .fair-box-title {
-        font-size: 16px;
-        font-weight: 800;
-        color: white;
-        margin-bottom: 12px;
-        text-align: center;
-      }
-
-      .fair-medal-row {
-        display: grid;
-        grid-template-columns: 72px 1fr 50px;
-        align-items: start;
-        gap: 12px;
-        margin: 11px 0;
-      }
-
-      .fair-medal-label {
-        font-size: 14px;
-        font-weight: 800;
-        color: white;
-        padding-top: 2px;
-      }
-
-      .fair-medal-value {
-        font-size: 14px;
-        font-weight: 800;
-        color: white;
-        text-align: right;
-        padding-top: 2px;
-      }
-
-      .fair-medal-icons {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 3px;
-        align-items: center;
-      }
-
-      .fair-medal-icon {
-        width: 16px;
-        height: 16px;
-        border-radius: 50%;
-        flex-shrink: 0;
-      }
-
-      .fair-medal-half-wrap {
-        width: 8px;
-        height: 16px;
-        overflow: hidden;
-        flex-shrink: 0;
-      }
-
-      .fair-medal-overflow {
-        font-size: 12px;
-        font-weight: 800;
-        color: rgba(255,255,255,0.7);
-        align-self: flex-end;
-        margin-left: 2px;
-      }
-
-      .fair-note {
-        text-align: center;
-        margin-top: 22px;
-        font-size: 18px;
-        color: #d6d6d6;
-        line-height: 1.5;
-      }
-
-      .fair-warning {
-        color: #ffd166;
-        font-size: 12px;
-        text-align: center;
-        margin-top: 8px;
-      }
-
-      .fair-warning--lg {
-        font-size: 14px;
-        margin-top: 12px;
-        line-height: 1.5;
-      }
-
-      .fair-error {
-        color: white;
-        text-align: center;
-        padding: 24px;
-        border: 1px solid rgba(255,255,255,0.25);
-        border-radius: 12px;
-      }
-
-      @media (max-width: 950px) {
-        .fair-grid {
-          grid-template-columns: 1fr;
-        }
-      }
-
-      .fair-prediction-wrapper {
-        display: flex;
-        justify-content: center;
-        margin-bottom: 18px;
-      }
-
-      .fair-prediction-banner {
-        width: 80%;
-        background: rgba(255, 209, 102, 0.12);
-        border: 1px solid rgba(255, 209, 102, 0.55);
-        color: #ffd166;
-        padding: 14px 18px;
-        border-radius: 12px;
-        text-align: center;
-        font-size: 14px;
-        font-weight: 700;
-        line-height: 1.45;
-      }
-    `;
-
-    document.head.appendChild(style);
-  }
-
   function buildScaffold() {
     const root = document.querySelector(selectors.root);
 

website/js/never-medaled.js

@@ -277,7 +277,6 @@
       state.worldGeo = worldGeo;
       state.columns = detectColumns(rows);
 
-      injectStyles();
       removeLoading(root);
       injectControls(root);
       setupControls();
@@ -306,109 +305,6 @@
     return candidates.find(candidate => columns.includes(candidate)) || null;
   }
 
-  function injectStyles() {
-    if (document.getElementById("never-medaled-inline-styles")) return;
-
-    const style = document.createElement("style");
-    style.id = "never-medaled-inline-styles";
-
-    style.textContent = `
-      #never-medaled-viz {
-        width: 100%;
-        max-width: 1440px;
-        margin: 0 auto;
-        color: white;
-      }
-
-      .never-controls {
-        display: flex;
-        justify-content: center;
-        gap: 28px;
-        align-items: center;
-        margin: 0 auto;
-      }
-
-      .never-controls label {
-        color: white;
-        font-size: 18px;
-        font-weight: 700;
-        font-family: "Elms Sans", sans-serif;
-        margin-right: 8px;
-      }
-
-      .never-controls select {
-        background: #f4b400;
-        color: #111;
-        border: 3px solid #222;
-        border-radius: 12px;
-        padding: 8px 14px;
-        font-size: 18px;
-        font-weight: 700;
-        font-family: "Elms Sans", sans-serif;
-        cursor: pointer;
-      }
-
-      .never-layout {
-        display: grid;
-        grid-template-columns: 1.2fr 0.8fr;
-        gap: 34px;
-        align-items: start;
-        margin-top: 12px;
-      }
-
-      .never-map-panel,
-      .never-chart-panel {
-        min-width: 0;
-      }
-
-      .never-map-svg,
-      .never-medaled-svg {
-        width: 100%;
-        height: auto;
-        display: block;
-        background: transparent;
-      }
-
-      .never-medaled-tooltip {
-        position: absolute;
-        pointer-events: none;
-        opacity: 0;
-        background: rgba(20, 20, 20, 0.96);
-        color: white;
-        border: 1px solid rgba(255, 255, 255, 0.18);
-        border-radius: 10px;
-        padding: 10px 12px;
-        font-family: "Elms Sans", sans-serif;
-        font-size: 14px;
-        line-height: 1.35;
-        max-width: 330px;
-        z-index: 9999;
-        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.35);
-      }
-
-      .never-medaled-error {
-        color: white;
-        text-align: center;
-        padding: 24px;
-        border: 1px solid rgba(255, 255, 255, 0.25);
-        border-radius: 12px;
-      }
-
-      @media (max-width: 1000px) {
-        .never-controls {
-          flex-direction: column;
-          gap: 10px;
-        }
-
-        .never-layout {
-          grid-template-columns: 1fr;
-        }
-      }
-    `;
-
-    document.head.appendChild(style);
-  }
-
   function injectControls(root) {
     if (root.querySelector(".never-controls")) return;