Design language tweaks v3

This commit is contained in:
2026-05-15 16:27:39 +12:00
parent 580d600c47
commit b950229003
14 changed files with 2746 additions and 246 deletions
@@ -201,13 +201,6 @@
</button>
<div bind:this={stageEl} class="testimonial-stage" on:scroll={handleStageScroll}>
<div class="testimonial-woof" aria-hidden="true">
<span class="testimonial-woof-text">WOOF</span>
<span class="testimonial-ray testimonial-ray-1"></span>
<span class="testimonial-ray testimonial-ray-2"></span>
<span class="testimonial-ray testimonial-ray-3"></span>
</div>
{#each slides as testimonial, index}
<article class:testimonial-slide-active={index === activeIndex} class="testimonial-slide">
<div class="testimonial-photo-wrap">
@@ -619,54 +612,6 @@
display: none;
}
.testimonial-woof {
position: absolute;
top: 40px;
right: 60px;
z-index: 2;
color: #2e3031;
transform: rotate(-6deg);
transform-origin: center center;
}
.testimonial-woof-text {
display: inline-block;
font-family: 'Fredoka', 'Fredoka One', var(--font-head), sans-serif;
font-size: 32px;
line-height: 1;
letter-spacing: 0.02em;
}
.testimonial-ray {
position: absolute;
border-radius: 999px;
background: #ffd100;
}
.testimonial-ray-1 {
top: -12px;
right: -48px;
width: 32px;
height: 11px;
transform: rotate(-35deg);
}
.testimonial-ray-2 {
top: 6px;
right: -60px;
width: 46px;
height: 13px;
transform: rotate(-35deg);
}
.testimonial-ray-3 {
top: 24px;
right: -50px;
width: 36px;
height: 11px;
transform: rotate(-35deg);
}
.testimonial-arrow {
position: absolute;
top: 50%;
@@ -715,9 +660,6 @@
font-size: 17px;
}
.testimonial-woof {
right: 40px;
}
}
@media (max-width: 767px) {
@@ -825,39 +767,6 @@
font-size: 20px;
}
.testimonial-woof {
top: 16px;
right: 18px;
}
.testimonial-woof-text {
font-size: 22px;
}
.testimonial-ray {
right: -28px;
width: 9px;
}
.testimonial-ray-1 {
top: -7px;
height: 34px;
}
.testimonial-ray-2 {
top: 10px;
right: -38px;
width: 34px;
height: 9px;
}
.testimonial-ray-3 {
top: 35px;
right: -28px;
width: 27px;
height: 8px;
}
.testimonial-arrow-left,
.testimonial-arrow-right {
display: none;