/* * Typography: Heebo, the theme's own default (theme.css `body{font-family: * "Heebo"}`), unset here on purpose. This file used to override it to Lexend/ * Source Sans 3 ("Corporate Trust" pairing) -- a font-refresh lever borrowed * from a generic design skill, not from anything this theme actually ships. * Reverted when redesigning the homepage back onto the theme's real system * (confirmed live against logistic-company.themerex.net, which renders in * Heebo throughout); the fonts stylesheet enqueue was removed in gk-brand.php * to match. Decided with the user directly, not assumed. */ /* Card elevation, button press/lift physics, and scroll-reveal (previously * defined here) were removed for the same reason: none of them exist on the * theme's real demo (browser-verified -- flat 0-shadow cards, no hover lift, * no scroll-triggered animation anywhere on the page), so they read as * "generic modern SaaS" rather than this theme's own, plainer vocabulary. * gk-motion.js (the scroll-reveal script) is unenqueued in gk-brand.php but * left on disk. The bento-only-child image-size fix and the scroll-strip * rules below are NOT part of that removal -- they fix real rendering bugs * (image upscaling, a broken flex target) in patterns still in use on the * landing pages, which are out of scope for this redesign pass (homepage * only, so far). */ .sc_services_item:has(.post_featured) { background: #ffffff; border-radius: 0; overflow: hidden; } .sc_services_item:has(.post_featured) .sc_services_item_content { padding: 18px 20px 24px; } /* Bento "featured" card fix (Section-layout diversification lever, landing * pages + homepage): trx_services always requests the theme's ONE * registered "services-1" thumb size (370x269 -- traced in * logistic_company_get_thumb_sizes(), keyed by layout slug only, no param * to request a bigger crop per instance) regardless of `columns=`. Fine at * 3-4 columns (~370px card width, no upscale). Broken at columns="1" (a * full-width "featured" card, ~1170px wide): the same 370px source got * stretched ~3.2x, rendering as a soft, absurdly tall image -- confirmed * live via naturalWidth vs. rendered width before writing this rule, not * guessed. No way to request a larger source through the shortcode itself, * so this caps the box instead: `:only-child` picks out exactly the single- * item services-1 block (the featured card sits alone in its own * trx_services wrap, the 3 supporting cards are a separate 3-item block * right after it -- see content/landing/*.html and trang-chu.html), object- * fit:cover keeps it filling the box without distortion. */ .sc_services_item:only-child .post_thumb { max-height: 320px; overflow: hidden; } .sc_services_item:only-child .post_thumb img { width: 100%; height: 320px; object-fit: cover; } /* Horizontal scroll-snap strip (Pre-Flight fix, Section 4.9's own suggested * alternative for "long lists of equal-weight items", applied to * /dich-vu/'s 10 Giải Pháp grid and /nganh-phuc-vu/'s 7-industry grid -- * both are genuinely equal-weight directories, so bento/asymmetric sizing * would be a fabricated hierarchy; a horizontal strip breaks the repeated- * grid pattern WITHOUT inventing one item being "more important" than the * others, unlike the bento treatment used where items ARE prioritized * (homepage Why-GKL, landing pages' Cam Kết Dịch Vụ). * `!important` on display:flex because the theme's own grid/column CSS * for these two shortcodes isn't overridden by specificity alone -- tested * live, plain `display:flex` without !important was silently ignored. */ /* Two different shortcodes, two different DOM depths -- found live via * el.innerHTML before writing selectors, not assumed from the params: * - trx_columns (nganh-phuc-vu.html): class="gk-scroll-strip" lands * directly on .sc_columns, whose direct children ARE .sc_column_item. * Flat, 1 level. * - trx_services (dich-vu.html): class="gk-scroll-strip" lands on * .sc_services, but that only ever has ONE direct child of its own -- * an inner .sc_columns.columns_wrap the shortcode generates internally * -- which is what actually contains the 10 `.column-1_5` cells (each * wrapping one .sc_services_item). display:flex on .sc_services itself * does nothing useful (flexing a single child); the real target is that * inner .sc_columns. First version of this rule flexed the wrong level * and rendered as 2 stacked rows of 5 instead of one scrollable row -- * confirmed via el.innerHTML dump, not guessed. */ .gk-scroll-strip.sc_columns, .gk-scroll-strip.sc_services > .sc_columns { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: 20px; padding-bottom: 14px; -webkit-overflow-scrolling: touch; /* Fade the right edge so the strip visibly continues past the viewport edge -- the affordance the swipe-clarity guidance asks for, without a banned "Scroll ->" text cue. */ mask-image: linear-gradient(to right, black 92%, transparent 100%); -webkit-mask-image: linear-gradient(to right, black 92%, transparent 100%); } .gk-scroll-strip.sc_columns > .sc_column_item, .gk-scroll-strip.sc_services > .sc_columns > [class*="column-"] { flex: 0 0 260px !important; width: 260px !important; scroll-snap-align: start; } .gk-scroll-strip.sc_columns::-webkit-scrollbar, .gk-scroll-strip.sc_services > .sc_columns::-webkit-scrollbar { height: 6px; } .gk-scroll-strip.sc_columns::-webkit-scrollbar-thumb, .gk-scroll-strip.sc_services > .sc_columns::-webkit-scrollbar-thumb { background: var(--gk-cyan); } /* * Brand ribbon motif -- REMOVED (was a 1-page pilot on the homepage only, * never rolled out further). See git log for the shortcode-bug history if * this ever gets revisited; the theme's real demo has no equivalent * decorative motif anywhere, so it was dropped along with the other * generic-design-skill additions when the homepage was redesigned back onto * the theme's own system. The `.gk-ribbon-deco` class this rule targeted no * longer appears in any content file. */ .top_panel_style_7 .contact_logo { margin-right: 0; } .top_panel_wrap .logo { margin: 0.4rem 0 0.25rem 0; padding: 0; } /* Override theme's height: 60px (from logo_height option) */ .top_panel_wrap .logo_main, .top_panel_wrap .logo_fixed { height: auto !important; width: auto; } .top_panel_wrap .logo_main { max-height: 78px !important; } .top_panel_wrap .logo_fixed { max-height: 58px !important; } .top_panel_fixed .top_panel_wrap .logo { margin: 0.3rem 0; } .top_panel_style_7 .contact_phone { margin-left: 0; white-space: nowrap; } .top_panel_style_7 .contact_phone a { color: #25AAE2; font-weight: 700; } @media (min-width: 1024px) { .top_panel_style_7 .menu_main_wrap { float: left !important; margin-top: 0.15rem; margin-left: 2rem; } .top_panel_style_7 .menu_main_nav > li > a { padding-left: 1.15em; padding-right: 1.15em; } } @media (max-width: 1023px) { .top_panel_wrap .logo { margin: 0.3rem 0; } .top_panel_wrap .logo_main { max-height: 62px !important; } } @media (max-width: 767px) { .header_mobile .logo { padding: 0; background: transparent; box-shadow: none; } .header_mobile .logo_main, .header_mobile .logo_fixed { height: auto !important; max-height: 50px !important; } } :root { --gk-cyan: #25AAE2; --gk-orange: #F79321; --gk-navy: #252E44; --gk-ink: #59677A; --gk-surface: #F5F9FC; --gk-line: #DCE8F0; } body .top_panel_middle, body .top_panel_position_over .top_panel_middle, body:not(.top_panel_fixed) .top_panel_wrap .top_panel_position_over .top_panel_middle, body:not(.top_panel_fixed) .top_panel_position_over.top_panel_wrap_inner, body.top_panel_fixed .top_panel_middle { background: #FAFCFD !important; border-bottom: 1px solid rgba(37, 170, 226, .24); box-shadow: none !important; } body.top_panel_fixed .top_panel_wrap { box-shadow: none !important; } @media (min-width: 960px) { body:not(.top_panel_fixed).top_panel_over .top_panel_wrap .top_panel_wrap_inner.top_panel_position_over { background: linear-gradient(180deg, rgb(240 250 255 / 80%) 10%, rgb(226 242 249 / 25%) 70%, rgb(211 234 244 / 0%) 100%) !important; border-bottom-color: transparent; border: none; box-shadow: none !important; -webkit-backdrop-filter: blur(14px) saturate(135%); } body:not(.top_panel_fixed).top_panel_over .top_panel_wrap .top_panel_position_over .top_panel_middle { background: transparent !important; border-bottom-color: transparent; box-shadow: none !important; -webkit-backdrop-filter: none; backdrop-filter: none; } } .top_panel_style_7 .menu_main_nav li a, .top_panel_style_7 .contact_phone a { color: var(--gk-navy) !important; text-shadow: none !important; } .top_panel_style_7 .menu_main_nav li a:hover, .top_panel_style_7 .menu_main_nav li.current-menu-item a, .top_panel_style_7 .menu_main_nav li.current-menu-ancestor a { color: var(--gk-navy) !important; } .top_panel_style_7 .menu_main_nav li.current-menu-item a:after, .top_panel_style_7 .menu_main_nav li.current-menu-ancestor a:after { background-color: var(--gk-orange) !important; } /* gk-brand contrast fix: --gk-cyan (#25AAE2) and --gk-orange (#F79321) both measure under 3:1 as TEXT on a white/light surface (verified: #25AAE2 on white = 2.68:1, #F79321 on white = 2.35:1 -- both fail WCAG AA's 4.5:1 for normal text and even the 3:1 large-text floor). Rule from here down: navy (#252E44, 12:1+ on white, 5:1+ on cyan or orange) carries every piece of running text; cyan/orange stay as backgrounds, borders and the small current-page underline above, where WCAG's text-contrast math doesn't apply. Was the active-page nav color (visibly checked: "GIỚI THIỆU" on /nang-luc/ rendered as this pale cyan against the white nav bar) -- user-reported bug, confirmed by contrast calc before fixing. */ .top_panel_style_7 .contact_label.contact_phone, .top_panel_style_7 .contact_label.contact_phone:before, .top_panel_style_7 .contact_label.contact_phone a { color: var(--gk-navy) !important; font-weight: 800; } .top_panel_style_7 .contact_label.contact_phone a:hover { color: var(--gk-navy) !important; text-decoration: underline; } .header_mobile, .header_mobile .side_wrap { background-color: #FAFCFD !important; color: var(--gk-navy) !important; } .header_mobile { border-bottom: 1px solid rgba(37, 170, 226, .24); box-shadow: none !important; } .header_mobile .menu_button, .header_mobile .menu_main_nav a, .header_mobile .search_wrap .search_submit, .header_mobile .search_wrap .search_field { color: var(--gk-navy) !important; } .header_mobile .menu_main_nav a:hover, .header_mobile .menu_main_nav .current-menu-item a { color: var(--gk-navy) !important; text-decoration: underline; } .page_content_wrap, .scheme_original .page_content_wrap { background-color: #FFFFFF; color: var(--gk-ink); } .page_content_wrap h1, .page_content_wrap h2, .page_content_wrap h3, .page_content_wrap h4, .page_content_wrap h5, .page_content_wrap h6, .page_content_wrap .sc_item_title, .page_content_wrap .post_title a, .page_content_wrap .sc_services_item_title a { color: var(--gk-navy) !important; } /* Split-hero regression fix (10 landing pages, Section-layout diversification lever): the rule above is unconditional navy on every h1-h6 in .page_content_wrap, and normally loses to the more specific .white_text_section h1{color:#fff!important} rule further down for any white-on-photo hero. The new split-hero panel (navy solid background, left column) doesn't use that section_style="white_text_section" wrapper -- it never needed the darkening treatment that class exists for, since no text sits on the photo anymore -- so nothing overrode the navy rule above. Result found live: navy H1 text on a navy background, fully invisible, confirmed via getComputedStyle (color: rgb(37,46,68) on a #252E44 row) before writing this fix, not guessed. */ .vc_custom_lp_hero2 h1 { color: #FFFFFF !important; } /* Same navy-on-navy bug, different spot: lien-he.html's "Ghé Thăm Văn Phòng GKL" band (.vc_custom_lh_map_band, navy background) sets color="#ffffff" on its trx_title via the shortcode's own inline style, but that inline style has no !important and loses to the unconditional navy rule above -- confirmed live via getComputedStyle the same way as the split-hero case (color: rgb(37,46,68) despite the inline style reading rgb(255,255,255)). This band predates the split-hero fix and was never covered by it since it doesn't use the white_text_section wrapper either. */ .vc_custom_lh_map_band .sc_title { color: #FFFFFF !important; } /* Pre-Flight fix ("Hero fits the viewport: headline <=2 lines"): the theme's type="1" trx_title computes to 72px, sized for the OLD hero's ~860px centered column. The split-hero text column is only ~600px wide, so the longest title on the site ("Dịch Vụ Khai Báo Hải Quan Chuyên Sâu") wrapped to 3 lines -- confirmed by testing font-size against actual rendered line count live (72/64/56/52px all gave 3 lines, 48px and below gave 2) before picking a value, not guessed. 48px keeps it in the skill's own suggested text-5xl band for headlines this length. */ .vc_custom_lp_hero2 h1 { font-size: 48px; line-height: 1.2; } /* Split-hero photo column, 2 layered bugs found live before this final version: 1. `height:100%` on vc_single_image's own wrapper doesn't reach the actual through the 3 nested wrapper divs in between. 2. Even after fixing (1), the right column's OWN height is not flexbox-stretched to match the left column (plain vc_row/ vc_column, no equalheight) -- percentage heights inside it resolve against ITS short natural height (~415px, the image's own intrinsic size), not the row's true visible height (~730px, set by the taller text+CTA left column) -- confirmed via getComputedStyle before rewriting this, not guessed. Net result: a correctly-cover-fitted image inside a box that's itself too short, still leaving empty navy space below it. Fixed by taking the photo column out of flow entirely and letting it fill the row via absolute positioning -- same effect a CSS background-image would have (the row's height is set purely by the left column's content, exactly like a background layer), no percentage-height chain to keep correct across every aspect ratio photo in rotation across 10 landing pages. */ .vc_custom_lp_hero2 { position: relative; overflow: hidden; } .vc_custom_lp_hero2 > .wpb_column:has(.vc_custom_lp_hero2_img) { position: absolute; inset: 0; left: 50%; width: 50%; } .vc_custom_lp_hero2_img, .vc_custom_lp_hero2_img .vc_figure, .vc_custom_lp_hero2_img .vc_single_image-wrapper { height: 100%; } .vc_custom_lp_hero2_img .vc_single_image-wrapper img { width: 100%; height: 100%; object-fit: cover; } @media (max-width: 767px) { .vc_custom_lp_hero2 > .wpb_column:has(.vc_custom_lp_hero2_img) { position: static; left: auto; width: 100%; height: 260px; } } .page_content_wrap p, .page_content_wrap .sc_services_item_description, .page_content_wrap .post_content, .page_content_wrap .post_info { color: var(--gk-ink); } .page_content_wrap a, .page_content_wrap .sc_icon, .page_content_wrap .sc_title_icon { color: var(--gk-navy); } .page_content_wrap a:hover, .page_content_wrap .post_title a:hover { color: var(--gk-navy) !important; text-decoration: underline; } /* Third occurrence of the same navy-on-navy family of bugs (see the two comments above this block): the theme's own services-1 hover state fills .sc_services_item's background solid blue (#3ea2ee) and turns the title + description links white (.sc_services_item:hover .sc_services_item_title a{color:#fff}, theme.css) for contrast. Both unconditional rules above -- .sc_services_item_title a{color:navy!important} and this file's own generic a:hover{color:navy!important} -- outrank the theme's non-!important white-on-hover rule, so the title/description text stayed navy on the blue hover fill: low enough contrast to read as "no text at all" at a glance. User-reported ("hover vào text không rõ ràng") on dich-vu.html's "Dịch Vụ Bổ Sung" grid; confirmed live via agent-browser hover + getComputedStyle (color: rgb(37,46,68) while the item's own background had already flipped to rgb(62,162,238)) before writing this fix, not guessed. Scoped to services items only -- the general navy-link rules above are intentional everywhere else. */ .page_content_wrap .sc_services_item:hover .sc_services_item_title a, .page_content_wrap .sc_services_item:hover .sc_services_item_description a, .page_content_wrap .sc_services_item:hover .sc_services_item_description a p { color: #ffffff !important; } /* The .sc_services_item_description a{color:#fff!important} rule right above does not reach the

the theme nests inside that (a[href]>div.wpb_text_column>div.wpb_wrapper>p, the standard vc_column_text markup) -- .page_content_wrap p{color:var(--gk-ink)} further up this file matches that

DIRECTLY, and a direct match always wins over a value the element would otherwise inherit from its ancestor, regardless of !important on the ancestor's own rule (inheritance isn't a cascade contender once something targets the element itself). User caught this as a second, separate instance of the same "text unreadable on hover" report ("description cũng bị, không riêng gì title") -- confirmed live the same way as the title fix (getComputedStyle on the actual

, real hover, not a simulated event): color was rgb(89,103,122) (--gk-ink) while its .sc_services_item ancestor had already flipped to the blue hover fill. Added above as a third selector on the same rule. */ /* The color fix above wasn't the whole bug. Scanning every matched CSS rule live (document.styleSheets, not guessed) turned up a SECOND, theme-native rule on top of the navy-color collision: theme.shortcodes.css ships .compact .sc_services_item:hover .sc_services_item_title a {opacity:0} for the "compact" services-1 variant (used here by dich-vu.html's "Dịch Vụ Bổ Sung" grid, size_style="compact") -- the title is meant to fade out entirely on hover, on the theory that the description (which slides in as an overlay on the photo instead) replaces it. In practice that leaves a plain solid-color box with no text at all where the title was, for as long as the card is hovered -- confirmed live (opacity: "0" via getComputedStyle while the description overlay was visible on the image above it), and read as broken/confusing rather than a deliberate transition, matching the user's report. Overriding back to opacity:1 keeps the title readable (now in white, thanks to the color fix above) for the whole hover state instead of intentionally hiding it. */ .page_content_wrap .sc_services_item:hover .sc_services_item_title a { opacity: 1 !important; } .page_content_wrap .sc_title_underline:after, .page_content_wrap .sc_item_title:after, .page_content_wrap .sc_services_item_title:after { background-color: var(--gk-orange) !important; } /* CTA buttons: orange background is the site's established, highly visible accent (verified via getComputedStyle early in the redesign work) -- kept as-is. Only the LABEL color changes: white-on-orange measured 2.35:1 (fails even the 3:1 large-bold-text floor), navy- on-orange measures ~5.9:1. Same reasoning for the cyan hover state (navy-on-cyan ~5.1:1). */ .page_content_wrap .sc_button, .page_content_wrap input[type="submit"], .page_content_wrap button:not(.menu_button) { background-color: var(--gk-orange) !important; border-color: var(--gk-orange) !important; color: var(--gk-navy) !important; } .page_content_wrap .sc_button:hover, .page_content_wrap input[type="submit"]:hover, .page_content_wrap button:not(.menu_button):hover { background-color: var(--gk-cyan) !important; border-color: var(--gk-cyan) !important; color: var(--gk-navy) !important; } .page_content_wrap input:focus, .page_content_wrap textarea:focus, .page_content_wrap select:focus { border-color: var(--gk-cyan) !important; } .page-id-655 .page_content_wrap .sc_services_item .sc_icon { background-color: var(--gk-cyan) !important; color: var(--gk-navy) !important; } .page-id-655 .page_content_wrap .sc_services_item:nth-child(even) .sc_icon, .page-id-655 .page_content_wrap .sc_services_item_2 .sc_icon, .page-id-655 .page_content_wrap .sc_services_item_4 .sc_icon, .page-id-655 .page_content_wrap .sc_services_item_6 .sc_icon { background-color: var(--gk-orange) !important; } .page_content_wrap .inverse_colors h1, .page_content_wrap .inverse_colors h2, .page_content_wrap .inverse_colors h3, .page_content_wrap .inverse_colors h4, .page_content_wrap .inverse_colors h5, .page_content_wrap .inverse_colors h6, .page_content_wrap .white_text_section h1, .page_content_wrap .white_text_section h2, .page_content_wrap .white_text_section h3, .page_content_wrap .white_text_section h4, .page_content_wrap .white_text_section h5, .page_content_wrap .white_text_section h6, .page_content_wrap .sc_section.section_style_white_text_section .sc_title, .page_content_wrap .sc_section.section_style_white_full_section .sc_title { color: #FFFFFF !important; } .page_content_wrap .sc_section.section_style_white_text_section .sc_title, .page_content_wrap .sc_section.section_style_white_full_section .sc_title, .page_content_wrap .sc_section.section_style_white_text_section p, .page_content_wrap .sc_section.section_style_white_full_section p { text-shadow: 0 2px 14px rgba(37, 46, 68, .46); } .page_content_wrap .sc_section.section_style_white_text_section p, .page_content_wrap .sc_section.section_style_white_full_section p { color: rgba(255, 255, 255, .94) !important; } .page_content_wrap .vc_row-has-fill:not(.inverse_colors) { border-color: var(--gk-line); } /* Footer color: decided against the Company Profile PDF, not the theme demo. The demo's own footer is dark navy/charcoal, and this site matched that briefly -- but the profile's cover page uses a full-saturation cyan panel as its signature brand block, and the user picked that as the closer reference for GKL's own identity over the theme's generic dark-footer convention. Full --gk-cyan background, same as the profile's cover panel. Text is navy, not white: white-on-cyan measured 2.6-2.9:1 (fails WCAG AA) when this was checked earlier in the project; navy-on-cyan measures ~5.1:1 (passes), same fix reused here. */ .footer_wrap, .footer_wrap .widget_area_inner { background: var(--gk-cyan) !important; color: var(--gk-navy) !important; } .footer_wrap .widget_area_inner { border-top: 6px solid var(--gk-orange); } .footer_wrap .widget_title, .footer_wrap h1, .footer_wrap h2, .footer_wrap h3, .footer_wrap h4, .footer_wrap h5, .footer_wrap h6 { color: var(--gk-navy) !important; } .footer_wrap p, .footer_wrap li, .footer_wrap .textwidget { color: var(--gk-navy) !important; } .footer_wrap a { color: var(--gk-navy) !important; } .footer_wrap a:hover { color: #FFFFFF !important; text-decoration: underline; } /* .copyright_wrap_inner keeps its own fixed dark background (#1d2125, theme.css) independent of .footer_wrap above it -- the copyright bar was never cyan even in the earlier bright-cyan footer version, so its text stays light regardless of the footer widget area's color. */ .copyright_wrap .copyright_text, .copyright_wrap .copyright_text a { color: rgba(255, 255, 255, .72) !important; } @media (min-width: 768px) { .page-id-654 .gk-about-services .sc_services .sc_columns { display: flex; align-items: stretch; flex-wrap: wrap; } .page-id-654 .gk-about-services .sc_services .sc_columns [class*="column-"] { display: flex !important; float: none; } .page-id-654 .gk-about-services .sc_services_item { box-sizing: border-box; flex: 1 1 auto !important; width: 100%; } } .gk-home-about { position: relative; overflow: hidden; background-color: #f3f3f3 !important; } .gk-home-about .sc_title.sc_title_underline:after { background-color: #F79321 !important; } .gk-home-about .sc_services.sc_services_style_services_2 { margin-top: 1.15rem; } .gk-home-about .sc_services.sc_services_style_services_2 .sc_services_item { padding: 1.35rem 1.45rem 1.15rem; border: 1px solid rgba(37, 46, 68, 0.1); background: rgba(255, 255, 255, 0.9); box-shadow: 0 16px 38px rgba(37, 46, 68, 0.09); backdrop-filter: blur(6px); } .gk-home-about .sc_services.sc_services_style_services_2 .sc_services_item:hover { box-shadow: 0 22px 42px rgba(37, 46, 68, 0.14); transform: translateY(-2px); } .gk-home-about .sc_services.sc_services_style_services_2 .sc_services_item_title { color: #252E44; font-size: 1.02rem; line-height: 1.3; margin-bottom: 0.65rem; } .gk-home-about .sc_services.sc_services_style_services_2 .sc_services_item_title:after { background-color: #F79321 !important; } .gk-home-about .sc_services.sc_services_style_services_2 .sc_services_item_content { color: #59677A; font-size: 0.95rem; line-height: 1.72; } .gk-home-stats { position: relative; overflow: hidden; background-size: cover !important; background-position: center center !important; } .gk-home-stats:before { content: ""; position: absolute; inset: 0; background: rgba(37, 170, 226, 0.1); z-index: 0; } .gk-home-stats > .vc_column_container { position: relative; z-index: 1; } .gk-home-stats .sc_skills.sc_skills_counter .sc_skills_item { padding: 0 1.1rem; } .gk-home-stats .sc_skills.sc_skills_counter .sc_skills_count { color: #ffffff; font-size: 3.2rem; font-weight: 700; letter-spacing: -0.04em; text-shadow: 0 8px 26px rgba(37, 46, 68, 0.22); } .gk-home-stats .sc_skills.sc_skills_counter .sc_skills_info { color: rgba(255, 255, 255, 0.82); font-size: 0.92rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } .gk-home-stats .sc_skills.sc_skills_counter .sc_skills_item:after { background: rgba(255, 255, 255, 0.18) !important; } .scheme_original a, .scheme_original .accent1, .scheme_original .sc_title_icon, .scheme_original .sc_item_subtitle, .scheme_original .sc_item_button > a:before, .top_panel_style_7 .contact_phone a { color: #25AAE2; } .scheme_original .accent1_bgc, .scheme_original .accent1_bg, .scheme_original .sc_item_title:after, .scheme_original .sc_toggles .sc_toggles_item .sc_toggles_title.ui-state-active .sc_toggles_icon_opened { background-color: #25AAE2 !important; } .scheme_original .accent1_border, .scheme_original .sc_toggles .sc_toggles_item .sc_toggles_title.ui-state-active { border-color: #25AAE2 !important; } .gk-home-partners .sc_clients .swiper-slide { box-sizing: border-box; padding-left: 10px; padding-right: 10px; } .gk-home-partners .sc_clients .sc_clients_item { padding-left: 4px; padding-right: 4px; } @media (max-width: 1023px) { .gk-home-about .sc_services.sc_services_style_services_2 { margin-top: 2rem; } } @media (max-width: 767px) { .gk-home-about .sc_services.sc_services_style_services_2 .sc_services_item { padding: 1.1rem 1.15rem 1rem; } .gk-home-stats .sc_skills.sc_skills_counter .sc_skills_count { font-size: 2.45rem; } .gk-home-partners .sc_clients .swiper-slide { padding-left: 7px; padding-right: 7px; } } .single-services .wpb_wrapper h1, .single-services .wpb_wrapper h2, .single-services .wpb_wrapper h3, .single-services .wpb_wrapper h4, .single-services .wpb_wrapper h5, .single-services .wpb_wrapper h6 { margin-top: 0.6em; } .single-services .wpb_wrapper h1:first-child, .single-services .wpb_wrapper h2:first-child, .single-services .wpb_wrapper h3:first-child, .single-services .wpb_wrapper h4:first-child { margin-top: 0; } .page-id-654 .top_panel_image { background-image: linear-gradient(90deg, rgba(37, 46, 68, .78) 0%, rgba(37, 170, 226, .44) 55%, rgba(37, 46, 68, .82) 100%), url('/wp-content/uploads/2026/07/gk-generated/gk-hero-customs-warehouse.jpg') !important; } .page-id-130 .top_panel_image { background-image: linear-gradient(90deg, rgba(37, 46, 68, .8) 0%, rgba(37, 170, 226, .4) 55%, rgba(37, 46, 68, .84) 100%), url('/wp-content/uploads/2026/07/gk-company-fleet/gk-fleet-group.jpg') !important; } .page-id-655 .top_panel_image, .single-services .top_panel_image { background-image: linear-gradient(90deg, rgba(37, 46, 68, .8) 0%, rgba(37, 170, 226, .38) 55%, rgba(37, 46, 68, .84) 100%), url('/wp-content/uploads/2026/07/gk-company-fleet/gk-fleet-chassis-side.jpg') !important; } .page-id-779 .top_panel_image, .page-id-1028 .top_panel_image { background-image: linear-gradient(90deg, rgba(37, 46, 68, .8) 0%, rgba(37, 170, 226, .4) 55%, rgba(37, 46, 68, .84) 100%), url('/wp-content/uploads/2026/07/gk-company-fleet/gk-fleet-group.jpg') !important; } .blog .top_panel_image, .single-post .top_panel_image, .archive .top_panel_image, .search .top_panel_image { background-image: linear-gradient(90deg, rgba(37, 46, 68, .82) 0%, rgba(37, 170, 226, .36) 55%, rgba(37, 46, 68, .86) 100%), url('/wp-content/uploads/2026/06/gk-licensed/gk-parallax-container-ship.jpg') !important; } .page-id-654 .top_panel_image, .page-id-655 .top_panel_image, .page-id-130 .top_panel_image, .page-id-779 .top_panel_image, .page-id-1028 .top_panel_image, .blog .top_panel_image, .single-post .top_panel_image, .single-services .top_panel_image, .archive .top_panel_image, .search .top_panel_image { background-position: center 54% !important; background-repeat: no-repeat !important; background-size: cover !important; } .top_panel_image .top_panel_image_header, .top_panel_image .breadcrumbs, .top_panel_image .breadcrumbs a { color: #fff !important; text-shadow: 0 2px 16px rgba(37, 46, 68, .42); } @media (max-width: 767px) { .page-id-654 .top_panel_image, .page-id-655 .top_panel_image, .page-id-130 .top_panel_image, .page-id-779 .top_panel_image, .page-id-1028 .top_panel_image, .blog .top_panel_image, .single-post .top_panel_image, .single-services .top_panel_image, .archive .top_panel_image, .search .top_panel_image { background-position: 58% center !important; } } .gk-home-about, .gk-about-intro, .vc_custom_1471530530613, .vc_custom_1471856372952, .gk-about-shipment, .gk-home-stats, .gk-about-stats, .vc_custom_1471609372104 { isolation: isolate; position: relative; overflow: hidden; } .gk-home-about:after, .gk-about-intro:after, .vc_custom_1471530530613:before, .vc_custom_1471856372952:before, .gk-about-shipment:before, .gk-home-stats:before, .gk-about-stats:before, .vc_custom_1471609372104:before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1; } .gk-home-about:after, .gk-about-intro:after { background: linear-gradient(90deg, rgba(255, 255, 255, .98) 0%, rgba(255, 255, 255, .9) 44%, rgba(255, 255, 255, .12) 64%, rgba(37, 170, 226, .05) 100%); } .vc_custom_1471530530613 { background-color: rgba(37, 46, 68, .58) !important; background-blend-mode: multiply; } .vc_custom_1471856372952, .gk-about-shipment { background-color: rgba(37, 46, 68, .7) !important; background-blend-mode: multiply; } .vc_custom_1471856372952 .vc_parallax-inner, .gk-about-shipment .vc_parallax-inner { filter: brightness(.52) saturate(.88); } .vc_custom_1471609372104 { background-color: rgba(37, 46, 68, .62) !important; background-blend-mode: multiply; } .gk-about-shipment:before { background: linear-gradient(90deg, rgba(37, 46, 68, .9) 0%, rgba(37, 46, 68, .74) 52%, rgba(37, 46, 68, .9) 100%); } .gk-home-stats:before, .gk-about-stats:before { background: linear-gradient(105deg, rgba(37, 46, 68, .82), rgba(37, 170, 226, .58) 62%, rgba(37, 46, 68, .8)); } .gk-home-about .vc_column_container, .gk-about-intro .vc_column_container, .vc_custom_1471530530613 .vc_column_container, .vc_custom_1471856372952 .vc_column_container, .gk-about-shipment .vc_column_container, .gk-home-stats .vc_column_container, .gk-about-stats .vc_column_container, .vc_custom_1471609372104 .vc_column_container { position: relative; z-index: 2 !important; } .sc_testimonials_style_testimonials-1 .sc_testimonial_avatar img, .sc_testimonials_style_testimonials-2 .sc_testimonial_avatar img { filter: saturate(.88) contrast(1.04); } .sc_services_style_services-5 .sc_services_image img { box-sizing: border-box; display: block; aspect-ratio: 1; object-fit: cover; border: 7px solid rgba(255, 255, 255, .94); border-radius: 50%; filter: saturate(.88) contrast(1.05); box-shadow: 0 14px 32px rgba(37, 46, 68, .16); } @media (max-width: 767px) { body .gk-home-about, body .gk-about-intro { background-position: left center !important; } .gk-home-about .sc_columns_count_2 .sc_column_item:first-child, .gk-about-intro .sc_columns_count_2 .sc_column_item:first-child { box-sizing: border-box; background: rgba(255, 255, 255, .92); padding: 0 1.25rem 1.5rem; } .gk-home-about:after, .gk-about-intro:after { background: rgba(255, 255, 255, .94); } .gk-about-shipment:before, .gk-home-stats:before, .gk-about-stats:before { background: linear-gradient(180deg, rgba(37, 46, 68, .74), rgba(37, 170, 226, .38) 55%, rgba(37, 46, 68, .8)); } } /* ───────────────────────────────────────────── Theme bug fix: input[type="tel"] styling. Every form-control CSS rule in the theme (style.css, theme.css) styles text/number/email/password/search/select/textarea, but omits "tel" — verified across every occurrence in both files, not a one-off miss. Was invisible until Phase 8's quote form added the site's first : it fell back to the bare browser default (no border, ~20px tall vs. 36.6px for every other field), which on mobile is easy to miss as an actual input at all. Mirrors style.css's base rule + theme.css's scheme_original color rule exactly, since that's the only color scheme this site uses (verified via `wp option get logistic_company_options` color_scheme). ───────────────────────────────────────────── */ input[type="tel"] { -webkit-appearance: none; outline: none; resize: none; padding: 0.45em 2.2em; border: 2px solid; border-radius: 1.3rem; box-sizing: border-box; height: 3.05em; transition: all ease .3s; color: #898b92; border-color: #e6e6e6; background-color: #fff; } input[type="tel"]:hover { border-color: #3ea2ee; } input[type="tel"]:focus { border-color: #555862; outline: none; } /* ───────────────────────────────────────────── Theme bug fix: hero text contrast on photo backgrounds. trx_section style="white_text_section" only sets text color to #fff (confirmed in theme.css: .section_style_white_text_section .sc_title, p { color:#fff }) -- it adds ZERO background darkening of its own. Every hero/CTA row built on this project relies on the content author manually picking a dark-enough photo, which real (bright sky, light-blue trucks, colorful shipping containers) photos frequently aren't. Confirmed via agent-browser: "Năng Lực GKL" hero subtitle was barely legible over a light truck cab; "Bạn Cần Vận Chuyển Mặt Hàng Gì?" body text was hard to read over a container ship's red/blue/orange containers. Two cases, since WPBakery's parallax="content-moving" rows render their background on a separate absolutely-positioned .vc_parallax-inner child (not the row itself), while plain rows (no parallax attribute) keep the background-image on the row: 1. Parallax rows: filter darkens the actual image layer directly. background-blend-mode was tried first and computed correctly but produced no visible change (likely too subtle at usable alpha) -- filter:brightness gave a clean, reliable result. 2. Plain rows: box-shadow: inset ...2000px paints a solid tint INSIDE the box without creating a stacking context, so it never needs z-index games with the text content above it (a real ::before overlay + z-index attempt on the same case hid the text entirely -- this project's markup nests it in ways that made manual stacking fragile; box-shadow sidesteps that class of bug entirely). ───────────────────────────────────────────── */ .vc_row:has(.sc_section.section_style_white_text_section) .vc_parallax-inner { filter: brightness(0.42) saturate(1.05); } .vc_row:has(.sc_section.section_style_white_text_section):not(:has(.vc_parallax-inner)) { box-shadow: inset 0 0 0 2000px rgba(8, 14, 26, .5); } /* Pre-Flight fix ("Form Contrast Check"): theme.css's own placeholder * color (#898b92, style.css's base form-control rule) measures 3.4:1 * against a white field -- computed with the same WCAG formula used for * every other contrast fix this session, not eyeballed -- fails the 4.5:1 * floor. Scoped to placeholder text only, not the color a visitor's own * typed input renders in (browsers use a separate, already-dark default * for actual value text, unaffected by this). #6b6d75 measures 5.16:1, * still visibly a "hint", not confusable with a filled value. */ .page_content_wrap input::placeholder, .page_content_wrap textarea::placeholder { color: #6B6D75 !important; opacity: 1 !important; } .page_content_wrap input::-webkit-input-placeholder, .page_content_wrap textarea::-webkit-input-placeholder { color: #6B6D75 !important; } /* Anti-slop audit fix (browser-verified): trx_clients' own .sc_client_image * forces every partner logo into a fixed square box with object-fit:fill. * Real logos are almost never square -- confirmed against the actual * uploaded files, e.g. topasia.png is 240x26px (9:1 wordmark). Forced into * a 167x167 square with `fill`, it stretches into an unreadable smear, not * a logo -- a real trust problem on a B2B page that exists to prove GKL's * partner network. `contain` lets every logo keep its native proportions * inside the same box, letterboxed instead of distorted. */ .sc_client_image img { object-fit: contain !important; } /* Theme-fidelity correction: browsing the theme's real demo * (logistic-company.themerex.net) showed its own "Core Capabilities" * section (identical shortcode/style to this one, services-5 with a * center photo) uses a plain light-fill icon circle, not a solid brand * square -- confirmed by computed style (background: #ebebeb, icon: * #555862, hover fills #3ea2ee). That fill/no-fill choice is genuinely * the theme's own signature for this specific pattern, not an * inconsistency to standardize away. Keeping that shape, but tinting it * with GKL's own brand navy instead of the theme's neutral gray, per * the brand-color decision for this section -- theme structure, GKL * color. */ .gk-capabilities .sc_services_style_services-5 .sc_icon { background-color: rgba(37, 46, 68, .08); color: var(--gk-navy); } .gk-capabilities .sc_services_style_services-5 .sc_icon:hover, .gk-capabilities .sc_services_style_services-5 a:hover .sc_icon { background-color: var(--gk-cyan); color: #fff; } /* gioi-thieu.html "Giá Trị Cốt Lõi": the 5-item icon-circle treatment * this class used to style (cyan-ring circle + glyph, traced from the * Company Profile PDF page 2) was removed -- user-reported it as reading * "ai slop" once seen live: 2 different icon styles (orange filled * square for Tầm Nhìn/Sứ Mệnh, cyan outline circle for the 5 values) * stacked in the same section, plus 5 near-identical icon+bold-word+ * generic-one-liner cards is the textbook generic "core values" pattern. * Replaced with a plain cyan top-border accent (see gioi-thieu.html) -- * no icon at all, real content from the PDF kept, decorative repetition * dropped. Class no longer referenced anywhere in content/. */ /* Pre-Flight fix ("Form Contrast Check" / "No placeholder-as-label. * Ever."): the quote form (content/forms/bao-gia.html) only ever had * placeholder text standing in for a real label -- once a screen * reader user (or anyone relying on autofill/browser field detection) * focuses the field, the placeholder is the only description of what * it's for, and disappears once text is typed. Every field now has a * real