New stella design
This commit is contained in:
edsea
@@ -30,6 +30,7 @@ body {
|
||||
|
||||
a {
|
||||
all: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -27,6 +27,7 @@ body {
|
||||
|
||||
a{
|
||||
all: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6{
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -1 +1 @@
|
||||
{"version":3,"sources":["variables.scss","theme.scss","theme.css"],"names":[],"mappings":"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","file":"theme.css"}
|
||||
{"version":3,"sources":["variables.scss","theme.scss","theme.css"],"names":[],"mappings":"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","file":"theme.css"}
|
||||
@@ -1,107 +1,114 @@
|
||||
@import 'variables';
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0.7rem 2rem;
|
||||
background-color: #ffffff;
|
||||
align-items: center;
|
||||
box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.12);
|
||||
position: relative;
|
||||
z-index: 999;
|
||||
font-family: "Nunito", sans-serif;
|
||||
background-color: #fff;
|
||||
|
||||
@media(max-width:768px) {
|
||||
// height: 48px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 100px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0.7rem 2rem;
|
||||
background-color: #ffffff;
|
||||
align-items: center;
|
||||
box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.12);
|
||||
position: relative;
|
||||
z-index: 999;
|
||||
font-family: "Nunito", sans-serif;
|
||||
cursor: pointer;
|
||||
background-color: #fff;
|
||||
|
||||
@media(max-width:768px){
|
||||
// height: 48px;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 100px;
|
||||
display: flex;
|
||||
z-index: 999;
|
||||
cursor: pointer;
|
||||
nav {
|
||||
display: flex;
|
||||
position: relative;
|
||||
z-index: -1;
|
||||
|
||||
@media(max-width:768px) {
|
||||
top: -200%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
transition: all 0.3s;
|
||||
|
||||
&.open {
|
||||
top: 99%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
transition: all 0.3s;
|
||||
// padding: 5px 10px;
|
||||
background-color: #fff;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
nav {
|
||||
display: flex;
|
||||
position: relative;
|
||||
height: auto;
|
||||
z-index: -1;
|
||||
opacity: 1;
|
||||
transition: all 0.3s;
|
||||
box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.12);
|
||||
|
||||
@media(max-width:768px){
|
||||
top: -200%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
&.open{
|
||||
top: 99%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
transition: all 0.3s;
|
||||
// padding: 5px 10px;
|
||||
background-color: #fff;
|
||||
height: auto;
|
||||
z-index: -1;
|
||||
box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.12);
|
||||
a{
|
||||
padding: 7px 10px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
a {
|
||||
padding: 7px 10px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
color: #000000;
|
||||
font-weight: 500;
|
||||
margin-right: 15px;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
transition: color 0.3s;
|
||||
font-size: 16px;
|
||||
|
||||
&.active {
|
||||
font-weight: bold;
|
||||
// color: #your-brand-color;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 120%;
|
||||
left: 0;
|
||||
height: 2px;
|
||||
width: 100%;
|
||||
background: #B54418;
|
||||
transform: scaleX(0);
|
||||
transform-origin: left;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: #B54418;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&:hover::after {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-toggler{
|
||||
background-color: #fff;
|
||||
border: none;
|
||||
font-size: 18px;
|
||||
@media(min-width: 769px){
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
color: #000000;
|
||||
font-weight: 500;
|
||||
margin-right: 15px;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
transition: color 0.3s;
|
||||
font-size: 16px;
|
||||
|
||||
&.active {
|
||||
font-weight: bold;
|
||||
// color: #your-brand-color;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 120%;
|
||||
left: 0;
|
||||
height: 2px;
|
||||
width: 100%;
|
||||
background: #{map-get($colors, primary)};
|
||||
transform: scaleX(0);
|
||||
transform-origin: left;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: #{map-get($colors, primary)};
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&:hover::after {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-toggler {
|
||||
background-color: #fff;
|
||||
border: none;
|
||||
font-size: 18px;
|
||||
|
||||
@media(min-width: 769px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.home-banner {
|
||||
@@ -111,11 +118,13 @@ header {
|
||||
background-color: #{map-get($colors, white)};
|
||||
opacity: 0;
|
||||
animation: slideUp 1s ease-in-out forwards;
|
||||
// animation-delay: 0.2s;
|
||||
// animation-delay: 0.2s;
|
||||
|
||||
&.no-height{
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
|
||||
@media(max-width:768px){
|
||||
@media(max-width:768px) {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
@@ -125,20 +134,20 @@ header {
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
|
||||
|
||||
|
||||
.container {
|
||||
height: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
.inner-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: stretch;
|
||||
height: 100%;
|
||||
|
||||
@media(max-width:768px){
|
||||
flex-direction: column;
|
||||
}
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: stretch;
|
||||
height: 100%;
|
||||
|
||||
@media(max-width:768px) {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.image-col {
|
||||
@@ -147,7 +156,7 @@ header {
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
img{
|
||||
img {
|
||||
border-radius: 12px;
|
||||
box-shadow: #{map-get($shadows, 3)};
|
||||
}
|
||||
@@ -160,44 +169,47 @@ header {
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
|
||||
@media(max-width: 768px){
|
||||
@media(max-width: 768px) {
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%;
|
||||
text-align: center;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
.title{
|
||||
.title {
|
||||
font-weight: 800;
|
||||
font-size: 3.7rem;
|
||||
line-height: 1.2;
|
||||
font-family: $font-family-base;
|
||||
|
||||
@media(max-width:768px){
|
||||
font-size: 3.2rem;
|
||||
@media(max-width:768px) {
|
||||
font-size: 3.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.lead{
|
||||
.lead {
|
||||
font-size: 1.6rem;
|
||||
font-weight: 400;
|
||||
|
||||
@media(max-width:768px){
|
||||
font-size: 1.3rem;
|
||||
@media(max-width:768px) {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
}
|
||||
.cta-btn{
|
||||
|
||||
.cta-btn {
|
||||
padding: 10px;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
.login-text{
|
||||
|
||||
.login-text {
|
||||
display: inline-flex;
|
||||
gap: 5px;
|
||||
font-weight: 400;
|
||||
.login-link{
|
||||
font-weight: 500;
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
|
||||
.login-link {
|
||||
font-weight: 500;
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -209,7 +221,7 @@ header {
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
|
||||
@media(max-width: 768px){
|
||||
@media(max-width: 768px) {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
@@ -234,100 +246,110 @@ header {
|
||||
|
||||
// Banners
|
||||
.display-banner {
|
||||
width: 100%;
|
||||
padding: 120px 0px;
|
||||
width: 100%;
|
||||
padding: 120px 0px;
|
||||
|
||||
&.wedding-banner {
|
||||
background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)),
|
||||
url('/rss/img/wedding.jpg');
|
||||
padding: 180px 0px;
|
||||
background-position: center center;
|
||||
background-size: cover;
|
||||
}
|
||||
&.wedding-banner {
|
||||
background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)),
|
||||
url('/rss/img/wedding.jpg');
|
||||
padding: 180px 0px;
|
||||
background-position: center center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
&.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%;
|
||||
background-size: cover;
|
||||
padding: 180px 0px;
|
||||
}
|
||||
&.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;
|
||||
}
|
||||
|
||||
&.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%;
|
||||
background-size: cover;
|
||||
padding: 180px 0px;
|
||||
}
|
||||
}
|
||||
|
||||
// Footer
|
||||
footer {
|
||||
background-color: #{map-get($colors, 'dark')};
|
||||
color: #fff;
|
||||
display: flex;
|
||||
padding: 25px 0px;
|
||||
font-size: 14px;
|
||||
font-weight: 300;
|
||||
background-color: #{map-get($colors, 'dark')};
|
||||
color: #fff;
|
||||
display: flex;
|
||||
padding: 25px 0px;
|
||||
font-size: 14px;
|
||||
font-weight: 300;
|
||||
|
||||
.logo {
|
||||
width: 125px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.logo {
|
||||
width: 125px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
|
||||
.features-section {
|
||||
|
||||
h2 {
|
||||
font-size: map-get($font-sizes, xl);
|
||||
color: map-get($colors, dark);
|
||||
}
|
||||
h2 {
|
||||
font-size: map-get($font-sizes, xl);
|
||||
color: map-get($colors, dark);
|
||||
}
|
||||
|
||||
.theme-card {
|
||||
border-radius: map-get($border-radius-sizes, md);
|
||||
overflow: hidden;
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
.theme-card {
|
||||
border-radius: map-get($border-radius-sizes, md);
|
||||
overflow: hidden;
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
|
||||
.card-header {
|
||||
padding: #{map-get($spacing, "2")};
|
||||
text-align: center;
|
||||
.card-header {
|
||||
padding: #{map-get($spacing, "2")};
|
||||
text-align: center;
|
||||
|
||||
img {
|
||||
width: 125px;
|
||||
height: 125px;
|
||||
border-radius: 50%;
|
||||
box-shadow: map-get($shadows, 2);
|
||||
object-fit: cover;
|
||||
margin: 0 auto;
|
||||
img {
|
||||
width: 125px;
|
||||
height: 125px;
|
||||
border-radius: 50%;
|
||||
box-shadow: map-get($shadows, 2);
|
||||
object-fit: cover;
|
||||
margin: 0 auto;
|
||||
|
||||
&.object-left{
|
||||
object-position: left center;
|
||||
}
|
||||
&.object-center{
|
||||
object-position: center center;
|
||||
}
|
||||
&.object-bottom{
|
||||
object-position: bottom center;
|
||||
}
|
||||
}
|
||||
&.object-left {
|
||||
object-position: left center;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: #{map-get($spacing, "3")};
|
||||
text-align: center;
|
||||
&.object-center {
|
||||
object-position: center center;
|
||||
}
|
||||
|
||||
&.object-bottom {
|
||||
object-position: bottom center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: #{map-get($spacing, "3")};
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Fix before release
|
||||
// Theme fonts
|
||||
.styled-title{
|
||||
font-family: "Nunito", sans-serif;
|
||||
.styled-title {
|
||||
font-family: "Nunito", sans-serif;
|
||||
|
||||
&.fw-900{
|
||||
font-weight: 900;
|
||||
}
|
||||
&.fw-900 {
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
&.fw-600{
|
||||
font-weight: 600;
|
||||
}
|
||||
&.fw-600 {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -370,9 +392,11 @@ footer {
|
||||
.filter-card {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.filter-icon {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.filter-title {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
@@ -387,75 +411,76 @@ footer {
|
||||
// Images
|
||||
|
||||
// Rounded col images
|
||||
.rounded-col-image{
|
||||
height: 450px;
|
||||
width: 450px;
|
||||
.rounded-col-image {
|
||||
height: 450px;
|
||||
width: 450px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
@media(max-width:1200px) {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
@media(max-width:920px) {
|
||||
width: 225px;
|
||||
height: 225px;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
-webkit-box-shadow: inset 0px 0px 27px -5px rgba(2, 2, 2, 1);
|
||||
-moz-box-shadow: inset 0px 0px 27px -5px rgba(2, 2, 2, 1);
|
||||
box-shadow: inset 0px 0px 27px -5px rgba(2, 2, 2, 1);
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
|
||||
@media(max-width:1200px){
|
||||
width: 300px;
|
||||
height:300px;
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width:920px){
|
||||
width:225px;
|
||||
height: 225px;
|
||||
}
|
||||
|
||||
&:before{
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
-webkit-box-shadow: inset 0px 0px 27px -5px rgba(2, 2, 2, 1);
|
||||
-moz-box-shadow: inset 0px 0px 27px -5px rgba(2, 2, 2, 1);
|
||||
box-shadow: inset 0px 0px 27px -5px rgba(2, 2, 2, 1);
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
|
||||
}
|
||||
|
||||
img{
|
||||
object-fit: cover;
|
||||
object-position: right;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
img {
|
||||
object-fit: cover;
|
||||
object-position: right;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
section{
|
||||
h2{
|
||||
font-size: 1.8rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
h3{
|
||||
font-size: 1.6rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
section {
|
||||
h2 {
|
||||
font-size: 1.8rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
p{
|
||||
font-size: 1.2rem;
|
||||
h3 {
|
||||
font-size: 1.6rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.4;
|
||||
}
|
||||
}
|
||||
|
||||
.bolder{
|
||||
font-weight: 600;
|
||||
}
|
||||
.bolder {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.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 {
|
||||
@@ -463,7 +488,101 @@ section{
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* Accessibility for reduced motion */
|
||||
.user-container {
|
||||
width: 100%;
|
||||
height: calc(100vh - 110px);
|
||||
// background-image: url('/rss/img/happy-kissing.jpg');
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
@media(max-width: 768px) {
|
||||
height: auto;
|
||||
padding: 20px 0px;
|
||||
}
|
||||
|
||||
&.alt {
|
||||
// background-image: url('/rss/img/happy-kissing-2.jpg') !important;
|
||||
|
||||
.user-card {
|
||||
|
||||
@media(max-width: 768px) {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user-card {
|
||||
border-radius: 12px;
|
||||
background-color: #ffffffe7;
|
||||
// box-shadow: #{map-get($shadows, 3)};
|
||||
display: flex;
|
||||
// min-height: 60vh;
|
||||
// height: 60vh;
|
||||
width: 100%;
|
||||
flex-direction: row;
|
||||
// overflow: hidden;
|
||||
|
||||
@media(max-width: 768px) {
|
||||
flex-direction: column;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.form {
|
||||
background-color: #FFF;
|
||||
padding: 20px 0px;
|
||||
// height: 100%;
|
||||
flex: 40%;
|
||||
max-width: 40%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-shadow: #{map-get($shadows, 3)};
|
||||
border-radius: 12px;
|
||||
|
||||
@media(max-width: 768px) {
|
||||
flex: 100%;
|
||||
max-width: 100%;
|
||||
border-radius: 12px;
|
||||
box-shadow: #{map-get($shadows, 2)};
|
||||
}
|
||||
|
||||
.user-form {
|
||||
padding: 10px 15px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.text-col {
|
||||
flex: 60%;
|
||||
max-width: 60%;
|
||||
padding: 30px 20px;
|
||||
|
||||
@media(max-width: 768px) {
|
||||
flex: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
|
||||
img {
|
||||
width: 180px;
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.section-animation {
|
||||
opacity: 1;
|
||||
@@ -477,6 +596,7 @@ section{
|
||||
transform: translateY(50px);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
|
||||
Reference in New Issue
Block a user