/* * Todo.Today Guides — front-end (Help Center design). * * Mirrors the Tailwind-based React mockup in * `todo-today-onboarding/src/pages/help/*`. Scoped under .ttg-* so it * doesn't leak into the rest of the theme. */ /* ============================================================ * Design tokens * ============================================================ */ .ttg { --ttg-bg: #fafafa; --ttg-surface: #ffffff; --ttg-border: #e5e7eb; /* tailwind gray-200 — for cards & inputs */ --ttg-border-soft: #f3f4f6; /* tailwind gray-100 — for hero + crumb dividers */ --ttg-border-strong: #111827; --ttg-text: #111827; --ttg-text-muted: #6b7280; --ttg-text-subtle: #9ca3af; --ttg-accent: #111827; /* black-ish */ --ttg-accent-soft: #f3f4f6; /* gray-100 */ --ttg-hero-blue: #eff6ff; /* tailwind blue-50, matches React mock */ --ttg-hero-orange: #fff7ed; /* tailwind orange-50, matches React mock */ --ttg-radius-card: 24px; --ttg-radius-article: 16px; --ttg-radius-input: 16px; --ttg-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05); --ttg-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08); --ttg-shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.10); --ttg-easing: cubic-bezier(0.4, 0, 0.2, 1); color: var(--ttg-text); font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 16px; line-height: 1.5; background: var(--ttg-bg); } /* * `ttg-active` is added to by TTG_Templates::filter_body_class() * on every page our templates render (post-type archive, taxonomy * archive, single guide, and search URLs scoped to the guide CPT). * We use it as the single hook for body-bg + theme-#main resets so we * don't have to enumerate every WP body class separately. */ /* Page background — fills the viewport between header & footer. */ body.ttg-active { background: #fafafa; } /* * Override the active theme's #main rules. * * - background: theme paints #main white, which would mask our * #fafafa body bg between sections. Re-paint to match the design. * - flex: theme sets `#main { flex: 1 }` so #main fills the viewport's * vertical leftovers. On short archives (e.g. a category with only * two guides) that produces a large empty grey band between the * last card and the site footer. Resetting to the flex default * lets #main shrink to its content; the body's #fafafa bg still * shows in any leftover gap. * * Specificity (0,1,1) — body class + #main — beats the theme's bare * `#main` rule (0,1,0) without needing !important. */ body.ttg-active #main { background: var(--ttg-bg); flex: 0 1 auto; } /* ============================================================ * Theme reset * * Flatsome ships a blanket rule — * blockquote, dl, figure, form, ol, p, pre, ul { margin-bottom: 1.3em; } * — which beats any single-class selector (.ttg-x's specificity 0,1,0 * equals the theme's `p` 0,0,1 split awkwardly, and the theme often wins * by source order). This reset uses `class + element` specificity (0,1,1) * to neutralise the theme's bottom margin across every block element * inside our scoped containers. Component-specific rules below restore * the margin they actually want using equal-or-higher specificity. * ============================================================ */ .ttg p, .ttg ul, .ttg ol, .ttg blockquote, .ttg dl, .ttg figure, .ttg form, .ttg pre { margin: 0; } /* ============================================================ * Layout containers * * All three variants collapse to the same 1050px max-width so the hub, * category archive, and single-guide pages line up visually. The class * names are kept for clarity at the call site (and so templates don't * need rewriting if we ever want to re-introduce per-page widths). * ============================================================ */ .ttg-container, .ttg-container--narrow, .ttg-container--wide { max-width: 1050px; margin: 0 auto; padding-left: 1.5rem; padding-right: 1.5rem; } /* ============================================================ * Icons * ============================================================ */ .ttg-icon { display: block; width: 1.25rem; height: 1.25rem; stroke: currentColor; flex-shrink: 0; } .ttg-icon--xs { width: 1rem; height: 1rem; } .ttg-icon--sm { width: 1rem; height: 1rem; } .ttg-icon--md { width: 1.25rem; height: 1.25rem; } .ttg-icon--lg { width: 2rem; height: 2rem; } .ttg-icon--xl { width: 2.5rem; height: 2.5rem; } /* ============================================================ * Hero (hub page) * ============================================================ */ .ttg-hero { position: relative; background: var(--ttg-surface); border-bottom: 1px solid var(--ttg-border-soft); /* Top is intentionally tighter than bottom — the theme already adds * 60px to #main, so a smaller top padding here keeps the visual * weight balanced without piling up whitespace under the site header. */ padding: 2rem 1.5rem 2.5rem; overflow: hidden; } .ttg-hero__blob { position: absolute; border-radius: 9999px; filter: blur(96px); opacity: 0.7; pointer-events: none; z-index: 0; } .ttg-hero__blob--blue { top: 3rem; left: 8%; width: 18rem; height: 18rem; background: var(--ttg-hero-blue); } .ttg-hero__blob--orange { bottom: 2rem; right: 8%; width: 22rem; height: 22rem; background: var(--ttg-hero-orange); } .ttg-hero__inner { position: relative; z-index: 1; max-width: 48rem; margin: 0 auto; text-align: center; } .ttg-hero__title { font-size: 2.25rem; line-height: 1.15; font-weight: 700; letter-spacing: -0.025em; margin: 0 0 1.5rem; color: var(--ttg-text); } .ttg p.ttg-hero__intro { margin: 1.5rem 0 0; color: var(--ttg-text-muted); font-size: 1rem; } /* ============================================================ * Search * * Selectors are intentionally specific (.ttg .ttg-search…) so Flatsome's * heavy form-input styles (which target plain `input[type="search"]`) * lose the specificity race and our padding wins. Same reason `box-sizing` * and `height: auto` are explicit — themes love to override those. * ============================================================ */ .ttg .ttg-search { position: relative; max-width: 40rem; margin: 0 auto; } .ttg .ttg-search__icon { position: absolute; top: 50%; left: 1.25rem; transform: translateY(-50%); color: #9ca3af; pointer-events: none; display: flex; z-index: 2; } .ttg .ttg-search__icon .ttg-icon { width: 1.25rem; height: 1.25rem; } .ttg .ttg-search__input, .ttg .ttg-search input.ttg-search__input, .ttg .ttg-search input[type="search"].ttg-search__input { width: 100%; box-sizing: border-box; height: auto; margin: 0; font-family: inherit; font-size: 1.125rem; line-height: 1.5; padding: 1rem 1.25rem 1rem 3.25rem; border: 2px solid var(--ttg-border); border-radius: var(--ttg-radius-input); background: var(--ttg-surface); color: var(--ttg-text); outline: none; box-shadow: var(--ttg-shadow-sm); transition: border-color 0.15s var(--ttg-easing), box-shadow 0.15s var(--ttg-easing); -webkit-appearance: none; appearance: none; } .ttg .ttg-search__input:hover { border-color: #d1d5db; } .ttg .ttg-search__input:focus, .ttg .ttg-search__input:focus-visible { border-color: var(--ttg-accent); box-shadow: 0 0 0 4px rgba(17, 24, 39, 0.08); outline: none; } .ttg .ttg-search__input::placeholder { color: #9ca3af; opacity: 1; } /* Strip the browser's native "x" clear button so the icon area stays clean. */ .ttg .ttg-search__input::-webkit-search-decoration, .ttg .ttg-search__input::-webkit-search-cancel-button, .ttg .ttg-search__input::-webkit-search-results-button, .ttg .ttg-search__input::-webkit-search-results-decoration { -webkit-appearance: none; appearance: none; } /* ============================================================ * Section wrapper (hub categories area) * ============================================================ */ .ttg-section { padding: 4rem 0 5rem; background: var(--ttg-bg); } .ttg-section__header { text-align: center; margin-bottom: 3rem; } .ttg-section__title { font-size: 1.625rem; line-height: 1.2; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 0.5rem; } .ttg p.ttg-section__lede { color: var(--ttg-text-muted); margin: 0; } /* ============================================================ * Category cards (hub) * ============================================================ */ .ttg-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; } /* When fewer than 3 cards are rendered the empty trailing column of a 3-col grid leaves the cards stuck to the left. Detect "no 3rd child" via :has() and switch to auto-fit + justify-content:center so 1 or 2 cards sit in the middle of the container. */ .ttg-cards:not(:has(> :nth-child(3))) { grid-template-columns: repeat(auto-fit, minmax(280px, 360px)); justify-content: center; } .ttg-card { display: flex; flex-direction: column; align-items: center; text-align: center; background: var(--ttg-surface); border: 1px solid var(--ttg-border); border-radius: var(--ttg-radius-card); padding: 2rem; box-shadow: var(--ttg-shadow-sm); color: inherit; text-decoration: none; position: relative; overflow: hidden; transition: border-color 0.2s var(--ttg-easing), box-shadow 0.2s var(--ttg-easing), transform 0.2s var(--ttg-easing); } .ttg-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(243, 244, 246, 0.6) 0%, rgba(243, 244, 246, 0) 100%); opacity: 0; transition: opacity 0.2s var(--ttg-easing); pointer-events: none; } .ttg-card:hover { border-color: #d1d5db; box-shadow: var(--ttg-shadow-md); } .ttg-card:hover::before { opacity: 1; } .ttg-card__icon { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; background: var(--ttg-accent-soft); color: var(--ttg-text); border-radius: 18px; margin-bottom: 1.5rem; transition: background 0.25s var(--ttg-easing), color 0.25s var(--ttg-easing), transform 0.25s var(--ttg-easing); } .ttg-card:hover .ttg-card__icon { background: var(--ttg-accent); color: #ffffff; transform: scale(1.08); } .ttg-card__title { position: relative; z-index: 1; font-size: 1.25rem; line-height: 1.3; font-weight: 600; margin: 0 0 0.75rem; } .ttg p.ttg-card__lede { position: relative; z-index: 1; color: var(--ttg-text-muted); margin: 0 0 1.5rem; flex: 1; } .ttg-card__cta { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.875rem; font-weight: 500; color: var(--ttg-text-subtle); transition: color 0.15s var(--ttg-easing); } .ttg-card:hover .ttg-card__cta { color: var(--ttg-text); } .ttg-card__cta-arrow { transition: transform 0.2s var(--ttg-easing); transform: translateY(1px); } .ttg-card:hover .ttg-card__cta-arrow { transform: translate(4px, 1px); } /* ============================================================ * Breadcrumb strip * ============================================================ */ .ttg-crumbs { background: var(--ttg-surface); border-bottom: 1px solid var(--ttg-border-soft); /* 1rem top + 1rem bottom + ~21px content row → 53px total, * matching the React mock's `py-4` strip. The theme's 60px on * `#main` is neutralised separately by the body-class override * up top, so this padding shows at its full intended height. */ padding: 1rem 0; font-size: 0.875rem; } .ttg-crumbs > .ttg-container, .ttg-crumbs > .ttg-container--narrow { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; } .ttg-crumbs__link { color: var(--ttg-text-muted); text-decoration: none; transition: color 0.15s var(--ttg-easing); white-space: nowrap; } .ttg-crumbs__link:hover { color: var(--ttg-text); } .ttg-crumbs__sep { color: #d1d5db; } .ttg-crumbs__current { color: var(--ttg-text); font-weight: 500; } /* ============================================================ * Archive (category) page * ============================================================ */ .ttg-archive__body { padding-top: 1.5rem; padding-bottom: 3rem; background: var(--ttg-bg); } /* Match the article-page wrapper so it picks up #fafafa even when the * theme paints #main white. */ .ttg--single .ttg-article-page { background: var(--ttg-bg); } .ttg-archive__header { display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; margin-bottom: 2rem; } @media (min-width: 640px) { .ttg-archive__header { flex-direction: row; align-items: center; gap: 2rem; margin-bottom: 2.5rem; } .ttg-archive__body { padding-top: 2.5rem; padding-bottom: 4rem; } } .ttg-archive__badge { display: flex; align-items: center; justify-content: center; width: 5rem; height: 5rem; background: var(--ttg-accent); color: #ffffff; border-radius: 24px; box-shadow: var(--ttg-shadow-lg); flex-shrink: 0; } /* * High-specificity heading + lede rules. * * Flatsome's default `h1` ships with a top margin (~0.5em) that pushes * the heading group down inside the flex-centered slot, making the * icon's vertical centre fall below the title instead of between the * title and lede. Resetting top margin + tightening line-height keeps * the heading group at ~80px so it pairs cleanly with the 80px badge. */ .ttg .ttg-archive__heading { margin: 0; padding: 0; } .ttg .ttg-archive__title, .ttg h1.ttg-archive__title { font-size: 1.875rem; line-height: 1.1; font-weight: 700; letter-spacing: -0.025em; margin: 0 0 0.75rem; padding: 0; color: var(--ttg-text); } @media (min-width: 640px) { .ttg .ttg-archive__title, .ttg h1.ttg-archive__title { font-size: 2.25rem; } } .ttg .ttg-archive__lede, .ttg p.ttg-archive__lede { font-size: 1.0625rem; line-height: 1.5; color: var(--ttg-text-muted); margin: 0; padding: 0; max-width: 36rem; } /* ============================================================ * Article list (on category archive) * ============================================================ */ .ttg-articles { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1rem; } .ttg-article { background: var(--ttg-surface); border: 1px solid var(--ttg-border); border-radius: var(--ttg-radius-article); transition: border-color 0.2s var(--ttg-easing), box-shadow 0.2s var(--ttg-easing); } .ttg-article:hover { border-color: var(--ttg-border-strong); box-shadow: var(--ttg-shadow-md); } .ttg-article__link { display: flex; align-items: flex-start; gap: 1.25rem; padding: 1.5rem; text-decoration: none; color: inherit; } @media (min-width: 640px) { .ttg-article__link { padding: 2rem; gap: 1.5rem; } } .ttg-article__icon { display: none; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; background: #f9fafb; color: var(--ttg-text-subtle); border-radius: 12px; margin-top: 0.25rem; flex-shrink: 0; transition: background 0.2s var(--ttg-easing), color 0.2s var(--ttg-easing); } @media (min-width: 640px) { .ttg-article__icon { display: flex; } } .ttg-article:hover .ttg-article__icon { background: var(--ttg-accent); color: #ffffff; } .ttg-article__body { flex: 1; display: flex; flex-direction: column; gap: 0.5rem; } .ttg-article__title { font-size: 1.25rem; line-height: 1.35; font-weight: 600; color: var(--ttg-text); } .ttg-article:hover .ttg-article__title { text-decoration: underline; text-underline-offset: 2px; } .ttg-article__lede { color: var(--ttg-text-muted); } .ttg-article__chev { display: flex; align-items: center; color: #d1d5db; margin-top: 0.5rem; flex-shrink: 0; transition: color 0.15s var(--ttg-easing); } .ttg-article:hover .ttg-article__chev { color: var(--ttg-text); } /* ============================================================ * Single article page * ============================================================ */ .ttg-article-page { padding-top: 1.5rem; padding-bottom: 3rem; } @media (min-width: 640px) { .ttg-article-page { padding-top: 2.5rem; padding-bottom: 4rem; } } .ttg-article-page__title { font-size: 1.875rem; line-height: 1.15; font-weight: 700; letter-spacing: -0.025em; color: var(--ttg-text); margin: 0 0 1.5rem; } @media (min-width: 640px) { .ttg-article-page__title { font-size: 2.25rem; } } @media (min-width: 768px) { .ttg-article-page__title { font-size: 2.75rem; } } /* ============================================================ * Prose (article body) * ============================================================ */ .ttg-prose { font-size: 1.0625rem; line-height: 1.75; color: #374151; } .ttg-prose > * + * { margin-top: 1.25rem; } .ttg-prose p { margin: 0 0 1.5rem; } .ttg-prose p:last-child { margin-bottom: 0; } .ttg-prose h2 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.015em; margin: 2.5rem 0 1rem; color: var(--ttg-text); } .ttg-prose h3 { font-size: 1.25rem; font-weight: 600; margin: 2rem 0 0.75rem; color: var(--ttg-text); } .ttg-prose a { color: var(--ttg-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .ttg-prose a:hover { text-decoration-thickness: 2px; } .ttg-prose ul, .ttg-prose ol { padding-left: 1.5rem; margin: 0 0 1.5rem; } .ttg-prose li { margin-bottom: 0.5rem; } .ttg-prose img { max-width: 100%; height: auto; border-radius: 12px; } .ttg-prose blockquote { border-left: 4px solid var(--ttg-accent); background: #f9fafb; margin: 2rem 0; padding: 1rem 1.25rem; border-radius: 4px; } .ttg-prose code { background: var(--ttg-accent-soft); padding: 0.125rem 0.375rem; border-radius: 6px; font-size: 0.95em; } /* ============================================================ * Helpful Yes/No footer (single article) * ============================================================ */ .ttg-helpful { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 1.5rem; margin-top: 4rem; padding-top: 2rem; border-top: 1px solid var(--ttg-border); text-align: center; } @media (min-width: 640px) { .ttg-helpful { flex-direction: row; text-align: left; } } .ttg-helpful__heading { font-size: 1rem; font-weight: 600; color: var(--ttg-text); margin: 0 0 0.25rem; } .ttg p.ttg-helpful__lede { font-size: 0.875rem; color: var(--ttg-text-muted); margin: 0; } .ttg-helpful__buttons { display: flex; gap: 0.75rem; } .ttg-helpful__btn { font-family: inherit; font-size: 1rem; font-weight: 500; padding: 0.5rem 1.5rem; border-radius: 9999px; border: 1px solid var(--ttg-border); background: var(--ttg-surface); color: var(--ttg-text); cursor: pointer; transition: border-color 0.15s var(--ttg-easing), background 0.15s var(--ttg-easing); } .ttg-helpful__btn:hover { border-color: var(--ttg-accent); } .ttg-helpful__btn:active { background: var(--ttg-accent-soft); } .ttg-helpful__btn[disabled] { opacity: 0.55; cursor: not-allowed; } /* * State swap: the thanks block is hidden by default and the text + * buttons are shown. Adding `.ttg-helpful--voted` to the wrapper * (done by helpful.js after a successful vote, or on page load if * localStorage already records a vote) inverts both — buttons / * prompt go away, "Thanks for your feedback!" appears in their place. * * `.is-loading` is the transient state during the POST: buttons stay * visible but inert; we tweak opacity to make the in-flight nature * obvious without flashing the thanks block prematurely. */ .ttg-helpful__thanks { display: none; } .ttg-helpful.is-loading .ttg-helpful__buttons { opacity: 0.6; } .ttg-helpful--voted .ttg-helpful__text, .ttg-helpful--voted .ttg-helpful__buttons { display: none; } .ttg-helpful--voted .ttg-helpful__thanks { display: block; text-align: center; width: 100%; } @media (min-width: 640px) { .ttg-helpful--voted .ttg-helpful__thanks { text-align: left; } } /* ============================================================ * Empty / pagination * ============================================================ */ .ttg-empty { background: var(--ttg-surface); border: 1px dashed var(--ttg-border); border-radius: var(--ttg-radius-article); padding: 2rem; text-align: center; color: var(--ttg-text-muted); } .ttg .nav-links { margin-top: 2rem; display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; } .ttg .nav-links a, .ttg .nav-links .current { display: inline-block; padding: 0.5rem 0.875rem; border-radius: 9999px; border: 1px solid var(--ttg-border); background: var(--ttg-surface); color: var(--ttg-text); text-decoration: none; font-size: 0.875rem; } .ttg .nav-links .current { background: var(--ttg-accent); border-color: var(--ttg-accent); color: #ffffff; } /* ============================================================ * Screen-reader text (search label) * ============================================================ */ .ttg .screen-reader-text { clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden; position: absolute; width: 1px; word-wrap: normal !important; } /* ============================================================ * Responsive * ============================================================ */ @media (min-width: 640px) { .ttg-hero { padding: 4rem 1.5rem 4rem; } .ttg-hero__title { font-size: 3rem; } .ttg-section { padding: 5rem 0; } .ttg-section__title { font-size: 1.875rem; } } @media (max-width: 900px) { .ttg-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .ttg-cards { grid-template-columns: 1fr; gap: 1rem; } .ttg-container, .ttg-container--narrow, .ttg-container--wide { padding-left: 1rem; padding-right: 1rem; } } /* ============================================================ * FAQ section (hub) * ============================================================ */ .ttg-section--faqs { border-top: 1px solid #F3F4F6; } .ttg-faqs__head { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; justify-content: space-between; padding-bottom: 1.5rem; border-bottom: 1px solid #F3F4F6; margin-bottom: 2.5rem; } .ttg-faqs__intro { max-width: 36rem; } .ttg-faqs__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; /* `align-items: stretch` (the grid default) stretches each card to the row's tallest sibling, so a card with no excerpt matches the height of its neighbour. `align-items: center` inside the card then vertically centres the icon + title in that stretched box. */ } @media (max-width: 768px) { .ttg-faqs__grid { grid-template-columns: 1fr; } .ttg-faqs__head { flex-direction: column; align-items: flex-start; } } /* FAQ card — entire card is a link to the single FAQ page. The `!important`s defend against active themes that style `.ttg-section a` with text-transform / color / text-decoration overrides (Flatsome etc. do this on links inside .ttg-section). */ .ttg-faq { display: flex; align-items: center; /* vertical-centres icon + intro + chevron in the row-stretched card */ gap: 1rem; padding: 1.25rem 1.5rem; background: #fff; border: 1px solid #E5E7EB; border-radius: 1rem; color: inherit !important; text-decoration: none !important; transition: border-color 0.2s var(--ttg-easing), box-shadow 0.2s var(--ttg-easing), transform 0.2s var(--ttg-easing); } /* Hover mirrors the category card pattern (.ttg-card:hover) — soft gray border, raised shadow, dark icon box with white glyph. Title stays its base color (no indigo flip) so the visual language is consistent across the hub. */ .ttg-faq:hover { border-color: #d1d5db; box-shadow: var(--ttg-shadow-md); } .ttg-faq:hover .ttg-faq__icon { background: var(--ttg-accent); color: #ffffff; transform: scale(1.08); } .ttg-faq:hover .ttg-faq__chev { color: var(--ttg-text); transform: translateX(4px); } .ttg-faq__icon { width: 2.25rem; height: 2.25rem; flex-shrink: 0; border-radius: 0.625rem; background: var(--ttg-accent-soft); color: var(--ttg-text); display: inline-flex; align-items: center; justify-content: center; transition: background 0.25s var(--ttg-easing), color 0.25s var(--ttg-easing), transform 0.25s var(--ttg-easing); } .ttg-faq__intro { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; } .ttg-faq__title { font-size: 1rem; font-weight: 600; font-family: inherit; color: #030712 !important; line-height: 1.35; letter-spacing: normal !important; text-transform: none !important; /* beat .ttg-section a { text-transform:uppercase } in some themes */ transition: color 0.15s ease; } /* Single-line lede with ellipsis. Keeps card heights uniform across the grid even when one FAQ has a paragraph-long excerpt. */ .ttg-faq__lede { font-size: 0.8125rem; color: #6B7280; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ttg-faq__chev { color: #9CA3AF; flex-shrink: 0; transition: transform 0.2s ease, color 0.15s ease; }