Wrap org card in panel so labels/footer contrast in HF dark mode

README.md

@@ -12,29 +12,35 @@ short_description: Soft X-ray vibes from the WSU Carbon Lab
 <style>
   .cl, .cl * { box-sizing: border-box; }
   .cl {
+    --bg-panel: #fafaf9;
     --bg-hero: #fff7ed;
     --bg-card: #ffffff;
     --ink: #1c1917;
     --muted: #44403c;
-    --soft: #78716c;
+    --soft: #57534e;
     --line: #d6d3d1;
     --accent: #0f766e;
     --accent-2: #b45309;
     --chip-bg: #ecfdf5;
-    --chip-line: #99f6e4;
+    --chip-line: #5eead4;
     --metric-n: #b45309;
     max-width: 44rem;
     margin: 0 auto;
+    padding: 0.85rem;
+    border-radius: 1.35rem;
+    background: var(--bg-panel) !important;
+    border: 1px solid var(--line);
     color: var(--ink) !important;
     font-family: ui-sans-serif, system-ui, sans-serif;
   }
   @media (prefers-color-scheme: dark) {
     .cl {
+      --bg-panel: #0c0a09;
       --bg-hero: #1c1917;
       --bg-card: #292524;
       --ink: #fafaf9;
-      --muted: #d6d3d1;
-      --soft: #a8a29e;
+      --muted: #e7e5e4;
+      --soft: #d6d3d1;
       --line: #57534e;
       --accent: #5eead4;
       --accent-2: #fbbf24;
@@ -43,12 +49,21 @@ short_description: Soft X-ray vibes from the WSU Carbon Lab
       --metric-n: #fbbf24;
     }
   }
-  :is(html.dark, body.dark, .dark) .cl {
+  :is(
+    html.dark,
+    html.dark body,
+    body.dark,
+    .dark,
+    [data-theme="dark"],
+    [data-theme="dark"] *,
+    .theme-dark
+  ) .cl {
+    --bg-panel: #0c0a09;
     --bg-hero: #1c1917;
     --bg-card: #292524;
     --ink: #fafaf9;
-    --muted: #d6d3d1;
-    --soft: #a8a29e;
+    --muted: #e7e5e4;
+    --soft: #d6d3d1;
     --line: #57534e;
     --accent: #5eead4;
     --accent-2: #fbbf24;
@@ -57,33 +72,32 @@ short_description: Soft X-ray vibes from the WSU Carbon Lab
     --metric-n: #fbbf24;
   }
   .cl a { color: var(--accent) !important; }
-  .cl p, .cl span, .cl div, .cl strong, .cl h1 { color: var(--ink) !important; }
   .cl-hero {
-    border-radius: 1.25rem;
-    padding: 1.05rem 1.1rem 0.95rem;
-    margin-bottom: 0.7rem;
+    border-radius: 1.1rem;
+    padding: 1rem 1.05rem 0.9rem;
+    margin-bottom: 0.65rem;
     background:
       radial-gradient(ellipse 65% 80% at 100% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 55%),
       linear-gradient(165deg, var(--bg-hero), var(--bg-card));
     border: 1px solid var(--line);
   }
-  .cl-kicker {
+  .cl .cl-kicker {
     font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em;
     text-transform: uppercase; margin: 0 0 0.3rem;
     color: var(--accent-2) !important;
   }
-  .cl-title {
+  .cl .cl-title {
     margin: 0 0 0.35rem; font-size: 1.5rem; font-weight: 800;
     letter-spacing: -0.02em; line-height: 1.15;
     color: var(--ink) !important;
   }
-  .cl-title a { color: var(--ink) !important; text-decoration: none; }
-  .cl-title a:hover { text-decoration: underline; text-decoration-color: var(--accent-2); }
-  .cl-lede {
+  .cl .cl-title a { color: var(--ink) !important; text-decoration: none; }
+  .cl .cl-title a:hover { text-decoration: underline; text-decoration-color: var(--accent-2); }
+  .cl .cl-lede {
     margin: 0; font-size: 0.9rem; line-height: 1.45;
     color: var(--muted) !important;
   }
-  .cl-lede a {
+  .cl .cl-lede a {
     color: var(--accent) !important; font-weight: 700;
     text-decoration: underline; text-underline-offset: 2px;
   }
@@ -91,7 +105,7 @@ short_description: Soft X-ray vibes from the WSU Carbon Lab
     display: flex; flex-wrap: wrap; gap: 0.35rem;
     margin: 0.7rem 0 0;
   }
-  .cl-chip {
+  .cl .cl-chip {
     display: inline-flex; align-items: center;
     padding: 0.26rem 0.6rem; border-radius: 999px;
     background: var(--chip-bg) !important;
@@ -104,23 +118,23 @@ short_description: Soft X-ray vibes from the WSU Carbon Lab
     display: flex; flex-wrap: wrap; gap: 0.4rem;
     margin: 0 0 0.65rem;
   }
-  .cl-metric {
+  .cl .cl-metric {
     flex: 1 1 5.2rem; min-width: 5.2rem; text-align: center;
     text-decoration: none !important;
     border-radius: 0.85rem; padding: 0.5rem 0.35rem;
     background: var(--bg-card) !important;
     border: 1px solid var(--line);
   }
-  .cl-metric .n {
+  .cl .cl-metric .n {
     font-size: 1.1rem; font-weight: 800; line-height: 1.1;
     color: var(--metric-n) !important;
   }
-  .cl-metric .l {
+  .cl .cl-metric .l {
     font-size: 0.62rem; font-weight: 750; text-transform: uppercase;
     letter-spacing: 0.04em; margin-top: 0.12rem;
     color: var(--soft) !important;
   }
-  .cl-label {
+  .cl .cl-label {
     margin: 0 0 0.4rem; font-size: 0.72rem; font-weight: 800;
     letter-spacing: 0.06em; text-transform: uppercase;
     color: var(--soft) !important;
@@ -133,26 +147,26 @@ short_description: Soft X-ray vibes from the WSU Carbon Lab
   @media (min-width: 640px) {
     .cl-row { grid-template-columns: 1fr 1fr 1fr; }
   }
-  .cl-card {
+  .cl .cl-card {
     display: block; text-decoration: none !important;
     border-radius: 0.95rem; padding: 0.7rem 0.8rem;
     background: var(--bg-card) !important;
     border: 1px solid var(--line);
   }
-  .cl-card:hover { border-color: var(--accent); }
-  .cl-card strong {
+  .cl .cl-card:hover { border-color: var(--accent); }
+  .cl .cl-card strong {
     display: block; font-size: 0.88rem; margin-bottom: 0.12rem;
     color: var(--ink) !important;
   }
-  .cl-card span {
+  .cl .cl-card span {
     font-size: 0.74rem; line-height: 1.35;
     color: var(--muted) !important;
   }
   .cl-venues {
     display: flex; flex-wrap: wrap; gap: 0.3rem;
-    margin: 0 0 0.6rem;
+    margin: 0 0 0.65rem;
   }
-  .cl-venue {
+  .cl .cl-venue {
     font-size: 0.68rem; font-weight: 700;
     padding: 0.18rem 0.45rem; border-radius: 999px;
     border: 1px solid var(--line);
@@ -160,12 +174,12 @@ short_description: Soft X-ray vibes from the WSU Carbon Lab
     color: var(--muted) !important;
     text-decoration: none !important;
   }
-  .cl-venue:hover { border-color: var(--accent); color: var(--ink) !important; }
-  .cl-foot {
+  .cl .cl-venue:hover { border-color: var(--accent); color: var(--ink) !important; }
+  .cl .cl-foot {
     margin: 0; font-size: 0.7rem; text-align: center;
     color: var(--soft) !important;
   }
-  .cl-foot a {
+  .cl .cl-foot a {
     color: var(--soft) !important;
     text-decoration: underline; text-underline-offset: 2px;
   }