/* Critical Layout CSS - Load in to prevent flash of unstyled content */ :root { --top-nav-height: 80px; --border-color: #DBDFE9; --brand-lavender: #E6E0F0; --brand-vermillion: #F73000; --brand-pitch: #000000; --content-inset: 16px; --content-radius: 20px; } /* Outfit Font Family */ body { font-family: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; } /* Brand Colors */ .text-brand-vermillion { color: var(--brand-vermillion); } .bg-brand-vermillion { background-color: var(--brand-vermillion); } .text-brand-lavender { color: var(--brand-lavender); } .bg-brand-lavender { background-color: var(--brand-lavender); } .border-brand-vermillion { border-color: var(--brand-vermillion); } /* Hover states */ .hover\:text-brand-vermillion:hover { color: var(--brand-vermillion); } .hover\:bg-brand-vermillion:hover { background-color: var(--brand-vermillion); } /* Page background - lavender */ html, body { background: var(--brand-lavender); min-height: 100vh; } /* Top Navigation Bar */ .top-nav-bar { display: flex; align-items: center; gap: 2rem; padding: 1rem 1.5rem; background: var(--brand-lavender); border-bottom: 2px solid var(--border-color); position: sticky; top: 0; z-index: 50; } .top-nav-logo { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; } .top-nav-logo img { height: 32px; width: auto; } .top-nav-logo .logo-text { height: 24px; } /* Program Selector */ .program-selector-wrapper { position: relative; display: flex; align-items: center; gap: 0.5rem; } .program-selector-label { position: absolute; top: -0.5rem; left: 0.75rem; font-size: 0.625rem; font-weight: 500; color: #6B7280; background: #E6E0F0; padding: 0 0.25rem; z-index: 1; } .program-selector { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; background: #E6E0F0; border: 1px solid #D1D5DB; border-radius: 0.5rem; font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: all 0.15s; } .program-selector:hover { border-color: var(--brand-vermillion); } .program-selector-text { color: #111827; } .program-selector-chevron { width: 1rem; height: 1rem; color: #6B7280; transition: transform 0.15s; } .program-dropdown { position: absolute; top: 100%; left: 0; margin-top: 0.5rem; min-width: 200px; background: white; border: 1px solid #E5E7EB; border-radius: 0.75rem; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); display: none; z-index: 100; } .program-dropdown.show { display: block; } .program-dropdown-header { padding: 0.75rem 1rem; font-size: 0.75rem; font-weight: 600; color: #6B7280; text-transform: uppercase; } .program-option { width: 100%; padding: 0.75rem 1rem; text-align: left; font-size: 0.875rem; color: #374151; background: white; border: none; cursor: pointer; transition: background 0.15s; } .program-option:hover { background: #F9FAFB; } .program-option.active { background: rgba(247, 48, 0, 0.05); color: var(--brand-vermillion); font-weight: 600; } .program-dropdown-divider { height: 1px; background: #E5E7EB; margin: 0.25rem 0; } /* Top Nav Links */ .top-nav-links { display: flex; align-items: center; gap: 0.5rem; flex: 1; } .top-nav-link { padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 500; color: #6B7280; text-decoration: none; border: 2px solid transparent; border-bottom: none; border-radius: 0.5rem 0.5rem 0 0; transition: all 0.15s; } .top-nav-link:hover { color: #111827; } .top-nav-link.active { color: var(--brand-vermillion); background: white; border: 2px solid white; border-bottom: none; border-radius: 0.5rem 0.5rem 0 0; } /* Top Nav Right Side */ .top-nav-right { display: flex; align-items: center; gap: 1rem; } .drawer-toggle { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 1rem; background: white; border: 1px solid #E5E7EB; border-radius: 0.5rem; cursor: pointer; transition: all 0.15s; } .drawer-toggle:hover { background: #F9FAFB; border-color: #D1D5DB; } .drawer-toggle-avatar { width: 2rem; height: 2rem; border-radius: 50%; background: var(--brand-lavender); display: flex; align-items: center; justify-content: center; } .drawer-toggle-info { display: flex; flex-direction: column; text-align: left; } .drawer-toggle-name { font-size: 0.875rem; font-weight: 600; color: #111827; } .drawer-toggle-org { font-size: 0.75rem; color: #6B7280; } .drawer-toggle-chevron { width: 1rem; height: 1rem; color: #6B7280; } /* Main Content Area - Rounded inset container */ .main-content-area { margin: var(--content-inset); min-height: calc(100vh - var(--top-nav-height) - var(--content-inset)); background: #F9F8FB; border-radius: var(--content-radius); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04); overflow: hidden; } /* View Tabs */ .view-tab { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; font-size: 0.875rem; font-weight: 500; color: #6B7280; background: transparent; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; transition: all 0.15s; } .view-tab:hover { color: #111827; } .view-tab.active { color: var(--brand-vermillion); border-bottom-color: var(--brand-vermillion); } .view-tab-count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.5rem; padding: 0.125rem 0.5rem; font-size: 0.75rem; font-weight: 600; background: #F3F4F6; color: #6B7280; border-radius: 9999px; } .view-tab.active .view-tab-count { background: rgba(247, 48, 0, 0.1); color: var(--brand-vermillion); } /* Filter Chips */ .filter-chip { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.75rem; background: white; border: 1px solid #E5E7EB; border-radius: 9999px; font-size: 0.75rem; } .filter-chip button { display: flex; align-items: center; justify-content: center; padding: 0; background: none; border: none; color: #6B7280; cursor: pointer; } .filter-chip button:hover { color: var(--brand-vermillion); } /* Focus states for accessibility */ button:focus-visible, a:focus-visible { outline: 2px solid var(--brand-vermillion); outline-offset: 2px; } /* Transition utilities */ .transition-colors { transition-property: color, background-color, border-color; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }