Compare commits

..

No commits in common. "002e945bbe930207dfca4b5b02c2e3385a4c3b23" and "4712773f4eb62d2244a64cd71a6898a08a513587" have entirely different histories.

2 changed files with 21 additions and 36 deletions

View file

@ -10,7 +10,6 @@
font-style: normal; font-style: normal;
font-display: swap; font-display: swap;
} }
:root { :root {
--cyber-bg-color: #05130f; --cyber-bg-color: #05130f;
--cyber-font-color: #e8f0f2; --cyber-font-color: #e8f0f2;
@ -21,10 +20,6 @@
--cyber-hero-overlay: rgba(0, 0, 0, 0.7); --cyber-hero-overlay: rgba(0, 0, 0, 0.7);
--cyber-shadow: rgba(0, 0, 0, 0.5); --cyber-shadow: rgba(0, 0, 0, 0.5);
--cyber-slider-thumb-bg: #fff; --cyber-slider-thumb-bg: #fff;
/* Spacing */
--spacing-sm: clamp(0.75rem, 0.4295rem + 1.3675vw, 1.25rem);; /* 12px to 20px */
--spacing-md: clamp(1.5rem, 1.1795rem + 1.3675vw, 2rem);; /* 16px to 32px */
} }
/* General Styles */ /* General Styles */
@ -84,14 +79,14 @@ h1 {
/* Main content */ /* Main content */
main { main {
padding-inline: var(--spacing-sm); padding: 40px 20px;
max-width: 1000px; max-width: 1000px;
margin: 0 auto; margin: 0 auto;
} }
.form-section { .form-section {
background-color: #102f2a; background-color: #102f2a;
padding: var(--spacing-md); padding: 30px;
border-radius: 10px; border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
margin-bottom: 40px; margin-bottom: 40px;
@ -105,9 +100,7 @@ main {
input[type="text"] { input[type="text"] {
font-family: 'Departure Mono'; font-family: 'Departure Mono';
font-size: inherit; width: calc(100% - 20px);
line-height: 1.35;
width: 100%;
padding: 10px; padding: 10px;
border: 2px solid var(--cyber-primary-color); border: 2px solid var(--cyber-primary-color);
border-radius: 5px; border-radius: 5px;
@ -124,14 +117,9 @@ input[type="text"]:focus {
/* Radio Buttons */ /* Radio Buttons */
.radio-group { .radio-group {
display: flex; display: flex;
flex-direction: column; justify-content: space-around;
justify-content: space-between;
flex-wrap: wrap; flex-wrap: wrap;
gap: var(--spacing-sm);
@media (width > 768px) {
flex-direction: row;
}
} }
.radio-group input[type="radio"] { .radio-group input[type="radio"] {
@ -139,7 +127,8 @@ input[type="text"]:focus {
} }
.radio-group label { .radio-group label {
flex: 1; width: calc(25% - 10px);
margin: 5px;
padding: 10px; padding: 10px;
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
@ -163,12 +152,11 @@ input[type="text"]:focus {
/* Buttons */ /* Buttons */
button { button {
font-family: 'Departure Mono'; font-family: 'Departure Mono';
font-size: inherit;
line-height: 1.35;
padding: 10px 20px; padding: 10px 20px;
border-radius: 5px; border-radius: 5px;
background-color: var(--cyber-bg-color); background-color: var(--cyber-bg-color);
color: var(--cyber-font-color); color: var(--cyber-font-color);
font-size: 1rem;
cursor: pointer; cursor: pointer;
border: 2px solid transparent; border: 2px solid transparent;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
@ -220,7 +208,7 @@ button:active {
/* FAQ Section */ /* FAQ Section */
.faq-section { .faq-section {
background-color: var(--cyber-faq-bg-color); background-color: var(--cyber-faq-bg-color);
padding: var(--spacing-md); padding: 30px;
border-radius: 10px; border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
color: var(--cyber-font-color); color: var(--cyber-font-color);
@ -255,12 +243,12 @@ button:active {
display: block; display: block;
font-weight: bold; font-weight: bold;
color: var(--cyber-highlight-color); color: var(--cyber-highlight-color);
padding: var(--spacing-sm); padding: 15px;
background-color: #102f2a; background-color: #102f2a;
border-radius: 8px; border-radius: 8px;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
margin-bottom: var(--spacing-sm); margin-bottom: 5px;
transition: background-color 0.3s; transition: background-color 0.3s;
white-space: normal; white-space: normal;
overflow: visible; overflow: visible;
@ -279,9 +267,9 @@ button:active {
.faq-answer { .faq-answer {
max-height: 0; max-height: 0;
display: none;
overflow: hidden; overflow: hidden;
padding: var(--spacing-sm); transition: max-height 0.5s ease;
padding: 0 15px;
background-color: var(--cyber-bg-color); background-color: var(--cyber-bg-color);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
border-radius: 8px; border-radius: 8px;
@ -290,7 +278,7 @@ button:active {
.faq-checkbox:checked + .faq-question + .faq-answer { .faq-checkbox:checked + .faq-question + .faq-answer {
max-height: 100%; max-height: 100%;
display: block; padding: 15px;
} }
/* List Styles for FAQ */ /* List Styles for FAQ */
.faq-answer ul, .faq-answer ul,
@ -320,7 +308,7 @@ button:active {
/* Credits Section */ /* Credits Section */
.credits-section { .credits-section {
background-color: var(--cyber-faq-bg-color); background-color: var(--cyber-faq-bg-color);
padding: var(--spacing-md); padding: 30px;
border-radius: 10px; border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
color: var(--cyber-font-color); color: var(--cyber-font-color);
@ -443,25 +431,21 @@ button:active {
/* Slider */ /* Slider */
.slider-container { .slider-container {
margin: 20px 0; margin: 20px 0;
text-align: center;
color: var(--cyber-font-color); color: var(--cyber-font-color);
display: flex; display: flex;
flex-wrap: wrap;
align-items: center; align-items: center;
text-align: center; justify-content: center;
gap: var(--spacing-sm) var(--spacing-md); gap: 15px;
} }
.slider-container label { .slider-container label {
font-size: 1.2rem; font-size: 1.2rem;
@media (width < 568px) {
width: 100%;
}
} }
input[type="range"] { input[type="range"] {
-webkit-appearance: none; -webkit-appearance: none;
flex: 1; width: 70%;
margin: 10.5px 0; margin: 10.5px 0;
background-color: var(--cyber-faq-bg-color); background-color: var(--cyber-faq-bg-color);
} }
@ -543,6 +527,7 @@ input[type="range"]::-ms-thumb {
#sliderValueDisplay { #sliderValueDisplay {
font-size: 1.1rem; font-size: 1.1rem;
margin-left: 10px;
color: var(--cyber-primary-color); color: var(--cyber-primary-color);
font-weight: bold; font-weight: bold;
} }

Binary file not shown.