/* ---------- Tokens ---------- */ /* Paleta extraída da logo HP e da capa geradas pelo usuário (2026-09-03). Site em fundo escuro, conforme preferência declarada. */ :root { --bg: #14110E; /* fundo principal — preto quente da logo */ --bg-alt: #1C1814; /* seções alternadas / superfícies elevadas */ --bg-raise: #231E19; /* cards e barras */ --text: #F4EDE2; --text-muted: #A99B89; --amber: #E5A93F; /* acento principal — âmbar da logo */ --amber-dim: #C88C2C; --on-amber: #14110E; /* texto sobre preenchimento âmbar */ /* Aliases mantidos para a seção de credenciais, que já nascia escura */ --dark-bg: #1C1814; --dark-text: #F4EDE2; --dark-text-muted: #A99B89; --amber-soft: #E5A93F; --amber-strong: #E5A93F; --amber-strong-hover: #F0BB5E; --border: #322A22; --font-display: "Fraunces", Georgia, "Times New Roman", serif; --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 32px; --space-5: 48px; --space-6: 64px; --space-7: 96px; --radius: 12px; --radius-pill: 999px; --max-width: 1100px; /* Curvas fortes — as nativas são fracas demais */ --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } /* --fs vem do widget de acessibilidade (A- / A+). Escalar o move tudo que esta em rem; o corpo, em px, e escalado junto explicitamente. */ html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; font-size: calc(100% * var(--fs, 1)); } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: calc(17px * var(--fs, 1)); font-weight: 500; /* corpo levemente mais encorpado — pedido do usuário */ line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; } h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.15; margin: 0; } p { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } :focus-visible { outline: 2px solid var(--amber-strong); outline-offset: 3px; border-radius: 2px; } /* ---------- Layout helpers ---------- */ .wrap { max-width: var(--max-width); margin-inline: auto; padding-inline: var(--space-3); } .section { padding-block: var(--space-6); } /* .section--narrow divide o elemento com .wrap: limitar o próprio elemento o centralizaria e o desalinharia das outras seções. Limita-se os filhos. */ .section--narrow > * { max-width: 720px; } .section__title { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); margin-bottom: var(--space-4); } .section__title--on-dark { color: var(--dark-text); } .eyebrow { font-family: var(--font-body); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--amber); margin: 0 0 var(--space-2); } .eyebrow--amber { color: var(--amber-soft); } .prose { font-size: 1.05rem; color: var(--text-muted); max-width: 68ch; margin-bottom: var(--space-4); } .lead { font-family: var(--font-display); font-size: clamp(1.2rem, 1rem + 1vw, 1.6rem); line-height: 1.45; color: var(--text); } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--amber); color: var(--on-amber); padding: var(--space-2) var(--space-3); z-index: 100; } .skip-link:focus { left: var(--space-2); top: var(--space-2); } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 40; background: rgba(20, 17, 14, 0.9); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; padding-block: var(--space-2); gap: var(--space-2); } .brand { display: flex; align-items: center; text-decoration: none; } /* Alternador de idioma */ .site-header__actions { display: flex; align-items: center; gap: var(--space-2); } /* Abaixo de 860px quem chama no WhatsApp e o botao fixo do rodape da tela. Repetir a acao no cabecalho so espremia a marca e vazava da largura. */ @media (max-width: 859px) { .site-header__actions .btn { display: none; } } .lang { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; padding: 0.45em 0.7em; border: 1px solid var(--border); border-radius: var(--radius-pill); background: none; color: var(--text-muted); font: inherit; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.04em; cursor: pointer; transition: color 200ms ease, border-color 200ms ease, transform 160ms var(--ease-out); } .lang:active { transform: scale(0.96); } @media (hover: hover) and (pointer: fine) { .lang:hover { color: var(--amber); border-color: var(--amber-dim); } } /* ---------- Buttons & links ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; background: var(--amber); color: var(--on-amber); font-weight: 600; text-decoration: none; border-radius: var(--radius-pill); padding: 0.7em 1.4em; transition: background-color 200ms ease, transform 160ms var(--ease-out); white-space: nowrap; } .btn:active { transform: scale(0.97); } .btn--sm { padding: 0.5em 1.1em; font-size: 0.9rem; } .btn--lg { padding: 0.85em 1.7em; font-size: 1.05rem; } @media (hover: hover) and (pointer: fine) { .btn:hover { background: var(--amber-strong-hover); } } .link-quiet { text-decoration: underline; text-underline-offset: 3px; color: var(--text-muted); transition: color 200ms ease; } @media (hover: hover) and (pointer: fine) { .link-quiet:hover { color: var(--amber-strong); } } /* ---------- Hero ---------- */ .hero { position: relative; padding-block: var(--space-7) var(--space-6); overflow: hidden; } .hero__inner { position: relative; z-index: 1; } .hero__inner > * { max-width: 660px; } .hero__title { font-size: clamp(2.1rem, 1.6rem + 2.5vw, 3.4rem); margin-bottom: var(--space-2); } .hero__subtitle { font-size: 1.15rem; color: var(--text-muted); margin-bottom: var(--space-4); max-width: 46ch; } .hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); } .hero__actions--center { justify-content: center; } .trust { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); margin-top: var(--space-5); font-size: 0.9rem; color: var(--text-muted); } .trust__item { display: flex; align-items: center; gap: var(--space-2); } .trust__item::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--amber-strong); flex-shrink: 0; } /* Capa gerada: wireframe isométrico. A metade esquerda da arte já é escura, e o gradiente reforça isso para o texto do hero nunca competir com ela. */ .hero__grid { position: absolute; inset: 0; z-index: 0; background-image: url("../img/capa-hero.webp"); background-size: cover; background-position: center right; background-repeat: no-repeat; } .hero::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(100deg, var(--bg) 22%, rgba(20, 17, 14, 0.72) 48%, rgba(20, 17, 14, 0.25) 78%), linear-gradient(to bottom, transparent 60%, var(--bg) 100%); } /* Sem a capa, a grade desenhada em CSS assume o lugar */ .hero--no-cover .hero__grid { background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse 70% 60% at 82% 22%, black, transparent); mask-image: radial-gradient(ellipse 70% 60% at 82% 22%, black, transparent); } /* A assinatura ja traz o nome: ela e o texto, nao um enfeite ao lado dele. */ .brand__logo { width: auto; height: 44px; flex-shrink: 0; } @media (min-width: 500px) { .brand__logo { height: 54px; } } /* ---------- Blueprint (assinatura visual — "como funciona") ---------- */ .blueprint { display: grid; grid-template-columns: 1fr; gap: var(--space-5); } .blueprint__step { position: relative; padding-left: var(--space-6); } .blueprint__step::before { content: ""; position: absolute; left: 19px; top: 44px; height: calc(100% + var(--space-5) - 44px); width: 1px; background-image: linear-gradient(var(--amber-strong) 0 4px, transparent 4px 8px); background-size: 1px 8px; transform-origin: top; } .blueprint__step:last-child::before { display: none; } .blueprint__marker { position: absolute; left: 0; top: 0; width: 40px; height: 40px; border: 1px solid var(--amber-strong); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 600; font-size: 0.9rem; color: var(--amber-strong); background: var(--bg); } .blueprint__label { font-size: 1.15rem; margin-bottom: 4px; } .blueprint__desc { color: var(--text-muted); max-width: 46ch; } @media (min-width: 860px) { .blueprint { grid-template-columns: repeat(4, 1fr); gap: var(--space-3); } .blueprint__step { padding-left: 0; padding-top: var(--space-6); } .blueprint__step::before { left: 40px; right: calc(-1 * var(--space-3)); top: 19px; height: 1px; width: auto; background-image: linear-gradient(90deg, var(--amber-strong) 0 4px, transparent 4px 8px); background-size: 8px 1px; transform-origin: left; } } /* ---------- Sobre ---------- */ .about { display: grid; grid-template-columns: 1fr; gap: var(--space-4); align-items: start; } @media (min-width: 800px) { .about { grid-template-columns: 260px 1fr; gap: var(--space-6); } } /* Retrato em forma orgânica, como no portfólio. O anel âmbar por trás usa a mesma curva e fica sempre um passo à frente da foto no hover. */ .about__portrait { position: relative; max-width: 280px; } .portrait { --blob: 63% 37% 52% 48% / 42% 56% 44% 58%; position: relative; display: block; width: 100%; aspect-ratio: 640 / 680; text-decoration: none; color: inherit; isolation: isolate; } .portrait__ring { position: absolute; inset: -10px; border: 1px solid var(--amber); border-radius: var(--blob); opacity: 0.55; transition: opacity 300ms ease, inset 300ms var(--ease-out); } /* A forma e um recorte com fundo proprio; a foto sem fundo apoia na base dela, entao a silhueta continua sendo a da pessoa, nao a de um retangulo. */ .portrait__shape { position: absolute; z-index: 1; inset: 0; display: block; border-radius: var(--blob); border: 1px solid var(--border); background: radial-gradient(115% 85% at 50% 0%, #2C251C 0%, #1C1712 55%, #14110E 100%); overflow: hidden; } .portrait__img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; transition: transform 600ms var(--ease-out), filter 400ms ease; } /* Convite: aparece no hover e sempre que o foco do teclado chega. */ .portrait__hint { position: absolute; z-index: 2; left: 50%; bottom: 6px; transform: translate(-50%, 8px); display: inline-flex; align-items: center; gap: 6px; padding: 0.45em 0.9em; border-radius: var(--radius-pill); background: var(--amber); color: var(--on-amber); font-size: 0.82rem; font-weight: 600; white-space: nowrap; opacity: 0; pointer-events: none; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5); transition: opacity 260ms ease, transform 260ms var(--ease-out); } .portrait__hint svg { width: 14px; height: 14px; } .portrait:focus-visible { outline: none; } .portrait:focus-visible .portrait__shape { outline: 2px solid var(--amber); outline-offset: 6px; } .portrait:focus-visible .portrait__hint, .portrait:active .portrait__hint { opacity: 1; transform: translate(-50%, 0); } @media (hover: hover) and (pointer: fine) { .portrait:hover .portrait__img { transform: scale(1.03); } .portrait:hover .portrait__ring { opacity: 1; inset: -16px; } .portrait:hover .portrait__hint { opacity: 1; transform: translate(-50%, 0); } } /* Link textual — o retrato não é a única porta para o portfólio. */ .portfolio-link { display: inline-flex; align-items: center; gap: var(--space-1); margin-top: var(--space-4); font-weight: 600; text-decoration: none; color: var(--amber); border-bottom: 1px solid transparent; transition: border-color 200ms ease; } .portfolio-link__arrow { width: 18px; height: 18px; transition: transform 260ms var(--ease-out); } @media (hover: hover) and (pointer: fine) { .portfolio-link:hover { border-bottom-color: var(--amber); } .portfolio-link:hover .portfolio-link__arrow { transform: translateX(4px); } } .quote { font-family: var(--font-display); font-size: clamp(1.15rem, 1rem + 0.8vw, 1.5rem); line-height: 1.4; margin: 0; padding-left: var(--space-3); border-left: 2px solid var(--amber-strong); color: var(--text); } /* ---------- Seção escura (credenciais) ---------- */ .section--dark { background: var(--dark-bg); color: var(--dark-text); } .badges { display: grid; grid-template-columns: 1fr; gap: var(--space-3); margin-bottom: var(--space-5); } @media (min-width: 640px) { .badges { grid-template-columns: 1fr 1fr; } } .badge { display: flex; align-items: flex-start; gap: var(--space-2); } .badge__icon { flex-shrink: 0; width: 24px; height: 24px; color: var(--amber-soft); margin-top: 2px; } .credentials { border-top: 1px solid rgba(245, 239, 230, 0.15); padding-top: var(--space-4); display: grid; gap: var(--space-2); color: var(--dark-text-muted); font-size: 0.92rem; } .credentials li { display: flex; gap: var(--space-2); } /* Ponto no lugar do travessao: o mesmo marcador da lista de garantias. */ .credentials li::before { content: ""; width: 6px; height: 6px; margin-top: 0.6em; border-radius: 50%; background: var(--amber-soft); flex-shrink: 0; } /* ---------- Cards (serviços) ---------- */ .cards { display: grid; grid-template-columns: 1fr; gap: var(--space-3); } @media (min-width: 640px) { .cards { grid-template-columns: 1fr 1fr; } } @media (min-width: 960px) { .cards { grid-template-columns: repeat(3, 1fr); } } .card { border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-4); background: var(--bg-alt); transition: transform 250ms var(--ease-out), box-shadow 250ms ease, border-color 250ms ease; } @media (hover: hover) and (pointer: fine) { .card:hover { transform: translateY(-4px); box-shadow: 0 12px 26px rgba(0, 0, 0, 0.4); border-color: var(--amber-dim); } } .card__title { font-size: 1.1rem; margin-bottom: var(--space-1); } .card__desc { color: var(--text-muted); font-size: 0.95rem; } /* ---------- FAQ ---------- */ .faq { display: grid; gap: 0; } .faq__item { border-bottom: 1px solid var(--border); } .faq__item:first-child { border-top: 1px solid var(--border); } .faq__q { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; padding: var(--space-3) var(--space-4) var(--space-3) 0; cursor: pointer; list-style: none; position: relative; transition: color 200ms ease; } .faq__q::-webkit-details-marker { display: none; } .faq__q::after { content: ""; position: absolute; right: 4px; top: 50%; width: 9px; height: 9px; border-right: 1.5px solid var(--amber-strong); border-bottom: 1.5px solid var(--amber-strong); transform: translateY(-70%) rotate(45deg); transition: transform 250ms var(--ease-out); } .faq__item[open] .faq__q::after { transform: translateY(-30%) rotate(-135deg); } @media (hover: hover) and (pointer: fine) { .faq__q:hover { color: var(--amber-strong); } } .faq__a { color: var(--text-muted); padding-bottom: var(--space-3); max-width: 62ch; } /* ---------- CTA final ---------- */ .section--cta { text-align: center; background: var(--bg-alt); } .section--cta .wrap > * { margin-inline: auto; } /* ---------- Footer ---------- */ .site-footer { background: var(--bg); color: var(--text); border-top: 1px solid var(--border); padding-top: var(--space-6); } .site-footer__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5); padding-bottom: var(--space-5); } @media (min-width: 760px) { .site-footer__grid { grid-template-columns: 2fr 1fr 1.3fr; gap: var(--space-6); } } .site-footer__logo { width: auto; height: 74px; margin-bottom: var(--space-3); } .site-footer__desc { color: var(--dark-text-muted); font-size: 0.95rem; max-width: 42ch; } .site-footer__title { font-family: var(--font-body); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--amber-soft); margin: 0 0 var(--space-3); } .site-footer__col ul { display: grid; gap: var(--space-2); } .site-footer__col a { color: var(--dark-text); text-decoration: none; font-size: 0.95rem; transition: color 200ms ease; } @media (hover: hover) and (pointer: fine) { .site-footer__col a:hover { color: var(--amber-soft); text-decoration: underline; text-underline-offset: 3px; } } .site-footer__plain { color: var(--dark-text-muted); font-size: 0.95rem; } .site-footer__bottom { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: space-between; padding-block: var(--space-3); border-top: 1px solid rgba(245, 239, 230, 0.14); color: var(--dark-text-muted); font-size: 0.85rem; } /* ---------- WhatsApp fixo (mobile) ---------- */ .whatsapp-fixed { position: fixed; right: var(--space-3); bottom: var(--space-3); z-index: 50; width: 52px; height: 52px; border-radius: 50%; background: var(--amber); color: var(--on-amber); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.55); transition: background-color 200ms ease, transform 160ms var(--ease-out); } .whatsapp-fixed:active { transform: scale(0.94); } .whatsapp-fixed svg { width: 26px; height: 26px; } @media (min-width: 860px) { .whatsapp-fixed { display: none; } } /* ================================================================ MOVIMENTO Tudo depende da classe .js no : sem JS, nada fica escondido. ================================================================ */ /* Entrada coreografada do hero (one-shot, no load) */ .js .enter { opacity: 0; transform: translateY(12px); animation: enter 600ms var(--ease-out) forwards; animation-delay: var(--d, 0ms); } @keyframes enter { to { opacity: 1; transform: translateY(0); } } /* Revelação no scroll, com stagger interno via --i */ .js .reveal { opacity: 0; transform: translateY(16px); transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out); transition-delay: calc(var(--i, 0) * 60ms); } .js .reveal--visible { opacity: 1; transform: translateY(0); } /* Momento-assinatura: a linha do blueprint é desenhada progressivamente */ .js .blueprint__step::before { transform: scaleY(0); transition: transform 700ms var(--ease-out); transition-delay: calc(var(--i, 0) * 60ms + 250ms); } .js .blueprint__step.reveal--visible::before { transform: scaleY(1); } @media (min-width: 860px) { .js .blueprint__step::before { transform: scaleX(0); } .js .blueprint__step.reveal--visible::before { transform: scaleX(1); } } /* Movimento reduzido: mantém o fade (ajuda a compreensão), remove deslocamento */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .js .enter { transform: none; animation: fade-only 200ms ease forwards; animation-delay: 0ms; } @keyframes fade-only { to { opacity: 1; } } .js .reveal { transform: none; transition: opacity 200ms ease; transition-delay: 0ms; } .js .reveal--visible { transform: none; } .js .blueprint__step::before, .js .blueprint__step.reveal--visible::before { transform: none; transition: none; } .btn:active, .whatsapp-fixed:active { transform: none; } .card:hover { transform: none; } } /* ================================================================ ACESSIBILIDADE ================================================================ */ /* Alto contraste: preto puro, texto branco e um amarelo mais luminoso. Só os tokens mudam — nenhum componente precisa saber que o modo existe. */ html.hc { --bg: #000000; --bg-alt: #000000; --bg-raise: #0B0B0B; --text: #FFFFFF; --text-muted: #FFFFFF; --amber: #FFD64A; --amber-dim: #FFD64A; --amber-soft: #FFD64A; --amber-strong: #FFD64A; --amber-strong-hover: #FFE68F; --on-amber: #000000; --border: #FFFFFF; --dark-bg: #000000; --dark-text: #FFFFFF; --dark-text-muted: #FFFFFF; } html.hc body { background: #000; } html.hc .site-header { background: #000; } /* A capa do hero vira ruído em alto contraste: some quase por completo. */ html.hc .hero__grid { opacity: 0.12; filter: grayscale(1); } html.hc .credentials { border-top-color: #FFFFFF; } html.hc .site-footer__bottom { border-top-color: #FFFFFF; } html.hc .portrait__img { filter: grayscale(1) contrast(1.15); } html.hc .card, html.hc .a11y__panel { border-width: 2px; } /* O Chrome não repinta uma propriedade com transition quando apenas a custom property que ela lê muda — o botão ficava com o âmbar antigo. Congelar as transições durante a troca resolve, e a virada de tema fica instantânea, que é como ela deve ser. */ html.a11y-switching, html.a11y-switching *, html.a11y-switching *::before, html.a11y-switching *::after { transition: none !important; } /* Widget fixo — canto oposto ao do WhatsApp, para não disputar espaço. */ .a11y { position: fixed; left: var(--space-3); bottom: var(--space-3); z-index: 60; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; } .a11y__toggle { width: 52px; height: 52px; flex-shrink: 0; border: 0; border-radius: 50%; background: var(--amber); color: var(--on-amber); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.55); transition: background-color 200ms ease, transform 160ms var(--ease-out); } .a11y__toggle svg { width: 28px; height: 28px; } .a11y__toggle:active { transform: scale(0.94); } @media (hover: hover) and (pointer: fine) { .a11y__toggle:hover { background: var(--amber-strong-hover); } } /* O painel usa px: ele controla a escala do texto, então não pode escalar junto. */ .a11y__panel { width: 258px; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-raise); color: var(--text); box-shadow: 0 12px 34px rgba(0, 0, 0, 0.6); font-size: 14px; } .a11y__title { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--amber); margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--border); } .a11y__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .a11y__row + .a11y__row { margin-top: 14px; } .a11y__row--stack { flex-direction: column; align-items: stretch; gap: 8px; } .a11y__label { font-size: 14px; } .a11y__pill { border: 1px solid var(--amber); border-radius: var(--radius-pill); background: none; color: var(--amber); font: inherit; font-size: 13px; font-weight: 600; padding: 4px 12px; cursor: pointer; transition: background-color 200ms ease, color 200ms ease, transform 160ms var(--ease-out); } .a11y__pill:active { transform: scale(0.96); } .a11y__pill[aria-pressed="true"] { background: var(--amber); color: var(--on-amber); } @media (hover: hover) and (pointer: fine) { .a11y__pill:hover { background: var(--amber); color: var(--on-amber); } } .a11y__steps { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; } .a11y__step { border: 1px solid var(--border); border-radius: 8px; background: var(--bg-alt); color: var(--text); font: inherit; font-size: 15px; font-weight: 600; padding: 7px 0; cursor: pointer; transition: border-color 200ms ease, color 200ms ease, transform 160ms var(--ease-out); } .a11y__step--reset { font-size: 12px; } .a11y__step:active { transform: scale(0.95); } .a11y__step:disabled { opacity: 0.4; cursor: not-allowed; } @media (hover: hover) and (pointer: fine) { .a11y__step:not(:disabled):hover { border-color: var(--amber); color: var(--amber); } } /* Entrada do painel. Sem JS o painel fica com [hidden] e nada disso aparece. */ .js .a11y__panel { transform-origin: bottom left; opacity: 0; transform: translateY(8px) scale(0.97); transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out); } .js .a11y__panel.is-open { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .a11y__toggle:active, .a11y__pill:active, .a11y__step:active, .portrait:hover .portrait__img { transform: none; } .js .a11y__panel { transform: none; transition: opacity 150ms ease; } .js .a11y__panel.is-open { transform: none; } .portrait__hint { transition: opacity 150ms ease; transform: translate(-50%, 0); } }