Improve Layout, UI Consistency, and Content Updates for Codeheat 2026 Website

[Ubayed-Bin-Sufian]

Description:

Please implement the following updates to make the Codeheat 2026 website consistent with the previous version and complete pending sections.

---

Tasks

Layout & Design Consistency

• Make the layout similar to the previous site, especially the “invisible” box layout on large screens.
• Make the yellow area match the previous design, including fixing icons and text size.
• Change fonts site-wide to more closely match the previous design.
• Add the bottom picture to the website.

Navigation & Content

• Remove Winner and Finalist from the menu.
• Add Codeheat Issues section to the 2026 site.
• Add dropdown for Projects, similar to previous Codeheat websites.

Social & External Links

• Add LinkedIn icon linking to: https://www.linkedin.com/groups/3762811/

People Sections

• Jury section: Add one placeholder photo (total 4 photos).
• Mentors section: Add 4 rows with the same people as placeholders.

[Ubayed-Bin-Sufian]

Completed Tasks

• Add the bottom picture to the website
• Remove Winner and Finalist from the menu
• Add Codeheat Issues section to the 2026 site
• Add dropdown for Projects, similar to previous Codeheat websites
• Add LinkedIn icon linking to the official group
• Jury section: Add one placeholder photo (total 4 photos)
• Mentors section: Add 4 rows with the same people as placeholders

[Ubayed-Bin-Sufian]

Completed Tasks

• Change fonts site-wide to more closely match the previous design.

[Ubayed-Bin-Sufian]

Completed Tasks

• Make the layout similar to the previous site (invisible box layout on large screens)

Steps implemented:

• WordPress Dashboard → Appearance → Customize → Post Types → Single Page → Container Layout → Normal
• WordPress Dashboard → Appearance → Customize → Post Types → Single Page → Content Width → Custom → 1600px

This fixes the main content container, but the header and footer do not follow these settings.
To apply the same boxed (invisible box) layout to the footer, additional CSS was added:

/* Limit footer width to match layout */
.site-footer {
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
}

Remaining Task: Make the header follow the same boxed (invisible box) layout

Astra’s header stretches full-width by default, so we need custom CSS to limit the width of the header container, similar to how we handled the footer.

[Ubayed-Bin-Sufian]

Continuation of #381 (comment)

Implemented: Boxed Layout for Header

To make the header follow the same 1600px boxed layout as the main content and footer, the original fixed header CSS was updated.

Updated CSS

/* --- UPDATED: HEADER BOXED WIDTH FIX --- */

/* Constrain the entire fixed header bar to 1600px and center it */
.ast-main-header-wrap {
    /* Keep existing fixed-header behaviors */
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
    transition: all 0.3s ease-in-out;
    background-color: transparent;

    /* NEW: Apply boxed layout */
    max-width: 1600px;          /* Match main container width */
    left: 50%;                  /* Center the fixed element */
    transform: translateX(-50%); /* Align center */
}

/* Sticky state must also remain centered and boxed */
.ast-main-header-wrap.is-sticky {
    position: fixed;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(5px);

    /* Combine translateZ for smoothness + translateX for centering */
    transform: translateZ(0) translateX(-50%);
}

[Ubayed-Bin-Sufian]

Completed Tasks

• Make the yellow area match the previous design, including fixing icons and text size.

Steps implemented:

1. Enabled SVG uploads safely

   • Installed and activated the Safe SVG plugin to allow SVG uploads securely in WordPress.
   • • This allows uploading SVG files to the WordPress Media Library while sanitizing them for security.

2. Uploaded required SVG icons

   • Downloaded the icons from https://github.com/olimsaidov/pixeden-stroke-7-icon/tree/master/pe-icon-7-stroke/svg
   • Uploaded the cash.svg and phone.svg icons to the Media Library.

3. Applied semantic CSS classes in Spectra

   • Added the following classes via Info Box → Advanced tab → Advanced → Additional CSS Class(es):
     • Added the same reusable class to both blocks: icon-cash-phone

4. Added custom CSS

   .icon-cash-phone .uagb-ifb-image-content {
     width: 120px;
     height: 120px;
     background-color: #ffffff;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
   }
   
   .icon-cash-phone .uagb-ifb-image-content img {
     filter: brightness(0) saturate(100%) invert(77%) sepia(63%) saturate(504%) hue-rotate(6deg) brightness(93%) contrast(96%);
   }
   
   .icon-cash-phone .uagb-ifb-image-content img {
     transition: transform 0.1s ease;
   }
   
   .icon-cash-phone:hover .uagb-ifb-image-content img {
     transform: rotate(-10deg);
   }

CSS Description

The added CSS creates a reusable 120px circular white background for Spectra Info Box icons, recolors SVG icons to the required yellow using CSS filters, and applies a subtle left-rotation animation on hover.