html,
body {
overflow-x:
hidden;
}
:root {
--bg:
#f8f5f1;
--card:
#ffffff;
--text:
#1f2937;
--muted:
#6b7280;
--primary:
#ff8c02;
--primary-dark:
#d97100;
--accent:
#301003;
--danger:
#b91c1c;
--warning:
#a16207;
--border:
#e7ddd5;
}
/* ==========================================================================
RESET
========================================================================== */
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
background:
var(--bg);
color:
var(--text);
font-family:
Arial,
Helvetica,
sans-serif;
line-height: 1.6;
}
img {
display: block;
max-width: 100%;
}
a {
color: inherit;
text-decoration: none;
}
button,
input,
textarea,
select {
font: inherit;
}
/* ==========================================================================
LAYOUT
========================================================================== */
.container {
width:
min(1180px, calc(100% - 32px));
margin-inline:
auto;
}
/* ==========================================================================
HEADER
========================================================================== */
.site-header {
position:
relative;
overflow:
hidden;
padding:
90px 0 110px;
background:
linear-gradient(
135deg,
#301003 0%,
#4a1805 45%,
#ff8c02 100%
);
color:
#ffffff;
}
/*
|--------------------------------------------------------------------------
| DECORATION
|--------------------------------------------------------------------------
*/
.site-header::before {
content:
'';
position:
absolute;
top:
-180px;
right:
-120px;
width:
420px;
height:
420px;
border-radius:
50%;
background:
rgba(255,255,255,0.07);
}
.site-header::after {
content:
'';
position:
absolute;
bottom:
-120px;
left:
-80px;
width:
240px;
height:
240px;
border-radius:
50%;
background:
rgba(255,255,255,0.05);
}
/*
|--------------------------------------------------------------------------
| HEADER CONTENT
|--------------------------------------------------------------------------
*/
.header-flex {
position:
relative;
z-index:
2;
display:
flex;
justify-content:
center;
align-items:
center;
text-align:
center;
gap:
24px;
}
.eyebrow {
display:
inline-flex;
align-items:
center;
margin:
0 0 18px;
padding:
10px 18px;
border:
1px solid rgba(255,255,255,0.12);
border-radius:
999px;
background:
rgba(255,255,255,0.08);
font-size:
12px;
font-weight:
700;
text-transform:
uppercase;
letter-spacing:
1.5px;
}
h1 {
margin:
0 0 18px;
font-size:
clamp(40px, 6vw, 68px);
line-height:
1.05;
letter-spacing:
-1.5px;
font-weight:
800;
}
.subtitle {
max-width:
760px;
margin:
0;
font-size:
18px;
line-height:
1.8;
color:
rgba(255,255,255,0.88);
}
/* ==========================================================================
CARD
========================================================================== */
.card,
.filter-box,
.login-card,
.admin-form-card,
.stock-list-card,
.empty-state {
background:
var(--card);
border:
1px solid var(--border);
border-radius:
20px;
box-shadow:
0 10px 30px rgba(0,0,0,0.04);
}
.filter-box,
.login-card,
.admin-form-card,
.stock-list-card {
padding:
24px;
}
/* ==========================================================================
ALERT
========================================================================== */
.alert {
margin-bottom:
18px;
padding:
14px 16px;
border-radius:
14px;
font-weight:
700;
}
.alert.success {
background:
#ecfdf3;
border:
1px solid #bbf7d0;
color:
#166534;
}
.alert.error {
background:
#fef2f2;
border:
1px solid #fecaca;
color:
#991b1b;
}
/* ==========================================================================
FORM
========================================================================== */
.filter-form,
.stock-form,
.login-form {
display:
grid;
gap:
16px;
}
.filter-form {
display:
grid;
grid-template-columns:
1fr
1fr
1.2fr
1fr
180px;
gap:
14px;
align-items:
center;
}
.form-group {
display:
flex;
flex-direction:
column;
gap:
8px;
}
.stock-form {
grid-template-columns:
repeat(12, 1fr);
}
.stock-form .form-group {
grid-column:
span 6;
}
.full-width {
grid-column:
1 / -1;
}
input,
select,
textarea,
button {
width:
100%;
padding:
14px 16px;
border:
1px solid var(--border);
border-radius:
12px;
background:
#ffffff;
}
textarea {
resize:
vertical;
}
/* ==========================================================================
BUTTON
========================================================================== */
.btn,
.submit-btn {
display:
inline-flex;
justify-content:
center;
align-items:
center;
gap:
8px;
border-radius:
12px;
font-weight:
700;
cursor:
pointer;
transition:
0.2s ease;
}
.btn,
.submit-btn {
padding:
14px 16px;
}
.btn-primary,
.submit-btn {
background:
var(--primary);
border:
1px solid var(--primary);
color:
#ffffff;
}
.btn-primary:hover,
.submit-btn:hover {
background:
var(--primary-dark);
}
.btn-secondary {
background:
#fff7ed;
border:
1px solid #fed7aa;
color:
#9a3412;
}
.btn-light {
background:
#ffffff;
border:
1px solid var(--border);
color:
var(--text);
}
.btn-danger {
background:
var(--danger);
border:
1px solid var(--danger);
color:
#ffffff;
}
.btn-outline-danger {
background:
#ffffff;
border:
1px solid #fecaca;
color:
var(--danger);
}
.btn-success {
background:
#ecfdf3;
border:
1px solid #bbf7d0;
color:
#166534;
}
.btn-disabled {
background:
#e5e7eb;
border:
1px solid #d1d5db;
color:
#6b7280;
cursor:
not-allowed;
}
.btn-full {
width:
100%;
}
/* ==========================================================================
FILTER
========================================================================== */
.filter-box {
position:
relative;
z-index:
10;
margin-top:
-48px;
margin-bottom:
28px;
padding:
20px;
border:
1px solid rgba(255,255,255,0.45);
border-radius:
24px;
background:
rgba(255,255,255,0.86);
backdrop-filter:
blur(18px);
box-shadow:
0 20px 50px rgba(48,16,3,0.10);
}
/*
|--------------------------------------------------------------------------
| FILTER FORM
|--------------------------------------------------------------------------
*/
.filter-form {
display:
grid;
grid-template-columns:
1fr
1fr
1.2fr
1fr
180px;
gap:
14px;
align-items:
center;
}
.filter-form input,
.filter-form select {
height:
52px;
padding:
0 16px;
border:
1px solid #eadfd6;
border-radius:
14px;
background:
rgba(255,255,255,0.94);
transition:
0.25s ease;
}
.filter-form input:focus,
.filter-form select:focus {
outline:
none;
border-color:
#ff8c02;
box-shadow:
0 0 0 4px rgba(255,140,2,0.12);
}
.filter-form button {
width:
100%;
height:
52px;
border:
none;
border-radius:
16px;
background:
linear-gradient(
135deg,
#ff8c02,
#ff9f2f
);
color:
#ffffff;
font-weight:
700;
transition:
0.25s ease;
box-shadow:
0 14px 28px rgba(255,140,2,0.22);
}
.filter-form button:hover {
transform:
translateY(-2px);
box-shadow:
0 18px 34px rgba(255,140,2,0.28);
}
/* ==========================================================================
GRID CATALOG
========================================================================== */
.catalog-grid {
display:
grid;
grid-template-columns:
repeat(3, minmax(0, 1fr));
gap:
24px;
padding-bottom:
56px;
}
/* ==========================================================================
CARD STOCK
========================================================================== */
.card {
overflow:
hidden;
}
.card-image-wrap {
position:
relative;
overflow:
hidden;
aspect-ratio:
4 / 5;
background:
#e5e7eb;
}
.card-image-wrap img {
width:
100%;
height:
100%;
object-fit:
cover;
}
.ribbon {
position:
absolute;
top:
16px;
left:
-36px;
z-index:
2;
padding:
10px 48px;
background:
var(--accent);
color:
#ffffff;
font-weight:
700;
transform:
rotate(-35deg);
}
.status-badge {
position:
absolute;
top:
14px;
right:
14px;
z-index:
2;
padding:
8px 12px;
border-radius:
999px;
color:
#ffffff;
font-size:
13px;
font-weight:
700;
}
.status-available {
background:
#16a34a;
}
.status-booked {
background:
#eab308;
color:
#1f2937;
}
.status-sold {
background:
#dc2626;
}
.card-body {
padding:
20px;
}
.meta-row {
display:
flex;
justify-content:
space-between;
gap:
12px;
padding:
10px 0;
border-bottom:
1px dashed var(--border);
}
.meta-row:last-child {
border-bottom:
0;
}
.meta-row span:last-child {
text-align:
right;
color:
var(--muted);
}
/* ==========================================================================
PRODUCT META
========================================================================== */
.product-meta {
display:
grid;
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap:
10px;
margin-bottom:
18px;
}
.meta-card {
display:
flex;
align-items:
center;
gap:
10px;
padding:
12px;
border:
1px solid #f1e6dc;
border-radius:
16px;
background:
#fffaf5;
min-height:
78px;
transition:
0.2s ease;
}
.meta-card:hover {
transform:
translateY(-2px);
box-shadow:
0 8px 18px rgba(48,16,3,0.05);
}
.meta-icon {
display:
flex;
justify-content:
center;
align-items:
center;
width:
52px;
height:
52px;
border-radius:
14px;
background:
#fff3e6;
color:
#ff8c02;
font-size:
20px;
flex-shrink:
0;
}
.meta-content {
display:
flex;
flex-direction:
column;
min-width:
0;
}
.meta-label {
font-size:
12px;
color:
var(--muted);
line-height:
1.2;
}
.meta-value {
margin-top:
4px;
font-size:
15px;
font-weight:
700;
color:
#301003;
line-height:
1.3;
word-break:
break-word;
}
/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/
@media (max-width: 520px) {
.product-meta {
grid-template-columns:
1fr;
}
}
.cta-group {
display:
grid;
grid-template-columns:
repeat(2, 1fr);
gap:
12px;
margin-top:
18px;
}
.card-sold {
opacity:
0.86;
}
/* ==========================================================================
ADMIN
========================================================================== */
.admin-layout {
display:
grid;
grid-template-columns:
minmax(340px, 0.95fr)
minmax(420px, 1.05fr);
gap:
24px;
padding:
28px 0 50px;
}
.section-heading {
display:
flex;
justify-content:
space-between;
align-items:
center;
gap:
16px;
margin-bottom:
20px;
}
.admin-stock-grid {
display:
grid;
gap:
18px;
}
.admin-stock-item {
display:
grid;
grid-template-columns:
150px 1fr;
gap:
16px;
padding:
14px;
border:
1px solid var(--border);
border-radius:
18px;
}
.admin-stock-thumb {
overflow:
hidden;
border-radius:
14px;
aspect-ratio:
4 / 5;
}
.admin-stock-thumb img {
width:
100%;
height:
100%;
object-fit:
cover;
}
.admin-stock-body h3 {
margin:
0 0 10px;
font-size:
22px;
}
.admin-stock-meta,
.admin-stock-note {
margin:
0 0 10px;
color:
var(--muted);
}
.admin-action-grid {
display:
grid;
grid-template-columns:
repeat(2, 1fr);
gap:
10px;
margin-top:
12px;
}
.admin-delete-form {
grid-column:
1 / -1;
}
/* ==========================================================================
LOGIN
========================================================================== */
.login-body {
display:
flex;
justify-content:
center;
align-items:
center;
min-height:
100vh;
}
.login-wrapper {
width:
min(420px, calc(100% - 32px));
}
.login-header {
margin-bottom:
24px;
}
.login-subtitle {
margin:
0;
color:
var(--muted);
}
/* ==========================================================================
PAGINATION
========================================================================== */
.pagination {
display:
flex;
justify-content:
center;
flex-wrap:
wrap;
gap:
10px;
padding-bottom:
40px;
}
.pagination a,
.pagination span {
display:
inline-flex;
justify-content:
center;
align-items:
center;
min-width:
44px;
height:
44px;
padding:
0 16px;
border:
1px solid var(--border);
border-radius:
10px;
background:
#ffffff;
}
.pagination .active {
background:
var(--primary);
border-color:
var(--primary);
color:
#ffffff;
}
/* ==========================================================================
EMPTY
========================================================================== */
.empty-state {
grid-column:
1 / -1;
padding:
36px;
text-align:
center;
}
/* ==========================================================================
RESPONSIVE
========================================================================== */
@media (max-width: 980px) {
.catalog-grid,
.admin-layout {
grid-template-columns:
1fr;
}
.filter-form input,
.filter-form select,
.filter-form button,
.stock-form .form-group {
grid-column:
1 / -1;
}
}
@media (max-width: 768px) {
.site-header {
padding:
70px 0 90px;
}
.filter-box {
margin-top:
-40px;
padding:
22px;
max-width:
1180px;
}
h1 {
font-size:
clamp(34px, 10vw, 52px);
}
.subtitle {
font-size:
16px;
}
}
@media (max-width: 680px) {
.header-flex {
flex-direction:
column;
}
.catalog-grid,
.cta-group,
.admin-stock-item,
.admin-action-grid {
grid-template-columns:
1fr;
}
.ribbon {
left:
-44px;
}
}
/* ==========================================================================
FLOATING MENU
========================================================================== */
.floating-menu {
position:
fixed;
right:
16px;
bottom:
16px;
z-index:
99999;
display:
flex;
flex-direction:
column;
align-items:
flex-end;
}
/*
|--------------------------------------------------------------------------
| MENU ITEMS
|--------------------------------------------------------------------------
*/
.floating-menu-items {
display:
flex;
flex-direction:
column;
gap:
8px;
margin-bottom:
8px;
opacity:
0;
visibility:
hidden;
transform:
translateY(6px);
transition:
0.2s ease;
}
.floating-menu-items.show {
opacity:
1;
visibility:
visible;
transform:
translateY(0);
}
/*
|--------------------------------------------------------------------------
| LINK
|--------------------------------------------------------------------------
*/
.floating-link {
display:
flex;
align-items:
center;
gap:
10px;
min-width:
155px;
padding:
11px 14px;
border-radius:
14px;
background:
rgba(255,255,255,0.96);
backdrop-filter:
blur(14px);
color:
#301003;
font-size:
14px;
font-weight:
700;
box-shadow:
0 10px 24px rgba(0,0,0,0.12);
transition:
0.2s ease;
}
.floating-link:hover {
transform:
translateY(-2px);
}
.floating-whatsapp {
background:
linear-gradient(
135deg,
#16a34a,
#22c55e
);
color:
#ffffff;
}
/*
|--------------------------------------------------------------------------
| TOGGLE BUTTON
|--------------------------------------------------------------------------
*/
.floating-toggle {
width:
55px;
height:
55px;
display:
flex;
justify-content:
center;
align-items:
center;
line-height:
15;
padding-top:
15px;
border:
none;
border-radius:
50%;
background:
linear-gradient(
135deg,
#ff8c02,
#ffab4d
);
color:
#ffffff;
font-size:
20px;
font-weight:
700;
cursor:
pointer;
box-shadow:
0 10px 26px rgba(255,140,2,0.26);
transition:
0.2s ease;
}
.floating-toggle:hover {
transform:
scale(1.04);
}
/* ==========================================================================
CREDIT FOOTER
========================================================================== */
.credit-footer {
margin-top:
36px;
padding:
20px 18px;
text-align:
center;
background:
#ffffff;
border-top:
2px solid var(--border);
color:
var(--muted);
font-size:
15px;
line-height:
1.7;
}
.credit-footer p {
margin:
2px 0;
}
.credit-footer a {
color:
var(--primary);
font-weight:
700;
}
.heart {
color:
#dc2626;
}
/* ==========================================================================
SOLD OUT / BOOKED OVERLAY
========================================================================== */
.card-overlay {
position:
absolute;
inset:
0;
background:
rgba(120,120,120,0.26);
z-index:
3;
}
/*
|--------------------------------------------------------------------------
| WATERMARK TEXT
|--------------------------------------------------------------------------
*/
.card-watermark-text {
position:
absolute;
top:
50%;
left:
50%;
z-index:
4;
transform:
translate(-50%, -50%)
rotate(-24deg);
font-size:
clamp(32px, 5vw, 65px);
font-weight:
900;
letter-spacing:
4px;
color:
rgba(255,255,255,0.82);
text-shadow:
0 4px 18px rgba(0,0,0,0.35);
white-space:
nowrap;
pointer-events:
none;
user-select:
none;
}