@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;700;900&family=Inter:wght@300;400;500;600;700&family=Ubuntu:wght@400;500;700&family=Varela+Round&family=Noto+Sans:wght@400;500;600;700&display=swap'); :root { --color-red: #e2241b; --color-blue: #1a5e88; --color-pink: #b80a5c; --color-white: #F9FAFB; --color-black: #282828; --color-khaki: #c3b091; --color-grey: #565656; } /* Palette utility classes — apply a color by class instead of repeating var(--color-x) inline or hardcoding a hex value. */ .red { color: var(--color-red); } .blue { color: var(--color-blue); } .pink { color: var(--color-pink); } .white { color: var(--color-white); } .black { color: var(--color-black); } .khaki { color: var(--color-khaki); } .grey { color: var(--color-grey); } /* Per-case-study page fonts — one font per case study, applied on . Written as body.xxx-font so they reliably win over the .xxx-case font-family (same element, higher specificity) regardless of source order. */ /* Segoe UI is a proprietary OS/Office font with no licensed web-font distribution, so it can't be @import-ed like Ubuntu/Inter/Varela Round. It's listed first (used automatically on systems that already have it — most Windows machines), backed by a real loaded web font that's the closest open-license match, so the look is consistent everywhere else too. */ body.ibar-font { font-family: 'Varela Round', Arial, sans-serif; } body.sappo-font { font-family: 'Ubuntu', Arial, sans-serif; } body.corpo-blue-font { font-family: 'Segoe UI', 'Noto Sans', Arial, sans-serif; } body.agricol-font { font-family: 'Inter', sans-serif; } .section-light { background-color: var(--color-black); background-image: url(../assets/site-assets/africa-ai-dark.webp); background-repeat: repeat; color: var(--color-white); } .section-blue { background-color: var(--color-blue); background-image: url(../assets/site-assets/africa-ai-4flow.webp); background-repeat: repeat; color: var(--color-white); } .section-green { background-color: #2f4a2f; background-image: url(../assets/site-assets/africa-ai-agri.webp); background-repeat: repeat; color: var(--color-white); } html { scroll-behavior: smooth; } :root { --color-primary: #1a2332; --color-secondary: #6b8e6f; --color-accent: #c3b091; --color-warm: #f4a261; --color-light: #f5f5f3; --color-dark: #2a3847; --font-display: 'Playfair Display', serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --radius-card: 1.2rem; } body { font-family: var(--font-body); color: #2a3847; background-image: url(../assets/site-assets/africa-ai.webp); } /* Landing-page heading style only — explicitly excluded from the 7 case-study pages so their headings inherit the page font set on (ibar-font, sappo-font, corpo-blue-font, agricol-font) instead of the landing serif. */ body:not(.ibar-case):not(.agricol-case):not(.fflow-case):not(.sappo-case):not(.bw-case):not(.lms-case):not(.fshare-case) h1, body:not(.ibar-case):not(.agricol-case):not(.fflow-case):not(.sappo-case):not(.bw-case):not(.lms-case):not(.fshare-case) h2, body:not(.ibar-case):not(.agricol-case):not(.fflow-case):not(.sappo-case):not(.bw-case):not(.lms-case):not(.fshare-case) h3, body:not(.ibar-case):not(.agricol-case):not(.fflow-case):not(.sappo-case):not(.bw-case):not(.lms-case):not(.fshare-case) h4, body:not(.ibar-case):not(.agricol-case):not(.fflow-case):not(.sappo-case):not(.bw-case):not(.lms-case):not(.fshare-case) h5, body:not(.ibar-case):not(.agricol-case):not(.fflow-case):not(.sappo-case):not(.bw-case):not(.lms-case):not(.fshare-case) h6 { font-family: var(--font-display); font-weight: 700; } /* ── Global kicker label — shared across all case studies ── */ .kicker { display: block; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 0.75rem; } /* ── Shared case-study utility classes ── */ .cs-eyebrow { display: inline-block; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase; margin-bottom: 1rem; color: rgba(255,255,255,0.75); } .cs-hero-tagline { font-size: 1.15rem; font-weight: 400; line-height: 1.55; color: var(--color-white); } .cs-meta-row { display: flex; flex-wrap: wrap; gap: 1.75rem; margin-top: 2.5rem; } .cs-meta-chip { border-left: 3px solid rgba(255,255,255,0.35); padding-left: 0.75rem; } .cs-meta-chip.right { border-left: none; border-right: 3px solid rgba(255,255,255,0.35); padding-left: 0; padding-right: 0.75rem; text-align: right; } .cs-label { display: block; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(249,251,251,0.65); } .cs-value { font-weight: 700; font-size: 0.95rem; color: var(--color-white); } .cs-section { padding: 6rem 0; } .cs-section-tight { padding: 3rem 0; } .cs-section-lead { max-width: 640px; } .glass-ios { backdrop-filter: blur(2px) saturate(51%); -webkit-backdrop-filter: blur(2px) saturate(51%); border: 1px solid rgba(255, 255, 255, 0.25); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(255, 255, 255, 0.1), 0 8px 32px -8px rgba(0, 0, 0, 0.25); border-radius: 18px; overflow: hidden; position: relative; } .glass-ios::before { content: ''; position: absolute; inset: 0; background: linear-gradient( 135deg, rgba(255,255,255,0.25) 0%, transparent 40%, transparent 70%, rgba(255,255,255,0.12) 100% ); pointer-events: none; border-radius: inherit; z-index: 1; } /* Glass-ios variant for use on light backgrounds: dark-tinted glass instead of white-tinted */ .glass-ios-light { background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(1px) saturate(51%); -webkit-backdrop-filter: blur(1px) saturate(51%); colorL: #e8e4dc !important; } .bg-cancelled{ background: transparent !important; backdrop-filter: blur(4px) saturate(14%) !important; -webkit-backdrop-filter: blur(4px) saturate(14%)!important; } .contactCard{ position: absolute; bottom: 0; width: stretch; left: 0; } /* Generic glass-card structure, replacing the old per-case-study *-meta-card / *-insight-card classes. Font sizes are left to Bootstrap's default scale; text color is applied via the .black / .grey / .white utility classes directly on the markup, not here. */ .glass-ios h4 { font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-top: 1.5rem; margin-bottom: 0.35rem; } .glass-ios h4:first-child { margin-top: 0; } .glass-ios h3 { font-weight: 700; margin-bottom: 1rem; } .glass-ios p { margin-bottom: 0; } .glass-ios ul { list-style: none; padding-left: 0; margin: 0; } .glass-ios li { position: relative; padding-left: 1.5rem; margin-bottom: 0.75rem; line-height: 1.5; } .glass-ios li::before { content: ''; position: absolute; left: 0; top: 0.45rem; width: 8px; height: 8px; border-radius: 50%; background: var(--color-white); } .glass-ios.glass-ios-light li::before { background: var(--color-white); } /* Palette background-color utility classes, for decorative elements (like the bullet dot above) that have no tag to hang a text-color class on. */ .bg-red { background-color: var(--color-red); } .bg-blue { background-color: var(--color-blue); } .bg-pink { background-color: var(--color-pink); } .bg-white { background-color: var(--color-white); } .bg-black { background-color: var(--color-black); } .bg-khaki { background-color: var(--color-khaki); } .bg-grey { background-color: var(--color-grey); } .skills-bg{ background-size: cover; background-image: url(../assets/site-assets/skills-mattrix.webp); background-attachment: fixed; } .africa-bg{ background-image: url(../assets/site-assets/africa-ai.webp); } .matrix-spacing{ margin-top: 5rem; margin-bottom: 5rem; } .titleCareer{ justify-self: center; } .btn-accent { background-color: #565656; color: #c3b091 !important; border: none; } .btn-accent:hover { background-color: #3a3a3a; color: #9a876b; } .btn-outline-accent { background-color: transparent; color: #c3b091; border: 2px solid #565656; } .btn-outline-accent:hover { background-color: #565656; color: #c3b091; border: 2px solid #565656; } .text-accent { color: var(--color-accent); } .text-secondary { /* darkened from var(--color-secondary) for WCAG AA contrast on light sections */ color: #567a5c; } /* =============================================== Section BG =============================================== */ .aboutBG { padding: 5rem 1rem 8rem 17rem; background-repeat: no-repeat; background-position: center; background-size: cover; background-image: url(../assets/site-assets/aboutMe.webp); padding-right: 8rem; } /* Tablet: scale gutters down so columns keep readable line lengths */ @media (max-width: 1199px) { .aboutBG { padding: 4rem 2rem 5rem 3rem; } } @media (max-width: 768px) { .aboutBG { padding: 3rem 1.5rem; background-position: right center; background-size: 200%; } } @media (max-width: 576px) { .aboutBG { padding: 2rem 1rem; background-size: 250%; } } /* =============================================== Skills Section Styles =============================================== */ #Skills { background-color: var(--color-light); } #Skills h2 { color: var(--color-primary); margin-bottom: 2rem; font-weight: 700; } .btn-group .btn-outline-primary { border-color: #636B2F; color: #c3b091; font-weight: 600; border-radius: 1rem; background: rgba(0, 0, 0, 0.4); } .btn-group .btn-outline-primary:hover, .btn-group .btn-outline-primary.active { background-color: #636B2F; border-color: #636B2F; color: #f5ebd3; } .progress-label { font-weight: 600; color: var(--color-primary); margin-bottom: 0.5rem; } .progress { background-color: rgba(0, 0, 0, 0.1); height: 8px; border-radius: 4px; } .progress-bar { background-color: #636B2F; color: #f5ebd3; border-radius: 4px; } .home-para-two{ background-image: url(../assets/site-assets/divide-akasia.webp); } .home-para-three{ background-image: url(../assets/site-assets/FloatingLattern.webp); } .home-para-four{ background-image: url(../assets/site-assets/divide-waterpomp.webp); } .parallax-divide { padding-top: 20px; padding-bottom: 20px; width: 100%; background-attachment: fixed; background-size: cover; -moz-background-size: cover; -webkit-background-size: cover; background-repeat: no-repeat; background-position: top center; text-align: center; } .divide-index { display: block; font-family: var(--font-body); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.3em; color: var(--color-accent); text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); margin-bottom: 0.5rem; } .parallax-divide h1 { position: relative; display: inline-block; padding-bottom: 1.25rem; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); } .parallax-divide h1::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 80px; height: 4px; background-color: var(--color-accent); border-radius: 2px; } /* =============================================== Navbar Styles =============================================== */ .navbar { background-color: #252525 !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); padding: 0rem 0 !important; } .navbar-brand img { transition: transform 0.3s ease; } .navbar-brand img:hover { transform: scale(1.05); } .nav-link { color: var(--color-light) !important; font-weight: 500; font-size: 0.95rem; margin: 0 0.5rem; transition: color 0.3s ease; position: relative; } .nav-link::after { content: ''; position: absolute; width: 0; height: 2px; bottom: -5px; left: 0; background-color: var(--color-accent); transition: width 0.3s ease; } .nav-link:hover::after, .nav-link.active::after { width: 100%; } .nav-link:hover, .nav-link.active { color: var(--color-accent) !important; } /* =============================================== About Styles =============================================== */ .aboutCol-Right{ padding: 5rem 17rem 8rem 1rem; } /* Tablet: scale gutters down so columns keep readable line lengths */ @media (max-width: 1199px) { .aboutCol-Right { padding: 4rem 3rem 5rem 2rem; } } @media (max-width: 768px) { .aboutBG { padding: 3rem 1.5rem !important; } .aboutCol-Right { padding: 3rem 1.5rem !important; } } @media (max-width: 576px) { .aboutBG { padding: 2rem 1rem !important; } .aboutCol-Right { padding: 2rem 1rem !important; } } /* About Section Styles */ #About h4, #About p.text-secondary { font-family: var(--font-display); font-weight: 700; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 1rem; } @media (max-width: 768px) { #About h4, #About p.text-secondary { font-size: 0.7rem; letter-spacing: 1px; } #About .display-5 { font-size: 1.75rem !important; } #About .lead { font-size: 0.95rem; } #About .d-grid { gap: 0.75rem !important; } #About .btn-lg { padding: 0.5rem 1rem; font-size: 0.9rem; } } @media (max-width: 576px) { #About h4, #About p.text-secondary { font-size: 0.65rem; letter-spacing: 0.5px; } #About .display-5 { font-size: 1.25rem !important; } #About .lead { font-size: 0.85rem; } #About .btn-lg { padding: 0.4rem 0.8rem; font-size: 0.8rem; } #About .row > div > .row { margin-bottom: 1.5rem; } } .btn-outline-accent { background-color: transparent; border: 2px solid var(--color-accent); color: #565656; font-weight: 600; } .btn-outline-accent:hover { background-color: var(--color-accent); color: white; border-color: var(--color-accent); } @media (max-width: 768px) { #About .row.g-3 { gap: 0.75rem !important; } #About .row.g-3 .col-12 { margin-bottom: 0.5rem; } #About .text-accent { font-size: 1.5rem; } } @media (max-width: 576px) { #About .row.g-3 { gap: 0.5rem !important; } #About .text-accent { font-size: 1.25rem; } #About h5 { font-size: 1rem; } #About .small { font-size: 0.8rem; } } /* =============================================== General Styles =============================================== */ .hero { position: relative; width: 100%; height: 100vh; overflow: hidden; } @media (max-width: 768px) { .hero { height: 85vh; } } @media (max-width: 576px) { .hero { height: 90vh; } } .parallax-layer { position: absolute; width: 100%; height: 120%; background-size: cover; background-position: center; will-change: transform; } @media (max-width: 768px) { .parallax-layer { height: 100%; } .parallax-layer.logo-Layer { width: 100%; height: 45%; top: 24%; } /* Tree sits at centre by default, which lets it drift up away from the grass/ground line as the parallax scroll transform shifts it on mobile's shorter hero. Anchoring it to the bottom keeps it rooted to the base instead of floating mid-screen. top is used (not transform) because JS overwrites transform inline on every scroll event. */ .parallax-layer.tree-Layer { background-position: center bottom; top: 140px; } /* background-position (not left) shifts the image within its box — the layer box already spans the full hero width, so nudging the box itself with left would push its right edge past .hero's overflow: hidden boundary and clip the image. */ .parallax-layer.trunk-Layer { background-size: 234%; background-position: calc(35% + 100px) top; background-repeat: no-repeat; } } @media (max-width: 576px) { .parallax-layer.logo-Layer { width: 100%; height: 45%; top: 24%; } .parallax-layer.tree-Layer { top: -163px; height: 140%; } .parallax-layer.trunk-Layer { background-size: 234%; background-position: calc(35% + 100px) top; background-repeat: no-repeat; } .parallax-layer.cloud-Layer { top: 224px; } } .hero-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: white; z-index: 5; } .hero-eyebrow { display: block; font-family: var(--font-body); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.25em; text-transform: uppercase; color: var(--color-accent); text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45); margin-bottom: 0.75rem; } .hero-content h1 { font-size: 3rem; font-weight: bold; color: var(--color-light); text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45); } @media (max-width: 576px) { .hero-eyebrow { font-size: 0.65rem; letter-spacing: 0.18em; } .hero-content h1 { font-size: 2rem; } } .parallax { background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; height: 627px; position: relative; } .parallax-devide { background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; height: 250px; position: relative; } .parallax-caption { position: absolute; position-area: center; } .parallax-uiImage { position: absolute; text-align: center; justify-self: anchor-center; } .parallax-caption h3 { font-size: 2rem; font-weight: bold; } .parallax-caption p { font-size: 1.2rem; } ul { padding-left: 50px !important; } .accordionTitle-padding { padding-left: 40%; } button.accordion-button.fs-3.accordionTitle-padding { border-radius: 0 !important; background-color: transparent !important; } .accordion-item { border-radius: 0 !important; border: none !important; } .accordion-button:not(.collapsed) { box-shadow: none !important; } .accordion-button:focus { box-shadow: none !important; } #CaseStudies a { color: unset; text-decoration: none !important; } #CaseStudies { background-color: #ffffff; } #CaseStudies .studyCard { transition: transform 0.3s ease, box-shadow 0.3s ease; border-radius: 35px; overflow: hidden; } #CaseStudies .studyCard:hover { transform: translateY(-8px); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15); } #CaseStudies h3, #CaseStudies h2.h3 { color: var(--color-primary); font-size: 1.25rem; font-weight: 700; } #CaseStudies .mx-2 { color: #555; line-height: 1.6; } #CaseStudies a { color: unset; text-decoration: none !important; } /* =============================================== Contact Section Styles =============================================== */ #Contact h3, #Contact h1 { color: var(--color-light); } .contact100-form-title { font-family: var(--font-display); color: var(--color-light); font-size: 1.75rem; } .contact100-form-btn { background-color: var(--color-accent); border: none; color: white; font-weight: 600; border-radius: 4px; padding: 12px 24px; transition: background-color 0.3s ease; } .contact100-form-btn:hover { background-color: var(--color-warm); } .orange { color: var(--color-accent); text-decoration: none; font-weight: 600; } .orange:hover { color: var(--color-warm); text-decoration: underline; } /* =============================================== Index.html Specific Styles =============================================== */ #Career a { font-size: 1vw !important; } .bg-Layer { background-image: url('../assets/background-image-1.webp'); } .tree-Layer { background-image: url('../assets/background-image-2.webp'); } .cloud-Layer { background-image: url('../assets/clouds.webp'); animation: cloudMovement 350s linear infinite alternate; } @media (max-width: 768px) { .cloud-Layer { animation: cloudMovement 250s linear infinite alternate; } .parallax-layer.cloud-Layer { top: 224px; } } .trunk-Layer { background-image: url('../assets/background-image-4.webp'); } .grass-Layer { background-image: url('../assets/background-image-5.webp'); background-repeat: repeat-x; animation: wave 5s linear infinite; } @media (max-width: 768px) { .grass-Layer { animation: wave 3s linear infinite; } } @media (max-width: 576px) { .grass-Layer { animation: wave 2s linear infinite; } } .tree-Layer { background-image: url('../assets/background-image-2.webp'); } .cloud-Layer { background-image: url('../assets/clouds.webp'); animation: cloudMovement 350s linear infinite alternate; } .trunk-Layer { background-image: url('../assets/background-image-4.webp'); } .logo-Layer { background-image: url('../assets/logo.webp'); background-size: contain; background-repeat: no-repeat; width: 100%; height: 54%; place-self: anchor-center; animation: shakeAndPause 4s infinite; top: 21%; } .grass-Layer { background-image: url('../assets/background-image-5.webp'); background-repeat: repeat-x; animation: wave 5s linear infinite; } .bird-container, .bird-container2 { position: absolute; width: 10%; height: 10%; animation: animate-bird 15s linear infinite; } .bird-container2 { animation: animate-bird1 10s linear infinite; } .bird, .bird2 { width: 352px; height: 500px; background-image: url(../assets/sprite-sheet.svg); background-size: auto 100%; animation: bird 0.6s -0.5s steps(10) infinite; } @keyframes cloudMovement { 0% { transform: translate(-50vw, -20vh) scale(2); } 50% { transform: translate(50vw, -20vh) scale(2); } 100% { transform: translate(40vw, 0) scale(2); } } @keyframes shakeAndPause { 0%, 50% { transform: translate(0, 0); } 5%, 15%, 25%, 35% { transform: translate(-0.5px, 0); } 10%, 20%, 30%, 40% { transform: translate(0.5px, 0); } 50%, 100% { transform: translate(0, 0); } } @keyframes wave { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(20px, 0, 0); } } @keyframes wave-slow { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(5px, 0, 0); } } @keyframes bird { 100% { background-position: -3600px 0; } } @keyframes animate-bird { 0% { transform: translate(-10%, -10%) scale(0.1) rotate(0deg); } 20% { transform: translate(450px, 20%) scale(0.2) rotateY(20deg); } 50% { transform: translate(900px, 40%) scale(0.3) rotateY(20deg); } 80% { transform: translate(1350px, 50%) scale(0.1) rotateY(20deg); } 100% { transform: translate(1800px, 60%) scale(0.1) rotateY(0deg); } } @media (max-width: 768px) { .bird-container { animation: animate-bird 12s linear infinite !important; width: 12% !important; height: 12% !important; } .bird-container2 { animation: animate-bird1 8s linear infinite !important; width: 10% !important; height: 10% !important; } } @media (max-width: 576px) { .bird-container { animation: animate-bird 10s linear infinite !important; width: 13% !important; height: 13% !important; top: 330px; } .bird-container2 { animation: animate-bird1 7s linear infinite !important; width: 11% !important; height: 11% !important; top: 330px; } } @media (max-width: 768px) { @keyframes animate-bird { 0% { transform: translate(-5%, -10%) scale(0.15) rotate(0deg); } 20% { transform: translate(200px, 15%) scale(0.25) rotateY(20deg); } 50% { transform: translate(400px, 35%) scale(0.3) rotateY(20deg); } 80% { transform: translate(600px, 45%) scale(0.15) rotateY(20deg); } 100% { transform: translate(800px, 55%) scale(0.1) rotateY(0deg); } } .bird-container { animation: animate-bird 12s linear infinite !important; } } @media (max-width: 576px) { .bird-container { animation: animate-bird 10s linear infinite !important; top: 350px; } } @keyframes animate-bird1 { 0% { transform: translate(-20%, -20%) scale(0.2) rotate(0deg); } 50% { transform: translate(600px, 30%) scale(0.5) rotateY(20deg); } 100% { transform: translate(1800px, -100px) scale(0.1) rotateY(0deg); } } /* =============================================== iBar.html Specific Styles =============================================== */ .box img{ height: 100%; width: auto; object-fit:cover; } .iBarBG { background-image: url('../assets/iBar/backgrounds/iBarBG1.webp'); filter: blur(7px); } .iBar-Layer { background-image: url('../assets/iBar/iBarFrnt.webp'); z-index: 3; } /* ----- iBar case study: scoped design system ----- */ .ibar-case { --ib-amber: var(--color-white); --ib-amber-deep: var(--color-black); --ib-gold: var(--color-white); --ib-surface: var(--color-black); --ib-text: var(--color-white); --ib-text-dim: rgba(249, 251, 251, 0.75); --ib-display: 'Fredoka', sans-serif; --ib-body: 'Work Sans', sans-serif; /* iBar is permanently dark (unlike the other case studies), so this case-level color is an intentional exception, not part of the retired per-case text-color cascade system. */ color: var(--ib-text); font-family: var(--ib-body); } /* Top bar */ .ib-topbar { position: sticky; top: 0; z-index: 50; background-color: var(--ib-amber); padding: 0.85rem 1.5rem; display: flex; justify-content: space-between; align-items: center; } /* iBar exception — amber bar needs dark text */ .ib-topbar a { color: #1a1310; text-decoration: none; } .ib-topbar a:hover { opacity: 0.75; } /* Hero */ .ib-hero { position: relative; height: 100vh; overflow: hidden; display: flex; align-items: flex-end; } /* iBar's hero uses the generic parallax .hero; make it a flex box aligned to the bottom so the gradient panel drops to the base and sits flush with the hero's bottom edge (scoped to the iBar page so the index hero is unaffected). */ .ibar-case .hero { display: flex; align-items: flex-end; } .ib-hero-panel { position: relative; z-index: 2; width: 100%; background: linear-gradient(180deg, rgba(10, 7, 5, 0) 0%, rgba(10, 7, 5, 0.65) 35%, rgba(10, 7, 5, 0.96) 75%); padding: 12rem 0 0; } .ib-hero-content { padding: 0 8% 3rem; color: var(--color-white); max-width: 620px; } .ib-hero-content h1 { color: var(--color-white); } /* Section rhythm */ /* Inside the Kiosk: light section, scoped to this section only */ .ib-light-section { background-color: var(--color-white); background-image: url('../assets/site-assets/africa-ai.webp'); color: var(--color-black); } .ib-light-section h2, .ib-light-section h3, .ib-light-section h4 { color: var(--color-black); } .ib-light-section .ib-tablet-step { color: var(--ib-amber-deep); } .ib-light-section .ib-tablet-item p { color: rgba(40, 40, 40, 0.65); } /* Tablet-frame showcase strip */ .ib-tablet-viewport { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; margin-top: 2rem; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%); } .ib-tablet-track { display: flex; gap: 1.5rem; width: max-content; padding: 0.5rem 1.5rem 1rem; animation: ib-tablet-scroll 90s linear infinite; } .ib-tablet-track:hover { animation-play-state: paused; } @keyframes ib-tablet-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .ib-tablet-track { animation: none; } .ib-tablet-viewport { overflow-x: auto; } } .ib-tablet-item { flex: 0 0 auto; width: 520px; text-align: center; } .ib-tablet-item img { display: block; width: 100%; margin-bottom: 0.75rem; transition: transform 0.25s ease; } .ib-tablet-item img[data-lightbox] { cursor: zoom-in; } .ib-tablet-item:hover img { transform: translateY(-4px); } .ib-tablet-item .ib-tablet-step { font-family: var(--ib-display); color: var(--ib-gold); font-size: 0.85rem; margin-bottom: 0.2rem; display: block; } .ib-tablet-item p { font-size: 0.85rem; color: var(--ib-text-dim); margin: 0; } /* Experience map feature */ .ib-map-frame { border-radius: 0.75rem; overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 16px 32px rgba(0, 0, 0, 0.5); margin-top: 2rem; } .ib-map-frame img { display: block; width: 100%; } /* Outcome */ .ib-outcome { position: relative; padding: 7rem 0; text-align: center; overflow: hidden; } /* Screenshot lightbox */ /* Roomy, near-fullscreen dialog so screenshots can show at full scale */ .ib-lightbox-modal .modal-dialog { max-width: 96vw; width: auto; margin: 1.75rem auto; } .ib-lightbox-modal .modal-content { background: transparent; border: none; } .ib-lightbox-modal .modal-body { padding: 0; text-align: center; } /* Each slide is a flex centering box, sized to the viewport not the image */ .ib-lightbox-modal .carousel-item { text-align: center; } .ib-lightbox-modal .carousel-item.active { display: flex; align-items: center; justify-content: center; min-height: 90vh; } /* Show the whole screenshot, scaled to fit — never cropped or distorted. width:auto !important overrides Bootstrap's injected .w-100 on the image. */ .ib-lightbox-modal .carousel-item img { width: auto !important; height: auto; max-width: 96vw; max-height: 90vh; object-fit: contain; margin: 0 auto; border-radius: 0.5rem; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6); } .ib-lightbox-modal .carousel-control-prev, .ib-lightbox-modal .carousel-control-next { width: 10%; } .ib-lightbox-close { position: absolute; top: 8px; right: 8px; width: 2.25rem; height: 2.25rem; display: flex; align-items: center; justify-content: center; padding: 0; background-color: var(--ib-amber, #ffffff); border-radius: 50%; opacity: 1; font-size: 1.25rem; line-height: 1; z-index: 5; border: none; cursor: pointer; } .ib-lightbox-close:hover { background-color: var(--ib-amber-deep, #b7b1a8); } /* Make any lightbox-enabled screenshot read as clickable across all case studies */ img[data-lightbox] { cursor: zoom-in; } /* Lightbox status bar — "3 / 12" counter plus the image's alt text as a caption, sitting quietly under the enlarged image so visitors always know where they are in the gallery and what they're looking at. */ .ib-lightbox-status { display: flex; align-items: baseline; justify-content: center; gap: 0.75rem; margin-top: 0.75rem; color: rgba(255, 255, 255, 0.85); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); } #ibLightboxCounter { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; white-space: nowrap; opacity: 0.75; } #ibLightboxCaption { font-size: 0.9rem; max-width: 60ch; } #ibLightboxCaption:empty, #ibLightboxCounter:empty { display: none; } /* Single-image galleries have nothing to page through — hide the arrows */ .ib-lightbox-single .carousel-control-prev, .ib-lightbox-single .carousel-control-next { display: none; } .carousel-inner { border-radius: 10px; overflow: hidden; } .carousel-item img { width: 100%; height: 500px; object-fit: cover; } @media (max-width: 768px) { .carousel-item img { height: 300px; } } @media (max-width: 576px) { .carousel-item img { height: 200px; } } #SappoSynth .accordion-header, #SappoOver .accordion-header { border-radius: 2rem 2rem 0 0; margin-top: 2rem; } #SappoSynth .accordion-body, #SappoOver .accordion-body { margin: 0 20% 0 20%; } #SappoSynth .accordion, #SappoOver .accordion { --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); } /* =============================================== Agricol.html Specific Styles =============================================== */ .agriBG-Layer { background-image: url('../assets/Agricol/agriBG.webp'); } .agriFrnt-Layer { background-image: url('../assets/Agricol/agriFrnt.webp'); } /* ----- Agricol case study: scoped design system ----- */ .agricol-case { --ag-red: var(--color-red); --ag-red-deep: #a91912; --ag-dark: var(--color-black); --ag-display: 'Unbounded', sans-serif; --ag-body: 'Plus Jakarta Sans', sans-serif; font-family: var(--ag-body); } /* Top bar */ .ag-topbar { position: sticky; top: 0; z-index: 50; display: flex; justify-content: space-between; align-items: center; background-color: var(--ag-red); padding: 0.85rem 1.5rem; } .ag-topbar a { color: var(--color-white); font-family: var(--ag-body); font-weight: 600; font-size: 0.9rem; text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem; transition: opacity 0.2s ease; } .ag-topbar a:hover { opacity: 0.8; } /* Hero */ .ag-hero { position: relative; height: 100vh; overflow: hidden; display: flex; align-items: center; justify-content: flex-end; } .ag-hero::after { content: ''; position: absolute; inset: 0; z-index: 1; } .agriBG-Layer { background-size: cover; background-position: center; } .agriFrnt-Layer { background-size: cover; background-position: bottom center; } .agriElements-Layer { background-image: url('../assets/Agricol/agricol-phone-left.webp'); background-size: contain; background-position: left bottom; background-repeat: no-repeat; filter: drop-shadow(0 25px 35px rgba(0, 0, 0, 0.4)); } .ag-hero-content { position: relative; z-index: 2; padding: 0 6% 12vh; color: var(--color-white); max-width: 560px; text-align: right; margin-left: auto; } .ag-hero-content h1 { color: var(--color-white); text-shadow: 0 4px 18px rgba(0, 0, 0, 0.55); } .ag-hero-content .cs-hero-tagline { font-family: var(--ag-body); font-weight: 500; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6); margin-left: auto; } .ag-hero-content .cs-meta-row { justify-content: flex-end; } @media (max-width: 768px) { .ag-hero-content { text-align: left; margin-left: 0; margin-right: auto; padding: 0 6% 32vh; } .ag-hero-content .cs-hero-tagline { margin-left: 0; } .ag-hero-content .cs-meta-row { justify-content: flex-start; } .ag-hero-content .cs-meta-chip.right { border-right: none; border-left: 3px solid rgba(255,255,255,0.35); padding-right: 0; padding-left: 0.75rem; text-align: left; } } @media (max-width: 768px) { .ag-hero-content { padding: 0 6% 38vh; } } /* Section rhythm */ /* Phone-frame showcase: auto-scrolling marquee */ .ag-flow-viewport { overflow: hidden; margin-top: 2rem; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%); } .ag-flow-track { display: flex; gap: 1.5rem; width: max-content; padding: 0 1.5rem 1rem; animation: ag-flow-scroll 50s linear infinite; } .ag-flow-track:hover { animation-play-state: paused; } @keyframes ag-flow-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .ag-flow-track { animation: none; } .ag-flow-viewport { overflow-x: auto; } } .ag-flow-item { flex: 0 0 auto; width: 220px; text-align: center; } .ag-phone-frame { border-radius: 1.75rem; border: 8px solid var(--ag-dark); overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 16px 32px rgba(0, 0, 0, 0.5); margin-bottom: 1rem; } .ag-phone-frame img { display: block; width: 100%; } .ag-flow-item .ag-flow-step { font-family: var(--ag-display); color: var(--ag-red); font-size: 0.85rem; margin-bottom: 0.25rem; } .ag-flow-item p { font-size: 0.85rem; margin: 0; } /* Note: .ag-outcome-feature/.ag-outcome-phone/.ag-outcome-title/.ag-outcome-lead/ .ag-outcome-body/.ag-store-badges/.ag-store-badge are unused (no matching markup in Agricol.html) — removed as dead code. Only .ag-outcome-contact is live. */ .ag-outcome-contact { text-align: center; padding: 4.5rem 0; } .ag-outcome-contact p { font-weight: 600; margin-bottom: 2rem; } /* =============================================== 4flow.html Specific Styles =============================================== */ .FflowBG { background-image: url('../assets/4flow/4FlowBG.webp'); } .FflowElements-Layer { background-image: url('../assets/4flow/4FlowElements.webp'); } .Fflow-Layer { background-image: url('../assets/4flow/4Flow_Front.webp'); background-size: contain; background-repeat: no-repeat; z-index: 2; } /* ----- 4flow case study: scoped design system ----- */ .fflow-case { --ff-blue: var(--color-blue); --ff-blue-deep: #123f5c; --ff-surface: #ffffff; --ff-text: var(--color-black); --ff-text-dim: var(--color-grey); --ff-display: 'Outfit', sans-serif; --ff-body: 'IBM Plex Sans', sans-serif; font-family: var(--ff-body); } .parallax-1 { background-image: url('../assets/4flow/mockup_Header.png'); } /* Top bar */ .ff-topbar { position: sticky; top: 0; z-index: 50; display: flex; justify-content: space-between; align-items: center; background-color: var(--ff-blue); padding: 0.85rem 1.5rem; } .ff-topbar a { color: var(--color-white); font-family: var(--ff-body); font-weight: 600; font-size: 0.9rem; text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem; transition: opacity 0.2s ease; } .ff-topbar a:hover { opacity: 0.8; } /* Hero */ .ff-hero { position: relative; height: 100vh; overflow: hidden; display: flex; align-items: center; } .ff-hero::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(100deg, rgba(8, 14, 20, 0.88) 0%, rgba(8, 14, 20, 0.55) 45%, rgba(8, 14, 20, 0.2) 100%); } .ff-hero-content { position: relative; z-index: 2; padding: 0 8%; color: var(--color-white); max-width: 620px; } .ff-hero-content h1 { color: var(--color-white); } /* Screenshot showcase: auto-scrolling marquee */ .ff-flow-viewport { overflow: hidden; margin-top: 2rem; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%); } .ff-flow-track { display: flex; align-items: flex-start; gap: 1.5rem; width: max-content; padding: 0.5rem 1.5rem 1rem; animation: ff-flow-scroll 80s linear infinite; } .ff-flow-track:hover { animation-play-state: paused; } @keyframes ff-flow-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .ff-flow-track { animation: none; } .ff-flow-viewport { overflow-x: auto; } } .ff-flow-item { flex: 0 0 auto; text-align: center; } /* Desktop screens are 16:9 landscape — wider items */ .ff-flow-row-desktop .ff-flow-item { width: 420px; } .ff-flow-item img { display: block; width: 100%; border-radius: 0.6rem; box-shadow: 0 12px 28px rgba(29, 41, 57, 0.18); margin-bottom: 0.75rem; transition: transform 0.25s ease, box-shadow 0.25s ease; } .ff-flow-item:hover img { transform: translateY(-4px); box-shadow: 0 18px 36px rgba(29, 41, 57, 0.24); } .ff-flow-item .ff-flow-step { font-family: var(--ff-display); font-weight: 700; color: var(--ff-blue); font-size: 0.85rem; margin-bottom: 0.2rem; display: block; } .ff-flow-item p { font-size: 0.85rem; color: var(--ff-text-dim); margin: 0; } /* These two sections sit on the blue africa-ai-4flow.webp background, so their plain text (not the white insight/meta cards) needs to flip to white */ .ff-showcase h2, .ff-showcase h3, .ff-showcase h4, #FourFlowSynth h2, #FourFlowSynth h3, #FourFlowSynth h4 { color: var(--color-white); } .ff-showcase > .container-sm > p, #FourFlowSynth > .container-sm > p { color: rgba(249, 251, 251, 0.85); } .ff-showcase .ff-flow-step { color: var(--color-white); } .ff-showcase .ff-flow-item p { color: rgba(249, 251, 251, 0.85); } /* Outcome: dark bookend band */ .ff-outcome { text-align: center; padding: 6rem 0; } .ff-outcome h2 { color: var(--color-white); } .ff-outcome p { max-width: 560px; margin: 0 auto 2rem; color: rgba(249, 251, 251, 0.8); font-size: 1.05rem; } @media (max-width: 768px) { .ff-hero-content { padding: 0 6%; } } /* =============================================== Sappo.html Specific Styles =============================================== */ .sappoBG-Layer { background-image: url('../assets/Sappo/sappoBG.webp'); } .sappoFrnt-Layer { background-image: url('../assets/Sappo/sappoFrnt.webp'); } .sappo-Layer { background-image: url('../assets/Sappo/sappo.webp'); } /* ----- Sappo case study: scoped design system ----- */ /* Top bar */ .sp-topbar { position: sticky; top: 0; z-index: 50; display: flex; justify-content: space-between; align-items: center; background-color: var(--sp-pink); padding: 0.85rem 1.5rem; } .sp-topbar a { font-family: var(--sp-body); font-weight: 700; font-size: 0.9rem; text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem; transition: opacity 0.2s ease; } .sp-topbar a:hover { opacity: 0.8; } /* Hero */ .sp-hero { position: relative; height: 100vh; overflow: hidden; display: flex; align-items: flex-end; } .sp-hero::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(13, 13, 13, 0.1) 0%, rgba(13, 13, 13, 0.65) 55%, rgba(13, 13, 13, 0.96) 100%); } .sp-hero-content { position: relative; z-index: 2; padding: 0 8% 4rem; color: var(--color-white); max-width: 640px; } .sp-hero-content h1 { color: var(--color-white); } /* Two-projects split cards */ .sp-project-card { padding: 2rem; height: 100%; transition: transform 0.25s ease; } .sp-project-card:hover { transform: translateY(-4px); } .sp-project-tag { display: inline-block; background: var(--sp-pink); color: var(--color-white); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.3rem 0.75rem; border-radius: 50px; margin-bottom: 1rem; } .sp-project-card p { color: var(--sp-text-dim); font-size: 0.95rem; } /* Product showcase: auto-scrolling marquee of real screens */ .sp-flow-viewport { overflow: hidden; margin-top: 2rem; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%); } .sp-flow-track { display: flex; gap: 1.5rem; width: max-content; padding: 0.5rem 1.5rem 1rem; animation: sp-flow-scroll 70s linear infinite; } .sp-flow-track:hover { animation-play-state: paused; } @keyframes sp-flow-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .sp-flow-track { animation: none; } .sp-flow-viewport { overflow-x: auto; } } .sp-flow-item { flex: 0 0 auto; width: 520px; text-align: center; } .sp-flow-item img { display: block; width: 100%; margin-bottom: 0.75rem; transition: transform 0.25s ease; } .sp-flow-item:hover img { transform: translateY(-4px); } .sp-flow-item .sp-flow-step { font-family: var(--sp-display); font-weight: 700; color: var(--sp-pink); font-size: 0.85rem; margin-bottom: 0.25rem; display: block; } .sp-flow-item p { font-size: 0.85rem; color: var(--sp-text-dim); margin: 0; } /* User research artifacts: persona + journey map */ .sp-research-frame { border-radius: 0.75rem; overflow: hidden; height: 100%; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 16px 32px rgba(0, 0, 0, 0.4); } .sp-research-frame img { display: block; width: 100%; } /* Outcome */ .sp-outcome { text-align: center; padding: 6rem 0; } .sp-outcome p { max-width: 560px; margin: 0 auto 2rem; font-size: 1.05rem; } @media (max-width: 768px) { .sp-hero-content { padding: 0 6% 3rem; } } /* =============================================== Skills Matrix =============================================== */ .progress-container { margin-bottom: 1rem; } .progress-label { font-weight: bold; margin-bottom: 0.25rem; } .progress { height: 1.5rem; border-radius: 0.25rem; } .hidden { display: none; } /* =============================================== Logo Marquee =============================================== */ .logo-section { position: relative; /* webp kept as fallback while the video loads / if playback fails */ background-image: url(../assets/site-assets/carousel-BG.webp); background-attachment: fixed; background-size: cover; background-position: center; background-repeat: no-repeat; padding: 4rem 0rem; overflow: hidden; /* clips the fixed video to this section, recreating the parallax effect */ clip-path: inset(0); } .logo-section__video { /* fixed to viewport + clipped by the section = same parallax as background-attachment: fixed */ position: fixed; inset: 0; width: 100%; height: 100vh; object-fit: cover; z-index: 0; } .logo-section .logo-container { position: relative; z-index: 1; } .logo-container { position: relative; width: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%); } .marquee { display: flex; height: var(--marquee-item-height); position: relative; overflow: hidden; align-items: center; justify-content: center; } .marquee--12 { --marquee-item-width: 120px; --marquee-item-height: 120px; --marquee-duration: 40s; --marquee-items: 12; } .marquee__item { --marquee-item-offset: max( calc(var(--marquee-item-width) * var(--marquee-items)), calc(100% + var(--marquee-item-width)) ); --marquee-delay: calc(var(--marquee-duration) / var(--marquee-items) * (var(--marquee-items) - var(--marquee-item-index)) * -1); position: absolute; left: var(--marquee-item-offset); width: var(--marquee-item-width); height: var(--marquee-item-height); object-fit: contain; padding: 1rem; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.1)); animation: go linear var(--marquee-duration) var(--marquee-delay, 0s) infinite; } .marquee--12 .marquee__item:nth-of-type(1) { --marquee-item-index: 1; } .marquee--12 .marquee__item:nth-of-type(2) { --marquee-item-index: 2; } .marquee--12 .marquee__item:nth-of-type(3) { --marquee-item-index: 3; } .marquee--12 .marquee__item:nth-of-type(4) { --marquee-item-index: 4; } .marquee--12 .marquee__item:nth-of-type(5) { --marquee-item-index: 5; } .marquee--12 .marquee__item:nth-of-type(6) { --marquee-item-index: 6; } .marquee--12 .marquee__item:nth-of-type(7) { --marquee-item-index: 7; } .marquee--12 .marquee__item:nth-of-type(8) { --marquee-item-index: 8; } .marquee--12 .marquee__item:nth-of-type(9) { --marquee-item-index: 9; } .marquee--12 .marquee__item:nth-of-type(10) { --marquee-item-index: 10; } .marquee--12 .marquee__item:nth-of-type(11) { --marquee-item-index: 11; } .marquee--12 .marquee__item:nth-of-type(12) { --marquee-item-index: 12; } @keyframes go { to { left: calc(var(--marquee-item-width) * -1); } } @media (max-width: 768px) { .logo-section { padding: 3rem 1rem; } .marquee--12 { --marquee-item-width: 90px; --marquee-item-height: 90px; --marquee-duration: 30s; } .marquee__item { padding: 0.75rem; } } @media (max-width: 576px) { .logo-section { padding: 2rem 0rem; } .marquee--12 { --marquee-item-width: 70px; --marquee-item-height: 70px; --marquee-duration: 25s; } .marquee__item { padding: 0.5rem; } } /* =============================================== flip Card =============================================== */ .over-hide { overflow: hidden; } .section { position: relative; width: 100%; z-index: 1; display: block; } .card-3d-wrap { position: relative; width: 340px; max-width: calc(100% - 20px); height: 510px; margin-top: 90px; } .card-3d-wrapper { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .card-back-1, .card-back-2 { width: 100%; height: 100%; background-color: rgba(255, 255, 255, 1); position: absolute; border-radius: 6px; left: 0; top: 0; box-shadow: 0 12px 35px 0 rgba(16, 39, 112, .07); } .experience-wrap { position: relative; padding-top: 160px; width: 100%; display: block; z-index: 1; } .experience-wrap h4, .experience-wrap h2.h4 { position: relative; width: 100%; display: block; text-align: center; font-family: var(--font-body); font-weight: 700; letter-spacing: 3px; font-size: 22px; line-height: 1.7; color: #0c1c00; transform: translate3d(0, 0, 35px) perspective(100px); } .card-back-1 .experience-wrap h4:before, .card-back-1 .experience-wrap h2.h4:before { position: absolute; content: ''; z-index: -1; background: linear-gradient(217deg, #648946, #a3c984); width: 70px; height: 70px; display: block; top: 50%; left: 50%; transform: translate(-50%, -50%); box-shadow: 0 6px 20px 0 rgba(16, 39, 112, .3); animation: border-transform 6s linear infinite; } .card-back-2 .experience-wrap h4:before, .card-back-2 .experience-wrap h2.h4:before { position: absolute; content: ''; z-index: -1; background: linear-gradient(217deg, #448ad5, #b8eaf9); width: 70px; height: 70px; display: block; top: 50%; left: 50%; transform: translate(-50%, -50%); box-shadow: 0 6px 20px 0 rgba(16, 39, 112, .3); animation: border-transform 6s linear infinite; } @keyframes border-transform { 0%, 100% { border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%; } 14% { border-radius: 40% 60% 54% 46% / 49% 60% 40% 51%; } 28% { border-radius: 54% 46% 38% 62% / 49% 70% 30% 51%; } 42% { border-radius: 61% 39% 55% 45% / 61% 38% 62% 39%; } 56% { border-radius: 61% 39% 67% 33% / 70% 50% 50% 30%; } 70% { border-radius: 50% 50% 34% 66% / 56% 68% 32% 44%; } 84% { border-radius: 46% 54% 50% 50% / 35% 61% 39% 65%; } } .experience-wrap h2, .experience-wrap p, .card-back-1 h2, .card-back-1 p, .card-back-2 h2, .card-back-2 p { color: #0c1c00; } .link { position: relative; padding: 10px 20px; border-radius: 4px; display: inline-block; text-align: center; color: #ffeba7; background-color: #0c1c00; transition: all 200ms linear; font-family: var(--font-body); font-weight: 500; font-size: 14px; line-height: 1.2; transform: translate3d(0, 0, 30px) perspective(100px); } .link:hover { color: #0c1c00; background-color: #ffeba7; } .img-wrap img { width: 100%; height: auto; display: block; } .img-2-1, .img-2-2 { position: absolute; display: block; left: 0; top: 0; z-index: 1; border-top-left-radius: 6px; border-top-right-radius: 6px; overflow: hidden; width: 100%; transform: translate3d(0, 0, 15px) perspective(100px); } .img-4-1, .img-4-2 { position: absolute; display: block; left: -60px; top: -60px; z-index: 5; width: calc(65% + 60px); transform: translate3d(0, 0, 45px) perspective(100px) scale(1); opacity: 1; pointer-events: auto; } .img-5-1, .img-5-2 { position: absolute; display: block; right: -70px; top: -50px; z-index: 6; width: calc(60% + 70px); transform: translate3d(0, 0, 35px) perspective(100px) scale(1) rotate(10deg); opacity: 1; pointer-events: auto; } .img-7-1, .img-7-2 { position: absolute; display: block; right: -30px; bottom: -65px; z-index: 6; width: calc(25% + 30px); transform: translate3d(0, 0, 35px) perspective(100px) scale(1); opacity: 1; pointer-events: auto; } .cards-container-1, .cards-container-2 { height: 280px; overflow-y: auto; scroll-snap-type: y mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .cards-container-1::-webkit-scrollbar, .cards-container-2::-webkit-scrollbar { display: none; } .card-item { height: 280px; scroll-snap-align: start; opacity: 0; transform: translateY(20px); transition: opacity 300ms ease, transform 300ms ease; cursor: pointer; } .cards-container-1 .card-item.active, .cards-container-2 .card-item.active { opacity: 1; transform: translateY(0); } .job-card { position: relative; /* anchor for .scroll-indicator */ border-radius: var(--radius-card); background-color: #fff; border: 1px solid #e0e0e0; transition: transform 0.25s ease, box-shadow 0.25s ease; } .job-card:hover { transform: translateY(-4px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.18); } .job-logo { width: 45px; height: auto; } .company-name { font-size: 0.9rem; } /* Card wrapper */ .studyCard { background: #fff; border-radius: var(--radius-card); overflow: hidden; cursor: pointer; } /* Slightly bigger radius on wide screens */ @media (min-width: 53rem) { .studyCard { border-radius: 2rem; } } /* Card inner area */ .card-inner { position: relative; height: 12rem; background: var(--clr, #fff); border-bottom-right-radius: 0; } /* White inner box that holds image + label */ .box { position: relative; width: 100%; height: 100%; background: #fff; border-radius: 1.6rem; overflow: hidden; } /* Full-bleed image */ .imgBox { position: absolute; inset: 0; } .imgBox img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; /* uses .box radius */ } /* Bottom label / icon area */ .icon { position: absolute; bottom: 0; /* sits flush to bottom */ right: 0; width: 100%; height: 3rem; display: flex; align-items: center; background: #fff; padding-left: 0.9rem; pointer-events: none; /* label is decorative in your current markup */ box-shadow: 0 -1px 0 rgba(0,0,0,0.03); } /* Wider fancy offset on larger screens */ @media (min-width: 53rem) { .icon { width: 18rem; right: -0.375rem; border-top-left-radius: 1rem; padding-left: 1rem; } /* subtle decorative accents using the card color variable */ .icon::before { content: ""; position: absolute; bottom: -6px; left: -1.25rem; width: 1.25rem; height: 1.25rem; border-bottom-right-radius: 1rem; box-shadow: 0.313rem 0.313rem 0 0.313rem var(--clr, rgba(0,0,0,0.08)); background: transparent; } .icon::after { content: ""; position: absolute; top: -1.25rem; right: 0.375rem; width: 1.25rem; height: 1.25rem; border-bottom-right-radius: 1.25rem; box-shadow: 0.313rem 0.313rem 0 0.313rem var(--clr, rgba(0,0,0,0.08)); background: transparent; } } /* Label text */ .icon h3 { margin: 0; margin-left: 0.3em; text-transform: uppercase; font-size: 0.9rem; color: #707070; font-weight: 400; pointer-events: none; } /* give slightly larger left margin on wide screens */ @media (min-width: 53rem) { .icon h3 { margin-left: 1rem; font-size: 0.95rem; } } /* Active state modifier (if you add .active to .studyCard) */ .studyCard.active .icon h3 { color: #111; } /* Dynamic image classes for card-back-1 */ .card-back-1.snr-lead-ux-designer .img-2-1 img { content: url('../assets/WorkExperience/4Sight/floor.webp'); } .card-back-1.snr-lead-ux-designer .img-4-1 img { content: url('../assets/WorkExperience/4Sight/sappo.webp'); } .card-back-1.snr-lead-ux-designer .img-5-1 img { content: url('../assets/WorkExperience/4Sight/app.webp'); } .card-back-1.snr-lead-ux-designer .img-7-1 img { content: url('../assets/WorkExperience/4Sight/globe.webp'); } .card-back-1.senior-multimedia-specialist .img-2-1 img { content: url('../assets/WorkExperience/Barloworld/park.webp'); } .card-back-1.senior-multimedia-specialist .img-4-1 img { content: url('../assets/WorkExperience/Barloworld/office.webp'); } .card-back-1.senior-multimedia-specialist .img-5-1 img { content: url('../assets/WorkExperience/Barloworld/totem.webp'); } .card-back-1.senior-multimedia-specialist .img-7-1 img { content: url('../assets/WorkExperience/Barloworld/car.webp'); } .card-back-1.associate-supervisor .img-2-1 img { content: url('../assets/WorkExperience/ey/digital.webp'); } .card-back-1.associate-supervisor .img-4-1 img { content: url('../assets/WorkExperience/ey/ey.webp'); } .card-back-1.associate-supervisor .img-5-1 img { content: url('../assets/WorkExperience/ey/app.webp'); } .card-back-1.associate-supervisor .img-7-1 img { content: url('../assets/WorkExperience/ey/eyglobe.webp'); } .card-back-1.creative-director .img-2-1 img { content: url('../assets/WorkExperience/CreativeFox/log.webp'); } .card-back-1.creative-director .img-4-1 img { content: url('../assets/WorkExperience/CreativeFox/martello.webp'); } .card-back-1.creative-director .img-5-1 img { content: url('../assets/WorkExperience/CreativeFox/tablet.webp'); } .card-back-1.creative-director .img-7-1 img { content: url('../assets/WorkExperience/CreativeFox/redbull.webp'); } .card-back-1.snr-digital-designer .img-2-1 img { content: url('../assets/WorkExperience/CreativeFox/log.webp'); } .card-back-1.snr-digital-designer .img-4-1 img { content: url('../assets/WorkExperience/CreativeFox/martello.webp'); } .card-back-1.snr-digital-designer .img-5-1 img { content: url('../assets/WorkExperience/CreativeFox/tablet.webp'); } .card-back-1.snr-digital-designer .img-7-1 img { content: url('../assets/WorkExperience/CreativeFox/redbull.webp'); } .card-back-1.ui-ux-graphics-development .img-2-1 img { content: url('../assets/WorkExperience/promed/radiology.webp'); } .card-back-1.ui-ux-graphics-development .img-4-1 img { content: url('../assets/WorkExperience/promed/xray.webp'); } .card-back-1.ui-ux-graphics-development .img-5-1 img { content: url('../assets/WorkExperience/promed/skull.webp'); } .card-back-1.ui-ux-graphics-development .img-7-1 img { content: url('../assets/WorkExperience/promed/ris.webp'); } .card-back-1.it-network-technician .img-2-1 img { content: url('../assets/WorkExperience/promed/radiology.webp'); } .card-back-1.it-network-technician .img-4-1 img { content: url('../assets/WorkExperience/promed/network.webp'); } .card-back-1.it-network-technician .img-5-1 img { content: url('../assets/WorkExperience/promed/skull.webp'); } .card-back-1.it-network-technician .img-7-1 img { content: url('../assets/WorkExperience/promed/ris.webp'); } /* Dynamic image classes for card-back-2 */ .card-back-2.advanced-inventor .img-2-2 img { content: url('../assets/Education/inventor/wire.webp'); } .card-back-2.advanced-inventor .img-4-2 img { content: url('../assets/Education/inventor/left.webp'); } .card-back-2.advanced-inventor .img-5-2 img { content: url('../assets/Education/inventor/cad.webp'); } .card-back-2.advanced-inventor .img-7-2 img { content: url('../assets/Education/inventor/inv.webp'); } .card-back-2.advanced-autocad-3d .img-2-2 img { content: url('../assets/Education/cad/blueprint.webp'); } .card-back-2.advanced-autocad-3d .img-4-2 img { content: url('../assets/Education/cad/drawing.webp'); } .card-back-2.advanced-autocad-3d .img-5-2 img { content: url('../assets/Education/cad/pen.webp'); } .card-back-2.advanced-autocad-3d .img-7-2 img { content: url('../assets/Education/cad/cad.webp'); } .card-back-2.advanced-3d .img-2-2 img { content: url('../assets/Education/3d/grid.webp'); } .card-back-2.advanced-3d .img-4-2 img { content: url('../assets/Education/3d/element.webp'); } .card-back-2.advanced-3d .img-5-2 img { content: url('../assets/Education/3d/model.webp'); } .card-back-2.advanced-3d .img-7-2 img { content: url('../assets/Education/3d/maya.webp'); } .card-back-2.advanced-html5-css .img-2-2 img { content: url('../assets/Education/html/code.webp'); } .card-back-2.advanced-html5-css .img-4-2 img { content: url('../assets/Education/html/elements.webp'); } .card-back-2.advanced-html5-css .img-5-2 img { content: url('../assets/Education/html/web.webp'); } .card-back-2.advanced-html5-css .img-7-2 img { content: url('../assets/WorkExperience/4Sight/globe.webp'); } .card-back-2.bachelor-degree-incomplete .img-2-2 img { content: url('../assets/Education/film/red.webp'); } .card-back-2.bachelor-degree-incomplete .img-4-2 img { content: url('../assets/Education/film/pop.webp'); } .card-back-2.bachelor-degree-incomplete .img-5-2 img { content: url('../assets/Education/film/film.webp'); } .card-back-2.bachelor-degree-incomplete .img-7-2 img { content: url('../assets/Education/film/badge.webp'); } .card-back-2.matric .img-2-2 img { content: url('../assets/Education/high/grass.webp'); } .card-back-2.matric .img-4-2 img { content: url('../assets/Education/high/school.webp'); } .card-back-2.matric .img-5-2 img { content: url('../assets/Education/high/desk.webp'); } .card-back-2.matric .img-7-2 img { content: url('../assets/Education/high/skool.webp'); } /* Hide all background images by default until a specific card class is active */ .card-back-1 .img-wrap img, .card-back-2 .img-wrap img { opacity: 0; transition: opacity 0.4s ease; } /* Only show images when a specific job/education class is present */ .card-back-1[class*="snr-lead-ux-designer"] .img-wrap img, .card-back-1[class*="senior-multimedia-specialist"] .img-wrap img, .card-back-1[class*="associate-supervisor"] .img-wrap img, .card-back-1[class*="creative-director"] .img-wrap img, .card-back-1[class*="snr-digital-designer"] .img-wrap img, .card-back-1[class*="ui-ux-graphics-development"] .img-wrap img, .card-back-1[class*="it-network-technician"] .img-wrap img, .card-back-2[class*="advanced-inventor"] .img-wrap img, .card-back-2[class*="advanced-autocad-3d"] .img-wrap img, .card-back-2[class*="advanced-3d"] .img-wrap img, .card-back-2[class*="advanced-html5-css"] .img-wrap img, .card-back-2[class*="bachelor-degree-incomplete"] .img-wrap img, .card-back-2[class*="matric"] .img-wrap img { opacity: 1; } /* =============================================== Shared Parallax Divider Styles =============================================== */ .parallax-devider-1 { background-image: url('../assets/devider/devider-2.webp'); } /* =============================================== Contact =============================================== */ /*---------------------------------------------*/ button { outline: none !important; border: none; background: transparent; } button:hover { cursor: pointer; } iframe { border: none !important; } /*////////////////////////////////////////////////////////////////// [ Contact ]*/ .container-contact100 { width: 100%; min-height: 100vh; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; padding: 15px; background: transparent; position: relative; z-index: 1; } .wrap-contact100 { width: 1170px; background: #fff; border-radius: 10px; padding: 82px 180px 33px 180px; position: relative; display: none; } /*================================================================== [ Form ]*/ .contact100-form { width: 100%; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; flex-wrap: wrap; justify-content: space-between; padding-bottom: 68px; } .contact100-form-title { display: block; width: 100%; font-family: var(--font-display); font-size: 39px; color: #333333; line-height: 1.2; text-align: left; padding-bottom: 44px; } /*------------------------------------------------------------------ [ Input ]*/ .wrap-input100 { width: 100%; position: relative; border-bottom: 2px solid #d9d9d9; padding-bottom: 13px; margin-bottom: 65px; } .rs1-wrap-input100 { width: calc((100% - 30px) / 2); } .label-input100 { font-family: var(--font-body); font-size: 15px; color: #999999; line-height: 1.5; padding-left: 5px; } .input100 { display: block; width: 100%; background: transparent; font-family: var(--font-display); font-size: 18px; color: #555555; line-height: 1.2; padding: 0 5px; } .focus-input100 { position: absolute; display: block; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; } /*---------------------------------------------*/ input.input100 { height: 40px; } textarea.input100 { min-height: 110px; padding-top: 9px; padding-bottom: 13px; } .input100:focus + .focus-input100::before { width: 100%; } /*------------------------------------------------------------------ [ Button ]*/ .container-contact100-form-btn { width: 100%; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; flex-wrap: wrap; margin-top: -25px; } .contact100-form-btn { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; justify-content: center; align-items: center; padding: 0 20px; min-width: 160px; height: 50px; background-color: #ff8c00; border-radius: 25px; font-family: var(--font-body); font-weight: 600; font-size: 16px; color: #fff; line-height: 1.2; -webkit-transition: all 0.4s; -o-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; box-shadow: 0 10px 30px 0px rgba(255, 75, 90, 0.5); -moz-box-shadow: 0 10px 30px 0px rgba(255, 75, 90, 0.5); -webkit-box-shadow: 0 10px 30px 0px rgba(255, 75, 90, 0.5); -o-box-shadow: 0 10px 30px 0px rgba(255, 75, 90, 0.5); -ms-box-shadow: 0 10px 30px 0px rgba(255, 75, 90, 0.5); } .contact100-form-btn i { -webkit-transition: all 0.4s; -o-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; } .contact100-form-btn:hover { background-color: #333333; box-shadow: 0 10px 30px 0px rgba(51, 51, 51, 0.5); -moz-box-shadow: 0 10px 30px 0px rgba(51, 51, 51, 0.5); -webkit-box-shadow: 0 10px 30px 0px rgba(51, 51, 51, 0.5); -o-box-shadow: 0 10px 30px 0px rgba(51, 51, 51, 0.5); -ms-box-shadow: 0 10px 30px 0px rgba(51, 51, 51, 0.5); } .contact100-form-btn:hover i { -webkit-transform: translateX(10px); -moz-transform: translateX(10px); -ms-transform: translateX(10px); -o-transform: translateX(10px); transform: translateX(10px); } /*------------------------------------------------------------------ [ Responsive ]*/ @media (max-width: 992px) { .wrap-contact100 { padding: 82px 80px 33px 80px; } } @media (max-width: 768px) { .rs1-wrap-input100 { width: 100%; } } @media (max-width: 576px) { .wrap-contact100 { padding: 82px 15px 33px 15px; } } /*------------------------------------------------------------------ [ Alert validate ]*/ .validate-input { position: relative; } .alert-validate::before { content: attr(data-validate); position: absolute; max-width: 70%; background-color: #fff; border: 1px solid #c80000; border-radius: 2px; padding: 4px 25px 4px 10px; top: 58%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); right: 2px; pointer-events: none; font-family: var(--font-body); font-weight: 600; color: #c80000; font-size: 13px; line-height: 1.4; text-align: left; visibility: hidden; opacity: 0; -webkit-transition: opacity 0.4s; -o-transition: opacity 0.4s; -moz-transition: opacity 0.4s; transition: opacity 0.4s; } .alert-validate::after { content: "\f06a"; font-family: FontAwesome; display: block; position: absolute; color: #c80000; font-size: 16px; top: 58%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); right: 8px; } .alert-validate:hover:before { visibility: visible; opacity: 1; } @media (max-width: 992px) { .alert-validate::before { visibility: visible; opacity: 1; } } /*================================================================== [ Contact more ]*/ .contact100-more { font-family: var(--font-body); font-size: 14px; color: #999999; line-height: 1.5; } .contact-label { color: var(--color-warm); } .contact100-more-highlight { color: var(--color-warm); } @keyframes beatbtn { 0% { background-color: rgba(255, 75, 90, 1); transform-origin: center; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 50% { background-color: rgba(255, 75, 90, 0.8); transform-origin: center; -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } } input { outline: none; border: none; } textarea { outline: none; border: none; } /* anchored to the card (absolute, not fixed) so the hover transform doesn't re-anchor it and make it jump */ .scroll-indicator { position: absolute; right: 8px; bottom: 40px; width: 40px; height: 70px; pointer-events: none; } .icon-scroll, .icon-scroll::before { position: absolute; } .icon-scroll { width: 20px; height: 35px; right: 10px; box-shadow: inset 0 0 0 1px gray; border-radius: 25px; bottom: 18px; } .icon-scroll::before { content: ''; width: 4px; height: 4px; background: gray; left: 50%; top: 8px; margin-left: -2px; border-radius: 4px; animation-duration: 1.5s; animation-iteration-count: infinite; animation-name: scroll; } @keyframes scroll { 0% { opacity: 1; } 100% { opacity: 0; transform: translateY(46px); } } .container-contact100 { width: 100%; min-height: 50vh; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; position: relative; z-index: 1; padding: 15px; background: transparent; } .contactCard{ --bs-gutter-x: 0 !important; } @media (min-width: 300px) { .contactCard { background-color: #565656; padding: 7px; text-align: center; } } @media (min-width: 991px) { .contactCard { background-color: #565656; padding: 7px; text-align: center; } } .contactBG { background-color: #1f0e01; background-repeat: no-repeat; background-position: center; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; min-height: 800px; position: relative; padding: 5rem 0 9.6rem; color: #ffffff; } .contactBG video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; } .contactBG > * { position: relative; z-index: 2; } section h2 { position: relative; padding-bottom: 1.5rem; } #Career { background-color: #ffffff; } .wrap-contact100 { width: 100%; max-width: 1163px; background: #fff; border-radius: 10px; overflow: hidden; padding: 72px 150px 25px 150px; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3); } @media (max-width: 992px) { .wrap-contact100 { padding: 72px 80px 25px 80px; } } @media (max-width: 768px) { .wrap-contact100 { padding: 50px 40px 25px 40px; } } @media (max-width: 576px) { .wrap-contact100 { padding: 50px 15px 25px 15px; } } .contact100-form { width: 100%; } .contact100-form-title { display: block; font-family: var(--font-display); font-size: 39px; color: #333333; line-height: 1.2; text-align: center; padding-bottom: 44px; } .wrap-input100 { width: 100%; position: relative; border-bottom: 2px solid #d9d9d9; padding-bottom: 13px; margin-bottom: 45px; } .label-input100 { font-family: var(--font-body); font-size: 13px; color: #666666; line-height: 1.5; padding-left: 5px; } .input100 { font-family: var(--font-body); font-size: 18px; color: #333333; line-height: 1.2; display: block; width: 100%; height: 45px; background: transparent; padding: 0 5px; } textarea.input100 { min-height: 120px; padding-top: 9px; padding-bottom: 13px; } .focus-input100 { position: absolute; display: block; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; } .contact-background { background: rgba(0, 0, 0, 0.5) !important; backdrop-filter: blur(6px) saturate(14%) !important; -webkit-backdrop-filter: blur(6px) saturate(14%) !important; /* Promote to its own compositor layer at page load so the blur is ready on first paint instead of visibly snapping in. */ transform: translateZ(0); will-change: backdrop-filter; } .focus-input100::before { content: ""; display: block; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; transition: all 0.4s; background: var(--color-accent); } .input100:focus + .focus-input100::before { width: 100%; } .container-contact100-form-btn { display: flex; flex-wrap: wrap; justify-content: center; padding-top: 13px; } .contact100-form-btn { min-width: 193px; height: 50px; border-radius: 25px; background: #565656; font-family: var(--font-body); font-size: 15px; line-height: 1.5; color: #c3b091; display: flex; justify-content: center; align-items: center; padding: 0 25px; transition: all 0.4s; border: none; outline: none !important; } .contact100-form-btn i { margin-left: 7px; transition: all 0.4s; } .contact100-form-btn:hover { background: #3a3a3a; color: #9a876b; transform: translateY(-3px); box-shadow: 0 10px 30px rgba(86, 86, 86, 0.4); } .contact100-form-btn:hover i { transform: translateX(10px); } .contact100-more { font-family: var(--font-body); font-size: 15px; color: #999999; line-height: 1.6; text-align: center; display: block; width: 100%; padding-top: 27px; } .contact100-more-highlight { color: var(--color-accent); font-weight: 600; } .rs1-wrap-input100 { width: calc((100% - 30px) / 2); } @media (max-width: 576px) { .rs1-wrap-input100 { width: 100%; } } .orange { color: var(--color-accent); text-decoration: none; transition: all 0.3s ease; } /* Contact card sits on a light glass background — darker khaki for WCAG AA contrast */ .contact-v2-details .orange { color: #8a744f; } .orange:hover { color: var(--color-warm); text-decoration: underline; } .validate-input { position: relative; } .alert-validate::before { content: attr(data-validate); position: absolute; max-width: 70%; background-color: #fff; border: 1px solid #c80000; border-radius: 2px; padding: 4px 25px 4px 10px; top: 50%; transform: translateY(-50%); right: 0; pointer-events: none; font-family: var(--font-body); color: #c80000; font-size: 13px; line-height: 1.4; text-align: left; visibility: hidden; opacity: 0; transition: opacity 0.4s; } .alert-validate::after { content: "\f06a"; font-family: "Font Awesome 5 Free"; font-weight: 900; display: block; position: absolute; color: #c80000; font-size: 16px; top: 50%; transform: translateY(-50%); right: 5px; } .alert-validate:hover:before { visibility: visible; opacity: 1; } @media (max-width: 992px) { .alert-validate::before { visibility: visible; opacity: 1; } } /* Scroll-reveal: fade + rise on enter, toggled by IntersectionObserver in script.js */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity 600ms ease, transform 600ms ease; } .reveal.is-visible { opacity: 1; transform: translateY(0); } /* Stagger delays for grouped reveals (capability rows, case-study pairs) */ .reveal-d1 { transition-delay: 120ms; } .reveal-d2 { transition-delay: 240ms; } .reveal-d3 { transition-delay: 360ms; } /* Skills bars animate width from 0 to data-width once revealed (set via script.js) */ .progress-bar { transition: width 900ms ease; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .reveal-d1, .reveal-d2, .reveal-d3 { transition-delay: 0ms; } .progress-bar { transition: none; } } /* =============================================== Barloworld Motor Retail.html Specific Styles =============================================== */ /* ----- Barloworld case study: scoped design system ----- */ .bw-case { --bw-blue: var(--color-blue); --bw-blue-deep: #134a73; --bw-navy: var(--color-black); --bw-surface: #ffffff; --bw-text: var(--color-black); --bw-text-dim: var(--color-grey); --bw-display: 'Lexend', sans-serif; --bw-body: 'Source Sans 3', sans-serif; font-family: var(--bw-body); } /* Top bar */ .bw-topbar { position: sticky; top: 0; z-index: 50; display: flex; justify-content: space-between; align-items: center; background-color: var(--bw-blue); padding: 0.85rem 1.5rem; } .bw-topbar a { color: var(--color-white); font-family: var(--bw-body); font-weight: 600; font-size: 0.9rem; text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem; transition: opacity 0.2s ease; } .bw-topbar a:hover { opacity: 0.8; } /* Hero */ .bw-hero { position: relative; height: 100vh; overflow: hidden; display: flex; align-items: flex-end; } .bwBG-Layer { background-image: url('../assets/Barloworld/BarlowWorldBackground.webp'); background-size: cover; background-position: center; } .bw-hero-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 16, 26, 0.15) 0%, rgba(10, 16, 26, 0.65) 55%, rgba(10, 16, 26, 0.95) 100%); z-index: 1; } .bw-hero-content { position: relative; z-index: 2; padding: 0 8% 4rem; color: var(--color-white); max-width: 640px; } @media (max-width: 768px) { .bw-hero-content { padding: 0 6% 3rem; } } /* Section rhythm */ /* Screenshot showcase: auto-scrolling marquee, one CMS, many dealership brands */ .bw-flow-viewport { overflow: hidden; margin-top: 2rem; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%); } .bw-flow-track { display: flex; align-items: flex-start; gap: 1.5rem; width: max-content; padding: 0.5rem 1.5rem 1rem; animation: bw-flow-scroll 75s linear infinite; } .bw-flow-track:hover { animation-play-state: paused; } @keyframes bw-flow-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .bw-flow-track { animation: none; } .bw-flow-viewport { overflow-x: auto; } } .bw-flow-item { flex: 0 0 auto; width: 360px; text-align: center; } .bw-flow-item img { display: block; width: 100%; border-radius: 0.6rem; box-shadow: 0 12px 28px rgba(29, 42, 68, 0.18); margin-bottom: 0.75rem; transition: transform 0.25s ease, box-shadow 0.25s ease; } .bw-flow-item:hover img { transform: translateY(-4px); box-shadow: 0 18px 36px rgba(29, 42, 68, 0.24); } .bw-flow-item .bw-flow-step { font-family: var(--bw-display); font-weight: 700; color: var(--bw-blue); font-size: 0.85rem; margin-bottom: 0.2rem; display: block; } .bw-flow-item p { font-size: 0.85rem; color: var(--bw-text-dim); margin: 0; } /* Outcome: dark bookend band */ .bw-outcome { text-align: center; padding: 6rem 0; } .bw-outcome h2 { color: var(--color-white); } .bw-outcome p { max-width: 560px; margin: 0 auto 2rem; color: rgba(249, 251, 251, 0.8); font-size: 1.05rem; } /* =============================================== Barloworld — themed section backgrounds (AI pattern tiles). Research Synthesis + Product Showcase sit on the teal "4flow" pattern; Outcome on the near-black pattern. Tiles repeat like the site's body background. Text is lightened to stay legible. =============================================== */ .bw-showcase .bw-flow-item .bw-flow-step { color: var(--color-white); } #BarloSynth h2, .bw-showcase h2 { color: var(--color-white); } #BarloSynth > .container-sm > p, .bw-showcase > .container-sm > p, .bw-showcase .bw-flow-item p { color: rgba(249, 251, 251, 0.9); } /* =============================================== Refinement pass — index.html micro-interactions Hero entrance, skills stagger, button + card feedback. Subtle by design; fully disabled under reduced-motion. =============================================== */ /* Hero eyebrow: a single, gentle fade-and-rise on first paint so the landing label feels intentional rather than just appearing. */ @keyframes heroEyebrowIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } .hero-eyebrow { animation: heroEyebrowIn 900ms cubic-bezier(0.22, 1, 0.36, 1) 200ms both; } /* Skills: nudge the two columns of each row in with a slight offset so the matrix reads as flowing in, not snapping in as one block. */ #skills-list .progress-container.reveal:nth-child(even) { transition-delay: 120ms; } /* Buttons: a soft lift + shadow on hover for consistent tactile feedback. */ .btn-accent, .btn-outline-accent { transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease; } .btn-accent:hover, .btn-outline-accent:hover { transform: translateY(-2px); box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.35); } /* Case-study cards: a slow, subtle image zoom on hover to invite the click while the card itself lifts (existing behaviour). */ .studyCard .imgBox img { transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); } .studyCard:hover .imgBox img { transform: scale(1.05); } @media (prefers-reduced-motion: reduce) { .hero-eyebrow { animation: none; } #skills-list .progress-container.reveal:nth-child(even) { transition-delay: 0ms; } .btn-accent:hover, .btn-outline-accent:hover { transform: none; box-shadow: none; } .studyCard .imgBox img, .studyCard:hover .imgBox img { transition: none; transform: none; } } /* =============================================== Lms Barlo.html — LMS (Lead Management System) case study Scoped design system, modelled on the other case studies. Palette drawn from the product UI: slate navy, lead-orange, success teal. =============================================== */ .lms-case { --lms-display: 'Space Grotesk', sans-serif; --lms-body: 'Inter', -apple-system, sans-serif; } /* Back to portfolio */ .lms-topbar { position: sticky; top: 0; z-index: 50; display: flex; justify-content: space-between; align-items: center; background-color: var(--color-blue); padding: 0.85rem 1.5rem; } .lms-topbar a { color: var(--color-white); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem; transition: opacity 0.2s ease; } .lms-topbar a:hover { opacity: 0.8; } /* Hero — layered parallax images (Agricol-style: BG / foreground strip / element) */ .lms-hero { position: relative; height: 100vh; overflow: hidden; display: flex; align-items: flex-end; } .lmsBG-Layer { background-image: url('../assets/lms/LmsBackground.webp'); background-size: cover; background-position: center; } .lmsFrnt-Layer { background-image: url('../assets/lms/LmsFrnt.webp'); background-size: cover; background-position: bottom center; } .lmsElement-Layer { background-image: url('../assets/lms/LmsElement.webp'); background-size: cover; background-position: center; filter: drop-shadow(0 25px 35px rgba(0, 0, 0, 0.4)); } .lms-hero-content { position: relative; z-index: 2; padding: 0 8% 4.5rem; color: var(--color-white); max-width: 680px; } .lms-eyebrow { display: inline-block; font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase; color: var(--color-blue); margin-bottom: 1rem; } .lms-hero-content h1 { color: var(--color-white); } .lms-hero-tagline { font-weight: 400; line-height: 1.55; color: var(--color-white); } .lms-meta-row { display: flex; flex-wrap: wrap; gap: 1.75rem; margin-top: 2.5rem; } .lms-meta-chip { border-left: 3px solid var(--color-blue); padding-left: 0.75rem; } .lms-meta-chip .lms-label { display: block; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(249, 251, 251, 0.65); } .lms-meta-chip .lms-value { font-weight: 700; } @media (max-width: 768px) { .lms-hero-content { padding: 0 6% 3rem; } } /* Section rhythm */ .lms-section { padding: 6rem 0; } .lms-section-tight { padding: 3rem 0; } .lms-surface-section { background-color: #eaeef2; } /* Mapping the Flow + Going Deeper sit on the dark africa-ai-dark.webp pattern. The id selectors override the .lms-surface-section class on those sections. */ #LmsFlow .lms-kicker, #LmsRsrch .lms-kicker { color: var(--color-blue); } .lms-kicker { display: block; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #123f5c; margin-bottom: 0.75rem; } /* Mapping the Flow — wide workflow diagrams in framed cards */ .lms-flow-frame { background: #ffffff; border: 1px solid rgba(31, 42, 56, 0.08); border-radius: 1rem; padding: 1rem; box-shadow: 0 12px 28px rgba(31, 42, 56, 0.1); margin-top: 1.5rem; } .lms-flow-frame img { width: 100%; display: block; border-radius: 0.5rem; cursor: zoom-in; } .lms-flow-frame figcaption { margin-top: 0.85rem; font-family: var(--lms-display); font-weight: 600; text-align: center; } /* Note: .lms-disclosure is unused — Lms Barlo.html's live accordion uses the .rs-* pattern inside #LmsRsrch instead. Removed as dead code. */ /* Product showcase — auto-scrolling marquee of 16:9 dashboard screens */ .lms-showcase { background-color: #f4f6f8; background-image: url('../assets/site-assets/africa-ai.webp'); background-repeat: repeat; } .lms-flow-viewport { overflow: hidden; margin-top: 2rem; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%); } .lms-flow-track { display: flex; align-items: flex-start; gap: 1.5rem; width: max-content; padding: 0.5rem 1.5rem 1rem; animation: lms-flow-scroll 80s linear infinite; } .lms-flow-track:hover { animation-play-state: paused; } @keyframes lms-flow-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } .lms-flow-item { flex: 0 0 auto; width: 440px; text-align: center; } .lms-flow-item img { display: block; width: 100%; border-radius: 0.6rem; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35); margin-bottom: 0.75rem; transition: transform 0.25s ease, box-shadow 0.25s ease; } .lms-flow-item:hover img { transform: translateY(-4px); box-shadow: 0 18px 36px rgba(0, 0, 0, 0.45); } .lms-flow-item .lms-flow-step { font-family: var(--lms-display); font-weight: 700; color: #123f5c; font-size: 0.85rem; margin-bottom: 0.2rem; display: block; } /* Showcase sits on the light africa-ai.webp pattern — dark, legible text */ .lms-showcase .lms-kicker { color: #123f5c; } @media (prefers-reduced-motion: reduce) { .lms-flow-track { animation: none; } .lms-flow-viewport { overflow-x: auto; } } /* Outcome — dark bookend band */ .lms-outcome { text-align: center; padding: 6rem 0; } .lms-outcome .lms-kicker { color: var(--color-blue); } .lms-outcome p { max-width: 560px; margin: 0 auto 2rem; } /* ── Shared: outcome button group ─────────────────────────────────── */ .cs-btn-group { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; align-items: center; } /* Solid pill button used in outcome sections across all case studies */ .cs-btn-next { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 700; padding: 0.85rem 2rem; border-radius: 50px; text-decoration: none; border: none; background: rgba(249, 251, 251, 0.15); color: var(--color-white); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); box-shadow: 0 0 0 1.5px rgba(249, 251, 251, 0.35) inset; transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } .cs-btn-next:hover { background: rgba(249, 251, 251, 0.25); box-shadow: 0 0 0 1.5px rgba(249, 251, 251, 0.55) inset; color: var(--color-white); transform: translateY(-2px); } /* Topbar next link — right side */ .cs-topbar-next { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; font-weight: 600; opacity: 0.75; transition: opacity 0.2s ease; } .cs-topbar-next:hover { opacity: 1; } /* ===== Extracted from 4flow.html (inline style block 1) ===== */ #FourFlowRsrch { --line: rgba(40,40,40,0.10); --tint: rgba(26,94,136,0.06); --mono: 'JetBrains Mono','Consolas',monospace; } #FourFlowRsrch .rs-block { border-top: 1px solid var(--line); padding: 2.5rem 0 1.5rem; margin-top: 2.5rem; } #FourFlowRsrch .rs-eyebrow { display: block; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-blue); margin-bottom: 1.5rem; } #FourFlowRsrch .rs-goals { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; } #FourFlowRsrch .rs-row { border-bottom: 1px solid var(--line); } #FourFlowRsrch .rs-assumption { width: 100%; text-align: left; background: none; border: none; padding: 1rem 0; color: var(--color-black); font-size: 0.95rem; font-family: inherit; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 44px; } #FourFlowRsrch .rs-assumption::after { content: '+'; flex-shrink: 0; font-size: 1.3rem; color: var(--color-blue); transition: transform 0.2s; } #FourFlowRsrch .rs-row.open .rs-assumption::after { transform: rotate(45deg); } #FourFlowRsrch .rs-finding { display: none; padding: 0 0 1.25rem; } #FourFlowRsrch .rs-row.open .rs-finding { display: block; } #FourFlowRsrch .rs-verdict { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; border-radius: 2rem; padding: 0.2rem 0.75rem; margin-bottom: 0.6rem; } #FourFlowRsrch .rs-verdict.confirmed { background: rgba(249,251,251,0.85); color: var(--color-blue); } #FourFlowRsrch .rs-verdict.refined { background: rgba(255,160,40,0.12); color: #c47a00; } #FourFlowRsrch .rs-finding p { font-size: 0.9rem; color: rgba(249,251,251,0.88); margin: 0; } #FourFlowRsrch .rs-controls { display: flex; align-items: center; gap: 1rem; padding-top: 1rem; } #FourFlowRsrch .rs-toggle { background: none; border: 1px solid var(--color-blue); color: var(--color-blue); font-size: 0.8rem; font-family: inherit; padding: 0.4rem 0.9rem; border-radius: 2rem; cursor: pointer; transition: background 0.2s; } #FourFlowRsrch .rs-toggle:hover { background: var(--tint); } #FourFlowRsrch .rs-counter { font-size: 0.8rem; color: var(--color-blue); font-family: var(--mono); } #FourFlowRsrch .rs-tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--line); margin-bottom: 1.25rem; } #FourFlowRsrch .rs-tab { background: none; border: none; border-bottom: 2px solid transparent; padding: 0.6rem 1rem; font-size: 0.85rem; font-family: inherit; color: var(--color-grey); cursor: pointer; margin-bottom: -1px; transition: color 0.2s, border-color 0.2s; } #FourFlowRsrch .rs-tab.active { color: var(--color-blue); border-bottom-color: var(--color-blue); } #FourFlowRsrch .rs-panel { display: none; } #FourFlowRsrch .rs-panel.active { display: block; } #FourFlowRsrch .rs-method-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.75rem; } #FourFlowRsrch .rs-method-list li { font-size: 0.9rem; color: var(--color-grey); padding-left: 1.1rem; position: relative; } #FourFlowRsrch .rs-method-list li::before { content: '–'; position: absolute; left: 0; color: var(--color-blue); } #FourFlowRsrch .rs-method-label { font-weight: 700; color: var(--color-black); } #FourFlowRsrch .rs-principle { margin-top: 2.5rem; background: var(--color-black); background-image: radial-gradient(ellipse at 70% 50%, rgba(26,94,136,0.18) 0%, transparent 65%); border-radius: 1rem; padding: 2.5rem 2rem; text-align: center; } #FourFlowRsrch .rs-principle .rs-eyebrow { color: rgba(249,251,251,0.35); margin-bottom: 1rem; } #FourFlowRsrch .rs-principle blockquote { font-weight: 700; color: var(--color-white); line-height: 1.4; margin: 0 0 0.75rem; font-style: normal; } #FourFlowRsrch .rs-principle p { font-size: 0.9rem; color: rgba(249,251,251,0.55); margin: 0; } /* ===== Extracted from 4share.html (inline style block 1) ===== */ /* ============================================= 4Share Design System – prefix: fs- Palette: ocean blue / teal ============================================= */ .fshare-case { --fs-display: 'Outfit', sans-serif; --fs-body: 'IBM Plex Sans', sans-serif; } /* ── Top bar ── */ .fs-topbar { position: sticky; top: 0; z-index: 50; background-color: var(--color-blue); padding: 0.85rem 1.5rem; display: flex; justify-content: space-between; align-items: center; } .fs-topbar a { color: var(--color-white); text-decoration: none; font-weight: 600; letter-spacing: 0.02em; display: inline-flex; align-items: center; gap: 0.5rem; opacity: 0.9; transition: opacity 0.2s ease; } .fs-topbar a:hover { opacity: 1; } /* ── Hero parallax layers ── */ .FshareBG { background-image: url('../assets/4share/FourShare.webp'); } .Fshare-Layer { background-image: url('../assets/4share/FourShare_laptop.webp'); background-size: contain; background-repeat: no-repeat; background-position: right center; z-index: 2; } /* ── Hero ── */ .fs-hero { position: relative; height: 100vh; overflow: hidden; display: flex; align-items: center; } .fs-hero::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(100deg, rgba(1, 38, 56, 0.62) 0%, rgba(2, 78, 115, 0.2) 50%, rgba(2, 78, 115, 0.0) 100%); } .fs-hero-content { position: relative; z-index: 2; padding: 0 8%; color: var(--color-white); max-width: 620px; } .fs-eyebrow { display: inline-block; font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase; color: var(--color-blue); margin-bottom: 1rem; } .fs-hero-content h1 { color: var(--color-white); } .fs-hero-tagline { font-weight: 400; line-height: 1.55; color: var(--color-white); } .fs-meta-row { display: flex; flex-wrap: wrap; gap: 1.75rem; margin-top: 2.5rem; } .fs-meta-chip { border-left: 3px solid var(--color-blue); padding-left: 0.75rem; } .fs-meta-chip .fs-label { display: block; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(249,251,251,0.65); } .fs-meta-chip .fs-value { font-weight: 700; } /* ── Sections ── */ .fs-section { padding: 5rem 0; } .fs-section-tight { padding-top: 2rem; } .fs-kicker { display: block; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-blue); margin-bottom: 0.6rem; } /* Note: .fs-disclosure and .fs-showcase are unused — 4share.html's live accordion uses #FourShareRsrch's .rs-* pattern instead, and the product showcase section uses plain .fs-section, not .fs-showcase. Removed as dead code. */ /* ── Research Synthesis band ── */ .fs-synth-section .fs-kicker { color: var(--color-blue); } .fs-flow-viewport { overflow: hidden; width: 100%; margin-top: 2.5rem; -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%); mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%); } .fs-flow-track { display: flex; gap: 1.5rem; width: max-content; animation: fs-scroll 32s linear infinite; } .fs-flow-track:hover { animation-play-state: paused; } @media (prefers-reduced-motion: reduce) { .fs-flow-track { animation: none; } } @keyframes fs-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .fs-flow-item { width: 280px; flex-shrink: 0; text-align: center; } .fs-flow-item img { width: 100%; border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,0.35); transition: transform 0.3s ease, box-shadow 0.3s ease; display: block; cursor: zoom-in; } .fs-flow-item:hover img { transform: translateY(-6px) scale(1.02); box-shadow: 0 20px 50px rgba(0,0,0,0.45); } .fs-flow-step { display: block; margin-top: 0.85rem; font-family: var(--fs-display); font-weight: 700; color: var(--color-blue); letter-spacing: 0.04em; } /* ── Outcome band ── */ .fs-outcome { padding: 5.5rem 0; text-align: center; border-top: 1px solid rgba(61,61,143,0.12); } .fs-outcome .fs-kicker { color: var(--color-blue); } .fs-outcome p { max-width: 600px; margin: 0 auto 2rem; } /* ===== Extracted from 4share.html (inline style block 2) ===== */ #FourShareRsrch { --line: rgba(40,40,40,0.10); --tint: rgba(26,94,136,0.06); --mono: 'JetBrains Mono','Consolas',monospace; color: var(--color-black); } #FourShareRsrch .rs-block { border-top: 1px solid var(--line); padding: 2.5rem 0 1.5rem; margin-top: 2.5rem; } #FourShareRsrch .rs-eyebrow { display: block; font-family: var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-blue); margin-bottom: 1.5rem; } #FourShareRsrch .rs-goals { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; } #FourShareRsrch .rs-row { border-bottom: 1px solid var(--line); } #FourShareRsrch .rs-assumption { width: 100%; text-align: left; background: none; border: none; padding: 1rem 0; font-family: inherit; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 44px; } #FourShareRsrch .rs-assumption::after { content: '+'; flex-shrink: 0; color: var(--color-blue); transition: transform 0.2s; } #FourShareRsrch .rs-row.open .rs-assumption::after { transform: rotate(45deg); } #FourShareRsrch .rs-finding { display: none;} #FourShareRsrch .rs-row.open .rs-finding { display: block; } #FourShareRsrch .rs-verdict { display: inline-block; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; border-radius: 2rem; padding: 0.2rem 0.75rem; margin-bottom: 0.6rem; } #FourShareRsrch .rs-verdict.confirmed { background: rgba(249,251,251,0.8); color: var(--color-blue); } #FourShareRsrch .rs-verdict.refined { background: rgba(255,195,80,0.15); color: #b8860b; } #FourShareRsrch .rs-finding p { margin: 0; } #FourShareRsrch .rs-controls { display: flex; align-items: center; gap: 1rem; padding-top: 1rem; } #FourShareRsrch .rs-toggle { background: none; border: 1px solid var(--color-blue); color: var(--color-blue); font-family: inherit; padding: 0.4rem 0.9rem; border-radius: 2rem; cursor: pointer; transition: background 0.2s; } #FourShareRsrch .rs-toggle:hover { background: var(--tint); } #FourShareRsrch .rs-counter { font-family: var(--mono); } #FourShareRsrch .rs-tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--line); margin-bottom: 1.25rem; } #FourShareRsrch .rs-tab { background: none; border: none; border-bottom: 2px solid transparent; padding: 0.6rem 1rem; font-family: inherit; cursor: pointer; margin-bottom: -1px; transition: color 0.2s, border-color 0.2s; } #FourShareRsrch .rs-tab.active { color: var(--color-blue); border-bottom-color: var(--color-blue); } #FourShareRsrch .rs-panel { display: none; } #FourShareRsrch .rs-panel.active { display: block; } #FourShareRsrch .rs-method-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.75rem; } #FourShareRsrch .rs-method-list li { padding-left: 1.1rem; position: relative; } #FourShareRsrch .rs-method-list li::before { content: '–'; position: absolute; left: 0; color: var(--color-blue); } #FourShareRsrch .rs-method-label { font-weight: 700; } #FourShareRsrch .rs-principle { margin-top: 2.5rem; background: var(--color-black); background-image: radial-gradient(ellipse at 70% 50%, rgba(3,105,153,0.20) 0%, transparent 65%); border-radius: 1rem; padding: 2.5rem 2rem; text-align: center; } #FourShareRsrch .rs-principle .rs-eyebrow { color: rgba(249,251,251,0.35); margin-bottom: 1rem; } #FourShareRsrch .rs-principle blockquote { font-weight: 700; color: var(--color-white); line-height: 1.4; margin: 0 0 0.75rem; font-style: normal; } #FourShareRsrch .rs-principle p { color: rgba(249,251,251,0.50); margin: 0; } /* ===== Extracted from Agricol.html (inline style block 1) ===== */ /* ── AgriRsrch scoped tokens ── */ #AgriRsrch { --line: rgba(249,251,251,0.10); --tint: rgba(226,36,27,0.10); --mono: 'Courier New', Courier, monospace; color: var(--color-white); } #AgriRsrch .rs-block { border-top: 1px solid var(--line); padding: 2.5rem 0 1.5rem; margin-top: 2.5rem; } #AgriRsrch .rs-eyebrow { display: block; font-family: var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-red); margin-bottom: 1.5rem; } #AgriRsrch .rs-goals { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; } #AgriRsrch .rs-row { border-bottom: 1px solid var(--line); } #AgriRsrch .rs-assumption { width: 100%; text-align: left; background: none; border: none; padding: 1rem 0; font-family: inherit; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 44px; } #AgriRsrch .rs-assumption::after { content: '+'; flex-shrink: 0; color: var(--color-red); transition: transform 0.2s; } #AgriRsrch .rs-row.open .rs-assumption::after { transform: rotate(45deg); } #AgriRsrch .rs-finding { display: none; padding: 0 0 1.25rem; } #AgriRsrch .rs-row.open .rs-finding { display: block; } #AgriRsrch .rs-verdict { display: inline-block; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; border-radius: 2rem; padding: 0.2rem 0.75rem; margin-bottom: 0.6rem; } #AgriRsrch .rs-verdict.confirmed { background: rgba(111,175,46,0.20); color: #6faf2e; } #AgriRsrch .rs-verdict.refined { background: rgba(226,36,27,0.18); color: #e2241b; } #AgriRsrch .rs-controls { display: flex; align-items: center; gap: 1rem; padding-top: 1rem; } #AgriRsrch .rs-toggle { background: none; border: 1px solid var(--color-red); color: var(--color-red); font-family: inherit; padding: 0.4rem 0.9rem; border-radius: 2rem; cursor: pointer; transition: background 0.2s; } #AgriRsrch .rs-toggle:hover { background: var(--tint); } #AgriRsrch .rs-counter { color: var(--color-red); font-family: var(--mono); } #AgriRsrch .rs-tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--line); margin-bottom: 1.25rem; } #AgriRsrch .rs-tab { background: none; border: none; border-bottom: 2px solid transparent; padding: 0.6rem 1rem; font-family: inherit; opacity: 0.6; cursor: pointer; margin-bottom: -1px; transition: opacity 0.2s, border-color 0.2s; } #AgriRsrch .rs-tab.active { opacity: 1; color: var(--color-red); border-bottom-color: var(--color-red); } #AgriRsrch .rs-panel { display: none; } #AgriRsrch .rs-panel.active { display: block; } #AgriRsrch .rs-method-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.75rem; } #AgriRsrch .rs-method-list li { padding-left: 1.1rem; position: relative; } #AgriRsrch .rs-method-list li::before { content: '–'; position: absolute; left: 0; color: var(--color-red); } #AgriRsrch .rs-method-label { font-weight: 700; } #AgriRsrch .rs-principle { margin-top: 2.5rem; background: var(--color-black); background-image: radial-gradient(ellipse at 70% 50%, rgba(226,36,27,0.12) 0%, transparent 65%); border-radius: 1rem; padding: 2.5rem 2rem; text-align: center; } #AgriRsrch .rs-principle .rs-eyebrow { color: rgba(249,251,251,0.35); margin-bottom: 1rem; } #AgriRsrch .rs-principle blockquote { font-weight: 700; color: var(--color-white); line-height: 1.4; margin: 0 0 0.75rem; font-style: normal; } #AgriRsrch .rs-principle p { color: rgba(249,251,251,0.55); margin: 0; } /* ===== Extracted from Barloworld Motor Retail.html (inline style block 1) ===== */ #BarloRsrch { --line: rgba(40,40,40,0.10); --tint: rgba(26,94,136,0.06); --mono: 'JetBrains Mono','Consolas',monospace; color: var(--color-black); } #BarloRsrch .rs-block { border-top: 1px solid var(--line); padding: 2.5rem 0 1.5rem; margin-top: 2.5rem; } #BarloRsrch .rs-eyebrow { display: block; font-family: var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-blue); margin-bottom: 1.5rem; } #BarloRsrch .rs-goals { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; } #BarloRsrch .rs-row { border-bottom: 1px solid var(--line); } #BarloRsrch .rs-assumption { width: 100%; text-align: left; background: none; border: none; padding: 1rem 0; font-family: inherit; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 44px; } #BarloRsrch .rs-assumption::after { content: '+'; flex-shrink: 0; color: var(--color-blue); transition: transform 0.2s; } #BarloRsrch .rs-row.open .rs-assumption::after { transform: rotate(45deg); } #BarloRsrch .rs-finding { display: none; padding: 0 0 1.25rem; } #BarloRsrch .rs-row.open .rs-finding { display: block; } #BarloRsrch .rs-verdict { display: inline-block; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; border-radius: 2rem; padding: 0.2rem 0.75rem; margin-bottom: 0.6rem; } #BarloRsrch .rs-verdict.confirmed { background: rgba(249,251,251,0.85); color: var(--color-blue); } #BarloRsrch .rs-verdict.refined { background: rgba(255,160,40,0.12); color: #c47a00; } #BarloRsrch .rs-controls { display: flex; align-items: center; gap: 1rem; padding-top: 1rem; } #BarloRsrch .rs-toggle { background: none; border: 1px solid var(--color-blue); color: var(--color-blue); font-family: inherit; padding: 0.4rem 0.9rem; border-radius: 2rem; cursor: pointer; transition: background 0.2s; } #BarloRsrch .rs-toggle:hover { background: var(--tint); } #BarloRsrch .rs-counter { color: var(--color-blue); font-family: var(--mono); } #BarloRsrch .rs-tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--line); margin-bottom: 1.25rem; } #BarloRsrch .rs-tab { background: none; border: none; border-bottom: 2px solid transparent; padding: 0.6rem 1rem; font-family: inherit; opacity: 0.6; cursor: pointer; margin-bottom: -1px; transition: opacity 0.2s, border-color 0.2s; } #BarloRsrch .rs-tab.active { opacity: 1; color: var(--color-blue); border-bottom-color: var(--color-blue); } #BarloRsrch .rs-panel { display: none; } #BarloRsrch .rs-panel.active { display: block; } #BarloRsrch .rs-method-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.75rem; } #BarloRsrch .rs-method-list li { padding-left: 1.1rem; position: relative; } #BarloRsrch .rs-method-list li::before { content: '–'; position: absolute; left: 0; color: var(--color-blue); } #BarloRsrch .rs-method-label { font-weight: 700; } #BarloRsrch .rs-principle { margin-top: 2.5rem; background: var(--color-black); background-image: radial-gradient(ellipse at 70% 50%, rgba(31,111,178,0.18) 0%, transparent 65%); border-radius: 1rem; padding: 2.5rem 2rem; text-align: center; } #BarloRsrch .rs-principle .rs-eyebrow { color: rgba(249,251,251,0.35); margin-bottom: 1rem; } #BarloRsrch .rs-principle blockquote { font-weight: 700; color: var(--color-white); line-height: 1.4; margin: 0 0 0.75rem; font-style: normal; } #BarloRsrch .rs-principle p { color: rgba(249,251,251,0.55); margin: 0; } /* ===== Extracted from Lms Barlo.html (inline style block 1) ===== */ #LmsRsrch { --line: rgba(249,251,251,0.15); --accent: var(--color-blue); --tint: rgba(26,94,136,0.12); --mono: 'JetBrains Mono','Consolas',monospace; color: var(--color-white); } #LmsRsrch .rs-block { border-top: 1px solid var(--line); padding: 2.5rem 0 1.5rem; margin-top: 2.5rem; } #LmsRsrch .rs-eyebrow { display: block; font-family: var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin-bottom: 1.5rem; } #LmsRsrch .rs-goals { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; } #LmsRsrch .rs-row { border-bottom: 1px solid var(--line); } #LmsRsrch .rs-assumption { width: 100%; text-align: left; background: none; border: none; padding: 1rem 0; font-family: inherit; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 44px; } #LmsRsrch .rs-assumption::after { content: '+'; flex-shrink: 0; color: var(--accent); transition: transform 0.2s; } #LmsRsrch .rs-row.open .rs-assumption::after { transform: rotate(45deg); } #LmsRsrch .rs-finding { display: none; padding: 0 0 1.25rem; } #LmsRsrch .rs-row.open .rs-finding { display: block; } #LmsRsrch .rs-verdict { display: inline-block; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; border-radius: 2rem; padding: 0.2rem 0.75rem; margin-bottom: 0.6rem; } #LmsRsrch .rs-verdict.confirmed { background: rgba(249,251,251,0.85); color: var(--color-blue); } #LmsRsrch .rs-verdict.refined { background: rgba(255,195,80,0.15); color: #ffc34f; } #LmsRsrch .rs-finding p { margin: 0; } #LmsRsrch .rs-controls { display: flex; align-items: center; gap: 1rem; padding-top: 1rem; } #LmsRsrch .rs-toggle { background: none; border: 1px solid var(--accent); color: var(--accent); font-family: inherit; padding: 0.4rem 0.9rem; border-radius: 2rem; cursor: pointer; transition: background 0.2s; } #LmsRsrch .rs-toggle:hover { background: var(--tint); } #LmsRsrch .rs-counter { font-family: var(--mono); } #LmsRsrch .rs-tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--line); margin-bottom: 1.25rem; } #LmsRsrch .rs-tab { background: none; border: none; border-bottom: 2px solid transparent; padding: 0.6rem 1rem; font-family: inherit; cursor: pointer; margin-bottom: -1px; transition: color 0.2s, border-color 0.2s; } #LmsRsrch .rs-tab.active { color: var(--accent); border-bottom-color: var(--accent); } #LmsRsrch .rs-panel { display: none; } #LmsRsrch .rs-panel.active { display: block; } #LmsRsrch .rs-method-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.75rem; } #LmsRsrch .rs-method-list li { padding-left: 1.1rem; position: relative; } #LmsRsrch .rs-method-list li::before { content: '–'; position: absolute; left: 0; color: var(--accent); } #LmsRsrch .rs-method-label { font-weight: 700; } #LmsRsrch .rs-principle { margin-top: 2.5rem; background: var(--color-black); background-image: radial-gradient(ellipse at 70% 50%, rgba(26,94,136,0.18) 0%, transparent 65%); border-radius: 1rem; padding: 2.5rem 2rem; text-align: center; } #LmsRsrch .rs-principle .rs-eyebrow { color: rgba(249,251,251,0.30); margin-bottom: 1rem; } #LmsRsrch .rs-principle blockquote { font-weight: 700; color: var(--color-white); line-height: 1.4; margin: 0 0 0.75rem; font-style: normal; } #LmsRsrch .rs-principle p { color: rgba(249,251,251,0.50); margin: 0; } /* ===== Extracted from Sappo.html (inline style block 1) ===== */ #SappoRsrch { --line: rgba(249,251,251,0.12); --tint: rgba(184,10,92,0.08); --mono: 'JetBrains Mono','Consolas',monospace; color: var(--color-white); } #SappoRsrch .rs-block { border-top: 1px solid var(--line); padding: 2.5rem 0 1.5rem; margin-top: 2.5rem; } #SappoRsrch .rs-eyebrow { display: block; font-family: var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-pink); margin-bottom: 1.5rem; } #SappoRsrch .rs-goals { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; } #SappoRsrch .rs-row { border-bottom: 1px solid var(--line); } #SappoRsrch .rs-assumption { width: 100%; text-align: left; background: none; border: none; padding: 1rem 0; font-family: inherit; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 44px; } #SappoRsrch .rs-assumption::after { content: '+'; flex-shrink: 0; color: var(--color-pink); transition: transform 0.2s; } #SappoRsrch .rs-row.open .rs-assumption::after { transform: rotate(45deg); } #SappoRsrch .rs-finding { display: none; padding: 0 0 1.25rem; } #SappoRsrch .rs-row.open .rs-finding { display: block; } #SappoRsrch .rs-verdict { display: inline-block; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; border-radius: 2rem; padding: 0.2rem 0.75rem; margin-bottom: 0.6rem; } #SappoRsrch .rs-verdict.confirmed { background: rgba(249,251,251,0.85); color: var(--color-pink); } #SappoRsrch .rs-verdict.refined { background: rgba(255,195,80,0.15); color: #ffc34f; } #SappoRsrch .rs-controls { display: flex; align-items: center; gap: 1rem; padding-top: 1rem; } #SappoRsrch .rs-toggle { background: none; border: 1px solid var(--color-pink); color: var(--color-pink); font-family: inherit; padding: 0.4rem 0.9rem; border-radius: 2rem; cursor: pointer; transition: background 0.2s; } #SappoRsrch .rs-toggle:hover { background: var(--tint); } #SappoRsrch .rs-counter { color: var(--color-pink); font-family: var(--mono); } #SappoRsrch .rs-tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--line); margin-bottom: 1.25rem; } #SappoRsrch .rs-tab { background: none; border: none; border-bottom: 2px solid transparent; padding: 0.6rem 1rem; font-family: inherit; opacity: 0.6; cursor: pointer; margin-bottom: -1px; transition: opacity 0.2s, border-color 0.2s; } #SappoRsrch .rs-tab.active { opacity: 1; color: var(--color-pink); border-bottom-color: var(--color-pink); } #SappoRsrch .rs-panel { display: none; } #SappoRsrch .rs-panel.active { display: block; } #SappoRsrch .rs-method-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.75rem; } #SappoRsrch .rs-method-list li { padding-left: 1.1rem; position: relative; } #SappoRsrch .rs-method-list li::before { content: '–'; position: absolute; left: 0; color: var(--color-pink); } #SappoRsrch .rs-method-label { font-weight: 700; } #SappoRsrch .rs-principle { margin-top: 2.5rem; background: var(--color-black); background-image: radial-gradient(ellipse at 70% 50%, rgba(184,10,92,0.12) 0%, transparent 65%); border-radius: 1rem; padding: 2.5rem 2rem; text-align: center; } #SappoRsrch .rs-principle .rs-eyebrow { color: rgba(249,251,251,0.35); margin-bottom: 1rem; } #SappoRsrch .rs-principle blockquote { font-weight: 700; color: var(--color-white); line-height: 1.4; margin: 0 0 0.75rem; font-style: normal; } #SappoRsrch .rs-principle p { color: rgba(249,251,251,0.55); margin: 0; } /* ===== Extracted from iBar.html (inline style block 1) ===== */ #Rsrch { --line: rgba(249,251,251,0.12); --tint: rgba(249,251,251,0.08); --mono: 'JetBrains Mono','Consolas',monospace; color: var(--color-white); } #Rsrch .rs-block { border-top: 1px solid var(--line); padding: 2.5rem 0 1.5rem; margin-top: 2.5rem; } #Rsrch .rs-eyebrow { display: block; font-family: var(--mono); letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 1.5rem; } #Rsrch .rs-goals { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; } #Rsrch .rs-row { border-bottom: 1px solid var(--line); } #Rsrch .rs-assumption { width: 100%; text-align: left; background: none; border: none; padding: 1rem 0; font-family: inherit; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; transition: color 0.2s; min-height: 44px; } #Rsrch .rs-assumption::after { content: '+'; flex-shrink: 0; transition: transform 0.2s; } #Rsrch .rs-row.open .rs-assumption::after { transform: rotate(45deg); } #Rsrch .rs-finding { display: none; padding: 0 0 1.25rem; } #Rsrch .rs-row.open .rs-finding { display: block; } #Rsrch .rs-verdict { display: inline-block; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; border-radius: 2rem; padding: 0.2rem 0.75rem; margin-bottom: 0.6rem; } #Rsrch .rs-verdict.confirmed { background: rgba(249,251,251,0.85); color: var(--color-black); } #Rsrch .rs-verdict.refined { background: rgba(255,195,80,0.15); color: #ffc34f; } #Rsrch .rs-finding p { margin: 0; } #Rsrch .rs-controls { display: flex; align-items: center; gap: 1rem; padding-top: 1rem; } #Rsrch .rs-toggle { background: none; border: 1px solid rgba(249,251,251,0.6); font-family: inherit; padding: 0.4rem 0.9rem; border-radius: 2rem; cursor: pointer; transition: background 0.2s; } #Rsrch .rs-toggle:hover { background: var(--tint); } #Rsrch .rs-counter { font-family: var(--mono); } #Rsrch .rs-tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--line); margin-bottom: 1.25rem; } #Rsrch .rs-tab { background: none; border: none; border-bottom: 2px solid transparent; padding: 0.6rem 1rem; font-family: inherit; opacity: 0.6; cursor: pointer; margin-bottom: -1px; transition: opacity 0.2s, border-color 0.2s; } #Rsrch .rs-tab.active { opacity: 1; border-bottom-color: rgba(249,251,251,0.8); } #Rsrch .rs-panel { display: none; } #Rsrch .rs-panel.active { display: block; } #Rsrch .rs-method-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.75rem; } #Rsrch .rs-method-list li { padding-left: 1.1rem; position: relative; } #Rsrch .rs-method-list li::before { content:'–'; position:absolute; left:0; } #Rsrch .rs-method-label { font-weight: 700; } #Rsrch .rs-principle { margin-top: 2.5rem; background: var(--color-black); background-image: radial-gradient(ellipse at 70% 50%, rgba(232,228,220,0.07) 0%, transparent 65%); border-radius: 1rem; padding: 2.5rem 2rem; text-align: center; } #Rsrch .rs-principle .rs-eyebrow { color: rgba(249,251,251,0.35); margin-bottom: 1rem; } #Rsrch .rs-principle blockquote { font-weight: 700; line-height: 1.4; margin: 0 0 0.75rem; font-style: normal; } #Rsrch .rs-principle p { color: rgba(249,251,251,0.55); margin: 0; } /* Research video embed */ #Rsrch .rs-video h3 { margin-bottom: 1.5rem; } #Rsrch .rs-video-frame { max-width: 860px; margin: 0 auto; border-radius: 1rem; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.25); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 20px 45px rgba(0, 0, 0, 0.35); } #Rsrch .rs-video-frame iframe { border: 0; } /* ----- Honorable Mentions: scoped design system ----- */ .hm-case { --hm-bg: #ede6d8; --hm-ink: #1c1a15; --hm-ink-dim: rgba(28, 26, 21, 0.55); --hm-panel: #1c1a15; --hm-panel-ink: #ede6d8; --hm-accent: #b1562f; --hm-accent-soft: #c98a5e; --hm-display: 'Instrument Serif', serif; --hm-body: 'Sora', sans-serif; background: var(--hm-bg); color: var(--hm-ink); font-family: var(--hm-body); overflow-x: hidden; } .hm-topbar { position: sticky; top: 0; z-index: 50; background: var(--hm-panel); padding: 0.85rem 1.5rem; } .hm-topbar a { color: var(--hm-panel-ink); font-family: var(--hm-body); font-weight: 600; font-size: 0.9rem; text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem; transition: opacity 0.2s ease; } .hm-topbar a:hover { opacity: 0.75; } /* Hero */ .hm-hero { position: relative; background: var(--hm-panel) url('../assets/site-assets/The-Background.webp') center center / cover no-repeat; color: var(--hm-panel-ink); padding: 7rem 2rem 5rem; overflow: hidden; } .hm-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(28,26,21,0.75) 0%, rgba(28,26,21,0.55) 45%, rgba(28,26,21,0.88) 100%); pointer-events: none; } .hm-hero::after { content: ''; position: absolute; inset: 0; opacity: 0.05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cg fill='none' stroke='%23ede6d8' stroke-width='1'%3E%3Ccircle cx='30' cy='30' r='3'/%3E%3Cpath d='M30 33v40M20 55h20M25 45h10'/%3E%3Ccircle cx='170' cy='90' r='3'/%3E%3Cpath d='M170 93v40M158 118h24M163 108h14'/%3E%3Cpath d='M90 150l20-30 20 30'/%3E%3Ccircle cx='110' cy='115' r='2.5'/%3E%3Cpath d='M0 190h220M0 10h220' stroke-dasharray='2 6'/%3E%3C/g%3E%3C/svg%3E"); background-size: 220px 220px; pointer-events: none; } .hm-hero-content { position: relative; max-width: 760px; margin: 0 auto; } .hm-hero h1 { font-family: var(--hm-display); font-style: italic; font-weight: 500; font-size: clamp(3rem, 7.5vw, 7rem); letter-spacing: 0.01em; line-height: 1; margin: 0 0 1.5rem; color: #f4e3c9; text-shadow: 0 0 12px rgba(230, 150, 70, 0.55), 0 0 34px rgba(216, 120, 45, 0.4), 0 6px 22px rgba(0, 0, 0, 0.45); } .hm-hero p { font-size: 1.15rem; line-height: 1.6; max-width: 640px; color: rgba(238, 231, 216, 0.72); margin: 0; } .hm-hero-stats { display: flex; flex-wrap: wrap; gap: 2.25rem; margin-top: 3rem; } .hm-hero-stats .hm-stat-num { font-family: var(--hm-display); font-style: italic; font-size: 2.1rem; color: var(--hm-accent-soft); line-height: 1; } .hm-hero-stats .hm-stat-label { font-weight: 600; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(238, 231, 216, 0.5); margin-top: 0.35rem; } /* Section */ .hm-section { padding: 5.5rem 2rem; border-bottom: 1px solid rgba(28, 26, 21, 0.1); max-width: 1500px; margin: 0 auto; } .hm-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 3rem; } .hm-section-title-group { display: flex; align-items: flex-end; gap: 1.5rem; } .hm-numeral { font-family: var(--hm-display); font-style: italic; font-size: clamp(2.75rem, 6vw, 5.25rem); line-height: 1; color: var(--hm-accent); } .hm-section-head .kicker { color: var(--hm-ink-dim); margin-bottom: 0.5rem; } .hm-section-head h2 { font-family: var(--hm-display); font-style: italic; font-weight: 400; font-size: clamp(1.9rem, 4vw, 2.9rem); margin: 0; color: var(--hm-ink); } .hm-section-count { font-weight: 600; font-size: 0.8rem; color: var(--hm-ink-dim); white-space: nowrap; } /* Section background art — matches the tiled-texture convention used by .ib-light-section / .lms-showcase elsewhere on the site: a repeating pattern at natural size over a solid base colour, not a single cover photo. .hm-section is capped at max-width:1500px and centred, so the tile is painted on a full-viewport-width ::before layer behind it (the standard "break out of a centred container" trick) instead of directly on the section — otherwise the pattern stops at the 1500px column instead of running edge to edge. */ #hmGraphicDesign, #hmMotion, #hm3D { position: relative; z-index: 0; } #hmGraphicDesign::before, #hmMotion::before, #hm3D::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); z-index: -1; background-repeat: repeat; } #hmGraphicDesign::before, #hmMotion::before { background-color: var(--hm-bg); background-image: url('../assets/site-assets/africa-ai.webp'); } #hm3D::before { background-color: var(--hm-panel); background-image: url('../assets/site-assets/africa-ai-dark.webp'); } /* Masonry gallery (Graphic Design + 3D) */ .hm-masonry { column-count: 4; column-gap: 20px; } .hm-masonry-item { break-inside: avoid; margin-bottom: 20px; } .hm-masonry-frame { position: relative; overflow: hidden; border-radius: 2px; background: #e3dbc9; box-shadow: 0 1px 2px rgba(28,26,21,0.08); } .hm-masonry-frame img { width: 100%; display: block; transition: transform 0.45s cubic-bezier(.2,.8,.2,1); } .hm-masonry-item:hover .hm-masonry-frame img { transform: scale(1.035); } .hm-masonry-item:hover .hm-masonry-frame { box-shadow: 0 20px 40px rgba(28,26,21,0.18); } .hm-caption { display: flex; justify-content: space-between; align-items: baseline; padding: 0.5rem 0.15rem 0; } .hm-caption-tag { font-weight: 500; font-size: 0.82rem; color: var(--hm-ink); } .hm-caption-index { font-weight: 600; font-size: 0.7rem; color: var(--hm-accent); letter-spacing: 0.04em; } /* Motion grid */ .hm-motion-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .hm-motion-item { cursor: pointer; } .hm-motion-frame { position: relative; aspect-ratio: 16/9; overflow: hidden; border-radius: 2px; background: #0f0d0a; } .hm-motion-frame video { width: 100%; height: 100%; object-fit: cover; transition: transform 0.45s cubic-bezier(.2,.8,.2,1); } .hm-motion-item:hover .hm-motion-frame video { transform: scale(1.035); } .hm-motion-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; } .hm-motion-play span { width: 56px; height: 56px; border-radius: 50%; background: rgba(28,26,21,0.55); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; } .hm-motion-play span::before { content: ''; border-top: 9px solid transparent; border-bottom: 9px solid transparent; border-left: 14px solid #ede6d8; margin-left: 3px; } /* Video lightbox (shared by any .hm-motion-item / [data-video-lightbox]) */ .hm-video-modal { position: fixed; inset: 0; z-index: 1050; display: none; align-items: center; justify-content: center; background: rgba(28, 26, 21, 0.86); padding: 3.5rem 1.5rem; } .hm-video-modal.is-open { display: flex; } .hm-video-modal-inner { width: min(920px, 100%); background: var(--hm-panel); border-radius: 4px; overflow: hidden; } .hm-video-modal-inner video { width: 100%; display: block; aspect-ratio: 16/9; background: #0f0d0a; } .hm-video-modal-foot { padding: 1.25rem 1.5rem; display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: space-between; align-items: center; } .hm-video-modal-title { font-family: var(--hm-display); font-style: italic; font-size: 1.5rem; color: var(--hm-panel-ink); } .hm-video-modal-sub { font-weight: 500; font-size: 0.75rem; color: rgba(238,231,216,0.5); margin-top: 0.2rem; } .hm-video-modal-close { font-weight: 500; font-size: 0.8rem; color: rgba(238,231,216,0.6); cursor: pointer; background: none; border: none; padding: 0.5rem; margin: -0.5rem; min-height: 44px; min-width: 44px; } .hm-footer-bar { padding: 2.5rem 2rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.75rem; } .hm-footer-bar .hm-footer-title { font-family: var(--hm-display); font-style: italic; font-size: 1.3rem; color: var(--hm-ink-dim); } .hm-footer-bar .hm-footer-note { font-weight: 500; font-size: 0.75rem; color: var(--hm-ink-dim); opacity: 0.85; } /* cs-btn-next is styled for dark sections (translucent white pill); the footer bar here sits on the light --hm-bg, so it needs its own palette rather than inheriting the white-on-dark look. */ .hm-footer-bar .hm-footer-back { background: var(--hm-panel); color: var(--hm-panel-ink); backdrop-filter: none; -webkit-backdrop-filter: none; } .hm-footer-bar .hm-footer-back:hover { background: var(--hm-accent); color: var(--hm-panel-ink); box-shadow: none; } @media (max-width: 991px) { .hm-masonry { column-count: 2; } .hm-motion-grid { grid-template-columns: repeat(2, 1fr); } .hm-hero { padding: 6rem 1.5rem 4rem; } .hm-section { padding: 4.5rem 1.5rem; } } @media (max-width: 767px) { .hm-motion-grid { grid-template-columns: 1fr; } .hm-section-title-group { flex-wrap: wrap; } } @media (max-width: 575px) { .hm-masonry { column-count: 1; } .hm-hero { padding: 5.5rem 1.25rem 3.5rem; } .hm-hero h1 { font-size: clamp(2.25rem, 11vw, 4rem); } .hm-hero-stats { gap: 1.5rem; margin-top: 2rem; } .hm-section { padding: 3.5rem 1.25rem; } .hm-section-head { margin-bottom: 2rem; } .hm-video-modal { padding: 1.5rem 0.75rem; } .hm-video-modal-foot { padding: 1rem 1.15rem; } .hm-footer-bar { padding: 2rem 1.25rem; text-align: center; justify-content: center; } } @media (max-width: 380px) { .hm-masonry { column-gap: 14px; } .hm-masonry-item { margin-bottom: 14px; } .hm-motion-grid { gap: 14px; } } @media (prefers-reduced-motion: reduce) { .hm-masonry-frame img, .hm-motion-frame video { transition: none; } } /* =============================================== Counter Band + Capability Accordion =============================================== */ .about-counter-band { background-color: var(--color-dark); } .about-counter-band .counter-item { padding: 1.75rem 1rem; border-right: 1px solid rgba(255, 255, 255, 0.08); } .about-counter-band .counter-item:last-child { border-right: none; } .counter-value, .counter-plus { font-family: var(--font-display); font-weight: 700; font-size: 2rem; color: var(--color-light); } .counter-plus { color: var(--color-accent); } .counter-label { display: block; font-size: 0.65rem; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; /* lightened from var(--color-secondary) for WCAG AA contrast on the dark band */ color: #8fae93; margin-top: 0.25rem; } @media (max-width: 768px) { .about-counter-band .counter-item { border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.08); padding: 1.25rem 0.5rem; } .counter-value, .counter-plus { font-size: 1.5rem; } } .capability-accordion .capability-item { border-top: 1px solid rgba(26, 35, 50, 0.12); } .capability-trigger { width: 100%; display: flex; align-items: center; gap: 1.1rem; background: none; border: none; padding: 1.75rem 0; cursor: pointer; text-align: left; min-height: 44px; } .capability-trigger:hover { background: rgba(195, 176, 145, 0.06); } .cap-index { font-family: var(--font-display); font-weight: 700; color: var(--color-accent); width: 1.5rem; flex-shrink: 0; } .cap-icon { color: var(--color-secondary); font-size: 1.05rem; width: 1.4rem; text-align: center; flex-shrink: 0; } .cap-title { font-weight: 700; flex: 1; color: var(--color-primary); } .cap-chevron { color: var(--color-accent); font-size: 0.9rem; transition: transform 0.25s ease; flex-shrink: 0; } .capability-item.active .cap-chevron { transform: rotate(45deg); } .capability-body { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; } .capability-body p { font-size: 0.9rem; line-height: 1.7; color: var(--color-dark); margin: 0 0 1.75rem 2.6rem; max-width: 460px; } @media (max-width: 576px) { .capability-body p { margin-left: 0; } } /* =============================================== Skills Tag Cloud (replaces progress bars) =============================================== */ .skills-panel.hidden { display: none; } .skills-evidence { font-size: 1rem; font-weight: 500; color: var(--color-dark); margin-bottom: 1.5rem; max-width: 640px; } .skill-tags { display: flex; flex-wrap: wrap; gap: 0.75rem; } .skill-tag { display: inline-block; padding: 0.7rem 1.25rem; border-radius: 999px; border: 1.5px solid rgba(99, 107, 47, 0.3); background: #636B2F; color: #C3B09D; font-weight: 600; font-size: 0.9rem; } /* =============================================== Contact form feedback & thank-you modal =============================================== */ .cf-feedback { margin: 1rem 0 0; font-size: 0.9rem; font-weight: 600; text-align: center; min-height: 1.2em; } .cf-feedback.is-error { color: var(--color-red); } .cf-thanks-content { border: none; border-radius: 16px; } .cf-thanks-icon { font-size: 2.5rem; color: var(--color-accent); } /* =============================================== Contact v2 — redesigned contact layout (light-on-dark, mapped to site palette) =============================================== */ .contact-v2 { /* redesign tokens → site palette (dark glass card, light text) */ --cv2-ink: var(--color-white); --cv2-accent: var(--color-warm); --cv2-muted: rgba(249, 251, 251, 0.72); --cv2-line: rgba(249, 251, 251, 0.25); max-width: 960px; margin: 0 auto; display: flex; flex-direction: column; gap: 44px; text-align: left; } .contact-v2-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; border-bottom: 2px solid var(--cv2-ink); padding-bottom: 28px; } .contact-v2-title { font-family: var(--font-display); font-size: 64px; font-weight: 700; line-height: 1; margin: 0; padding-bottom: 0; color: var(--cv2-ink); } .contact-v2-title em { color: var(--cv2-accent); font-style: italic; } .contact-v2-intro { font-size: 14px; line-height: 1.7; color: var(--cv2-muted); max-width: 280px; margin: 0; text-wrap: pretty; } .contact-v2-form { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 48px; } .contact-v2 .field { display: flex; flex-direction: column; gap: 10px; font-size: 1.2rem; font-weight: bold; color: var(--color-accent); } .contact-v2 .field--full { grid-column: 1 / -1; } .contact-v2 .field input, .contact-v2 .field textarea { font: 400 18px var(--font-body); padding: 10px 2px; background: transparent; border: none; border-bottom: 1.5px solid var(--cv2-line); border-radius: 0; outline: none; color: var(--cv2-ink); transition: border-color 0.3s ease; } .contact-v2 .field textarea { resize: vertical; min-height: 110px; } .contact-v2 .field input:focus, .contact-v2 .field textarea:focus { border-bottom-color: var(--cv2-accent); } .contact-v2 .field ::placeholder { color: rgba(249, 251, 251, 0.4); } /* Kill the browser's autofill fill colour so fields stay transparent */ .contact-v2 .field input:-webkit-autofill, .contact-v2 .field input:-webkit-autofill:hover, .contact-v2 .field input:-webkit-autofill:focus, .contact-v2 .field textarea:-webkit-autofill { -webkit-text-fill-color: var(--cv2-ink); -webkit-background-clip: text; background-clip: text; transition: background-color 9999s ease-in-out 0s; caret-color: var(--cv2-ink); } .contact-v2 .field input:autofill, .contact-v2 .field textarea:autofill { background-color: transparent; color: var(--cv2-ink); } .contact-v2-footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .contact-v2-details { display: flex; gap: 36px; font-size: 14px; color: var(--cv2-muted); flex-wrap: wrap; } .contact-v2-details b { color: var(--cv2-accent); font-weight: 600; } .send-btn { font: 600 15px var(--font-body); background: var(--cv2-ink); color: var(--color-black); border: none; border-radius: 999px; padding: 14px 34px; cursor: pointer; display: flex; align-items: center; gap: 10px; transition: background 0.3s ease, color 0.3s ease; } .send-btn:hover, .send-btn:focus-visible { background: var(--cv2-accent); color: var(--color-black); } .send-btn:disabled { opacity: 0.6; cursor: wait; } .send-btn span { transition: transform 0.3s ease; } .send-btn:hover span { transform: translateX(4px); } .contact-v2 .cf-feedback { margin: 0; } @media (max-width: 720px) { .contact-v2 { gap: 32px; } .contact-v2-title { font-size: 44px; } .contact-v2-form { grid-template-columns: 1fr; gap: 32px; } } /* =============================================== Dark mode (landing page) Toggled via html[data-theme="dark"], set before first paint by an inline head script (saved choice, else system preference). The hero swaps to the -Darkmode artwork; light/dark sections trade places using the existing africa-ai pattern pair. Case-study pages keep their own palettes. =============================================== */ /* Sun/moon toggle — styled like a nav link so it sits naturally in the navbar */ .theme-toggle { background: none; border: none; padding: 0.5rem 0.75rem; color: var(--color-light); font-size: 1rem; line-height: 1; cursor: pointer; transition: color 0.3s ease, transform 0.3s ease; } .theme-toggle:hover { color: #ffffff; transform: rotate(15deg); } /* Gentle cross-fade between themes */ body, .section-light, #Skills, #Career, #CaseStudies { transition: background-color 0.4s ease, color 0.4s ease; } /* Page base: light africa pattern goes dark */ html[data-theme="dark"] body { color: var(--color-light); background-color: #171c22; background-image: url('../assets/site-assets/africa-ai-dark.webp'); } /* Hero artwork: swap the four layers for their -Darkmode counterparts. Clouds and grass have no dark versions and read fine on the night sky. */ html[data-theme="dark"] .bg-Layer { background-image: url('../assets/background-image-1-Darkmode.webp'); } html[data-theme="dark"] .tree-Layer { background-image: url('../assets/background-image-2-Darkmode.webp'); } html[data-theme="dark"] .trunk-Layer { background-image: url('../assets/background-image-4-Darkmode.webp'); } html[data-theme="dark"] .logo-Layer { background-image: url('../assets/logo-Darkmode.webp'); } /* Inverse sections — the dark About counter band goes light... */ html[data-theme="dark"] .section-light { background-color: #f2f0ec; background-image: url('../assets/site-assets/africa-ai.webp'); color: var(--color-dark); } html[data-theme="dark"] .about-counter-band { background-color: #f2f0ec; } html[data-theme="dark"] .about-counter-band .counter-value, html[data-theme="dark"] .about-counter-band .counter-plus { color: var(--color-dark); } html[data-theme="dark"] .about-counter-band .counter-item { border-right-color: rgba(42, 56, 71, 0.12); } /* ...and the light africa sections go dark */ html[data-theme="dark"] #Career, html[data-theme="dark"] #CaseStudies { background-color: #171c22; background-image: url('../assets/site-assets/africa-ai-dark.webp'); color: var(--color-light); } /* Card body copy: #555 is unreadable on the dark section bg */ html[data-theme="dark"] #CaseStudies .mx-2 { color: #fff; } /* Skills keeps its matrix backdrop, darkened via blend for legible light text */ html[data-theme="dark"] #Skills { background-color: rgba(18, 22, 27, 0.9); } html[data-theme="dark"] .skills-bg { background-color: rgba(18, 22, 27, 0.9); background-blend-mode: multiply; } html[data-theme="dark"] .capability-body p, html[data-theme="dark"] .skills-evidence { color: var(--color-light); } /* Skills copy reads white on the darkened matrix backdrop */ html[data-theme="dark"] #Skills h2, html[data-theme="dark"] .cap-title { color: #ffffff; } html[data-theme="dark"] .cap-icon { color: var(--color-accent); } html[data-theme="dark"] .capability-accordion .capability-item { border-top-color: rgba(255, 255, 255, 0.14); }