/* ========================================================================== VISIONBRIDGE EXPORTS & IMPORTS PVT. LTD. Main stylesheet — HTML5 / CSS3 / Vanilla JS build -------------------------------------------------------------------------- 01 Design tokens 11 Process timeline 02 Reset & base 12 Why / principles 03 Typography & utilities 13 Trade dashboard (conceptual) 04 Buttons & links 14 Cinematic band, case studies 05 Page transition, cursor 15 Sliders, gallery, lightbox 06 Header & mobile menu 16 Final CTA, contact, forms, map 07 Hero slider 17 Footer & floating CTA 08 Page hero (inner pages) 18 Legal pages 09 Sections & layouts 19 Reveal animations 10 Trade map, services, 20 Responsive products, modal 21 Reduced motion & print ========================================================================== */ /* Self-hosted variable fonts (SIL Open Font License — see assets/fonts) */ @font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("../assets/fonts/manrope-latin-wght-normal.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../assets/fonts/inter-latin-wght-normal.woff2") format("woff2"); } /* 01 — DESIGN TOKENS ------------------------------------------------------ */ :root { /* Brand palette — sampled from the official VisionBridge logo */ --orange: #ff9800; --orange-soft: #ffb547; --orange-ink: #a85f00; /* accessible orange for small text on light backgrounds */ --orange-display: #d97706; /* brand orange tuned for large headings on light backgrounds (3:1) */ --black: #0a0a0b; --charcoal: #141416; --charcoal-2: #1c1c1f; --charcoal-3: #26262a; --gray-700: #44444a; --gray-600: #5d5d64; --gray-500: #85858c; --gray-300: #c9c9cd; --gray-200: #e3e2de; --gray-100: #efeeea; --off-white: #f7f6f2; --white: #ffffff; --text: #121214; --text-muted: #5b5b62; --text-on-dark: #f4f3ef; --text-on-dark-muted: #a9a9af; --line: rgba(10, 10, 11, 0.12); --line-dark: rgba(255, 255, 255, 0.14); /* Type */ --font-display: "Manrope", "Plus Jakarta Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --font-body: "Inter", "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace; /* Layout */ --container: 1280px; --gutter: clamp(16px, 4vw, 48px); --section-y: clamp(72px, 10vw, 148px); --header-h: 84px; --radius: 4px; --radius-lg: 10px; /* Motion */ --ease: cubic-bezier(0.22, 0.8, 0.2, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --t-fast: 0.25s; --t-med: 0.55s; --t-slow: 0.9s; } /* 02 — RESET & BASE ------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); } body { margin: 0; font-family: var(--font-body); font-size: 1rem; line-height: 1.65; color: var(--text); background: var(--white); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } body.is-locked { overflow: hidden; } img, svg, video, iframe { display: block; max-width: 100%; } img { height: auto; } h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; } ul, ol { padding: 0; list-style: none; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } input, select, textarea { font: inherit; color: inherit; } address { font-style: normal; } ::selection { background: var(--orange); color: var(--black); } :focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 2px; } [hidden] { display: none !important; } .skip-link { position: fixed; left: 16px; top: -80px; z-index: 2000; background: var(--orange); color: var(--black); padding: 12px 18px; font-weight: 700; border-radius: var(--radius); transition: top var(--t-fast) var(--ease); } .skip-link:focus { top: 16px; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* 03 — TYPOGRAPHY & UTILITIES -------------------------------------------- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .container--narrow { max-width: 920px; } .display, .h-xl, .h-lg, .h-md { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.025em; line-height: 1.02; text-transform: uppercase; text-wrap: balance; } .h-xl { font-size: clamp(1.85rem, 5.2vw, 4.9rem); } .display, .h-lg { font-size: clamp(1.8rem, 4.4vw, 3.9rem); } .h-md { font-size: clamp(1.35rem, 2.6vw, 2.1rem); line-height: 1.1; } .h-sm { font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; letter-spacing: 0.01em; line-height: 1.3; text-transform: uppercase; } .accent { color: var(--orange-display); } .on-dark .accent { color: var(--orange); } .lead { font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.6; color: var(--text-muted); max-width: 62ch; } .body-copy { color: var(--text-muted); max-width: 62ch; } .body-copy + .body-copy { margin-top: 1.1em; } .on-dark .lead, .on-dark .body-copy { color: var(--text-on-dark-muted); } /* Small numbered label: "01 / ABOUT" */ .eyebrow { display: inline-flex; align-items: center; gap: 14px; font-family: var(--font-display); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text); } .eyebrow::before { content: ""; width: 36px; height: 2px; background: var(--orange); flex: none; } .eyebrow b { color: var(--orange-ink); font-weight: 800; } .on-dark .eyebrow { color: var(--text-on-dark); } .on-dark .eyebrow b { color: var(--orange); } .mono { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; } .tag { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; padding: 6px 10px; border: 1px solid var(--line); border-radius: 100px; color: var(--text-muted); background: var(--white); } .tag--template { border-style: dashed; border-color: var(--orange-ink); color: var(--orange-ink); background: rgba(255, 152, 0, 0.07); } .on-dark .tag { background: transparent; border-color: var(--line-dark); color: var(--text-on-dark-muted); } .on-dark .tag--template { border-color: var(--orange); color: var(--orange); } .placeholder { font-family: var(--font-mono); font-size: 0.82em; color: var(--orange-ink); background: rgba(255, 152, 0, 0.1); padding: 1px 6px; border-radius: 3px; } .on-dark .placeholder { color: var(--orange-soft); background: rgba(255, 152, 0, 0.14); } .note { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border: 1px dashed rgba(168, 95, 0, 0.55); border-radius: var(--radius); background: rgba(255, 152, 0, 0.06); color: var(--text-muted); font-size: 0.92rem; line-height: 1.55; } .note svg { flex: none; width: 18px; height: 18px; margin-top: 3px; color: var(--orange-ink); } .on-dark .note { color: var(--text-on-dark-muted); border-color: rgba(255, 152, 0, 0.45); background: rgba(255, 152, 0, 0.06); } .on-dark .note svg { color: var(--orange); } /* Media frame with graceful fallback if a remote image is unavailable */ .media { position: relative; overflow: hidden; background-color: var(--charcoal-2); background-image: linear-gradient(135deg, rgba(255, 152, 0, 0.16), transparent 45%), linear-gradient(var(--line-dark) 1px, transparent 1px), linear-gradient(90deg, var(--line-dark) 1px, transparent 1px); background-size: 100% 100%, 48px 48px, 48px 48px; } .media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .media img.is-broken { visibility: hidden; } .media > img, .hero__slide img, .page-hero__bg img, .cinema__bg img, .cta__bg img { color: transparent; } /* hide alt text while loading */ .ratio-4x5 { aspect-ratio: 4 / 5; } .ratio-4x3 { aspect-ratio: 4 / 3; } .ratio-3x2 { aspect-ratio: 3 / 2; } .ratio-16x9 { aspect-ratio: 16 / 9; } .ratio-1x1 { aspect-ratio: 1 / 1; } /* 04 — BUTTONS & LINKS ---------------------------------------------------- */ .btn { --btn-bg: var(--orange); --btn-fg: var(--black); --btn-bd: var(--orange); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; padding: 14px 26px; font-family: var(--font-display); font-weight: 800; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.2; text-align: center; color: var(--btn-fg); background: var(--btn-bg); border: 1.5px solid var(--btn-bd); border-radius: var(--radius); transition: transform var(--t-fast) var(--ease), background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast); -webkit-tap-highlight-color: transparent; } .btn .arrow { width: 18px; height: 18px; flex: none; transition: transform var(--t-fast) var(--ease); } .btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -14px rgba(255, 152, 0, 0.75); } .btn:hover .arrow { transform: translateX(5px); } .btn:active { transform: translateY(0) scale(0.98); } .btn--primary:hover { --btn-bg: var(--orange-soft); --btn-bd: var(--orange-soft); } .btn--ghost { --btn-bg: transparent; --btn-fg: var(--white); --btn-bd: rgba(255, 255, 255, 0.55); } .btn--ghost:hover { --btn-bg: var(--white); --btn-fg: var(--black); --btn-bd: var(--white); box-shadow: none; } .btn--dark { --btn-bg: var(--black); --btn-fg: var(--white); --btn-bd: var(--black); } .btn--dark:hover { --btn-bg: var(--charcoal-3); --btn-bd: var(--charcoal-3); box-shadow: 0 14px 30px -16px rgba(0, 0, 0, 0.6); } .btn--outline { --btn-bg: transparent; --btn-fg: var(--black); --btn-bd: var(--black); } .btn--outline:hover { --btn-bg: var(--black); --btn-fg: var(--white); box-shadow: none; } .btn--sm { min-height: 44px; padding: 10px 18px; font-size: 0.72rem; } .btn--block { width: 100%; } .link-arrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 800; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; padding: 6px 0; position: relative; } .link-arrow::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--orange); transform: scaleX(0.28); transform-origin: left; transition: transform var(--t-med) var(--ease); } .link-arrow:hover::after, .link-arrow:focus-visible::after { transform: scaleX(1); } .link-arrow .arrow { width: 18px; height: 18px; transition: transform var(--t-fast) var(--ease); } .link-arrow:hover .arrow { transform: translateX(6px); } .text-link { background: linear-gradient(var(--orange), var(--orange)) no-repeat 0 100% / 100% 1.5px; padding-bottom: 2px; transition: background-size var(--t-fast); } .text-link:hover { background-size: 100% 100%; color: var(--black); } /* 05 — PAGE TRANSITION & CUSTOM CURSOR ----------------------------------- */ .page-transition { display: none; } .js .page-transition { display: block; position: fixed; inset: 0; z-index: 3000; pointer-events: none; background: var(--black); transform: translateY(0); transition: transform 0.6s var(--ease-in-out); } .js .page-transition::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--orange); } .js.is-loaded .page-transition { transform: translateY(-101%); } .js.is-leaving .page-transition { transform: translateY(0); transition-duration: 0.45s; pointer-events: all; } .js.is-leaving .page-transition::after { top: 0; bottom: auto; } .cursor { display: none; } @media (hover: hover) and (pointer: fine) { .js .cursor { display: block; position: fixed; left: 0; top: 0; z-index: 2500; pointer-events: none; width: 34px; height: 34px; margin: -17px 0 0 -17px; opacity: 0; transition: opacity 0.3s, width 0.3s var(--ease), height 0.3s var(--ease), margin 0.3s var(--ease); } .cursor.is-visible { opacity: 1; } .cursor__ring { position: absolute; inset: 0; border: 1.5px solid var(--orange); border-radius: 50%; transition: background-color 0.3s, border-color 0.3s; } .cursor__ring::before, .cursor__ring::after { content: ""; position: absolute; background: var(--orange); } .cursor__ring::before { left: 50%; top: -6px; bottom: -6px; width: 1px; transform: translateX(-50%); opacity: 0.55; } .cursor__ring::after { top: 50%; left: -6px; right: -6px; height: 1px; transform: translateY(-50%); opacity: 0.55; } .cursor.is-active { width: 58px; height: 58px; margin: -29px 0 0 -29px; } .cursor.is-active .cursor__ring { background: rgba(255, 152, 0, 0.14); } } /* 06 — HEADER & MOBILE MENU ----------------------------------------------- */ .site-header { position: fixed; inset: 0 0 auto 0; z-index: 1000; height: var(--header-h); color: var(--white); border-bottom: 1px solid transparent; transition: background-color var(--t-med) var(--ease), border-color var(--t-med), color var(--t-med), height var(--t-med) var(--ease), transform var(--t-med) var(--ease); } .site-header__inner { height: 100%; display: flex; align-items: center; gap: clamp(16px, 2vw, 32px); } .brand { display: inline-flex; align-items: center; flex: none; background: var(--white); padding: 8px 14px; border-radius: var(--radius); box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.8); transition: padding var(--t-med) var(--ease), box-shadow var(--t-med); } .brand img { height: 46px; width: auto; transition: height var(--t-med) var(--ease); } .nav { margin-left: auto; } .nav__list { display: flex; align-items: center; gap: clamp(14px, 1.9vw, 30px); } .nav__link { position: relative; display: inline-block; padding: 10px 0; font-family: var(--font-display); font-weight: 700; font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; } .nav__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; background: var(--orange); transform: scaleX(0); transform-origin: right; transition: transform 0.4s var(--ease); } .nav__link:hover::after, .nav__link:focus-visible::after, .nav__link.is-active::after { transform: scaleX(1); transform-origin: left; } .nav__link.is-active { color: var(--orange); } .header__cta { flex: none; } .site-header.is-scrolled { --header-h: 68px; background: rgba(255, 255, 255, 0.92); -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px); border-bottom-color: var(--line); color: var(--text); } .site-header.is-scrolled .brand { padding: 4px 0; box-shadow: none; background: transparent; } .site-header.is-scrolled .brand img { height: 42px; } .site-header.is-scrolled .nav__link.is-active { color: var(--orange-ink); } .site-header.is-hidden { transform: translateY(-100%); } .menu-open .site-header { background: transparent; border-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; transform: none; color: var(--white); } .menu-open .site-header .brand { background: var(--white); padding: 6px 10px; } .nav-toggle { display: none; margin-left: auto; width: 48px; height: 48px; position: relative; flex: none; border: 1.5px solid currentColor; border-radius: var(--radius); } .nav-toggle span { position: absolute; left: 13px; right: 13px; height: 2px; background: currentColor; transition: transform 0.4s var(--ease), opacity 0.2s, top 0.4s var(--ease); } .nav-toggle span:nth-child(1) { top: 16px; } .nav-toggle span:nth-child(2) { top: 22px; } .nav-toggle span:nth-child(3) { top: 28px; } .nav-toggle[aria-expanded="true"] span:nth-child(1) { top: 22px; transform: rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] span:nth-child(3) { top: 22px; transform: rotate(-45deg); } .mobile-menu { position: fixed; inset: 0; z-index: 900; background: var(--black); color: var(--white); display: flex; flex-direction: column; padding: calc(var(--header-h) + 20px) var(--gutter) 28px; overflow-y: auto; visibility: hidden; opacity: 0; clip-path: inset(0 0 100% 0); transition: clip-path 0.6s var(--ease-in-out), opacity 0.3s, visibility 0s 0.6s; } .menu-open .mobile-menu { visibility: visible; opacity: 1; clip-path: inset(0 0 0 0); transition: clip-path 0.6s var(--ease-in-out), opacity 0.3s, visibility 0s; } .mobile-menu__list { border-top: 1px solid var(--line-dark); } .mobile-menu__list li { border-bottom: 1px solid var(--line-dark); overflow: hidden; } .mobile-menu__link { display: flex; align-items: baseline; gap: 18px; padding: 15px 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.4rem, 6vw, 2rem); letter-spacing: -0.01em; text-transform: uppercase; transform: translateY(110%); transition: transform 0.6s var(--ease), color 0.2s; } .menu-open .mobile-menu__link { transform: none; transition-delay: calc(0.12s + var(--i, 0) * 0.04s); } .mobile-menu__link .num { font-size: 0.7rem; letter-spacing: 0.18em; color: var(--orange); font-weight: 700; min-width: 22px; } .mobile-menu__link.is-active, .mobile-menu__link:hover { color: var(--orange); } .mobile-menu__foot { margin-top: auto; padding-top: 28px; display: grid; gap: 14px; } .mobile-menu__foot a:not(.btn) { color: var(--text-on-dark-muted); font-size: 0.95rem; } .mobile-menu__foot a:not(.btn):hover { color: var(--orange); } /* 07 — HERO SLIDER -------------------------------------------------------- */ .hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; color: var(--white); background: var(--black); overflow: hidden; isolation: isolate; } .hero__slides, .hero__slide, .hero__overlay { position: absolute; inset: 0; } .hero__slides { z-index: -3; } .hero__slide { opacity: 0; visibility: hidden; transition: opacity 1.2s var(--ease-in-out), visibility 0s 1.2s; } .hero__slide.is-active { opacity: 1; visibility: visible; transition: opacity 1.2s var(--ease-in-out), visibility 0s; z-index: 1; } .hero__slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); } .hero__slide.is-active img { animation: heroZoom 9s linear forwards; } .hero__slide img.is-broken { visibility: hidden; } .hero__slide { background: radial-gradient(120% 90% at 80% 10%, #2a2118 0%, var(--charcoal) 45%, var(--black) 100%); } @keyframes heroZoom { from { transform: scale(1.02); } to { transform: scale(1.14); } } .hero__overlay { z-index: -2; background: linear-gradient(90deg, rgba(8, 8, 9, 0.88) 0%, rgba(8, 8, 9, 0.62) 42%, rgba(8, 8, 9, 0.22) 100%), linear-gradient(180deg, rgba(8, 8, 9, 0.62) 0%, rgba(8, 8, 9, 0) 28%, rgba(8, 8, 9, 0) 55%, rgba(8, 8, 9, 0.9) 100%); } .hero__routes { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; opacity: 0.85; } .route-line { fill: none; stroke: var(--orange); stroke-width: 1.2; stroke-linecap: round; stroke-dasharray: 3 7; opacity: 0.55; vector-effect: non-scaling-stroke; } .route-dot { fill: var(--orange); } .route-pin { fill: none; stroke: var(--orange); stroke-width: 1.2; vector-effect: non-scaling-stroke; } .hero__content { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-top: calc(var(--header-h) + 40px); padding-bottom: 40px; } .hero__title { margin: 22px 0 26px; max-width: 16ch; } .hero__title .line { display: block; overflow: hidden; padding-bottom: 0.06em; } .hero__title .line > span { display: block; } .js .hero__title .line > span { transform: translateY(105%); transition: transform 1.1s var(--ease); } .js.is-loaded .hero__title .line > span { transform: none; } .js.is-loaded .hero__title .line:nth-child(2) > span { transition-delay: 0.12s; } .hero__lead { max-width: 54ch; font-size: clamp(1rem, 1.35vw, 1.2rem); color: rgba(255, 255, 255, 0.82); } .hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; align-items: center; } .hero__actions .link-arrow { margin-left: 10px; color: var(--white); } .js .hero__fade { opacity: 0; transform: translateY(18px); transition: opacity 0.9s var(--ease) 0.35s, transform 0.9s var(--ease) 0.35s; } .js.is-loaded .hero__fade { opacity: 1; transform: none; } .js.is-loaded .hero__fade--2 { transition-delay: 0.5s; } .hero__bar { display: flex; align-items: flex-end; gap: 32px; padding-bottom: 30px; } .hero__tabs { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 2vw, 28px); } .hero__tab { text-align: left; padding: 14px 0 0; position: relative; color: rgba(255, 255, 255, 0.55); transition: color var(--t-fast); } .hero__tab:hover, .hero__tab.is-active { color: var(--white); } .hero__tab-progress { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: rgba(255, 255, 255, 0.22); overflow: hidden; } .hero__tab-progress i { position: absolute; inset: 0; background: var(--orange); transform: scaleX(0); transform-origin: left; } .hero__tab.is-active .hero__tab-progress i { transform: scaleX(var(--hero-p, 0)); } .hero__tab-num { display: block; font-family: var(--font-display); font-weight: 800; font-size: 0.72rem; letter-spacing: 0.2em; color: var(--orange); } .hero__tab-label { display: block; margin-top: 4px; font-family: var(--font-display); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; } .hero__controls { display: flex; align-items: center; gap: 12px; flex: none; } .hero__count { font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.16em; margin-right: 6px; color: rgba(255, 255, 255, 0.7); } .hero__count b { color: var(--white); font-weight: 800; } .hero__mobile-label { display: none; } .icon-btn { width: 48px; height: 48px; display: inline-grid; place-items: center; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.4); color: inherit; transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast) var(--ease); } .icon-btn svg { width: 18px; height: 18px; } .icon-btn:hover { background: var(--orange); border-color: var(--orange); color: var(--black); } .icon-btn:active { transform: scale(0.94); } .icon-btn--dark { border-color: var(--line); } .icon-btn[disabled] { opacity: 0.35; pointer-events: none; } .hero__coords { position: absolute; right: var(--gutter); top: 50%; transform: rotate(90deg) translateX(50%); transform-origin: right top; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); white-space: nowrap; margin-right: 6px; } /* 08 — PAGE HERO (INNER PAGES) ------------------------------------------- */ .page-hero { position: relative; min-height: min(72vh, 680px); display: flex; align-items: flex-end; color: var(--white); background: var(--black); overflow: hidden; isolation: isolate; padding: calc(var(--header-h) + 72px) 0 clamp(40px, 6vw, 80px); } .page-hero--compact { min-height: 0; padding-bottom: clamp(36px, 5vw, 64px); } .page-hero__bg { position: absolute; inset: 0; z-index: -2; background: radial-gradient(120% 90% at 80% 10%, #2a2118 0%, var(--charcoal) 45%, var(--black) 100%); } .page-hero__bg img { width: 100%; height: 100%; object-fit: cover; animation: heroZoom 16s linear forwards; } .page-hero__bg img.is-broken { visibility: hidden; } .page-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8, 8, 9, 0.72) 0%, rgba(8, 8, 9, 0.35) 40%, rgba(8, 8, 9, 0.92) 100%), linear-gradient(90deg, rgba(8, 8, 9, 0.7), rgba(8, 8, 9, 0.1)); } .page-hero__grid { position: absolute; inset: 0; z-index: -1; opacity: 0.5; background-image: linear-gradient(var(--line-dark) 1px, transparent 1px), linear-gradient(90deg, var(--line-dark) 1px, transparent 1px); background-size: 120px 120px; -webkit-mask-image: linear-gradient(180deg, transparent, #000 60%); mask-image: linear-gradient(180deg, transparent, #000 60%); } .page-hero__title { margin-top: 20px; max-width: 18ch; } .page-hero__lead { margin-top: 22px; max-width: 56ch; color: rgba(255, 255, 255, 0.8); font-size: clamp(1rem, 1.35vw, 1.2rem); } .breadcrumb { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; font-family: var(--font-display); font-weight: 700; font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); } .breadcrumb a:hover { color: var(--orange); } .breadcrumb li + li::before { content: "/"; margin-right: 10px; color: var(--orange); } .breadcrumb [aria-current] { color: var(--white); } /* 09 — SECTIONS & LAYOUTS ------------------------------------------------- */ .section { position: relative; padding-block: var(--section-y); } .section--tight { padding-block: clamp(56px, 7vw, 96px); } .section--off { background: var(--off-white); } .section--dark { background: var(--charcoal); color: var(--text-on-dark); } .section--black { background: var(--black); color: var(--text-on-dark); } .section--line { border-top: 1px solid var(--line); } .grid-lines::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.6; background-image: linear-gradient(90deg, var(--line-dark) 1px, transparent 1px); background-size: calc((min(100vw, var(--container)) - 2 * var(--gutter)) / 4) 100%; background-position: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter))) 0; } .section > .container { position: relative; } .section-head { display: grid; gap: 22px; margin-bottom: clamp(36px, 5vw, 72px); } .section-head--split { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: end; column-gap: clamp(24px, 6vw, 96px); } .section-head--split .eyebrow { grid-column: 1 / -1; } .section-head__aside { display: grid; gap: 22px; justify-items: start; } .split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; } .split--wide-media { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } .split__body { display: grid; gap: 24px; justify-items: start; } .split__media { position: relative; } .split__media .media { border-radius: var(--radius); } .media-badge { position: absolute; left: -18px; bottom: 28px; background: var(--orange); color: var(--black); padding: 16px 20px; font-family: var(--font-display); font-weight: 800; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; line-height: 1.5; border-radius: var(--radius); } .media-coords { position: absolute; right: 16px; top: 16px; color: rgba(255, 255, 255, 0.85); background: rgba(8, 8, 9, 0.55); padding: 6px 10px; border-radius: 3px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } /* Editorial about block */ .editorial { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; } .editorial__quote { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.25rem, 2.2vw, 1.85rem); line-height: 1.35; letter-spacing: -0.01em; padding-left: 26px; border-left: 3px solid var(--orange); color: var(--text); } .principles { margin-top: clamp(32px, 4vw, 56px); border-top: 1px solid var(--line); } .principles li { display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); font-family: var(--font-display); font-weight: 800; font-size: clamp(1.05rem, 1.9vw, 1.5rem); letter-spacing: -0.01em; text-transform: uppercase; transition: padding var(--t-med) var(--ease), color var(--t-fast); } .principles li .num { font-size: 0.72rem; letter-spacing: 0.2em; color: var(--orange-ink); } .principles li .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--gray-300); transition: background-color var(--t-fast), transform var(--t-fast) var(--ease); } .principles li:hover { padding-left: 14px; } .principles li:hover .dot { background: var(--orange); transform: scale(1.5); } /* Generic card grid */ .card-grid { display: grid; gap: clamp(16px, 2vw, 28px); grid-template-columns: repeat(3, minmax(0, 1fr)); } .card-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .card-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .info-card { padding: clamp(24px, 3vw, 40px); border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); display: grid; gap: 14px; align-content: start; transition: border-color var(--t-fast), transform var(--t-med) var(--ease), box-shadow var(--t-med); } .info-card:hover { border-color: var(--orange); transform: translateY(-4px); box-shadow: 0 24px 50px -34px rgba(0, 0, 0, 0.45); } .info-card .num { font-family: var(--font-display); font-weight: 800; font-size: 0.75rem; letter-spacing: 0.2em; color: var(--orange-ink); } .info-card p { color: var(--text-muted); } .on-dark .info-card { background: var(--charcoal-2); border-color: var(--line-dark); } .on-dark .info-card p { color: var(--text-on-dark-muted); } .on-dark .info-card .num { color: var(--orange); } .vm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line-dark); border: 1px solid var(--line-dark); border-radius: var(--radius); overflow: hidden; } .vm-card { background: var(--charcoal); padding: clamp(28px, 4.5vw, 64px); display: grid; gap: 22px; align-content: start; } .vm-card blockquote { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.2rem, 2.1vw, 1.75rem); line-height: 1.35; letter-spacing: -0.01em; color: var(--white); } .facts { border-top: 1px solid var(--line); } .facts > div { display: grid; grid-template-columns: minmax(120px, 220px) 1fr; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); } .facts dt { font-family: var(--font-display); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); padding-top: 4px; } .facts dd { font-weight: 500; overflow-wrap: anywhere; } .facts dd a:hover { color: var(--orange-ink); } /* 10 — TRADE MAP ---------------------------------------------------------- */ .trade-map-wrap { position: relative; } .trade-map { position: relative; aspect-ratio: 1000 / 383; width: 100%; } .trade-map__land { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.55; } .trade-map__routes { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .trade-map__routes .tm-route { fill: none; stroke: var(--orange); stroke-width: 1.3; stroke-linecap: round; opacity: 0.5; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; transition: opacity var(--t-fast), stroke-width var(--t-fast); } .trade-map.is-in .tm-route { animation: routeDraw 2.2s var(--ease-in-out) forwards; animation-delay: calc(var(--i, 0) * 0.22s); } @keyframes routeDraw { to { stroke-dashoffset: 0; } } .trade-map__routes .tm-dot { fill: var(--orange-soft); opacity: 0; } .trade-map.is-in .tm-dot { opacity: 1; transition: opacity 0.6s 2s; } .trade-map.has-focus .tm-route { opacity: 0.16; } .trade-map.has-focus .tm-route.is-focus { opacity: 1; stroke-width: 2.2; } .trade-map__node { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 10px; padding: 8px; margin: 0; color: var(--text-on-dark); font-family: var(--font-display); font-weight: 800; font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; white-space: nowrap; } .trade-map__node::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--orange); flex: none; box-shadow: 0 0 0 0 rgba(255, 152, 0, 0.6); animation: nodePulse 2.8s ease-out infinite; animation-delay: calc(var(--i, 0) * 0.4s); } @keyframes nodePulse { 0% { box-shadow: 0 0 0 0 rgba(255, 152, 0, 0.55); } 70%, 100% { box-shadow: 0 0 0 14px rgba(255, 152, 0, 0); } } .trade-map__node span { position: absolute; left: calc(50% + 12px); top: 50%; transform: translateY(-50%); padding: 4px 8px; background: rgba(10, 10, 11, 0.72); border: 1px solid var(--line-dark); border-radius: 3px; transition: border-color var(--t-fast), color var(--t-fast), background-color var(--t-fast); } .trade-map__node[data-side="left"] span { left: auto; right: calc(50% + 12px); } .trade-map__node[data-side="top"] span { left: 50%; top: auto; bottom: calc(50% + 12px); transform: translateX(-50%); } .trade-map__node[data-side="bottom"] span { left: 50%; top: calc(50% + 12px); transform: translateX(-50%); } .trade-map__node:hover span, .trade-map__node.is-focus span, .trade-map__node:focus-visible span { border-color: var(--orange); color: var(--orange); } .trade-map__node--hub::before { width: 13px; height: 13px; background: var(--white); border: 3px solid var(--orange); } .trade-map__node--hub span { background: var(--orange); color: var(--black); border-color: var(--orange); } .trade-map__node--hub:hover span { color: var(--black); } .map-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(20px, 3vw, 36px); } .chip { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 9px 16px; border-radius: 100px; border: 1px solid var(--line); background: transparent; font-family: var(--font-display); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast); } .chip:hover { border-color: var(--orange); } .chip.is-active, .chip[aria-pressed="true"], .chip[aria-selected="true"] { background: var(--orange); border-color: var(--orange); color: var(--black); } .on-dark .chip { border-color: var(--line-dark); color: var(--text-on-dark); } .on-dark .chip.is-active, .on-dark .chip[aria-pressed="true"] { color: var(--black); } .map-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line-dark); color: var(--text-on-dark-muted); font-size: 0.85rem; } .map-meta .mono { color: var(--text-on-dark-muted); } /* Market cards (markets.html) */ .market-card { position: relative; padding: clamp(22px, 2.6vw, 34px); border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); display: grid; gap: 18px; align-content: start; transition: border-color var(--t-fast), box-shadow var(--t-med), transform var(--t-med) var(--ease); } .market-card:hover, .market-card.is-focus { border-color: var(--orange); transform: translateY(-4px); box-shadow: 0 24px 50px -34px rgba(0, 0, 0, 0.45); } .market-card__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; } .market-card dl { display: grid; gap: 12px; } .market-card dl > div { display: grid; gap: 3px; padding-top: 12px; border-top: 1px solid var(--line); } .market-card dt { font-family: var(--font-display); font-weight: 700; font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); } .market-card dd { font-size: 0.95rem; } /* INTERACTIVE SERVICES ---------------------------------------------------- */ .svc { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: stretch; } .svc__list { border-top: 1px solid var(--line-dark); align-self: start; } .svc__tab { width: 100%; display: grid; grid-template-columns: 44px 1fr 22px; align-items: center; gap: 12px; text-align: left; padding: 17px 0 17px 0; border-bottom: 1px solid var(--line-dark); position: relative; color: var(--text-on-dark-muted); font-family: var(--font-display); font-weight: 800; font-size: clamp(1rem, 1.7vw, 1.4rem); letter-spacing: -0.005em; text-transform: uppercase; transition: color var(--t-fast), padding var(--t-med) var(--ease); } .svc__tab::before { content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform 0.6s var(--ease); } .svc__tab .num { font-size: 0.72rem; letter-spacing: 0.2em; font-weight: 700; transition: color var(--t-fast); } .svc__tab .arrow { width: 20px; height: 20px; opacity: 0; transform: translateX(-8px); transition: opacity var(--t-fast), transform var(--t-med) var(--ease); color: var(--orange); } .svc__tab:hover { color: var(--white); } .svc__tab[aria-selected="true"] { color: var(--white); padding-left: 14px; } .svc__tab[aria-selected="true"]::before { transform: scaleX(1); } .svc__tab[aria-selected="true"] .num { color: var(--orange); } .svc__tab[aria-selected="true"] .arrow { opacity: 1; transform: none; } .svc__stage { position: relative; min-height: 520px; border-radius: var(--radius); overflow: hidden; background: var(--charcoal-2); } .svc__panel { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 0.7s var(--ease), visibility 0s 0.7s; } .svc__panel.is-active { opacity: 1; visibility: visible; transition: opacity 0.7s var(--ease), visibility 0s; z-index: 1; } .svc__panel .media { position: absolute; inset: 0; } .svc__panel .media img { transform: scale(1.08); transition: transform 1.4s var(--ease); } .svc__panel.is-active .media img { transform: scale(1); } .svc__panel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 8, 9, 0.1) 20%, rgba(8, 8, 9, 0.92) 100%); } .svc__caption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: clamp(22px, 3vw, 40px); display: grid; gap: 14px; justify-items: start; } .svc__caption .num { font-family: var(--font-display); font-weight: 800; font-size: 0.75rem; letter-spacing: 0.2em; color: var(--orange); } .svc__caption p { color: rgba(255, 255, 255, 0.82); max-width: 52ch; } .svc__caption .link-arrow { color: var(--white); } .js .svc__panel .svc__caption > * { transform: translateY(16px); opacity: 0; transition: transform 0.7s var(--ease), opacity 0.7s var(--ease); } .js .svc__panel.is-active .svc__caption > * { transform: none; opacity: 1; transition-delay: 0.15s; } .js .svc__panel.is-active .svc__caption > *:nth-child(2) { transition-delay: 0.22s; } .js .svc__panel.is-active .svc__caption > *:nth-child(3) { transition-delay: 0.29s; } .js .svc__panel.is-active .svc__caption > *:nth-child(4) { transition-delay: 0.36s; } /* Service detail rows (services.html) */ .service-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 6vw, 96px); align-items: center; padding-block: clamp(40px, 6vw, 88px); border-top: 1px solid var(--line); } .service-row:nth-child(even) .service-row__media { order: 2; } .service-row__body { display: grid; gap: 20px; justify-items: start; } .service-row__num { font-family: var(--font-display); font-weight: 800; font-size: clamp(3rem, 7vw, 6rem); line-height: 0.9; letter-spacing: -0.04em; color: transparent; -webkit-text-stroke: 1.5px var(--gray-300); } .service-row:hover .service-row__num { -webkit-text-stroke-color: var(--orange); } .service-row__media .media { border-radius: var(--radius); } .service-row__media .media img, .zoom-media img { transition: transform 1.1s var(--ease); } .service-row:hover .media img, .zoom-media:hover img { transform: scale(1.06); } .tick-list { display: grid; gap: 10px; } .tick-list li { position: relative; padding-left: 28px; color: var(--text-muted); } .tick-list li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 16px; height: 2px; background: var(--orange); } .on-dark .tick-list li { color: var(--text-on-dark-muted); } /* Service / category cards */ .tile { position: relative; display: block; border-radius: var(--radius); overflow: hidden; color: var(--white); isolation: isolate; } .tile .media { aspect-ratio: 4 / 5; } .tile .media img { transition: transform 1.1s var(--ease); } .tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 8, 9, 0.05) 30%, rgba(8, 8, 9, 0.9) 100%); transition: background-color var(--t-med); } .tile__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: clamp(18px, 2vw, 28px); display: grid; gap: 8px; } .tile__num { font-family: var(--font-display); font-weight: 800; font-size: 0.72rem; letter-spacing: 0.2em; color: var(--orange); } .tile__title { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.05rem, 1.6vw, 1.35rem); letter-spacing: -0.005em; text-transform: uppercase; line-height: 1.15; } .tile__meta { font-size: 0.88rem; color: rgba(255, 255, 255, 0.78); max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.6s var(--ease), opacity 0.4s; } .tile__cta { display: inline-flex; align-items: center; gap: 10px; margin-top: 6px; font-family: var(--font-display); font-weight: 800; font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; } .tile__cta .arrow { width: 16px; height: 16px; color: var(--orange); transition: transform var(--t-fast) var(--ease); } .tile__badge { position: absolute; left: 14px; top: 14px; z-index: 2; } .tile__badge .tag { background: rgba(10, 10, 11, 0.7); color: var(--orange-soft); border-color: rgba(255, 152, 0, 0.6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .tile:hover .media img, .tile:focus-visible .media img { transform: scale(1.08); } .tile:hover .tile__meta, .tile:focus-visible .tile__meta { max-height: 8em; opacity: 1; } .tile:hover .tile__cta .arrow { transform: translateX(6px); } /* PRODUCTS ---------------------------------------------------------------- */ .toolbar { display: grid; grid-template-columns: 1fr minmax(240px, 360px); gap: 20px 32px; align-items: center; margin-bottom: clamp(24px, 3vw, 40px); } .filters { display: flex; flex-wrap: wrap; gap: 8px; } .search { position: relative; } .search svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--text-muted); pointer-events: none; } .search input { width: 100%; min-height: 50px; padding: 12px 16px 12px 46px; border: 1px solid var(--line); border-radius: 100px; background: var(--white); font-size: 0.95rem; transition: border-color var(--t-fast), box-shadow var(--t-fast); } .search input::placeholder { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.72rem; font-weight: 700; font-family: var(--font-display); color: var(--gray-500); } .search input:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 4px rgba(255, 152, 0, 0.18); } .result-count { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 18px; } .product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); } .product-card .media, .gallery-item .media { display: block; } .product-card { position: relative; display: grid; text-align: left; width: 100%; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); overflow: hidden; transition: border-color var(--t-fast), box-shadow var(--t-med), transform var(--t-med) var(--ease), opacity 0.35s; } .product-card.is-hidden { display: none; } .product-card:hover, .product-card:focus-visible { border-color: var(--orange); transform: translateY(-4px); box-shadow: 0 26px 54px -36px rgba(0, 0, 0, 0.5); } .product-card .media { aspect-ratio: 4 / 3; } .product-card .media img { transition: transform 1.1s var(--ease); } .product-card .media::after { content: "View details"; position: absolute; inset: 0; display: grid; place-items: center; background: rgba(8, 8, 9, 0.55); color: var(--white); font-family: var(--font-display); font-weight: 800; font-size: 0.74rem; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0; transition: opacity var(--t-fast); } .product-card:hover .media img, .product-card:focus-visible .media img { transform: scale(1.08); } .product-card:hover .media::after, .product-card:focus-visible .media::after { opacity: 1; } .product-card__badge { position: absolute; left: 12px; top: 12px; z-index: 2; } .product-card__badge .tag { background: rgba(10, 10, 11, 0.72); color: var(--orange-soft); border-color: rgba(255, 152, 0, 0.6); } .product-card__body { padding: 20px 20px 22px; display: grid; gap: 8px; } .product-card__cat { font-family: var(--font-display); font-weight: 700; font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--orange-ink); } .product-card__name { font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; line-height: 1.25; text-transform: uppercase; } .product-card__desc { font-size: 0.9rem; color: var(--text-muted); } .product-card__cta { margin-top: 8px; display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 800; font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; } .product-card__cta .arrow { width: 16px; height: 16px; color: var(--orange-ink); transition: transform var(--t-fast) var(--ease); } .product-card:hover .product-card__cta .arrow { transform: translateX(6px); } .empty-state { grid-column: 1 / -1; padding: 56px 24px; text-align: center; border: 1px dashed var(--line); border-radius: var(--radius); color: var(--text-muted); } .empty-state strong { display: block; font-family: var(--font-display); font-size: 1.1rem; text-transform: uppercase; color: var(--text); margin-bottom: 6px; } /* MODAL ------------------------------------------------------------------- */ .modal { position: fixed; inset: 0; z-index: 1500; display: grid; place-items: center; padding: 20px; visibility: hidden; opacity: 0; transition: opacity 0.35s var(--ease), visibility 0s 0.35s; } .modal.is-open { visibility: visible; opacity: 1; transition: opacity 0.35s var(--ease), visibility 0s; } .modal__backdrop { position: absolute; inset: 0; background: rgba(8, 8, 9, 0.78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .modal__dialog { position: relative; width: min(980px, 100%); max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); overflow: auto; background: var(--white); border-radius: var(--radius-lg); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); transform: translateY(26px) scale(0.98); transition: transform 0.5s var(--ease); } .modal.is-open .modal__dialog { transform: none; } .modal__media { min-height: 320px; } .modal__media.media { height: 100%; } .modal__body { padding: clamp(24px, 4vw, 48px); display: grid; gap: 16px; align-content: center; justify-items: start; } .modal__close { position: absolute; right: 14px; top: 14px; z-index: 3; width: 44px; height: 44px; border-radius: 50%; background: var(--black); color: var(--white); display: grid; place-items: center; transition: background-color var(--t-fast), transform var(--t-fast) var(--ease); } .modal__close:hover { background: var(--orange); color: var(--black); transform: rotate(90deg); } .modal__close svg { width: 18px; height: 18px; } .modal__body p { color: var(--text-muted); } /* 11 — PROCESS TIMELINE --------------------------------------------------- */ .process { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px); counter-reset: step; } .process::before, .process::after { content: ""; position: absolute; left: 0; right: 0; top: 21px; height: 2px; } .process::before { background: var(--line); } .process::after { background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform 2.2s var(--ease-in-out) 0.2s; } .process.is-in::after { transform: scaleX(1); } .on-dark .process::before { background: var(--line-dark); } .process__step { position: relative; padding-top: 68px; display: grid; gap: 10px; align-content: start; } .process__step::before { content: ""; position: absolute; left: 0; top: 10px; width: 24px; height: 24px; border-radius: 50%; background: var(--white); border: 2px solid var(--gray-300); z-index: 1; transition: border-color 0.4s, background-color 0.4s, box-shadow 0.4s; transition-delay: calc(0.3s + var(--i, 0) * 0.34s); } .section--off .process__step::before { background: var(--off-white); } .on-dark .process__step::before { background: var(--charcoal); border-color: var(--gray-700); } .process.is-in .process__step::before { border-color: var(--orange); background: var(--orange); box-shadow: 0 0 0 6px rgba(255, 152, 0, 0.18); } .process__num { font-family: var(--font-display); font-weight: 800; font-size: 0.75rem; letter-spacing: 0.2em; color: var(--orange-ink); } .on-dark .process__num { color: var(--orange); } .process__title { font-family: var(--font-display); font-weight: 800; font-size: clamp(0.95rem, 1.25vw, 1.15rem); line-height: 1.2; text-transform: uppercase; } .process__text { font-size: 0.9rem; color: var(--text-muted); } .on-dark .process__text { color: var(--text-on-dark-muted); } /* 12 — WHY / PRINCIPLES --------------------------------------------------- */ .why-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); } .why-item { position: relative; padding: clamp(24px, 3.2vw, 48px); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; gap: 14px; align-content: start; overflow: hidden; transition: background-color var(--t-med), color var(--t-med); } .why-item::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 3px; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform 0.6s var(--ease); } .why-item:hover { background: var(--black); color: var(--white); } .why-item:hover::after { transform: scaleX(1); } .why-item__num { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.6rem, 5vw, 4.4rem); line-height: 1; letter-spacing: -0.04em; color: var(--gray-200); transition: color var(--t-med); } .why-item:hover .why-item__num { color: var(--orange); } .why-item__title { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.1rem, 1.8vw, 1.5rem); text-transform: uppercase; line-height: 1.15; } .why-item p { color: var(--text-muted); font-size: 0.95rem; transition: color var(--t-med); } .why-item:hover p { color: var(--text-on-dark-muted); } /* 13 — TRADE DASHBOARD (CONCEPTUAL) -------------------------------------- */ .dash { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); } .dash__tile { position: relative; grid-column: span 4; padding: clamp(18px, 2vw, 28px); border: 1px solid var(--line-dark); border-radius: var(--radius-lg); background: linear-gradient(160deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.01)); display: grid; gap: 16px; align-content: start; overflow: hidden; min-height: 210px; } .dash__tile--wide { grid-column: span 8; } .dash__tile--stat { grid-column: span 4; min-height: 0; } .dash__label { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-family: var(--font-display); font-weight: 800; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; } .dash__label .mono { color: var(--text-on-dark-muted); font-size: 0.62rem; } .dash__live { display: inline-flex; align-items: center; gap: 8px; } .dash__live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); animation: blink 1.8s ease-in-out infinite; } @keyframes blink { 50% { opacity: 0.25; } } .dash__tile p { font-size: 0.88rem; color: var(--text-on-dark-muted); } .dash__chart { width: 100%; height: 120px; overflow: visible; } .dash__chart .flow { fill: none; stroke: var(--orange); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; } .dash__chart .flow--2 { stroke: rgba(255, 255, 255, 0.35); stroke-width: 1.4; } .is-in .dash__chart .flow { animation: routeDraw 2.6s var(--ease-in-out) forwards 0.2s; } .dash__chart .gridline { stroke: var(--line-dark); stroke-width: 1; vector-effect: non-scaling-stroke; } .dash__bars { display: grid; gap: 12px; } .dash__bar { display: grid; grid-template-columns: 124px 1fr; gap: 12px; align-items: center; font-family: var(--font-display); font-weight: 700; font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-on-dark-muted); } .dash__bar i { display: block; height: 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.1); position: relative; overflow: hidden; } .dash__bar i::after { content: ""; position: absolute; inset: 0; width: 40%; border-radius: 6px; background: linear-gradient(90deg, transparent, var(--orange)); animation: barSweep 3.2s var(--ease-in-out) infinite; animation-delay: calc(var(--i, 0) * 0.45s); } @keyframes barSweep { 0% { transform: translateX(-110%); } 100% { transform: translateX(260%); } } .dash__nodes { display: grid; grid-template-columns: repeat(10, 1fr); gap: 8px; } .dash__nodes i { aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, 0.12); animation: nodeGlow 4s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 0.17s); } @keyframes nodeGlow { 0%, 70%, 100% { background: rgba(255, 255, 255, 0.12); transform: scale(1); } 35% { background: var(--orange); transform: scale(1.25); } } .dash__net { width: 100%; height: 110px; overflow: visible; } .dash__net .net-lines line { stroke: rgba(255, 255, 255, 0.28); stroke-width: 1; stroke-dasharray: 3 5; animation: netFlow 5s linear infinite; vector-effect: non-scaling-stroke; } @keyframes netFlow { to { stroke-dashoffset: -32; } } .dash__net .net-nodes circle { fill: rgba(255, 255, 255, 0.3); animation: netGlow 4s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 0.17s); } @keyframes netGlow { 0%, 70%, 100% { fill: rgba(255, 255, 255, 0.3); } 35% { fill: var(--orange); } } .dash__net .net-hub { fill: var(--orange); } .dash__stat { display: flex; align-items: baseline; gap: 14px; } .dash__stat b { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.6rem, 4.6vw, 4rem); line-height: 1; letter-spacing: -0.04em; color: var(--orange); font-variant-numeric: tabular-nums; } .dash__stat span { font-family: var(--font-display); font-weight: 700; font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1.5; } .dash__foot { margin-top: 22px; } /* 14 — CINEMATIC BAND & CASE STUDIES -------------------------------------- */ .cinema { position: relative; min-height: min(92vh, 820px); display: grid; align-items: center; color: var(--white); background: var(--black); overflow: hidden; isolation: isolate; padding-block: clamp(96px, 14vw, 180px); } .cinema__bg { position: absolute; inset: -12% 0; z-index: -2; background: radial-gradient(120% 90% at 20% 20%, #2a2118 0%, var(--charcoal) 45%, var(--black) 100%); will-change: transform; } .cinema__bg img { width: 100%; height: 100%; object-fit: cover; } .cinema__bg img.is-broken { visibility: hidden; } .cinema::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(8, 8, 9, 0.9) 0%, rgba(8, 8, 9, 0.55) 55%, rgba(8, 8, 9, 0.35) 100%); } .cinema__routes { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; } .cinema__title { max-width: 15ch; margin: 22px 0 28px; } .cinema__row { display: flex; flex-wrap: wrap; gap: 14px 40px; align-items: center; } .cinema__steps { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-family: var(--font-display); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 255, 255, 0.8); } .cinema__steps li { display: inline-flex; align-items: center; gap: 12px; } .cinema__steps li + li::before { content: ""; width: 28px; height: 1px; background: var(--orange); } .case-card { position: relative; display: grid; grid-template-rows: auto 1fr; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--white); transition: border-color var(--t-fast), transform var(--t-med) var(--ease), box-shadow var(--t-med); } .case-card:hover { border-color: var(--orange); transform: translateY(-4px); box-shadow: 0 26px 54px -36px rgba(0, 0, 0, 0.5); } .case-card .media { aspect-ratio: 16 / 10; } .case-card .media img { transition: transform 1.1s var(--ease); } .case-card:hover .media img { transform: scale(1.06); } .case-card__badge { position: absolute; left: 12px; top: 12px; z-index: 2; } .case-card__badge .tag { background: rgba(10, 10, 11, 0.72); color: var(--orange-soft); border-color: rgba(255, 152, 0, 0.6); } .case-card__body { padding: clamp(20px, 2.4vw, 32px); display: grid; gap: 12px; align-content: start; } .case-card__num { font-family: var(--font-display); font-weight: 700; font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--orange-ink); } .case-card__title { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.1rem, 1.7vw, 1.45rem); text-transform: uppercase; line-height: 1.15; } .case-card p { color: var(--text-muted); font-size: 0.94rem; } .case-card dl { display: grid; gap: 0; margin-top: 6px; border-top: 1px solid var(--line); } .case-card dl > div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 0.9rem; } .case-card dt { font-family: var(--font-display); font-weight: 700; font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); padding-top: 3px; } /* 15 — SLIDER, GALLERY, LIGHTBOX ------------------------------------------ */ .gslider { position: relative; } .gslider__viewport { overflow: hidden; touch-action: pan-y; } .gslider__track { display: flex; gap: clamp(12px, 1.6vw, 24px); transition: transform 0.9s var(--ease); will-change: transform; } .gslider__slide { flex: 0 0 min(62%, 760px); position: relative; } .gslider__slide .media { aspect-ratio: 16 / 10; border-radius: var(--radius); } .gslider__slide .media img { transition: transform 1.2s var(--ease), filter 0.6s; filter: saturate(0.4) brightness(0.6); } .gslider__slide.is-current .media img { filter: none; } .gslider__slide:hover .media img { transform: scale(1.04); } .gslider__caption { display: flex; justify-content: space-between; gap: 16px; margin-top: 14px; font-family: var(--font-display); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.35; transition: opacity 0.5s; } .gslider__slide.is-current .gslider__caption { opacity: 1; } .gslider__caption span:last-child { color: var(--orange); } .gslider__ui { display: flex; align-items: center; gap: 20px; margin-top: clamp(24px, 3vw, 40px); } .gslider__count { font-family: var(--font-display); font-weight: 800; font-size: 0.9rem; letter-spacing: 0.16em; flex: none; min-width: 84px; } .gslider__count b { color: var(--orange); } .gslider__progress { flex: 1; height: 2px; background: var(--line-dark); position: relative; overflow: hidden; } .gslider__progress i { position: absolute; inset: 0; background: var(--orange); transform-origin: left; transform: scaleX(0.125); transition: transform 0.8s var(--ease); } .gslider__nav { display: flex; gap: 10px; flex: none; } .gallery-grid { columns: 3; column-gap: clamp(10px, 1.4vw, 20px); } .gallery-item { display: block; width: 100%; margin: 0 0 clamp(10px, 1.4vw, 20px); break-inside: avoid; position: relative; overflow: hidden; border-radius: var(--radius); background: var(--charcoal-2); color: var(--white); text-align: left; } .gallery-item.is-hidden { display: none; } .gallery-item .media { width: 100%; } .gallery-item .media img { transition: transform 1.1s var(--ease); } .gallery-item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(8, 8, 9, 0.88)); opacity: 0; transition: opacity var(--t-med); } .gallery-item__cap { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 2; display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; opacity: 0; transform: translateY(10px); transition: opacity var(--t-med), transform var(--t-med) var(--ease); } .gallery-item__cap strong { font-family: var(--font-display); font-weight: 800; font-size: 0.9rem; text-transform: uppercase; line-height: 1.2; } .gallery-item__cap span { font-family: var(--font-display); font-weight: 700; font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--orange); flex: none; } .gallery-item:hover .media img, .gallery-item:focus-visible .media img { transform: scale(1.07); } .gallery-item:hover::after, .gallery-item:focus-visible::after { opacity: 1; } .gallery-item:hover .gallery-item__cap, .gallery-item:focus-visible .gallery-item__cap { opacity: 1; transform: none; } .lightbox { position: fixed; inset: 0; z-index: 1600; background: rgba(6, 6, 7, 0.96); color: var(--white); display: grid; grid-template-rows: auto 1fr auto; visibility: hidden; opacity: 0; transition: opacity 0.35s var(--ease), visibility 0s 0.35s; } .lightbox.is-open { visibility: visible; opacity: 1; transition: opacity 0.35s var(--ease), visibility 0s; } .lightbox__top, .lightbox__bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px var(--gutter); } .lightbox__count { font-family: var(--font-display); font-weight: 800; letter-spacing: 0.18em; font-size: 0.9rem; } .lightbox__count b { color: var(--orange); } .lightbox__stage { position: relative; display: grid; place-items: center; min-height: 0; padding: 0 var(--gutter); touch-action: pan-y; } .lightbox__stage img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: var(--radius); opacity: 0; transform: scale(0.985); transition: opacity 0.4s var(--ease), transform 0.5s var(--ease); position: absolute; inset: 0; margin: auto; } .lightbox__stage img.is-ready { opacity: 1; transform: none; } .lightbox__fallback { font-family: var(--font-display); letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.8rem; color: var(--text-on-dark-muted); } .lightbox__caption { font-family: var(--font-display); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; } .lightbox__caption span { color: var(--orange); margin-right: 12px; } .lightbox__nav { display: flex; gap: 10px; } /* 16 — FINAL CTA, CONTACT, FORMS, MAP ------------------------------------- */ .cta { position: relative; color: var(--white); background: var(--black); overflow: hidden; isolation: isolate; padding-block: clamp(88px, 12vw, 168px); text-align: center; } .cta__bg { position: absolute; inset: -10% 0; z-index: -2; background: radial-gradient(90% 90% at 50% 0%, #2f2414 0%, var(--charcoal) 50%, var(--black) 100%); will-change: transform; } .cta__bg img { width: 100%; height: 100%; object-fit: cover; } .cta__bg img.is-broken { visibility: hidden; } .cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(80% 120% at 50% 50%, rgba(8, 8, 9, 0.6) 0%, rgba(8, 8, 9, 0.9) 100%); } .cta .eyebrow { justify-content: center; } .cta__title { margin: 22px auto 20px; max-width: 18ch; } .cta__lead { margin-inline: auto; color: rgba(255, 255, 255, 0.8); max-width: 52ch; font-size: clamp(1rem, 1.4vw, 1.2rem); } .cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 36px; } .contact-strip { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; } .contact-list { display: grid; gap: 0; border-top: 1px solid var(--line); } .contact-list > li { display: grid; grid-template-columns: 48px 1fr; gap: 16px; align-items: start; padding: 20px 0; border-bottom: 1px solid var(--line); } .contact-list .ico { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--black); color: var(--orange); flex: none; } .contact-list .ico svg { width: 20px; height: 20px; } .contact-list small { display: block; font-family: var(--font-display); font-weight: 700; font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 2px; } .contact-list a, .contact-list address { font-family: var(--font-display); font-weight: 700; font-size: clamp(1rem, 1.5vw, 1.2rem); line-height: 1.45; overflow-wrap: anywhere; } .contact-list a:hover { color: var(--orange-ink); } .on-dark .contact-list { border-color: var(--line-dark); } .on-dark .contact-list > li { border-color: var(--line-dark); } .on-dark .contact-list .ico { background: var(--orange); color: var(--black); } .on-dark .contact-list small { color: var(--text-on-dark-muted); } .on-dark .contact-list a:hover { color: var(--orange); } .form-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(22px, 3.4vw, 48px); box-shadow: 0 40px 80px -60px rgba(0, 0, 0, 0.5); } .form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .field { display: grid; gap: 8px; align-content: start; } .field--full { grid-column: 1 / -1; } .field label, .field legend { font-family: var(--font-display); font-weight: 700; font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text); padding: 0; } .field label .req, .field legend .req { color: var(--orange-ink); margin-left: 2px; } .field input, .field select, .field textarea { width: 100%; min-height: 52px; padding: 13px 16px; border: 1px solid var(--gray-300); border-radius: var(--radius); background: var(--white); font-size: 1rem; line-height: 1.4; transition: border-color var(--t-fast), box-shadow var(--t-fast); } .field textarea { min-height: 140px; resize: vertical; } .field select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23121214' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; padding-right: 44px; } .field input:hover, .field select:hover, .field textarea:hover { border-color: var(--gray-600); } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 4px rgba(255, 152, 0, 0.2); } .field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: #c62828; box-shadow: 0 0 0 4px rgba(198, 40, 40, 0.12); } .field__error { font-size: 0.82rem; color: #b3261e; min-height: 0; } .field__hint { font-size: 0.82rem; color: var(--text-muted); } fieldset.field { border: 0; margin: 0; padding: 0; min-width: 0; } .radio-row { display: flex; flex-wrap: wrap; gap: 8px; } .radio-chip { position: relative; } .radio-chip input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; cursor: pointer; } .radio-chip span { display: inline-flex; align-items: center; min-height: 46px; padding: 10px 18px; border: 1px solid var(--gray-300); border-radius: 100px; font-family: var(--font-display); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast); } .radio-chip input:hover + span { border-color: var(--orange); } .radio-chip input:checked + span { background: var(--black); border-color: var(--black); color: var(--white); box-shadow: inset 0 -3px 0 var(--orange); } .radio-chip input:focus-visible + span { outline: 2px solid var(--orange); outline-offset: 3px; } .form__foot { grid-column: 1 / -1; display: grid; gap: 16px; } .form__status { display: none; padding: 16px 18px; border-radius: var(--radius); font-size: 0.95rem; line-height: 1.5; border: 1px solid transparent; } .form__status.is-success { display: block; background: #eef7ee; border-color: #9fcf9f; color: #1d5a22; } .form__status.is-error { display: block; background: #fdeeee; border-color: #f0b3b0; color: #8c1d18; } .form__status.is-info { display: block; background: rgba(255, 152, 0, 0.1); border-color: rgba(168, 95, 0, 0.4); color: #6b3d00; } .form__legal { font-size: 0.82rem; color: var(--text-muted); } .hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } .btn.is-loading { pointer-events: none; opacity: 0.75; } .map-embed { position: relative; background: var(--charcoal-2); min-height: 420px; height: min(62vh, 560px); } .map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(1) contrast(1.05); transition: filter 0.6s; } .map-embed:hover iframe { filter: none; } .map-embed__card { position: absolute; left: var(--gutter); bottom: 28px; z-index: 2; background: var(--black); color: var(--white); padding: 22px 24px; border-radius: var(--radius); border-left: 3px solid var(--orange); max-width: min(360px, calc(100% - 2 * var(--gutter))); display: grid; gap: 10px; } .map-embed__card address { color: var(--text-on-dark-muted); font-size: 0.92rem; } .map-embed__card .link-arrow { justify-self: start; } /* 17 — FOOTER & FLOATING CTA ---------------------------------------------- */ .site-footer { background: var(--black); color: var(--text-on-dark); position: relative; overflow: hidden; } .site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--orange) 0 22%, transparent 22%); } .footer__main { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 0.8fr)) minmax(0, 1.3fr); gap: clamp(28px, 4vw, 64px); padding-block: clamp(56px, 7vw, 96px); } .footer__brand { display: grid; gap: 22px; justify-items: start; align-content: start; } .footer__logo { display: inline-block; background: var(--white); padding: 12px 16px; border-radius: var(--radius); } .footer__logo img { height: 52px; width: auto; } .footer__brand p { color: var(--text-on-dark-muted); max-width: 34ch; } .footer__title { font-family: var(--font-display); font-weight: 800; font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--orange); margin-bottom: 20px; } .footer__links { display: grid; gap: 10px; } .footer__links a { color: var(--text-on-dark-muted); font-size: 0.95rem; display: inline-block; position: relative; transition: color var(--t-fast), transform var(--t-fast) var(--ease); } .footer__links a:hover { color: var(--white); transform: translateX(6px); } .footer__contact { display: grid; gap: 12px; color: var(--text-on-dark-muted); font-size: 0.95rem; } .footer__contact strong { color: var(--white); font-family: var(--font-display); font-weight: 800; font-size: 0.86rem; letter-spacing: 0.06em; line-height: 1.4; } .footer__contact a { overflow-wrap: anywhere; } .footer__contact a:hover { color: var(--orange); } .footer__bottom { position: relative; padding-block: 22px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; font-size: 0.82rem; color: var(--text-on-dark-muted); } .footer__bottom::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); height: 1px; background: var(--line-dark); } .footer__bottom nav { display: flex; gap: 22px; } .footer__bottom a:hover { color: var(--orange); } .footer__word { font-family: var(--font-display); font-weight: 800; font-size: 8vw; line-height: 0.8; letter-spacing: -0.05em; text-transform: uppercase; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.09); white-space: nowrap; text-align: center; user-select: none; pointer-events: none; margin-bottom: -0.06em; overflow: hidden; } .float-cta { position: fixed; right: 22px; bottom: 22px; z-index: 800; display: inline-flex; align-items: center; gap: 12px; min-height: 54px; padding: 12px 22px 12px 14px; background: var(--orange); color: var(--black); border-radius: 100px; font-family: var(--font-display); font-weight: 800; font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.55); transform: translateY(140%); opacity: 0; transition: transform 0.6s var(--ease), opacity 0.4s, background-color var(--t-fast); } .float-cta.is-visible { transform: none; opacity: 1; } .float-cta:hover { background: var(--orange-soft); } .float-cta__ico { width: 32px; height: 32px; border-radius: 50%; background: var(--black); color: var(--orange); display: grid; place-items: center; flex: none; } .float-cta__ico svg { width: 15px; height: 15px; transition: transform var(--t-fast) var(--ease); } .float-cta:hover .float-cta__ico svg { transform: translateX(3px); } .menu-open .float-cta, .modal-open .float-cta { opacity: 0; pointer-events: none; } /* 18 — LEGAL PAGES -------------------------------------------------------- */ .legal { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: clamp(28px, 6vw, 96px); align-items: start; } .legal__toc { position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: 10px; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); font-size: 0.9rem; } .legal__toc strong { font-family: var(--font-display); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--orange-ink); margin-bottom: 4px; } .legal__toc a { color: var(--text-muted); } .legal__toc a:hover { color: var(--text); } .prose { max-width: 72ch; } .prose h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.2rem, 2vw, 1.55rem); text-transform: uppercase; letter-spacing: -0.005em; line-height: 1.2; margin: 2.4em 0 0.7em; padding-top: 1.2em; border-top: 1px solid var(--line); } .prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; } .prose p, .prose li { color: var(--text-muted); } .prose p + p { margin-top: 1em; } .prose ul { list-style: none; margin: 1em 0; display: grid; gap: 8px; } .prose ul li { position: relative; padding-left: 26px; } .prose ul li::before { content: ""; position: absolute; left: 0; top: 0.75em; width: 14px; height: 2px; background: var(--orange); } .prose a { color: var(--text); background: linear-gradient(var(--orange), var(--orange)) no-repeat 0 100% / 100% 1.5px; } .prose a:hover { background-size: 100% 100%; } .prose address { color: var(--text); font-weight: 500; margin-top: 1em; line-height: 1.7; } /* 19 — REVEAL ANIMATIONS -------------------------------------------------- */ .js [data-reveal] { opacity: 0; transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); transition-delay: calc(var(--d, 0) * 90ms); will-change: opacity, transform; } .js [data-reveal="up"] { transform: translateY(36px); } .js [data-reveal="left"] { transform: translateX(-40px); } .js [data-reveal="right"] { transform: translateX(40px); } .js [data-reveal="scale"] { transform: scale(0.94); } /* Image wipe: the frame stays in place (so it can be observed) and the photo is unmasked inside it */ .js [data-reveal="img"] { opacity: 1; } .js [data-reveal="img"] > img { clip-path: inset(0 0 100% 0); transform: scale(1.18); transition: transform 1.6s var(--ease), clip-path 1.1s var(--ease-in-out); } .js [data-reveal].is-in { opacity: 1; transform: none; } .js [data-reveal="img"].is-in > img { clip-path: inset(0 0 0 0); transform: scale(1); } .js .zoom-media[data-reveal="img"].is-in:hover > img { transform: scale(1.06); } /* 20 — RESPONSIVE --------------------------------------------------------- */ @media (max-width: 1280px) { .nav__list { gap: 18px; } .nav__link { font-size: 0.7rem; letter-spacing: 0.13em; } .brand img { height: 42px; } } @media (max-width: 1140px) { .nav, .header__cta { display: none; } .nav-toggle { display: block; } :root { --header-h: 72px; } .site-header.is-scrolled { --header-h: 64px; } } @media (max-width: 1024px) { .card-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer__main { grid-template-columns: repeat(2, minmax(0, 1fr)); } .process { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 44px; } .process::before, .process::after { display: none; } .process__step { padding-top: 46px; } .process__step::before { top: 0; } .dash__tile, .dash__tile--wide { grid-column: span 6; } .dash__tile--stat { grid-column: span 4; } .hero__coords { display: none; } .svc__stage { min-height: 460px; } .gslider__slide { flex-basis: 74%; } } @media (max-width: 900px) { .split, .split--wide-media, .editorial, .contact-strip, .section-head--split, .svc, .service-row, .legal { grid-template-columns: minmax(0, 1fr); } .service-row:nth-child(even) .service-row__media { order: 0; } .media-badge { left: 14px; bottom: 14px; } .legal__toc { position: static; } .svc__list { display: flex; overflow-x: auto; gap: 8px; border-top: 0; padding-bottom: 6px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter); scrollbar-width: none; } .svc__list::-webkit-scrollbar { display: none; } .svc__tab { flex: none; width: auto; grid-template-columns: auto auto; gap: 8px; padding: 10px 16px; border: 1px solid var(--line-dark); border-radius: 100px; font-size: 0.74rem; letter-spacing: 0.12em; scroll-snap-align: start; } .svc__tab::before, .svc__tab .arrow { display: none; } .svc__tab[aria-selected="true"] { padding-left: 16px; background: var(--orange); border-color: var(--orange); color: var(--black); } .svc__tab[aria-selected="true"] .num { color: var(--black); } .svc__stage { min-height: 0; aspect-ratio: 4 / 5; max-height: 640px; width: 100%; } .toolbar { grid-template-columns: minmax(0, 1fr); } .modal__dialog { grid-template-columns: minmax(0, 1fr); } .modal__media { min-height: 0; aspect-ratio: 16 / 10; height: auto; } .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vm-grid { grid-template-columns: minmax(0, 1fr); } .gallery-grid { columns: 2; } .trade-map__node span { display: none; } .trade-map__node--hub span { display: block; } .hero__tabs { display: none; } .hero__bar { justify-content: space-between; align-items: center; } .hero__mobile-label { display: block; font-family: var(--font-display); font-weight: 800; font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; } .hero__mobile-label small { display: block; color: var(--orange); font-size: 0.68rem; letter-spacing: 0.2em; margin-bottom: 2px; } .hero__mobile-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, 0.18); } .hero__mobile-progress i { position: absolute; inset: 0; background: var(--orange); transform: scaleX(var(--hero-p, 0)); transform-origin: left; } .hero__count { display: none; } } @media (min-width: 901px) { .hero__mobile-progress { display: none; } } @media (max-width: 768px) { .hero__overlay { background: linear-gradient(180deg, rgba(8, 8, 9, 0.72) 0%, rgba(8, 8, 9, 0.45) 35%, rgba(8, 8, 9, 0.92) 100%); } .hero__actions .btn { flex: 1 1 auto; } .hero__actions .link-arrow { margin-left: 0; } .hero__routes { opacity: 0.5; } .form { grid-template-columns: minmax(0, 1fr); } .footer__bottom { flex-direction: column; } .dash__tile, .dash__tile--wide, .dash__tile--stat { grid-column: 1 / -1; } .gslider__slide { flex-basis: 86%; } .float-cta { right: 14px; bottom: 14px; min-height: 50px; padding: 9px 16px 9px 10px; font-size: 0.68rem; } .map-embed__card { position: relative; left: auto; bottom: auto; max-width: none; border-radius: 0; } .map-embed { height: auto; min-height: 0; display: grid; } .map-embed iframe { position: relative; height: 360px; } .cinema__steps li + li::before { width: 16px; } .page-hero { min-height: 0; padding-top: calc(var(--header-h) + 56px); } .case-card dl > div { grid-template-columns: minmax(0, 1fr); gap: 2px; } .facts > div { grid-template-columns: minmax(0, 1fr); gap: 4px; } } @media (max-width: 600px) { .card-grid, .card-grid--4, .card-grid--2, .product-grid, .why-grid { grid-template-columns: minmax(0, 1fr); } .process { grid-template-columns: minmax(0, 1fr); row-gap: 0; padding-left: 4px; } .process::before, .process::after { display: block; left: 15px; right: auto; top: 12px; bottom: 12px; width: 2px; height: auto; } .process::after { transform: scaleY(0); transform-origin: top; } .process.is-in::after { transform: scaleY(1); } .process__step { padding: 0 0 34px 56px; } .process__step:last-child { padding-bottom: 0; } .process__step::before { left: 4px; top: 0; } .footer__main { grid-template-columns: minmax(0, 1fr); } .tile .media { aspect-ratio: 4 / 3; } .tile__meta { max-height: 8em; opacity: 1; } .gallery-item__cap { opacity: 1; transform: none; } .gallery-item::after { opacity: 1; } .principles li { grid-template-columns: 40px 1fr auto; } .cta__actions .btn { flex: 1 1 100%; } .gslider__ui { flex-wrap: wrap; } .gslider__progress { order: 3; flex-basis: 100%; } .gslider__nav { margin-left: auto; } .lightbox__caption span { display: block; margin: 0 0 2px; } } @media (max-width: 480px) { .brand img { height: 36px; } .site-header.is-scrolled .brand img { height: 34px; } .brand { padding: 6px 10px; } .btn { padding: 13px 20px; letter-spacing: 0.11em; } .hero__actions .btn { flex-basis: 100%; } .gallery-grid { columns: 1; } .dash__bar { grid-template-columns: 112px 1fr; letter-spacing: 0.1em; } .icon-btn { width: 44px; height: 44px; } .radio-chip { flex: 1 1 calc(50% - 8px); } .radio-chip span { width: 100%; justify-content: center; padding-inline: 10px; } .float-cta span:not(.float-cta__ico) { max-width: 9.5em; } .eyebrow { letter-spacing: 0.16em; font-size: 0.7rem; } .eyebrow::before { width: 24px; } } @media (max-width: 380px) { :root { --gutter: 14px; } .h-xl { font-size: 1.7rem; } .display, .h-lg { font-size: 1.62rem; } .mobile-menu__link { padding: 12px 0; } .filters .chip, .map-chips .chip { padding-inline: 12px; font-size: 0.66rem; letter-spacing: 0.1em; } } @media (max-height: 560px) and (orientation: landscape) { .hero { min-height: 560px; } } /* 21 — REDUCED MOTION & PRINT --------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; transition-delay: 0s !important; } .js [data-reveal] { opacity: 1; transform: none; } .js [data-reveal="img"] > img { clip-path: none; transform: none; } .js .page-transition { display: none; } .hero__routes, .cinema__routes { display: none; } .trade-map__routes .tm-route { stroke-dashoffset: 0; } .dash__chart .flow { stroke-dashoffset: 0; } .js .cursor { display: none; } } @media print { .site-header, .mobile-menu, .float-cta, .page-transition, .cursor, .hero__bar, .map-embed iframe { display: none !important; } body { color: #000; } .js [data-reveal] { opacity: 1 !important; transform: none !important; } .js [data-reveal="img"] > img { clip-path: none !important; } }