3085 lines
54 KiB
CSS
3085 lines
54 KiB
CSS
/*-----------------------------------*\
|
|
#style.css
|
|
\*-----------------------------------*/
|
|
|
|
/**
|
|
* copyright 2022 codewithsadee
|
|
*/
|
|
|
|
|
|
|
|
|
|
|
|
/*-----------------------------------*\
|
|
#CUSTOM PROPERTY
|
|
\*-----------------------------------*/
|
|
|
|
:root {
|
|
|
|
/**
|
|
* colors
|
|
*/
|
|
|
|
--sky-blue-crayola: hsl(188, 64%, 60%);
|
|
--raisin-black_90: hsla(240, 8%, 12%, 0.9);
|
|
--raisin-black-1: hsl(240, 8%, 17%);
|
|
--raisin-black-2: hsl(240, 8%, 12%);
|
|
--majorelle-blue: hsl(241, 77%, 63%);
|
|
--blue-ryb_80: hsla(241, 88%, 60%, 0.8);
|
|
--bittersweet: hsl(0, 100%, 69%);
|
|
--eerie-black: hsl(0, 0%, 13%);
|
|
--ghost-white: hsl(230, 60%, 98%);
|
|
--light-gray: hsl(0, 0%, 80%);
|
|
--slate-gray: hsl(225, 8%, 48%);
|
|
--cool-gray: hsl(225, 11%, 59%);
|
|
--gainsboro: hsl(217, 16%, 90%);
|
|
--mustard: hsl(47, 100%, 69%);
|
|
--white: hsl(0, 0%, 100%);
|
|
--black: hsl(0, 0%, 0%);
|
|
--onyx: hsl(240, 5%, 26%);
|
|
--jet: hsl(0, 0%, 21%);
|
|
|
|
/**
|
|
* gradient
|
|
*/
|
|
|
|
--gradient: radial-gradient(ellipse at center, hsla(0, 0%, 0%, 0.25), transparent 80%);
|
|
|
|
/**
|
|
* typography
|
|
*/
|
|
|
|
--ff-dm-sans: 'DM Sans', sans-serif;
|
|
|
|
--fs-1: 4rem;
|
|
--fs-2: 3.5rem;
|
|
--fs-3: 2.4rem;
|
|
--fs-4: 2.2rem;
|
|
--fs-5: 2rem;
|
|
--fs-6: 1.8rem;
|
|
--fs-7: 1.7rem;
|
|
--fs-8: 1.5rem;
|
|
--fs-9: 1.4rem;
|
|
|
|
--fw-500: 500;
|
|
--fw-700: 700;
|
|
|
|
/**
|
|
* spacing
|
|
*/
|
|
|
|
--section-padding: 100px;
|
|
|
|
/**
|
|
* shadow
|
|
*/
|
|
|
|
--shadow-1: 0px 2px 50px hsla(223, 40%, 76%, 0.3);
|
|
--shadow-2: 0px -2px 12px hsl(252, 29%, 93%);
|
|
--shadow-3: 0px 4px 4px hsla(231, 20%, 49%, 0.06);
|
|
--shadow-4: 0px 15px 30px hsla(210, 30%, 32%, 0.05);
|
|
--shadow-5: 0px 15px hsla(241, 62%, 34%, 0.04);
|
|
|
|
/**
|
|
* radius
|
|
*/
|
|
|
|
--radius-8: 8px;
|
|
--radius-10: 10px;
|
|
--radius-15: 15px;
|
|
--radius-20: 20px;
|
|
|
|
/**
|
|
* transition
|
|
*/
|
|
|
|
--transition-1: 0.25s ease;
|
|
--transition-2: 0.5s ease;
|
|
--cubic-in: cubic-bezier(0.51, 0.03, 0.64, 0.28);
|
|
--cubic-out: cubic-bezier(0.33, 0.85, 0.4, 0.96);
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/*-----------------------------------*\
|
|
#RESET
|
|
\*-----------------------------------*/
|
|
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
li { list-style: none; }
|
|
|
|
a,
|
|
img,
|
|
span,
|
|
input,
|
|
button,
|
|
ion-icon { display: block; }
|
|
|
|
a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
img { height: auto; }
|
|
|
|
input,
|
|
button {
|
|
background: none;
|
|
border: none;
|
|
font: inherit;
|
|
}
|
|
|
|
input { width: 100%; }
|
|
|
|
button { cursor: pointer; }
|
|
|
|
ion-icon { pointer-events: none; }
|
|
|
|
html {
|
|
font-family: var(--ff-dm-sans);
|
|
font-size: 10px;
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
body {
|
|
background-color: var(--white);
|
|
color: var(--slate-gray);
|
|
font-size: 1.6rem;
|
|
line-height: 1.75;
|
|
}
|
|
|
|
:focus-visible { outline-offset: 4px; }
|
|
|
|
::-webkit-scrollbar { width: 10px; }
|
|
|
|
::-webkit-scrollbar-track { background-color: hsl(0, 0%, 98%); }
|
|
|
|
::-webkit-scrollbar-thumb { background-color: hsl(0, 0%, 80%); }
|
|
|
|
::-webkit-scrollbar-thumb:hover { background-color: hsl(0, 0%, 70%); }
|
|
|
|
|
|
|
|
|
|
|
|
/*-----------------------------------*\
|
|
#REUSED STYLE
|
|
\*-----------------------------------*/
|
|
|
|
.container { padding-inline: 15px; }
|
|
|
|
.section { padding-block: var(--section-padding); }
|
|
|
|
.h1,
|
|
.h2 { letter-spacing: -2px; }
|
|
|
|
.h1 {
|
|
color: var(--black);
|
|
font-size: var(--fs-1);
|
|
line-height: 1.1;
|
|
}
|
|
|
|
.h2,
|
|
.h3 { color: var(--raisin-black-1); }
|
|
|
|
.h2 {
|
|
font-size: var(--fs-2);
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.h3 {
|
|
font-size: var(--fs-3);
|
|
line-height: 1.3;
|
|
font-weight: var(--fw-500);
|
|
}
|
|
|
|
.has-before,
|
|
.has-after {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.has-before::before,
|
|
.has-after::after {
|
|
content: "";
|
|
position: absolute;
|
|
}
|
|
|
|
:is(.h1, .h2) .has-before { display: inline-block; }
|
|
|
|
:is(.h1, .h2) .has-before::before {
|
|
bottom: 8px;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 6px;
|
|
background-color: var(--mustard);
|
|
z-index: -1;
|
|
}
|
|
|
|
.btn {
|
|
max-width: max-content;
|
|
font-weight: var(--fw-700);
|
|
height: 55px;
|
|
display: flex;
|
|
align-items: center;
|
|
padding-inline: 50px;
|
|
border-radius: var(--radius-10);
|
|
overflow: hidden;
|
|
transition: var(--transition-2);
|
|
}
|
|
|
|
.btn::before,
|
|
.btn::after {
|
|
right: 0;
|
|
width: 100%;
|
|
height: 50%;
|
|
transform: scaleX(0);
|
|
background-color: var(--mustard);
|
|
z-index: -1;
|
|
transition: transform var(--transition-1);
|
|
}
|
|
|
|
.btn::before {
|
|
top: 0;
|
|
transform-origin: left;
|
|
}
|
|
|
|
.btn::after {
|
|
top: 50%;
|
|
transform-origin: right;
|
|
}
|
|
|
|
.btn:is(:hover, :focus)::before,
|
|
.btn:is(:hover, :focus)::after { transform: scaleX(1); }
|
|
|
|
.btn:is(:hover, :focus)::before { transform-origin: right; }
|
|
|
|
.btn:is(:hover, :focus)::after { transform-origin: left; }
|
|
|
|
.btn-primary {
|
|
background-color: var(--majorelle-blue);
|
|
color: var(--white);
|
|
}
|
|
|
|
.btn-primary:is(:hover, :focus) { color: var(--raisin-black-1); }
|
|
|
|
.btn-secondary {
|
|
background-color: var(--mustard);
|
|
color: var(--raisin-black-1);
|
|
gap: 15px;
|
|
}
|
|
|
|
.btn-secondary::before,
|
|
.btn-secondary::after { background-color: var(--sky-blue-crayola); }
|
|
|
|
.btn-secondary:is(:hover, :focus) { color: var(--white); }
|
|
|
|
.social-list { display: flex; }
|
|
|
|
.w-100 { width: 100%; }
|
|
|
|
.section-subtitle {
|
|
color: var(--cool-gray);
|
|
font-size: var(--fs-6);
|
|
font-weight: var(--fw-500);
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.section-subtitle::before {
|
|
position: static;
|
|
width: 12px;
|
|
height: 12px;
|
|
background-color: var(--mustard);
|
|
display: inline-block;
|
|
border-radius: 50%;
|
|
margin-inline-end: 10px;
|
|
}
|
|
|
|
.text-center { text-align: center; }
|
|
|
|
.section-title { margin-block: 30px 50px; }
|
|
|
|
.grid-list {
|
|
display: grid;
|
|
gap: 30px;
|
|
}
|
|
|
|
.img-holder {
|
|
aspect-ratio: var(--width) / var(--height);
|
|
background-color: var(--light-gray);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.img-cover {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.has-bg-image {
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-size: cover;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/*-----------------------------------*\
|
|
#HEADER
|
|
\*-----------------------------------*/
|
|
|
|
.header .btn { display: none; }
|
|
|
|
.header {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
padding-block: 25px;
|
|
transition: padding var(--transition-1);
|
|
z-index: 4;
|
|
}
|
|
|
|
.header.active {
|
|
background-color: var(--white);
|
|
padding-block: 15px;
|
|
box-shadow: var(--shadow-1);
|
|
}
|
|
|
|
.header .container {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.logo {
|
|
color: var(--raisin-black-1);
|
|
font-size: 3.6rem;
|
|
font-weight: var(--fw-700);
|
|
}
|
|
|
|
.nav-open-btn {
|
|
background-color: var(--white);
|
|
color: var(--eerie-black);
|
|
font-size: 35px;
|
|
padding: 10px;
|
|
box-shadow: var(--shadow-2);
|
|
border-radius: var(--radius-10);
|
|
}
|
|
|
|
.navbar {
|
|
position: fixed;
|
|
top: 0;
|
|
right: 0;
|
|
background-color: var(--raisin-black-2);
|
|
color: var(--white);
|
|
max-width: 300px;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 30px;
|
|
z-index: 1;
|
|
transform: translateX(100%);
|
|
visibility: hidden;
|
|
transition: 0.25s var(--cubic-in);
|
|
}
|
|
|
|
.navbar.active {
|
|
transform: translateX(0);
|
|
visibility: visible;
|
|
transition: 0.5s var(--cubic-out);
|
|
}
|
|
|
|
.navbar .wrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-block-end: 60px;
|
|
}
|
|
|
|
.navbar .logo { color: var(--white); }
|
|
|
|
.nav-close-btn {
|
|
color: var(--white);
|
|
font-size: 30px;
|
|
transition: var(--transition-1);
|
|
}
|
|
|
|
.nav-close-btn:is(:hover, :focus) { color: var(--bittersweet); }
|
|
|
|
.navbar-item:not(:last-child) { border-block-end: 1px solid var(--jet); }
|
|
|
|
.navbar-link {
|
|
font-size: var(--fs-9);
|
|
font-weight: var(--fw-700);
|
|
padding-block: 15px;
|
|
text-transform: uppercase;
|
|
transition: var(--transition-1);
|
|
}
|
|
|
|
.navbar-link:is(:hover, :focus) { color: var(--mustard); }
|
|
|
|
.overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
background-color: var(--raisin-black_90);
|
|
transition: var(--transition-2);
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.overlay.active {
|
|
opacity: 1;
|
|
pointer-events: all;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/*-----------------------------------*\
|
|
#HERO
|
|
\*-----------------------------------*/
|
|
|
|
.hero { padding-block-start: calc(var(--section-padding) + 60px); }
|
|
|
|
.hero .container {
|
|
display: grid;
|
|
gap: 70px;
|
|
}
|
|
|
|
.hero-text {
|
|
font-size: var(--fs-7);
|
|
margin-block: 30px 35px;
|
|
}
|
|
|
|
.hero-content :is(.wrapper, .hero-btn) {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.hero-content .wrapper {
|
|
flex-wrap: wrap;
|
|
gap: 30px;
|
|
margin-block-end: 30px;
|
|
}
|
|
|
|
.hero-btn {
|
|
gap: 15px;
|
|
color: var(--raisin-black-1);
|
|
transition: var(--transition-1);
|
|
}
|
|
|
|
.hero-btn:is(:hover, :focus) { color: var(--majorelle-blue); }
|
|
|
|
.hero-btn ion-icon { font-size: 24px; }
|
|
|
|
.hero-btn .span {
|
|
font-size: var(--fs-6);
|
|
font-weight: var(--fw-500);
|
|
}
|
|
|
|
.hero .social-link .span { display: none; }
|
|
|
|
.hero .social-list { gap: 12px; }
|
|
|
|
.hero .social-link {
|
|
background-color: var(--white);
|
|
color: var(--color);
|
|
padding: 12px;
|
|
box-shadow: var(--shadow-1);
|
|
border-radius: var(--radius-8);
|
|
transition: var(--transition-2);
|
|
}
|
|
|
|
.hero .social-link:is(:hover, :focus) {
|
|
background-color: var(--color);
|
|
color: var(--white);
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/*-----------------------------------*\
|
|
#SERVICE
|
|
\*-----------------------------------*/
|
|
|
|
.service { background-color: var(--ghost-white); }
|
|
|
|
.service .section-title { margin-block: 30px 60px; }
|
|
|
|
.service-card,
|
|
.service .link-card {
|
|
padding: 45px;
|
|
border-radius: var(--radius-20);
|
|
}
|
|
|
|
.service-card {
|
|
height: 100%;
|
|
background-color: var(--white);
|
|
padding-block-end: 40px;
|
|
border-block-end: 3px solid transparent;
|
|
box-shadow: var(--shadow-3);
|
|
transition: var(--transition-1);
|
|
}
|
|
|
|
.service-card:is(:hover, :focus-within) { border-color: hsl(var(--color)); }
|
|
|
|
.service-card .card-icon {
|
|
width: 60px;
|
|
height: 60px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0;
|
|
border-radius: var(--radius-8);
|
|
background-color: hsla(var(--color), 0.15);
|
|
margin-block-end: 25px;
|
|
transition: var(--transition-2);
|
|
}
|
|
|
|
.service-card:is(:hover, :focus-within) .card-icon { transform: rotateY(0.5turn); }
|
|
|
|
.service-card .card-title { transition: var(--transition-1); }
|
|
|
|
.service-card .card-title:is(:hover, :focus-within) { color: hsl(var(--color)); }
|
|
|
|
.service .link-card {
|
|
background-color: hsla(var(--color), 0.15);
|
|
text-align: center;
|
|
}
|
|
|
|
.service .link-card .span {
|
|
color: var(--raisin-black-1);
|
|
font-size: var(--fs-6);
|
|
font-weight: var(--fw-500);
|
|
margin-block-end: 20px;
|
|
transition: var(--transition-1);
|
|
}
|
|
|
|
.service .link-card:is(:hover, :focus) .span { color: var(--majorelle-blue); }
|
|
|
|
.service .link-card ion-icon {
|
|
color: var(--majorelle-blue);
|
|
font-size: 150px;
|
|
transform: rotate(-45deg);
|
|
margin: -25px auto;
|
|
transition: var(--transition-1);
|
|
}
|
|
|
|
.service .link-card:is(:hover, :focus) ion-icon { color: hsl(var(--color)); }
|
|
|
|
|
|
|
|
|
|
|
|
/*-----------------------------------*\
|
|
#FEATURE
|
|
\*-----------------------------------*/
|
|
|
|
.feature .container,
|
|
.feature-list {
|
|
align-items: center;
|
|
display: grid;
|
|
gap: 60px;
|
|
}
|
|
|
|
.feature-card .card-icon {
|
|
background-color: hsla(var(--color), 0.15);
|
|
font-size: 24px;
|
|
max-width: max-content;
|
|
padding: 18px;
|
|
border-radius: 50%;
|
|
margin-block-end: 20px;
|
|
transition: var(--transition-2);
|
|
}
|
|
|
|
.feature-card .card-icon ion-icon {
|
|
color: hsl(var(--color));
|
|
transition: var(--transition-1);
|
|
}
|
|
|
|
.feature-card .card-text {
|
|
color: var(--cool-gray);
|
|
font-size: var(--fs-7);
|
|
margin-block-start: 10px;
|
|
}
|
|
|
|
.feature-card:is(:hover, :focus) .card-icon {
|
|
box-shadow: inset 0 0 0 30px hsla(var(--color), 0.9);
|
|
}
|
|
|
|
.feature-card:is(:hover, :focus) .card-icon ion-icon { color: var(--white); }
|
|
|
|
|
|
|
|
|
|
|
|
/*-----------------------------------*\
|
|
#PROJECT
|
|
\*-----------------------------------*/
|
|
|
|
.project { background-color: var(--ghost-white); }
|
|
|
|
.project .section-title { margin-block: 20px 60px; }
|
|
|
|
.filter-list {
|
|
max-width: 90%;
|
|
margin-inline: auto;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-block-end: 70px;
|
|
}
|
|
|
|
.filter-btn {
|
|
color: var(--cool-gray);
|
|
font-size: var(--fs-9);
|
|
font-weight: var(--fw-500);
|
|
padding: 11px 20px;
|
|
border-radius: var(--radius-8);
|
|
transition: var(--transition-1);
|
|
}
|
|
|
|
.filter-btn:is(:hover, :focus) { color: var(--raisin-black-1); }
|
|
|
|
.filter-btn.active {
|
|
background-color: var(--white);
|
|
color: var(--raisin-black-1);
|
|
box-shadow: var(--shadow-4);
|
|
}
|
|
|
|
.project-card {
|
|
position: relative;
|
|
border-radius: var(--radius-15);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.project-card .card-banner img { transition: var(--transition-2); }
|
|
|
|
.project-card:is(:hover, :focus-within) .card-banner img {
|
|
transform: scale(1.1);
|
|
filter: brightness(0.8);
|
|
}
|
|
|
|
.project-card .card-content {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 20px;
|
|
right: 20px;
|
|
background-color: var(--mustard);
|
|
border-radius: var(--radius-10);
|
|
padding: 30px 20px;
|
|
text-align: center;
|
|
opacity: 0;
|
|
transform: translateY(calc(-50% + 20px));
|
|
transition: var(--transition-2);
|
|
}
|
|
|
|
.project-card .card-tag {
|
|
color: var(--raisin-black-1);
|
|
font-size: var(--fs-9);
|
|
}
|
|
|
|
.project-card:is(:hover, :focus-within) .card-content {
|
|
opacity: 1;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/*-----------------------------------*\
|
|
#NEWSLETTER
|
|
\*-----------------------------------*/
|
|
|
|
.newsletter { color: var(--white); }
|
|
|
|
.newsletter .container {
|
|
display: grid;
|
|
gap: 50px;
|
|
}
|
|
|
|
.newsletter-banner { max-width: max-content; }
|
|
|
|
.newsletter .section-subtitle { color: var(--light-gray); }
|
|
|
|
.newsletter .section-title {
|
|
color: var(--white);
|
|
margin-block: 20px 35px;
|
|
}
|
|
|
|
.email-field {
|
|
background-color: var(--majorelle-blue);
|
|
color: var(--white);
|
|
font-size: var(--fs-9);
|
|
min-height: 60px;
|
|
padding-inline: 20px;
|
|
border-radius: var(--radius-8);
|
|
margin-block-end: 20px;
|
|
box-shadow: var(--shadow-5);
|
|
outline: 3px solid transparent;
|
|
outline-offset: 0;
|
|
transition: var(--transition-1);
|
|
}
|
|
|
|
.email-field:focus { outline-color: var(--white); }
|
|
|
|
.email-field::placeholder { color: inherit; }
|
|
|
|
|
|
|
|
|
|
|
|
/*-----------------------------------*\
|
|
#BLOG
|
|
\*-----------------------------------*/
|
|
|
|
.blog { background-color: var(--ghost-white); }
|
|
|
|
.blog .section-title { margin-block: 20px 70px; }
|
|
|
|
.blog-list {
|
|
display: grid;
|
|
gap: 40px;
|
|
}
|
|
|
|
.blog-card .card-banner {
|
|
border-radius: var(--radius-20);
|
|
overflow: hidden;
|
|
margin-block-end: 20px;
|
|
}
|
|
|
|
.blog-card.large .card-banner { margin-block-end: 40px; }
|
|
|
|
.blog-card.large .card-title {
|
|
font-size: var(--fs-2);
|
|
line-height: 1.2;
|
|
margin-block-end: 20px;
|
|
}
|
|
|
|
.blog-card .card-text { color: var(--cool-gray); }
|
|
|
|
.blog-card .card-banner img { transition: var(--transition-2); }
|
|
|
|
.blog-card:is(:hover, :focus-within) .card-banner img { transform: scale(1.1); }
|
|
|
|
.blog-card .wrapper {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 30px;
|
|
margin-block-end: 20px;
|
|
}
|
|
|
|
.blog-card .tag {
|
|
color: var(--majorelle-blue);
|
|
font-size: var(--fs-9);
|
|
font-weight: var(--fw-700);
|
|
text-transform: uppercase;
|
|
transition: var(--transition-1);
|
|
}
|
|
|
|
.blog-card .tag:is(:hover, :focus) { color: var(--raisin-black-1); }
|
|
|
|
.blog-card .publish-date {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
color: var(--cool-gray);
|
|
font-weight: var(--fw-500);
|
|
transition: var(--transition-1);
|
|
}
|
|
|
|
.blog-card .publish-date ion-icon {
|
|
font-size: 18px;
|
|
--ionicon-stroke-width: 40px;
|
|
}
|
|
|
|
.blog-card .publish-date:is(:hover, :focus) { color: var(--raisin-black-1); }
|
|
|
|
.blog-card .card-title {
|
|
color: var(--raisin-black-1);
|
|
font-size: var(--fs-4);
|
|
letter-spacing: -1px;
|
|
transition: var(--transition-1);
|
|
}
|
|
|
|
.blog-card .card-title:is(:hover, :focus) { color: var(--majorelle-blue); }
|
|
|
|
|
|
|
|
|
|
|
|
/*-----------------------------------*\
|
|
#FOOTER
|
|
\*-----------------------------------*/
|
|
|
|
.footer {
|
|
background-color: var(--raisin-black-1);
|
|
color: var(--cool-gray);
|
|
}
|
|
|
|
.footer-top {
|
|
padding-block-end: 60px;
|
|
display: grid;
|
|
gap: 50px;
|
|
}
|
|
|
|
.footer-list-title {
|
|
color: var(--white);
|
|
font-size: var(--fs-5);
|
|
font-weight: var(--fw-500);
|
|
margin-block-end: 20px;
|
|
}
|
|
|
|
.footer-text { margin-block-end: 30px; }
|
|
|
|
.footer .social-list { gap: 12px; }
|
|
|
|
.footer .social-link {
|
|
background-color: var(--onyx);
|
|
padding: 14px;
|
|
border-radius: 50%;
|
|
transition: var(--transition-1);
|
|
}
|
|
|
|
.footer .social-link:is(:hover, :focus) {
|
|
background-color: var(--majorelle-blue);
|
|
color: var(--white);
|
|
}
|
|
|
|
.footer-link {
|
|
font-size: var(--fs-8);
|
|
margin-block-start: 15px;
|
|
transition: var(--transition-1);
|
|
}
|
|
|
|
.footer-link:is(:hover, :focus) { color: var(--mustard); }
|
|
|
|
.insta-post {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 15px;
|
|
}
|
|
|
|
.insta-card {
|
|
position: relative;
|
|
border-radius: var(--radius-10);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.insta-card .card-content {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: grid;
|
|
place-content: center;
|
|
background-color: var(--blue-ryb_80);
|
|
color: var(--white);
|
|
font-size: 25px;
|
|
opacity: 0;
|
|
transition: var(--transition-1);
|
|
}
|
|
|
|
.insta-card:is(:hover, :focus-within) .card-content { opacity: 1; }
|
|
|
|
.footer-bottom {
|
|
color: var(--white);
|
|
font-size: var(--fs-8);
|
|
padding-block: 40px;
|
|
border-block-start: 1px solid var(--onyx);
|
|
}
|
|
|
|
.copyright { margin-block-end: 15px; }
|
|
|
|
.footer-bottom-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 5px 15px;
|
|
}
|
|
|
|
.footer-bottom-link { transition: var(--transition-1); }
|
|
|
|
.footer-bottom-link:is(:hover, :focus) { color: var(--mustard); }
|
|
|
|
|
|
|
|
|
|
|
|
/*-----------------------------------*\
|
|
#BACK TO TOP
|
|
\*-----------------------------------*/
|
|
|
|
.back-top-btn {
|
|
position: fixed;
|
|
bottom: 20px;
|
|
right: 30px;
|
|
background-color: var(--majorelle-blue);
|
|
color: var(--white);
|
|
font-size: 18px;
|
|
padding: 16px;
|
|
border-radius: var(--radius-8);
|
|
z-index: 4;
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
transition: var(--transition-1);
|
|
}
|
|
|
|
.back-top-btn.active {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
transform: translateY(-10px);
|
|
}
|
|
|
|
.back-top-btn::after {
|
|
bottom: -12px;
|
|
right: 0;
|
|
width: 100%;
|
|
height: 10px;
|
|
background-image: var(--gradient);
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/*-----------------------------------*\
|
|
#MEDIA QUERIES
|
|
\*-----------------------------------*/
|
|
|
|
/**
|
|
* responsive for large than 575px screen
|
|
*/
|
|
|
|
@media (min-width: 575px) {
|
|
|
|
/**
|
|
* REUSED STYLE
|
|
*/
|
|
|
|
.container {
|
|
max-width: 540px;
|
|
width: 100%;
|
|
margin-inline: auto;
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
* HEADER
|
|
*/
|
|
|
|
.header .container { max-width: unset; }
|
|
|
|
|
|
|
|
|
|
/**
|
|
* PROJECT
|
|
*/
|
|
|
|
.project-card .card-content {
|
|
max-width: max-content;
|
|
width: calc(100% - 40px);
|
|
left: 50%;
|
|
right: auto;
|
|
padding: 50px 80px;
|
|
transform: translate(-50%, calc(-50% + 20px));
|
|
}
|
|
|
|
.project-card:is(:hover, :focus-within) .card-content { transform: translate(-50%, -50%); }
|
|
|
|
.project-card .card-title { margin-block-end: 10px; }
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
* responsive for large than 768px screen
|
|
*/
|
|
|
|
@media (min-width: 768px) {
|
|
|
|
/**
|
|
* CUSTOM PROPERTY
|
|
*/
|
|
|
|
:root {
|
|
|
|
/**
|
|
* typography
|
|
*/
|
|
|
|
--fs-1: 5.5rem;
|
|
--fs-2: 3.8rem;
|
|
--fs-7: 1.8rem;
|
|
|
|
/**
|
|
* spacing
|
|
*/
|
|
|
|
--section-padding: 120px;
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
* REUSED STYLE
|
|
*/
|
|
|
|
.container { max-width: 720px; }
|
|
|
|
.btn { height: 60px; }
|
|
|
|
.grid-list { grid-template-columns: 1fr 1fr; }
|
|
|
|
|
|
|
|
/**
|
|
* HERO
|
|
*/
|
|
|
|
.hero .container { gap: 120px; }
|
|
|
|
.hero .wrapper {
|
|
gap: 50px;
|
|
margin-block-end: 60px;
|
|
}
|
|
|
|
.hero .social-link .span {
|
|
display: block;
|
|
font-size: var(--fs-9);
|
|
color: var(--raisin-black-1);
|
|
font-weight: var(--fw-700);
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
transition: var(--transition-2);
|
|
}
|
|
|
|
.hero .social-link {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 15px;
|
|
background: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.hero .social-link:is(:hover, :focus) {
|
|
background: unset;
|
|
color: var(--color);
|
|
}
|
|
|
|
.hero .social-link:is(:hover, :focus) .span { color: var(--color); }
|
|
|
|
|
|
|
|
/**
|
|
* FEATURE
|
|
*/
|
|
|
|
.feature-banner { max-width: max-content; }
|
|
|
|
.feature-list { gap: 30px; }
|
|
|
|
.feature-card {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: flex-start;
|
|
gap: 25px;
|
|
}
|
|
|
|
.feature-card .card-icon { margin-block-end: 0; }
|
|
|
|
.feature-card .card-text { max-width: 32ch; }
|
|
|
|
|
|
|
|
/**
|
|
* PROJECT
|
|
*/
|
|
|
|
.project .grid-list > li:first-child { grid-column: 1 / 3; }
|
|
|
|
|
|
|
|
/**
|
|
* NEWSLETTER
|
|
*/
|
|
|
|
.newsletter-form { position: relative; }
|
|
|
|
.email-field { margin-block-end: 0; }
|
|
|
|
.newsletter-form .btn-secondary {
|
|
position: absolute;
|
|
top: 5px;
|
|
right: 5px;
|
|
bottom: 5px;
|
|
height: auto;
|
|
padding-inline: 25px;
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
* BLOG
|
|
*/
|
|
|
|
.blog-card:not(.large) {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 40px;
|
|
}
|
|
|
|
.blog-card:not(.large) .card-banner {
|
|
margin-block-end: 0;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.blog-card .card-title { --fs-4: 2.6rem; }
|
|
|
|
|
|
|
|
/**
|
|
* FOOTER
|
|
*/
|
|
|
|
.footer-top { grid-template-columns: 1fr 1fr; }
|
|
|
|
.copyright { text-align: center; }
|
|
|
|
.footer-bottom-list { justify-content: center; }
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
* responsive for large than 992px screen
|
|
*/
|
|
|
|
@media (min-width: 992px) {
|
|
|
|
/**
|
|
* REUSED STYLE
|
|
*/
|
|
|
|
.container { max-width: 960px; }
|
|
|
|
.btn { height: 70px; }
|
|
|
|
.grid-list { grid-template-columns: repeat(3, 1fr); }
|
|
|
|
|
|
|
|
/**
|
|
* HEADER
|
|
*/
|
|
|
|
.header { padding-block-start: 47px; }
|
|
|
|
.nav-open-btn,
|
|
.overlay,
|
|
.navbar .wrapper { display: none; }
|
|
|
|
.navbar,
|
|
.navbar.active { all: unset; }
|
|
|
|
.navbar-item:not(:last-child) { border: none; }
|
|
|
|
.navbar-list {
|
|
display: flex;
|
|
gap: 30px;
|
|
}
|
|
|
|
.navbar-link {
|
|
position: relative;
|
|
color: var(--cool-gray);
|
|
text-transform: capitalize;
|
|
font-size: unset;
|
|
font-weight: var(--fw-500);
|
|
}
|
|
|
|
.navbar-link:is(:hover, :focus) { color: var(--raisin-black-1); }
|
|
|
|
.navbar-link::before {
|
|
content: "";
|
|
position: absolute;
|
|
bottom: 5px;
|
|
left: 0;
|
|
width: 0;
|
|
height: 4px;
|
|
border-radius: 5px;
|
|
background-color: var(--majorelle-blue);
|
|
transition: var(--transition-1);
|
|
}
|
|
|
|
.navbar-link:is(:hover, :focus)::before { width: 100%; }
|
|
|
|
.header .btn { display: inline-flex; }
|
|
|
|
.header .btn::before,
|
|
.header .btn::after { background-color: var(--raisin-black-1); }
|
|
|
|
.header .btn:is(:hover, :focus) { color: var(--white); }
|
|
|
|
|
|
|
|
/**
|
|
* HERO
|
|
*/
|
|
|
|
.hero {
|
|
background-image: linear-gradient(to right, var(--white) 79%, var(--mustard) 79%);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hero .container {
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 40px;
|
|
}
|
|
|
|
.hero .wrapper { flex-wrap: nowrap; }
|
|
|
|
.hero .btn,
|
|
.hero-btn .span { flex-shrink: 0; }
|
|
|
|
.hero-banner { margin-inline-end: -140px; }
|
|
|
|
|
|
|
|
/**
|
|
* FEATURE
|
|
*/
|
|
|
|
.feature .container {
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 30px;
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
* PROJECT
|
|
*/
|
|
|
|
.filter-btn {
|
|
--fs-9: 1.8rem;
|
|
padding: 20px 25px;
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
* NEWSLETTER
|
|
*/
|
|
|
|
.newsletter .container {
|
|
grid-template-columns: 1fr 0.8fr;
|
|
align-items: center;
|
|
}
|
|
|
|
.newsletter-banner {
|
|
order: 1;
|
|
margin-inline-start: auto;
|
|
}
|
|
|
|
.email-field {
|
|
min-height: 80px;
|
|
padding-inline: 40px;
|
|
}
|
|
|
|
.newsletter-form .btn-secondary {
|
|
top: 10px;
|
|
right: 10px;
|
|
bottom: 10px;
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
* BLOG
|
|
*/
|
|
|
|
.blog-list {
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 40px 70px;
|
|
}
|
|
|
|
.blog-list > li:first-child { grid-row: 1 / 4; }
|
|
|
|
.blog-card:not(.large) .wrapper {
|
|
gap: 10px;
|
|
flex-wrap: nowrap;
|
|
margin-block-end: 10px;
|
|
}
|
|
|
|
.blog-card:not(.large) .publish-date {
|
|
flex-shrink: 0;
|
|
font-size: var(--fs-9);
|
|
gap: 5px;
|
|
}
|
|
|
|
.blog-card .card-title { --fs-4: 1.8rem; }
|
|
|
|
|
|
|
|
/**
|
|
* FOOTER
|
|
*/
|
|
|
|
.footer-top {
|
|
grid-template-columns: 1fr 0.5fr 0.5fr 0.9fr;
|
|
padding-block: 120px;
|
|
}
|
|
|
|
.footer-bottom {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.copyright { margin-block-end: 0; }
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
* responsive for large than 1200px screen
|
|
*/
|
|
|
|
@media (min-width: 1200px) {
|
|
|
|
/**
|
|
* CUSTOM PROPERTY
|
|
*/
|
|
|
|
:root {
|
|
|
|
/**
|
|
* typography
|
|
*/
|
|
|
|
--fs-1: 5.5rem;
|
|
--fs-2: 4.5rem;
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
* REUSED STYLE
|
|
*/
|
|
|
|
.container { max-width: 1140px; }
|
|
|
|
.section-title.text-center {
|
|
max-width: 20ch;
|
|
margin-inline: auto;
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
* HEADER
|
|
*/
|
|
|
|
.header .container { padding-inline: 30px; }
|
|
|
|
.navbar-list { gap: 50px; }
|
|
|
|
|
|
|
|
/**
|
|
* HERO
|
|
*/
|
|
|
|
.hero-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-block-start: 50px;
|
|
}
|
|
|
|
.hero-text { margin-block: 40px 45px; }
|
|
|
|
.hero .wrapper { margin-block-end: auto; }
|
|
|
|
.hero-banner {
|
|
margin-inline-end: -250px;
|
|
min-width: max-content;
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
* SERVICE
|
|
*/
|
|
|
|
.service .grid-list { grid-template-columns: repeat(4, 1fr); }
|
|
|
|
.service-card .h3 { --fs-3: 2rem; }
|
|
|
|
|
|
|
|
/**
|
|
* PROJECT
|
|
*/
|
|
|
|
.filter-btn { padding-inline: 40px; }
|
|
|
|
|
|
|
|
/**
|
|
* BLOG
|
|
*/
|
|
|
|
.blog-list { column-gap: 35px; }
|
|
|
|
.blog-card.large {
|
|
padding-inline-end: 35px;
|
|
border-inline-end: 1px solid var(--gainsboro);
|
|
}
|
|
|
|
.blog-card:not(.large) .publish-date { --fs-9: 1.6rem; }
|
|
|
|
.blog-card:not(.large) .wrapper {
|
|
gap: 25px;
|
|
margin-block-end: 20px;
|
|
}
|
|
|
|
.blog-card .card-title { --fs-4: 2.4rem; }
|
|
|
|
}
|
|
|
|
/* Dropdown Menu Styling */
|
|
.profile-dropdown {
|
|
position: relative;
|
|
display: inline-block;
|
|
margin-left: 15px;
|
|
}
|
|
|
|
.profile-btn {
|
|
background: var(--bg-primary, #6366f1);
|
|
border: none;
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
padding: 10px;
|
|
width: 45px;
|
|
height: 45px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.profile-btn:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.profile-btn i {
|
|
font-size: 22px;
|
|
color: white;
|
|
}
|
|
|
|
.dropdown-menu {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 55px;
|
|
background-color: white;
|
|
min-width: 180px;
|
|
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
|
|
border-radius: 8px;
|
|
z-index: 1000;
|
|
display: none;
|
|
overflow: hidden;
|
|
animation: dropdownFade 0.3s ease-in-out;
|
|
}
|
|
|
|
@keyframes dropdownFade {
|
|
from { opacity: 0; transform: translateY(-10px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
.dropdown-menu.active {
|
|
display: block;
|
|
}
|
|
|
|
.dropdown-item, .logout-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 12px 16px;
|
|
text-decoration: none;
|
|
color: var(--text-color, #333);
|
|
transition: background-color 0.3s;
|
|
font-weight: 500;
|
|
background: none;
|
|
border: none;
|
|
width: 100%;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
font-size: 1em;
|
|
font-family: 'DM Sans', sans-serif;
|
|
}
|
|
|
|
.dropdown-item i, .logout-btn i {
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.dropdown-item:hover, .logout-btn:hover {
|
|
background-color: #f5f5f5;
|
|
}
|
|
|
|
.logout-form {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
/* Quiz Styles */
|
|
.quiz {
|
|
padding: 60px 0;
|
|
background-color: #f9f9f9;
|
|
background-image: linear-gradient(to right, var(--white) 79%, var(--mustard) 79%);
|
|
}
|
|
|
|
.quiz-header {
|
|
text-align: center;
|
|
margin-bottom: 40px;
|
|
|
|
}
|
|
|
|
.quiz-header h2 {
|
|
margin-bottom: 3rem; /* Ubah nilai sesuai kebutuhan */
|
|
}
|
|
|
|
.quiz-header p {
|
|
margin-top: 2rem; /* Opsional, jika default-nya terlalu besar */
|
|
}
|
|
|
|
.quiz-form {
|
|
max-width: 900px;
|
|
margin: 0 auto;
|
|
background: white;
|
|
padding: 30px;
|
|
border-radius: 10px;
|
|
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.quiz-section {
|
|
display: none;
|
|
}
|
|
|
|
.quiz-section.active {
|
|
display: block;
|
|
}
|
|
|
|
.quiz-subtitle {
|
|
color: var(--majorelle-blue);
|
|
margin-bottom: 20px;
|
|
font-size: 1.8rem;
|
|
}
|
|
|
|
.form-group .question-label,
|
|
.quiz-form .question-label,
|
|
.quiz-section .question-label,
|
|
.label.question-label {
|
|
display: block;
|
|
margin-bottom: 30px;
|
|
font-weight: 500;
|
|
color: #333;
|
|
font-size: 1.6rem; /* Smaller than 1.7rem as requested */
|
|
line-height: 1.5rem;
|
|
padding-left: 5px;
|
|
border-left: 3px solid var(--mustard); /* Subtle accent line */
|
|
}
|
|
|
|
.form-group {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.form-group label {
|
|
display: block;
|
|
font-weight: 500;
|
|
color: #333;
|
|
}
|
|
|
|
.form-control {
|
|
width: 100%; /* Agar input mengisi kontainer secara horizontal */
|
|
padding: 10px 12px; /* Padding dalam input */
|
|
border: 1px solid #ccc;
|
|
border-radius: 8px;
|
|
background-color: #fff;
|
|
color: #333;
|
|
box-sizing: border-box; /* Padding dan border dihitung dalam lebar elemen */
|
|
font-size: 1.6rem; /* Ukuran font standar */
|
|
line-height: 1.4; /* Jarak antara baris dalam input */
|
|
}
|
|
|
|
.form-control:focus {
|
|
border-color: var(--majorelle-blue);
|
|
box-shadow: 0 0 0 3px rgba(74, 108, 247, 0.2);
|
|
outline: none;
|
|
}
|
|
|
|
textarea.form-control {
|
|
min-height: 100px;
|
|
resize: vertical;
|
|
}
|
|
|
|
.radio-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
margin: 15px 0;
|
|
}
|
|
|
|
.radio-group label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
background-color: #f9f9f9;
|
|
padding: 15px 20px;
|
|
border-radius: 8px;
|
|
border: 1px solid #e0e0e0;
|
|
width: 100%;
|
|
transition: all 0.3s ease;
|
|
cursor: pointer;
|
|
font-size: 1.45rem;
|
|
position: relative;
|
|
}
|
|
|
|
.radio-group label:hover {
|
|
background-color: #eef1ff;
|
|
border-color: var(--majorelle-blue);
|
|
}
|
|
|
|
.radio-group input[type="radio"] {
|
|
appearance: none;
|
|
-webkit-appearance: none;
|
|
width: 15px;
|
|
height: 15px;
|
|
border: 2px solid #ccc;
|
|
border-radius: 50%;
|
|
outline: none;
|
|
margin-right: 8px;
|
|
position: relative;
|
|
cursor: pointer;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.radio-group input[type="radio"]:checked {
|
|
border-color: var(--majorelle-blue);
|
|
background-color: #fff;
|
|
}
|
|
|
|
.radio-group input[type="radio"]:checked::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
background-color: var(--majorelle-blue);
|
|
}
|
|
|
|
.radio-group input[type="radio"]:checked + span {
|
|
color: var(--majorelle-blue);
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* Add active state for the entire label when radio is checked */
|
|
.radio-group input[type="radio"]:checked ~ * {
|
|
color: var(--majorelle-blue);
|
|
}
|
|
|
|
.radio-group label:has(input[type="radio"]:checked) {
|
|
background-color: #eef1ff;
|
|
border-color: var(--majorelle-blue);
|
|
box-shadow: 0 2px 8px rgba(74, 108, 247, 0.15);
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.quiz-navigation {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-top: 30px;
|
|
}
|
|
|
|
.btn-next, .btn-prev {
|
|
padding: 20px 40px;
|
|
border: none;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.btn-next {
|
|
background-color: var(--majorelle-blue);
|
|
color: white;
|
|
}
|
|
|
|
.btn-prev {
|
|
background-color: var(--mustard);
|
|
color: black;
|
|
}
|
|
|
|
.btn-outline {
|
|
background: none;
|
|
border: 1px solid var(--majorelle-blue);
|
|
color: var(--majorelle-blue);
|
|
|
|
}
|
|
|
|
.form-control[readonly] {
|
|
background-color: #f8f9fa;
|
|
color: #6c757d;
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Kurikulum Selection Styles */
|
|
.kurikulum-container {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
|
gap: 20px;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.kurikulum-card {
|
|
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
|
|
box-shadow 0.3s ease;
|
|
cursor: pointer;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.kurikulum-card .card {
|
|
height: 100%;
|
|
border: 2px solid transparent;
|
|
border-radius: 16px;
|
|
overflow: hidden;
|
|
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
|
|
transition: all 0.3s ease;
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
.kurikulum-card:hover {
|
|
transform: translateY(-8px);
|
|
}
|
|
|
|
.kurikulum-card:hover .card {
|
|
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.kurikulum-card.active .card {
|
|
position: relative;
|
|
background: linear-gradient(to bottom right, #ffffff, #f8f9fa);
|
|
background-color: rgba(40, 167, 69, 0.04);
|
|
}
|
|
|
|
.kurikulum-card.disabled {
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.kurikulum-card.disabled .card {
|
|
opacity: 0.7;
|
|
background-color: #f8f8f8;
|
|
cursor: not-allowed;
|
|
font-size: 1.3rem;
|
|
}
|
|
|
|
.kurikulum-card.disabled:hover {
|
|
transform: none;
|
|
}
|
|
|
|
.kurikulum-card.active.selected .card {
|
|
border-color: var(--majorelle-blue);
|
|
box-shadow: 0 8px 20px rgba(74, 108, 247, 0.2);
|
|
}
|
|
|
|
.kurikulum-card-header {
|
|
padding: 1.5rem 1.5rem 0.75rem;
|
|
}
|
|
|
|
.kurikulum-card-body {
|
|
padding: 0.75rem 1.5rem 1.5rem;
|
|
position: relative;
|
|
}
|
|
|
|
.kurikulum-card .card-body {
|
|
padding: 20px;
|
|
position: relative;
|
|
}
|
|
|
|
.kurikulum-title,
|
|
.kurikulum-card .card-title {
|
|
color: #212529;
|
|
font-size: 1.5rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.kurikulum-description {
|
|
color: #6c757d;
|
|
font-size: 0.95rem;
|
|
margin-bottom: 1rem;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.kurikulum-card .badge {
|
|
padding: 10px 20px;
|
|
border-radius: 30px;
|
|
font-weight: 500;
|
|
font-size: 0.9rem;
|
|
display: block;
|
|
text-align: center;
|
|
width: 100%;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.badge.bg-success {
|
|
background-color: #28a745 !important;
|
|
color: white;
|
|
}
|
|
|
|
.badge.bg-danger {
|
|
background-color: #dc3545 !important;
|
|
color: white;
|
|
}
|
|
|
|
.kurikulum-status {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 5px;
|
|
margin-bottom: 5px;
|
|
font-weight: 500;
|
|
font-size: 1.4rem;
|
|
transition: color 0.3s ease;
|
|
}
|
|
|
|
.kurikulum-status.available {
|
|
color: #28a745;
|
|
}
|
|
|
|
.kurikulum-status.unavailable {
|
|
color: #dc3545;
|
|
}
|
|
|
|
.status-icon {
|
|
margin-right: 8px;
|
|
font-size: 1.2rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* Radio button styling */
|
|
.kurikulum-radio {
|
|
display: none !important;
|
|
}
|
|
|
|
/* For when we need visible radio buttons */
|
|
.visible-radio .kurikulum-radio {
|
|
margin-top: 12px;
|
|
accent-color: #28a745;
|
|
transform: scale(1.2);
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
display: inline-block !important;
|
|
}
|
|
|
|
.visible-radio .kurikulum-radio:hover {
|
|
transform: scale(1.3);
|
|
}
|
|
|
|
/* Custom radio button appearance */
|
|
.kurikulum-card.active.selected .card::after {
|
|
position: absolute;
|
|
bottom: 20px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 50%;
|
|
background-color: var(--majorelle-blue);
|
|
border: 2px solid white;
|
|
box-shadow: 0 0 0 2px var(--majorelle-blue);;
|
|
}
|
|
|
|
/* Visual indicator for selected card without hiding radio */
|
|
.kurikulum-card.active .card-body input[type="radio"] {
|
|
position: absolute;
|
|
opacity: 0;
|
|
}
|
|
|
|
/* Radio indicator for selected cards */
|
|
.kurikulum-card.active.selected .radio-indicator {
|
|
position: relative;
|
|
display: block;
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: 50%;
|
|
border: 2px solid var(--majorelle-blue);
|
|
margin: 15px auto 0;
|
|
}
|
|
|
|
.kurikulum-card.active.selected .radio-indicator::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 14px;
|
|
height: 14px;
|
|
border-radius: 50%;
|
|
background-color: var(--majorelle-blue);
|
|
}
|
|
|
|
.kurikulum-card-footer {
|
|
padding: 0.75rem 1.5rem;
|
|
background-color: rgba(0, 0, 0, 0.02);
|
|
border-top: 1px solid rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
/* Quiz Navigation Styles */
|
|
.quiz-navigation {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-top: 30px;
|
|
}
|
|
|
|
/* Responsiveness */
|
|
@media (max-width: 768px) {
|
|
.kurikulum-container {
|
|
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
|
|
gap: 15px;
|
|
}
|
|
|
|
.kurikulum-card {
|
|
margin-bottom: 1.25rem;
|
|
}
|
|
|
|
.kurikulum-card-header,
|
|
.kurikulum-card-body,
|
|
.kurikulum-card .card-body {
|
|
padding: 1.25rem;
|
|
}
|
|
|
|
.kurikulum-title,
|
|
.kurikulum-card .card-title {
|
|
font-size: 1.25rem;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.kurikulum-card .badge {
|
|
padding: 8px 16px;
|
|
font-size: 0.85rem;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 576px) {
|
|
.kurikulum-container {
|
|
grid-template-columns: 1fr;
|
|
gap: 12px;
|
|
}
|
|
|
|
.kurikulum-card {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.kurikulum-card-header,
|
|
.kurikulum-card-body,
|
|
.kurikulum-card .card-body {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.kurikulum-title,
|
|
.kurikulum-card .card-title {
|
|
font-size: 1.1rem;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.kurikulum-description {
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.kurikulum-status {
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.status-icon {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.kurikulum-card .badge {
|
|
padding: 6px 12px;
|
|
font-size: 0.8rem;
|
|
}
|
|
}
|
|
|
|
/* Riwayat Section Styles */
|
|
.riwayat {
|
|
padding: 60px 0;
|
|
background-color: var(--ghost-white);
|
|
}
|
|
|
|
.riwayat-header {
|
|
text-align: center;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.riwayat-header h2 {
|
|
margin-bottom: 3rem;
|
|
}
|
|
|
|
.riwayat-header p {
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
.riwayat-content {
|
|
max-width: 900px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
|
|
/* Riwayat Section Styles */
|
|
.riwayat {
|
|
padding: 80px 0;
|
|
background-color: var(--ghost-white);
|
|
position: relative;
|
|
}
|
|
|
|
|
|
.riwayat-header {
|
|
text-align: center;
|
|
margin-bottom: 50px;
|
|
}
|
|
|
|
|
|
.riwayat-content {
|
|
max-width: 1000px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* Riwayat Table Styles */
|
|
.riwayat-table-container {
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.riwayat-table-container .card {
|
|
border: none;
|
|
border-radius: 16px;
|
|
overflow: hidden;
|
|
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
|
|
transition: all 0.3s ease;
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
.riwayat-table-container .card-body {
|
|
padding: 30px;
|
|
}
|
|
|
|
.riwayat-table-container .quiz-subtitle {
|
|
color: var(--majorelle-blue);
|
|
font-size: 1.8rem;
|
|
font-weight: 600;
|
|
position: relative;
|
|
padding-bottom: 20px;
|
|
}
|
|
|
|
|
|
.riwayat-table-container .table {
|
|
width: 100%;
|
|
margin-bottom: 1.5rem;
|
|
color: #2c3e50;
|
|
border-collapse: separate;
|
|
border-spacing: 0;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.riwayat-table-container .table th,
|
|
.riwayat-table-container .table td {
|
|
padding: 15px 20px;
|
|
vertical-align: middle;
|
|
border-top: 1px solid #edf2f7;
|
|
font-size: 1.45rem;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.riwayat-table-container .table thead th {
|
|
vertical-align: bottom;
|
|
background-color: #f8fafc;
|
|
border-bottom: 2px solid #e2e8f0;
|
|
font-weight: 600;
|
|
color: #4a5568;
|
|
padding: 18px 20px;
|
|
text-transform: uppercase;
|
|
font-size: 1.35rem;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.riwayat-table-container .table tbody tr {
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.riwayat-table-container .table-striped tbody tr:nth-of-type(odd) {
|
|
background-color: rgba(247, 250, 252, 0.7);
|
|
}
|
|
|
|
.riwayat-table-container .table tbody tr:hover {
|
|
background-color: rgba(74, 108, 247, 0.06);
|
|
}
|
|
|
|
/* Button Styles in Table */
|
|
.riwayat-table-container .btn {
|
|
border-radius: 6px;
|
|
font-size: 1.1rem;
|
|
margin-bottom: 10px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 40px;
|
|
height: 40px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.riwayat-table-container .btn:last-child {
|
|
margin-right: 0;
|
|
}
|
|
|
|
.riwayat-table-container .btn i {
|
|
margin-right: 0; /* Karena hanya ikon */
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.riwayat-table-container .btn-info {
|
|
background-color: var(--majorelle-blue);
|
|
color: white;
|
|
border: none;
|
|
box-shadow: 0 2px 4px rgba(74, 108, 247, 0.2);
|
|
}
|
|
|
|
.riwayat-table-container .btn-info:hover {
|
|
background-color: #3a5acc;
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 8px rgba(74, 108, 247, 0.25);
|
|
}
|
|
|
|
.riwayat-table-container .btn-danger {
|
|
background-color: #e53e3e;
|
|
color: white;
|
|
border: none;
|
|
box-shadow: 0 2px 4px rgba(229, 62, 62, 0.2);
|
|
}
|
|
|
|
.riwayat-table-container .btn-danger:hover {
|
|
background-color: #c53030;
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 8px rgba(229, 62, 62, 0.25);
|
|
}
|
|
|
|
|
|
/* Alert Styles */
|
|
.riwayat-content .alert {
|
|
padding: 25px;
|
|
margin-bottom: 25px;
|
|
border: none;
|
|
border-radius: 12px;
|
|
font-size: 1.5rem;
|
|
display: flex;
|
|
align-items: center;
|
|
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.riwayat-content .alert:hover {
|
|
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.riwayat-content .alert-info {
|
|
color: #2b6cb0;
|
|
background-color: #ebf8ff;
|
|
border-left: 4px solid #63b3ed;
|
|
}
|
|
|
|
.riwayat-content .alert i {
|
|
margin-right: 15px;
|
|
font-size: 1.7rem;
|
|
color: #4299e1;
|
|
}
|
|
|
|
/* Responsive Styles */
|
|
@media (max-width: 992px) {
|
|
|
|
.riwayat-content {
|
|
max-width: 90%;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.riwayat {
|
|
padding: 60px 0;
|
|
}
|
|
|
|
.riwayat-header h2 {
|
|
font-size: 2.8rem;
|
|
}
|
|
|
|
.riwayat-content {
|
|
padding: 0 15px;
|
|
max-width: 95%;
|
|
}
|
|
|
|
.riwayat-filter .row {
|
|
row-gap: 1.5rem;
|
|
}
|
|
|
|
.riwayat-filter .col-md-4 {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.riwayat-table-container .table {
|
|
min-width: 750px;
|
|
}
|
|
|
|
.riwayat-table-container .table-responsive {
|
|
overflow-x: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
margin-bottom: 15px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.riwayat-filter .btn,
|
|
.riwayat-table-container .btn {
|
|
padding: 10px 16px;
|
|
font-size: 1.4rem;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 576px) {
|
|
.riwayat {
|
|
background-image: none;
|
|
background-color: var(--ghost-white);
|
|
padding: 50px 0;
|
|
}
|
|
|
|
.riwayat-header h2 {
|
|
font-size: 2.5rem;
|
|
}
|
|
|
|
.riwayat-header p {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.riwayat-filter .card-body,
|
|
.riwayat-table-container .card-body {
|
|
padding: 20px;
|
|
}
|
|
|
|
.riwayat-filter h3.quiz-subtitle,
|
|
.riwayat-table-container .quiz-subtitle {
|
|
font-size: 1.7rem;
|
|
}
|
|
|
|
.riwayat-filter .form-label {
|
|
font-size: 1.4rem;
|
|
}
|
|
|
|
.riwayat-filter .form-control {
|
|
font-size: 1.4rem;
|
|
padding: 10px 12px;
|
|
}
|
|
|
|
.riwayat-filter .btn {
|
|
width: 100%;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.riwayat-table-container .table th,
|
|
.riwayat-table-container .table td {
|
|
padding: 12px;
|
|
font-size: 1.3rem;
|
|
}
|
|
|
|
.riwayat-table-container .table thead th {
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
.riwayat-table-container .btn {
|
|
padding: 8px 12px;
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.riwayat-content .alert {
|
|
padding: 20px;
|
|
font-size: 1.4rem;
|
|
}
|
|
}
|
|
|
|
/* CSS Khusus untuk Halaman Hasil */
|
|
/* Gaya Umum Section Hasil */
|
|
.hasil {
|
|
padding: 80px 0;
|
|
background-color: #f9f9f9;
|
|
background-image: linear-gradient(to right, var(--white) 79%, var(--majorelle-blue) 79%);
|
|
position: relative;
|
|
}
|
|
|
|
.hasil-header {
|
|
text-align: center;
|
|
margin-bottom: 50px;
|
|
}
|
|
|
|
.hasil-header h2 {
|
|
margin-bottom: 3rem;
|
|
|
|
}
|
|
|
|
.hasil-content {
|
|
max-width: 1000px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* Gaya untuk Informasi Pengguna */
|
|
.hasil-user-info .card {
|
|
border: none;
|
|
border-radius: 16px;
|
|
overflow: hidden;
|
|
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
|
|
transition: all 0.3s ease;
|
|
background-color: #ffffff;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.hasil-user-info .card-body {
|
|
padding: 30px;
|
|
}
|
|
|
|
.hasil-user-info .quiz-subtitle {
|
|
color: var(--majorelle-blue);
|
|
font-size: 1.8rem;
|
|
font-weight: 600;
|
|
position: relative;
|
|
padding-bottom: 20px;
|
|
}
|
|
|
|
.hasil-user-info p {
|
|
font-size: 1.45rem;
|
|
color: #2c3e50;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.hasil-user-info strong {
|
|
font-weight: 600;
|
|
color: #4a5568;
|
|
}
|
|
|
|
/* Gaya untuk Tabel Hasil Perhitungan */
|
|
.hasil-table-container {
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.hasil-table-container .card {
|
|
border: none;
|
|
border-radius: 16px;
|
|
overflow: hidden;
|
|
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
|
|
transition: all 0.3s ease;
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
.hasil-table-container .card-body {
|
|
padding: 30px;
|
|
}
|
|
|
|
.hasil-table-container .quiz-subtitle {
|
|
color: var(--majorelle-blue);
|
|
font-size: 1.8rem;
|
|
font-weight: 600;
|
|
position: relative;
|
|
padding-bottom: 20px;
|
|
}
|
|
|
|
.hasil-table-container .table {
|
|
width: 100%;
|
|
margin-bottom: 1.5rem;
|
|
color: #2c3e50;
|
|
border-collapse: separate;
|
|
border-spacing: 0;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hasil-table-container .table th,
|
|
.hasil-table-container .table td {
|
|
padding: 15px 20px;
|
|
vertical-align: middle;
|
|
border-top: 1px solid #edf2f7;
|
|
font-size: 1.45rem;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.hasil-table-container .table thead th {
|
|
vertical-align: bottom;
|
|
background-color: #f8fafc;
|
|
border-bottom: 2px solid #e2e8f0;
|
|
font-weight: 600;
|
|
color: #4a5568;
|
|
padding: 18px 20px;
|
|
text-transform: uppercase;
|
|
font-size: 1.35rem;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.hasil-table-container .table tbody tr {
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.hasil-table-container .table-striped tbody tr:nth-of-type(odd) {
|
|
background-color: rgba(247, 250, 252, 0.7);
|
|
}
|
|
|
|
.hasil-table-container .table-success {
|
|
background-color: rgba(72, 187, 120, 0.1) !important;
|
|
}
|
|
|
|
.hasil-table-container .table tbody tr:hover {
|
|
background-color: rgba(74, 108, 247, 0.06);
|
|
}
|
|
|
|
/* Detail Jurusan Collapsed Section */
|
|
.hasil-table-container .table tr.collapse {
|
|
background-color: #f8fafc;
|
|
}
|
|
|
|
.hasil-table-container .card-body.bg-light {
|
|
background-color: #f8fafc;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
margin: 10px 0;
|
|
border-left: 4px solid var(--majorelle-blue);
|
|
}
|
|
|
|
.hasil-table-container .badge {
|
|
font-size: 1.2rem;
|
|
padding: 8px 12px;
|
|
margin-right: 5px;
|
|
margin-bottom: 5px;
|
|
display: inline-block;
|
|
border-radius: 6px;
|
|
font-weight: 500;
|
|
letter-spacing: 0.3px;
|
|
}
|
|
|
|
.hasil-table-container .badge.bg-primary {
|
|
background-color: var(--majorelle-blue) !important;
|
|
box-shadow: 0 2px 5px rgba(74, 108, 247, 0.2);
|
|
}
|
|
|
|
.hasil-table-container .btn-info {
|
|
background-color: #60a5fa;
|
|
border: none;
|
|
color: white;
|
|
font-size: 1.25rem;
|
|
padding: 6px 12px;
|
|
border-radius: 6px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.hasil-table-container .btn-info:hover {
|
|
background-color: #3b82f6;
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 8px rgba(59, 130, 246, 0.25);
|
|
}
|
|
|
|
.hasil-table-container h5 {
|
|
color: var(--majorelle-blue);
|
|
font-size: 1.6rem;
|
|
font-weight: 600;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.hasil-table-container h6 {
|
|
color: #4a5568;
|
|
font-size: 1.4rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.hasil-table-container .text-muted {
|
|
color: #718096;
|
|
font-style: italic;
|
|
font-size: 1.3rem;
|
|
}
|
|
|
|
/* Gaya untuk Chart/Grafik */
|
|
.hasil-chart-container {
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.hasil-chart-container .card {
|
|
border: none;
|
|
border-radius: 16px;
|
|
overflow: hidden;
|
|
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
|
|
transition: all 0.3s ease;
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
.hasil-chart-container .card-body {
|
|
padding: 30px;
|
|
}
|
|
|
|
.hasil-chart-container .quiz-subtitle {
|
|
color: var(--majorelle-blue);
|
|
font-size: 1.8rem;
|
|
font-weight: 600;
|
|
position: relative;
|
|
padding-bottom: 20px;
|
|
}
|
|
|
|
.hasil-chart-container .chart-wrapper {
|
|
width: 100%;
|
|
height: 400px;
|
|
position: relative;
|
|
}
|
|
|
|
/* Gaya untuk Rekomendasi */
|
|
.hasil-recommendation {
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.hasil-recommendation .card {
|
|
border: none;
|
|
border-radius: 16px;
|
|
overflow: hidden;
|
|
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
|
|
transition: all 0.3s ease;
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
.hasil-recommendation .card:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 12px 25px rgba(0, 0, 0, 0.12);
|
|
}
|
|
|
|
.hasil-recommendation .card-body {
|
|
padding: 30px;
|
|
}
|
|
|
|
.hasil-recommendation .quiz-subtitle {
|
|
color: var(--majorelle-blue);
|
|
font-size: 1.8rem;
|
|
font-weight: 600;
|
|
position: relative;
|
|
padding-bottom: 20px;
|
|
}
|
|
|
|
.hasil-recommendation .recommendation-content {
|
|
text-align: center;
|
|
padding: 20px 0;
|
|
}
|
|
|
|
.hasil-recommendation .recommendation-badge {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.hasil-recommendation .badge {
|
|
font-size: 1.4rem;
|
|
padding: 10px 20px;
|
|
border-radius: 50px;
|
|
font-weight: 600;
|
|
box-shadow: 0 4px 8px rgba(72, 187, 120, 0.2);
|
|
}
|
|
|
|
.hasil-recommendation .recommendation-title {
|
|
font-size: 2.4rem;
|
|
font-weight: 700;
|
|
color: #2d3748;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.hasil-recommendation .recommendation-score {
|
|
font-size: 1.6rem;
|
|
color: #4a5568;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* Gaya untuk Tombol Navigasi */
|
|
.hasil-nav-buttons {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 15px;
|
|
margin-top: 40px;
|
|
}
|
|
|
|
.hasil-nav-buttons .btn {
|
|
padding: 12px 25px;
|
|
border-radius: 8px;
|
|
transition: all 0.3s ease;
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.hasil-nav-buttons .btn-primary {
|
|
background-color: var(--majorelle-blue);
|
|
border: none;
|
|
}
|
|
|
|
.hasil-nav-buttons .btn-primary:hover {
|
|
background-color: var(--majorelle-blue);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 6px 12px rgba(74, 108, 247, 0.25);
|
|
}
|
|
|
|
.hasil-nav-buttons .btn-secondary {
|
|
background-color: var(--mustard);
|
|
border: none;
|
|
}
|
|
|
|
.hasil-nav-buttons .btn-secondary:hover {
|
|
background-color: var(--mustard);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 6px 12px rgba(113, 128, 150, 0.25);
|
|
}
|
|
|
|
/* Responsive Styles */
|
|
@media (max-width: 992px) {
|
|
.hasil-content {
|
|
max-width: 90%;
|
|
}
|
|
|
|
.hasil-table-container .badge {
|
|
font-size: 1.1rem;
|
|
padding: 6px 10px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.hasil {
|
|
padding: 60px 0;
|
|
}
|
|
|
|
.hasil-header h2 {
|
|
font-size: 2.8rem;
|
|
}
|
|
|
|
.hasil-content {
|
|
padding: 0 15px;
|
|
max-width: 95%;
|
|
}
|
|
|
|
.hasil-user-info .row {
|
|
row-gap: 1.5rem;
|
|
}
|
|
|
|
.hasil-table-container .table {
|
|
min-width: 750px;
|
|
}
|
|
|
|
.hasil-table-container .table-responsive {
|
|
overflow-x: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
margin-bottom: 15px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.hasil-chart-container .chart-wrapper {
|
|
height: 350px;
|
|
}
|
|
|
|
.hasil-nav-buttons .btn {
|
|
padding: 10px 16px;
|
|
font-size: 1.4rem;
|
|
}
|
|
|
|
.hasil-table-container .card-body.bg-light {
|
|
padding: 15px;
|
|
}
|
|
|
|
.hasil-table-container h5 {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.hasil-table-container h6 {
|
|
font-size: 1.3rem;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 576px) {
|
|
.hasil {
|
|
background-image: none;
|
|
background-color: var(--ghost-white);
|
|
padding: 50px 0;
|
|
}
|
|
|
|
.hasil-header h2 {
|
|
font-size: 2.5rem;
|
|
}
|
|
|
|
.hasil-header p {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.hasil-user-info .card-body,
|
|
.hasil-table-container .card-body,
|
|
.hasil-chart-container .card-body,
|
|
.hasil-recommendation .card-body {
|
|
padding: 20px;
|
|
}
|
|
|
|
.hasil-user-info .quiz-subtitle,
|
|
.hasil-table-container .quiz-subtitle,
|
|
.hasil-chart-container .quiz-subtitle,
|
|
.hasil-recommendation .quiz-subtitle {
|
|
font-size: 1.7rem;
|
|
}
|
|
|
|
.hasil-user-info p {
|
|
font-size: 1.4rem;
|
|
}
|
|
|
|
.hasil-table-container .table th,
|
|
.hasil-table-container .table td {
|
|
padding: 12px;
|
|
font-size: 1.3rem;
|
|
}
|
|
|
|
.hasil-table-container .table thead th {
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
.hasil-chart-container .chart-wrapper {
|
|
height: 300px;
|
|
}
|
|
|
|
.hasil-recommendation .recommendation-title {
|
|
font-size: 2.2rem;
|
|
}
|
|
|
|
.hasil-recommendation .recommendation-score {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.hasil-recommendation .badge {
|
|
font-size: 1.3rem;
|
|
padding: 8px 16px;
|
|
}
|
|
|
|
.hasil-nav-buttons {
|
|
flex-direction: column;
|
|
width: 100%;
|
|
}
|
|
|
|
.hasil-nav-buttons .btn {
|
|
width: 100%;
|
|
margin-bottom: 10px;
|
|
padding: 12px;
|
|
}
|
|
|
|
.hasil-table-container .btn-info {
|
|
font-size: 1.2rem;
|
|
padding: 5px 10px;
|
|
}
|
|
|
|
.hasil-table-container .badge {
|
|
font-size: 1rem;
|
|
padding: 5px 8px;
|
|
}
|
|
|
|
.hasil-table-container .card-body.bg-light {
|
|
padding: 12px;
|
|
margin: 5px 0;
|
|
}
|
|
}
|
|
|
|
.btn-submit {
|
|
padding: 20px 40px;
|
|
border-radius: 8px;
|
|
border: none;
|
|
color: white; /* Dark text color (almost black) by default */
|
|
}
|
|
|
|
.btn-submit:hover {
|
|
color: black; /* Changes to white text on hover */
|
|
}
|
|
|
|
|
|
/* Optional: enhance the btn-success class */
|
|
.btn-success.btn-submit {
|
|
background-color: var(--majorelle-blue);
|
|
}
|
|
|
|
.btn-success.btn-submit:hover {
|
|
background-color: var(--majorelle-blue);
|
|
}
|
|
/* Options Container Styles */
|
|
.options-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
margin: 15px 0;
|
|
}
|
|
|
|
.option-item {
|
|
display: flex;
|
|
align-items: center;
|
|
background-color: #f9f9f9;
|
|
padding: 19px 20px;
|
|
border-radius: 8px;
|
|
border: 1px solid #e0e0e0;
|
|
transition: all 0.3s ease;
|
|
cursor: pointer;
|
|
position: relative;
|
|
}
|
|
|
|
.option-item:hover {
|
|
background-color: #eef1ff;
|
|
border-color: var(--majorelle-blue);
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 2px 8px rgba(74, 108, 247, 0.15);
|
|
}
|
|
|
|
.option-item:has(.option-radio:checked) {
|
|
background-color: #eef1ff;
|
|
border-color: var(--majorelle-blue);
|
|
box-shadow: 0 2px 8px rgba(74, 108, 247, 0.15);
|
|
}
|
|
|
|
/* Option Radio Button Styles */
|
|
.option-radio {
|
|
appearance: none;
|
|
-webkit-appearance: none;
|
|
width: 18px;
|
|
height: 18px;
|
|
border: 2px solid #ccc;
|
|
border-radius: 50%;
|
|
outline: none;
|
|
margin-right: 12px;
|
|
position: relative;
|
|
cursor: pointer;
|
|
flex-shrink: 0;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.option-radio:checked {
|
|
border-color: var(--majorelle-blue);
|
|
background-color: #fff;
|
|
}
|
|
|
|
.option-radio:checked::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
background-color: var(--majorelle-blue);
|
|
animation: radioScale 0.2s ease-in-out;
|
|
}
|
|
|
|
@keyframes radioScale {
|
|
0% {
|
|
transform: translate(-50%, -50%) scale(0);
|
|
}
|
|
100% {
|
|
transform: translate(-50%, -50%) scale(1);
|
|
}
|
|
}
|
|
|
|
/* Option Label Styles */
|
|
.option-label {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
cursor: pointer;
|
|
font-size: 1.45rem;
|
|
line-height: 1.5;
|
|
margin: 0;
|
|
transition: color 0.3s ease;
|
|
}
|
|
|
|
|
|
|
|
.option-text {
|
|
flex: 1;
|
|
color: #333;
|
|
font-weight: 500;
|
|
transition: color 0.3s ease;
|
|
margin-left: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
|
|
|
|
/* Question Group Styles */
|
|
.question-group {
|
|
margin-bottom: 35px;
|
|
padding: 25px;
|
|
background-color: #fff;
|
|
border-radius: 12px;
|
|
border: 1px solid #e9ecef;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
transition: box-shadow 0.3s ease;
|
|
}
|
|
|
|
.question-group:hover {
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
/* Section Description */
|
|
.section-description {
|
|
color: #6c757d;
|
|
font-size: 1.4rem;
|
|
line-height: 1.6;
|
|
margin-bottom: 25px;
|
|
padding: 15px;
|
|
background-color: #f8f9fa;
|
|
border-radius: 8px;
|
|
border-left: 4px solid var(--mustard);
|
|
}
|
|
|
|
/* Loading and Error States */
|
|
.loading-container,
|
|
.error-container {
|
|
padding: 60px 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
.loading-spinner {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.error-icon {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
|
|
|
|
/* Responsive Design */
|
|
@media (max-width: 768px) {
|
|
.option-item {
|
|
padding: 12px 15px;
|
|
}
|
|
|
|
.option-label {
|
|
font-size: 1.3rem;
|
|
}
|
|
|
|
.option-marker {
|
|
min-width: 24px;
|
|
height: 24px;
|
|
font-size: 1.1rem;
|
|
margin-right: 12px;
|
|
}
|
|
|
|
.question-group {
|
|
padding: 20px 15px;
|
|
}
|
|
|
|
.question-group .question-label {
|
|
font-size: 1.4rem;
|
|
}
|
|
|
|
|
|
/* CSS untuk Quiz Locked Overlay */
|
|
.quiz-locked-overlay {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(255, 255, 255, 0.95);
|
|
backdrop-filter: blur(5px);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 1000;
|
|
border-radius: 15px;
|
|
}
|
|
|
|
.quiz-locked-content {
|
|
text-align: center;
|
|
padding: 2rem;
|
|
background: white;
|
|
border-radius: 15px;
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
|
border: 2px solid #e9ecef;
|
|
max-width: 400px;
|
|
}
|
|
|
|
.lock-icon {
|
|
color: #6c757d;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.quiz-locked-content h3 {
|
|
color: #495057;
|
|
margin-bottom: 1rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.quiz-locked-content p {
|
|
color: #6c757d;
|
|
margin-bottom: 1rem;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.quiz-locked-content .btn {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
border: none;
|
|
padding: 10px 20px;
|
|
border-radius: 25px;
|
|
color: white;
|
|
font-weight: 500;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.quiz-locked-content .btn:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
/* Style untuk section quiz ketika disabled */
|
|
.section.quiz.disabled {
|
|
position: relative;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.section.quiz.disabled .quiz-form {
|
|
opacity: 0.6;
|
|
filter: grayscale(50%);
|
|
}
|
|
|
|
} |