/* Theme Name: Jaster Basic Text Domain: jbasic Version: 1.9 Tested up to: 5.9 Requires at least: 4.7 Requires PHP: 5.2.4 Description: Tema ini Khusus untuk Client JasterMedia Tags: Private Author: JasterWeb Team Author URI: https://jasterweb.com License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html All files, unless otherwise stated, are released under the GNU General Public License version 2.0 (http://www.gnu.org/licenses/gpl-2.0.html) This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned with others. */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- 0. CSS Reset 1. Document Setup 2. Element Base 3. Helper Classes 4. Site Header 5. Menu Modal 6. Search Modal 7. Page Templates a. Template: Cover Template c. Template: Full Width 8. Post: Archive 9. Post: Single 10. Blocks 11. Entry Content 12. Comments 13. Site Pagination 14. Error 404 15. Widgets 16. Site Footer 17. Media Queries ----------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- */ /* 0. CSS Reset /* -------------------------------------------------------------------------- */ :root { --bordius:6px; --txt-black:#333; } @media (prefers-reduced-motion: reduce) { html{scroll-behavior:auto} } html{font-size:62.5%;scroll-behavior:smooth} main{display:block} body{background:#f5efe0;box-sizing:border-box;color:var(--color-text)!important;font-family:-apple-system,var(--font-body),sans-serif;font-size:14px;line-height: 1.8;} p{color:var(--color-text)} *,::before,::after{box-sizing:inherit;-webkit-font-smoothing:antialiased;word-break:break-word;word-wrap:break-word} html,body{border:none;margin:0;padding:0} h1, h2, h3, h4, h5, h6, p, blockquote, address, big, cite, code, em, font, img, small, strike, sub, sup, li, ol, ul, fieldset, form, label, legend, button, table, caption, tr, th, td { border: none; line-height: inherit; margin: 0; padding: 0; text-align: inherit; } .group::after, .entry-content::after { clear: both; content: ""; display: block; } blockquote::before, blockquote::after { content: ""; } a, path {transition: all 0.15s linear;} .screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important; width:1px;word-wrap:normal!important;word-break:normal} .screen-reader-text:focus{background-color:#f1f1f1;border-radius:3px;box-shadow:0 0 2px 2px rgba(0,0,0,0.6);clip:auto!important;-webkit-clip-path:none;clip-path:none;color:#21759b; display:block;font-size:.875rem;font-weight:700; height:auto;right:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000} #accordion-section-typography { display: block !important; } /* -------------------------------------------------------------------------- */ /* 1. CSS Starter /* -------------------------------------------------------------------------- */ .flex{display:flex} .flex-between{display:flex;align-items:center;justify-content:space-between} .flex-center{display:flex;align-items:center;justify-content:center} .text-center{text-align:center} .m-0{margin:0 !important} .p-0{padding:0 !important} .m-t-7{margin-top:7px}.m-l-7{margin-left:7px}.m-r-7{margin-right:7px}.m-b-7{margin-bottom:7px} .m-t-15{margin-top:15px}.m-l-15{margin-left:15px}.m-r-15{margin-right:15px}.m-b-15{margin-bottom:15px} .m-t-40{margin-top:40px}.m-l-40{margin-left:40px}.m-r-40{margin-right:40px}.m-b-40{margin-bottom:40px} .m-t-10{margin-top:10x}.m-l-10{margin-left:10px}.m-r-10{margin-right:10px}.m-b-10{margin-bottom:10px} .p-t-15{padding-top:15px}.p-l-15{padding-left:15px}.p-r-15{padding-right:15px}.p-b-15{padding-bottom:15px} .p-t-10{padding-top:10px}.p-l-10{padding-left:10px}.p-r-10{padding-right:10px}.p-b-10{padding-bottom:10px} /* -------------------------------------------------------------------------- */ /* 2. Template Structure /* -------------------------------------------------------------------------- */ #site-content{overflow:hidden;padding:5rem 0} .page-title .entry-title{font-size: 2.5rem;} .container{max-width:1140px;margin: 0 auto;} .site-logo img{width: 15rem;} .site-title,.site-description{margin:0} .site-title{font-size:2.1rem;font-weight:600;line-height:1} .site-title a{color:inherit;display:block;text-decoration:none} .site-description{margin-top:1rem;color:var(--color-text);font-size:1.8rem;font-weight:500;display:none;letter-spacing:-.0311em;transition:all .15s linear} .site-logo a{display:block} .item_crumbs a{margin-right:10px;color:#666} .jb_crumbs{display:ruby} .item_crumbs .separator{padding-right:10px} /* -------------------------------------------------------------------------- */ /* 3. Buttons /* -------------------------------------------------------------------------- */ .btx{padding:1.4rem 2.5rem;display:inline-block;border-radius:var(--bordius)} .btx-s{padding:1rem 2rem;font-size:12px;display:inline-block;border-radius:var(--bordius);} .btx-primary{background:var(--color-main);color:#fff;border:1px solid var(--color-main)} .btx-primary:hover{background:transparent;color:var(--color-main)} .btx-secondary{background:var(--color-secondary);color:#fff;border:1px solid var(--color-secondary)} .btx-secondary:hover{background:transparent;color:var(--color-secondary)} /* -------------------------------------------------------------------------- */ /* 4. Typography /* ---------------------------------------------*---------------------------- */ a{color:var(--color-main);text-decoration:none} a:hover,a:focus{text-decoration:none} h1,h2,h3,h4,h5,h6{line-height: normal;font-family:var(--font-title);color:var(--color-title);font-weight:700;margin:0 0 2rem} h1,.heading-size-1{font-size:4rem;font-weight:800;line-height:1.138888889} h2,.heading-size-2{font-size:3.2rem} h3,.heading-size-3{font-size:2.8rem} h4,.heading-size-4{font-size:2.4rem} h5,.heading-size-5{font-size:2.1rem} h6,.heading-size-6{font-size:1.6rem;text-transform:uppercase} p{line-height:1.5;margin:0 0 1em} em,i,q,dfn{font-style:italic} em em,em i,i em,i i,cite em,cite i{font-weight:bolder} big{font-size:1.2em} small{font-size:.75em} b,strong{font-weight:600} ins{text-decoration:underline} sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline} sup{top:-.5em} sub{bottom:-.25em} abbr,acronym{cursor:help} address{line-height:1.5;margin:0 0 2rem} hr{border-style:solid;border-width:.1rem 0 0;border-color:#dcd7ca;margin:4rem 0} /* ARCHIVE -------------------------- */ .archivepost{width:100%;margin:0 -7.5px} .archivepost article{width:20%;float:left;margin-bottom:30px;padding:0 7.5px} .archivepost .category-informasi{width: 25%;} .innerarsip{background: #fff;} .innerarsip figure{margin:0;position:relative;overflow:hidden;background-color:#0b0b0b} .featured-media img:hover{-webkit-transform:scale(1.05) translateY(0px);-ms-transform:scale(1.05) translateY(0px);-moz-transform:scale(1.05) translateY(0px);transform:scale(1.05) translateY(0px);opacity:.7} .arsiptitle a{font-size:16px;color:var(--txt-black);font-weight:600} .arsiptitle a:hover{color:var(--color-main)} .arsiptitle{margin:0;line-height:1.7rem} .isiarsip{padding:15px} .isiarsip span{display:inline-block;width:100%} .archive-meta{margin:10px 0 0;list-style:none;display:flex} .archive-meta li{margin:0 5px 0 0;color:var(--color-text);font-size:12px} .archive-meta li a{color:var(--color-text)}.archive-meta li a:hover{color:var(--color-main)} .archive-meta li:after{content:"/";margin-left:5px} .archive-meta li:last-child:after{display:none} /* PAGINATION -------------------------- */ .jpagination{display:flex;justify-content:center;align-items:center;width:100%;margin:15px 0}.jpagination span, .jpagination a{padding:10px 20px;background:#333;margin:0 5px;text-align:center;color:#fff;border-radius:6px;transition:all .3s ease-in-out} .jpagination .current,.jpagination span:hover,.jpagination a:hover{background:#0575E6} /* 404 ERROR -------------------------- */ .error-main{padding: 10rem 0 !important;} .error-404{font-size: 15rem; color: var(--color-main);} .error404-content {margin: 0 auto;max-width: 550px;} .error404-content{text-align:center} .error404 #site-content .search-form{justify-content:center;margin-top:3rem} /* SINGLE POST -------------------------- */ .entry-content{font-family:var(--font-body);letter-spacing:normal;font-size:16px;line-height:2.5rem} .entry-content h1,.entry-content h2,.entry-content h3{margin:2rem auto} .entry-content p{color:#797979} .single .innermain article{width:100%} .innermain aside{width:25%;padding-left:2rem;} .innermain{display:flex} .single-title{margin:5px 0 10px;display:inline-block} .cat-single a,.cat-single{color:var(--color-main);font-size:16px;font-weight:600} .title-wrap{display: flex; flex-direction: column;margin-bottom:25px} .single-cover{margin-bottom:4rem} .single-cover img{border-radius:12px} .single-meta{display:flex;justify-content:space-between;align-items:center;margin:0} .single-info span{display:flex;align-items:center;font-size:13px;color:var(--color-text)} .single-author a{margin-left:5px} .single-author{margin-bottom:9px} .single-date svg{margin-right:5px} /* SINGLE PAGE -------------------------- */ .page .innermain article{width:75%} .max850{max-width:850px;margin:0 auto!important} .max850 .woocommerce{width:100%} /* Footer ------------------- */ .scrollToTopBtn{background-color:var(--color-main);color:#fff;cursor:pointer;position:fixed;bottom:20px;left:20px;z-index:999; opacity:0;transform:translateY(100px);transition:all .5s ease;text-align:center;padding:12px;border-radius:100px;display:flex;align-items:center;justify-content:center} .scrollToTopBtn:hover{background:#20134f;color:#fff} .showBtn{opacity:1;transform:translateY(0)} /* Social Share v1 ------------------------------------- */ .socshare{margin-top:3rem;text-align:center}.socshare h4{display:flex;align-items:center;justify-content:center;position:relative} .socshare h4 span{padding:0 15px;text-transform:uppercase;background:#fff;z-index:3} .socshare h4:before{content:"";background:rgba(1,1,1,0.18);position:absolute;padding:1px;left:0;width:100%} .socshare ul{margin:0;list-style:none;display:flex}.socshare ul li{width:25%;margin: 0;} .socshare ul li a{text-decoration: none !important; display: flex; align-items: center; justify-content: center; padding: 1.3rem 1rem; color: #fff; font-weight: 600;} .socshare ul li a svg{margin-right:7px}.fb{background:#4A6DB4}.tw{background:#55acee}.tele{background:#08c}.wea{background:#25d366} .socshare ul li a:hover{background: #333 !important;} /* Lists ------------------------------------- */ ul,ol{margin:0 0 3rem 3rem} ul{list-style:disc} ul ul{list-style:circle} ul ul ul{list-style:square} ol{list-style:decimal} ol ol{list-style:lower-alpha} ol ol ol{list-style:lower-roman} li{line-height:1.5;margin:.5rem 0 0 2rem} li > ul,li > ol{margin:1rem 0 0 2rem} dt,dd{line-height:1.5} dt{font-weight:700} dt + dd{margin-top:.5rem} dd + dt{margin-top:1.5rem} /* Quotes ------------------------------------ */ blockquote{border-color:var(--color-main);border-style:solid;border-width:0 0 0 .2rem;color:inherit;font-size:1em;margin:4rem 0;padding:.5rem 0 .5rem 2rem} cite{color:var(--color-text);font-size:1.4rem;font-style:normal;font-weight:600;line-height:1.25} blockquote cite{display:block;margin:2rem 0 0} blockquote p:last-child{margin:0} /* Code -------------------------------------- */ code,kbd,pre,samp{font-family:monospace;font-size:.9em;padding:.4rem .6rem} code,kbd,samp{background:rgba(0,0,0,0.075);border-radius:.2rem} pre{border:.1rem solid #dcd7ca;line-height:1.5;margin:4rem 0;overflow:auto;padding:3rem 2rem;text-align:left} pre code{background:transparent;padding:0} /* Media ------------------------------------- */ figure{display:block;margin:0} iframe{display:block;max-width:100%} video{display:block} svg,img,embed,object{display:block;height:auto;max-width:100%} figcaption,.wp-caption-text{color:var(--color-text);display:block;font-size:12px;margin-top:10px} figcaption a,.wp-caption-text a{color:inherit} blockquote.instagram-media,iframe.instagram-media{margin:auto!important} /* GALLERIES */ .gallery{display:flex;flex-wrap:wrap;margin:3em 0 3em -.8em;width:calc(100% + 1.6em)} .gallery-item{margin:.8em 0;padding:0 .8em;width:100%} .gallery-caption{display:block;margin-top:.8em} /* Inputs ------------------------------------ */ fieldset{border:.2rem solid #dcd7ca;padding:2rem} legend{font-size:.85em;font-weight:700;padding:0 1rem} label{display:block;font-size:1.6rem;font-weight:400;margin:0 0 .5rem} label.inline,input[type="checkbox"] + label{display:inline;font-weight:400;margin-left:.5rem} input[type="checkbox"]{-webkit-appearance:none;-moz-appearance:none;position:relative;top:2px;display:inline-block;margin:0;width:1.5rem;min-width:1.5rem;height:1.5rem;background:#fff;border-radius:0;border-style:solid;border-width:.1rem;border-color:#dcd7ca;box-shadow:none;cursor:pointer} input[type="checkbox"]:checked::before{content:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27%23000000%27%2F%3E%3C%2Fsvg%3E");position:absolute;display:inline-block;margin:-.1875rem 0 0 -.25rem;height:1.75rem;width:1.75rem} input,textarea,button,.button,.faux-button,.wp-block-button__link,.wp-block-file__button{font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,sans-serif;line-height:1} input,textarea{border-color:#dcd7ca;color:#000} code,input[type="url"],input[type="email"],input[type="tel"]{direction:ltr} input[type="text"],input[type="password"],input[type="email"],input[type="url"],input[type="date"],input[type="month"],input[type="time"],input[type="datetime"],input[type="datetime-local"],input[type="week"],input[type="number"],input[type="search"],input[type="tel"],input[type="color"],textarea{-webkit-appearance:none;-moz-appearance:none;background:#fff;border-radius:0;border-style:solid;border-width:.1rem;box-shadow:none;display:block;font-size:1.6rem;letter-spacing:-.015em;margin:0;max-width:100%;padding:1.5rem 1.8rem;width:100%} select{font-size:1em} textarea{height:12rem;line-height:1.5;width:100%} input::-webkit-input-placeholder{line-height:normal} input:-ms-input-placeholder{line-height:normal} input::-moz-placeholder{line-height:revert} input[type="search"]::-webkit-search-decoration,input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-results-button,input[type="search"]::-webkit-search-results-decoration{display:none} button,.button,.faux-button,.wp-block-button__link,.wp-block-file .wp-block-file__button,input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:none;-moz-appearance:none;background:var(--color-main);border:none;border-radius:0;color:#fff;cursor:pointer;display:inline-block;font-size:1.5rem;font-weight:600;line-height:1.25;margin:0;opacity:1;padding:1.1em 1.44em;text-align:center;text-decoration:none;transition:opacity .15s linear} input[type="text"]:focus,input[type="email"]:focus,input[type="url"]:focus,input[type="password"]:focus,input[type="number"]:focus,input[type="tel"]:focus,input[type="range"]:focus,input[type="date"]:focus,input[type="month"]:focus,input[type="week"]:focus,input[type="time"]:focus,input[type="datetime"]:focus,input[type="datetime-local"]:focus,input[type="color"]:focus,textarea:focus{border-color:currentColor} input[type="search"]:focus{outline:thin dotted;outline-offset:-4px} .toggle{-moz-appearance:none;-webkit-appearance:none;color:inherit;cursor:pointer;font-family:inherit;position:relative;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;text-align:inherit;user-select:none} button.toggle{background:none;border:none;box-shadow:none;border-radius:0;font-size:inherit;font-weight:400;letter-spacing:inherit;padding:0;text-transform:none} /* Tables ------------------------------------ */ table{border:.1rem solid #dcd7ca;border-collapse:collapse;border-spacing:0;empty-cells:show;font-size:1.6rem;margin:4rem 0;max-width:100%;overflow:hidden;width:100%} .alignleft > table{margin:0} .alignright > table{margin:0} th,td{border:.1rem solid #dcd7ca;line-height:1.4;margin:0;overflow:visible;padding:.5em} caption{background:#dcd7ca;font-weight:600;padding:.5em;text-align:center} thead{vertical-align:bottom;white-space:nowrap} th{font-weight:700} /* Others ----------------------------- */ .bg-image{background-position:center;background-repeat:no-repeat;background-size:cover} .bg-attachment-fixed{background-attachment:fixed} @media ( prefers-reduced-motion: reduce ) { .bg-attachment-fixed{background-attachment:scroll} } .wp-block-image.is-resized{margin-left:auto;margin-right:auto} /* Search Form ------------------------------- */ .search-form{align-items:stretch;display:flex;flex-wrap:nowrap;margin:0 0 -.8rem -.8rem} .search-form .search-field,.search-form .search-submit{margin:0} .search-form label{align-items:stretch;display:flex;font-size:inherit;margin:0;width:100%} .search-form .search-field{width:100%} .search-form .search-submit{display: none;} .search-form .search-submit:focus,.search-form .search-submit:hover{text-decoration:none} .jsearch-box.aktif{visibility: visible; -moz-opacity: 1; -webkit-opacity: 1; opacity: 1;} .jsearch-box{position: absolute; right: 0; background-color: #fff; border-top: 3px solid var(--color-main); top: 45px; padding: 10px; width: 260px; -webkit-box-shadow: 0 2px 7px rgba(0,0,0,0.1); -moz-box-shadow: 0 2px 7px rgba(0,0,0,0.1); box-shadow: 0 2px 7px rgba(0,0,0,0.1); transition: all 0.25s ease-in-out; z-index: 10000;visibility: hidden; -moz-opacity: 0; -webkit-opacity: 0; opacity: 0; transition: all 0.25s ease-in-out;} /* -------------------------------------------------------------------------- */ /* 4. Site Header /* -------------------------------------------------------------------------- */ .jheader{padding: 15px 0; background: transparent; position: absolute; top: 0; left: 0; width: 100%;z-index: 2;} .jheader .container{display:flex;align-items:center;justify-content:space-between} /* Nav Menu ------------------------------------- */ .header-titles-wrapper{float:left} .primary-menu-wrapper{float: right; display: flex; align-items: center;position: relative;} .primary-menu{list-style:none;display:flex;margin:0} .primary-menu li{margin: 0 25px 0 0;position:relative} .primary-menu li a{font-size:15px;text-decoration:none} @media (max-width:768px){ .jheader {padding-right: 15px;padding-left: 15px;} .header-titles-wrapper{display: flex;justify-content: space-between;width: 100%;} } /* -------------------------------------------------------------------------- */ /* 5. Side Nav Mobile /* -------------------------------------------------------------------------- */ .menu-modal{display:none;opacity:0;overflow-y:auto;overflow-x:hidden;position:fixed;bottom:0;left:-99999rem;right:99999rem;top:0;transition:opacity .25s ease-in,left 0 0.25s,right 0 .25s;z-index:99} .admin-bar .menu-modal{top:32px} .menu-modal.show-modal{display:flex} .menu-modal.active{left:0;opacity:1;right:0;transition:opacity .25s ease-out;background:rgba(1,1,1,0.4)} .menu-modal-inner{background:#131313;display:flex;justify-content:stretch;overflow:auto;-ms-overflow-style:auto;width:80%} .menu-wrapper{display:flex;flex-direction:column;justify-content:space-between;position:relative;width:100%} .mobile-menu ul{margin:0} button.close-nav-toggle{align-items: center; display: flex; font-size: 14px; font-weight: 600; justify-content: flex-start; padding: 1.6rem 2rem; width: 100%; background: #171717; color: #fff; transition: all .3s ease-in-out;color: #fff !important;} .close-nav-toggle:hover{padding-left: 2.5rem;} button.close-nav-toggle svg{margin-right:5px} button.close-nav-toggle .toggle-text{margin-right:1.6rem} .menu-modal .menu-top{flex-shrink:0} .modal-menu{position:relative} .modal-menu li{display:flex;flex-wrap:wrap;line-height:1;justify-content:flex-start;margin:0;border-bottom:1px solid rgba(255,255,255,0.05)} .modal-menu > li > a,.modal-menu > li > .ancestor-wrapper > a{font-size:14px;font-weight:600} .modal-menu > li:last-child{border-bottom-width:.1rem} .modal-menu .ancestor-wrapper{display:flex;justify-content:space-between;width:100%} .modal-menu a{display:block;padding:2rem;text-decoration:none;width:100%;color:#c8c8c8} button.sub-menu-toggle{border-left:1px solid rgba(255,255,255,0.08);flex-shrink:0;margin:1rem 0;padding:0 2.5rem;color:#fff;background:transparent!important} button.sub-menu-toggle svg{fill: #fff;height:.9rem;transition:transform .15s linear;width:1.5rem} button.sub-menu-toggle.active svg{transform:rotate(180deg)} .modal-menu ul{display:none;margin:0;width:100%} .modal-menu ul li{border-left-width:1rem} .modal-menu ul li a{font-weight:400;color:#c8c8c8;padding-left:35px} .menu-wrapper .menu-item{position:relative} .menu-wrapper .active{display:block;background:rgba(1,1,1,0.36)} .menu-wrapper.is-toggling{pointer-events:none} .menu-wrapper.is-toggling .menu-item{position:absolute;top:0;left:0;margin:0;width:100%} .menu-wrapper.is-toggling .menu-bottom .social-menu .menu-item{width:auto} .menu-wrapper.is-animating .menu-item,.menu-wrapper.is-animating .toggling-target{transition-duration:250ms} .menu-wrapper.is-animating .menu-item{transition-property:transform} .menu-wrapper.is-toggling .toggling-target{display:block;position:absolute;top:0;left:0;opacity:1} .menu-wrapper.is-toggling .toggling-target.active{opacity:0} .menu-wrapper.is-animating.is-toggling .toggling-target{display:block;transition-property:opacity;opacity:0} .menu-wrapper.is-animating.is-toggling .toggling-target.active{opacity:1} .menu-wrapper.is-toggling .modal-menu > li:last-child li{border-top-color:transparent;border-bottom-width:.1rem} @media (prefers-reduced-motion: reduce) { .menu-wrapper.is-animating .menu-item,.menu-wrapper.is-animating .toggling-target{transition-duration:1ms!important} } .mobile-menu{display:block} .menu-bottom{flex-shrink:0;padding:4rem 0} .menu-bottom nav{width:100%} @media (max-width: 782px) { .admin-bar .menu-modal{top:46px} } /* Overlay Header ---------------------------- */ .overlay-header #site-header{background:transparent;margin:0;position:absolute;left:0;right:0;top:0;z-index:2} .overlay-header .header-inner{color:#fff} .overlay-header .site-description,.overlay-header .toggle{color:inherit} .overlay-header .header-inner .toggle-wrapper::before{background-color:currentColor;opacity:.25} .admin-bar.overlay-header #site-header{top:32px} @media (max-width: 782px) { .admin-bar.overlay-header #site-header{top:46px} } /* Header Navigation ------------------------- */ .primary-menu li a{color: rgba(255,255,255,0.8); font-family: var(--font-title); text-transform: uppercase; font-size: 14px; font-weight: bold;} .current_page_item a{font-weight:600} /* Header Toggles ---------------------------- */ .header-toggles{display:none} .header-inner .toggle{align-items:center;display:flex;overflow:visible;padding:0 2rem} .header-inner .toggle svg{display:block;position:relative;z-index:1} .header-inner .toggle path{fill:currentColor} .toggle-inner{display:flex;justify-content:center;height:2.3rem;position:relative} .toggle-icon{display:block;overflow:hidden} .toggle-inner .toggle-text{color:var(--color-text);font-size:1rem;font-weight:600;position:absolute;top:calc(100% + 0.5rem);width:auto;white-space:nowrap;word-break:break-all} .overlay-header .toggle-text{color:inherit} /* Search Toggle ----------------------------- */ .search-toggle{position:absolute;bottom:0;left:0;top:0} .search-toggle .toggle-icon,.search-toggle svg{height:2.5rem;max-width:2.3rem;width:2.3rem} /* Primary Menu ---------------------------- */ .menu-item-has-children .menu-wrap{display:flex;align-items:center} .menu-item-has-children .menu-wrap svg{margin-left:3px} .primary-menu a:hover, .primary-menu a:focus, .primary-menu .current_page_ancestor { color: var(--color-main) !important; } .primary-menu li.current-menu-item > a, .primary-menu li.current-menu-item > .link-icon-wrapper > a { color: var(--color-main) !important; } .primary-menu li.current-menu-item > a:hover, .primary-menu li.current-menu-item > .link-icon-wrapper > a:hover, .primary-menu li.current-menu-item > a:focus, .primary-menu li.current-menu-item > .link-icon-wrapper > a:focus { text-decoration: none; } /* SUB MENU */ .primary-menu ul{margin:0;background:#000;border-radius:.4rem;color:#fff;font-size:1.7rem;opacity:0;padding:1rem 0;position:absolute;right:9999rem;top:calc(100% + 2rem); transition:opacity .15s linear,transform .15s linear,right 0 .15s;transform:translateY(0.6rem);width:20rem;z-index:1;list-style:none} .primary-menu li.menu-item-has-children:hover > ul, .primary-menu li.menu-item-has-children:focus > ul, .primary-menu li.menu-item-has-children.focus > ul { right: 0; opacity: 1; transform: translateY(0); transition: opacity 0.15s linear, transform 0.15s linear; } .primary-menu ul::before,.primary-menu ul::after{content:"";display:block;position:absolute;bottom:100%} .primary-menu ul::before{height:2rem;left:0;right:0} .primary-menu ul::after{border:.8rem solid transparent;border-bottom-color:#000;right:1.8rem} .primary-menu ul a{background:transparent;border:none;color:inherit;display:block;padding:1rem 2rem;transition:background-color .15s linear;width:100%} .primary-menu ul li.menu-item-has-children > a{padding-right:4.5rem} .primary-menu ul li.menu-item-has-children .icon{position:absolute;right:1.5rem;top:calc(50% - 0.5rem)} /* DEEP DOWN */ .primary-menu ul ul { top: -1rem; } .primary-menu ul li.menu-item-has-children:hover > ul, .primary-menu ul li.menu-item-has-children:focus > ul, .primary-menu ul li.menu-item-has-children.focus > ul { right: calc(100% + 2rem); } .primary-menu ul ul::before{bottom:0;height:auto;left:auto;right:-2rem;top:0;width:2rem} .primary-menu ul ul::after{border-bottom-color:transparent;border-left-color:#000;bottom:auto;right:-1.6rem;top:2rem} .rtl .primary-menu ul ul::after{transform:rotate(180deg)} /* * Enable nav submenu expansion with tapping on arrows on large-viewport * touch interfaces (e.g. tablets or laptops with touch screens). * These rules are supported by all browsers (>IE11) and when JS is disabled. */ @media (any-pointer: coarse) { .primary-menu > li.menu-item-has-children > a{padding-right:0;margin-right:2rem} .primary-menu ul li.menu-item-has-children > a{margin-right:4.5rem;padding-right:0;width:unset} } /* CSS Footer -VERSION --------------------------- */ .footer-widget .col{padding: 0 15px !important;} .footer-widget .col:first-child{padding-left:0!important} .footer-widget .col:last-child{padding-right:0!important} .footer-widget{padding:4.5rem 0} .jfooter{background: #1e1e1e; color: var(--color-text-dark);} .foot-title{margin: 0 0 20px; font-size: 2rem; color: #eee; border-bottom: 1px solid var(--color-secondary); padding-bottom: 15px;} .footer-credits{background: transparent;padding:2rem 0} .copyr a{color:var(--color-text-dark)} .footer-credits p{margin: 0;color: var(--color-text-dark); font-size: 13px; display: inline-block; width: 100%;} /* .textcta h3{margin:0;color:#fff;letter-spacing:0;font-size:2.5rem} .textcta span{margin-top:7px;display:inline-block} .footer-bottom{display:inline-block;width:100%} .paylogo{margin:0;list-style:none;text-align:right} .paylogo li{margin:0 3px 0 0;display:inline-block} .paylogo li img{padding:5px 10px;background:#fdfdff;width:60px;border-radius:4px} .copyr-border-top{padding-top:25px;border-top:1px solid rgba(255,255,255,0.08)} */ @media (max-width: 782px) { .footer-widget .flex{flex-direction:column;padding:0 20px} .footer-widget .col{margin-bottom:25px;padding: 0 0 15px !important;} .footer-widget{padding:5rem 0} .footer-credits p{font-size:12px} .footer-bottom{margin-top:20px} } /* Woocommerce -VERSION --------------------------- */ .woo-sidebar{padding-left: 0 !important; padding-right: 2rem; float: left;} .woo-page article{border-left: 1px solid rgba(1,1,1,0.1);padding-right:0!important;padding-left:20px!important} .woo-page article .single-title,.woocommerce-product-search button{display: none;} .woocommerce .innermain{display:inline-block} .woocommerce .innermain article{float:left!important;padding-right:20px} .woocommerce .jsidebar{float:left;margin-left:0} .woocommerce .price{margin: 0 !important;color: var(--color-text) !important; font-size: 1.5rem !important;} .woocommerce h2{font-size: 2rem !important;} .woocommerce a,.woocommerce button{transition: all 0.15s linear} .woocommerce .quantity .qty{width: 65px !important; padding: 10px !important; text-align: left;background: #fff;} .woocommerce-cart .quantity .qty{background: #f7f7f7;} .inner-prod{display:flex;flex-wrap:wrap} .photo-prod{width:45%} .summary-prod{width:55%;padding-left:20px} .woocommerce-product-gallery{position:relative} .woocommerce-product-gallery__trigger{position: absolute; top: .5em; right: .5em; font-size: 2em; z-index: 9; width: 36px; height: 36px; background: #fff; text-indent: -9999px; border-radius: 100%; box-sizing: content-box;} .woocommerce-product-gallery__trigger:before{content: ""; display: block; width: 10px; height: 10px; border: 2px solid #000; border-radius: 100%; position: absolute; top: 9px; left: 9px; box-sizing: content-box;} .woocommerce-product-gallery__trigger:after{content: ""; display: block; width: 2px; height: 8px; background: #000; border-radius: 6px; position: absolute; top: 19px; left: 22px; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); box-sizing: content-box;} .woocommerce-product-gallery__trigger img{display:none!important} .title-prod{font-size:2.2rem;margin-bottom:10px}.woocommerce-Price-currencySymbol{margin-right: 2px;} .woocommerce div.product p.price{color:var(--color-secondary)} .single_add_to_cart_button{background: var(--color-main) !important; padding: 1.3rem 2rem !important; width: 100%;} .single_add_to_cart_button:hover{background:var(--color-secondary) !important} .summary .price{font-size:2rem!important;margin-bottom:1.5rem!important} .woocommerce-product-details__short-description p{color:#6a6a6a} .summary .cart{display: flex;padding:15px 0;border-top:1px solid rgba(1,1,1,0.13);border-bottom:1px solid rgba(1,1,1,0.13)} .product_meta{display: flex; flex-direction: column;} .flex-control-thumbs li{margin-right:10px!important} .flex-control-thumbs{margin-top:10px!important} .flex-control-thumbs li img{border:1px solid #a2a2a2;border-radius:8px!important} .flex-control-thumbs li .flex-active{border-color:var(--color-main)} .wc-tabs li{background:transparent!important;border:0!important;border-radius:0!important;padding:0!important;margin:0!important} .wc-tabs .active{box-shadow:0 -3px 0 0 var(--color-main) inset} .wc-tabs{padding:0!important} .wc-tabs li a{padding:10px 20px 13px !important;font-weight:400!important} .wc-tabs .active a{color:#000!important} .wc-tabs li:before,.wc-tabs li:after,.woocommerce-Tabs-panel h2:first-child{display:none!important} .stock{font-size:14px!important;border-radius:5px;font-weight:600;display:inline-block;padding:8px 20px} .in-stock{color:#39b54a!important;background:#e7fdee}.out-of-stock{color: #d33 !important; background: #f9eaea;} .woocommerce-product-attributes-item__label{padding:10px 15px!important;background:rgba(0,0,0,0.03);color:#000} .woocommerce-product-attributes-item.woocommerce-product-attributes-item--attribute_pa_color{padding:10px 15px} .woocommerce-product-attributes-item__value{padding:10px 15px!important} .shop_attributes{border:1px solid #d3d3d3!important} .related h2{border-bottom:1px solid #d3ced2;padding-bottom:10px} .related{margin-top:7rem} .single .woocommerce-message{background-color:#39b54a;border-radius:2px;color:#fff;clear:both;border-left:.6180469716em solid rgba(0,0,0,.15);padding:1.5rem 2rem!important;display:flex;align-items:center} .woocommerce-message::before{display:none} .single .woocommerce-message a{margin-right:20px;background:rgba(0,0,0,0.32);color:#fff!important;text-transform:uppercase} .single .woocommerce-message a:hover{background:#fff;color:#39b54a!important} .products .add_to_cart_button,.products .button{margin-top: 7px !important;background:var(--color-main)!important;color:#fff!important;letter-spacing:0!important;text-transform:unset;border-radius:var(--bordius)!important;font-size:14px!important;padding:1.2rem 2rem!important} .woocommerce-cart-form table thead{background: rgba(1, 1, 1, 0.01);} .woocommerce-cart-form table .actions{padding: 1.5rem 2rem !important; background: #f7f7f7;} .coupon .input-text{width:50%!important;padding:1rem!important;margin:0!important} .coupon .button{width:50%;margin:0!important;padding:1.2rem 1rem!important;background:var(--color-main)!important;color:#fff!important;border-radius:0!important} .cart_totals{float:none!important;width:100%!important} .woocommerce-cart-form table,.cart_totals table{background:#fff;border:1px solid rgba(0,0,0,0.17)!important} .woocommerce-cart-form table th,.woocommerce-cart-form table td,.cart_totals table th,.cart_totals table td{border:1px solid rgba(0,0,0,0.04);} .woocommerce-cart-form table th,.cart_totals table th{font-weight: 600 !important;} .checkout-button{background:var(--color-main)!important} .checkout-button:hover{background:var(--color-secondary)!important} @media (max-width:768px){ .product-quantity .quantity{display: inline-block;} } /* -------------------------------------------------------------------------- */ /* 8. Post: Archive /* -------------------------------------------------------------------------- */ /* Archive Header ---------------------------- */ .archive-header{background-color:#fff;padding:4rem 0} .reduced-spacing .archive-header{padding-bottom:2rem} .archive-title{font-size:2.4rem;font-weight:700;margin:0} .archive-subtitle p:last-child{margin-bottom:0} /* -------------------------------------------------------------------------- */ /* 9. Post: Single /* -------------------------------------------------------------------------- */ /* Post Header ------------------------------- */ .entry-header{background-image: url('https://houseofhpl.com/wp-content/uploads/2022/05/pgtitle.jpg'); padding: 20rem 0 2.5rem 0; background-size: cover;} .page-title .entry-title .color-accent{letter-spacing:0} .entry-categories{line-height:1.25;margin-bottom:2rem} .entry-categories-inner{justify-content:center;display:flex;flex-wrap:wrap;margin:-.5rem 0 0 -1rem} .entry-categories a{border-bottom:.15rem solid currentColor;font-size:1.4rem;font-weight:700;letter-spacing:.036666667em;margin:.5rem 0 0 1rem;text-decoration:none;text-transform:uppercase} .entry-categories a:focus,.entry-categories a:hover{border-bottom-color:transparent} h1.entry-title,h2.entry-title{margin:0} .entry-title a{color:inherit;text-decoration:none} .intro-text{margin-top:2rem} .singular .intro-text{font-size:2rem;letter-spacing:-.0315em;line-height:1.4} /* Featured Media ---------------------------- */ .featured-media{margin-top:5rem;position:relative} .singular .featured-media{margin-top:0} .featured-media figcaption{margin:1.5rem auto 0;text-align:center;width:calc(100% - 5rem)} .featured-media img{width:100%; margin:0 auto;transition:all .5s ease;-moz-transition:all .5s ease;-webkit-transition:all .5s ease; -ms-transition:all .5s ease;-o-transition:all .5s ease } /* Single Pagination ------------------------- */ .pagination-single{font-size:1.8rem;margin-top:5rem} .pagination-single-inner{display:flex;flex-direction:column} .pagination-single hr:first-child{margin:0 0 2.8rem} .pagination-single hr:last-child{margin:2.8rem 0 .8rem} .pagination-single a{align-items:baseline;display:flex;font-weight:600;letter-spacing:-.0275em;text-decoration:none;flex:1} .pagination-single a + a{margin-top:1rem} .pagination-single a .arrow{margin-right:1rem} /* Block Font Sizes -------------------------- */ .entry-content .has-small-font-size{font-size:.842em} .entry-content .has-normal-font-size,.entry-content .has-regular-font-size{font-size:1em} .entry-content .has-medium-font-size{font-size:1.1em;line-height:1.45} .entry-content .has-large-font-size{font-size:1.25em;line-height:1.4} .entry-content .has-larger-font-size{font-size:1.5em;line-height:1.3} /* -------------------------------------------------------------------------- */ /* 11. Entry Content /* -------------------------------------------------------------------------- */ /* Comment ----------------------------- */ .comments-wrapper{margin-top:5rem} .comments .comment,.comments .pingback,.comments .trackback,.comments .review{padding-top:3.5rem} div.comment:first-of-type{margin-top:3.5rem;padding-top:0} .comments .comments-header + div{margin-top:0;padding-top:0} .comment-body{position:relative} .comment .comment{padding-left:5%} .comment-meta{line-height:1.1;margin-bottom:1.5rem;min-height:5rem;padding-left:5rem;position:relative} .hide-avatars .comment-meta{min-height:0;padding-left:0} .comment-meta a{color:inherit} .comment-author{font-size:1.8rem;font-weight:700;letter-spacing:-.027777778em} .comment-author a:hover,.comment-author a:focus{text-decoration:none} .comment-meta .avatar{height:4rem;position:absolute;left:0;top:0;width:4rem} .comment-metadata{color:var(--color-text);font-size:1.4rem;font-weight:500;margin-top:.6rem} .comment-metadata a{text-decoration:none} .comment-content.entry-content > :not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide){width:100%} .comment-content.entry-content .alignleft{margin-left:0} .comment-content.entry-content .alignright{margin-right:0} .comment-footer-meta{align-items:center;display:flex;flex-wrap:wrap;font-size:1.2rem;font-weight:600;justify-content:flex-start;line-height:1;margin:1.5rem 0 -1rem -1.5rem;text-transform:uppercase} .comment-footer-meta > *{margin:0 0 1rem 1.5rem} .comment-reply-link{background-color:var(--color-main);color:#fff;display:block;padding:.7rem} .bypostauthor .comment-footer-meta .by-post-author{display:block} .comment-footer-meta a{text-decoration:none} .pingback .comment-meta,.trackback .comment-meta{padding-left:0} .comments-pagination{display:flex;flex-wrap:wrap;justify-content:space-between;margin-top:6rem;text-align:center} .comments-pagination.only-next{justify-content:flex-end} .comments-pagination .page-numbers{display:none;text-decoration:none} .comments-pagination .prev,.comments-pagination .next{display:block} .comments-pagination .prev{left:0} .comments-pagination .next{right:0;text-align:right} .comment-respond::after{clear:both;content:"";display:block} .comment-respond .comment-notes a,.comment-respond .logged-in-as a{color:inherit;text-decoration:none} .comment-respond p{line-height:1.1;margin-bottom:2rem;margin-left:auto;margin-right:auto} .comment-form-cookies-consent{align-items:baseline;display:flex} .comment-respond > p:last-of-type{margin-bottom:0} .comment-respond label{display:block} .comment-respond input[type="checkbox"] + label{font-size:1.5rem;line-height:1.25} .comment-respond input[type="text"],.comment-respond input[type="email"],.comment-respond textarea{margin-bottom:0} .comment-respond textarea{height:15rem} .comment-respond #submit{display:block;border-radius:var(--bordius);background:var(--color-main);color:#fff} .comment-respond .comments-closed{text-align:center} .comments .comment-respond{padding:3rem 0 0} .comments .comment-respond .comment-reply-title,.comments .comment-respond .comment-notes,.comments .comment-respond .logged-in-as{text-align:left} .comment-reply-title small{display:block;font-size:1.6rem;font-weight:600;letter-spacing:-.0277em;margin:.5rem 0 0;white-space:nowrap} .comment-reply-title small a{text-decoration:none} /* -------------------------------------------------------------------------- */ /* 13. Site Pagination /* -------------------------------------------------------------------------- */ .pagination .nav-links{align-items:baseline;display:flex;flex-wrap:wrap;font-size:1.8rem;font-weight:600;margin:-1.5rem 0 0 -2.5rem;width:calc(100% + 2.5rem)} .pagination-separator{margin:5rem 0} .nav-links > *{margin:1.5rem 0 0 2.5rem} .nav-links .placeholder{display:none;visibility:hidden} .pagination a{text-decoration:none} .pagination .dots{transform:translateY(-0.3em);color:var(--color-text)} /* -------------------------------------------------------------------------- */ /* 15. Widgets /* -------------------------------------------------------------------------- */ /* Widget Base ------------------------------- */ .widget,.woo-widget{margin-top:3rem} .widget:first-child,.woo-widget:first-child{margin-top:0} .widget-content > div > :first-child{margin-top:0} .widget-content > div > :last-child{margin-bottom:0} .widget .widget-title,.woo-widget .widget-title{font-size:2.2rem!important;padding-bottom:15px;margin:0 0 15px auto;position:relative} .widget-title:after{content:"";position:absolute;width:80px;background:var(--color-main);display:inline-block;padding:1px 0;left:0;bottom:0} .widget-title::before{content:"";position:absolute;width:100%;background:rgba(0,0,0,0.13);display:inline-block;padding:1px 0;left:0;bottom:0} .widget li{margin:2rem 0 0} .widget li:first-child,.widget li > ul,.widget li > ol{margin-top:0} .widget table,.widget table *{border-color:#dedfdf} .widget table caption{background-color:#dedfdf} .widget .post-date,.widget .rss-date{color:var(--color-text);display:block;font-size:.85em;font-weight:500;margin-top:.2rem} .widget select{max-width:100%} .widget_text p,.widget_text ol,.widget_text ul,.widget_text dl,.widget_text dt,.widget-content .rssSummary{font-family:var(--font-body);letter-spacing:normal} .widget_archive ul,.widget_categories ul,.widget_pages ul,.widget_meta ul,.widget_nav_menu ul,.widget_recent_comments ul,.widget_recent_entries ul,.widget_rss ul{list-style:none;margin:0} .widget_archive li,.widget_categories li,.widget_pages li,.widget_meta li,.widget_nav_menu li{color:var(--color-text);margin:.3rem 0} .widget_archive li li,.widget_categories li li,.widget_pages li li,.widget_meta li li,.widget_nav_menu li li{margin-left:2rem} .widget_archive a,.widget_categories a,.widget_pages a,.widget_meta a,.widget_nav_menu a{font-weight:700;text-decoration:none} .widget_nav_menu .widget-content > div > ul{margin-left:0} .widget_search .search-field{border-color:#dedfdf} .widget_tag_cloud a{font-weight:700;margin-right:.5rem;text-decoration:none;white-space:nowrap} /* -------------------------------------------------------------------------- */ /* 17. Media Queries /* -------------------------------------------------------------------------- */ @media (max-width:768px){ .mobhide{display: none;} /* Social Share v1 ------------------------------------- */ .socshare ul li{width:50%!important;float:left;padding:5px}.socshare ul{display:inline-block}.socshare ul li a{border-radius:5px} .scrollToTopBtn { padding: 10px; bottom: 15px; left: 15px; } .scrollToTopBtn svg { width: 18px; } .topbar .top-widget:last-child { display: none; } .topbar .top-widget:first-child { display: inline-block; text-align: center; width: 100%; padding: 0 15px; } .primary-menu-wrapper { display: none; } } @media ( max-width: 768px ) { .page-title .entry-title{ font-size: 2rem; margin-bottom: 1rem; } .entry-header{ padding: 2.5rem 15px; } .innermain{ padding: 0 15px; } } @media ( max-width: 550px ) { .page-title .container{ flex-direction: column; align-items: baseline; } .archivepost article { width: 100%; padding: 0; } .archivepost { width: 100%; margin: 0; } .cat-single a, .cat-single{ font-size: 14px; } .single-title{ font-size: 2.5rem !important; line-height: 3rem; } .innermain{ flex-direction: column; } .single .innermain article, .innermain aside{ width: 100% !important; } .innermain aside{ border-top: 1px solid rgba(1, 1, 1, 0.1); padding-left: 0 !important; margin-left: 0 !important; border-left: 0 !important; margin-top: 2rem; padding-top: 2rem; } /* Blocks -------------------------------- */ .wp-block-pullquote.alignleft, .wp-block-pullquote.alignright { float: none; } /* Entry Content ------------------------- */ /* LISTS */ ul, ol { margin: 0 0 3rem 2rem; } li { margin: 0.5rem 0 0 1rem; } /* Post Footer --------------------------- */ /* POST NAV LINKS */ .post-nav-links { margin: 3em 0 0 0; } } @media only screen and (min-width: 550px) and (max-width: 768px) { .menu-modal-inner{ width: 50%; } .single .innermain article{ width: 67%; } .innermain aside{ width:33%; } } @media ( min-width: 700px ) { /* VANILLA GALLERIES */ .gallery-columns-2 .gallery-item { max-width: 50%; } .gallery-columns-3 .gallery-item { max-width: 33.33%; } .gallery-columns-4 .gallery-item { max-width: 25%; } .gallery-columns-5 .gallery-item { max-width: 20%; } .gallery-columns-6 .gallery-item { max-width: 16.66%; } .gallery-columns-7 .gallery-item { max-width: 14.28%; } .gallery-columns-8 .gallery-item { max-width: 12.5%; } .gallery-columns-9 .gallery-item { max-width: 11.11%; } /* TITLES */ /* INPUTS */ fieldset { padding: 3rem; } legend { padding: 0 1.5rem; } button, .button, .faux-button, .wp-block-button__link, input[type="button"], input[type="reset"], input[type="submit"] { font-size: 1.7rem; } /* Helper Classes ------------------------- */ /* SECTIONS */ /* Site Header --------------------------- */ .header-inner { padding: 3.8rem 0; } .site-title { font-size: 2.4rem; font-weight: 700; } .site-description { display: block; } /* HEADER TOGGLES */ .toggle-inner .toggle-text { font-size: 1.2rem; } .search-toggle { left: 2rem; } /* Menu Modal ---------------------------- */ .close-nav-toggle:hover svg{ margin-right: 20px; transition: all .2s ease-in-out; } button.close-nav-toggle svg { height: 2rem; width: 2rem; } button.close-nav-toggle .toggle-text { margin-right: 2.1rem; } .modal-menu { left: auto; width: 100%; } .modal-menu ul li { border-left-color: transparent; } .modal-menu > li > .ancestor-wrapper > button.sub-menu-toggle { padding: 0 3rem; } .modal-menu > li > .ancestor-wrapper > button.sub-menu-toggle svg { height: 1.1rem; width: 1.8rem; } .menu-bottom { align-items: center; display: flex; justify-content: space-between; padding: 4.4rem 0; } .menu-copyright { display: block; flex-shrink: 0; margin-right: 4rem; } /* Sub Page ------------------------------ */ /* FEATURED MEDIA */ .featured-media figcaption { margin: 2rem auto 0 auto; width: calc(100% - 8rem); } /* Post: Archive ------------------------- */ .archive-header { padding: 8rem 0; } .reduced-spacing .archive-header { padding-bottom: 3rem; } .archive-title { font-size: 3.2rem; } body:not(.singular) main > article:first-of-type { padding: 8rem 0 0; } /* SEARCH RESULTS */ .no-search-results-form { padding-top: 8rem; } /* Post: Single -------------------------- */ /* POST HEADER */ .entry-categories { margin-bottom: 3rem; } .entry-categories-inner { margin: -1rem 0 0 -2rem; } .entry-categories a { font-size: 1.5rem; margin: 1rem 0 0 2rem; } .intro-text { font-size: 2rem; margin-top: 2.5rem; } .singular .intro-text { font-size: 2.6rem; } .post-meta-wrapper { margin-top: 3rem; } .post-meta { font-size: 1.6rem; margin: -1.4rem 0 0 -3rem; } .post-meta li { margin: 1.4rem 0 0 3rem; max-width: calc(100% - 3rem); } .featured-media { margin-top: 6rem; } /* POST FOOTER */ .post-meta-wrapper.post-meta-single-bottom { margin-top: 4rem; } /* AUTHOR BIO */ .author-bio { margin-top: 8rem; min-height: 8rem; padding-left: 10rem; position: relative; } .author-bio .avatar { position: absolute; left: 0; top: 0; height: 8rem; width: 8rem; } /* SINGLE PAGINATION */ .pagination-single { font-size: 2.4rem; margin-top: 8rem; } .pagination-single-inner { flex-direction: row; justify-content: space-between; } .pagination-single.only-next .pagination-single-inner { justify-content: flex-end; } .pagination-single hr:first-child { margin: 0 0 4rem 0; } .pagination-single hr:last-child { margin: 4rem 0 0.8rem 0; } .pagination-single a + a { margin: 0 0 0 4rem; } .pagination-single a .arrow { margin: 0 2rem 0 0; } .pagination-single .next-post { flex-direction: row-reverse; text-align: right; } .pagination-single .next-post .arrow { margin: 0 0 0 2rem; } /* Blocks -------------------------------- */ /* BLOCK: SHARED MEDIA STYLES */ .wp-block-embed figcaption, .wp-block-image figcaption { font-size: 1.6rem; } /* Entry Content ------------------------- */ .entry-content h4, .entry-content h5, .entry-content h6 { margin: 4.5rem auto 2.5rem; } .alignnone, .aligncenter { margin-bottom: 4rem; margin-top: 4rem; } .alignleft { /*rtl:ignore*/ margin: 0.3rem 2rem 2rem 0; } .alignright { /*rtl:ignore*/ margin: 0.3rem 0 2rem 2rem; } .entry-content > .alignwide:not(.wp-block-group.has-background), .entry-content > .alignfull:not(.wp-block-group.has-background) { margin-bottom: 6rem; margin-top: 6rem; } .entry-content > .alignwide { max-width: calc(100vw - 8rem); width: calc(100vw - 8rem); } .entry-content > .alignwide:first-child, .entry-content > .alignfull:first-child { margin-bottom: 8rem; } /* ENTRY MEDIA */ /* Comments ------------------------------ */ .comments .comment, .comments .pingback, .comments .trackback, .comments .review { padding-top: 5rem; } div.comment:first-of-type { margin-top: 5rem; } .comment-meta { margin-bottom: 2rem; min-height: 6rem; padding: 0.3rem 0 0 7.5rem; } .comment-meta .avatar { display: block; height: 6rem; position: absolute; left: 0; top: 0; width: 6rem; } .comment-author { font-size: 2.4rem; } .comment-metadata { font-size: 1.6rem; margin-top: 0.8rem; } .comment-footer-meta { margin-top: 2.5rem; } .comments-pagination { margin-top: 8rem; } /* PINGBACKS & TRACKBACKS */ .pingback .comment-body { padding: 0; } /* COMMENT RESPOND */ .comment-respond p { margin-bottom: 2.5rem; } .comment-form p.logged-in-as { margin: -2.5rem 0 4.4rem 0; } .comment-respond .comment-form-author, .comment-respond .comment-form-email { float: left; width: calc(50% - 1rem); } .comment-respond .comment-form-email { margin-left: 2rem; } .comments .comment-respond { padding: 5rem 0 0; } .comment-reply-title small { display: inline; margin: 0 0 0 0.5rem; } /* Site Pagination ----------------------- */ .pagination-separator { margin: 8rem 0; } /* Display the full text for Newer and Older Posts. */ .nav-short { display: inline; } .pagination .nav-links { font-size: 2.4rem; font-weight: 700; margin: -2.5rem 0 0 -4rem; } .nav-links > * { margin: 2.5rem 0 0 4rem; } /* FOOTER WIDGETS */ .footer-widgets-outer-wrapper { padding: 8rem 0; } .footer-widgets-wrapper { display: flex; justify-content: space-between; margin-left: -4rem; width: calc(100% + 4rem); } .footer-widgets { margin-left: 4rem; width: 50%; } .footer-widgets + .footer-widgets { margin-top: 0; } .footer-widgets .widget { border-top: none; margin-top: 5rem; padding-top: 0; } .footer-widgets .widget:first-child { margin-top: 0; } /* FOOTER BOTTOM */ .privacy-policy { margin: 0 0 0 2.4rem; } .to-the-top-long { display: inline; } .to-the-top-short { display: none; } } @media (min-width: 782px) { /* Blocks -------------------------------- */ /* BLOCK: COLUMNS */ .wp-block-column { margin-bottom: 0; } .wp-block-columns.alignwide + .wp-block-columns.alignwide, .wp-block-columns.alignfull + .wp-block-columns.alignfull { margin-top: -2.8rem; } } @media ( min-width: 1000px ) { .header-inner { align-items: center; display: flex; justify-content: space-between; padding: 2.8rem 0; } /* HEADER NAVIGATION */ .header-navigation-wrapper { align-items: center; display: flex; } /* HEADER TOGGLES */ .mobile-search-toggle, .mobile-nav-toggle { display: none !important; } .primary-menu-wrapper + .header-toggles { margin-left: 3rem; } .header-toggles { display: flex; flex-shrink: 0; margin-right: -3rem; } .header-inner .toggle { height: 4.4rem; padding: 0 3rem; position: relative; bottom: auto; left: auto; right: auto; top: auto; width: auto; } .header-inner .toggle-wrapper { position: relative; } .header-inner .toggle-wrapper::before { background: #dedfdf; content: ""; display: block; height: 2.7rem; position: absolute; left: 0; top: calc(50% - 1.35rem); width: 0.1rem; } .header-inner .toggle-wrapper:first-child::before { content: none; } .header-inner .primary-menu-wrapper + .header-toggles .toggle-wrapper:first-child::before { content: ""; } .nav-toggle-wrapper:not(.has-expanded-menu) { display: none; } .toggle-inner { position: static; } .toggle-inner .toggle-text { left: 0; right: 0; text-align: center; top: calc(100% - 0.3rem); width: auto; } .header-toggles:only-child .nav-toggle .toggle-inner { padding-top: 0; } .header-toggles:only-child .toggle-inner { display: flex; flex-wrap: nowrap; align-items: center; } .header-toggles:only-child .toggle-inner .svg-icon { order: 1; } .header-toggles:only-child .toggle-inner .toggle-text { position: static; padding-right: 20px; font-size: 15px; color: inherit; } /* Menu Modal ---------------------------- */ .menu-modal { opacity: 1; justify-content: flex-end; padding: 0; transition: background-color 0.3s ease-in, left 0s 0.3s, right 0s 0.3s; } .menu-modal.cover-modal { background: rgba(0, 0, 0, 0); } .menu-modal.active { background: rgba(0, 0, 0, 0.2); transition: background-color 0.3s ease-out; } .menu-modal-inner { box-shadow: 0 0 2rem 0 rgba(0, 0, 0, 0.1); opacity: 0; padding: 0; transform: translateX(20rem); transition: transform 0.2s ease-in, opacity 0.2s ease-in; width: 50rem; } .menu-modal.active .menu-modal-inner { opacity: 1; transform: translateX(0); transition-timing-function: ease-out; } .mobile-menu { display: none; } .expanded-menu { display: block; } .menu-bottom { padding: 6rem 0; } .menu-bottom .social-menu { justify-content: flex-start; } /* Sub Page ------------------------------ */ /* FEATURED MEDIA */ .featured-media figcaption { width: 100%; } /* Template: Full Width ------------------ */ .template-full-width .wp-block-image .alignleft { /*rtl:ignore*/ margin-right: 2rem; } .template-full-width .wp-block-image .alignright { /*rtl:ignore*/ margin-left: 2rem; } /* Post: Archive ------------------------- */ /* Post: Single -------------------------- */ .singular .intro-text { font-size: 2.8rem; } /* Blocks -------------------------------- */ /* BLOCK: COLUMNS */ .wp-block-columns.alignwide + .wp-block-columns.alignwide, .wp-block-columns.alignfull + .wp-block-columns.alignfull { margin-top: -4.8rem; } /* BLOCK: GALLERY */ figure.wp-block-gallery.alignwide, figure.wp-block-gallery.alignfull { margin-bottom: 8rem; margin-top: 8rem; } /* BLOCK: GROUP */ .entry-content > .wp-block-group.alignwide.has-background, .entry-content > .wp-block-group.alignfull.has-background { padding: 8rem 4rem; margin-bottom: 0; margin-top: 0; } /* BLOCK: IMAGE */ .wp-block-image .alignleft { /*rtl:ignore*/ margin-right: 0; } .wp-block-image .alignright { /*rtl:ignore*/ margin-left: 0; } .wp-block-image .aligncenter figcaption { text-align: center; } /* BLOCK: SEPARATOR */ hr.wp-block-separator { margin: 8rem auto; } /* Comments ------------------------------ */ .comment-meta { padding-left: 0; } .comment-meta .avatar { left: -8rem; } /* Site Pagination ----------------------- */ .pagination .nav-links { justify-content: space-between; margin: 0; width: 100%; } .nav-links > * { margin: 0 2rem; } .pagination .next, .pagination .prev { display: block; } .pagination .prev { margin: 0 auto 0 0; } .pagination .next { text-align: right; margin: 0 0 0 auto; } /* Site Footer --------------------------- */ /* FOOTER TOP */ .footer-top { align-items: center; } .footer-menu { align-items: baseline; display: flex; justify-content: flex-start; flex-wrap: wrap; font-size: 2.1rem; margin: -1.2rem 0 0 -2.4rem; } .footer-menu li { margin: 1.2rem 0 0 2.4rem; } } @media ( min-width: 1220px ) { /* Element Base -------------------------- */ /* TITLES */ /* Helper Classes ------------------------ */ /* Site Header --------------------------- */ /* PRIMARY MENU */ /* HEADER TOGGLES */ .primary-menu-wrapper + .header-toggles { margin-left: 4rem; } .header-toggles { margin-right: -4rem; } .header-toggles .toggle { padding: 0 4rem; } /* Menu Modal ---------------------------- */ /* Search Modal -------------------------- */ /* Sub Page ------------------------------ */ /* Template: Cover Template -------------- */ .cover-header + .post-inner { padding-top: 10rem; } /* Post: Archive ------------------------- */ /* Post: Single -------------------------- */ .singular .intro-text { font-size: 3.2rem; letter-spacing: -0.03125em; line-height: 1.375; } /* Blocks -------------------------------- */ /* BLOCK: COLUMNS */ .wp-block-columns.alignfull + .wp-block-columns.alignfull { margin-top: -6rem; } /* BLOCK: GALLERY */ figure.wp-block-gallery.alignfull { margin-bottom: 10rem; margin-top: 10rem; } /* BLOCK: GROUP */ .entry-content > .wp-block-group.alignwide.has-background, .entry-content > .wp-block-group.alignfull.has-background { padding: 8rem 6rem; margin-bottom: 0; margin-top: 0; } /* BLOCK: PULLQUOTE */ .wp-block-pullquote.alignwide blockquote p, .wp-block-pullquote.alignfull blockquote p { font-size: 6.4rem; } .wp-block-pullquote.is-style-solid-color.alignwide, .wp-block-pullquote.is-style-solid-color.alignfull { padding: 9rem 4rem 8rem; } /* Comments ------------------------------ */ .comments .comment-respond .comment-reply-title { font-size: 4.8rem; } .comments .comment-respond p.comment-notes, .comments .comment-respond p.logged-in-as { margin: -4.5rem 0 4rem 0; } /* Site Pagination ----------------------- */ /* Widgets ------------------------------- */ .widget-content { font-size: 2.1rem; } /* Site Footer --------------------------- */ .footer-menu { font-size: 2.4rem; margin: -1.5rem 0 0 -3rem; } .footer-menu li { margin: 1.5rem 0 0 3rem; } ul.footer-social { margin: -1rem 0 0 -1rem; } ul.footer-social li { margin: 1rem 0 0 1rem; } .footer-social a { height: 4.4rem; width: 4.4rem; } .footer-social a::before { font-size: 2rem; } /* FOOTER WIDGETS */ .footer-widgets-wrapper { margin-left: -6rem; width: calc(100% + 6rem); } .footer-widgets { margin-left: 6rem; } } @media ( min-width: 1240px ) { /* Blocks -------------------------------- */ body.template-full-width .entry-content > .alignleft { /*rtl:ignore*/ margin-left: calc(( 100vw - 120rem ) / 2); } body.template-full-width .entry-content > .alignright { /*rtl:ignore*/ margin-right: calc(( 100vw - 120rem ) / 2); } } @media ( min-width: 1280px ) { /* Blocks -------------------------------- */ /* BLOCK: GALLERY */ figure.wp-block-gallery.alignleft { /*rtl:ignore*/ margin-left: -31rem; } figure.wp-block-gallery.alignright { /*rtl:ignore*/ margin-right: -31rem; } /* BLOCK: SEPARATOR */ .wp-block-separator.is-style-wide { max-width: 120rem; width: 120rem; } /* Template: Full Width ------------------ */ body.template-full-width .alignfull:not(.has-background) > .wp-block-group__inner-container > p:not(.has-background-color) { padding-left: 0; padding-right: 0; } body.template-full-width [class*="wp-block"].alignfull [class*="__inner-container"] > .wp-block-image .alignleft { /*rtl:ignore*/ margin-left: 0; } body.template-full-width [class*="wp-block"].alignfull [class*="__inner-container"] > .wp-block-image .alignright { /*rtl:ignore*/ margin-right: 0; } }