Add landing pages

This commit is contained in:
edsea
2025-11-20 02:40:02 +01:00
parent aeb1ecd50a
commit 61d3738b26
42 changed files with 1901 additions and 526 deletions

View File

@@ -24,7 +24,7 @@ body {
font-family: "Nunito", sans-serif;
font-size: 1.1rem;
line-height: 1.3;
color: #212529;
color: #242627;
background-color: #ffffff;
}
@@ -296,11 +296,11 @@ h6, .h6 {
}
.text-dark {
color: #212529 !important;
color: #242627 !important;
}
.bg-dark {
background-color: #212529 !important;
background-color: #242627 !important;
}
.text-white {
@@ -351,6 +351,46 @@ h6, .h6 {
background-color: transparent !important;
}
.text-purple {
color: #540f89 !important;
}
.bg-purple {
background-color: #540f89 !important;
}
.text-dark-red {
color: #1e1717 !important;
}
.bg-dark-red {
background-color: #1e1717 !important;
}
.text-dark-red-alt {
color: rgba(30, 23, 23, 0.6235294118) !important;
}
.bg-dark-red-alt {
background-color: rgba(30, 23, 23, 0.6235294118) !important;
}
.text-dark-purple {
color: #0F172A !important;
}
.bg-dark-purple {
background-color: #0F172A !important;
}
.text-dark-purple-alt {
color: rgba(15, 23, 42, 0.6235294118) !important;
}
.bg-dark-purple-alt {
background-color: rgba(15, 23, 42, 0.6235294118) !important;
}
/* Margin and padding utilities */
.m-0 {
margin: 0 !important;
@@ -1884,7 +1924,7 @@ h6, .h6 {
padding: 0.4rem;
}
.card .card-header.theme-header {
background-color: #212529 !important;
background-color: #242627 !important;
color: rgba(170, 11, 61, 0.6588235294);
}
.card .card-body {
@@ -2115,16 +2155,16 @@ h6, .h6 {
}
.btn-dark {
background-color: #212529;
background-color: #242627;
color: #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.btn-dark:hover {
background-color: rgb(14.8054054054, 16.6, 18.3945945946);
background-color: rgb(16.416, 17.328, 17.784);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.btn-dark:focus-visible {
box-shadow: 0 0 0 3px rgba(33, 37, 41, 0.4);
box-shadow: 0 0 0 3px rgba(36, 38, 39, 0.4);
}
.btn-dark:disabled {
opacity: 0.6;
@@ -2240,6 +2280,96 @@ h6, .h6 {
pointer-events: none;
}
.btn-purple {
background-color: #540f89;
color: #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.btn-purple:hover {
background-color: rgb(61.4526315789, 10.9736842105, 100.2263157895);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.btn-purple:focus-visible {
box-shadow: 0 0 0 3px rgba(84, 15, 137, 0.4);
}
.btn-purple:disabled {
opacity: 0.6;
cursor: not-allowed;
pointer-events: none;
}
.btn-dark-red {
background-color: #1e1717;
color: #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.btn-dark-red:hover {
background-color: rgb(6.9056603774, 5.2943396226, 5.2943396226);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.btn-dark-red:focus-visible {
box-shadow: 0 0 0 3px rgba(30, 23, 23, 0.4);
}
.btn-dark-red:disabled {
opacity: 0.6;
cursor: not-allowed;
pointer-events: none;
}
.btn-dark-red-alt {
background-color: rgba(30, 23, 23, 0.6235294118);
color: #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.btn-dark-red-alt:hover {
background-color: rgba(6.9056603774, 5.2943396226, 5.2943396226, 0.6235294118);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.btn-dark-red-alt:focus-visible {
box-shadow: 0 0 0 3px rgba(30, 23, 23, 0.4);
}
.btn-dark-red-alt:disabled {
opacity: 0.6;
cursor: not-allowed;
pointer-events: none;
}
.btn-dark-purple {
background-color: #0F172A;
color: #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.btn-dark-purple:hover {
background-color: rgb(4.2631578947, 6.5368421053, 11.9368421053);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.btn-dark-purple:focus-visible {
box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.4);
}
.btn-dark-purple:disabled {
opacity: 0.6;
cursor: not-allowed;
pointer-events: none;
}
.btn-dark-purple-alt {
background-color: rgba(15, 23, 42, 0.6235294118);
color: #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.btn-dark-purple-alt:hover {
background-color: rgba(4.2631578947, 6.5368421053, 11.9368421053, 0.6235294118);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.btn-dark-purple-alt:focus-visible {
box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.4);
}
.btn-dark-purple-alt:disabled {
opacity: 0.6;
cursor: not-allowed;
pointer-events: none;
}
/* Outline buttons */
.btn-outline-primary {
background-color: transparent;
@@ -2414,16 +2544,16 @@ h6, .h6 {
.btn-outline-dark {
background-color: transparent;
border: 2px solid #212529;
color: #212529;
border: 2px solid #242627;
color: #242627;
}
.btn-outline-dark:hover {
background-color: #212529;
background-color: #242627;
color: #fff;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.btn-outline-dark:focus-visible {
box-shadow: 0 0 0 3px rgba(33, 37, 41, 0.4);
box-shadow: 0 0 0 3px rgba(36, 38, 39, 0.4);
}
.btn-outline-dark:disabled {
opacity: 0.6;
@@ -2545,6 +2675,101 @@ h6, .h6 {
pointer-events: none;
}
.btn-outline-purple {
background-color: transparent;
border: 2px solid #540f89;
color: #540f89;
}
.btn-outline-purple:hover {
background-color: #540f89;
color: #fff;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.btn-outline-purple:focus-visible {
box-shadow: 0 0 0 3px rgba(84, 15, 137, 0.4);
}
.btn-outline-purple:disabled {
opacity: 0.6;
cursor: not-allowed;
pointer-events: none;
}
.btn-outline-dark-red {
background-color: transparent;
border: 2px solid #1e1717;
color: #1e1717;
}
.btn-outline-dark-red:hover {
background-color: #1e1717;
color: #fff;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.btn-outline-dark-red:focus-visible {
box-shadow: 0 0 0 3px rgba(30, 23, 23, 0.4);
}
.btn-outline-dark-red:disabled {
opacity: 0.6;
cursor: not-allowed;
pointer-events: none;
}
.btn-outline-dark-red-alt {
background-color: transparent;
border: 2px solid rgba(30, 23, 23, 0.6235294118);
color: rgba(30, 23, 23, 0.6235294118);
}
.btn-outline-dark-red-alt:hover {
background-color: rgba(30, 23, 23, 0.6235294118);
color: #fff;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.btn-outline-dark-red-alt:focus-visible {
box-shadow: 0 0 0 3px rgba(30, 23, 23, 0.4);
}
.btn-outline-dark-red-alt:disabled {
opacity: 0.6;
cursor: not-allowed;
pointer-events: none;
}
.btn-outline-dark-purple {
background-color: transparent;
border: 2px solid #0F172A;
color: #0F172A;
}
.btn-outline-dark-purple:hover {
background-color: #0F172A;
color: #fff;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.btn-outline-dark-purple:focus-visible {
box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.4);
}
.btn-outline-dark-purple:disabled {
opacity: 0.6;
cursor: not-allowed;
pointer-events: none;
}
.btn-outline-dark-purple-alt {
background-color: transparent;
border: 2px solid rgba(15, 23, 42, 0.6235294118);
color: rgba(15, 23, 42, 0.6235294118);
}
.btn-outline-dark-purple-alt:hover {
background-color: rgba(15, 23, 42, 0.6235294118);
color: #fff;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.btn-outline-dark-purple-alt:focus-visible {
box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.4);
}
.btn-outline-dark-purple-alt:disabled {
opacity: 0.6;
cursor: not-allowed;
pointer-events: none;
}
/* Ghost buttons */
.btn-ghost-primary {
background-color: transparent;
@@ -2710,15 +2935,15 @@ h6, .h6 {
.btn-ghost-dark {
background-color: transparent;
color: #212529;
color: #242627;
border: none;
}
.btn-ghost-dark:hover {
background-color: rgba(33, 37, 41, 0.1);
background-color: rgba(36, 38, 39, 0.1);
box-shadow: none;
}
.btn-ghost-dark:focus-visible {
box-shadow: 0 0 0 3px rgba(33, 37, 41, 0.4);
box-shadow: 0 0 0 3px rgba(36, 38, 39, 0.4);
}
.btn-ghost-dark:disabled {
opacity: 0.6;
@@ -2834,6 +3059,96 @@ h6, .h6 {
pointer-events: none;
}
.btn-ghost-purple {
background-color: transparent;
color: #540f89;
border: none;
}
.btn-ghost-purple:hover {
background-color: rgba(84, 15, 137, 0.1);
box-shadow: none;
}
.btn-ghost-purple:focus-visible {
box-shadow: 0 0 0 3px rgba(84, 15, 137, 0.4);
}
.btn-ghost-purple:disabled {
opacity: 0.6;
cursor: not-allowed;
pointer-events: none;
}
.btn-ghost-dark-red {
background-color: transparent;
color: #1e1717;
border: none;
}
.btn-ghost-dark-red:hover {
background-color: rgba(30, 23, 23, 0.1);
box-shadow: none;
}
.btn-ghost-dark-red:focus-visible {
box-shadow: 0 0 0 3px rgba(30, 23, 23, 0.4);
}
.btn-ghost-dark-red:disabled {
opacity: 0.6;
cursor: not-allowed;
pointer-events: none;
}
.btn-ghost-dark-red-alt {
background-color: transparent;
color: rgba(30, 23, 23, 0.6235294118);
border: none;
}
.btn-ghost-dark-red-alt:hover {
background-color: rgba(30, 23, 23, 0.1);
box-shadow: none;
}
.btn-ghost-dark-red-alt:focus-visible {
box-shadow: 0 0 0 3px rgba(30, 23, 23, 0.4);
}
.btn-ghost-dark-red-alt:disabled {
opacity: 0.6;
cursor: not-allowed;
pointer-events: none;
}
.btn-ghost-dark-purple {
background-color: transparent;
color: #0F172A;
border: none;
}
.btn-ghost-dark-purple:hover {
background-color: rgba(15, 23, 42, 0.1);
box-shadow: none;
}
.btn-ghost-dark-purple:focus-visible {
box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.4);
}
.btn-ghost-dark-purple:disabled {
opacity: 0.6;
cursor: not-allowed;
pointer-events: none;
}
.btn-ghost-dark-purple-alt {
background-color: transparent;
color: rgba(15, 23, 42, 0.6235294118);
border: none;
}
.btn-ghost-dark-purple-alt:hover {
background-color: rgba(15, 23, 42, 0.1);
box-shadow: none;
}
.btn-ghost-dark-purple-alt:focus-visible {
box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.4);
}
.btn-ghost-dark-purple-alt:disabled {
opacity: 0.6;
cursor: not-allowed;
pointer-events: none;
}
.border-0 {
border: 0 solid currentColor;
}
@@ -4734,6 +5049,10 @@ h6, .h6 {
text-decoration: none;
}
.fs-italic {
font-style: italic;
}
.img-w-100 {
width: 100%;
}
@@ -5061,7 +5380,7 @@ input[type=number]:disabled {
.spinner {
height: 1rem;
width: 1rem;
border: 2px solid #212529;
border: 2px solid #242627;
border-left-color: transparent !important;
border-radius: 50%;
display: inline-block;

File diff suppressed because one or more lines are too long

View File

@@ -550,6 +550,9 @@ body {
.text-line-through { text-decoration: line-through; }
.text-no-decoration { text-decoration: none; }
// Font styles
.fs-italic{font-style: italic;}
// Image sizing utilities
.img-w-100 { width: 100%; }
.img-w-auto { width: auto; }

View File

@@ -10,7 +10,7 @@
header {
display: flex;
justify-content: space-between;
padding: 0.7rem 2rem;
padding: 1.3rem 2rem;
background-color: #ffffff;
align-items: center;
box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.12);
@@ -63,15 +63,28 @@ header nav {
}
header nav .menu-item {
color: #000000;
font-weight: 500;
font-weight: 600;
margin-right: 15px;
display: inline-block;
position: relative;
transition: color 0.3s;
font-size: 16px;
font-size: 18px;
}
header nav .menu-item.active {
font-weight: bold;
color: #aa0b3d;
}
header nav .menu-item.active::after {
content: "";
position: absolute;
top: 120%;
left: 0;
height: 2px;
width: 100%;
background: #aa0b3d;
transform: scaleX(1);
transform-origin: left;
transition: transform 0.3s;
}
header nav .menu-item::after {
content: "";
@@ -249,7 +262,7 @@ header .mobile-toggler {
}
footer {
background-color: #212529;
background-color: #242627;
color: #fff;
display: flex;
padding: 25px 0px;
@@ -266,7 +279,7 @@ footer ul {
.features-section h2 {
font-size: 1.8rem;
color: #212529;
color: #242627;
}
.features-section .theme-card {
border-radius: 0.25rem;
@@ -338,7 +351,7 @@ footer ul {
font-size: 1.3rem;
font-weight: 500;
margin-bottom: 0.5rem;
color: #212529;
color: #242627;
}
.filter-text {
@@ -509,6 +522,99 @@ section .bolder {
margin-top: 20px;
}
/* PROMO BLOCKS */
.promo-cover {
height: calc(100vh - 60px);
width: 100%;
background-repeat: no-repeat;
background-size: cover;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.promo-cover.fetish-cover {
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.7)), url("/rss/img/promo-images/bdsm-background.jpeg");
background-position: 50% 35%;
}
.promo-cover.sugar-cover {
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.7)), url("/rss/img/promo-images/sugar-couple.jpeg");
background-position: 50% 35%;
}
.promo-cover.foot-cover {
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.7)), url("/rss/img/promo-images/foot1.jpg");
background-position: 50% 35%;
}
.promo-cover.app-cover {
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.7)), url("/rss/img/promo-images/couple1.jpg");
background-position: 50% 35%;
}
.promo-cover .title-bar {
padding: 20px;
text-align: center;
color: #fff;
width: 100%;
border-radius: 12px;
position: relative;
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
}
@media (min-width: 769px) {
.promo-cover .title-bar {
width: 45%;
}
}
.promo-cover .title-bar h1 {
opacity: 1;
font-weight: 700;
font-size: 2.2rem;
display: inline-block;
}
.promo-cover .title-bar h1::after {
content: "";
display: block;
width: 80%;
height: 1px;
background: #fff;
margin: 2px auto 20px;
border-radius: 2px;
}
.promo-cover .title-bar p {
opacity: 1;
font-weight: 500;
font-size: 1.4rem;
}
.promo-cover .title-bar .cta-btn {
padding: 10px 20px;
background-color: #0F172A;
}
.promo-cover .title-bar .cta-btn:hover {
background-color: rgb(28.4210526316, 43.5789473684, 79.5789473684);
}
.content-section {
padding: 40px 0px;
color: #e2e8f0 !important;
}
.content-section h2 {
font-weight: 700;
font-size: 2rem;
}
.content-section p {
font-size: 1.2rem;
font-weight: 400;
}
.content-section ul {
padding: 0px 40px;
padding-bottom: 10px;
}
.promo-feature-icon {
font-size: 2rem;
display: block;
text-align: center;
color: #ffffff;
}
@media (prefers-reduced-motion: reduce) {
.section-animation {
opacity: 1;

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

View File

@@ -1 +1 @@
{"version":3,"sources":["variables.scss"],"names":[],"mappings":"AAAA,gBAAA;AAIA,gBAAA;AAmBA,kBAAA;AAGA,kBAAA;AAoBA,kBAAA;AAGA,2BAAA;AAoBA,mBAAA;AAyBA,+BAAA;AAQA,eAAA","file":"variables.css"}
{"version":3,"sources":["variables.scss"],"names":[],"mappings":"AAAA,gBAAA;AAIA,gBAAA;AAmBA,kBAAA;AAGA,kBAAA;AA2BA,kBAAA;AAGA,2BAAA;AAoBA,mBAAA;AAyBA,+BAAA;AAQA,eAAA","file":"variables.css"}

View File

@@ -35,13 +35,20 @@ $colors: (
danger: #dc3545,
info: #0dcaf0,
light: #e5e5e5,
dark: #212529,
dark: #242627,
white: #ffffff,
black: #000000,
muted: #C7C7C7,
accent-white: #f7f7f7,
accent: #08bbbb,
transparent: transparent
transparent: transparent,
// Other colors
purple:#540f89,
dark-red: #1e1717,
dark-red-alt: #1e17179f,
dark-purple: #0F172A,
dark-purple-alt: #0F172A9f,
);
/* Spacing scale */