/* ───────────────────────────────────────────────────────────────── * LIDAM (특허법인 리담) — marketing site styles * Built on the Wanted Design System tokens (colors_and_type.css). * Adds a LIDAM brand layer: deep-blue accent harmonized to the logo, * senior/editorial rhythm, hairline discipline. * ───────────────────────────────────────────────────────────────── */ :root { /* Brand accent — harmonized to the LIDAM logo blue (#1070B0) */ --l-accent: #1070B0; --l-accent-strong: #0E6296; --l-accent-heavy: #0B4E78; --l-accent-soft: #E9F2F8; --l-accent-tint: #F4F9FC; --l-ink: #0A2E4A; /* deep navy for dark bands / footer */ --l-ink-2: #103C5E; --l-on-ink: rgba(255,255,255,0.72); --l-line: rgba(112,115,124,0.22); --l-line-soft: rgba(112,115,124,0.14); --l-page: 1200px; --l-gutter: 40px; } /* Accent tweak — swap LIDAM blue for the Wanted primary */ [data-accent="wanted"] { --l-accent: #0066FF; --l-accent-strong: #005EEB; --l-accent-heavy: #0054D1; --l-accent-soft: #EAF2FE; --l-accent-tint: #F5F9FF; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--wds-font-family); font-weight: var(--wds-weight-medium); color: var(--wds-color-label-normal); background: var(--wds-color-background-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } .brand-font { font-family: var(--wds-font-family-brand); } .wrap { max-width: var(--l-page); margin: 0 auto; padding-inline: var(--l-gutter); } /* KO/EN visibility — driven by */ :root[lang="en"] [data-lang="ko"] { display: none !important; } :root[lang="ko"] [data-lang="en"] { display: none !important; } /* ───────── ICONS ───────── */ .ic { display: inline-flex; width: 1em; height: 1em; flex: none; } .ic svg { width: 100%; height: 100%; } /* ───────── ELEVATED / EYEBROW ───────── */ .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: var(--wds-weight-bold); letter-spacing: 0.16em; text-transform: uppercase; color: var(--l-accent); } .eyebrow::before { content: ""; width: 24px; height: 2px; background: var(--l-accent); } .eyebrow--ink { color: rgba(255,255,255,0.82); } .eyebrow--ink::before { background: rgba(255,255,255,0.6); } /* ───────── BUTTONS ───────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 24px; border-radius: var(--wds-radius-10); font-family: var(--wds-font-family); font-size: 16px; font-weight: var(--wds-weight-bold); letter-spacing: -0.01em; border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: background .16s var(--wds-easing-standard), color .16s var(--wds-easing-standard), border-color .16s var(--wds-easing-standard), box-shadow .16s var(--wds-easing-standard); } .btn .ic { font-size: 18px; } .btn--primary { background: var(--l-accent); color: #fff; } .btn--primary:hover { background: var(--l-accent-strong); } .btn--primary:active { background: var(--l-accent-heavy); } .btn--outline { background: transparent; color: var(--wds-color-label-normal); border-color: var(--l-line); } .btn--outline:hover { border-color: var(--l-accent); color: var(--l-accent); } .btn--ghost-ink { background: transparent; color: #fff; border-color: rgba(255,255,255,0.28); } .btn--ghost-ink:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.5); } .btn--white { background: #fff; color: var(--l-ink); } .btn--white:hover { background: rgba(255,255,255,0.88); } .btn--sm { height: 40px; padding: 0 18px; font-size: 14px; } .btn--link { height: auto; padding: 0; background: none; border: none; color: var(--l-accent); font-weight: var(--wds-weight-bold); } .btn--link:hover { color: var(--l-accent-strong); } .btn--link .ic { transition: transform .16s var(--wds-easing-standard); } .btn--link:hover .ic { transform: translate(2px,-2px); } /* ───────── HEADER ───────── */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.85); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid transparent; transition: border-color .2s, background .2s; } .site-header[data-scrolled="true"] { border-bottom-color: var(--l-line); } .header-inner { height: 72px; display: flex; align-items: center; gap: 32px; } .logo { display: flex; align-items: center; } .logo img { height: 26px; width: auto; } .nav { display: flex; align-items: center; gap: 4px; margin-inline-start: 8px; } .nav a { padding: 8px 14px; border-radius: 8px; font-size: 15px; font-weight: var(--wds-weight-semibold); color: var(--wds-color-label-neutral); transition: background .14s, color .14s; } .nav a:hover { background: var(--wds-color-fill-normal); color: var(--wds-color-label-normal); } .header-right { margin-inline-start: auto; display: flex; align-items: center; gap: 16px; } /* language toggle */ .lang-toggle { display: inline-flex; align-items: center; border: 1px solid var(--l-line); border-radius: 8px; overflow: hidden; font-size: 13px; font-weight: var(--wds-weight-bold); } .lang-toggle button { appearance: none; border: none; background: transparent; cursor: pointer; padding: 6px 11px; color: var(--wds-color-label-alternative); font: inherit; letter-spacing: 0.04em; } .lang-toggle button[aria-pressed="true"] { background: var(--l-ink); color: #fff; } .menu-btn { display: none; } /* ── Mobile menu (shown < 940px via header[data-menu-open]) ── */ .mobile-menu { display: none; } .menu-btn[aria-expanded="true"] { background: var(--l-ink); color: #fff; border-color: var(--l-ink); } body.menu-lock { overflow: hidden; } /* ───────── SECTION SCAFFOLD ───────── */ section { position: relative; } .band { padding-block: 112px; } .band--tight { padding-block: 80px; } .band--soft { background: var(--l-accent-tint); } .band--alt { background: var(--wds-color-background-alternative); } .sec-head { max-width: 760px; } .sec-head h2 { margin: 18px 0 0; font-weight: var(--wds-weight-bold); font-size: clamp(28px, 3.4vw, 40px); line-height: 1.18; letter-spacing: -0.025em; color: var(--l-ink); } .sec-head p { margin: 16px 0 0; font-size: 18px; line-height: 1.6; color: var(--wds-color-label-alternative); max-width: 620px; } /* ───────── HERO (shared) ───────── */ .hero { display: none; } :root[data-hero="a"] #hero-a { display: block; } :root[data-hero="b"] #hero-b { display: block; } /* Hero A — split */ #hero-a { padding-block: clamp(64px, 8vw, 104px); overflow: hidden; } .hero-a-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 72px; align-items: center; } .hero-a-copy h1 { margin: 22px 0 0; font-weight: var(--wds-weight-bold); font-size: clamp(40px, 5.4vw, 60px); line-height: 1.08; letter-spacing: -0.03em; color: var(--l-ink); } .hero-a-copy h1 .accent { color: var(--l-accent); } .hero-a-copy .lede { margin: 24px 0 0; font-size: 19px; line-height: 1.62; color: var(--wds-color-label-alternative); max-width: 520px; } .hero-cta { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 14px; } .hero-trust { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--l-line); display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: center; font-size: 13.5px; font-weight: var(--wds-weight-semibold); color: var(--wds-color-label-alternative); } .hero-trust span { display: inline-flex; align-items: center; gap: 8px; } .hero-trust .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--l-accent); } /* Hero A visual — a matter tracker card */ .hero-visual { position: relative; } .matter-card { background: #fff; border: 1px solid var(--l-line); border-radius: 24px; box-shadow: var(--wds-shadow-3); padding: 26px 28px; } .matter-card .mc-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--l-line); } .mc-head .mc-title { font-size: 16px; font-weight: var(--wds-weight-bold); color: var(--l-ink); } .mc-head .mc-ref { font-size: 12px; font-weight: var(--wds-weight-semibold); color: var(--wds-color-label-alternative); font-family: var(--wds-font-family-mono); } .mc-flag { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: var(--wds-weight-bold); color: var(--l-accent); } .mc-flag .ic { font-size: 15px; } .mc-steps { list-style: none; margin: 6px 0 0; padding: 0; } .mc-steps li { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--l-line-soft); } .mc-steps li:last-child { border-bottom: none; } .mc-dot { width: 22px; height: 22px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 14px; background: var(--l-accent-soft); color: var(--l-accent); } .mc-dot.done { background: var(--l-accent); color: #fff; } .mc-dot.pending { background: var(--wds-color-fill-normal); color: var(--wds-color-label-assistive); } .mc-label { flex: 1; font-size: 14.5px; font-weight: var(--wds-weight-semibold); color: var(--l-ink); } .mc-state { font-size: 12px; font-weight: var(--wds-weight-bold); } .mc-state.ok { color: var(--l-accent); } .mc-state.now { color: var(--wds-color-status-cautionary); } .mc-state.wait { color: var(--wds-color-label-assistive); } .hero-chip { position: absolute; left: -28px; bottom: -26px; background: var(--l-ink); color: #fff; border-radius: 16px; padding: 16px 20px; box-shadow: var(--wds-shadow-4); display: flex; align-items: center; gap: 14px; } .hero-chip .ic { font-size: 22px; color: rgba(255,255,255,0.7); } .hero-chip b { display: block; font-size: 18px; font-weight: var(--wds-weight-bold); } .hero-chip small { font-size: 12px; color: rgba(255,255,255,0.66); letter-spacing: 0.02em; } /* Hero B — centered dark band */ #hero-b { background: var(--l-ink); color: #fff; padding-block: clamp(88px,11vw,148px); text-align: center; overflow: hidden; } #hero-b::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 80% at 50% -10%, rgba(16,112,176,0.35), transparent 70%); pointer-events: none; } .hero-b-inner { position: relative; max-width: 900px; margin: 0 auto; } .hero-b-logo { height: 30px; width: auto; margin: 0 auto 34px; opacity: 0.95; } .hero-b-inner .eyebrow { justify-content: center; } #hero-b h1 { margin: 22px 0 0; font-weight: var(--wds-weight-bold); font-size: clamp(40px, 6vw, 68px); line-height: 1.05; letter-spacing: -0.032em; } #hero-b h1 .accent { color: #6FB6E0; } #hero-b .lede { margin: 26px auto 0; max-width: 640px; font-size: 19px; line-height: 1.62; color: rgba(255,255,255,0.74); } #hero-b .hero-cta { justify-content: center; } .hero-b-trust { margin-top: 44px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 32px; font-size: 13.5px; font-weight: var(--wds-weight-semibold); color: rgba(255,255,255,0.6); } .hero-b-trust span { display: inline-flex; align-items: center; gap: 9px; } .hero-b-trust .dot { width: 5px; height: 5px; border-radius: 50%; background: #6FB6E0; } /* ───────── STAT STRIP ───────── */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--l-line); border-radius: 20px; overflow: hidden; background: #fff; } .stat { padding: 34px 32px; border-inline-start: 1px solid var(--l-line); } .stat:first-child { border-inline-start: none; } .stat .num { font-size: clamp(34px, 4vw, 46px); font-weight: var(--wds-weight-bold); letter-spacing: -0.03em; color: var(--l-accent); line-height: 1; } .stat .num .unit { font-size: 0.5em; margin-inline-start: 3px; color: var(--l-ink); } .stat .lbl { margin-top: 12px; font-size: 14px; font-weight: var(--wds-weight-semibold); line-height: 1.4; color: var(--wds-color-label-alternative); } /* ───────── WHY / FEATURE CARDS ───────── */ .feature-grid { margin-top: 56px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .feature { background: #fff; border: 1px solid var(--l-line); border-radius: 20px; padding: 32px; transition: border-color .16s, box-shadow .16s, transform .16s; } .feature:hover { border-color: color-mix(in srgb, var(--l-accent) 45%, var(--l-line)); box-shadow: var(--wds-shadow-2); } .feature .fi { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--l-accent-soft); color: var(--l-accent); font-size: 22px; } .feature h3 { margin: 20px 0 0; font-size: 20px; font-weight: var(--wds-weight-bold); letter-spacing: -0.02em; color: var(--l-ink); } .feature p { margin: 10px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--wds-color-label-alternative); } /* ───────── PROCESS ───────── */ .process { margin-top: 56px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; } .step { position: relative; padding: 0 28px 0 0; } .step:not(:last-child)::after { content: ""; position: absolute; top: 15px; left: 40px; right: 12px; height: 2px; background: var(--l-line); } .step .node { width: 32px; height: 32px; border-radius: 50%; position: relative; z-index: 1; display: grid; place-items: center; background: var(--l-ink); color: #fff; font-size: 13px; font-weight: var(--wds-weight-bold); } .step h4 { margin: 22px 0 0; font-size: 17px; font-weight: var(--wds-weight-bold); color: var(--l-ink); letter-spacing: -0.015em; } .step p { margin: 8px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--wds-color-label-alternative); } /* ───────── PEOPLE TEASER ───────── */ .people-grid { margin-top: 56px; display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: stretch; } .lead-person { background: #fff; border: 1px solid var(--l-line); border-radius: 24px; overflow: hidden; display: flex; flex-direction: column; } .lead-photo { aspect-ratio: 4 / 3; position: relative; background: repeating-linear-gradient(135deg, rgba(112,115,124,0.08) 0 2px, transparent 2px 11px), var(--l-accent-tint); display: grid; place-items: center; } .lead-photo span { font-family: var(--wds-font-family-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wds-color-label-assistive); } .lead-body { padding: 26px 28px 30px; } .lead-body .role { font-size: 12px; font-weight: var(--wds-weight-bold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--l-accent); } .lead-body .name { margin-top: 10px; font-size: 24px; font-weight: var(--wds-weight-bold); color: var(--l-ink); letter-spacing: -0.02em; } .lead-body .bio { margin-top: 14px; font-size: 15px; line-height: 1.6; color: var(--wds-color-label-alternative); } .tags { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; } .tag { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: var(--wds-weight-semibold); background: var(--wds-color-fill-normal); color: var(--wds-color-label-neutral); } .roster { display: flex; flex-direction: column; } .roster h3 { margin: 0 0 4px; font-size: 15px; font-weight: var(--wds-weight-bold); color: var(--l-ink); } .roster ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--l-line); } .roster li { display: flex; align-items: center; gap: 16px; padding: 18px 4px; border-bottom: 1px solid var(--l-line-soft); } .roster .r-avatar { width: 44px; height: 44px; border-radius: 50%; flex: none; background: var(--l-accent-soft); color: var(--l-accent); display: grid; place-items: center; font-size: 16px; font-weight: var(--wds-weight-bold); } .roster .r-name { font-size: 16px; font-weight: var(--wds-weight-bold); color: var(--l-ink); } .roster .r-role { margin-top: 2px; font-size: 13px; color: var(--wds-color-label-alternative); font-weight: var(--wds-weight-medium); } .roster .r-lang { margin-inline-start: auto; font-size: 12px; font-weight: var(--wds-weight-semibold); color: var(--wds-color-label-assistive); font-family: var(--wds-font-family-mono); } /* ───────── PRACTICE / SERVICES GRID ───────── */ .svc-grid { margin-top: 56px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .svc { display: flex; flex-direction: column; gap: 0; background: #fff; border: 1px solid var(--l-line); border-radius: 18px; padding: 26px 26px 24px; transition: border-color .16s, box-shadow .16s; } .svc:hover { border-color: color-mix(in srgb, var(--l-accent) 45%, var(--l-line)); box-shadow: var(--wds-shadow-1); } .svc .svc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .svc .svc-idx { font-family: var(--wds-font-family-mono); font-size: 12px; font-weight: var(--wds-weight-bold); color: var(--l-accent); letter-spacing: 0.04em; } .svc .svc-arrow { font-size: 18px; color: var(--wds-color-label-assistive); transition: color .16s, transform .16s; } .svc:hover .svc-arrow { color: var(--l-accent); transform: translate(2px,-2px); } .svc h3 { margin: 16px 0 0; font-size: 18px; font-weight: var(--wds-weight-bold); color: var(--l-ink); letter-spacing: -0.015em; } .svc p { margin: 8px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--wds-color-label-alternative); } /* ───────── FINAL CTA ───────── */ .cta-band { background: var(--l-ink); color: #fff; border-radius: 32px; padding: 64px; overflow: hidden; position: relative; } .cta-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 120% at 100% 0%, rgba(16,112,176,0.4), transparent 60%); } .cta-inner { position: relative; display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 48px; align-items: center; } .cta-band h2 { margin: 18px 0 0; font-size: clamp(28px, 3.6vw, 42px); line-height: 1.12; letter-spacing: -0.028em; font-weight: var(--wds-weight-bold); } .cta-band p { margin: 16px 0 0; font-size: 17px; line-height: 1.6; color: rgba(255,255,255,0.74); max-width: 460px; } .cta-actions { display: flex; flex-direction: column; gap: 20px; } .cta-actions .btn { width: 100%; } .cta-contact { display: flex; flex-direction: column; gap: 12px; } .cta-contact a, .cta-contact span { display: inline-flex; align-items: center; gap: 12px; font-size: 15px; font-weight: var(--wds-weight-semibold); color: rgba(255,255,255,0.82); } .cta-contact .ic { font-size: 18px; color: rgba(255,255,255,0.5); } .cta-contact a:hover { color: #fff; } /* ───────── FOOTER ───────── */ .site-footer { background: #fff; border-top: 1px solid var(--l-line); padding-block: 64px 40px; } .footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; } .footer-brand img { height: 24px; width: auto; } .footer-brand p { margin: 18px 0 0; font-size: 14px; line-height: 1.6; color: var(--wds-color-label-alternative); max-width: 260px; } .footer-col h4 { margin: 0 0 16px; font-size: 12px; font-weight: var(--wds-weight-bold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--wds-color-label-assistive); } .footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; } .footer-col a, .footer-col li { font-size: 14.5px; font-weight: var(--wds-weight-medium); color: var(--wds-color-label-neutral); } .footer-col a:hover { color: var(--l-accent); } .footer-contact li { display: flex; gap: 10px; line-height: 1.55; } .footer-contact .ic { font-size: 16px; color: var(--wds-color-label-assistive); margin-top: 2px; flex: none; } .footer-bottom { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--l-line); display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: 13px; color: var(--wds-color-label-assistive); } .footer-bottom .legal { display: flex; gap: 22px; } /* ───────── RESPONSIVE ───────── */ @media (max-width: 940px) { :root { --l-gutter: 24px; } .band { padding-block: 80px; } .nav { display: none; } .menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; border: 1px solid var(--l-line); background: #fff; cursor: pointer; font-size: 20px; color: var(--l-ink); } /* keep the mobile bar clean — nav, lang and contact move into the panel */ .header-right .lang-switch { display: none; } .header-right .btn--primary.btn--sm { display: none; } .site-header[data-menu-open="true"] .mobile-menu { display: block; } .mobile-menu { border-top: 1px solid var(--l-line); background: rgba(255,255,255,0.98); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); padding: 8px var(--l-gutter) 24px; max-height: calc(100vh - 72px); overflow-y: auto; } .mobile-nav { display: flex; flex-direction: column; } .mobile-nav a { padding: 15px 4px; font-size: 17px; font-weight: var(--wds-weight-semibold); color: var(--l-ink); border-bottom: 1px solid var(--l-line-soft); } .mobile-nav a[aria-current="page"] { color: var(--l-accent); } .mobile-menu-foot { margin-top: 20px; display: flex; flex-direction: column; gap: 18px; } .mobile-menu-langs { display: flex; gap: 8px; } .mobile-menu-langs a { padding: 8px 14px; border: 1px solid var(--l-line); border-radius: 8px; font-size: 13px; font-weight: var(--wds-weight-bold); letter-spacing: 0.04em; color: var(--wds-color-label-neutral); } .mobile-menu-langs a[aria-current="true"] { background: var(--l-ink); color: #fff; border-color: var(--l-ink); } .mobile-menu-foot .btn--primary { width: 100%; } .hero-a-grid { grid-template-columns: 1fr; gap: 56px; } .hero-visual { max-width: 460px; } .hero-chip { left: 0; } .stats { grid-template-columns: repeat(2, 1fr); } .stat:nth-child(2) { border-inline-start: none; } .stat:nth-child(3), .stat:nth-child(4) { border-top: 1px solid var(--l-line); } .stat:nth-child(3) { border-inline-start: none; } .feature-grid { grid-template-columns: 1fr; } .process { grid-template-columns: 1fr 1fr; gap: 40px 24px; } .step:not(:last-child)::after { display: none; } .people-grid { grid-template-columns: 1fr; gap: 32px; } .svc-grid { grid-template-columns: 1fr 1fr; } .cta-inner { grid-template-columns: 1fr; gap: 32px; } .cta-band { padding: 44px 32px; } .footer-top { grid-template-columns: 1fr 1fr; gap: 36px 24px; } } @media (max-width: 560px) { .hero-cta { flex-direction: column; align-items: stretch; } .hero-cta .btn { width: 100%; } .stats { grid-template-columns: 1fr; } .stat { border-inline-start: none !important; border-top: 1px solid var(--l-line); } .stat:first-child { border-top: none; } .svc-grid { grid-template-columns: 1fr; } .process { grid-template-columns: 1fr; } .footer-top { grid-template-columns: 1fr; } .band { padding-block: 64px; } } /* entrance — only hides once JS is confirmed (html.js), so a JS failure never hides content */ @media (prefers-reduced-motion: no-preference) { .js .reveal { opacity: 0; transform: translateY(16px); } .js .reveal.in { opacity: 1; transform: none; transition: opacity .6s var(--wds-easing-standard), transform .6s var(--wds-easing-standard); } }