/* ============================================================ refinements.css Mr Lux · The Agency Dominican Republic Targeted corrections on top of the approved design: 1. Transparent → white scrolling navigation (restored) 2. Page loading bar (restored) 4. Slimmer boxed components 5. Destination intro media panel Nothing here changes typography, brand colour, logos or copy. ============================================================ */ /* ============================================================ 1. NAVIGATION — TRANSPARENT OVER HERO, SOLID ON SCROLL Restored from the rejected version's treatment. Gated behind html.m-js so the approved white nav is the fallback if JS never runs. ============================================================ */ /* No transition on the very first paint, so the nav appears in its correct state instead of fading into it. */ html.m-preload #nav, html.m-preload #nav *, html.m-preload .nav-logo-img{ transition:none !important; } html.m-js #nav{ transition:background-color .5s cubic-bezier(.22,1,.36,1), border-color .5s cubic-bezier(.22,1,.36,1), box-shadow .5s cubic-bezier(.22,1,.36,1), backdrop-filter .5s cubic-bezier(.22,1,.36,1), padding .45s cubic-bezier(.22,1,.36,1); } /* Transparent state — only on pages that have a hero behind the bar */ html.m-js body.has-hero-nav #nav:not(.sc){ background:transparent; border-bottom-color:transparent; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; } /* Gentle scrim so menu text stays legible on bright imagery */ html.m-js body.has-hero-nav #nav:not(.sc)::before{ content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(to bottom, rgba(0,0,0,.42), rgba(0,0,0,0)); pointer-events:none; } html.m-js body.has-hero-nav #nav{ position:fixed; } /* Link, dropdown-arrow and toggle colours in the transparent state */ html.m-js body.has-hero-nav #nav:not(.sc) .nli>li>a, html.m-js body.has-hero-nav #nav:not(.sc) .nli>li>span.ndrop{ color:#fff; } html.m-js body.has-hero-nav #nav:not(.sc) .nli>li>a:hover, html.m-js body.has-hero-nav #nav:not(.sc) .nli>li:hover>span.ndrop{ color:#fff; border-bottom-color:rgba(255,255,255,.55); } html.m-js body.has-hero-nav #nav:not(.sc) .nmobile-toggle span, html.m-js body.has-hero-nav #nav:not(.sc) .nmobile-toggle i, html.m-js body.has-hero-nav #nav:not(.sc) .nmobile-toggle::before, html.m-js body.has-hero-nav #nav:not(.sc) .nmobile-toggle::after{ background:#fff; color:#fff; } html.m-js body.has-hero-nav #nav:not(.sc) .nmobile-toggle{ color:#fff; } /* The consultation button keeps its red fill in both states — it is the primary CTA and must not lose contrast. Only its edge is reinforced. */ html.m-js body.has-hero-nav #nav:not(.sc) .nct{ box-shadow:0 2px 18px rgba(0,0,0,.28); } /* Dropdown panels stay white and readable in BOTH nav states */ html.m-js .nsub{ background:#fff; } html.m-js body.has-hero-nav #nav:not(.sc) .nsub a{ color:var(--t2); } html.m-js body.has-hero-nav #nav:not(.sc) .nsub a:hover{ color:var(--red); } /* Solid state — the approved white navigation, unchanged */ html.m-js #nav.sc{ background:rgba(255,255,255,.97); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); } /* ============================================================ 2. LOADING BAR The markup sits immediately after , and the progress is driven by CSS animation alone — so the bar is painted and moving before any script runs. JavaScript only completes and hides it. ============================================================ */ #mLoader{ position:fixed; top:0; left:0; right:0; height:3px; z-index:100000; /* above #nav (999) and everything else */ pointer-events:none; opacity:1; transition:opacity .32s ease .06s; } #mLoader .mLoader-fill{ display:block; height:100%; width:0; background:linear-gradient(90deg, var(--red), #ff6b6f); box-shadow:0 0 10px rgba(237,33,39,.55); transform:translateZ(0); animation:mLoadCreep 2.6s cubic-bezier(.12,.62,.28,1) forwards; } /* Starts at a visible sliver so there is feedback on the very first painted frame, then fast to a third and progressively slower. */ @keyframes mLoadCreep{ 0% { width:8% } 12% { width:32% } 35% { width:56% } 70% { width:74% } 100% { width:88% } } /* JS marks the page usable */ #mLoader.mL-complete .mLoader-fill{ animation:none; width:100%; transition:width .26s cubic-bezier(.22,1,.36,1); } #mLoader.mL-done{ opacity:0; } /* Hard removal. On a heavy page the opacity transition can be starved by main-thread work, so the bar is taken out of the layer entirely once it has completed. It can never linger. */ #mLoader.mL-gone{ display:none !important; } /* Reset before the next navigation */ #mLoader.mL-reset .mLoader-fill{ animation:none; width:0; transition:none; } @media(prefers-reduced-motion:reduce){ /* Still immediate feedback, but no long creep and no fade delay. */ #mLoader{ transition:opacity .01ms; } #mLoader .mLoader-fill{ animation:none; width:70%; transition:width .01ms; } #mLoader.mL-complete .mLoader-fill{ width:100%; transition:width .01ms; } } /* ============================================================ 4. SLIMMER BOXED COMPONENTS Padding, gaps and min-heights only — every value below is a reduction of the real declaration in main.css or in a destination page's own