/* * Pharaon Company Profile — page styling * * SCOPE RULE: every selector starts at .ph-company-profile (a body class added * only on the /company-profile/ page). Nothing here can reach another page, the * header, the footer, or a global Elementor class. * * TYPOGRAPHY RULE: no font-family is declared anywhere in this file. Headings * inherit --themeht-typography-secondary-font-family and body copy inherits * --themeht-typography-body-font-family from the Renvo design system. Only * size, weight, line-height, letter-spacing and case are set here. */ /* * ELEMENTOR KIT DEFAULTS * * The Elementor kit on this site has no global typography or colour set, so * Elementor emits its own factory defaults and applies them to core widgets: * * .elementor-widget-heading .elementor-heading-title * font-family: var(--e-global-typography-primary-font-family) -> Roboto * color: var(--e-global-color-primary) -> #6EC1E4 * .elementor-widget-text-editor * font-family: var(--e-global-typography-text-font-family) -> Roboto * * Left alone, every Heading and Text Editor on this page would render in Roboto * at Elementor's placeholder cyan instead of the Renvo design system. Rather * than declaring a font-family anywhere — or editing the kit, which would change * every page on the site — the kit variables are re-pointed at the Renvo * variables for the duration of this page. No new family is introduced and no * font file is requested: these are the families the theme already loads. * * The selector carries an element to outrank .elementor-kit-7, which sits on the * same element, independently of stylesheet order. */ body.ph-company-profile { --e-global-typography-primary-font-family: var(--themeht-typography-secondary-font-family); --e-global-typography-secondary-font-family: var(--themeht-typography-secondary-font-family); --e-global-typography-text-font-family: var(--themeht-typography-body-font-family); --e-global-typography-accent-font-family: var(--themeht-typography-body-font-family); --e-global-typography-primary-font-weight: 500; --e-global-typography-secondary-font-weight: 500; --e-global-typography-text-font-weight: 400; --e-global-typography-accent-font-weight: 500; --e-global-color-primary: var(--themeht-text-color, #200043); --e-global-color-secondary: var(--themeht-text-color, #200043); --e-global-color-text: var(--themeht-body-color, #444444); --e-global-color-accent: var(--themeht-primary-color, #273791); } /* ------------------------------------------------------------------ tokens */ .ph-company-profile { /* brand — inherited from Renvo where a global exists */ --ph-blue: var(--themeht-primary-color, #273791); --ph-blue-deep: #101a46; --ph-blue-ink: #0a0f2e; --ph-orange: #f5901f; /* orange as small text on a light surface: #f5901f is 2.36:1 on white, this * is 5.8:1 and still reads as the same accent */ --ph-orange-ink: #9a5200; --ph-ink: var(--themeht-text-color, #200043); --ph-body: var(--themeht-body-color, #444444); --ph-muted: #6b7280; --ph-light: #f5f7fa; --ph-line: #e4e7ee; --ph-line-dark: rgba(255, 255, 255, .16); --ph-white: #fff; /* spacing scale */ --ph-2: 8px; --ph-3: 12px; --ph-4: 16px; --ph-5: 24px; --ph-6: 32px; --ph-7: 48px; --ph-8: 64px; --ph-9: 80px; --ph-10: 96px; --ph-11: 120px; /* geometry */ --ph-r-img: 12px; --ph-r-card: 14px; --ph-r-sm: 6px; /* runtime measurements, overwritten by cp.js */ --ph-hdr-static: 198px; /* header height in normal flow */ --ph-hdr-h: 128px; /* header height once it is fixed */ --ph-nav-h: 52px; /* profile section navigator */ } /* ------------------------------------------------- section frame + rhythm */ /* Vertical section padding is set through the Elementor padding control on each * section container, so an administrator can change section rhythm in the editor. * Only the anchor offset lives here. */ .ph-company-profile .ph-profile-section { scroll-margin-top: calc(var(--ph-hdr-h) + var(--ph-nav-h) + 16px); } .ph-company-profile .ph-tone-light { background-color: var(--ph-light); } .ph-company-profile .ph-tone-white { background-color: var(--ph-white); } .ph-company-profile .ph-tone-dark { background-color: var(--ph-blue-deep); color: rgba(255, 255, 255, .78); } /* The type patterns below colour .elementor-heading-title directly, so the * dark-tone overrides have to reach the same element to win. */ .ph-company-profile .ph-tone-dark .ph-h2 .elementor-heading-title, .ph-company-profile .ph-tone-dark .ph-h3 .elementor-heading-title, .ph-company-profile .ph-tone-dark .ph-lead .elementor-heading-title, .ph-company-profile .ph-tone-dark .ph-statement-label .elementor-heading-title, .ph-company-profile .ph-on-image .ph-h2 .elementor-heading-title, .ph-company-profile .ph-on-image .ph-h3 .elementor-heading-title, .ph-company-profile .ph-tone-dark h2, .ph-company-profile .ph-tone-dark h3, .ph-company-profile .ph-tone-dark h4 { color: var(--ph-white); } .ph-company-profile .ph-tone-dark .ph-body p, .ph-company-profile .ph-tone-dark .ph-body ul, .ph-company-profile .ph-tone-dark .ph-body ol, .ph-company-profile .ph-on-image .ph-body p, .ph-company-profile .ph-tone-dark p { color: rgba(255, 255, 255, .76); } /* ---------------------------------------------------------- type patterns */ .ph-company-profile .ph-eyebrow .elementor-heading-title { font-size: 12px; font-weight: 700; line-height: 1.4; letter-spacing: .2em; text-transform: uppercase; color: var(--ph-blue); display: inline-flex; align-items: center; gap: 10px; } .ph-company-profile .ph-eyebrow .elementor-heading-title::before { content: ""; width: 26px; height: 2px; background: var(--ph-orange); flex: 0 0 26px; } .ph-company-profile .ph-tone-dark .ph-eyebrow .elementor-heading-title, .ph-company-profile .ph-on-image .ph-eyebrow .elementor-heading-title { color: var(--ph-orange); } .ph-company-profile .ph-h2 .elementor-heading-title { font-size: clamp(2rem, 3.4vw, 3.1rem); line-height: 1.1; font-weight: 500; letter-spacing: -.015em; color: var(--ph-ink); max-width: 22ch; } .ph-company-profile .ph-h2-wide .elementor-heading-title { max-width: 34ch; } .ph-company-profile .ph-h3 .elementor-heading-title { font-size: 1.3125rem; line-height: 1.35; font-weight: 500; letter-spacing: -.005em; color: var(--ph-ink); } .ph-company-profile .ph-lead .elementor-heading-title { font-size: clamp(1.125rem, 1.5vw, 1.375rem); line-height: 1.55; font-weight: 400; letter-spacing: -.005em; color: var(--ph-ink); max-width: 46ch; } .ph-company-profile .ph-body p, .ph-company-profile .ph-body ul, .ph-company-profile .ph-body ol { font-size: 1rem; line-height: 1.75; color: var(--ph-body); margin-bottom: 1.15em; } .ph-company-profile .ph-body p:last-child, .ph-company-profile .ph-body ul:last-child { margin-bottom: 0; } .ph-company-profile .ph-body-narrow { max-width: 64ch; } /* thin rule used to separate a block from the one above it */ .ph-company-profile .ph-rule .elementor-divider-separator { border-top-color: var(--ph-line) !important; } .ph-company-profile .ph-tone-dark .ph-rule .elementor-divider-separator, .ph-company-profile .ph-on-image .ph-rule .elementor-divider-separator { border-top-color: var(--ph-line-dark) !important; } /* ---------------------------------------------------------------- buttons */ .ph-company-profile .ph-btn .elementor-button { display: inline-flex; align-items: center; gap: 10px; padding: 17px 30px; border-radius: 8px; font-size: .9375rem; font-weight: 600; letter-spacing: .01em; line-height: 1.2; border: 1px solid transparent; transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease; } .ph-company-profile .ph-btn .elementor-button:hover { transform: translateY(-2px); } .ph-company-profile .ph-btn-primary .elementor-button { background-color: var(--ph-orange); color: #1b1200; } .ph-company-profile .ph-btn-primary .elementor-button:hover { background-color: #ffa338; } .ph-company-profile .ph-btn-blue .elementor-button { background-color: var(--ph-blue); color: var(--ph-white); } .ph-company-profile .ph-btn-blue .elementor-button:hover { background-color: #1d2b74; } .ph-company-profile .ph-btn-ghost .elementor-button { background-color: transparent; color: var(--ph-white); border-color: rgba(255, 255, 255, .45); } .ph-company-profile .ph-btn-ghost .elementor-button:hover { background-color: rgba(255, 255, 255, .12); border-color: var(--ph-white); } .ph-company-profile .ph-btn-outline .elementor-button { background-color: transparent; color: var(--ph-blue); border-color: var(--ph-line); } .ph-company-profile .ph-btn-outline .elementor-button:hover { background-color: var(--ph-blue); border-color: var(--ph-blue); color: var(--ph-white); } /* quiet text link with a moving arrow */ .ph-company-profile .ph-link .elementor-button { background: none; border: 0; padding: 0; color: var(--ph-blue); font-size: .9375rem; font-weight: 600; letter-spacing: .01em; display: inline-flex; align-items: center; gap: 8px; } .ph-company-profile .ph-link .elementor-button::after { content: ""; width: 18px; height: 8px; background: currentColor; clip-path: polygon(0 3px, 11px 3px, 11px 0, 18px 4px, 11px 8px, 11px 5px, 0 5px); transition: transform .25s ease; } .ph-company-profile .ph-link .elementor-button:hover { color: var(--ph-orange-ink); } .ph-company-profile .ph-link .elementor-button:hover::after { transform: translateX(5px); } .ph-company-profile .ph-tone-dark .ph-link .elementor-button { color: var(--ph-white); } .ph-company-profile .ph-tone-dark .ph-link .elementor-button:hover { color: var(--ph-orange); } /* * KEYBOARD FOCUS * * Renvo removes every focus ring site-wide: * * a, button, input { outline: medium none !important; } base.css:24 * * so a keyboard visitor gets no indication of where they are. !important is the * only way to answer !important, and it is confined to this page. The ring is * drawn with box-shadow as well as outline so it survives the ancestors that * clip overflow, such as the bento tiles and the swatch grid. */ .ph-company-profile a:focus-visible, .ph-company-profile button:focus-visible, .ph-company-profile .elementor-button:focus-visible, .ph-company-profile .ph-profile-nav__link:focus-visible { outline: 3px solid var(--ph-orange) !important; outline-offset: 3px !important; box-shadow: 0 0 0 6px rgba(245, 144, 31, .28); border-radius: var(--ph-r-sm); } /* on the dark sections the orange ring needs a light halo to stay separable */ .ph-company-profile .ph-tone-dark a:focus-visible, .ph-company-profile .ph-tone-dark button:focus-visible, .ph-company-profile .ph-tone-dark .elementor-button:focus-visible, .ph-company-profile .ph-on-image a:focus-visible, .ph-company-profile .ph-on-image .elementor-button:focus-visible { box-shadow: 0 0 0 6px rgba(255, 255, 255, .22); } /* ------------------------------------------------------------------- grids */ /* * Elementor lays containers out with flex, and a flex-wrap row of children at * width:25% cannot hold four across once a gap is added — the fourth wraps. * These classes switch the container to grid so the column count is exact; the * gap still comes from the Elementor gap control, so spacing stays editable. * Children of a .ph-grid-* container therefore carry no width setting. */ .ph-company-profile [class*="ph-grid-"] { display: grid; } .ph-company-profile .ph-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ph-company-profile .ph-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ph-company-profile .ph-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .ph-company-profile .ph-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .ph-company-profile .ph-grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } @media (max-width: 1200px) { .ph-company-profile .ph-grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ph-company-profile .ph-grid-6 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 1024px) { .ph-company-profile .ph-grid-3, .ph-company-profile .ph-grid-4, .ph-company-profile .ph-grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ph-company-profile .ph-grid-6 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .ph-company-profile .ph-grid-2 { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 767px) { .ph-company-profile .ph-grid-3, .ph-company-profile .ph-grid-4, .ph-company-profile .ph-grid-5 { grid-template-columns: minmax(0, 1fr); } .ph-company-profile .ph-grid-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* ------------------------------------------------------------------ images */ .ph-company-profile .ph-img img { border-radius: var(--ph-r-img); display: block; width: 100%; height: auto; } .ph-company-profile .ph-img-cover img { width: 100%; height: 100%; object-fit: cover; } /* =========================================================== 00 NAVIGATOR */ .ph-company-profile .ph-profile-nav { position: fixed; top: var(--ph-hdr-h); left: 0; right: 0; z-index: 500; background: rgba(255, 255, 255, .92); backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--ph-line); transform: translateY(-115%); transition: transform .35s ease, opacity .35s ease; opacity: 0; pointer-events: none; } .ph-company-profile .ph-profile-nav.is-visible { transform: translateY(0); opacity: 1; pointer-events: auto; } .ph-company-profile .ph-profile-nav__inner { max-width: 1320px; margin: 0 auto; padding: 0 15px; display: flex; align-items: center; gap: 4px; overflow-x: auto; scrollbar-width: none; /* A literal height, not var(--ph-nav-h): cp.js measures the rendered bar to * set that variable, so reading it back here would be circular. */ height: 52px; } .ph-company-profile .ph-profile-nav__inner::-webkit-scrollbar { display: none; } .ph-company-profile .ph-profile-nav__link { flex: 0 0 auto; padding: 8px 13px; border-radius: 6px; font-size: .8125rem; font-weight: 600; letter-spacing: .02em; color: var(--ph-muted); white-space: nowrap; transition: color .2s ease, background-color .2s ease; position: relative; } .ph-company-profile .ph-profile-nav__link:hover { color: var(--ph-blue); background: rgba(39, 55, 145, .07); } .ph-company-profile .ph-profile-nav__link[aria-current="true"] { color: var(--ph-blue); background: rgba(39, 55, 145, .09); } .ph-company-profile .ph-profile-nav__link[aria-current="true"]::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: 2px; height: 2px; background: var(--ph-orange); border-radius: 2px; } /* =============================================================== 01 HERO */ .ph-company-profile .ph-profile-hero { position: relative; background-color: var(--ph-blue-ink); background-position: center 35%; background-size: cover; background-repeat: no-repeat; overflow: hidden; } .ph-company-profile .ph-profile-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 15, 46, .58) 0%, rgba(10, 15, 46, .70) 42%, rgba(10, 15, 46, .93) 100%), linear-gradient(96deg, rgba(16, 26, 70, .78) 0%, rgba(16, 26, 70, .12) 72%); pointer-events: none; } .ph-company-profile .ph-profile-hero > .e-con-inner { position: relative; z-index: 1; min-height: max(600px, calc(100svh - var(--ph-hdr-static))); justify-content: flex-end; padding-top: var(--ph-7); padding-bottom: var(--ph-7); } .ph-company-profile .ph-hero-h1 .elementor-heading-title { font-size: clamp(2.25rem, 4.7vw, 4.15rem); line-height: 1.05; font-weight: 500; letter-spacing: -.025em; color: var(--ph-white); max-width: 19ch; text-wrap: balance; } .ph-company-profile .ph-hero-lead .elementor-heading-title { font-size: clamp(1.1875rem, 1.7vw, 1.5rem); line-height: 1.45; font-weight: 400; color: var(--ph-white); max-width: 48ch; } .ph-company-profile .ph-hero-body p { font-size: 1.0625rem; line-height: 1.72; color: rgba(255, 255, 255, .8); max-width: 64ch; } .ph-company-profile .ph-hero-cta { flex-wrap: wrap; } /* hero + capability statistic row */ .ph-company-profile .ph-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; } .ph-company-profile .ph-stat { padding: var(--ph-4) var(--ph-5) 0 0; border-top: 1px solid var(--ph-line-dark); position: relative; } .ph-company-profile .ph-stat-value .elementor-heading-title { font-size: clamp(1.875rem, 2.9vw, 2.75rem); line-height: 1.05; font-weight: 500; letter-spacing: -.02em; color: var(--ph-white); font-variant-numeric: tabular-nums; } .ph-company-profile .ph-stat-value .elementor-heading-title .ph-unit { font-size: .5em; font-weight: 500; letter-spacing: 0; margin-left: .18em; color: var(--ph-orange); } .ph-company-profile .ph-stat-label .elementor-heading-title { font-size: .8125rem; line-height: 1.45; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .74); margin-top: 8px; } /* =================================================== 02 COMPANY OVERVIEW */ .ph-company-profile .ph-media-stack { position: relative; } .ph-company-profile .ph-media-stack .ph-img-lead img { aspect-ratio: 4 / 3; object-fit: cover; } .ph-company-profile .ph-media-stack .ph-img-inset { width: 46%; margin-top: -14%; margin-left: auto; position: relative; z-index: 2; } .ph-company-profile .ph-media-stack .ph-img-inset img { aspect-ratio: 1 / 1; object-fit: cover; border: 8px solid var(--ph-white); border-radius: var(--ph-r-img); box-shadow: 0 18px 44px rgba(16, 26, 70, .13); } .ph-company-profile .ph-tags .elementor-heading-title { display: flex; flex-wrap: wrap; gap: 8px; } .ph-company-profile .ph-tags p, .ph-company-profile .ph-tag-list ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; } .ph-company-profile .ph-tag-list ul li { font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ph-blue); background: rgba(39, 55, 145, .07); border: 1px solid rgba(39, 55, 145, .14); border-radius: 100px; padding: 7px 15px; line-height: 1.3; } .ph-company-profile .ph-tone-dark .ph-tag-list ul li { color: var(--ph-white); background: rgba(255, 255, 255, .08); border-color: var(--ph-line-dark); } /* ============================================ 03 VISION MISSION + VALUES */ .ph-company-profile .ph-statement { border-left: 3px solid var(--ph-orange); padding-left: var(--ph-5); } .ph-company-profile .ph-statement-label .elementor-heading-title { font-size: .75rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--ph-blue); margin-bottom: 10px; } .ph-company-profile .ph-statement-body p { font-size: 1.0625rem; line-height: 1.7; color: var(--ph-ink); } .ph-company-profile .ph-value-card { background: var(--ph-white); border: 1px solid var(--ph-line); border-radius: var(--ph-r-card); padding: var(--ph-6) var(--ph-5) calc(var(--ph-6) + 2px); transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease; } .ph-company-profile .ph-value-card:hover { border-color: rgba(39, 55, 145, .3); box-shadow: 0 16px 40px rgba(16, 26, 70, .09); transform: translateY(-3px); } .ph-company-profile .ph-value-icon .elementor-icon { font-size: 26px; color: var(--ph-blue); width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center; background: rgba(39, 55, 145, .07); border-radius: 10px; } .ph-company-profile .ph-value-card:hover .ph-value-icon .elementor-icon { background: var(--ph-blue); color: var(--ph-white); } .ph-company-profile .ph-value-icon .elementor-icon, .ph-company-profile .ph-value-icon .elementor-icon i { transition: background-color .3s ease, color .3s ease; } /* ================================================== 04 GROWTH TIMELINE */ /* An explicit grid, rather than five flex children at 20%, so the columns are * exact. Each milestone is a flex column whose fact table is pushed to the * bottom, which keeps the fact rows aligned across all five even though the * 2026 milestone carries an extra status badge. */ .ph-company-profile .ph-timeline { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); } .ph-company-profile .ph-tl-item { display: flex; flex-direction: column; } .ph-company-profile .ph-tl-facts { margin-top: auto; } .ph-company-profile .ph-timeline::before, .ph-company-profile .ph-timeline::after { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 2px; border-radius: 2px; } .ph-company-profile .ph-timeline::before { background: var(--ph-line); } .ph-company-profile .ph-timeline::after { background: linear-gradient(90deg, var(--ph-blue), var(--ph-orange)); transform: scaleX(var(--ph-progress, 0)); transform-origin: left center; transition: transform .6s cubic-bezier(.22, .68, .32, 1); } .ph-company-profile .ph-tl-item { position: relative; padding-top: var(--ph-6); padding-right: var(--ph-5); } .ph-company-profile .ph-tl-item::before { content: ""; position: absolute; top: 0; left: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--ph-white); border: 2px solid var(--ph-line); transition: border-color .35s ease, background-color .35s ease, box-shadow .35s ease; } .ph-company-profile .ph-tl-item.is-reached::before { border-color: var(--ph-blue); background: var(--ph-blue); box-shadow: 0 0 0 5px rgba(39, 55, 145, .13); } .ph-company-profile .ph-tl-item--plan.is-reached::before { border-color: var(--ph-orange); background: var(--ph-orange); box-shadow: 0 0 0 5px rgba(245, 144, 31, .18); } .ph-company-profile .ph-tl-year .elementor-heading-title { font-size: clamp(1.75rem, 2.4vw, 2.25rem); line-height: 1; font-weight: 500; letter-spacing: -.02em; color: var(--ph-ink); font-variant-numeric: tabular-nums; } .ph-company-profile .ph-tl-badge .elementor-heading-title { display: inline-block; font-size: .6875rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: #8a4a00; background: rgba(245, 144, 31, .16); border: 1px solid rgba(245, 144, 31, .38); border-radius: 100px; padding: 5px 12px; margin-top: 10px; } .ph-company-profile .ph-tl-facts ul { list-style: none; margin: 14px 0 0; padding: 0; } .ph-company-profile .ph-tl-facts ul li { font-size: .9375rem; line-height: 1.5; color: var(--ph-body); padding: 7px 0; border-bottom: 1px solid var(--ph-line); display: flex; justify-content: space-between; gap: var(--ph-3); } .ph-company-profile .ph-tl-facts ul li:last-child { border-bottom: 0; } .ph-company-profile .ph-tl-facts ul li strong { font-weight: 600; color: var(--ph-ink); font-variant-numeric: tabular-nums; white-space: nowrap; } /* ============================================= 05 MANUFACTURING CAPABILITY */ .ph-company-profile .ph-cap-card { border-top: 2px solid var(--ph-line-dark); padding-top: var(--ph-5); transition: border-color .3s ease; } .ph-company-profile .ph-cap-card:hover { border-top-color: var(--ph-orange); } .ph-company-profile .ph-cap-value .elementor-heading-title { font-size: clamp(2.25rem, 3.4vw, 3.25rem); line-height: 1; font-weight: 500; letter-spacing: -.03em; color: var(--ph-white); font-variant-numeric: tabular-nums; } .ph-company-profile .ph-cap-value .elementor-heading-title .ph-unit { font-size: .42em; letter-spacing: 0; margin-left: .16em; color: var(--ph-orange); } .ph-company-profile .ph-cap-label .elementor-heading-title { font-size: .9375rem; line-height: 1.5; font-weight: 500; color: rgba(255, 255, 255, .72); margin-top: 12px; max-width: 26ch; } .ph-company-profile .ph-cap-media img { border-radius: var(--ph-r-img); aspect-ratio: 16 / 10; object-fit: cover; } /* ==================================================== 06 FACTORY II SCALE */ .ph-company-profile .ph-factory-plate { position: relative; background: var(--ph-white); border: 1px solid var(--ph-line); border-radius: var(--ph-r-card); padding: var(--ph-8) var(--ph-7); overflow: hidden; } /* plan grid — a drawing-board motif, not a photograph */ .ph-company-profile .ph-factory-plate::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(39, 55, 145, .07) 1px, transparent 1px), linear-gradient(to bottom, rgba(39, 55, 145, .07) 1px, transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(120% 90% at 88% 10%, #000 0%, transparent 72%); -webkit-mask-image: radial-gradient(120% 90% at 88% 10%, #000 0%, transparent 72%); pointer-events: none; } .ph-company-profile .ph-factory-plate > * { position: relative; z-index: 1; } .ph-company-profile .ph-mega .elementor-heading-title { font-size: clamp(3.5rem, 9.5vw, 8.5rem); line-height: .88; font-weight: 500; letter-spacing: -.045em; color: var(--ph-blue); font-variant-numeric: tabular-nums; } .ph-company-profile .ph-mega .elementor-heading-title .ph-unit { font-size: .3em; letter-spacing: -.01em; color: var(--ph-orange-ink); margin-left: .1em; } .ph-company-profile .ph-mega-label .elementor-heading-title { font-size: .875rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ph-muted); margin-top: var(--ph-4); } .ph-company-profile .ph-status-badge .elementor-heading-title { display: inline-flex; align-items: center; gap: 9px; font-size: .75rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: #8a4a00; background: rgba(245, 144, 31, .14); border: 1px solid rgba(245, 144, 31, .4); border-radius: 100px; padding: 8px 16px; } .ph-company-profile .ph-status-badge .elementor-heading-title::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ph-orange); } .ph-company-profile .ph-plan-stat { border-left: 2px solid var(--ph-line); padding-left: var(--ph-5); } .ph-company-profile .ph-plan-value .elementor-heading-title { font-size: clamp(1.625rem, 2.4vw, 2.125rem); line-height: 1.05; font-weight: 500; letter-spacing: -.02em; color: var(--ph-ink); font-variant-numeric: tabular-nums; } .ph-company-profile .ph-plan-value .elementor-heading-title .ph-unit { font-size: .58em; font-weight: 500; letter-spacing: 0; margin-left: .3em; color: var(--ph-orange-ink); } .ph-company-profile .ph-plan-label .elementor-heading-title { font-size: .8125rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ph-muted); margin-top: 8px; max-width: 24ch; } .ph-company-profile .ph-address-block p { font-size: .9375rem; line-height: 1.65; color: var(--ph-body); } /* ============================================ 07 TECHNOLOGY / 08 QUALITY */ .ph-company-profile .ph-steps { position: relative; } .ph-company-profile .ph-step { position: relative; } .ph-company-profile .ph-step-index .elementor-heading-title { font-size: .875rem; font-weight: 700; letter-spacing: .1em; color: var(--ph-orange-ink); font-variant-numeric: tabular-nums; } .ph-company-profile .ph-step-rule .elementor-divider { padding-block: 18px; } .ph-company-profile .ph-step-rule .elementor-divider-separator { border-top-color: var(--ph-line) !important; position: relative; } /* the node that sits on the process line */ .ph-company-profile .ph-step-rule .elementor-divider::after { content: ""; position: absolute; left: 0; top: 50%; width: 9px; height: 9px; border-radius: 50%; background: var(--ph-line); transform: translateY(-50%); transition: background-color .35s ease, box-shadow .35s ease; } .ph-company-profile .ph-step.is-in .ph-step-rule .elementor-divider::after { background: var(--ph-blue); box-shadow: 0 0 0 4px rgba(39, 55, 145, .12); } .ph-company-profile .ph-step-body p { font-size: .9375rem; line-height: 1.7; color: var(--ph-body); max-width: 34ch; } .ph-company-profile .ph-attr-list ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ph-4); } .ph-company-profile .ph-attr-list ul li { font-size: .9375rem; font-weight: 500; line-height: 1.4; color: var(--ph-ink); padding: 16px 18px; background: var(--ph-white); border: 1px solid var(--ph-line); border-radius: 10px; display: flex; align-items: center; gap: 11px; } .ph-company-profile .ph-attr-list ul li::before { content: ""; flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--ph-orange); } .ph-company-profile .ph-qc-media img { border-radius: var(--ph-r-img); aspect-ratio: 3 / 2; object-fit: cover; } /* ================================================== 09 CERTIFICATIONS */ .ph-company-profile .ph-profile-certifications { background-color: var(--ph-blue-ink); background-position: center; background-size: cover; background-repeat: no-repeat; position: relative; } .ph-company-profile .ph-profile-certifications::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 15, 46, .86), rgba(10, 15, 46, .94)); pointer-events: none; } .ph-company-profile .ph-profile-certifications > .e-con-inner { position: relative; z-index: 1; } /* * The shared evidence carousel draws its pagination as 9px dots. That is well * under a comfortable touch target, so on this page each dot keeps its 9px * appearance while a transparent pseudo-element gives it a 44px hit area. The * component itself is untouched, so the homepage is unaffected. */ .ph-company-profile .pharaon-evidence-carousel .pec-dots { gap: 0; } .ph-company-profile .pharaon-evidence-carousel .pec-dot { position: relative; margin: 0 9px; } .ph-company-profile .pharaon-evidence-carousel .pec-dot::after { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); } .ph-company-profile .ph-evidence-facts ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } .ph-company-profile .ph-evidence-facts ul li { font-size: .8125rem; font-weight: 500; letter-spacing: .02em; line-height: 1.4; color: rgba(255, 255, 255, .88); background: rgba(255, 255, 255, .07); border: 1px solid var(--ph-line-dark); border-radius: 100px; padding: 9px 17px; } .ph-company-profile .ph-evidence-facts ul li strong { color: var(--ph-white); font-weight: 600; } /* =================================================== 10 PRODUCT PORTFOLIO */ .ph-company-profile .ph-prod-card { background: var(--ph-white); border: 1px solid var(--ph-line); border-radius: var(--ph-r-card); overflow: hidden; transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease; } /* the body column fills the card so every "View products" link lands on one line */ .ph-company-profile .ph-prod-card > .e-con:last-child { flex-grow: 1; } .ph-company-profile .ph-prod-card .ph-link { margin-top: auto; padding-top: var(--ph-4); } .ph-company-profile .ph-prod-card:hover { border-color: rgba(39, 55, 145, .28); box-shadow: 0 18px 44px rgba(16, 26, 70, .1); transform: translateY(-3px); } .ph-company-profile .ph-prod-figure { background: var(--ph-light); border-bottom: 1px solid var(--ph-line); padding: var(--ph-5); } .ph-company-profile .ph-prod-figure img { width: 100%; height: 132px; object-fit: contain; border-radius: 0; transition: transform .4s ease; mix-blend-mode: multiply; } .ph-company-profile .ph-prod-card:hover .ph-prod-figure img { transform: scale(1.045); } .ph-company-profile .ph-prod-index .elementor-heading-title { font-size: .75rem; font-weight: 700; letter-spacing: .12em; color: var(--ph-orange-ink); font-variant-numeric: tabular-nums; } .ph-company-profile .ph-prod-spec .elementor-heading-title { font-size: .8125rem; font-weight: 500; line-height: 1.5; letter-spacing: .01em; color: var(--ph-blue); font-variant-numeric: tabular-nums; } .ph-company-profile .ph-prod-body p { font-size: .875rem; line-height: 1.65; color: var(--ph-body); } /* ZICO swatch grid */ .ph-company-profile .ph-swatch { position: relative; } .ph-company-profile .ph-swatch figure { position: relative; margin: 0; overflow: hidden; border-radius: 10px; line-height: 0; } .ph-company-profile .ph-swatch img { aspect-ratio: 1 / 1; object-fit: cover; border-radius: 0; display: block; width: 100%; transition: transform .45s ease; } .ph-company-profile .ph-swatch:hover img { transform: scale(1.05); } .ph-company-profile .ph-swatch .widget-image-caption { position: absolute; left: 10px; bottom: 10px; margin: 0; font-size: .6875rem; font-weight: 700; letter-spacing: .09em; color: #171717; background: rgba(255, 255, 255, .93); border-radius: 5px; padding: 4px 9px; line-height: 1.2; } .ph-company-profile .ph-swatch .widget-image-caption { line-height: 1.2; } /* ============================================ 11 APPLICATIONS BENTO */ /* * Elementor's optimised-markup experiment is active on this site, so an Image * widget renders as .elementor-widget-image > figure.wp-caption with no * .elementor-widget-container in between. Everything below is anchored on the *

, which is present in both markup modes; the optional wrapper only * needs its height passed through. */ .ph-company-profile .ph-bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 172px; gap: var(--ph-4); } .ph-company-profile .ph-bento .ph-tile, .ph-company-profile .ph-bento .ph-tile > .elementor-widget-container { height: 100%; } .ph-company-profile .ph-bento .ph-tile figure { position: relative; height: 100%; margin: 0; overflow: hidden; border-radius: var(--ph-r-img); } .ph-company-profile .ph-bento .ph-tile img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; display: block; transition: transform .6s cubic-bezier(.22, .68, .32, 1); } .ph-company-profile .ph-bento .ph-tile:hover img { transform: scale(1.055); } .ph-company-profile .ph-bento .ph-tile figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 15, 46, 0) 40%, rgba(10, 15, 46, .82) 100%); pointer-events: none; transition: opacity .35s ease; opacity: .92; } .ph-company-profile .ph-bento .ph-tile:hover figure::after { opacity: 1; } .ph-company-profile .ph-bento .ph-tile .widget-image-caption { position: absolute; left: 18px; bottom: 15px; right: 18px; margin: 0; z-index: 2; font-size: .75rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--ph-white); line-height: 1.35; text-align: left; text-shadow: 0 1px 10px rgba(10, 15, 46, .55); } .ph-company-profile .ph-tile-wide { grid-column: span 2; grid-row: span 2; } .ph-company-profile .ph-tile-tall { grid-column: span 1; grid-row: span 2; } /* ==================================================== 12 PARTNERS */ .ph-company-profile .ph-logo-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ph-4); } .ph-company-profile .ph-logo { background: var(--ph-white); border: 1px solid var(--ph-line); border-radius: var(--ph-r-card); padding: var(--ph-5) var(--ph-6); display: flex; align-items: center; justify-content: center; min-height: 132px; transition: border-color .3s ease, box-shadow .3s ease; } .ph-company-profile .ph-logo:hover { border-color: rgba(39, 55, 145, .26); box-shadow: 0 12px 30px rgba(16, 26, 70, .08); } .ph-company-profile .ph-logo img { max-height: 74px; width: auto; max-width: 100%; object-fit: contain; /* a rounded plate reads as deliberate on the marks whose own artwork carries a * dark background, and is invisible on the ones that do not */ border-radius: 4px; filter: grayscale(1) contrast(1.08); opacity: .84; transition: filter .35s ease, opacity .35s ease; } .ph-company-profile .ph-logo:hover img { filter: grayscale(0); opacity: 1; } /* ================================================ 13 SUSTAINABILITY */ .ph-company-profile .ph-pillar { border-top: 2px solid var(--ph-line); padding-top: var(--ph-5); transition: border-color .3s ease; } .ph-company-profile .ph-pillar:hover { border-top-color: var(--ph-blue); } .ph-company-profile .ph-pillar-icon .elementor-icon { font-size: 24px; color: var(--ph-blue); margin-bottom: var(--ph-3); display: inline-block; } .ph-company-profile .ph-safety-list ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ph-3) var(--ph-6); } .ph-company-profile .ph-safety-list ul li { font-size: .9375rem; line-height: 1.6; color: var(--ph-body); padding: 11px 0 11px 26px; border-bottom: 1px solid var(--ph-line); position: relative; } .ph-company-profile .ph-safety-list ul li::before { content: ""; position: absolute; left: 2px; top: 19px; width: 11px; height: 6px; border-left: 2px solid var(--ph-orange); border-bottom: 2px solid var(--ph-orange); transform: rotate(-45deg); } .ph-company-profile .ph-safety-list ul li strong { color: var(--ph-ink); font-weight: 600; } /* ====================================================== 14 MARKET REACH */ .ph-company-profile .ph-market-card { background: var(--ph-white); border: 1px solid var(--ph-line); border-radius: var(--ph-r-card); padding: var(--ph-7) var(--ph-6); position: relative; overflow: hidden; } .ph-company-profile .ph-market-card::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--ph-blue); } .ph-company-profile .ph-market-card--intl::after { background: var(--ph-orange); } .ph-company-profile .ph-market-label .elementor-heading-title { font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ph-muted); } /* ========================================================= 15 FINAL CTA */ .ph-company-profile .ph-profile-cta { position: relative; background-color: var(--ph-blue-ink); background-position: center; background-size: cover; background-repeat: no-repeat; overflow: hidden; } .ph-company-profile .ph-profile-cta::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(10, 15, 46, .95) 0%, rgba(16, 26, 70, .88) 52%, rgba(16, 26, 70, .82) 100%); pointer-events: none; } .ph-company-profile .ph-profile-cta > .e-con-inner { position: relative; z-index: 1; } .ph-company-profile .ph-cta-h2 .elementor-heading-title { font-size: clamp(2.125rem, 3.8vw, 3.5rem); line-height: 1.08; font-weight: 500; letter-spacing: -.025em; color: var(--ph-white); max-width: 20ch; } .ph-company-profile .ph-cta-body p { font-size: 1.0625rem; line-height: 1.72; color: rgba(255, 255, 255, .8); max-width: 56ch; } .ph-company-profile .ph-contact-item { border-top: 1px solid var(--ph-line-dark); padding-top: var(--ph-4); } .ph-company-profile .ph-contact-icon .elementor-icon { font-size: 18px; color: var(--ph-orange); } .ph-company-profile .ph-contact-label .elementor-heading-title { font-size: .6875rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: rgba(255, 255, 255, .55); margin-bottom: 6px; } .ph-company-profile .ph-contact-value p { font-size: .9375rem; line-height: 1.6; color: rgba(255, 255, 255, .9); margin: 0; } .ph-company-profile .ph-contact-value a { color: var(--ph-white); border-bottom: 1px solid rgba(255, 255, 255, .3); transition: color .25s ease, border-color .25s ease; } .ph-company-profile .ph-contact-value a:hover { color: var(--ph-orange); border-color: var(--ph-orange); } /* ================================================== reveal on scroll */ .ph-company-profile .ph-reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.22, .68, .32, 1), transform .7s cubic-bezier(.22, .68, .32, 1); will-change: opacity, transform; } .ph-company-profile .ph-reveal.is-in { opacity: 1; transform: none; } /* if the script never runs, nothing may stay invisible */ .ph-company-profile.ph-no-js .ph-reveal { opacity: 1; transform: none; } /* =============================================================== TABLET */ @media (max-width: 1200px) { .ph-company-profile .ph-bento { grid-auto-rows: 148px; } .ph-company-profile .ph-logo-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 1024px) { .ph-company-profile { --ph-nav-h: 0px; } /* the navigator would compete with the site header on small screens */ .ph-company-profile .ph-profile-nav { display: none; } .ph-company-profile .ph-h2 .elementor-heading-title { max-width: 26ch; } .ph-company-profile .ph-hero-h1 .elementor-heading-title { max-width: 24ch; } .ph-company-profile .ph-profile-hero > .e-con-inner { min-height: max(560px, calc(100svh - var(--ph-hdr-static))); } .ph-company-profile .ph-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ph-2) var(--ph-5); } .ph-company-profile .ph-stat { padding-right: 0; } .ph-company-profile .ph-attr-list ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ph-company-profile .ph-factory-plate { padding: var(--ph-7) var(--ph-6); } .ph-company-profile .ph-media-stack .ph-img-inset { width: 42%; margin-top: -12%; } /* the timeline becomes a vertical list */ .ph-company-profile .ph-timeline { grid-template-columns: minmax(0, 1fr); } .ph-company-profile .ph-timeline::before, .ph-company-profile .ph-timeline::after { left: 7px; right: auto; top: 8px; bottom: 8px; width: 2px; height: auto; } .ph-company-profile .ph-timeline::after { background: linear-gradient(180deg, var(--ph-blue), var(--ph-orange)); transform: scaleY(var(--ph-progress, 0)); transform-origin: center top; } .ph-company-profile .ph-tl-item { padding-top: 0; padding-left: var(--ph-7); padding-bottom: var(--ph-6); padding-right: 0; } .ph-company-profile .ph-tl-item:last-child { padding-bottom: 0; } .ph-company-profile .ph-tl-item::before { top: 6px; } .ph-company-profile .ph-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 156px; } .ph-company-profile .ph-tile-wide { grid-column: span 2; grid-row: span 2; } .ph-company-profile .ph-tile-tall { grid-column: span 1; grid-row: span 2; } } /* =============================================================== MOBILE */ @media (max-width: 767px) { .ph-company-profile .ph-h2 .elementor-heading-title, .ph-company-profile .ph-h2-wide .elementor-heading-title, .ph-company-profile .ph-hero-h1 .elementor-heading-title, .ph-company-profile .ph-cta-h2 .elementor-heading-title { max-width: none; } .ph-company-profile .ph-profile-hero { background-position: center 40%; } .ph-company-profile .ph-profile-hero > .e-con-inner { min-height: max(520px, calc(100svh - var(--ph-hdr-static))); padding-top: var(--ph-7); padding-bottom: var(--ph-6); } .ph-company-profile .ph-hero-h1 .elementor-heading-title { font-size: clamp(1.75rem, 7.6vw, 2.5rem); line-height: 1.12; letter-spacing: -.02em; } .ph-company-profile .ph-hero-lead .elementor-heading-title { font-size: 1.0625rem; } .ph-company-profile .ph-hero-body p { font-size: 1rem; line-height: 1.65; } .ph-company-profile .ph-hero-cta .elementor-widget { width: 100%; } .ph-company-profile .ph-hero-cta .elementor-button { width: 100%; justify-content: center; } .ph-company-profile .ph-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ph-company-profile .ph-stat-value .elementor-heading-title { font-size: 1.75rem; } .ph-company-profile .ph-stat-label .elementor-heading-title { font-size: .6875rem; letter-spacing: .05em; } .ph-company-profile .ph-attr-list ul, .ph-company-profile .ph-safety-list ul { grid-template-columns: minmax(0, 1fr); } .ph-company-profile .ph-media-stack .ph-img-inset { width: 50%; margin-top: -18%; } .ph-company-profile .ph-media-stack .ph-img-inset img { border-width: 6px; } .ph-company-profile .ph-factory-plate { padding: var(--ph-6) var(--ph-5); } .ph-company-profile .ph-mega .elementor-heading-title { font-size: clamp(2.75rem, 15vw, 4.25rem); } .ph-company-profile .ph-plan-stat { padding-left: var(--ph-4); } .ph-company-profile .ph-statement { padding-left: var(--ph-4); } .ph-company-profile .ph-step-body p { max-width: none; } .ph-company-profile .ph-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 122px; } .ph-company-profile .ph-tile-wide { grid-column: span 2; grid-row: span 2; } .ph-company-profile .ph-tile-tall { grid-column: span 1; grid-row: span 2; } .ph-company-profile .ph-bento .ph-tile .widget-image-caption { left: 12px; right: 12px; bottom: 11px; font-size: .625rem; letter-spacing: .1em; } .ph-company-profile .ph-logo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ph-3); } .ph-company-profile .ph-logo { min-height: 104px; padding: var(--ph-4); } .ph-company-profile .ph-logo img { max-height: 56px; } .ph-company-profile .ph-evidence-facts ul { justify-content: flex-start; } .ph-company-profile .ph-market-card { padding: var(--ph-6) var(--ph-5); } .ph-company-profile .ph-prod-figure img { height: 112px; } } @media (max-width: 380px) { .ph-company-profile .ph-bento { grid-auto-rows: 118px; } .ph-company-profile .ph-stat-value .elementor-heading-title { font-size: 1.5rem; } .ph-company-profile .ph-stats { gap: var(--ph-2) var(--ph-4); } } /* ================================================== reduced motion */ @media (prefers-reduced-motion: reduce) { .ph-company-profile .ph-reveal { opacity: 1 !important; transform: none !important; transition: none !important; } .ph-company-profile .ph-timeline::after { transition: none; } .ph-company-profile .ph-profile-nav { transition: none; } .ph-company-profile .ph-btn .elementor-button:hover, .ph-company-profile .ph-value-card:hover, .ph-company-profile .ph-prod-card:hover { transform: none; } .ph-company-profile .ph-bento .ph-tile:hover img, .ph-company-profile .ph-swatch:hover img, .ph-company-profile .ph-prod-card:hover .ph-prod-figure img { transform: none; } .ph-company-profile .ph-link .elementor-button:hover::after { transform: none; } }