/* =========================== STORY SECTION =========================== */ .story-section{ min-height:100vh; background:#050816; position:relative; overflow:hidden; padding:120px 8%; } /* =========================== BACKGROUND GLOW =========================== */ .story-glow{ position:absolute; width:900px; height:900px; background: radial-gradient( circle, rgba(46,158,255,.15), transparent 70% ); top:50%; left:50%; transform:translate(-50%,-50%); filter:blur(120px); animation:pulseGlow 8s infinite ease-in-out; pointer-events:none; } @keyframes pulseGlow{ 0%,100%{ opacity:.4; transform:translate(-50%,-50%) scale(1); } 50%{ opacity:.8; transform:translate(-50%,-50%) scale(1.15); } } /* =========================== HEADER =========================== */ .story-header{ text-align:center; margin-bottom:80px; position:relative; z-index:5; } .story-header span{ color:#2e9eff; letter-spacing:5px; font-size:.9rem; } .story-header h1{ color:white; font-size:5rem; margin-top:15px; line-height:1; text-transform:uppercase; font-family:"Black Ops One",system-ui; text-shadow: 0 0 20px rgba(255,255,255,.2), 0 0 60px rgba(46,158,255,.2); } /* =========================== GRID =========================== */ .investigation-board{ display:grid; grid-template-columns: repeat(12,1fr); gap:20px; max-width:1400px; margin:auto; position:relative; z-index:2; } /* =========================== CARDS =========================== */ .board-card{ position:relative; overflow:hidden; height:320px; border-radius:20px; border:1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03); backdrop-filter: blur(10px); transition:.5s; cursor:pointer; } .board-card:hover{ transform: translateY(-8px) scale(1.02); border-color: rgba(46,158,255,.5); box-shadow: 0 0 40px rgba(46,158,255,.25); } /* =========================== CARD SIZES =========================== */ .card-large{ grid-column:span 12; height:420px; } .board-card:nth-child(2){ grid-column:span 6; } .board-card:nth-child(3){ grid-column:span 6; } .board-card:nth-child(4){ grid-column:span 6; } .board-card:nth-child(5){ grid-column:span 6; } .secret-card{ grid-column:span 12; height:220px; display:flex; justify-content:center; align-items:center; text-align:center; } /* =========================== IMAGES =========================== */ .board-image{ position:absolute; width:100%; height:100%; object-fit:cover; top:0; left:0; transition:.8s; } .board-card:hover .board-image{ transform:scale(1.08); } /* =========================== DARK OVERLAY =========================== */ .board-card::before{ content:""; position:absolute; inset:0; background: linear-gradient( to top, rgba(0,0,0,.85), rgba(0,0,0,.2) ); z-index:1; } /* =========================== TEXT =========================== */ .card-info{ position:absolute; z-index:2; left:25px; right:25px; bottom:25px; } .card-info h2{ color:white; font-size:2rem; margin-bottom:10px; font-family: "Black Ops One", system-ui; text-transform:uppercase; } .card-info p{ color:#d5d5d5; line-height:1.7; font-size:.95rem; max-width:400px; font-family: "Chelsea Market", system-ui; } /* =========================== SECRET CARD =========================== */ .secret-card{ background: linear-gradient( 135deg, #0d1635, #071020 ); } .secret-lock{ font-size:5rem; color:#2e9eff; animation:lockPulse 2s infinite; } @keyframes lockPulse{ 0%,100%{ transform:scale(1); opacity:.7; } 50%{ transform:scale(1.2); opacity:1; } } /* =========================== SHINE EFFECT =========================== */ .board-card::after{ content:""; position:absolute; top:-100%; left:-50%; width:50%; height:300%; background: linear-gradient( 90deg, transparent, rgba(255,255,255,.15), transparent ); transform: rotate(25deg); transition:.8s; } .board-card:hover::after{ left:140%; } /* =========================== RESPONSIVE =========================== */ @media(max-width:1000px){ .story-header h1{ font-size:3rem; } .investigation-board{ grid-template-columns:1fr; } .card-large, .board-card:nth-child(2), .board-card:nth-child(3), .board-card:nth-child(4), .board-card:nth-child(5), .secret-card{ grid-column:span 1; } .board-card{ min-height:280px; } .card-large{ height:350px; } } .hidden-card{ opacity:0; transform: translateY(100px); transition: 1s ease; } .show{ opacity:1; transform: translateY(0); }

/* ===========================
   SECRET CARD
=========================== */

.secret-card{

    grid-column:span 12;

    height:220px;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    position:relative;

    overflow:hidden;

    background:
    linear-gradient(
        135deg,
        #08101f,
        #050816
    );

    border:1px solid
    rgba(255,255,255,.08);

    transition:.5s;
}

/* Ribbon */

.crime-ribbon{

    position:absolute;

    top:50%;

    left:-140%;

    width:180%;

    padding:14px 0;

    background:#ffd000;

    color:#a00000;

    font-weight:900;

    font-size:1.2rem;

    letter-spacing:4px;

    text-transform:uppercase;

    transform:
    rotate(-8deg);

    z-index:4;

    transition:.6s ease;

    pointer-events:none;

    text-align:center;

    font-family:
    "Black Ops One",
    system-ui;
}

/* Lock */

.secret-lock{

    position:absolute;

    right:50px;

    top:50%;

    transform:translateY(-50%);

    font-size:5rem;

    color:#2e9eff;

    z-index:5;

    transition:.4s;
}

/* Hover */

.secret-card:hover{

    border-color:
    rgba(255,50,50,.5);

    box-shadow:
    0 0 20px rgba(255,0,0,.15),
    0 0 50px rgba(255,0,0,.15);
}

.secret-card:hover .crime-ribbon{

    left:-20%;
}

.secret-card:hover .secret-lock{

    color:#ff2b2b;

    text-shadow:
    0 0 10px #ff2b2b,
    0 0 20px #ff2b2b,
    0 0 40px #ff2b2b,
    0 0 80px #ff2b2b;

    transform:
    translateY(-50%)
    scale(1.15);
}