/* Sea Compass — shared refinements on top of the template. Loaded on every page, both languages. */ /* ── Header ───────────────────────────────────────────────────────────── Logo sizing lives in the "Logo sizing" block below. */ /* Give the bar room to breathe around the mark rather than hugging it. The padding is deliberately tighter than the mark is tall: the logo grew to 112px and the bar should not grow with it, or it starts covering the hero headline it sits over. */ header.header-light .de-flex.sm-pt10 { padding-top: 18px; padding-bottom: 18px; } /* the sticky bar tightens up so it does not eat the viewport on scroll */ header.smaller .de-flex.sm-pt10, .smaller .de-flex.sm-pt10 { padding-top: 10px; padding-bottom: 10px; } @media (max-width: 991px) { header.header-light .de-flex.sm-pt10 { padding-top: 12px; padding-bottom: 12px; } } /* ── Header surface ──────────────────────────────────────────────────── The bar sits over the hero, and the template fills it with a flat 90% white and no edge. Against a photo that reads as a pale rectangle the logo happens to be standing on rather than a bar — and because the hero paints its own white panel across the left 40%, where that rectangle ends shifts from slide to slide. One frosted surface across the whole bar fixes both: the blur separates it from the image, and a hairline plus a soft drop closes the bottom edge so the bar reads as its own layer. The stuck state gets the same treatment so nothing changes underfoot on scroll — the template gives .smaller a blur but then paints it fully opaque, which cancels it out. */ header.header-light, header.header-light.smaller, body:not(.side-layout) header:not(.smaller):not(.header-mobile).header-light { background: rgba(255, 255, 255, .62); -webkit-backdrop-filter: blur(20px) saturate(155%); backdrop-filter: blur(20px) saturate(155%); border-bottom: 1px solid rgba(10, 35, 80, .08); box-shadow: 0 8px 28px rgba(10, 35, 80, .07); } /* The blur is what keeps navy nav text legible over a bright sky. Without it the fill has to carry that contrast alone, so it goes nearly solid. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { header.header-light, header.header-light.smaller, body:not(.side-layout) header:not(.smaller):not(.header-mobile).header-light { background: rgba(255, 255, 255, .95); } } /* Below 991px the template swaps in .header-mobile, which paints the bar solid white at a higher specificity than anything here. That is the right result — the mobile menu drops over page content and needs an opaque backing — so the glass treatment is left to the desktop bar. */ /* ── Sticky bar hide-on-scroll ───────────────────────────────────────── The theme hides the bar while you scroll down with `margin-top: -90px`, a fixed offset sized for its own ~90px header. Ours is taller, so -90px only lifts part of it and parks the bottom of the logo and the buttons on screen as a cut-off strip. Move it by its own height instead, so it clears the viewport whatever the logo ends up measuring. */ header.smaller.scroll-down, header.clone.scroll-down { margin-top: 0 !important; transform: translateY(-100%); } header.smaller.scroll-up, header.clone.scroll-up { margin-top: 0 !important; transform: translateY(0); } header.smaller, header.clone { transition: transform .4s ease, background-color .5s, padding .5s; will-change: transform; } @media (prefers-reduced-motion: reduce) { header.smaller, header.clone { transition: none; } } /* ── Hero zoom ───────────────────────────────────────────────────────── Replaces the skrollr data-0 / data-800 scale on the hero. a11y.js drops skrollr because it pins an already-stale document height onto ; driving the same 1 → 1.5 scale off the scroll position in CSS keeps the flourish without letting it near the page height. Browsers without scroll-driven animations simply get the hero at rest, which is the same thing a visitor who never scrolls sees today. */ @keyframes sc-hero-zoom { from { transform: scale(1); } to { transform: scale(1.5); } } @supports (animation-timeline: scroll()) { @media (prefers-reduced-motion: no-preference) { #section-intro .swiper { animation: sc-hero-zoom linear both; animation-timeline: scroll(root block); animation-range: 0 800px; } } } /* ── Footer ──────────────────────────────────────────────────────────── The three columns are very unequal — the company paragraph runs long while the services list and the contact block stop early — so the row ends with a wide patch of flat navy under the last two columns. Rather than pad the columns with filler, the void gets a watermark: the same aerial sea already used as a section background, laid across the footer at 7% and anchored bottom-right where the gap actually is. At that strength it reads as texture, not as a photo, and body text on top keeps its contrast. It is a background layer, not an , so it stays out of the accessibility tree and costs one 28KB request the visitor has already made earlier in the page. */ footer.section-dark { position: relative; overflow: hidden; } footer.section-dark::before { content: ""; position: absolute; inset: 0; background-image: url(../images/background/1.webp); background-position: right bottom; background-size: cover; background-repeat: no-repeat; /* the artwork is deep navy on a deep navy panel: anything under ~.3 is indistinguishable from flat colour, which is why a "very transparent" first pass read as no change at all */ opacity: .55; /* strongest over the empty right-hand side, gone before it reaches the company paragraph on the left, so no body copy loses contrast */ -webkit-mask-image: linear-gradient(to left, #000 0%, rgba(0, 0, 0, .6) 42%, transparent 72%); mask-image: linear-gradient(to left, #000 0%, rgba(0, 0, 0, .6) 42%, transparent 72%); pointer-events: none; } /* Without mask support the gradient cannot protect the left column, so the layer drops to a strength that is safe everywhere. */ @supports not ((mask-image: linear-gradient(#000, #000)) or (-webkit-mask-image: linear-gradient(#000, #000))) { footer.section-dark::before { opacity: .16; } } /* keep every child above the watermark */ footer.section-dark > * { position: relative; z-index: 1; } /* 100px of lead-in on top of an already tall row is most of what reads as dead space before the columns even start */ footer.section-dark { padding-top: 64px; } /* the three columns are very unequal in height, so pull the short ones up against the tall one rather than leaving them floating at the top */ @media (min-width: 992px) { footer.section-dark .container > .row.gx-5 { align-items: flex-start; padding-bottom: 16px; } } @media (max-width: 991px) { /* stacked columns leave no void to fill, and a cover-sized backdrop on a tall narrow footer just crops to noise */ footer.section-dark::before { display: none; } footer.section-dark { padding-top: 48px; } } /* ── Services dropdown ────────────────────────────────────────────────── The stock dropdown is a plain white list. Give it a card treatment that matches the rest of the site: soft elevation, brand accent on hover, and room for the longer service names. */ /* the template sets a flat grey border via #mainmenu ul:not(.mega) — out-specify it with the header prefix so the card treatment wins */ header #mainmenu ul:not(.mega), header #mainmenu li ul { width: auto; min-width: 268px; padding: 8px 0; background: #fff; /* the template's own border is a flat grey box — override each edge */ border-right: 1px solid rgba(10, 35, 80, .08) !important; border-bottom: 1px solid rgba(10, 35, 80, .08) !important; border-left: 1px solid rgba(10, 35, 80, .08) !important; border-top: 3px solid #c0994e !important; border-radius: 10px; box-shadow: 0 18px 40px rgba(10, 35, 80, .16); overflow: hidden; } /* the template draws a divider on the first item — the gold edge replaces it */ header #mainmenu li ul li:first-child { border-top: none; } #mainmenu li ul li { border: none; margin: 0; padding: 0; padding-left: 0; } #mainmenu li ul li a { display: block; padding: 11px 22px; font-size: 14px; line-height: 1.5; color: var(--bg-dark-1); border-bottom: 1px solid rgba(var(--bg-dark-1-rgb), .06); transition: background .2s ease, color .2s ease, padding .2s ease; } #mainmenu li ul li:last-child a { border-bottom: none; } #mainmenu li ul li a:hover { background: rgba(var(--primary-color-rgb), .1); color: var(--primary-color); } /* nudge the item toward the reading direction on hover */ #mainmenu li ul li a:hover { padding-left: 28px; } [dir="rtl"] #mainmenu li ul li a:hover { padding-left: 22px; padding-right: 28px; } /* the caret on the parent item */ #mainmenu li.has-child:after { opacity: .55; } #mainmenu li.has-child:hover:after { opacity: 1; color: var(--primary-color); } /* ── Reveal animations ───────────────────────────────────────────────── style.css ships `.wow { visibility: hidden }` and relies on WOW.js to clear it per element. Any missed reveal — a background tab, a fast scroll, an element already past the fold — leaves that content permanently invisible, which is what made parts of the page appear blank until a refresh. Content visibility must never depend on a script running on time, so default to visible; the animate.css classes still animate opacity/transform when WOW adds them. */ .wow { visibility: visible !important; } /* ── Logo sizing ─────────────────────────────────────────────────────── The template caps the mark at 74px, which reads as small next to the nav. The artwork is portrait (272x300) with the wordmark stacked under the compass, so a height that looks generous as a number still reads small on the page — it buys width, not presence. 112px is what makes the mark hold its own against the nav and the two buttons opposite it. */ #logo img, #logo .logo-main, #logo .logo-scroll { max-height: 112px !important; height: 112px !important; width: auto; } /* The template shrinks the mark on scroll through several competing hooks (.smaller, .logo-smaller, div#logo height). Pin the container so the logo keeps its size once the bar becomes sticky. */ #logo, header.smaller #logo, header.logo-smaller #logo, .logo-smaller div#logo { height: auto !important; } .header-light #logo, header #logo { display: flex; align-items: center; } @media (max-width: 991px) { #logo img, #logo .logo-main, #logo .logo-mobile { max-height: 76px !important; height: 76px !important; } } /* ── Contrast ─────────────────────────────────────────────────────────── White on the brand gold measures 2.66:1 — below the 4.5:1 WCAG AA floor. Navy on the same gold measures 7.4:1, so the accent stays intact and the label becomes legible. */ .btn-main, a.btn-main, a.btn-main:active, a.btn-main:focus, a.btn-main:visited, input[type=button].btn-main, .btn-main span { color: #061939; } .btn-main.bg-dark-1, .btn-main.bg-dark-1 span, .btn-main.bg-white, .btn-main.bg-white span { color: inherit; } .btn-main.bg-dark-1, .btn-main.bg-dark-1 span { color: #fff; } .btn-main.bg-white, .btn-main.bg-white span { color: #061939; } /* FAQ tab labels: gold on cream is 2.7:1 — use navy and keep gold for the active indicator only. The template sets the active label to --btn-color (white) on gold, which is 2.66:1, so out-specify it. */ .de-tab .d-tab-nav li, .d-tab-nav li { color: #061939; } .de-tab .d-tab-nav .active-tab, .de-tab .d-tab-nav li.active-tab { color: #061939; font-weight: 600; } /* carousel arrows were gold-on-white at 1.45:1 */ .de-custom-nav .d-prev, .de-custom-nav .d-next, .owl-nav button { color: #061939 !important; } /* ── Focus visibility ────────────────────────────────────────────────── Keyboard users need a visible focus ring on every interactive element. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 3px solid #c0994e; outline-offset: 2px; border-radius: 3px; } /* ── Touch targets ───────────────────────────────────────────────────── Carousel dots were 8×8px; keep the visual dot but expand the hit area. */ .owl-dot { position: relative; } .owl-dot::after { content: ""; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); } .de-custom-nav .d-prev, .de-custom-nav .d-next { min-width: 44px; min-height: 44px; } /* standalone action links need a comfortable tap height on touch screens */ @media (max-width: 767px) { .btn-line, .btn-main, .d-tab-nav li { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } } /* ── Reveal-on-scroll safety ─────────────────────────────────────────── WOW.js hides every .wow element and relies on JS to reveal it. If that never fires the content is lost, so guarantee visibility when motion is reduced or scripting is unavailable. */ @media (prefers-reduced-motion: reduce) { .wow { visibility: visible !important; animation: none !important; } } .no-js .wow { visibility: visible !important; } /* ── Skip link ───────────────────────────────────────────────────────── Lets keyboard and screen-reader users jump past the navigation. */ /* clip rather than push off-canvas — a negative offset would widen the document and create a horizontal scrollbar */ .skip-link { position: absolute; top: 0; left: 0; z-index: 10000; padding: 12px 20px; background: #061939; color: #fff; font-weight: 600; border-radius: 0 0 8px 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .skip-link:focus { width: auto; height: auto; overflow: visible; clip: auto; clip-path: none; } /* ── Footer logo ─────────────────────────────────────────────────────── The mark is portrait (272×300), so the template's 220px cap renders it 243px tall. That made the logo column ~200px taller than its siblings, and the row's height comes from the tallest column — so the extra height showed up as dead space along the bottom of the footer. A narrower cap trims the column without touching the other content. */ footer .logo-footer { max-width: 150px; } /* the stock 20px spacer reads as a second gap once the mark is smaller */ footer .logo-footer + .spacer-20 { height: 12px; } /* ── Footer service list ──────────────────────────────────────────────── A brand-gold marker in front of each item ties the list to the palette and makes the rows read as links rather than a run of plain text. Scoped away from .list-inline so the subfooter's inline list keeps its own styling. */ footer .widget ul:not(.list-inline) li { position: relative; padding-left: 18px; } footer .widget ul:not(.list-inline) li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--primary-color); transition: transform .2s ease; } footer .widget ul:not(.list-inline) li:hover::before { transform: scale(1.35); }