/* * The control stays hidden until the boot script adds .oubkw-theme-js to : * without scripting the switch could do nothing. The active segment is painted * from the attribute on , never from :checked, because the boot script sets * that attribute before the first paint while the radios are only updated by the * deferred script; painting from :checked would flash the indicator on load. */ .oubkw-theme-bar { display: none; } .oubkw-theme-js .oubkw-theme-bar { display: flex; justify-content: flex-end; margin: 0 0 12px; } .oubkw-theme-js .oubkw-theme-bar--widget { padding: 12px 14px 0; margin: 0; } .oubkw-theme-js .oubkw-theme-bar--portal { margin: 0 0 .75rem; } .oubkw-theme-js .oubkw-theme-bar--quote { max-width: 700px; margin: 0 auto; padding: 20px 12px 0; } .oubkw-theme-js .oubkw-theme-bar--cgv { max-width: 620px; margin: 0 auto 12px; padding: 0 12px; } .oubkw-theme-switch { min-width: 0; margin: 0; padding: 0; border: 0; } /* * The legend stays available to assistive technology but takes no space: float * and font-size undo what Bootstrap applies to a legend by default. */ .oubkw-theme-switch-legend { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; float: none; font-size: inherit; line-height: inherit; } .oubkw-theme-switch-track { position: relative; display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--oubkw-border); border-radius: 999px; background: var(--oubkw-surface-2); line-height: 1; } /* * The radios stay in the focus and accessibility flow but paint nothing: the * matching label carries the rendering. */ .oubkw-theme-switch-input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; } .oubkw-theme-switch-btn { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 5px 12px; border-radius: 999px; background: transparent; color: var(--oubkw-text-mid); font-family: var(--oubkw-font-body); font-size: .78rem; font-weight: 500; line-height: 1.2; white-space: nowrap; cursor: pointer; transition: background-color .18s ease, color .18s ease; } .oubkw-theme-switch-btn i { font-size: .88em; } .oubkw-theme-switch-btn:hover { color: var(--oubkw-text); } .oubkw-theme-js:not([data-oubkw-theme]) .oubkw-theme-switch-input[value="auto"] + .oubkw-theme-switch-btn, .oubkw-theme-js[data-oubkw-theme="light"] .oubkw-theme-switch-input[value="light"] + .oubkw-theme-switch-btn, .oubkw-theme-js[data-oubkw-theme="dark"] .oubkw-theme-switch-input[value="dark"] + .oubkw-theme-switch-btn { color: var(--oubkw-text); background: var(--oubkw-surface-1); background: color-mix(in srgb, var(--oubkw-primary) 14%, var(--oubkw-surface-1)); box-shadow: inset 0 0 0 1px rgba(var(--oubkw-primary-ui-rgb, 196,112,90),.32); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--oubkw-primary-ui, #C4705A) 32%, transparent); } .oubkw-theme-switch-input:focus-visible + .oubkw-theme-switch-btn { outline: 2px solid var(--oubkw-primary-ui); outline-offset: 2px; } /* Fallback for browsers without :focus-visible, so focus stays visible. */ .oubkw-theme-switch-input:focus + .oubkw-theme-switch-btn { outline: 2px solid var(--oubkw-primary-ui); outline-offset: 2px; } .oubkw-theme-switch-input:focus:not(:focus-visible) + .oubkw-theme-switch-btn { outline: none; } @media (max-width: 400px) { .oubkw-theme-switch-btn { padding: 5px 9px; font-size: .74rem; gap: 5px; } } @media (prefers-reduced-motion: reduce) { .oubkw-theme-switch-btn { transition: none; } }