/* Font loading moved to in each HTML — avoids the @import waterfall (HTML → CSS → fonts.googleapis → fonts.gstatic, two extra round trips) that was the main cause of the slow first paint. Space Grotesk also dropped: --font-display is now the system stack (-apple-system…), a zero-network-cost font, since it's no longer used anywhere except one SVG letter (moved to system stack too). */ /* =================================================================== PREMIUM MOTION LAYER — additive rules for hero photography, scroll parallax, magnetic buttons, and a photo-led verticals showcase. Sits on top of the existing design system below. =================================================================== */ /* =================================================================== BELLORA GLOBAL TRADING FZCO — DESIGN SYSTEM Palette: deep navy-charcoal base, electric blue brand accent, five distinct vertical accent colors used across the "orbit" wheel. Type: Space Grotesk (display) / Inter (body) / IBM Plex Mono (labels) =================================================================== */ :root{ /* base surfaces — Apple-style light, off-white ground */ --bg: #fbfbfd; --bg-alt: #f5f5f7; --surface: #ffffff; --surface-2: #f5f5f7; --border: rgba(0,0,0,0.08); --border-strong: rgba(0,0,0,0.14); /* ink — near-black, Apple-style, never pure #000 */ --ink: #1d1d1f; --ink-dim: #6e6e73; --ink-faint: #86868b; /* brand — gold matches the real Bellora Global logo */ --accent: #a9791f; --accent-2: #c9a24b; --accent-soft: rgba(169,121,31,0.10); --gold: #a9791f; /* vertical palette (the five "shares" of the wheel), deepened for contrast on white */ --v-footwear: #a9791f; --v-printing: #2a63d6; --v-hospitality: #d1452f; --v-advertising: #8b4fc9; --v-consultation: #1f9c86; /* default vertical accent (overridden per-page via body[data-vertical]) */ --v-accent: var(--accent); --v-accent-soft: var(--accent-soft); /* type — Apple-style system stack for display, Inter for body */ --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", sans-serif; --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", sans-serif; --font-mono: "IBM Plex Mono", monospace; /* layout */ --container: 1180px; --radius-sm: 8px; --radius: 14px; --radius-lg: 26px; --ease: cubic-bezier(0.16, 1, 0.3, 1); } body[data-vertical="footwear"] { --v-accent: var(--v-footwear); --v-accent-soft: rgba(169,121,31,0.10); } body[data-vertical="printing"] { --v-accent: var(--v-printing); --v-accent-soft: rgba(42,99,214,0.10); } body[data-vertical="hospitality"] { --v-accent: var(--v-hospitality); --v-accent-soft: rgba(209,69,47,0.10); } body[data-vertical="advertising"] { --v-accent: var(--v-advertising); --v-accent-soft: rgba(139,79,201,0.10); } body[data-vertical="consultation"] { --v-accent: var(--v-consultation); --v-accent-soft: rgba(31,156,134,0.10); } /* ---------- reset ---------- */ *, *::before, *::after{ box-sizing: border-box; } html{ scroll-behavior: smooth; } @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; scroll-behavior: auto !important; } } body{ margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img{ max-width: 100%; display: block; } a{ color: inherit; text-decoration: none; } ul{ list-style: none; margin: 0; padding: 0; } h1,h2,h3,h4{ font-family: var(--font-display); font-weight: 600; margin: 0; letter-spacing: -0.01em; } p{ margin: 0; } button{ font-family: inherit; } ::selection{ background: var(--v-accent); color: #fff; } :focus-visible{ outline: 2px solid var(--v-accent); outline-offset: 3px; border-radius: 4px; } /* ---------- background atmosphere ---------- */ .bg-field{ position: fixed; inset: 0; z-index: -2; background: radial-gradient(60% 50% at 15% 0%, rgba(61,126,255,0.12), transparent 60%), radial-gradient(50% 45% at 90% 15%, var(--v-accent-soft), transparent 60%), var(--bg); transition: background 0.6s var(--ease); } .bg-grain{ position: fixed; inset: 0; z-index: -1; opacity: 0.035; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ---------- layout helpers ---------- */ .container{ width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 24px; } .section{ padding-block: clamp(64px, 10vw, 128px); position: relative; } .section-head{ max-width: 640px; margin-bottom: clamp(36px, 6vw, 64px); } .eyebrow{ display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--v-accent); margin-bottom: 14px; } .eyebrow::before{ content: ""; width: 18px; height: 1px; background: var(--v-accent); } h2.h-lg{ font-size: clamp(30px, 4.4vw, 48px); line-height: 1.08; } .lede{ color: var(--ink-dim); font-size: clamp(15px, 1.6vw, 18px); max-width: 56ch; margin-top: 16px; } /* ---------- buttons ---------- */ .btn{ display: inline-flex; align-items: center; gap: 10px; padding: 13px 24px; border-radius: 999px; font-size: 14.5px; font-weight: 600; border: 1px solid transparent; cursor: pointer; transition: transform 0.35s var(--ease), background 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease), box-shadow 0.3s var(--ease); white-space: nowrap; } /* Glassmorphic CTAs — frosted glass with inner-edge refraction, not flat fill */ .btn-primary{ background: color-mix(in srgb, var(--v-accent) 78%, transparent); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); border-color: color-mix(in srgb, var(--v-accent) 90%, white 10%); color: #060911; box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), inset 0 -1px 0 rgba(0,0,0,0.06), 0 8px 20px -10px color-mix(in srgb, var(--v-accent) 55%, transparent); } .btn-primary:hover{ transform: translateY(-2px); background: color-mix(in srgb, var(--v-accent) 88%, transparent); } .btn-primary:active{ transform: translateY(-1px) scale(0.98); } .btn-ghost{ background: rgba(255,255,255,0.5); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); border-color: rgba(0,0,0,0.10); color: var(--ink); box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 8px 20px -12px rgba(0,0,0,0.14); } .btn-ghost:hover{ border-color: var(--v-accent); color: var(--v-accent); transform: translateY(-2px); background: rgba(255,255,255,0.68); } .btn-ghost:active{ transform: translateY(-1px) scale(0.98); } .btn-sm{ padding: 9px 18px; font-size: 13px; } .btn svg{ width: 15px; height: 15px; transition: transform 0.3s var(--ease); } .btn:hover svg{ transform: translate(3px,-3px); } /* ---------- header ---------- */ .site-header{ position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 20px 0; transition: padding 0.4s var(--ease), background 0.4s var(--ease), border-color 0.4s var(--ease), backdrop-filter 0.4s var(--ease); border-bottom: 1px solid transparent; } .site-header.is-scrolled{ padding: 13px 0; background: rgba(251,251,253,0.78); box-shadow: 0 1px 0 rgba(0,0,0,0.04); backdrop-filter: blur(16px) saturate(140%); border-bottom: 1px solid var(--border); } .site-header .container{ display: flex; align-items: center; justify-content: space-between; gap: 32px; max-width: 1400px; } .brand{ display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 600; font-size: 17px; letter-spacing: 0.01em; flex-shrink: 0; } .brand-mark{ width: 34px; height: 34px; border-radius: 9px; background: conic-gradient(from 200deg, var(--v-footwear), var(--v-printing), var(--v-hospitality), var(--v-advertising), var(--v-consultation), var(--v-footwear)); display: grid; place-items: center; flex-shrink: 0; position: relative; } .brand-mark::after{ content: ""; position: absolute; inset: 6px; border-radius: 5px; background: var(--bg); } .brand span.brand-sub{ display: block; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.16em; color: var(--ink-faint); font-weight: 500; text-transform: uppercase; margin-top: 1px; } .main-nav{ display: flex; align-items: center; gap: 2px; flex-shrink: 1; min-width: 0; } .main-nav a{ padding: 8px 12px; font-size: 13.5px; color: var(--ink-dim); border-radius: 999px; white-space: nowrap; transition: color 0.25s var(--ease), background 0.25s var(--ease); position: relative; } .main-nav a:hover{ color: var(--ink); background: rgba(0,0,0,0.045); } .main-nav a.is-active{ color: var(--ink); } .header-cta{ display: flex; align-items: center; gap: 14px; flex-shrink: 0; } .nav-toggle{ display: none; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--border-strong); background: rgba(0,0,0,0.035); align-items: center; justify-content: center; cursor: pointer; } .nav-toggle span{ display: block; width: 16px; height: 1.5px; background: var(--ink); position: relative; transition: transform 0.3s var(--ease), opacity 0.3s var(--ease); } .nav-toggle span::before, .nav-toggle span::after{ content: ""; position: absolute; left: 0; width: 16px; height: 1.5px; background: var(--ink); transition: transform 0.3s var(--ease), top 0.3s var(--ease); } .nav-toggle span::before{ top: -5px; } .nav-toggle span::after{ top: 5px; } body.nav-open .nav-toggle span{ background: transparent; } body.nav-open .nav-toggle span::before{ top: 0; transform: rotate(45deg); } body.nav-open .nav-toggle span::after{ top: 0; transform: rotate(-45deg); } @media (max-width: 1360px){ .main-nav{ position: fixed; inset: 0 0 0 auto; width: min(320px, 80vw); height: 100vh; background: var(--bg-alt); border-left: 1px solid var(--border); flex-direction: column; align-items: stretch; padding: 100px 28px 40px; gap: 4px; transform: translateX(100%); transition: transform 0.45s var(--ease); } body.nav-open .main-nav{ transform: translateX(0); } .main-nav a{ padding: 14px 6px; font-size: 16px; border-radius: 0; border-bottom: 1px solid var(--border); } .nav-toggle{ display: grid; } .header-cta .btn-ghost{ display: none; } } /* ---------- footer ---------- */ .site-footer{ border-top: 1px solid var(--border); padding-block: 56px 28px; margin-top: 40px; } .footer-grid{ display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: 40px; padding-bottom: 40px; } .footer-col h4{ font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 18px; font-family: var(--font-mono); font-weight: 500; } .footer-col p, .footer-col a{ color: var(--ink-dim); font-size: 14.5px; display: block; margin-bottom: 10px; transition: color 0.25s var(--ease); } .footer-col a:hover{ color: var(--v-accent); } .footer-brand p{ max-width: 32ch; color: var(--ink-dim); margin-top: 14px; } .footer-bottom{ display: flex; justify-content: space-between; align-items: center; padding-top: 24px; border-top: 1px solid var(--border); font-size: 13px; color: var(--ink-faint); flex-wrap: wrap; gap: 10px; } @media (max-width: 760px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } /* ---------- reveal-on-scroll ---------- */ [data-reveal]{ opacity: 0; transform: translateY(28px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); } [data-reveal].in-view{ opacity: 1; transform: translateY(0); } [data-reveal="stagger"] > *{ opacity: 0; transform: translateY(20px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); } [data-reveal="stagger"].in-view > *{ opacity: 1; transform: translateY(0); } [data-reveal="stagger"].in-view > *:nth-child(1){ transition-delay: 0.02s; } [data-reveal="stagger"].in-view > *:nth-child(2){ transition-delay: 0.10s; } [data-reveal="stagger"].in-view > *:nth-child(3){ transition-delay: 0.18s; } [data-reveal="stagger"].in-view > *:nth-child(4){ transition-delay: 0.26s; } [data-reveal="stagger"].in-view > *:nth-child(5){ transition-delay: 0.34s; } /* ---------- cards ---------- */ .card{ background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 12px 24px -16px rgba(0,0,0,0.10); transition: border-color 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease); } .card:hover{ border-color: var(--border-strong); transform: translateY(-4px); box-shadow: 0 4px 8px rgba(0,0,0,0.05), 0 20px 32px -18px rgba(0,0,0,0.14); } .card .icon{ width: 42px; height: 42px; border-radius: 10px; background: var(--v-accent-soft); color: var(--v-accent); display: grid; place-items: center; margin-bottom: 18px; } .card .icon svg{ width: 20px; height: 20px; } .card h3{ font-size: 17px; margin-bottom: 8px; } .card p{ color: var(--ink-dim); font-size: 14.5px; } /* ---------- stat strip ---------- */ .stat-strip{ display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 12px 24px -16px rgba(0,0,0,0.10); overflow: hidden; } .stat{ padding: 30px 24px; border-right: 1px solid var(--border); text-align: left; } .stat:last-child{ border-right: none; } .stat .num{ font-family: var(--font-display); font-size: clamp(26px, 3.2vw, 38px); color: var(--ink); } .stat .label{ font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-faint); letter-spacing: 0.06em; text-transform: uppercase; margin-top: 6px; } @media (max-width: 760px){ .stat-strip{ grid-template-columns: repeat(2, 1fr); } .stat:nth-child(2){ border-right: none; } .stat:nth-child(1), .stat:nth-child(2){ border-bottom: 1px solid var(--border); } } /* ---------- scroll cue ---------- */ .scroll-cue{ position: absolute; bottom: 36px; left: 24px; display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); } .scroll-cue .line{ width: 1px; height: 34px; background: linear-gradient(var(--v-accent), transparent); animation: scrollpulse 2.2s var(--ease) infinite; } @keyframes scrollpulse{ 0%{ transform: scaleY(0); transform-origin: top; opacity: 0; } 40%{ transform: scaleY(1); transform-origin: top; opacity: 1; } 60%{ transform: scaleY(1); transform-origin: bottom; opacity: 1; } 100%{ transform: scaleY(0); transform-origin: bottom; opacity: 0; } } /* ---------- generic panel / gallery placeholder ---------- */ .art-panel{ border-radius: var(--radius-lg); border: 1px solid var(--border); background: radial-gradient(120% 100% at 100% 0%, var(--v-accent-soft), transparent 60%), var(--surface); box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 20px 40px -24px rgba(0,0,0,0.14); position: relative; overflow: hidden; min-height: 220px; } .art-panel::before{ content: attr(data-caption); position: absolute; left: 20px; bottom: 18px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); } .art-panel svg{ position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.9; } /* ---------- breadcrumb ---------- */ .crumb{ display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-faint); margin-bottom: 22px; } .crumb a{ color: var(--ink-dim); } .crumb a:hover{ color: var(--v-accent); } /* ---------- CTA band ---------- */ .cta-band{ border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface-2); box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 20px 40px -24px rgba(0,0,0,0.14); padding: clamp(36px, 6vw, 64px); display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; position: relative; overflow: hidden; } .cta-band::before{ content: ""; position: absolute; top: -40%; right: -10%; width: 420px; height: 420px; background: var(--v-accent-soft); filter: blur(60px); border-radius: 50%; } .cta-band h2{ font-size: clamp(24px, 3.4vw, 34px); max-width: 22ch; position: relative; } .cta-actions{ display: flex; gap: 14px; position: relative; flex-wrap: wrap; } /* ---------- contact form ---------- */ .contact-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 48px; } .form-field{ margin-bottom: 18px; } .form-field label{ display: block; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 8px; } .form-field input, .form-field textarea, .form-field select{ width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 13px 14px; color: var(--ink); font-family: var(--font-body); font-size: 14.5px; transition: border-color 0.25s var(--ease), background 0.25s var(--ease); } .form-field input:focus, .form-field textarea:focus, .form-field select:focus{ outline: none; border-color: var(--v-accent); background: var(--surface-2); } .form-field textarea{ resize: vertical; min-height: 120px; } @media (max-width: 860px){ .contact-grid{ grid-template-columns: 1fr; } } /* ---------- utility ---------- */ .mt-0{ margin-top: 0 !important; } .text-center{ text-align: center; } .mono-tag{ font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); } /* =================================================================== HOME HERO =================================================================== */ .hero{ min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding-top: 120px; position: relative; } .hero-inner{ display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 40px; align-items: center; } .hero h1{ font-size: clamp(38px, 6vw, 74px); line-height: 1.03; letter-spacing: -0.02em; } .hero h1 .accent-word{ background: linear-gradient(100deg, var(--v-footwear), var(--v-consultation)); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero .lede{ margin-top: 22px; font-size: clamp(16px, 1.8vw, 19px); } .hero-actions{ display: flex; gap: 14px; margin-top: 36px; flex-wrap: wrap; } .hero-badge{ display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 7px; border: 1px solid var(--border-strong); border-radius: 999px; font-size: 12.5px; color: var(--ink-dim); margin-bottom: 26px; } .hero-badge .dot{ width: 20px; height: 20px; border-radius: 50%; background: conic-gradient(from 200deg, var(--v-footwear), var(--v-printing), var(--v-hospitality), var(--v-advertising), var(--v-consultation), var(--v-footwear)); } @media (max-width: 980px){ .hero-inner{ grid-template-columns: 1fr; } } /* =================================================================== ORBIT WHEEL — the signature element 5 equal arcs (20% share each) representing the five verticals. =================================================================== */ .orbit-section{ position: relative; } .orbit-layout{ display: grid; grid-template-columns: minmax(320px, 460px) 1fr; gap: clamp(24px, 5vw, 64px); align-items: center; } .orbit-wheel-wrap{ position: relative; aspect-ratio: 1; width: 100%; max-width: 460px; margin-inline: auto; } .orbit-wheel-wrap svg{ width: 100%; height: 100%; overflow: visible; } .orbit-slice{ cursor: pointer; transition: transform 0.45s var(--ease), filter 0.3s var(--ease); transform-origin: 200px 200px; } .orbit-slice path{ fill-opacity: 0.8; transition: fill-opacity 0.3s var(--ease); } .orbit-slice:hover, .orbit-slice.is-active{ transform: scale(1.03); filter: drop-shadow(0 8px 16px color-mix(in srgb, currentColor 30%, transparent)); } .orbit-slice:hover path, .orbit-slice.is-active path{ fill-opacity: 1; } .orbit-slice .slice-icon{ pointer-events: none; } .orbit-hub{ position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; pointer-events: none; width: 50%; height: 50%; margin: auto; border-radius: 50%; } .orbit-hub .hub-count{ font-family: var(--font-display); font-weight: 600; font-size: clamp(20px, 2.2vw, 26px); letter-spacing: -0.01em; color: var(--ink); } .orbit-hub .hub-label{ font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); margin-top: 5px; max-width: 12ch; } .orbit-wheel-wrap.is-spinning .orbit-group{ animation: orbit-settle 1.4s var(--ease) both; } @keyframes orbit-settle{ from{ transform: rotate(-24deg); opacity: 0; } to{ transform: rotate(0deg); opacity: 1; } } .orbit-legend{ display: flex; flex-direction: column; gap: 2px; } .orbit-legend-item{ display: flex; align-items: center; gap: 18px; padding: 18px 20px; border-radius: var(--radius-sm); border: 1px solid transparent; transition: background 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease); } .orbit-legend-item:hover, .orbit-legend-item.is-active{ background: var(--surface); border-color: var(--border); transform: translateX(6px); } .orbit-legend-item .swatch{ width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 4px transparent; transition: box-shadow 0.3s var(--ease); } .orbit-legend-item:hover .swatch, .orbit-legend-item.is-active .swatch{ box-shadow: 0 0 0 5px color-mix(in srgb, currentColor 16%, transparent); } .orbit-legend-item .li-share{ font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); width: 40px; flex-shrink: 0; } .orbit-legend-item .li-body{ flex: 1; } .orbit-legend-item h3{ font-size: 16.5px; } .orbit-legend-item p{ font-size: 13.5px; color: var(--ink-dim); margin-top: 3px; max-width: 46ch; } .orbit-legend-item .li-arrow{ width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border-strong); display: grid; place-items: center; flex-shrink: 0; transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease); } .orbit-legend-item .li-arrow svg{ width: 13px; height: 13px; } .orbit-legend-item:hover .li-arrow, .orbit-legend-item.is-active .li-arrow{ transform: translate(2px,-2px); border-color: transparent; } @media (max-width: 980px){ .orbit-layout{ grid-template-columns: 1fr; } } @media (max-width: 520px){ .orbit-legend-item{ padding: 14px 8px; gap: 12px; } .orbit-legend-item .li-share{ width: 30px; font-size: 11px; } } /* =================================================================== VERTICAL PAGE HERO =================================================================== */ .v-hero{ padding-top: 150px; padding-bottom: 60px; } .v-hero-top{ display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; margin-bottom: 28px; } .v-share-badge{ display: flex; align-items: center; gap: 14px; padding: 10px 10px 10px 20px; border: 1px solid var(--border); border-radius: 999px; } .v-share-badge .ring{ width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-mono); font-size: 12px; color: var(--v-accent); position: relative; } .v-hero h1{ font-size: clamp(36px, 5.6vw, 64px); line-height: 1.05; max-width: 16ch; } .v-hero .lede{ margin-top: 20px; } .v-hero-actions{ display: flex; gap: 14px; margin-top: 32px; flex-wrap: wrap; } .offer-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } @media (max-width: 900px){ .offer-grid{ grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px){ .offer-grid{ grid-template-columns: 1fr; } } .process-list{ display: flex; flex-direction: column; } .process-row{ display: grid; grid-template-columns: 64px 1fr; gap: 22px; padding-block: 26px; border-bottom: 1px solid var(--border); } .process-row:first-child{ border-top: 1px solid var(--border); } .process-row .p-index{ font-family: var(--font-mono); color: var(--v-accent); font-size: 13px; padding-top: 4px; } .process-row h3{ font-size: 18px; margin-bottom: 6px; } .process-row p{ color: var(--ink-dim); font-size: 14.5px; max-width: 62ch; } .gallery-row{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } @media (max-width: 760px){ .gallery-row{ grid-template-columns: 1fr; } } .other-verticals{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .ov-chip{ display: flex; flex-direction: column; gap: 10px; padding: 18px; border: 1px solid var(--border); border-radius: var(--radius-sm); transition: border-color 0.3s var(--ease), transform 0.3s var(--ease); } .ov-chip:hover{ transform: translateY(-3px); } .ov-chip .swatch{ width: 9px; height: 9px; border-radius: 50%; } .ov-chip span.name{ font-size: 14px; font-weight: 600; } .ov-chip span.tag{ font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.06em; } @media (max-width: 900px){ .other-verticals{ grid-template-columns: repeat(2, 1fr); } } /* =================================================================== ADDITIONS — hero preview list, share-badge ring, prose/overview =================================================================== */ .hero-preview{ padding: 34px; min-height: 380px; display: flex; flex-direction: column; justify-content: center; gap: 4px; position: relative; z-index: 1; } .hero-preview-row{ display: flex; align-items: center; gap: 14px; padding: 14px 6px; border-bottom: 1px solid var(--border); } .hero-preview-row:last-child{ border-bottom: none; } .hero-preview-row .swatch{ width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; } .hero-preview-row .name{ font-family: var(--font-display); font-size: 15.5px; flex: 1; } .hero-preview-row .share{ font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); } .v-share-badge .ring{ background: conic-gradient(var(--v-accent) 0deg 72deg, var(--border) 72deg 360deg); } .v-share-badge .ring::before{ content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--bg-alt); } .v-share-badge .ring span{ position: relative; z-index: 1; } .v-share-badge .vb-text{ display: flex; flex-direction: column; } .v-share-badge .vb-text .vb-label{ font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); } .v-share-badge .vb-text .vb-value{ font-family: var(--font-display); font-size: 15px; margin-top: 2px; } .overview-grid{ display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 56px; } .overview-grid .prose p{ color: var(--ink-dim); font-size: 16px; margin-bottom: 16px; } .overview-grid .prose p:last-child{ margin-bottom: 0; } @media (max-width: 860px){ .overview-grid{ grid-template-columns: 1fr; gap: 28px; } } .edit-note{ font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); border: 1px dashed var(--border-strong); padding: 10px 14px; border-radius: var(--radius-sm); margin-bottom: 24px; display: inline-block; } .fact-list{ border: 1px solid var(--border); border-radius: var(--radius); background: linear-gradient(180deg, var(--surface), var(--surface-2)); overflow: hidden; } .fact-list li{ display: flex; justify-content: space-between; gap: 14px; padding: 16px 20px; border-bottom: 1px solid var(--border); font-size: 13.5px; } .fact-list li:last-child{ border-bottom: none; } .fact-list .k{ font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); } .fact-list .v{ color: var(--ink); text-align: right; } .footer-badges{ display:flex; gap:10px; margin-top:18px; flex-wrap:wrap; } .footer-badges span, .footer-badges a{ font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); border: 1px solid var(--border); border-radius: 999px; padding: 5px 11px; transition: color .2s ease, border-color .2s ease; } .footer-badges a:hover{ color: var(--gold); border-color: var(--gold); } .brand-logo{ height: 46px; width: auto; flex-shrink: 0; display: block; transition: height 0.4s var(--ease); } .site-header.is-scrolled .brand-logo{ height: 38px; } .footer-brand .brand-logo{ height: 52px; } .tag-groups{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 8px; } .tag-group h4{ font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--v-accent); margin-bottom: 14px; font-weight: 500; } .tag-row{ display: flex; flex-wrap: wrap; gap: 8px; } .tag-chip{ font-size: 12.5px; color: var(--ink-dim); border: 1px solid var(--border); border-radius: 999px; padding: 6px 13px; } @media (max-width: 760px){ .tag-groups{ grid-template-columns: 1fr 1fr; } } @media (max-width: 480px){ .tag-groups{ grid-template-columns: 1fr; } } /* =================================================================== TEXTURE PANELS — generated abstract compositions, one per vertical, in place of literal (and currently unavailable) product photography. Each evokes its vertical through pattern rather than image content, tinted with that vertical's brand color for a cohesive system. =================================================================== */ .photo{ position: relative; overflow: hidden; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface-2); box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 24px 48px -28px rgba(0,0,0,0.22); isolation: isolate; } .photo::after{ content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 100% 0%, transparent 40%, rgba(6,9,15,0.55) 100%); pointer-events: none; } .photo .photo-caption{ position: absolute; left: 22px; bottom: 20px; z-index: 1; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.85); } .texture{ position: absolute; inset: 0; transition: transform 1s var(--ease); } .photo:hover .texture{ transform: scale(1.04); } /* Hero — ambient mesh gradient blending all five vertical colors. Drift is done via `transform` (GPU compositor only), not `background-position` (forces a full repaint every frame) — the fixed-size background never moves, the oversized element does. */ .texture-hero{ inset: -14%; background: radial-gradient(46% 38% at 18% 22%, color-mix(in srgb, var(--v-footwear) 75%, transparent), transparent 70%), radial-gradient(42% 36% at 82% 12%, color-mix(in srgb, var(--v-printing) 65%, transparent), transparent 70%), radial-gradient(48% 42% at 88% 78%, color-mix(in srgb, var(--v-hospitality) 60%, transparent), transparent 70%), radial-gradient(40% 40% at 10% 82%, color-mix(in srgb, var(--v-advertising) 60%, transparent), transparent 70%), radial-gradient(50% 46% at 50% 50%, color-mix(in srgb, var(--v-consultation) 45%, transparent), transparent 72%), var(--bg-alt); animation: mesh-drift 26s ease-in-out infinite; will-change: transform; } @keyframes mesh-drift{ 0%, 100%{ transform: translate3d(0,0,0) scale(1); } 50%{ transform: translate3d(-2.5%, 2%, 0) scale(1.04); } } /* Footwear — diagonal stitch lines over leather-grain wash */ .texture-footwear{ background: repeating-linear-gradient(48deg, rgba(255,255,255,0.07) 0 2px, transparent 2px 26px), repeating-linear-gradient(-42deg, rgba(255,255,255,0.045) 0 1px, transparent 1px 26px), linear-gradient(160deg, color-mix(in srgb, var(--v-footwear) 38%, var(--surface)), var(--bg-alt) 78%); } /* Printing & Packaging — CMYK-adjacent halftone dot grid */ .texture-printing{ background: radial-gradient(circle, rgba(255,255,255,0.16) 1.6px, transparent 1.7px) 0 0/16px 16px, radial-gradient(circle, rgba(255,255,255,0.09) 1.2px, transparent 1.3px) 8px 8px/16px 16px, linear-gradient(155deg, color-mix(in srgb, var(--v-printing) 40%, var(--surface)), var(--bg-alt) 80%); } /* Hospitality & Corporate Merchandise — woven linen cross-hatch */ .texture-hospitality{ background: repeating-linear-gradient(0deg, rgba(255,255,255,0.06) 0 1px, transparent 1px 9px), repeating-linear-gradient(90deg, rgba(0,0,0,0.12) 0 1px, transparent 1px 9px), linear-gradient(150deg, color-mix(in srgb, var(--v-hospitality) 36%, var(--surface)), var(--bg-alt) 80%); } /* Project Advisory & Management / Advertising — blueprint grid + spotlight */ .texture-advertising{ background: radial-gradient(38% 46% at 78% 24%, rgba(255,255,255,0.14), transparent 70%), repeating-linear-gradient(0deg, rgba(255,255,255,0.055) 0 1px, transparent 1px 34px), repeating-linear-gradient(90deg, rgba(255,255,255,0.055) 0 1px, transparent 1px 34px), linear-gradient(155deg, color-mix(in srgb, var(--v-advertising) 40%, var(--surface)), var(--bg-alt) 80%); } /* Culinary & Food Ingredients — organic marbling swirl */ .texture-consultation{ background: radial-gradient(32% 40% at 30% 30%, rgba(255,255,255,0.16), transparent 68%), radial-gradient(38% 34% at 74% 66%, color-mix(in srgb, var(--v-consultation) 55%, transparent), transparent 70%), linear-gradient(160deg, color-mix(in srgb, var(--v-consultation) 34%, var(--surface)), var(--bg-alt) 80%); } /* ---------- hero split with photography ---------- */ .hero-split{ display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; } .hero-split .hero-photo{ aspect-ratio: 4 / 5; will-change: transform; } @media (max-width: 980px){ .hero-split{ grid-template-columns: 1fr; } .hero-split .hero-photo{ aspect-ratio: 16 / 10; order: -1; } } /* ---------- verticals photo showcase (2-col zig-zag, no generic 3-card row) ---------- */ .showcase-list{ display: flex; flex-direction: column; gap: clamp(56px, 9vw, 108px); } .showcase-row{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; } .showcase-row:nth-child(even) .showcase-media{ order: 2; } .showcase-row .showcase-media{ aspect-ratio: 5 / 4; } .showcase-row .showcase-index{ font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--v-accent); margin-bottom: 14px; display: flex; align-items: center; gap: 10px; } .showcase-row .showcase-index::before{ content: ""; width: 18px; height: 1px; background: var(--v-accent); } .showcase-row h3{ font-size: clamp(22px, 2.6vw, 32px); line-height: 1.12; letter-spacing: -0.01em; } .showcase-row p{ color: var(--ink-dim); font-size: 15.5px; margin-top: 14px; max-width: 46ch; } .showcase-row .showcase-link{ margin-top: 24px; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--ink); padding-bottom: 2px; border-bottom: 1px solid var(--border-strong); transition: border-color 0.3s var(--ease), color 0.3s var(--ease), gap 0.3s var(--ease); } .showcase-row .showcase-link svg{ width: 14px; height: 14px; transition: transform 0.3s var(--ease); } .showcase-row .showcase-link:hover{ color: var(--v-accent); border-color: var(--v-accent); gap: 12px; } .showcase-row .showcase-link:hover svg{ transform: translate(3px,-3px); } @media (max-width: 860px){ .showcase-row{ grid-template-columns: 1fr; } .showcase-row:nth-child(even) .showcase-media{ order: -1; } .showcase-row .showcase-media{ aspect-ratio: 16 / 10; } } /* ---------- magnetic buttons ---------- */ .btn-primary, .btn-ghost{ will-change: transform; } [data-magnetic]{ transition: transform 0.25s var(--ease); } /* ---------- scroll-linked hero parallax hook ---------- */ [data-parallax]{ will-change: transform; }