/* ========================================================================= Joya Jewelry — main.css (deferred, non-critical styles) Critical above-the-fold styles are inlined in index.html . Design tokens (--gold champagne, --rose brand, fonts) live there in :root. ========================================================================= */ /* ------------------------------------------------------------------------- SELF-HOSTED FONTS — subset woff2, no third-party CDN calls. ------------------------------------------------------------------------- */ @font-face{ font-family:"Cormorant Garamond"; src:url("../fonts/cormorant-garamond-600.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; } @font-face{ font-family:"Cormorant Garamond"; src:url("../fonts/cormorant-garamond-500.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; } @font-face{ font-family:"Inter"; src:url("../fonts/inter-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; } @font-face{ font-family:"Inter"; src:url("../fonts/inter-600.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; } @font-face{ font-family:"Almarai"; src:url("../fonts/almarai-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; } @font-face{ font-family:"Almarai"; src:url("../fonts/almarai-700.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; } /* ========================================================================= SCROLL-REVEAL (paired with IntersectionObserver in main.js) ========================================================================= */ [data-reveal]{ opacity:0; transform:translateY(24px); transition:opacity .75s var(--ease), transform .75s var(--ease); } [data-reveal].is-visible{ opacity:1; transform:none; } @media (prefers-reduced-motion:reduce){ [data-reveal]{ opacity:1 !important; transform:none !important; transition:none !important; } } /* ========================================================================= CUSTOM CURSOR — desktop, fine-pointer only. Enabled by JS (.has-cursor). ========================================================================= */ .cursor{ display:none; } @media (hover:hover) and (pointer:fine){ .has-cursor .cursor{ display:block; position:fixed; inset-block-start:0; inset-inline-start:0; z-index:9000; width:26px; height:26px; margin:-13px 0 0 -13px; border-radius:50%; border:1px solid rgba(201,169,97,.75); pointer-events:none; transition:width .3s var(--ease), height .3s var(--ease), margin .3s var(--ease), background-color .3s var(--ease), border-color .3s var(--ease), opacity .3s var(--ease); will-change:transform; } .has-cursor .cursor > span{ /* tiny centre dot */ position:absolute; inset-block-start:50%; inset-inline-start:50%; width:3px; height:3px; margin:-1.5px 0 0 -1.5px; border-radius:50%; background:var(--gold); transition:opacity .3s var(--ease); } /* grows and fills faintly over anything interactive */ .has-cursor.cursor-active .cursor{ width:52px; height:52px; margin:-26px 0 0 -26px; background:rgba(201,169,97,.12); border-color:var(--gold); } .has-cursor.cursor-active .cursor > span{ opacity:0; } .has-cursor.cursor-hidden .cursor{ opacity:0; } } @media (prefers-reduced-motion:reduce){ .has-cursor .cursor{ display:none !important; } } /* ========================================================================= SHARED SECTION FURNITURE ========================================================================= */ .section{ padding-block:clamp(4.5rem,10vw,8.5rem); } /* Wide enough that the display-size Arabic headings hold one or two lines instead of breaking into three. */ .section-head{ text-align:center; max-width:min(100%, 820px); margin-inline:auto; margin-block-end:clamp(2.4rem,5vw,3.6rem); } .eyebrow{ font-family:var(--sans); text-transform:uppercase; letter-spacing:.32em; font-size:.72rem; color:var(--gold); margin:0 0 1rem; } html.lang-ar .eyebrow{ letter-spacing:.14em; font-family:var(--arab); } .section-title{ font-size:clamp(1.9rem,4.4vw,3.2rem); letter-spacing:.01em; } /* Thin gold rule that draws itself in when the heading appears -------------- */ .section-title::after{ content:""; display:block; width:64px; height:1px; margin-block-start:1.2rem; background:linear-gradient(90deg,var(--gold),var(--rose)); transform:scaleX(0); transform-origin:left center; transition:transform 1s var(--ease) .15s; } html[dir="rtl"] .section-title::after{ transform-origin:right center; } .section-head .section-title::after{ margin-inline:auto; transform-origin:center; } .section-title.is-in::after, [data-reveal].is-visible .section-title::after, .is-visible.section-title::after{ transform:scaleX(1); } @media (prefers-reduced-motion:reduce){ .section-title::after{ transform:scaleX(1) !important; } } /* ========================================================================= COLLECTIONS — filters + grid ========================================================================= */ .filters{ display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem; margin-block-end:clamp(2rem,4vw,3rem); } .filter{ font-family:var(--sans); background:transparent; border:1px solid var(--line); color:var(--muted); padding:.55rem 1.2rem; border-radius:999px; font-size:.78rem; letter-spacing:.1em; cursor:pointer; transition:color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease); } html.lang-ar .filter{ font-family:var(--arab); } .filter:hover{ color:var(--ivory); border-color:var(--gold-deep); } .filter.is-active{ color:var(--bg); background:var(--gold); border-color:var(--gold); font-weight:600; } .grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(250px,1fr)); gap:clamp(1.2rem,3vw,2.2rem); } .card{ position:relative; background:var(--bg-2); border:1px solid transparent; border-radius:4px; overflow:hidden; transition:transform .55s var(--ease), border-color .55s var(--ease), box-shadow .55s var(--ease), opacity .45s var(--ease); } /* filtered-out cards collapse out of flow after fading */ .card.is-hidden{ display:none; } .card.is-fading{ opacity:0; transform:translateY(8px); } /* Card is a flex column so the CTA sits on a common baseline across the row — grid rows equalise height, and without this the leftover space pooled at the bottom of the shorter cards and read as dead space. */ .card{ display:flex; flex-direction:column; } .card__media{ position:relative; overflow:hidden; aspect-ratio:4/5; background:var(--bg-3); flex:none; } .card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); } .card__body{ padding:1.25rem 1.4rem 1.45rem; display:flex; flex-direction:column; flex:1 1 auto; } .card__name{ font-size:1.45rem; } .card__desc{ color:var(--muted); font-size:.9rem; margin:.45rem 0 1rem; } .card__price{ font-family:var(--sans); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-soft); margin:auto 0 .85rem; } html.lang-ar .card__price{ font-family:var(--arab); letter-spacing:.03em; text-transform:none; font-size:.8rem; } /* Hover choreography: image scales, gold border traces in, the CTA rises up */ .card__body .btn-wa{ align-self:flex-start; opacity:0; transform:translateY(10px); transition:opacity .45s var(--ease) .05s, transform .45s var(--ease) .05s, background .35s var(--ease), color .35s var(--ease); } @media (hover:hover){ .card:hover{ transform:translateY(-6px); box-shadow:0 28px 64px -32px rgba(0,0,0,.85); } .card:hover .card__media img{ transform:scale(1.08); } .card:hover .btn-wa{ opacity:1; transform:none; } /* keyboard users get the same affordance */ .card:focus-within .btn-wa{ opacity:1; transform:none; } } @media (hover:none){ /* touch: keep the CTA visible */ .card__body .btn-wa{ opacity:1; transform:none; } } /* animated gold border trace */ .card::before{ content:""; position:absolute; inset:0; border:1px solid var(--gold); border-radius:4px; clip-path:inset(0 0 100% 0); transition:clip-path .65s var(--ease); pointer-events:none; z-index:3; } @media (hover:hover){ .card:hover::before{ clip-path:inset(0 0 0 0); } } @media (prefers-reduced-motion:reduce){ .card__media img, .card::before{ transition:none; } .card:hover .card__media img{ transform:none; } } /* ========================================================================= WHATSAPP / OUTLINE BUTTONS ========================================================================= */ .btn-wa{ display:inline-flex; align-items:center; gap:.55rem; font-family:var(--sans); font-size:.82rem; letter-spacing:.06em; padding:.7rem 1.15rem; border-radius:999px; cursor:pointer; background:transparent; color:var(--ivory); border:1px solid var(--gold); transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .25s var(--ease); } html.lang-ar .btn-wa{ font-family:var(--arab); } .btn-wa::before{ /* whatsapp glyph */ content:""; width:15px; height:15px; flex:none; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.5 14.4c-.3-.2-1.7-.8-1.9-.9-.3-.1-.5-.2-.7.1s-.8.9-1 1.1-.4.2-.7.1a7.7 7.7 0 0 1-2.3-1.4 8.6 8.6 0 0 1-1.6-2c-.2-.3 0-.4.1-.6l.5-.5c.1-.2.2-.3.3-.5s0-.4 0-.5-.7-1.6-.9-2.2c-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4s-1 1-1 2.4 1 2.8 1.2 3 2.1 3.2 5 4.5c.7.3 1.3.5 1.7.6.7.2 1.4.2 1.9.1.6-.1 1.7-.7 1.9-1.4.2-.7.2-1.2.2-1.4s-.2-.2-.5-.4z'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.5 14.4c-.3-.2-1.7-.8-1.9-.9-.3-.1-.5-.2-.7.1s-.8.9-1 1.1-.4.2-.7.1a7.7 7.7 0 0 1-2.3-1.4 8.6 8.6 0 0 1-1.6-2c-.2-.3 0-.4.1-.6l.5-.5c.1-.2.2-.3.3-.5s0-.4 0-.5-.7-1.6-.9-2.2c-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4s-1 1-1 2.4 1 2.8 1.2 3 2.1 3.2 5 4.5c.7.3 1.3.5 1.7.6.7.2 1.4.2 1.9.1.6-.1 1.7-.7 1.9-1.4.2-.7.2-1.2.2-1.4s-.2-.2-.5-.4z'/%3E%3C/svg%3E") center/contain no-repeat; } .btn-wa:hover{ background:var(--gold); color:var(--bg); border-color:var(--gold); transform:translateY(-2px); } .btn-wa--lg{ padding:.95rem 1.7rem; font-size:.9rem; } .btn-line{ display:inline-block; font-family:var(--sans); font-size:.82rem; letter-spacing:.08em; padding:.62rem 1.1rem; border-radius:999px; border:1px solid var(--line); color:var(--ivory); transition:border-color .3s var(--ease), color .3s var(--ease); } html.lang-ar .btn-line{ font-family:var(--arab); } .btn-line:hover{ border-color:var(--gold); color:var(--gold-soft); } .btn-line--gold{ border-color:var(--gold); color:var(--gold-soft); } /* ========================================================================= FEATURED — cinematic full-width showcase ========================================================================= */ .featured{ position:relative; min-height:88vh; display:grid; align-items:center; overflow:hidden; } .featured__media{ position:absolute; inset:-8% 0; z-index:0; will-change:transform; } .featured__media img{ width:100%; height:100%; object-fit:cover; opacity:.5; } .featured::after{ content:""; position:absolute; inset:0; z-index:1; } html[dir="rtl"] .featured::after{ background:linear-gradient(to left, var(--bg) 6%, rgba(14,14,16,.6) 52%, rgba(14,14,16,.15) 100%); } html[dir="ltr"] .featured::after{ background:linear-gradient(to right, var(--bg) 6%, rgba(14,14,16,.6) 52%, rgba(14,14,16,.15) 100%); } .featured__panel{ position:relative; z-index:2; width:min(100% - 2.4rem, var(--maxw)); margin-inline:auto; } .featured__panel > *{ max-width:38ch; } .featured__text{ color:var(--muted); margin:1.4rem 0 2rem; font-size:1.05rem; } @media (prefers-reduced-motion:reduce){ .featured__media{ inset:0; } } /* ========================================================================= THE HOUSE ========================================================================= */ .house__grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(2rem,6vw,5rem); align-items:center; } .house__media img{ width:100%; border-radius:4px; aspect-ratio:4/5; object-fit:cover; } .house__text > p{ color:var(--muted); margin-block:1.2rem 2rem; } .house__pillars{ list-style:none; padding:0; margin:0; display:grid; gap:1.4rem; } .house__pillars li{ padding-inline-start:1.3rem; border-inline-start:1px solid var(--line); } .house__pillars strong{ display:block; font-family:var(--serif); font-size:1.3rem; color:var(--ivory); letter-spacing:.02em; } html.lang-ar .house__pillars strong{ font-family:var(--arab); } .house__pillars span{ color:var(--muted); font-size:.92rem; } /* ========================================================================= SHOWROOMS ========================================================================= */ .showroom-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:clamp(1.4rem,3vw,2.4rem); } .showroom{ background:var(--bg-2); border:1px solid var(--line); border-radius:6px; overflow:hidden; transition:border-color .4s var(--ease); } .showroom:hover{ border-color:rgba(201,169,97,.45); } .showroom__map{ aspect-ratio:16/10; background:var(--bg-3); } /* display:block — an inline iframe leaves a baseline gap under the map */ .showroom__map iframe{ display:block; width:100%; height:100%; border:0; filter:grayscale(1) contrast(.9) brightness(.85); transition:filter .5s var(--ease); } .showroom:hover .showroom__map iframe{ filter:grayscale(0) contrast(1) brightness(1); } /* ---- Click-to-load map placeholder -------------------------------------- */ .map-load{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.9rem; width:100%; height:100%; border:0; cursor:pointer; color:var(--muted); font-family:var(--sans); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; background-color:var(--bg-3); /* faint gold grid — suggests a map without shipping one */ background-image: linear-gradient(rgba(201,169,97,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(201,169,97,.07) 1px, transparent 1px), radial-gradient(60% 60% at 50% 45%, rgba(201,169,97,.09), transparent 70%); background-size:34px 34px, 34px 34px, 100% 100%; transition:color .3s var(--ease), background-color .3s var(--ease); } html.lang-ar .map-load{ font-family:var(--arab); letter-spacing:.04em; text-transform:none; font-size:.86rem; } .map-load:hover{ color:var(--ivory); background-color:#1f1f24; } .map-load__pin{ width:26px; height:26px; flex:none; background:var(--gold); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center/contain no-repeat; transition:transform .4s var(--ease); } .map-load:hover .map-load__pin{ transform:translateY(-3px); } @media (prefers-reduced-motion:reduce){ .map-load__pin{ transition:none; } } .showroom__body{ padding:1.5rem 1.6rem 1.8rem; } .showroom__addr{ color:var(--muted); font-size:.92rem; margin:.5rem 0 1.2rem; } .showroom__actions{ display:flex; flex-wrap:wrap; gap:.6rem; } /* ========================================================================= CONTACT ========================================================================= */ .contact{ text-align:center; background:radial-gradient(60% 60% at 50% 0%, rgba(201,169,97,.07), transparent 70%); } .contact__inner{ max-width:60ch; } .contact .section-title::after{ margin-inline:auto; transform-origin:center; } .contact__lead{ color:var(--muted); margin:1.2rem auto 2.2rem; } .contact__actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:.8rem; margin-block-end:2.4rem; } .contact__meta{ display:flex; flex-direction:column; align-items:center; gap:.8rem; color:var(--muted); font-size:.9rem; } .contact__ig{ display:inline-flex; align-items:center; gap:.5rem; color:var(--gold-soft); font-family:var(--sans); letter-spacing:.06em; transition:color .3s var(--ease); } .contact__ig:hover{ color:var(--gold); } /* ========================================================================= FOOTER ========================================================================= */ .site-footer{ border-block-start:1px solid var(--line); padding-block:clamp(2.6rem,5vw,3.6rem) 1.6rem; background:var(--bg-2); } .footer__grid{ display:grid; grid-template-columns:1.4fr 1fr auto; gap:2rem; align-items:start; padding-block-end:2rem; border-block-end:1px solid var(--line); } .footer__brand img{ margin-block-end:.9rem; width:auto; height:112px; } .footer__brand p{ color:var(--muted); font-size:.9rem; max-width:34ch; } .footer__nav{ display:flex; flex-direction:column; gap:.7rem; } .footer__nav a{ color:var(--muted); font-size:.88rem; letter-spacing:.06em; transition:color .3s var(--ease); } .footer__nav a:hover{ color:var(--gold-soft); } .footer__social a{ color:var(--muted); transition:color .3s var(--ease); } .footer__social a:hover{ color:var(--gold); } .footer__base{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:.6rem; padding-block-start:1.4rem; color:var(--muted); font-size:.8rem; font-family:var(--sans); } .footer__demo{ color:var(--rose); letter-spacing:.06em; } /* ========================================================================= LOGO SHIMMER (one gold sweep across the hero logo on load) ========================================================================= */ .hero__logo{ position:relative; } .shimmer-wrap{ position:relative; display:inline-block; } .shimmer-wrap::after{ content:""; position:absolute; inset:-6% -12%; pointer-events:none; /* wide, low-opacity band — reads as a gleam travelling over the metal rather than a hard white slash across the logo */ background:linear-gradient(112deg, transparent 20%, rgba(255,255,255,.10) 38%, rgba(255,255,255,.30) 50%, rgba(255,255,255,.10) 62%, transparent 80%); transform:translateX(-135%); mix-blend-mode:screen; } .shimmer-wrap.go::after{ animation:shimmer 1.9s var(--ease) 1; } @keyframes shimmer{ to{ transform:translateX(130%); } } @media (prefers-reduced-motion:reduce){ .shimmer-wrap.go::after{ animation:none; } } /* ========================================================================= MOBILE NAV + RESPONSIVE ========================================================================= */ @media (max-width:860px){ .nav{ position:fixed; inset:0; z-index:90; flex-direction:column; justify-content:center; gap:2rem; background:rgba(14,14,16,.97); backdrop-filter:blur(8px); transition:transform .45s var(--ease); pointer-events:none; } /* The closed and open states are written at matching specificity on purpose. `html[dir="rtl"] .nav` (0,2,1) would otherwise outrank a bare `.nav.open` (0,2,0) and the drawer would never slide in — i.e. the menu would be dead in Arabic, which is the default language here. */ html[dir="ltr"] .nav{ transform:translateX(100%); } html[dir="rtl"] .nav{ transform:translateX(-100%); } html[dir="ltr"] .nav.open, html[dir="rtl"] .nav.open{ transform:translateX(0); pointer-events:auto; } .nav a{ font-size:1.1rem; } /* Keep the logo and the language switch above the open drawer — the nav is a child of the header, so without this its z-index:90 paints over them and you lose the ability to change language while the menu is open. */ .brand, .header-tools{ position:relative; z-index:95; } .hamburger{ display:inline-flex; flex-direction:column; justify-content:center; gap:5px; width:34px; height:34px; background:none; border:0; cursor:pointer; z-index:95; padding:5px; } .hamburger span{ display:block; height:1.5px; width:100%; background:var(--ivory); transition:transform .35s var(--ease), opacity .3s var(--ease); } .hamburger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); } .hamburger[aria-expanded="true"] span:nth-child(2){ opacity:0; } .hamburger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); } } @media (max-width:760px){ .house__grid{ grid-template-columns:1fr; } .house__media{ max-width:420px; margin-inline:auto; } .footer__grid{ grid-template-columns:1fr; } .footer__social{ order:-1; } .featured{ min-height:auto; padding-block:clamp(4rem,14vw,7rem); } .featured__media img{ opacity:.3; } /* phones: drop parallax + ken burns entirely — battery and jank */ .hero__bg, .featured__media{ inset:0 !important; transform:none !important; } .hero__bg img{ animation:heroIn 2.2s var(--ease) .1s forwards !important; } }