375db3c3f7
Implement responsive announcement bar with gradient background and hover effects using modern CSS features like nesting and clamp() for fluid typography
75 lines
1.7 KiB
CSS
75 lines
1.7 KiB
CSS
.announcement-bar {
|
|
display: block;
|
|
background: linear-gradient(135deg, var(--color-green), var(--color-blue));
|
|
padding: 0.8rem 1rem;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
text-align: center;
|
|
transition: filter 0.5s ease;
|
|
&:hover {
|
|
filter: brightness(1.15);
|
|
}
|
|
}
|
|
|
|
.announcement-bar__content {
|
|
color: white;
|
|
font-size: clamp(0.95rem, 2.5vw, 1rem);
|
|
line-height: 1.4;
|
|
margin: 0 auto;
|
|
text-align: center;
|
|
max-width: 42rem;
|
|
}
|
|
|
|
.announcement-bar__arrow {
|
|
display: inline-block;
|
|
color: white;
|
|
transition: transform 0.2s ease;
|
|
margin-left: 0.3rem;
|
|
.announcement-bar:hover & {
|
|
transform: translateX(0.3rem);
|
|
}
|
|
}
|
|
|
|
.hero {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-end;
|
|
padding: 1rem 0.4rem;
|
|
/*background-color: #cecece;*/
|
|
background-image: url(hero-bg.webp);
|
|
background-size: cover;
|
|
background-position: 30% 80%;
|
|
min-height: 40vh;
|
|
text-wrap: balance;
|
|
.textbox {
|
|
max-width: 42rem;
|
|
margin: 0 auto;
|
|
h1 {
|
|
background-color: white;
|
|
width: clamp(75%, 60vw, 80%);
|
|
display: inline;
|
|
font-size: clamp(2.2rem, 6vw, 3rem);
|
|
padding: 0 0.5rem;
|
|
line-height: 1.5;
|
|
box-decoration-break: clone;
|
|
-webkit-box-decoration-break: clone;
|
|
}
|
|
}
|
|
}
|
|
|
|
.cta-section {
|
|
background: linear-gradient(135deg, var(--color-green), var(--color-blue));
|
|
padding: 1rem 1rem 2rem 1rem;
|
|
margin-top: 3rem;
|
|
text-align: center;
|
|
|
|
.cta-content {
|
|
margin: 0 auto;
|
|
|
|
p {
|
|
color: white;
|
|
font-size: clamp(1.1rem, 3vw, 1.3rem);
|
|
line-height: 1.5;
|
|
}
|
|
}
|
|
}
|