/* * 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); } /* ------------------------------------------------------------------------------------------------------- * Manifest-rendered forms — the "no-InDesign" path (ManifestFormRenderer). Everything here is scoped to * , which in5 bundles never carry, so this layout can't touch a designed bundle. * The border/validation treatment above still applies (shared); this adds page layout, cards, field rows, * choice groups, buttons and status popups so a form built purely from the manifest looks like the site. * ------------------------------------------------------------------------------------------------------- */ .rcn-rendered { --rcn-rf-max: 640px; --rcn-rf-blue: var(--rcn-valid-border, #17458f); --rcn-rf-gold: #f7a81b; margin: 0; background: #f5f7fb; color: #222; font-family: 'Open Sans', system-ui, sans-serif; } .rcn-rf-header { text-align: center; padding: 1.5rem 1rem 0.25rem; } .rcn-rf-logo { height: 64px; width: auto; } .rcn-rf-main { max-width: var(--rcn-rf-max); margin: 0 auto; padding: 0.75rem 1.25rem 2rem; } .rcn-rf-title { color: var(--rcn-rf-blue); font-size: 1.7rem; margin: 0.6rem 0 0.2rem; text-align: center; } .rcn-rf-subtitle { color: #666; text-align: center; margin: 0 0 1rem; } .rcn-rf-description { color: #444; line-height: 1.55; margin: 0 0 1.4rem; } .rcn-rf-description > :first-child { margin-top: 0; } .rcn-rf-description a { color: var(--rcn-rf-blue); } /* Section cards. */ .rcn-participant, .rcn-registration, .rcn-business { background: #fff; border-radius: 12px; padding: 1.1rem 1.2rem; margin-bottom: 1rem; box-shadow: 0 4px 16px rgba(12, 60, 124, 0.08); } .rcn-participant { border-top: 4px solid var(--rcn-rf-gold); } .rcn-participant-title { color: var(--rcn-rf-blue); font-size: 1.05rem; margin: 0 0 0.6rem; } /* Field rows: label above a full-width control. */ .rcn-field { display: block; margin: 0 0 0.8rem; } .rcn-field-label { display: block; font-weight: 600; font-size: 0.9rem; color: #333; margin-bottom: 0.25rem; } .rcn-rendered .rcn-field input, .rcn-rendered .rcn-field select, .rcn-rendered .rcn-field textarea { width: 100%; box-sizing: border-box; min-height: 2.4rem; padding: 0.4rem 0.6rem; border: var(--rcn-field-border-width, 2px) solid #ccd3df; border-radius: 6px; font: inherit; background: #fff; } /* Locked (category-gated) fields read as greyed, not the in5 "transparent/invisible" treatment. The global input:disabled rule uses !important, so these overrides do too — higher specificity settles the tie. */ .rcn-rendered .rcn-field input:disabled, .rcn-rendered .rcn-field select:disabled, .rcn-rendered .rcn-field textarea:disabled { border-color: #e3e7ee !important; background-color: #f3f5f9 !important; color: #9aa2b1; } .rcn-rendered .rcn-field input:disabled::placeholder { color: #b9c0cc !important; } /* Single inline checkbox: box + label on one row. */ .rcn-field-check { display: flex; align-items: center; gap: 0.5rem; } .rcn-field-check .rcn-field-label { margin: 0; font-weight: 400; } /* Radio group. */ .rcn-choice { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; } .rcn-choice-opt { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 400; } .rcn-rendered .rcn-field-check input, .rcn-rendered .rcn-choice-opt input { width: auto !important; min-height: 0 !important; padding-left: 0 !important; } /* Buttons. */ .rcn-btn { font: 600 0.95rem/1 'Open Sans', system-ui, sans-serif; border: 0; border-radius: 8px; padding: 0.7rem 1.3rem; cursor: pointer; } .rcn-btn-submit { background: var(--rcn-rf-blue); color: #fff; font-size: 1.05rem; padding: 0.8rem 1.8rem; } .rcn-btn-add { background: #eef2f9; color: var(--rcn-rf-blue); } .rcn-btn-remove { background: transparent; color: #b0301f; padding: 0.5rem 0.8rem; } .rcn-participant-actions { display: flex; gap: 0.6rem; margin-top: 0.4rem; } /* Table reservations (docs/29): mode selector + book/join panels. Scoped to the rendered form. */ .rcn-rendered .rcn-tables { max-width: var(--rcn-rf-max); margin: 0 auto 1.25rem; padding: 1.1rem 1.25rem; background: #f6f8fc; border: 1px solid #e3e9f3; border-radius: 12px; } .rcn-tables-intro { margin: 0 0 0.8rem; color: #444; } .rcn-rendered .rcn-table-mode { display: flex; flex-direction: column; gap: 0.5rem; border: 0; margin: 0 0 0.8rem; padding: 0; } .rcn-rendered .rcn-table-mode .rcn-choice-opt { font-weight: 600; } .rcn-rendered .rcn-table-book, .rcn-rendered .rcn-table-join { padding-top: 0.3rem; } .rcn-rendered .rcn-btn-verify { background: #eef2f9; color: var(--rcn-rf-blue); margin-top: 0.2rem; } .rcn-table-summary { margin: 0.5rem 0 0; font-weight: 600; min-height: 1.2em; } .rcn-table-summary.rcn-ok { color: #1c6b34; } .rcn-table-summary.rcn-ko { color: #b0301f; } .rcn-rf-total { max-width: var(--rcn-rf-max); margin: 0.3rem auto 1rem; padding: 0 1.25rem; text-align: right; font-size: 1.15rem; font-weight: 700; color: var(--rcn-rf-blue); } .rcn-rf-submit { max-width: var(--rcn-rf-max); margin: 0 auto; padding: 0 1.25rem; text-align: center; } .rcn-rf-footer { text-align: center; color: #888; font-size: 0.85rem; padding: 1.5rem 1rem 2rem; } /* Status popups — the engine toggles their visibility; style as a centered toast. */ .rcn-rendered .rcn-popup { position: fixed; left: 50%; top: 1.5rem; transform: translateX(-50%); z-index: 1000; max-width: 90%; padding: 0.9rem 1.4rem; border-radius: 10px; font-weight: 600; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2); background: #fff; color: #222; } .rcn-rendered .rcn-popup-success { background: #e7f6ec; color: #1c6b34; } .rcn-rendered .rcn-popup-invalid, .rcn-rendered .rcn-popup-error { background: #fdecea; color: #b0301f; } .rcn-rendered .rcn-popup-sending { background: #eef2f9; color: var(--rcn-rf-blue); }