/* Theme Name: Bricks Child Theme Theme URI: https://bricksbuilder.io/ Description: Use this child theme to extend Bricks. Author: Bricks Author URI: https://bricksbuilder.io/ Template: bricks Version: 1.1 Text Domain: bricks */ /*** History Timeline ***/ span.hit-desc {font-weight: 600; color: #0A132B; font-size: 18px;} /*** Homepage scroll animations — paired with the JS in Bricks > Settings > Custom code ***/ @media (prefers-reduced-motion: no-preference) { html.rp-anim body.home #brx-content { --rp-shift: 18px; } /* Pre-paint guard: hides (and pre-offsets) the elements the JS is about to tag, so nothing flashes before it runs and nothing has to transition into place. The JS adds .rp-tagged to as soon as tagging is done, switching this rule off — anything it did not tag simply stays visible. */ html.rp-anim:not(.rp-tagged) body.home #brx-content > section > .brxe-container > *, html.rp-anim:not(.rp-tagged) body.home #brx-content > section > .brxe-container > .brxe-container > *, html.rp-anim:not(.rp-tagged) body.home #brx-content > section > .brxe-container > .brx-grid > *, html.rp-anim:not(.rp-tagged) body.home #brx-content > section > .brx-grid > * { opacity: 0; transform: translate3d(0, var(--rp-shift), 0); } html.rp-anim body.home [data-rp-anim] { transition: opacity var(--rp-dur, .75s) var(--rp-ease, cubic-bezier(.22, .61, .36, 1)) var(--rp-delay, 0ms), transform var(--rp-dur, .75s) var(--rp-ease, cubic-bezier(.22, .61, .36, 1)) var(--rp-delay, 0ms); will-change: opacity, transform; } /* Resting state — identical to the guard above, so tagging never starts a transition */ html.rp-anim body.home [data-rp-anim]:not(.rp-in) { opacity: 0; transform: translate3d(0, var(--rp-shift), 0); } /* Images settle a little slower */ html.rp-anim body.home [data-rp-anim="img"] { --rp-dur: 1s; } html.rp-anim body.home [data-rp-anim].rp-in { opacity: 1; transform: none; will-change: auto; } /* Long, slow rises feel sluggish on phones */ @media (max-width: 767px) { html.rp-anim body.home #brx-content { --rp-shift: 12px; } html.rp-anim body.home [data-rp-anim] { --rp-dur: .65s; } html.rp-anim body.home [data-rp-anim="img"] { --rp-dur: .8s; } } }