/* =========================================================
PROJECT: Walanda platform
FILE: press.css
PATH: /src/modules/platform/css/press.css
MODULE: platform
SCOPE: styling (global / component / page)
PURPOSE: press page styles
AUTHOR: Simasiku Nasilele
STANDARD: Walanda pro ui system
VERSION: 1.0.0
LAST UPDATED: 2026
========================================================= */

*,
                *::before,
                *::after {
                    box-sizing: border-box;
                    margin: 0;
                    padding: 0;
                }

                img {
                    max-width: 100%;
                    display: block;
                }

                button {
                    font-family: inherit;
                }

                /* ================================
                                GLOBAL / VARIABLES
                        ================================ */


                /* =========================================================
                                ROOT VARIABLES (DESIGN TOKENS)
                        ========================================================= */

                :root {
                    /* BRAND */
                    --primary: #1FA78A;
                    --primary-hover: #168f77;
                    /* BACKGROUND */
                    --background: #F4F7F8;
                    --card: #FFFFFF;
                    /* TEXT */
                    --text-dark: #2D3A3A;
                    --muted: #6B7C7C;
                    /* BORDER */
                    --border: #E6ECEC;
                    /* SHADOW */
                    --shadow-sm: 0 2px 6px rgba(0,0,0,0.05);
                    --shadow-md: 0 6px 18px rgba(0,0,0,0.08);
                    /* RADIUS */
                    --radius-sm: 6px;
                    --radius-md: 10px;
                    /* SPACING SYSTEM */
                    --space-xs: 4px;
                    --space-sm: 8px;
                    --space-md: 16px;
                    --space-lg: 32px;
                    --space-xl: 56px;
                }

                /* =========================================================
                                BASE BODY
                        ========================================================= */

                body {
                    font-family: "Inter","Segoe UI",sans-serif;
                    background: var(--background);
                    color: var(--text-dark);
                    -webkit-font-smoothing: antialiased;
                }


                /* =========================================================
                                FORM FOUNDATION (GLOBAL)
                        ========================================================= */

                input,
                textarea,
                select {
                    width: 100%;
                    padding: 12px;
                    border-radius: var(--radius-sm);
                    border: 1px solid var(--border);
                    font-size: 14px;
                }

                    input:focus,
                    textarea:focus,
                    select:focus {
                        border-color: var(--primary);
                        outline: none;
                    }

                /* =========================================================
                                SPACING UTILITIES
                        ========================================================= */

                .mt-sm {
                    margin-top: var(--space-sm);
                }

                .mt-md {
                    margin-top: var(--space-md);
                }

                .mt-lg {
                    margin-top: var(--space-lg);
                }

                .mb-sm {
                    margin-bottom: var(--space-sm);
                }

                .mb-md {
                    margin-bottom: var(--space-md);
                }

                .mb-lg {
                    margin-bottom: var(--space-lg);
                }

                /* =========================================================
                                SCROLL BEHAVIOR
                        ========================================================= */

                html {
                    scroll-behavior: smooth;
                }

                /* =========================================================
                                NAVBAR BASE
                        ========================================================= */

                .topnav {
                    position: sticky;
                    top: 0;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    padding: 18px 60px;
                    background: white;
                    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            z-index: 1000;
        }

                /* =========================================================
                                LOGO
                        ========================================================= */

                .logo img {
                    height: 50px;
                }


                /* =========================================================
                                NAV LINKS
                        ========================================================= */

                #nav-menu {
                    display: flex;
                    align-items: center;
                }

                    #nav-menu a {
                        margin: 0 15px;
                        text-decoration: none;
                        color: var(--text-dark); /* FIXED */
                        font-size: 14px;
                        transition: 0.2s;
                    }

                        #nav-menu a:hover {
                            color: var(--primary);
                        }


                    /* =========================================================
                                    AUTH BUTTONS
                            ========================================================= */

                    #nav-menu .login {
                        background: var(--primary);
                        color: white;
                        padding: 8px 18px;
                        border-radius: var(--radius-sm);
                    }

                        #nav-menu .login:hover {
                            background: var(--primary-hover);
                        }

                    #nav-menu .register {
                        margin-left: 10px;
                        border: 1px solid var(--border);
                        padding: 8px 18px;
                        border-radius: var(--radius-sm);
                    }

                        #nav-menu .register:hover {
                            background: var(--primary);
                            color: white;
                        }


                /* =========================================================
                                    MOBILE MENU
                        ========================================================= */

                .menu-toggle {
                    display: none;
                    font-size: 26px;
                    cursor: pointer;
                }


                /* =========================================================
                                RESPONSIVE
                        ========================================================= */

                @media (max-width: 900px) {

                    .topnav {
                        padding: 15px 30px;
                    }

                    #nav-menu {
                        position: absolute;
                        top: 80px;
                        right: 0;
                        background: white;
                        flex-direction: column;
                        display: none;
                        padding: 25px;
                        box-shadow: 0 10px 25px rgba(0,0,0,0.1);
                        width: 260px;
                        border-radius: 8px;
                    }

                        #nav-menu a {
                            display: block;
                            margin: 12px 0;
                        }

                        #nav-menu.active {
                            display: flex;
                        }

                    .menu-toggle {
                        display: block;
                    }
                }


                /* =========================================================
                                FOOTER BASE
                        ========================================================= */

                .walanda-footer {
                    background: linear-gradient(180deg, #3AA49B, #2F8F83);
                    color: white;
                    padding: 30px 0 20px;
                }

                /* =========================================================
                                DIVIDER
                        ========================================================= */

                .footer-divider {
                    height: 2px;
                    background: rgba(255,255,255,0.35);
                    width: 100%;
                    margin-bottom: 25px;
                }

                /* =========================================================
                                WRAPPER
                        ========================================================= */

                .footer-wrapper {
                    max-width: 1200px;
                    margin: auto;
                    padding: 0 30px;
                }

                /* =========================================================
                                LOGO
                        ========================================================= */

                .footer-logo {
                    margin-bottom: 20px;
                }

                .footer-logo-img {
                    height: 60px;
                }

                /* =========================================================
                                GRID
                        ========================================================= */

                .footer-grid {
                    display: grid;
                    grid-template-columns: repeat(6, 1fr);
                    gap: 25px;
                }

                /* =========================================================
                                COLUMNS
                        ========================================================= */

                .footer-col h4 {
                    font-size: 15px;
                    margin-bottom: 12px;
                    color: white;
                }

                .footer-col p,
                .footer-col a {
                    display: block;
                    font-size: 13px;
                    color: #d7eeee;
                    margin-bottom: 6px;
                    text-decoration: none;
                }

                    .footer-col a:hover {
                        color: white;
                    }

                /* =========================================================
                                COLUMN SEPARATOR
                        ========================================================= */

                .border-left {
                    border-left: 1px solid rgba(255,255,255,0.15);
                    padding-left: 18px;
                }


                /* =========================================================
                                SOCIAL ICONS
                        ========================================================= */

                .social-icons {
                    display: flex;
                    gap: 10px;
                    margin-top: 10px;
                }

                    .social-icons a {
                        width: 32px;
                        height: 32px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        background: white;
                        color: #0c4f52;
                        border-radius: 50%;
                        font-size: 13px;
                    }


                /* =========================================================
                                BOTTOM
                         ========================================================= */

                .footer-bottom {
                    text-align: right;
                    margin-top: 25px;
                    font-size: 13px;
                    color: #cdeeee;
                }


                /* =========================================================
        BASE
        ========================================================= */
                :root {
                    --primary: #1fa78a;
                    --border: #e5e7eb;
                    --bg: #f9fafb;
                    --text: #374151;
                    --muted: #6b7280;
                }

                /* =========================================================
        HERO
        ========================================================= */
                .press-hero {
                    text-align: center;
                    padding: 100px 20px;
                    background: linear-gradient( 135deg, rgba(31,167,138,0.1), rgba(31,167,138,0.02) );
                }

                    .press-hero h1 {
                        font-size: 40px;
                        color: var(--primary);
                        margin-bottom: 10px;
                    }

                    .press-hero p {
                        max-width: 650px;
                        margin: auto;
                        color: var(--muted);
                        line-height: 1.6;
                    }

                /* =========================================================
        ABOUT SECTION
        ========================================================= */
                .press-about {
                    padding: 70px 20px;
                    background: white;
                }

                .press-container {
                    max-width: 800px;
                    margin: auto;
                    text-align: center;
                }

                    .press-container h2 {
                        margin-bottom: 15px;
                    }

                    .press-container p {
                        color: var(--text);
                        line-height: 1.7;
                        font-size: 15px;
                    }

                /* =========================================================
        PRESS RELEASES
        ========================================================= */
                .press-releases {
                    padding: 80px 20px;
                    background: var(--bg);
                    text-align: center;
                }

                    .press-releases h2 {
                        margin-bottom: 30px;
                    }

                /* GRID */
                .press-grid {
                    max-width: 1100px;
                    margin: auto;
                    display: grid;
                    grid-template-columns: repeat(3, 1fr);
                    gap: 20px;
                }

                .platform-inline-ad {
                    max-width: 1100px;
                    margin: 0 auto 28px;
                }

                /* =========================================================
        CARD
        ========================================================= */
                .press-card {
                    background: white;
                    padding: 25px;
                    border-radius: 12px;
                    border: 1px solid var(--border);
                    text-align: left;
                    transition: 0.25s ease;
                }

                    .press-card:hover {
                        transform: translateY(-6px);
                        box-shadow: 0 12px 30px rgba(0,0,0,0.08);
                    }

                    /* TITLE */
                    .press-card h3 {
                        margin-bottom: 10px;
                        font-size: 18px;
                    }

                    /* TEXT */
                    .press-card p {
                        font-size: 14px;
                        color: var(--muted);
                        line-height: 1.5;
                    }

                    /* DATE */
                    .press-card span {
                        display: block;
                        margin-top: 12px;
                        font-size: 12px;
                        color: #9ca3af;
                    }

                    /* LINK */
                    .press-card a {
                        display: inline-block;
                        margin-top: 12px;
                        font-size: 13px;
                        font-weight: 500;
                        color: var(--primary);
                        text-decoration: none;
                        transition: 0.2s ease;
                    }

                        .press-card a:hover {
                            text-decoration: underline;
                            transform: translateX(4px);
                        }

                /* =========================================================
        RESPONSIVE
        ========================================================= */
                @media (max-width: 900px) {

                    .press-grid {
                        grid-template-columns: 1fr 1fr;
                    }
                }

                @media (max-width: 600px) {

                    .press-grid {
                        grid-template-columns: 1fr;
                    }

                    .press-hero h1 {
                        font-size: 30px;
                    }
                }

/* =========================================================
END OF FILE
FILE: press.css
PATH: /src/modules/platform/css/press.css
MODULE: platform
STATUS: stable
MAINTAINED BY: Walanda core system
COPYRIGHT: © 2026 Walanda Inc. Ltd. All rights reserved.
========================================================= */