:root { --gold: #C8960C; --gold-light: #E8B422; --gold-pale: #F5D87A; --copper: #9A6A18; --ember: #D7A20F; --petrol: #E8B422; --steel: #B7A15A; --black: #0A0A0A; --dark: #111111; --dark2: #1A1A1A; --dark3: #242424; --mid: #333333; --grey: #888888; --light-grey: #CCCCCC; --white: #F5F2EC; --red: #C0392B; --green: #27AE60; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { /* NOT smooth: CSS scroll-behavior: smooth on makes iOS Safari fight native touch/momentum scrolling — the "scroll up throws you back down" glitch. Anchor links get one-shot smooth scrolls from JS instead. */ scroll-behavior: auto; overflow-x: hidden; overflow-y: auto; max-width: 100%; background: var(--black); } body { background: #050606; color: var(--white); font-family: 'Manrope', 'Barlow', sans-serif; font-weight: 500; overflow-x: hidden; overflow-y: auto; max-width: 100%; width: 100%; font-style: normal; } em, i, cite, var, address, dfn, abbr { font-style: normal !important; } * { font-style: normal !important; } /* ─── ANIMATED BACKGROUND CANVAS ─── */ .ambient-bg { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; background: radial-gradient(ellipse at 50% 120%, rgba(200,150,12,0.22) 0%, rgba(200,150,12,0.055) 30%, transparent 58%), radial-gradient(circle at 82% 18%, rgba(245,216,122,0.13), transparent 30%), linear-gradient(115deg, rgba(5,6,6,0.99) 0%, rgba(10,10,8,0.95) 42%, rgba(5,5,4,0.99) 100%), repeating-linear-gradient(90deg, rgba(245,216,122,0.025) 0 1px, transparent 1px 96px); } .ambient-bg::before { content: ''; position: absolute; inset: -22% -10%; background: linear-gradient(104deg, transparent 2%, rgba(200,150,12,0.08) 13%, rgba(245,216,122,0.26) 21%, rgba(200,150,12,0.08) 30%, transparent 43%), linear-gradient(76deg, transparent 48%, rgba(245,216,122,0.18) 57%, rgba(200,150,12,0.08) 67%, transparent 80%); filter: blur(10px); opacity: 0.9; transform: translate3d(-4%, -2%, 0) rotate(-2deg); animation: ambientDrift 18s cubic-bezier(0.45,0,0.2,1) infinite alternate; } .ambient-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,245,205,0.04), transparent 18%, transparent 82%, rgba(0,0,0,0.42)), repeating-linear-gradient(0deg, transparent 0 58px, rgba(200,150,12,0.055) 59px 60px); mix-blend-mode: screen; opacity: 0.62; animation: gridFloat 22s linear infinite; } .ambient-ribbon { position: absolute; left: -20vw; width: 140vw; height: 30vh; border: 1px solid rgba(200,150,12,0.07); background: linear-gradient(90deg, transparent 0%, rgba(200,150,12,0.04) 18%, rgba(245,216,122,0.28) 46%, rgba(200,150,12,0.12) 62%, transparent 100%); filter: blur(14px); opacity: 0.86; transform: rotate(-7deg); animation: ribbonFlow 20s ease-in-out infinite alternate; } .ambient-ribbon.ribbon-a { top: 8vh; } .ambient-ribbon.ribbon-b { top: 54vh; animation-duration: 26s; animation-delay: -7s; opacity: 0.48; transform: rotate(5deg); } .ambient-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(245,216,122,0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(200,150,12,0.1) 1px, transparent 1px); background-size: 92px 92px; mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 72%, transparent 100%); opacity: 0.58; transform: perspective(780px) rotateX(62deg) translateY(20vh) scale(1.6); transform-origin: center bottom; animation: gridCrawl 18s linear infinite; } .ambient-sparks { position: absolute; inset: 0; background-image: radial-gradient(circle at 12% 22%, rgba(245,216,122,0.24) 0 1px, transparent 2px), radial-gradient(circle at 74% 18%, rgba(232,180,34,0.2) 0 1px, transparent 2px), radial-gradient(circle at 38% 68%, rgba(200,150,12,0.2) 0 1px, transparent 2px), radial-gradient(circle at 88% 78%, rgba(245,216,122,0.18) 0 1px, transparent 2px); background-size: 320px 320px, 440px 440px, 380px 380px, 520px 520px; opacity: 0.55; animation: emberLift 24s linear infinite; } .ambient-depth { position: absolute; inset: 18% -20% -22%; background: linear-gradient(90deg, transparent 0 46%, rgba(245,216,122,0.34) 49%, rgba(245,216,122,0.04) 50%, rgba(245,216,122,0.34) 51%, transparent 54%), repeating-conic-gradient(from 45deg at 50% 100%, rgba(245,216,122,0.18) 0deg 0.7deg, transparent 0.7deg 8deg); mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,0.88) 34%, transparent 78%); opacity: 0.34; transform: perspective(720px) rotateX(68deg) translateY(18vh) scale(1.15); transform-origin: center bottom; animation: depthPulse 8s ease-in-out infinite alternate; } .ambient-orbit { position: absolute; inset: -35%; background: conic-gradient(from 0deg at 50% 50%, transparent 0deg, rgba(245,216,122,0.16) 24deg, transparent 54deg, transparent 140deg, rgba(200,150,12,0.12) 176deg, transparent 214deg, transparent 360deg); opacity: 0.26; filter: blur(1px); animation: orbitSweep 32s linear infinite; } .ambient-orbit::after { content: ''; position: absolute; inset: 28%; border: 1px solid rgba(245,216,122,0.14); transform: rotate(45deg); box-shadow: 0 0 80px rgba(200,150,12,0.12), inset 0 0 70px rgba(245,216,122,0.08); } .ambient-scan { position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, rgba(245,216,122,0.08) 48%, rgba(245,216,122,0.28) 50%, rgba(245,216,122,0.08) 52%, transparent 100%); opacity: 0.32; transform: translateX(-120%); animation: goldScan 9s cubic-bezier(0.55,0,0.25,1) infinite; } @keyframes ambientDrift { 0% { transform: translate3d(-4%, -2%, 0) rotate(-2deg) scale(1); } 100% { transform: translate3d(3%, 4%, 0) rotate(2deg) scale(1.08); } } @keyframes ribbonFlow { 0% { transform: translateX(-3vw) rotate(-7deg); } 100% { transform: translateX(7vw) rotate(-2deg); } } @keyframes gridFloat { 0% { transform: translateY(0); } 100% { transform: translateY(60px); } } @keyframes gridCrawl { 0% { background-position: 0 0, 0 0; } 100% { background-position: 0 92px, 92px 0; } } @keyframes emberLift { 0% { background-position: 0 0, 0 0, 0 0, 0 0; } 100% { background-position: 0 -320px, 0 -440px, 0 -380px, 0 -520px; } } @keyframes depthPulse { 0% { opacity: 0.24; transform: perspective(720px) rotateX(68deg) translateY(22vh) scale(1.08); } 100% { opacity: 0.46; transform: perspective(720px) rotateX(65deg) translateY(12vh) scale(1.22); } } @keyframes goldScan { 0%, 12% { transform: translateX(-120%); opacity: 0; } 28% { opacity: 0.34; } 48%, 100% { transform: translateX(120%); opacity: 0; } } @keyframes orbitSweep { to { transform: rotate(360deg); } } /* ─── TICKER ─── */ .ticker-wrap { background: var(--gold); color: var(--black); font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; overflow: hidden; white-space: nowrap; padding: 6px 0; position: fixed; top: 0; left: 0; right: 0; z-index: 1000; } .ticker-inner { display: inline-block; animation: ticker 40s linear infinite; } .ticker-inner span { margin: 0 40px; } .tick-up { color: #1a5c2e; } .tick-down { color: #7a1515; } @keyframes ticker { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} } /* ─── NAV ─── */ nav { position: fixed; top: 30px; left: 0; right: 0; z-index: 999; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px clamp(18px, 4vw, 60px); background: rgba(10,10,10,0.97); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(200,150,12,0.2); width: 100%; } .nav-left { display: flex; align-items: center; flex: 1; } .nav-dept-logo img { height: 52px; object-fit: contain; opacity: 0.8; } .nav-dept-placeholder { height: 44px; width: 120px; background: rgba(200,150,12,0.12); border: 1px dashed rgba(200,150,12,0.3); display: flex; align-items: center; justify-content: center; font-family: 'Barlow Condensed', sans-serif; font-size: 9px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(200,150,12,0.5); text-align: center; padding: 4px 8px; } .nav-left { display: flex; align-items: center; gap: 14px; min-width: 0; } .nav-right { display: flex; align-items: center; justify-content: flex-end; gap: 16px; min-width: 0; } .nav-center { display: flex; align-items: center; justify-content: center; min-width: 0; flex: 0 1 auto; } .nav-center img { height: auto; max-height: 40px; width: auto; max-width: 150px; object-fit: contain; } .nav-center-text { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 600; color: var(--gold); letter-spacing: 0.12em; text-transform: uppercase; } .nav-right { display: flex; align-items: center; justify-content: flex-end; gap: 36px; } .nav-links { display: none; gap: 28px; list-style: none; } .nav-links a { font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--light-grey); text-decoration: none; transition: color 0.2s; } .nav-links a:hover { color: var(--gold); } /* ─── HAMBURGER ─── */ .hamburger { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 44px; height: 44px; background: none; border: 1px solid rgba(200,150,12,0.35); cursor: pointer; padding: 10px; gap: 5px; transition: border-color 0.2s; flex-shrink: 0; } .hamburger:hover { border-color: var(--gold); } .hamburger span { display: block; width: 22px; height: 1.5px; background: var(--gold); transition: transform 0.3s ease, opacity 0.3s ease; transform-origin: center; } .hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); } .hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* ─── MOBILE DRAWER ─── */ .mobile-nav { display: none; position: fixed; top: 0; right: 0; width: min(320px, 88vw); height: 100dvh; background: rgba(10,10,10,0.99); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-left: 1px solid rgba(200,150,12,0.18); z-index: 99990; flex-direction: column; padding: 120px 36px 48px; transform: translateX(100%); transition: transform 0.35s cubic-bezier(0.4,0,0.2,1); overflow-y: auto; } .mobile-nav.open { display: flex; transform: translateX(0); } .mobile-nav-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(2px); z-index: 99989; } .mobile-nav-overlay.open { display: block; } .mobile-nav-logo { font-family: 'Cormorant Garamond', serif; font-size: 18px; font-weight: 600; color: var(--gold); letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 40px; padding-bottom: 24px; border-bottom: 1px solid rgba(200,150,12,0.15); } .mobile-nav ul { list-style: none; display: flex; flex-direction: column; gap: 4px; flex: 1; } .mobile-nav ul li a { display: flex; align-items: center; gap: 14px; font-family: 'Barlow Condensed', sans-serif; font-size: 15px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(245,242,236,0.65); text-decoration: none; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.04); transition: color 0.2s; } .mobile-nav ul li a:hover { color: var(--gold); } .mobile-nav ul li a::before { content: ''; display: block; width: 4px; height: 4px; border-radius: 50%; background: var(--gold); opacity: 0.4; flex-shrink: 0; } .mobile-nav ul li a:hover::before { opacity: 1; } .mobile-nav-footer { margin-top: 32px; padding-top: 24px; border-top: 1px solid rgba(200,150,12,0.12); font-family: 'Barlow Condensed', sans-serif; font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(245,242,236,0.25); } /* ─── HERO ─── */ .hero { position: relative; height: 86vh; height: 86svh; min-height: 520px; display: flex; align-items: flex-end; overflow: hidden; margin-top: 30px; } .hero-bg { position: absolute; inset: 0; background: url('../hero-quarry-operations.webp') center center / cover no-repeat; background-attachment: scroll; filter: brightness(0.45); transform: scale(1.05); animation: heroZoom 12s ease-in-out infinite alternate; will-change: transform; } @keyframes heroZoom { 0%{transform:scale(1.05)} 100%{transform:scale(1.12)} } @media (max-width: 768px) { .hero { height: 100vh; height: 100svh; min-height: 580px; aspect-ratio: unset; align-items: flex-end; } .hero-bg { animation: none; transform: none; background-size: cover; background-position: center center; filter: brightness(0.38); } .hero-overlay { background: linear-gradient(to top, rgba(10,10,10,1) 0%, rgba(10,10,10,0.55) 45%, rgba(10,10,10,0.15) 100%); } .hero-content { padding: 0 20px 36px; width: 100%; max-width: 100%; } .hero-eyebrow { font-size: 10px; letter-spacing: 0.2em; margin-bottom: 12px; font-weight: 700; } .hero h1 { font-size: clamp(30px, 8vw, 52px); font-weight: 600; margin-bottom: 14px; } .hero-sub { font-size: 14px; line-height: 1.6; margin-bottom: 24px; max-width: 100%; font-weight: 500; color: rgba(245,242,236,0.85); } .hero-motto { font-size: 17px; } .btn-primary { padding: 13px 26px; font-size: 12px; font-weight: 700; } .btn-outline { padding: 12px 26px; font-size: 12px; font-weight: 700; margin-left: 10px; } } @media (max-width: 420px) { .hero h1 { font-size: clamp(26px, 7vw, 38px); font-weight: 600; } .hero .btn-primary, .hero .btn-outline { display: block; width: 100%; text-align: center; margin: 0 0 10px 0; } } .hero-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,10,10,1) 0%, rgba(10,10,10,0.3) 60%, transparent 100%); } .hero-content { position: relative; z-index: 2; padding: 0 60px 80px; max-width: min(900px, 100%); width: 100%; } .hero-eyebrow { font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); margin-bottom: 20px; display: flex; align-items: center; gap: 12px; } .hero-eyebrow::before { content:''; display:block; width:40px; height:1px; background:var(--gold); } .hero h1 { font-family: 'Cormorant Garamond', serif; font-size: clamp(32px, 7vw, 96px); font-weight: 600; line-height: 1.0; margin-bottom: 24px; color: var(--white); } .hero h1 span.gold { color: var(--gold-light); } .hero-sub { font-size: 16px; line-height: 1.7; color: rgba(245,242,236,0.72); max-width: 580px; margin-bottom: 40px; } .hero-motto { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-style: italic; color: rgba(245,242,236,0.88); max-width: 580px; letter-spacing: 0.02em; margin-bottom: 8px; } .hero-motto b, .hero-motto .gold { color: var(--gold-light); font-style: normal; } .btn-primary { display: inline-block; padding: 14px 40px; background: var(--gold); color: var(--black); font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; text-decoration: none; transition: background 0.2s, transform 0.2s; } .btn-primary:hover { background: var(--gold-light); transform: translateY(-2px); } .btn-outline { display: inline-block; padding: 13px 40px; border: 1px solid var(--gold); color: var(--gold); font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; text-decoration: none; margin-left: 16px; transition: background 0.2s, color 0.2s; } .btn-outline:hover { background: var(--gold); color: var(--black); } /* ─── SECTION COMMON ─── */ section { padding: 100px clamp(18px, 4vw, 60px); } .section-label { font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.35em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; display: flex; align-items: center; gap: 12px; } .section-label::before { content:''; display:block; width:30px; height:1px; background:var(--gold); } .section-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(30px, 3.4vw, 48px); font-weight: 600; line-height: 1.1; color: var(--white); margin-bottom: 20px; } .section-title span.gold { color: var(--gold); } .section-body { font-size: 15px; line-height: 1.85; color: rgba(245,242,236,0.65); max-width: 700px; } .gold-line { width: 60px; height: 2px; background: var(--gold); margin: 24px 0; } /* ─── HERO PARTNERS BANNER ─── */ .hero-partners-banner { background: var(--dark2); border-top: 1px solid rgba(200,150,12,0.18); border-bottom: 1px solid rgba(200,150,12,0.18); padding: 0; overflow: hidden; } .hero-partners-header { text-align: center; padding: 28px 24px 0; font-family: 'Barlow Condensed', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.35em; text-transform: uppercase; color: var(--grey); } .hero-partners-track-wrap { overflow: hidden; padding: 28px 0 32px; position: relative; } .hero-partners-track-wrap::before, .hero-partners-track-wrap::after { content: ''; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 2; pointer-events: none; } .hero-partners-track-wrap::before { left: 0; background: linear-gradient(to right, var(--dark2), transparent); } .hero-partners-track-wrap::after { right: 0; background: linear-gradient(to left, var(--dark2), transparent); } .hero-partners-track { display: flex; gap: 0; animation: hpSlide 30s linear infinite; width: max-content; } .hero-partners-track:hover { animation-play-state: paused; } @keyframes hpSlide { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} } .hp-logo { display: flex; align-items: center; justify-content: center; padding: 0 48px; border-right: 1px solid rgba(200,150,12,0.08); min-width: 160px; height: 72px; flex-shrink: 0; transition: background 0.3s; } .hp-logo:hover { background: rgba(200,150,12,0.06); } .hp-logo img { height: 40px; max-width: 110px; object-fit: contain; opacity: 0.85; filter: none; transition: opacity 0.3s, transform 0.3s; } .hp-logo:hover img { opacity: 1; transform: scale(1.08); } /* ─── OPERATIONS MODAL ─── */ .ops-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.88); z-index: 9998; align-items: center; justify-content: center; padding: 20px; backdrop-filter: blur(4px); } .ops-modal-overlay.open { display: flex; } .ops-modal-box { background: var(--dark2); border: 1px solid rgba(200,150,12,0.25); width: 100%; max-width: 860px; max-height: 88vh; overflow-y: auto; position: relative; display: grid; grid-template-columns: 1fr 1fr; } .ops-modal-img { position: relative; min-height: 340px; overflow: hidden; flex-shrink: 0; } .ops-modal-img img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.65) saturate(0.8); } .ops-modal-img-overlay { position: absolute; inset: 0; background: linear-gradient(to right, transparent 60%, var(--dark2) 100%); } .ops-modal-content { padding: 48px 40px; display: flex; flex-direction: column; justify-content: flex-start; overflow-y: auto; } .ops-modal-close { position: absolute; top: 14px; right: 14px; background: rgba(10,10,10,0.7); border: 1px solid rgba(200,150,12,0.4); color: var(--gold); width: 36px; height: 36px; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 10; transition: background 0.2s; } .ops-modal-close:hover { background: rgba(200,150,12,0.15); } .ops-modal-tag { font-family: 'Barlow Condensed', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; display: flex; align-items: center; gap: 10px; } .ops-modal-tag::before { content:''; display:block; width:24px; height:1px; background:var(--gold); } .ops-modal-box h2 { font-family: 'Cormorant Garamond', serif; font-size: 36px; font-weight: 600; color: var(--white); margin-bottom: 16px; line-height: 1.1; } .ops-modal-box .gold-line { width:48px; height:2px; background:var(--gold); margin:0 0 20px; } .ops-modal-box p { font-size: 13px; line-height: 1.85; color: rgba(245,242,236,0.62); margin-bottom: 14px; } .ops-modal-box ul { list-style:none; margin-top:12px; display:flex; flex-direction:column; gap:9px; } .ops-modal-box ul li { font-family: 'Barlow Condensed', sans-serif; font-size: 13px; letter-spacing:0.04em; color: rgba(245,242,236,0.72); display: flex; align-items: flex-start; gap: 10px; } .ops-modal-box ul li::before { content:'→'; color:var(--gold); flex-shrink:0; margin-top:1px; } @media (max-width: 700px) { .ops-modal-box { grid-template-columns: 1fr; } .ops-modal-img { min-height: 200px; } .ops-modal-img-overlay { background: linear-gradient(to bottom, transparent 60%, var(--dark2) 100%); } .ops-modal-content { padding: 28px 24px; } } /* ─── ABOUT ─── */ #about { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; background: var(--black); } .about-img { position: relative; height: 600px; overflow: hidden; } .about-img img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.8) saturate(0.9); } .about-img::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 40%; background: linear-gradient(to top, var(--black), transparent); } .about-badge { position: absolute; top: 30px; right: -20px; background: var(--gold); color: var(--black); padding: 20px 24px; text-align: center; z-index: 2; animation: badgeGlow 3s ease-in-out infinite alternate; } .about-badge strong { display: block; font-family: 'Cormorant Garamond', serif; font-size: 40px; font-weight: 700; line-height: 1; } .about-badge span { font-family: 'Barlow Condensed', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; } /* ─── OPERATIONS GRID ─── */ #operations { background: var(--dark); } .ops-intro { max-width: 680px; margin-bottom: 60px; } .ops-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-top: 60px; } .op-card { position: relative; overflow: hidden; height: 420px; cursor: pointer; transition: transform 0.4s cubic-bezier(0.16,1,0.3,1); } .op-card:hover { transform: scale(1.01); } .op-card:nth-child(1) { grid-column: span 2; } .op-card img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.5) saturate(0.7); transition: filter 0.5s, transform 0.5s; } .op-card:hover img { filter: brightness(0.65) saturate(0.9); transform: scale(1.04); } .op-card-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,10,10,0.95) 0%, rgba(10,10,10,0.2) 100%); display: flex; flex-direction: column; justify-content: flex-end; padding: 36px; transition: padding 0.3s; } .op-card-num { font-family: 'Cormorant Garamond', serif; font-size: 80px; font-weight: 600; color: rgba(200,150,12,0.18); line-height: 1; position: absolute; top: 20px; right: 30px; transition: color 0.4s, transform 0.4s; } .op-card:hover .op-card-num { color: rgba(200,150,12,0.32); transform: scale(1.1) translateY(-4px); } .op-tag { font-family: 'Barlow Condensed', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; } .op-card h3 { font-family: 'Cormorant Garamond', serif; font-size: 32px; font-weight: 400; color: var(--white); margin-bottom: 12px; } .op-card p { font-size: 13px; line-height: 1.7; color: rgba(245,242,236,0.6); max-height: 0; overflow: hidden; transition: max-height 0.4s ease; } .op-card:hover p { max-height: 120px; } .op-arrow { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold); opacity: 0; transition: opacity 0.3s; text-decoration: none; } .op-card:hover .op-arrow { opacity: 1; } /* ─── VISION MISSION VALUES ─── */ #vmv { background: var(--black); text-align: center; } .vmv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-top: 60px; } .vmv-card { background: var(--dark2); padding: 60px 44px; position: relative; overflow: hidden; border-top: 3px solid transparent; transition: border-color 0.3s, transform 0.3s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s; } .vmv-card:hover { border-top-color: var(--gold); transform: translateY(-6px); box-shadow: 0 20px 60px rgba(200,150,12,0.12); } .vmv-icon-img { width: 64px; height: 64px; object-fit: contain; margin: 0 auto 20px; display: block; filter: brightness(0) invert(0.7) sepia(1) saturate(2) hue-rotate(5deg); opacity: 0.85; transition: opacity 0.3s, transform 0.3s; } .vmv-card:hover .vmv-icon-img { opacity: 1; transform: scale(1.08); } .vmv-icon-placeholder { width: 64px; height: 64px; margin: 0 auto 20px; background: rgba(200,150,12,0.1); border: 1px dashed rgba(200,150,12,0.35); display: flex; align-items: center; justify-content: center; font-family: 'Barlow Condensed', sans-serif; font-size: 8px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(200,150,12,0.5); text-align: center; } .vmv-card h3 { font-family: 'Cormorant Garamond', serif; font-size: 32px; font-weight: 600; color: var(--gold); margin-bottom: 20px; } .vmv-card p { font-size: 14px; line-height: 1.8; color: rgba(245,242,236,0.6); } .vmv-values-list { list-style: none; margin-top: 16px; text-align: left; display: flex; flex-direction: column; gap: 10px; } .vmv-values-list li { font-size: 13px; color: rgba(245,242,236,0.65); display: flex; gap: 10px; align-items: flex-start; } .vmv-values-list li::before { content: 'â—†'; color: var(--gold); font-size: 8px; margin-top: 5px; flex-shrink: 0; } /* ─── BOARD OF DIRECTORS ─── */ #board { background: var(--dark); } .board-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; margin-top: 60px; } .board-img-wrap { position: relative; overflow: hidden; } .board-img-placeholder { width: 100%; aspect-ratio: 16/9; background: linear-gradient(135deg, var(--dark3) 0%, var(--dark2) 60%, rgba(200,150,12,0.06) 100%); border: 1px dashed rgba(200,150,12,0.25); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; min-height: 280px; max-height: 400px; } .board-actual-img { width: 100%; aspect-ratio: 16/9; object-fit: cover; object-position: center top; display: block; min-height: 280px; max-height: 400px; } .board-img-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 55%, rgba(17,17,17,0.55) 100%); pointer-events: none; } .board-placeholder-label { font-family: 'Barlow Condensed', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase; color: rgba(200,150,12,0.45); text-align: center; } .board-placeholder-icon { width: 56px; height: 56px; border: 1px solid rgba(200,150,12,0.2); display: flex; align-items: center; justify-content: center; } .board-placeholder-icon svg { width: 28px; height: 28px; opacity: 0.3; fill: var(--gold); } .board-content {} .board-intro-text { font-size: 15px; line-height: 1.85; color: rgba(245,242,236,0.62); margin-bottom: 40px; padding-bottom: 32px; border-bottom: 1px solid rgba(200,150,12,0.12); } .board-members { display: flex; flex-direction: column; gap: 18px; } .board-member { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: flex-start; gap: 20px; padding: 24px 28px; background: rgba(200,150,12,0.04); border: 1px solid rgba(200,150,12,0.1); border-left: 3px solid var(--gold); transition: background 0.3s, border-color 0.3s, transform 0.3s cubic-bezier(0.16,1,0.3,1); } .board-member:hover { background: rgba(200,150,12,0.08); border-color: rgba(200,150,12,0.3); border-left-color: var(--gold-light); transform: translateX(6px); } .board-member-photo { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; object-position: center; display: block; flex: 0 0 auto; border: 2px solid rgba(245,216,122,0.45); background: rgba(255,255,255,0.06); box-shadow: 0 14px 34px rgba(0,0,0,0.28); } .board-member-photo--blank { position: relative; overflow: hidden; background: linear-gradient(145deg, rgba(245,242,236,0.14), rgba(200,150,12,0.08)); } .board-member-photo--blank::before, .board-member-photo--blank::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); background: rgba(245,242,236,0.42); } .board-member-photo--blank::before { top: 20px; width: 27px; height: 27px; border-radius: 50%; } .board-member-photo--blank::after { bottom: 18px; width: 46px; height: 25px; border-radius: 18px 18px 8px 8px; } .board-member-body { min-width: 0; } .board-group-title { margin: 0 0 16px; font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-light); } .board-audit { margin-top: 28px; } .board-member-name { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 600; color: var(--white); line-height: 1.2; } .board-member-title { font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; } .board-member-desc { font-size: 13px; line-height: 1.75; color: rgba(245,242,236,0.55); } .board-footer-note { margin-top: 32px; padding-top: 24px; border-top: 1px solid rgba(200,150,12,0.1); font-size: 13px; line-height: 1.75; color: rgba(245,242,236,0.45); } @media (max-width: 900px) { .board-layout { grid-template-columns: 1fr; gap: 40px; } .board-actual-img, .board-img-placeholder { aspect-ratio: 16/9; min-height: 200px; max-height: 260px; } } @media (max-width: 560px) { .board-member { grid-template-columns: 68px minmax(0, 1fr); gap: 14px; padding: 20px; } .board-member-photo { width: 64px; height: 64px; } .board-member-photo--blank::before { top: 14px; width: 20px; height: 20px; } .board-member-photo--blank::after { bottom: 13px; width: 34px; height: 18px; } } /* ─── HEADQUARTERS ─── */ #headquarters { background: var(--black); } .hq-intro { max-width: 800px; margin-bottom: 50px; } .hq-collage { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .hq-item { position: relative; overflow: hidden; border: 1px solid rgba(200,150,12,0.15); background: var(--dark2); cursor: pointer; transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s, border-color 0.3s; } .hq-item:hover { border-color: var(--gold); transform: translateY(-4px); box-shadow: 0 16px 48px rgba(200,150,12,0.15); } .hq-item img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform 0.5s ease; position: relative; z-index: 1; } .hq-item:hover img { transform: scale(1.04); } .hq-blueprint-wrap { grid-column: 1 / -1; aspect-ratio: 3 / 2; } .hq-gallery-wrap { aspect-ratio: 4 / 3; } .hq-item .img-placeholder { position: absolute; inset: 0; z-index: 0; display: none; align-items: center; justify-content: center; background: linear-gradient(135deg, #1e1e1e 0%, #242424 100%); font-family: 'Barlow Condensed', sans-serif; font-size: 11px; letter-spacing: 0.15em; color: rgba(200,150,12,0.4); text-transform: uppercase; text-align: center; padding: 10px; } @media (max-width: 900px) { .hq-collage { grid-template-columns: repeat(2, 1fr); gap: 10px; } .hq-blueprint-wrap { aspect-ratio: 3 / 2; } } @media (max-width: 480px) { .hq-blueprint-wrap { aspect-ratio: 3 / 2; } .hq-gallery-wrap { aspect-ratio: 1 / 1; } } /* ─── SCHEMATICS ─── */ #schematics { background: var(--dark); } .schematics-tabs { display: flex; gap: 0; margin-bottom: 40px; border-bottom: 1px solid rgba(200,150,12,0.2); } .sch-tab { padding: 14px 32px; font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--grey); cursor: pointer; border-bottom: 2px solid transparent; transition: color 0.2s, border-color 0.2s; background: none; border-top: none; border-left: none; border-right: none; } .sch-tab.active { color: var(--gold); border-bottom-color: var(--gold); } .sch-tab:hover { color: var(--gold-light); } .sch-panel { display: none; } .sch-panel.active { display: block; } .sch-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .sch-item { background: var(--dark2); border: 1px solid rgba(200,150,12,0.1); overflow: hidden; cursor: pointer; transition: border-color 0.3s, transform 0.4s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s; } .sch-item:hover { border-color: var(--gold); transform: translateY(-6px); box-shadow: 0 16px 48px rgba(200,150,12,0.15); } /* ── sch-thumb ── */ .sch-thumb { min-height: 0; aspect-ratio: 559 / 306; overflow: hidden; background: #050505; position: relative; display: block; padding: 0; } #sch-vehicles .sch-thumb { aspect-ratio: 5 / 4; } .sch-thumb img { width: 100%; height: 100%; object-fit: contain; object-position: center; transform: none; transition: filter 0.35s ease; display: block; position: relative; z-index: 1; } .sch-item:hover .sch-thumb img { transform: none; } .sch-thumb .img-placeholder { position: absolute; inset: 0; z-index: 0; display: none; align-items: center; justify-content: center; background: linear-gradient(135deg, #1e1e1e 0%, #242424 100%); border-bottom: 1px solid rgba(200,150,12,0.08); } .sch-thumb .img-placeholder::after { content: ''; display: block; width: 32px; height: 32px; border: 1px solid rgba(200,150,12,0.2); border-radius: 50%; } .sch-info { padding: 20px 24px; } .sch-info h4 { font-family: 'Barlow Condensed', sans-serif; font-size: 15px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--white); margin-bottom: 6px; } .sch-info p { font-size: 12px; color: var(--grey); } /* ─── IMAGE MODAL ─── */ .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.92); z-index: 9999; align-items: center; justify-content: center; } .modal-overlay.open { display: flex; } .modal-box { background: var(--dark2); border: 1px solid rgba(200,150,12,0.3); max-width: 800px; width: 90%; padding: 40px; position: relative; max-height: 80vh; overflow-y: auto; } .modal-box img { width:100%; height:auto; object-fit: contain; max-height: 500px; } .modal-close { position: absolute; top: 16px; right: 16px; background: none; border: 1px solid var(--gold); color: var(--gold); width: 32px; height: 32px; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; } .modal-title { font-family: 'Barlow Condensed', sans-serif; font-size: 14px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold); margin-bottom: 20px; } /* ─── FINANCIALS ─── */ #financials { background: var(--black); } .fin-tabs { display:flex; gap:0; margin-bottom:40px; border-bottom:1px solid rgba(200,150,12,0.2); } .fin-tab { padding: 13px 28px; font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--grey); cursor: pointer; border-bottom: 2px solid transparent; background: none; border-top: none; border-left: none; border-right: none; transition: color 0.2s; } .fin-tab.active { color: var(--gold); border-bottom-color: var(--gold); } .fin-panel { display: none; } .fin-panel.active { display: block; } .fin-summary { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; margin-bottom: 40px; } .fin-kpi { background: var(--dark2); border: 1px solid rgba(200,150,12,0.12); padding: 28px 24px; border-top: 3px solid var(--gold); transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s; } .fin-kpi:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(200,150,12,0.1); } .fin-kpi-label { font-family: 'Barlow Condensed', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--grey); margin-bottom: 10px; } .fin-kpi-val { font-family: 'Cormorant Garamond', serif; font-size: 36px; font-weight: 600; color: var(--white); line-height: 1; } .fin-kpi-change { font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 600; margin-top: 6px; } .up { color: var(--green); } .down { color: var(--red); } .fin-table { width:100%; border-collapse: collapse; } .fin-table th { font-family: 'Barlow Condensed', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); text-align: left; padding: 12px 16px; border-bottom: 1px solid rgba(200,150,12,0.2); } .fin-table td { padding: 14px 16px; font-size: 13px; color: rgba(245,242,236,0.72); border-bottom: 1px solid rgba(255,255,255,0.04); } .fin-table tr:hover td { background: rgba(200,150,12,0.04); } .fin-table td:first-child { color: var(--white); font-weight: 500; } .fin-note { font-size: 11px; color: var(--grey); margin-top: 16px; } .document-section { background: var(--black); } .document-intro { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: end; margin-bottom: 46px; } .document-meta { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; max-width: 440px; } .document-pill { display: inline-flex; align-items: center; min-height: 34px; padding: 9px 13px; border: 1px solid rgba(245,216,122,0.2); background: rgba(245,216,122,0.055); color: rgba(245,242,236,0.78); font-family: 'Barlow Condensed', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; } .document-feature { display: block; margin-bottom: 22px; } .document-panel, .document-card { border: 1px solid rgba(200,150,12,0.2); background: linear-gradient(145deg, rgba(24,24,21,0.94), rgba(7,7,7,0.9)), radial-gradient(circle at 18% 0%, rgba(245,216,122,0.12), transparent 36%); box-shadow: 0 26px 80px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.05); } .document-panel { padding: clamp(28px, 4vw, 48px); position: relative; overflow: hidden; } .document-panel::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(245,216,122,0.1), transparent 36%), repeating-linear-gradient(135deg, transparent 0 18px, rgba(255,255,255,0.022) 19px 20px); pointer-events: none; } .document-panel > * { position: relative; z-index: 1; } .document-tag, .document-status { display: inline-flex; align-items: center; width: fit-content; min-height: 28px; padding: 7px 10px; border: 1px solid rgba(245,216,122,0.24); background: rgba(200,150,12,0.08); font-family: 'Barlow Condensed', sans-serif; font-size: 10px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-light); } .document-title { max-width: 720px; font-family: 'Cormorant Garamond', serif; font-size: clamp(34px, 4.2vw, 58px); font-weight: 600; line-height: 1.02; color: var(--white); margin: 18px 0 16px; } .document-copy { max-width: 680px; color: rgba(245,242,236,0.68); font-size: 14px; line-height: 1.82; margin-bottom: 22px; } .document-audit { display: grid; gap: 6px; max-width: 520px; padding: 16px 18px; border: 1px solid rgba(245,216,122,0.17); border-left: 3px solid var(--gold); background: rgba(200,150,12,0.075); color: rgba(245,242,236,0.74); font-size: 12px; line-height: 1.6; margin-bottom: 24px; } .document-audit strong { font-family: 'Barlow Condensed', sans-serif; color: var(--gold-light); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; } .document-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .document-link { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 12px 20px; border: 1px solid rgba(200,150,12,0.62); color: #0a0a0a; background: linear-gradient(135deg, var(--gold-light), var(--gold)); font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease; } .document-link:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(200,150,12,0.2); filter: brightness(1.06); } .document-file-type { display: flex; align-items: center; justify-content: center; border: 1px solid rgba(245,216,122,0.32); background: linear-gradient(160deg, rgba(245,242,236,0.95), rgba(222,208,167,0.9)); color: #111; font-family: 'Barlow Condensed', sans-serif; font-size: 10px; font-weight: 800; letter-spacing: 0.08em; } .document-view-label { color: rgba(245,216,122,0.86); font-family: 'Barlow Condensed', sans-serif; font-size: 10px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; } .document-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 16px; margin-top: 18px; } .document-card { min-height: 240px; padding: 22px; display: flex; flex-direction: column; gap: 14px; position: relative; overflow: hidden; transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; } .document-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--gold-light), transparent); opacity: 0.8; } .document-card:hover { transform: translateY(-4px); border-color: rgba(245,216,122,0.46); box-shadow: 0 24px 70px rgba(0,0,0,0.36); } .document-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; } .document-file-type { width: 44px; height: 54px; align-items: flex-end; padding-bottom: 8px; flex: 0 0 auto; } .document-card h3 { font-family: 'Cormorant Garamond', serif; font-size: 25px; line-height: 1.05; color: var(--white); } .document-card p { flex: 1; color: rgba(245,242,236,0.6); font-size: 13px; line-height: 1.68; } .document-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.06); } .document-card .document-link { min-height: 36px; padding: 9px 14px; font-size: 10px; } @media (max-width: 900px) { .document-intro { grid-template-columns: 1fr; gap: 18px; } .document-meta { justify-content: flex-start; } .document-grid { grid-template-columns: 1fr; } .document-view-label { grid-column: 2; } .document-card-footer { align-items: stretch; flex-direction: column; } .document-card .document-link { width: 100%; } } /* ─── PARTNERS ─── */ /* DOCUMENT LIBRARY ENHANCEMENTS */ .document-section { position: relative; overflow: hidden; background: radial-gradient(ellipse at 86% 8%, rgba(74,125,135,0.14), transparent 36%), radial-gradient(ellipse at 10% 100%, rgba(200,150,12,0.12), transparent 34%), linear-gradient(180deg, #050606 0%, #0b0b0a 52%, #050606 100%); } .document-section::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(90deg, transparent 0 48%, rgba(245,216,122,0.08) 49%, transparent 50%), repeating-linear-gradient(0deg, transparent 0 46px, rgba(255,255,255,0.025) 47px 48px), repeating-linear-gradient(90deg, transparent 0 78px, rgba(245,216,122,0.035) 79px 80px); mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 86%, transparent); opacity: 0.68; animation: docGridDrift 18s linear infinite; } .document-section::after { content: ''; position: absolute; left: -20%; right: -20%; top: 18%; height: 1px; z-index: 0; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(245,216,122,0.48), transparent); box-shadow: 0 0 42px rgba(245,216,122,0.22); animation: docScan 7s ease-in-out infinite; } .document-section > * { position: relative; z-index: 1; } .document-intro { align-items: center; margin-bottom: 50px; } .document-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: min(520px, 100%); max-width: none; } .document-pill { position: relative; justify-content: center; gap: 11px; min-height: 48px; padding: 10px 16px; overflow: hidden; border-color: rgba(245,216,122,0.28); background: rgba(12,13,12,0.72); box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); } .document-pill::before { content: none; } .document-pill-art { width: 30px; height: 30px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; color: var(--gold-light); border: 1px solid rgba(245,216,122,0.32); background: radial-gradient(circle at 30% 22%, rgba(245,216,122,0.22), transparent 44%), linear-gradient(145deg, rgba(255,255,255,0.08), rgba(255,255,255,0.018)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 12px 26px rgba(0,0,0,0.26); } .document-pill-art svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 6px 10px rgba(0,0,0,0.25)); } .document-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 340px); gap: clamp(24px, 4vw, 44px); align-items: stretch; border-color: rgba(245,216,122,0.34); background: linear-gradient(135deg, rgba(20,21,20,0.96), rgba(8,8,7,0.92)), radial-gradient(circle at 86% 20%, rgba(74,125,135,0.16), transparent 34%); } .document-panel::before { background: linear-gradient(110deg, rgba(245,216,122,0.12), transparent 28%), repeating-linear-gradient(135deg, transparent 0 18px, rgba(255,255,255,0.026) 19px 20px); } .document-panel::after { content: ''; position: absolute; inset: auto -15% 0 -15%; height: 42%; pointer-events: none; background: linear-gradient(100deg, transparent, rgba(245,216,122,0.11), transparent); transform: translateX(-70%) skewX(-18deg); animation: docPanelSweep 6.5s ease-in-out infinite; } .document-panel-main, .document-rail { position: relative; z-index: 1; } .document-kicker { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; } .document-feature-mark, .document-symbol { display: inline-flex; align-items: center; justify-content: center; color: var(--gold-light); border: 1px solid rgba(245,216,122,0.34); background: radial-gradient(circle at 32% 24%, color-mix(in srgb, currentColor 22%, transparent), transparent 38%), linear-gradient(145deg, rgba(255,255,255,0.12), rgba(255,255,255,0.025)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.09), inset 0 -18px 28px rgba(0,0,0,0.16), 0 16px 38px rgba(0,0,0,0.28); } .document-feature-mark { width: 60px; height: 60px; border-radius: 16px; animation: docFloat 4s ease-in-out infinite; } .document-feature-mark svg, .document-symbol svg { width: 42px; height: 42px; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; overflow: visible; filter: drop-shadow(0 8px 16px rgba(0,0,0,0.28)); } .document-tag { margin: 0; } .document-title { margin-top: 0; } .document-audit { border-left: 0; border-color: rgba(245,216,122,0.2); background: rgba(255,255,255,0.035); } .document-rail { display: grid; grid-template-columns: 1fr; gap: 12px; align-content: center; } .document-stat { min-height: 94px; padding: 18px; border: 1px solid rgba(245,216,122,0.18); background: rgba(255,255,255,0.035); } .document-stat strong { display: block; font-family: 'Cormorant Garamond', serif; font-size: 34px; line-height: 1; color: var(--white); } .document-stat span { display: block; margin-top: 8px; font-family: 'Barlow Condensed', sans-serif; font-size: 10px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(245,216,122,0.78); } .document-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; } .document-card { --doc-accent: var(--gold-light); min-height: 270px; border-color: rgba(245,216,122,0.18); background: linear-gradient(155deg, rgba(22,22,20,0.95), rgba(8,8,8,0.93)), radial-gradient(circle at 82% 12%, color-mix(in srgb, var(--doc-accent) 20%, transparent), transparent 34%); } .document-card[data-tone="governance"] { --doc-accent: #7da9c4; } .document-card[data-tone="safety"] { --doc-accent: #5fbf8a; } .document-card[data-tone="media"] { --doc-accent: #d3a94d; } .document-card[data-tone="vendor"] { --doc-accent: #c98a58; } .document-card::before { width: 4px; background: linear-gradient(180deg, var(--doc-accent), transparent); } .document-card::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(120deg, transparent 0%, color-mix(in srgb, var(--doc-accent) 14%, transparent) 48%, transparent 72%); opacity: 0; transform: translateX(-34%); transition: opacity 0.25s ease, transform 0.45s ease; } .document-card:hover::after { opacity: 1; transform: translateX(34%); } .document-symbol { width: 64px; height: 64px; border-radius: 16px; color: var(--doc-accent); transition: transform 0.25s ease, border-color 0.25s ease; } .document-card:hover .document-symbol { transform: translateY(-2px) rotate(-4deg); border-color: color-mix(in srgb, var(--doc-accent) 55%, transparent); } .document-file-type { position: relative; width: 42px; height: 52px; border-color: color-mix(in srgb, var(--doc-accent, var(--gold-light)) 42%, transparent); background: linear-gradient(160deg, rgba(245,242,236,0.96), rgba(214,203,170,0.92)); } .document-file-type::before { content: ''; position: absolute; top: -1px; right: -1px; width: 14px; height: 14px; background: linear-gradient(135deg, rgba(255,255,255,0.95) 0 50%, rgba(180,162,113,0.95) 51% 100%); border-left: 1px solid rgba(17,17,17,0.14); border-bottom: 1px solid rgba(17,17,17,0.14); } .document-status { border-color: color-mix(in srgb, var(--doc-accent, var(--gold-light)) 38%, transparent); color: color-mix(in srgb, var(--doc-accent, var(--gold-light)) 88%, #ffffff); background: color-mix(in srgb, var(--doc-accent, var(--gold-light)) 10%, transparent); } .document-card h3, .document-card p, .document-card-footer, .document-card-top { position: relative; z-index: 1; } .document-link { gap: 10px; box-shadow: 0 10px 30px rgba(200,150,12,0.12); } .document-link::after { content: '>'; font-size: 14px; line-height: 1; transition: transform 0.2s ease; } .document-link:hover::after { transform: translateX(3px); } @keyframes docGridDrift { to { background-position: 0 48px, 0 48px, 80px 0; } } @keyframes docScan { 0%, 18% { transform: translateY(-40px); opacity: 0; } 42% { opacity: 0.8; } 74%, 100% { transform: translateY(360px); opacity: 0; } } @keyframes docPanelSweep { 0%, 24% { transform: translateX(-80%) skewX(-18deg); opacity: 0; } 42% { opacity: 1; } 70%, 100% { transform: translateX(80%) skewX(-18deg); opacity: 0; } } @keyframes docFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } @media (max-width: 900px) { .document-meta { grid-template-columns: 1fr; width: 100%; } .document-panel { grid-template-columns: 1fr; } .document-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 560px) { .document-kicker { align-items: flex-start; flex-direction: column; gap: 12px; } .document-rail { grid-template-columns: 1fr; } .document-card { min-height: 0; } } @media (prefers-reduced-motion: reduce) { .document-section::before, .document-section::after, .document-panel::after, .document-feature-mark { animation: none; } } #partners { background: var(--dark2); padding: 60px; overflow: hidden; } .partners-title { font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--grey); text-align: center; margin-bottom: 36px; } .partner-track { display: flex; gap: 60px; animation: partnerSlide 25s linear infinite; width: max-content; } .partner-track img { height: 52px; width: 120px; object-fit: contain; opacity: 0.85; filter: none; transition: opacity 0.3s, transform 0.3s; } .partner-track img:hover { opacity: 1; transform: scale(1.08); } @keyframes partnerSlide { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} } .partners-overflow { overflow: hidden; } /* ─── FOOTER ─── */ footer { background: var(--dark); border-top: 1px solid rgba(200,150,12,0.15); padding: 60px; } .footer-grid { display: grid; grid-template-columns: 1.8fr 1fr 1fr 1fr; gap: 60px; margin-bottom: 50px; } .footer-dept-logo { height: 70px; width: auto; object-fit: contain; margin-bottom: 16px; opacity: 0.75; display: block; } .footer-brand p { font-size: 13px; line-height: 1.8; color: rgba(245,242,236,0.45); margin-top: 12px; } .footer-col h4 { font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.25em; text-transform: uppercase; color: var(--gold); margin-bottom: 20px; } .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; } .footer-col ul a { font-size: 13px; color: rgba(245,242,236,0.45); text-decoration: none; transition: color 0.2s; } .footer-col ul a:hover { color: var(--gold); } .footer-bottom { border-top: 1px solid rgba(255,255,255,0.06); padding-top: 28px; display: flex; justify-content: space-between; align-items: center; } .footer-bottom p { font-size: 11px; color: rgba(245,242,236,0.3); letter-spacing: 0.05em; } .footer-bottom .footer-logo img { height: 36px; object-fit: contain; opacity: 0.5; } /* ─── SCROLL ANIMATION SYSTEM ─── */ .fade-in { opacity: 0; transform: translateY(40px); transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1); } .fade-in.visible { opacity: 1; transform: translateY(0); } .fade-in.hidden { opacity: 0; transform: translateY(40px); transition: opacity 0.4s ease, transform 0.4s ease; } .fade-left { opacity: 0; transform: translateX(-60px); transition: opacity 0.9s cubic-bezier(0.16,1,0.3,1), transform 0.9s cubic-bezier(0.16,1,0.3,1); } .fade-left.visible { opacity: 1; transform: translateX(0); } .fade-left.hidden { opacity: 0; transform: translateX(-60px); transition: opacity 0.4s ease, transform 0.4s ease; } .fade-right { opacity: 0; transform: translateX(60px); transition: opacity 0.9s cubic-bezier(0.16,1,0.3,1), transform 0.9s cubic-bezier(0.16,1,0.3,1); } .fade-right.visible { opacity: 1; transform: translateX(0); } .fade-right.hidden { opacity: 0; transform: translateX(60px); transition: opacity 0.4s ease, transform 0.4s ease; } .scale-in { opacity: 0; transform: scale(0.88); transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1); } .scale-in.visible { opacity: 1; transform: scale(1); } .scale-in.hidden { opacity: 0; transform: scale(0.88); transition: opacity 0.4s ease, transform 0.4s ease; } .card-slide { opacity: 0; transform: translateX(-50px); transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1); } .card-slide.visible { opacity: 1; transform: translateX(0); } .card-slide.hidden { opacity: 0; transform: translateX(-50px); transition: opacity 0.3s ease, transform 0.3s ease; } .stagger-1 { transition-delay: 0.05s; } .stagger-2 { transition-delay: 0.15s; } .stagger-3 { transition-delay: 0.25s; } .stagger-4 { transition-delay: 0.38s; } .stagger-5 { transition-delay: 0.52s; } .stagger-6 { transition-delay: 0.66s; } .stagger-7 { transition-delay: 0.80s; } .stagger-8 { transition-delay: 0.94s; } .stagger-9 { transition-delay: 1.08s; } .stagger-10 { transition-delay: 1.22s; } .reveal-line { width: 0; height: 2px; background: linear-gradient(to right, var(--gold), var(--gold-pale), var(--gold)); transition: width 1.2s cubic-bezier(0.16,1,0.3,1); margin: 24px 0; } .reveal-line.visible { width: 80px; } .reveal-line.hidden { width: 0; transition: width 0.3s ease; } /* ─── JESKO-STYLE TEXT REVEALS (ported from the homepage) ─── .mask-reveal headings: each word hides behind its own mask and slides up with a cascade. [data-lines]: paragraphs reveal line by line. [data-letters]: small labels tick in letter by letter. Scoped under html.hm-reveal so text stays visible if JS never runs. */ html.hm-reveal .mask-reveal .mr-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.14em; margin-bottom: -0.14em; } html.hm-reveal .mask-reveal .mr-wi { display: inline-block; transform: translateY(118%); transition: transform 0.95s cubic-bezier(0.16,1,0.3,1); transition-delay: calc(var(--mr-i, 0) * 60ms); will-change: transform; } html.hm-reveal .mask-reveal.is-in .mr-wi { transform: translateY(0); will-change: auto; } html.hm-reveal [data-lines] .ll-line { display: block; overflow: hidden; padding-bottom: 0.16em; margin-bottom: -0.16em; } html.hm-reveal [data-lines] .ll-inner { display: block; transform: translateY(120%); transition: transform 1s cubic-bezier(0.16,1,0.3,1); transition-delay: calc(var(--ll-i, 0) * 90ms); will-change: transform; } html.hm-reveal [data-lines].is-in .ll-inner { transform: translateY(0); will-change: auto; } html.hm-reveal [data-letters] .lt { display: inline-block; transform: translateY(0.7em); opacity: 0; transition: transform 0.6s cubic-bezier(0.16,1,0.3,1), opacity 0.6s ease; transition-delay: calc(var(--lt-i, 0) * 30ms); will-change: transform, opacity; } html.hm-reveal [data-letters].is-in .lt { transform: translateY(0); opacity: 1; will-change: auto; } @media (prefers-reduced-motion: reduce) { html.hm-reveal .mask-reveal .mr-wi, html.hm-reveal [data-lines] .ll-inner, html.hm-reveal [data-letters] .lt { transform: none !important; opacity: 1 !important; transition: none !important; } } .shine { position: relative; overflow: hidden; } .shine::after { content: ''; position: absolute; top: -50%; left: -75%; width: 50%; height: 200%; background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(200,150,12,0.12) 50%, rgba(255,255,255,0) 100%); transform: skewX(-20deg); pointer-events: none; } .shine:hover::after { left: 125%; transition: left 0.65s ease; } @keyframes pulseDot { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: 0.5; } } .pulse-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); animation: pulseDot 2s ease-in-out infinite; margin-right: 8px; vertical-align: middle; } @keyframes floatParticle { 0% { transform: translateY(0) rotate(0deg); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(-120px) rotate(360deg); opacity: 0; } } .particle { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--gold); pointer-events: none; } .hero-eyebrow { animation: slideUp 0.8s 0.3s cubic-bezier(0.16,1,0.3,1) both; } .hero h1 { animation: slideUp 0.9s 0.5s cubic-bezier(0.16,1,0.3,1) both; } .hero-sub { animation: slideUp 0.9s 0.7s cubic-bezier(0.16,1,0.3,1) both; } .hero-motto { animation: slideUp 0.9s 0.7s cubic-bezier(0.16,1,0.3,1) both; } @keyframes slideUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes jetFadeIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } @keyframes pricePulse { 0%, 100% { filter: drop-shadow(0 0 8px rgba(46,204,113,0.35)); } 50% { filter: drop-shadow(0 0 20px rgba(46,204,113,0.7)); } } @keyframes badgeGlow { from { box-shadow: 0 0 0 rgba(200,150,12,0); } to { box-shadow: 0 0 30px rgba(200,150,12,0.6); } } .divider { border: none; height: 1px; background: rgba(200,150,12,0.15); margin: 0; } /* PAGE LOADER */ #page-loader { position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0; background: var(--black); z-index: 99999; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 24px; animation: loaderFade 0.5s 2s ease forwards; isolation: isolate; } @keyframes loaderFade { to { opacity: 0; visibility: hidden; pointer-events: none; } } #page-loader .loader-logo-img { height: 80px; width: auto; object-fit: contain; animation: loaderLogoIn 0.6s 0.1s cubic-bezier(0.16,1,0.3,1) both; opacity: 0.9; } #page-loader .loader-logo { font-family: 'Cormorant Garamond', serif; font-size: 28px; font-weight: 700; color: var(--gold); letter-spacing: 0.3em; text-transform: uppercase; animation: loaderLogoIn 0.6s 0.2s cubic-bezier(0.16,1,0.3,1) both; } @keyframes loaderLogoIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } #page-loader .loader-bar-wrap { width: 200px; height: 1px; background: rgba(200,150,12,0.2); overflow: hidden; position: relative; } #page-loader .loader-bar { height: 100%; background: var(--gold); width: 0; animation: loadBar 1.6s 0.4s cubic-bezier(0.16,1,0.3,1) forwards; } @keyframes loadBar { to { width: 100%; } } #page-loader .loader-sub { font-family: 'Barlow Condensed', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(200,150,12,0.5); animation: loaderLogoIn 0.6s 0.5s cubic-bezier(0.16,1,0.3,1) both; } nav { animation: navSlide 0.7s 0.1s cubic-bezier(0.16,1,0.3,1) both; } @keyframes navSlide { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .ticker-wrap { animation: tickerFadeIn 1s 0.2s ease both; } @keyframes tickerFadeIn { from { opacity: 0; } to { opacity: 1; } } /* PREMIUM VISUAL UPGRADE */ body > section, body > footer, body > .hero-partners-banner, body > #partners, body > .divider, body > .cta-band { position: relative; z-index: 1; } ::selection { background: rgba(232,180,34,0.34); color: #fff8df; } img { max-width: 100%; -webkit-user-drag: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; pointer-events: none; } html, body { touch-action: pan-x pan-y; overscroll-behavior: none; } .ticker-wrap { background: linear-gradient(90deg, #f5d87a 0%, #d9a80d 44%, #9f7408 100%); box-shadow: 0 14px 40px rgba(0,0,0,0.38); } nav { left: clamp(12px, 3vw, 42px); right: clamp(12px, 3vw, 42px); width: auto; padding: 14px clamp(16px, 3vw, 34px); background: rgba(7,9,9,0.74); border: 1px solid rgba(245,216,122,0.2); border-radius: 8px; box-shadow: 0 24px 70px rgba(0,0,0,0.48), inset 0 1px 0 rgba(255,255,255,0.06); } @supports ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) { nav, .mobile-nav, .ops-modal-box, .modal-box { backdrop-filter: blur(10px) saturate(1.1); -webkit-backdrop-filter: blur(10px) saturate(1.1); } } .nav-dept-logo img { height: 52px; opacity: 0.9; } .nav-center img { height: 38px; filter: drop-shadow(0 12px 28px rgba(200,150,12,0.22)); } .nav-links { gap: 22px; } .nav-links a { position: relative; color: rgba(245,242,236,0.72); transition: color 0.25s ease, text-shadow 0.25s ease; } .nav-links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -9px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-light), transparent); transform: scaleX(0); transform-origin: center; transition: transform 0.25s ease; } .nav-links a:hover { color: #fff6d6; text-shadow: 0 0 18px rgba(232,180,34,0.28); } .nav-links a:hover::after { transform: scaleX(1); } .nav-links a.active { color: var(--gold-light); text-shadow: 0 0 18px rgba(232,180,34,0.35); } .nav-links a.active::after { transform: scaleX(1); } @media (max-width: 1300px) { .nav-links { gap: 18px; } .nav-links a { font-size: 12px; } .nav-center img { height: 44px; } .nav-right { gap: 22px; } } .hamburger { border-radius: 8px; background: rgba(255,255,255,0.03); } section { isolation: isolate; background: transparent !important; padding: clamp(82px, 9vw, 132px) clamp(20px, 5vw, 76px); } section[id], footer[id] { scroll-margin-top: 150px; } section::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(5,6,6,0.74), rgba(8,10,10,0.56)), linear-gradient(90deg, rgba(200,150,12,0.07), transparent 38%, rgba(245,216,122,0.045)); border-top: 1px solid rgba(245,216,122,0.055); border-bottom: 1px solid rgba(255,255,255,0.035); } #operations::before, #board::before, #schematics::before { background: linear-gradient(180deg, rgba(12,14,14,0.82), rgba(6,7,7,0.62)), linear-gradient(115deg, rgba(245,216,122,0.05), transparent 44%, rgba(200,150,12,0.07)); } #vmv::before, #headquarters::before, #financials::before { background: linear-gradient(180deg, rgba(4,5,5,0.7), rgba(12,13,12,0.6)), linear-gradient(90deg, transparent 0%, rgba(200,150,12,0.055) 48%, rgba(245,216,122,0.04) 100%); } .divider { height: 0; margin: 0; background: transparent; border: none; } .section-label, .hero-eyebrow { color: #f5d87a; text-shadow: 0 0 24px rgba(200,150,12,0.28); } .section-label::before, .hero-eyebrow::before { background: linear-gradient(90deg, transparent, var(--gold-light)); } .section-title { max-width: 900px; letter-spacing: 0; text-wrap: balance; position: relative; } .section-title::after { content: ''; position: absolute; left: 0; bottom: -16px; width: min(220px, 45vw); height: 1px; background: linear-gradient(90deg, rgba(245,216,122,0.9), rgba(245,216,122,0)); box-shadow: 0 0 18px rgba(232,180,34,0.4); transform-origin: left; animation: titleBeam 5.5s ease-in-out infinite; } .section-title .gold, .hero h1 span.gold { color: #e8b422; text-shadow: 0 0 32px rgba(232,180,34,0.28); } .section-body, .board-intro-text, .board-footer-note, .fin-note { color: rgba(245,242,236,0.7); } .hero { min-height: 760px; align-items: center; isolation: isolate; } .hero::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(5,6,6,0.92) 0%, rgba(5,6,6,0.55) 42%, rgba(5,6,6,0.14) 72%), linear-gradient(180deg, rgba(0,0,0,0.28), transparent 45%, rgba(5,6,6,0.94) 100%); pointer-events: none; } .hero::after { content: ''; position: absolute; inset: auto 0 0; height: 38%; z-index: 1; background: linear-gradient(180deg, transparent, rgba(5,6,6,0.98)); pointer-events: none; } .hero-bg { background-position: center; filter: brightness(0.62) contrast(1.08) saturate(0.95); transform: scale(1.02); animation: heroZoom 18s ease-in-out infinite alternate; } .hero-overlay { display: none; } .hero-content { padding: 130px clamp(20px, 6vw, 86px) 84px; max-width: 1060px; } .hero-eyebrow { width: fit-content; max-width: 100%; padding: 10px 14px; border: 1px solid rgba(245,216,122,0.22); border-radius: 8px; background: rgba(7,9,9,0.48); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); } .hero h1 { max-width: 900px; text-shadow: 0 26px 70px rgba(0,0,0,0.72); } .hero-sub { display: block; max-width: 670px; color: rgba(245,242,236,0.78); font-size: 16px; line-height: 1.8; } .hero-stat-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 760px; margin-top: 34px; } .hero-stat { border: 1px solid rgba(245,216,122,0.18); border-radius: 8px; padding: 15px 16px; background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.025)); box-shadow: 0 22px 60px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.08); } .hero-stat strong { display: block; font-family: 'Cormorant Garamond', serif; font-size: 28px; line-height: 1; color: #fff3c5; } .hero-stat span { display: block; margin-top: 8px; font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(245,242,236,0.62); } .btn-primary, .btn-outline { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; border-radius: 8px; box-shadow: 0 18px 46px rgba(0,0,0,0.28); transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease, color 0.25s ease; } .btn-primary { background: linear-gradient(135deg, #f5d87a 0%, #d9a80d 52%, #9f7408 100%); } .btn-outline { background: rgba(255,255,255,0.035); border-color: rgba(245,216,122,0.52); } .btn-primary::after, .btn-outline::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,0.28) 45%, transparent 62%); transform: translateX(-120%); transition: transform 0.55s ease; } .btn-primary:hover, .btn-outline:hover { transform: translateY(-3px); box-shadow: 0 24px 70px rgba(200,150,12,0.22); } .btn-primary:hover::after, .btn-outline:hover::after { transform: translateX(120%); } .hero-partners-banner, #partners, footer { background: rgba(8,9,7,0.66) !important; border-color: rgba(245,216,122,0.12); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .hero-partners-track-wrap::before { background: linear-gradient(to right, rgba(8,10,10,0.95), transparent); } .hero-partners-track-wrap::after { background: linear-gradient(to left, rgba(8,10,10,0.95), transparent); } .hp-logo { border-right-color: rgba(245,216,122,0.08); transition: background 0.25s ease, transform 0.25s ease; } .hp-logo:hover { background: rgba(245,216,122,0.06); transform: translateY(-2px); } .about-img, .board-img-wrap, .hq-item, .op-card, .vmv-card, .sch-item, .fin-kpi, .modal-box, .ops-modal-box { border-radius: 8px; border: 1px solid rgba(245,216,122,0.14); box-shadow: 0 26px 80px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.055); } .about-img::before, .board-img-wrap::before, .hq-item::before { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(105deg, transparent 0%, rgba(245,216,122,0.16) 46%, transparent 58%); transform: translateX(-130%); transition: transform 0.7s cubic-bezier(0.16,1,0.3,1); } .about-img:hover::before, .board-img-wrap:hover::before, .hq-item:hover::before { transform: translateX(130%); } .about-img, .board-img-wrap, .hq-item, .op-card, .sch-item { transform: translateZ(0); } .about-img img, .board-actual-img, .hq-item img, .op-card img, .sch-thumb img { filter: brightness(0.76) contrast(1.06) saturate(0.94); } .about-img:hover img, .board-img-wrap:hover img, .hq-item:hover img, .op-card:hover img, .sch-item:hover .sch-thumb img { filter: brightness(0.92) contrast(1.08) saturate(1.03); } .about-badge { right: 22px; border-radius: 8px; background: linear-gradient(135deg, #f5d87a, #c8960c 58%, #9f7408); box-shadow: 0 18px 46px rgba(200,150,12,0.28); } .op-card { height: 440px; isolation: isolate; } .op-card::before, .vmv-card::before, .sch-item::before, .fin-kpi::before, .board-member::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(245,216,122,0.18), transparent 34%); transition: opacity 0.25s ease; z-index: 2; } .op-card:hover::before, .vmv-card:hover::before, .sch-item:hover::before, .fin-kpi:hover::before, .board-member:hover::before { opacity: 1; } .op-card-overlay { z-index: 1; background: linear-gradient(to top, rgba(5,6,6,0.96) 0%, rgba(5,6,6,0.55) 46%, rgba(5,6,6,0.08) 100%), linear-gradient(135deg, rgba(200,150,12,0.08), transparent 44%); } .op-card h3, .vmv-card h3, .board-member-name, .sch-info h4 { letter-spacing: 0; } .op-arrow { border: 0; background: transparent; cursor: pointer; } .vmv-card, .board-member, .sch-item, .fin-kpi { position: relative; overflow: hidden; background: linear-gradient(145deg, rgba(255,255,255,0.08), rgba(255,255,255,0.026)); } .vmv-card:hover, .board-member:hover, .sch-item:hover, .fin-kpi:hover { border-color: rgba(245,216,122,0.38); box-shadow: 0 30px 90px rgba(0,0,0,0.38), 0 0 44px rgba(200,150,12,0.10); } .vmv-icon-img { filter: drop-shadow(0 12px 24px rgba(200,150,12,0.24)); } .board-member { border-left: 1px solid rgba(245,216,122,0.2); } .hq-collage { gap: 18px; } .hq-item::after, .sch-item::after { content: ''; position: absolute; inset: 0; border: 1px solid rgba(255,255,255,0.055); border-radius: inherit; pointer-events: none; z-index: 3; } .sch-info { background: linear-gradient(180deg, rgba(9,10,8,0.92), rgba(14,13,9,0.98)); border-top: 1px solid rgba(245,216,122,0.12); } .schematics-tabs, .fin-tabs { width: fit-content; max-width: 100%; padding: 6px; gap: 6px; border: 1px solid rgba(245,216,122,0.14); border-radius: 8px; background: rgba(255,255,255,0.035); } .sch-tab, .fin-tab { border: 0; border-radius: 6px; padding: 12px 22px; } .sch-tab.active, .fin-tab.active { color: #0a0a0a; background: linear-gradient(135deg, #f5d87a, #c8960c); box-shadow: 0 10px 32px rgba(200,150,12,0.2); } .fin-summary { gap: 16px; } .fin-kpi { border-top: 1px solid rgba(245,216,122,0.2); } .fin-kpi-val { color: #fff4cf; text-shadow: 0 0 24px rgba(200,150,12,0.18); } .fin-table { border-collapse: separate; border-spacing: 0; overflow: hidden; border: 1px solid rgba(245,216,122,0.13); border-radius: 8px; background: rgba(7,9,9,0.66); box-shadow: 0 26px 80px rgba(0,0,0,0.28); } .fin-table th { background: rgba(245,216,122,0.055); } .fin-table td, .fin-table th { border-bottom-color: rgba(255,255,255,0.055); } .cta-band { min-height: 380px; border-top: 1px solid rgba(245,216,122,0.13); border-bottom: 1px solid rgba(245,216,122,0.13); } .cta-band .section-label::before { background: linear-gradient(90deg, transparent, #f5d87a, transparent); } footer { padding: 70px clamp(20px, 5vw, 76px); } .footer-grid { border: 1px solid rgba(245,216,122,0.1); border-radius: 8px; padding: clamp(24px, 4vw, 42px); background: linear-gradient(145deg, rgba(255,255,255,0.055), rgba(255,255,255,0.018)); } @media (max-width: 900px) { .ambient-ribbon { height: 24vh; filter: blur(18px); opacity: 0.56; } .ambient-grid { opacity: 0.28; transform: perspective(600px) rotateX(62deg) translateY(34vh) scale(1.8); } .ambient-depth { opacity: 0.24; transform: perspective(600px) rotateX(66deg) translateY(34vh) scale(1.35); } .ambient-orbit { opacity: 0.16; } nav { left: 10px; right: 10px; padding: 12px 14px; } .hero { min-height: 680px; align-items: flex-end; } .hero-content { padding: 0 20px 42px; } .hero-eyebrow { width: auto; display: inline-flex; font-size: 10px; } .hero-stat-row { grid-template-columns: 1fr; gap: 10px; margin-top: 24px; } .hero-stat { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .hero-stat span { margin-top: 0; text-align: right; } .schematics-tabs, .fin-tabs { width: 100%; } .sch-tab, .fin-tab { flex: 0 0 auto; } .sch-thumb { min-height: 0; padding: 0; } .footer-grid { padding: 24px; } } /* ─── MOBILE PERFORMANCE / NO-HANG SAFETY ─── */ @media (max-width: 900px) { #bg-canvas { display: none !important; } #page-loader { animation: loaderFade 0.45s 3s ease forwards; } #page-loader .loader-bar { animation: loadBar 1.8s 0.35s cubic-bezier(0.16,1,0.3,1) forwards; } #page-loader .loader-logo-img, #page-loader .loader-logo, #page-loader .loader-sub { animation-duration: 0.5s; } .hero-bg { background-color: var(--black); } /* Disable backdrop-filter on mobile — causes pink screen / GPU hang on iOS/Android */ nav, .mobile-nav, .mobile-nav-overlay, .ops-modal-overlay, .modal-overlay, .fin-kpi, .vmv-card, .board-member, .sch-item { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } nav { background: rgba(10,10,10,0.98) !important; } .mobile-nav { background: #0f0f0f !important; } .mobile-nav-overlay { background: rgba(0,0,0,0.75) !important; } } #page-loader.force-hide { opacity: 0 !important; pointer-events: none !important; visibility: hidden !important; display: none !important; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } #bg-canvas { display: none !important; } } /* ── RESPONSIVE ── */ @media (max-width: 900px) { html, body { width: 100%; max-width: 100vw; overflow-x: hidden; } nav { padding: 12px 18px; width: 100%; } .nav-links { display: none; } .hamburger { display: flex; } .nav-center img { height: 34px; } .nav-dept-placeholder { width: 80px; font-size: 8px; height: 36px; } section { padding: 52px 20px; width: 100%; } .section-title { font-size: clamp(30px, 7vw, 44px); } .section-body { font-size: 14px; line-height: 1.8; } #about { grid-template-columns: 1fr; gap: 32px; } #mining { grid-template-columns: 1fr; gap: 32px; } .segment { grid-template-columns: 1fr; } .ops-grid { grid-template-columns: 1fr; gap: 3px; } .op-card:nth-child(1) { grid-column: span 1; } .vmv-grid { grid-template-columns: 1fr; gap: 2px; } .fin-summary { grid-template-columns: repeat(2, 1fr); } .footer-grid { grid-template-columns: 1fr; gap: 36px; } .sch-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .segment.reverse { direction: ltr; } .segment .seg-img { order: -1; min-height: 260px; } .seg-content { padding: 32px 20px; border: none !important; border-top: 3px solid rgba(200,150,12,0.15) !important; } .seg-content h2 { font-size: clamp(28px, 6vw, 40px); } footer { padding: 44px 20px; } .footer-bottom { flex-direction: column; gap: 14px; text-align: center; } .fin-tabs, .schematics-tabs { overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; padding-bottom: 4px; scrollbar-width: none; } .fin-tabs::-webkit-scrollbar, .schematics-tabs::-webkit-scrollbar { display: none; } .fin-summary { gap: 12px; } .fin-kpi { padding: 20px 16px; } .fin-kpi-val { font-size: 28px; } .fin-table { font-size: 11px; overflow-x: auto; display: block; } .fin-table th, .fin-table td { padding: 10px 10px; } .about-img { height: 280px; } .about-badge { right: 0; top: 20px; } .about-badge strong { font-size: 32px; } .mining-img { height: 260px; } .hp-logo { min-width: 110px; padding: 0 18px; } .hero-partners-track-wrap { padding: 20px 0 24px; } .op-card { height: 260px; } .op-card p { max-height: 80px; } .op-card-overlay { padding: 24px 20px; } .op-card h3 { font-size: 24px; } .vmv-card { padding: 44px 28px; } .vmv-card h3 { font-size: 28px; } div[style*="height:360px"] { height: auto !important; padding: 70px 20px !important; } .ops-modal-box { grid-template-columns: 1fr; max-height: 92vh; } .ops-modal-img { min-height: 200px; } .ops-modal-content { padding: 28px 20px; } .ops-modal-box h2 { font-size: 28px; } .modal-box { padding: 28px 20px; } .hero-partners-track-wrap::before, .hero-partners-track-wrap::after { width: 40px; } #partners { padding: 40px 0 !important; } .partners-title { font-size: 10px; letter-spacing: 0.25em; margin-bottom: 28px; padding: 0 20px; } .partner-track img { height: 42px; width: 100px; } .partner-track { gap: 44px; } } @media (max-width: 480px) { .sch-grid { grid-template-columns: 1fr; } .fin-summary { grid-template-columns: 1fr; } section { padding: 44px 16px; } .ops-modal-content { padding: 20px 16px; } .op-card { height: 230px; } .vmv-card { padding: 36px 22px; } .fin-kpi-val { font-size: 26px; } .hero-content { padding: 0 16px 28px; } /* Compact nav so the requisition button + hamburger never clip past the viewport edge */ nav { gap: 8px; padding: 10px 12px !important; } .nav-dept-logo img { height: 34px; } .shop-cart-btn { padding: 5px 8px; font-size: 10px; letter-spacing: 0.1em; gap: 6px; } .shop-cart-btn svg { width: 13px; height: 13px; } .nav-right { gap: 6px; } } /* Final responsive polish after legacy mobile rules */ @media (max-width: 900px) { nav { left: 10px !important; right: 10px !important; width: auto !important; padding: 12px 14px !important; border-radius: 8px; background: rgba(7,9,9,0.94) !important; } section { background: transparent !important; } .hero-sub { display: block; font-size: 14px; line-height: 1.7; margin-bottom: 22px; } .hero-stat-row { display: grid; grid-template-columns: 1fr; margin-top: 22px; } .hero-stat { padding: 13px 14px; } .op-card { border-radius: 8px; } .ambient-sparks { opacity: 0.42; } } @media (prefers-reduced-motion: reduce) { .ambient-sparks { display: none; } } /* Extra premium motion layer */ .hero h1 { position: relative; } .hero h1::after { content: ''; position: absolute; left: 0; bottom: -20px; width: min(420px, 70vw); height: 1px; background: linear-gradient(90deg, rgba(245,216,122,0), rgba(245,216,122,0.85), rgba(245,216,122,0)); box-shadow: 0 0 22px rgba(232,180,34,0.55); transform-origin: left; animation: titleBeam 4.5s ease-in-out infinite; } .hero .btn-primary, .hero .btn-outline { animation-delay: 0.72s; } .op-card, .vmv-card, .sch-item, .fin-kpi, .hq-item { isolation: isolate; } .op-card::after, .vmv-card::after, .fin-kpi::after { content: ''; position: absolute; inset: -1px; z-index: 3; pointer-events: none; border-radius: inherit; background: linear-gradient(115deg, transparent 0%, rgba(245,216,122,0.34) 46%, transparent 58%); opacity: 0; transform: translateX(-120%); } .op-card:hover::after, .vmv-card:hover::after, .fin-kpi:hover::after { opacity: 1; animation: cardGlint 0.9s cubic-bezier(0.16,1,0.3,1); } .sch-item { transition: border-color 0.28s ease, transform 0.45s cubic-bezier(0.16,1,0.3,1), box-shadow 0.35s ease, background 0.35s ease; } .sch-item:hover { background: linear-gradient(145deg, rgba(245,216,122,0.065), rgba(255,255,255,0.018)); } .sch-item:hover .sch-info h4 { color: #f5d87a; text-shadow: 0 0 18px rgba(232,180,34,0.22); } .section-label { animation: labelPulse 4s ease-in-out infinite; } @keyframes titleBeam { 0%, 100% { transform: scaleX(0.36); opacity: 0.35; } 50% { transform: scaleX(1); opacity: 1; } } @keyframes cardGlint { from { transform: translateX(-120%); } to { transform: translateX(120%); } } @keyframes labelPulse { 0%, 100% { filter: drop-shadow(0 0 0 rgba(232,180,34,0)); } 50% { filter: drop-shadow(0 0 14px rgba(232,180,34,0.26)); } } /* Keep the brand hero cinematic while revealing the next section */ .hero { height: min(760px, calc(100svh - 86px)) !important; min-height: 590px; } @media (max-width: 900px) { .hero { height: min(690px, calc(100svh - 84px)) !important; min-height: 560px; } .hero h1 { font-size: 52px; } .hero-stat-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .hero-stat { display: block; padding: 11px 10px; min-height: 74px; } .hero-stat strong { font-size: 24px; } .hero-stat span { margin-top: 7px; text-align: left; font-size: 9px; letter-spacing: 0.12em; } } @media (max-width: 480px) { .hero { height: calc(100svh - 78px) !important; min-height: 540px; } .hero h1 { font-size: 44px; } .hero-sub { font-size: 13px; line-height: 1.6; margin-bottom: 18px; } .hero-stat { padding: 10px 8px; min-height: 68px; } .hero-stat strong { font-size: 22px; } .hero-stat span { font-size: 8px; } } /* Sharp executive background replacement */ .ambient-ribbon, .ambient-grid, .ambient-depth, .ambient-orbit, .ambient-scan, .ambient-sparks { display: none !important; } .ambient-bg { background: radial-gradient(ellipse at 50% 108%, rgba(200,150,12,0.18) 0%, rgba(200,150,12,0.052) 28%, transparent 58%), linear-gradient(115deg, #030403 0%, #090907 42%, #020202 100%) !important; } .ambient-bg::before { inset: 0 !important; filter: none !important; opacity: 0.78 !important; transform: none !important; background: linear-gradient(114deg, transparent 0 17%, rgba(245,216,122,0.055) 17.2% 17.45%, transparent 17.7% 100%), linear-gradient(66deg, transparent 0 62%, rgba(200,150,12,0.065) 62.2% 62.45%, transparent 62.7% 100%), linear-gradient(90deg, rgba(245,216,122,0.018) 1px, transparent 1px), linear-gradient(0deg, rgba(245,216,122,0.012) 1px, transparent 1px) !important; background-size: 100% 100%, 100% 100%, 84px 84px, 84px 84px !important; animation: sharpPanelShift 24s linear infinite !important; } .ambient-bg::after { inset: 0 !important; mix-blend-mode: normal !important; opacity: 0.92 !important; background: linear-gradient(180deg, rgba(0,0,0,0.06) 0%, transparent 34%, rgba(0,0,0,0.58) 100%), linear-gradient(90deg, rgba(0,0,0,0.72), transparent 22%, transparent 78%, rgba(0,0,0,0.72)) !important; animation: none !important; } .ambient-architecture { position: absolute; inset: 30px clamp(18px, 3vw, 44px); border: 1px solid rgba(245,216,122,0.1); background: linear-gradient(90deg, rgba(245,216,122,0.34), transparent 16%) top left / 240px 1px no-repeat, linear-gradient(90deg, transparent, rgba(245,216,122,0.34)) top right / 240px 1px no-repeat, linear-gradient(90deg, rgba(245,216,122,0.28), transparent 18%) bottom left / 280px 1px no-repeat, linear-gradient(90deg, transparent, rgba(245,216,122,0.28)) bottom right / 280px 1px no-repeat; opacity: 0.64; } .ambient-architecture::before, .ambient-architecture::after { content: ''; position: absolute; width: 92px; height: 92px; border-color: rgba(245,216,122,0.34); border-style: solid; } .ambient-architecture::before { top: -1px; left: -1px; border-width: 1px 0 0 1px; } .ambient-architecture::after { right: -1px; bottom: -1px; border-width: 0 1px 1px 0; } /* IDLE PAUSE (subpages): when the tab is hidden or the window blurred (switching apps on a phone), every decorative infinite animation pauses — the ambient layers, ticker and ribbons are invisible anyway, and this stops the GPU compositing them in the background. CSS animations resume exactly where they paused, so the look is identical on return. */ html.hm-idle *, html.hm-idle *::before, html.hm-idle *::after { animation-play-state: paused !important; } .ambient-topography { position: absolute; inset: -12% -8%; background: repeating-radial-gradient(ellipse at 82% 18%, transparent 0 34px, rgba(245,216,122,0.1) 35px, transparent 37px), repeating-radial-gradient(ellipse at 18% 76%, transparent 0 44px, rgba(200,150,12,0.08) 45px, transparent 47px); opacity: 0.42; animation: topoGlide 30s linear infinite; } .ambient-lanes { position: absolute; inset: 0; background: linear-gradient(112deg, transparent 0 28%, rgba(245,216,122,0.12) 28.2% 28.35%, transparent 28.55% 100%), linear-gradient(112deg, transparent 0 45%, rgba(200,150,12,0.11) 45.2% 45.35%, transparent 45.55% 100%), linear-gradient(112deg, transparent 0 69%, rgba(245,216,122,0.1) 69.2% 69.35%, transparent 69.55% 100%); opacity: 0.72; animation: laneDrift 14s linear infinite; } .ambient-horizon { position: absolute; inset: 28% -12% -18%; transform: perspective(920px) rotateX(64deg) translateY(12vh) scale(1.16); transform-origin: center bottom; background-image: linear-gradient(rgba(245,216,122,0.24) 1px, transparent 1px), linear-gradient(90deg, rgba(200,150,12,0.22) 1px, transparent 1px), linear-gradient(90deg, transparent 0 48%, rgba(245,216,122,0.58) 49.7%, rgba(245,216,122,0.08) 50%, rgba(245,216,122,0.58) 50.3%, transparent 52%); background-size: 110px 110px, 110px 110px, 100% 100%; mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,0.88) 54%, transparent 92%); opacity: 0.78; animation: horizonCrawl 10s linear infinite; } .ambient-horizon::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 8%, rgba(245,216,122,0.14) 8.15% 8.35%, transparent 8.5% 16%), repeating-linear-gradient(0deg, transparent 0 16%, rgba(245,216,122,0.08) 16.1% 16.3%, transparent 16.45% 32%); opacity: 0.62; animation: horizonPulse 5s ease-in-out infinite alternate; } .ambient-nodes { position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(245,216,122,0.56) 0 1px, transparent 2px), radial-gradient(circle, rgba(200,150,12,0.34) 0 1px, transparent 2px); background-size: 138px 138px, 220px 220px; background-position: 0 0, 64px 44px; opacity: 0.34; animation: nodePan 22s linear infinite; } .ambient-tracer { position: absolute; left: -24vw; width: 42vw; height: 1px; background: linear-gradient(90deg, transparent, rgba(245,216,122,0.22), rgba(245,216,122,0.95), transparent); opacity: 0; transform-origin: left center; } .ambient-tracer::after { content: ''; position: absolute; right: 22%; top: -3px; width: 7px; height: 7px; border: 1px solid rgba(245,216,122,0.8); transform: rotate(45deg); background: #060604; } .tracer-a { --angle: 18deg; top: 24%; animation: tracerRun 7.5s ease-in-out infinite; } .tracer-b { --angle: -12deg; top: 58%; animation: tracerRun 9s 1.6s ease-in-out infinite; } .tracer-c { --angle: 9deg; top: 78%; animation: tracerRun 10.5s 3.2s ease-in-out infinite; } section::before { background: linear-gradient(180deg, rgba(5,6,6,0.58), rgba(8,10,10,0.42)), linear-gradient(90deg, rgba(200,150,12,0.035), transparent 38%, rgba(245,216,122,0.025)) !important; } #operations::before, #board::before, #schematics::before { background: linear-gradient(180deg, rgba(7,8,7,0.66), rgba(4,5,5,0.44)), linear-gradient(115deg, rgba(245,216,122,0.035), transparent 44%, rgba(200,150,12,0.05)) !important; } #vmv::before, #headquarters::before, #financials::before { background: linear-gradient(180deg, rgba(4,5,5,0.58), rgba(12,13,12,0.42)), linear-gradient(90deg, transparent 0%, rgba(200,150,12,0.04) 48%, rgba(245,216,122,0.026) 100%) !important; } @keyframes sharpPanelShift { to { background-position: 0 0, 0 0, 84px 0, 0 84px; } } @keyframes topoGlide { to { transform: translate3d(-80px, 44px, 0); } } @keyframes laneDrift { 0% { transform: translateX(-4%); opacity: 0.42; } 50% { opacity: 0.82; } 100% { transform: translateX(4%); opacity: 0.42; } } @keyframes horizonCrawl { to { background-position: 0 110px, 110px 0, 0 0; } } @keyframes horizonPulse { from { opacity: 0.36; } to { opacity: 0.72; } } @keyframes nodePan { to { background-position: 138px -138px, -156px 220px; } } @keyframes tracerRun { 0%, 12% { opacity: 0; transform: translateX(0) rotate(var(--angle)); } 20%, 58% { opacity: 1; } 76%, 100% { opacity: 0; transform: translateX(150vw) rotate(var(--angle)); } } @media (max-width: 900px) { .ambient-architecture { inset: 22px 14px; opacity: 0.42; } .ambient-horizon { inset: 40% -35% -16%; opacity: 0.52; transform: perspective(620px) rotateX(66deg) translateY(18vh) scale(1.38); } .ambient-topography { opacity: 0.26; } .ambient-lanes { opacity: 0.42; } .ambient-nodes { opacity: 0.22; } } /* Corporate compliance, enquiry, finance, and sharper executive background refinements */ .hero-sub{max-width:760px;color:rgba(245,242,236,.74);font-size:clamp(14px,1.45vw,18px);line-height:1.8;margin:20px auto 30px} .hero-partners-note{margin:12px auto 0;max-width:760px;color:rgba(245,242,236,.52);font-size:11px;line-height:1.65;letter-spacing:.08em;text-transform:uppercase;text-align:center;padding:0 24px} .hero-partners-banner .hero-partners-track-wrap{padding-top:24px!important} .credibility-ribbon .ticker-inner span{color:rgba(245,242,236,.72)} .ticker-wrap{background:linear-gradient(90deg,#060604,#d6ae49,#050504)!important;box-shadow:0 0 32px rgba(214,174,73,.24)} .credibility-ribbon .ticker-inner span{color:#050504!important;font-weight:800} .credibility-ribbon .ticker-inner strong{color:#050504!important} .credibility-ribbon .tick-up{color:#0c5a23!important} .credibility-ribbon .tick-down{color:#5b190f!important} .fin-summary{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))!important} .fin-kpi p{margin-top:12px;color:rgba(245,242,236,.54);font-size:12px;line-height:1.55} .disclaimer-section,.corporate-enquiries{position:relative;z-index:1} .disclaimer-shell,.enquiry-shell{width:min(1180px,calc(100% - 48px));margin:0 auto;border:1px solid rgba(214,174,73,.22);background:linear-gradient(135deg,rgba(10,10,8,.86),rgba(22,18,10,.72));box-shadow:0 28px 80px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.05);backdrop-filter:blur(18px)} .disclaimer-shell{padding:clamp(34px,5vw,64px)} .disclaimer-shell p{color:rgba(245,242,236,.68);font-size:14px;line-height:1.85;max-width:980px;margin-top:18px} .enquiry-shell{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(24px,4vw,56px);padding:clamp(28px,5vw,60px);overflow:hidden} .enquiry-copy{align-self:center}.enquiry-note{margin-top:22px;color:rgba(214,174,73,.78);font-size:13px;line-height:1.75} .corporate-form{border:1px solid rgba(214,174,73,.14);border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0) 45%),rgba(0,0,0,.42);padding:clamp(22px,3vw,34px);box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 18px 50px rgba(0,0,0,.3)} .form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 16px} .corporate-form label{display:flex;flex-direction:column;gap:9px;color:rgba(214,174,73,.72);font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase} .corporate-form input,.corporate-form select,.corporate-form textarea{width:100%;border:1px solid rgba(214,174,73,.22);border-radius:9px;background:rgba(5,5,4,.65);color:var(--white);padding:13px 15px;font:14px/1.45 'Manrope','Inter',sans-serif;outline:none;transition:border-color .25s ease,box-shadow .25s ease,background .25s ease} .corporate-form input::placeholder,.corporate-form textarea::placeholder{color:rgba(245,242,236,.3)} .corporate-form select{appearance:none;-webkit-appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23d6ae49' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:38px} .corporate-form select:invalid{color:rgba(245,242,236,.35)} .corporate-form textarea{resize:vertical;min-height:140px}.corporate-form input:focus,.corporate-form select:focus,.corporate-form textarea:focus{border-color:rgba(214,174,73,.75);background:rgba(10,10,8,.85);box-shadow:0 0 0 4px rgba(214,174,73,.12),0 0 26px rgba(214,174,73,.08)} .corporate-form .form-submit{position:relative;overflow:hidden} .corporate-form .form-submit::after{content:'';position:absolute;top:0;bottom:0;left:-80%;width:55%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);transition:left .5s ease;pointer-events:none} .corporate-form .form-submit:hover::after{left:130%} .form-wide{grid-column:1/-1}.form-submit{margin-top:20px;margin-left:0;width:100%;justify-content:center}.form-message{min-height:22px;margin-top:14px;font-size:13px;line-height:1.5}.form-message.success{color:rgba(214,174,73,.94)}.form-message.error{color:#ffb3a8} .ambient-bg{opacity:1!important;background:radial-gradient(circle at 15% 18%,rgba(214,174,73,.22),transparent 28%),radial-gradient(circle at 86% 12%,rgba(245,242,236,.10),transparent 24%),#030302!important;filter:none!important} .ambient-bg::before{content:'';position:absolute;inset:-18% -8%;opacity:.72;background:linear-gradient(112deg,transparent 0 12%,rgba(214,174,73,.28) 12.4% 12.9%,transparent 13.2% 29%,rgba(245,242,236,.12) 29.3% 29.6%,transparent 30% 48%,rgba(214,174,73,.18) 48.4% 49%,transparent 49.4% 100%),repeating-linear-gradient(90deg,rgba(214,174,73,.18) 0 1px,transparent 1px 96px),repeating-linear-gradient(0deg,rgba(245,242,236,.08) 0 1px,transparent 1px 72px);transform:perspective(920px) rotateX(56deg) translateY(-15vh) scale(1.12);transform-origin:50% 0%;animation:executiveGridDrive 11s linear infinite} .ambient-bg::after{content:'';position:absolute;inset:0;opacity:.7;background:linear-gradient(180deg,rgba(214,174,73,.18),transparent 18%,transparent 76%,rgba(214,174,73,.16)),repeating-linear-gradient(120deg,transparent 0 160px,rgba(214,174,73,.12) 160px 162px,transparent 162px 280px),repeating-linear-gradient(60deg,transparent 0 220px,rgba(245,242,236,.08) 220px 221px,transparent 221px 340px);animation:executiveSweep 18s ease-in-out infinite alternate} .ambient-architecture{inset:0!important;opacity:.95!important;filter:none!important;background:linear-gradient(90deg,transparent 0 10%,rgba(214,174,73,.22) 10.2% 10.55%,transparent 10.8% 22%,rgba(245,242,236,.1) 22.2% 22.45%,transparent 22.7% 40%,rgba(214,174,73,.18) 40.2% 40.55%,transparent 40.8% 100%),repeating-linear-gradient(90deg,transparent 0 130px,rgba(214,174,73,.13) 130px 132px,transparent 132px 260px)!important;animation:executiveColumnShift 16s linear infinite!important} .ambient-topography{opacity:.58!important;filter:none!important;background:repeating-radial-gradient(ellipse at 50% 42%,transparent 0 34px,rgba(214,174,73,.14) 35px 36px,transparent 37px 72px)!important;animation:executiveTopo 20s linear infinite!important} .ambient-lanes{opacity:.72!important;filter:none!important;background:linear-gradient(90deg,transparent,rgba(214,174,73,.3),transparent),repeating-linear-gradient(90deg,transparent 0 180px,rgba(245,242,236,.11) 180px 181px,transparent 181px 360px)!important;animation:executiveLaneRun 8s linear infinite!important} .ambient-horizon{opacity:.95!important;height:34vh!important;top:24vh!important;filter:none!important;background:linear-gradient(90deg,transparent 0 6%,rgba(214,174,73,0) 6%,rgba(214,174,73,.58) 22%,rgba(245,242,236,.20) 50%,rgba(214,174,73,.58) 78%,transparent 94%),repeating-linear-gradient(90deg,transparent 0 90px,rgba(214,174,73,.22) 90px 92px,transparent 92px 180px)!important;animation:executiveHorizon 6s ease-in-out infinite alternate!important} .ambient-nodes{opacity:.68!important;filter:none!important;background-image:radial-gradient(circle,rgba(214,174,73,.82) 0 1.5px,transparent 2px)!important;background-size:92px 92px!important;animation:executiveNodePulse 9s linear infinite!important} .ambient-tracer{opacity:.9!important;filter:none!important;background:linear-gradient(90deg,transparent,rgba(214,174,73,0),rgba(214,174,73,.96),rgba(245,242,236,.64),transparent)!important} .hero::before{background:linear-gradient(90deg,rgba(5,6,6,.92) 0%,rgba(5,6,6,.58) 42%,rgba(5,6,6,.18) 72%),linear-gradient(180deg,rgba(0,0,0,.26),transparent 45%,rgba(5,6,6,.94) 100%),repeating-linear-gradient(92deg,transparent 0 118px,rgba(214,174,73,.16) 118px 120px,transparent 120px 236px),linear-gradient(112deg,transparent 0 32%,rgba(214,174,73,.22) 32.2% 32.6%,transparent 32.9% 68%,rgba(245,242,236,.10) 68.2% 68.5%,transparent 68.9% 100%)!important;animation:heroExecutiveScan 14s linear infinite!important} @keyframes heroExecutiveScan{0%{background-position:0 0,0 0,0 0,-12vw 0}100%{background-position:0 0,0 0,360px 0,112vw 0}} @keyframes executiveGridDrive{0%{background-position:0 0,0 0,0 0}100%{background-position:260px 190px,192px 0,0 144px}}@keyframes executiveColumnShift{0%{background-position:0 0,0 0}100%{background-position:260px 0,520px 0}}@keyframes executiveTopo{0%{background-position:0 0;transform:scale(1)}100%{background-position:180px 120px;transform:scale(1.04)}}@keyframes executiveLaneRun{0%{background-position:-40vw 0,0 0}100%{background-position:120vw 0,360px 0}}@keyframes executiveHorizon{0%{transform:translateY(-10px) scaleX(1);opacity:.72}100%{transform:translateY(14px) scaleX(1.04);opacity:1}}@keyframes executiveNodePulse{0%{background-position:0 0;opacity:.42}50%{opacity:.78}100%{background-position:92px 92px;opacity:.42}}@keyframes executiveSweep{0%{transform:translate3d(-2%,-1%,0);opacity:.48}100%{transform:translate3d(2%,2%,0);opacity:.78}} @media(max-width:900px){.hero-sub{font-size:14px;line-height:1.65}.enquiry-shell{grid-template-columns:1fr;width:min(100% - 28px,720px)}.form-grid{grid-template-columns:1fr}.disclaimer-shell{width:min(100% - 28px,720px)}.ambient-bg::before{transform:perspective(760px) rotateX(58deg) translateY(-10vh) scale(1.2);opacity:.62}} /* Wellness-style canvas background replacement */ #bg-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:1;background:radial-gradient(circle at 18% 16%,rgba(214,174,73,.16),transparent 30%),radial-gradient(circle at 82% 18%,rgba(245,216,122,.12),transparent 26%),radial-gradient(circle at 50% 88%,rgba(214,174,73,.10),transparent 34%),#050504;filter:saturate(1.18) contrast(1.06)} .ambient-bg{display:none!important} body>#bg-canvas~*:not(script){position:relative;z-index:1} #page-loader{z-index:9999!important} .hero::before{background:linear-gradient(90deg,rgba(5,6,6,.92) 0%,rgba(5,6,6,.58) 42%,rgba(5,6,6,.16) 72%),linear-gradient(180deg,rgba(0,0,0,.22),transparent 45%,rgba(5,6,6,.94) 100%)!important;animation:none!important} /* Mobile visibility and readability fixes */ @media(max-width:900px){ #bg-canvas{display:block!important;opacity:1!important;visibility:visible!important;filter:saturate(1.35) contrast(1.14) brightness(1.18)!important} body::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(circle at 22% 18%,rgba(214,174,73,.22),transparent 34%),radial-gradient(circle at 82% 72%,rgba(245,216,122,.14),transparent 30%),repeating-linear-gradient(90deg,rgba(245,216,122,.045) 0 1px,transparent 1px 74px),repeating-linear-gradient(0deg,rgba(214,174,73,.035) 0 1px,transparent 1px 74px);animation:mobileBgDrift 14s linear infinite} .about-badge{top:14px!important;right:14px!important;padding:12px 13px!important;max-width:145px;border-radius:7px!important;box-shadow:0 14px 34px rgba(0,0,0,.34),0 0 22px rgba(214,174,73,.28)!important} .about-badge strong{font-size:clamp(23px,7vw,30px)!important;line-height:.95!important} .about-badge span{display:block;margin-top:6px;font-size:8px!important;line-height:1.25!important;letter-spacing:.11em!important} #operations .op-card{height:320px!important} #operations .op-card img{filter:brightness(.38) contrast(1.12) saturate(.9)!important;transform:scale(1.02)} #operations .op-card-overlay{padding:24px 18px!important;background:linear-gradient(180deg,rgba(0,0,0,.58) 0%,rgba(0,0,0,.66) 38%,rgba(0,0,0,.96) 100%),linear-gradient(115deg,rgba(214,174,73,.18),transparent 46%)!important;justify-content:flex-end} #operations .op-tag{font-size:10px!important;letter-spacing:.24em!important;color:#f5d87a!important;text-shadow:0 2px 16px rgba(0,0,0,.95),0 0 14px rgba(214,174,73,.6)} #operations .op-card h3{font-size:clamp(30px,8.5vw,38px)!important;line-height:1.02!important;margin-bottom:10px!important;text-shadow:0 4px 22px rgba(0,0,0,1),0 1px 2px rgba(0,0,0,.9)} #operations .op-card p{max-height:none!important;overflow:visible!important;color:rgba(255,255,255,.9)!important;font-size:14px!important;line-height:1.48!important;font-weight:600;text-shadow:0 3px 18px rgba(0,0,0,1),0 1px 2px rgba(0,0,0,.95)} #operations .op-card-num{opacity:.55;top:14px!important;right:16px!important;font-size:72px!important;color:rgba(214,174,73,.18)!important} } @media(max-width:480px){ .about-badge{max-width:128px!important;padding:10px 11px!important} .about-badge strong{font-size:24px!important} #operations .op-card{height:300px!important} #operations .op-card-overlay{padding:22px 15px!important} #operations .op-card p{font-size:13.5px!important;line-height:1.45!important} } @keyframes mobileBgDrift{0%{background-position:0 0,0 0,0 0,0 0;opacity:.72}50%{opacity:1}100%{background-position:0 0,0 0,148px 0,0 148px;opacity:.72}} /* Requested minor fixes: lighter What We Do cards, stable centered modals, and top spacing cleanup */ html, body { margin: 0 !important; padding: 0 !important; } .ticker-wrap { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; z-index: 1000 !important; } nav { position: fixed !important; top: 30px !important; z-index: 999 !important; } .hero { margin-top: 0 !important; } #operations .op-card img { filter: brightness(0.86) contrast(1.04) saturate(1.02) !important; } #operations .op-card:hover img { filter: brightness(0.94) contrast(1.05) saturate(1.06) !important; } #operations .op-card-overlay { background: linear-gradient(to top, rgba(5,6,6,0.62) 0%, rgba(5,6,6,0.26) 52%, rgba(5,6,6,0.08) 100%) !important; } #operations .op-card p { color: rgba(245,242,236,0.78) !important; } .ops-modal-overlay, .modal-overlay { position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100dvh !important; min-height: 100vh !important; z-index: 99999 !important; align-items: center !important; justify-content: center !important; padding: 20px !important; margin: 0 !important; } .ops-modal-overlay.open, .modal-overlay.open { display: flex !important; } .ops-modal-box, .modal-box { margin: auto !important; transform: none !important; } body.modal-open { overflow: hidden !important; } /* Requested loader position fix: keep the loading screen as a true full-screen overlay. This must come after the canvas z-index rule because that rule affects every element after #bg-canvas, including #page-loader. */ #page-loader { position: fixed !important; inset: 0 !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; width: 100vw !important; height: 100vh !important; min-height: 100vh !important; margin: 0 !important; padding: 0 !important; transform: none !important; z-index: 99999 !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-direction: column !important; pointer-events: none !important; } #page-loader.force-hide { opacity: 0 !important; pointer-events: none !important; visibility: hidden !important; display: none !important; } body > #bg-canvas ~ #page-loader { position: fixed !important; z-index: 99999 !important; } /* Proper premium loading screen fix: full viewport, centered, slower, and above every layer */ #page-loader { position: fixed !important; inset: 0 !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100vw !important; height: 100vh !important; min-height: 100svh !important; min-height: 100dvh !important; margin: 0 !important; padding: 0 !important; background: radial-gradient(110% 80% at 50% 28%, rgba(200,150,12,0.10), transparent 55%), linear-gradient(180deg, #060606 0%, #040404 55%, #060606 100%) !important; pointer-events: auto !important; z-index: 2147483647 !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-direction: column !important; gap: 24px !important; transform: none !important; opacity: 1; visibility: visible; animation: loaderFade 0.65s 3.2s ease forwards !important; overflow: hidden !important; } #page-loader::before { /* clean vignette — replaces the old diagonal shimmer + grid lines, which read as a cheap "AI-generated" texture. Just a soft darkening of the corners so the emblem and wordmark float on calm black. */ content: ''; position: absolute; inset: 0; background: radial-gradient(130% 100% at 50% 45%, transparent 58%, rgba(0,0,0,0.62) 100%); pointer-events: none; } #page-loader > * { position: relative !important; z-index: 2 !important; } /* refined emblem: the logo floats inside a thin gold ring with a sweeping arc + orbiting dot (a quiet "radar" spin) — premium, not flashy */ #page-loader .loader-mark { position: relative; width: clamp(112px, 15vw, 148px); height: clamp(112px, 15vw, 148px); display: flex !important; align-items: center; justify-content: center; animation: loaderLogoIn 0.9s 0.15s cubic-bezier(0.16,1,0.3,1) both !important; } #page-loader .loader-mark .loader-logo-img { position: relative; z-index: 2; height: clamp(58px, 8.5vw, 84px) !important; filter: drop-shadow(0 14px 34px rgba(200,150,12,0.28)); animation: none !important; opacity: 1; } #page-loader .loader-ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(200,150,12,0.16); animation: loaderRingSpin 1.6s linear infinite; } #page-loader .loader-ring::before { content: ''; position: absolute; inset: -1px; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0deg, rgba(214,174,73,0.85) 95deg, rgba(245,216,122,0.9) 135deg, transparent 205deg); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px)); pointer-events: none; } #page-loader .loader-ring::after { content: ''; position: absolute; top: -2.5px; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #f5d87a; box-shadow: 0 0 14px rgba(214,174,73,0.95); pointer-events: none; } @keyframes loaderRingSpin { to { transform: rotate(360deg); } } #page-loader .loader-logo { font-size: clamp(20px, 3.4vw, 30px) !important; letter-spacing: 0.34em !important; margin-left: 0.34em; /* optical centring for the wide tracking */ animation: loaderLogoIn 0.9s 0.32s cubic-bezier(0.16,1,0.3,1) both !important; } #page-loader .loader-bar-wrap { width: min(230px, 58vw) !important; height: 1px !important; background: rgba(200,150,12,0.16) !important; border-radius: 1px; } #page-loader .loader-bar { animation: loadBar 2.4s 0.5s cubic-bezier(0.16,1,0.3,1) forwards !important; } #page-loader .loader-sub { font-size: 9.5px !important; letter-spacing: 0.34em !important; margin-left: 0.34em; color: rgba(200,150,12,0.55) !important; animation: loaderLogoIn 0.9s 0.5s cubic-bezier(0.16,1,0.3,1) both !important; } #page-loader.force-hide { opacity: 0 !important; pointer-events: none !important; visibility: hidden !important; display: none !important; } @keyframes loaderScreenDrift { 0% { transform: translate3d(-2%, -1%, 0) scale(1); } 100% { transform: translate3d(2%, 1%, 0) scale(1.04); } } @media (max-width: 900px) { #page-loader { position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100vh !important; min-height: 100dvh !important; align-items: center !important; justify-content: center !important; animation: loaderFade 0.65s 3.2s ease forwards !important; } #page-loader .loader-bar { animation: loadBar 2.6s 0.45s cubic-bezier(0.16,1,0.3,1) forwards !important; } #page-loader .loader-logo-img, #page-loader .loader-logo, #page-loader .loader-sub { animation-duration: 0.9s !important; } } @media (max-width: 900px) { #bg-canvas { display: block !important; opacity: 1 !important; visibility: visible !important; width: 100vw !important; height: 100dvh !important; min-height: 100vh !important; } body::before { animation: mobileBgDrift 14s linear infinite !important; } #page-loader { animation: loaderFade 0.45s 2.85s ease forwards !important; } #page-loader::before { animation: none !important; } #page-loader .loader-bar { animation: loadBar 1.8s 0.35s cubic-bezier(0.16,1,0.3,1) forwards !important; } } @media (max-width: 900px) and (prefers-reduced-motion: reduce) { #bg-canvas { display: none !important; } body::before { animation: none !important; } } /* Google Maps headquarters embed */ .hq-map-embed { grid-column: 1 / -1; cursor: auto; margin-bottom: 18px; padding: clamp(16px, 2.4vw, 24px); background: linear-gradient(135deg, rgba(200,150,12,0.08), rgba(26,26,26,0.98) 44%, rgba(5,6,6,0.98)), var(--dark2); border-color: rgba(200,150,12,0.28); } .hq-map-embed:hover { transform: none; border-color: rgba(200,150,12,0.38); box-shadow: 0 18px 54px rgba(0,0,0,0.28), 0 0 32px rgba(200,150,12,0.08); } .hq-map-embed::before { display: none; } .hq-map-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; padding-bottom: 18px; border-bottom: 1px solid rgba(200,150,12,0.18); } .hq-map-kicker { font-family: 'Barlow Condensed', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; } .hq-map-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(28px, 3.2vw, 44px); font-weight: 600; line-height: 1.05; color: var(--white); } .hq-map-meta { margin-top: 8px; color: rgba(245,242,236,0.55); font-size: 12px; line-height: 1.55; } .hq-map-open { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 22px; border: 1px solid rgba(200,150,12,0.42); color: var(--gold); background: rgba(0,0,0,0.22); font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; transition: background 0.2s, color 0.2s, border-color 0.2s; } .hq-map-open:hover { background: var(--gold); color: var(--black); border-color: var(--gold); } .hq-map-frame { position: relative; overflow: hidden; margin-top: 18px; aspect-ratio: 21 / 9; min-height: 360px; background: linear-gradient(135deg, rgba(200,150,12,0.12), transparent 36%), repeating-linear-gradient(90deg, rgba(245,242,236,0.035) 0 1px, transparent 1px 72px), repeating-linear-gradient(0deg, rgba(245,242,236,0.028) 0 1px, transparent 1px 72px), #070707; border: 1px solid rgba(200,150,12,0.18); } .hq-map-frame::before { content: 'Headquarters Map'; position: absolute; left: 16px; bottom: 16px; z-index: 2; padding: 10px 12px; background: rgba(10,10,10,0.72); border: 1px solid rgba(200,150,12,0.24); color: rgba(245,242,236,0.72); font-family: 'Barlow Condensed', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; pointer-events: none; } .hq-map-embed iframe { width: 100%; height: 100%; min-height: 360px; display: block; border: 0; position: relative; z-index: 1; } @media (max-width: 900px) { .hq-map-header { flex-direction: column; align-items: flex-start; } .hq-map-open { width: 100%; } .hq-map-embed { padding: 16px; } .hq-map-frame { aspect-ratio: 16 / 10; min-height: 300px; } .hq-map-embed iframe { min-height: 300px; } } @media (max-width: 480px) { .hq-map-frame, .hq-map-embed iframe { min-height: 260px; } .hq-map-frame::before { left: 12px; bottom: 12px; } } /* Mobile hero owner visibility: keep the desktop hero intact, but crop phones toward the right-side owners. */ @media (max-width: 900px) { .hero { overflow: hidden; } .hero-bg { background-position: 78% center !important; background-size: cover !important; filter: brightness(0.5) contrast(1.08) saturate(0.98) !important; transform: none !important; animation: none !important; } .hero::before { background: linear-gradient(90deg, rgba(5,6,6,0.92) 0%, rgba(5,6,6,0.58) 44%, rgba(5,6,6,0.2) 82%), linear-gradient(180deg, rgba(0,0,0,0.14) 0%, rgba(0,0,0,0.18) 36%, rgba(5,6,6,0.96) 100%) !important; animation: none !important; } .hero-content { padding-inline: clamp(18px, 5vw, 28px) !important; padding-bottom: clamp(28px, 7svh, 50px) !important; } } @media (max-width: 560px) { .hero-bg { background-position: 74% center !important; filter: brightness(0.62) contrast(1.08) saturate(1.02) !important; } .hero h1 { max-width: 8.8ch; font-size: clamp(36px, 10.5vw, 43px) !important; line-height: 0.98 !important; } .hero h1::after { width: min(230px, 58vw) !important; } .hero-eyebrow { max-width: min(100%, 370px); padding: 9px 12px !important; background: rgba(6,7,7,0.42); backdrop-filter: blur(6px); } .hero .btn-primary, .hero .btn-outline { width: min(260px, 68vw) !important; margin-left: 0 !important; } } @media (max-width: 390px) { .hero-bg { background-position: 72% center !important; } .hero h1 { font-size: clamp(34px, 10.5vw, 40px) !important; } } /* Mobile final pass: move the focus bar below actions and keep the loader fully opaque/centered. */ @media (max-width: 900px) { .hero-content { display: flex !important; flex-direction: column !important; align-items: flex-start !important; } .hero h1 { order: 1; } .hero .hero-motto { order: 2; } .hero-eyebrow { order: 4; margin-top: clamp(16px, 3.5svh, 26px) !important; margin-bottom: 0 !important; } #page-loader { position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100dvh !important; min-height: 100svh !important; min-height: -webkit-fill-available !important; padding: 24px !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-direction: column !important; text-align: center !important; background: radial-gradient(circle at 50% 28%, rgba(200,150,12,0.2), transparent 32%), linear-gradient(135deg, #050606 0%, #090907 58%, #020202 100%) !important; opacity: 1 !important; visibility: visible !important; animation: loaderFade 0.65s 3.2s ease forwards !important; } #page-loader .loader-logo, #page-loader .loader-sub { width: min(88vw, 520px) !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; text-align: center !important; white-space: normal !important; } #page-loader .loader-logo { font-size: clamp(28px, 8vw, 38px) !important; line-height: 1.18 !important; letter-spacing: 0.18em !important; padding-left: 0.18em !important; } #page-loader .loader-sub { font-size: 10px !important; line-height: 1.5 !important; letter-spacing: 0.26em !important; padding-left: 0.26em !important; } #page-loader.force-hide { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; display: none !important; } } /* ═══════════════════════════════════════════════════ MULTI-PAGE: SUB-PAGE HERO, CONTENT & NEW COMPONENTS ═══════════════════════════════════════════════════ */ /* ─── SUB-PAGE HERO ─── */ .page-hero { position: relative; min-height: 46vh; padding: 150px 0 70px; display: flex; align-items: center; overflow: hidden; z-index: 1; } .page-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; filter: brightness(0.32) saturate(0.9); transform: scale(1.04); } .page-hero-overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; background: linear-gradient(to top, rgba(5,6,6,1) 0%, rgba(5,6,6,0.55) 55%, rgba(5,6,6,0.35) 100%); } .page-hero-inner { position: relative; z-index: 2; width: min(1180px, calc(100% - 48px)); margin: 0 auto; } .page-hero-inner .section-title { font-size: clamp(34px, 4.4vw, 58px); } .page-hero-inner .section-body { max-width: 680px; } .page-hero-breadcrumb { display: flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(245,242,236,0.45); margin-bottom: 18px; font-weight: 600; } .page-hero-breadcrumb a { color: var(--gold); text-decoration: none; } .page-hero-breadcrumb a:hover { color: var(--gold-light); } /* ─── STANDARD SECTION WRAPPER ─── */ .wrap-section { width: min(1180px, calc(100% - 48px)); margin: 0 auto; padding: 60px 0; } .wrap-section.slim { padding: 40px 0; } .wrap-head { max-width: 780px; margin-bottom: 32px; } /* ─── STAT STRIP ─── */ .stat-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1px; background: rgba(214,174,73,0.14); border: 1px solid rgba(214,174,73,0.22); margin: 0 auto; } .stat-strip-cell { background: #0b0b0b; padding: 34px 26px; text-align: center; } .stat-strip-cell strong { display: block; font-family: 'Cormorant Garamond', serif; font-size: 40px; font-weight: 600; color: var(--gold-light); line-height: 1.1; } .stat-strip-cell span { display: block; margin-top: 8px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(245,242,236,0.55); } /* ─── CONTENT PANEL ─── */ .panel { background: linear-gradient(135deg, rgba(20,20,20,0.9), rgba(10,10,10,0.96)); border: 1px solid rgba(214,174,73,0.16); padding: 40px; border-radius: 2px; } .panel h3 { font-family: 'Cormorant Garamond', serif; font-size: 26px; font-weight: 600; color: var(--white); margin-bottom: 14px; } .panel p { color: rgba(245,242,236,0.68); font-size: 14px; line-height: 1.85; } .panel ul, .panel ol { color: rgba(245,242,236,0.68); font-size: 14px; line-height: 1.9; padding-left: 20px; } .panel li { margin-bottom: 6px; } .gold-kicker { font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); font-weight: 700; margin-bottom: 8px; } /* ─── TWO-COLUMN LAYOUT ─── */ .cols { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: start; } .cols.reversed { grid-template-columns: 0.9fr 1.1fr; } @media (max-width: 900px) { .cols, .cols.reversed { grid-template-columns: 1fr; gap: 32px; } } /* ─── TIMELINE ─── */ .timeline { position: relative; margin: 0; padding-left: 34px; list-style: none; } .timeline::before { content: ''; position: absolute; left: 8px; top: 6px; bottom: 6px; width: 1px; background: linear-gradient(to bottom, transparent, rgba(214,174,73,0.5), transparent); } .timeline li { position: relative; margin-bottom: 26px; } .timeline li::before { content: ''; position: absolute; left: -34px; top: 5px; width: 17px; height: 17px; border-radius: 50%; background: #0b0b0b; border: 1px solid var(--gold); box-shadow: 0 0 0 4px rgba(214,174,73,0.12); } .timeline .tl-year { font-family: 'Cormorant Garamond', serif; font-size: 18px; font-weight: 700; color: var(--gold-light); letter-spacing: 0.04em; } .timeline .tl-text { color: rgba(245,242,236,0.66); font-size: 14px; line-height: 1.7; margin-top: 4px; } /* ─── PILL / TAG ─── */ .tag-pill { display: inline-block; padding: 5px 14px; border: 1px solid rgba(214,174,73,0.4); color: var(--gold-light); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 700; border-radius: 999px; margin-bottom: 14px; } .tag-pill.grey { border-color: rgba(245,242,236,0.22); color: rgba(245,242,236,0.5); } /* ─── CARD GRID ─── */ .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 26px; } .flat-card { background: linear-gradient(135deg, rgba(20,20,20,0.92), rgba(10,10,10,0.97)); border: 1px solid rgba(214,174,73,0.14); padding: 30px; position: relative; transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; overflow: hidden; } .flat-card:hover { transform: translateY(-4px); border-color: rgba(214,174,73,0.45); box-shadow: 0 16px 40px rgba(0,0,0,0.45); } .flat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity: 0.5; } .flat-card h4 { font-family: 'Cormorant Garamond', serif; font-size: 21px; font-weight: 600; color: var(--white); margin-bottom: 8px; } .flat-card p { color: rgba(245,242,236,0.62); font-size: 13.5px; line-height: 1.8; } .flat-card .card-meta { display: block; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; } /* ─── DOCUMENT / MEDIA LIST ─── */ .doc-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 4px; border-bottom: 1px solid rgba(245,242,236,0.08); } .doc-row:last-child { border-bottom: none; } .doc-row .doc-name { font-size: 14.5px; color: var(--white); font-weight: 600; } .doc-row .doc-desc { font-size: 12.5px; color: rgba(245,242,236,0.5); margin-top: 3px; } .doc-row .doc-link { color: var(--gold); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; text-decoration: none; white-space: nowrap; } .doc-row .doc-link:hover { color: var(--gold-light); } /* ─── NEWS / MEDIA CARD ─── */ .news-card { display: flex; flex-direction: column; } .news-card .news-date { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; } .news-card .news-body { flex: 1; } /* ─── CAREER ROW ─── */ .career-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 30px; border: 1px solid rgba(214,174,73,0.14); background: linear-gradient(135deg, rgba(20,20,20,0.9), rgba(10,10,10,0.95)); margin-bottom: 16px; transition: border-color 0.3s ease; } .career-row:hover { border-color: rgba(214,174,73,0.4); } .career-row .career-info h4 { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 600; color: var(--white); margin-bottom: 4px; } .career-row .career-info p { font-size: 13px; color: rgba(245,242,236,0.55); } .career-row .career-tag { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); border: 1px solid rgba(214,174,73,0.35); padding: 6px 12px; white-space: nowrap; } @media (max-width: 640px) { .career-row { flex-direction: column; align-items: flex-start; } } /* ─── TABLE (governance / shareholding) ─── */ .corp-table { width: 100%; border-collapse: collapse; font-size: 14px; } .corp-table th { text-align: left; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); font-weight: 700; padding: 12px 14px; border-bottom: 1px solid rgba(214,174,73,0.3); } .corp-table td { padding: 14px; border-bottom: 1px solid rgba(245,242,236,0.08); color: rgba(245,242,236,0.72); line-height: 1.6; } .corp-table tr:last-child td { border-bottom: none; } .corp-table td:last-child { text-align: right; color: var(--white); font-weight: 600; } /* ─── NOTE / DISCLAIMER BOX ─── */ .note-box { border-left: 2px solid var(--gold); background: rgba(214,174,73,0.05); padding: 20px 24px; font-size: 13px; line-height: 1.8; color: rgba(245,242,236,0.62); margin: 28px 0; } /* ─── DIVIDER SPACER ─── */ .section-gap { height: 1px; background: linear-gradient(90deg, transparent, rgba(214,174,73,0.35), transparent); border: 0; margin: 0; } /* ─── MULTI-PAGE NAV ADJUSTMENTS ─── */ .nav-center a { display: inline-flex; align-items: center; } .nav-center a img { cursor: pointer; } .nav-dept-logo a { display: inline-flex; } .page-wrap { position: relative; z-index: 1; } .page-wrap > section, .page-wrap > div, .page-wrap > .wrap-section { position: relative; z-index: 1; } /* ─── ANCHOR OFFSET ─── */ section[id], .hero[id] { scroll-margin-top: 96px; } /* ─── HERO CTA ROW ─── */ .hero-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; } .hero-cta-row .btn-outline { margin-left: 0; } /* ─── NAV CART BUTTON ─── */ .shop-cart-btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; background: rgba(214,174,73,0.1); border: 1px solid rgba(214,174,73,0.45); color: var(--gold-light); font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease; } .shop-cart-btn:hover { background: var(--gold); color: var(--black); transform: translateY(-2px); } .shop-cart-btn-inner { display: inline-flex; align-items: center; gap: 8px; } .shop-cart-count { min-width: 18px; height: 18px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; background: var(--gold); color: var(--black); font-size: 11px; font-weight: 800; line-height: 1; border-radius: 9px; } /* ─── SHOP SECTION ─── */ .shop-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 22px; } .shop-cats { display: flex; flex-wrap: wrap; gap: 8px; } .shop-cat { padding: 6px 12px; border: 1px solid rgba(214,174,73,0.3); background: rgba(214,174,73,0.05); color: rgba(245,242,236,0.72); font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease; } .shop-cat:hover { border-color: var(--gold); color: var(--gold-light); } .shop-cat.active { background: var(--gold); border-color: var(--gold); color: var(--black); } .shop-rate { font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--grey); } .shop-rate b { color: var(--gold-light); font-weight: 700; } .shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; margin-top: 8px; } .shop-item { position: relative; display: flex; flex-direction: column; border: 1px solid rgba(214,174,73,0.2); background: linear-gradient(145deg, rgba(24,24,21,0.94), rgba(7,7,7,0.9)); overflow: hidden; transition: border-color 0.28s ease, transform 0.4s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s ease; } .shop-item:hover { border-color: rgba(214,174,73,0.6); transform: translateY(-5px); box-shadow: 0 22px 60px rgba(0,0,0,0.45), 0 0 0 1px rgba(214,174,73,0.12); } .shop-thumb { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--dark2); } .shop-thumb img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.78) saturate(0.85); transition: filter 0.4s, transform 0.5s; } .shop-item:hover .shop-thumb img { filter: brightness(0.92) saturate(1); transform: scale(1.05); } .shop-thumb .shop-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 30% 20%, rgba(214,174,73,0.14), transparent 46%), linear-gradient(135deg, var(--dark3), var(--dark2)); border: 1px dashed rgba(214,174,73,0.28); font-family: 'Barlow Condensed', sans-serif; font-size: 9px; font-weight: 800; letter-spacing: 0.25em; text-transform: uppercase; color: rgba(214,174,73,0.55); } .shop-cat-label { position: absolute; top: 12px; left: 12px; z-index: 2; padding: 6px 10px; background: rgba(10,10,10,0.82); border: 1px solid rgba(214,174,73,0.45); color: var(--gold-light); font-family: 'Barlow Condensed', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; } .shop-body { display: flex; flex-direction: column; flex: 1; padding: 16px 18px 18px; } .shop-item h4 { font-family: 'Cormorant Garamond', serif; font-size: 20px; font-weight: 600; color: var(--white); margin-bottom: 8px; } .shop-item p.desc { font-size: 13px; line-height: 1.7; color: rgba(245,242,236,0.6); margin-bottom: 16px; } .shop-market { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--grey); margin-bottom: 10px; } .shop-market span { white-space: nowrap; } .shop-market b { color: rgba(245,242,236,0.85); font-weight: 600; } .shop-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: auto; } .shop-price { display: flex; flex-direction: column; line-height: 1.15; } .shop-price .retail { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 700; color: var(--gold-light); } .shop-price .per { font-family: 'Barlow Condensed', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey); } .shop-add { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; background: var(--gold); color: var(--black); border: none; cursor: pointer; font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; transition: background 0.25s ease, transform 0.25s ease; } .shop-add:hover { background: var(--gold-light); transform: translateY(-2px); } .shop-add:disabled { opacity: 0.45; cursor: default; transform: none; } .shop-note { margin-top: 20px; } .shop-note .note-box { margin: 0; } /* ─── CART DRAWER ─── */ .cart-overlay { display: none; position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,0.72); } .cart-overlay.open { display: block; } body.cart-open { overflow: hidden; } .cart-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 10001; width: min(430px, 100vw); background: var(--dark); border-left: 1px solid rgba(214,174,73,0.35); display: flex; flex-direction: column; transform: translateX(105%); transition: transform 0.4s cubic-bezier(0.16,1,0.3,1); box-shadow: -30px 0 80px rgba(0,0,0,0.5); } .cart-drawer.open { transform: translateX(0); } .cart-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid rgba(214,174,73,0.18); } .cart-head h3 { font-family: 'Cormorant Garamond', serif; font-size: 24px; font-weight: 600; color: var(--gold); } .cart-close { background: none; border: 1px solid rgba(214,174,73,0.45); color: var(--gold); width: 34px; height: 34px; font-size: 18px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 0.25s ease, color 0.25s ease; } .cart-close:hover { background: var(--gold); color: var(--black); } .cart-items { flex: 1; overflow-y: auto; padding: 10px 24px; } .cart-item { display: grid; grid-template-columns: 62px 1fr auto; gap: 14px; align-items: center; padding: 16px 0; border-bottom: 1px solid rgba(245,242,236,0.07); } .cart-item-thumb { width: 62px; height: 62px; overflow: hidden; background: var(--dark2); border: 1px solid rgba(214,174,73,0.2); } .cart-item-thumb img { width: 100%; height: 100%; object-fit: cover; } .cart-item-info { min-width: 0; } .cart-item-name { font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--white); margin-bottom: 6px; } .cart-item-meta { font-size: 12px; color: var(--grey); margin-bottom: 6px; } .cart-qty-row { display: flex; align-items: center; gap: 8px; } .cart-qty-btn { width: 24px; height: 24px; border: 1px solid rgba(214,174,73,0.4); background: rgba(214,174,73,0.08); color: var(--gold-light); font-size: 14px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .cart-qty-btn:hover { background: var(--gold); color: var(--black); } .cart-qty { font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 700; color: var(--white); min-width: 18px; text-align: center; } .cart-item-price { text-align: right; font-family: 'Cormorant Garamond', serif; font-size: 18px; font-weight: 700; color: var(--gold-light); } .cart-item-remove { margin-top: 4px; margin-left: auto; background: none; border: none; color: var(--grey); font-size: 12px; cursor: pointer; text-decoration: underline; padding: 0; } .cart-item-remove:hover { color: var(--red); } .cart-empty { text-align: center; padding: 60px 24px; color: var(--grey); font-size: 13px; line-height: 1.8; } .cart-foot { border-top: 1px solid rgba(214,174,73,0.18); padding: 22px 24px 26px; } .cart-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; font-size: 13px; color: rgba(245,242,236,0.72); } .cart-row.total { font-family: 'Cormorant Garamond', serif; font-size: 26px; font-weight: 700; color: var(--white); margin-bottom: 18px; } .cart-row.total .cart-amount { color: var(--gold-light); } .cart-checkout { width: 100%; justify-content: center; } .cart-note { margin-top: 14px; font-size: 11px; color: var(--grey); text-align: center; line-height: 1.6; } /* ─── CHECKOUT MODAL ─── */ .checkout-overlay { display: none; position: fixed; inset: 0; z-index: 10002; background: rgba(0,0,0,0.82); align-items: flex-start; justify-content: center; overflow-y: auto; padding: 40px 20px; } .checkout-overlay.open { display: flex; } body.checkout-open { overflow: hidden; } .checkout-box { position: relative; width: min(720px, 100%); background: var(--dark); border: 1px solid rgba(214,174,73,0.35); box-shadow: 0 40px 120px rgba(0,0,0,0.6); padding: clamp(24px, 4vw, 48px); } .co-close { position: absolute; top: 16px; right: 16px; background: none; border: 1px solid rgba(214,174,73,0.45); color: var(--gold); width: 34px; height: 34px; font-size: 18px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 0.25s ease, color 0.25s ease; z-index: 3; } .co-close:hover { background: var(--gold); color: var(--black); } .co-step { display: none; } .co-step.active { display: block; } .co-step .section-label { margin-bottom: 8px; } .co-step h3 { font-family: 'Cormorant Garamond', serif; font-size: 30px; font-weight: 600; color: var(--white); margin-bottom: 22px; } .co-order { border: 1px solid rgba(214,174,73,0.18); background: rgba(0,0,0,0.3); padding: 18px 20px; margin-bottom: 22px; } .co-order-row { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0; font-size: 13px; color: rgba(245,242,236,0.72); border-bottom: 1px solid rgba(245,242,236,0.05); } .co-order-row:last-of-type { border-bottom: none; } .co-order-row b { color: var(--white); font-weight: 600; text-align: right; } .co-order-total { display: flex; justify-content: space-between; gap: 14px; padding: 12px 0 0; margin-top: 6px; border-top: 1px solid rgba(214,174,73,0.3); font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 700; color: var(--white); } .co-order-total span { color: var(--gold-light); } .co-pay-methods { display: flex; flex-direction: column; gap: 10px; } .co-pay-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid rgba(214,174,73,0.25); background: rgba(214,174,73,0.04); cursor: pointer; transition: border-color 0.25s ease, background 0.25s ease; } .co-pay-row:hover { border-color: var(--gold); } .co-pay-row.selected { border-color: var(--gold); background: rgba(214,174,73,0.12); } .co-pay-row input { accent-color: var(--gold); } .co-pay-label { font-family: 'Barlow Condensed', sans-serif; font-size: 14px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--white); } .co-pay-desc { font-size: 12px; color: var(--grey); } .co-pay-tag { margin-left: auto; padding: 5px 9px; border: 1px solid rgba(214,174,73,0.4); color: var(--gold-light); font-family: 'Barlow Condensed', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } .co-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; } .co-actions .btn-primary, .co-actions .btn-outline { margin-left: 0; } /* ─── CRYPTO PANEL ─── */ .crypto-panel { margin-top: 24px; border: 1px solid rgba(214,174,73,0.25); background: rgba(0,0,0,0.34); padding: 26px; } .crypto-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 20px; } .crypto-title { font-family: 'Barlow Condensed', sans-serif; font-size: 14px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-light); } .crypto-status { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--grey); } .crypto-status.pending { color: var(--gold-light); } .crypto-status.success { color: var(--green); } .crypto-status.error { color: var(--red); } .crypto-qr { width: 220px; height: 220px; margin: 0 auto 22px; background: var(--white); padding: 12px; display: flex; align-items: center; justify-content: center; } .crypto-qr img, .crypto-qr canvas, .crypto-qr svg { width: 100%; height: 100%; display: block; } .crypto-qr-empty { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-family: 'Barlow Condensed', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mid); } .crypto-meta { display: grid; gap: 10px; max-width: 460px; margin: 0 auto; } .crypto-label { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey); margin-bottom: 5px; } .crypto-amount { font-family: 'Cormorant Garamond', serif; font-size: 30px; font-weight: 700; color: var(--gold-light); line-height: 1.1; } .crypto-zar { font-size: 13px; color: rgba(245,242,236,0.72); } .crypto-rate { font-size: 12px; color: var(--grey); } .crypto-address-row { display: flex; gap: 8px; } .crypto-address { flex: 1; min-width: 0; padding: 11px 12px; border: 1px solid rgba(214,174,73,0.3); background: rgba(0,0,0,0.46); color: var(--white); font-size: 12px; word-break: break-all; user-select: all; } .crypto-copy { flex-shrink: 0; padding: 0 14px; border: 1px solid rgba(214,174,73,0.45); background: rgba(214,174,73,0.1); color: var(--gold-light); font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; transition: background 0.25s ease, color 0.25s ease; } .crypto-copy:hover { background: var(--gold); color: var(--black); } .crypto-expiry { font-size: 12px; color: var(--grey); } .crypto-expiry.urgent { color: var(--red); font-weight: 700; } .crypto-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; } .crypto-actions .btn-outline { margin-left: 0; } /* ─── DONE STEP ─── */ .co-done { text-align: center; padding: 30px 10px; } .co-done-mark { width: 84px; height: 84px; margin: 0 auto 24px; border: 2px solid var(--gold); color: var(--gold-light); display: flex; align-items: center; justify-content: center; font-size: 40px; border-radius: 50%; } .co-done h3 { font-family: 'Cormorant Garamond', serif; font-size: 34px; font-weight: 600; color: var(--white); margin-bottom: 14px; } .co-done p { font-size: 14px; line-height: 1.8; color: rgba(245,242,236,0.68); max-width: 480px; margin: 0 auto 22px; } .co-done .btn-primary { margin: 0 auto; } /* ─── SHOP RESPONSIVE ─── */ @media (max-width: 900px) { .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .shop-grid { grid-template-columns: 1fr; } .shop-toolbar { flex-direction: column; align-items: flex-start; } .checkout-overlay { padding: 16px 12px; } .co-actions { flex-direction: column; } .co-actions .btn-primary, .co-actions .btn-outline { width: 100%; justify-content: center; } .crypto-panel { padding: 18px; } } /* ─── FIX: re-assert fixed positioning over `body>#bg-canvas~*` sibling rule ─── */ #cartOverlay, #checkoutOverlay, #buyOverlay { position: fixed !important; inset: 0 !important; z-index: 10000 !important; } #productOverlay { position: fixed !important; inset: 0 !important; z-index: 10003 !important; } #cartDrawer { position: fixed !important; top: 0 !important; right: 0 !important; bottom: 0 !important; z-index: 10001 !important; } #floatCart { position: fixed !important; z-index: 9995 !important; } #cartToast { position: fixed !important; z-index: 9996 !important; } /* ─── ZAR WHOLESALE SHOP REWORK ─── */ .shop-toolbar-right { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .shop-min-order { font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--grey); border: 1px solid rgba(214,174,73,0.35); background: rgba(214,174,73,0.06); padding: 7px 12px; } .shop-min-order b { color: var(--gold-light); } /* cart progress */ .cart-progress { padding: 16px 24px 14px; border-bottom: 1px solid rgba(214,174,73,0.15); flex-shrink: 0; } .cart-progress-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--grey); margin-bottom: 8px; } .cart-progress-top b { color: var(--gold-light); font-family: 'Barlow Condensed', sans-serif; font-weight: 700; } .cart-progress-track { height: 8px; background: rgba(245,242,236,0.08); border: 1px solid rgba(214,174,73,0.18); overflow: hidden; } .cart-progress-bar { height: 100%; width: 0%; background: linear-gradient(90deg, var(--gold), var(--gold-light)); transition: width 0.5s cubic-bezier(0.16,1,0.3,1); } .cart-progress-bar.met { background: linear-gradient(90deg, var(--green), #7de0a3); } .cart-min-note { font-size: 11px; color: var(--gold-light); margin-bottom: 12px; line-height: 1.5; } .cart-min-note.ok { color: var(--green); } .cart-checkout:disabled { opacity: 0.45; cursor: not-allowed; filter: grayscale(0.4); } .cart-checkout:disabled:hover { transform: none; background: var(--gold); color: var(--black); } .cart-foot { flex-shrink: 0; } /* floating cart button */ .float-cart { position: fixed; left: 22px; bottom: 22px; z-index: 9995; display: flex; align-items: center; gap: 10px; padding: 14px 18px; background: var(--gold); color: var(--black); border: none; font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; box-shadow: 0 14px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(214,174,73,0.4); transition: transform 0.25s ease, background 0.25s ease; } .float-cart:hover { background: var(--gold-light); transform: translateY(-3px); } .float-cart-badge { min-width: 20px; height: 20px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; background: var(--black); color: var(--gold-light); font-size: 11px; font-weight: 800; line-height: 1; border-radius: 10px; } .float-cart-sub { font-family: 'Cormorant Garamond', serif; font-size: 15px; font-weight: 700; letter-spacing: 0; } /* toast */ .cart-toast { position: fixed; left: 22px; bottom: 96px; z-index: 9996; max-width: min(420px, calc(100vw - 40px)); padding: 14px 18px; background: var(--dark2); border: 1px solid rgba(214,174,73,0.45); border-left: 3px solid var(--gold); color: rgba(245,242,236,0.92); font-size: 13px; line-height: 1.5; box-shadow: 0 18px 50px rgba(0,0,0,0.55); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity 0.3s ease, transform 0.3s ease; } .cart-toast b { color: var(--gold-light); } .cart-toast.show { opacity: 1; transform: translateY(0); } .cart-toast.error { border-left-color: var(--red); } .cart-toast.error b { color: var(--red); } /* buyer toggle */ .buyer-toggle { display: flex; gap: 10px; margin-bottom: 8px; } .buyer-opt { flex: 1; padding: 12px 14px; border: 1px solid rgba(214,174,73,0.3); background: rgba(214,174,73,0.04); color: rgba(245,242,236,0.72); font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease; } .buyer-opt:hover { border-color: var(--gold); color: var(--gold-light); } .buyer-opt.active { background: var(--gold); border-color: var(--gold); color: var(--black); } .buyer-note { font-size: 11px; color: var(--grey); margin: 0 0 18px; line-height: 1.6; } /* company group */ .co-group { margin-top: 6px; padding: 18px 20px; border: 1px dashed rgba(214,174,73,0.35); background: rgba(214,174,73,0.04); } .co-group-title { font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-light); margin-bottom: 14px; } /* order total row */ .co-total-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(214,174,73,0.3); font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 700; color: var(--white); } .co-total-row b { font-family: 'Barlow Condensed', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--grey); display: block; } .co-total-row > span:last-child { color: var(--gold-light); } /* checkout selects */ .co-form select { width: 100%; padding: 11px 12px; border: 1px solid rgba(214,174,73,0.35); border-radius: 0; background: var(--dark2); color: var(--white); font-size: 13px; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23d6ae49' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; cursor: pointer; } .co-form select:focus { outline: none; border-color: var(--gold); } .co-form select option { background: var(--dark2); color: var(--white); } /* professional crypto gateway */ .crypto-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; } .crypto-network { padding: 5px 10px; border: 1px solid rgba(247,147,26,0.5); background: rgba(247,147,26,0.08); color: #f7931a; font-family: 'Barlow Condensed', sans-serif; font-size: 10px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; } .crypto-ref { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--grey); margin-bottom: 18px; } .crypto-ref b { color: var(--white); } .crypto-note { margin-top: 16px; font-size: 11px; color: var(--grey); line-height: 1.7; } .buy-qty-row { display: flex; align-items: center; gap: 10px; } .buy-qty-input { width: 160px; padding: 10px 12px; background: rgba(0,0,0,0.46); border: 1px solid rgba(214,174,73,0.3); color: var(--white); font: 15px/1.3 'Inter', sans-serif; border-radius: 6px; } .buy-qty-input:focus { outline: none; border-color: var(--gold); } .buy-qty-unit { font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-light); } #cryptoAddress { flex: 1; min-width: 0; padding: 11px 12px; border: 1px solid rgba(214,174,73,0.3); background: rgba(0,0,0,0.46); color: var(--white); font-size: 12px; word-break: break-all; user-select: all; } .crypto-status.pending::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); margin-right: 8px; vertical-align: middle; animation: cryptoPulse 1.6s ease-in-out infinite; } @keyframes cryptoPulse { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(214,174,73,0.6); } 50% { opacity: 0.55; box-shadow: 0 0 0 6px rgba(214,174,73,0); } } .checkout-close { position: absolute; top: 16px; right: 16px; z-index: 3; } @media (max-width: 600px) { .float-cart { left: 14px; bottom: 14px; padding: 12px 14px; } .cart-toast { left: 14px; right: 14px; bottom: 82px; max-width: none; } .crypto-panel { padding: 18px; } .crypto-top { flex-direction: column; align-items: stretch; text-align: center; } .crypto-qr { margin: 0 auto 18px; } .crypto-meta { max-width: none; } .crypto-head { flex-direction: column; align-items: flex-start; } .shop-toolbar-right { width: 100%; } } /* ---------- invoice + demo pay buttons ---------- */ .co-done .co-invoice-btn { margin: 10px auto 0; display: block; } .crypto-demo-pay { display: block; width: 100%; margin-top: 14px; padding: 11px 14px; border: 1px dashed rgba(214,174,73,.5); background: rgba(214,174,73,.06); color: var(--gold); border-radius: 8px; font: 600 12px 'Manrope', 'Barlow', sans-serif; letter-spacing: .05em; text-transform: uppercase; cursor: pointer; transition: background .2s ease; } .crypto-demo-pay:hover { background: rgba(214,174,73,.14); } .crypto-demo-pay[hidden] { display: none; } .delivery-note { grid-column: 1 / -1; font-size: 12px; line-height: 1.7; color: var(--gold); background: rgba(214,174,73,.07); border: 1px dashed rgba(214,174,73,.35); padding: 10px 12px; margin-top: 4px; } .delivery-note[hidden] { display: none; } /* ============================================================ GLOBAL COMPACT MODE — shrink spacing, type and media everywhere (appended last so it wins the cascade on desktop and mobile) ============================================================ */ .wrap-section { padding: 40px 0; } .wrap-section.slim { padding: 30px 0; } .wrap-head { margin-bottom: 24px; } .section-title { font-size: clamp(28px, 3.2vw, 46px); margin-bottom: 16px; } .page-hero-inner .section-title { font-size: clamp(28px, 3.2vw, 46px); } .section-body { font-size: 15px; line-height: 1.75; } .hero { height: 74vh; height: 74svh; min-height: 420px; } .stat-strip-cell { padding: 20px 16px; } .stat-strip-cell strong { font-size: 30px; } .op-card { height: 320px; } .about-img { height: 420px; } #partners { padding: 40px; } .cta-band { height: 220px !important; } .nav-dept-logo img { height: 52px; } .nav-center img { max-height: 36px; max-width: 140px; } .shop-thumb { aspect-ratio: 3/2; } .shop-item h4 { font-size: 18px; } .shop-price .retail { font-size: 20px; } .mobile-nav { padding: 110px 30px 40px; } @media (max-width: 900px) { .wrap-section { padding: 32px 0; } .hero { height: 70vh; height: 70svh; min-height: 380px; } .op-card { height: 280px; } .about-img { height: 320px; } .nav-center img { max-height: 32px; max-width: 120px; } } @media (max-width: 480px) { /* Keep the requisition button + hamburger inside the viewport on small phones */ nav { gap: 8px !important; padding: 10px 12px !important; } .nav-dept-logo img { height: 34px !important; } .nav-right { gap: 6px !important; } .shop-cart-btn { padding: 5px 8px !important; font-size: 10px !important; letter-spacing: 0.1em !important; gap: 6px !important; } .shop-cart-btn svg { width: 13px !important; height: 13px !important; } .shop-cart-btn-inner { gap: 6px !important; } } /* ---- FIX: hamburger drawer must sit above ticker/nav (the body > #bg-canvas sibling rule forced position:relative on it) ---- */ .mobile-nav, .mobile-nav-overlay { position: fixed !important; } .mobile-nav { top: 0 !important; right: 0 !important; left: auto !important; bottom: 0 !important; height: 100dvh !important; z-index: 99990 !important; } .mobile-nav-overlay { inset: 0 !important; z-index: 99989 !important; } /* ---- NAV layout: logo centered in the free band between left/right groups, never overlapping the right-side cart/hamburger buttons ---- */ .nav-left, .nav-right { flex: 0 0 auto !important; } .nav-center { position: static !important; transform: none !important; flex: 1 1 auto !important; justify-content: center !important; } /* ═══════════════════════════════════════ PROFESSIONAL SCROLLBARS — GLOBAL ═══════════════════════════════════════ */ * { scrollbar-width: thin; scrollbar-color: rgba(200,150,12,0.45) rgba(255,255,255,0.04); } ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: rgba(255,255,255,0.03); border-left: 1px solid rgba(200,150,12,0.08); } ::-webkit-scrollbar-thumb { background: rgba(200,150,12,0.38); border-radius: 0; } ::-webkit-scrollbar-thumb:hover { background: rgba(232,180,34,0.72); } ::-webkit-scrollbar-thumb:active { background: #E8B422; } ::-webkit-scrollbar-corner { background: transparent; } html::-webkit-scrollbar { width: 8px; } html::-webkit-scrollbar-track { background: #0a0a0a; border-left: 1px solid rgba(200,150,12,0.1); } html::-webkit-scrollbar-thumb { background: linear-gradient( 180deg, rgba(200,150,12,0.15) 0%, rgba(200,150,12,0.5) 30%, rgba(232,180,34,0.55) 70%, rgba(200,150,12,0.15) 100% ); border-left: 1px solid rgba(245,216,122,0.2); border-right: 1px solid rgba(245,216,122,0.06); } html::-webkit-scrollbar-thumb:hover { background: linear-gradient( 180deg, rgba(200,150,12,0.3) 0%, rgba(232,180,34,0.75) 40%, rgba(245,216,122,0.8) 60%, rgba(200,150,12,0.3) 100% ); } .fin-tabs::-webkit-scrollbar, .schematics-tabs::-webkit-scrollbar { display: none; } /* ═══════════════════════════════════════════════════ COMPREHENSIVE FIX PATCH — all issues resolved ═══════════════════════════════════════════════════ */ /* 1. SCROLLING — ensure normal scroll works everywhere */ html { overflow-y: scroll !important; overflow-x: hidden !important; height: auto !important; } body { overflow-y: visible !important; overflow-x: hidden !important; min-height: 100vh; height: auto !important; } /* 2. REMOVE FLOAT CART BUTTON */ #floatCart, .float-cart { display: none !important; visibility: hidden !important; pointer-events: none !important; } /* 3. SHOP GRID — full-width responsive, no gaps, no squish */ #shop { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } .shop-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important; gap: 20px !important; width: 100% !important; margin-top: 24px !important; } .shop-item { width: 100% !important; min-width: 0 !important; } /* Shop table responsive */ .shop-table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .shop-table { width: 100%; min-width: 700px; border-collapse: collapse; } .shop-table th, .shop-table td { padding: 13px 14px; font-size: 13px; text-align: left; border-bottom: 1px solid rgba(245,216,122,0.1); color: rgba(245,242,236,0.8); } .shop-table th { font-family: 'Barlow Condensed', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); background: rgba(200,150,12,0.06); white-space: nowrap; } .shop-table tbody tr:hover td { background: rgba(200,150,12,0.04); } .shop-row-img { width: 36px; height: 36px; object-fit: contain; border-radius: 4px; background: rgba(255,255,255,0.06); margin-right: 10px; vertical-align: middle; } .shop-row-name { display: flex; align-items: center; gap: 10px; white-space: nowrap; } .shop-row-name b { display: block; font-weight: 600; color: var(--white); } .shop-row-name span { font-size: 11px; color: var(--grey); } .shop-retail { font-family: 'Cormorant Garamond', serif; font-size: 18px; font-weight: 700; color: var(--gold-light); } .shop-avail { display: inline-block; padding: 4px 10px; font-family: 'Barlow Condensed', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; border-radius: 2px; } .avail-ok { background: rgba(39,174,96,0.14); color: #5ee891; border: 1px solid rgba(39,174,96,0.3); } .avail-limited { background: rgba(232,180,34,0.12); color: var(--gold-light); border: 1px solid rgba(232,180,34,0.3); } .avail-contract { background: rgba(245,242,236,0.06); color: rgba(245,242,236,0.55); border: 1px solid rgba(245,242,236,0.15); } .shop-add { display: inline-flex; align-items: center; padding: 8px 16px; background: var(--gold); color: var(--black); border: none; cursor: pointer; text-decoration: none; font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; transition: background 0.2s; white-space: nowrap; border-radius: 4px; } .shop-add:hover { background: var(--gold-light); } /* 4. MARKET CHART — constrained height, not elongated */ .market-panel { border: 1px solid rgba(200,150,12,0.18) !important; background: rgba(10,10,10,0.7) !important; border-radius: 8px !important; overflow: hidden !important; margin-bottom: 32px !important; } .mc-canvas-wrap { position: relative !important; height: 220px !important; min-height: 220px !important; max-height: 220px !important; overflow: hidden !important; } .mc-canvas-wrap canvas { width: 100% !important; height: 220px !important; max-height: 220px !important; display: block !important; } /* 5. MODAL CENTERING — always viewport-centered, never at bottom */ .ops-modal-overlay, .modal-overlay, #modal, .doc-preview-overlay, .product-overlay, .checkout-overlay, #checkoutOverlay, #productOverlay { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100vw !important; height: 100vh !important; min-height: 100vh !important; display: none; align-items: center !important; justify-content: center !important; padding: 20px !important; margin: 0 !important; z-index: 99999 !important; overflow-y: auto !important; } .ops-modal-overlay.open, .modal-overlay.open, #modal.open { display: flex !important; align-items: center !important; justify-content: center !important; } .ops-modal-box, .modal-box { margin: auto !important; position: relative !important; max-height: 90vh !important; overflow-y: auto !important; } /* 6. DOCUMENT LIBRARY — simple clean rows, links open in new tab */ .doc-row { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 20px !important; padding: 18px 0 !important; border-bottom: 1px solid rgba(245,242,236,0.07) !important; } .doc-row:last-child { border-bottom: none !important; } .doc-link { display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 9px 18px !important; background: var(--gold) !important; color: var(--black) !important; font-family: 'Barlow Condensed', sans-serif !important; font-size: 11px !important; font-weight: 800 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; text-decoration: none !important; border-radius: 4px !important; white-space: nowrap !important; border: none !important; transition: background 0.2s, transform 0.2s !important; cursor: pointer !important; pointer-events: auto !important; } .doc-link:hover { background: var(--gold-light) !important; transform: translateY(-1px) !important; } /* 7. SHOP TOOLBAR — remove sort, just show category filters cleanly */ .shop-toolbar { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 12px !important; margin-bottom: 28px !important; justify-content: flex-start !important; } .shop-sort, .shop-sort-wrap, select[id*="sort"], select[class*="sort"], .sort-filter, #shopSort, .shop-toolbar-right .shop-sort { display: none !important; } /* 8. PAGE-LEVEL LAYOUT — no giant gaps, proper spacing */ .page-wrap { position: relative; z-index: 1; min-height: 100vh; } .wrap-section { width: min(1180px, calc(100% - 40px)) !important; margin-left: auto !important; margin-right: auto !important; padding-top: 60px !important; padding-bottom: 60px !important; } /* 9. NAV spacing fix — ticker is 30px, nav sits at top:30px */ .ticker-wrap { height: 30px !important; display: flex !important; align-items: center !important; } nav { top: 30px !important; } .page-hero, .hero { margin-top: 0 !important; padding-top: 90px !important; } /* 10. SECTION spacing — remove massive gaps */ section { padding: clamp(60px, 7vw, 100px) clamp(20px, 5vw, 72px) !important; } .page-hero { padding: 130px clamp(20px, 5vw, 72px) 70px !important; min-height: 42vh !important; } /* 11. FOOTER responsive */ @media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr !important; gap: 32px !important; } } /* 12. MOBILE SHOP — proper grid, no squish, no right-side gaps */ @media (max-width: 900px) { .shop-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; width: 100% !important; padding: 0 !important; } #shop { padding-left: 16px !important; padding-right: 16px !important; width: 100% !important; } .shop-table-wrap { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; } .mc-canvas-wrap { height: 160px !important; min-height: 160px !important; max-height: 160px !important; } .mc-canvas-wrap canvas { height: 160px !important; max-height: 160px !important; } } @media (max-width: 500px) { .shop-grid { grid-template-columns: 1fr !important; } } /* 13. BODY — prevent any accidental overflow locking scroll */ body.modal-open, body.cart-open, body.checkout-open { overflow: hidden !important; } /* 14. Cart drawer — ensure it's fully functional and doesn't block page */ .cart-overlay { z-index: 10000 !important; } .cart-drawer { z-index: 10001 !important; } #productOverlay { z-index: 10003 !important; } #checkoutOverlay { z-index: 10002 !important; } /* 15. Section gaps fix — no giant white/dark blank areas */ section + section, section + hr, hr + section { margin-top: 0 !important; } .divider, hr.divider, hr.section-gap { display: block !important; height: 1px !important; background: linear-gradient(90deg, transparent, rgba(200,150,12,0.25), transparent) !important; border: none !important; margin: 0 !important; } /* 16. MARKET PANEL BAR — horizontal scroll on mobile, no overflow */ .market-panel-bar { display: flex !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; gap: 0 !important; scrollbar-width: none !important; flex-wrap: nowrap !important; } .market-panel-bar::-webkit-scrollbar { display: none !important; } .livebar-cell { flex-shrink: 0 !important; white-space: nowrap !important; } /* 17. SHOP DESK HEAD — flex layout, no overlap on mobile */ .shop-section-head { display: flex !important; flex-wrap: wrap !important; align-items: flex-start !important; justify-content: space-between !important; gap: 24px !important; margin-bottom: 32px !important; } .shop-desk-meta { display: flex !important; flex-wrap: wrap !important; gap: 16px !important; align-items: center !important; } .shop-desk-stat { display: flex !important; flex-direction: column !important; gap: 4px !important; padding: 12px 18px !important; border: 1px solid rgba(200,150,12,0.22) !important; background: rgba(200,150,12,0.06) !important; min-width: 110px !important; } .shop-desk-stat span { font-size: 10px !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: var(--grey) !important; } .shop-desk-stat b { font-family: 'Cormorant Garamond', serif !important; font-size: 18px !important; color: var(--gold-light) !important; } @media (max-width: 900px) { .shop-section-head { flex-direction: column !important; } .shop-desk-meta { width: 100% !important; } .shop-desk-stat { flex: 1 !important; min-width: 80px !important; padding: 10px 12px !important; } .shop-desk-stat b { font-size: 15px !important; } } /* 18. MC name row — prevent overflow */ .mc-name-row { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; justify-content: space-between !important; padding: 10px 16px !important; font-size: 11px !important; color: var(--grey) !important; border-top: 1px solid rgba(200,150,12,0.1) !important; } .mc-demo-note { color: rgba(200,150,12,0.5) !important; } /* 19. PRODUCT OVERLAY centered */ .product-overlay { position: fixed !important; inset: 0 !important; display: none !important; align-items: center !important; justify-content: center !important; z-index: 10003 !important; background: rgba(0,0,0,0.85) !important; padding: 20px !important; overflow-y: auto !important; } .product-overlay[aria-hidden="false"], .product-overlay.open { display: flex !important; } /* 20. General text readability */ p, li { line-height: 1.75 !important; } .section-body { font-size: 15px !important; max-width: 700px !important; } /* 21. Ensure all clickable doc links work */ a.doc-link, a[href$=".pdf"] { pointer-events: auto !important; cursor: pointer !important; } /* 22. CONSULTATION DESK — executive booking section */ #consult { position: relative; } .consult-head { display: grid !important; grid-template-columns: 1fr !important; justify-items: center !important; gap: 32px !important; margin-bottom: 26px !important; } .consult-head-body { text-align: center !important; } .consult-stat { min-width: 150px !important; } .consult-stat b { font-size: 22px !important; letter-spacing: 0.06em !important; } .consult-spots { display: flex !important; align-items: center !important; gap: 10px !important; padding: 8px 12px !important; margin: 6px 0 0 !important; border: 1px solid rgba(200,150,12,0.35) !important; border-left: 3px solid var(--gold) !important; background: linear-gradient(90deg, rgba(200,150,12,0.12), rgba(200,150,12,0.02)) !important; } .consult-spots-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--gold-light); animation: consultPulse 1.8s infinite; flex-shrink: 0; } @keyframes consultPulse { 0% { box-shadow: 0 0 0 0 rgba(232,180,34,0.55); } 70% { box-shadow: 0 0 0 10px rgba(232,180,34,0); } 100% { box-shadow: 0 0 0 0 rgba(232,180,34,0); } } .consult-spots p { font-size: 11px !important; line-height: 1.5 !important; color: rgba(245,242,236,0.8) !important; } .consult-spots b { color: var(--gold-light); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 10px; } .consult-spots-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--gold-light); animation: consultPulse 1.8s infinite; flex-shrink: 0; } @keyframes consultPulse { 0% { box-shadow: 0 0 0 0 rgba(232,180,34,0.55); } 70% { box-shadow: 0 0 0 10px rgba(232,180,34,0); } 100% { box-shadow: 0 0 0 0 rgba(232,180,34,0); } } .consult-spots p { font-size: 13.5px !important; line-height: 1.6 !important; color: rgba(245,242,236,0.8) !important; } .consult-spots b { color: var(--gold-light); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 12px; } .consult-grid { display: grid !important; grid-template-columns: 1fr !important; max-width: 680px !important; margin-left: auto !important; margin-right: auto !important; gap: 22px !important; margin-bottom: 36px !important; } .consult-card { position: relative; display: flex; flex-direction: column; padding: 30px 28px 24px; border-radius: 18px; border: 1px solid rgba(232,180,34,0.16); background: linear-gradient(160deg, #181613 0%, #121110 100%); box-shadow: 0 26px 60px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.05); overflow: hidden; transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } .consult-card:hover { transform: translateY(-4px); border-color: rgba(232,180,34,0.42); box-shadow: 0 34px 80px rgba(0,0,0,0.55), 0 0 0 1px rgba(232,180,34,0.08); } .consult-card-featured { border-color: rgba(232,180,34,0.42); background: linear-gradient(160deg, #1A1612 0%, #131110 100%); } .consult-jet-strip { margin: -30px -28px 24px; height: 232px; background: url('../meeting-jet.jpg') center 12% / cover no-repeat; position: relative; overflow: hidden; animation: jetFadeIn 1.1s cubic-bezier(0.16,1,0.3,1) both; } .consult-jet-strip::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, #1A1612 0%, rgba(26,22,18,0.9) 28%, rgba(26,22,18,0.42) 62%, rgba(26,22,18,0.08) 100%); } .consult-jet-strip::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(232,180,34,0.65), transparent); z-index: 1; } /* fee covers the meeting only — red alert */ .consult-fee-note { font-size: 11.5px; line-height: 1.6; color: #ff8585; font-weight: 600; font-style: italic; margin: -2px 0 14px; padding: 9px 12px; border: 1px solid rgba(255,80,80,0.55); border-left: 4px solid #ff5c5c; border-radius: 6px; background: rgba(180,20,20,0.16); box-shadow: 0 0 18px rgba(255,60,60,0.35), inset 0 0 12px rgba(255,60,60,0.08); animation: feeGlow 2.6s ease-in-out infinite; } .bk-fee-note { font-size: 12.5px; line-height: 1.65; color: #ff8a8a; font-weight: 500; background: rgba(180,20,20,0.16); border: 1px solid rgba(255,80,80,0.55); border-left: 4px solid #ff5c5c; border-radius: 6px; padding: 11px 14px; margin-bottom: 14px; box-shadow: 0 0 18px rgba(255,60,60,0.3), inset 0 0 12px rgba(255,60,60,0.07); animation: feeGlow 2.6s ease-in-out infinite; } .bk-fee-note b { color: #ffb0b0; } @keyframes feeGlow { 0%, 100% { box-shadow: 0 0 13px rgba(255,60,60,0.26), inset 0 0 12px rgba(255,60,60,0.05); } 50% { box-shadow: 0 0 28px rgba(255,60,60,0.5), inset 0 0 15px rgba(255,60,60,0.13); } } /* what you get — labelled section */ .consult-section { margin-bottom: 22px; } .consult-section-label { font-family: 'Barlow Condensed', sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .consult-section-label::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(232,180,34,0.35), transparent); } .consult-card-tag { font-family: 'Barlow Condensed', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-pale); padding: 6px 12px; border: 1px solid rgba(232,180,34,0.4); background: rgba(200,150,12,0.12); border-radius: 999px; white-space: nowrap; } .consult-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 18px; } .consult-card-icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; color: var(--gold-light); border: 1px solid rgba(232,180,34,0.32); background: #0F0E0C; border-radius: 50%; flex-shrink: 0; } .consult-card[data-engagement="call"] .consult-card-icon { border-color: rgba(37,211,102,0.45); background: rgba(37,211,102,0.08); } .consult-card-icon img { width: 26px; height: 26px; object-fit: contain; display: block; } .consult-card h3 { font-family: 'Cormorant Garamond', serif; font-size: 27px; font-weight: 600; color: var(--white); margin-bottom: 10px; line-height: 1.15; } .consult-card-desc { font-size: 13.5px; line-height: 1.7; color: rgba(245,242,236,0.62); margin-bottom: 18px; } .consult-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; } .consult-price-only { font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: #0E0C08; background: linear-gradient(135deg, #f5d87a, #d9a80d); padding: 4px 10px; border-radius: 999px; } .consult-price-amount { font-family: 'Cormorant Garamond', serif; font-size: 38px; font-weight: 700; background: linear-gradient(135deg, #5ef08a 0%, #2ecc71 55%, #1fa855 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #2ecc71; filter: drop-shadow(0 0 12px rgba(46,204,113,0.45)); animation: pricePulse 2.4s ease-in-out infinite; line-height: 1; position: relative; } .consult-price-per { font-family: 'Barlow Condensed', sans-serif; font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey); width: 100%; margin-top: 4px; } .consult-options { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; } .consult-option { font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 7px 13px; border: 1px solid rgba(200,150,12,0.28); color: var(--gold-pale); border-radius: 999px; background: rgba(200,150,12,0.06); } .consult-free { margin-bottom: 20px; padding: 16px 18px; border: 1px solid rgba(232,180,34,0.55); border-radius: 12px; background: linear-gradient(135deg, rgba(200,150,12,0.16), rgba(200,150,12,0.05)); box-shadow: 0 0 24px rgba(200,150,12,0.22), inset 0 1px 0 rgba(255,255,255,0.06); } .consult-free-badge { display: inline-block; font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #0E0C08; background: linear-gradient(135deg, #f5d87a, #d9a80d); padding: 5px 12px; border-radius: 999px; margin-bottom: 12px; box-shadow: 0 0 18px rgba(232,180,34,0.45); } .consult-free-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .consult-free-list li { font-size: 12.5px; line-height: 1.55; color: rgba(245,242,236,0.78); padding-left: 22px; position: relative; } .consult-free-list li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--gold-light); font-weight: 700; } .consult-free-list b { color: var(--gold-light); } .consult-features { list-style: none; margin: 0; padding: 0; } .consult-features li { position: relative; padding-left: 24px; font-size: 13px; line-height: 1.6; color: rgba(245,242,236,0.75); margin-bottom: 11px; } .consult-features li b { color: var(--gold-light); font-weight: 600; } .consult-features li::before { content: '\2713'; position: absolute; left: 0; top: 1px; width: 15px; height: 15px; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; color: #0E0C08; background: linear-gradient(135deg, #f5d87a, #d9a80d); border-radius: 50%; } .consult-book { margin-top: auto; width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; border: none; cursor: pointer; padding: 14px 20px; border-radius: 12px; font-size: 12.5px; } .consult-book-arrow { transition: transform 0.25s ease; } .consult-book:hover .consult-book-arrow { transform: translateX(4px); } .consult-fee-note { margin: 12px 0 0; text-align: center; } .consult-steps { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 14px !important; } .consult-step { padding: 18px; border: 1px solid rgba(245,216,122,0.1); background: rgba(255,255,255,0.02); border-radius: 8px; } .consult-step b { display: block; font-family: 'Cormorant Garamond', serif; font-size: 22px; color: var(--gold); margin-bottom: 6px; } .consult-step span { font-size: 12.5px; line-height: 1.55; color: rgba(245,242,236,0.62); } /* 22a. HEAD + HOST — "Need a Job Done?" above Arakel's photo, combined intro beside it */ .consult-host-card { display: flex; align-items: center; justify-content: center; gap: 22px; max-width: 840px; width: 100%; } .consult-head-photo { width: 225px; aspect-ratio: 9 / 16; flex-shrink: 0; overflow: hidden; border-radius: 10px; border: 1px solid rgba(232,180,34,0.45); box-shadow: 0 18px 46px rgba(200,150,12,0.25); } .consult-head-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; filter: brightness(0.92) saturate(0.96); } .consult-host-info { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; max-width: 400px; } .consult-head-host-name { font-family: 'Cormorant Garamond', serif; font-size: 17px; font-weight: 600; color: var(--gold-light); line-height: 1.1; } .consult-head-host-role { font-family: 'Barlow Condensed', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); } .consult-head-host-desc { font-size: 10.5px; line-height: 1.55; color: rgba(245,242,236,0.68); margin-top: 1px; } .bk-host { display: flex; align-items: center; gap: 14px; padding: 12px 16px; margin-bottom: 18px; border: 1px solid rgba(245,216,122,0.16); border-radius: 6px; background: rgba(200,150,12,0.06); } .bk-host img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; object-position: top center; border: 1px solid rgba(232,180,34,0.4); } .bk-host span { font-size: 13px; color: rgba(245,242,236,0.7); } .bk-host b { color: var(--gold-light); } .bk-host-hero { display: flex; align-items: center; gap: 16px; padding: 14px 16px; margin-bottom: 22px; border: 1px solid rgba(232,180,34,0.4); border-radius: 8px; background: linear-gradient(145deg, rgba(200,150,12,0.14), rgba(255,255,255,0.02)); } .bk-host-hero img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: top center; border: 2px solid rgba(232,180,34,0.55); flex-shrink: 0; } .bk-host-hero-text b { display: block; font-family: 'Cormorant Garamond', serif; font-size: 18px; font-weight: 600; color: var(--white); margin-bottom: 3px; } .bk-host-hero-text span { font-size: 12.5px; line-height: 1.55; color: rgba(245,242,236,0.62); } @media (max-width: 480px) { .bk-host-hero { flex-direction: column; text-align: center; } .bk-host-hero-text b, .bk-host-hero-text span { text-align: center; } } @media (max-width: 900px) { .consult-head { gap: 26px !important; } .consult-host-card { align-items: flex-start; gap: 12px; } .consult-head-photo { width: 150px; } .consult-head-host-name { font-size: 15px; } .consult-head-host-role { font-size: 8.5px; } .consult-head-host-desc { font-size: 10px; line-height: 1.5; } .consult-spots { padding: 6px 10px !important; gap: 8px !important; } .consult-spots p { font-size: 10px !important; } .consult-spots b { font-size: 9px !important; } } /* 22b. BOOKING MODAL */ .consult-modal { max-width: 620px !important; padding: 36px 34px 30px !important; max-height: calc(100vh - 24px) !important; } .consult-modal input[type="date"] { color-scheme: dark; } .bk-progress { display: flex; gap: 10px; margin-bottom: 26px; } .bk-progress-step { flex: 1; text-align: center; font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--grey); padding: 9px 6px; border: 1px solid rgba(245,216,122,0.12); border-radius: 4px; } .bk-progress-step.active { color: var(--black); background: var(--gold); border-color: var(--gold); } .bk-pane[hidden] { display: none !important; } .bk-title { font-family: 'Cormorant Garamond', serif; font-size: 26px; font-weight: 600; color: var(--white); margin-bottom: 8px; } .bk-sub { font-size: 13.5px; line-height: 1.65; color: rgba(245,242,236,0.62); margin-bottom: 20px; } .bk-eng-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; } .bk-eng { text-align: left; padding: 16px; border: 1px solid rgba(245,216,122,0.16); background: rgba(255,255,255,0.02); border-radius: 6px; cursor: pointer; color: var(--white); transition: border-color 0.2s, background 0.2s; } .bk-eng b { display: block; font-family: 'Cormorant Garamond', serif; font-size: 18px; font-weight: 600; margin-bottom: 4px; } .bk-eng span { font-size: 12px; color: rgba(245,242,236,0.6); line-height: 1.5; display: block; } .bk-eng:hover { border-color: rgba(232,180,34,0.5); } .bk-eng.active { border-color: var(--gold); background: rgba(200,150,12,0.12); box-shadow: inset 0 0 0 1px rgba(232,180,34,0.4); } .bk-block { margin-bottom: 20px; } .bk-field-label { font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; } .bk-pills { display: flex; flex-wrap: wrap; gap: 10px; } .bk-pill { padding: 10px 18px; font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid rgba(245,216,122,0.18); background: transparent; color: var(--white); border-radius: 4px; cursor: pointer; } .bk-pill:hover { border-color: rgba(232,180,34,0.5); } .bk-pill.active { background: var(--gold); color: var(--black); border-color: var(--gold); } .bk-price-line { margin-top: 14px; font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(245,242,236,0.7); } .bk-price-line b { color: var(--gold-light); font-size: 16px; } .bk-includes { list-style: none; margin: 0; padding: 0; } .bk-includes li { position: relative; padding-left: 20px; font-size: 13.5px; line-height: 1.6; color: rgba(245,242,236,0.72); margin-bottom: 8px; } .bk-includes li::before { content: ''; position: absolute; left: 0; top: 8px; width: 7px; height: 7px; background: var(--gold); clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); } .bk-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; } .bk-field[hidden] { display: none !important; } .bk-field { display: flex; flex-direction: column; gap: 6px; font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--grey); } .bk-field-wide { grid-column: 1 / -1; } .bk-field input, .bk-field textarea { font-family: 'Manrope', sans-serif; font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--white); background: rgba(255,255,255,0.04); border: 1px solid rgba(245,216,122,0.16); border-radius: 4px; padding: 11px 13px; outline: none; transition: border-color 0.2s; } .bk-field input:focus, .bk-field textarea:focus { border-color: var(--gold); } .bk-field textarea { resize: vertical; min-height: 90px; } .bk-field input::placeholder, .bk-field textarea::placeholder { color: rgba(245,242,236,0.3); } .bk-error { font-size: 13px; color: var(--red); margin-bottom: 14px; } .bk-nav { display: flex; justify-content: flex-end; gap: 12px; margin-top: 8px; } .bk-nav .btn-outline { margin-left: 0; } .bk-review { border: 1px solid rgba(245,216,122,0.14); border-radius: 6px; margin-bottom: 18px; overflow: hidden; } .bk-review-row[hidden] { display: none !important; } .bk-review-row { display: flex; justify-content: space-between; gap: 18px; padding: 12px 16px; font-size: 13.5px; } .bk-review-row:nth-child(odd) { background: rgba(255,255,255,0.02); } .bk-review-row span { color: rgba(245,242,236,0.55); } .bk-review-row b { color: var(--white); text-align: right; } .bk-review-job { flex-direction: column; gap: 4px; } .bk-review-job b { text-align: left; font-weight: 500; line-height: 1.55; color: rgba(245,242,236,0.85); } /* booking consent, tax note, crypto + done inside the booking modal */ .bk-field-hint { display: block; font-size: 11px; color: rgba(245,242,236,0.45); margin-top: 4px; } .bk-agree { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid rgba(245,216,122,0.16); border-radius: 6px; background: rgba(255,255,255,0.02); cursor: pointer; font-size: 12.5px; line-height: 1.6; color: rgba(245,242,236,0.72); } .bk-agree input { margin-top: 2px; accent-color: var(--gold); flex-shrink: 0; width: 16px; height: 16px; } .bk-agree b { color: var(--gold-light); } .bk-tax-note { font-size: 12px; line-height: 1.65; color: rgba(245,216,122,0.75); background: rgba(200,150,12,0.08); border-left: 3px solid var(--gold); padding: 10px 14px; margin-bottom: 16px; border-radius: 4px; } .bk-done-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-bottom: 6px; } .bk-tax-note-done { margin: 16px auto 0; max-width: 420px; text-align: left; } /* booking crypto panel — polished */ .consult-modal .crypto-panel { margin-top: 0; padding: 22px; border: 1px solid rgba(214,174,73,0.35); border-radius: 10px; background: linear-gradient(145deg, rgba(200,150,12,0.10), rgba(0,0,0,0.38)); } .consult-modal .crypto-body { align-items: center; } .consult-modal .crypto-qr { width: 210px; height: 210px; margin: 0; flex-shrink: 0; background: #ffffff; padding: 14px; border-radius: 12px; border: 1px solid rgba(214,174,73,0.55); box-shadow: 0 0 0 5px rgba(214,174,73,0.10), 0 16px 36px rgba(0,0,0,0.45); overflow: hidden; } .consult-modal .crypto-qr img, .consult-modal .crypto-qr canvas, .consult-modal .crypto-qr svg { width: 100% !important; height: 100% !important; display: block; } .consult-modal .crypto-amount { font-size: 30px; } .consult-modal .crypto-address-input { padding: 11px 13px; background: rgba(0,0,0,0.45); border-color: rgba(214,174,73,0.3); border-radius: 6px; font-size: 12px; } .consult-modal .crypto-copy { border-radius: 6px; } .consult-modal .crypto-status { border-radius: 4px; } .consult-modal .crypto-actions { gap: 8px; } .consult-modal .crypto-actions .btn-outline { display: inline-flex; width: auto; margin: 0; padding: 8px 14px; font-size: 11px; letter-spacing: 0.08em; } @media (max-width: 600px) { .consult-modal .crypto-panel { padding: 16px 14px; gap: 12px; } .consult-modal .crypto-body { flex-direction: column; align-items: center; } .consult-modal .crypto-meta { text-align: center; } .consult-modal .crypto-qr { width: 200px; height: 200px; padding: 12px; } .consult-modal .bk-title { font-size: 22px; margin-bottom: 6px; } .consult-modal .bk-sub { margin-bottom: 14px; font-size: 12.5px; } .consult-modal .crypto-note { font-size: 10.5px; } .consult-modal .crypto-address-input { font-size: 11px; padding: 10px 11px; } } @media (max-width: 900px) { .consult-grid { gap: 16px !important; } .consult-card { padding: 22px 18px 20px !important; border-radius: 14px !important; } .consult-card h3 { font-size: 21px !important; } .consult-card-desc { font-size: 12.5px !important; margin-bottom: 14px !important; } .consult-price-amount { font-size: 30px !important; } .consult-price-only { font-size: 10px !important; padding: 3px 8px !important; letter-spacing: 0.18em !important; } .consult-price-per { font-size: 9.5px !important; } .consult-card-tag { font-size: 9px !important; padding: 4px 9px !important; } .consult-card-top { margin-bottom: 14px !important; } .consult-card-icon { width: 42px !important; height: 42px !important; } .consult-jet-strip { margin: -22px -18px 18px !important; height: 166px !important; } .consult-options { gap: 6px !important; margin-bottom: 16px !important; } .consult-option { font-size: 9.5px !important; padding: 6px 9px !important; letter-spacing: 0.06em !important; } .consult-section { margin-bottom: 18px !important; } .consult-section-label { margin-bottom: 12px !important; } .consult-features li { font-size: 12px !important; padding-left: 21px !important; margin-bottom: 8px !important; } .consult-features li::before { width: 14px !important; height: 14px !important; font-size: 8px !important; } .consult-book { padding: 12px 10px !important; font-size: 12px !important; border-radius: 10px !important; } .consult-steps { grid-template-columns: 1fr 1fr !important; } .bk-eng-grid { grid-template-columns: 1fr; } .bk-form { grid-template-columns: 1fr; } .consult-modal { padding: 26px 18px 22px !important; } .bk-nav { flex-wrap: wrap; } .bk-nav .btn-primary, .bk-nav .btn-outline { flex: 1; text-align: center; } } @media (max-width: 420px) { .consult-grid { gap: 14px !important; } .consult-card { padding: 18px 14px 16px !important; } .consult-jet-strip { margin: -18px -14px 16px !important; height: 148px !important; } .consult-card-icon { width: 38px !important; height: 38px !important; } .consult-card-icon img { width: 22px !important; height: 22px !important; } .consult-card h3 { font-size: 18px !important; } .consult-price-amount { font-size: 26px !important; } .consult-option { font-size: 8.5px !important; padding: 5px 6px !important; } .consult-features li { font-size: 11px !important; } .consult-book { font-size: 11px !important; padding: 11px 8px !important; letter-spacing: 0.08em !important; } } @media (max-width: 520px) { .consult-steps { grid-template-columns: 1fr !important; } } /* Company car thumbnails — show the full car, no extra zoom */ /* Schematics thumbnails — full image shown, no extra zoom */