/* #wpadminbar { display: none !important; } */ html { margin-top: 0 !important; } /*--------------------------------------------------------------------------------------------------------------*/ /*----------------------------------------------- Custom Overrides ----------------------------------------------------*/ /*--------------------------------------------------------------------------------------------------------------*/ /* Used to temporarily hide elements in wordpress backoffice */ .hidden { display: none !important; } /* Remove interaction on "fake" certificate buttons */ #section-certificates_available { a { pointer-events: none; } } body { /*--------------------------------------------------------------------------------------------------------------*/ /*----------------------------------------------- Variables ----------------------------------------------------*/ /*--------------------------------------------------------------------------------------------------------------*/ /* Colors */ --color-base: #EEEEEE; --color-black: #333333; --color-white: #FFFFFF; --color-primary: #50154B; --color-secondary: #91478F; --color-primary-opaque: rgba(145, 71, 143, 0.10); /* Spacing */ --space: 15px; --space-btn-large: 25px 30px; --space-btn-med: 10px 20px; --space-btn-small: 3px 11px; /* Font */ --font-size: 16px; --font-size-small: 0.875rem; --line-height-main: 1.625; /* Windows */ --window-huge: 1280px; --window-large: 980px; --window-med: 767px; --window-small: 600px; --window-tiny: 480px; /* Shadows */ --shadow-base-down: 1px 1px 2px 0px rgba(250, 250, 250, 0.30), -1px -1px 2px 0px rgba(226, 226, 226, 0.50), -5px 5px 10px 0px rgba(226, 226, 226, 0.20) inset, 5px -5px 10px 0px rgba(226, 226, 226, 0.20) inset, -5px -5px 10px 0px rgba(250, 250, 250, 0.90) inset, 5px 5px 13px 0px rgba(226, 226, 226, 0.90) inset ; --shadow-base-up: 1px 1px 2px 0px rgba(255, 255, 255, 0.30) inset, -1px -1px 2px 0px rgba(255, 255, 255, 0.50) inset, -5px 5px 10px 0px rgb(0, 0, 0), 5px -5px 10px 0px rgb(0, 0, 0), -5px -5px 10px 0px rgb(0, 0, 0), 5px 5px 13px 0px rgb(0, 0, 0) ; --shadow-base-up: 1px 1px 2px 0px rgba(250, 250, 250, 0.30) inset, -1px -1px 2px 0px rgba(226, 226, 226, 0.50) inset, -5px 5px 10px 0px rgba(226, 226, 226, 0.20), 5px -5px 10px 0px rgba(226, 226, 226, 0.20), -5px -5px 10px 0px rgba(250, 250, 250, 0.90), 5px 5px 13px 0px rgba(226, 226, 226, 0.90) ; --shadow-primary-down: 1px 1px 2px 0px rgba(92, 24, 86, 0.30), -1px -1px 2px 0px rgba(68, 18, 64, 0.50), -5px 5px 10px 0px rgba(68, 18, 64, 0.20) inset, 5px -5px 10px 0px rgba(68, 18, 64, 0.20) inset, -5px -5px 10px 0px rgba(92, 24, 86, 0.90) inset, 5px 5px 13px 0px rgba(68, 18, 64, 0.90) inset ; --shadow-primary-up: 1px 1px 2px 0px rgba(92, 24, 86, 0.30) inset, -1px -1px 2px 0px rgba(68, 18, 64, 0.50) inset, -5px 5px 10px 0px rgba(68, 18, 64, 0.20), 5px -5px 10px 0px rgba(68, 18, 64, 0.20), -5px -5px 10px 0px rgba(92, 24, 86, 0.90), 5px 5px 13px 0px rgba(68, 18, 64, 0.90) ; --shadow-secondary-down: 1px 1px 2px 0px rgba(160, 78, 157, 0.30), -1px -1px 2px 0px rgba(131, 64, 129, 0.50), -5px 5px 10px 0px rgba(131, 64, 129, 0.20) inset, 5px -5px 10px 0px rgba(131, 64, 129, 0.20) inset, -5px -5px 10px 0px rgba(160, 78, 157, 0.90) inset, 5px 5px 13px 0px rgba(131, 64, 129, 0.90) inset ; --shadow-secondary-up: 1px 1px 2px 0px rgba(167, 82, 164, 0.30) inset, -1px -1px 2px 0px rgba(123, 60, 122, 0.50) inset, -5px 5px 10px 0px rgba(123, 60, 122, 0.20), 5px -5px 10px 0px rgba(123, 60, 122, 0.20), -5px -5px 10px 0px rgba(167, 82, 164, 0.90), 5px 5px 13px 0px rgba(123, 60, 122, 0.90) ; /*--------------------------------------------------------------------------------------------------------------*/ /*----------------------------------------------- Style Base ---------------------------------------------------*/ /*--------------------------------------------------------------------------------------------------------------*/ *, *::before, *::after { box-sizing: border-box; } * { font: inherit; font-family: 'Work Sans', sans-serif; margin: 0; padding: 0; font-size: var(--font-size); line-height: var(--line-height-main); } img, picture, svg, video { display: block; max-width: 100%; } /* Font sizes */ h1 { font-size: 3rem; line-height: 1.2; } h2 { font-size: 1.75rem; line-height: 1.4; } h3 { font-size: 1.5rem; } h4 { font-size: 1.25rem; } small { display: inline-block; font-size: var(--font-size-small); line-height: 1.3; } b, strong { font-weight: 600; font-size: inherit; } a { color: inherit; text-decoration: inherit; } /* Lists */ ul, ol { margin-left: var(--space); li { margin-bottom: calc(var(--space)/2); &::marker { color: var(--color-secondary); } } } /* Breath */ p, ul, ol, h1, h2, h3, h4 { margin-bottom: calc(var(--space) / 2); &:not(.has-text-align-center) { padding-right: var(--space); } } /* Content */ min-height: 100vh; min-height: 100dvh; background-color: var(--color-base); margin: 0; overflow-x: hidden; /*--------------------------------------------------------------------------------------------------------------*/ /*----------------------------------------------- CUSTOM SELECT DROPDOWN -------------------------------------------------------*/ /*--------------------------------------------------------------------------------------------------------------*/ .select-menu { position: static !important; flex: 1; cursor: pointer; ul { margin: 0 !important; list-style: none; } } .select-menu_label { position: relative; padding-right: calc(var(--space) * 5.5); display: inline-flex; align-items: center; font-size: var(--font-size-small); } .select-menu_label::after { content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MCA1MCIgZmlsbD0iIzUwMTU0QiI+CiAgPHBhdGggZD0ibTQ4LjQ2LDE3LjA0bC0yMC45NCwyMC45NGMtLjY5LjctMS42LDEuMDQtMi41MSwxLjA0cy0xLjgyLS4zNS0yLjUxLTEuMDRMMS41NCwxNy4wNGMtMS4zOS0xLjM5LTEuMzktMy42NCwwLTUuMDNzMy42NC0xLjM5LDUuMDMsMGwxOC40MywxOC40MywxOC40My0xOC40M2MxLjM5LTEuMzksMy42NC0xLjM5LDUuMDMsMCwxLjM5LDEuMzksMS4zOSwzLjY0LDAsNS4wM1oiLz4KPC9zdmc+"); position: absolute; right: 0; width: var(--space); height: 14px; pointer-events: none; transition: transform .25s ease; } .select-menu_list { position: absolute; left: 0; width: 100%; z-index: -1; background: var(--color-base); border-radius: 20px; display: block !important; padding-right: 0 !important; transform: scaleY(0); opacity: 0; transition: transform .25s ease, opacity .25s ease; pointer-events: none; box-shadow: var(--shadow-base-down); } .select-menu_item { font-size: var(--font-size-small); padding: var(--space-btn-small); border-radius: 20px; margin: 0; gap: calc(var(--space)/2); display: flex; align-items: center; color: var(--color-primary); &:hover { background-color: var(--color-secondary); color: var(--color-white); } } /*--------------------------------------------------------------------------------------------------------------*/ /*----------------------------------------------- Header -------------------------------------------------------*/ /*--------------------------------------------------------------------------------------------------------------*/ header { transition: transform 0.2s ease-in-out; transform-origin: top; position: fixed; top: 0; width: 100%; z-index: 9; padding: calc(var(--space) * 2) 0; &.sticky { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); @media (min-width: 981px) { transform: scaleY(0.875); > div > * { transform: scaleX(0.875); } } } > div { display: flex; align-items: center; justify-content: space-between; width: 90%; max-width: 1280px; margin: 0 auto; > * { transition: transform 0.2s ease-in-out; &.logo { display: flex; justify-content: flex-start; transform-origin: top left; .icon { padding: 24px; border-radius: 40px; > svg { height: 45px; min-width: 45px; } } } &.icon { display: none; } &.menus { display: flex; flex-direction: column; gap: var(--space); transform-origin: top right; align-items: flex-end; gap: var(--space); /* Primary menu */ > #menu-primary-menu { @media (min-width: 981px) { min-width: 600px; } position: relative; display: flex; justify-content: space-between; border-radius: 20px; box-shadow: var(--shadow-base-up); /* General */ li { @media (min-width: 981px) { flex: 1; } display: flex; margin: 0; > a { color: var(--color-primary); text-decoration: none; font-weight: 600; } > .sub-menu { display: flex; margin: 0; } } /* First level */ > li { > a { display: flex; justify-content: space-between; align-items: center; gap: calc(var(--space)/2); padding: var(--space-btn-med); background-color: var(--color-base); position: relative; z-index: 1; } &:first-child > a { border-top-left-radius: 20px; border-bottom-left-radius: 20px; } &:last-child > a { border-top-right-radius: 20px; border-bottom-right-radius: 20px; } flex-direction: column; align-items: stretch; &.menu-item-has-children > a::after { content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MCA1MCIgZmlsbD0iIzUwMTU0QiI+CiAgPHBhdGggZD0ibTQ4LjQ2LDE3LjA0bC0yMC45NCwyMC45NGMtLjY5LjctMS42LDEuMDQtMi41MSwxLjA0cy0xLjgyLS4zNS0yLjUxLTEuMDRMMS41NCwxNy4wNGMtMS4zOS0xLjM5LTEuMzktMy42NCwwLTUuMDNzMy42NC0xLjM5LDUuMDMsMGwxOC40MywxOC40MywxOC40My0xOC40M2MxLjM5LTEuMzksMy42NC0xLjM5LDUuMDMsMCwxLjM5LDEuMzksMS4zOSwzLjY0LDAsNS4wM1oiLz4KPC9zdmc+"); width: var(--space); height: 20px; } &.current-menu-ancestor, &.current_page_item { > a { background-color: var(--color-secondary); color: var(--color-white); } &.menu-item-has-children > a::after { content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MCA1MCIgZmlsbD0iI2ZmZmZmZiI+CiAgPHBhdGggZD0ibTQ4LjQ2LDE3LjA0bC0yMC45NCwyMC45NGMtLjY5LjctMS42LDEuMDQtMi41MSwxLjA0cy0xLjgyLS4zNS0yLjUxLTEuMDRMMS41NCwxNy4wNGMtMS4zOS0xLjM5LTEuMzktMy42NCwwLTUuMDNzMy42NC0xLjM5LDUuMDMsMGwxOC40MywxOC40MywxOC40My0xOC40M2MxLjM5LTEuMzksMy42NC0xLjM5LDUuMDMsMCwxLjM5LDEuMzksMS4zOSwzLjY0LDAsNS4wM1oiLz4KPC9zdmc+"); } } /* First Sub Menu */ > .sub-menu { @media (min-width: 981px) { position: absolute; transform: scaleY(0); transform-origin: top; transition: all 0.2s ease-in-out; left: 0; right: 0; } padding: calc(var(--space) * 3) 14px calc(var(--space) * (4/3)); top: calc(100% - (var(--space) * 2)); background-color: var(--color-base); box-shadow: var(--shadow-base-up); border-radius: 20px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: calc(var(--space)*(4/3)); /* General */ li { &.current-menu-item > a { background-color: var(--color-secondary); color: var(--color-white); } > a { border-radius: 20px; line-height: 1.3; padding: var(--space-btn-small); &[href]:hover { background-color: var(--color-primary); color: var(--color-white); } &:not([href]) { cursor: text; } } } /* Second level */ > li { flex-direction: column; gap: 2px; flex-shrink: 0; &.menu-item-has-children { flex-basis: calc(50% - var(--space)); > a { color: var(--color-secondary); } } /* Second Sub Menu */ > .sub-menu { flex-direction: column; gap: 2px; } } } /* Hover/Active interactions */ @media (min-width: 981px) { &:hover { > a { background-color: var(--color-primary); color: var(--color-white); } &.menu-item-has-children > a::after { content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MCA1MCIgZmlsbD0iI2ZmZmZmZiIgc3R5bGU9InRyYW5zZm9ybTogcm90YXRlKDE4MGRlZykiPgogIDxwYXRoIGQ9Im00OC40NiwxNy4wNGwtMjAuOTQsMjAuOTRjLS42OS43LTEuNiwxLjA0LTIuNTEsMS4wNHMtMS44Mi0uMzUtMi41MS0xLjA0TDEuNTQsMTcuMDRjLTEuMzktMS4zOS0xLjM5LTMuNjQsMC01LjAzczMuNjQtMS4zOSw1LjAzLDBsMTguNDMsMTguNDMsMTguNDMtMTguNDNjMS4zOS0xLjM5LDMuNjQtMS4zOSw1LjAzLDAsMS4zOSwxLjM5LDEuMzksMy42NCwwLDUuMDNaIi8+Cjwvc3ZnPg=="); height: 23px; } > .sub-menu { transform: scaleY(1); } &.menu-item-has-children > a { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } } } } } /* Secondary menu */ > #menu-secondary-menu { a.main-btn { position: relative; z-index: 2; &:hover .select-menu_list { transform: scaleY(1); opacity: 1; pointer-events: auto; } &:hover .select-menu_label::after { content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MCA1MCIgZmlsbD0iI2ZmZmZmZiIgc3R5bGU9InRyYW5zZm9ybTogcm90YXRlKDE4MGRlZykiPgogIDxwYXRoIGQ9Im00OC40NiwxNy4wNGwtMjAuOTQsMjAuOTRjLS42OS43LTEuNiwxLjA0LTIuNTEsMS4wNHMtMS44Mi0uMzUtMi41MS0xLjA0TDEuNTQsMTcuMDRjLTEuMzktMS4zOS0xLjM5LTMuNjQsMC01LjAzczMuNjQtMS4zOSw1LjAzLDBsMTguNDMsMTguNDMsMTguNDMtMTguNDNjMS4zOS0xLjM5LDMuNjQtMS4zOSw1LjAzLDAsMS4zOSwxLjM5LDEuMzksMy42NCwwLDUuMDNaIi8+Cjwvc3ZnPg=="); } } display: flex; gap: var(--space); select { font-size: var(--font-size-small); } } } } } @media (max-width: 980px) { border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; @media (max-width: 600px) { padding: var(--space) 0; } > div { flex-wrap: wrap; gap: var(--space); > * { @media (max-width: 600px) { > .icon, &.icon { > svg { height: 30px !important; min-width: 30px !important; } } } &.icon { display: inline-flex; &.svg_support_hamburgerclose { display: none; } } &.menus { width: 100%; display: none; &[style*="display: block"] { display:flex !important; } margin-top: var(--space); justify-content: space-between; flex-direction: column-reverse; gap: calc(var(--space)*2); height: calc(100svh - 165px - (var(--space)*2)); height: calc(100svh - 165px - (var(--space)*2)); @media (max-width: 600px) { height: calc(100svh - 125px - (var(--space)*2)); height: calc(100svh - 125px - (var(--space)*2)); } #menu-primary-menu { justify-self: flex-start; overflow-x: auto; box-shadow: none; flex-direction: column; gap: var(--space); width: 100%; flex-grow: 0; li, a { width: 100%; } a { justify-content: space-between; } > li { > a { padding-left: calc(var(--space) * 5/3); padding-right: calc(var(--space) * 5/3); border-radius: 20px; box-shadow: var(--shadow-base-up); } > .sub-menu { display: none; margin-top: calc(var(--space)*2*-1); &[style*="display: block"] { display: flex !important; } } .sub-menu { flex-direction: column; flex-wrap: nowrap; > * { flex-basis: auto !important; width: 100%; flex: 1; } } &.open { > a { background-color: var(--color-primary); color: var(--color-white); border-bottom-left-radius: 0; border-bottom-right-radius: 0; } } } } #menu-secondary-menu { width: 100%; flex-wrap: wrap; &::before { content: ''; flex-basis: 100%; border: 1px solid var(--color-secondary); margin-bottom: var(--space); } a, button { &:not(.icon) { flex-basis: calc(50% - calc(var(--space)/2)); } } } } } } &.open { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); > div > .icon { display: none; &.svg_support_hamburgerclose { display: inline-flex; } } } } } /*--------------------------------------------------------------------------------------------------------------*/ /*----------------------------------------------- Footer -------------------------------------------------------*/ /*--------------------------------------------------------------------------------------------------------------*/ footer { display: flex; flex-direction: column; align-items: stretch; > div { > div { max-width: 1280px; width: 90%; margin: 0 auto; } &#main-footer > div { display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--space) * 2); padding: calc(var(--space)*3) 0; > .icon { padding: 0; > svg { height: 35px; min-width: 35px; @media (max-width: 600px) { height: 25px; min-width: 25px; } } } > div { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; gap: calc(var(--space)*2); > div { flex: 1; display: flex; flex-direction: column; gap: calc(var(--space)*(2/3)); > div { display: flex; align-items: flex-start; flex-direction: column; gap: calc(var(--space)/2); a, select { font-size: var(--font-size-small); line-height: 1.3; color: var(--color-white); white-space: nowrap; text-decoration: none; cursor: text; &[href] { cursor: pointer; } } } &.language > div { a { position: relative; z-index: 3; &:hover { background-color: var(--color-secondary); color: var(--color-white); } &:hover .select-menu_list { transform: scaleY(1); opacity: 1; pointer-events: auto; } &:hover .select-menu_label::after { content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MCA1MCIgZmlsbD0iI2ZmZmZmZiIgc3R5bGU9InRyYW5zZm9ybTogcm90YXRlKDE4MGRlZykiPgogIDxwYXRoIGQ9Im00OC40NiwxNy4wNGwtMjAuOTQsMjAuOTRjLS42OS43LTEuNiwxLjA0LTIuNTEsMS4wNHMtMS44Mi0uMzUtMi41MS0xLjA0TDEuNTQsMTcuMDRjLTEuMzktMS4zOS0xLjM5LTMuNjQsMC01LjAzczMuNjQtMS4zOSw1LjAzLDBsMTguNDMsMTguNDMsMTguNDMtMTguNDNjMS4zOS0xLjM5LDMuNjQtMS4zOSw1LjAzLDAsMS4zOSwxLjM5LDEuMzksMy42NCwwLDUuMDNaIi8+Cjwvc3ZnPg=="); } } > * { display: flex; align-items: center; gap: calc(var(--space)/2); border: none; border-radius: 20px; background-color: var(--color-base); color: var(--color-black); padding: var(--space-btn-small); > .icon { padding: 0; > svg { height: 22px; width: 22px; } } > select { color: var(--color-primary); font-weight: 600; border: none; background-color: transparent; appearance: none; background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MCA1MCIgZmlsbD0iIzUwMTU0QiI+CiAgPHBhdGggZD0ibTQ4LjQ2LDE3LjA0bC0yMC45NCwyMC45NGMtLjY5LjctMS42LDEuMDQtMi41MSwxLjA0cy0xLjgyLS4zNS0yLjUxLTEuMDRMMS41NCwxNy4wNGMtMS4zOS0xLjM5LTEuMzktMy42NCwwLTUuMDNzMy42NC0xLjM5LDUuMDMsMGwxOC40MywxOC40MywxOC40My0xOC40M2MxLjM5LTEuMzksMy42NC0xLjM5LDUuMDMsMCwxLjM5LDEuMzksMS4zOSwzLjY0LDAsNS4wM1oiLz4KPC9zdmc+"); background-repeat: no-repeat; background-position: right 0 top calc(50%); background-size: var(--space) auto; } } } &.terms > div { > * { text-decoration: underline; &:hover { color: var(--color-secondary); }; } } &.socials > div { flex-direction: row; > * { background-color: white; border-radius: 100%; svg * { fill: var(--color-primary); } &:hover { background-color: var(--color-secondary); svg * { fill: var(--color-white); } }; } } &.newsletter > div { > * { background-color: var(--color-base); padding: var(--space-btn-med); border-radius: 20px; color: var(--color-primary); font-weight: 600; &:hover { background-color: var(--color-secondary); color: var(--color-white); }; } } &.contacts > div { > * { display: flex; gap: calc(var(--space)/2); .icon { padding: 0; } a { white-space: normal; min-width: 250px; } } } } } } &#main-footer_sec > div { padding: var(--space) 0; display: flex; align-items: center; gap: calc(var(--space)*2); p { font-size: var(--font-size-small); list-style: 1.3; margin-bottom: 0; padding-right: 0; } .icon { padding: 0; svg { min-width: 200px; width: 200px; height: 58px; } } @media (max-width: 600px) { flex-direction: column; gap: var(--space); p { width: 100%; } } } } } /*--------------------------------------------------------------------------------------------------------------*/ /*----------------------------------------------- Main Content -------------------------------------------------*/ /*--------------------------------------------------------------------------------------------------------------*/ #main-content { overflow: hidden; > * { &.full > *, &:not(.full) { width: 90%; max-width: 1280px; margin: 0 auto; } &.full { width: 100%; } padding-bottom: calc(var(--space)*3); &.has-background { padding-top: calc(var(--space)*3); margin-bottom: calc(var(--space)*3); } &:last-child { padding-bottom: calc(var(--space)*6); &.has-background { margin-bottom: 0; } } } /*--------------------------------------------------------------------------------------------------------------*/ /*----------------------------------------------- Specific WP Blocks -------------------------------------------*/ /*--------------------------------------------------------------------------------------------------------------*/ .wp-block-separator { border-width: 1px; border-color: var(--color-secondary); } :where(.is-layout-flex) { gap: 2em; .is-layout-flex.is-vertical { gap: 1em; } } :where(.is-layout-grid) { gap: 1em; } .wp-block-image { border-radius: 20px; overflow: hidden; } } /*--------------------------------------------------------------------------------------------------------------*/ /*----------------------------------------------- Specific Pages -----------------------------------------------*/ /*--------------------------------------------------------------------------------------------------------------*/ &.home { #home-banner { > div > div > .wp-block-column { /* Left column */ &:first-child { margin-top: -75px; position: relative; &::before { top: calc(var(--space) * 2 * -1); left: calc(var(--space) * 2 * -1); position: absolute; content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTU2IiBoZWlnaHQ9IjE4OSIgdmlld0JveD0iMCAwIDE1NiAxODkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGlkPSJWZWN0b3IiIGQ9Ik0xMTUuNDA5IDBMNzUuNDAwOCAxMjAuNTYxTDY0LjgxNjcgMTU3LjUwM0w1My45NTY0IDEyMC4yNzVMMzkuMTYwMyA3NS40NTU3SDBMNDEuMzc5NyAxODlIODcuNDA1NEwxNTYgMEgxMTUuNDA5WiIgZmlsbD0iIzkxNDc4RiIgZmlsbC1vcGFjaXR5PSIwLjEiLz4KPC9zdmc+Cg=="); } h1 { &::after{ position: relative; top: 5px !important; content: url("data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDEzMSA3OS43OTEiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTMxIiBoZWlnaHQ9Ijc5Ljc5MSI+PGRlZnM+PHN0eWxlPi5jbHMtMSB7CiAgICAgICAgZmlsbDogIzFkMWQxYjsKICAgICAgfQogICAgICAuY2xzLTEsIC5jbHMtMiB7CiAgICAgICAgc3Ryb2tlLXdpZHRoOiAwcHg7CiAgICAgIH0KICAgICAgLmNscy0yIHsKICAgICAgICBmaWxsOiAjOTk0Yjk3OwogICAgICB9PC9zdHlsZT48L2RlZnM+PGc+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJtMTIuOTAyIDY3LjEyMSAzLjQ0IC0yLjAxOGMyLjQxNSA0LjM2NyA1LjIyNyA2LjU1IDguNDAzIDYuNTVzMi42NDYgLTAuMjk4IDMuODM3IC0wLjkyNiAyLjA4NCAtMS40NTYgMi43MTMgLTIuNTE0IDAuOTI2IC0yLjE1IDAuOTI2IC0zLjMwOCAtMC40NjMgLTIuNjQ2IC0xLjM4OSAtMy45MDRjLTEuMjU3IC0xLjc1MyAtMy41NzMgLTMuOTA0IC02Ljk0NyAtNi4zODUgLTMuMzc0IC0yLjUxNCAtNS40OTEgLTQuMzAxIC02LjI4NSAtNS40MjUgLTEuNDIyIC0xLjg4NiAtMi4xNSAtMy45MDQgLTIuMTUgLTYuMDg3czAuNDMgLTMuMzA4IDEuMjU3IC00LjczMXExLjI0MSAtMi4xMzQgMy41NzMgLTMuMzc0YzEuNTIyIC0wLjgyNyAzLjIwOSAtMS4yMjQgNC45OTUgLTEuMjI0czMuNzA1IDAuNDYzIDUuMzU5IDEuMzg5IDMuNDA3IDIuNjQ2IDUuMjYgNS4xMjhsLTMuMzA4IDIuNDQ4Yy0xLjUyMiAtMS45ODUgLTIuODEyIC0zLjI3NSAtMy45MDQgLTMuOTA0cy0yLjI0OSAtMC45NTkgLTMuNTA3IC0wLjk1OSAtMi45NzcgMC40OTYgLTQuMDAzIDEuNDU2IC0xLjU1NSAyLjE4MyAtMS41NTUgMy42MDYgMC4xOTggMS42ODcgMC41NjIgMi41MTRjMC4zNjQgMC43OTQgMS4wMjYgMS42ODcgMi4wMTggMi42NDYgMC41MjkgMC40OTYgMi4yODMgMS44MTkgNS4yMjcgMy45NyAzLjUwNyAyLjU0NyA1LjkyMSA0Ljc5NyA3LjIxMiA2Ljc4MnMxLjk1MiAzLjk3IDEuOTUyIDUuOTU1YzAgMi44NzggLTEuMTI1IDUuMzkyIC0zLjM0MSA3LjUwOXEtMy4zMjUgMy4xNzYgLTguMTM4IDMuMTc2Yy00LjgxMyAwIC00LjY5NyAtMC42MjkgLTYuNjgyIC0xLjkxOVMxNC41ODkgNzAuMTMxIDEyLjkwMiA2Ny4wODhaIi8+PHBhdGggY2xhc3M9ImNscy0yIiBkPSJtNzkuNzI1IDMuNjA2IC0yNC40NDcgNTYuMDcyIC0xMS4xMTUgLTI2LjAwMmgtNy45NzJsMTguMjk0IDQyLjUwOWgxLjU4OGwzMS41NTkgLTcyLjU3OXoiLz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik03Ny44MDYgMzMuODA5aDguMDcyYzQuNjMxIDAgNy43NDEgMC4xOTggOS4zNjIgMC42MjkgMi4zMTYgMC41OTUgNC4yMDEgMS43ODYgNS42NTcgMy42MDZzMi4yMTYgNC4xMDIgMi4yMTYgNi44ODEgLTAuNzI4IDUuMDYxIC0yLjE1IDYuODgxIC0zLjQwNyAzLjAxIC01LjkyMSAzLjYzOWMtMS44MTkgMC40NjMgLTUuMjYgMC42OTUgLTEwLjI4OCAwLjY5NWgtMi44Nzh2MTkuNDE4aC00LjAzNlYzMy44NDJabTQuMDM2IDQuMDY5djE0LjE1OWw2Ljg0OCAwLjA5OWMyLjc3OSAwIDQuNzk3IC0wLjI2NSA2LjA4NyAtMC43OTRzMi4yODMgLTEuMzU2IDMuMDEgLTIuNTE0IDEuMDkyIC0yLjQ0OCAxLjA5MiAtMy45MDQgLTAuMzY0IC0yLjY4IC0xLjA5MiAtMy44MzcgLTEuNjg3IC0xLjk4NSAtMi45MTEgLTIuNDgxYy0xLjE5MSAtMC40OTYgLTMuMTc2IC0wLjcyOCAtNS44ODggLTAuNzI4eiIvPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0ibTEwMi45NDcgNjcuMTIxIDMuNDQgLTIuMDE4YzIuNDE1IDQuMzY3IDUuMjI3IDYuNTUgOC40MDMgNi41NXMyLjY0NiAtMC4yOTggMy44MzcgLTAuOTI2IDIuMDg0IC0xLjQ1NiAyLjcxMyAtMi41MTQgMC45MjYgLTIuMTUgMC45MjYgLTMuMzA4IC0wLjQ2MyAtMi42NDYgLTEuMzg5IC0zLjkwNGMtMS4yNTcgLTEuNzUzIC0zLjU3MyAtMy45MDQgLTYuOTQ3IC02LjM4NSAtMy4zNzQgLTIuNTE0IC01LjQ5MSAtNC4zMDEgLTYuMjg1IC01LjQyNSAtMS40MjIgLTEuODg2IC0yLjE1IC0zLjkwNCAtMi4xNSAtNi4wODdzMC40MyAtMy4zMDggMS4yNTcgLTQuNzMxcTEuMjQxIC0yLjEzNCAzLjU3MyAtMy4zNzRjMS41MjIgLTAuODI3IDMuMjA5IC0xLjIyNCA0Ljk5NSAtMS4yMjRzMy43MDUgMC40NjMgNS4zNTkgMS4zODkgMy40MDcgMi42NDYgNS4yNiA1LjEyOGwtMy4zMDggMi40NDhjLTEuNTIyIC0xLjk4NSAtMi44MTIgLTMuMjc1IC0zLjkwNCAtMy45MDRzLTIuMjQ5IC0wLjk1OSAtMy41MDcgLTAuOTU5IC0yLjk3NyAwLjQ5NiAtNC4wMDMgMS40NTYgLTEuNTU1IDIuMTgzIC0xLjU1NSAzLjYwNiAwLjE5OCAxLjY4NyAwLjU2MiAyLjUxNGMwLjM2NCAwLjc5NCAxLjAyNiAxLjY4NyAyLjAxOCAyLjY0NiAwLjUyOSAwLjQ5NiAyLjI4MyAxLjgxOSA1LjIyNyAzLjk3IDMuNTA3IDIuNTQ3IDUuOTIxIDQuNzk3IDcuMjEyIDYuNzgyczEuOTUyIDMuOTcgMS45NTIgNS45NTVjMCAyLjg3OCAtMS4xMjUgNS4zOTIgLTMuMzQxIDcuNTA5cy00LjkyOSAzLjE3NiAtOC4xMzggMy4xNzYgLTQuNjk3IC0wLjYyOSAtNi42ODIgLTEuOTE5IC0zLjgzNyAtMy40NCAtNS41MjQgLTYuNDg0WiIvPjwvZz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik00LjMzNCAzMy44MDloNC4xNjh2NDEuNzQ4SDQuMzM0eiIvPjwvc3ZnPg=="); } } p { max-width: 500px; } } /* Right column */ &:last-child { #home-img_1 { position: relative; height: 358px; width: calc(100% + ((100vw - (100%*2))/2)); margin-right: calc((100vw - (100%*2))/2); display: flex; justify-content: center; align-items: center; overflow: hidden; img { position: absolute; width: 100% !important; border-bottom-left-radius: 20px; border-top-left-radius: 20px; } } #home-img_2 { position: relative; height: 14vw; max-height: 250px; top: -100px; width: calc(100% + ((43vw - (100% * 2)) / 2)); margin-right: calc((100vw - (100%*2))/2); box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); display: flex; justify-content: center; align-items: center; overflow: hidden; img{ position: absolute; max-width: none; min-width: 100%; min-height: 100%; } } } @media (max-width: 782px) { /* Left column */ &:first-child { margin-top: 0; p { max-width: none; } } /* Right column */ &:last-child { #home-img_1 { height: calc(100vw * (19/37)); width: calc(100% + 5vw); margin-right: calc(5vw * (-1)); border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; } #home-img_2 { width: 60vw; height: calc(60vw*(7/12)); margin-right: 0; } } } } } #column-map_icon { .icon { width: 100%; svg { height: auto; width: 100%; } } } } /*--------------------------------------------------------------------------------------------------------------*/ /*----------------------------------------------- Theme Customization ------------------------------------------*/ /*--------------------------------------------------------------------------------------------------------------*/ .has-base-color { color: var(--color-base); } .has-base-background-color { background-color: var(--color-base); } .has-black-color { color: var(--color-black); } .has-black-background-color { background-color: var(--color-black); } .has-white-color { color: var(--color-white); } .has-white-background-color { background-color: var(--color-white); } .has-primary-color { color: var(--color-primary); } .has-primary-background-color { background-color: var(--color-primary); } .has-secondary-color { color: var(--color-secondary); } .has-secondary-background-color { background-color: var(--color-secondary); li { &::marker { color: var(--color-white); } } p > a { color: var(--color-white) !important; &:hover { color: var(--color-primary) !important;} } } /*--------------------------------------------------------------------------------------------------------------*/ /*----------------------------------------------- Main Bg ------------------------------------------------------*/ /*--------------------------------------------------------------------------------------------------------------*/ .main-bg_base { background-color: var(--color-base); color: var(--color-black); } .main-bg_primary { background-color: var(--color-primary); color: var(--color-white); } .main-bg_secondary { background-color: var(--color-secondary); color: var(--color-white); } /*--------------------------------------------------------------------------------------------------------------*/ /*----------------------------------------------- Shadows ------------------------------------------------------*/ /*--------------------------------------------------------------------------------------------------------------*/ .main-shadow-gray-down { box-shadow: var(--shadow-base-down); padding: var(--space-btn-large); border-radius: 20px; } .main-shadow-gray-up { box-shadow: var(--shadow-base-up); padding: var(--space-btn-large); border-radius: 20px; } .main-shadow-purple-down { box-shadow: var(--shadow-primary-down); padding: var(--space-btn-large); border-radius: 20px; } .main-shadow-purple-up { box-shadow: var(--shadow-primary-up); padding: var(--space-btn-large); border-radius: 20px; } .main-shadow-fuscia-down { box-shadow: var(--shadow-secondary-down); padding: var(--space-btn-large); border-radius: 20px; } .main-shadow-fuscia-up { box-shadow: var(--shadow-secondary-up); padding: var(--space-btn-large); border-radius: 20px; } /*--------------------------------------------------------------------------------------------------------------*/ /*----------------------------------------------- Main Buttons -------------------------------------------------*/ /*--------------------------------------------------------------------------------------------------------------*/ .wp-element-button { min-width: 200px; } .wp-element-button, .main-btn, .wp-block-navigation-item__label { display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--space)/2); background-color: var(--color-base); box-shadow: var(--shadow-base-up); border-radius: 20px; border: none; cursor: pointer; color: var(--color-primary); font-weight: 600; font-size: 14px; line-height: 18px; &:hover, &[active] { background-color: var(--color-primary); color: var(--color-white); } &[active] { background-color: var(--color-secondary); } &[disabled] { box-shadow: var(--shadow-base-down); } &:focus-visible { outline: 1px solid var(--color-secondary); } &.btn_primary, &.has-primary-background-color { background-color: var(--color-primary); box-shadow: var(--shadow-primary-up); color: var(--color-white); &:hover, &[active] { background-color: var(--color-primary); color: var(--color-white); } &[disabled] { box-shadow: var(--shadow-primary-down); } } &.btn_secondary, &.has-secondary-background-color { background-color: var(--color-secondary); box-shadow: var(--shadow-secondary-up); color: var(--color-white); &:hover, &[active] { background-color: var(--color-primary); color: var(--color-white); } &[disabled] { box-shadow: var(--shadow-primary-down); } } padding: var(--space-btn-med); &.btn_small { padding: var(--space-btn-small); } &.btn_large { padding: var(--space-btn-large); } .icon { padding: 0 !important; } select { flex: 1; border: none; background-color: transparent; padding: 0; margin: 0; color: inherit; &:focus { outline: none; } > option { color: var(--color-black); } } } /*--------------------------------------------------------------------------------------------------------------*/ /*----------------------------------------------- Main Text Btn ------------------------------------------------*/ /*--------------------------------------------------------------------------------------------------------------*/ .main-text_btn, a:not(.wp-element-button, .main-btn) { cursor: pointer; display: inline-flex; gap: calc(var(--space)/3); color: var(--color-primary); text-decoration: underline; &:hover, &.active { color: var(--color-secondary); } > * { cursor: pointer; } } /*--------------------------------------------------------------------------------------------------------------*/ /*----------------------------------------------- Main Icons ---------------------------------------------------*/ /*--------------------------------------------------------------------------------------------------------------*/ .main-svg { display: inline-flex; justify-content: center; align-items: center; height: min-content; width: fit-content; svg { width: auto; } /* Color variants */ &:not(.svg_default) { &.svg_gray svg * { fill: var(--color-base); } &.svg_black svg * { fill: var(--color-black); } &.svg_white svg * { fill: var(--color-white); } &.svg_purple svg * { fill: var(--color-primary); } &.svg_fuscia svg * { fill: var(--color-secondary); } &[href]:hover, &.interact:hover, &[active] { background-color: var(--color-primary); svg * { fill: var(--color-white); } } &[active] { background-color: var(--color-secondary); } } /* Size variants */ &.svg_tiny { border-radius: 20px; padding: 8px; svg { height: 16px; min-width: 16px; } } &.svg_small { border-radius: 20px; padding: 10px; svg { height: 20px; min-width: 20px; } } &.svg_med { border-radius: 20px; padding: 15px; svg { height: 50px; min-width: 50px; } } &.svg_large { border-radius: 40px; padding: 20px; svg { height: 80px; min-width: 80px; } } } /*--------------------------------------------------------------------------------------------------------------*/ /*----------------------------------------------- Main Spacings ------------------------------------------------*/ /*--------------------------------------------------------------------------------------------------------------*/ .main-space-large { padding: var(--space-btn-large); } .main-space-med { padding: var(--space-btn-med); } .main-space-small { padding: var(--space-btn-small); } /*--------------------------------------------------------------------------------------------------------------*/ /*----------------------------------------------- Main Scroll --------------------------------------------------*/ /*--------------------------------------------------------------------------------------------------------------*/ .main-scroll, &.main-scroll { overflow-y: auto; &::-webkit-scrollbar { width: 13px; } &::-webkit-scrollbar-track { background: transparent; } &::-webkit-scrollbar-thumb { background-color: var(--color-secondary); border-radius: 10px; border: 5px solid var(--color-base); &:hover { background-color: var(--color-primary); } } &.scroll_disable { overflow-y: hidden; } } /*--------------------------------------------------------------------------------------------------------------*/ /*----------------------------------------------- Main Testimonial ---------------------------------------------*/ /*--------------------------------------------------------------------------------------------------------------*/ .main-testimonial { > .info { display: flex; flex-direction: column; > .title { color: var(--color-primary); } > .qualifications { color: var(--color-secondary); } } } /*--------------------------------------------------------------------------------------------------------------*/ /*----------------------------------------------- Main Partner ---------------------------------------------*/ /*--------------------------------------------------------------------------------------------------------------*/ .main-partner { display: flex !important; justify-content: center; align-items: center; } /*--------------------------------------------------------------------------------------------------------------*/ /*----------------------------------------------- Partner Archive ----------------------------------------------*/ /*--------------------------------------------------------------------------------------------------------------*/ #archive-partners { > * { display: flex; flex-wrap: wrap; gap: calc(var(--space) * 2); padding-bottom: calc(var(--space) * 2); border-bottom: 1px solid var(--color-secondary); margin-bottom: calc(var(--space) * 2); > a { flex: 0; min-width: 300px; justify-content: center; align-items: center; } > div { flex: 1; h4 { color: var(--color-primary); } } @media (max-width: 767px) { flex-direction: column; } } } /*--------------------------------------------------------------------------------------------------------------*/ /*----------------------------------------------- Certificate Holders Archive ----------------------------------*/ /*--------------------------------------------------------------------------------------------------------------*/ #archive-certificate_holders { display: flex; flex-direction: column; align-items: stretch; gap: calc(var(--space) * 2); > .filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: calc(var(--space) * 2); > div { flex-basis: calc(66.66% - var(--space)); } > button[type=submit] { height: 46px; flex-basis: calc(33.33% - var(--space)); } @media (max-width: 600px) { > div, button[type=submit] { flex-basis: 100%; } } } > h3 { margin-bottom: 0; color: var(--color-secondary); > b { color: var(--color-primary); } } } /*--------------------------------------------------------------------------------------------------------------*/ /*----------------------------------------------- Main Flex ----------------------------------------------------*/ /*--------------------------------------------------------------------------------------------------------------*/ .main-flex { display: flex; flex-wrap: wrap; align-items: flex-start; gap: calc(var(--space) * 2); > * { flex: 1; &.col_1 { flex-basis: 100%; } &.col_2 { flex-basis: calc(50% - var(--space)); @media (max-width: 767px) { flex-basis: 100%; } } } } /*--------------------------------------------------------------------------------------------------------------*/ /*----------------------------------------------- Main Pagination ----------------------------------------------*/ /*--------------------------------------------------------------------------------------------------------------*/ .main-pagination { width: 100%; display: flex; justify-content: center; align-items: center; gap: calc(var(--space)/2); .page { display: flex; justify-content: center; align-items: center; padding: var(--space-btn-small); height: inherit; font-weight: 600; font-size: var(--font-size-small); border-radius: 20px; box-shadow: var(--shadow-base-up); border: none; outline: none; color: var(--color-primary); * { fill: var(--color-primary); } cursor: default; > svg { height: 14px; margin: 5px 0; } &[data-page] { cursor: pointer; &:hover, &[active] { color: var(--color-white); * { fill: var(--color-white); } } &[active] { background-color: var(--color-secondary); } &:hover { background-color: var(--color-primary); } &:focus-visible { outline: 1px solid var(--color-secondary); } } } } /*--------------------------------------------------------------------------------------------------------------*/ /*----------------------------------------------- Main Form Input ----------------------------------------------*/ /*--------------------------------------------------------------------------------------------------------------*/ .main-form_input { display: flex; align-items: stretch; flex-direction: column; gap: calc(var(--space)/2); > * { width: 100%; } label { color: var(--color-secondary); } input, select { cursor: pointer; background-color: transparent; border: none; padding: var(--space-btn-med); border-radius: 20px; height: 46px; min-width: 200px; &:focus-visible { outline: 1px solid var(--color-secondary); } } input { box-shadow: var(--shadow-base-down); &::placeholder { color: var(--color-secondary); opacity: 0.25; } &[type=text] { cursor: text; } } select { appearance: none; background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MCA1MCIgZmlsbD0iIzUwMTU0QiI+CiAgPHBhdGggZD0ibTQ4LjQ2LDE3LjA0bC0yMC45NCwyMC45NGMtLjY5LjctMS42LDEuMDQtMi41MSwxLjA0cy0xLjgyLS4zNS0yLjUxLTEuMDRMMS41NCwxNy4wNGMtMS4zOS0xLjM5LTEuMzktMy42NCwwLTUuMDNzMy42NC0xLjM5LDUuMDMsMGwxOC40MywxOC40MywxOC40My0xOC40M2MxLjM5LTEuMzksMy42NC0xLjM5LDUuMDMsMCwxLjM5LDEuMzksMS4zOSwzLjY0LDAsNS4wM1oiLz4KPC9zdmc+"); background-repeat: no-repeat; background-position: right 20px top calc(50%); /* Must match the sizes of btn-med */ background-size: var(--space) auto; box-shadow: var(--shadow-base-up); } } /*--------------------------------------------------------------------------------------------------------------*/ /*----------------------------------------------- Main Slider --------------------------------------------------*/ /*--------------------------------------------------------------------------------------------------------------*/ .main-slider { max-width: 100%; .slick-list { overflow: visible; @media (max-width: 980px) { overflow: hidden; } .slick-track { display: flex; .slick-slide { height: inherit; margin: 0 calc(var(--space)/2); } } } /* Arrows */ .slick-arrow { z-index: 1; &::before { content: none; } &.slick-prev > svg { rotate: 180deg; } &.slick-prev { left: calc(var(--space) * -1); } &.slick-next { right: calc(var(--space) * -1); } } } /*--------------------------------------------------------------------------------------------------------------*/ /*----------------------------------------------- Main Toggle --------------------------------------------------*/ /*--------------------------------------------------------------------------------------------------------------*/ details { box-shadow: var(--shadow-base-up); padding: var(--space-btn-med); border-radius: 20px; *:nth-child(2) { margin-top: var(--space); } summary { display: flex; align-items: center; justify-content: space-between; font-weight: 600; font-size: 1.2; color: var(--color-primary); &::after { content: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDUwIDUwIiBmaWxsPSIjOTE0NzhGIj4KICA8cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik00Mi4zMiw3LjY4QzMyLjc2LTEuODksMTcuMjQtMS44OSw3LjY4LDcuNjhzLTkuNTYsMjUuMDgsMCwzNC42NSwyNS4wOCw5LjU2LDM0LjY1LDAsOS41Ni0yNS4wOCwwLTM0LjY1Wk0yOS4wMiwzNy4yOWMwLC41NC0uMjEsMS4wNi0uNTksMS40NHMtLjkuNTgtMS40NS41OGgtNC4wOGMtLjU0LjAxLTEuMDYtLjI0LTEuNDQtLjYyLS4zOC0uMzgtLjYxLS44OC0uNjEtMS40MmwuMDItOC4yMi04LjE3LS4wM2MtLjU0LDAtMS4wNi0uMjEtMS40NC0uNTktLjM4LS4zOC0uNTgtLjktLjU4LTEuNDV2LTQuMDhjLS4wMS0uNTQuMjQtMS4wNi42Mi0xLjQ0cy44OC0uNjEsMS40Mi0uNjFsOC4xNy4wMi4wMi04LjFjMC0uNTQuMjMtMS4wOC42MS0xLjQ2LjM2LS4zNi45LS41OCwxLjQ1LS41OGw0LjExLS4wMmMxLjExLDAsMi4wMi45LDIuMDEsMi4wMWwtLjAzLDguMTksOC4xNS4wMmMuNTQsMCwxLjA4LjIzLDEuNDYuNjEuMzYuMzYuNTguOS41OCwxLjQ1bC4wMiw0LjEyYzAsMS4xMS0uOSwyLjAyLTIuMDEsMi4wMWwtOC4yNC0uMDMtLjAzLDguMjFaIi8+Cjwvc3ZnPg=="); border-radius: 20px; padding: 8px; height: 39px; min-width: 39px; box-shadow: var(--shadow-base-up); } } &[open] { box-shadow: var(--shadow-base-down); summary { &::after { content: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDUwIDUwIiBmaWxsPSIjOTE0NzhGIj4KICA8cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0yNSwuNUMxMS40Ny41LjUsMTEuNDcuNSwyNXMxMC45NywyNC41LDI0LjUsMjQuNSwyNC41LTEwLjk3LDI0LjUtMjQuNVMzOC41My41LDI1LC41Wk0zNy4yOSwyOS4xMWwtMjQuNTgtLjA5Yy0uNTQsMC0xLjA2LS4yMS0xLjQ0LS41OS0uMzgtLjM4LS41OC0uOS0uNTgtMS40NXYtNC4wOGMtLjAxLS41NC4yNC0xLjA2LjYyLTEuNDQuMzgtLjM4Ljg4LS42MSwxLjQyLS42bDI0LjUuMDdjLjU0LDAsMS4wOC4yMywxLjQ2LjYxLjM2LjM2LjU4LjkuNTgsMS40NWwuMDIsNC4xMmMwLDEuMTEtLjksMi4wMi0yLjAxLDIuMDFaIi8+Cjwvc3ZnPg=="); } } } } /*--------------------------------------------------------------------------------------------------------------*/ /*----------------------------------------------- Main Table ---------------------------------------------------*/ /*--------------------------------------------------------------------------------------------------------------*/ .main-table { table { border-spacing: 0; box-shadow: var(--shadow-base-down); border-radius: 20px; width: 100%; tr { td { position: relative; white-space: nowrap; padding: var(--space-btn-med); border-bottom: 1px solid var(--color-primary-opaque); } } thead { td { color: var(--color-secondary); &[data-order] { cursor: pointer; &:not([data-order=""]) { font-weight: 600; } &::after { position: absolute; margin-top: 2px; margin-left: calc(var(--space)/2); } &[data-order=ASC] { &::after { content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MCA1MCIgZmlsbD0iIzkxNDc4RiIgaGVpZ2h0PSIxNXB4IiBzdHlsZT0idHJhbnNmb3JtOiByb3RhdGUoMTgwZGVnKSI+CiAgPHBhdGggZD0ibTQ4LjQ2LDE3LjA0bC0yMC45NCwyMC45NGMtLjY5LjctMS42LDEuMDQtMi41MSwxLjA0cy0xLjgyLS4zNS0yLjUxLTEuMDRMMS41NCwxNy4wNGMtMS4zOS0xLjM5LTEuMzktMy42NCwwLTUuMDNzMy42NC0xLjM5LDUuMDMsMGwxOC40MywxOC40MywxOC40My0xOC40M2MxLjM5LTEuMzksMy42NC0xLjM5LDUuMDMsMCwxLjM5LDEuMzksMS4zOSwzLjY0LDAsNS4wM1oiLz4KPC9zdmc+"); } &:hover::after { content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MCA1MCIgZmlsbD0iIzUwMTU0QiIgaGVpZ2h0PSIxNXB4IiBzdHlsZT0idHJhbnNmb3JtOiByb3RhdGUoMTgwZGVnKSI+CiAgPHBhdGggZD0ibTQ4LjQ2LDE3LjA0bC0yMC45NCwyMC45NGMtLjY5LjctMS42LDEuMDQtMi41MSwxLjA0cy0xLjgyLS4zNS0yLjUxLTEuMDRMMS41NCwxNy4wNGMtMS4zOS0xLjM5LTEuMzktMy42NCwwLTUuMDNzMy42NC0xLjM5LDUuMDMsMGwxOC40MywxOC40MywxOC40My0xOC40M2MxLjM5LTEuMzksMy42NC0xLjM5LDUuMDMsMCwxLjM5LDEuMzksMS4zOSwzLjY0LDAsNS4wM1oiLz4KPC9zdmc+"); } } &[data-order=DESC] { &::after { content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MCA1MCIgZmlsbD0iIzkxNDc4RiIgaGVpZ2h0PSIxNXB4Ij4KICA8cGF0aCBkPSJtNDguNDYsMTcuMDRsLTIwLjk0LDIwLjk0Yy0uNjkuNy0xLjYsMS4wNC0yLjUxLDEuMDRzLTEuODItLjM1LTIuNTEtMS4wNEwxLjU0LDE3LjA0Yy0xLjM5LTEuMzktMS4zOS0zLjY0LDAtNS4wM3MzLjY0LTEuMzksNS4wMywwbDE4LjQzLDE4LjQzLDE4LjQzLTE4LjQzYzEuMzktMS4zOSwzLjY0LTEuMzksNS4wMywwLDEuMzksMS4zOSwxLjM5LDMuNjQsMCw1LjAzWiIvPgo8L3N2Zz4="); } &:hover::after { content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MCA1MCIgZmlsbD0iIzUwMTU0QiIgaGVpZ2h0PSIxNXB4Ij4KICA8cGF0aCBkPSJtNDguNDYsMTcuMDRsLTIwLjk0LDIwLjk0Yy0uNjkuNy0xLjYsMS4wNC0yLjUxLDEuMDRzLTEuODItLjM1LTIuNTEtMS4wNEwxLjU0LDE3LjA0Yy0xLjM5LTEuMzktMS4zOS0zLjY0LDAtNS4wM3MzLjY0LTEuMzksNS4wMywwbDE4LjQzLDE4LjQzLDE4LjQzLTE4LjQzYzEuMzktMS4zOSwzLjY0LTEuMzksNS4wMywwLDEuMzksMS4zOSwxLjM5LDMuNjQsMCw1LjAzWiIvPgo8L3N2Zz4="); } } &:hover { color: var(--color-primary); } } } } tbody { tr:last-child td { border-bottom: none; } tr:hover td { background-color: var(--color-primary-opaque); } } } overflow-x: auto; &::-webkit-scrollbar { height: 13px; } &::-webkit-scrollbar-track { background: transparent; } &::-webkit-scrollbar-thumb { background-color: var(--color-secondary); border-radius: 10px; border: 3px solid var(--color-white); &:hover { background-color: var(--color-primary); } } } /*--------------------------------------------------------------------------------------------------------------*/ /*----------------------------------------------- Main Navisgation ---------------------------------------------*/ /*--------------------------------------------------------------------------------------------------------------*/ nav.wp-block-navigation { width: 100%; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; ul { display: flex; gap: calc(var(--space)*1.33); } &.sticky > div { position: fixed !important; border-radius: 0 0 20px 20px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); top: 0; padding-bottom: 10px; height: fit-content; &.wp-block-navigation__responsive-container:not(.is-menu-open.is-menu-open) { background-color: var(--color-base) !important; } .wp-block-navigation__responsive-container-content { max-width: 1280px; width: 90%; margin: 0 auto; } } @media (max-width: 600px) { display: none !important; } } /*--------------------------------------------------------------------------------------------------------------*/ /*----------------------------------------------- Main Card ----------------------------------------------------*/ /*--------------------------------------------------------------------------------------------------------------*/ .main-card { border-radius: 20px; overflow: hidden; gap: 0 !important; align-items: center; align-content: center; min-width: 275px; > figure { height: 200px; overflow: hidden; position: relative; display: flex; justify-content: center; align-items: center; border-bottom-right-radius: 0; border-bottom-left-radius: 0; width: 100%; > img { position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: center; } } > div { padding: var(--space) calc(var(--space)*2); text-align: center; gap: var(--space) !important; > * { padding-right: 0; } .wp-block-buttons { flex-direction: row; justify-content: center; } } :where(.is-layout-flex) { gap: var(--space) !important; } } /*--------------------------------------------------------------------------------------------------------------*/ /*----------------------------------------------- Main Title ---------------------------------------------------*/ /*--------------------------------------------------------------------------------------------------------------*/ .main-title { gap: 1em !important; @media (max-width: 767px) { justify-content: space-between; flex-direction: row-reverse; } } /*--------------------------------------------------------------------------------------------------------------*/ /*-----------------------------------------------------Landing Banner ------------------------------------------*/ /*--------------------------------------------------------------------------------------------------------------*/ .main-landing_banner { figure { display: flex; justify-content: center; align-items: center; height: 100%; width: calc(100% + ((100vw - (100% * 3)) / 2)); border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; position: relative; overflow: hidden; > img { position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: center; } @media (max-width: 780px) { height: calc(100vw * (3/11)); width: calc(100% + 5vw); margin-right: calc(5vw * (-1)); } } } }