/* * Breeze Airways — Report & Research HTML Stylesheet * Shared CSS for branded HTML reports, research briefs, and static pages. * Link from any page: * or adjust path depth as needed. * * Fonts: include this in your : * */
/* ===== COLOR SYSTEM ===== */ :root {
/* Primary */ --primary-dark: #001633;
--primary-medium: #1F74DF;
--primary-light: #AEC4EC;
--primary-lighter: #E2F0FA;
--primary-lightest: #F5F6FC;
/* Sky Blue Scale */ --sky-blue-0: #F8FBFF;
--sky-blue-5: #ECF4FF;
--sky-blue-10: #C1DDFF;
--sky-blue-30: #6AADFF;
--sky-blue-40: #3F96FF;
--sky-blue-50: #1F74DF;
--sky-blue-70: #0C4D9D;
--sky-blue-90: #002859;
/* Secondary Accents */ --sunset-pink: #FF527B;
--tan: #FFF0E3;
--purple: #6B34FF;
--green: #71DD27;
--livery-blue: #3D93EF;
--map-pink: #E8918E;
/* Grays */ --gray-darker: #263238;
--gray-dark: #455A64;
--gray: #969696;
--gray-light: #B4BCC6;
--gray-lighter: #F1F4F6;
}
/* ===== RESET & BASE ===== */ * {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Open Sans', sans-serif;
background: var(--primary-lightest);
color: var(--primary-dark);
line-height: 1.6;
}
a {
color: var(--primary-medium);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
code {
font-family: 'Courier New', monospace;
font-size: 0.85em;
background: var(--gray-lighter);
padding: 2px 6px;
border-radius: 4px;
color: var(--sky-blue-70);
}
/* ===== HEADER ===== */ header {
background: linear-gradient(135deg, var(--primary-dark) 0%, var(--sky-blue-70) 50%, var(--primary-medium) 100%);
color: white;
padding: 60px 40px;
text-align: center;
position: relative;
overflow: hidden;
}
header::before {
content: '';
position: absolute;
top: -40%;
right: -10%;
width: 500px;
height: 500px;
border-radius: 50%;
background: rgba(255,255,255,0.04);
}
header::after {
content: '';
position: absolute;
bottom: -30%;
left: -5%;
width: 400px;
height: 400px;
border-radius: 50%;
background: rgba(255,255,255,0.03);
}
header h1 {
font-family: 'Poppins', sans-serif;
font-weight: 700;
font-size: 32px;
letter-spacing: 0.5px;
position: relative;
z-index: 1;
max-width: 800px;
margin: 0 auto;
}
header .tagline {
font-family: 'Poppins', sans-serif;
font-size: 16px;
font-weight: 300;
color: var(--sky-blue-10);
letter-spacing: 1px;
margin-top: 8px;
position: relative;
z-index: 1;
}
header .subtitle {
font-size: 13px;
color: var(--sky-blue-30);
margin-top: 12px;
position: relative;
z-index: 1;
opacity: 0.8;
}
/* ===== STICKY NAV ===== */ nav {
background: white;
border-bottom: 1px solid var(--gray-lighter);
padding: 14px 40px;
position: sticky;
top: 0;
z-index: 100;
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
}
nav a {
font-family: 'Poppins', sans-serif;
font-size: 13px;
font-weight: 500;
color: var(--primary-medium);
text-decoration: none;
padding: 6px 14px;
border-radius: 20px;
transition: all 0.2s;
}
nav a:hover {
background: var(--primary-lighter);
color: var(--primary-dark);
text-decoration: none;
}
/* ===== LAYOUT ===== */ .container {
max-width: 960px;
margin: 0 auto;
padding: 0 24px;
}
.container-wide {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
section {
padding: 48px 0;
border-bottom: 1px solid #E0E6EF;
}
section:last-of-type {
border-bottom: none;
}
/* ===== TYPOGRAPHY ===== */ h2 {
font-family: 'Poppins', sans-serif;
font-weight: 700;
font-size: 24px;
color: var(--primary-dark);
margin-bottom: 8px;
}
h3 {
font-family: 'Poppins', sans-serif;
font-weight: 600;
font-size: 18px;
color: var(--sky-blue-70);
margin: 28px 0 14px 0;
}
h4 {
font-family: 'Poppins', sans-serif;
font-weight: 600;
font-size: 15px;
color: var(--primary-dark);
margin: 16px 0 8px 0;
}
p {
font-size: 14px;
color: var(--gray-dark);
line-height: 1.7;
margin: 10px 0;
}
ul, ol {
margin: 8px 0 12px 24px;
font-size: 14px;
color: var(--gray-dark);
}
li {
margin: 5px 0;
line-height: 1.6;
}
/* ===== TL;DR BOX ===== */ .tldr {
background: linear-gradient(135deg, var(--primary-dark) 0%, var(--sky-blue-90) 100%);
color: white;
padding: 28px 32px;
border-radius: 16px;
margin: 24px 0 32px;
box-shadow: 0 4px 16px rgba(0,22,51,0.2);
}
.tldr h2 {
color: white;
font-size: 20px;
margin-bottom: 14px;
padding-bottom: 10px;
border-bottom: 2px solid rgba(255,255,255,0.2);
}
.tldr ul {
margin: 0 0 0 20px;
}
.tldr li {
margin: 8px 0;
font-size: 14px;
line-height: 1.6;
color: rgba(255,255,255,0.92);
}
.tldr li strong {
color: white;
}
.tldr a {
color: var(--sky-blue-30);
}
/* ===== CALLOUTS ===== */ .callout {
background: white;
border-left: 4px solid var(--primary-medium);
padding: 16px 20px;
border-radius: 0 12px 12px 0;
margin: 16px 0;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.callout p {
margin: 0;
}
.callout strong {
color: var(--primary-dark);
}
.callout-pink {
background: white;
border-left: 4px solid var(--sunset-pink);
padding: 16px 20px;
border-radius: 0 12px 12px 0;
margin: 16px 0;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.callout-pink p {
margin: 0;
}
.callout-pink strong {
color: var(--primary-dark);
}
.callout-green {
background: white;
border-left: 4px solid var(--green);
padding: 16px 20px;
border-radius: 0 12px 12px 0;
margin: 16px 0;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.callout-green p {
margin: 0;
}
.callout-green strong {
color: var(--primary-dark);
}
.callout-purple {
background: white;
border-left: 4px solid var(--purple);
padding: 16px 20px;
border-radius: 0 12px 12px 0;
margin: 16px 0;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.callout-purple p {
margin: 0;
}
.callout-purple strong {
color: var(--primary-dark);
}
/* ===== TABLES ===== */ table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
margin: 16px 0;
font-size: 13px;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
th {
background: var(--primary-dark);
color: white;
font-family: 'Poppins', sans-serif;
font-weight: 600;
font-size: 12px;
padding: 12px 16px;
text-align: left;
letter-spacing: 0.3px;
}
td {
padding: 10px 16px;
border-bottom: 1px solid var(--gray-lighter);
background: white;
color: var(--gray-dark);
line-height: 1.5;
vertical-align: top;
}
tr:nth-child(even) td {
background: var(--sky-blue-0);
}
tr:last-child td {
border-bottom: none;
}
td strong {
color: var(--primary-dark);
}
/* ===== CARDS ===== */ .card {
background: white;
border-radius: 14px;
border: 1px solid #e2e8f0;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
transition: transform 0.2s, box-shadow 0.2s;
}
.card:hover {
transform: translateY(-3px);
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
.card-banner {
height: 6px;
background: linear-gradient(90deg, var(--livery-blue), var(--map-pink));
}
.card-body {
padding: 24px;
}
.card-body h3 {
font-size: 16px;
color: var(--primary-dark);
margin: 0 0 8px 0;
}
.card-body p {
font-size: 13px;
color: var(--gray-dark);
line-height: 1.6;
}
.card-tag {
display: inline-block;
font-family: 'Poppins', sans-serif;
font-size: 11px;
font-weight: 600;
color: var(--primary-medium);
background: rgba(31,116,223,0.1);
padding: 3px 10px;
border-radius: 20px;
margin-bottom: 12px;
}
/* ===== COMPARISON GRID ===== */ .comparison-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 16px;
margin: 16px 0;
}
.comparison-card {
background: white;
border-radius: 14px;
padding: 20px;
border-top: 4px solid var(--primary-medium);
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.comparison-card h4 {
margin-top: 0;
font-size: 14px;
}
.comparison-card p {
font-size: 13px;
}
.comparison-card ul {
font-size: 13px;
margin-left: 18px;
}
.comparison-card.accent {
border-top-color: var(--sunset-pink);
}
.comparison-card.teal, .comparison-card.green {
border-top-color: var(--green);
}
.comparison-card.purple {
border-top-color: var(--purple);
}
/* ===== LAYER / STACK DIAGRAMS ===== */ .layer-diagram {
display: flex;
flex-direction: column;
gap: 0;
margin: 20px 0;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}
.layer {
padding: 14px 20px;
text-align: center;
font-family: 'Poppins', sans-serif;
font-weight: 600;
font-size: 14px;
color: #fff;
}
.layer small {
display: block;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
font-size: 12px;
opacity: 0.85;
margin-top: 3px;
}
/* Pre-built layer colors (use .layer-1 through .layer-5 for generic stacks) */ .layer-1, .layer-org {
background: var(--primary-dark);
}
.layer-2, .layer-dept {
background: var(--sky-blue-70);
}
.layer-3, .layer-team {
background: var(--sky-blue-50);
}
.layer-4, .layer-role {
background: var(--sky-blue-30);
color: var(--primary-dark);
}
.layer-5, .layer-individual {
background: var(--sunset-pink);
}
/* ===== STAT BOXES ===== */ .stats {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin: 16px 0;
}
.stat {
background: white;
border-radius: 12px;
padding: 16px 20px;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
min-width: 140px;
flex: 1;
}
.stat-value {
font-family: 'Poppins', sans-serif;
font-weight: 700;
font-size: 24px;
color: var(--primary-medium);
}
.stat-label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--gray);
margin-top: 4px;
}
/* ===== SOURCES ===== */ .source-list {
font-size: 12px;
color: var(--gray);
}
.source-list li {
margin: 4px 0;
}
.source-list a {
color: var(--gray-dark);
}
.source-list a:hover {
color: var(--primary-medium);
}
/* ===== BACK LINK ===== */ .back-link {
display: inline-block;
font-family: 'Poppins', sans-serif;
font-size: 13px;
font-weight: 500;
color: var(--primary-medium);
text-decoration: none;
padding: 6px 14px;
border-radius: 20px;
transition: all 0.2s;
margin: 20px 0;
}
.back-link:hover {
background: var(--primary-lighter);
color: var(--primary-dark);
text-decoration: none;
}
/* ===== FOOTER ===== */ footer {
background: var(--primary-dark);
color: rgba(255,255,255,0.5);
text-align: center;
padding: 32px;
font-size: 12px;
line-height: 1.8;
margin-top: 20px;
}
footer strong {
color: white;
}
footer .nice {
color: var(--sky-blue-30);
font-style: italic;
}
/* ===== UTILITIES ===== */ .text-center {
text-align: center;
}
.text-muted {
color: var(--gray);
}
.text-small {
font-size: 12px;
}
.mt-0 {
margin-top: 0;
}
.mb-0 {
margin-bottom: 0;
}
.highlight-row td {
background: var(--sky-blue-5) !important;
font-weight: 600;
}
/* ===== RESPONSIVE ===== */ @media (max-width: 700px) {
header {
padding: 40px 24px;
}
header h1 {
font-size: 24px;
}
nav {
padding: 10px 16px;
gap: 4px;
}
nav a {
font-size: 12px;
padding: 5px 10px;
}
.comparison-grid {
grid-template-columns: 1fr;
}
.stats {
flex-direction: column;
}
}
/* =============================================================================
APP SHELL — Homepage layout (scoped to .app-shell so report pages are safe)
============================================================================= */
/* --- Animations --- */
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
.app-shell { animation: fadeIn 0.35s ease-out; }
/* --- App Header (frosted glass) --- */
.app-shell .app-header {
position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
height: 56px; display: flex; align-items: center; gap: 12px;
padding: 0 20px;
background: rgba(255,255,255,0.85);
backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid var(--gray-lighter);
transition: box-shadow 0.2s, background 0.2s;
}
.app-shell .app-header.scrolled {
box-shadow: 0 1px 12px rgba(0,22,51,0.08);
background: rgba(255,255,255,0.97);
}
.app-shell .header-logo {
display: flex; align-items: center; gap: 10px;
text-decoration: none; color: inherit;
}
.app-shell .header-logo img {
height: 28px; width: auto;
}
.app-shell .header-logo span {
font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 16px;
color: var(--primary-dark);
}
.app-shell .header-title {
font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 400;
color: var(--gray); border-left: 1px solid var(--gray-lighter);
padding-left: 12px; margin-left: 4px;
}
.app-shell .header-right {
margin-left: auto; display: flex; align-items: center; gap: 4px;
}
.app-shell .hamburger {
background: none; border: none; cursor: pointer; padding: 8px;
border-radius: 8px; color: var(--primary-dark); display: flex; align-items: center;
transition: background 0.15s;
}
.app-shell .hamburger:hover { background: var(--gray-lighter); }
.app-shell .hamburger svg { width: 20px; height: 20px; }
.app-shell .theme-toggle {
background: none; border: none; cursor: pointer; padding: 8px;
border-radius: 8px; color: var(--gray-dark); display: flex; align-items: center;
transition: background 0.15s;
}
.app-shell .theme-toggle:hover { background: var(--gray-lighter); }
.app-shell .theme-toggle svg { width: 20px; height: 20px; }
/* --- Sidebar --- */
.app-shell .app-sidebar {
position: fixed; top: 56px; left: 0; bottom: 0; width: 280px;
background: white; border-right: 1px solid var(--gray-lighter);
z-index: 900; overflow-y: auto;
transform: translateX(-100%); transition: transform 0.25s ease;
}
.app-shell .app-sidebar.open { transform: translateX(0); }
.app-shell .sidebar-overlay {
position: fixed; inset: 0; z-index: 899;
background: rgba(0,22,51,0.4); opacity: 0; pointer-events: none;
transition: opacity 0.25s ease;
}
.app-shell .sidebar-overlay.visible { opacity: 1; pointer-events: auto; }
.app-shell .sidebar-home {
display: flex; align-items: center; gap: 10px;
padding: 14px 24px; font-family: 'Poppins', sans-serif;
font-size: 14px; font-weight: 600; color: var(--primary-medium);
text-decoration: none; border-left: 3px solid var(--primary-medium);
background: var(--sky-blue-5);
}
.app-shell .sidebar-home:hover { text-decoration: none; }
.app-shell .sidebar-home svg { width: 18px; height: 18px; opacity: 0.8; }
.app-shell .sidebar-section { padding: 8px 0; }
.app-shell .sidebar-section + .sidebar-section { border-top: 1px solid var(--gray-lighter); }
.app-shell .sidebar-section-title {
font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 700;
text-transform: uppercase; letter-spacing: 1.5px; color: var(--gray);
padding: 12px 24px 6px;
}
.app-shell .sidebar-link {
display: block; padding: 8px 24px; font-family: 'Open Sans', sans-serif;
font-size: 13px; color: var(--gray-dark); text-decoration: none;
border-left: 3px solid transparent; transition: all 0.15s;
}
.app-shell .sidebar-link:hover {
background: var(--sky-blue-5); color: var(--primary-medium);
border-left-color: var(--gray-lighter); text-decoration: none;
}
/* --- Main Content Area --- */
.app-shell .app-main {
margin-top: 56px; padding: 0 24px 40px;
max-width: 1200px; margin-left: auto; margin-right: auto;
}
/* --- Hero --- */
.app-shell .app-hero {
background: linear-gradient(135deg, var(--primary-dark) 0%, var(--sky-blue-70) 50%, var(--primary-medium) 100%);
color: white; padding: 48px 40px 40px; text-align: center;
border-radius: 20px; margin: 24px 0; position: relative; overflow: hidden;
}
.app-shell .app-hero::before {
content: ''; position: absolute; top: -40%; right: -10%;
width: 400px; height: 400px; border-radius: 50%;
background: rgba(255,255,255,0.04);
}
.app-shell .app-hero::after {
content: ''; position: absolute; bottom: -30%; left: -5%;
width: 300px; height: 300px; border-radius: 50%;
background: rgba(255,255,255,0.03);
}
.app-shell .app-hero h1 {
font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 32px;
letter-spacing: 0.5px; position: relative; z-index: 1; margin: 0;
}
.app-shell .app-hero .tagline {
font-family: 'Poppins', sans-serif; font-size: 15px; font-weight: 300;
color: var(--sky-blue-10); letter-spacing: 0.5px; margin-top: 6px;
position: relative; z-index: 1;
}
/* --- Search Bar --- */
.app-shell .search-bar {
position: relative; max-width: 480px; margin: 20px auto 0; z-index: 1;
}
.app-shell .search-bar input {
width: 100%; padding: 12px 16px 12px 44px;
border: none; border-radius: 24px;
font-family: 'Open Sans', sans-serif; font-size: 14px;
color: var(--primary-dark); background: white; outline: none;
box-shadow: 0 2px 12px rgba(0,0,0,0.1);
transition: box-shadow 0.2s;
}
.app-shell .search-bar input:focus {
box-shadow: 0 2px 12px rgba(0,0,0,0.1), 0 0 0 3px rgba(61,147,239,0.25);
}
.app-shell .search-bar input::placeholder { color: var(--gray-light); }
.app-shell .search-bar .search-icon {
position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
width: 18px; height: 18px; color: var(--gray-light); pointer-events: none;
}
/* --- Tag Pills --- */
.app-shell .tag-pills {
display: flex; flex-wrap: wrap; gap: 8px;
justify-content: center; margin: 0 0 28px;
}
.app-shell .tag-pill {
font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 500;
padding: 5px 14px; border-radius: 20px;
border: 1px solid rgba(0,22,51,0.1); background: white;
color: var(--gray-dark); cursor: pointer;
transition: all 0.15s ease; user-select: none;
}
.app-shell .tag-pill:hover { border-color: var(--primary-medium); color: var(--primary-medium); }
.app-shell .tag-pill.active {
background: var(--primary-medium); color: white; border-color: var(--primary-medium);
}
/* --- Section Headers --- */
.app-shell .section-header {
font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 700;
text-transform: uppercase; letter-spacing: 1.5px; color: var(--gray);
padding-bottom: 10px; border-bottom: 1px solid var(--gray-lighter);
margin-bottom: 20px; margin-top: 8px;
display: flex; align-items: center; gap: 8px;
}
.app-shell .section-count {
font-size: 11px; font-weight: 600; color: white;
background: var(--primary-medium); padding: 1px 8px;
border-radius: 10px; min-width: 22px; text-align: center;
}
/* --- Projects Grid --- */
.app-shell .projects-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 24px; margin-bottom: 32px;
}
/* --- Project Cards --- */
.app-shell .project-card {
display: block; text-decoration: none; color: inherit;
background: white; border-radius: 16px;
border: 1px solid rgba(0,22,51,0.06);
overflow: hidden;
box-shadow: 0 1px 3px rgba(0,22,51,0.06);
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.app-shell .project-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 32px rgba(0,22,51,0.12);
border-color: rgba(31,116,223,0.2);
text-decoration: none;
}
.app-shell .card-thumb-wrap {
height: 140px; position: relative; overflow: hidden;
}
.app-shell .card-thumb-wrap .card-gradient {
width: 100%; height: 100%;
transition: transform 0.4s ease;
}
.app-shell .project-card:hover .card-gradient { transform: scale(1.06); }
.app-shell .card-thumb-wrap .card-thumb {
width: 100%; height: 100%; object-fit: cover; object-position: top;
transition: transform 0.4s ease;
}
.app-shell .project-card:hover .card-thumb { transform: scale(1.06); }
.app-shell .card-new-badge {
position: absolute; top: 12px; right: 12px;
font-family: 'Poppins', sans-serif; font-size: 10px; font-weight: 600;
color: white; background: var(--sunset-pink);
padding: 2px 10px; border-radius: 10px; letter-spacing: 0.3px;
}
.app-shell .project-card .card-body {
padding: 20px 24px 16px;
}
.app-shell .project-card .card-tag {
display: inline-block; font-family: 'Poppins', sans-serif;
font-size: 11px; font-weight: 600;
color: var(--primary-medium); background: rgba(31,116,223,0.08);
padding: 3px 10px; border-radius: 20px; margin-bottom: 10px;
}
.app-shell .project-card .card-body h3 {
font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 16px;
color: var(--primary-dark); margin: 0 0 6px 0; line-height: 1.3;
}
.app-shell .project-card .card-body p {
font-size: 13px; color: var(--gray-dark); line-height: 1.55; margin: 0;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.app-shell .card-footer {
display: flex; align-items: center; justify-content: space-between;
margin-top: 12px;
}
.app-shell .card-updated {
font-size: 11px; color: var(--gray);
}
.app-shell .card-external-icon {
width: 14px; height: 14px; color: var(--gray-light);
}
.app-shell .project-card.hidden { display: none; }
/* --- Empty State --- */
.app-shell .empty-state {
text-align: center; padding: 48px 20px; color: var(--gray); font-size: 14px;
}
/* --- Footer --- */
.app-shell .app-footer {
background: var(--primary-dark); color: rgba(255,255,255,0.5);
text-align: center; padding: 28px; font-size: 12px; line-height: 1.8;
margin-top: 20px;
}
.app-shell .app-footer strong { color: white; }
.app-shell .app-footer .nice { color: var(--sky-blue-30); font-style: italic; }
/* --- No Results --- */
.app-shell .no-results {
text-align: center; padding: 40px 20px; color: var(--gray); font-size: 14px;
display: none;
}
/* ===== DARK MODE ===== */
[data-theme="dark"] .app-shell { background: #0f172a; color: #e2e8f0; }
[data-theme="dark"] .app-shell .app-header {
background: rgba(15,23,42,0.85); border-bottom-color: rgba(255,255,255,0.06);
}
[data-theme="dark"] .app-shell .app-header.scrolled {
background: rgba(15,23,42,0.97); box-shadow: 0 1px 12px rgba(0,0,0,0.3);
}
[data-theme="dark"] .app-shell .header-logo span { color: #e2e8f0; }
[data-theme="dark"] .app-shell .header-title { color: #64748b; border-left-color: #334155; }
[data-theme="dark"] .app-shell .hamburger { color: #e2e8f0; }
[data-theme="dark"] .app-shell .hamburger:hover { background: #1e293b; }
[data-theme="dark"] .app-shell .theme-toggle { color: #94a3b8; }
[data-theme="dark"] .app-shell .theme-toggle:hover { background: #1e293b; }
[data-theme="dark"] .app-shell .app-sidebar {
background: #1e293b; border-right-color: rgba(255,255,255,0.06);
}
[data-theme="dark"] .app-shell .sidebar-overlay.visible { background: rgba(0,0,0,0.6); }
[data-theme="dark"] .app-shell .sidebar-section + .sidebar-section { border-top-color: #334155; }
[data-theme="dark"] .app-shell .sidebar-home { background: #0f172a; color: #60a5fa; border-left-color: #3b82f6; }
[data-theme="dark"] .app-shell .sidebar-link { color: #94a3b8; }
[data-theme="dark"] .app-shell .sidebar-link:hover { background: #0f172a; color: #60a5fa; }
[data-theme="dark"] .app-shell .sidebar-section-title { color: #64748b; }
[data-theme="dark"] .app-shell .search-bar input {
background: #1e293b; color: #e2e8f0;
box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}
[data-theme="dark"] .app-shell .search-bar input:focus {
box-shadow: 0 2px 12px rgba(0,0,0,0.3), 0 0 0 3px rgba(59,130,246,0.3);
}
[data-theme="dark"] .app-shell .tag-pill {
background: #1e293b; border-color: rgba(255,255,255,0.08); color: #94a3b8;
}
[data-theme="dark"] .app-shell .tag-pill:hover { border-color: #3b82f6; color: #60a5fa; }
[data-theme="dark"] .app-shell .tag-pill.active { background: #3b82f6; color: white; border-color: #3b82f6; }
[data-theme="dark"] .app-shell .section-header { color: #64748b; border-bottom-color: #1e293b; }
[data-theme="dark"] .app-shell .section-count { background: #3b82f6; }
[data-theme="dark"] .app-shell .project-card {
background: #1e293b; border-color: rgba(255,255,255,0.06);
}
[data-theme="dark"] .app-shell .project-card:hover {
border-color: rgba(59,130,246,0.3);
box-shadow: 0 12px 32px rgba(0,0,0,0.3);
}
[data-theme="dark"] .app-shell .project-card .card-body h3 { color: #e2e8f0; }
[data-theme="dark"] .app-shell .project-card .card-body p { color: #94a3b8; }
[data-theme="dark"] .app-shell .project-card .card-tag {
background: rgba(59,130,246,0.15); color: #60a5fa;
}
[data-theme="dark"] .app-shell .card-updated { color: #64748b; }
[data-theme="dark"] .app-shell .card-new-badge { box-shadow: 0 0 8px rgba(255,82,123,0.3); }
[data-theme="dark"] .app-shell .empty-state { color: #64748b; }
[data-theme="dark"] .app-shell .no-results { color: #64748b; }
[data-theme="dark"] .app-shell .app-footer { background: #0a0f1a; }
/* ===== APP SHELL RESPONSIVE ===== */
@media (max-width: 768px) {
.app-shell .app-hero { padding: 36px 24px 32px; border-radius: 14px; margin: 16px 0; }
.app-shell .app-hero h1 { font-size: 24px; }
.app-shell .header-title { display: none; }
.app-shell .projects-grid { grid-template-columns: 1fr; gap: 16px; }
}
@media (min-width: 769px) and (max-width: 1024px) {
.app-shell .projects-grid { grid-template-columns: repeat(2, 1fr); }
}