/* boat.css — styles **only** for the Boat claim form page ----------------------------------------------------------------- Usage: add `class="boat-claim"` to *or* include this file only on /forms/boat so the selectors below don’t affect other pages. All colour tokens / resets / typography live in base.css. */ /* 1. Page‑specific backdrop ---------------------------------------- */ body.boat-claim { /* ocean‑to‑sand feel */ background: linear-gradient(180deg, var(--blue) 0%, var(--sand) 60%, var(--sand) 100%); } /* 2. Form card ----------------------------------------------------- */ .boat-claim form { background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(4px); padding: 2rem; border-radius: 16px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08); max-width: 60rem; margin-inline: auto; } /* 3. Fieldsets & legends ------------------------------------------ */ .boat-claim fieldset { border: none; margin: 0 0 2rem; } .boat-claim legend { font-size: 1.25rem; font-weight: 600; margin-bottom: 1rem; } /* 4. Layout grid --------------------------------------------------- */ .boat-claim .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem 2rem; margin-bottom: 1.5rem; } /* 5. Inputs -------------------------------------------------------- */ .boat-claim input, .boat-claim select, .boat-claim textarea { width: 100%; padding: 0.65rem 0.75rem; border: 2px solid var(--navy); border-radius: 8px; font: inherit; background: var(--white); accent-color: var(--blue); } .boat-claim input[type="file"] { padding: 0.4rem; border: none; } .boat-claim textarea { min-height: 140px; resize: vertical; } /* 6. Submit button ------------------------------------------------- */ .boat-claim .btn-submit { display: inline-block; padding: 14px 32px; background: var(--lime); border: none; border-radius: 12px; font-weight: 700; font-size: 1rem; cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); transition: transform 0.15s, box-shadow 0.15s; margin-top: 1rem; } .boat-claim .btn-submit:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15); } /* 7. Small util: focus style -------------------------------------- */ .boat-claim :focus-visible { outline: 3px solid color-mix(in srgb, var(--blue) 60%, #fff); outline-offset: 2px; } /* Custom file upload styling */ .boat-claim .file-upload-group { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; } .boat-claim input[type="file"] { display: none; } .boat-claim .custom-file-label { display: inline-block; padding: 0.65rem 1rem; background: var(--white); border: 2px solid var(--navy); border-radius: 8px; font-weight: 600; color: var(--navy); cursor: pointer; transition: background 0.2s, border-color 0.2s; } .boat-claim .custom-file-label:hover { background: color-mix(in srgb, var(--blue) 10%, white); border-color: var(--blue); } .boat-claim .thankyou-card { background: rgba(255, 255, 255, 0.9); padding: 2rem; border-radius: 16px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08); max-width: 50rem; margin-inline: auto; text-align: left; } .boat-claim .thankyou-card h1 { font-size: 1.5rem; margin-bottom: 1rem; } .boat-claim .thankyou-card ul { list-style: none; padding: 0; margin: 1rem 0; } .boat-claim .thankyou-card li { margin-bottom: 0.5rem; font-size: 1rem; }