/* ========================================================== GoldBest Services - Homepage hero Used by: index.html (markup:
) Font: Plus Jakarta Sans (Google Fonts link in index.html ) ========================================================== */ /* Old Revolution slider: still in the HTML, only hidden while the new hero is live. Delete this rule to show it again. */ .tp-wrapper { display: none; } /* ---------- Hero wrapper ---------- */ .hero { --navy: #0b2545; --navy-soft: #1c4580; --navy-bright: #173a78; --ink: #2a3b52; --gold: #ebb741; --gold-hover: #dfa92c; --ice: #e3ecf8; --bg: #f4f8fc; position: relative; display: flow-root; margin-bottom: 50px; /* space for the stats card hanging below */ /* Fine woven fibers with soft gold and blue light behind the content. */ background: radial-gradient(ellipse at 12% 18%, rgba(235, 183, 65, .09), transparent 48%), radial-gradient(ellipse at 48% 78%, rgba(95, 143, 201, .08), transparent 56%), repeating-linear-gradient(8deg, rgba(28, 69, 128, .025) 0, rgba(28, 69, 128, .025) .7px, transparent .7px, transparent 6px), repeating-linear-gradient(98deg, rgba(255, 255, 255, .55) 0, rgba(255, 255, 255, .55) .7px, transparent .7px, transparent 8px), linear-gradient(180deg, #f7fafd 0%, #eef4fb 100%); font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--ink); -webkit-font-smoothing: antialiased; } .hero *, .hero *::before, .hero *::after { box-sizing: border-box; } .hero svg { display: block; flex: none; } /* ---------- Photo card (right column: the whole photo, never cropped) ---------- */ .hero-media { position: relative; z-index: 1; grid-area: media; } /* white frame; a comet of light runs around it (the ::before layer turns behind the photo) */ .hero-frame { position: relative; padding: 6px; /* frame thickness */ border-radius: 24px; background: rgba(255, 255, 255, .95); overflow: hidden; isolation: isolate; box-shadow: 0 30px 60px -24px rgba(11, 37, 69, .38), 0 14px 28px -14px rgba(11, 37, 69, .22); } .hero-frame::before { content: ""; position: absolute; top: 50%; left: 50%; z-index: -1; width: 160%; /* square wider than the card's diagonal: always covers the frame */ aspect-ratio: 1; translate: -50% -50%; background: conic-gradient(from 0deg, transparent 0deg 230deg, rgba(95, 168, 232, .85) 285deg, #fff 312deg, #ebb741 335deg, transparent 360deg); pointer-events: none; } .hero-photo { display: block; width: 100%; height: auto; /* keeps the photo's own 3:2 shape: nothing is cut off */ border-radius: 19px; } /* thin gold outline, offset behind the card */ .hero-media::before { content: ""; position: absolute; inset: 22px -22px -22px 22px; z-index: -1; border: 1.5px solid rgba(235, 183, 65, .6); border-radius: 28px; pointer-events: none; } /* ---------- Reviews card (overlaps the photo's corner, never covers the cleaner) ---------- */ .hero-reviews { position: absolute; left: -36px; bottom: 28px; z-index: 2; padding: 16px 20px; border-radius: 14px; background: rgba(255, 255, 255, .84); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 12px 30px rgba(11, 37, 69, .14); color: var(--navy); } .hero-reviews-top { display: flex; align-items: center; gap: 12px; } .hero-avatars { display: flex; } .hero-avatars span { display: grid; place-items: center; width: 30px; height: 30px; margin-left: -8px; border: 2px solid #fff; border-radius: 50%; background: var(--navy-soft); font-size: 10px; font-weight: 600; color: #fff; } .hero-avatars span:first-child { margin-left: 0; } .hero-avatars span:nth-child(2) { background: #b07f12; } .hero-avatars span:nth-child(3) { background: #3b6fb6; } .hero-avatars span:nth-child(4) { background: #0b2545; } .hero-stars { font-size: 18px; letter-spacing: 2px; color: #f2b51c; } .hero-reviews p { margin: 10px 0 0; font-size: 15px; font-weight: 600; line-height: 1.35; } /* ---------- Layout: text | photo card, stats card across the bottom ---------- */ .hero-inner { position: relative; z-index: 2; display: grid; /* the stats card's negative margin still lets it hang out of the hero */ grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-areas: "content media" "stats stats"; align-items: center; column-gap: clamp(40px, 4.5vw, 72px); width: min(1280px, 100% - 64px); margin: 0 auto; padding-top: 52px; } .hero-content { grid-area: content; max-width: 700px; } .hero-stats { grid-area: stats; } .hero-badge { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 4px 16px 4px 12px; border-radius: 999px; background: rgba(255, 255, 255, .7); box-shadow: 0 0 0 1px rgba(11, 37, 69, .05); font-size: 14px; color: var(--navy); } .hero-badge svg { width: 18px; height: 18px; } .hero-title { margin: 22px 0 0; font-size: clamp(34px, 1.2rem + 3vw, 56px); font-weight: 800; line-height: 1.08; letter-spacing: -.02em; color: var(--navy); } .hero-content > .hero-title:first-child { margin-top: 0; } /* badge hidden: the title opens the column */ .hero-title span { display: block; background: linear-gradient(90deg, #b0820f 0%, #c99a2c 50%, #efd9a0 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero-text { max-width: 580px; margin: 20px 0 0; font-size: 17px; line-height: 1.42; color: #1f2d40; } /* ---------- Features (4 icons) ---------- */ .hero-features { display: grid; grid-template-columns: repeat(4, 150px); gap: 6px; margin: 22px 0 0; padding: 0; list-style: none; } .hero-features li { font-size: 14.5px; font-weight: 500; line-height: 1.3; color: #1a2a40; } .hero-icon { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 8px; border-radius: 50%; background: var(--ice); color: var(--navy-soft); } .hero-icon svg { width: 28px; height: 28px; } /* ---------- Buttons ---------- */ .hero-actions { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 26px; } .hero-btn { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 54px; /* grows instead of cutting the label if it ever wraps (large phone text) */ padding: 8px 28px; border-radius: 10px; font: 700 16.5px/1.2 "Plus Jakarta Sans", system-ui, sans-serif; color: var(--navy); text-align: center; text-wrap: balance; text-decoration: none; transition: background-color .2s, box-shadow .2s; } @media (max-width: 480px) { .hero-btn { gap: 10px; padding-inline: 16px; font-size: clamp(14.5px, 4vw, 16.5px); } .hero-arrow { margin-left: 2px; } } .hero-btn svg { width: 22px; height: 22px; } .hero-btn:focus-visible { outline: 3px solid var(--navy-soft); outline-offset: 3px; } .hero-btn-primary { color: #141c2b; background: var(--gold); box-shadow: 0 6px 18px rgba(214, 160, 40, .25); } .hero-btn-primary:hover { background: var(--gold-hover); } .hero-arrow { margin-left: 6px; transition: transform .2s; } .hero-btn-primary:hover .hero-arrow { transform: translateX(3px); } .hero-btn-outline { color: var(--navy-bright); border: 1.5px solid var(--navy-bright); background: rgba(255, 255, 255, .55); } .hero-btn-outline:hover { background: #fff; } /* ---------- Stats card ---------- */ .hero-stats { display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; min-height: 96px; margin: 32px 0 -50px; /* hangs 50px below the hero */ padding: 0 16px; list-style: none; border-radius: 16px; background: #fff; box-shadow: 0 14px 40px rgba(11, 37, 69, .08); } .hero-stats li { position: relative; display: flex; align-items: center; justify-content: center; gap: 20px; padding: 14px 8px; font-size: 15px; line-height: 1.35; color: #2f4058; } .hero-stats li + li::before { content: ""; position: absolute; left: 0; top: 50%; height: 48px; border-left: 1px solid #e3e9f1; transform: translateY(-50%); } .hero-stats .hero-icon { width: 64px; height: 64px; margin: 0; color: #1f4f95; } .hero-stats svg { stroke-width: 1.75; } .hero-stats .hero-icon svg { width: 36px; height: 36px; } .hero-stats strong { display: block; margin-bottom: 2px; font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: var(--navy); } /* ---------- Desktop: title sized to its column so each line stays on one line ---------- */ @media (min-width: 861px) { .hero-title { font-size: clamp(34px, 4.4vw - 6px, 52px); text-wrap: balance; } /* reviews as a slim pill hanging below the photo: only a thin strip of floor is covered */ .hero-reviews { bottom: -28px; display: flex; align-items: center; gap: 14px; padding: 10px 18px 10px 12px; } .hero-reviews p { margin: 0; font-size: 14px; } } /* ---------- Tablet ---------- */ @media (max-width: 1100px) { .hero-content { max-width: 540px; } .hero-features { grid-template-columns: repeat(2, 150px); row-gap: 18px; } .hero-stats li { gap: 14px; } .hero-stats .hero-icon { width: 52px; height: 52px; } .hero-stats .hero-icon svg { width: 26px; height: 26px; } } /* ---------- Mobile: text, then photo, then stats ---------- */ @media (max-width: 860px) { .hero { display: flex; flex-direction: column; margin-bottom: 0; padding-bottom: 32px; } .hero-inner { display: contents; } .hero-content { order: 1; width: calc(100% - 32px); max-width: 640px; margin: 0 auto; padding-top: 28px; text-align: center; } .hero-badge { max-width: 100%; justify-content: center; } .hero-title { text-wrap: balance; } .hero-text { margin-inline: auto; font-size: 16px; text-wrap: pretty; } .hero-features { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; max-width: 400px; margin: 26px auto 0; } .hero-features li { text-align: center; } .hero-features .hero-icon { margin: 0 auto 10px; } .hero-actions { flex-direction: column; justify-content: center; gap: 12px; } .hero-btn { width: 100%; } .hero-media { order: 2; width: calc(100% - 32px); max-width: 640px; margin: 30px auto 0; } .hero-frame { padding: 5px; border-radius: 18px; } .hero-photo { border-radius: 14px; } .hero-media::before { inset: 14px -8px auto 14px; aspect-ratio: 3 / 2; border-radius: 22px; } /* around the photo only */ /* reviews card sits under the photo, overlapping only its bottom edge */ .hero-reviews { position: relative; left: auto; bottom: auto; width: fit-content; margin: -24px auto 0; padding: 12px 14px; } .hero-stats { order: 3; grid-template-columns: repeat(2, minmax(0, 1fr)); width: calc(100% - 32px); margin: 20px auto 0; padding: 8px; } .hero-stats li { min-width: 0; justify-content: flex-start; gap: 12px; font-size: 13px; } .hero-stats li + li::before { display: none; } .hero-stats .hero-icon { width: 44px; height: 44px; } .hero-stats .hero-icon svg { width: 22px; height: 22px; } .hero-stats strong { font-size: 18px; } } @media (min-width: 641px) and (max-width: 860px) { .hero-features { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: none; } .hero-actions { flex-direction: row; } .hero-btn { flex: 1; width: auto; } } @media (max-width: 360px) { .hero-badge { font-size: 12px; } .hero-title { font-size: 32px; } .hero-stats li { flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px; } .hero-stats li span:last-child { min-width: 0; overflow-wrap: anywhere; } } /* ========================================================== Effects - CSS only (no script). Moving parts use transform / opacity so the browser animates them on the GPU. All motion sits in the "no-preference" block: visitors who ask their system for less motion get the calm, static version. ========================================================== */ /* ---------- Static polish (always on) ---------- */ .hero-content, .hero-stats { position: relative; z-index: 1; } /* above the light orbs, also on mobile */ /* Two soft light orbs behind the text (kept inside the hero: no sideways scroll) */ .hero::before, .hero::after { content: ""; position: absolute; z-index: 0; width: min(50%, 500px); aspect-ratio: 1; border-radius: 50%; pointer-events: none; } .hero::before { top: 0; left: 0; background: radial-gradient(circle, rgba(235, 183, 65, .32) 0%, rgba(235, 183, 65, 0) 68%); } .hero::after { bottom: 0; left: 6%; width: min(38%, 460px); /* stays in the text column */ background: radial-gradient(circle, rgba(79, 134, 204, .24) 0%, rgba(79, 134, 204, 0) 68%); } .hero-badge { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .7)); box-shadow: 0 0 0 1px rgba(235, 183, 65, .35), 0 6px 18px rgba(11, 37, 69, .06); } .hero-badge svg { color: #d09e25; } .hero-features .hero-icon { position: relative; background: linear-gradient(145deg, #f1f6fd 0%, #dce7f6 100%); box-shadow: inset 0 1px 0 #fff, 0 6px 16px rgba(28, 69, 128, .1); transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s, color .3s; } .hero-btn { position: relative; overflow: hidden; isolation: isolate; transition: background-color .2s, box-shadow .25s, transform .25s cubic-bezier(.2, .7, .2, 1); } .hero-btn-primary { background: linear-gradient(135deg, #f4c85c 0%, #ebb741 45%, #dea22a 100%); box-shadow: 0 8px 22px rgba(214, 160, 40, .32), inset 0 1px 0 rgba(255, 255, 255, .45); } .hero-btn-primary:hover { background: linear-gradient(135deg, #f0c04e 0%, #e2ab30 55%, #d39a22 100%); } @media (hover: hover) { .hero-btn:hover { transform: translateY(-2px); } .hero-btn:active { transform: translateY(0); } .hero-btn-primary:hover { box-shadow: 0 14px 30px rgba(214, 160, 40, .42), inset 0 1px 0 rgba(255, 255, 255, .45); } .hero-btn-outline:hover { box-shadow: 0 10px 24px rgba(23, 58, 120, .14); } .hero-features li:hover .hero-icon { transform: translateY(-4px); color: #b07f12; box-shadow: inset 0 1px 0 #fff, 0 12px 24px rgba(28, 69, 128, .16); } } @media (max-width: 860px) { .hero::before { width: 70%; } .hero::after { top: 30%; bottom: auto; left: 30%; width: 70%; } } /* ---------- Motion ---------- */ @media (prefers-reduced-motion: no-preference) { /* orbs drift slowly */ .hero::before { animation: hero-drift-a 16s ease-in-out infinite alternate; } .hero::after { animation: hero-drift-b 20s ease-in-out infinite alternate; } /* staggered entrance (starts at 1% opacity so the page still counts as painted at once) */ .hero-badge, .hero-title, .hero-text, .hero-features li, .hero-actions, .hero-stats { animation: hero-rise .8s cubic-bezier(.2, .7, .2, 1) both; } .hero-title { animation-delay: .08s; } .hero-text { animation-delay: .16s; } .hero-features li:nth-child(1) { animation-delay: .24s; } .hero-features li:nth-child(2) { animation-delay: .3s; } .hero-features li:nth-child(3) { animation-delay: .36s; } .hero-features li:nth-child(4) { animation-delay: .42s; } .hero-actions { animation-delay: .5s; } .hero-stats { animation-delay: .6s; } .hero-reviews { animation: hero-pop .7s cubic-bezier(.2, .8, .3, 1.15) .9s both; } /* photo card rises in, then floats gently (the whole card moves: the photo is never zoomed or cut) */ .hero-media { animation: hero-rise .9s cubic-bezier(.2, .7, .2, 1) .2s both, hero-float 7s ease-in-out 1.1s infinite alternate; } /* light sweep across the gold words (a band that waits off-screen between sweeps) */ .hero-title span { background-image: linear-gradient(100deg, transparent 38%, #fff8e6 47%, #fff 50%, #fff8e6 53%, transparent 62%), linear-gradient(90deg, #b0820f 0%, #c99a2c 50%, #efd9a0 100%); background-size: 250% 100%, 100% 100%; background-repeat: no-repeat; background-position: 150% 0, 0 0; animation: hero-shine 4.5s ease-in-out 1.2s infinite; } /* badge: sparkle twinkles, a gold gleam crosses the pill */ .hero-badge svg { animation: hero-twinkle 3.2s ease-in-out infinite; } .hero-badge::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 30%, rgba(235, 183, 65, .28) 50%, transparent 70%); transform: translateX(-110%); animation: hero-gleam 5s ease-in-out 1.4s infinite; } /* feature icons: lines draw themselves, then a ring pulses from icon to icon */ .hero-features .hero-icon :is(path, circle) { stroke-dasharray: 100; animation: hero-draw 1.4s cubic-bezier(.4, 0, .2, 1) both; } .hero-features li:nth-child(1) .hero-icon :is(path, circle) { animation-delay: .35s; } .hero-features li:nth-child(2) .hero-icon :is(path, circle) { animation-delay: .45s; } .hero-features li:nth-child(3) .hero-icon :is(path, circle) { animation-delay: .55s; } .hero-features li:nth-child(4) .hero-icon :is(path, circle) { animation-delay: .65s; } .hero-features .hero-icon::after { content: ""; position: absolute; inset: 0; border: 2px solid rgba(28, 69, 128, .45); border-radius: 50%; opacity: 0; pointer-events: none; animation: hero-ring 4s ease-out 1.6s infinite; } .hero-features li:nth-child(2) .hero-icon::after { animation-delay: 2.6s; border-color: rgba(208, 158, 37, .45); } .hero-features li:nth-child(3) .hero-icon::after { animation-delay: 3.6s; } .hero-features li:nth-child(4) .hero-icon::after { animation-delay: 4.6s; border-color: rgba(208, 158, 37, .45); } /* main button: a shine passes every few seconds */ .hero-btn-primary::before { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; z-index: -1; width: 45%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); transform: translateX(0) skewX(-18deg); pointer-events: none; animation: hero-btn-shine 3.5s ease-in-out 1.6s infinite; } } @keyframes hero-rise { from { opacity: .01; transform: translateY(18px); } to { opacity: 1; transform: none; } } @keyframes hero-pop { from { opacity: .01; transform: translateY(12px) scale(.94); } to { opacity: 1; transform: none; } } @keyframes hero-float { from { transform: translateY(0); } to { transform: translateY(-8px); } } @keyframes hero-drift-a { to { transform: translate(6%, 6%) scale(1.06); } } @keyframes hero-drift-b { to { transform: translate(-6%, -6%) scale(1.06); } } @keyframes hero-shine { 0% { background-position: 150% 0, 0 0; } 30%, 100% { background-position: -50% 0, 0 0; } } @keyframes hero-twinkle { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(.72) rotate(45deg); } } @keyframes hero-gleam { 0% { transform: translateX(-110%); } 35%, 100% { transform: translateX(110%); } } @keyframes hero-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } } @keyframes hero-ring { 0% { opacity: .8; transform: scale(1); } 45%, 100% { opacity: 0; transform: scale(1.6); } } @keyframes hero-btn-shine { 0% { transform: translateX(0) skewX(-18deg); } 25%, 100% { transform: translateX(420%) skewX(-18deg); } } /* ---------- Flowing fibers (silk strands drifting across the background) ----------
holds two layers of strands. Each layer is two tiles wide and slides by exactly one tile, so the flow loops without a jump; the layers move in opposite directions at different speeds (depth), with a slow vertical sway. Only transform / translate move: the GPU does the work, no repaint. Faded out at the top and bottom edges. */ .hero-fibers { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%); } .hero-fibers::before, .hero-fibers::after { content: ""; position: absolute; top: 0; left: 0; width: max(200%, 1800px); /* two tiles side by side */ height: 100%; background-size: 50% 100%; background-repeat: repeat-x; will-change: transform; } .hero-fibers::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 600' preserveAspectRatio='none' fill='none'%3E%3Cdefs%3E%3Cfilter id='fg' filterUnits='userSpaceOnUse' x='-1500' y='0' width='4440' height='600'%3E%3CfeGaussianBlur stdDeviation='5'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M-1440 452C-960 302 -480 602 0 452C480 302 960 602 1440 452C1920 302 2400 602 2880 452' stroke='%23ebb741' stroke-opacity='0.5' stroke-width='7' filter='url%28%23fg%29'/%3E%3Cpath d='M0 452C480 302 960 602 1440 452' stroke='%23ebb741' stroke-opacity='0.74' stroke-width='1.6' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M0 458C480 334 960 582 1440 458' stroke='%23ebb741' stroke-opacity='0.41' stroke-width='1.1' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M0 446C480 350 960 542 1440 446' stroke='%235fa8e8' stroke-opacity='0.61' stroke-width='1.3' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M0 462C480 396 960 528 1440 462' stroke='%231c4580' stroke-opacity='0.27' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M0 450C480 414 960 486 1440 450' stroke='%235fa8e8' stroke-opacity='0.41' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M0 456C480 500 960 412 1440 456' stroke='%23ebb741' stroke-opacity='0.34' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M0 444C480 524 960 364 1440 444' stroke='%231c4580' stroke-opacity='0.19' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M0 96C240 56 480 136 720 96C960 56 1200 136 1440 96' stroke='%235fa8e8' stroke-opacity='0.41' stroke-width='1.1' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M0 100C240 74 480 126 720 100C960 74 1200 126 1440 100' stroke='%23ebb741' stroke-opacity='0.47' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M0 92C240 122 480 62 720 92C960 122 1200 62 1440 92' stroke='%231c4580' stroke-opacity='0.16' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); } .hero-fibers::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 600' preserveAspectRatio='none' fill='none'%3E%3Cpath d='M0 300C480 470 960 130 1440 300' stroke='%235fa8e8' stroke-opacity='0.39' stroke-width='1.2' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M0 306C480 446 960 166 1440 306' stroke='%231c4580' stroke-opacity='0.18' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M0 294C480 404 960 184 1440 294' stroke='%23ebb741' stroke-opacity='0.36' stroke-width='1.1' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M0 302C480 182 960 422 1440 302' stroke='%235fa8e8' stroke-opacity='0.23' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); opacity: .85; } @media (max-width: 860px) { .hero-fibers::before, .hero-fibers::after { background-size: 50% 560px; background-repeat: repeat; } .hero-fibers::after { background-position: 0 220px; } } @media (prefers-reduced-motion: no-preference) { .hero-fibers::before { animation: hero-flow 38s linear infinite, hero-sway 9s ease-in-out infinite alternate; } .hero-fibers::after { animation: hero-flow 60s linear infinite reverse, hero-sway 12s ease-in-out -5s infinite alternate; } } @keyframes hero-flow { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } @keyframes hero-sway { from { translate: 0 -8px; } to { translate: 0 8px; } } /* ---------- Richer layer: photo glow, running light, sparkles, title underline ---------- Same rules as above: only transform / opacity move (GPU), everything else is painted once. */ /* soft gold + blue glow breathing behind the photo card */ .hero-media::after { content: ""; position: absolute; inset: -12% -3%; z-index: -2; border-radius: 50%; background: radial-gradient(closest-side, rgba(235, 183, 65, .45), rgba(95, 168, 232, .26) 55%, transparent 100%); pointer-events: none; } /* gold sparkles at the card's corners */ .hero-spark { position: absolute; z-index: 3; width: 22px; aspect-ratio: 1; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C13 8 16 11 24 12C16 13 13 16 12 24C11 16 8 13 0 12C8 11 11 8 12 0Z' fill='%23ebb741'/%3E%3Cpath d='M12 6C12.5 10 14 11.5 18 12C14 12.5 12.5 14 12 18C11.5 14 10 12.5 6 12C10 11.5 11.5 10 12 6Z' fill='%23fff' fill-opacity='.85'/%3E%3C/svg%3E") center / contain no-repeat; pointer-events: none; } .hero-spark--1 { top: -13px; left: -13px; width: 28px; } .hero-spark--2 { top: 14%; right: -11px; width: 17px; } .hero-spark--3 { right: 11%; bottom: -12px; width: 21px; } /* gold brush stroke just below the title (clear of the letters' tails) */ .hero-title { position: relative; } .hero-title + .hero-text { margin-top: 30px; } .hero-title::after { content: ""; position: absolute; top: calc(100% + .04em); left: 0; width: min(100%, 11.5em); height: .26em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 14' preserveAspectRatio='none' fill='none'%3E%3Cdefs%3E%3ClinearGradient id='sw' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23b0820f'/%3E%3Cstop offset='.55' stop-color='%23ebb741'/%3E%3Cstop offset='1' stop-color='%23f6dc95'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M3 10C70 4 170 2 297 6' stroke='url%28%23sw%29' stroke-width='4' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M24 12.5C100 8.5 190 7.5 280 9.5' stroke='url%28%23sw%29' stroke-opacity='.55' stroke-width='2' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat; transform-origin: left center; pointer-events: none; } /* a gleam crosses the reviews bar */ .hero-reviews { overflow: hidden; isolation: isolate; } .hero-reviews::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 30%, rgba(235, 183, 65, .32) 50%, transparent 70%); transform: translateX(-110%); pointer-events: none; } @media (max-width: 860px) { .hero-title::after { left: 19%; width: 62%; } /* centred under the centred title */ .hero-media::after { inset: -8% 0; } .hero-spark--1 { top: -11px; left: -10px; width: 24px; } .hero-spark--2 { right: -9px; width: 15px; } .hero-spark--3 { top: 52%; right: -9px; bottom: auto; width: 18px; } } @media (prefers-reduced-motion: no-preference) { .hero-frame::before { animation: hero-spin 6s linear infinite; } .hero-media::after { animation: hero-glow 5s ease-in-out infinite alternate; } .hero-spark--1 { animation: hero-spark 2.8s ease-in-out infinite; } .hero-spark--2 { animation: hero-spark 3.4s ease-in-out -1.2s infinite; } .hero-spark--3 { animation: hero-spark 3.1s ease-in-out -2.1s infinite; } .hero-title::after { animation: hero-swoosh 1.1s cubic-bezier(.6, 0, .2, 1) .75s both; } .hero-reviews::after { animation: hero-gleam 4.5s ease-in-out 2.2s infinite; } } @keyframes hero-spin { to { transform: rotate(360deg); } } @keyframes hero-glow { from { opacity: .55; transform: scale(.97); } to { opacity: 1; transform: scale(1.02); } } @keyframes hero-spark { 0%, 100% { opacity: .45; transform: scale(.55) rotate(0deg); } 50% { opacity: 1; transform: scale(1.1) rotate(90deg); } } @keyframes hero-swoosh { from { transform: scaleX(0); } to { transform: scaleX(1); } }