/**
* Revival UI — shared control layer
*
* Single source of truth for fields, search, and pills.
* Everything here is prefixed .rv- to avoid collisions with ACSS,
* SureCart, and core block markup.
*
* Buttons are handled by ACSS .btn and are intentionally absent.
*
* Tune the token block below and every control on the site follows.
* Do not hardcode values in component sections — add a token instead.
*/
:root {
/* ---- Geometry — aliases ACSS form tokens so theme controls
match ACSS-rendered form fields exactly. ---- */
--rv-control-height: var(--f-input-height);
--rv-control-pad-x: var(--f-input-padding-x);
--rv-control-pad-y: var(--f-input-padding-y);
--rv-control-radius: var(--f-input-border-radius);
--rv-control-border-width: var(--border-size);
--rv-control-border-style: var(--f-input-border-style);
--rv-control-gap: var(--space-xs);
/* ---- Icons ---- */
--rv-icon-size: 18px;
--rv-icon-size-s: 14px;
/* ---- Compact size — inline filter rows ---- */
--rv-control-font-size-s: var(--text-s);
--rv-control-pad-x-s: 1.15em;
--rv-control-pad-y-s: 0.65em;
--rv-control-border-width-s: 1px;
/* ---- Type ---- */
--rv-control-font-size: var(--f-input-size);
--rv-control-font-weight: var(--f-input-font-weight);
--rv-control-line-height: var(--f-input-line-height);
/* ---- Color roles ---- */
--rv-control-bg: var(--white);
--rv-control-text: var(--text-color);
--rv-control-border: var(--neutral-light);
--rv-control-border-hover: var(--neutral-semi-light);
--rv-control-placeholder: var(--neutral-semi-light);
--rv-control-muted: var(--neutral-semi-dark);
--rv-control-solid-bg: var(--base-ultra-dark);
--rv-control-solid-text: var(--white);
--rv-control-solid-bg-hover: var(--base-dark);
/* ---- Focus ---- */
--rv-focus-ring-color: var(--focus-color);
--rv-focus-ring-width: var(--focus-width);
--rv-focus-ring-offset: var(--focus-offset);
/* ---- Motion ---- */
--rv-transition: var(--transition-duration) var(--transition-timing);
/* ---- Disabled ---- */
--rv-disabled-opacity: 0.5;
}
/* ---------------------------------------------------------------------------
Alt color scheme — set by color-scheme-toggle.js on .
Only the color roles invert. Geometry, type, and motion stay put.
--------------------------------------------------------------------------- */
.color-scheme--alt {
--rv-control-bg: transparent;
--rv-control-text: var(--white);
--rv-control-border: var(--neutral-dark);
--rv-control-border-hover: var(--neutral);
--rv-control-placeholder: var(--neutral);
--rv-control-muted: var(--neutral-light);
--rv-control-solid-bg: var(--white);
--rv-control-solid-text: var(--base-ultra-dark);
--rv-control-solid-bg-hover: var(--neutral-ultra-light);
--rv-focus-ring-color: var(--primary-light);
}
/* ===========================================================================
BASE — shared by every control
=========================================================================== */
.rv-field,
.rv-pill {
font: inherit;
font-size: var(--rv-control-font-size);
line-height: var(--rv-control-line-height);
border-radius: var(--rv-control-radius);
border: var(--rv-control-border-width) var(--rv-control-border-style) var(--rv-control-border);
transition:
background-color var(--rv-transition),
border-color var(--rv-transition),
color var(--rv-transition);
}
.rv-field:focus-visible,
.rv-pill:focus-visible {
outline: var(--rv-focus-ring-width) solid var(--rv-focus-ring-color);
outline-offset: var(--rv-focus-ring-offset);
}
.rv-field:disabled,
.rv-pill:disabled {
opacity: var(--rv-disabled-opacity);
cursor: not-allowed;
}
/* ===========================================================================
BUTTONS — handled by ACSS .btn. Nothing here on purpose.
=========================================================================== */
/* ===========================================================================
FIELDS
Text inputs, selects, and textareas. Geometry comes from ACSS's
--f-input-* tokens so these match ACSS-rendered form fields.
=========================================================================== */
.rv-field {
display: block;
inline-size: 100%;
block-size: var(--rv-control-height);
padding-block: var(--rv-control-pad-y);
padding-inline: var(--rv-control-pad-x);
font-weight: var(--rv-control-font-weight);
color: var(--rv-control-text);
background-color: var(--rv-control-bg);
-webkit-appearance: none;
appearance: none;
}
.rv-field::placeholder {
color: var(--rv-control-placeholder);
opacity: 1;
}
@media (hover: hover) and (pointer: fine) {
.rv-field:hover:not(:disabled) {
border-color: var(--rv-control-border-hover);
}
}
/* Textareas grow instead of holding a fixed control height. */
textarea.rv-field {
block-size: auto;
min-block-size: calc(var(--rv-control-height) * 2);
line-height: var(--text-line-height);
resize: vertical;
}
/* Native appearance is stripped above, so the caret is drawn here rather
than per-component. Any select using .rv-field gets it. */
select.rv-field {
padding-inline-end: calc(var(--rv-control-pad-x) * 2.5);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23667' d='M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
background-size: 14px;
cursor: pointer;
}
/* Sits inline in a row instead of filling its container. */
.rv-field--auto {
inline-size: auto;
}
/* Kill the native clear/search decorations in WebKit. */
.rv-field[type="search"]::-webkit-search-decoration,
.rv-field[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none;
}
/* ===========================================================================
SEARCH
Composite control: the wrapper carries the border and radius; the input
inside is transparent. Icon, clear, and submit are optional slots.
…svg…
=========================================================================== */
.rv-search {
display: flex;
align-items: center;
gap: var(--rv-control-gap);
inline-size: 100%;
min-block-size: var(--rv-control-height);
padding-inline: var(--rv-control-pad-x);
border: var(--rv-control-border-width) var(--rv-control-border-style) var(--rv-control-border);
border-radius: var(--rv-control-radius);
background: var(--rv-control-bg);
transition:
border-color var(--rv-transition),
box-shadow var(--rv-transition);
}
.rv-search:focus-within {
border-color: var(--rv-focus-ring-color);
}
.rv-search__input {
flex: 1;
min-inline-size: 0;
border: none;
background: transparent;
padding-block: var(--rv-control-pad-y);
font-size: var(--rv-control-font-size);
font-weight: var(--rv-control-font-weight);
line-height: var(--rv-control-line-height);
color: var(--rv-control-text);
}
/* The wrapper shows focus, so the input must not draw its own ring. */
.rv-search__input:focus,
.rv-search__input:focus-visible {
outline: none;
}
.rv-search__input::placeholder {
color: var(--rv-control-placeholder);
opacity: 1;
}
.rv-search__input::-webkit-search-decoration,
.rv-search__input::-webkit-search-cancel-button {
-webkit-appearance: none;
display: none;
}
.rv-search__icon {
display: inline-flex;
flex-shrink: 0;
color: var(--rv-control-muted);
}
/* MDI icons are fill-based. Sizing is set here rather than by the size
argument passed to render_mdi_icon(), so every instance stays in sync
from one place. */
.rv-search__icon svg {
inline-size: var(--rv-icon-size);
block-size: var(--rv-icon-size);
fill: currentColor;
}
.rv-search__clear svg {
inline-size: var(--rv-icon-size-s);
block-size: var(--rv-icon-size-s);
fill: currentColor;
}
.rv-search__clear {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
padding: var(--space-xs);
border: none;
background: transparent;
color: var(--rv-control-muted);
text-decoration: none; /* it's an in the archive templates */
cursor: pointer;
transition: color var(--rv-transition);
}
/* Chip treatment — filled circle. Used in archive filter rows. */
.rv-search__clear--chip {
inline-size: 20px;
block-size: 20px;
padding: 0;
border-radius: var(--radius-circle);
background: var(--neutral-ultra-light);
transition: background var(--rv-transition), color var(--rv-transition);
}
@media (hover: hover) and (pointer: fine) {
.rv-search__clear--chip:hover {
background: var(--neutral-light);
color: var(--rv-control-text);
}
}
/* Compact — inline filter rows, where a full-height control would dominate.
Overrides the shared tokens locally so every rule above picks up the
smaller values without duplicating a single declaration. */
.rv-search--compact {
--rv-control-height: auto;
--rv-control-font-size: var(--rv-control-font-size-s);
--rv-control-pad-x: var(--rv-control-pad-x-s);
--rv-control-pad-y: var(--rv-control-pad-y-s);
--rv-control-border-width: var(--rv-control-border-width-s);
}
@media (hover: hover) and (pointer: fine) {
.rv-search__clear:hover {
color: var(--rv-control-text);
}
}
.rv-search__clear[hidden] {
display: none;
}
/* Submit sits flush to the wrapper's inner edge, so it cancels the
wrapper's inline padding on its own side. */
.rv-search__submit {
flex-shrink: 0;
margin-inline-end: calc(-1 * var(--rv-control-pad-x));
align-self: stretch;
}
/* ===========================================================================
PILLS — step 5
=========================================================================== */