Download raw (13.9 KB)

@import "colors.less";
@import "fonts.less";
@import "mixins.less";


/* custom mixins {{{ */
.concrete() { font-family: "alfphabetbipocatcondensed"; font-size: .8em; line-height: 1.4em; letter-spacing: .6px; }
.cols2 { .column-count(2); .column-gap(50px); }
.cols2 div { display: inline-block; }
/* }}} */

/* Carousel {{{ */
.jcarousel-outer { position: relative; }
.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: 0; 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: 0; background-image: url("../img/arrow-left3.svg"); }
.jcarousel-control-next { right: 0; background-image: url("../img/arrow3.svg"); }
/* }}} */

/* layout {{{ */
body { margin: 70px 150px; }
#foo { z-index: 10; 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; 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; left: -500px; top: 0; text-align: center; width: 33.333%; padding-right: 20px; opacity: 0; }
#cover-content { position: static; float: left; opacity: 1 !important; visibility: visible !important; }
.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.22em; }
em { font-style: italic; }
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: .5em; margin-bottom: 1em; font-size: .8em; border-top: solid black 2px; text-align: center; }
tr { border-top: black solid 1px; }
td { padding: 3px; }
form,
input { font-family: "alfphabetbipocatcondensed"; font-size: 16px; }
input { display: block; outline: 0; border: none; .box-sizing; }
input:focus { outline-offset: 0; }
input[type="text"] { outline: 2px solid black; font-size: 110%; padding: 0 0 0 6px; width: 100%; background: @color-D3; height: 26px; display: inline; }
input[type="text"]:hover { background: #fff; }
input[type="submit"] { color: black; cursor: pointer; display: inline; width: 150px; height: 30px; font-family: "alfphabetbipocatcondensed"; padding: 0; font-size: 19px; outline: 2px solid black; 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: @color-C3; }
input[type="submit"]:hover { background: @color-A1; color: white; }
/* }}} */

/* header {{{ */
#main-header { margin-top: -150px; }
header { margin-bottom: 5em; }
.anim { width: 60%; max-width: 750px; text-align: center; margin-left: 120px; margin-top: -50px; }
.chapeau { font-size: 1.15em; line-height: 1.25em; margin-top: 0; }
.chapeauindent { font-size: 1.15em; line-height: 1.25em; margin-top: 0; text-indent: 20px; }
.footer { text-align: center; margin-bottom: 90px; }
#logo { width: 85%; margin-left: -23px; }
blockquote#stiegler { font-family: "alfphabetbipocatcondensed"; line-height: 15px; text-align: center; margin-bottom: 1em; margin-top: 24em; margin-left:33.33%}
blockquote#stiegler > .footer { font-size: .7em; line-height: 15px; font-family: "alfphabetbipocatcondensed"; text-align: center; margin-top: .8em; }
#main-intro { .column-count(2); .column-gap(20px); }
#main-intro p { -webkit-column-break-inside: avoid; break-inside: avoid; }
/* }}} */

/* 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: .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: .2em; line-height: .9em; letter-spacing: -.01em; }
/* }}} */


.small { font-size: 70%; }
.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: 0; font-family: "alfphabetbipocatcondensed"; text-align: center; }
#menu li { margin-top: 2px; }
#menu li:before { content: ""; }
#menu a { color: black; padding: 0 8px; margin-bottom: 1px; }
#menu a:hover { text-decoration: none; }

.tranche { border-top: double black 17px; margin-bottom: 2em; }
.tranche h2 { height: 500px; background-size: cover; line-height: 500px; text-align: center; color: @color-B3; margin-top: 0; }
.tranche h2 span, { vertical-align: middle; display: inline-block; line-height: .925em; }
#collaborative-experience h2 { background-image: url("../img/medor-comment.jpg"); }
#status h2 { background-image: url("../img/medor-qui.jpg"); }
#accounting h2 { background-image: url("../img/medor-combien.jpg"); }
#now-what h2 { background-image: url("../img/medor-maintenant.jpg"); }
#magazine h2 { background-image: url("../img/medor-quoi.jpg"); }

.louis-image { display: block; margin: 0 auto; }
.louis-image img { max-width: 100%; }

#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-top: .8em; margin-bottom: .2em; color: @color-A2; text-align: left; text-transform: uppercase; letter-spacing: .1em; font-size: 1.2em; }
#dna em { font-family: "CenturySchL-Ital"; text-decoration: none; font-style: none; line-height: .9em; }
.chapeau em { font-family: "CenturySchL-Ital"; text-decoration: none; font-style: none; }

#digne { width: 100%; }

#portraits { height: 400px; }
#portraits .jcarousel-item { font-family: "urw-grotesk-t"; font-size: 16px; line-height: 1.21em; width: .25%; text-align: center; line-height: 400px; }
#portraits .jcarousel-item figure { vertical-align: middle; display: inline-block; line-height: 1.21em; }
#portraits .jcarousel-item .bio { vertical-align: middle; display: inline-block; line-height: 1.21em; display: none; }
#portraits .jcarousel-item:hover figure { display: none; }
#portraits .jcarousel-item:hover .bio { display: inline-block; }

#now-what { margin-bottom: 150px; }

/* }}} */

/* 3 panels {{{ */
.arrow-outer { position: relative; top: -2em; width: 7em; margin: 0 auto; text-align: center; font-size: 20px; border: .25em solid }
.arrow-outer a { color: inherit; }
.arrow-outer:after { content: ""; display: block; position: absolute; left: -1.5em; bottom: -1.25em; border-style: solid; border-width: 1em 5em 0 5em; height: 0; width: 0; }
.arrow-money { line-height: 6em; height: 6em; font-weight: bold; font-family: "urw-grotesk-t"; background-color: white; display: block; }
.arrow-money .inner { line-height: .85em; vertical-align: middle; display: inline-block; }
.arrow-money .price { font-family: "alfphabetbipocatcondensed"; font-size: 3em; font-weight: normal; line-height: .95em; display: inline-block; position: relative; }
.arrow-money .price sup { font-size: .60em; line-height: 1.2em; position: absolute; top: 0; left: 100%; }
.arrow-money .price sub { font-size: .35em; line-height: 1.4em; padding-left: .15em; position: absolute; bottom: 0; left: 100%; }
.goal-outer { font-family: "urw-grotesk-t"; background-color: black; color: white; width: 100%; padding-top: .25em; }
.goal-outer sup { vertical-align: .3em; font-size: .7em; line-height: 0; }
.goal-middle { line-height: 1.1em; vertical-align: middle; display: inline-block; }
.goal-arrow { height: .25em; width: 2em; margin: 0 auto .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: .5em 2em 0 2em; height: 0; width: 0; }
.goal-outer { font-family: "alfphabetbipocatcondensed"; font-size: 39px; line-height: 39px; }
.goal { display: inline-block; font-size: 18px; line-height: 15px; text-align: left; }
a .arrow-money:hover { color: white !important; }
#panels {
    width: 66.666%;
    float: left;
    position: relative;
    background: @color-D1;
    background: -moz-linear-gradient(left, @color-D1 0%, @color-D1 49.5%, white 49.5%, white 50.5%, @color-B3 50.5%, @color-B3 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, @color-D1), color-stop(49.5%, @color-D1), color-stop(49.5%, white), color-stop(50.5%, white), color-stop(50.5%, @color-B3), color-stop(100%, @color-E1));
    background: -webkit-linear-gradient(left, @color-D1 0%, @color-D1 49.5%, white 49.5%, white 50.5%, @color-B3 50.5%, @color-B3 100%);
    background: -o-linear-gradient(left, @color-D1 0%, @color-D1 49.5%, white 49.5%, white 50.5%, @color-B3 50.5%, @color-B3 100%);
    background: -ms-linear-gradient(left, @color-D1 0%, @color-D1 49.5%, white 49.5%, white 50.5%, @color-B3 50.5%, @color-B3 100%);
    background: linear-gradient(to right, @color-D1 0%, @color-D1 49.5%, white 49.5%, white 50.5%, @color-B3 50.5%, @color-B3 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#2f0cf5', GradientType=1 );
}
.fund { width: 50%; float: left; vertical-align: top; position: relative; margin-bottom: 2em; }
.fund-top { padding: 0 20px; position: relative; }
.fund-text { padding-top: .2em; padding-bottom: 1em; }
.fund-top .illu { text-align: center; margin-top: 2em; }
#cooperating .fund-top .illu { margin-top: 3em; }
#donating { background-color: @color-E1; clear: left; border-top: 7px solid white; }
#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; }

#subscribing .arrow-outer { border-color: @color-A1; color: @color-A1; }
#subscribing .arrow-money:hover { background-color: @color-A1; }
#subscribing .goal-outer { border-color: @color-A1; background-color: @color-A1; }
#subscribing .goal-outer:hover { background-color: @color-A1; }
#subscribing .arrow-outer:after { border-color: @color-A1 transparent; }

#cooperating .arrow-outer { border-color: @color-A2; color: @color-A2; }
#cooperating .arrow-money:hover { background-color: @color-A2; }
#cooperating .goal-outer { border-color: @color-A2; background-color: @color-A2; }
#cooperating .goal-outer:hover { background-color: @color-A2; }
#cooperating .arrow-outer:after { border-color: @color-A2 transparent; }

#donating .arrow-outer { border-color: @color-A4; color: @color-A4; border-bottom-width: 1.25em; }
#donating .arrow-money:after { background-color: @color-A4 transparent; }
#donating .goal-outer { border-color: @color-A4; background-color: @color-A4; }
#donating .goal-outer:hover { background-color: @color-A4; }
#donating .arrow-outer:after { border-color: @color-A4 transparent; bottom: -2.25em; }

#panel-descriptions { .clearfix; }
.numbers,
.pourcentage { width: 15%; text-align: right; }
#frais td:not(:first-child),
#abonnes td:not(:first-child) { text-align: right; }
#equipe { margin-bottom: 50px; }
#status blockquote { margin-top: 1.22em; margin-bottom: 1.22em; margin-left: 1.22em * 2; }


#newslist {
    color: @color-A2;
}

#news {
    .box-sizing;
    padding-right: 10px;
    width: 33.333%;
    float: left;
    vertical-align: top;
    position: relative;
    margin-bottom: 2em;
}
#news h3 { margin-left: 0; margin-right: 0; margin-bottom: 1.21em / 2; text-align: left; font-size: 1.2em}
#news h3:first-child { margin-top: 0; }
#news hr { border: 0; border-top: 2px solid }

.bla { .clearfix; }

#cms_toolbar ul li:before { content: ""; }
#cms_toolbar input { display: initial; }
/*#news { outline: 1px solid blue; position: relative; z-index: 999;}*/

p.titre-evenement {
    font-family: "urw-grotesk-t"; 
    font-size: 16px;
    line-height: 1.21em;
    margin: 0;
}
p.date-evenement,
p.infos-evenement {
    font-family: "alfphabetbipocatcondensed"; 
    font-style: normal;
    color: inherit;
    margin: 0;
    font-size: 17px;
    line-height: 1.21em;
}

.btn-fb,
.btn-twt {
    display: inline-block;
    padding: 4px;
    vertical-align: middle;
    font-family: "urw-grotesk-t"; 
    font-size: 11px;
    /*margin-right: 6px;*/
}
.btn-twt {
    color: #2AA9E0 !important;
    background-color: white;
}
.btn-fb {
    background-color: #3A5795;
    color: white !important;
}

#main-nav {
    z-index: 999;
    background-color: @color-C3;
    position: fixed;
    width: auto!important;
    top: 0; 
    left: 0; 
    right: 0;
    text-align: center;
    font-family: "alfphabetbipocatcondensed"; 
    font-size: 16px; 
    line-height: 1em; 
    /*letter-spacing: .4px;*/
    padding: 0.5em;
}
#main-nav ul {
    display: inline;
}
#main-nav li {
    display: inline;
}
#main-nav li a {
    padding: 0.5em 0.5em;
    text-decoration: none;
}
#main-nav .child:hover a {
    outline: 3px solid black;
}
#main-nav .selected a {
    outline: 3px solid black;
}
#main-nav li:before {
    content: "";
}
#main-nav form {
    display: inline;
    margin-left: 2em;
}

#main-nav input {
    height: 23px;
    .box-sizing;
    padding: 4px;
    width: auto;
    display: inline;
    font-size: inherit;
    line-height: inherit;
    outline: none;
    background-color: white;
}

#main-nav input:hover {
    color: inherit;
}

#main-nav a {
    color: inherit;
}


/* vim: set foldmethod=marker: */