*{box-sizing:border-box} :root{ --sky1:#c3e6ff; --sky2:#8ec5ff; --panel:#fff; --panel-border:#dbe3ef; --ink:#0b1220; --ink-soft:#334155; --primary:#0ea5e9; --primary-ink:#075985; --btn:#0284c7; --btn-ink:#e6f6ff; } html,body{height:100%} body{ margin:0;color:var(--ink);font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; background:linear-gradient(180deg,var(--sky1),var(--sky2)); background-attachment:fixed; overflow-x:hidden } .clouds,.clouds:before,.clouds:after{ position:fixed; left:-200%; top:0; right:-200%; height:60%; background-repeat:repeat; pointer-events:none; z-index:-1 } .clouds{ background-image:radial-gradient(ellipse at 20% 30%,rgba(255,255,255,.7),transparent 50%),radial-gradient(ellipse at 60% 40%,rgba(255,255,255,.6),transparent 50%),radial-gradient(ellipse at 80% 25%,rgba(255,255,255,.55),transparent 50%); animation:drift 90s linear infinite } .clouds:before{ content:""; top:10%; height:70%; background-image:radial-gradient(ellipse at 30% 50%,rgba(255,255,255,.55),transparent 50%),radial-gradient(ellipse at 70% 30%,rgba(255,255,255,.5),transparent 50%); animation:drift 120s linear infinite reverse } .clouds:after{ content:""; top:0; height:80%; background-image:radial-gradient(ellipse at 40% 40%,rgba(255,255,255,.45),transparent 50%),radial-gradient(ellipse at 85% 20%,rgba(255,255,255,.45),transparent 50%); animation:drift 150s linear infinite } @keyframes drift{0%{transform:translateX(0)}100%{transform:translateX(25%)}} .header{ display:flex;align-items:center;gap:10px; padding:12px 16px; background:rgba(255,255,255,.92); border-bottom:1px solid var(--panel-border); backdrop-filter:saturate(140%) blur(6px) } .header img{ width:8px;height:8px } /* shrink logo */ .header .title{ font-weight:200; letter-spacing:.3px } .wrap{ max-width:300px; margin:22px auto; padding:0 16px } .grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px } .card{ background:var(--panel); border:1px solid var(--panel-border); border-radius:14px; box-shadow:0 6px 16px rgba(0,0,0,.06) } .card .head{ padding:12px 14px; border-bottom:1px solid var(--panel-border); background:linear-gradient(180deg,#f7fbff,#edf5ff); font-weight:600; color:var(--primary-ink) } .card .body{ padding:16px } label{ display:block; margin:10px 0 6px; color:var(--ink-soft) } input[type=text],input[type=email],input[type=tel],input[type=password],select{ width:100%; padding:12px; border-radius:10px; border:1px solid #cfd7e6; background:#fff; color:#0b1220 } button,.btn{ padding:10px 14px; border-radius:10px; border:1px solid var(--btn); background:var(--btn); color:var(--btn-ink); cursor:pointer; text-decoration:none; display:inline-block } button.link{ background:transparent; border-color:var(--primary); color:var(--primary) } .msg{ margin-top:12px; white-space:pre-wrap } .player{ aspect-ratio:16/9; width:100%; background:#000; border-radius:10px; overflow:hidden } .player iframe,.player video{ width:100%; height:100%; display:block } .badge{ display:inline-block; padding:2px 6px; border:1px solid #94a3b8; border-radius:6px; font-size:12px; margin-left:6px; background:#f1f6ff } .help{ color:#3b82f6; font-size:12px } .table{ width:100%; border-collapse:collapse } .table th,.table td{ padding:10px; border-bottom:1px solid #e6eef9; text-align:left } .footer-note{ font-size:12px; color:#0b1220aa; margin-top:12px } .actions{ display:flex; gap:10px; flex-wrap:wrap } .actions a.btn{ min-width:160px; text-align:center } /* === Sayyid Logo Glow Patch (7px + hover/tap glow) === Place these rules at the BOTTOM of your existing /css/style.css If you prefer, you can upload this file as /css/logo_glow_patch.css and include it AFTER style.css in your . Effects: - Logo size forced to 7px - Gentle glow on hover (desktop) and on tap (mobile) */ .header img { width: 7px !important; height: 7px !important; transition: transform 0.4s ease, filter 0.4s ease; will-change: transform, filter; } /* Desktop hover */ @media (hover:hover) and (pointer:fine) { .header img:hover { transform: scale(1.8); filter: drop-shadow(0 0 6px #f87171); } } /* Mobile tap feedback: On touch devices, we can't rely on :hover. Use :active + focus-visible to flash the glow briefly when tapped. */ @media (hover:none), (pointer:coarse) { .header img:active, .header img:focus-visible { transform: scale(1.8); filter: drop-shadow(0 0 6px #f87171); } }