/* * ============================================================================ * HIGHLAND PARTNERS DESIGN SYSTEM * Vanilla CSS — Drop-in replacement for Tailwind-based dashboard styling * ============================================================================ * * Usage: * 1. Add to your HTML * 2. Add * 3. For dark mode, add class="dark" to your element * * Sections: * 1. CSS Custom Properties (:root and .dark) * 2. Base Reset & Body * 3. Typography Utilities * 4. Spacing & Layout Utilities * 5. Flat Design Component Classes * 6. Status Indicator Dots * 7. Buttons * 8. Form Inputs * 9. Tables * 10. Badges * 11. Dividers * 12. Header / Navigation * 13. Dark Mode Toggle * 14. Responsive Breakpoints * 15. Utility Helpers * ============================================================================ */ /* ========================================================================== 1. CSS CUSTOM PROPERTIES ========================================================================== */ :root { --background: hsl(0 0% 100%); --foreground: hsl(210 25% 7.8431%); --card: hsl(180 6.6667% 97.0588%); --card-foreground: hsl(210 25% 7.8431%); --popover: hsl(0 0% 100%); --popover-foreground: hsl(210 25% 7.8431%); --primary: hsl(203.8863 88.2845% 53.1373%); --primary-foreground: hsl(0 0% 100%); --secondary: hsl(210 25% 7.8431%); --secondary-foreground: hsl(0 0% 100%); --muted: hsl(240 1.9608% 90%); --muted-foreground: hsl(210 25% 7.8431%); --accent: hsl(211.5789 51.3514% 92.7451%); --accent-foreground: hsl(203.8863 88.2845% 53.1373%); --destructive: hsl(356.3033 90.5579% 54.3137%); --destructive-foreground: hsl(0 0% 100%); --border: hsl(201.4286 30.4348% 90.9804%); --input: hsl(200 23.0769% 97.4510%); --ring: hsl(202.8169 89.1213% 53.1373%); --chart-1: hsl(203.8863 88.2845% 53.1373%); --chart-2: hsl(159.7826 100% 36.0784%); --chart-3: hsl(42.0290 92.8251% 56.2745%); --chart-4: hsl(147.1429 78.5047% 41.9608%); --chart-5: hsl(341.4894 75.2000% 50.9804%); --sidebar: hsl(180 6.6667% 97.0588%); --sidebar-foreground: hsl(210 25% 7.8431%); --sidebar-primary: hsl(203.8863 88.2845% 53.1373%); --sidebar-primary-foreground: hsl(0 0% 100%); --sidebar-accent: hsl(211.5789 51.3514% 92.7451%); --sidebar-accent-foreground: hsl(203.8863 88.2845% 53.1373%); --sidebar-border: hsl(205.0000 25.0000% 90.5882%); --sidebar-ring: hsl(202.8169 89.1213% 53.1373%); --font-sans: 'Open Sans', sans-serif; --font-serif: Georgia, serif; --font-mono: Menlo, monospace; --radius: 0; --shadow-2xs: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00); --shadow-xs: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00); --shadow-sm: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00), 0px 1px 2px -1px hsl(202.8169 89.1213% 53.1373% / 0.00); --shadow: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00), 0px 1px 2px -1px hsl(202.8169 89.1213% 53.1373% / 0.00); --shadow-md: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00), 0px 2px 4px -1px hsl(202.8169 89.1213% 53.1373% / 0.00); --shadow-lg: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00), 0px 4px 6px -1px hsl(202.8169 89.1213% 53.1373% / 0.00); --shadow-xl: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00), 0px 8px 10px -1px hsl(202.8169 89.1213% 53.1373% / 0.00); --shadow-2xl: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00); --tracking-normal: 0em; --spacing: 0.25rem; } .dark { --background: hsl(0 0% 0%); --foreground: hsl(200 6.6667% 91.1765%); --card: hsl(228 9.8039% 10%); --card-foreground: hsl(0 0% 85.0980%); --popover: hsl(228 9.8039% 12%); --popover-foreground: hsl(200 6.6667% 91.1765%); --primary: hsl(203.7736 87.6033% 52.5490%); --primary-foreground: hsl(0 0% 100%); --secondary: hsl(195.0000 15.3846% 94.9020%); --secondary-foreground: hsl(210 25% 7.8431%); --muted: hsl(0 0% 9.4118%); --muted-foreground: hsl(210 3.3898% 46.2745%); --accent: hsl(205.7143 70% 7.8431%); --accent-foreground: hsl(203.7736 87.6033% 52.5490%); --destructive: hsl(356.3033 90.5579% 54.3137%); --destructive-foreground: hsl(0 0% 100%); --border: hsl(210 10% 25%); --input: hsl(207.6923 27.6596% 18.4314%); --ring: hsl(202.8169 89.1213% 53.1373%); --chart-1: hsl(203.8863 88.2845% 53.1373%); --chart-2: hsl(159.7826 100% 36.0784%); --chart-3: hsl(42.0290 92.8251% 56.2745%); --chart-4: hsl(147.1429 78.5047% 41.9608%); --chart-5: hsl(341.4894 75.2000% 50.9804%); --sidebar: hsl(228 9.8039% 10%); --sidebar-foreground: hsl(0 0% 85.0980%); --sidebar-primary: hsl(202.8169 89.1213% 53.1373%); --sidebar-primary-foreground: hsl(0 0% 100%); --sidebar-accent: hsl(205.7143 70% 7.8431%); --sidebar-accent-foreground: hsl(203.7736 87.6033% 52.5490%); --sidebar-border: hsl(205.7143 15.7895% 26.0784%); --sidebar-ring: hsl(202.8169 89.1213% 53.1373%); --font-sans: 'Open Sans', sans-serif; --font-serif: Georgia, serif; --font-mono: Menlo, monospace; --radius: 0; --shadow-2xs: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00); --shadow-xs: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00); --shadow-sm: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00), 0px 1px 2px -1px hsl(202.8169 89.1213% 53.1373% / 0.00); --shadow: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00), 0px 1px 2px -1px hsl(202.8169 89.1213% 53.1373% / 0.00); --shadow-md: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00), 0px 2px 4px -1px hsl(202.8169 89.1213% 53.1373% / 0.00); --shadow-lg: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00), 0px 4px 6px -1px hsl(202.8169 89.1213% 53.1373% / 0.00); --shadow-xl: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00), 0px 8px 10px -1px hsl(202.8169 89.1213% 53.1373% / 0.00); --shadow-2xl: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00); } /* ========================================================================== 2. BASE RESET & BODY ========================================================================== */ *, *::before, *::after { box-sizing: border-box; border-color: var(--border); } body { font-family: var(--font-sans); background: var(--background); color: var(--foreground); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; margin: 0; line-height: 1.5; } img, svg, video, canvas, audio, iframe, embed, object { display: block; max-width: 100%; } a { color: inherit; text-decoration: inherit; } /* ========================================================================== 3. TYPOGRAPHY UTILITIES ========================================================================== */ .text-xs { font-size: 0.75rem; line-height: 1rem; } .text-sm { font-size: 0.875rem; line-height: 1.25rem; } .text-base { font-size: 1rem; line-height: 1.5rem; } .text-lg { font-size: 1.125rem; line-height: 1.75rem; } .text-xl { font-size: 1.25rem; line-height: 1.75rem; } .text-2xl { font-size: 1.5rem; line-height: 2rem; } .text-3xl { font-size: 1.875rem; line-height: 2.25rem; } .text-4xl { font-size: 2.25rem; line-height: 2.5rem; } .font-normal { font-weight: 400; } .font-medium { font-weight: 500; } .font-semibold { font-weight: 600; } .font-bold { font-weight: 700; } h1 > svg, h2 > svg, h3 > svg, h4 > svg, .font-semibold > svg, .font-bold > svg { display: inline-block; vertical-align: middle; } h1:not(.flex) > svg, h2:not(.flex) > svg, h3:not(.flex) > svg, h4:not(.flex) > svg, .font-semibold:not(.flex) > svg, .font-bold:not(.flex) > svg { margin-right: 0.35em; } .text-primary { color: var(--primary); } .text-muted { color: var(--muted-foreground); } .text-destructive { color: var(--destructive); } .text-slate-900 { color: hsl(222.2 47.4% 11.2%); } .text-slate-500 { color: hsl(215.4 16.3% 46.9%); } .text-slate-400 { color: hsl(215.4 20.2% 65.1%); } .text-slate-100 { color: hsl(210 40% 96.1%); } .text-uppercase { text-transform: uppercase; } .leading-none { line-height: 1; } .leading-tight { line-height: 1.25; } .tracking-tight { letter-spacing: -0.025em; } /* ========================================================================== 4. SPACING & LAYOUT UTILITIES ========================================================================== */ /* --- Padding --- */ .p-0 { padding: 0; } .p-1 { padding: 0.25rem; } .p-2 { padding: 0.5rem; } .p-3 { padding: 0.75rem; } .p-4 { padding: 1rem; } .p-5 { padding: 1.25rem; } .p-6 { padding: 1.5rem; } .p-7 { padding: 1.75rem; } .p-8 { padding: 2rem; } .px-0 { padding-left: 0; padding-right: 0; } .px-1 { padding-left: 0.25rem; padding-right: 0.25rem; } .px-2 { padding-left: 0.5rem; padding-right: 0.5rem; } .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; } .px-4 { padding-left: 1rem; padding-right: 1rem; } .px-5 { padding-left: 1.25rem; padding-right: 1.25rem; } .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; } .px-7 { padding-left: 1.75rem; padding-right: 1.75rem; } .px-8 { padding-left: 2rem; padding-right: 2rem; } .py-0 { padding-top: 0; padding-bottom: 0; } .py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; } .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; } .py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; } .py-4 { padding-top: 1rem; padding-bottom: 1rem; } .py-5 { padding-top: 1.25rem; padding-bottom: 1.25rem; } .py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; } .py-7 { padding-top: 1.75rem; padding-bottom: 1.75rem; } .py-8 { padding-top: 2rem; padding-bottom: 2rem; } /* --- Margin --- */ .m-0 { margin: 0; } .m-1 { margin: 0.25rem; } .m-2 { margin: 0.5rem; } .m-3 { margin: 0.75rem; } .m-4 { margin: 1rem; } .m-5 { margin: 1.25rem; } .m-6 { margin: 1.5rem; } .m-7 { margin: 1.75rem; } .m-8 { margin: 2rem; } .mx-0 { margin-left: 0; margin-right: 0; } .mx-1 { margin-left: 0.25rem; margin-right: 0.25rem; } .mx-2 { margin-left: 0.5rem; margin-right: 0.5rem; } .mx-3 { margin-left: 0.75rem; margin-right: 0.75rem; } .mx-4 { margin-left: 1rem; margin-right: 1rem; } .mx-5 { margin-left: 1.25rem; margin-right: 1.25rem; } .mx-6 { margin-left: 1.5rem; margin-right: 1.5rem; } .mx-7 { margin-left: 1.75rem; margin-right: 1.75rem; } .mx-8 { margin-left: 2rem; margin-right: 2rem; } .mx-auto { margin-left: auto; margin-right: auto; } .my-0 { margin-top: 0; margin-bottom: 0; } .my-1 { margin-top: 0.25rem; margin-bottom: 0.25rem; } .my-2 { margin-top: 0.5rem; margin-bottom: 0.5rem; } .my-3 { margin-top: 0.75rem; margin-bottom: 0.75rem; } .my-4 { margin-top: 1rem; margin-bottom: 1rem; } .my-5 { margin-top: 1.25rem; margin-bottom: 1.25rem; } .my-6 { margin-top: 1.5rem; margin-bottom: 1.5rem; } .my-7 { margin-top: 1.75rem; margin-bottom: 1.75rem; } .my-8 { margin-top: 2rem; margin-bottom: 2rem; } .mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: 0.25rem; } .mb-2 { margin-bottom: 0.5rem; } .mb-3 { margin-bottom: 0.75rem; } .mb-4 { margin-bottom: 1rem; } .mb-5 { margin-bottom: 1.25rem; } .mb-6 { margin-bottom: 1.5rem; } .mb-7 { margin-bottom: 1.75rem; } .mb-8 { margin-bottom: 2rem; } .mt-0 { margin-top: 0; } .mt-1 { margin-top: 0.25rem; } .mt-2 { margin-top: 0.5rem; } .mt-3 { margin-top: 0.75rem; } .mt-4 { margin-top: 1rem; } .mt-5 { margin-top: 1.25rem; } .mt-6 { margin-top: 1.5rem; } .mt-7 { margin-top: 1.75rem; } .mt-8 { margin-top: 2rem; } /* --- Gap --- */ .gap-0 { gap: 0; } .gap-1 { gap: 0.25rem; } .gap-2 { gap: 0.5rem; } .gap-3 { gap: 0.75rem; } .gap-4 { gap: 1rem; } .gap-5 { gap: 1.25rem; } .gap-6 { gap: 1.5rem; } .gap-7 { gap: 1.75rem; } .gap-8 { gap: 2rem; } /* --- Flexbox --- */ .flex { display: flex; } .inline-flex { display: inline-flex; } .flex-col { flex-direction: column; } .flex-row { flex-direction: row; } .flex-wrap { flex-wrap: wrap; } .flex-1 { flex: 1 1 0%; } .flex-none { flex: none; } .items-center { align-items: center; } .items-start { align-items: flex-start; } .items-end { align-items: flex-end; } .items-stretch { align-items: stretch; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .justify-start { justify-content: flex-start; } .justify-end { justify-content: flex-end; } .self-center { align-self: center; } /* --- Grid --- */ .grid { display: grid; } .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .col-span-2 { grid-column: span 2 / span 2; } .col-span-3 { grid-column: span 3 / span 3; } .col-span-full { grid-column: 1 / -1; } /* --- Sizing --- */ .w-full { width: 100%; } .w-auto { width: auto; } .h-full { height: 100%; } .h-auto { height: auto; } .min-h-screen { min-height: 100vh; } .max-w-sm { max-width: 24rem; } .max-w-md { max-width: 28rem; } .max-w-lg { max-width: 32rem; } .max-w-xl { max-width: 36rem; } .max-w-2xl { max-width: 42rem; } .max-w-4xl { max-width: 56rem; } .max-w-full { max-width: 100%; } /* --- Position --- */ .relative { position: relative; } .absolute { position: absolute; } .fixed { position: fixed; } .sticky { position: sticky; top: 0; } /* ========================================================================== 5. FLAT DESIGN COMPONENT CLASSES ========================================================================== */ /* --- Card (flat — NO shadows, NO rounded corners, transparent) --- */ .card { background: transparent; border-radius: 0; border: none; box-shadow: none; } .card-header { padding: 1rem; } .card-content { padding: 1rem; } .card-footer { padding: 1rem; } .card-title { font-size: 1.125rem; font-weight: 600; line-height: 1; } .card-description { font-size: 0.875rem; color: var(--muted-foreground); } /* --- KPI Card (stat cards) --- */ .kpi-card { background: transparent; border-bottom: 1px solid hsl(0 0% 94%); height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 1rem; transition: background-color 0.2s; } .kpi-card:hover { background: hsl(0 0% 96%); } .dark .kpi-card { border-bottom-color: hsl(0 0% 15%); } .dark .kpi-card:hover { background: hsl(0 0% 15% / 0.5); } .kpi-card .value { font-size: 1.875rem; font-weight: 700; color: hsl(210 25% 7.8%); } .kpi-card .title { font-size: 0.75rem; color: hsl(215 16% 47%); text-transform: uppercase; } .dark .kpi-card .value { color: hsl(210 17% 95%); } .dark .kpi-card .title { color: hsl(215 14% 60%); } /* --- KPI Grid (auto-fit grid for KPI row) --- */ .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 2rem; width: 100%; } @media (max-width: 768px) { .kpi-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } } /* --- Chart Card (large chart panels) --- */ .chart-card { background: transparent; border-radius: 0; border: none; box-shadow: none; } /* --- Chart Grid (responsive chart layout) --- */ .chart-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } @media (min-width: 768px) { .chart-grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 1280px) { .chart-grid { grid-template-columns: 1fr 1fr 1fr; } } /* --- Data Card Grid (small data cards) --- */ .data-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 0.5rem 1rem; } @media (max-width: 768px) { .data-card-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); } } /* --- Data Card --- */ .data-card { background: transparent; border-radius: 0; border: none; box-shadow: none; transition: box-shadow 0.2s; } .data-card:hover { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); } /* ========================================================================== 6. STATUS INDICATOR DOTS ========================================================================== */ .status-dot { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 50%; } .status-great { background: #10b981; } .status-good { background: #3b82f6; } .status-info { background: #94a3b8; } .status-attention { background: #f59e0b; } .status-urgent { background: #ef4444; } /* ========================================================================== 7. BUTTONS ========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; border-radius: 0; font-size: 0.875rem; font-weight: 500; padding: 0.5rem 1rem; cursor: pointer; transition: all 0.2s; border: none; font-family: var(--font-sans); line-height: 1.25rem; text-decoration: none; } .btn:disabled { opacity: 0.5; pointer-events: none; } .btn-primary { background: var(--primary); color: var(--primary-foreground); } .btn-primary:hover { opacity: 0.9; } .btn-secondary { background: var(--secondary); color: var(--secondary-foreground); } .btn-secondary:hover { opacity: 0.9; } .btn-destructive { background: var(--destructive); color: var(--destructive-foreground); } .btn-destructive:hover { opacity: 0.9; } .btn-outline { background: transparent; border: 1px solid var(--border); color: var(--foreground); } .btn-outline:hover { background: var(--accent); color: var(--accent-foreground); } .btn-ghost { background: transparent; color: var(--foreground); } .btn-ghost:hover { background: var(--accent); } .btn-sm { font-size: 0.75rem; padding: 0.25rem 0.75rem; } .btn-lg { font-size: 1rem; padding: 0.75rem 1.5rem; } .btn-icon { padding: 0.5rem; width: 2.25rem; height: 2.25rem; } /* ========================================================================== 8. FORM INPUTS ========================================================================== */ .input { width: 100%; padding: 0.5rem 0.75rem; font-size: 0.875rem; border: 1px solid var(--border); background: var(--input); color: var(--foreground); border-radius: 0; outline: none; font-family: var(--font-sans); line-height: 1.25rem; } .input:focus { border-color: var(--ring); box-shadow: 0 0 0 2px hsl(202.8169 89.1213% 53.1373% / 0.2); } .input:disabled { opacity: 0.5; cursor: not-allowed; } .input::placeholder { color: var(--muted-foreground); opacity: 0.6; } .label { font-size: 0.875rem; font-weight: 500; color: var(--foreground); line-height: 1; } .textarea { width: 100%; padding: 0.5rem 0.75rem; font-size: 0.875rem; border: 1px solid var(--border); background: var(--input); color: var(--foreground); border-radius: 0; min-height: 80px; resize: vertical; outline: none; font-family: var(--font-sans); line-height: 1.5; } .textarea:focus { border-color: var(--ring); box-shadow: 0 0 0 2px hsl(202.8169 89.1213% 53.1373% / 0.2); } .select { width: 100%; padding: 0.5rem 0.75rem; font-size: 0.875rem; border: 1px solid var(--border); background: var(--input); color: var(--foreground); border-radius: 0; outline: none; font-family: var(--font-sans); appearance: none; cursor: pointer; } .select:focus { border-color: var(--ring); box-shadow: 0 0 0 2px hsl(202.8169 89.1213% 53.1373% / 0.2); } /* ========================================================================== 9. TABLES ========================================================================== */ .table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .table th { text-align: left; padding: 0.75rem 1rem; font-weight: 600; color: var(--muted-foreground); border-bottom: 1px solid var(--border); } .table td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border); } .table tr:hover { background: var(--accent); } .table thead tr:hover { background: transparent; } .table caption { padding: 0.75rem 1rem; font-size: 0.875rem; color: var(--muted-foreground); text-align: left; } /* ========================================================================== 10. BADGES ========================================================================== */ .badge { display: inline-flex; align-items: center; padding: 0.125rem 0.625rem; font-size: 0.75rem; font-weight: 500; border-radius: 0; line-height: 1.25rem; white-space: nowrap; } .badge-default { background: var(--primary); color: var(--primary-foreground); } .badge-secondary { background: var(--secondary); color: var(--secondary-foreground); } .badge-destructive { background: var(--destructive); color: var(--destructive-foreground); } .badge-outline { background: transparent; border: 1px solid var(--border); color: var(--foreground); } /* ========================================================================== 11. DIVIDERS (primary separation method) ========================================================================== */ .divider { border: none; border-top: 1px solid hsl(0 0% 94%); margin: 1rem 0; } .dark .divider { border-top-color: hsl(0 0% 15%); } .divider-bottom { border-bottom: 1px solid hsl(0 0% 94%); } .dark .divider-bottom { border-bottom-color: hsl(0 0% 15%); } .divider-light { border-top: 1px solid hsl(0 0% 94%); } .dark .divider-light { border-top-color: hsl(0 0% 15%); } /* ========================================================================== 12. HEADER / NAVIGATION ========================================================================== */ .header { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 1rem; border-bottom: 1px solid var(--border); background: var(--background); } .header > *:first-child, .header > *:last-child { flex: 0 0 auto; } .nav-tabs { display: flex; flex: 1 1 auto; gap: 0; overflow: visible; justify-content: center; } .nav-tab { padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 500; color: var(--muted-foreground); border-bottom: 2px solid transparent; cursor: pointer; transition: all 0.2s; background: none; border-top: none; border-left: none; border-right: none; font-family: var(--font-sans); white-space: nowrap; flex-shrink: 0; } .nav-tab:hover { color: var(--foreground); } .nav-tab.active { color: var(--primary); border-bottom-color: var(--primary); } .nav-dropdown { position: relative; display: flex; align-items: stretch; flex-shrink: 0; } .nav-dropdown-trigger { display: inline-flex; align-items: center; gap: 0.25rem; text-decoration: none; } .nav-chevron { transition: transform 0.2s; } .nav-dropdown.open .nav-chevron { transform: rotate(180deg); } .nav-dropdown-panel { display: none; position: absolute; top: 100%; left: 0; min-width: 160px; background: var(--background); border: 1px solid var(--border); border-radius: 0; box-shadow: none; z-index: 100; padding: 0.25rem 0; } .nav-dropdown.open .nav-dropdown-panel { display: block; } .nav-dropdown-link { display: block; padding: 0.5rem 1rem; font-size: 0.8125rem; font-weight: 500; color: var(--foreground); text-decoration: none; white-space: nowrap; min-height: 36px; line-height: 1.5; } .nav-dropdown-link:hover { background: var(--accent); color: var(--accent-foreground); } .nav-dropdown-link.active { color: var(--primary); } .mobile-nav-group { padding: 0; } .mobile-nav-group-label { display: block; padding: 0.5rem 1rem 0.25rem; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); } .mobile-nav-child { padding-left: 2rem; } @media (max-width: 1279px) { .desktop-nav { display: none; } } /* ========================================================================== 13. DARK MODE TOGGLE ========================================================================== Dark mode is class-based: add class="dark" to or . To detect system preference and persist choice, use JavaScript: All color variables in .dark {} are automatically applied when the class is present. ========================================================================== */ /* ========================================================================== 14. RESPONSIVE BREAKPOINTS ========================================================================== */ /* --- Compact nav (1280-1500px) --- */ @media (min-width: 1280px) and (max-width: 1500px) { .nav-tab { padding: 0.375rem 0.5rem; font-size: 0.8rem; } } /* --- Mobile (< 1280px) --- */ @media (max-width: 1279px) { .mobile\:text-xs { font-size: 0.65rem; } .mobile\:text-sm { font-size: 0.75rem; } .mobile\:p-1 { padding: 0.25rem; } .mobile\:gap-1 { gap: 0.25rem; } .mobile\:mb-2 { margin-bottom: 0.5rem; } .mobile\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mobile\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .mobile\:hidden { display: none; } .mobile\:block { display: block; } .mobile\:flex-col { flex-direction: column; } } /* --- 720P Resolution (1280×720) --- */ @media (min-width: 1280px) and (max-width: 1919px) and (min-height: 720px) { .p720\:text-xs { font-size: 0.7rem; } .p720\:text-sm { font-size: 0.8rem; } .p720\:p-1 { padding: 0.25rem; } .p720\:gap-1 { gap: 0.25rem; } .p720\:mb-2 { margin-bottom: 0.5rem; } .p720\:hidden { display: none; } .p720\:block { display: block; } } /* --- HD Resolution (1920×1080) --- */ @media (min-width: 1920px) and (max-width: 3839px) and (min-height: 1080px) { .hd\:text-xs { font-size: 0.75rem; } .hd\:text-sm { font-size: 0.875rem; } .hd\:p-2 { padding: 0.5rem; } .hd\:gap-2 { gap: 0.5rem; } .hd\:mb-4 { margin-bottom: 1rem; } .hd\:hidden { display: none; } .hd\:block { display: block; } } /* --- UHD / 4K Resolution (3840×2160+) --- */ @media (min-width: 3840px) and (min-height: 2160px) { .uhd\:text-base { font-size: 1rem; } .uhd\:text-lg { font-size: 1.125rem; } .uhd\:p-6 { padding: 1.5rem; } .uhd\:gap-6 { gap: 1.5rem; } .uhd\:mb-8 { margin-bottom: 2rem; } .uhd\:hidden { display: none; } .uhd\:block { display: block; } } /* --- Common responsive helpers --- */ @media (max-width: 640px) { .sm\:hidden { display: none; } .sm\:grid-cols-1 { grid-template-columns: 1fr; } } @media (min-width: 640px) { .sm\:block { display: block; } .sm\:flex { display: flex; } .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 768px) { .md\:block { display: block; } .md\:flex { display: flex; } .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 1024px) { .lg\:block { display: block; } .lg\:flex { display: flex; } .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .lg\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } } /* ========================================================================== 15. UTILITY HELPERS ========================================================================== */ /* --- Display --- */ .hidden { display: none; } .block { display: block; } .inline-block { display: inline-block; } .inline { display: inline; } /* --- Overflow --- */ .overflow-hidden { overflow: hidden; } .overflow-auto { overflow: auto; } .overflow-x-auto { overflow-x: auto; } .overflow-y-auto { overflow-y: auto; } /* --- Text Alignment --- */ .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } /* --- Border Radius --- */ .rounded-none { border-radius: 0; } .rounded-sm { border-radius: calc(var(--radius) - 4px); } .rounded-md { border-radius: calc(var(--radius) - 2px); } .rounded-lg { border-radius: var(--radius); } .rounded-full { border-radius: 9999px; } /* --- Borders --- */ .border { border: 1px solid var(--border); } .border-t { border-top: 1px solid var(--border); } .border-b { border-bottom: 1px solid var(--border); } .border-l { border-left: 1px solid var(--border); } .border-r { border-right: 1px solid var(--border); } .border-none { border: none; } .border-0 { border: 0; } /* --- Backgrounds --- */ .bg-transparent { background: transparent; } .bg-background { background: var(--background); } .bg-primary { background: var(--primary); } .bg-secondary { background: var(--secondary); } .bg-muted { background: var(--muted); } .bg-accent { background: var(--accent); } .bg-destructive { background: var(--destructive); } .bg-card { background: var(--card); } .bg-popover { background: var(--popover); } /* --- Transitions --- */ .transition-colors { transition: color 0.2s, background-color 0.2s, border-color 0.2s; } .transition-shadow { transition: box-shadow 0.2s; } .transition-all { transition: all 0.2s; } .transition-none { transition: none; } .duration-200 { transition-duration: 200ms; } .duration-300 { transition-duration: 300ms; } /* --- Cursor --- */ .cursor-pointer { cursor: pointer; } .cursor-default { cursor: default; } .cursor-not-allowed { cursor: not-allowed; } /* --- Screen Reader Only --- */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } /* --- Opacity --- */ .opacity-0 { opacity: 0; } .opacity-50 { opacity: 0.5; } .opacity-75 { opacity: 0.75; } .opacity-100 { opacity: 1; } /* --- Z-Index --- */ .z-0 { z-index: 0; } .z-10 { z-index: 10; } .z-20 { z-index: 20; } .z-30 { z-index: 30; } .z-40 { z-index: 40; } .z-50 { z-index: 50; } /* --- Whitespace & Text --- */ .whitespace-nowrap { white-space: nowrap; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* --- Shadows (flat design — all zero-opacity by default) --- */ .shadow-none { box-shadow: none; } .shadow-sm { box-shadow: var(--shadow-sm); } .shadow { box-shadow: var(--shadow); } .shadow-md { box-shadow: var(--shadow-md); } .shadow-lg { box-shadow: var(--shadow-lg); } .shadow-xl { box-shadow: var(--shadow-xl); } /* --- Invert for light/dark logo handling --- */ .invert { filter: invert(1); } .invert-0 { filter: invert(0); } .dark .dark\:invert-0 { filter: invert(0); } .dark .dark\:invert { filter: invert(1); } /* --- Dark mode text overrides --- */ .dark .dark\:text-slate-100 { color: hsl(210 40% 96.1%); } .dark .dark\:text-slate-400 { color: hsl(215.4 20.2% 65.1%); } /* --- Hover utilities (require :hover pseudo-class) --- */ .hover\:bg-gray-100:hover { background: hsl(220 14.3% 95.9%); } .dark .dark\:hover\:bg-gray-800\/50:hover { background: hsl(217.2 32.6% 17.5% / 0.5); } /* ========================================================================== END OF HIGHLAND PARTNERS DESIGN SYSTEM ========================================================================== */