Kumi
ac9286bf7e
Replaced the services list layout with a new accordion component. This allows for a more organized and user-friendly display of services, facilitating better content management and improved user interaction. The CSS was updated to include styles for the accordion structure.
298 lines
No EOL
5.3 KiB
CSS
298 lines
No EOL
5.3 KiB
CSS
/* This file was created as part of the Private.coffee project
|
|
It is licensed under the MIT license
|
|
For more information, please visit https://private.coffee
|
|
*/
|
|
|
|
/* General styles */
|
|
:root,
|
|
[data-bs-theme="light"] {
|
|
--bs-primary: #f570b9;
|
|
--bs-primary-rgb: 245, 112, 185;
|
|
--bs-primary-text-emphasis: #622d4a;
|
|
--bs-primary-bg-subtle: #fde2f1;
|
|
--bs-primary-border-subtle: #fbc6e3;
|
|
--bs-body-color: #232323;
|
|
--bs-body-color-rgb: 35, 35, 35;
|
|
--bs-secondary-color: rgba(35, 35, 35, 0.75);
|
|
--bs-secondary-color-rgb: 35, 35, 35, 0.75;
|
|
--bs-tertiary-color: rgba(35, 35, 35, 0.5);
|
|
--bs-tertiary-color-rgb: 35, 35, 35, 0.5;
|
|
--bs-body-font-family: Inconsolata, monospace;
|
|
}
|
|
|
|
.btn-primary {
|
|
--bs-btn-color: #000000;
|
|
--bs-btn-bg: #f570b9;
|
|
--bs-btn-border-color: #f570b9;
|
|
--bs-btn-hover-color: #000000;
|
|
--bs-btn-hover-bg: #f785c4;
|
|
--bs-btn-hover-border-color: #f67ec0;
|
|
--bs-btn-focus-shadow-rgb: 37, 17, 28;
|
|
--bs-btn-active-color: #000000;
|
|
--bs-btn-active-bg: #f78dc7;
|
|
--bs-btn-active-border-color: #f67ec0;
|
|
--bs-btn-disabled-color: #000000;
|
|
--bs-btn-disabled-bg: #f570b9;
|
|
--bs-btn-disabled-border-color: #f570b9;
|
|
color: #fff;
|
|
}
|
|
|
|
.btn-outline-primary {
|
|
--bs-btn-color: #f570b9;
|
|
--bs-btn-border-color: #f570b9;
|
|
--bs-btn-focus-shadow-rgb: 245, 112, 185;
|
|
--bs-btn-hover-color: #000000;
|
|
--bs-btn-hover-bg: #f570b9;
|
|
--bs-btn-hover-border-color: #f570b9;
|
|
--bs-btn-active-color: #000000;
|
|
--bs-btn-active-bg: #f570b9;
|
|
--bs-btn-active-border-color: #f570b9;
|
|
--bs-btn-disabled-color: #f570b9;
|
|
--bs-btn-disabled-bg: transparent;
|
|
--bs-btn-disabled-border-color: #f570b9;
|
|
}
|
|
|
|
h2 .special-header {
|
|
font-size: 10rem !important;
|
|
}
|
|
|
|
.special-header {
|
|
font-size: 4rem;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.fancy-text-primary {
|
|
background: -webkit-linear-gradient(45deg, #ba77fc, #ff7f8c);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
p {
|
|
letter-spacing: 0.03rem;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
h5 {
|
|
letter-spacing: 0.05rem;
|
|
}
|
|
|
|
.navbar-brand {
|
|
font-weight: 800 !important;
|
|
font-size: x-large;
|
|
}
|
|
|
|
.card-body :not(p):not(:first-child):not(.dropdown-content):not(.dropdown-toggle-area) {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.currency-col {
|
|
width: 200px;
|
|
white-space: nowrap;
|
|
text-align: right;
|
|
}
|
|
|
|
.table-transparency td:not(:first-child) {
|
|
text-align: right;
|
|
}
|
|
|
|
.section {
|
|
padding: 20px 0;
|
|
border-bottom: 1px solid #e0e0e0;
|
|
}
|
|
|
|
.alert-warning {
|
|
background-color: #fff3cd;
|
|
border-color: #ffeeba;
|
|
color: #856404;
|
|
padding: 15px;
|
|
margin-bottom: 20px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.alert-warning .alert-link {
|
|
color: #856404;
|
|
font-weight: bold;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.alert-warning .alert-link:hover {
|
|
color: #604c2e;
|
|
}
|
|
|
|
.homemade {
|
|
top: -0.5rem;
|
|
right: -0.5rem;
|
|
position: absolute;
|
|
}
|
|
|
|
.homemade svg {
|
|
fill: var(--bs-primary-bg-subtle) !important;
|
|
}
|
|
|
|
.bs-icon.bs-icon-primary svg {
|
|
fill: var(--bs-primary-bg-subtle);
|
|
}
|
|
|
|
.bs-icon.bs-icon-lg svg {
|
|
fill: var(--bs-primary);
|
|
}
|
|
|
|
.bs-icon-circle svg {
|
|
fill: var(--bs-primary-bg-subtle);
|
|
}
|
|
|
|
.bg-pride-gradient {
|
|
background: linear-gradient(45deg, #FF7878, #FFC898, #FFF89A, #CDF2CA, #A2CDCD, #D1E8E4, #CAB8FF);
|
|
}
|
|
|
|
/* Responsive Styles */
|
|
@media (max-width: 991px) {
|
|
p.text-center.special-header {
|
|
font-size: 3rem;
|
|
}
|
|
|
|
.navbar .container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.navbar .row {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.navbar .col {
|
|
text-align: center;
|
|
}
|
|
|
|
.navbar-brand p {
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.navbar-brand span.fancy-text-primary {
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.navbar-brand span {
|
|
display: block;
|
|
}
|
|
|
|
.navbar-nav {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
width: 100%;
|
|
padding: 0;
|
|
}
|
|
|
|
.navbar-nav .nav-item {
|
|
display: inline-block;
|
|
padding: 0 1rem;
|
|
}
|
|
|
|
.navbar-btn {
|
|
margin: 0 auto !important;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.btn.btn-primary {
|
|
margin: 1rem auto;
|
|
display: block;
|
|
width: 80%;
|
|
}
|
|
|
|
h2 .special-header {
|
|
font-size: 6rem !important;
|
|
}
|
|
|
|
.special-header {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.that-br {
|
|
display: none;
|
|
}
|
|
|
|
.slogan {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Dropdown Styles */
|
|
|
|
.dropdown {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 100%;
|
|
}
|
|
|
|
.dropdown-content {
|
|
display: none;
|
|
position: absolute;
|
|
background-color: #f9f9f9;
|
|
min-width: 100%;
|
|
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
|
|
z-index: 1;
|
|
}
|
|
|
|
.dropdown-content a {
|
|
color: black;
|
|
padding: 12px 16px;
|
|
text-decoration: none;
|
|
display: block;
|
|
text-align: left;
|
|
}
|
|
|
|
.dropdown:hover .dropdown-content {
|
|
display: block;
|
|
}
|
|
|
|
.dropdown-toggle-area {
|
|
display: inline-block;
|
|
cursor: pointer;
|
|
color: white;
|
|
}
|
|
|
|
.btn-primary:has(.dropdown-toggle-area) {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
width: 100%;
|
|
}
|
|
|
|
.btn-primary .main-link {
|
|
flex-grow: 1;
|
|
text-align: center;
|
|
color: white;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.btn-primary .main-link:hover {
|
|
text-decoration: none;
|
|
color: black;
|
|
}
|
|
|
|
/* Accordion Styles */
|
|
|
|
.accordion {
|
|
border: 1px solid #ddd;
|
|
border-radius: 5px;
|
|
}
|
|
.accordion-item {
|
|
border-bottom: 1px solid #ddd;
|
|
}
|
|
.accordion-header {
|
|
padding: 1rem;
|
|
cursor: pointer;
|
|
}
|
|
.accordion-button {
|
|
background: none;
|
|
border: none;
|
|
outline: none;
|
|
font-size: 1.25rem;
|
|
}
|
|
.accordion-collapse {
|
|
padding: 1rem;
|
|
} |