Download raw (19.5 KB)
/* less variables {{{ */ @color-A1: rgba(42, 133, 164, 255); @color-A2: rgba(177, 69, 66, 255); @color-A3: rgba(255, 254, 53, 255); @color-A4: rgba(57, 145, 79, 255); @color-B2: rgba(219, 40, 35, 255); @color-B3: rgba(255, 253, 115, 255); @color-B4: rgba(225, 241, 122, 255); @color-C1: rgba(137, 203, 225, 255); @color-C2: rgba(249, 49, 52, 255); @color-C3: rgba(250, 181, 71, 255); @color-C4: rgba(243, 253, 207, 255); @color-D1: rgba(169, 213, 222, 255); @color-D2: rgba(222, 113, 98, 255); @color-D3: rgba(247, 229, 149, 255); @color-E1: rgba(233, 234, 225, 255); @color-E3: rgba(254, 250, 194, 255); /* }}} */ /* fonts {{{ */ @font-face { font-family: 'centurycatalogue'; src: url('../fonts/century-catalogue-webfont.eot'); src: url('../fonts/century-catalogue-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/century-catalogue-webfont.woff2') format('woff2'), url('../fonts/century-catalogue-webfont.woff') format('woff'), url('../fonts/century-catalogue-webfont.ttf') format('truetype'), url('../fonts/century-catalogue-webfont.svg#century_catalogueroman') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'alfphabetbipocatcondensed'; src: url('../fonts/alfphabetbipocat-condensed-webfont.eot'); src: url('../fonts/alfphabetbipocat-condensed-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/alfphabetbipocat-condensed-webfont.woff') format('woff'), url('../fonts/alfphabetbipocat-condensed-webfont.ttf') format('truetype'), url('../fonts/alfphabetbipocat-condensed-webfont.svg#alfphabetbipocatcondensed') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Alfphabet-IV'; src: url('../fonts/Alfphabet-IV.ttf'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Career'; src: url('../fonts/Career.ttf'); font-weight: normal; font-style: normal; } @font-face { font-family: 'urw-grotesk-t'; src: url('../fonts/urwgroteskt-bold-webfont.eot'); src: url('../fonts/urwgroteskt-bold-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/urwgroteskt-bold-webfont.woff') format('woff'), url('../fonts/urwgroteskt-bold-webfont.ttf') format('truetype'), url('../fonts/urwgroteskt-bold-webfont.svg#urw_grotesk_tbold') format('svg'); font-weight: bold; font-style: normal; } /* }}} */ /* mixins {{{ */ .background-size (@size: cover) { -webkit-background-size: @size; -moz-background-size: @size; -o-background-size: @size; background-size: @size; } .box-sizing (@type: border-box) { -webkit-box-sizing: @type; -moz-box-sizing: @type; -ms-box-sizing: @type; box-sizing: @type; } // The micro clearfix http://nicolasgallagher.com/micro-clearfix-hack/ .clearfix() { *zoom:1; &:before, &:after { content:""; display:table; } &:after { clear:both; } } .column-count(@column-count: 2){ -webkit-column-count: @column-count; -moz-column-count: @column-count; column-count: @column-count; } .column-gap(@column-gap: 30px){ -webkit-column-gap: @column-gap; -moz-column-gap: @column-gap; column-gap: @column-gap; } .column-rule(@column-rule: 1px solid black){ -webkit-column-rule: @column-rule; -moz-column-rule: @column-rule; column-rule: @column-rule; } .user-select (@val) { -webkit-touch-callout: @val; -webkit-user-select: @val; -khtml-user-select: @val; -moz-user-select: @val; -ms-user-select: @val; user-select: @val; } .transition (@prop: all, @time: 1s, @ease: linear, @delay: 0s) { -webkit-transition: @prop @time @ease @delay; -moz-transition: @prop @time @ease @delay; -o-transition: @prop @time @ease @delay; -ms-transition: @prop @time @ease @delay; transition: @prop @time @ease @delay; } .transform(@string){ -webkit-transform: @string; -moz-transform: @string; -ms-transform: @string; -o-transform: @string; } /* }}} */ /* custom mixins {{{ */ .concrete() { font-family: 'alfphabetbipocatcondensed'; font-size: 0.8em; line-height: 1.4em; letter-spacing: 0.6px; } .cols2 { .column-count(2); /*.column-rule(3px double black);*/ .column-gap(50px); } .cols2 div { display: inline-block; } /* }}} */ /* Carousel {{{ */ .jcarousel-outer { position: relative; //background-color: white; } .jcarousel { position: relative; overflow: hidden; margin: 0 50px; z-index: 2; } .jcarousel-inner { width: 10000%; position: relative; } .jcarousel-item { float: left; } .jcarousel-controls { position: absolute; top: 0%; width: 100%; height: 100%; .user-select(none); } .jcarousel-control-prev, .jcarousel-control-next { display: block; position: absolute; top: 0px; width: 44px; height: 100%; text-align: center; color: white; text-decoration: none; cursor: pointer; background-size: contain; background-repeat: no-repeat; background-position: center; background-image: url("../img/arrow-left.svg"); } .jcarousel-control-prev { left: 0px; background-image: url("../img/arrow-left3.svg"); } .jcarousel-control-next { right: 0px; background-image: url("../img/arrow3.svg"); } /* }}} */ /* layout {{{ */ body { margin: 150px; /*overflow-x: hidden;*/ } #foo { z-index: -1; position: fixed; top: 50px; left: 50px; right: 50px; } #bar { position: relative; margin: 0 auto; max-width: 1440px; min-width: 640px; } #outer-wrapper { margin-left: auto; margin-right: auto; margin-top:-80px; max-width: 1440px; min-width: 640px; } .wrap { margin-left: 33.333%; padding-left: 20px; } #dna { .column-count(2); .column-gap(20px); } #dna > div { display: inline-block; } .jcarousel-outer { position: relative; z-index: 2; } .cover { position: absolute; z-index: 1; .transition(left, 1000ms, ease-out, 0s); left: -2000px; top: 0px; text-align: center; width: 33.333%; padding-right: 20px; } .cover.active { left: 0; } .cover img { width: 90%; max-width: 350px; } /* }}} */ /* generic styles {{{ */ body { font-family: 'centurycatalogue'; font-size: 20px; line-height: 1.22; } p + p { margin-top: 1.31em; } em { font-style: italic; } .sm { font-variant: small-caps; } a { text-decoration: none; color: @color-A2; } a:hover{ text-decoration: underline; } ul { margin-left: 20px; } li { margin-top: 5px; } ul li:before { content: "— "; } details { .concrete; text-align: left; } summary { margin-top: 0.5em; margin-bottom: 1em; font-size: 0.8em; border-top: solid black 2px; text-align: center; } table { /*.concrete;*/ } tr { border-top: black solid 1px; } td { /*text-align: ".";*/ padding: 3px; } form { padding: 0 20px; } form, form input { font-family: 'alfphabetbipocatcondensed'; font-size: 16px; } form input { outline: 0; border: none; } form input:focus { outline-offset: 0; } input[type=submit] { cursor: pointer; } form p { margin: 0; width: 45%; display: inline-block; } form label, form input { display: block; } /* }}} */ /* header {{{ */ #main-header { margin-top:-150px; } header { margin-bottom: 5em; } .anim { width: 70%; text-align:center; margin-left:120px; margin-top:-50px; } #logo { width: 85%; margin-left: -23px; } header h1 { font-family:'alfphabetbipocatcondensed'; font-size: 4.6em; } blockquote#stiegler { font-family: 'alfphabetbipocatcondensed'; line-height: 15px; text-align: center; margin-bottom: 1em; margin-top: 4em; } blockquote#stiegler > .footer { font-size: 0.7em; line-height: 15px; font-family: 'alfphabetbipocatcondensed'; //margin-left: 449px; text-align:center; margin-top: 0.8em; } #baseline { font-family: 'Career'; font-size: 2.1em; outline: 1px solid black; padding: 0 0.15em; margin-top: -7px !important; margin-bottom: 12px !important; padding-bottom: 0.3em; } #main-intro { .column-count(2); .column-gap(20px); } /* }}} */ /* main content {{{ */ main { margin-bottom: 5em; } main h2, main h3 { font-family: 'alfphabetbipocatcondensed'; } main h2 { margin-top: 1em; margin-bottom: 1em; font-size: 6em; line-height: 0.85; letter-spacing: -3px; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; } main h3 { text-align: center; font-size: 1.6em; margin: 1.21em; margin-bottom: 0.3em; line-height: 0.9em; letter-spacing: -0.01em; } /* }}} */ .small { font-size: 70%; } .blocvideo { border: solid 1px black; width: 300px; padding: 80px 30px 80px 30px; } .vcard { margin-left: 42px; margin-top: 5px; } /*#subscribing h2,*/ /*#cooperating h2,*/ /*#donating h2 {*/ /*display: none;*/ /*}*/ #magazine { /*border: solid black 2px;*/ /*margin-top: 5em;*/ } .tocify-item.active { outline: 2px solid black; background-color:white; } .tocify-item:hover { outline: 2px solid black; } #menu{ position: fixed; margin-right: 26px; top:50px; right:0px; font-family: 'alfphabetbipocatcondensed'; text-align:center; li { margin-top: 2px; } li:before { content: ""; } a { color: black; padding: 0 8px; margin-bottom: 1px; &:hover { text-decoration: none; } } } .menu-arrow{ height: 0.2em; width: 1em; margin: 0em auto 0.5em auto; /*position: relative;*/ background-color: black; font-weight: bold; } .menu-arrow:after { content: ""; display: block; position: absolute; top: -4%; left: 0.65em; border-color: black transparent; border-style: solid; border-width:0.4em 1.5em 0em 1.5em; height: 0px; width: 0px; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg); } .menu-arrow:before { content: ""; display: block; position: absolute; top: 94%; left: 0.65em; border-color: black transparent; border-style: solid; border-width: 0.4em 1.5em 0em 1.5em; height: 0px; width: 0px; } .menu span { border:solid black 2px; display: block; text-align:center; width: 110%; } #collaborative-experience, #status, #accounting, #now-what, #magazine { border-top: double black 17px; margin-bottom:2em; } #collaborative-experience h2, #status h2, #accounting h2, #now-what h2, #magazine h2 { height: 500px; background-size: cover; line-height: 500px; text-align: center; color: @color-B3; margin-top:0em; } #collaborative-experience h2 span, #status h2 span, #accounting h2 span, #now-what h2 span, #magazine h2 span, { vertical-align: middle; display: inline-block; line-height: 0.925em; } #collaborative-experience h2 { background-image: url("../img/up-n-down.JPG"); background-position: 0 25%; } #status h2 { background-image: url("../img/medor-meet.jpeg"); background-position: 0 50%; } #accounting h2 { background-image: url("../img/PC207027.JPG"); background-position: 0 50%; } #now-what h2 { background-image: url("../img/IMG_7245.JPG"); background-position: 0 25%; } #magazine h2 { background-image: url("../img/IMG_6582.JPG"); background-position: 0 25%; } .louis-image { display: block; margin: 0 auto; } .louis-image img { max-width: 105%; } #dna { font-size: 17px; line-height: 1.15em; margin-bottom: 42px; } #dna > div { margin-bottom: 2px; } #dna h3 { font-family:'urw-grotesk-t'; font-size: 1.2em; margin: 0.5em 0; color: @color-A2; text-align: left; text-transform: uppercase; letter-spacing: 0.15em; font-size: 1.2em; } #dna em { letter-spacing: 0em; text-decoration: none; font-style: none; } #dna del { text-decoration: line-through; font-size: 80%; line-height: 80%; color: gray; text-line-through-color: gray; } #digne { width: 100%; } #maquette { display: block; position: absolute; right: -260px; top: 215px; z-index: -1; } #maquette figcaption { margin-left: 33%; margin-top: 1em; .concrete; color: @color-A4; } #portraits .jcarousel-item { font-family: 'urw-grotesk-t'; font-size: 16px; line-height: 1.21em; //font-weight: bold; .box-sizing(); width: 0.20%; position: relative; margin-bottom: -225px; } #portraits .jcarousel-item img { display: block; margin: 40px auto; } #portraits .jcarousel-item figcaption { position: relative; top: -225px; visibility: hidden; } #portraits .jcarousel-item:hover img { visibility: hidden; } #portraits .jcarousel-item:hover figcaption { visibility: visible; } .name { background-color: white; } .bio { background-color: white; } #now-what { margin-bottom: 150px; } #newsletter input[type="text"] { border: 1px solid black; font-size: 110%; font-family: alfphabetbipocatcondensed; padding: 0 0 0 6px; margin: 10px 0 0 25px; width: 400px; background: @color-D3; } #newsletter input[type="text"]:hover { border: 1px solid black; background: #fff; } #newsletter input[type="submit"]{ color: black; margin: -1px 0 0 25px; display: block; width: 150px; height: 30px; font-family: 'alfphabetbipocatcondensed'; text-transform: uppercase; letter-spacing: 0.25em; padding: 0px; font-size: 19px; border: 1px solid black; background: #0054A2; background-image: initial; background-position-x: initial; background-position-y: initial; background-size: initial; background-repeat-x: initial; background-repeat-y: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(0, 104, 162); } #newsletter input[type="submit"]:hover { border: 1px solid black; background: @color-D3; color: white; } /* }}} */ /* 3 panels {{{ */ .arrow-money { line-height: 6em; border: 0.25em solid; border-bottom-width: 1.25em; height: 6em; width: 7em; font-weight: bold; font-size: 20px; font-family: 'urw-grotesk-t'; background-color: white; margin: 0 auto; text-align: center; position: relative; top: -2em; display: block; } .arrow-money:after { content: ""; display: block; position: relative; left: -1.5em; top: 1.25em; border-style: solid; border-width: 1em 5em 0 5em; height: 0px; width: 0px; } .arrow-money:before { content: ""; display: block; position: absolute; width: 4em; height: 9em; left: -4.5em; top: -2.5em; .background-size(contain); background-repeat: no-repeat; } .arrow-money .inner { line-height: 0.85em; vertical-align: middle; display: inline-block; } .arrow-money .price { font-family: 'alfphabetbipocatcondensed'; font-size: 3em; font-weight: normal; line-height: 0.95em; } .arrow-money .price sup { font-size: 0.5em; vertical-align: super; line-height: 0; } #panels { position: relative; background: @color-D1; background: -moz-linear-gradient(left, @color-D1 0%, @color-D1 33%, white 33%, white 34%, @color-B3 34%, @color-B3 66%, white 66%, white 67%, @color-E1 67%, @color-E1 100%); background: -webkit-gradient(left top, right top, color-stop(0%, @color-D1), color-stop(33%, @color-D1), color-stop(33%, white), color-stop(34%, white), color-stop(34%, @color-B3), color-stop(66%, @color-B3), color-stop(66%, white), color-stop(67%, white), color-stop(67%, @color-E1), color-stop(100%, @color-E1)); background: -webkit-linear-gradient(left, @color-D1 0%, @color-D1 33%, white 33%, white 34%, @color-B3 34%, @color-B3 66%, white 66%, white 67%, @color-E1 67%, @color-E1 100%); background: -o-linear-gradient(left, @color-D1 0%, @color-D1 33%, white 33%, white 34%, @color-B3 34%, @color-B3 66%, white 66%, white 67%, @color-E1 67%, @color-E1 100%); background: -ms-linear-gradient(left, @color-D1 0%, @color-D1 33%, white 33%, white 34%, @color-B3 34%, @color-B3 66%, white 66%, white 67%, @color-E1 67%, @color-E1 100%); background: linear-gradient(to right, @color-D1 0%, @color-D1 33%, white 33%, white 34%, @color-B3 34%, @color-B3 66%, white 66%, white 67%, @color-E1 67%, @color-E1 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#2f0cf5', GradientType=1 ); } .fund { width: 33.333%; float: left; vertical-align: top; position: relative; margin-bottom: 2em; } .fund-top { padding: 0 20px; position: relative; } .fund-text { padding-top: 0.2em; padding-bottom: 1em; } .fund-top .illu { text-align: center; margin-top: 2em; } #cooperating .fund-top .illu { margin-top: 3em; } #donating .fund-top .illu { margin-top: 7em; } #subscribing .fund-top .illu img { max-width: 100%; vertical-align: bottom; } #cooperating .fund-top .illu img, #donating .fund-top .illu img { width: 100%; max-width: 200px; vertical-align: center; } .goal-outer { height: 10em; text-align: center; line-height: 10em; font-family: 'urw-grotesk-t' } .goal-outer sup { vertical-align: 0.3em; font-size: 0.7em; line-height: 0; } .goal-middle { line-height: 1.1em; vertical-align: middle; display: inline-block; } .goal-arrow { height: 0.25em; width: 2em; margin: 0em auto 0.5em auto; position: relative; background-color: black; font-weight: bold; } .goal-arrow:after { content: ""; display: block; position: absolute; left: -1em; top: 100%; border-color: black transparent; border-style: solid; border-width: 0.5em 2em 0em 2em; height: 0px; width: 0px; } .number { font-family: 'alfphabetbipocatcondensed'; font-size: 36px; line-height: 36px; } .arrow-money { //.transition(all, 250ms, ease-out, 0s); } .arrow-money:hover { color: white !important; } #subscribing .arrow-money { border-color: @color-A1; color: @color-A1; } #subscribing .arrow-money:hover { background-color: @color-A1; } #subscribing .arrow-money:after { border-color: @color-A1 transparent; } #subscribing .arrow-money:before { /*background-image: url('../img/medor-perso2-ABONNE-2.png');*/ } #cooperating .arrow-money { border-color: @color-A2; color: @color-A2; } #cooperating .arrow-money:hover { background-color: @color-A2; } #cooperating .arrow-money:after { border-color: @color-A2 transparent; } #cooperating .arrow-money:before { /*background-image: url('../img/medor-perso3-PRET-2.png');*/ } #donating .arrow-money { border-color: @color-A4; color: @color-A4; } #donating .arrow-money:hover { background-color: @color-A4; } #donating .arrow-money:after { border-color: @color-A4 transparent; } #donating .arrow-money:before { /* background-image: url('../img/medor-perso4-DON-2_smile.png');*/ } #panel-descriptions { .clearfix; } .numbers, .pourcentage { width: 15%; text-align: right; } #equipe { margin-bottom: 50px; } /* vim: set foldmethod=marker: */