/*! * Site Modern CSS * Author: ChatGPT * Purpose: visual refresh for ASP.NET Razor project using Bootstrap 5 * How to use: * 1) Include AFTER bootstrap.min.css and BEFORE your old site.css (or replace it). * 2) Optional: add data-theme="dark" to or to force dark mode. * 3) Respects prefers-reduced-motion and prefers-color-scheme. */ /* Keep your icon set import */ @import url('open-iconic/font/css/open-iconic-bootstrap.min.css'); /* ========================================================= 1) Design tokens =======================================================*/ :root { /* brand */ --brand-h: 216; /* brand hue for primary */ --brand-s: 60%; --brand-l: 46%; --color-primary: hsl(var(--brand-h) var(--brand-s) var(--brand-l)); /* ~#2f6fbe */ --color-primary-600: hsl(var(--brand-h) var(--brand-s) calc(var(--brand-l) - 6%)); --color-primary-700: hsl(var(--brand-h) var(--brand-s) calc(var(--brand-l) - 12%)); /* neutrals */ --bg: #f6f8fb; --surface: #ffffff; --surface-2: #f9fbff; --border: #e6e9ef; --text: #111827; --muted: #6b7280; /* accents (for charts, badges, etc.) */ --accent-1: #5c6bc0; --accent-2: #22b8cf; --accent-3: #2ecc71; --accent-4: #ffb020; /* elevation + shapes */ --radius: 12px; --radius-sm: 8px; --radius-lg: 18px; --shadow-1: 0 1px 2px rgba(16,24,40,.04), 0 8px 24px rgba(16,24,40,.06); --shadow-2: 0 4px 10px rgba(16,24,40,.08), 0 16px 32px rgba(16,24,40,.10); /* type */ --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, "Noto Sans"; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --leading: 1.55; /* spacing scale (8pt-ish) */ --sp-1: .25rem; /* 4 */ --sp-2: .5rem; /* 8 */ --sp-3: .75rem; /* 12 */ --sp-4: 1rem; /* 16 */ --sp-5: 1.25rem; /* 20 */ --sp-6: 1.5rem; /* 24 */ --sp-7: 2rem; /* 32 */ --sp-8: 2.5rem; /* 40 */ /* layout */ --topbar-h: 56px; } /* Dark theme (toggle with data-theme="dark" on html/body) */ [data-theme="dark"] { color-scheme: dark; --bg: #0f1521; --surface: #121a2a; --surface-2: #0e1626; --border: #1f2a3d; --text: #e7edf6; --muted: #a2adc2; --shadow-1: 0 1px 2px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.35); --shadow-2: 0 6px 16px rgba(0,0,0,.40), 0 20px 40px rgba(0,0,0,.45); } /* Auto dark if user prefers, unless explicit data-theme is set */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; --bg: #0f1521; --surface: #121a2a; --surface-2: #0e1626; --border: #1f2a3d; --text: #e7edf6; --muted: #a2adc2; --shadow-1: 0 1px 2px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.35); --shadow-2: 0 6px 16px rgba(0,0,0,.40), 0 20px 40px rgba(0,0,0,.45); } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } } /* ========================================================= 2) Base =======================================================*/ html, body { height: 100%; background: var(--bg); } body { font-family: var(--font-sans); line-height: var(--leading); color: var(--text); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } a, .btn-link { color: var(--color-primary); text-decoration: none; } a:hover, .btn-link:hover { color: var(--color-primary-700); text-decoration: underline; } /* Accessible focus rings aligned with brand */ :where(.btn, .btn-link.nav-link, .form-control, .form-select, .form-check-input, a, button):focus-visible { outline: 2px solid color-mix(in hsl, var(--color-primary), white 20%); outline-offset: 2px; } /* Subtle selection color */ ::selection { background: color-mix(in hsl, var(--color-primary), white 70%); } /* ========================================================= 3) Layout (topbar + sidebar + content) =======================================================*/ /* Topbar */ .navbar { background: var(--color-primary) !important; color: #fff; box-shadow: var(--shadow-1); min-height: var(--topbar-h); } .navbar .navbar-brand, .navbar .nav-link { color: #eaf2ff !important; opacity: .95; } .navbar .nav-link:hover { color: #fff !important; opacity: 1; } .navbar .form-control { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); color: #fff; } .navbar .form-control::placeholder { color: #eaf2ff; opacity: .8; } .navbar .form-control:focus { background: rgba(255,255,255,.18); border-color: #fff; box-shadow: 0 0 0 .2rem rgba(255,255,255,.2); } /* Sidebar */ .sidebar { background: var(--surface); border-right: 1px solid var(--border); } .sidebar .nav-link { display: flex; align-items: center; gap: .6rem; color: color-mix(in srgb, var(--text) 80%, #000 0%); padding: .6rem .9rem; border-radius: 8px; transition: background .2s ease, color .2s ease; } .sidebar .nav-link:hover { background: color-mix(in srgb, var(--surface) 80%, var(--border) 20%); } .sidebar .nav-link.active { background: color-mix(in srgb, var(--color-primary) 8%, #fff 92%); color: var(--color-primary); font-weight: 600; } .sidebar .nav-item + .nav-item { margin-top: .25rem; } @media (min-width: 992px) { .sidebar { position: sticky; top: var(--topbar-h); height: calc(100vh - var(--topbar-h)); overflow-y: auto; width: 260px; } .sidebar + .content { margin-left: 260px; } } /* Content spacing */ .content { padding-top: 1.1rem; } /* ========================================================= 4) Cards, panels & surfaces =======================================================*/ .card, .panel, .surface { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-1); } .card .card-header { background: var(--surface); border-bottom: 1px solid var(--border); font-weight: 600; } .card .card-footer { background: var(--surface); border-top: 1px solid var(--border); } /* Hover lift for interactive cards */ .card.is-hoverable { transition: transform .2s ease, box-shadow .2s ease; } .card.is-hoverable:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); } /* ========================================================= 5) Buttons (Bootstrap override via CSS vars) =======================================================*/ .btn-primary { --bs-btn-bg: var(--color-primary); --bs-btn-border-color: var(--color-primary); --bs-btn-hover-bg: var(--color-primary-600); --bs-btn-hover-border-color: var(--color-primary-600); --bs-btn-active-bg: var(--color-primary-700); --bs-btn-active-border-color: var(--color-primary-700); --bs-btn-disabled-bg: color-mix(in hsl, var(--color-primary), white 55%); --bs-btn-disabled-border-color: color-mix(in hsl, var(--color-primary), white 55%); color: #fff; } /* Ghost variant */ .btn-ghost { --ghost-bg: transparent; --ghost-bg-h: color-mix(in srgb, var(--color-primary) 10%, transparent); --ghost-text: var(--color-primary); background: var(--ghost-bg); color: var(--ghost-text); border: 1px solid color-mix(in srgb, var(--color-primary) 30%, var(--border)); border-radius: var(--radius-sm); } .btn-ghost:hover { background: var(--ghost-bg-h); } /* ========================================================= 6) Forms =======================================================*/ .form-control, .form-select, .form-check-input { border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); } .form-control::placeholder { color: var(--muted); } .form-control:focus, .form-select:focus { border-color: color-mix(in hsl, var(--color-primary), white 40%); box-shadow: 0 0 0 .25rem color-mix(in hsl, var(--color-primary), white 80%); } /* Input groups: smooth corners */ .input-group > .form-control, .input-group > .form-select { border-radius: 0; } .input-group > :first-child { border-top-left-radius: 10px; border-bottom-left-radius: 10px; } .input-group > :last-child { border-top-right-radius: 10px; border-bottom-right-radius: 10px; } /* Floating labels spacing improvements */ .form-floating > .form-control, .form-floating > .form-select { padding-top: 1.25rem; } /* ========================================================= 7) Tables =======================================================*/ .table { --bs-table-bg: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-1); } .table thead th { background: var(--surface); border-bottom: 1px solid var(--border); color: color-mix(in srgb, var(--text) 85%, #000 0%); font-weight: 600; } .table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-accent-bg: color-mix(in srgb, var(--surface) 85%, var(--border) 15%); } /* Optional sticky header */ .table-sticky thead th { position: sticky; top: 0; z-index: 1; } /* ========================================================= 8) Utilities (quick helpers without !important) =======================================================*/ .text-muted { color: var(--muted) !important; } .rounded-xl { border-radius: var(--radius) !important; } .shadow-soft { box-shadow: var(--shadow-1) !important; } .hr-soft { border: 0; height: 1px; background: var(--border); margin: 1rem 0; } /* glassy surface */ .glass { background: color-mix(in srgb, var(--surface) 70%, transparent); backdrop-filter: saturate(140%) blur(8px); border: 1px solid color-mix(in srgb, var(--border) 60%, transparent); border-radius: var(--radius-lg); } /* chips & badges */ .chip { display: inline-flex; align-items: center; gap: .5ch; padding: .35rem .6rem; border-radius: 999px; background: color-mix(in srgb, var(--surface) 80%, var(--border) 20%); border: 1px solid var(--border); font-size: .85rem; } .chip .dot { width: .5rem; height: .5rem; border-radius: 999px; background: var(--accent-2); } /* Stat block */ .stat { display: grid; gap: .25rem; } .stat .label { color: var(--muted); font-size: .85rem; } .stat .value { font-size: clamp(1.25rem, 1.05rem + .75vw, 1.75rem); font-weight: 700; } /* skeleton loader */ .skeleton { position: relative; overflow: hidden; background: color-mix(in srgb, var(--surface) 75%, var(--border) 25%); } .skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, #fff 50%, transparent) 50%, transparent 100%); animation: shimmer 1.4s infinite; } @keyframes shimmer { 100% { transform: translateX(100%); } } /* ========================================================= 9) Animations & micro-interactions =======================================================*/ a, .btn, .nav-link, .form-control, .form-select, .card { transition: all .2s ease; } .scale-on-hover:hover { transform: scale(1.015); } /* ========================================================= 10) Blazor error UI (kept, styled) =======================================================*/ #blazor-error-ui { background: #fff3cd; border-top: 1px solid #ffe69c; color: #664d03; bottom: 0; left: 0; width: 100%; padding: .6rem 1.25rem .7rem 1.25rem; position: fixed; z-index: 1000; box-shadow: 0 -2px 6px rgba(0,0,0,.12); display: none; } #blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; } /* ========================================================= 11) Page-specific helpers (optional) =======================================================*/ /* Counter card example */ .counter-card { text-align: center; padding: var(--sp-7); } .counter-card .number { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); font-weight: 800; } .counter-card .desc { color: var(--muted); } /* Index hero */ .hero { background: radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--color-primary) 8%, transparent), transparent 50%), radial-gradient(circle at 120% 20%, color-mix(in srgb, var(--accent-2) 12%, transparent), transparent 55%); border-radius: var(--radius-lg); padding: var(--sp-8); } /* ========================================================= 12) Print tweaks =======================================================*/ @media print { .sidebar, .navbar { display: none !important; } .content { margin: 0 !important; } a { text-decoration: underline; } }