/** * Dojo Kanri — Public Styles * Version: 1.14.0 * Phase: Shortcode frames — booking detail two-column + bundles + discounts * Updated: 2026-08-25 — v1.14.0: [dkmm_membership] design pass — entry rows with a * chevron (dot rules removed), collapsed person rows, field-level error marking, * visually-hidden radio legends, the dismissible Your group line, and the renewal * identity row / payment subject / portal link. Guardian tints removed. * Updated: 2026-08-24 — v1.13.0: Google sign-in button + portal handoff link * * Styles for all public-facing shortcodes. * Designed to work within any WordPress theme with minimal conflicts. * * File: wordpress-plugin/dojo-kanri/assets/css/dk-public.css */ /* ========================================================================== Base / Reset ========================================================================== */ .dk-club-finder, .dk-events, .dk-events-member, .dk-join, .dk-login, .dk-dashboard, .dk-profile, .dk-login-required { font-family: inherit; /* theme-agnostic: inherit the host theme font */ font-size: 14px; line-height: 1.5; color: #1f2937; /* §0 v4 palette tokens — also declared on the legacy .dk-* roots so the accent/ink/tint vars resolve here (the dkmm-* roots declare them too). */ --dkmm-accent: #2563eb; --dkmm-accent-hover: #1d4ed8; --dkmm-accent-soft: #eff4ff; --dkmm-border: #e6e9f0; --dkmm-ink: #111827; --dkmm-pill-bg: #f1f3f7; --dkmm-pill-txt: #475569; --dkmm-type-course-fg: #3f4b66; --dkmm-type-grading-fg: #4d4666; --dkmm-type-tournament-fg: #665636; --dkmm-type-social-fg: #42584b; } .dk-club-finder *, .dk-events *, .dk-events-member *, .dk-join *, .dk-login *, .dk-dashboard *, .dk-profile * { box-sizing: border-box; } /* ========================================================================== Pre-flight (design §0): theme-agnostic + defensive containment The public dkmm-* shortcode roots inherit the host theme font and stay contained inside narrow theme columns (Divi etc.). Styling only — no markup or logic change. Reuses the club-finder containment pattern. ========================================================================== */ .dkmm-events, .dkmm-instructors, .dkmm-members-hub, .dkmm-wc-orders { font-family: inherit; box-sizing: border-box; width: 100%; max-width: 100%; min-width: 0; font-size: 14px; line-height: 1.5; color: #1f2937; } .dkmm-events *, .dkmm-instructors *, .dkmm-members-hub *, .dkmm-wc-orders * { box-sizing: border-box; min-width: 0; /* flex/grid children shrink rather than overflow the column */ } /* §9 polish tokens — the app's dashboard-card craft, shared by every dkmm-* surface AND the portaled detail/booking modals (which relocate to on open, so they declare the tokens on themselves too). Reworked surfaces reference these instead of repeating raw values. */ .dkmm-events, .dkmm-instructors, .dkmm-members-hub, .dkmm-wc-orders, .dkmm-events__detail, #dkmm-book-modal { --dkmm-accent: #2563eb; --dkmm-accent-hover: #1d4ed8; --dkmm-accent-soft: #eff4ff; /* selected cards, signed-in bar, count pills */ --dkmm-border: #e6e9f0; --dkmm-hair: #f1f3f7; /* dividers */ --dkmm-ink: #111827; /* headings, PRICES & TOTALS (never green), key values */ /* §0 v4 status pill — neutral pill + small muted dot (not coloured fills) */ --dkmm-pill-bg: #f1f3f7; --dkmm-pill-txt: #475569; --dkmm-dot-done: #5a8a6b; --dkmm-dot-progress: var(--dkmm-accent); --dkmm-dot-attention: #b08947; --dkmm-dot-neutral: #cbd5e1; /* §0 v4 event-type tints — one quiet desaturated tint each (bg / glyph). Used ONLY on the date chip, the small type tag, and calendar dots. */ --dkmm-type-course-bg: #eef1f7; --dkmm-type-course-fg: #3f4b66; --dkmm-type-grading-bg: #f1eef6; --dkmm-type-grading-fg: #4d4666; --dkmm-type-tournament-bg: #f5f1e9; --dkmm-type-tournament-fg: #665636; --dkmm-type-social-bg: #edf1ee; --dkmm-type-social-fg: #42584b; --dkmm-radius-card: 16px; --dkmm-radius-panel: 14px; --dkmm-radius-ctl: 10px; --dkmm-elev: 0 1px 2px rgba(16, 24, 40, 0.05), 0 14px 28px -18px rgba(16, 24, 40, 0.22); --dkmm-elev-hover: 0 1px 2px rgba(16, 24, 40, 0.06), 0 18px 38px -16px rgba(16, 24, 40, 0.28); --dkmm-cta-shadow: 0 1px 2px rgba(37, 99, 235, 0.35), 0 6px 14px -6px rgba(37, 99, 235, 0.45); --dkmm-tint: linear-gradient(#fbfcfe, #f7f9fc); } .dkmm-events img, .dkmm-instructors img, .dkmm-members-hub img, .dkmm-wc-orders img { max-width: 100%; height: auto; } /* ========================================================================== Common Components ========================================================================== */ .dk-error { background-color: #fef2f2; border: 1px solid #fecaca; color: #991b1b; padding: 12px 16px; border-radius: 6px; font-size: 14px; } .dk-error a { color: #991b1b; text-decoration: underline; } .dk-input { width: 100%; padding: 8px 12px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 14px; color: #1f2937; background: #fff; outline: none; transition: border-color 0.15s; } .dk-input:focus { border-color: var(--dkmm-accent); box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15); } .dk-select { padding: 8px 12px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 14px; color: #1f2937; background: #fff; outline: none; } /* Sign-up single page (spec §4.1): real .ipt2-style fields — taller, slightly bolder text, less rounded — mirroring the booking-lookup .dkmm-book-input. Scoped to the join form so the member portal/profile inputs are unchanged. */ .dk-join .dk-input, .dk-join .dk-select { height: 46px; /* equal-height controls — date input matches text (spec §4.1e) */ padding: 0 13px; border: 1.5px solid #cbd2dc; border-radius: 8px; font-size: 14.5px; font-weight: 600; line-height: normal; } .dk-join .dk-input:focus, .dk-join .dk-select:focus { border-color: var(--dkmm-accent); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); } .dk-join .dk-input::placeholder { font-weight: 500; color: #9ca3af; } .dk-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border: none; border-radius: 6px; font-size: 14px; font-weight: 500; cursor: pointer; transition: background-color 0.15s; text-decoration: none; } .dk-btn--primary { background-color: var(--dkmm-accent); color: #fff; } .dk-btn--primary:hover { background-color: var(--dkmm-accent-hover); } .dk-btn--secondary { background-color: #f3f4f6; color: #374151; border: 1px solid #d1d5db; } .dk-btn--secondary:hover { background-color: var(--dkmm-border); } .dk-btn:disabled { opacity: 0.6; cursor: not-allowed; } .dk-login-required { text-align: center; padding: 40px 20px; } .dk-login-required p { margin-bottom: 16px; color: #6b7280; } /* ========================================================================== Club Finder ========================================================================== */ /* Container constraints — keep the widget inside Divi columns / theme wrappers. Children claim the parent's width but never exceed it, so nothing overflows when rendered inside a narrow column. */ .dk-club-finder { width: 100%; max-width: 100%; } /* Defensive: Divi sections containing the Club Finder must size to content. Some Divi pages cache an explicit `height` on the section in the compiled unified CSS, which prevents the section from growing as our cards render. */ .et_pb_section:has(.dk-club-finder) { height: auto !important; min-height: 0 !important; } .dk-club-finder__toolbar, .dk-club-finder__map-wrap, .dk-club-finder__map, .dk-club-finder__clubs { width: 100%; max-width: 100%; } .dk-club-finder__toolbar { margin-bottom: 12px; } .dk-club-finder__search-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; } .dk-club-finder__search-input { flex: 1 1 200px; min-width: 0; max-width: 320px; } .dk-club-finder__radius { flex: 0 0 auto; } /* Defensive: form controls must not inherit oversized heading/text styles (e.g. when the shortcode is mistakenly placed inside an

). / .dk-club-finder input, .dk-club-finder select, .dk-club-finder button, .dk-club-finder .dk-input, .dk-club-finder .dk-select, .dk-club-finder .dk-btn { font-size: 14px; line-height: 1.5; font-weight: 400; text-transform: none; letter-spacing: normal; } .dk-club-finder .dk-btn { font-weight: 500; } .dk-club-finderradius:disabled { opacity: 0.6; cursor: not-allowed; background-color: #f9fafb; } .dk-club-findernear-me { flex: 0 0 auto; } / Near-me / Show-all carry an icon + label; under 480px collapse to icon-only so the search row stays one tidy line (audit §1 A1). The label is kept in the DOM (visually hidden) for screen readers and the JS "Locating…" state. / .dk-club-findernear-me, .dk-club-findershow-all { display: inline-flex; align-items: center; gap: 6px; } .dk-club-finderbtn-ic { flex: none; } @media (max-width: 480px) { .dk-club-findernear-me span, .dk-club-findershow-all span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .dk-club-findernear-me, .dk-club-findershow-all { gap: 0; padding-left: 10px; padding-right: 10px; } } / Map wrapper — relative so the caption can be positioned over the map / .dk-club-findermap-wrap { position: relative; margin-bottom: 12px; } .dk-club-findermap { border-radius: 8px; border: 1px solid var(--dkmm-border); min-height: 250px; z-index: 1; } / In-map caption (top-left overlay) / .dk-club-findermap-caption { position: absolute; top: 8px; left: 8px; z-index: 5; background: rgba(255, 255, 255, 0.95); color: #1f2937; padding: 6px 10px; border-radius: 4px; font-size: 13px; line-height: 1.35; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18); max-width: calc(100% - 80px); pointer-events: none; } .dk-club-findermap-caption:empty { display: none; } / Cards in a responsive grid — 1-up in a narrow column / sidebar, 2-up (or more) on wide pages (audit §1 A2: 2-up grid). / .dk-club-finderclubs { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; align-items: start; } .dk-club-finderempty { text-align: center; color: #6b7280; padding: 40px 20px; grid-column: 1 / -1; } / Geolocation modal / .dk-cf-modal { position: fixed; inset: 0; z-index: 99999; display: none; align-items: center; justify-content: center; padding: 16px; } .dk-cf-modalbackdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); } .dk-cf-modaldialog { position: relative; background: #fff; border-radius: 8px; padding: 24px; max-width: 420px; width: 100%; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); z-index: 1; } .dk-cf-modaltitle { margin: 0 0 12px; font-size: 18px; font-weight: 600; color: #1f2937; } .dk-cf-modalbody { margin: 0 0 20px; font-size: 14px; line-height: 1.5; color: #374151; } .dk-cf-modalactions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; } / Search messages (geolocation errors, etc.) / .dk-cf-search-msg { margin: 0 0 12px; padding: 10px 14px; border-radius: 6px; font-size: 13px; line-height: 1.5; } .dk-cf-search-msg--error { background-color: #fef2f2; border: 1px solid #fecaca; color: #991b1b; } .dk-cf-search-msg--info { background-color: var(--dkmm-accent-soft); border: 1px solid var(--dkmm-border); color: var(--dkmm-accent); } / Google Maps info window / .dk-cf-info-window { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; font-size: 13px; line-height: 1.5; max-width: 220px; / Leave space on the right so text doesn't run under Google's X button / padding-right: 18px; } / Trim Google's default info-window padding so the content sits close to the top of the bubble. The "close button row" (.gm-style-iw-chr) is the biggest offender — it reserves ~30-40px above the content for the X button. We absolutely-position it instead so the content starts at the top. / .gm-style .gm-style-iw-c { padding: 6px 12px 8px !important; } .gm-style .gm-style-iw-d { padding-top: 0 !important; overflow: visible !important; } .gm-style .gm-style-iw-chr { position: absolute !important; top: 2px !important; right: 2px !important; height: auto !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; } .gm-style .gm-style-iw-chr button { width: 28px !important; height: 28px !important; } / Club Card / .dk-club-card { position: relative; background: #fff; border: 1px solid var(--dkmm-border); border-radius: 8px; padding: 16px; transition: box-shadow 0.15s; } .dk-club-card:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } / Per-card close button (top-right) / .dk-club-cardclose { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; padding: 0; background: transparent; border: 0; border-radius: 4px; color: #9ca3af; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; line-height: 1; transition: background-color 0.15s, color 0.15s; } .dk-club-cardclose:hover, .dk-club-cardclose:focus { background: #f3f4f6; color: #1f2937; outline: none; } .dk-club-cardheader { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; } .dk-club-cardname { font-size: 16px; font-weight: 600; margin: 0; color: #111827; } .dk-club-carddistance { font-size: 12px; color: var(--dkmm-accent); white-space: nowrap; font-weight: 500; background-color: var(--dkmm-accent-soft); padding: 2px 8px; border-radius: 9999px; } .dk-club-cardlocations { margin-bottom: 10px; } .dk-club-cardlocation { display: flex; align-items: flex-start; gap: 6px; font-size: 13px; color: #6b7280; margin-bottom: 4px; } .dk-club-cardlocation svg { flex-shrink: 0; margin-top: 2px; color: #9ca3af; } / Sessions toggle button / / Sessions header — non-interactive label with the session count / .dk-club-cardsessions-header { display: flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 11px; font-weight: 600; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.05em; } .dk-club-cardsessions-header svg { color: #9ca3af; flex-shrink: 0; } / Sessions list — always expanded / .dk-club-cardsessions { margin-top: 6px; } .dk-club-cardsession { padding: 8px 0; border-bottom: 1px solid #f3f4f6; } .dk-club-cardsession:last-child { border-bottom: none; } .dk-club-cardsession-row { display: flex; align-items: baseline; gap: 12px; } .dk-club-cardsession-day { font-weight: 600; font-size: 13px; color: #1f2937; min-width: 80px; } .dk-club-cardsession-time { font-size: 13px; color: #374151; } .dk-club-cardsession-label { font-size: 12px; color: #6b7280; font-style: italic; margin-top: 2px; } .dk-club-cardsession-price { font-size: 12px; color: #111827; font-weight: 500; margin-top: 2px; } .dk-club-cardsession-constraints { font-size: 11px; color: #9ca3af; margin-top: 2px; } .dk-club-cardsession-school { font-size: 11px; color: #9ca3af; margin-top: 2px; font-weight: 600; } / Contact / .dk-club-cardcontact { margin-top: 12px; border-top: 1px solid #f3f4f6; padding-top: 10px; } .dk-club-cardcontact-label { font-size: 11px; font-weight: 600; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; } .dk-club-cardcontact-name { display: block; font-size: 14px; font-weight: 500; color: #1f2937; margin-bottom: 2px; } .dk-club-cardcontact-link { display: block; font-size: 13px; color: var(--dkmm-accent); text-decoration: none; } .dk-club-cardcontact-link:hover { text-decoration: underline; } / Phase 3a — phone / website lines + contact action button + distance badge / .dk-club-cardline { margin-top: 6px; font-size: 13px; color: #374151; } .dk-club-cardline-label { font-weight: 600; color: #6b7280; } .dk-club-cardline-link { color: var(--dkmm-accent); text-decoration: none; } .dk-club-cardline-link:hover { text-decoration: underline; } .dk-club-cardactions { margin-top: 12px; display: flex; justify-content: flex-end; } / Phase 3c — Instructors block on the card / .dk-club-cardinstructors { margin-top: 12px; border-top: 1px solid #f3f4f6; padding-top: 10px; } .dk-club-cardinstructors-label { font-size: 11px; font-weight: 600; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; } .dk-club-cardinstructor { display: flex; align-items: flex-start; gap: 10px; margin-top: 8px; padding: 10px 12px; background: #f9fafb; border: 1px solid var(--dkmm-border); border-radius: 6px; } .dk-club-cardinstructor-pic { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: #f3f4f6; } .dk-club-cardinstructor-pic--placeholder { display: inline-flex; align-items: center; justify-content: center; color: #9ca3af; } .dk-club-cardinstructor-body { flex: 1 1 auto; min-width: 0; } .dk-club-cardinstructor-name { font-size: 14px; font-weight: 500; color: #1f2937; } .dk-club-cardinstructor-grade { color: #6b7280; font-weight: 400; font-size: 13px; } .dk-club-cardinstructor-bio { margin-top: 4px; font-size: 13px; color: #4b5563; line-height: 1.5; white-space: pre-wrap; } .dk-club-cardcontact-btn { font-size: 13px; } / Phase 3b — Contact form modal / .dk-cf-contact-dialog { max-width: 500px; } .dk-cf-modalclose { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; padding: 0; background: transparent; border: 0; border-radius: 4px; color: #6b7280; font-size: 22px; line-height: 1; cursor: pointer; } .dk-cf-modalclose:hover { background: #f3f4f6; color: #1f2937; } .dk-cf-modalsubtitle { margin: 0 0 16px; font-size: 13px; color: #6b7280; } .dk-cf-contact-form { display: flex; flex-direction: column; gap: 12px; } .dk-cf-field { display: flex; flex-direction: column; gap: 4px; } .dk-cf-field label { font-size: 13px; font-weight: 500; color: #374151; } .dk-cf-req { color: #dc2626; } .dk-cf-field input, .dk-cf-field textarea { width: 100%; padding: 8px 10px; border: 1px solid #d1d5db; border-radius: 4px; font-size: 14px; font-family: inherit; box-sizing: border-box; } .dk-cf-field input:focus, .dk-cf-field textarea:focus { outline: none; border-color: var(--dkmm-accent); box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15); } .dk-cf-field textarea { resize: vertical; min-height: 100px; } .dk-cf-clean-warn { margin: 4px 0 0; font-size: 12px; color: #b45309; background: #fef3c7; border: 1px solid #fde68a; padding: 6px 8px; border-radius: 4px; } / Honeypot — hidden from humans (and accessibility), visible to bots / .dk-cf-honeypot { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; } .dk-cf-captcha { margin-top: 4px; } .dk-cf-contact-result { margin: 6px 0 0; font-size: 13px; min-height: 18px; } .dk-cf-contact-result--ok { color: #065f46; } .dk-cf-contact-result--err { color: #991b1b; } / ========================================================================== Events ========================================================================== / .dk-eventstoolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--dkmm-border); } .dk-eventsfilter .dk-select { min-width: 160px; } .dk-eventscount { font-size: 13px; color: #6b7280; font-weight: 500; } .dk-eventslist { display: grid; gap: 16px; } @media (min-width: 768px) { .dk-eventslist { grid-template-columns: repeat(2, 1fr); } } .dk-eventsempty { text-align: center; color: #6b7280; padding: 40px 20px; grid-column: 1 / -1; } / Event Card / .dk-eventscard { background: #fff; border: 1px solid var(--dkmm-border); border-radius: 10px; overflow: hidden; transition: box-shadow 0.15s, transform 0.15s; display: flex; flex-direction: column; } .dk-eventscard:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); transform: translateY(-1px); } / Coloured top accent bar by event type / .dk-eventscard[data-event-type="COURSE"] { border-top: 3px solid var(--dkmm-type-course-fg, #3f4b66); } .dk-eventscard[data-event-type="GRADING"] { border-top: 3px solid var(--dkmm-type-grading-fg, #4d4666); } .dk-eventscard[data-event-type="TOURNAMENT"] { border-top: 3px solid var(--dkmm-type-tournament-fg, #665636); } .dk-eventscard[data-event-type="SOCIAL"] { border-top: 3px solid var(--dkmm-type-social-fg, #42584b); } .dk-eventscard-header { padding: 16px 16px 12px; } .dk-eventscard-badges { margin-bottom: 8px; display: flex; gap: 6px; } .dk-eventscard-title { font-size: 17px; font-weight: 600; margin: 0 0 8px; color: #111827; line-height: 1.3; } .dk-eventscard-meta { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: #6b7280; } .dk-eventsdate { display: flex; align-items: center; gap: 6px; font-weight: 500; color: #374151; } .dk-eventslocation { display: flex; align-items: center; gap: 6px; } / Description / .dk-eventsdescription { padding: 0 16px; font-size: 13px; color: #6b7280; line-height: 1.5; margin-bottom: 12px; } / Tickets / .dk-eventstickets { border-top: 1px solid #f3f4f6; padding: 12px 16px; margin-top: auto; background-color: #fafafa; } .dk-eventstickets-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #9ca3af; margin: 0 0 8px; } .dk-eventsticket { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid #f0f0f0; } .dk-eventsticket:last-child { border-bottom: none; } .dk-eventsticket-info { flex: 1; min-width: 0; } .dk-eventsticket-name { display: block; font-size: 14px; font-weight: 500; color: #1f2937; } .dk-eventsticket-desc { display: block; font-size: 12px; color: #6b7280; margin-top: 2px; } .dk-eventsticket-price { font-size: 15px; font-weight: 700; color: #111827; white-space: nowrap; } .dk-eventsticket-status { white-space: nowrap; } .dk-eventsticket-avail { font-size: 12px; color: #6b7280; } / Contact / .dk-eventscontact { padding: 10px 16px; font-size: 13px; color: #6b7280; border-top: 1px solid #f3f4f6; background-color: #fafafa; } .dk-eventscontact a { color: var(--dkmm-accent); text-decoration: none; } .dk-eventscontact a:hover { text-decoration: underline; } / ========================================================================== Join — Multi-step Form ========================================================================== / .dk-joinsteps { display: flex; gap: 4px; margin-bottom: 24px; } .dk-joinstep-indicator { flex: 1; height: 4px; background-color: var(--dkmm-border); border-radius: 2px; transition: background-color 0.3s; } .dk-joinstep-indicator--active { background-color: var(--dkmm-accent); } .dk-joinstep-indicator--completed { background-color: #5a8a6b; } .dk-joinstep-title { font-size: 18px; font-weight: 600; color: #111827; margin: 0 0 16px; } .dk-joinform-group { margin-bottom: 16px; } .dk-joinform-group label { display: block; font-size: 13px; font-weight: 500; color: #374151; margin-bottom: 4px; } .dk-joinform-group .dk-input, .dk-joinform-group .dk-select { width: 100%; } .dk-joinform-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 480px) { .dk-joinform-row { grid-template-columns: 1fr; } } .dk-joinform-error { font-size: 12px; color: #dc2626; margin-top: 4px; } .dk-joinactions { display: flex; justify-content: space-between; margin-top: 24px; gap: 12px; } / Club Selection Cards / .dk-joinclub-list { display: grid; gap: 8px; } .dk-joinclub-option { background: #fff; border: 1.5px solid var(--dkmm-border); border-radius: 10px; padding: 14px 16px; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s; } .dk-joinclub-option:hover { border-color: var(--dkmm-accent); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 8px 18px -12px rgba(16, 24, 40, 0.22); } .dk-joinclub-option--selected { border-color: var(--dkmm-accent); background-color: var(--dkmm-accent-soft); box-shadow: 0 0 0 1px var(--dkmm-accent) inset; } .dk-joinclub-option h4 { margin: 0 0 2px; font-size: 15px; font-weight: 600; } .dk-joinclub-option span { font-size: 12px; color: #6b7280; } / Product Selection Cards / .dk-joinproduct-list { display: grid; gap: 8px; } .dk-joinproduct-option { background: #fff; border: 1.5px solid var(--dkmm-border); border-radius: 10px; padding: 14px 16px; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s; } .dk-joinproduct-option:hover { border-color: var(--dkmm-accent); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 8px 18px -12px rgba(16, 24, 40, 0.22); } .dk-joinproduct-option--selected { border-color: var(--dkmm-accent); background-color: var(--dkmm-accent-soft); box-shadow: 0 0 0 1px var(--dkmm-accent) inset; } .dk-joinproduct-name { font-size: 15px; font-weight: 600; color: #111827; margin: 0 0 4px; } .dk-joinproduct-desc { font-size: 13px; color: #6b7280; margin: 0 0 4px; } .dk-joinproduct-price { font-size: 16px; font-weight: 700; color: #111827; } / Payment Options / .dk-joingateway-list { display: grid; gap: 8px; } .dk-joingateway-option { background: #fff; border: 1.5px solid var(--dkmm-border); border-radius: 10px; padding: 14px 16px; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s; } .dk-joingateway-option:hover { border-color: var(--dkmm-accent); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 8px 18px -12px rgba(16, 24, 40, 0.22); } .dk-joingateway-option--selected { border-color: var(--dkmm-accent); background-color: var(--dkmm-accent-soft); box-shadow: 0 0 0 1px var(--dkmm-accent) inset; } / Bank Transfer Details / .dk-joinbank-details { background: #f9fafb; border: 1px solid var(--dkmm-border); border-radius: 8px; padding: 16px; margin-top: 12px; } .dk-joinbank-details dt { font-size: 12px; color: #6b7280; font-weight: 500; } .dk-joinbank-details dd { font-size: 14px; color: #111827; font-weight: 600; margin: 0 0 8px; } / Square Card Form Container / .dk-joincard-form { margin-top: 12px; min-height: 100px; } / Success State / .dk-joinsuccess { text-align: center; padding: 40px 20px; } .dk-joinsuccess-icon { font-size: 48px; margin-bottom: 16px; } .dk-joinsuccess h3 { font-size: 20px; font-weight: 600; color: #111827; margin: 0 0 8px; } .dk-joinsuccess p { color: #6b7280; margin: 0 0 4px; } / Guardian Fields / .dk-joinguardian-section { background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; padding: 16px; margin-top: 12px; } .dk-joinguardian-section h4 { font-size: 14px; font-weight: 600; color: #92400e; margin: 0 0 12px; } / ========================================================================== Join — single-page sign-up modal (§4.1) ========================================================================== / / Guest-hub teaser (spec §4.1 frame): plain accent card — sub-line + numbered accent-soft steps + a solid accent CTA (no gradient). / .dk-joinintro-sub { margin: 0 0 16px; font-size: 13px; line-height: 1.55; color: #6b7280; } .dk-joinintro-steps { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 10px; } .dk-joinintro-step { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #374151; } .dk-joinintro-chip { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: none; border-radius: 7px; background: var(--dkmm-accent-soft); color: var(--dkmm-accent); font-size: 12px; font-weight: 700; } .dk-joinopen { display: inline-flex; align-items: center; justify-content: center; width: 100%; padding: 12px 20px; border: 0; border-radius: 10px; background: var(--dkmm-accent); color: #fff; font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer; box-shadow: var(--dkmm-cta-shadow); } .dk-joinopen:hover { background: var(--dkmm-accent-hover); } .dk-joinmodal[hidden] { display: none; } .dk-joinmodal { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 20px; } .dk-joinbackdrop { position: absolute; inset: 0; background: rgba(16, 24, 40, 0.45); } .dk-joindialog { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 620px; max-height: 85vh; background: #fff; border-radius: 16px; box-shadow: 0 24px 60px -20px rgba(16, 24, 40, 0.5); overflow: hidden; } .dk-joinheader { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--dkmm-border); background: #fff; } .dk-jointitle { margin: 0; font-size: 18px; font-weight: 700; color: #111827; } .dk-joinclose { border: 0; background: transparent; font-size: 26px; line-height: 1; color: #6b7280; cursor: pointer; padding: 0 4px; } .dk-joinbody { padding: 20px; overflow-y: auto; } .dk-joinsection { padding: 0 0 22px; } .dk-joinsection + .dk-joinsection { border-top: 1px solid #f1f5f9; padding-top: 20px; } .dk-joinsection-title { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 15px; font-weight: 700; color: #111827; } .dk-joinsection-num { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 999px; background: var(--dkmm-accent-soft); color: var(--dkmm-accent); font-size: 13px; font-weight: 700; } .dk-joinhint, .dk-joinloading { color: #6b7280; font-size: 13.5px; margin: 0; } .dk-joinva-toggle { margin-top: 12px; font-size: 13.5px; } / Add-another-family-member blocks / .dk-joinmember { margin-top: 16px; padding: 14px; border: 1px solid var(--dkmm-border); border-radius: 12px; background: #fbfcfe; } .dk-joinmember-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-size: 13px; font-weight: 700; color: #374151; } .dk-joinmember-remove { border: 0; background: transparent; color: #b91c1c; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; } .dk-joinaddmember { margin-top: 14px; padding: 9px 14px; border: 1px dashed var(--dkmm-accent); border-radius: 10px; background: #fff; color: var(--dkmm-accent); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; } .dk-joinaddmember:hover { background: var(--dkmm-accent-soft); } / Selectable cards as buttons / .dk-joinclub-option, .dk-joinproduct-option, .dk-joingateway-option { width: 100%; text-align: left; font: inherit; cursor: pointer; } .dk-joinclub-name { display: block; font-size: 15px; font-weight: 600; color: #111827; margin-bottom: 4px; } .dk-joinproduct-name { display: block; font-size: 15px; font-weight: 600; color: #111827; } .dk-joinproduct-desc { display: block; font-size: 12.5px; color: #6b7280; margin: 2px 0; } .dk-joinproduct-price { display: block; font-size: 15px; font-weight: 700; color: #111827; margin-top: 4px; } .dk-joinproduct-price small { font-size: 12px; font-weight: 400; color: #6b7280; } / Sticky footer: live summary + single CTA / .dk-joinfooter { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 20px; border-top: 1px solid var(--dkmm-border); background: var(--dkmm-tint, #fbfcfe); } .dk-joinfooter[hidden] { display: none; } .dk-joinsummary { min-width: 0; flex: 1; font-size: 13.5px; } .dk-joinsummary-line { font-weight: 600; color: #1f2937; } .dk-joinsummary-empty { color: #9ca3af; } .dk-joincta { flex: none; padding: 11px 22px; border: 0; border-radius: 10px; background: var(--dkmm-accent); color: #fff; font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer; box-shadow: var(--dkmm-cta-shadow); } .dk-joincta:hover { background: var(--dkmm-accent-hover); } .dk-joincta:disabled { opacity: 0.7; cursor: default; } / Resend-confirmation affordance shown under a same-person join block (BL-046). / .dk-joinresend { margin: 10px 0 2px; padding: 8px 16px; border: 1px solid var(--dkmm-hair); border-radius: 8px; background: #fff; color: #374151; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; } .dk-joinresend:hover { background: #f9fafb; } .dk-joinresend:disabled { opacity: 0.7; cursor: default; } .dk-joinnotice { padding: 12px 14px; border: 1px solid #bbf7d0; border-radius: 8px; background: #f0fdf4; color: #166534; font-size: 13.5px; } .dk-joinsummary-total { margin-left: auto; font-size: 18px; font-weight: 800; color: #111827; } body.dk-join-modal-open { overflow: hidden; } / ========================================================================== Sign-up — compact one-screen form (board: WP Sign-up.dc.html, spec §4.1) Content-sized fields, two per row, membership last, accordion for extra people. ========================================================================== / .dk-joinrow { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 14px; } .dk-joinfield { display: flex; flex-direction: column; min-width: 0; max-width: 100%; } / no horizontal overflow (D5) / .dk-joinlab { font-size: 11px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: #6b7280; margin-bottom: 4px; } .dk-joinlab-note { font-weight: 400; text-transform: none; letter-spacing: 0; color: #9ca3af; } .dk-joindivider { height: 1px; background: var(--dkmm-hair); margin: 2px 0 16px; } .dk-joingrp { font-size: 11px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: #9ca3af; margin: 0 0 10px; } .dk-joincheck { display: flex; align-items: center; gap: 9px; font-size: 13px; color: #374151; margin: 2px 0 12px; cursor: pointer; } / Field widths — sized to content (spec §4.1d), wrap on narrow columns. / .dk-joinf--club { width: 280px; } .dk-joinf--name { width: 220px; } .dk-joinf--dob { width: 150px; } .dk-joinf--sex { width: 110px; } .dk-joinf--email { width: 290px; } .dk-joinf--phone { width: 170px; } .dk-joinf--town { width: 280px; } .dk-joinf--postcode { width: 130px; } .dk-joinf--plan { width: 340px; } .dk-joinf--mgr { width: 220px; } .dk-joinf--addr { flex: 1 1 0; min-width: 160px; } / Address 1 & 2 share a row, equal width / .dk-joinplan-loading { font-size: 12px; color: #9ca3af; margin-top: 5px; } / + Add a family member — subtle text link (not a heavy button). / .dk-joinaddmember { display: inline-flex; align-items: center; gap: 7px; margin: 4px 0 4px; padding: 6px 0; border: 0; background: none; color: var(--dkmm-accent); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; } .dk-joinaddmember-plus { font-size: 15px; line-height: 1; } / Additional people — collapsed accordion row + expanded card. / .dk-joinavatar { width: 32px; height: 32px; flex: none; border-radius: 9px; background: var(--dkmm-accent-soft); color: var(--dkmm-accent); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 11px; } .dk-joinacc { display: flex; align-items: center; gap: 11px; padding: 11px 13px; margin-bottom: 10px; border: 1px solid var(--dkmm-border); border-radius: 12px; } .dk-joinacc-main { flex: 1; min-width: 0; } .dk-joinacc-name { font-size: 13.5px; font-weight: 700; color: #111827; } .dk-joinacc-plan { font-size: 11.5px; color: #6b7280; } .dk-joinacc-price { font-size: 13.5px; font-weight: 800; color: #111827; } .dk-joinacc-edit { border: 0; background: none; color: var(--dkmm-accent); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; } .dk-joinacc-remove { border: 0; background: none; color: #9ca3af; font: inherit; font-size: 12px; font-weight: 600; text-decoration: underline; cursor: pointer; } .dk-joinacc-card { border: 1px solid var(--dkmm-border); border-radius: 12px; padding: 14px; margin-bottom: 10px; background: #fbfcfe; } .dk-joinacc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .dk-joinsub-mship { margin-top: 2px; } / Parent/Guardian block (DOB-driven). / .dk-joinguardian { margin: 4px 0 6px; padding: 14px; border: 1px solid var(--dkmm-border); border-radius: 12px; background: #fbfcfe; } .dk-joinguardian-title { font-size: 12px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: #9ca3af; margin-bottom: 10px; } / Sticky-footer summary. / .dk-joinsummary-sub { font-size: 11.5px; color: #9ca3af; font-weight: 600; display: block; } .dk-joinsummary-total { font-size: 19px; font-weight: 800; color: #111827; } .dk-joincard-form { margin-top: 8px; } @media (max-width: 600px) { .dk-joinrow > .dk-joinfield { width: 100%; } .dk-joinfooter { flex-direction: column; align-items: stretch; } .dk-joincta { width: 100%; } } / ========================================================================== Badge styles ========================================================================== / .dk-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 9999px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; } .dk-badge--green { background-color: #d1fae5; color: #065f46; } .dk-badge--amber { background-color: #fef3c7; color: #92400e; } .dk-badge--blue { background-color: #dbeafe; color: var(--dkmm-accent); } .dk-badge--purple { background-color: #ede9fe; color: #5b21b6; } .dk-badge--red { background-color: #fee2e2; color: #991b1b; } .dk-badge--gray { background-color: #f3f4f6; color: #4b5563; } / ========================================================================== Login / Logout Widget ========================================================================== / .dk-login { display: inline-flex; align-items: center; gap: 12px; } .dk-logingreeting { font-size: 14px; color: #374151; font-weight: 500; } .dk-loginerror { margin-bottom: 8px; } .dk-loginerror p { background-color: #fef2f2; border: 1px solid #fecaca; border-radius: 6px; padding: 8px 12px; color: #991b1b; font-size: 13px; margin: 0; } .dk-loginbutton { display: inline-flex; align-items: center; justify-content: center; padding: 8px 20px; border-radius: 6px; font-size: 14px; font-weight: 500; text-decoration: none; cursor: pointer; transition: background-color 0.15s, border-color 0.15s; } .dk-loginbutton--signin { background-color: var(--dkmm-accent); color: #ffffff; border: 1px solid var(--dkmm-accent); } .dk-loginbutton--signin:hover { background-color: var(--dkmm-accent-hover); border-color: var(--dkmm-accent-hover); color: #ffffff; text-decoration: none; } .dk-loginbutton--logout { background-color: #ffffff; color: #374151; border: 1px solid #d1d5db; } .dk-loginbutton--logout:hover { background-color: #f9fafb; border-color: #9ca3af; color: #374151; text-decoration: none; } .dk-login--error p { color: #991b1b; font-size: 13px; } / ========================================================================== Dashboard ========================================================================== / .dk-dashboardheading { font-size: 18px; font-weight: 600; color: #111827; margin: 0 0 16px 0; padding-bottom: 8px; border-bottom: 1px solid var(--dkmm-border); } .dk-dashboardsection { margin-bottom: 32px; } .dk-dashboardsection:empty { display: none; } .dk-dashboardcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; } .dk-dashboardcard { background: #ffffff; border: 1px solid var(--dkmm-border); border-radius: 8px; overflow: hidden; } .dk-dashboardcard-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background-color: #f9fafb; border-bottom: 1px solid var(--dkmm-border); } .dk-dashboardcard-name { font-weight: 600; font-size: 15px; color: #111827; } .dk-dashboardcard-body { padding: 12px 16px; } .dk-dashboardfield { display: flex; justify-content: space-between; padding: 4px 0; } .dk-dashboardlabel { font-size: 13px; color: #6b7280; } .dk-dashboardvalue { font-size: 13px; color: #111827; font-weight: 500; } .dk-dashboardlist { display: flex; flex-direction: column; gap: 8px; } .dk-dashboardlist-item { background: #ffffff; border: 1px solid var(--dkmm-border); border-radius: 8px; padding: 12px 16px; } .dk-dashboardlist-primary { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; } .dk-dashboardlist-primary strong { font-size: 14px; color: #111827; } .dk-dashboardlist-meta { font-size: 13px; color: #6b7280; } .dk-dashboardlist-secondary { display: flex; justify-content: space-between; font-size: 13px; color: #6b7280; } .dk-dashboardlist-date { font-weight: 500; color: #374151; } .dk-dashboardtickets { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 8px; } .dk-dashboardticket { font-size: 12px; background-color: #f3f4f6; padding: 2px 8px; border-radius: 4px; color: #374151; } .dk-dashboardbill-amount { font-weight: 600; color: #111827; } .dk-dashboardbill-items { margin-top: 8px; border-top: 1px solid #f3f4f6; padding-top: 8px; } .dk-dashboardbill-line { display: flex; justify-content: space-between; font-size: 12px; color: #6b7280; padding: 2px 0; } .dk-dashboardempty { color: #9ca3af; font-size: 14px; font-style: italic; } / ========================================================================== Profile ========================================================================== / .dk-profileheading { font-size: 18px; font-weight: 600; color: #111827; margin: 0 0 16px 0; padding-bottom: 8px; border-bottom: 1px solid var(--dkmm-border); } .dk-profilesubheading { font-size: 15px; font-weight: 600; color: #374151; margin: 16px 0 8px 0; } .dk-profilesection { margin-bottom: 32px; } .dk-profilesection:empty { display: none; } .dk-profilefields { background: #ffffff; border: 1px solid var(--dkmm-border); border-radius: 8px; padding: 16px; } .dk-profilefield { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid #f3f4f6; } .dk-profilefield:last-child { border-bottom: none; } .dk-profilelabel { font-size: 13px; color: #6b7280; min-width: 120px; } .dk-profilevalue { font-size: 13px; color: #111827; font-weight: 500; text-align: right; } .dk-profilenote { font-size: 12px; color: #9ca3af; font-style: italic; margin-top: 8px; } .dk-profileempty { color: #9ca3af; font-size: 14px; font-style: italic; } .dk-profiletable { width: 100%; border-collapse: collapse; background: #ffffff; border: 1px solid var(--dkmm-border); border-radius: 8px; overflow: hidden; } .dk-profiletable thead th { background-color: #f9fafb; padding: 10px 12px; text-align: left; font-size: 12px; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid var(--dkmm-border); } .dk-profiletable tbody td { padding: 10px 12px; font-size: 13px; color: #374151; border-bottom: 1px solid #f3f4f6; } .dk-profiletable tbody tr:last-child td { border-bottom: none; } / ========================================================================== Member Events — Eligibility Tags ========================================================================== / .dk-eventsticket-eligibility { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .dk-eventsmember-tag { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: 500; } .dk-eventsmember-tag--eligible { background-color: var(--dkmm-accent-soft); color: var(--dkmm-accent); } .dk-eventsmember-tag--ineligible { background-color: #f3f4f6; color: #9ca3af; text-decoration: line-through; } .dk-eventsticket-status { margin-top: 4px; } .dk-eventsticket-avail { font-size: 12px; color: #6b7280; font-weight: 500; } / ========================================================================== Button Variants — Small, Success, Error ========================================================================== / .dk-btn--sm { padding: 4px 12px; font-size: 13px; } .dk-btn--success { background-color: var(--dkmm-accent) !important; color: #fff !important; border-color: var(--dkmm-accent-hover) !important; } .dk-btn--error { background-color: #dc2626 !important; color: #fff !important; border-color: #dc2626 !important; } / ========================================================================== Dashboard — Session Booking Actions ========================================================================== / .dk-dashboardsession-actions { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding-top: 8px; border-top: 1px solid #f3f4f6; } .dk-dashboardsession-price { font-size: 13px; font-weight: 600; color: #374151; } / ========================================================================== Member Events — Booking Rows ========================================================================== / .dk-eventsticket-members { margin-top: 8px; } .dk-eventsticket-member-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 0; } .dk-eventsticket-member-row + .dk-eventsticket-member-row { border-top: 1px solid #f3f4f6; } .dk-eventsmember-name { font-size: 13px; font-weight: 500; color: #374151; } .dk-eventsmember-name--ineligible { color: #9ca3af; text-decoration: line-through; } .dk-events__ticket-member-row--ineligible { opacity: 0.6; } / ========================================================================= [dkmm_instructors] — role-sectioned photo grid (design §3) ========================================================================= / .dkmm-instructorssection { margin: 0 0 30px; } .dkmm-instructorsheading { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; font-size: 16px; font-weight: 700; color: #111827; } .dkmm-instructorsheading::after { content: ""; flex: 1; height: 1px; background: #eef0f3; } .dkmm-instructorsgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } @media (max-width: 960px) { .dkmm-instructorsgrid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .dkmm-instructorsgrid { grid-template-columns: 1fr; } } .dkmm-instructor-card { display: flex; flex-direction: column; border: 1px solid var(--dkmm-border); border-radius: 14px; overflow: hidden; background: #fff; box-shadow: var(--dkmm-elev); transition: box-shadow 0.18s ease, transform 0.18s ease; } .dkmm-instructor-card:hover { box-shadow: var(--dkmm-elev-hover); transform: translateY(-2px); } .dkmm-instructor-cardphoto { aspect-ratio: 1 / 1; background: #f3f4f6; display: flex; align-items: center; justify-content: center; } .dkmm-instructor-cardphoto img { width: 100%; height: 100%; object-fit: cover; display: block; } .dkmm-instructor-cardsilhouette { width: 56px; height: 56px; color: #cbd5e1; } .dkmm-instructor-cardbody { padding: 12px 14px 16px; } .dkmm-instructor-cardname { margin: 0; font-size: 15px; font-weight: 600; color: #111827; } .dkmm-instructor-cardgrade { margin: 3px 0 0; font-size: 13px; color: #6b7280; } .dkmm-instructor-cardclubs { margin: 4px 0 0; font-size: 12.5px; color: #9ca3af; } .dkmm-instructor-cardbio { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: #6b7280; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .dkmm-instructorsempty { color: #6b7280; } / ========================================================================= Legacy member-hub styles (superseded by the Member Portal block below; the .dkmm-login form classes remain in use by the portal login card) ========================================================================= / .dkmm-members-hubheading { margin: 0 0 14px; font-size: 16px; font-weight: 700; color: #111827; } / Guest: two-column login + join, stacked below 768px / .dkmm-members-hub--guest { display: grid; gap: 24px; } @media (min-width: 768px) { .dkmm-members-hub--guest { grid-template-columns: 1fr 1.2fr; align-items: start; } } .dkmm-members-hublogin, .dkmm-members-hubjoin { background: #fff; border: 1px solid var(--dkmm-border); border-radius: 14px; padding: 22px; box-shadow: var(--dkmm-elev); } .dkmm-members-hubjoin { display: flex; flex-direction: column; } .dkmm-members-hubjoin .dk-join { display: flex; flex-direction: column; flex: 1; } .dkmm-members-hubjoin .dk-joinopen { margin-top: auto; } / Member: welcome bar / .dkmm-members-hubbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; background: #fff; border: 1px solid var(--dkmm-border); border-radius: 14px; box-shadow: var(--dkmm-elev); } .dkmm-members-hubgreeting { font-size: 16px; font-weight: 700; color: #111827; } .dkmm-members-hublogout { font-size: 13.5px; color: #6b7280; text-decoration: none; } .dkmm-members-hublogout:hover { color: var(--dkmm-accent); } / Member: Dashboard / Profile segmented tabs / .dkmm-members-hubtabs { display: inline-flex; gap: 2px; margin: 18px 0 0; padding: 3px; background: #f1f5f9; border-radius: 9px; } .dkmm-members-hubtab { padding: 7px 18px; border: 0; border-radius: 7px; background: transparent; color: #6b7280; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; } .dkmm-members-hubtab.is-active { background: #fff; color: #111827; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); } .dkmm-members-hubpanel { margin-top: 24px; } .dkmm-members-hubpanel[hidden] { display: none; } / Lazy-load skeleton (Profile tab fetches on first open — §11) / .dkmm-hub-skeleton { display: flex; flex-direction: column; gap: 14px; padding: 8px 0; } .dkmm-hub-skeleton span { display: block; height: 44px; border-radius: 12px; background: linear-gradient(90deg, #f1f5f9 25%, #e9eef5 37%, #f1f5f9 63%); background-size: 400% 100%; animation: dkmm-shimmer 1.4s ease infinite; } .dkmm-hub-skeleton span:first-child { height: 64px; } @keyframes dkmm-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } .dkmm-hub-error { color: #991b1b; padding: 12px 0; } / ========================================================================= On-site member login form (§4.0) — local form, no DK redirect ========================================================================= / .dkmm-loginform { display: flex; flex-direction: column; gap: 14px; max-width: 380px; } .dkmm-loginerror { padding: 10px 12px; border-radius: 10px; background: #fee2e2; color: #991b1b; font-size: 13.5px; font-weight: 500; } .dkmm-loginerror[hidden] { display: none; } .dkmm-loginfield { display: flex; flex-direction: column; gap: 6px; } .dkmm-loginlabel { font-size: 13px; font-weight: 600; color: #374151; } .dkmm-loginhint { font-size: 12px; font-weight: 400; color: #6b7280; line-height: 1.4; } .dkmm-logininput { width: 100%; padding: 10px 12px; border: 1px solid var(--dkmm-border); border-radius: 10px; background: #fff; font: inherit; font-size: 14px; color: #111827; } .dkmm-logininput:focus { outline: none; border-color: var(--dkmm-accent); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14); } .dkmm-loginrow { display: flex; justify-content: flex-end; } .dkmm-loginforgot { font-size: 13px; color: var(--dkmm-accent); text-decoration: none; } .dkmm-loginforgot:hover { text-decoration: underline; } .dkmm-loginsubmit { padding: 11px 16px; border: 0; border-radius: 10px; background: var(--dkmm-accent); color: #fff; font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer; box-shadow: var(--dkmm-cta-shadow); } .dkmm-loginsubmit:hover { background: var(--dkmm-accent-hover); } .dkmm-loginsubmit:disabled { opacity: 0.7; cursor: default; } / ========================================================================= Member Portal login card (§2.1) — centres the 440px card on Divi and fixes the two width traps (.dkmm-loginform max-width:380px cap + .dk-login display:inline-flex collapsing the form to ~262px). ========================================================================= / .dk-portal-login { display: flex; justify-content: center; width: 100%; padding: 8px 0; } .dk-portal-logincard { width: 100%; max-width: 440px; margin: 0 auto; box-sizing: border-box; background: #fff; border: 1px solid var(--dkmm-border); border-radius: 16px; padding: 34px 30px; box-shadow: 0 1px 2px rgba(16,24,40,.05), 0 14px 28px -18px rgba(16,24,40,.22); text-align: left; } .dk-portal-logintitle { margin: 0; text-align: center; font-size: 24px; font-weight: 700; letter-spacing: -0.01em; color: var(--dkmm-ink); line-height: 1.25; } .dk-portal-loginsub { margin: 8px 0 26px; text-align: center; font-size: 14px; color: #64748b; } / Form fills the card (override the standalone 380px cap; .dk-login is inline-flex) / .dk-portal-login .dk-login { display: block; width: 100%; } .dk-portal-login .dkmm-loginform { max-width: none; width: 100%; } .dk-portal-login .dkmm-loginrow { justify-content: space-between; align-items: center; } .dk-portal-login .dkmm-loginremember { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #334155; } .dk-portal-login .dkmm-loginsubmit { width: 100%; } .dk-portal-logindivider { position: relative; text-align: center; margin: 24px 0 18px; } .dk-portal-logindivider::before { content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: var(--dkmm-border); } .dk-portal-logindivider span { position: relative; background: #fff; padding: 0 12px; font-size: 13px; color: #94a3b8; } .dk-portal-loginjoin { display: block; width: 100%; box-sizing: border-box; text-align: center; padding: 11px 16px; border: 1px solid #cbd8f5; border-radius: 10px; background: #fff; color: var(--dkmm-accent-hover); font-size: 15px; font-weight: 600; text-decoration: none; } .dk-portal-loginjoin:hover { background: var(--dkmm-accent-soft); } / ========================================================================= [dkmm_events] — public card grid + detail modal (design §2 / §7) ========================================================================= / .dkmm-eventstoolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 22px 0 16px; padding-bottom: 12px; border-bottom: 1px solid var(--dkmm-border); } .dkmm-eventsfilter { font: inherit; } .dkmm-eventscount { color: #6b7280; font-size: 13px; font-weight: 500; } .dkmm-eventsempty { color: #6b7280; padding: 28px 0; text-align: center; } .dkmm-eventsic { flex: none; } / List / Calendar segmented toggle / .dkmm-eventsviewtoggle { display: inline-flex; gap: 2px; padding: 3px; background: #f1f5f9; border-radius: 9px; } .dkmm-eventsviewbtn { padding: 6px 16px; border: 0; border-radius: 7px; background: transparent; color: #6b7280; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; } .dkmm-eventsviewbtn.is-active { background: #fff; color: #111827; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08); } / Month deep-link banner / .dkmm-eventsmonthbar[hidden] { display: none; } .dkmm-eventsmonthbar { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; padding: 10px 14px; background: var(--dkmm-accent-soft); border: 1px solid var(--dkmm-border); border-radius: 10px; } .dkmm-eventsmonthbar-label { font-weight: 700; color: var(--dkmm-accent); font-size: 14px; } .dkmm-eventsmonthbar-clear { margin-left: auto; border: 0; background: transparent; color: var(--dkmm-accent); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; } / Type pill (rows + modal) / .dkmm-eventstype-pill { display: inline-flex; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; } .dkmm-eventstype-pill--blue { background: var(--dkmm-type-course-bg); color: var(--dkmm-type-course-fg); } .dkmm-eventstype-pill--purple { background: var(--dkmm-type-grading-bg); color: var(--dkmm-type-grading-fg); } .dkmm-eventstype-pill--amber { background: var(--dkmm-type-tournament-bg); color: var(--dkmm-type-tournament-fg); } .dkmm-eventstype-pill--green { background: var(--dkmm-type-social-bg); color: var(--dkmm-type-social-fg); } .dkmm-eventstype-pill--gray { background: var(--dkmm-pill-bg); color: var(--dkmm-pill-txt); } / ---- List view: date-ordered rows, Open / Coming-up groups (§2.0–2.1) ---- / .dkmm-eventsgroup { margin: 0 0 26px; } .dkmm-eventsgroup-head { display: flex; align-items: center; gap: 9px; margin: 0 0 12px; } .dkmm-eventsgroup-dot { width: 9px; height: 9px; border-radius: 999px; flex: none; } .dkmm-eventsgroup-dot--open { background: var(--dkmm-dot-progress); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.16); } .dkmm-eventsgroup-dot--soon { background: var(--dkmm-dot-neutral); box-shadow: 0 0 0 3px rgba(203, 213, 225, 0.22); } .dkmm-eventsgroup-title { margin: 0; font-size: 15px; font-weight: 700; color: #111827; } .dkmm-eventsgroup-rule { flex: 1; height: 1px; background: var(--dkmm-hair); } .dkmm-eventsrows { display: flex; flex-direction: column; gap: 10px; } .dkmm-eventsrow { display: flex; align-items: center; gap: 16px; padding: 14px 16px; background: #fff; border: 1px solid var(--dkmm-border); border-radius: 14px; cursor: pointer; box-shadow: var(--dkmm-elev); transition: box-shadow 0.18s ease, transform 0.18s ease; } .dkmm-eventsrow:hover, .dkmm-eventsrow:focus-visible { box-shadow: var(--dkmm-elev-hover); transform: translateY(-2px); outline: none; } .dkmm-eventsrow--upcoming { cursor: pointer; background: #fbfcfe; } .dkmm-eventsrow--upcoming .dkmm-eventschip { filter: grayscale(1); opacity: 0.7; } .dkmm-eventsrow--upcoming .dkmm-eventsrow-title { color: #6b7280; } / Date chip / .dkmm-eventschip { flex: none; width: 76px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 10px 0; border-radius: 12px; line-height: 1; } .dkmm-eventschip-day { font-size: 26px; font-weight: 800; } .dkmm-eventschip-mon { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; } .dkmm-eventschip--blue { background: var(--dkmm-type-course-bg); color: var(--dkmm-type-course-fg); } .dkmm-eventschip--purple { background: var(--dkmm-type-grading-bg); color: var(--dkmm-type-grading-fg); } .dkmm-eventschip--amber { background: var(--dkmm-type-tournament-bg); color: var(--dkmm-type-tournament-fg); } .dkmm-eventschip--green { background: var(--dkmm-type-social-bg); color: var(--dkmm-type-social-fg); } .dkmm-eventschip--gray { background: var(--dkmm-pill-bg); color: var(--dkmm-pill-txt); } / Row middle / .dkmm-eventsrow-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; } / spec §2.0: title leads with a small quiet type tag beside it (one line) / .dkmm-eventsrow-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 5px; min-width: 0; } .dkmm-eventsrow-qual { font-size: 12px; color: #6b7280; } .dkmm-eventsrow-title { margin: 0; flex: 0 1 auto; font-size: 16.5px; font-weight: 700; line-height: 1.3; color: #111827; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dkmm-eventsrow-head .dkmm-eventstype-pill { flex: none; align-self: center; } .dkmm-eventsrow-loc { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: #6b7280; min-width: 0; } .dkmm-eventsrow-loc .dkmm-eventsic { color: #9ca3af; } / One-line course detail (clamped) — sits LAST, below the meta row (spec §2.0) / .dkmm-eventsrow-detail { margin: 2px 0 0; font-size: 13px; line-height: 1.45; color: #6b7280; overflow: hidden; / spec §2.0/§2.7: clamp the description to two lines. / display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } / Meta lines (spec §2.0/§2.7): line 1 = day · date · time; line 2 = address · Map / .dkmm-eventsrow-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 14px; } .dkmm-eventsrow-main > .dkmm-eventsrow-meta + .dkmm-eventsrow-meta { margin-top: 2px; } .dkmm-eventsrow-date { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: #374151; } .dkmm-eventsrow-date .dkmm-eventsic { color: #9ca3af; } .dkmm-eventsrow-time { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: #6b7280; } .dkmm-eventsrow-time .dkmm-eventsic { color: #9ca3af; } .dkmm-eventsrow-map { display: inline-flex; align-items: center; padding: 2px 10px; border: 1px solid var(--dkmm-border); border-radius: 999px; background: #fff; color: var(--dkmm-accent); font-size: 12.5px; font-weight: 600; cursor: pointer; } .dkmm-eventsrow-map:hover { background: var(--dkmm-accent-soft); } / Map popup / .dkmm-eventsmap-panel { max-width: 760px; padding: 20px; } .dkmm-eventsmap-title { margin: 6px 28px 12px 0; font-size: 17px; font-weight: 700; color: #111827; } .dkmm-eventsmap-frame { border-radius: 12px; overflow: hidden; } .dkmm-eventsmap-frame iframe { display: block; width: 100%; height: 60vh; max-height: 460px; border: 0; } / Row right rail / .dkmm-eventsrow-side { flex: none; width: 168px; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; } .dkmm-eventsprice { font-size: 16px; font-weight: 700; color: #111827; } .dkmm-eventsavail-num { font-size: 12px; color: #6b7280; } .dkmm-eventsrowbtn { margin-top: 4px; display: inline-flex; align-items: center; justify-content: center; padding: 8px 18px; border-radius: 9px; background: var(--dkmm-accent); color: #fff; font-size: 13px; font-weight: 600; box-shadow: var(--dkmm-cta-shadow); } .dkmm-eventsrow:hover .dkmm-eventsrowbtn { background: var(--dkmm-accent-hover); } .dkmm-eventsrowbtn--ghost { background: #fff; color: var(--dkmm-accent); border: 1px solid var(--dkmm-border); box-shadow: none; } .dkmm-eventsrow:hover .dkmm-eventsrowbtn--ghost { background: var(--dkmm-accent-soft); } .dkmm-eventsopens-pill { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 999px; background: #f3f4f6; color: #6b7280; font-size: 12px; font-weight: 600; } / ---- Calendar view: 12-month year planner (§2.2) ---- / .dkmm-eventscalendar[hidden] { display: none; } .dkmm-eventscal-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .dkmm-eventscal-tile { position: relative; display: block; width: 100%; text-align: left; padding: 14px 14px 14px 18px; background: #fff; border: 1px solid var(--dkmm-border); border-radius: 14px; box-shadow: var(--dkmm-elev); cursor: pointer; font: inherit; transition: box-shadow 0.18s ease, transform 0.18s ease; } .dkmm-eventscal-tile::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 4px; border-radius: 999px; } .dkmm-eventscal-tile--open::before { background: var(--dkmm-accent); } .dkmm-eventscal-tile--soon::before { background: #cbd5e1; } .dkmm-eventscal-tile--muted::before { background: transparent; } .dkmm-eventscal-tile:not([disabled]):hover { box-shadow: var(--dkmm-elev-hover); transform: translateY(-2px); } .dkmm-eventscal-tile.is-empty { background: #fbfcfe; cursor: default; box-shadow: none; } .dkmm-eventscal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; } .dkmm-eventscal-month { font-size: 13.5px; font-weight: 700; color: #111827; } .dkmm-eventscal-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--dkmm-accent-soft); color: var(--dkmm-accent); font-size: 11.5px; font-weight: 700; } .dkmm-eventscal-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .dkmm-eventscal-ev { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: #374151; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dkmm-eventscal-dot { width: 7px; height: 7px; border-radius: 999px; flex: none; } .dkmm-eventscal-dot--blue { background: var(--dkmm-type-course-fg); } .dkmm-eventscal-dot--purple { background: var(--dkmm-type-grading-fg); } .dkmm-eventscal-dot--amber { background: var(--dkmm-type-tournament-fg); } .dkmm-eventscal-dot--green { background: var(--dkmm-type-social-fg); } .dkmm-eventscal-dot--gray { background: var(--dkmm-dot-neutral); } .dkmm-eventscal-more { font-size: 11.5px; color: #9ca3af; font-weight: 600; } .dkmm-eventscal-empty { margin: 0; font-size: 12.5px; color: #9ca3af; } @media (max-width: 960px) { .dkmm-eventscal-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .dkmm-eventscal-grid { grid-template-columns: 1fr; } .dkmm-eventsrow { flex-wrap: wrap; gap: 12px; } .dkmm-eventsrow-side { width: auto; flex: 1; flex-direction: row; align-items: center; justify-content: flex-end; } .dkmm-eventsrow-main { flex: 1 1 60%; } .dkmm-eventsrowbtn { margin-top: 0; } } / Detail modal (shared with WC Orders — §7) / .dkmm-eventsdetail[hidden] { display: none; } .dkmm-eventsdetail { position: fixed; inset: 0; z-index: 100000; display: flex; / Top-aligned, not vertically centred (Quay, 2026-08-24) — a short event and a long one then open in the same place. / align-items: flex-start; justify-content: center; padding: 32px 1rem 1rem; font-family: inherit; } @media (max-width: 600px) { .dkmm-eventsdetail { padding: 16px 12px 12px; } } .dkmm-eventsdetail-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.35); } .dkmm-eventsdetail-panel { position: relative; z-index: 1; display: flex; flex-direction: column; width: 100%; max-width: 960px; / spec §2.6: description body + footer ticket list. Widened from 760px (Quay, 2026-08-24) — the description and the ticket rows both have room to breathe. / max-height: 88vh; / Fixed-height flex column: header/footer stay put, only the body scrolls, so the rounded corners are never squared off by a scrollbar (spec §2.4). / overflow: hidden; background: #fff; border-radius: 16px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3); } / The content node is the flex column that holds header / body / footer. / #dkmm-events-detail-content { position: relative; display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } .dkmm-eventsdetail-header { flex: none; padding: 24px 24px 16px; padding-right: 44px; / clear the × / border-bottom: 1px solid #eef0f3; } .dkmm-eventsdetail-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 18px 24px; } / Two-column body (spec §2.4): left = description + family-discount card; right = grouped ticket list. Stacks 1-up below 768px. / .dkmm-eventsdetail-body--cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 24px; align-items: start; } @media (max-width: 768px) { .dkmm-eventsdetail-body--cols { grid-template-columns: 1fr; gap: 18px; } } .dkmm-eventsdetail-left { min-width: 0; } .dkmm-eventsdetail-right { min-width: 0; } / Quiet "family discount applies automatically" card (spec §2.5). / .dkmm-eventsdiscount-card { display: flex; gap: 10px; margin: 4px 0 0; padding: 12px 14px; border: 1px solid var(--dkmm-border); border-radius: 12px; background: var(--dkmm-accent-soft); } .dkmm-eventsdiscount-card-dot { width: 8px; height: 8px; margin-top: 5px; flex: none; border-radius: 999px; background: var(--dkmm-accent); } .dkmm-eventsdiscount-card-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .dkmm-eventsdiscount-card-body strong { font-size: 13px; font-weight: 700; color: #111827; } .dkmm-eventsdiscount-card-body span { font-size: 12.5px; line-height: 1.45; color: #6b7280; } / Bundle tag + savings (spec §2.4/§2.5). / .dkmm-eventsbundle-tag { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; vertical-align: middle; background: var(--dkmm-type-grading-bg); color: var(--dkmm-type-grading-fg); } .dkmm-eventsticket-savings { font-size: 11.5px; font-weight: 700; color: var(--dkmm-dot-done); } .dkmm-eventsdetail-footer { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 24px; border-top: 1px solid #eef0f3; background: linear-gradient(#fbfcfe, #f7f9fc); } .dkmm-eventsdetail-foot-price { font-size: 16px; font-weight: 800; color: #111827; } .dkmm-eventsdetail-foot-cta { display: flex; align-items: center; flex: none; } / In the footer the Add Booking CTA is auto-width and not top-margined. / .dkmm-eventsdetail-foot-cta .dkmm-book-add-booking { width: auto; margin-top: 0; } / §2.6: tickets pinned in the footer beside Add Booking. / .dkmm-eventsdetail-footer--tickets { align-items: center; gap: 18px; } .dkmm-eventsfoot-tickets { flex: 1; min-width: 0; } .dkmm-eventsfoot-tickets-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #9ca3af; margin-bottom: 4px; } .dkmm-eventsfoot-ticket-list { display: flex; flex-direction: column; } .dkmm-eventsfoot-ticket { display: flex; align-items: baseline; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--dkmm-hair); } .dkmm-eventsfoot-ticket:last-child { border-bottom: 0; } .dkmm-eventsfoot-ticket-name { font-size: 13px; font-weight: 700; color: #111827; } .dkmm-eventsfoot-ticket-time { font-size: 11px; color: #9ca3af; } .dkmm-eventsfoot-ticket-price { margin-left: auto; font-size: 13px; font-weight: 800; color: #111827; } .dkmm-eventsfoot-ticket .dkmm-eventsbundle-tag { margin-left: 0; } / --------------------------------------------------------------------------- Banded sections — mirrors the app's SectionCard / prose-quiet vocabulary (components/members/events/event-sections.tsx). Keep the two in step: same band fill, same 11px/800/.09em label, same clamped prose panel. --------------------------------------------------------------------------- / .dkmm-eventssec { margin: 0 0 12px; border: 1px solid #e6e9f0; border-radius: 14px; overflow: hidden; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06); } .dkmm-eventssec:last-child { margin-bottom: 0; } .dkmm-eventssec-band { display: flex; align-items: center; gap: 8px; padding: 9px 14px; background: #f1f5f9; border-bottom: 1px solid #e2e8f0; color: #94a3b8; } .dkmm-eventssec-label { font-size: 11px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: #475569; } .dkmm-eventssec-meta { margin-left: auto; font-size: 11.5px; } .dkmm-eventsshowall { background: none; border: 0; padding: 0; cursor: pointer; font-size: 11px; font-weight: 800; color: var(--dkmm-accent); } .dkmm-eventsshowall:hover { text-decoration: underline; } .dkmm-eventssec-body { padding: 11px 14px; } .dkmm-eventswhen-summary { font-size: 13.5px; font-weight: 600; color: #111827; } .dkmm-eventswhere { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 11px; padding-top: 11px; border-top: 1px dashed #e2e8f0; font-size: 12.5px; color: #6b7280; } / Author prose, one step back from the card fill, capped to ~6 lines. The full text stays in the DOM — this is height only. / .dkmm-eventsprose { position: relative; padding: 12px 14px; border: 1px solid #eef2f7; border-radius: 10px; background: #fbfcfe; font-size: 12.5px; line-height: 1.62; color: #475569; } .dkmm-eventsprose.is-clamped { max-height: 150px; overflow: hidden; } .dkmm-eventsprose.is-clamped::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 40px; background: linear-gradient(to bottom, rgba(251, 252, 254, 0), #fbfcfe); } / Body copy is 14px — the "Normal" the author typed, not a step down from it (Quay, 2026-08-24: at 12.5px "the text gets lost"). Headings step 19/17/15. Mirrors .tiptap / .rich-text-content in the app's rich-text-styles.css. / .dkmm-eventsprose p { margin: 0 0 8px; font-size: 14px; line-height: 1.6; color: #475569; } .dkmm-eventsprose p:last-child { margin-bottom: 0; } .dkmm-eventsprose h1, .dkmm-eventsprose h2, .dkmm-eventsprose h3 { margin: 10px 0 4px; font-weight: 600; color: #334155; } .dkmm-eventsprose h1 { font-size: 19px; } .dkmm-eventsprose h2 { font-size: 17px; } .dkmm-eventsprose h3 { font-size: 15px; } .dkmm-eventsprose ul, .dkmm-eventsprose ol { margin: 0 0 8px; padding-left: 20px; } .dkmm-eventsprose li { font-size: 14px; line-height: 1.6; } .dkmm-eventsprose a { color: var(--dkmm-accent); } .dkmm-eventsprose blockquote { margin: 0 0 8px; padding-left: 10px; border-left: 3px solid #e2e8f0; color: #64748b; } .dkmm-eventsprose-table { width: 100%; border-collapse: collapse; margin: 0 0 8px; } .dkmm-eventsprose-table th { border: 1px solid #e2e8f0; background: #f1f5f9; padding: 4px 8px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; color: #475569; text-align: left; } .dkmm-eventsprose-table td { border: 1px solid #e8edf3; padding: 4px 8px; font-size: 14px; font-variant-numeric: tabular-nums; } / Ticket rows in the body (they used to sit in the sticky footer). / .dkmm-eventsticket-list { padding: 0; } .dkmm-eventsticket-item { padding: 10px 14px; border-bottom: 1px solid var(--dkmm-hair); } .dkmm-eventsticket-item:last-child { border-bottom: 0; } / Two lines, so nothing collides at 390px (ADDENDUM 2 §B6 / board 4a): line 1 = name + price (price never shrinks, name wraps), line 2 = bundle tag + time. An empty second line takes no height. / .dkmm-eventsticket-line { display: flex; align-items: baseline; gap: 8px; } .dkmm-eventsticket-line .dkmm-eventsfoot-ticket-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; } .dkmm-eventsticket-line .dkmm-eventsfoot-ticket-price { flex: none; margin-left: auto; } .dkmm-eventsticket-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 3px; } .dkmm-eventsticket-sub:empty { display: none; } .dkmm-eventsticket-sub .dkmm-eventsbundle-tag { margin-left: 0; } .dkmm-eventsticket-statusrow { margin-top: 5px; } .dkmm-eventsdetail-titlerow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 7px; } .dkmm-eventsdetail-header .dkmm-eventsdetail-meta + .dkmm-eventsdetail-meta { margin-top: 4px; } / Map link in the header meta row. / .dkmm-eventsdetail-map { display: inline-flex; align-items: center; padding: 2px 10px; border: 1px solid #dbe3ef; border-radius: 999px; background: #fff; color: var(--dkmm-accent); font-size: 12.5px; font-weight: 600; cursor: pointer; } .dkmm-eventsdetail-map:hover { background: var(--dkmm-accent-soft); } .dkmm-eventsdetail-close { position: absolute; top: 8px; right: 12px; / Sits above the position:relative #dkmm-events-detail-content sibling that follows it in the DOM — without this the content layer paints on top and swallows the × click (spec §2.4: the × must actually close). / z-index: 2; background: none; border: 0; font-size: 26px; line-height: 1; cursor: pointer; color: #6b7280; } .dkmm-eventsdetail-title { margin: 0; font-size: 20px; font-weight: 800; color: #111827; } .dkmm-eventsdetail-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; color: #6b7280; font-size: 13px; } .dkmm-eventsdetail-meta span { display: flex; align-items: center; gap: 6px; } .dkmm-eventsdetail-desc { margin: 0 0 16px; font-size: 14px; line-height: 1.6; color: #374151; white-space: pre-line; } .dkmm-eventsdetail-subhead { margin: 4px 0 10px; font-size: 14px; font-weight: 800; color: #111827; } .dkmm-eventsticket { padding: 11px 0; border-top: 1px solid #f1f5f9; } .dkmm-eventsticket:first-of-type { border-top: 0; padding-top: 0; } .dkmm-eventsticket-row { display: flex; align-items: center; gap: 12px; } .dkmm-eventsticket-name { font-size: 14px; font-weight: 700; color: #111827; } .dkmm-eventsticket-aside { display: flex; flex-direction: column; align-items: flex-end; flex: none; text-align: right; } .dkmm-eventsticket-price { font-size: 15px; font-weight: 800; color: #111827; } .dkmm-eventsticket-status { font-size: 11.5px; font-weight: 600; color: #475569; } .dkmm-eventsavail { color: #6b7280; font-weight: 600; } .dkmm-eventsticket-desc { margin: 4px 0 0; font-size: 12.5px; color: #6b7280; } / Read-only eligibility tags (only shown when booking is off) / .dkmm-eventsticket-audience { margin: 8px 0 0; font-size: 12.5px; } .dkmm-eventsticket-audience-label { color: #6b7280; } .dkmm-eventsmember-tag { display: inline-block; margin: 3px 4px 0 0; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; } .dkmm-eventsmember-tag--eligible { background: var(--dkmm-accent-soft); color: var(--dkmm-accent); } .dkmm-eventsmember-tag--ineligible { background: var(--dkmm-pill-bg); color: #9ca3af; text-decoration: line-through; } .dkmm-eventsticket-soon { margin: 8px 0 0; font-size: 12.5px; color: #9ca3af; font-style: italic; } .dkmm-eventsdetail-contact { margin-top: 16px; font-size: 14px; } body.dkmm-events-modal-open { overflow: hidden; } / Signed-in bar + per-member booking list (design §2) / .dkmm-book-signedin { display: flex; align-items: center; gap: 8px; margin: 16px 0 0; padding: 8px 12px; background: var(--dkmm-accent-soft); border-radius: 8px; font-size: 12.5px; font-weight: 600; color: var(--dkmm-accent-hover); } .dkmm-eventsticket-actions { margin-top: 8px; } .dkmm-book-members { border: 1px solid var(--dkmm-border); border-radius: 8px; overflow: hidden; } .dkmm-book-row { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-bottom: 1px solid #f3f4f6; } .dkmm-book-row:last-child { border-bottom: 0; } .dkmm-book-row--ineligible { opacity: 0.6; } .dkmm-book-avatar { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex: none; border-radius: 8px; background: #eef4ff; color: var(--dkmm-accent-hover); font-size: 11px; font-weight: 700; } .dkmm-book-row--ineligible .dkmm-book-avatar { background: #f3f4f6; color: #9ca3af; } .dkmm-book-name { flex: 1; font-size: 13px; font-weight: 600; color: #1f2937; } .dkmm-book-row--ineligible .dkmm-book-name { color: #9ca3af; text-decoration: line-through; } .dkmm-book-state { font-size: 11.5px; font-weight: 600; color: #9ca3af; } .dkmm-book-row--registered .dkmm-book-state { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; background: var(--dkmm-pill-bg); color: var(--dkmm-pill-txt); font-weight: 700; } .dkmm-book-price { font-size: 12.5px; color: #6b7280; } .dkmm-book-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 8px; font-size: 12px; font-weight: 700; cursor: pointer; line-height: 1; } .dkmm-book-btn--outline { border: 1.5px solid var(--dkmm-accent); background: #fff; color: var(--dkmm-accent); } .dkmm-book-btn--solid { border: 1.5px solid var(--dkmm-accent); background: var(--dkmm-accent); color: #fff; } .dkmm-book-btn[disabled] { opacity: 0.6; cursor: default; } / Guest lookup-first primary CTA (§2.4) / .dkmm-book-lookup--primary { border-style: solid; border-color: var(--dkmm-accent); background: var(--dkmm-accent); color: #fff; box-shadow: var(--dkmm-cta-shadow); } .dkmm-book-lookup--primary:hover { background: var(--dkmm-accent-hover); } .dkmm-book-lookup-help { margin: 0 0 14px; font-size: 13px; line-height: 1.5; color: #6b7280; } .dkmm-book-lookup { display: block; width: 100%; margin-top: 10px; padding: 8px 12px; border: 1px dashed #cbd5e1; border-radius: 8px; background: #fff; color: var(--dkmm-accent); font-size: 13px; font-weight: 600; cursor: pointer; } / ========================================================================= [dkmm_wc_orders] — orders surface (minimal structural; Design refines) ========================================================================= / .dkmm-wc-orderstoolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 22px 0 16px; } .dkmm-wc-orderscount { color: #6b7280; font-size: 13px; margin-left: auto; } .dkmm-wc-orders__empty { color: #6b7280; padding: 16px; } #dkmm-wc-orders-table:has(.dkmm-wc-table) { border: 1px solid var(--dkmm-border); border-radius: 12px; overflow: hidden; background: #fff; box-shadow: var(--dkmm-elev); } .dkmm-wc-table { width: 100%; border-collapse: collapse; } .dkmm-wc-table th { text-align: left; padding: 10px 14px; font-size: 12px; font-weight: 600; color: #6b7280; background: #f8fafc; border-bottom: 1px solid #eef0f3; } .dkmm-wc-table td { text-align: left; padding: 11px 14px; font-size: 13.5px; color: #374151; border-bottom: 1px solid #f4f5f7; } .dkmm-wc-table tr:last-child td { border-bottom: 0; } .dkmm-wc-view { background: #fff; border: 1px solid #cbd5e1; border-radius: 5px; padding: 3px 11px; font-size: 12.5px; color: #374151; cursor: pointer; } / §0 v4: neutral pill + small muted dot (not coloured fills) / .dkmm-wc-status { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--dkmm-pill-bg); color: var(--dkmm-pill-txt); } .dkmm-wc-status::before { content: ""; width: 7px; height: 7px; border-radius: 999px; flex: none; background: var(--_dkmm-dot, var(--dkmm-dot-neutral)); } / Card-per-order fallback below 768px (design §6) / @media (max-width: 768px) { #dkmm-wc-orders-table:has(.dkmm-wc-table) { border: 0; background: transparent; overflow: visible; } .dkmm-wc-table thead { display: none; } .dkmm-wc-table, .dkmm-wc-table tbody, .dkmm-wc-table tr, .dkmm-wc-table td { display: block; width: 100%; } .dkmm-wc-table tr { border: 1px solid var(--dkmm-border); border-radius: 16px; background: #fff; padding: 12px 16px; margin-bottom: 12px; box-shadow: var(--dkmm-elev); } .dkmm-wc-table td { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 5px 0; border: 0; } .dkmm-wc-table td::before { content: attr(data-label); font-size: 12px; font-weight: 600; color: #6b7280; } .dkmm-wc-cell-order { justify-content: flex-start; padding-bottom: 8px; margin-bottom: 6px; border-bottom: 1px solid #f4f5f7; font-size: 15px; font-weight: 700; color: #111827; } .dkmm-wc-cell-order::before { content: ""; } .dkmm-wc-cell-view { padding-top: 10px; } .dkmm-wc-cell-view::before { content: ""; } .dkmm-wc-view { width: 100%; padding: 8px; } } .dkmm-wc-status--completed { --_dkmm-dot: var(--dkmm-dot-done); } .dkmm-wc-status--processing { --_dkmm-dot: var(--dkmm-dot-progress); } .dkmm-wc-status--pending, .dkmm-wc-status--on-hold { --_dkmm-dot: var(--dkmm-dot-attention); } .dkmm-wc-status--cancelled, .dkmm-wc-status--failed, .dkmm-wc-status--refunded { --_dkmm-dot: var(--dkmm-dot-neutral); } .dkmm-wc-items { margin: 0.25rem 0 0; padding-left: 1.1rem; } .dkmm-wc-qty { color: #6b7280; font-size: 0.8rem; } .dkmm-wc-actions { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #f1f5f9; } .dkmm-wc-action { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0 0 0.6rem; } .dkmm-wc-action label { font-weight: 600; font-size: 0.85rem; } .dkmm-wc-action textarea { flex: 1 1 220px; } .dkmm-wc-action-status { color: #6b7280; font-size: 0.85rem; min-height: 1.2em; } / ========================================================================= [dkmm_events] booking (A4 pt2) — minimal structural (Design refines) ========================================================================= / .dkmm-eventsbooking { margin: 0 0 1rem; } .dkmm-book-bar { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.9rem; border: 1px solid #cbd5e1; border-radius: 8px; background: #f8fafc; } .dkmm-book-barcount { font-weight: 600; } .dkmm-book-barcheckout { margin-left: auto; } .dkmm-book-register, .dkmm-book-bar button, .dkmm-book-remove, .dkmm-lk-add { border: 1px solid #cbd5e1; background: #fff; border-radius: 4px; padding: 0.2rem 0.6rem; cursor: pointer; font-size: 0.85rem; } .dkmm-book-register { margin-top: 0.5rem; } .dkmm-book-list { list-style: none; padding: 0; margin: 0 0 1rem; } .dkmm-book-list li { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0; border-bottom: 1px solid #f1f5f9; } .dkmm-book-list .dkmm-book-price { margin-left: auto; } .dkmm-book-lookup-form p, .dkmm-book-payer p { display: flex; flex-direction: column; gap: 0.2rem; margin: 0 0 0.6rem; } .dkmm-book-lookup-form label, .dkmm-book-payer label { font-weight: 600; font-size: 0.85rem; } .dkmm-book-captcha { margin: 0.5rem 0; } .dkmm-book-found { font-weight: 600; } / Single "Add Booking" CTA in the event detail modal (spec §2.4 frame A) / .dkmm-book-add-booking { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 18px; padding: 13px; border: none; border-radius: 11px; background: var(--dkmm-accent); color: #fff; font-size: 14.5px; font-weight: 800; cursor: pointer; box-shadow: var(--dkmm-cta-shadow); } .dkmm-book-add-booking:hover { background: var(--dkmm-accent-hover); } .dkmm-book-add-booking svg { flex: none; } / Guest flow has no per-ticket button — collapse the empty action slot. / .dkmm-eventsticket-actions:empty { display: none; } / Per-ticket session time in the detail modal (spec §2.4) / .dkmm-eventsticket-main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; } .dkmm-eventsticket-time { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: #9ca3af; } .dkmm-events__ticket-time svg { flex: none; } / "Find the member attending" form — frame B chrome (spec §2.4). The lookup swaps into the event-detail panel content, so a Back control pins top-left to mirror the panel's top-right ×. / / D1: Back is a normal block ABOVE the title (no absolute overlap of the

). / .dkmm-book-back { display: inline-flex; align-items: center; gap: 5px; margin: 2px 0 6px; background: none; border: 0; padding: 4px 0; font-size: 13px; font-weight: 700; color: #6b7280; cursor: pointer; } .dkmm-book-back:hover { color: var(--dkmm-accent); } .dkmm-book-back svg { flex: none; } .dkmm-book-lookup-title { margin-top: 22px; } / Two-row layout (spec §2.4, frame B): member number (≤12 chars, capped ~200px) on its own row, then initial (tiny) + surname on the second row. / .dkmm-book-fields { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; } .dkmm-book-field-row { display: flex; gap: 12px; } .dkmm-book-field { display: flex; flex-direction: column; } .dkmm-book-field--number { width: 200px; max-width: 200px; } .dkmm-book-field--initial { width: 72px; flex: none; } .dkmm-book-field--initial .dkmm-book-input { text-align: center; } .dkmm-book-field--surname { flex: 1; min-width: 0; } .dkmm-book-label { margin-bottom: 5px; font-size: 12px; font-weight: 600; color: #6b7280; } / Fields read as real inputs (spec §2.4, frame B .ipt2): taller, slightly bolder text, less rounded — the thin/very-rounded first build felt weak. / .dkmm-book-input { width: 100%; padding: 13px 14px; border: 1.5px solid #cbd2dc; border-radius: 8px; font-size: 15px; font-weight: 600; color: #1f2937; background: #fff; } .dkmm-book-input:focus { outline: none; border-color: var(--dkmm-accent); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); } .dkmm-book-find { display: inline-flex; align-items: center; justify-content: center; width: auto; padding: 13px 26px; border: none; border-radius: 8px; background: var(--dkmm-accent); color: #fff; font-size: 13.5px; font-weight: 700; cursor: pointer; box-shadow: var(--dkmm-cta-shadow); } .dkmm-book-find:hover { background: var(--dkmm-accent-hover); } .dkmm-book-lk-status { margin-top: 10px; font-size: 12.5px; color: #6b7280; } / Lookup results — frame B (spec §2.4); sit below a hairline once shown. / #dkmm-lk-results:not(:empty) { margin-top: 18px; border-top: 1px solid #eef0f3; padding-top: 16px; } .dkmm-book-found-banner { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; padding: 8px 12px; border-radius: 9px; background: var(--dkmm-accent-soft); color: var(--dkmm-ink); font-size: 12.5px; font-weight: 600; } .dkmm-book-found-banner svg { flex: none; color: var(--dkmm-accent); } .dkmm-book-rows { display: flex; flex-direction: column; gap: 8px; } .dkmm-book-rows .dkmm-book-row { border: 1px solid #e6e9f0; border-radius: 11px; } .dkmm-book-row-main { flex: 1; min-width: 0; } .dkmm-book-row-name { font-size: 13px; font-weight: 700; color: #111827; } .dkmm-book-row-meta { display: flex; align-items: center; gap: 4px; margin-top: 2px; font-size: 11px; color: #9ca3af; } .dkmm-book-row-meta svg { flex: none; } .dkmm-book-none { font-size: 13px; color: #6b7280; margin: 0; } .dkmm-book-card { margin: 0.75rem 0; min-height: 90px; } .dkmm-book-bank p { margin: 0.15rem 0; } / Basket summary — quiet Subtotal / Family discount (N students) / Total lines (spec §2.5): label left, value right; total emphasised; accent dot on the discount; prices in ink. / .dkmm-book-summary { margin: 14px 0; border: 1px solid var(--dkmm-border); border-radius: 12px; padding: 12px 14px; background: #fbfcfe; } .dkmm-book-summary-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13.5px; color: #475569; padding: 3px 0; } .dkmm-book-summary-row span:last-child { font-weight: 600; color: #111827; } .dkmm-book-summary-row--discount span:last-child { color: #475569; font-weight: 600; } .dkmm-book-summary-dot { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 999px; background: var(--dkmm-accent); vertical-align: middle; } .dkmm-book-summary-row--total { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--dkmm-border); font-size: 15px; font-weight: 700; color: #111827; } .dkmm-book-summary-row--total span:last-child { font-weight: 800; } / ========================================================================== Booking journey v5 (§2.6) — find → choose (day picker) → basket → pay → confirm ========================================================================== / / D1: back row sits above the title; the × is the panel's own (top-right). / .dkmm-book-chrome { padding: 14px 24px 0; } .dkmm-book-screen { padding: 4px 24px 22px; } .dkmm-book-h2 { margin: 4px 0 4px; font-size: 20px; font-weight: 800; color: #111827; } .dkmm-book-sub { margin: 0 0 18px; font-size: 13px; color: #6b7280; } .dkmm-book-evt-sub { font-size: 12.5px; color: #6b7280; margin-bottom: 16px; } / D2: primary buttons are content-width, right-aligned in a footer row. / .dkmm-book-cta { display: inline-flex; align-items: center; justify-content: center; gap: 7px; width: auto; padding: 13px 22px; border: 0; border-radius: 10px; background: var(--dkmm-accent); color: #fff; font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; box-shadow: var(--dkmm-cta-shadow); } .dkmm-book-cta:hover { background: var(--dkmm-accent-hover); } .dkmm-book-cta:disabled { opacity: 0.55; cursor: default; box-shadow: none; } .dkmm-book-actions { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 18px; } .dkmm-book-choose-prompt { font-size: 12px; color: #9ca3af; font-weight: 600; } / D6: find-member step — content-sized panel + fields (not a wide cavern). / .dkmm-events__detail-panel.dkmm-book-narrow { max-width: 480px; } .dkmm-book-find-col { max-width: 100%; } .dkmm-book-find-col .dkmm-book-field { margin-bottom: 14px; } .dkmm-book-field--number .dkmm-book-input { max-width: 200px; } .dkmm-book-find-names { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 6px; } .dkmm-book-find-names .dkmm-book-field--initial { width: 70px; } .dkmm-book-find-names .dkmm-book-field--initial .dkmm-book-input { text-align: center; } .dkmm-book-find-names .dkmm-book-field--surname { width: 220px; max-width: 100%; } / People picker (member household) / .dkmm-book-people { display: flex; flex-direction: column; gap: 8px; } .dkmm-book-person { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; padding: 11px 13px; border: 1.5px solid var(--dkmm-border); border-radius: 11px; background: #fff; font: inherit; cursor: pointer; } .dkmm-book-person:hover { border-color: var(--dkmm-accent); } .dkmm-book-person-name { font-size: 13.5px; font-weight: 700; color: #111827; } / Choose ticket / .dkmm-book-member-head { display: flex; align-items: center; gap: 10px; margin: 6px 0 16px; } .dkmm-book-member-name { font-size: 15px; font-weight: 800; color: #111827; } .dkmm-book-tickets { display: flex; flex-direction: column; gap: 9px; } .dkmm-book-ticket { border: 1.5px solid var(--dkmm-border); border-radius: 11px; overflow: hidden; } .dkmm-book-ticket--on { border-color: var(--dkmm-accent); background: var(--dkmm-accent-soft); } .dkmm-book-ticket-head { display: flex; align-items: center; gap: 11px; padding: 12px 14px; cursor: pointer; } .dkmm-book-radio { width: 16px; height: 16px; flex: none; border-radius: 999px; border: 2px solid #cbd5e1; } .dkmm-book-ticket--on .dkmm-book-radio { border: 5px solid var(--dkmm-accent); } .dkmm-book-ticket-main { flex: 1; min-width: 0; } .dkmm-book-ticket-name { font-size: 13.5px; font-weight: 700; color: #111827; } .dkmm-book-ticket-meta { font-size: 11.5px; color: #6b7280; margin-top: 1px; } .dkmm-book-ticket-price { font-size: 14px; font-weight: 800; color: #111827; } .dkmm-book-perday { font-size: 11px; color: #6b7280; font-weight: 600; } .dkmm-book-days { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 14px 12px 41px; } .dkmm-book-day { width: 42px; height: 34px; border-radius: 8px; border: 1.5px solid var(--dkmm-border); background: #fff; color: #6b7280; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; } .dkmm-book-day.on { border-color: var(--dkmm-accent); background: #fff; color: var(--dkmm-accent); box-shadow: 0 0 0 1px var(--dkmm-accent) inset; } .dkmm-book-choose-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--dkmm-hair); } .dkmm-book-choose-label { font-size: 11px; color: #9ca3af; font-weight: 600; } .dkmm-book-choose-price { font-size: 18px; font-weight: 800; color: #111827; } .dkmm-book-choose-foot .dkmm-book-cta { margin-top: 0; } / Your booking (basket) / .dkmm-book-lines { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; } .dkmm-book-line { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--dkmm-border); border-radius: 12px; } .dkmm-book-line-main { flex: 1; min-width: 0; } .dkmm-book-line-name { font-size: 13.5px; font-weight: 700; color: #111827; } .dkmm-book-line-sub { font-size: 11.5px; color: #6b7280; } .dkmm-book-line-price { font-size: 14px; font-weight: 800; color: #111827; } .dkmm-book-remove { background: none; border: 0; color: #9ca3af; font: inherit; font-size: 12px; font-weight: 600; text-decoration: underline; cursor: pointer; } .dkmm-book-addanother { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; color: var(--dkmm-accent); font: inherit; font-size: 13px; font-weight: 700; padding: 8px 0; cursor: pointer; } .dkmm-book-summary-note { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #6b7280; } / Payment / .dkmm-book-pay-summary { border: 1px solid var(--dkmm-border); border-radius: 12px; padding: 13px 15px; background: #fafbfc; margin-bottom: 18px; display: flex; flex-direction: column; gap: 6px; } .dkmm-book-card { margin: 4px 0 6px; min-height: 90px; } .dkmm-book-cardonly { font-size: 11.5px; color: #9ca3af; text-align: center; margin-top: 10px; } / Confirmation / .dkmm-book-confirm { text-align: center; } .dkmm-book-confirm-tick { width: 54px; height: 54px; border-radius: 999px; background: #eaf3ee; color: var(--dkmm-dot-done); display: inline-flex; align-items: center; justify-content: center; margin: 8px 0 12px; } .dkmm-book-confirm-tick svg { width: 28px; height: 28px; } .dkmm-book-confirm-ref { font-size: 13px; color: #6b7280; margin-bottom: 16px; } .dkmm-book-confirm-ref b { color: #111827; } .dkmm-book-confirm-card { text-align: left; border: 1px solid var(--dkmm-border); border-radius: 12px; overflow: hidden; margin-bottom: 16px; } .dkmm-book-confirm-head { padding: 11px 15px; background: #fafbfc; border-bottom: 1px solid var(--dkmm-hair); font-size: 13px; font-weight: 700; color: #111827; } .dkmm-book-confirm-lines { padding: 6px 15px; } .dkmm-book-confirm-line { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--dkmm-hair); font-size: 12.5px; color: #374151; } .dkmm-book-confirm-line:last-child { border-bottom: 0; } .dkmm-book-confirm-paid { display: flex; justify-content: space-between; align-items: baseline; padding: 11px 15px; background: #fafbfc; border-top: 1px solid var(--dkmm-hair); font-size: 12px; color: #9ca3af; font-weight: 600; } .dkmm-book-confirm-paid span:last-child { font-size: 16px; font-weight: 800; color: #111827; } .dkmm-book-confirm-email { font-size: 12.5px; color: #6b7280; margin-bottom: 16px; } .dkmm-book-confirm-email b { color: #374151; } .dkmm-book-confirm-actions { display: flex; justify-content: center; gap: 10px; } / Primary buttons go full-width only on small screens (D2). / @media (max-width: 600px) { .dkmm-book-cta { width: 100%; } .dkmm-book-actions, .dkmm-book-choose-foot, .dkmm-book-confirm-actions { flex-direction: column; align-items: stretch; } } .dkmm-reg-list { list-style: none; padding: 0; margin: 0; } .dkmm-reg-list li { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0; border-bottom: 1px solid #f1f5f9; } .dkmm-reg-name { font-weight: 600; } .dkmm-reg-toggle { margin-left: auto; border: 1px solid #cbd5e1; background: #fff; border-radius: 4px; padding: 0.2rem 0.6rem; cursor: pointer; } .dkmm-reg-status { color: var(--dkmm-pill-txt); font-size: 0.85rem; } / ============================================================================= * Member Portal redesign (Clarity Blue) — [dkmm_member_portal] + [dkmm_membership] * Theme-agnostic: inherits the theme font; single #2563eb accent; no green prices. * ============================================================================= / .dk-portal, .dk-portal-login, .dk-signup, .dk-renew { --dkp-page:#eef1f6; --dkp-card:#fff; --dkp-ink:#0f172a; --dkp-sub:#64748b; --dkp-bd:#e6e9f0; --dkp-accent:#2563eb; --dkp-soft:#eef4ff; --dkp-accent-d:#1d4ed8; --dkp-ok:#16a34a; --dkp-warn:#d97706; --dkp-bad:#dc2626; --dkp-elev:0 1px 2px rgba(16,24,40,.05),0 14px 28px -18px rgba(16,24,40,.22); --dkp-cta:0 1px 2px rgba(37,99,235,.35),0 6px 14px -6px rgba(37,99,235,.45); font-family: inherit; color: var(--dkp-ink); } .dk-portal , .dk-portal-login , .dk-signup , .dk-renew , .dk-portal-modal , .dk-portal-drawer * { box-sizing: border-box; } /* Login card (Frame 1) is defined authoritatively in the §2.1 block above (after .dkmm-loginsubmit) — do not redefine .dk-portal-login* here. / / ---- Shell (Frames 2/3) ---- / .dk-portal { background:var(--dkp-card); border:1px solid var(--dkp-bd); border-radius:16px; overflow:hidden; box-shadow:var(--dkp-elev); } .dk-portalheader { display:flex; align-items:center; height:60px; padding:0 20px; border-bottom:1px solid var(--dkp-bd); background:var(--dkp-card); } .dk-portalburger { display:none; background:none; border:0; color:#334155; cursor:pointer; margin-right:8px; padding:4px; } .dk-portalbrand { display:flex; align-items:center; gap:11px; } .dk-portalmono { width:32px; height:32px; border-radius:9px; background:#0f172a; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px; } .dk-portalassoc { font-size:15px; font-weight:700; color:var(--dkp-ink); } .dk-portalavatar { margin-left:auto; width:34px; height:34px; border-radius:50%; background:var(--dkp-soft); color:var(--dkp-accent-d); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; } .dk-portalbody { display:flex; } .dk-portalsidebar { width:236px; flex-shrink:0; border-right:1px solid var(--dkp-bd); background:var(--dkp-card); display:flex; flex-direction:column; } .dk-portalsidebar-head { height:52px; display:flex; align-items:center; padding:0 18px; border-bottom:1px solid var(--dkp-bd); } .dk-portaleyebrow { font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#94a3b8; } .dk-portalnav { padding:12px; display:flex; flex-direction:column; gap:3px; } .dk-portalnav-item { display:flex; align-items:center; gap:12px; padding:9px 11px; border-radius:10px; font-size:13.5px; font-weight:500; color:#475569; background:none; border:0; cursor:pointer; text-align:left; width:100%; font-family:inherit; } .dk-portalnav-item:hover { background:#f1f5f9; } .dk-portalnav-item.is-active { background:var(--dkp-soft); color:var(--dkp-accent-d); font-weight:600; } .dk-portalnav-item svg { flex-shrink:0; } .dk-portalsidebar-foot { margin-top:auto; padding:12px; } .dk-portalsignout { display:flex; align-items:center; gap:9px; padding:10px 12px; border-radius:11px; border:1px solid var(--dkp-bd); text-decoration:none; color:var(--dkp-sub); font-size:13px; font-weight:600; } .dk-portalsignout:hover { background:#f1f5f9; } .dk-portalmain { flex:1; min-width:0; background:var(--dkp-page); padding:24px 26px; } .dk-portalh1 { margin:0 0 2px; font-size:23px; font-weight:800; letter-spacing:-.01em; color:var(--dkp-ink); } .dk-portalsubtitle { margin:0 0 18px; font-size:13.5px; color:var(--dkp-sub); } .dk-portalskeleton { display:flex; flex-direction:column; gap:12px; } .dk-portalskeleton span { display:block; height:60px; border-radius:12px; background:#e9edf3; } / KPI tiles / .dk-portal-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:16px; } .dk-portal-kpi { background:#fff; border:1px solid var(--dkp-bd); border-left:4px solid var(--dkp-accent); border-radius:14px; padding:14px 16px; box-shadow:0 1px 2px rgba(16,24,40,.05); } .dk-portal-kpi--green { border-left-color:var(--dkp-ok); } .dk-portal-kpi--blue { border-left-color:var(--dkp-accent); } .dk-portal-kpi--red { border-left-color:var(--dkp-bad); } .dk-portal-kpilabel { font-size:11.5px; font-weight:600; color:var(--dkp-sub); margin-bottom:8px; } .dk-portal-kpivalue { display:flex; align-items:baseline; gap:8px; font-size:24px; font-weight:800; color:var(--dkp-ink); } .dk-portal-kpisub { font-size:12.5px; font-weight:500; color:var(--dkp-sub); } / Cards / .dk-portal-card { background:#fff; border:1px solid var(--dkp-bd); border-radius:16px; padding:18px 20px; box-shadow:0 1px 2px rgba(16,24,40,.05); margin-bottom:16px; } .dk-portal-cardtitle { font-size:15px; font-weight:700; color:var(--dkp-ink); } .dk-portal-cardrow { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; } .dk-portal-cardhint { font-size:12.5px; color:#94a3b8; } / Pills + buttons / .dk-portal-pill { font-size:11.5px; font-weight:700; padding:3px 9px; border-radius:999px; display:inline-block; white-space:nowrap; } .dk-portal-pill--green { color:var(--dkp-ok); background:#e9f7ee; } .dk-portal-pill--red { color:var(--dkp-bad); background:#fdecec; } .dk-portal-pill--gray { color:#64748b; background:#f1f5f9; } .dk-portal-pill--blue { color:var(--dkp-accent-d); background:var(--dkp-soft); } .dk-portal-pill--amber { color:var(--dkp-warn); background:#fff7ed; } .dk-portal-pill--purple { color:#7c3aed; background:#f3e8ff; } .dk-portal-btn { font-family:inherit; font-size:14px; font-weight:600; border-radius:11px; padding:11px; cursor:pointer; border:0; text-align:center; } .dk-portal-btn--primary { color:#fff; background:var(--dkp-accent); box-shadow:var(--dkp-cta); } .dk-portal-btn--outline { color:var(--dkp-accent-d); background:#fff; border:1px solid #cbd8f5; } .dk-portal-btn--sm { padding:7px 14px; font-size:13px; border-radius:9px; } .dk-portal-btn--block { width:100%; display:block; } .dk-portal-btn:disabled { opacity:.6; cursor:default; } / Membership card / .dk-portal-mshiphead { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; } .dk-portal-mshipid { display:flex; align-items:center; gap:14px; } .dk-portal-mshipavatar { width:52px; height:52px; border-radius:13px; background:var(--dkp-soft); color:var(--dkp-accent-d); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:18px; flex-shrink:0; } .dk-portal-mshipname { font-size:18px; font-weight:700; color:var(--dkp-ink); } .dk-portal-mshipmeta { font-size:13px; color:var(--dkp-sub); } .dk-portal-mshiptiles { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:16px 0; } .dk-portal-mshiptile { background:#f7f9fc; border:1px solid #eef1f6; border-radius:12px; padding:13px 15px; } .dk-portal-mshiptk { font-size:11.5px; color:var(--dkp-sub); margin-bottom:4px; } .dk-portal-mshiptv { font-size:15px; font-weight:700; color:var(--dkp-ink); } .dk-portal-mshipdays { font-weight:500; color:var(--dkp-sub); } .dk-portal-mshipactions { display:grid; grid-template-columns:1fr 1fr; gap:12px; } / Session rows / .dk-portal-sess { display:flex; align-items:center; gap:14px; padding:11px 0; border-top:1px solid #f1f3f7; } .dk-portal-sessdate { text-align:center; width:38px; flex-shrink:0; } .dk-portal-sessdw { display:block; font-size:10.5px; font-weight:700; color:var(--dkp-accent); } .dk-portal-sessdd { display:block; font-size:17px; font-weight:800; color:var(--dkp-ink); } .dk-portal-sessmain { flex:1; min-width:0; } .dk-portal-sessname { font-size:14px; font-weight:600; color:var(--dkp-ink); } .dk-portal-sessmeta { font-size:12.5px; color:var(--dkp-sub); } .dk-portal-sesswhen { font-size:12.5px; color:var(--dkp-sub); } .dk-portal-chip-btn { font-family:inherit; font-size:12.5px; font-weight:600; color:var(--dkp-accent-d); background:var(--dkp-soft); border:1px solid #dbe6ff; border-radius:9px; padding:6px 13px; cursor:pointer; flex-shrink:0; } .dk-portal-chip-btn.is-done { color:var(--dkp-ok); background:#e9f7ee; border-color:#bbf7d0; } .dk-portal-chip-btn:disabled { opacity:.7; } / Your group / .dk-portal-grp { display:flex; align-items:center; gap:12px; padding:11px 0; border-top:1px solid #f1f3f7; } .dk-portal-grp:first-child { border-top:0; } .dk-portal-grpavatar { width:38px; height:38px; border-radius:50%; background:var(--dkp-soft); color:var(--dkp-accent-d); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; flex-shrink:0; } .dk-portal-grpmain { flex:1; min-width:0; } .dk-portal-grpname { font-size:14px; font-weight:600; } .dk-portal-grpmeta { font-size:12.5px; color:var(--dkp-sub); } / Events / .dk-portal-eventhead { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px; } .dk-portal-eventname { font-size:15px; font-weight:700; } .dk-portal-eventmeta { font-size:12.5px; color:var(--dkp-sub); } .dk-portal-eventtickets { margin-top:10px; display:flex; flex-wrap:wrap; gap:8px; } .dk-portal-eventticket { font-size:12px; color:var(--dkp-ink); background:#f7f9fc; border:1px solid #eef1f6; border-radius:8px; padding:5px 10px; } / Bills / .dk-portal-billhead { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; } .dk-portal-billno { font-size:14px; font-weight:700; } .dk-portal-billmeta { font-size:12.5px; color:var(--dkp-sub); } .dk-portal-billamt { font-size:16px; font-weight:800; } .dk-portal-billlines { margin:12px 0; border-top:1px solid #f1f3f7; padding-top:10px; display:flex; flex-direction:column; gap:6px; } .dk-portal-billline { display:flex; justify-content:space-between; font-size:13px; color:var(--dkp-sub); } .dk-portal-billfoot { display:flex; justify-content:flex-end; margin-top:6px; } / Profile / .dk-portal-profgrid { display:grid; grid-template-columns:1fr 1fr; gap:16px; } .dk-portal-profgrid .dk-portal-card { margin-bottom:0; } .dk-portal-profrows { display:flex; flex-direction:column; gap:11px; margin-top:14px; } .dk-portal-profrow { display:flex; justify-content:space-between; font-size:13.5px; } .dk-portal-profk { color:var(--dkp-sub); } .dk-portal-profv { font-weight:600; color:var(--dkp-ink); } .dk-portal-profempty { font-size:13.5px; color:var(--dkp-sub); margin:8px 0 0; } .dk-portal-profgrades { margin-top:8px; } .dk-portal-profgrade { display:flex; justify-content:space-between; font-size:13px; padding:8px 0; border-bottom:1px solid #f1f3f7; } .dk-portal-profgrade:last-child { border-bottom:0; } .dk-portal-profgrade-name { font-weight:600; color:var(--dkp-ink); } .dk-portal-profgrade-meta { color:var(--dkp-sub); } / Pay modal + mobile drawer / body.dk-portal-modal-open { overflow:hidden; } .dk-portal-modal, .dk-portal-drawer { position:fixed; inset:0; z-index:100000; font-family:inherit; color:var(--dkp-ink); } .dk-portal-modalbackdrop, .dk-portal-drawerbackdrop { position:absolute; inset:0; background:rgba(15,23,42,.42); } .dk-portal-modaldialog { position:relative; max-width:460px; margin:6vh auto; background:#fff; border-radius:18px; box-shadow:0 30px 70px -15px rgba(16,24,40,.5); overflow:hidden; max-height:88vh; display:flex; flex-direction:column; } .dk-portal-modalhead { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--dkp-bd); flex-shrink:0; } .dk-portal-modaltitle { margin:0; font-size:17px; font-weight:700; } .dk-portal-modalclose { background:none; border:0; font-size:24px; line-height:1; color:#94a3b8; cursor:pointer; } .dk-portal-modalbody { padding:20px; overflow-y:auto; } .dk-portal-modalloading { display:flex; align-items:center; gap:10px; justify-content:center; padding:30px 0; color:var(--dkp-sub); } .dk-portal-modalerr { margin-bottom:12px; background:#fdecec; color:var(--dkp-bad); border:1px solid #f7c9c9; border-radius:10px; padding:10px 12px; font-size:13px; } .dk-portal-spinner { width:20px; height:20px; border:2px solid #e6e9f0; border-top-color:var(--dkp-accent); border-radius:50%; animation:dkp-spin .7s linear infinite; display:inline-block; } @keyframes dkp-spin { to { transform:rotate(360deg); } } .dk-portal-paygroup { border:1px solid var(--dkp-bd); border-radius:12px; overflow:hidden; margin-bottom:12px; } .dk-portal-paygrouphead { display:flex; justify-content:space-between; padding:10px 14px; background:#f7f9fc; font-size:14px; font-weight:600; } .dk-portal-paymethods { padding:10px 14px; display:flex; flex-direction:column; gap:8px; } .dk-portal-paymethod { font-size:13.5px; display:flex; gap:8px; align-items:center; } .dk-portal-paytotal { display:flex; justify-content:space-between; font-weight:800; font-size:15px; padding:10px 0; border-top:1px solid var(--dkp-bd); margin-bottom:14px; } .dk-portal-paycardhead { display:flex; justify-content:space-between; font-weight:700; margin-bottom:12px; } .dk-portal-paytest { font-size:12px; color:var(--dkp-warn); background:#fff7ed; border:1px solid #fde68a; border-radius:8px; padding:8px 10px; margin-bottom:12px; } #dk-portal-card { margin-bottom:14px; min-height:44px; } .dk-portal-paysuccess { text-align:center; padding:10px 0; } .dk-portal-paytick { width:60px; height:60px; border-radius:50%; background:#e9f7ee; color:var(--dkp-ok); font-size:30px; display:flex; align-items:center; justify-content:center; margin:0 auto 14px; } .dk-portal-paybank { text-align:left; border:1px solid #dbe6ff; background:var(--dkp-soft); border-radius:12px; padding:12px 14px; margin:12px 0; } .dk-portal-paybankrow { display:flex; justify-content:space-between; font-weight:700; margin-bottom:8px; } .dk-portal-drawerpanel { position:absolute; top:0; left:0; bottom:0; width:270px; max-width:85vw; background:#fff; box-shadow:0 0 40px rgba(0,0,0,.2); display:flex; flex-direction:column; padding:16px 12px; } .dk-portal-drawerhead { display:flex; align-items:center; justify-content:space-between; padding:0 6px 14px; } .dk-portal-drawerclose { background:none; border:0; color:#94a3b8; cursor:pointer; padding:4px; } .dk-portal-drawerpanel .dk-portalnav { padding:0; } .dk-portal-drawerpanel .dk-portalsidebar-foot { padding:12px 0 0; } / Portal responsive / @media (max-width:767px) { .dk-portalburger { display:inline-flex; } .dk-portalsidebar { display:none; } .dk-portalmain { padding:16px 14px; } .dk-portalassoc { max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .dk-portal-kpis { grid-template-columns:1fr 1fr; } .dk-portal-profgrid { grid-template-columns:1fr; } .dk-portal-mshipactions { grid-template-columns:1fr; } } @media (max-width:430px) { .dk-portal-kpis { grid-template-columns:1fr; } } / ---- Sign-up page (Frame 4) ---- / .dk-signup { padding:8px 0; } .dk-signupcol { max-width:600px; margin:0 auto; display:flex; flex-direction:column; gap:16px; } .dk-signuphead { text-align:center; } .dk-signuptitle { margin:0; font-size:24px; font-weight:800; letter-spacing:-.01em; } .dk-signupassoc { margin:6px 0 0; font-size:13.5px; color:var(--dkp-sub); } .dk-signuperror { border-radius:10px; } .dk-sucard { background:#fff; border:1px solid var(--dkp-bd); border-radius:16px; padding:20px; box-shadow:0 1px 2px rgba(16,24,40,.05); } .dk-susechead { border-bottom:1px solid var(--dkp-bd); padding-bottom:12px; margin-bottom:16px; } .dk-susechead b { display:block; font-size:16px; font-weight:700; } .dk-susechead span { display:block; font-size:13px; color:var(--dkp-sub); margin-top:3px; } .dk-sustack { display:flex; flex-direction:column; gap:14px; } .dk-surow2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; } .dk-sufield { display:flex; flex-direction:column; gap:6px; } .dk-sulbl { font-size:12.5px; font-weight:600; color:#334155; } .dk-suinput { width:100%; font-family:inherit; font-size:14px; color:var(--dkp-ink); background:#fff; border:1px solid var(--dkp-bd); border-radius:10px; padding:11px 12px; outline:none; } .dk-suinput:focus { border-color:var(--dkp-accent); box-shadow:0 0 0 3px rgba(37,99,235,.15); } .dk-sunote { font-size:11.5px; color:var(--dkp-sub); } .dk-suradios { display:flex; gap:20px; padding-top:6px; } .dk-suradio { display:flex; align-items:center; gap:7px; font-size:14px; color:#334155; } .dk-sucheck { display:flex; align-items:center; gap:10px; font-size:14px; color:#334155; cursor:pointer; } .dk-suguardian { border-radius:12px; padding:16px; } .dk-suguardian { border:1px solid var(--dkp-bd); background:#f7f9fc; } .dk-suguardian-title { font-size:14px; font-weight:700; margin-bottom:12px; } .dk-suguardian .dk-sufield { margin-bottom:12px; } .dk-suguardian .dk-sufield:last-child { margin-bottom:0; } .dk-suplan { display:flex; align-items:center; gap:12px; border:2px solid var(--dkp-bd); border-radius:12px; padding:14px 16px; cursor:pointer; margin-bottom:10px; } .dk-suplan.is-selected { border-color:var(--dkp-accent); background:var(--dkp-soft); } .dk-suplan-main { flex:1; } .dk-suplan-name { display:block; font-size:14.5px; font-weight:700; } .dk-suplan-meta { display:block; font-size:12.5px; color:var(--dkp-sub); } .dk-suplan-price { font-size:17px; font-weight:800; } .dk-sufamilynote { margin-top:14px; border:1px solid var(--dkp-bd); background:#f7f9fc; border-radius:10px; padding:12px 14px; font-size:12.5px; color:var(--dkp-sub); } .dk-sumuted { font-size:13px; color:var(--dkp-sub); margin:0; } .dk-supostcode { width:50%; } .dk-susummary { border:1px solid var(--dkp-bd); background:#f7f9fc; border-radius:12px; padding:16px; margin-bottom:12px; } .dk-susumrow { display:flex; justify-content:space-between; font-size:13.5px; padding:4px 0; } .dk-susumrow span:first-child { color:var(--dkp-sub); } .dk-susumrow span:last-child { font-weight:600; } .dk-susumtotal { display:flex; justify-content:space-between; font-size:15px; padding:10px 0 2px; margin-top:6px; border-top:1px solid var(--dkp-bd); font-weight:800; } .dk-sufooter { display:flex; justify-content:space-between; align-items:center; gap:12px; } .dk-subtn { font-family:inherit; font-size:14px; font-weight:600; border-radius:10px; padding:11px 22px; cursor:pointer; border:0; text-decoration:none; display:inline-block; } .dk-subtn--primary { color:#fff; background:var(--dkp-accent); box-shadow:var(--dkp-cta); } .dk-subtn--outline { color:#475569; background:#fff; border:1px solid var(--dkp-bd); } .dk-subtn:disabled { opacity:.6; cursor:default; } .dk-suresend { margin-top:10px; } .dk-sunotice { background:var(--dkp-soft); color:var(--dkp-accent-d); border:1px solid #dbe6ff; border-radius:10px; padding:10px 12px; font-size:13px; } .dk-surevealhint { text-align:center; font-size:12px; color:#94a3b8; margin:0; } .dk-susuccess { text-align:center; padding:30px 24px; } .dk-susuccess-tick { width:64px; height:64px; border-radius:50%; background:#e9f7ee; color:var(--dkp-ok); font-size:32px; display:flex; align-items:center; justify-content:center; margin:0 auto 16px; } .dk-susuccess h3 { margin:0 0 8px; font-size:22px; font-weight:800; } .dk-susuccess p { margin:0; font-size:14px; color:var(--dkp-sub); line-height:1.5; } .dk-signup--member .dk-signupnote-card { max-width:440px; margin:24px auto; background:#fff; border:1px solid var(--dkp-bd); border-radius:16px; padding:24px; text-align:center; box-shadow:var(--dkp-elev); } .dk-signupnote { font-size:15px; font-weight:600; margin:0 0 12px; } .dk-signupnote-link { color:var(--dkp-accent-d); font-weight:600; text-decoration:none; } / ---- Portal v2 additions ---- / / Panels must actually hide — force over any host-theme display rule on sections. / .dk-portalpanel[hidden] { display: none !important; } .dk-portal-kpivalue--sm > span:first-child { font-size: 17px; } .dk-portal-kpisubplain { font-size: 12.5px; font-weight: 500; color: var(--dkp-sub); } / Per-member booking chips (sessions + events) / .dk-portal-sessmembers, .dk-portal-tkmembers { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; } .dk-portal-mchip { font-family: inherit; font-size: 12.5px; font-weight: 600; border-radius: 999px; padding: 5px 12px; border: 1px solid transparent; } .dk-portal-mchip--booked { color: var(--dkp-ok); background: #e9f7ee; } .dk-portal-mchip--amber { color: var(--dkp-warn); background: #fff7ed; } .dk-portal-mchip--gray { color: #64748b; background: #f1f5f9; } .dk-portal-mchip--purple { color: #7c3aed; background: #f3e8ff; } .dk-portal-mchip--blue { color: var(--dkp-accent-d); background: var(--dkp-soft); } .dk-portal-mchip--red { color: var(--dkp-bad); background: #fdecec; } .dk-portal-mchip--action { color: var(--dkp-accent-d); background: var(--dkp-soft); border-color: #dbe6ff; cursor: pointer; } .dk-portal-mchip--action:hover { background: #e2ecff; } .dk-portal-mchip--action:disabled { opacity: .7; cursor: default; } / Advance-booking quantity picker (sits beside the pay chip) / .dk-portal-qty { font-family: inherit; font-size: 12.5px; border: 1px solid var(--dkp-bd); border-radius: 8px; padding: 4px 6px; background: #fff; color: var(--dkp-ink); } .dk-portal-grpexp { font-size: 12px; color: var(--dkp-sub); margin-right: 8px; white-space: nowrap; } / Events tickets / .dk-portal-eventsoon { margin-top: 10px; font-size: 12.5px; font-weight: 600; color: var(--dkp-sub); } .dk-portal-tk { border-top: 1px solid #f1f3f7; padding: 12px 0 4px; } .dk-portal-tk:first-of-type { border-top: 0; margin-top: 6px; } .dk-portal-tkrow { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .dk-portal-tkname { font-size: 14px; font-weight: 600; } .dk-portal-tkprice { font-size: 14px; font-weight: 700; white-space: nowrap; } .dk-portal-tknote { font-size: 12px; color: var(--dkp-sub); margin-top: 4px; } .dk-portal-payall { margin-bottom: 14px; } / Profile switcher / .dk-portal-profswitch { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; } .dk-portal-profselect { font-family: inherit; font-size: 14px; border: 1px solid var(--dkp-bd); border-radius: 10px; padding: 8px 12px; background: #fff; color: var(--dkp-ink); } / Family / group management / .dk-portal-grpactions { display: flex; gap: 6px; margin-left: 8px; flex-shrink: 0; } .dk-portal-chip-btn--danger { color: var(--dkp-bad); background: #fdecec; border-color: #f7c9c9; } .dk-portal-chip-btn--danger:hover { background: #fbdada; } .dk-fmscenarios { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; } .dk-fmscenarios .dk-suradio { padding: 10px 12px; border: 1px solid var(--dkp-bd); border-radius: 10px; } .dk-fmerr { margin-bottom: 12px; background: #fdecec; color: var(--dkp-bad); border: 1px solid #f7c9c9; border-radius: 10px; padding: 10px 12px; font-size: 13px; } .dk-fmerr[hidden] { display: none; } .dk-fmblock { border-top: 1px solid #f1f3f7; padding-top: 12px; display: flex; flex-direction: column; gap: 8px; } .dk-fmblock:first-of-type { border-top: 0; padding-top: 0; } .dk-fmblock .dk-portal-btn { align-self: flex-start; } .dk-fmsechead { font-size: 15px; font-weight: 700; } .dk-signupnote-sub { font-size: 13px; color: var(--dkp-sub); margin: 6px 0 0; } @media (max-width:520px) { .dk-surow2 { grid-template-columns:1fr; } .dk-supostcode { width:100%; } .dk-sufooter { flex-direction:column; align-items:stretch; } .dk-subtn { text-align:center; } } / ========================================================================== Member number entry hint (BL-072) The renewal form carries no other styling of its own — this is the one rule it needs so the "with or without the prefix" hint reads as a hint and not as a second line of the label. ========================================================================== / .dk-renew-hint { display: block; margin-top: 4px; font-size: 12.5px; font-weight: 400; color: #6b7280; } / ========================================================================== Login — Google sign-in (WP Google SSO, 2026-08-24) The member leaves for the DK-hosted /wp-auth page and authenticates with Google there, so this site's URL is never registered with Google. ========================================================================== / .dkmm-logindivider { display: flex; align-items: center; gap: 10px; margin: 14px 0; color: #9ca3af; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; } .dkmm-logindivider::before, .dkmm-logindivider::after { content: ""; flex: 1; border-top: 1px solid #e5e7eb; } .dkmm-logingoogle { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; box-sizing: border-box; padding: 10px 14px; border: 1px solid #d1d5db; border-radius: 8px; background: #fff; color: #374151; font-size: 14px; font-weight: 600; text-decoration: none; } .dkmm-logingoogle:hover { background: #f9fafb; } .dkmm-logingoogle-icon { width: 16px; height: 16px; flex: none; } / Portal sidebar — "Open the full portal" handoff link (WP → DK handshake). / .dk-portalhandoff { display: block; padding: 8px 12px; margin-bottom: 6px; border-radius: 8px; color: #475569; font-size: 13px; font-weight: 600; text-decoration: none; } .dk-portalhandoff:hover { background: rgba(148, 163, 184, 0.16); } / ============================================================================= * [dkmm_membership] — one membership page: entry step, household sign-up, and the * renewal widget styled with the same card system (2026-08-24). * The renewal widget previously carried a single rule (.dk-renew-hint) and rendered * on the theme's defaults; it now matches the sign-up form it sits beside. * ============================================================================= / / ---- Entry step (one question, two answers) ---- / .dk-suchoice { display: flex; align-items: flex-start; gap: 12px; width: 100%; text-align: left; font-family: inherit; background: #fff; border: 2px solid var(--dkp-bd); border-radius: 12px; padding: 16px; margin-bottom: 10px; cursor: pointer; } .dk-suchoice:last-of-type { margin-bottom: 0; } .dk-suchoice:hover { border-color: #cbd5e1; } .dk-suchoice.is-selected { border-color: var(--dkp-accent); background: var(--dkp-soft); } .dk-suchoice-name { display: block; font-size: 14.5px; font-weight: 700; } .dk-suchoice-meta { display: block; font-size: 12.5px; color: var(--dkp-sub); margin-top: 3px; line-height: 1.45; } .dk-suchosen { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .dk-suback { background: none; border: 0; padding: 0; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--dkp-accent-d); cursor: pointer; } .dk-membershipsignedin .dk-sumuted { line-height: 1.5; } .dk-membershipsignedin-actions { margin-top: 14px; } / ---- Household sign-up (one card per person) ---- / .dk-supersonhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .dk-supersonhead-main { display: block; } .dk-suremove { flex: 0 0 auto; background: none; border: 0; padding: 0; font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--dkp-bad); cursor: pointer; } .dk-sumemberships { padding-top: 4px; } .dk-sumemberships .dk-sulbl { display: block; margin-bottom: 8px; } .dk-sumemberships .dk-suplan:last-child { margin-bottom: 0; } .dk-suaddmember { width: 100%; border: 1px dashed #c7d2e4; background: #fff; border-radius: 12px; padding: 12px; font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--dkp-accent-d); cursor: pointer; } .dk-suaddmember:hover { border-color: var(--dkp-accent); background: var(--dkp-soft); } / ---- Entry rows, collapsed people, field-level errors (stage4fu, 2026-08-25) ---- / / The entry options navigate — a chevron, not a radio dot. / .dk-suchoice--nav { align-items: center; } .dk-suchoice-chev { flex: 0 0 auto; width: 8px; height: 8px; margin-left: auto; margin-right: 4px; border-right: 2px solid #94a3b8; border-bottom: 2px solid #94a3b8; transform: rotate(-45deg); } .dk-suchoice--nav:hover .dk-suchoice-chev { border-color: var(--dkp-accent); } / A completed person, collapsed to one line. / .dk-supersonrow { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--dkp-bd); border-radius: 12px; padding: 12px 16px; margin-bottom: 10px; } .dk-supersonrow-chip { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%; background: var(--dkp-soft); color: var(--dkp-accent-d); font-size: 12.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; } .dk-supersonrow-main { flex: 1; min-width: 0; } .dk-supersonrow-name { display: block; font-size: 14px; font-weight: 700; } .dk-supersonrow-meta { display: block; font-size: 12.5px; color: var(--dkp-sub); } .dk-supersonrow-price { font-size: 14.5px; font-weight: 800; } .dk-supersonrow-btn { flex: 0 0 auto; background: none; border: 0; padding: 0; font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--dkp-accent-d); cursor: pointer; } .dk-supersonrow-btn--rm { color: var(--dkp-bad); } .dk-supersonhead-main { display: flex; align-items: center; gap: 10px; } / Total card — the figure sits with the heading, no per-person rows. / .dk-sutotalhead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .dk-sutotalfig { display: block; font-size: 20px; font-weight: 800; color: var(--dkp-ink); margin-top: 0; } / One line under the field that needs attention; the banner only counts them. / .dk-sufield--err .dk-suinput { border-color: #fecaca; } .dk-suerr { font-size: 11.5px; color: #b91c1c; } / Radio pairs are a real group; the legend is for screen readers, the span is the visible label. / .dk-sufieldset { border: 0; padding: 0; margin: 0; min-width: 0; } .dk-sulegend { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } / Logged-in "Your group" line — one sentence, dismissible. / .dk-membershipsignedin { display: flex; align-items: center; gap: 12px; background: var(--dkp-soft); border: 1px solid #dbe6ff; border-radius: 10px; padding: 10px 14px; } .dk-membershipsignedin p { margin: 0; flex: 1; font-size: 13px; color: var(--dkp-accent-d); } .dk-membershipsignedin a { color: var(--dkp-accent-d); font-weight: 600; } .dk-membership__dismiss { flex: 0 0 auto; background: none; border: 0; padding: 0 2px; font-size: 18px; line-height: 1; color: var(--dkp-accent-d); cursor: pointer; } / ---- Renewal widget on the shared card system ---- / .dk-renew-card { background: #fff; border: 1px solid var(--dkp-bd); border-radius: 16px; padding: 20px; box-shadow: 0 1px 2px rgba(16, 24, 40, .05); } .dk-renew-card + .dk-renew-card { margin-top: 16px; } .dk-renew-card h3 { margin: 0 0 4px; font-size: 16px; font-weight: 700; } .dk-renew-card > p { margin: 0 0 16px; font-size: 13px; color: var(--dkp-sub); } .dk-renew-card label { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; font-size: 12.5px; font-weight: 600; color: #334155; } .dk-renew-card input[type="text"], .dk-renew-card input[type="date"], .dk-renew-card select { width: 100%; font-family: inherit; font-size: 14px; font-weight: 400; color: var(--dkp-ink); background: #fff; border: 1px solid var(--dkp-bd); border-radius: 10px; padding: 11px 12px; outline: none; } .dk-renew-card input[type="text"]:focus, .dk-renew-card input[type="date"]:focus, .dk-renew-card select:focus { border-color: var(--dkp-accent); box-shadow: 0 0 0 3px rgba(37, 99, 235, .15); } .dk-renew-card button { font-family: inherit; font-size: 14px; font-weight: 600; border: 0; border-radius: 10px; padding: 11px 22px; color: #fff; background: var(--dkp-accent); box-shadow: var(--dkp-cta); cursor: pointer; } .dk-renew-card button:disabled { opacity: .6; cursor: default; } .dk-renew-card .dk-r-bank-btn { color: #475569; background: #fff; border: 1px solid var(--dkp-bd); box-shadow: none; } / Renewal that costs nothing — states the fact, then confirms it. / .dk-renew-card .dk-r-free { border: 1px solid #bbf7d0; background: #f0fdf4; border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; font-size: 13px; font-weight: 600; color: #166534; } .dk-renew-hint { font-size: 11.5px; font-weight: 400; color: var(--dkp-sub); } .dk-renew-error { border: 1px solid #fecaca; background: #fef2f2; border-radius: 10px; padding: 10px 12px; font-size: 13px; } .dk-r-offers { display: block; margin-bottom: 16px; } .dk-r-offer { display: flex; align-items: center; gap: 12px; flex-direction: row; border: 2px solid var(--dkp-bd); border-radius: 12px; padding: 14px 16px; margin-bottom: 10px; font-size: 14.5px; font-weight: 600; color: var(--dkp-ink); cursor: pointer; } .dk-r-offer:last-child { margin-bottom: 0; } .dk-r-offer strong { margin-left: auto; font-size: 17px; font-weight: 800; } .dk-r-details { border: 1px solid var(--dkp-bd); background: #f7f9fc; border-radius: 12px; padding: 16px; margin-bottom: 16px; } .dk-r-details-note { margin: 0 0 12px; font-size: 12.5px; color: var(--dkp-sub); } .dk-r-details .dk-r-field:last-child { margin-bottom: 0; } .dk-renew-done p { margin: 0; font-size: 14px; color: var(--dkp-ink); } #dk-r-card { margin-bottom: 14px; } / Identity: three fields on one row, the button right-aligned beneath (stage4fu §3.5). */ .dk-r-sechead { border-bottom: 1px solid var(--dkp-bd); padding-bottom: 12px; margin-bottom: 16px; } .dk-r-sechead b { display: block; font-size: 16px; font-weight: 700; } .dk-r-sechead span { display: block; font-size: 13px; color: var(--dkp-sub); margin-top: 3px; } .dk-r-idrow { display: grid; grid-template-columns: 1.6fr .7fr 1.4fr; gap: 12px; } .dk-r-idrow label { margin-bottom: 0; } .dk-r-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; } .dk-r-btn-outline { color: #475569 !important; background: #fff !important; border: 1px solid var(--dkp-bd) !important; box-shadow: none !important; } .dk-r-amount { margin: 0 0 12px !important; font-size: 20px !important; color: var(--dkp-ink) !important; } .dk-renew-card .dk-r-back { background: none; border: 0; padding: 0; margin-bottom: 16px; box-shadow: none; font-size: 13px; font-weight: 600; color: var(--dkp-accent-d); cursor: pointer; } .dk-r-portal { margin: 12px 0 0 !important; font-size: 13px; } .dk-r-portal a { color: var(--dkp-accent-d); font-weight: 600; } @media (max-width: 520px) { .dk-r-idrow { grid-template-columns: 1fr; } }