| :root { |
| color-scheme: light; |
| font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; |
| background: #f5f7fb; |
| font-synthesis: none; |
| text-rendering: optimizeLegibility; |
| } |
|
|
| * { |
| box-sizing: border-box; |
| } |
|
|
| body { |
| margin: 0; |
| background: |
| radial-gradient(ellipse at 50% 0, rgba(129, 140, 248, 0.1), transparent 42rem), |
| #f5f7fb; |
| color: #17213a; |
| line-height: 1.6; |
| } |
|
|
| #clap-ad-card { |
| display: flex; |
| flex-direction: column; |
| gap: 16px; |
| width: min(1120px, calc(100% - 48px)); |
| margin: 0 auto; |
| padding: 24px 0; |
| color: #17213a; |
| } |
|
|
| #clap-ad-card a { |
| color: #4355b5; |
| text-decoration: none; |
| } |
|
|
| #clap-ad-card a:hover { |
| text-decoration: underline; |
| } |
|
|
| #clap-ad-card h1, |
| #clap-ad-card h2, |
| #clap-ad-card h3, |
| #clap-ad-card p { |
| margin-top: 0; |
| } |
|
|
| #clap-ad-card .card-hero { |
| padding: 36px; |
| border: 1px solid #dce3f6; |
| border-radius: 18px; |
| background: linear-gradient(120deg, #fff 0%, #f0f3ff 100%); |
| box-shadow: 0 8px 28px rgba(37, 54, 120, 0.06); |
| } |
|
|
| #clap-ad-card .card-eyebrow { |
| margin-bottom: 10px; |
| color: #5263b8; |
| font-size: 0.72rem; |
| font-weight: 750; |
| letter-spacing: 0.15em; |
| text-transform: uppercase; |
| } |
|
|
| #clap-ad-card .card-title { |
| margin-bottom: 18px; |
| color: #17213a; |
| font-size: clamp(2.7rem, 8vw, 5rem); |
| font-weight: 800; |
| letter-spacing: -0.07em; |
| line-height: 1.03; |
| } |
|
|
| #clap-ad-card .card-title span { |
| color: #5263c5; |
| } |
|
|
| #clap-ad-card .card-intro { |
| max-width: 700px; |
| margin-bottom: 22px; |
| color: #4a5872; |
| font-size: clamp(1rem, 2.5vw, 1.18rem); |
| line-height: 1.65; |
| } |
|
|
| #clap-ad-card .hero-links { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 10px; |
| } |
|
|
| #clap-ad-card .card-button { |
| display: inline-flex; |
| align-items: center; |
| padding: 10px 15px; |
| border: 1px solid #d4dcf0; |
| border-radius: 8px; |
| background: #fff; |
| color: #35446f; |
| font-size: 0.86rem; |
| font-weight: 700; |
| transition: background-color 120ms ease, transform 120ms ease; |
| } |
|
|
| #clap-ad-card .card-button:hover { |
| background: #f3f5ff; |
| text-decoration: none; |
| transform: translateY(-1px); |
| } |
|
|
| #clap-ad-card .card-button-primary { |
| border-color: #4355b5; |
| background: #4355b5; |
| color: #fff; |
| } |
|
|
| #clap-ad-card .card-button-primary:hover { |
| background: #35469f; |
| color: #fff; |
| } |
|
|
| #clap-ad-card .hero-meta { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 8px; |
| margin-top: 22px; |
| } |
|
|
| #clap-ad-card .meta-pill { |
| padding: 4px 10px; |
| border: 1px solid #dce3f6; |
| border-radius: 999px; |
| background: #fff; |
| color: #596781; |
| font-size: 0.72rem; |
| font-weight: 650; |
| } |
|
|
| #clap-ad-card .card-section, |
| #clap-ad-card .about-card, |
| #clap-ad-card .citation-card { |
| padding: 26px; |
| border: 1px solid #dfe4ef; |
| border-radius: 16px; |
| background: rgba(255, 255, 255, 0.96); |
| box-shadow: 0 5px 20px rgba(37, 54, 120, 0.04); |
| } |
|
|
| #clap-ad-card .card-heading { |
| margin-bottom: 10px; |
| color: #17213a; |
| font-size: clamp(1.55rem, 4vw, 2rem); |
| font-weight: 750; |
| letter-spacing: -0.045em; |
| line-height: 1.2; |
| } |
|
|
| #clap-ad-card .card-muted { |
| margin: 0; |
| color: #68758a; |
| font-size: 0.86rem; |
| } |
|
|
| #clap-ad-card .model-grid, |
| #clap-ad-card .about-grid { |
| display: grid; |
| grid-template-columns: repeat(2, minmax(0, 1fr)); |
| column-gap: 16px; |
| row-gap: 16px; |
| } |
|
|
| #clap-ad-card .model-card { |
| padding: 20px; |
| border: 1px solid #e0e6f1; |
| border-radius: 12px; |
| background: linear-gradient(145deg, #fff 0%, #f8f9fd 100%); |
| } |
|
|
| #clap-ad-card .model-tag { |
| display: inline-block; |
| margin-bottom: 12px; |
| padding: 4px 9px; |
| border-radius: 999px; |
| background: #edf0ff; |
| color: #4c5db4; |
| font-size: 0.68rem; |
| font-weight: 750; |
| letter-spacing: 0.05em; |
| text-transform: uppercase; |
| } |
|
|
| #clap-ad-card .model-card:nth-child(2) .model-tag { |
| background: #eaf3ff; |
| color: #315a91; |
| } |
|
|
| #clap-ad-card .card-subheading { |
| margin-bottom: 8px; |
| color: #17213a; |
| font-size: 1.2rem; |
| font-weight: 750; |
| } |
|
|
| #clap-ad-card .card-copy { |
| min-height: 48px; |
| margin-bottom: 14px; |
| color: #596781; |
| font-size: 0.88rem; |
| line-height: 1.55; |
| } |
|
|
| #clap-ad-card .metric { |
| display: flex; |
| flex-wrap: wrap; |
| align-items: baseline; |
| gap: 8px; |
| padding: 11px 0; |
| margin-bottom: 13px; |
| border-top: 1px solid #e4e8f1; |
| border-bottom: 1px solid #e4e8f1; |
| color: #68758a; |
| font-size: 0.76rem; |
| } |
|
|
| #clap-ad-card .metric strong { |
| color: #253678; |
| font-size: 1.8rem; |
| font-weight: 800; |
| letter-spacing: -0.05em; |
| } |
|
|
| #clap-ad-card .card-link { |
| font-size: 0.83rem; |
| font-weight: 700; |
| } |
|
|
| #clap-ad-card .fine-print { |
| margin: 14px 0 0; |
| color: #68758a; |
| font-size: 0.75rem; |
| line-height: 1.55; |
| } |
|
|
| #clap-ad-card .about-card { |
| padding: 24px; |
| } |
|
|
| #clap-ad-card .citation-card pre { |
| overflow-x: auto; |
| margin: 0; |
| padding: 16px; |
| border: 1px solid #e0e6f1; |
| border-radius: 10px; |
| background: #f5f7fb; |
| color: #26334c; |
| font-size: 0.72rem; |
| line-height: 1.6; |
| } |
|
|
| @media (max-width: 640px) { |
| #clap-ad-card { |
| width: calc(100% - 24px); |
| padding: 12px 0; |
| } |
|
|
| #clap-ad-card .card-hero, |
| #clap-ad-card .card-section, |
| #clap-ad-card .about-card, |
| #clap-ad-card .citation-card { |
| padding: 18px; |
| } |
|
|
| #clap-ad-card .model-grid, |
| #clap-ad-card .about-grid { |
| grid-template-columns: 1fr; |
| } |
|
|
| #clap-ad-card .card-copy { |
| min-height: 0; |
| } |
| } |
|
|
| @media (prefers-reduced-motion: reduce) { |
| #clap-ad-card .card-button { |
| transition: none; |
| } |
| } |
|
|
