124 lines
2.2 KiB
CSS
124 lines
2.2 KiB
CSS
/*
|
|
* DPW PKS Jambi Portal - Custom Styles
|
|
*/
|
|
|
|
:root {
|
|
--pks-orange: #FF5E0E;
|
|
--pks-orange-hover: #FF7A33;
|
|
--pks-dark: #212529;
|
|
--pks-light: #F8F9FA;
|
|
--pks-white: #FFFFFF;
|
|
--pks-orange-shadow: #D9500C;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Poppins', sans-serif;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 100vh;
|
|
background-color: var(--pks-white);
|
|
}
|
|
|
|
main {
|
|
flex: 1;
|
|
}
|
|
|
|
/* Header */
|
|
.logo {
|
|
max-height: 80px;
|
|
width: auto;
|
|
}
|
|
|
|
.address {
|
|
max-width: 350px;
|
|
}
|
|
|
|
.real-time-clock {
|
|
font-size: 1.5rem;
|
|
font-weight: 600;
|
|
color: var(--pks-dark);
|
|
opacity: 0.8;
|
|
text-align: right;
|
|
float: right;
|
|
}
|
|
|
|
.social-icons {
|
|
clear: both;
|
|
}
|
|
|
|
.social-icon {
|
|
font-size: 1.5rem;
|
|
margin-left: 0.75rem;
|
|
color: var(--pks-dark);
|
|
transition: color 0.3s ease, transform 0.3s ease;
|
|
}
|
|
|
|
.social-icon:hover {
|
|
color: var(--pks-orange);
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
/* Buttons */
|
|
.btn-primary {
|
|
background-color: var(--pks-orange);
|
|
border-color: var(--pks-orange);
|
|
}
|
|
|
|
.btn-primary:hover, .btn-primary:focus {
|
|
background-color: var(--pks-orange-hover);
|
|
border-color: var(--pks-orange-hover);
|
|
box-shadow: 0 6px 0 var(--pks-orange-shadow);
|
|
}
|
|
|
|
.btn-3d {
|
|
border-radius: 0.75rem;
|
|
padding: 0.8rem 2rem;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
box-shadow: 0 4px 0 var(--pks-orange-shadow);
|
|
transition: all 0.15s ease-in-out;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.btn-3d:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 6px 0 var(--pks-orange-shadow);
|
|
}
|
|
|
|
.btn-3d:active {
|
|
transform: translateY(2px);
|
|
box-shadow: 0 2px 0 var(--pks-orange-shadow);
|
|
}
|
|
|
|
|
|
/* Footer */
|
|
.motto {
|
|
font-style: italic;
|
|
color: rgba(255, 255, 255, 0.8);
|
|
}
|
|
|
|
/* Responsive */
|
|
@media (max-width: 767.98px) {
|
|
header .row > div {
|
|
text-align: center;
|
|
}
|
|
.logo {
|
|
margin-bottom: 1rem;
|
|
margin-right: 0 !important;
|
|
}
|
|
.real-time-clock {
|
|
text-align: center;
|
|
float: none;
|
|
margin-top: 1rem;
|
|
}
|
|
.social-icons {
|
|
text-align: center !important;
|
|
margin-top: 1rem;
|
|
}
|
|
.social-icon {
|
|
margin-left: 0.5rem;
|
|
margin-right: 0.5rem;
|
|
}
|
|
}
|