/* ============================================================ V2X Auth — MWR-APP-PUBLIC (Phase 3) Dedicated split-screen auth shell. All auth-specific classes live here — do NOT pollute public.css or tokens.css. Load order: bootstrap -> tokens.css -> auth.css Pairs with . Token mapping note: the brief's --v2x-bd-strong maps to the live token --v2x-hairline-strong in tokens.css. ============================================================ */ /* ── BODY RESET ─────────────────────────────────────────────── */ /* This layout doesn't load Bootstrap CSS, so reset the default body margin/background that would otherwise show as a white frame around the navy page. */ html, body { margin: 0; padding: 0; background: var(--v2x-navy-900); } /* ── AUTH SHELL ─────────────────────────────────────────────── */ .pub-auth-page { min-height: 100vh; background: var(--v2x-navy-900); font-family: var(--v2x-font-display); color: var(--v2x-text); -webkit-font-smoothing: antialiased; } /* ── DESKTOP SPLIT LAYOUT ───────────────────────────────────── */ .pub-auth-split { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; } @media (max-width: 860px) { .pub-auth-split { grid-template-columns: 1fr; } } /* ── LEFT BRAND PANEL ───────────────────────────────────────── */ .pub-auth-left { background: linear-gradient(160deg, rgba(15,35,75,.96) 0%, rgba(5,15,40,.84) 100%), var(--auth-bg, url("../img/kwaj/chair-lagoon-1600.webp")) center / cover no-repeat; border-right: 1px solid var(--v2x-hairline); display: flex; flex-direction: column; padding: 40px 36px; position: relative; overflow: hidden; } .pub-auth-left::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,15,40,.86), rgba(5,15,40,.30) 62%, rgba(5,15,40,.52)), linear-gradient(180deg, rgba(5,15,40,.18), rgba(5,15,40,.82)); pointer-events: none; } .pub-auth-left::after { content: none; } /* Brand mark */ .pub-auth-brand { margin-bottom: auto; position: relative; z-index: 1; } .pub-auth-logo { height: 40px; width: auto; display: block; } .pub-auth-mobile-logo { height: 26px; width: auto; display: block; } .pub-auth-brand-mark { font-family: var(--v2x-font-brand); font-weight: 700; font-size: 28px; letter-spacing: .04em; color: var(--v2x-text); position: relative; display: inline-block; margin-bottom: 6px; } .pub-auth-brand-mark::after { content: ""; position: absolute; right: -3px; bottom: 3px; width: 22px; height: 3px; background: var(--v2x-accent); transform: skewX(-22deg); } .pub-auth-brand-sub { font-family: var(--v2x-font-mono); font-size: 9px; letter-spacing: .22em; color: var(--v2x-subtle); text-transform: uppercase; } /* Sora wordmark — the "MWR APP" lockup inside auth headings (e.g. "Sign in to MWR APP"). Mirrors the in-app brand label via --v2x-font-brand; Sora is loaded by _LayoutV2xAuth.cshtml. */ .pub-auth-wordmark { font-family: var(--v2x-font-brand); font-weight: 700; } /* Tagline block */ .pub-auth-tagline { margin-top: auto; position: relative; z-index: 1; } .pub-auth-tagline-title { font-family: var(--v2x-font-display); font-weight: 800; font-size: 22px; line-height: 1.2; color: var(--v2x-text); margin-bottom: 10px; } .pub-auth-tagline-sub { font-size: 12.5px; color: var(--v2x-muted); line-height: 1.65; max-width: 280px; } /* Feature list */ .pub-auth-features { margin-top: 24px; display: flex; flex-direction: column; gap: 10px; } .pub-auth-feat { display: flex; align-items: center; gap: 10px; } .pub-auth-feat-icon { width: 28px; height: 28px; flex: none; background: rgba(43,137,201,.12); border: 1px solid rgba(43,137,201,.25); display: grid; place-items: center; } .pub-auth-feat-icon i { font-size: 14px; color: var(--v2x-accent-400); } .pub-auth-feat-icon .pub-icon-golfcart { display: block; width: 20px; height: 20px; object-fit: contain; filter: brightness(0) saturate(100%) invert(45%) sepia(74%) saturate(947%) hue-rotate(169deg) brightness(90%) contrast(89%); } .pub-auth-feat-text { font-size: 12px; color: var(--v2x-muted); } /* Location chip */ .pub-auth-loc { display: flex; align-items: center; gap: 6px; margin-top: 28px; } .pub-auth-loc-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--v2x-success); } .pub-auth-loc-text { font-family: var(--v2x-font-mono); font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--v2x-subtle); } /* ── RIGHT FORM PANEL ───────────────────────────────────────── */ .pub-auth-right { padding: 40px 36px; display: flex; flex-direction: column; } .pub-auth-eyebrow { font-family: var(--v2x-font-mono); font-size: 8.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--v2x-accent-400); margin-bottom: 8px; } .pub-auth-title { font-family: var(--v2x-font-display); font-weight: 800; font-size: 22px; color: var(--v2x-text); line-height: 1.1; margin-bottom: 6px; } .pub-auth-subtitle { font-size: 12px; color: var(--v2x-muted); line-height: 1.55; margin-bottom: 24px; } .pub-auth-subtitle a { color: var(--v2x-accent-400); text-decoration: none; } .pub-auth-subtitle a:hover { text-decoration: underline; } .pub-auth-secondary-action { font-family: var(--v2x-font-mono); font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--v2x-subtle); text-align: center; } .pub-auth-secondary-action a { color: var(--v2x-accent-400); font-weight: 600; text-decoration: none; } .pub-auth-secondary-action a:hover { text-decoration: underline; } /* Constrain the form column on very wide screens so fields don't sprawl, and vertically center the form within the right panel. */ .pub-auth-form-wrap { width: 100%; max-width: 380px; margin-inline: auto; flex: 1; display: flex; flex-direction: column; justify-content: center; } .pub-auth-form-wrap > form, .pub-auth-field, .pub-auth-input-wrap, .pub-auth-name-row, .pub-auth-pw-rules, .pub-auth-banner, .pub-auth-success-block { width: 100%; min-width: 0; box-sizing: border-box; } /* ── FORM FIELDS ────────────────────────────────────────────── */ .pub-auth-field { margin-bottom: 14px; } .pub-auth-label { display: block; font-family: var(--v2x-font-mono); font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--v2x-subtle); margin-bottom: 5px; } .pub-auth-input, .pub-auth-select { width: 100%; max-width: 100%; box-sizing: border-box; background: var(--v2x-navy-800); border: 1px solid var(--v2x-hairline); color: var(--v2x-text); font-family: var(--v2x-font-display); font-size: 13px; padding: 9px 12px; outline: none; transition: border-color .16s cubic-bezier(.2,.6,.2,1); border-radius: 0; -webkit-appearance: none; } .pub-auth-select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236F839C' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 34px; } .pub-auth-select option { background: var(--v2x-navy-800); color: var(--v2x-text); } .pub-auth-input:focus, .pub-auth-select:focus { border-color: var(--v2x-accent); } .pub-auth-input.input-valid { border-color: var(--v2x-success); } .pub-auth-input.input-invalid, .pub-auth-input.is-invalid, .pub-auth-select.is-invalid { border-color: var(--v2x-danger); } .pub-auth-input::placeholder { color: var(--v2x-subtle); opacity: .7; } /* Password reveal wrapper */ .pub-auth-input-wrap { position: relative; } .pub-auth-input-wrap .pub-auth-input { padding-right: 38px; } .pub-auth-eye { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--v2x-subtle); font-size: 15px; cursor: pointer; background: none; border: none; padding: 0; line-height: 1; } .pub-auth-eye:hover { color: var(--v2x-muted); } /* Field-level error (Identity validation span) */ .pub-auth-field-error, .field-validation-error { font-family: var(--v2x-font-mono); font-size: 8.5px; letter-spacing: .1em; color: var(--v2x-danger); margin-top: 4px; display: flex; align-items: center; gap: 4px; } .pub-auth-field-error i { font-size: 11px; } /* Suppress default Bootstrap validation icons that clash with V2X inputs */ .pub-auth-input.is-invalid { background-image: none; } .pub-auth-input.is-valid { background-image: none; } /* ── Live email-availability feedback (Register) ─────────────── */ /* Status icon parked inside the email .pub-auth-input-wrap (reuses .pub-auth-eye positioning). aria-hidden — the textual message below carries the a11y status. */ .pub-auth-email-state { cursor: default; pointer-events: none; } .pub-auth-email-state:empty { display: none; } .pub-auth-email-state.is-checking { color: var(--v2x-subtle); } .pub-auth-email-state.is-available { color: var(--v2x-success); } .pub-auth-email-state.is-taken { color: var(--v2x-warning); } .pub-auth-email-msg { display: none; font-family: var(--v2x-font-mono); font-size: 8.5px; letter-spacing: .1em; margin-top: 4px; } .pub-auth-email-msg.is-checking, .pub-auth-email-msg.is-available, .pub-auth-email-msg.is-taken { display: block; } .pub-auth-email-msg.is-checking { color: var(--v2x-subtle); } .pub-auth-email-msg.is-available { color: var(--v2x-success); } .pub-auth-email-msg.is-taken { color: var(--v2x-warning); } .pub-auth-email-msg a { color: inherit; text-decoration: underline; font-weight: 600; } /* ── Spinner + button loading state ──────────────────────────── */ @@keyframes pub-auth-spin { to { transform: rotate(360deg); } } .pub-auth-spin { display: inline-block; animation: pub-auth-spin .7s linear infinite; } @@media (prefers-reduced-motion: reduce) { .pub-auth-spin { animation-duration: 2s; } } /* Default: show the label, keep the spinner copy out of flow. */ .pub-auth-btn .pub-auth-btn-label { display: inline-flex; align-items: center; gap: 7px; } .pub-auth-btn .pub-auth-btn-spinner { display: none; align-items: center; gap: 7px; } /* Loading: swap label → spinner, dim and lock the button. */ .pub-auth-btn.is-loading .pub-auth-btn-label { display: none; } .pub-auth-btn.is-loading .pub-auth-btn-spinner { display: inline-flex; } .pub-auth-btn:disabled, .pub-auth-btn.is-loading { opacity: .75; cursor: progress; pointer-events: none; } /* ── NAME ROW (Register — two columns) ──────────────────────── */ .pub-auth-name-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; } .pub-auth-name-row .pub-auth-field { margin-bottom: 0; } .pub-auth-name-row > * { min-width: 0; } @media (max-width: 480px) { .pub-auth-name-row { grid-template-columns: 1fr; } } /* ── PASSWORD RULES CHECKLIST ───────────────────────────────── */ .pub-auth-pw-rules { background: var(--v2x-navy-700); border: 1px solid var(--v2x-hairline); padding: 10px 12px; margin-bottom: 14px; } .pub-auth-pw-rules-title { font-family: var(--v2x-font-mono); font-size: 8px; letter-spacing: .14em; text-transform: uppercase; color: var(--v2x-subtle); margin-bottom: 8px; } .pub-auth-pw-rule { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; font-size: 0; } .pub-auth-pw-rule:last-child { margin-bottom: 0; } .pub-auth-pw-rule i { font-size: 12px; } .pub-auth-pw-rule span { font-family: var(--v2x-font-mono); font-size: 8.5px; letter-spacing: .08em; color: var(--v2x-muted); } .pub-auth-pw-rule.rule-met i { color: var(--v2x-success); } .pub-auth-pw-rule.rule-met span { color: var(--v2x-success); } .pub-auth-pw-rule.rule-unmet i { color: var(--v2x-subtle); } /* ── FORGOT PASSWORD LINK ───────────────────────────────────── */ .pub-auth-forgot { font-family: var(--v2x-font-mono); font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--v2x-accent-400); text-align: right; display: block; margin-top: -8px; margin-bottom: 14px; text-decoration: none; } .pub-auth-forgot:hover { text-decoration: underline; } /* ── REMEMBER-ME ROW ────────────────────────────────────────── */ .pub-auth-remember { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; } .pub-auth-remember input[type="checkbox"] { width: 14px; height: 14px; accent-color: var(--v2x-accent); } .pub-auth-remember label { font-family: var(--v2x-font-mono); font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--v2x-subtle); margin: 0; } /* ── PRIMARY BUTTON ─────────────────────────────────────────── */ .pub-auth-btn { width: 100%; background: var(--v2x-accent); color: #fff; border: 1px solid var(--v2x-accent); font-family: var(--v2x-font-display); font-weight: 700; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; padding: 11px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 7px; transition: background .16s cubic-bezier(.2,.6,.2,1); margin-bottom: 14px; border-radius: 0; text-decoration: none; } .pub-auth-btn:hover { background: var(--v2x-accent-400); border-color: var(--v2x-accent-400); color: #fff; } .pub-auth-btn:active { transform: translateY(1px); } .pub-auth-btn i { font-size: 14px; } .pub-auth-btn-outline { background: transparent; color: var(--v2x-text); border-color: var(--v2x-hairline-strong); } .pub-auth-btn-outline:hover { background: rgba(255,255,255,.04); border-color: var(--v2x-accent); color: var(--v2x-text); } /* ── BANNER ALERTS ──────────────────────────────────────────── */ .pub-auth-banner { padding: 10px 12px; margin-bottom: 14px; display: flex; align-items: flex-start; gap: 8px; } .pub-auth-banner i { font-size: 15px; flex: none; margin-top: 1px; } .pub-auth-banner-title { font-size: 12px; color: var(--v2x-text); font-weight: 600; } .pub-auth-banner-detail { font-family: var(--v2x-font-mono); font-size: 8.5px; letter-spacing: .08em; margin-top: 2px; } .pub-auth-banner--error { background: rgba(216,85,101,.08); border: 1px solid rgba(216,85,101,.28); } .pub-auth-banner--error i, .pub-auth-banner--error .pub-auth-banner-detail { color: var(--v2x-danger); } .pub-auth-banner--success { background: rgba(59,167,118,.08); border: 1px solid rgba(59,167,118,.28); } .pub-auth-banner--success i, .pub-auth-banner--success .pub-auth-banner-detail { color: var(--v2x-success); } /* Centered success block (confirmation pages) */ .pub-auth-success-block { text-align: center; margin: 8px 0 18px; } .pub-auth-success-icon { width: 56px; height: 56px; margin: 0 auto 14px; display: grid; place-items: center; background: rgba(59,167,118,.10); border: 1px solid rgba(59,167,118,.30); } .pub-auth-success-icon i { font-size: 26px; color: var(--v2x-success); } .pub-auth-success-title { font-family: var(--v2x-font-display); font-weight: 800; font-size: 18px; color: var(--v2x-text); margin-bottom: 6px; } .pub-auth-success-text { font-size: 12px; color: var(--v2x-muted); line-height: 1.6; margin-bottom: 18px; } /* ── DIVIDER ────────────────────────────────────────────────── */ .pub-auth-divider { display: flex; align-items: center; gap: 10px; margin: 4px 0 14px; } .pub-auth-divider::before, .pub-auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--v2x-hairline); } .pub-auth-divider span { font-family: var(--v2x-font-mono); font-size: 8px; letter-spacing: .12em; text-transform: uppercase; color: var(--v2x-subtle); } /* ── TERMS TEXT ─────────────────────────────────────────────── */ .pub-auth-terms { font-size: 11px; color: var(--v2x-subtle); line-height: 1.55; text-align: center; margin-bottom: 14px; } .pub-auth-terms a { color: var(--v2x-accent-400); text-decoration: none; } .pub-auth-terms a:hover { text-decoration: underline; } /* ── BACK LINK ──────────────────────────────────────────────── */ .pub-auth-back-link { display: inline-flex; align-items: center; gap: 4px; font-family: var(--v2x-font-mono); font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--v2x-accent-400); text-decoration: none; margin-bottom: 16px; } .pub-auth-back-link:hover { text-decoration: underline; color: var(--v2x-accent-400); } /* ── FOOTER ─────────────────────────────────────────────────── */ .pub-auth-footer { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--v2x-hairline); text-align: center; } .pub-auth-footer-text { font-family: var(--v2x-font-mono); font-size: 8.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--v2x-subtle); } .pub-auth-footer-text a { color: var(--v2x-accent-400); text-decoration: none; } /* ── MOBILE TOP NAV ─────────────────────────────────────────── */ .pub-auth-mobile-nav { display: none; align-items: center; justify-content: space-between; padding: 10px 16px 8px; border-bottom: 1px solid var(--v2x-hairline); margin: -40px -36px 16px; } .pub-auth-mobile-brand-mark { font-family: var(--v2x-font-brand); font-weight: 700; font-size: 18px; letter-spacing: .04em; color: var(--v2x-text); position: relative; display: inline-block; } .pub-auth-mobile-brand-mark::after { content: ""; position: absolute; right: -2px; bottom: 2px; width: 14px; height: 2px; background: var(--v2x-accent); transform: skewX(-22deg); } .pub-auth-mobile-brand-sub { font-family: var(--v2x-font-mono); font-size: 7.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--v2x-subtle); margin-top: 2px; } /* ── MOBILE HERO BANNER ─────────────────────────────────────── */ .pub-auth-mobile-hero { display: none; background: linear-gradient(135deg, rgba(15,35,75,.96) 0%, rgba(5,15,40,.78) 100%), var(--auth-bg, url("../img/kwaj/chair-lagoon-1600.webp")) center / cover no-repeat; border: 1px solid var(--v2x-hairline); padding: 16px; margin-bottom: 16px; position: relative; overflow: hidden; } .pub-auth-mobile-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,15,40,.82), rgba(5,15,40,.30)); pointer-events: none; } .pub-auth-mobile-hero-eyebrow { font-family: var(--v2x-font-mono); font-size: 8px; letter-spacing: .16em; text-transform: uppercase; color: var(--v2x-accent-400); margin-bottom: 6px; position: relative; } .pub-auth-mobile-hero-title { font-family: var(--v2x-font-display); font-weight: 800; font-size: 18px; color: var(--v2x-text); line-height: 1.15; margin-bottom: 5px; position: relative; } .pub-auth-mobile-hero-sub { font-size: 11px; color: var(--v2x-muted); line-height: 1.55; position: relative; } .pub-auth-mobile-hero-loc { display: flex; align-items: center; gap: 5px; margin-top: 10px; position: relative; } .pub-auth-mobile-hero-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--v2x-success); } .pub-auth-mobile-hero-loc-text { font-family: var(--v2x-font-mono); font-size: 8px; letter-spacing: .12em; text-transform: uppercase; color: var(--v2x-subtle); } /* ── MOBILE TOGGLES + TOUCH TARGETS ─────────────────────────── */ @media (max-width: 860px) { .pub-auth-page{ min-height:100vh; background: linear-gradient(0deg,var(--v2x-navy-900) 0%,var(--v2x-navy-900) 58%,rgba(5,15,40,.72) 76%,rgba(5,15,40,.36) 100%), var(--auth-bg, url("../img/kwaj/chair-lagoon-1600.webp")) center top / cover no-repeat fixed; } .pub-auth-left { display: none; } /* placed after the base rule so it wins */ .pub-auth-right { padding: 40px 24px; background:linear-gradient(0deg,var(--v2x-navy-900) 0%,rgba(5,15,40,.96) 52%,rgba(5,15,40,.72) 74%,transparent 100%); } .pub-auth-mobile-nav { display: flex; } .pub-auth-mobile-hero { display: block; background:transparent; border:0; padding:0; margin:24px 0 28px; } .pub-auth-mobile-hero::before{ content:none; } .pub-auth-form-wrap { max-width: none; justify-content: flex-start; } /* Touch targets: min 44px height for inputs and buttons */ .pub-auth-input, .pub-auth-select { padding: 12px; min-height: 44px; } .pub-auth-btn { padding: 14px; min-height: 44px; } } /* ── ENTRANCE ANIMATION ─────────────────────────────────────── */ @keyframes pub-auth-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .pub-auth-right { opacity: 0; animation: pub-auth-rise .4s cubic-bezier(.2,.6,.2,1) forwards; } @media (prefers-reduced-motion: reduce) { .pub-auth-right { animation: none; opacity: 1; } } /* ── LIGHT THEME OVERRIDES ─────────────────────────────────── Activated by data-theme="light" on (FOUC guard / preference). Every token-driven surface, border and text colour flips automatically via tokens.css; the rules below only patch the handful of values that were hardcoded for the dark shell (brand-panel gradients, the white grid texture, and the white outline-button hover). */ :root[data-theme="light"] .pub-auth-left { background: linear-gradient(160deg, rgba(232,241,251,.52) 0%, rgba(245,247,250,.18) 100%), var(--auth-bg, url("../img/kwaj/chair-lagoon-1600.webp")) center / cover no-repeat; } :root[data-theme="light"] .pub-auth-left::before { background: linear-gradient(90deg, rgba(245,247,250,.62), rgba(245,247,250,.10) 58%, rgba(245,247,250,.28)), linear-gradient(180deg, rgba(245,247,250,.10), rgba(245,247,250,.18) 52%, rgba(245,247,250,.78)); } :root[data-theme="light"] .pub-auth-left::after { content: none; } :root[data-theme="light"] .pub-auth-mobile-hero { background: linear-gradient(135deg, rgba(232,241,251,.70) 0%, rgba(245,247,250,.34) 100%), var(--auth-bg, url("../img/kwaj/chair-lagoon-1600.webp")) center / cover no-repeat; } :root[data-theme="light"] .pub-auth-mobile-hero::before { background: linear-gradient(90deg, rgba(245,247,250,.68), rgba(245,247,250,.18)); } @media (max-width: 860px) { :root[data-theme="light"] .pub-auth-page{ background: linear-gradient(0deg,var(--v2x-surf-1) 0%,var(--v2x-surf-1) 56%,rgba(245,247,250,.86) 74%,rgba(245,247,250,.26) 100%), var(--auth-bg, url("../img/kwaj/chair-lagoon-1600.webp")) center top / cover no-repeat fixed; } :root[data-theme="light"] .pub-auth-right{ background:linear-gradient(0deg,var(--v2x-surf-1) 0%,rgba(245,247,250,.98) 50%,rgba(245,247,250,.78) 74%,transparent 100%); } :root[data-theme="light"] .pub-auth-mobile-hero{ background:transparent; } } :root[data-theme="light"] .pub-auth-btn-outline:hover { background: var(--v2x-accent-tint); } /* ────────────────────────────────────────────────────────────────────────── iOS focus-zoom guard for the auth layout (CSS-only, presentation-only). The auth pages (Login/Register/Forgot/Reset) render under _LayoutV2xAuth, which loads this file — NOT public.css — so they don't inherit the floor added there. .pub-auth-input / .pub-auth-select are 13px, which makes iOS WebKit zoom the viewport on focus. Same iOS-only fix, same rationale: raise to 16px only where @supports(-webkit-touch-callout:none) matches (iOS), so desktop type is untouched; !important to beat the .pub-auth-* class size. Do NOT use maximum-scale=1 on the viewport meta (kills pinch-zoom). */ @supports (-webkit-touch-callout: none) { input:not([type=checkbox]):not([type=radio]), select, textarea { font-size: 16px !important; } }