.home-hero {
position: relative;
overflow: hidden;
}
.home-hero:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(180deg, #00050e -20.69%, #222934 53.39%, #0d111a 95.05%);
}
.home-hero .hero-content {
position: relative;
z-index: 10;
}
.home-hero .decorative-shapes {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 2;
}
.home-hero .decorative-shapes .shape-asterisk {
position: absolute;
left: 6%;
bottom: 22%;
}
@media (min-width: 1024px) {
.home-hero .decorative-shapes .shape-asterisk {
left: 19%;
bottom: 12%;
}
}
@media (min-width: 1280px) {
.home-hero .decorative-shapes .shape-asterisk {
left: 14%;
bottom: 22%;
}
}
.home-hero .decorative-shapes .shape-arrow {
position: absolute;
top: 20%;
right: 5%;
}
@media (min-width: 1024px) {
.home-hero .decorative-shapes .shape-arrow {
right: 8%;
}
}
@media (min-width: 1280px) {
.home-hero .decorative-shapes .shape-arrow {
right: 15%;
}
}
@media (min-width: 1536px) {
.home-hero .decorative-shapes .shape-arrow {
right: 20%;
}
}
.home-hero .decorative-shapes .shape-bar {
position: absolute;
right: 8%;
bottom: 20%;
}
@media (min-width: 640px) {
.home-hero .decorative-shapes .shape-bar {
right: 15%;
}
}
@media (min-width: 1024px) {
.home-hero .decorative-shapes .shape-bar {
right: 30%;
}
}
.home-hero .mockup-card {
background: white;
border-radius: 8px;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
padding: 1rem;
transform: rotate(3deg);
}
.home-hero .decorative-shapes > * {
animation: float 6s ease-in-out infinite;
}
.home-hero .decorative-shapes .shape-arrow {
animation-delay: -2s;
}
.home-hero .decorative-shapes .shape-bar {
animation-delay: -4s;
}
.shape-asterisk {
background-image: url(//alextourigny.ca/wp-content/themes/alextourigny-tailwind/assets/images/home-hero/asterisk.svg);
height: 75px;
width: 75px;
}
@media (min-width: 640px) {
.shape-asterisk {
height: 100px;
width: 100px;
}
}
@media (min-width: 1536px) {
.shape-asterisk {
height: 130px;
width: 130px;
}
}
.shape-bar {
background-image: url(//alextourigny.ca/wp-content/themes/alextourigny-tailwind/assets/images/home-hero/bar.svg);
height: 15px;
width: 100px;
}
@media (min-width: 640px) {
.shape-bar {
height: 20px;
width: 140px;
}
}
@media (min-width: 1536px) {
.shape-bar {
height: 30px;
width: 140px;
}
}
.shape-arrow {
background-image: url(//alextourigny.ca/wp-content/themes/alextourigny-tailwind/assets/images/home-hero/arrow.svg);
height: 75px;
width: 50px;
}
@media (min-width: 640px) {
.shape-arrow {
height: 120px;
width: 80px;
}
}
@media (min-width: 1536px) {
.shape-arrow {
height: 150px;
width: 100px;
}
}
.shape-bar, .shape-arrow, .shape-asterisk {
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.cta-button {
transition: all 0.3s ease;
}
.cta-button:hover {
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}