/* ========================================================================== Manufacturing Growth Journey — Roadmap section -------------------------------------------------------------------------- Every selector is namespaced with `gfrm-` (GeoFast RoadMap) and scoped under .gfrm-wrap so this file cannot touch anything else on the site. Do not add bare element or global selectors here. ========================================================================== */ .gfrm-wrap { --gfrm-navy: #273675; --gfrm-orange: #f2a01c; --gfrm-green: #168a4b; --gfrm-ink: #2b2d30; --gfrm-paper: #fdfeff; display: block; width: 100%; background: var(--gfrm-paper); color: var(--gfrm-ink); font-family: "Poppins", Arial, sans-serif; } .gfrm-wrap, .gfrm-wrap *, .gfrm-wrap *::before, .gfrm-wrap *::after { box-sizing: border-box; } /* support.css is linked from within (support/header.php), so it lands after this file in the cascade and its `* { font-family: 'Work Sans' }` out-ranks inheritance from .gfrm-wrap. Re-assert the roadmap font here with class-level specificity. Keep this rule ABOVE the specific blocks below so .gfrm-title (Oswald) and .gfrm-year still win on equal specificity. */ .gfrm-wrap * { font-family: "Poppins", Arial, sans-serif; } .gfrm-wrap button, .gfrm-wrap img { -webkit-user-drag: none; } .gfrm-shell { width: 100%; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; padding: 0; } .gfrm-scaled { position: relative; margin-inline: auto; } .gfrm-stage { position: absolute; inset: 0 auto auto 0; width: 1456px; height: 1024px; overflow: hidden; transform-origin: top left; background: var(--gfrm-paper); } .gfrm-title { position: absolute; left: 52px; top: 48px; z-index: 5; width: 520px; display: flex; flex-direction: column; color: var(--gfrm-navy); font-family: "Oswald", "Arial Narrow", "Liberation Sans Narrow", Impact, sans-serif; font-size: 45px; font-weight: 600; line-height: 1.01; letter-spacing: .2px; text-transform: uppercase; transform: scaleX(.72); transform-origin: top left; } .gfrm-title span { white-space: nowrap; } .gfrm-title .gfrm-title-accent { color: var(--gfrm-orange); } .gfrm-logo { position: absolute; top: 44px; right: 53px; z-index: 4; width: 226px; height: auto; object-fit: contain; } .gfrm-roadlayer { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; } .gfrm-accent { fill: none; stroke-width: 7; stroke-linecap: round; } .gfrm-stroke-orange { stroke: var(--gfrm-orange); } .gfrm-stroke-green { stroke: var(--gfrm-green); } .gfrm-year { --gfrm-x: 0px; --gfrm-y: 0px; position: absolute; z-index: 9; left: var(--gfrm-x); top: var(--gfrm-y); width: 62px; height: 62px; padding: 0; border: 0; border-radius: 50%; background: var(--gfrm-navy); color: #fff; display: grid; place-items: center; font: 600 18px/1 "Poppins", Arial, sans-serif; cursor: pointer; outline: none; transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; } .gfrm-year::before { content: ""; position: absolute; inset: -6px; border: 1.7px dotted var(--gfrm-navy); border-radius: 50%; } .gfrm-year.gfrm-noring::before { display: none; } .gfrm-year:hover, .gfrm-year:focus-visible { transform: scale(1.08); box-shadow: 0 8px 18px rgba(39,54,117,.22); } .gfrm-year.gfrm-active { transform: scale(1.11); box-shadow: 0 0 0 6px rgba(242,160,28,.22), 0 8px 20px rgba(39,54,117,.25); } .gfrm-year-2006 { --gfrm-x: 422px; --gfrm-y: 169px; } .gfrm-year-2015 { --gfrm-x: 641px; --gfrm-y: 169px; } .gfrm-year-2016 { --gfrm-x: 840px; --gfrm-y: 169px; } .gfrm-year-2019 { --gfrm-x: 1080px; --gfrm-y: 169px; } .gfrm-year-2020 { --gfrm-x: 201px; --gfrm-y: 462px; } .gfrm-year-2023 { --gfrm-x: 638px; --gfrm-y: 462px; } .gfrm-year-2025 { --gfrm-x: 181px; --gfrm-y: 664px; } .gfrm-year-2026 { --gfrm-x: 183px; --gfrm-y: 804px; } .gfrm-dot { position: absolute; z-index: 3; width: 16px; height: 16px; border: 2px solid var(--gfrm-orange); background: var(--gfrm-paper); border-radius: 50%; } .gfrm-dot::before { content: ""; position: absolute; left: 5px; bottom: 13px; width: 2px; height: 29px; background: #4a4b4c; } .gfrm-dot-2006 { left: 444px; top: 255px; } .gfrm-dot-2015 { left: 663px; top: 255px; } .gfrm-dot-2016 { left: 862px; top: 255px; } .gfrm-dot-2019 { left: 1102px; top: 255px; } .gfrm-dot-2020 { left: 224px; top: 552px; } .gfrm-dot-2025 { left: 203px; top: 755px; } .gfrm-dot-2020::before, .gfrm-dot-2025::before { height: 31px; } .gfrm-item { position: absolute; z-index: 6; display: block; min-width: 120px; margin: 0; padding: 0; transition: transform .25s ease, filter .25s ease, opacity .45s ease; } .gfrm-item img { position: absolute; display: block; max-width: none; object-fit: contain; filter: drop-shadow(0 1px 0 rgba(0,0,0,.02)); } .gfrm-item .gfrm-copy { position: absolute; width: max-content; max-width: 220px; padding: 0; background: none; text-align: left; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(8px); transition: opacity .28s ease, transform .28s ease, visibility 0s linear .28s; } .gfrm-item.gfrm-show .gfrm-copy { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); transition-delay: 0s; } .gfrm-copy h2 { margin: 0 0 8px; padding: 0; color: #2d2e31; font-size: 15px; font-weight: 700; line-height: 1.16; letter-spacing: -.25px; } .gfrm-copy p { margin: 0; padding: 0; display: flex; align-items: flex-start; gap: 8px; font-size: 14px; font-weight: 400; line-height: 1.18; color: #313236; } .gfrm-pin { flex: 0 0 auto; width: 15px; height: 18px; margin-top: 1px; background-repeat: no-repeat; background-position: center; background-size: contain; background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 20%27 fill=%27none%27%3E%3Cpath d=%27M8 18c4.25-5.07 6.38-8.44 6.38-10.12A6.38 6.38 0 1 0 1.62 7.88C1.62 9.56 3.75 12.93 8 18Z%27 stroke=%27%23F2A01C%27 stroke-width=%272.4%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%2F%3E%3Ccircle cx=%278%27 cy=%277.4%27 r=%271.8%27 fill=%27%23F2A01C%27%2F%3E%3C/svg%3E"); } .gfrm-pin::after { display: none; } /* Top row */ .gfrm-m-2006 { left: 468px; top: 164px; width: 128px; height: 200px; } .gfrm-m-2006 img { left: 27px; top: 2px; width: 83px; height: 83px; } .gfrm-m-2006 .gfrm-copy { left: 0; top: 121px; } .gfrm-m-2015 { left: 682px; top: 156px; width: 145px; height: 196px; } .gfrm-m-2015 img { left: 36px; top: 0; width: 72px; height: 105px; } .gfrm-m-2015 .gfrm-copy { left: 0; top: 128px; } .gfrm-m-2016 { left: 880px; top: 170px; width: 150px; height: 190px; } .gfrm-m-2016 img { left: 33px; top: 0; width: 101px; height: 92px; } .gfrm-m-2016 .gfrm-copy { left: 0; top: 114px; } .gfrm-m-2019 { left: 1117px; top: 174px; width: 180px; height: 190px; } .gfrm-m-2019 img { left: 33px; top: 0; width: 102px; height: 90px; } .gfrm-m-2019 .gfrm-copy { left: 0; top: 113px; } /* 2020 row */ .gfrm-m-2020-salt { left: 272px; top: 439px; width: 150px; height: 170px; } .gfrm-m-2020-salt img { left: 11px; top: 0; width: 96px; height: 94px; } .gfrm-m-2020-salt .gfrm-copy { left: 0; top: 108px; } .gfrm-m-2020-agarbatti { left: 462px; top: 430px; width: 172px; height: 154px; } .gfrm-m-2020-agarbatti img { left: 0; top: 0; width: 70px; height: 111px; } .gfrm-m-2020-agarbatti .gfrm-copy { left: 68px; top: 43px; width: 92px; max-width: 92px; } .gfrm-m-2020-agarbatti .gfrm-copy h2 { width: 92px; max-width: 92px; font-size: 14px; line-height: 1.12; white-space: normal; } .gfrm-m-2020-agarbatti .gfrm-copy p { width: 96px; font-size: 13.5px; line-height: 1.17; gap: 7px; } .gfrm-join { position: absolute; z-index: 8; font-family: Arial, sans-serif; font-size: 27px; font-weight: 700; color: #343536; line-height: 1; } .gfrm-div { position: absolute; z-index: 2; width: 1px; background: repeating-linear-gradient(to bottom, #8b8b8b 0 2px, transparent 2px 5px); } .gfrm-join-2020 { left: 424px; top: 490px; } .gfrm-div-2020 { left: 434px; top: 446px; height: 113px; } /* 2023 row */ .gfrm-m-2023-juice { left: 704px; top: 438px; width: 225px; height: 176px; } .gfrm-m-2023-juice img { left: 0; top: 0; width: 82px; height: 98px; } .gfrm-m-2023-juice .gfrm-copy { left: 80px; top: 35px; } .gfrm-join-2023-a { left: 914px; top: 490px; } .gfrm-div-2023-a { left: 924px; top: 446px; height: 112px; } .gfrm-m-2023-cereal { left: 948px; top: 441px; width: 245px; height: 132px; } .gfrm-m-2023-cereal img { left: 0; top: 0; width: 84px; height: 87px; } .gfrm-m-2023-cereal .gfrm-copy { left: 84px; top: 30px; } .gfrm-join-2023-b { left: 1166px; top: 490px; } .gfrm-div-2023-b { left: 1176px; top: 446px; height: 112px; } .gfrm-m-2023-namkeen { left: 1204px; top: 438px; width: 210px; height: 134px; } .gfrm-m-2023-namkeen img { left: 0; top: 0; width: 96px; height: 90px; } .gfrm-m-2023-namkeen .gfrm-copy { left: 106px; top: 30px; } /* 2025 row */ .gfrm-m-2025-atta { left: 257px; top: 652px; width: 225px; height: 110px; } .gfrm-m-2025-atta img { left: 0; top: 0; width: 99px; height: 91px; } .gfrm-m-2025-atta .gfrm-copy { left: 100px; top: 27px; } .gfrm-join-2025-a { left: 477px; top: 687px; } .gfrm-div-2025-a { left: 486px; top: 659px; height: 85px; } .gfrm-m-2025-juice { left: 507px; top: 653px; width: 240px; height: 108px; } .gfrm-m-2025-juice img { left: 0; top: 0; width: 77px; height: 92px; } .gfrm-m-2025-juice .gfrm-copy { left: 80px; top: 26px; } .gfrm-join-2025-b { left: 740px; top: 687px; } .gfrm-div-2025-b { left: 749px; top: 659px; height: 85px; } .gfrm-m-2025-candy { left: 783px; top: 650px; width: 270px; height: 110px; } .gfrm-m-2025-candy img { left: 0; top: 0; width: 80px; height: 91px; } .gfrm-m-2025-candy .gfrm-copy { left: 79px; top: 28px; } /* 2026 row */ .gfrm-m-2026-saffola { left: 255px; top: 798px; width: 230px; height: 110px; } .gfrm-m-2026-saffola img { left: 0; top: 0; width: 98px; height: 93px; } .gfrm-m-2026-saffola .gfrm-copy { left: 98px; top: 23px; } .gfrm-join-2026-a { left: 479px; top: 841px; } .gfrm-div-2026-a { left: 488px; top: 805px; height: 94px; } .gfrm-m-2026-paperboat { left: 511px; top: 797px; width: 180px; height: 115px; } .gfrm-m-2026-paperboat img { left: 0; top: 0; width: 69px; height: 99px; } .gfrm-m-2026-paperboat .gfrm-copy { left: 67px; top: 14px; } .gfrm-join-2026-b { left: 689px; top: 841px; } .gfrm-div-2026-b { left: 698px; top: 805px; height: 94px; } .gfrm-m-2026-perfume { left: 713px; top: 788px; width: 255px; height: 130px; } .gfrm-m-2026-perfume img { left: 0; top: 7px; width: 98px; height: 107px; } .gfrm-m-2026-perfume .gfrm-copy { left: 98px; top: 0; } .gfrm-m-2026-perfume .gfrm-copy h2 { line-height: 1.12; } .gfrm-join-2026-c { left: 948px; top: 841px; } .gfrm-div-2026-c { left: 958px; top: 805px; height: 94px; } .gfrm-m-2026-beer { left: 984px; top: 798px; width: 300px; height: 115px; } .gfrm-m-2026-beer img { left: 0; top: 0; width: 66px; height: 98px; } .gfrm-m-2026-beer .gfrm-copy { left: 70px; top: 14px; } /* Product illustrations always stay visible and in the same position. */ .gfrm-group.gfrm-highlight, .gfrm-group.gfrm-dimmed { transform: none; filter: none; opacity: 1; } /* Decorative clouds */ .gfrm-cloud { position: absolute; z-index: 1; width: 40px; height: 15px; border: 1.6px solid #303236; border-radius: 10px 10px 8px 8px; background: #d9f2fb; } .gfrm-cloud::before, .gfrm-cloud::after { content: ""; position: absolute; background: #d9f2fb; border: 1.6px solid #303236; border-bottom: 0; border-radius: 50% 50% 0 0; } .gfrm-cloud::before { width: 18px; height: 15px; left: 6px; top: -11px; } .gfrm-cloud::after { width: 14px; height: 11px; right: 5px; top: -7px; } .gfrm-cloud-a { left: 312px; top: 325px; transform: scale(.9); } .gfrm-cloud-b { left: 1349px; top: 411px; transform: scale(.9); } .gfrm-cloud-c { left: 1166px; top: 756px; transform: scale(.9); } .gfrm-plus { position: absolute; z-index: 1; font: 700 28px/1 Arial, sans-serif; color: #303236; } .gfrm-plus-a { left: 179px; top: 374px; } .gfrm-plus-b { right: 53px; top: 329px; } .gfrm-plus-c { left: 80px; top: 783px; } .gfrm-reveal { opacity: 0; } .gfrm-reveal.gfrm-visible { opacity: 1; } .gfrm-year.gfrm-reveal { transition: opacity .42s ease, transform .42s ease, box-shadow .2s ease; } .gfrm-item.gfrm-reveal { transition: opacity .48s ease, transform .48s ease, filter .25s ease; } @media (prefers-reduced-motion: reduce) { .gfrm-wrap *, .gfrm-wrap *::before, .gfrm-wrap *::after { animation: none !important; transition: none !important; } .gfrm-reveal { opacity: 1; transform: none; } }