/* ========================================================================== OpenAPI WP — Frontend Styles Shared across single-openapi_spec.php and archive-openapi_spec.php Renderer: Scalar API Reference (https://scalar.com) ========================================================================== */ /* ── Reset / Base ──────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } /* Ensure our full-width single page fills the viewport */ .openapiwp-single-body, .openapiwp-archive-body { margin: 0; padding: 0; background: #fff; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, sans-serif; } /* ── Site Header ───────────────────────────────────────────────────────── */ .openapiwp-site-header { position: sticky; top: 0; z-index: 9999; background: #0f172a; border-bottom: 1px solid #1e293b; height: 52px; display: flex; align-items: center; } .openapiwp-site-header__inner { width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .openapiwp-site-header__logo { font-size: 15px; font-weight: 700; color: #f8fafc; text-decoration: none; letter-spacing: -0.2px; } .openapiwp-site-header__logo:hover { color: #7dd3fc; } .openapiwp-site-header__nav a { font-size: 13px; font-weight: 500; color: #94a3b8; text-decoration: none; transition: color 0.15s; } .openapiwp-site-header__nav a:hover { color: #f8fafc; } /* ── Single spec page — Scalar viewer container ─────────────────────────── */ .openapiwp-main { min-height: calc(100vh - 52px); } /* * Scalar renders a full-page app starting from . Our sticky header is * 52px tall. We push Scalar's root element down so it doesn't hide under the * header. Scalar exposes .scalar-app as the top-level container. */ .openapiwp-single-body .scalar-app, .openapiwp-single-body #scalar-client { padding-top: 52px !important; min-height: calc(100vh - 52px); } /* Scalar's internal sticky header should sit below our site header */ .openapiwp-single-body .scalar-header { top: 52px !important; } /* ── Empty state (shown when no spec is set) ───────────────────────────── */ .openapiwp-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: calc(100vh - 52px); text-align: center; padding: 48px 24px; color: #475569; } .openapiwp-empty-state__icon { font-size: 64px; line-height: 1; margin-bottom: 24px; display: block; } .openapiwp-empty-state h1, .openapiwp-empty-state h2 { font-size: 28px; font-weight: 700; color: #0f172a; margin: 0 0 12px; } .openapiwp-empty-state p { font-size: 16px; max-width: 480px; color: #64748b; margin: 0 0 28px; line-height: 1.7; } /* ── Primary Button ────────────────────────────────────────────────────── */ .openapiwp-btn { display: inline-flex; align-items: center; gap: 6px; padding: 11px 24px; background: #0073aa; color: #fff; font-size: 14px; font-weight: 600; border-radius: 8px; text-decoration: none; transition: background 0.2s, transform 0.15s; box-shadow: 0 2px 8px rgba(0, 115, 170, 0.35); } .openapiwp-btn:hover { background: #005d8c; transform: translateY(-1px); color: #fff; } /* ══════════════════════════════════════════════════════════════════════════ Archive Page ══════════════════════════════════════════════════════════════════════════ */ .openapiwp-archive-main { min-height: calc(100vh - 52px); background: #f8fafc; } /* ── Hero ──────────────────────────────────────────────────────────────── */ .openapiwp-archive-hero { background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 60%, #0c4a6e 100%); padding: 72px 24px 80px; text-align: center; position: relative; overflow: hidden; } .openapiwp-archive-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 50% at 20% 40%, rgba(125, 211, 252, 0.12) 0%, transparent 70%), radial-gradient(ellipse 40% 40% at 80% 60%, rgba(99, 102, 241, 0.12) 0%, transparent 70%); pointer-events: none; } .openapiwp-archive-hero__badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(125, 211, 252, 0.12); border: 1px solid rgba(125, 211, 252, 0.3); color: #7dd3fc; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; padding: 5px 14px; border-radius: 100px; margin-bottom: 20px; position: relative; z-index: 1; } .openapiwp-archive-hero__title { font-size: clamp(28px, 5vw, 48px); font-weight: 800; color: #f8fafc; margin: 0 0 16px; letter-spacing: -0.5px; position: relative; z-index: 1; } .openapiwp-archive-hero__subtitle { font-size: 17px; color: #94a3b8; margin: 0; max-width: 520px; margin-inline: auto; line-height: 1.7; position: relative; z-index: 1; } /* ── Card Grid ─────────────────────────────────────────────────────────── */ .openapiwp-archive-container { max-width: 1200px; margin: 0 auto; padding: 56px 24px 80px; } .openapiwp-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; } /* ── Card ──────────────────────────────────────────────────────────────── */ .openapiwp-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; display: flex; flex-direction: column; overflow: hidden; transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s; } .openapiwp-card:hover { box-shadow: 0 8px 32px rgba(15, 23, 42, 0.12); transform: translateY(-3px); border-color: #bfdbfe; } .openapiwp-card__header { background: linear-gradient(135deg, #f0f9ff, #eff6ff); padding: 20px 20px 16px; display: flex; align-items: flex-start; justify-content: space-between; } .openapiwp-card__icon { font-size: 28px; line-height: 1; } /* Badges */ .openapiwp-card__badge { display: inline-flex; align-items: center; font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 3px 10px; border-radius: 100px; } .openapiwp-card__badge--file { background: #dcfce7; color: #166534; } .openapiwp-card__badge--inline { background: #dbeafe; color: #1e40af; } .openapiwp-card__badge--empty { background: #fef9c3; color: #92400e; } .openapiwp-card__body { flex: 1 1 auto; padding: 18px 20px 10px; } .openapiwp-card__title { font-size: 17px; font-weight: 700; color: #0f172a; margin: 0 0 10px; line-height: 1.35; } .openapiwp-card__title a { color: inherit; text-decoration: none; } .openapiwp-card__title a:hover { color: #0073aa; } .openapiwp-card__meta { font-size: 12px; color: #94a3b8; margin: 0; } .openapiwp-card__footer { padding: 14px 20px 20px; border-top: 1px solid #f1f5f9; } .openapiwp-card__link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: #0073aa; text-decoration: none; transition: gap 0.15s, color 0.15s; } .openapiwp-card__link:hover { color: #005d8c; gap: 10px; } /* ── Pagination ────────────────────────────────────────────────────────── */ .openapiwp-archive-container .navigation { margin-top: 48px; text-align: center; } .openapiwp-archive-container .page-numbers { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; font-size: 13px; font-weight: 600; color: #475569; text-decoration: none; transition: background 0.15s, color 0.15s; margin: 0 2px; } .openapiwp-archive-container .page-numbers:hover, .openapiwp-archive-container .page-numbers.current { background: #0073aa; color: #fff; } /* ── Responsive ────────────────────────────────────────────────────────── */ @media (max-width: 600px) { .openapiwp-archive-hero { padding: 48px 16px 56px; } .openapiwp-archive-container { padding: 36px 16px 56px; } .openapiwp-card-grid { grid-template-columns: 1fr; } }