.elementor-5493 .elementor-element.elementor-element-85fd220{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:2em;--padding-bottom:2em;--padding-left:2em;--padding-right:2em;--z-index:999;}.elementor-5493 .elementor-element.elementor-element-85fd220.e-con{--align-self:center;}.elementor-5493 .elementor-element.elementor-element-89210fe{width:var( --container-widget-width, 250px );max-width:250px;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;--container-widget-width:250px;--container-widget-flex-grow:0;text-align:center;}.elementor-5493 .elementor-element.elementor-element-89210fe.elementor-element{--flex-grow:0;--flex-shrink:1;}.elementor-5493 .elementor-element.elementor-element-89210fe img{width:100px;}.elementor-5493 .elementor-element.elementor-element-830c517{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5493 .elementor-element.elementor-element-830c517:not(.elementor-motion-effects-element-type-background), .elementor-5493 .elementor-element.elementor-element-830c517 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#02010100;}.elementor-5493 .elementor-element.elementor-element-507e599{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5493 .elementor-element.elementor-element-507e599:not(.elementor-motion-effects-element-type-background), .elementor-5493 .elementor-element.elementor-element-507e599 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#02010100;}.elementor-5493 .elementor-element.elementor-element-b5ed91b{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5493 .elementor-element.elementor-element-b5ed91b:not(.elementor-motion-effects-element-type-background), .elementor-5493 .elementor-element.elementor-element-b5ed91b > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#02010100;}.elementor-5493 .elementor-element.elementor-element-d1ace8d{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5493 .elementor-element.elementor-element-d1ace8d:not(.elementor-motion-effects-element-type-background), .elementor-5493 .elementor-element.elementor-element-d1ace8d > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#02010100;}.elementor-5493 .elementor-element.elementor-element-b0e76fd{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5493 .elementor-element.elementor-element-b0e76fd:not(.elementor-motion-effects-element-type-background), .elementor-5493 .elementor-element.elementor-element-b0e76fd > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#02010100;}.elementor-5493 .elementor-element.elementor-element-fea248a{--n-menu-dropdown-content-max-width:initial;--n-menu-heading-justify-content:space-between;--n-menu-title-flex-grow:1;--n-menu-title-justify-content:initial;--n-menu-title-justify-content-mobile:center;--n-menu-heading-wrap:wrap;--n-menu-heading-overflow-x:initial;--n-menu-title-distance-from-content:0px;width:var( --container-widget-width, 1140px );max-width:1140px;background-color:var( --e-global-color-318c913 );margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0.5em 2em 0.5em 2em;--container-widget-width:1140px;--container-widget-flex-grow:0;border-radius:40px 40px 40px 40px;--n-menu-open-animation-duration:200ms;--n-menu-toggle-icon-wrapper-animation-duration:500ms;--n-menu-title-space-between:0px;--n-menu-title-font-size:13px;--n-menu-title-color-normal:var( --e-global-color-text );--n-menu-title-transition:300ms;--n-menu-title-direction:row;--n-menu-icon-order:initial;--n-menu-icon-align-items:initial;--n-menu-title-align-items-toggle:center;--n-menu-icon-size:26px;--n-menu-icon-color:#C5464600;--n-menu-icon-color-hover:#02010100;--n-menu-icon-color-active:#02010100;--n-menu-dropdown-indicator-size:26px;--n-menu-dropdown-indicator-color-normal:#FFFFFF00;--n-menu-dropdown-indicator-color-hover:#02010100;--n-menu-toggle-icon-size:20px;--n-menu-toggle-icon-hover-duration:500ms;--n-menu-toggle-icon-distance-from-dropdown:0px;--n-menu-dropdown-content-box-border-style:none;--n-menu-dropdown-content-box-border-radius:20px 20px 20px 20px;}.elementor-5493 .elementor-element.elementor-element-fea248a > .e-n-menu[data-layout='dropdown'] > .e-n-menu-wrapper > .e-n-menu-heading > .e-n-menu-item > .e-n-menu-title:not( .e-current ){background:var( --e-global-color-318c913 );}.elementor-5493 .elementor-element.elementor-element-fea248a.elementor-element{--align-self:center;}.elementor-5493 .elementor-element.elementor-element-fea248a > .e-n-menu > .e-n-menu-wrapper > .e-n-menu-heading > .e-n-menu-item > .e-n-menu-title, .elementor-5493 .elementor-element.elementor-element-fea248a > .e-n-menu > .e-n-menu-wrapper > .e-n-menu-heading > .e-n-menu-item > .e-n-menu-title > .e-n-menu-title-container, .elementor-5493 .elementor-element.elementor-element-fea248a > .e-n-menu > .e-n-menu-wrapper > .e-n-menu-heading > .e-n-menu-item > .e-n-menu-title > .e-n-menu-title-container > span{font-family:"Arvo", Sans-serif;font-weight:400;}.elementor-5493 .elementor-element.elementor-element-fea248a {--n-menu-title-color-hover:var( --e-global-color-text );--n-menu-title-color-active:var( --e-global-color-text );}:where( .elementor-5493 .elementor-element.elementor-element-fea248a > .e-n-menu > .e-n-menu-wrapper > .e-n-menu-heading > .e-n-menu-item > .e-n-menu-content ) > .e-con{border-style:none;}.elementor-5493 .elementor-element.elementor-element-b8d7de7{width:var( --container-widget-width, 250px );max-width:250px;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;--container-widget-width:250px;--container-widget-flex-grow:0;}.elementor-5493 .elementor-element.elementor-element-b8d7de7.elementor-element{--align-self:center;--flex-grow:0;--flex-shrink:1;}.elementor-5493 .elementor-element.elementor-element-b8d7de7 .elementor-button{font-family:"Arvo", Sans-serif;font-size:13px;font-weight:300;fill:var( --e-global-color-text );color:var( --e-global-color-text );}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(min-width:768px){.elementor-5493 .elementor-element.elementor-element-85fd220{--content-width:1800px;}}@media(max-width:1300px){.elementor-5493 .elementor-element.elementor-element-85fd220{--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--gap:20px 20px;--row-gap:20px;--column-gap:20px;--flex-wrap:wrap;}.elementor-5493 .elementor-element.elementor-element-89210fe{width:var( --container-widget-width, 250px );max-width:250px;--container-widget-width:250px;--container-widget-flex-grow:0;text-align:start;}.elementor-5493 .elementor-element.elementor-element-fea248a{--n-menu-heading-justify-content:initial;--n-menu-title-flex-grow:initial;--n-menu-title-justify-content:initial;--n-menu-title-justify-content-mobile:initial;--container-widget-width:90px;--container-widget-flex-grow:0;width:var( --container-widget-width, 90px );max-width:90px;--n-menu-title-padding:1em 3em 1em 3em;--n-menu-toggle-icon-size:2rem;--n-menu-toggle-icon-padding:1em 1em 1em 1em;}.elementor-5493 .elementor-element.elementor-element-b8d7de7{width:100%;max-width:100%;}.elementor-5493 .elementor-element.elementor-element-b8d7de7.elementor-element{--align-self:center;}}@media(max-width:767px){.elementor-5493 .elementor-element.elementor-element-89210fe{--container-widget-width:80px;--container-widget-flex-grow:0;width:var( --container-widget-width, 80px );max-width:80px;}.elementor-5493 .elementor-element.elementor-element-b8d7de7{z-index:1;}}/* Start custom CSS for container, class: .elementor-element-b5ed91b *//* =============================== */ /* 🌸 BOUJT DROPDOWN – LIQUID GLASS + MINT HOVER EDITION */ /* =============================== */ :root { --boujt-green: #27c19c; --glass-bg: rgba(255, 255, 255, 0.95); --glass-border: rgba(255, 255, 255, 0.45); --mint-glow: rgba(39, 193, 156, 0.25); --text-dark: #1a1a1a; } /* === Dropdownens bakgrundsyta === */ #e-n-menu-content-2353.BOUJT-dropdown { position: fixed !important; top: var(--boujt-mega-top, 65px); left: 50%; transform: translateX(-50%) translateY(-10px); width: clamp(300px, 60vw, 820px); padding: 2rem 2.4rem 3rem; border-radius: 1.8rem; background: var(--glass-bg); backdrop-filter: blur(25px) saturate(180%); -webkit-backdrop-filter: blur(25px) saturate(180%); border: 1px solid var(--glass-border); box-shadow: inset 0 0 8px rgba(255, 255, 255, 0.35), inset 0 0 18px rgba(255, 255, 255, 0.25), 0 18px 40px rgba(0, 0, 0, 0.12); overflow: hidden; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s ease; z-index: 99999; } /* Inner glow + mintglow */ #e-n-menu-content-2353.BOUJT-dropdown::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle at 50% 15%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0) 70%); mix-blend-mode: overlay; pointer-events: none; } #e-n-menu-content-2353.BOUJT-dropdown::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 12px rgba(39, 193, 156, 0.15), inset 0 0 12px rgba(39, 193, 156, 0.25); pointer-events: none; } @keyframes fadeSlideDown { 0% { opacity: 0; transform: translate(-50%, -10px) scale(0.98); } 100% { opacity: 1; transform: translate(-50%, 0) scale(1); } } /* === Kort === */ .boujt-card { position: relative; background: #fff; border-radius: 1.6rem; border: 1px solid rgba(255, 255, 255, 0.6); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05), 0 8px 22px rgba(0, 0, 0, 0.08); padding: 1.4rem 1.6rem 1.6rem; font-family: 'Arvo', serif; color: var(--text-dark); transition: all 0.6s ease; /* mjukare toning */ display: flex; flex-direction: column; justify-content: space-between; cursor: pointer; } /* Mintig effekt vid hover */ .boujt-card:hover { background: linear-gradient(to bottom, #d9f2f2, #b9e3e3); transform: translateY(-4px); box-shadow: 0 8px 26px rgba(0, 0, 0, 0.15), 0 0 14px var(--mint-glow); } /* === Kortinnehåll === */ .boujt-card-content { display: flex; align-items: flex-start; gap: 0.9rem; } /* === Ikon === */ .boujt-card-icon { background: #fff; border-radius: 50%; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 4px rgba(0,0,0,0.1); flex-shrink: 0; transition: all 0.25s ease; } .boujt-card-icon img { width: 30px; height: 30px; object-fit: contain; transition: filter 0.3s ease, transform 0.3s ease; } .boujt-card:hover .boujt-card-icon img { transform: scale(1.05); filter: drop-shadow(0 0 6px rgba(39, 193, 156, 0.6)); } /* === Text === */ .boujt-card-text h3 { font-weight: 700; font-size: 1rem; margin: 0 0 0.3rem; } .boujt-card-text p { font-size: 0.88rem; opacity: 0.85; margin: 0; line-height: 1.45; } /* === Plusikon === */ .corner-icon { position: absolute; right: 1.2rem; bottom: 1rem; font-size: 1.25rem; color: var(--boujt-green); opacity: 0.8; transition: all 0.25s ease; } .boujt-card.has-dropdown:hover .corner-icon { opacity: 0; transform: scale(0.7); pointer-events: none; } /* === Undermeny === */ .boujt-submenu { max-height: 0; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 0.45rem; margin-top: 0.8rem; opacity: 0; transform: translateY(-5px); transition: max-height 0.45s cubic-bezier(0.25, 1, 0.3, 1), opacity 0.35s ease, transform 0.4s ease; } .boujt-card:hover .boujt-submenu { max-height: 200px; opacity: 1; transform: translateY(0); } /* === Submenu-knappar === */ .submenu-item { width: 90%; background: rgba(255, 255, 255, 0.45); border: 1px solid rgba(255, 255, 255, 0.55); border-radius: 9999px; padding: 0.4rem 0.9rem; display: flex; align-items: center; gap: 0.45rem; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08); font-size: 0.9rem; line-height: 1.25; color: #1a1a1a; transition: all 0.25s ease; } .submenu-item .submenu-icon { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.9; transition: transform 0.2s ease, filter 0.2s ease; } /* Hover – subtil förstoring */ .submenu-item:hover { transform: scale(1.03); background: rgba(255, 255, 255, 0.6); box-shadow: 0 4px 10px rgba(39, 193, 156, 0.15); } .submenu-item:hover .submenu-icon { transform: scale(1.08); filter: drop-shadow(0 0 3px rgba(39, 193, 156, 0.4)); } /* === HÖRNIKONER – PLUS & PIL === */ .corner-icon { position: absolute; right: 1.2rem; bottom: 1rem; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; transition: all 0.4s ease; } .corner-icon img { width: 100%; height: 100%; opacity: 0.8; transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), filter 0.45s ease, opacity 0.4s ease; filter: drop-shadow(0 0 0 rgba(39,193,156,0)); } /* 🌿 PIL – för kort utan undermeny */ .boujt-card:not(.has-dropdown):hover .corner-icon img { transform: translateX(5px) scale(1.08); filter: drop-shadow(0 0 6px rgba(39,193,156,0.45)); opacity: 1; } /* === Extra polish: ikonerna "andas" när man hovrar === */ .corner-icon:hover img { transform: scale(1.12); filter: drop-shadow(0 0 10px rgba(39,193,156,0.6)); opacity: 1; } /* ============================================================ 🌸 BOUJT DROPDOWN – LIQUID GLASS + MINT HOVER EDITION ============================================================ */ :root { --boujt-green: #27c19c; --glass-bg: rgba(255, 255, 255, 0.95); --glass-border: rgba(255, 255, 255, 0.45); --mint-glow: rgba(39, 193, 156, 0.25); --text-dark: #1a1a1a; } /* === Dropdownens bakgrundsyta === */ #menubar-136 .BOUJT-dropdown { position: fixed !important; top: var(--boujt-mega-top, 65px); left: 50%; transform: translateX(-50%) translateY(-10px); width: clamp(300px, 60vw, 820px); padding: 2rem 2.4rem 3rem; border-radius: 1.8rem; background: var(--glass-bg); backdrop-filter: blur(25px) saturate(180%); -webkit-backdrop-filter: blur(25px) saturate(180%); border: 1px solid var(--glass-border); box-shadow: inset 0 0 8px rgba(255, 255, 255, 0.35), inset 0 0 18px rgba(255, 255, 255, 0.25), 0 18px 40px rgba(0, 0, 0, 0.12); overflow: hidden; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s ease; z-index: 99999; } /* Inner glow + mintglow */ #menubar-136 .BOUJT-dropdown::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle at 50% 15%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0) 70%); mix-blend-mode: overlay; pointer-events: none; } #menubar-136 .BOUJT-dropdown::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 12px rgba(39, 193, 156, 0.15), inset 0 0 12px rgba(39, 193, 156, 0.25); pointer-events: none; } /* Visa dropdown vid hover */ #menubar-136 .e-n-menu-item:hover .BOUJT-dropdown, #menubar-136 .e-n-menu-item.e-active .BOUJT-dropdown, #menubar-136 .BOUJT-dropdown:hover { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: translateX(-50%) translateY(0); animation: fadeSlideDown .35s ease forwards; } @keyframes fadeSlideDown { 0% { opacity: 0; transform: translate(-50%, -10px) scale(0.98); } 100% { opacity: 1; transform: translate(-50%, 0) scale(1); } } /* /* ============================================================ 🌿 BOUJT DROPDOWN – GRID & KORTSTIL ============================================================ */ .boujt-dropdown-wrap { background: rgba(255, 255, 255, 0.6); border: 1px solid rgba(255, 255, 255, 0.85); border-radius: 2rem; padding: 2.4rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.35), 0 20px 45px rgba(0, 0, 0, 0.1); backdrop-filter: blur(25px) saturate(180%); -webkit-backdrop-filter: blur(25px) saturate(180%); position: relative; } /* ============================================================ 💎 UPPDATERAD .boujt-card (MATCHAR boujt_answers) – DEFAULT ============================================================ */ .boujt-card { position: relative; background: radial-gradient( circle at 40% 15%, rgba(255,255,255,0.95) 0%, rgba(248,244,255,0.75) 55%, rgba(244,238,255,0.60) 100% ); border: 1px solid rgba(255,255,255,0.70); border-radius: 1.6rem; padding: 1.6rem 1.8rem; /* behåller din padding */ backdrop-filter: blur(22px) saturate(180%); -webkit-backdrop-filter: blur(22px) saturate(180%); box-shadow: inset 0 0 12px rgba(255,255,255,0.55), 0 6px 14px rgba(0,0,0,0.06); display: flex; flex-direction: column; justify-content: space-between; gap: .6rem; cursor: pointer; transition: all .38s ease; } /* ============================================================ 💎 UPPDATERAD KORT HOVER – EXAKT BILD 2 ============================================================ */ .boujt-card:hover { background: linear-gradient( 180deg, rgba(215,240,240,0.92) 0%, rgba(195,230,230,0.92) 100% ); border-color: rgba(255,255,255,0.9); transform: translateY(-4px); box-shadow: inset 0 0 14px rgba(255,255,255,0.55), 0 10px 26px rgba(0,0,0,0.14), 0 0 18px var(--mint-glow); } /* ============================================================ 🔻 RESTEN AV ORIGINELLA KORTSTILAR (ikoner, text, submenu, etc) ============================================================ */ .boujt-card-content { display: flex; align-items: flex-start; gap: 0.9rem; } .boujt-card-icon { background: #fff; border-radius: 50%; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 4px rgba(0,0,0,0.1); flex-shrink: 0; transition: all 0.25s ease; } .boujt-card-icon img { width: 30px; height: 30px; object-fit: contain; transition: filter 0.3s ease, transform 0.3s ease; } .boujt-card:hover .boujt-card-icon img { transform: scale(1.06); filter: drop-shadow(0 0 6px rgba(39,193,156,0.55)); } .boujt-card-text h3 { font-weight: 700; font-size: 1rem; margin: 0 0 0.3rem; } .boujt-card-text p { font-size: 0.88rem; opacity: 0.85; margin: 0; line-height: 1.45; } .corner-icon { position: absolute; right: 1.2rem; bottom: 1rem; font-size: 1.25rem; color: var(--boujt-green); opacity: 0.8; transition: all 0.25s ease; } .boujt-card.has-dropdown:hover .corner-icon { opacity: 0; transform: scale(0.7); pointer-events: none; } .boujt-submenu { max-height: 0; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 0.45rem; margin-top: 0.8rem; opacity: 0; transform: translateY(-5px); transition: max-height 0.45s cubic-bezier(0.25, 1, 0.3, 1), opacity 0.35s ease, transform 0.4s ease; } .boujt-card:hover .boujt-submenu { max-height: 200px; opacity: 1; transform: translateY(0); } .submenu-item { width: 90%; background: rgba(255, 255, 255, 0.45); border: 1px solid rgba(255, 255, 255, 0.55); border-radius: 9999px; padding: 0.4rem 0.9rem; display: flex; align-items: center; gap: 0.45rem; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08); font-size: 0.9rem; line-height: 1.25; color: #1a1a1a; transition: all 0.25s ease; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-b5ed91b *//* =============================== */ /* 🌸 BOUJT DROPDOWN – LIQUID GLASS + MINT HOVER EDITION */ /* =============================== */ :root { --boujt-green: #27c19c; --glass-bg: rgba(255, 255, 255, 0.95); --glass-border: rgba(255, 255, 255, 0.45); --mint-glow: rgba(39, 193, 156, 0.25); --text-dark: #1a1a1a; } /* === Dropdownens bakgrundsyta === */ #e-n-menu-content-2353.BOUJT-dropdown { position: fixed !important; top: var(--boujt-mega-top, 65px); left: 50%; transform: translateX(-50%) translateY(-10px); width: clamp(300px, 60vw, 820px); padding: 2rem 2.4rem 3rem; border-radius: 1.8rem; background: var(--glass-bg); backdrop-filter: blur(25px) saturate(180%); -webkit-backdrop-filter: blur(25px) saturate(180%); border: 1px solid var(--glass-border); box-shadow: inset 0 0 8px rgba(255, 255, 255, 0.35), inset 0 0 18px rgba(255, 255, 255, 0.25), 0 18px 40px rgba(0, 0, 0, 0.12); overflow: hidden; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s ease; z-index: 99999; } /* Inner glow + mintglow */ #e-n-menu-content-2353.BOUJT-dropdown::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle at 50% 15%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0) 70%); mix-blend-mode: overlay; pointer-events: none; } #e-n-menu-content-2353.BOUJT-dropdown::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 12px rgba(39, 193, 156, 0.15), inset 0 0 12px rgba(39, 193, 156, 0.25); pointer-events: none; } @keyframes fadeSlideDown { 0% { opacity: 0; transform: translate(-50%, -10px) scale(0.98); } 100% { opacity: 1; transform: translate(-50%, 0) scale(1); } } /* === Kort === */ .boujt-card { position: relative; background: #fff; border-radius: 1.6rem; border: 1px solid rgba(255, 255, 255, 0.6); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05), 0 8px 22px rgba(0, 0, 0, 0.08); padding: 1.4rem 1.6rem 1.6rem; font-family: 'Arvo', serif; color: var(--text-dark); transition: all 0.6s ease; /* mjukare toning */ display: flex; flex-direction: column; justify-content: space-between; cursor: pointer; } /* Mintig effekt vid hover */ .boujt-card:hover { background: linear-gradient(to bottom, #d9f2f2, #b9e3e3); transform: translateY(-4px); box-shadow: 0 8px 26px rgba(0, 0, 0, 0.15), 0 0 14px var(--mint-glow); } /* === Kortinnehåll === */ .boujt-card-content { display: flex; align-items: flex-start; gap: 0.9rem; } /* === Ikon === */ .boujt-card-icon { background: #fff; border-radius: 50%; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 4px rgba(0,0,0,0.1); flex-shrink: 0; transition: all 0.25s ease; } .boujt-card-icon img { width: 30px; height: 30px; object-fit: contain; transition: filter 0.3s ease, transform 0.3s ease; } .boujt-card:hover .boujt-card-icon img { transform: scale(1.05); filter: drop-shadow(0 0 6px rgba(39, 193, 156, 0.6)); } /* === Text === */ .boujt-card-text h3 { font-weight: 700; font-size: 1rem; margin: 0 0 0.3rem; } .boujt-card-text p { font-size: 0.88rem; opacity: 0.85; margin: 0; line-height: 1.45; } /* === Plusikon === */ .corner-icon { position: absolute; right: 1.2rem; bottom: 1rem; font-size: 1.25rem; color: var(--boujt-green); opacity: 0.8; transition: all 0.25s ease; } .boujt-card.has-dropdown:hover .corner-icon { opacity: 0; transform: scale(0.7); pointer-events: none; } /* === Undermeny === */ .boujt-submenu { max-height: 0; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 0.45rem; margin-top: 0.8rem; opacity: 0; transform: translateY(-5px); transition: max-height 0.45s cubic-bezier(0.25, 1, 0.3, 1), opacity 0.35s ease, transform 0.4s ease; } .boujt-card:hover .boujt-submenu { max-height: 200px; opacity: 1; transform: translateY(0); } /* === Submenu-knappar === */ .submenu-item { width: 90%; background: rgba(255, 255, 255, 0.45); border: 1px solid rgba(255, 255, 255, 0.55); border-radius: 9999px; padding: 0.4rem 0.9rem; display: flex; align-items: center; gap: 0.45rem; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08); font-size: 0.9rem; line-height: 1.25; color: #1a1a1a; transition: all 0.25s ease; } .submenu-item .submenu-icon { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.9; transition: transform 0.2s ease, filter 0.2s ease; } /* Hover – subtil förstoring */ .submenu-item:hover { transform: scale(1.03); background: rgba(255, 255, 255, 0.6); box-shadow: 0 4px 10px rgba(39, 193, 156, 0.15); } .submenu-item:hover .submenu-icon { transform: scale(1.08); filter: drop-shadow(0 0 3px rgba(39, 193, 156, 0.4)); } /* === HÖRNIKONER – PLUS & PIL === */ .corner-icon { position: absolute; right: 1.2rem; bottom: 1rem; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; transition: all 0.4s ease; } .corner-icon img { width: 100%; height: 100%; opacity: 0.8; transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), filter 0.45s ease, opacity 0.4s ease; filter: drop-shadow(0 0 0 rgba(39,193,156,0)); } /* 🌿 PIL – för kort utan undermeny */ .boujt-card:not(.has-dropdown):hover .corner-icon img { transform: translateX(5px) scale(1.08); filter: drop-shadow(0 0 6px rgba(39,193,156,0.45)); opacity: 1; } /* === Extra polish: ikonerna "andas" när man hovrar === */ .corner-icon:hover img { transform: scale(1.12); filter: drop-shadow(0 0 10px rgba(39,193,156,0.6)); opacity: 1; } /* ============================================================ 🌸 BOUJT DROPDOWN – LIQUID GLASS + MINT HOVER EDITION ============================================================ */ :root { --boujt-green: #27c19c; --glass-bg: rgba(255, 255, 255, 0.95); --glass-border: rgba(255, 255, 255, 0.45); --mint-glow: rgba(39, 193, 156, 0.25); --text-dark: #1a1a1a; } /* === Dropdownens bakgrundsyta === */ #menubar-136 .BOUJT-dropdown { position: fixed !important; top: var(--boujt-mega-top, 65px); left: 50%; transform: translateX(-50%) translateY(-10px); width: clamp(300px, 60vw, 820px); padding: 2rem 2.4rem 3rem; border-radius: 1.8rem; background: var(--glass-bg); backdrop-filter: blur(25px) saturate(180%); -webkit-backdrop-filter: blur(25px) saturate(180%); border: 1px solid var(--glass-border); box-shadow: inset 0 0 8px rgba(255, 255, 255, 0.35), inset 0 0 18px rgba(255, 255, 255, 0.25), 0 18px 40px rgba(0, 0, 0, 0.12); overflow: hidden; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s ease; z-index: 99999; } /* Inner glow + mintglow */ #menubar-136 .BOUJT-dropdown::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle at 50% 15%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0) 70%); mix-blend-mode: overlay; pointer-events: none; } #menubar-136 .BOUJT-dropdown::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 12px rgba(39, 193, 156, 0.15), inset 0 0 12px rgba(39, 193, 156, 0.25); pointer-events: none; } /* Visa dropdown vid hover */ #menubar-136 .e-n-menu-item:hover .BOUJT-dropdown, #menubar-136 .e-n-menu-item.e-active .BOUJT-dropdown, #menubar-136 .BOUJT-dropdown:hover { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: translateX(-50%) translateY(0); animation: fadeSlideDown .35s ease forwards; } @keyframes fadeSlideDown { 0% { opacity: 0; transform: translate(-50%, -10px) scale(0.98); } 100% { opacity: 1; transform: translate(-50%, 0) scale(1); } } /* /* ============================================================ 🌿 BOUJT DROPDOWN – GRID & KORTSTIL ============================================================ */ .boujt-dropdown-wrap { background: rgba(255, 255, 255, 0.6); border: 1px solid rgba(255, 255, 255, 0.85); border-radius: 2rem; padding: 2.4rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.35), 0 20px 45px rgba(0, 0, 0, 0.1); backdrop-filter: blur(25px) saturate(180%); -webkit-backdrop-filter: blur(25px) saturate(180%); position: relative; } /* ============================================================ 💎 UPPDATERAD .boujt-card (MATCHAR boujt_answers) – DEFAULT ============================================================ */ .boujt-card { position: relative; background: radial-gradient( circle at 40% 15%, rgba(255,255,255,0.95) 0%, rgba(248,244,255,0.75) 55%, rgba(244,238,255,0.60) 100% ); border: 1px solid rgba(255,255,255,0.70); border-radius: 1.6rem; padding: 1.6rem 1.8rem; /* behåller din padding */ backdrop-filter: blur(22px) saturate(180%); -webkit-backdrop-filter: blur(22px) saturate(180%); box-shadow: inset 0 0 12px rgba(255,255,255,0.55), 0 6px 14px rgba(0,0,0,0.06); display: flex; flex-direction: column; justify-content: space-between; gap: .6rem; cursor: pointer; transition: all .38s ease; } /* ============================================================ 💎 UPPDATERAD KORT HOVER – EXAKT BILD 2 ============================================================ */ .boujt-card:hover { background: linear-gradient( 180deg, rgba(215,240,240,0.92) 0%, rgba(195,230,230,0.92) 100% ); border-color: rgba(255,255,255,0.9); transform: translateY(-4px); box-shadow: inset 0 0 14px rgba(255,255,255,0.55), 0 10px 26px rgba(0,0,0,0.14), 0 0 18px var(--mint-glow); } /* ============================================================ 🔻 RESTEN AV ORIGINELLA KORTSTILAR (ikoner, text, submenu, etc) ============================================================ */ .boujt-card-content { display: flex; align-items: flex-start; gap: 0.9rem; } .boujt-card-icon { background: #fff; border-radius: 50%; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 4px rgba(0,0,0,0.1); flex-shrink: 0; transition: all 0.25s ease; } .boujt-card-icon img { width: 30px; height: 30px; object-fit: contain; transition: filter 0.3s ease, transform 0.3s ease; } .boujt-card:hover .boujt-card-icon img { transform: scale(1.06); filter: drop-shadow(0 0 6px rgba(39,193,156,0.55)); } .boujt-card-text h3 { font-weight: 700; font-size: 1rem; margin: 0 0 0.3rem; } .boujt-card-text p { font-size: 0.88rem; opacity: 0.85; margin: 0; line-height: 1.45; } .corner-icon { position: absolute; right: 1.2rem; bottom: 1rem; font-size: 1.25rem; color: var(--boujt-green); opacity: 0.8; transition: all 0.25s ease; } .boujt-card.has-dropdown:hover .corner-icon { opacity: 0; transform: scale(0.7); pointer-events: none; } .boujt-submenu { max-height: 0; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 0.45rem; margin-top: 0.8rem; opacity: 0; transform: translateY(-5px); transition: max-height 0.45s cubic-bezier(0.25, 1, 0.3, 1), opacity 0.35s ease, transform 0.4s ease; } .boujt-card:hover .boujt-submenu { max-height: 200px; opacity: 1; transform: translateY(0); } .submenu-item { width: 90%; background: rgba(255, 255, 255, 0.45); border: 1px solid rgba(255, 255, 255, 0.55); border-radius: 9999px; padding: 0.4rem 0.9rem; display: flex; align-items: center; gap: 0.45rem; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08); font-size: 0.9rem; line-height: 1.25; color: #1a1a1a; transition: all 0.25s ease; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-b5ed91b *//* =============================== */ /* 🌸 BOUJT DROPDOWN – LIQUID GLASS + MINT HOVER EDITION */ /* =============================== */ :root { --boujt-green: #27c19c; --glass-bg: rgba(255, 255, 255, 0.95); --glass-border: rgba(255, 255, 255, 0.45); --mint-glow: rgba(39, 193, 156, 0.25); --text-dark: #1a1a1a; } /* === Dropdownens bakgrundsyta === */ #e-n-menu-content-2353.BOUJT-dropdown { position: fixed !important; top: var(--boujt-mega-top, 65px); left: 50%; transform: translateX(-50%) translateY(-10px); width: clamp(300px, 60vw, 820px); padding: 2rem 2.4rem 3rem; border-radius: 1.8rem; background: var(--glass-bg); backdrop-filter: blur(25px) saturate(180%); -webkit-backdrop-filter: blur(25px) saturate(180%); border: 1px solid var(--glass-border); box-shadow: inset 0 0 8px rgba(255, 255, 255, 0.35), inset 0 0 18px rgba(255, 255, 255, 0.25), 0 18px 40px rgba(0, 0, 0, 0.12); overflow: hidden; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s ease; z-index: 99999; } /* Inner glow + mintglow */ #e-n-menu-content-2353.BOUJT-dropdown::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle at 50% 15%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0) 70%); mix-blend-mode: overlay; pointer-events: none; } #e-n-menu-content-2353.BOUJT-dropdown::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 12px rgba(39, 193, 156, 0.15), inset 0 0 12px rgba(39, 193, 156, 0.25); pointer-events: none; } @keyframes fadeSlideDown { 0% { opacity: 0; transform: translate(-50%, -10px) scale(0.98); } 100% { opacity: 1; transform: translate(-50%, 0) scale(1); } } /* === Kort === */ .boujt-card { position: relative; background: #fff; border-radius: 1.6rem; border: 1px solid rgba(255, 255, 255, 0.6); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05), 0 8px 22px rgba(0, 0, 0, 0.08); padding: 1.4rem 1.6rem 1.6rem; font-family: 'Arvo', serif; color: var(--text-dark); transition: all 0.6s ease; /* mjukare toning */ display: flex; flex-direction: column; justify-content: space-between; cursor: pointer; } /* Mintig effekt vid hover */ .boujt-card:hover { background: linear-gradient(to bottom, #d9f2f2, #b9e3e3); transform: translateY(-4px); box-shadow: 0 8px 26px rgba(0, 0, 0, 0.15), 0 0 14px var(--mint-glow); } /* === Kortinnehåll === */ .boujt-card-content { display: flex; align-items: flex-start; gap: 0.9rem; } /* === Ikon === */ .boujt-card-icon { background: #fff; border-radius: 50%; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 4px rgba(0,0,0,0.1); flex-shrink: 0; transition: all 0.25s ease; } .boujt-card-icon img { width: 30px; height: 30px; object-fit: contain; transition: filter 0.3s ease, transform 0.3s ease; } .boujt-card:hover .boujt-card-icon img { transform: scale(1.05); filter: drop-shadow(0 0 6px rgba(39, 193, 156, 0.6)); } /* === Text === */ .boujt-card-text h3 { font-weight: 700; font-size: 1rem; margin: 0 0 0.3rem; } .boujt-card-text p { font-size: 0.88rem; opacity: 0.85; margin: 0; line-height: 1.45; } /* === Plusikon === */ .corner-icon { position: absolute; right: 1.2rem; bottom: 1rem; font-size: 1.25rem; color: var(--boujt-green); opacity: 0.8; transition: all 0.25s ease; } .boujt-card.has-dropdown:hover .corner-icon { opacity: 0; transform: scale(0.7); pointer-events: none; } /* === Undermeny === */ .boujt-submenu { max-height: 0; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 0.45rem; margin-top: 0.8rem; opacity: 0; transform: translateY(-5px); transition: max-height 0.45s cubic-bezier(0.25, 1, 0.3, 1), opacity 0.35s ease, transform 0.4s ease; } .boujt-card:hover .boujt-submenu { max-height: 200px; opacity: 1; transform: translateY(0); } /* === Submenu-knappar === */ .submenu-item { width: 90%; background: rgba(255, 255, 255, 0.45); border: 1px solid rgba(255, 255, 255, 0.55); border-radius: 9999px; padding: 0.4rem 0.9rem; display: flex; align-items: center; gap: 0.45rem; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08); font-size: 0.9rem; line-height: 1.25; color: #1a1a1a; transition: all 0.25s ease; } .submenu-item .submenu-icon { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.9; transition: transform 0.2s ease, filter 0.2s ease; } /* Hover – subtil förstoring */ .submenu-item:hover { transform: scale(1.03); background: rgba(255, 255, 255, 0.6); box-shadow: 0 4px 10px rgba(39, 193, 156, 0.15); } .submenu-item:hover .submenu-icon { transform: scale(1.08); filter: drop-shadow(0 0 3px rgba(39, 193, 156, 0.4)); } /* === HÖRNIKONER – PLUS & PIL === */ .corner-icon { position: absolute; right: 1.2rem; bottom: 1rem; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; transition: all 0.4s ease; } .corner-icon img { width: 100%; height: 100%; opacity: 0.8; transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), filter 0.45s ease, opacity 0.4s ease; filter: drop-shadow(0 0 0 rgba(39,193,156,0)); } /* 🌿 PIL – för kort utan undermeny */ .boujt-card:not(.has-dropdown):hover .corner-icon img { transform: translateX(5px) scale(1.08); filter: drop-shadow(0 0 6px rgba(39,193,156,0.45)); opacity: 1; } /* === Extra polish: ikonerna "andas" när man hovrar === */ .corner-icon:hover img { transform: scale(1.12); filter: drop-shadow(0 0 10px rgba(39,193,156,0.6)); opacity: 1; } /* ============================================================ 🌸 BOUJT DROPDOWN – LIQUID GLASS + MINT HOVER EDITION ============================================================ */ :root { --boujt-green: #27c19c; --glass-bg: rgba(255, 255, 255, 0.95); --glass-border: rgba(255, 255, 255, 0.45); --mint-glow: rgba(39, 193, 156, 0.25); --text-dark: #1a1a1a; } /* === Dropdownens bakgrundsyta === */ #menubar-136 .BOUJT-dropdown { position: fixed !important; top: var(--boujt-mega-top, 65px); left: 50%; transform: translateX(-50%) translateY(-10px); width: clamp(300px, 60vw, 820px); padding: 2rem 2.4rem 3rem; border-radius: 1.8rem; background: var(--glass-bg); backdrop-filter: blur(25px) saturate(180%); -webkit-backdrop-filter: blur(25px) saturate(180%); border: 1px solid var(--glass-border); box-shadow: inset 0 0 8px rgba(255, 255, 255, 0.35), inset 0 0 18px rgba(255, 255, 255, 0.25), 0 18px 40px rgba(0, 0, 0, 0.12); overflow: hidden; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s ease; z-index: 99999; } /* Inner glow + mintglow */ #menubar-136 .BOUJT-dropdown::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle at 50% 15%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0) 70%); mix-blend-mode: overlay; pointer-events: none; } #menubar-136 .BOUJT-dropdown::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 12px rgba(39, 193, 156, 0.15), inset 0 0 12px rgba(39, 193, 156, 0.25); pointer-events: none; } /* Visa dropdown vid hover */ #menubar-136 .e-n-menu-item:hover .BOUJT-dropdown, #menubar-136 .e-n-menu-item.e-active .BOUJT-dropdown, #menubar-136 .BOUJT-dropdown:hover { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: translateX(-50%) translateY(0); animation: fadeSlideDown .35s ease forwards; } @keyframes fadeSlideDown { 0% { opacity: 0; transform: translate(-50%, -10px) scale(0.98); } 100% { opacity: 1; transform: translate(-50%, 0) scale(1); } } /* /* ============================================================ 🌿 BOUJT DROPDOWN – GRID & KORTSTIL ============================================================ */ .boujt-dropdown-wrap { background: rgba(255, 255, 255, 0.6); border: 1px solid rgba(255, 255, 255, 0.85); border-radius: 2rem; padding: 2.4rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.35), 0 20px 45px rgba(0, 0, 0, 0.1); backdrop-filter: blur(25px) saturate(180%); -webkit-backdrop-filter: blur(25px) saturate(180%); position: relative; } /* ============================================================ 💎 UPPDATERAD .boujt-card (MATCHAR boujt_answers) – DEFAULT ============================================================ */ .boujt-card { position: relative; background: radial-gradient( circle at 40% 15%, rgba(255,255,255,0.95) 0%, rgba(248,244,255,0.75) 55%, rgba(244,238,255,0.60) 100% ); border: 1px solid rgba(255,255,255,0.70); border-radius: 1.6rem; padding: 1.6rem 1.8rem; /* behåller din padding */ backdrop-filter: blur(22px) saturate(180%); -webkit-backdrop-filter: blur(22px) saturate(180%); box-shadow: inset 0 0 12px rgba(255,255,255,0.55), 0 6px 14px rgba(0,0,0,0.06); display: flex; flex-direction: column; justify-content: space-between; gap: .6rem; cursor: pointer; transition: all .38s ease; } /* ============================================================ 💎 UPPDATERAD KORT HOVER – EXAKT BILD 2 ============================================================ */ .boujt-card:hover { background: linear-gradient( 180deg, rgba(215,240,240,0.92) 0%, rgba(195,230,230,0.92) 100% ); border-color: rgba(255,255,255,0.9); transform: translateY(-4px); box-shadow: inset 0 0 14px rgba(255,255,255,0.55), 0 10px 26px rgba(0,0,0,0.14), 0 0 18px var(--mint-glow); } /* ============================================================ 🔻 RESTEN AV ORIGINELLA KORTSTILAR (ikoner, text, submenu, etc) ============================================================ */ .boujt-card-content { display: flex; align-items: flex-start; gap: 0.9rem; } .boujt-card-icon { background: #fff; border-radius: 50%; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 4px rgba(0,0,0,0.1); flex-shrink: 0; transition: all 0.25s ease; } .boujt-card-icon img { width: 30px; height: 30px; object-fit: contain; transition: filter 0.3s ease, transform 0.3s ease; } .boujt-card:hover .boujt-card-icon img { transform: scale(1.06); filter: drop-shadow(0 0 6px rgba(39,193,156,0.55)); } .boujt-card-text h3 { font-weight: 700; font-size: 1rem; margin: 0 0 0.3rem; } .boujt-card-text p { font-size: 0.88rem; opacity: 0.85; margin: 0; line-height: 1.45; } .corner-icon { position: absolute; right: 1.2rem; bottom: 1rem; font-size: 1.25rem; color: var(--boujt-green); opacity: 0.8; transition: all 0.25s ease; } .boujt-card.has-dropdown:hover .corner-icon { opacity: 0; transform: scale(0.7); pointer-events: none; } .boujt-submenu { max-height: 0; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 0.45rem; margin-top: 0.8rem; opacity: 0; transform: translateY(-5px); transition: max-height 0.45s cubic-bezier(0.25, 1, 0.3, 1), opacity 0.35s ease, transform 0.4s ease; } .boujt-card:hover .boujt-submenu { max-height: 200px; opacity: 1; transform: translateY(0); } .submenu-item { width: 90%; background: rgba(255, 255, 255, 0.45); border: 1px solid rgba(255, 255, 255, 0.55); border-radius: 9999px; padding: 0.4rem 0.9rem; display: flex; align-items: center; gap: 0.45rem; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08); font-size: 0.9rem; line-height: 1.25; color: #1a1a1a; transition: all 0.25s ease; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-b5ed91b *//* =============================== */ /* 🌸 BOUJT DROPDOWN – LIQUID GLASS + MINT HOVER EDITION */ /* =============================== */ :root { --boujt-green: #27c19c; --glass-bg: rgba(255, 255, 255, 0.95); --glass-border: rgba(255, 255, 255, 0.45); --mint-glow: rgba(39, 193, 156, 0.25); --text-dark: #1a1a1a; } /* === Dropdownens bakgrundsyta === */ #e-n-menu-content-2353.BOUJT-dropdown { position: fixed !important; top: var(--boujt-mega-top, 65px); left: 50%; transform: translateX(-50%) translateY(-10px); width: clamp(300px, 60vw, 820px); padding: 2rem 2.4rem 3rem; border-radius: 1.8rem; background: var(--glass-bg); backdrop-filter: blur(25px) saturate(180%); -webkit-backdrop-filter: blur(25px) saturate(180%); border: 1px solid var(--glass-border); box-shadow: inset 0 0 8px rgba(255, 255, 255, 0.35), inset 0 0 18px rgba(255, 255, 255, 0.25), 0 18px 40px rgba(0, 0, 0, 0.12); overflow: hidden; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s ease; z-index: 99999; } /* Inner glow + mintglow */ #e-n-menu-content-2353.BOUJT-dropdown::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle at 50% 15%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0) 70%); mix-blend-mode: overlay; pointer-events: none; } #e-n-menu-content-2353.BOUJT-dropdown::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 12px rgba(39, 193, 156, 0.15), inset 0 0 12px rgba(39, 193, 156, 0.25); pointer-events: none; } @keyframes fadeSlideDown { 0% { opacity: 0; transform: translate(-50%, -10px) scale(0.98); } 100% { opacity: 1; transform: translate(-50%, 0) scale(1); } } /* === Kort === */ .boujt-card { position: relative; background: #fff; border-radius: 1.6rem; border: 1px solid rgba(255, 255, 255, 0.6); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05), 0 8px 22px rgba(0, 0, 0, 0.08); padding: 1.4rem 1.6rem 1.6rem; font-family: 'Arvo', serif; color: var(--text-dark); transition: all 0.6s ease; /* mjukare toning */ display: flex; flex-direction: column; justify-content: space-between; cursor: pointer; } /* Mintig effekt vid hover */ .boujt-card:hover { background: linear-gradient(to bottom, #d9f2f2, #b9e3e3); transform: translateY(-4px); box-shadow: 0 8px 26px rgba(0, 0, 0, 0.15), 0 0 14px var(--mint-glow); } /* === Kortinnehåll === */ .boujt-card-content { display: flex; align-items: flex-start; gap: 0.9rem; } /* === Ikon === */ .boujt-card-icon { background: #fff; border-radius: 50%; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 4px rgba(0,0,0,0.1); flex-shrink: 0; transition: all 0.25s ease; } .boujt-card-icon img { width: 30px; height: 30px; object-fit: contain; transition: filter 0.3s ease, transform 0.3s ease; } .boujt-card:hover .boujt-card-icon img { transform: scale(1.05); filter: drop-shadow(0 0 6px rgba(39, 193, 156, 0.6)); } /* === Text === */ .boujt-card-text h3 { font-weight: 700; font-size: 1rem; margin: 0 0 0.3rem; } .boujt-card-text p { font-size: 0.88rem; opacity: 0.85; margin: 0; line-height: 1.45; } /* === Plusikon === */ .corner-icon { position: absolute; right: 1.2rem; bottom: 1rem; font-size: 1.25rem; color: var(--boujt-green); opacity: 0.8; transition: all 0.25s ease; } .boujt-card.has-dropdown:hover .corner-icon { opacity: 0; transform: scale(0.7); pointer-events: none; } /* === Undermeny === */ .boujt-submenu { max-height: 0; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 0.45rem; margin-top: 0.8rem; opacity: 0; transform: translateY(-5px); transition: max-height 0.45s cubic-bezier(0.25, 1, 0.3, 1), opacity 0.35s ease, transform 0.4s ease; } .boujt-card:hover .boujt-submenu { max-height: 200px; opacity: 1; transform: translateY(0); } /* === Submenu-knappar === */ .submenu-item { width: 90%; background: rgba(255, 255, 255, 0.45); border: 1px solid rgba(255, 255, 255, 0.55); border-radius: 9999px; padding: 0.4rem 0.9rem; display: flex; align-items: center; gap: 0.45rem; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08); font-size: 0.9rem; line-height: 1.25; color: #1a1a1a; transition: all 0.25s ease; } .submenu-item .submenu-icon { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.9; transition: transform 0.2s ease, filter 0.2s ease; } /* Hover – subtil förstoring */ .submenu-item:hover { transform: scale(1.03); background: rgba(255, 255, 255, 0.6); box-shadow: 0 4px 10px rgba(39, 193, 156, 0.15); } .submenu-item:hover .submenu-icon { transform: scale(1.08); filter: drop-shadow(0 0 3px rgba(39, 193, 156, 0.4)); } /* === HÖRNIKONER – PLUS & PIL === */ .corner-icon { position: absolute; right: 1.2rem; bottom: 1rem; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; transition: all 0.4s ease; } .corner-icon img { width: 100%; height: 100%; opacity: 0.8; transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), filter 0.45s ease, opacity 0.4s ease; filter: drop-shadow(0 0 0 rgba(39,193,156,0)); } /* 🌿 PIL – för kort utan undermeny */ .boujt-card:not(.has-dropdown):hover .corner-icon img { transform: translateX(5px) scale(1.08); filter: drop-shadow(0 0 6px rgba(39,193,156,0.45)); opacity: 1; } /* === Extra polish: ikonerna "andas" när man hovrar === */ .corner-icon:hover img { transform: scale(1.12); filter: drop-shadow(0 0 10px rgba(39,193,156,0.6)); opacity: 1; } /* ============================================================ 🌸 BOUJT DROPDOWN – LIQUID GLASS + MINT HOVER EDITION ============================================================ */ :root { --boujt-green: #27c19c; --glass-bg: rgba(255, 255, 255, 0.95); --glass-border: rgba(255, 255, 255, 0.45); --mint-glow: rgba(39, 193, 156, 0.25); --text-dark: #1a1a1a; } /* === Dropdownens bakgrundsyta === */ #menubar-136 .BOUJT-dropdown { position: fixed !important; top: var(--boujt-mega-top, 65px); left: 50%; transform: translateX(-50%) translateY(-10px); width: clamp(300px, 60vw, 820px); padding: 2rem 2.4rem 3rem; border-radius: 1.8rem; background: var(--glass-bg); backdrop-filter: blur(25px) saturate(180%); -webkit-backdrop-filter: blur(25px) saturate(180%); border: 1px solid var(--glass-border); box-shadow: inset 0 0 8px rgba(255, 255, 255, 0.35), inset 0 0 18px rgba(255, 255, 255, 0.25), 0 18px 40px rgba(0, 0, 0, 0.12); overflow: hidden; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s ease; z-index: 99999; } /* Inner glow + mintglow */ #menubar-136 .BOUJT-dropdown::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle at 50% 15%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0) 70%); mix-blend-mode: overlay; pointer-events: none; } #menubar-136 .BOUJT-dropdown::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 12px rgba(39, 193, 156, 0.15), inset 0 0 12px rgba(39, 193, 156, 0.25); pointer-events: none; } /* Visa dropdown vid hover */ #menubar-136 .e-n-menu-item:hover .BOUJT-dropdown, #menubar-136 .e-n-menu-item.e-active .BOUJT-dropdown, #menubar-136 .BOUJT-dropdown:hover { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: translateX(-50%) translateY(0); animation: fadeSlideDown .35s ease forwards; } @keyframes fadeSlideDown { 0% { opacity: 0; transform: translate(-50%, -10px) scale(0.98); } 100% { opacity: 1; transform: translate(-50%, 0) scale(1); } } /* /* ============================================================ 🌿 BOUJT DROPDOWN – GRID & KORTSTIL ============================================================ */ .boujt-dropdown-wrap { background: rgba(255, 255, 255, 0.6); border: 1px solid rgba(255, 255, 255, 0.85); border-radius: 2rem; padding: 2.4rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.35), 0 20px 45px rgba(0, 0, 0, 0.1); backdrop-filter: blur(25px) saturate(180%); -webkit-backdrop-filter: blur(25px) saturate(180%); position: relative; } /* ============================================================ 💎 UPPDATERAD .boujt-card (MATCHAR boujt_answers) – DEFAULT ============================================================ */ .boujt-card { position: relative; background: radial-gradient( circle at 40% 15%, rgba(255,255,255,0.95) 0%, rgba(248,244,255,0.75) 55%, rgba(244,238,255,0.60) 100% ); border: 1px solid rgba(255,255,255,0.70); border-radius: 1.6rem; padding: 1.6rem 1.8rem; /* behåller din padding */ backdrop-filter: blur(22px) saturate(180%); -webkit-backdrop-filter: blur(22px) saturate(180%); box-shadow: inset 0 0 12px rgba(255,255,255,0.55), 0 6px 14px rgba(0,0,0,0.06); display: flex; flex-direction: column; justify-content: space-between; gap: .6rem; cursor: pointer; transition: all .38s ease; } /* ============================================================ 💎 UPPDATERAD KORT HOVER – EXAKT BILD 2 ============================================================ */ .boujt-card:hover { background: linear-gradient( 180deg, rgba(215,240,240,0.92) 0%, rgba(195,230,230,0.92) 100% ); border-color: rgba(255,255,255,0.9); transform: translateY(-4px); box-shadow: inset 0 0 14px rgba(255,255,255,0.55), 0 10px 26px rgba(0,0,0,0.14), 0 0 18px var(--mint-glow); } /* ============================================================ 🔻 RESTEN AV ORIGINELLA KORTSTILAR (ikoner, text, submenu, etc) ============================================================ */ .boujt-card-content { display: flex; align-items: flex-start; gap: 0.9rem; } .boujt-card-icon { background: #fff; border-radius: 50%; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 4px rgba(0,0,0,0.1); flex-shrink: 0; transition: all 0.25s ease; } .boujt-card-icon img { width: 30px; height: 30px; object-fit: contain; transition: filter 0.3s ease, transform 0.3s ease; } .boujt-card:hover .boujt-card-icon img { transform: scale(1.06); filter: drop-shadow(0 0 6px rgba(39,193,156,0.55)); } .boujt-card-text h3 { font-weight: 700; font-size: 1rem; margin: 0 0 0.3rem; } .boujt-card-text p { font-size: 0.88rem; opacity: 0.85; margin: 0; line-height: 1.45; } .corner-icon { position: absolute; right: 1.2rem; bottom: 1rem; font-size: 1.25rem; color: var(--boujt-green); opacity: 0.8; transition: all 0.25s ease; } .boujt-card.has-dropdown:hover .corner-icon { opacity: 0; transform: scale(0.7); pointer-events: none; } .boujt-submenu { max-height: 0; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 0.45rem; margin-top: 0.8rem; opacity: 0; transform: translateY(-5px); transition: max-height 0.45s cubic-bezier(0.25, 1, 0.3, 1), opacity 0.35s ease, transform 0.4s ease; } .boujt-card:hover .boujt-submenu { max-height: 200px; opacity: 1; transform: translateY(0); } .submenu-item { width: 90%; background: rgba(255, 255, 255, 0.45); border: 1px solid rgba(255, 255, 255, 0.55); border-radius: 9999px; padding: 0.4rem 0.9rem; display: flex; align-items: center; gap: 0.45rem; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08); font-size: 0.9rem; line-height: 1.25; color: #1a1a1a; transition: all 0.25s ease; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-b5ed91b *//* =============================== */ /* 🌸 BOUJT DROPDOWN – LIQUID GLASS + MINT HOVER EDITION */ /* =============================== */ :root { --boujt-green: #27c19c; --glass-bg: rgba(255, 255, 255, 0.95); --glass-border: rgba(255, 255, 255, 0.45); --mint-glow: rgba(39, 193, 156, 0.25); --text-dark: #1a1a1a; } /* === Dropdownens bakgrundsyta === */ #e-n-menu-content-2353.BOUJT-dropdown { position: fixed !important; top: var(--boujt-mega-top, 65px); left: 50%; transform: translateX(-50%) translateY(-10px); width: clamp(300px, 60vw, 820px); padding: 2rem 2.4rem 3rem; border-radius: 1.8rem; background: var(--glass-bg); backdrop-filter: blur(25px) saturate(180%); -webkit-backdrop-filter: blur(25px) saturate(180%); border: 1px solid var(--glass-border); box-shadow: inset 0 0 8px rgba(255, 255, 255, 0.35), inset 0 0 18px rgba(255, 255, 255, 0.25), 0 18px 40px rgba(0, 0, 0, 0.12); overflow: hidden; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s ease; z-index: 99999; } /* Inner glow + mintglow */ #e-n-menu-content-2353.BOUJT-dropdown::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle at 50% 15%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0) 70%); mix-blend-mode: overlay; pointer-events: none; } #e-n-menu-content-2353.BOUJT-dropdown::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 12px rgba(39, 193, 156, 0.15), inset 0 0 12px rgba(39, 193, 156, 0.25); pointer-events: none; } @keyframes fadeSlideDown { 0% { opacity: 0; transform: translate(-50%, -10px) scale(0.98); } 100% { opacity: 1; transform: translate(-50%, 0) scale(1); } } /* === Kort === */ .boujt-card { position: relative; background: #fff; border-radius: 1.6rem; border: 1px solid rgba(255, 255, 255, 0.6); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05), 0 8px 22px rgba(0, 0, 0, 0.08); padding: 1.4rem 1.6rem 1.6rem; font-family: 'Arvo', serif; color: var(--text-dark); transition: all 0.6s ease; /* mjukare toning */ display: flex; flex-direction: column; justify-content: space-between; cursor: pointer; } /* Mintig effekt vid hover */ .boujt-card:hover { background: linear-gradient(to bottom, #d9f2f2, #b9e3e3); transform: translateY(-4px); box-shadow: 0 8px 26px rgba(0, 0, 0, 0.15), 0 0 14px var(--mint-glow); } /* === Kortinnehåll === */ .boujt-card-content { display: flex; align-items: flex-start; gap: 0.9rem; } /* === Ikon === */ .boujt-card-icon { background: #fff; border-radius: 50%; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 4px rgba(0,0,0,0.1); flex-shrink: 0; transition: all 0.25s ease; } .boujt-card-icon img { width: 30px; height: 30px; object-fit: contain; transition: filter 0.3s ease, transform 0.3s ease; } .boujt-card:hover .boujt-card-icon img { transform: scale(1.05); filter: drop-shadow(0 0 6px rgba(39, 193, 156, 0.6)); } /* === Text === */ .boujt-card-text h3 { font-weight: 700; font-size: 1rem; margin: 0 0 0.3rem; } .boujt-card-text p { font-size: 0.88rem; opacity: 0.85; margin: 0; line-height: 1.45; } /* === Plusikon === */ .corner-icon { position: absolute; right: 1.2rem; bottom: 1rem; font-size: 1.25rem; color: var(--boujt-green); opacity: 0.8; transition: all 0.25s ease; } .boujt-card.has-dropdown:hover .corner-icon { opacity: 0; transform: scale(0.7); pointer-events: none; } /* === Undermeny === */ .boujt-submenu { max-height: 0; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 0.45rem; margin-top: 0.8rem; opacity: 0; transform: translateY(-5px); transition: max-height 0.45s cubic-bezier(0.25, 1, 0.3, 1), opacity 0.35s ease, transform 0.4s ease; } .boujt-card:hover .boujt-submenu { max-height: 200px; opacity: 1; transform: translateY(0); } /* === Submenu-knappar === */ .submenu-item { width: 90%; background: rgba(255, 255, 255, 0.45); border: 1px solid rgba(255, 255, 255, 0.55); border-radius: 9999px; padding: 0.4rem 0.9rem; display: flex; align-items: center; gap: 0.45rem; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08); font-size: 0.9rem; line-height: 1.25; color: #1a1a1a; transition: all 0.25s ease; } .submenu-item .submenu-icon { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.9; transition: transform 0.2s ease, filter 0.2s ease; } /* Hover – subtil förstoring */ .submenu-item:hover { transform: scale(1.03); background: rgba(255, 255, 255, 0.6); box-shadow: 0 4px 10px rgba(39, 193, 156, 0.15); } .submenu-item:hover .submenu-icon { transform: scale(1.08); filter: drop-shadow(0 0 3px rgba(39, 193, 156, 0.4)); } /* === HÖRNIKONER – PLUS & PIL === */ .corner-icon { position: absolute; right: 1.2rem; bottom: 1rem; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; transition: all 0.4s ease; } .corner-icon img { width: 100%; height: 100%; opacity: 0.8; transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), filter 0.45s ease, opacity 0.4s ease; filter: drop-shadow(0 0 0 rgba(39,193,156,0)); } /* 🌿 PIL – för kort utan undermeny */ .boujt-card:not(.has-dropdown):hover .corner-icon img { transform: translateX(5px) scale(1.08); filter: drop-shadow(0 0 6px rgba(39,193,156,0.45)); opacity: 1; } /* === Extra polish: ikonerna "andas" när man hovrar === */ .corner-icon:hover img { transform: scale(1.12); filter: drop-shadow(0 0 10px rgba(39,193,156,0.6)); opacity: 1; } /* ============================================================ 🌸 BOUJT DROPDOWN – LIQUID GLASS + MINT HOVER EDITION ============================================================ */ :root { --boujt-green: #27c19c; --glass-bg: rgba(255, 255, 255, 0.95); --glass-border: rgba(255, 255, 255, 0.45); --mint-glow: rgba(39, 193, 156, 0.25); --text-dark: #1a1a1a; } /* === Dropdownens bakgrundsyta === */ #menubar-136 .BOUJT-dropdown { position: fixed !important; top: var(--boujt-mega-top, 65px); left: 50%; transform: translateX(-50%) translateY(-10px); width: clamp(300px, 60vw, 820px); padding: 2rem 2.4rem 3rem; border-radius: 1.8rem; background: var(--glass-bg); backdrop-filter: blur(25px) saturate(180%); -webkit-backdrop-filter: blur(25px) saturate(180%); border: 1px solid var(--glass-border); box-shadow: inset 0 0 8px rgba(255, 255, 255, 0.35), inset 0 0 18px rgba(255, 255, 255, 0.25), 0 18px 40px rgba(0, 0, 0, 0.12); overflow: hidden; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s ease; z-index: 99999; } /* Inner glow + mintglow */ #menubar-136 .BOUJT-dropdown::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle at 50% 15%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0) 70%); mix-blend-mode: overlay; pointer-events: none; } #menubar-136 .BOUJT-dropdown::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 12px rgba(39, 193, 156, 0.15), inset 0 0 12px rgba(39, 193, 156, 0.25); pointer-events: none; } /* Visa dropdown vid hover */ #menubar-136 .e-n-menu-item:hover .BOUJT-dropdown, #menubar-136 .e-n-menu-item.e-active .BOUJT-dropdown, #menubar-136 .BOUJT-dropdown:hover { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: translateX(-50%) translateY(0); animation: fadeSlideDown .35s ease forwards; } @keyframes fadeSlideDown { 0% { opacity: 0; transform: translate(-50%, -10px) scale(0.98); } 100% { opacity: 1; transform: translate(-50%, 0) scale(1); } } /* /* ============================================================ 🌿 BOUJT DROPDOWN – GRID & KORTSTIL ============================================================ */ .boujt-dropdown-wrap { background: rgba(255, 255, 255, 0.6); border: 1px solid rgba(255, 255, 255, 0.85); border-radius: 2rem; padding: 2.4rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.35), 0 20px 45px rgba(0, 0, 0, 0.1); backdrop-filter: blur(25px) saturate(180%); -webkit-backdrop-filter: blur(25px) saturate(180%); position: relative; } /* ============================================================ 💎 UPPDATERAD .boujt-card (MATCHAR boujt_answers) – DEFAULT ============================================================ */ .boujt-card { position: relative; background: radial-gradient( circle at 40% 15%, rgba(255,255,255,0.95) 0%, rgba(248,244,255,0.75) 55%, rgba(244,238,255,0.60) 100% ); border: 1px solid rgba(255,255,255,0.70); border-radius: 1.6rem; padding: 1.6rem 1.8rem; /* behåller din padding */ backdrop-filter: blur(22px) saturate(180%); -webkit-backdrop-filter: blur(22px) saturate(180%); box-shadow: inset 0 0 12px rgba(255,255,255,0.55), 0 6px 14px rgba(0,0,0,0.06); display: flex; flex-direction: column; justify-content: space-between; gap: .6rem; cursor: pointer; transition: all .38s ease; } /* ============================================================ 💎 UPPDATERAD KORT HOVER – EXAKT BILD 2 ============================================================ */ .boujt-card:hover { background: linear-gradient( 180deg, rgba(215,240,240,0.92) 0%, rgba(195,230,230,0.92) 100% ); border-color: rgba(255,255,255,0.9); transform: translateY(-4px); box-shadow: inset 0 0 14px rgba(255,255,255,0.55), 0 10px 26px rgba(0,0,0,0.14), 0 0 18px var(--mint-glow); } /* ============================================================ 🔻 RESTEN AV ORIGINELLA KORTSTILAR (ikoner, text, submenu, etc) ============================================================ */ .boujt-card-content { display: flex; align-items: flex-start; gap: 0.9rem; } .boujt-card-icon { background: #fff; border-radius: 50%; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 4px rgba(0,0,0,0.1); flex-shrink: 0; transition: all 0.25s ease; } .boujt-card-icon img { width: 30px; height: 30px; object-fit: contain; transition: filter 0.3s ease, transform 0.3s ease; } .boujt-card:hover .boujt-card-icon img { transform: scale(1.06); filter: drop-shadow(0 0 6px rgba(39,193,156,0.55)); } .boujt-card-text h3 { font-weight: 700; font-size: 1rem; margin: 0 0 0.3rem; } .boujt-card-text p { font-size: 0.88rem; opacity: 0.85; margin: 0; line-height: 1.45; } .corner-icon { position: absolute; right: 1.2rem; bottom: 1rem; font-size: 1.25rem; color: var(--boujt-green); opacity: 0.8; transition: all 0.25s ease; } .boujt-card.has-dropdown:hover .corner-icon { opacity: 0; transform: scale(0.7); pointer-events: none; } .boujt-submenu { max-height: 0; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 0.45rem; margin-top: 0.8rem; opacity: 0; transform: translateY(-5px); transition: max-height 0.45s cubic-bezier(0.25, 1, 0.3, 1), opacity 0.35s ease, transform 0.4s ease; } .boujt-card:hover .boujt-submenu { max-height: 200px; opacity: 1; transform: translateY(0); } .submenu-item { width: 90%; background: rgba(255, 255, 255, 0.45); border: 1px solid rgba(255, 255, 255, 0.55); border-radius: 9999px; padding: 0.4rem 0.9rem; display: flex; align-items: center; gap: 0.45rem; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08); font-size: 0.9rem; line-height: 1.25; color: #1a1a1a; transition: all 0.25s ease; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-b5ed91b *//* =============================== */ /* 🌸 BOUJT DROPDOWN – LIQUID GLASS + MINT HOVER EDITION */ /* =============================== */ :root { --boujt-green: #27c19c; --glass-bg: rgba(255, 255, 255, 0.95); --glass-border: rgba(255, 255, 255, 0.45); --mint-glow: rgba(39, 193, 156, 0.25); --text-dark: #1a1a1a; } /* === Dropdownens bakgrundsyta === */ #e-n-menu-content-2353.BOUJT-dropdown { position: fixed !important; top: var(--boujt-mega-top, 65px); left: 50%; transform: translateX(-50%) translateY(-10px); width: clamp(300px, 60vw, 820px); padding: 2rem 2.4rem 3rem; border-radius: 1.8rem; background: var(--glass-bg); backdrop-filter: blur(25px) saturate(180%); -webkit-backdrop-filter: blur(25px) saturate(180%); border: 1px solid var(--glass-border); box-shadow: inset 0 0 8px rgba(255, 255, 255, 0.35), inset 0 0 18px rgba(255, 255, 255, 0.25), 0 18px 40px rgba(0, 0, 0, 0.12); overflow: hidden; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s ease; z-index: 99999; } /* Inner glow + mintglow */ #e-n-menu-content-2353.BOUJT-dropdown::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle at 50% 15%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0) 70%); mix-blend-mode: overlay; pointer-events: none; } #e-n-menu-content-2353.BOUJT-dropdown::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 12px rgba(39, 193, 156, 0.15), inset 0 0 12px rgba(39, 193, 156, 0.25); pointer-events: none; } @keyframes fadeSlideDown { 0% { opacity: 0; transform: translate(-50%, -10px) scale(0.98); } 100% { opacity: 1; transform: translate(-50%, 0) scale(1); } } /* === Kort === */ .boujt-card { position: relative; background: #fff; border-radius: 1.6rem; border: 1px solid rgba(255, 255, 255, 0.6); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05), 0 8px 22px rgba(0, 0, 0, 0.08); padding: 1.4rem 1.6rem 1.6rem; font-family: 'Arvo', serif; color: var(--text-dark); transition: all 0.6s ease; /* mjukare toning */ display: flex; flex-direction: column; justify-content: space-between; cursor: pointer; } /* Mintig effekt vid hover */ .boujt-card:hover { background: linear-gradient(to bottom, #d9f2f2, #b9e3e3); transform: translateY(-4px); box-shadow: 0 8px 26px rgba(0, 0, 0, 0.15), 0 0 14px var(--mint-glow); } /* === Kortinnehåll === */ .boujt-card-content { display: flex; align-items: flex-start; gap: 0.9rem; } /* === Ikon === */ .boujt-card-icon { background: #fff; border-radius: 50%; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 4px rgba(0,0,0,0.1); flex-shrink: 0; transition: all 0.25s ease; } .boujt-card-icon img { width: 30px; height: 30px; object-fit: contain; transition: filter 0.3s ease, transform 0.3s ease; } .boujt-card:hover .boujt-card-icon img { transform: scale(1.05); filter: drop-shadow(0 0 6px rgba(39, 193, 156, 0.6)); } /* === Text === */ .boujt-card-text h3 { font-weight: 700; font-size: 1rem; margin: 0 0 0.3rem; } .boujt-card-text p { font-size: 0.88rem; opacity: 0.85; margin: 0; line-height: 1.45; } /* === Plusikon === */ .corner-icon { position: absolute; right: 1.2rem; bottom: 1rem; font-size: 1.25rem; color: var(--boujt-green); opacity: 0.8; transition: all 0.25s ease; } .boujt-card.has-dropdown:hover .corner-icon { opacity: 0; transform: scale(0.7); pointer-events: none; } /* === Undermeny === */ .boujt-submenu { max-height: 0; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 0.45rem; margin-top: 0.8rem; opacity: 0; transform: translateY(-5px); transition: max-height 0.45s cubic-bezier(0.25, 1, 0.3, 1), opacity 0.35s ease, transform 0.4s ease; } .boujt-card:hover .boujt-submenu { max-height: 200px; opacity: 1; transform: translateY(0); } /* === Submenu-knappar === */ .submenu-item { width: 90%; background: rgba(255, 255, 255, 0.45); border: 1px solid rgba(255, 255, 255, 0.55); border-radius: 9999px; padding: 0.4rem 0.9rem; display: flex; align-items: center; gap: 0.45rem; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08); font-size: 0.9rem; line-height: 1.25; color: #1a1a1a; transition: all 0.25s ease; } .submenu-item .submenu-icon { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.9; transition: transform 0.2s ease, filter 0.2s ease; } /* Hover – subtil förstoring */ .submenu-item:hover { transform: scale(1.03); background: rgba(255, 255, 255, 0.6); box-shadow: 0 4px 10px rgba(39, 193, 156, 0.15); } .submenu-item:hover .submenu-icon { transform: scale(1.08); filter: drop-shadow(0 0 3px rgba(39, 193, 156, 0.4)); } /* === HÖRNIKONER – PLUS & PIL === */ .corner-icon { position: absolute; right: 1.2rem; bottom: 1rem; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; transition: all 0.4s ease; } .corner-icon img { width: 100%; height: 100%; opacity: 0.8; transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), filter 0.45s ease, opacity 0.4s ease; filter: drop-shadow(0 0 0 rgba(39,193,156,0)); } /* 🌿 PIL – för kort utan undermeny */ .boujt-card:not(.has-dropdown):hover .corner-icon img { transform: translateX(5px) scale(1.08); filter: drop-shadow(0 0 6px rgba(39,193,156,0.45)); opacity: 1; } /* === Extra polish: ikonerna "andas" när man hovrar === */ .corner-icon:hover img { transform: scale(1.12); filter: drop-shadow(0 0 10px rgba(39,193,156,0.6)); opacity: 1; } /* ============================================================ 🌸 BOUJT DROPDOWN – LIQUID GLASS + MINT HOVER EDITION ============================================================ */ :root { --boujt-green: #27c19c; --glass-bg: rgba(255, 255, 255, 0.95); --glass-border: rgba(255, 255, 255, 0.45); --mint-glow: rgba(39, 193, 156, 0.25); --text-dark: #1a1a1a; } /* === Dropdownens bakgrundsyta === */ #menubar-136 .BOUJT-dropdown { position: fixed !important; top: var(--boujt-mega-top, 65px); left: 50%; transform: translateX(-50%) translateY(-10px); width: clamp(300px, 60vw, 820px); padding: 2rem 2.4rem 3rem; border-radius: 1.8rem; background: var(--glass-bg); backdrop-filter: blur(25px) saturate(180%); -webkit-backdrop-filter: blur(25px) saturate(180%); border: 1px solid var(--glass-border); box-shadow: inset 0 0 8px rgba(255, 255, 255, 0.35), inset 0 0 18px rgba(255, 255, 255, 0.25), 0 18px 40px rgba(0, 0, 0, 0.12); overflow: hidden; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s ease; z-index: 99999; } /* Inner glow + mintglow */ #menubar-136 .BOUJT-dropdown::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle at 50% 15%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0) 70%); mix-blend-mode: overlay; pointer-events: none; } #menubar-136 .BOUJT-dropdown::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 12px rgba(39, 193, 156, 0.15), inset 0 0 12px rgba(39, 193, 156, 0.25); pointer-events: none; } /* Visa dropdown vid hover */ #menubar-136 .e-n-menu-item:hover .BOUJT-dropdown, #menubar-136 .e-n-menu-item.e-active .BOUJT-dropdown, #menubar-136 .BOUJT-dropdown:hover { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: translateX(-50%) translateY(0); animation: fadeSlideDown .35s ease forwards; } @keyframes fadeSlideDown { 0% { opacity: 0; transform: translate(-50%, -10px) scale(0.98); } 100% { opacity: 1; transform: translate(-50%, 0) scale(1); } } /* /* ============================================================ 🌿 BOUJT DROPDOWN – GRID & KORTSTIL ============================================================ */ .boujt-dropdown-wrap { background: rgba(255, 255, 255, 0.6); border: 1px solid rgba(255, 255, 255, 0.85); border-radius: 2rem; padding: 2.4rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.35), 0 20px 45px rgba(0, 0, 0, 0.1); backdrop-filter: blur(25px) saturate(180%); -webkit-backdrop-filter: blur(25px) saturate(180%); position: relative; } /* ============================================================ 💎 UPPDATERAD .boujt-card (MATCHAR boujt_answers) – DEFAULT ============================================================ */ .boujt-card { position: relative; background: radial-gradient( circle at 40% 15%, rgba(255,255,255,0.95) 0%, rgba(248,244,255,0.75) 55%, rgba(244,238,255,0.60) 100% ); border: 1px solid rgba(255,255,255,0.70); border-radius: 1.6rem; padding: 1.6rem 1.8rem; /* behåller din padding */ backdrop-filter: blur(22px) saturate(180%); -webkit-backdrop-filter: blur(22px) saturate(180%); box-shadow: inset 0 0 12px rgba(255,255,255,0.55), 0 6px 14px rgba(0,0,0,0.06); display: flex; flex-direction: column; justify-content: space-between; gap: .6rem; cursor: pointer; transition: all .38s ease; } /* ============================================================ 💎 UPPDATERAD KORT HOVER – EXAKT BILD 2 ============================================================ */ .boujt-card:hover { background: linear-gradient( 180deg, rgba(215,240,240,0.92) 0%, rgba(195,230,230,0.92) 100% ); border-color: rgba(255,255,255,0.9); transform: translateY(-4px); box-shadow: inset 0 0 14px rgba(255,255,255,0.55), 0 10px 26px rgba(0,0,0,0.14), 0 0 18px var(--mint-glow); } /* ============================================================ 🔻 RESTEN AV ORIGINELLA KORTSTILAR (ikoner, text, submenu, etc) ============================================================ */ .boujt-card-content { display: flex; align-items: flex-start; gap: 0.9rem; } .boujt-card-icon { background: #fff; border-radius: 50%; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 4px rgba(0,0,0,0.1); flex-shrink: 0; transition: all 0.25s ease; } .boujt-card-icon img { width: 30px; height: 30px; object-fit: contain; transition: filter 0.3s ease, transform 0.3s ease; } .boujt-card:hover .boujt-card-icon img { transform: scale(1.06); filter: drop-shadow(0 0 6px rgba(39,193,156,0.55)); } .boujt-card-text h3 { font-weight: 700; font-size: 1rem; margin: 0 0 0.3rem; } .boujt-card-text p { font-size: 0.88rem; opacity: 0.85; margin: 0; line-height: 1.45; } .corner-icon { position: absolute; right: 1.2rem; bottom: 1rem; font-size: 1.25rem; color: var(--boujt-green); opacity: 0.8; transition: all 0.25s ease; } .boujt-card.has-dropdown:hover .corner-icon { opacity: 0; transform: scale(0.7); pointer-events: none; } .boujt-submenu { max-height: 0; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 0.45rem; margin-top: 0.8rem; opacity: 0; transform: translateY(-5px); transition: max-height 0.45s cubic-bezier(0.25, 1, 0.3, 1), opacity 0.35s ease, transform 0.4s ease; } .boujt-card:hover .boujt-submenu { max-height: 200px; opacity: 1; transform: translateY(0); } .submenu-item { width: 90%; background: rgba(255, 255, 255, 0.45); border: 1px solid rgba(255, 255, 255, 0.55); border-radius: 9999px; padding: 0.4rem 0.9rem; display: flex; align-items: center; gap: 0.45rem; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08); font-size: 0.9rem; line-height: 1.25; color: #1a1a1a; transition: all 0.25s ease; }/* End custom CSS */