diff --git a/custom.css b/custom.css index 068eeeb..0907ba6 100644 --- a/custom.css +++ b/custom.css @@ -74,6 +74,33 @@ body { font-family: var(--sans); font-size: 1.06rem; } color: #8a1e12; } +/* Form controls keep their light surface inside the dark and brick + panels, so their text must NOT inherit the panel's light ink - + pin it dark, and darken the placeholder, so nothing is light-on- + light. The selected pill fills with the panel accent (terracotta / + cream) and carries dark ink, which reads on either panel. */ +.alt-card:nth-of-type(3n+1) .select-option, +.alt-card:nth-of-type(3n) .select-option, +.alt-card:nth-of-type(3n+1) input, +.alt-card:nth-of-type(3n) input, +.alt-card:nth-of-type(3n+1) textarea, +.alt-card:nth-of-type(3n) textarea { + color: #201a18; + background: #f6f5f3; + border-color: #cabfb6; +} +.alt-card:nth-of-type(3n+1) .select-option.selected, +.alt-card:nth-of-type(3n) .select-option.selected { + color: #201a18; + background: var(--accent); + border-color: var(--accent); +} +.alt-card:nth-of-type(3n+1) ::placeholder, +.alt-card:nth-of-type(3n) ::placeholder { + color: #8a827b; + opacity: 1; +} + /* Wordmark: the mark carries its own red ground, so just seat it. */ .wordmark img { border-radius: 0.35rem; }