/* assets/css/pages/right-of-withdrawal.css -- per-pagina laag (CLAUDE.md CSS-architectuur). In via mb_reve_pagina_css('right-of-withdrawal') in page-right-of-withdrawal.php. Tokens/componenten uit reve-base.css + reve-pages.css. */ .mb-herr { --mb-herr-accent: var(--c-black); --mb-herr-btn-bg: var(--c-black); --mb-herr-radius: 0; --mb-herr-border: var(--c-grey-line); --mb-herr-gap: 26px; margin-top: 34px; } .mb-herr label { font: 500 11.5px/1.5 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--c-label); margin-bottom: 8px; } .mb-herr input[type="text"], .mb-herr input[type="email"], .mb-herr textarea { width: 100%; border: 0; border-bottom: 1.4px solid var(--c-grey-line); border-radius: 0; padding: 10px 0; background: transparent; font: 400 15px/1.4 var(--f-body); color: var(--c-primary); } .mb-herr input:focus, .mb-herr textarea:focus { outline: 0; border-bottom-color: var(--c-black); } .mb-herr textarea { resize: vertical; } /* fieldset zonder kader -- de radioknoppen krijgen de merkkleur via accent-color (native controls, geen herbouwde toggle-knoppen nodig voor dit ene keuzepaar). */ .mb-herr fieldset { border: 0; padding: 0; margin: 0 0 var(--mb-herr-gap); } /* is van zichzelf geen blokelement over de volle breedte -- expliciet zetten, anders staat hij niet netjes boven de radioknoppen. */ .mb-herr legend { display: block; width: 100%; font: 500 11.5px/1.5 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--c-label); padding: 0 0 8px; } .mb-herr fieldset label { font: 400 15px/1 var(--f-body); text-transform: none; letter-spacing: normal; color: var(--c-primary); margin: 0 1.5rem 0 0; } .mb-herr input[type="radio"] { accent-color: var(--c-black); margin-right: 6px; } /* ghost-knop -- zelfde stijl als elders (transparant + kader i.p.v. een gevulde knop). */ .mb-herr button { background: transparent; color: var(--c-black); border: 1px solid var(--c-black); border-radius: 0; padding: 16px 26px; font: 600 13.5px/1 var(--f-body); letter-spacing: .05em; text-transform: uppercase; } .mb-herr button:hover { filter: none; background: var(--c-grey-bg); }