Add styles for icon modal and famous cards

Author: Sumit6258

css/styles.css

@@ -334,3 +334,145 @@ footer{text-align:center;padding:4rem 2rem;border-top:1px solid var(--border);
   .famous-grid{grid-template-columns:1fr}
   .hero-cta-row{flex-direction:column;align-items:center}
 }
+
+/* ═══════════════════════════════════════════
+   ICON MODAL + EXPANDED FAMOUS CARDS
+   ═══════════════════════════════════════════ */
+
+/* Expand hint badge */
+.card-expand-hint {
+  position:absolute;top:0.6rem;right:0.6rem;
+  font-family:var(--font-mono);font-size:0.6rem;letter-spacing:0.06em;
+  color:var(--blue);opacity:0;transition:opacity 0.2s;
+  background:rgba(0,200,255,0.08);border:1px solid rgba(0,200,255,0.2);
+  padding:0.2rem 0.45rem;border-radius:3px;pointer-events:none;
+}
+.famous-card:hover .card-expand-hint { opacity:1; }
+.famous-card { position:relative; cursor:pointer; transition:all 0.3s; }
+.famous-card:hover {
+  border-color:rgba(0,200,255,0.4);
+  transform:translateY(-6px) scale(1.01);
+  box-shadow:0 28px 60px rgba(0,0,0,0.5), 0 0 50px rgba(0,200,255,0.08);
+}
+
+/* 8-column grid (2×4 or auto-fit) */
+.famous-grid {
+  display:grid;
+  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
+  gap:1.25rem;
+}
+
+/* ── ICON MODAL ─────────────────────────── */
+.icon-modal-overlay {
+  position:fixed;inset:0;z-index:2500;
+  background:rgba(3,3,7,0.92);
+  backdrop-filter:blur(20px);
+  display:flex;align-items:center;justify-content:center;
+  opacity:0;pointer-events:none;transition:opacity 0.3s;
+}
+.icon-modal-overlay.active { opacity:1; pointer-events:all; }
+
+.icon-modal {
+  background:var(--surface);
+  border:1px solid rgba(0,200,255,0.2);
+  border-radius:14px;
+  width:min(900px,96vw);
+  max-height:92vh;
+  overflow-y:auto;
+  padding:2rem;
+  box-shadow:0 40px 100px rgba(0,0,0,0.6),0 0 60px rgba(0,200,255,0.08);
+  transform:scale(0.95);
+  transition:transform 0.3s;
+}
+.icon-modal-overlay.active .icon-modal { transform:scale(1); }
+
+.icon-modal-header {
+  display:flex;align-items:center;justify-content:space-between;
+  margin-bottom:1rem;
+}
+.icon-modal-header h2 {
+  font-family:var(--font-display);
+  font-size:clamp(1.3rem,3vw,2rem);
+  color:var(--blue);letter-spacing:0.03em;
+}
+.icon-modal-header button {
+  background:none;border:1px solid rgba(255,255,255,0.15);
+  color:var(--text2);width:32px;height:32px;border-radius:6px;
+  cursor:pointer;font-size:1rem;transition:all 0.2s;
+  display:flex;align-items:center;justify-content:center;flex-shrink:0;
+}
+.icon-modal-header button:hover { background:rgba(255,59,48,0.15);border-color:var(--red);color:var(--red); }
+
+.icon-modal-formula {
+  font-size:clamp(0.9rem,2vw,1.25rem);
+  color:var(--gold);
+  text-align:center;
+  margin-bottom:1.25rem;
+  padding:0.75rem;
+  background:rgba(255,215,0,0.04);
+  border-radius:6px;
+  border:1px solid rgba(255,215,0,0.1);
+  filter:drop-shadow(0 0 15px rgba(255,215,0,0.2));
+}
+
+#iconModalCanvas {
+  width:100%;
+  height:420px;
+  display:block;
+  background:#030307;
+  border-radius:8px;
+  border:1px solid var(--border);
+  margin-bottom:1.25rem;
+}
+
+.icon-modal-desc {
+  font-size:0.95rem;color:var(--text2);line-height:1.7;
+}
+.icon-modal-desc p { margin-bottom:0.6rem; }
+.icon-modal-desc strong { color:var(--blue); }
+
+/* ── FOOTER CREDIT ──────────────────────── */
+.footer-credit {
+  margin-top:1.25rem;
+  font-family:var(--font-mono);
+  font-size:0.78rem;
+  color:var(--text3);
+  display:flex;align-items:center;justify-content:center;
+  flex-wrap:wrap;gap:0.35rem;
+}
+.footer-heart {
+  color:#ff3b30;
+  animation:heartbeat 1.4s ease-in-out infinite;
+  display:inline-block;font-size:1rem;
+}
+@keyframes heartbeat {
+  0%,100%{transform:scale(1);}
+  14%{transform:scale(1.25);}
+  28%{transform:scale(1);}
+  42%{transform:scale(1.15);}
+  70%{transform:scale(1);}
+}
+.footer-math-love {
+  color:var(--purple);font-size:0.72rem;
+}
+.footer-author {
+  display:inline-flex;align-items:center;gap:0.35rem;
+  color:var(--blue);text-decoration:none;
+  border:1px solid rgba(0,200,255,0.25);
+  padding:0.2rem 0.55rem;border-radius:20px;
+  background:rgba(0,200,255,0.05);
+  transition:all 0.25s;
+}
+.footer-author:hover {
+  background:rgba(0,200,255,0.12);
+  border-color:rgba(0,200,255,0.6);
+  box-shadow:0 0 18px rgba(0,200,255,0.25);
+  color:#fff;
+}
+.footer-author-name { font-weight:700;letter-spacing:0.06em; }
+.footer-linkedin { opacity:0.8; }
+
+@media(max-width:600px){
+  #iconModalCanvas { height:260px; }
+  .icon-modal { padding:1.25rem; }
+}