/* --------------------------------------------------------------------------- * order_form.css * * Scoped styling for the redesigned legacy order form (templates/form_redesigned.html). * * base_redesigned.html ships Tailwind, whose Preflight reset strips native * styling from the bare widgets Django renders ({{ form.email }} etc.). Rather * than add classes in shop/forms.py (which is shared with the legacy * form.html), we restyle those widgets here, scoped to `.order-form`, in the * cream / orange design tokens used across the redesigned pages. * * This stylesheet is only loaded by form_redesigned.html, so the few global * rules below (`.btn`, the pgwModal popups) are safe — pgwModal relocates the * popup markup to , outside `.order-form`, so those rules can't be * scoped to the form wrapper. * ------------------------------------------------------------------------- */ :root { --ejm-orange: #ff8400; --ejm-orange-dark: #e67700; --ejm-border: #e3d9c6; --ejm-border-soft: #f1e6d3; } /* --- Text inputs, selects, textareas ------------------------------------- */ .order-form input[type="text"], .order-form input[type="email"], .order-form input[type="tel"], .order-form input[type="number"], .order-form input[type="url"], .order-form input[type="date"], .order-form input[type="file"], .order-form input:not([type]), .order-form textarea, .order-form select { width: 100%; padding: 0.625rem 0.75rem; border: 1px solid #ffd9ad; border-radius: 0.5rem; background-color: #ffffff; font-size: 0.95rem; line-height: 1.4; color: #1f2937; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .order-form input[type="text"]:focus, .order-form input[type="email"]:focus, .order-form input[type="tel"]:focus, .order-form input[type="number"]:focus, .order-form input[type="url"]:focus, .order-form input[type="date"]:focus, .order-form input:not([type]):focus, .order-form textarea:focus, .order-form select:focus { outline: none; border-color: var(--ejm-orange); box-shadow: 0 0 0 3px rgba(255, 132, 0, 0.15); } .order-form textarea { min-height: 90px; resize: vertical; } .order-form input[type="file"] { padding: 0.5rem 0.75rem; font-size: 0.9rem; cursor: pointer; } /* --- Labels -------------------------------------------------------------- */ .order-form label { display: inline-block; margin-bottom: 0.35rem; font-weight: 600; color: #374151; } /* --- Radios & checkboxes ------------------------------------------------- */ .order-form input[type="radio"], .order-form input[type="checkbox"] { width: auto; margin-right: 0.45rem; accent-color: var(--ejm-orange); } .order-form .form-check-label { display: inline-flex; align-items: center; margin-bottom: 0.4rem; margin-right: 1.25rem; font-weight: 500; color: #374151; cursor: pointer; } .order-form .form-check-label span { font-weight: 500; } /* --- Section headings ---------------------------------------------------- */ .order-form .form-step { margin-top: 2rem; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--ejm-border-soft); font-size: 1.25rem; font-weight: 600; color: #111827; } .order-form .form-step--accent { border-bottom: 2px solid var(--ejm-orange); } .order-form .form-substep { margin-top: 1.25rem; margin-bottom: 0.5rem; font-size: 1.05rem; font-weight: 600; color: #374151; } /* --- Cards / boxes ------------------------------------------------------- */ .order-form .form-card { margin-bottom: 1rem; padding: 1rem 1.25rem; background-color: #fffaf2; border: 1px solid var(--ejm-border-soft); border-radius: 0.75rem; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); } .order-form .form-card--warning { border-color: #fbbf24; background-color: #fffbeb; } .order-form .form-card p { color: #374151; } /* --- Inline alert (e.g. controlled-product notice) ----------------------- */ .order-form .form-alert { margin-bottom: 1rem; padding: 1rem 1.25rem; border-radius: 0.5rem; } .order-form .form-alert--amber { border-left: 4px solid #f59e0b; background-color: #fffbeb; color: #92400e; } /* --- Product table ------------------------------------------------------- */ .order-form #id_orders_table { width: 100%; border-collapse: collapse; table-layout: fixed; } .order-form #id_orders_table th:first-child { width: 70%; } .order-form #id_orders_table th:last-child { width: 30%; } .order-form #id_orders_table th { padding: 0.25rem 0.5rem 0.5rem; text-align: left; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: #6b7280; } .order-form #id_orders_table td { padding: 0.35rem 0.5rem; vertical-align: top; } .order-form #id_orders_table td:first-child { width: 70%; } .order-form #id_orders_table td.quantity-cell { width: 30%; vertical-align: top; display: flex; align-items: center; gap: 8px; } .order-form #id_orders_table input.quantity { text-align: center; width: 100px; flex-shrink: 0; } /* --- jquery.formset add / delete row links ------------------------------- */ .order-form .add-row, .order-form .delete-row { display: inline-flex; align-items: center; justify-content: center; width: 28px; min-width: 28px; height: 28px; min-height: 28px; flex-shrink: 0; text-indent: 0; background: #fff3e6; color: #ffd9ad; border: 1px solid #ffd9ad; border-radius: 6px; text-decoration: none; vertical-align: middle; transition: color 0.15s ease, border-color 0.15s ease; } .order-form .add-row:hover, .order-form .delete-row:hover { color: var(--ejm-orange); border-color: var(--ejm-orange); background: #fff3e6; } .order-form .delete-row { margin: 0; } /* --- Submit button ------------------------------------------------------- */ .order-form input[type="submit"] { display: inline-flex; align-items: center; justify-content: center; width: auto; padding: 0.7rem 1.75rem; border: none; border-radius: 0.5rem; background-color: var(--ejm-orange); color: #fff; font-size: 1rem; font-weight: 600; cursor: pointer; transition: background-color 0.15s ease; } .order-form input[type="submit"]:hover { background-color: var(--ejm-orange-dark); } /* --- Keyboard-key style buttons inside copypaste.html + pgwModal popups --- * * These are global on purpose: pgwModal moves the popup markup to , * outside `.order-form`, and this stylesheet only loads on the order page. */ .btn { display: inline-block; padding: 0 0.5rem; border-radius: 0.3rem; background-color: #e5e7eb; color: #374151; font-weight: 700; font-size: 0.8rem; line-height: 1.7; text-decoration: none; cursor: pointer; } .btn.orange { background-color: var(--ejm-orange); color: #fff; padding: 0.5rem 1.25rem; font-size: 0.95rem; } .btn.orange:hover { background-color: var(--ejm-orange-dark); } .btn.light-gray { background-color: #e5e7eb; color: #374151; } .btn.light-gray:hover { background-color: #d1d5db; }