/* ========================================================================== Awan (أوان) — Auth pages (login & signup) -------------------------------------------------------------------------- Self-contained styles for public/site/login.html and signup.html. Consumes design tokens from tokens.css. RTL-first, dark "Desert Night" default. The brand panel stays dark in both themes by design. ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--awan-bg-base); color: var(--awan-text-primary); font-family: var(--awan-font-ui); font-size: var(--awan-text-md); line-height: var(--awan-leading-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; min-height: 100vh; } /* The auth shell is always Desert Night — even when the marketing site was left in light theme (awan-theme persists in localStorage and site.js sets data-theme="light" on ). Pinning the semantic tokens on keeps the brand panel and the form side in one dark world. */ body { --awan-bg-base: var(--awan-night-900); --awan-bg-surface: var(--awan-night-800); --awan-bg-raised: var(--awan-night-700); --awan-bg-overlay: var(--awan-night-600); --awan-bg-input: var(--awan-night-700); --awan-border: var(--awan-night-500); --awan-border-strong: var(--awan-night-400); --awan-text-primary: var(--awan-sand-100); --awan-text-secondary: var(--awan-sand-300); --awan-text-muted: var(--awan-sand-500); --awan-text-on-accent: #0E1A14; --awan-accent: var(--awan-green-500); --awan-accent-hover: var(--awan-green-400); --awan-accent-pressed: var(--awan-green-600); --awan-accent-soft: var(--awan-green-soft); --awan-gold: var(--awan-gold-400); --awan-gold-hover: var(--awan-gold-300); --awan-gold-accent-soft: var(--awan-gold-soft); --awan-success: var(--awan-green-400); --awan-success-soft: rgba(76, 187, 146, 0.14); --awan-danger: var(--awan-red-500); --awan-danger-soft: var(--awan-red-soft); --awan-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35); --awan-shadow-2: 0 4px 12px rgba(0, 0, 0, 0.40); --awan-shadow-3: 0 12px 32px rgba(0, 0, 0, 0.50); --awan-shadow-focus: 0 0 0 3px rgba(46, 158, 119, 0.35); --awan-shadow-focus-danger: 0 0 0 3px rgba(226, 96, 77, 0.35); color-scheme: dark; } h1, h2 { font-family: var(--awan-font-display); line-height: var(--awan-leading-heading); font-weight: var(--awan-weight-bold); margin: 0; } a { color: inherit; text-decoration: none; } img, svg { max-width: 100%; } :focus-visible { outline: none; box-shadow: var(--awan-shadow-focus); border-radius: var(--awan-radius-sm); } /* -------------------------------------------------------------------------- Sadu weave band — brand signature divider (inline SVG, low opacity). -------------------------------------------------------------------------- */ .sadu { height: 14px; width: 100%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='14' viewBox='0 0 48 14'%3E%3Cpath d='M0 7 L6 1 L12 7 L6 13 Z M12 7 L18 1 L24 7 L18 13 Z M24 7 L30 1 L36 7 L30 13 Z M36 7 L42 1 L48 7 L42 13 Z' fill='none' stroke='%232E9E77' stroke-width='1'/%3E%3Ccircle cx='24' cy='7' r='1.4' fill='%23D9A83C'/%3E%3C/svg%3E"); background-repeat: repeat-x; background-position: center; } /* -------------------------------------------------------------------------- Buttons -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--awan-space-2); font-family: var(--awan-font-ui); font-size: var(--awan-text-base); font-weight: var(--awan-weight-semibold); border: 1px solid transparent; border-radius: var(--awan-radius-md); padding: 0.65rem 1.25rem; cursor: pointer; transition: transform var(--awan-duration-fast) var(--awan-ease), background var(--awan-duration-fast) var(--awan-ease), border-color var(--awan-duration-fast) var(--awan-ease), box-shadow var(--awan-duration-fast) var(--awan-ease); } .btn:active { transform: translateY(1px); } .btn-lg { width: 100%; padding-block: 0.85rem; font-size: var(--awan-text-md); border-radius: 12px; } .btn-primary { background: linear-gradient(160deg, var(--awan-accent-hover), var(--awan-accent) 55%, var(--awan-accent-pressed)); color: var(--awan-text-on-accent); box-shadow: 0 6px 18px rgba(46, 158, 119, 0.28), var(--awan-shadow-1); } .btn-primary:hover { filter: brightness(1.07); transform: translateY(-1px); box-shadow: 0 10px 24px rgba(46, 158, 119, 0.34), var(--awan-shadow-1); } .btn-ghost { background: transparent; color: var(--awan-text-secondary); border-color: var(--awan-border); } .btn-ghost:hover { color: var(--awan-text-primary); border-color: var(--awan-border-strong); background: var(--awan-bg-raised); } /* Loading state (auth.js sets aria-busy on submit) */ .btn[aria-busy="true"] { pointer-events: none; opacity: 0.85; } .btn[aria-busy="true"]::after { content: ""; width: 1em; height: 1em; border-radius: var(--awan-radius-full); border: 2px solid currentColor; border-block-start-color: transparent; animation: auth-spin 0.7s linear infinite; } /* -------------------------------------------------------------------------- Split-screen layout -------------------------------------------------------------------------- */ .auth { display: grid; grid-template-columns: minmax(420px, 46%) 1fr; min-height: 100vh; } /* -------------------------------------------------------------------------- Brand panel — always deep Desert Night, in both themes. -------------------------------------------------------------------------- */ .auth-brand { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: var(--awan-space-6); padding: var(--awan-space-7) var(--awan-space-7) var(--awan-space-8); color: var(--awan-sand-100); background: radial-gradient(120% 90% at 85% -10%, rgba(46, 158, 119, 0.22), transparent 55%), radial-gradient(90% 70% at 10% 110%, rgba(217, 168, 60, 0.14), transparent 55%), linear-gradient(170deg, var(--awan-night-800) 0%, var(--awan-night-900) 45%, var(--awan-night-950) 100%); } /* Ambient floating glows */ .auth-orb { position: absolute; border-radius: var(--awan-radius-full); filter: blur(70px); pointer-events: none; opacity: 0.55; } .auth-orb-green { width: 340px; height: 340px; background: rgba(46, 158, 119, 0.35); inset-block-start: -90px; inset-inline-start: -80px; animation: auth-float 11s ease-in-out infinite; } .auth-orb-gold { width: 280px; height: 280px; background: rgba(217, 168, 60, 0.26); inset-block-end: 8%; inset-inline-end: -70px; animation: auth-float 14s ease-in-out -4s infinite reverse; } .auth-brand > *:not(.auth-orb) { position: relative; z-index: 1; } .brand { display: inline-flex; align-items: center; gap: var(--awan-space-3); font-family: var(--awan-font-display); font-weight: var(--awan-weight-bold); font-size: var(--awan-text-2xl); color: var(--awan-sand-100); width: fit-content; } .brand .mark { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 14px; color: var(--awan-green-300); background: var(--awan-green-soft); border: 1px solid rgba(46, 158, 119, 0.35); box-shadow: inset 0 1px 0 rgba(242, 237, 228, 0.06); } .brand .mark svg { stroke: currentColor; fill: none; } .brand .mark svg circle { fill: var(--awan-gold-400); stroke: none; } .auth-brand-copy { max-width: 40ch; display: flex; flex-direction: column; gap: var(--awan-space-4); } .auth-brand-copy h2 { font-size: clamp(1.7rem, 2.6vw, 2.35rem); line-height: 1.45; color: var(--awan-sand-100); } /* Rotating value line — CSS-only cycle, 3 lines × 4s. */ .value-rotator { position: relative; height: 2.2em; margin: 0; font-size: var(--awan-text-md); font-weight: var(--awan-weight-medium); color: var(--awan-green-300); } .value-rotator span { position: absolute; inset-inline-start: 0; inset-block-start: 0; opacity: 0; transform: translateY(10px); animation: auth-rotate-value 12s var(--awan-ease) infinite; } .value-rotator span:nth-child(2) { animation-delay: 4s; } .value-rotator span:nth-child(3) { animation-delay: 8s; } /* Chat mockup */ .phone { margin-block-start: var(--awan-space-4); border-radius: var(--awan-radius-xl); background: rgba(18, 16, 13, 0.55); border: 1px solid rgba(74, 66, 52, 0.6); box-shadow: var(--awan-shadow-3), inset 0 1px 0 rgba(242, 237, 228, 0.05); backdrop-filter: blur(6px); overflow: hidden; max-width: 380px; } .phone-top { display: flex; align-items: center; gap: var(--awan-space-3); padding: var(--awan-space-3) var(--awan-space-4); border-block-end: 1px solid rgba(74, 66, 52, 0.5); background: rgba(27, 24, 19, 0.7); } .phone-top .avatar { width: 38px; height: 38px; border-radius: var(--awan-radius-full); display: grid; place-items: center; font-weight: var(--awan-weight-bold); color: var(--awan-text-on-accent); background: linear-gradient(150deg, var(--awan-green-400), var(--awan-green-600)); box-shadow: 0 0 0 2px rgba(46, 158, 119, 0.3); } .phone-top .who { line-height: 1.35; } .phone-top .who b { display: block; font-size: var(--awan-text-base); font-weight: var(--awan-weight-semibold); } .phone-top .who span { font-size: var(--awan-text-xs); color: var(--awan-green-300); } .phone-body { display: flex; flex-direction: column; gap: var(--awan-space-2); padding: var(--awan-space-4); min-height: 220px; } .bubble { position: relative; max-width: 82%; padding: var(--awan-space-2) var(--awan-space-3); border-radius: 14px; font-size: var(--awan-text-sm); line-height: var(--awan-leading-caption); padding-block-end: 1.35em; opacity: 0; transform: translateY(10px); animation: auth-bubble-in var(--awan-duration-slow) var(--awan-ease) forwards; } .bubble.them { align-self: flex-start; background: var(--awan-night-600); color: var(--awan-sand-200); border-start-start-radius: 4px; } .bubble.us { align-self: flex-end; background: linear-gradient(160deg, var(--awan-green-600), var(--awan-green-700)); color: var(--awan-sand-100); border-start-end-radius: 4px; } .bubble .time { position: absolute; inset-block-end: 3px; inset-inline-end: 10px; font-size: 0.65rem; opacity: 0.6; } .bubble .confirm { display: inline-block; margin-inline-start: var(--awan-space-2); font-size: 0.68rem; font-weight: var(--awan-weight-semibold); color: var(--awan-green-300); background: rgba(12, 10, 8, 0.35); border-radius: var(--awan-radius-full); padding: 1px 8px; } .bubble:nth-child(1) { animation-delay: 0.5s; } .bubble:nth-child(2) { animation-delay: 1.3s; } .bubble:nth-child(3) { animation-delay: 2.1s; } .bubble:nth-child(4) { animation-delay: 2.9s; } /* Trust chips */ .auth-trust { margin-block-start: auto; display: flex; flex-wrap: wrap; gap: var(--awan-space-3); color: var(--awan-sand-300); font-size: var(--awan-text-sm); } .auth-trust span { display: inline-flex; align-items: center; gap: 6px; padding: var(--awan-space-2) var(--awan-space-3); border-radius: var(--awan-radius-full); border: 1px solid rgba(74, 66, 52, 0.6); background: rgba(27, 24, 19, 0.55); } .auth-trust b { color: var(--awan-gold-300); font-weight: var(--awan-weight-bold); } .auth-brand .sadu { position: absolute; inset-block-end: 0; inset-inline: 0; opacity: 0.4; z-index: 1; } /* -------------------------------------------------------------------------- Form panel -------------------------------------------------------------------------- */ .auth-form-wrap { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--awan-space-7) var(--awan-space-5); background: /* Palm-green bleed bridging the seam with the brand panel (which sits at the inline-start / right edge in RTL) */ radial-gradient(60% 70% at 100% 45%, rgba(46, 158, 119, 0.10), transparent 65%), radial-gradient(70% 50% at 50% 0%, var(--awan-accent-soft), transparent 70%), var(--awan-bg-base); } /* Back-home link — a proper ghost pill, not a lost corner text link */ .auth-home { position: absolute; inset-block-start: var(--awan-space-5); inset-inline-start: var(--awan-space-6); display: inline-flex; align-items: center; gap: var(--awan-space-2); font-size: var(--awan-text-sm); font-weight: var(--awan-weight-medium); color: var(--awan-text-secondary); padding: 0.5rem 1rem; border: 1px solid var(--awan-border); border-radius: var(--awan-radius-full); background: transparent; transition: color var(--awan-duration-fast) var(--awan-ease), border-color var(--awan-duration-fast) var(--awan-ease), background var(--awan-duration-fast) var(--awan-ease); } .auth-home::before { content: "→"; line-height: 1; } .auth-home:hover { color: var(--awan-text-primary); border-color: var(--awan-border-strong); background: var(--awan-bg-raised); } /* Compact wordmark shown only when the brand panel is hidden (mobile). */ .auth-mobile-brand { display: none; margin-block-end: var(--awan-space-5); } .auth-card { width: 100%; max-width: 460px; background: var(--awan-bg-surface); border: 1px solid var(--awan-border); border-radius: var(--awan-radius-xl); box-shadow: var(--awan-shadow-3), inset 0 1px 0 rgba(242, 237, 228, 0.04); padding: var(--awan-space-7) var(--awan-space-6); animation: auth-fade-up 0.55s var(--awan-ease) both; } /* Staggered entrance for card children */ .auth-card > * { animation: auth-fade-up 0.5s var(--awan-ease) both; } .auth-card > *:nth-child(1) { animation-delay: 0.08s; } .auth-card > *:nth-child(2) { animation-delay: 0.14s; } .auth-card > *:nth-child(3) { animation-delay: 0.2s; } .auth-card > *:nth-child(4) { animation-delay: 0.26s; } .auth-card > *:nth-child(5) { animation-delay: 0.32s; } .auth-card > *:nth-child(6) { animation-delay: 0.38s; } .auth-card > *:nth-child(7) { animation-delay: 0.44s; } .auth-card.shake { animation: auth-shake 0.45s var(--awan-ease); } /* When GSAP loaded, auth.js takes over the entrance — the CSS fallback animations below are switched off so elements never animate twice. */ .gsap-on .auth-card, .gsap-on .auth-card > *, .gsap-on .bubble { animation: none; } .auth-top-link { font-size: var(--awan-text-sm); color: var(--awan-text-secondary); margin-block-end: var(--awan-space-5); } .auth-top-link a { color: var(--awan-accent-hover); font-weight: var(--awan-weight-semibold); } .auth-top-link a:hover { text-decoration: underline; } .auth-card h1 { font-size: var(--awan-text-2xl); margin-block-end: var(--awan-space-2); } .auth-card .lede { color: var(--awan-text-secondary); margin: 0 0 var(--awan-space-6); } /* Signup progress steps (visual only — payload unchanged). Circles sit on a shared track; a green fill (--step-progress, driven by auth.js) grows along it as steps complete, and the current step carries a green ring with a subtle pulse. */ .auth-steps { position: relative; display: flex; gap: var(--awan-space-2); list-style: none; margin: 0 0 var(--awan-space-6); padding: 0; --step-progress: 0%; } /* Track between the outer circle centres (three equal steps → 1/6 … 5/6) */ .auth-steps::before, .auth-steps::after { content: ""; position: absolute; inset-block-start: 10px; height: 2px; border-radius: var(--awan-radius-full); } .auth-steps::before { inset-inline: calc(100% / 6); background: var(--awan-border); } .auth-steps::after { inset-inline-start: calc(100% / 6); width: var(--step-progress); max-width: calc(100% - 100% / 3); background: var(--awan-accent); transition: width var(--awan-duration-slow) var(--awan-ease); } .auth-steps .step { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--awan-space-2); font-size: var(--awan-text-xs); color: var(--awan-text-muted); transition: color var(--awan-duration-base) var(--awan-ease); } .auth-steps .dot { width: 22px; height: 22px; flex: none; border-radius: var(--awan-radius-full); border: 2px solid var(--awan-border-strong); background: var(--awan-bg-base); display: grid; place-items: center; font-size: 0.6rem; transition: background var(--awan-duration-base) var(--awan-ease), border-color var(--awan-duration-base) var(--awan-ease), box-shadow var(--awan-duration-base) var(--awan-ease); } /* Current step: green ring + calm pulse (animation off = static ring) */ .auth-steps .step.active { color: var(--awan-text-primary); } .auth-steps .step.active .dot { border-color: var(--awan-accent); box-shadow: 0 0 0 3px var(--awan-accent-soft); animation: auth-step-pulse 2.2s var(--awan-ease) infinite; } .auth-steps .step.done { color: var(--awan-success); } .auth-steps .step.done .dot { background: var(--awan-accent); border-color: var(--awan-accent); } .auth-steps .step.done .dot::after { content: "✓"; color: var(--awan-text-on-accent); font-weight: var(--awan-weight-bold); line-height: 1; } /* -------------------------------------------------------------------------- Fields -------------------------------------------------------------------------- */ .field { margin-block-end: var(--awan-space-4); } .field label { display: block; font-size: var(--awan-text-sm); font-weight: var(--awan-weight-medium); color: var(--awan-text-secondary); margin-block-end: var(--awan-space-2); } .field input { width: 100%; font-family: var(--awan-font-ui); font-size: var(--awan-text-base); color: var(--awan-text-primary); background: var(--awan-bg-input); border: 1px solid var(--awan-border); border-radius: 12px; padding: 0.75rem 1rem; transition: border-color var(--awan-duration-fast) var(--awan-ease), box-shadow var(--awan-duration-fast) var(--awan-ease), background var(--awan-duration-fast) var(--awan-ease); } .field input:hover { border-color: var(--awan-border-strong); } .field input::placeholder { color: var(--awan-text-muted); } .field input:focus { outline: none; border-color: var(--awan-accent); box-shadow: var(--awan-shadow-focus); } /* Keep dark-theme legibility when the browser autofills */ .field input:-webkit-autofill { -webkit-text-fill-color: var(--awan-text-primary); box-shadow: 0 0 0 1000px var(--awan-bg-input) inset; transition: background-color 9999s ease-in-out 0s; } /* Password wrapper + visibility toggle. The wrap is pinned to LTR so inset-inline-end always lands on the right edge — matching the dir="ltr" password input inside it. */ .input-wrap { position: relative; direction: ltr; } .input-wrap input { padding-inline-end: 3rem; } .pass-toggle { position: absolute; inset-block-start: 50%; inset-inline-end: 6px; transform: translateY(-50%); display: grid; place-items: center; width: 36px; height: 36px; border: none; border-radius: var(--awan-radius-md); background: transparent; color: var(--awan-text-muted); cursor: pointer; transition: color var(--awan-duration-fast) var(--awan-ease), background var(--awan-duration-fast) var(--awan-ease); } .pass-toggle:hover { color: var(--awan-text-primary); background: var(--awan-bg-overlay); } .pass-toggle svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .pass-toggle .icon-eye-off { display: none; } .pass-toggle[aria-pressed="true"] .icon-eye { display: none; } .pass-toggle[aria-pressed="true"] .icon-eye-off { display: block; } /* Inline validation states */ .field .hint { display: block; font-size: var(--awan-text-xs); color: var(--awan-text-muted); margin-block-start: var(--awan-space-2); } .field-error { display: block; font-size: var(--awan-text-xs); color: var(--awan-danger); margin-block-start: var(--awan-space-2); animation: auth-fade-up var(--awan-duration-base) var(--awan-ease) both; } .field.is-invalid input { border-color: var(--awan-danger); } .field.is-invalid input:focus { box-shadow: var(--awan-shadow-focus-danger); } .field.is-valid input { border-color: var(--awan-accent); padding-inline-end: 2.6rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234CBB92' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; /* RTL inputs: logical inline-end is the left edge */ background-position: left 0.9rem center; } /* LTR inputs (email, phone, password): inline-end is the right edge */ .field.is-valid input[dir="ltr"] { background-position: right 0.9rem center; } /* The password toggle owns the inline-end corner of its input */ .field.is-valid .input-wrap input { background-image: none; padding-inline-end: 3rem; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--awan-space-3); } /* -------------------------------------------------------------------------- Form-level message, actions, footnotes -------------------------------------------------------------------------- */ .auth-msg { display: none; border-radius: 12px; padding: var(--awan-space-3) var(--awan-space-4); font-size: var(--awan-text-sm); margin-block-end: var(--awan-space-4); } .auth-msg.show { display: block; animation: auth-fade-up var(--awan-duration-base) var(--awan-ease) both; } .auth-msg.error { background: var(--awan-danger-soft); color: var(--awan-danger); } .auth-msg.ok { background: var(--awan-success-soft); color: var(--awan-success); } .auth-actions { margin-block-start: var(--awan-space-5); display: flex; flex-direction: column; gap: var(--awan-space-3); } .auth-alt { text-align: center; font-size: var(--awan-text-sm); color: var(--awan-text-secondary); margin-block: var(--awan-space-5) 0; } .auth-alt a { color: var(--awan-accent-hover); font-weight: var(--awan-weight-semibold); } .auth-alt a:hover { text-decoration: underline; } .legal { text-align: center; font-size: var(--awan-text-xs); color: var(--awan-text-muted); margin-block: var(--awan-space-4) 0; } .legal a { text-decoration: underline; } .legal a:hover { color: var(--awan-text-secondary); } /* -------------------------------------------------------------------------- Keyframes -------------------------------------------------------------------------- */ @keyframes auth-fade-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @keyframes auth-float { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(28px, -22px) scale(1.08); } } @keyframes auth-bubble-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes auth-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-9px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(4px); } } @keyframes auth-spin { to { transform: rotate(360deg); } } @keyframes auth-step-pulse { 0%, 100% { box-shadow: 0 0 0 3px var(--awan-accent-soft); } 50% { box-shadow: 0 0 0 7px var(--awan-accent-soft); } } /* 3 lines × 4s visible window inside a 12s cycle */ @keyframes auth-rotate-value { 0% { opacity: 0; transform: translateY(10px); } 4%, 29% { opacity: 1; transform: translateY(0); } 33.33%, 100% { opacity: 0; transform: translateY(-10px); } } /* -------------------------------------------------------------------------- Responsive — brand panel collapses, compact wordmark takes over -------------------------------------------------------------------------- */ @media (max-width: 960px) { .auth { grid-template-columns: 1fr; } .auth-brand { display: none; } .auth-form-wrap { min-height: 100vh; padding-block: var(--awan-space-7); } .auth-mobile-brand { display: inline-flex; font-size: var(--awan-text-xl); } .auth-home { position: static; margin-block-end: var(--awan-space-4); } } @media (max-width: 520px) { .auth-card { padding: var(--awan-space-6) var(--awan-space-4); } .field-row { grid-template-columns: 1fr; gap: 0; } } /* -------------------------------------------------------------------------- Reduced motion — every animation off, content fully visible. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .auth-card, .auth-card > *, .bubble { opacity: 1; transform: none; } /* Rotator falls back to its first line, statically */ .value-rotator span { display: none; } .value-rotator span:first-child { display: block; opacity: 1; transform: none; } }