/* Light theme overrides, scoped to body.home-light so pages that don't opt in (by adding the class + this stylesheet) stay on the original dark theme. Started as home-page-only; about.blade.php now shares it too — most rules below key off component classes (cards, accordions, hero sections) rather than page-specific ones, so they apply to any page that adopts the class. Page-specific exceptions are labeled as such. Loaded after main.css. */ body.home-light { --bg: #FFFAFF; --bg-2: #E7EEF8; --text: #5A5F66; /* Six-color brand palette (owner-supplied): blue + navy carry the primary/secondary theme role read by ~300 rules across main.css (buttons, underlines, icons, hover states, gradients); red/teal/amber are not threaded through those shared rules — they're used as a rotating accent set on the home page's icon groups (Mission/Vision/ Values, About feature tiles) so the page reads as multi-color glass rather than flat two-tone. See the accent-rotation rules below. */ --theme: #11418A; --theme-2: #102E4A; --accent-red: #B50917; --accent-teal: #52AA8A; --accent-amber: #B1740F; } /* Page background — pushed noticeably further still (per feedback that the previous pass was still reading as plain white): bigger glow radii and roughly double the opacity again, so the blue/red mix is clearly visible rather than a subtle hint. */ body.home-light { background-color: var(--bg); background-image: radial-gradient(1400px 800px at 12% 0%, rgba(17, 65, 138, 0.32), transparent 65%), radial-gradient(1400px 800px at 88% 10%, rgba(16, 46, 74, 0.28), transparent 65%), radial-gradient(1300px 800px at 92% 68%, rgba(181, 9, 23, 0.26), transparent 65%), radial-gradient(1300px 800px at 6% 88%, rgba(181, 9, 23, 0.22), transparent 65%), radial-gradient(1000px 700px at 50% 45%, rgba(17, 65, 138, 0.1), transparent 70%); background-attachment: fixed; } /* Shared glass-card treatment: translucent, blurred, softly bordered. Used by cards on other home-light pages (about/services/products/etc) and, below, extended to the home page's own flat/dark elements so the whole site reads as one consistent "glass" surface. */ body.home-light .manager-card, body.home-light .quality-content, body.home-light .expansion-box, body.home-light .activity-card, body.home-light .marker-label, body.home-light .market-location-card, body.home-light .value-card, body.home-light .news-box-items, body.home-light .mvv-card, body.home-light .game-feature-box-items, body.home-light .about-feature, body.home-light .foundation-card { background: rgba(255, 255, 255, 0.55); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); border: 1px solid rgba(255, 255, 255, 0.7); box-shadow: 0 8px 32px rgba(16, 46, 74, 0.1); } body.home-light h1, body.home-light h2, body.home-light h3, body.home-light h4, body.home-light h5, body.home-light h6 { color: #14161A; } /* main.css's base h1/h2 rules carry letter-spacing tuned for their huge desktop font-sizes (h1: -3.2px at 140px, h2: -1.04px at 52px) as a fixed px value — every component that shrinks the font-size for mobile (nearly every hero heading and section-title h2 sitewide) inherits that same absolute value, which only gets proportionally more severe as the font shrinks, crushing the letters together at small sizes. Reset sitewide below the width where most component-level mobile font-size overrides kick in, instead of chasing every individual component. */ @media (max-width: 991px) { body.home-light h1, body.home-light h2 { letter-spacing: normal; } } body.home-light p { color: var(--text); } body.home-light a { color: #14161A; } /* Primary CTA buttons — gradient mixes the palette's red with the theme blue instead of the usual blue→navy, so buttons read as a distinct, punchy accent rather than blending into the same blue used for links, underlines, and icons everywhere else. Kept to small button-sized elements on purpose — red+blue as a full background/section would read as a flag rather than a brand accent (see everything else, which stays blue/navy). */ body.home-light .theme-btn { background: linear-gradient(90deg, var(--accent-red) 0%, var(--theme) 100%); color: var(--white); } /* main.css's hover effect is a circular wipe (::before/::after, both background: var(--white)) that expands to fully cover the button, with text flipping to black — on the old dark theme a white button was a normal contrast swap, but on this red→blue gradient it just erases the button's color entirely. Wipe reveals navy instead, so hover still reads as "this button" rather than flashing to a plain white pill. */ body.home-light .theme-btn::before, body.home-light .theme-btn::after { background: var(--theme-2); } body.home-light .theme-btn:hover { color: var(--white); } /* Main nav links, search/hamburger icon buttons. The live header markup renders as header.header-2.header-3, whose own main.css rule (.header-2.header-3 .header-main .main-menu ul li a) has 4 classes — higher specificity than a plain .header-main .main-menu selector, so it must be matched explicitly here to win. */ /* The header (.header-2.header-3) has no background of its own in main.css at all — position:absolute, fully transparent, relying entirely on whatever hero sits behind it for legibility. That's fragile (proven by trying a light hero earlier: nav text is hardcoded white below, so it went invisible white-on-white) — giving it its own navy gradient makes the nav legible regardless of what any given page's hero looks like, matching the reference's header look at the same time. Left stop solid navy, right stop fades to fully transparent (owner- supplied gradient) so the header blends into each page's hero on the right side instead of reading as a hard bar. */ body.home-light .header-2.header-3 { background: linear-gradient(90deg, #174087 50%, #d0d1da00 100%); } /* Once .sticky kicks in on scroll it becomes a white glass bar (see `.sticky` rule further down) and needs dark text instead. */ body.home-light .header-2.header-3 .header-main .main-menu ul li a, body.home-light .header-main .main-menu ul li > a { color: var(--white); } /* Hover was var(--theme) — the same navy-blue as the header's own gradient background, so hovered nav text just blended in and looked like it disappeared. Red gives it actual contrast against the header. Uses a brighter red than var(--accent-red), which reads too dark on the navy header. */ body.home-light .header-2.header-3 .header-main .main-menu ul li a:hover, body.home-light .header-main .main-menu ul li > a:hover { color: #FF3B47 !important; } body.home-light .sticky.header-2.header-3 .header-main .main-menu ul li a, body.home-light .sticky .header-main .main-menu ul li > a { color: #FFFFFF; } body.home-light .header-1 .bar-icon .search-toggler, body.home-light .header-1 .bar-icon .sidebar__toggle, body.home-light .header-2.header-3 .header-right .header-right-icon .search-toggler, body.home-light .header-2.header-3 .header-right .header-right-icon .sidebar__toggle { border-color: rgba(255, 255, 255, 0.2); } body.home-light .sticky .bar-icon .search-toggler, body.home-light .sticky .header-right-icon .search-toggler, body.home-light .sticky .header-right-icon .sidebar__toggle { border-color: rgba(255, 255, 255, 0.25); } body.home-light .main-header__search, body.home-light .sidebar__toggle { color: var(--white); } body.home-light .sticky .main-header__search, body.home-light .sticky .sidebar__toggle { color: #FFFFFF; } /* The hamburger icon itself is an (ber-2.svg, hardcoded fill="white" inside the file) rather than a font icon, so the color rules above don't touch it. No filter needed in either state now — the sticky bar went back to a dark navy glass (was briefly white, which needed the icon inverted to black; that override is gone now that white-on-navy is correct in both states). */ /* "Pages" dropdown submenu — was dark-on-dark, now a light panel. Solid (not translucent) on purpose: this sits over whatever section is scrolled behind the header, including the site's still-dark bands (hero, leadership, footer), and any transparency there was letting enough dark content bleed through to wash out the dark dropdown text. */ /* main.css opens the dropdown only while the parent
  • is :hover'd (.main-menu ul li:hover > .submenu), and positions the panel at top:115% — a real gap below the link, not just visual spacing. Moving the mouse from the link down into the panel crosses that gap, which belongs to neither element, so :hover drops and the menu closes before it can be reached. Flush against the link (top:100%) removes the dead zone entirely. */ body.home-light .header-main .main-menu ul li .submenu { background-color: #FFFFFF; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12); top: 100%; } /* Dropdowns (Services mega-menu, Partners submenu) get a full border painted with the exact same red/blue radial-gradient recipe as the page background (body.home-light background-image above), instead of just the plain single-color border-top main.css gives them. border-image can't stack multiple gradient layers the way background-image can, so this uses the standard two-layer background trick instead: an opaque white fill clipped to the padding-box (the dropdown's actual panel background) sits on top of the gradient clipped to the border-box (only visible in the border ring). */ body.home-light .header-main .main-menu ul li .submenu { border: 10px solid transparent; background-image: linear-gradient(#fff, #fff), radial-gradient(1400px 800px at 12% 0%, rgba(17, 65, 138, 0.9), transparent 65%), radial-gradient(1400px 800px at 88% 10%, rgba(16, 46, 74, 0.85), transparent 65%), radial-gradient(1300px 800px at 92% 68%, rgba(181, 9, 23, 0.85), transparent 65%), radial-gradient(1300px 800px at 6% 88%, rgba(181, 9, 23, 0.8), transparent 65%), radial-gradient(1000px 700px at 50% 45%, rgba(17, 65, 138, 0.5), transparent 70%); background-origin: border-box, border-box, border-box, border-box, border-box, border-box; background-clip: padding-box, border-box, border-box, border-box, border-box, border-box; } /* The nav-link white-text rule above (.header-2.header-3 .header-main .main-menu ul li a) has 5 classes; this selector only had 4, so despite coming later in the file it LOST the specificity fight and the white rule kept winning — dropdown/mega-menu links stayed white on the now- white panel background, effectively invisible. Repeating the same .header-2.header-3-prefixed form here (6 classes) guarantees this wins instead. */ body.home-light .header-2.header-3 .header-main .main-menu ul li .submenu li a, body.home-light .header-main .main-menu ul li .submenu li a { color: #14161A; } body.home-light .sticky { background-color: rgba(16, 46, 74, 0.85) !important; -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.15); } body.home-light .manager-card p, body.home-light .quality-content p, body.home-light .expansion-box p, body.home-light .activity-card p { color: #666; } /* Current Market (world map) section — was a hardcoded dark band, then flattened to plain white, which blocked the page's ambient soft-gradient background (the radial glows set on body.home-light) from showing through this section, making it look flatter than the rest of the page. Now just inherits the shared page background (body.home-light) instead of its own separate, much-weaker gradient, so it's consistent with every other section instead of looking flatter/lighter than its neighbors. Still needs its own position:relative for the map glow below. */ /* main.css hardcodes this section to #101010 — the map.png itself is fully transparent outside its landmass shapes (verified via its alpha channel), so that black was showing through as a flat black block behind the whole section, not just the map. Dropped in favor of the shared page background used everywhere else; a dark gradient scoped to just the map (below) replaces it there instead of going flat light. */ body.home-light .current-market-section { position: relative; background: transparent; } /* h6 was forced white to read on the old black section background — with that gone, the default themed color (var(--theme), same as every other section-title h6) reads fine on the light body again. */ body.home-light .current-market-section .section-title h2 .text-accent-red { color: var(--accent-red); } /* Map's own PNG is transparent outside the continents, so it needs a dark surface behind it for the markers/labels/legibility this section was designed around — but scoped tight to the map itself (not the whole section) and faded via gradient so it blends into the page background at its edges instead of reading as a hard black box. */ body.home-light .map-container::before { content: ""; position: absolute; inset: -60px; z-index: -1; border-radius: 24px; background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.25) 55%, transparent 80%); } body.home-light .current-market-section img { filter: none !important; } body.home-light .marker-label small { color: #666; } /* Location cards asked to run white text — that's unreadable on the shared light-glass card background every other card uses, so these three get their own dark-glass variant (navy, translucent) instead of just flipping the text color on a light surface. */ body.home-light .market-location-card { background: rgba(16, 46, 74, 0.75); border: 1px solid rgba(255, 255, 255, 0.15); } body.home-light .market-location-card h4 { color: #FFFFFF; } body.home-light .market-location-card p { color: rgba(255, 255, 255, 0.8); } /* Business Strategy / Classification / Porter's Value Chain cards */ body.home-light .value-card p { color: #666; } body.home-light .news-box-items .content h3 a { color: #14161A; } body.home-light .news-box-items .content span { color: #777; } /* Hero (hero-3) — light background matching the reference (the right/text side is white/pale-blue, not navy). This is now safe to do because the header above has its own explicit background (see the header rule above) instead of depending on this section being dark — that dependency is what broke nav legibility the first time this was tried. The bottom feature strip similarly gets its own explicit navy background below, rather than relying on the hero's color. */ body.home-light .hero-section.hero-3 { z-index: 0; overflow: hidden; } body.home-light .hero-3 .top-shape, body.home-light .hero-3 .right-shape, body.home-light .hero-3 .radius-shape { display: none; } body.home-light .hero-3 .hero-content h6 { color: var(--accent-red); } body.home-light .hero-3 .hero-content h1 { color: #102E4A; } body.home-light .hero-3 .hero-content h1 span { color: var(--accent-red); } /* Description paragraph moved out of .video-content (previously sat beside the play button; the reference has it as its own line right under the heading, with a short "Watch Video" label next to the button instead). New class, no existing main.css rule to conflict with. */ body.home-light .hero-3 .hero-description { color: #5A5F66; max-width: 420px; margin-top: 20px; margin-bottom: 30px; } body.home-light .hero-3 .right-item .dot-number .dot-num span { color: rgba(16, 46, 74, 0.35); } /* Play button — blue/white gradient background (was solid blue), white play icon, dashed red ring around it. */ body.home-light .hero-3 .video-content .video-btn { background: linear-gradient(135deg, var(--theme) 50%, #FFFFFF 100%); outline: 2px dashed var(--accent-red); outline-offset: 6px; color: #FFFFFF; } body.home-light .hero-3 .video-content { gap: 15px; } /* "Watch Video" label replacing the old paragraph beside the button — short text with a red underline, matching the reference. */ body.home-light .hero-3 .video-content .watch-video-label { color: #102E4A; font-weight: 700; font-size: 15px; padding-bottom: 4px; border-bottom: 2px solid var(--accent-red); } body.home-light .hero-3 .right-item .dot-number .swiper-pagination-bullet-active .dot-num span { color: var(--accent-red); } /* Hero slider prev/next — recolored to a blue/red pair (matching the reference design) instead of white/dark-gray, with white icons on both so they read clearly on any of the three. */ body.home-light .hero-3 .right-item .array-btn .array-prev { background-color: var(--theme); } body.home-light .hero-3 .right-item .array-btn .array-prev svg path { fill: #FFFFFF; } body.home-light .hero-3 .right-item .array-btn .array-next { background-color: var(--accent-red); } body.home-light .hero-3 .right-item .array-btn .array-next svg path { fill: #FFFFFF; } body.home-light .hero-3 .right-item .array-btn .array-prev:hover { background-color: var(--accent-red); } body.home-light .hero-3 .right-item .array-btn .array-next:hover { background-color: var(--theme); } body.home-light .hero-3 .row.g-4 { --bs-gutter-x: 0; } /* Outer container padding (60px both sides in main.css) was leaving a visible gutter of raw section background around the photo instead of it bleeding to the edge. Removed on the left; kept as inner padding on the text column instead so that content doesn't touch the right edge. */ body.home-light .hero-3 .container-fluid { padding-left: 0; position: relative; z-index: 2; } body.home-light .hero-3 .col-xl-4 { padding-right: 60px; } @media (max-width: 1199px) { body.home-light .hero-3 .container-fluid { padding-left: 30px; } body.home-light .hero-3 .col-xl-4 { padding-right: 15px; } } /* Home hero images (assets/img/index/hero/*.png) are drawn with a transparent right third — product art fills the left ~60%, leaving room for .hero-content's text to read as if it sits inside the image itself. On mobile the image is a full-bleed BACKGROUND (not just its own column's aspect-ratio box) — .hero-image-slider is pulled out of the column via position:absolute + inset:0 and cropped with object-fit:cover to exactly fill .container-fluid, however tall that ends up being; the text column is laid out the same way as a second layer over it, right-aligned over the image's transparent zone. Both anchor to .container-fluid specifically (already position:relative from the unconditional rule above) rather than the whole section — .hero-3 also wraps .hero-feature-strip and .right-item below/after this row, and anchoring the background to the SECTION would have stretched the photo down behind the feature strip too, instead of ending where the hero content ends and letting the strip render as its own band after it. .container-fluid gets an explicit min-height since, with both columns taken out of flow, nothing would otherwise be left to size it. Scoped to .home-hero-3 (index.blade.php only) rather than bare .hero-3, since about/service/product-category reuse .hero-3 with single opaque static photos that have no transparent zone for text to sit in, and are already tuned for their own (reversed) column order. */ @media (max-width: 1199px) { /* .hero-3's own 150px top/bottom padding (inherited from main.css's shared rule, unconditional for every .hero-3 variant) pushed .hero-feature-strip another 150px down from the hero content and left 150px of empty space above it too — dropped in favor of .container-fluid's own min-height below, which now does the job of sizing the hero band precisely. */ body.home-light .home-hero-3 { padding-top: 0; padding-bottom: 0; } /* Taller than the original 480px — the wrapped heading + video button + CTA button stacked in the overlay column (below) need more vertical room than that left, and were overflowing past this box into .hero-feature-strip underneath. */ body.home-light .home-hero-3 .container-fluid { min-height: 680px; } /* Layer 1: image, stretched to cover .container-fluid as a background instead of sitting in its own column box at its own aspect ratio. Only the outer .swiper container (.hero-image-slider) and the plain wrapper div (.hero-image) are repositioned — .swiper-wrapper/.swiper-slide are left alone. Swiper manages those two internally (a flex row of slides translated horizontally via JS-driven transform to bring each one into view); forcing them to position:absolute too fights that mechanism and was what actually made the image disappear on an earlier pass. Giving the outer container a real, definite height (100% of the now min-height'd .container-fluid) is enough on its own — Swiper sizes its wrapper and slides to fill it. */ body.home-light .home-hero-3 .hero-image-slider { position: absolute; inset: 0; width: 100%; height: 100%; } body.home-light .home-hero-3 .hero-image-slider .swiper-wrapper, body.home-light .home-hero-3 .hero-image-slider .swiper-slide, body.home-light .home-hero-3 .hero-image { height: 100%; } body.home-light .home-hero-3 .hero-image img { width: 100%; height: 100%; object-fit: cover; } /* Layer 2: text, over the image, anchored to .container-fluid the same way. */ /* Widened from 42% and padding trimmed from 20px — the narrower column was forcing headlines into many wrapped lines, which combined with the white card's own padding (below) made the stacked column (heading + video button + CTA) taller than the hero band could hold. */ body.home-light .home-hero-3 .col-xl-4 { position: absolute; top: 0; bottom: 0; right: 0; width: 80%; max-width: 80%; display: flex; flex-direction: column; justify-content: center; padding-right: 14px; z-index: 3; } /* Dot-pagination + prev/next arrows (.right-item) are a direct child of the SECTION, not of .container-fluid — a sibling can't share another sibling's containing block, so they're still positioned against the section as a whole. Now that the section's height is just the hero band plus .hero-feature-strip stacked after it, their old bottom:0 (main.css, ≤575px) would land them over the strip instead of the photo. Hidden on mobile rather than chased with a matching offset — the image swiper is still swipeable by touch without them. */ body.home-light .home-hero-3 .right-item { display: none; } /* Text now sits directly over the photo (the overlay layer above) rather than beside it on the plain section background — a white card behind it keeps the heading legible regardless of what's in the image behind that spot. */ body.home-light .home-hero-3 .hero-content { background: #FFFFFF; padding: 26px 24px; min-height: 130px; border-radius: 10px; } /* letter-spacing:-3.2px is the base h1 rule (main.css), sized for the desktop 70px heading — at this small a font-size that negative value crushes the letters into each other instead. */ body.home-light .home-hero-3 .hero-content h1 { font-size: 22px; line-height: 1.5; letter-spacing: normal; } body.home-light .home-hero-3 .hero-content h6 { font-size: 12px; letter-spacing: 0.8px; margin-bottom: 8px; } body.home-light .home-hero-3 .hero-description { display: none; } /* main.css turns the video button into its own position:absolute overlay (right:7-14%, top:20-22%) below 991px, meant to float it over a full-width stacked hero image directly — now that .col-xl-4 itself is the overlay, that second absolute box just fights the first one. Restored to the same in-flow flex layout desktop uses instead, inside the text layer, sized down to fit. */ body.home-light .home-hero-3 .video-content .video-btn { position: static; width: 34px; height: 34px; line-height: 34px; font-size: 12px; } body.home-light .home-hero-3 .video-content { margin-top: 10px; gap: 8px; } body.home-light .home-hero-3 .video-content .watch-video-label { font-size: 10px; } /* "Explore products" — fixed height:52px + overflow:hidden (for the hover-wipe circle) clips wrapped text to one line; the button's natural width (padding: 0 30px plus the text) is wider than this overlay column, so at that fixed height a wrapped second line would just be cut off. Auto height + smaller padding/font lets it wrap cleanly instead. */ body.home-light .home-hero-3 a.theme-btn.mt-4 { height: auto; line-height: 1.3; padding: 8px 14px; font-size: 11px; white-space: normal; margin-top: 10px; } } @media (max-width: 575px) { body.home-light .home-hero-3 .container-fluid { min-height: 620px; } body.home-light .home-hero-3 .col-xl-4 { width: 86%; max-width: 86%; padding-right: 10px; } body.home-light .home-hero-3 .hero-content { padding: 18px 18px; min-height: 100px; } body.home-light .home-hero-3 .hero-content h1 { font-size: 18px; line-height: 1.5; letter-spacing: normal; } } /* About hero's text column sat at the plain grid position, further right than the home hero's — there, .hero-slider (wrapping the text) carries its own margin-left:-300px pulling it left, over the image column edge. This page has no slider wrapper (single static image, no carousel), so the same pull is applied directly to the column instead (owner asked for a slightly smaller -200px here, plus center-aligned text, rather than matching home's left-aligned copy exactly). */ body.home-light .about-hero-3 .col-xl-4 { margin-left: -200px; text-align: center; position: relative; z-index: 2; } /* Pulling the column left with a negative margin (above) means it now overlaps the image column's right edge — at Bootstrap's stock col-xl-4 width (33.33%) that overlap ate into the heading/paragraph's own space, and with no stacking context of its own, it was sitting under the image in places. Widening it (scoped to the same min-width:1200px Bootstrap uses for col-xl-4 itself, so smaller viewports are untouched) gives the centered text room to fit, with z-index above keeping it reliably on top of the photo. */ @media (min-width: 1200px) { body.home-light .about-hero-3 .col-xl-4 { width: 42%; } } body.home-light .about-hero-3 .hero-description { max-width: none; } @media (max-width: 1399px) { body.home-light .about-hero-3 .col-xl-4 { margin-left: -140px; } } @media (max-width: 1199px) { body.home-light .about-hero-3 .col-xl-4 { margin-left: 0; } } /* About page hero — same full-bleed background + text overlay mobile treatment as the home hero (see .home-hero-3 above): assets/img/about/ hero.png has the same transparent-right design as the home hero images (confirmed via alpha channel — ~253/255 opaque on the left, ~44/255 on the right third), so the same "image as background layer, text as a second layer over it" approach applies. No Swiper here though (this is a single static photo, not a carousel) — just .hero-image/.col-xl-4, none of home-hero-3's .swiper-wrapper/.swiper-slide handling needed. */ @media (max-width: 1199px) { body.home-light .about-hero-3 { padding-top: 0; padding-bottom: 0; } body.home-light .about-hero-3 .container-fluid { min-height: 640px; } body.home-light .about-hero-3 .hero-image { position: absolute; inset: 0; width: 100%; height: 100%; } body.home-light .about-hero-3 .hero-image img { width: 100%; height: 100%; object-fit: cover; } body.home-light .about-hero-3 .col-xl-4 { position: absolute; top: 0; bottom: 0; right: 0; width: 80%; max-width: 80%; display: flex; flex-direction: column; justify-content: center; padding-right: 14px; text-align: left; z-index: 3; } /* Same reasoning as .home-hero-3: text sits directly over the photo now, so a white card behind it keeps the heading legible regardless of the image content behind that spot. */ body.home-light .about-hero-3 .hero-content { background: #FFFFFF; padding: 26px 24px; min-height: 130px; border-radius: 10px; } /* line-height:1.2 (matched to how tight the desktop/tablet h1 already runs) was too tight once this wraps across several short lines in a narrow column — the lines were touching, hard to read. */ /* letter-spacing:-3.2px is the base h1 rule (main.css), sized for the desktop 70px heading — at this small a font-size that negative value crushes the letters into each other instead. */ body.home-light .about-hero-3 .hero-content h1 { font-size: 22px; line-height: 1.5; letter-spacing: normal; } body.home-light .about-hero-3 .hero-content h6 { font-size: 12px; letter-spacing: 0.8px; margin-bottom: 8px; } body.home-light .about-hero-3 .hero-description { display: none; } } @media (max-width: 575px) { body.home-light .about-hero-3 .container-fluid { min-height: 580px; } body.home-light .about-hero-3 .col-xl-4 { width: 86%; max-width: 86%; padding-right: 10px; } body.home-light .about-hero-3 .hero-content { padding: 18px 18px; min-height: 100px; } body.home-light .about-hero-3 .hero-content h1 { font-size: 18px; line-height: 1.5; letter-spacing: normal; } } /* Photo column bleeds to the section edge instead of sitting in a padded gutter — clip-path angles its inner edge to meet the text column diagonally instead of a hard vertical cut. No divider line/border along the cut per request — just the angled photo edge itself. */ body.home-light .hero-3 .hero-image-slider { clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%); } /* About page hero — reuses the home hero's .hero-3 look (this section previously had its own separate hero-2 layout: a full-bleed background photo with red decorative shapes, text centered/full-width instead of a real column). No swiper/carousel here — just one photo — so a dedicated class replicates .hero-image-slider's diagonal-cut treatment directly on .hero-image instead of reusing that class — .hero-image-slider and .hero-slider are selected by name in main.js to init the home page's 4-slide Swiper carousel, which this static hero doesn't have the markup for and doesn't want running. Same reasoning for leaving h1 without the wave-text class: that starts at opacity:0 until a swiper slide-change callback adds .active, which never fires without a swiper here. Column order here matches home's hero-3 (image col-xl-8 first/left, text col-xl-4 second/right), so the diagonal cuts into the image's RIGHT edge — same direction main.css/this file already assume (container-fluid's padding-left:0, col-xl-4's padding-right:60px). */ body.home-light .about-hero-3-image { height: 620px; clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%); } body.home-light .about-hero-3-image img { width: 100%; height: 100%; object-fit: cover; } @media (max-width: 1199px) { body.home-light .about-hero-3-image { height: 420px; clip-path: none; } } /* service.blade.php's per-service hero, and product_category.blade.php's hero, both use the same .hero-3 look but with columns in the OPPOSITE order from home's (text col-xl-4 first/left, image col-xl-8 second/ right) per owner request. Reusing .hero-3's own column CSS as-is broke here: container-fluid's padding-left:0 and col-xl-4's padding-right:60px both assume the old image-left/text-right order, so the text column had no left breathing room, and the diagonal clip-path (built to cut the image's right edge, where it met the text in that order) was cutting the wrong side — the image's left edge is what actually touches the text now. Mirrored the clip-path and added the missing left padding, scoped to these two pages only so About's hero (unchanged order) isn't affected. */ body.home-light .service-detail-hero .col-xl-4, body.home-light .product-category-hero .col-xl-4 { padding-left: 60px; } /* Mirrors home hero-3's own bleed: there the image column touches the left screen edge because container-fluid's padding-left is zeroed; here the image is on the right, so it's padding-right that needs zeroing instead for the same edge-to-edge bleed. */ body.home-light .service-detail-hero .container-fluid, body.home-light .product-category-hero .container-fluid { padding-right: 0; } body.home-light .service-hero-image, body.home-light .product-category-hero-image { height: 620px; clip-path: polygon(0 0, 100% 0, 100% 100%, 12% 100%); } body.home-light .service-hero-image img, body.home-light .product-category-hero-image img { width: 100%; height: 100%; object-fit: cover; } @media (max-width: 1199px) { body.home-light .service-detail-hero .col-xl-4, body.home-light .product-category-hero .col-xl-4 { padding-left: 15px; } body.home-light .service-hero-image, body.home-light .product-category-hero-image { height: 420px; clip-path: none; } } /* .hero-3 .hero-content h6 (main.css) carries a fixed letter-spacing:3.2px sized for its 16px desktop font — main.css shrinks that font to 13px at ≤575px but never scales the letter-spacing down with it, so the subtitle reads noticeably wider/looser than intended at small sizes. Same fix already applied to the home/about heroes' own overlay text; this covers the remaining two .hero-3 variants (service detail, product category). */ @media (max-width: 575px) { body.home-light .service-detail-hero .hero-content h6, body.home-light .product-category-hero .hero-content h6 { letter-spacing: 1px; } } /* noodle.png (ramen-noodles category) isn't a plain rectangular photo like category.png/about's/services' hero photos — it's a pre-framed graphic on a transparent square canvas with its own baked-in rounded corners and blue/red border. Same box as every other hero image (height:620px, no diagonal clip-path cutting into that existing frame) — only object-fit switches to contain so the square graphic scales down to fit inside that box without being cropped. */ body.home-light .product-category-hero-image.pre-framed-image { clip-path: none; } body.home-light .product-category-hero-image.pre-framed-image img { object-fit: contain; } /* Scattered decorative dots on "Our Foundation" — new addition (not a template component), matching the reference design's cluster of small blue/red circles along the section's lower-left edge. Hidden on smaller viewports since there's no comfortable empty margin for them once the layout narrows. */ body.home-light .foundation-dots { position: absolute; left: 40px; bottom: 70px; width: 60px; height: 90px; z-index: 1; pointer-events: none; } body.home-light .foundation-dots .dot { position: absolute; border-radius: 50%; display: block; } body.home-light .foundation-dots .dot-blue { background: var(--theme); } body.home-light .foundation-dots .dot-red { background: var(--accent-red); } body.home-light .foundation-dots .dot-light { background: rgba(17, 65, 138, 0.3); } body.home-light .foundation-dots .dot-lg { width: 22px; height: 22px; top: 0; left: 15px; } body.home-light .foundation-dots .dot-md { width: 14px; height: 14px; top: 38px; left: 0; } body.home-light .foundation-dots .dot-sm { width: 8px; height: 8px; top: 62px; left: 30px; } body.home-light .foundation-dots .dot-sm.dot-light { top: 68px; left: 8px; } @media (max-width: 991px) { body.home-light .foundation-dots { display: none; } } /* Hero bottom feature strip — new addition (not a template component), matching the reference design's row of 4 small icon call-outs along the bottom edge of the hero, on its own full-bleed navy band (independent of whatever color the rest of the hero is, same reasoning as the header fix above). Breaks out to full viewport width with the negative-margin trick since it's nested inside the padded .container-fluid. */ body.home-light .hero-feature-strip { position: relative; z-index: 2; width: 100vw; margin-left: calc(-50vw + 50%); padding: 25px 60px; display: flex; flex-wrap: wrap; gap: 20px; background: linear-gradient(90deg, var(--theme) 40%, var(--theme) 50%, rgba(255, 255, 255, 1) 66%, rgba(255, 255, 255, 0) 100%); } @media (max-width: 1199px) { body.home-light .hero-feature-strip { padding: 20px 30px; } } /* product_category_detail.blade.php reuses the same strip, but with a true opacity fade of one color (theme blue → fully transparent theme blue) instead of home's two-color version (solid blue block, then a separate white-to-transparent fade) — a plainer, single-color version of the same idea. Scoped to this page only. */ body.home-light .product-category-hero .hero-feature-strip { background: linear-gradient(90deg, var(--theme) 0%, rgba(17, 65, 138, 0) 100%); } /* Items no longer stretch to fill the row (flex:1 1 200px grew each one to fill available space, pushing the last item toward the right edge) — flex:0 0 auto keeps them at their natural size, clustered together on the left where the background is actually blue. */ body.home-light .hero-feature-item { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; } body.home-light .hero-feature-icon { flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--accent-red); color: #FFFFFF; font-size: 16px; } body.home-light .hero-feature-item span:last-child { font-size: 13px; font-weight: 600; line-height: 1.4; color: #FFFFFF; text-transform: uppercase; } /* All 4 items now cluster together on the left, where the background is solid blue (per the gradient stops above) — no need for the earlier per-item dark/light text split. */ @media (max-width: 1199px) { body.home-light .hero-feature-strip { background: var(--theme); } } /* Board Of Management (leadership section) — full-bleed photo background, keep the original light heading color so it stays legible over the photo instead of the page-wide dark heading color. */ body.home-light #leadership .section-title h6, body.home-light #leadership .section-title h2 { color: var(--white); } /* Leadership quote card — was a solid dark card (#1C1D20) floating over the section's photo background; now a translucent glass panel over that photo, the clearest "glass" moment on the page. The bold var(--theme) border (now blue) is kept as-is from main.css, just made slightly thinner isn't needed — only the background needs to go translucent. */ body.home-light .testimonial-wrapper .tetsimonial-box-items { background: rgb(0 0 0 / 90%); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); } body.home-light .testimonial-wrapper .tetsimonial-box-items .testi-content p { color: #FFFFFF; } body.home-light .testimonial-wrapper .tetsimonial-box-items .testi-content .client-info { border-top-color: rgba(255, 255, 255, 0.25); } body.home-light .testimonial-wrapper .tetsimonial-box-items .testi-content .client-info h6 { color: #FFFFFF; } /* Our Foundation — redesigned from a stack of alternating icon/text rows into a 3-column card grid (Mission/Vision/Values), custom-built (not a template component), so it's styled fresh here rather than patched from main.css leftovers. The glass-card rule above already supplies each card's background/blur/border; this adds the grid layout, hover lift, and the colored icon badges (rotating through the icon-accent-* classes set on each card in index.blade.php). */ body.home-light .foundation-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 20px; } @media (max-width: 991px) { body.home-light .foundation-grid { grid-template-columns: 1fr; } } body.home-light .foundation-card { border-radius: 20px; border-top: 3px solid transparent; padding: 45px 35px; text-align: center; transition: transform 0.35s ease, box-shadow 0.35s ease; } body.home-light .foundation-card:hover { transform: translateY(-8px); box-shadow: 0 16px 40px rgba(16, 46, 74, 0.16); } body.home-light .foundation-card h3 { margin-bottom: 15px; font-size: 26px; } body.home-light .foundation-card p { font-size: 16px; line-height: 1.7; margin: 0; } body.home-light .foundation-icon { width: 90px; height: 90px; margin: 0 auto 25px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 32px; } body.home-light .icon-accent-red.foundation-card { border-top-color: var(--accent-red); } body.home-light .icon-accent-red .foundation-icon { background: rgba(181, 9, 23, 0.1); color: var(--accent-red); } body.home-light .icon-accent-blue.foundation-card { border-top-color: var(--theme); } body.home-light .icon-accent-blue .foundation-icon { background: rgba(17, 65, 138, 0.1); color: var(--theme); } body.home-light .icon-accent-teal.foundation-card { border-top-color: var(--accent-teal); } body.home-light .icon-accent-teal .foundation-icon { background: rgba(82, 170, 138, 0.1); color: var(--accent-teal); } body.home-light .icon-accent-amber.foundation-card { border-top-color: var(--accent-amber); } body.home-light .icon-accent-amber .foundation-icon { background: rgba(177, 116, 15, 0.1); color: var(--accent-amber); } /* Home page "About" section — rebuilt as a full-bleed split hero (text left, photo right, no gutter/padding gap) with a floating feature card overlapping its bottom edge, matching a supplied reference design. None of these classes (about-hero-section/-row/-content, about-iamge-full, about-company-badge, about-feature-float) exist in main.css, so this is a fresh component, not an override. */ body.home-light .about-hero-section { padding-top: 60px; position: relative; } body.home-light .about-hero-row { min-height: 620px; position: relative; } body.home-light .about-hero-content { height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 40px 60px; } /* Matches the hero's h6/h1 text treatment (.hero-3 .hero-content h6/h1 in main.css) — same letter-spacing/uppercase/font-family on the subtitle, same large font-size scale/weight/line-height on the heading — instead of the smaller standard .section-title sizing used elsewhere on the page, so this heading carries the same visual weight as the hero's. */ body.home-light .about-hero-content .section-title h6 { color: var(--accent-red); letter-spacing: 3.2px; text-transform: uppercase; font-family: "Chakra Petch", sans-serif; padding-bottom: 8px; border-bottom: 2px solid var(--accent-red); display: inline-block; } body.home-light .about-hero-content .section-title h2 { margin-top: 15px; font-size: 70px; font-weight: 400; text-transform: uppercase; line-height: 114%; } /* Logo next to the heading — position:relative + z-index so it stays above the section's background image layer instead of being covered by it (this section has had photo backgrounds/overlays layered in and out during earlier iterations, so this is defensive rather than fixing a currently-visible bug). */ body.home-light .about-title-row { display: flex; align-items: center; gap: 20px; position: relative; z-index: 5; } /* True centering against the whole hero row (not the eyeballed right/ bottom pixel-nudge this replaced) — absolute + left:50%/translateX keeps it dead-center regardless of viewport width, heading length, or column size, none of which a fixed offset survives. Positioned against .about-hero-row (the image+heading banner) rather than the outer .about-hero-section, since that section also wraps the floating feature card below, which isn't part of what "center in the hero" means here. Taken out of .about-title-row's flex flow in the process, so it's a centered overlay on the hero rather than sitting inline next to the h2 — the h2 now gets the full column width to itself. */ body.home-light .about-title-logo { width: 270px; height: auto; position: absolute; left: 30%; top: 15%; transform: translate(-50%, -50%); z-index: 5; } @media (max-width: 1600px) { body.home-light .about-hero-content .section-title h2 { font-size: 60px; } } @media (max-width: 991px) { body.home-light .about-hero-content .section-title h2 { font-size: 50px; } } @media (max-width: 767px) { body.home-light .about-hero-content .section-title h2 { font-size: 40px; } } @media (max-width: 575px) { body.home-light .about-hero-content .section-title h2 { font-size: 30px; line-height: 115%; } } body.home-light .about-hero-content .section-title h2 .text-theme { color: var(--theme); } body.home-light .about-hero-content .section-title h2 .text-accent-red { color: var(--accent-red); } body.home-light .about-hero-content .about-text { margin-top: 20px; max-width: 480px; } /* .about-btn (the theme-btn + view-btn pair) — shared by both the home page About section and the Services page hero, since both reuse .about-hero-content — has no layout CSS of its own here. main.css only styles it under a .about-wrapper ancestor, which this markup doesn't have, so it's relying purely on default inline-block/inline-flex flow with just a text-node whitespace gap between the two buttons. At their full desktop size (52px tall, 30px horizontal padding, full-length text) the combined width is wider than a phone's content column, so the second button wraps onto its own line instead of sitting beside the first. Explicit flex + smaller buttons keeps both on one row on mobile. */ @media (max-width: 575px) { body.home-light .about-hero-content .about-btn { display: flex; flex-wrap: nowrap; gap: 10px; } body.home-light .about-hero-content .about-btn .theme-btn, body.home-light .about-hero-content .about-btn .view-btn { height: 42px; line-height: 42px; padding: 0 14px; font-size: 12px; } } body.home-light .about-iamge-full { height: 100%; } body.home-light .about-iamge-full img { width: 100%; height: 100%; object-fit: cover; object-position: right center; display: block; } @media (max-width: 991px) { body.home-light .about-hero-row { min-height: 0; } body.home-light .about-iamge-full { height: 320px; } body.home-light .about-hero-content { padding: 40px 30px; } /* .about-title-logo centers itself over the whole .about-hero-row, which is correct on desktop (the row's height IS the image's height there), but once the columns stack (text on top, .about-iamge-full's fixed 320px below it) the row is much taller than just the image, landing the logo over the heading/paragraph text instead of the photo. Hidden on mobile rather than repositioned. */ body.home-light .about-title-logo { display: none; } } /* Logo seal + company name, sitting under the description. */ body.home-light .about-company-badge { display: flex; align-items: center; gap: 18px; margin-top: 30px; } body.home-light .about-company-badge img { width: 80px; height: 80px; flex-shrink: 0; } body.home-light .about-company-badge-text { font-family: "Days One", serif; font-size: 22px; color: #102E4A; text-transform: none; line-height: 1.3; } body.home-light .about-company-badge-text em { display: block; font-style: normal; font-size: 14px; font-family: "Chakra Petch", sans-serif; letter-spacing: 1px; color: var(--accent-amber); } body.home-light .about-company-badge-text em::before, body.home-light .about-company-badge-text em::after { content: "—"; margin: 0 8px; color: var(--accent-amber); } /* Floating feature card — overlaps the bottom edge of the hero row above it via negative margin, sitting on top of both the photo and the page background beneath. */ body.home-light .about-feature-float { position: relative; z-index: 3; margin-bottom: 80px; background: #FFFFFF; border-radius: 16px; box-shadow: 0 20px 50px rgba(16, 46, 74, 0.18); overflow: hidden; } /* Reused .about-feature component, but as plain columns inside one continuous white card instead of individual glass tiles — cancels the shared glass-card background/border/shadow from the rule near the top of this file for this context specifically, and adds a vertical divider between columns instead. */ body.home-light .about-feature-float .about-feature { background: none; backdrop-filter: none; -webkit-backdrop-filter: none; border: none; border-right: 1px solid rgba(16, 46, 74, 0.1); box-shadow: none; border-radius: 0; height: 100%; padding: 36px 28px; } body.home-light .about-feature-float .col-md-3:last-child .about-feature { border-right: none; } body.home-light .about-feature-float .about-feature h5 { color: #102E4A; } /* Circular tinted icon badge (reference shows a light-tinted circle behind each icon, not a bare icon glyph) — overrides the plain font-size-only icon styling used by the other .about-feature context (the text column's 4-up feature grid, still bare icons there). */ body.home-light .about-feature-float .about-feature > i { width: 56px; height: 56px; font-size: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } body.home-light .about-feature-float .about-feature.icon-accent-blue > i { background: rgba(17, 65, 138, 0.1); color: var(--theme); } body.home-light .about-feature-float .about-feature.icon-accent-red > i { background: rgba(181, 9, 23, 0.1); color: var(--accent-red); } @media (max-width: 767px) { body.home-light .about-feature-float { margin-top: 30px; } body.home-light .about-feature-float .about-feature { border-right: none; border-bottom: 1px solid rgba(16, 46, 74, 0.1); } body.home-light .about-feature-float .col-md-3:last-child .about-feature { border-bottom: none; } } /* About feature tiles (Global Import & Export / Strategic Partnerships / Premium Brands / Certified Excellence) had no card treatment at all — bare icon + text floating on the page background. The glass-card rule above gives them a surface; icon colors rotate through the full 4-color accent set for the same multi-color-glass effect as Our Foundation. */ body.home-light .about-feature { display: flex; gap: 20px; align-items: flex-start; padding: 24px; border-radius: 16px; height: 100%; } body.home-light .about-feature > i { font-size: 28px; flex-shrink: 0; } /* Matched via the icon-accent-* class added to each tile in index.blade.php — each tile sits in its own single-child column div, so :nth-of-type can't tell them apart (every one of them is "1st of type" relative to its own unique parent column). */ body.home-light .about-feature.icon-accent-blue > i { color: var(--theme); } body.home-light .about-feature.icon-accent-red > i { color: var(--accent-red); } body.home-light .about-feature.icon-accent-teal > i { color: var(--accent-teal); } body.home-light .about-feature.icon-accent-amber > i { color: var(--accent-amber); } /* Business Activities (champion-section slider) — full-bleed dark photo background, keep the original light text treatment. */ body.home-light .champion-section h1, body.home-light .champion-section h2, body.home-light .champion-section h3, body.home-light .champion-section h4, body.home-light .champion-section h5, body.home-light .champion-section h6, body.home-light .champion-section > .container p { color: var(--white); } /* Section height was jumping a few pixels each time a new slide became active: main.css adds a 3px border to .champion-card-item only on .swiper-slide-active (border adds to the box's total rendered height by default, taking it from 456px to 462px), and mid-transition the active class can briefly be on a different slide or none at all — so the swiper wrapper's height (based on its tallest child) flickered. box-sizing:border-box makes the border draw inside the existing height budget instead of adding to it, and a fixed height on the slider itself removes any remaining dependency on child content height. */ body.home-light .champion-card-item { box-sizing: border-box; } body.home-light .champion-section .card-slider { height: 486px; overflow: hidden; } body.home-light .champion-card-item .champion-content p { color: #ABABAB; } body.home-light .champion-card-item .champion-content h4 { color: var(--white); } /* Slider's "next" arrow button — its SVG hardcodes fill="var(--theme)" directly in the markup, so the arrow was always the same color as its own circular background (invisible icon) regardless of what --theme was set to. Flip it: white arrow by default, theme-colored arrow once the button itself flips to a white background on hover. */ body.home-light .champion-section .array-btn .array-next svg path { fill: var(--white); } body.home-light .champion-section .array-btn .array-next:hover svg path { fill: var(--theme); } /* Photo scrim over the background image was a neutral black gradient — tinted navy instead so the darkened photo still reads as part of the blue/navy theme rather than a generic dark overlay. */ body.home-light .champion-section::before { background: linear-gradient(180deg, rgba(16, 46, 74, 0.75) 0%, rgba(16, 46, 74, 0.55) 40%, rgba(16, 46, 74, 0.85) 100%); } /* Quality Assurance icon list — each
  • had no card of its own (icon + text floating directly on the page); wrapped in the same glass tile as the rest of the page. The top/bottom divider rules and their sliding accent line were rgba(255,255,255,.2)/hardcoded dark-theme red (#CD2E3A) — flipped to a dark-alpha divider and the new blue theme. */ body.home-light .gt-icon-list li { background: rgba(255, 255, 255, 0.55); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); border: 1px solid rgba(255, 255, 255, 0.7); box-shadow: 0 8px 32px rgba(16, 46, 74, 0.1); border-radius: 14px; padding: 20px; align-items: center; } body.home-light .gt-gaming-feature-wrapper .gt-gaming-feature-content .gt-icon-list { border-top-color: rgba(20, 22, 26, 0.12); border-bottom-color: rgba(20, 22, 26, 0.12); gap: 20px; } body.home-light .gt-gaming-feature-wrapper .gt-gaming-feature-content .gt-icon-list::before, body.home-light .gt-gaming-feature-wrapper .gt-gaming-feature-content .gt-icon-list::after { background: linear-gradient(90deg, var(--theme) 30%, rgba(20, 22, 26, 0) 100%); } body.home-light .gt-gaming-feature-wrapper .gt-gaming-feature-content .gt-icon-list li .gt-content span { color: var(--text); } /* Quality Assurance section's photo collage (machine.png + red accent shape + worker.png inset) — main.css only resets .gt-gaming-feature-image and .gt-red-shape's max-width to "initial" below 1199px, and never touches .gt-bike-image at all. .gt-bike-image has no width of its own (only max-width:516px), and its img is width:100% of a 1672px-wide source photo, so the browser's shrink-to-fit sizing renders it at the full 516px cap regardless of viewport — on a mobile column (~345px on a 375px phone) that's wider than the column itself, overflowing well past the section edge. .gt-red-shape's margin-left:150px is likewise never reduced, pushing it mostly off-screen too. Both are purely decorative layers on top of the main machine photo, so simplest fix is dropping them below the breakpoint where main.css already stops sizing them properly, leaving the single clipped machine photo (which does resize correctly) as the mobile image. */ @media (max-width: 1199px) { body.home-light .gt-red-shape, body.home-light .gt-bike-image { display: none; } } /* FAQ accordion cards — previously reset to the dark-theme card color so they'd stand out against the light page; now glass, matching the rest of the home page. main.css's own .accordion-item selector has 4 classes (higher specificity than a plain .accordion-item override), so this repeats the full selector chain to win. The collapsed-state label and arrow icon were still hardcoded to white for the old dark card and need a dark equivalent. */ body.home-light .gt-faq-wrapper .gt-faq-item .gt-faq-content .accordion-item { background: rgba(255, 255, 255, 0.55); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); border: 1px solid rgba(255, 255, 255, 0.7); box-shadow: 0 8px 32px rgba(16, 46, 74, 0.1); } /* These 3 rules were previously written as `.gt-faq-section .accordion-header .accordion-button` etc — only 4-5 classes deep, so main.css's own much longer chain (.gt-faq-wrapper .gt-faq-item .gt-faq-content .accordion-item .accordion-header .accordion-button..., 6-7 classes) always won instead, silently no-op'ing this whole block. The white collapsed-question text and white chevron icon were never actually overridden — repeating the full chain here so these actually take effect. */ body.home-light .gt-faq-wrapper .gt-faq-item .gt-faq-content .accordion-item .accordion-header .accordion-button::after, body.home-light .gt-faq-wrapper .gt-faq-item .gt-faq-content .accordion-item .accordion-header .accordion-button.collapsed { color: #14161A; } body.home-light .gt-faq-wrapper .gt-faq-item .gt-faq-content .accordion-item .accordion-header .accordion-button, body.home-light .gt-faq-wrapper .gt-faq-item .gt-faq-content .accordion-item .accordion-header .accordion-button.collapsed, body.home-light .gt-faq-wrapper .gt-faq-item .gt-faq-content .accordion-item .accordion-collapse .accordion-body { background-color: transparent; } /* "Need Any Help" card — was a solid near-black card (#0B0E13); now the same glass treatment as the accordion cards beside it, with its hardcoded-white text/border flipped to dark equivalents. */ body.home-light .gt-faq-section .gt-contact-bg { background: rgba(255, 255, 255, 0.55); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); border: 1px solid rgba(255, 255, 255, 0.7); box-shadow: 0 8px 32px rgba(16, 46, 74, 0.1); } body.home-light .gt-faq-wrapper .gt-contact-bg .gt-contact-content h3 { color: var(--theme); } body.home-light .gt-faq-section .gt-contact-bg .gt-contact-content p, body.home-light .gt-faq-section .gt-contact-bg .gt-contact-content .gt-contact-item .gt-list li, body.home-light .gt-faq-section .gt-contact-bg .gt-contact-content .gt-contact-item .gt-list li span, body.home-light .gt-faq-section .gt-contact-bg .gt-contact-content .gt-contact-item .gt-list li a { color: #14161A; } body.home-light .gt-faq-section .gt-contact-bg .gt-contact-content p { border-bottom-color: rgba(20, 22, 26, 0.12); } body.home-light .gt-faq-section .gt-contact-bg .gt-contact-content .gt-contact-item .gt-icon { border-color: rgba(20, 22, 26, 0.12); } /* col-lg-8 (accordion) / col-lg-4 (.gt-contact-bg) stack below 992px — main.css never gives .gt-contact-bg a margin-top of its own, so it sat flush against the accordion above it with no gap once stacked. */ @media (max-width: 991px) { body.home-light .gt-faq-section .gt-contact-bg { margin-top: 30px; } } /* Footer — briefly lightened to match the rest of the page, but that made it blend into the body above with no visual close to the page. Back to a dark band on purpose now, as a bookend to the navy hero at the top (dark hero → light body → dark footer is the intended rhythm), using the palette's navy instead of the old theme's near-black. main.css already hardcodes light text/link colors for most footer elements (built for a dark footer originally), so those need no touching — only the pieces this file forced dark for the light-footer experiment need reverting, plus the icon circles get a glass-on-navy treatment instead of their old solid dark-gray. */ body.home-light .footer-section::before { background: linear-gradient(180deg, #102E4A 0%, #0C2338 100%); } @media (max-width: 767px) { body.home-light .footer-top-wrapper .footer-logo { display: none; } } body.home-light .footer-widget-wrapper .footer-widget-items .widget-head h3 { color: #FFFFFF; } /* Footer only carried navy + white (widget span highlights, link hover, location icon, social hover were all var(--theme) blue) — same red→blue mix used everywhere else (buttons, "Current" in the map heading) was missing here entirely. Heading highlights, the location pin, and social hover switch to red; footer-list link hover (below, from main.css, unchanged) stays blue so the footer still reads as both palette colors, not just a red repaint. */ body.home-light .footer-widget-wrapper .footer-widget-items .widget-head h3 span { color: var(--accent-red); } body.home-light .footer-top-wrapper .location-info .icon { color: var(--accent-red); } body.home-light .footer-top-wrapper .social-icon a, body.home-light .footer-top-wrapper .location-info .icon { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.25); } body.home-light .footer-top-wrapper .social-icon a:hover { color: var(--accent-red); border-color: var(--accent-red); } /* main.css never gives .social-icon a its own icon color (only a hover color), so it was inheriting this file's page-wide dark link color (#14161A, meant for the white body text) — a dark icon glyph on the now-navy footer, effectively invisible. It also overlaps these circles with margin-right:-22px, which only looks clean against their original OPAQUE dark background (one circle fully covers the edge of the next); now that they're translucent glass, overlapping just shows each circle through the other, so that's replaced with normal gap-based spacing. */ body.home-light .footer-top-wrapper .social-icon a { color: #FFFFFF; margin-right: 0; } body.home-light .footer-top-wrapper .social-icon { gap: 14px; } body.home-light .footer-section .line-slider::before, body.home-light .footer-section .line-slider2::before { background-color: rgba(255, 255, 255, 0.2); } body.home-light .footer-section .line-slider .line1, body.home-light .footer-section .line-slider2 .line1 { background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0%, var(--theme) 50.96%, rgba(255, 255, 255, 0.1) 100%); } body.home-light .footer-bottom-text { color: #FFFFFF; } /* Language select popup — its card background was var(--bg-2), which the :root override above turns light, but its heading/option text was still hardcoded to var(--white)/white, leaving it unreadable on the now-light card. Give it its own light card + dark text instead of inheriting the dark-theme popup styling. */ body.home-light .language-box { background: #FFFFFF; border-color: rgba(20, 22, 26, 0.08); } body.home-light .language-box h3 { color: #14161A; } body.home-light .language-option { background: rgba(20, 22, 26, 0.03); border-color: rgba(20, 22, 26, 0.1); } body.home-light .language-option:hover, body.home-light .language-option:focus-visible { background: rgba(17, 65, 138, 0.08); } body.home-light .language-option .lang-name { color: #14161A; } /* Stray accent colors that don't route through var(--theme)/var(--theme-2) — a handful of rules in main.css hardcode the dark theme's red directly instead of referencing the variable (or a later duplicate selector wins the cascade with a hardcoded value), so the --theme override above never reaches them. Selectors are repeated in full so specificity beats the originals regardless of source order. */ body.home-light .section-title h2 span { color: var(--theme); } /* Section subtitle underline bar (the accent line under "ABOUT POHANG WELLBEING FOOD" etc.) — hardcoded to the old dark-theme red→blue gradient, unchanged since the blue/navy palette swap. Every heading on the site uses this same .section-title h6::after rule, so fixing it here updates all of them at once. */ body.home-light .section-title h6::after { background: linear-gradient(90deg, var(--theme) 0%, var(--theme-2) 100%); } body.home-light .testimonial-wrapper .tetsimonial-box-items .testi-content .client-info span { color: var(--theme); } body.home-light .map-marker span { background: var(--theme); animation: locationPulseLight 2s infinite; } @keyframes locationPulseLight { 0% { box-shadow: 0 0 0 0 rgba(17, 65, 138, 0.8); } 100% { box-shadow: 0 0 0 25px rgba(17, 65, 138, 0); } } body.home-light .marker-label strong { color: var(--theme); } /* The template's default marker percentages (Korea 78/35, Qatar 58/48, Sri Lanka 68/60) don't match where those countries actually sit on assets/img/index/quality/map.png. Repositioned against the rendered map at the user's actual screen size (pixel-sampled coordinates were close but needed manual fine-tuning per breakpoint). */ body.home-light .korea-marker { left: 82.4%; top: 45%; } /* Korea's pin sits near the right edge of the map, so it needs the same leftward label flip as Qatar's to stay inside the map. */ body.home-light .korea-marker .marker-label { right: 35px; } body.home-light .qatar-marker { left: 61%; top: 50.7%; } /* Qatar's pin sits near the right edge of the map, so the default label (opens 35px to the right, 220px wide) runs past the map's edge. Flip it to open leftward off the pin instead. */ body.home-light .qatar-marker .marker-label { left: auto; right: 35px; } body.home-light .sri-marker { left: 69.2%; top: 60.2%; } body.home-light .market-location-card:hover { border-color: var(--theme); } /* --- about.blade.php-specific --- */ /* "Why Choose Pohang" (testimonial-section-3) has a ::after dark overlay left over from a template photo background that was never actually set here (no background-image anywhere on this section) — on the light page it was just tinting the plain white body background muddy gray. Drop it so the section reads as a normal white block, matching its neighbors. */ body.home-light .testimonial-section-3::after { background: transparent; } /* The why-choice.png photo (.right-shape) floated directly on the page background with nothing behind it — added a soft blue glow backdrop so it reads as a framed visual instead of a bare cutout, matching the glow/glass treatment used elsewhere on the site (hero gradients, the Global Presence map). */ body.home-light .testimonial-section-3 .right-shape { background: radial-gradient(ellipse at center, rgba(17, 65, 138, 0.25) 0%, transparent 70%); } /* The heading ("Your Trusted Partner...") and intro paragraph text are hardcoded to var(--white) in main.css itself (specific enough to beat this file's page-wide dark-text rule) — meaning they were already white, just invisible sitting on the plain white page since why-choice.png behind them wasn't dark enough to read against. Darkening the photo directly fixes that. The 3 feature-list items below (Global Export Network etc.) have no color of their own in main.css at all, so they were picking up this file's dark heading/gray body text instead — fine on white, but would go unreadable once the darkened photo reaches this far down, so they're switched to light too for consistency. */ body.home-light .testimonial-section-3 .right-shape img { filter: brightness(0.45) contrast(1.05); } /* .testimonial-wrapper-3's heading/paragraph (above) are hardcoded white in main.css, relying on the darkened why-choice.png (.right-shape, above) sitting behind them for contrast — but that photo is pinned to the section's right edge and doesn't necessarily reach every viewport width the text box spans, so the white text could still land on plain page background in places. Giving the wrapper its own dark navy card removes that dependency entirely; translucent (not solid) plus a blur so the why-choice.png photo still shows through behind it instead of being fully hidden. */ body.home-light .testimonial-wrapper-3 { background: linear-gradient(135deg, rgba(16, 46, 74, 0.65) 0%, rgba(12, 35, 56, 0.65) 100%); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-radius: 20px; padding: 60px; position: relative; z-index: 1; } @media (max-width: 991px) { body.home-light .testimonial-wrapper-3 { padding: 30px; } } /* .testimonial-image is fixed at height:320px (main.css, unconditional below 1399px) with its forced to width:100%/height:100% and no object-fit — on desktop that's inside a col-lg-4 (~33% width), a mild stretch, but col-lg-4 goes full-width below 992px while the height stays the same fixed 320px, so the box's aspect ratio swings far from the photo's real one (1536x1024, 1.5:1) and the browser stretches/distorts the image to fill it rather than cropping. object-fit:cover crops instead of distorting; the height is also reduced on mobile so the crop itself stays reasonable rather than a very short, very wide sliver. */ body.home-light .testimonial-wrapper-3 .testimonial-image img { object-fit: cover; } @media (max-width: 767px) { body.home-light .testimonial-wrapper-3 .testimonial-image { height: 240px; } } body.home-light .testimonial-section-3 .gt-feature-icon li .gt-content h3 { color: #FFFFFF; } body.home-light .testimonial-section-3 .gt-feature-icon li .gt-content p { color: rgba(255, 255, 255, 0.75); } /* "Why Choose Pohang" feature list — its 3 icons hardcoded Bootstrap's .text-warning (color: ... !important), a garish yellow with zero relation to the site palette, and no override could beat an !important rule — removed the class from about.blade.php entirely and replaced with the site's own icon-accent-* rotation instead. The
  • also skips the .gt-top-feature-wrapper ancestor main.css expects for this component, so .gt-icon had no badge styling at all; added a circular tinted badge to match the rest of the site's icon treatment (About-feature tiles, Our Foundation). */ body.home-light .gt-feature-icon li .gt-icon { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 15px; } body.home-light .icon-accent-red .gt-icon { background: rgba(181, 9, 23, 0.1); color: var(--accent-red); } body.home-light .icon-accent-teal .gt-icon { background: rgba(82, 170, 138, 0.1); color: var(--accent-teal); } body.home-light .icon-accent-amber .gt-icon { background: rgba(177, 116, 15, 0.1); color: var(--accent-amber); } /* "Global Partners & Certifications" heading sits over .team-shape, a big diagonal blue panel that only covers part of the section (transparent/ white in its own top-left, solid blue lower-right) — so depending on viewport width, the centered heading can have some of its text over white and some over blue at the same time. A single flat text color can't win both backgrounds at once, so instead of picking one, this adds a soft white glow behind the text: invisible on the white part of the background, but lifts the text off the blue part. Works for the heading's own dark color and the highlighted span's blue equally, since the glow doesn't depend on what color the text is. */ body.home-light .team-section-2 .section-title h6, body.home-light .team-section-2 .section-title h2, body.home-light .team-section-2 .section-title p { text-shadow: 0 0 14px rgba(255, 255, 255, 0.9), 0 0 24px rgba(255, 255, 255, 0.7); } /* Certification cards (HACCP/ISO/Quality Assurance/Global Export) had no CSS anywhere in main.css — a completely unstyled icon+heading+paragraph floating on the page. Background is solid red per request (rather than the glass treatment used elsewhere), so heading/paragraph text — dark by default from this file's page-wide rule — needs to flip to white, and the icon badges get solid white circles instead of colored tints so they stay visible against the red card regardless of which accent color the icon itself uses (a light red tint would nearly vanish on a red card for the ISO card specifically). */ body.home-light .certification-box { background: var(--accent-red); border: 1px solid rgba(255, 255, 255, 0.2); padding: 40px 25px; border-radius: 16px; } body.home-light .certification-box h4, body.home-light .certification-box p { color: #FFFFFF; } body.home-light .certification-box p { color: rgba(255, 255, 255, 0.8); } body.home-light .certification-box .icon { width: 64px; height: 64px; margin: 0 auto 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 26px; background: #FFFFFF; } body.home-light .icon-accent-blue .icon { color: var(--theme); } body.home-light .icon-accent-red .icon { color: var(--accent-red); } body.home-light .icon-accent-teal .icon { color: var(--accent-teal); } body.home-light .icon-accent-amber .icon { color: var(--accent-amber); } /* Certification Documents slider cards — solid dark card (#1C1D20) with a hardcoded olive-to-red gradient border (#20280E → #CD2E3A), both leftover from the dark theme and unrelated to the new palette. Glass background to match the rest of the site, gradient border recolored to the same blue→red mix used elsewhere, and its hover-reveal caption overlay (solid black) switched to navy. */ body.home-light .team-single-style-2 { background: rgba(255, 255, 255, 0.55); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); box-shadow: 0 8px 32px rgba(16, 46, 74, 0.1); border-image: linear-gradient(to top, var(--theme), var(--accent-red)) 1; } body.home-light .team-single-style-2 .thumb .team-content { background: rgba(16, 46, 74, 0.9); } /* Company video banner keeps its real photo background (now the factory floor photo, 01.png) + built-in dark gradient overlay (defined in main.css), so its heading needs to stay light instead of picking up the page-wide dark heading color. The overlay itself is retinted red per request, both for brand accent and so the busy factory photo behind it doesn't fight with the white heading/paragraph text. */ body.home-light .gt-video-wrapper .gt-video-content h2 { color: var(--white); } body.home-light .gt-video-wrapper::before { background: linear-gradient(180deg, rgba(181, 9, 23, 0.35) 0%, rgba(181, 9, 23, 0.85) 100%); } /* Stat divider ticks between the "About" counters (6+, 3, 2, 100%) were a faint white line meant for a dark background — invisible on white. */ body.home-light .about-wrapper-2 .about-content .counter-wrap-2 .counter-item-2::before { background: rgba(20, 22, 26, 0.15); } /* This section (About page's "About Us" intro) was the one part of the page still carrying the old esports template's look untouched: a jagged clip-path photo with an empty decorative frame div, and every counter number in the same flat blue — plain next to the rest of the redesigned site. Squared off to a plain rounded photo with the same soft glow backdrop used elsewhere (testimonial-section-3, the map), and the counters now rotate through the site's blue/red/teal/amber accent set like the Foundation cards and certification icons do. */ body.home-light .about-wrapper-2 .about-iamge::before { content: ""; position: absolute; inset: -40px; z-index: -1; border-radius: 32px; background: radial-gradient(ellipse at center, rgba(17, 65, 138, 0.22) 0%, transparent 70%); } body.home-light .about-wrapper-2 .about-iamge img { clip-path: none; border-radius: 20px; } body.home-light .about-wrapper-2 .about-content .counter-wrap-2 .counter-item-2:nth-child(1) h2 { color: var(--theme); } body.home-light .about-wrapper-2 .about-content .counter-wrap-2 .counter-item-2:nth-child(2) h2 { color: var(--accent-red); } body.home-light .about-wrapper-2 .about-content .counter-wrap-2 .counter-item-2:nth-child(3) h2 { color: var(--accent-teal); } body.home-light .about-wrapper-2 .about-content .counter-wrap-2 .counter-item-2:nth-child(4) h2 { color: var(--accent-amber); } /* Hero-1 (About page hero) — given a navy→blue background (matching the home page's hero-3 treatment, same "dark hero" bookend), so its default white-page text/line colors are restored/adjusted rather than the dark-on-light versions used everywhere else. */ body.home-light .hero-1 { background: linear-gradient(135deg, var(--theme-2) 0%, var(--theme) 140%); } body.home-light .hero-1 .hero-content h1 { color: #FFFFFF; } body.home-light .hero-1 .hero-text { color: rgba(255, 255, 255, 0.75); } body.home-light .hero-1 .hero-content .counter-wrap .counter-item h2 { color: #FFFFFF; } body.home-light .hero-1 .hero-content .counter-wrap .counter-item p { color: rgba(255, 255, 255, 0.75); } /* .hero-bb's base line is already a light rgba(255,255,255,.2), correct as-is for this dark hero — only the moving highlight and the counter-item divider ticks need color help: both used var(--theme) (blue), which barely shows up against this now-blue background, so they're switched to the red accent for actual contrast. */ body.home-light .hero-1 .hero-bb span { background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0%, var(--accent-red) 50.96%, rgba(255, 255, 255, 0.1) 100%); } body.home-light .hero-1 .hero-content .counter-wrap .counter-item::before { background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0%, var(--accent-red) 51.44%, rgba(255, 255, 255, 0.1) 100%); } /* New .left-shape div added to hero-1 (about.blade.php), reusing the same shape.png/positioning pattern as testimonial-section-3's .left-shape (full-height, anchored left, z-index:-1 background layer). No existing hero-1 CSS uses this class, so this is a fresh addition rather than an override. */ body.home-light .hero-1 .left-shape { position: absolute; left: 0; top: 0; bottom: 0; z-index: -1; } @media (max-width: 1899px) { body.home-light .hero-1 .left-shape { left: -10%; } body.home-light .hero-1 .left-shape img { width: 100%; height: 100%; } } @media (max-width: 1399px) { body.home-light .hero-1 .left-shape { display: none; } } /* Video button was a solid theme-blue circle — against this new blue background it had no visible edge, so it gets a light border to define its shape. */ body.home-light .hero-1 .video-wrap .video-btn { border: 2px solid rgba(255, 255, 255, 0.4); } /* .black-box (mobile-only decorative image) is a hardcoded dark-gray box with a neon-lime accent from the original esports template — doesn't relate to this site's palette at all and reads as a stray dark smudge on the light hero. Hidden rather than recolored since it's a raster image, not something CSS can retint precisely. */ body.home-light .hero-1 .black-box { display: none !important; } /* hero-2 (used for the About hero, copied from the Services page) needs no background/text exceptions — it already carries its own real photo background plus a hardcoded rgba(11,14,19,.85) dark overlay in main.css, and its heading/paragraph colors are var(--white)/var(--theme), so it renders correctly as a dark photo hero in both themes automatically. The one hardcoded leftover is its "style-2" button variant, which uses a fixed red-to-olive gradient instead of the theme variables — matched to the same red→blue CTA gradient as the main .theme-btn now. */ body.home-light .theme-btn.style-2 { background: linear-gradient(90deg, var(--accent-red) 0%, var(--theme) 100%); } /* --- shared: activity-card / quality-content / mvv-card icons & text --- (services.blade.php, partner.blade.php — cards/backgrounds already flip light via the glass-card rule up top; these are the hardcoded leftovers inside them that don't route through --theme/--text.) */ body.home-light .activity-card span, body.home-light .activity-card i, body.home-light .quality-icon, body.home-light .expansion-icon, body.home-light .mvv-icon { color: var(--theme); } body.home-light .activity-card p, body.home-light .quality-content p, body.home-light .expansion-box p, body.home-light .manager-card p { color: var(--text); } /* .quality-wrapper (partner.blade.php only) inherits main.css's 2fr/1fr grid meant for a content column + side box, but the partner page only fills the first track — leaving it stuck left with empty space on the right instead of centered. */ body.home-light .quality-wrapper { grid-template-columns: 1fr; justify-items: center; } body.home-light .quality-wrapper .quality-content { max-width: 820px; text-align: center; } body.home-light .quality-wrapper .quality-icon { margin: 0 auto 25px; } /* hero-7 (careers/contact/partner pages) keeps its own dark backdrop regardless of theme (see the .hero-7.bg-cover::before rule above), but its

    has no color of its own in main.css — it was inheriting the page-wide dark --text color meant for a white background, going low-contrast on the still-dark hero. */ body.home-light .hero-7 .hero-content p { color: var(--white); } /* --- services.blade.php-specific: "About Our Services" testimonial slider --- */ /* The quote box has no background at all above 1399px (floats straight on the page) and a hardcoded dark-gray fallback below it — give it the same light glass-card treatment as everything else instead of the mixed dark/transparent original, so the quote text has a consistent surface to sit on. */ body.home-light .testimonial-box-items-2 { background: rgba(255, 255, 255, 0.6); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); border: 1px solid rgba(255, 255, 255, 0.7); box-shadow: 0 8px 32px rgba(20, 22, 26, 0.08); border-radius: 16px; } body.home-light .testimonial-box-items-2 .testimonial-box-slider p { color: var(--text); } body.home-light .testimonial-box-items-2 .testimonial-pagination, body.home-light .testimonial-box-items-2 .testimonial-pagination .current { color: rgba(20, 22, 26, 0.5); } body.home-light .testimonial-box-items-2 .testimonial-pagination .current.active { color: var(--theme); } /* The client-info-items strip inside the card is always a hardcoded dark band (#1C1D20 desktop / #0B0E13 mobile) regardless of theme — its h4 has no color of its own in main.css, so it was picking up the page-wide dark heading color and disappearing against the dark band. */ body.home-light .testimonial-box-items-2 .client-info-items .client-info .content h4 { color: var(--white); } /* --- service.blade.php-specific (service detail / "Explore More" slider) --- Same hover-reveal card as index.blade.php's Business Activities slider (.game-wrapper .game-image-items), just with a different host page. */ body.home-light .game-wrapper .game-image-items::before { background: linear-gradient(180deg, rgba(184, 145, 47, 0) 40%, var(--theme) 100%); } /* .top-image (single_service.png, floating decorative photo) only gets a size (max-width:300px/height:700px) inside main.css's max-width:1600px media query — above that width it's unconstrained, so on any screen wider than 1600px it rendered at the source file's native 1536x1024, a giant absolutely-positioned image blowing out the section. Applying the same size as a base rule instead of only under that breakpoint. Also adds object-fit:cover — main.css stretches the img to width:100%/height:100% with no object-fit, and the source photo is landscape (1536x1024) forced into this tall 300x700 portrait box, so without it the image was squashed rather than cropped. */ body.home-light .game-wrapper .top-image { max-width: 300px; height: 700px; } body.home-light .game-wrapper .top-image img { width: 100%; height: 100%; object-fit: cover; } /* --- products.blade.php / product_details.blade.php: product cards --- This is a different, already-light "Product Card" component (bare .game-image-items, no .game-wrapper ancestor — white tag pills, visible caption, no dark hover-reveal) that a previous pass already built with a light look, so it needs no background/text changes, just its leftover hardcoded red accents. */ body.home-light .game-image-items ul li i, body.home-light .game-content h3 a:hover { color: var(--theme); } /* --- product_details.blade.php: tags / feature icons --- */ body.home-light .product-tags i, body.home-light .feature-box i { color: var(--theme); } /* --- careers.blade.php --- */ /* Benefit checklist ("✔ International Career Opportunities" etc.) was a light gray meant for a dark section — this section has never had its own background (main.css even ships it commented out), so it's always sat directly on the page background either way. */ body.home-light .career-section ul li { color: var(--text); } /* "View Open Positions" hardcodes the dark-theme red directly (not var(--theme)), unlike every other theme-btn on the site — matched to the same red→blue CTA gradient as the rest now. main.css also gives it its own size/shape (padding: 15px 35px, border-radius: 50px — on top of the base .theme-btn's own height/line-height/padding, stacking into an ~82px pill), so next to "Join Our Team" a few sections up it reads as a mismatched, oversized button instead of the site's standard 52px pill. Reset back to the base .theme-btn proportions. */ body.home-light .career-section .theme-btn { background: linear-gradient(90deg, var(--accent-red) 0%, var(--theme) 100%); height: 52px; line-height: 52px; padding: 0 30px; border-radius: 100px; } body.home-light .career-section .theme-btn:hover { background: linear-gradient(90deg, var(--accent-red) 0%, var(--theme) 100%); color: var(--black); transform: none; } /* The Apply form here has no .gt-contact-us-wrapper ancestor (unlike the Contact page's form), so none of main.css's .form-clt styling reaches it at all — it was rendering as bare unstyled inputs in both themes. Give it the same card + field treatment as the Contact page form, in light-theme colors. */ body.home-light #apply .gt-comment-form-wrap { padding: 30px; background-color: var(--bg-2); border-radius: 10px; } body.home-light #apply .gt-comment-form-wrap .form-clt span { color: #14161A; display: inline-block; margin-bottom: 5px; font-size: 14px; font-weight: 700; } body.home-light #apply .gt-comment-form-wrap .form-clt input, body.home-light #apply .gt-comment-form-wrap .form-clt textarea { width: 100%; outline: none; border: 1px solid rgba(20, 22, 26, 0.12); background: #FFFFFF; padding: 12px 20px; font-weight: 400; color: var(--text); border-radius: 10px; } body.home-light #apply .gt-comment-form-wrap .form-clt input::placeholder, body.home-light #apply .gt-comment-form-wrap .form-clt textarea::placeholder { color: rgba(20, 22, 26, 0.4); } /* --- contact.blade.php --- */ /* Form card background already flips light via --bg-2, but its field labels are hardcoded to var(--white) and the input borders/backgrounds are white-tinted translucency meant to show up against a dark card — both go near-invisible on the new light card. */ body.home-light .gt-contact-us-wrapper .gt-comment-form-wrap .form-clt span { color: #14161A; } body.home-light .gt-contact-us-wrapper .gt-comment-form-wrap .form-clt input, body.home-light .gt-contact-us-wrapper .gt-comment-form-wrap .form-clt textarea { border: 1px solid rgba(20, 22, 26, 0.12); background: #FFFFFF; } body.home-light .gt-contact-us-wrapper .gt-comment-form-wrap .form-clt input::placeholder, body.home-light .gt-contact-us-wrapper .gt-comment-form-wrap .form-clt textarea::placeholder { color: rgba(20, 22, 26, 0.4); } /* The "Need Any Help" side panel never had a background of its own at all (fully transparent, just var(--white) text sitting on the page body) — fine on the original dark body, invisible on the new white one. Give it the same light card treatment as its twin on the home page's FAQ section (now also lightened per owner feedback), with its hardcoded-white text flipped to dark equivalents. */ body.home-light .gt-contact-us-wrapper .gt-contact-bg { background-color: var(--bg-2); border: 1px solid rgba(20, 22, 26, 0.08); border-radius: 10px; } body.home-light .gt-contact-us-wrapper .gt-contact-bg .gt-contact-content h3 { color: var(--theme); } body.home-light .gt-contact-us-wrapper .gt-contact-bg .gt-contact-content p, body.home-light .gt-contact-us-wrapper .gt-contact-bg .gt-contact-content .gt-contact-item .gt-list li, body.home-light .gt-contact-us-wrapper .gt-contact-bg .gt-contact-content .gt-contact-item .gt-list li span, body.home-light .gt-contact-us-wrapper .gt-contact-bg .gt-contact-content .gt-contact-item .gt-list li a { color: #14161A; } body.home-light .gt-contact-us-wrapper .gt-contact-bg .gt-contact-content p { border-bottom-color: rgba(20, 22, 26, 0.12); } body.home-light .gt-contact-us-wrapper .gt-contact-bg .gt-contact-content .gt-contact-item .gt-icon { border-color: rgba(20, 22, 26, 0.12); } /* --- product_category.blade.php --- */ /* gt-theme-btn is a leftover esports-template button: angular clip-path corners, sharp square silhouette — a completely different shape language from .theme-btn/.view-btn's rounded pill (the design used everywhere else, including the About section). Reset it to that same pill shape/size so every button on the site reads as one family. */ body.home-light .gt-theme-btn { clip-path: none !important; border-radius: 100px; height: 52px; line-height: 52px; min-width: 0; padding: 0 30px; } /* "contact us" hero button hardcodes the old template's lime green directly (not a red/blue theme color at all, and not var(--theme)) — same leftover as the Quality section icon and the quote icon fixed earlier. Filled variant now matches .theme-btn's red→blue gradient instead of a flat color. */ body.home-light .gt-theme-btn:not(.gt-style-border) { background: linear-gradient(90deg, var(--accent-red) 0%, var(--theme) 100%); } body.home-light .gt-theme-btn:not(.gt-style-border):hover { background: var(--theme-2); color: var(--white); } /* "Read more" (Quality Assurance section) — .gt-style-border had no light-theme override at all: main.css's default is a white border + white text on a transparent background, which on our light page was basically invisible until hover (when it flips to a blue background and becomes visible). Dark border/text by default fixes that. The decorative diagonal ::before line only made sense against the old angular clip-path silhouette, so it's dropped rather than recolored. */ body.home-light .gt-theme-btn.gt-style-border { border-color: rgba(20, 22, 26, 0.3); color: #14161A; } body.home-light .gt-theme-btn.gt-style-border::before { display: none; } /* Category card photo ring was a faint white line for a dark card — .game-feature-box-items itself already goes light via the shared glass-card rule above, so darken the ring to match. */ body.home-light .game-feature-box-items .category-image { border-color: rgba(20, 22, 26, 0.12); } /* --- shared: image-slider arrow buttons (about/products/service/services) --- Found while auditing hover states: .array-button button's default gray (#f4f4f4) is harmless, but its hover was hardcoded to #d62d20 — a bright red that doesn't match either the old theme's red or the new palette's var(--accent-red). Not a "goes white" problem like the others, just a stray uncoordinated color. Matched to the same blue hover already used by the site's other arrow-button variants (hero-3, Business Activities). The SVG icon's fill is a hardcoded hex (not currentColor or a var()), so it needs its own override to flip light/dark with the button background. */ body.home-light .array-button button { background: var(--bg-2); } body.home-light .array-button button:hover { background: var(--theme); } body.home-light .array-button button svg path { fill: #14161A; } body.home-light .array-button button:hover svg path { fill: #FFFFFF; } /* --- "Ready to Partner?" CTA band (index + contact pages) --- Was background: var(--theme) (blue) with dark text/button tuned for that blue — now red per request, with the Contact button flipped to blue instead of the global red→blue gradient (which would partly melt into a red section background) and all text flipped to white. */ body.home-light .cta-wrapper { background-color: var(--accent-red); } body.home-light .cta-wrapper .content p, body.home-light .cta-wrapper .content h3, body.home-light .cta-wrapper .contact-right .contact-info h3, body.home-light .cta-wrapper .contact-right .contact-info p, body.home-light .cta-wrapper .contact-right .contact-info p a { color: #FFFFFF; } body.home-light .cta-wrapper .contact-right .contact-info { border-right-color: rgba(255, 255, 255, 0.25); } body.home-light .cta-wrapper .contact-right .theme-btn { background-color: var(--theme); color: var(--white); } body.home-light .cta-wrapper .contact-right .theme-btn:hover { color: var(--white); } /* --- Preloader (loading animation) --- Spinner arc was blue-on-black (border rgba(0,0,0,.2) ring with a blue spinning top edge) and the letter-flip animation's overlay letter was var(--header) (near-black) — both swapped from black to red so the animation reads as blue+red instead of blue+black. */ body.home-light .preloader .animation-preloader .spinner { border-color: rgba(181, 9, 23, 0.2); border-top-color: var(--theme); } body.home-light .preloader .animation-preloader .txt-loading .letters-loading::before { color: var(--accent-red); }