/* 0. Stop sideways drag / horizontal overflow on mobile (a stray wide element * or 100vw block shouldn't let the page scroll right). Global safety net. */ html, body { overflow-x: hidden; } body { max-width: 100%; position: relative; } img, svg, video, canvas, iframe, table, pre, code { max-width: 100%; } /* era-ux.css — site-wide UX-quality layer. Deliberately NON-visual for the * default (mouse) experience: it only adds keyboard accessibility, respects the * user's motion preference, and provides opt-in polish utilities. No change to * the existing paper/ink university aesthetic. */ /* 1. Accessible keyboard focus rings (only on keyboard nav, never on click). * WCAG 2.2 - a major award/accessibility judging criterion. */ :where(a, button, input, select, textarea, [tabindex], summary, [role="button"]):focus-visible { outline: 2px solid #FF4F00; outline-offset: 3px; border-radius: 6px; } /* Don't show the ring on mouse/touch activation. */ :where(a, button, input, select, textarea, [tabindex], summary):focus:not(:focus-visible) { outline: none; } /* 2. Respect reduced-motion: kill non-essential animation for users who ask. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* 3. Smooth in-page anchor scrolling (only when motion is allowed). */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* 4. Skeleton shimmer utility — add class="era-skeleton" to a placeholder block * while data/images load, so loading feels instant (perceived performance). */ .era-skeleton { position: relative; overflow: hidden; background: rgba(14, 11, 8, 0.06); border-radius: 8px; color: transparent !important; } .era-skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent); animation: era-shimmer 1.4s infinite; } @media (prefers-reduced-motion: reduce) { .era-skeleton::after { animation: none; } } @keyframes era-shimmer { 100% { transform: translateX(100%); } } /* 5. Gentle inline error shake utility (add/remove class="era-shake" on invalid * fields for immediate, non-jarring feedback). */ .era-shake { animation: era-shake 0.32s ease; } @keyframes era-shake { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(2px); } 30%, 50%, 70% { transform: translateX(-4px); } 40%, 60% { transform: translateX(4px); } } /* 6. Comfortable minimum tap targets on touch (usability). */ @media (pointer: coarse) { button, a[role="button"], .btn, input[type="submit"] { min-height: 40px; } } /* 6b. Stop horizontal overflow / sideways drag on mobile (a stray wide element * elsewhere was letting the page scroll right and reveal blank space). */ html, body { overflow-x: hidden; max-width: 100%; } img, svg, video, canvas, iframe, table, pre { max-width: 100%; } /* 7. Scroll progress bar (era-ux.js injects #era-scroll-progress). */ #era-scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: #FF4F00; z-index: 9999; pointer-events: none; transition: width 0.08s linear; } /* 8. Header elevation once the page is scrolled (subtle depth cue). */ header.era-scrolled { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06); } /* 8b. Keep a sticky bottom action bar (e.g. the role "Apply" bar) clear of the * corner floating launchers (three-dots FAB bottom-left, chat/SOS bottom- * right) so they never overlap the title or the Apply button. */ #stickyApply { padding-left: 74px !important; padding-right: 74px !important; } @media (min-width: 768px) { #stickyApply { padding-left: 5vw !important; padding-right: 5vw !important; } } /* 10. Scroll-reveal — only active when era-ux.js adds .era-reveal-on to , * so content is ALWAYS visible without JS (fail-safe). GPU-only props. */ html.era-reveal-on .era-reveal-item { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease; will-change: opacity, transform; } html.era-reveal-on .era-reveal-item.era-revealed { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html.era-reveal-on .era-reveal-item { opacity: 1; transform: none; transition: none; } }