/* ========================================================================= Nour Boutique Hotel — main.css Deferred, below-the-fold styles. The design tokens, the reset, the header and the hero are inlined in index.html so the first paint needs no stylesheet at all; main.js swaps this file in from media="print". Everything here uses CSS logical properties (inline-start/end, margin-inline, padding-block…) rather than left/right, so the Arabic RTL layout and the English LTR layout come from one set of rules instead of two. ========================================================================= */ /* ------------------------------------------------------------------------- SELF-HOSTED FONTS — subset woff2, no third-party CDN request. The Arabic faces are declared in the critical CSS because Arabic is the default language; these are the Latin faces used by html.lang-en. ------------------------------------------------------------------------- */ @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} /* ========================================================================= SCROLL REVEAL — paired with the IntersectionObserver in main.js ========================================================================= */ [data-reveal]{transition:opacity .8s var(--ease),transform .8s 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} } /* ========================================================================= SHARED SECTION FURNITURE ========================================================================= */ .section{padding-block:clamp(4rem,9vw,7.5rem)} .section--sea{background:var(--sea-900);color:var(--sand-200)} .section--sea .section-lede{color:rgba(235,220,198,.82)} .section-head{max-width:min(100%,760px);margin-inline:auto;text-align:center; margin-block-end:clamp(2.2rem,5vw,3.4rem)} .eyebrow{font-family:var(--sans);text-transform:uppercase;letter-spacing:.3em; font-size:.7rem;font-weight:600;color:var(--sand-700);margin:0 0 .9rem} html.lang-ar .eyebrow{font-family:var(--arab);letter-spacing:.12em;font-size:.78rem} .eyebrow--light{color:var(--sand-300)} .section-title{font-size:clamp(1.7rem,4vw,2.85rem);color:inherit} .section-title::after{content:"";display:block;width:56px;height:1px;margin:1.1rem auto 0; background:linear-gradient(90deg,var(--sand-500),var(--sea-300)); transform:scaleX(0);transform-origin:center;transition:transform .9s var(--ease) .2s} [data-reveal].is-visible .section-title::after, .section-head.is-visible .section-title::after{transform:scaleX(1)} .section-lede{margin:1.2rem 0 0;color:var(--ink-soft);font-size:1.02rem} html.lang-en .section-lede{font-size:1.06rem} /* ========================================================================= 2. ROOMS ========================================================================= */ .rooms{display:grid;gap:clamp(1.4rem,3vw,2.2rem); grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))} .rooms__fallback{grid-column:1/-1;text-align:center;color:var(--ink-soft)} .room{background:var(--white);border-radius:var(--radius);overflow:hidden; display:flex;flex-direction:column; box-shadow:0 1px 2px rgba(16,34,46,.05),0 18px 40px -28px rgba(16,34,46,.4); transition:transform .5s var(--ease),box-shadow .5s var(--ease)} .room:hover{transform:translateY(-6px); box-shadow:0 1px 2px rgba(16,34,46,.06),0 30px 60px -30px rgba(16,34,46,.5)} .room__media{position:relative;overflow:hidden;background:var(--sea-100)} .room__media picture{display:block} .room__media img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover; transition:transform 1.1s var(--ease)} .room:hover .room__media img{transform:scale(1.05)} .room__flag{position:absolute;inset-block-start:.85rem;inset-inline-start:.85rem; background:rgba(11,44,66,.86);color:var(--sand-200); font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase; padding:.34rem .72rem;border-radius:999px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)} html.lang-ar .room__flag{letter-spacing:0;font-size:.72rem} .room__body{padding:1.4rem 1.4rem 1.5rem;display:flex;flex-direction:column;flex:1 1 auto} .room__name{font-size:1.3rem;color:var(--sea-900)} html.lang-en .room__name{font-size:1.45rem} .room__tagline{margin:.3rem 0 0;color:var(--sand-700);font-size:.86rem;font-weight:700} .room__text{margin:.9rem 0 1.1rem;color:var(--ink-soft);font-size:.93rem;line-height:1.75} .room__meta{display:flex;flex-wrap:wrap;gap:.4rem 1rem;margin:0 0 1rem;padding:0;list-style:none; font-size:.82rem;color:var(--sea-700)} .room__meta li{display:flex;align-items:center;gap:.35rem} .room__meta li::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--sand-500)} .room__features{margin:0 0 1.3rem;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:.4rem} .room__features li{font-size:.76rem;color:var(--sea-700);background:var(--sea-100); border-radius:999px;padding:.26rem .66rem} .room__cta{margin-block-start:auto} .room__cta .btn{width:100%;background:var(--sea-900);color:var(--sand-200)} .room__cta .btn:hover{background:var(--sea-700)} /* ========================================================================= 3. FEATURED ROOM — cinematic, full-bleed ========================================================================= */ .featured{position:relative;isolation:isolate;overflow:hidden; min-height:min(78svh,640px);display:flex;align-items:flex-end; background:var(--sea-900);color:var(--white)} /* same block-edge bleed as the hero, for the same parallax reason */ .featured__media{position:absolute;inset-block:-8%;inset-inline:0;height:116%;z-index:-2; will-change:transform} .featured__media picture{display:block;width:100%;height:100%} /* the band is wider than 16:9, so bias the crop upwards to keep the carved arch and the headboard in frame rather than centring on the cushions */ .featured__media img{width:100%;height:100%;object-fit:cover;object-position:center 38%} .featured__scrim{position:absolute;inset:0;z-index:-1; background:linear-gradient(to top,rgba(11,44,66,.92) 0%,rgba(11,44,66,.55) 45%,rgba(11,44,66,.2) 100%)} .featured__body{padding-block:clamp(3rem,8vw,5.5rem)} .featured__ornament{width:44px;height:44px;color:var(--sand-500);margin-block-end:1.1rem} .featured__title{font-size:clamp(1.7rem,4.4vw,2.7rem);max-width:22ch} .featured__text{margin:1rem 0 1.8rem;color:rgba(255,255,255,.86);font-size:1.02rem;max-width:52ch} .featured__cta{display:flex;gap:.7rem;flex-wrap:wrap} /* ========================================================================= 4. THE PLACE — mosaic + amenities ========================================================================= */ /* Masonry via CSS multi-column rather than a span-based grid. A grid of mixed 2-and-3 column spans left a one-column hole in the last row, and stretched the landscape frames to the height of the portrait ones, cropping them well past the crop the pipeline prepared. Columns flow instead, so nothing is stretched and there are no gaps. */ .mosaic{column-count:1;column-gap:clamp(.8rem,2vw,1.3rem)} @media (min-width:640px){.mosaic{column-count:2}} @media (min-width:1000px){.mosaic{column-count:3}} .mosaic__item{position:relative;break-inside:avoid;overflow:hidden; margin:0 0 clamp(.8rem,2vw,1.3rem);border-radius:var(--radius);background:var(--sea-100)} .mosaic__item picture{display:block} .mosaic__item img{width:100%;height:auto;transition:transform 1.2s var(--ease)} .mosaic__item:hover img{transform:scale(1.04)} .mosaic__item figcaption{position:absolute;inset-block-end:0;inset-inline:0; padding:1.6rem 1.1rem .85rem;color:var(--white);font-size:.85rem;font-weight:700; background:linear-gradient(to top,rgba(11,44,66,.78),transparent)} .amenities{margin:clamp(2rem,5vw,3.2rem) 0 0;padding:0;list-style:none; display:grid;gap:1.6rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))} .amenity{border-block-start:1px solid rgba(16,34,46,.14);padding-block-start:1.1rem} .amenity__icon{color:var(--sand-500);width:26px;height:26px;margin-block-end:.6rem} .amenity__icon svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.4; stroke-linecap:round;stroke-linejoin:round} .amenity h3{font-size:1.05rem;color:var(--sea-900)} .amenity p{margin:.4rem 0 0;font-size:.9rem;color:var(--ink-soft);line-height:1.7} /* ========================================================================= 5. LOCATION ========================================================================= */ .location{display:grid;gap:clamp(1.6rem,4vw,2.6rem);align-items:start} @media (min-width:900px){.location{grid-template-columns:1.15fr .85fr}} .map{position:relative;border-radius:var(--radius);overflow:hidden; aspect-ratio:4/3;background: radial-gradient(120% 100% at 20% 0%,rgba(44,124,160,.5),transparent 60%), linear-gradient(160deg,var(--sea-800),var(--sea-900) 70%)} @media (min-width:900px){.map{aspect-ratio:1/1}} .map__placeholder{position:absolute;inset:0;display:flex;flex-direction:column; align-items:center;justify-content:center;text-align:center;gap:1rem;padding:1.6rem} .map__ornament{width:56px;height:56px;color:rgba(201,168,124,.55)} .map__note{margin:0;max-width:34ch;font-size:.88rem;color:rgba(235,220,198,.82)} .map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block} .location__photo{margin:0 0 1.6rem;border-radius:var(--radius);overflow:hidden;background:var(--sea-800)} .location__photo img{width:100%;height:auto} .facts{margin:0 0 1.6rem;padding:0;list-style:none} .facts li{display:flex;flex-wrap:wrap;gap:.2rem 1rem;justify-content:space-between; padding-block:.8rem;border-block-end:1px solid rgba(235,220,198,.16)} .facts__k{color:var(--sand-500);font-size:.84rem;font-weight:700} .facts__v{font-size:.92rem;color:rgba(235,220,198,.9)} .section--sea .btn--ghost{color:var(--sand-200)} /* ========================================================================= 6. CONTACT ========================================================================= */ .contact{display:grid;gap:clamp(1.6rem,4vw,2.6rem);align-items:start} @media (min-width:860px){.contact{grid-template-columns:.85fr 1.15fr}} .channel{display:flex;align-items:center;gap:1rem;background:var(--white); border-radius:var(--radius);padding:1.1rem 1.2rem;margin-block-end:.9rem; box-shadow:0 1px 2px rgba(16,34,46,.05),0 14px 34px -26px rgba(16,34,46,.4); transition:transform .3s var(--ease),box-shadow .3s var(--ease)} .channel:hover{transform:translateY(-3px);box-shadow:0 1px 2px rgba(16,34,46,.06),0 22px 44px -26px rgba(16,34,46,.5)} .channel__icon{flex:0 0 auto;width:42px;height:42px;border-radius:50%; display:grid;place-items:center;background:var(--sea-900);color:var(--sand-200)} .channel__icon svg{width:22px;height:22px;fill:currentColor} .channel__body{display:flex;flex-direction:column;min-width:0} .channel__body strong{color:var(--sea-900);font-size:1rem} .channel__meta{font-size:.86rem;color:var(--ink-soft)} .contact__hint{margin:1.2rem 0 0;font-size:.88rem;color:var(--ink-soft);line-height:1.75} .enquiry{background:var(--white);border-radius:var(--radius);padding:clamp(1.3rem,3vw,2rem); display:grid;gap:.9rem 1rem;grid-template-columns:1fr 1fr; box-shadow:0 1px 2px rgba(16,34,46,.05),0 20px 46px -30px rgba(16,34,46,.45)} .enquiry__title{grid-column:1/-1;font-size:1.2rem;color:var(--sea-900);margin-block-end:.2rem} .field{grid-column:1/-1;display:flex;flex-direction:column;gap:.35rem} .field--half{grid-column:span 1} @media (max-width:479px){.field--half{grid-column:1/-1}} .field label{font-size:.82rem;font-weight:700;color:var(--sea-700)} .field input,.field select,.field textarea{ font:inherit;font-size:.93rem;color:var(--ink);background:var(--sand-50); border:1px solid rgba(16,34,46,.14);border-radius:10px;padding:.68rem .8rem; width:100%;transition:border-color .25s,box-shadow .25s} .field textarea{resize:vertical;min-height:84px} /* ------------------------------------------------------------------------- DATE FIELDS Chrome lays the placeholder inside a native date control out one character at a time, so on an RTL page the Arabic hint renders as a mirror image: "يوم/شهر/سنة" comes out as "ةنس/رهش/موي", unshaped and back to front. Neither `direction: ltr` on the input nor a `lang` attribute on it changes it — the string comes from the browser's own locale, out of CSS's reach. The fix is in two halves: · on Arabic only, blank the control's own hint while the field is empty and unfocused (on focus the real segments must come back, since that is what the visitor is typing into); · carry the format in the label instead, as `.field__fmt`. Overlaying our own hint on top of the control was the first attempt and it collided with the native calendar icon, which Chrome draws at the inline start regardless of direction. The label is immune to all of that, and it also helps Firefox and Safari, which show no hint at all when empty. ------------------------------------------------------------------------- */ .date{position:relative} .date input[type=date]{display:block} .field__fmt{font-weight:400;color:var(--ink-soft);font-size:.76rem} html.lang-en .field__fmt{font-family:var(--sans)} /* Kept as its own rule: an unknown pseudo-element invalidates the whole selector list, and this one exists only in Blink/WebKit. */ html.lang-ar .date.is-empty:not(:focus-within) input[type=date]::-webkit-datetime-edit{color:transparent} .field input:focus,.field select:focus,.field textarea:focus{ outline:none;border-color:var(--sea-500);box-shadow:0 0 0 3px rgba(44,124,160,.16)} .field input:user-invalid{border-color:#b4483c} .enquiry__note{grid-column:1/-1;margin:.2rem 0 0;font-size:.79rem;color:var(--ink-soft);line-height:1.7} .enquiry__submit{grid-column:1/-1;width:100%;margin-block-start:.3rem} /* ========================================================================= FOOTER ========================================================================= */ .footer{background:var(--sand-200);color:var(--sea-900); padding-block:clamp(2.4rem,6vw,3.6rem)} .footer__inner{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1rem} .footer__brand .mark{width:132px;height:42px;color:var(--sea-900)} .footer__addr{margin:0;font-size:.9rem;color:var(--sea-700)} .footer__nav{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem 1.3rem;font-size:.88rem} .footer__nav a{color:var(--sea-700);transition:color .25s} .footer__nav a:hover{color:var(--sea-900)} .footer__demo{margin:.6rem 0 0;font-size:.78rem;letter-spacing:.04em; color:rgba(16,34,46,.75);border-block-start:1px solid rgba(16,34,46,.14); padding-block-start:1rem;width:min(100%,320px)} /* ========================================================================= PRINT — a booking enquiry is the only thing worth printing ========================================================================= */ @media print{ .header,.hero__cue,.map,.burger,.lang,.enquiry__submit{display:none!important} .hero{min-height:auto} body{background:#fff} [data-reveal]{opacity:1!important;transform:none!important} }