u

export_to_html/style.css

@@ -0,0 +1,88 @@
+/* ===== Base ===== */
+body { font-family: 'Roboto', sans-serif; margin: 0; }
+.font-inter { font-family: 'Inter', sans-serif; }
+
+/* ===== Mega menu — left panel items ===== */
+.cat-item { transition: background 0.1s; }
+.cat-item:hover { background: white; }
+.cat-item.cat-active { background: white; }
+.cat-item .cat-label { color: #1a1a1a; font-weight: 400; }
+.cat-item.cat-active .cat-label { color: #90004b; font-weight: 600; }
+.cat-item .cat-chevron { display: none; }
+.cat-item:hover .cat-chevron,
+.cat-item.cat-active .cat-chevron { display: block; }
+
+/* ===== Mega menu — right panel subcategory grid ===== */
+.menu-subcat-grid {
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  row-gap: 20px;
+  padding: 18px 24px 0;
+  flex: 1;
+  overflow-y: auto;
+  align-content: start;
+}
+
+.menu-subcat-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  transition: opacity 0.15s;
+  text-decoration: none;
+}
+.menu-subcat-item:hover { opacity: 0.75; }
+.menu-subcat-item span {
+  font-size: 12px;
+  color: #000;
+  text-align: center;
+  line-height: 1.3;
+}
+
+/* ===== Mega menu — right panel brand row ===== */
+.menu-brand-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 16px 24px 0;
+  border-top: 1px solid #d3d7df;
+  flex-shrink: 0;
+  margin-top: auto;
+}
+
+.menu-brand-item {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  background: white;
+  border-radius: 6px;
+  height: 36px;
+  padding: 0 8px;
+}
+
+.menu-brand-num {
+  font-weight: 700;
+  font-size: 20px;
+  color: white;
+  line-height: 1;
+  text-shadow: 1px 1px 2.1px #0067c7;
+}
+
+/* ===== Mega menu — right panel container ===== */
+.menu-rp-panel {
+  position: absolute;
+  inset: 0;
+  flex-direction: column;
+  background: white;
+}
+
+/* ===== Mega menu — right panel title bar ===== */
+.menu-rp-title {
+  border-bottom: 1px solid #d3d7df;
+  padding: 12px 24px 10px;
+  flex-shrink: 0;
+  font-size: 13px;
+  font-weight: 600;
+  color: #000;
+  text-transform: uppercase;
+}