html{
width:100%;
height:100%;
margin:0;
padding:0;
}
body{
margin:0;
padding:0;
width:100%;
min-height:100vh;
font-family:'Open Sans',sans-serif;
font-size:14px;
font-weight:400;
line-height:1.6;
color:#ffffff;
background:
linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.60)),
url("../img/landing/bg-small.jpg");
background-position:center;
background-repeat:no-repeat;
background-size:cover;
background-attachment:fixed;
overflow-x:hidden;
}
/* Layer */
.layer{
position:absolute;
inset:0;
display:flex;
flex-direction:column;
align-items:center;
min-height:100vh;
padding:35px 25px;
background:
radial-gradient(circle at top,
rgba(255,255,255,.08),
transparent 45%),
rgba(0,0,0,.25);
backdrop-filter:blur(2px);
}
/* Container */
.isi_landing{
display:flex;
flex-direction:column;
align-items:center;
width:100%;
padding-top:15px;
gap:20px;
animation:fadeLanding .8s ease;
}
/* Logo */
.logolanding{
display:flex;
justify-content:center;
align-items:center;
width:100%;
margin-bottom:10px;
}
.logolanding_img{
width:35%;
max-width:650px;
min-width:320px;
height:auto;
filter:
drop-shadow(0 8px 25px rgba(0,0,0,.35));
transition:.35s;
}
.logolanding_img:hover{
transform:scale(1.02);
}
/* Menu Area */
.landing_menu{
display:flex;
flex-direction:column;
width:40.07vw;
gap:.7vw;
}
.landing_menugrid{
display:flex;
justify-content:space-between;
align-items:flex-start;
width:40.07vw;
gap:.7vw;
}
/* Animation */
@keyframes fadeLanding{
from{
opacity:0;
transform:translateY(20px);
}
to{
opacity:1;
transform:none;
}
}
/*======================================================
PART 2
MENU PREMIUM
======================================================*/
.menu_icons{
display:flex;
flex-direction:column;
align-items:center;
text-decoration:none;
cursor:pointer;
transition:.35s ease;
position:relative;
}
.menu_iconLogo{
display:flex;
justify-content:center;
align-items:center;
width:8.46vw;
height:8.46vw;
min-width:115px;
min-height:115px;
background:rgba(255,255,255,.3);
backdrop-filter:blur(18px);
-webkit-backdrop-filter:blur(18px);
border:1px solid rgba(255,255,255,.18);
border-radius:22px;
padding:18px;
overflow:hidden;
box-shadow:
0 10px 30px rgba(0,0,0,.25);
transition:all .35s ease;
position:relative;
}
.modal-content {
border-radius:22px;
background:rgba(255,255,255,.1);
backdrop-filter:blur(18px);
-webkit-backdrop-filter:blur(18px);
}
.sub-icon{
background:#ffffff;
border-radius:22px;
padding:18px;
transition:all .35s ease;
}
.sub-icon:hover{
border-radius:30px;
padding:10px;
}
.title-link {
color: #ffffff;
font-weight: bold;
font-size: 14px;
}
/* cahaya atas */
.menu_iconLogo::before{
content:"";
position:absolute;
left:-30%;
top:-60%;
width:60%;
height:220%;
background:rgba(255,255,255,.18);
transform:rotate(25deg);
transition:.6s;
}
/* efek glow */
.menu_iconLogo::after{
content:"";
position:absolute;
inset:0;
border-radius:22px;
box-shadow:
inset 0 0 25px rgba(255,255,255,.08);
pointer-events:none;
}
/* icon */
.menu_iconLogo img{
width:68%;
height:68%;
object-fit:contain;
transition:.35s;
z-index:2;
}
/* hover */
.menu_icons:hover{
transform:translateY(-8px);
}
.menu_icons:hover .menu_iconLogo{
background:rgba(255,255,255,.20);
border-color:rgba(255,255,255,.30);
box-shadow:
0 20px 40px rgba(0,0,0,.35),
0 0 20px rgba(255,255,255,.15);
}
.menu_icons:hover .menu_iconLogo::before{
left:140%;
}
.menu_icons:hover img{
transform:scale(1.08);
}
/* klik */
.menu_icons:active{
transform:scale(.96);
}
/* text */
.menu_iconText{
margin-top:12px;
display:flex;
justify-content:center;
align-items:center;
color:#ffffff;
font-family:'Raleway',sans-serif;
font-size:1vw;
font-weight:700;
letter-spacing:.6px;
text-transform:uppercase;
text-align:center;
text-decoration:none;
text-shadow:
0 2px 10px rgba(0,0,0,.35);
}
/* mobile */
@media(max-width:720px){
.menu_iconLogo{
width:25vw;
height:25vw;
min-width:90px;
min-height:90px;
border-radius:18px;
padding:18px;
}
.menu_iconLogo img{
width:64%;
height:64%;
}
.menu_iconText{
font-size:4vw;
margin-top:8px;
}
}
/*======================================================
PART 3
ALAMAT + EFFECT + SCROLLBAR
======================================================*/
.alamat{
width:40.07vw;
margin-top:.8vw;
padding:18px 22px;
background:rgba(255,255,255,.12);
backdrop-filter:blur(18px);
-webkit-backdrop-filter:blur(18px);
border:1px solid rgba(255,255,255,.18);
border-radius:22px;
color:#ffffff;
box-shadow:
0 15px 40px rgba(0,0,0,.28);
position:relative;
overflow:hidden;
transition:.35s;
}
/* efek cahaya */
.alamat::before{
content:"";
position:absolute;
left:-120%;
top:0;
width:60%;
height:100%;
background:
linear-gradient(
90deg,
transparent,
rgba(255,255,255,.15),
transparent
);
transform:skewX(-20deg);
transition:.8s;
}
.alamat:hover{
background:rgba(255,255,255,.16);
box-shadow:
0 25px 50px rgba(0,0,0,.35);
}
.alamat:hover::before{
left:160%;
}
.alamat ul{
margin:0;
padding-left:18px;
}
.alamat li{
margin-bottom:8px;
color:#fff;
}
.alamat a{
color:#fff;
text-decoration:none;
}
.alamat a:hover{
color:#ffe082;
}
@media only screen and (max-width: 912px) {
.logolanding_img {
width: 65vw;
min-width:unset;
}
}
@media only screen and (max-width: 720px) {
.layer {
padding: 0px;
}
.isi_landing {
align-items: center;
gap: 12px;
width: 100vw;
padding-top: 20px;
}
.logolanding_img {
width: 85vw;
height: auto;
padding-top: 50px;
}
.landing_menu {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 0px;
gap: 8px;
width: 100vw;
height: auto;
}
.landing_menugrid {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
padding: 5vw 8.5vw;
width: 100vw;
height: auto;
}
.menu_iconLogo{
display:flex;
justify-content:center;
align-items:center;
padding:0;
gap:0.7vw;
width:8.46vw;
height:8.46vw;
background:rgba(255,255,255,.12);
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
border:1px solid rgba(255,255,255,.20);
border-radius:18px;
padding:12px;
box-shadow:
0 12px 25px rgba(0,0,0,.25);
transition:.25s;
overflow:hidden;
}
.menu_iconText{
font-weight:700;
letter-spacing:.8px;
text-shadow:
0 2px 8px rgba(0,0,0,.35);
font-size: 12px;
}
.alamat {
margin: 0 8.5vw 0 8.5vw;
width: auto;
}
.title-link{
font-size: 10px;
}
}
/*Custom*/
::-webkit-scrollbar {
width: 0px;
height: 10px;
background: #FFFFFF;
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 5px;
}
/* optional: show position indicator in red */
::-webkit-scrollbar-thumb {
background: red;
border-radius: 5px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #b30000;
}
.link-icon {
text-decoration: none;
font-size: 10px;
}
.title-beranda {
color: #ea0000;
font-weight: bold;
}
.title-pesangon {
color: #717171;
font-weight: bold;
}
.title-jmo {
color: #249ad5;
font-weight: bold;
}
.title-siapkerja {
color: #09b8a7;
font-weight: bold;
}
.title-grafis {
color: #f14724;
font-weight: bold;
}
.title-ppid {
color: #680000;
font-weight: bold;
}
.title-umk {
color: #3482b3;
font-weight: bold;
}
.title-sakip {
color: #7f0203;
font-weight: bold;
}
.title-ak1 {
color: #ea0000;
font-weight: bold;
}
.title-cpmi {
color: #ea0000;
font-weight: bold;
}
.title-pelatihan {
color: #ea0000;
font-weight: bold;
}
.title-mediasi {
color: #ea0000;
font-weight: bold;
}
.title-whatsapp {
color: #008b32;
font-weight: bold;
}
.title-facebook {
color: #3a5897;
font-weight: bold;
}
.title-instagram {
color: #c32aa3;
font-weight: bold;
}
.title-twitter {
color: #1da1f2;
font-weight: bold;
}
.title-tiktok {
color: #000000;
font-weight: bold;
}
.title-youtube {
color: #990000;
font-weight: bold;
}
.bg-red {
background-color: #ea0000;
color: #ffffff;
font-weight: bold;
}
.bg-facebook {
background-color: #3b5998;
color: #ffffff;
font-weight: bold;
}
.bg-instagram {
background-color: #c32aa3;
color: #ffffff;
font-weight: bold;
}
.bg-twitter {
background-color: #1da1f2;
color: #ffffff;
font-weight: bold;
}
.bg-tiktok {
background-color: #000000;
color: #ffffff;
font-weight: bold;
}
.bg-whatsapp {
background-color: #25d366;
color: #ffffff;
font-weight: bold;
}
.bg-youtube {
background-color: #ff0000;
color: #ffffff;
font-weight: bold;
}
/*====================================
TITLE
====================================*/
.title-beranda,
.title-pesangon,
.title-jmo,
.title-siapkerja,
.title-grafis,
.title-ppid,
.title-umk,
.title-sakip,
.title-ak1,
.title-cpmi,
.title-pelatihan,
.title-mediasi,
.title-facebook,
.title-instagram,
.title-twitter,
.title-whatsapp,
.title-tiktok,
.title-youtube{
transition:.25s;
}
.link-icon:hover{
transform:translateY(-2px);
}
/*====================================
BADGE
====================================*/
.bg-facebook,
.bg-instagram,
.bg-twitter,
.bg-whatsapp,
.bg-tiktok,
.bg-youtube{
border-radius:40px;
padding:6px 12px;
box-shadow:
0 8px 20px rgba(0,0,0,.20);
}
/*====================================
ANIMATION
====================================*/
@keyframes floating{
0%{
transform:translateY(0);
}
50%{
transform:translateY(-5px);
}
100%{
transform:translateY(0);
}
}
.menu_icons{
animation:floating 5s ease-in-out infinite;
}
.menu_icons:nth-child(2){
animation-delay:.2s;
}
.menu_icons:nth-child(3){
animation-delay:.4s;
}
.menu_icons:nth-child(4){
animation-delay:.6s;
}
.menu_icons:nth-child(5){
animation-delay:.8s;
}
.menu_icons:nth-child(6){
animation-delay:1s;
}
/*====================================
RESPONSIVE
====================================*/
@media(max-width:720px){
.alamat{
width:auto;
margin:0 8vw;
padding:18px;
border-radius:18px;
}
}