orchard

  1@use "../../base/styles/variables" as *;
  2
  3.hero {
  4  position: relative;
  5  background: #090806;
  6  border-bottom: 1px solid rgba(107, 158, 120, 0.3);
  7  padding: 4rem 0 4rem;
  8
  9  .hero-eyebrow {
 10    display: inline-flex;
 11    align-items: center;
 12    gap: 0.55rem;
 13    font-family: $font-family-monospace;
 14    font-size: 0.72rem;
 15    font-weight: 600;
 16    letter-spacing: 0.12em;
 17    text-transform: uppercase;
 18    color: $amber;
 19    background: $amber-dim;
 20    border: 1px solid $amber-border;
 21    padding: 0.35rem 0.75rem;
 22    border-radius: 999px;
 23
 24    .eyebrow-dot {
 25      width: 6px; height: 6px; border-radius: 50%;
 26      background: $green;
 27    }
 28  }
 29
 30  .hero-title {
 31    font-size: clamp(2rem, 5vw, 3.2rem);
 32    font-weight: 700;
 33    line-height: 1.1;
 34    color: $white;
 35    letter-spacing: -0.01em;
 36    margin-top: 1.5rem;
 37
 38    .accent { color: $green-bright; }
 39  }
 40
 41  .hero-sub {
 42    color: $gray-300;
 43    font-size: 1rem;
 44    line-height: 1.7;
 45    margin-top: 1.25rem;
 46    max-width: 620px;
 47  }
 48
 49  .hero-ctas {
 50    display: flex;
 51    gap: 0.75rem;
 52    flex-wrap: wrap;
 53    margin-top: 1.75rem;
 54
 55    .btn {
 56      font-size: 0.82rem;
 57      letter-spacing: 0.04em;
 58      padding: 0.6rem 1.1rem;
 59    }
 60  }
 61}
 62
 63.feature {
 64  background: $card-bg;
 65  border: 1px solid $card-border-color;
 66  border-radius: $border-radius;
 67  padding: 1.5rem;
 68  height: 100%;
 69  transition: border-color 250ms ease;
 70
 71  &:hover { border-color: rgba(107, 158, 120, 0.62); }
 72
 73  .feature-label {
 74    font-family: $font-family-monospace;
 75    font-size: 0.68rem;
 76    font-weight: 600;
 77    letter-spacing: 0.12em;
 78    text-transform: uppercase;
 79    color: $amber;
 80  }
 81
 82  .feature-title {
 83    color: $white;
 84    font-size: 1.05rem;
 85    font-weight: 600;
 86    margin-top: 0.5rem;
 87  }
 88
 89  .feature-desc {
 90    color: $gray-300;
 91    font-size: 0.88rem;
 92    line-height: 1.65;
 93    margin-top: 0.6rem;
 94    margin-bottom: 0;
 95  }
 96}
 97
 98.stat-strip {
 99  // Transparent rather than the ground colour, so the page grid runs through
100  // the strip instead of stopping at it.
101  background: transparent;
102  border-top: 1px solid rgba(107, 158, 120, 0.3);
103  border-bottom: 1px solid rgba(107, 158, 120, 0.3);
104  padding: 1.5rem 0;
105
106  .stat { text-align: center; padding: 0 1rem; }
107
108  .stat-label {
109    font-family: $font-family-monospace;
110    font-size: 0.66rem;
111    font-weight: 600;
112    letter-spacing: 0.12em;
113    text-transform: uppercase;
114    color: $gray-500;
115  }
116
117  .stat-value {
118    font-size: 1.75rem;
119    font-weight: 700;
120    color: $green-bright;
121    letter-spacing: -0.01em;
122    line-height: 1.2;
123    margin-top: 0.2rem;
124  }
125}
126