/* * Microsoft Training Catalog Styles * * This stylesheet defines the visual appearance of the Microsoft training landing * page for Skunkworks Academy. It uses modern CSS features like CSS * variables, flexbox and grid to create a responsive layout that adapts * seamlessly from desktop to mobile. A dark mode is supported by toggling * the `data-theme` attribute on the `` element; color variables * automatically update to produce a coherent, high‑contrast theme. The * IBM Plex Sans typeface is imported via Google Fonts to maintain * consistency with the wider site. */ @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&display=swap'); /* Root color variables for light theme */ :root { --primary-color: #0f62fe; /* Microsoft blue */ --accent-color: #0078d4; /* secondary blue used for highlights */ --bg-color: #f4f4f4; /* page background */ --card-bg: #ffffff; /* card backgrounds */ --text-color: #161616; /* primary text colour */ --muted-color: #6f6f6f; /* secondary text */ --border-color: #e0e0e0; /* subtle borders */ --stat-number: #0f62fe; /* statistic numbers colour */ --stat-label: #525252; /* statistic labels colour */ --overlay: rgba(0, 0, 0, 0.5); /* hero overlay */ --transition-speed: 0.3s; /* global transition time */ } /* Dark theme overrides. When the body has data-theme="dark" these values replace the defaults above. */ [data-theme='dark'] { --bg-color: #161616; --card-bg: #262626; --text-color: #f4f4f4; --muted-color: #a8a8a8; --border-color: #3a3a3a; --stat-number: #4dabf7; --stat-label: #8d8d8d; --overlay: rgba(0, 0, 0, 0.6); } /* Global styles */ * { box-sizing: border-box; } body { margin: 0; padding: 0; font-family: 'IBM Plex Sans', sans-serif; background-color: var(--bg-color); color: var(--text-color); line-height: 1.6; transition: background-color var(--transition-speed), color var(--transition-speed); } a { color: var(--primary-color); text-decoration: none; transition: color var(--transition-speed); } a:hover { color: var(--accent-color); } header { background-color: var(--primary-color); color: #ffffff; display: flex; justify-content: space-between; align-items: center; padding: 1rem 2rem; position: sticky; top: 0; z-index: 1000; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .brand { display: flex; align-items: center; gap: 0.75rem; } .brand__logo { width: 40px; height: 40px; } .brand__title { font-size: 1.5rem; font-weight: 600; margin: 0; } .brand__subtitle { font-size: 0.85rem; color: #e0e0e0; margin: 0; } .topbar__actions { display: flex; align-items: center; gap: 1rem; } .search { padding: 0.5rem 1rem; border-radius: 4px; border: 1px solid var(--border-color); background-color: var(--card-bg); color: var(--text-color); width: 250px; transition: border-color var(--transition-speed), box-shadow var(--transition-speed); } .search::placeholder { color: var(--muted-color); } .search:focus { outline: none; border-color: var(--accent-color); box-shadow: 0 0 6px rgba(0, 0, 0, 0.1); } .theme-toggle { background: none; border: none; color: #ffffff; font-size: 1.4rem; cursor: pointer; transition: transform var(--transition-speed); } .theme-toggle:hover { transform: rotate(180deg); } /* Hero section */ .hero { position: relative; background-image: linear-gradient(var(--overlay), var(--overlay)), url('images/hero.png'); background-size: cover; background-position: center; color: #ffffff; text-align: center; padding: 6rem 2rem; } .hero h1 { font-size: 2.5rem; margin-bottom: 1rem; font-weight: 600; } .hero p { font-size: 1.125rem; max-width: 800px; margin: 0 auto; color: #e5e5e5; } /* Sections */ section { padding: 4rem 2rem; } section h2 { text-align: center; font-size: 2rem; margin-bottom: 2rem; font-weight: 500; } /* Courses grid */ .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; max-width: 1200px; margin: 0 auto; } .card { background-color: var(--card-bg); border: 1px solid var(--border-color); border-radius: 8px; padding: 1.5rem; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); transition: transform var(--transition-speed), box-shadow var(--transition-speed); display: flex; flex-direction: column; justify-content: space-between; height: 100%; } .card:hover { transform: translateY(-4px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1); } .card h3 { font-size: 1.25rem; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem; } .card .level { display: inline-block; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; border-radius: 4px; color: #ffffff; margin-bottom: 0.5rem; } .level.beginner { background-color: #0e8a16; } .level.intermediate { background-color: #f1c40f; } .level.advanced { background-color: #e74c3c; } .card ul { margin-top: 0.5rem; margin-bottom: 0.5rem; padding-left: 1rem; list-style: disc; color: var(--text-color); } .card ul li { margin-bottom: 0.25rem; } .card .details { font-size: 0.9rem; color: var(--muted-color); margin-top: 0.5rem; } .card .cta { margin-top: 1rem; } .card .cta a { display: inline-block; padding: 0.5rem 1rem; background-color: var(--primary-color); color: #ffffff; border-radius: 4px; font-weight: 500; transition: background-color var(--transition-speed); } .card .cta a:hover { background-color: var(--accent-color); } /* Statistics section */ .stats { display: flex; justify-content: center; flex-wrap: wrap; gap: 2rem; max-width: 1000px; margin: 0 auto; } .stat { flex: 1 1 200px; text-align: center; padding: 1rem; } .stat .number { font-size: 2rem; font-weight: 600; color: var(--stat-number); } .stat .label { font-size: 1rem; color: var(--stat-label); } /* Partnership section */ .partnership { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; max-width: 900px; margin: 0 auto; text-align: center; } .partnership i { font-size: 3rem; color: var(--primary-color); } .partnership p { max-width: 700px; font-size: 1rem; color: var(--text-color); } /* Footer */ footer { background-color: var(--primary-color); color: #ffffff; padding: 3rem 2rem; margin-top: 4rem; } .footer-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem; max-width: 1200px; margin: 0 auto; } .footer-section h3 { margin-bottom: 1rem; color: var(--accent-color); font-weight: 500; } .footer-links { display: flex; flex-direction: column; gap: 0.5rem; } .footer-links a { color: #ffffff; text-decoration: none; display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; transition: color var(--transition-speed); } .footer-links a:hover { color: var(--accent-color); } .social-links { display: flex; gap: 1rem; margin-top: 1rem; } .social-links a { color: #ffffff; font-size: 1.4rem; transition: color var(--transition-speed); } .social-links a:hover { color: var(--accent-color); } /* Responsive adjustments */ @media (max-width: 768px) { .hero { padding: 4rem 1rem; } .hero h1 { font-size: 2rem; } .cards { grid-template-columns: 1fr; } header { flex-direction: column; align-items: flex-start; } .topbar__actions { margin-top: 0.75rem; width: 100%; } .search { width: 100%; } }