/*
Theme Name: Khadijah Issah Cleaning Agency
Theme URI: https://www.kicleaningagency.com
Description: A luxury bilingual (Arabic/English) website theme for
Khadijah Issah Cleaning & Nanny Agency, Riyadh, Saudi Arabia.
Features a dark hero, gold accent palette, Cormorant Garamond
serif typography, RTL support, photo gallery with lightbox,
video section, and a fully responsive layout.
Version: 1.0.0
Author: Khadijah Issah
Author URI: https://www.kicleaningagency.com
License: All Rights Reserved
License URI: https://www.kicleaningagency.com
Text Domain: ki-cleaning-agency
Tags: luxury, bilingual, arabic, rtl, cleaning, nanny,
services, gold, responsive, gallery, two-columns
--- Contact ---
Email: khadijahissahcleaning@gmail.com
Phone/WhatsApp: +966 59 870 4792
Facebook: https://www.facebook.com/kicleaningagency
Website: https://www.kicleaningagency.com
--- Typography ---
Cormorant Garamond Headings & display text (luxury serif)
Jost Body text, English (modern geometric sans)
Cairo Body text, Arabic / RTL layout
Note: Font tags must remain inside the HTML section.
--- Color Palette ---
Primary Teal #0D2B27
Mid Teal #1A4038
Deep Teal #091C19
Gold #B8922A
Gold Light #D4AA52
Gold Deep #8C6D18
Cream (bg) #FAF7F2
Sand #EDE0C8
Ink (text) #1A1612
--- Sections ---
1. CSS Custom Properties (design tokens)
2. Reset & Base
3. Typography
4. Header & Navigation
5. Buttons
6. Hero Section
7. Announcement Strip
8. Section Headings
9. Services Grid
10. Why Us
11. How It Works (Steps)
12. Testimonials
13. Photo Gallery & Lightbox
14. Video Section & Modal
15. Contact Section & Form
16. Footer
17. Social Icons & Floating WhatsApp
18. Responsive Breakpoints
--- File Structure ---
style.css This file — all website styles
index.html Main HTML — link this CSS in
images/ Place your photo assets here
videos/ Place your video assets here
--- Changelog ---
1.0.0 2026-07-01 Initial release
*/
/* ==========================================================
Google Fonts
Keep these tags inside your HTML :
========================================================== */
:root{
--teal:#0D2B27;
--teal-mid:#1A4038;
--teal-deep:#091C19;
--sand:#EDE0C8;
--sand-light:#F7F2EA;
--gold:#B8922A;
--gold-light:#D4AA52;
--gold-deep:#8C6D18;
--cream:#FAF7F2;
--ink:#1A1612;
--ink-soft:#4A4238;
--ink-muted:#8A7E72;
--line: rgba(26,22,18,0.1);
--white:#FFFFFF;
--radius: 4px;
--radius-lg: 8px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
background:var(--cream);
color:var(--ink);
font-family:'Jost', sans-serif;
line-height:1.7;
overflow-x:hidden;
font-weight:300;
}
body[dir="rtl"]{ font-family:'Cairo', sans-serif; font-weight:300; }
body[dir="rtl"] .display{ font-family:'Cairo', sans-serif; font-weight:700; }
.display{ font-family:'Cormorant Garamond', serif; font-weight:600; letter-spacing:0.02em; }
[data-lang]{ display:none; }
body.lang-en [data-lang="en"]{ display:revert; }
body.lang-ar [data-lang="ar"]{ display:revert; }
body.lang-en span[data-lang="en"]{ display:inline; }
body.lang-ar span[data-lang="ar"]{ display:inline; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
ul{ list-style:none; }
.wrap{ max-width:1180px; margin:0 auto; padding:0 28px; }
/* ---------- Header ---------- */
header{
position:sticky; top:0; z-index:100;
background:rgba(250,247,242,0.96);
backdrop-filter:blur(16px);
border-bottom:1px solid rgba(184,146,42,0.2);
}
/* Thin gold top line */
header::before{
content:""; display:block; height:2px;
background:linear-gradient(90deg, transparent, var(--gold), var(--gold-light), var(--gold), transparent);
}
.nav{
display:flex; align-items:center; justify-content:space-between;
padding:16px 0;
}
.brand{ display:flex; align-items:center; gap:14px; }
.brand-mark{
width:44px; height:44px; border-radius:0;
background:transparent;
display:flex; align-items:center; justify-content:center;
flex-shrink:0;
}
.brand-mark svg{ width:44px; height:44px; }
.brand-name{
font-family:'Cormorant Garamond', serif;
font-size:1.1rem; font-weight:600; line-height:1.15;
letter-spacing:0.06em; text-transform:uppercase;
}
.brand-name small{
display:block; font-size:0.62rem; font-weight:400;
color:var(--gold); letter-spacing:0.18em; text-transform:uppercase;
font-family:'Jost', sans-serif;
}
.nav-links{ display:flex; gap:36px; align-items:center; }
.nav-links a{
font-size:0.78rem; font-weight:500; color:var(--ink-soft);
letter-spacing:0.12em; text-transform:uppercase;
transition:color .2s; position:relative;
}
.nav-links a::after{
content:""; position:absolute; bottom:-4px; left:0; width:0; height:1px;
background:var(--gold); transition:width .3s ease;
}
.nav-links a:hover{ color:var(--ink); }
.nav-links a:hover::after{ width:100%; }
.nav-actions{ display:flex; align-items:center; gap:14px; }
.lang-toggle{
display:flex; border:1px solid rgba(184,146,42,0.3); border-radius:0; padding:2px; gap:2px;
background:transparent;
}
.lang-toggle button{
font-size:0.7rem; font-weight:600; padding:6px 12px; border-radius:0;
color:var(--ink-muted); letter-spacing:0.08em;
}
.lang-toggle button.active{ background:var(--teal); color:var(--gold-light); }
.btn{
display:inline-flex; align-items:center; gap:8px;
padding:13px 28px; border-radius:0;
font-weight:500; font-size:0.78rem;
letter-spacing:0.14em; text-transform:uppercase;
transition:all .3s ease;
}
.btn-primary{
background:var(--gold); color:var(--white);
box-shadow:0 4px 20px rgba(184,146,42,0.3);
position:relative; overflow:hidden;
}
.btn-primary::before{
content:""; position:absolute; inset:0;
background:linear-gradient(135deg, rgba(255,255,255,0.1), transparent);
}
.btn-primary:hover{ background:var(--gold-deep); transform:translateY(-1px); box-shadow:0 8px 28px rgba(184,146,42,0.4); }
.btn-ghost{ border:1px solid var(--teal); color:var(--teal); }
.btn-ghost:hover{ background:var(--teal); color:var(--gold-light); }
.menu-btn{ display:none; }
/* ---------- Hero ---------- */
.hero{
position:relative;
padding:88px 0 70px;
background:
radial-gradient(circle at 85% 18%, rgba(194,131,46,0.14), transparent 45%),
var(--sand-light);
overflow:hidden;
}
.sadu-strip{
position:absolute; inset-inline:0; bottom:0; height:10px;
background: repeating-linear-gradient(90deg, var(--teal) 0 22px, var(--gold) 22px 30px, var(--teal-deep) 30px 52px);
opacity:0.9;
}
.hero-grid{
display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px; align-items:center;
}
.eyebrow{
display:inline-flex; align-items:center; gap:8px;
font-size:0.78rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
color:var(--gold-deep); background:rgba(194,131,46,0.12);
padding:8px 14px; border-radius:999px; margin-bottom:22px;
}
body[dir="rtl"] .eyebrow{ letter-spacing:0; text-transform:none; }
.eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--gold); }
.hero h1{
font-size:clamp(2.3rem, 4vw, 3.5rem);
line-height:1.08;
margin-bottom:22px;
}
.hero h1 em{ font-style:normal; color:var(--teal); }
.hero p.lead{
font-size:1.08rem; color:var(--ink-soft); max-width:480px; margin-bottom:32px;
}
.hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:38px; }
.trust-row{ display:flex; gap:28px; flex-wrap:wrap; }
.trust-item{ display:flex; align-items:center; gap:10px; }
.trust-item svg{ width:20px; height:20px; color:var(--teal); flex-shrink:0; }
.trust-item span{ font-size:0.86rem; font-weight:600; color:var(--ink-soft); }
.hero-art{
position:relative; aspect-ratio:1/1.05; border-radius:28px;
background:linear-gradient(155deg, var(--teal) 0%, var(--teal-deep) 100%);
overflow:hidden;
display:flex; align-items:center; justify-content:center;
}
.hero-art svg{ width:78%; height:78%; }
.hero-art::after{
content:""; position:absolute; inset:0;
background: repeating-linear-gradient(135deg, rgba(255,255,255,0.035) 0 2px, transparent 2px 26px);
}
.hero-badge{
position:absolute; bottom:18px; inset-inline-start:18px;
background:var(--white); border-radius:14px; padding:14px 18px;
display:flex; align-items:center; gap:12px;
box-shadow:0 14px 30px rgba(23,53,49,0.22);
}
.hero-badge .num{ font-family:'Fraunces', serif; font-size:1.6rem; font-weight:700; color:var(--teal); }
.hero-badge .lbl{ font-size:0.72rem; color:var(--ink-soft); font-weight:600; max-width:110px; line-height:1.25; }
/* ---------- Logos / strip ---------- */
.strip{
background:var(--gold); color:var(--white); padding:14px 0;
background: linear-gradient(90deg, var(--gold-deep), var(--gold), var(--gold-light), var(--gold), var(--gold-deep));
}
.strip .wrap{ display:flex; justify-content:space-around; flex-wrap:wrap; gap:14px; }
.strip-item{ font-size:0.72rem; font-weight:500; letter-spacing:0.14em; text-transform:uppercase; opacity:0.95; display:flex; align-items:center; gap:8px; color:var(--teal-deep); }
.strip-item svg{ width:15px; height:15px; }
/* ---------- Section heading ---------- */
.section{ padding:100px 0; }
.section.alt{ background:var(--sand-light); }
.section.dark{ background:var(--teal-deep); color:var(--white); }
.section.dark .sec-head p{ color:rgba(255,255,255,0.6); }
.section.dark .sec-head h2{ color:var(--white); }
.section.dark .sec-eyebrow{ color:var(--gold-light); }
.sec-head{ max-width:600px; margin-bottom:56px; }
.sec-eyebrow{
font-size:0.68rem; font-weight:500; color:var(--gold);
letter-spacing:0.22em; text-transform:uppercase;
margin-bottom:16px; display:flex; align-items:center; gap:12px;
}
.sec-eyebrow::before, .sec-eyebrow::after{
content:""; flex:0 0 28px; height:1px; background:var(--gold); opacity:0.5;
}
body[dir="rtl"] .sec-eyebrow{ letter-spacing:0; text-transform:none; }
body[dir="rtl"] .sec-eyebrow::before, body[dir="rtl"] .sec-eyebrow::after{ display:none; }
.sec-head h2{
font-size:clamp(2rem, 3.5vw, 3rem);
margin-bottom:16px; letter-spacing:0.01em;
font-family:'Cormorant Garamond', serif; font-weight:600;
}
.sec-head p{ color:var(--ink-muted); font-size:0.97rem; line-height:1.8; font-weight:300; }
/* ---------- Services ---------- */
.services-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:2px; }
.service-card{
background:var(--white); border-radius:0; padding:42px 36px;
border:none; border-top:2px solid transparent;
transition:all .35s ease; position:relative; overflow:hidden;
}
.service-card::before{
content:""; position:absolute; top:0; left:0; right:0; height:2px;
background:linear-gradient(90deg, var(--gold-deep), var(--gold-light));
transform:scaleX(0); transform-origin:left; transition:transform .35s ease;
}
.service-card:hover::before{ transform:scaleX(1); }
.service-card:hover{ transform:translateY(-6px); box-shadow:0 24px 48px rgba(13,43,39,0.12); }
.service-icon{
width:56px; height:56px; border-radius:0;
border:1px solid rgba(184,146,42,0.3);
display:flex; align-items:center; justify-content:center; margin-bottom:24px;
background:rgba(184,146,42,0.05);
}
.service-icon svg{ width:24px; height:24px; color:var(--gold); }
.service-card h3{
font-size:1.3rem; margin-bottom:12px; font-weight:600;
font-family:'Cormorant Garamond', serif; letter-spacing:0.02em;
}
.service-card p{ color:var(--ink-muted); font-size:0.9rem; margin-bottom:20px; font-weight:300; line-height:1.8; }
.service-card ul{ display:flex; flex-direction:column; gap:10px; }
.service-card li{ font-size:0.83rem; color:var(--ink-soft); display:flex; gap:10px; align-items:flex-start; font-weight:400; }
.service-card li svg{ width:12px; height:12px; color:var(--gold); flex-shrink:0; margin-top:4px; }
/* ---------- Why us ---------- */
.why-grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:72px; align-items:center; }
.why-list{ display:flex; flex-direction:column; gap:32px; }
.why-item{ display:flex; gap:22px; }
.why-num{
font-family:'Cormorant Garamond', serif; font-size:1.1rem; font-weight:600; color:var(--gold);
width:40px; height:40px; border-radius:0; border:1px solid rgba(184,146,42,0.4);
display:flex; align-items:center; justify-content:center; flex-shrink:0;
background:rgba(184,146,42,0.05);
}
.why-item h4{ font-size:1.08rem; margin-bottom:6px; font-weight:500; letter-spacing:0.02em; }
.why-item p{ color:var(--ink-muted); font-size:0.88rem; font-weight:300; line-height:1.8; }
.why-visual{
border-radius:0; background:var(--teal-deep); position:relative; overflow:hidden;
aspect-ratio:4/5; display:flex; align-items:center; justify-content:center;
border:1px solid rgba(184,146,42,0.2);
}
.why-visual::after{
content:""; position:absolute; inset:0;
background: linear-gradient(135deg, rgba(184,146,42,0.08) 0%, transparent 60%);
}
.why-visual svg{ width:62%; }
/* ---------- How it works ---------- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative; }
.step{ text-align:start; position:relative; padding:40px 32px; border-right:1px solid var(--line); }
.step:last-child{ border-right:none; }
.step-circle{
width:52px; height:52px; border-radius:0;
background:transparent;
border:1px solid rgba(184,146,42,0.4); color:var(--gold);
display:flex; align-items:center; justify-content:center;
font-family:'Cormorant Garamond', serif; font-weight:600; font-size:1.3rem;
margin-bottom:20px;
}
.step h4{ font-size:1rem; margin-bottom:8px; font-weight:500; letter-spacing:0.02em; }
.step p{ font-size:0.84rem; color:var(--ink-muted); font-weight:300; line-height:1.8; }
/* ---------- Testimonials ---------- */
.test-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px; }
.test-card{
background:var(--white); border-radius:0; padding:40px 34px;
border:none; position:relative;
}
.test-card::before{
content:'\201C'; position:absolute; top:24px; right:28px;
font-family:'Cormorant Garamond', serif; font-size:5rem; line-height:1;
color:rgba(184,146,42,0.12); font-weight:600;
}
body[dir="rtl"] .test-card::before{ left:28px; right:auto; content:'\201D'; }
.stars{ display:flex; gap:3px; margin-bottom:18px; }
.stars svg{ width:14px; height:14px; color:var(--gold); }
.test-card p{
font-size:0.95rem; color:var(--ink-soft); margin-bottom:24px;
line-height:1.8; font-weight:300; font-style:italic;
font-family:'Cormorant Garamond', serif; font-size:1.05rem;
}
.test-author{ display:flex; align-items:center; gap:14px; }
.test-avatar{
width:42px; height:42px; border-radius:0;
border:1px solid rgba(184,146,42,0.4);
background:rgba(184,146,42,0.08);
display:flex; align-items:center; justify-content:center; font-weight:600; color:var(--gold);
font-family:'Cormorant Garamond', serif; font-size:1.1rem;
}
.test-author .name{ font-size:0.85rem; font-weight:500; letter-spacing:0.04em; }
.test-author .loc{ font-size:0.75rem; color:var(--ink-muted); letter-spacing:0.06em; }
/* ---------- CTA / Contact ---------- */
.contact{
background: linear-gradient(150deg, var(--teal-deep) 0%, #0A2520 100%);
color:var(--white); position:relative; overflow:hidden;
}
.contact::before{
content:""; position:absolute; top:-50%; right:-10%;
width:600px; height:600px;
background: radial-gradient(circle, rgba(184,146,42,0.08) 0%, transparent 65%);
pointer-events:none;
}
.contact .sec-head p{ color:rgba(255,255,255,0.6); }
.contact .sec-head h2{ color:var(--white); }
.contact .sec-eyebrow{ color:var(--gold-light); }
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:48px; }
.contact-info{ display:flex; flex-direction:column; gap:22px; }
.info-row{ display:flex; gap:14px; align-items:flex-start; }
.info-row svg{ width:20px; height:20px; color:#E3B873; flex-shrink:0; margin-top:2px; }
.info-row .label{ font-size:0.78rem; color:rgba(255,255,255,0.55); margin-bottom:3px; font-weight:600; }
.info-row .value{ font-size:0.97rem; font-weight:600; }
.form-card{
background:rgba(255,255,255,0.03); border:1px solid rgba(184,146,42,0.2);
border-radius:0; padding:40px;
position:relative;
}
.form-card::before{
content:""; position:absolute; top:0; left:0; right:0; height:2px;
background:linear-gradient(90deg, var(--gold-deep), var(--gold-light), var(--gold-deep));
}
.field{ margin-bottom:18px; }
.field label{
display:block; font-size:0.68rem; font-weight:500; margin-bottom:9px;
color:rgba(255,255,255,0.6); letter-spacing:0.16em; text-transform:uppercase;
}
.field input, .field select, .field textarea{
width:100%; padding:13px 16px; border-radius:0;
border:none; border-bottom:1px solid rgba(255,255,255,0.15);
background:rgba(255,255,255,0.04);
color:var(--white); font-family:inherit; font-size:0.92rem; font-weight:300;
transition:border-color .25s;
}
.field input:focus, .field select:focus, .field textarea:focus{
outline:none; border-bottom-color:var(--gold-light);
}
.field input::placeholder, .field textarea::placeholder{ color:rgba(255,255,255,0.3); }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.form-card .btn-primary{ width:100%; justify-content:center; margin-top:10px; }
.form-note{ font-size:0.75rem; color:rgba(255,255,255,0.4); margin-top:14px; text-align:center; letter-spacing:0.06em; }
/* ---------- Footer ---------- */
footer{
background: var(--teal-deep);
color:rgba(255,255,255,0.55); padding:70px 0 30px;
border-top:1px solid rgba(184,146,42,0.2);
}
footer::before{
content:""; display:block; height:2px; margin-bottom:70px;
background:linear-gradient(90deg, transparent, var(--gold), var(--gold-light), var(--gold), transparent);
margin-top:-70px;
}
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:48px; margin-bottom:48px; }
.foot-brand{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.foot-brand .brand-name{
color:var(--white); font-family:'Cormorant Garamond', serif;
font-size:1.05rem; font-weight:600; letter-spacing:0.06em;
}
footer p{ font-size:0.85rem; line-height:1.85; max-width:300px; font-weight:300; }
footer h5{
color:var(--gold-light); font-size:0.68rem; margin-bottom:18px;
font-weight:500; letter-spacing:0.2em; text-transform:uppercase;
}
footer ul{ display:flex; flex-direction:column; gap:12px; }
footer ul a{ font-size:0.84rem; transition:color .2s; font-weight:300; }
footer ul a:hover{ color:var(--gold-light); }
.foot-bottom{
border-top:1px solid rgba(184,146,42,0.15); padding-top:24px;
display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
font-size:0.75rem; letter-spacing:0.06em;
}
/* ---------- Responsive ---------- */
@media(max-width:920px){
.nav-links{ display:none; }
.menu-btn{ display:flex; width:38px; height:38px; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:10px; }
.hero-grid{ grid-template-columns:1fr; }
.hero-art{ order:-1; max-width:340px; margin:0 auto; }
.services-grid{ grid-template-columns:1fr 1fr; }
.why-grid{ grid-template-columns:1fr; }
.why-visual{ order:-1; max-width:320px; margin:0 auto; aspect-ratio:1/1; }
.steps{ grid-template-columns:1fr 1fr; }
.test-grid{ grid-template-columns:1fr; }
.contact-grid{ grid-template-columns:1fr; }
.foot-grid{ grid-template-columns:1fr; }
}
@media(max-width:560px){
.services-grid{ grid-template-columns:1fr; }
.steps{ grid-template-columns:1fr; }
.field-row{ grid-template-columns:1fr; }
.hero-ctas{ flex-direction:column; align-items:stretch; }
.trust-row{ flex-direction:column; gap:12px; }
}
/* ---------- Social Icons ---------- */
.social-bar{
display:flex; gap:12px; margin-top:20px; flex-wrap:wrap;
}
.social-icon{
display:inline-flex; align-items:center; justify-content:center;
width:44px; height:44px; border-radius:12px;
transition:transform .22s ease, box-shadow .22s ease;
flex-shrink:0;
}
.social-icon:hover{ transform:translateY(-3px); box-shadow:0 8px 18px rgba(0,0,0,0.22); }
.social-icon svg{ width:22px; height:22px; }
.social-icon.whatsapp{ background:#25D366; }
.social-icon.facebook{ background:#1877F2; }
.social-icon.email{ background:var(--gold); }
.social-icon.website{ background:var(--teal); }
/* Floating WhatsApp button */
.wa-float{
position:fixed; bottom:28px; inset-inline-end:28px; z-index:200;
width:58px; height:58px; border-radius:50%;
background:#25D366; display:flex; align-items:center; justify-content:center;
box-shadow:0 6px 22px rgba(37,211,102,0.45);
transition:transform .2s ease, box-shadow .2s ease;
}
.wa-float:hover{ transform:scale(1.1); box-shadow:0 10px 28px rgba(37,211,102,0.55); }
.wa-float svg{ width:28px; height:28px; }
/* Social strip in hero / contact info */
.social-inline{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.social-inline a{
display:inline-flex; align-items:center; gap:7px;
padding:8px 14px; border-radius:999px; font-size:0.82rem; font-weight:700;
transition:transform .2s ease, opacity .2s;
}
.social-inline a:hover{ transform:translateY(-2px); opacity:.9; }
.social-inline a svg{ width:17px; height:17px; flex-shrink:0; }
.social-inline a.si-wa{ background:#25D366; color:#fff; }
.social-inline a.si-fb{ background:#1877F2; color:#fff; }
.social-inline a.si-em{ background:var(--gold); color:#fff; }
.social-inline a.si-web{ background:var(--teal); color:#fff; }
/* Footer icon row */
.foot-socials{ display:flex; gap:10px; margin-top:18px; }
.foot-socials a{
width:38px; height:38px; border-radius:10px;
display:flex; align-items:center; justify-content:center;
transition:transform .2s, opacity .2s;
}
.foot-socials a:hover{ transform:translateY(-3px); opacity:.85; }
.foot-socials a svg{ width:18px; height:18px; }
.foot-socials a.whatsapp{ background:#25D366; }
.foot-socials a.facebook{ background:#1877F2; }
.foot-socials a.email{ background:var(--gold); }
.foot-socials a.website{ background:var(--teal); border:1px solid rgba(255,255,255,0.2); }
/* ---------- Gallery ---------- */
.gallery-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:14px;
}
.gallery-item{
position:relative; overflow:hidden; border-radius:16px;
background:var(--sand); cursor:pointer;
aspect-ratio:4/3;
}
.gallery-item.tall{ grid-row:span 2; aspect-ratio:unset; }
.gallery-item img{
width:100%; height:100%; object-fit:cover;
transition:transform .35s ease;
}
.gallery-item:hover img{ transform:scale(1.05); }
.gallery-overlay{
position:absolute; inset:0;
background:linear-gradient(to top, rgba(23,53,49,0.7) 0%, transparent 55%);
opacity:0; transition:opacity .3s ease;
display:flex; align-items:flex-end; padding:16px;
}
.gallery-item:hover .gallery-overlay{ opacity:1; }
.gallery-overlay span{ color:var(--white); font-size:0.82rem; font-weight:600; }
.gallery-placeholder{
width:100%; height:100%; min-height:180px;
display:flex; flex-direction:column;
align-items:center; justify-content:center; gap:10px;
color:var(--ink-soft);
background: repeating-linear-gradient(135deg, var(--sand) 0 10px, var(--sand-light) 10px 20px);
}
.gallery-placeholder svg{ width:32px; height:32px; opacity:.4; }
.gallery-placeholder small{ font-size:0.76rem; font-weight:600; opacity:.55; text-align:center; padding:0 10px; }
.lightbox{
display:none; position:fixed; inset:0; z-index:999;
background:rgba(23,32,27,0.94); backdrop-filter:blur(6px);
align-items:center; justify-content:center;
}
.lightbox.open{ display:flex; }
.lightbox img{ max-width:92vw; max-height:88vh; border-radius:12px; object-fit:contain; }
.lb-close{
position:absolute; top:20px; right:24px;
color:var(--white); font-size:2rem; font-weight:300; line-height:1;
cursor:pointer; background:none; border:none; font-family:inherit;
}
.lb-arr{
position:absolute; top:50%; transform:translateY(-50%);
color:var(--white); font-size:1.5rem; cursor:pointer;
background:rgba(255,255,255,0.12); border:none; border-radius:50%;
width:48px; height:48px; display:flex; align-items:center; justify-content:center;
font-family:inherit; transition:background .2s;
}
.lb-arr:hover{ background:var(--gold); }
.lb-prev{ left:18px; }
.lb-next{ right:18px; }
.lb-caption{
position:absolute; bottom:20px; left:50%; transform:translateX(-50%);
color:rgba(255,255,255,0.75); font-size:0.84rem; font-weight:600; white-space:nowrap;
}
.upload-notice{
margin-top:24px; padding:14px 20px;
background:rgba(194,131,46,0.1); border:1px dashed var(--gold);
border-radius:12px; font-size:0.84rem; color:var(--gold-deep);
display:flex; align-items:center; gap:10px; line-height:1.5;
}
.upload-notice svg{ width:18px; height:18px; flex-shrink:0; }
/* ---------- Videos ---------- */
.video-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.video-card{
border-radius:var(--radius); overflow:hidden;
background:var(--white); position:relative;
box-shadow:0 6px 20px rgba(35,32,27,0.09);
cursor:pointer; transition:transform .25s ease, box-shadow .25s ease;
}
.video-card:hover{ transform:translateY(-4px); box-shadow:0 14px 30px rgba(35,32,27,0.14); }
.video-thumb-wrap{
width:100%; aspect-ratio:16/9; overflow:hidden; position:relative;
background:linear-gradient(135deg, var(--teal-deep) 0%, var(--teal) 100%);
display:flex; align-items:center; justify-content:center;
}
.video-thumb-wrap img{ width:100%; height:100%; object-fit:cover; display:block; }
.play-btn{
position:absolute; width:58px; height:58px; border-radius:50%;
background:rgba(255,255,255,0.18); border:2px solid rgba(255,255,255,0.5);
display:flex; align-items:center; justify-content:center;
transition:background .25s ease, transform .25s ease;
}
.video-card:hover .play-btn{ background:var(--gold); border-color:var(--gold); transform:scale(1.1); }
.play-btn svg{ width:22px; height:22px; fill:var(--white); margin-left:4px; }
.video-meta{ padding:16px 18px; }
.video-meta h4{ font-size:0.97rem; font-weight:700; margin-bottom:5px; }
.video-meta p{ font-size:0.82rem; color:var(--ink-soft); }
.video-modal{
display:none; position:fixed; inset:0; z-index:1000;
background:rgba(0,0,0,0.92); align-items:center; justify-content:center;
}
.video-modal.open{ display:flex; }
.video-modal iframe{ width:min(900px,94vw); aspect-ratio:16/9; border:none; border-radius:12px; }
.video-modal .vm-fb-link{
display:flex; flex-direction:column; align-items:center; gap:16px;
color:var(--white); text-align:center;
}
.video-modal .vm-fb-link p{ font-size:1.1rem; font-weight:600; }
.video-modal .vm-fb-link a{
background:var(--gold); color:var(--white); padding:14px 32px;
border-radius:999px; font-weight:700; font-size:1rem;
}
.vm-close{
position:absolute; top:18px; right:24px;
color:var(--white); font-size:2.2rem; cursor:pointer;
background:none; border:none; font-family:inherit; font-weight:300; line-height:1;
}
@media(max-width:920px){
.gallery-grid{ grid-template-columns:1fr 1fr; }
.gallery-item.tall{ grid-row:span 1; aspect-ratio:4/3; }
.video-grid{ grid-template-columns:1fr 1fr; }
}
@media(max-width:560px){
.gallery-grid{ grid-template-columns:1fr; }
.video-grid{ grid-template-columns:1fr; }
}
:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){ *{ transition:none !important; } }