.elementor-637 .elementor-element.elementor-element-a61c850{--display:flex;--min-height:100vh;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--background-transition:0.3s;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-637 .elementor-element.elementor-element-a61c850:hover::before, .elementor-637 .elementor-element.elementor-element-a61c850:hover > .elementor-background-video-container::before, .elementor-637 .elementor-element.elementor-element-a61c850:hover > .e-con-inner > .elementor-background-video-container::before, .elementor-637 .elementor-element.elementor-element-a61c850 > .elementor-background-slideshow:hover::before, .elementor-637 .elementor-element.elementor-element-a61c850 > .e-con-inner > .elementor-background-slideshow:hover::before{--background-overlay:'';background-color:var( --e-global-color-primary );}.elementor-637 .elementor-element.elementor-element-a61c850:hover{--overlay-opacity:0.49;}.elementor-637 .elementor-element.elementor-element-a61c850:hover::before{filter:brightness( 100% ) contrast( 100% ) saturate( 100% ) blur( 0px ) hue-rotate( 0deg );}.elementor-637 .elementor-element.elementor-element-a61c850, .elementor-637 .elementor-element.elementor-element-a61c850::before{--border-transition:0.3s;}.elementor-637 .elementor-element.elementor-element-67fa7e2{--display:flex;--min-height:92vh;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--justify-content:flex-end;--align-items:center;--background-transition:0.3s;}.elementor-637 .elementor-element.elementor-element-d4dd4ec .elementor-heading-title{font-family:"Ubuntu", Sans-serif;font-size:42px;font-weight:800;text-transform:none;font-style:normal;text-decoration:none;}.elementor-637 .elementor-element.elementor-element-9381f48 .elementor-icon-wrapper{text-align:center;}.elementor-637 .elementor-element.elementor-element-9381f48 > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-637 .elementor-element.elementor-element-a87186c{--display:flex;--min-height:100vh;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--justify-content:center;--align-items:flex-start;--background-transition:0.3s;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-637 .elementor-element.elementor-element-31b97d2{--display:grid;--e-con-grid-template-columns:repeat(1, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;--justify-items:start;--align-items:center;--background-transition:0.3s;}.elementor-637 .elementor-element.elementor-element-ad412c7{color:#000000;font-family:"Montserrat", Sans-serif;font-size:20px;font-weight:400;text-transform:none;font-style:normal;text-decoration:none;}.elementor-637 .elementor-element.elementor-element-b7a94b2{--display:flex;--min-height:100vh;--justify-content:center;--background-transition:0.3s;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-637 .elementor-element.elementor-element-5241193{--display:flex;--background-transition:0.3s;}.elementor-637 .elementor-element.elementor-element-5538f29 .elementor-heading-title{color:#0E5B94;font-family:"Poppins", Sans-serif;font-size:40px;font-weight:800;text-transform:none;font-style:normal;text-decoration:none;}.elementor-637 .elementor-element.elementor-element-6bbf40d .elementor-icon-list-icon i{transition:color 0.3s;}.elementor-637 .elementor-element.elementor-element-6bbf40d .elementor-icon-list-icon svg{transition:fill 0.3s;}.elementor-637 .elementor-element.elementor-element-6bbf40d{--e-icon-list-icon-size:14px;--icon-vertical-offset:0px;}.elementor-637 .elementor-element.elementor-element-6bbf40d .elementor-icon-list-item > .elementor-icon-list-text, .elementor-637 .elementor-element.elementor-element-6bbf40d .elementor-icon-list-item > a{font-family:"Montserrat", Sans-serif;font-size:16px;font-weight:400;text-transform:none;font-style:normal;text-decoration:none;}.elementor-637 .elementor-element.elementor-element-6bbf40d .elementor-icon-list-text{transition:color 0.3s;}.elementor-637 .elementor-element.elementor-element-bf3740c{--display:flex;--min-height:100vh;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--justify-content:center;--align-items:flex-start;--background-transition:0.3s;}.elementor-637 .elementor-element.elementor-element-668306b{--display:grid;--e-con-grid-template-columns:repeat(2, 1fr);--e-con-grid-template-rows:repeat(2, 1fr);--grid-auto-flow:row;--background-transition:0.3s;}.elementor-637 .elementor-element.elementor-element-895a5da.elementor-position-right .elementor-image-box-img{margin-left:19px;}.elementor-637 .elementor-element.elementor-element-895a5da.elementor-position-left .elementor-image-box-img{margin-right:19px;}.elementor-637 .elementor-element.elementor-element-895a5da.elementor-position-top .elementor-image-box-img{margin-bottom:19px;}.elementor-637 .elementor-element.elementor-element-895a5da .elementor-image-box-title{margin-bottom:0px;}.elementor-637 .elementor-element.elementor-element-895a5da .elementor-image-box-wrapper .elementor-image-box-img{width:50%;}.elementor-637 .elementor-element.elementor-element-895a5da .elementor-image-box-img img{transition-duration:0.3s;}.elementor-637 .elementor-element.elementor-element-895a5da .elementor-image-box-description{font-family:"Montserrat", Sans-serif;font-size:16px;font-weight:400;text-transform:none;font-style:normal;text-decoration:none;}.elementor-637 .elementor-element.elementor-element-76c6759.elementor-position-right .elementor-image-box-img{margin-left:19px;}.elementor-637 .elementor-element.elementor-element-76c6759.elementor-position-left .elementor-image-box-img{margin-right:19px;}.elementor-637 .elementor-element.elementor-element-76c6759.elementor-position-top .elementor-image-box-img{margin-bottom:19px;}.elementor-637 .elementor-element.elementor-element-76c6759 .elementor-image-box-title{margin-bottom:0px;}.elementor-637 .elementor-element.elementor-element-76c6759 .elementor-image-box-wrapper .elementor-image-box-img{width:50%;}.elementor-637 .elementor-element.elementor-element-76c6759 .elementor-image-box-img img{transition-duration:0.3s;}.elementor-637 .elementor-element.elementor-element-a88b0a0.elementor-position-right .elementor-image-box-img{margin-left:19px;}.elementor-637 .elementor-element.elementor-element-a88b0a0.elementor-position-left .elementor-image-box-img{margin-right:19px;}.elementor-637 .elementor-element.elementor-element-a88b0a0.elementor-position-top .elementor-image-box-img{margin-bottom:19px;}.elementor-637 .elementor-element.elementor-element-a88b0a0 .elementor-image-box-title{margin-bottom:0px;}.elementor-637 .elementor-element.elementor-element-a88b0a0 .elementor-image-box-wrapper .elementor-image-box-img{width:50%;}.elementor-637 .elementor-element.elementor-element-a88b0a0 .elementor-image-box-img img{transition-duration:0.3s;}.elementor-637 .elementor-element.elementor-element-d1957b5.elementor-position-right .elementor-image-box-img{margin-left:19px;}.elementor-637 .elementor-element.elementor-element-d1957b5.elementor-position-left .elementor-image-box-img{margin-right:19px;}.elementor-637 .elementor-element.elementor-element-d1957b5.elementor-position-top .elementor-image-box-img{margin-bottom:19px;}.elementor-637 .elementor-element.elementor-element-d1957b5 .elementor-image-box-title{margin-bottom:0px;}.elementor-637 .elementor-element.elementor-element-d1957b5 .elementor-image-box-wrapper .elementor-image-box-img{width:50%;}.elementor-637 .elementor-element.elementor-element-d1957b5 .elementor-image-box-img img{transition-duration:0.3s;}@media(max-width:1024px){.elementor-637 .elementor-element.elementor-element-31b97d2{--grid-auto-flow:row;}.elementor-637 .elementor-element.elementor-element-668306b{--grid-auto-flow:row;}}@media(min-width:768px){.elementor-637 .elementor-element.elementor-element-a61c850{--width:100%;}.elementor-637 .elementor-element.elementor-element-67fa7e2{--content-width:900px;}.elementor-637 .elementor-element.elementor-element-31b97d2{--content-width:100%;}}@media(max-width:767px){.elementor-637 .elementor-element.elementor-element-31b97d2{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-637 .elementor-element.elementor-element-668306b{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-637 .elementor-element.elementor-element-895a5da .elementor-image-box-img{margin-bottom:19px;}.elementor-637 .elementor-element.elementor-element-76c6759 .elementor-image-box-img{margin-bottom:19px;}.elementor-637 .elementor-element.elementor-element-a88b0a0 .elementor-image-box-img{margin-bottom:19px;}.elementor-637 .elementor-element.elementor-element-d1957b5 .elementor-image-box-img{margin-bottom:19px;}}/* Start custom CSS for heading, class: .elementor-element-d4dd4ec *//* Target only your heading widget */ .elementor-element-d4dd4ec { text-align: center; } /* The text */ .elementor-element-d4dd4ec .elementor-heading-title { /* Typography */ font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, system-ui, sans-serif; font-weight: 900 !important; /* güçlü ama zarif */ font-size: clamp(40px, 4.2vw, 45px) !important; line-height: 1.28 !important; letter-spacing: 0.2px !important; color: #fff !important; margin: 0 !important; /* Readability & rhythm */ display: inline-block; max-width: 30ch; /* satır uzunluğunu kısalt */ text-wrap: balance; /* satırları estetik böl */ hyphens: auto; /* Glass chip */ padding: .85em 1.25em; border-radius: 18px; background: linear-gradient( to bottom, rgba(15, 17, 19, .22), rgba(15, 17, 19, .28) ); /* daha hafif ve katmansı */ -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%); border: 1px solid rgba(255,255,255,.16); /* Subtle depth (çok hafif) */ box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, /* üst iç highlight */ 0 14px 28px rgba(0,0,0,.18), 0 6px 12px rgba(0,0,0,.12); background-clip: padding-box; position: relative; } /* Edge fade: kutu kenarlarının fotoğrafa “erimesi” (daha premium görünüm) */ .elementor-element-d4dd4ec .elementor-heading-title::before { content: ""; position: absolute; inset: -1px; border-radius: 18px; pointer-events: none; background: radial-gradient(120% 180% at 50% 50%, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 70%); mix-blend-mode: overlay; opacity: .6; } /* Çok açık/fazla parlak fotoğraflarda okumayı garantile */ @media (prefers-color-scheme: light) { .elementor-element-d4dd4ec .elementor-heading-title { text-shadow: 0 1px 2px rgba(0,0,0,.35); } } /* Mobile refinements */ @media (max-width: 768px) { .elementor-element-d4dd4ec .elementor-heading-title { font-size: clamp(21px, 5.2vw, 28px) !important; padding: .75em 1em; border-radius: 14px; max-width: 22ch; /* biraz daha dar */ } }/* End custom CSS */ /* Start custom CSS for icon, class: .elementor-element-9381f48 *//* Sadece bu ok widget'ı */ .elementor-element-9381f48 .elementor-icon{ /* kutu yok */ background: none !important; border: none !important; box-shadow: none !important; display: inline-flex; align-items: center; justify-content: center; padding: 8px; /* küçük rahat alan */ line-height: 1; animation: chevFloat 2.2s ease-in-out infinite; pointer-events: none; /* tıklanmayacaksa */ } /* FA tabanlı ikon — bembeyaz ve “kalın hissi” için stroke + shadow */ .elementor-element-9381f48 .elementor-icon i{ color: #fff !important; font-size: 40px; /* masaüstü boyut */ -webkit-text-stroke: 1px rgba(255,255,255,.35); /* beyazı kalınlaştırır */ text-shadow: 0 1px 2px rgba(0,0,0,.45), 0 6px 16px rgba(0,0,0,.30); /* her zeminde okunur */ } /* SVG tabanlı ikon olursa — aynı görünüm */ .elementor-element-9381f48 .elementor-icon svg{ width: 40px; height: 40px; fill: #fff !important; stroke: #fff !important; stroke-width: 1.5; /* çizgiyi kalınlaştır */ filter: drop-shadow(0 1px 2px rgba(0,0,0,.45)) drop-shadow(0 6px 16px rgba(0,0,0,.30)); } /* Daha önce eklediğimiz pseudo çizgileri tamamen kapat */ .elementor-element-9381f48 .elementor-icon::before, .elementor-element-9381f48 .elementor-icon::after{ content: none !important; } /* Yumuşak aşağı-yukarı hareket */ @keyframes chevFloat{ 0% { transform: translateY(0); } 50% { transform: translateY(7px); } 100% { transform: translateY(0); } } /* Mobil boyut */ @media (max-width: 768px){ .elementor-element-9381f48 .elementor-icon i{ font-size: 28px; -webkit-text-stroke: .8px rgba(255,255,255,.35); } .elementor-element-9381f48 .elementor-icon svg{ width: 28px; height: 28px; stroke-width: 1.2; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-a61c850 */.page .entry-title { display: none; }/* End custom CSS */ /* Start custom CSS for text-editor, class: .elementor-element-ad412c7 *//* ——— Signature Intro: ONLY .elementor-element-cb017b8 ——— */ .elementor .elementor-element-cb017b8{ position: relative !important; z-index: 20 !important; /* metni overlay'lerin üstüne çıkar */ isolation: isolate !important; /* parent blend/opacity etkisini kes */ opacity: 1 !important; mix-blend-mode: normal !important; filter: none !important; /* senin mevcut düzenin */ max-width: 100ch !important; padding: 30px 30px 30px 24px !important; /* left rail alanı */ } /* İç sarmalayıcıları da aynı stacking context'e al */ .elementor .elementor-element-cb017b8 .elementor-widget-container, .elementor .elementor-element-cb017b8 .elementor-text-editor{ position: relative !important; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, system-ui, sans-serif; z-index: 20 !important; opacity: 1 !important; mix-blend-mode: normal !important; filter: none !important; padding: 0 !important; margin: 0 !important; } /* TEXT: her şeyi (inline style dahil) siyaha zorla */ .elementor .elementor-element-cb017b8 .elementor-text-editor, .elementor .elementor-element-cb017b8 .elementor-text-editor *, .elementor .elementor-element-cb017b8 .elementor-text-editor [style*="color"], .elementor .elementor-element-cb017b8 .elementor-text-editor [style*="opacity"]{ color: #000 !important; -webkit-text-fill-color: #000 !important; /* WebKit inline renklerini ezer */ opacity: 1 !important; mix-blend-mode: normal !important; filter: none !important; -webkit-text-stroke: 0 !important; font-family: "Inter","Segoe UI",Roboto,system-ui,-apple-system,"Poppins","Satoshi",sans-serif !important; font-weight: 400 !important; font-size: clamp(18px, 1.2vw, 20px) !important; line-height: 1.75 !important; letter-spacing: .2px !important; } /* Elementor'un global değişkenleri bu blokta siyah olsun (bazı temalar var() kullanır) */ .elementor .elementor-element-cb017b8{ --e-global-color-text: #000 !important; } /* Paragraflar: ritim */ .elementor .elementor-element-cb017b8 .elementor-text-editor p{ margin: 0 !important; hyphens: auto; text-wrap: balance; } .elementor .elementor-element-cb017b8 .elementor-text-editor p + p{ margin-top: .95em !important; } /* Vurgular ve linkler de siyah kalsın */ .elementor .elementor-element-cb017b8 .elementor-text-editor strong, .elementor .elementor-element-cb017b8 .elementor-text-editor b{ font-weight: 600 !important; color:#000 !important; -webkit-text-fill-color:#000 !important; } .elementor .elementor-element-cb017b8 .elementor-text-editor em, .elementor .elementor-element-cb017b8 .elementor-text-editor i{ font-style: italic !important; color:#000 !important; -webkit-text-fill-color:#000 !important; } .elementor .elementor-element-cb017b8 .elementor-text-editor a{ color:#000 !important; -webkit-text-fill-color:#000 !important; text-decoration: underline; text-underline-offset: 2px; } /* Sol “signature rail” (senin ayarın) */ .elementor .elementor-element-cb017b8::before{ content:""; position:absolute; left:0; top:.3em; bottom:.3em; width:4px; border-radius:999px; background: linear-gradient(180deg,#4facfe,#00f2fe); background-size: 100% 200%; animation: vaRail 8s ease-in-out infinite alternate; box-shadow: 0 6px 16px rgba(0,0,0,.06); opacity:.95; } /* Alt “swoosh” (senin ayarın) */ .elementor .elementor-element-cb017b8::after{ content:""; position:absolute; left:24px; right:auto; bottom:-18px; width: min(720px, 92%); height: 28px; pointer-events:none; background: url("data:image/svg+xml;utf8,\ \ \ \ \ \ \ ") no-repeat 0 50% / 100% 100%; opacity:.92; filter: drop-shadow(0 3px 10px rgba(79,172,254,.18)); } /* Rail shimmer */ @keyframes vaRail{ 0% { filter: saturate(110%) brightness(1); } 100% { filter: saturate(140%) brightness(1.05); } } /* Optional: swoosh’u ortalamak için .sig-center sınıfı ekleyebilirsin */ .elementor .elementor-element-cb017b8.sig-center::after{ left:50%; transform: translateX(-50%); } /* Mobile */ @media (max-width: 768px){ .elementor .elementor-element-cb017b8{ max-width: 54ch !important; margin: 32px auto 90px !important; /* swoosh alanı */ padding-left: 18px !important; } .elementor .elementor-element-cb017b8::after{ left:18px; width: min(420px, 95%); height: 18px; bottom: -12px; } .elementor .elementor-element-cb017b8 .elementor-text-editor, .elementor .elementor-element-cb017b8 .elementor-text-editor *{ font-size: 17px !important; line-height: 1.75 !important; } } /* Dark mode */ @media (prefers-color-scheme: dark){ .elementor .elementor-element-cb017b8 .elementor-text-editor, .elementor .elementor-element-cb017b8 .elementor-text-editor *{ color:#e5e7eb !important; -webkit-text-fill-color:#e5e7eb !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-31b97d2 *//* ===== Signature for GRID: .elementor-element-31b97d2 ===== */ .elementor .elementor-element-31b97d2{ position: relative !important; padding-left: 20px !important; /* sol şerit için boşluk */ /* grid düzenine dokunmuyoruz; display/grid ayarları aynı kalır */ } /* Sol marka şeridi */ .elementor .elementor-element-31b97d2::before{ content:""; position:absolute; left:0; top:.3em; bottom:.3em; width:4px; border-radius:999px; background: linear-gradient(180deg,#0f5132,#22a06b); background-size:100% 200%; animation: gridRail 8s ease-in-out infinite alternate; box-shadow: 0 6px 16px rgba(0,0,0,.06); opacity:.95; pointer-events:none; z-index: 1; } /* Altta geniş “swoosh” */ .elementor .elementor-element-31b97d2::after{ content:""; position:absolute; left:24px; right:auto; bottom:-18px; /* rail boşluğu kadar içeriden başla */ width: min(850px, 92%); /* konteyner genişliğine uyumlu */ height: 28px; pointer-events:none; z-index: 1; background: url("data:image/svg+xml;utf8,\ \ \ \ \ \ \ ") no-repeat 0 50% / 100% 100%; opacity:.92; filter: drop-shadow(0 3px 10px rgba(79,172,254,.18)); } /* İsteğe bağlı: swoosh’u ortalamak istersen, bu elemana “sig-center” sınıfı ekle */ .elementor .elementor-element-31b97d2.sig-center::after{ left:50%; transform: translateX(-50%); } /* Hafif shimmer animasyonu (sol şerit) */ @keyframes gridRail{ 0% { filter: saturate(110%) brightness(1); } 100% { filter: saturate(140%) brightness(1.05); } } /* Mobil uyarlama */ @media (max-width:768px){ .elementor .elementor-element-31b97d2{ padding-left: 18px !important; } .elementor .elementor-element-31b97d2::after{ left:18px; width: min(420px, 95%); height: 18px; bottom:-12px; } }/* End custom CSS */ /* Start custom CSS for heading, class: .elementor-element-5538f29 *//* ===== Guide-Us Heading — Kyoto-style Coral Underline ===== */ /* Scope: ONLY #guide-us-heading */ #guide-us-heading{ /* palette */ --ink: #0E5B94; /* underline (coral) */ --u1: #ec7681; /* coral start */ --u2: #ffb3bd; /* soft blush end */ /* underline sizing */ --u-w: 66%; /* width of the soft ribbon */ --u-h: 10px; /* height of the soft ribbon */ position: relative; isolation: isolate; text-align: center; } #guide-us-heading .elementor-widget-container{ margin: 0 !important; padding: 0 !important; } #guide-us-heading .elementor-heading-title{ position: relative; display: inline-block; color: var(--ink); font-weight: 800; letter-spacing: .2px; line-height: 1.1; font-size: clamp(28px, 4vw, 38px); margin: 0; padding: 0; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* remove any previous glass ribbon */ #guide-us-heading .elementor-heading-title::before{ content: none !important; } /* Kyoto-style soft ribbon underline (coral) */ #guide-us-heading .elementor-heading-title::after{ content:""; position:absolute; left:-6px; /* slight offset like your Kyoto card */ bottom:-6px; width: var(--u-w); height: var(--u-h); border-radius: 999px; background: linear-gradient(90deg, var(--u1), var(--u2)); opacity:.22; /* a touch stronger for coral */ pointer-events:none; } /* optional: nudge a bit wider on very large screens */ @media (min-width: 1280px){ #guide-us-heading{ --u-w: 70%; } } /* reduced motion (future-proof) */ @media (prefers-reduced-motion: reduce){ #guide-us-heading *{ transition: none !important; } }/* End custom CSS */ /* Start custom CSS for icon-list, class: .elementor-element-6bbf40d *//* ===== Guide-Us List — professional minimal ===== */ #guide-us-list{ /* palette */ --ink: #0b1220; /* body text */ --mint: #38b980; /* accent */ --ring: rgba(56,185,128,.22); /* rhythm */ --row-gap: clamp(10px,1.2vw,16px); --col-gap: clamp(28px,4vw,64px); --bullet: 7px; /* dot size */ } #guide-us-list .elementor-widget-container{ margin: 0 !important; padding: 0 !important; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, system-ui, sans-serif; } /* layout */ #guide-us-list .elementor-icon-list-items{ display: grid; grid-template-columns: 1fr; row-gap: var(--row-gap); column-gap: var(--col-gap); list-style: none; margin: 0; padding: 0; max-width: 68rem; /* keeps line length sensible */ margin-inline: auto; } @media (min-width: 980px){ #guide-us-list .elementor-icon-list-items{ grid-template-columns: 1fr 1fr; /* two calm columns */ } } /* item */ #guide-us-list .elementor-icon-list-item{ display: grid; grid-template-columns: auto 1fr; align-items: start; column-gap: 12px; } /* kill Elementor/FA chevrons */ #guide-us-list .elementor-icon-list-icon{ display: none !important; } /* mint micro-bullet */ #guide-us-list .elementor-icon-list-item::before{ content: ""; width: var(--bullet); height: var(--bullet); border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 2px var(--ring); margin-top: .55em; /* aligns with first line */ } /* text */ #guide-us-list .elementor-icon-list-text{ color: var(--ink) !important; /* removes theme red */ font-weight: 500; letter-spacing: .1px; line-height: 1.55; font-size: clamp(15px,1.05vw,18px); } /* links inside items (if any) */ #guide-us-list a{ color: inherit; text-decoration: none; } #guide-us-list a:hover{ text-decoration: underline; text-underline-offset: 3px; } /* focus (keyboard / a11y) */ #guide-us-list .elementor-icon-list-item:focus-within{ outline: 2px solid var(--ring); outline-offset: 2px; border-radius: 6px; } /* reduced motion (no animations here, but future-proof) */ @media (prefers-reduced-motion: reduce){ #guide-us-list *{ transition: none !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-b7a94b2 *//* ========= Signature Glass + Brush Zigzag + Kyoto Header (Elementor) ========= Target: #guiding-us.elementor-element-b7a94b2 Compact, compat-safe, no :is/:where */ #guiding-us.elementor-element-b7a94b2{ position:relative !important; isolation:isolate !important; overflow:clip !important; padding:clamp(44px,7vw,96px) clamp(22px,9vw,140px) !important; /* palette */ --ink:#0b1220; --glass:rgba(255,255,255,.32); --tint:rgba(255,255,255,.56); /* mint for bullets */ --accent-1:#92e6b1; --accent-2:#38b980; --accent-coral:#ec7681; /* RED line/underline palette */ --line-1:#e5576f; /* start */ --line-2:#ff8aa0; /* end */ /* header underline width (Kyoto ribbon) */ --title-underline-w: 62%; /* soft glass with faint corner washes */ background: linear-gradient(135deg, rgba(255,255,255,.42), rgba(255,255,255,.16)), radial-gradient(1200px 700px at 12% 22%, color-mix(in oklab, var(--accent-coral) 26%, transparent), transparent 70%), radial-gradient(1100px 650px at 88% 78%, color-mix(in oklab, var(--accent-1) 22%, transparent), transparent 70%), var(--glass); backdrop-filter: blur(16px) saturate(120%); -webkit-backdrop-filter: blur(16px) saturate(120%); border:1px solid rgba(255,255,255,.22) !important; box-shadow:none !important; color:var(--ink); } /* painted zigzag signature line — RED, thicker */ #guiding-us.elementor-element-b7a94b2::after{ content:""; position:absolute; left:clamp(22px,9vw,140px); right:clamp(22px,9vw,140px); top:clamp(16px,4.2vw,44px); height:110px; pointer-events:none; z-index:0; opacity:.95; /* SVG with roughen filter + draw animation — stroke-width 12 */ background: url("data:image/svg+xml;utf8,") center / 100% 100% no-repeat !important; } /* ================= Header (force Kyoto-style red ribbon underline) ================= */ /* Max specificity for Elementor headings inside this section */ #guiding-us.elementor-element-b7a94b2 .elementor-widget-heading .elementor-heading-title, #guiding-us.elementor-element-b7a94b2 .elementor-heading-title{ position:relative !important; display:inline-block !important; margin:clamp(32px,5.4vw,64px) 0 .8em 0 !important; font-weight:650 !important; letter-spacing:.2px !important; color:var(--ink) !important; line-height:1.1 !important; z-index:1; } /* kill any existing underline styles */ #guiding-us.elementor-element-b7a94b2 .elementor-heading-title::after{ content:none !important; background:none !important; height:0 !important; width:0 !important; } /* Kyoto ribbon underline (red gradient) */ #guiding-us.elementor-element-b7a94b2 .elementor-heading-title::before{ content:"" !important; position:absolute !important; left:-6px !important; bottom:-6px !important; width:var(--title-underline-w) !important; height:10px !important; border-radius:999px !important; background:linear-gradient(90deg, var(--line-1), var(--line-2)) !important; opacity:.22 !important; /* slightly stronger for red */ pointer-events:none !important; } /* ===== Body + custom bullets (mint) ===== */ #guiding-us .elementor-text-editor p{ margin:0 0 1em 0 !important; line-height:1.75 !important; font-size:clamp(17px,1.05vw,19px) !important; letter-spacing:.2px !important; } #guiding-us .elementor-text-editor ul{ list-style:none; margin:.2em 0 0 0 !important; padding-left:1.1em !important; } #guiding-us .elementor-text-editor ul li{ position:relative; margin:.42em 0 !important; padding-left:.2em !important; } #guiding-us .elementor-text-editor ul li::before{ content:""; position:absolute; left:-1.1em; top:.6em; width:.58em; height:.58em; border-radius:50%; background:radial-gradient(circle at 30% 30%, var(--accent-2), var(--accent-1)); opacity:.95; } /* graceful blur fallback */ @supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))){ #guiding-us.elementor-element-b7a94b2{ background:var(--tint); box-shadow:none !important; } }/* End custom CSS */ /* Start custom CSS for image-box, class: .elementor-element-895a5da *//* ========================================================= ✦ Ambulant Image Box — Kyoto Glass with Icon Tile Scope: ONLY #ambulant-imagebox ========================================================= */ #ambulant-imagebox{ /* palette */ --ink: #0b1220; --muted: #475569; --card: #ffffff; --hair: rgba(10,16,28,.12); --shadow-1: 0 1px 1px rgba(0,0,0,.03); --shadow-2: 0 14px 34px rgba(10,16,28,.09); /* ambulant gradient */ --g1: #63d4bc; /* mint */ --g2: #7fb4ff; /* sky */ --g3: #b39eff; /* soft violet */ /* icon controls */ --icon-size: 40px; --icon-ink: linear-gradient(135deg, var(--g1), var(--g2), var(--g3)); /* Choose one by setting --icon below */ /* Home + Heart (default) = in-home care */ --icon-home-heart: url("data:image/svg+xml;utf8,\ \ \ \ "); /* Person walking = ambulatory support */ --icon-walk: url("data:image/svg+xml;utf8,\ \ \ \ "); /* Helping hands = social support */ --icon-hands: url("data:image/svg+xml;utf8,\ \ \ \ \ "); /* pick icon */ --icon: var(--icon-home-heart); --radius: 24px; --pad: 22px; isolation: isolate; -webkit-font-smoothing: antialiased; font-family: ui-sans-serif, -apple-system, system-ui, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; } /* glass card */ #ambulant-imagebox .elementor-widget-container{ position: relative; border-radius: var(--radius); padding: var(--pad); background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.96)), radial-gradient(120% 80% at 20% 0%, rgba(127,180,255,.06), transparent 60%), radial-gradient(90% 70% at 95% 85%, rgba(99,212,188,.06), transparent 65%); border: 1px solid var(--hair); box-shadow: var(--shadow-1), var(--shadow-2); overflow: hidden; transform: translateZ(0); transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease, background-position .6s ease; background-position: 0 0, 0 0, 0 0; } /* luminous contour */ #ambulant-imagebox .elementor-widget-container::before{ content:""; position:absolute; inset:0; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, var(--g1), var(--g2), var(--g3)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity:.85; pointer-events:none; } /* top specular edge */ #ambulant-imagebox .elementor-widget-container::after{ content:""; position:absolute; left:6px; right:6px; top:6px; height:42%; border-radius: calc(var(--radius) - 8px); background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0)); filter: blur(6px); pointer-events:none; } /* optional true glass */ @supports (backdrop-filter: blur(10px)){ #ambulant-imagebox .elementor-widget-container{ background: rgba(255,255,255,.90); backdrop-filter: blur(10px) saturate(1.04); -webkit-backdrop-filter: blur(10px) saturate(1.04); } } /* layout */ #ambulant-imagebox .elementor-image-box-wrapper{ display:flex; align-items:center; gap:20px; } /* =============== Signature ICON tile =============== */ #ambulant-imagebox .elementor-image-box-img{ position:relative; flex:0 0 80px; width:80px; height:80px; border-radius:20px; overflow:hidden; background: linear-gradient(180deg, #f5f7fb, #edf1f7); box-shadow: inset 0 0 0 1px rgba(10,16,28,.08), 0 14px 28px rgba(10,16,28,.08); transform: translateZ(0); display:grid; place-items:center; transition: transform .24s ease, box-shadow .24s ease; } /* hide the original image */ #ambulant-imagebox .elementor-image-box-img img{ display:none !important; } /* gradient ring */ #ambulant-imagebox .elementor-image-box-img::before{ content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px; background: linear-gradient(140deg, var(--g1), var(--g2), var(--g3)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events:none; } /* the icon itself, colored by gradient via mask */ #ambulant-imagebox .elementor-image-box-img::after{ content:""; width: var(--icon-size); height: var(--icon-size); background: var(--icon-ink); -webkit-mask-image: var(--icon); mask-image: var(--icon); -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; -webkit-mask-size: contain; mask-size: contain; } /* content */ #ambulant-imagebox .elementor-image-box-content{ min-width:0; position:relative; } #ambulant-imagebox .elementor-image-box-title{ margin:0 0 10px 0; font-weight:750; letter-spacing:-0.012em; line-height:1.08; font-size:clamp(20px, 2.3vw, 26px); color:var(--ink); position:relative; text-shadow: 0 .3px 0 rgba(0,0,0,.1); } /* underline ribbon under the title */ #ambulant-imagebox .elementor-image-box-title::before{ content:""; position:absolute; left:-6px; bottom:-6px; width:48%; height:10px; border-radius:999px; background: linear-gradient(90deg, var(--g1), var(--g2)); opacity:.18; } /* gradient ink + one-pass sheen on hover */ @supports ((background-clip:text) or (-webkit-background-clip:text)){ #ambulant-imagebox .elementor-image-box-title{ background: linear-gradient(110deg, #0b1220 0%, #213861 35%, #0b1220 72%); -webkit-background-clip:text; background-clip:text; color:transparent; } #ambulant-imagebox .elementor-image-box-wrapper:hover .elementor-image-box-title::after{ content:""; position:absolute; inset:0 -10% 0 -10%; background: linear-gradient(95deg, transparent 0%, rgba(255,255,255,.9) 10%, transparent 22%); transform: translateX(-130%); animation: sheen 1200ms ease forwards; pointer-events:none; } } #ambulant-imagebox .elementor-image-box-description{ margin:2px 0 0 0; color:var(--muted); font-size:clamp(15px, 1.7vw, 16.5px); line-height:1.62; } /* interactions */ #ambulant-imagebox .elementor-widget-container:hover{ transform: translateY(-2px); box-shadow: 0 14px 30px rgba(10,16,28,.10), 0 36px 72px rgba(15,30,70,.10); border-color: rgba(10,16,28,.16); background-position: 0 0, -6px -4px, 6px 4px; } #ambulant-imagebox .elementor-image-box-wrapper:hover .elementor-image-box-img{ transform: translateY(-1px); box-shadow: inset 0 0 0 1px rgba(10,16,28,.08), 0 18px 36px rgba(10,16,28,.10); } /* focus */ #ambulant-imagebox a:focus-visible{ outline: 2px solid var(--g2); outline-offset: 5px; border-radius: 10px; } /* small screens */ @media (max-width: 560px){ #ambulant-imagebox .elementor-image-box-wrapper{ gap:16px; } #ambulant-imagebox .elementor-image-box-img{ flex-basis:68px; width:68px; height:68px; border-radius:18px; } } /* motion preference */ @media (prefers-reduced-motion: reduce){ #ambulant-imagebox .elementor-widget-container, #ambulant-imagebox .elementor-image-box-img{ transition:none !important; transform:none !important; } } /* keyframes */ @keyframes sheen{ 0% { transform: translateX(-130%); opacity:0; } 12% { opacity:.55; } 100% { transform: translateX(130%); opacity:0; } }/* End custom CSS */ /* Start custom CSS for image-box, class: .elementor-element-76c6759 *//* ========================================================= ✦ Signature Image Box — Kyoto Glass (Sunrise Brass + Icon) Scope: ONLY #stationar ========================================================= */ #stationar{ /* palette */ --ink: #0c1220; --muted: #4b5563; --card: #ffffff; --hair: rgba(10,16,28,.12); --shadow-1: 0 1px 1px rgba(0,0,0,.03); --shadow-2: 0 14px 34px rgba(10,16,28,.09); /* warm gradient */ --g1: #ffd479; /* sunrise brass */ --g2: #ff9ec6; /* rose quartz */ --g3: #b38bff; /* soft violet */ /* icon controls */ --icon-size: 40px; --icon-ink: linear-gradient(135deg, var(--g1), var(--g2), var(--g3)); /* swap the icon by switching --icon below to --icon-heart or --icon-home */ --icon-heart: url("data:image/svg+xml;utf8,"); --icon-home: url("data:image/svg+xml;utf8,"); --icon: var(--icon-heart); --radius: 24px; --pad: 22px; isolation: isolate; -webkit-font-smoothing: antialiased; font-family: ui-sans-serif, -apple-system, system-ui, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; } /* glass card */ #stationar .elementor-widget-container{ position: relative; border-radius: var(--radius); padding: var(--pad); background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.96)), radial-gradient(120% 80% at 18% 0%, rgba(255,212,121,.07), transparent 60%), radial-gradient(100% 70% at 95% 85%, rgba(179,139,255,.07), transparent 65%); border: 1px solid var(--hair); box-shadow: var(--shadow-1), var(--shadow-2); overflow: hidden; transform: translateZ(0); transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease, background-position .6s ease; background-position: 0 0, 0 0, 0 0; } /* luminous contour */ #stationar .elementor-widget-container::before{ content:""; position:absolute; inset:0; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, var(--g1), var(--g2), var(--g3)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity:.88; pointer-events:none; } /* top specular edge */ #stationar .elementor-widget-container::after{ content:""; position:absolute; left:6px; right:6px; top:6px; height:42%; border-radius: calc(var(--radius) - 8px); background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0)); filter: blur(6px); pointer-events:none; } /* optional true glass */ @supports (backdrop-filter: blur(10px)){ #stationar .elementor-widget-container{ background: rgba(255,255,255,.90); backdrop-filter: blur(10px) saturate(1.04); -webkit-backdrop-filter: blur(10px) saturate(1.04); } } /* layout */ #stationar .elementor-image-box-wrapper{ display:flex; align-items:center; gap:20px; } /* =============== Signature ICON tile =============== */ #stationar .elementor-image-box-img{ position:relative; flex:0 0 80px; width:80px; height:80px; border-radius:20px; overflow:hidden; background: linear-gradient(180deg, #f5f7fb, #edf1f7); box-shadow: inset 0 0 0 1px rgba(10,16,28,.08), 0 14px 28px rgba(10,16,28,.08); transform: translateZ(0); display:grid; place-items:center; transition: transform .24s ease, box-shadow .24s ease; } /* hide the original image */ #stationar .elementor-image-box-img img{ display:none !important; } /* gradient ring */ #stationar .elementor-image-box-img::before{ content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px; background: linear-gradient(140deg, var(--g1), var(--g2), var(--g3)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events:none; } /* the icon itself, colored by gradient via mask */ #stationar .elementor-image-box-img::after{ content:""; width: var(--icon-size); height: var(--icon-size); background: var(--icon-ink); -webkit-mask-image: var(--icon); mask-image: var(--icon); -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; -webkit-mask-size: contain; mask-size: contain; } /* =============== Text =============== */ #stationar .elementor-image-box-content{ min-width:0; position:relative; } #stationar .elementor-image-box-title{ margin:0 0 10px 0; font-weight:750; letter-spacing:-0.012em; line-height:1.08; font-size:clamp(20px, 2.3vw, 26px); color:var(--ink); position:relative; text-shadow: 0 .3px 0 rgba(0,0,0,.1); } /* keep the quiet underline ribbon under the title */ #stationar .elementor-image-box-title::before{ content:""; position:absolute; left:-6px; bottom:-6px; width:48%; height:10px; border-radius:999px; background: linear-gradient(90deg, var(--g1), var(--g2)); opacity:.18; } /* description — plain text, no background strip */ #stationar .elementor-image-box-description{ margin:2px 0 0 0; color:var(--muted); font-size:clamp(15px, 1.7vw, 16.5px); line-height:1.62; } /* interactions: calm elevation */ #stationar .elementor-widget-container:hover{ transform: translateY(-2px); box-shadow: 0 14px 30px rgba(10,16,28,.10), 0 36px 72px rgba(15,30,70,.10); border-color: rgba(10,16,28,.16); } #stationar .elementor-image-box-wrapper:hover .elementor-image-box-img{ transform: translateY(-1px); box-shadow: inset 0 0 0 1px rgba(10,16,28,.08), 0 18px 36px rgba(10,16,28,.10); } /* focus */ #stationar a:focus-visible{ outline: 2px solid var(--g2); outline-offset: 5px; border-radius: 10px; } /* small screens */ @media (max-width: 560px){ #stationar .elementor-image-box-wrapper{ gap:16px; } #stationar .elementor-image-box-img{ flex-basis:68px; width:68px; height:68px; border-radius:18px; } } /* motion preference */ @media (prefers-reduced-motion: reduce){ #stationar .elementor-widget-container, #stationar .elementor-image-box-img{ transition:none !important; transform:none !important; } }/* End custom CSS */ /* Start custom CSS for image-box, class: .elementor-element-a88b0a0 *//* ========================================================= ✦ Erziehungshilfe Image Box — Kyoto Glass (Visible Icon) Scope: ONLY #erziehungshilfe ========================================================= */ #erziehungshilfe{ /* palette (distinct) */ --ink: #0b1220; --muted: #475569; --card: #ffffff; --hair: rgba(10,16,28,.12); --shadow-1: 0 1px 1px rgba(0,0,0,.03); --shadow-2: 0 14px 34px rgba(10,16,28,.09); /* warm-growth gradient (apricot → coral → orchid) */ --g1: #ffc98a; /* apricot */ --g2: #ff8aa0; /* coral-rose */ --g3: #9aa5ff; /* soft indigo */ /* ICON controls (no masks, rock solid) */ --icon-size: clamp(44px, 6vw, 56px); /* Default icon: Book + Heart (education with care) */ --icon-book-heart: url("data:image/svg+xml;utf8,\ \ \ \ \ "); /* Alternate: Parent + Child */ --icon-family: url("data:image/svg+xml;utf8,\ \ \ \ \ \ "); /* Alternate: Compass (orientation/coaching) */ --icon-compass: url("data:image/svg+xml;utf8,\ \ \ \ "); /* pick your icon here */ --icon-img: var(--icon-book-heart); --radius: 24px; --pad: 22px; isolation: isolate; -webkit-font-smoothing: antialiased; font-family: ui-sans-serif, -apple-system, system-ui, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; } /* glass card */ #erziehungshilfe .elementor-widget-container{ position: relative; border-radius: var(--radius); padding: var(--pad); background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.96)), radial-gradient(120% 80% at 20% 0%, rgba(255,201,138,.08), transparent 60%), radial-gradient(90% 70% at 95% 85%, rgba(154,165,255,.08), transparent 65%); border: 1px solid var(--hair); box-shadow: var(--shadow-1), var(--shadow-2); overflow: hidden; transform: translateZ(0); transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease, background-position .6s ease; background-position: 0 0, 0 0, 0 0; } /* luminous contour */ #erziehungshilfe .elementor-widget-container::before{ content:""; position:absolute; inset:0; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, var(--g1), var(--g2), var(--g3)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity:.88; pointer-events:none; } /* top specular edge */ #erziehungshilfe .elementor-widget-container::after{ content:""; position:absolute; left:6px; right:6px; top:6px; height:42%; border-radius: calc(var(--radius) - 8px); background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0)); filter: blur(6px); pointer-events:none; } /* optional true glass */ @supports (backdrop-filter: blur(10px)){ #erziehungshilfe .elementor-widget-container{ background: rgba(255,255,255,.90); backdrop-filter: blur(10px) saturate(1.04); -webkit-backdrop-filter: blur(10px) saturate(1.04); } } /* layout */ #erziehungshilfe .elementor-image-box-wrapper{ display:flex; align-items:center; gap:20px; } /* =============== Signature ICON tile (no masks) =============== */ #erziehungshilfe .elementor-image-box-img{ position:relative; flex:0 0 80px; width:80px; height:80px; border-radius:20px; overflow:hidden; /* TOP LAYER: the icon (centered, sized) */ background: var(--icon-img) center / var(--icon-size) no-repeat, radial-gradient(120% 80% at 50% -20%, rgba(255,255,255,.55), transparent 62%), linear-gradient(180deg, #f5f7fb, #edf1f7); /* ceramic body */ box-shadow: inset 0 0 0 1px rgba(10,16,28,.08), 0 14px 28px rgba(10,16,28,.08); transform: translateZ(0); display:grid; place-items:center; transition: transform .24s ease, box-shadow .24s ease; } /* Hide the original image */ #erziehungshilfe .elementor-image-box-img img{ display:none !important; } /* gradient ring */ #erziehungshilfe .elementor-image-box-img::before{ content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px; background: linear-gradient(140deg, var(--g1), var(--g2), var(--g3)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events:none; } /* =============== Text =============== */ #erziehungshilfe .elementor-image-box-content{ min-width:0; position:relative; } #erziehungshilfe .elementor-image-box-title{ margin:0 0 10px 0; font-weight:750; letter-spacing:-0.012em; line-height:1.08; font-size:clamp(20px, 2.3vw, 26px); color:var(--ink); position:relative; text-shadow: 0 .3px 0 rgba(0,0,0,.1); } /* underline ribbon under the title */ #erziehungshilfe .elementor-image-box-title::before{ content:""; position:absolute; left:-6px; bottom:-6px; width:48%; height:10px; border-radius:999px; background: linear-gradient(90deg, var(--g1), var(--g2)); opacity:.18; } /* gradient ink + one-pass sheen on hover */ @supports ((background-clip:text) or (-webkit-background-clip:text)){ #erziehungshilfe .elementor-image-box-title{ background: linear-gradient(110deg, #0b1220 0%, #233b66 35%, #0b1220 70%); -webkit-background-clip:text; background-clip:text; color:transparent; } #erziehungshilfe .elementor-image-box-wrapper:hover .elementor-image-box-title::after{ content:""; position:absolute; inset:0 -10% 0 -10%; background: linear-gradient(95deg, transparent 0%, rgba(255,255,255,.9) 10%, transparent 22%); transform: translateX(-130%); animation: sheen 1200ms ease forwards; pointer-events:none; } } #erziehungshilfe .elementor-image-box-description{ margin:2px 0 0 0; color:var(--muted); font-size:clamp(15px, 1.7vw, 16.5px); line-height:1.62; } /* interactions */ #erziehungshilfe .elementor-widget-container:hover{ transform: translateY(-2px); box-shadow: 0 14px 30px rgba(10,16,28,.10), 0 36px 72px rgba(15,30,70,.10); border-color: rgba(10,16,28,.16); } #erziehungshilfe .elementor-image-box-wrapper:hover .elementor-image-box-img{ transform: translateY(-1px); box-shadow: inset 0 0 0 1px rgba(10,16,28,.08), 0 18px 36px rgba(10,16,28,.10); } /* focus */ #erziehungshilfe a:focus-visible{ outline: 2px solid var(--g2); outline-offset: 5px; border-radius: 10px; } /* small screens */ @media (max-width: 560px){ #erziehungshilfe .elementor-image-box-wrapper{ gap:16px; } #erziehungshilfe .elementor-image-box-img{ flex-basis:68px; width:68px; height:68px; border-radius:18px; } } /* motion preference */ @media (prefers-reduced-motion: reduce){ #erziehungshilfe .elementor-widget-container, #erziehungshilfe .elementor-image-box-img{ transition:none !important; transform:none !important; } } /* keyframes */ @keyframes sheen{ 0% { transform: translateX(-130%); opacity:0; } 12% { opacity:.55; } 100% { transform: translateX(130%); opacity:0; } }/* End custom CSS */ /* Start custom CSS for image-box, class: .elementor-element-d1957b5 *//* ========================================================= ✦ Inobhutnahme — Kyoto Glass, Teal Rescue Border/Tint Scope: ONLY #inobhutnahme ========================================================= */ #inobhutnahme{ /* palette */ --ink: #0b1220; --muted: #475569; --card: #ffffff; /* TINTED border hairline (stronger, colored) */ --hair: rgba(34, 211, 238, .35); /* cyan-teal */ --shadow-1: 0 1px 1px rgba(0,0,0,.03); --shadow-2: 0 14px 34px rgba(11, 32, 50, .12); /* gradient accents (teal → cyan → cobalt) */ --g1: #20e3b2; /* teal-emerald */ --g2: #22d3ee; /* cyan */ --g3: #3b82f6; /* cobalt */ /* icon controls */ --icon-size: clamp(46px, 6vw, 58px); /* Default icon: Shield + Home (protection & shelter) with teal gradient */ --icon-shield-home: url("data:image/svg+xml;utf8,\ \ \ \ \ \ \ \ \ "); /* Alt icon: Lifebuoy */ --icon-lifebuoy: url("data:image/svg+xml;utf8,\ \ \ \ \ \ \ \ "); /* Alt icon: Lighthouse */ --icon-lighthouse: url("data:image/svg+xml;utf8,\ \ \ \ \ \ \ \ \ "); /* pick the icon */ --icon-img: var(--icon-lifebuoy); --radius: 24px; --pad: 22px; isolation: isolate; -webkit-font-smoothing: antialiased; font-family: ui-sans-serif, -apple-system, system-ui, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; } /* Glass card with STRONGER colored border + teal tint */ #inobhutnahme .elementor-widget-container{ position: relative; border-radius: var(--radius); padding: var(--pad); background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.96)), radial-gradient(120% 80% at 18% 0%, rgba(34,211,238,.10), transparent 60%), radial-gradient(100% 70% at 95% 85%, rgba(59,130,246,.10), transparent 65%); border: 1px solid var(--hair); /* colored border */ box-shadow: var(--shadow-1), var(--shadow-2); overflow: hidden; transform: translateZ(0); transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease, background-position .6s ease; background-position: 0 0, 0 0, 0 0; } /* Luminous gradient contour (matches the new palette) */ #inobhutnahme .elementor-widget-container::before{ content:""; position:absolute; inset:0; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, var(--g1), var(--g2), var(--g3)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity:.92; pointer-events:none; } /* Specular edge */ #inobhutnahme .elementor-widget-container::after{ content:""; position:absolute; left:6px; right:6px; top:6px; height:42%; border-radius: calc(var(--radius) - 8px); background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0)); filter: blur(6px); pointer-events:none; } /* Optional true glass */ @supports (backdrop-filter: blur(10px)){ #inobhutnahme .elementor-widget-container{ background: rgba(255,255,255,.90); backdrop-filter: blur(10px) saturate(1.04); -webkit-backdrop-filter: blur(10px) saturate(1.04); } } /* Layout */ #inobhutnahme .elementor-image-box-wrapper{ display:flex; align-items:center; gap:20px; } /* Icon tile (centered, visible) */ #inobhutnahme .elementor-image-box-img{ position:relative; flex:0 0 80px; width:80px; height:80px; border-radius:20px; overflow:hidden; background: var(--icon-img) center / var(--icon-size) no-repeat, radial-gradient(120% 80% at 50% -20%, rgba(255,255,255,.55), transparent 62%), linear-gradient(180deg, #f5f7fb, #edf1f7); box-shadow: inset 0 0 0 1px rgba(0,0,0,.06), 0 14px 28px rgba(11, 32, 50, .10); transform: translateZ(0); transition: transform .24s ease, box-shadow .24s ease; } /* Hide the stock image */ #inobhutnahme .elementor-image-box-img img{ display:none !important; } /* Gradient ring (teal) */ #inobhutnahme .elementor-image-box-img::before{ content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px; background: linear-gradient(140deg, var(--g1), var(--g2), var(--g3)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events:none; } /* Text */ #inobhutnahme .elementor-image-box-content{ min-width:0; position:relative; } #inobhutnahme .elementor-image-box-title{ margin:0 0 10px 0; font-weight:750; letter-spacing:-0.012em; line-height:1.08; font-size:clamp(20px, 2.3vw, 26px); color:var(--ink); position:relative; text-shadow: 0 .3px 0 rgba(0,0,0,.1); } /* Underline ribbon (teal → cyan) */ #inobhutnahme .elementor-image-box-title::before{ content:""; position:absolute; left:-6px; bottom:-6px; width:48%; height:10px; border-radius:999px; background: linear-gradient(90deg, var(--g1), var(--g2)); opacity:.20; } @supports ((background-clip:text) or (-webkit-background-clip:text)){ #inobhutnahme .elementor-image-box-title{ background: linear-gradient(110deg, #0b1220 0%, #173a63 35%, #0b1220 70%); -webkit-background-clip:text; background-clip:text; color:transparent; } #inobhutnahme .elementor-image-box-wrapper:hover .elementor-image-box-title::after{ content:""; position:absolute; inset:0 -10% 0 -10%; background: linear-gradient(95deg, transparent 0%, rgba(255,255,255,.9) 10%, transparent 22%); transform: translateX(-130%); animation: sheen 1200ms ease forwards; pointer-events:none; } } #inobhutnahme .elementor-image-box-description{ margin:2px 0 0 0; color:var(--muted); font-size:clamp(15px, 1.7vw, 16.5px); line-height:1.62; } /* Interactions */ #inobhutnahme .elementor-widget-container:hover{ transform: translateY(-2px); box-shadow: 0 14px 30px rgba(11, 32, 50, .12), 0 36px 72px rgba(15, 30, 70, .12); border-color: rgba(34, 211, 238, .45); /* border gets brighter on hover */ } #inobhutnahme .elementor-image-box-wrapper:hover .elementor-image-box-img{ transform: translateY(-1px); box-shadow: inset 0 0 0 1px rgba(0,0,0,.06), 0 18px 36px rgba(11, 32, 50, .14); } /* Focus */ #inobhutnahme a:focus-visible{ outline: 2px solid var(--g2); outline-offset: 5px; border-radius: 10px; } /* Small screens */ @media (max-width: 560px){ #inobhutnahme .elementor-image-box-wrapper{ gap:16px; } #inobhutnahme .elementor-image-box-img{ flex-basis:68px; width:68px; height:68px; border-radius:18px; } } /* Motion */ @media (prefers-reduced-motion: reduce){ #inobhutnahme .elementor-widget-container, #inobhutnahme .elementor-image-box-img{ transition:none !important; transform:none !important; } } /* keyframes */ @keyframes sheen{ 0% { transform: translateX(-130%); opacity:0; } 12% { opacity:.55; } 100% { transform: translateX(130%); opacity:0; } }/* End custom CSS */