/* ============================================================================= * Community Coordinator application — additions to the shared .cap-* kit * ----------------------------------------------------------------------------- * This page reuses assets/css/career-apply.css for the section shell, the * glass card, the floating-label fields and the buttons. Only what that kit * does not have lives here: * * .coa (on the section) brand palette * .coa-role the three role cards above the form * .coa-formwrap / .coa-fs the single long form and its numbered sections * .coa-pick large radio cards for choosing a position * .coa-chips checkbox groups (skills, focus areas, languages) * .coa-yn yes / no pairs * .coa-grid the education qualification rows * .coa-doc the ten-slot document checklist * .coa-declare the declaration block * .coa-next the "what happens next" strip below the form * * Motion budget matches the parent kit: transform and opacity only, and every * transition is dropped under prefers-reduced-motion. * ========================================================================== */ /* ------------------------------------------------------------------ palette */ /* The .cap kit ships a generic blue. Repaint it in a vibrant tomato/red scale rather than forking the stylesheet — every child rule reads these vars, so the gradients, focus rings, chips, buttons and section numbers all follow. --cap-shadow-rgb is the one addition: the kit hardcodes a navy rgba in several box-shadows, which would have left blue glows under red buttons. */ .cap.coa { --cap-primary: #A81B0B; /* deep tomato, for gradient ends and headings */ --cap-secondary: #E23A1E; /* the working red: borders, focus, links */ --cap-tomato: #FF6347; /* true tomato, the bright mid-tone */ --cap-accent: #F59300; /* warm amber for "done / attached" states */ --cap-warm: #FFB020; --cap-grad: linear-gradient(135deg, #A81B0B 0%, #E23A1E 52%, #FF6347 100%); --cap-bg: #FFF6F3; --cap-shadow-rgb: 168, 27, 11; /* tomato, for every glow below */ } :root[data-theme="dark"] .cap.coa { --cap-bg: #150907; } .cap.coa .cap-blob.b1 { background: radial-gradient(circle, var(--cap-tomato), transparent 68%); } .cap.coa .cap-blob.b2 { background: radial-gradient(circle, var(--cap-accent), transparent 68%); } .cap.coa .cap-blob.b3 { background: radial-gradient(circle, var(--cap-primary), transparent 72%); opacity: .26; } .cap.coa .cap-mesh { background-image: radial-gradient(at 18% 22%, rgba(226, 58, 30, .18) 0, transparent 52%), radial-gradient(at 82% 14%, rgba(255, 99, 71, .16) 0, transparent 48%), radial-gradient(at 68% 88%, rgba(245, 147, 0, .14) 0, transparent 50%); } /* The kit's own shadows and the badge gradient are hardcoded blue — restate the handful that are actually visible on this page in the tomato scale. */ .cap.coa .cap-badge { box-shadow: 0 8px 22px -8px rgba(var(--cap-shadow-rgb), .55); } .cap.coa .cap-btn { box-shadow: 0 12px 26px -12px rgba(var(--cap-shadow-rgb), .70); } .cap.coa .cap-btn:hover { box-shadow: 0 18px 34px -14px rgba(var(--cap-shadow-rgb), .80); } .cap.coa .cap-why-card:hover { box-shadow: 0 18px 38px -18px rgba(var(--cap-shadow-rgb), .42); } /* ------------------------------------------------------- reveal, made safe */ /* career-apply.css hides .cap-rv at opacity:0 until a script adds .is-in, and it does that whether or not the script ever runs. On a page whose main content is a form, one JS failure means a blank page — so on this page the hidden state applies ONLY when scripting is known to be live (the header puts `js` on ). Without it, everything is visible from the first paint. */ html:not(.js) .coa .cap-rv { opacity: 1; transform: none; transition: none; } /* ============================================================================= * Readability of the long form — why this section exists * ----------------------------------------------------------------------------- * The .cap kit was built for a SMALL glass card floating over a compact hero: * 74%-transparent card, backdrop-filter blur+saturate(160%), 60%-transparent * fields, and three blurred colour blobs behind it all. At that size it looks * expensive. * * This form is 6,450px tall. Stretched over that, the decorative blobs and the * mesh gradient sat directly behind the fields, saturate(160%) pushed the green * through the translucent card, and every label ended up pale grey on pale * green. The page read as "the form isn't showing" — it was there, at roughly * the contrast of a watermark. * * So on this page the card is an opaque reading surface, the fields are solid, * and the decoration is confined to the top of the section where the intro is. * ========================================================================== */ /* Decoration belongs to the intro, not to 6,000px of form. */ .cap.coa .cap-bg { inset: 0 0 auto; height: min(1200px, 100%); } .cap.coa .cap-bg::after { content: ''; position: absolute; inset: auto 0 0; height: 260px; background: linear-gradient(180deg, transparent, var(--cap-bg)); } /* ---------------------------------------------------- page-level structure */ .coa-intro { max-width: 62ch; margin: 0 auto 2.2rem; text-align: center; } .coa-intro .cap-lead { max-width: none; margin-left: auto; margin-right: auto; } /* One long form, centred and capped so the lines never run too wide to read. */ .coa-formwrap { max-width: 960px; margin: 0 auto; scroll-margin-top: 90px; } /* Opaque card: no transparency, no backdrop-filter, no colour bleeding through. */ .coa-formwrap .cap-card { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 24px 60px -32px rgba(var(--cap-shadow-rgb), .26); } :root[data-theme="dark"] .coa-formwrap .cap-card { background: #1a100e; } /* The animated gradient border reads as noise at this size — keep a quiet one. */ .coa-formwrap .cap-card::before { opacity: .22; animation: none; } /* Solid fields with a real border, so a label is always legible against them. */ .coa .cap-f > input, .coa .cap-f > select, .coa .cap-f > textarea, .coa .coa-grid input, .coa .coa-grid textarea { background: #fffaf8; border-color: rgba(120, 40, 25, .18); } .coa .cap-f > input:focus, .coa .cap-f > select:focus, .coa .cap-f > textarea:focus, .coa .coa-grid input:focus, .coa .coa-grid textarea:focus { background: #fff; } :root[data-theme="dark"] .coa .cap-f > input, :root[data-theme="dark"] .coa .cap-f > select, :root[data-theme="dark"] .coa .cap-f > textarea, :root[data-theme="dark"] .coa .coa-grid input, :root[data-theme="dark"] .coa .coa-grid textarea { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); } /* Same for the pickable surfaces, which were translucent for the same reason. */ .coa .coa-pick label, .coa .coa-chips label, .coa .coa-doc, .coa .coa-yn-stack .coa-yn { background: #fffaf8; } .coa .coa-chips input:checked + label { background: var(--cap-grad); } .coa .coa-doc.is-set { background: color-mix(in srgb, var(--cap-accent) 8%, #fff); } .coa .coa-pick input:checked + label { background: color-mix(in srgb, var(--cap-secondary) 7%, #fff); } :root[data-theme="dark"] .coa .coa-pick label, :root[data-theme="dark"] .coa .coa-chips label, :root[data-theme="dark"] .coa .coa-doc, :root[data-theme="dark"] .coa .coa-yn-stack .coa-yn { background: rgba(255, 255, 255, .05); } /* Labels sit on white now, so they can carry proper weight. */ .coa .cap-f > label { color: #6b5a56; } .coa .coa-fs-head p, .coa .coa-note-line { color: #6b5a56; } :root[data-theme="dark"] .coa .cap-f > label, :root[data-theme="dark"] .coa .coa-fs-head p, :root[data-theme="dark"] .coa .coa-note-line { color: #94a3b8; } /* A