.font-size-threerem{ font-size: 3rem; } .font-size-fourrem{ font-size: 4rem; } h2.subheading{ font-family: 'Roboto Condensed', Helvetica, Arial, sans-serif; font-weight: 400; line-height: 1.1; font-size: 2.5rem; } h2.subheading::after{ display: none !important; } .displaynone{ display: none; } /* =========================================================================== * BUTTON SYSTEM * * Three variants sharing one base, plus a `rightarrow` modifier: * .btn.btn-default solid orange, white text * .white-btn ghost — transparent with a white border; orange on hover * .green-btn solid green * .rightarrow adds a trailing arrow * * These are mirrored in custom_admin_css.css under `.ck-content` so the * CKEditor style dropdown previews them accurately. Keep the two in step. * * The old .white-btn (Roboto Condensed, square, inner shadow, white-on-hover) * is REPLACED rather than left alongside — it disagreed with the mockup's * button treatment on radius, font, and hover colour. * * `:not(.nav-item)` matters: the same class names are put on main-menu items * via the menu UI, where the class lands on the
  • . Without the guard the * list item itself would get a border and padding. The menu rendering of * these classes lives in css/navigation/header.css. * ======================================================================== */ .btn.btn-default, a.btn-default, a.white-btn, button.white-btn, .white-btn:not(.nav-item), a.green-btn, button.green-btn, .green-btn:not(.nav-item), /* Views' "Load More" pager. Views renders it as , which is not one of this site's classes, so it used to fall through to a leftover rule in global.css styled for the previous project. Aliased here rather than restyled separately, so it cannot drift from the real buttons again. */ .js-pager__items a.button { display: inline-flex; align-items: center; /* Explicit vertical-align, or variants sitting side by side in one

    don't line up: .btn.btn-default also picks up Bootstrap's `.btn`, which sets vertical-align:middle, while .white-btn / .green-btn fall back to the inline-flex default of `baseline` — a ~1.4px offset between two boxes of otherwise identical height. */ vertical-align: middle; gap: 0.5em; padding: 9px 20px; border-radius: 6px; border: 2px solid transparent; font-family: var(--display-font); /* 0.875rem (14px). rem, never px, so the buttons respect the user's browser text-size setting. */ font-size: 0.875rem; font-weight: 700; /* line-height must not be SMALLER than the font's own line box, or the glyphs overflow the content box asymmetrically and the text sits high. Plus Jakarta Sans reports ascent 17 + descent 4 = 21px at 16px, so 1.15 (18.4px) was clipping it — overflowing 2px above but only 0.61px below. `normal` lets the line box match the font, so flex centring is honest. Padding is trimmed to 9px to keep the button the same overall height. */ line-height: normal; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; text-shadow: none; box-shadow: none; cursor: pointer; transition: all 0.25s var(--ease); } /* --- Solid orange -------------------------------------------------------- */ .btn.btn-default, a.btn-default, .js-pager__items a.button { background-color: var(--phi-orange); border-color: var(--phi-orange); color: var(--white); } .btn.btn-default:hover, a.btn-default:hover, .btn.btn-default:focus, a.btn-default:focus, .js-pager__items a.button:hover, .js-pager__items a.button:focus { background-color: var(--phi-orange-hover); border-color: var(--phi-orange-hover); color: var(--white); } /* --- Ghost / white ------------------------------------------------------- */ a.white-btn, button.white-btn, .white-btn:not(.nav-item) { background-color: transparent; border-color: rgba(255, 255, 255, 0.5); color: var(--white); } a.white-btn:hover, button.white-btn:hover, .white-btn:not(.nav-item):hover, a.white-btn:focus, button.white-btn:focus { background-color: var(--phi-orange); border-color: var(--phi-orange); color: var(--white); } /* --- Solid green --------------------------------------------------------- */ a.green-btn, button.green-btn, .green-btn:not(.nav-item) { background-color: var(--phi-green); border-color: var(--phi-green); color: var(--white); } a.green-btn:hover, button.green-btn:hover, .green-btn:not(.nav-item):hover, a.green-btn:focus, button.green-btn:focus { background-color: #00401c; border-color: #00401c; color: var(--white); } /* --- Eyebrow subheadings -------------------------------------------------- The small uppercase label used above a heading, e.g. "Explore" / "Support". Same treatment as .mega-featured-label in the mega menu promo card, but with the display font added and no `opacity` (that only made sense over the dark card; on body content it would just wash the colour out). 0.6875rem = 11px. Mirrored in custom_admin_css.css for the CKEditor style dropdown. */ .orange-subheading, .green-subheading, .orange-subheading-flame, .green-subheading-flame, .green-subheading-flame-light { display: block; font-family: var(--display-font); font-size: 0.6875rem; font-weight: 700; line-height: 1.3; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 0.625rem; } .orange-subheading { color: var(--phi-orange); } .green-subheading { color: var(--phi-green); } /* Flame variants — the same eyebrow with the brand mark in front of it. The flame is a MASK filled by background-color, not an , so it takes currentColor and each variant only has to declare its colour. */ .orange-subheading-flame { color: var(--phi-orange); } .green-subheading-flame { color: var(--phi-green); } /* --phi-green is #005826, which reads well on white and goes muddy on a dark band. This is the same eyebrow in the lighter brand green for dark backgrounds. The flame is a mask filled by currentColor, so declaring the colour is all the variant has to do. */ .green-subheading-flame-light { color: #3fbc75; } .orange-subheading-flame::before, .green-subheading-flame::before, .green-subheading-flame-light::before { content: ""; /* inline-block, NOT a flex child: these eyebrows are centred in content via `text-align-center`, and a flex parent would drag them back to the left. */ display: inline-block; vertical-align: -0.16em; margin-right: 0.5em; width: 1.15em; height: 1.15em; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18.674 24'%3E%3Cpath d='M9.338,24A9.378,9.378,0,0,1,0,14.662,9.237,9.237,0,0,1,1.036,10.4,9.419,9.419,0,0,1,3.9,7.08c.085-.058.146-.1.2-.142l.077-.056A9.408,9.408,0,0,0,7.957,1.033L8.161,0l.868.6a9.407,9.407,0,0,1,4.053,7.69,9.284,9.284,0,0,1-.6,3.276.059.059,0,0,0,.018.067.057.057,0,0,0,.068,0,9.558,9.558,0,0,0,2.877-2.828l.515-.786.6.725a9.2,9.2,0,0,1,2.12,5.918A9.348,9.348,0,0,1,9.338,24M4.514,7.495l.411.557c-.07.051-.149.109-.234.166a8.011,8.011,0,0,0-2.424,2.817,7.857,7.857,0,0,0-.883,3.629,7.953,7.953,0,1,0,15.907,0,7.825,7.825,0,0,0-1.265-4.3A10.987,10.987,0,0,1,13.3,12.8a1.443,1.443,0,0,1-2.12-1.727A7.9,7.9,0,0,0,11.7,8.287,8.038,8.038,0,0,0,9.047,2.37,10.789,10.789,0,0,1,4.987,8.006Z'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18.674 24'%3E%3Cpath d='M9.338,24A9.378,9.378,0,0,1,0,14.662,9.237,9.237,0,0,1,1.036,10.4,9.419,9.419,0,0,1,3.9,7.08c.085-.058.146-.1.2-.142l.077-.056A9.408,9.408,0,0,0,7.957,1.033L8.161,0l.868.6a9.407,9.407,0,0,1,4.053,7.69,9.284,9.284,0,0,1-.6,3.276.059.059,0,0,0,.018.067.057.057,0,0,0,.068,0,9.558,9.558,0,0,0,2.877-2.828l.515-.786.6.725a9.2,9.2,0,0,1,2.12,5.918A9.348,9.348,0,0,1,9.338,24M4.514,7.495l.411.557c-.07.051-.149.109-.234.166a8.011,8.011,0,0,0-2.424,2.817,7.857,7.857,0,0,0-.883,3.629,7.953,7.953,0,1,0,15.907,0,7.825,7.825,0,0,0-1.265-4.3A10.987,10.987,0,0,1,13.3,12.8a1.443,1.443,0,0,1-2.12-1.727A7.9,7.9,0,0,0,11.7,8.287,8.038,8.038,0,0,0,9.047,2.37,10.789,10.789,0,0,1,4.987,8.006Z'/%3E%3C/svg%3E") no-repeat center / contain; } .normalcase{ text-transform: inherit !important; } .phiorange{ color: var(--phi-orange); } /* --- Text links with a trailing arrow ------------------------------------ Same treatment as .btn-default + .rightarrow but with no background or border — just coloured uppercase text and an arrow that slides on hover. This is the pattern already used by .mega-featured-link ("Request Service") in the mega menu, which hardcodes an inline ; here the arrow comes from ::after so it is one class in the editor with no markup to copy. The arrow is filled with currentColor, so it follows the link colour on hover automatically and each variant only has to declare `color`. */ /* Values match .mega-featured-link in css/navigation/mega-menu.css exactly, so a link placed in body content is indistinguishable from the one in the mega menu promo card. If you change one, change the other. */ /* NOTE: neither animates `gap` any more. Growing the gap on hover made the link wider, which was enough to wrap the arrow onto a second line in a tight container. The arrow's movement comes from the transform on `.rightarrow::after` instead — painted, not laid out, so the width is fixed. */ .orange-link, .green-link { display: inline-flex; align-items: center; vertical-align: middle; gap: 6px; padding: 0; border: none; background: none; font-family: var(--display-font); /* 0.8125rem = the 13px .mega-featured-link uses, expressed in rem. */ font-size: 0.8125rem; font-weight: 700; text-decoration: none; text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer; /* One unit: never break between the label and its arrow. */ white-space: nowrap; } /* Colour and border. `:not(.nav-item)` here is doing double duty: it keeps the class off menu items (as elsewhere) AND lifts specificity to (0,2,0), so it beats `.region-content a` (0,1,1) — the theme's body-link rule that otherwise painted these #333 with a dotted underline in Layout Builder / body content. border-bottom:none removes that same rule's dotted underline. Hover colour is pinned to the rest colour on purpose (only the gap animates); without it the theme's generic a:hover (#35939a teal) would take over. */ .orange-link:not(.nav-item), .orange-link:not(.nav-item):hover, .orange-link:not(.nav-item):focus { color: var(--phi-orange); border-bottom: none; } .green-link:not(.nav-item), .green-link:not(.nav-item):hover, .green-link:not(.nav-item):focus { color: var(--phi-green); border-bottom: none; } /* `:not(.nav-item)` for the same reason as .rightarrow below — on a menu item the class would land on the

  • and draw a stray arrow after the link. */ .orange-link:not(.nav-item)::after, .green-link:not(.nav-item)::after { content: ""; /* Sized in em so it scales with the link text (~14px at 0.8125rem). */ width: 1.08em; height: 1.08em; flex-shrink: 0; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E") no-repeat center / contain; } /* --- Trailing arrow modifier -------------------------------------------- Drawn with a mask rather than an or a text glyph, so it takes its colour from the button and flips correctly on hover with no extra rules. */ /* `:not(.nav-item)` for the same reason as the button classes above: on a main menu item the class lands on the
  • , so this would draw a SECOND arrow after the link — on top of the real that menu--main.html.twig already renders for the `rightarrow` token. Body content is unaffected. */ .rightarrow:not(.nav-item)::after { content: ""; width: 0.85em; height: 0.85em; flex-shrink: 0; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E") no-repeat center / contain; transition: transform 0.25s var(--ease); } .rightarrow:not(.nav-item):hover::after { transform: translateX(3px); } /* Block Classes */ .block-img-fullwidth img{ max-width: 100%; width: 100%; height: auto; } .block-grey-bg{ background-color: var(--phi-gray-300); } .block-darkgrey-bg{ background-color: #e3e3e3; } .block-width-fitypercent{ width: 50%; } .block-float-left{ float: left; } .block-float-right{ float: right; } .clear{ clear: both; height: 0; } .block-margin-top-four{ margin-top: 4rem !important; } .block-margin-bottom-four{ margin-bottom: 4rem !important; } .block-padding-bottom-four{ padding-bottom: 4rem !important; } .block-padding-top-four{ padding-top: 4rem !important; } .block-margin-top-three{ margin-top: 3rem !important; } .block-margin-bottom-three{ margin-bottom: 3rem !important; } .block-padding-bottom-three{ padding-bottom: 3rem !important; } .block-padding-top-three{ padding-top: 3rem !important; } .block-margin-top-two{ margin-top: 2rem !important; } .block-margin-bottom-two{ margin-bottom: 2rem !important; } .block-padding-bottom-two{ padding-bottom: 2rem !important; } .block-padding-top-two{ padding-top: 2rem !important; } .block-margin-top-one{ margin-top: 1rem !important; } .block-margin-bottom-one{ margin-bottom: 1rem !important; } .block-padding-bottom-one{ padding-bottom: 1rem !important; } .block-padding-top-one{ padding-top: 1rem !important; } .block-padding-one{ padding: 1rem; } .block-padding-two{ padding: 2rem; } .block-padding-four{ padding: 4rem; } .view-center-title-header header{ width: 100%; text-align: center; } .aligncenter{ text-align: center; } .block-center-title h2.block-title{ margin: 0 auto; padding: 0 0 1rem 0; width: fit-content; text-align: center; } .block-large-htwo-padding h2{ padding: 0 0 1rem 0; } .footer-onehundred footer{ width: 100%; } .padding-left-0{ padding-left: 0; } .padding-right-0{ padding-right: 0; } .alignitemscenter, .verticalaligncenter{ align-items: center; } .whitebg{ background-color: #fff; } .whitetxt, .whitetxt a, .whitetxt h1, .whitetxt h2, .whitetxt h3, .whitetxt h4{ color: #fff !important; } .blacktxt, .blacktxt a, .blacktxt h1, .blacktxt h2, .blacktxt h3, .blacktxt h4{ color: #333333 !important; } .navybg{ background-color: #003572; } .greybg{ background-color: var(--phi-gray-300); } /* #1A1D21 is --phi-dark. .bs-bg-dark is the name that matches the other section-wrapper utilities below; .darkgreybg is the legacy alias, kept because existing content still uses it. One colour, two names — not two colours that have to be kept in step. */ .darkgreybg, .bs-bg-dark{ background-color: var(--phi-dark); } .unblue, .bs-bg-blue{ background-color: #009EDB; } .unlightblue, .bs-bg-lightblue{ background-color: #F0F9FF; } .bs-bg-grey{ background-color: var(--phi-gray-300); } .bgwhite, .bs-bg-white{ background-color: #fff; } .bs-bg-black{ background-color: #000; } /* ========================================================================== Full-width Layout Builder sections (Bootstrap Layout Builder `w-100`) BLB only understands `container` and `w-100` for a section's inner wrapper — `container-fluid` is not a value it accepts and silently becomes `w-100`. Unlike `.container`, `w-100` has no horizontal padding, so the Bootstrap `.row` inside it keeps its -12px side margins with nothing to absorb them and the section ends up 24px wider than the viewport, putting a horizontal scrollbar on the page. It LOOKS right, because the overhang is what made the band reach the screen edges. Zeroing the row margins and the column padding gives a genuinely full-bleed section that measures exactly the viewport width. ========================================================================== */ .layout-container.w-100 > .layout.row { margin-left: 0; margin-right: 0; } .layout-container.w-100 > .layout.row > [class*="col-"] { padding-left: 0; padding-right: 0; } /* Responsive map / video embed. The Google Maps snippet ships fixed width and height attributes; aspect-ratio lets it fill its column and keep its shape without the old padding-top percentage trick. */ .map-embed { position: relative; width: 100%; aspect-ratio: 4 / 3; min-height: 320px; border-radius: .875rem; overflow: hidden; } .map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; } .bs_input-circles .darkgreybg{ background-color: #1A1D21 !important; } .bs_input-circles .bs-bg-blue{ background-color: #009EDB !important; } .bs_input-circles .bs-bg-lightblue{ background-color: #F0F9FF !important; } .bs_input-circles .bs-bg-grey{ background-color: var(--phi-gray-300) !important; } .bs_input-circles .bs-bg-white{ background-color: #fff !important; } .bs_input-circles .bs-bg-black{ background-color: #000 !important; } .gaptwo.row{ gap: 2rem; } .gaptwo .col-xxl-3{ width: calc(25% - 2rem); padding: 2rem; } .padboxestwo .col-12{ padding: 2rem; } .gaptwo .col-xxl-4 { flex: 0 0 auto; width: calc(33.33333333% - 2rem); padding: 2rem; } .tableborders{ border-color: var(--bs-table-border-color); --bs-table-border-color: var(--bs-border-color); border-collapse: collapse; } .view-center-header header{ width: 100%; text-align: center; } .view-center-header header h2.block-title{ margin: 0 auto; width: fit-content; } .view-center-pager ul.pager, .view-center-pager ul.pagination { padding-left: 0; margin: 2rem auto 0 auto; width: 100%; text-align: center; } .view-center-pager .pager-nav{ margin: 0 auto; } .view-center-title-header header, .view-center-footer footer { display: flex; align-content: center; align-items: center; justify-content: center; width: 100%; } .no-margin-top{ margin-top: 0 !important; } .no-margin-bottom{ margin-bottom: 0 !important; } .no-margin{ margin: 0 !important; } .border-bottom-grey{ border-bottom: 1px solid #ebebeb; } .infobox{ border: 1px solid #ebebeb; padding: 1rem; border-radius: .875rem; } .infobox p:last-child { margin-bottom: 0; } .infobox-white.alignedcenter { display: flex; flex-direction: column; align-items: center; /* horizontal centring */ justify-content: center; /* vertical centring */ text-align: center; gap: .75rem; text-decoration: none; color: inherit; padding: 1rem; border-radius: .875rem; background: #fff; min-height: 100%; /* equal-height cards inside the grid */ box-sizing: border-box; border: 1px solid transparent; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; } .infobox-white.alignedcenter .infobox-icon { display: flex; align-items: center; justify-content: center; height: 36px; /* keeps every icon on the same baseline */ } .infobox-white.alignedcenter .infobox-icon img, .infobox-white.alignedcenter .infobox-icon svg { display: block; width: auto; height: 100%; max-width: 36px; } .infobox-white.alignedcenter .infobox-title { margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.3; color: #3c4250; } .infobox-white.alignedcenter:hover, .infobox-white.alignedcenter:focus-visible { border-color: var(--phi-orange); transform: translateY(-4px); box-shadow: 0 6px 16px rgba(0, 0, 0, .08); } /* Strategic-partner / brand name row (Authorized Distributor section). */ .phi-brand-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem 3.25rem; margin-top: 2.25rem; } .phi-brand-row span { font-size: 1.5rem; font-weight: 700; color: #8b9096; line-height: 1.2; } @media (max-width: 767px) { .phi-brand-row { gap: 0.75rem 1.75rem; } .phi-brand-row span { font-size: 1.15rem; } } /* ========================================================================== Article detail meta — News + Knowledge Center The date and category are two separate Layout Builder field blocks; these rules sit them on one line and give the tag list a chip treatment. Global (not in news.css / knowledge-center.css) because a detail page does not necessarily render either of those views. ========================================================================== */ /* Date + category side by side, centres aligned. inline-flex on both blocks (rather than inline-block) means the two boxes align on their contents' centre line instead of their text baselines — the date carries an icon and the category is a pill, so their baselines do not agree. */ .block-field-blocknodenewsfield-date, .block-field-blocknodenewsfield-news-category, .block-field-blocknodeknowledge-centerfield-date, .block-field-blocknodeknowledge-centerfield-kc-category { display: inline-flex; align-items: center; vertical-align: middle; /* Both must share the same bottom margin. `vertical-align: middle` centres the MARGIN box, so the date's .block-margin-bottom-one (1rem !important) was pushing it half a rem (8px) above the category. Matching the margin puts the two boxes back on the same centre line. */ margin-bottom: 1rem !important; margin-top: 0; } .block-field-blocknodenewsfield-date .field, .block-field-blocknodeknowledge-centerfield-date .field { display: inline-flex; align-items: center; } .block-field-blocknodenewsfield-news-category, .block-field-blocknodeknowledge-centerfield-kc-category { margin-left: 0.85rem; } /* The category reads as a small pill next to the orange date. */ .field--name-field-news-category, .field--name-field-kc-category { display: inline-block; padding: 3px 10px; border-radius: 999px; background: rgba(245, 120, 32, 0.12); font-family: var(--display-font); font-size: 0.75rem; font-weight: 700; line-height: 1.3; letter-spacing: 0.04em; text-transform: uppercase; color: var(--phi-orange); } .field--name-field-news-category a, .field--name-field-kc-category a { color: inherit; text-decoration: none; border-bottom: none; } /* --- Tag list: small heading + light grey chips ------------------------- */ .block-field-blocknodenewsfield-news-tags .block-title, .block-field-blocknodeknowledge-centerfield-kc-tags .block-title { margin: 0 0 0.6rem; font-family: var(--display-font); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--phi-gray-600); } .field--name-field-news-tags.field__items, .field--name-field-kc-tags.field__items { display: flex; flex-wrap: wrap; gap: 8px; } .field--name-field-news-tags .field__item, .field--name-field-kc-tags .field__item { margin: 0; } .field--name-field-news-tags .field__item a, .field--name-field-kc-tags .field__item a { display: inline-block; padding: 6px 14px; border: 1px solid var(--phi-gray-200); border-radius: 999px; background: var(--phi-gray-300); font-family: var(--display-font); font-size: 0.8125rem; font-weight: 600; line-height: 1.3; color: var(--phi-gray-800); text-decoration: none; border-bottom: 1px solid var(--phi-gray-200); transition: all 0.15s var(--ease); } .field--name-field-news-tags .field__item a:hover, .field--name-field-kc-tags .field__item a:hover { background: var(--phi-orange); border-color: var(--phi-orange); color: #fff; } /* ========================================================================== Chosen inside the compact Filters dropdowns (News + Knowledge Center) Chosen writes an inline px width onto .chosen-container, measured from the original