html {
scroll-behavior: smooth;
}
body {
margin:0;
font-family: Arial, sans-serif;
background:#121212;
color:white;
}
/* ---------- TOP BAR ---------- */
.top {
position:sticky;
top:0;
background:#1c1c1c;
padding:10px;
z-index:1000;
border-bottom:2px solid orange;
}
.top h2 {
margin:5px;
color:orange;
font-size:20px;
}
/* ---------- TABS ---------- */
.tabs {
display:flex;
overflow-x:auto;
gap:8px;
padding:5px;
scrollbar-width:none;
}
.tabs::-webkit-scrollbar {
display:none;
}
.tabs button {
border:none;
padding:8px 14px;
background:#2a2a2a;
color:white;
border-radius:20px;
cursor:pointer;
white-space:nowrap;
transition:0.2s;
font-size:14px;
}
.tabs button:hover {
background:orange;
color:black;
}
/* ---------- MENU ---------- */
.menu {
max-width:900px;
margin:auto;
padding:10px;
}
/* ---------- CATEGORY ---------- */
.menu h2 {
color:orange;
margin-top:40px;
border-bottom:1px solid #333;
padding-bottom:5px;
}
/* ---------- ITEM CARD ---------- */
.item {
background:#1e1e1e;
border-radius:12px;
margin:12px 0;
display:flex;
justify-content:space-between;
overflow:hidden;
transition:0.2s;
}
.item:hover {
background:#2a2a2a;
transform:scale(1.01);
}
/* ---------- IMAGE ---------- */
.item img {
width:150px;
height:150px;
object-fit:cover;
}
/* ---------- TEXT ---------- */
.text {
padding:12px;
flex:1;
}
.text h3 {
margin:0;
color:orange;
font-size:18px;
}
.text p {
margin:5px 0;
color:#ccc;
font-size:14px;
}
.text span {
color:orange;
font-weight:bold;
font-size:16px;
}
/* ---------- MOBILE ---------- */
@media (max-width:700px){
.top h2{
font-size:18px;
}
.tabs{
gap:6px;
}
.tabs button{
padding:7px 12px;
font-size:12px;
}
.menu{
padding:5px;
}
/* card smaller */
.item{
flex-direction:row;
margin:8px 0;
}
.item img{
width:110px;
height:110px;
}
.text{
padding:8px;
}
.text h3{
font-size:15px;
}
.text p{
font-size:12px;
}
.text span{
font-size:14px;
}
}
/* ---------- VERY SMALL PHONE ---------- */
@media (max-width:400px){
.item img{
width:90px;
height:90px;
}
.text h3{
font-size:14px;
}
.text p{
font-size:11px;
}
}
/* ---------- SCROLLBAR ---------- */
::-webkit-scrollbar {
height:6px;
width:6px;
}
::-webkit-scrollbar-thumb {
background:orange;
border-radius:10px;
}
::-webkit-scrollbar-track {
background:#111;
}
/* ---------- ANIMATION ---------- */
.item {
animation:fade 0.25s ease;
}
@keyframes fade {
from {
opacity:0;
transform:translateY(5px);
}
to {
opacity:1;
transform:translateY(0);
}
}