orchard

  1.menu-hamburger {
  2  position: fixed;
  3  top: 30px;
  4  right: 0;
  5  padding: 20px 15px;
  6  background: white;
  7  z-index: 5001;
  8  border: none;
  9}
 10
 11.menu-hamburger:hover * {
 12  width: 30px !important;
 13}
 14
 15@media (max-width: 1023.98px) {
 16  .menu-hamburger {
 17    top: 0;
 18    padding-bottom: 21px;
 19  }
 20}
 21
 22.menu-patty {
 23  background: black;
 24  width: 30px;
 25  height: 3px;
 26  margin-bottom: 5px;
 27  margin-left: auto;
 28  transition: width 250ms;
 29}
 30
 31.menu-patty:last-child {
 32  margin-bottom: 0;
 33}
 34
 35.menu-overlay {
 36  position: fixed;
 37  top: 0;
 38  right: 0;
 39  bottom: 0;
 40  left: 0;
 41  z-index: -5000;
 42  background: transparent;
 43  /* Held above the page for the whole slide-out, then dropped. Without the
 44     delay the panels would vanish behind the page the instant it closed. */
 45  transition: z-index 0s 500ms;
 46}
 47
 48.menu-overlay.is-open {
 49  z-index: 5000;
 50  transition-delay: 0s;
 51}
 52
 53.menu-overlayGrid {
 54  display: grid;
 55  grid-template-columns: 60% 40%;
 56}
 57
 58@media (max-width: 767.98px) {
 59  .menu-overlayGrid {
 60    grid-template-columns: 100%;
 61  }
 62}
 63
 64.menu-overlayGridLeft {
 65  grid-area: 1/1;
 66  display: flex;
 67  flex-direction: column;
 68  justify-content: center;
 69  align-items: center;
 70  background: white;
 71  transition: transform 500ms;
 72  transform: translateX(-100%);
 73}
 74
 75.menu-overlay.is-open .menu-overlayGridLeft {
 76  transform: translateX(0);
 77}
 78
 79.menu-overlayGridRight {
 80  grid-area: 1/2;
 81  position: relative;
 82  width: 100%;
 83  height: 100vh;
 84  overflow: hidden;
 85  transition: transform 500ms;
 86  transform: translateX(100%);
 87}
 88
 89.menu-overlay.is-open .menu-overlayGridRight {
 90  transform: translateX(0);
 91}
 92
 93.menu-overlayGridRight img {
 94  object-fit: cover;
 95  object-position: center;
 96  width: 100%;
 97  height: 100vh;
 98  display: block;
 99}
100
101.menu-overlayLink {
102  font-weight: 900;
103  text-decoration: none;
104  margin-bottom: 10px;
105  font-size: 3em;
106  color: black;
107  position: relative;
108}
109
110.menu-overlayLink:last-child {
111  margin-bottom: 0;
112}
113
114.menu-overlayLink::before {
115  content: attr(data-text);
116  color: white;
117  position: absolute;
118  width: 0;
119  left: 0;
120  bottom: 3px;
121  height: 27px;
122  background-color: black;
123  transition: width 200ms;
124  line-height: 0;
125  overflow: hidden;
126}
127
128.menu-overlayLink:hover::before {
129  width: 100%;
130}
131
132.menu-topBar {
133  display: flex;
134  width: 100%;
135  position: absolute;
136  left: 20px;
137  top: 20px;
138  align-items: center;
139  justify-content: flex-start;
140}
141
142.menu-topLink {
143  text-decoration: none;
144  color: white;
145  background-color: rgba(0, 0, 0, 1);
146  padding: 0.25rem 0.5rem;
147  margin-left: 1rem;
148  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
149  font-family: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono",
150    "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro",
151    "Fira Mono", "Droid Sans Mono", "Courier New", monospace;
152}
153
154.menu-topLink:hover {
155  background-color: rgba(0, 0, 0, 0.1);
156  color: black;
157}
158
159@media (max-width: 767.98px) {
160  .menu-topLink {
161    font-size: 0.8em;
162    margin-left: 0.5rem;
163  }
164}
165
166.menu-bottomBar {
167  display: flex;
168  width: 100%;
169  position: absolute;
170  left: 20px;
171  bottom: 20px;
172  align-items: center;
173}
174
175.menu-bar {
176  width: 100%;
177  height: 1px;
178  background: rgba(0, 0, 0, 0.3);
179  margin-left: 40px;
180  margin-right: 60px;
181}