/* * Karen's 5 Stars - component styles, Direction A "Warm Welcome". * Tokens come from theme.json as --wp--preset--* custom properties; the local * --k5-* aliases carry literal fallbacks so a component still renders correctly * if it is ever used outside this theme (e.g. pasted into a page builder). */ :root { --k5-radius: 12px; --k5-radius-sm: 8px; --k5-ground: var(--wp--preset--color--ground, #FBF6EC); --k5-surface: var(--wp--preset--color--surface, #FFFDF8); --k5-sand: var(--wp--preset--color--sand, #F2E9D6); --k5-accent: var(--wp--preset--color--accent, #B85335); --k5-accent-deep: var(--wp--preset--color--accent-deep, #9E4429); --k5-star: var(--wp--preset--color--star, #E8A63D); --k5-ink: var(--wp--preset--color--ink, #2E2A24); --k5-muted: var(--wp--preset--color--muted, #6B6154); --k5-border: var(--wp--preset--color--border, #E6DAC5); /* Reading-size control. Overridden on by the data attribute below. */ --k5-read-scale: 1; --k5-read-space: 0.01em; } /* ---- Reading size: three steps. Reading text only, never chrome or ads. ---- */ html[data-k5-read="1"] { --k5-read-scale: 1.15; --k5-read-space: 0.03em; } html[data-k5-read="2"] { --k5-read-scale: 1.3; --k5-read-space: 0.05em; } .entry-content, .k5-card__body, .k5-card__title, .k5-result__name, .entry-content p, .entry-content li { font-size: calc(1em * var(--k5-read-scale)); letter-spacing: var(--k5-read-space); line-height: 1.7; text-align: left; /* never justified - hard requirement, IT 1063 */ } /* ---- Focus. Visible on every interactive element. ---- */ *:focus-visible { outline: 3px solid var(--k5-accent-deep); outline-offset: 2px; border-radius: 4px; } /* ---- Buttons ---- */ .k5-btn { background: var(--k5-accent); color: #fff; border: 0; border-radius: 10px; padding: .7em 1.3em; font-weight: 600; cursor: pointer; font-size: 1rem; } .k5-btn:hover { background: var(--k5-accent-deep); } .k5-btn--ghost { background: transparent; color: var(--k5-accent-deep); border: 2px solid var(--k5-border); border-radius: 10px; padding: .45em .9em; font-weight: 600; cursor: pointer; font-size: .95rem; } .k5-btn--ghost:hover { background: var(--k5-sand); } .k5-btn--ghost[aria-pressed="true"] { background: var(--k5-accent); color: #fff; border-color: var(--k5-accent); } /* ---- Reading-size control ---- */ .k5-reading { display: inline-flex; gap: .35rem; align-items: center; padding: .5rem .75rem; background: var(--k5-surface); border-bottom: 1px solid var(--k5-border); width: 100%; justify-content: flex-end; box-sizing: border-box; } .k5-reading__lbl { font-weight: 700; color: var(--k5-muted); margin-right: .25rem; } /* ---- Star rating: display (read-only) ---- */ .k5-rating { display: inline-flex; gap: 2px; } .k5-rating .on { color: var(--k5-star); } .k5-rating .off { color: transparent; stroke: var(--k5-star); stroke-width: 1.5px; } .k5-rating .off use { stroke: var(--k5-star); } /* ---- Star rating: input (real radios, keyboard + screen-reader usable) ---- */ .k5-rate-input { border: 0; display: inline-flex; flex-direction: row-reverse; gap: 4px; } /* The real radios, hidden but still focusable and still announced. * pointer-events:none is load-bearing: absolutely positioned with no offsets, * all five collapse onto ONE 1px point inside the star row, and whichever * landed on top swallowed clicks aimed at a label. Measured 2026-09-02 -- * Playwright could not click star 4 because star 1's input was over it. */ .k5-rate-input input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; } .k5-rate-input label { color: transparent; stroke: var(--k5-star); stroke-width: 1.5px; cursor: pointer; } .k5-rate-input label svg use { stroke: var(--k5-star); } .k5-rate-input input:checked ~ label, .k5-rate-input label:hover, .k5-rate-input label:hover ~ label { color: var(--k5-star); } .k5-rate-input input:focus-visible + label { outline: 3px solid var(--k5-accent-deep); outline-offset: 2px; } /* ---- Review card ---- */ .k5-card { background: var(--k5-surface); border: 1px solid var(--k5-border); border-radius: var(--k5-radius); padding: 1.25rem 1.5rem; box-shadow: 0 1px 2px rgba(46, 42, 36, .05); } .k5-card__head { display: flex; gap: .75rem; align-items: center; } .k5-card__avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--k5-sand); object-fit: cover; } .k5-card__author { font-weight: 600; margin: 0; } .k5-card__meta { color: var(--k5-muted); font-size: .9rem; margin: 0; } .k5-card__title { margin: .75rem 0 .35rem; } .k5-card__body { line-height: 1.7; text-align: left; margin: 0; } .k5-card__foot { margin-top: .9rem; } /* ---- Category chip ---- */ .k5-chip { display: inline-block; background: var(--k5-sand); color: var(--k5-ink); border-radius: 999px; padding: .35em .9em; font-size: .9rem; text-decoration: none; border: 1px solid var(--k5-border); } .k5-chip:hover, .k5-chip[aria-current="true"] { background: var(--k5-accent); color: #fff; border-color: var(--k5-accent); } /* ---- Region search ---- */ .k5-search__label { display: block; font-weight: 600; margin-bottom: .4rem; } .k5-search__row { display: flex; gap: .5rem; max-width: 520px; } .k5-search__row input { flex: 1; padding: .7em .9em; border: 2px solid var(--k5-border); border-radius: var(--k5-radius-sm); background: var(--k5-surface); font-size: 1rem; color: var(--k5-ink); } .k5-result { display: flex; gap: .75rem; align-items: center; padding: .8rem 0; border-bottom: 1px solid var(--k5-border); text-decoration: none; color: var(--k5-ink); } .k5-result__meta { color: var(--k5-muted); font-size: .9rem; } /* ---- Brand lockup ---- */ .k5-brand { display: inline-block; max-width: 360px; } .k5-brand svg { width: 100%; height: auto; } /* ---- Header: brand left, category nav right ---- */ header.wp-block-group.has-surface-background-color { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; justify-content: space-between; } .k5-brand { max-width: 260px; flex: 0 0 auto; } .k5-nav { display: flex; gap: 1rem; flex-wrap: wrap; } .k5-nav a { color: var(--k5-ink); text-decoration: none; font-weight: 600; } .k5-nav a:hover, .k5-nav a[aria-current="page"] { color: var(--k5-accent-deep); text-decoration: underline; } /* ---- Screen-reader-only text. * Defined here rather than relying on the parent theme or core's block styles: * the star-rating labels are the ONLY thing that tells a screen-reader user * which radio is which, so this class cannot be allowed to go missing. ---- */ .screen-reader-text { border: 0; clip-path: inset(50%); height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; } .screen-reader-text:focus { clip-path: none; height: auto; width: auto; margin: 0; padding: .7em 1em; position: static; background: var(--k5-surface); color: var(--k5-accent-deep); } /* ---- Review submission form ---- */ .k5-form { background: var(--k5-surface); border: 1px solid var(--k5-border); border-radius: var(--k5-radius); padding: 1.5rem; max-width: 640px; } .k5-form__title { margin-top: 0; } .k5-form__row { display: flex; flex-direction: column; gap: .35rem; margin: 0 0 1.4rem; border: 0; padding: 0; } /* Form copy is reading text, so it scales with the reading-size control. */ .k5-form__label, .k5-form__hint, .k5-form input, .k5-form textarea, .k5-form select, .k5-notice { font-size: calc(1em * var(--k5-read-scale)); letter-spacing: var(--k5-read-space); line-height: 1.7; text-align: left; } .k5-form__label { font-weight: 700; color: var(--k5-ink); padding: 0; } .k5-req { font-weight: 400; color: var(--k5-muted); } .k5-form__hint { color: var(--k5-muted); } .k5-form input[type="text"], .k5-form input[type="search"], .k5-form textarea, .k5-form select { width: 100%; box-sizing: border-box; padding: .7em .9em; border: 2px solid var(--k5-border); border-radius: var(--k5-radius-sm); background: var(--k5-ground); color: var(--k5-ink); font-family: inherit; } .k5-form textarea { resize: vertical; min-height: 9em; } .k5-form [aria-invalid="true"] { border-color: var(--k5-accent-deep); } /* The star row shrink-wraps and sits left. * Without align-self it stretches to the fieldset's full width, and because * the axis is row-reverse, "pack at main-start" puts the stars against the * RIGHT edge -- they floated off to the right of the label on every viewport. */ .k5-form__rate .k5-rate-input { padding: .25rem 0; align-self: flex-start; } /* The honeypot. Off-screen rather than display:none -- some bots skip fields * that are display:none, which is exactly the ones we want to catch. */ .k5-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* ---- Notices ---- */ .k5-notice { border-radius: var(--k5-radius); padding: 1rem 1.2rem; margin: 0 0 1.4rem; border-left: 6px solid; } .k5-notice h2 { margin-top: 0; } .k5-notice--error { background: #FBEDE8; border-left-color: var(--k5-accent-deep); color: #6E2F1B; } .k5-notice--error a { color: #6E2F1B; } .k5-notice--ok { background: var(--k5-sand); border-left-color: var(--k5-star); color: var(--k5-ink); } .k5-notice ul { margin: .4rem 0 0; padding-left: 1.2rem; } /* ---- Review list + card chrome ---- */ .k5-review-list { display: flex; flex-direction: column; gap: 1rem; } .k5-review-head { margin-bottom: 1.2rem; } .k5-empty { color: var(--k5-muted); } .k5-chip--pending { background: var(--k5-sand); color: #6E2F1B; } .k5-card--pending { border-style: dashed; } /* ---- Region search results ---- */ .k5-search__results { margin-top: 1.2rem; } .k5-search__count { color: var(--k5-muted); font-weight: 600; } .k5-search__row select { padding: .7em .9em; border: 2px solid var(--k5-border); border-radius: var(--k5-radius-sm); background: var(--k5-surface); color: var(--k5-ink); } @media (max-width: 560px) { .k5-search__row { flex-wrap: wrap; } .k5-search__row input, .k5-search__row select { flex: 1 1 100%; } } /* ---- Ad zones. Reserved, never coloured -- an empty box that looks like a * component reads as a broken component. ---- */ .k5-ad { display: block; margin: 1.5rem auto; max-width: 100%; } .k5-ad--empty { visibility: hidden; } /* ---- Motion. Respect the system setting; nothing here needs animation. ---- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* The one nav item that is an action, not a destination. */ .k5-nav__cta { background: var(--k5-accent); color: #fff !important; border-radius: var(--k5-radius-sm); padding: .4em .9em; } .k5-nav__cta:hover { background: var(--k5-accent-deep); text-decoration: none !important; }