eddie/stellaamor.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

New stella design

Browse Source
This commit is contained in:
edsea
2025-08-06 05:09:22 +02:00
parent 24c3640f05
commit 8ec1ba9756
70 changed files with 1808 additions and 481 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
rss/css/theme.css
View File

@@ -41,6 +41,8 @@ header nav {
display: flex;
flex-direction: column;
position: absolute;
opacity: 0;
transition: all 0.3s;
}
header nav.open {
top: 99%;
@@ -50,6 +52,8 @@ header nav {
background-color: #fff;
height: auto;
z-index: -1;
opacity: 1;
transition: all 0.3s;
box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.12);
}
header nav.open a {
@@ -76,13 +80,13 @@ header nav .menu-item::after {
left: 0;
height: 2px;
width: 100%;
background: #B54418;
background: #aa0b3d;
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s;
}
header nav .menu-item:hover {
color: #B54418;
color: #aa0b3d;
cursor: pointer;
}
header nav .menu-item:hover::after {
@@ -107,6 +111,9 @@ header .mobile-toggler {
opacity: 0;
animation: slideUp 1s ease-in-out forwards;
}
.home-banner.no-height {
height: auto !important;
}
@media (max-width: 768px) {
.home-banner {
height: 100vh;
@@ -228,6 +235,12 @@ header .mobile-toggler {
background-position: center center;
background-size: cover;
}
.display-banner.kissing-banner {
background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url("/rss/img/couple-kissing.jpg");
padding: 180px 0px;
background-position: center center;
background-size: cover;
}
.display-banner.moving-banner {
background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url("/rss/img/couple.jpg");
background-position: center 40%;
@@ -406,9 +419,9 @@ section .bolder {
}
.section-animation {
opacity: 0; /* Start hidden */
transform: translateY(50px); /* Slide up from 50px below */
transition: opacity 0.8s ease-out, transform 0.8s ease-out; /* Smooth transition */
opacity: 0;
transform: translateY(50px);
transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.section-animation.visible {
@@ -416,7 +429,86 @@ section .bolder {
transform: translateY(0);
}
/* Accessibility for reduced motion */
.user-container {
width: 100%;
height: calc(100vh - 110px);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
}
@media (max-width: 768px) {
.user-container {
height: auto;
padding: 20px 0px;
}
}
@media (max-width: 768px) {
.user-container.alt .user-card {
display: flex;
flex-direction: column-reverse;
}
}
.user-container .user-card {
border-radius: 12px;
background-color: rgba(255, 255, 255, 0.9058823529);
display: flex;
width: 100%;
flex-direction: row;
}
@media (max-width: 768px) {
.user-container .user-card {
flex-direction: column;
height: auto;
}
}
.user-container .user-card .form {
background-color: #FFF;
padding: 20px 0px;
flex: 40%;
max-width: 40%;
display: flex;
align-items: center;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
border-radius: 12px;
}
@media (max-width: 768px) {
.user-container .user-card .form {
flex: 100%;
max-width: 100%;
border-radius: 12px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
}
}
.user-container .user-card .form .user-form {
padding: 10px 15px;
width: 100%;
}
.user-container .user-card .text-col {
flex: 60%;
max-width: 60%;
padding: 30px 20px;
}
@media (max-width: 768px) {
.user-container .user-card .text-col {
flex: 100%;
max-width: 100%;
}
}
.user-container .user-card .text-col .logo {
display: flex;
flex-direction: row;
justify-content: center;
}
.user-container .user-card .text-col .logo img {
width: 180px;
}
.user-container .user-card .text-col .text {
margin-top: 20px;
}
@media (prefers-reduced-motion: reduce) {
.section-animation {
opacity: 1;