html, body {
min-height: 100%;
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
color: #fff;
background: url('assets/background-asset.png') center center / cover no-repeat fixed;
position: relative;
overflow-x: hidden;
}
/* Dark overlay so content is readable */
body::before {
content: "";
position: fixed;
inset: 0;
background:
linear-gradient(rgba(25, 10, 0, 0.55), rgba(25, 10, 0, 0.72)),
radial-gradient(circle at top, rgba(255, 200, 90, 0.20), transparent 35%);
z-index: 0;
pointer-events: none;
}
.page-wrap {
min-height: 100vh;
padding: 40px 15px;
position: relative;
z-index: 1;
}
.news-wrapper {
max-width: 980px;
margin: 0 auto;
}
.logo-card {
text-align: center;
margin-bottom: 26px;
}
.kk-logo-img {
width: 100%;
max-width: 620px;
height: auto;
display: block;
margin: 0 auto;
filter: drop-shadow(0 10px 25px rgba(0, 0, 0, 0.45));
}
.comments-box {
background: rgba(20, 8, 4, 0.88);
border: 4px solid #f5b041;
border-radius: 28px;
padding: 30px;
box-shadow:
0 0 0 4px rgba(122, 50, 0, 0.35),
0 25px 45px rgba(0, 0, 0, 0.45);
backdrop-filter: blur(2px);
}
.comments-title {
font-size: clamp(34px, 6vw, 58px);
font-weight: 1000;
color: #ffd45a;
text-transform: uppercase;
text-align: center;
text-shadow:
3px 3px 0 #7a3200,
6px 6px 0 rgba(0, 0, 0, 0.35);
margin-bottom: 10px;
}
.comments-intro {
text-align: center;
color: #fff1bb;
font-size: 17px;
font-weight: 700;
margin-bottom: 26px;
}
.comment-form {
background: rgba(255, 212, 90, 0.10);
border: 2px solid rgba(255, 212, 90, 0.35);
border-radius: 22px;
padding: 20px;
margin-bottom: 24px;
}
.comment-form label {
color: #ffd45a;
font-weight: 900;
text-transform: uppercase;
font-size: 14px;
margin-bottom: 6px;
}
.comment-form .form-control {
background: #fff7dc;
border: 3px solid #e89b24;
border-radius: 16px;
font-weight: 800;
color: #3b1800;
padding: 12px 14px;
}
.comment-form .form-control:focus {
box-shadow: 0 0 0 0.25rem rgba(245, 176, 65, 0.35);
border-color: #ffcf4d;
}
.comment-btn {
background: linear-gradient(#ffda64, #f39c12);
color: #4b1d00;
font-weight: 1000;
text-transform: uppercase;
border: 4px solid #7a3200;
border-radius: 18px;
box-shadow: 0 6px 0 #7a3200;
padding: 13px 18px;
transition: 0.15s ease;
}
.comment-btn:hover {
transform: translateY(2px);
box-shadow: 0 4px 0 #7a3200;
background: linear-gradient(#ffe27a, #ffad1f);
color: #4b1d00;
}
.comment-btn:disabled {
opacity: 0.75;
cursor: not-allowed;
}
.comment-message {
min-height: 24px;
margin-top: 14px;
font-weight: 900;
color: #ffd45a;
text-align: center;
}
.comments-list-wrap {
border-radius: 22px;
background: rgba(255, 230, 155, 0.08);
border: 3px solid rgba(255, 212, 90, 0.35);
padding: 18px;
}
.comments-list {
display: flex;
flex-direction: column;
gap: 14px;
}
.comment-card {
background: #fff1bb;
border: 3px solid #d98216;
border-radius: 18px;
padding: 15px 17px;
color: #3b1800;
box-shadow: 0 5px 0 rgba(98, 42, 0, 0.35);
}
.comment-card strong {
display: block;
font-size: 18px;
color: #8a3500;
margin-bottom: 5px;
font-weight: 1000;
}
.comment-card p {
margin: 0;
font-size: 15px;
font-weight: 800;
line-height: 1.4;
word-break: break-word;
}
.comment-date {
display: block;
margin-top: 8px;
font-size: 12px;
font-weight: 900;
color: rgba(59, 24, 0, 0.65);
text-transform: uppercase;
}
.back-link-wrap {
text-align: center;
margin-top: 26px;
}
.back-link {
display: inline-block;
color: #ffd45a;
font-weight: 900;
text-decoration: none;
text-transform: uppercase;
border-bottom: 2px solid transparent;
}
.back-link:hover {
color: #fff1bb;
border-bottom-color: #fff1bb;
}
@media (max-width: 768px) {
body {
background-attachment: scroll;
}
}
@media (max-width: 576px) {
.page-wrap {
padding: 25px 12px;
}
.comments-box {
padding: 20px;
border-radius: 22px;
}
.comment-form {
padding: 16px;
}
.kk-logo-img {
max-width: 100%;
}
}
/* Admin CSS */
.admin-panel {
background: rgba(255, 212, 90, 0.1);
border: 2px solid rgba(255, 212, 90, 0.35);
border-radius: 22px;
padding: 20px;
margin-bottom: 24px;
}
.admin-title {
color: #ffd45a;
font-weight: 1000;
text-transform: uppercase;
font-size: 24px;
text-shadow: 2px 2px 0 #5a2400;
margin-bottom: 16px;
}
.admin-panel label {
color: #ffd45a;
font-weight: 900;
text-transform: uppercase;
font-size: 14px;
margin-bottom: 6px;
}
.admin-panel .form-control {
background: #fff7dc;
border: 3px solid #e89b24;
border-radius: 16px;
font-weight: 800;
color: #3b1800;
padding: 12px 14px;
}
.admin-panel .form-control:focus {
box-shadow: 0 0 0 0.25rem rgba(245, 176, 65, 0.35);
border-color: #ffcf4d;
}
.admin-post-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 16px;
}
.admin-logout-btn {
background: #3b1800;
color: #ffd45a;
font-weight: 900;
text-transform: uppercase;
border: 3px solid #f5b041;
border-radius: 14px;
padding: 9px 16px;
}
.admin-logout-btn:hover {
background: #5a2400;
color: #fff1bb;
border-color: #ffd45a;
}
@media (max-width: 576px) {
.admin-post-header {
align-items: stretch;
flex-direction: column;
}
.admin-logout-btn {
width: 100%;
}
}
/* Delete Posts */
.news-admin-actions {
margin-top: 14px;
display: flex;
justify-content: flex-end;
}
.news-delete-btn {
background: #7a1200;
color: #fff1bb;
font-weight: 900;
text-transform: uppercase;
border: 3px solid #3b0800;
border-radius: 14px;
padding: 8px 16px;
box-shadow: 0 4px 0 #3b0800;
}
.news-delete-btn:hover {
background: #a81900;
color: #ffffff;
transform: translateY(2px);
box-shadow: 0 2px 0 #3b0800;
}
.news-delete-btn:disabled {
opacity: 0.7;
cursor: not-allowed;
transform: none;
}