@osimart/create-storefront 0.0.0-stage → 1.0.0

package/app/assets/css/osi-controls.css

@@ -0,0 +1,824 @@
+/* =========================================================================
+   Storefront controls — buttons and form fields.
+
+   One stylesheet for every button and field outside the builder sections'
+   own bespoke markup: cart drawer, login/register, password flows, checkout,
+   account pages, modals, search, and any section that opts in with the
+   classes below.
+
+   Resolution order, for every property:
+
+     --btn-* / --in-*            this one control   (useButtonStyle / useInputStyle)
+     --osi-button-* / -input-*   the theme           (useThemeTokens)
+     --osi-btn-bg, --osi-border  the colour scheme   (useColorScheme)
+     literal                     last resort
+
+   Every rule is prefixed with :is(.osi-root, body). That's deliberate: it lifts
+   these rules above a single Tailwind utility (bg-*, border-*, rounded-*) and
+   above a component's own one-class scoped rule, so adding `osi-btn` to an
+   element is enough — no !important, no hunting down every leftover utility.
+
+   `body` is in the prefix because overlays (cart drawer, search, mobile menu…)
+   are <Teleport>ed to <body>, i.e. OUTSIDE .osi-root. app.vue puts the
+   osi-btns--* / osi-inputs--* / osi-labels--* classes on <body> too, so a
+   teleported control resolves exactly like one on a page. :is() takes the
+   specificity of its most specific argument (a class), so this is the same
+   weight as the old bare .osi-root prefix.
+
+   Internal variables start with --_ and are private to this file.
+   ========================================================================= */
+
+/* ------------------------------------------------------------------ BUTTONS */
+
+:is(.osi-root, body) .osi-btn {
+  /* The two colours a button is made of. */
+  --_color: var(--btn-bg, var(--osi-button-bg, var(--osi-btn-bg, #121212)));
+  --_on-color: var(--btn-fg, var(--osi-button-fg, var(--osi-btn-text, #ffffff)));
+
+  /* Resting paint for the current style (SOLID here; modes below replace it). */
+  --_pbg: var(--_color);
+  --_pfg: var(--_on-color);
+  --_pbd: var(--btn-border-color, var(--osi-button-border-color, var(--_color)));
+
+  /* Where INVERT goes on hover, per style. */
+  --_ibg: transparent;
+  --_ifg: var(--_color);
+  --_ibd: var(--_color);
+
+  /* What is actually painted. Hover rules only ever touch these three. */
+  --_xbg: var(--_pbg);
+  --_xfg: var(--_pfg);
+  --_xbd: var(--_pbd);
+
+  --_pady: var(--btn-pad-y, var(--osi-button-pad-y, 12px));
+  --_padx: var(--btn-pad-x, var(--osi-button-pad-x, 28px));
+  --_scale: 1;
+  --_padk: 1; /* 0 for UNDERLINE / TEXT, which have no box to pad */
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5em;
+  box-sizing: border-box;
+  max-width: 100%;
+  padding: calc(var(--_pady) * var(--_scale) * var(--_padk)) calc(var(--_padx) * var(--_scale) * var(--_padk));
+  background: var(--_xbg);
+  color: var(--_xfg);
+  border: var(--btn-border-w, var(--osi-button-border-w, 1px)) solid var(--_xbd);
+  border-radius: var(--btn-radius, var(--osi-button-radius, 4px));
+  box-shadow: var(--btn-shadow, var(--osi-button-shadow, none));
+  font-family: var(--btn-ff, var(--osi-button-ff, inherit));
+  font-size: calc(var(--btn-fs, var(--osi-button-fs, 14px)) * (0.5 + var(--_scale) / 2));
+  font-weight: var(--btn-fw, var(--osi-button-fw, 500));
+  letter-spacing: var(--btn-ls, var(--osi-button-ls, normal));
+  text-transform: var(--btn-tt, var(--osi-button-tt, none));
+  line-height: 1.2;
+  text-align: center;
+  text-decoration: none;
+  white-space: nowrap;
+  cursor: pointer;
+  -webkit-appearance: none;
+  appearance: none;
+  -webkit-tap-highlight-color: transparent;
+  transition:
+    background-color 0.2s ease,
+    color 0.2s ease,
+    border-color 0.2s ease,
+    box-shadow 0.2s ease,
+    opacity 0.2s ease,
+    filter 0.2s ease,
+    transform 0.2s ease;
+}
+:is(.osi-root, body) .osi-btn:focus-visible {
+  outline: 2px solid var(--_color);
+  outline-offset: 2px;
+}
+:is(.osi-root, body) .osi-btn:disabled,
+:is(.osi-root, body) .osi-btn[aria-disabled="true"] {
+  opacity: 0.55;
+  cursor: not-allowed;
+  transform: none;
+  filter: none;
+}
+
+/* ---- style: theme default (root class) */
+
+:is(.osi-root, body).osi-btns--outline .osi-btn {
+  --_pbg: transparent;
+  --_pfg: var(--btn-fg, var(--osi-button-fg, var(--_color)));
+  --_pbd: var(--btn-border-color, var(--osi-button-border-color, var(--_pfg)));
+  --_ibg: var(--_pfg);
+  --_ifg: var(--osi-bg, #ffffff);
+  --_ibd: var(--_pfg);
+}
+:is(.osi-root, body).osi-btns--underline .osi-btn,
+:is(.osi-root, body).osi-btns--text .osi-btn {
+  --_pbg: transparent;
+  --_pfg: var(--btn-fg, var(--osi-button-fg, var(--_color)));
+  --_pbd: transparent;
+  --_ibg: transparent;
+  --_ifg: var(--_pfg);
+  --_ibd: transparent;
+  --_padk: 0;
+  box-shadow: none;
+}
+:is(.osi-root, body).osi-btns--underline .osi-btn {
+  text-decoration: underline;
+  text-underline-offset: 0.3em;
+}
+
+/* ---- style: this button's own choice (element class) — after the root
+        rules on purpose, same specificity, so the element wins. */
+
+:is(.osi-root, body) .osi-btn.osi-btn--solid {
+  --_pbg: var(--_color);
+  --_pfg: var(--_on-color);
+  --_pbd: var(--btn-border-color, var(--osi-button-border-color, var(--_color)));
+  --_ibg: transparent;
+  --_ifg: var(--_color);
+  --_ibd: var(--_color);
+  --_padk: 1;
+  text-decoration: none;
+  box-shadow: var(--btn-shadow, var(--osi-button-shadow, none));
+}
+:is(.osi-root, body) .osi-btn.osi-btn--outline {
+  --_pbg: transparent;
+  --_pfg: var(--btn-fg, var(--osi-button-fg, var(--_color)));
+  --_pbd: var(--btn-border-color, var(--osi-button-border-color, var(--_pfg)));
+  --_ibg: var(--_pfg);
+  --_ifg: var(--osi-bg, #ffffff);
+  --_ibd: var(--_pfg);
+  --_padk: 1;
+  text-decoration: none;
+  box-shadow: var(--btn-shadow, var(--osi-button-shadow, none));
+}
+:is(.osi-root, body) .osi-btn.osi-btn--underline,
+:is(.osi-root, body) .osi-btn.osi-btn--text {
+  --_pbg: transparent;
+  --_pfg: var(--btn-fg, var(--osi-button-fg, var(--_color)));
+  --_pbd: transparent;
+  --_ibg: transparent;
+  --_ifg: var(--_pfg);
+  --_ibd: transparent;
+  --_padk: 0;
+  box-shadow: none;
+}
+:is(.osi-root, body) .osi-btn.osi-btn--underline {
+  text-decoration: underline;
+  text-underline-offset: 0.3em;
+}
+:is(.osi-root, body) .osi-btn.osi-btn--text {
+  text-decoration: none;
+}
+
+/* ---- secondary: the quieter action next to a primary one (Apply, Cancel,
+        Continue shopping). Shares the theme's shape, has its own colours. */
+
+:is(.osi-root, body) .osi-btn.osi-btn--secondary {
+  --_pbg: var(--osi-button2-bg, transparent);
+  --_pfg: var(--osi-button2-fg, var(--osi-button-bg, var(--osi-btn-bg, currentColor)));
+  --_pbd: var(--osi-button2-border-color, var(--_pfg));
+  --_ibg: var(--_pfg);
+  --_ifg: var(--osi-bg, #ffffff);
+  --_ibd: var(--_pfg);
+  text-decoration: none;
+}
+
+/* ---- danger: destructive confirmations. Pair with osi-btn--solid so a
+        theme set to OUTLINE/TEXT still gets an unmistakable button. */
+
+:is(.osi-root, body) .osi-btn.osi-btn--danger {
+  --btn-bg: var(--osi-input-error, #dc2626);
+  --btn-fg: #ffffff;
+  --btn-border-color: var(--osi-input-error, #dc2626);
+}
+
+/* ---- sizes and width */
+
+:is(.osi-root, body) .osi-btn.osi-btn--sm {
+  --_scale: 0.6;
+}
+:is(.osi-root, body) .osi-btn.osi-btn--lg {
+  --_scale: 1.3;
+}
+:is(.osi-root, body) .osi-btn.osi-btn--block {
+  display: flex;
+  width: 100%;
+}
+:is(.osi-root, body) .osi-btn.osi-btn--icon {
+  --_padx: var(--_pady);
+}
+
+/* ---- hover. Explicit hover colours win over whatever the effect does. */
+
+:is(.osi-root, body) .osi-btn:not(:disabled):hover {
+  --_xbg: var(--btn-hover-bg, var(--osi-button-hover-bg, var(--_ebg, var(--_pbg))));
+  --_xfg: var(--btn-hover-fg, var(--osi-button-hover-fg, var(--_efg, var(--_pfg))));
+  --_xbd: var(--osi-button-hover-border-color, var(--_ebd, var(--_pbd)));
+}
+
+/* root effect */
+:is(.osi-root, body).osi-btns-hover--fade .osi-btn:not(:disabled):hover {
+  opacity: 0.85;
+}
+:is(.osi-root, body).osi-btns-hover--darken .osi-btn:not(:disabled):hover {
+  filter: brightness(0.9);
+}
+:is(.osi-root, body).osi-btns-hover--lift .osi-btn:not(:disabled):hover {
+  transform: translateY(-1px);
+  box-shadow: var(--osi-button-hover-shadow, 0 6px 14px -4px rgba(0, 0, 0, 0.25));
+}
+:is(.osi-root, body).osi-btns-hover--invert .osi-btn:not(:disabled):hover {
+  --_ebg: var(--_ibg);
+  --_efg: var(--_ifg);
+  --_ebd: var(--_ibd);
+}
+
+/* element effect — each one resets what the others set */
+:is(.osi-root, body) .osi-btn[class*="osi-btn-hover--"]:not(:disabled):hover {
+  --_ebg: initial;
+  --_efg: initial;
+  --_ebd: initial;
+  opacity: 1;
+  filter: none;
+  transform: none;
+}
+:is(.osi-root, body) .osi-btn.osi-btn-hover--fade:not(:disabled):hover {
+  opacity: 0.85;
+}
+:is(.osi-root, body) .osi-btn.osi-btn-hover--darken:not(:disabled):hover {
+  filter: brightness(0.9);
+}
+:is(.osi-root, body) .osi-btn.osi-btn-hover--lift:not(:disabled):hover {
+  transform: translateY(-1px);
+  box-shadow: var(--osi-button-hover-shadow, 0 6px 14px -4px rgba(0, 0, 0, 0.25));
+}
+:is(.osi-root, body) .osi-btn.osi-btn-hover--invert:not(:disabled):hover {
+  --_ebg: var(--_ibg);
+  --_efg: var(--_ifg);
+  --_ebd: var(--_ibd);
+}
+
+@media (max-width: 639px) {
+  :is(.osi-root, body) .osi-btn {
+    --_pady: var(--btn-pad-y, var(--osi-button-pad-y-mobile, var(--osi-button-pad-y, 12px)));
+    --_padx: var(--btn-pad-x, var(--osi-button-pad-x-mobile, var(--osi-button-pad-x, 28px)));
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :is(.osi-root, body) .osi-btn {
+    transition: none;
+  }
+  :is(.osi-root, body) .osi-btn:hover {
+    transform: none !important;
+  }
+}
+
+/* A spinner that inherits the button's text colour. */
+:is(.osi-root, body) .osi-btn-spinner {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  border: 2px solid currentColor;
+  border-right-color: transparent;
+  border-radius: 999px;
+  animation: osi-btn-spin 0.7s linear infinite;
+}
+@keyframes osi-btn-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* ------------------------------------------------------------------- FIELDS */
+
+:is(.osi-root, body) .osi-input {
+  --_in-bg: var(--in-bg, var(--osi-input-bg, transparent));
+  --_in-border: var(--in-border-color, var(--osi-input-border-color, var(--osi-border, #d1d5db)));
+  --_in-focus: var(--in-focus, var(--osi-input-focus, currentColor));
+  --_in-error: var(--in-error, var(--osi-input-error, #dc2626));
+  --_in-pady: var(--in-pad-y, var(--osi-input-pad-y, 10px));
+  --_in-padx: var(--in-pad-x, var(--osi-input-pad-x, 12px));
+  --_in-fs: var(--in-fs, var(--osi-input-fs, 15px));
+  --_in-xk: 1; /* 0 for UNDERLINE: no box, so no side padding */
+
+  display: block;
+  width: 100%;
+  min-width: 0;
+  box-sizing: border-box;
+  padding: var(--_in-pady) calc(var(--_in-padx) * var(--_in-xk));
+  background: var(--_in-bg);
+  color: var(--in-fg, var(--osi-input-fg, inherit));
+  border: var(--in-border-w, var(--osi-input-border-w, 1px)) solid var(--_in-border);
+  border-radius: var(--in-radius, var(--osi-input-radius, 4px));
+  box-shadow: var(--in-shadow, var(--osi-input-shadow, none));
+  font-family: inherit;
+  font-size: var(--_in-fs);
+  font-weight: 400;
+  line-height: 1.4;
+  text-align: start;
+  outline: none;
+  -webkit-appearance: none;
+  appearance: none;
+  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
+}
+:is(.osi-root, body) .osi-input::placeholder {
+  color: var(--in-placeholder, var(--osi-input-placeholder, currentColor));
+  opacity: 0.5;
+}
+:is(.osi-root, body) .osi-input:focus,
+:is(.osi-root, body) .osi-input:focus-within,
+:is(.osi-root, body) .osi-input:focus-visible {
+  border-color: var(--_in-focus);
+  outline: none;
+}
+:is(.osi-root, body) .osi-input:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+:is(.osi-root, body) .osi-input[aria-invalid="true"],
+:is(.osi-root, body) .osi-input.is-invalid,
+:is(.osi-root, body) .osi-field--error .osi-input {
+  border-color: var(--_in-error);
+}
+:is(.osi-root, body) textarea.osi-input {
+  resize: vertical;
+  min-height: 6em;
+}
+:is(.osi-root, body) select.osi-input,
+:is(.osi-root, body) .osi-input.osi-select-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  cursor: pointer;
+  /* A button has no intrinsic line box; this keeps it the same height as an
+     input with the same padding. */
+  min-height: calc(var(--_in-fs) * 1.4 + var(--_in-pady) * 2 + var(--in-border-w, var(--osi-input-border-w, 1px)) * 2);
+}
+:is(.osi-root, body) .osi-input:-webkit-autofill {
+  -webkit-box-shadow: 0 0 0 100px var(--in-bg, var(--osi-input-bg, var(--osi-bg, #ffffff))) inset;
+  -webkit-text-fill-color: var(--in-fg, var(--osi-input-fg, var(--osi-text, #121212)));
+}
+
+/* ---- field style: theme default (root) */
+
+:is(.osi-root, body).osi-inputs--filled .osi-input {
+  --_in-bg: var(--in-bg, var(--osi-input-bg, color-mix(in srgb, currentColor 6%, transparent)));
+  --_in-border: var(--in-border-color, var(--osi-input-border-color, transparent));
+}
+:is(.osi-root, body).osi-inputs--underline .osi-input {
+  --_in-bg: var(--in-bg, var(--osi-input-bg, transparent));
+  --_in-xk: 0;
+  border-width: 0 0 var(--in-border-w, var(--osi-input-border-w, 1px));
+  border-radius: 0;
+  box-shadow: none;
+}
+
+/* ---- field style: element override (after, same specificity) */
+
+:is(.osi-root, body) .osi-input.osi-input--outline {
+  --_in-bg: var(--in-bg, var(--osi-input-bg, transparent));
+  --_in-border: var(--in-border-color, var(--osi-input-border-color, var(--osi-border, #d1d5db)));
+  --_in-xk: 1;
+  border-width: var(--in-border-w, var(--osi-input-border-w, 1px));
+  border-radius: var(--in-radius, var(--osi-input-radius, 4px));
+  box-shadow: var(--in-shadow, var(--osi-input-shadow, none));
+}
+:is(.osi-root, body) .osi-input.osi-input--filled {
+  --_in-bg: var(--in-bg, var(--osi-input-bg, color-mix(in srgb, currentColor 6%, transparent)));
+  --_in-border: var(--in-border-color, var(--osi-input-border-color, transparent));
+  --_in-xk: 1;
+  border-width: var(--in-border-w, var(--osi-input-border-w, 1px));
+  border-radius: var(--in-radius, var(--osi-input-radius, 4px));
+  box-shadow: var(--in-shadow, var(--osi-input-shadow, none));
+}
+:is(.osi-root, body) .osi-input.osi-input--underline {
+  --_in-bg: var(--in-bg, var(--osi-input-bg, transparent));
+  --_in-xk: 0;
+  border-width: 0 0 var(--in-border-w, var(--osi-input-border-w, 1px));
+  border-radius: 0;
+  box-shadow: none;
+}
+
+@media (max-width: 639px) {
+  :is(.osi-root, body) .osi-input {
+    --_in-pady: var(--in-pad-y-mobile, var(--in-pad-y, var(--osi-input-pad-y-mobile, var(--osi-input-pad-y, 10px))));
+    --_in-padx: var(--in-pad-x-mobile, var(--in-pad-x, var(--osi-input-pad-x-mobile, var(--osi-input-pad-x, 12px))));
+    /* 16px minimum or iOS Safari zooms the page on focus. */
+    --_in-fs: max(var(--in-fs, var(--osi-input-fs-mobile, var(--osi-input-fs, 15px))), 16px);
+  }
+}
+
+/* ------------------------------------------------------ LABELLED FIELD
+   Same DOM shape and behaviour as CONTACT_FORM's fields:
+
+     .osi-field
+       .osi-field-control      (position: relative)
+         <input class="osi-input">
+         <label class="osi-field-label">
+         .osi-field-suffix?    (password eye, etc.)
+       .osi-field-error?
+
+   The label comes AFTER the input so `input:focus ~ label` can float it;
+   `order: -1` puts it back on top in ABOVE mode.
+
+   The label style and field style are classes on .osi-field
+   (osi-field--label-*, osi-field--input-*), resolved by OsiField.vue from
+   the component's props or the theme.
+   ------------------------------------------------------------------------ */
+
+:is(.osi-root, body) .osi-field {
+  --_f-pady: var(--in-pad-y, var(--osi-input-pad-y, 10px));
+  --_f-padx: var(--in-pad-x, var(--osi-input-pad-x, 12px));
+  --_f-fs: var(--in-fs, var(--osi-input-fs, 15px));
+  --_f-xk: 1;
+  --_float-fs: 0.6875rem;
+  --_float-gap: 0.3rem;
+
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+  min-width: 0;
+  text-align: start;
+}
+:is(.osi-root, body) .osi-field-control {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+:is(.osi-root, body) .osi-field-label {
+  font-size: var(--osi-label-fs, 0.75rem);
+  font-weight: var(--osi-label-fw, 500);
+  letter-spacing: var(--osi-label-ls, 0.02em);
+  text-transform: var(--osi-label-tt, none);
+  color: var(--osi-label-color, inherit);
+  opacity: 0.8;
+  margin: 0;
+}
+:is(.osi-root, body) .osi-field-required {
+  margin-inline-start: 0.125em;
+}
+:is(.osi-root, body) .osi-field-error {
+  margin: 0;
+  font-size: 0.75rem;
+  color: var(--in-error, var(--osi-input-error, #dc2626));
+}
+:is(.osi-root, body) .osi-field-hint {
+  margin: 0;
+  font-size: 0.75rem;
+  opacity: 0.65;
+}
+:is(.osi-root, body) .osi-field-suffix {
+  position: absolute;
+  inset-inline-end: calc(var(--_f-padx) * var(--_f-xk) + 0.25rem);
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  color: inherit;
+  opacity: 0.6;
+  z-index: 1;
+}
+:is(.osi-root, body) .osi-field--suffix .osi-input {
+  padding-inline-end: calc(var(--_f-padx) * var(--_f-xk) + 2rem);
+}
+:is(.osi-root, body) .osi-field--input-underline {
+  --_f-xk: 0;
+}
+:is(.osi-root, body) .osi-field--input-underline .osi-field-suffix {
+  inset-inline-end: 0;
+}
+
+/* above */
+:is(.osi-root, body) .osi-field--label-above .osi-field-label {
+  order: -1;
+}
+
+/* inside only — kept for screen readers and the `for` association */
+:is(.osi-root, body) .osi-field--label-placeholder .osi-field-label {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* floating
+   Same behaviour as CONTACT_FORM: at rest the label sits centred on the
+   field's text line; on focus / with a value it rises onto the top border
+   (outline) or to the top inside the box (filled, underline).
+
+   Positions are measured against the input itself — the control box is
+   exactly the input's size — so a stray global `input { height }` or
+   `label { … }` rule can't push the label off-centre. The doubled class
+   lifts these above any single-class or element rule from elsewhere. */
+:is(.osi-root, body) .osi-field.osi-field--label-floating .osi-field-control {
+  position: relative;
+  display: block;
+  gap: 0;
+}
+:is(.osi-root, body) .osi-field.osi-field--label-floating .osi-field-control > .osi-input {
+  margin: 0;
+  height: auto;
+}
+:is(.osi-root, body) .osi-field.osi-field--label-floating .osi-field-label.osi-field-label {
+  position: absolute;
+  display: block;
+  inset-inline-start: calc(var(--_f-padx) * var(--_f-xk));
+  inset-inline-end: auto;
+  top: 50%;
+  bottom: auto;
+  transform: translateY(-50%);
+  width: auto;
+  max-width: none;
+  margin: 0;
+  padding: 0 0.25rem;
+  font-size: var(--_f-fs);
+  font-weight: 400;
+  letter-spacing: normal;
+  text-transform: none;
+  line-height: 1.4;
+  white-space: nowrap;
+  background: transparent;
+  pointer-events: none;
+  opacity: 0.6;
+  z-index: 1;
+  transition: top 0.18s ease, transform 0.18s ease, font-size 0.18s ease,
+    opacity 0.18s ease, color 0.18s ease, background-color 0.18s ease;
+}
+
+/* floated — outline: onto the border, with a chip so the line doesn't
+   strike through the text */
+:is(.osi-root, body) .osi-field.osi-field--label-floating .osi-input:focus ~ .osi-field-label.osi-field-label,
+:is(.osi-root, body) .osi-field.osi-field--label-floating .osi-input:not(:placeholder-shown) ~ .osi-field-label.osi-field-label,
+:is(.osi-root, body) .osi-field.osi-field--label-floating .osi-input:autofill ~ .osi-field-label.osi-field-label,
+:is(.osi-root, body) .osi-field.osi-field--label-floating.osi-field--floated .osi-field-label.osi-field-label {
+  top: 0;
+  transform: translateY(-50%);
+  font-size: var(--_float-fs);
+  letter-spacing: 0.04em;
+  line-height: 1;
+  opacity: 1;
+  background: var(--osi-field-chip, var(--in-bg, var(--osi-input-bg, var(--osi-bg, #ffffff))));
+}
+/* Separate rule: an engine that doesn't know one of these pseudo-classes
+   would otherwise drop the whole list above. */
+:is(.osi-root, body) .osi-field.osi-field--label-floating .osi-input:-webkit-autofill ~ .osi-field-label.osi-field-label,
+:is(.osi-root, body) .osi-field.osi-field--label-floating .osi-input:focus-within ~ .osi-field-label.osi-field-label {
+  top: 0;
+  transform: translateY(-50%);
+  font-size: var(--_float-fs);
+  letter-spacing: 0.04em;
+  line-height: 1;
+  opacity: 1;
+  background: var(--osi-field-chip, var(--in-bg, var(--osi-input-bg, var(--osi-bg, #ffffff))));
+}
+:is(.osi-root, body) .osi-field.osi-field--label-floating .osi-input:focus ~ .osi-field-label.osi-field-label {
+  color: var(--in-focus, var(--osi-input-focus, inherit));
+}
+
+/* filled / underline: no outline to notch, so the label rises inside the box
+   and the box grows by the floated label's height to make room. */
+:is(.osi-root, body) .osi-field.osi-field--label-floating.osi-field--input-filled .osi-field-control > .osi-input,
+:is(.osi-root, body) .osi-field.osi-field--label-floating.osi-field--input-underline .osi-field-control > .osi-input {
+  padding-top: calc(var(--_f-pady) + var(--_float-fs));
+}
+/* At rest the label is centred in the (taller) box, same as outline. */
+:is(.osi-root, body) .osi-field.osi-field--label-floating.osi-field--input-filled .osi-field-label.osi-field-label,
+:is(.osi-root, body) .osi-field.osi-field--label-floating.osi-field--input-underline .osi-field-label.osi-field-label {
+  top: 50%;
+}
+:is(.osi-root, body) .osi-field.osi-field--label-floating.osi-field--input-filled .osi-input:focus ~ .osi-field-label.osi-field-label,
+:is(.osi-root, body) .osi-field.osi-field--label-floating.osi-field--input-filled .osi-input:not(:placeholder-shown) ~ .osi-field-label.osi-field-label,
+:is(.osi-root, body) .osi-field.osi-field--label-floating.osi-field--input-filled .osi-input:autofill ~ .osi-field-label.osi-field-label,
+:is(.osi-root, body) .osi-field.osi-field--label-floating.osi-field--input-filled.osi-field--floated .osi-field-label.osi-field-label,
+:is(.osi-root, body) .osi-field.osi-field--label-floating.osi-field--input-underline .osi-input:focus ~ .osi-field-label.osi-field-label,
+:is(.osi-root, body) .osi-field.osi-field--label-floating.osi-field--input-underline .osi-input:not(:placeholder-shown) ~ .osi-field-label.osi-field-label,
+:is(.osi-root, body) .osi-field.osi-field--label-floating.osi-field--input-underline .osi-input:autofill ~ .osi-field-label.osi-field-label,
+:is(.osi-root, body) .osi-field.osi-field--label-floating.osi-field--input-underline.osi-field--floated .osi-field-label.osi-field-label {
+  top: var(--_float-gap);
+  transform: none;
+  background: transparent;
+}
+:is(.osi-root, body) .osi-field.osi-field--label-floating.osi-field--input-filled .osi-input:-webkit-autofill ~ .osi-field-label.osi-field-label,
+:is(.osi-root, body) .osi-field.osi-field--label-floating.osi-field--input-underline .osi-input:-webkit-autofill ~ .osi-field-label.osi-field-label {
+  top: var(--_float-gap);
+  transform: none;
+  background: transparent;
+}
+:is(.osi-root, body) .osi-field.osi-field--label-floating.osi-field--input-underline .osi-field-label.osi-field-label {
+  inset-inline-start: 0;
+  padding-inline: 0;
+}
+
+/* textarea: the first line is at the top, not the middle */
+:is(.osi-root, body) .osi-field.osi-field--label-floating.osi-field--area .osi-field-label.osi-field-label {
+  top: calc(var(--_f-pady) + var(--in-border-w, var(--osi-input-border-w, 1px)));
+  transform: none;
+}
+:is(.osi-root, body) .osi-field.osi-field--label-floating.osi-field--area.osi-field--input-filled .osi-field-label.osi-field-label,
+:is(.osi-root, body) .osi-field.osi-field--label-floating.osi-field--area.osi-field--input-underline .osi-field-label.osi-field-label {
+  top: calc(var(--_f-pady) + var(--_float-fs));
+}
+:is(.osi-root, body) .osi-field.osi-field--label-floating.osi-field--area .osi-input:focus ~ .osi-field-label.osi-field-label,
+:is(.osi-root, body) .osi-field.osi-field--label-floating.osi-field--area .osi-input:not(:placeholder-shown) ~ .osi-field-label.osi-field-label {
+  top: 0;
+  transform: translateY(-50%);
+}
+:is(.osi-root, body) .osi-field.osi-field--label-floating.osi-field--area.osi-field--input-filled .osi-input:focus ~ .osi-field-label.osi-field-label,
+:is(.osi-root, body) .osi-field.osi-field--label-floating.osi-field--area.osi-field--input-filled .osi-input:not(:placeholder-shown) ~ .osi-field-label.osi-field-label,
+:is(.osi-root, body) .osi-field.osi-field--label-floating.osi-field--area.osi-field--input-underline .osi-input:focus ~ .osi-field-label.osi-field-label,
+:is(.osi-root, body) .osi-field.osi-field--label-floating.osi-field--area.osi-field--input-underline .osi-input:not(:placeholder-shown) ~ .osi-field-label.osi-field-label {
+  top: var(--_float-gap);
+  transform: none;
+}
+
+@media (max-width: 639px) {
+  :is(.osi-root, body) .osi-field {
+    --_f-pady: var(--in-pad-y-mobile, var(--in-pad-y, var(--osi-input-pad-y-mobile, var(--osi-input-pad-y, 10px))));
+    --_f-padx: var(--in-pad-x-mobile, var(--in-pad-x, var(--osi-input-pad-x-mobile, var(--osi-input-pad-x, 12px))));
+    --_f-fs: max(var(--in-fs, var(--osi-input-fs-mobile, var(--osi-input-fs, 15px))), 16px);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :is(.osi-root, body) .osi-field-label {
+    transition: none !important;
+  }
+}
+
+/* ------------------------------------------------------------ PHONE FIELD
+   PhoneNumInput's `theme` variant: a country button and a number input,
+   both `.osi-input`, joined into one visual box. */
+
+:is(.osi-root, body) .osi-phone {
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+  min-width: 0;
+}
+:is(.osi-root, body) .osi-phone .osi-phone-code {
+  flex: none;
+  width: auto;
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+  border-inline-end-width: 0;
+  cursor: pointer;
+  min-height: 100%;
+}
+:is(.osi-root, body) .osi-phone .osi-phone-number {
+  flex: 1;
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+}
+:is(.osi-root, body) .osi-field--input-underline .osi-phone .osi-phone-code,
+:is(.osi-root, body).osi-inputs--underline .osi-phone .osi-phone-code {
+  padding-inline-end: 0.75rem;
+  border-inline-end-width: 0;
+}
+:is(.osi-root, body) .osi-field--input-underline .osi-phone .osi-phone-number,
+:is(.osi-root, body).osi-inputs--underline .osi-phone .osi-phone-number {
+  padding-inline-start: 0.5rem;
+}
+/* Filled: two fills side by side read as two boxes; a hairline splits them. */
+:is(.osi-root, body) .osi-field--input-filled .osi-phone .osi-phone-code {
+  border-inline-end: 1px solid color-mix(in srgb, currentColor 12%, transparent);
+}
+:is(.osi-root, body) .osi-phone .osi-phone-code img {
+  width: 1.25rem;
+  height: 1.25rem;
+  object-fit: contain;
+}
+:is(.osi-root, body) .osi-phone .osi-phone-code svg {
+  width: 0.875rem;
+  height: 0.875rem;
+  opacity: 0.7;
+}
+
+/* ------------------------------------------------------------ OTP DIGITS */
+
+:is(.osi-root, body) .osi-input.osi-otp {
+  width: 3rem;
+  height: 3rem;
+  padding: 0;
+  text-align: center;
+  font-size: 1.25rem;
+}
+
+/* ------------------------------------------------------------ AUTH CARD
+   The login / register / password pages share one card. It paints with the
+   default scheme's background so a floating label's chip matches it. */
+
+:is(.osi-root, body) .osi-auth-card {
+  --osi-field-chip: var(--osi-bg, #ffffff);
+  width: 100%;
+  max-width: 550px;
+  box-sizing: border-box;
+  padding: 1.25rem;
+  background: var(--osi-bg, #ffffff);
+  color: var(--osi-text, inherit);
+  border: 1px solid var(--osi-border, #e5e5e5);
+  border-radius: var(--osi-button-radius, 4px);
+}
+@media (min-width: 640px) {
+  :is(.osi-root, body) .osi-auth-card {
+    padding: 2.25rem;
+  }
+}
+:is(.osi-root, body) .osi-auth-stack {
+  display: flex;
+  flex-direction: column;
+  gap: var(--osi-input-gap, 1rem);
+}
+:is(.osi-root, body) .osi-auth-row {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--osi-input-gap, 1rem);
+}
+@media (max-width: 479px) {
+  :is(.osi-root, body) .osi-auth-row {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+
+/* Segmented Login / Register switch — it's a pair of buttons, so it takes the
+   theme's radius and border width. */
+:is(.osi-root, body) .osi-segmented {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.25rem;
+  padding: 0.25rem;
+  border: var(--osi-button-border-w, 1px) solid var(--osi-border, #e5e5e5);
+  border-radius: calc(var(--osi-button-radius, 4px) + 0.25rem);
+}
+:is(.osi-root, body) .osi-segmented > .osi-btn {
+  width: 100%;
+}
+:is(.osi-root, body) .osi-segmented > .osi-btn:not(.is-active) {
+  --_pbg: transparent;
+  --_pfg: inherit;
+  --_pbd: transparent;
+  --_ibg: transparent;
+  --_ifg: inherit;
+  --_ibd: transparent;
+  box-shadow: none;
+  opacity: 0.55;
+}
+
+/* ------------------------------------------------------------ SPINNER */
+
+:is(.osi-root, body) .osi-loader-row {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0.75rem;
+}
+
+/* ------------------------------------------------------------ ANIMATIONS
+   Theme → Animations. Root classes come from useThemeControls. */
+
+/* Reveal sections on scroll (plugins/reveal.client.js adds .is-revealed).
+   The first section is never hidden: it's what the visitor lands on. */
+.osi-root.osi-reveal .osi-sections > .osi-section:not(:first-child):not(.is-revealed) {
+  opacity: 0;
+  transform: translateY(24px);
+}
+.osi-root.osi-reveal .osi-section {
+  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
+}
+
+/* Hover effect on cards and linked images across sections. */
+.osi-root.osi-hover--lift .osi-card,
+.osi-root.osi-hover--lift .osi-cc,
+.osi-root.osi-hover--lift .osi-ig-card {
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+.osi-root.osi-hover--lift .osi-card:hover,
+.osi-root.osi-hover--lift .osi-cc:hover,
+.osi-root.osi-hover--lift .osi-ig-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 14px 30px -14px rgb(0 0 0 / 0.3);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .osi-root.osi-reveal .osi-section {
+    opacity: 1 !important;
+    transform: none !important;
+    transition: none;
+  }
+  .osi-root.osi-hover--lift .osi-card:hover,
+  .osi-root.osi-hover--lift .osi-cc:hover,
+  .osi-root.osi-hover--lift .osi-ig-card:hover {
+    transform: none;
+  }
+}