/* ═══════════════════════════════════════════════════════════════════════ SHULEREPORT DESIGN SYSTEM — sr-theme.css v2.0 ─────────────────────────────────────────────────────────────────────── Blue + Orange editorial theme. No gradients, no blur, no glassmorphism. Fonts : Newsreader (headings) · Roboto (UI / body) Palette: #1E9BE9 blue · #D98A32 orange · #0B0B0B dark · #EDEDED light Usage : Add in your layout's . All classes are prefixed with "sr-". ═══════════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════════════ 1. DESIGN TOKENS ══════════════════════════════════════════════════════════════════════ */ :root { /* — Color scale — */ --sr-black : #0B0B0B; --sr-white : #FFFFFF; --sr-gray-50 : #F8F9FA; --sr-gray-100 : #F0F0F0; --sr-gray-200 : #EDEDED; --sr-gray-300 : #D9D9D9; --sr-gray-400 : #ABABAB; --sr-gray-500 : #828282; --sr-gray-600 : #5C5C5C; --sr-gray-700 : #404040; --sr-gray-800 : #2A2A2A; --sr-gray-900 : #1A1A1A; /* — Brand palette — */ --sr-blue : #1E9BE9; --sr-blue-bg : #EBF6FD; --sr-orange : #D98A32; --sr-orange-bg : #FDF4E8; /* — Status colors — */ --sr-red : #DC2626; --sr-red-bg : #FEF2F2; --sr-green : #16A34A; --sr-green-bg : #F0FDF4; --sr-amber : #D97706; --sr-amber-bg : #FFFBEB; /* — Semantic aliases — */ --sr-surface : var(--sr-white); --sr-surface-muted : var(--sr-gray-50); --sr-surface-dark : var(--sr-black); --sr-text : #222222; --sr-text-muted : var(--sr-gray-600); --sr-text-faint : var(--sr-gray-400); --sr-text-inverse : var(--sr-white); --sr-border-color : var(--sr-gray-200); --sr-border-strong : var(--sr-black); --sr-primary : var(--sr-blue); --sr-primary-bg : var(--sr-blue-bg); --sr-accent : var(--sr-orange); --sr-accent-bg : var(--sr-orange-bg); /* — Typography — */ --sr-font-heading : 'Newsreader', Georgia, serif; --sr-font-body : 'Roboto', system-ui, -apple-system, sans-serif; /* — Spacing scale (base-4) — */ --sr-s1 : 4px; --sr-s2 : 8px; --sr-s3 : 12px; --sr-s4 : 16px; --sr-s5 : 20px; --sr-s6 : 24px; --sr-s8 : 32px; --sr-s10 : 40px; --sr-s12 : 48px; --sr-s16 : 64px; /* — Border & radius — */ --sr-border-width : 1.5px; --sr-radius-sm : 8px; --sr-radius : 20px; --sr-radius-md : 14px; --sr-radius-lg : 20px; --sr-radius-xl : 24px; --sr-radius-full : 9999px; /* — Shadow — */ --sr-shadow-sm : 0 1px 3px rgba(11,11,11,.08); --sr-shadow : 0 4px 12px rgba(11,11,11,.08); --sr-shadow-lg : 0 12px 32px rgba(11,11,11,.1); /* — Transitions — */ --sr-t : 160ms ease; --sr-t-fast : 120ms ease; } /* ══════════════════════════════════════════════════════════════════════ 2. KEYFRAMES ══════════════════════════════════════════════════════════════════════ */ @keyframes sr-spin { to { transform: rotate(360deg); } } @keyframes sr-shake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } } @keyframes sr-pulse-ring { 0%,100% { box-shadow: 0 0 0 0 rgba(30,155,233,.5); } 50% { box-shadow: 0 0 0 6px rgba(30,155,233,0); } } @keyframes sr-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* ══════════════════════════════════════════════════════════════════════ 3. TYPOGRAPHY ══════════════════════════════════════════════════════════════════════ */ /* Heading styles */ .sr-heading { font-family: var(--sr-font-heading); font-weight: 600; line-height: 1.1; letter-spacing: -.025em; color: var(--sr-text); } .sr-heading--xl { font-size: clamp(40px, 5vw, 72px); font-weight: 700; } .sr-heading--lg { font-size: clamp(28px, 3vw, 44px); } .sr-heading--md { font-size: clamp(20px, 2vw, 28px); } .sr-heading--sm { font-size: 18px; } .sr-heading--em { font-style: italic; font-weight: 400; } /* Eyebrow / overline */ .sr-eyebrow { font-family: var(--sr-font-body); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--sr-text-faint); display: flex; align-items: center; gap: var(--sr-s2); } .sr-eyebrow::before { content: ''; display: inline-block; width: 20px; height: 1px; background: var(--sr-gray-600); flex-shrink: 0; } /* Body / subtext */ .sr-body { font-family: var(--sr-font-body); font-size: 15px; line-height: 1.65; color: var(--sr-text); } .sr-subtext { font-family: var(--sr-font-body); font-size: 14px; line-height: 1.55; color: var(--sr-text-muted); font-weight: 300; } .sr-caption { font-family: var(--sr-font-body); font-size: 12px; line-height: 1.5; color: var(--sr-text-faint); font-weight: 400; } /* ══════════════════════════════════════════════════════════════════════ 4. BUTTONS ══════════════════════════════════════════════════════════════════════ */ .sr-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sr-s2); font-family: var(--sr-font-body); font-weight: 500; letter-spacing: .01em; border-radius: var(--sr-radius); cursor: pointer; transition: background var(--sr-t), color var(--sr-t), border-color var(--sr-t), opacity var(--sr-t); white-space: nowrap; text-decoration: none; -webkit-appearance: none; } .sr-btn:focus-visible { outline: 2px solid var(--sr-blue); outline-offset: 3px; } .sr-btn:disabled, .sr-btn--loading { opacity: .45; cursor: not-allowed; pointer-events: none; } /* Sizes */ .sr-btn--sm { font-size: 13px; padding: 8px 16px; } .sr-btn--md { font-size: 15px; padding: 13px 22px; } .sr-btn--lg { font-size: 16px; padding: 15px 28px; } /* Primary — solid blue */ .sr-btn--primary { background: var(--sr-blue); color: var(--sr-white); border: var(--sr-border-width) solid var(--sr-blue); } .sr-btn--primary:hover:not(:disabled) { background: #1589d4; border-color: #1589d4; color: var(--sr-white); } /* Outline — white with blue border */ .sr-btn--outline { background: var(--sr-white); color: var(--sr-blue); border: var(--sr-border-width) solid var(--sr-blue); } .sr-btn--outline:hover:not(:disabled) { background: var(--sr-blue); color: var(--sr-white); } /* Ghost — transparent */ .sr-btn--ghost { background: transparent; color: var(--sr-text-muted); border: var(--sr-border-width) solid transparent; } .sr-btn--ghost:hover:not(:disabled) { background: var(--sr-blue-bg); color: var(--sr-blue); } /* Danger */ .sr-btn--danger { background: var(--sr-red); color: var(--sr-white); border: var(--sr-border-width) solid var(--sr-red); } .sr-btn--danger:hover:not(:disabled) { background: var(--sr-white); color: var(--sr-red); } /* Full width modifier */ .sr-btn--full { width: 100%; } /* Loading spinner inside button */ .sr-btn .sr-spinner { display: none; } .sr-btn--loading .sr-spinner { display: block; } .sr-btn--loading .sr-btn__arrow { display: none; } /* ══════════════════════════════════════════════════════════════════════ 5. SPINNER ══════════════════════════════════════════════════════════════════════ */ .sr-spinner { width: 15px; height: 15px; border: 2px solid rgba(255,255,255,.25); border-top-color: currentColor; border-radius: 50%; animation: sr-spin .65s linear infinite; flex-shrink: 0; } .sr-btn--outline .sr-spinner, .sr-btn--ghost .sr-spinner { border-color: rgba(30,155,233,.2); border-top-color: var(--sr-blue); } /* ══════════════════════════════════════════════════════════════════════ 6. FORM ELEMENTS ══════════════════════════════════════════════════════════════════════ */ /* Field wrapper */ .sr-field { margin-bottom: var(--sr-s5); } /* Label */ .sr-label { display: block; font-family: var(--sr-font-body); font-size: 12px; font-weight: 500; color: var(--sr-text-muted); letter-spacing: .07em; text-transform: uppercase; margin-bottom: var(--sr-s2); } /* Input wrapper (for icon support) */ .sr-input-wrap { position: relative; display: flex; align-items: center; } /* Leading icon */ .sr-input-icon { position: absolute; left: 14px; color: var(--sr-gray-400); display: flex; align-items: center; pointer-events: none; transition: color var(--sr-t-fast); } .sr-input-wrap:focus-within .sr-input-icon { color: var(--sr-gray-600); } /* Input */ .sr-input { display: block; width: 100%; background: var(--sr-white); border: var(--sr-border-width) solid var(--sr-border-color); border-radius: var(--sr-radius); padding: 12px 16px; font-size: 15px; font-family: var(--sr-font-body); font-weight: 400; color: var(--sr-text); outline: none; transition: border-color var(--sr-t), box-shadow var(--sr-t); -webkit-appearance: none; } .sr-input::placeholder { color: var(--sr-gray-400); } .sr-input:hover:not(:focus) { border-color: var(--sr-gray-400); } .sr-input:focus { border-color: var(--sr-blue); box-shadow: 0 0 0 3px rgba(30,155,233,.12); } /* Input with leading icon */ .sr-input-wrap .sr-input { padding-left: 42px; } /* Input with trailing element */ .sr-input--has-trail { padding-right: 46px; } /* Error state */ .sr-input--error, .sr-input.is-invalid { border-color: var(--sr-red) !important; animation: sr-shake .36s ease; } .sr-input--error:focus, .sr-input.is-invalid:focus { box-shadow: 0 0 0 3px rgba(220,38,38,.1) !important; } /* Trailing toggle (password eye) */ .sr-input-trail { position: absolute; right: 12px; background: none; border: none; padding: 6px; cursor: pointer; color: var(--sr-gray-400); display: flex; align-items: center; border-radius: var(--sr-radius-sm); transition: color var(--sr-t-fast); } .sr-input-trail:hover { color: var(--sr-blue); } .sr-input-trail:focus-visible { outline: 2px solid var(--sr-blue); outline-offset: 1px; } /* Textarea */ .sr-textarea { resize: vertical; min-height: 100px; } /* Select */ .sr-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2352525B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; } /* Error message */ .sr-error { display: flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 12.5px; color: var(--sr-red); font-family: var(--sr-font-body); } /* Hint text */ .sr-hint { margin-top: 5px; font-size: 12.5px; color: var(--sr-text-faint); font-family: var(--sr-font-body); } /* Checkbox row */ .sr-check { display: flex; align-items: center; gap: var(--sr-s2); cursor: pointer; user-select: none; } .sr-check input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; background: var(--sr-white); border: var(--sr-border-width) solid var(--sr-gray-300); border-radius: var(--sr-radius-sm); cursor: pointer; position: relative; flex-shrink: 0; transition: background var(--sr-t-fast), border-color var(--sr-t-fast); } .sr-check input[type="checkbox"]:checked { background: var(--sr-blue); border-color: var(--sr-blue); } .sr-check input[type="checkbox"]:checked::after { content: ''; position: absolute; left: 3.5px; top: 1px; width: 5px; height: 9px; border: 2px solid var(--sr-white); border-top: none; border-left: none; transform: rotate(45deg); } .sr-check input[type="checkbox"]:focus-visible { outline: 2px solid var(--sr-blue); outline-offset: 2px; } .sr-check__label { font-size: 13.5px; color: var(--sr-text-muted); font-family: var(--sr-font-body); } /* ══════════════════════════════════════════════════════════════════════ 7. CARDS ══════════════════════════════════════════════════════════════════════ */ .sr-card { background: var(--sr-white); border: 1px solid var(--sr-border-color); border-radius: var(--sr-radius-lg); padding: var(--sr-s8); } /* Padding modifiers */ .sr-card--sm { padding: var(--sr-s5); } .sr-card--lg { padding: var(--sr-s12); } /* Dark card */ .sr-card--dark { background: var(--sr-black); border-color: var(--sr-gray-800); color: var(--sr-white); } /* Subtle shadow */ .sr-card--shadow { box-shadow: var(--sr-shadow); border-color: transparent; } /* Bordered emphasis */ .sr-card--strong { border-color: var(--sr-black); border-width: 2px; } /* Card subparts */ .sr-card__header { padding-bottom: var(--sr-s6); border-bottom: 1px solid var(--sr-border-color); margin-bottom: var(--sr-s6); } .sr-card--dark .sr-card__header { border-color: var(--sr-gray-800); } .sr-card__title { font-family: var(--sr-font-heading); font-size: 18px; font-weight: 600; letter-spacing: -.015em; color: var(--sr-text); } .sr-card--dark .sr-card__title { color: var(--sr-white); } .sr-card__footer { padding-top: var(--sr-s6); border-top: 1px solid var(--sr-border-color); margin-top: var(--sr-s6); } .sr-card--dark .sr-card__footer { border-color: var(--sr-gray-800); } /* ══════════════════════════════════════════════════════════════════════ 8. BADGES ══════════════════════════════════════════════════════════════════════ */ .sr-badge { display: inline-flex; align-items: center; gap: var(--sr-s2); font-family: var(--sr-font-body); font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; border-radius: var(--sr-radius-full); padding: 5px 14px; border: 1px solid transparent; } /* Variants */ .sr-badge--default { background: var(--sr-gray-100); color: var(--sr-gray-600); border-color: var(--sr-gray-200); } .sr-badge--dark { background: var(--sr-black); color: var(--sr-white); } .sr-badge--outline { background: transparent; color: var(--sr-text-muted); border-color: var(--sr-gray-300); } .sr-badge--outline-dark { background: transparent; color: var(--sr-white); border-color: var(--sr-gray-700); } .sr-badge--success { background: var(--sr-green-bg); color: var(--sr-green); border-color: rgba(22,163,74,.2); } .sr-badge--warning { background: var(--sr-amber-bg); color: var(--sr-amber); border-color: rgba(217,119,6,.2); } .sr-badge--danger { background: var(--sr-red-bg); color: var(--sr-red); border-color: rgba(220,38,38,.2); } /* Pulsing live dot */ .sr-badge__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: sr-pulse-ring 2s ease-in-out infinite; flex-shrink: 0; } /* ══════════════════════════════════════════════════════════════════════ 9. DIVIDERS ══════════════════════════════════════════════════════════════════════ */ .sr-divider { height: 1px; background: var(--sr-border-color); border: none; margin: var(--sr-s6) 0; } .sr-divider--dark { background: var(--sr-gray-800); } /* ══════════════════════════════════════════════════════════════════════ 10. STAT BLOCK ══════════════════════════════════════════════════════════════════════ */ .sr-stats { display: flex; gap: 0; flex-wrap: wrap; } .sr-stat { display: flex; flex-direction: column; gap: 4px; padding-right: var(--sr-s8); } .sr-stat + .sr-stat { padding-left: var(--sr-s8); border-left: 1px solid var(--sr-border-color); } .sr-stats--dark .sr-stat + .sr-stat { border-color: var(--sr-gray-800); } .sr-stat__value { font-family: var(--sr-font-heading); font-size: 26px; font-weight: 600; letter-spacing: -.02em; line-height: 1; color: var(--sr-text); } .sr-stats--dark .sr-stat__value { color: var(--sr-white); } .sr-stat__label { font-family: var(--sr-font-body); font-size: 11px; font-weight: 400; text-transform: uppercase; letter-spacing: .09em; color: var(--sr-text-faint); } .sr-stats--dark .sr-stat__label { color: var(--sr-gray-600); } /* ══════════════════════════════════════════════════════════════════════ 11. PANEL LAYOUTS (split-screen) ══════════════════════════════════════════════════════════════════════ */ .sr-split { display: flex; min-height: 100vh; } .sr-split__dark { background: var(--sr-black); flex: 1; display: flex; flex-direction: column; justify-content: space-between; padding: var(--sr-s12) 60px; position: relative; overflow: hidden; } .sr-split__light { background: var(--sr-white); display: flex; flex-direction: column; justify-content: center; padding: var(--sr-s12) var(--sr-s12); border-left: 1px solid var(--sr-border-color); } /* ══════════════════════════════════════════════════════════════════════ 12. TABLE ══════════════════════════════════════════════════════════════════════ */ .sr-table { width: 100%; border-collapse: collapse; font-family: var(--sr-font-body); font-size: 14px; } .sr-table th { text-align: left; padding: var(--sr-s3) var(--sr-s4); font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--sr-text-faint); border-bottom: 1px solid var(--sr-border-color); } .sr-table td { padding: var(--sr-s4); color: var(--sr-text); border-bottom: 1px solid var(--sr-gray-100); vertical-align: middle; } .sr-table tbody tr:hover { background: var(--sr-gray-50); } .sr-table tbody tr:last-child td { border-bottom: none; } /* ══════════════════════════════════════════════════════════════════════ 13. ALERT / NOTICE ══════════════════════════════════════════════════════════════════════ */ .sr-alert { display: flex; align-items: flex-start; gap: var(--sr-s3); padding: var(--sr-s4) var(--sr-s5); border-radius: var(--sr-radius-md); border: 1px solid; font-family: var(--sr-font-body); font-size: 14px; line-height: 1.5; margin-bottom: var(--sr-s4); } .sr-alert--info { background: var(--sr-gray-50); color: var(--sr-gray-700); border-color: var(--sr-gray-200); } .sr-alert--success { background: var(--sr-green-bg); color: var(--sr-green); border-color: rgba(22,163,74,.25); } .sr-alert--warning { background: var(--sr-amber-bg); color: var(--sr-amber); border-color: rgba(217,119,6,.25); } .sr-alert--danger { background: var(--sr-red-bg); color: var(--sr-red); border-color: rgba(220,38,38,.25); } .sr-alert__icon { flex-shrink: 0; margin-top: 1px; } .sr-alert__title { font-weight: 500; } /* ══════════════════════════════════════════════════════════════════════ 14. WORDMARK / LOGO ROW ══════════════════════════════════════════════════════════════════════ */ .sr-wordmark { display: inline-flex; align-items: center; gap: var(--sr-s3); text-decoration: none; } .sr-wordmark__icon { width: 36px; height: 36px; border: 2px solid currentColor; border-radius: var(--sr-radius-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .sr-wordmark__name { font-family: var(--sr-font-heading); font-size: 19px; font-weight: 600; letter-spacing: -.01em; line-height: 1; } .sr-wordmark__name em { font-style: italic; font-weight: 400; } /* Color contexts */ .sr-wordmark--dark { color: var(--sr-white); } .sr-wordmark--light { color: var(--sr-black); } /* ══════════════════════════════════════════════════════════════════════ 15. UTILITY ══════════════════════════════════════════════════════════════════════ */ .sr-link { color: var(--sr-text-muted); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: transparent; transition: color var(--sr-t), text-decoration-color var(--sr-t); cursor: pointer; font-size: inherit; } .sr-link:hover { color: var(--sr-blue); text-decoration-color: var(--sr-blue); } .sr-fade-in { animation: sr-fade-in .3s ease both; } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { .sr-spinner, .sr-badge__dot { animation: none; } .sr-input, .sr-btn, .sr-link { transition: none; } .sr-input--error, .sr-input.is-invalid { animation: none; } }