orchard

  1@use "variables" as *;
  2
  3// Bootstrap 5.3 writes defaults into `:root,[data-bs-theme=light]`. Use
  4// `html:root` so we outrank the default block and enforce the dark palette.
  5html:root {
  6  --bs-body-bg: #{$body-bg};
  7  --bs-body-color: #{$body-color};
  8  --bs-body-bg-rgb: 14, 13, 10;
  9  --bs-body-color-rgb: 221, 215, 205;
 10  --bs-emphasis-color: #{$white};
 11  --bs-secondary-bg: #{$card-bg};
 12  --bs-tertiary-bg: #18160f;
 13  --bs-border-color: rgba(107, 158, 120, 0.3);
 14  --bs-link-color-rgb: 125, 184, 140;
 15  --bs-link-hover-color-rgb: 149, 204, 162;
 16  --bs-heading-color: #{$white};
 17}
 18
 19body {
 20  min-height: 100vh;
 21  display: flex;
 22  flex-direction: column;
 23  -webkit-font-smoothing: antialiased;
 24  -moz-osx-font-smoothing: grayscale;
 25  letter-spacing: 0.01em;
 26  background-color: $body-bg !important;
 27  color: $body-color;
 28
 29  // The structural grid the whole estate sits on. 32px because that is the
 30  // padding rhythm the panels already use, and low enough alpha that it reads
 31  // as texture rather than as a table. Green here where dash is amber, and a
 32  // touch more alpha to match, since green at this value reads fainter.
 33  background-image:
 34    linear-gradient(rgba(107, 158, 120, 0.028) 1px, transparent 1px),
 35    linear-gradient(90deg, rgba(107, 158, 120, 0.028) 1px, transparent 1px);
 36  background-size: 32px 32px;
 37  background-position: center top;
 38}
 39
 40main { flex: 1; }
 41
 42// The keyboard focus ring, and the selection colour. repos has had both since
 43// it was written and the other four had neither, so a tab through a form here
 44// depended on whatever Bootstrap happened to do per component.
 45:focus-visible {
 46  outline: 2px solid $green;
 47  outline-offset: 2px;
 48  border-radius: 2px;
 49}
 50
 51::selection { background: rgba(107, 158, 120, 0.3); }
 52
 53
 54.vh-100 { height: 100vh; }
 55
 56
 57.logo {
 58  display: inline-flex;
 59  align-items: center;
 60  justify-content: center;
 61  width: 28px;
 62  height: 28px;
 63  text-decoration: none !important;
 64  transition: transform 250ms ease;
 65
 66  svg {
 67    width: 100%;
 68    height: 100%;
 69    display: block;
 70  }
 71
 72  &:hover {
 73    transform: translateY(-1px);
 74  }
 75
 76  &.logo-sm {
 77    width: 18px;
 78    height: 18px;
 79  }
 80}
 81
 82// `min-height` rather than `height`, so the bar grows when the mobile collapse
 83// opens. At a fixed height the open menu is painted over by the siblings below.
 84
 85.navbar {
 86  min-height: 52px;
 87  padding: 0;
 88  background: #090806 !important;
 89  border-bottom: 1px solid rgba(107, 158, 120, 0.3);
 90
 91  > .container {
 92    min-height: 52px;
 93  }
 94
 95  .navbar-brand {
 96    display: flex;
 97    align-items: center;
 98    gap: 0.6rem;
 99    color: $white;
100    font-weight: 600;
101    letter-spacing: 0.1em;
102    text-transform: uppercase;
103    font-size: 0.78rem;
104    text-decoration: none;
105
106    .brand-text { color: $white; }
107    .brand-dot {
108      display: inline-block;
109      width: 6px; height: 6px; border-radius: 50%;
110      background: $green;
111    }
112  }
113
114  .navbar-toggler {
115    color: rgba(221, 215, 205, 0.7);
116    padding: 0.35rem 0.55rem;
117    font-size: 1rem;
118
119    &:focus { box-shadow: none; }
120  }
121
122  .nav-link {
123    font-size: 0.8rem;
124    font-weight: 500;
125    letter-spacing: 0.05em;
126    text-transform: lowercase;
127    padding-left: 1rem !important;
128    padding-right: 1rem !important;
129    color: rgba(221, 215, 205, 0.6);
130    position: relative;
131    transition: color 200ms ease;
132
133    &::after {
134      content: '';
135      position: absolute;
136      bottom: 2px;
137      left: 1rem;
138      right: 1rem;
139      height: 1px;
140      background: $green;
141      transform: scaleX(0);
142      transition: transform 250ms ease;
143    }
144
145    &:hover,
146    &.active { color: $white; }
147
148    &:hover::after,
149    &.active::after { transform: scaleX(1); }
150  }
151
152  @media (max-width: 767.98px) {
153    .navbar-collapse {
154      width: 100%;
155      border-top: 1px solid rgba(107, 158, 120, 0.3);
156      margin-top: 0.25rem;
157      padding: 0.4rem 0 0.6rem;
158    }
159
160    .navbar-nav {
161      margin-left: 0 !important;
162      width: 100%;
163    }
164
165    .nav-link {
166      padding: 0.65rem 0.75rem !important;
167      border-left: 2px solid transparent;
168      border-radius: 2px;
169      transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
170
171      &::after { display: none; }
172
173      &:hover {
174        background: rgba(221, 215, 205, 0.04);
175        color: $white;
176      }
177
178      &.active {
179        color: $white;
180        border-left-color: $green;
181        background: rgba(107, 158, 120, 0.08);
182      }
183    }
184
185    .navbar-nav.ms-auto {
186      margin-top: 0.5rem;
187      padding-top: 0.6rem;
188      border-top: 1px solid rgba(107, 158, 120, 0.3);
189
190      .nav-item { width: 100%; }
191
192      .btn,
193      form,
194      .d-inline { width: 100%; }
195
196      .btn { width: 100%; }
197    }
198  }
199}
200
201.breadcrumb-bar {
202  background: rgba(107, 158, 120, 0.02);
203  border-bottom: 1px solid rgba(107, 158, 120, 0.2);
204
205  .breadcrumb { font-family: $font-family-monospace; }
206}
207
208.section-label {
209  font-size: 0.7rem;
210  font-weight: 600;
211  letter-spacing: 0.12em;
212  text-transform: uppercase;
213  color: $amber;
214  font-family: $font-family-monospace;
215}
216
217.card {
218  background: $card-bg;
219  border: 1px solid $card-border-color;
220  transition: border-color 250ms ease;
221
222  &:hover { border-color: rgba(107, 158, 120, 0.2); }
223}
224
225.status-dot {
226  display: inline-block;
227  width: 8px; height: 8px;
228  border-radius: 50%;
229  margin-right: 0.55rem;
230  vertical-align: middle;
231  flex-shrink: 0;
232
233  &.status-dot-lg {
234    width: 14px; height: 14px;
235    margin-right: 0;
236  }
237
238  &.is-up { background: $green; box-shadow: 0 0 0 3px rgba(107, 158, 120, 0.12); }
239  &.is-down { background: $terracotta; box-shadow: 0 0 0 3px rgba(196, 112, 85, 0.12); }
240  &.is-warn { background: $amber; box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.12); }
241  &.is-idle { background: #4a443c; }
242}
243
244.toggle-label {
245  font-family: $font-family-monospace;
246  font-size: 0.68rem;
247  font-weight: 600;
248  letter-spacing: 0.12em;
249  text-transform: uppercase;
250  color: $gray-400;
251  cursor: help;
252}
253
254.toggle-pill {
255  display: inline-flex;
256  align-items: stretch;
257  border: 1px solid rgba(107, 158, 120, 0.22);
258  border-radius: 999px;
259  overflow: hidden;
260  cursor: pointer;
261  background: #0e0d0a;
262  margin: 0;
263  user-select: none;
264  line-height: 1;
265
266  input {
267    position: absolute;
268    opacity: 0;
269    pointer-events: none;
270    width: 0; height: 0;
271  }
272
273  .toggle-pill-seg {
274    padding: 0.45rem 0.9rem;
275    font-family: $font-family-monospace;
276    font-size: 0.7rem;
277    font-weight: 600;
278    letter-spacing: 0.08em;
279    text-transform: uppercase;
280    color: $gray-500;
281    transition: background 180ms ease, color 180ms ease;
282  }
283
284  input ~ .toggle-pill-private {
285    background: rgba(201, 168, 76, 0.12);
286    color: #ddc06a;
287  }
288
289  input:checked ~ .toggle-pill-private {
290    background: transparent;
291    color: $gray-500;
292  }
293  input:checked ~ .toggle-pill-public {
294    background: $green-dim;
295    color: $green-bright;
296  }
297
298  &:hover {
299    border-color: rgba(107, 158, 120, 0.35);
300  }
301}
302
303.metric-tile {
304  background: $card-bg;
305  border: 1px solid $card-border-color;
306  border-radius: $border-radius;
307  padding: 1rem 1.15rem;
308  height: 100%;
309  display: flex;
310  flex-direction: column;
311
312  .metric-header {
313    display: flex;
314    align-items: center;
315    gap: 0.5rem;
316    min-height: 1.3rem;
317  }
318
319  // The grow belongs to the header row, where the label shares a line with the
320  // delta chip. A tile without a header puts the label straight into the column
321  // flex, where flex:1 makes it eat the height and drop the number to the
322  // bottom of the tile.
323  .metric-header .metric-label {
324    flex: 1;
325    min-width: 0;
326  }
327
328  .metric-label {
329    font-size: 0.68rem;
330    font-weight: 600;
331    letter-spacing: 0.12em;
332    text-transform: uppercase;
333    color: $gray-400;
334  }
335
336  .metric-value {
337    font-size: 1.75rem;
338    font-weight: 700;
339    line-height: 1.1;
340    color: $white;
341    margin-top: 0.35rem;
342    letter-spacing: -0.01em;
343    word-break: break-word;
344  }
345
346  .metric-sub {
347    font-size: 0.72rem;
348    color: $gray-400;
349    margin-top: auto;
350    padding-top: 0.35rem;
351    letter-spacing: 0.02em;
352  }
353
354  .metric-delta {
355    flex-shrink: 0;
356    font-family: $font-family-monospace;
357    font-size: 0.75rem;
358    font-weight: 600;
359    letter-spacing: 0.04em;
360    padding: 0.22rem 0.5rem;
361    border-radius: 2px;
362    border: 1px solid transparent;
363    line-height: 1;
364
365    &.is-up {
366      color: $green-bright;
367      background: $green-dim;
368      border-color: $green-border;
369    }
370    &.is-down {
371      color: #e38871;
372      background: $terracotta-dim;
373      border-color: $terracotta-border;
374    }
375    &.is-flat {
376      color: $gray-400;
377      background: rgba(221, 215, 205, 0.04);
378      border-color: rgba(221, 215, 205, 0.08);
379    }
380  }
381
382  &.metric-accent-green {
383    border-color: $green-border;
384    .metric-value { color: $green-bright; }
385  }
386  &.metric-accent-amber {
387    border-color: $amber-border;
388    .metric-value { color: #ddc06a; }
389  }
390  &.metric-accent-danger {
391    border-color: $terracotta-border;
392    .metric-value { color: #d88870; }
393  }
394}
395
396.chip {
397  display: inline-flex;
398  align-items: center;
399  gap: 0.4rem;
400  font-family: $font-family-monospace;
401  font-size: 0.7rem;
402  font-weight: 600;
403  letter-spacing: 0.05em;
404  text-transform: uppercase;
405  padding: 0.3rem 0.6rem;
406  border-radius: 2px;
407  border: 1px solid transparent;
408  line-height: 1;
409
410  &.chip-ok {
411    background: $green-dim;
412    color: $green-bright;
413    border-color: $green-border;
414  }
415  &.chip-down {
416    background: $terracotta-dim;
417    color: #e38871;
418    border-color: $terracotta-border;
419  }
420  &.chip-warn {
421    background: $amber-dim;
422    color: #ddc06a;
423    border-color: $amber-border;
424  }
425  &.chip-info {
426    background: rgba(126, 170, 184, 0.08);
427    color: #9ec5d2;
428    border-color: rgba(126, 170, 184, 0.22);
429  }
430  &.chip-muted {
431    background: rgba(221, 215, 205, 0.04);
432    color: $gray-400;
433    border-color: rgba(221, 215, 205, 0.08);
434  }
435}
436
437footer {
438  padding-top: 4rem;
439  padding-bottom: 3rem;
440  position: relative;
441  background: #090806;
442  border-top: 1px solid rgba(107, 158, 120, 0.3);
443
444  .h5 {
445    font-size: 0.7rem;
446    letter-spacing: 0.12em;
447    text-transform: uppercase;
448    color: $amber;
449    font-weight: 600;
450  }
451
452  p {
453    color: rgba(221, 215, 205, 0.5);
454    font-size: 0.85rem;
455    line-height: 1.75;
456
457    a {
458      color: rgba(221, 215, 205, 0.75);
459      text-decoration: underline;
460      text-underline-offset: 2px;
461
462      &:hover { color: $white; }
463    }
464  }
465
466  .links {
467    padding-top: 2rem;
468    padding-bottom: 1rem;
469  }
470}
471
472.footer-bar {
473  background: #050403;
474  border-top: 1px solid rgba(107, 158, 120, 0.2);
475  padding: 0.8rem 0;
476  color: rgba(221, 215, 205, 0.3);
477  font-size: 0.78rem;
478
479  small { color: rgba(221, 215, 205, 0.3); }
480
481  &-link {
482    color: rgba(221, 215, 205, 0.3);
483    transition: color 200ms ease;
484
485    &:hover { color: $white; }
486  }
487}
488
489.terminal-block {
490  background: rgba(9, 8, 6, 0.7);
491  border: 1px solid rgba(107, 158, 120, 0.15);
492  border-radius: $border-radius;
493  font-family: $font-family-monospace;
494  font-size: 0.8rem;
495  color: $green-bright;
496  padding: 1rem 1.2rem;
497  line-height: 1.8;
498
499  .t-line { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
500  .t-prompt { color: $amber; margin-right: 0.4rem; }
501  .t-out { color: $gray-200; }
502  .t-comment { color: $gray-500; }
503  .t-key { color: $amber; }
504  .t-val { color: $green-bright; }
505  .t-cursor {
506    display: inline-block; width: 7px; height: 0.9em; vertical-align: -2px;
507    background: $green-bright;
508    animation: t-blink 1s steps(1) infinite;
509  }
510}
511
512@keyframes t-blink {
513  0%, 50% { opacity: 1; }
514  51%, 100% { opacity: 0; }
515}
516
517.property-row {
518  display: grid;
519  grid-template-columns: minmax(0, 1fr) auto;
520  gap: 1rem 1.5rem;
521  background: $card-bg;
522  border: 1px solid $card-border-color;
523  border-radius: $border-radius;
524  padding: 1rem 1.15rem;
525  margin-bottom: 0.75rem;
526  transition: border-color 200ms ease;
527
528  &:hover { border-color: rgba(107, 158, 120, 0.22); }
529
530  &.is-quiet { border-color: rgba(132, 124, 114, 0.25); }
531
532  .pr-main {
533    min-width: 0;
534    display: flex;
535    flex-direction: column;
536    gap: 0.35rem;
537  }
538
539  .pr-title {
540    font-weight: 600;
541    color: $white;
542    display: flex;
543    align-items: center;
544    min-width: 0;
545
546    a {
547      color: inherit;
548      text-decoration: none;
549      min-width: 0;
550      overflow: hidden;
551      text-overflow: ellipsis;
552      white-space: nowrap;
553
554      &:hover { color: $green-bright; }
555    }
556  }
557
558  .pr-id {
559    font-size: 0.72rem;
560    color: $gray-500;
561    font-family: $font-family-monospace;
562    overflow: hidden;
563    text-overflow: ellipsis;
564    white-space: nowrap;
565    display: flex;
566    align-items: baseline;
567    gap: 0.5rem;
568
569    .pr-id-k {
570      text-transform: uppercase;
571      font-size: 0.6rem;
572      letter-spacing: 0.1em;
573      color: $gray-400;
574      flex-shrink: 0;
575    }
576  }
577
578  .pr-side {
579    display: flex;
580    flex-direction: column;
581    justify-content: space-between;
582    align-items: flex-end;
583    gap: 0.75rem;
584    min-height: 68px;
585  }
586
587  .pr-meta {
588    display: flex;
589    gap: 0.85rem;
590    align-items: flex-end;
591    font-family: $font-family-monospace;
592
593    .pr-meta-cell {
594      display: flex;
595      flex-direction: column;
596      align-items: flex-start;
597      gap: 0.2rem;
598      min-width: 0;
599    }
600
601    .pr-meta-k {
602      color: $gray-500;
603      text-transform: uppercase;
604      font-size: 0.6rem;
605      letter-spacing: 0.1em;
606      line-height: 1;
607    }
608
609    .pr-meta-v {
610      color: $gray-200;
611      font-size: 0.88rem;
612      font-weight: 600;
613      line-height: 1;
614    }
615  }
616
617  .pr-actions {
618    display: flex;
619    gap: 0.4rem;
620  }
621}
622
623@media (max-width: 767px) {
624  .property-row {
625    grid-template-columns: 1fr;
626
627    .pr-side {
628      min-height: 0;
629      align-items: stretch;
630    }
631    .pr-meta {
632      flex-wrap: wrap;
633      justify-content: flex-start;
634    }
635    .pr-actions {
636      justify-content: flex-end;
637    }
638  }
639}
640
641.search-form {
642  position: relative;
643
644  .search-icon {
645    position: absolute;
646    left: 0.9rem;
647    top: 50%;
648    transform: translateY(-50%);
649    color: $gray-500;
650    pointer-events: none;
651    z-index: 2;
652  }
653
654  .search-input {
655    padding-left: 2.5rem;
656    font-size: 0.85rem;
657    border: 1px solid rgba(107, 158, 120, 0.15);
658    background: rgba(19, 18, 14, 0.7);
659    color: $body-color;
660    transition: border-color 200ms ease;
661
662    &::placeholder {
663      color: $gray-500;
664      font-style: normal;
665    }
666
667    &:focus {
668      border-color: rgba(107, 158, 120, 0.4);
669      box-shadow: 0 0 0 2px rgba(107, 158, 120, 0.1);
670      background: $card-bg;
671    }
672  }
673}
674
675.dashboard-toolbar {
676  display: flex;
677  gap: 0.5rem;
678  align-items: stretch;
679
680  .form-control {
681    height: 38px;
682    font-size: 0.85rem;
683  }
684
685  .btn {
686    height: 38px;
687    padding: 0 1.1rem;
688    display: inline-flex;
689    align-items: center;
690    white-space: nowrap;
691  }
692}
693
694.chart-panel {
695  background: $card-bg;
696  border: 1px solid $card-border-color;
697  border-radius: $border-radius;
698  padding: 1rem 1.15rem;
699
700  .chart-panel-header {
701    display: flex;
702    align-items: center;
703    justify-content: space-between;
704    margin-bottom: 0.75rem;
705    gap: 0.75rem;
706  }
707
708  .chart-panel-title {
709    font-size: 0.68rem;
710    font-weight: 600;
711    letter-spacing: 0.12em;
712    text-transform: uppercase;
713    color: $amber;
714    font-family: $font-family-monospace;
715  }
716
717  .chart-panel-body {
718    position: relative;
719  }
720}
721
722
723.rank-list {
724  background: $card-bg;
725  border: 1px solid $card-border-color;
726  border-radius: $border-radius;
727  overflow: hidden;
728  height: 100%;
729  display: flex;
730  flex-direction: column;
731
732  .rank-list-header {
733    display: flex;
734    justify-content: space-between;
735    align-items: center;
736    background: rgba(107, 158, 120, 0.04);
737    padding: 0.6rem 1rem;
738    border-bottom: 1px solid rgba(107, 158, 120, 0.3);
739
740    .rank-list-title {
741      font-size: 0.68rem;
742      font-weight: 600;
743      letter-spacing: 0.12em;
744      text-transform: uppercase;
745      color: $amber;
746      font-family: $font-family-monospace;
747    }
748
749    .rank-list-col {
750      font-size: 0.62rem;
751      font-weight: 600;
752      letter-spacing: 0.1em;
753      text-transform: uppercase;
754      color: $gray-500;
755      font-family: $font-family-monospace;
756    }
757  }
758
759  .rank-list-body {
760    display: flex;
761    flex-direction: column;
762    flex: 1 1 auto;
763  }
764
765  .rank-list-row {
766    display: grid;
767    grid-template-columns: minmax(0, 1fr) auto;
768    gap: 0.75rem;
769    align-items: center;
770    padding: 0.5rem 1rem;
771    border-bottom: 1px solid rgba(107, 158, 120, 0.2);
772    font-size: 0.85rem;
773
774    &:last-child { border-bottom: none; }
775
776    .rank-label {
777      min-width: 0;
778      overflow: hidden;
779      text-overflow: ellipsis;
780      white-space: nowrap;
781      color: $gray-200;
782
783      a {
784        color: inherit;
785        text-decoration: none;
786
787        &:hover {
788          color: $green-bright;
789          text-decoration: underline;
790        }
791      }
792    }
793
794    .rank-count {
795      font-family: $font-family-monospace;
796      font-size: 0.78rem;
797      color: $amber;
798      font-weight: 600;
799    }
800  }
801
802  .rank-list-empty {
803    padding: 1.25rem 1rem;
804    color: $gray-500;
805    font-size: 0.82rem;
806    text-align: center;
807  }
808}
809
810.filter-chip {
811  display: inline-flex;
812  align-items: center;
813  gap: 0.5rem;
814  background: $amber-dim;
815  border: 1px solid $amber-border;
816  color: #ddc06a;
817  font-family: $font-family-monospace;
818  font-size: 0.75rem;
819  padding: 0.3rem 0.6rem;
820  border-radius: 2px;
821  max-width: 100%;
822
823  .filter-chip-label {
824    overflow: hidden;
825    text-overflow: ellipsis;
826    white-space: nowrap;
827  }
828
829  .filter-chip-clear {
830    background: transparent;
831    border: none;
832    color: #ddc06a;
833    cursor: pointer;
834    padding: 0;
835    line-height: 1;
836    opacity: 0.7;
837    transition: opacity 150ms ease;
838
839    &:hover { opacity: 1; }
840  }
841}
842
843.date-range-form {
844  display: grid;
845  grid-template-columns: 1fr 1fr 1fr;
846  gap: 0.5rem;
847
848  @media (max-width: 575px) {
849    grid-template-columns: 1fr;
850  }
851
852  .form-floating label {
853    font-size: 0.78rem;
854  }
855
856  .form-control,
857  .form-select {
858    font-size: 0.85rem;
859  }
860}
861
862.auth-shell {
863  min-height: calc(100vh - 52px);
864  display: grid;
865  grid-template-columns: 1fr 1fr;
866
867  @media (max-width: 991px) {
868    grid-template-columns: 1fr;
869  }
870
871  .auth-form-col {
872    padding: 3rem 2rem;
873    display: flex;
874    align-items: center;
875    justify-content: center;
876  }
877
878  .auth-visual-col {
879    position: relative;
880    overflow: hidden;
881    background: linear-gradient(145deg, #090806 0%, #0e0d0a 60%, $card-bg 100%);
882    border-left: 1px solid rgba(107, 158, 120, 0.3);
883
884    @media (max-width: 991px) { display: none; }
885  }
886
887  .auth-form-wrap {
888    width: 100%;
889    max-width: 380px;
890  }
891}
892
893.codebox {
894  background: #090806;
895  border: 1px solid rgba(107, 158, 120, 0.15);
896  border-radius: $border-radius;
897  color: $green-bright;
898  font-family: $font-family-monospace;
899  font-size: 0.78rem;
900  line-height: 1.7;
901  padding: 1rem 1.1rem;
902  white-space: pre-wrap;
903  word-break: break-word;
904  resize: vertical;
905  min-height: 160px;
906  width: 100%;
907
908  &:focus {
909    outline: none;
910    border-color: $green-border;
911    box-shadow: 0 0 0 2px rgba(107, 158, 120, 0.1);
912  }
913}
914
915// d3-geo renders an SVG inside #map. Tooltip styling lives inline in
916// property_map.js since it needs runtime positioning anyway.
917
918#map {
919  position: relative;
920
921  svg path {
922    transition: fill 80ms ease, stroke 80ms ease;
923  }
924}
925
926.chart-panel-action {
927  background: transparent;
928  border: 1px solid rgba(107, 158, 120, 0.25);
929  color: rgba(221, 215, 205, 0.7);
930  font-family: $font-family-monospace;
931  font-size: 0.62rem;
932  letter-spacing: 0.08em;
933  text-transform: uppercase;
934  padding: 0.25rem 0.55rem;
935  border-radius: $border-radius;
936  cursor: pointer;
937  transition: color 80ms, border-color 80ms;
938
939  &:hover {
940    color: #c9a84c;
941    border-color: rgba(201, 168, 76, 0.5);
942  }
943}