diff --git a/assets/css/components.css b/assets/css/components.css index 7cc732b..2d00e5b 100644 --- a/assets/css/components.css +++ b/assets/css/components.css @@ -1479,12 +1479,14 @@ details.faq-item p { .header-logo-sub { display: none; } } -/* Ultra-narrow phones (iPhone SE portrait, 320px) : tighten header */ +/* Narrow phones: drop Get Estimate btn, hamburger + logo only */ +@media (max-width: 480px) { + .header-cta .btn--sm { display: none; } + .header-inner { gap: var(--space-4); } +} + +/* Ultra-narrow phones (320px) */ @media (max-width: 360px) { - .header-cta .btn--sm { - padding-inline: 0.75rem; - font-size: 0.75rem; - } .header-logo img { height: 36px !important; } .container { padding-inline: 0.875rem; } } diff --git a/assets/css/main.css b/assets/css/main.css index 3cd0be9..3b1322f 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -238,13 +238,15 @@ p { max-width: 68ch; } } .form-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); } -.form-field { +.form-field, +.form-group { display: flex; flex-direction: column; gap: var(--space-2); } -.form-field label { +.form-field label, +.form-group label { font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.02em; @@ -253,7 +255,10 @@ p { max-width: 68ch; } .form-field input, .form-field textarea, -.form-field select { +.form-field select, +.form-group input, +.form-group textarea, +.form-group select { width: 100%; padding: 0.875rem 1rem; background: var(--white); @@ -268,15 +273,21 @@ p { max-width: 68ch; } .form-field input:focus, .form-field textarea:focus, -.form-field select:focus { +.form-field select:focus, +.form-group input:focus, +.form-group textarea:focus, +.form-group select:focus { border-color: var(--amber); box-shadow: 0 0 0 3px rgba(200,139,42,0.15); } -.form-field input.valid { border-color: #2d9e57; } -.form-field input.invalid { border-color: #c0392b; } +.form-field input.valid, +.form-group input.valid { border-color: #2d9e57; } +.form-field input.invalid, +.form-group input.invalid { border-color: #c0392b; } -.form-field textarea { +.form-field textarea, +.form-group textarea { min-height: 130px; resize: vertical; }