/* ========================================================== DRONES — FORM CANVAS (Aviation / Drone-Services identity) Layer: 6 (template override) — template-local, drones-only ────────────────────────────────────────────────────────── PURPOSE A presentation-only "Form Canvas" skin for the drones template, applied on top of the shared, universal form renderer (web/partials/_form_module_render.php) WITHOUT touching it. This is FPS Tier 1 (tokens — already in effect via 00-tokens.css) + Tier 2 (this per-template CSS layer). See docs/FPS-FORM-PRESENTATION-SYSTEM.md §5. HARD RULES honoured here - ZERO renderer change. ZERO shared-CSS change. ZERO schema/JS. - Single renderer only — this is a skin, NOT a fork. - Loaded ONLY when the drones template is active (linked from drones/head-css.php), so it can never affect another template. CASCADE (critical) form-module.css is emitted INLINE in AFTER all CSS (renderer ~L130), so an equal-specificity head-loaded override LOSES on source order. Every rule below therefore anchors on `.form-module.form-module--boxed` (two real classes on the same section element) → child selectors reach (0,3,0) and BEAT the base's (0,2,0)/(0,1,0) regardless of load order. No !important. (Pattern: claude-memory §19.7 / §19.8.) REQUIRED SLOT CONFIG (admin) The canvas is scoped to the BOXED layout. The drones form slot must be configured with layout = "boxed" (+ show_title for the header). If layout is changed, the skin gracefully detaches and the form falls back to the tokenised universal base (never broken). ========================================================== */ /* ── Card frame + top accent bar ─────────────────────────── */ .form-module.form-module--boxed .form-module__inner { position: relative; overflow: hidden; border: 1px solid var(--mt-border-default, #e2e8f0); border-radius: var(--mt-radius-lg, 16px); box-shadow: var(--mt-shadow-lg, 0 12px 30px rgba(0, 0, 0, .10)); } .form-module.form-module--boxed .form-module__inner::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: var(--mt-gradient-primary, linear-gradient(135deg, #0B63C5, #2E9FD4)); } /* ── Header: mission icon badge + title treatment ────────── */ .form-module.form-module--boxed .form-module__heading { padding-top: 6px; } .form-module.form-module--boxed .form-module__heading::before { content: "\f072"; /* Font Awesome 6 — fa-plane (aviation glyph) */ font-family: "Font Awesome 6 Free"; font-weight: 900; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin: 0 auto 14px; border-radius: var(--mt-radius-full, 999px); background: var(--mt-gradient-primary, linear-gradient(135deg, #0B63C5, #2E9FD4)); color: #fff; font-size: 1.25rem; box-shadow: 0 6px 18px rgba(11, 99, 197, .30); } .form-module.form-module--boxed .form-module__title { letter-spacing: var(--mt-tracking-tight, -0.02em); } .form-module.form-module--boxed .form-module__subtitle { max-width: 560px; margin: 0 auto; } /* ── Mission-style section titles ────────────────────────── */ .form-module.form-module--boxed .form-module__section-title { display: flex; align-items: center; gap: 10px; text-transform: uppercase; letter-spacing: var(--mt-tracking-wide, .04em); font-size: 1.05rem; border-bottom-color: var(--mt-accent, #06B6D4); } .form-module.form-module--boxed .form-module__section-title::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: var(--mt-accent, #06B6D4); flex-shrink: 0; } /* ── Aviation-cyan focus accent ──────────────────────────── */ .form-module.form-module--boxed .form-module__input:focus, .form-module.form-module--boxed .form-module__textarea:focus, .form-module.form-module--boxed .form-module__select:focus { border-color: var(--mt-accent, #06B6D4); box-shadow: 0 0 0 3px rgba(6, 182, 212, .20); } .form-module.form-module--boxed .form-module__option:hover { border-color: var(--mt-accent, #06B6D4); } /* ── Submit control — gradient + centred ─────────────────── */ .form-module.form-module--boxed .form-module__controls { justify-content: center; } .form-module.form-module--boxed .form-module__btn--primary { background: var(--mt-gradient-primary, linear-gradient(135deg, #0B63C5, #2E9FD4)); letter-spacing: var(--mt-tracking-wide, .04em); box-shadow: 0 6px 18px rgba(11, 99, 197, .25); } .form-module.form-module--boxed .form-module__btn--primary:hover { background: var(--mt-brand-primary-hover, #0A55A8); } /* ── Section bottom spacing (DPX gap refinement) ────────────── The shared form-module.css sets .form-module--boxed { padding: 40px 16px }. Below the boxed card that 40px bottom padding stacked with the DPX page-shell padding, leaving a visible gap above the footer. Trim ONLY the section bottom padding for drones boxed forms. Anchored on `.form-module.form-module--boxed` (0,2,0) to beat the base (0,1,0) by specificity — no !important, no shared-CSS change. Top + horizontal padding are inherited from the base shorthand (preserved). */ .form-module.form-module--boxed { padding-bottom: 16px; } /* ── Mobile ──────────────────────────────────────────────── */ @media (max-width: 640px) { .form-module.form-module--boxed .form-module__inner { border-radius: var(--mt-radius-md, 10px); } .form-module.form-module--boxed .form-module__heading::before { width: 44px; height: 44px; font-size: 1.05rem; } .form-module.form-module--boxed .form-module__section-title { font-size: 1rem; } }