a > .sublist-01, a > .sublist-01 *{text-decoration:none} /* Row: fixed height for exactly 2 lines */ .sublist-01{ --fs:16px; --lh:1.4; --lines:2; position:relative; display:flex; align-items:flex-start; gap:10px; padding:10px 12px 14px; background:transparent; border:0; color:#1f2937!important; height:calc(var(--lines)*var(--fs)*var(--lh) + 24px); min-width:0 } .sublist-01 center{display:contents} /* Blue arrow (SVG mask) */ .sublist-02{position:relative; flex:none; width:22px; height:22px; color:#3f67f6; margin-top:2px} .sublist-icon{display:none} .sublist-02::before{ content:""; position:absolute; left:4px; top:50%; width:13px; height:13px; transform:translateY(-50%); background-color:currentColor; -webkit-mask:url("data:image/svg+xml;utf8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M9.71069 18.2929C10.1012 18.6834 10.7344 18.6834 11.1249 18.2929L16.0123 13.4006C16.7927 12.6195 16.7924 11.3537 16.0117 10.5729L11.1213 5.68254C10.7308 5.29202 10.0976 5.29202 9.70708 5.68254C9.31655 6.07307 9.31655 6.70623 9.70708 7.09676L13.8927 11.2824C14.2833 11.6729 14.2833 12.3061 13.8927 12.6966L9.71069 16.8787C9.32016 17.2692 9.32016 17.9023 9.71069 18.2929Z' fill='%23000'/></svg>") center/contain no-repeat; mask:url("data:image/svg+xml;utf8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M9.71069 18.2929C10.1012 18.6834 10.7344 18.6834 11.1249 18.2929L16.0123 13.4006C16.7927 12.6195 16.7924 11.3537 16.0117 10.5729L11.1213 5.68254C10.7308 5.29202 10.0976 5.29202 9.70708 5.68254C9.31655 6.07307 9.31655 6.70623 9.70708 7.09676L13.8927 11.2824C14.2833 11.6729 14.2833 12.3061 13.8927 12.6966L9.71069 16.8787C9.32016 17.2692 9.32016 17.9023 9.71069 18.2929Z' fill='%23000'/></svg>") center/contain no-repeat } /* Label: 2 lines + ellipsis (left-aligned) */ .sublist-label{ font-size:var(--fs); line-height:var(--lh); display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; text-overflow:ellipsis; min-width:0; color:inherit!important; text-align:left!important } /* Baseline rule aligned across items */ .sublist-01::after{content:""; position:absolute; left:22px; right:0; bottom:0; height:1px; background:#cfd7f2; border-radius:1px} /* Hover: color + semibold */ a:hover .sublist-01, a:hover .sublist-01 .sublist-label{color:#1a49e9!important} a:hover .sublist-01 .sublist-label{font-weight:600} a:hover .sublist-01 .sublist-02{color:#1a49e9} /* Responsive */ @media (max-width:990px){ .sublist-01{--fs:15px; height:calc(2*var(--fs)*var(--lh) + 24px)!important} .sublist-02{width:20px!important; height:20px!important} .sublist-02::before{left:3px; width:12px; height:12px} .sublist-01::after{left:20px} .sublist-label{font-size:var(--fs)!important} }.ezpath { padding : 80px 40px; } .ezpath .ez.slide.n1 { display : flex !important; align-items : stretch !important; } .ezpath .ez.slide { gap : 10px !important; border-radius : 0px !important; border-bottom : 4px solid #ffd400 !important; padding : 10px !important; background : #FFFFFFCC !important; } .ezpath .ez.slide .input, .ezpath .ez.slide button { height : 50px !important; } .ezpath .ez.slide textarea { color : #000000 !important; border-radius : 0px !important; border : none !important; padding-top : 16px !important; background : transparent !important; } .ezpath .ez.slide .button button { background : #ffd400 !important; color : #000000 !important; border-radius : 0px !important; border : none !important; padding : 10px 20px 10px 20px !important; } .ezpath .field.field-question { width : 100%; }/* Card container */ div.basic-siblings{ background:#fff;border:1px solid #e5e7eb;border-radius:12px; box-shadow:0 6px 18px rgba(0,0,0,.08);padding:18px 18px 20px;max-width:360px; } /* Title: blue full-width bar, semibold */ h2.basic-siblings{ --bar-thick:4px; --bar-offset:2px; margin:0 0 16px; position:relative; padding-bottom:12px; font-size:22px; line-height:1.2; font-weight:600; color:#374151; text-decoration:none; } h2.basic-siblings::before{ content:""; position:absolute; left:0; right:0; bottom:var(--bar-offset); height:var(--bar-thick); background:#1CA1D7; border-radius:4px; z-index:0; } /* List */ ul.basic-siblings{list-style:none;margin:0;padding:8px 0 0;} ul.basic-siblings li{margin:12px 0;} ul.basic-siblings li a{ /* Make the icon sit on the FIRST line */ display:flex; align-items:flex-start; gap:12px; padding:12px 16px; border-radius:10px; text-decoration:none; background:transparent; border:1px solid transparent; color:#4b5563; font-weight:500; font-size:18px; transition:background-color .15s ease,color .15s ease,border-color .15s ease,box-shadow .15s ease; } /* Icon: blue by default, white on hover; aligned to the first line */ ul.basic-siblings li a::before{ content:""; flex:0 0 18px; width:18px; height:18px; margin-top:2px; background-repeat:no-repeat; background-size:18px 18px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath stroke='%230f2a5e' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15 8h2m-2 4h2m0 4H7m0-8v4h4V8H7zM5 20h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2z'/%3E%3C/svg%3E"); } ul.basic-siblings li a:hover::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15 8h2m-2 4h2m0 4H7m0-8v4h4V8H7zM5 20h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2z'/%3E%3C/svg%3E"); } /* Hover ? blue fill (text turns white) */ ul.basic-siblings li a:hover{ background:#1CA1D7; color:#fff; border-color:#1CA1D7; box-shadow:0 4px 14px rgba(15,42,94,.20); } /* Focus ring */ ul.basic-siblings li a:focus-visible{outline:2px solid #2fd27b; outline-offset:2px;}