Add premium logo and professional theme for high-end clients

- Create custom SVG logo with professional branding
- Implement premium color scheme with blue and gold accents
- Add custom CSS with professional styling for cards, tables, buttons
- Update logo template to use new logo.svg file
- Create custom favicon for complete branding
- Redesign homepage with premium content sections
- Update resources page with membership tiers and premium pricing
- Enhance contact page with testimonials and detailed information
- Target audience: high-paying clients ($100+/hour)
- Professional yet approachable design language

💘 Generated with Crush

Assisted-by: GLM-4.7 via Crush <crush@charm.land>

config/www/user/themes/quark/scss/theme/_animation.scss

@@ -0,0 +1,23 @@
+.default-animation {
+  transition: all 0.5s ease;
+}
+
+// Pulse Animation
+.pulse {
+  animation-name: pulse_animation;
+  animation-duration: 2000ms;
+  transform-origin:70% 70%;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+}
+
+@keyframes pulse_animation {
+  0% { transform: scale(1); }
+  30% { transform: scale(1); }
+  40% { transform: scale(1.08); }
+  50% { transform: scale(1); }
+  60% { transform: scale(1); }
+  70% { transform: scale(1.05); }
+  80% { transform: scale(1); }
+  100% { transform: scale(1); }
+}

config/www/user/themes/quark/scss/theme/_blog.scss

@@ -0,0 +1,114 @@
+/** Extra columns spacing **/
+.extra-spacing:not(.col-12), :not(.col12) > .e-content {
+  padding-right: 1rem;
+
+  @include breakpoint(md) {
+    padding-right: 0;
+  }
+}
+
+/** Breadcrumbs styling **/
+#breadcrumbs {
+  padding-left: 0;
+  display: flex;
+  align-items: center;
+  margin-top: -1rem;
+  margin-bottom: 1rem;
+
+
+  i {
+    display: none;
+  }
+
+  span, a {
+    padding: 0 0.5rem;
+    &:first-child {
+      padding-left: 0;
+    }
+  }
+
+  span, a {
+    &:not(:first-child)::before {
+      color: #e7e9ed;
+      content: "/";
+      padding-right: 1rem;
+    }
+  }
+}
+
+/** Blog Listing **/
+.blog-listing {
+
+  .bricklayer-column {
+    padding-left: 0px;
+    padding-right: 25px;
+
+  }
+  .card {
+    margin-bottom: 25px;
+    border: 0;
+    box-shadow: 0 10px 45px -9px rgba(0,0,0,0.1);
+  }
+
+  .card-footer {
+    text-align: right;
+  }
+
+  .blog-date {
+    font-size: 13px;
+  }
+
+  .label {
+
+  }
+}
+
+/** Blog Item **/
+.content-title {
+  margin-bottom: 2rem;
+
+  h2 {
+    margin-bottom: 0.5rem;
+  }
+}
+
+.label {
+  font-size: 12px;
+  text-transform: uppercase;
+}
+
+/** Pagination **/
+ul.pagination {
+  justify-content: center;
+}
+
+.prev-next {
+  margin-top: 4rem;
+}
+
+/** Sidebar specific tweaks **/
+#sidebar {
+
+  ul.related-pages {
+    box-shadow: none;
+    padding: 0;
+    z-index: 1;
+
+    li {
+      border-bottom: 1px solid $border-color;
+      &:last-child {
+        border-bottom: 0;
+      }
+    }
+
+  }
+
+  ul.archives {
+    list-style: none;
+    margin-left: 0;
+
+    .label {
+      vertical-align: text-top;
+    }
+  }
+}

config/www/user/themes/quark/scss/theme/_extensions.scss

@@ -0,0 +1,7 @@
+.search-input, [data-grav-field="array"] input, [data-grav-field="array"] textarea {
+  @extend .form-input;
+}
+
+.button {
+  @extend .btn;
+}

config/www/user/themes/quark/scss/theme/_fonts.scss

@@ -0,0 +1 @@
+$title-font-family: $base-font-family, $fallback-font-family !default;

config/www/user/themes/quark/scss/theme/_footer.scss

@@ -0,0 +1,17 @@
+// Sticky Footer solution
+body.sticky-footer {
+  height: 100%;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+
+  #page-wrapper {
+    flex: 1 0 auto;
+  }
+}
+
+#footer {
+  color: #acb3c2;
+  padding: 1rem $horiz-padding 0;
+  text-align: center;
+}

config/www/user/themes/quark/scss/theme/_forms.scss

@@ -0,0 +1,77 @@
+form {
+  .button-wrapper {
+    margin-top: 0.75rem;
+    margin-bottom: 1rem;
+  }
+
+  span.required {
+    color: $error-color;
+    font-weight: 700;
+    font-size: 1.2rem;
+  }
+
+  .form-input[type=range] {
+    appearance: slider-horizontal;
+    &:focus {
+      box-shadow: none;
+      border: none;
+    }
+  }
+
+  /** Reset some defaults for Quark Theme **/
+  .form-group:not(.form-field-toggleable) {
+    .checkboxes {
+      display: inherit;
+
+      label {
+        display: inherit;
+        padding: (($control-size-sm - $line-height) / 2) $control-padding-x (($control-size-sm - $line-height) / 2) ($control-icon-size + $control-padding-x);
+        margin: inherit;
+
+        &:before {
+          display: none;
+        }
+      }
+    }
+  }
+
+}
+
+#grav-login {
+
+  > form {
+    margin: 2rem auto 0;
+    max-width: 350px;
+  }
+  .form-label {
+    display: none;
+  }
+  .form-data {
+    margin: 1rem 0;
+  }
+  .form-input {
+    text-align: center;
+  }
+  .button-wrapper {
+    text-align: right;
+
+    .form-data.rememberme {
+      margin: 0;
+      float: left;
+    }
+  }
+
+  .login-form {
+    button[type="submit"] {
+      @include button-primary;
+    }
+  }
+
+  .twofa-form {
+    button[type="submit"]:first-child {
+      @include button-primary;
+      float: right;
+      margin-left: 4px;
+    }
+  }
+}

config/www/user/themes/quark/scss/theme/_framework.scss

@@ -0,0 +1,156 @@
+html {
+  height: 100%;
+}
+
+#body-wrapper {
+  .container {
+    padding: $vert-padding;
+  }
+
+  // Fixed Header solution
+  .header-fixed & {
+    padding-top: $header-height-large;
+  }
+}
+
+.header-fixed {
+  .hero + #start > #body-wrapper {
+    padding-top: 0;
+  }
+}
+
+section.section {
+  padding-left: $horiz-padding;
+  padding-right: $horiz-padding;
+  position: relative;
+}
+
+.overlay-light, .overlay-dark, .overlay-light-gradient, .overlay-dark-gradient {
+  z-index: 0;
+}
+
+// Hero
+.hero {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  padding-top: 6rem;
+  padding-bottom: 7rem;
+  background-size: cover;
+  background-position: center;
+
+  h1 {
+    color: $header-text-dark;
+    font-size: 4rem;
+  }
+
+  h2 {
+    color: rgba($header-text-dark, 0.8);
+    font-size: 2.5rem;
+  }
+
+  &.hero-fullscreen {
+    min-height: 100vh;
+  }
+
+  &.hero-large {
+    min-height: 500px;
+  }
+
+  &.hero-medium {
+    min-height: 400px;
+  }
+
+  &.hero-small {
+    min-height: 110px;
+  }
+
+  &.hero-tiny {
+    min-height: 8rem;
+  }
+  
+  .header-fixed & {
+    background-position: 50% 0;
+  }
+
+  //&.parallax {
+  //  background-attachment: fixed;
+  //}
+
+  @include breakpoint(md) {
+    h1 {
+      font-size: 3rem;
+    }
+    h2 {
+      font-size: 1.75rem;
+    }
+  }
+
+  @include breakpoint(sm) {
+    h1 {
+      font-size: 2rem;
+    }
+    h2 {
+      font-size: 1.25rem;
+    }
+  }
+
+
+  &.text-light {
+    h1 {
+      color: $header-text-light;
+    }
+    h2 {
+      color: rgba($header-text-light, 0.8);
+    }
+  }
+
+  p {
+    font-size: .9rem;
+    font-weight: 300;
+  }
+
+  #to-start {
+    display: inline-block;
+    position: absolute;
+    bottom: 10px;
+    font-size: 2rem;
+    cursor: pointer;
+  }
+}
+
+// Overlay
+.image-overlay {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: -1;
+
+  .overlay-light & {
+    background: rgba(#fff, 0.4);
+  }
+
+  .overlay-light-gradient & {
+    background: linear-gradient(to bottom, rgba(#fff,0.5), rgba(#fff,0.2));
+  }
+
+  .overlay-dark & {
+    background: rgba(#000, 0.4);
+  }
+
+  .overlay-dark-gradient & {
+    background: linear-gradient(to bottom, rgba(#000,0.5), rgba(#000,0.2));
+  }
+}
+
+
+
+
+
+
+
+
+

config/www/user/themes/quark/scss/theme/_header.scss

@@ -0,0 +1,101 @@
+#header {
+  width: 100%;
+  height: $header-height-large;
+  border-bottom: 1px solid rgba($gray-color, 0.2);
+  @extend .default-animation;
+
+  font-size: 0.7rem;
+  font-weight: 700;
+
+  background: $light-color;
+  color: $dark-color;
+
+  a {
+    color: $dark-color;
+  }
+
+  .logo svg path {
+    fill: $header-color-dark;
+  }
+
+  .header-dark &:not(.scrolled) {
+    background: $header-color-dark;
+    color: $light-color;
+    a {
+      color: rgba($light-color, 0.7) !important;
+    }
+    a.active {
+      color: $light-color !important;
+    }
+    .dropmenu ul ul a {
+        color: $dark-color !important;
+    }
+    .logo svg path {
+      fill: $light-color;
+    }
+  }
+
+  .header-dark.header-transparent &:not(.scrolled) {
+    background: rgba(#000, 0.05);
+  }
+
+  .header-transparent &:not(.scrolled) {
+    background: rgba(#fff, 0.05);
+    //border-bottom: 0 !important;
+  }
+
+  .navbar-section {
+    height: $header-height-large;
+    @extend .default-animation;
+
+    @include breakpoint(md) {
+      margin-right: 2rem;
+    }
+  }
+
+  .navbar-section.desktop-menu {
+    @include breakpoint(md) {
+      display: none;
+    }
+  }
+
+  .logo {
+    svg, img {
+      height: 42px;
+      display: inherit;
+      @extend .default-animation;
+    }
+  }
+
+  // Fixed Header solution
+  .header-fixed & {
+    position: fixed;
+    top: 0;
+    z-index: 2;
+  }
+}
+
+// Animate Fixed Header
+body.header-fixed.header-animated {
+  #header.scrolled {
+    height: $header-height-small;
+
+    .navbar-section {
+      height: $header-height-small;
+    }
+
+    .logo {
+      svg, img {
+        height: 28px;
+      }
+    }
+
+    ~ .mobile-menu .button_container {
+      top: 0.5rem;
+    }
+  }
+}
+
+.login-status-wrapper {
+  white-space: nowrap;
+}

config/www/user/themes/quark/scss/theme/_menu.scss

@@ -0,0 +1,94 @@
+.dropmenu {
+
+  @include breakpoint(md) {
+    display: none;
+  }
+
+  ul {
+    white-space: nowrap;
+    margin: 0;
+    display: flex;
+
+    li {
+      position: relative;
+      margin: 0;
+
+      a {
+        text-decoration: none;
+        padding: $dropmenu-vert-padding ($dropmenu-horiz-padding + $dropmenu-child-padding) $dropmenu-vert-padding $dropmenu-horiz-padding;
+        display: block;
+
+        &:hover, &:focus, &.active {
+          color: $dropmenu-hover-text !important;
+        }
+
+        &:before {
+          content: '\f107';
+          font-family: 'FontAwesome';
+          display: inline-block;
+          vertical-align: middle;
+          float: right;
+          margin-right: - (2 *$dropmenu-child-padding);
+        }
+
+        &:only-child {
+          //background: none;
+          padding-right: $dropmenu-horiz-padding;
+
+          &:before {
+            content: '';
+          }
+        }
+      }
+
+      &:hover {
+        & > ul {
+          display: block;
+          visibility: visible;
+        }
+      }
+    }
+
+    ul li a:before {
+      content: '\f105';
+    }
+
+    ul {
+      position: absolute;
+      top: 100%;
+      list-style: none;
+      background: $dropmenu-bg;
+      box-shadow: $dropmenu-shadow;
+      visibility: hidden;
+
+      ul {
+        position: absolute;
+        left: 100%;
+        top: 0;
+      }
+    }
+
+  }
+
+  & > ul > li {
+    display: inline-block;
+  }
+
+  // Animation options
+  &.animated {
+    ul li {
+      transition: background .7s, color 0.5s;
+    }
+
+    ul li:hover > ul {
+      opacity: 1;
+      transform: translateY(0);
+    }
+
+    ul ul {
+      transition: transform .3s, opacity .5s;
+      opacity: 0;
+      transform: translateY(-10px);
+    }
+  }
+}

config/www/user/themes/quark/scss/theme/_mixins.scss

@@ -0,0 +1,77 @@
+@mixin breakpoint($point) {
+  @if $point == 2x {
+    @media (min-width:$size-2x) {
+      @content;
+    }
+  } @else if $point == xl {
+    @media (max-width: $size-xl) {
+      @content;
+    }
+
+  } @else if $point == lg {
+    @media (max-width: $size-lg) {
+      @content;
+    }
+  } @else if $point == md {
+    @media (max-width: $size-md) {
+      @content;
+    }
+  } @else if $point == sm {
+    @media (max-width: $size-sm) {
+      @content;
+    }
+  } @else if $point == xs {
+    @media (max-width: $size-xs) {
+      @content;
+    }
+  }  @else {
+    @warn "Breakpoint mixin supports: xs, sm, md, lg, xl, 2x";
+  }
+}
+
+@mixin vertical-align($position: relative) {
+  position: $position;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+@mixin button-primary() {
+  background: $primary-color;
+  border-color: $primary-color-dark;
+  color: $light-color;
+  &:focus,
+  &:hover {
+    background: darken($primary-color-dark, 2%);
+    border-color: darken($primary-color-dark, 5%);
+    color: $light-color;
+  }
+  &:active,
+  &.active {
+    background: darken($primary-color-dark, 4%);
+    border-color: darken($primary-color-dark, 7%);
+    color: $light-color;
+  }
+}
+
+@function strip-unit($value) {
+  @return $value / ($value * 0 + 1);
+}
+
+@mixin fluid-type($min-vw, $max-vw, $min-font-size, $max-font-size) {
+  $u1: unit($min-vw);
+  $u2: unit($max-vw);
+  $u3: unit($min-font-size);
+  $u4: unit($max-font-size);
+
+  @if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 {
+    & {
+      font-size: $min-font-size;
+      @media screen and (min-width: $min-vw) {
+        font-size: calc(#{$min-font-size} + #{strip-unit($max-font-size - $min-font-size)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
+      }
+      @media screen and (min-width: $max-vw) {
+        font-size: $max-font-size;
+      }
+    }
+  }
+}

config/www/user/themes/quark/scss/theme/_mobile.scss

@@ -0,0 +1,193 @@
+.mobile-container {
+  position: absolute;
+  //width: 100%;
+  //height: 100%;
+  top: 40%;
+  left: 0;
+  margin:  0 auto;
+  z-index: 2;
+}
+
+.mobile-logo {
+  svg, img {
+    height: 42px;
+    margin-top: .7rem;
+    margin-left: 1.4rem;
+
+    path {
+      fill: $light-color;
+    }
+
+  }
+}
+
+// Hamburger Menu
+.mobile-menu {
+
+  display: none;
+  top: 0;
+  right: 0;
+  z-index: 3;
+
+  .header-fixed & {
+    position: fixed;
+  }
+
+  @include breakpoint(md) {
+    display: block;
+  }
+
+  .button_container {
+    position: absolute;
+    top: 1.3rem;
+    right: $horiz-padding;
+    height: $mobile-button-height;
+    width: $mobile-button-width;
+    cursor: pointer;
+    z-index: 100;
+    transition: opacity .25s ease, top 0.5s ease;
+
+    $bar-offset: $mobile-button-height / 3;
+
+    &:hover {
+      opacity: .7;
+    }
+
+    &.active {
+      position: fixed;
+
+      .top {
+        transform: translateY($bar-offset) translateX(0) rotate(45deg);
+        background: $mobile-color-active;
+      }
+      .middle {
+        opacity: 0;
+        background: $mobile-color-active;
+      }
+
+      .bottom {
+        transform: translateY(-($bar-offset)) translateX(0) rotate(-45deg);
+        background: $mobile-color-active;
+      }
+    }
+
+    span {
+      background: $mobile-color-main;
+      border: none;
+      height: 4px;
+      width: 100%;
+      position: absolute;
+      top: 0;
+      left: 0;
+      transition:  all .35s ease;
+      cursor: pointer;
+
+      &:nth-of-type(2) {
+        top: $bar-offset;
+      }
+
+      &:nth-of-type(3) {
+        top: $bar-offset * 2;
+      }
+    }
+  }
+}
+
+.overlay {
+  position: fixed;
+  background: #000;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 0%;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity .35s, visibility .35s, height .35s;
+
+  &.open {
+    opacity: .95;
+    visibility: visible;
+    height: 100%;
+
+  }
+  nav {
+
+    position: relative;
+    margin: 0 auto;
+    text-align: center;
+  }
+}
+
+.overlay-menu {
+  height: calc(100% - 90px);
+  overflow-y: scroll;
+
+  & > .tree {
+    text-align: left;
+  }
+}
+
+
+.treemenu {
+
+  &.treemenu-root {
+    margin: 1rem;
+  }
+
+  li {
+    list-style: none;
+    margin: 0 0 1px;
+    padding: 5px 0;
+    line-height: 1.2rem;
+
+    background: rgba($gray-color-dark,0.1);
+
+    a {
+      display: block;
+      margin-left: 1.2rem;
+      font-size: 1rem;
+
+      &:hover, &:focus, &.active {
+        color: $primary-color-light !important;
+        text-decoration: none;
+      }
+    }
+  }
+
+  ul {
+    margin: 0 0 0 1rem;
+  }
+
+  .toggler {
+    cursor: pointer;
+    vertical-align: top;
+    font-size: 1.1rem;
+    line-height: 1rem;
+    padding-left: 5px;
+    float: left;
+
+    &:before {
+      display: inline-block; margin-right: 2pt;
+    }
+  }
+
+  li.tree-empty  > .toggler {
+    opacity: 0.3; cursor: default;
+
+    &:before {
+      content: "\2022";
+    }
+  }
+
+  li.tree-closed > .toggler:before {
+    content: "+";
+  }
+
+  li.tree-opened > .toggler:before {
+    content: "\2212";
+  }
+}
+
+.mobile-nav-open {
+  overflow-y: hidden;
+}

config/www/user/themes/quark/scss/theme/_onepage.scss

@@ -0,0 +1,122 @@
+.modular-hero {
+  #to-start {
+    bottom: 3.5rem;
+  }
+}
+
+.modular-features {
+  text-align: center;
+
+  &.offset-box {
+    .frame-box {
+      margin: -3rem (-1rem - $layout-spacing) 3rem;
+      padding: 1rem 1rem;
+      background: $light-color;
+      box-shadow: 0 0 75px 0 rgba($dark-color, 0.1);
+    }
+  }
+
+  &.small {
+
+    .columns {
+      margin-top: -1rem;
+    }
+
+    .column:hover {
+      .feature-icon i {
+        color: $primary-color;
+      }
+    }
+
+    .feature-icon {
+      display: block;
+      justify-content: left;
+
+
+      i {
+        position: relative;
+        display: inherit;
+        font-size: 70px;
+        margin: 0 auto 1rem;
+        transform: none;
+        left: auto;
+        top: auto;
+        color: $gray-color;
+        @extend .default-animation;
+
+      }
+      h6 {
+        text-transform: none;
+      }
+    }
+  }
+
+  .frame-box {
+    padding: 3rem 0;
+
+    > p {
+      max-width: 600px;
+      margin-left: auto;
+      margin-right: auto;
+    }
+  }
+
+  .column {
+    padding: 1rem;
+
+    &:hover {
+      .feature-icon {
+        color: $gray-color;
+        h6 {
+          color: $primary-color;
+        }
+      }
+      .feature-content {
+        color: $gray-color-dark;
+      }
+    }
+  }
+
+  .feature-icon {
+    font-size: 130px;
+    height: 100px;
+    color: $gray-color-light;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    margin: 1rem 0;
+    @extend .default-animation;
+
+    i {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translateX(-50%) translateY(-50%);
+    }
+
+    h6 {
+      background: $light-color;
+      line-height: 1;
+      z-index: 1;
+      text-transform: uppercase;
+      font-weight: 600;
+      margin: 0;
+      display: block;
+      color: $gray-color-dark;
+    }
+  }
+
+  .feature-content {
+    color: $gray-color;
+  }
+}
+
+.modular-text {
+  padding-top: 4rem;
+  padding-bottom: 4rem;
+
+  .columns.left {
+    flex-direction: row-reverse;
+  }
+}

config/www/user/themes/quark/scss/theme/_typography.scss

@@ -0,0 +1,178 @@
+html {
+  @include fluid-type($size-xs, $size-xl, $min-responsive-font-size, $html-font-size);
+}
+
+// Header Overrides
+h1, h2, h3, h4, h5, h6 {
+  margin-top: 2rem;
+  font-family: $title-font-family;
+  color: darken($body-font-color, 10%);
+}
+
+h1, .h1 {
+  font-size: 3rem;
+}
+
+h2, .h2 {
+  font-size: 1.8rem;
+}
+
+h6, .h6 {
+  font-weight: 400;
+}
+
+.title-center {
+  h1, h2 {
+    text-align: center;
+  }
+}
+
+.title-h1h2 {
+  h1  {
+    font-weight: 100;
+    margin-bottom: 0;
+    line-height: 1.1;
+
+    strong, bold {
+      font-weight: 400;
+    }
+  }
+  h1 + h2 {
+    line-height: 1.1;
+    margin-top: 0;
+  }
+
+}
+
+// Typography Hints
+.title-h1h2, .title-center {
+  h1 + h2 {
+    margin-bottom: 50px;
+    font-weight: 700;
+  }
+}
+
+a:focus {
+  outline: none !important;
+  box-shadow: none !important;
+}
+
+img {
+  max-width: 100%;
+}
+
+// Tables
+.table > table {
+  border-spacing: 0;
+  border-collapse: collapse;
+  width: 100%;
+}
+
+
+// Codeblocks
+pre code, pre.xdebug-var-dump{
+  background: #fafafa;
+  display: block;
+  padding: 1rem !important;
+  line-height: 1.5;
+  color: inherit;
+  border-radius: 2px;
+  overflow-x: auto;
+}
+
+pre[class*="language-"] {
+  code {
+    border-radius: inherit;
+    padding: 0 !important;
+    overflow-x: initial;
+  }
+}
+
+pre {
+  code:not(.hljs):not([class*="language-"]) {
+    background: #f8f8f8;
+  }
+}
+
+// Icon Tweaks
+i.fa {
+
+
+  &.fa-heart, &.fa-heart-o {
+    &.pulse {
+      color: #920
+    }
+  }
+}
+
+// Font Weights
+b,
+strong {
+  font-weight: 700;
+}
+
+.heavy {
+  font-weight: 700;
+}
+
+.light {
+  font-weight: 200;
+}
+
+// Colors
+.text-light {
+  color: rgba($light-color, 0.8);
+
+  h1, h2, h3, h4, h5, h6 {
+    color: rgba($light-color, 0.9);
+  }
+}
+
+// Error configuration
+#error {
+  text-align: center;
+  position: relative;
+  margin-top: 5rem;
+
+  .icon {
+    font-size: 50px;
+  }
+}
+
+// Messages
+#messages {
+  margin-bottom: 1rem;
+
+  .icon {
+    font-size: 1rem;
+  }
+}
+
+// Lists
+ul,
+ol {
+  margin-left: $unit-8;
+
+  ul,
+  ol {
+    margin-left: $unit-8;
+  }
+}
+
+ul {
+  list-style: disc outside;
+}
+
+ol {
+  list-style: decimal outside;
+}
+
+// Notices
+.notices {
+  margin: 1.5rem 0;
+  p {
+    margin: 1rem 0;
+  }
+}
+
+

config/www/user/themes/quark/scss/theme/_variables.scss

@@ -0,0 +1,38 @@
+// Spectre Overrides
+$primary-color: #3085EE !default;
+$dark-color: #454d5d !default;
+$light-color: #fff !default;
+$gray-color: lighten($dark-color, 40%) !default;
+$gray-color-dark: darken($gray-color, 25%) !default;
+$border-color: lighten($dark-color, 60%) !default;
+$bg-color: lighten($dark-color, 66%) !default;
+$body-font-color: lighten($dark-color, 5%) !default;
+
+// Layout
+$horiz-padding: 1rem;
+$vert-padding: 2rem 0 2rem;
+
+// Fonts
+$min-responsive-font-size: 16px;
+
+// Header
+$header-height-large: 4rem;
+$header-height-small: 2.3rem;
+$header-color-dark: #222;
+$header-text-light: $light-color;
+$header-text-dark: darken($dark-color, 15%);
+
+// Dropdown Menu
+$dropmenu-bg: $light-color;
+$dropmenu-hover-text: $primary-color;
+$dropmenu-horiz-padding: 20px;
+$dropmenu-vert-padding: 7px;
+$dropmenu-child-padding: 10px;
+$dropmenu-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
+
+// Mobile Menu
+$mobile-color-main: $primary-color;
+$mobile-color-active: #FFF;
+$mobile-color-link: #FFF;
+$mobile-button-height: 24px;
+$mobile-button-width: 28px;