/* ============================================================================ cato.css — the shared CATO design system (neutral, white-label, themeable) ---------------------------------------------------------------------------- One stylesheet for every CATO surface. Pages link this and use cato-* classes instead of bespoke inline CSS. Class names are namespaced (cato-) so a page can adopt this incrementally without its legacy styles clashing. WHITE-LABEL: per-academy branding is just the brand tokens below. Override them per deploy/tenant with a small block, e.g.: :root { --cato-brand:#0B6E4F; --cato-brand-dark:#08573e; } or set data-academy on and target [data-academy="ip"] { ... }. Everything else (neutrals, components) stays constant. ============================================================================ */ /* Pretendard — clean Korean + Latin UI font (de-facto modern 한글 UI face). */ @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css"); :root { /* ── Brand (the white-label override surface) ───────────────────────────── */ --cato-brand: #2f5bea; /* default neutral SaaS indigo-blue */ --cato-brand-dark: #1e44c4; --cato-brand-soft: rgba(47, 91, 234, 0.10); --cato-on-brand: #ffffff; /* ── Neutrals ───────────────────────────────────────────────────────────── */ --cato-bg: #f6f7f9; /* app background */ --cato-surface: #ffffff; /* cards, bars */ --cato-surface-2: #fbfcfd; /* subtle raised / hover */ --cato-text: #14171f; --cato-text-dim: #495162; --cato-muted: #8a91a0; --cato-border: #e6e8ec; --cato-border-strong:#d3d7df; /* ── Semantic ───────────────────────────────────────────────────────────── */ --cato-good: #16a34a; --cato-good-soft: rgba(22,163,74,.10); --cato-warn: #d97706; --cato-warn-soft: rgba(217,119,6,.10); --cato-danger: #dc2626; --cato-danger-soft:rgba(220,38,38,.09); --cato-gold: #c9a227; /* ── Shape & depth ──────────────────────────────────────────────────────── */ --cato-radius: 12px; --cato-radius-sm: 8px; --cato-radius-lg: 16px; --cato-shadow-sm: 0 1px 2px rgba(17,20,31,.05), 0 1px 1px rgba(17,20,31,.04); --cato-shadow: 0 4px 14px rgba(17,20,31,.07); --cato-shadow-lg: 0 18px 50px rgba(17,20,31,.16); /* ── Type ───────────────────────────────────────────────────────────────── */ --cato-sans: "Pretendard", "Pretendard Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif; --cato-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; } /* ── Reset / base ─────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } .cato, .cato * { font-family: var(--cato-sans); } body.cato { font-family: var(--cato-sans); background: var(--cato-bg); color: var(--cato-text); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; min-height: 100vh; } /* ── Layout ───────────────────────────────────────────────────────────────── */ .cato-wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 32px 28px 88px; } .cato-wrap--narrow { max-width: 760px; } .cato-row { display: flex; align-items: center; gap: 12px; } .cato-row--between { justify-content: space-between; } .cato-stack { display: flex; flex-direction: column; gap: 14px; } .cato-spread { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .cato-grid { display: grid; gap: 14px; } /* Boot / app reveal (replaces the per-page .boot/.app pattern). */ .cato-boot { min-height: 100vh; display: flex; align-items: center; justify-content: center; color: var(--cato-muted); font-size: .92rem; } .cato-app { display: none; } .cato-app.is-ready { display: block; } /* ── Type scale ───────────────────────────────────────────────────────────── */ .cato-h1 { font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; } .cato-h2 { font-size: 1.18rem; font-weight: 700; letter-spacing: -.01em; } .cato-h3 { font-size: 1rem; font-weight: 700; } .cato-eyebrow { font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--cato-muted); } .cato-sub { color: var(--cato-text-dim); font-size: .9rem; line-height: 1.55; } .cato-muted { color: var(--cato-muted); } /* ── Buttons ──────────────────────────────────────────────────────────────── */ .cato-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-size: .875rem; font-weight: 600; line-height: 1; padding: 10px 16px; border-radius: var(--cato-radius-sm); border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: background .12s, border-color .12s, color .12s, box-shadow .12s, transform .04s; } .cato-btn:active { transform: translateY(.5px); } .cato-btn:disabled { opacity: .5; cursor: not-allowed; } .cato-btn--primary { background: var(--cato-brand); color: var(--cato-on-brand); } .cato-btn--primary:hover:not(:disabled) { background: var(--cato-brand-dark); } .cato-btn--ghost { background: var(--cato-surface); color: var(--cato-text-dim); border-color: var(--cato-border); } .cato-btn--ghost:hover:not(:disabled) { border-color: var(--cato-border-strong); color: var(--cato-text); } .cato-btn--subtle { background: var(--cato-brand-soft); color: var(--cato-brand-dark); } .cato-btn--good { background: var(--cato-good); color: #fff; } .cato-btn--good:hover:not(:disabled) { filter: brightness(.94); } .cato-btn--danger { background: var(--cato-danger); color: #fff; } .cato-btn--danger:hover:not(:disabled) { filter: brightness(.94); } .cato-btn--sm { padding: 7px 12px; font-size: .8rem; } .cato-btn--lg { padding: 12px 20px; font-size: .95rem; } .cato-btn--block { width: 100%; } /* ── Cards ────────────────────────────────────────────────────────────────── */ .cato-card { background: var(--cato-surface); border: 1px solid var(--cato-border); border-radius: var(--cato-radius); box-shadow: var(--cato-shadow-sm); padding: 22px 24px; } .cato-card--pad-lg { padding: 30px 32px; } .cato-card--flush { padding: 0; overflow: hidden; } .cato-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; } /* ── Stats ────────────────────────────────────────────────────────────────── */ .cato-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; } .cato-stat { background: var(--cato-surface); border: 1px solid var(--cato-border); border-radius: var(--cato-radius); padding: 16px 18px; } .cato-stat-num { font-size: 1.7rem; font-weight: 700; letter-spacing: -.02em; line-height: 1; } .cato-stat-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; color: var(--cato-muted); margin-top: 6px; font-weight: 700; } /* ── Tables ───────────────────────────────────────────────────────────────── */ .cato-table-wrap { background: var(--cato-surface); border: 1px solid var(--cato-border); border-radius: var(--cato-radius); overflow: hidden; } .cato-table { width: 100%; border-collapse: collapse; font-size: .9rem; } .cato-table th { text-align: left; font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--cato-muted); padding: 11px 16px; background: var(--cato-bg); border-bottom: 1px solid var(--cato-border); } .cato-table td { padding: 13px 16px; border-bottom: 1px solid var(--cato-border); vertical-align: middle; } .cato-table tbody tr:last-child td { border-bottom: none; } .cato-table tbody tr.is-clickable { cursor: pointer; } .cato-table tbody tr.is-clickable:hover { background: var(--cato-surface-2); } /* ── Forms ────────────────────────────────────────────────────────────────── */ .cato-field { display: flex; flex-direction: column; gap: 6px; } .cato-label { font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--cato-muted); } .cato-input, .cato-select, .cato-textarea { font: inherit; font-size: .9rem; width: 100%; background: var(--cato-surface); color: var(--cato-text); border: 1px solid var(--cato-border); border-radius: var(--cato-radius-sm); padding: 10px 12px; outline: none; transition: border-color .12s, box-shadow .12s; } .cato-input:focus, .cato-select:focus, .cato-textarea:focus { border-color: var(--cato-brand); box-shadow: 0 0 0 3px var(--cato-brand-soft); } .cato-textarea { min-height: 130px; resize: vertical; line-height: 1.5; } /* ── Badges / pills ───────────────────────────────────────────────────────── */ .cato-badge { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 2px 9px; font-size: .72rem; font-weight: 800; border: 1px solid var(--cato-border); background: var(--cato-bg); color: var(--cato-text-dim); } .cato-badge--brand { color: var(--cato-brand-dark); border-color: transparent; background: var(--cato-brand-soft); } .cato-badge--good { color: var(--cato-good); border-color: rgba(22,163,74,.22); background: var(--cato-good-soft); } .cato-badge--warn { color: var(--cato-warn); border-color: rgba(217,119,6,.22); background: var(--cato-warn-soft); } .cato-badge--danger { color: var(--cato-danger); border-color: rgba(220,38,38,.22); background: var(--cato-danger-soft); } .cato-badge--gold { color: #8a6d12; border-color: rgba(201,162,39,.30); background: rgba(201,162,39,.12); } /* ── Empty / loading states ───────────────────────────────────────────────── */ .cato-state { color: var(--cato-muted); text-align: center; padding: 48px 24px; font-size: .92rem; } /* ── Inline alert ─────────────────────────────────────────────────────────── */ .cato-alert { border-radius: var(--cato-radius-sm); padding: 11px 14px; font-size: .85rem; border: 1px solid var(--cato-border); } .cato-alert--danger { color: var(--cato-danger); border-color: rgba(220,38,38,.22); background: var(--cato-danger-soft); } .cato-alert--good { color: var(--cato-good); border-color: rgba(22,163,74,.22); background: var(--cato-good-soft); } .cato-alert[hidden] { display: none; } /* ── Top navigation (shared staff/app shell) ──────────────────────────────── */ .cato-topnav { width: 100%; background: var(--cato-surface); border-bottom: 1px solid var(--cato-border); display: grid; grid-template-columns: minmax(180px,1fr) auto minmax(180px,1fr); align-items: center; gap: 20px; padding: 12px 28px; position: sticky; top: 0; z-index: 100; } .cato-brand { display: inline-flex; align-items: baseline; gap: 8px; text-decoration: none; color: var(--cato-text); font-weight: 800; font-size: 1.05rem; letter-spacing: -.01em; white-space: nowrap; } .cato-brand small { color: var(--cato-muted); font-size: .58rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .cato-navlinks { display: flex; align-items: center; justify-content: center; gap: 2px; white-space: nowrap; } .cato-navitem { border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--cato-text-dim); cursor: pointer; font: inherit; font-size: .85rem; font-weight: 600; padding: 9px 11px; text-decoration: none; } .cato-navitem:hover { color: var(--cato-text); } .cato-navitem.is-active { color: var(--cato-brand); border-bottom-color: var(--cato-brand); } .cato-navend { display: flex; justify-content: flex-end; } /* ── Modal ────────────────────────────────────────────────────────────────── */ .cato-modal { display: none; position: fixed; inset: 0; z-index: 1000; background: rgba(20,23,31,.45); padding: 24px; overflow: auto; } .cato-modal.is-open { display: block; } .cato-modal-shell { max-width: 720px; margin: 6vh auto; background: var(--cato-surface); border: 1px solid var(--cato-border); border-radius: var(--cato-radius-lg); box-shadow: var(--cato-shadow-lg); overflow: hidden; } .cato-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 20px 24px; border-bottom: 1px solid var(--cato-border); } .cato-modal-body { padding: 22px 24px; } /* ── Toast ────────────────────────────────────────────────────────────────── */ .cato-toast { position: fixed; bottom: 22px; right: 22px; background: var(--cato-text); color: #fff; padding: 11px 16px; border-radius: var(--cato-radius-sm); font-size: .85rem; z-index: 1200; box-shadow: var(--cato-shadow-lg); opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s; pointer-events: none; max-width: 340px; } .cato-toast.is-show { opacity: 1; transform: translateY(0); } /* ── Auth / centered card (login, reset) ──────────────────────────────────── */ .cato-auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--cato-bg); } .cato-auth-card { width: 100%; max-width: 400px; background: var(--cato-surface); border: 1px solid var(--cato-border); border-radius: var(--cato-radius-lg); box-shadow: var(--cato-shadow); padding: 34px 32px; } /* ── Utilities ────────────────────────────────────────────────────────────── */ .cato-hr { height: 1px; background: var(--cato-border); border: 0; margin: 18px 0; } .cato-text-center { text-align: center; } .cato-mt-sm { margin-top: 8px; } .cato-mt { margin-top: 16px; } .cato-mt-lg { margin-top: 28px; } .cato-link { color: var(--cato-brand-dark); text-decoration: none; font-weight: 600; } .cato-link:hover { text-decoration: underline; } @media (max-width: 860px) { .cato-topnav { grid-template-columns: 1fr; gap: 10px; } .cato-navlinks { justify-content: flex-start; overflow-x: auto; } .cato-navend { justify-content: flex-start; } .cato-wrap { padding: 22px 16px 64px; } }