/* 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;}