کانتینر خط و دایره/نعمتی - فراغیب


<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>مراحل ثبت سفارش چاپ و تبلیغات</title>

<meta name="description"
content="مراحل ثبت سفارش خدمات چاپ و تبلیغات؛ از انتخاب خدمات و مشخصات تا ارسال فایل، تأیید سفارش و چاپ نهایی.">

<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">

<style>

/* =========================================================
   تنظیمات اصلی
   فقط رنگ‌ها را از این قسمت تغییر دهید
========================================================= */

:root {

    /* رنگ خطوط سبز */
    --main-green: #20b957;

    /* رنگ آیکون‌ها */
    --icon-color: #ffb900;

    /* رنگ عنوان اصلی */
    --title-color: #777777;

    /* رنگ عنوان مراحل */
    --text-color: #666666;

    /* رنگ توضیحات */
    --description-color: #999999;

    /* رنگ پس زمینه */
    --section-bg: #ffffff;

    /* رنگ داخل دایره */
    --circle-bg: #ffffff;

    /* حلقه خاکستری */
    --inner-ring: #e9e9e9;

    /* سایه */
    --shadow-color: rgba(0,0,0,.12);

    /* ضخامت خط سبز */
    --line-width: 2px;

    /* =====================================================
       اندازه دایره‌ها کاملاً ریسپانسیو
    ===================================================== */

    --circle-size: clamp(
        145px,
        16vw,
        225px
    );

    /* اندازه آیکون */
    --icon-size: clamp(
        38px,
        3.5vw,
        52px
    );

    /* اندازه عنوان */
    --step-title-size: clamp(
        13px,
        1.25vw,
        17px
    );

    /* فاصله بین عنوان و آیکون */
    --icon-margin: clamp(
        7px,
        1vw,
        12px
    );
}


/* =========================================================
   RESET
========================================================= */

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

html {
    scroll-behavior: smooth;
}

body {
    direction: rtl;
    margin: 0;
    padding: 0;
    background: #fff;
    font-family: Tahoma, Arial, sans-serif;
}


/* =========================================================
   بخش اصلی
========================================================= */

.order-process {

    width: 100%;

    padding-top: clamp(22px, 3vw, 35px);

    padding-right: clamp(8px, 2vw, 25px);
    padding-left: clamp(8px, 2vw, 25px);

    padding-bottom: clamp(35px, 5vw, 55px);

    background: var(--section-bg);

    /* جلوگیری از ایجاد اسکرول افقی */
    overflow: hidden;
}


/* =========================================================
   عنوان
========================================================= */

.order-process-title {
    width: 100%;
    text-align: center;
    margin-bottom: clamp(
        25px,
        4vw,
        45px
    );
}

.order-process-title h2 {
    color: var(--title-color);
    font-size: clamp(
        21px,
        2.5vw,
        30px
    );

    line-height: 1.6;
    font-weight: 700;
}

.order-process-title p {

    margin-top: clamp(
        3px,
        .6vw,
        7px
    );

    color: var(--description-color);

    font-size: clamp(
        11px,
        1vw,
        14px
    );

    line-height: 1.7;
}


/* =========================================================
   کانتینر مراحل
========================================================= */

.process-container {

    width: 100%;

    max-width: 1450px;

    margin: 0 auto;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: clamp(
        45px,
        7vw,
        70px
    );
}


/* =========================================================
   هر مرحله
========================================================= */

.process-step {

    position: relative;

    width: var(--circle-size);
    height: var(--circle-size);

    flex: 0 0 auto;

    display: flex;

    align-items: center;
    justify-content: center;

    z-index: 2;
}


/* =========================================================
   دایره اصلی
========================================================= */

.step-circle {

    width: 100%;
    height: 100%;

    position: relative;

    border: var(--line-width) solid var(--main-green);

    border-radius: 50%;

    background: var(--circle-bg);

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    box-shadow:
        0 clamp(8px, 1vw, 14px)
        clamp(12px, 1.6vw, 22px)
        var(--shadow-color);

    z-index: 3;
}


/* =========================================================
   حلقه خاکستری داخل دایره
========================================================= */

.step-circle::before {

    content: "";

    position: absolute;

    inset: clamp(
        5px,
        .6vw,
        8px
    );

    border:

        clamp(
            3px,
            .35vw,
            5px
        )

        solid var(--inner-ring);

    border-radius: 50%;

    pointer-events: none;
}


/* =========================================================
   آیکون
========================================================= */

.step-icon {

    width: clamp(
        55px,
        6vw,
        78px
    );

    height: clamp(
        55px,
        6vw,
        78px
    );

    display: flex;

    align-items: center;
    justify-content: center;

    color: var(--icon-color);

    font-size: var(--icon-size);

    margin-bottom: var(--icon-margin);

    flex-shrink: 0;

    /* هیچ حرکت یا انیمیشنی ندارد */
    transform: none;

    transition: none;

    animation: none;
}


/* =========================================================
   متن مرحله
========================================================= */

.step-content {

    position: relative;

    z-index: 4;

    width: 100%;

    padding-left: clamp(
        10px,
        1.5vw,
        20px
    );

    padding-right: clamp(
        10px,
        1.5vw,
        20px
    );

    text-align: center;
}

.step-content h3 {

    color: var(--text-color);

    font-size: var(--step-title-size);

    font-weight: 700;

    line-height: 1.7;

    white-space: normal;
}

.step-content p {

    margin-top: 3px;

    color: var(--description-color);

    font-size: clamp(
        9px,
        .8vw,
        12px
    );

    line-height: 1.6;
}


/* =========================================================
   خطوط اتصال موبایل
========================================================= */

.process-step:not(:last-child)::after {

    content: "";

    position: absolute;

    width: clamp(
        35px,
        12vw,
        55px
    );

    height: clamp(
        40px,
        12vw,
        65px
    );

    left: 50%;

    bottom: clamp(
        -55px,
        -7vw,
        -40px
    );

    transform: translateX(-50%);

    border-left:
        var(--line-width)
        solid
        var(--main-green);

    border-right:
        var(--line-width)
        solid
        var(--main-green);

    border-radius: 40px;

    z-index: 1;
}


/* =========================================================
   نقطه اتصال موبایل
========================================================= */

.process-step:not(:last-child)::before {

    content: "";

    position: absolute;

    width: clamp(
        7px,
        1.2vw,
        10px
    );

    height: clamp(
        7px,
        1.2vw,
        10px
    );

    left: calc(50% + 20px);

    bottom: clamp(
        -61px,
        -7.8vw,
        -48px
    );

    background: var(--section-bg);

    border:
        2px solid
        var(--main-green);

    border-radius: 50%;

    z-index: 5;
}


/* =========================================================
   TABLET و DESKTOP
========================================================= */

@media (min-width: 768px) {

    .process-container {

        flex-direction: row;

        align-items: center;

        justify-content: space-between;

        /*
        فاصله صفر است تا 5 دایره
        دقیقاً داخل عرض قرار بگیرند
        */
        gap: 0;

        padding-left: 0;
        padding-right: 0;
    }


    .process-step {

        /*
        هر مرحله 20 درصد فضای موجود
        را در اختیار دارد
        */
        width: 20%;

        height: auto;

        aspect-ratio: 1 / 1;

        max-width: var(--circle-size);

        /*
        جلوگیری از بیرون رفتن دایره
        */
        flex: 0 1 var(--circle-size);
    }


    /* =====================================================
       خط اتصال افقی
    ===================================================== */

    .process-step:not(:last-child)::after {

        width: clamp(
            45px,
            7vw,
            100px
        );

        height: clamp(
            45px,
            5.5vw,
            75px
        );

        /*
        خط از لبه دایره به سمت دایره بعدی
        */

        top: 50%;

        right: clamp(
            -55px,
            -5vw,
            -35px
        );

        left: auto;

        bottom: auto;

        transform: translateY(-50%);

        border-left: 0;

        border-right: 0;

        border-top:
            var(--line-width)
            solid
            var(--main-green);

        border-bottom:
            var(--line-width)
            solid
            var(--main-green);

        border-radius: 50px;

        z-index: 1;
    }


    /* =====================================================
       نقطه اتصال دسکتاپ
    ===================================================== */

    .process-step:not(:last-child)::before {

        width: clamp(
            7px,
            .7vw,
            10px
        );

        height: clamp(
            7px,
            .7vw,
            10px
        );

        top: 50%;

        right: clamp(
            -7px,
            -.5vw,
            -4px
        );

        left: auto;

        bottom: auto;

        transform: translateY(-50%);

        background: var(--section-bg);

        border:
            2px solid
            var(--main-green);

        z-index: 5;
    }
}


/* =========================================================
   دسکتاپ متوسط
   768 تا 1100
========================================================= */

@media (min-width: 768px) and (max-width: 1100px) {

    :root {

        --circle-size: clamp(
            140px,
            17vw,
            175px
        );

        --icon-size: clamp(
            32px,
            4vw,
            42px
        );

        --step-title-size: clamp(
            11px,
            1.4vw,
            14px
        );
    }


    .process-container {

        max-width: 100%;

        padding-left: 8px;
        padding-right: 8px;
    }


    .process-step:not(:last-child)::after {

        width: clamp(
            35px,
            5vw,
            60px
        );

        right: clamp(
            -32px,
            -4vw,
            -25px
        );
    }

}


/* =========================================================
   دسکتاپ بزرگ
   بالای 1100
========================================================= */

@media (min-width: 1101px) {

    :root {

        --circle-size: clamp(
            180px,
            16vw,
            225px
        );
    }

    .process-container {

        max-width: 1400px;
    }

}


/* =========================================================
   مانیتورهای خیلی بزرگ
========================================================= */

@media (min-width: 1500px) {

    :root {

        --circle-size: 225px;

        --icon-size: 52px;

        --step-title-size: 17px;
    }

    .process-container {

        max-width: 1400px;
    }

}


/* =========================================================
   موبایل
========================================================= */

@media (max-width: 767px) {

    .process-container {

        width: 100%;

        max-width: 100%;

        gap: clamp(
            40px,
            9vw,
            60px
        );
    }


    .process-step {

        width: var(--circle-size);

        height: var(--circle-size);

        max-width: none;

        aspect-ratio: auto;
    }


    /* در موبایل توضیحات مخفی می‌شوند */

    .step-content p {
        display: none;
    }


    .step-content h3 {

        font-size: clamp(
            14px,
            4vw,
            17px
        );
    }


    .step-icon {

        font-size: clamp(
            38px,
            11vw,
            48px
        );
    }

}


/* =========================================================
   موبایل کوچک
========================================================= */

@media (max-width: 380px) {

    :root {

        --circle-size: 190px;
    }

    .order-process {

        padding-right: 5px;
        padding-left: 5px;
    }

}


/* =========================================================
   جلوگیری از حرکت و افکت ناخواسته
========================================================= */

.step-circle,
.step-icon,
.step-circle *,
.process-step {

    transition: none !important;

    animation: none !important;
}


/* =========================================================
   دسترسی بهتر
========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        scroll-behavior: auto !important;

        animation: none !important;

        transition: none !important;
    }
}

/* کاهش فاصله بالا و پایین فقط در دسکتاپ */
@media (min-width: 768px) {

    .order-process {
        padding-top: 8px;
        padding-bottom: 15px;
    }

}

</style>
</head>


<body>


<!-- =======================================================
     مراحل ثبت سفارش چاپ و تبلیغات
======================================================= -->

<section
    class="order-process"
    aria-labelledby="order-process-title">


    <!-- عنوان بخش -->

    <header class="order-process-title">

        <h2 id="order-process-title">
            مراحل ثبت سفارش چاپ و تبلیغات
        </h2>

        <p>
            سفارش خدمات چاپ و تبلیغات در چند مرحله ساده
        </p>

    </header>


    <!-- مراحل -->

    <div class="process-container">


        <!-- ===============================================
             مرحله 1
        ================================================ -->

        <article
            class="process-step"
            aria-label="مرحله اول انتخاب خدمات چاپ">

            <div class="step-circle">

                <div
                    class="step-icon"
                    aria-hidden="true">

                    <i class="fa-solid fa-print"></i>

                </div>

                <div class="step-content">

                    <h3>
                        انتخاب خدمات چاپ
                    </h3>


                </div>

            </div>

        </article>


        <!-- ===============================================
             مرحله 2
        ================================================ -->

        <article
            class="process-step"
            aria-label="مرحله دوم انتخاب مشخصات سفارش">

            <div class="step-circle">

                <div
                    class="step-icon"
                    aria-hidden="true">

                    <i class="fa-solid fa-list-check"></i>

                </div>

                <div class="step-content">

                    <h3>
                        انتخاب مشخصات
                    </h3>


                </div>

            </div>

        </article>


        <!-- ===============================================
             مرحله 3
        ================================================ -->

        <article
            class="process-step"
            aria-label="مرحله سوم ارسال فایل چاپی">

            <div class="step-circle">

                <div
                    class="step-icon"
                    aria-hidden="true">

                    <i class="fa-solid fa-file-arrow-up"></i>

                </div>

                <div class="step-content">

                    <h3>
                        ارسال فایل چاپی
                    </h3>

                    

                </div>

            </div>

        </article>


        <!-- ===============================================
             مرحله 4
        ================================================ -->

        <article
            class="process-step"
            aria-label="مرحله چهارم تایید سفارش">

            <div class="step-circle">

                <div
                    class="step-icon"
                    aria-hidden="true">

                    <i class="fa-solid fa-clipboard-check"></i>

                </div>

                <div class="step-content">

                    <h3>
                        تأیید سفارش
                    </h3>

                    

                </div>

            </div>

        </article>


        <!-- ===============================================
             مرحله 5
        ================================================ -->

        <article
            class="process-step"
            aria-label="مرحله پنجم چاپ و تحویل سفارش">

            <div class="step-circle">

                <div
                    class="step-icon"
                    aria-hidden="true">

                    <i class="fa-solid fa-box-open"></i>

                </div>

                <div class="step-content">

                    <h3>
                        چاپ و تحویل سفارش
                    </h3>

                    
                </div>

            </div>

        </article>


    </div>

</section>


</body>
</html>