/* ========================================================= style.css — Clean, modern styling for AI Terms Glossary Designed for readability, accessibility, and easy theming ========================================================= */ /* ---------- CSS Variables (Theme) ---------- */ :root { --bg: #0f1221; --bg-accent-1: rgba(115, 251, 211, 0.08); --bg-accent-2: rgba(138, 125, 255, 0.12); --surface: #171a2c; --text: #e6e9f2; --text-muted: #b7bed3; --heading: #ffffff; --accent: #73fbd3; --accent-2: #8a7dff; --border: rgba(255, 255, 255, 0.08); --shadow: 0 10px 30px rgba(0, 0, 0, 0.25); --radius-lg: 16px; --radius-md: 10px; --radius-sm: 6px; --container: 960px; } /* ---------- Reset & Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } html, body { margin: 0; padding: 0; } body { color: var(--text); background: radial-gradient(1200px 600px at 100% 0%, var(--bg-accent-2), transparent 60%), radial-gradient(1000px 500px at 0% 100%, var(--bg-accent-1), transparent 60%), var(--bg); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif; line-height: 1.7; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ---------- Layout ---------- */ .container { max-width: var(--container); margin: 0 auto; padding: 32px 20px 80px; } article { background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01)); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px 24px; box-shadow: var(--shadow); } /* ---------- Typography ---------- */ h1, h2, h3 { color: var(--heading); line-height: 1.25; margin: 0.6em 0 0.35em; } header h1 { font-size: clamp(28px, 4vw, 44px); background: linear-gradient(90deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } header p { margin: 0 0 30px 0; color: var(--text-muted); font-size: clamp(14px, 1.8vw, 18px); } h2 { font-size: clamp(24px, 3vw, 28px); } h3 { font-size: clamp(18px, 2.4vw, 22px); } p { margin: 0 0 1em; } /* ---------- Links & Buttons ---------- */ a { color: var(--accent); text-underline-offset: 2px; } a:hover { text-decoration: underline; } a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); } /* Utility button style (optional) */ .button { display: inline-block; padding: 12px 18px; border-radius: 999px; background: #ffffff; color: #1b1b1b; text-decoration: none; font-weight: 600; transition: transform 150ms ease, box-shadow 150ms ease; box-shadow: 0 6px 20px rgba(0,0,0,0.18); } .button:hover { transform: translateY(-1px); } .button:active { transform: translateY(0); } /* ---------- Lists ---------- */ ul, ol { padding-left: 1.2rem; } li { margin: 6px 0; } /* ---------- Callouts / Notes ---------- */ .note { border-left: 4px solid var(--accent); background: rgba(115, 251, 211, 0.08); padding: 14px 16px; border-radius: var(--radius-md); margin: 20px 0; color: #eafbf6; } /* ---------- Code & Preformatted ---------- */ code, kbd, samp, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; } code { background: #0d1020; border: 1px solid var(--border); padding: 0.15rem 0.4rem; border-radius: var(--radius-sm); } pre { background: #0d1020; border: 1px solid var(--border); padding: 1rem; border-radius: var(--radius-md); overflow-x: auto; } /* ---------- Images & Media ---------- */ img, video, canvas, svg { max-width: 100%; height: auto; display: block; } /* ---------- Tables ---------- */ table { width: 100%; border-collapse: collapse; margin: 1rem 0; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; } th, td { padding: 10px 12px; border-bottom: 1px solid var(--border); } th { text-align: left; color: var(--heading); background: rgba(255, 255, 255, 0.04); } /* ---------- Footer ---------- */ footer { margin-top: 40px; font-size: 14px; color: var(--text-muted); text-align: center; } /* ---------- Utilities ---------- */ .center { text-align: center; } .muted { color: var(--text-muted); } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow); } /* ---------- Motion & Accessibility ---------- */ @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } } /* ---------- Responsive Tweaks ---------- */ @media (max-width: 640px) { .container { padding: 24px 16px 56px; } article { padding: 22px 18px; } } /* ---------- Print Styles ---------- */ @media print { :root { --bg: #ffffff; --text: #111111; --text-muted: #444444; --heading: #000000; --accent: #0066cc; --border: rgba(0, 0, 0, 0.12); } body { background: #ffffff !important; color: var(--text); } .container { padding: 0; } article, .card, .note { box-shadow: none !important; background: #ffffff !important; border-color: var(--border) !important; } a { color: #0066cc; text-decoration: underline; } }

/* ticker */
.ticker{
  width:33%;
  min-width: 320px;
  max-width: 480px;
  margin: 0 auto 14px;
  height: 42px;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  border:1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  overflow:hidden;
  position:relative;
  display:flex; align-items:center;
}
.ticker::before, .ticker::after{
  content:"";
  position:absolute; top:0; width:28px; height:100%;
  pointer-events:none;
}
.ticker::before{
  left:0;
  background: linear-gradient(90deg, var(--bg), transparent);
  opacity:.55;
}
.ticker::after{
  right:0;
  background: linear-gradient(270deg, var(--bg), transparent);
  opacity:.55;
}
.ticker-track{
  display:flex; align-items:center; gap:24px;
  white-space:nowrap;
  will-change: transform;
  padding: 0 18px;
}
.ticker-item{
  color: var(--heading);
  font-weight: 700;
  letter-spacing: .2px;
}
.ticker-sep{ opacity:.55; margin: 0 6px; }

.ticker:hover{ cursor: pointer; }

/* pixel explosion particles */
.ticker-particle{
  position:absolute;
  width:3px; height:3px;
  border-radius:1px;
  background: var(--accent);
  animation: ticker-pop 720ms ease-out forwards;
  opacity: 0.95;
}
.ticker-particle.alt{ background: var(--accent-2); }
@keyframes ticker-pop{
  0%{ transform: translate(0,0) scale(1); opacity:1; }
  100%{ transform: translate(var(--tx), var(--ty)) scale(.8); opacity:0; }
}