/* Shared stylesheet for all Normal Pages (normal-page-tpl.php). Linked on every normal page after the chrome, before the page's own -page.css. Page-specific rules belong in that per-page file; only rules common to ALL normalized pages belong here. */ /* HERO CHECKLISTS STAY LEFT-ALIGNED BELOW 992. css/style.css:35847 sets `.form-box { text-align: center }` under @media (max-width:991px), which centres the whole hero panel. Centring the title, the subtitle and the buttons is the theme's intent and is fine; centring a four-item checklist is not -- every tick floats away from the text it belongs to and each wrapped line is ragged on both sides, which on a 390px phone is where most of the panel's height goes. Alignment only. Giving the a display of its own looks like the tidier fix and is not: the tick and its text are siblings with a
after them, so anything block-level puts the tick on a line by itself. Scoped to normal pages so the builder pages the theme was written for are untouched. Verified on staging 25 Aug 2026 across 14 widths. */ @media (max-width: 991px) { .page-template-normal-page-tpl .form-box .slider-li { text-align: left; padding-left: 28px; } /* hanging indent: the icon is pulled back into the padding, so a tick's second line lines up under its own text instead of outdenting past it. 28px is the 20px glyph plus the 8px margin the page stylesheets give it. */ .page-template-normal-page-tpl .form-box .slider-li i { margin-left: -28px; } } /* "SIX REASONS" HEXAGONS IN THE LOGO'S COLOURS (user request 2026-09-04). The clickable hexagons around the EKO 4 logo (.soft-edge-hex .hex_cont on the home, certified-document and professional-translation pages) keep their shape -- the rounded hexagon with a thin ring -- but each is painted with a gradient of the two logo segments it sits next to, so the ring of hexagons reads as the logo blown up: the logo is green top-left, orange top-right, blue bottom-right, purple bottom-left. The hexagon ABOVE the logo (#1) runs green to orange; the top-right one (#3) is mostly orange fading to blue below; bottom-right (#6) mostly blue with orange above; the one BELOW (#5) purple to blue; bottom-left (#4) mostly purple with green above; top-left (#2) mostly green fading to purple below. The ids and positions are the same on all three pages (theme css/style.css .soft-edge-hex #hex_cont_N), so the mapping is by id. LOOK (user feedback 2026-09-04: "the new flashy look like the ones we've just built", not the old ring): the same treatment as the tilted .eko4-tilt-* hexagons and the counter graphic -- one solid gradient shape, no ring, lit from the top-right (a white-to-black shading overlay), soft drop shadow plus glow. Only the tilt is left out: these six tessellate around the logo, so they stay upright. HOW: the box gets no background; ::after carries the shape as a CSS mask (normal-pages/img/hexagon-mask.svg, the theme's hexagon outline) over the logo gradient + shading; ::before, under it, is the same outline as a flat image (hexagon-shadow.svg) carrying the drop-shadow filter -- a filter on the masked layer would be cut off by its own mask. The colours are the logo's, taken a shade deeper so white bold text keeps >= 4:1 contrast on the lightest stop (the raw logo orange #FC5400 is 3.4:1). The clicked state dims the shape to 75% like the clicked thin-edge artwork did; the theme's .hex_active opacity rule still applies on top. The read-more pill is white with red text, since a red pill vanishes on the orange hexagons. FALLBACK: browsers without CSS masks keep the green thin-edge hexagon (the previous look; the purple page loses its purple twin there). */ .soft-edge-hex .hex_cont, .soft-edge-hex .hex_cont:not(.hex_active) { background-image: url(/wp-content/themes/Marine/normal-pages/img/hexagon-thin-edge.svg); } .soft-edge-hex .hex_cont.hex_active { background-image: url(/wp-content/themes/Marine/normal-pages/img/hexagon-thin-edge-clicked.svg); } @supports (mask-image: url("x.svg")) or (-webkit-mask-image: url("x.svg")) { .soft-edge-hex .hex_cont, .soft-edge-hex .hex_cont:not(.hex_active), .soft-edge-hex .hex_cont.hex_active { background-image: none; } .soft-edge-hex .hex_cont::before, .soft-edge-hex .hex_cont::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; } .soft-edge-hex .hex_cont::before { background: url(/wp-content/themes/Marine/normal-pages/img/hexagon-shadow.svg) center / 100% 100% no-repeat; filter: drop-shadow(0 12px 18px rgba(28, 29, 31, 0.32)) drop-shadow(0 0 10px rgba(60, 60, 64, 0.25)); } .soft-edge-hex .hex_cont::after { -webkit-mask: url(/wp-content/themes/Marine/normal-pages/img/hexagon-mask.svg) center / 100% 100% no-repeat; mask: url(/wp-content/themes/Marine/normal-pages/img/hexagon-mask.svg) center / 100% 100% no-repeat; /* top-right highlight to bottom-left shade, like the counter graphic */ background: linear-gradient(225deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0) 45%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.22) 100%), var(--eko4-logo-grad); } .soft-edge-hex .hex_cont.hex_active::before, .soft-edge-hex .hex_cont.hex_active::after { opacity: 0.75; } /* logo colours, a shade deeper: green #339A6C, orange #EA4F00, blue #3A66A0, purple #B335E4 */ .soft-edge-hex #hex_cont_1 { --eko4-logo-grad: linear-gradient(105deg, #339A6C 12%, #EA4F00 88%); } .soft-edge-hex #hex_cont_3 { --eko4-logo-grad: linear-gradient(170deg, #EA4F00 30%, #3A66A0 100%); } .soft-edge-hex #hex_cont_6 { --eko4-logo-grad: linear-gradient(170deg, #EA4F00 0%, #3A66A0 70%); } .soft-edge-hex #hex_cont_5 { --eko4-logo-grad: linear-gradient(75deg, #B335E4 12%, #3A66A0 88%); } .soft-edge-hex #hex_cont_4 { --eko4-logo-grad: linear-gradient(190deg, #339A6C 0%, #B335E4 70%); } .soft-edge-hex #hex_cont_2 { --eko4-logo-grad: linear-gradient(190deg, #339A6C 30%, #B335E4 100%); } /* sRGB interpolation turns green-to-orange muddy brown in the middle; where the browser can blend in the perceptual oklab space (Chrome 111, Safari 16.2, Firefox 113) the same stops stay clean. A custom property accepts anything at parse time, so this needs its own @supports. */ @supports (background: linear-gradient(in oklab, red, blue)) { .soft-edge-hex #hex_cont_1 { --eko4-logo-grad: linear-gradient(in oklab 105deg, #339A6C 12%, #EA4F00 88%); } .soft-edge-hex #hex_cont_3 { --eko4-logo-grad: linear-gradient(in oklab 170deg, #EA4F00 30%, #3A66A0 100%); } .soft-edge-hex #hex_cont_6 { --eko4-logo-grad: linear-gradient(in oklab 170deg, #EA4F00 0%, #3A66A0 70%); } .soft-edge-hex #hex_cont_5 { --eko4-logo-grad: linear-gradient(in oklab 75deg, #B335E4 12%, #3A66A0 88%); } .soft-edge-hex #hex_cont_4 { --eko4-logo-grad: linear-gradient(in oklab 190deg, #339A6C 0%, #B335E4 70%); } .soft-edge-hex #hex_cont_2 { --eko4-logo-grad: linear-gradient(in oklab 190deg, #339A6C 30%, #B335E4 100%); } } } /* "HOW IT WORKS" HEXAGONS IN THE COUNTER STYLE (user request 2026-09-04): the five process hexagons (.hiw_hex_cont_sm / _big, on the home and certified pages) keep their shape and positions but are drawn like the tilted rows -- one solid gradient, lit from the top right, soft shadow, no ring -- each in the colour the client marked: 1 red, 2 grey, 3 grey, 4 red, and the big fifth one green. HOW: the theme paints the process ARROWS with the small hexagons' ::after, so the gradient sits on ::before (masked with hexagon-mask.svg) and the drop shadow on an injected carrying the flat hexagon image (a filter on the masked layer would be cut by its own mask). The boxes get a z-index so both layers can sit behind the text without falling behind the page. FALLBACK without masks: the green thin-edge hexagon these boxes had before. */ .hiw_hex_cont_sm, .hiw_hex_cont_big { background-image: url(/wp-content/themes/Marine/normal-pages/img/hexagon-thin-edge.svg); position: relative; } .hiw_hex_cont_sm { z-index: 1; } .eko4-hex-shadow { display: none; } @supports (mask-image: url("x.svg")) or (-webkit-mask-image: url("x.svg")) { .hiw_hex_cont_sm, .hiw_hex_cont_big { background-image: none; } .hiw_hex_cont_sm::before, .hiw_hex_cont_big::before, .eko4-hex-shadow { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: block; pointer-events: none; } .eko4-hex-shadow { z-index: -2; background: url(/wp-content/themes/Marine/normal-pages/img/hexagon-shadow.svg) center / 100% 100% no-repeat; filter: drop-shadow(0 12px 18px rgba(28, 29, 31, 0.32)) drop-shadow(0 0 10px rgba(60, 60, 64, 0.25)); } .hiw_hex_cont_sm::before, .hiw_hex_cont_big::before { z-index: -1; -webkit-mask: url(/wp-content/themes/Marine/normal-pages/img/hexagon-mask.svg) center / 100% 100% no-repeat; mask: url(/wp-content/themes/Marine/normal-pages/img/hexagon-mask.svg) center / 100% 100% no-repeat; background: var(--eko4-hex-fill); } /* the same three gradients as hexagon-soft-red.svg / -gray.svg and the logo green: light top-right to dark bottom-left */ #hiw_hex_cont_1_sm, #hiw_hex_cont_4_sm { --eko4-hex-fill: linear-gradient(225deg, #F26262 0%, #E43030 50%, #B22323 100%); } #hiw_hex_cont_2_sm, #hiw_hex_cont_3_sm { --eko4-hex-fill: linear-gradient(225deg, #84858A 0%, #5B5C5F 50%, #434447 100%); } #hiw_hex_cont_5_big { --eko4-hex-fill: linear-gradient(225deg, #6CCB9A 0%, #45B17B 50%, #2E8A5E 100%); } /* the theme pads the box 40px and the text another 60px a side, which left a ~150px column of nine cramped lines in the 354px box; the hexagon's middle band takes ~230px comfortably */ .hiw_hex_cont_big { padding: 0 30px; } .hiw_hex_cont_big .hiw_hex_text { padding: 0 32px; font-size: 15px; line-height: 1.5; } .hiw_hex_cont_sm .hiw_hex_text { padding: 0 46px; } } /* SITE-WIDE TYPE (user request 2026-09-04): one face for all the text, taken from the hero box, which is the reference -- Nunito for text (the hero's subtitle and ticks) and Montserrat for headings (the hero's H1). The theme mixes Helvetica/Segoe UI (body), Open Sans and Montserrat across its rules, so this is set with !important on the text elements and on the headings. Icon fonts are left alone: anything whose class mentions "icon" or is a Font Awesome class keeps its own family, and pseudo-element glyphs (fontello, slick) set theirs in their own rules. */ body, p, li, dd, dt, td, th, label, legend, input, textarea, select, button, blockquote, small, strong, b, em, a, span:not([class*="icon"]):not(.fa):not(.fas):not(.far):not(.fab), div:not([class*="icon"]):not(.fa) { font-family: 'Nunito', 'Segoe UI', Arial, sans-serif !important; } h1, h2, h3, h4, h5, h6, .slider-main-title, .eko4-tilt-title, .down_hex_btn { font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif !important; } /* the hero boxes only ever showed Nunito 600 because no regular weight was loaded; now that 400 exists, keep their paragraphs at the reference weight */ .form-box p, .form-box .slider-main-subtitle { font-weight: 600; } /* HEADER: between 1300 and 1599px the theme spaces the five top-level menu items 40px apart, and with Industries now a 104px item the menu plus the CONTACT US widget (159px + 30px margin) no longer fits the header's right block -- the widget wrapped under the menu on 1366 and 1440 laptops (measured on staging, 4 September 2026). The 30px spacing the theme uses below 1300 fits with room to spare, so keep it up to 1599. */ @media (min-width: 1300px) and (max-width: 1599px) { #main-nav > li + li, #header div.menu > ul > li + li { margin-left: 30px !important; } } /* PILL for the links inside every hexagon (user decisions 2026-09-04: the theme's solid red pill fought the gradients and had to change colour on the red rows; a translucent "glass" pill was tried and rejected as camouflaged). One style on every hexagon colour: a solid WHITE pill with the brand RED text, filling solid red with white text on hover. White is the one fill that stands out on grey, red, green, orange and purple alike; the red text keeps the accent without a red slab on every card; solid red stays for the real calls to action (quote, order). Covers the tilted rows, the "how it works" boxes and the six reasons around the logo (there the pill is a div inside a clickable box, so it lights up when the box is hovered). */ .eko4-tilt-hex a.hex-link, .hiw_hex_cont_sm a.hex-link, .hiw_hex_cont_big a.hex-link, .soft-edge-hex .hex_text div { background: #fff !important; border: 2px solid #fff; color: #eb3136 !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18); transition: background .18s, color .18s; } .eko4-tilt-hex a.hex-link:hover, .eko4-tilt-hex a.hex-link:focus, .hiw_hex_cont_sm a.hex-link:hover, .hiw_hex_cont_big a.hex-link:hover, .hiw_hex_cont_sm a.hex-link:focus, .hiw_hex_cont_big a.hex-link:focus, .soft-edge-hex .hex_cont:hover .hex_text div { background: #eb3136 !important; color: #fff !important; opacity: 1; } /* HERO ON PHONES: the theme pins its LayerSlider containers to fixed heights on small screens (e.g. .home .ls-inner 640px !important under 545px, page-id keyed twins elsewhere). Our hero replicas flow their content box on phones, and once the box is taller than that figure the bottom of it -- the second button -- is clipped (seen on staging, 4 September 2026). Let the replica grow with its content instead. */ @media (max-width: 991px) { #eko4-hero-slider, #eko4-hero-slider .ls-inner { height: auto !important; } } /* HERO BOX GROWS WITH ITS TEXT (user, 4 September 2026): every page's white hero box carries a fixed inline height tuned for its original copy (340/411/420px), while the home page's box has none and simply wraps its content. After the site-wide type change the copy on several pages outgrew that figure and the buttons sat on or below the bottom edge (marriage certificate +83px, legal, Urdu). Same behaviour as home for all: the box is as tall as its content. Under 992px the page sheets already flow the box (height auto with a per-page min-height, kept). */ #eko4-hero-slider .form-box.ls-layer { height: auto !important; } /* THE NATIONWIDE LINE, under the map panel heading. eko4_offices_note() in functions.php prints it inside .map-rect-row-subtitle, which the theme has no style for -- the heading above it is .map-rect-row-title. Sized between that heading and the address rows so it reads as a standfirst rather than a second heading. WHITE, like the heading: .map-rect-row-1 paints itself #57585b. The body grey #58595b used here first was invisible against it -- a one-value difference, measured on staging, not guessed. */ .map-rect-row-subtitle { margin: 6px auto 0; max-width: 720px; font-size: 15px; line-height: 24px; color: #fff; opacity: .92; text-align: center; } @media (max-width: 699px) { .map-rect-row-subtitle { font-size: 14px; line-height: 22px; } } /* ========================================================================== AWARDS, NOMINATIONS AND THE AWARD VIDEOS -------------------------------------------------------------------------- The section is the page builder's markup (see the include), and it lays its columns out with the builder's grid classes. Those live in each page's vendored stylesheet, and only the home page's copy defines every class the section uses -- which is why it collapsed into one column elsewhere. The rules are repeated here, scoped to the section, so it lays out the same on every page and nothing else can be affected. The panels' own colours and photographs come from the markup and from home-page.css, which every page also loads. ========================================================================== */ /* Edge to edge, like the section on the home page. The builder does this with a script that measures the row and stretches it; that script is the thing that mispositioned the section here, so the width is taken with CSS instead: break out of the content column to the full viewport. */ .awards-nominations-static, .awards-nominations-videos { clear: both; position: relative; box-sizing: border-box; width: 100vw; max-width: 100vw; /* Break out of the content column to the full viewport. The element's own left edge is the reference: shifting it left by half the viewport and back by half its own width lands it exactly on the page edge, whatever the column's width or offset. */ left: 50%; transform: translateX(-50%); margin-left: 0; margin-right: 0; } /* The videos row: room at the foot for the locations panel, which hangs up from the section below and would otherwise clip the thumbnails. */ .awards-nominations-videos { padding-bottom: 150px; } /* On the homepage the videos lead into the process, not the location panel. */ body.home .awards-nominations-videos { padding-bottom: 0; } /* Keep the process title close to the preceding content and its steps. */ .vc_row.vc_custom_1632304793843 { padding-top: 40px !important; } .vc_custom_1632304793843 .vc_custom_1627334264391, .vc_custom_1632080270326 .vc_custom_1627334264391 { margin-bottom: 24px !important; } .vc_custom_1632304793843 .section-title h2, .vc_custom_1632080270326 .section-title h2 { margin: 0; } .awards-nominations .vc_row, .awards-nominations-videos .vc_row { margin-left: -15px; margin-right: -15px; } .awards-nominations [class*="vc_col-sm-"], .awards-nominations-videos [class*="vc_col-sm-"] { position: relative; min-height: 1px; padding-left: 15px; padding-right: 15px; box-sizing: border-box; } .awards-nominations:after, .awards-nominations:before, .awards-nominations-videos:after, .awards-nominations-videos:before { content: " "; display: table; } .awards-nominations:after, .awards-nominations-videos:after { clear: both; } @media (min-width: 768px) { .awards-nominations [class*="vc_col-sm-"], .awards-nominations-videos [class*="vc_col-sm-"] { float: left; } .awards-nominations .vc_col-sm-12, .awards-nominations-videos .vc_col-sm-12 { width: 100%; } .awards-nominations .vc_col-sm-6, .awards-nominations-videos .vc_col-sm-6 { width: 50%; } .awards-nominations .vc_col-sm-4, .awards-nominations-videos .vc_col-sm-4 { width: 33.33333333%; } .awards-nominations .vc_col-sm-3, .awards-nominations-videos .vc_col-sm-3 { width: 25%; } } /* The panels, photographs and banners that make up the section's look. They were only in home-page.css, which the standard pages do not load, which is why the section appeared as plain text on grey there. */ .vc_custom_1626814842124{padding-top: 48px !important;padding-right: 15px !important;padding-bottom: 48px !important;padding-left: 15px !important;background-color: #45b17b !important;} .vc_custom_1626816680727{padding-top: 20px !important;padding-right: 30px !important;padding-bottom: 20px !important;padding-left: 30px !important;background-color: #45b17b !important;} .vc_custom_1632077150122{padding-top: 20px !important;padding-right: 30px !important;padding-bottom: 20px !important;padding-left: 30px !important;background-color: #ffffff !important;} .vc_custom_1632077326821{padding-top: 20px !important;padding-right: 30px !important;padding-bottom: 20px !important;padding-left: 30px !important;background-color: #ffffff !important;} .vc_custom_1632082534690{margin-top: 0px !important;padding-top: 0px !important;} .vc_custom_1632082545216{margin-top: 0px !important;padding-top: 0px !important;} .vc_custom_1659354188763{margin-top: 60px !important;} .awards-nominations-lists-cont { display: flex; } .awards-nominations-lists-cont ul li { color: #FFF; font-size: 13px; line-height: 16px; list-style-type: disc; margin-bottom: 10px; } .awards-nominations-row1 .wpb_column:nth-child(2) .awards-nominations-images-cont { margin-bottom: 20px; } .awards-nominations-row1 .wpb_column:nth-child(4) .awards-nominations-images-cont { margin-top: 20px; } .awards-nominations-lists-cont ul { padding-left:30px; } .awards-nominations-images-cont { display: flex; width: 100%; } .awards-nominations-image-cont { width: 50%; text-align: center; } .awards-nominations-row1 .vc_column-inner, .awards-nominations-row2 .vc_column-inner { display: flex; justify-content: center; align-items: center; } .awards-nominations-row1 { display: flex; flex-wrap: wrap; } .awards-nominations-row2 { display:flex; } @media (max-width: 768px) { .awards-nominations-row2 { flex-direction:column; } .awards-nominations-row2 .wpb_column { width: 100%!important; } .awards-nominations-row1 .wpb_column, .awards-nominations-row2 .wpb_column { min-height: 300px; margin-top: 20px; } .awards-nominations-row1 .wpb_wrapper { display: flex; flex-direction: column; align-items: center; } } @media (max-width:600px) { .awards-nominations-row2 .wpb_column { margin-bottom: 0px!important; } } .video-thumb img:hover { opacity:0.8; } /* The equal-height columns and the photographs behind them. Also only in home-page.css, which is why the panels sat at the wrong widths and the office pictures were missing on the other pages. */ .eq-cols-text { display: flex; align-items: center; justify-content: center; } .eq-cols-text, .awards-long-text { color: #fff; margin: 0; font-weight:600; } .eq-col3 { background: url(/wp-content/uploads/2021/07/eko4-translations-florida-awards-1.jpg); background-size: cover; background-position: top center; } .eq-col2 { background-color: #fff; } .eq-col2 li, .eq-col4 .awards-title { color:#525252!important; } .eq-col4 { background-color: #fff; } .eq-col5 { background: url(/wp-content/uploads/2021/07/eko4-translations-florida-awards3.jpg); background-size: cover; display:flex; align-items:flex-end; background-position: center; } .eq-col6 { display:flex; align-items:center; justify-content:center; } .eq-col7 { background: url(/wp-content/uploads/2021/07/award-winning-translation-agency-florida.jpg); background-size: cover; display:flex; align-items:flex-end; background-position: center; } .eq-col5 .vc_column-inner, .eq-col7 .vc_column-inner { padding-left:0; padding-right:0; } .eq-col6 { min-height:250px; background-color: #45b17b; } @media (max-width: 768px) { .eq-col7 { margin-bottom:40px; } .eq-col5 .wpb_wrapper, .eq-col7 .wpb_wrapper { width:100%; } } /* The red award banners and the logo rows, the last pieces that were only in home-page.css. */ .award-logos-row { display: flex; align-items: center; } .award-desc { background: #EB3136; color: #fff; text-align: center; padding: 10px; font-weight:600; }