/* StartupET — minimal CSS-only overrides for the in-place repurposed index-creative-agency template. Never touches structure/hydration — safe to load alongside the original theme CSS. */ /* Amharic toggle support: the template's fonts (Manrope/JetBrains Mono) carry no Ethiopic glyphs, so Amharic text renders as tofu boxes without this. unicode-range scopes the font to only the Ethiopic block, so listing it first is safe — Latin characters keep falling through to the original fonts untouched. js/startupet-i18n.js sets lang="am" on when Amharic is active. */ @font-face { font-family: "Noto Sans Ethiopic"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/NotoSansEthiopic.woff2) format("woff2"); unicode-range: U+1200-137F, U+1380-139F, U+2D80-2DDF, U+AB00-AB2F; } html[lang="am"] body, html[lang="am"] body * { font-family: "Noto Sans Ethiopic", var(--_font-default), sans-serif !important; } /* Portfolio showcase repurposed as eligibility-pathway cards: the original template pairs each preview with a fictional "client" logo, which has no honest equivalent here, so it's hidden rather than replaced with a fake mark. */ .mxd-project-item__logowrap { display: none !important; } /* Real StartupET wordmark (dark type on transparent) replacing the hand-drawn mascot mark. Pin the theme to its light palette so the mark stays legible regardless of the visitor's OS/manual dark-mode preference, and give it a readable, non-stretched box since it's now a raster image, not a scalable path. */ .mxd-logo__image, .menu-logo__image { width: auto; height: 3.6rem; object-fit: contain; display: inline-block; } .menu-logo__image { height: 4rem; } /* Committee section (team page repurposed): each row now describes a mandate/composition fact rather than a person, so the fake social links have no honest equivalent and are hidden; the headshot photo is replaced with the StartupET seal mark and given padding so it reads as an icon, not a stretched photo. */ .mxd-team-list__socials { display: none !important; } .mxd-team-list__photo img { object-fit: contain !important; padding: 2.4rem; background: var(--base-tint); } :root { --base: var(--base--light); --base-rgb: var(--base-rgb--light); --base-tint: var(--base-tint--light); --base-tint-rgb: var(--base-tint-rgb--light); --base-bright: var(--base-bright--light); --base-bright-rgb: var(--base-bright-rgb--light); --accent: var(--accent--light); --highlight: var(--highlight--light); --base-opp: var(--base-opp--light); --base-opp-rgb: var(--base-opp-rgb--light); --t-bright: var(--t-bright--light); --t-medium: var(--t-medium--light); --t-muted: var(--t-muted--light); --t-muted-extra: var(--t-muted-extra--light); --t-opp-bright: var(--t-opp-bright--light); --t-opp-medium: var(--t-opp-medium--light); --t-opp-muted: var(--t-opp-muted--light); --t-opp-muted-extra: var(--t-opp-muted-extra--light); --st-muted: var(--st-muted--light); --st-medium: var(--st-medium--light); --st-bright: var(--st-bright--light); } html { color-scheme: light; } /* Remove the third-party Clutch rating badge from section headers — StartupET is a government platform and doesn't carry an agency-review widget. */ .mxd-section-title__image, .mxd-section-title__image.centered { display: none !important; } /* Hide leftover template demo sections on the subpages. None of these classes appear on the landing page, so the homepage is unaffected: - .mxd-blog-grid = the demo "News & updates" strip (about/services/faq) - .slider-card = the demo testimonials slider (team) - .mxd-awards = the demo "Awards & publications" block (about) */ .mxd-section:has(.mxd-blog-grid), .mxd-section:has(.slider-card), .mxd-section:has(.mxd-awards) { display: none !important; } /* Designation incentives (repurposed pricing table): the template ships fixed dollar amounts, but StartupET's incentives are policy benefits, not priced plans. Hide the monetary figure and keep the descriptive caption line, which now carries the real administering-body note. This class only exists on the incentives page, so nothing else is affected. */ .pricing-data__price { display: none !important; } /* Hide the template's demo "Clients" logo wall (Dribbble / Logitech / Envato placeholders with lorem-ipsum captions). StartupET is a government platform and does not display third-party client logos. The .mxd-clients class is unique to this block, so :has() removes the heading + strip together without touching the incentives table. */ .mxd-container:has(.mxd-clients) { display: none !important; } /* Full-width "divider" parallax bands ship as stock office photos compiled into _next CSS (divider-image-1/6/8/9/12/13 across the subpages). StartupET now uses real Ethiopian-business photography per subpage instead of the flag placeholder art; divider-image-1=team, 6=services, 8=faq, 9=contact, 12&13=about-us. Any other divider-image-N not listed keeps the placeholder fallback. */ .mxd-divider__image[class*="divider-image-"]{ background-image:url(/img/startupet/ph/ph-blue.svg) !important; background-size:cover !important; background-position:center !important; background-repeat:no-repeat !important; } .mxd-divider__image.divider-image-1{ background-image:url(/img/startupet/divider-team.png) !important; } .mxd-divider__image.divider-image-6{ background-image:url(/img/startupet/divider-services.png) !important; } .mxd-divider__image.divider-image-8{ background-image:url(/img/startupet/divider-faq.jpg) !important; } .mxd-divider__image.divider-image-9{ background-image:url(/img/startupet/divider-contact.jpg) !important; } .mxd-divider__image.divider-image-12{ background-image:url(/img/startupet/divider-about-a.png) !important; } .mxd-divider__image.divider-image-13{ background-image:url(/img/startupet/divider-about-b.jpg) !important; } /* Fake social handles ship with the template (Dribbble, Behance, Github, Codepen, Figma Community). StartupET has no verified public social accounts to link, so the social rows are hidden rather than point somewhere invented: - .mxd-socials-line = the hero "scroll to explore" social strip - .socials-list = the footer social column */ .mxd-socials-line { display: none !important; } /* Footer "/ ECOSYSTEM" column is a fake-socials list ([01] Dribbble, [02] Behance, …). Hide the whole block (heading + list); the Discover and Info footer columns are untouched. */ .mxd-footer-nav02__block:has(.socials-list__item) { display: none !important; } /* Hide the fake-socials column inside the fullscreen menu overlay (tagged on the menu-contact item that carries the Dribbble/Behance/Codepen chips). The email and address items in the same overlay are unaffected. */ .menu-contact__item.startupet-hide { display: none !important; } /* Contact page "connect" socials block (fake Dribbble/Behance/etc.). Hidden for the same reason as the footer/hero social rows — no verified accounts. */ .mxd-socials-list { display: none !important; } /* --- Navbar & footer polish (user request) --- */ /* The logo image already carries the StartupET Ethiopia mark, so drop the duplicate "StartupET / Ethiopia" text wordmark rendered next to it. */ .mxd-logo__text, .menu-logo__text { display: none !important; } /* Remove the glyph inside the header "Apply" button (reads as a cart icon); the button label stays and the theme toggle (.switcher-icon) is untouched. */ .mxd-header__controls .mxd-header__link i { display: none !important; } /* Footer wordmark: "StartupET" (9 letters) overflowed the frame at the template's 28cqw size — shrink it so the whole word stays inside the viewport. */ .fw-mark__content, .fw-mark__content.small { font-size: 17cqw !important; } /* Menu overlay preview image: the PM stands on the left, so anchor the crop to the left edge instead of centre so he isn't cut off. */ .menu-media__wrapper img { object-position: left center !important; } /* Homepage-only header "Apply for Designation" button: .mxd-header-permanent forces every header link to --nl-white (assuming a dark backdrop), but this button sits on a light header, so the label is invisible. Scoped to just this button by its aria-label (shared by no other header link, in either its pre-hydration "Apply Now" or hydrated "Apply for Designation" text) so the other header icons/links and the dark-mode palette are untouched. */ .mxd-header-permanent a.mxd-header__link[aria-label="Apply Now"], .mxd-header-permanent a.mxd-header__link[aria-label="Apply for Designation"] { color: #121212; } /* Stacked pathway panels ("slides up" section) now use real photos as the full-bleed background; strengthen the dark scrim so the white pathway title and metadata stay legible over bright imagery. */ .mxd-stack-cards__card .card__cover { background: rgba(0, 0, 0, 0.5) !important; } /* Testimonials cards: the decorative "IT" quote glyph is replaced with real photography. The inline SVG is kept in-flow (visibility:hidden) so the block keeps its size, and a cover photo is painted behind it, one per card. */ .mxd-testimonials-card__quote > svg { visibility: hidden; } .mxd-testimonials-card__quote { background-size: cover; background-position: center; border-radius: .8rem; overflow: hidden; } .mxd-testimonials-card__quote.qp1 { background-image: url(/img/startupet/allworks-1.png); } .mxd-testimonials-card__quote.qp2 { background-image: url(/img/startupet/allworks-2.png); } .mxd-testimonials-card__quote.qp3 { background-image: url(/img/startupet/content-services-whiteboard.png); } .mxd-testimonials-card__quote.qp4 { background-image: url(/img/startupet/allworks-5.png); } .mxd-testimonials-card__quote.qp5 { background-image: url(/img/startupet/content-team-huddle.png); } /* Contact page: remove the leftover US "Oakland" office block (a fake template address). Targets that datalist item by its unique Google-Maps link; the real Addis Ababa / Ministry block is untouched. */ .datalist__item:has(a[href="https://goo.gl/maps/xap5o3MZBuC6DFHz8"]) { display: none !important; } /* Homepage hero: MinT (Ministry of Innovation and Technology) mark above the "Ethiopia's Startup Era Has Begun" headline, in the empty gap the template already reserves there. CSS-only (::before) so it survives hydration — .mxd-hero-05__headline is a flex column with the h1 as its only child, so the pseudo-element simply becomes the first stacked item, no DOM/markup change needed. */ .mxd-hero-05__headline::before { content: ''; display: block; width: 100%; height: 7.2rem; margin: 0 auto 1.6rem; background: url(/img/startupet/mint-logo.png) no-repeat center / contain; } @media (max-width: 767px) { .mxd-hero-05__headline::before { height: 4.4rem; margin-bottom: 1rem; } } /* Header EN/Amharic language switcher — styled to match the adjacent Night/Day mode switcher (dimmed inactive option, bright active one). */ .mxd-lang-switcher { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0 1.2rem; font-family: var(--font-mono, monospace); font-size: 1.3rem; letter-spacing: 0.02em; } .lang-switcher__opt { background: none; border: none; padding: 0; cursor: pointer; color: var(--t-muted, currentColor); opacity: 0.5; transition: opacity 0.2s ease; } .lang-switcher__opt.active { opacity: 1; } .lang-switcher__sep { opacity: 0.35; } @media (max-width: 575px) { .mxd-lang-switcher { margin: 0 0.6rem; } }