CSS   15

muscplume css

Guest on 22nd June 2022 02:21:12 PM

  1.  
  2. body {
  3.     font-family: 'Poppins';
  4.     font-size: 15px;
  5.     font-weight: 300;
  6.     overflow-x: hidden;
  7.     color: #000000;
  8. }
  9.  
  10. a, a:active, a:focus {
  11.     color: #000000;
  12.     text-decoration: none;
  13. }
  14.  
  15. a:hover {
  16.     color: #ab1321;
  17.     text-decoration: none;
  18. }
  19.  
  20. .rte b {
  21.     font-weight: 500;
  22. }
  23.  
  24. .red {
  25.     color: #ab1321;
  26. }
  27.  
  28. .loader {
  29.     background-color: #ffffff;
  30.     opacity: 0.5;
  31.     z-index: 999;
  32. }
  33.  
  34. .loader img {
  35.     position: absolute;
  36.     top: 50%;
  37.     left: 50%;
  38.     -webkit-transform: translateY(-50%) translateX(-50%);
  39.     -ms-transform: translateY(-50%) translateX(-50%);
  40.     transform: translateY(-50%) translateX(-50%);
  41. }
  42.  
  43. ul.musc-pager {
  44.     text-align: center;
  45.     margin: 24px 15px;
  46.     list-style: none;
  47.     padding: 0;
  48. }
  49.  
  50. ul.musc-pager li {
  51.     display: inline-block;
  52.     padding: 0 2px;
  53. }
  54.  
  55. ul.musc-pager li a {
  56.     text-decoration: none;
  57.  
  58. }
  59.  
  60. ul.musc-pager li.disabled a {
  61.     opacity: 0;
  62. }
  63.  
  64. ul.musc-pager li.current a {
  65.     color: #ab1321;
  66.     text-decoration: underline;
  67. }
  68.  
  69. .page-container {
  70.     margin: 0 auto;
  71.     overflow: hidden;
  72. }
  73.  
  74. /*
  75. Menu
  76. */
  77. .menu-bar {
  78.     position: absolute;
  79.     right: 65px;
  80.     top: 65px;
  81.     z-index: 999;
  82.     text-align: right;
  83. }
  84.  
  85. .menu-bar .icon-bar {
  86.     display: block;
  87.     width: 22px;
  88.     height: 2px;
  89.     border-radius: 1px;
  90.     background-color: #ab1321;
  91. }
  92.  
  93. .menu-bar .icon-bar + .icon-bar {
  94.     margin-top: 4px;
  95. }
  96.  
  97. .menu-bar-toggle {
  98.     display: none;
  99.     border: 1px solid #ab1321;
  100.     background-color: #ffffff;
  101.     border-radius: 4px;
  102.     padding: 9px 10px;
  103.     cursor: pointer;
  104. }
  105.  
  106. ul.menu {
  107.     display: inline-block;
  108.     font-weight: 500;
  109.     text-transform: uppercase;
  110.     list-style: none;
  111.     width: 100%;
  112. }
  113.  
  114. ul.menu .langs {
  115.     font-weight: 300;
  116.     font-size: 14px;
  117.     margin-bottom: 20px;
  118. }
  119.  
  120. ul.menu .langs .active {
  121.     color: #666666;
  122. }
  123.  
  124. .scrolled ul.menu {
  125.     display: none;
  126.     background: rgba(255, 255, 255, .8);
  127.     padding: 10px 10px 10px 50px;
  128. }
  129.  
  130. ul.sub-menu {
  131.     font-weight: 300;
  132.     font-size: 14px;
  133.     list-style: none;
  134.     text-align: right;
  135. }
  136.  
  137. .menu-bar.scrolled {
  138.     position: fixed;
  139.     top: 5px;
  140. }
  141.  
  142. .scrolled .menu-bar-toggle {
  143.     display: inline-block;
  144. }
  145.  
  146. @media (max-width: 767px) {
  147.     .menu-bar {
  148.         right: 5px;
  149.     }
  150. }
  151.  
  152. @media (max-width: 991px) {
  153.     .menu-bar.scrolled {
  154.         right: 5px;
  155.     }
  156. }
  157.  
  158. @media (min-width: 1330px) {
  159.     .scrolled ul.menu {
  160.         background: none;
  161.         display: inline-block !important;
  162.     }
  163.  
  164.     .scrolled .menu-bar-toggle {
  165.         display: none !important;
  166.     }
  167. }
  168.  
  169. /*
  170.  Accueil
  171.  */
  172.  
  173. .home {
  174.     width: 100vw;
  175.     height: 100vh;
  176. }
  177.  
  178. .home ul {
  179.     list-style: none;
  180.     margin: 0;
  181.     padding: 0;
  182.     width: 100%;
  183.     height: 100%;
  184.     overflow: hidden;
  185.     position: absolute;
  186. }
  187.  
  188. .home li {
  189.     position: absolute;
  190.     margin: 0;
  191.     width: 100%;
  192.     height: 100%;
  193. }
  194.  
  195. @media (min-aspect-ratio: 1920/1080) {
  196.     .home li img {
  197.         width: 100%;
  198.     }
  199. }
  200.  
  201. @media (max-aspect-ratio: 1919/1080) {
  202.     .home li img {
  203.         height: 100%;
  204.         position: relative;
  205.         left: 50%;
  206.         transform: translateX(-50%);
  207.     }
  208. }
  209.  
  210. .home .bandeau {
  211.     width: 100%;
  212.     position: absolute;
  213.     height: 33%;
  214.     bottom: 0;
  215. }
  216.  
  217. .home .bandeau .multiply-back {
  218.     position: absolute;
  219.     width: 100%;
  220.     height: 100%;
  221.     background-color: #ab1321;
  222.     mix-blend-mode: multiply;
  223.     z-index: 1;
  224. }
  225.  
  226. .home .bandeau .brand {
  227.     position: absolute;
  228.     top: 50%;
  229.     transform: translateY(-50%);
  230.     z-index: 2;
  231.     width: 100%;
  232.     height: 80%;
  233.     text-align: center;
  234. }
  235.  
  236. .home .bandeau .brand .logo {
  237.     position: absolute;
  238.     top: 0;
  239.     left: 50%;
  240.     transform: translateX(-50%);
  241.     -webkit-transform: translateX(-50%);
  242.     -ms-transform: translateX(-50%);
  243.     max-width: 80%;
  244. }
  245.  
  246. .home .bandeau .brand .down {
  247.     position: absolute;
  248.     bottom: 0;
  249.     text-align: center;
  250.     width: 100%;
  251. }
  252.  
  253. .home .bandeau .brand h1 {
  254.     margin: 0;
  255.     width: 100%;
  256.     color: #ffffff;
  257.     font-size: 28px;
  258.     text-transform: uppercase;
  259.     font-weight: 300;
  260.     position: absolute;
  261.     top: 50%;
  262.     left: 50%;
  263.     transform: translateX(-50%);
  264.     -webkit-transform: translateX(-50%);
  265.     -ms-transform: translateX(-50%);
  266. }
  267.  
  268. @media (max-width: 768px) {
  269.     .home .bandeau .brand h1 {
  270.         font-size: 20px;
  271.     }
  272. }
  273.  
  274. .expertises {
  275.     background: #ffffff url('../img/back-grey.png') repeat-x bottom;
  276. }
  277.  
  278. .contacts {
  279.     background-color: #f5f5f5;
  280. }
  281.  
  282. .equipe,
  283. .agence,
  284. .expertise-detail,
  285. .realisation-detail {
  286.     background-color: #ffffff;
  287. }
  288.  
  289. h2 {
  290.     font-size: 16px;
  291.     font-weight: 600;
  292.     text-transform: uppercase;
  293.     color: #ab1321;
  294.     text-align: center;
  295.     margin: 90px 0 40px 0;
  296. }
  297.  
  298. .realisation-detail h2 {
  299.     margin-bottom: 50px;
  300. }
  301.  
  302. h3 {
  303.     font-weight: 300;
  304.     font-size: 28px;
  305.     text-transform: uppercase;
  306.     text-align: center;
  307. }
  308.  
  309. .rte h3 {
  310.     text-align: left;
  311. }
  312.  
  313. .expertise-detail h3 {
  314.     margin: 0 0 20px 0;
  315. }
  316.  
  317. .agence h3 {
  318.     margin: 0 0 40px 0;
  319. }
  320.  
  321. .realisation-detail h3 {
  322.     font-size: 16px;
  323.     font-weight: 700;
  324.     color: #ab1321;
  325. }
  326.  
  327. .equipe h3::after,
  328. .agence h3::after,
  329. .expertise-detail h3::after,
  330. .news h3:after {
  331.     content: "-";
  332.     text-align: center;
  333.     display: block;
  334.     font-size: 15px;
  335.     color: #ab1321;
  336.     margin-top: 20px;
  337. }
  338.  
  339. .equipe h4 {
  340.     color: #ab1321;
  341.     font-weight: 500;
  342.     font-size: 16px;
  343. }
  344.  
  345. .realisation-detail h4 {
  346.     font-size: 24px;
  347.     font-weight: 300;
  348.     text-transform: uppercase;
  349. }
  350.  
  351. .equipe h5 {
  352.     color: #ab1321;
  353.     font-weight: 300;
  354.     font-size: 15px;
  355. }
  356.  
  357. .expertises .description {
  358.     padding: 0 15px;
  359.     text-align: justify;
  360. }
  361.  
  362. .expertises ul.thumbs,
  363. .realisations ul.thumbs {
  364.     list-style: none;
  365.     margin: 0 0 70px 0;
  366.     padding: 0;
  367. }
  368.  
  369. .expertises ul.thumbs li,
  370. .realisations ul.thumbs li {
  371.     margin: 0;
  372.     padding-top: 15px;
  373. }
  374.  
  375. .expertises ul.thumbs li.group {
  376.     text-align: center;
  377.     text-transform: uppercase;
  378.     font-size: 18px;
  379.     padding-top: 50px;
  380.     padding-bottom: 25px;
  381. }
  382.  
  383. .expertises .expertise {
  384.     position: relative;
  385.     overflow: hidden;
  386. }
  387.  
  388. .expertises .expertise img {
  389.     transition-duration: 0.3s;
  390. }
  391.  
  392. .expertises .expertise:hover img {
  393.     -webkit-transform: scale(1.1) !important;
  394.     transform: scale(1.1) !important;
  395.     z-index: 1;
  396. }
  397.  
  398. .expertises .expertise::before {
  399.     content: '';
  400.     display: block;
  401.     width: 100%;
  402.     position: absolute;
  403.     background-color: #ab1321;
  404.     mix-blend-mode: multiply;
  405.     bottom: 0;
  406.     height: 45px;
  407.     z-index: 2;
  408. }
  409.  
  410. .expertises .expertise-title {
  411.     width: 100%;
  412.     padding: 10px 0;
  413.     display: block;
  414.     position: absolute;
  415.     text-align: center;
  416.     color: #ffffff;
  417.     text-transform: uppercase;
  418.     font-weight: 500;
  419.     font-size: 16px;
  420.     z-index: 3;
  421.     bottom: 0;
  422. }
  423.  
  424. .realisations .realisation {
  425.     cursor: pointer;
  426.     background-color: #ab1321;
  427.     position: relative;
  428.     overflow: hidden;
  429.     padding-bottom: 90%;
  430. }
  431.  
  432. .realisations .realisation img {
  433.     position: absolute;
  434.     transition-duration: 0.3s;
  435. }
  436.  
  437. .realisations .realisation:hover img {
  438.     -webkit-transform: scale(1.1) !important;
  439.     transform: scale(1.1) !important;
  440. }
  441.  
  442. .realisations .realisation .client {
  443.     position: absolute;
  444.     min-width: 64%;
  445.     min-height: 35%;
  446.     background-color: #ffffff;
  447.     left: 18%;
  448.     top: 31.25%;
  449.     border: 3px solid #000000;
  450.     text-align: center;
  451. }
  452.  
  453. .realisations .realisation .client .client-name {
  454.     font-size: 16px;
  455.     font-weight: 500;
  456.     text-transform: uppercase;
  457.     position: absolute;
  458.     top: 50%;
  459.     left: 50%;
  460.     -webkit-transform: translateY(-50%) translateX(-50%);
  461.     -ms-transform: translateY(-50%) translateX(-50%);
  462.     transform: translateY(-50%) translateX(-50%);
  463. }
  464.  
  465. .equipe .left,
  466. .equipe .center,
  467. .equipe .right {
  468.     text-align: center;
  469.     position: relative;
  470.     height: 100%
  471. }
  472.  
  473. .equipe .portrait {
  474.     border-radius: 50%;
  475.     margin-bottom: 45px;
  476. }
  477.  
  478. .equipe .bio {
  479.     margin-top: 30px;
  480. }
  481.  
  482. .equipe .pico-logo {
  483.     margin-top: 100px;
  484. }
  485.  
  486. .agence .description {
  487.     text-align: justify;
  488. }
  489.  
  490. .equipe .link,
  491. .agence .link {
  492.     margin: 20px 0;
  493.     text-align: right;
  494. }
  495.  
  496. .agence .images {
  497.     position: relative;
  498. }
  499.  
  500. .agence .left,
  501. .agence .right {
  502.     width: 100%;
  503.     height: 100%;
  504.     position: absolute;
  505.     opacity: 0.2;
  506. }
  507.  
  508. .agence .left {
  509.     left: -100%;
  510.     text-align: right;
  511. }
  512.  
  513. .agence .right {
  514.     left: 100%;
  515.     text-align: left;
  516. }
  517.  
  518. .agence .left img,
  519. .agence .right img {
  520.     max-height: 100%;
  521. }
  522.  
  523. .realisation-detail .left-col {
  524.     text-align: center;
  525. }
  526.  
  527. .realisation-detail .left-col .description {
  528.     margin-bottom: 40px;
  529. }
  530.  
  531. @media (min-width: 768px) {
  532.     .realisation-detail .image1 {
  533.         max-width: 110%;
  534.         position: absolute;
  535.         z-index: 1;
  536.     }
  537.  
  538.     .realisation-detail .image2 {
  539.         position: relative;
  540.     }
  541. }
  542.  
  543. .expertise-container {
  544.     position: relative;
  545.     width: 100%;
  546.     overflow: hidden;
  547. }
  548.  
  549. .expertise-detail .background {
  550.     position: absolute;
  551.     height: 100%;
  552.     min-width: 100%;
  553.     left: 50%;
  554.     -webkit-transform: translateX(-50%);
  555.     -ms-transform: translateX(-50%);
  556.     transform: translateX(-50%);
  557. }
  558.  
  559. .realisation-detail .col-ten,
  560. .expertise-detail .col-ten {
  561.     width: 83.333%;
  562.     margin: 0 auto;
  563.     position: relative;
  564. }
  565.  
  566. .expertise-detail .description {
  567.     margin-top: 90px;
  568. }
  569.  
  570. .realisation-detail .previous,
  571. .realisation-detail .next,
  572. .expertise-detail .previous,
  573. .expertise-detail .next {
  574.     position: absolute;
  575.     width: 100%;
  576.     top: 50%;
  577.     -webkit-transform: translateY(-50%);
  578.     -ms-transform: translateY(-50%);
  579.     transform: translateY(-50%);
  580. }
  581.  
  582. .realisation-detail .previous,
  583. .expertise-detail .previous {
  584.     left: -100%;
  585.     text-align: right;
  586.     -webkit-transform: translateX(-20px);
  587.     -ms-transform: translateX(-20px);
  588.     transform: translateX(-20px);
  589. }
  590.  
  591. .realisation-detail .next,
  592. .expertise-detail .next {
  593.     left: 100%;
  594.     -webkit-transform: translateX(20px);
  595.     -ms-transform: translateX(20px);
  596.     transform: translateX(20px);
  597. }
  598.  
  599. .expertise-detail .back,
  600. .realisation-detail .back {
  601.     text-align: right;
  602.     margin: 30px 0;
  603. }
  604.  
  605. .expertise-detail .back {
  606.     margin-bottom: 90px;
  607. }
  608.  
  609. .realisation-detail .separator {
  610.     margin-bottom: 10px;
  611.     color: #ab1321;
  612.     display: inline-block;
  613. }
  614.  
  615. .contacts .google-map {
  616.     margin-top: 40px;
  617.     height: 400px;
  618. }
  619.  
  620. .contacts form p {
  621.     display: none;
  622.     padding: 15px;
  623.     margin-bottom: 20px;
  624. }
  625.  
  626. .contacts label {
  627.     font-weight: 300;
  628. }
  629.  
  630. .contacts textarea,
  631. .contacts input {
  632.     border: 1px solid #c8c8c8;
  633.     border-radius: 2px;
  634.     width: 100%;
  635.     margin-bottom: 20px;
  636. }
  637.  
  638. .contacts input[type="checkbox"] {
  639.     width: auto;
  640.     margin-right: 10px;
  641. }
  642.  
  643. .contacts input[type="submit"] {
  644.     background: none;
  645.     background-color: #ab1321;
  646.     color: #ffffff;
  647.     text-transform: uppercase;
  648.     padding: 3px 10px;
  649.     font-weight: 500;
  650.     width: auto;
  651. }
  652.  
  653. .footer {
  654.     background-color: #ab1321;
  655.     color: #ffffff;
  656.     text-align: center;
  657.     padding: 55px 0;
  658. }
  659.  
  660. .footer ul {
  661.     padding: 0;
  662.     margin: 30px 0;
  663.     list-style: none;
  664. }
  665.  
  666. .footer li {
  667.     display: inline-block;
  668.     cursor: pointer;
  669. }
  670.  
  671. .footer a,
  672. .footer a:focus {
  673.     color: #ffffff;
  674. }
  675.  
  676. .footer a:hover {
  677.     color: #000000;
  678. }
  679.  
  680. .modal-back {
  681.     position: fixed;
  682.     top: 0;
  683.     left: 0;
  684.     width: 100vw;
  685.     height: 100vh;
  686.     background: rgba(171, 19, 32, 0.8);
  687.     z-index: 998;
  688. }
  689.  
  690. .modal-frame {
  691.     position: fixed;
  692.     top: 10vh;
  693.     left: 10vw;
  694.     width: 80vw;
  695.     height: 80vh;
  696.     background: #ffffff;
  697.     z-index: 999;
  698.     overflow-y: scroll;
  699.     padding: 0 2vw 2vh 2vw;
  700. }
  701.  
  702. .modal-close {
  703.     position: fixed;
  704.     top: 11vh;
  705.     right: 11vw;
  706.     cursor: pointer;
  707. }
  708.  
  709. .news {
  710.     overflow: hidden;
  711.     position: relative;
  712.     padding: 80px 0;
  713. }
  714.  
  715. .news .background {
  716.     position: absolute;
  717.     min-width: 100%;
  718.     left: 50%;
  719.     bottom: 0;
  720.     -webkit-transform: translateX(-50%);
  721.     -ms-transform: translateX(-50%);
  722.     transform: translateX(-50%);
  723. }
  724.  
  725. .news p {
  726.     text-align: justify;
  727. }
  728.  
  729. .news a.more {
  730.     display: block;
  731.     text-align: right;
  732. }
  733.  
  734. .news a.blog {
  735.     display: block;
  736.     text-align: center;
  737.     margin-top: 40px;
  738.     font-weight: 500;
  739.     font-size: 16px;
  740.     text-transform: uppercase;
  741.     color: #ab1321;
  742. }

Raw Paste


Login or Register to edit or fork this paste. It's free.