/* * Country Club — registration widget * ---------------------------------- * The dialog a community's own page opens when a guest presses Register: the * identity form, the questions, the card fields and the closed/declined notices. * * Four rules govern everything below, and they exist because this stylesheet is * injected into pages we did not write: * * 1. EVERY selector is under `.cc-`, and nothing here styles a bare element. * A rule on `button` or `input` would silently restyle the host page. * 2. EVERY property is reset explicitly on the elements we create. The host * page's own `* { box-sizing }`, its font stack and its `button { }` rules * all reach inside our dialog, so anything left to inherit is a lottery. * 3. THE PAGE DECIDES HOW THIS LOOKS. Every internal token below reads a * `--cc-*` custom property from the host page first and falls back to ours * only when the page has not set one. A community's registration dialog * should look like their site, not like a Country Club dialog that landed * on it — so the values here are a backstop, not a design. * 4. What we keep regardless of the page is the LAYOUT: sizes, spacing, * focus rings, the 44px hit targets, the scroll behaviour. Those are * accessibility and correctness, not taste, and a page cannot opt out of * them by leaving a variable unset. * * The public contract — the names a page sets, all optional: * * --cc-font body text --cc-accent primary button * --cc-heading-font titles --cc-accent-text text on the accent * --cc-text main text --cc-danger errors * --cc-muted secondary text --cc-success confirmations * --cc-surface dialog panel --cc-radius corner radius * --cc-surface-alt inset areas --cc-shadow dialog shadow * --cc-field input background --cc-scrim behind the dialog * --cc-border hairlines --cc-focus focus ring * * The widget also ADOPTS the page automatically when these are absent: it reads * the body's font and colour and the Register button's own background, and sets * the same variables inline. A page that sets nothing still gets its own look; * a page that sets a variable always wins over what was adopted. See AGENT.md, * and `data-cc-style="fixed"` to switch adoption off entirely. * * Light is the default and dark follows `prefers-color-scheme`. A community that * wants to force one sets `data-cc-theme="dark"` on — and note the dark * values below are also routed through the same `--cc-*` names, so a page that * chose a colour keeps it in both themes rather than having it swapped out from * under them. */ .cc-root { /* Light — the backstop. Each of these is "the page's value, or ours". */ --ccw-bg: var(--cc-page, #fffbf5); --ccw-surface: var(--cc-surface, #fffefc); --ccw-surface-2: var(--cc-surface-alt, #f7f2ea); --ccw-field: var(--cc-field, var(--cc-surface, #fffefc)); --ccw-ink: var(--cc-text, #1c1a18); --ccw-muted: var(--cc-muted, #635951); --ccw-subtle: var(--cc-muted, #6f655c); --ccw-border: var(--cc-border, rgba(12, 10, 9, 0.08)); --ccw-border-strong: var(--cc-border-strong, var(--cc-border, rgba(12, 10, 9, 0.16))); --ccw-gold: var(--cc-focus, var(--cc-accent, #d4a84b)); --ccw-gold-ink: var(--cc-accent, #7a560d); --ccw-danger: var(--cc-danger, #a83a2c); --ccw-success: var(--cc-success, #3d7a4f); --ccw-scrim: var(--cc-scrim, rgba(28, 26, 24, 0.55)); --ccw-shadow: var(--cc-shadow, 0 24px 60px -20px rgba(12, 10, 9, 0.35)); /* The primary button is its own pair rather than ink-on-page, because a page that names an accent expects to see it on the button it is paying for. */ --ccw-accent: var(--cc-accent, var(--ccw-ink)); --ccw-accent-ink: var(--cc-accent-text, var(--ccw-bg)); /* One radius is enough for most pages; the other two exist for the rest. */ --ccw-radius-sm: var(--cc-radius-sm, var(--cc-radius, 8px)); --ccw-radius-md: var(--cc-radius, 12px); --ccw-radius-lg: var(--cc-radius-lg, var(--cc-radius, 16px)); --ccw-sans: var(--cc-font, "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif); --ccw-serif: var(--cc-heading-font, var(--cc-font, "Fraunces", ui-serif, Georgia, "Times New Roman", serif)); --ccw-ease: cubic-bezier(0.2, 0, 0, 1); } @media (prefers-color-scheme: dark) { .cc-root:not([data-cc-theme="light"]) { --ccw-bg: var(--cc-page, #151413); --ccw-surface: var(--cc-surface, #1c1b1a); --ccw-surface-2: var(--cc-surface-alt, #232120); --ccw-field: var(--cc-field, var(--cc-surface, #1c1b1a)); --ccw-ink: var(--cc-text, #faf9f6); --ccw-muted: var(--cc-muted, #a8a29e); --ccw-subtle: var(--cc-muted, #a8a29e); --ccw-border: var(--cc-border, rgba(250, 249, 246, 0.09)); --ccw-border-strong: var(--cc-border-strong, var(--cc-border, rgba(250, 249, 246, 0.18))); --ccw-gold: var(--cc-focus, var(--cc-accent, #e5b84a)); --ccw-gold-ink: var(--cc-accent, #e5b84a); --ccw-danger: var(--cc-danger, #e08579); --ccw-success: var(--cc-success, #7cc294); --ccw-scrim: var(--cc-scrim, rgba(0, 0, 0, 0.66)); --ccw-shadow: var(--cc-shadow, 0 24px 60px -20px rgba(0, 0, 0, 0.7)); } } .cc-root[data-cc-theme="dark"] { --ccw-bg: var(--cc-page, #151413); --ccw-surface: var(--cc-surface, #1c1b1a); --ccw-surface-2: var(--cc-surface-alt, #232120); --ccw-field: var(--cc-field, var(--cc-surface, #1c1b1a)); --ccw-ink: var(--cc-text, #faf9f6); --ccw-muted: var(--cc-muted, #a8a29e); --ccw-subtle: var(--cc-muted, #a8a29e); --ccw-border: var(--cc-border, rgba(250, 249, 246, 0.09)); --ccw-border-strong: var(--cc-border-strong, var(--cc-border, rgba(250, 249, 246, 0.18))); --ccw-gold: var(--cc-focus, var(--cc-accent, #e5b84a)); --ccw-gold-ink: var(--cc-accent, #e5b84a); --ccw-danger: var(--cc-danger, #e08579); --ccw-success: var(--cc-success, #7cc294); --ccw-scrim: var(--cc-scrim, rgba(0, 0, 0, 0.66)); --ccw-shadow: var(--cc-shadow, 0 24px 60px -20px rgba(0, 0, 0, 0.7)); } /* ------------------------------------------------------------------ */ /* Scrim + shell */ /* ------------------------------------------------------------------ */ .cc-root { position: fixed; inset: 0; z-index: 2147483000; /* Above a host page's own sticky headers, below nothing. */ display: flex; align-items: center; justify-content: center; padding: 16px; background: var(--ccw-scrim); font-family: var(--ccw-sans); font-size: 16px; line-height: 1.55; color: var(--ccw-ink); -webkit-font-smoothing: antialiased; animation: cc-fade 200ms var(--ccw-ease); } .cc-root[hidden] { display: none; } .cc-root *, .cc-root *::before, .cc-root *::after { box-sizing: border-box; } .cc-dialog { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 520px; max-height: calc(100dvh - 32px); overflow: hidden; background: var(--ccw-surface); border: 1px solid var(--ccw-border); border-radius: var(--ccw-radius-lg); box-shadow: var(--ccw-shadow); animation: cc-rise 320ms var(--ccw-ease); } @keyframes cc-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes cc-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .cc-root, .cc-dialog { animation: none; } } /* ------------------------------------------------------------------ */ /* Header */ /* ------------------------------------------------------------------ */ .cc-header { display: flex; align-items: flex-start; gap: 12px; padding: 24px 24px 16px; border-bottom: 1px solid var(--ccw-border); } .cc-header-text { flex: 1 1 auto; min-width: 0; } .cc-eyebrow { margin: 0 0 4px; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ccw-gold-ink); } .cc-title { margin: 0; font-family: var(--ccw-serif); font-size: 22px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.25; color: var(--ccw-ink); } .cc-subtitle { margin: 6px 0 0; font-size: 14px; color: var(--ccw-muted); } .cc-close { flex: 0 0 auto; width: 32px; height: 32px; padding: 0; margin: -4px -4px 0 0; font: inherit; font-size: 20px; line-height: 1; color: var(--ccw-muted); background: transparent; border: 1px solid transparent; border-radius: var(--ccw-radius-sm); cursor: pointer; transition: background 200ms var(--ccw-ease), color 200ms var(--ccw-ease); } .cc-close:hover { background: var(--ccw-surface-2); color: var(--ccw-ink); } /* ------------------------------------------------------------------ */ /* Body */ /* ------------------------------------------------------------------ */ .cc-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 20px 24px; } .cc-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 24px 20px; border-top: 1px solid var(--ccw-border); background: var(--ccw-surface); } .cc-footer-note { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 12px; color: var(--ccw-subtle); } /* Progress — one dot per step, so a guest can see how long this is. */ .cc-steps { display: flex; gap: 6px; padding: 0 24px 16px; } .cc-step { flex: 1 1 0; height: 3px; border-radius: 999px; background: var(--ccw-border-strong); transition: background 320ms var(--ccw-ease); } .cc-step[data-state="done"], .cc-step[data-state="current"] { background: var(--ccw-gold); } /* ------------------------------------------------------------------ */ /* Fields */ /* ------------------------------------------------------------------ */ .cc-field { margin: 0 0 14px; } .cc-field:last-child { margin-bottom: 0; } .cc-label { display: block; margin: 0 0 6px; font-size: 13px; font-weight: 500; letter-spacing: 0.01em; color: var(--ccw-ink); } .cc-label .cc-required { color: var(--ccw-danger); } .cc-hint { margin: 4px 0 0; font-size: 12px; color: var(--ccw-subtle); } .cc-input, .cc-textarea { display: block; width: 100%; padding: 10px 12px; font-family: var(--ccw-sans); font-size: 15px; line-height: 1.4; color: var(--ccw-ink); background: var(--ccw-field); border: 1px solid var(--ccw-border-strong); border-radius: var(--ccw-radius-sm); outline: none; transition: border-color 200ms var(--ccw-ease), box-shadow 200ms var(--ccw-ease); -webkit-appearance: none; appearance: none; } .cc-textarea { min-height: 92px; resize: vertical; } .cc-input:focus, .cc-textarea:focus, .cc-hosted-field.cc-focus { border-color: var(--ccw-gold); box-shadow: 0 0 0 3px rgba(212, 168, 75, 0.22); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ccw-gold) 26%, transparent); } .cc-input[aria-invalid="true"], .cc-hosted-field.cc-invalid { border-color: var(--ccw-danger); } .cc-row { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; } @media (max-width: 420px) { .cc-row { grid-template-columns: 1fr; } } /* ------------------------------------------------------------------ */ /* Choices */ /* ------------------------------------------------------------------ */ .cc-choices { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; } .cc-choice { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 12px 14px; font-family: var(--ccw-sans); font-size: 15px; text-align: left; color: var(--ccw-ink); background: var(--ccw-bg); border: 1px solid var(--ccw-border-strong); border-radius: var(--ccw-radius-sm); cursor: pointer; transition: border-color 200ms var(--ccw-ease), background 200ms var(--ccw-ease); } .cc-choice:hover { border-color: var(--ccw-gold); } .cc-choice[aria-pressed="true"], .cc-choice[aria-checked="true"] { border-color: var(--ccw-gold); background: rgba(212, 168, 75, 0.1); background: color-mix(in srgb, var(--ccw-gold) 12%, transparent); } .cc-choice-mark { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; border: 1px solid var(--ccw-border-strong); border-radius: 999px; background: var(--ccw-surface); transition: border-color 200ms var(--ccw-ease), background 200ms var(--ccw-ease); } .cc-choice[data-multi="true"] .cc-choice-mark { border-radius: 5px; } .cc-choice[aria-pressed="true"] .cc-choice-mark, .cc-choice[aria-checked="true"] .cc-choice-mark { border-color: var(--ccw-gold); background: var(--ccw-gold); box-shadow: inset 0 0 0 3px var(--ccw-surface); } .cc-choice-text { flex: 1 1 auto; min-width: 0; } .cc-choice-subtitle { display: block; margin-top: 2px; font-size: 13px; color: var(--ccw-muted); } /* ------------------------------------------------------------------ */ /* Buttons */ /* ------------------------------------------------------------------ */ .cc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; font-family: var(--ccw-sans); font-size: 15px; font-weight: 500; line-height: 1; text-decoration: none; white-space: nowrap; color: var(--ccw-accent-ink); background: var(--ccw-accent); border: 1px solid var(--ccw-accent); border-radius: var(--ccw-radius-md); cursor: pointer; transition: opacity 200ms var(--ccw-ease), transform 200ms var(--ccw-ease); } .cc-btn:hover { opacity: 0.88; } .cc-btn:active { transform: translateY(1px); } .cc-btn[disabled] { opacity: 0.5; cursor: not-allowed; } .cc-btn-ghost { color: var(--ccw-ink); background: transparent; border-color: var(--ccw-border-strong); } .cc-btn-ghost:hover { background: var(--ccw-surface-2); opacity: 1; } /* ------------------------------------------------------------------ */ /* Notices */ /* ------------------------------------------------------------------ */ .cc-notice { display: flex; gap: 10px; padding: 12px 14px; margin: 0 0 16px; font-size: 14px; border: 1px solid var(--ccw-border-strong); border-radius: var(--ccw-radius-sm); background: var(--ccw-surface-2); color: var(--ccw-muted); } .cc-notice:last-child { margin-bottom: 0; } .cc-notice-error { border-color: color-mix(in srgb, var(--ccw-danger) 40%, transparent); background: color-mix(in srgb, var(--ccw-danger) 8%, transparent); color: var(--ccw-danger); } .cc-notice-success { border-color: color-mix(in srgb, var(--ccw-success) 40%, transparent); background: color-mix(in srgb, var(--ccw-success) 8%, transparent); color: var(--ccw-success); } /* ------------------------------------------------------------------ */ /* Payment */ /* ------------------------------------------------------------------ */ .cc-amount { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 16px; margin: 0 0 18px; background: var(--ccw-surface-2); border: 1px solid var(--ccw-border); border-radius: var(--ccw-radius-md); } .cc-amount-label { font-size: 13px; color: var(--ccw-muted); } .cc-amount-value { font-family: var(--ccw-serif); font-size: 26px; font-weight: 500; letter-spacing: -0.01em; font-variant-numeric: lining-nums tabular-nums; color: var(--ccw-ink); } /* * Collect.js replaces these with same-origin iframes it owns, so the *inside* of * the field is styled by the JS (it passes CSS through to the iframe) and the * outside — the border, the focus ring — is styled here. Both halves have to * agree on the height or the caret sits off-centre. */ .cc-hosted-field { display: block; width: 100%; height: 42px; padding: 0 4px; overflow: hidden; background: var(--ccw-bg); border: 1px solid var(--ccw-border-strong); border-radius: var(--ccw-radius-sm); transition: border-color 200ms var(--ccw-ease), box-shadow 200ms var(--ccw-ease); } .cc-hosted-field iframe { display: block; width: 100%; height: 100%; border: 0; } .cc-secure { display: flex; align-items: center; gap: 6px; margin: 14px 0 0; font-size: 12px; color: var(--ccw-subtle); } /* ------------------------------------------------------------------ */ /* Success */ /* ------------------------------------------------------------------ */ .cc-done { padding: 8px 0 4px; text-align: center; } .cc-done-mark { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin: 0 auto 16px; font-size: 26px; color: #241c0c; background: linear-gradient(135deg, #ecc77a, #c89b3c); border-radius: 999px; } .cc-done-title { margin: 0 0 6px; font-family: var(--ccw-serif); font-size: 24px; font-weight: 500; letter-spacing: -0.01em; color: var(--ccw-ink); } .cc-done-text { margin: 0 0 20px; font-size: 15px; color: var(--ccw-muted); } /* ------------------------------------------------------------------ */ /* Utility */ /* ------------------------------------------------------------------ */ .cc-spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 999px; animation: cc-spin 660ms linear infinite; } @keyframes cc-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .cc-spinner { animation-duration: 2s; } } .cc-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .cc-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 32px 0; color: var(--ccw-muted); }