adxutil/templates/adp/matter/demo/css/styles.css

Utilities tools for Askia Design eXtension

/* GLOBAL */

@font-face {
    font-family: "MaxWeb W03 Bold";
    src: url("../fonts/1473505/3b6337cb-ced4-4f27-ba0c-67b550af684c.eot?#iefix");
    src: url("../fonts/1473505/3b6337cb-ced4-4f27-ba0c-67b550af684c.eot?#iefix") format("eot"), url("../fonts/1473505/34a13c15-03de-494c-9915-9d50368b62f7.woff2") format("woff2"), url("../fonts/1473505/f35356b4-0a2b-4f0a-940c-04b07d5e57f4.woff") format("woff"), url("../fonts/1473505/aceb04aa-c4a2-4d9e-88ee-1e37db03b0d9.ttf") format("truetype");
}

@font-face {
    font-family: "MaxWeb W03 BoldItalic";
    src: url("../fonts/1473507/be521e3e-53f0-44a6-b96a-48dbb5f11f1b.eot?#iefix");
    src: url("../fonts/1473507/be521e3e-53f0-44a6-b96a-48dbb5f11f1b.eot?#iefix") format("eot"), url("../fonts/1473507/3a4bd47b-73a1-4d41-b7d6-e53e4ace8c65.woff2") format("woff2"), url("../fonts/1473507/931360e4-a39a-407f-bd86-9d9ad3bdf772.woff") format("woff"), url("../fonts/1473507/a20c5b49-23e0-4e08-b189-072bc5094fe2.ttf") format("truetype");
}

@font-face {
    font-family: "MaxWeb W03 Extlight";
    src: url("../fonts/1473553/597ac5eb-dd38-4364-8de1-e589bf7f4949.eot?#iefix");
    src: url("../fonts/1473553/597ac5eb-dd38-4364-8de1-e589bf7f4949.eot?#iefix") format("eot"), url("../fonts/1473553/5c5c228f-c044-468e-afc1-80a900347091.woff2") format("woff2"), url("../fonts/1473553/b8a65fd3-f1e2-45e2-947d-f9d678e52aaa.woff") format("woff"), url("../fonts/1473553/2ab56e75-d787-4022-9743-8a45cd960c42.ttf") format("truetype");
}

@font-face {
    font-family: "MaxWeb W03 ExtlightItalic";
    src: url("../fonts/1473555/08ea1a58-f0d9-4a08-b4c8-8cd3f64b0561.eot?#iefix");
    src: url("../fonts/1473555/08ea1a58-f0d9-4a08-b4c8-8cd3f64b0561.eot?#iefix") format("eot"), url("../fonts/1473555/a5ac070a-246c-4f56-8d14-bbf90d58107a.woff2") format("woff2"), url("../fonts/1473555/1af7231b-f327-4514-97bf-e1b2903edfdb.woff") format("woff"), url("../fonts/1473555/8cb010d0-43fb-4a1c-a1e0-e67a22d1fa70.ttf") format("truetype");
}

@font-face {
    font-family: "MaxWeb W03 Italic";
    src: url("../fonts/1473565/82d8aa2e-b825-416e-b630-a052fb972874.eot?#iefix");
    src: url("../fonts/1473565/82d8aa2e-b825-416e-b630-a052fb972874.eot?#iefix") format("eot"), url("../fonts/1473565/b67337eb-22a7-4045-84f3-29fc00f0a75b.woff2") format("woff2"), url("../fonts/1473565/56d69f87-a39a-4b1a-990d-d37cfeaa8551.woff") format("woff"), url("../fonts/1473565/8b487af7-f85a-44bc-a8ca-d4aaa09bb0b9.ttf") format("truetype");
}

@font-face {
    font-family: "MaxWeb W03 Regular";
    src: url("../fonts/1473571/86f1717d-6131-4d33-890c-a13f87614fdd.eot?#iefix");
    src: url("../fonts/1473571/86f1717d-6131-4d33-890c-a13f87614fdd.eot?#iefix") format("eot"), url("../fonts/1473571/d7b9b6a1-50cd-4941-b856-413b003f6334.woff2") format("woff2"), url("../fonts/1473571/f601f169-e055-4d08-b6ea-1562e76cb1ed.woff") format("woff"), url("../fonts/1473571/97dcdd6b-7c3f-475d-bad6-f8e32cf0c63e.ttf") format("truetype");
}

body, html {
    font-family: "MaxWeb W03 Regular", sans-serif;
    font-size: 16px;
    color: #FFF;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale;
    text-shadow: none;
    text-rendering: optimizeLegibility !important;
}

body {
    display: flex;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    flex-direction: column;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: stretch;
    align-content: center;
    background: #FFF;
    min-height: 100vh;
}

::selection {
    background: #283B49;
    color: #FFF;
}

::-moz-selection {
    background: #283B49;
    color: #FFF;
}

::-webkit-input-placeholder {
    color: #AAA;
    font-family: "MaxWeb W03 Regular", sans-serif;
}
::-moz-placeholder {
    color: #AAA;
    font-family: "MaxWeb W03 Regular", sans-serif;
}
:-ms-input-placeholder {
    color: #AAA;
    font-family: "MaxWeb W03 Regular", sans-serif;
}
:-moz-placeholder {
    color: #AAA;
    font-family: "MaxWeb W03 Regular", sans-serif;
}

/* HEADER & RIBBON */

header.large {
    width: 100%;
    order: 1;
    flex: 0 0 100px;
    height: 100px;
    align-self: center;
    background: #FFF;
    color: #283B49;
    display: flex;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    flex-direction: row;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: stretch;
    align-content: center;
    transition: height ease-in .3s, box-shadow ease-in .3s;
}

header.fixed {
    position: fixed;
    top: 0;
    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, .14);
    z-index: 1;
    height: 70px;
}

header h2 {
    line-height: 2;
    padding: 0 0 0 1em;
    font-family: "MaxWeb W03 Bold", sans-serif;
    order: 1;
    flex: 0 0 auto;
    transition: line-height ease-in .3s;
}

header.fixed h2 {
    line-height: 1.2;
}

.ribbon {
    width: 100%;
    order: 2;
    flex: 0 0 20vh;
    align-self: center;
    background-color: #283B49;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}


/* PROGRESS BAR */

.progressWrapper {
    order: 2;
    flex: 0 0 auto;
    padding: 2.5em 1em 2.5em 0;
    transition: padding ease-in .3s;
}

header.fixed .progressWrapper {
    padding: 1.85em 1em 0 0;
}

.progress {
    background-color: #e5e9eb;
    height: .8em;
    position: relative;
    width: 14em;
    border-radius: .115em;
}

.progress-bar {
    background-color: #DF4335;
    height: 100%;
    position: relative;
    width: 7em;
    border-radius: .115em 0 0 .115em;
}


/* MAIN QUESTION CONTAINER */

.main {
    width: 100%;
    order: 3;
    flex: 1 1 60vh;
    align-self: center;
    overflow: visible;
    margin-top: -15vh;
}


/* QUESTION CAPTION */

.question {
    background: #FFF;
    border-radius: .115em;
    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12), 0 2px 4px -1px rgba(0, 0, 0, .2);
    width: calc(100% - 30vw);
    padding: 80px 56px;
    margin: 0 auto 80px auto;
    color: #283B49;
}

.question h3 {
    color: #DF4335;
    font-size: 1.3rem;
    font-family: "MaxWeb W03 Extlight", sans-serif;
    font-weight: normal;
    text-transform: uppercase;
}

.caption {
    font-size: 1.15rem;
}

.instruction {
    color: #AAA;
    font-family: "MaxWeb W03 Italic";
    margin-top: 2em;
}


/* RESPONSES */

.responses {
    margin: 3em 0;
}

.responses ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.responses ul li {
    margin: 1em 0;
}

label {
    cursor: pointer;
    font-size: 1.15rem;
    margin-left: .8em;
    vertical-align: middle;
    transition: color linear .17s;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

label:hover {
    color: #DF4335;
}

input[type=checkbox] {
    width: 1em;
    height: 1em;
    font-family: inherit;
    font-size: 2rem;
    vertical-align: middle;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    background: #fff;
    border-radius: .125em;
    box-sizing: border-box;
    border: .125em solid #AAA;
    box-shadow: inset 0 0 0 0 #DF4335;
    position: relative;
    cursor: pointer;
    animation: checkbox-1 .6s;
    transition: transform .3s cubic-bezier(.2, .3, 0, 1), box-shadow .3s cubic-bezier(.2, .3, 0, 1), border-color 0s linear .17s;
}

input[type=radio] {
    width: 1em;
    height: 1em;
    font-family: inherit;
    font-size: 2rem;
    vertical-align: middle;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    background: #fff;
    border-radius: 50%;
    box-sizing: border-box;
    border: .125em solid #AAA;
    box-shadow: inset 0 0 0 0 #DF4335;
    position: relative;
    cursor: pointer;
    animation: checkbox-1 .6s;
    transition: transform .3s cubic-bezier(.2, .3, 0, 1), box-shadow .3s cubic-bezier(.2, .3, 0, 1), border-color 0s linear .17s;
}

input[type=checkbox]:focus, input[type=radio]:focus {
    outline: none;
}

input[type=checkbox]:active, input[type=radio]:active {
    transform: scale(.8);
}

input[type=checkbox]:checked, input[type=radio]:checked {
    border-color: #DF4335;
    box-shadow: inset 0 0 0 .5em #DF4335;
    transition: transform .3s cubic-bezier(.2, .3, 0, 1), box-shadow .3s cubic-bezier(.2, .3, 0, 1), border-color 0s;
}

input[type=checkbox]:checked~label, input[type=radio]:checked~label {
    color: #DF4335;
}

input[type=checkbox]:before, input[type=checkbox]:after, input[type=radio]:before, input[type=radio]:after {
    content: '';
    background: #fff;
    height: 1em;
    width: 1em;
    position: absolute;
    transform: translate(.2728em, .4279em) rotate(44.91deg) scale(.3411, .1);
    transform-origin: 0 0;
    transition: transform .3s cubic-bezier(.2, .3, 0, 1), opacity .3s cubic-bezier(.2, .3, 0, 1);
    top: -.125em;
    left: -.125em;
}

input[type=checkbox]:after, input[type=radio]:after {
    transform: translate(.8494em, .35em) rotate(135.22deg) scale(.5612, .1);
}

input[type=checkbox]:not(:checked):before, input[type=radio]:not(:checked):before {
    transform: translate(.505em, .455em) rotate(44.91deg) scale(.1, .1);
}

input[type=checkbox]:not(:checked):after, input[type=radio]:not(:checked):after {
    transform: translate(.575em, .525em) rotate(135.22deg) scale(.1, .1);
}

@keyframes checkbox-1 {
    0% {
        transform: scale(0);
    }
    48% {
        transform: scale(1.2);
    }
}

.responses textarea {
    outline: none;
    padding: .75em;
    resize: vertical;
    width: 100%;
    border-radius: .125em;
    border: .1em solid #CCC;
    color: #283B49;
    transition: border cubic-bezier(.2, .3, 0, 1) .17s;
}

.responses textarea:hover {
    border: .1em solid #AAA;
}

.responses textarea:focus {
    border: .1em solid #DF4335;
}


/* NAVIGATION */

.navigation {
    text-align: center;
}

.btn:after {
    content: '';
    position: absolute;
    border-radius: 50%;
    height: 5em;
    width: 5em;
    top: -1.3em;
    left: 50%;
    margin-left: -2.5em;
    box-shadow: inset 0 0 0 5em rgba(255, 255, 255, 0.5);
    opacity: 0;
    transform: scale(0.2);
    transition: all 150ms cubic-bezier(0.25, 0.1, 0.25, 0.1);
}

.btn:focus:after {
    transform: scale(2);
    opacity: 1;
}

.keyframe:focus:after {
    animation: ripple 300ms linear forwards;
}

@keyframes ripple {
    0% {
        transform: scale(0.2);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

.btn {
    font-family: "MaxWeb W03 Bold";
    font-size: 1.3rem;
    cursor: pointer;
    position: relative;
    padding: 1em 2em;
    border: none;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    border-radius: .115em;
    background-clip: padding-box;
    margin: .5em;
    overflow: hidden;
    transition: all .3s cubic-bezier(0.25, 0.1, 0.25, 0.1);
}

.btn:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.btn:active {
    transform: scale(0.98);
}

.primary {
    background-color: #DF4335;
    color: #FAFAFA;
}

.primary:hover {
    color: #FFF;
    background-color: #d53c2f;
}

.secondary {
    background-color: #ecf0f1;
    color: #888;
}

.secondary {
    background-color: #DDD;
    color: #666;
}

.secondary.disabled {
    opacity: .5;
    cursor: not-allowed;
}

.secondary.disabled:hover {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

*:focus {
    outline: 0;
}


/* FOOTER */

footer {
    width: 100%;
    order: 4;
    flex: 0 0 100px;
    align-self: center;
    background: #283B49;
    display: flex;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    flex-direction: row;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    align-content: center;
}

footer a {
    color: #FAFAFA;
    transition: color linear .3s;
}

.footerLeft {
    order: 1;
    flex: 0 0 auto;
    padding: 0 0 0 1em;
}

.footerRight {
    order: 2;
    flex: 0 0 auto;
    padding: 0 1em 0 0;
}