diff --git a/css/styles.css b/css/styles.css index 8513d8e..fd5b631 100644 --- a/css/styles.css +++ b/css/styles.css @@ -455,26 +455,75 @@ img { /* Tags Section */ .tags-section { - margin-bottom: 30px; + margin: 30px 0; overflow-x: auto; white-space: nowrap; - padding-bottom: 10px; + padding: 10px 0 20px; + text-align: center; + scrollbar-width: thin; + scrollbar-color: rgba(0, 0, 0, 0.2) transparent; + position: relative; +} + +.tags-section::-webkit-scrollbar { + height: 6px; +} + +.tags-section::-webkit-scrollbar-thumb { + background-color: rgba(0, 0, 0, 0.2); + border-radius: 10px; +} + +.tags-section::-webkit-scrollbar-track { + background-color: transparent; } .tag { - display: inline-block; - padding: 8px 15px; - margin-right: 10px; - border: 1px solid var(--tag-border); - border-radius: 20px; - font-size: 14px; - background-color: var(--tag-bg); + display: inline-flex; + align-items: center; + padding: 8px 16px; + margin: 0 8px 12px; + border: none; + border-radius: 50px; + font-size: 15px; + font-weight: 600; + background: linear-gradient(135deg, var(--tag-bg), #f0f0f0); cursor: pointer; - transition: background-color 0.2s; + transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94); + text-decoration: none; + color: #222; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08); + position: relative; + overflow: hidden; + letter-spacing: 0.3px; +} + +.tag::before { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: linear-gradient(135deg, var(--primary-red), #ff4d4d); + opacity: 0; + z-index: -1; + transition: opacity 0.3s ease; } .tag:hover { - background-color: rgba(0, 0, 0, 0.05); + color: white; + transform: translateY(-3px); + box-shadow: 0 5px 12px rgba(255, 0, 0, 0.2); +} + +.tag:hover::before { + opacity: 1; +} + +.tag:active { + transform: translateY(-1px); + box-shadow: 0 2px 6px rgba(255, 0, 0, 0.3); } /* Section Headers */