Import the pebble dev site into devsite/

devsite/source/_sass/sections/retreat.scss

@@ -0,0 +1,178 @@
+/**
+ * Copyright 2025 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+$banner-blue: #066AC4;
+
+.retreat-page {
+  font-size: 1.3rem;
+
+  h1 {
+    background-color: $banner-blue;
+    color: #fff;
+    font-size: 1.6em;
+    margin: 0;
+    padding: 2rem 0;
+    text-align: center;
+    text-transform: uppercase;
+    width: 100%;
+  }
+
+  .anchor {
+    &::before {
+      content: ' ';
+      display: block;
+      height: $header-height + 60px;
+      margin-top: -1 * ($header-height + 60px);
+      visibility: hidden;
+    }
+  }
+
+  .container {
+    margin-top: 1rem;
+  }
+}
+
+.retreat-banner {
+  background-color: #066AC4;
+  overflow: hidden;
+  position: relative;
+  width: 100%;
+  max-height: 620px;
+
+  @include bp-max (xs) {
+    padding-top: 3rem;
+  }
+
+  img,
+  svg {
+    width: 100%;
+    display: block;
+    max-width: 1300px;
+    margin: 0 auto;
+  }
+}
+
+.retreat-nav {
+  background-color: transparentize(#222, 0.3);
+  left: $sidebar-width + $section-menu-width;
+  position: fixed;
+  text-align: center;
+  top: $header-height;
+  right: 0;
+  z-index: 100;
+
+  @include bp-max ($sidebar-hide-at) {
+    left: 0;
+    width: 100%;
+  }
+
+  .nav {
+    display: inline-block;
+    margin: 0;
+  }
+
+  ul {
+    @include display(flex);
+  }
+
+  li {
+    @include flex(1 0 auto);
+    display: block;
+
+    &:last-child > a {
+      margin-right: 0 !important;
+    }
+
+    > a {
+      color: #fff;
+      display: block;
+      padding: 1rem 0;
+
+      &:hover,
+      &:focus {
+        background-color: transparentize(darken($banner-blue, 30), 0.3);
+      }
+    }
+  }
+}
+
+.retreat-location {
+
+  .row {
+    background-image: url('../images/community/events/developer-retreat-2015/san-francisco.jpg');
+    height: 35vw;
+    background-size: cover;
+    background-position: center bottom;
+    min-height: 300px;
+  }
+
+  .retreat-location-strap {
+    background-color: rgba(255, 255, 255, 0.7);
+    text-align: center;
+    margin-bottom: 0;
+    padding: 1em 0;
+    font-size: 1.2rem;
+    margin-top: 5vw;
+
+    @include bp-min(s) {
+      padding: 2em 0;
+      margin-top: 20vw;
+      font-size: 1.3em;
+    }
+  }
+
+}
+
+.retreat-faq {
+
+  dt,
+  dd {
+    line-height: 1.3em;
+    margin: 0 0 1em;
+    padding: 0.5em 0 0 2.5em;
+    position: relative;
+
+    &::before {
+      border-radius: $base-border-radius;
+      color: $white;
+      font-size: 1.4em;
+      font-weight: normal;
+      left: 0;
+      line-height: 1em;
+      padding: 0.5rem 0;
+      position: absolute;
+      text-align: center;
+      top: 0;
+      width: 1.4em;
+    }
+  }
+
+  dt {
+
+    &::before {
+      background-color: $pebble-pink;
+      content: 'Q';
+    }
+  }
+
+  dd {
+
+    &::before {
+      background-color: $pebble-green;
+      content: 'A';
+    }
+  }
+}