/* ========================================================================== Makutano Digital — brand layer over the Gencyo template. style.css is the vendor sheet (colour values inside its gradients were repointed to the brand palette in place, because a gradient stop cannot be overridden from here). Everything else lives in this file so the vendor sheet stays recognisably the template. Palette is sampled from the logo: navy #1e3a5f, amber #ffbd59, white. #16304f is the deeper navy the previous site already used for its footer; here it becomes the page ground so the #1e3a5f surfaces read as raised. ========================================================================== */ :root { --mk-navy: #1e3a5f; --mk-navy-deep: #16304f; --mk-navy-line: rgba(255, 255, 255, 0.14); --mk-amber: #ffbd59; --theme-color1: var(--mk-amber); --theme-color2: var(--mk-navy); --theme-color3: var(--mk-navy-deep); --theme-color1-rgb: 255, 189, 89; --theme-color2-rgb: 30, 58, 95; --theme-color3-rgb: 22, 48, 79; /* The template's accent is orange-on-black, so it pairs the accent with white text. Amber on navy needs the opposite: navy text on amber. */ --theme-color1-text-color: #1e3a5f; --body-bg: var(--mk-navy-deep); --bg-color: var(--mk-navy); --bg-theme-color1: var(--mk-amber); --bg-theme-color2: var(--mk-navy); --bg-theme-color3: var(--mk-navy-deep); /* #7A7A7A is a grey tuned for near-black; on navy it goes muddy. */ --text-color: rgba(255, 255, 255, 0.72); --headings-color: #ffffff; --link-color: var(--mk-amber); --link-hover-color: #ffffff; --body-font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif; --heading-font-family: "Space Grotesk", system-ui, sans-serif; --mk-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --h1-font-size: 78px; --h2-font-size: 46px; } body { background: var(--body-bg); color: var(--text-color); font-family: var(--body-font-family); } h1, h2, h3, h4, h5, h6, .title, .hero-title { font-family: var(--heading-font-family); color: var(--headings-color); letter-spacing: -0.03em; } /* -------------------------------------------------------------------------- Bilingual EN / SW. Every translated string is a pair of spans; the lang attribute decides which half is visible, flipped client-side with no page reload. Inherited display keeps the pairs working inside flex rows, headings and buttons alike. -------------------------------------------------------------------------- */ .lang-sw { display: none; } html[lang="sw"] .lang-en { display: none; } html[lang="sw"] .lang-sw { display: inline; } .mk-langtoggle { font: 500 11px var(--mk-mono); padding: 6px 11px; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 999px; color: rgba(255, 255, 255, 0.85); cursor: pointer; user-select: none; white-space: nowrap; transition: color 0.18s ease, border-color 0.18s ease, transform 0.18s ease; } .mk-langtoggle:hover { color: var(--mk-navy); background: var(--mk-amber); border-color: var(--mk-amber); transform: translateY(-2px); } /* -------------------------------------------------------------------------- Header -------------------------------------------------------------------------- */ .main-header .logo img { width: 40px; height: 40px; border-radius: 9px; background: #fff; } .mk-wordmark { font: 700 16px/1 var(--heading-font-family); letter-spacing: 0.05em; color: #fff; margin-left: 12px; } .main-header .logo a { display: flex; align-items: center; } .main-menu .navigation > li > a { font-family: var(--heading-font-family); font-weight: 500; } .main-header .contact-btn { font-family: var(--heading-font-family); font-weight: 700; } /* -------------------------------------------------------------------------- Hero. The template hero leans on a photographic background; the brand direction uses no photography above the fold, so this is a navy field with the logo's rounded-square motif drifting behind the type instead. -------------------------------------------------------------------------- */ /* The template's hero carries 200px of vertical padding because its own hero holds a photo, a circle widget and a two-column content block. This one is type only, so that much padding pushed the marquee off a laptop screen. */ .hero-section.mk-hero { background: radial-gradient(1200px 620px at 78% 18%, rgba(255, 189, 89, 0.13), transparent 62%), linear-gradient(180deg, var(--mk-navy) 0%, var(--mk-navy-deep) 100%); position: relative; overflow: hidden; padding: 175px 0 105px; } .hero-section.mk-hero .hero-content { max-width: 900px; } .mk-hero-motif { position: absolute; right: -90px; top: 90px; width: 520px; height: 520px; opacity: 0.13; pointer-events: none; animation: mkFloat 7s ease-in-out infinite; } .mk-hero-motif span { position: absolute; width: 330px; height: 330px; border-radius: 70px; display: block; } .mk-hero-motif span:first-child { left: 0; top: 0; border: 34px solid var(--mk-amber); } .mk-hero-motif span:last-child { left: 180px; top: 180px; border: 34px solid #fff; } @keyframes mkFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } } .mk-eyebrow { font: 500 10.5px var(--mk-mono); letter-spacing: 0.2em; color: var(--mk-amber); text-transform: uppercase; display: inline-block; margin-bottom: 24px; } /* The conic sweep the previous site used on its headline. Kept because it is the one piece of motion the brand already owned. */ .mk-gradtext { background: conic-gradient(from 200deg, #fff, var(--mk-amber), #fff, var(--mk-amber), #fff); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-block; animation: mkBreathe 3.2s ease-in-out infinite; } @keyframes mkBreathe { 0%, 100% { filter: brightness(0.82) saturate(1); transform: scale(1); } 50% { filter: brightness(1.3) saturate(1.2); transform: scale(1.015); } } /* Safety net. .char-animation hands the element to SplitText, which wraps every character in its own element and lets GSAP transform them individually. A background-clip:text gradient cannot clip across transformed descendants, so the glyphs would paint transparent and the headline would vanish with no error anywhere. If the two ever meet, fall back to a solid colour. */ .char-animation .mk-gradtext, .char-animation.mk-gradtext { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--mk-amber); animation: none; } /* The headline wraps rather than using
, which SplitText renders inert (see index.php). Its measure comes from .hero-content above — the template sets a max-width on .hero-title at a specificity this cannot reach, so capping the wrapper is what actually controls the line count. */ .hero-title { font-size: var(--h1-font-size); line-height: 0.98; margin: 0 0 30px; text-wrap: balance; } .hero-title span span, .hero-title > span > span { color: var(--mk-amber); } .mk-hero-lead { max-width: 560px; font: 400 17px/1.65 var(--body-font-family); color: rgba(255, 255, 255, 0.78); margin-bottom: 38px; } /* -------------------------------------------------------------------------- Marquee — the CSS-only service ticker, duplicated track translated -50%. Borrowed from the Digitos marquee section, kept CSS-only as it was. -------------------------------------------------------------------------- */ .mk-marquee { border-top: 1px solid var(--mk-navy-line); border-bottom: 1px solid var(--mk-navy-line); padding: 20px 0; overflow: hidden; background: rgba(0, 0, 0, 0.12); } .mk-marquee-track { display: flex; width: max-content; animation: mkMarquee 26s linear infinite; } .mk-marquee-track > div { display: flex; gap: 38px; flex: none; padding-right: 38px; white-space: nowrap; font: 500 15px var(--heading-font-family); color: rgba(255, 255, 255, 0.62); } .mk-marquee-track i { color: var(--mk-amber); font-style: normal; } @keyframes mkMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .mk-marquee-track { animation: none; } .mk-gradtext, .mk-hero-motif { animation: none; } } /* -------------------------------------------------------------------------- Cards. One card treatment shared by services, values, credibility and leadership, so the pages read as one system. -------------------------------------------------------------------------- */ .mk-card { background: var(--mk-navy); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 14px; padding: 36px 30px; height: 100%; position: relative; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; } .mk-card:hover { transform: translateY(-8px); border-color: rgba(255, 189, 89, 0.55); box-shadow: 0 24px 20px -18px rgba(0, 0, 0, 0.45), 0 30px 45px -12px rgba(0, 0, 0, 0.4); } .mk-card .mk-card-icon { width: 60px; height: 60px; border-radius: 16px; background: rgba(255, 255, 255, 0.06); display: flex; align-items: center; justify-content: center; color: var(--mk-amber); margin-bottom: 20px; } .mk-card h4, .mk-card .mk-card-title { font: 700 20px/1.3 var(--heading-font-family); color: #fff; margin: 0 0 12px; } .mk-card p { margin: 0; font: 400 14.5px/1.75 var(--body-font-family); color: rgba(255, 255, 255, 0.68); } .mk-card .mk-num { position: absolute; top: 26px; right: 28px; font: 700 13px var(--mk-mono); color: rgba(255, 189, 89, 0.55); } .mk-chip { display: inline-block; font: 700 11px var(--mk-mono); padding: 6px 14px; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 999px; color: #fff; margin: 4px 4px 0 0; } /* -------------------------------------------------------------------------- Section headings — template's sec-title, repainted for navy. -------------------------------------------------------------------------- */ .sec-title .sub-title { color: var(--mk-amber); font: 500 11px var(--mk-mono); letter-spacing: 0.18em; text-transform: uppercase; } .sec-title .title { font-size: var(--h2-font-size); line-height: 1.12; } .sec-title .title span { color: var(--mk-amber); } .mk-section-lead { font: 400 16px/1.7 var(--body-font-family); color: rgba(255, 255, 255, 0.7); max-width: 640px; } /* -------------------------------------------------------------------------- Buttons -------------------------------------------------------------------------- */ .mk-btn { display: inline-flex; align-items: center; gap: 10px; background: var(--mk-amber); color: var(--mk-navy); padding: 16px 30px; border-radius: 999px; font: 700 14.5px var(--heading-font-family); border: 0; cursor: pointer; transition: transform 0.22s ease, box-shadow 0.22s ease; } .mk-btn:hover { color: var(--mk-navy); transform: translateY(-4px); box-shadow: 0 16px 20px -12px rgba(0, 0, 0, 0.4), 0 20px 34px -10px rgba(255, 189, 89, 0.45); } .mk-btn-ghost { background: transparent; color: #fff; border: 1.5px solid rgba(255, 255, 255, 0.35); font-weight: 500; } .mk-btn-ghost:hover { color: #fff; border-color: var(--mk-amber); } /* -------------------------------------------------------------------------- Inner page banner -------------------------------------------------------------------------- */ .page-title.mk-page-title { background: radial-gradient(900px 400px at 70% 10%, rgba(255, 189, 89, 0.15), transparent 60%), linear-gradient(180deg, var(--mk-navy) 0%, var(--mk-navy-deep) 100%); padding: 150px 0 90px; position: relative; overflow: hidden; } .page-title.mk-page-title .title { font-size: 56px; margin-bottom: 14px; } .page-title.mk-page-title .page-breadcrumb { display: flex; gap: 10px; justify-content: center; list-style: none; padding: 0; font: 500 12px var(--mk-mono); color: rgba(255, 255, 255, 0.6); } .page-title.mk-page-title .page-breadcrumb a { color: var(--mk-amber); } .page-title.mk-page-title .page-breadcrumb li + li::before { content: "/ "; opacity: 0.5; } /* -------------------------------------------------------------------------- Partners timeline — alternating cards on a centre spine. -------------------------------------------------------------------------- */ .mk-timeline { position: relative; padding: 10px 0; } .mk-timeline::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: linear-gradient(180deg, transparent, rgba(255, 189, 89, 0.5), transparent); } .mk-tl-row { display: flex; margin-bottom: 30px; } .mk-tl-row.mk-tl-right { justify-content: flex-end; } .mk-tl-card { width: calc(50% - 40px); position: relative; } .mk-tl-dot { position: absolute; top: 44px; width: 13px; height: 13px; border-radius: 50%; background: var(--mk-amber); box-shadow: 0 0 0 5px rgba(255, 189, 89, 0.18); } .mk-tl-left .mk-tl-dot { right: -46px; } .mk-tl-right .mk-tl-dot { left: -47px; } .mk-tl-mark { width: 52px; height: 52px; border-radius: 13px; background: rgba(255, 189, 89, 0.14); color: var(--mk-amber); display: flex; align-items: center; justify-content: center; font: 700 17px var(--heading-font-family); } .mk-tl-chip { display: inline-block; margin-top: 16px; font: 600 12px var(--mk-mono); color: var(--mk-amber); } .mk-tl-chip:hover { color: #fff; } /* -------------------------------------------------------------------------- Registration / credentials table -------------------------------------------------------------------------- */ .mk-reg-row { display: flex; justify-content: space-between; gap: 18px; padding: 13px 0; border-bottom: 1px dashed rgba(255, 255, 255, 0.16); font-size: 13.5px; } .mk-reg-row:last-child { border-bottom: 0; } .mk-reg-row dt { color: rgba(255, 255, 255, 0.6); font-weight: 400; margin: 0; } .mk-reg-row dd { color: #fff; font-family: var(--mk-mono); font-size: 12.5px; text-align: right; margin: 0; } /* -------------------------------------------------------------------------- Contact -------------------------------------------------------------------------- */ /* The template gives this section its own panel colour, which after the re-theme lands on exactly the same navy as .mk-card — so the cards sitting on it lost their edges. Let it fall through to the page ground instead. */ .contact-section { background-color: transparent; } .mk-field { width: 100%; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 10px; padding: 14px 16px; color: #fff; font: 400 14px var(--body-font-family); outline: none; transition: border-color 0.18s ease, background 0.18s ease; } .mk-field:focus { border-color: var(--mk-amber); background: rgba(255, 255, 255, 0.09); } .mk-field::placeholder { color: rgba(255, 255, 255, 0.42); } select.mk-field option { background: var(--mk-navy); color: #fff; } .mk-note { border-radius: 10px; padding: 13px 16px; font: 500 13.5px/1.6 var(--body-font-family); margin-bottom: 18px; } .mk-note-ok { background: rgba(255, 189, 89, 0.14); border: 1px solid rgba(255, 189, 89, 0.45); color: #fff; } .mk-note-err { background: rgba(255, 90, 90, 0.12); border: 1px solid rgba(255, 90, 90, 0.45); color: #fff; } .mk-contact-item { padding: 16px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.12); } .mk-contact-item .mk-contact-label { display: block; font: 500 10px var(--mk-mono); letter-spacing: 0.16em; color: var(--mk-amber); margin-bottom: 7px; } .mk-contact-item a, .mk-contact-item span.mk-v { color: #fff; font-size: 15px; } .mk-contact-item a:hover { color: var(--mk-amber); } .mk-map { border-radius: 14px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.16); height: 260px; margin-top: 26px; } /* Google's tiles are a bright white slab in the middle of a dark page. Desaturating and dimming settles them into the navy without costing the legibility of the street names. */ .mk-map iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(0.55) contrast(1.05) brightness(0.85) saturate(0.9); } /* -------------------------------------------------------------------------- Footer -------------------------------------------------------------------------- */ .mk-footer { background: var(--mk-navy); border-top: 1px solid var(--mk-navy-line); padding-top: 64px; } .mk-footer .mk-foot-label { font: 500 10px var(--mk-mono); letter-spacing: 0.16em; color: var(--mk-amber); margin-bottom: 16px; display: block; } .mk-footer a { color: rgba(255, 255, 255, 0.75); font-size: 13.5px; } .mk-footer a:hover { color: var(--mk-amber); } .mk-footer .mk-foot-links { display: flex; flex-direction: column; gap: 10px; } .mk-footer-bottom { margin-top: 46px; padding: 18px 0; border-top: 1px solid rgba(255, 255, 255, 0.1); font: 400 11px var(--mk-mono); color: rgba(255, 255, 255, 0.45); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; } /* -------------------------------------------------------------------------- Responsive -------------------------------------------------------------------------- */ @media (max-width: 1199px) { :root { --h1-font-size: 60px; --h2-font-size: 38px; } } @media (max-width: 991px) { .mk-hero-motif { display: none; } .mk-timeline::before { left: 18px; } .mk-tl-card { width: 100%; } .mk-tl-row.mk-tl-right { justify-content: flex-start; } .mk-tl-left .mk-tl-dot, .mk-tl-right .mk-tl-dot { left: -24px; right: auto; } } @media (max-width: 767px) { :root { --h1-font-size: 44px; --h2-font-size: 30px; } .page-title.mk-page-title { padding: 120px 0 64px; } .page-title.mk-page-title .title { font-size: 36px; } .mk-reg-row { flex-direction: column; gap: 4px; } .mk-reg-row dd { text-align: left; } }