/* ========================================================================== AL OFOQ AL MUZDAHER — site stylesheet (Luxury Upgrades & Lighter Palette) ►► DO NOT paste this back into Woodmart → Theme Settings → Custom CSS. It used to live there. Held in that field, Woodmart printed all 33 KB inline into the of every page — uncacheable, re-downloaded on every navigation, and it forced the 75 KB `xts-woodmart-options` row to autoload on every request. It is now enqueued as a real, cacheable file by aom/aom.php. Editing: change THIS file. Anything typed into the Custom CSS field will be printed inline after this stylesheet and will silently override it, which is exactly the confusion this move was meant to end. ========================================================================== */ :root{ --ink: #1f1b16; --ink-2: #2b251e; --espresso: #322b22; --gold: #C6A15C; --gold-2: #EBD08C; --gold-deep: #87692e; /* WCAG AA: was #9A7936 (4.07:1 on white - FAIL). Now 5.13:1 white, 4.72:1 sand. */ --gold-soft: rgba(198,161,92,.40); --ivory: #ffffff; --sand: #f8f5ee; --sand-2: #f0eadd; --text-light: #ffffff; --wheat: #F5DEB3; /* headings on dark sections. 10.62:1 on --espresso, 13.03:1 on --ink */ --text-mut-d: #d8d0bf; --text-dark: #201c16; --text-mut-l: #665d4e; --line-d: rgba(198,161,92,.26); --line-l: rgba(42, 37, 29, 0.10); --maxw: 1240px; --sec: clamp(64px,8vw,96px); --ease: cubic-bezier(.22,.61,.36,1); --gold-grad-end: #ad8b42; /* WCAG AA: dedicated gradient end. Button text #1B1509 = 5.66:1. */ --grad-gold: linear-gradient(118deg,var(--gold-2),var(--gold) 55%,var(--gold-grad-end)); } .aom *{box-sizing:border-box} .aom{margin:0;font-family:'Jost',system-ui,sans-serif;background:var(--ivory);color:var(--text-dark); font-weight:300;line-height:1.75;-webkit-font-smoothing:antialiased;overflow-x:hidden;position:relative; width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)} /* `color:inherit` is load-bearing. Woodmart's base.css contains a rule setting color: var(--wd-title-color) — which resolves to #242424 — on h1..h6, legend and .title. That rule matches the element directly, so it beats the light colour that .cta / .spotlight / .band / .contact pass down by inheritance: an inherited value always loses to a matching declaration. Without this line every heading in a dark section renders near-black on near-black (1.11:1 on .cta). It looked correct on the white sections only by accident. */ .aom h1,.aom h2,.aom h3,.aom h4{font-family:'Cormorant Garamond',serif;font-weight:400;margin:0;line-height:1.1;color:inherit} .aom p{margin:0} .aom a{color:inherit;text-decoration:none} .aom img{display:block;max-width:100%} .aom ul{margin:0;padding:0;list-style:none} .aom .wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px} .aom a:focus-visible,.aom button:focus-visible{outline:2px solid var(--gold-2);outline-offset:3px} /* Arabic + RTL */ .aom[dir="rtl"]{font-family:'Tajawal',sans-serif} .aom[dir="rtl"] h1,.aom[dir="rtl"] h2,.aom[dir="rtl"] h3,.aom[dir="rtl"] h4{font-family:'El Messiri',serif} .aom[dir="rtl"] .arw{display:inline-block;transform:scaleX(-1)} /* ---------- shared bits ---------- */ .aom .eyebrow{font-family:'Jost',sans-serif;font-weight:500;font-size:12px;letter-spacing:.34em; text-transform:uppercase;color:var(--gold-deep);display:inline-flex;align-items:center;gap:14px} .aom[dir="rtl"] .eyebrow{font-family:'Tajawal',sans-serif;letter-spacing:0;text-transform:none} .aom .eyebrow::before{content:"";width:32px;height:1px;background:var(--gold)} .aom .on-dark .eyebrow,.aom .eyebrow.on-dark{color:var(--gold-2)} .aom .eyebrow.center{justify-content:center} .aom .btn{position:relative;display:inline-flex;align-items:center;gap:12px;cursor:pointer;overflow:hidden; font-family:'Jost',sans-serif;font-weight:400;font-size:13.5px;letter-spacing:.15em;text-transform:uppercase; padding:16px 32px;border:1px solid transparent;transition:.4s var(--ease);will-change:transform;border-radius:2px} .aom[dir="rtl"] .btn{font-family:'Tajawal',sans-serif;text-transform:none;letter-spacing:.02em} .aom .btn .arw{transition:transform .4s var(--ease)} .aom .btn:hover .arw{transform:translateX(6px)} .aom[dir="rtl"] .btn:hover .arw{transform:translateX(-6px) scaleX(-1)} /* Glowing Gold Button */ .aom .btn-gold{background:var(--grad-gold);color:#1B1509;font-weight:500;box-shadow: 0 6px 20px rgba(198, 161, 92, 0.2);} .aom .btn-gold:hover{filter:brightness(1.06);transform: translateY(-2px);box-shadow: 0 10px 25px rgba(198, 161, 92, 0.4);} .aom .btn-gold::after{content:"";position:absolute;top:0;left:-120%;width:55%;height:100%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);transition:left .7s var(--ease)} .aom .btn-gold:hover::after{left:150%} .aom .btn-outline{border-color:var(--gold-soft);color:var(--text-light)} .aom .btn-outline:hover{border-color:var(--gold-2);color:var(--gold-2)} .aom .btn-line{border-color:var(--line-l);color:var(--text-dark)} .aom .btn-line:hover{border-color:var(--text-dark)} /* aspect-locked image frame */ .aom .ph{position:relative;aspect-ratio:var(--ar,4/3);overflow:hidden;background:var(--sand-2);display:block;border-radius:3px} .aom .ph img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)} /* reveal */ .aom.wants-reveal [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)} .aom.wants-reveal [data-reveal].in{opacity:1;transform:none} /* scroll progress */ .aom .scroll-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:120;background:var(--grad-gold);box-shadow:0 0 12px rgba(198,161,92,.6)} /* section head */ .aom .sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;margin-bottom:44px;flex-wrap:wrap} .aom .sec-head h2{font-size:clamp(30px,3.8vw,50px);max-width:18ch} .aom .sec-head .sh-txt{max-width:40ch;color:var(--text-mut-l);font-size:15.5px} .aom .on-dark .sec-head .sh-txt{color:var(--text-mut-d)} /* ============================ PREMIUM GLASS HEADER ============================ */ .aom .site-header { position: absolute; top: 24px; left: 50%; transform: translateX(-50%); width: calc(100% - 64px); max-width: var(--maxw); background: rgba(26, 23, 19, 0.45); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(198, 161, 92, 0.3); border-radius: 16px; z-index: 60; transition: all 0.5s var(--ease); box-shadow: 0 15px 35px rgba(0,0,0,0.15); } .aom .site-header.stuck { position: fixed; top: 12px; background: rgba(255, 255, 255, 0.96); border-color: rgba(198, 161, 92, 0.2); box-shadow: 0 15px 40px rgba(0,0,0,0.08); } .aom .nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;height:80px;padding:0 12px;} .aom .nav-left{display:flex;align-items:center;gap:14px;justify-self:start} .aom .nav-right{display:flex;align-items:center;gap:10px;justify-self:end; white-space: nowrap;} .aom .logo{display:flex;align-items:center;gap:12px;justify-self:center} .aom .logo .mark{width:44px;height:44px;flex:none} .aom .logo .wordmark{display:flex;flex-direction:column;line-height:1;text-align:center} .aom .logo .wm-main{font-family:'Cormorant Garamond',serif;font-size:20px;letter-spacing:.18em;color:#ffffff;font-weight:500;transition:color .4s} .aom[dir="rtl"] .logo .wm-main{font-family:'El Messiri',serif} .aom .logo .wm-sub{font-family:'Jost',sans-serif;font-size:8.5px;letter-spacing:.34em;color:var(--gold-2);text-transform:uppercase;margin-top:4px;transition:color .4s} .aom .site-header.stuck .logo .wm-main{color:var(--text-dark)} .aom .site-header.stuck .logo .wm-sub{color:var(--gold-deep)} /* --- HOVER ANIMATED MENU LINKS --- */ .aom .menu{display:flex;align-items:center;gap:2px} .aom .menu>li{position:relative} .aom .menu>li>a{display:flex;align-items:center;gap:6px;padding:12px 14px;font-size:13px;font-weight:400 !important;letter-spacing:.1em;text-transform:uppercase;color:#ffffff;transition:color .3s; position:relative;} .aom[dir="rtl"] .menu>li>a{text-transform:none;font-size:15px;letter-spacing:0;font-weight:400 !important} .aom .menu>li>a::after {content: ''; position: absolute; bottom: 6px; left: 14px; right: 14px; height: 1px; background: var(--gold-2); transform: scaleX(0); transform-origin: right; transition: transform 0.4s var(--ease);} .aom .menu>li>a:hover::after { transform: scaleX(1); transform-origin: left; } .aom .menu>li>a:hover,.aom .menu>li:hover>a{color:var(--gold-2)} .aom .site-header.stuck .menu>li>a{color:var(--text-dark);font-weight:500 !important} .aom .site-header.stuck .menu>li>a:hover{color:var(--gold-deep)} .aom .site-header.stuck .menu>li>a::after{background:var(--gold-deep);} .aom .menu .caret{width:6px;height:6px;border-right:1.2px solid currentColor;border-bottom:1.2px solid currentColor;transform:rotate(45deg);margin-top:-3px;opacity:.7} /* pill button style for nav */ .aom .btn-hero-outline{border:1px solid rgba(235,208,140,.55);color:#ffffff;background:transparent;padding:11px 22px;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;border-radius:50px;font-weight:400;transition:all .35s var(--ease)} .aom[dir="rtl"] .btn-hero-outline{text-transform:none;letter-spacing:0;font-family:'Tajawal',sans-serif} .aom .btn-hero-outline:hover{border-color:var(--gold-2);color:#171009;background:var(--gold-2);box-shadow: 0 4px 15px rgba(235,208,140,0.3);} .aom .btn-hero-outline.lg{padding:16px 36px;font-size:13px;border-color:var(--gold);color:var(--gold-2)} .aom .site-header.stuck .btn-hero-outline{border-color:var(--gold);color:var(--gold-deep)} .aom .site-header.stuck .btn-hero-outline:hover{background:var(--gold);color:#171009} /* language toggle */ .aom .lang{display:inline-flex;border:1px solid rgba(235,208,140,.4);border-radius:50px;overflow:hidden} .aom .lang button{background:none;border:0;cursor:pointer;color:#ffffff;font-family:'Jost',sans-serif;font-size:12px;letter-spacing:.06em;padding:6px 12px;transition:.25s} .aom .lang button.active{background:var(--gold);color:#171009} .aom .lang button:not(.active):hover{color:var(--gold-2)} .aom .site-header.stuck .lang{border-color:var(--gold-soft)} .aom .site-header.stuck .lang button{color:var(--text-mut-l)} .aom .site-header.stuck .lang button.active{color:#171009} /* dropdowns */ .aom .dropdown{position:absolute;top:calc(100% + 6px);left:50%;transform:translate(-50%,10px);background:#fff;border:1px solid var(--line-l);border-radius:12px;box-shadow:0 40px 80px -24px rgba(36,28,15,.3);opacity:0;visibility:hidden;transition:.3s var(--ease);padding:24px;z-index:70} .aom .menu>li:hover .dropdown{opacity:1;visibility:visible;transform:translate(-50%,0)} .aom .mega{width:min(720px,86vw);display:grid;grid-template-columns:repeat(4,1fr);gap:24px} .aom .mega .col-title{font-family:'Cormorant Garamond',serif;font-size:18px;color:var(--gold-deep);margin-bottom:12px;padding-bottom:9px;border-bottom:1px solid var(--line-l)} .aom[dir="rtl"] .mega .col-title{font-family:'El Messiri',serif} .aom .mega ul{display:flex;flex-direction:column;gap:8px} .aom .mega a{font-size:13px;color:var(--text-mut-l);transition:.25s;text-transform:none;letter-spacing:0;font-weight:400} .aom .mega a:hover{color:var(--gold-deep);padding-inline-start:5px} .aom .dropdown.simple{min-width:250px;padding:14px} .aom .dropdown.simple a{display:block;padding:10px 12px;font-size:13px;color:var(--text-mut-l);transition:.25s;text-transform:none;letter-spacing:0;border-radius:6px;} .aom .dropdown.simple a:hover{color:var(--gold-deep);background:var(--sand)} /* burger */ .aom .burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px} .aom .burger span{width:26px;height:1.6px;background:#F1EADB;transition:.3s} .aom .site-header.stuck .burger span{background:var(--text-dark)} .admin-bar .aom .site-header.stuck{top:32px} @media(max-width:782px){.admin-bar .aom .site-header.stuck{top:46px}} @media(max-width:1080px){ .aom .nav{display:flex;justify-content:space-between} .aom .nav-left,.aom .menu{display:none} .aom .burger{display:flex} .aom .logo{justify-self:start; margin-left: 75px;} .aom .logo .wordmark{text-align:start; display: none;} .aom .site-header{top:0; width:100%; border-radius:0; border:none; border-bottom:1px solid rgba(198, 161, 92, 0.3);} } /* mobile drawer */ .aom .drawer{position:fixed;inset:0;z-index:90;background:rgba(26,23,19,.98);backdrop-filter:blur(8px);transform:translateX(100%);transition:transform .45s var(--ease);overflow-y:auto;padding:24px 24px 60px;color:var(--text-light)} .aom[dir="rtl"] .drawer{transform:translateX(-100%)} .aom .drawer.open{transform:none} .aom .drawer .d-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px} .aom .drawer .d-top .wm-main{font-family:'Cormorant Garamond',serif;color:var(--gold-2);letter-spacing:.1em;font-size:20px} .aom .drawer .close{background:none;border:0;color:var(--text-light);font-size:30px;cursor:pointer;line-height:1} .aom .drawer nav>ul>li{border-bottom:1px solid rgba(255,255,255,.08)} .aom .drawer nav>ul>li>a,.aom .drawer .acc-btn{width:100%;display:flex;justify-content:space-between;align-items:center;padding:17px 4px;font-size:16px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-light);background:none;border:0;font-family:'Jost',sans-serif;font-weight:300;cursor:pointer} .aom[dir="rtl"] .drawer nav>ul>li>a,.aom[dir="rtl"] .drawer .acc-btn{text-transform:none;font-family:'Tajawal',sans-serif;font-size:18px} .aom .drawer .sub{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)} .aom .drawer .sub.open{max-height:520px} .aom .drawer .sub a{display:block;padding:10px 14px;color:var(--text-mut-d);font-size:14px} .aom .drawer .sub a:hover{color:var(--gold-2)} .aom .drawer .plus{color:var(--gold);font-size:20px;transition:transform .3s} .aom .drawer .acc-btn.active .plus{transform:rotate(45deg)} /* ============================ ANIMATED HERO ============================ */ .aom .hero{position:relative;min-height:100svh;overflow:hidden;background:#13110d;display:flex;align-items:center;} .aom .hero-visual{position:absolute;top:0;bottom:0;inset-inline-end:0;width:60%;z-index:1;overflow:hidden;} .aom .hero-visual img{width:100%;height:100%;object-fit:cover;object-position:center;transform-origin: center right;animation: kenBurns 25s ease-out forwards;} @keyframes kenBurns {0% { transform: scale(1.15); }100% { transform: scale(1); }} .aom .hero-visual::after{content:"";position:absolute;inset:0;background: linear-gradient(90deg, #13110d 0%, rgba(19,17,13,0.85) 30%, rgba(19,17,13,0.1) 70%, transparent 100%), linear-gradient(0deg, #13110d 0%, transparent 20%);} .aom[dir="rtl"] .hero-visual::after{background: linear-gradient(270deg, #13110d 0%, rgba(19,17,13,0.85) 30%, rgba(19,17,13,0.1) 70%, transparent 100%), linear-gradient(0deg, #13110d 0%, transparent 20%);} .aom .hero-particles { position:absolute; inset:0; z-index:2; pointer-events:none; } .aom .particle {position: absolute;background: radial-gradient(circle, var(--gold-2) 0%, transparent 70%); border-radius: 50%;opacity: 0.15;filter: blur(12px);animation: floatParticle 10s infinite ease-in-out alternate;} .aom .p1 { width: 120px; height: 120px; top: 15%; left: 8%; animation-duration: 12s; } .aom .p2 { width: 180px; height: 180px; top: 60%; left: 35%; animation-duration: 15s; animation-delay: -3s; } .aom .p3 { width: 90px; height: 90px; top: 30%; right: 45%; animation-duration: 11s; animation-delay: -6s; opacity: 0.1; } @keyframes floatParticle {0% { transform: translate(0, 0) scale(1); }100% { transform: translate(40px, -40px) scale(1.15); }} .aom .hero-inner{position:relative;z-index:3;width: 100%;padding-top:140px;padding-bottom:132px;} .aom .hero-copy{ max-width:650px; } .aom .hero-anim-1 { animation: fadeUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both; } .aom .hero-anim-2 { animation: fadeUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both; } .aom .hero-anim-3 { animation: fadeUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.6s both; } @keyframes fadeUp{from{opacity:0;transform:translateY(35px)}to{opacity:1;transform:none}} .aom .hero h1{font-family:math;font-weight:400;text-transform:uppercase;font-size:xx-large;line-height:1.15;letter-spacing:.02em;color:var(--gold-2);text-shadow:0 4px 20px rgba(0,0,0,.6);} .aom[dir="rtl"] .hero h1{font-family:'El Messiri',serif;font-weight:700;text-transform:none;line-height:1.3;} .aom .hero .lead{max-width:48ch;margin-top:20px;font-size:18px;color:#F5EFE2;font-weight:400;line-height:1.6;} .aom .hero-actions{margin-top:36px;display:flex;gap:14px;flex-wrap:wrap;} .aom .hero-curve{position:absolute;left:0;right:0;bottom:-1px;z-index:4;line-height:0;pointer-events:none;} .aom .hero-curve svg{display:block;width:100%;height:clamp(60px,8vw,120px);} .aom .hero-curve svg path:nth-child(1) { fill: var(--sand); } .aom .hero-curve svg path:nth-child(2) { fill: var(--ivory); } /* -------------------------------------------------------------------------- THE HERO ON A PHONE THE PROBLEM The desktop hero is a photo bleeding out from behind the copy, and it is the best thing on the site. The phone version was the same layer stack at phone proportions, and both halves of it failed: 1. `object-fit:cover` on a full-bleed 390x844 box. Nineteen of the twenty-one hero photos are 16:9, and covering a 0.46-ratio box with a 1.78-ratio photo keeps **26% of its width** — a narrow vertical strip through the middle. Unrecognisable as a building. 2. The scrim over it was `rgba(19,17,13,.85)` at mid-height and solid at the bottom. Whatever survived the crop was then blacked out. The result was a tall black rectangle with a wall of text on it, on the home page and on all twenty Design Services and Materials pages. THE FIX The photo becomes a BAND across the top rather than a full-bleed layer. At 390x340 the box ratio is 1.15, so 64% of the photo's width survives instead of 26% — it reads as a building again. The band fades into the flat background at its foot, so there is no hard edge and the section still looks like one piece rather than a photo with text under it. The copy is pushed below the band. Desktop is untouched. -------------------------------------------------------------------------- */ @media(max-width:900px){ .aom .hero{ /* One number drives the band and the padding that clears it. Declared twice on purpose: a browser too old for `svh` throws the second one away and keeps the flat 300px, instead of ending up with an invalid custom property and a band that collapses to nothing. */ --aom-hero-band: 300px; --aom-hero-band: clamp(220px, 40svh, 360px); /* The sub-pages carry style="min-height:52vh" inline, which would other- wise win. The copy sets the real height now. */ min-height: 0 !important; } .aom .hero-visual{ width:100%; bottom:auto; height:var(--aom-hero-band); } /* Buildings sit low in these frames; 40% keeps the roofline in shot. The Ken Burns push is dropped — on a short band it reads as a wobble. */ .aom .hero-visual img{ object-position:center 40%; animation:none; } .aom .hero-visual::after, .aom[dir="rtl"] .hero-visual::after{ background: /* Top scrim, so the logo and burger stay legible over a bright photo. */ linear-gradient(180deg, rgba(19,17,13,.62) 0%, rgba(19,17,13,.16) 30%, transparent 48%), /* Foot of the band dissolving into the flat background. */ linear-gradient(0deg, #13110d 0%, rgba(19,17,13,.72) 34%, rgba(19,17,13,.22) 72%, transparent 100%); } .aom .hero-inner{ /* Clears the band, less a little overlap so the text starts inside the fade rather than below a visible seam. */ padding-top: calc(var(--aom-hero-band) - 28px); /* Enough to clear the home page's .hero-curve, which is ~60px tall here. */ padding-bottom: 72px; } .aom .hero-copy{max-width:100%;text-align:center;display:flex;flex-direction:column;align-items:center;} } @media(max-width:560px){ /* Smaller, tighter type. The wording is untouched — these pages are bilingual and every line is doing work — but at the old sizes the sub-page headings ran to five lines and the standfirst to four. */ .aom .hero h1{font-size:clamp(26px,7.6vw,34px);line-height:1.18} .aom .hero .lead{font-size:15px;line-height:1.55;margin-top:14px;max-width:36ch} .aom .hero .eyebrow{font-size:11px;letter-spacing:.22em} .aom .hero .eyebrow::before{width:22px} .aom .hero-actions{margin-top:26px} } /* ============================ ABOUT ============================ */ .aom .about{background:var(--sand);padding:var(--sec) 0} .aom .about .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center} .aom .about h2{font-size:clamp(32px,4vw,50px);margin:20px 0 22px;max-width:16ch} .aom .about p{color:var(--text-mut-l);font-size:16.5px;max-width:48ch;margin-bottom:28px} .aom .about-media{position:relative} .aom .about-media .ph{--ar:4/5; border-radius: 8px;} .aom .about-media .frame{position:absolute;inset:14px;border:1px solid var(--gold);pointer-events:none;opacity:.5; border-radius: 4px;} .aom .about-media .tag{position:absolute;inset-inline-start:-1px;bottom:30px;background:var(--ink);color:var(--gold-2);font-family:'Jost',sans-serif;font-size:11px;letter-spacing:.18em;text-transform:uppercase;padding:13px 20px; border-radius: 0 4px 4px 0;} .aom[dir="rtl"] .about-media .tag{font-family:'Tajawal',sans-serif;text-transform:none;letter-spacing:0; border-radius: 4px 0 0 4px;} @media(max-width:900px){.aom .about .wrap{grid-template-columns:1fr;gap:40px}} /* ============================ SERVICES ============================ */ .aom .services{background:var(--ivory);padding:var(--sec) 0} .aom .svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .aom .svc{background:#fff;border:1px solid var(--line-l);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;transition:.4s var(--ease)} .aom .svc:hover{transform:translateY(-6px);box-shadow:0 26px 50px -24px rgba(36,28,15,.15);border-color:var(--gold-soft)} .aom .svc .ph{--ar:16/11} .aom .svc:hover .ph img{transform:scale(1.06)} .aom .svc-body{padding:24px 24px 26px;display:flex;flex-direction:column;flex:1} .aom .svc .idx{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep)} .aom[dir="rtl"] .svc .idx{letter-spacing:0;text-transform:none} .aom .svc h3{font-size:26px;margin:8px 0 10px;color:var(--text-dark)} .aom .svc p{font-size:14px;color:var(--text-mut-l);margin-bottom:16px} .aom .svc ul{display:flex;flex-wrap:wrap;gap:7px} .aom .svc li{font-size:11.5px;color:var(--text-mut-l);border:1px solid var(--line-l);padding:5px 10px;border-radius:50px} .aom .svc .go{margin-top:auto;padding-top:18px;display:inline-flex;align-items:center;gap:9px;color:var(--gold-deep);font-size:12px;letter-spacing:.14em;text-transform:uppercase} .aom[dir="rtl"] .svc .go{letter-spacing:0;text-transform:none} .aom .svc:hover .go .arw{transform:translateX(6px)} .aom .svc .go .arw{transition:transform .4s var(--ease)} @media(max-width:1000px){.aom .svc-grid{grid-template-columns:1fr 1fr}} @media(max-width:560px){.aom .svc-grid{grid-template-columns:1fr}} /* ============================ SPOTLIGHT (dark) ============================ */ .aom .spotlight{background:var(--ink);color:var(--text-light);padding:var(--sec) 0} .aom .spotlight .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center} .aom .spot-media{position:relative} .aom .spot-media .ph{--ar:4/3; border-radius: 12px;} .aom .spot-media:hover .ph img{transform:scale(1.05)} .aom .spot-badge{position:absolute;top:16px;inset-inline-start:16px;background:var(--grad-gold);color:#1B1509;font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:8px 14px;font-weight:500; border-radius:4px;} .aom[dir="rtl"] .spot-badge{letter-spacing:0;text-transform:none} .aom .spot-body .eyebrow{color:var(--gold-2)} .aom .spot-body h2{font-size:clamp(30px,3.6vw,46px);margin:14px 0 16px} .aom .spot-meta{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:18px} .aom .spot-meta span{font-size:12px;color:#D8CFBC;border:1px solid var(--gold-soft);padding:6px 12px;border-radius:50px} .aom .spot-body>p{color:var(--text-mut-d);font-size:16px;max-width:52ch} .aom .spot-stats{display:flex;gap:34px;margin:24px 0 28px;flex-wrap:wrap} .aom .spot-stats b{font-family:'Cormorant Garamond',serif;font-size:38px;line-height:1;background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent;display:block} .aom[dir="rtl"] .spot-stats b{font-family:'El Messiri',serif} .aom .spot-stats small{font-size:12px;color:var(--text-mut-d)} @media(max-width:900px){.aom .spotlight .wrap{grid-template-columns:1fr;gap:32px}} /* ============================ PARALLAX STATS BAND ============================ */ .aom .band{position:relative;overflow:hidden;background:var(--ink);color:var(--text-light);padding:clamp(72px,9vw,120px) 0} .aom .band-bg{position:absolute;inset:-14% 0;z-index:0;will-change:transform} .aom .band-bg img{width:100%;height:128%;object-fit:cover;filter:brightness(.35) saturate(.85)} .aom .band::after{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(130% 120% at 50% 0,rgba(31,27,22,.45),rgba(31,27,22,.86))} .aom .band .orb{position:absolute;z-index:2;border-radius:50%;filter:blur(46px);pointer-events:none; background:radial-gradient(circle,rgba(235,208,140,.9),rgba(198,161,92,0) 70%);opacity:.20} .aom .band .orb.o1{width:280px;height:280px;top:6%;inset-inline-start:8%;animation:float1 16s ease-in-out infinite} .aom .band .orb.o2{width:200px;height:200px;bottom:8%;inset-inline-end:14%;animation:float2 19s ease-in-out infinite} @keyframes float1{0%,100%{transform:translate(0,0)}50%{transform:translate(26px,-22px)}} @keyframes float2{0%,100%{transform:translate(0,0)}50%{transform:translate(-30px,18px)}} .aom .band .wrap{position:relative;z-index:3;text-align:center} .aom .band h2{font-size:clamp(30px,4.4vw,54px);max-width:22ch;margin:16px auto 10px} .aom .band h2 em{font-style:italic;color:var(--gold-2)} .aom .band-sub{color:var(--text-mut-d);max-width:52ch;margin:0 auto} .aom .band-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:46px} .aom .band-stat .num{font-family:'Cormorant Garamond',serif;font-size:clamp(40px,5vw,62px);line-height:1; background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent} .aom[dir="rtl"] .band-stat .num{font-family:'El Messiri',serif} .aom .band-stat .lab{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-mut-d);margin-top:8px} .aom[dir="rtl"] .band-stat .lab{letter-spacing:0;text-transform:none} @media(max-width:760px){.aom .band-stats{grid-template-columns:1fr 1fr;gap:30px}} /* ============================ PROJECTS ============================ */ .aom .projects{background:var(--ivory);padding:var(--sec) 0} .aom .proj-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px} .aom .proj{position:relative;overflow:hidden;min-height:280px;border-radius:10px} .aom .proj img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;transition:transform 1s var(--ease)} .aom .proj:hover img{transform:scale(1.06)} .aom .proj::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(31,27,22,.85),transparent 55%)} .aom .proj .meta{position:absolute;inset-inline-start:24px;bottom:22px;z-index:2;transform:translateY(8px);opacity:.94;transition:.4s var(--ease)} .aom .proj:hover .meta{transform:none;opacity:1} .aom .proj .cat{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-2)} .aom[dir="rtl"] .proj .cat{letter-spacing:0;text-transform:none} .aom .proj .pt{font-family:'Cormorant Garamond',serif;font-size:25px;color:#fff;margin-top:5px;line-height:1.1} .aom[dir="rtl"] .proj .pt{font-family:'El Messiri',serif} .aom .proj.big{grid-column:span 4;min-height:480px} .aom .proj.tall{grid-column:span 2;min-height:480px} .aom .proj.wide{grid-column:span 3} .aom .proj.sm{grid-column:span 3} .aom .proj-foot{display:flex;justify-content:center;margin-top:44px} @media(max-width:900px){.aom .proj-grid{grid-template-columns:1fr 1fr} .aom .proj.big,.aom .proj.tall,.aom .proj.wide,.aom .proj.sm{grid-column:span 2;min-height:280px}} /* ============================ MATERIALS ============================ */ .aom .materials{background:var(--sand);padding:var(--sec) 0} .aom .mat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .aom .mat{background:#fff;border:1px solid var(--line-l);border-radius:10px;overflow:hidden;display:flex;align-items:center;gap:16px;padding:14px;transition:.35s var(--ease)} .aom .mat:hover{transform:translateY(-4px);box-shadow:0 20px 40px -22px rgba(36,28,15,.15);border-color:var(--gold-soft)} .aom .mat .ph{--ar:1/1;width:78px;flex:none;border-radius:6px} .aom .mat:hover .ph img{transform:scale(1.07)} .aom .mat h3{font-size:18px;color:var(--text-dark);line-height:1.2} .aom .mat p{font-size:12.5px;color:var(--text-mut-l);margin-top:3px} @media(max-width:860px){.aom .mat-grid{grid-template-columns:1fr 1fr}} @media(max-width:520px){.aom .mat-grid{grid-template-columns:1fr}} /* ============================ TESTIMONIALS ============================ */ .aom .testi{background:var(--ivory);padding:var(--sec) 0} .aom .testi-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px} .aom .quote{background:#fff;border:1px solid var(--line-l);border-radius:12px;padding:32px 30px;position:relative;transition:.35s var(--ease)} .aom .quote:hover{transform:translateY(-4px);box-shadow:0 22px 44px -22px rgba(36,28,15,.15)} .aom .qmark{font-family:'Cormorant Garamond',serif;font-size:64px;line-height:.5;color:var(--gold);opacity:.4;height:28px} .aom .quote blockquote{margin:0 0 22px;font-size:17px;line-height:1.75;color:var(--text-dark);font-style:italic} .aom[dir="rtl"] .quote blockquote{font-style:normal} .aom .quote figcaption{display:flex;align-items:center;gap:14px} .aom .avatar{width:46px;height:46px;border-radius:50%;background:var(--grad-gold);display:flex;align-items:center;justify-content:center;color:#1B1509;font-weight:600;font-size:15px;flex:none} .aom .who b{display:block;color:var(--text-dark);font-size:16px;font-family:'Cormorant Garamond',serif;font-weight:500} .aom[dir="rtl"] .who b{font-family:'El Messiri',serif} .aom .who small{color:var(--text-mut-l);font-size:12.5px} @media(max-width:760px){.aom .testi-grid{grid-template-columns:1fr}} /* ============================ CONTACT ============================ */ .aom .contact{background:var(--ink);color:var(--text-light);padding:var(--sec) 0} .aom .contact-wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start} .aom .contact-info .eyebrow{color:var(--gold-2)} .aom .contact-info h2{font-size:clamp(30px,3.6vw,46px);margin:16px 0 16px} .aom .contact-info>p{color:var(--text-mut-d);font-size:16px;max-width:44ch;margin-bottom:24px} .aom .contact-list{margin-bottom:8px} .aom .contact-list li{display:flex;gap:16px;align-items:baseline;font-size:15px;color:#E4DDCD;border-bottom:1px solid rgba(198,161,92,.14);padding:13px 0} .aom .contact-list a:hover{color:var(--gold-2)} .aom .ci-lbl{flex:none;width:70px;color:var(--gold-2);font-size:11px;letter-spacing:.14em;text-transform:uppercase} .aom[dir="rtl"] .ci-lbl{letter-spacing:0;text-transform:none} .aom .contact-card{background:var(--ink-2);border:1px solid var(--gold-soft);border-radius:16px;padding:32px} .aom .contact-card strong{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:24px;color:var(--gold-2);display:block;margin-bottom:20px} .aom[dir="rtl"] .contact-card strong{font-family:'El Messiri',serif} .aom .field{margin-bottom:15px} .aom .field-row{display:grid;grid-template-columns:1fr 1fr;gap:15px} .aom .field label{display:block;font-size:12px;color:var(--text-mut-d);margin-bottom:6px;letter-spacing:.03em} .aom .field input,.aom .field select,.aom .field textarea{width:100%;padding:12px 14px;background:rgba(0,0,0,.15);border:1px solid var(--gold-soft);border-radius:8px;color:var(--text-light);font-family:inherit;font-size:14px; transition: border-color 0.3s;} .aom .field textarea{resize:vertical} .aom .field input:focus,.aom .field select:focus,.aom .field textarea:focus{outline:none;border-color:var(--gold-2)} .aom .field ::placeholder{color:#948a73} .aom .form-note{text-align:center;font-size:12px;color:var(--text-mut-d);margin-top:12px} @media(max-width:900px){.aom .contact-wrap{grid-template-columns:1fr;gap:34px}.aom .field-row{grid-template-columns:1fr}} /* ============================ CTA BAND ============================ */ .aom .cta{position:relative;background:var(--espresso);color:var(--text-light);padding:clamp(64px,8vw,96px) 0;text-align:center;overflow:hidden} .aom .cta .slat-bg{position:absolute;inset:0;background:repeating-linear-gradient(to bottom,rgba(235,208,140,.05) 0 1px,transparent 1px 42px);opacity:.7} .aom .cta .wrap{position:relative;z-index:2} .aom .cta h2{font-size:clamp(32px,4.6vw,56px);max-width:20ch;margin:18px auto 28px} .aom .cta h2 em{font-style:italic;color:var(--gold-2)} /* ============================ FOOTER ============================ */ .aom .footer{background:var(--ink);color:var(--text-mut-d);padding:70px 0 0;border-top:1px solid var(--gold-soft)} .aom .foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:40px;padding-bottom:52px} .aom .footer .f-about p{font-size:14px;margin:20px 0 22px;max-width:34ch} .aom .foot-social{display:flex;gap:11px} .aom .foot-social a{width:38px;height:38px;border:1px solid var(--gold-soft);border-radius: 50%; display:flex;align-items:center;justify-content:center;color:var(--gold-2);transition:.3s;font-size:12px} .aom .foot-social a:hover{background:var(--gold);color:#1B1509} .aom .footer h4{font-family:'Jost',sans-serif;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-2);margin-bottom:20px;font-weight:500} .aom[dir="rtl"] .footer h4{font-family:'Tajawal',sans-serif;letter-spacing:0;text-transform:none;font-weight:700} .aom .footer ul{display:flex;flex-direction:column;gap:11px} .aom .footer ul a{font-size:14px;transition:.25s} .aom .footer ul a:hover{color:var(--gold-2);padding-inline-start:4px} .aom .f-contact p{font-size:14px;margin-bottom:12px;line-height:1.55} .aom .f-contact .lbl{color:var(--gold-2);font-size:11px;letter-spacing:.14em;text-transform:uppercase;display:block;margin-bottom:3px} .aom[dir="rtl"] .f-contact .lbl{letter-spacing:0;text-transform:none} .aom .foot-bottom{border-top:1px solid rgba(255,255,255,.05);padding:24px 0;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap} .aom .foot-bottom p,.aom .foot-bottom a{color:#948a73;font-size:12.5px} .aom .foot-bottom a:hover{color:var(--gold-2)} .aom .logo .wm-main.on-dark{color:var(--text-light)} @media(max-width:900px){.aom .foot-grid{grid-template-columns:1fr 1fr;gap:34px}} @media(max-width:560px){.aom .foot-grid{grid-template-columns:1fr}} /* ============================ WORDPRESS / WOODMART OVERRIDES ============================ */ .home .wd-content-layout{padding-top:0;padding-bottom:0} .home .entry-content > .aom{margin-top:0} .home .wd-page-title{display:none} .home .whb-header{display:none} .home .wd-footer{display:none} .home .wd-toolbar{display:none} .admin-bar .aom .site-header{top:32px} @media(max-width:782px){.admin-bar .aom .site-header{top:46px}} @media(prefers-reduced-motion:reduce){ .aom *{scroll-behavior:auto!important} .aom.wants-reveal [data-reveal]{opacity:1!important;transform:none!important} .aom .band .orb{animation:none!important} .aom .hero-copy{animation:none!important} .aom .hero-visual img{transform:none!important; animation:none!important} .aom .ph img,.aom .proj img{transition:none} } /* ============================================================ LOGO IMAGES + ROTATING GOLD SEAL (added) ============================================================ */ /* Header emblem + footer full logo */ .aom .logo img.mark{height:82px;width:auto;flex:none} @media(max-width:560px){.aom .logo img.mark{height:72px}} .aom .foot-logo{width:172px;height:auto;display:block} /* Rotating gold seal in the stats band */ .aom .band .seal{position:relative;width:clamp(150px,20vw,210px);aspect-ratio:1;margin:0 auto 28px} .aom .band .seal::before{content:"";position:absolute;inset:15%;border-radius:50%; background:radial-gradient(circle,rgba(235,208,140,.22),transparent 68%);filter:blur(5px)} .aom .band .seal-ring{position:absolute;inset:0;width:100%;height:100%;transform-origin:50% 50%; animation:aomSealSpin 26s linear infinite} .aom .band .seal-ring text{fill:var(--gold-2);font-family:'Jost',sans-serif;font-weight:500; font-size:11px;letter-spacing:3px} .aom .band .seal-emblem{position:absolute;top:50%;left:50%;width:177px;height:auto; transform:translate(-50%,-50%);filter:drop-shadow(0 8px 22px rgba(0,0,0,.55))} @keyframes aomSealSpin{to{transform:rotate(360deg)}} @media(prefers-reduced-motion:reduce){.aom .band .seal-ring{animation:none}} .aom .lang { display: none; } /* ========================================================================== AOM — shared chrome Added when the header/drawer/footer moved out of page content and into the theme (aom/inc/chrome.php). Everything above this line is the original stylesheet as it was in the Custom CSS field. ========================================================================== */ /* -------------------------------------------------------------------------- Hide Woodmart's own header — but only where ours replaces it. The original rule was `.home .whb-header{display:none}`, scoped to the FRONT PAGE only, so About Us, Contact Us and Projects each rendered Woodmart's header stacked on top of the custom glass header. Removing the `.home` restriction fixed that but went too far: it also hid the header on views where AOM chrome does NOT render, leaving them with no navigation at all. `.aom-has-chrome` is added to by aom_body_class() exactly when our header is present. -------------------------------------------------------------------------- */ .aom-has-chrome .whb-header { display: none; } /* -------------------------------------------------------------------------- THE WHITE GAP ABOVE THE FOOTER Same bug as the header above, left half-fixed. Four rules were originally written scoped to `.home`: .home .wd-page-title { display:none } .home .whb-header { display:none } <- fixed, see above .home .wd-footer { display:none } <- NOT fixed .home .wd-toolbar { display:none } <- NOT fixed Only the header was re-scoped to .aom-has-chrome. So on every page EXCEPT the front page, Woodmart's own footer still rendered — an almost-empty block with the default white page background, sitting between the last .aom section and the AOM footer. That is the white band. .wd-page-title is deliberately NOT re-scoped: it is already suppressed per-page by the _woodmart_title_off meta, and blog and archive views legitimately want a title. -------------------------------------------------------------------------- */ .aom-has-chrome .wd-footer { display: none; } .aom-has-chrome .wd-toolbar { display: none; } /* -------------------------------------------------------------------------- HEADINGS ON DARK SECTIONS See the note on `.aom h1..h4 { color:inherit }` near the top: Woodmart was forcing every heading to #242424, which is invisible on these backgrounds. `color:inherit` alone would make them plain white; wheat keeps them warm and sits with the gold palette. The inside .cta h2 and .band h2 stays gold — those rules are more specific and come later in the file. -------------------------------------------------------------------------- */ .aom .cta h2, .aom .spot-body h2, .aom .band h2, .aom .contact-info h2, .aom .spotlight h3, .aom .contact h3 { color: var(--wheat); } /* The theme-rendered chrome sits outside the page's own .aom wrapper, which is full-bleed via width:100vw. These wrappers must not inherit that. */ .aom.aom-chrome { width: auto; margin-inline: 0; overflow-x: visible; } /* -------------------------------------------------------------------------- Header rules recovered from the home page These lived in an inline