diff --git a/style.css b/style.css new file mode 100644 index 0000000..a2a437e --- /dev/null +++ b/style.css @@ -0,0 +1,186 @@ +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +body { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; + background: #f8f9fa; + color: #1a1a1a; + line-height: 1.6; +} + +.container { + max-width: 720px; + margin: 0 auto; + padding: 40px 20px 80px; +} + +header { + text-align: center; + margin-bottom: 48px; +} + +h1 { + font-size: 2rem; + font-weight: 700; + margin-bottom: 8px; + color: #1a1a1a; +} + +.subtitle { + color: #666; + font-size: 1rem; + margin-bottom: 24px; +} + +.progress-bar { + width: 100%; + height: 6px; + background: #e0e0e0; + border-radius: 3px; + overflow: hidden; + margin-bottom: 8px; +} + +.progress-fill { + height: 100%; + background: #2d6a4f; + border-radius: 3px; + transition: width 0.3s ease; + width: 0%; +} + +.progress-text { + font-size: 0.85rem; + color: #888; +} + +.section { + background: #fff; + border-radius: 12px; + padding: 32px; + margin-bottom: 24px; + box-shadow: 0 1px 4px rgba(0,0,0,0.06); +} + +.section h2 { + font-size: 1.1rem; + font-weight: 600; + color: #2d6a4f; + margin-bottom: 24px; + padding-bottom: 12px; + border-bottom: 2px solid #e8f5e9; +} + +.question { + margin-bottom: 28px; +} + +.question:last-child { + margin-bottom: 0; +} + +label { + display: block; + font-weight: 500; + margin-bottom: 8px; + font-size: 0.95rem; +} + +textarea, input[type="text"], input[type="email"], input[type="tel"] { + width: 100%; + padding: 12px 14px; + border: 1.5px solid #ddd; + border-radius: 8px; + font-size: 0.95rem; + font-family: inherit; + color: #1a1a1a; + background: #fafafa; + transition: border-color 0.2s; + resize: vertical; +} + +textarea { + min-height: 80px; +} + +textarea:focus, input:focus { + outline: none; + border-color: #2d6a4f; + background: #fff; +} + +textarea.comment { + min-height: 50px; + margin-top: 8px; + font-size: 0.88rem; + color: #555; + background: #f5f5f5; +} + +textarea.comment::placeholder { + color: #aaa; + font-style: italic; +} + +button[type="submit"] { + display: block; + width: 100%; + padding: 16px; + background: #2d6a4f; + color: #fff; + border: none; + border-radius: 10px; + font-size: 1.1rem; + font-weight: 600; + cursor: pointer; + transition: background 0.2s, transform 0.1s; + margin-top: 32px; +} + +button[type="submit"]:hover { + background: #1b4332; +} + +button[type="submit"]:active { + transform: scale(0.99); +} + +button[type="submit"]:disabled { + background: #aaa; + cursor: not-allowed; +} + +.submit-note { + text-align: center; + color: #888; + font-size: 0.85rem; + margin-top: 12px; +} + +.error-message { + background: #fff3f3; + border: 1px solid #f5c6cb; + color: #721c24; + padding: 12px 16px; + border-radius: 8px; + margin-top: 16px; + font-size: 0.9rem; + display: none; +} + +@media (max-width: 600px) { + .container { + padding: 24px 16px 60px; + } + + .section { + padding: 20px; + } + + h1 { + font-size: 1.5rem; + } +}