/* FILE: /assets/css/global.css */ /* MARHA Global Styles - Shared across EN + AR - Corporate-safe premium UI - Works with /assets/js/main.js (reveal, hero reveal, nav indicator, magnetic, tilt) */ :root{ --brand-red: #ea1e2f; --brand-green: #3dbe69; --ink: #0b1220; --slate-900: #0f172a; --slate-700: #334155; --slate-600: #475569; --slate-500: #64748b; --slate-300: #cbd5e1; --slate-200: #e2e8f0; --soft: #f7f9fc; --radius-xl: 16px; --radius-2xl: 22px; --radius-3xl: 28px; --ease-out: cubic-bezier(.16,1,.3,1); --shadow-soft: 0 18px 50px rgba(15,23,42,.10); --shadow-mid: 0 22px 70px rgba(15,23,42,.14); } /* Base */ html, body{ height: 100%; } body{ font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; color: var(--ink); background: #fff; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Selection */ ::selection{ background: rgba(234,30,47,.18); } /* Focus */ :focus-visible{ outline: 2px solid rgba(61,190,105,.65); outline-offset: 3px; border-radius: 10px; } /* Links */ a{ color: inherit; text-decoration: none; } a:hover{ text-decoration: none; } /* Header blur */ .header-blur{ backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /* Brand gradient block (logo placeholder) */ .accent-gradient{ background: radial-gradient(120% 120% at 15% 20%, rgba(234,30,47,.18), transparent 55%), radial-gradient(120% 120% at 80% 30%, rgba(61,190,105,.18), transparent 55%), linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.72)); } /* Subtle divider */ .soft-divider{ height: 1px; width: 100%; background: linear-gradient(90deg, transparent, rgba(148,163,184,.55), transparent); opacity: .8; } /* Buttons: baseline polish */ .btn{ transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out), background-color .18s var(--ease-out), opacity .18s var(--ease-out); will-change: transform; } .btn:active{ transform: translateY(1px); } .btn:hover{ box-shadow: 0 14px 36px rgba(15,23,42,.10); } /* Scrollbar progress (top bar) */ .scrollbar{ position: fixed; top: 0; left: 0; height: 3px; width: 0%; z-index: 9999; background: linear-gradient(90deg, var(--brand-red), var(--brand-green)); box-shadow: 0 10px 30px rgba(15,23,42,.16); transform: translateZ(0); } /* Back to top */ .to-top{ position: fixed; right: 16px; bottom: 18px; z-index: 60; opacity: 0; pointer-events: none; transform: translateY(10px); box-shadow: var(--shadow-soft); } .to-top.is-visible{ opacity: 1; pointer-events: auto; transform: translateY(0); } /* Hero media reveal */ .hero-media{ opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); } .hero-media.is-ready{ opacity: 1; transform: translateY(0); } /* Reveal system: prevent blank page. JS adds .js on early. JS then adds .is-hidden to all .reveal elements after it starts. */ .reveal{ transform: translateY(0); } .js .reveal.is-hidden{ opacity: 0; transform: translateY(14px); filter: blur(2px); transition: opacity .65s var(--ease-out), transform .65s var(--ease-out), filter .65s var(--ease-out); } .js .reveal:not(.is-hidden){ opacity: 1; transform: translateY(0); filter: blur(0); } /* Premium nav indicator (desktop) Works with: */ [data-nav]{ position: relative; } .nav-indicator{ position: absolute; left: 0; bottom: -10px; height: 2px; width: 24px; border-radius: 999px; opacity: 0; background: linear-gradient(90deg, var(--brand-red), var(--brand-green)); box-shadow: 0 10px 24px rgba(15,23,42,.14); transition: transform .36s var(--ease-out), width .36s var(--ease-out), opacity .25s var(--ease-out); transform: translateX(0); will-change: transform, width; } [data-nav-link]{ position: relative; padding-bottom: 8px; } [data-nav-link].is-current{ color: var(--ink); } /* Cards */ .card-hover{ transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out), border-color .18s var(--ease-out); box-shadow: none; } .card-hover:hover{ box-shadow: var(--shadow-mid); border-color: rgba(148,163,184,.55) !important; } /* Tilt cards - allow the injected sweep layer to blend nicely */ [data-tilt]{ isolation: isolate; } [data-tilt] .marha-sweep{ mix-blend-mode: soft-light; } /* Optional: make links inside cards feel premium */ .card-hover a, a.card-hover{ -webkit-tap-highlight-color: transparent; } /* Reduced motion: disable motion but keep layout */ @media (prefers-reduced-motion: reduce){ .btn, .nav-indicator, .hero-media, .to-top, .js .reveal.is-hidden, .js .reveal:not(.is-hidden), .card-hover{ transition: none !important; } .hero-media{ opacity: 1 !important; transform: none !important; } .to-top{ transform: none !important; } } /* Basic form polish (used later in Request Quote / Contact) */ input, textarea, select{ outline: none; } input:focus, textarea:focus, select:focus{ box-shadow: 0 0 0 4px rgba(61,190,105,.18); border-color: rgba(61,190,105,.55) !important; } /* Utility: subtle hairline border for sections if needed */ .hairline{ border: 1px solid rgba(148,163,184,.40); }