udpate

Author: suniique

css/index-v3.css

@@ -247,7 +247,7 @@ body {
   width: 100px; /* fixed width for rotate buttons */
   position: static; /* default position */
   margin-left: auto; /* push to the right edge */
-  background: #f5f5f5;
+  /* background: #f5f5f5; */
   border: 1px solid #bbb;
   border-radius: 18px;
   padding: 6px 14px;
@@ -336,10 +336,10 @@ body {
   width: 320px;
   height: 320px;
   flex: 1 1 320px;
-  border: 1px solid #ddd;
+  /* border: 1px solid #ddd; */
   border-radius: 6px;
   overflow: hidden;
-  background: #f5f5f5;
+  /* background: #f5f5f5; */
 }
 
 /* “Loading…” overlay inside each viewer */
@@ -381,29 +381,31 @@ body {
   font-size: 1.1rem;
     font-weight: 600;
   color: #333;
-  margin-bottom: 6px;
+  margin-bottom: 10px;
   text-align: center;
-  line-height: 1.2;
+  line-height: 1.8;
 }
 
 /* The <hr> between lines */
 .viewer-caption hr,
 .assembled-caption hr {
   border: none;
+  /* color: #3730a3; */
   width: 100%;
-  /* border-top: 1px solid #888; */
-  margin: 0px 0;
+  border-top: 1px solid #c0c9d5;
+  margin-top: 1px;
+  margin-bottom: 2px;
 }
 
 /* Sub‐caption text (second line) slightly smaller and lighter */
 .viewer-subcaption,
 .assembled-subcaption {
   display: block;
-  font-size: 1.0rem;
-  color: #666;
+  font-size: 0.95rem;
+  color: #3730a3;
   font-weight: 400;
   margin-top: 4px;
-  margin-bottom: 5px;;
+  margin-bottom: 5px;
 }
 
 
@@ -417,7 +419,7 @@ body {
   /* border: 1px solid #bbb; */
   border-radius: 8px;
   padding: 15px;
-  box-shadow: 0 3px 5px rgba(0,0,0,0.1);
+  /* box-shadow: 0 3px 5px rgba(0,0,0,0.1); */
   background: #fcfcfc;
   width: 100%;
 }
@@ -477,7 +479,7 @@ body {
   max-width: 400px;
   width: 100%;                /* full width of the parent container */
   gap: 1rem;                  /* space between “s=…” and the slider */
-  background: #f5f5f5;
+  /* background: #f5f5f5; */
   /* border: 1px solid #ddd; */
   border-radius: 18px;
   height: 36px;;
@@ -556,7 +558,7 @@ body {
   border-radius: 32px;
   padding: 3rem 3rem 2.5rem;
   border: 1px solid rgba(99, 102, 241, 0.15);
-  box-shadow: 0 48px 96px -60px rgba(15, 23, 42, 0.55);
+  box-shadow: 0 10px 13px -12px rgba(15, 23, 42, 0.15);
   backdrop-filter: blur(10px);
 }
 
@@ -577,27 +579,28 @@ body {
 
 .conference-badge {
   margin: 1.75rem auto 0;
-  display: inline-flex;
+  /* display: inline-flex; */
   align-items: center;
-  justify-content: center;
+  justify-content: center;  
   gap: 0.75rem;
-  padding: 0.6rem 1.5rem;
-  border-radius: 999px;
-  background: rgba(99, 102, 241, 0.12);
+  padding: 0.6rem 0.6rem;
+  /* border-radius: 999px; */
+  /* background: rgba(99, 102, 241, 0.12); */
   color: #312e81;
   font-weight: 600;
+  font-size: 1rem;
   letter-spacing: 0.08em;
-  border: 1px solid rgba(99, 102, 241, 0.35);
-  box-shadow: 0 22px 50px -34px rgba(79, 70, 229, 0.45);
+  /* border: 1px solid rgba(99, 102, 241, 0.35); */
+  /* box-shadow: 0 22px 50px -34px rgba(79, 70, 229, 0.45); */
 }
 
 .conference-name {
-  font-size: 0.85rem;
+  font-size: 1rem;
   letter-spacing: 0.12em;
 }
 
 .spotlight-tag {
-  font-size: 0.85rem;
+  font-size: 1rem;
   letter-spacing: 0.12em;
   position: relative;
   padding-left: 0.9rem;
@@ -613,7 +616,7 @@ body {
 .hero-subtitle {
   margin: 1rem auto 0;
   font-size: 1.2rem;
-  max-width: 560px;
+  /* max-width: 560px; */
   color: #334155;
   font-weight: 500;
 }
@@ -711,16 +714,15 @@ body {
 }
 
 .tldr-card {
-  margin: 2.5rem auto 0;
+  margin: 2rem auto 0;
   max-width: 720px;
-  background: linear-gradient(120deg, rgba(255, 255, 255, 0.95), rgba(236, 233, 254, 0.95));
+  /* background: linear-gradient(120deg, rgba(255, 255, 255, 0.95), rgba(236, 233, 254, 0.95)); */
   border-radius: 20px;
-  padding: 1.5rem 2rem;
+  padding: 1rem 1.5rem;
   border: 1px solid rgba(79, 70, 229, 0.18);
-  box-shadow: 0 38px 70px -48px rgba(79, 70, 229, 0.6);
-  font-size: 1.05rem;
-  font-style: italic;
-  color: #1e293b;
+  /* box-shadow: 0 38px 70px -48px rgba(79, 70, 229, 0.6); */
+  font-size: 1.1rem;
+  color: #284065;
 }
 
 .tldr-card strong {
@@ -750,14 +752,14 @@ body {
 
 .framework-lead {
   padding-bottom: 1rem;
-  text-align: center;
+  text-align: left;
   color: #334155;
 }
 
 .section-title {
   position: relative;
   display: inline-flex;
-  align-items: center;
+  /* align-items: flex-start; */
   gap: 0.75rem;
   padding-left: 1.4rem;
   color: #1e3a8a;
@@ -787,15 +789,30 @@ body {
 }
 
 .gallery-hero .viewers-container {
-  background: rgba(255, 255, 255, 0.92);
-  border-radius: 24px;
-  padding: 2rem 1.5rem;
-  border: 1px solid rgba(148, 163, 184, 0.25);
-  box-shadow: 0 42px 80px -60px rgba(59, 130, 246, 0.35);
+  /* background: rgba(255, 255, 255, 0.92); */
+  /* border-radius: 24px; */
+  /* padding: 2rem 1.5rem; */
+  /* border: 1px solid rgba(148, 163, 184, 0.25); */
+  /* box-shadow: 0 42px 80px -60px rgba(59, 130, 246, 0.35); */
   min-height: 320px;
+  /* margin-left: -5%; */
+  /* width: 110%; */
 }
 
 .gallery-hero .controls-bar {
+  margin-top: 0.5rem;
+  background: rgba(255, 255, 255, 0.94);
+  border-radius: 18px;
+  padding: 1rem 1.25rem;
+  /* border: 1px solid rgba(148, 163, 184, 0.35); */
+  /* box-shadow: 0 35px 70px -55px rgba(30, 64, 175, 0.4); */
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  justify-content: center;
+}
+
+.vis-card {
   margin-top: 1.5rem;
   background: rgba(255, 255, 255, 0.94);
   border-radius: 18px;
@@ -822,17 +839,14 @@ body {
 .gallery-hero .controls-bar button:focus {
   background: #c7d2fe;
   color: #1d4ed8;
-  transform: translateY(-2px);
+  transform: translateY(-1px);
 }
 
 .gallery-hero .rotate-controls {
   display: flex;
   gap: 0.6rem;
 }
 
-.framework-hero {
-  background: transparent;
-}
 
 .framework-hero .hero-body {
   background: rgba(255, 255, 255, 0.88);
@@ -855,9 +869,13 @@ body {
   background: #0f172a;
   color: #e2e8f0;
   border-radius: 18px;
-  border: 1px solid rgba(148, 163, 184, 0.35);
-  box-shadow: 0 42px 80px -65px rgba(15, 23, 42, 0.85);
   overflow-x: auto;
+  border: 1px solid rgba(148, 163, 184, 0.35);
+}
+
+pre {
+  background: transparent;
+  /* box-shadow: 0 42px 80px -65px rgba(15, 23, 42, 0.85); */
 }
 
 .link-block a.button.is-dark.disabled {
@@ -898,7 +916,7 @@ body {
   }
 
   .conference-badge {
-    font-size: 0.78rem;
+    font-size: 1rem;
     padding: 0.5rem 1.2rem;
     gap: 0.55rem;
   }