/* * labview.hu - Upgraded Design System (v3 - Green + Background Image) * Filename: labview-design.css * * Instructions: * 1. Link this file *after* the main Bootstrap 5 CSS link in your . * 2. Add the "Inter" font link (see below) to your . * 3. Add `data-bs-theme="light"` to your tag to start. * 4. Make sure you have a `labview-snippet.png` image in your `img/` folder * or update the `background-image` URL accordingly. */ /* ===== Section 1: Global Design Tokens (Variables) ===== */ :root { /* Color Palette (Professional & Tech - NEW GREEN) */ --color-primary: #76B900; /* Our new "Engineering Green" */ --color-primary-hover: #5E9200; /* A darker shade for hover */ --color-bg-light: #ffffff; --color-bg-dark: #0d1117; /* GitHub's dark background color */ --color-border-light: #e0e0e0; --color-border-dark: #30363d; --color-text-light: #f0f6fc; --color-text-dark: #1f2328; --color-bento-light: #f6f8fa; --color-bento-dark: #161b22; /* Typography */ --font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Sizing & Effects */ --border-radius-global: 0.75rem; /* Softer, more modern corners */ --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.05); --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.08); --transition-fast: 0.2s ease-in-out; } /* ===== Section 2: Dark Mode Theme ===== */ [data-bs-theme="dark"] { /* Override Bootstrap's default dark theme with our custom colors */ --bs-body-bg: var(--color-bg-dark); --bs-body-color: var(--color-text-light); --bs-border-color: var(--color-border-dark); --bs-secondary-bg: var(--color-bento-dark); /* For bento boxes */ /* Card overrides */ --bs-card-bg: var(--color-bento-dark); --bs-list-group-bg: transparent; /* Heading/Link colors */ --bs-heading-color: #ffffff; --bs-link-color: var(--color-primary); /* Dark mode specific background for hero if needed, but the filter should handle it */ .hero-background { filter: grayscale(80%) blur(3px) brightness(0.7); /* Slightly darker for dark mode */ } } /* ===== Section 3: General Body & Typography ===== */ body { font-family: var(--font-family-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Smooth transition for dark mode toggle */ transition: background-color var(--transition-fast), color var(--transition-fast); } /* Make headings cleaner and stronger */ h1, h2, h3, h4, h5, h6, .display-4 { font-family: var(--font-family-sans); font-weight: 700; /* Bolder for clarity */ } /* ===== Section 4: Hero Section Specific Styles ===== */ .hero-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('assets/LV screenshot.png'); /* <<< UPDATE THIS PATH TO YOUR IMAGE */ background-size: cover; background-position: center center; background-repeat: no-repeat; opacity: 0.8; /* Very faded */ filter: grayscale(10%) blur(2px); /* Grayscale and subtle blur */ transition: filter var(--transition-fast); /* Smooth transition for dark mode filter */ z-index: 0; /* Ensures it's behind content */ } /* For smaller screens, reduce visibility or remove it if it clutters */ @media (max-width: 768px) { .hero-background { opacity: 0.05; /* Even more faded on small screens */ filter: grayscale(100%) blur(1px); } } /* ===== Section 5: Bootstrap Component Overrides ===== */ /* --- Buttons --- */ .btn-primary { --bs-btn-bg: var(--color-primary); --bs-btn-border-color: var(--color-primary); --bs-btn-hover-bg: var(--color-primary-hover); --bs-btn-hover-border-color: var(--color-primary-hover); /* Good contrast on green */ --bs-btn-color: #ffffff; --bs-btn-hover-color: #ffffff; font-weight: 600; border-radius: var(--border-radius-global); padding: 0.6rem 1.25rem; transition: var(--transition-fast); } .btn-outline-primary { --bs-btn-color: var(--color-primary); --bs-btn-border-color: var(--color-primary); --bs-btn-hover-bg: var(--color-primary); --bs-btn-hover-color: #fff; font-weight: 600; border-radius: var(--border-radius-global); padding: 0.6rem 1.25rem; transition: var(--transition-fast); } /* --- Navigation --- */ .navbar-brand strong { font-weight: 700; /* Make brand pop */ } .navbar .nav-link.btn { padding: 0.4rem 1rem; /* Smaller button in nav */ } /* --- Course Cards (Our key component) --- */ .card.course-card-hover { border: 0; /* Remove default border */ border-radius: var(--border-radius-global); box-shadow: var(--shadow-card); transition: transform var(--transition-fast), box-shadow var(--transition-fast); /* This ensures content (like buttons) inherits the radius */ overflow: hidden; } .card.course-card-hover:hover { transform: translateY(-6px); /* A more pronounced "lift" */ box-shadow: var(--shadow-card-hover); } /* Clean up the "data list" inside the cards */ .card .list-group-item { background-color: transparent; /* Must be transparent */ border: 0; padding-left: 0; padding-right: 0; } /* Set icon colors */ .card .list-group-item i { color: var(--color-primary); } /* --- Bento Grid --- */ .bento-box { border-radius: var(--border-radius-global); /* * Uses Bootstrap's secondary-bg variable, which we re-mapped * in the dark mode section. This makes it light gray in * light mode and dark gray in dark mode automatically. */ background-color: var(--bs-secondary-bg); padding: 2rem; height: 100%; }