/** * Platform skin: iOS (Human Interface Guidelines) * Only token overrides + details CSS variables can't express. * Activated by data-platform="ios" on (platform-detect). */ :root[data-platform='ios'] { --sp-font-system: -apple-system, 'SF Pro Text', system-ui, sans-serif; --sp-radius-control: 0.625rem; /* 10px, continuous-corner feel */ --sp-radius-card: 0.75rem; --sp-radius-sheet: 0.625rem 0.625rem 0 0; --sp-motion-easing: cubic-bezier(0.32, 0.72, 0, 1); /* spring-like */ --sp-motion-duration: 350ms; --sp-touch-target: 44px; --sp-backdrop-blur: 20px; } [data-platform='ios'] body { font-family: var(--sp-font-system); -webkit-tap-highlight-color: transparent; } /* iOS has no hover: neutralize hover effects on touch */ @media (hover: none) { [data-platform='ios'] a:hover, [data-platform='ios'] .btn:hover { filter: none; } }