/** * The help and policy pages, the page-not-found page, and single blog posts. * * On the shop front's tokens (`tokens.css`, a dependency of this file). Scoped * under `.pod-info` (`Storefront\InfoPages`: How it works, Artwork guidelines, * Shipping, Returns, FAQ, Terms, Privacy, and a single post) and `.pod-404` * (`Storefront\NotFound`), which those modules put on the ``. * * The spec is `docs/design-standards.md`; in short: * * frame the frame tokens: container with the gutter, frame-top above, frame-bottom below * title the page title tier (--pod-title-size / 800), 40 to what follows * prose 1rem/1.6 ink at 70ch; H2 at --pod-h2-prose-size, 40 above and 16 below; 8 between list items * rail from 1025px, a 240px sticky "On this page" list beside the prose; below, a row of chips * cards static: white, 1px line, radius-lg, 24 padding, no shadow * * **Why the prose values are restated here** when `.pod-prose` already has * them (`components.css`): the component weighs nothing (`:where()`), and the * theme sets `p`, `ul` and `h2` with element selectors that out-rank it. So each * value is repeated at `.pod-info .pod-prose` weight, from the same tokens. */ /* --- 1. The frame ---------------------------------------------------------- */ body.pod-info, body.pod-404, .pod-info .site-content, .pod-404 .site-content { background-color: var( --pod-surface ); color: var( --pod-ink ); } .pod-info .site-content > .ast-container, .pod-404 .site-content > .ast-container { box-sizing: border-box; max-width: var( --pod-container ); padding-inline: var( --pod-gutter ); } .pod-info #primary, .pod-404 #primary { margin-block: 0; padding-block: var( --pod-frame-top ) var( --pod-frame-bottom ); width: 100%; } @media ( max-width: 767px ) { .pod-info #primary, .pod-404 #primary { padding-block: var( --pod-frame-top ) var( --pod-frame-bottom-sm ); } } /* --- 2. The page head -------------------------------------------------------- */ .pod-info .entry-header { margin: 0 0 var( --pod-break ); padding: 0; text-align: left; } /* * The page title tier. `header.entry-header` because Astra sizes the title as * `.entry-title` at 30px, below its own 42px H2s; see `account.css`. */ .pod-info header.entry-header .entry-title, .pod-404 .pod-page-head .pod-page-title { color: var( --pod-ink ); font-size: var( --pod-title-size ); font-weight: 800; letter-spacing: var( --pod-title-tracking ); line-height: 1.08; margin: 0; text-wrap: balance; } /* A blog post's date and author, under its title. */ .pod-info .entry-header .entry-meta { color: var( --pod-ink-soft ); font-size: 0.9375rem; line-height: 1.5; margin: var( --pod-tight ) 0 0; } /* --- 3. The body: prose, and the rail beside it ------------------------------ */ /* * Astra caps every direct child of the content at its own content width and * centres it (`.entry-content[data-ast-blocks-layout] > *`). The body is the * one child and lays out its own columns. */ .pod-info .entry-content[data-ast-blocks-layout] > .pod-info__body { margin-inline: 0; max-width: none; } .pod-info .pod-info__body { display: grid; /* * 1rem here as on the prose, so the 70ch column below is measured in the * prose's own `ch`. The theme's content font is larger, which made the * column wider than the text and the gap to the rail 112px, not 72. */ font-size: 1rem; gap: var( --pod-break ); grid-template-columns: minmax( 0, 1fr ); } @media ( min-width: 1025px ) { /* * The prose at its measure and the list beside it. The list spans both * rows, so the help card sits under the prose rather than under the list. */ .pod-info .pod-info__body--toc { column-gap: var( --pod-split ); grid-template-columns: minmax( 0, var( --pod-measure ) ) 240px; } .pod-info .pod-info__body--toc > .pod-toc { align-self: start; grid-column: 2; grid-row: 1 / span 2; position: sticky; top: var( --pod-break ); } .pod-info .pod-info__body--toc > .pod-prose, .pod-info .pod-info__body--toc > .pod-info__help { grid-column: 1; } } .pod-info .pod-prose { color: var( --pod-ink ); font-size: 1rem; line-height: 1.6; max-width: var( --pod-measure ); } .pod-info .pod-prose > * { margin: 0 0 var( --pod-near ); } .pod-info .pod-prose > :first-child { margin-top: 0; } .pod-info .pod-prose > :last-child { margin-bottom: 0; } .pod-info .pod-prose :is( p, li ) { color: inherit; font-size: inherit; line-height: inherit; } .pod-info .pod-prose h2 { color: var( --pod-ink ); font-size: var( --pod-h2-prose-size ); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; margin: var( --pod-break ) 0 var( --pod-near ); scroll-margin-top: var( --pod-apart ); text-wrap: balance; } .pod-info .pod-prose > h2:first-child { margin-top: 0; } .pod-info .pod-prose h3 { color: var( --pod-ink ); font-size: var( --pod-h3-size ); font-weight: 800; letter-spacing: -0.01em; line-height: 1.3; margin: var( --pod-apart ) 0 var( --pod-tight ); text-wrap: balance; } .pod-info .pod-prose :is( ul, ol ) { margin: 0 0 var( --pod-near ); padding-left: 1.25em; } .pod-info .pod-prose li + li { margin-top: var( --pod-tight ); } .pod-info .pod-prose strong { font-weight: 700; } /* In prose, links are always underlined (§5 Prose). */ .pod-info .pod-prose a { color: var( --pod-accent ); transition: color var( --pod-fast ) var( --pod-ease ); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; } .pod-info .pod-prose a:hover { color: var( --pod-accent-deep ); } /* The one ring, over the theme's dotted `a:focus` outline. */ .pod-info .pod-prose a:focus-visible { outline: var( --pod-focus-width ) solid var( --pod-accent ); outline-offset: var( --pod-focus-offset ); } /* --- 4. "On this page" ------------------------------------------------------- */ .pod-info .pod-toc__title { color: var( --pod-ink ); font-size: 0.9375rem; font-weight: 700; line-height: 1.5; margin: 0 0 var( --pod-tight ); } .pod-info .pod-toc__list { list-style: none; margin: 0; padding: 0; } .pod-info .pod-toc__list li { margin: 0; } .pod-info .pod-toc a { color: var( --pod-ink ); font-size: 0.9375rem; font-weight: 600; line-height: 1.35; text-decoration: none; transition: background-color var( --pod-fast ) var( --pod-ease ), border-color var( --pod-fast ) var( --pod-ease ), color var( --pod-fast ) var( --pod-ease ); } .pod-info .pod-toc a:focus-visible { outline: var( --pod-focus-width ) solid var( --pod-accent ); outline-offset: var( --pod-focus-offset ); } /* Under 1025px: a row of chips under the title (the filter chip, §5 Chips). */ @media ( max-width: 1024px ) { .pod-info .pod-toc__list { display: flex; flex-wrap: wrap; gap: var( --pod-tight ); } .pod-info .pod-toc a { align-items: center; background: var( --pod-surface ); border: 1px solid var( --pod-line ); border-radius: var( --pod-radius-pill ); box-sizing: border-box; display: inline-flex; min-height: var( --pod-btn-compact-h ); padding: var( --pod-hair ) var( --pod-near ); } .pod-info .pod-toc a:hover { background: var( --pod-surface-2 ); color: var( --pod-ink ); } } /* From 1025px: a list down the rail, each link a 40px row against a line. */ @media ( min-width: 1025px ) { .pod-info .pod-toc__list { border-left: 1px solid var( --pod-line ); } .pod-info .pod-toc a { border-left: 2px solid transparent; display: flex; align-items: center; margin-left: -1px; min-height: var( --pod-btn-compact-h ); padding: var( --pod-hair ) var( --pod-near ); } .pod-info .pod-toc a:hover { border-left-color: var( --pod-accent ); color: var( --pod-accent-deep ); } } /* --- 5. "Still need help?" --------------------------------------------------- */ .pod-info .pod-info__help { background: var( --pod-surface ); border: 1px solid var( --pod-line ); border-radius: var( --pod-radius-lg ); box-sizing: border-box; max-width: var( --pod-measure ); padding: var( --pod-apart ); } /* An H2 in the outline, a card heading in size (§3: size never picks the level). */ .pod-info .pod-info__help-title { color: var( --pod-ink ); font-size: var( --pod-h3-size ); font-weight: 800; letter-spacing: -0.01em; line-height: 1.3; margin: 0 0 var( --pod-tight ); text-wrap: balance; } .pod-info .pod-info__help p { color: var( --pod-ink ); font-size: 1rem; line-height: 1.6; margin: 0; } .pod-info .pod-info__help .pod-link { color: var( --pod-accent ); transition: color var( --pod-fast ) var( --pod-ease ); font-weight: 600; text-decoration: none; } .pod-info .pod-info__help .pod-link:hover { color: var( --pod-accent-deep ); text-decoration: underline; text-underline-offset: 0.25em; } .pod-info .pod-info__help .pod-link:focus-visible { outline: var( --pod-focus-width ) solid var( --pod-accent ); outline-offset: var( --pod-focus-offset ); } /* --- 6. FAQ: questions that open --------------------------------------------- */ /* * Each question is a native `

`: Enter and Space open it, and it works * with no script. Rows with a line between them, the question at the card * heading size, and a plus that becomes a minus, drawn in CSS. */ .pod-info .pod-prose .wp-block-details { border-bottom: 1px solid var( --pod-line ); margin: 0; } .pod-info .pod-prose h2 + .wp-block-details, .pod-info .pod-prose > .wp-block-details:first-child { border-top: 1px solid var( --pod-line ); } .pod-info .pod-prose .wp-block-details > summary { align-items: center; color: var( --pod-ink ); cursor: pointer; display: flex; font-size: var( --pod-h3-size ); font-weight: 800; gap: var( --pod-near ); justify-content: space-between; letter-spacing: -0.01em; line-height: 1.3; list-style: none; min-height: var( --pod-btn-h ); /* Border-box, so a one-line question is a 48px row, not 48 plus padding. */ box-sizing: border-box; padding: var( --pod-tight ) 0; text-wrap: balance; transition: color var( --pod-fast ) var( --pod-ease ); } .pod-info .pod-prose .wp-block-details > summary::-webkit-details-marker { display: none; } .pod-info .pod-prose .wp-block-details > summary::after { background: linear-gradient( currentColor, currentColor ) center / 14px 2px no-repeat, linear-gradient( currentColor, currentColor ) center / 2px 14px no-repeat; content: ''; flex: none; height: 20px; width: 20px; } .pod-info .pod-prose .wp-block-details[open] > summary::after { background: linear-gradient( currentColor, currentColor ) center / 14px 2px no-repeat; } .pod-info .pod-prose .wp-block-details > summary:hover { color: var( --pod-accent-deep ); } .pod-info .pod-prose .wp-block-details > summary:focus-visible { border-radius: var( --pod-radius-sm ); outline: var( --pod-focus-width ) solid var( --pod-accent ); outline-offset: var( --pod-focus-offset ); } .pod-info .pod-prose .wp-block-details > :not( summary ) { margin: 0 0 var( --pod-near ); padding-right: calc( 20px + var( --pod-near ) ); } /* --- 7. A blog post's comments ---------------------------------------------- */ /* * Astra's comment markup, to the standard: the list as rows (the product * reviews' pattern, `product.css`), the form as a summary card with the * standard's labels, fields and primary button. The title tags and the * button's words are set in `InfoPages`. */ .pod-info .post-navigation, .pod-info .comments-area { max-width: var( --pod-measure ); } .pod-info .comments-area { margin: var( --pod-split ) 0 0; padding: 0; } /* Astra capitalises and uppercases the meta; the text says what it says. */ .pod-info .comments-area :is( .ast-comment-meta, .ast-comment-meta *, .comments-title, .comment-reply-title, .comment-reply-link ) { text-transform: none; } /* "1 thought on …" and "Leave a comment": H2s at the in-page section size. */ .pod-info .comments-area :is( .comments-title, .comment-reply-title ) { color: var( --pod-ink ); font-size: var( --pod-h2-prose-size ); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 var( --pod-apart ); padding: 0; text-wrap: balance; } .pod-info .comments-area .comment-reply-title small { display: block; font-size: 0.9375rem; font-weight: 600; letter-spacing: 0; margin: var( --pod-tight ) 0 0; } /* The list: rows with a line between them, a 48px round avatar beside the name. */ .pod-info .comments-area :is( .ast-comment-list, .children ) { list-style: none; margin: 0 0 var( --pod-break ); padding: 0; } .pod-info .comments-area .children { margin: var( --pod-apart ) 0 0 calc( 48px + var( --pod-near ) ); } .pod-info .comments-area .ast-comment-list li { border-bottom: 1px solid var( --pod-line ); margin: 0 0 var( --pod-apart ); padding: 0 0 var( --pod-apart ); } .pod-info .comments-area .ast-comment-list li:last-child { border-bottom: 0; margin-bottom: 0; } .pod-info .comments-area .ast-comment { border: 0; margin: 0; padding: 0; } .pod-info .comments-area .ast-comment-info { align-items: center; display: flex; gap: var( --pod-near ); margin: 0 0 var( --pod-tight ); } .pod-info .comments-area .ast-comment-avatar-wrap { flex: none; margin: 0; } .pod-info .comments-area .ast-comment-avatar-wrap img.avatar { border-radius: var( --pod-radius-pill ); display: block; height: 48px; margin: 0; width: 48px; } .pod-info .comments-area .ast-comment-meta { color: var( --pod-ink-soft ); font-size: 0.875rem; line-height: 1.45; margin: 0; padding: 0; } .pod-info .comments-area .ast-comment-meta cite { font-style: normal; } .pod-info .comments-area .ast-comment-meta .fn, .pod-info .comments-area .ast-comment-meta .fn a { color: var( --pod-ink ); font-size: 1.0625rem; font-weight: 700; text-decoration: none; } .pod-info .comments-area .ast-comment-time a { color: var( --pod-ink-soft ); font-weight: 400; text-decoration: none; } .pod-info .comments-area .ast-comment-content { color: var( --pod-ink ); font-size: 1rem; line-height: 1.6; margin: 0 0 0 calc( 48px + var( --pod-near ) ); padding: 0; } .pod-info .comments-area .ast-comment-content p { margin: 0 0 var( --pod-tight ); } .pod-info .comments-area :is( .ast-comment-content a, .ast-comment-meta a, .comment-reply-title a ) { transition: color var( --pod-fast ) var( --pod-ease ); } .pod-info .comments-area .ast-comment-content a:not( .comment-reply-link ) { color: var( --pod-accent ); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; } .pod-info .comments-area .comment-reply-link, .pod-info .comments-area #cancel-comment-reply-link { color: var( --pod-accent ); font-size: 0.9375rem; font-weight: 600; text-decoration: none; } .pod-info .comments-area :is( .comment-reply-link, #cancel-comment-reply-link ):hover, .pod-info .comments-area .ast-comment-content a:hover { color: var( --pod-accent-deep ); text-decoration: underline; text-underline-offset: 0.25em; } .pod-info .comments-area a:focus-visible { outline: var( --pod-focus-width ) solid var( --pod-accent ); outline-offset: var( --pod-focus-offset ); } /* The form: one summary card (surface-2, no border, radius-lg, 24). */ .pod-info .comments-area .comment-respond { background: var( --pod-surface-2 ); border: 0; border-radius: var( --pod-radius-lg ); margin: 0; padding: var( --pod-apart ); } .pod-info .comments-area .comment-notes, .pod-info .comments-area .logged-in-as { color: var( --pod-ink-soft ); font-size: 0.8125rem; line-height: 1.5; margin: 0 0 var( --pod-near ); } .pod-info .comments-area .required { color: var( --pod-danger ); } .pod-info .comments-area .comment-form :is( .ast-row, fieldset, .comment-form-textarea ) { border: 0; float: none; margin: 0; min-width: 0; padding: 0; width: auto; } .pod-info .comments-area .comment-form .comment-form-legend { display: none; } .pod-info .comments-area .comment-form .ast-comment-formwrap { display: grid; gap: var( --pod-near ); grid-template-columns: repeat( auto-fit, minmax( min( 100%, 11.5rem ), 1fr ) ); margin: var( --pod-near ) 0; } .pod-info .comments-area .comment-form .ast-comment-formwrap > p { float: none; margin: 0; padding: 0; width: auto; } /* * Visible labels (§5 Fields). Astra prints them as `.screen-reader-text`, * leaving the placeholder to stand in for the label; its `position` there is * `!important`, so this answers with one. */ .pod-info .comments-area .comment-form label.screen-reader-text { clip: auto; clip-path: none; height: auto; overflow: visible; position: static !important; white-space: normal; width: auto; } .pod-info .comments-area .comment-form :is( .comment-form-textarea, .ast-comment-formwrap ) label { color: var( --pod-ink ); display: block; font-size: 0.875rem; font-weight: 600; line-height: 1.4; margin: 0 0 var( --pod-hair ); } /* The standard's text field and textarea. */ .pod-info .comments-area .comment-form :is( textarea, input[type='text'], input[type='email'], input[type='url'] ), .pod-info #comments .comment-form :is( textarea#comment, input#author, input#email, input#url ) { appearance: none; background: var( --pod-surface ); border: 1px solid var( --pod-field-border ); border-radius: var( --pod-radius ); box-shadow: none; box-sizing: border-box; color: var( --pod-ink ); font-family: inherit; font-size: var( --pod-field-size ); height: var( --pod-btn-h ); line-height: 1.4; margin: 0; padding: 0 var( --pod-near ); transition: border-color var( --pod-fast ) var( --pod-ease ); width: 100%; } .pod-info .comments-area .comment-form textarea, .pod-info #comments .comment-form textarea#comment { height: auto; min-height: 7rem; padding-block: 0.75rem; resize: vertical; } .pod-info .comments-area .comment-form :is( textarea, input[type='text'], input[type='email'], input[type='url'] )::placeholder, .pod-info #comments .comment-form :is( textarea#comment, input#author, input#email, input#url )::placeholder { color: var( --pod-ink-soft ); opacity: 1; } .pod-info .comments-area .comment-form :is( textarea, input[type='text'], input[type='email'], input[type='url'] ):focus, .pod-info #comments .comment-form :is( textarea#comment, input#author, input#email, input#url ):focus { border-color: var( --pod-accent ); border-style: solid; border-width: 1px; box-shadow: 0 0 0 1px var( --pod-accent ); outline: 2px solid transparent; } /* "Save my name…": a native checkbox in a row at least 44px tall. */ .pod-info .comments-area .comment-form-cookies-consent { align-items: center; color: var( --pod-ink ); display: flex; font-size: 0.875rem; gap: var( --pod-tight ); line-height: 1.45; margin: 0 0 var( --pod-near ); min-height: 44px; } .pod-info .comments-area .comment-form-cookies-consent input[type='checkbox'] { accent-color: var( --pod-accent ); flex: none; height: 20px; margin: 0; width: 20px; } .pod-info .comments-area .form-submit { margin: 0; } /* * "Post comment": the primary pill (§5 Buttons). The theme styles it by id * (`#comments .submit`), and its textarea too (`textarea#comment`), so the * id is in these selectors as well. */ .pod-info .comments-area .form-submit input[type='submit'], .pod-info #comments .form-submit input#submit { align-items: center; background: var( --pod-accent ); border: 1px solid var( --pod-accent ); border-radius: var( --pod-radius-pill ); box-shadow: none; box-sizing: border-box; color: var( --pod-on-ink ); cursor: pointer; font-family: inherit; font-size: var( --pod-btn-size ); font-weight: 700; letter-spacing: 0; line-height: 1.2; min-height: var( --pod-btn-h ); padding: 0 var( --pod-btn-x ); text-transform: none; transition: background-color var( --pod-fast ) var( --pod-ease ), border-color var( --pod-fast ) var( --pod-ease ); } .pod-info .comments-area .form-submit input[type='submit']:hover, .pod-info #comments .form-submit input#submit:hover { background: var( --pod-accent-deep ); border-color: var( --pod-accent-deep ); color: var( --pod-on-ink ); } .pod-info .comments-area .form-submit input[type='submit']:focus-visible, .pod-info #comments .form-submit input#submit:focus-visible { outline: var( --pod-focus-width ) solid var( --pod-accent ); outline-offset: var( --pod-focus-offset ); } @media ( max-width: 599px ) { .pod-info .comments-area .form-submit input[type='submit'], .pod-info #comments .form-submit input#submit { width: 100%; } } @media ( max-width: 767px ) { .pod-info .comments-area { margin-top: var( --pod-split-sm ); } } /* --- 8. Page not found ------------------------------------------------------- */ .pod-404 .error-404 { text-align: left; } .pod-404 .pod-page-head { margin: 0 0 var( --pod-break ); } .pod-404 .pod-page-head .pod-lead { color: var( --pod-ink-soft ); font-size: clamp( 1.0625rem, 1.5vw, 1.25rem ); line-height: 1.55; margin: var( --pod-near ) 0 0; max-width: var( --pod-measure-lead ); } .pod-404 .pod-link { color: var( --pod-accent ); transition: color var( --pod-fast ) var( --pod-ease ); font-weight: 600; text-decoration: none; } .pod-404 .pod-link:hover { color: var( --pod-accent-deep ); text-decoration: underline; text-underline-offset: 0.25em; } .pod-404 .pod-link:focus-visible { outline: var( --pod-focus-width ) solid var( --pod-accent ); outline-offset: var( --pod-focus-offset ); } .pod-404 .pod-404__search { margin: 0 0 var( --pod-split ); max-width: 36rem; } .pod-404 .pod-404__search .pod-field-label { color: var( --pod-ink ); display: block; font-size: 0.875rem; font-weight: 600; line-height: 1.4; margin: 0 0 var( --pod-hair ); } .pod-404 .pod-404__search-row { display: flex; gap: var( --pod-tight ); } /* The text field (§5 Fields), at a weight that beats the theme's `input[type=search]`. */ .pod-404 .pod-404__search .pod-input { appearance: none; background: var( --pod-surface ); border: 1px solid var( --pod-field-border ); border-radius: var( --pod-radius ); box-shadow: none; box-sizing: border-box; color: var( --pod-ink ); flex: 1 1 auto; font-family: inherit; font-size: var( --pod-field-size ); height: var( --pod-btn-h ); line-height: 1.4; margin: 0; min-width: 0; padding: 0 var( --pod-near ); /* The border only: the theme's `transition: all` also animated the focus ring in. */ transition: border-color var( --pod-fast ) var( --pod-ease ); width: auto; } .pod-404 .pod-404__search .pod-input:focus { border-color: var( --pod-accent ); border-style: solid; border-width: 1px; box-shadow: 0 0 0 1px var( --pod-accent ); outline: 2px solid transparent; } /* The primary button (§5 Buttons), over the theme's `button`. */ .pod-404 .pod-404__search .pod-button { align-items: center; background: var( --pod-accent ); border: 1px solid var( --pod-accent ); border-radius: var( --pod-radius-pill ); box-shadow: none; box-sizing: border-box; color: var( --pod-on-ink ); cursor: pointer; display: inline-flex; flex: none; font-family: inherit; font-size: var( --pod-btn-size ); font-weight: 700; justify-content: center; letter-spacing: 0; line-height: 1.2; min-height: var( --pod-btn-h ); padding: 0 var( --pod-btn-x ); text-transform: none; transition: background-color var( --pod-fast ) var( --pod-ease ), border-color var( --pod-fast ) var( --pod-ease ); } .pod-404 .pod-404__search .pod-button:hover { background: var( --pod-accent-deep ); border-color: var( --pod-accent-deep ); color: var( --pod-on-ink ); } .pod-404 .pod-404__search .pod-button:focus-visible { outline: var( --pod-focus-width ) solid var( --pod-accent ); outline-offset: var( --pod-focus-offset ); } @media ( max-width: 599px ) { .pod-404 .pod-404__search-row { flex-direction: column; } .pod-404 .pod-404__search .pod-button { width: 100%; } } .pod-404 .pod-404__browse { margin: 0 0 var( --pod-split ); } .pod-404 .pod-404__heading { color: var( --pod-ink ); font-size: var( --pod-h2-prose-size ); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 var( --pod-apart ); text-wrap: balance; } .pod-404 .pod-404__help { color: var( --pod-ink ); font-size: 1rem; line-height: 1.6; margin: 0; } @media ( max-width: 767px ) { .pod-404 .pod-404__search, .pod-404 .pod-404__browse { margin-bottom: var( --pod-split-sm ); } } /* --- 9. Motion --------------------------------------------------------------- */ @media ( prefers-reduced-motion: reduce ) { .pod-info .pod-toc a, .pod-info .pod-prose a, .pod-info .pod-info__help .pod-link, .pod-info .pod-prose .wp-block-details > summary, .pod-info .comments-area a, .pod-info .comments-area .comment-form :is( textarea, input[type='text'], input[type='email'], input[type='url'] ), .pod-info .comments-area .form-submit input[type='submit'], .pod-info #comments .comment-form :is( textarea#comment, input#author, input#email, input#url ), .pod-info #comments .form-submit input#submit, .pod-404 .pod-link, .pod-404 .pod-404__search .pod-input, .pod-404 .pod-404__search .pod-button { transition: none; } }