/* ===================================================== SPRING BOOT ENGINEERING PLATFORM main.css — Core Variables, Typography, Layout ===================================================== */ /* Fonts are loaded via tags in each HTML file's to avoid render-blocking @import network requests. */ /* ===================================================== CSS CUSTOM PROPERTIES ===================================================== */ :root { /* Paper aesthetic colors */ --color-bg: #FAF8F5; --color-bg-alt: #F4F1EC; --color-bg-sidebar: #EFECE6; --color-surface: #FFFFFF; --color-surface-raised: #FDFCFB; /* Text colors */ --color-text-primary: #1A1814; --color-text-secondary: #4A4540; --color-text-muted: #8A8480; --color-text-inverse: #FAF8F5; /* Brand / Accent */ --color-accent: #1E40AF; --color-accent-hover: #1D3A9E; --color-accent-light: #DBEAFE; --color-accent-subtle: #EFF6FF; /* Semantic colors */ --color-success: #166534; --color-success-bg: #DCFCE7; --color-warning: #92400E; --color-warning-bg: #FEF3C7; --color-danger: #991B1B; --color-danger-bg: #FEE2E2; --color-info: #1E3A5F; --color-info-bg: #DBEAFE; /* Section category colors */ --color-java: #B45309; --color-java-bg: #FEF3C7; --color-spring: #166534; --color-spring-bg: #DCFCE7; --color-spring-tint: #F0FDF4; --color-advanced: #6D28D9; --color-advanced-bg: #EDE9FE; --color-devops: #0F766E; --color-devops-bg: #CCFBF1; --color-api: #1D4ED8; --color-api-bg: #EFF6FF; /* Borders */ --color-border: #E2DDD6; --color-border-strong: #C8C2BA; --color-border-accent: #BFDBFE; /* Code block */ --color-code-bg: #1E1E2E; --color-code-text: #CDD6F4; --color-code-comment: #6C7086; --color-code-keyword: #CBA6F7; --color-code-string: #A6E3A1; --color-code-number: #FAB387; --color-code-annotation: #89DCEB; --color-code-type: #89B4FA; --color-code-function: #F9E2AF; --color-code-line-highlight: #313244; /* Typography */ --font-serif: 'Lora', Georgia, 'Times New Roman', serif; --font-display: 'Playfair Display', Georgia, serif; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace; /* Font sizes */ --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-4xl: 2.25rem; --text-5xl: 3rem; /* Line heights */ --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed: 1.625; --leading-loose: 2; /* Spacing */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; /* Layout */ --sidebar-width: 280px; --topnav-height: 64px; --content-max-width: 900px; --content-padding: 2.5rem; /* Shadows */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.05); --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -1px rgba(0,0,0,0.04); --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -2px rgba(0,0,0,0.04); --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.08), 0 10px 10px -5px rgba(0,0,0,0.03); --shadow-code: 0 8px 30px rgba(0,0,0,0.25); /* Border radius */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px; /* Transitions */ --transition-fast: 150ms ease; --transition-base: 250ms ease; --transition-slow: 400ms ease; /* Z-index layers */ --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-overlay: 200; --z-modal: 300; --z-toast: 400; } /* ===================================================== DARK MODE VARIABLES ===================================================== */ [data-theme="dark"] { --color-bg: #0D1117; --color-bg-alt: #161B22; --color-bg-sidebar: #13161E; --color-surface: #1C2128; --color-surface-raised: #21262D; --color-text-primary: #E6EDF3; --color-text-secondary: #8B949E; --color-text-muted: #6E7681; --color-text-inverse: #0D1117; --color-accent: #4493F8; --color-accent-hover: #58A6FF; --color-accent-light: #1F3358; --color-accent-subtle: #0D1B2E; --color-success: #3FB950; --color-success-bg: #0B2818; --color-warning: #D29922; --color-warning-bg: #2B1D00; --color-danger: #F85149; --color-danger-bg: #2D0B0B; --color-info: #79C0FF; --color-info-bg: #0D1F33; --color-java: #E3A946; --color-java-bg: #2B1D00; --color-spring: #3FB950; --color-spring-bg: #0B2818; --color-spring-tint: #0B2818; --color-advanced: #BC8CFF; --color-advanced-bg: #1E1040; --color-devops: #2DD4BF; --color-devops-bg: #042F2E; --color-api: #4493F8; --color-api-bg: #0D1B2E; --color-border: #30363D; --color-border-strong: #484F58; --color-border-accent: #1F3358; --shadow-sm: 0 1px 2px rgba(0,0,0,0.3); --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.4), 0 2px 4px -1px rgba(0,0,0,0.2); --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.5), 0 4px 6px -2px rgba(0,0,0,0.3); --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.5), 0 10px 10px -5px rgba(0,0,0,0.25); --shadow-code: 0 8px 30px rgba(0,0,0,0.6); } /* ===================================================== CSS RESET & BASE ===================================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-serif); font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--color-text-primary); background-color: var(--color-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background-color 0.3s ease, color 0.3s ease; } /* Smooth dark mode transitions on key elements */ .sidebar, .topnav, .content-page, .sticky-toc, .concept-card, .callout, .quiz-block, .diagram-box, .interview-qa, .pitfall-item, .section-complete-banner, .tabs, .tab-btn, .tab-panel { transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease; } img, svg, video { display: block; max-width: 100%; } a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 2px; transition: color var(--transition-fast); } a:hover { color: var(--color-accent-hover); } button { cursor: pointer; font-family: inherit; border: none; background: none; } input, textarea, select { font-family: inherit; font-size: inherit; } ul, ol { list-style: none; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); line-height: var(--leading-tight); color: var(--color-text-primary); font-weight: 700; } /* ===================================================== LAYOUT STRUCTURE ===================================================== */ /* App shell */ .app-shell { display: flex; min-height: 100vh; } /* Sidebar */ .sidebar { width: 280px; width: var(--sidebar-width); min-height: 100vh; background: #EFECE6; background: var(--color-bg-sidebar); border-right: 1px solid #E2DDD6; border-right: 1px solid var(--color-border); position: fixed; top: 0; left: 0; z-index: 100; z-index: var(--z-sticky); overflow-y: auto; transition: transform 250ms ease; transition: transform var(--transition-base); display: flex; flex-direction: column; box-shadow: 2px 0 8px rgba(0,0,0,0.04); } .sidebar::-webkit-scrollbar { width: 4px; } .sidebar::-webkit-scrollbar-track { background: transparent; } .sidebar::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: var(--radius-full); } /* Main content area */ .main-content { margin-left: 280px; margin-left: var(--sidebar-width); min-height: 100vh; flex: 1; display: flex; flex-direction: column; } /* Top navigation */ .topnav { height: var(--topnav-height); background: var(--color-surface); border-bottom: 1px solid var(--color-border); position: sticky; top: 0; z-index: var(--z-sticky); display: flex; align-items: center; padding: 0 var(--content-padding); gap: var(--space-4); box-shadow: var(--shadow-sm); } /* Content page */ .content-page { flex: 1; padding: var(--space-12) var(--content-padding); max-width: calc(var(--content-max-width) + var(--content-padding) * 2); } /* Content area (reading column) */ .content-body { max-width: var(--content-max-width); } /* ===================================================== SIDEBAR COMPONENTS ===================================================== */ .sidebar-header { padding: 24px 20px; padding: var(--space-6) var(--space-5); border-bottom: 1px solid #E2DDD6; border-bottom: 1px solid var(--color-border); background: #F4F1EC; background: var(--color-bg-alt); flex-shrink: 0; } .sidebar-logo { font-family: Georgia, 'Playfair Display', serif; font-family: var(--font-display); font-size: 18px; font-size: var(--text-lg); font-weight: 700; color: #1A1814 !important; color: var(--color-text-primary) !important; text-decoration: none !important; display: flex; align-items: center; gap: 12px; gap: var(--space-3); } .sidebar-logo .logo-icon { width: 36px; height: 36px; background: #1E40AF; background: var(--color-accent); border-radius: 8px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; color: white !important; font-size: 14px; font-family: 'JetBrains Mono', monospace; font-family: var(--font-mono); font-weight: 600; flex-shrink: 0; text-decoration: none !important; } .sidebar-logo-text { display: flex; flex-direction: column; } .sidebar-logo-title { font-size: var(--text-sm); font-weight: 700; line-height: 1.2; font-family: var(--font-sans); } .sidebar-logo-sub { font-size: var(--text-xs); color: var(--color-text-muted); font-family: var(--font-sans); font-weight: 400; } /* Progress bar in sidebar */ .sidebar-progress { padding: 1rem 1.25rem; padding: var(--space-4) var(--space-5); border-bottom: 1px solid #E2DDD6; border-bottom: 1px solid var(--color-border); flex-shrink: 0; } .sidebar-progress-label { font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif; font-family: var(--font-sans); font-size: 11px; font-size: var(--text-xs); font-weight: 600; color: #8A8480; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; display: flex; justify-content: space-between; } .progress-bar-track { height: 6px; background: #E2DDD6; background: var(--color-border); border-radius: 999px; border-radius: var(--radius-full); overflow: hidden; } .progress-bar-fill { height: 100%; background: linear-gradient(90deg, #1E40AF, #3B82F6); background: linear-gradient(90deg, var(--color-accent), #3B82F6); border-radius: 999px; border-radius: var(--radius-full); transition: width 400ms ease; transition: width var(--transition-slow); } /* Sidebar navigation */ .sidebar-nav { flex: 1; padding: var(--space-4) 0; } .sidebar-section-group { margin-bottom: var(--space-2); } .sidebar-section-label { font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif; font-family: var(--font-sans); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #8A8480; color: var(--color-text-muted); padding: 12px 20px 4px; padding: var(--space-3) var(--space-5) var(--space-1); display: block; } .sidebar-nav-item { display: flex; align-items: center; gap: 10px; gap: var(--space-3); padding: 7px 20px; padding: var(--space-2) var(--space-5); color: #4A4540 !important; color: var(--color-text-secondary) !important; text-decoration: none !important; font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif; font-family: var(--font-sans); font-size: 14px; font-size: var(--text-sm); font-weight: 400; transition: all 150ms ease; transition: all var(--transition-fast); border-left: 3px solid transparent; position: relative; line-height: 1.4; } .sidebar-nav-item:hover { background: #F4F1EC; background: var(--color-bg-alt); color: #1A1814 !important; color: var(--color-text-primary) !important; border-left-color: #C8C2BA; border-left-color: var(--color-border-strong); text-decoration: none !important; } .sidebar-nav-item.active { background: #EFF6FF; background: var(--color-accent-subtle); color: #1E40AF !important; color: var(--color-accent) !important; border-left-color: #1E40AF; border-left-color: var(--color-accent); font-weight: 500; text-decoration: none !important; } .sidebar-nav-item .nav-num { font-size: 10px; font-weight: 700; color: #8A8480; width: 20px; flex-shrink: 0; font-family: 'JetBrains Mono', 'Courier New', monospace; } .sidebar-nav-item.active .nav-num { color: #1E40AF; } .sidebar-nav-item .nav-check { width: 16px; height: 16px; border-radius: var(--radius-full); background: var(--color-success-bg); border: 1px solid var(--color-success); display: none; align-items: center; justify-content: center; flex-shrink: 0; margin-left: auto; } .sidebar-nav-item.completed .nav-check { display: flex; } .sidebar-nav-item .nav-check::after { content: '✓'; font-size: 9px; color: var(--color-success); font-weight: 700; } /* ===================================================== TOP NAVIGATION COMPONENTS ===================================================== */ .topnav-breadcrumb { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-sans); font-size: var(--text-sm); color: var(--color-text-muted); } .topnav-breadcrumb a { color: var(--color-text-muted); text-decoration: none; } .topnav-breadcrumb a:hover { color: var(--color-accent); } .topnav-breadcrumb .separator { color: var(--color-border-strong); } .topnav-breadcrumb .current { color: var(--color-text-primary); font-weight: 500; } .topnav-actions { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); } .btn-icon { width: 36px; height: 36px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; color: var(--color-text-muted); transition: all var(--transition-fast); font-size: var(--text-lg); text-decoration: none; } .btn-icon:hover { background: var(--color-bg-alt); color: var(--color-text-primary); text-decoration: none; } /* Mobile menu toggle */ .mobile-menu-btn { display: none; width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: var(--radius-md); color: var(--color-text-secondary); transition: all var(--transition-fast); } .mobile-menu-btn:hover { background: var(--color-bg-alt); } /* ===================================================== TYPOGRAPHY — CONTENT ===================================================== */ .content-body h1 { font-size: var(--text-4xl); font-weight: 700; margin-bottom: var(--space-4); line-height: 1.15; letter-spacing: -0.02em; } .content-body h2 { font-size: var(--text-3xl); font-weight: 700; margin-top: var(--space-16); margin-bottom: var(--space-6); padding-top: var(--space-6); border-top: 2px solid var(--color-border); line-height: 1.2; letter-spacing: -0.01em; } .content-body h2:first-of-type { margin-top: var(--space-10); border-top: none; padding-top: 0; } .content-body h3 { font-size: var(--text-2xl); font-weight: 700; margin-top: var(--space-12); margin-bottom: var(--space-4); color: var(--color-text-primary); } .content-body h4 { font-size: var(--text-xl); font-weight: 600; margin-top: var(--space-8); margin-bottom: var(--space-3); font-family: var(--font-display); } .content-body p { font-size: var(--text-lg); line-height: var(--leading-relaxed); margin-bottom: var(--space-5); color: var(--color-text-primary); } .content-body p.lead { font-size: var(--text-xl); color: var(--color-text-secondary); line-height: var(--leading-relaxed); font-style: italic; margin-bottom: var(--space-8); } .content-body ul, .content-body ol { margin-bottom: var(--space-5); padding-left: var(--space-6); } .content-body ul { list-style: disc; } .content-body ol { list-style: decimal; } .content-body li { font-size: var(--text-base); line-height: var(--leading-relaxed); margin-bottom: var(--space-2); color: var(--color-text-primary); } .content-body strong { font-weight: 600; color: var(--color-text-primary); } .content-body em { font-style: italic; color: var(--color-text-secondary); } .content-body code { font-family: var(--font-mono); font-size: 0.875em; background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 0.1em 0.4em; color: var(--color-danger); overflow-wrap: break-word; word-break: break-word; } .content-body blockquote { border-left: 4px solid var(--color-accent); padding: var(--space-4) var(--space-6); background: var(--color-accent-subtle); border-radius: 0 var(--radius-md) var(--radius-md) 0; margin: var(--space-8) 0; font-style: italic; color: var(--color-info); } .content-body blockquote p { margin-bottom: 0; color: var(--color-info); } /* Section header */ .section-header { padding-bottom: var(--space-8); margin-bottom: var(--space-8); border-bottom: 1px solid var(--color-border); } .section-tag { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); margin-bottom: var(--space-4); } .section-tag.java { background: var(--color-java-bg); color: var(--color-java); } .section-tag.spring { background: var(--color-spring-bg); color: var(--color-spring); } .section-tag.advanced { background: var(--color-advanced-bg); color: var(--color-advanced); } .section-tag.devops { background: var(--color-devops-bg); color: var(--color-devops); } .section-tag.api { background: var(--color-api-bg); color: var(--color-api); } .section-meta { display: flex; align-items: center; gap: var(--space-5); margin-top: var(--space-4); font-family: var(--font-sans); font-size: var(--text-sm); color: var(--color-text-muted); flex-wrap: wrap; } .section-meta-item { display: flex; align-items: center; gap: var(--space-2); } /* ===================================================== RESPONSIVE ===================================================== */ @media (max-width: 1024px) { :root { --sidebar-width: 260px; --content-padding: 2rem; } } @media (max-width: 768px) { .sidebar { transform: translateX(-100%); } .sidebar.mobile-open { transform: translateX(0); box-shadow: var(--shadow-xl); } .main-content { margin-left: 0; } .mobile-menu-btn { display: flex; } :root { --content-padding: 1.25rem; } .content-body h1 { font-size: var(--text-3xl); } .content-body h2 { font-size: var(--text-2xl); margin-top: var(--space-10); } .content-body h3 { font-size: var(--text-xl); } .content-body p { font-size: var(--text-base); } } /* ===================================================== SCROLLBAR ===================================================== */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--color-bg-alt); } ::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: var(--radius-full); } ::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); } /* ===================================================== UTILITY CLASSES ===================================================== */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; } .font-sans { font-family: var(--font-sans); } .font-mono { font-family: var(--font-mono); } .font-serif { font-family: var(--font-serif); } .font-display { font-family: var(--font-display); } .text-muted { color: var(--color-text-muted); } .text-accent { color: var(--color-accent); } .text-success { color: var(--color-success); } .text-danger { color: var(--color-danger); } .mt-0 { margin-top: 0; } .mt-4 { margin-top: var(--space-4); } .mt-8 { margin-top: var(--space-8); } .mt-12 { margin-top: var(--space-12); } .mb-0 { margin-bottom: 0; } .mb-4 { margin-bottom: var(--space-4); } .mb-8 { margin-bottom: var(--space-8); } .hidden { display: none !important; } /* Overlay for mobile */ .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: calc(var(--z-sticky) - 1); } .sidebar-overlay.active { display: block; }