/*---WIDGETS---*/

:root{ --title-underline-color:#231F20; --list-item-hover-background-color:#231F20; --list-item-icon-stroke-color:#231F20; --list-item-icon-hover-stroke-color:; } /* 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; width:100%;max-width:100%;box-sizing:border-box;overflow:hidden; } /* 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:var(--title-underline-color); 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:var(--list-item-hover-background-color); color:#fff; border-color:var(--list-item-hover-background-color); 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;}a[aria-label]{ display:block; text-decoration:none; color:inherit; padding:12px 16px 12px 16px; margin-bottom:16px; } /* Card/Image container */ .wrapper{ position:relative; height:220px; padding-bottom:16px; z-index: 0; } /* Image */ .preview-image{ position:absolute; top:50%; left:-20px; transform:translateY(-50%); width:260px; height:220px; background-size:cover; background-position:center; background-repeat:no-repeat; border-radius:20px; overflow:hidden; } /* Card */ .preview-box{ position:absolute; top:50%; left:216px; right:0; transform:translateY(-50%); z-index:1; height:184px; background:#ffffffce; border:1px solid #e5e7eb; border-radius:20px; box-shadow:0 14px 28px rgba(0,0,0,0.12); padding:18px 24px; display:flex; flex-direction:column; justify-content:center; gap:10px; } /* Typography */ .preview-label{ font-weight:700; font-size:18px; line-height:1.2; color:#111827; transition:color .2s ease; } .preview-content{ overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; line-height:1.55; max-height:3.2em; font-size:14px; color:#374151; transition:color .2s ease; } .preview-read-more{ font-weight:700; font-size:14px; display:flex; align-items:center; gap:10px; color:#e11d48; } /* Hover: turn title/content blue */ a[aria-label]:hover .preview-label, a[aria-label]:hover .preview-content{ color:#2563eb !important; } /* ===== Responsive (smaller image; wider/taller card) ===== */ /* <= 768px */ @media (max-width:768px){ a[aria-label]{ padding:12px 0; } .wrapper{ height:224px; } .preview-image{ width:200px; height:210px; left:-20px; } .preview-box{ left:156px; right:0; height:184px; padding:18px 20px; } /* 200 - 44 */ .preview-label{ font-size:16px; } .preview-content, .preview-read-more{ font-size:12.5px; } } /* <= 600px */ @media (max-width:600px){ a[aria-label]{ padding:12px 0; } .wrapper{ height:218px; } .preview-image{ width:170px; height:200px; left:-20px; } .preview-box{ left:126px; right:0; height:180px; padding:16px 18px; } /* 170 - 44 */ .preview-label{ font-size:15.5px; } .preview-content, .preview-read-more{ font-size:12px; } } /* <= 480px */ @media (max-width:480px){ a[aria-label]{ padding:10px 0; } .wrapper{ height:210px; } .preview-image{ width:140px; height:190px; left:-20px; } .preview-box{ left:96px; right:0; height:174px; padding:14px 16px; } /* 140 - 44 */ .preview-label{ font-size:15px; } .preview-content, .preview-read-more{ font-size:11.75px; } } /* <= 380px */ @media (max-width:380px){ a[aria-label]{ padding:8px 0; } .wrapper{ height:204px; } .preview-image{ width:130px; height:184px; left:-20px; } .preview-box{ left:86px; right:0; height:170px; padding:12px 14px; } /* 130 - 44 */ .preview-label{ font-size:14.5px; } .preview-content, .preview-read-more{ font-size:11.5px; } }