/** * KopiKatts account area (exhibitor + show team). * * BEM-scoped under .ks-account so it never leaks into the host theme * (GeneratePress on the live site). Covers the public auth cards plus the two * logged-in dashboards (sidebar + content). * * @package KopiKatts\ShowEntry */ /* ------------------------------------------------- Host-theme overrides ---- */ /* Account pages are virtual pages rendered inside the active theme; force the * theme content wrappers to full width on account routes. */ .ks-account-page .site.grid-container, .ks-account-page .site-content, .ks-account-page #content, .ks-account-page .content-area, .ks-account-page #primary, .ks-account-page .site-main, .ks-account-page article, .ks-account-page .inside-article, .ks-account-page .entry-content { max-width: 100% !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; flex: 1 1 100% !important; min-width: 0 !important; } /* GeneratePress / GenerateBlocks Page-Hero elements (e.g. the site-wide "Blog * Page Header" / "Our latest articles" hero — a div.gb-element-* hooked in at * level on the "Blog" display location) bleed onto the account routes; * they are never part of the account UI. Hide any gb-element sitting directly * under on account routes, exactly as the /kopikatts-admin/ shell does. * The GeneratePress header + footer are theme markup (not gb-elements) and are * unaffected. (1C UI-refresh follow-up, 2026-06-02 — see brief §E.) */ .ks-account-page > [class*="gb-element"], body.ks-account-page > [class*="gb-element"] { display: none !important; } /* Breathing room above the theme footer so the account content doesn't butt * straight onto it (Ross 2026-06-02, brief §G). Body-class scoped to account * routes only. */ .ks-account-page .site-footer { padding-top: 60px; } /* ----------------------------------------------------------- Variables ---- */ .ks-account { /* Clean, flat, modern: pale bg -> white cards -> neutral text -> clay accent * (design tokens, KopiKatts 2026-06-02). Aliases keep older selectors working. */ --ks-accent: #B25A3E; /* clay / terracotta */ --ks-accent-strong: #984B33; /* hover/active on accent */ --ks-accent-dark: #984B33; /* alias */ --ks-accent-tint: #F6ECE7; /* light accent fill */ --ks-accent-tint-text: #7A3A26; --ks-bg: #EDEFF2; /* page background */ --ks-surface: #FFFFFF; /* cards / panels */ --ks-card: #FFFFFF; /* alias */ --ks-shadow: 0 6px 18px rgba(17, 24, 39, 0.09); --ks-text: #1F2733; --ks-ink: #1F2733; /* alias */ --ks-muted: #8A929E; --ks-border: #E2E6EB; --ks-line: #E2E6EB; /* alias */ --ks-danger: #b3261e; --ks-success: #1e7a44; box-sizing: border-box; color: var(--ks-ink); font-size: 16px; line-height: 1.5; background: var(--ks-bg); width: 100%; min-width: 0; } .ks-account *, .ks-account *::before, .ks-account *::after { box-sizing: border-box; } /* ----------------------------------------------------------- Layouts ------ */ .ks-account__shell--centred { display: flex; justify-content: center; padding: 2.5rem 1rem; background: var(--ks-bg); min-height: 60vh; } .ks-account__card { background: var(--ks-surface); border: 1px solid var(--ks-border); border-radius: 16px; box-shadow: var(--ks-shadow); padding: 2rem; width: 100%; max-width: 30rem; /* Centre the card within the (full-width) theme content area. */ margin: 0 auto; } .ks-account__card--wide { max-width: 48rem; } .ks-account__shell--dashboard { display: flex; gap: 1.5rem; align-items: flex-start; padding: 1.5rem; min-height: 70vh; /* Centre + constrain every dashboard (≤1200px) — the theme is * full-width-content, so the plugin must supply the container. */ max-width: 1200px; margin: 0 auto; } .ks-account__sidebar { flex: 0 0 15rem; background: var(--ks-card); border: 1px solid var(--ks-line); border-radius: 12px; padding: 1.25rem; position: sticky; top: 1rem; } .ks-account__main { flex: 1 1 auto; min-width: 0; background: var(--ks-card); border: 1px solid var(--ks-line); border-radius: 12px; padding: 1.75rem; } /* ----------------------------------------------------------- Branding ----- */ .ks-account__brand { text-align: center; margin-bottom: 1.25rem; } .ks-account__brand-link { font-weight: 700; font-size: 1.25rem; color: var(--ks-accent); text-decoration: none; letter-spacing: -0.02em; } .ks-account__title { font-size: 1.4rem; margin: 0.5rem 0 0; } .ks-account__heading { font-size: 1.5rem; margin: 0 0 1rem; } .ks-account__lede { color: var(--ks-muted); margin: 0 0 1.25rem; } .ks-account__lede--intro strong { color: var(--ks-text); } /* ----------------------------------------------------------- Sidebar nav -- */ .ks-account__sidebar-head { border-bottom: 1px solid var(--ks-line); padding-bottom: 0.75rem; margin-bottom: 0.75rem; } .ks-account__welcome { margin: 0.35rem 0 0; color: var(--ks-muted); font-size: 0.9rem; } .ks-account__nav { display: flex; flex-direction: column; gap: 0.15rem; } .ks-account__nav-link { display: flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.6rem; border-radius: 8px; color: var(--ks-ink); text-decoration: none; } .ks-account__nav-link:hover { background: var(--ks-bg); } .ks-account__nav-link.is-active { background: var(--ks-accent); color: #fff; } .ks-account__nav-link--logout { margin-top: 0.5rem; border-top: 1px solid var(--ks-line); padding-top: 0.8rem; color: var(--ks-muted); } /* ----------------------------------------------------------- Forms -------- */ .ks-account__form { margin: 0; } .ks-account__form--grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0 1rem; } .ks-fieldset { grid-column: 1 / -1; border: 0; padding: 0; margin: 0 0 1rem; } .ks-fieldset__legend { font-weight: 600; padding: 0; margin-bottom: 0.4rem; } .ks-fieldset { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0 1rem; } .ks-field { margin: 0 0 1rem; grid-column: 1 / -1; } .ks-field--full { grid-column: 1 / -1; } .ks-field--half { grid-column: span 3; } .ks-field--third { grid-column: span 2; } .ks-field__label { display: block; font-weight: 600; font-size: 0.92rem; margin-bottom: 0.25rem; } .ks-field__input { width: 100%; padding: 0.55rem 0.65rem; border: 1px solid var(--ks-line); border-radius: 8px; font: inherit; background: #fff; } .ks-field__input:focus { outline: 2px solid var(--ks-accent); outline-offset: 1px; border-color: var(--ks-accent); } .ks-field__hint { display: block; color: var(--ks-muted); font-size: 0.82rem; margin-top: 0.25rem; } .ks-field__error { display: block; color: var(--ks-danger); font-size: 0.85rem; margin-top: 0.25rem; } .ks-field--check .ks-field__checkbox { display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.95rem; } .ks-field__checkbox input { margin-top: 0.2rem; flex: 0 0 auto; } .ks-fieldset--consent .ks-field--check { background: var(--ks-bg); border: 1px solid var(--ks-line); border-radius: 8px; padding: 0.75rem; margin-bottom: 0.6rem; } .ks-field__strength { font-size: 0.82rem; margin-top: 0.25rem; } .ks-field__strength[data-level="weak"] { color: var(--ks-danger); } .ks-field__strength[data-level="ok"] { color: #b5862a; } .ks-field__strength[data-level="strong"] { color: var(--ks-success); } /* ----------------------------------------------------------- Buttons ------ */ .ks-account__btn { display: inline-block; padding: 0.6rem 1.1rem; border: 1px solid var(--ks-line); border-radius: 8px; background: #fff; color: var(--ks-ink); font: inherit; cursor: pointer; text-decoration: none; margin-top: 0.5rem; } .ks-account__btn:hover { background: var(--ks-bg); } .ks-account__btn--primary { background: var(--ks-accent); border-color: var(--ks-accent); color: #fff; font-weight: 600; } .ks-account__btn--primary:hover { background: var(--ks-accent-strong); border-color: var(--ks-accent-strong); } /* On the public auth cards (register/login/forgot/reset) the primary action is * a wide, slim full-width bar — not a chunky square block (Ross 2026-06-02). * The submit sits in its own .ks-account__form-actions row (full width even in * the 6-column register grid), so the button fills the card width and its label * stays on a single line. */ .ks-account__shell--centred .ks-account__form-actions { grid-column: 1 / -1; width: 100%; } .ks-account__shell--centred .ks-account__form-actions .ks-account__btn--primary { display: block; width: 100%; margin-top: 0; padding: 0.85rem 1rem; /* ~13.6px vertical -> ~46px tall */ text-align: center; white-space: nowrap; } /* Secondary links sit on their own line(s) below the bar, full width + centred * (so they never share the row with the button, even in the register grid). */ .ks-account__shell--centred .ks-account__links { grid-column: 1 / -1; text-align: center; } .ks-account__btn--danger { background: var(--ks-danger); border-color: var(--ks-danger); color: #fff; } .ks-account__btn--disabled, .ks-account__btn[aria-disabled="true"] { opacity: 0.55; pointer-events: none; } .ks-account__form-actions { grid-column: 1 / -1; margin-top: 0.5rem; } .ks-account__links { margin: 0.85rem 0 0; font-size: 0.92rem; } /* ----------------------------------------------------------- Notices ------ */ .ks-account__notice { display: flex; gap: 0.5rem; align-items: flex-start; padding: 0.8rem 1rem; border-radius: 8px; margin-bottom: 1rem; border: 1px solid var(--ks-line); } .ks-account__notice p { margin: 0; } .ks-account__notice--success { background: #e9f6ee; border-color: #bfe3cd; color: var(--ks-success); } .ks-account__notice--error { background: #fdeceb; border-color: #f3c4c1; color: var(--ks-danger); } .ks-account__notice--info { background: #eef2fb; border-color: #cdd9f0; color: #2a4b8d; } /* ----------------------------------------------------------- Tiles -------- */ .ks-account__cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 1rem; } .ks-account__tile { background: var(--ks-bg); border: 1px solid var(--ks-line); border-radius: 10px; padding: 1.1rem; text-decoration: none; color: inherit; display: block; } .ks-account__tile h2 { margin: 0.3rem 0; font-size: 1.5rem; } .ks-account__tile p { margin: 0; color: var(--ks-muted); font-size: 0.9rem; } .ks-account__tile--link:hover { border-color: var(--ks-accent); } .ks-account__tile-meta { margin: 0.25rem 0 !important; } .ks-account__tile-stat { margin-top: 0.4rem !important; font-weight: 600; } /* ----------------------------------------------------------- Consents ----- */ .ks-account__consent { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.9rem 0; border-bottom: 1px solid var(--ks-line); } .ks-account__consent-text p { margin: 0; } .ks-account__consent--locked { background: var(--ks-bg); border-radius: 8px; padding: 0.9rem; border-bottom: 0; } .ks-account__consent-action { flex: 0 0 auto; } /* ----------------------------------------------------------- Sections ----- */ .ks-account__section { padding: 1.25rem 0; border-top: 1px solid var(--ks-line); } .ks-account__section:first-of-type { border-top: 0; } .ks-account__section--danger h2 { color: var(--ks-danger); } .ks-account__list { padding-left: 1.2rem; } .ks-account__stat-list { list-style: none; padding: 0; margin: 0; } .ks-account__stat-list li { padding: 0.3rem 0; border-bottom: 1px solid var(--ks-line); } /* ----------------------------------------------------------- Tables ------- */ .ks-account__table { width: 100%; border-collapse: collapse; margin: 0.5rem 0; } .ks-account__table th, .ks-account__table td { text-align: left; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--ks-line); font-size: 0.92rem; } .ks-account__table--zebra tbody tr:nth-child(odd) { background: var(--ks-bg); } .ks-account__defs { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.5rem 1.5rem; } .ks-account__defs dt { font-weight: 600; font-size: 0.82rem; color: var(--ks-muted); } .ks-account__defs dd { margin: 0 0 0.5rem; } /* ----------------------------------------------------------- Tabs --------- */ .ks-account__tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--ks-line); margin-bottom: 1rem; flex-wrap: wrap; } .ks-account__tab { padding: 0.55rem 0.9rem; text-decoration: none; color: var(--ks-muted); border-bottom: 2px solid transparent; } .ks-account__tab.is-active { color: var(--ks-accent); border-bottom-color: var(--ks-accent); font-weight: 600; } /* ----------------------------------------------------------- Sessions ----- */ .ks-account__sessions { list-style: none; padding: 0; margin: 0 0 1rem; } .ks-account__session { display: flex; gap: 0.5rem; align-items: center; padding: 0.4rem 0; border-bottom: 1px solid var(--ks-line); } .ks-account__session-time { margin-left: auto; color: var(--ks-muted); font-size: 0.85rem; } /* ----------------------------------------------------------- Misc --------- */ .ks-account__placeholder { text-align: center; color: var(--ks-muted); padding: 2.5rem 1rem; } .ks-account__placeholder .dashicons { font-size: 2.5rem; width: auto; height: auto; opacity: 0.5; } .ks-account__notes { white-space: pre-wrap; background: var(--ks-bg); padding: 0.75rem; border-radius: 8px; } /* Honeypot — visually hidden but present for bots. */ .ks-account__honeypot { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } /* ----------------------------------------------------------- Responsive --- */ @media (max-width: 782px) { .ks-account__shell--dashboard { flex-direction: column; } .ks-account__sidebar { position: static; flex-basis: auto; width: 100%; } .ks-account__form--grid, .ks-fieldset { grid-template-columns: 1fr; } .ks-field--half, .ks-field--third { grid-column: 1 / -1; } .ks-account__consent { flex-direction: column; align-items: flex-start; } } /* ------------------------------------------------ Available shows (SC) --- */ .ks-account__panel { background: var(--ks-surface); border: 1px solid var(--ks-border); border-radius: 12px; padding: 1.25rem 1.4rem; margin-bottom: 1.25rem; } .ks-account__panel-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.85rem; } .ks-account__panel-head h2 { margin: 0; font-size: 1.25rem; } .ks-account__muted { color: var(--ks-muted); margin: 0; } .ks-account__show-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; } .ks-account__show-row { display: flex; align-items: center; gap: 0.85rem; padding: 0.7rem 0.85rem; background: var(--ks-bg); border: 1px solid var(--ks-border); border-radius: 9px; } .ks-account__show-meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; } .ks-account__show-name { font-weight: 600; color: var(--ks-text); text-decoration: none; } .ks-account__show-name:hover { color: var(--ks-accent); } .ks-account__show-sub { font-size: 0.85rem; color: var(--ks-muted); } .ks-account .ks-badge { display: inline-flex; align-items: center; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; padding: 0.2rem 0.5rem; border-radius: 999px; white-space: nowrap; } .ks-account .ks-badge--open { background: #E7F4EC; color: #1B7A43; } .ks-account .ks-badge--closing { background: #FDF1DC; color: #B54708; } .ks-account .ks-badge--closed { background: #ECEEF1; color: #5B6470; } .ks-account .ks-badge--results { background: #E6EEFB; color: #1F4FA3; } .ks-account .ks-badge--soon { background: var(--ks-accent-tint); color: var(--ks-accent-strong); } @media (max-width: 600px) { .ks-account__show-row { flex-wrap: wrap; } .ks-account__show-row .ks-account__btn { flex: 1 1 100%; text-align: center; } } /* ========================================================================== My Cats (sub-phase 1D) ========================================================================== */ /* Shared button + layout helpers used by the cat screens. */ .ks-account__btn--small { padding: 0.3rem 0.7rem; font-size: 0.85rem; } .ks-account__btn--link { background: none; border: none; color: var(--ks-accent); padding: 0.3rem 0.4rem; text-decoration: underline; cursor: pointer; } .ks-account__btn--link:hover { background: none; color: var(--ks-accent-strong); } .ks-account__page-head { margin-bottom: 1rem; } .ks-account__page-head--row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .ks-account__subheading { font-size: 1.1rem; margin: 1.5rem 0 0.5rem; color: var(--ks-ink); } .ks-field--checkbox { display: flex; align-items: flex-end; } /* Card grid */ .ks-cats__toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 1rem 0; } .ks-cats__filters { display: flex; gap: 0.25rem; flex-wrap: wrap; } .ks-cats__filter { padding: 0.3rem 0.75rem; border-radius: 999px; color: var(--ks-muted); text-decoration: none; font-size: 0.9rem; } .ks-cats__filter.is-active { background: var(--ks-accent-tint); color: var(--ks-accent-strong); font-weight: 600; } .ks-cats__sort { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; } .ks-cats__sort select { padding: 0.3rem 0.5rem; border: 1px solid var(--ks-line); border-radius: 8px; } .ks-cats__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; } .ks-cats__card { display: flex; flex-direction: column; background: var(--ks-surface); border: 1px solid var(--ks-border); border-radius: 12px; overflow: hidden; box-shadow: var(--ks-shadow); } .ks-cats__card--hidden, .ks-cats__card--deceased, .ks-cats__card--retired { opacity: 0.7; } .ks-cats__card-thumb { display: flex; align-items: center; justify-content: center; height: 5.5rem; background: var(--ks-accent-tint); color: var(--ks-accent); } .ks-cats__card-thumb .dashicons { font-size: 2.5rem; width: auto; height: auto; } .ks-cats__card-body { padding: 0.9rem 1rem 0.5rem; flex: 1 1 auto; } .ks-cats__card-name { margin: 0 0 0.25rem; font-size: 1.05rem; } .ks-cats__card-name a { text-decoration: none; color: var(--ks-ink); } .ks-cats__card-name a:hover { color: var(--ks-accent); } .ks-cats__card-meta { margin: 0 0 0.25rem; font-size: 0.85rem; color: var(--ks-muted); } .ks-cats__card-titles { margin: 0 0 0.5rem; font-size: 0.85rem; font-weight: 600; color: var(--ks-accent-strong); } .ks-cats__card-badges { margin: 0; display: flex; gap: 0.35rem; flex-wrap: wrap; } .ks-cats__card-actions { padding: 0.5rem 1rem 1rem; } .ks-cats__badge { display: inline-flex; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; padding: 0.2rem 0.5rem; border-radius: 999px; } .ks-cats__badge--pending { background: #FDF1DC; color: #B54708; } .ks-cats__badge--hidden { background: #ECEEF1; color: #5B6470; } .ks-cats__badge--deceased { background: #ECEEF1; color: #5B6470; } .ks-cats__badge--retired { background: #E6EEFB; color: #1F4FA3; } /* Pending-transfer section */ .ks-cats__pending { background: #FDF8EF; border: 1px solid #F0E0C0; border-radius: 12px; padding: 1rem 1.25rem; margin-bottom: 1.25rem; } .ks-cats__section-title { margin: 0 0 0.25rem; font-size: 1rem; } .ks-cats__pending-list { list-style: none; margin: 0.5rem 0 0; padding: 0; } .ks-cats__pending-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0; } /* Add-a-Cat */ .ks-cat-add__search-row { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; margin-bottom: 0.75rem; } .ks-cat-add__search-row .ks-field__input { flex: 1 1 18rem; } .ks-cat-add__results { margin-top: 0.5rem; display: grid; gap: 0.75rem; } .ks-cat-add__result { background: var(--ks-surface); border: 1px solid var(--ks-border); border-radius: 10px; padding: 0.9rem 1rem; } .ks-cat-add__result--none { background: var(--ks-bg); } .ks-cat-add__result-name { margin: 0 0 0.2rem; font-size: 1rem; } .ks-cat-add__result-meta { margin: 0 0 0.2rem; font-size: 0.85rem; color: var(--ks-muted); } .ks-cat-add__result-titles { margin: 0 0 0.4rem; font-size: 0.85rem; font-weight: 600; color: var(--ks-accent-strong); } .ks-cat-add__note { margin: 0 0 0.5rem; } .ks-cat-add__manual-link { margin-top: 0.25rem; } .ks-cat-add__manual { margin-top: 1.5rem; border-top: 1px solid var(--ks-line); padding-top: 1.25rem; } /* Cat detail */ .ks-cat-detail__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.5rem 1.5rem; margin: 0 0 1.5rem; } .ks-cat-detail__facts dt { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ks-muted); } .ks-cat-detail__facts dd { margin: 0 0 0.5rem; font-weight: 600; } .ks-cat-detail__titles, .ks-cat-detail__edit, .ks-cat-detail__history, .ks-cat-detail__actions { border-top: 1px solid var(--ks-line); padding-top: 1.25rem; margin-top: 1.25rem; } .ks-cat-detail__titles.is-flagged { border: 2px solid var(--ks-accent); border-radius: 12px; padding: 1rem 1.25rem; background: var(--ks-accent-tint); } .ks-cat-detail__danger .ks-account__btn--danger { margin-left: 0.5rem; } .ks-cat-detail__status-form { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; } .ks-cat-detail__status-form .ks-field__input { max-width: 22rem; } /* Title-confirm component */ .ks-title-confirm__heading { font-size: 1.1rem; margin: 0 0 0.5rem; } .ks-title-confirm__current { margin: 0 0 1rem; } .ks-title-confirm__hint, .ks-title-confirm__current .ks-title-confirm__hint { display: block; font-size: 0.85rem; color: var(--ks-muted); margin-top: 0.25rem; } .ks-title-confirm__choice { border: none; padding: 0; margin: 0 0 1rem; display: grid; gap: 0.4rem; } .ks-title-confirm__editor { margin-bottom: 1rem; } .ks-title-row { display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: 0.5rem; align-items: end; margin-bottom: 0.6rem; } .ks-title-row .ks-field { margin: 0; } .ks-title-row__remove { background: none; border: 1px solid var(--ks-line); border-radius: 8px; width: 2.2rem; height: 2.4rem; font-size: 1.2rem; cursor: pointer; color: var(--ks-muted); } .ks-title-row__remove:hover { color: var(--ks-danger); border-color: var(--ks-danger); } .ks-title-confirm__warn { display: flex; gap: 0.4rem; align-items: center; font-size: 0.85rem; color: #B54708; margin-top: 0.5rem; } @media (max-width: 700px) { .ks-title-row { grid-template-columns: 1fr 1fr; } }