diff --git a/src/components/Header.astro b/src/components/Header.astro index dfa0753..b19c3a4 100644 --- a/src/components/Header.astro +++ b/src/components/Header.astro @@ -17,11 +17,11 @@ const isActive = (href: string) => {
\ No newline at end of file + + .wl-input { + width: 100%; + background-color: #ffffff; + border: 1.5px solid #e2e8f0; + border-radius: 10px; + padding: 13px 16px; + font-family: 'Manrope', sans-serif; + font-size: 15px; + line-height: 1.6; + color: #131b2c; + transition: all 0.2s; + outline: none; + box-sizing: border-box; + } + + .wl-input::placeholder { + color: #b0b8c4; + } + + .wl-input:hover { + border-color: #c3c5d7; + } + + .wl-input:focus { + border-color: #1550d3; + box-shadow: 0 0 0 3px rgba(21, 80, 211, 0.1); + } + + .wl-textarea { + resize: vertical; + min-height: 80px; + } + + .select-wrapper { + position: relative; + width: 100%; + } + + .wl-select { + width: 100%; + background-color: #ffffff; + border: 1.5px solid #e2e8f0; + border-radius: 10px; + padding: 13px 44px 13px 16px; + font-family: 'Manrope', sans-serif; + font-size: 15px; + line-height: 1.6; + color: #131b2c; + transition: all 0.2s; + outline: none; + box-sizing: border-box; + appearance: none; + -webkit-appearance: none; + -moz-appearance: none; + cursor: pointer; + } + + .wl-select:invalid { + color: #b0b8c4; + } + + .wl-select option { + color: #131b2c; + background-color: #ffffff; + font-family: 'Manrope', sans-serif; + font-size: 15px; + padding: 12px; + } + + .wl-select:hover { + border-color: #c3c5d7; + } + + .wl-select:focus { + border-color: #1550d3; + box-shadow: 0 0 0 3px rgba(21, 80, 211, 0.1); + } + + .select-arrow { + position: absolute; + right: 12px; + top: 50%; + transform: translateY(-50%); + color: #737686; + font-size: 22px; + pointer-events: none; + transition: color 0.2s; + } + + .wl-select:focus + .select-arrow { + color: #1550d3; + } + + .wl-checkbox { + display: flex; + align-items: center; + gap: 10px; + font-family: 'Manrope', sans-serif; + font-size: 14px; + color: #434654; + cursor: pointer; + } + + .wl-checkbox input[type="checkbox"] { + width: 18px; + height: 18px; + cursor: pointer; + accent-color: #1550d3; + } + + .wl-submit-btn { + width: 100%; + background: linear-gradient(135deg, #1550d3, #583dde); + color: #ffffff; + font-family: 'Inter', sans-serif; + font-size: 14px; + letter-spacing: 0.03em; + font-weight: 600; + padding: 16px; + border-radius: 12px; + border: none; + cursor: pointer; + transition: all 0.3s; + box-shadow: 0 8px 24px rgba(21, 80, 211, 0.2); + display: flex; + align-items: center; + justify-content: center; + gap: 8px; + } + + .wl-submit-btn:hover { + transform: translateY(-1px); + box-shadow: 0 12px 32px rgba(21, 80, 211, 0.3); + } + + +