PK P&V0ep; k; f-details-summary-nav.cccompk;PK P&Vgs./ )/ component.json)/{"UUID":"f0959bae-9a27-4464-92a2-0c2f6d516d52","additional_states":{"Container":{"outofview":{"character":".","name":"Out of View","value":"outofview"},"show-menu":{"character":".","name":"show-menu","value":"show-menu"}},"Font Icon Link":{"outofview":{"character":".","name":"Out of View","value":"outofview"}},"HTML Element":{"outofview":{"character":".","name":"Out of View","value":"outofview"}},"List Item Link":{"outofview":{"character":".","name":"Out of View","value":"outofview"}},"Paragraph":{"outofview":{"character":".","name":"Out of View","value":"outofview"}},"Text":{"outofview":{"character":".","name":"Out of View","value":"outofview"}},"Text Link":{"outofview":{"character":".","name":"Out of View","value":"outofview"}},"UL Link":{"outofview":{"character":".","name":"Out of View","value":"outofview"}}},"appBuildInfo":"RSD 5.0.3532","appId":"RSD","appVersion":3532,"buildNumber":5977,"component_resources":{"classes":12,"file_sizes_values":[2852,0,0],"file_type_values":[1,0,0],"html_elements":1,"ids":0,"links_external":3,"links_internal":9,"local_files":"1 (local size 2,79 kB)","styled_breakpoints":"750px / 1024px"},"description":"Your component description","element_name":"Container","framework":"foundation","html":"
\"> Home \" data-replace-after=\" \" data-page-name=\"about.html\">About - - \" data-replace-after=\" \" data-page-name=\"products.html\">What we do - - \" data-replace-after=\" \" data-page-name=\"contact.html\">Contact us - - This sample paragraph is sitting in the container main-content
. That is where you should place your site content in order to avoid interfering with the menu and other important mechanisms that make the page work.Please don't change the parameters for the main-content
. It is also advisable to make the menu into a 'symbol'. That makes it possible to insert it on several pages, and if it has to be edited, you only do it on one page, and the rest of the pages will be updated automatically.
","htmlembed":{"3":" "},"mobile_first":true,"name":"f-details-summary-nav","resources":{"./custom-code/custom-menu.css":{"breakpoints":{},"elements":{"counter":1},"pictures":{},"type":"image"}},"stylesheet":".container.pageinside {\n margin-right:auto;\n margin-left:auto;\n max-width:1200px;\n width:100%;\n background-color:rgba(235, 220, 178, 0.7);\n height:auto;\n min-height:100vh;\n box-sizing:border-box;\n padding-top:10px;\n border-right-color:rgba(175, 68, 37, 1);\n}\n\n.container.menu-container {\n grid-area:menu/menu/menu/menu;\n position:fixed;\n max-width:none;\n width:100%;\n padding-top:0px;\n display:flex;\n flex-direction:column;\n padding-left:0px;\n justify-self:center;\n align-self:flex-start;\n top:0px;\n padding-right:0px;\n height:auto;\n overflow:auto;\n right:0px;\n left:0px;\n background-color:rgba(175, 68, 37, 1);\n}\n\n.container.menu-mobile-navigation {\n display:flex;\n justify-content:flex-end;\n padding-top:20px;\n padding-right:20px;\n padding-bottom:20px;\n padding-left:20px;\n position:relative;\n top:0px;\n}\n\na.glyph.menu-icon {\n color:rgba(182, 247, 240, 0);\n position:relative;\n vertical-align:middle;\n font-size:24px;\n text-align:right;\n text-decoration:none;\n visibility:visible;\n}\n\n.container.menu-items-wrapper {\n background-color:rgba(235, 220, 178, 1);\n display:none;\n height:auto;\n min-height:0px;\n padding-top:20px;\n padding-right:20px;\n padding-bottom:20px;\n padding-left:20px;\n position:relative;\n top:56px;\n overflow:auto;\n border-left-width:0.3125rem;\n border-left-style:solid;\n border-left-color:rgba(175, 68, 37, 1);\n}\n\na.link-text.home-button {\n color:rgba(102, 46, 28, 1);\n text-decoration:none;\n font-family:'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Tahoma, sans-serif;\n font-weight:600;\n font-size:16px;\n display:block;\n width:100%;\n padding-top:5px;\n padding-bottom:5px;\n padding-right:15px;\n border-bottom-width:0.0625rem;\n border-bottom-style:solid;\n border-bottom-color:rgba(221, 221, 221, 1);\n line-height:24px;\n}\n\nspan.text-element.menu-item-summary {\n color:rgba(102, 46, 28, 1);\n font-family:'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Tahoma, sans-serif;\n font-size:16px;\n font-weight:600;\n padding-bottom:5px;\n border-bottom-width:0.0625rem;\n border-bottom-style:solid;\n border-bottom-color:rgba(221, 221, 221, 1);\n display:block;\n width:100%;\n margin-bottom:15px;\n margin-top:15px;\n padding-right:15px;\n cursor:pointer;\n padding-top:5px;\n line-height:1.2;\n text-decoration:none;\n}\n\nul.link-list.menu-item-details {\n list-style-type:none;\n padding-left:10px;\n margin-top:0px;\n margin-bottom:0px;\n margin-left:20px;\n}\n\nul.link-list {\n width:auto;\n}\n\nli.list-item-link.menu-item-link {\n line-height:1.4;\n margin-top:16px;\n margin-bottom:16px;\n}\n\nli.list-item-link.menu-item-link>a {\n color:rgba(175, 68, 37, 1);\n text-decoration:none;\n font-family:'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Tahoma, sans-serif;\n font-size:16px;\n}\n\n.container.main-content {\n width:95%;\n margin-right:auto;\n margin-left:auto;\n display:flex;\n padding-top:70px;\n}\n\np.paragraph.paragraph-1 {\n margin-top:16px;\n width:100%;\n margin-right:auto;\n margin-left:auto;\n padding-left:10px;\n padding-right:5px;\n}\n\n.html-element.html-element-1 {\n display:none;\n}\n\n@media screen and (min-width: 46.875rem) {\n .container.pageinside {\n height:100%;\n min-height:100vh;\n background-color:rgba(235, 220, 178, 0.7);\n border-right-width:0.3125rem;\n border-right-style:solid;\n border-right-color:rgba(175, 68, 37, 1);\n box-sizing:border-box;\n padding-top:40px;\n display:grid;\n flex-direction:row;\n justify-content:flex-start;\n position:relative;\n grid-template-columns:350px 1fr;\n grid-template-rows:auto;\n grid-template-areas:\"menu main-content\";\n grid-area:1/2/1/span 1;\n }\n\n .container.menu-container {\n display:block;\n max-width:350px;\n padding-right:8px;\n padding-left:16px;\n position:sticky;\n }\n\n .container.menu-mobile-navigation {\n display:none;\n max-width:350px;\n }\n\n .container.menu-items-wrapper {\n display:block;\n width:100%;\n max-width:350px;\n position:fixed;\n top:0px;\n border-right-style:solid;\n border-left-style:solid;\n border-right-width:0.3125rem;\n border-left-width:0.3125rem;\n border-right-color:rgba(175, 68, 37, 1);\n border-left-color:rgba(175, 68, 37, 1);\n background-color:rgba(235, 220, 178, 1);\n grid-area:1/1/span 1/span 1;\n height:100%;\n overflow:auto;\n }\n\n a.link-text.home-button {\n color:rgba(102, 46, 28, 1);\n }\n\n span.text-element.menu-item-summary {\n color:rgba(102, 46, 28, 1);\n }\n\n li.list-item-link.menu-item-link>a {\n color:rgba(175, 68, 37, 1);\n }\n\n .container.main-content {\n width:100%;\n margin-left:0px;\n position:relative;\n right:auto;\n left:auto;\n margin-right:0px;\n display:block;\n padding-top:0px;\n }\n\n p.paragraph.paragraph-1 {\n width:95%;\n margin-left:auto;\n margin-right:auto;\n max-width:none;\n }\n}\n\n@media screen and (min-width: 64rem) {\n .container.menu-mobile-navigation {\n background-color:rgba(0, 0, 0, 0);\n }\n}","timestamp":1672995822480,"type":"Container","units":"rem"}
PK P&VRs) $ % resources/custom-code/custom-menu.css$html.loaded {
scroll-behavior: smooth;
}
@media screen and (prefers-reduced-motion: reduce) {
html.loaded {
scroll-behavior: auto;
}
}
.title-section {
pointer-events: none;
}
.container.menu-container {
height: calc(100vh - 32px);
overflow-x: hidden;
}
@media screen and (max-width: 60rem) {
.container.menu-container {
height: auto;
}
.container.menu-container.show-menu {
height: 100vh; /* Fallback */
height: calc(var(--viewport-height, 1vh) * 100);
}
.container.menu-items-wrapper.show-menu {
height: calc(100vh - 65px); /* Fallback */
height: calc(var(--viewport-height, 1vh) * 100 - 65px);
}
}
nav.menu-container,
nav.menu-container * {
box-sizing: border-box;
}
nav.menu-container a {
display: block;
-webkit-transition-delay: .5s;
-moz-transition-delay: .5s;
-o-transition-delay: .5s;
transition-delay: .5s;
-webkit-transition-duration: .2s;
-moz-transition-duration: .2s;
-o-transition-duration: .2s;
transition-duration: .2s;
-webkit-transition-property: all;
-moz-transition-property: all;
-o-transition-property: all;
transition-property: all;
}
details > summary {
list-style: none;
display: block;
position: relative;
}
details > summary::-webkit-details-marker {
display: none;
}
details > summary:focus {
outline: none;
}
details > summary .line-vertical-plus,
details > summary .line-horizontal-plus {
width: 12px;
height: 2px;
background-color: #662e1c;
color: transparent;
display: block;
position: absolute;
right: 0;
top: calc(50% - 2px);
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s;
-webkit-transition-timing-function: ease-in-out;
-moz-transition-timing-function: ease-in-out;
-o-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
transition-duration: 0.2s;
-webkit-transition-property: all;
-moz-transition-property: all;
-o-transition-property: all;
transition-property: all;
}
details > summary .line-vertical-plus {
transform: rotate(-90deg);
}
details[open] > summary .line-vertical-plus {
transform: rotate(0deg);
}
details[open] > summary .line-horizontal-plus{
transform: rotate(180deg);
}
details[open] summary ~ * {
animation: sweep .5s ease-in-out;
}
@keyframes sweep {
0% {opacity: 0;}
100% {opacity: 1;}
}
/* Search Custom Styles */
.cc-result-highlight {
font-weight: 700;
}
PK P&Vgs./ )/ component.jsonPK P&VRs) $ % Z/ resources/custom-code/custom-menu.cssPK : PK P&Vg?@S 1S f-details-summary-nav.png PNG
IHDR A l1 pHYs + IDATx{|em!32a\+t"QB%(
+tE(D̙٘6a2f~̮͎6>z}~>~LK{[ *Q h 08D G H " #A `p$ 08D G H " #A `p$ 08D G H " #A `p$ 08D G H " #A `p$ dQ P_Q I
䍢 0)?eu~~ # a