/* ── FONTS ────────────────────────────────────────────── Poppins (headings) + Nunito (body), loaded from Google Fonts via the tags in each HTML page's . ──────────────────────────────────────────────────────── */ :root { --font-head: 'Source Sans 3', sans-serif; --font-body: 'Lato', sans-serif; } /* Creative Nepal Films — styles.css */ /* ── THEME ── */ [data-theme="dark"] { --bg:#2E2A26; --bg-alt:#27231F; --surface:#35302B; --border:#46403A; --text:#E6E2D3; --text-muted:#A8A296; --gold:#B3C10E; --gold-dim:rgba(179,193,14,0.14); --green:#4A7C2D; --green-light:#6E9F45; --header-bg:rgba(46,42,38,0.96); --overlay-bg:rgba(22,20,17,0.94); --footer-bg:#211E1A; --input-border:#46403A; --shadow:0 2px 16px rgba(0,0,0,0.45); } [data-theme="light"] { --bg:#E6E2D3; --bg-alt:#DAD5C4; --surface:#F2EFE6; --border:#C9C3B2; --text:#2E2A26; --text-muted:#6E665C; --gold:#4A7C2D; --gold-dim:rgba(74,124,45,0.1); --green:#4A7C2D; --green-light:#6E9F45; --header-bg:rgba(230,226,211,0.97); --overlay-bg:rgba(46,42,38,0.94); --footer-bg:#DAD5C4; --input-border:#C9C3B2; --shadow:0 2px 16px rgba(46,42,38,0.12); } /* ── RESET ── */ *,*::before,*::after{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} img{display:block;max-width:100%} a{color:inherit;text-decoration:none} button{font-family:inherit;cursor:pointer} /* ── BASE ── */ body{background:var(--bg);color:var(--text);font-family:var(--font-body); font-size:16px;line-height:1.7;transition:background .22s,color .22s} h1,h2,h3,h4{font-family:var(--font-head);font-weight:900;line-height:1.1} ::-webkit-scrollbar{width:4px} ::-webkit-scrollbar-track{background:var(--bg)} ::-webkit-scrollbar-thumb{background:var(--gold);border-radius:2px} em{font-style:normal} /* ── LAYOUT ── */ .container{max-width:1160px;margin:0 auto;padding:0 40px} section{padding:96px 0} .page-body{padding-top:0} .page-body > section:first-child{padding-top:calc(96px + 68px)} .page-body > .page-banner:first-child{padding-top:68px;margin-top:0} .hidden{display:none!important} /* ── HEADER ── */ header{position:fixed;top:0;left:0;right:0;z-index:200;height:68px; background:var(--header-bg);border-bottom:1px solid var(--border); display:flex;align-items:center;justify-content:space-between; padding:0 40px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); transition:background .22s,border-color .22s} .logo-mark{width:36px;height:36px;border:2px solid var(--gold); display:flex;align-items:center;justify-content:center;flex-shrink:0} .logo-initials{font-family:var(--font-head);font-weight:900;font-size:13px; color:var(--gold);letter-spacing:1px} .logo-text{display:flex;flex-direction:column;gap:1px} .logo-name{font-family:var(--font-head);font-weight:700;font-size:13px; letter-spacing:2.5px;text-transform:uppercase;color:var(--text);line-height:1} .logo-sub{font-family:var(--font-body);font-size:9px; letter-spacing:3px;text-transform:uppercase;color:var(--gold);line-height:1} nav{display:flex;align-items:center;gap:36px} nav a{font-family:var(--font-head);font-size:13px;font-weight:600; letter-spacing:1px;text-transform:uppercase;color:var(--text-muted);transition:color .18s} nav a:hover,nav a.active{color:var(--gold)} .header-right{display:flex;align-items:center;gap:10px} .theme-toggle{width:40px;height:40px;background:none;border:1px solid var(--border); display:flex;align-items:center;justify-content:center; color:var(--text-muted);font-size:17px;flex-shrink:0;transition:border-color .18s,color .18s} .theme-toggle:hover{border-color:var(--gold);color:var(--gold)} .menu-btn{width:40px;height:40px;background:none;border:1px solid var(--border); display:flex;flex-direction:column;align-items:center;justify-content:center; gap:5px;transition:border-color .18s} .menu-btn:hover{border-color:var(--gold)} .menu-btn span{display:block;height:1.5px;background:var(--text-muted);transition:background .18s,width .18s} .menu-btn span:nth-child(1){width:18px} .menu-btn span:nth-child(2){width:11px} .menu-btn span:nth-child(3){width:18px} .menu-btn:hover span{background:var(--gold)} .menu-btn:hover span:nth-child(2){width:18px} /* ── OVERLAY MENU ── */ .overlay-menu{position:fixed;inset:0;z-index:300;background:var(--overlay-bg); display:flex;flex-direction:column;align-items:center;justify-content:center; gap:4px;opacity:0;pointer-events:none;transition:opacity .2s} .overlay-menu.open{opacity:1;pointer-events:all} .overlay-menu a{font-family:var(--font-head);font-weight:900; font-size:clamp(38px,6vw,68px);letter-spacing:4px;text-transform:uppercase; color:#E6E2D3;opacity:.45;transition:opacity .18s,color .18s} .overlay-menu a:hover{opacity:1;color:var(--gold)} .overlay-close{position:absolute;top:20px;right:40px;background:none;border:none; font-size:28px;color:#A8A296;transition:color .18s} .overlay-close:hover{color:var(--gold)} /* ── SECTION LABELS ── */ .sec-label{font-family:var(--font-head);font-weight:700;font-size:14px; letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:10px} .sec-title{font-size:clamp(36px,4.5vw,58px);color:var(--text);margin-bottom:12px} .sec-title em{font-weight:300;color:var(--gold);font-style:normal} .sec-lead{font-family:var(--font-body);font-size:16px; color:var(--text-muted);max-width:520px;margin-bottom:52px;line-height:1.75} /* ── BUTTONS ── */ .btn{display:inline-flex;align-items:center;gap:10px;padding:13px 32px; font-family:var(--font-head);font-weight:700;font-size:13px; letter-spacing:2px;text-transform:uppercase;border:none;border-radius:35px;transition:background .18s,color .18s} .btn-gold{background:var(--gold);color:#2E2A26} .btn-gold:hover{background:#C6D420} .btn-outline{background:transparent;border:1px solid var(--gold);color:var(--gold)} .btn-outline:hover{background:var(--gold);color:#2E2A26} .btn-sm{padding:8px 18px;font-size:11px;letter-spacing:2px} .btn-submit{display:inline-flex;align-items:center;gap:10px;padding:13px 32px; background:var(--gold);border:none;color:#2E2A26; font-family:var(--font-head);font-weight:700;font-size:13px; letter-spacing:2px;text-transform:uppercase;border-radius:35px;transition:background .18s} .btn-submit:hover{background:#C6D420} /* ── FORMS ── */ .form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px} .form-group{margin-bottom:20px} .form-group label{display:block;font-family:var(--font-head);font-weight:700; font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:7px} .form-group input,.form-group textarea,.form-group select{ width:100%;background:transparent;border:none;border-bottom:1px solid var(--input-border); color:var(--text);font-family:var(--font-body);font-size:16px; padding:9px 0;outline:none;transition:border-color .18s} .form-group input::placeholder,.form-group textarea::placeholder{color:var(--text-muted)} .form-group input:focus,.form-group textarea:focus,.form-group select:focus{border-bottom-color:var(--gold)} .form-group textarea{resize:none;height:96px} .form-group select option{background:var(--surface);color:var(--text)} /* ── FOOTER ── */ footer{background:var(--footer-bg);border-top:1px solid var(--border); padding:56px 0 28px;transition:background .22s} .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px;padding-bottom:40px;border-bottom:1px solid var(--border)} .footer-brand p{font-size:14px;color:var(--text-muted);line-height:1.7;margin-top:16px;max-width:240px} .footer-col h4{font-family:var(--font-head);font-weight:700;font-size:13px; letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:14px} .footer-col a{display:block;font-size:14px;color:var(--text-muted);margin-bottom:9px;transition:color .18s} .footer-col a:hover{color:var(--text)} .footer-bottom{display:flex;justify-content:space-between;align-items:center; padding-top:24px;flex-wrap:wrap;gap:12px} .footer-copy{font-size:12px;color:var(--text-muted);letter-spacing:.5px} .footer-socials{display:flex;gap:10px} .f-social{width:32px;height:32px;border:1px solid var(--border); display:flex;align-items:center;justify-content:center;font-size:10px; font-family:var(--font-head);font-weight:700;color:var(--text-muted); transition:border-color .18s,color .18s} .f-social:hover{border-color:var(--gold);color:var(--gold)} /* ── PAGE BANNER ── */ .page-banner{position:relative;height:60vh;min-height:380px; display:flex;align-items:flex-end;overflow:hidden;margin-top:0;padding-top:68px} .page-banner-bg{position:absolute;top:0;left:0;right:0;bottom:0; background:linear-gradient(to top,rgba(0,0,0,.85) 0%,rgba(0,0,0,.3) 60%,rgba(0,0,0,.1) 100%), var(--page-banner-img,none) center 30%/cover no-repeat} [data-theme="light"] .page-banner-bg{ background:linear-gradient(to top,var(--bg) 0%,rgba(0,0,0,.55) 60%,rgba(0,0,0,.2) 100%), var(--page-banner-img,none) center 30%/cover no-repeat} .page-banner-content{position:relative;z-index:2;padding:0 0 44px;width:100%} .page-banner-title{font-size:clamp(36px,5vw,68px);color:#fff;margin-bottom:8px; text-shadow:0 2px 20px rgba(0,0,0,.4)} [data-theme="light"] .page-banner-title{color:var(--text)} .page-banner-sub{font-family:var(--font-body); font-size:16px;color:rgba(255,255,255,.65)} [data-theme="light"] .page-banner-sub{color:var(--text-muted)} /* ── HERO ── */ #hero{position:relative;height:100vh;min-height:560px; display:flex;align-items:center;justify-content:center;overflow:hidden} .hero-img{position:absolute;inset:0; background:linear-gradient(to top,var(--bg) 0%,rgba(0,0,0,.55) 55%,rgba(0,0,0,.25) 100%), var(--hero-bg-img,none) center 40%/cover no-repeat} [data-theme="light"] .hero-img{ background:linear-gradient(to top,var(--bg) 0%,rgba(0,0,0,.5) 55%,rgba(0,0,0,.2) 100%), var(--hero-bg-img,none) center 40%/cover no-repeat} .hero-content{position:relative;z-index:2;text-align:center;max-width:760px;padding:0 32px} .hero-eyebrow{font-family:var(--font-body);font-size:11px;letter-spacing:5px; text-transform:uppercase;color:var(--gold);margin-bottom:20px; display:flex;align-items:center;justify-content:center;gap:14px} .hero-eyebrow::before,.hero-eyebrow::after{content:'';display:block; width:36px;height:1px;background:var(--gold);opacity:.7} .hero-title{font-family:var(--font-head);font-weight:900; font-size:clamp(54px,9vw,112px);letter-spacing:3px;text-transform:uppercase; color:#fff;line-height:.94;text-shadow:0 2px 28px rgba(0,0,0,.5)} .hero-title em{font-weight:300;color:var(--gold);font-style:normal} .hero-tagline{font-family:var(--font-body); font-size:17px;color:rgba(255,255,255,.68);margin-top:18px} .hero-cta{display:inline-flex;align-items:center;gap:10px;margin-top:36px; padding:13px 32px;background:var(--gold);color:#2E2A26; font-family:var(--font-head);font-weight:700;font-size:13px; letter-spacing:2px;text-transform:uppercase;border-radius:35px;transition:background .18s} .hero-cta:hover{background:#C6D420} /* ── SECTION LINKS ── */ .section-top{display:flex;justify-content:space-between;align-items:flex-end; margin-bottom:44px;flex-wrap:wrap;gap:16px} .section-link{font-family:var(--font-head);font-weight:700;font-size:11px; letter-spacing:3px;text-transform:uppercase;color:var(--gold); border-bottom:1px solid var(--gold);padding-bottom:3px;transition:opacity .18s} .section-link:hover{opacity:.7} /* ── ARTICLE CARDS ── */ .articles-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px} .article-card{background:var(--surface);border:1px solid var(--border); overflow:hidden;transition:box-shadow .22s} .article-card:hover{box-shadow:var(--shadow)} .article-card-img{width:100%;aspect-ratio:16/9;object-fit:cover; object-position:center 30%;filter:brightness(.9); transition:transform .3s,filter .28s;display:block} .article-card:hover .article-card-img{transform:scale(1.03);filter:brightness(.75)} .article-card-body{padding:22px 22px 26px} .article-cat{font-family:var(--font-head);font-weight:700;font-size:9px; letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-bottom:8px} .article-card-title{font-family:var(--font-head);font-weight:900;font-size:19px; color:var(--text);line-height:1.25;margin-bottom:10px} .article-excerpt{font-family:var(--font-body);font-size:14px; color:var(--text-muted);line-height:1.7;margin-bottom:18px} .article-meta{display:flex;align-items:center;justify-content:space-between} .article-date{font-size:11px;color:var(--text-muted);letter-spacing:1px} .article-read-link{font-family:var(--font-head);font-weight:700;font-size:11px; letter-spacing:2px;text-transform:uppercase;color:var(--gold);transition:opacity .18s} .article-read-link:hover{opacity:.7} /* ── WORK CARDS ── */ .works-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .works-page-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .work-card{position:relative;overflow:hidden;cursor:pointer; aspect-ratio:3/4;background:var(--surface);box-shadow:var(--shadow);display:block} .work-card img{width:100%;height:100%;object-fit:cover;object-position:center 35%; filter:brightness(.82) saturate(.8);transition:transform .3s,filter .28s} .work-card:hover img{transform:scale(1.04);filter:brightness(.62) saturate(1)} .work-info{position:absolute;bottom:0;left:0;right:0;padding:22px 20px 20px; background:linear-gradient(to top,rgba(0,0,0,.88) 0%,transparent 100%)} .work-genre{font-family:var(--font-head);font-size:9px;letter-spacing:3px; text-transform:uppercase;color:var(--gold);margin-bottom:5px} .work-name{font-family:var(--font-head);font-weight:900;font-size:21px;color:#fff;line-height:1.15} .work-type{font-family:var(--font-body);font-size:11px; color:rgba(255,255,255,.48);margin-top:4px;letter-spacing:1px} .work-play{position:absolute;top:14px;right:14px;width:40px;height:40px; background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.28); display:flex;align-items:center;justify-content:center; color:#fff;font-size:14px;opacity:0;transition:opacity .22s} .work-card:hover .work-play{opacity:1} .works-filters,.cat-filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:36px} .filter-btn{font-family:var(--font-head);font-weight:700;font-size:10px; letter-spacing:2px;text-transform:uppercase;padding:7px 16px; background:transparent;border:1px solid var(--border);color:var(--text-muted); transition:border-color .18s,color .18s} .filter-btn:hover,.filter-btn.active{border-color:var(--gold);color:var(--gold)} /* ── TEAM ── */ .team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px} .team-card{position:relative} .team-photo{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:center 30%; filter:grayscale(80%) brightness(.88);transition:filter .28s;display:block} .team-card:hover .team-photo{filter:grayscale(0%) brightness(.9)} .team-info{padding:13px 0 0;border-top:1px solid var(--border);margin-top:2px} .team-name{font-family:var(--font-head);font-weight:700;font-size:16px;color:var(--text)} .team-role{font-family:var(--font-body);font-size:11px;letter-spacing:2px; text-transform:uppercase;color:var(--gold);margin-top:3px} /* ── ABOUT ── */ .about-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center} .about-img-wrap{position:relative} .about-img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 40%; display:block;filter:brightness(.88) saturate(.85)} [data-theme="light"] .about-img{filter:brightness(.95) saturate(.92)} .about-badge{position:absolute;bottom:-18px;right:-18px;width:96px;height:96px; background:var(--gold);color:#2E2A26;display:flex;flex-direction:column; align-items:center;justify-content:center;box-shadow:var(--shadow)} .about-badge-num{font-family:var(--font-head);font-weight:900;font-size:30px;line-height:1} .about-badge-label{font-family:var(--font-body);font-size:8.5px; letter-spacing:1px;text-align:center;line-height:1.4;text-transform:uppercase} .about-text p{font-family:var(--font-body);font-size:16px; color:var(--text-muted);line-height:1.8;margin-bottom:16px} .about-stats{display:flex;gap:36px;margin-top:36px; padding-top:32px;border-top:1px solid var(--border)} .stat-num{font-family:var(--font-head);font-weight:900;font-size:38px;color:var(--gold);line-height:1} .stat-label{font-family:var(--font-body);font-size:11px;letter-spacing:2px; text-transform:uppercase;color:var(--text-muted);margin-top:4px} /* ── CONTACT ── */ .contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:72px} .contact-left h3{font-family:var(--font-body);font-weight:400; font-size:19px;color:var(--text);margin-bottom:14px;line-height:1.55} .contact-left p{font-size:15px;color:var(--text-muted);margin-bottom:32px;line-height:1.8} .c-detail{display:flex;align-items:flex-start;gap:13px;margin-bottom:16px} .c-icon{width:34px;height:34px;flex-shrink:0;border:1px solid var(--border); display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--gold)} .c-label{font-family:var(--font-head);font-weight:700;font-size:12px; letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:2px} .c-val{font-size:14px;color:var(--text-muted)} /* ── VIDEO MODAL ── */ .v-modal{display:none;position:fixed;inset:0;z-index:400; background:rgba(0,0,0,.92);align-items:center;justify-content:center} .v-modal.active{display:flex} .v-modal-inner{position:relative;width:90vw;max-width:880px} .v-modal-inner iframe{width:100%;aspect-ratio:16/9;border:none;display:block} .v-close{position:absolute;top:-42px;right:0;background:none;border:none; color:#fff;font-size:26px;opacity:.65;transition:opacity .18s} .v-close:hover{opacity:1} /* ── SINGLE WORK ── */ .work-detail-hero{position:relative;height:70vh;min-height:480px; display:flex;align-items:flex-end;overflow:hidden;margin-top:68px} .work-detail-hero-bg{position:absolute;inset:0; background:linear-gradient(to top,rgba(0,0,0,.9) 0%,rgba(0,0,0,.25) 60%), var(--work-hero-img,none) center 30%/cover no-repeat} .work-detail-content{position:relative;z-index:2;padding:0 0 52px;width:100%} .work-detail-back{display:inline-flex;align-items:center;gap:8px; font-family:var(--font-head);font-weight:700;font-size:11px; letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:14px; transition:color .18s} .work-detail-back:hover{color:var(--gold)} .work-detail-badge{display:flex;align-items:center;gap:16px;margin-bottom:12px;flex-wrap:wrap} .work-detail-genre{font-family:var(--font-head);font-weight:700;font-size:10px; letter-spacing:3px;text-transform:uppercase;color:var(--gold)} .work-detail-year{font-size:12px;color:rgba(255,255,255,.5);letter-spacing:2px} .work-detail-title{font-family:var(--font-head);font-weight:900; font-size:clamp(32px,5vw,64px);color:#fff;line-height:1.05;max-width:760px} .work-detail-body{padding:72px 0 80px;background:var(--bg)} .work-detail-layout{display:grid;grid-template-columns:1fr 320px;gap:64px;align-items:start} .work-synopsis{font-family:var(--font-body);font-size:16px; color:var(--text-muted);line-height:1.85;margin-bottom:40px} .work-breakdown-title{font-family:var(--font-head);font-weight:900;font-size:26px; color:var(--text);margin-bottom:16px;padding-top:40px;border-top:1px solid var(--border)} .work-breakdown-text{font-family:var(--font-body);font-size:16px; color:var(--text-muted);line-height:1.85;margin-bottom:20px} .work-sidebar-box{border:1px solid var(--border);padding:24px;background:var(--surface);margin-bottom:24px} .work-sidebar-box h4{font-family:var(--font-head);font-weight:700;font-size:10px; letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-bottom:16px} .work-crew-row{display:flex;justify-content:space-between;padding:8px 0; border-bottom:1px solid var(--border);font-size:14px} .work-crew-row:last-child{border-bottom:none} .work-crew-role{color:var(--text-muted);font-size:11px;letter-spacing:1px} .work-crew-name{color:var(--text);font-weight:600} .work-award-item{font-size:14px;color:var(--text-muted);padding:6px 0; border-bottom:1px solid var(--border)} .work-award-item:last-child{border-bottom:none} .work-play-btn{display:flex;align-items:center;gap:10px;padding:14px; background:var(--gold);color:#2E2A26;font-family:var(--font-head);font-weight:700; font-size:13px;letter-spacing:2px;text-transform:uppercase; border:none;border-radius:35px;width:100%;justify-content:center;margin-top:8px;transition:background .18s} .work-play-btn:hover{background:#C6D420} /* ── SINGLE ARTICLE ── */ .article-hero{position:relative;height:68vh;min-height:420px; display:flex;align-items:flex-end;overflow:hidden;margin-top:68px} .article-hero-bg{position:absolute;inset:0; background:linear-gradient(to top,rgba(0,0,0,.82) 0%,rgba(0,0,0,.25) 60%,rgba(0,0,0,.1) 100%), var(--article-hero-img,none) center 30%/cover no-repeat} .article-hero-content{position:relative;z-index:2;padding:0 0 48px;width:100%} .article-back{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-head); font-weight:700;font-size:11px;letter-spacing:2px;text-transform:uppercase; color:rgba(255,255,255,.65);margin-bottom:8px;transition:color .18s} .article-back:hover{color:var(--gold)} .article-hero-cat{font-family:var(--font-head);font-weight:700;font-size:11px; letter-spacing:4px;text-transform:uppercase;color:var(--gold);margin-bottom:10px} .article-hero-title{font-family:var(--font-head);font-weight:900; font-size:clamp(28px,4.5vw,54px);color:#fff;line-height:1.1;max-width:820px} .article-hero-meta{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:12px} .article-hero-author{font-family:var(--font-body);font-size:14px;color:rgba(255,255,255,.65)} .article-hero-author strong{color:#fff} .article-hero-date,.article-hero-read{font-size:12px;color:rgba(255,255,255,.5);letter-spacing:1px} .article-body{padding:72px 0 80px;background:var(--bg)} .article-layout{display:grid;grid-template-columns:1fr 300px;gap:64px;align-items:start} .article-content p{font-family:var(--font-body);font-size:16px;line-height:1.85; color:var(--text-muted);margin-bottom:22px} .article-content h2{font-family:var(--font-head);font-weight:900;font-size:26px; color:var(--text);margin:40px 0 16px} .article-pullquote{border-left:3px solid var(--gold);padding:16px 0 16px 24px;margin:36px 0} .article-pullquote p{font-family:var(--font-body); font-size:19px;color:var(--text);line-height:1.6;margin:0} .article-inline-img{width:100%;aspect-ratio:16/9;object-fit:cover; object-position:center 30%;margin:32px 0;filter:brightness(.9);display:block} .article-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:40px; padding-top:32px;border-top:1px solid var(--border)} .article-tag{font-family:var(--font-head);font-weight:700;font-size:10px; letter-spacing:2px;text-transform:uppercase;color:var(--gold); border:1px solid var(--border);padding:5px 12px;transition:border-color .18s,background .18s} .article-tag:hover{border-color:var(--gold);background:var(--gold-dim)} .article-sidebar{position:sticky;top:88px;display:flex;flex-direction:column;gap:28px} .sidebar-block{border:1px solid var(--border);padding:24px;background:var(--surface)} .sidebar-block h4{font-family:var(--font-head);font-weight:700;font-size:10px; letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-bottom:16px} .sidebar-article{display:flex;gap:12px;margin-bottom:14px;align-items:flex-start} .sidebar-article:last-child{margin-bottom:0} .sidebar-article-img{width:60px;height:60px;object-fit:cover;object-position:center 30%;flex-shrink:0} .sidebar-article-title{font-family:var(--font-head);font-weight:700; font-size:13px;color:var(--text);line-height:1.3;display:block} .sidebar-article-title:hover{color:var(--gold)} .sidebar-article-date{font-size:11px;color:var(--text-muted);margin-top:3px} .sidebar-share{display:flex;gap:8px} .share-btn{flex:1;padding:9px 0;border:1px solid var(--border);background:none; display:flex;align-items:center;justify-content:center;cursor:pointer; color:var(--text-muted);transition:border-color .18s,color .18s} .share-btn.copied{border-color:var(--gold);color:var(--gold)} .share-btn:hover{border-color:var(--gold);color:var(--gold)} .sidebar-author-img{width:100%;aspect-ratio:3/2;object-fit:cover; object-position:center 20%;margin-bottom:12px;filter:grayscale(60%);display:block} .sidebar-author-name{font-family:var(--font-head);font-weight:700; font-size:14px;color:var(--text);margin-bottom:4px} .sidebar-author-role{font-family:var(--font-body);font-size:12px; color:var(--gold);letter-spacing:2px;text-transform:uppercase;margin-bottom:10px} .sidebar-author-bio{font-size:14px;color:var(--text-muted);line-height:1.6} /* ── ARTICLES LIST ── */ .articles-list-controls{display:flex;justify-content:space-between; align-items:center;margin-bottom:36px;flex-wrap:wrap;gap:16px} .articles-count{font-size:13px;color:var(--text-muted);letter-spacing:1px} .articles-page-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px} /* ── COMMENTS ── */ .article-comments{background:var(--bg-alt);padding:72px 0 80px} .comments-list{margin-bottom:48px} .comment{display:flex;gap:16px;padding:24px 0;border-bottom:1px solid var(--border)} .comment:first-child{border-top:1px solid var(--border)} .comment-avatar{width:44px;height:44px;border-radius:50%;flex-shrink:0; background:var(--gold);display:flex;align-items:center;justify-content:center; font-family:var(--font-head);font-weight:900;font-size:16px;color:#2E2A26} .comment-body{flex:1} .comment-header{display:flex;align-items:baseline;gap:12px;margin-bottom:6px;flex-wrap:wrap} .comment-author{font-family:var(--font-head);font-weight:700;font-size:15px;color:var(--text)} .comment-date{font-size:11px;color:var(--text-muted)} .comment-text{font-family:var(--font-body);font-size:15px; color:var(--text-muted);line-height:1.75} .comment-reply{font-family:var(--font-head);font-weight:700;font-size:10px; letter-spacing:2px;text-transform:uppercase;color:var(--gold); background:none;border:none;margin-top:8px;padding:0;transition:opacity .18s} .comment-reply:hover{opacity:.7} .comment-form-wrap{max-width:680px} .comment-form-wrap h3{font-family:var(--font-head);font-weight:900; font-size:24px;color:var(--text);margin-bottom:6px} .comment-subtext{font-size:14px;color:var(--text-muted);margin-bottom:28px} .no-comments{color:var(--text-muted);padding:20px 0} .empty-state{text-align:center;padding:60px 20px;color:var(--text-muted);} /* ════════════ ADMIN ════════════ */ .admin-wrap{min-height:100vh;background:#211E1A;color:#E6E2D3;font-family:var(--font-body)} .admin-login{min-height:100vh;display:flex;align-items:center;justify-content:center; background:#211E1A;padding:20px} .admin-login-box{width:100%;max-width:400px;background:#35302B; border:1px solid #46403A;padding:48px 40px;text-align:center} .admin-login-box h2{font-family:var(--font-head);font-size:22px;color:#E6E2D3;margin-bottom:8px} .admin-login-box p{font-size:13px;color:#A8A296;margin-bottom:32px} .admin-login-box .logo{justify-content:center;margin-bottom:28px} .admin-login-box .form-group label{color:#B3C10E} .admin-login-box .form-group input{background:transparent;border-bottom-color:#46403A; color:#E6E2D3;text-align:center;letter-spacing:4px;font-size:18px} .admin-login-error{color:#e05555;font-size:13px;margin-top:16px;min-height:20px} .admin-panel{display:flex;min-height:100vh} .admin-sidebar{width:220px;flex-shrink:0;background:#2E2A26;border-right:1px solid #3A352F; display:flex;flex-direction:column;position:fixed;top:0;bottom:0;left:0;z-index:100;overflow-y:auto} .admin-brand{padding:20px 20px 24px;border-bottom:1px solid #3A352F} .admin-brand .logo-name,.admin-brand .logo-sub{color:#E6E2D3} .admin-nav{flex:1;padding:16px 0;display:flex;flex-direction:column;align-items:stretch} .admin-nav-item{display:flex;align-items:center;gap:12px;padding:11px 20px;width:100%;justify-content:flex-start;box-sizing:border-box; font-family:var(--font-head);font-weight:700;font-size:12px;letter-spacing:1.5px; text-transform:uppercase;color:#A8A296;transition:color .18s,background .18s; border:none;background:none;width:100%;text-align:left} .admin-nav-item:hover{color:#E6E2D3;background:rgba(255,255,255,.04)} .admin-nav-item.active{color:#B3C10E;background:rgba(179,193,14,.10); border-left:2px solid #B3C10E;padding-left:18px} .nav-icon{font-size:15px;width:18px;text-align:center} .admin-nav-badge{margin-left:auto;background:#e05555;color:#fff; font-size:10px;padding:1px 6px;border-radius:10px;font-weight:700} .admin-sidebar-footer{padding:16px 0;border-top:1px solid #3A352F} .admin-sidebar-footer .admin-nav-item{color:#8A8478} .admin-main{flex:1;margin-left:220px;display:flex;flex-direction:column;min-height:100vh} .admin-topbar{padding:0 32px;height:60px;background:#2E2A26;border-bottom:1px solid #3A352F; display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:50} .admin-topbar-title{font-family:var(--font-head);font-weight:900;font-size:18px;color:#E6E2D3} .admin-topbar-actions{display:flex;gap:10px} .admin-content{padding:32px;flex:1} .admin-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:32px} .admin-stat-card{background:#35302B;border:1px solid #46403A;padding:24px;text-align:center} .admin-stat-num{display:block;font-family:var(--font-head);font-weight:900; font-size:40px;color:#B3C10E;line-height:1} .admin-stat-label{display:block;font-size:11px;letter-spacing:2px; text-transform:uppercase;color:#8A8478;margin-top:6px} .admin-stat-card.alert .admin-stat-num{color:#e05555} .admin-recent-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px} .admin-recent-block{background:#35302B;border:1px solid #46403A;padding:24px} .admin-recent-block h4{font-family:var(--font-head);font-weight:700;font-size:11px; letter-spacing:3px;text-transform:uppercase;color:#B3C10E;margin-bottom:16px} .admin-recent-item{display:flex;justify-content:space-between;align-items:flex-start; padding:10px 0;border-bottom:1px solid #3A352F;gap:12px} .admin-recent-item:last-child{border-bottom:none} .admin-recent-name{font-size:13px;color:#E6E2D3;font-weight:600} .admin-recent-sub{font-size:11px;color:#8A8478;margin-top:2px} .admin-recent-badge{font-size:10px;padding:2px 8px;background:rgba(229,85,85,.15); color:#e05555;border:1px solid rgba(229,85,85,.3);white-space:nowrap;flex-shrink:0} .admin-recent-badge.read{background:rgba(255,255,255,.05);color:#8A8478;border-color:#46403A} .admin-table-wrap{background:#35302B;border:1px solid #46403A;overflow:hidden} .admin-table-controls{display:flex;justify-content:space-between;align-items:center; padding:16px 20px;border-bottom:1px solid #46403A;flex-wrap:wrap;gap:12px} .admin-table-search{background:transparent;border:1px solid #46403A;color:#E6E2D3; padding:8px 14px;font-size:13px;font-family:var(--font-body);outline:none; min-width:200px;transition:border-color .18s} .admin-table-search:focus{border-color:#B3C10E} .admin-table-search::placeholder{color:#6E665C} .admin-table{width:100%;border-collapse:collapse} .admin-table th{text-align:left;padding:12px 16px;font-family:var(--font-head); font-weight:700;font-size:10px;letter-spacing:2px;text-transform:uppercase; color:#8A8478;border-bottom:1px solid #46403A;background:#27231F;white-space:nowrap} .admin-table td{padding:12px 16px;font-size:13px;color:#C5BFB2; border-bottom:1px solid #3A352F;vertical-align:middle} .admin-table tr:hover td{background:rgba(255,255,255,.02)} .admin-table tr:last-child td{border-bottom:none} .admin-table-img{width:48px;height:48px;object-fit:cover;object-position:center 30%;display:block} .admin-table-title{color:#E6E2D3;font-weight:600;font-size:14px} .admin-table-sub{color:#8A8478;font-size:11px;margin-top:2px} .admin-badge{display:inline-block;font-size:10px;padding:2px 8px;letter-spacing:1px; text-transform:uppercase;font-family:var(--font-head);font-weight:700} .admin-badge-green{background:rgba(110,159,69,.16);color:#6E9F45;border:1px solid rgba(110,159,69,.35)} .admin-badge-gold{background:rgba(179,193,14,.16);color:#B3C10E;border:1px solid rgba(179,193,14,.35)} .admin-badge-red{background:rgba(229,85,85,.15);color:#e05555;border:1px solid rgba(229,85,85,.3)} .admin-badge-gray{background:rgba(255,255,255,.05);color:#8A8478;border:1px solid #46403A} .admin-actions{display:flex;gap:6px;white-space:nowrap} .admin-action-btn{background:none;border:1px solid #46403A;color:#A8A296;padding:5px 10px; font-family:var(--font-head);font-weight:700;font-size:10px;letter-spacing:1px; text-transform:uppercase;transition:border-color .18s,color .18s} .admin-action-btn:hover{border-color:#B3C10E;color:#B3C10E} .admin-action-btn.danger:hover{border-color:#e05555;color:#e05555} .admin-action-btn.success:hover{border-color:#6E9F45;color:#6E9F45} .admin-empty{text-align:center;padding:48px;color:#6E665C;} .admin-modal-overlay{display:none;position:fixed;inset:0;z-index:500; background:rgba(0,0,0,.85);align-items:flex-start;justify-content:center; padding:40px 20px;overflow-y:auto} .admin-modal-overlay.open{display:flex} .admin-modal{background:#35302B;border:1px solid #46403A;width:100%;max-width:680px; margin:auto;display:flex;flex-direction:column} .admin-modal-header{display:flex;align-items:center;justify-content:space-between; padding:20px 24px;border-bottom:1px solid #46403A} .admin-modal-header h3{font-family:var(--font-head);font-weight:900;font-size:18px;color:#E6E2D3} .admin-modal-close{background:none;border:none;color:#8A8478;font-size:22px;transition:color .18s} .admin-modal-close:hover{color:#E6E2D3} .admin-modal-body{padding:28px 24px;overflow-y:auto;max-height:60vh} .admin-modal-footer{padding:16px 24px;border-top:1px solid #46403A; display:flex;justify-content:flex-end;gap:10px} .admin-modal .form-group label{color:#B3C10E} .admin-modal .form-group input,.admin-modal .form-group textarea,.admin-modal .form-group select{ background:transparent;border-bottom-color:#46403A;color:#E6E2D3} .admin-modal .form-group input:focus,.admin-modal .form-group textarea:focus, .admin-modal .form-group select:focus{border-bottom-color:#B3C10E} .admin-modal .form-group input::placeholder,.admin-modal .form-group textarea::placeholder{color:#6E665C} .admin-modal .form-group select option{background:#35302B;color:#E6E2D3} .admin-modal .form-group textarea{height:120px} .admin-img-preview{width:100%;max-height:180px;object-fit:cover;object-position:center 30%; display:none;margin-bottom:10px;border:1px solid #46403A} .admin-img-preview.show{display:block} .admin-toast{position:fixed;bottom:24px;right:24px;z-index:600; display:flex;flex-direction:column;gap:8px;pointer-events:none} .admin-toast-item{background:#35302B;border:1px solid #46403A;padding:12px 20px; font-size:13px;color:#E6E2D3;border-left:3px solid #B3C10E; pointer-events:all;opacity:0;transform:translateX(20px); transition:opacity .3s,transform .3s} .admin-toast-item.show{opacity:1;transform:none} .admin-toast-item.success{border-left-color:#6E9F45} .admin-toast-item.error{border-left-color:#e05555} .enquiry-detail{background:#27231F;border:1px solid #46403A; padding:20px;margin-top:8px;display:none} .enquiry-detail.open{display:block} .enquiry-detail-message{font-size:14px;color:#C5BFB2;line-height:1.75;white-space:pre-wrap} .settings-section{background:#35302B;border:1px solid #46403A;padding:28px;margin-bottom:24px} .settings-section h3{font-family:var(--font-head);font-size:16px;color:#E6E2D3;margin-bottom:20px} .settings-danger-zone .settings-section{border-color:rgba(229,85,85,.3)} /* ── RESPONSIVE ── */ @media(max-width:1100px){ .admin-stats-grid{grid-template-columns:1fr 1fr} .admin-recent-grid{grid-template-columns:1fr} } @media(max-width:960px){ nav{display:none} .works-grid,.works-page-grid{grid-template-columns:1fr 1fr} .team-grid{grid-template-columns:1fr 1fr} .about-grid{grid-template-columns:1fr;gap:48px} .contact-grid{grid-template-columns:1fr;gap:48px} .articles-grid,.articles-page-grid{grid-template-columns:1fr 1fr} .article-layout{grid-template-columns:1fr} .article-sidebar{position:static} .work-detail-layout{grid-template-columns:1fr} .footer-grid{grid-template-columns:1fr 1fr} .admin-sidebar{width:200px} .admin-main{margin-left:200px} } @media(max-width:600px){ .container{padding:0 20px} header{padding:0 20px} section{padding:64px 0} .works-grid,.works-page-grid,.articles-grid,.articles-page-grid{grid-template-columns:1fr} .team-grid{grid-template-columns:1fr 1fr} .footer-grid{grid-template-columns:1fr} .form-row{grid-template-columns:1fr} .admin-stats-grid{grid-template-columns:1fr 1fr} .admin-content{padding:16px} } /* ════════════════════════════════════════════════════ ADMIN PANEL — EXTENDED STYLES Appended to styles.css ════════════════════════════════════════════════════ */ /* ── PAGE HEADER ─────────────────────────────────── */ .admin-back-btn { background: none; border: none; color: #A8A296; cursor: pointer; font-family: var(--font-head); font-weight: 700; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 20px; padding: 0; display: inline-flex; align-items: center; gap: 6px; transition: color .18s; } .admin-back-btn:hover { color: #B3C10E; } .admin-page-header { margin-bottom: 32px; } .admin-page-header-row { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 16px; } .admin-page-title { font-family: var(--font-head); font-weight: 900; font-size: 26px; color: #E6E2D3; margin-bottom: 4px; } .admin-page-subtitle { font-size: 13px; color: #8A8478; letter-spacing: .5px; } .admin-page-actions { display: flex; gap: 10px; align-items: center; flex-shrink: 0; } .admin-section-label { font-family: var(--font-head); font-weight: 700; font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: #B3C10E; margin-bottom: 16px; } /* ── QUICK ACTIONS ───────────────────────────────── */ .admin-quick-actions { margin-bottom: 32px; } .admin-qa-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .admin-qa-grid .btn { justify-content: center; } /* ── RECENT ITEMS ────────────────────────────────── */ .admin-see-all { display: block; width: 100%; margin-top: 12px; padding: 10px; background: none; border: 1px solid #3A352F; color: #8A8478; cursor: pointer; font-family: var(--font-head); font-weight: 700; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; text-align: center; transition: border-color .18s, color .18s; } .admin-see-all:hover { border-color: #B3C10E; color: #B3C10E; } /* ── FILTER BAR ──────────────────────────────────── */ .admin-filter-bar { display: flex; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; } .admin-search-input { flex: 1; min-width: 220px; background: #27231F; border: 1px solid #46403A; color: #E6E2D3; padding: 10px 16px; font-size: 13px; font-family: var(--font-body); outline: none; transition: border-color .18s; } .admin-search-input:focus { border-color: #B3C10E; } .admin-search-input::placeholder { color: #6E665C; } .admin-filter-select { background: #27231F; border: 1px solid #46403A; color: #C5BFB2; padding: 10px 14px; font-size: 12px; font-family: var(--font-head); font-weight: 700; letter-spacing: 1px; outline: none; cursor: pointer; transition: border-color .18s; } .admin-filter-select:focus { border-color: #B3C10E; } .admin-filter-select option { background: #35302B; } /* ── CONTENT CARD GRID (Works) ───────────────────── */ .admin-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .admin-content-card { background: #35302B; border: 1px solid #46403A; overflow: hidden; transition: border-color .2s; } .admin-content-card:hover { border-color: #46403A; } .admin-card-thumb { position: relative; width: 100%; aspect-ratio: 16/9; overflow: hidden; background: #2E2A26; } .admin-card-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; filter: brightness(.8); transition: filter .25s; } .admin-content-card:hover .admin-card-thumb img { filter: brightness(.7); } .admin-card-featured-badge { position: absolute; top: 10px; left: 10px; background: #B3C10E; color: #2E2A26; font-family: var(--font-head); font-weight: 700; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; padding: 3px 9px; } .admin-card-body { padding: 18px 18px 20px; } .admin-card-meta { font-size: 11px; letter-spacing: 1px; color: #8A8478; text-transform: uppercase; margin-bottom: 7px; } .admin-card-title { font-family: var(--font-head); font-weight: 900; font-size: 17px; color: #E6E2D3; line-height: 1.25; margin-bottom: 4px; } .admin-card-sub { font-size: 12px; color: #8A8478; margin-bottom: 16px; } .admin-card-actions { display: flex; gap: 8px; flex-wrap: wrap; } .admin-del-btn { background: none; border: 1px solid #46403A; color: #8A8478; font-family: var(--font-head); font-weight: 700; cursor: pointer; transition: border-color .18s, color .18s; } .admin-del-btn:hover { border-color: #e05555; color: #e05555; } /* ── ARTICLE LIST ────────────────────────────────── */ .admin-article-list { display: flex; flex-direction: column; gap: 2px; } .admin-article-row { display: flex; gap: 0; background: #35302B; border: 1px solid #46403A; transition: border-color .18s; } .admin-article-row:hover { border-color: #46403A; } .admin-article-thumb { width: 160px; flex-shrink: 0; object-fit: cover; object-position: center 30%; filter: brightness(.8); display: block; } .admin-article-row-body { flex: 1; padding: 20px 22px; min-width: 0; } .admin-article-row-meta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; font-size: 11px; color: #8A8478; letter-spacing: .5px; } .admin-article-cat { font-family: var(--font-head); font-weight: 700; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: #B3C10E; } .admin-article-row-title { font-family: var(--font-head); font-weight: 900; font-size: 18px; color: #E6E2D3; line-height: 1.25; margin-bottom: 8px; } .admin-article-row-excerpt { font-size: 13px; color: #8A8478; line-height: 1.6; margin-bottom: 12px; } .admin-article-tags { display: flex; gap: 6px; flex-wrap: wrap; } .admin-article-tag { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: #8A8478; border: 1px solid #46403A; padding: 2px 8px; } .admin-article-row-actions { flex-shrink: 0; padding: 20px 18px 20px 0; display: flex; flex-direction: column; gap: 8px; justify-content: flex-start; align-items: flex-end; } .admin-featured-pill { font-family: var(--font-head); font-weight: 700; font-size: 10px; letter-spacing: 2px; color: #B3C10E; text-transform: uppercase; } /* ── FORM LAYOUT ─────────────────────────────────── */ .admin-form { display: flex; flex-direction: column; gap: 0; max-width: 900px; } .admin-form-section { background: #35302B; border: 1px solid #46403A; padding: 28px 28px 24px; margin-bottom: 2px; } .admin-form-section-title { font-family: var(--font-head); font-weight: 900; font-size: 14px; color: #E6E2D3; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid #46403A; } .admin-form-hint { font-size: 12px; color: #8A8478; line-height: 1.6; margin-bottom: 18px; } .admin-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; } .admin-form .form-group label { color: #B3C10E; } .admin-form .form-group input, .admin-form .form-group textarea, .admin-form .form-group select { background: #27231F; border: none; border-bottom: 1px solid #46403A; color: #E6E2D3; transition: border-color .18s; font-size: 15px; box-sizing: border-box; max-width: 100%; } .admin-form .form-group input:focus, .admin-form .form-group textarea:focus, .admin-form .form-group select:focus { border-bottom-color: #B3C10E; } .admin-form .form-group input::placeholder, .admin-form .form-group textarea::placeholder { color: #6E665C; } .admin-form .form-group select option { background: #35302B; color: #E6E2D3; } .admin-form-actions { display: flex; gap: 12px; justify-content: flex-end; padding: 20px 0; margin-top: 4px; } .admin-checkbox-label { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; color: #C5BFB2; } .admin-checkbox-label input[type="checkbox"] { width: 16px; height: 16px; accent-color: #B3C10E; border: none; padding: 0; background: none; cursor: pointer; } /* ── IMAGE UPLOAD ────────────────────────────────── */ .admin-img-upload-wrap { display: flex; flex-direction: column; gap: 14px; } .admin-img-upload-preview { width: 100%; max-height: 260px; object-fit: cover; object-position: center 30%; border: 1px solid #46403A; display: block; } .admin-img-upload-area { border: 2px dashed #46403A; padding: 32px; text-align: center; cursor: pointer; transition: border-color .18s; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 13px; color: #8A8478; } .admin-img-upload-area:hover { border-color: #B3C10E; color: #C5BFB2; } .admin-img-upload-icon { font-size: 28px; margin-bottom: 4px; } /* ── DETAIL CARD (comment / enquiry) ─────────────── */ .admin-detail-card { background: #35302B; border: 1px solid #46403A; max-width: 760px; } .admin-detail-header { display: flex; align-items: flex-start; gap: 20px; padding: 28px 28px 0; } .admin-detail-avatar { width: 52px; height: 52px; border-radius: 50%; background: #B3C10E; display: flex; align-items: center; justify-content: center; font-family: var(--font-head); font-weight: 900; font-size: 22px; color: #2E2A26; flex-shrink: 0; } .admin-detail-name { font-family: var(--font-head); font-weight: 900; font-size: 20px; color: #E6E2D3; margin-bottom: 4px; } .admin-detail-email { font-size: 13px; color: #A8A296; margin-bottom: 4px; } .admin-detail-date { font-size: 12px; color: #6E665C; margin-bottom: 8px; } .admin-detail-article-ref { padding: 14px 28px; border-bottom: 1px solid #46403A; font-size: 13px; } .admin-detail-body { padding: 24px 28px; border-bottom: 1px solid #46403A; } .admin-detail-message { font-family: var(--font-body); font-size: 15px; color: #C5BFB2; line-height: 1.8; white-space: pre-wrap; } .admin-detail-actions { display: flex; gap: 12px; flex-wrap: wrap; padding: 20px 28px; } /* ── TABLE (comments & enquiries list) ───────────── */ .admin-table-wrap { background: #35302B; border: 1px solid #46403A; overflow-x: auto; } .admin-table { width: 100%; border-collapse: collapse; min-width: 700px; } .admin-table thead th { text-align: left; padding: 13px 16px; font-family: var(--font-head); font-weight: 700; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: #8A8478; border-bottom: 1px solid #46403A; background: #27231F; white-space: nowrap; } .admin-table tbody td { padding: 13px 16px; font-size: 13px; color: #C5BFB2; border-bottom: 1px solid #3A352F; vertical-align: middle; } .admin-table tbody tr:last-child td { border-bottom: none; } .admin-table tbody tr:hover td { background: rgba(255,255,255,.025); } /* ── MISC ────────────────────────────────────────── */ .admin-action-btn { background: none; border: 1px solid #46403A; color: #A8A296; padding: 5px 11px; font-family: var(--font-head); font-weight: 700; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; transition: border-color .18s, color .18s; } .admin-action-btn:hover { border-color: #B3C10E; color: #B3C10E; } .admin-action-btn.danger:hover { border-color: #e05555; color: #e05555; } .admin-action-btn.success:hover { border-color: #6E9F45; color: #6E9F45; } .loading-state { display: flex; align-items: center; justify-content: center; min-height: 200px; } .loading-spinner { width: 30px; height: 30px; border: 2px solid #46403A; border-top-color: #B3C10E; border-radius: 50%; animation: spin .7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .admin-empty { text-align: center; padding: 48px 20px; color: #6E665C; font-size: 14px; } /* ── RESPONSIVE ──────────────────────────────────── */ @media (max-width: 1200px) { .admin-card-grid { grid-template-columns: 1fr 1fr; } .admin-qa-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 960px) { .admin-card-grid { grid-template-columns: 1fr; } .admin-form-grid { grid-template-columns: 1fr; } .admin-article-thumb { width: 110px; } .admin-article-row-actions { padding: 14px 14px 14px 0; } } @media (max-width: 768px) { .admin-sidebar { transform: translateX(-100%); transition: transform .2s; } .admin-sidebar.open { transform: none; } .admin-main { margin-left: 0; } .admin-qa-grid { grid-template-columns: 1fr; } .admin-article-row { flex-direction: column; } .admin-article-thumb { width: 100%; height: 160px; } .admin-article-row-actions { flex-direction: row; padding: 0 16px 16px; } .admin-detail-header { flex-direction: column; } } /* ── ADMIN ERROR STATE ────────────────────────────── */ .admin-error-state { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 300px; text-align: center; gap: 12px; padding: 40px; } .admin-error-title { font-family: var(--font-head); font-weight: 900; font-size: 18px; color: #e05555; } .admin-error-msg { font-size: 13px; color: #A8A296; max-width: 480px; line-height: 1.6; font-family: var(--font-body); margin-bottom: 8px; } .admin-error-hint { font-size: 12px; color: #6E665C; max-width: 480px; line-height: 1.6; } /* ── SEO FORM SECTION ────────────────────────────── */ .admin-seo-section { border-top: 2px solid #B3C10E; } .admin-seo-section .admin-form-section-title { color: #B3C10E; } .admin-char-counter { display: block; text-align: right; font-size: 11px; color: #8A8478; margin-top: 4px; font-family: var(--font-head); font-weight: 700; letter-spacing: 1px; } .admin-seo-preview { margin-top: 20px; padding-top: 20px; border-top: 1px solid #46403A; } .admin-seo-preview-label { font-family: var(--font-head); font-weight: 700; font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: #8A8478; margin-bottom: 10px; } .admin-seo-preview-box { background: #211E1A; border: 1px solid #46403A; padding: 16px 18px; max-width: 580px; } .admin-seo-preview-title { font-size: 18px; color: #B3C10E; margin-bottom: 3px; font-family: Arial, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .admin-seo-preview-url { font-size: 12px; color: #6E9F45; margin-bottom: 5px; font-family: Arial, sans-serif; } .admin-seo-preview-desc { font-size: 13px; color: #A8A296; line-height: 1.55; font-family: Arial, sans-serif; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ── IMAGE UPLOAD — STORAGE VERSION ─────────────────── */ .admin-upload-progress { display: flex; align-items: center; gap: 12px; margin-top: 8px; padding: 10px 14px; background: #27231F; border: 1px solid #46403A; } .admin-upload-progress-bar { height: 3px; background: #B3C10E; transition: width .4s ease; flex-shrink: 0; width: 0; } .admin-upload-progress-text { font-size: 12px; color: #A8A296; letter-spacing: 1px; font-family: var(--font-head); } /* ── OUR SERVICES (homepage) ─────────────────────────── */ .services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 8px; } .service-card { display: flex; align-items: center; gap: 18px; padding: 18px; background: var(--surface); border: 1px solid var(--border); transition: border-color .2s, transform .2s; text-decoration: none; } .service-card:hover { border-color: var(--gold); transform: translateY(-2px); } .service-card-img { width: 72px; height: 72px; flex-shrink: 0; object-fit: cover; object-position: center; border-radius: 2px; } .service-card-body { flex: 1; min-width: 0; } .service-card-title { font-family: var(--font-head); font-weight: 700; font-size: 16px; color: var(--text); margin-bottom: 5px; display: flex; align-items: center; gap: 8px; } .service-card-title .arrow { color: var(--gold); opacity: 0; transition: opacity .2s, transform .2s; transform: translateX(-4px); } .service-card:hover .service-card-title .arrow { opacity: 1; transform: translateX(0); } .service-card-desc { font-family: var(--font-body); font-size: 13px; color: var(--text-muted); line-height: 1.55; } @media (max-width: 768px) { .services-grid { grid-template-columns: 1fr; } } @media (max-width: 980px) and (min-width: 769px) { .services-grid { grid-template-columns: 1fr 1fr; } } /* ── ADMIN MINI CARDS (homepage services/team) ──────── */ .admin-mini-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 8px; } .admin-mini-card { display: flex; align-items: center; gap: 12px; background: #27231F; border: 1px solid #46403A; padding: 12px; } .admin-mini-img { width: 48px; height: 48px; object-fit: cover; flex-shrink: 0; border-radius: 2px; } .admin-mini-body { flex: 1; min-width: 0; } .admin-mini-title { font-family: var(--font-head); font-weight: 700; font-size: 14px; color: #E6E2D3; } .admin-mini-sub { font-size: 12px; color: #A8A296; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .admin-mini-actions { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; } @media (max-width: 768px) { .admin-mini-grid { grid-template-columns: 1fr; } } /* ── ADMIN SIDEBAR & HAMBURGER — AUTHORITATIVE LAYOUT ──────── */ #sidebarToggle { display: none; } /* hidden on desktop */ .admin-sidebar { width: 220px; display: flex; flex-direction: column; align-items: stretch; } .admin-nav { display: flex; flex-direction: column; align-items: stretch; } .admin-nav-item { width: 100%; display: flex; align-items: center; justify-content: flex-start; gap: 12px; box-sizing: border-box; text-align: left; } /* Desktop: sidebar always visible, no overlay */ @media (min-width: 769px) { .admin-sidebar { transform: none !important; } #sidebarToggle { display: none !important; } } /* Mobile / tablet: sidebar slides in, hamburger visible */ @media (max-width: 768px) { #sidebarToggle { display: flex !important; align-items: center; justify-content: center; } .admin-sidebar { transform: translateX(-100%); transition: transform .25s ease; box-shadow: 4px 0 24px rgba(0,0,0,.5); } .admin-sidebar.open { transform: translateX(0); } .admin-main { margin-left: 0; } /* dark scrim when sidebar open */ .admin-sidebar.open::after { content: ''; position: fixed; top: 0; left: 220px; right: 0; bottom: 0; background: rgba(0,0,0,.5); z-index: -1; } } /* ── ADMIN MOBILE OPTIMISATION ────────────────────────── */ * { box-sizing: border-box; } html, body { max-width: 100%; overflow-x: hidden; } .admin-wrap, .admin-panel { width: 100%; max-width: 100%; overflow-x: hidden; } .admin-form, .admin-form-section, .admin-form-grid, .admin-content, .admin-table-wrap { max-width: 100%; box-sizing: border-box; } .admin-form-grid { min-width: 0; } .admin-form-grid .form-group { min-width: 0; } .admin-form input, .admin-form textarea, .admin-form select { max-width: 100%; } @media (max-width: 768px) { /* main content fills full width, no leftover sidebar gap */ .admin-main { margin-left: 0 !important; width: 100% !important; } .admin-content { padding: 16px; width: 100%; box-sizing: border-box; } /* form grids collapse to single column so fields never overflow */ .admin-form-grid { grid-template-columns: 1fr !important; gap: 0 !important; } .admin-form-section { padding: 18px 16px; } .admin-form { max-width: 100%; } /* tables scroll horizontally inside their wrapper instead of breaking layout */ .admin-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .admin-topbar { padding: 0 16px; } .admin-filter-bar { flex-direction: column; } .admin-filter-bar input, .admin-filter-bar select { width: 100%; } .admin-card-grid { grid-template-columns: 1fr; } .admin-page-header-row { flex-direction: column; align-items: flex-start; } .admin-page-actions { width: 100%; } } /* ── ADMIN HERO BG + BANNER UPLOADERS ─────────────────── */ .admin-inline-label { display: block; font-family: var(--font-head); font-weight: 700; font-size: 13px; color: #B3C10E; margin-bottom: 10px; } .admin-hero-bg-preview { border: 1px solid #46403A; background: #211E1A; overflow: hidden; min-height: 60px; display: flex; align-items: center; justify-content: center; } .admin-hero-bg-empty { font-size: 12px; color: #8A8478; padding: 24px; text-align: center; } .admin-banner-row { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid #3A352F; } .admin-banner-row:last-child { border-bottom: none; } .admin-banner-label { flex: 1; font-family: var(--font-body); font-size: 14px; color: #E6E2D3; } .admin-banner-thumb { width: 90px; height: 50px; flex-shrink: 0; background: #211E1A; border: 1px solid #46403A; overflow: hidden; display: flex; align-items: center; justify-content: center; } /* hero video layer sits behind hero content */ #hero .hero-video { pointer-events: none; } /* ── MOBILE: banner fills fully under nav, no gap ────── */ @media (max-width: 768px) { .page-banner { height: 46vh; min-height: 300px; padding-top: 60px; /* header is shorter on mobile */ margin-top: 0; } .page-banner-bg { top: 0; } .page-body { padding-top: 0; } .page-body > section:first-child { padding-top: calc(64px + 60px); } } @media (max-width: 600px) { header { height: 60px; } } /* ── LOGO IMAGE (replaces text mark) ─────────────────── */ .logo{display:flex;align-items:center;gap:10px;max-width:60%;min-width:0} .logo-img{height:36px;width:auto;max-width:100%;object-fit:contain;display:block} .footer-logo-img{height:40px;width:auto;max-width:200px;object-fit:contain;display:block;margin-bottom:4px} .admin-brand .logo-img{height:30px;max-width:160px} .admin-login-box .logo-img{height:40px;max-width:200px;margin:0 auto} @media(max-width:900px){ .logo-img{height:32px} } @media(max-width:600px){ .logo{max-width:50%} .logo-img{height:26px} .footer-logo-img{height:34px} } @media(max-width:380px){ .logo-img{height:22px} } /* ════════════ COMPREHENSIVE RESPONSIVE PASS ════════════ */ /* Tablet (≤960px): 3-col grids → 2-col, big two-column layouts stack */ @media (max-width: 960px) { .works-grid, .works-page-grid, .articles-grid, .articles-page-grid { grid-template-columns: 1fr 1fr; } .team-grid { grid-template-columns: 1fr 1fr; } .about-grid { grid-template-columns: 1fr; gap: 40px; } .contact-grid { grid-template-columns: 1fr; gap: 40px; } .work-detail-layout { grid-template-columns: 1fr; gap: 40px; } .article-layout { grid-template-columns: 1fr; gap: 40px; } .article-sidebar { position: static; } .services-grid { grid-template-columns: 1fr 1fr; } } /* Small tablet / large phone (≤768px) */ @media (max-width: 768px) { nav { display: none; } /* header collapses to hamburger menu */ .hero-title { font-size: clamp(40px, 12vw, 72px); } .sec-title { font-size: clamp(30px, 7vw, 44px); } .about-stats { gap: 24px; flex-wrap: wrap; } .work-detail-hero, .article-hero { min-height: 360px; } .page-banner-title { font-size: clamp(30px, 8vw, 52px); } } /* Phone (≤600px) */ @media (max-width: 600px) { section { padding: 56px 0; } .works-grid, .works-page-grid, .articles-grid, .articles-page-grid { grid-template-columns: 1fr; } .team-grid { grid-template-columns: 1fr 1fr; gap: 16px; } .services-grid { grid-template-columns: 1fr; } .about-badge { width: 76px; height: 76px; bottom: -12px; right: -12px; } .about-stats { gap: 20px; } .stat-num { font-size: 30px; } .footer-grid { grid-template-columns: 1fr; gap: 28px; } .footer-bottom { flex-direction: column; align-items: flex-start; gap: 16px; } .hero-eyebrow { font-size: 10px; letter-spacing: 3px; } .hero-tagline { font-size: 15px; } .work-detail-title { font-size: clamp(28px, 8vw, 40px); } .article-hero-title { font-size: clamp(24px, 7vw, 36px); } .article-content p, .work-synopsis, .work-breakdown-text { font-size: 15px; } .article-hero-meta { gap: 12px; } .btn, .btn-submit, .hero-cta { padding: 12px 24px; font-size: 12px; } } /* Small phone (≤400px) */ @media (max-width: 400px) { .team-grid { grid-template-columns: 1fr; } .container { padding: 0 16px; } header { padding: 0 16px; } }