/* ========================================================================== EmergingX — Design System (Phase 0) Loaded AFTER main.css and page CSS, so it owns the visual identity. Dark-first, with a light theme via [data-theme="light"] on . Legacy component classes are mapped in the COMPATIBILITY LAYER at the bottom, so existing pages stay readable until they are rebuilt. ========================================================================== */ /* ---------- 1. Tokens ---------------------------------------------------- */ :root { /* Ground and surfaces — blue-biased near-black, never pure grey */ --ex-bg: #0A0E1A; --ex-bg-alt: #0D1220; --ex-surface: #121A2B; --ex-surface-2: #18223A; --ex-surface-hover: #1C2742; /* Hairlines instead of drop shadows */ --ex-line: rgba(255, 255, 255, 0.075); --ex-line-strong: rgba(255, 255, 255, 0.155); /* Text */ --ex-text: #C3CCDE; --ex-text-strong: #F3F6FC; --ex-text-muted: #8792A9; /* One confident accent, indigo -> cyan */ --ex-accent: #5B7CFA; --ex-accent-2: #2DD4BF; --ex-accent-ink: #FFFFFF; --ex-accent-soft: rgba(91, 124, 250, 0.13); --ex-accent-glow: rgba(91, 124, 250, 0.32); --ex-grad: linear-gradient(115deg, #5B7CFA 0%, #7C6BF5 45%, #2DD4BF 100%); --ex-grad-text: linear-gradient(115deg, #FFFFFF 0%, #C8D4FF 40%, #7FE8DA 100%); /* Chrome */ --ex-nav-bg: rgba(10, 14, 26, 0.62); --ex-nav-bg-solid: rgba(10, 14, 26, 0.92); /* Type */ --ex-display: "Bricolage Grotesque", "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --ex-body: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --ex-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Rhythm */ --ex-radius: 14px; --ex-radius-sm: 9px; --ex-radius-lg: 22px; --ex-section: clamp(64px, 7.5vw, 112px); --ex-ease: cubic-bezier(0.22, 1, 0.36, 1); } :root[data-theme="light"] { --ex-bg: #F7F9FC; --ex-bg-alt: #EFF3F9; --ex-surface: #FFFFFF; --ex-surface-2: #F2F5FA; --ex-surface-hover: #EAF0F9; --ex-line: rgba(12, 20, 40, 0.09); --ex-line-strong: rgba(12, 20, 40, 0.17); --ex-text: #414D66; --ex-text-strong: #0B1222; --ex-text-muted: #6B7791; --ex-accent: #3757E8; /* Darker than the dark-theme teal: as small mono label text on a 12% tint of itself, #0E9C8A measured only 2.60:1. */ --ex-accent-2: #0A6B5E; --ex-accent-soft: rgba(55, 87, 232, 0.09); --ex-accent-glow: rgba(55, 87, 232, 0.22); --ex-grad-text: linear-gradient(115deg, #0B1222 0%, #3757E8 55%, #0E9C8A 100%); --ex-nav-bg: rgba(247, 249, 252, 0.7); --ex-nav-bg-solid: rgba(247, 249, 252, 0.94); } /* ---------- 2. Base ------------------------------------------------------ */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { background: var(--ex-bg); color: var(--ex-text); font-family: var(--ex-body); font-size: 17px; line-height: 1.68; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background-color .35s var(--ex-ease), color .35s var(--ex-ease); } h1, h2, h3, h4, h5, h6, .display-1, .display-2, .display-3, .display-4 { font-family: var(--ex-display); color: var(--ex-text-strong); font-weight: 600; letter-spacing: -0.028em; line-height: 1.1; text-wrap: balance; } a { color: var(--ex-accent); text-decoration: none; transition: color .2s var(--ex-ease); } a:hover { color: var(--ex-accent-2); } ::selection { background: var(--ex-accent); color: #fff; } :focus-visible { outline: 2px solid var(--ex-accent); outline-offset: 3px; border-radius: 4px; } /* Utility: mono eyebrow label, e.g. "01 / PRODUCTS" */ .ex-eyebrow { font-family: var(--ex-mono); font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--ex-text-muted); display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; } .ex-eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--ex-accent); opacity: .85; } .ex-grad-text { background: var(--ex-grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ---------- 3. Navigation ------------------------------------------------ */ .navbar#mainNav { background: var(--ex-nav-bg) !important; -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); border-bottom: 1px solid transparent; padding: 18px 0; transition: padding .35s var(--ex-ease), background-color .35s var(--ex-ease), border-color .35s var(--ex-ease); } .navbar#mainNav.scrolled { background: var(--ex-nav-bg-solid) !important; border-bottom-color: var(--ex-line); padding: 11px 0; } .navbar#mainNav .navbar-brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--ex-display); font-weight: 600; font-size: 19px; letter-spacing: -0.02em; color: var(--ex-text-strong); } .navbar#mainNav .navbar-logo { border-radius: 7px; } .navbar#mainNav .brand-text { color: var(--ex-text-strong); } .navbar#mainNav .brand-text b { color: var(--ex-accent); font-weight: 600; } .navbar#mainNav .navbar-nav { align-items: center; gap: 2px; } .navbar#mainNav .navbar-nav .nav-link { color: var(--ex-text) !important; font-family: var(--ex-body); font-size: 15px; font-weight: 500; padding: 8px 14px !important; border-radius: var(--ex-radius-sm); transition: color .2s var(--ex-ease), background-color .2s var(--ex-ease); } .navbar#mainNav .navbar-nav .nav-link:hover, .navbar#mainNav .navbar-nav .nav-link.active { color: var(--ex-text-strong) !important; background: var(--ex-surface-2); } /* retire the old sliding underline */ .navbar#mainNav .navbar-nav .nav-link::after { display: none !important; } .navbar#mainNav .navbar-toggler { border: 1px solid var(--ex-line-strong); border-radius: var(--ex-radius-sm); padding: 7px 10px; } .navbar#mainNav .navbar-toggler:focus { box-shadow: none; } .navbar#mainNav .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(195,204,222,0.9)' stroke-width='2' stroke-linecap='round' d='M4 8h22M4 15h22M4 22h22'/%3E%3C/svg%3E"); } :root[data-theme="light"] .navbar#mainNav .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(65,77,102,0.9)' stroke-width='2' stroke-linecap='round' d='M4 8h22M4 15h22M4 22h22'/%3E%3C/svg%3E"); } /* Nav CTA + theme toggle */ .ex-nav-actions { display: flex; align-items: center; gap: 10px; margin-left: 14px; } .ex-theme-toggle { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--ex-line); background: var(--ex-surface); color: var(--ex-text); cursor: pointer; transition: border-color .2s var(--ex-ease), color .2s var(--ex-ease), background-color .2s var(--ex-ease); } .ex-theme-toggle:hover { border-color: var(--ex-line-strong); color: var(--ex-text-strong); } .ex-theme-toggle .fa-moon { display: none; } :root[data-theme="light"] .ex-theme-toggle .fa-moon { display: inline; } :root[data-theme="light"] .ex-theme-toggle .fa-sun { display: none; } @media (max-width: 991.98px) { .navbar#mainNav .navbar-collapse { background: var(--ex-nav-bg-solid); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border: 1px solid var(--ex-line); border-radius: var(--ex-radius); padding: 14px; margin-top: 14px; } .ex-nav-actions { margin: 12px 0 0; } } /* ---------- 4. Buttons --------------------------------------------------- */ .btn { font-family: var(--ex-body); font-weight: 600; font-size: 15px; border-radius: 999px; padding: 12px 26px; letter-spacing: -0.005em; transition: transform .22s var(--ex-ease), box-shadow .22s var(--ex-ease), background-color .22s var(--ex-ease), border-color .22s var(--ex-ease), color .22s var(--ex-ease); } .btn-lg { padding: 15px 32px; font-size: 16px; } .btn-primary, .btn-primary:focus { background: var(--ex-grad); border: none; color: var(--ex-accent-ink); box-shadow: 0 8px 26px -12px var(--ex-accent-glow); } .btn-primary:hover, .btn-primary:active { background: var(--ex-grad) !important; color: var(--ex-accent-ink) !important; transform: translateY(-2px); box-shadow: 0 16px 40px -14px var(--ex-accent-glow); } .btn-outline-primary, .btn-outline-primary:focus { background: transparent; border: 1px solid var(--ex-line-strong); color: var(--ex-text-strong); } .btn-outline-primary:hover, .btn-outline-primary:active { background: var(--ex-surface-2) !important; border-color: var(--ex-accent) !important; color: var(--ex-text-strong) !important; transform: translateY(-2px); } @media (prefers-reduced-motion: reduce) { .btn:hover, .btn:active { transform: none; } } /* ---------- 5. Scroll reveal --------------------------------------------- */ .ex-reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ex-ease), transform .7s var(--ex-ease); will-change: opacity, transform; } .ex-reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .ex-reveal { opacity: 1; transform: none; transition: none; } } /* ---------- 6. Footer ---------------------------------------------------- */ .footer.ex-footer { background: var(--ex-bg-alt) !important; border-top: 1px solid var(--ex-line); color: var(--ex-text); padding: clamp(56px, 7vw, 88px) 0 32px; } .ex-footer .ex-footer-brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--ex-display); font-size: 21px; font-weight: 600; color: var(--ex-text-strong); letter-spacing: -0.02em; margin-bottom: 14px; } .ex-footer .ex-footer-brand b { color: var(--ex-accent); font-weight: 600; } .ex-footer .footer-description { color: var(--ex-text-muted); font-size: 15px; max-width: 34ch; } .ex-footer .footer-heading { font-family: var(--ex-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ex-text-muted); margin-bottom: 16px; font-weight: 500; } .ex-footer .footer-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .ex-footer .footer-links a { color: var(--ex-text); font-size: 15px; } .ex-footer .footer-links a:hover { color: var(--ex-accent); } .ex-footer .contact-info p { color: var(--ex-text-muted); font-size: 15px; margin-bottom: 10px; } .ex-footer .contact-info i { color: var(--ex-accent); } .ex-footer .footer-divider { border-color: var(--ex-line); opacity: 1; margin: 40px 0 24px; } .ex-footer .footer-copyright { color: var(--ex-text-muted); font-size: 14px; } .ex-footer .social-links { display: flex; gap: 10px; margin-top: 18px; } .ex-footer .social-link { width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; /* `background: none` is required, not optional: main.css sets background: var(--gradient-accent) here, and a gradient is a background-IMAGE, so overriding background-color alone leaves it. */ background: none; border: 1px solid var(--ex-line); color: var(--ex-text-muted); transition: border-color .22s var(--ex-ease), color .22s var(--ex-ease), background-color .22s var(--ex-ease), transform .22s var(--ex-ease); } .ex-footer .social-link:hover { border-color: var(--ex-accent); color: var(--ex-accent); background: var(--ex-accent-soft); transform: translateY(-2px); } /* ========================================================================== 7. COMPATIBILITY LAYER Keeps not-yet-rebuilt pages coherent on the new dark ground. Each block is removed as its page is rebuilt in a later phase. ========================================================================== */ .section { background: transparent; padding: var(--ex-section) 0; } .section-title { color: var(--ex-text-strong); } .section-subtitle, .lead { color: var(--ex-text-muted); } .card, .service-card, .portfolio-card, .contact-form, .value-card, .team-card, .faq-item, .info-card { background: var(--ex-surface) !important; border: 1px solid var(--ex-line) !important; border-radius: var(--ex-radius) !important; color: var(--ex-text); box-shadow: none !important; transition: border-color .28s var(--ex-ease), background-color .28s var(--ex-ease), transform .28s var(--ex-ease); } .card:hover, .service-card:hover, .portfolio-card:hover { border-color: var(--ex-line-strong) !important; background: var(--ex-surface-hover) !important; transform: translateY(-3px); } .card-title, .service-title, .portfolio-title, .card h3, .card h4, .card h5 { color: var(--ex-text-strong); } .card-text, .service-description, .portfolio-description, .card p { color: var(--ex-text-muted); } .bg-light, .bg-white { background: var(--ex-bg-alt) !important; color: var(--ex-text); } .text-dark { color: var(--ex-text-strong) !important; } .text-muted { color: var(--ex-text-muted) !important; } .form-control, .form-select { background: var(--ex-surface-2); border: 1px solid var(--ex-line); border-radius: var(--ex-radius-sm); color: var(--ex-text-strong); padding: 13px 16px; font-size: 15px; } .form-control::placeholder { color: var(--ex-text-muted); } .form-control:focus, .form-select:focus { background: var(--ex-surface-2); border-color: var(--ex-accent); color: var(--ex-text-strong); box-shadow: 0 0 0 3px var(--ex-accent-soft); } .form-label { color: var(--ex-text); font-size: 14px; font-weight: 500; } .form-select option { background: var(--ex-surface); color: var(--ex-text-strong); } .form-check-input { background-color: var(--ex-surface-2); border-color: var(--ex-line-strong); } .form-check-input:checked { background-color: var(--ex-accent); border-color: var(--ex-accent); } .form-check-label { color: var(--ex-text-muted); font-size: 14px; } /* Legacy gradient blocks: keep them readable, drop the purple era */ .hero-section { background: var(--ex-bg) !important; } .stats-section { background: var(--ex-bg-alt) !important; border-block: 1px solid var(--ex-line); } .stat-number { color: var(--ex-accent) !important; font-family: var(--ex-display); } .stat-label { color: var(--ex-text-muted) !important; } .card-header { background: var(--ex-surface-2) !important; color: var(--ex-text-strong) !important; border-bottom: 1px solid var(--ex-line); } .accordion-item { background: var(--ex-surface); border: 1px solid var(--ex-line); } .accordion-button { background: var(--ex-surface); color: var(--ex-text-strong); } .accordion-button:not(.collapsed) { background: var(--ex-surface-2); color: var(--ex-text-strong); box-shadow: none; } .accordion-body { color: var(--ex-text-muted); } .modal-content { background: var(--ex-surface); border: 1px solid var(--ex-line); border-radius: var(--ex-radius); } .modal-header, .modal-footer { border-color: var(--ex-line); } .modal-title { color: var(--ex-text-strong); } .btn-close { filter: invert(1) grayscale(1) brightness(1.6); } :root[data-theme="light"] .btn-close { filter: none; } .badge { font-family: var(--ex-mono); font-weight: 500; letter-spacing: .04em; } hr { border-color: var(--ex-line); opacity: 1; } /* Nav CTA sizing — smaller than the page-level buttons */ .ex-nav-cta { padding: 9px 20px !important; font-size: 14.5px !important; white-space: nowrap; } @media (max-width: 991.98px) { .ex-nav-actions { flex-direction: row; justify-content: space-between; width: 100%; } .ex-nav-cta { flex: 1; text-align: center; } } /* -------------------------------------------------------------------------- 7b. Legacy light-background surfaces These page-level classes hardcode var(--white) / var(--light-gray) as a background. On the dark ground that would render light text on a light surface, so each is mapped explicitly. The variables themselves are NOT remapped: var(--white) is also used as a text colour in 29 places. -------------------------------------------------------------------------- */ .about-card, .expertise-card, .mission-card, .vision-card, .why-card, .success-card, .api-card, .demo-card, .contacts-info, .quick-contact { background: var(--ex-surface) !important; border: 1px solid var(--ex-line) !important; border-radius: var(--ex-radius) !important; color: var(--ex-text) !important; box-shadow: none !important; transition: border-color .28s var(--ex-ease), background-color .28s var(--ex-ease), transform .28s var(--ex-ease); } .about-card:hover, .expertise-card:hover, .why-card:hover, .success-card:hover, .api-card:hover, .demo-card:hover { border-color: var(--ex-line-strong) !important; background: var(--ex-surface-hover) !important; transform: translateY(-3px); } .about-card h1, .about-card h2, .about-card h3, .about-card h4, .about-card h5, .expertise-card h3, .expertise-card h4, .expertise-card h5, .mission-card h3, .mission-card h4, .vision-card h3, .vision-card h4, .why-card h3, .why-card h4, .why-card h5, .success-card h3, .success-card h4, .success-card h5, .api-card h3, .api-card h4, .api-card h5, .demo-card h3, .demo-card h4, .demo-card h5, .contacts-info h3, .contacts-info h4, .contacts-info h5, .quick-contact h3, .quick-contact h4, .quick-contact h5 { color: var(--ex-text-strong) !important; } .about-card p, .expertise-card p, .mission-card p, .vision-card p, .why-card p, .success-card p, .api-card p, .demo-card p, .contacts-info p, .quick-contact p { color: var(--ex-text-muted) !important; } /* Chips: upgraded to mono pills rather than plain light boxes */ .tag, .tech-tag, .api-endpoint { background: var(--ex-accent-soft) !important; border: 1px solid var(--ex-line) !important; color: var(--ex-accent) !important; font-family: var(--ex-mono) !important; font-size: 12px !important; letter-spacing: .02em; border-radius: 999px !important; padding: 5px 12px !important; box-shadow: none !important; } .api-endpoint { border-radius: var(--ex-radius-sm) !important; } .demo-input { background: var(--ex-surface-2) !important; border: 1px solid var(--ex-line) !important; color: var(--ex-text-strong) !important; border-radius: var(--ex-radius-sm) !important; } /* Contact page surfaces (visual only — form markup is frozen) */ .contact-form { background: var(--ex-surface) !important; padding: 28px !important; } .accordion-button, .accordion-body { background: var(--ex-surface) !important; color: var(--ex-text) !important; } .accordion-button::after { filter: invert(1) grayscale(1) brightness(1.7); } :root[data-theme="light"] .accordion-button::after { filter: none; } /* Legacy hero: neutralise the purple gradient, keep the text readable */ .hero-section::before { opacity: .35; } .hero-title { -webkit-text-fill-color: initial !important; background: none !important; color: var(--ex-text-strong) !important; } .hero-subtitle { color: var(--ex-text) !important; } .hero-description { color: var(--ex-text-muted) !important; } .hero-icon, .floating-element { color: var(--ex-accent) !important; } .floating-element { background: var(--ex-surface) !important; border: 1px solid var(--ex-line) !important; box-shadow: none !important; } /* -------------------------------------------------------------------------- 8. Brand mark logo.png carries a baked-in dark plate, so filter-inverting it for the light theme produced a black box. A typographic wordmark is theme-native and sharper at every size; the PNG remains the favicon and OG image. -------------------------------------------------------------------------- */ /* logo-mark.png is the original wordmark with its baked-in navy plate removed (see scripts note: alpha derived from luminance), so it now sits on any ground. White artwork by default; tinted to ink for the light theme. */ .ex-logo { height: 27px; width: auto; display: block; transition: filter .35s var(--ex-ease), opacity .2s var(--ex-ease); } .ex-logo-footer { height: 30px; } :root[data-theme="light"] .ex-logo { /* white artwork -> brand ink, without shipping a second asset */ filter: brightness(0) saturate(100%) invert(6%) sepia(18%) saturate(2200%) hue-rotate(196deg) brightness(96%) contrast(96%); } .navbar#mainNav .navbar-brand:hover .ex-logo { opacity: .82; } .ex-theme-toggle { font-size: 15px; } .ex-theme-toggle .fa-circle-half-stroke { transition: transform .4s var(--ex-ease); } .ex-theme-toggle:hover .fa-circle-half-stroke { transform: rotate(180deg); } @media (prefers-reduced-motion: reduce) { .ex-theme-toggle:hover .fa-circle-half-stroke { transform: none; } } /* -------------------------------------------------------------------------- 9. Legacy gradient bands `bg-gradient-primary text-white` is used 30 times, always together, always as a section/hero background. Neutralising the pair retires the purple gradient and lets theme text colours apply correctly in BOTH themes. Without this, light theme puts near-black headings on a navy band. -------------------------------------------------------------------------- */ .bg-gradient-primary, .hero-section, .about-hero, .services-hero, .portfolio-hero, .contact-hero { background: var(--ex-bg-alt) !important; border-bottom: 1px solid var(--ex-line); } .section.bg-gradient-primary { border-block: 1px solid var(--ex-line); } .text-white { color: var(--ex-text) !important; } .bg-gradient-primary h1, .bg-gradient-primary h2, .bg-gradient-primary h3, .bg-gradient-primary h4, .bg-gradient-primary h5, .bg-gradient-primary h6, .about-hero h1, .services-hero h1, .portfolio-hero h1, .contact-hero h1, .hero-title, .about-hero .display-4, .contact-hero .display-4 { color: var(--ex-text-strong) !important; -webkit-text-fill-color: initial !important; background: none !important; } .bg-gradient-primary p, .about-hero p, .services-hero p, .portfolio-hero p, .contact-hero p { color: var(--ex-text-muted) !important; } /* Page heroes sit under the fixed nav */ .about-hero, .services-hero, .portfolio-hero, .contact-hero { padding-top: clamp(120px, 13vw, 168px) !important; padding-bottom: clamp(56px, 7vw, 88px) !important; } /* -------------------------------------------------------------------------- 10. Vertical rhythm between stacked sections Every block is
, so two in a row produced ~264px of dead space (e.g. the portfolio filter sat 384px above its own grid). Collapse the seam between adjacent sections that share a background. -------------------------------------------------------------------------- */ .section + .section:not(.bg-light):not(.bg-gradient-primary) { padding-top: 0; } .section:not(.bg-light):not(.bg-gradient-primary) + .section.bg-light { margin-top: 0; } /* The filter row belongs to the grid beneath it, not to its own band */ .portfolio-hero + .section { padding-bottom: 0; } /* -------------------------------------------------------------------------- 11. Legacy dark text colours These page classes hardcode var(--primary-dark) / var(--dark-gray), which render near-black on the dark ground (e.g. .form-title measured 1.0:1 contrast against the contact card). Mapped to theme text tokens. -------------------------------------------------------------------------- */ .form-title, .info-title, .endpoint, .contact-details h5, .portfolio-content h4, .project-details h6, .quick-contact h4, .success-card h5, .timeline-content h5, .timeline-content h4 { color: var(--ex-text-strong) !important; } .contact-details p, .portfolio-content p, .project-details p, .timeline-content p, .form-subtitle { color: var(--ex-text-muted) !important; } .endpoint { font-family: var(--ex-mono) !important; background: var(--ex-surface-2) !important; border: 1px solid var(--ex-line) !important; border-radius: var(--ex-radius-sm) !important; } /* -------------------------------------------------------------------------- 12. Light-theme fixes found by the contrast audit -------------------------------------------------------------------------- */ /* Bootstrap's .btn-outline-light assumes a dark background. On the light theme it rendered white-on-white (1.06:1). Give it the same treatment as .btn-outline-primary so it works on both grounds. */ .btn-outline-light, .btn-outline-light:focus { background: transparent; border: 1px solid var(--ex-line-strong); color: var(--ex-text-strong); } .btn-outline-light:hover, .btn-outline-light:active { background: var(--ex-surface-2) !important; border-color: var(--ex-accent) !important; color: var(--ex-text-strong) !important; } /* The portfolio hover overlay is a dark scrim in BOTH themes, so its text stays white. Without this the global heading colour won since it is set on the h5 itself, not inherited from .overlay-content. */ .portfolio-overlay { background: rgba(10, 14, 26, 0.92) !important; } .overlay-content h5, .overlay-content p { color: #FFFFFF !important; } .overlay-content p { opacity: .82; }