Mental health · Relationships · Intimacy
The stuff
you Google
at midnight.

Clinically grounded, shame-free education for your mental health, relationships, and sex life. Made to land. Built to use.
Start here Get the Daily Dose
Created by Ilana Grines, LMFT and Certified Sex Therapist.
Today’s Dose / 001
You can understand the pattern and still need help changing it.
Digest · Think · Do
  
    /* ========================================
   DAILY THERAPY DOSE
   Global Brand System
======================================== */

@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=DM+Sans:wght@400;500;600;700&family=Source+Serif+4:ital,wght@0,500;1,500&display=swap');

:root {
  --dtd-terracotta: #CB5B3B;
  --dtd-teal: #2F7F8C;
  --dtd-cream: #FFF2EE;
  --dtd-charcoal: #303437;
  --dtd-salmon: #FFA384;
  --dtd-butter: #F0C869;
  --dtd-white: #FFFFFF;

  --dtd-display: "Archivo Black", sans-serif;
  --dtd-body: "DM Sans", sans-serif;
  --dtd-editorial: "Source Serif 4", serif;
}

/* Prevent Squarespace section padding from
   constraining custom DTD sections */
.dtd-section,
.dtd-section * {
  box-sizing: border-box;
}

.dtd-section {
  font-family: var(--dtd-body);
  color: var(--dtd-charcoal);
}

.dtd-section a {
  text-decoration: none;
}

.dtd-section a:focus-visible {
  outline: 3px solid var(--dtd-butter);
  outline-offset: 4px;
}

/* ========================================
   HOMEPAGE HERO
======================================== */

.dtd-hero {
  position: relative;
  overflow: hidden;
  background: var(--dtd-cream);
  border: 1px solid rgba(48, 52, 55, 0.14);
  border-radius: 28px;
}

.dtd-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(340px, 0.85fr);
  min-height: 720px;
}

.dtd-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(42px, 7vw, 110px);
}

.dtd-eyebrow {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 10px;
  margin: 0 0 30px;
  padding: 10px 15px;
  border: 1.5px solid var(--dtd-charcoal);
  border-radius: 999px;
  color: var(--dtd-charcoal);
  font-family: var(--dtd-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.11em;
  line-height: 1.2;
  text-transform: uppercase;
}

.dtd-eyebrow-dot {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  background: var(--dtd-terracotta);
  border-radius: 50%;
}

.dtd-hero-title {
  max-width: 920px;
  margin: 0;
  color: var(--dtd-terracotta);
  font-family: var(--dtd-display);
  font-size: clamp(52px, 7vw, 108px);
  font-weight: 400;
  letter-spacing: -0.065em;
  line-height: 0.88;
  text-transform: uppercase;
}

.dtd-hero-title .dtd-editorial-word {
  color: var(--dtd-charcoal);
  font-family: var(--dtd-editorial);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.045em;
  text-transform: none;
}

.dtd-hero-description {
  max-width: 650px;
  margin: 38px 0 0;
  color: var(--dtd-charcoal);
  font-size: clamp(17px, 1.5vw, 21px);
  font-weight: 500;
  line-height: 1.55;
}

.dtd-hero-description strong {
  font-weight: 700;
}

.dtd-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.dtd-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 14px 22px;
  border: 2px solid var(--dtd-charcoal);
  border-radius: 999px;
  font-family: var(--dtd-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  transition:
    transform 180ms ease,
    background-color 180ms ease,
    color 180ms ease;
}

.dtd-button:hover {
  transform: translateY(-2px);
}

.dtd-button-primary {
  background: var(--dtd-charcoal);
  color: var(--dtd-white);
}

.dtd-button-primary:hover {
  background: var(--dtd-terracotta);
  border-color: var(--dtd-terracotta);
  color: var(--dtd-white);
}

.dtd-button-secondary {
  background: transparent;
  color: var(--dtd-charcoal);
}

.dtd-button-secondary:hover {
  background: var(--dtd-charcoal);
  color: var(--dtd-white);
}

.dtd-founder-line {
  margin: 30px 0 0;
  color: rgba(48, 52, 55, 0.78);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
}

/* Right-side Dose card */

.dtd-hero-feature {
  position: relative;
  display: flex;
  align-items: stretch;
  padding: 28px;
  background: var(--dtd-salmon);
}

.dtd-dose-card {
  position: relative;
  z-index: 2;
  display: flex;
  width: 100%;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  padding: clamp(34px, 5vw, 70px);
  background: var(--dtd-teal);
  border-radius: 22px;
  color: var(--dtd-white);
}

.dtd-dose-card::before {
  position: absolute;
  top: -95px;
  right: -75px;
  width: 230px;
  height: 230px;
  background: var(--dtd-butter);
  border-radius: 50%;
  content: "";
}

.dtd-dose-label {
  position: relative;
  z-index: 2;
  margin: 0;
  color: var(--dtd-white);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
}

.dtd-dose-number {
  opacity: 0.72;
}

.dtd-dose-quote {
  position: relative;
  z-index: 2;
  max-width: 480px;
  margin: 75px 0;
  color: var(--dtd-white);
  font-family: var(--dtd-editorial);
  font-size: clamp(34px, 4vw, 58px);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.04;
}

.dtd-dose-footer {
  position: relative;
  z-index: 2;
  margin: 0;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.55);
  color: var(--dtd-white);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
}

.dtd-dose-strip {
  position: absolute;
  right: 0;
  bottom: 40px;
  z-index: 3;
  padding: 11px 18px;
  background: var(--dtd-charcoal);
  color: var(--dtd-butter);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transform: rotate(-3deg);
}

/* Tablet */

@media screen and (max-width: 1024px) {
  .dtd-hero-inner {
    grid-template-columns: 1fr;
  }

  .dtd-hero-copy {
    min-height: 650px;
  }

  .dtd-hero-feature {
    min-height: 590px;
  }

  .dtd-dose-card {
    min-height: 530px;
  }
}

/* Mobile */

@media screen and (max-width: 640px) {
  .dtd-hero {
    border-radius: 20px;
  }

  .dtd-hero-copy {
    min-height: auto;
    padding: 52px 24px 46px;
  }

  .dtd-eyebrow {
    margin-bottom: 24px;
    font-size: 10px;
  }

  .dtd-hero-title {
    font-size: clamp(49px, 15.2vw, 70px);
    letter-spacing: -0.06em;
  }

  .dtd-hero-description {
    margin-top: 28px;
    font-size: 17px;
  }

  .dtd-hero-actions {
    flex-direction: column;
  }

  .dtd-button {
    width: 100%;
  }

  .dtd-hero-feature {
    min-height: 500px;
    padding: 14px;
  }

  .dtd-dose-card {
    min-height: 472px;
    padding: 34px 28px;
    border-radius: 16px;
  }

  .dtd-dose-card::before {
    top: -80px;
    right: -80px;
    width: 190px;
    height: 190px;
  }

  .dtd-dose-quote {
    margin: 65px 0;
    font-size: 38px;
  }

  .dtd-dose-strip {
    right: 5px;
    bottom: 31px;
  }
}
  
  
The stuff you Google at midnight.

Daily Therapy Dose

The stuff
you Google
at midnight.
