/* Abu Malka Trading FZCO — style.css */ /* ─── LOADER ─── */ #loader { position: fixed; inset: 0; background: #0F172A; z-index: 9999; display: flex; align-items: center; justify-content: center; transition: opacity 0.6s ease, visibility 0.6s ease; } #loader.loaded { opacity: 0; visibility: hidden; pointer-events: none; } .loader-mark { width: 44px; height: 44px; border: 2px solid rgba(182, 141, 64, 0.2); border-top-color: #B68D40; border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ─── HERO ─── */ .hero-bg { position: absolute; inset: 0; background: linear-gradient(135deg, #0F172A 0%, #16213e 50%, #1c2b4d 100%); } .hero-watermark { position: absolute; width: 560px; height: 560px; object-fit: contain; opacity: 0.05; right: -80px; top: 50%; transform: translateY(-50%); pointer-events: none; user-select: none; } .hero-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(182, 141, 64, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(182, 141, 64, 0.05) 1px, transparent 1px); background-size: 64px 64px; } /* ─── TICKER ─── */ .ticker-wrap { overflow: hidden; white-space: nowrap; } .ticker-track { display: inline-block; animation: ticker 36s linear infinite; } .ticker-track:hover { animation-play-state: paused; } @keyframes ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* ─── SCROLL REVEAL ─── */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s ease, transform 0.7s ease; } .reveal.visible { opacity: 1; transform: none; } .reveal-delay-1 { transition-delay: 0.1s; } .reveal-delay-2 { transition-delay: 0.2s; } .reveal-delay-3 { transition-delay: 0.3s; } .reveal-delay-4 { transition-delay: 0.4s; } /* ─── FOIL / GOLD SHINE ─── */ .foil { background: linear-gradient( 110deg, #D9BA76 0%, #B68D40 25%, #f5e0a0 50%, #B68D40 75%, #D9BA76 100% ); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: foil-shine 4s linear infinite; } @keyframes foil-shine { 0% { background-position: 0% center; } 100% { background-position: 200% center; } } /* ─── GLASS CARDS ─── */ .glass { background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.08); transition: background 0.25s ease, border-color 0.25s ease; } .glass:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(182, 141, 64, 0.2); } .glass-light { background: rgba(15, 23, 42, 0.03); border: 1px solid rgba(15, 23, 42, 0.07); transition: background 0.25s ease; } .glass-light:hover { background: rgba(15, 23, 42, 0.06); } /* ─── WORD REVEAL ─── */ /* NOTE: core word-reveal CSS is inlined in to prevent FOUC. Only supplemental overrides belong here. */ /* ─── TRUST STRIP ─── */ .trust-strip { border-top: 1px solid rgba(255, 255, 255, 0.1); } .trust-item { position: relative; padding-left: 14px; } .trust-item::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 4px; height: 4px; border-radius: 50%; background: #B68D40; } /* ─── NAVIGATION ─── */ #nav { transition: box-shadow 0.3s ease; } #nav.scrolled { box-shadow: 0 1px 24px rgba(0, 0, 0, 0.35); } .nav-inner { transition: height 0.3s ease; } #nav.scrolled .nav-inner { height: 72px; } .nav-link { position: relative; padding-bottom: 2px; } .nav-link::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background: #D9BA76; transition: width 0.3s ease; } .nav-link:hover::after { width: 100%; } /* ─── LOGO ─── */ .logo-lockup { text-decoration: none; } /* ─── BUTTONS ─── */ .btn-primary { transition: background 0.25s ease, color 0.25s ease, transform 0.15s ease; } .btn-primary:active { transform: scale(0.97); } .btn-ghost { transition: border-color 0.25s ease, color 0.25s ease; } /* ─── GEMSTONE VARIETY SWITCHER ─── */ /* NOTE: this component intentionally avoids Tailwind utility classes. assets/tailwind.css is a static, hand-compiled file (no Node/build step available in this environment) — it only contains the classes that were in index.html at compile time, so any NEW utility class added later silently has no rule and no effect. Custom CSS here is always live. */ .stone-section-lead { padding-top: 112px; } .stone-section-tail { padding-top: 40px; padding-bottom: 112px; } .stone-section-desc { margin-top: 48px; } @media (min-width: 1024px) { .stone-section-lead { padding-top: 144px; } .stone-section-tail { padding-bottom: 144px; } } .stone-stage { position: relative; width: 100%; height: clamp(380px, 58vw, 620px); overflow: hidden; background: #05070d; } .stone-stage-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: opacity 0.3s ease; } .stone-stage-scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(5, 7, 13, 0.88) 0%, rgba(5, 7, 13, 0.1) 42%, rgba(5, 7, 13, 0.3) 100%); } .stone-stage-content { position: absolute; left: 0; right: 0; bottom: 0; padding: 48px 24px 40px; text-align: center; } .stone-stage-title { color: #ffffff; font-size: clamp(28px, 4vw, 48px); line-height: 1.1; } .stone-stage-sub { color: rgba(217, 186, 118, 0.85); font-size: 12px; letter-spacing: 0.25em; text-transform: uppercase; margin-top: 10px; } .stone-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 20px; } .gemstone-note { color: rgba(255, 255, 255, 0.35); font-size: 12px; margin-top: 12px; text-align: center; } .stone-facts { display: grid; grid-template-columns: 1fr; gap: 12px; max-width: 460px; margin: 0 auto; } @media (min-width: 640px) { .stone-facts { grid-template-columns: 1fr 1fr; max-width: none; } } .stone-facts li { display: flex; gap: 10px; align-items: flex-start; color: rgba(255, 255, 255, 0.7); font-size: 14px; text-align: left; } .stone-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.05); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.65); cursor: pointer; transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.15s ease; } .stone-pill:hover { border-color: rgba(182, 141, 64, 0.5); color: #ffffff; } .stone-pill:active { transform: scale(0.96); } .stone-pill.active { background: #B68D40; border-color: #B68D40; color: #0F172A; } .stone-swatch { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2); } /* ─── DIVISION CARDS ─── */ .division-card { transition: transform 0.3s ease, box-shadow 0.3s ease; } .division-card:hover { transform: translateY(-5px); box-shadow: 0 16px 40px rgba(15, 23, 42, 0.1); } .division-icon { transition: background 0.3s ease, transform 0.3s ease; } .division-card:hover .division-icon { background: #B68D40; transform: scale(1.05); } .card-index { position: absolute; top: 14px; right: 16px; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 52px; font-weight: 700; color: rgba(15, 23, 42, 0.055); line-height: 1; user-select: none; pointer-events: none; } /* ─── PROCESS ─── */ .process-line { background: linear-gradient(90deg, transparent, rgba(182, 141, 64, 0.25), transparent); } .process-node > div:first-child { transition: background 0.3s ease, transform 0.3s ease; } .process-node:hover > div:first-child { background: #B68D40; transform: scale(1.06); } /* ─── BENTO TILES ─── */ .bento-tile { position: relative; overflow: hidden; } .bento-tile img { transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .bento-tile:hover img { transform: scale(1.04); } .tile-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(15, 23, 42, 0.72) 0%, transparent 60%); z-index: 0; } .tile-caption { position: relative; z-index: 1; } /* ─── MAP SVG ─── */ .map-pulse { transform-box: fill-box; transform-origin: center; animation: map-pulse 2.4s ease-in-out infinite; } @keyframes map-pulse { 0%, 100% { opacity: 0.85; transform: scale(1); } 50% { opacity: 0; transform: scale(4); } } .route-path { stroke-dasharray: 1000; stroke-dashoffset: 1000; transition: stroke-dashoffset 1.8s ease; } .route-path.draw { stroke-dashoffset: 0; } /* ─── PHOTO FALLBACK ─── */ .photo-fallback { background: linear-gradient(135deg, #16213e, #1c2b4d); overflow: hidden; } /* ─── COUNTER ─── */ .counter { font-variant-numeric: tabular-nums; } /* ─── WHATSAPP FAB ─── */ .whatsapp-ping { position: absolute; top: 0; right: 0; width: 12px; height: 12px; background: #ef4444; border-radius: 50%; border: 2px solid white; animation: ping 2s ease infinite; } @keyframes ping { 0%, 100% { transform: scale(1); opacity: 1; } 60% { transform: scale(1.4); opacity: 0.4; } } /* WhatsApp tooltip removed — tooltip text was inside the flex container and overflowed unpredictably. Now using native title attribute on the . */ /* ─── BACK TO TOP ─── */ #backToTop { opacity: 0; pointer-events: none; transition: opacity 0.3s ease, background 0.25s ease, transform 0.15s ease; } #backToTop.visible { opacity: 1; pointer-events: auto; } #backToTop:active { transform: scale(0.92); } /* ─── PARTICLES ─── */ @keyframes float-particle { 0% { transform: translateY(0) translateX(0); opacity: 0.3; } 100% { transform: translateY(-28px) translateX(8px); opacity: 0.9; } } /* ─── SCROLLBAR ─── */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: #0F172A; } ::-webkit-scrollbar-thumb { background: #B68D40; border-radius: 3px; } /* ─── SELECTION ─── */ ::selection { background: rgba(182, 141, 64, 0.25); color: #0F172A; } /* ─── KEYBOARD FOCUS ─── */ /* Form inputs use focus:outline-none with only a subtle border-color change, which is not a strong enough focus indicator for keyboard users. Restore a visible focus ring on every interactive element via :focus-visible so mouse clicks stay clean but Tab navigation is always visible. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid #B68D40; outline-offset: 2px; } /* ─── MISSING TAILWIND CLASSES ─── */ /* bg-navy/88 — opacity 88 is not in Tailwind's default scale so it won't compile */ .bg-navy\/88 { background-color: rgba(15, 23, 42, 0.88); } /* ─── SMOOTH SCROLL ─── */ html { scroll-behavior: smooth; overflow-x: clip; } body { overflow-x: hidden; max-width: 100vw; } /* ─── BODY TEXT JUSTIFICATION ─── */ p.leading-relaxed { text-align: justify; } /* ─── MOBILE FIXES ─── */ @media (max-width: 767px) { /* Section padding — Tailwind py-28 (7rem) is too much on mobile. Exclude #home (hero) since it needs pt-24 to clear the fixed nav. */ section:not(#home) { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; } /* Footer padding */ footer { padding-top: 3rem !important; } /* Shrink hero watermark so it stays contained */ .hero-watermark { width: 180px; height: 180px; right: -20px; opacity: 0.04; } /* Hero title — smaller on phones */ h1.font-display { font-size: 2.2rem; line-height: 1.1; } /* Section h2 headings — reduce size on mobile */ h2.font-display { font-size: 2rem !important; line-height: 1.15 !important; } /* Hero buttons stack full-width */ .hero-cta-wrap { flex-direction: column; } .hero-cta-wrap a { width: 100%; text-align: center; } /* Stats counter numbers — smaller on mobile 2-column grid */ .counter.font-display, p.counter { font-size: 1rem; } [data-counter], .counter .foil { font-size: 2.2rem !important; } /* Division cards — reduce inner padding on mobile */ .division-card .card-body { padding: 1.25rem !important; } /* Division card image — shorter on mobile in 2-col grid */ .division-card .photo-fallback, .division-card .photo-fallback img { height: 120px !important; } /* Bento grid — fixed row height on mobile */ .auto-rows-\[180px\] { grid-auto-rows: 150px; } /* Process nodes */ .process-node { padding-top: 0; text-align: left; } /* Contact form — full-width inputs */ .contact-grid { grid-template-columns: 1fr; } /* Contact form card — less padding on mobile */ form.bg-white { padding: 1.5rem !important; } /* Footer gap */ footer .gap-12 { gap: 2rem !important; } /* Back-to-top clear of WhatsApp FAB */ #backToTop { bottom: 5rem; } /* Word reveal mobile overrides are now inlined in */ /* Horizontal padding for inner containers */ .max-w-8xl { padding-left: 1.25rem; padding-right: 1.25rem; } /* WhatsApp tooltip — force hidden on all mobile regardless of pointer type */ .whatsapp-tooltip { display: none !important; } /* Why Ethiopia photo — 420px is too tall on mobile */ .photo-fallback.h-\[420px\], .photo-fallback.h-\[520px\] { height: 260px !important; } /* Hero subheading — remove the justify and keep it readable */ #home p.leading-relaxed { text-align: left; } /* Trust strip — tighten the gap so items wrap more cleanly */ .trust-strip { gap: 0.75rem 1.5rem; padding-top: 1.25rem; padding-bottom: 1.25rem; } /* Company profile office image — limit height so it doesn't dominate */ #company-profile img { min-height: 220px !important; max-height: 300px; object-fit: cover; } /* Prevent long words and URLs from breaking layout */ p, li, h3 { overflow-wrap: break-word; word-break: break-word; } /* SVG map container — no horizontal overflow */ #presence .rounded-xl { overflow-x: auto; } } @media (max-width: 479px) { h1.font-display { font-size: 1.9rem; } h2.font-display { font-size: 1.75rem !important; } [data-counter], .counter .foil { font-size: 1.9rem !important; } }