天気風情報カードウィジェット(静止)

<div class="d11-08-10-card">
          <div class="d11-08-10-scene">
            <span class="d11-08-10-sun"></span>
            <span class="d11-08-10-cloud d11-08-10-c-a"></span>
            <span class="d11-08-10-cloud d11-08-10-c-b"></span>
          </div>
          <div class="d11-08-10-info">
            <div class="d11-08-10-temp">27<i>°C</i></div>
            <div class="d11-08-10-place">東京 · くもり時々晴れ</div>
            <div class="d11-08-10-meta"><span>湿度 62%</span><span>風 3m/s</span></div>
          </div>
        </div>

.d11-08-10{background:#e0f2fe}
        .d11-08-10-card{width:250px;background:linear-gradient(160deg,#38bdf8,#3b82f6);border-radius:16px;padding:18px 20px;color:#fff;box-shadow:0 10px 26px rgba(37,99,235,.28);overflow:hidden}
        .d11-08-10-scene{position:relative;height:70px;margin-bottom:6px}
        .d11-08-10-sun{position:absolute;top:6px;left:14px;width:38px;height:38px;border-radius:50%;background:radial-gradient(circle,#fef08a,#fbbf24);box-shadow:0 0 26px rgba(253,224,71,.8)}
        .d11-08-10-cloud{position:absolute;height:16px;background:rgba(255,255,255,.92);border-radius:16px}
        .d11-08-10-cloud::before,.d11-08-10-cloud::after{content:"";position:absolute;background:rgba(255,255,255,.92);border-radius:50%}
        .d11-08-10-c-a{width:52px;top:24px;left:40px}
        .d11-08-10-c-a::before{width:22px;height:22px;top:-11px;left:8px}
        .d11-08-10-c-a::after{width:16px;height:16px;top:-8px;left:28px}
        .d11-08-10-c-b{width:36px;top:44px;left:150px;opacity:.7}
        .d11-08-10-c-b::before{width:16px;height:16px;top:-8px;left:6px}
        .d11-08-10-c-b::after{width:12px;height:12px;top:-6px;left:20px}
        .d11-08-10-temp{font-size:38px;font-weight:800;line-height:1}
        .d11-08-10-temp i{font-size:20px;font-style:normal;opacity:.85}
        .d11-08-10-place{font-size:12px;opacity:.92;margin-top:4px}
        .d11-08-10-meta{display:flex;gap:14px;font-size:11px;opacity:.85;margin-top:8px}