diff --git a/index.html b/index.html index 7c2c79d..860838e 100644 --- a/index.html +++ b/index.html @@ -72,18 +72,19 @@ .section{ margin-bottom:2.6rem; padding:1.3rem 1.4rem 1.1rem; - border-radius:14px; + border-radius:18px; background:#ffffffee; box-shadow:0 8px 26px #00000017; - backdrop-filter:blur(8px) + backdrop-filter:blur(10px) } .section h2{ - font-size:1.1rem; + font-size:1.05rem; font-weight:700; - letter-spacing:.06em; + letter-spacing:.08em; text-transform:uppercase; color:#0c2334; - margin-bottom:.8rem + margin-bottom:.9rem; + opacity:.96 } .tool-list{ @@ -96,47 +97,57 @@ display:flex; align-items:center; gap:.9rem; - padding:.75rem .9rem; - border-radius:12px; - background:#0f2234; - color:#f5f7fb; + padding:.85rem 1rem; + border-radius:16px; + background:radial-gradient(circle at 0 0,#ffffffee,transparent) + ,#ffffffcc; + box-shadow:0 4px 14px #0000001a; + backdrop-filter:blur(14px); + border:1px solid #ffffffaa; text-decoration:none; - box-shadow:0 4px 16px #00000033; - transition:transform .14s ease,box-shadow .14s ease,background .14s ease + color:#102331; + transition: + transform .16s ease, + box-shadow .16s ease, + background .16s ease, + border-color .16s ease } .tool-card:hover, .tool-card:focus-visible{ - background:#152c43; transform:translateY(-2px); - box-shadow:0 7px 22px #00000040; + box-shadow:0 9px 26px #0000002b; + background:radial-gradient(circle at 0 0,#ffffff,transparent) + ,#ffffffdd; + border-color:#c0e4ff; outline:none } .tool-icon{ flex:0 0 44px; height:44px; - border-radius:50%; - background:radial-gradient(circle at 30% 20%,#ffffffee,transparent), - linear-gradient(145deg,#4fa65a,#2c6fb3); + border-radius:14px; + background: + radial-gradient(circle at 25% 15%,#ffffffee,transparent), + linear-gradient(145deg,#f4f9ff,#d7ecff); display:flex; align-items:center; justify-content:center; - font-size:20px; - color:#0f2234; - box-shadow:0 2px 6px #00000055 + font-size:22px; + color:#4a7bb6; + box-shadow:0 3px 8px #00000026 } .tool-content{ display:flex; flex-direction:column; - gap:.1rem; + gap:.06rem; min-width:0 } .tool-name{ font-size:.98rem; font-weight:600; - color:#e8f3ff; + color:#0f2234; text-decoration:underline; text-underline-offset:2px; white-space:nowrap; @@ -146,7 +157,19 @@ .tool-label{ font-size:.78rem; - opacity:.82 + color:#4c6b85; + display:flex; + flex-wrap:wrap; + gap:.4rem; + align-items:center + } + + .tool-tag{ + padding:.05rem .45rem; + border-radius:999px; + background:#e5f3ff; + font-size:.7rem; + color:#2f6fa1 } .warn{ @@ -160,14 +183,15 @@ @media(max-width:640px){ main{padding:100vh 5vw 3.6rem} .section{margin-bottom:2.1rem;padding:1.1rem 1rem .9rem} - .section h2{font-size:1.0rem} + .section h2{font-size:.96rem} .tool-card{ - padding:.7rem .8rem; + padding:.78rem .9rem; gap:.75rem } .tool-icon{ flex-basis:40px; - height:40px + height:40px; + font-size:20px } .tool-name{font-size:.94rem} .tool-label{font-size:.74rem} @@ -343,14 +367,20 @@