form {
display:inline
}
/*
Main colors are:
Headers:#cd7713
Text:#FFFFFF;
Background:#0a0a0a
Accent dark:#a85f0e
Surface:#111
Surface light:#1a1a1a
Border subtle:#222
*/
/* --- Reset & Base --- */
*,*::before,*::after{
box-sizing:border-box;
margin:0;
padding:0
}
html{
scroll-behavior:smooth
}
html,body{
direction:rtl;
background:#0a0a0a;
font:16px/1.6 'Segoe UI',Tahoma,Arial,sans-serif;
color:#e0e0e0;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
min-height:100vh
}
/* Subtle radial gradient behind content */
body::before{
content:'';
position:fixed;
top:-20%;
left:50%;
transform:translateX(-50%);
width:800px;
height:800px;
background:radial-gradient(circle,rgba(205,119,19,0.06) 0%,transparent 70%);
pointer-events:none;
z-index:0
}
/* --- Layout --- */
.wrap{
position:relative;
z-index:1;
max-width:900px;
width:90%;
margin:0 auto;
padding:48px 0 70px;
display:flex;
flex-direction:column;
align-items:center;
gap:44px
}
/* --- Fade-in on scroll --- */
@keyframes fade-up{
from{ opacity:0;
transform:translateY(24px)
}
to{ opacity:1;
transform:translateY(0)
}
}
.fade-in{
opacity:0;
transform:translateY(24px)
}
.fade-in.visible{
animation:fade-up 0.6s ease forwards
}
/* --- Header --- */
.wrap h1{
width:100%;
text-align:center;
color:#cd7713;
font-size:2.2rem;
font-weight:700;
letter-spacing:0.02em;
text-shadow:0 2px 20px rgba(205,119,19,0.15)
}
/* --- Profile Image + CTA --- */
.wrap .leon_image{
width:100%;
text-align:center;
margin-top:-12px;
display:flex;
flex-direction:column;
align-items:center;
gap:18px
}
@keyframes pulse-glow{
0%,100%{ box-shadow:0 0 20px rgba(205,119,19,0.25),0 0 40px rgba(205,119,19,0.08)
}
50%{ box-shadow:0 0 25px rgba(205,119,19,0.35),0 0 50px rgba(205,119,19,0.12)
}
}
.wrap .leon_image img{
width:130px;
height:130px;
object-fit:cover;
border-radius:50%;
border:3px solid #cd7713;
animation:pulse-glow 3s ease-in-out infinite;
transition:transform 0.3s ease
}
.wrap .leon_image img:hover{
transform:scale(1.05)
}
.cta_btn{
display:inline-block;
padding:10px 28px;
background:transparent;
color:#cd7713;
border:1.5px solid #cd7713;
border-radius:30px;
font-size:0.92rem;
font-weight:500;
text-decoration:none;
letter-spacing:0.02em;
transition:background 0.25s ease,color 0.25s ease,box-shadow 0.25s ease
}
.cta_btn:hover{
background:#cd7713;
color:#fff;
box-shadow:0 4px 18px rgba(205,119,19,0.25)
}
/* --- Section Divider --- */
.wrap .list_wrapper::before,
.wrap .form_wrapper::before{
content:'';
display:block;
width:60px;
height:3px;
background:linear-gradient(90deg,transparent,#cd7713,transparent);
border-radius:2px;
margin:0 auto 0;
position:relative;
top:-22px
}
/* --- Occasions Counter --- */
.occasions_count{
text-align:center;
color:#888;
font-size:0.85rem;
margin-bottom:12px;
letter-spacing:0.02em
}
/* --- List / Table Section --- */
.wrap .list_wrapper{
width:100%
}
.wrap .list_wrapper .table{
width:100%;
overflow-x:auto;
-webkit-overflow-scrolling:touch
}
.wrap .list_wrapper .table table{
width:100%;
border-collapse:separate;
border-spacing:0;
border-radius:12px;
overflow:hidden;
background:#111;
box-shadow:0 4px 24px rgba(0,0,0,0.5),0 0 0 1px rgba(205,119,19,0.08);
table-layout:fixed
}
/* Column widths */
.col_title{ width:20%
}
.col_date{ width:14%
}
.col_desc{ width:50%
}
.col_img{ width:16%
}
.wrap .list_wrapper .table table th,
.wrap .list_wrapper .table table td{
padding:14px 18px;
text-align:center;
vertical-align:middle
}
.wrap .list_wrapper .table table th{
background:linear-gradient(135deg,#cd7713,#a85f0e);
color:#FFFFFF;
font-weight:600;
font-size:0.9rem;
text-transform:uppercase;
letter-spacing:0.05em;
white-space:nowrap
}
.wrap .list_wrapper .table table td{
color:#d0d0d0;
font-size:0.88rem;
line-height:1.7;
border-bottom:1px solid #1c1c1c;
transition:background 0.2s ease;
word-wrap:break-word;
overflow-wrap:break-word
}
/* Alternating rows */
.wrap .list_wrapper .table table tbody tr:nth-child(even) td{
background:#141414
}
.wrap .list_wrapper .table table tbody tr:last-child td{
border-bottom:none
}
.wrap .list_wrapper .table table tbody tr:hover td{
background:#1d1a14
}
/* Table images */
.wrap .list_wrapper .table table td a{
display:inline-block
}
.wrap .list_wrapper .table table img{
max-width:72px;
max-height:72px;
border-radius:8px;
object-fit:cover;
background:#1a1a1a;
border:1px solid #2a2a2a;
padding:2px;
cursor:pointer;
transition:transform 0.3s ease,border-color 0.3s ease
}
.wrap .list_wrapper .table table img:hover{
transform:scale(1.15);
border-color:#cd7713
}
/* Image loading shimmer */
@keyframes shimmer{
0%{ background-position:-200px 0
}
100%{ background-position:200px 0
}
}
.wrap .list_wrapper .table table img[loading="lazy"]{
background:linear-gradient(90deg,#1a1a1a 25%,#222 50%,#1a1a1a 75%);
background-size:200px 100%;
animation:shimmer 1.5s infinite linear
}
/* Date display */
.date_main{
display:block;
font-weight:500;
color:#d0d0d0
}
.date_time{
display:block;
font-size:0.78rem;
color:#888;
margin-top:2px
}
/* Description truncation */
.desc_wrap{
position:relative
}
.desc_text{
max-height:4.2em;
overflow:hidden;
transition:max-height 0.35s ease;
line-height:1.7
}
.desc_wrap.expanded .desc_text{
max-height:1000px
}
.desc_toggle{
display:none;
background:none;
border:none;
color:#cd7713;
font-size:0.78rem;
cursor:pointer;
padding:4px 0 0;
font-family:inherit;
transition:opacity 0.2s ease
}
.desc_toggle:hover{
opacity:0.7
}
.desc_wrap.needs_toggle .desc_toggle{
display:inline-block
}
.desc_wrap.expanded .desc_toggle{
display:inline-block
}
/* --- Empty State --- */
.empty_state{
text-align:center;
padding:48px 20px;
background:#111;
border-radius:12px;
box-shadow:0 4px 24px rgba(0,0,0,0.5),0 0 0 1px rgba(205,119,19,0.08)
}
.empty_state .empty_icon{
display:block;
font-size:3rem;
margin-bottom:12px;
opacity:0.4
}
.empty_state p{
color:#777;
font-size:1rem
}
/* --- Lightbox --- */
.lightbox{
display:none;
position:fixed;
inset:0;
z-index:9999;
background:rgba(0,0,0,0.88);
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
justify-content:center;
align-items:center;
cursor:pointer
}
.lightbox.open{
display:flex
}
.lightbox_img{
max-width:90vw;
max-height:85vh;
border-radius:10px;
box-shadow:0 8px 40px rgba(0,0,0,0.6);
object-fit:contain;
animation:fade-up 0.3s ease
}
.lightbox_close{
position:absolute;
top:20px;
left:28px;
color:#fff;
font-size:2.2rem;
cursor:pointer;
line-height:1;
opacity:0.7;
transition:opacity 0.2s ease;
z-index:1
}
.lightbox_close:hover{
opacity:1
}
/* --- Form Section --- */
.wrap .form_wrapper{
width:100%;
background:#111;
border-radius:14px;
padding:36px 32px;
box-shadow:0 4px 24px rgba(0,0,0,0.5),0 0 0 1px rgba(205,119,19,0.08)
}
.wrap .form_wrapper h2{
width:100%;
text-align:center;
color:#cd7713;
font-size:1.3rem;
font-weight:600;
margin-bottom:28px
}
.wrap .form_wrapper .form{
width:100%
}
.wrap .form_wrapper .form form{
width:100%;
display:flex;
flex-direction:column;
gap:20px
}
.wrap .form_wrapper .form form .input_wrapper{
width:100%;
display:flex;
flex-direction:column;
gap:6px
}
.wrap .form_wrapper .form form .input_wrapper label{
color:#cd7713;
font-size:0.9rem;
font-weight:500
}
.required{
color:#e05555;
font-weight:700
}
.wrap .form_wrapper .form form .input_wrapper input[type="text"],
.wrap .form_wrapper .form form .input_wrapper textarea{
width:100%;
padding:13px 16px;
font:15px/1.5 'Segoe UI',Tahoma,Arial,sans-serif;
color:#e0e0e0;
background:#1a1a1a;
border:1px solid #2a2a2a;
border-radius:10px;
transition:border-color 0.25s ease,box-shadow 0.25s ease,background 0.25s ease;
direction:rtl
}
.wrap .form_wrapper .form form .input_wrapper textarea{
min-height:110px;
resize:vertical
}
.wrap .form_wrapper .form form .input_wrapper input[type="text"]:focus,
.wrap .form_wrapper .form form .input_wrapper textarea:focus{
outline:none;
border-color:#cd7713;
background:#1e1810;
box-shadow:0 0 0 3px rgba(205,119,19,0.12)
}
.wrap .form_wrapper .form form .input_wrapper input[type="text"]::placeholder,
.wrap .form_wrapper .form form .input_wrapper textarea::placeholder{
color:#555
}
/* Invalid highlight on required fields */
.wrap .form_wrapper .form form .input_wrapper input[type="text"]:invalid:not(:placeholder-shown){
border-color:#e05555;
box-shadow:0 0 0 3px rgba(224,85,85,0.1)
}
/* File upload drop-zone style */
.wrap .form_wrapper .form form .input_wrapper .file_zone{
display:flex;
flex-direction:column;
align-items:center;
gap:10px;
padding:24px 16px;
border:2px dashed #2a2a2a;
border-radius:10px;
background:#141414;
transition:border-color 0.25s ease,background 0.25s ease;
cursor:pointer
}
.wrap .form_wrapper .form form .input_wrapper .file_zone:hover{
border-color:#cd7713;
background:#1a1610
}
.wrap .form_wrapper .form form .input_wrapper .file_zone.dragover{
border-color:#cd7713;
background:#1e1810
}
.wrap .form_wrapper .form form .input_wrapper .file_zone .file_icon{
font-size:2rem;
line-height:1;
opacity:0.5
}
.wrap .form_wrapper .form form .input_wrapper .file_zone .file_text{
color:#777;
font-size:0.85rem
}
.wrap .form_wrapper .form form .input_wrapper .file_zone .file_name{
color:#cd7713;
font-size:0.85rem;
font-weight:500;
display:none
}
.wrap .form_wrapper .form form .input_wrapper .file_zone .file_preview{
display:none;
max-width:160px;
max-height:120px;
border-radius:8px;
object-fit:cover;
border:1px solid #2a2a2a;
margin-top:4px
}
.wrap .form_wrapper .form form .input_wrapper .file_zone input[type="file"]{
display:none
}
/* Submit button */
.wrap .form_wrapper .form form .input_wrapper input[type="submit"]{
background:linear-gradient(135deg,#cd7713,#a85f0e);
color:#FFFFFF;
border:none;
cursor:pointer;
border-radius:10px;
font-size:1.05rem;
font-weight:600;
padding:15px 24px;
letter-spacing:0.03em;
transition:box-shadow 0.25s ease,transform 0.15s ease;
width:100%;
margin-top:4px
}
.wrap .form_wrapper .form form .input_wrapper input[type="submit"]:hover{
box-shadow:0 4px 20px rgba(205,119,19,0.3);
transform:translateY(-2px)
}
.wrap .form_wrapper .form form .input_wrapper input[type="submit"]:active{
transform:translateY(0);
box-shadow:none
}
/* --- Footer --- */
.footer{
position:relative;
z-index:1;
text-align:center;
padding:24px 16px;
color:#444;
font-size:0.8rem;
border-top:1px solid #1a1a1a;
margin-top:0
}
/* --- Back to top --- */
.back_to_top{
position:fixed;
bottom:28px;
left:28px;
z-index:9000;
width:44px;
height:44px;
border:none;
border-radius:50%;
background:#111;
color:#cd7713;
font-size:1.3rem;
line-height:44px;
text-align:center;
cursor:pointer;
box-shadow:0 2px 12px rgba(0,0,0,0.5),0 0 0 1px rgba(205,119,19,0.1);
opacity:0;
transform:translateY(16px);
pointer-events:none;
transition:opacity 0.3s ease,transform 0.3s ease,background 0.2s ease
}
.back_to_top.visible{
opacity:1;
transform:translateY(0);
pointer-events:auto
}
.back_to_top:hover{
background:#cd7713;
color:#fff
}
/* --- Toast notification --- */
.toast{
position:fixed;
top:24px;
left:50%;
transform:translateX(-50%) translateY(-120%);
background:linear-gradient(135deg,#cd7713,#a85f0e);
color:#fff;
padding:14px 32px;
border-radius:10px;
font-size:1rem;
font-weight:600;
box-shadow:0 8px 30px rgba(205,119,19,0.3);
z-index:10000;
opacity:0;
transition:transform 0.4s cubic-bezier(0.34,1.56,0.64,1),opacity 0.4s ease;
pointer-events:none;
white-space:nowrap
}
.toast.show{
transform:translateX(-50%) translateY(0);
opacity:1;
pointer-events:auto
}
/* --- Focus visible for keyboard accessibility --- */
.cta_btn:focus-visible,
.back_to_top:focus-visible,
.lightbox_close:focus-visible,
.wrap .form_wrapper .form form .input_wrapper input[type="submit"]:focus-visible{
outline:2px solid #cd7713;
outline-offset:3px
}
/* --- Responsive:Tablet --- */
@media (max-width:768px){
.wrap{
width:92%;
padding:32px 0 50px;
gap:34px
}
.wrap h1{
font-size:1.7rem
}
.wrap .form_wrapper{
padding:28px 20px
}
/* Let table columns auto-size on tablet */
.wrap .list_wrapper .table table{
table-layout:auto
}
}
/* --- Responsive:Mobile card layout --- */
@media (max-width:600px){
.wrap{
width:94%;
padding:24px 0 40px;
gap:28px
}
.wrap h1{
font-size:1.4rem
}
.wrap .leon_image img{
width:100px;
height:100px
}
.cta_btn{
font-size:0.85rem;
padding:9px 22px
}
/* Dividers smaller on mobile */
.wrap .list_wrapper::before,
.wrap .form_wrapper::before{
width:40px;
top:-14px
}
/* Table → Cards */
.wrap .list_wrapper .table table,
.wrap .list_wrapper .table table thead,
.wrap .list_wrapper .table table tbody,
.wrap .list_wrapper .table table tr,
.wrap .list_wrapper .table table th,
.wrap .list_wrapper .table table td{
display:block;
width:100%
}
.wrap .list_wrapper .table table{
background:transparent;
box-shadow:none;
border-spacing:0;
border-radius:0;
table-layout:auto
}
.wrap .list_wrapper .table table thead tr{
display:none
}
.wrap .list_wrapper .table table tbody tr{
background:#111;
border-radius:12px;
margin-bottom:16px;
padding:18px 16px;
box-shadow:0 2px 14px rgba(0,0,0,0.4),0 0 0 1px rgba(205,119,19,0.06);
display:flex;
flex-direction:column;
gap:10px
}
.wrap .list_wrapper .table table tbody tr:nth-child(even) td{
background:transparent
}
.wrap .list_wrapper .table table tbody tr:hover td{
background:transparent
}
.wrap .list_wrapper .table table td{
border-bottom:none;
padding:4px 0;
text-align:right;
font-size:0.9rem
}
.wrap .list_wrapper .table table td::before{
content:attr(data-label);
display:block;
color:#cd7713;
font-weight:600;
font-size:0.78rem;
letter-spacing:0.03em;
margin-bottom:3px
}
.wrap .list_wrapper .table table td:last-child{
text-align:center;
padding-top:10px;
border-top:1px solid #1c1c1c;
margin-top:4px
}
.wrap .list_wrapper .table table td:last-child::before{
text-align:right
}
.wrap .list_wrapper .table table img{
max-width:100%;
max-height:200px;
border-radius:8px
}
.wrap .form_wrapper{
padding:22px 16px;
border-radius:12px
}
.wrap .form_wrapper h2{
font-size:1.1rem;
margin-bottom:20px
}
.wrap .form_wrapper .form form{
gap:16px
}
.wrap .form_wrapper .form form .input_wrapper .file_zone{
padding:20px 12px
}
.empty_state{
padding:36px 16px
}
.back_to_top{
bottom:20px;
left:20px;
width:40px;
height:40px;
font-size:1.1rem;
line-height:40px
}
/* On mobile cards,show full description,no truncation */
.desc_text{
max-height:none !important
}
.desc_toggle{
display:none !important
}
}
/* --- Print --- */
@media print{
body,html{
background:#fff;
color:#000
}
body::before{
display:none
}
.wrap{
max-width:100%;
width:100%;
padding:0;
gap:20px
}
.wrap h1{
color:#000;
text-shadow:none
}
.leon_image img{
border-color:#999;
animation:none;
box-shadow:none
}
.cta_btn,
.back_to_top,
.form_wrapper,
.lightbox,
.toast{
display:none !important
}
.list_wrapper::before,
.form_wrapper::before{
display:none
}
.wrap .list_wrapper .table table{
box-shadow:none;
border:1px solid #ccc
}
.wrap .list_wrapper .table table th{
background:#eee;
color:#000
}
.wrap .list_wrapper .table table td{
color:#333;
border-bottom-color:#ddd
}
.desc_text{
max-height:none !important
}
.desc_toggle{
display:none !important
}
.occasions_count{
color:#666
}
.footer{
color:#999;
border-top-color:#ddd
}
}
/*
* span {
display:inline-block
}
*/
/*
#lbuttons,
#lbuttons div,
#lbuttons a,
#lbuttons img,
.fxc #subtoolbar,
.fxc #admin_panel {
-webkit-transform:translate3d(0,0,0);
-webkit-backface-visibility:hidden;
-webkit-perspective:1000;
transform:2DValue(val) 3DValueSetToNull(0);
transform:2DValue(val);
-webkit-transform :translateZ(0);
-o-transform :translateZ(0);
-webkit-transform :translateZ(0);
transform :translateZ(0);
-webkit-transition:all 0.5s linear
}
.fxc #admin_pusher,
.fxc #sys_website {
-webkit-transition:all 0.5s linear
}
*/
body {
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
min-width:100%;
min-height:100%;
padding:0;
margin:0
}
p {
padding:0;
margin:0
}
div.bs {
float:right
}
.seoform span {
float:left;
width:100px
}
.seoform div input {
width:500px
}
.seoform div {
float:left;
width:100%;
margin-bottom:15px
}
/* css fixes */
ol {
position:relative;
right:20px
}
a{
outline:0
}
input[type="image"],
input[type="submit"],
input[type="button"],
button {
cursor:pointer
}
.ie a img {
border:0
}
.hidden {
position:absolute;
left:0;
top:-100000px
}