@pixelated-tech/components 3.1.6 → 3.2.0

package/dist/components/general/semantic.js

@@ -0,0 +1,282 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLayoutEffect, useRef, useState } from "react";
+import PropTypes from "prop-types";
+import { usePixelatedConfig } from "../config/config.client";
+import { SmartImage } from "../cms/cloudinary.image";
+import "../../css/pixelated.grid.scss";
+import "./semantic.scss";
+/* ========== LAYOUT COMPONENTS ==========
+Reusable, scalable layout components for grid and flex layouts.
+These components can be used in the pagebuilder to create
+responsive, customizable page sections. */
+// Define option arrays - used by both PropTypes and form generation
+export const layoutTypes = ['grid', 'flex', 'none'];
+export const autoFlowValues = ['row', 'column', 'dense', 'row dense', 'column dense'];
+export const justifyItemsValues = ['start', 'center', 'end', 'stretch'];
+export const flexDirections = ['row', 'column', 'row-reverse', 'column-reverse'];
+export const flexWraps = ['nowrap', 'wrap', 'wrap-reverse'];
+export const justifyContentValues = ['start', 'center', 'end', 'space-between', 'space-around', 'space-evenly'];
+export const alignItemsValues = ['start', 'center', 'end', 'stretch', 'baseline'];
+// ========== PAGE TITLE HEADER ==========
+PageTitleHeader.propTypes = {
+    title: PropTypes.string.isRequired,
+    url: PropTypes.string
+};
+export function PageTitleHeader({ title, url }) {
+    const calloutTarget = url && url.substring(0, 4).toLowerCase() === 'http' ? '_blank' : '_self';
+    return (_jsx(_Fragment, { children: url
+            ? _jsx("a", { href: url, target: calloutTarget, rel: "noopener noreferrer", children: _jsx("h1", { className: "page-title-header", children: title }) })
+            : _jsx("h1", { className: "page-title-header", children: title }) }));
+}
+;
+// ========== PAGE SECTION ==========
+PageSection.propTypes = {
+    id: PropTypes.string,
+    className: PropTypes.string,
+    layoutType: PropTypes.oneOf([...layoutTypes]),
+    // Common props
+    gap: PropTypes.string,
+    maxWidth: PropTypes.string,
+    padding: PropTypes.string,
+    background: PropTypes.string,
+    backgroundImage: PropTypes.string,
+    // Grid-specific props
+    columns: PropTypes.number,
+    autoFlow: PropTypes.oneOf([...autoFlowValues]),
+    justifyItems: PropTypes.oneOf([...justifyItemsValues]),
+    responsive: PropTypes.shape({
+        mobile: PropTypes.number,
+        tablet: PropTypes.number,
+        desktop: PropTypes.number,
+    }),
+    // Flex-specific props
+    direction: PropTypes.oneOf([...flexDirections]),
+    wrap: PropTypes.oneOf([...flexWraps]),
+    justifyContent: PropTypes.oneOf([...justifyContentValues]),
+    // Shared alignment
+    alignItems: PropTypes.oneOf([...alignItemsValues]),
+    children: PropTypes.node,
+};
+export function PageSection({ id, className, layoutType = 'grid', gap = '10px', maxWidth = '1024px', padding = '0 20px', /* 5px */ background, backgroundImage, 
+// Grid props
+columns = 12, autoFlow = 'row', justifyItems = 'stretch', 
+// responsive = { mobile: 1, tablet: 2, desktop: 3 },
+// Flex props
+direction = 'row', wrap = 'wrap', justifyContent = 'start', 
+// Shared
+alignItems = 'stretch', children, }) {
+    const sectionStyle = {
+        ...(background && { background }),
+    };
+    const contentStyle = {
+        ...(maxWidth && { maxWidth }),
+        margin: '0 auto',
+        ...(padding && { padding }),
+    };
+    // Add layout-specific styles
+    if (layoutType === 'grid') {
+        return (_jsxs("section", { id: id || undefined, className: "page-section" + (className ? ` ${className}` : ''), style: sectionStyle, children: [backgroundImage && _jsx(PageSectionBackgroundImage, { backgroundImage: backgroundImage, id: id }), _jsx("div", { className: "page-section-content" + " row-" + columns + "col", style: {
+                        ...contentStyle,
+                        ...(gap && { gap }),
+                        ...(autoFlow && { gridAutoFlow: autoFlow }),
+                        ...(alignItems && { alignItems }),
+                        ...(justifyItems && { justifyItems }),
+                    }, children: children })] }));
+    }
+    if (layoutType === 'flex') {
+        return (_jsxs("section", { id: id || undefined, className: "page-section page-section-flex", style: sectionStyle, children: [backgroundImage && _jsx(PageSectionBackgroundImage, { backgroundImage: backgroundImage, id: id }), _jsx("div", { className: "page-section-content", style: {
+                        ...contentStyle,
+                        display: 'flex',
+                        ...(direction && { flexDirection: direction }),
+                        ...(wrap && { flexWrap: wrap }),
+                        ...(gap && { gap }),
+                        ...(alignItems && { alignItems: alignItems }),
+                        ...(justifyContent && { justifyContent: justifyContent }),
+                    }, children: children })] }));
+    }
+    // layoutType === 'none'
+    return (_jsxs("section", { id: id || undefined, className: "page-section page-section-none", style: sectionStyle, children: [backgroundImage && _jsx(PageSectionBackgroundImage, { backgroundImage: backgroundImage, id: id }), _jsx("div", { className: "page-section-content", style: contentStyle, children: children })] }));
+}
+// ========== PAGE SECTION HEADER ==========
+PageSectionHeader.propTypes = {
+    title: PropTypes.string.isRequired,
+    url: PropTypes.string
+};
+export function PageSectionHeader({ title, url }) {
+    const calloutTarget = url && url.substring(0, 4).toLowerCase() === 'http' ? '_blank' : '_self';
+    return (_jsx(_Fragment, { children: url
+            ? _jsx("a", { href: url, target: calloutTarget, rel: "noopener noreferrer", children: _jsx("h2", { className: "page-section-header", children: title }) })
+            : _jsx("h2", { className: "page-section-header", children: title }) }));
+}
+;
+// ========== PAGE SECTION BACKGROUND IMAGE ==========
+PageSectionBackgroundImage.propTypes = {
+    backgroundImage: PropTypes.string.isRequired,
+    id: PropTypes.string,
+};
+export function PageSectionBackgroundImage(props) {
+    const config = usePixelatedConfig();
+    return (_jsx(_Fragment, { children: _jsx(SmartImage, { src: props.backgroundImage, className: "section-background-image", id: props.id ? `${props.id}-background-image` : undefined, 
+            // name={props.id ? `${props.id} background image` : undefined}
+            title: props.id ? `${props.id} background image` : undefined, alt: props.id ? `${props.id} background image` : "", cloudinaryEnv: config?.cloudinary?.product_env ?? undefined, cloudinaryDomain: config?.cloudinary?.baseUrl ?? undefined, cloudinaryTransforms: config?.cloudinary?.transforms ?? undefined }) }));
+}
+// ========== GRID ITEM ==========
+PageGridItem.propTypes = {
+    id: PropTypes.string,
+    className: PropTypes.string,
+    columnSpan: PropTypes.number,
+    rowSpan: PropTypes.number,
+    columnStart: PropTypes.number,
+    columnEnd: PropTypes.number,
+    rowStart: PropTypes.number,
+    rowEnd: PropTypes.number,
+    alignSelf: PropTypes.oneOf(['start', 'center', 'end', 'stretch']),
+    justifySelf: PropTypes.oneOf(['start', 'center', 'end', 'stretch']),
+    children: PropTypes.node,
+};
+export function PageGridItem({ id, className, columnSpan, rowSpan, columnStart, columnEnd, rowStart, rowEnd, alignSelf, justifySelf, children, }) {
+    const itemStyle = {
+        ...(columnSpan && !columnStart && { gridColumn: ` span ${columnSpan}` }),
+        // columnStart && columnSpan = style grid-s##-w##
+        // columnStart && columnEnd = style grid-s##-e##
+        // ...(columnStart && columnEnd && { gridColumn: ` ${columnStart} / ${columnEnd}` }),
+        ...(rowSpan && { gridRow: ` span ${rowSpan}` }),
+        ...(rowStart && rowEnd && { gridRow: ` ${rowStart} / ${rowEnd}` }),
+        ...(alignSelf && { alignSelf }),
+        ...(justifySelf && { justifySelf }),
+    };
+    return (
+    /* THIS IS AN OLD STYLE */
+    /* <div className={"grid-item" + */
+    _jsx("div", { className: "gridItem" +
+            (className ? ` ${className}` : '') +
+            (columnStart && columnSpan && !columnEnd ? ` grid-s${columnStart}-w${columnSpan}` : '') +
+            (columnStart && columnEnd && !columnSpan ? ` grid-s${columnStart}-e${columnEnd}` : ''), id: (id) ? id : undefined, style: itemStyle, children: children }));
+}
+// ========== FLEX ITEM ==========
+PageFlexItem.propTypes = {
+    flex: PropTypes.string,
+    order: PropTypes.number,
+    alignSelf: PropTypes.oneOf(['auto', 'start', 'center', 'end', 'stretch', 'baseline']),
+    children: PropTypes.node,
+};
+export function PageFlexItem({ flex = '1', order, alignSelf, children, }) {
+    const itemStyle = {
+        ...(flex && { flex }),
+        ...(order !== undefined && order !== null && { order }),
+        ...(alignSelf && { alignSelf: alignSelf }),
+    };
+    return (_jsx("div", { className: "flex-item", style: itemStyle, children: children }));
+}
+// ========== PAGE LINK ==========
+const pageLinkShape = PropTypes.shape({
+    label: PropTypes.string.isRequired,
+    href: PropTypes.string.isRequired,
+    target: PropTypes.oneOf(["_self", "_blank"]),
+});
+// ========== PAGE HEADER ==========
+PageHeader.propTypes = {
+    className: PropTypes.string,
+    eyebrow: PropTypes.string,
+    headline: PropTypes.string,
+    description: PropTypes.string,
+    ctaLabel: PropTypes.string,
+    ctaHref: PropTypes.string,
+    ctaTarget: PropTypes.oneOf(["_self", "_blank"]),
+    children: PropTypes.node,
+    fixed: PropTypes.bool,
+};
+export function PageHeader({ className, eyebrow, headline, description, ctaLabel, ctaHref, ctaTarget, children, fixed = false, }) {
+    const resolvedTarget = ctaTarget ?? (ctaHref && ctaHref.startsWith("http") ? "_blank" : "_self");
+    const rel = resolvedTarget === "_blank" ? "noopener noreferrer" : undefined;
+    const headerRef = useRef(null);
+    const [spacerHeight, setSpacerHeight] = useState(undefined);
+    useLayoutEffect(() => {
+        if (!fixed) {
+            setSpacerHeight(undefined);
+            return;
+        }
+        const updateHeight = () => {
+            if (!headerRef.current) {
+                return;
+            }
+            setSpacerHeight(headerRef.current.getBoundingClientRect().height);
+        };
+        updateHeight();
+        window.addEventListener("resize", updateHeight);
+        return () => window.removeEventListener("resize", updateHeight);
+    }, [fixed, eyebrow, headline, description, ctaLabel, ctaHref]);
+    const spacerStyle = spacerHeight !== undefined ? { height: `${spacerHeight}px` } : undefined;
+    const headerClasses = `page-header${className ? ` ${className}` : ""}${fixed ? " fixed-header" : ""}`;
+    return (_jsxs(_Fragment, { children: [fixed && (_jsx("div", { className: "page-header-spacer", "aria-hidden": "true", style: spacerStyle })), _jsxs("header", { ref: headerRef, className: headerClasses, children: [eyebrow && _jsx("p", { className: "page-header-eyebrow", children: eyebrow }), headline && _jsx("h1", { children: headline }), description && _jsx("p", { className: "page-header-description", children: description }), ctaLabel && ctaHref && (_jsx("a", { className: "page-header-cta", href: ctaHref, target: resolvedTarget, rel: rel, children: ctaLabel })), children] })] }));
+}
+// ========== PAGE HERO ==========
+PageHero.propTypes = {
+    id: PropTypes.string,
+    className: PropTypes.string,
+    background: PropTypes.string,
+    backgroundImage: PropTypes.string,
+    children: PropTypes.node,
+};
+export function PageHero({ id, className, background, backgroundImage, children, }) {
+    const wrapperStyle = {
+        ...(background && { background }),
+    };
+    return (_jsxs("section", { id: id || undefined, className: `page-hero${className ? ` ${className}` : ""}`, style: wrapperStyle, children: [backgroundImage && _jsx(PageSectionBackgroundImage, { backgroundImage: backgroundImage, id: id }), _jsx("div", { className: "page-hero-content", children: children })] }));
+}
+// ========== PAGE MAIN ==========
+PageMain.propTypes = {
+    id: PropTypes.string,
+    className: PropTypes.string,
+    maxWidth: PropTypes.string,
+    padding: PropTypes.string,
+    children: PropTypes.node,
+};
+export function PageMain({ id, className, maxWidth = "1200px", padding = "0 20px 60px", children, }) {
+    const layoutStyle = {
+        ...(maxWidth && { maxWidth }),
+        ...(padding && { padding }),
+    };
+    return (_jsx("main", { id: id || undefined, className: `page-main${className ? ` ${className}` : ""}`, style: layoutStyle, children: children }));
+}
+// ========== PAGE NAV ==========
+PageNav.propTypes = {
+    className: PropTypes.string,
+    orientation: PropTypes.oneOf(["horizontal", "vertical"]),
+    links: PropTypes.arrayOf(pageLinkShape),
+};
+export function PageNav({ className, orientation = "horizontal", links, }) {
+    const resolvedLinks = Array.isArray(links)
+        ? links.filter(Boolean)
+        : [];
+    if (!resolvedLinks.length) {
+        return null;
+    }
+    return (_jsx("nav", { className: `page-nav page-nav-${orientation}` + (className ? ` ${className}` : ""), children: resolvedLinks.map((link) => {
+            const target = link.target ?? (link.href.startsWith("http") ? "_blank" : "_self");
+            const rel = target === "_blank" ? "noopener noreferrer" : undefined;
+            return (_jsx("a", { href: link.href, target: target, rel: rel, children: link.label }, `${link.href}-${link.label}`));
+        }) }));
+}
+// ========== PAGE FOOTER ==========
+PageFooter.propTypes = {
+    className: PropTypes.string,
+    text: PropTypes.string,
+    links: PropTypes.arrayOf(pageLinkShape),
+    children: PropTypes.node,
+};
+export function PageFooter({ className, text, links, children, }) {
+    const resolvedLinks = Array.isArray(links)
+        ? links.filter(Boolean)
+        : [];
+    const hasLinks = resolvedLinks.length > 0;
+    if (!text && !hasLinks && !children) {
+        return null;
+    }
+    return (_jsxs("footer", { className: `page-footer${className ? ` ${className}` : ""}`, children: [text && _jsx("p", { className: "page-footer-text", children: text }), hasLinks && (_jsx("div", { className: "page-footer-links", children: resolvedLinks.map((link) => {
+                    const target = link.target ?? (link.href.startsWith("http") ? "_blank" : "_self");
+                    const rel = target === "_blank" ? "noopener noreferrer" : undefined;
+                    return (_jsx("a", { href: link.href, target: target, rel: rel, children: link.label }, `${link.href}-${link.label}`));
+                }) })), children] }));
+}

package/dist/components/general/semantic.scss

@@ -0,0 +1,359 @@
+/* ========================================
+=========     LAYOUT COMPONENTS    =========
+======================================== */
+
+
+
+/* ========================================
+===========     TEXT HEADERS    ===========
+======================================== */
+
+.page-title-header {
+    display: block;
+    font-size: var(--font-size1, 2em);
+    font-variant-caps: small-caps;
+    font-variant: small-caps;
+    text-align: center;
+    font-weight: 800;
+}
+
+
+.page-section-header {
+    display: block;
+    font-size: var(--font-size2, 1.65em);
+    text-align: center;
+    font-weight: 700;
+    margin: 20px;
+}
+
+
+
+
+/* ========================================
+===========     PAGE SECTION    ===========
+======================================== */
+
+section {
+    position: relative;
+    overflow: hidden;
+	/* margin-bottom: 50px; */
+	padding: 30px 0;
+}
+
+section.page-section {
+    position: relative;
+    overflow: hidden;
+	/* margin-bottom: 50px; */
+	padding: 0 0 30px 0;
+}
+
+.section-container {
+	margin: 0px auto;
+	padding: 0px 5px;
+	/* max-width: 1280px; */
+	max-width: 1024px;
+}
+
+@media screen and (max-width: 480px) {
+    .section-container {
+        padding: 0px 20px;
+    }
+}
+
+
+/* section:first-of-type .page-section {
+	padding: 30px 0; 
+} */
+
+
+/* ========================================
+===========     PAGE HERO     ============
+======================================== */
+
+.page-hero {
+	position: relative;
+	overflow: hidden;
+	min-height: 320px;
+	padding: 4rem 1.5rem;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: #0f172a;
+	color: #f8fafc;
+	text-align: center;
+}
+
+.page-hero::before {
+	content: "";
+	position: absolute;
+	left: 0;
+	top: 0;
+	width: 100%;
+	height: 100%;
+	background: linear-gradient(180deg, rgba(15,23,42,0.8), rgba(15,23,42,0.95));
+	pointer-events: none;
+	z-index: 1;
+}
+
+#page-hero {
+	background-color: var(--accent2-color);
+    border: 1px solid #AAA;
+	height: 150px;
+	overflow: hidden;
+	position: relative;
+	z-index: 5;
+}
+
+@media screen and (max-width: 480px) {
+    #page-hero {
+		height: 125px;
+    }
+}
+
+#page-hero-overlay {
+	background: rgba(240,240,240,0.5);
+	font-size: 1.2em;
+	padding: 10px 0;
+	position: absolute;
+	text-align: center;
+	top: 15px;
+	z-index: 10;
+}
+
+@media screen and (max-width: 480px) {
+    #page-hero-overlay {
+		font-size: 1.0em;
+    }
+}
+
+.page-hero-content {
+	position: relative;
+	z-index: 2;
+	width: 100%;
+	max-width: 1200px;
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+	align-items: center;
+}
+
+
+/* ========================================
+===========     PAGE MAIN     ============
+======================================== */
+
+main {
+	min-height: 400px;
+}
+
+@media screen and (max-width: 480px) {
+    main {
+		/* margin-top: 10px; */
+		padding-top: 10px
+	}
+}
+
+main p {
+	margin-bottom: 20px;
+}
+
+.page-main {
+	width: 100%;
+	margin: 0 auto;
+	box-sizing: border-box;
+	max-width: 1200px;
+}
+
+
+/* Base section styles (used by `PageSection` component) */
+.section-background-image {
+	width: 100%;
+	height: 100% !important;
+	object-fit: cover;
+	object-position: center top;
+	position: absolute;
+	opacity: 0.3;
+	z-index: -1;
+}
+
+.page-section-content {
+	width: 100%;
+	box-sizing: border-box;
+}
+
+
+
+/* ========================================
+===========   PAGE GRID ITEM    ===========
+======================================== */
+
+/* Grid item styles */
+/* ALL GRID STYLES ARE IN PIXELATED.GRID.SCSS */
+/* 
+.grid-item {
+	box-sizing: border-box;
+	display: grid ;
+	min-width: 0; // Prevents grid blowout
+	min-height: 0;
+}
+*/
+
+
+
+/* ========================================
+==========   PAGE FLEX ITEM    ============
+======================================== */
+
+/* Flex item styles */
+.flex-item {
+	box-sizing: border-box;
+	min-width: 0; // Prevents flex blowout
+}
+
+
+
+
+/* ========================================
+============    PAGE HEADER    ============
+======================================== */
+
+.page-header {
+	padding: 2rem;
+	background: #0f172a;
+	color: #f1f5f9;
+	margin-bottom: 1.5rem;
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+}
+
+#page-header {
+	background-color: var(--primary-color);
+    /* background-image: url(/images/pix/pix-bg.gif); */
+	color: white;
+	height: 60px;
+	padding: 10px 20px;
+	z-index: 2000;
+}
+
+#page-header .section-container {
+	display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-items: left;
+    padding: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.fixed-header {
+	position: fixed;
+	left: 0;
+	top: 0;
+	width: 100%;
+	z-index: 1000;
+}
+
+.page-header.fixed-header {
+	box-shadow: 0 10px 35px rgba(15, 23, 42, 0.3);
+	background: rgba(15, 23, 42, 0.9);
+	backdrop-filter: blur(8px);
+}
+
+.page-header-spacer {
+	display: block;
+	width: 100%;
+	height: var(--page-header-fixed-height, 120px);
+	pointer-events: none;
+}
+#fixed-header-spacer {
+	margin-top: 60px;
+}
+
+
+.page-header-eyebrow {
+	text-transform: uppercase;
+	letter-spacing: 0.35em;
+	font-size: 0.65rem;
+	color: #cbd5f5;
+}
+
+.page-header-description {
+	line-height: 1.4;
+	opacity: 0.85;
+}
+
+.page-header-cta {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	padding: 0.6rem 1.25rem;
+	border-radius: 999px;
+	background: #6366f1;
+	color: white;
+	font-weight: 600;
+	border: none;
+	text-decoration: none;
+}
+
+
+
+/* ========================================
+=============   PAGE NAV   ================
+======================================== */
+
+nav {
+	--do-nothing: true;
+}
+
+.page-nav {
+	display: flex;
+	gap: 0.75rem;
+	flex-wrap: wrap;
+	margin-bottom: 1rem;
+}
+
+.page-nav-vertical {
+	flex-direction: column;
+	align-items: flex-start;
+}
+
+.page-nav a {
+	color: #38bdf8;
+	font-weight: 600;
+	text-decoration: none;
+}
+
+
+
+/* ========================================
+============   PAGE FOOTER   ==============
+======================================== */
+
+footer {
+	min-height: 50px;
+}
+
+.page-footer {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	flex-wrap: wrap;
+	gap: 1rem;
+	padding: 1.5rem 2rem;
+	border-top: 1px solid rgba(148, 163, 184, 0.4);
+}
+
+.page-footer-text {
+	color: #475569;
+}
+
+.page-footer-links {
+	display: flex;
+	gap: 1rem;
+}
+
+.page-footer-links a {
+	color: #1e40af;
+	font-weight: 600;
+}

package/dist/components/menu/menu-accordion.css

@@ -7,6 +7,10 @@
 	/* background-color: rgba(255,255,255,0.7); */
 	/* display: none; */
 	/* display: inline; */
+
+	background-color: transparent;
+    border: none;
+
 	margin: 0px 10px 0px 0px;
 	padding: 5px;
 	text-align: center;
@@ -18,6 +22,29 @@
 	border-radius: 5px;
 }
 
+
+.panelMenuButton .hamburger{
+    /* the tricks */
+	/* display: block; */
+	/* display inline-block is fine too */
+   	-webkit-transform: scaleX(1.5);
+   	-moz-transform: scaleX(1.5);
+   	-o-transform: caleX(1.5); 
+   	transform: scaleX(1.5);
+	writing-mode: vertical-lr;
+    /* optional */
+    font-size: 8pt;
+    cursor: pointer;
+    font-weight: 900;
+    color: #CCC;
+	padding-top: 5px;
+
+}
+/* hamburger hover style */
+/* .accordionMenu .hamburger:hover {
+    color: #FFC75F;
+} */
+
 @media screen and (max-width: 480px) {
 	.panelMenuButton {
 		display: inline;
@@ -128,27 +155,6 @@
     /* background-image: url(/images/pix/pix-bg-sm-bw.gif); */
 }
 
-
-.panelMenuButton .hamburger{
-    /* the tricks */
-	display: block;
-   	-webkit-transform: scaleX(1.75);
-   	-moz-transform: scaleX(1.75);
-   	-o-transform: caleX(1.75); 
-   	transform: scaleX(1.75);
-	writing-mode: vertical-lr;
-	transform: scaleX(1.75);
-    /* optional */
-    font-size: 8pt;
-    cursor: pointer;
-    font-weight: 900;
-    color: #CCC;
-}
-/* hamburger hover style */
-/* .accordionMenu .hamburger:hover {
-    color: #FFC75F;
-} */
-
 /* ===== LEVEL 2 ===== */
 
 .accordionMenu > ul > ul {