Testimonails and Introscript updates

This commit is contained in:
2026-05-03 11:16:53 +12:00
parent 751c2d7e98
commit f27e0fed07
13 changed files with 191 additions and 23 deletions
+70 -2
View File
@@ -67,6 +67,7 @@ section {
.intro-trust-mark {
display: inline-flex;
position: relative;
align-items: center;
justify-content: center;
width: 56px;
@@ -75,9 +76,50 @@ section {
background: #fff;
color: #e00706;
font-size: 24px;
overflow: hidden;
box-shadow: inset 0 0 0 1px rgba(14, 27, 41, 0.08);
}
.intro-trust-mark-link {
text-decoration: none;
isolation: isolate;
transition:
transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.22s ease;
}
.intro-trust-mark-link::after {
content: '';
position: absolute;
inset: -30% 35%;
background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0.92) 50%, rgba(255, 255, 255, 0.2) 70%, transparent 100%);
transform: translateX(-220%) rotate(18deg);
opacity: 0;
pointer-events: none;
animation: introGoogleShine 4.8s ease-in-out infinite;
}
.intro-trust-mark-link:hover,
.intro-trust-mark-link:focus-visible {
transform: translateY(-1px) scale(1.04);
box-shadow:
inset 0 0 0 1px rgba(14, 27, 41, 0.08),
0 10px 24px rgba(17, 20, 24, 0.12);
}
.intro-trust-mark-link:focus-visible {
outline: 2px solid rgba(10, 48, 78, 0.28);
outline-offset: 3px;
}
.intro-google-logo {
display: block;
position: relative;
z-index: 1;
width: 28px;
height: auto;
}
.intro-trust-copy {
min-width: 0;
}
@@ -107,7 +149,7 @@ section {
font-size: 14px;
}
#intro a {
.intro-trust-cta {
display: inline-flex;
align-items: center;
gap: 8px;
@@ -121,11 +163,37 @@ section {
box-shadow: inset 0 0 0 1px rgba(14, 27, 41, 0.08);
}
#intro a .icon {
.intro-trust-cta .icon {
color: #e00706;
font-size: 20px;
}
@keyframes introGoogleShine {
0%,
64%,
100% {
transform: translateX(-220%) rotate(18deg);
opacity: 0;
}
72% {
opacity: 1;
}
84% {
transform: translateX(220%) rotate(18deg);
opacity: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.intro-trust-mark-link,
.intro-trust-mark-link::after {
animation: none;
transition: none;
}
}
#promise,
#testimonials,
#info {