Add landing page

private/assets/fonts/stylesheet.css

@@ -0,0 +1,72 @@
+/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on October 19, 2020 */
+
+
+
+@font-face {
+    font-family: 'nimbus_sans_lbold';
+    src: url('nimbussans-bol.woff2') format('woff2'),
+         url('nimbussans-bol.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+
+}
+
+
+
+
+@font-face {
+    font-family: 'nimbus_sans_lbold_italic';
+    src: url('nimbussans-bolita.woff2') format('woff2'),
+         url('nimbussans-bolita.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+
+}
+
+
+
+
+@font-face {
+    font-family: 'nimbus_sans_d_otlight';
+    src: url('nimbussans-light.woff2') format('woff2'),
+         url('nimbussans-light.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+
+}
+
+
+
+
+@font-face {
+    font-family: 'nimbus_sans_lregular';
+    src: url('nimbussans-reg.woff2') format('woff2'),
+         url('nimbussans-reg.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+
+}
+
+
+
+
+@font-face {
+    font-family: 'nimbus_sans_lregular_italic';
+    src: url('nimbussans-regita.woff2') format('woff2'),
+         url('nimbussans-regita.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+
+}
+
+
+
+
+@font-face {
+    font-family: 'nimbus_sans_d_otultra_light';
+    src: url('nimbussans-ultralight.woff2') format('woff2'),
+         url('nimbussans-ultralight.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+
+}

private/assets/images/circle.svg

@@ -0,0 +1,3 @@
+<svg width="10" height="10" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="8.5" cy="8.09998" r="8" fill="black"/>
+</svg>

private/assets/images/next.svg

@@ -0,0 +1,5 @@
+<svg width="38" height="32" viewBox="0 0 38 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.5 13.75H32V18.75H0.5V13.75Z" fill="black"/>
+<path d="M19.3345 28.0845L34.5845 12.8345L38.12 16.37L22.87 31.62L19.3345 28.0845Z" fill="black"/>
+<path d="M34.6072 19.8928L18.9999 4.28553L22.5355 0.75L38.1427 16.3573L34.6072 19.8928Z" fill="black"/>
+</svg>

private/assets/images/prev.svg

@@ -0,0 +1,5 @@
+<svg width="38" height="32" viewBox="0 0 38 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M38.1427 18.62L6.6427 18.62L6.6427 13.62L38.1427 13.62L38.1427 18.62Z" fill="black"/>
+<path d="M19.3082 4.28549L4.0582 19.5355L0.522664 16L15.7727 0.749954L19.3082 4.28549Z" fill="black"/>
+<path d="M4.03552 12.4772L19.6428 28.0845L16.1072 31.62L0.49999 16.0127L4.03552 12.4772Z" fill="black"/>
+</svg>

private/assets/js/main.js

@@ -0,0 +1,555 @@
+"use strict";
+
+var view;
+window.scrollTo(0, 0);
+document.addEventListener('DOMContentLoaded', function () {
+  window.onpopstate = function () {
+    window.location.href = window.location.href;
+  };
+
+  var mySwiper;
+  /* ====================
+  =======================
+        VIEW OBJECT
+  =======================
+  ==================== */
+
+  view = {
+    transTime: 250,
+    title: document.querySelector('title').textContent,
+    url: document.querySelector('title').dataset.url,
+    description: document.querySelector('meta[description]').getAttribute('description'),
+    device: '',
+    state: 'grid',
+    scrollPos: 0,
+    prevState: {
+      type: 'none',
+      url: '',
+      title: ''
+    },
+    header: {
+      container: document.querySelector('.header'),
+      logo: document.querySelector('.header__logo'),
+      logoOriginSize: parseInt(window.getComputedStyle(document.querySelector('.header__logo')).getPropertyValue('font-size')),
+      logoBtn: document.querySelector('.logoBtn'),
+      size: 'big',
+      btns: {
+        enable: true,
+        container: document.querySelector('.header__views'),
+        size: document.querySelectorAll('.views__btn--smaller, .views__btn--bigger'),
+        smaller: document.querySelector('.views__btn--smaller'),
+        bigger: document.querySelector('.views__btn--bigger'),
+        close: document.querySelector('.views__btn--close'),
+        list: document.querySelector('.views__btn--mobile'),
+        toClose: function toClose() {
+          if (window.innerWidth > 800) {
+            view.header.btns.size.forEach(function (btn) {
+              btn.classList.add('hide');
+              setTimeout(function () {
+                btn.style.display = 'none';
+              }, view.transTime);
+            });
+          } else {
+            view.header.btns.list.classList.add('hide');
+            setTimeout(function () {
+              view.header.btns.list.style.display = 'none';
+            }, view.transTime);
+          }
+
+          setTimeout(function () {
+            view.header.btns.close.style.display = 'block';
+            view.header.btns.close.classList.remove('hide');
+          }, view.transTime);
+        },
+        toSize: function toSize() {
+          view.header.btns.close.classList.remove('hide');
+          setTimeout(function () {
+            view.header.btns.close.style.display = 'none';
+            view.header.btns.size.forEach(function (btn) {
+              btn.style.display = 'block';
+              setTimeout(function () {
+                btn.classList.remove('hide');
+              }, 50);
+            });
+          }, view.transTime);
+        },
+        toMobileSize: function toMobileSize() {
+          view.header.btns.close.classList.remove('hide');
+          setTimeout(function () {
+            view.header.btns.close.style.display = 'none';
+            view.header.btns.list.style.display = 'block';
+
+            if (view.scrollPos !== 0) {
+              setTimeout(function () {
+                view.header.btns.list.classList.remove('hide');
+              }, 50);
+            }
+          }, view.transTime);
+        }
+      },
+      reduce: function reduce() {
+        if (view.header.size === 'big') {
+          view.header.size = 'normal';
+          view.header.logo.classList.remove('header__logo--big');
+          view.header.container.classList.remove('header--big');
+          setTimeout(function () {
+            view.grid.container.classList.remove('grid--distant');
+          }, 100);
+          setTimeout(function () {
+            view.header.btns.container.classList.remove('header__views--unvisible');
+            view.header.size = 'normal';
+          }, view.transTime);
+        }
+      },
+      toInfo: function toInfo() {
+        view.header.logo.textContent = 'INFO';
+      },
+      toName: function toName() {
+        view.header.logo.textContent = 'DATA';
+      }
+    },
+    grid: {
+      container: document.querySelector('.grid'),
+      blocks: document.querySelectorAll('.block'),
+      images: document.querySelectorAll('.block__image'),
+      showBlocks: function showBlocks(block) {
+        var image = block.querySelector('.block__image');
+
+        if (image.complete) {
+          setTimeout(function () {
+            block.parentNode.classList.remove('toProject--wait');
+            setTimeout(function () {
+              block.classList.remove('hide');
+            }, view.transTime);
+          }, 100);
+        } else {
+          image.addEventListener('load', function () {
+            block.parentNode.classList.remove('toProject--wait');
+            setTimeout(function () {
+              block.classList.remove('hide');
+            }, view.transTime);
+          });
+        }
+      },
+      smaller: function smaller() {
+        if (view.state === 'grid' && view.header.btns.enable === true) {
+          if (view.grid.container.classList.contains('grid--0')) {
+            view.grid.container.classList.remove('grid--full');
+            view.grid.blocks.forEach(function (block) {
+              block.querySelector('.block__image').classList.remove('block__image--full');
+            });
+            view.grid.container.classList.remove('grid--0');
+            view.grid.container.classList.add('grid--1');
+          } else if (view.grid.container.classList.contains('grid--1')) {
+            view.grid.container.classList.remove('grid--1');
+            view.grid.container.classList.add('grid--2');
+          } else if (view.grid.container.classList.contains('grid--2')) {
+            view.grid.container.classList.remove('grid--2');
+            view.grid.container.classList.add('grid--3');
+          } else if (view.grid.container.classList.contains('grid--3')) {
+            view.grid.container.classList.remove('grid--3');
+            view.grid.container.classList.add('grid--4');
+          } else if (view.grid.container.classList.contains('grid--4')) {
+            view.grid.container.classList.remove('grid--4');
+            view.grid.container.classList.add('grid--5');
+          } else if (view.grid.container.classList.contains('grid--5')) {
+            view.grid.container.classList.remove('grid--5');
+            view.grid.container.classList.add('list');
+            view.list.init();
+          }
+        }
+      },
+      bigger: function bigger() {
+        if (view.state !== 'project' && view.header.btns.enable === true) {
+          view.header.btns.enable = false; // if (view.grid.container.classList.contains('grid--0') !== true) {
+          //   view.grid.container.classList.add('hide')
+          //   view.list.container.classList.add('hide')
+          // }
+
+          if (view.grid.container.classList.contains('list')) {
+            view.list.toGrid();
+          } else if (view.grid.container.classList.contains('grid--5')) {
+            view.grid.container.classList.remove('grid--5');
+            view.grid.container.classList.add('grid--4');
+          } else if (view.grid.container.classList.contains('grid--4')) {
+            view.grid.container.classList.remove('grid--4');
+            view.grid.container.classList.add('grid--3');
+          } else if (view.grid.container.classList.contains('grid--3')) {
+            view.grid.container.classList.remove('grid--3');
+            view.grid.container.classList.add('grid--2');
+          } else if (view.grid.container.classList.contains('grid--2')) {
+            view.grid.container.classList.remove('grid--2');
+            view.grid.container.classList.add('grid--1');
+          } else if (view.grid.container.classList.contains('grid--1')) {
+            view.grid.container.classList.remove('grid--1');
+            view.grid.container.classList.add('grid--0');
+            view.grid.blocks.forEach(function (block) {
+              view.grid.container.classList.add('grid--full');
+              block.querySelector('.block__image').classList.add('block__image--full');
+            });
+          }
+
+          setTimeout(function () {
+            view.grid.container.classList.remove('hide');
+            view.header.btns.enable = true;
+          }, 100);
+        }
+      },
+      projects: document.querySelectorAll('.toProject')
+    },
+    project: {
+      container: document.querySelector('.project'),
+      init: function init(link, title, toHide, toFill) {
+        view.prevState.type = view.state;
+        view.prevState.url = '';
+        view.prevState.title = '';
+        view.state = 'project';
+        history.pushState(null, title, link);
+        toHide.classList.add('hide');
+        fetch(link).then(function (res) {
+          return res.text();
+        }).then(function (html) {
+          var domElement = document.createElement('div');
+          domElement.classList.add('test-container');
+          domElement.innerHTML = html;
+          var projectContent = domElement.querySelector('.projectContainer').innerHTML;
+          toFill.innerHTML = projectContent;
+          view.project.swiper.init();
+        }).then(function () {
+          document.querySelector('.toProjectDesc').addEventListener('click', function () {
+            console.log(document.querySelectorAll('.swiper-slide').length - 2);
+            mySwiper.slideTo(document.querySelectorAll('.swiper-slide').length - 2);
+          });
+          setTimeout(function () {
+            toFill.style.display = 'block';
+            setTimeout(function () {
+              view.project.fadeIn(toHide, toFill);
+            }, 50);
+          }, view.transTime);
+        });
+      },
+      fadeIn: function fadeIn(toHide, toFill) {
+        toHide.style.display = 'none';
+        toFill.style.display = 'block';
+        toFill.classList.remove('hide');
+        toHide.removeEventListener('transitionend', view.project.fadeIn());
+      },
+      close: function close() {
+        history.pushState(null, view.title, view.url);
+        console.log("view.state : ".concat(view.state));
+        console.log("prevState : ".concat(view.prevState.type));
+        view.project.container.classList.add('hide');
+        setTimeout(function () {
+          view.project.container.style.display = 'none';
+
+          if (view.prevState.type === 'list') {
+            var toShow = window.innerWidth > 800 ? view.list.container : view.list.mobileContainer;
+            toShow.style.display = 'block';
+            setTimeout(function () {
+              toShow.classList.remove('hide');
+              view.state = 'list';
+            }, 50);
+          } else if (view.prevState.type === 'grid' || view.prevState.type === 'agency') {
+            if (view.grid.container.classList.contains('list')) {
+              window.innerWidth > 800 ? view.list.container.style.display = 'block' : view.list.mobileContainer.style.display = 'block';
+              setTimeout(function () {
+                window.innerWidth > 800 ? view.list.container.classList.remove('hide') : view.list.mobileContainer.classList.remove('hide');
+                view.state = 'list';
+              }, 50);
+            } else {
+              window.innerWidth > 800 ? view.grid.container.style.display = 'grid' : view.grid.container.style.display = 'block';
+              setTimeout(function () {
+                view.grid.container.classList.remove('hide');
+                view.state = 'grid';
+              }, 50);
+            }
+          } else if (view.prevState.type === 'project') {
+            view.project.swiper.destroy();
+            view.project.init(view.prevState.url, view.prevState.title, document.querySelector('.project'), document.querySelector('.project'));
+          }
+        }, view.transTime);
+      },
+      swiper: {
+        init: function init() {
+          mySwiper = new Swiper('.swiper-container', {
+            // Optional parameters
+            direction: 'horizontal',
+            loop: true,
+            observer: true,
+            observeSlideChildren: true,
+            observeParents: true,
+            speed: 300,
+            autoplay: {
+              delay: 2000
+            },
+            // Responsive
+            breakpoints: {
+              800: {
+                speed: 500,
+                autoplay: false
+              }
+            },
+            // Navigation arrows
+            navigation: {
+              nextEl: '.swiper-button-next',
+              prevEl: '.swiper-button-prev'
+            },
+            // Keyboard control
+            keyboard: {
+              enabled: true
+            }
+          });
+        },
+        destroy: function destroy() {
+          mySwiper.destroy();
+        }
+      }
+    },
+    agency: {
+      init: function init(link, title, toHide, toFill) {
+        view.prevState.type = view.state;
+
+        if (view.state === 'grid' || view.state === 'list') {
+          view.prevState.url = '';
+          view.prevState.title = '';
+        } else if (view.state === 'project') {
+          view.prevState.url = window.location.href;
+          view.prevState.title = title;
+        }
+
+        view.state = 'agency';
+        history.pushState(null, title, link);
+        toHide.classList.add('hide');
+        fetch(link).then(function (res) {
+          return res.text();
+        }).then(function (html) {
+          var domElement = document.createElement('div');
+          domElement.classList.add('test-container');
+          domElement.innerHTML = html;
+          var pageContent = domElement.querySelector('.wrapper').innerHTML;
+          setTimeout(function () {
+            toFill.innerHTML = pageContent;
+            toFill.style.display = 'block';
+            setTimeout(function () {
+              view.project.fadeIn(toHide, toFill);
+            }, 50);
+          }, view.transTime);
+        });
+      }
+    },
+    list: {
+      container: document.querySelector('.list'),
+      mobileContainer: document.querySelector('.list--mobile'),
+      init: function init() {
+        var list = view.device === 'desktop' ? view.list.container : view.list.mobileContainer;
+        view.prevState.type = view.state;
+        view.prevState.url = '';
+        view.prevState.title = '';
+        view.state = 'list';
+        view.grid.container.style.display = 'none';
+        list.style.display = 'block';
+        setTimeout(function () {
+          list.classList.remove('hide');
+        }, 50);
+      },
+      toGrid: function toGrid() {
+        view.prevState.type = view.state;
+        view.state = 'grid';
+        view.grid.container.classList.remove('list');
+        view.grid.container.classList.add('grid--5');
+        window.innerWidth > 800 ? view.list.container.style.display = 'none' : view.list.mobileContainer.style.display = 'none';
+        view.grid.container.style.display = '';
+      }
+    }
+  };
+  /* ====================
+  =======================
+      INTERACTIONS
+  =======================
+  ==================== */
+  // =========================================== BLOCK FADE IN ON LOAD
+
+  if (window.innerWidth > 800) {
+    view.device = 'desktop';
+  } else {
+    view.device = 'mobile';
+  }
+
+  view.grid.blocks.forEach(function (block) {
+    view.grid.showBlocks(block);
+  }); // =========================================== LOGO STRETCHING
+
+  view.header.logo.style.fontSize = view.header.logoOriginSize;
+  var prevScrollPos = 0;
+  window.addEventListener('scroll', function (event) {
+    if (window.scrollY * -1.007 + view.header.logoOriginSize >= 40 && view.state !== 'agency' && view.state !== 'project') {
+      view.header.logo.style.fontSize = "".concat(window.scrollY * -1.007 + view.header.logoOriginSize, "px");
+
+      if (!view.header.btns.list.classList.contains('hide')) {
+        view.header.btns.list.classList.add('hide');
+      }
+    } else {
+      if (view.header.logo.style.fontSize !== '40 px') {
+        view.header.logo.style.fontSize = '40px';
+        view.header.btns.list.classList.remove('hide');
+      }
+    }
+  }); // =========================================== VIEW BUTTON
+
+  view.header.btns.smaller.addEventListener('click', function () {
+    view.grid.smaller();
+  });
+  view.header.btns.bigger.addEventListener('click', function () {
+    view.grid.bigger();
+  }); // =========================================== CLOSE BTN
+
+  view.header.btns.close.addEventListener('click', function () {
+    if (view.header.btns.enable === true) {
+      if (view.state === 'agency') {
+        view.header.toName();
+      }
+
+      if (view.state === 'project' || view.prevState.type === 'grid' || view.prevState.type === 'list') {
+        if (view.scrollPos === 0) {
+          view.header.logo.style.fontSize = view.header.logoOriginSize + 'px';
+          setTimeout(function () {
+            view.header.logo.style.transition = '';
+          }, 300);
+        } else {
+          setTimeout(function () {
+            window.scrollTo(0, view.scrollPos);
+            setTimeout(function () {
+              view.header.logo.style.transition = '';
+            }, 300);
+          }, 300);
+        }
+      }
+
+      view.project.close();
+
+      if (view.prevState.type !== 'project') {
+        if (window.innerWidth > 800) {
+          view.header.btns.toSize();
+        } else {
+          view.header.btns.toMobileSize();
+        }
+      }
+    }
+  });
+  view.header.btns.list.addEventListener('click', function () {
+    if (view.state === 'grid') {
+      view.state === 'list';
+      view.header.btns.list.querySelector('h1').textContent = 'images';
+      view.grid.container.classList.add('list');
+      view.list.init();
+    } else {
+      view.state === 'grid';
+      view.header.btns.list.querySelector('h1').textContent = 'liste';
+      view.grid.container.classList.remove('list');
+      view.list.toGrid();
+    }
+  });
+  document.addEventListener('keydown', function (event) {
+    if (view.state === 'project' && view.header.btns.enable === true && event.code === 'Escape') {
+      if (view.header.btns.enable === true) {
+        if (view.state === 'agency') {
+          view.header.toName();
+        }
+
+        if (view.state === 'project' || view.prevState.type === 'grid' || view.prevState.type === 'list') {
+          if (view.scrollPos === 0) {
+            view.header.logo.style.fontSize = view.header.logoOriginSize + 'px';
+            setTimeout(function () {
+              view.header.logo.style.transition = '';
+            }, 300);
+          } else {
+            setTimeout(function () {
+              window.scrollTo(0, view.scrollPos);
+              setTimeout(function () {
+                view.header.logo.style.transition = '';
+              }, 300);
+            }, 300);
+          }
+        }
+
+        view.project.close();
+
+        if (view.prevState.type !== 'project') {
+          if (window.innerWidth > 800) {
+            view.header.btns.toSize();
+          } else {
+            view.header.btns.toMobileSize();
+          }
+        }
+      }
+    }
+  });
+  document.querySelector('.grid, grid--mobile').addEventListener('click', function () {
+    if (view.header.size === 'big') {
+      view.header.reduce();
+    }
+  });
+  view.header.logo.addEventListener('mouseenter', function () {
+    if (view.state !== 'agency') {
+      view.header.toInfo();
+    }
+  });
+  view.header.logo.addEventListener('mouseleave', function () {
+    if (view.state !== 'agency') {
+      view.header.toName();
+    }
+  }); // /* ====================
+  // =======================
+  // --------- SPA ---------
+  // =======================
+  // ==================== */
+
+  document.querySelectorAll('.toProject, .list__project, .list__project--mobile').forEach(function (project) {
+    project.addEventListener('click', function (e) {
+      view.scrollPos = window.scrollY;
+      e.preventDefault();
+      view.header.logo.style.transition = 'font-size .3s ease-in-out';
+      setTimeout(function () {
+        view.header.logo.style.fontSize = '2.5rem';
+      }, 10);
+      view.header.btns.toClose();
+      var link = project.getAttribute('href');
+      var title = project.dataset.title;
+      var description = project.dataset.description;
+
+      if (view.state === 'list') {
+        window.innerWidth > 800 ? view.project.init(link, title, view.list.container, view.project.container) : view.project.init(link, title, view.list.mobileContainer, view.project.container);
+      } else {
+        view.project.init(link, title, view.grid.container, view.project.container);
+      }
+    });
+  }); // =========================================== LOGO BTN AGENCE
+
+  view.header.logoBtn.addEventListener('click', function (e) {
+    e.preventDefault();
+    view.scrollPos = window.scrollY;
+    view.header.logo.style.transition = 'font-size .3s ease-in-out';
+    setTimeout(function () {
+      view.header.logo.style.fontSize = '2.5rem';
+    }, 10);
+    view.header.btns.toClose();
+    var link = view.header.logoBtn.getAttribute('href');
+    var title = view.header.logoBtn.dataset.title;
+    setTimeout(function () {
+      window.scrollTo(0, 0);
+    }, 300);
+
+    if (view.state === 'list') {
+      window.innerWidth > 800 ? view.agency.init(link, title, view.list.container, view.project.container) : view.agency.init(link, title, view.list.mobileContainer, view.project.container);
+    } else if (view.state === 'project') {
+      view.agency.init(link, title, view.project.container, view.project.container);
+    } else if (view.state === 'grid') {
+      view.agency.init(link, title, view.grid.container, view.project.container);
+    }
+  });
+  /* ====================
+  =======================
+          END
+  =======================
+  ==================== */
+});

private/assets/style.css

@@ -0,0 +1,538 @@
+:root {
+  --transTime: 0.1s;
+}
+* {
+  margin: 0;
+  padding: 0;
+  text-decoration: none;
+  border: 0;
+  background-color: transparent;
+  font-family: "nimbus_regular", Arial;
+  color: #000;
+  cursor: url(./images/circle-black.png) 10 20, auto !important;
+}
+:focus,
+:active {
+  outline: 0;
+}
+body {
+  padding: 0 2vw 0 2vw;
+}
+p:not(:last-child) {
+  padding-bottom: 0.8rem;
+}
+h1 {
+  font-size: 1rem;
+}
+@font-face {
+  font-family: "nimbus_regular";
+  src: url("fonts/nimbussans-reg.woff2") format("woff2"),
+    url("fonts/nimbussans-reg.woff") format("woff");
+  font-weight: normal;
+  font-style: normal;
+}
+@font-face {
+  font-family: "nimbus_bold";
+  src: url("fonts/nimbussans-bol.woff2") format("woff2"),
+    url("fonts/nimbussans-bol.woff") format("woff");
+  font-weight: normal;
+  font-style: normal;
+}
+.hide {
+  opacity: 0 !important;
+}
+.header {
+  position: fixed;
+  z-index: 2;
+  top: 0;
+  left: 2vw;
+  width: 96vw;
+  padding: 1rem 0;
+  background-color: transparent;
+  display: flex;
+  justify-content: space-between;
+  transition: all var(--transTime) ease-in-out;
+  -webkit-transition: all var(--transTime) ease-in-out;
+  -moz-transition: all var(--transTime) ease-in-out;
+  -o-transition: all var(--transTime) ease-in-out;
+}
+.header--big {
+  padding: 0;
+}
+.header__logo {
+  font-size: 2.5rem;
+  font-family: Arial;
+}
+.header__logo--big {
+  font-size: 17rem;
+  will-change: font-size;
+}
+.logoBtn {
+  transform: translateX(-2px);
+}
+.views {
+  width: 6rem;
+  display: flex;
+  justify-content: flex-end;
+  opacity: 1;
+  position: fixed;
+  right: 2vw;
+  top: 1.4rem;
+  transition: all var(--transTime) ease-in-out;
+  -webkit-transition: all var(--transTime) ease-in-out;
+  -moz-transition: all var(--transTime) ease-in-out;
+  -o-transition: all var(--transTime) ease-in-out;
+}
+.header__views--unvisible {
+  opacity: 0;
+}
+.views__btn {
+  width: 2.5rem;
+  transition: all var(--transTime) ease;
+  -webkit-transition: all var(--transTime) ease;
+  -moz-transition: all var(--transTime) ease;
+  -o-transition: all var(--transTime) ease;
+}
+.views__btn--mobile {
+  display: none;
+  opacity: 1;
+  transition: all var(--transTime) ease;
+  -webkit-transition: all var(--transTime) ease;
+  -moz-transition: all var(--transTime) ease;
+  -o-transition: all var(--transTime) ease;
+}
+.views__btn--smaller {
+  transform: translateX(-1rem);
+}
+.views__btn--close {
+  display: none;
+  width: 2.5rem;
+}
+.views__btn img {
+  width: 80%;
+}
+.grid {
+  display: grid;
+  width: 100%;
+  padding: 22rem 0 8rem;
+  grid-auto-rows: 20vw;
+  gap: 4.5vw;
+  opacity: 1;
+  transition: opacity var(--transTime) ease-in-out,
+    transform var(--transTime) ease-in-out;
+  -webkit-transition: opacity var(--transTime) ease-in-out,
+    transform var(--transTime) ease-in-out;
+  -moz-transition: opacity var(--transTime) ease-in-out,
+    transform var(--transTime) ease-in-out;
+  -o-transition: opacity var(--transTime) ease-in-out,
+    transform var(--transTime) ease-in-out;
+}
+.grid--full {
+  grid-template-columns: 1fr;
+  grid-auto-rows: auto;
+}
+.grid--0 {
+  grid-template-columns: 1fr;
+}
+.grid--1 {
+  grid-template-columns: 1fr;
+  grid-auto-rows: 50vw;
+}
+.grid--2 {
+  grid-template-columns: 1fr 1fr;
+  grid-auto-rows: 45.3vw;
+}
+.grid--3 {
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-auto-rows: 28.7vw;
+}
+.grid--4 {
+  grid-template-columns: 1fr 1fr 1fr 1fr;
+  grid-auto-rows: 20.5vw;
+}
+.grid--5 {
+  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+  grid-auto-rows: 16vw;
+}
+.toProject {
+  opacity: 1;
+  background-color: rgba(0, 0, 0, 0);
+  transition: all var(--transTime) ease-in-out;
+  -webkit-transition: all var(--transTime) ease-in-out;
+  -moz-transition: all var(--transTime) ease-in-out;
+  -o-transition: all var(--transTime) ease-in-out;
+}
+.toProject--wait {
+  background-color: rgba(0, 0, 0, 0.1);
+}
+.block__image:hover {
+  -moz-filter: grayscale(100%);
+  -ms-filter: grayscale(100%);
+  -o-filter: grayscale(100%);
+  filter: grayscale(100%);
+}
+.block__image--full .block__image:hover {
+  -moz-filter: grayscale(0);
+  -ms-filter: grayscale(0);
+  -o-filter: grayscale(0);
+  filter: grayscale(0);
+}
+.block {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  transition: all var(--transTime) ease;
+  -webkit-transition: all var(--transTime) ease;
+  -moz-transition: all var(--transTime) ease;
+  -o-transition: all var(--transTime) ease;
+}
+.block__image {
+  max-width: 100%;
+  max-height: 92%;
+  align-self: baseline;
+  filter: grayscale(0);
+  opacity: 1;
+  -webkit-transition: all var(--transTime) ease;
+  -moz-transition: all var(--transTime) ease;
+  -o-transition: all var(--transTime) ease;
+}
+.block__caption {
+  font-size: 0.85rem;
+  padding-top: 0.6rem;
+}
+.block__ref {
+  text-transform: uppercase;
+  font-size: 0.65rem;
+  letter-spacing: 1px;
+}
+.block__image--full {
+  max-width: none !important;
+  max-height: none;
+  width: 100% !important;
+  height: auto;
+}
+.list {
+  padding: 22rem 0 8rem;
+  opacity: 1;
+  transition: all var(--transTime) ease;
+  -webkit-transition: all var(--transTime) ease;
+  -moz-transition: all var(--transTime) ease;
+  -o-transition: all var(--transTime) ease;
+}
+.list__project {
+  display: grid;
+  grid-template-columns: 0.7fr 1.6fr 0.8fr 1fr 1.2fr 1fr 0.6fr 0.6fr;
+  background-color: rgba(0, 0, 0, 0);
+  border-bottom: 1px solid rgba(0, 0, 0, 0);
+  border-top: 1px solid rgba(0, 0, 0, 0);
+  padding: 1rem 0 1rem 0;
+  transition: all var(--transTime) ease;
+  -webkit-transition: all var(--transTime) ease;
+  -moz-transition: all var(--transTime) ease;
+  -o-transition: all var(--transTime) ease;
+}
+.list__project:hover {
+  border-bottom: 1px solid rgba(0, 0, 0, 1);
+  border-top: 1px solid rgba(0, 0, 0, 1);
+}
+.cell {
+  height: 5rem;
+}
+.cell:not(:first-child) {
+  padding-left: 2rem;
+}
+.cell__image {
+  width: 100%;
+  height: 100%;
+  -o-object-fit: contain;
+  object-fit: contain;
+  -o-object-position: top left;
+  object-position: top left;
+}
+.cell__text--place,
+.cell__text--dates,
+.cell__text--architects,
+.cell__text--mo,
+.cell__text--size,
+.cell__text--budget,
+.cell__text--state {
+  text-transform: uppercase;
+  font-size: 0.7rem;
+  letter-spacing: 0.02rem;
+}
+.cell__text--ref {
+  font-size: 0.6rem;
+  letter-spacing: 1px;
+}
+.cell__text--title {
+  font-size: 0.8rem;
+}
+.project {
+  padding-top: 4rem;
+  opacity: 1;
+  transition: opacity var(--transTime) ease;
+  -webkit-transition: opacity var(--transTime) ease;
+  -moz-transition: opacity var(--transTime) ease;
+  -o-transition: opacity var(--transTime) ease;
+}
+.toProjectDesc {
+  z-index: 3;
+  position: fixed;
+  bottom: 0;
+  padding: 1rem 1rem 1rem 0;
+}
+.project__title {
+  font-weight: 500;
+}
+.project__title--ref {
+  text-transform: uppercase;
+  margin-right: 1rem;
+  font-size: 0.8rem;
+  letter-spacing: 0.1rem;
+}
+.swiper-container {
+  height: 83vh;
+}
+.swiper-slide__intro {
+  padding-top: 1rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+}
+.intro__recap {
+  transform: translateY(-2rem);
+  max-width: 20rem;
+  text-transform: uppercase;
+  font-size: 0.85rem;
+  margin-bottom: 1rem;
+}
+.recap__item:first-child {
+  border-top: 1px solid #000;
+  padding-top: 0.5rem;
+}
+.recap__item {
+  border-bottom: 1px solid #000;
+  margin-bottom: 0.5rem;
+  width: 100%;
+  display: inline-block;
+  padding-bottom: 0.2rem;
+}
+.swiper-slide__image {
+  -o-object-fit: contain;
+  object-fit: contain;
+  width: 100%;
+  height: 100%;
+}
+.swiper-button-next,
+.swiper-button-prev {
+  position: fixed !important;
+  top: 6rem !important;
+  height: 100% !important;
+  width: 50% !important;
+}
+.swiper-button-next::after,
+.swiper-button-prev::after {
+  content: "" !important;
+}
+.swiper-button-prev:hover {
+  cursor: url(./images/prev.svg) 25 25, auto !important;
+}
+.swiper-button-next:hover {
+  cursor: url(./images/next.svg) 25 25, auto !important;
+}
+.swiper-scrollbar {
+  display: none;
+}
+.wrapper {
+  padding-top: 4rem;
+}
+.agency {
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+  display: flex;
+  justify-content: left;
+}
+.agency__projects p {
+  line-height: 1.35;
+}
+.agency__presentation,
+.agency__projects {
+  width: 45%;
+  max-width: 660px;
+}
+.agency__projects {
+  margin-left: 15vw;
+  line-height: 1.4rem;
+}
+.agency h1 {
+  font-size: 0.95rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05rem;
+  margin: 1.2rem 0 0.7rem 0;
+}
+.majorProjects {
+  margin: 0 0 0.7rem 0 !important;
+}
+@media screen and (min-width: 1500px) {
+  .list__project {
+    grid-template-columns: 0.7fr 1.5fr 0.8fr 1fr 1.2fr 1fr 0.7fr 0.6fr;
+  }
+  .cell__text--ref {
+    font-size: 0.75rem;
+  }
+  .cell__text--title {
+    font-size: 1rem;
+  }
+  .cell__text--place,
+  .cell__text--dates,
+  .cell__text--architects,
+  .cell__text--mo,
+  .cell__text--size,
+  .cell__text--budget,
+  .cell__text--state {
+    font-size: 0.95rem;
+  }
+  .cell__text {
+    font-size: 0.95rem !important;
+  }
+}
+@media screen and (max-width: 800px) {
+  .grid--1 {
+    grid-auto-rows: 40rem;
+  }
+  .grid--2 {
+    grid-auto-rows: 30rem;
+  }
+  .grid--3 {
+    grid-auto-rows: 20rem;
+  }
+  a,
+  button {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+  }
+  .swiper-button-next,
+  .swiper-button-prev {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+  }
+  body {
+    padding: 0 5vw 0 5vw;
+  }
+  p {
+    font-size: 0.8rem;
+  }
+  .header {
+    left: 5vw;
+    width: 90vw;
+    background-color: #fff;
+  }
+  .views {
+    width: auto;
+    top: 1rem;
+    right: 5vw;
+  }
+  .views__btn {
+    display: none;
+  }
+  .views__btn--mobile {
+    display: block;
+  }
+  .header__logo,
+  .views__btn--mobile h1 {
+    font-family: Arial, sans-serif;
+    font-size: 2rem;
+    text-transform: uppercase;
+  }
+  .header__logo--big {
+    font-size: 34vw;
+  }
+  .views__btn img {
+    width: 60%;
+  }
+  .grid {
+    display: block;
+    padding: 13rem 0 8rem;
+  }
+  .grid--distant {
+    transform: translateY(5rem);
+  }
+  .toProject {
+    display: block;
+    margin-bottom: 3rem;
+    height: 55vw;
+  }
+  .block__image:hover {
+    -moz-filter: none;
+    -ms-filter: none;
+    -o-filter: none;
+    filter: none;
+  }
+  .block__image {
+    align-self: center;
+  }
+  .block__caption {
+    text-align: center;
+  }
+  .list--mobile {
+    margin-top: 11.5rem;
+    opacity: 1;
+    transition: opacity var(--transTime) ease;
+    -webkit-transition: opacity var(--transTime) ease;
+    -moz-transition: opacity var(--transTime) ease;
+    -o-transition: opacity var(--transTime) ease;
+  }
+  .projectLine--mobile {
+    display: grid;
+    grid-template-columns: 1fr 2fr;
+    padding-bottom: 2.5rem;
+  }
+  .projectLine__cell--summary--mobile {
+    margin-left: 1rem;
+  }
+  .cell__image--mobile {
+    width: 100%;
+  }
+  .cell__text--ref--mobile {
+    font-size: 0.6rem;
+  }
+  .project {
+    height: 90vh;
+  }
+  .swiper-slide__intro {
+    width: 100%;
+  }
+  .toProjectDesc {
+    width: 100vw;
+    left: 0;
+    padding: 0.5rem 5vw 0.5rem 5vw;
+    right: 0;
+    text-align: left;
+    background-color: #fff;
+  }
+  .wrapper {
+    padding-top: 4rem;
+  }
+  .agency {
+    display: block;
+  }
+  .agency__presentation,
+  .agency__projects {
+    width: 100%;
+  }
+  .agency__projects {
+    margin-left: 0;
+    margin-top: 2rem;
+  }
+}

private/assets/svg/bigger.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 130 130" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><g><rect x="0" y="54.167" width="129.167" height="20.833"/><path d="M54.167,0l-0,129.167l20.833,-0l-0,-129.167l-20.833,0Z"/></g></svg>

private/assets/svg/close.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 130 130" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><g><path d="M113.432,-0l-113.432,113.432l14.731,14.731l113.432,-113.432l-14.731,-14.731Z"/><path d="M-0,14.731l113.432,113.432l14.731,-14.731l-113.432,-113.432l-14.731,14.731Z"/></g></svg>

private/assets/svg/smaller.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 130 130" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><rect x="0" y="54.167" width="129.167" height="20.833"/></svg>