reha.css 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216
  1. /*reha*/
  2. /*global*/
  3. /* Colors used for REHA */
  4. .field--type-link {
  5. width: 45%;
  6. text-transform: uppercase;
  7. padding: 1rem;
  8. border: solid black 1px;
  9. margin-bottom: 1rem;
  10. background-color: white; }
  11. /*marianne*/
  12. @font-face {
  13. font-family: 'Marianne';
  14. src: url("../fonts/Marianne/Marianne-Thin.woff2") format("woff2"), url("../fonts/Marianne/Marianne-Thin.woff") format("woff");
  15. font-weight: 300;
  16. font-style: normal; }
  17. @font-face {
  18. font-family: 'Marianne';
  19. src: url("../fonts/Marianne/Marianne-Thin_Italic.woff2") format("woff2"), url("../fonts/Marianne/Marianne-Thin_Italic.woff") format("woff");
  20. font-weight: 300;
  21. font-style: italic; }
  22. @font-face {
  23. font-family: 'Marianne';
  24. src: url("../fonts/Marianne/Marianne-Light.woff2") format("woff2"), url("../fonts/Marianne/Marianne-Light.woff") format("woff");
  25. font-weight: 400;
  26. font-style: normal; }
  27. @font-face {
  28. font-family: 'Marianne';
  29. src: url("../fonts/Marianne/Marianne-Light_Italic.woff2") format("woff2"), url("../fonts/Marianne/Marianne-Light_Italic.woff") format("woff");
  30. font-weight: 400;
  31. font-style: italic; }
  32. @font-face {
  33. font-family: 'Marianne';
  34. src: url("../fonts/Marianne/Marianne-Regular.woff2") format("woff2"), url("../fonts/Marianne/Marianne-Regular.woff") format("woff");
  35. font-weight: 600;
  36. font-style: normal; }
  37. @font-face {
  38. font-family: 'Marianne';
  39. src: url("../fonts/Marianne/Marianne-Regular_Italic.woff2") format("woff2"), url("../fonts/Marianne/Marianne-Regular_Italic.woff") format("woff");
  40. font-weight: 600;
  41. font-style: italic; }
  42. @font-face {
  43. font-family: 'Marianne';
  44. src: url("../fonts/Marianne/Marianne-Medium.woff2") format("woff2"), url("../fonts/Marianne/Marianne-Medium.woff") format("woff");
  45. font-weight: 800;
  46. font-style: normal; }
  47. @font-face {
  48. font-family: 'Marianne';
  49. src: url("../fonts/Marianne/Marianne-Medium_Italic.woff2") format("woff2"), url("../fonts/Marianne/Marianne-Medium_Italic.woff") format("woff");
  50. font-weight: 800;
  51. font-style: italic; }
  52. @font-face {
  53. font-family: 'Marianne';
  54. src: url("../fonts/Marianne/Marianne-Bold.woff2") format("woff2"), url("../fonts/Marianne/Marianne-Bold.woff") format("woff");
  55. font-weight: 900;
  56. font-style: normal; }
  57. @font-face {
  58. font-family: 'Marianne';
  59. src: url("../fonts/Marianne/Marianne-Bold_Italic.woff2") format("woff2"), url("../fonts/Marianne/Marianne-Bold_Italic.woff") format("woff");
  60. font-weight: 900;
  61. font-style: italic; }
  62. @font-face {
  63. font-family: 'Marianne';
  64. src: url("../fonts/Marianne/Marianne-ExtraBold.woff2") format("woff2"), url("../fonts/Marianne/Marianne-ExtraBold.woff") format("woff");
  65. font-weight: 1000;
  66. font-style: normal; }
  67. @font-face {
  68. font-family: 'Marianne';
  69. src: url("../fonts/Marianne/Marianne-ExtraBold_Italic.woff2") format("woff2"), url("../fonts/Marianne/Marianne-ExtraBold_Italic.woff") format("woff");
  70. font-weight: 1000;
  71. font-style: italic; }
  72. /*Font Awesome*/
  73. @font-face {
  74. font-family: 'Font Awesome';
  75. src: url("../fonts/Font Awesome/fontawesome-webfont.woff2") format("woff2");
  76. font-weight: 400;
  77. font-style: normal; }
  78. .layout-container {
  79. position: relative;
  80. width: 100vw;
  81. background-color: rgba(153, 147, 174, 0.1);
  82. font-family: 'Marianne';
  83. font-weight: 400;
  84. font-style: normal;
  85. margin: none;
  86. top: 0%;
  87. left: 0%;
  88. width: 100%;
  89. overflow: hidden;
  90. display: flex;
  91. flex-flow: row wrap; }
  92. .layout-container header {
  93. flex: 0 0 100%;
  94. height: 150px; }
  95. .layout-container main {
  96. position: relative; }
  97. .layout-container footer {
  98. flex: 0 0 100%; }
  99. .layout-content {
  100. padding-top: 7rem;
  101. padding-bottom: 6rem; }
  102. main {
  103. width: 100%; }
  104. .main-content {
  105. margin-top: 7rem; }
  106. ul {
  107. list-style-type: none; }
  108. a {
  109. text-decoration: none; }
  110. :link {
  111. color: black; }
  112. /*partials*/
  113. header {
  114. display: block;
  115. background-color: white;
  116. position: fixed;
  117. z-index: 99;
  118. width: 100vw;
  119. position: -webkit-sticky;
  120. position: sticky;
  121. top: 0; }
  122. header div {
  123. display: flex;
  124. flex-direction: row;
  125. justify-content: space-between; }
  126. header div #block-reha-logoministere {
  127. width: fit-content; }
  128. header div #block-reha-logoreha {
  129. max-height: 90%; }
  130. header div #block-reha-connexionutilisateur {
  131. display: flex;
  132. flex-direction: column;
  133. width: 15%; }
  134. header div #block-reha-connexionutilisateur .user-login-form {
  135. display: none; }
  136. header div #block-reha-connexionutilisateur ul {
  137. display: none; }
  138. header div #block-reha-config-pages {
  139. width: 15%;
  140. display: flex;
  141. flex-direction: column; }
  142. header div #block-reha-config-pages .config_pages--contact--full {
  143. display: none;
  144. /* Cacher initialement le contenu */ }
  145. header div #block-reha-config-pages .open {
  146. display: block; }
  147. header div #block-reha-config-pages .field--type-text-long {
  148. transition: height 0.5s;
  149. /* Animation de 0.5 seconde lors de l'expansion vers le bas */ }
  150. footer {
  151. background-color: white;
  152. font-family: "Marianne";
  153. font-weight: 800; }
  154. footer div {
  155. display: flex;
  156. flex: 1 1 120px;
  157. flex-direction: row; }
  158. footer div h2 {
  159. font-family: 'Marianne'; }
  160. #block-reha-pieddepage {
  161. font-size: 1.5rem; }
  162. #block-reha-operateurduprogramme {
  163. display: flex;
  164. flex-direction: column;
  165. border-left: #fdc300 solid 5px;
  166. border-right: #fdc300 solid 5px;
  167. padding-left: 3rem; }
  168. #block-reha-config-pages-2 {
  169. margin-left: 3rem;
  170. border: none;
  171. width: 20%;
  172. display: flex;
  173. flex-direction: column; }
  174. /*pages*/
  175. .layout--onecol {
  176. width: 70%;
  177. margin: auto;
  178. font-size: 1.5rem;
  179. font-weight: 400;
  180. font-style: normal; }
  181. .layout--onecol .block-region-content .block-block-content1ca95211-9fa2-4ef2-a460-8184d1eaf20f {
  182. display: flex;
  183. justify-content: flex-end; }
  184. .layout--onecol .block-region-content .block-block-content1ca95211-9fa2-4ef2-a460-8184d1eaf20f :hover {
  185. background-color: #fdc300; }
  186. .layout--onecol .block-region-content .block-block-content1dd151e8-8a8b-4586-9e62-8905ba0c93e0 {
  187. display: flex;
  188. justify-content: flex-end; }
  189. .layout--onecol .block-region-content .block-block-content1dd151e8-8a8b-4586-9e62-8905ba0c93e0 :hover {
  190. background-color: #fdc300; }