/* Pleiara Studio — landing page styles Vanilla CSS. Theme follows prefers-color-scheme; language follows . */ /* ── Animations ─────────────────────────────────────────────── */ @keyframes pl-twinkle { 0% { opacity: var(--pl-twinkle-min, 0.2); transform: scale(0.85); } 100% { opacity: 1; transform: scale(1.15); } } @keyframes pl-sparkle { 0%, 100% { transform: rotate(0deg) scale(1); opacity: 0.85; } 50% { transform: rotate(45deg) scale(1.08); opacity: 1; } } @keyframes pl-fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } @keyframes pl-foot-arrow { 0% { transform: translateY(0); opacity: 0.5; } 100% { transform: translateY(4px); opacity: 1; } } /* ── Reset / base ───────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { scroll-behavior: smooth; } :root { color-scheme: dark light; /* Dark theme — default */ --pl-bg: #0B1324; --pl-bg-2: #141D3A; --pl-bg-3: #1E2A5A; --pl-fg: #F5F7FF; --pl-fg-2: #B9C5E6; --pl-fg-3: #6F7C9E; --pl-accent: #6D88FF; --pl-accent-soft: #C3B6FF; --pl-border: rgba(245,247,255,0.10); --pl-border-strong: rgba(245,247,255,0.22); --pl-card: rgba(245,247,255,0.025); --pl-card-strong: rgba(245,247,255,0.05); --pl-twinkle-min: 0.15; --pl-noise-blend: overlay; --pl-btn-fg: #0B1324; --pl-shadow-glow: 0 0 32px rgba(109,136,255,0.35); --pl-shadow-glow-strong: 0 0 48px rgba(109,136,255,0.55); } @media (prefers-color-scheme: light) { :root { --pl-bg: #EEF2FA; --pl-bg-2: #E2E8F4; --pl-bg-3: #D8DEE9; --pl-fg: #141D3A; --pl-fg-2: #4E5A78; --pl-fg-3: #8893AE; --pl-border: rgba(20,29,58,0.10); --pl-border-strong: rgba(20,29,58,0.22); --pl-card: rgba(20,29,58,0.025); --pl-card-strong: rgba(20,29,58,0.05); --pl-twinkle-min: 0.10; --pl-noise-blend: multiply; --pl-btn-fg: #F5F7FF; } } body { background: var(--pl-bg); color: var(--pl-fg); font-family: 'Manrope', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-feature-settings: 'ss01', 'ss02'; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overscroll-behavior: none; position: relative; min-height: 100vh; isolation: isolate; overflow-x: hidden; } html[lang="ko"] body { font-family: 'Pretendard', 'Manrope', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; } /* Korean: avoid breaking inside a 어절 (whitespace-bounded run). */ html[lang="ko"] .pl-section-title, html[lang="ko"] .pl-section-body, html[lang="ko"] .pl-hero-title, html[lang="ko"] .pl-hero-sub, html[lang="ko"] .pl-philo-card-title, html[lang="ko"] .pl-philo-card-body, html[lang="ko"] .pl-stat-v, html[lang="ko"] .pl-product-star-id, html[lang="ko"] .pl-product-star-body, html[lang="ko"] .pl-story-quote, html[lang="ko"] .pl-eyebrow, html[lang="ko"] .pl-contact-card-v { word-break: keep-all; } /* ── Bilingual visibility ───────────────────────────────────── */ html[lang="en"] [data-lang="ko"] { display: none !important; } html[lang="ko"] [data-lang="en"] { display: none !important; } /* ── Background layers ──────────────────────────────────────── */ .pl-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; } .pl-bg-grad { position: absolute; inset: 0; background: radial-gradient(80% 50% at 30% 8%, rgba(109,136,255,0.18), transparent 60%), radial-gradient(60% 40% at 80% 22%, rgba(195,182,255,0.12), transparent 65%), radial-gradient(70% 50% at 50% 100%, rgba(143,168,255,0.08), transparent 60%), linear-gradient(180deg, var(--pl-bg) 0%, var(--pl-bg-2) 40%, var(--pl-bg) 100%); } @media (prefers-color-scheme: light) { .pl-bg-grad { background: radial-gradient(80% 50% at 30% 8%, rgba(109,136,255,0.16), transparent 60%), radial-gradient(60% 40% at 80% 22%, rgba(195,182,255,0.18), transparent 65%), linear-gradient(180deg, var(--pl-bg) 0%, var(--pl-bg-3) 100%); } } .pl-bg-noise { position: absolute; inset: 0; opacity: 0.5; mix-blend-mode: var(--pl-noise-blend); background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 3px 3px; } /* ── Wordmark ───────────────────────────────────────────────── */ .pl-wordmark { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; } .pl-wordmark-sm { gap: 8px; } .pl-wordmark-text { display: flex; flex-direction: column; line-height: 1; gap: 0.18em; color: var(--pl-fg); } .pl-wordmark-name { font-family: 'Manrope', 'Pretendard', sans-serif; font-weight: 200; letter-spacing: 0.02em; line-height: 0.95; font-size: 28px; color: var(--pl-fg); text-shadow: 0 0 18px rgba(245,247,255,0.25); } @media (prefers-color-scheme: light) { .pl-wordmark-name { text-shadow: none; } } .pl-wordmark-sub { font-family: 'Manrope', sans-serif; font-weight: 400; text-transform: uppercase; font-size: 11px; letter-spacing: 0.35em; text-indent: 0.35em; color: var(--pl-fg-2); } .pl-wordmark-sm .pl-wordmark-name { font-size: 14px; } .pl-wordmark-sm .pl-wordmark-sub { font-size: 7px; letter-spacing: 0.3em; } .pl-mark { color: var(--pl-fg); display: block; flex-shrink: 0; } /* ── Nav ────────────────────────────────────────────────────── */ .pl-nav { position: relative; z-index: 50; padding: clamp(18px, 2.4vw, 28px) 0; } .pl-nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(20px, 4.5vw, 64px); max-width: 1440px; margin: 0 auto; gap: 24px; } .pl-nav-links { display: flex; gap: 32px; align-items: center; font-size: 13px; font-weight: 400; letter-spacing: 0.02em; } .pl-nav-links a { color: var(--pl-fg-2); text-decoration: none; transition: color 0.2s; position: relative; padding: 6px 2px; } .pl-nav-links a:hover { color: var(--pl-fg); } .pl-nav-links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 0.25s; } .pl-nav-links a:hover::after { transform: scaleX(1); } .pl-nav-right { display: flex; gap: 12px; align-items: center; } .pl-lang-btn { background: transparent; border: 1px solid var(--pl-border); color: var(--pl-fg-2); font-family: inherit; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500; padding: 8px 12px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: all 0.2s; } .pl-lang-btn:hover { color: var(--pl-fg); border-color: var(--pl-border-strong); } .pl-lang-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.7; } .pl-nav-cta { font-size: 12px; font-weight: 500; letter-spacing: 0.04em; text-decoration: none; padding: 9px 16px; border: 1px solid var(--pl-accent); color: var(--pl-accent); border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; transition: all 0.2s; } .pl-nav-cta:hover { transform: translateY(-1px); } .pl-menu-btn { background: transparent; border: 1px solid var(--pl-border); width: 38px; height: 38px; border-radius: 10px; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; color: var(--pl-fg); } .pl-menu-btn span { width: 14px; height: 1px; background: currentColor; transition: transform 0.25s, opacity 0.25s; } /* ── Section base ───────────────────────────────────────────── */ .pl-section { position: relative; z-index: 1; } .pl-section-inner { max-width: 1280px; margin: 0 auto; padding: clamp(80px, 10vw, 140px) clamp(20px, 4.5vw, 64px); position: relative; } .pl-section-eyebrow { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--pl-fg-3); font-weight: 500; margin-bottom: 28px; display: inline-flex; align-items: center; gap: 10px; } .pl-section-title { font-family: 'Manrope', 'Pretendard', sans-serif; font-size: clamp(34px, 4.6vw, 56px); font-weight: 200; letter-spacing: -0.015em; line-height: 1.08; color: var(--pl-fg); margin: 0 0 32px; max-width: 880px; text-wrap: balance; } .pl-section-title-lg { font-size: clamp(40px, 5.6vw, 72px); } .pl-section-title .pl-hero-line { display: block; } .pl-section-body { font-size: clamp(15px, 1.4vw, 18px); line-height: 1.65; color: var(--pl-fg-2); font-weight: 300; max-width: 640px; margin: 0; text-wrap: pretty; } html[lang="ko"] .pl-section-title { font-weight: 300; letter-spacing: -0.025em; } /* ── Hero ───────────────────────────────────────────────────── */ .pl-hero { position: relative; z-index: 1; padding: clamp(12px, 2vw, 24px) clamp(20px, 4.5vw, 64px) clamp(60px, 9vw, 120px); display: flex; flex-direction: column; isolation: isolate; min-height: clamp(620px, 80vh, 880px); max-width: 1440px; margin: 0 auto; } .pl-hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; mask-image: radial-gradient(80% 70% at 50% 50%, #000 60%, transparent 100%); -webkit-mask-image: radial-gradient(80% 70% at 50% 50%, #000 60%, transparent 100%); } .pl-constellation-host { position: absolute; inset: 0; } .pl-hero-content { position: relative; z-index: 2; margin-top: auto; margin-bottom: auto; padding: 80px 0; max-width: 760px; animation: pl-fade-up 1.2s 0.1s both; } .pl-eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pl-fg-2); font-weight: 500; padding: 7px 14px; border: 1px solid var(--pl-border); border-radius: 999px; background: var(--pl-card); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); margin-bottom: 32px; } .pl-eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: #F5F7FF; box-shadow: 0 0 8px rgba(245,247,255,0.8); animation: pl-twinkle 2.4s ease-in-out infinite alternate; } @media (prefers-color-scheme: light) { .pl-eyebrow-dot { background: var(--pl-accent); box-shadow: 0 0 8px rgba(109,136,255,0.5); } } .pl-hero-title { font-family: 'Manrope', 'Pretendard', sans-serif; font-size: clamp(40px, 7vw, 92px); font-weight: 200; letter-spacing: -0.02em; line-height: 1.04; color: var(--pl-fg); margin: 0 0 clamp(24px, 3vw, 36px); text-shadow: 0 0 40px rgba(245,247,255,0.08); } @media (prefers-color-scheme: light) { .pl-hero-title { text-shadow: none; } } .pl-hero-line { display: block; } .pl-hero-title .pl-hero-line:nth-child(2), .pl-hero-title [data-lang] > .pl-hero-line:nth-child(2) { color: var(--pl-fg-2); } html[lang="ko"] .pl-hero-title { font-weight: 300; letter-spacing: -0.025em; } .pl-hero-sub { font-size: clamp(15px, 1.5vw, 19px); line-height: 1.6; color: var(--pl-fg-2); font-weight: 300; max-width: 580px; margin: 0 0 clamp(28px, 3.5vw, 44px); } .pl-hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; } .pl-btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 999px; font-size: 14px; font-weight: 500; letter-spacing: 0.01em; text-decoration: none; cursor: pointer; transition: all 0.25s; border: 1px solid transparent; font-family: inherit; } .pl-btn-primary { background: var(--pl-accent); color: var(--pl-btn-fg); box-shadow: var(--pl-shadow-glow); } .pl-btn-primary:hover { transform: translateY(-1px); box-shadow: var(--pl-shadow-glow-strong); } .pl-btn-ghost { color: var(--pl-fg); border-color: var(--pl-border-strong); background: var(--pl-card); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .pl-btn-ghost:hover { border-color: var(--pl-fg); background: var(--pl-card-strong); } .pl-btn-arrow { transition: transform 0.25s; } .pl-btn:hover .pl-btn-arrow { transform: translateX(3px); } .pl-hero-foot { position: absolute; left: clamp(20px, 4.5vw, 64px); bottom: 36px; display: flex; align-items: center; gap: 14px; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--pl-fg-3); font-weight: 500; z-index: 3; } .pl-hero-foot-line { width: 64px; height: 1px; background: var(--pl-border-strong); } .pl-hero-foot-arrow { font-size: 12px; animation: pl-foot-arrow 1.6s ease-in-out infinite alternate; } /* ── About ──────────────────────────────────────────────────── */ .pl-about .pl-section-inner { padding-top: 80px; } .pl-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--pl-border); } .pl-stat { padding: 28px 24px 28px 0; border-bottom: 1px solid var(--pl-border); display: flex; flex-direction: column; gap: 6px; } .pl-stats > .pl-stat:not(:last-child) { border-right: 1px solid var(--pl-border); margin-right: 24px; } .pl-stat-k { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pl-fg-3); font-weight: 500; } .pl-stat-v { font-size: 22px; font-weight: 300; color: var(--pl-fg); letter-spacing: -0.01em; } /* ── Products ───────────────────────────────────────────────── */ .pl-products .pl-section-inner { padding-top: 80px; padding-bottom: 120px; } .pl-products-head { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: end; margin-bottom: clamp(40px, 5vw, 60px); } .pl-products-body { font-size: 16px; } .pl-products-mapwrap { margin: 0 auto; position: relative; width: 100%; max-width: 1080px; height: clamp(320px, 36vw, 440px); border: 1px solid var(--pl-border); border-radius: 24px; /* Constellation map stays a small dark sky regardless of theme so the starlight stays visible. */ background: radial-gradient(60% 60% at 50% 50%, rgba(30,42,90,0.85), rgba(11,19,36,0.95)); overflow: hidden; } /* JS adds .pl-products-map onto the same host as .pl-products-mapwrap; the host already owns the size, so this class is just a marker. */ .pl-product-star { position: absolute; transform: translate(-50%, -50%); cursor: default; } .pl-product-star-glow { position: absolute; inset: -16px; border-radius: 50%; background: radial-gradient(circle, rgba(245,247,255,0.45), transparent 65%); transition: inset 0.3s; } .pl-product-star-core { position: relative; width: 8px; height: 8px; background: #F5F7FF; border-radius: 50%; box-shadow: 0 0 12px rgba(245,247,255,0.85), 0 0 32px rgba(109,136,255,0.45); animation: pl-twinkle 3.2s ease-in-out infinite alternate; } .pl-product-star:hover .pl-product-star-glow { inset: -28px; } .pl-product-star-meta { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); white-space: nowrap; pointer-events: none; } .pl-product-star:nth-child(odd) .pl-product-star-meta { left: auto; right: 18px; text-align: right; } .pl-product-star-id { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(245,247,255,0.85); font-weight: 500; margin-bottom: 4px; } .pl-product-star-body { font-size: 12px; color: rgba(185,197,230,0.7); font-weight: 300; max-width: 220px; white-space: normal; line-height: 1.5; } .pl-products-footer { margin-top: 56px; display: flex; align-items: center; justify-content: center; gap: 18px; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--pl-fg-3); font-weight: 500; } .pl-products-footer-line { flex: 1; max-width: 200px; height: 1px; background: var(--pl-border); } /* ── Philosophy ─────────────────────────────────────────────── */ .pl-philosophy { background: linear-gradient(180deg, transparent 0%, rgba(20,29,58,0.4) 50%, transparent 100%); } @media (prefers-color-scheme: light) { .pl-philosophy { background: linear-gradient(180deg, transparent 0%, rgba(216,222,233,0.4) 50%, transparent 100%); } } .pl-philo-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: clamp(40px, 6vw, 80px); border-top: 1px solid var(--pl-border); } .pl-philo-card { position: relative; padding: 40px 32px 56px 0; border-bottom: 1px solid var(--pl-border); } .pl-philo-cards > .pl-philo-card:not(:last-child) { padding-right: 32px; border-right: 1px solid var(--pl-border); margin-right: 32px; } .pl-philo-card-num { font-size: 11px; font-weight: 500; letter-spacing: 0.18em; margin-bottom: 32px; color: var(--pl-accent); font-variant-numeric: tabular-nums; } .pl-philo-card-title { font-size: 24px; font-weight: 300; letter-spacing: -0.01em; margin: 0 0 16px; color: var(--pl-fg); } .pl-philo-card-body { font-size: 15px; line-height: 1.65; font-weight: 300; color: var(--pl-fg-2); margin: 0; text-wrap: pretty; } .pl-philo-card-line { position: absolute; left: 0; bottom: -1px; width: 0; height: 1px; background: linear-gradient(90deg, var(--pl-fg) 0%, transparent 100%); transition: width 0.5s; } .pl-philo-card:hover .pl-philo-card-line { width: 80%; } /* ── Story ──────────────────────────────────────────────────── */ .pl-story-inner { display: grid; grid-template-columns: minmax(220px, 320px) 1fr; gap: clamp(32px, 5vw, 80px); align-items: start; } .pl-story-mark { margin-top: 40px; filter: drop-shadow(0 0 32px rgba(109,136,255,0.3)); display: flex; align-items: center; justify-content: center; padding: 24px; border: 1px solid var(--pl-border); border-radius: 24px; background: var(--pl-card); } .pl-story-quote { margin-top: 32px; padding: 16px 20px; border-left: 2px solid var(--pl-accent); font-family: 'Manrope', sans-serif; font-style: italic; font-weight: 300; font-size: 18px; color: var(--pl-fg); letter-spacing: -0.01em; } /* ── Contact ────────────────────────────────────────────────── */ .pl-contact .pl-section-inner { max-width: 980px; } .pl-contact-email { display: inline-flex; align-items: center; gap: 16px; font-size: clamp(20px, 2.6vw, 32px); font-weight: 300; letter-spacing: -0.005em; text-decoration: none; color: var(--pl-accent); margin: 32px 0 56px; position: relative; transition: transform 0.25s; word-break: break-all; } .pl-contact-email:hover { transform: translateX(6px); } .pl-contact-email-prefix { font-size: 0.7em; opacity: 0.7; transition: transform 0.25s; } .pl-contact-email:hover .pl-contact-email-prefix { transform: translateX(-3px); } .pl-contact-card { border: 1px solid var(--pl-border); border-radius: 20px; padding: 8px 24px 24px; background: var(--pl-card); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); max-width: 540px; } .pl-contact-card-row { display: flex; justify-content: space-between; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--pl-border); font-size: 14px; } .pl-contact-card-row:last-of-type { border-bottom: none; } .pl-contact-card-k { color: var(--pl-fg-3); letter-spacing: 0.06em; text-transform: uppercase; font-size: 11px; font-weight: 500; } .pl-contact-card-v { color: var(--pl-fg); font-weight: 400; } .pl-contact-cta { display: inline-flex; align-items: center; gap: 10px; margin-top: 20px; padding: 13px 22px; border-radius: 999px; background: var(--pl-accent); color: var(--pl-btn-fg); font-size: 14px; font-weight: 500; text-decoration: none; box-shadow: var(--pl-shadow-glow); transition: all 0.25s; } .pl-contact-cta:hover { transform: translateY(-1px); box-shadow: var(--pl-shadow-glow-strong); } /* ── Footer ─────────────────────────────────────────────────── */ .pl-footer { position: relative; z-index: 1; border-top: 1px solid var(--pl-border); padding: clamp(36px, 4vw, 48px) clamp(20px, 4.5vw, 64px) clamp(28px, 3vw, 36px); background: rgba(11,19,36,0.4); } @media (prefers-color-scheme: light) { .pl-footer { background: rgba(238,242,250,0.4); } } .pl-footer-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 32px; max-width: 1280px; margin: 0 auto; } .pl-footer-links { display: flex; gap: 24px; font-size: 12px; letter-spacing: 0.04em; justify-content: center; } .pl-footer-links a { color: var(--pl-fg-2); text-decoration: none; transition: color 0.2s; } .pl-footer-links a:hover { color: var(--pl-fg); } .pl-footer-note { font-size: 11px; letter-spacing: 0.04em; color: var(--pl-fg-3); text-align: right; } /* ── Responsive ─────────────────────────────────────────────── */ /* Tablet: between phone and desktop. Keeps multi-column layouts intact but tightens nav spacing and lets the products head stack. */ @media (max-width: 1024px) { .pl-nav-links { gap: 24px; } [data-only-desktop] { display: none !important; } .pl-products-head { grid-template-columns: 1fr; gap: 20px; } } /* Mobile: full single-column layout. */ @media (max-width: 720px) { .pl-nav-links { display: none; } .pl-menu-btn { display: inline-flex; } .pl-hero-title { line-height: 1.08; } .pl-stats { grid-template-columns: 1fr; } .pl-stats > .pl-stat:not(:last-child) { border-right: none; margin-right: 0; padding-right: 0; } .pl-product-star-body { display: none; } .pl-product-star-id { font-size: 9px; } .pl-philo-cards { grid-template-columns: 1fr; } .pl-philo-cards > .pl-philo-card:not(:last-child) { border-right: none; margin-right: 0; padding-right: 0; } .pl-philo-card { padding: 32px 0; } .pl-story-inner { grid-template-columns: 1fr; gap: 32px; } .pl-footer-inner { grid-template-columns: 1fr; gap: 24px; text-align: center; justify-items: center; } .pl-footer-links { flex-wrap: wrap; justify-content: center; } .pl-footer-note { text-align: center; } /* Mobile menu open state */ body[data-menu-open] .pl-nav-links { display: flex; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; padding: 12px 24px 24px; background: var(--pl-bg); border-bottom: 1px solid var(--pl-border); z-index: 49; } body[data-menu-open] .pl-nav-links a { padding: 14px 0; border-bottom: 1px solid var(--pl-border); } body[data-menu-open] .pl-nav-links a:last-child { border-bottom: none; } body[data-menu-open] [data-menu-btn] span:nth-child(1) { transform: translateY(2.5px) rotate(45deg); } body[data-menu-open] [data-menu-btn] span:nth-child(2) { opacity: 0; } body[data-menu-open] [data-menu-btn] span:nth-child(3) { transform: translateY(-2.5px) rotate(-45deg); } } @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; } }