Club System

resources/css/layout/entry.css

@@ -106,6 +106,7 @@
         display: grid;
         grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
         gap: 15px;
+        margin-bottom: 30px;
     }
 
     .entry-gallery-item {
@@ -116,10 +117,81 @@
         align-items: center;
         justify-content: center;
         cursor: pointer;
+        overflow: hidden;
         transition: border-color 0.2s;
 
         &:hover {
             border-color: var(--rhpz-orange);
+
+            img {
+                transform: scale(1.05);
+            }
+        }
+
+        img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            transition: transform 0.3s ease;
+        }
+    }
+}
+
+.gallery-modal {
+    position: fixed;
+    z-index: 3000;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.85);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .gallery-modal-content {
+        max-width: 90%;
+        max-height: 90%;
+        position: relative;
+
+        img {
+            max-width: 100%;
+            max-height: 90vh;
+            object-fit: contain;
+            border: 2px solid var(--border);
+            background-color: var(--bg);
+            box-shadow: 0 10px 25px rgba(0,0,0,0.5);
+        }
+    }
+
+    .gallery-modal-close {
+        position: absolute;
+        top: 20px;
+        right: 30px;
+        color: #fff;
+        font-size: 40px;
+        font-weight: bold;
+        cursor: pointer;
+        user-select: none;
+
+        &:hover {
+            color: var(--rhpz-orange);
+        }
+    }
+
+    .gallery-modal-video {
+        width: 90%;
+        max-width: 960px;
+        aspect-ratio: 16/9;
+        box-shadow: 0 10px 30px rgba(0,0,0,0.6);
+        border: 1px solid var(--border);
+        background-color: #000;
+
+        iframe {
+            width: 100%;
+            height: 100%;
+            border: none;
+            display: block;
         }
     }
 }
@@ -237,3 +309,74 @@
     background-color: var(--bg);
     border: 1px dashed var(--border);
 }
+
+.entry-video-section {
+    margin-bottom: 30px;
+}
+
+.video-thumbnail-wrapper {
+    position: relative;
+    width: 100%;
+    max-width: 500px;
+    aspect-ratio: 16/9;
+    background-color: #000;
+    border: 1px solid var(--border);
+    cursor: pointer;
+    overflow: hidden;
+    border-radius: 4px;
+
+    img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        opacity: 0.8;
+        transition: transform 0.3s ease, opacity 0.3s ease;
+    }
+
+    .play-trigger {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: 65px;
+        height: 65px;
+        background-color: rgba(0, 0, 0, 0.7);
+        border: 2px solid #fff;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #fff;
+        font-size: 1.5rem;
+        transition: background-color 0.2s, transform 0.2s ease-out;
+
+        i { margin-left: 4px; }
+    }
+
+    &:hover {
+        img {
+            transform: scale(1.03);
+            opacity: 1;
+        }
+        .play-trigger {
+            background-color: var(--rhpz-orange);
+            border-color: var(--rhpz-orange);
+            transform: translate(-50%, -50%) scale(1.1);
+            box-shadow: 0 0 15px rgba(255, 115, 0, 0.5);
+        }
+    }
+}
+
+.entry-submission-byline {
+    font-size: 0.85rem;
+    color: var(--text2);
+    margin-bottom: 20px;
+    display: flex;
+    align-items: center;
+    gap: 15px;
+
+    i {
+        vertical-align: middle;
+        margin-right: 4px;
+    }
+}