@import url('https://fonts.googleapis.com/css2?family=Host+Grotesk:wght@300;400;600;800&display=swap');

  /* Safety net: if the wiki ever renders this block twice,
     show only the first copy. */
  .fdt-hub ~ .fdt-hub { display: none !important; }

  /* ---- FirstDigital brand tokens (Brand Guide 2025, p.11) ---- */
  .fdt-hub {
    --fd-navy:        #003366;  /* headlines, backgrounds, icons */
    --fd-blue:        #307ab2;  /* headlines, backgrounds, icons */
    --fd-blue-bright: #38b2e3;  /* stand-out headlines, icons    */
    --fd-red:         #cf333d;  /* accents - use selectively     */
    --fd-body:        #2e404d;  /* paragraph text                */
    --fd-secondary:   #8f9499;  /* secondary text                */
    --fd-bg-mid:      #dedede;  /* backgrounds                   */
    --fd-bg-light:    #f0f0f0;  /* backgrounds                   */
    --fd-ice:         #e3f1f8;
    --fd-white:       #ffffff;
  }

  .fdt-hub, .fdt-hub * { box-sizing: border-box; }

  .fdt-hub {
    font-family: 'Host Grotesk', 'Segoe UI', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
    font-weight: 300;
    color: var(--fd-body);
    background: var(--fd-white);
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px 30px;
    -webkit-font-smoothing: antialiased;
  }

  /* ---- Masthead: full-colour logo on white (Logo Rules, p.10) ---- */
  .fdt-masthead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding: 22px 0 18px;
    border-bottom: 1px solid var(--fd-bg-mid);
  }

  .fdt-masthead img { height: 46px; width: auto; display: block; }

  .fdt-masthead-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fd-secondary);
    white-space: nowrap;
  }

  /* ---- Hero: flat brand colour, no imagery ---- */
  .fdt-hero {
    margin-top: 22px;
    border-radius: 6px;
    padding: 34px 34px 32px;
    background: linear-gradient(100deg,
      var(--fd-navy) 0%,
      var(--fd-navy) 56%,
      var(--fd-blue) 100%);
  }

  /* red rule = brand accent motif (Brand Guide p.4) */
  .fdt-rule {
    width: 62px; height: 4px;
    background: var(--fd-red);
    border: 0;
    margin: 0 0 16px;
  }

  .fdt-eyebrow {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--fd-blue-bright);
    margin-bottom: 9px;
  }

  .fdt-hero h1 {
    font-size: clamp(26px, 3.6vw, 36px);
    font-weight: 800;
    line-height: 1.14;
    letter-spacing: -0.01em;
    color: var(--fd-white);
    margin: 0 0 12px;
  }

  .fdt-hero p {
    font-size: 15.5px;
    font-weight: 300;
    line-height: 1.62;
    color: #dbe6ef;
    margin: 0;
    max-width: 560px;
  }

  /* ---- Card grid ---- */
  .fdt-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
    margin-top: 24px;
  }

  .fdt-card {
    display: flex;
    flex-direction: column;
    background: var(--fd-white);
    border: 1px solid var(--fd-bg-mid);
    border-radius: 6px;
    padding: 24px 24px 22px;
    height: 100%;
    text-decoration: none !important;
    color: inherit;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  }

  .fdt-card:hover {
    transform: translateY(-3px);
    border-color: var(--fd-blue-bright);
    box-shadow: 0 12px 26px rgba(0,51,102,0.14);
  }

  .fdt-card:focus-visible {
    outline: 3px solid var(--fd-blue-bright);
    outline-offset: 2px;
  }

  .fdt-badge {
    width: 52px; height: 52px;
    border-radius: 8px;
    background: var(--fd-ice);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    flex: 0 0 auto;
  }

  /* icons: dark-blue stroke, bright-blue accent (Brand Guide p.14) */
  .fdt-badge svg {
    width: 25px; height: 25px;
    fill: none;
    stroke: var(--fd-navy);
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .fdt-badge svg .accent { stroke: var(--fd-blue-bright); }

  .fdt-title {
    display: block;
    font-size: 17.5px;
    font-weight: 800;
    line-height: 1.26;
    color: var(--fd-navy);
  }

  .fdt-sub {
    display: block;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.6;
    color: var(--fd-body);
    margin-top: 7px;
  }

  .fdt-cta {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: auto;
    padding-top: 18px;
    font-size: 13px;
    font-weight: 600;
    color: var(--fd-red);
  }

  .fdt-cta svg {
    width: 15px; height: 15px;
    fill: none;
    stroke: var(--fd-red);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .2s ease;
  }

  .fdt-card:hover .fdt-cta svg { transform: translateX(4px); }

  /* ---- Footer ---- */
  .fdt-footer {
    margin-top: 30px;
    padding-top: 18px;
    border-top: 1px solid var(--fd-bg-mid);
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 12.5px;
    color: var(--fd-secondary);
  }

  @media (max-width: 720px) {
    .fdt-grid { grid-template-columns: 1fr; }
    .fdt-hub { padding: 0 12px 24px; }
    .fdt-masthead img { height: 38px; }
    .fdt-hero { padding: 26px 22px 24px; }
    .fdt-footer { justify-content: flex-start; }
  }

  @media (prefers-reduced-motion: reduce) {
    .fdt-card, .fdt-cta svg { transition: none; }
  }

Fiber · Internet · Cloud · Voice

---

Microsoft Teams

Resource Hub

Everything you need to set up, use, and troubleshoot Microsoft Teams voice and calling — in one place, with local support from a real human.

FirstDigital · Microsoft Teams Resource Hub Need help? Contact your FirstDigital support team.