/* * rcn-styles.css — shared form styling injected into every in5 bundle (served at /forms/rcn-styles.css, * inserted near the top of by the bundle route). Carries the field border treatment + the * manifest-driven validation styling used by rcn-forms-core.js (the .rcn-invalid highlight + the floating * .rcn-field-error tooltip). Modelled on the "Action Vin" reference form (the norm); themeable via CSS * custom properties, so a per-bundle stylesheet (loaded after this one) can override any value. Scoped so * it never restyles a form's non-form content. */ /* * RC International Branding Colors * * #17458f Rotary Royal Blue Masterbrand Signature * #f7a81b Rotary Gold Masterbrand Signature * #0067c8 Rotary Azure Masterbrand Signature * #00a2e0 Sky Blue Interact * #d41367 Cranberry Rotaract * #e02927 Cardinal End Polio Now * #00adbb Turquoise * #ff7600 Orange * #901f93 Violet * #009739 Grass * #b9d9eb Powder Blue * #a7aca2 Moss * #c6bcd0 Lavender * #d9c89e Taupe * #9ba4b4 Mist * #657f99 Slate * #54565a Charcoal * #898a8d Pewter * #b1b1b1 Smoke * #d0cfcd Silver * #ffffff White * #000000 Black * #7a6e66 Storm * #968b83 Ash * #bfb7b0 Platinum * #d6d1ca Cloud * * Rotary Golf Club NE * * #184279 Navy * #93a9c3 Powder * #dbd5d5 Sand * #e8edf3 Field */ :root { /* field border treatment */ --rcn-field-padding-left: 10px; --rcn-field-border-width: 2px; --rcn-valid-border: #17458f; /* Rotary Royal Blue */ --rcn-invalid-border: #e02927; /* Rotary Cardinal */ --rcn-field-bg: transparent; --rcn-disabled-border: transparent; --rcn-disabled-bg: transparent; /* validation tooltip */ --rcn-error-bg: #e02927; --rcn-error-color: #ffffff; --rcn-error-radius: 6px; --rcn-error-font: inherit; } /* Comfortable left padding so input text isn't flush against the border. */ input, textarea { padding-left: var(--rcn-field-padding-left, 10px) !important; } /* Border treatment: required = solid, optional = dotted; disabled/read-only blend out (incl. placeholder). */ input { border-width: var(--rcn-field-border-width, 2px) !important; } input:required { border-style: solid !important; } input:optional { border-style: dotted !important; } input:read-only, input:disabled { border-color: var(--rcn-disabled-border, transparent) !important; background-color: var(--rcn-disabled-bg, transparent) !important; } input:disabled::placeholder { color: transparent !important; } /* Valid = blue (continuous). Invalid = red via the engine-toggled .rcn-invalid class (shown on blur/submit, cleared when valid). Swap `.rcn-invalid` for `input:invalid` if you want continuous, on-load feedback. */ input:valid { border-color: var(--rcn-valid-border, #17458f) !important; background-color: var(--rcn-field-bg, transparent) !important; } .rcn-invalid { border-color: var(--rcn-invalid-border, #e02927) !important; background-color: var(--rcn-field-bg, transparent) !important; } /* Floating explanation tooltip, anchored just under the focused/invalid field. */ .rcn-field-error { position: fixed; z-index: 99999; max-width: 280px; padding: 6px 10px; background: var(--rcn-error-bg); color: var(--rcn-error-color); font: 600 13px/1.35 var(--rcn-error-font); border-radius: var(--rcn-error-radius); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25); pointer-events: none; } .rcn-field-error::before { content: ""; position: absolute; left: 12px; top: -5px; border: 5px solid transparent; border-top: 0; border-bottom-color: var(--rcn-error-bg); }