/* ========================================================================= HR Intellect — Design Enhancement Layer (enhance.css) ------------------------------------------------------------------------ Elevates polish while PRESERVING the existing brand identity: indigo #3730A3 · purple #6B46C1 · fuchsia #C026D3 accent #6366F1 · Poppins (Latin) · glassmorphism Loaded AFTER style.css so it refines — never replaces — the current look. ========================================================================= */ /* Arabic UI font — pairs with Poppins for the bilingual (ar/en) platform. */ @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800&display=swap'); :root { /* Brand palette (unchanged hues, now tokenised) */ --brand-indigo: #3730A3; --brand-purple: #6B46C1; --brand-fuchsia: #C026D3; --brand-accent: #6366F1; --brand-accent-2: #818CF8; --brand-violet: #8e2de2; /* Glass system */ --glass-bg: rgba(255,255,255,.06); --glass-bg-strong: rgba(255,255,255,.10); --glass-border: rgba(255,255,255,.14); --glass-highlight: rgba(255,255,255,.40); --glass-shadow: 0 18px 40px -18px rgba(8,3,30,.65), 0 4px 12px -6px rgba(0,0,0,.40); --ring: 0 0 0 3px rgba(129,140,248,.55); --ease: cubic-bezier(.22,.61,.36,1); } /* ========================================================================= 1. Layered "aurora" background — adds depth using ONLY brand colours. ========================================================================= */ body { background: #1b1147 !important; background-image: radial-gradient(62rem 62rem at 4% -14%, rgba(99,102,241,.60), transparent 60%), /* accent indigo */ radial-gradient(54rem 54rem at 106% -2%, rgba(217,70,239,.46), transparent 56%), /* fuchsia */ radial-gradient(60rem 60rem at 50% 122%, rgba(139,92,246,.52), transparent 62%), /* violet */ linear-gradient(155deg, #241363 0%, #3a1a85 45%, #5b1f9e 100%) !important; /* base sweep */ background-attachment: fixed !important; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* ========================================================================= 2. Typography — sharper Latin headings, real Arabic font for RTL. ========================================================================= */ h1, h2, h3, h4, h5 { letter-spacing: -.02em; } h1 { letter-spacing: -.03em; } p { line-height: 1.7; } /* Restore the brand font: the carries Tailwind's .font-sans class, whose specificity beats style.css's body{font-family:Poppins}. body.font-sans wins. */ body.font-sans { font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif; } /* Arabic (RTL) gets Tajawal — a proper Arabic UI face — ahead of Poppins. */ body.font-sans:lang(ar), [dir="rtl"] body.font-sans { font-family: 'Tajawal', 'Poppins', ui-sans-serif, sans-serif; } [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { letter-spacing: 0; font-weight: 800; } /* ========================================================================= 3. Glassmorphism refinement. ========================================================================= */ /* Every frosted surface that opts into .backdrop-filter (header, mega-menu, cards) gets a richer blur + saturation for that "real glass" feel. */ .backdrop-filter { -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); } .glass-effect { background: var(--glass-bg-strong); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); border: 1px solid var(--glass-border); border-radius: 16px; box-shadow: var(--glass-shadow); } /* Semantic card for flagship sections — restyled from faint frost into a DEFINED dark-glass panel wrapped in an animated gradient hairline border. (Applied additively in templates; brand palette only.) */ .glass-card { position: relative; background: linear-gradient(180deg, rgba(49,30,94,.62), rgba(26,16,58,.70)) !important; border: 1px solid transparent !important; border-radius: 1rem; box-shadow: 0 24px 52px -24px rgba(8,3,30,.78), inset 0 1px 0 rgba(255,255,255,.10); transition: transform .4s var(--ease), box-shadow .4s var(--ease) !important; } .glass-card::before { /* gradient hairline border (ring) */ content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; background: linear-gradient(135deg, rgba(129,140,248,.85) 0%, rgba(217,70,239,.55) 50%, rgba(99,102,241,.15) 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .8; transition: opacity .4s var(--ease); } .glass-card:hover { transform: translateY(-6px) !important; box-shadow: 0 42px 84px -28px rgba(8,3,30,.88), 0 20px 44px -16px rgba(192,38,211,.50), inset 0 1px 0 rgba(255,255,255,.16); } .glass-card:hover::before { opacity: 1; background: linear-gradient(135deg, rgba(165,180,252,1) 0%, rgba(232,121,249,.85) 50%, rgba(129,140,248,.40) 100%); } /* ========================================================================= 4. Buttons — optional polished classes (brand gradient + lift). ========================================================================= */ .btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; background: linear-gradient(135deg, #6366F1 0%, #8b5cf6 52%, #C026D3 100%); color: #fff; font-weight: 700; border-radius: 9999px; box-shadow: 0 12px 26px -10px rgba(124,58,237,.70), inset 0 1px 0 rgba(255,255,255,.25); transition: transform .25s var(--ease), box-shadow .25s var(--ease), filter .25s var(--ease); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -12px rgba(124,58,237,.85), inset 0 1px 0 rgba(255,255,255,.30); filter: brightness(1.06); } .btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; background: rgba(255,255,255,.06); color: #fff; font-weight: 600; border-radius: 9999px; border: 1.5px solid rgba(255,255,255,.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease); } .btn-ghost:hover { background: rgba(255,255,255,.14); border-color: #fff; transform: translateY(-2px); } /* ========================================================================= 4b. Hero drama — floating glow orbs, headline glow, premium CTA. ========================================================================= */ .hero-orb { position: absolute; border-radius: 9999px; filter: blur(64px); opacity: .55; pointer-events: none; z-index: 0; will-change: transform; } .hero-orb--a { width: 32rem; height: 32rem; top: -8rem; left: -6rem; background: radial-gradient(circle, #6366F1 0%, transparent 70%); animation: orbFloat 16s var(--ease) infinite; } .hero-orb--b { width: 28rem; height: 28rem; top: 1rem; right: -7rem; background: radial-gradient(circle, #D946EF 0%, transparent 70%); animation: orbFloat 21s var(--ease) infinite reverse; } .hero-orb--c { width: 24rem; height: 24rem; bottom: -10rem; left: 38%; background: radial-gradient(circle, #8b5cf6 0%, transparent 70%); animation: orbFloat 18s var(--ease) infinite; } @keyframes orbFloat { 0%, 100% { transform: translate3d(0,0,0) scale(1); } 33% { transform: translate3d(3rem,-2rem,0) scale(1.12); } 66% { transform: translate3d(-2rem,2rem,0) scale(.94); } } .hero-title { text-shadow: 0 0 44px rgba(139,92,246,.45), 0 2px 22px rgba(0,0,0,.30); } /* Subtle tech dot-grid behind the hero (masked to fade at the edges). */ .hero-grid { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px); background-size: 28px 28px; -webkit-mask-image: radial-gradient(ellipse 72% 62% at 50% 34%, #000 38%, transparent 76%); mask-image: radial-gradient(ellipse 72% 62% at 50% 34%, #000 38%, transparent 76%); } /* Gradient section headings (white -> lilac -> pink), brand-toned. */ .gradient-heading { background: linear-gradient(120deg, #ffffff 0%, #e9d5ff 45%, #f5c2ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent !important; } /* ========================================================================= Hero product mockup + bento helpers. ========================================================================= */ .hero-mock { border-radius: 1.25rem; background: linear-gradient(180deg, rgba(36,22,78,.92), rgba(20,12,46,.94)); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 50px 90px -40px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.04) inset, 0 -1px 60px -20px rgba(168,85,247,.45) inset; overflow: hidden; } .mock-bar { width: 100%; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, #a78bfa, #7c3aed 60%, #6d28d9); box-shadow: 0 0 16px -2px rgba(139,92,246,.6); transition: height .6s var(--ease); } .mock-bar.alt { background: linear-gradient(180deg, #f0abfc, #d946ef 60%, #a21caf); box-shadow: 0 0 16px -2px rgba(217,70,239,.55); } .mock-ring { width: 116px; height: 116px; border-radius: 50%; background: conic-gradient(#a78bfa 0% 92%, rgba(255,255,255,.10) 92% 100%); display: grid; place-items: center; -webkit-mask: none; } .mock-ring > div { width: 86px; height: 86px; border-radius: 50%; background: #1b1140; display: grid; place-items: center; } /* Bento feature card — modular, varied-size, gradient-edged. */ .bento { position: relative; display: flex; flex-direction: column; border-radius: 1.25rem; background: linear-gradient(180deg, rgba(49,30,94,.60), rgba(24,15,52,.72)); border: 1px solid transparent; box-shadow: 0 24px 52px -26px rgba(8,3,30,.8), inset 0 1px 0 rgba(255,255,255,.08); overflow: hidden; transition: transform .4s var(--ease), box-shadow .4s var(--ease); } .bento::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; background: linear-gradient(135deg, rgba(129,140,248,.8), rgba(217,70,239,.45) 55%, rgba(99,102,241,.12)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .85; transition: opacity .4s var(--ease); } .bento:hover { transform: translateY(-6px); box-shadow: 0 44px 88px -30px rgba(8,3,30,.9), 0 22px 48px -18px rgba(192,38,211,.5); } .bento:hover::before { opacity: 1; } /* Glow wash that follows the card's accent colour. */ .bento .bento-glow { position: absolute; width: 16rem; height: 16rem; border-radius: 9999px; filter: blur(60px); opacity: .35; top: -6rem; right: -4rem; pointer-events: none; transition: opacity .4s var(--ease); } .bento:hover .bento-glow { opacity: .6; } /* ========================================================================= Feature SHOWCASE — alternating full-width rows (replaces the card grid). ========================================================================= */ .showcase-row { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center; margin-bottom: 6rem; } .showcase-row:last-child { margin-bottom: 0; } .showcase-row.reverse .showcase-copy { order: 2; } @media (max-width: 900px) { .showcase-row { grid-template-columns: 1fr; gap: 1.75rem; margin-bottom: 4rem; } .showcase-row.reverse .showcase-copy { order: 0; } } .showcase-index { font-size: 3.5rem; font-weight: 800; line-height: 1; background: linear-gradient(180deg, rgba(167,139,250,.55), rgba(217,70,239,.10)); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: .75rem; } .showcase-ico { width: 3.25rem; height: 3.25rem; border-radius: 1rem; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 12px 26px -10px rgba(0,0,0,.5); margin-bottom: 1.25rem; } .showcase-copy h3 { font-size: 1.9rem; font-weight: 800; color: #fff; margin-bottom: .9rem; letter-spacing: -.01em; } .showcase-copy p { color: #d8cdf2; font-size: 1.05rem; line-height: 1.75; margin-bottom: 1.25rem; max-width: 30rem; } .showcase-link { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; color: #c4b5fd; } .showcase-link svg { transition: transform .25s var(--ease); } .showcase-link:hover svg { transform: translateX(4px); } /* The visual panel (reuses the gradient-border glass look). */ .mini-panel { position: relative; border-radius: 1.25rem; padding: 1.5rem; background: linear-gradient(180deg, rgba(49,30,94,.62), rgba(22,13,48,.74)); border: 1px solid transparent; overflow: hidden; box-shadow: 0 40px 80px -36px rgba(0,0,0,.75); } .mini-panel::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; background: linear-gradient(135deg, rgba(129,140,248,.8), rgba(217,70,239,.45) 55%, rgba(99,102,241,.12)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } .mini-panel .glow { position:absolute; width:14rem; height:14rem; border-radius:9999px; filter:blur(55px); opacity:.35; top:-5rem; right:-3rem; pointer-events:none; } /* small UI bits used inside the mini panels */ .mp-row { display:flex; align-items:center; justify-content:space-between; gap:.75rem; } .mp-bar { height:8px; border-radius:9999px; background:linear-gradient(90deg,#8b5cf6,#d946ef); box-shadow:0 0 12px -2px rgba(168,85,247,.6); } .mp-track { height:8px; border-radius:9999px; background:rgba(255,255,255,.08); overflow:hidden; } .mp-tag { display:inline-block; padding:.2rem .6rem; border-radius:9999px; font-size:.7rem; color:#e9d5ff; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); } .mp-dot { width:.55rem; height:.55rem; border-radius:9999px; } .mp-spark { width:.7rem; border-radius:3px 3px 1px 1px; background:linear-gradient(180deg,#a78bfa,#7c3aed); } .mp-avatar { width:2rem; height:2rem; border-radius:9999px; display:grid; place-items:center; font-size:.7rem; font-weight:700; color:#fff; } .mp-ring { width:84px; height:84px; border-radius:50%; display:grid; place-items:center; } .mp-ring > div { width:62px; height:62px; border-radius:50%; background:#190f3c; display:grid; place-items:center; } .mp-heat { width:1.5rem; height:1.5rem; border-radius:.35rem; } /* Section eyebrow pill */ .eyebrow { display:inline-block; padding:.3rem .9rem; border-radius:9999px; font-size:.8rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:#d8b4fe; background:rgba(168,85,247,.12); border:1px solid rgba(168,85,247,.30); margin-bottom:1rem; } /* ========================================================================= MOTION — reveal-driven data-viz + interactive micro-states. (emil-design-eng: strong ease-out, purposeful, press feedback, reduced-motion respected by the @media block above.) ========================================================================= */ @keyframes growX { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes growY { from { transform: scaleY(0); } to { transform: scaleY(1); } } @keyframes popIn { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } } .mp-bar { transform-origin: left center; } .mp-spark, .mock-bar { transform-origin: bottom center; } /* charts animate to life when their section scrolls in */ .animate-fade-in-up.visible .mp-bar { animation: growX .9s var(--ease) both; } .animate-fade-in-up.visible .mp-spark { animation: growY .7s var(--ease) both; } .animate-fade-in-up.visible .mock-bar { animation: growY .8s var(--ease) both; } .animate-fade-in-up.visible .mp-ring, .animate-fade-in-up.visible .mock-ring { animation: popIn .55s var(--ease) both; } /* staggered attrition sparkline */ .animate-fade-in-up.visible .mp-spark:nth-child(1){animation-delay:.04s} .animate-fade-in-up.visible .mp-spark:nth-child(2){animation-delay:.10s} .animate-fade-in-up.visible .mp-spark:nth-child(3){animation-delay:.16s} .animate-fade-in-up.visible .mp-spark:nth-child(4){animation-delay:.22s} .animate-fade-in-up.visible .mp-spark:nth-child(5){animation-delay:.28s} .animate-fade-in-up.visible .mp-spark:nth-child(6){animation-delay:.34s} .animate-fade-in-up.visible .mp-spark:nth-child(7){animation-delay:.40s} .animate-fade-in-up.visible .mp-spark:nth-child(8){animation-delay:.46s} /* staggered hero mock bar chart */ .animate-fade-in-up.visible .mock-bar:nth-child(1){animation-delay:.06s} .animate-fade-in-up.visible .mock-bar:nth-child(2){animation-delay:.13s} .animate-fade-in-up.visible .mock-bar:nth-child(3){animation-delay:.20s} .animate-fade-in-up.visible .mock-bar:nth-child(4){animation-delay:.27s} .animate-fade-in-up.visible .mock-bar:nth-child(5){animation-delay:.34s} .animate-fade-in-up.visible .mock-bar:nth-child(6){animation-delay:.41s} .animate-fade-in-up.visible .mock-bar:nth-child(7){animation-delay:.48s} /* interactive micro-states */ .btn-cta:active, .btn-ghost:active, .btn-primary:active { transform: translateY(0) scale(.97); } .mini-panel { transition: transform .35s var(--ease), box-shadow .35s var(--ease); will-change: transform; } .mini-panel:hover { transform: translateY(-5px); box-shadow: 0 54px 96px -40px rgba(0,0,0,.82), 0 22px 54px -20px rgba(168,85,247,.42); } .showcase-ico { transition: transform .4s var(--ease); } .showcase-row:hover .showcase-ico { transform: translateY(-3px) rotate(-5deg) scale(1.05); } .hero-mock { transition: transform .4s var(--ease); } .hero-mock:hover { transform: translateY(-4px); } /* stronger, snappier reveal easing (overrides the inline 0.8s ease-out) */ .animate-fade-in-up, .animate-fade-in-down { transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1) !important; } /* top scroll-progress indicator */ #scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; z-index: 100; pointer-events: none; background: linear-gradient(90deg, #6366F1, #a855f7, #D946EF); box-shadow: 0 0 12px rgba(168,85,247,.7); } /* ========================================================================= FOOTER — blends into the aurora, matches the new identity. ========================================================================= */ .site-footer { position: relative; overflow: hidden; background: linear-gradient(to bottom, rgba(20,12,46,0) 0%, rgba(18,10,42,.7) 42%, rgba(13,7,32,.96) 100%); } .footer-h { font-size: .78rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #c4b5fd; margin-bottom: 1.1rem; } .footer-link { display: inline-block; color: #cbb8ef; font-size: .95rem; transition: color .2s var(--ease), transform .2s var(--ease); } .footer-link:hover { color: #fff; transform: translateX(3px); } [dir="rtl"] .footer-link:hover { transform: translateX(-3px); } .footer-social { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 9999px; color: #d8cdf2; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease), border-color .25s var(--ease); } .footer-social:hover { color: #fff; transform: translateY(-3px); background: linear-gradient(135deg, rgba(99,102,241,.5), rgba(217,70,239,.4)); border-color: rgba(216,180,254,.5); } .footer-social svg { width: 1.15rem; height: 1.15rem; } /* ========================================================================= INNER PAGES — safe global polish. Element-level specificity: any Tailwind/utility class on an element wins, so this only affects raw, otherwise-unstyled controls (no breakage). ========================================================================= */ /* readable dropdown options (the native popup is light) */ select option, optgroup { color: #1a1030; background: #ffffff; } /* sensible dark-glass default for un-classed inputs on inner tool pages */ .glass-input, input.form-input, select.form-input, textarea.form-input { color: #fff; background-color: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); border-radius: .75rem; padding: .7rem 1rem; } .glass-input::placeholder { color: rgba(255,255,255,.5); } /* reusable gradient page-title utility (apply to inner-page headings) */ .page-title { background: linear-gradient(120deg, #ffffff 0%, #e9d5ff 45%, #f5c2ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* generic content panels on inner pages that opt in */ .panel-glass { position: relative; background: linear-gradient(180deg, rgba(49,30,94,.55), rgba(24,15,52,.66)); border: 1px solid rgba(255,255,255,.12); border-radius: 1.25rem; box-shadow: 0 24px 52px -26px rgba(8,3,30,.7); } /* tables on report/analytics pages */ .panel-glass table th { color: #c4b5fd; } .panel-glass table td { color: #e6def7; } /* Premium gradient CTA with a sweeping shine. */ .btn-cta { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; background: linear-gradient(135deg, #818CF8 0%, #8b5cf6 46%, #C026D3 100%); color: #fff !important; font-weight: 700; box-shadow: 0 16px 36px -10px rgba(168,85,247,.70), inset 0 1px 0 rgba(255,255,255,.35); transition: transform .25s var(--ease), box-shadow .25s var(--ease), filter .25s var(--ease); } .btn-cta::after { content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent); transform: skewX(-20deg); transition: left .7s var(--ease); } .btn-cta:hover::after { left: 130%; } .btn-cta:hover { transform: translateY(-3px); filter: brightness(1.07); box-shadow: 0 22px 46px -12px rgba(168,85,247,.85), inset 0 1px 0 rgba(255,255,255,.40); } /* ========================================================================= 5. Accessibility & motion. ========================================================================= */ html { scroll-behavior: smooth; } :focus-visible { outline: none; box-shadow: var(--ring); border-radius: 10px; } /* Respect users who reduce motion — also guarantees scroll-reveal content is never stuck invisible if its IntersectionObserver doesn't fire. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .animate-fade-in-up, .animate-fade-in-down { opacity: 1 !important; transform: none !important; } } /* ========================================================================= 6. Scrollbar + text selection (brand-tinted). ========================================================================= */ ::selection { background: rgba(192,38,211,.45); color: #fff; } * { scrollbar-width: thin; scrollbar-color: rgba(129,140,248,.5) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--brand-accent), var(--brand-violet)); border-radius: 9999px; border: 2px solid transparent; background-clip: content-box; } /* ========================================================================= 7. Header refinement — crisper floating glass nav. ========================================================================= */ header.fixed { border-bottom: 1px solid rgba(255,255,255,.08); box-shadow: 0 8px 30px -12px rgba(8,3,30,.50); } /* ========================================================================= 8. Form fields — consistent, focus-visible inputs across auth/contact. ========================================================================= */ input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), textarea, select { transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease); } input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px rgba(129,140,248,.35); } /* Auth/contact pages style their fields with .input-field but use a very faint resting border (rgba white .10) — raise contrast for readability. The inline page