/* =========================================================================
CRETAMEL — offscreen menu, designs 2a and 2b
=========================================================================
Styles the menu you already have. Nothing in the markup changes.
The Elementor Off-Canvas widget keeps its WordPress Navigation Menu widget
and its "main-menu" menu exactly as they are.
Loaded by the theme. See cretamel_scripts_styles() in functions.php.
To switch it off, return false from the cretamel_enqueue_offscreen_menu
filter. To change a colour or a size, override the custom properties on
.e-off-canvas from style.css, which loads after this file.
WHICH DESIGN APPLIES WHEN
2a tablet and desktop, 768px and wider two columns
2b phone, 767px and narrower one column, tap to open
ONE SETTING IN ELEMENTOR
Design 2a needs room for two columns. Open the Off-Canvas widget and set
its Width to 600px on desktop and tablet. Elementor's own default is 400px,
which is too narrow for the card to sit beside the list.
WHY THE SELECTORS ARE SO LONG
Elementor's own stylesheet loads AFTER this file, and it already says
.elementor-widget-off-canvas .e-off-canvas__content { background: #fff }
That is two classes. Matching it exactly would be a tie, and a tie is won
by whichever file loads last, which is Elementor's. So every rule here
carries one extra class, .e-off-canvas, to outweigh it. That is why no
!important appears anywhere in this file.
Note also that the panel colour belongs on __content, not __main. __main
is only the positioning wrapper.
FONT FAMILY IS NEVER SET. The menu keeps Elementor's global typography.
THE SCRIPT
assets/js/offscreen-menu.js, loaded beside this file, does two jobs:
on 2a it decides which child card shows (class cm-active), so cards
never flicker or refuse to reopen; on 2b it runs the tap accordion
(class cm-open). Without it the menu falls back to plain :hover on 2a
and every section stays open on 2b.
========================================================================= */
.elementor-widget-off-canvas .e-off-canvas {
/* The palette, taken straight out of the design file. */
--cm-panel: #00566B;
--cm-link: #FDF3D9;
--cm-link-hover: #F3B95C;
--cm-muted: #DCE9EC;
--cm-card: rgba(253, 243, 217, 0.08);
--cm-rule: rgba(253, 243, 217, 0.16);
--cm-rule-strong: rgba(253, 243, 217, 0.18);
/* Sizes. rem, so they follow the reader's own font setting. */
--cm-top-size: 1.5rem; /* 24px, top level on 2a */
--cm-sub-size: 1rem; /* 16px, child items */
--cm-top-pad: 14px; /* space above and below a top-level row.
The design says 18px. This is 20% tighter.
Raise it back to 18px for the original. */
--cm-col: 190px; /* the left column on 2a */
--cm-col-gap: 28px;
/* Child items. The design spaced them 31px apart inside 30px of padding,
which made the card very tall. These are about half that. */
--cm-sub-gap: 14px; /* space between child links on 2a */
--cm-sub-pad: 20px 22px; /* padding inside the card on 2a */
--cm-sub-row: 44px; /* row height of a child link on 2b.
44px is the smallest comfortable tap size. */
}
/* The panel must scroll when the menu is taller than the screen.
------------------------------------------------------------------------
Elementor sizes the panel with 100vh. On a phone 100vh is the screen
WITHOUT the browser bar subtracted, so the panel is taller than the part
you can see. The bottom of it sits behind the address bar, and no amount
of scrolling brings it back, because the page itself is fixed.
100dvh is the height you can actually see, and it follows the bar as it
slides away. A browser that does not know dvh throws these two lines away
and keeps Elementor's 100vh, so nothing breaks. */
.elementor-widget-off-canvas .e-off-canvas .e-off-canvas__content {
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
height: 100dvh;
max-height: 100dvh;
}
/* The container Elementor puts inside the panel carries min-height:100vh for
the same reason. Left alone it adds a strip of empty panel below the last
item, which looks like the menu is cut off. */
.elementor-widget-off-canvas .e-off-canvas .e-off-canvas__content > .e-con {
min-height: 100dvh;
}
/* The panel itself -------------------------------------------------------
Elementor paints __content white, not __main. That is the element to
repaint. */
.elementor-widget-off-canvas .e-off-canvas .e-off-canvas__content {
background-color: var(--cm-panel);
box-shadow: -12px 0 40px rgba(43, 42, 40, 0.24);
}
.elementor-widget-off-canvas .e-off-canvas .e-off-canvas__overlay {
background-color: rgba(43, 42, 40, 0.32);
}
/* The menu, both designs -------------------------------------------------- */
.elementor-widget-off-canvas .e-off-canvas .menu-main-menu-container .menu {
list-style: none;
margin: 0;
padding: 0;
}
.elementor-widget-off-canvas .e-off-canvas .menu-main-menu-container .menu li {
margin: 0;
padding: 0;
list-style: none;
}
.elementor-widget-off-canvas .e-off-canvas .menu-main-menu-container .menu a {
color: var(--cm-link);
text-decoration: none;
transition: color 0.18s ease;
}
.elementor-widget-off-canvas .e-off-canvas .menu-main-menu-container .menu a:hover,
.elementor-widget-off-canvas .e-off-canvas .menu-main-menu-container .menu a:focus-visible {
color: var(--cm-link-hover);
}
.elementor-widget-off-canvas .e-off-canvas .menu-main-menu-container .menu a:focus-visible {
outline: 2px solid var(--cm-link-hover);
outline-offset: 3px;
border-radius: 2px;
}
.elementor-widget-off-canvas .e-off-canvas .menu-main-menu-container .sub-menu {
list-style: none;
margin: 0;
padding: 0;
}
/* =========================================================================
2a — tablet and desktop, 768px and up
Left column holds the eight top-level items.
The children of the open item sit in a tinted card on the right.
========================================================================= */
@media (min-width: 768px) {
/* The design has the list and the card side by side as two grid cells.
WordPress nests .sub-menu INSIDE its , and a grid only places its
own direct children, so a grid cannot put them side by side here.
The card is taken out of the flow instead, and pinned to the right.
Without this the grows as tall as its card and pushes the rest of
the list far down the panel. */
.elementor-widget-off-canvas .e-off-canvas .menu-main-menu-container {
position: relative;
}
.elementor-widget-off-canvas .e-off-canvas .menu-main-menu-container > .menu {
display: flex;
flex-direction: column;
align-items: flex-start;
width: var(--cm-col);
}
.elementor-widget-off-canvas .e-off-canvas .menu-main-menu-container > .menu > li {
width: 100%;
}
.elementor-widget-off-canvas .e-off-canvas .menu-main-menu-container > .menu > li > a {
display: block;
width: fit-content;
padding: var(--cm-top-pad) 0;
font-size: var(--cm-top-size);
line-height: 1.2;
/* The line is always there, just invisible. Colouring it instead of
adding it means the list never jumps on hover. */
border-bottom: 2px solid transparent;
}
/* The gold line: on hover, on keyboard focus, and on the page you are on. */
.elementor-widget-off-canvas .e-off-canvas .menu-main-menu-container > .menu > li > a:hover,
.elementor-widget-off-canvas .e-off-canvas .menu-main-menu-container > .menu > li > a:focus-visible,
.elementor-widget-off-canvas .e-off-canvas .menu-main-menu-container > .menu > li:hover > a,
.elementor-widget-off-canvas .e-off-canvas .menu-main-menu-container > .menu > .current-menu-item > a,
.elementor-widget-off-canvas .e-off-canvas .menu-main-menu-container > .menu > .current-menu-ancestor > a,
.elementor-widget-off-canvas .e-off-canvas .menu-main-menu-container > .menu > .current-menu-parent > a {
border-bottom-color: var(--cm-link-hover);
color: var(--cm-link-hover);
}
/* The card, pinned beside the list. Out of the flow, so it never changes
the height of the item it belongs to. They all share the same spot, so
only one can be seen at a time. */
.elementor-widget-off-canvas .e-off-canvas .menu-main-menu-container > .menu > li > .sub-menu {
position: absolute;
top: 0;
left: calc(var(--cm-col) + var(--cm-col-gap));
right: 0;
display: flex;
flex-direction: column;
gap: var(--cm-sub-gap);
padding: var(--cm-sub-pad);
background: var(--cm-card);
border-radius: 4px;
opacity: 0;
visibility: hidden;
/* Hiding waits 180ms. That grace period, plus the bridge below, means
the card does not vanish while the pointer crosses the gap. */
transition: opacity 0.18s ease, visibility 0s linear 0.18s;
}
/* The bridge. An invisible strip that fills the gap between the list and
the card. It belongs to the card, which sits inside the , so the
pointer never leaves that on its way across. */
.elementor-widget-off-canvas .e-off-canvas .menu-main-menu-container > .menu > li > .sub-menu::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: calc(var(--cm-col-gap) * -1);
width: var(--cm-col-gap);
}
.elementor-widget-off-canvas .e-off-canvas .menu-main-menu-container > .menu > li > .sub-menu a {
font-size: var(--cm-sub-size);
line-height: 1.3;
}
/* ---- Which card shows ------------------------------------------------
Normal case, with the script: exactly ONE card shows, the one on the
item marked cm-active. The script moves that mark as the pointer moves,
waits a moment before switching, and never drops it while the pointer
crosses the gap. Hidden cards vanish at once and ignore the pointer,
so a card on its way out can never sit on top and steal the hover.
Fallback, if the script does not run: plain :hover. */
/* With the script. */
.cm-js .elementor-widget-off-canvas .e-off-canvas .menu-main-menu-container > .menu > li > .sub-menu {
transition: none;
pointer-events: none;
}
.cm-js .elementor-widget-off-canvas .e-off-canvas .menu-main-menu-container > .menu > li.cm-active > .sub-menu {
opacity: 1;
visibility: visible;
pointer-events: auto;
z-index: 2;
transition: opacity 0.15s ease;
}
/* Without the script. The resting card shows only while the pointer is
NOT over the list, so it never fights the card being pointed at. */
html:not(.cm-js) .elementor-widget-off-canvas .e-off-canvas .menu-main-menu-container > .menu:not(:hover) > .current-menu-ancestor > .sub-menu,
html:not(.cm-js) .elementor-widget-off-canvas .e-off-canvas .menu-main-menu-container > .menu:not(:hover) > .current-menu-parent > .sub-menu,
html:not(.cm-js) .elementor-widget-off-canvas .e-off-canvas .menu-main-menu-container > .menu > li:hover > .sub-menu,
html:not(.cm-js) .elementor-widget-off-canvas .e-off-canvas .menu-main-menu-container > .menu > li:focus-within > .sub-menu {
opacity: 1;
visibility: visible;
z-index: 2;
transition: opacity 0.18s ease, visibility 0s;
}
}
/* =========================================================================
2b — phone, 767px and down
One column. Every row is at least 52px, so it is easy to hit.
========================================================================= */
@media (max-width: 767px) {
.elementor-widget-off-canvas .e-off-canvas {
--cm-top-size: 1.25rem; /* 20px */
}
.elementor-widget-off-canvas .e-off-canvas .menu-main-menu-container > .menu > li > a {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-height: 52px;
font-size: var(--cm-top-size);
line-height: 1.25;
border-bottom: 1px solid var(--cm-rule);
}
.elementor-widget-off-canvas .e-off-canvas .menu-main-menu-container > .menu > li:last-child > a {
border-bottom: 0;
}
/* The arrow on a row that has children. */
.elementor-widget-off-canvas .e-off-canvas .menu-main-menu-container > .menu > .menu-item-has-children > a::after {
content: "";
flex: 0 0 auto;
width: 9px;
height: 9px;
margin-right: 8px;
border-right: 1.5px solid var(--cm-muted);
border-bottom: 1.5px solid var(--cm-muted);
transform: rotate(-45deg);
transition: transform 0.2s ease, border-color 0.2s ease;
}
/* Open: the row turns gold and the arrow points down. */
.elementor-widget-off-canvas .e-off-canvas .menu-main-menu-container > .menu > .menu-item-has-children.cm-open > a,
.elementor-widget-off-canvas .e-off-canvas .menu-main-menu-container > .menu > .menu-item-has-children.current-menu-ancestor > a {
color: var(--cm-link-hover);
border-bottom-color: transparent;
}
.elementor-widget-off-canvas .e-off-canvas .menu-main-menu-container > .menu > .menu-item-has-children.cm-open > a::after,
.elementor-widget-off-canvas .e-off-canvas .menu-main-menu-container > .menu > .menu-item-has-children.current-menu-ancestor > a::after {
border-color: var(--cm-link-hover);
transform: rotate(45deg);
}
/* The tinted box that holds the children. */
.elementor-widget-off-canvas .e-off-canvas .menu-main-menu-container > .menu > li > .sub-menu {
display: flex;
flex-direction: column;
margin-bottom: 10px;
padding: 4px 16px 6px;
background: var(--cm-card);
border-radius: 4px;
}
.elementor-widget-off-canvas .e-off-canvas .menu-main-menu-container > .menu > li > .sub-menu a {
display: flex;
align-items: center;
min-height: var(--cm-sub-row);
padding: 4px 0;
font-size: var(--cm-sub-size);
line-height: 1.35;
}
/* No script: every section stays open, which still reads well.
With the script: only the open one shows. */
.cm-js .elementor-widget-off-canvas .e-off-canvas .menu-main-menu-container > .menu > li > .sub-menu {
display: none;
}
.cm-js .elementor-widget-off-canvas .e-off-canvas .menu-main-menu-container > .menu > li.cm-open > .sub-menu {
display: flex;
}
}
/* Anyone who asked their system for less motion gets none. */
@media (prefers-reduced-motion: reduce) {
.elementor-widget-off-canvas .e-off-canvas .menu-main-menu-container .menu a,
.elementor-widget-off-canvas .e-off-canvas .menu-main-menu-container > .menu > li > .sub-menu,
.elementor-widget-off-canvas .e-off-canvas .menu-main-menu-container > .menu > .menu-item-has-children > a::after {
transition: none;
}
}