/* BAJ Swine OS — Public Knowledge Centre · Premium Classic Theme (v2, layout) Scope: knowledge-centre.html ONLY. Does not touch kge.js, kge-data.js, app.html, index.html or any other stylesheet. This file styles two kinds of markup: 1) Our own layout chrome (header, sidebar, tabs, KPI rail, article head). 2) The already-rendered kge.js output after it has been relocated (by the page's own script, unmodified) into elements carrying the shared ".kc-kge-scope" class — ".kc-kge-scope .kge-*" overrides the rules kge.js injects into at runtime, without editing kge.js itself, so the authenticated in-app KGE view is completely unaffected. */ :root{ --baj-green: #063D2A; --baj-green-deep: #022C22; --baj-green-mid: #0B4D3A; --baj-ivory: #F6F0E2; --baj-cream: #FBF4DD; --baj-gold: #C8923A; --baj-gold-soft: #E0A94A; --baj-ink: #1F2B24; --baj-soft: #5B6B60; --baj-line: #E3DCC6; --baj-line-strong:#D8CBA4; --shadow-card: 0 3px 14px rgba(6,61,42,.08); --shadow-lift: 0 10px 30px rgba(6,61,42,.12); --serif: 'Fraunces', Georgia, 'Times New Roman', serif; --sans: 'Schibsted Grotesk', 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; --sidebar-w: 264px; --kpi-w: 272px; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; font-family:var(--sans); color:var(--baj-ink); line-height:1.6; background-color:var(--baj-ivory); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.02 0 0 0 0 0.24 0 0 0 0 0.16 0 0 0 0.035 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"), radial-gradient(1100px 620px at 50% -180px, rgba(200,146,58,.07), transparent 60%); background-repeat:repeat, no-repeat; } a{color:inherit} ::selection{background:rgba(200,146,58,.32)} /* ---------------------------- Skip link ---------------------------- */ .skip-link{position:absolute;left:-999px;top:auto;background:var(--baj-green);color:#fff;padding:12px 18px;border-radius:0 0 10px 0;z-index:300;font-family:var(--sans);font-weight:600} .skip-link:focus{left:0;top:0} /* ---------------------------- Header ---------------------------- */ header.kc-nav{ background:linear-gradient(180deg,var(--baj-green-deep),var(--baj-green)); color:var(--baj-ivory); padding:0; position:sticky;top:0;z-index:80; box-shadow:0 2px 18px rgba(2,17,12,.28); border-bottom:1px solid rgba(200,146,58,.55); } .kc-nav-inner{ max-width:1320px;margin:0 auto;padding:15px 24px; display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap; } .kc-brand{display:flex;align-items:center;gap:13px;text-decoration:none;color:var(--baj-ivory)} .kc-brand .mark{ width:40px;height:40px;border-radius:50%;flex:0 0 auto; background:radial-gradient(circle at 32% 28%, var(--baj-gold-soft), var(--baj-gold) 68%, #9c6f28 100%); display:flex;align-items:center;justify-content:center;font-size:19px; border:1px solid rgba(255,255,255,.35); box-shadow:inset 0 0 0 1px rgba(0,0,0,.12), 0 3px 8px rgba(0,0,0,.25); } .kc-brand .bt{ font-family:var(--serif);font-weight:700;letter-spacing:.05em;font-size:18px;line-height:1.1; text-transform:uppercase;color:#FBF4E4; } .kc-brand .bs{ display:block;font-family:var(--sans);font-size:10px;color:var(--baj-gold-soft); letter-spacing:.15em;text-transform:uppercase;margin-top:3px;font-weight:600; } .kc-links{display:flex;gap:20px;align-items:center;flex-wrap:wrap;font-size:13px;font-family:var(--sans)} .kc-links a{text-decoration:none;color:#E9E2CC;padding:8px 2px;border-bottom:1.5px solid transparent;font-weight:500;letter-spacing:.01em;transition:border-color .15s,color .15s} .kc-links a:hover,.kc-links a:focus-visible{border-color:var(--baj-gold);color:#fff} .kc-links a.cta{ background:linear-gradient(180deg,var(--baj-gold-soft),var(--baj-gold)); color:#241705;font-weight:700;padding:9px 17px;border-radius:3px;border-bottom:none; letter-spacing:.03em;box-shadow:0 2px 6px rgba(0,0,0,.2); } .kc-links a.cta:hover,.kc-links a.cta:focus-visible{filter:brightness(1.06)} .kc-gold-rule{height:2px;background:linear-gradient(90deg,transparent,var(--baj-gold) 18%,var(--baj-gold-soft) 50%,var(--baj-gold) 82%,transparent)} /* ---------------------------- Hero (compact, above the shell) ---------------------------- */ .kc-hero{padding:40px 20px 30px;text-align:center} .kc-hero .eyebrow{display:inline-block;font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--baj-gold);margin-bottom:14px} .kc-hero .eyebrow:before,.kc-hero .eyebrow:after{content:"—";color:var(--baj-line-strong);margin:0 10px;font-weight:400} .kc-hero h1{font-family:var(--serif);font-weight:600;font-size:clamp(26px,4vw,38px);line-height:1.1;margin:0 0 12px;color:var(--baj-green);letter-spacing:-.01em} .kc-hero .tagline{font-family:var(--sans);color:var(--baj-soft);font-size:15.5px;max-width:560px;margin:0 auto;line-height:1.6} .kc-badge{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--baj-green-mid);background:var(--baj-cream);border:1px solid var(--baj-line-strong);border-radius:999px;padding:7px 16px} .kc-badge:before{content:"●";color:var(--baj-gold);font-size:9px} noscript .kc-noscript{display:block;background:var(--baj-cream);border:1px solid var(--baj-gold);color:#5c3d00;padding:16px 18px;border-radius:4px;margin:16px auto;max-width:900px;font-family:var(--sans);font-size:14px} /* ================================================================ SHELL — three-zone layout: sidebar | article | KPI rail. ================================================================ */ .kc-shell{ max-width:1320px;margin:0 auto;padding:0 20px 70px; display:grid;grid-template-columns:var(--sidebar-w) 1fr;gap:28px; align-items:start; } .kc-shell.has-kpi{grid-template-columns:var(--sidebar-w) 1fr var(--kpi-w)} /* ---------------------------- Sidebar ---------------------------- */ .kc-sidebar{ position:sticky;top:76px; display:flex;flex-direction:column;gap:22px; max-height:calc(100vh - 96px);overflow:auto; padding-bottom:8px; } .kc-side-search{ background:#FFFDF7;border:1px solid var(--baj-line-strong);border-radius:6px; padding:18px;box-shadow:var(--shadow-card); } .kc-side-search label{display:block;font-family:var(--serif);font-weight:600;font-size:15px;margin-bottom:10px;color:var(--baj-green)} .kc-side-search input[type=search]{ width:100%;padding:11px 13px;border:1.5px solid var(--baj-line-strong);border-radius:4px; font-size:14px;font-family:var(--sans);background:#fff;color:var(--baj-ink);margin-bottom:10px; } .kc-side-search input[type=search]::placeholder{color:#9c9482} .kc-side-search input[type=search]:focus{outline:3px solid rgba(200,146,58,.32);border-color:var(--baj-gold)} .kc-side-search-row{display:flex;gap:8px;margin-bottom:8px} .kc-btn{ padding:11px 14px;border-radius:4px;border:1.5px solid var(--baj-green); background:linear-gradient(180deg,var(--baj-green-mid),var(--baj-green)); color:#fff;font-weight:700;font-size:13px;letter-spacing:.02em;cursor:pointer;font-family:var(--sans); box-shadow:0 2px 6px rgba(6,61,42,.25);flex:1 1 auto; } .kc-btn:hover{filter:brightness(1.1)} .kc-btn:focus-visible{outline:3px solid rgba(200,146,58,.45);outline-offset:2px} .kc-btn.ghost{background:#fff;color:var(--baj-green);border:1.5px solid var(--baj-gold);box-shadow:none} .kc-btn.ghost:hover{background:var(--baj-cream)} .kc-btn.quiet{ width:100%;background:none;border:1.5px solid transparent;color:var(--baj-soft);box-shadow:none; font-weight:600;text-decoration:underline;padding:8px 4px;text-align:center; } .kc-btn.quiet:hover{color:var(--baj-green)} .kc-hint{font-size:11.5px;color:var(--baj-soft);margin:10px 0 0;line-height:1.55;font-family:var(--sans)} .kc-side-nav{display:flex;flex-direction:column;gap:20px} .kc-navgroup-h{ font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.16em;color:var(--baj-green); text-transform:uppercase;margin:0 0 10px;padding-left:2px; } .kc-navgroup-h.gold{color:#8A5D0C} .kc-navlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px} .kc-navitem{ width:100%;display:flex;align-items:center;gap:10px;text-align:left; background:transparent;border:1px solid transparent;border-radius:4px; padding:9px 10px;cursor:pointer;font-family:var(--sans);font-size:13.5px;font-weight:600; color:var(--baj-ink);transition:background .15s,border-color .15s; } .kc-navitem .ic{font-size:16px;line-height:1;flex:0 0 auto} .kc-navitem:hover{background:var(--baj-cream);border-color:var(--baj-line-strong)} .kc-navitem:focus-visible{outline:2px solid var(--baj-gold);outline-offset:1px} .kc-navitem.on{background:var(--baj-green);color:var(--baj-ivory);border-color:var(--baj-green)} .kc-navitem.ev.on{background:#5C3F09;color:#FBF0DA;border-color:#5C3F09} /* ---------------------------- Content column ---------------------------- */ .kc-content{min-width:0} #kcResultsMeta{font-size:12.5px;color:var(--baj-soft);margin-bottom:12px;font-family:var(--sans);letter-spacing:.02em;text-transform:uppercase;font-weight:600} .kc-results{list-style:none;margin:0;padding:0;display:grid;gap:12px} .kc-result{ width:100%;text-align:left;background:#fff;border:1px solid var(--baj-line);border-radius:4px; padding:16px 18px;cursor:pointer;display:flex;gap:14px;align-items:flex-start; box-shadow:var(--shadow-card);transition:border-color .15s,box-shadow .15s,transform .15s; font-family:var(--sans); } .kc-result:hover{border-color:var(--baj-gold);box-shadow:var(--shadow-lift);transform:translateY(-1px)} .kc-result:focus-visible{outline:none;border-color:var(--baj-gold);box-shadow:0 0 0 3px rgba(200,146,58,.28)} .kc-result .ic{font-size:23px;line-height:1;flex:0 0 auto;margin-top:1px} .kc-result .rt{font-family:var(--serif);font-weight:600;color:var(--baj-green);font-size:16px} .kc-result .rb{ display:inline-block;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em; color:var(--baj-green-mid);background:var(--baj-cream);border:1px solid var(--baj-line-strong); border-radius:999px;padding:3px 9px;margin-left:9px;vertical-align:middle;font-family:var(--sans); } .kc-result .rb.ev{color:#7A4A00;background:#FBEECB;border-color:#EAD09B} .kc-result .rs{font-size:13.5px;color:var(--baj-soft);margin-top:5px;line-height:1.55} /* ---------------------------- Back-to-results ---------------------------- */ #kcBackToResults{display:none;margin:0 0 18px;font-size:13.5px;font-family:var(--sans)} #kcBackToResults button{background:none;border:none;color:var(--baj-green-mid);text-decoration:none;cursor:pointer;font-weight:700;padding:8px 0;font-size:inherit;display:inline-flex;align-items:center;gap:6px} #kcBackToResults button:hover{color:var(--baj-gold)} #kcBackToResults button:focus-visible{outline:2px solid var(--baj-gold);outline-offset:3px} /* ---------------------------- Article header ---------------------------- */ .kc-article-head{outline:none;margin-bottom:18px} .kc-article-eyebrow{ font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase; color:var(--baj-gold);margin-bottom:8px; } #kcArticleTitle{ font-family:var(--serif);font-weight:600;font-size:clamp(24px,3vw,34px);line-height:1.14; color:var(--baj-green);margin:0 0 12px;display:flex;align-items:center;gap:13px;letter-spacing:-.01em; } .kc-article-icon{font-size:0.85em;line-height:1} .kc-article-pager{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:6px} .kc-article-pager button{ background:#fff;border:1.5px solid var(--baj-line-strong);border-radius:4px;padding:9px 14px; font-family:var(--sans);font-size:12.5px;font-weight:700;color:var(--baj-green);cursor:pointer; } .kc-article-pager button:hover{border-color:var(--baj-gold);background:var(--baj-cream)} .kc-article-pager button:focus-visible{outline:2px solid var(--baj-gold);outline-offset:2px} .kc-article-pager button:only-child{margin-left:auto} /* ---------------------------- Tabs ---------------------------- */ .kc-tabs{display:flex;flex-wrap:wrap;gap:4px;border-bottom:1.5px solid var(--baj-line);margin-bottom:22px} .kc-tab{ background:none;border:none;border-bottom:2.5px solid transparent;padding:11px 14px; font-family:var(--sans);font-size:13px;font-weight:600;color:var(--baj-soft);cursor:pointer; margin-bottom:-1.5px; } .kc-tab:hover{color:var(--baj-green)} .kc-tab:focus-visible{outline:2px solid var(--baj-gold);outline-offset:-2px} .kc-tab.on{color:var(--baj-green);border-bottom-color:var(--baj-gold);font-weight:700} .kc-tabpanel{animation:kcFade .15s ease} @keyframes kcFade{from{opacity:0}to{opacity:1}} .kc-tabpanel-empty{color:var(--baj-soft);font-size:14px;font-style:italic} /* ---------------------------- Footer ---------------------------- */ .kc-foot{ margin:60px auto 0;padding:26px 20px 60px;border-top:1px solid var(--baj-line); font-size:13px;color:var(--baj-soft);text-align:center;font-family:var(--sans);line-height:1.7; max-width:620px; } .kc-foot a{color:var(--baj-green-mid);text-decoration:underline;font-weight:600} .kc-foot a:hover{color:var(--baj-gold)} /* ================================================================ Overrides for kge.js's shared, runtime-injected #kge-styles rules, applied to the relocated nodes via the ".kc-kge-scope" marker class (present on #kcDiscWrap, #kcTabpanels, #kcSrc and #kcKpiRail). ================================================================ */ .kc-kge-scope .kge-disc{ display:flex;gap:14px;align-items:flex-start; background:linear-gradient(180deg,#FFF9EC,#FDF2DA); border:1px solid var(--baj-gold);border-left:5px solid var(--baj-gold); border-radius:4px;padding:16px 20px;margin-bottom:26px; font-size:14px;color:#5C4310;line-height:1.6;font-family:var(--sans); box-shadow:0 2px 8px rgba(200,146,58,.12); } .kc-kge-scope .kge-disc span{font-size:20px;line-height:1;flex:0 0 auto;margin-top:1px} .kc-kge-scope .kge-disc b{ display:block;color:var(--baj-green);font-family:var(--sans);font-weight:800; text-transform:uppercase;letter-spacing:.08em;font-size:12.5px;margin-bottom:4px; } .kc-kge-scope .kge-lead{ font-family:var(--sans);font-size:clamp(15.5px,1.5vw,17px);line-height:1.75;color:#2C3B33; background:var(--baj-cream);border-left:4px solid var(--baj-gold);border-radius:2px; padding:16px 20px;margin:0; } .kc-kge-scope .kge-sec{margin-top:0} .kc-kge-scope .kge-sec-h{ display:flex;align-items:center;gap:10px;font-family:var(--serif);font-size:clamp(15px,1.6vw,17.5px); font-weight:600;color:var(--baj-green);margin:0 0 14px;line-height:1.3;letter-spacing:-.005em; } .kc-kge-scope .kge-sec-h .bar{display:inline-block;width:3px;height:16px;border-radius:0;background:var(--baj-gold);flex:0 0 auto} .kc-kge-scope .kge-sec-h.warn{color:#8A2A1E}.kc-kge-scope .kge-sec-h.warn .bar{background:#B0392A} .kc-kge-scope .kge-sec-h.gold{color:#7A5209}.kc-kge-scope .kge-sec-h.gold .bar{background:var(--baj-gold)} .kc-kge-scope .kge-sec-h.good{color:#1E5B34}.kc-kge-scope .kge-sec-h.good .bar{background:#3E8455} .kc-kge-scope .kge-card{background:transparent;border:none;border-radius:0;padding:0;margin-bottom:0;box-shadow:none} .kc-kge-scope .kge-card + .kge-card, .kc-kge-scope .kge-card + .kge-grid2, .kc-kge-scope .kge-grid2 + .kge-card, .kc-kge-scope .kge-grid2 + .kge-grid2{margin-top:26px} .kc-kge-scope .kge-card.warn{ background:#FCF4F2;border:1px solid #EFC9C0;border-left:4px solid #B0392A;border-radius:2px; padding:16px 18px;box-shadow:none; } .kc-kge-scope .kge-card.gold{ background:var(--baj-cream);border:1px solid var(--baj-line-strong);border-left:4px solid var(--baj-gold); border-radius:2px;padding:16px 18px;box-shadow:none; } .kc-kge-scope .kge-grid2{display:grid;grid-template-columns:1fr 1fr;gap:22px} .kc-kge-scope .kge-grid2 .kge-card{margin-bottom:0} .kc-kge-scope .kge-list{margin:0;padding:0;list-style:none} .kc-kge-scope .kge-list li{ position:relative;padding-left:22px;font-size:clamp(14.5px,1.45vw,16px);line-height:1.68; color:#28362E;margin-bottom:10px;font-family:var(--sans); } .kc-kge-scope .kge-list li:last-child{margin-bottom:0} .kc-kge-scope .kge-list li:before{content:"";position:absolute;left:4px;top:9px;width:6px;height:6px;border-radius:50%;background:var(--baj-gold)} .kc-kge-scope .kge-list.warn li:before{background:#B0392A} .kc-kge-scope .kge-list.good li:before{background:#3E8455} .kc-kge-scope .kge-list--mk li{padding-left:27px} .kc-kge-scope .kge-list--mk li:before{display:none} .kc-kge-scope .kge-mk{position:absolute;left:0;top:2px;font-size:13px;line-height:1.5;opacity:.9} /* -- sources / references -- */ #kcSrc .kge-src{ text-align:left;color:var(--baj-soft) !important;font-size:12px;line-height:1.7; border-top:1px solid var(--baj-line);padding-top:16px;margin-top:36px;font-family:var(--sans); } #kcSrc .kge-src:before{ content:"Sources";display:block;font-size:10.5px;font-weight:700;letter-spacing:.18em; text-transform:uppercase;color:var(--baj-green);margin-bottom:8px; } /* ---------------------------- KPI rail ---------------------------- */ .kc-kpi-rail{position:sticky;top:76px;display:flex;flex-direction:column;gap:16px} .kc-kpi-card{ background:#FFFDF7;border:1px solid var(--baj-line-strong);border-radius:6px; padding:20px;box-shadow:var(--shadow-card); } .kc-kpi-card-h{ font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase; color:var(--baj-green);margin:0 0 14px; } .kc-kpi-card .kge-kpi{width:100%;border-collapse:collapse;font-size:13.5px;font-family:var(--sans)} .kc-kpi-card .kge-kpi td{padding:11px 0;border-top:1px solid var(--baj-line);color:#28362E} .kc-kpi-card .kge-kpi tr:first-child td{border-top:none} .kc-kpi-card .kge-kpi tr td:first-child{font-weight:600;color:var(--baj-green)} .kc-kpi-card .kge-kpi .t{text-align:right;font-weight:700;color:#7A5209;white-space:nowrap;font-variant-numeric:tabular-nums} /* ================================================================ Responsive ================================================================ */ @media (max-width:1180px){ .kc-shell.has-kpi{grid-template-columns:var(--sidebar-w) 1fr} .kc-kpi-rail{grid-column:1 / -1;position:static;max-height:none} .kc-kpi-rail .kc-kpi-card{max-width:420px} } @media (max-width:900px){ .kc-shell,.kc-shell.has-kpi{grid-template-columns:1fr} .kc-sidebar{position:static;max-height:none;flex-direction:row;flex-wrap:wrap} .kc-side-search{flex:1 1 260px} .kc-side-nav{flex:2 1 380px;flex-direction:row;flex-wrap:wrap;gap:24px} .kc-navlist{flex-direction:row;flex-wrap:wrap} .kc-navitem{flex:0 0 auto} } @media (max-width:640px){ .kc-nav-inner{padding:13px 16px} .kc-hero{padding:32px 14px 24px} .kc-shell{padding:0 14px 50px} .kc-sidebar{flex-direction:column} .kc-side-nav{flex-direction:column} .kc-side-search-row{flex-direction:column} .kc-links{gap:12px;font-size:12.5px} .kc-tabs{overflow-x:auto;flex-wrap:nowrap} .kc-tab{flex:0 0 auto} .kc-kge-scope .kge-grid2{grid-template-columns:1fr;gap:14px} #kcArticleTitle{font-size:24px} } @media (prefers-reduced-motion:reduce){ .kc-result{transition:none} .kc-tabpanel{animation:none} }