/* ========================================================= */ /* ========================================================= */ /* */ /* ARS FUTURE LAB — 2050 EXPERIENCE */ /* */ /* FUTURE BLUE / GOLDEN ENERGY / CRYSTAL GLASS */ /* */ /* ========================================================= */ /* ========================================================= */ /* ========================================================= */ /* ARS FUTURE LAB — SKY FUTURE ENERGY BACKGROUND */ /* ========================================================= */ /* ========================================================= */ /* ========================================================= */ /* */ /* ARS FUTURE LAB 2050 — LUXURY ENERGY OVERRIDE */ /* */ /* DEEP NAVY / LIQUID GOLD / CRYSTAL GLASS */ /* */ /* ========================================================= */ /* ========================================================= */ /* ========================================================= */ /* 01 — DEEP LUXURY FUTURE BACKGROUND */ /* ========================================================= */ .future-lab, .future-space-core, .future-mobility, .ars-os-core, .rose-future, .zhr-future, .zhr-future-ecosystem, .design-future, .ars-digital-family, .ars-smart-transportation, .ars-research-lab, .ars-2050-vision, .future-ai-gateway{ position: relative; overflow: hidden; isolation: isolate; color: #f7f1e3; background: radial-gradient( ellipse at 50% 15%, rgba(18,65,110,.75), transparent 42% ), radial-gradient( ellipse at 10% 55%, rgba(8,45,85,.85), transparent 42% ), radial-gradient( ellipse at 90% 70%, rgba(20,52,92,.80), transparent 45% ), linear-gradient( 180deg, #020b18 0%, #041426 28%, #061b32 52%, #030d1b 78%, #01050c 100% ); } /* ========================================================= */ /* 02 — LIQUID GOLD ENERGY FIELD */ /* ========================================================= */ .future-lab::before, .future-space-core::before, .future-mobility::before, .ars-os-core::before, .rose-future::before, .zhr-future::before, .zhr-future-ecosystem::before, .design-future::before, .ars-digital-family::before, .ars-smart-transportation::before, .ars-research-lab::before, .ars-2050-vision::before, .future-ai-gateway::before{ content:""; position: absolute; inset: -35%; z-index: -2; pointer-events: none; background: /* GOLD ENERGY STREAM 01 */ linear-gradient( 115deg, transparent 0%, transparent 24%, rgba(184,137,63,.05) 30%, rgba(210,164,82,.55) 38%, rgba(255,211,120,.98) 42%, rgba(255,238,175,1) 44%, rgba(255,194,70,.95) 46%, rgba(184,137,63,.55) 50%, transparent 58%, transparent 100% ), /* GOLD ENERGY STREAM 02 */ linear-gradient( 72deg, transparent 8%, transparent 34%, rgba(210,164,82,.15) 40%, rgba(255,203,80,.75) 47%, rgba(255,236,155,1) 50%, rgba(255,190,40,.85) 53%, rgba(184,137,63,.35) 59%, transparent 68% ), /* BLUE ENERGY FIELD */ radial-gradient( ellipse at 50% 50%, rgba(15,100,180,.42), transparent 48% ), /* GOLD CORE */ radial-gradient( ellipse at 50% 80%, rgba(230,188,103,.18), transparent 45% ); filter: blur(10px); opacity: 1; transform: translate3d(-8%,0,0) rotate(-3deg); animation: arsLiquidGoldFlow 14s ease-in-out infinite alternate; } @keyframes arsLiquidGoldFlow{ 0%{ transform: translate3d(-12%,3%,0) rotate(-4deg) scale(1); } 50%{ transform: translate3d(0,-2%,0) rotate(0deg) scale(1.08); } 100%{ transform: translate3d(12%,3%,0) rotate(4deg) scale(1); } } /* ========================================================= */ /* 03 — SHARP GOLD ENERGY RAYS */ /* ========================================================= */ .future-lab::after, .future-space-core::after, .future-mobility::after, .ars-os-core::after, .rose-future::after, .zhr-future::after, .zhr-future-ecosystem::after, .design-future::after, .ars-digital-family::after, .ars-smart-transportation::after, .ars-research-lab::after, .ars-2050-vision::after, .future-ai-gateway::after{ content:""; position: absolute; inset: -20%; z-index: -1; pointer-events: none; background: repeating-linear-gradient( 118deg, transparent 0px, transparent 170px, rgba(184,137,63,.04) 175px, rgba(255,198,70,.55) 180px, rgba(255,230,145,1) 184px, rgba(255,193,50,.80) 188px, rgba(184,137,63,.12) 194px, transparent 200px, transparent 370px ), repeating-linear-gradient( 68deg, transparent 0px, transparent 240px, rgba(210,164,82,.08) 245px, rgba(255,208,85,.60) 250px, rgba(255,235,160,1) 255px, rgba(255,195,45,.75) 260px, transparent 270px, transparent 510px ); filter: blur(2px); opacity: .95; mix-blend-mode: screen; animation: arsEnergyRays 18s linear infinite; } @keyframes arsEnergyRays{ 0%{ transform: translate3d(-12%,0,0); } 50%{ transform: translate3d(0,-4%,0); } 100%{ transform: translate3d(12%,5%,0); } } /* ========================================================= */ /* 04 — FUTURE HERO */ /* ========================================================= */ .future-hero{ position: relative; overflow: hidden; background: radial-gradient( ellipse at 50% 35%, rgba(18,92,160,.35), transparent 48% ), radial-gradient( ellipse at 50% 85%, rgba(255,197,65,.20), transparent 40% ); } /* ========================================================= */ /* 05 — HERO GOLDEN LIGHT */ /* ========================================================= */ .future-hero::after{ content:""; position: absolute; left: 50%; bottom: -80px; width: 130%; height: 420px; transform: translateX(-50%); pointer-events: none; background: radial-gradient( ellipse, rgba(255,218,125,.65) 0%, rgba(230,188,103,.35) 25%, rgba(184,137,63,.18) 45%, transparent 72% ); filter: blur(35px); mix-blend-mode: screen; } /* ========================================================= */ /* 06 — MOVING GOLDEN HERO WAVE */ /* ========================================================= */ .future-hero::before{ content:""; position: absolute; top: -30%; left: -40%; width: 180%; height: 100%; pointer-events: none; background: linear-gradient( 115deg, transparent 38%, rgba(184,137,63,.10) 43%, rgba(255,198,65,.65) 47%, rgba(255,237,170,1) 49%, rgba(255,196,55,.75) 51%, rgba(184,137,63,.18) 55%, transparent 61% ); filter: blur(8px); opacity: .95; transform: rotate(-5deg); animation: arsHeroEnergyWave 9s ease-in-out infinite alternate; } @keyframes arsHeroEnergyWave{ 0%{ transform: translateX(-15%) rotate(-7deg); } 100%{ transform: translateX(15%) rotate(-2deg); } } /* ========================================================= */ /* 07 — UNIVERSAL CRYSTAL GLASS CARDS */ /* ========================================================= */ .future-lab [class*="card"], .future-space-core [class*="card"], .future-mobility [class*="card"], .ars-os-core [class*="card"], .rose-future [class*="card"], .zhr-future [class*="card"], .zhr-future-ecosystem [class*="card"], .design-future [class*="card"], .ars-digital-family [class*="card"], .ars-smart-transportation [class*="card"], .ars-research-lab [class*="card"], .ars-2050-vision [class*="card"], .future-ai-gateway [class*="card"]{ position: relative; overflow: hidden; background: linear-gradient( 145deg, rgba(255,255,255,.20), rgba(255,255,255,.08) 28%, rgba(6,30,55,.48) 60%, rgba(184,137,63,.16) ); border: 1px solid rgba(255,215,130,.42); box-shadow: 0 20px 50px rgba(0,0,0,.42), 0 0 35px rgba(184,137,63,.16), inset 0 1px 0 rgba(255,255,255,.28), inset 0 0 35px rgba(255,215,130,.045); backdrop-filter: blur(22px) saturate(165%); -webkit-backdrop-filter: blur(22px) saturate(165%); transition: transform .8s cubic-bezier(.16,1,.3,1), box-shadow .8s ease, border-color .8s ease; } /* ========================================================= */ /* 08 — GLASS CARD REFLECTION */ /* ========================================================= */ .future-lab [class*="card"]::before, .future-space-core [class*="card"]::before, .future-mobility [class*="card"]::before, .ars-os-core [class*="card"]::before, .rose-future [class*="card"]::before, .zhr-future [class*="card"]::before, .zhr-future-ecosystem [class*="card"]::before, .design-future [class*="card"]::before, .ars-digital-family [class*="card"]::before, .ars-smart-transportation [class*="card"]::before, .ars-research-lab [class*="card"]::before, .ars-2050-vision [class*="card"]::before, .future-ai-gateway [class*="card"]::before{ content:""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient( 125deg, rgba(255,255,255,.22), transparent 28%, transparent 58%, rgba(255,210,100,.14) ); opacity: .8; } /* ========================================================= */ /* 09 — GLASS CARD HOVER */ /* ========================================================= */ .future-lab [class*="card"]:hover, .future-space-core [class*="card"]:hover, .future-mobility [class*="card"]:hover, .ars-os-core [class*="card"]:hover, .rose-future [class*="card"]:hover, .zhr-future [class*="card"]:hover, .zhr-future-ecosystem [class*="card"]:hover, .design-future [class*="card"]:hover, .ars-digital-family [class*="card"]:hover, .ars-smart-transportation [class*="card"]:hover, .ars-research-lab [class*="card"]:hover, .ars-2050-vision [class*="card"]:hover, .future-ai-gateway [class*="card"]:hover{ transform: translateY(-14px) scale(1.025); border-color: rgba(255,225,150,.90); box-shadow: 0 30px 70px rgba(0,0,0,.55), 0 0 45px rgba(255,198,65,.35), 0 0 100px rgba(230,188,103,.18), inset 0 1px 0 rgba(255,255,255,.40); } /* ========================================================= */ /* 10 — GOLDEN LUXURY BUTTONS */ /* ========================================================= */ .future-lab button, .future-lab a[class*="btn"], .future-lab a[class*="button"], .future-space-core button, .future-space-core a[class*="btn"], .future-mobility button, .future-mobility a[class*="btn"], .ars-os-core button, .ars-os-core a[class*="btn"], .rose-future button, .rose-future a[class*="btn"], .zhr-future button, .zhr-future a[class*="btn"], .design-future button, .design-future a[class*="btn"], .ars-digital-family button, .ars-digital-family a[class*="btn"], .ars-smart-transportation button, .ars-smart-transportation a[class*="btn"], .ars-research-lab button, .ars-research-lab a[class*="btn"], .ars-2050-vision button, .ars-2050-vision a[class*="btn"], .future-ai-gateway button, .future-ai-gateway a[class*="btn"]{ position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 30px; border: 1px solid rgba(255,218,130,.65); border-radius: 999px; color: #fff4d0; background: linear-gradient( 135deg, rgba(255,255,255,.16), rgba(184,137,63,.24), rgba(5,25,45,.65) ); box-shadow: 0 0 20px rgba(255,198,65,.18), inset 0 1px 0 rgba(255,255,255,.35); backdrop-filter: blur(16px); transition: transform .5s ease, box-shadow .5s ease, border-color .5s ease; } /* ========================================================= */ /* 11 — BUTTON GOLDEN LIGHT */ /* ========================================================= */ .future-lab button::before, .future-lab a[class*="btn"]::before, .future-space-core button::before, .future-space-core a[class*="btn"]::before, .future-mobility button::before, .future-mobility a[class*="btn"]::before, .ars-os-core button::before, .ars-os-core a[class*="btn"]::before{ content:""; position: absolute; inset: 2px; border-radius: inherit; background: linear-gradient( 110deg, transparent 20%, rgba(255,238,170,.60) 48%, transparent 75% ); opacity: .45; transform: translateX(-100%); transition: transform .8s ease; } .future-lab button:hover, .future-lab a[class*="btn"]:hover, .future-space-core button:hover, .future-space-core a[class*="btn"]:hover, .future-mobility button:hover, .future-mobility a[class*="btn"]:hover{ transform: translateY(-5px); border-color: rgba(255,235,170,1); box-shadow: 0 0 30px rgba(255,205,75,.40), 0 0 80px rgba(230,188,103,.22); } /* ========================================================= */ /* 12 — GOLDEN GLASS PANELS */ /* ========================================================= */ .future-lab [class*="panel"], .future-space-core [class*="panel"], .future-mobility [class*="panel"], .ars-os-core [class*="panel"], .rose-future [class*="panel"], .zhr-future [class*="panel"], .zhr-future-ecosystem [class*="panel"], .design-future [class*="panel"], .ars-digital-family [class*="panel"], .ars-smart-transportation [class*="panel"], .ars-research-lab [class*="panel"], .ars-2050-vision [class*="panel"], .future-ai-gateway [class*="panel"]{ background: linear-gradient( 145deg, rgba(255,255,255,.16), rgba(255,255,255,.055) 35%, rgba(184,137,63,.13) 75%, rgba(4,20,38,.48) ); border: 1px solid rgba(255,215,130,.35); backdrop-filter: blur(26px) saturate(170%); -webkit-backdrop-filter: blur(26px) saturate(170%); box-shadow: 0 25px 70px rgba(0,0,0,.40), 0 0 40px rgba(184,137,63,.12), inset 0 1px 0 rgba(255,255,255,.22); } /* ========================================================= */ /* 13 — GOLDEN FRAMES */ /* ========================================================= */ .future-lab [class*="card"], .future-lab [class*="panel"]{ outline: 1px solid rgba(255,210,105,.08); } /* ========================================================= */ /* 14 — FUTURE LAB HEADINGS */ /* ========================================================= */ .future-lab h1, .future-lab h2, .future-lab h3, .future-space-core h1, .future-space-core h2, .future-space-core h3, .future-mobility h1, .future-mobility h2, .future-mobility h3{ color: #fff5d7; text-shadow: 0 0 18px rgba(255,210,110,.20); } /* ========================================================= */ /* 15 — GOLDEN TEXT ACCENTS */ /* ========================================================= */ .future-lab strong, .future-lab [class*="label"], .future-lab [class*="eyebrow"]{ color: #f2c96d; text-shadow: 0 0 15px rgba(255,201,80,.30); } /* ========================================================= */ /* 16 — LUXURY GOLDEN DATA LINES */ /* ========================================================= */ .future-lab [class*="card"]::after{ content:""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: linear-gradient( 90deg, transparent, #b8893f, #ffe39b, #b8893f, transparent ); box-shadow: 0 0 18px rgba(255,210,100,.55); } /* ========================================================= */ /* ========================================================= */ /* 33 — MOBILE */ /* ========================================================= */ @media (max-width:900px){ .future-container, .future-core-container{ width: min( 92%, 700px ); } .future-core-container, .os-core-panel, .rose-core, .zhr-core, .zhr-ecosystem-core, .design-future-main, .family-network, .transport-core, .research-main, .vision-2050-core, .ai-gateway-card{ grid-template-columns: 1fr; } .mobility-universe{ grid-template-columns: repeat( 2, minmax(0,1fr) ); } } @media (max-width:600px){ .future-container, .future-core-container{ width: 90%; } .future-lab, .future-space-core, .future-mobility, .ars-os-core, .rose-future, .zhr-future, .zhr-future-ecosystem, .design-future, .ars-digital-family, .ars-smart-transportation, .ars-research-lab, .ars-2050-vision{ padding: 110px 0; } .future-hero h1{ font-size: 3rem; } .future-core-cards, .os-cards, .rose-cards, .zhr-cards, .zhr-future-cards, .design-cards, .family-cards, .transport-cards, .research-cards, .vision-cards{ grid-template-columns: 1fr; } .mobility-universe{ grid-template-columns: 1fr; padding: 20px; } .os-core-panel, .rose-core, .zhr-core, .zhr-ecosystem-core, .design-future-main, .family-network, .transport-core, .research-main, .vision-2050-core, .ai-gateway-card{ padding: 35px 22px; border-radius: 28px; } .mobility-message, .zhr-message, .zhr-human-message, .design-message, .family-vision, .transport-message, .future-manifesto, .future-closing{ padding: 45px 25px; } } /* ========================================================= */ /* 34 — REDUCED MOTION */ /* ========================================================= */ @media (prefers-reduced-motion:reduce){ *, *::before, *::after{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; } } /* ========================================================= */ /* ========================================================= */ /* */ /* ARS FUTURE LAB — LIVING BRAND ENERGY FIELD */ /* */ /* ARS HERITAGE GROUP / ARS DESIGN / ARS BRAIN */ /* ROSE AI / ZHR NAJI */ /* */ /* DEEP NAVY BACKGROUND + MATTE GOLD ENERGY */ /* */ /* ========================================================= */ /* ========================================================= */ /* ========================================================= */ /* 01 — GLOBAL BRAND ENERGY FIELD */ /* ========================================================= */ .future-lab{ position:relative; overflow:hidden; isolation:isolate; } /* ========================================================= */ /* 02 — MOVING BRAND NAMES */ /* ========================================================= */ .future-lab::after{ content: "ARS HERITAGE GROUP ARS DESIGN ARS BRAIN ROSE AI ZHR NAJI " "ARS HERITAGE GROUP ARS DESIGN ARS BRAIN ROSE AI ZHR NAJI " "ARS HERITAGE GROUP ARS DESIGN ARS BRAIN ROSE AI ZHR NAJI"; position:absolute; inset:-20%; z-index:-1; pointer-events:none; display:block; width:140%; height:140%; color: rgba(242,201,109,.12); font-family: Arial, Helvetica, sans-serif; font-size: clamp( 18px, 2.2vw, 34px ); font-weight: 800; letter-spacing: .28em; line-height: 5; text-align: center; white-space: pre-wrap; word-spacing: 1.5em; opacity: .75; filter: blur(.35px); text-shadow: 0 0 8px rgba(214,168,79,.18), 0 0 25px rgba(214,168,79,.08); transform: rotate(-12deg) translate3d(-3%,0,0); animation: arsBrandEnergyDrift 55s ease-in-out infinite alternate; } /* ========================================================= */ /* 03 — GOLDEN ENERGY DRIFT */ /* ========================================================= */ @keyframes arsBrandEnergyDrift{ 0%{ transform: rotate(-12deg) translate3d(-8%,-4%,0) scale(1); opacity: .38; } 25%{ transform: rotate(-9deg) translate3d(2%,2%,0) scale(1.025); opacity: .62; } 50%{ transform: rotate(-14deg) translate3d(7%,-1%,0) scale(1.05); opacity: .48; } 75%{ transform: rotate(-10deg) translate3d(-2%,5%,0) scale(1.02); opacity: .70; } 100%{ transform: rotate(-13deg) translate3d(-9%,1%,0) scale(1); opacity: .40; } } /* ========================================================= */ /* 04 — SECONDARY GOLD ENERGY LAYER */ /* ========================================================= */ .future-lab::before{ content:""; position:absolute; inset:-30%; z-index:-2; pointer-events:none; background: radial-gradient( ellipse at 20% 20%, rgba(255,215,120,.10), transparent 30% ), radial-gradient( ellipse at 80% 35%, rgba(255,201,80,.08), transparent 28% ), radial-gradient( ellipse at 35% 80%, rgba(255,224,150,.07), transparent 30% ), radial-gradient( ellipse at 75% 85%, rgba(184,137,63,.10), transparent 32% ); filter: blur(35px); opacity: .8; animation: arsGoldenAtmosphere 28s ease-in-out infinite alternate; } @keyframes arsGoldenAtmosphere{ 0%{ transform: translate3d(-4%,-3%,0) scale(1); } 50%{ transform: translate3d(5%,4%,0) scale(1.08); } 100%{ transform: translate3d(-2%,7%,0) scale(1.03); } } /* ========================================================= */ /* 05 — FLOATING GOLD PARTICLES */ /* ========================================================= */ .future-lab{ background-image: radial-gradient( circle at 12% 18%, rgba(255,220,135,.16) 0 1px, transparent 2px ), radial-gradient( circle at 82% 28%, rgba(255,220,135,.13) 0 1px, transparent 2px ), radial-gradient( circle at 35% 72%, rgba(255,220,135,.11) 0 1px, transparent 2px ), radial-gradient( circle at 68% 84%, rgba(255,220,135,.14) 0 1px, transparent 2px ); background-size: 260px 260px, 340px 340px, 300px 300px, 420px 420px; animation: arsParticleField 40s linear infinite; } @keyframes arsParticleField{ 0%{ background-position: 0 0, 0 0, 0 0, 0 0; } 50%{ background-position: 80px -60px, -100px 90px, 70px 100px, -80px -50px; } 100%{ background-position: 160px -120px, -200px 180px, 140px 200px, -160px -100px; } } /* ========================================================= */ /* 06 — BRAND ENERGY GLOW */ /* ========================================================= */ .future-lab .brand-energy, .future-lab .future-brand-energy, .future-lab .ars-brand-energy{ color: rgba( 245, 211, 130, .78 ); text-shadow: 0 0 10px rgba(255,215,120,.25), 0 0 30px rgba(214,168,79,.15); animation: arsBrandGlow 7s ease-in-out infinite alternate; } @keyframes arsBrandGlow{ 0%{ opacity: .45; filter: blur(.3px); } 100%{ opacity: .85; filter: blur(0); } } /* ========================================================= */ /* 07 — MOBILE OPTIMIZATION */ /* ========================================================= */ @media(max-width:700px){ .future-lab::after{ font-size: 15px; line-height: 6; letter-spacing: .20em; opacity: .45; filter: blur(.6px); animation-duration: 70s; } } /* ========================================================= */ /* 08 — REDUCED MOTION */ /* ========================================================= */ @media(prefers-reduced-motion:reduce){ .future-lab::before, .future-lab::after, .future-lab{ animation: none !important; } } /* ========================================================= */ /* ========================================================= */ /* */ /* ARS FUTURE LAB — FINAL LAYOUT & STRUCTURE SYSTEM */ /* */ /* PURPOSE: */ /* GLOBAL PAGE STRUCTURE / SPACING / CONTAINERS */ /* CARDS / PANELS / TYPOGRAPHY / RESPONSIVE */ /* */ /* THIS BLOCK SHOULD BE PLACED AT THE VERY END */ /* OF THE FUTURE LAB CSS FILE */ /* */ /* ========================================================= */ /* ========================================================= */ /* ========================================================= */ /* 01 — GLOBAL PAGE RESET */ /* ========================================================= */ html{ width: 100%; min-height: 100%; margin: 0; padding: 0; overflow-x: hidden; background: #020b18; } body{ width: 100%; min-height: 100%; margin: 0; padding: 0; overflow-x: hidden; background: #020b18; color: #f7f1e3; } /* ========================================================= */ /* 02 — FUTURE LAB MASTER PAGE */ /* ========================================================= */ .future-lab{ width: 100%; max-width: 100%; min-height: 100vh; margin: 0; padding: 0; position: relative; overflow: hidden; box-sizing: border-box; } /* ========================================================= */ /* 03 — UNIVERSAL BOX SIZING */ /* ========================================================= */ .future-lab *, .future-lab *::before, .future-lab *::after{ box-sizing: border-box; } /* ========================================================= */ /* 04 — FUTURE LAB SECTION SYSTEM */ /* ========================================================= */ .future-lab > section{ position: relative; width: 100%; max-width: 100%; margin: 0; padding: 120px 0; box-sizing: border-box; } /* ========================================================= */ /* 05 — INNER CONTENT CONTAINER */ /* ========================================================= */ .future-lab .future-container, .future-lab .future-core-container{ width: min( 90%, 1280px ); max-width: 1280px; margin-left: auto; margin-right: auto; padding-left: 32px; padding-right: 32px; position: relative; z-index: 2; } /* ========================================================= */ /* 06 — HERO STRUCTURE */ /* ========================================================= */ .future-lab .future-hero{ width: 100%; min-height: 760px; display: flex; align-items: center; justify-content: center; position: relative; padding: 120px 0; } /* ========================================================= */ /* 07 — HERO CONTENT */ /* ========================================================= */ .future-lab .future-hero > *{ position: relative; z-index: 3; } .future-lab .future-hero .future-container{ display: flex; flex-direction: column; justify-content: center; align-items: flex-start; min-height: 520px; } /* ========================================================= */ /* 08 — HERO TYPOGRAPHY */ /* ========================================================= */ .future-lab .future-hero h1{ max-width: 900px; margin: 0 0 35px; line-height: 1.02; letter-spacing: -0.025em; } .future-lab .future-hero p{ max-width: 720px; margin: 0 0 35px; line-height: 1.8; } .future-lab .future-hero a{ margin-top: 10px; } /* ========================================================= */ /* 09 — SECTION CONTENT STRUCTURE */ /* ========================================================= */ .future-lab > section > .future-container, .future-lab > section > .future-core-container{ display: block; } .future-lab section h1, .future-lab section h2, .future-lab section h3{ margin-top: 0; } .future-lab section p{ line-height: 1.85; } /* ========================================================= */ /* 10 — UNIVERSAL CONTENT WIDTH */ /* ========================================================= */ .future-lab [class*="message"], .future-lab [class*="vision"], .future-lab [class*="manifesto"], .future-lab [class*="closing"]{ width: 100%; max-width: 1100px; margin-left: auto; margin-right: auto; } /* ========================================================= */ /* 11 — UNIVERSAL GRID SYSTEM */ /* ========================================================= */ .future-lab [class*="cards"], .future-lab [class*="grid"]{ width: 100%; display: grid; gap: 28px; margin-top: 55px; } /* ========================================================= */ /* 12 — COMMON CARD GRID */ /* ========================================================= */ .future-lab .future-core-cards, .future-lab .os-cards, .future-lab .rose-cards, .future-lab .zhr-cards, .future-lab .zhr-future-cards, .future-lab .design-cards, .future-lab .family-cards, .future-lab .transport-cards, .future-lab .research-cards, .future-lab .vision-cards{ grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); align-items: stretch; } /* ========================================================= */ /* 13 — UNIVERSAL CARD STRUCTURE */ /* ========================================================= */ .future-lab [class*="card"]{ width: 100%; min-width: 0; min-height: 240px; padding: 34px; border-radius: 28px; display: flex; flex-direction: column; justify-content: flex-start; gap: 18px; } /* ========================================================= */ /* 14 — CARD TYPOGRAPHY */ /* ========================================================= */ .future-lab [class*="card"] h1, .future-lab [class*="card"] h2, .future-lab [class*="card"] h3, .future-lab [class*="card"] h4{ margin: 0; line-height: 1.25; } .future-lab [class*="card"] p{ margin: 0; line-height: 1.8; } /* ========================================================= */ /* 15 — UNIVERSAL PANELS */ /* ========================================================= */ .future-lab [class*="panel"]{ width: 100%; max-width: 1100px; margin-left: auto; margin-right: auto; padding: 45px; border-radius: 32px; } /* ========================================================= */ /* 16 — CONTENT INSIDE PANELS */ /* ========================================================= */ .future-lab [class*="panel"] h1, .future-lab [class*="panel"] h2, .future-lab [class*="panel"] h3{ margin-top: 0; margin-bottom: 20px; } .future-lab [class*="panel"] p{ margin: 0 0 20px; line-height: 1.85; } /* ========================================================= */ /* 17 — BUTTON GROUP STRUCTURE */ /* ========================================================= */ .future-lab .future-container > a, .future-lab .future-container > button{ margin-top: 20px; } .future-lab [class*="buttons"], .future-lab [class*="actions"], .future-lab [class*="cta"]{ display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 30px; } /* ========================================================= */ /* 18 — FUTURE SPACE STRUCTURE */ /* ========================================================= */ .future-lab .future-space-core, .future-lab .future-mobility, .future-lab .ars-os-core, .future-lab .rose-future, .future-lab .zhr-future, .future-lab .zhr-future-ecosystem, .future-lab .design-future, .future-lab .ars-digital-family, .future-lab .ars-smart-transportation, .future-lab .ars-research-lab, .future-lab .ars-2050-vision, .future-lab .future-ai-gateway{ width: 100%; max-width: 100%; position: relative; } /* ========================================================= */ /* 19 — SECTION SEPARATION */ /* ========================================================= */ .future-lab > section + section{ border-top: 1px solid rgba( 255, 215, 130, .045 ); } /* ========================================================= */ /* 20 — SAFE IMAGE SYSTEM */ /* ========================================================= */ .future-lab img{ max-width: 100%; height: auto; display: block; } .future-lab img:not([src]), .future-lab img[src=""]{ display: none; } /* ========================================================= */ /* 21 — PREVENT BROKEN IMAGE COLLAPSE */ /* ========================================================= */ .future-lab [class*="image"], .future-lab [class*="visual"], .future-lab [class*="media"]{ min-width: 0; overflow: hidden; } .future-lab [class*="image"] img, .future-lab [class*="visual"] img, .future-lab [class*="media"] img{ width: 100%; max-width: 100%; object-fit: cover; } /* ========================================================= */ /* 22 — FUTURE LAB SCROLL FLOW */ /* ========================================================= */ .future-lab section{ scroll-margin-top: 80px; } /* ========================================================= */ /* 23 — REMOVE UNWANTED INLINE SPACING */ /* ========================================================= */ .future-lab > *{ margin-left: 0; margin-right: 0; } /* ========================================================= */ /* 24 — LARGE SCREEN */ /* ========================================================= */ @media (min-width:1200px){ .future-lab > section{ padding-top: 150px; padding-bottom: 150px; } .future-lab .future-hero{ min-height: 820px; } .future-lab .future-container, .future-lab .future-core-container{ width: min( 88%, 1320px ); max-width: 1320px; } } /* ========================================================= */ /* 25 — TABLET */ /* ========================================================= */ @media (max-width:900px){ .future-lab > section{ padding: 90px 0; } .future-lab .future-container, .future-lab .future-core-container{ width: 92%; max-width: 700px; padding-left: 20px; padding-right: 20px; } .future-lab .future-hero{ min-height: 700px; padding: 100px 0; } .future-lab .future-core-cards, .future-lab .os-cards, .future-lab .rose-cards, .future-lab .zhr-cards, .future-lab .zhr-future-cards, .future-lab .design-cards, .future-lab .family-cards, .future-lab .transport-cards, .future-lab .research-cards, .future-lab .vision-cards{ grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); } .future-lab [class*="card"]{ padding: 30px; } } /* ========================================================= */ /* 26 — MOBILE */ /* ========================================================= */ @media (max-width:600px){ html, body{ width: 100%; max-width: 100%; overflow-x: hidden; } .future-lab{ width: 100%; max-width: 100%; overflow-x: hidden; } .future-lab > section{ width: 100%; padding: 80px 0; } .future-lab .future-container, .future-lab .future-core-container{ width: calc( 100% - 32px ); max-width: none; margin-left: 16px; margin-right: 16px; padding-left: 0; padding-right: 0; } .future-lab .future-hero{ min-height: 650px; padding: 80px 0; } .future-lab .future-hero .future-container{ min-height: 500px; justify-content: center; } .future-lab .future-hero h1{ font-size: clamp( 2.6rem, 11vw, 4rem ); line-height: 1.05; margin-bottom: 28px; } .future-lab .future-hero p{ font-size: 1rem; line-height: 1.75; } .future-lab .future-core-cards, .future-lab .os-cards, .future-lab .rose-cards, .future-lab .zhr-cards, .future-lab .zhr-future-cards, .future-lab .design-cards, .future-lab .family-cards, .future-lab .transport-cards, .future-lab .research-cards, .future-lab .vision-cards{ grid-template-columns: 1fr; gap: 22px; margin-top: 40px; } .future-lab [class*="card"]{ min-height: 220px; padding: 28px 24px; border-radius: 24px; } .future-lab [class*="panel"]{ padding: 32px 24px; border-radius: 26px; } .future-lab [class*="buttons"], .future-lab [class*="actions"], .future-lab [class*="cta"]{ flex-direction: column; align-items: stretch; } .future-lab button, .future-lab a[class*="btn"], .future-lab a[class*="button"]{ width: 100%; min-height: 56px; } } /* ========================================================= */ /* 27 — VERY SMALL MOBILE */ /* ========================================================= */ @media (max-width:380px){ .future-lab .future-container, .future-lab .future-core-container{ width: calc( 100% - 24px ); margin-left: 12px; margin-right: 12px; } .future-lab [class*="card"]{ padding: 24px 20px; } .future-lab [class*="panel"]{ padding: 28px 20px; } } /* ========================================================= */ /* 28 — FINAL ANTI-OVERFLOW SAFETY */ /* ========================================================= */ .future-lab h1, .future-lab h2, .future-lab h3, .future-lab h4, .future-lab p, .future-lab a{ max-width: 100%; overflow-wrap: break-word; } /* ========================================================= */ /* 29 — FINAL PAGE EDGE PROTECTION */ /* ========================================================= */ .future-lab{ isolation: isolate; background-color: #020b18; } /* ========================================================= */ /* 30 — FINAL FUTURE LAB STRUCTURE LOCK */ /* ========================================================= */ .future-lab > section > *{ position: relative; z-index: 2; } /* ========================================================= */ /* ========================================================= */ /* */ /* ARS FUTURE LAB — FINAL PAGE STRUCTURE */ /* GLOBAL VISUAL UNIFICATION OVERRIDE */ /* */ /* PURPOSE: */ /* ONE PAGE / ONE BACKGROUND / ONE VISUAL WORLD */ /* */ /* ========================================================= */ /* ========================================================= */ /* ========================================================= */ /* 01 — GLOBAL RESET */ /* ========================================================= */ html, body{ margin:0 !important; padding:0 !important; width:100% !important; min-width:100% !important; max-width:100% !important; overflow-x:hidden !important; background:#031426 !important; } /* ========================================================= */ /* 02 — REMOVE WHITE PAGE EDGES */ /* ========================================================= */ *, *::before, *::after{ box-sizing:border-box; } body{ background: radial-gradient( ellipse at 50% 8%, rgba(18,76,125,.32), transparent 42% ), radial-gradient( ellipse at 15% 48%, rgba(8,54,96,.28), transparent 45% ), radial-gradient( ellipse at 85% 72%, rgba(12,67,112,.24), transparent 48% ), linear-gradient( 180deg, #020b18 0%, #041426 25%, #061b32 52%, #031426 76%, #020914 100% ) !important; color:#f7f1e3 !important; } /* ========================================================= */ /* 03 — FUTURE LAB MAIN WORLD */ /* ========================================================= */ .future-lab{ position:relative !important; display:block !important; width:100% !important; max-width:none !important; min-height:100vh !important; margin:0 !important; padding:0 !important; overflow:hidden !important; isolation:isolate !important; background: radial-gradient( ellipse at 50% 10%, rgba(18,76,125,.42), transparent 45% ), radial-gradient( ellipse at 8% 42%, rgba(8,58,104,.32), transparent 44% ), radial-gradient( ellipse at 92% 65%, rgba(10,63,110,.28), transparent 48% ), linear-gradient( 180deg, #020b18 0%, #041426 22%, #061b32 48%, #04182c 72%, #020b18 100% ) !important; } /* ========================================================= */ /* 04 — ALL SECTIONS BECOME TRANSPARENT */ /* ========================================================= */ .future-lab > section, .future-lab section, .future-space-core, .future-mobility, .ars-os-core, .rose-future, .zhr-future, .zhr-future-ecosystem, .design-future, .ars-digital-family, .ars-smart-transportation, .ars-research-lab, .ars-2050-vision, .future-ai-gateway{ position:relative !important; width:100% !important; max-width:none !important; margin:0 !important; background:transparent !important; } /* ========================================================= */ /* 05 — REMOVE SEPARATE BACKGROUND BLOCKS */ /* ========================================================= */ .future-lab > section::before, .future-lab > section::after{ pointer-events:none; } /* ========================================================= */ /* 06 — HERO IS PART OF THE SAME WORLD */ /* ========================================================= */ .future-hero{ position:relative !important; width:100% !important; min-width:100% !important; max-width:none !important; min-height:100vh !important; margin:0 !important; border:0 !important; border-radius:0 !important; background: radial-gradient( ellipse at 50% 30%, rgba(18,88,150,.30), transparent 52% ), transparent !important; } /* ========================================================= */ /* 07 — HERO GOLD LIGHT — INTEGRATED */ /* ========================================================= */ .future-hero::after{ content:"" !important; position:absolute !important; inset:-20% -15% !important; z-index:-1 !important; pointer-events:none !important; background: radial-gradient( ellipse at 50% 55%, rgba(255,211,120,.22), transparent 28% ), radial-gradient( ellipse at 35% 35%, rgba(255,198,65,.12), transparent 30% ), radial-gradient( ellipse at 70% 70%, rgba(230,188,103,.10), transparent 34% ) !important; filter:blur(40px) !important; opacity:.85 !important; } /* ========================================================= */ /* 08 — UNIFIED CONTENT CONTAINER */ /* ========================================================= */ .future-container, .future-core-container{ position:relative !important; width:min(1180px, 92%) !important; max-width:1180px !important; margin-left:auto !important; margin-right:auto !important; padding-left:0 !important; padding-right:0 !important; } /* ========================================================= */ /* 09 — ALL MAIN CONTENT ALIGNMENT */ /* ========================================================= */ .future-lab > section > .future-container, .future-lab > section > .future-core-container{ margin-left:auto !important; margin-right:auto !important; } /* ========================================================= */ /* 10 — HERO CONTENT */ /* ========================================================= */ .future-hero .future-container{ min-height:100vh !important; display:flex !important; flex-direction:column !important; justify-content:center !important; align-items:flex-start !important; padding-top:120px !important; padding-bottom:120px !important; } /* ========================================================= */ /* 11 — TEXT STRUCTURE */ /* ========================================================= */ .future-lab h1, .future-lab h2, .future-lab h3, .future-lab h4, .future-lab p, .future-lab span, .future-lab strong, .future-lab a{ max-width:100%; } .future-lab h1{ margin-top:0 !important; margin-bottom:28px !important; line-height:1.05 !important; } .future-lab h2{ margin-top:0 !important; margin-bottom:22px !important; line-height:1.15 !important; } .future-lab p{ margin-top:0 !important; margin-bottom:24px !important; line-height:1.75 !important; } /* ========================================================= */ /* 12 — IMAGE SAFETY */ /* ========================================================= */ .future-lab img{ display:block; max-width:100%; height:auto; } .future-lab img:not([src]), .future-lab img[src=""]{ display:none !important; } /* ========================================================= */ /* 13 — GRID STRUCTURE */ /* ========================================================= */ .future-core-cards, .os-cards, .rose-cards, .zhr-cards, .zhr-future-cards, .design-cards, .family-cards, .transport-cards, .research-cards, .vision-cards{ width:100% !important; max-width:1180px !important; margin-left:auto !important; margin-right:auto !important; display:grid !important; grid-template-columns: repeat(3,minmax(0,1fr)); gap:28px !important; align-items:stretch !important; } /* ========================================================= */ /* 14 — CARD STRUCTURE */ /* ========================================================= */ .future-lab [class*="card"]{ width:100% !important; min-width:0 !important; margin:0 !important; padding:32px !important; border-radius:28px !important; overflow:hidden !important; } /* ========================================================= */ /* 15 — CARD INTERNAL SPACING */ /* ========================================================= */ .future-lab [class*="card"] h1, .future-lab [class*="card"] h2, .future-lab [class*="card"] h3, .future-lab [class*="card"] h4{ margin-top:0 !important; margin-bottom:18px !important; } .future-lab [class*="card"] p{ margin-bottom:0 !important; } /* ========================================================= */ /* 16 — PANEL STRUCTURE */ /* ========================================================= */ .future-lab [class*="panel"]{ width:100% !important; max-width:1180px !important; margin-left:auto !important; margin-right:auto !important; border-radius:32px !important; padding:50px !important; } /* ========================================================= */ /* 17 — SECTION RHYTHM */ /* ========================================================= */ .future-lab > section{ padding-top:120px !important; padding-bottom:120px !important; } /* ========================================================= */ /* 18 — FIRST SECTION */ /* ========================================================= */ .future-lab > section:first-of-type{ padding-top:0 !important; } /* ========================================================= */ /* 19 — LAST SECTION */ /* ========================================================= */ .future-lab > section:last-of-type{ padding-bottom:160px !important; } /* ========================================================= */ /* 20 — REMOVE DOUBLE SECTION BORDERS */ /* ========================================================= */ .future-lab > section{ border-top:0 !important; border-bottom:0 !important; } /* ========================================================= */ /* 21 — GLOBAL CONTENT WIDTH */ /* ========================================================= */ .future-lab .future-message, .future-lab .future-manifesto, .future-lab .future-closing, .future-lab .mobility-message, .future-lab .zhr-message, .future-lab .zhr-human-message, .future-lab .design-message, .future-lab .family-vision, .future-lab .transport-message{ width:min(100%,1000px) !important; margin-left:auto !important; margin-right:auto !important; } /* ========================================================= */ /* 22 — NO HORIZONTAL OVERFLOW */ /* ========================================================= */ .future-lab, .future-lab *{ max-width:100%; } .future-lab{ overflow-x:hidden !important; } /* ========================================================= */ /* 23 — MOBILE STRUCTURE */ /* ========================================================= */ @media(max-width:900px){ .future-container, .future-core-container{ width:90% !important; max-width:none !important; } .future-core-cards, .os-cards, .rose-cards, .zhr-cards, .zhr-future-cards, .design-cards, .family-cards, .transport-cards, .research-cards, .vision-cards{ grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap:22px !important; } .future-lab > section{ padding-top:90px !important; padding-bottom:90px !important; } } /* ========================================================= */ /* 24 — SMALL MOBILE */ /* ========================================================= */ @media(max-width:600px){ body{ width:100% !important; overflow-x:hidden !important; } .future-lab{ width:100% !important; min-width:100% !important; } .future-container, .future-core-container{ width:calc(100% - 36px) !important; max-width:none !important; } .future-hero{ min-height:100svh !important; } .future-hero .future-container{ min-height:100svh !important; padding-top:90px !important; padding-bottom:90px !important; } .future-core-cards, .os-cards, .rose-cards, .zhr-cards, .zhr-future-cards, .design-cards, .family-cards, .transport-cards, .research-cards, .vision-cards{ grid-template-columns:1fr !important; gap:20px !important; } .future-lab > section{ padding-top:75px !important; padding-bottom:75px !important; } .future-lab [class*="card"]{ padding:26px !important; border-radius:24px !important; } .future-lab [class*="panel"]{ padding:30px 24px !important; border-radius:26px !important; } .future-lab h1{ font-size:clamp( 2.4rem, 10vw, 4rem ) !important; } .future-lab h2{ font-size:clamp( 2rem, 8vw, 3rem ) !important; } .future-lab p{ font-size:1.05rem !important; line-height:1.75 !important; } } /* ========================================================= */ /* 25 — FINAL PAGE INTEGRITY */ /* ========================================================= */ .future-lab > *{ position:relative; z-index:1; } /* ========================================================= */ /* 26 — PREVENT VISUAL FRAGMENTATION */ /* ========================================================= */ .future-lab > section + section{ margin-top:0 !important; border-top:0 !important; } /* ========================================================= */ /* 27 — FINAL BODY EDGE LOCK */ /* ========================================================= */ html{ background:#020b18 !important; } body{ border:0 !important; } .future-lab{ border:0 !important; outline:0 !important; } /* ========================================================= */ /* END OF STRUCTURE */ /* ========================================================= */ /* ========================================================= */ /* ========================================================= */ /* END — FUTURE LAB SYSTEM */ /* ========================================================= */ /* ========================================================= */