:root { --gold:

Mini-Courses

#b08d57; --charcoal: #1a1a1a; --off-white: #fdfcfb; --gray: #666; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', sans-serif; color: var(--charcoal); line-height: 1.6; } /* FIXED NAVIGATION & SUBMENU BRIDGE */ nav { display: flex; justify-content: space-between; align-items: center; padding: 25px 8%; background: #fff; position: sticky; top: 0; z-index: 1000; box-shadow: 0 2px 10px rgba(0,0,0,0.05); } .brand-logo { font-size: 22px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; text-decoration: none; color: var(--charcoal); } .brand-logo span { color: var(--gold); } nav ul { display: flex; list-style: none; gap: 30px; align-items: center; } nav ul li a { text-decoration: none; color: var(--charcoal); font-size: 14px; font-weight: 700; text-transform: uppercase; } .dropdown { position: relative; display: inline-block; } .dropbtn { padding-bottom: 25px; margin-bottom: -25px; cursor: pointer; } /* The Bridge */ .dropdown-content { display: none; position: absolute; background: #fff; min-width: 220px; box-shadow: 0 8px 16px rgba(0,0,0,0.1); border-top: 3px solid var(--gold); top: 100%; left: 0; z-index: 1001; border-radius: 0 0 4px 4px; padding: 10px 0; } .dropdown-content a { padding: 12px 20px; text-transform: uppercase; font-size: 12px; font-weight: 700; display: block; color: var(--charcoal); border-bottom: 1px solid #f4f4f4; } .dropdown-content a:hover { background: #fdfcfb; color: var(--gold); padding-left: 25px; transition: 0.3s; } .dropdown:hover .dropdown-content { display: block; } .dropbtn::after { content: ' ▾'; font-size: 10px; opacity: 0.5; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', sans-serif; background-color: #fdfcfb; } nav { display: flex; justify-content: space-between; align-items: center; padding: 20px 8%; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.05); } .brand-logo { font-size: 20px; font-weight: 800; text-transform: uppercase; text-decoration: none; color: #1a1a1a; } .brand-logo span { color: #b08d57; } nav ul { display: flex; list-style: none; gap: 25px; align-items: center; } nav ul li a { text-decoration: none; color: #444; font-size: 13px; font-weight: 600; } .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #fff; min-width: 180px; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); border-radius: 4px; top: 100%; left: 0; } .dropdown-content a { color: #444; padding: 12px 16px; text-decoration: none; display: block; font-size: 13px; } .dropdown:hover .dropdown-content { display: block; } .shop-header { text-align: center; padding: 60px 5%; background: #fff; border-bottom: 1px solid #eee; } .product-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; padding: 40px 5%; } .product-card { background: white; border: 1px solid #eee; border-radius: 6px; overflow: hidden; } .product-img { width: 100%; height: 150px; background: #e8e4e1; color: #b08d57; display: flex; align-items: center; justify-content: center; padding: 15px; font-size: 11px; text-align: center; font-weight: bold; } .product-info { padding: 15px; } .price { font-weight: bold; color: #b08d57; } footer { padding: 40px 8%; background: #111; color: #666; text-align: center; }

Mini-Courses