/* ========================================= Africa CPTA Theme – Custom Overrides This file loads last and overrides all others ========================================= */ /* Root Design Tokens */ :root { --color-primary: #003e99; --color-primary-contrast: #ffffff; --color-accent: #ffb703; --color-bg: #ffffff; --color-surface: #ffffff; --color-muted: #f5f7f9; --color-border: rgba(0,0,0,.08); --color-text: #222; --color-text-dim: #5b6b79; --header-height: 80px; --header-height-shrink: 60px; --shadow-1: 0 2px 4px rgba(0,0,0,.05); --shadow-2: 0 6px 18px rgba(0,0,0,.08); --radius: 12px; --transition: .24s cubic-bezier(.4,0,.2,1); } /* Utilities */ .visually-hidden-focusable:not(:focus):not(:focus-within) { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ----------------------------------------- Dark Mode (higher contrast, cleaner UI) Toggle by adding .theme-dark to ----------------------------------------- */ html.theme-dark { /* palette */ --color-bg: #0c1116; /* page background */ --color-surface: #11161c; /* cards/nav surfaces */ --color-muted: #0a0f14; /* muted strips/alt rows */ --color-border: rgba(255,255,255,.12); --color-text: #eef3f7; /* main text */ --color-text-dim: #a9b8c7; /* secondary text */ --shadow-1: 0 2px 10px rgba(0,0,0,.45); --shadow-2: 0 18px 40px rgba(0,0,0,.55); } /* Surfaces inherit new tokens automatically, but a few components benefit from explicit tweaks */ html.theme-dark .site-header, html.theme-dark .navbar { background: rgba(17,22,28,.95); backdrop-filter: saturate(140%) blur(6px); border-bottom: 1px solid var(--color-border); } html.theme-dark body { background: var(--color-bg); color: var(--color-text); } html.theme-dark a { color: var(--color-primary, #3b82f6); } html.theme-dark a:hover { color: var(--color-accent, #ffb703); } html.theme-dark .dropdown-menu { background: var(--color-surface); border-color: var(--color-border); box-shadow: var(--shadow-2); } html.theme-dark .dropdown-item { color: var(--color-text); } html.theme-dark .dropdown-item:hover, html.theme-dark .dropdown-item:focus { background: rgba(255,255,255,.06); color: var(--color-text); } /* Cards / list items / widget tiles */ html.theme-dark .card, html.theme-dark .country-link, html.theme-dark .country-carousel-link, html.theme-dark .af-card { background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)); border-color: var(--color-border); color: var(--color-text); } /* Inputs */ html.theme-dark .form-control, html.theme-dark .form-select { background-color: #0f141a; border-color: var(--color-border); color: var(--color-text); } html.theme-dark .form-control:focus, html.theme-dark .form-select:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(59,130,246,.25); } /* Buttons (Bootstrap variables respected) */ html.theme-dark .btn-outline-secondary { color: var(--color-text); border-color: var(--color-border); } html.theme-dark .btn-outline-secondary:hover { background: rgba(255,255,255,.06); border-color: var(--color-border); } /* Section backgrounds used on the front page */ html.theme-dark .light-section { background: #0e1319; } html.theme-dark .dark-section { background: #0b1016; } /* Scroll progress on dark */ html.theme-dark .scroll-progress { background: var(--color-primary); } /* Minor helpers */ html.theme-dark .text-muted, html.theme-dark .section-intro { color: var(--color-text-dim); } html.theme-dark hr { border-color: var(--color-border); } /* ----- Stable dropdown hover hit-area fix ----- */ @media (min-width: 1200px) { .navbar .dropdown-menu { margin-top: 0 !important; /* Remove gap */ padding-top: 6px; /* Tiny buffer so diagonal movement doesn't flicker */ } /* Add a transparent top border to catch the pointer when moving diagonally */ .navbar .dropdown-menu::before { content: ""; display: block; height: 8px; /* Adjust for buffer size */ position: absolute; top: -8px; left: 0; right: 0; background: transparent; } } /********************fixers************************/ /* Background image classes with cover and no-repeat */ .t-bg-1, .t-bg-2, .t-bg-3, .t-bg-4, .t-bg-5 { background-repeat: no-repeat; background-size: cover; background-position: center center; } /* Specific backgrounds for each class */ .t-bg-1 { background-image: url('/wp-content/themes/africa-cpta-theme/assets/images/t-bg-1.jpg'); } .t-bg-2 { background-image: url('/wp-content/themes/africa-cpta-theme/assets/images/t-bg-2.jpg'); } .t-bg-3 { background-image: url('/wp-content/themes/africa-cpta-theme/assets/images/t-bg-3.jpg'); } .t-bg-4 { background-image: url('/wp-content/themes/africa-cpta-theme/assets/images/t-bg-4.jpg'); } .t-bg-5 { background-image: url('/wp-content/themes/africa-cpta-theme/assets/images/t-bg-5.jpg'); } .dark-mode .card.fintech-card-gradient p, .dark-mode .card.fintech-card-gradient h3 + *, .dark-mode h3 + p, .dark-mode p { color: var(--white); /* e.g. light text on dark background */ } .dark-mode .fintech-share-btn, .dark-mode .btn-outline-secondary, .dark-mode .fintech-dark-mode-toggle { color: var(--white); /* Fixed for better contrast */ } .dark-mode .btn, .dark-mode .btn-primary, .dark-mode .btn-secondary, .dark-mode .btn-outline-primary, .dark-mode .btn-outline-secondary { background-color: var(--button-bg); color: var(--button-text); /* Fixed for better contrast */ border-color: var(--button-border); } /* ======================================= */ /* 1) Base “parallax” container */ /* ======================================= */ .parallax { position: relative; overflow: hidden; min-height: 400px; /* Parallax effect */ background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; } /* ======================================= */ /* 2) Background variants via sbgX */ /* (paths relative to your theme) */ /* ======================================= */ .parallax.sbg1 { background-image: url('/wp-content/themes/africa-cpta-theme/assets/images/sbg1.jpg'); } .parallax.sbg2 { background-image: url('/wp-content/themes/africa-cpta-theme/assets/images/sbg2.jpg'); } .parallax.sbg3 { background-image: url('/wp-content/themes/africa-cpta-theme/assets/images/sbg3.jpg'); } .parallax.sbg4 { background-image: url('/wp-content/themes/africa-cpta-theme/assets/images/sbg4.jpg'); } .parallax.sbg5 { background-image: url('/wp-content/themes/africa-cpta-theme/assets/images/sbg5.jpg'); } /* ======================================= */ /* 3) Overlay for sections “dark-section” */ /* ======================================= */ .parallax.dark-section::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.8); /* voile sombre à 60% */ pointer-events: none; z-index: 1; } .card-img, .card-img-bottom, .card-img-top { max-height: 200px; } /* ======================================= */ /* 4) Contenu au-dessus de l’overlay */ /* ======================================= */ .parallax > * { position: relative; z-index: 2; } p.lead.mb-4.page-short-description { color: #ffb703; } h1.display-4.fw-bold.mb-3.archive-title { color: #ffb703; } .contact-icon { max-width: 100px; } img.mb-2 { max-width: 100px; } i.bi.bi-currency-exchange.fs-1 { color: #ffb703; } i.bi.bi-phone-vibrate.fs-1 { color: #ffb703; } i.bi.bi-graph-up-arrow.fs-1 { color: #ffb703; } .country-profile-archive .row.g-4 { display: flex !important; opacity: 1 !important; visibility: visible !important; }