@import 'variables';
@import 'mixins';


body.controller-tracks.action-show,
body.controller-my-tracks.action-show {
    footer {
        margin-top:0;
    }
}


#my-track-page,
#track-page,
#track-maintainers-page,
#track-mentors-page,
#exercises-page,
#my-track-not-joined-page {
    .header {
        background-image:image-url('background-overlay-2.png');
        background-size:cover;
        padding:0 0 35px;
        .visual-section {
            position: relative;
            padding-top:20px;
            overflow:hidden;
            .line {
                position:absolute;
                top:73px;
                left:0;
                right:0;
                background:white;
                height:2px;
            }
            .logo {
                position:relative;
                display:block;
                float:right;
                height:107px;
                margin-left:50px;
            }

        }
        h1 {
            padding-top:20px;
            @include font-size(40, 40);
            @include header-font;
            font-weight:700;
            letter-spacing:-0.56px;
            margin-bottom:5px;
            color:#fff;
        }
    }
}

#track-page,
#track-maintainers-page,
#track-mentors-page,
#my-track-not-joined-page {
    .header {
        background-color: $header-color-2;
        h1 {
            margin-bottom:10px;
            color:#fff;
        }
        .h1-subtitle {
            @include width-medium() {
                max-width:70%;
            }

            @include font-size(16, 21);
            color:#fff;
            font-weight:$fw-regular;
            clear:left;
        }

        .pure-button {
            margin-top:20px;
            @include width-medium() {
                float:right;
                margin-top:0;
                margin-bottom:0;
                margin-left: 60px;
                margin-bottom: 20px;
            }
            border:1px solid #fff;
            @include font-size(15, 15);
            font-weight:$regular;
            border-radius:2px;
            background:#00bac9;
            padding:12px 35px;
            color:#fff;

            background:$color-3;
            color:#fff;
        }
    }
    .overview-section {
        background:#fafafa;
        padding:30px 0;
        border-bottom:1px solid #eee;
        .pure-u-md-1-3 {
            overflow:hidden;
            margin-top:15px;
            margin-bottom:15px;
            @include width-medium() {
                padding-left:30px;
                padding-right:30px;
                &:first-child {
                    padding-left:0;
                    padding-right:60px;
                }
                &:last-child {
                    padding-left:60px;
                    padding-right:0;
                }
            }
        }
        .icon {
            padding:15px 15px 15px 0;
            float:left;
            width:60px;
            border-right:3px solid #ececec;
            margin-right:15px;
            img {
                display:block;
                height:40px;
            }
        }
        h3 {
            font-weight:$regular;
            margin-bottom:5px;
            @include font-size(15, 15);
            color:#666;
            letter-spacing:-0.7px;
        }
        .info {
            @include font-size(12, 17);
            font-weight:$regular;
            color:#888;
            margin-left:75px;
        }
    }
    .about-section {
        padding:60px 0;
        .about {
            text-align:justify;
        }

        .code-sample {
            @include width-medium() {
                display:block;
                float:right;
                margin:0 0 20px 50px;
            }
            display:none;
            margin-top:35px;
            background-image:image-url("code-sample-frame.png");
            background-size:contain;
            background-repeat:no-repeat;
            padding:28px 6px;
            height:200px;
            width: 258px;

            pre {
                @include font-size(10, 13);
                padding:10px 10px;
                height:151px;
                margin:0;
                border-radius: 0 0 9px 9px;
            }
            img {
                display:block;
                width:100%;
            }
        }

        h2 {
            @include font-size(22, 22);
            font-weight:$regular;
            margin-bottom:15px;
        }
        p {
            @include font-size(15, 21);
            color:#555;
            margin-bottom:12px;
            font-weight:$fw-regular;
            a {
                color:#555;
                text-decoration:underline;
                font-weight:$fw-regular;
            }
        }
        .pure-button {
            margin-top:15px;
            background:#fff;
            border:1px solid $color-2;
            color:$color-2;

            padding:15px 30px;
            @include font-size(15, 15);
            font-weight:$regular;
            &:hover {
            }
        }
    }

    .testimonal-section {
        padding:70px 0;
        border:solid #eee;
        border-width:1px 0;
        background-image:image-url("hex-background.png");
        background-size:50px;
        background-repeat:repeat;
        background-position:-10px;

        .frame {
            position:relative;
            border:1px solid $color-2;
            padding:50px 30px 30px 30px;
            background:#fff;
            max-width:650px;
            margin:0 auto;
            border-radius:5px;
            img {
                position:absolute;
                top:-21px;
                left:50%;
                content: "";
                background:$color-2;
                border-radius:2px;
                width:42px;
                height:42px;
                margin:0 0 0 -20px;
                padding:13px 10px;
            }
            h2 {
                text-align:center;
                @include font-size(16, 18);
                color:#333;
                font-weight:$regular;
                margin-bottom:10px;
            }
            p {
                text-align:center;
                @include font-size(14, 19);
                margin-bottom:10px;
            }
            .byline {
                text-align:center;
                @include font-size(12, 14);
                font-weight:$regular;
                color:#aaa;
            }


        }
    }
    .mentors-section,
    .exercises-section,
    .maintainers-section {
        padding:70px 0;
        border-bottom:1px solid #eee;

        .h2-subtitle {
            text-align:center;
            font-style:italic;
            color:#999;
            @include font-size(16, 16);
            margin-bottom:10px;
        }
        h2 {
            text-align:center;
            @include font-size(26, 26);
            font-weight:$bold;
            margin-bottom:15px;
        }
        p {
            text-align:center;
            @include font-size(14, 19);
            max-width:600px;
            margin: 0 auto 30px auto;
            a {
                color:#333;
            }
        }
    }

    .mentors-section,
    .maintainers-section {
        .mentors, .maintainers {
            max-width:1000px;
            margin: 0 auto 0 auto;
        }
        .pure-g.mentors,
        .pure-g.maintainers {
            &>.pure-u-1 {
                margin-bottom:20px;
                @include width-medium() {
                    &:nth-child(odd) {
                        padding-right:10px;
                    }
                    &:nth-child(even) {
                        padding-left:10px;
                    }
                }
            }
            .widget-maintainer, .widget-mentor {
                height:100%;
            }
        }
    }
    .exercises-section {
        background:#fafafa;
        p {
            max-width:700px;
        }
        .widget-side-exercise {
            border-color:#ddd;
            .title {
                color:#555;
            }
            .status {
                display:none;
            }
            &:hover {
                background:#fff;
                border-color:#ddd;
            }
        }
    }
    .cta-section {
        background:$color-2;
        padding:60px 0;
        h2 {
            color:#fff;
            text-align:center;
            @include font-size(17, 17);
            font-weight:$fw-regular;
            margin-bottom:20px;
        }
        .pure-button {
            border:1px solid #fff;
            font-weight:$regular;
            border-radius:2px;
            background:#00bac9;
            padding:12px 35px;
            @include font-size(16, 16);
            margin:0 auto;
            display:block;
            width:280px;
            max-width:100%;
            color:#fff;
        }
    }
}

#track-maintainers-page,
#track-mentors-page {
    .header {
        margin-bottom:30px;
    }
    .pure-g.people {
        &>.pure-u-1 {
            margin-bottom:20px;
            &:nth-child(odd) {
                padding-right:10px;
            }
            &:nth-child(even) {
                padding-left:10px;
            }
        }
        .widget-maintainer, .widget-mentor {
            height:100%;

            img {
                filter:none;
            }
            .bio {
                color:#555;
                @include font-size(14, 20);
                letter-spacing:-0.3px;
            }
        }
    }
}
