jee.scss 30 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214
  1. @charset "UTF-8";
  2. @import "../bower_components/foundation/scss/normalize.scss";
  3. @import "../bower_components/foundation/scss/foundation/functions";
  4. $row-width: rem-calc(1250);
  5. // $total-columns: 12;
  6. $column-gutter: rem-calc(20);
  7. //@import "../bower_components/foundation/scss/foundation/settings"; // this is not working, causing an error on compilation
  8. @import "../bower_components/foundation/scss/foundation/components/global";
  9. @import "../bower_components/foundation/scss/foundation/components/type";
  10. @import "../bower_components/foundation/scss/foundation/components/clearing";
  11. // @import "../bower_components/foundation/scss/foundation/components/inline-lists";
  12. @import "../bower_components/foundation/scss/foundation/components/grid";
  13. // @import "../bower_components/foundation/scss/foundation/components/top-bar";
  14. @import "../bower_components/foundation/scss/foundation/components/block-grid";
  15. // @import "../bower_components/foundation/scss/foundation.scss"; // without importing the whole foundation, the final css files is 75% less heavier
  16. /*
  17. * ESADHaR
  18. */
  19. @import "communs.scss";
  20. @import "fonts.scss";
  21. /*
  22. __ ________ __ _____ _______
  23. / |/ / _/ |/ // _/ | / / ___/
  24. / /|_/ // / | / / // |/ /\__ \
  25. / / / // / / |_/ // /| /___/ /
  26. /_/ /_/___//_/|_/___/_/ |_//____/
  27. */
  28. @mixin bg-svg-png($img, $r:no-repeat, $x:center, $y:center) {
  29. background: transparent url('../assets/img/#{$img}.png') $r $x $y;
  30. background: none, url('../assets/img/#{$img}.svg') $r $x $y;
  31. }
  32. /*
  33. ___ ____ ____
  34. / | / __ \/ __ \
  35. / /| | / /_/ / /_/ /
  36. / ___ |/ ____/ ____/
  37. /_/ |_/_/ /_/
  38. */
  39. html{
  40. position:relative;
  41. height:100%; width:100%;
  42. overflow:hidden;
  43. }
  44. body{
  45. position:relative;
  46. user-select:none;
  47. height:100%!important;
  48. // min-height:1000px;
  49. width:100%;;
  50. overflow:hidden;
  51. }
  52. #root{
  53. position:relative;
  54. width:100%;
  55. height:100%;
  56. overflow: hidden;
  57. // width:1125px;
  58. // height:900px;
  59. // margin:-450px auto 0;
  60. // top:50%;
  61. /* IE10 Consumer Preview */
  62. background-image: -ms-linear-gradient(top, #FFFDE9 0%, #BECFD9 100%);
  63. /* Mozilla Firefox */
  64. background-image: -moz-linear-gradient(top, #FFFDE9 0%, #BECFD9 100%);
  65. /* Opera */
  66. background-image: -o-linear-gradient(top, #FFFDE9 0%, #BECFD9 100%);
  67. /* Webkit (Safari/Chrome 10) */
  68. background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFDE9), color-stop(1, #BECFD9));
  69. /* Webkit (Chrome 11+) */
  70. background-image: -webkit-linear-gradient(top, #FFFDE9 0%, #BECFD9 100%);
  71. /* W3C Markup, IE10 Release Preview */
  72. background-image: linear-gradient(to bottom, #FFFDE9 0%, #BECFD9 100%);
  73. }
  74. @keyframes introLogo{
  75. 0% {opacity:0;}
  76. 35% {opacity:1;}
  77. 50% {opacity:1;}
  78. 75% {opacity:0;}
  79. 100% {opacity:0;}
  80. }
  81. @keyframes introLogoBlured{
  82. 0% {opacity:0;}
  83. 50% {opacity:0;}
  84. 60% {opacity:0.8;}
  85. 100% {opacity:0.8;}
  86. }
  87. @keyframes introSlogan{
  88. 0% {opacity:0;}
  89. 50% {opacity:0;}
  90. 70% {opacity:1;}
  91. 90% {opacity:1;}
  92. 100% {opacity:0;}
  93. }
  94. @keyframes introNodes{
  95. 0% {opacity:0;}
  96. 100% {opacity:1;}
  97. }
  98. $animeLogoDuration:6s;
  99. $animeNodesDuration:3s;
  100. #header{
  101. z-index:0;
  102. position:absolute;
  103. overflow:hidden;
  104. @media #{$small-only}{
  105. width:200px;
  106. height:88px;
  107. top:50%; left:50%;
  108. margin-left:-100px;
  109. margin-top:-44px;
  110. }
  111. @media #{$medium-up} {
  112. width:700px;
  113. height:310px;
  114. top:50%; left:50%;
  115. margin-left:-350px;
  116. margin-top:-155px;
  117. }
  118. // transition-property: "transform";
  119. // transition-duration: 0.2s;
  120. // transition-timing-function:ease-out;
  121. animation-fill-mode: forwards;
  122. h1{
  123. position:absolute;
  124. width:100%; height:100%;
  125. a{display:block;margin-top:-500%;}
  126. // filter:url(#blur-effect);
  127. &:after, &:before{
  128. content:"";
  129. display:block;
  130. width:100%; height:100%;
  131. position:absolute;
  132. top:0; left:0;
  133. opacity:0;
  134. }
  135. &:before{
  136. @include bg-svg-png('logo');
  137. background-size: contain;
  138. animation: introLogo $animeLogoDuration linear 0s;
  139. animation-fill-mode: forwards;
  140. }
  141. &:after{
  142. // background: transparent url('../assets/img/logo-blured.svg') no-repeat center center;
  143. @include bg-svg-png('logo-blured');
  144. background-size: contain;
  145. animation: introLogoBlured $animeLogoDuration linear 0s;
  146. animation-fill-mode: forwards;
  147. }
  148. }
  149. h2{
  150. // background: transparent url('../assets/img/slogan.svg') no-repeat center center;
  151. @include bg-svg-png('slogan');
  152. background-size: contain;
  153. position:absolute;
  154. width:100%; height:100%;
  155. a{display:block;margin-top:-500%;}
  156. opacity:0;
  157. animation: introSlogan $animeLogoDuration linear 0s;
  158. animation-fill-mode: forwards;
  159. }
  160. } // #header
  161. div.messages{
  162. position:absolute;
  163. top:20px; right:20px;
  164. width:500px; max-height:60%;
  165. overflow-y:auto;
  166. z-index: 1000;
  167. }
  168. #main{
  169. position:absolute;
  170. width:100%; height:100%;
  171. overflow:hidden;
  172. z-index: 2;
  173. .block-system{
  174. position:relative;
  175. width:100%; height:100%;
  176. overflow:hidden;
  177. }
  178. /*
  179. _____ _____ __ _____ _____ _____ _____ __ __ _____ _____ ____ _____
  180. | | | | | | __ | __| | __ | | | | | | | \| __|
  181. | --| | | |__| | | -|__ | | __ -|_ _| | | | | | | | | __|
  182. |_____|_____|_____|_____|__|__|_____| |_____| |_| |_|___|_____|____/|_____|
  183. */
  184. @mixin title-size($w, $h) {
  185. $factor: 0.5;
  186. @media #{$small-only} {
  187. width:$w*$factor; height:$h*$factor;
  188. margin:0 $w*(1-$factor)*0.4;
  189. }
  190. @media #{$medium-up} {
  191. width:$w; height:$h;
  192. }
  193. }
  194. //SOL
  195. #node-2{
  196. &.node-teaser{
  197. &::after{ @include bg-svg-png('bgd-sol');}
  198. &, a{color:$SOL-col-txt;}
  199. h2.node-title{
  200. &,a{color:$SOL-color;}
  201. a{
  202. @include bg-svg-png('title-SOL');
  203. @include title-size(170px, 35px);
  204. background-size: contain;
  205. }
  206. }
  207. .field-name-field-vignette{@include bg-svg-png('shadow-sol');}
  208. .line{background-color:$SOL-col-active;}
  209. &.previewed{
  210. h2.node-title{
  211. &,a{color:$SOL-col-active;}
  212. a{@include bg-svg-png('title-SOL-activ');}
  213. }
  214. }
  215. }
  216. }
  217. //DPH
  218. #node-3{
  219. &.node-teaser{
  220. &::after{ @include bg-svg-png('bgd-dph');}
  221. &, a{color:$DPH-col-txt;}
  222. h2.node-title{
  223. &,a{color:$DPH-color;}
  224. a{
  225. @include bg-svg-png('title-DPH');
  226. @include title-size(180px, 80px);
  227. background-size: contain;
  228. }
  229. }
  230. .field-name-field-vignette{@include bg-svg-png('shadow-dph');}
  231. .line{background-color:$DPH-col-active;}
  232. &.previewed{
  233. h2.node-title{
  234. &,a{color:$DPH-col-active;}
  235. a{@include bg-svg-png('title-DPH-activ');}
  236. }
  237. }
  238. }
  239. }
  240. // SUB
  241. #node-4{
  242. &.node-teaser{
  243. &::after{ @include bg-svg-png('bgd-sub');}
  244. &, a{color:$SUB-col-txt;}
  245. h2.node-title{
  246. &,a{color:$SUB-color;}
  247. a{
  248. @include bg-svg-png('title-SUB');
  249. @include title-size(200px, 35px);
  250. background-size: contain;
  251. }
  252. }
  253. .field-name-field-vignette{@include bg-svg-png('shadow-sub');}
  254. .line{background-color:$SUB-col-active;}
  255. &.previewed{
  256. h2.node-title{
  257. &,a{color:$SUB-col-active;}
  258. a{@include bg-svg-png('title-SUB-activ');}
  259. }
  260. }
  261. }
  262. }
  263. // BC
  264. #node-5{
  265. &.node-teaser{
  266. &::after{ @include bg-svg-png('bgd-bc');}
  267. &, a{color:$BC-col-txt;}
  268. h2.node-title{
  269. &,a{color:$BC-color;}
  270. a{
  271. @include bg-svg-png('title-BC');
  272. @include title-size(120px, 45px);
  273. background-size: contain;
  274. }
  275. }
  276. .field-name-field-vignette{@include bg-svg-png('shadow-bc');}
  277. .line{background-color:$BC-col-active;}
  278. &.previewed{
  279. h2.node-title{
  280. &,a{color:$BC-col-active;}
  281. a{@include bg-svg-png('title-BC-activ');}
  282. }
  283. }
  284. }
  285. }
  286. //OPP
  287. #node-6{
  288. &.node-teaser{
  289. &::after{ @include bg-svg-png('bgd-opp');}
  290. &, a{color:$OPP-col-txt;}
  291. h2.node-title{
  292. &,a{color:$OPP-color;}
  293. a{
  294. @include bg-svg-png('title-OPP');
  295. @include title-size(245px, 95px);
  296. background-size: contain;
  297. }
  298. }
  299. .field-name-field-vignette{@include bg-svg-png('shadow-opp');}
  300. .line{background-color:$OPP-col-active;}
  301. &.previewed{
  302. h2.node-title{
  303. &,a{color:$OPP-col-active;}
  304. a{@include bg-svg-png('title-OPP-activ');}
  305. }
  306. }
  307. }
  308. }
  309. //DUB
  310. #node-7{
  311. &.node-teaser{
  312. &::after{ @include bg-svg-png('bgd-dub');}
  313. &, a{color:$DUB-col-txt;}
  314. h2.node-title{
  315. &,a{color:$DUB-color;}
  316. a{
  317. @include bg-svg-png('title-DUB');
  318. @include title-size(195px, 65px);
  319. background-size: contain;
  320. }
  321. }
  322. .field-name-field-vignette{@include bg-svg-png('shadow-dub');}
  323. .line{background-color:$DUB-col-active;}
  324. &.previewed{
  325. h2.node-title{
  326. &,a{color:$DUB-col-active;}
  327. a{@include bg-svg-png('title-DUB-activ');}
  328. }
  329. }
  330. }
  331. }
  332. // JUSO
  333. #node-8{
  334. &.node-teaser{
  335. &::after{ @include bg-svg-png('bgd-juso');}
  336. &, a{color:$JUSO-col-txt;}
  337. h2.node-title{
  338. &,a{color:$JUSO-color;}
  339. a{
  340. @include bg-svg-png('title-JUSO');
  341. @include title-size(200px, 65px);
  342. background-size: contain;
  343. }
  344. }
  345. .field-name-field-vignette{@include bg-svg-png('shadow-juso');}
  346. .line{background-color:$JUSO-col-active;}
  347. &.previewed{
  348. h2.node-title{
  349. &,a{color:$JUSO-col-active;}
  350. a{@include bg-svg-png('title-JUSO-activ');}
  351. }
  352. }
  353. }
  354. }
  355. /*
  356. _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____
  357. | | | | _ | _ |_ _| __| __ | __| | __| __| | | __| __ | | | | | __|
  358. | --| | | __| | | | __| -|__ | | | | __| | | | __| -|- -| | | | | __|
  359. |_____|__|__|__|__|__| |_| |_____|__|__|_____| |_____|_____|_|___|_____|__|__|_____|__ _|_____|_____|
  360. |__|
  361. */
  362. .node-chapitre.node-teaser{
  363. z-index: 2;
  364. position:absolute;
  365. /*
  366. _____ __________________ ___ _________________ __________________
  367. / _/ | / /_ __/ ____/ __ \/ | / ____/_ __/ _/ | / / _/_ __/ ____/
  368. / // |/ / / / / __/ / /_/ / /| |/ / / / / / | | / // / / / / __/
  369. _/ // /| / / / / /___/ _, _/ ___ / /___ / / _/ / | |/ // / / / / /___
  370. /___/_/ |_/ /_/ /_____/_/ |_/_/ |_\____/ /_/ /___/ |___/___/ /_/ /_____/
  371. */
  372. /*
  373. ____ _____ _____ _____ _____ __ _____ _____ _____ ____ _____
  374. | \| __| __| _ | | | ||_ _| | | | \| __|
  375. | | | __| __| | | | |__| | | | | | | | | | __|
  376. |____/|_____|__| |__|__|_____|_____|_| |_|_|_|_____|____/|_____|
  377. */
  378. transition:1s ease-out;
  379. transition-property:opacity;
  380. opacity:0;
  381. &.enabled{
  382. opacity:1;
  383. }
  384. h2.node-title{
  385. cursor:pointer;
  386. a{
  387. transform:none;
  388. transform-origin:bottom center;
  389. transition:1s ease-out;
  390. transition-property:transform;
  391. z-index:5;
  392. }
  393. }
  394. >.content{position:relative; left:0;}
  395. .texts{
  396. opacity:0; height:1px; overflow:hidden;
  397. transition:1s ease-out;
  398. transition-property:opacity height;
  399. position:absolute;
  400. }
  401. .field-name-field-partie{
  402. opacity:0;
  403. position:absolute;
  404. transition:1s ease-in-out 0.1s;
  405. transition-property: opacity transform;
  406. // just let see the field vignette of first partie
  407. &:nth-child(2){
  408. z-index:2;
  409. opacity:1;
  410. // transition-delay:0;
  411. >.field-type-text{
  412. opacity:0;
  413. transition:0.7s ease-out 0.9s;
  414. transition-property: opacity;
  415. }
  416. >.field-name-field-vignette{
  417. cursor:pointer;z-index:2;
  418. transform:scale(0.5);
  419. transition:1s ease-out; transition-property:transform;
  420. }
  421. }
  422. }
  423. &:after{
  424. opacity:0;
  425. transition: 2s ease-in;
  426. transition-property:opacity;
  427. top:1px; left:1px; bottom:2px; right:2px;
  428. }
  429. .line{
  430. // transition: 0.4s ease-out;
  431. // transition-property:opacity;
  432. opacity:0;
  433. }
  434. /*
  435. _____ _____ _____ _____ _____ _____ _ _ _ _____ _____ ____ _____
  436. | _ | __ | __| | | | __| | | | | | | \| __|
  437. | __| -| __| | |- -| __| | | | | | | | | | | | __|
  438. |__| |__|__|_____|\___/|_____|_____|_____| |_|_|_|_____|____/|_____|
  439. */
  440. &.previewed{
  441. z-index:100;
  442. &:after{
  443. opacity:1;
  444. $pad:-2em;
  445. top:-$pad;
  446. left:$pad*6; right:$pad*6;
  447. bottom:$pad*15;
  448. }
  449. h2.node-title a{transform:scale(2,2);}
  450. .texts{opacity:1; height:8em;}
  451. .field-name-field-partie{
  452. opacity:1; z-index:0;
  453. // display all fields inside each parties
  454. >.field{opacity:1; z-index:-1; cursor:default;}
  455. &:nth-child(2){
  456. >.field-name-field-vignette{
  457. transform:scale(1.3);
  458. // transition:1s ease-out 0.5s; transition-property:transform;
  459. }
  460. }
  461. .field-name-field-vignette{
  462. z-index:2; cursor:pointer;
  463. }
  464. }
  465. .line{
  466. // opacity:1;
  467. }
  468. }
  469. /*
  470. _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ ____ _____
  471. | | |_ _| | __| _ |_ _| __| | | | \| __|
  472. | | | |- -| | | |- -| | | | | | | __| | | | | | | | | __|
  473. |_|_|_|_____| |_| |_____|_____|__|__| |_| |_____| |_|_|_|_____|____/|_____|
  474. */
  475. &.mitigated{
  476. opacity:0.2;
  477. }
  478. /*
  479. _____ _____ _____ _____ _____ _____ _____ ____ _____ _____ _____ __ _____ __ __ _____ ____
  480. | | | | _ | _ |_ _| __| __ | | \| | __| _ | | | _ | | | __| \
  481. | --| | | __| | | | __| -| | | |- -|__ | __| |__| |_ _| __| | |
  482. |_____|__|__|__|__|__| |_| |_____|__|__| |____/|_____|_____|__| |_____|__|__| |_| |_____|____/
  483. */
  484. .chapter-displayed & {
  485. opacity:0.05;
  486. }
  487. /*
  488. _____________ ____________ ___ __ _____ __ _ __ __ _ _
  489. / ____/ ____/ | / / ____/ __ \/ | / / / ___/ _/_/___ ____ ____ (_)___ / /____ _________ ______/ /_(_) _____ | |
  490. / / __/ __/ / |/ / __/ / /_/ / /| | / / \__ \ / // __ \/ __ \/ __ \ / / __ \/ __/ _ \/ ___/ __ `/ ___/ __/ / | / / _ \ / /
  491. / /_/ / /___/ /| / /___/ _, _/ ___ |/ /______/ / / // / / / /_/ / / / / / / / / / /_/ __/ / / /_/ / /__/ /_/ /| |/ / __// /
  492. \____/_____/_/ |_/_____/_/ |_/_/ |_/_____/____/ / //_/ /_/\____/_/ /_/ /_/_/ /_/\__/\___/_/ \__,_/\___/\__/_/ |___/\___//_/
  493. |_| /_/
  494. */
  495. &:after{ // background
  496. content:" ";
  497. background-size:contain!important;
  498. position:absolute;
  499. z-index:-1;
  500. }
  501. h2.node-title{
  502. font-family: "epflulb";
  503. font-weight:normal;
  504. text-transform: uppercase;
  505. text-align: center;
  506. max-width: 8.5em;
  507. line-height: 0.85;
  508. @media #{$large-up} {
  509. font-size: 1.3em;
  510. }
  511. @media #{$xlarge-up} {
  512. font-size:1.8em;
  513. }
  514. z-index: 5;
  515. a{
  516. display:block;
  517. text-indent: -2000px;
  518. overflow:hidden;
  519. }
  520. }
  521. .texts{
  522. // position:relative;
  523. }
  524. // .field-name-field-comprendre
  525. .field-name-field-accroche{
  526. h1,h2,h3,h4,h5,h6{display:none!important;}
  527. // max-width:15em;
  528. p{margin:0;}
  529. min-width:19em;
  530. }
  531. ul.links{
  532. display:block; margin:0; text-align:right; z-index:5; position:relative; width:100%;
  533. li.node-readmore{
  534. padding:0;
  535. a{
  536. display:inline-block;
  537. height:25px;
  538. font-family: "open_sans";
  539. font-weight: 900;
  540. color:#000!important;
  541. width:10em; text-align: left;
  542. // background: transparent url(../assets/img/readmore-btn.svg) no-repeat right center;
  543. @include bg-svg-png('readmore-btn', no-repeat, right, center);
  544. }
  545. }
  546. }
  547. .field-name-field-partie{clear:both;
  548. @media #{$medium-up} {
  549. padding-top:1em;
  550. }
  551. }
  552. $shadow-size:3.5em;
  553. .field-name-field-vignette{
  554. position:relative;
  555. float:left;
  556. padding:$shadow-size;
  557. margin-top:-$shadow-size*1.15;
  558. margin-right:-$shadow-size+1.5em;
  559. margin-bottom:0;
  560. margin-left:0;
  561. background-size: contain;
  562. // background-repeat: no-repeat;
  563. // background-origin: center center;
  564. img{
  565. width:65px; height:65px;
  566. }
  567. }
  568. .field-type-text{ min-width:16em; }
  569. .field-name-field-titre{
  570. font-family: "epflul";
  571. font-size:1.4em;
  572. line-height:1.1;
  573. }
  574. .field-name-field-sous-titre{
  575. font-family: "epflul";
  576. font-size:1.2em;
  577. line-height:1.2;
  578. }
  579. .field-name-field-description{
  580. // font-family: "epf-lul";
  581. font-size:0.88em;
  582. line-height:1;
  583. }
  584. .line{
  585. z-index:-1;
  586. position:absolute;
  587. top:$shadow-size - 0.5em; left:$shadow-size+2.5em;
  588. transform-origin:top left;
  589. width:2px; //background-color:red;
  590. opacity:0.4;
  591. }
  592. } // node-chapitre
  593. /* ____ ____ _______ ____________ ________ _____ ____ ________________ _____
  594. / __ \/ __ \/ ____/ | / / ____/ __ \ / ____/ / / / | / __ \/_ __/ ____/ __ \/ ___/
  595. / / / / /_/ / __/ / |/ / __/ / / / / / / / /_/ / /| | / /_/ / / / / __/ / /_/ /\__ \
  596. / /_/ / ____/ /___/ /| / /___/ /_/ / / /___/ __ / ___ |/ ____/ / / / /___/ _, _/___/ /
  597. \____/_/ /_____/_/ |_/_____/_____/ \____/_/ /_/_/ |_/_/ /_/ /_____/_/ |_|/____/
  598. */
  599. #chapter-wrapper{
  600. position:absolute;
  601. top:0; left:0;
  602. width:100%; height:100%;
  603. overflow:hidden;
  604. z-index: -1;
  605. opacity:0;
  606. transition:2s ease-out;
  607. transition-property:opacity;
  608. &.visible{
  609. opacity:1;
  610. z-index: 500;
  611. }
  612. #home-btn{
  613. @include bg-svg-png('home-btn');
  614. position:absolute;
  615. z-index:100; top:20px; left:20px;
  616. width:25px; height:20px; cursor:pointer;
  617. }
  618. /*
  619. _____ _____ __ _____ _____ _____ _____ __ __ _____ _____ ____ _____
  620. | | | | | | __ | __| | __ | | | | | | | \| __|
  621. | --| | | |__| | | -|__ | | __ -|_ _| | | | | | | | | __|
  622. |_____|_____|_____|_____|__|__|_____| |_____| |_| |_|___|_____|____/|_____|
  623. */
  624. // SOL
  625. #node-2{
  626. @include bg-svg-png('bgd-sol');
  627. .field-type-text-long .field-label,
  628. h2.node-title,
  629. .field-name-field-dbatre li:before,
  630. .field-name-field-partager .field-label{
  631. color:$SOL-col-active;
  632. }
  633. @media #{$small-only} {
  634. h2.node-title{
  635. @include bg-svg-png('title-SOL-activ');
  636. height:1.5em;
  637. }
  638. }
  639. @media #{$medium-up} {
  640. h2.node-title{@include bg-svg-png('title-SOL-blur');}
  641. }
  642. }
  643. // DPH
  644. #node-3{
  645. @include bg-svg-png('bgd-dph');
  646. .field-type-text-long .field-label,
  647. h2.node-title,
  648. .field-name-field-dbatre li:before,
  649. .field-name-field-partager .field-label{
  650. color:$DPH-col-active;
  651. }
  652. @media #{$small-only} {
  653. h2.node-title{
  654. @include bg-svg-png('title-DPH-activ');
  655. height:5em;
  656. }
  657. }
  658. @media #{$medium-up} {
  659. h2.node-title{@include bg-svg-png('title-DPH-blur');}
  660. }
  661. }
  662. // SUB
  663. #node-4{
  664. @include bg-svg-png('bgd-sub');
  665. .field-type-text-long .field-label,
  666. h2.node-title,
  667. .field-name-field-dbatre li:before,
  668. .field-name-field-partager .field-label{
  669. color:$SUB-col-active;
  670. }
  671. @media #{$small-only} {
  672. h2.node-title{
  673. @include bg-svg-png('title-SUB-activ');
  674. height:1.5em;
  675. }
  676. }
  677. @media #{$medium-up} {
  678. h2.node-title{@include bg-svg-png('title-SUB-blur');}
  679. }
  680. }
  681. // BC
  682. #node-5{
  683. @include bg-svg-png('bgd-bc');
  684. .field-type-text-long .field-label,
  685. h2.node-title,
  686. .field-name-field-dbatre li:before,
  687. .field-name-field-partager .field-label{
  688. color:$BC-col-active;
  689. }
  690. @media #{$small-only} {
  691. h2.node-title{
  692. @include bg-svg-png('title-BC-activ');
  693. height:4em;
  694. }
  695. }
  696. @media #{$medium-up} {
  697. h2.node-title{@include bg-svg-png('title-BC-blur');}
  698. }
  699. }
  700. // OPP
  701. #node-6{
  702. @include bg-svg-png('bgd-opp');
  703. .field-type-text-long .field-label,
  704. h2.node-title,
  705. .field-name-field-dbatre li:before,
  706. .field-name-field-partager .field-label{
  707. color:$OPP-col-active;
  708. }
  709. @media #{$small-only} {
  710. h2.node-title{
  711. @include bg-svg-png('title-OPP-activ');
  712. height:6em;
  713. }
  714. }
  715. @media #{$medium-up} {
  716. h2.node-title{@include bg-svg-png('title-OPP-blur');}
  717. }
  718. }
  719. // DUB
  720. #node-7{
  721. @include bg-svg-png('bgd-bub');
  722. .field-type-text-long .field-label,
  723. h2.node-title,
  724. .field-name-field-dbatre li:before,
  725. .field-name-field-partager .field-label{
  726. color:$DUB-col-active;
  727. }
  728. @media #{$small-only} {
  729. h2.node-title{
  730. @include bg-svg-png('title-DUB-activ');
  731. height:5em;
  732. }
  733. }
  734. @media #{$medium-up} {
  735. h2.node-title{@include bg-svg-png('title-DUB-blur');}
  736. }
  737. }
  738. // JUSO
  739. #node-8{
  740. @include bg-svg-png('bgd-juso');
  741. .field-type-text-long .field-label,
  742. h2.node-title,
  743. .field-name-field-dbatre li:before,
  744. .field-name-field-partager .field-label{
  745. color:$JUSO-col-active;
  746. }
  747. @media #{$small-only} {
  748. h2.node-title{
  749. @include bg-svg-png('title-JUSO-activ');
  750. height:3em;
  751. }
  752. }
  753. @media #{$medium-up} {
  754. h2.node-title{@include bg-svg-png('title-JUSO-blur');}
  755. }
  756. }
  757. /*
  758. _____ _____ _____ _____ _____ _____ _____ _____ _____
  759. | __| __| | | __| __ | | | | | __|
  760. | | | __| | | | __| -|- -| | | | | __|
  761. |_____|_____|_|___|_____|__|__|_____|__ _|_____|_____|
  762. |__|
  763. */
  764. .node{
  765. position:relative;
  766. height:100%; width:100%;
  767. a{color:inherit;}
  768. @media #{$small-only} {
  769. overflow-y:auto;
  770. }
  771. }
  772. .node-title{
  773. font-family: "epflulb";
  774. font-weight:normal;
  775. text-transform: uppercase;
  776. text-align: center;
  777. // max-width: 8.5em;
  778. line-height: 0.85;
  779. @media #{$small-only} {
  780. width:80%;
  781. margin:2em auto 1em;
  782. background-size: contain!important;
  783. background-position: center center;
  784. text-indent: -5000px;
  785. }
  786. @media #{$medium-up} {
  787. font-size: 2.268em;
  788. position:absolute; display:block;
  789. top:0; left:0; width:100%; height:100%;
  790. background-size: contain!important;
  791. text-indent: -5000px;
  792. z-index:-1;
  793. opacity:0.4;
  794. }
  795. }
  796. @media #{$medium-up} {
  797. .node>.field, .node>.block{
  798. position:absolute;
  799. }
  800. }
  801. .field-type-text-long, .field-type-text{
  802. background-color: rgba(255,255,255,0.9);
  803. min-height:5em; padding:1em;
  804. @media #{$small-only} {
  805. width:80%;
  806. margin:1em auto;
  807. }
  808. @media #{$medium-up} {
  809. width:19em;
  810. z-index:10;
  811. cursor:move;
  812. }
  813. .field-label{
  814. text-transform: uppercase;
  815. font-family: "epflulb";
  816. font-size:1.2em;
  817. }
  818. h2{
  819. font-size:0.80em;
  820. }
  821. p{
  822. font-size: 0.80em;
  823. margin-bottom:0.5em;
  824. }
  825. a{
  826. text-decoration: underline;
  827. }
  828. }
  829. .field-name-field-dbatre{
  830. left:60em;
  831. ul{
  832. margin:1em 0 1em 1em;
  833. li{
  834. list-style: none;
  835. line-height:1;
  836. margin-bottom: 1em;
  837. position:relative;
  838. font-size: 0.80em;
  839. &:before{
  840. content:"?";
  841. position:absolute;
  842. top:0; left:-1em;
  843. font-family: "epflul";
  844. }
  845. }
  846. }
  847. }
  848. @media #{$medium-up}{
  849. .field-name-field-partie{
  850. // position:absolute;
  851. height:60%; width:100%;
  852. top:20%; left:0;
  853. .field-items{
  854. position:relative;
  855. top:0; left:0;
  856. height:100%; width:auto;
  857. // overflow:hidden;
  858. .field{
  859. position:relative;
  860. display:inline-block;
  861. .mask{
  862. position:absolute;
  863. width:100%; height:85%;
  864. top:0; left:0;
  865. z-index:10;
  866. cursor:move;
  867. // background-color: rgba(150,250,250,0.2);
  868. }
  869. }
  870. }
  871. }
  872. }
  873. .field-name-field-partager{
  874. ul,li{margin:0; padding:0; list-style: none;}
  875. li{
  876. display:inline-block;
  877. width:35px; height:35px;
  878. }
  879. a{
  880. overflow:hidden;
  881. text-indent: -3000px;
  882. display:block; width:100%; height:100%;
  883. background-color: red;
  884. &.twitter-button{@include bg-svg-png('btn-twit');}
  885. &.fb-button{@include bg-svg-png('btn-fb');}
  886. &.mail-button{@include bg-svg-png('btn-mail');}
  887. }
  888. }
  889. } // #chapter-wrapper
  890. } // #main
  891. /* ______________ ________________ _ ______ ___ ____ ____ __________
  892. / ___/_ __/ |/_ __/ _/ ____/ | | / / __ \/ | / __ \/ __ \/ ____/ __ \
  893. \__ \ / / / /| | / / / // / | | /| / / /_/ / /| | / /_/ / /_/ / __/ / /_/ /
  894. ___/ // / / ___ |/ / _/ // /___ | |/ |/ / _, _/ ___ |/ ____/ ____/ /___/ _, _/
  895. /____//_/ /_/ |_/_/ /___/\____/ |__/|__/_/ |_/_/ |_/_/ /_/ /_____/_/ |_|
  896. */
  897. #static-wrapper{
  898. position:absolute;
  899. @media #{$small-only} {
  900. top:10%;
  901. bottom:0; right:0;
  902. width:100%;
  903. z-index: -1;
  904. }
  905. @media #{$medium-up} {
  906. top:15%; bottom:0; right:20px;
  907. width:80%; max-width:55em;
  908. z-index: -1;
  909. }
  910. background-color: #fff;
  911. opacity:0;
  912. transition:0.5s ease-out;
  913. transition-property:opacity;
  914. &.visible{
  915. opacity:0.9;
  916. transition:1.5s ease-out;
  917. z-index: 500;
  918. }
  919. >.close{
  920. position:absolute;
  921. @media #{$small-only} {
  922. top:10px; right:10px;
  923. z-index: 500;
  924. width:15px; height:15px;
  925. }
  926. @media #{$medium-up} {
  927. top:20px; right:20px;
  928. z-index: 500;
  929. width:25px; height:25px;
  930. }
  931. cursor:pointer;
  932. @include bg-svg-png('close');
  933. }
  934. >.inner{
  935. @media #{$small-only} {
  936. padding:1em 1em 1.5em;
  937. width:100%; height:100%; overflow:hidden;
  938. }
  939. @media #{$medium-up} {
  940. padding:5em 7em;
  941. width:100%; height:100%; overflow:hidden;
  942. }
  943. >.node{
  944. width:100%; height:100%; overflow-y:auto; overflow-x:hidden;
  945. padding-right:1.5em;
  946. }
  947. }
  948. h2.node-title{
  949. font-family: "epflulb";
  950. text-transform: uppercase!important;
  951. font-size:3em;
  952. color:#000;
  953. }
  954. .content{
  955. h3{
  956. font-family: "epflulb";
  957. font-size:2em;
  958. text-transform: uppercase!important;
  959. color:$static-col;
  960. }
  961. h4{
  962. // font-family: "epflulb";
  963. font-size: 1em;
  964. // // color:$static-col;
  965. font-weight: 700;
  966. }
  967. p{
  968. font-family: "open_sans", sans-serif;
  969. font-weight:600;
  970. font-size:0.85em;
  971. line-height:1.5em;
  972. }
  973. a{
  974. text-decoration:underline;
  975. }
  976. img.floatleft{float:left; margin-right:1em;}
  977. img.floatright{float:right; margin-left:1em;}
  978. }
  979. }
  980. /* __________ ____ ________________
  981. / ____/ __ \/ __ \/_ __/ ____/ __ \
  982. / /_ / / / / / / / / / / __/ / /_/ /
  983. / __/ / /_/ / /_/ / / / / /___/ _, _/
  984. /_/ \____/\____/ /_/ /_____/_/ |_|
  985. */
  986. #footer{
  987. position:fixed;
  988. bottom:0; right:20px;
  989. z-index:900;
  990. body.chapter-displayed &{
  991. display:none;
  992. }
  993. .block{
  994. display:inline-block;
  995. vertical-align: top;
  996. font-size:0.5em;
  997. p{font-size: inherit;}
  998. a{color:#000;}
  999. }
  1000. .block-menu{
  1001. display:block;
  1002. font-size:inherit;
  1003. ul{
  1004. margin:0; padding:0;
  1005. li{
  1006. @media #{$small-only} {
  1007. margin:0 0.1em 0.5em 0;
  1008. }
  1009. @media #{$medium-up} {
  1010. margin:0 1em 0 0;
  1011. }
  1012. padding:0;
  1013. display:inline-block;
  1014. list-style: none;
  1015. a{
  1016. font-family: "epflulb";
  1017. color:#000;
  1018. text-transform: uppercase;
  1019. @media #{$small-only} {
  1020. font-size:0.4em;
  1021. }
  1022. @media #{$medium-up} {
  1023. font-size:0.6em;
  1024. }
  1025. }
  1026. }
  1027. }
  1028. }
  1029. p{
  1030. margin:0;
  1031. }
  1032. #block-block-1{display:none;}
  1033. }
  1034. /*
  1035. __ ____________ ______
  1036. / |/ / _/ ___// ____/
  1037. / /|_/ // / \__ \/ /
  1038. / / / // / ___/ / /___
  1039. /_/ /_/___//____/\____/
  1040. */
  1041. #loader{
  1042. position:absolute;
  1043. top:50%; left:50%;
  1044. width:120px; height:4px;
  1045. margin-left:-60px; margin-top:-5px;
  1046. background: transparent url(../assets/img/loader.gif) no-repeat center center;
  1047. z-index:-1; opacity:0;
  1048. transition:0.5s ease-out;
  1049. transition-property:opacity;
  1050. body.loading &{
  1051. z-index: 1000;
  1052. opacity:1;
  1053. }
  1054. }
  1055. #fullscreen-btn{
  1056. position:fixed;
  1057. right:20px; top:20px;
  1058. z-index: 1000;
  1059. width:25px; height:20px;
  1060. text-indent: 200px; overflow:hidden;
  1061. cursor:pointer;
  1062. @include bg-svg-png('fullscreen-on');
  1063. .fullscreen &{
  1064. @include bg-svg-png('fullscreen-off');
  1065. }
  1066. }
  1067. @mixin bubble($w,$h,$bg){
  1068. position:absolute;
  1069. z-index:0;
  1070. display:block;
  1071. width:$w; height:$h;
  1072. // border:1px solid blue;
  1073. @include bg-svg-png($bg);
  1074. }
  1075. .bubble-1{
  1076. @include bubble(425px, 425px, 'bubble-01');
  1077. top:-200px; left:-200px;
  1078. }
  1079. .bubble-2{
  1080. @include bubble(885px, 885px, 'bubble-02');
  1081. bottom:-400px; right:-400px;
  1082. }
  1083. .star{
  1084. position:absolute;
  1085. z-index: 0; display:block;
  1086. width:10px; height:10px;
  1087. opacity:1;
  1088. @include bg-svg-png('star');
  1089. }
  1090. /*Remove Mozilla Firefox Border – Remove Dotted Line Around Link */
  1091. *{outline:0!important;}
  1092. /* ____ __________ __ ________
  1093. / __ \/ ____/ __ )/ / / / ____/
  1094. / / / / __/ / __ / / / / / __
  1095. / /_/ / /___/ /_/ / /_/ / /_/ /
  1096. /_____/_____/_____/\____/\____/
  1097. */
  1098. #fps{
  1099. position:fixed;
  1100. bottom:40px; left:20px;
  1101. z-index: 1000;
  1102. }
  1103. #nav-cursor{
  1104. position:absolute;
  1105. width:6px; height:6px;
  1106. margin-top: -3px; margin-left: -3px;
  1107. background-color: red;
  1108. z-index:1000;
  1109. }